220280116008 Batva Pooja

A Laboratory Manual for

Web Development
(3151606)

B.E. Semester5
(Information Technology)

Institute logo

Directorate of Technical Education,

Gandhinagar, Gujarat

1
220280116008 Batva Pooja

L. D. College Of Engineering, Ahmedabad

Certificate

This is to certify that Mr./Ms. BATVA POOJA VEJANANDBHAI

Enrollment No. 220280116008 of B.E. Semester 5th Information
Technologyof this Institute (GTU Code: 016)has satisfactorily completed
the Practical / Tutorial work for the subject Web
Development(3151606) for the academic year 2024-25.

Place: __________________
Date: __________________

Name and Sign of Faculty member

Head of the Department

2
220280116008 Batva Pooja

Preface

Main motto of any laboratory/practical/field work is for enhancing required skills as well
as creating ability amongst students to solve real time problem by developing relevant
competencies in psychomotor domain. By keeping in view, GTU has designed competency
focused outcome-based curriculum for engineering degree programs where sufficient
weightage is given to practical work. It shows importance of enhancement of skills
amongst the students and it pays attention to utilize every second of time allotted for
practical amongst students, instructors and faculty members to achieve relevant outcomes
by performing the experiments rather than having merely study type experiments. It is
must for effective implementation of competency focused outcome-basedcurriculum that
every practical is keenly designed to serve as a tool to develop and enhance relevant
competency required by the various industry among every student. These psychomotor
skills are very difficult to develop through traditional chalk and board content delivery
method in the classroom. Accordingly, this lab manual is designed to focus on the industry
defined relevant outcomes, rather than old practice of conducting practical to prove
concept and theory.

By using this lab manual students can go through the relevant theory and procedure in
advance before the actual performance which createsan interest and students can have
basic idea prior to performance. This in turn enhances pre-determined outcomes amongst
students. Each experiment in this manual begins with competency, industry relevant
skills, course outcomes as well as practical outcomes (objectives). The students will also
achieve safety and necessary precautions to be taken while performing practical.

This manual also provides guidelines to faculty members to facilitate studentcentric lab
activities through each experiment by arranging and managing necessary resources in
order that the students follow the procedures with required safety and necessary
precautions to achieve the outcomes. It also gives an idea that how students will be
assessed by providing rubrics.

In the era of digitization, the demand of Internet based applications is increasing day by
day. Web Development is one of the required skills for IT Engineer. This focuses on front-
end and back-end design. After learning Web Development students can advance their
career in the field of web development.

Utmost care has been taken while preparing this lab manual however always there is
chances of improvement. Therefore, we welcome constructive suggestions for
improvement and removal of errors if any.

1
220280116008 Batva Pooja

Practical – Course Outcome matrix

Course Outcomes (COs):

CO-1:Understand the concepts of WWW, HTTP protocol and client-server
architecture.
CO-2: Learn and apply various HTML tags to build the user-friendly web pages.
CO-3: Explore the new features of CSS to define and apply CSS rules in the web
pages for rich User Interface.
CO-4: Create interactive web pages to improve the user experience using client-
side scripting with JavaScript.
CO-5: Design and develop fully functional dynamic web applications using the
concepts of PHP, MySQL,
CO-6: Learn and apply advanced asynchronous web communication mechanisms
like REST API, AJAX and JQuery for building highly interactive webpages.

Sr. CO CO CO CO CO CO
Objective(s) of Experiment
No. 1 2 3 4 5 6
Draw and explain architecture of the web browser.
1. List and explain various HTML request and √
response headers.
Create your resume using HTML (Suggested
sections of resume are Personal Information,
2. Educational Information, Professional Skills, √
Experience, Achievements, Hobbies), Experiment
with text, colors, link and lists.
Create your class time table using table tag,
3. experiment with rowspan, colspan, cellspacing and √
cellpadding attributes.
Design static web pages for your college containing
a description of the courses, departments, faculties,
4. √
library etc. Provide links for navigation among
pages.
Create User Registration Form in HTML (Suggested
to use fields like Name, Date of Birth, Gender, Email
5. Id, Mobile No.,Address, State , Education , Image √
Upload etc) using textbox, textarea, checkbox, radio
button, select box, button, file upload etc.
Create two web pages, one contains audios and
other page contains videos (using HTML5 audio
6 √
and video tags). Also provide link for navigation
between pages.
7. Create a web page using frame. Divide the page into √
two parts with Navigation links on left hand side of
page (width=20%) and content page on right hand
2
220280116008 Batva Pooja

side of page (width = 80%). On clicking the

navigation Links corresponding content must be
shown on the right-hand side.
Design a web page of your home town with an
8. attractive background color, text color, an Image, √
font etc. (use internal CSS).
Use Inline CSS to format your resume that you
9. √
created in practical no 02.
Use External, Internal, Inline CSS to format
10. Information Technology Department Web Pages √
that you created in Practical No.04

11. Develop a java script to display today’s date. √

Develop simple calculator for addition, subtraction,

12. multiplication and division operation using java √
script.
Write a java script code to combine and display the
information in textbox when the button is clicked √
13.
use registration page that you created in Practical
No.5.

Use JavaScript to Implement validation in Practical √

14.
No.5.

Write a PHP program to check if number is prime

15. √
or not.
Use Registration Form from practical number 5 to
store user registration details in MySql database.
16. On submission next page displays all registration √
data in in html table using php. Also provide feature
to update and delete the registration data.
Write a PHP script for user authentication using
17. √
PHP-MYSQL. Use session for storing username.
Using AJAX Create visual search feature to search
using name for practical number 16 which list
18. √
name, mobile number and email id of matching
users.

19. Create a REST API using php. √

20. Create an Image slider using jQuery. √

21 Cookie Example √

3
220280116008 Batva Pooja

Industry Relevant Skills

The following industry relevant competency are expected to be developed in the

student by undertaking the practical work of this laboratory.
1. HTML/CSS Skills : HTML is used extensively by web developers to build web
pages. CSS is used to implement different fonts, colors and layouts in the design
of a website.
2. Javascript Skills : Java Script is used for creating interactive web pages to
improve the user experience.
3. PHP/MySql Skills : PHP/MySql is used extensively by web developers to create
fully functional dynamic web applications.
4. REST API,AJAX,JQuery Skills : RESTAPI,AJAX,JQuery are advanced
asynchronous web communication mechanisms and used by web developers
for building highly interactive webpages.
Guidelines forFaculty members
1. Teacher should provide the guideline with demonstration of practical to the
students with all features.
2. Teacher shall explain basic concepts/theory related to the experiment to
the students before starting of each practical
3. Involve all the students in performance of each experiment.
4. Teacher is expected to share the skills and competencies to be developed in the
students and ensure that the respective skills and competencies are developed
in the students after the completion of the experimentation.
5. Teachers should give opportunity to students for hands-on experience after the
demonstration.
6. Teacher may provide additional knowledge and skills to the students even
though not covered in the manual but are expected from the students by
concerned industry.
7. Give practical assignment and assess the performance of students based on task
assigned to check whether it is as per the instructions or not.
8. Teacher is expected to refer complete curriculum of the course and follow the
guidelines for implementation.

Instructions for Students

1. Students have to write answers / solutions of QUIZ in separate file page. The
quiz of corresponding practical must be attached just behind each practical.
2. Students are expected to carefully listen to all the theory classes delivered by the
faculty members and understand the COs, content of the course, teaching and
examination scheme, skill set to be developed etc.
3. Students shall organize the work in the group and make record of all observations.
4. Students shall develop maintenance skill as expected by industries.
5. Student shall attempt to develop related hand-on skills and build confidence.
6. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart
from those included in scope of manual.
4
220280116008 Batva Pooja

7. Student shall refer technical magazines and data books.

8. Student should develop a habit of submitting the experimentation work as per the
schedule and s/he should be well preparedfor the same.

Sample Rubrics for Practical Evaluation

Understanding of Implementation of Presentation and report Total

Problem Problem writing (10
(3 marks) (4 marks) (3 marks) marks)

Excellent Moderate level Problem not

understanding of understanding of understood and
problem and 03 problem and 02 can't establish 01
Understanding
relevance with the relevance with the relation with
of Problem
theory clearly the theory clearly the theory.
understood. understood.
Efficient Moderate level of Partial
implementation implementation. implementation 01
Implementation with proper 04 Poor naming 03 with poor to
of Problem naming convention. understanding. 02
convention and
understanding
Unique Ordinary Weak
documentation documentation of documentation of 01
(not copied from 03 given problem 02 given problem to
Presentation
other sources) of with proper without proper 02
and report
given problem formatting and formatting and
writing
with proper language language
formatting and
language.

5
 220280116008 Batva Pooja

Index
(Progressive Assessment Sheet)
Sr. No. Objective(s) of Experiment Page Date of Date of Assessm Sign. of Remar
No. perfor submis ent Teacher ks
mance sion Marks with
date
1 Draw and explain architecture of the web
browser. List and explain various HTML
request and response headers.
2 Create your resume using HTML
(Suggested sections of resume are Personal
Information, Educational Information,
Professional Skills, Experience,
Achievements, Hobbies), Experiment with
text, colors, link and lists.
3 Create your class time table using table tag,
experiment with rowspan, colspan,
cellspacing and cellpadding attributes.
4 Design static web pages for your college
containing a description of the courses,
departments, faculties, library etc. Provide
links for navigation among pages.
5 Create User Registration Form in HTML
(Suggested to use fields like Name, Date of
Birth, Gender, Email Id, Mobile No.,Address,
State , Education , Image Uploadetc) using
textbox, textarea, checkbox, radio button,
select box, button, file upload etc.
6 Create two web pages, one contains audios
and other page contains videos (using
HTML5 audio and video tags). Also provide
link for navigation between pages.
7 Create a web page using frame. Divide the
page into two parts with Navigation links
on left hand side of page (width=20%) and
content page on right hand side of page
(width = 80%). On clicking the navigation
Links corresponding content must be
shown on the right-hand side.
8 Design a web page of your home town with
an attractive background color, text color,
an Image, font etc. (use internal CSS).
9 Use Inline CSS to format your resume that
you created in practical no 02.

6
220280116008 Batva Pooja

10 Use External, Internal, Inline CSS to format

Information Technology Department Web
Pages that you created in Practical No.04
11 Develop a java script to display today’s date.

12 Develop simple calculator for addition,

subtraction, multiplication and division
operation using java script.
13 Write a java script code to combine and
display the information in textbox when
the button is clicked use registration page
that you created in Practical No.5.
14 Use JavaScript to Implement validation in
Practical No.5.

15 Write a PHP program to check if number is

prime or not.
16 Use Registration Form from practical
number 5 to store user registration details
in MySql database. On submission next
page displays all registration data in in
html table using php. Also provide feature
to update and delete the registration data.
17 Write a PHP script for user authentication
using PHP-MYSQL. Use session for storing
username.
18 Using AJAX Create visual search feature to
search using name for practical number 16
which list name, mobile number and email
id of matching users.
19 Create a REST API using php.
20 Create an Image slider using jQuery.
21 Create HTML form with one textbox and
button. Keep button label as SAVE. User will
enter color name in textbox and click on save
button.
On save, the value of textbox color name
should be saved in COOKIE.
Whenever user opens page again, the
background color should be same as saved in
cookie.
Total

7
220280116008 Batva Pooja

8
220280116008 Batva Pooja

Experiment No: 1

Draw and explain architecture of the web browser. List and explain
various HTML request and response headers.

Date:

Competency and Practical Skills:

Relevant CO:1

Objectives:

1. To understand architecture of the web browser.

2. To understand HTML request and response headers.

Theory:

WHAT’S THE BROWSER?

The browser main functionality is to present the web resource you choose, by requesting it
from the server and displaying it on the browser window. The resource format is usually
HTML but also PDF, image and more.

Figure 1 Browser Architecture

USER INTERFACE

The space where interaction between users and the browser. Most of the browsers have
common inputs for user interface:
- Address bar.
- Next and back buttons.
- Buttons for home, refresh and stop
- Bookmark web pages

BROWSER ENGINE

9
220280116008 Batva Pooja

Browser Engine provides methods to begin the loading of URL and other high-level
browsing actions.
- Reload, Back, Forward actions
- Error messages
- Loading progress

RENDERING ENGINE

Rendering Engine interprets (render) the HTML, XML, JavaScript and generates the layout
that is displayed in the User Interface. Key component of this phase is HTML, CSS parse.

NETWORKING

Access and transfer data on the internet (calls HTTP, HTTPS, FTP). The Networking
components handles all aspects of internet communication or security.

JAVASCRIPT INTERPRETER

Component parse & executes the JavaScript that is embedded in the website. Results of the
execution a passed to the Rendering Engines for display.

DISPLAY BACKEND

Display common UI components. Drawing basic widgets like combo boxes, windows.

DATA PERSISTENCE

Storing the data on the client side.

- Cookies.
- Cache.

Basic Flow of HTML processing

Figure 2 Basis Flow of HTML Processing

HTTP Request and Response Messages

HTTP client and server communicate by sending text messages. The client sends a request
message to the server. The server, in turn, returns a response message.

10
220280116008 Batva Pooja

An HTTP message consists of a message header and an optional message body, separated by
a blank line, as illustrated below:

HTTP Request Message

The format of an HTTP request message is as follow:

Request Headers

The request headers are in the form of name:value pairs. Multiple values, separated by
commas, can be specified.

request-header-name: request-header-value1, request-header-value2, ...

Examples of request headers are:

Host: www.xyz.com
Connection: Keep-Alive
Accept: image/gif, image/jpeg, */*
Accept-Language: us-en, fr, cn

Example
The following shows a sample HTTP request message:

HTTP Response Message

11
220280116008 Batva Pooja

The format of the HTTP response message is as follows:

HTTP Request Methods

HTTP protocol defines a set of request methods. A client can use one of these request
methods to send a request message to an HTTP server.

The methods are:

 GET: A client can use the GET request to get a web resource from the server.
 HEAD: A client can use the HEAD request to get the header that a GET request would
have obtained. Since the header contains the last-modified date of the data, this can
be used to check against the local cache copy.
 POST: Used to post data up to the web server.
 PUT: Ask the server to store the data.
 DELETE: Ask the server to delete the data.
 TRACE: Ask the server to return a diagnostic trace of the actions it takes.
 OPTIONS: Ask the server to return the list of request methods it supports.
 CONNECT: Used to tell a proxy to make a connection to another host and simply
reply the content, without attempting to parse or cache it. This is often used to make
SSL connection through the proxy.
Quiz:

1. What is a web browser?

A software application used to access information on the World Wide Web is called a Web
Browser.
When a user requests some information, the web browser fetches the data from a web server
and then displays the webpage on the user's screen.

2. List three most popular browser.

 Chrome
 Safari

12
220280116008 Batva Pooja

 Edge

3. Draw and explain architecture of the web browser

User Interface

Browser Engine Data Persistence

Rendering Engine

JavaScript Display Backend

Networking Interpreter

User Interface – Designed to provide user personalization through groups, collection,

bookmarks and themes
Browser Engine – Responsible for coordinating web content that is fetched from the server
and user interactions. It keeps note of which button is clicked, which URL is asked to parse.
Rendering Engine – Interprets and renders web content.
Networking Layer – Handles the communication part. It initiates the HTTP web request to the
web server to load the requested web page. Also manages fetching resources from HTML
files, images, stylesheets and more.
Javascript engine – Core component, has ability to manipulate web content and introduce
dynamic behavior web pages.
Data Storge – Stores user preferences like browsing history, passwords and other regular
data updates.
UI Backend – Provides dynamic and interactive behavior on the web page and enhances
overall functionality and performance of the browser.

Conclusion:

In this experiment we learnt about Web Browser and it’s architecture, HTTP requests and
response message format, along with various HTTP request methods.

Suggested Reference:

1. https://www3.ntu.edu.sg/

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

13
220280116008 Batva Pooja

Experiment No: 2

Create your resume using HTML (Suggested sections of resume are

Personal Information, Educational Information, Professional Skills,
Experience, Achievements, Hobbies), Experiment with text, colors, link
and list.

Date:

Competency and Practical Skills:

Relevant CO: 2

Objectives:

1. To understand HTML Page Structure.

2. To understand how to use HTML tag attributes.

Theory:

HTML :

- HTML stands for Hypertext Markup Language

- It is used to display the document in the web browser
- Hypertext is simply a piece of text that works as a link
- Markup Language is a way of writing layout information within documents
HTML Document Structure

- HTML Document consists of three main parts

o DOCTYPE declaration
o <head> section
o <body> section

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Hello World </h1> -
</body>
</html> -

- DOCTYPE specifies the document type. the document type is specified by the
Document Type Definition ( DTD ).

- <head> section is used to specify title of the page using <title> tag. It is also used for
adding external css and javascript files to html document.

14
220280116008 Batva Pooja

How to save and check output

- Editors like notepad, notepad++, sublime text, visual studio code can be used to write
html code
- Save html document file with .html extension
- To check output open html document with browser like google chrome , Microsoft
edge, Firefox etc.
HTML Formatting Tags

- <b>text </b>- for making the text bold.

- <strong> text</strong>- for making the text Important text
- <i>text </i>- for making the text Italic text
- <em>text </em>- to make the Emphasized text
- <mark>text</mark>- to make the text Marked text
- <small>text </small>- to make the text Smaller text
- <del>text</del> - to make the text Deleted text
- <ins>text </ins>- to make the text Inserted text
- <sub>text <sub>- to make the text Subscript text
- ^text- to make the text Superscript text
- <h1> to <h6> tags – for making Headings
- Font Color (<font color=”red”>Hello</font>) – to change font color
- Font Size (<font size=”10px”>Hello</font>) – to change font size

HTML List Tag

- HTML List allow web developers to group a set of related items in lists

- Unordered HTML List

o Starts with <ul> tag list item starts with <li> tag
o Lists items will be marked with bullets
o Example
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>

- Ordered HTML List

o Starts with <ol> tag. Each list item starts with the <li> tag.
o Lists items will be marked with numbers by default

15
220280116008 Batva Pooja

<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>

- HTML Description Lists

o A description list is a list of terms with a description of each term.

o <dl> tag defines the description list,<dt> tag defines the term (name) <dd> tag
describes each term

<dl>
<dt>CE</dt>
<dd>- Computer Engineering</dd>
<dt>IT</dt>
<dd>- Information Technology</dd>
</dl>

Implementation:

Create your resume using HTML (Suggested sections of resume are Personal Information,
Educational Information, Professional Skills, Experience, Achievements, Hobbies),
Experiment with text, colors, link and list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
</head>
<body>
<div class="body">
<header>
<h1> <font color="navy"> POOJA BATVA </font></h1>
<h2> <font color="navy">SOFTWARE ENGINEER</font></h2>
</header><hr>
<section class="contact">
<h3> <font color="navy">CONTACT</font></h3>
<label for="phoneno">Phone No :</label>
<a href="93XXX XXXXX">93XXX XXXXX</a><br>
<label for="email">Email :</label>
<a href="[email protected]">[email protected]</a><br>
<label for="githun">GitHub :</label>
<a href="github/Pooja-Batva">github/Pooja-Batva</a><br>
<label for="Linkedin">Linked in :</label>
<a href="linkedin/pooja-batva">linkedin/pooja-batva</a>
</section><hr>
<section class="expertise">
<h3> <font color="navy">EXPERTISE SKILLS</font></h3>
<ul>
<li>C</li>
<li>JAVA</li>

16
220280116008 Batva Pooja

<li>Frontend Developer</li>
<li>Data Science</li>
</ul>
</section><hr>
<section class="language">
<h3><font color="navy">LANGUAGE</font></h3>
<ul>
<li>Gujarati</li>
<li>Hindi</li>
<li>English</li>
</ul>
</section><hr>
<section class="interest">
<h3><font color="navy">INTEREST</font></h3>
<ul>
<li>Drawing</li>
<li>Games</li>
</ul>
</section><hr>
<section class="profprofile">
<h3><font color="navy">PROFESSIONAL PROFILE</font></h3>
<ul>
<li>Dedicated IT engineering student with a strong foundation in software development, computer networks,
and data science.</li>
<li>Hands-on experience in frontend development.</li>
<li>Proficient in programming languages such as C and Java.</li>
</ul>
</section><hr>
<section class="education">
<h3><font color="navy">EDUCATION</font></h3>
<ul>
<h4>Becholar of Engineering</h4>
<ul>
<li>L.D. College of Engineering</li>
<li>CGPA : 8.00</li>
</ul>
<h4>HSC</h4>
<ul>
<li>Sigma school of science</li>
<li>Persentage : 80.00%</li>
</ul>
</ul>
</section><hr>
<section class="experiance">
<h3> <font color="navy">EXPERIENCE</font></h3>
<li>Hack4Purpose - Hackathon</li>
<p>Hack4Purpose is an annual hackathon designed to inspire engineering and management students to
address global challenges in alignment with the United Nations' Sustainable Development Goals (SDGs). It is
scheduled for June 26-27, 2024 in Chennai, India. Participants are encouraged to propose innovative solutions, either
based on provided data or their own ideas, focusing on sustainability and social impact.</p>
</section><hr>
</div>
</body>
</html>

17
220280116008 Batva Pooja

Output:

18
220280116008 Batva Pooja

Conclusion:

In this experiment we learnt about designing a resume in HTML enabling customization and
creativity, providing a unique way to showcase your qualifications and skills thereby
enhancing understanding of HTML and CSS.

Quiz:

1. Explain HTML Document Structure.

 DOCTYPE Declaration:
<!DOCTYPE html>
o Declares the document as an HTML5 document, ensuring that the browser
renders it correctly.
 HTML Element:
<html> ... </html>
o The root element that encloses all other HTML content.
 Head Section:
<head> ... </head>
o Contains meta-information about the document, such as:
 <title>: Defines the title displayed in the browser tab.
 <meta>: Specifies metadata like character encoding (<meta
charset="UTF-8">).
 <link>: Links to external resources like CSS files.
 <style>: Contains internal CSS.
 <script>: Links to or contains JavaScript.
 Body Section:
<body> ... </body>
o Contains the content that is displayed on the web page, including:
 Text, headings (<h1> to <h6>), paragraphs (<p>).
 Links (<a>), images (<img>), lists (<ul>, <ol>).

19
220280116008 Batva Pooja

 Tables (<table>), forms (<form>), and other multimedia elements.

2. List and explain any five HTML formatting tags.

 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Bold
Use the or tags to make text bold, which is often used to highlight headings or important text
Italic
Use the tag to make text italic, which is often used to emphasize a word or phrase or to indicate a
different tone or meaning
Underlined
Use the underline tag to indicate a hyperlink or to emphasize a word or phrase
Strike-through
Use the strike-through tag to indicate that the text has been deleted or is no longer valid
Superscript and subscript
Use the and tags to display text in a smaller size above or below the normal text line

3. Explain ordered and unordered list with example.

Ordered list (<ol>) : displays items in a numbered sequence
Unordered list (<ul>) : displays items with bullet points.
Eg:
Ordered list Unordered list
<ol> <ul>
<li>Item 1</li> <li>Item A</li>
<li>Item 2</li> <li>Item B</li>
</ol> </ul>

Suggested Reference:

- https://www.w3schools.com/html/html_basic.asp
- https://www.w3schools.com/html/html_lists.asp
- https://www.w3schools.com/html/html_formatting.asp
References used by the students: MDN & Google

Rubric wise marks obtained:

20
220280116008 Batva Pooja

Rubrics 1 2 3 Total
Marks

21
220280116008 Batva Pooja

Experiment No: 3

Create your class time table using table tag, experiment with rowspan,
colspan, cellspacing and cellpadding attributes.

Date:

Competency and PracticalSkills:

Relevant CO: 2

Objectives:

1. To study HTML table tag

2. To study how to organize data in tabular format
Theory:

HTML Table Tag

- HTML tables allow web developers to arrange data into rows and columns.
- The <table> tag defines an HTML table.
- table row is defined with a <tr> tag.
- table header is defined with a <th> tag.
- text in <th> elements are bold and centered.
- Each table data/cell is defined with a <td>.
- By default, the text in <td> elements are regular and left-aligned.
- colspan attribute is used to make a cell span more than one column.
- rowspan attriute is used to make a call span more than one row.
- cellpadding represents the distance between cell borders and the content within a
cell.
- The cellspacing attribute defines space between table cells.
- Example
o Below code is for arranging car details in tabular format.
o You may stude table tag and output as below.

22
220280116008 Batva Pooja

Code Output

<table border="1">
<tr>
<th>Name</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Swift VXI</td>
<td>Red</td>
<td>800000</td>
</tr>
<tr>
<td>Vagon R</td>
<td>White</td>
<td>600000</td>
</tr>
</table>

Implementation:

Create your class time table using table tag, experiment with rowspan, colspan, cellspacing
and cellpadding attributes.

<!DOCTYPE html> <tr>

<html lang="en"> <th>WED</th>
<head> <td>ADA <br> MCP</td>
<meta charset="UTF-8"> <td>ADA <br> MCP</td>
<meta name="viewport" content="width=device- <td colspan="2">
width, initial-scale=1.0"> D.SCI-A1-MNP <br>
<title>TimeTable</title> D.SCI-A3-VISHAL <br>
</head> D.SCI-A4-DEVENDRA <br>
<body> </td>
<table border="1" cellspacing="0" <td colspan="2">
cellpadding="15px"> D.SCI-A1-Library <br>
<tr> D.SCI-A2-MNP <br>
<th rowspan="2">TIME <br> DAY</th> D.SCI-A3-Library <br>
<td>10:30</td> D.SCI-A4-Library <br>
<td>11:30</td> </td>
<td>1:00</td>
<td>2:00</td> </tr>
<td>3:15</td> <tr>
<td>4:15</td> <tr>
</tr> <th>THURS</th>
<tr> <td>CN <br> PNR</td>
<td>11:30</td> <td>CN <br> PNR</td>
<td>12:30</td> <td>ADA <br> MCP</td>
<td>2:00</td> <td>ADA <br> MCP</td>
<td>3:00</td> <td>Library</td>
<td>4:15</td> <td>Library</td>
<td>5:15</td> </tr>
</tr> <th>FRI</th>
<tr> <td>IPDC <br> GAYTRI</td>
<th>MON</th> <td>PE <br> MEHUL</td>
<td>IPDC <br> GAYTRI</td> <td colspan="2">
<td>PE <br> NPD</td> ADA-A1-YASH <br>
<td colspan="2"> ADA-A2-VISHAL<br>
CN-A1-PNR <br> CN-A3-PNR <br>
CN-A2-MINAXI <br> CN-A4-VBT <br>
WD-A3-SHREY <br> </td>
WD-A4-YASH <br> <td>D.SCI <br> MNP</td>
</td> <td>D.SCI <br> MNP</td>
<td>WD <br> BBP</td> </tr>
<td>PE <br> RASHID</td> <tr>

23
220280116008 Batva Pooja

</tr> <th>SAT</th>
<tr> <td colspan="4">
<th>TUE</th> DE_2A-A1-BBP <br>
<td>CN <br> PNR</td> DE_2A-A2-PNR <br>
<td>CN <br> PNR</td> DE_2A-A3-SAS <br>
<td colspan="2"> DE_2A-A4-NPD <br>
WD-A1-BBP <br> </td>
WD-A2-AJP <br> <td>Library</td>
ADA-A3-MCP <br> <td>Library</td>
ADA-A4-MEHUL <br> </tr>
</td> </table>
<td>WD <br> BBP</td> </body>
<td>WD <br> BBP</td> </html>
</tr>

Output:

Conclusion:

This experiment represents the timetable representing the effective use of HTML table tags
along with rowspan, colspan, cellspacing, and cellpadding attributes to organize and present
structured data clearly. The resulting layout is both visually consistent and easy to read,
making it a useful tool for schedule management

Quiz:

1. Explain the use of rowspan and colspan attributes in table tag.

The rowspan and colspan attributes in the table tag are used to merge multiple rows and columns.

24
220280116008 Batva Pooja

2. Differentiate between <td> and <th>.

<td> defines a standard data cell in an HTML table, which is typically left-aligned and not bold by
default
<th> defines a header cell, which is typically bold and centered by default

Suggested Reference:

 https://www.w3schools.com/html/html_tables.asp

References used by the students: (Sufficient space to be provided) Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

25
220280116008 Batva Pooja

Experiment No: 4

Design static web pages for your college containing a description of the
courses, departments, faculties, library etc. Provide links for navigation
among pages.

Date:

Competency and Practical Skills:

Relevant CO: 2

Objectives:

1. To study HTML Link.

Theory:

HTML Links:

- Links allow users to click their way from page to page.

- User can click on a link and jump to another document.
- When you move the mouse over a link, the mouse arrow will turn into a little hand.
- Syntax
o <a href="url"> link text </a>
- Example
<a href=https://www.ldce.ac.in/ target=”_blank”>Visit
LDCE</a>
- links will appear as follows in all browsers:
o An unvisited link is underlined and blue
o A visited link is underlined and purple
o An active link is underlined and red
- HTML Link Taget Attribute
o By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
o The target attribute specifies where to open the linked document.
o The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was
clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

26
220280116008 Batva Pooja

Implementation:

Design static web pages for your college containing a description of the courses,
departments, faculties, library etc. Provide links for navigation among pages.

ClgWeb.html cstyle.css
<!DOCTYPE html> body {
<html lang="en"> font-family: Arial, sans-serif;
<head> margin: 0;
<meta charset="UTF-8"> padding: 0;
<meta name="viewport" content="width=device-width, background-color: #f4f4f4;
initial-scale=1.0"> }
<title>LDCE - Home</title> header img {
<link rel="stylesheet" href="cstyle.css"> height: 80px;
<style> }
.container { nav {
height: 65vh; background-color: #000000;
padding: 20px; overflow: hidden;
display: flex; }
align-items: center; nav ul {
list-style: none;
} margin: 0;
.container img { padding: 0;
width: 100%; }
margin:50px; nav ul li {
border-radius: 8px; float: left;
} }
</style> nav ul li a {
</head> display: block;
<body> padding: 14px 20px;
<header> text-decoration: none;
<img src="ldce.png" alt="LDCE Logo"> color: white;
</header> }
<nav> nav ul li a:hover {
<ul> background-color: #575757;
<li><a href="ClgWeb.html">Home</a></li> }
<li><a href="courses.html">Courses</a></li>
<li><a href="departments.html">Departments</a></li> footer {
<li><a href="faculties.html">Faculties</a></li> background-color: #000000;
<li><a href="library.html">Library</a></li> color: white;
</ul> text-align: center;
</nav> padding: 10px 0;
<div class="container"> position: fixed;
<img src="campus.png" alt="LDCE Campus Photo"> width: 100%;
<span> bottom: 0;
<h1>Welcome to LDCE</h1> }
<p>One of the oldest and premier engineering institutes
in Gujarat, known for its excellence in education and
infrastructure.</p> Departments.html
<p>L. D. College of Engineering endearingly known as <!DOCTYPE html>
L.D.C.E is Ahmedabad’s premier engineering college <html lang="en">
situated at the city’s heart and surrounded by elite <head>
organization like PRL, ATIRA, ISRO, IIM and CEPT. <meta charset="UTF-8">
Starting in 1948 to impart quality higher education in <meta name="viewport" content="width=device-width,
various fields of engineering, it has seen unprecedented initial-scale=1.0">
growth.</p> <title>LDCE - Departments</title>
<p>It is affiliated with Gujarat Technological University & <link rel="stylesheet" href="cstyle.css">
administrated by Department of Technical Education, </head>
Government of Gujarat.</p> <body>
</span>

27
220280116008 Batva Pooja

</div> <header>
<footer> <img src="ldce.png" alt="LDCE Logo">
<p>© 2024 LD College of Engineering. All rights </header>
reserved.</p>
</footer> <nav>
</body> <ul>
</html> <li><a href="ClgWeb.html">Home</a></li>
<li><a href="courses.html">Courses</a></li>
Course.html <li><a
<!DOCTYPE html> href="departments.html">Departments</a></li>
<html lang="en"> <li><a href="faculties.html">Faculties</a></li>
<head> <li><a href="library.html">Library</a></li>
<meta charset="UTF-8"> </ul>
<meta name="viewport" content="width=device-width, </nav>
initial-scale=1.0">
<title>LDCE - Courses</title> <div class="container">
<link rel="stylesheet" href="cstyle.css"> <h1>LDCE Library</h1>
</head>
<body> <section id="about">
<h2>About the Library</h2>
<header> <p>Welcome to the LDCE Library! Our library offers
<img src="ldce.png" alt="LDCE Logo"> a wide range of books, journals, and digital resources to
</header> support the academic and research needs of our students
and faculty.</p>
<nav> </section>
<ul>
<li><a href="ClgWeb.html">Home</a></li> <section id="services">
<li><a href="courses.html">Courses</a></li> <h2>Services</h2>
<li><a <ul>
href="departments.html">Departments</a></li> <li>Book Lending</li>
<li><a href="faculties.html">Faculties</a></li> <li>Digital Resources</li>
<li><a href="library.html">Library</a></li> <li>Study Rooms</li>
</ul> </ul>
</nav> </section>

<div class="container"> <section id="timing">

<h1>Courses Offered</h1> <h2>Library Timing</h2>
<p>LDCE offers a variety of undergraduate and <table>
postgraduate courses in engineering disciplines:</p> <tr>
<ul> <th>Day</th>
<li>Computer Engineering</li> <th>Opening Hours</th>
<li>Information Technology</li> </tr>
<li>Civil Engineering</li> <tr>
<li>Mechanical Engineering</li> <td>Monday - Friday</td>
<li>Electrical Engineering</li> <td>9:00 AM - 6:00 PM</td>
<li>Electronics & Communication Engineering</li> </tr>
</ul> <tr>
</div> <td>Saturday</td>
<td>9:00 AM - 1:00 PM</td>
<footer> </tr>
<p>© 2024 LD College of Engineering. All rights <tr>
reserved.</p> <td>Sunday</td>
</footer> <td>Closed</td>
</tr>
</body> </table>
</html> </section>
</div>

<footer>
<p>© 2024 LD College of Engineering. All rights
reserved.</p>
</footer>

28
220280116008 Batva Pooja

Library.html
<!DOCTYPE html> </body>
<html lang="en"> </html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>LDCE - Library</title>
<link rel="stylesheet" href="cstyle.css"> Faculties.html
</head> <!DOCTYPE html>
<body> <html lang="en">
<head>
<header> <meta charset="UTF-8">
<img src="ldce.png" alt="LDCE Logo"> <meta name="viewport" content="width=device-width,
</header> initial-scale=1.0">
<title>LDCE - Faculties</title>
<nav> <link rel="stylesheet" href="cstyle.css">
<ul> </head>
<li><a href="ClgWeb.html">Home</a></li> <body>
<li><a href="courses.html">Courses</a></li>
<li><a <header>
href="departments.html">Departments</a></li> <img src="ldce.png" alt="LDCE Logo">
<li><a href="faculties.html">Faculties</a></li> </header>
<li><a href="library.html">Library</a></li>
</ul> <nav>
</nav> <ul>
<li><a href="ClgWeb.html">Home</a></li>
<div class="container"> <li><a href="courses.html">Courses</a></li>
<h1>LDCE Library</h1> <li><a
href="departments.html">Departments</a></li>
<section id="about"> <li><a href="faculties.html">Faculties</a></li>
<h2>About the Library</h2> <li><a href="library.html">Library</a></li>
<p>Welcome to the LDCE Library! Our library offers </ul>
a wide range of books, journals, and digital resources to </nav>
support the academic and research needs of our students
and faculty.</p> <div class="container">
</section> <h1>Faculties</h1>
<p>Faculties of IT Department</p>
<section id="services"> <ul>
<h2>Services</h2> <li>Dr. Hiteishi Diwanji</li>
<ul> <li>Dr. Mehul Parikh</li>
<li>Book Lending</li> <li>BAKULBHAI PANCHAL</li>
<li>Digital Resources</li> <li>Miss. Nirjari Desai</li>
<li>Study Rooms</li> <li>Miss. Mital Panchal</li>
</ul> <li>Dr. Pradip Patel</li>
</section> <li>MANOJKUMAR PATEL</li>
<li>Miss. ALKA PATEL</li>
<section id="timing"> <li>Mr. Ankit Patel</li>
<h2>Library Timing</h2> <li>Mrs. Shital Solanki</li>
<table> <li>Mrs. Madhuri Patel</li>
<tr> <li>Miss. Vidisha Thakkar</li>
<th>Day</th> <li>Mr. JAIMINKUMAR CHAVDA</li>
<th>Opening Hours</th> <li>Dr. PURVI RAMANUJ</li>
</tr> <li>Mrs. JAHNAVI TEJASKUMAR PATEL</li>
<tr> <li>Mrs. SWATI PATEL</li>
<td>Monday - Friday</td> <li>Dr. Kuntesh Jani </li>
<td>9:00 AM - 6:00 PM</td> </ul>
</tr> </div>
<tr>
<td>Saturday</td> <footer>
<td>9:00 AM - 1:00 PM</td> <p>© 2024 LD College of Engineering. All rights

29
220280116008 Batva Pooja

</tr> reserved.</p>
<tr> </footer>
<td>Sunday</td>
<td>Closed</td> </body>
</tr> </html>
</table>
</section>
</div>

<footer>
<p>© 2024 LD College of Engineering. All rights
reserved.</p>
</footer>

</body>
</html>

Output:

30
220280116008 Batva Pooja

31
220280116008 Batva Pooja

Conclusion:

The HTML page provides a clear overview of the undergraduate courses offered at LDCE and detailed
information about the institution's Central Library. It effectively organizes course details and library
resources, enhancing accessibility and understanding for users.

Quiz:

1. Explain HTML Link target attribute.

The target attribute in an HTML link specifies where to open the linked document, with values
like _blank for a new tab, _self for the same frame, _parent, or _top.

2. How to use image as a link ?

Use the <a> tag with an <img> tag inside it, like <a href="URL"><imgsrc="image.jpg"
alt="description"></a>, to make an image a clickable link.

Suggested Reference:

 https://www.w3schools.com/html/html_links.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

32
220280116008 Batva Pooja

Experiment No: 5

Create User Registration Form in HTML (Suggested to use fields like

Name, Date of Birth, Gender, Email Id, Mobile No.,Address, State ,
Education , Image Upload etc) using textbox, textarea, checkbox, radio
button, select box, button, file upload etc.

Date:

Competency and PracticalSkills:

Relevant CO: 2

Objectives:

1. To study HTML Form Tag.

2. To Study Various Input Types like textbox, password, radio button, checkbox etc.
Theory:

HTML Forms are required, when .

- For example for registration you may collect information like user name , email ,
contact number, address etc.
- A form will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc.
- The back-end application will perform required processing on the passed data based
on defined business logic inside the application.
- There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
- The HTML <form> tag is used to create an HTML form
- Syntax :

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

</form>

- Important form attributes are as given below

33
220280116008 Batva Pooja

- HTML Form Controls

Control Name Used for Sample Code

Text input control Textbox is used for

<input type = "text" name =
accepting text from
Single line text input user, like firstname, "first_name" />
control lastname etc

Text input control Password input control

<input type = "password" name =
is used to accept
Password input password from user. "password" />
control

Text input control Teaxtarea is used to

<textarea rows = "5" cols = "50"
accept multiline text
Multiline input input , like comments. name = "description">
control.
Enter description here...

</textarea>
Checkbox Control Checkboxes are used <input type = "checkbox" name =
when more than one "maths" value = “maths"> Maths
option is required to be
selected. <input type = "checkbox" name =
"physics" value = “physics"> Physics

34
220280116008 Batva Pooja

Radio Button Radio buttons are used

Controls when out of many <input type = "radio" name =
options, just one option "subject" value = "maths"/> Maths
is required to be
selected. <input type = "radio" name =
"subject" value = "physics"/>
Physics
Drop Down box provides option to list
<select name = "dropdown">
Control down various options in
the form of drop down <option value = "Maths"
list, from where a user selected>Maths</option>
can select one or more
options. <option value =
"Physics">Physics</option>

</select>

File Upload It allows site users to

<input type = "file" name =
upload a file to website.
"fileupload" accept = "image/*" />
it is also known as file
select box.

Button Control This creates a button

that automatically <input type = "submit" name =
Submit submits a form. "submit" value = "Submit" />

Button Control This creates a button

that automatically
Reset <input type = "reset" name =
resets form controls to
"reset" value = "Reset" />
their initial values.

Button Control This creates a button <input type = "button" name =

that is used to trigger a "ok" value = "OK" />
Button client-side script when
the user clicks that
button.

Button Control This creates a clickable <input type = "image" name =

button but we can use "imagebutton" src =
Image an image as background "/html/images/logo.png" />
of the button.

35
220280116008 Batva Pooja

Hidden Control Hidden form controls <input type = "hidden" name =

are used to hide data "pagename" value = "10" />
inside the page which
later on can be pushed
to the server. This
control hides inside the
code and does not
appear on the actual
page.

Implementation:

Create User Registration Form in HTML (Suggested to use fields like Name, Date of Birth,
Gender, Email Id, Mobile No.,Address, State , Education , Image Upload etc) using textbox,
textarea, checkbox, radio button, select box, button, file upload etc

Form.html Form.css
<!DOCTYPE html> *{
<html lang="en"> padding: 0;
<head> margin: 0;
<meta charset="UTF-8" /> font-family: Arial, Helvetica, sans-serif;
<meta name="viewport" content="width=device-width, }
initial-scale=1.0" />
<title>Registration Form</title> body{
<link rel="stylesheet" href="Form.css" /> background-color: rgb(236, 253, 255);
</head> }
<body>
<div class="container"> .container{
<header>Registration Form</header> background-color: white;
<form action="#" method="post"> width: 50%;
<div class="fullname"> margin: auto;
<label for="fullname">Full Name</label> box-shadow: 0 0 15px rgb(155, 199, 205);
<input display: flex;
type="text" flex-direction: column;
name="fullname" align-items: center;
placeholder="Enter Your fullname" padding: 25px;
/> }
</div>
<div class="email"> .container header{
<label for="email">Email Id</label> color: navy;
<input type="email" name="email" font-size: 30px;
placeholder="Enter Your email id" /> font-weight: 500;
</div> padding: 25px;
<section> }
<div class="mobileno">
<label for="mobileno">Mobile No.</label> form{
<input type="number" name="mobileno" size="10" width: 100%;
/> display: flex;
</div> flex-direction: column;
<div class="dob"> gap: 20px;
<label for="dob">Date Of Birth</label> }
<input type="date" name="dob" />
</div> form input,textarea{
</section> height: 50px;

36
220280116008 Batva Pooja

<div class="gender"> width: 100%;

<label for="gender">Select gender</label> <br /> font-size: 20px;
<input type="radio" name="gender" value="Male" }
/>Male
<input type="radio" name="gender" form label{
value="Female" />Female font-size: 20px;
<input type="radio" name="gender" }
value="Other" />Other
</div> form .mobileno , .dob, .state, .image {
<div class="education"> width: 50%;
<label for="education">Select your }
Education</label> <br />
<input type="checkbox" name="education" section{
value="B.Tech" />B.Tech display: flex;
<input type="checkbox" name="education" gap: 20px;
value="M.Tech" />M.Tech }
<input type="checkbox" name="education" .gender input,.education input{
value="Ph.D" />Ph.D width: auto;
</div> height: auto;
<div class="address"> margin: 10px 20px;
<label for="address">Address</label> }
<textarea name="address" placeholder="Enter
Your Address"></textarea> .gender,.education{
</div> font-size: 20px;
<section> }
<div class="state"> .state,.image{
<label for="state">Select Your State</label> display: flex;
<select name="dropdown" id="state"> flex-direction: column;
<option value="Andhra Pradesh">Andhra }
Pradesh</option> .state select{
<option value="Arunachal Pradesh">Arunachal height: 50px;
Pradesh</option> font-size: 20px;
<option value="Assam">Assam</option> }
<option value="Bihar">Bihar</option> .image{
<option gap: 10px;
value="Chhattisgarh">Chhattisgarh</option> }
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal
Pradesh</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option
value="Maharashtra">Maharashtra</option>
<option value="Madhya Pradesh">Madhya
Pradesh</option>
<option value="Manipur">Manipur</option>
<option
value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil
Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Telangana">Telangana</option>
<option value="Uttar Pradesh">Uttar

37
220280116008 Batva Pooja

Pradesh</option>
<option
value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West
Bengal</option>
</select>
</div>
<div class="image">
<label for="image">Upload Image</label>
<input type="file" name="fileupload"
accept="image/*" />
</div>
</section>
<section>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</section>
</form>
</div>
</body>
</html>

Output :

Conclusion:

38
220280116008 Batva Pooja

Through this experiment we learnt about HTML User Registration Form which efficiently captures
essential user details using a variety of input elements. It is designed to be both comprehensive and
user-friendly

Quiz:

1. Explain form tag with its attributes.

The <form> tag in HTML is used to create a form for user input, and its key attributes include
action (specifies where to send the form data), method (defines the HTTP method, like GET or
POST), and enctype (specifies how the form data should be encoded).

2. Differentiate between text input and password input controls.

Text input controldisplays entered characters visibly, while password input control mask the
characters with dots or asterisks for security.

3. Explain various types of buttons available in HTML.

HTML offers various button types like submit (sends form data), reset (clears form fields),
button (custom actions with JavaScript), and image (submits form as an image).

Suggested Reference:

 https://www.w3schools.com/html/html_forms.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

39
220280116008 Batva Pooja

Experiment No: 6

Create two web pages, one contains audios and other page contains
videos (using HTML5 audio and video tags). Also provide link for
navigation between pages.

Date:

Competency and Practical Skills:

Relevant CO: 2

Objectives:

1. To study how to add audio and video content in html page.

Theory:

HTML Video

The HTML <video> element is used to show a video on a web page.

Example :

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The controls attribute adds video controls, like play, pause, and volume.

The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do
not support the <video> element.

HTML Audio

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

40
220280116008 Batva Pooja

The HTML <audio> element is used to play an audio file on a web page.
The controlsattribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
Implementation:

Create two web pages, one contains audios and other page contains videos (using HTML5
audio and video tags). Also provide link for navigation between pages.

Audio.html Video.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, <meta name="viewport" content="width=device-width,
initial-scale=1.0"> initial-scale=1.0">
<title>Audio Page</title> <title>Video Page</title>
</head> </head>
<body> <body>
<h1>Audio Page</h1> <h1>Video Page</h1>
<video width="320" height="240" controls>
<audio controls> <source src="movie.mp4" type="video/mp4">
<source src="audiofile.mp3" type="audio/mpeg"> </video>
</audio> <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<br><br> </video>
<br><br>
<audio controls> <a href="Audio.html">Go to Audio Page</a>
<source src="anotheraudiofile.ogg" </body>
type="audio/ogg"> </html>
</audio>

<br><br>
<a href="video.html">Go to Video Page</a>
</body>
</html>

Output:

41
220280116008 Batva Pooja

Conclusion:

Creating linked web pages with HTML5 audio and video tags enhances multimedia interaction on
your site. It ensures a smooth user experience with easy navigation between different types of
content.

Quiz:

1. Explain audio and video tags.

The <audio> and <video> tags in HTML5 are used to embed sound and video files directly into a
webpage, allowing for media playback with controls.

Suggested Reference:

 https://www.w3schools.com/html/html_media.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

42
220280116008 Batva Pooja

Experiment No: 7

Create a web page using frame. Divide the page into two parts with
Navigation links on left hand side of page (width=20%) and content page
on right hand side of page (width = 80%). On clicking the navigation
Links corresponding content must be shown on the right-hand side.

Date:

Competency and Practical Skills:

Relevant CO: 2

Objectives:

1. To study frame and frameset to divide page multiple sections.

2. To understand about use of target attribute to open web page in target frame.
Theory:

The <frame> tag was used in HTML 4 to define one particular window (frame) within a
<frameset>
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and
columns.
Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag.

The <frameset> tag defines , how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall open into
the frame.
The <frameset> Tag Attributes

43
220280116008 Batva Pooja

Example : example to create three horizontal frames

<frameset rows = "10%,80%,10%">

<frame name = "top" src = "./rows_demo_pages/top_frame.htm" />
<frame name = "main" src = "./rows_demo_pages/main_frame.htm" />
<frame name = "bottom" src = "./rows_demo_pages/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

in below implementation use target attribute in navigation link to open page in specific
frame.

Implementation:

Create a web page using frame. Divide the page into two parts with Navigation links on left
hand side of page (width=20%) and content page on right hand side of page (width = 80%).
On clicking the navigation Links corresponding content must be shown on the right-hand
side.

Frame.html Nav.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, <title>Navigation Frame</title>
initial-scale=1.0"> </head>
<title>Web Page with Frameset</title> <body>
</head> <h3>Navigation</h3>
<frameset cols="20%, 80%"> <ul>
<li><a href="naruto.html"
<frame name="nav" src="nav_frame.html"> target="content">Naruto</a></li>
<frame name="content" src="content_frame.html"> <li><a href="jjk.html" target="content">JJK</a></li>
<li><a href="yourname.html" target="content">Your
<noframes> Name</a></li>
<body>Your browser does not support </ul>
frames.</body> </body>
</noframes> </html>
</frameset>
</html>

Content_frame.html Style.css
<!DOCTYPE html> body {
<html lang="en"> font-family: Arial, sans-serif;
<head> margin: 0;
<meta charset="UTF-8"> padding: 0;
<title>Content Frame</title> background-color: #f4f4f4;
</head> }
<body> header {
<h1>Welcome to the Content Area</h1> background-color: #FF6600;
<p>Click on the links in the navigation frame to load color: white;
new content here.</p> text-align: center;

44
220280116008 Batva Pooja

</body> padding: 20px;

</html> }
main {
Naruto.html float: right;
padding: 20px;
<!DOCTYPE html>
background-color: #fff;
<html lang="en">
height: 100vh;
<head>
overflow-y: auto;
<meta charset="UTF-8">
}
<meta name="viewport" content="width=device-width,
h1,
initial-scale=1.0">
h2 {
<title>Naruto Fan Page</title>
color: #333;
<link rel="stylesheet" href="style.css">
}
</head>
p{
<body>
line-height: 1.6;
<header>
}
<h1>Naruto</h1>
</header>
<main> Yourname.html
<h2>About Naruto</h2> <!DOCTYPE html>
<p>Naruto is a Japanese manga series written and <html lang="en">
illustrated by Masashi Kishimoto. It tells the story of <head>
Naruto Uzumaki, a young ninja who seeks recognition <meta charset="UTF-8">
from his peers and dreams of becoming the Hokage, the <meta name="viewport" content="width=device-width,
leader of his village. The story is told in two parts: the first initial-scale=1.0">
is set in Naruto's pre-teen years (volumes 1–27), and the <title>Your Name Fan Page</title>
second in his teens (volumes 28–72)</p> <link rel="stylesheet" href="style.css">
</main> </head>
</body> <body>
</html> <header>
<h1>Your Name</h1>
</header>
jjk.html <main>
<!DOCTYPE html> <h2>About Your Name</h2>
<html lang="en"> <p>Your Name is a 2016 Japanese animated
<head> romantic fantasy film written and directed by Makoto
<meta charset="UTF-8"> Shinkai, produced
<meta name="viewport" content="width=device-width, by CoMix Wave Films, and distributed by Toho. It
initial-scale=1.0"> depicts the story of hig school students Taki Tachibana
<title>JJK Fan Page</title> and Mitsuha Miyamizu, who suddenly began to swap
<link rel="stylesheet" href="style.css"> bodies despite having neve met, unleashing chaos on
</head> each
<body> other's lives. The film was inspired by the frequency
<header> of natural disasters i Japan.</p>
<h1>JJK</h1> </main>
</header> </body>
<main> </html>
<h2>About JJK</h2>
<p>Jujutsu Kaisen is a Japanese manga series written
and illustrated by GegeAkutami. It was serialized in
Shueisha's shōnen manga magazine Weekly Shōnen
Jumpfrom March 2018 to September 2024, with its
chapters collected in 28 tankōbonvolumes as of October
2024. The story follows high school student Yuji Itadori
ashe joins a secret organization of Jujutsu Sorcerers to
eliminate a powerful Cursenamed Ryomen Sukuna, of
whom Yuji becomes the host. Jujutsu Kaisen is a sequel
toAkutami's Tokyo Metropolitan Curse Technical School,
serialized in Shueisha's JumpGiga from April to July
2017, later collected in a tankōbon volume,
retroactivelytitled as Jujutsu Kaisen 0, in December
2018</p>
</main> </body></html>

45
220280116008 Batva Pooja

Output:

Conclusion: (Sufficient space to be provided)

The frame-based layout allows for a simple division of a web page into navigation and content
sections, providing a way to manage content display dynamically. However, for modern web design,
it's recommended to use CSS-based layouts for better flexibility and compatibility.

Quiz:

1. Explain about rows and cols attribute of frame tag.

The rows and cols attributes of the <frameset> tag specify the dimensions of the frames in a
frame-based layout, where rows defines the height of horizontal frames and cols defines the
width of vertical frames.
2. Which tag embed an inline frame in a web page?
The <iframe> tag embeds an inline frame in a web page.

3. Which attribute in frame tag is used to specifies the web page to load into that frame?
The src attribute in the <frame> tag specifies the web page to load into that frame.

46
220280116008 Batva Pooja

Suggested Reference:

 https://www.w3schools.com/tags/tag_frameset.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

47
220280116008 Batva Pooja

Experiment No: 8

Design a web page of your home town with an attractive background

color, text color, an Image, font etc. (use internal CSS).

Date:

Competency and PracticalSkills:

Relevant CO: 3

Objectives:

1. To understand how CSS works.

Theory:

Introduction To CSS

- CSS stands for Cascading Style Sheets

- CSS describes how HTML elements are to be displayed.
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
- HTML was NEVER intended to contain tags for formatting a web page!. HTML was
created to describe the content of a web page.
- When tags like <font>, and color attributes were added to the HTML 3.2 specification,
it started a nightmare for web developers. Development of large websites, where
fonts and color information were added to every single page, became a long and
expensive process.
- To solve this problem, the World Wide Web Consortium (W3C) created CSS.
- CSS removed the style formatting from the HTML page!
CSS Syntax

- A CSS rule-set consists of a selector and a declaration block:

- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a CSS property name and a value, separated by a colon.
- declaration blocks are surrounded by curly braces.

48
220280116008 Batva Pooja

Example:In this example all <p> elements will be center-aligned, with a red text color

Code Output

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled
with CSS.</p>
</body>
</html>

- p is a selector in CSS (it points to the HTML element you want to style: <p>).
- color is a property, and red is the property value
- text-align is a property, and center is the property value
CSS Selectors

- CSS Element Selector

o The element selector selects HTML elements based on the element name.
o Example:

p{
text-align: center;
color: red;
}

- The CSS id Selector

o The id selector uses the id attribute of an HTML element to select a specific

element.
o The id of an element is unique within a page, so the id selector is used to select
one unique element!
o To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

49
220280116008 Batva Pooja

o Example

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by
the style.</p>
</body>
</html>

- CSS Class Selector

o The class selector selects HTML elements with a specific class attribute.
o To select elements with a specific class, write a period (.) character, followed
by the class name.
o Example
 In this example all HTML elements with class="center" will be red and
center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-
aligned heading</h1>
<p class="center">Red and center-
aligned paragraph.</p>
</body>
</html>

- CSS Universal Selector

o The universal selector (*) selects all HTML elements on the page.

50
220280116008 Batva Pooja

o Example
-
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be
affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

- CSS Grouping Selector

o The grouping selector selects all the HTML elements with the same style
definitions.
o To group selectors, separate each selector with a comma.
o Example:

h1, h2, p {
text-align: center;
color: red;
}

- The CSS Pseudo Class Selector

o Some selectors can be considered different because of the way the element
they belong to works.
o For example the anchor that creates a link between documents can have
pseudo classes attached to it simply because it is not known at the time of
writing the markup what the state will be.
o It could be visited , not visited , or in the process of being selected.
o CSS pseudo-classes are used to add special effects to some selectors. You do
not need to use JavaScript or any other script to use those effects.
o selector:pseudo-class {property: value}
o CSS classes can also be used with pseudo-classes
o selector.class:pseudo-class {property: value}

51
220280116008 Batva Pooja

a : link { color: red} o Example

a : active { color: yellow}
a : visited { color: green}
a : hover { font-weight: bold}
a : link : hover {font-weight:bold}

o o

- Types Of CSS

o External CSS
o Internal CSS
o Inline CSS
- Internal CSS

o An internal style sheet may be used if one single HTML page has a unique
style.
o The internal style is defined inside the <style> element, inside the head
section.
o Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

-CSS Background Color

- The background-color property specifies the background color of an element.

52
220280116008 Batva Pooja

- With CSS, a color is most often specified by:

o a valid color name - like "red"
o a HEX value - like "#ff0000"
o an RGB value - like "rgb(255,0,0)"
Example:

body {
background-color: lightblue;
}

-CSS Text Color

- text color can be set using color property

Example:

<h1 style="color:Tomato;">Hello
World</h1>

Implementation:

Design a web page of your home town with an attractive background color, text color, an
Image, font etc. (use internal CSS).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Junagadh, Gujarat</title>
<style>
/* General Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #e0f7fa; /* Light blue background */
color: #333;
margin: 0;
padding: 0;
line-height: 1.6;
}

/* Container for the entire webpage */

.container {
max-width: 1200px;
margin: 0 auto;
}

/* Header Section */
header {

53
220280116008 Batva Pooja

background-color: #1565c0; /* Dark blue header */

color: white;
padding: 40px;
text-align: center;
}

header h1 {
font-size: 48px;
font-family: 'Georgia', serif;
margin: 0;
}

header p {
font-size: 22px;
margin: 10px 0;
font-style: italic;
}

/* Navigation Bar */
nav {
background-color: #333;
padding: 15px 0;
text-align: center;
}

nav a {
color: white;
text-decoration: none;
font-size: 18px;
margin: 0 15px;
padding: 10px 20px;
display: inline-block;
border-radius: 5px;
}

nav a:hover {
background-color: #1565c0;
}

/* Image Section */
.image {
text-align: center;
margin: 40px 0;
}

.image img {
width: 100%;
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Content Section */
section {
padding: 40px 20px;
background-color: white;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

section h2 {
color: #1565c0;

54
220280116008 Batva Pooja

font-size: 36px;
margin-bottom: 20px;
}

section p {
font-size: 18px;
margin: 15px 0;
}

/* Additional Sections with Color */

#history, #culture, #landmarks {
background-color: #f0f4f8;
}

#food {
background-color: #d7eefb; /* Soft blue */
}

/* Footer */
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

/* Scroll-to-Top Button */
.scroll-top-btn {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #1565c0;
color: white;
border: none;
padding: 10px 20px;
font-size: 18px;
border-radius: 50px;
cursor: pointer;
display: none;
}

.scroll-top-btn:hover {
background-color: #1e88e5;
}

/* Media Queries for Responsiveness */

@media (max-width: 768px) {
header h1 {
font-size: 36px;
}

section h2 {
font-size: 28px;
}
}
</style>
</head>
<body>

<!-- Main Container -->

<div class="container">

55
220280116008 Batva Pooja

<!-- Header Section -->

<header>
<h1>Welcome to Junagadh, Gujarat</h1>
<p>The Land of Girnar and Historical Legacy</p>
</header>

<!-- Navigation Bar -->

<nav>
<a href="#about">About</a>
<a href="#history">History</a>
<a href="#culture">Culture</a>
<a href="#landmarks">Landmarks</a>
<a href="#food">Famous Foods</a>
</nav>

<!-- Image Section -->

<div class="image">
<img src="image.png" alt="Girnar">
</div>

<!-- About Section -->

<section id="about">
<h2>About Junagadh</h2>
<p>Junagadh, located at the foothills of the majestic Girnar Mountains, is a city of immense historical and cultural
significance in Gujarat. The city is known for its ancient temples, forts, and the renowned Girnar Hill, which attracts
pilgrims and adventure seekers alike.</p>
<p>The city blends the charm of old-world architecture with the vibrancy of modernity, offering visitors a unique
experience. Junagadh is also the gateway to the famous Gir National Park, home to the Asiatic lion.</p>
</section>

<!-- History Section -->

<section id="history">
<h2>Historical Significance</h2>
<p>Junagadh’s history dates back to several centuries, with its origins tied to the Mauryan, Chudasama, and
Mughal dynasties. One of the city’s most famous landmarks is Uparkot Fort, an ancient fortress that has witnessed
numerous battles and rulers over time.</p>
<p>Another historically important site is Ashoka’s Rock Edict, which bears inscriptions from Emperor Ashoka,
offering insight into the spread of Buddhism in the region. The city's rich history is also reflected in its architecture,
ranging from palaces to mosques and temples.</p>
</section>

<!-- Culture Section -->

<section id="culture">
<h2>Culture and Traditions</h2>
<p>Junagadh is a city that deeply values its traditions and cultural heritage. The city celebrates several festivals
with great enthusiasm, including Navratri, where locals perform the Garba and Dandiya Raas dances. Maha Shivaratri
is also an important festival, especially for the pilgrims visiting Girnar.</p>
<p>Junagadh’s arts and crafts, such as traditional Bandhani textiles and local pottery, showcase the creativity and
skill of its artisans. The city’s culture is a reflection of its diverse religious and historical influences.</p>
</section>

<!-- Landmarks Section -->

<section id="landmarks">
<h2>Famous Landmarks</h2>
<p>Junagadh is home to several iconic landmarks, including Girnar Hill, which has over 10,000 stone steps
leading to temples at its summit. The Girnar ropeway, the longest ropeway in Asia, makes it easier for visitors to reach
the hill’s peak and enjoy breathtaking views.</p>
<p>Other notable landmarks include the Mahabat Maqbara, a blend of Islamic and Gothic architecture, and the
Sakkarbaug Zoo, one of the oldest zoos in India.</p>
</section>

<!-- Famous Foods Section -->

56
220280116008 Batva Pooja

<section id="food">
<h2>Famous Foods of Junagadh</h2>
<p>Junagadh’s cuisine is a delightful blend of traditional Gujarati flavors. Some of the must-try dishes include
Khaman, Dhokla, Thepla, and the delicious Gujarati Thali. Street food in Junagadh, such as Fafda and Jalebi, is also
popular among both locals and tourists.</p>
<p>For those with a sweet tooth, don’t miss the local specialty, Ghee Sweets, made with pure ghee and known for
their rich taste and aroma.</p>
</section>

</div>

<!-- Footer Section -->

<footer>
<p>&copy; 2024 Junagadh, Gujarat. All rights reserved.</p>
</footer>

Scroll-to-Top Button
<button class="scroll-top-btn" onclick="scrollToTop()">&#8679; Back to Top</button>

<script>
// Show Scroll to Top Button when scrolled
window.onscroll = function() {
var button = document.querySelector('.scroll-top-btn');
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
button.style.display = "block";
} else {
button.style.display = "none";
}
};

// Scroll to Top Function

function scrollToTop() {
window.scrollTo({top: 0, behavior: 'smooth'});
}
</script>

</body>
</html>

Output:

57
220280116008 Batva Pooja

58
220280116008 Batva Pooja

Conclusion:

The web page uses internal CSS to create an appealing design with a light green background,
contrasting text color, and a responsive image. This approach ensures that the page is visually
engaging and easy to read.

Quiz:

1. Explain the syntax of the CSS.

syntax of CSS consists of a selector followed by a block of declarations, where each declaration
includes a property and a value, enclosed in curly braces,
Eg. selector {
property: value;
}

2. What is internal CSS?

Internal CSS is a method of styling a web page by including CSS rules within a <style> tag in the
<head> section of the HTML document.

3. Explain CSS class and Id selector.

Class selector is used to apply styles to elements with a specific class attribute, defined with a dot
(.) prefix,
Eg. .classname {
property: value;
},
ID selector targets a unique element with a specific ID attribute, defined with a hash (#) prefix,
Eg. #idname {
property: value;
}.

Suggested Reference:

 https://www.w3schools.com/css/css_syntax.asp
 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/
References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

59
220280116008 Batva Pooja

Experiment No: 9

Use Inline CSS to format your resume that you created in practical no 02.

Date:

Competency and Practical Skills:

Relevant CO: 3

Objectives:

1. To understand the use of Inline CSS.

Theory:

Internal CSS

- An inline style may be used to apply a unique style for a single element.
- To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
Example:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Implementation:

Use Inline CSS to format your resume that you created in practical no 02.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;">
<div class="body" style="width: 50rem; margin: auto;">
<header style="display: flex; flex-direction: column; align-items: center; background-color: rgb(0, 0, 70);">
<h1 style="color: white; padding: 0; margin: 5px;"> POOJA BATVA</h1>
<p style="color: white; padding: 0; margin: 5px;">SOFTWARE ENGINEER</p>
</header>
<section style="display: flex;">
<section class="left" style="background-color: aliceblue; width: 100rem;">
<section class="contact">
<h3 style="color: navy;">CONTACT</h3>
<label for="phoneno">Phone No :</label>
<a href="93XXX XXXXX">93XXX XXXXX</a><br>

60
220280116008 Batva Pooja

<label for="email">Email :</label>

<a href="[email protected]">[email protected]</a><br>
<label for="githun">GitHub :</label>
<a href="github/Pooja-Batva">github/Pooja-Batva</a><br>
<label for="Linkedin">Linked in :</label>
<a href="linkedin/pooja-batva">linkedin/pooja-batva</a>
</section>
<section class="expertise">
<h3 style="color: navy;">EXPERTISE SKILLS</h3>
<ul>
<li>C</li>
<li>JAVA</li>
<li>Frontend Developer</li>
<li>Data Science</li>
</ul>
</section>
<section class="language">
<h3 style="color: navy;">LANGUAGE</h3>
<ul>
<li>Gujarati</li>
<li>Hindi</li>
<li>English</li>
</ul>
</section>
<section class="interest">
<h3 style="color: navy;">INTEREST</h3>
<ul>
<li>Drawing</li>
<li>Games</li>
</ul>
</section>
</section>
<section class="right">
<section class="profprofile">
<h3 style="color: navy;">PROFESSIONAL PROFILE</h3>
<ul>
<li>Dedicated IT engineering student with a strong foundation in software development, computer networks,
and data science.</li>
<li>Hands-on experience in frontend development.</li>
<li>Proficient in programming languages such as C and Java.</li>
</ul>
</section>
<section class="education">
<h3 style="color: navy;">EDUCATION</h3>
<ul>
<h4>Becholar of Engineering</h4>
<ul>
<li>L.D. College of Engineering</li>
<li>CGPA : 8.00</li>
</ul>
<h4>HSC</h4>
<ul>
<li>Sigma school of science</li>
<li>Persentage : 80.00%</li>
</ul>
</ul>
</section>
<section class="experiance">
<h3 style="color: navy;">EXPERIENCE</h3>
<li>Hack4Purpose - Hackathon</li>
<p>Hack4Purpose is an annual hackathon designed to inspire engineering and management students to
address global challenges in alignment with the United Nations' Sustainable Development Goals (SDGs). It is

61
220280116008 Batva Pooja

scheduled for June 26-27, 2024 in Chennai, India. Participants are encouraged to propose innovative solutions, either
based on provided data or their own ideas, focusing on sustainability and social impact.</p>
</section>
</section>
</section>
</div>
</body>
</html>

Output:

Conclusion:

Inline CSS styles elements directly within the HTML tags, allowing for immediate and specific
customization. This approach is useful for quick adjustments but can lead to less maintainable code
compared to external or internal CSS.

62
220280116008 Batva Pooja

Quiz:

1. Explain Internal CSS VS Inline CSS.

Internal CSS styles a whole document using a <style> block in the <head>, while inline CSS
applies styles directly to individual elements via the style attribute.

2. CSS stands for ______ .

Cascading Style Sheet

3. Which HTML tag is used to define an internal style sheet?

The <style> tag is used to define an internal style sheet in HTML.
Suggested Reference:

 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

63
220280116008 Batva Pooja

Experiment No: 10

Use External, Internal, Inline CSS to format Information Technology

Department Web Pages that you created in Practical No.04

Date:

Competency and PracticalSkills:

Relevant CO: 3

Objectives:

1. To understand use of External CSS

Theory:

External CSS

 An external file is a good idea when you have a number of pages, or even a complete
site, which you need to control in terms of presentation.
 it saves lots of effort as at one time you would have needed to alter each page
individually.
 With an external style sheet, you can change the look of an entire website by
changing just one file!
 Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.
 External CSS file must be saved with a .css extension.
 Example

HTML Code : index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

CSS Code : mystyle.css

64
220280116008 Batva Pooja

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Implementation:

Use External, Internal, Inline CSS to format Information Technology Department Web Pages
that you created in Practical No.04

<!DOCTYPE html> education in the field of information technology, including

<html lang="en"> networking, software development, and data science.</p>
<head> </section>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, <section id="courses">
initial-scale=1.0"> <h2>Courses Offered</h2>
<title>Information Technology Department</title> <ul>
<link rel="stylesheet" href="styles.css"> <li>B.Tech in Information Technology</li>
<style> <li>M.Tech in Information and Cyber Security</li>
section h2 { <li>Ph.D. in Information Technology</li>
color: #005f73; </ul>
font-size: 1.8em; </section>
border-bottom: 2px solid #0a9396;
} <section id="facilities">
table { <h2>Facilities</h2>
width: 100%; <table>
border-collapse: collapse; <tr>
background-color: #e9d8a6; <th>Facility</th>
} <th>Description</th>
th, td { </tr>
padding: 0.8em; <tr>
border: 1px solid #bb3e03; <td>Computer Labs</td>
text-align: center; <td>State-of-the-art labs with high-performance
} systems and software for learning and development.</td>
</style> </tr>
</head> <tr>
<body> <td>Networking Labs</td>
<header style="background-color: #005f73; color: <td>Advanced networking facilities for hands-
white; padding: 1em; text-align: center;"> on learning in networking technologies and
<h1>Information Technology Department</h1> protocols.</td>
<nav> </tr>
<ul> </table>
<li><a href="#about">About Us</a></li> </section>
<li><a href="#courses">Courses
Offered</a></li> <section id="contact">
<li><a href="#facilities">Facilities</a></li> <h2>Contact Us</h2>
<li><a href="#contact">Contact Us</a></li> <p>Email: [email protected]</p>
</ul> <p>Phone: +91 98765 43210</p>
</nav> <p>Address: LD College of Engineering,
</header> Ahmedabad, Gujarat</p>
</section>
<section id="about">
<h2>About the IT Department</h2> <footer style="background-color: #005f73; color: white;
<p>Welcome to the Information Technology text-align: center; padding: 1em;">
Department. Our department focuses on providing quality <p>&copy; 2024 IT Department, LDCE. All rights

65
220280116008 Batva Pooja

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
section {
padding: 20px;
margin: 20px auto;
background-color: #ffffff;
width: 80%;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Output:

66
220280116008 Batva Pooja

Conclusion:

Using external CSS consistent styling is maintained across multiple pages, internal CSS is useful for
document-specific styles, and inline CSS allows for quick, localized adjustments. This approach
enhances flexibility and maintains clarity in styling web pages.

Quiz:

1. Explain External CSS.

It involves linking a separate CSS file to an HTML document using the <link> tag, thus allowing
for consistent styling across multiple pages.

2. Compare Internal, Inline and External CSS.

Internal CSS applies styling to a single document using a <style> block
Inline CSS applies styling directly to individual elements
External CSS uses a separate file linked to multiple documents for consistent styling.

3. Which property is used to change the background color?

The background-color property is used to change the background color of elements.

4. Which property is used to change the text color of the element?

The color property is used to change the text color of elements.

Suggested Reference:

 https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

67
220280116008 Batva Pooja

Experiment No: 11

Develop a java script to display today’s date.

Date:

Competency and Practical Skills:

Relevant CO: 4

Objectives:

1. To understand how to write simple java script

Theory:

Javascript

 Javascript is a client side scripting language.

 HTML and CSS for static rendering of a page
 Scripting languges allows content to change dynamically
 Possible to interact with the user beyond what is possible with HTML
 Scripts are programs and can execute on the client side (the one with the browser) or
server.
 Running a script on the client saves processing time on the server
 Types Of Javascript

o Internal Javascript
 JavaScript code is placed in the head and body section of an HTML
page.
 Example
<html>
<head>
<title>Internal JavaScript</title>
<script type="text/javascript">
document.write("Hello World.!!!");
</script>
</head>
<body>
</body>
</html>

o External javascript
 If you want to use the same script on several pages it could be good
idea to place the code in separate file, rather than writing it on each.
 JavaScript code are stored in separate external file using the .js
extension (Ex: external.js).

68
220280116008 Batva Pooja

 Example :
HTML File : index.html

<html>
<head>
<title>External JavaScript</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>

External javascript file : external.js

document.write("This is External Javascript Example.!!!");

Implementation:

Develop a java script to display today’s date.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Date</title>
</head>
<body>
<script>
console.log(new Date());
</script>
</body>
</html>

Output :

Conclusion:

This practical implementation of JavaScript effectively demonstrates how to display today’s date on a web
page. The program uses the built-in Date object to fetch and format the current date,

69
220280116008 Batva Pooja

Quiz:

1. What is javascript?
JavaScript is a programming language that adds interactivity to web pages. It's used to create
dynamic and interactive web pages

2. Explain internal and external javascript.

internal JavaScript is embedded directly within the HTML file, while external JavaScript is stored
in a separate file and linked to the HTML.
Suggested Reference:

 https://www.w3schools.com/JSREF/jsref_obj_date.asp
References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

70
220280116008 Batva Pooja

Experiment No: 12

Develop simple calculator for addition, subtraction, multiplication and

division operation using java script.

Date:

Competency and PracticalSkills:

Relevant CO: 4

Objectives:

1. To understand the use of mathematical operators in javascript.

2. To understand the use of document object model.
3. To understand javascript event handling.
Theory:

Javascript Syntax

How to create and use variables?

var x,y,z;

x=5;

y=5

z=x+y;

document.write(“total is : ”+z)

The HTML DOM ( Document Object Model)

- When a web page is loaded, the browser creates a Document Object Model of the
page.
- The HTML DOM model is constructed as a tree of Objects:
- Using DOM Javascript can
o change all the HTML elements in the page
o change all the HTML attributes in the page
o change all the CSS styles in the page
o remove existing HTML elements and attributes
o add new HTML elements and attributes
o react to all existing HTML events in the page

71
220280116008 Batva Pooja

o create new HTML events in the page

Figure 3 Document Object Model

DOM Examples

Example 1 : following example changes the content of <p> element

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

Here getElementById is a method, while innerHTML is a property.

Example 2: Validate Numeric Input

72
220280116008 Batva Pooja

<!DOCTYPE html>
<html>
<body>

<h2>Number Validation</h2>

<p>Enter a number between 1 and 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Implementation:

Develop simple calculator for addition, subtraction, multiplication and division operation
using java script.
Calc.html
<!DOCTYPE html> <input type="button" value="7" class="btn" />
<html lang="en"> <input type="button" value="8" class="btn" />
<head> <input type="button" value="9" class="btn" />
<meta charset="UTF-8" /> <input type="button" value="*" class="btn" />
<meta name="viewport" content="width=device-width, <input type="button" value="4" class="btn" />
initial-scale=1.0" /> <input type="button" value="5" class="btn" />
<title>Calculator</title> <input type="button" value="6" class="btn" />
<link rel="stylesheet" href="Calc.css" /> <input type="button" value="-" class="btn" />
</head> <input type="button" value="1" class="btn" />
<body> <input type="button" value="2" class="btn" />
<div class="body"> <input type="button" value="3" class="btn" />
<div class="input"> <input type="button" value="+" class="btn" />
<input type="texta" name="" id="display" /> <input type="button" value="00" class="btn" />
</div> <input type="button" value="0" class="btn" />
<div class="buttons"> <input type="button" value="=" id="eql" />
<input type="button" value="AC" id="allclear" /> </div>
<input type="button" value="DE" id="backspace" /> </div>
<input type="button" value="." class="btn" /> <script src="Calc.js"></script>
<input type="button" value="/" class="btn" /> </body></html>

73
220280116008 Batva Pooja

Calc.css Calc.js
.body{
width: 15.5rem; let display = document.getElementById('display');
border: 2px solid gray; let btn = document.querySelectorAll('.btn');
margin: auto;
} for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click",function(){
.input input{ display.value += btn[i].value;
height: 3rem; });
width: 15rem; }
text-align: right;
font-size: 20px; let equals = document.querySelector('#eql');
} let allc = document.querySelector('#allclear');
let back = document.querySelector('#backspace');
.buttons{
display: flex; equals.addEventListener('click', function(){
flex-wrap: wrap; display.value = eval(display.value);
width: 15rem; });
}
allc.addEventListener('click', function(){
.buttons input{ display.value = "";
width: 3rem; });
height: 3rem;
margin: 0.7rem 0 0 0.7rem; back.addEventListener('click',function(){
} display.value = display.value.slice(0,-1);
});
.buttons #eql{
width: 6.7rem; document.addEventListener('keydown' , function(event){
} let key = event.key;
if(key == 'Enter'){
display.value = eval(display.value);
}
})

Output :

74
220280116008 Batva Pooja

Conclusion:

This implementation demonstrates how to create a simple calculator using JavaScript that can perform
addition, subtraction, multiplication, and division. The integration of HTML, CSS, and JavaScript creates an
interactive user experience, while the straightforward design ensures usability. This project showcases
fundamental programming concepts in JavaScript, such as functions, event handling, and conditional logic,
making it a practical exercise for beginners in web development.

Quiz:

1. Explain Document Object Model.

HTML DOM (Document Object Model) is a hierarchical representation of HTML documents. It
defines the structure and properties of elements on a webpage, enabling JavaScript to
dynamically access, manipulate, and update content, enhancing interactivity and
functionality.
Suggested Reference:

 https://www.w3schools.com/js/js_htmldom.asp
 https://www.w3schools.com/js/js_validation.asp
References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

75
220280116008 Batva Pooja

Experiment No: 13

Write a java script code to combine and display the information in

textbox when the button is clicked use registration page that you created
in Practical No.5.

Date:

Competency and Practical Skills:

Relevant CO: 4

Objectives:

1. To understand the use of DOM for getting values from Form Controls.
2. To understand event handling with javascript
Theory:

What is an Event ?

- JavaScript's interaction with HTML is handled through events that occur when the
user or the browser manipulates a page.
- When the page loads, it is called an event. When the user clicks a button, that click too
is an event. Other examples include events like pressing any key, closing a window,
resizing a window, etc.
- Developers can use these events to execute JavaScript coded responses, which cause
buttons to close windows, messages to be displayed to users, data to be validated,
and virtually any other type of response imaginable.
- Events are a part of the Document Object Model (DOM) Level 3 and every HTML
element contains a set of events which can trigger JavaScript Code.

Example : the following javascript example demonstrate how to fetch value from textbox
and display using alert()

76
220280116008 Batva Pooja

<!DOCTYPE html>
<html>
<head>

<title>Java Script Demo</title>

<script>
function showData()
{
var uname,email;
uname = document.forms["myform"]["username"].value;
email = document.forms["myform"]["email"].value;
alert("you entered name:"+uname+" email:"+email);
}
</script>
</head>
<body>

<form name="myform">
UserName : <input type="text" name="username"/><br/>
Password : <input type="email" name="email"/><br/>
<input type="button" value="display" onclick="showData()" />
</form>
</body>
</html>

Implementation:

Write a java script code to combine and display the information in textbox when the button
is clicked use registration page that you created in Practical No.5.

Form.js
let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", (event) => {

event.preventDefault();

let fullName = document.querySelector("input[name='fullname']").value;

let email = document.querySelector("input[name='email']").value;
let mobileNo = document.querySelector("input[name='mobileno']").value;
let dob = document.querySelector("input[name='dob']").value;
let gender = document.querySelector("input[name='gender']:checked").value;

let educationElements = document.querySelectorAll("input[name='education']:checked");

let education = Array.from(educationElements).map(el => el.value).join(", ");

let address = document.querySelector("textarea[name='address']").value;

let state = document.querySelector("select[name='dropdown']").value;

let outputText = `
Full Name: ${fullName}
Email: ${email}
Mobile No: ${mobileNo}
Date of Birth: ${dob}
Gender: ${gender}
Education: ${education}
Address: ${address}
State: ${state}

77
220280116008 Batva Pooja

`;

alert(outputText);
});

Output :

Conclusion:

This implementation provides a simple registration page where users can enter their information and view it
combined in a friendly format upon clicking the button. The project showcases fundamental concepts of web
development, including HTML structure, CSS for styling, and JavaScript for dynamic interactivity. This
example is an excellent starting point for beginners to understand how to manipulate the Document Object
Model (DOM) and respond to user actions effectively.

Quiz:

1. Explain event handling with javascript.

Event handling in JavaScript is a crucial aspect of creating interactive web applications. It
involves responding to user actions or system events, allowing developers to execute specific
code in response to these events. Here's a brief overview of event handling in JavaScript:

Key Concepts of Event Handling

Events: An event is an action or occurrence that happens in the browser, which can be
triggered by user interactions (such as clicks, key presses, or mouse movements) or other
activities (like loading a webpage).

Event Listeners: An event listener is a function that waits for a specific event to occur on a
particular element. When the event occurs, the listener executes its associated function.

Event Types: JavaScript supports a variety of event types, including:

78
220280116008 Batva Pooja

Mouse Events: click, dblclick, mouseover, mouseout, mousedown, mouseup

Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll, unload
Adding Event Listeners: You can add event listeners using the addEventListener() method,
which allows for multiple listeners on the same event type. The syntax is:
element.addEventListener('eventType', eventHandler);
Removing Event Listeners: To remove an event listener, use the removeEventListener()
method. This requires the exact same function reference that was used when adding the
listener.
Event Object: When an event occurs, an event object is created and passed to the event
handler. This object contains information about the event, such as the target element, the
type of event, and additional properties (like mouse coordinates or keyboard key codes).

Suggested Reference:

 https://www.w3schools.com/js/js_validation.asp
References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

79
220280116008 Batva Pooja

Experiment No: 14

Use JavaScript to Implement validation in Practical No.5.

Date:

Competency and Practical Skills:

Relevant CO: 4

Objectives:

1. To understand validation using javascript.

Theory:

Javascript can be used for HTML form validation

Following example demonstrate form validation using javascript
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

80
220280116008 Batva Pooja

Implementation:

Use JavaScript to Implement validation in Practical No.5

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function(event) {
event.preventDefault();

let fullName = document.querySelector("input[name='fullname']").value;

let email = document.querySelector("input[name='email']").value;
let mobileNo = document.querySelector("input[name='mobileno']").value;
let dob = document.querySelector("input[name='dob']").value;
let gender = document.querySelector("input[name='gender']:checked");

let educationElements = document.querySelectorAll("input[name='education']:checked");

let education = Array.from(educationElements).map(el => el.value).join(", ");

let address = document.querySelector("textarea[name='address']").value;

let state = document.querySelector("select[name='dropdown']").value;

let emailvalidation = /^([a-zA-Z0-9.-]+)@([a-zA-Z0-9-]+)\.([a-z]{2,})$/;

let namevalidation = /^[a-zA-Z\s]+$/;
let numvalidation = /^\d{10}$/;

let errormsg = "";

if(fullName == "" || !namevalidation.test(fullName)){

errormsg += "Full name should not be empty and must contain only alphabets and spaces.\n";
}

if(email == "" || !emailvalidation.test(email)){

errormsg += "Your Email ID is not in the correct format.\n";
}

if(!numvalidation.test(mobileNo)){
errormsg += "Mobile number must be 10 digits.\n";
}

if(dob == "" || !gender || education == "" || state == "" || address == ""){

errormsg += "All details must be filled.\n";
}

if(errormsg != ""){
alert(errormsg);
} else {
alert("Registration Successful!");
}
});

81
220280116008 Batva Pooja

Output :

Conclusion:

this JavaScript validation implementation is crucial for creating robust and user-friendly web applications. It
not only streamlines the registration process but also enhances the overall reliability and security of the
application by reducing the chances of receiving invalid data. This foundational knowledge of form
validation is essential for any aspiring web developer, providing a basis for building more complex user
interfaces in the future.

Quiz:

1. Explain javascript form validation.

JavaScript form validation is a technique used to ensure that the data entered into a
web form meets specific criteria before it is submitted to the server. This process
helps improve user experience by providing immediate feedback and preventing the
submission of invalid data. Here’s a comprehensive overview of JavaScript form
validation:

82
220280116008 Batva Pooja

Key Concepts of JavaScript Form Validation

Purpose of Form Validation:

Data Integrity: Ensure that the data submitted is accurate and conforms to expected formats
(e.g., email addresses, phone numbers).
User Experience: Provide real-time feedback to users, helping them correct errors before
submission.
Reduce Server Load: By validating on the client side, you can prevent unnecessary server
requests for invalid data.
Types of Validation:

Client-Side Validation: Performed in the user's browser using JavaScript before the form data
is sent to the server. It is fast and provides instant feedback.
Server-Side Validation: Performed on the server after the form is submitted. This is essential
to ensure security and handle cases where JavaScript might be disabled in the
browser.
Common Validation Techniques:

Required Fields: Check if certain fields must be filled out (e.g., name, email).
Format Checking: Validate that the data follows a specific format (e.g., email format, phone
number format).
Length Checking: Ensure that text inputs meet minimum and/or maximum length
requirements.
Value Range Checking: For numeric inputs, validate that the values fall within a specified
range.
Using Regular Expressions: Regular expressions (regex) are often used in validation
to define complex patterns for strings. For example, you can use regex to validate
email formats or password complexity.
Suggested Reference:

 https://www.w3schools.com/js/js_validation.asp
References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

83
220280116008 Batva Pooja

Experiment No: 15

Write a PHP program to check if number is prime or not.

Date:

Competency and Practical Skills:

Relevant CO: 5

Objectives:

1. To understand how to write simple php program

2. To understand how to use php conditional and Loops Statement
Theory:

PHP

 PHP is a server scripting language, and a powerful tool for making dynamic and
interactive Web pages.
 PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's
ASP.
 Syntax
<?php
// PHP code goes here
?>
 Example :demonstrate printing Hello World

<!DOCTYPE html>
<html>
<body>

<?php
echo "Hello World";
?>
</body>
</html>

 Creating (Declaring) PHP Variables

<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>

 PHP Conditional Statements

Statement Syntax

84
220280116008 Batva Pooja

PHP - The if Statement

if (condition) {
code to be executed if
condition is true;
}
PHP - The if...else Statement
if (condition) {
code to be executed if
condition is true;
} else {
code to be executed if
condition is false;
}
PHP - The if...elseif...else Statement
if (condition) {
code to be executed if
this condition is true;
} elseif (condition) {
code to be executed if
first condition is false
and this condition is
true;
} else {
code to be executed if
all conditions are false;
}

 PHP Loop Statements

Statement Syntax

The PHP while Loop

while (condition is true)
{
code to be executed;
}
The PHP do...while Loop
do {
code to be executed;
} while (condition is
true);
The PHP for Loop
for (init counter; test
counter; increment
counter) {
code to be executed for
each iteration;
}

85
220280116008 Batva Pooja

The PHP foreach Loop

foreach
($array as $value) {
code to be executed;
}

Implementation:

<?php
function isPrime($n){
if($n <= 1){
return false;
}
for($i = 2; $i <= sqrt($n); $i++){
if($n % $i == 0){
return false;
}
}
return true;
}

$n = 67;

if(isPrime($n)){
echo"{$n} is prime number";
}
else{
echo"{$n} is NOT prime number";
}
?>

Output :

Conclusion:

The PHP program to check if a number is prime effectively demonstrates the use of basic programming
constructs such as conditional statements and loops. By employing an efficient algorithm that only tests for
factors up to the square root of the number, the program optimizes performance, especially for larger inputs.

Quiz:

1. What is PHP? Explain PHP Syntax.

 PHP is an acronym for "PHP: Hypertext Preprocessor"
 PHP is a widely-used, open source scripting language
 PHP scripts are executed on the server

86
220280116008 Batva Pooja

 PHP is free to download and use

Syntax :
<?php
// PHP code goes here
?>
A PHP script can be placed anywhere in the document.
A PHP script starts with <?php and ends with ?>:

2. Explain foreach Loop in PHP.

The foreach loop in PHP is used to iterate over arrays. It provides an easy way to loop
through the elements of an array without needing to manually manage the index.
Syntax :
foreach ($array as $value) {
// Code to execute for each element
}

Suggested Reference:

 https://www.w3schools.com/php/php_looping.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

87
220280116008 Batva Pooja

Experiment No: 16

Use Registration Form from practical number 5 to store user registration

details in MySql database. On submission next page displays all
registration data in html table using php. Also provide feature to update
and delete the registration data.

Date:

Competency and Practical Skills:

Relevant CO: 5

Objectives:

1. To understand how to use MySql database

2. To understand how to perform CRUD operations.
Theory:

Accessing MySQL from PHP Note that documentation is available online here:
http://www.php.net/manual/en/ref.mysql.php

Basically, there are four things you want to be able to do in MySQL from within PHP:

1. connect to the mysql database

2. execute mysql queries
3. check the status of your mysql commands
4. disconnect from the mysql database

Queries can be any kind of MySQL query, including SELECT, UPDATE, INSERT, etc. Using
SELECT queries, you can execute MySQL/PHP functions to put the data read from the
MySQL database into PHP variables. Then you can use the PHP variables in your PHP script
to do whatever analysis, display, etc. that you want.

1. Connect to the MySQL database

Here is an example of connecting to the MySQL database from within PHP:

$conn=mysql_connect($mysql_host,$mysql_user,$mysql_password) or die('Could not

connect: ’.mysql_error());

echo ’Connected successfully’;

mysql_select_db( $mysql_db ) or die( ’Could not select database’ );

88
220280116008 Batva Pooja

You will need to replace the variables $mysql_host, $mysql_user, $mysql_password and
$mysql_db with strings containing the values for connecting to your database. $mysql_host
is "localhost"

Notice that there are two functions invoked:

- Logs into mysql: mysql_connect()

- Selects the database to use: mysql_select_db()
Also notice that you put your un-encrypted password in the script that connects to the
database. So be careful where you put that script! Make sure it is in a directory where there
is a default index.html (or index.php) file so that nobody can get to the script from a web
browser.

2. Execute MySQL queries

Here is an example of executing a SELECT query from within PHP:

// set up and execute the MySQL query

$query = ’SELECT * FROM my_table’;

$result = mysql_query( $query ) or die( ’Query failed: ’. mysql_error() );

// print the results as an HTML table

echo " \n";

while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ))

echo "\t \n";

foreach ( $row as $item )

echo "\t\t $item\n";

echo "\t\n";

echo "\n";

// free result

mysql_free_result( $result );

89
220280116008 Batva Pooja

There are three functions used here:

- To execute the query and store the result in a local variable: mysql_query()
- Parse the data read returned from the query as an array: mysql_fetch_array()
- Free the memory used by the query result: mysql_free_result()
NOTE that if the result returned is a scalar and not an array, then only mysql_query() needs
to be called and does not need to be followed by a call to mysql_fetch_array().

Finally, note the use of mysql_error() in the query function.

3. Check the status of your MySQL commands

If errors occur, the functions return errors. These errors can be read as strings using the
function mysql_error(). Note the usage in this statement:

$conn=mysql_connect($mysql_host,$mysql_user,$mysql_password) or die('Could not

connect: ’.mysql_error());

echo ’Connected successfully’;

4. Disconnect from the MySQL database

To disconnect from MySQL, there is one function needed:

mysql_close($conn);

Implementation:

Use Registration Form from practical number 5 to store user registration details in MySql
database. On submission next page displays all registration data in in html table using php.
Also provide feature to update and delete the registration data.

CREATE DATABASE registration_db; Submit.php

<?php
USE registration_db; // Database connection
$servername = "localhost";
CREATE TABLE users ( $username = "root";
id INT AUTO_INCREMENT PRIMARY KEY, $password = "";
fullname VARCHAR(255) NOT NULL, $dbname = "registration_db";
email VARCHAR(255) NOT NULL,
mobileno VARCHAR(15), $conn = new mysqli($servername, $username, $password,
dob DATE, $dbname);
gender VARCHAR(10),
education VARCHAR(50), if ($conn->connect_error) {
address TEXT, die("Connection failed: " . $conn->connect_error);
state VARCHAR(50), }
image VARCHAR(255)
); if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fullname = $_POST['fullname'];
$email = $_POST['email'];

90
220280116008 Batva Pooja

View.php $mobileno = $_POST['mobileno'];

<?php $dob = $_POST['dob'];
// Database connection $gender = $_POST['gender'];
$servername = "localhost";
$username = "root"; // Fix for education
$password = ""; $education = isset($_POST['education']) ? implode(", ",
$dbname = "registration_db"; $_POST['education']) : '';

$conn = new mysqli($servername, $username, $address = $_POST['address'];

$password, $dbname); $state = $_POST['state'];

if ($conn->connect_error) { // Image upload handling

die("Connection failed: " . $conn->connect_error); $image = $_FILES['fileupload']['name'];
} $target_dir = "uploads/";
$target_file = $target_dir .
// Handle delete action basename($_FILES["fileupload"]["name"]);
if (isset($_GET['delete'])) {
$id = $_GET['delete']; // Move uploaded file to the uploads directory
$conn->query("DELETE FROM users WHERE if (move_uploaded_file($_FILES["fileupload"]
id=$id"); ["tmp_name"], $target_file)) {
header("Location: view_data.php"); echo "The file " .
} htmlspecialchars(basename($_FILES["fileupload"]
["name"])) . " has been uploaded.";
// Fetch all records } else {
$result = $conn->query("SELECT * FROM users"); echo "Sorry, there was an error uploading your file.";
}
?>
// Insert data into the database
<!DOCTYPE html> $sql = "INSERT INTO users (fullname, email, mobileno,
<html lang="en"> dob, gender, education, address, state, image)
<head> VALUES ('$fullname', '$email', '$mobileno', '$dob',
<meta charset="UTF-8"> '$gender', '$education', '$address', '$state', '$image')";
<meta name="viewport" content="width=device-
width, initial-scale=1.0"> if ($conn->query($sql) === TRUE) {
<title>View Data</title> echo "New record created successfully";
</head> header("Location: view_data.php");
<body> } else {
<h1>Registered Users</h1> echo "Error: " . $sql . "<br>" . $conn->error;
<table border="1"> }
<tr> }
<th>Full Name</th>
<th>Email</th> $conn->close();
<th>Mobile</th> ?>
<th>DOB</th>
<th>Gender</th> <?php
<th>Education</th> // Database connection
<th>Address</th> $servername = "localhost";
<th>State</th> $username = "root";
<th>Image</th> $password = "";
<th>Actions</th> $dbname = "registration_db";
</tr>
$conn = new mysqli($servername, $username, $password,
<?php while ($row = $result->fetch_assoc()) { ?> $dbname);
<tr>
<td><?php echo $row['fullname']; ?></td> if ($conn->connect_error) {
<td><?php echo $row['email']; ?></td> die("Connection failed: " . $conn->connect_error);
<td><?php echo $row['mobileno']; ?></td> }
<td><?php echo $row['dob']; ?></td>
<td><?php echo $row['gender']; ?></td> // Check if ID is set
<td><?php echo $row['education']; ?></td> if (isset($_GET['id'])) {
<td><?php echo $row['address']; ?></td> $id = $_GET['id'];
$sql = "SELECT * FROM users WHERE id='$id'";

91
220280116008 Batva Pooja

<td><?php echo $row['state']; ?></td> $result = $conn->query($sql);

<td><img src="uploads/<?php echo $user = $result->fetch_assoc();
$row['image']; ?>" width="100" /></td> } else {
<td> die("User ID not provided.");
<a href="update_form.php?id=<?php echo }
$row['id']; ?>">Edit</a> ?>
<a href="view_data.php?delete=<?php echo
$row['id']; ?>" onclick="return confirm('Are you Update_form.php
sure?')">Delete</a> <!DOCTYPE html>
</td> <html lang="en">
</tr> <head>
<?php } ?> <meta charset="UTF-8">
</table> <meta name="viewport" content="width=device-width,
</body> initial-scale=1.0">
</html> <title>Update User</title>
<link rel="stylesheet" href="Form.css">
<?php $conn->close(); ?> </head>
<body>
<h1>Update User</h1>
<form action="update.php" method="POST"
enctype="multipart/form-data">
Update.php <input type="hidden" name="id" value="<?php echo
<?php $user['id']; ?>" />
// Database connection <div>
$servername = "localhost"; <label for="fullname">Full Name:</label>
$username = "root"; <input type="text" name="fullname" value="<?php
$password = ""; echo $user['fullname']; ?>" required />
$dbname = "registration_db"; </div>
<div>
$conn = new mysqli($servername, $username, <label for="email">Email:</label>
$password, $dbname); <input type="email" name="email" value="<?php
echo $user['email']; ?>" required />
if ($conn->connect_error) { </div>
die("Connection failed: " . $conn->connect_error); <div>
} <label for="mobileno">Mobile No:</label>
<input type="text" name="mobileno" value="<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") { echo $user['mobileno']; ?>" required />
$id = $_POST['id']; </div>
$fullname = $_POST['fullname']; <div>
$email = $_POST['email']; <label for="dob">Date of Birth:</label>
$mobileno = $_POST['mobileno']; <input type="date" name="dob" value="<?php echo
$dob = $_POST['dob']; $user['dob']; ?>" required />
$gender = $_POST['gender']; </div>
<div>
// Handle the education array correctly <label for="gender">Gender:</label>
$education = isset($_POST['education']) ? implode(", <select name="gender">
", $_POST['education']) : ''; <option value="Male" <?php echo $user['gender']
=== 'Male' ? 'selected' : ''; ?>>Male</option>
$address = $_POST['address']; <option value="Female" <?php echo
$state = $_POST['state']; $user['gender'] === 'Female' ? 'selected' : '';
?>>Female</option>
// Update data in the database <option value="Other" <?php echo $user['gender']
$sql = "UPDATE users SET fullname='$fullname', === 'Other' ? 'selected' : ''; ?>>Other</option>
email='$email', mobileno='$mobileno', dob='$dob', </select>
gender='$gender', education='$education', </div>
address='$address', state='$state' WHERE id='$id'"; <div>
<label for="education">Education:</label><br />
if ($conn->query($sql) === TRUE) { <input type="checkbox" name="education[]"
echo "Record updated successfully"; value="B.Tech" <?php echo in_array('B.Tech', explode(', ',
header("Location: view_data.php"); $user['education'])) ? 'checked' : ''; ?>>B.Tech<br />
} else { <input type="checkbox" name="education[]"

92
220280116008 Batva Pooja

echo "Error updating record: " . $conn->error; value="M.Tech" <?php echo in_array('M.Tech', explode(', ',
} $user['education'])) ? 'checked' : ''; ?>>M.Tech<br />
} <input type="checkbox" name="education[]"
value="Ph.D" <?php echo in_array('Ph.D', explode(', ',
$conn->close(); $user['education'])) ? 'checked' : ''; ?>>Ph.D<br />
?> </div>
<div>
<label for="address">Address:</label>
<textarea name="address" required><?php echo
$user['address']; ?></textarea>
</div>
<div>
<label for="state">State:</label>
<select name="state">
<option value="Gujarat" <?php echo $user['state']
=== 'Gujarat' ? 'selected' : ''; ?>>Gujarat</option>
<!-- Add other states similarly -->
</select>
</div>
<div>
<input type="submit" value="Update" />
</div>
</form>
</body>
</html>

<?php
$conn->close();
?>

Output :

93
220280116008 Batva Pooja

Conclusion:

This practical showcases a complete user registration system using PHP and MySQL, providing a hands-on
experience with several important concepts in web development : User Registration , Data Retrieval and
Display, Update and Delete Features , Error Handling.

Quiz:

1. What is MySql?
MySQL is an open-source relational database management system (RDBMS) that is
widely used for managing and organizing data. It is one of the most popular database
systems in the world and is known for its speed, reliability, and flexibility.
2. Write a sample code to demonstrate php mysql connectivity.
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection

94
220280116008 Batva Pooja

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>

Suggested Reference:

 http://www.php.net/manual/en/ref.mysql.php
References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

95
220280116008 Batva Pooja

Experiment No: 17

Write a PHP script for user authentication using PHP-MYSQL. Use session
for storing username

Date:

Competency and PracticalSkills:

Relevant CO: 3

Objectives:

1. To understand session in PHP

Theory:

What is a PHP Session?

When you work with an application, you open it, do some changes, and then you close it.
This is much like a Session. The computer knows who you are. It knows when you start the
application and when you end. But on the internet there is one problem: the web server
does not know who you are or what you do, because the HTTP address doesn't maintain
state.

Session variables solve this problem by storing user information to be used across multiple
pages (e.g. username, favorite color, etc). By default, session variables last until the user
closes the browser.

So; Session variables hold information about one single user, and are available to all pages in
one application.

Start a PHP Session

A session is started with the session_start() function.

Session variables are set with the PHP global variable: $_SESSION.

Now, let's create a new page called "demo_session1.php". In this page, we start a new PHP
session and set some session variables:

96
220280116008 Batva Pooja

<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// Set session variables
$_SESSION["favcolor"]
= "green";
$_SESSION["favanimal"]
= "cat";
echo "Session variables
are set.";
?>

</body>
</html>

Get PHP Session Variable Values

Next, we create another page called "demo_session2.php". From this page, we will access the
session information we set on the first page ("demo_session1.php").

Notice that session variables are not passed individually to each new page, instead they are
retrieved from the session we open at the beginning of each page (session_start()).

Also notice that all session variable values are stored in the global $_SESSION variable:

97
220280116008 Batva Pooja

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// Echo session variables
that were set on previous
page
echo "Favorite color is
" . $_SESSION["favcolor"]
. ".<br>";
echo "Favorite animal is
" . $_SESSION["favanimal"
] . ".";
?>

</body>
</html>

Modify a PHP Session Variable

To change a session variable, just overwrite it:

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// to change a session
variable, just overwrite
it
$_SESSION["favcolor"]
= "yellow";
print_r($_SESSION);
?>

</body>
</html>

Destroy a PHP Session

To remove all global session variables and destroy the session, use session_unset() and
session_destroy():

98
220280116008 Batva Pooja

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>

<?php
// remove all session
variables
session_unset();

// destroy the session

session_destroy();
?>

</body>
</html>

Implementation:

Write a PHP script for user authentication using PHP-MYSQL. Use session for storing
username.

CREATE DATABASE user_auth; Register.php

USE user_auth; <?php
// Database connection
CREATE TABLE users ( $servername = "localhost";
id INT AUTO_INCREMENT PRIMARY KEY, $username = "root";
username VARCHAR(50) NOT NULL UNIQUE, $password = "";
password VARCHAR(255) NOT NULL $dbname = "user_auth";
);
$conn = new mysqli($servername, $username,
$password, $dbname);
Login.php
// Check connection
<?php if ($conn->connect_error) {
session_start(); // Start the session die("Connection failed: " . $conn->connect_error);
}
// Database connection
$servername = "localhost"; // Registration logic
$username = "root"; if ($_SERVER["REQUEST_METHOD"] == "POST") {
$password = ""; $username = $_POST['username'];
$dbname = "user_auth"; $password = password_hash($_POST['password'],
PASSWORD_DEFAULT); // Hash the password
$conn = new mysqli($servername, $username,
$password, $dbname); $sql = "INSERT INTO users (username, password)
VALUES ('$username', '$password')";
// Check connection
if ($conn->connect_error) { if ($conn->query($sql) === TRUE) {
die("Connection failed: " . $conn->connect_error); echo "Registration successful. You can now <a
} href='login.php'>login</a>.";
} else {
// Login logic echo "Error: " . $sql . "<br>" . $conn->error;

99
220280116008 Batva Pooja

if ($_SERVER["REQUEST_METHOD"] == "POST") { }
$username = $_POST['username']; }
$password = $_POST['password'];
$conn->close();
$sql = "SELECT * FROM users WHERE ?>
username='$username'";
$result = $conn->query($sql); <!DOCTYPE html>
<html lang="en">
if ($result->num_rows > 0) { <head>
$row = $result->fetch_assoc(); <meta charset="UTF-8">
// Verify password <meta name="viewport" content="width=device-width,
if (password_verify($password, $row['password'])) { initial-scale=1.0">
$_SESSION['username'] = $username; // Store <title>Register</title>
username in session </head>
header("Location: welcome.php"); // Redirect to <body>
welcome page <h1>Registration</h1>
exit(); <form action="" method="POST">
} else { <div>
echo "Invalid password."; <label for="username">Username:</label>
} <input type="text" name="username" required>
} else { </div>
echo "No user found with that username."; <div>
} <label for="password">Password:</label>
} <input type="password" name="password"
required>
$conn->close(); </div>
?> <div>
<input type="submit" value="Register">
<!DOCTYPE html> </div>
<html lang="en"> </form>
<head> </body>
<meta charset="UTF-8"> </html>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Login</title>
Welcome.php
</head>
<body>
<?php
<h1>Login</h1>
session_start(); // Start the session
<form action="" method="POST">
<div>
if (!isset($_SESSION['username'])) {
<label for="username">Username:</label>
header("Location: login.php"); // Redirect to login if not
<input type="text" name="username" required>
logged in
</div>
exit();
<div>
}
<label for="password">Password:</label>
<input type="password" name="password"
// Logout logic
required>
if (isset($_GET['logout'])) {
</div>
session_destroy(); // Destroy the session
<div>
header("Location: login.php"); // Redirect to login page
<input type="submit" value="Login">
exit();
</div>
}
</form>
?>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Welcome</title>
</head>

100
220280116008 Batva Pooja

<body>
<h1>Welcome, <?php echo
htmlspecialchars($_SESSION['username']); ?>!</h1>
<p><a href="?logout=true">Logout</a></p>
</body>
</html>
Output :

Conclusion:

This practical illustrates a complete user authentication system using PHP and MySQL, providing a hands-on
experience with several fundamental concepts in web development: User Registration, User Login, Session
Management, Error Handling.

Quiz:

1. What is PHP Session?

PHP session is used to store and pass information from one page to another temporarily
(until user close the website).
PHP session technique is widely used in shopping websites where we need to store and
pass cart information e.g. username, product code, product name, product price etc from one
page to another.
PHP session creates unique user id for each browser to recognize the user and avoid
conflict between multiple browsers.

2. How to destroy PHP Session?

A PHP session can be destroyed by session_destroy() function. This function does not
need any argument and a single call can destroy all the session variables. If you want
to destroy a single session variable then you can use unset() function to unset a
session variable.

101
220280116008 Batva Pooja

Here is an example to unset a single variable −

<?php
unset($_SESSION['counter']);
?>

Here is the call which will destroy all the session variables −

<?php
session_destroy();
?>

Suggested Reference:

 https://www.w3schools.com/php/php_sessions.asp
References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

102
220280116008 Batva Pooja

Experiment No: 18

Using AJAX Create visual search feature to search using name for
practical number 16 which list name, mobile number and email id of
matching users.

Date:

Competency and Practical Skills:

Relevant CO: 6

Objectives:

1. To understand how Ajax works.

Theory:

What is AJAX?
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
- A browser built-in XMLHttpRequest object (to request data from a web server)
- JavaScript and HTML DOM (to display or use the data)
AJAX allows web pages to be updated asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.

Ref: https://www.w3schools.com/js/js_ajax_intro.asp
Steps:
1. An event occurs in a web page (the page is loaded, a button is clicked)
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page

103
220280116008 Batva Pooja

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

The keystone of AJAX is the XMLHttpRequest object.

1. Create an XMLHttpRequest object

variable = new XMLHttpRequest();

2. Define a callback function

xhttp.onload = function() {
// What to do when the response is ready
}

3. Open the XMLHttpRequest object

xhttp.open("GET", "ajax_info.txt");

4. Send a Request to a server

xhttp.send();

XMLHttpRequest Object Methods

Method Description

new XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information

open(method, url, async, user, psw) Specifies the request

method: the request type GET or POST

url: the file location
async: true (asynchronous) or false (synchronous)

104
220280116008 Batva Pooja

user: optional user name

psw: optional password

send() Sends the request to the server

Used for GET requests

send(string) Sends the request to the server.

Used for POST requests

setRequestHeader() Adds a label/value pair to the header to be sent

XMLHttpRequest Object Properties

Property Description

Onload Defines a function to be called when the request is recieved

(loaded)

onreadystatechange Defines a function to be called when the readyState property

changes

readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

responseText Returns the response data as a string

responseXML Returns the response data as XML data

105
220280116008 Batva Pooja

Status Returns the status-number of a request

200: "OK"
403: "Forbidden"
404: "Not Found"
For a complete list go to the Http Messages Reference

statusText Returns the status-text (e.g. "OK" or "Not Found")

Call back function

With the XMLHttpRequest object you can define a callback function to be executed when the
request receives an answer. The function is defined in the onload property of
the XMLHttpRequest object:

xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

The onreadystatechange Property

The readyState property holds the status of the XMLHttpRequest.
The onreadystatechange property defines a callback function to be executed when the readyState
changes. The status property and the statusText properties hold the status of the XMLHttpRequest
object.

readyState Holds the status of the XMLHttpRequest.

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Status 200: "OK"

403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference

106
220280116008 Batva Pooja

Implementation:

Using AJAX Create visual search feature to search using name for practical number 16 which
list name, mobile number and email id of matching users.

<!DOCTYPE html> <script>

<html lang="en"> $(document).ready(function() {
<head> // Listen for keyup event on the search input
<meta charset="UTF-8"> $('#search').on('keyup', function() {
<meta name="viewport" content="width=device-width, var searchTerm = $(this).val();
initial-scale=1.0">
<title>AJAX User Search</title> // Perform AJAX request only if search term is
<script src="https://code.jquery.com/jquery- non-empty
3.6.0.min.js"></script> if (searchTerm.length > 0) {
<style> $.ajax({
body { font-family: Arial, sans-serif; } url: 'search.php', // URL to the PHP search
.search-box { margin: 20px; } script
input[type="text"] { width: 300px; padding: 10px; } type: 'POST', // Use POST method
.result { margin-top: 20px; } data: { fullname: searchTerm }, // Data to
table { width: 100%; border-collapse: collapse; } send
table, th, td { border: 1px solid black; } success: function(data) {
th, td { padding: 10px; text-align: left; } // Clear previous results
th { background-color: #f2f2f2; } $('#userTable tbody').empty();
</style>
</head> // If data exists, populate table
<body> if (data.length > 0) {
<div class="search-box"> $.each(data, function(index, user) {
<h2>Search Users by Name</h2> var row = '<tr>' +
<input type="text" id="search" placeholder="Enter '<td>' + user.fullname +
name to search" /> '</td>' +
</div> '<td>' + user.mobileno +
'</td>' +
<div class="result"> '<td>' + user.email + '</td>' +
<h3>Search Results:</h3> '</tr>';
<table id="userTable"> $('#userTable tbody').append(row);
<thead> });
<tr> } else {
<th>Full Name</th> $('#userTable tbody').append('<tr><td
<th>Mobile No</th> colspan="3">No results found</td></tr>');
<th>Email</th> }
</tr> },
</thead> error: function() {
<tbody> alert('Error retrieving data');
<!-- Results will be inserted here --> }
</tbody> });
</table> } else {
</div> // If input is cleared, also clear the table
$('#userTable tbody').empty();
}
});
});
</script>
</body>
</html>

107
220280116008 Batva Pooja

<?php
header('Content-Type: application/json');

// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration_db";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

// Handle search request

if (isset($_POST['fullname'])) {
$fullname = $_POST['fullname'];

// Basic SQL query using LIKE for name searching

$sql = "SELECT fullname, mobileno, email FROM users WHERE fullname LIKE '%$fullname%'";
$result = mysqli_query($conn, $sql);

// Fetch data and store results in an array

$users = [];
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$users[] = $row;
}
}

// Return JSON encoded data

echo json_encode($users);
} else {
echo json_encode([]);
}

// Close connection
mysqli_close($conn);
?>

Output :

108
220280116008 Batva Pooja

Conclusion:

This practical demonstrates a visual search feature implemented using AJAX, which effectively enhances user
interaction and experience in web applications like Dynamic Search, Data Retrieval, User Interface, Security
Measures.

Quiz:

1. What is Ajax?
AJAX is a developer's dream, because you can:
Read data from a web server - after a web page has loaded
Update a web page without reloading the page
Send data to a web server - in the background

2. Explain XMLHttpRequest.
XMLHttpRequest (XHR) is a JavaScript object that allows developers to interact
with servers asynchronously. It is primarily used to send and receive data from a
web server without requiring a page reload. This capability is fundamental to
modern web applications, enabling dynamic content updates and improving user
experience.
Key Features of XMLHttpRequest
Asynchronous Communication: XMLHttpRequest allows for asynchronous
requests, meaning that the user can continue interacting with the webpage
while data is being fetched or sent in the background.

Support for Various Data Formats: While it was originally designed to work with
XML, XMLHttpRequest can also handle other data formats, such as JSON,
HTML, and plain text. This flexibility makes it suitable for various
applications.

Cross-Domain Requests: With the implementation of Cross-Origin Resource

Sharing (CORS), XMLHttpRequest can make requests to different
domains, although this requires server-side configuration.

Event Handling: XMLHttpRequest provides a range of events that can be

monitored, allowing developers to react to different stages of the request,
such as when it is sent, completed, or if an error occurs.

109
220280116008 Batva Pooja

Suggested Reference:

 https://www.w3schools.com/xml/ajax_intro.asp

References used by the students: Google

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Experiment No: 19

Create a REST API using php.

Date:

Competency and Practical Skills:

Relevant CO: 6

Objectives:

1. To understand how REST API works.

Theory:

What is REST?
REST stands for Representational State Transfer, REST is an architectural style which
defines a set of constraints for developing and consuming web services through standard
protocol (HTTP). REST API is a simple, easy to implement and stateless web service. There is
another web service available which is SOAP which stands for Simple Object Access Protocol
which is created by Microsoft.

REST API is widely used in web and mobile applications as compared to SOAP. REST can
provide output data in multiple formats such as JavaScript Object Notation
(JSON), Extensible Markup Language (XML), Command Separated Value (CSV) and many
others while SOAP described output in Web Services Description Language (WSDL).
How Does REST API Work
REST requests are related to CRUD operations (Create, Read, Update, Delete) in database,
REST uses GET, POST, PUT and DELETE requests. Let me compare them with CRUD.
 GET is used to retrieve information which is similar to Read
 POST is used to create new record which is similar to Create
 PUT is used to update record which is similar to Update
 DELETE is used to delete record which is similar to Delete

How to Create and Consume Simple REST API in PHP

110
220280116008 Batva Pooja

JSON format is the most common output format of REST API, we will use the JSON format to
consume our simple REST API. We will developed an online transaction payment REST API
for our example. I will try to keep it as simple as possible so i will use GET request to
retrieve information.
1. Create REST API in PHP
2. Consume REST API in PHP

1. Create REST API in PHP

To create a REST API, follow these steps:
A. Create a Database and Table with Dummy Data
B. Create a Database Connection
C. Create a REST API File
A. Create a Database and Table with Dummy Data
To create database run the following query.

CREATE DATABASE allphptricks;

To create a table run the following query. Note: I have already attached the SQL file of this
table with dummy data, just download the complete zip file of this tutorial.

CREATE TABLE IF NOT EXISTS `transactions` (

`id` int(20) NOT NULL AUTO_INCREMENT,
`order_id` int(50) NOT NULL,
`amount` decimal(9,2) NOT NULL,
`response_code` int(10) NOT NULL,
`response_desc` varchar(50) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `order_id` (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;

B. Create a Database Connection

Just create a db.php file and paste the following database connection in it. Make sure that
you update these credentials with your database credentials.
// Enter your Host, username, password, database below.
$con = mysqli_connect("localhost","root","","allphptricks");
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
die();
}

C. Create a REST API File

Create a api.php file and paste the following script in it.

111
220280116008 Batva Pooja

<?php
header("Content-Type:application/json");
if (isset($_GET['order_id']) && $_GET['order_id']!="") {
include('db.php');
$order_id = $_GET['order_id'];
$result = mysqli_query(
$con,
"SELECT * FROM `transactions` WHERE order_id=$order_id");
if(mysqli_num_rows($result)>0){
$row = mysqli_fetch_array($result);
$amount = $row['amount'];
$response_code = $row['response_code'];
$response_desc = $row['response_desc'];
response($order_id, $amount, $response_code,$response_desc);
mysqli_close($con);
}else{
response(NULL, NULL, 200,"No Record Found");
}
}else{
response(NULL, NULL, 400,"Invalid Request");
}

function response($order_id,$amount,$response_code,$response_desc){
$response['order_id'] = $order_id;
$response['amount'] = $amount;
$response['response_code'] = $response_code;
$response['response_desc'] = $response_desc;

$json_response = json_encode($response);
echo $json_response;
}
?>

The above script will accept the GET request and return output in the JSON format.
I have created all these files in folder name rest, now you can get the transaction
information by browsing the following URL.

http://localhost/rest/api.php?order_id=15478959

You will get the following output.

Above URL is not user friendly, therefore we will rewrite URL through the .htaccess file,
copy paste the following rule in .htaccess file.
RewriteEngine On # Turn on the rewriting engine

RewriteRule ^api/([0-9a-zA-Z_-]*)$ api.php?order_id=$1 [NC,L]

112
220280116008 Batva Pooja

Now you can get the transaction information by browsing the following URL.
http://localhost/rest/api/15478959

You will get the following output.

2. Consume REST API in PHP

To consume a REST API, follow these steps:
1. Create an Index File with HTML Form
2. Fetch Records through CURL
1. Create an Index File with HTML Form
<form action="" method="POST">
<label>Enter Order ID:</label><br />
<input type="text" name="order_id" placeholder="Enter Order ID" required/>
<br /><br />
<button type="submit" name="submit">Submit</button>
</form>

2. Fetch Records through CURL

<?php
if (isset($_POST['order_id']) && $_POST['order_id']!="") {
$order_id = $_POST['order_id'];
$url = "http://localhost/rest/api/".$order_id;

$client = curl_init($url);
curl_setopt($client,CURLOPT_RETURNTRANSFER,true);
$response = curl_exec($client);

$result = json_decode($response);

echo "<table>";
echo "<tr><td>Order ID:</td><td>$result->order_id</td></tr>";
echo "<tr><td>Amount:</td><td>$result->amount</td></tr>";
echo "<tr><td>Response Code:</td><td>$result->response_code</td></tr>";
echo "<tr><td>Response Desc:</td><td>$result->response_desc</td></tr>";
echo "</table>";
}
?>

You can do anything with these output data, you can insert or update it into your own
database if you are using REST API of any other service provider. Usually in case of online
transaction, the service provider provides status of payment via API. You can check either
payment is made successfully or not. They also provide a complete guide of it.
Note: Make sure CURL is enabled on your web server or on your localhost when you are
testing demo.
Implementation:

113
220280116008 Batva Pooja

Create a REST API using php.

db.sql dbConn.php

CREATE DATABASE online_payment; <?php

// Enter your host, username, password, and database
USE online_payment; details
CREATE TABLE IF NOT EXISTS `transactions` ( $con = mysqli_connect("localhost", "root", "",
`id` int(20) NOT NULL AUTO_INCREMENT, "online_payment");
`order_id` int(50) NOT NULL,
`amount` decimal(9,2) NOT NULL, if (mysqli_connect_errno()) {
`response_code` int(10) NOT NULL, echo "Failed to connect to MySQL: " .
`response_desc` varchar(50) NOT NULL, mysqli_connect_error();
PRIMARY KEY (`id`), die();
UNIQUE KEY `order_id` (`order_id`) }
) ENGINE=InnoDB DEFAULT CHARSET=latin1; ?>

Index.php Api.php

<!DOCTYPE html> <?php

<html> header("Content-Type: application/json");
<head>
<title>Check Payment Status</title> if (isset($_GET['order_id']) && $_GET['order_id'] != "") {
</head> include('dbConn.php');
<body>
<h2>Check Online Transaction Status</h2> $order_id = intval($_GET['order_id']); // Convert to
integer
<!-- Form to enter order ID -->
<form action="" method="POST"> // Prepare SQL query to prevent SQL injection
<label>Enter Order ID:</label><br /> $stmt = $con->prepare("SELECT * FROM
<input type="text" name="order_id" `transactions` WHERE order_id = ?");
placeholder="Enter Order ID" required /><br /><br /> if (!$stmt) {
<button type="submit" response(NULL, NULL, 500, "Failed to prepare
name="submit">Submit</button> statement");
</form> exit();
}
<?php
if (isset($_POST['order_id']) && $_POST['order_id'] != // Bind the order_id parameter
"") { $stmt->bind_param("i", $order_id);
$order_id = htmlspecialchars($_POST['order_id']); //
Secure input // Execute the query
$url = "http://localhost/php/api.php?order_id=" . if ($stmt->execute()) {
$order_id; $result = $stmt->get_result(); // Get the result of the
query
// Initialize cURL session
$client = curl_init($url); // Check if there are any rows returned
curl_setopt($client, if ($result->num_rows > 0) {
CURLOPT_RETURNTRANSFER, true); $row = $result->fetch_assoc();
$response = curl_exec($client); $amount = $row['amount'];
curl_close($client); $response_code = $row['response_code'];
$response_desc = $row['response_desc'];
$result = json_decode($response); response($order_id, $amount, $response_code,
$response_desc);
// Display results in a table } else {
if ($result) { response(NULL, NULL, 200, "No Record Found");
echo "<h3>Payment Status</h3>"; }
echo "<table border='1'>";
echo "<tr><td>Order ID:</td><td>{$result- $stmt->close(); // Close the statement
>order_id}</td></tr>"; } else {
echo "<tr><td>Amount:</td><td>{$result- response(NULL, NULL, 500, "Database Query

114
220280116008 Batva Pooja

>amount}</td></tr>"; Failed");
echo "<tr><td>Response Code:</td><td>{$result- }
>response_code}</td></tr>";
echo "<tr><td>Response Desc:</td><td>{$result- mysqli_close($con); // Close the connection
>response_desc}</td></tr>"; } else {
echo "</table>"; response(NULL, NULL, 400, "Invalid Request");
} else { }
echo "<p>No valid response from the
server.</p>"; // Response function to return JSON response
} function response($order_id, $amount, $response_code,
} $response_desc) {
?> $response = array(
</body> 'order_id' => $order_id,
</html> 'amount' => $amount,
'response_code' => $response_code,
'response_desc' => $response_desc
);

echo json_encode($response);
}
?>
Output :

Conclusion:

This practical demonstrates the creation of a REST API using PHP and MySQL, providing a foundational
understanding of web service development. Like RESTful Architecture, Data Management, JSON
Responses , Error Handling .

Quiz:

1. What is REST API?

REpresentational State Transfer (REST) is an architectural style that defines a set of
constraints to be used for creating web services. REST API is a way of accessing web
services in a simple and flexible way without having any processing.
Suggested Reference:

 https://www.allphptricks.com/create-and-consume-simple-rest-api-in-php/)

References used by the students: Google

Rubric wise marks obtained:

115
220280116008 Batva Pooja

Rubrics 1 2 3 Total
Marks

116
220280116008 Batva Pooja

Experiment No: 20

Create an Image slider using jQuery.

Date:

Competency and Practical Skills:

Relevant CO: 6

Objectives:

1. To understand how JQuery Works.

Theory:

JQUERY

The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery
takes a lot of common tasks that require many lines of JavaScript code to accomplish, and
wraps them into methods that you can call with a single line of code. jQuery also simplifies a
lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
A. HTML/DOM manipulation
B. CSS manipulation
C. HTML event methods
D. Effects and animations
E. AJAX
There are several ways to start using jQuery on your web site.

You can:
 Download the jQuery library from jQuery.com
 Include jQuery from a CDN, like Google

<head>
<script src="jquery-3.6.4.min.js"></script>
</head>
OR
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
</head>

The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).
Basic syntax is:
$(selector).action()

117
220280116008 Batva Pooja

 A $ sign to define/access jQuery

 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

All jQuery methods in our examples, are inside a document ready event:

$(document).ready(function(){

// jQuery methods go here…

});

This is to prevent any jQuery code from running before the document is finished loading (is
ready). It is good practice to wait for the document to be fully loaded and ready before
working with it. This also allows you to have your JavaScript code before the body of your
document, in the head section.

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to
find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML
element:

118
220280116008 Batva Pooja

$("#test")

When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

All the different visitors' actions that a web page can respond to are called events. An event
represents the precise moment when something happens.

Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element

The term "fires/fired" is often used with events. Example: "The keypress event is fired, the
moment you press a key". Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Window

Events

Click Keypress submit Load

Dblclick Keydown change Resize

Mouseenter Keyup focus Scroll

Mouseleave blur Unload

In jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all
paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a
function to the event:

$("p").click(function(){
// action goes here!!
});

Commonly Used jQuery Event Methods

$(document).ready()

119
220280116008 Batva Pooja

The $(document).ready() method allows us to execute a function when the document is fully
loaded.

click()
The click() method attaches an event handler function to an HTML element. The function is
executed when the user clicks on the HTML element. The following example says: When a
click event fires on a <p> element; hide the current <p> element:

$("p").click(function(){
$(this).hide();
});

dblclick()
The dblclick() method attaches an event handler function to an HTML element. The function is
executed when the user double-clicks on the HTML element:

$("p").dblclick(function(){
$(this).hide();
});

mouseenter()
The mouseenter() method attaches an event handler function to an HTML element. The
function is executed when the mouse pointer enters the HTML element:

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

Implementation:

Create an Image slider using jQuery.

<!DOCTYPE html> $(document).ready(function(){

<html lang="en"> let idx = 0;
<head> const imgs = $('.slider img');
<meta charset="UTF-8"> const length = imgs.length;
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> $('.right').click(function(){
<title>img slider</title> if(idx < length -1){
<style> idx++;
.body{ }else{
height: 100vh; idx = 0;
display: flex; }
justify-content: center; $('.slider').css({
align-items: center; transform : `translateX(-${idx*100}%)`,
} transition : 'transform 0.5s ease'
.container{ })
width: 60%; })
height: 500px;
border: 2px solid black; $('.left').click(function(){
overflow: hidden; if(idx > 0){
} idx--;

120
220280116008 Batva Pooja

.slider{ }else{
width: 100%; idx = length -1 ;
height: 100%; }
display: flex; $('.slider').css({
transition: 0.5s ease; transform : `translateX(-${idx*100}%)`,
} transition : 'transform 0.5s ease'
.slider img{ })
width: 100%; })
height: 100%; })
}

</style>
</head>
<body>
<div class="body">
<button class="left">&lt;</button>
<div class="container">
<div class="slider">
<img src="gojo.jpg" alt="gojo">
<img src="Gojo2.jpg" alt="gojo">
<img src="Sasuke.jpg" alt="sasuke">
</div>
</div>
<button class="right">&gt;</button>
</div>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="slider.js"></script>
</body>
</html>

Output :

Conclusion:

This practical demonstrates the creation of a simple image slider using jQuery, providing a hands-on

121
220280116008 Batva Pooja

experience with several important web development concepts: Dynamic Content, jQuery Integration,
Responsive Design, User Interaction.

Quiz:

1. What is jquery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

2. Javascript Vs. Jquery

jQuery JavaScript

It is a dynamic and interpreted web-development programming

It is a javascript library.
language.

The user only need to write the required jQuery code The user needs to write the complete js code

It is less time-consuming. It is more time consuming as the whole script is written.

There is no requirement for handling multi-browser compatibility Developers develop their own code for handling multi-browser
issues. compatibility.

It is required to include the URL of the jQuery library in the JavaScript is supportable on every browser. Any additional
header of the page. plugin need not to be included.

jQuery is a part of javascript. Thus, the js code may or may not

It depends on the JavaScript as it is a library of js.
depend on jQuery.

It contains only a few lines of code. The code can be complicated, as well as long.

It is quite an easy, simple, and fast approach. It is a weakly typed programming approach.

JavaScript is one of the popular web designing programming

jQuery is an optimized technique for web designing.
languages for developers that introduced jQuery.

jQuery creates DOM faster. JavaScript is slow in creating DOM.

122
220280116008 Batva Pooja

Suggested Reference:

 https://www.w3schools.com/jquery/jquery_intro.asp

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

123
220280116008 Batva Pooja

Experiment No: 21

Cookie Example

Create HTML form with one textbox and button. Keep button label as SAVE. User will enter
color name in textbox and click on save button. On save, the value of textbox color name
should be saved in COOKIE. Whenever user opens page again, the background color should
be same as saved in cookie. Whenever user opens page again, the background color should
be same as saved in cookie.

Date:

Competency and Practical Skills:

Relevant CO: 6

Objectives:

1. To understand use of COOKIES.

Theory:

<?php
if (isset($_POST['color'])) {
$color = $_POST['color'];
setcookie('bgcolor', $color, time() + (86400 * 30), "/");
} else if (isset($_COOKIE['bgcolor'])) {
$color = $_COOKIE['bgcolor'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save Background Color</title>
</head>
<body style="background-color: <?php echo isset($color) ? $color : '#ffffff'; ?>;">

<h1>Set Background Color</h1>

<form method="POST">
<label for="color">Enter Color Name: </label>
<input type="text" id="color" name="color" placeholder="e.g., red, blue, #f0f0f0" required>
<button type="submit">SAVE</button>
</form>

</body>
</html>

124
220280116008 Batva Pooja

Conclusion:

This practical demonstrates how to create a simple web application that utilizes cookies for persistent data
storage, enhancing user experience by remembering user preferences. Persistent User Preferences , Basic
JavaScript Functions, User Interaction, Dynamic Page Behavior.

Quiz:

1. What is cookie?
A cookie is a small piece of data that is stored on a user's computer by a web browser
while browsing a website. Cookies are used to remember information about the user,
such as login credentials, preferences, and other data that enhances the user experience.
They play a crucial role in web development and are essential for maintaining state and
managing user sessions.
2. What is the life of cookie?
Cookies can last on a user's browser till the time it is set to expire and typically last
from seconds to years. The cookie expiration or cookie duration is either set by the
website publisher or domains that drop the cookies.

Suggested Reference: Google

 https://www.w3schools.com

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

125