PROJECT REPORT ON - BUSINESS BASED IT INSTITUTE LEARNING WEBSITE A PROJECT WORK REPORT SUBMITTED IN PARTIAL FULFILMENT OF THE REQUIRMENT FOR THE AWARD OF THE DEGREE ADVANCE DIPLOMA IN COMPUTER APPLICATIONS (SESSION 2022-2023) DEPARTMENT OF CORRSPONDANCE STUDIES PANJAB UNIVERSITY, CHANDIGARH Submitted to: Chairperson, Department Of Correspondence Studies Panjab University, Chandigarh Submitted By: Brij Mohan Sharma, Enrollment No: 492251100015 Roll number: 55311 Class: ADCA Semester: 2nd, 2023 USOL, Panjab University Chandigarh PANJAB UNIVERSITY, CHANDIGARH CERTIFICATE This is to certify that the Project Report entitled "BUSINESS BASED IT INSTITUTE LEARNING WEBSITE" submitted to University School of Open Learning, Panjab University, Chandigarh in partial fulfilment of the requirements for the degree of Advance Diploma in Computer Application (ADCA), 20222023 is a faithful record of bonafide project work carried out by Brij Mohan Sharma, Roll No. 55311 under USOL direct supervision and no part of this thesis has been submitted for any other degree or diploma at this or any other University/Institute. ACKOWLEDGEMENT I am thankful to the chairperson and all the teachers of the Department of Computer Applications at Panjab University in Chandigarh. Their continuous support and encouragement have played a significant role in the successful completion of this project. Their guidance, inspiration, and constructive suggestions have been invaluable in helping me prepare this project. I am grateful for their ceaseless cooperation, which has crowned all my efforts with success. Table of content Sr.no 1. Title Introduction Page no 5 2. About the Project 6 3. Requirements 7 4. Hypertext markup language (HTML+Html 5) 8-26 5. Cascading style sheet (CSS) 27-36 6. Project Coding + Screenshots 37-54 7. Php+ Database with Screenshots 55-57 8. References 58 Introduction Project Name BUSINESS BASED IT INSTITUTE LEARNING WEBSITE Intro- My project is about the Skill based institute, a type of business website which is for the users who are seeking to build up their IT skills like C++, Java, Python and Digital Marketing etc. Such institutions websites are in trending. The website which is I have created is mainly made up of HTML/HTML5, CSS, Php. This website has several pages like Home, about us, contact us, Privacy policy etc. Below the home page there is various pages of course that user can visit and, in each page, there is contact us button which leads the user to contact us page to collect the information entered by user. For storing this I have used database SQL by which an institution can capture the leads and contact them. Rest of the work will be of sales team to close the students. I have mainly focused on making the front end of website using mainly div tag. From the concept of <div> menu and other items are created and for creativity have implemented the css to make it look professional. About the Project This project is based on the modern-day IT training institutions. You might have seen various websites nowadays online offering various it courses. How these websites are created using the html, css and php I have tried to demonstrate using this project. Project is mainly divided into two phases. Front End: it is the main part with which user interact on screen. It is all designed by using the html html5 css mainly. Back End: this is the part which user don’t see but it actually is major and important part of any website. In this I have connected the MySQL database and used php which is server side scripting language to connect this database to front end and take data from there and store it in the database. Requirements Sr no. 1 2 3 4 5 Name Description Operating System Ram XAMPP Code editor Web Browser 32/64 bit, windows, mac, linux 2 GB Running environment Visual studio code editor Chrome/Mozilla (for output) Hypertext Markup language Html is known as hypertext markup language. It is used to create the web pages. It was developed by the Tim Berner lee in 1993. The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. (“WebD2: A Brief History of HTML University of Washington”) The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999. Html describes a structure of a web page basically. Html have a series of elements also known as tags. Html instructs the browser how to display the content on a webpage. 1. HTML DOCUMENT STRUCTURE <html> <head> <title> here comes title </title> </head> <body> </body> </html> This is the basic html document structure. Lets now understand the tags and how to use them in the html document structure. Basics tags <b> - is bold tag it used to bold the text Here we used <b> tag lets now check output Output: Lets see other remaining tags now <u>- is underline tag, it will underline the text <i> it will change the text to italtic Output: Output shows text is underlined and in italic format as per the tags used <center>- it will make your text go in center of page Output : Heading tags ( <h1> to <h6> Actual code : <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Output : <br>- break tag <p>- paragraph tag <hr>-horizontal rule tag Lets see implementation of <br> tag firstly Actual code: Output: it basically break the line to next line Now lets see <p> tag Actual code: Output: it gives paragraph <hr>- horizontal rule Actual code: Output: It give this horizontal line below Image tag- <img> This tag is used to display the image This tag have various attributes such as width,height,alternative text etc We will discuss firstly the basic tags then attributes Actual code: Output: As you will see image is too big. Now attributes will be used to set the right width and height of this image. Attributes: Width: is used to set the width of image in pixels Height: is used to set the height of the image in pixels. Output: Now you will see when we used attribute of image tag , now its height and width is correctly set. Now we will be looking at some of list elements List tag <li> There are mainly two types of lists: 1. Ordered list Unordered list 1. Ordered list <ol> Actual code: Output: Unordered list <ul> Actual code: Output: Now we will be looking at how to create table in html with the help of <table> tag <table> In this comes <th> tag for table heading <tr> tag for table row Lets see at code for clear understanding, Output: Html <form> elements : Form: In a website most important tag is form tag. It allows your to create a form Form have various input tags lets understand them one by one. 1. Text: or input type=”text” It is used for creating such as name, its limit is 100 characters. Code: Output: 2. Textarea – it is used more like for address type and its text box is bigger and is not limited to 100 characters just like the text. 3. <form> 4. <label for="">Name</label> 5. <input type="text"> 6. <br> 7. <label for="">Address</label> 8. <textarea name="" id="" cols="30" rows="10"></textarea> 9. </form> Output: 3 radio: if only one option to be chosen, we use then radio option <form> <label for="">Name</label> <input type="text"> <br> <br> <label for="">Address</label> <textarea name="" id="" cols="30" rows="10"></textarea> <br><br> <label for="">Gender</label> <input type="radio" name="Gen" value="male">Male <input type="radio" name="Gen" value="female">Female <br><br> </form> Output: 4, checkbox- if there are multiple options to be selected we use checkbox Actual code: <form> <label for="">Name</label> <input type="text"> <br> <br> <label for="">Address</label> <textarea name="" id="" cols="30" rows="10"></textarea> <br><br> <label for="">Gender</label> <input type="radio" name="Gen" value="male">Male <input type="radio" name="Gen" value="female">Female <br><br> <label for="">Subjects</label> <input type="checkbox" name="" id=""><label for="">maths</label> <input type="checkbox" name="" id=""><label for="">chemistry</label> <input type="checkbox" name="" id=""><label for="">phsycis</label> <br><br> </form> Output : 5, Select and option- you might have seen a list for choosing country that is made by this option Actual code: <select name="" <option <option <option <option </select> id=""> value="">--Country</option> value="">india</option> value="">usa</option> value="">china</option> Output : 6, email (html5) <label for="">Email</label> <input type="email"> </form> Output : 7, password: anything written inside this text box will come in ******. Its for security purposes. <br><br> <label for="">password</label> <input type="password" name="" id=""> </form> Output: 8, file <br><br> <label for="">upload file</label> <input type="file" name="" id=""> </form> Output: 9, submit- input type submit is used to submit the form 10. reset- input type reset will reset complete form Actual code: submit and reset <br><br> <input type="submit"> <input type="reset" value="reset"> </form> Output: Cascading style sheet(css) CSS- is known as cascading style sheet. it is used basically to add styling to a web page. There are 3 types of css 1. Inline css 2. Internal css 3. External css Lets now look at how they are used in web pages 1. Inline css- is the one that is used inside the tags or elements. This is most useful when there is a lot of css code and you are not getting the css property in external file you can simply apply inline css to tags whose properties you want to change. Example: Actual code: <html> <head> <title> here comes title </title> </head> <body> <h1 style="color: red;">hello world</h1> </tbody> </table> </ul> </body> </html> Here we used inline css in <h1> tag Output: 2. Internal css- this css is basically written inside the <style> tag which is placed in <head> part of body. This css is limited to only this web page or to specific block level in which it is applied. Actual code: Output: here we used internal css 3. External Css- in this css a separate css file is created with the .css extension and is linked in <head> part of a webpage by the <link> tag. It is reusable as many as time as possible and is applicable to complete website u just have to link it on webpages Actual code: we created a css file named file.css and in which created a class .h1 Here in code I called it <html> <head> <title> here comes title </title> <link rel="stylesheet" href="file.css"> </head> <body> <h1 class="h1">hello world</h1> </tbody> </table> </ul> </body> </html> Output: Use of all 3 are same, but they are used as per priority. Most commonly used is external css because it saves a lot of time and can be used multiple times. There are other several properties of css we will be using in our project, so lets see these properties now: Basic format is : Selector{ Property: value; } CSS properties we will be using: 1. Width 2. Height 3. Background 4. Font-size 5. Font-family 6. Text-decoration 7. Text-transformation 8. Marin: 9. Padding: 10. Hover: 11. Border 12. Border-radius: CSS text proparties: Text alignment Left-start Right -end Center Justify Text-decoration css Underline Overline Line-through None Text-transform: Uppercase Lowercase Capitalise Font size: Font-size: 10px; Font-weight: Lighter Bold Bolder Font-style: Font-style: italic Font-Family (12-13 in html but many in google fonts so u can import) https://fonts.google.com/ Choose style one not saas Now after clicking on desired one you can import by two ways 1. Link 2. Import We will use link always, copy the link and paste in head tag, net should be connected. Now below link , css will be given as well Use this in font-family and done Box model: content spacing a. Padding- //adthi hui spacing deni h sirf ek content say… This is padding example //Also used for (fulana) space bich m create krne k lie Code for fulana k lie div ko we use both margin and padding Padding can be used in all 4 directions top bottom left right other ways of writing: padding: 50px 0px; here 50px is for both top and bottom and 0px is for both left and right. If you want to assign different values Padding: top,right,bottom,left (clock wise) b. Margin- used between the two contents we use margin //Space dene k lie margin mainly use hota h //In dono k bich space dene k lie margin use hua hai. Now if we use Margin: 50px; It will be applied on all four sides. If u want to apply separately apply below one Margin: top,right,bottom,left; c. Border- used to see if we want to see territory even we can check by order. border: 2px, solid/dashed, red; Background: compiler decides on its own to use image or color if we use background: 1. Color based background: red; nowdays we use multicolor background example: <style> Background: linear-gradient(direction,col1,col2) Background: linear-gradient(to right,col1,col2) Output: double colored Background: linear-gradient(to left, col1,col2) Output: to top and to bottom don’t work in many browser so its not used these days. 2. Image based background: url(“media/usol.png”); now if image size is smaller, it will cover complete by coping same image to body. Now image repeatable so we will stop repeat. Background-repeat: no-repeat; will stop repeating small image and only one image will display Now to increase the size Background-size: 600px; Background: cover; complete as cover it will appear Now this image will not be fixed it will move with the scroll So we will fix the background so content will move and background will not Background-attachment: fixed; Block level element break Float: left or right; Transition property (advanced version of hover) Transition-property: width; Transition-duration: 5s; Img{ Width:200px; Transition-property: width; Transition-duration: 5s; } Img:hover{ Width:400px; } Now it will take 5s to reach 400px; We can add height in this as well Now it will take 2s for both height and width to reach 400px Project coding (Front END) Designing Home Page using HTML+CSS Html code: <html> <head> <title> Home Page </title> <link rel="stylesheet" href="file.css"> </head> <body bgcolor="black"> <div class="main"> <div class="row1"> <div class="rowc1"> <img src="IMGLOGO.png" alt="" width="100px" height="80px"> </div> </div> <div class="row2"> <div class="row2c1">Home</div> <div class="row2c2"><a href="blog.html">Blog</a></div> <div class="row2c3"><a href="about.html">About us</a></div> <div class="row2c4"><a href="contact.html">Contact us</a></div> <div class="row2c5"><a href="privacy.html">Privacy Policy</a></div> </div> <div class="row3"> <div class="r3c1"> <div class="c">Choose Your Courses</div> <div class="c1"><a href="c++.html">C++</a></div> <div class="c2"><a href="java.html">Java</a></div> <div class="c3"><a href="python.html">Python</a></div> <div class="c4"><a href="digitalmarketing.html">Digital Marketing</a></div> </div> <div class="r3c2"><img src="batch.png" alt="" width="1194px" height="200px"></div> </div> <div class="row4"> <div><center><b>Skill buldiging Courses</b></center></div> </div> <br><br> <hr color="green"> <marquee> <img src="skill.png" alt="" width="1000px" height="200px"> </marquee> <hr color="green"> <br> <div> <div class="i1"><img src="ban1.png" alt="" width="450" height="320px"></div> <div class="i2"><img src="ban2.png" alt="" width="450px" height="320px"></div> <div class="i3"><img src="ban3.png" alt="" width="450px" height="320px"></div> </div> <br><br> <hr color="blue"> <br> <hr color="blue"> <br> <h2> Our Office Address</h2> <hr> <br> <div> <div> <div class="pt"> <h3>SECTOR 14,DCS CHANDIGARH</h3>oin our institute for building the new skills Today<br> We have the facility in the tricity and our trainers are teachers of department of coumputer science<br> Pannjab Unviersity, Chandigarh. <br> We provide various skill building courses like Python, Java, C++,Digital marketing Etc <br> We also provides the Job placement options as we have our contacts in it companies, on completion of course you can <br> prepare with us for interview and crack a high paying IT job. <br> <br> <form action="contact.html"> <input type="submit" value="Contact Us"> </form> </div> <div class="ot"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13713.861335406365!2 d76.768781!3d30.7615167!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fed87d77fa043%3 A0x145b5bccd016b9f1!2sDepartment%20of%20Computer%20Science%20and%20Application s%2C%20Panjab%20University!5e0!3m2!1sen!2sin!4v1683027107432!5m2!1sen!2sin" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></div> </div> </div> <br> <div> <br> </div></div> <div class="down"> <marquee behavior="" direction="down"> <img src="placed.png" alt="" width="900px" height="400px"> </marquee> </div> <br> <footer class="foot"> <strong> Made with ❤️ by Brij <br> &copy; Bm IT Skill Building Website 2023 </footer> </body> </html> CSS file for Home page code: .main{ width: 1498px; border: solid red 1px; height: 1400px; } .row1{ width: 1500px; background: orange; } .rowc1{ width: 1490px; height: 80px; float: left; background: blueviolet; padding-left: 8px; padding-top: 2px; padding-bottom: 2px; } .row2{ width: 1500px; height: 50px; color: white; } .row2c1{ width: 296px; float: left; border: 2px solid blue; background: violet; text-align: center; height: 30px; } .row2c2{ width: 296px; float: left; border: 2px solid blue; background: violet; text-align: center; height: 30px; } .row2c3{ width: 296px; float: left; border: 2px solid blue; background:violet; text-align: center; height: 30px; } .row2c4{ width: 296px; float: left; border: 2px solid blue; background: violet; text-align: center; height: 30px; } .row2c5{ width: 296px; float: left; border: 2px solid blue; background: violet; text-align: center; height: 30px; } .row3{ width: 1500px; } .r3c1{ width: 298px; border: 1px solid red; float: left; color: white; background: url("img4.png"); height: 200px; } .r3c2{ width: 1194px; float: left; border: 1px solid red; height: 200px; } .c{ border: 1px solid pink; height: 38px; text-align: center; } .c1{ border: 1px solid pink; height: 38px; text-align: center; } .c2{ border: 1px solid pink; height: 38px; text-align: center; } .c3{ border: 1px solid pink; height: 38px; text-align: center; } .c4{ border: 1px solid pink; height: 38px; text-align: center; } .row4{ width: 1466px; background-color: blue; color: white; text-decoration: underline; padding: 14px; } .i1{ width: 480px; float: left; margin-left: 15px; } .i2{ width: 498px; float: left; } .i3{ width: 498px; float: left; } .map{ padding-left: 50px; margin-top: 50px; } .lo{ color: white; text-align: center; font-size: 24px; font-weight: 600; } h2{ color: white; text-align: center; margin-top: 30px; } .pt{ color: white; float: left; text-align: center; padding-left: 160px; width: 900px; border: solid green 2px; height: 150px; margin-bottom: 30px; margin-left: 30px; padding: 50px; } .ot{ width: 100px; float: left; padding-left: 50px; } .foot{ background-color: green; color: white; padding: 1em; text-align: center; } .down{ padding-left: 300px; } SCREENSHOTS: About us page coding( internal css with html): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>About Us</title> <style> body { font-family: Arial, sans-serif; line-height: 1.5; margin: 0; padding: 0; } header { background-color: #3f51b5; color: #fff; padding: 1em; text-align: center; } header h1 { margin: 0; } main { margin: 2em auto; max-width: 800px; padding: 0 1em; } h2 { color: #3f51b5; font-size: 1.5em; margin-bottom: 0.5em; } p { margin-bottom: 1.5em; } .i1{ border: blue solid; float: left; padding: 2px; } .i2{ border: blue solid; float: left; margin-left: 25px; padding: 2px; } .i3{ border: blue solid; float: left; margin-left: 25px; padding: 2px; } footer { background-color: #ccc; color: #333; padding: 1em; text-align: center; margin-top: 300px; } </style> </head> <body> <header> <h1>About Us Page</h1> </header> <main> <h2>About Us</h2> <div> Welcome to Skill building Website, where we believe that everyone has the potential to learn and grow in their careers. We are a team of passionate educators and technology experts who are dedicated to providing the highest quality training and education to individuals of all skill levels. </div> <h2>Founded In</h2> Our company is founded in May 2023. Our founder is Brij Mohan Sharma <h2><center>Meet Our Team </center></h2> <div> <div class="i1"><img src="Brij.png" alt="" width="200px" height="200px"></div> <div class="i2"><img src="Brij.png" alt="" width="200px" height="200px"></div> <div class="i3"><img src="Brij.png" alt="" width="200px" height="200px"></div> </div> </main> <footer> &copy; Bm It Skill Building Website 2023 . All rights reserved. </footer> </body> </html> Screenshot: C++ course page with contact button <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>About Us</title> <style> body { font-family: Arial, sans-serif; line-height: 1.5; margin: 0; padding: 0; } header { background-color: #3f51b5; color: #fff; padding: 1em; text-align: center; } header h1 { margin: 0; } main { margin: 2em auto; max-width: 800px; padding: 0 1em; } h2 { color: #3f51b5; font-size: 1.5em; margin-bottom: 0.5em; } p { margin-bottom: 1.5em; } footer { background-color: #ccc; color: #333; padding: 1em; text-align: center; } </style> </head> <body> <header> <h1>c++</h1> </header> <main> <h2>Contact us for c++ classes</h2> <img src="c++.jpg" alt="" width="500px" height="250px"><br> Learn C++ C++ is a popular programming language. C++ is used to create computer programs, and is one of the most used language in game development. <form action="contact.html"> <input type="submit" value="Contact Us"> </form> </main> <footer> &copy; Bm It Skill Building Website 2023 . All rights reserved. </footer> </body> </html> Screenshot: Contact us page: <html> <head> <style> body { font-family: Arial, sans-serif; margin: 0; } .form { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 50px; } input[type="text"] { padding: 10px; border-radius: 5px; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); margin-bottom: 20px; } input[type="submit"] { padding: 10px 20px; background-color: #3f51b5; color: #fff; border-radius: 5px; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); cursor: pointer; transition: all 0.3s ease-in-out; } input[type="submit"]:hover { background-color: #1a237e; } label { font-weight: bold; margin-right: 10px; } h1 { text-align: center; } </style> </head> <body> <h1>Contact form</h1> <div class="form"> <form method="POST" action="connect.php"> <label for="fname">First Name:</label> <input type="text" name="fname" id="fname"><br> <label for="lname">Last Name:</label> <input type="text" name="lname" id="lname"><br> <label for="email">Email:</label> <input type="text" name="email" id="email"><br> <label for=""> Message</label> <textarea name="msg" id="" cols="30" rows="10"></textarea> <br> <input type="submit" name="submit" id="submit" value="Submit"> </form> <footer> &copy; Bm It Skill Building Website 2023 . All rights reserved. </footer> </div> </body> </html> Screenshots: Backend Coding + Creating and Connecting Database with form we created above "How to connect an HTML form to a MySQL database in PHP." (“How to connect an HTML form to a MySQL database in PHP”) (Educative, n.d.) database creation Click on database I gave database name form and click create After this I gave table name selected 4 col as per requirement of form Now we have to give datatype for each values which I have done and saved Output: Database created now, creating php connect file with code to link this to form <?php // getting all values from the HTML form if(isset($_POST['submit'])) { $fname = $_POST['fname']; $lname = $_POST['lname']; $email = $_POST['email']; $msg= $_POST['msg']; } // database details $host = "localhost"; $username = "root"; $password = ""; $dbname = "form"; // creating a connection $con = mysqli_connect($host, $username, $password, $dbname); // to ensure that the connection is made if (!$con) { die("Connection failed!" . mysqli_connect_error()); } // using sql to create a data entry query $sql = "INSERT INTO formtable (fname, lname, email,msg ) VALUES ('$fname', '$lname', '$email', '$msg')"; // send query to the database to add values and confirm if successful $rs = mysqli_query($con, $sql); if($rs) { echo "Entries added!"; } // close connection mysqli_close($con); ?> Now form is connected to database. Lets check by entering data. I have inputted the data now lets save it. Output: References WebD2: A Brief History of HTML - University of Washington, https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.ht ml. Educative. (n.d.). How to connect an HTML form to a MySQL database in PHP. Educative: Interactive Courses for Software Developers. https://www.educative.io/answers/how-to-connect-an-html-form-to-a-mysql-database-in-php Other resourceshttps://www.w3schools.com/html/ https://www.w3schools.com/css/default.asp https://www.w3schools.com/php/default.asp