0% found this document useful (0 votes)

122 views202 pages

Web Dev Lab Manual for IT Students

Uploaded by

Jatin Parmar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

122 views202 pages

Web Dev Lab Manual for IT Students

Uploaded by

Jatin Parmar

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 202

A Laboratory Manual for

Web Development
(3151606)

B.E. Semester 5
(Information Technology)

Institute logo

Directorate of Technical Education, Gandhinagar,

Gujarat
L. D. College Of Engineering, Ahmedabad
Certificate

This is to certify that Mr./Ms. ___________________________

Enrollment No. _______________ of B.E. Semester _____ Information
Technology of 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

Web Development(3151606)

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-based curriculum 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 creates an 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 student centric 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.
Web Development(3151606)

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 and
6 √
video tags). Also provide link for navigation
between pages.
Create a web page using frame. Divide the page into
two parts with Navigation links on left hand side of
7. √
page (width=20%) and content page on right hand
side of page (width = 80%). On clicking the
Web Development(3151606)

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. On
16. 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
18. 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 Cookie Example √
Web Development(3151606)

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 : REST API, AJAX, JQuery are advanced
asynchronous web communication mechanisms and used by web developers for
building highly interactive webpages.
Guidelines for Faculty 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.
Web Development(3151606)

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 prepared for the same.
Web Development(3151606)

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 relevance with the relation with
of Problem
the 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 01
(not copied from 03 given problem 02 of 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.
Web Development(3151606)

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 Upload etc) 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).
Web Development(3151606)

9 Use Inline CSS to format your resume that

you created in practical no 02.
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.
Web Development(3151606)

Total
Web Development(3151606)

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
Web Development(3151606)

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.
Web Development(3151606)

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

Web Development(3151606)

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?

2. List three most popular browser.
3. Draw and explain architecture of the web browser

Conclusion:
Web Development(3151606)

Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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.

How to save and check output

Web Development(3151606)
- 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
- <sup>text </sup>- 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

- 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
Web Development(3151606)

<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>Jatin's Resume</title>
</head>
<body>

<h1>Jatin Parmar</h1>
<p>Email: <a href="mailto:jatin@example.com">jatin@example.com</a></p>
<p>Phone: <a href="tel:+911234567890">+91 123 456 7890</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/jatin target="_blank">
linkedin.com/in/jatin</a></p>
<p>Location: Gujarat, India</p>

<hr>

<h2>Professional Skills</h2>
<ul>
<li>React.js</li>
<li>Node.js</li>
Web Development(3151606)
<li>Express.js</li>
<li>Material-UI</li>
<li>MongoDB</li>
<li>Azure</li>
<li>REST APIs</li>
<li>FastAPI</li>
</ul>

<hr>

<h2>Experience</h2>

<h3>Software Developer</h3>
<p>XYZ Tech Solutions, Mumbai, India | Jan 2024 – Present</p>
<ul>
<li>Developed and maintained React-based applications for various
clients.</li>
<li>Created reusable components and improved UI/UX using Material-UI.</li>
<li>Collaborated with backend teams to integrate APIs and optimize
performance.</li>
</ul>

<h3>Backend Developer Intern</h3>

<p>ABC Corp, Pune, India | June 2023 – Dec 2023</p>
<ul>
<li>Built RESTful APIs using Node.js and Express.js for a customer
management system.</li>
<li>Worked on data modeling and database management using MongoDB.</li>
<li>Enhanced system performance by implementing caching mechanisms.</li>
</ul>

<hr>

<h2>Educational Information</h2>

<h3>Bachelor of Engineering in Computer Science</h3>

<p>L.D. College of Engineering, Ahmedabad, India | 2022 – 2026</p>
<ul>
<li>CGPA: 8.5/10</li>
<li>Relevant coursework: Data Structures, Algorithms, Web Development,
Database Management System</li>
</ul>

<hr>

<h2>Achievements</h2>
<ul>
<li>Winner of YourStory Digital Innovation Hackathon 2021</li>
<li>Published paper on "AI-driven Crop Recommendation" in IEEE 2023</li>
<li>Completed certification in Cloud Computing (Azure)</li>
</ul>
Web Development(3151606)

<hr>

<h2>Hobbies</h2>
<ul>
<li>Coding Competitions</li>
<li>Reading Tech Blogs</li>
<li>Hiking</li>
<li>Photography</li>
</ul>

<hr>

</body>
</html>

Output:
Web Development(3151606)

Conclusion:

In conclusion, this experiment allowed us to create a personalized resume using HTML, giving
us the opportunity to showcase important sections like personal information, education, skills,
and hobbies. By experimenting with text, colors, links, and lists, we gained hands-on experience
in organizing content effectively and improving the visual appeal of a webpage. This exercise
helped us understand how to use HTML to create structured and attractive layouts, which is a
fundamental skill in web development. Overall, it was a valuable and practical way to apply
what we’ve learned in web design.

Quiz:

1. Explain HTML Document Structure.

• Main parts :
o DOCTYPE declaration
o <head> section
o <body> section

• Example:
Web Development(3151606)
<!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 JS files to html document.

2. List and explain any five HTML formatting tags.

• <mark>text </mark> to make the text Marked 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
• <sup>text </sup>- to make the text Superscript text
Web Development(3151606)

3. Explain ordered and unordered list with example.

• Unordered HTML List
o Starts with <ul> tag list item starts with <li> tag
o Lists items will be marked with bullets
Example:
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
</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:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
Experiment No: 3

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

Date:

Competency and Practical Skills:

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.
Web Development(3151606)
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>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>College Timetable</title>

</head>

<body>

<h1>College Timetable - Division A</h1>

<table border="1" cellpadding="10" cellspacing="0" style="text-align: center;">

Web Development(3151606)

<thead>

<tr>

<th colspan="2">10:30 - 11:30</th>

<th colspan="2">11:30 - 12:30</th>

<th colspan="2">1:00 - 3:00</th>

<th colspan="2">3:15 - 4:15</th>

<th colspan="2">4:15 - 5:15</th>

</tr>

<tr>

<th>Subject</th>

<th>Teacher</th>

<th>Subject</th>

<th>Teacher</th>

<th>Subject</th>

<th>Teacher</th>

<th>Subject</th>

<th>Teacher</th>

<th>Subject</th>

<th>Teacher</th>

</tr>

</thead>

<tbody>

<tr>

<td>Monday</td>
Web Development(3151606)
<td>IPDC</td>

<td>Gayatri</td>

<td colspan="2">WD-LAB-SHREY</td>

<td>Rashid</td>

<td colspan="4">Library</td>

</tr>

<tr>

<td>Friday</td>

<td>Gayatri</td>

<td>Mehul</td>

<td colspan="4">CS - KKJ</td>

</tr>

<tr>

<td>Saturday</td>

<td colspan="6">Design Engineering</td>

<td colspan="4">Library</td>

</tr>
Web Development(3151606)
</tbody>

</table>

</body>

</html>

Output:

Conclusion:

In conclusion, this experiment helped us create a class timetable using the HTML table tag,
allowing us to structure and display information in a clear and organized way. By
experimenting with attributes like rowspan, colspan, cellspacing, and cellpadding, we learned
how to manage the layout and appearance of the table, ensuring it is both functional and
visually appealing. This hands-on task reinforced our understanding of table formatting in
HTML, which is essential for presenting data effectively in web development projects.
Web Development(3151606)

Quiz:

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

• rowspan: used to make a cell span more than one row

• <td rowspan=”2” num_of_rows> content </td>

• Example:

<tr>

<td rowspan="2"> cell 1</td>

<td> cell 2</td>

</tr>

<tr>

<td> cell 3</td>

</tr>

</table>

• colspan:

• used to make a cell span more than one column

<td colspan=”2” num_of_col> content </td>

• Example:

<tr>

<td colspan="2"> cell 1</td>

</tr>
Web Development(3151606)
<tr>

<td> cell 2</td>

<td> cell 3</td>

</tr>

</table>

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

Purpose Used to define standard table Used to define header cells in a

data table

Default Alignment Left-aligned (text) Center-aligned (text)

Text Formatting Normal font styling Bold font styling

Position in Table Can appear in any row Typically used in the first row or
first column to denote headers

Scope Attribute Does not use the scope Can use scope attribute to specify
attribute header's relation to data

(e.g., scope="col" or scope="row")

Semantic Meaning Represents cell data Represents cell headers (labels for
columns or rows)

Accessibility Role Regular cell Helps with screen readers and

accessibility tools for better table
navigation

Tag Meaning Table Data Cell Table Header Cell

Web Development(3151606)

Suggested Reference:

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

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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.gecmodasa.ac.in/ target=”_blank”>Visit GEC
Modasa</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

Implementation:

Design static web pages for your college containing a description of the courses, departments,
faculties, library etc. Provide links for navigation among pages.
Web Development(3151606)
Home.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>L.D. College of Engineering - Home Page</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="home.html" target="_self">Home</a></li><li><a href="courses.html"

target="_blank">Courses</a></li>

<li><a href="Departments.html" target="_blank">Departments</a></li>

<li><a href="Faculty.html" target="_blank">Faculty</a></li>

<li><a href="Library.html" target="_blank">Library</a></li>

</ul>

</nav>

</header>

<img src="https://ldce.ac.in/img/sliders/safeguard-your-futuregIe02l.jpg" alt=""

style="width: 100%;">

<main>

<section>
Web Development(3151606)
<h2>About Us</h2>

<p>Welcome to our prestigious college, offering a wide range of courses and a vibrant
campus life.</p>

</section>

</main>

<p>© 2024 College Name. All rights reserved.</p></footer>

</body>

</html>

 Courses.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Courses</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="home.html" target="_self">Home</a></li><li><a href="courses.html"

target="_self">Courses</a></li>

<li><a href="Departments.html"
Web Development(3151606)
target="_blank">Departments</a></li>

<li><a href="Faculty.html" target="_blank">Faculty</a></li>

<li><a href="Library.html" target="_blank">Library</a></li>

</ul>

</nav>

</header>

<main>

<h1>Courses</h1>

<p>Here you will find a list of courses offered at our college.</p><ul>

<li><a href="courses1.html">BE Courses </a></li>

<li><a href="#">Working Professional Courses</a></li><li><a href="#">PG

Courses</a></li>

<li><a href="#">Full time PhD - ADF</a></li>

</ul>

</main>

<p>© 2024 College Name. All rights reserved.</p></footer>

</body>

</html>
Web Development(3151606)

Courses1.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Courses</title>

<style>

table,th,td{

text-align: center;

border: 1px solid black;

border-collapse: collapse;

</style>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="courses.html">Courses</a></li>

<li><a href="Departments.html">Departments</a></li><li><a
href="Faculty.html">Faculty</a></li>

<li><a href="Library.html">Library</a></li>
Web Development(3151606)
</ul>

</nav>

</header>

<h1>BE courses</h1>

<br>

<tr>

<th>Name of Course</th>

<th>Period (years)</th>

<th>Intake</th>

<title>Departments</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="home.html" target="_self">Home</a></li>

<li><a href="courses.html" target="_blank">Courses</a></li>

<li><a href="Departments.html" target="_self">Departments</a></li>

<li><a href="Faculty.html" target="_blank">Faculty</a></li>

<li><a href="Library.html" target="_blank">Library</a></li>

</ul>

</nav>

</header>

<main>

<h1>Departments</h1>

<p>Here you will find a list of Departments offered at our college.</p>

<ul>
Web Development(3151606)
<li><a href="/P10/P10.html" target="_blank">Information Technology</a></li>

<li><a href="#">Computer Engineering</a></li>

<li><a href="#">Mechanical Engineering</a></li>

<li><a href="#">Electrical Engineering</a></li>

<li><a href="#">Civil Engineering</a></li>

</ul>

</main>

<p>© 2024 College Name. All rights reserved.</p>

</footer>

</body>

</html>

faculty.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Faculty Details</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>
Web Development(3151606)
<ul>

<li><a href="home.html" target="_self">Home</a></li><li><a href="courses.html"

target="_blank">Courses</a></li><li><a href="Departments.html"
target="_blank">Departments</a></li>

<li><a href="Faculty.html" target="_self">Faculty</a></li><li><a href="Library.html"

target="_blank">Library</a></li></ul>

</nav>

</header>

<main>

<h1>Faculty Department wise</h1>

<p>Here you will find a list of Faculties according to the Departments</p><ul>

<li><a href="facultyIT.html" target="_self">Information Technology</a></li>

<li><a href="#">Computer Engineering</a></li>

<li><a href="#">Mechanical Engineering</a></li>

<li><a href="#">Electrical Engineering</a></li>

<li><a href="#">Civil Engineering</a></li>

</ul>

</main>

<p>© 2024 College Name. All rights reserved.</p>

</footer>

</body>

</html>
Web Development(3151606)
facultyIT.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Faculty Details</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="courses.html">Courses</a></li>

<li><a href="Departments.html">Departments</a></li><li><a
href="Faculty.html">Faculty</a></li>

<li><a href="Library.html">Library</a></li>

</ul>

</nav>

</header>

<main>

<h1>IT Department Faculty List</h1>

<ul>

<li><strong>Dr. Hiteishi Diwanji</strong> - (Head of Department)</li><li><strong>Dr.

Mehul Parikh</strong> - (Associate Professor)</li><li><strong>BAKULBHAI
PANCHAL</strong> - (Associate Professor)</li><li><strong>Miss. Mital Panchal</strong>
Web Development(3151606)
- (Associate Professor)</li><li><strong>Dr. PURVI RAMANUJ</strong> - (Associate
Professor)</li></ul>

</main>

<p>© 2024 College Name. All rights reserved.</p>

</footer>

</body>

</html>

Library.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Library</title>

</head>

<body>

<h1>Welcome to L.D. College of Engineering</h1>

<nav>

<ul>

<li><a href="home.html" target="_self">Home</a></li><li><a href="courses.html"

target="_blank">Courses</a></li>

<li><a href="Departments.html" target="_blank">Departments</a></li>

<li><a href="Faculty.html" target="_blank">Faculty</a></li>

Web Development(3151606)
<li><a href="Library.html" target="_self">Library</a></li>

</ul>

</nav>

</header>

<main>

<h2>Library</h2>

<p>Here you will find information about our library and its resources.</p>

<img src="https://ldce.ac.in/img/sliders/library/1.jpg" alt="library">

</main>

<p>© 2024 College Name. All rights reserved.</p>

</footer>

</body>

</html>

Output:
Web Development(3151606)

Home page Library page

Courses page BE Courses

Web Development(3151606)

Departments Faculty

IT dept Faculty
Web Development(3151606)

Conclusion:

In this web development experiment, we designed a set of static web pages for our college,
creating a simple yet effective online presence. By outlining the college's courses, departments,
faculties, and library, we provided a clear and organized overview of our institution. The
inclusion of navigation links between pages ensures that users can easily access and explore
different sections of the site. This project not only helped us practice basic web design skills but
also highlighted the importance of creating user- friendly and informative web pages

Quiz:

1. Explain HTML Link target attribute.

o The target attribute in an HTML anchor (<a>) tag specifies where to open the linked
document. It controls whether the link opens in the same tab, a new tab, aspecific frame,
or a browser window.

2. How to use image as a link ?

o The target attribute in an HTML anchor (<a>) tag specifies where to open the linked
document. It controls whether the link opens in the same tab, a new tab, a specific
frame, or a browser window.

Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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 Practical Skills:

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

Web Development(3151606)

- 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"> name =
"password" />
Web Development(3151606)
Radio Button Radio buttons are used
Controls when out of many <input type = "radio" name = "subject"
options, just one option 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 <option value = "Maths"
down list, from where a selected>Maths</option>
user can select one or
more options. <option value =
"Physics">Physics</option>

</select>

File Upload It allows site users to

<input type = "file" name = "fileupload"
upload a file to
accept = "image/*" />
website.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 = "reset"
resets form controls to
value = "Reset" />
their initial values.

Button Control This creates a button <input type = "button" name = "ok"
that is used to trigger a value = "OK" />
Button client-side script when
the user clicks that
button.
Web Development(3151606)
Button Control This creates a clickable <input type = "image" name =
button but we can use "imagebutton" src =
Image an image as "/html/images/logo.png" />
background of the
button.

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

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Form</title>

</head>

<body>

<form>

<h2>User Registration Form</h2>

<div>

<option value="">Select State</option>

<option value="maharashtra">Maharashtra</option>

<option value="gujarat">Gujarat</option>

<option value="karnataka">Karnataka</option>

<option value="tamilnadu">Tamil Nadu</option>

<option value="delhi">Delhi</option>
Web Development(3151606)
</select>

</div>

<br>

<div>

<label for="education">Education:</label>

<select id="education" name="education" required>

<option value="">Select Education</option>

<option value="highschool">High School</option>

<option value="bachelor">Bachelor's Degree</option>

<option value="master">Master's Degree</option>

</select>

</div>

<br>

<div>

<label for="profile-pic">Upload Profile Picture:</label>

<input type="file" id="profile-pic" name="profile-pic" accept="image/*">

</div>

<br>

<div>
Web Development(3151606)
<input type="checkbox" id="terms" name="terms" required>

<label for="terms">I agree to the terms and conditions</label>

</div>

<br>

<button type="submit">Register</button>

</form>

</body>

</html>

Output :
Web Development(3151606)

Conclusion:

In this experiment, we created a comprehensive user registration form using HTML,

incorporating various input elements such as text boxes, text areas, checkboxes, radio buttons,
select boxes, buttons, and file upload fields. The form includes essential fields like Name, Date
of Birth, Gender, Email Id, Mobile Number, Address, State, Education, and Image Upload,
providing a complete and interactive registration experience. This exercise allowed us to
practice integrating different HTML form elements and understanding their functionalities,
ultimately creating a well-structured and user-friendly form for collecting user information.

Quiz:

1. Explain form tag with its attributes.

• The <form> tag in HTML is used to create a form for user input. It serves as a
container for different types of input elements like text fields, radio buttons,
checkboxes, submit buttons, etc. Forms are essential for sending data to a server
for processing.
• Key Attributes are action, method, name, etc.

2. Differentiate between text input and password input controls.

Feature Text Input Password Input

Visibility Shows characters as typed Masks characters (e.g., dots)

Usage For non-sensitive data (e.g., For sensitive data (e.g.,

name) password)

Security No security protection for Provides basic privacy (but not

input encryption
Web Development(3151606)

3. Explain various types of buttons available in HTML.

Button Behaviour
Type

Submit Submits form data

Reset Clears all form fields

Button Custom button, can be linked to JavaScript

actions

Image Submits the form when an image is clicked

Radio Allows selection of one option from a group

Checkbox Allows selection of multiple options

.
Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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

The HTML <audio> element is used to play an audio file on a web page.

<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>
Web Development(3151606)
The controls attribute 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

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Audio Page</title>

</head>

<body>

<h2>Audio Page</h2>

<source src="audio1.mp3" type="audio/mp3">

Your browser does not support the audio element.

</audio>

<p>Audio 1</p>

<source src="audio2.ogg" type="audio/ogg">

Your browser does not support the audio element.

Web Development(3151606)
</audio>

<p>Audio 2</p>

<source src="audio3.wav" type="audio/wav">

Your browser does not support the audio element.

</audio>

<p>Audio 3</p>

<br>

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

</body>

</html>

video.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Video Page</title>

</head>

<body>

<h2>Video Page</h2>

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

Web Development(3151606)
<source src="video1.mp4" type="video/mp4">

</body>

</html>

Output:
Web Development(3151606)

Conclusion:

In this experiment, we created two distinct web pages: one dedicated to audio content and the
other to video content, utilizing HTML5's audio and video tags. The audio page features various
sound files that users can play directly from the browser, while the video page showcases video
clips for streaming. Navigation links between these pages were also provided, ensuring a
seamless user experience. This project helped us explore and implement multimedia elements
in HTML5, enhancing our understanding of how to integrate and manage different types of
media on the web.

Quiz:

1. Explain audio and video tags.

o The <audio> tag is used to embed audio files into a web page. It allows you to play
sound files such as music or other audio content.

o The most common audio formats supported are MP3, WAV, and Ogg. The tag
provides built-in controls like play, pause, and volume adjustment to enhance user
interaction with the audio.

o The <video> tag is used to embed video files in a web page. Like the <audio>
tag, it supports multiple formats, such as MP4 and Ogg.

o The <video> element provides users with controls to play, pause, fast-forward, rewind,
and adjust the volume, along with additional features like full-screen viewing.
Web Development(3151606)
Suggested Reference:

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

References used by the students:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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

Example : example to create three horizontal frames

Web Development(3151606)

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

<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.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Iframe-based Layout</title>

<style>

body {

margin: 0;

display: flex;

#navigation {

width: 20%;

background-color: #f4f4f4;

padding: 10px;

box-sizing: border-box;
Web Development(3151606)
height: 100vh;

#content {

width: 80%;

height: 100vh;

border: none;

display: block;

margin-bottom: 10px;

text-decoration: none;

color: #000;

a:hover {

color: blue;

</style>

</head>

<body>

<h3>Navigation</h3>

<a href="content1.html" target="content-frame">Content 1</a>

<a href="content2.html" target="content-frame">Content 2</a>

<a href="content3.html" target="content-frame">Content 3</a>

</div>
Web Development(3151606)
<iframe id="content" name="content-frame" src="content1.html"></iframe>

</body>

</html>

Content1.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Content 1</title>

</head>

<body>

<h2>Content 1</h2>

<p>This is the content for the first page.</p>

</body>

</html>

Content2.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Content 2</title>

</head>
Web Development(3151606)
<body>

<h2>Content 2</h2>

<p>This is the content for the second page.</p>

</body>

</html>

Content3.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Content 3</title>

</head>

<body>

<h2>Content 3</h2>

<p>This is the content for the third page.</p>

</body>

</html>
Web Development(3151606)
Output:

Conclusion: (Sufficient space to be provided)

In this experiment, we created a web page layout using modern HTML and CSS techniques with
<iframe>. The design features a navigation menu on the left side and dynamic content displayed
on the right, offering a clean and responsive interface. This approach allows users to easily
switch between different content pages without reloading the entire layout. Using <iframe>
provides flexibility and better compatibility with current web standards, making it a more
suitable choice for modern web development compared to outdated methods like <frameset>.

Quiz:

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

• rows:

▪ Divides the window into horizontal sections. You specify the height of each
Web Development(3151606)
frame, separated by commas. You can use pixel values, percentage values,
or an asterisk (*) to specify the height.

▪ For example, rows="100, 200, *" creates three horizontal frames: the first
one is 100 pixels high, the second is 200 pixels, and the third takes up the
remaining space.

• cols:

▪ Divides the window into vertical sections. You specify the width of each
frame, separated by commas, using pixel values, percentages, or an asterisk
(*) to fill the remaining space.

▪ For example, cols="200, *" creates two vertical frames: the first is 200
pixels wide, and the second takes up the remaining width of the window

2. Which tag embed an inline frame in a web page?

• The <iframe> tag is used to embed an inline frame (a frame inside a web page) in
HTML. An inline frame is used to embed another HTML document within the
current 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> or <iframe> tag is used to specify the URL of the
web page or resource to load into that frame.

• The value of the src attribute is the path to the webpage you want to display
inside the frame.

• For example, in an <iframe>, the src="example.html" attribute loads the page

example.html into the frame.
Web Development(3151606)

Suggested Reference:

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

References used by the students:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)

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 Practical Skills:

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.

Example: In this example all <p> elements will be center-aligned, with a red text color
Web Development(3151606)
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.
o Example
Web Development(3151606)
<!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.
o Example
Web Development(3151606)
-
<!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}
Web Development(3151606)
o Example

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

- 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.

- 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)"
Web Development(3151606)
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>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Welcome to Ahmedabad</title>

<style>

body {

background-color: #f5f5dc;

color: #333;

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;
Web Development(3151606)
text-align: center;

h1 {

color: #d2691e;

font-size: 3em;

margin-top: 20px;

font-size: 1.2em;

line-height: 1.6;

margin: 20px;

color: #555555;

.container {

padding: 20px;

.image-container img {

max-width: 50%;

height: auto;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

margin-top: 20px;
Web Development(3151606)
}

.footer {

background-color: #d2691e;

color: white;

padding: 10px;

position: fixed;

bottom: 0;

width: 100%;

</style>

</head>

<body>

<h1>Welcome to Ahmedabad</h1>

<p>Ahmedabad, the vibrant city in the heart of Gujarat, is known for its rich cultural
heritage, exquisite architecture, and bustling markets. From the serene Sabarmati
Riverfront to the historic landmarks of the old city, Ahmedabad offers a blend of tradition
and modernity that enchants every visitor.</p>

</div>

<p>Experience the beauty of this dynamic city through its stunning architecture,
delectable cuisine, and warm hospitality. Ahmedabad is a city that celebrates life, culture,
and history in every street and corner.</p>

</div>
Web Development(3151606)

<p>Discover more about Ahmedabad - The Heart of Gujarat!</p>

</div>

</body>

</html>

Output:
Web Development(3151606)

Conclusion:

In this experiment, we designed a web page that showcases the vibrant city of Ahmedabad
using internal CSS. By applying a harmonious background color, complementary text colors,
and stylish font choices, the page offers a visually appealing and welcoming design. The use of
an image with subtle styling enhances the overall aesthetic, making the page more engaging.
Additionally, a fixed footer helps maintain a consistent theme throughout. This approach
demonstrates how internal CSS can be effectively used to create an attractive and cohesive web
page layout, enhancing user experience while highlighting the unique charm of Ahmedabad.

Quiz:

1. Explain the syntax of the CSS.

• CSS (Cascading Style Sheets) is used to style HTML elements. The syntax
consists of:

o Selector: This specifies which HTML element(s) the style will be

applied to.

o Declaration Block: This contains one or more declarations enclosed in

curly braces. Each declaration includes:

▪ Property: The style attribute you want to change (e.g., color,

font-size).

▪ Value: The value assigned to the property (e.g., red, 20px).

2. What is internal CSS ?

• Internal CSS refers to the use of CSS within the <style> tag placed inside the

<head> section of an HTML document.

• It allows you to apply styles to the whole page or a portion of it without creating
an external stylesheet file. Internal CSS is typically used when you want to style a
single page.
Web Development(3151606)

3. Explain CSS class and Id selector.

• Class Selector: Targets multiple elements that share the same class attribute. It
allows for styling several elements with similar attributes by referencing the class
name.

• ID Selector: Targets a unique element with a specific ID attribute. An ID should be

unique within a page and is used for styling a single, distinct element.

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:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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.
Web Development(3151606)
Output:
Web Development(3151606)

Conclusion:

In this exercise, we applied inline CSS to format the resume we created in the previous
practical. By embedding CSS styles directly within the HTML elements using the style attribute,
we were able to customize the appearance of various sections of the resume, including text
formatting, colors, and layout adjustments. This approach provided us with hands-on
experience in using inline CSS for specific, targeted styling, and demonstrated how to make
precise visual modifications directly within the HTML code.

Quiz:

1. Explain Internal CSS VS Inline CSS.

• Internal CSS:

o Definition: Styles are defined within a <style> element located inside the
<head> section of an HTML document.

o Scope: The styles apply to the entire document or to specific sections of the
document as defined by the CSS rules.

o Usage: Useful when you want to apply styles to a single document without
affecting other documents. It is more efficient than inline CSS for multiple
elements and keeps the HTML code cleaner.

• Inline CSS:

o Definition: Styles are applied directly within an HTML element using the
style attribute.

o Scope: The styles affect only the single element where the inline style is
applied.

o Usage: Typically used for quick, specific changes to a single element. Inline
CSS can be less efficient and harder to manage compared to internal or
external CSS for styling multiple elements.
Web Development(3151606)
2. CSS stands for _ .

• Cascading Style Sheets

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

• The HTML tag used to define an internal style sheet is the <style> tag.

• It is placed within the <head> section of an HTML document.

Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Web Development(3151606)
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 Practical Skills:

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

Web Development(3151606)

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>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Information Technology Department</title>

<link rel="stylesheet" href="styles.css">

<style>

body {

font-family: Arial, sans-serif;

background-color: #f9f9f9;

color: #333;

line-height: 1.6;

padding: 20px;

margin: 0;

header {

background-color: #ffa31a;

color: white;
Web Development(3151606)
padding: 10px;

text-align: center;

border-radius: 5px;

nav {

margin: 20px 0;

text-align: center;

nav a {

text-decoration: none;

color: #ffab1a;

margin: 0 15px;

font-weight: bold;

nav a:hover {

text-decoration: underline;

section {

margin-bottom: 20px;

padding: 15px;

border-radius: 5px;

background-color: #ffffff;

h2 {

color: #ffa71a;

}
Web Development(3151606)
footer {

text-align: center;

margin-top: 20px;

padding: 10px;

background-color: #ffcd1a;

color: white;

border-radius: 5px;

</style>

</head>

<body>

<h1>Welcome to the Information Technology Department</h1>

</header>

<nav>

<a href="#about">About Us</a>

<a href="#courses">Courses</a>

<a href="#faculty">Faculty</a>

<a href="#contact">Contact</a>

</nav>

<section id="about" style="border: 2px solid #07015d92;">

<h2>About Us</h2>

<p>We are the leading department in Information Technology offering state-of-the-art

Web Development(3151606)
infrastructure and education to nurture the next generation of tech innovators.</p>

</section>

<h2>Vision:</h2>

<p>To shape the young minds of aspiring Information Technology engineers to become the
front runner in the sustainable technological growth of our country, conserving its rich cultural
heritage and catering to its socioeconomic needs.</p>

</section>

<h2>Mission:</h2>

<ol>

<li>Bringing innovative approach in teaching-learning process to produce competent

Information Technology engineers.</li>

<li>Provide opportunities and necessary exposure to the young engineers to develop

themselves into responsible professionals.</li>

<li>Infusing lifelong learning ability in the aspiring minds with the view of making them
sensible towards their social responsibilities.</li>

</ol>

</section>

<h2>Our Courses</h2>

<table border="1" cellpadding="10" cellspacing="0" style="width: 100%; border-collapse:

collapse;">

<tr>

<th>Name of Course</th>

<th>Type</th>
Web Development(3151606)
<th>Period (Years)</th>

<th>Intake</th>

<th>Year of Starting</th>

</tr>

<tr>

<td>Master of Computer Application</td>

</tr>

<tr>

<td>Information Technology</td>

</tr>

<tr>

<td>Information Technology</td>

</tr>

</table>
Web Development(3151606)
</section>

<h2>Our Faculty</h2>

<ul>

<li><strong>Dr. Hiteishi Diwanji</strong> - (Head of Department)</li>

<li><strong>Dr. Mehul Parikh</strong> - (Associate Professor)</li>

<li><strong>Bakulbhai Panchal</strong> - (Associate Professor)</li>

<li><strong>Dr. Purvi Ramanuj</strong> - (Associate Professor)</li>

<li><strong>Miss Mital Panchal</strong> - (Associate Professor)</li>

</ul>

</section>

<h2>Contact Us</h2>

<p>Email: itdept@ldce.ac.in</p>

<p>Phone: +123-456-7890</p>

</section>

<p>© 2024 Information Technology Department. All rights reserved.</p>

</footer>

</body>

</html>
Web Development(3151606)
Styles.css

body {

font-family: Arial, sans-serif;

background-color: #f9f9f9;

color: #333;

line-height: 1.6;

padding: 20px;

margin: 0;

header {

background-color: #ffa31a;

color: white;

padding: 10px;

text-align: center;

border-radius: 5px;

nav {

margin: 20px 0;

text-align: center;

nav a {

text-decoration: none;

color: #ffab1a;

margin: 0 15px;

font-weight: bold;

}
Web Development(3151606)
nav a:hover {

text-decoration: underline;

section {

margin-bottom: 20px;

padding: 15px;

border-radius: 5px;

background-color: #ffffff;

h2 {

color: #ffa71a;

footer {

text-align: center;

margin-top: 20px;

padding: 10px;

background-color: #ffcd1a;

color: white;

border-radius: 5px;

}
Web Development(3151606)
Output:

Conclusion:
Web Development(3151606)
In this exercise, we formatted the Information Technology Department web pages using all
three types of CSS: external, internal, and inline.

• External CSS was used to apply consistent styles across multiple pages by linking a
separate CSS file. This approach ensured a uniform look and feel throughout the site,
making it easy to update styles globally.

• Internal CSS was employed within specific pages to manage unique styling elements that
were distinct to those pages. This method allowed for customization without affecting
other pages.

• Inline CSS was used for immediate and specific styling needs on individual elements,
offering precise control over their appearance.

Combining these methods allowed us to create a well-styled and visually cohesive set of web
pages for the Information Technology Department, demonstrating the versatility and
application of various CSS techniques.

Quiz:

1. Explain External CSS.

• External CSS involves using a separate CSS file to define styles for multiple HTML
documents. This CSS file is linked to the HTML documents using the <link>
element placed in the <head> section. External CSS is ideal for applying consistent
styles across multiple pages of a website, promoting reusability and easier
maintenance.

2. Compare Internal, Inline and External CSS.

• Internal CSS:

▪ Definition: Styles are included within a <style> tag inside the <head>
section of an HTML document.

▪ Scope: Affects only the HTML document in which it is included.

▪ Usage: Suitable for styling a single document. It provides a middle ground

Web Development(3151606)
between inline and external styles.

• Inline CSS:

▪ Definition: Styles are applied directly within an HTML element using the
style attribute.

▪ Scope: Affects only the specific element where the inline style is applied.

▪ Usage: Useful for quick, specific adjustments to individual elements. Not

ideal for styling multiple elements or maintaining large-scale styles.

• External CSS:

▪ Definition: Styles are defined in a separate CSS file, which is linked to HTML
documents.

▪ Scope: Affects all HTML documents linked to the CSS file.

▪ Usage: Best for consistent styling across multiple pages of a website.

Facilitates code reuse and easier maintenance.

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

• The property used to change the background color of an element is the

"background-color" property.

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

• The property used to change the text color of an element is the "color" property.
Jatin Parmar 220280116076

Suggested Reference:

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

References used by the students:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
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).
Jatin Parmar 220280116076
▪ 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>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Today's Date</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

h2 {

color: #1a75ff;
Jatin Parmar 220280116076
}

</style>

</head>

<body>

<h1>Welcome!</h1>

function displayTodayDate() {

const today = new Date();

const options = { year: 'numeric', month: 'long', day: 'numeric' };

const formattedDate = today.toLocaleDateString('en-US', options);

document.getElementById('dateDisplay').innerText = `Today's date is:

${formattedDate}`;

displayTodayDate();

</script>

</body>

</html>
Jatin Parmar 220280116076

Output :

Conclusion:

JavaScript is a versatile programming language that enables interactive web experiences and
enhances the functionality of web applications. Its ability to manipulate the Document Object
Model (DOM) allows developers to create dynamic content, respond to user actions, and
improve the overall user experience. By understanding JavaScript and its different
implementation methods—internal and external—developers can optimize their code
organization and maintainability, ultimately leading to better-performing web applications.

Quiz:

1. What is javascript?
JavaScript is a high-level, dynamic, and interpreted programming language primarily used for
enhancing the interactivity and functionality of web pages. It is an essential part of web
development alongside HTML and CSS, enabling developers to create rich, interactive user
interfaces. JavaScript supports event-driven, functional, and imperative programming styles and is
widely used for both client-side and server-side development.

2. Explain internal and external javascript.

Internal JavaScript: This refers to JavaScript code that is embedded directly within an HTML
document using the <script> tag. It is usually placed in the <head> or <body> section of the
HTML file. Internal JavaScript is useful for small scripts that are specific to a single page,
allowing for quick implementation without the need for additional files.
Jatin Parmar 220280116076
External JavaScript: This involves writing JavaScript code in separate .js files, which are linked
to an HTML document using the <script src="path/to/script.js"></script> tag. External JavaScript
allows for better organization and reusability of code, as the same script can be included in
multiple HTML pages. It also helps reduce the size of HTML files, leading to improved loading
times and maintainability of the codebase.

Suggested Reference:

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

https://www.w3schools.com/JSREF/jsref_obj_date.asp

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
Experiment No: 12

Develop simple calculator for addition, subtraction, multiplication and

division operation using java script.

Date:

Competency and Practical Skills:

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
o create new HTML events in the page
Jatin Parmar 220280116076

Figure 3 Document Object Model

DOM Examples

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

</body>
</html>

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

Example 2: Validate Numeric Input

Jatin Parmar 220280116076
<!DOCTYPE html>
<html>
<body>

<h2>Number Validation</h2>

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

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

</body>
</html>

Implementation:

Develop simple calculator for addition, subtraction, multiplication and division operation
using java script.

DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Calculator</title>

</head>

<body>
Jatin Parmar 220280116076
<h1>Simple Calculator</h1>

<input type="number" id="num1" placeholder="First Number" />

<input type="number" id="num2" placeholder="Second Number" />

<br/>

<button onclick="calculate('subtract')">Subtract</button>

<button onclick="calculate('multiply')">Multiply</button>

<button onclick="calculate('divide')">Divide</button>

function calculate(operation) {

const num1 = parseFloat(document.getElementById('num1').value);

const num2 = parseFloat(document.getElementById('num2').value);

let result;

if (isNaN(num1) || isNaN(num2)) {

result = "Please enter valid numbers.";

} else {

switch (operation) {

case 'add':

result = `Result: ${num1 + num2}`;

break;

case 'subtract':

result = `Result: ${num1 - num2}`;

break;
Jatin Parmar 220280116076
case 'multiply':

result = `Result: ${num1 * num2}`;

break;

case 'divide':

if (num2 !== 0) {

result = `Result: ${num1 / num2}`;

} else {

result = "Cannot divide by zero.";

break;

default:

result = "Invalid operation.";

document.getElementById('result').innerText = result;

</script>

</body>

</html>
Jatin Parmar 220280116076

Output :
Jatin Parmar 220280116076

Conclusion:

In conclusion, the JavaScript calculator project demonstrates the fundamental concepts of web
development, including HTML structure, CSS styling, and JavaScript functionality. This simple
application allows users to perform basic arithmetic operations while providing an interactive
interface. By using JavaScript, we can manipulate the Document Object Model (DOM) to
dynamically update the content displayed to the user, showcasing the power of JavaScript in
enhancing user experience on web pages.

Quiz:

1. Explain Document Object Model.

The Document Object Model (DOM) is a programming interface that represents the
structure of a web document as a tree of objects. It allows developers to access and
manipulate the content, structure, and style of a document programmatically. Each
element, attribute, and piece of text in a webpage is represented as a node in the
DOM tree, which can be traversed and modified using languages like JavaScript. The
DOM enables dynamic changes to the page without requiring a full reload, allowing
for interactive and responsive web applications. Through the DOM, developers can
add, remove, or change elements, respond to user events, and update styles in real-
time, providing a richer user experience.

Suggested Reference:

● https://www.w3schools.com/js/js_htmldom.asp
● https://www.w3schools.com/js/js_validation.asp
References used by the students:
Jatin Parmar 220280116076

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076

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()
Jatin Parmar 220280116076
<!DOCTYPE html>
<html>
<head>

<title>Java Script Demo</title>

<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.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Form</title>

function displayInformation(event) {

event.preventDefault();

const name = document.getElementById('name').value;

Jatin Parmar 220280116076
const dob = document.getElementById('dob').value;

const gender = document.querySelector('input[name="gender"]:checked').value;

const email = document.getElementById('email').value;

const mobile = document.getElementById('mobile').value;

const address = document.getElementById('address').value;

const state = document.getElementById('state').value;

const education = document.getElementById('education').value;

const terms = document.getElementById('terms').checked ? "Agreed" : "Not Agreed";

const userInfo = `

Name: ${name}\n

Date of Birth: ${dob}\n

Gender: ${gender}\n

Email: ${email}\n

Mobile: ${mobile}\n

Address: ${address}\n

State: ${state}\n

Education: ${education}\n

Terms: ${terms}

alert(userInfo);

</script>

</head>

<body>
Jatin Parmar 220280116076
<form onsubmit="displayInformation(event)">

<h2>User Registration Form</h2>

<div>

<option value="">Select State</option>

Jatin Parmar 220280116076
<option value="maharashtra">Maharashtra</option>

<option value="gujarat">Gujarat</option>

<option value="karnataka">Karnataka</option>

<option value="tamilnadu">Tamil Nadu</option>

<option value="delhi">Delhi</option>

</select>

</div>

<br>

<div>

<label for="education">Education:</label>

<select id="education" name="education" required>

<option value="">Select Education</option>

</body>

</html>
Jatin Parmar 220280116076

Output :
Jatin Parmar 220280116076
Conclusion:

JavaScript is a powerful and versatile programming language primarily used for enhancing user
interfaces and adding interactivity to web pages. Through event handling, JavaScript allows
developers to respond to user actions, such as clicks, key presses, or form submissions, enabling
dynamic and responsive web applications. Understanding event handling is crucial for creating
seamless user experiences.

Quiz:

1. Explain event handling with javascript.

Event handling in JavaScript refers to the process of capturing and responding to events that occur
in the browser, such as user interactions (clicks, keyboard inputs, mouse movements) or changes in
the document (loading a page, submitting a form). Here's an overview of key concepts related to
event handling:
 Event Listeners: JavaScript uses event listeners to listen for specific events on HTML elements.
These listeners are functions that execute when a specified event occurs. For example, an onclick
event listener can be added to a button to define what happens when the button is clicked.
 Event Object: When an event occurs, an event object is created that contains information about
the event, such as the type of event, the target element, and any relevant data. This object is passed
to the event handler function, allowing developers to access detailed information about the event.
 Event Bubbling and Capturing: Events in JavaScript can propagate through the DOM in two
phases: capturing (from the root to the target) and bubbling (from the target back up to the root).
Developers can choose to listen for events during either phase by specifying options when adding
an event listener.
 Preventing Default Behavior: Many events have default actions associated with them (e.g.,
submitting a form). Developers can use the event.preventDefault() method to stop the default
action from occurring.
 Removing Event Listeners: Event listeners can be removed to stop responding to an event using
the removeEventListener method, which is useful for optimizing performance or preventing
unintended behavior.

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
Jatin Parmar 220280116076
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>

Implementation:

Use JavaScript to Implement validation in Practical No.5

Jatin Parmar 220280116076
<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Form</title>

function displayInformation(event) {

event.preventDefault();

const name = document.getElementById('name').value.trim();

const dob = document.getElementById('dob').value;

const gender = document.querySelector('input[name="gender"]:checked');

const email = document.getElementById('email').value.trim();

const mobile = document.getElementById('mobile').value.trim();

const address = document.getElementById('address').value.trim();

const state = document.getElementById('state').value;

const education = document.getElementById('education').value;

const profilePic = document.getElementById('profile-pic').files.length > 0;

const terms = document.getElementById('terms').checked;

// Name validation

if (name === "") {

alert("Name cannot be empty.");

return;

}
Jatin Parmar 220280116076

// Date of Birth validation (not a future date)

const dobDate = new Date(dob);

const today = new Date();

if (dobDate > today) {

alert("Date of Birth cannot be a future date.");

return;

// Gender validation

if (!gender) {

alert("Please select a gender.");

return;

// Email validation

const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(email)) {

alert("Please enter a valid email address.");

return;

// Mobile validation (10-digit number)

const mobilePattern = /^[0-9]{10}$/;

if (!mobilePattern.test(mobile)) {

alert("Please enter a valid 10-digit mobile number.");

Jatin Parmar 220280116076
return;

// Address validation

if (address === "") {

alert("Address cannot be empty.");

return;

// State validation

if (state === "") {

alert("Please select a state.");

return;

// Education validation

if (education === "") {

alert("Please select your education level.");

return;

// Profile Picture validation

if (!profilePic) {

alert("Please upload a profile picture.");

return;

}
Jatin Parmar 220280116076

// Terms validation

if (!terms) {

alert("You must agree to the terms and conditions.");

return;

const userInfo = `

Name: ${name}

Date of Birth: ${dob}

Gender: ${gender.value}

Email: ${email}

Mobile: ${mobile}

Address: ${address}

State: ${state}

Education: ${education}

Terms: ${terms ? "Agreed" : "Not Agreed"}

alert(userInfo);

</script>

</head>

<body>

<option value="">Select State</option>

<option value="maharashtra">Maharashtra</option>

<option value="gujarat">Gujarat</option>
Jatin Parmar 220280116076
<option value="karnataka">Karnataka</option>

<option value="tamilnadu">Tamil Nadu</option>

<option value="delhi">Delhi</option>

</select>

</div>

<br>

<div>

<label for="education">Education:</label>

<select id="education" name="education">

<option value="">Select Education</option>

<option value="highschool">High School</option>

<option value="bachelor">Bachelor's Degree</option>

<option value="master">Master's Degree</option>

</select>

</div>

<br>

<div>

<label for="profile-pic">Upload Profile Picture:</label>

<input type="file" id="profile-pic" name="profile-pic" accept="image/*">

</div>
Jatin Parmar 220280116076
<br>

<div>

<input type="checkbox" id="terms" name="terms">

<label for="terms">I agree to the terms and conditions</label>

</div>

<br>

<button type="submit">Register</button>

</form>

</body>

</html>

Output :
Jatin Parmar 220280116076

Conclusion:

JavaScript form validation is a crucial aspect of web development that ensures user input is
accurate, complete, and secure before it is processed or submitted. By utilizing JavaScript for
client-side validation, developers can provide immediate feedback to users, enhancing the user
experience and preventing errors that could occur during server-side processing.
Implementing validation involves checking input values against specific criteria, such as
format, length, and required fields, using JavaScript functions. This helps maintain data
integrity, reduces the likelihood of errors, and protects against malicious input.
Jatin Parmar 220280116076
Quiz:

1. Explain javascript form validation.

JavaScript form validation is a technique used to ensure that the data entered by users into a
web form meets specific criteria before it is submitted to the server. It can check for required
fields, data types, formats, and other validation rules to improve data quality and enhance user
experience.

Common types of form validation include:

 Required Field Validation: Ensures fields marked as required are filled out.
 Format Validation: Checks the format of input data, such as email addresses or phone numbers.
 Range Validation: Verifies that numerical inputs fall within a specified range.
 Length Validation: Ensures that text inputs meet minimum or maximum length requirements.
 Pattern Validation: Uses regular expressions to match input data against specific patterns.

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
Jatin Parmar 220280116076
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

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

● PHP Conditional Statements

Statement Syntax

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;
}
Jatin Parmar 220280116076
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;
}
The PHP foreach Loop
foreach ($array as $value)
{
code to be executed;
}

Implementation:

<?php

function isPrime($number) {

if ($number <= 1) {

return false;

for ($i = 2; $i <= sqrt($number); $i++) {

if ($number % $i == 0) {

return false;

return true;

}
Jatin Parmar 220280116076

$number = 29;

if (isPrime($number)) {

echo "$number is a prime number.";

} else {

echo "$number is not a prime number.";

Output :

29 is a prime number.
Conclusion:

The PHP code for checking whether a number is prime or not is a simple and efficient solution.
It uses a fnction to determine if a number is prime by checking divisibility starting from 2 up
to the square root of the number. If any divisor is found in this range, the number is declared
as non-prime. Otherwise, it is identified as prime.

Quiz:

1. What is PHP? Explain PHP Syntax.

PHP (Hypertext Preprocessor) is a widely-used open-source scripting language primarily designed

for web development. It is especially suited for server-side scripting, allowing developers to create
dynamic web pages, manage databases, and handle sessions. PHP can be embedded into HTML
and is compatible with various web servers, including Apache and Nginx.

PHP Syntax: The basic syntax of PHP is as follows:

 Opening and Closing Tags: PHP code is enclosed within <?php and ?> tags.
 <?php
 // PHP code goes here
 ?>

1. PHP Tags:
Jatin Parmar 220280116076
o <?php to open PHP code.

o ?> to close PHP code.

o Short tags <? can also be used but are discouraged due to compatibility issues.
2. Variables:

o Declared with a dollar sign ($), followed by the variable name (e.g.,
$variableName).

o Variables are case-sensitive.

3. Statements:

o Ended with a semicolon (;).

o Example: $name = "John";

4. Comments:

o Single-line comments: // Comment or # Comment.

o Multi-line comments: /* Comment */.

5. Control Structures:

o Conditional statements (if, else, switch) and loops (for, while, foreach) are similar to
other programming languages.

2. Explain foreach Loop in PHP.

foreach loop in PHP is a convenient way to iterate over arrays and objects.
provides a simple syntax for accessing each element of an array or object
without needing to use an index.

<?php

$fruits = array("Apple", "Banana", "Cherry");

foreach ($fruits as $fruit) {

echo $fruit . "\n"; // Outputs each fruit on a new line
}

?>
Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Jatin Parmar 220280116076
Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
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 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’ );

Jatin Parmar 220280116076
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 );
Jatin Parmar 220280116076
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.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Form</title>

</head>
Jatin Parmar 220280116076
<body>

<form action="register.php" method="POST" enctype="multipart/form-data">

<h2>User Registration Form</h2>

<div>

<input type="text" id="name" name="name" required>

</div>

<br>

<div>

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>

</div>

<br>

<div>

<label>Gender:</label>

<input type="radio" id="male" name="gender" value="male" required>

<input type="radio" id="female" name="gender" value="female" required>

<label for="female">Female</label>

</div>
Jatin Parmar 220280116076
<br>

<div>

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

<input type="email" id="email" name="email" required>

</div>

<br>

<div>

<label for="mobile">Mobile No.:</label>

<input type="tel" id="mobile" name="mobile" required pattern="[0-9]{10}">

</div>

<br>

<div>

<label for="address">Address:</label>

<textarea id="address" name="address" rows="3" required></textarea>

</div>

<br>

<div>

<label for="state">State:</label>

<select id="state" name="state" required>

Jatin Parmar 220280116076
<option value="">Select State</option>

<option value="maharashtra">Maharashtra</option>

<option value="gujarat">Gujarat</option>

<option value="karnataka">Karnataka</option>

<option value="tamilnadu">Tamil Nadu</option>

<option value="delhi">Delhi</option>

</select>

</div>

<br>

<div>

<label for="education">Education:</label>

<select id="education" name="education" required>

<option value="">Select Education</option>

<option value="highschool">High School</option>

<option value="bachelor">Bachelor's Degree</option>

<option value="master">Master's Degree</option>

</select>

</div>

<br>

<div>

<label for="profile-pic">Upload Profile Picture:</label>

Jatin Parmar 220280116076
<input type="file" id="profile-pic" name="profile-pic" accept="image/*">

</div>

<br>

<div>

<input type="checkbox" id="terms" name="terms" required>

<label for="terms">I agree to the terms and conditions</label>

</div>

<br>

<button type="submit">Register</button>

</form>

</body>

</html>

<?php

// Database connection

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "user_registration";

$conn = new mysqli($servername, $username, $password, $dbname);

Jatin Parmar 220280116076

// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Handle form submission

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST['name'];

$dob = $_POST['dob'];

$gender = $_POST['gender'];

$email = $_POST['email'];

$mobile = $_POST['mobile'];

$address = $_POST['address'];

$state = $_POST['state'];

$education = $_POST['education'];

// Handle file upload

$profile_pic = null;

if (isset($_FILES['profile-pic']) && $_FILES['profile-pic']['error'] == 0) {

$profile_pic = 'uploads/' . basename($_FILES['profile-pic']['name']);

move_uploaded_file($_FILES['profile-pic']['tmp_name'], $profile_pic);

// Insert data into database

$sql = "INSERT INTO users (name, dob, gender, email, mobile, address, state, education,
Jatin Parmar 220280116076
profile_pic)

VALUES ('$name', '$dob', '$gender', '$email', '$mobile', '$address', '$state', '$education',

'$profile_pic')";

if ($conn->query($sql) === TRUE) {

header("Location: display.php"); // Redirect to display page

exit;

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

$conn->close();

Display.php

<?php

// Database connection

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "user_registration";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
Jatin Parmar 220280116076
if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Handle deletion

if (isset($_GET['delete'])) {

$id = $_GET['delete'];

$conn->query("DELETE FROM users WHERE id=$id");

// Fetch users

$result = $conn->query("SELECT * FROM users");

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration Data</title>

</head>

<body>

<h2>Registered Users</h2>

<tr>

<th>ID</th>
Jatin Parmar 220280116076
<th>Name</th>

<th>Gender</th>

<th>Email</th>

<th>Mobile</th>

<th>Address</th>

<th>State</th>

<th>Education</th>

<th>Profile Picture</th>

<th>Actions</th>

</tr>

<?php while ($row = $result->fetch_assoc()): ?>

<tr>

<td><?php echo $row['id']; ?></td>

<td><?php echo $row['name']; ?></td>

<td><?php echo $row['dob']; ?></td>

<td><?php echo $row['gender']; ?></td>

<td><?php echo $row['email']; ?></td>

<td><?php echo $row['mobile']; ?></td>

<td><?php echo $row['address']; ?></td>

<td><?php echo $row['state']; ?></td>

<td><?php echo $row['education']; ?></td>

<td>

<?php if ($row['profile_pic']): ?>

<img src="<?php echo $row['profile_pic']; ?>" alt="Profile Picture" width="50">

<?php endif; ?>

Jatin Parmar 220280116076
</td>

<td>

<a href="update.php?id=<?php echo $row['id']; ?>">Update</a>

<a href="?delete=<?php echo $row['id']; ?>" onclick="return confirm('Are you sure

you want to delete this user?');">Delete</a>

</td>

</tr>

<?php endwhile; ?>

</table>

</body>

</html>

<?php

$conn->close();

Update.php

<?php

// Database connection

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "user_registration";

$conn = new mysqli($servername, $username, $password, $dbname);

Jatin Parmar 220280116076
// Check connection

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

// Fetch user details

$id = $_GET['id'];

$result = $conn->query("SELECT * FROM users WHERE id=$id");

$user = $result->fetch_assoc();

// Handle form submission for updating

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name = $_POST['name'];

$dob = $_POST['dob'];

$gender = $_POST['gender'];

$email = $_POST['email'];

$mobile = $_POST['mobile'];

$address = $_POST['address'];

$state = $_POST['state'];

$education = $_POST['education'];

// Handle file upload

$profile_pic = $user['profile_pic'];

if (isset($_FILES['profile-pic']) && $_FILES['profile-pic']['error'] == 0) {

$profile_pic = 'uploads/' . basename($_FILES['profile-pic']['name']);

move_uploaded_file($_FILES['profile-pic']['tmp_name'], $profile_pic);
Jatin Parmar 220280116076
}

// Update data into database

$sql = "UPDATE users SET

name='$name',

dob='$dob',

gender='$gender',

email='$email',

mobile='$mobile',

address='$address',

state='$state',

education='$education',

profile_pic='$profile_pic'

WHERE id=$id";

if ($conn->query($sql) === TRUE) {

header("Location: display.php"); // Redirect to display page

exit;

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

<!DOCTYPE html>

<html lang="en">
Jatin Parmar 220280116076
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Update User Registration</title>

</head>

<body>

<form action="" method="POST" enctype="multipart/form-data">

<h2>Update User Registration</h2>

<div>

<select id="state" name="state" required>

<option value="">Select State</option>

<option value="maharashtra" <?php echo ($user['state'] == 'maharashtra') ?

'selected' : ''; ?>>Maharashtra</option>

<option value="gujarat" <?php echo ($user['state'] == 'gujarat') ? 'selected' : '';

?>>Gujarat</option>

<option value="karnataka" <?php echo ($user['state'] == 'karnataka') ? 'selected' : '';

?>>Karnataka</option>

<option value="tamilnadu" <?php echo ($user['state'] == 'tamilnadu') ? 'selected' : '';

?>>Tamil Nadu</option>

<option value="delhi" <?php echo ($user['state'] == 'delhi') ? 'selected' : '';

?>>Delhi</option>

</select>

</div>

<br>

<div>

<label for="education">Education:</label>
Jatin Parmar 220280116076
<select id="education" name="education" required>

<option value="">Select Education</option>

<option value="highschool" <?php echo ($user['education'] == 'highschool') ?

'selected' : ''; ?>>High School</option>

<option value="bachelor" <?php echo ($user['education'] == 'bachelor') ? 'selected' :

''; ?>>Bachelor's Degree</option>

<option value="master" <?php echo ($user['education'] == 'master') ? 'selected' : '';

?>>Master's Degree</option>

<option value="phd" <?php echo ($user['education'] == 'phd') ? 'selected' : '';

?>>PhD</option>

</select>

</div>

<br>

<div>

<label for="profile-pic">Upload Profile Picture:</label>

<input type="file" id="profile-pic" name="profile-pic" accept="image/*">

</div>

<br>

<button type="submit">Update</button>

</form>

</body>

</html>
Jatin Parmar 220280116076

Output :

Conclusion:

The user registration system implemented here demonstrates a foundational approach to

handling user data through a web application using PHP and MySQL. It effectively captures user
information via a structured registration form, stores it securely in a database, and presents it
in an organized manner through a display page.

Quiz:

1. What is MySql?
MySQL is an open-source relational database management system (RDBMS) that uses Structured
Query Language (SQL) for managing and manipulating data. It is widely used for web applications
and is a key component of the LAMP stack (Linux, Apache, MySQL, PHP/Perl/Python). MySQL
is known for its speed, reliability, and ease of use, making it one of the most popular database
systems for developers.

2. Write a sample code to demonstrate php mysql connectivity.

<?php
// Database configuration
$host = 'localhost'; // Your database host (usually localhost)
$user = 'root'; // Your database username
$password = ''; // Your database password
$dbname = 'test_db'; // Your database name

// Create a connection
$conn = new mysqli($host, $user, $password, $dbname);
Jatin Parmar 220280116076

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully to the database";

// Close the connection

$conn->close();
?>

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
Jatin Parmar 220280116076
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:

Cookies are small pieces of data that are stored on the user's computer by the web browser
while browsing a website. They are used to remember information about the user, such as
login status, preferences, and other settings. Cookies can have expiration dates and can be
accessed by the server or client-side scripts.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cookie Example</title>

// Function to set a cookie

function setCookie(name, value, days) {

const d = new Date();

Jatin Parmar 220280116076
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); // Set the expiration date

const expires = "expires=" + d.toUTCString();

document.cookie = name + "=" + value + ";" + expires + ";path=/"; // Set the cookie

// Function to get a cookie

function getCookie(name) {

const nameEQ = name + "=";

const ca = document.cookie.split(';'); // Split cookies

for (let i = 0; i < ca.length; i++) {

let c = ca[i];

while (c.charAt(0) === ' ') c = c.substring(1, c.length); // Remove whitespace

if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); //

Return cookie value

return null; // Return null if not found

// Function to set background color from cookie

function setBackgroundColor() {

const color = getCookie("bgColor"); // Get the cookie

if (color) {

document.body.style.backgroundColor = color; // Set background color

}
Jatin Parmar 220280116076
// Function to save color on button click

function saveColor() {

const colorInput = document.getElementById("colorInput").value; // Get input

value

setCookie("bgColor", colorInput, 7); // Save color in cookie for 7 days

document.body.style.backgroundColor = colorInput; // Change background color

immediately

// Call the setBackgroundColor function on page load

window.onload = setBackgroundColor;

</script>

</head>

<body>

<h2>Choose a Background Color</h2>

<input type="text" id="colorInput" placeholder="Enter color name" />

</body>

</html>

OUTPUT:
Jatin Parmar 220280116076
Conclusion:

In this exercise, we created a simple HTML form that allows users to save a color preference
in a cookie. Upon reopening the page, the background color reflects the saved preference,
demonstrating how cookies can be used to enhance user experience by remembering settings.

Quiz:

1. What is cookie?

A cookie is a small piece of data stored on the user's computer by the web browser while browsing
a website. Cookies are used to remember information about the user, such as login status,
preferences, and settings.

2. What is the life of cookie?

The life of a cookie refers to its expiration date. When creating a cookie, a developer can set a
specific expiration date or time. If no expiration date is set, the cookie will be deleted when the
browser is closed (session cookie). Cookies with a defined expiration date remain until that date is
reached.

Suggested Reference:

● https://www.w3schools.com

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
Experiment No: 17

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

Date:

Competency and Practical Skills:

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:
Jatin Parmar 220280116076
<?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:
Jatin Parmar 220280116076
<?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():
Jatin Parmar 220280116076

<?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.

SQL DataBase :-

CREATE DATABASE user_authentication;

USE user_authentication;

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

username VARCHAR(100) UNIQUE,

password VARCHAR(255) -- Password will be hashed

);

Registration page:-

<?php

// Database connection
Jatin Parmar 220280116076
$host = 'localhost';

$dbname = 'user_authentication';

$user = 'root'; // Adjust with your DB username

$pass = ''; // Adjust with your DB password

$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$username = $_POST['username'];

$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hash the

password for security

// Insert the user into the database

$stmt = $conn->prepare("INSERT INTO users (username, password) VALUES (?, ?)");

if ($stmt->execute([$username, $password])) {

echo "Registration successful! <a href='login.php'>Login Here</a>";

} else {

echo "Registration failed. Username might already exist.";

<!DOCTYPE html>

<html lang="en">
Jatin Parmar 220280116076
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Registration</title>

</head>

<body>

<h2>Register</h2>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<input type="submit" value="Register">

</form>

</body>

</html>

<?php

session_start(); // Start session

// Database connection

$host = 'localhost';

$dbname = 'user_authentication';

$user = 'root';

$pass = '';
Jatin Parmar 220280116076
$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$username = $_POST['username'];

$password = $_POST['password'];

// Fetch user from database

$stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");

$stmt->execute([$username]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

// Verify password

if ($user && password_verify($password, $user['password'])) {

// Password is correct, start session and store username

$_SESSION['username'] = $username;

header("Location: welcome.php");

} else {

echo "Invalid username or password.";

<!DOCTYPE html>

<html lang="en">
Jatin Parmar 220280116076
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login</title>

</head>

<body>

<h2>Login</h2>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<input type="submit" value="Login">

</form>

</body>

</html>

Welcome Page ;-

<?php

session_start();

// Check if user is logged in

if (!isset($_SESSION['username'])) {

header("Location: login.php");

exit();

}
Jatin Parmar 220280116076
// Fetch username from session

$username = $_SESSION['username'];

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Welcome</title>

</head>

<body>

<h2>Welcome, <?= htmlspecialchars($username); ?>!</h2>

<p>You are logged in.</p>

<a href="logout.php">Logout</a>

</body>

</html>

Logout Page :-

<?php

session_start(); // Start the session

session_destroy(); // Destroy all session data

// Redirect to login page

header("Location: login.php");

exit();
Jatin Parmar 220280116076
Output :

Conclusion:

1. Registration: Users can sign up by creating a username and password. Thepassword

is securely hashed before storing in the database.

2. Login: Users can log in by entering their credentials. The password is verifiedusing the
password_verify() function.

3. Session Management: Upon successful login, a session is started to store the user's
username. This session is used to keep the user logged in on other pages.

4. Logout: The session is destroyed upon logout, ensuring that the user is logged out.

This is a simple yet effective user authentication system using PHP and MySQL.

Quiz:

1. What is PHP Session?

Ans. A PHP session is a way to store information (in variables) to be used across multiple pages
on a website. Unlike cookies, which are stored on the user's browser, sessiondata is
stored on the server.
Jatin Parmar 220280116076
Key Features:
 State Management: Sessions help maintain user state and data between page
requests.
 Unique Session ID: Each session is identified by a unique session ID, which issent
to the user's browser as a cookie or via URL parameters.
 Temporary Storage: Session data is temporary and typically expires when theuser
closes the browser or after a specified period of inactivity.
Common Uses:
 User authentication (tracking logged-in users).
 Storing user preferences or settings.
 Managing shopping cart contents in e-commerce applications.

2. How to destroy PHP Session?

Ans. To destroy a PHP session, you can follow these steps:
1. Call session_start(): This ensures that you have access to the current session.
2. Unset Session Variables: Use session_unset() to remove all session variables.
3. Destroy the Session: Use session_destroy() to delete the session data on the
server.
4. Optional: Clear the session cookie from the user's browser.

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
Jatin Parmar 220280116076
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
Jatin Parmar 220280116076
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)
Jatin Parmar 220280116076
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

Jatin Parmar 220280116076

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
Jatin Parmar 220280116076

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.

SQL:-

CREATE DATABASE user_management;

USE user_management;

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100),

dob DATE,

gender VARCHAR(10),

email VARCHAR(100),

mobile VARCHAR(15),

address TEXT,

state VARCHAR(50),

education VARCHAR(100),

image_path VARCHAR(255)

);

HTML :-

<!DOCTYPE html>

<head>

<title>Search Users</title>

<style>

body {

font-family: Arial, sans-serif;

.search-box {

margin: 20px 0;

table {

width: 100%;

border-collapse: collapse;

table, th, td {

border: 1px solid black;

th, td {

padding: 10px;

text-align: left;

</style>

</head>

<body>

<h2>Search Users by Name</h2>

Jatin Parmar 220280116076
<div class="search-box">

<label for="name">Enter Name:</label>

<input type="text" id="name" placeholder="Search by name">

<button onclick="searchUser()">Search</button>

</div>

</div>

function searchUser() {

var name = $('#name').val();

$.ajax({

url: 'search.php',

type: 'POST',

data: {name: name},

success: function(data) {

$('#result').html(data);

});

</script>

</body>

</html>

PHP ;-
Jatin Parmar 220280116076
<?php

// Database connection

$host = 'localhost';

$dbname = 'user_management';

$user = 'root';

$pass = ''; // Your MySQL password

$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

// Check if the search query exists

if (isset($_POST['name'])) {

$name = $_POST['name'];

// Fetch users whose name contains the search term

$stmt = $conn->prepare("SELECT name, mobile, email FROM users WHERE name LIKE ?");

$stmt->execute(["%$name%"]);

$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

if (count($users) > 0) {

echo "<table>

<tr>

<th>Mobile</th>

<th>Email</th>

</tr>";

foreach ($users as $user) {

Jatin Parmar 220280116076
echo "<tr>

<td>{$user['mobile']}</td>

<td>{$user['email']}</td>

</tr>";

echo "</table>";

} else {

echo "No users found.";

Output :

Conclusion:

This AJAX-powered visual search feature dynamically retrieves and displays matching users
based on their name input without reloading the page. You can further enhance this by adding
features like pagination, highlighting search terms, or showing a "no results found" message
when there are no matches.
Jatin Parmar 220280116076
Quiz:

1. What is Ajax?
Ans . AJAX (Asynchronous JavaScript and XML) is a web development technique
that allows web pages to communicate with a server and update content
dynamically without requiring a full page reload. It uses JavaScript to send and
retrieve data from a server asynchronously, often using formats like JSON or XML.
This results in a smoother and more interactive user experience, enabling
features like real-time updates, form submissions, and dynamic content loading.
2. Explain XMLHttpRequest.
Ans. XMLHttpRequest is a JavaScript object that enables web pages to make asynchronous
HTTP requests to a server. It is a key component of AJAX, allowing developers to fetch
data from a server or send data to it without refreshing the entire page.
Key Features:
 Asynchronous Communication: Allows the web page to continue functioningwhile
the request is being processed.
 Methods: Commonly uses methods like GET (to retrieve data) and POST (to send
data).
 Response Handling: Supports different response formats, including JSON, XML,and
plain text.
 Event Handling: Provides events such as onreadystatechange to handle the
response once it is received.

Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
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

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:
Jatin Parmar 220280116076
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` (

ìd` int(20) NOT NULL AUTO_INCREMENT,
òrder_id` int(50) NOT NULL,
àmount` decimal(9,2) NOT NULL,
`response_code` int(10) NOT NULL,
`response_desc` varchar(50) NOT NULL,
PRIMARY KEY (ìd`),
UNIQUE KEY òrder_id` (òrder_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.
<?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'];
Jatin Parmar 220280116076
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]

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

You will get the following output.

Jatin Parmar 220280116076
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:

Create a REST API using php.

SQL :-

CREATE DATABASE user_management;

Jatin Parmar 220280116076
USE user_management;

CREATE TABLE users (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100) NOT NULL,

email VARCHAR(100) NOT NULL,

mobile VARCHAR(15) NOT NULL

);

PHP :-

<?php

header("Content-Type: application/json; charset=UTF-8");

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");

$host = 'localhost';

$dbname = 'user_management';

$user = 'root';

$pass = '';

try {

$conn = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

echo json_encode(['message' => 'Database connection failed: ' . $e->getMessage()]);

exit();

}
Jatin Parmar 220280116076

// Get the request method

$method = $_SERVER['REQUEST_METHOD'];

// Handle different request methods

switch ($method) {

case 'GET':

if (isset($_GET['id'])) {

// Get user by ID

$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");

$stmt->execute([$_GET['id']]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

echo json_encode($user ? $user : ['message' => 'User not found']);

} else {

// Get all users

$stmt = $conn->prepare("SELECT * FROM users");

$stmt->execute();

$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($users);

break;

case 'POST':

// Create a new user

$data = json_decode(file_get_contents("php://input"));

if (isset($data->name) && isset($data->email) && isset($data->mobile)) {

Jatin Parmar 220280116076
$stmt = $conn->prepare("INSERT INTO users (name, email, mobile) VALUES (?, ?, ?)");

$stmt->execute([$data->name, $data->email, $data->mobile]);

echo json_encode(['message' => 'User created', 'id' => $conn->lastInsertId()]);

} else {

echo json_encode(['message' => 'Invalid input']);

break;

case 'PUT':

// Update an existing user

$data = json_decode(file_get_contents("php://input"));

if (isset($data->id) && (isset($data->name) || isset($data->email) || isset($data-

>mobile))) {

$fields = [];

$values = [];

if (isset($data->name)) {

$fields[] = "name = ?";

$values[] = $data->name;

if (isset($data->email)) {

$fields[] = "email = ?";

$values[] = $data->email;

if (isset($data->mobile)) {

$fields[] = "mobile = ?";

$values[] = $data->mobile;
Jatin Parmar 220280116076
}

$values[] = $data->id;

$stmt = $conn->prepare("UPDATE users SET " . implode(', ', $fields) . " WHERE id = ?");

$stmt->execute($values);

echo json_encode(['message' => 'User updated']);

} else {

echo json_encode(['message' => 'Invalid input']);

break;

case 'DELETE':

// Delete a user

if (isset($_GET['id'])) {

$stmt = $conn->prepare("DELETE FROM users WHERE id = ?");

$stmt->execute([$_GET['id']]);

echo json_encode(['message' => 'User deleted']);

} else {

echo json_encode(['message' => 'Invalid ID']);

break;

default:

echo json_encode(['message' => 'Invalid request method']);

break;

?>
Jatin Parmar 220280116076
Conclusion:

This setup provides a simple REST API using PHP and MySQL for managing users. You
can expand upon this basic structure to include more functionality, error handling, and
security features (like input validation and prepared statements). The API adheres to
REST principles and can be consumed by various clients, such as web applications,
mobile apps, and more.

Quiz:

1. What is REST API?

Ans :- A REST API (Representational State Transfer Application Programming Interface)
is a web service that allows communication between clients and servers using standard
HTTP methods (GET, POST, PUT, DELETE). It treats data as resources identified by URLs,
is stateless (each request is independent), and commonly uses JSON or XML for data
formatting. REST APIs are popular for their simplicity and scalability in web and mobile
applications.
Suggested Reference:

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

References used by the students:

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Jatin Parmar 220280116076
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

The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).
Basic syntax is:
$(selector).action()
Jatin Parmar 220280116076
 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:
Jatin Parmar 220280116076

$("#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()
Jatin Parmar 220280116076
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>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Slider</title>

<style>

#slider {
Jatin Parmar 220280116076
width: 500px;

height: 300px;

overflow: hidden;

position: relative;

.slides {

display: flex;

width: 200%;

.slides img {

width: 500px;

height: 300px;

.nav {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: rgba(0,0,0,0.5);

color: #fff;

padding: 10px;

cursor: pointer;

.prev { left: 0; }

.next { right: 0; }

</style>

</head>
Jatin Parmar 220280116076
<body>

<img src="image1.jpg" alt="Image 1">

<img src="image2.jpg" alt="Image 2">

</div>

<span class="nav prev">‹</span>

<span class="nav next">›</span>

</div>

$(document).ready(function() {

var currentIndex = 0;

var images = $('.slides img').length;

function showSlide(index) {

$('.slides').css('transform', 'translateX(' + (-index * 500) + 'px)');

$('.next').click(function() {

currentIndex = (currentIndex + 1) % images;

showSlide(currentIndex);

});

$('.prev').click(function() {
Jatin Parmar 220280116076
currentIndex = (currentIndex - 1 + images) % images;

showSlide(currentIndex);

});

</script>

</body>

</html>

Output :

Conclusion:

This code creates a basic image slider with "Next" and "Prev" buttons using jQuery to
handle the transitions.

Quiz:

1. What is jquery?
Ans. jQuery is a fast, lightweight JavaScript library that simplifies HTML document
traversing, event handling, animating, and AJAX interactions for rapid web development.
It provides an easy-to-use API that works across various browsers, allowing developers
to write less code to achieve complex tasks
2. Javascript Vs. Jquery
Ans.
Definition:
- JavaScript is a programming language used for web development, enabling interactiveweb
pages.
- jQuery is a fast, lightweight JavaScript library that simplifies HTML document traversing,
event handling, animations, and AJAX interactions.
Jatin Parmar 220280116076

Syntax:
- JavaScript has a more verbose and complex syntax.
- jQuery provides a shorter and more concise syntax, making it easier to use.

Functionality:
- JavaScript can perform all web-related tasks, including DOM manipulation, animations, and
AJAX requests.
- jQuery primarily focuses on DOM manipulation, event handling, and animations.

Browser Compatibility:
- JavaScript requires manual handling for cross-browser compatibility issues.
- jQuery automatically manages cross-browser compatibility, reducing the need for extensive
coding.

Performance:
- JavaScript is generally faster because it runs natively in the browser.
- jQuery can be slightly slower due to the additional abstraction layer it introduces.

Learning Curve:
- JavaScript has a steeper learning curve, especially for beginners.
- jQuery is easier for beginners to grasp due to its simplified API.

In summary, jQuery is built on top of JavaScript to enhance its functionality and ease of
use, but having a solid understanding of JavaScript is essential for advanced web
development.
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

Het WD 10 (2) - Merged
No ratings yet
Het WD 10 (2) - Merged
169 pages
Vaibhav wp2
No ratings yet
Vaibhav wp2
140 pages
WD Labmanual
No ratings yet
WD Labmanual
91 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
83 pages
WD Lab Manual
No ratings yet
WD Lab Manual
78 pages
WD Lab Manual
No ratings yet
WD Lab Manual
127 pages
Practical WD
No ratings yet
Practical WD
95 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
82 pages
Advanced Web Programming - Prof. S J Agravat
No ratings yet
Advanced Web Programming - Prof. S J Agravat
151 pages
Advanced Web Programming Lab Manual SJA SSEC
No ratings yet
Advanced Web Programming Lab Manual SJA SSEC
53 pages
LM - Sunil Nakum
No ratings yet
LM - Sunil Nakum
153 pages
Advanced Web Programming Lab Manual
No ratings yet
Advanced Web Programming Lab Manual
62 pages
Advanced Web Programming - Lab Manual
No ratings yet
Advanced Web Programming - Lab Manual
54 pages
Lab Manual
No ratings yet
Lab Manual
54 pages
RWPD Lab Manual 3 - 4330705
No ratings yet
RWPD Lab Manual 3 - 4330705
291 pages
Lab Manual - SWD - 2023-24 - EVEN
No ratings yet
Lab Manual - SWD - 2023-24 - EVEN
110 pages
Advanced Web Programming - Lab Manual - SJA - SSEC
No ratings yet
Advanced Web Programming - Lab Manual - SJA - SSEC
51 pages
Advanced Web Programming - Lab Manual
No ratings yet
Advanced Web Programming - Lab Manual
89 pages
15IT304J Lab Record
50% (2)
15IT304J Lab Record
26 pages
PHP Lab Manual Format
No ratings yet
PHP Lab Manual Format
147 pages
Lab Manual: Jawaharlal Nehru Engineering College Aurangabad
No ratings yet
Lab Manual: Jawaharlal Nehru Engineering College Aurangabad
35 pages
Web Tech Lab Manual
No ratings yet
Web Tech Lab Manual
37 pages
CBSWPD Manual 2024 25 Final
No ratings yet
CBSWPD Manual 2024 25 Final
163 pages
Diploma Engineering: Laboratory Manual
No ratings yet
Diploma Engineering: Laboratory Manual
301 pages
WP Lab Manual
No ratings yet
WP Lab Manual
148 pages
Web Technology Lab Manual 2019 Pattern
No ratings yet
Web Technology Lab Manual 2019 Pattern
85 pages
IWT V
No ratings yet
IWT V
50 pages
Client Side Scripting Manual
No ratings yet
Client Side Scripting Manual
137 pages
WD Lab2
No ratings yet
WD Lab2
3 pages
Php-Initial and !ST PR
No ratings yet
Php-Initial and !ST PR
21 pages
WT Lab Manual-R22
No ratings yet
WT Lab Manual-R22
51 pages
WT Menual Final File-1
No ratings yet
WT Menual Final File-1
72 pages
Technical Writing Using LaTex
No ratings yet
Technical Writing Using LaTex
2 pages
Shwet IWT
No ratings yet
Shwet IWT
33 pages
15It304J - Web Programming Lab: Name: Register No.: Class: Iii B.Tech. It
0% (1)
15It304J - Web Programming Lab: Name: Register No.: Class: Iii B.Tech. It
34 pages
Awp Final Lab Mnual Student 2021 22
No ratings yet
Awp Final Lab Mnual Student 2021 22
61 pages
(R18A0589) WebTechnologies Lab
No ratings yet
(R18A0589) WebTechnologies Lab
123 pages
Web Dev Csic102
No ratings yet
Web Dev Csic102
7 pages
WEB TECHNOLOGY Lab Manual Edit
No ratings yet
WEB TECHNOLOGY Lab Manual Edit
52 pages
Practicum 1
No ratings yet
Practicum 1
5 pages
Web Technology Lab Manual
No ratings yet
Web Technology Lab Manual
52 pages
Lab Manual: Web Technology Laboratory
No ratings yet
Lab Manual: Web Technology Laboratory
57 pages
Web Page Designing With HTML
No ratings yet
Web Page Designing With HTML
96 pages
BCSL504-Web Technology Lab Manual
No ratings yet
BCSL504-Web Technology Lab Manual
91 pages
WT Lab Manual
No ratings yet
WT Lab Manual
47 pages
WT Lab
No ratings yet
WT Lab
49 pages
Dronacharya WD Lab Manual 1
No ratings yet
Dronacharya WD Lab Manual 1
76 pages
CT305-N-IT Workshop (Web Designing)
No ratings yet
CT305-N-IT Workshop (Web Designing)
5 pages
WT LAB MANUAL Updated
No ratings yet
WT LAB MANUAL Updated
42 pages
Web Technology Lab WorksBCA 3rd
No ratings yet
Web Technology Lab WorksBCA 3rd
2 pages
Web Essential Front Page Student
No ratings yet
Web Essential Front Page Student
10 pages
BTCO13502
No ratings yet
BTCO13502
6 pages
Full Stack Dev Lab Manual
No ratings yet
Full Stack Dev Lab Manual
60 pages
WIT Lab Manual
100% (3)
WIT Lab Manual
63 pages
Web Programming Gtu Filinalpractical Practical File
No ratings yet
Web Programming Gtu Filinalpractical Practical File
145 pages
New - CS3EW04-Internet and Web-Technologies-Lab Manual
No ratings yet
New - CS3EW04-Internet and Web-Technologies-Lab Manual
67 pages
Resume
No ratings yet
Resume
1 page
SGGU BCA Sem 6 Revised
No ratings yet
SGGU BCA Sem 6 Revised
19 pages
Bachelors of Sciences in Software Engineer Resume Template Word
No ratings yet
Bachelors of Sciences in Software Engineer Resume Template Word
4 pages
Mukul Kumar Resume
No ratings yet
Mukul Kumar Resume
5 pages
DWR and Spring
No ratings yet
DWR and Spring
47 pages
Pharmacy Management System Details Paginated
No ratings yet
Pharmacy Management System Details Paginated
8 pages
SOURCES
No ratings yet
SOURCES
8 pages
AtoZInternetProgramming2 (PHP) MCQs
No ratings yet
AtoZInternetProgramming2 (PHP) MCQs
83 pages
Lakshmi Neelisetty SFDC Resume
No ratings yet
Lakshmi Neelisetty SFDC Resume
7 pages
Big Ip Application Security Manager Ds PDF
No ratings yet
Big Ip Application Security Manager Ds PDF
16 pages
4D Ajax Framework Developer Guide
No ratings yet
4D Ajax Framework Developer Guide
28 pages
ServiceNow Admin
No ratings yet
ServiceNow Admin
2 pages
React.js Beginner's Guide
100% (1)
React.js Beginner's Guide
109 pages
Ajax With JSP Developed in NetBeans
No ratings yet
Ajax With JSP Developed in NetBeans
7 pages
Cs411 Solved Mcqs Final Term by Junaid
No ratings yet
Cs411 Solved Mcqs Final Term by Junaid
43 pages
Top 50 Jquery Interview Questions
No ratings yet
Top 50 Jquery Interview Questions
7 pages
Unit 1 Tutorials Introduction To Web Development
No ratings yet
Unit 1 Tutorials Introduction To Web Development
45 pages
CN and Web Lab
No ratings yet
CN and Web Lab
8 pages
DIY Home Monitoring for Tech Enthusiasts
No ratings yet
DIY Home Monitoring for Tech Enthusiasts
21 pages
Using A REST API With JQuery and JSON - SAP Blogs
No ratings yet
Using A REST API With JQuery and JSON - SAP Blogs
15 pages
Literature Review of Bus Ticket Reservation System
100% (1)
Literature Review of Bus Ticket Reservation System
6 pages
Web Application Security Seminar
No ratings yet
Web Application Security Seminar
30 pages
Note For Selenium L2-3721
No ratings yet
Note For Selenium L2-3721
7 pages
Chapter 6 FNL
No ratings yet
Chapter 6 FNL
12 pages
Multimedia Technology Cat
No ratings yet
Multimedia Technology Cat
17 pages
IT Developer Resume: Angular, ASP.NET Specialist
No ratings yet
IT Developer Resume: Angular, ASP.NET Specialist
4 pages
Berkay Ozisik - CV EN (1) - 1
No ratings yet
Berkay Ozisik - CV EN (1) - 1
2 pages
Hema Resume. Java
No ratings yet
Hema Resume. Java
10 pages
Flask
No ratings yet
Flask
25 pages
Turkish Geetest API Log
No ratings yet
Turkish Geetest API Log
6 pages