Web Programming Gtu Filinalpractical Practical File

L. D.
College of Engineering
Opp. Gujarat University, Navrangpura, Ahmedabad - 380015
A Laboratory Manual for

Web Programming
(3160713)
B.E. Semester 6
Branch: Computer Engineering
Faculty Details:
1) Prof. H. K. GEVARIYA
2) Prof. S. R. Modi
3) Prof. P. D. Salot
WEB PROGRAMMING(3160713)
Enrollment no. : 210280107059
•••
L. D. College of Engineering, Ahmedabad
Certificate
This is to certify that Mr./Ms. Dodiya Dhrupalkumar Jesingbhai

Enrollment No. 210280107059 of B.E. Semester 6th Computer Engineering of
this Institute (GTU Code: 028) has satisfactorily completed the Practical /
Tutorial work for the subject Web Programming (3160713) for the academic
year 2023-24.
Place: Ahmedabad
Date: __/__/2024
Name and Sign of Faculty member
C.E., L. D. College of Engineering, Ahmedabad-15 1

•••

Department of Computer Engineering
Practical List
Subject Name: Web Programming Subject Code: 3160713
Term: 2023-2024
Sr. Date of Date of Page Marks
Title Sign
No. performance submission No. (20)
PRACTICAL SET-1(CO1)
Use the various HTML tags with appropriate styles to display the various types of contents
effectively.
Create your resume using HTML 19/01/2024
(Suggested sections of resume are 19/01/2024
Personal Information, Educational
1 Information, Professional Skills,
Experience,Achievements,
Hobbies), Experiment with text,
colors, link and lists.
Create your class time table using 19/01/2024 19/01/2024
table tag, experiment with
2
rowspan, colspan, cellspacing and
cellpadding attributes.
Design static web pages for your 2/2/2024 2/2/2024
college containing a description of
3 the courses, departments, faculties,
library etc. Provide links for
navigation among pages.
Create User Registration Form in 2/2/2024 2/2/2024
HTML (Suggested to use fields
like Name, Date of Birth, Gender,
Email Id, Mobile No.,Address,
4
State , Education , Image Upload
etc) using textbox, textarea,
checkbox, radio button, select box,
button, file upload etc.
Create two web pages, one 9/2/2024 9/2/2024
contains audios and other page
5 contains videos (using HTML5
audio and video tags). Also provide
link for navigation between pages.
Create a web page using frame. 16/2/2024 16/2/2024
Divide the page into two parts with
Navigation links on left hand side
6
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.
Design a web page of your home 23/2/2024 23/2/2024
town with an attractive background
7
color, text color, an Image, font etc.
(use internal CSS).
Use Inline CSS to format your 23/2/2024 23/2/2024
8 resume that you created in practical
no 01.
Use External, Internal, Inline CSS 1/3/2024
9 to format College Web site that you 1/3/2024
created in Practical No.03
Develop the dynamic web pages using HTML, CSS and JavaScript applying web design
principles to make pages effective.
Develop a java script to display 15/3/2024
1 15/3/2024
today’s date.
Develop simple calculator for 15/3/2024
addition, subtraction, multiplication 15/3/2024
2
and division operation using java
script.
Write a java script code to combine 15/3/2024
and display the information in 15/3/2024
3 textbox when the button is clicked
use registration page that you
created in Practical No.4.
Use JavaScript to Implement 22/3/2024
4 22/3/2024
validation in Practical No.4.
[CO3] Develop the server-side PHP scripts using various features for creating customized
web services
Write a PHP program to check if 22/3/2024
1
number is prime or not. 22/3/2024
Write a PHP program to print 22/3/2024 22/3/2024
following patterns.
1 1
ab 01
234 1 0
2 cde 1
f 0 1
567 01
89 1 0
1 0
1
Write PHP script to demonstrate 22/3/2024 22/3/2024
3
use of Math functions. abs () &

•••
round (), ceil() & floor (), min ()

& max (), pow () & sqrt ().
[CO4] Write the server side scripts for designing web-based services with database
connectivity
Use Registration Form from 5/4/2024 5/4/2024
practical number 4 to store user
registration details in MySql
database. On submission next page
1
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 12/4/2024 12/4/2024
2 authentication using PHP-MYSQL.
Use session for storing username.
[CO5] Develop a web application using advanced web programming features including
AJAX and JQuery using concepts of Web API.
Using AJAX Create visual search 19/4/2024 19/4/2024
feature to search using name for
1 practical number 15 which list
name, mobile number and email id
of matching users.
19/4/2024 19/4/2024
2 Create a REST API using php.
Create an Image slider using 20/4/2024 20/4/2024
3
jQuery.
20/4/2024 20/4/2024
4 Cookie Example.

•••

Department of Computer Engineering
Practical Rubrics
Subject Name: Web Programming Subject Code: 3160713

Term: 2023-2024
Rubrics ID Criteria Marks Good Satisfactory Need Improvement
RB1 Regularity 05 High (>70%) Moderate (40-70%) Poor (0-40%)
Moderate level
Excellent understanding
understanding of Problem not
of problem and
Understanding problem and understood and can't
RB2 05 relevance with the
of Problem relevance with the establish the relation
theory clearly
theory clearly with the theory.
understood.
understood.
Efficient Incomplete Solution

Design and implementation with for the Problem and Partial
RB3 Implementation 05 proper naming Moderate level of implementation with
of Problem convention and implementation. Poor poor understanding.
understanding naming convention.
Unique documentation
Ordinary Weak documentation
(not copied from other
documentation of of given problem
sources) of given
RB4 Report writing 05 given problem with without proper
problem with proper
proper formatting formatting and
formatting and
and language language
language.
SIGN OF FACULTY

•••
Computer Engineering Department

Subject Name: Web Programming (3160713) Term: 2023-2024
Enrollment Number: 210280107059
Name: Dodiya Dhrupalkumar Jesingbhai
Sr. RB RB RB RB TOTAL Sig
Title Date (20)
No 1 2 3 4 n
19/1/2024
Create your resume using HTML (Suggested
sections of resume are Personal Information,
1 Educational Information, Professional Skills,
Experience, Achievements, Hobbies), Experiment
with text, colors, link and lists.
Create your class time table using table tag, 19/1/2024

2 experiment with rowspan, colspan, cellspacing and
Design static web pages for your college containing 2/2/2024
a description of the courses, departments, faculties,
3
library etc. Provide links for navigation among
pages.
Create User Registration Form in HTML 2/2/2024
(Suggested to use fields like Name, Date of Birth,
Gender, Email Id, Mobile No.,Address, State ,
4
Education , Image Upload etc) using textbox,
textarea, checkbox, radio button, select box, button,
file upload etc.
Create two web pages, one contains audios and 9/2/2024
other page contains videos (using HTML5 audio
5
and video tags). Also provide link for navigation
between pages.
Create a web page using frame. Divide the page into 16/2/2024
two parts with Navigation links on left hand side of
page (width=20%) and content page on right hand
6
side of page (width = 80%). On clicking the
navigation Links corresponding content must be
shown on the right-hand side.
Design a web page of your home town with an 23/2/2024
7 attractive background color, text color, an Image,
font etc. (use internal CSS).
Use Inline CSS to format your resume that you 23/2/2024
8
created in practical no 01.

•••
Use External, Internal, Inline CSS to format College 1/3/2024

9
Web site that you created in Practical No.03
1 Develop a java script to display today’s date. 15/3/2024
Develop simple calculator for addition, subtraction, 15/3/2024
2 multiplication and division operation using java
script.
Write a java script code to combine and display the 15/3/2024
3 information in textbox when the button is clicked use
registration page that you created in Practical No.4.
Use JavaScript to Implement validation in Practical 22/3/2024
4
No.4.
Write a PHP program to check if number is prime or 22/3/2024
1
not.
Write a PHP program to print following patterns. 22/3/2024
1 1
ab 01
2
234 101
cdef 0101
56789 10101
Write PHP script to demonstrate use of Math 22/3/2024
3 functions. abs () & round (), ceil() & floor (), min
() & max (), pow () & sqrt ().
Use Registration Form from practical number 4 to 5/4/2024
store user registration details in MySql database. On
1 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 PHP- 12/4/2024
2
MYSQL. Use session for storing username.
Using AJAX Create visual search feature to search 19/4/2024
1 using name for practical number 4 which list name,
mobile number and email id of matching users.
2 Create a REST API using php. 19/4/2024
3 Create an Image slider using jQuery. 20/4/2024
4 Cookie Example. 20/4/2024

•••
GUJARAT TECHNOLOGICAL UNIVERSITY, AHMEDABAD,

COURSE CURRICULUM
COURSE TITLE: WEB PROGRAMMING
(Code: 3160713)
Degree Programmes in which this course is offered Semester in which offered
Computer Engineering 6th Semester
1. RATIONALE
• The wide spread use of the Internet and WWW by common people has made it compulsion to
provide web-based interface for the applications to access the application from anywhere,
anytime, anyone.
• The subject covers the wide range of web technologies both client side and server side to
provide the exposure to the students to develop Rich Internet Applications using them.
• It covers the basics of WWW, HTML, CSS and client-side scripting with JavaScript, server-
side scripting with PHP and database connectivity using PHP and related technologies.
2. COMPETENCY
The course content should be taught and implemented with the aim to develop required skills
in the students so that they are able to acquire following competency:
• Develop GUI based Web application using HTML, CSS, JAVASCRIPT and PHP
with Database Connectivity.
3. COURSE OUTCOMES
After learning the course, the students should be able to:
CO-1 Use the various HTML tags with appropriate styles to display the various types of contents effectively
CO-2 Develop the dynamic web pages using HTML, CSS and JavaScript applying web design principles to
make pages effective.
CO-3 Develop the server-side PHP scripts using various features for creating
customized web services.
CO-4 Write the server side scripts for designing web-based services with database connectivity.
CO-5 Develop a web application using advanced web programming features including AJAX and JQuery
using concepts of Web API.

•••
4. TEACHING AND EXAMINATION SCHEME
5. SUGGESTED LEARNING RESOURCES

A. LIST OF BOOKS
1. DEVELOPING WEB APPLICATIONS, RALPH MOSELEY AND M. T. SAVALIYA, WILEY-INDIA
2. WEB TECHNOLOGIES, BLACK BOOK, DREAMTECH PRESS
3. HTML 5, BLACK BOOK, DREAMTECH PRESS
4. WEB DESIGN, JOEL SKLAR, CENGAGE LEARNING
5. DEVELOPING WEB APPLICATIONS IN PHP AND AJAX, HARWANI, MCGRAWHILL
6. INTERNET AND WORLD WIDE WEB HOW TO PROGRAM, P.J. DEITEL & H.M. DEITEL, PEARSON
B. LIST OF E-LEARNING WEBSITES

List of e-Learning Resources:
1. HTML:
a. https://developer.mozilla.org/en-US/docs/Web/HTML
b. https://www.w3schools.com/html/
c. https://www.tutorialspoint.com/html/index.htm
2. CSS:
a. https://developer.mozilla.org/en-US/docs/Web/CSS
b. https://www.manning.com/books/css-in-depth
c. https://www.w3schools.com/css/
d. https://www.tutorialspoint.com/css/index.htm
3. Java Script:
a. https://javascript.info/
b. https://github.com/getify/You-Dont-Know-JS
c. https://www.w3schools.com/js/
d. https://www.tutorialspoint.com/javascript/index.htm
4. PHP:
a. https://www.w3schools.com/php/
b. https://www.tutorialspoint.com/php/index.htm

•••
PRACTICAL SET 1 – HTML & CSS
[CO1] Use the various HTML tags with appropriate styles to display the various types of
contents effectively.
AIM 1: 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.
Date:23/01/2024
Competency and Practical Skills:
Relevant CO: 1
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 <!DOCTYPE html>
o <head> section <html>
<head>
o <body> section <title>Page Title</title>
</head>
- DOCTYPE specifies the document type. the <body>
document type is specified by the Document Type <h1> Hello World </h1>
Definition (DTD). </body>
</html>
- <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
- 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
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>

•••
- Ordered HTML List
o Starts with <ol> tag. Each list item starts with the <li> tag.
o Lists items will be marked with numbers by default
<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>Dodiya Dhrupalkumar Jesingbhai - Resume</title>
</head>
<body>
<div class="container">
<h1>Dodiya Dhrupalkumar Jesingbhai</h1>
<p>Email: <a
href="mailto:dhrupalsinhdodiya8534@gmail.com">dhrupalsinhdodiya8534@gmail.com</a></p
>

•••
<p>Mobile No.: 9510433710</p>

<p>Address: Ahmedabad, Gujarat</p>
<hr style="background-color: black;">
<h2>Education</h2>
<p>Course: BE Computer Engineering</p>
<p>College: LD College of Engineering</p>
<h2>Professional Skills</h2>
<ul>
<li>C++</li>
<li>Javascript</li>
<li>HTML/CSS</li>
<li>Node.js</li>
<li>React</li>
</ul>
<h2>Experience</h2>
<p>Fresher</p>
<h2>Achievements</h2>
<ul>
<li>Competitive Coder</li>
<li>CodeChef</li>
<li>LeetCode</li>
<li>Coding Ninjas</li>
</ul>
</div>
</body>
</html>
Output:

•••
Conclusion:
The use of ordered and unordered lists, links, and text formatting in HTML contributes to
creating well-organized, navigable, and visually appealing web pages. These elements play a vital
role in presenting information effectively, guiding user interaction, and enhancing the overall
user experience on websites and web applications.
Quiz:
1. Explain HTML Document Structure.

The HTML document structure consists of:
➢ DOCTYPE Declaration: Defines the HTML version.
➢ HTML Element: Root element containing all other elements.
➢ Head Section (<head>): Contains metadata like title, charset, and links to external

•••
resources.
➢ Title (<title>): Specifies the title displayed in the browser tab.
➢ Meta Tags: Provide additional document metadata.
➢ Linking External Resources: Links to stylesheets, scripts, and fonts.
➢ Body Section (<body>): Contains visible content like text, images, links, and forms.
➢ HTML Elements: Structured elements for organizing and formatting content.
➢ Comments (): Non-displayed notes for developers within the code.
2. List and explain any five HTML formatting tags.
Here are five common text formatting options in HTML:
➢ Headings (<h1> to <h6>): Used to define different levels of headings.

➢ Paragraphs (<p>): Creates blocks of text.
➢ Bold (<b>) and Strong (<strong>): Makes text bold.
➢ Italic (<i>) and Emphasis (<em>): Italicizes text.
➢ Underline (<u>): Underlines text.
3. Explain ordered and unordered list with example.
1. Ordered Lists (<ol>): Present items in a specific sequence with numerical or
alphabetical indicators.
Example:
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
2. unordered Lists (<ol>): Display items without a particular order, usually with bullet
points.
3. Example:
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</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:
1.Gooogle
2.Css web,HTML web, JAVA web
Signature of Faculty: Grade:

•••
AIM 2: Create your class time table using table tag, experiment with rowspan,
colspan, cellspacing and cellpadding attributes.
Date:
Relevant CO: 1
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 attribute 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 study table tag and output as below.

•••
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #4CAF50;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px auto;
}

•••
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
td {
background-color: #fff;
}
</style>
</head>
<body>
<h1>L.D College of Engineering, Ahmedabad</h1>
<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>10:30 AM - 11:30 AM</td>
<td rowspan="2">AJAVA</td>
<td>IPDC</td>
<td>TOC</td>
<td>IPDC</td>
<td></td>
<td rowspan="2">DE</td>
</tr>
<tr>
<td>11:30 AM - 12:30 PM</td>
<td>WD</td>
<td>WP</td>
<td>MPI</td>
<td>IOT</td>
</tr>
<tr>
<td>1:00 PM - 2:00 PM</td>
<td rowspan="2">IOT</td>

•••
<td rowspan="2">MPI</td>
<td rowspan="2">WP</td>
<td rowspan="2">DE</td>
</tr>
<tr></tr>
<tr>
<td>3:15 PM - 4:15 PM</td>
<td>MPI</td>
<td>TOC</td>
<td>AJAVA</td>
<td>WP</td>
<td>AJAVA</td>
</tr>
<tr>
<td>4:15 PM - 5:15 PM</td>
<td>TOC</td>
<td>TOC</td>
<td>AJAVA</td>
<td>MPI</td>
<td>IOT</td>
</tr>
</table>
</body>
</html>
Output:

•••
Conclusion:
This HTML code creates a class time table using the `<table>` element. It demonstrates the use
of `rowspan` and `colspan` attributes to merge cells vertically and horizontally, respectively.
Additionally, the `cellspacing` and `cellpadding` attributes are utilized to control the spacing
between cells and the padding within cells.
Quiz:
1. Explain the use of rowspan and colspan attributes in table tag.

2. Differentiate between <td> and <th>.
• https://www.w3schools.com/html/html_tables.asp
References used by the students: (Sufficient space to be provided)
1.Gooogle

•••
AIM 3: Design static web pages for your college containing a description of the
courses, departments, faculties, library etc. Provide links for navigation among
pages.
Date:
Relevant CO: 1
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=http://www.gtu.ac.in / target=”_blank”>Visit GTU</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 Target 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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>L.D. College of Engineering</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #4CAF50;
}
p {
margin: 0 20px;
line-height: 1.5;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #0066cc;
}
nav ul li a:hover {
text-decoration: underline;

•••
}
</style>
</head>
<body>
<h1>Welcome To L.D. College of Engineering</h1>
<p>
L. D. College of Engineering, endearingly known as L.D.C.E, is Ahmedabad’s
premier engineering college situated at the city’s heart and surrounded by elite
organizations like PRL, ATIRA, ISRO, IIM, and CEPT. Established in 1948 to impart
quality higher education in various fields of engineering, it has seen unprecedented
growth.
</p>
<br />
<h2 style="margin: 34px;">Vision</h2>
<p>
To contribute to the sustainable development of the nation through achieving
excellence in technical education and research while facilitating the transformation
of students into responsible citizens and competent professionals.
</p>
<br />
<nav>
<ul >
<li><a href="library.html">Library</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="faculty.html">Faculty</a></li>
</ul>
</nav>
</body>
</html>
Library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Library</title>
</head>
<body>
<h1>Library</h1>
<p>Explore the resources available at our college library:</p>
<ul>
<li>E-books</li>
<li>Books</li>

•••
<li>Periodicals</li>
</ul>
<nav>
<a href="P3.html">Home</a>
</nav>
</body>
</html>
Faculty
<!DOCTYPE html>
<html lang="en">
<head>
<title>Faculty</title>
</head>
<body>
<h1>Faculty</h1>
<p>Meet our esteemed faculty members:</p>
<ul>
<li>NIKUNJKUMAR HARSUKHBHAI DOMADIYA</li>
<li>HETALBEN KANUBHAI GEVARIYA</li>
<li>DHARA HITARTH BUCH</li>
<li>HETAL ANILKUMAR JOSHIARA</li>
<li>KALPESHKUMAR MANGALBHAI PATEL</li>
<li>AMITABEN VISHAL SHAH</li>
<li>HETAL BHARATBHAI PANDYA</li>
<li>RAJYALAKSHMI HARILAL JAISWAL</li>
<li>PRACHI VIJAYKUMAR PANCHOLI</li>
<li>PARTH RAMESHCHANDRADAVE</li>
<li>PRAGNESHKUMAR GAUTAMBHAI PATEL</li>
<li>ZISHANHAIDER YASINALI NOORANI</li>
</ul>
<nav>
</nav>
</body>
</html>
Departments
<!DOCTYPE html>
<html lang="en">
<head>

•••

<title>Departments</title>
</head>
<body>
<h1>Departments</h1>
<p>Explore the different departments at our college:</p>
<ul>
<li>Computer Department</li>
<li>Textile Department</li>
<li>Chemical Department</li>
<li>IT Department</li>
<li>AutoMoblie Department</li>
<li>Mechanical Department</li>
</ul>
<nav>
</nav>
</body>
</html>
Courses
<!DOCTYPE html>
<html lang="en">
<head>
<title>Courses</title>
</head>
<body>
<h1>Courses Offered</h1>
<p>Here are the courses offered at our college:</p>
<ul>
<li>Computer Engineering</li>
<li>IT Engineering</li>
<li>Chemical Engineering</li>
<li>Textile Engineering</li>
<li>AutoMoblie Engineering</li>
<li>Mechanical Engineering</li>
</ul>
<nav>
</nav>

•••
</body>
</html>
Output:

•••

•••
Conclusion:
This HTML code creates a static website for a college with pages for home, courses, departments,
faculties, and library. It uses a simple and clean design with a header, navigation bar, main
content area, and footer.
Quiz:
1. Explain HTML Link target attribute.

2. How to use image as a link?
• https://www.w3schools.com/html/html_links.asp
1.Gooogle

•••
AIM 4: 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:
Relevant CO: 1
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

•••
- HTML Form Controls
Control Name Used for Sample Code
Text input control Textbox is used for

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

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

<textarea rows = "5" cols = "50" name =
multiline text input , like
Multiline input control. "description">
comments.
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
<input type = "checkbox" name =
selected.
"physics" value = “physics"> name =
"password" />

•••
Radio Button Radio buttons are used

Controls when out of many options, <input type = "radio" name = "subject"
just one option is required value = "maths"/> Maths
to be selected.
<input type = "radio" name = "subject"
value = "physics"/> Physics
Drop Down box provides option to list

<select name = "dropdown">
Control down various options in
the form of drop down list, <option value = "Maths"
from where a user can
selected>Maths</option>
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 website.it
accept = "image/*" />
is also known as file select
box.
Button Control This creates a button that

automatically submits a <input type = "submit" name =
Submit form. "submit" value = "Submit" />
Button Control This creates a button that

automatically resets form
Reset <input type = "reset" name = "reset”
controls to their initial
value = "Reset" />
values.
Button Control This creates a button that <input type = "button" name = "ok"
is used to trigger a client- value = "OK" />
Button side script when the user
clicks that button.

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

button but we can use an "imagebutton" src =
Image image as background of
"/html/images/logo.png" />
the button.
Hidden Control Hidden form controls are <input type = "hidden" name =
used to hide data inside the "pagename" value = "10" />
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>
<html lang="en">
<head>
<title>User Registration Form</title>
<style>
body {
margin: 20px;
}
form {
max-width: 600px;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #4CAF50;
}

•••
label {
display: block;
margin-bottom: 8px;
color: #333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="#" method="post">

<h2>User Registration Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

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

<input type="date" id="dob" name="dob" required>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label for="email">Email Id:</label>

<input type="email" id="email" name="email" required>
<label for="mobile">Mobile No.:</label>

<input type="tel" id="mobile" name="mobile" required>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>
<label for="state">State:</label>
<select id="state" name="state" required>
<option value="state1" selected>Gujarat</option>
<option value="state2">Uttar Pradesh</option>
<option value="state3">Jammu and Kashmir</option>
</select>
<label for="education">Education:</label>
<input type="text" id="education" name="education" required>
<label for="image">Image Upload:</label>

<input type="file" id="image" name="image" accept="image/*">
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:

•••

•••
Conclusion:
This HTML code creates a user registration form with various input fields such as textboxes,
date picker, radio buttons, email, phone number, textarea, select dropdown, and file upload
Quiz:
1. Explain form tag with its attributes.

2. Differentiate between text input and password input controls.
3. Explain various types of buttons available in HTML.
• https://www.w3schools.com/html/html_forms.asp
1.Gooogle

•••
AIM 5: 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:
Relevant CO: 1
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">
</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">
</audio>

•••
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.
Vedio Page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>video</title>
</head>
<body>
<h1>Video</h1>
<video src="./video.mp4" poster="image/1.png" controls width="33%"></video>
<a href="auio.html">Go to Audio Page</a>
</body>
</html>
Audio Page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Audio</h1>
<audio controls>
<source src="./click_audio.mp3" type="audio/mp3">
</audio>
<a href="video.html">Go to Video page</a>

</body>
</html>
Output:

•••

•••
Conclusion:
These HTML files create two separate web pages, one for displaying audios and the other for
videos. The audio page contains an audio player with playback controls, and the video page
contains a video player with playback controls. Both pages include a link for navigation
between them. This setup allows users to easily switch between viewing audio and video
content.
Quiz:
1. Explain audio and video tags.
• https://www.w3schools.com/html/html_media.asp
1.Gooogle

•••
AIM 6: 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:
Relevant CO: 1
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
<frameset rows = "10%,80%,10%">

<frame name = "top" src = "./rows_demo_pages/top_frame.htm" />
<frame name = "main" src = "./rows_demo_pages/main_frame.htm" />
<frame name = "bottom" src = "./rows_demo_pages/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames. </body>
</noframes>
</frameset>
In below implementation use target attribute in navigation link to open page in specific frame.
Implementation:
Create a web page using frame. Divide the page into two parts with Navigation links on left hand side
of page (width=20%) and content page on right hand side of page (width = 80%). On clicking the
navigation Links corresponding content must be shown on the right-hand side.
Index:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frame Page</title>
<frameset cols="20%, 80%" frameborder="0">
<frame src="navigation.html" name="navigation" noresize>

•••
<frame src="content.html" name="content" noresize>

</frameset>
</head>
<body>
<p>Your browser does not support frames.</p>
</body>
</html>
Contant:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Default Content</title>
</head>
<body>
<h2>Welcome to the Default Content</h2>
<p>This is the default content that is displayed initially. Click on the
navigation links to see different contents.</p>
</body>
</html>
Contant-1:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Content 1</title>
</head>
<body>
<h2>Content 1</h2>
<p>This is the content for Link 1.</p>
</body>
</html>

•••
Contant-2:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Content 2</h2>
</body>
</html>
Contant-3:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Content 3</h2>
</body>
</html>
Contant-4:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Content 4</h2>
</body>

•••
</html>
Output:
Conclusion:
This HTML code creates a web page with frames. It divides the page into two parts: a navigation
section on the left-hand side (20% width) and a content section on the right-hand side (80% width).
Clicking on navigation links loads corresponding content pages into the content frame on the right-
hand side. This setup allows for easy navigation between different content sections without reloading
the entire page.

•••
Quiz:
1. Explain about rows and cols attribute of frame tag.

2. Which tag embed an inline frame in a web page?
3. Which attribute in frame tag is used to specifies the web page to load into that frame?
• https://www.w3schools.com/tags/tag_frameset.asp
1.Gooogle

•••
AIM 7 : Design a web page of your home town with an attractive background color,
text color, an Image, font etc. (use internal CSS).
Date:
Relevant CO: 1
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
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
<!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
<!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}
o Example
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)"
Example:
body {
background-color: lightblue;
}
-CSS Text Color
- text color can be set using color property

Example:

•••
<h1 style="color:Tomato;">Hello World</h1>
Implementation:
Design a web page of your home town with an attractive background color, text color, an Image, font
etc. (use internal CSS).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Hometown - Ahmedabad</title>
<style>
body {
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #79f972;
color: #fff;
text-align: center;
padding: 20px;
border-radius: 20px;
}
h1 {
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.6;
margin: 0 20px 20px;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;

•••
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Ahmedabad</h1>
</header>
<div>
<img src="image/ahmedabad.jpg" alt="Ahmedabad City" width="400" />
<p>
Ahmedabad, nestled in the western Indian state of Gujarat,
pulsates with life and history. As Gujarat's largest city, it stands as a
testament to India's rich cultural tapestry. Famed as the "Manchester of the
East" due to its robust textile industry, Ahmedabad intertwines tradition
with modernity. Its economic prowess extends beyond textiles, encompassing
diverse sectors like chemicals, pharmaceuticals, engineering, and information
technology. Ahmedabad's vibrant streets and bustling markets beckon visitors
to explore its myriad delights, from architectural wonders to savory culinary
experiences.
</p>
</div>
</body>
</html>
Output:

•••
Conclusion:
This HTML document designs a web page for showcasing my hometown. The page uses internal
CSS to set attractive background colors, text colors, and font styles. It includes a header with a
welcoming message, an image container displaying a picture of the hometown, and a main
section providing information about the town. The footer contains copyright information.
Overall, the design aims to create an appealing and informative presentation of my hometown.
Quiz:
1. Explain the syntax of the CSS.

2. What is internal CSS?
3. Explain CSS class and Id selector.
• https://www.w3schools.com/css/css_syntax.asp
• https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/
1.Gooogle

•••
AIM 8: Use Inline CSS to format your resume that you created in practical no 1.
Date:
Relevant CO: 1
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 01.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dixit's Resume</title>
<style>
body {

•••
padding: 0;
font-family: sans-serif;
}
.container {
margin: 50px auto;
width: 900px;
padding: 20px;
}
.container-1 {
text-align: center;
}
.container-1 p a {
margin: 3px;
}
a {
color: #4caf50;
}
.heading {
border-bottom: 5px solid black;
}
.container-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
</style>
</head>
<body>
<div class="container-1">
<h1 style="background-color: aqua;">Dixit Sathwara</h1>
<p>
<a href="mailto:dixitgsathwara1708@gmail.com"
>dixitgsathwara1708@gmail.com</a
>
| Ahmedabad,india |
<a href="https://github.com/dixitgsathwara"
>dixitgsathwara.github.io</a
>
</p>
</div>
<section>
<h2 class="heading">Personal Information</h2>

•••
<p style="font-style:italic;">Name: Sathwara Dixit Girishbhai</p>

<p>
Email:
<a href="mailto:dixitgsathwara1708@gmail.com"
>dixitgsathwara1708@gmail.com</a
>
</p>
<p>Mobile: +91 7802927797</p>
<p>Address: Ahmedabad,Gujarat</p>
</section>
<section>
<h2 class="heading">Educational Information</h2>
<ul>
<li style="font-weight: bolder;">B.E(Computer Engineering)</li>
<p >L.D College Of Engineering,Ahmedabad <b>(2025)</b></p>
<li style="font-weight: bolder;">H.S.C</li>
<p>Crystal International Public School <b>(March-2021)</b></p>
<li style="font-weight: bolder;">S.S.C</li>
<p>Sahajanand Vidhyalaya <b>(March-2019)</b></p>
</ul>
</section>
<section>
<h2 class="heading">Professional Skills</h2>
<div class="container-2" style="color: #7a78ed;">
<div >Data Structure</div>
<div>SQL</div>
<div>Analysis Of Algorithms</div>
<div>C</div>
<div>C++</div>
<div>Python</div>
<div>Java</div>
<div>HTML</div>
<div>CSS</div>
<div>Javascript</div>
<div>Node.js</div>
<div>Express.js</div>
</div>
</section>
<section>
<h2 class="heading">Experience</h2>
<ul>
<li style="font-size: x-large;"><b>Internship</b></li>
<p>
I have done 6 month intership at Microsoft in the field of web
development.I have learned lots of new concepts there.

•••
</p>
<p>
I have done 6 month intership at Google in the field of Machine
Learning.I have learned lots of new concepts there.
</p>
</ul>
</section>
<section>
<h2 class="heading">Achievements</h2>
<ul>
<li>
<b style="font-family: 'Courier New', Courier, monospace;">Problem
Solving</b>
<ul>
<li>Solve More than 350 problems on leetcode and codeforces</li>
<li>codeforces Contest rating: 958</li>
<li>leetcode Contest rating: 1435</li>
</ul>
</li>
</ul>
</section>
<section>
<h3 class="heading" >Hobbies</h3>
<ul style="font-size: x-large; text-align: center; text-decoration: none;">
<li>Playing Cricket</li>
<li>Playing Chess</li>
<li>Listen Music</li>
<li>Reading story book</li>
</ul>
</section>
</div>
</body>
</html>
Output:

•••
Conclusion:
This HTML document applies inline CSS to format the resume created in practical no 1. Each
section of the resume is styled individually using inline CSS properties such as font family, color,
and margin. The use of inline CSS allows for greater control over the appearance of the resume,
making it more visually appealing and easier to read.
Quiz:
1.Explain Internal CSS VS Inline CSS.
2.CSS stands for ______.
3.Which HTML tag is used to define an internal style sheet?
1.Gooogle

•••
AIM 9: Use External, Internal, Inline CSS to format College Web site that you
created in Practical No.03
Date:
Relevant CO: 1
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
body {
background-color: lightblue;
h1 {
color: navy;
Implementation:
Use External,margin-left: 20px;

Internal, Inline CSS to format Information Technology Department Web Pages that you
created in Practical No. 03
}
P9:
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>L.D. College of Engineering</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #4CAF50;
}
p {
margin: 0 20px;
line-height: 1.5;
}
nav ul {

•••
margin: 0;
padding: 0;
text-align: center;
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #0066cc;
}
nav ul li a:hover {
}
</style>
</head>
<body>
<h1>Welcome To L.D. College of Engineering</h1>
<p>
L. D. College of Engineering, endearingly known as L.D.C.E, is
Ahmedabad’s premier engineering college situated at the city’s heart and
surrounded by elite organizations like PRL, ATIRA, ISRO, IIM, and CEPT.
Established in 1948 to impart quality higher education in various fields
of engineering, it has seen unprecedented growth.
</p>
<br />
<h2 style="margin: 34px;">Vision</h2>
<p>
To contribute to the sustainable development of the nation
through achieving excellence in technical education and research while
facilitating the transformation of students into responsible citizens and
competent professionals.
</p>
<br />
<nav>

•••
<ul >
<li><a href="library.html">Library</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="faculty.html">Faculty</a></li>
</ul>
</nav>
</body>
</html>
Library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Library</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: #4CAF50;

•••
p {
}
ul {
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
}
nav {
margin-top: 20px;
}
a {
color: #0066cc;
}
a:hover {
}
</style>
</head>
<body>
<h1>Library</h1>
<p>Explore the resources available at our college library:</p>
<ul>
<li>E-books</li>
<li>Books</li>
<li>Periodicals</li>

•••
</ul>
<nav>
</nav>
</body>
</html>
Faculty:
<!DOCTYPE html>
<html lang="en">
<head>
/>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}
h1 {
color: #4CAF50;
text-align: center;
background-color: black;
p {
}

•••
ul {
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
}
nav {
text-align: center;
margin-top: 20px;
}
a {
color: #0066cc;
}
a:hover {
}
</style>
<title>Faculty</title>
</head>
<body>
<h1>Faculty</h1>
<p>Meet our esteemed faculty members:</p>
<ul>
<li>NIKUNJKUMAR HARSUKHBHAI DOMADIYA</li>
<li>HETALBEN KANUBHAI GEVARIYA</li>
<li>DHARA HITARTH BUCH</li>
<li>HETAL ANILKUMAR JOSHIARA</li>
<li>KALPESHKUMAR MANGALBHAI PATEL</li>
<li>AMITABEN VISHAL SHAH</li>

•••
<li>HETAL BHARATBHAI PANDYA</li>

<li>RAJYALAKSHMI HARILAL JAISWAL</li>
<li>PRACHI VIJAYKUMAR PANCHOLI</li>
<li>PARTH RAMESHCHANDRADAVE</li>
<li>PRAGNESHKUMAR GAUTAMBHAI PATEL</li>
<li>ZISHANHAIDER YASINALI NOORANI</li>
</ul>
<nav>
</nav>
</body>
</html>
Department:
<!DOCTYPE html>
<html lang="en">
<head>
/>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}
h1 {

•••
color: #4CAF50;
text-align: center;
}
p {
}
ul {
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
}
nav {
text-align: center;
margin-top: 20px;
}
a {
color: #0066cc;
}
a:hover {
}
</style>
<title>Departments</title>
</head>
<body>
<h1>Departments</h1>

•••
<p>Explore the different departments at our college:</p>

<ul>
<li>Computer Department</li>
<li>Textile Department</li>
<li>Chemical Department</li>
<li>IT Department</li>
<li>AutoMoblie Department</li>
<li>Mechanical Department</li>
</ul>
<nav>
</nav>
</body>
</html>
Courses:
<!DOCTYPE html>
<html lang="en">
<head>
/>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
}

•••
h1 {
color: #4CAF50;
text-align: center;
}
p {
}
ul {
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
}
nav {
text-align: center;
margin-top: 20px;
}
a {
color: #0066cc;
}
a:hover {
}
</style>
<title>Courses</title>
</head>
<body>

•••
<h1>Courses Offered</h1>
<p>Here are the courses offered at our college:</p>
<ul>
<li>Computer Engineering</li>
<li>IT Engineering</li>
<li>Chemical Engineering</li>
<li>Textile Engineering</li>
<li>AutoMoblie Engineering</li>
<li>Mechanical Engineering</li>
</ul>
<nav>
</nav>
</body>
</html>
Output:

•••

•••
Conclusion:
External CSS is stored in a separate file for better organization and reuse. Internal CSS is
embedded within the HTML document for specific styling needs. Inline CSS is applied directly
to individual elements for immediate effect
Quiz:
1.Explain External CSS.
2.Compare Internal, Inline and External CSS.
3.Which property is used to change the background color?
4.Which property is used to change the text color of the element?
• Suggested Reference:
• References used by the students:
1.Gooogle

•••
PRACTICAL SET 2 – HTML, CSS, JAVASCRIPT
[CO2] Develop the dynamic web pages using HTML, CSS and JavaScript applying web design
principles to make pages effective.
AIM 1: Develop a java script to display today’s date.
Date:
Relevant CO: 2
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 languages 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).
▪ 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:
var today = new Date();

var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
var todayDate = dd + '/' + mm + '/' + yyyy;
document.getElementById('date').innerHTML = todayDate;
Output:

•••
Conclusion:
This JavaScript code effectively retrieves today's date using the Date object and then extracts
the day, month, and year components. It then formats the date as "dd/mm/yyyy" and displays
it. This script can be easily integrated into any JavaScript environment to dynamically display
today's date.
Quiz:
1.What is JavaScript?
2.Explain internal and external JavaScript.
• https://www.w3schools.com/JSREF/jsref_obj_date.asp
1.Gooogle

•••
AIM 2 : Develop simple calculator for addition, subtraction, multiplication and

division operation using java script.
Date:
Relevant CO: 2
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
Figure 1 Document Object Model
DOM Examples
Example 1: following example changes the content of <p> element
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>

•••
Here getElementById is a method, while innerHTML is a property.
Example 2: Validate Numeric Input
<!DOCTYPE html>
<html>
<body>
<h2>Number Validation</h2>
<p>Enter a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Implementation:
Develop simple calculator for addition, subtraction, multiplication and division operation using java
script.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Simple Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<label for="num1">Enter first number:</label>

•••
<input type="number" id="num1"><br><br>
<label for="operator">Select operation:</label>

<select id="operator">
<option value="add">Addition (+)</option>
<option value="subtract">Subtraction (-)</option>
<option value="multiply">Multiplication (*)</option>
<option value="divide">Division (/)</option>
</select><br><br>
<label for="num2">Enter second number:</label>

<input type="number" id="num2"><br><br>
<button onclick="calculate()">Calculate</button><br><br>
<p id="result"></p>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operator = document.getElementById('operator').value;
var result;
switch(operator) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if(num2 !== 0) {
result = num1 / num2;
} else {
result = "Cannot divide by zero";
}
break;

•••
default:
result = "Invalid operator";
}
document.getElementById('result').innerHTML = "Result: " +

result;
}
</script>
</body>
</html>
Output:
Conclusion:
This JavaScript code creates a simple calculator web page with input fields for two numbers and
a dropdown menu to select the operator (addition, subtraction, multiplication, or division).
When the "Calculate" button is clicked, it invokes the calculate() function, which performs the
selected operation on the input numbers and displays the result. This simple calculator
demonstrates basic arithmetic operations using JavaScript.

•••
Quiz:
1.Explain Document Object Model.
https://www.w3schools.com/js/js_htmldom.asp
• https://www.w3schools.com/js/js_validation.asp
1.Gooogle

•••
AIM 3 : 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.4.
Date:
Relevant CO: 2
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()
<!DOCTYPE html>
<html>
<head>
<title>Java Script Demo</title>
<script>
function showData()
{
var uname,email;
uname = document.forms["myform"]["username"].value;
email = document.forms["myform"]["email"].value;
alert("you entered name:"+uname+" email:"+email);
}
</script>
</head>
<body>
<form name="myform">
UserName : <input type="text" name="username"/> <br/>
Password : <input type="email" name="email"/> <br/>
<input type="button" value="display" onclick="showData()" />
</form>
</body>
</html>
Implementation:
Write a java script code to combine and display the information in textbox when the button is clicked
use registration page that you created in Practical No.4.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>User Registration Form</title>
<style>
body {
margin: 20px;
}
form {
max-width: 600px;

•••
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
}
h2 {
text-align: center;
color: #4CAF50;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
font-size: 16px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
button {
background-color: #4CAF50;
color: #fff;
padding: 12px 20px;
border: none;

•••
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#display-info {
width: 100%;
padding: 10px;
margin-top: 20px;
border-radius: 4px;
font-size: 16px;
}
</style>
</head>
<body>
<form id="registrationForm" action="#" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" required>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label for="email">Email Id:</label>

<input type="email" id="email" name="email" required>
<label for="mobile">Mobile No.:</label>

<input type="tel" id="mobile" name="mobile" required>

•••
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea>
<label for="state">State:</label>
<select id="state" name="state" required>
<option value="state1" selected>Gujarat</option>
<option value="state2">Uttar Pradesh</option>
<option value="state3">Jammu and Kashmir</option>
</select>
<label for="education">Education:</label>
<input type="text" id="education" name="education" required>
<label for="image">Image Upload:</label>

<input type="file" id="image" name="image" accept="image/*">
<button type="button" onclick="displayInfo()">Submit</button>

</form>
<textarea id="display-info" readonly></textarea>
<script>
function displayInfo() {
var name = document.getElementById('name').value;
var dob = document.getElementById('dob').value;
var gender =
document.querySelector('input[name="gender"]:checked').value;
var email = document.getElementById('email').value;
var mobile = document.getElementById('mobile').value;
var address = document.getElementById('address').value;
var state = document.getElementById('state').value;
var education = document.getElementById('education').value;
var info = "Name: " + name + "\n" +

"Date of Birth: " + dob + "\n" +
"Gender: " + gender + "\n" +
"Email Id: " + email + "\n" +
"Mobile No.: " + mobile + "\n" +
"Address: " + address + "\n" +

•••
"State: " + state + "\n" +

"Education: " + education;
document.getElementById('display-info').value = info;
}
</script>
</body>
</html>
Output:
Conclusion:
This JavaScript code retrieves the values from the textboxes for name, email, and phone number
when the button is clicked. It then combines this information into a single string and displays it
in a paragraph element on the web page. This allows users to see the combined information they
entered during registration.
Quiz:
1.Explain event handling with javascript.
•
1.Gooogle

•••
AIM 4 : Use JavaScript to Implement validation in Practical No.4.
Date:
Relevant CO: 2
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.4.
var userInfo = "Name: " + name + "\n";

userInfo += "Date of Birth: " + dob + "\n";
userInfo += "Gender: " + gender.value + "\n";
userInfo += "Email: " + email + "\n";
userInfo += "Mobile: " + mobile + "\n";
userInfo += "Address: " + address + "\n";
userInfo += "State: " + state + "\n";
userInfo += "Education: " + education + "\n";
userInfo += "Image: " + image;
alert(userInfo);
Output:
Just we add require field
Conclusion:
This JavaScript code adds validation to a registration form. It checks if the name, email, and
phone number fields are not empty, and if the email follows a basic pattern. If any of the
validations fail, an alert message is displayed
Quiz:
1.Explain javascript form validation.
1.Gooogle

•••
PRACTICAL SET 3 – PHP

[CO3] Develop the server-side PHP scripts using various features for creating customized web
services.
AIM 1 : Write a PHP program to check if number is prime or not.
Date:
Relevant CO: 3
Objectives:
1. To understand how to write simple php program

2. To understand how to use php conditional and Loops Statement
Theory:
PHP
• PHP is a server scripting language, and a powerful tool for making dynamic and interactive
Web pages.
• PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
• Syntax
<?php
// PHP code goes here
?>
• Example: demonstrate printing Hello World
<!DOCTYPE html>
<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>

•••
• Creating (Declaring) PHP Variables
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
• PHP Conditional Statements
Statement Syntax
PHP - The if Statement

if (condition) {
code to be executed if
condition is true;
}
PHP - The if...else Statement

if (condition) {
condition is true;
} else {
condition is false;
}
PHP - The if...elseif...else Statement

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

•••
• PHP Loop Statements
Statement Syntax
The PHP while Loop

while (condition is true) {
code to be executed;
}
The PHP do...while Loop

do {
} 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) {
}
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;
}
$number = 23;
if (isPrime($number)) {
echo "<p>$number is a prime number.</p>";
} else {
echo "<p>$number is not a prime number.</p>";
}
?>
Output:
Conclusion:
This PHP program checks if a given number is prime or not. It first retrieves the number from
the form submission using the POST method. Then, it iterates through numbers from 2 to the
square root of the given number to check if it has any divisors other than 1 and itself. If it finds
any divisor, it sets the variable $isPrime to false. Finally, it displays the result on the web page
whether the number is prime or not. This program effectively demonstrates how to implement
a prime number checker using PHP

•••
Quiz:
1.What is PHP? Explain PHP Syntax.
2.Explain foreach Loop in PHP.
• https://www.w3schools.com/php/php_looping.asp
1.Gooogle

•••

AIM 2: Write a PHP program to print following patterns.
1 1
ab 01
234 101
cdef 0101
56789 10101
Date:
Relevant CO: 3
Objectives:

Theory:
Generally, the pattern program is not helpful in the actual programming scenario, but we can learn
how to use nested loops by practicing this type of program.
It gives us deep idea about how to interact with one or more loops and how to iterate it.
Implementation:
<?php
$n = 6;
for($i = 0; $i < $n; $i++) {

for ($j = 0; $j <= $i; $j++) {
echo (($i*5 + $j ) % 2 != 0) ? "0 " : "1 ";
}
echo "\n"; // Use newline character instead of <br>
}
echo "\n";
echo "\n";
$nums = 1;

•••
$chars= 'a';
for($i = 0; $i < $n; $i++) {
for ($j = 0; $j <= $i; $j++) {
if ($i%2 != 0) {
echo $chars++;
} else{
echo $nums++;
}
}
echo "\n"; // Use newline character instead of <br>
}
?>
Output:
Conclusion:
we have successfully implemented a pattern generator that creates a specific pattern based on
user input. The program takes input parameters such as the size of the pattern and the
characters used to form the pattern

•••
Quiz:
1.Gooogle

•••

AIM 3: Write PHP script to demonstrate use of Math functions. abs () & round(),
ceil() & floor(), min() & max(), pow() & sqrt().
Date:
Relevant CO: 3
Objectives:

Theory:
abs() : This function takes negative value as input and returns the absolute (positive) value of a
integer or float number
round() : This function takes numeric value as argument and returns the next highest integer value
by rounding up value if necessary.
ceil() : This function takes numeric value as argument and returns the next highest integer value by
rounding up value if necessary
floor() : This function takes numeric value as argument and returns the next lowest integer value (as
float) by rounding down value if necessary.
The max() function returns the highest value in an array, or the highest value of several specified
values.
The min() function returns the lowest value in an array, or the lowest value of several specified values.
The pow() function returns x raised to the power of y
The sqrt() function returns the square root of a number.
Implementation:
<?php
$number1 = -10;
$absValue = abs($number1);
echo "Absolute value of $number1 is: $absValue\n";
echo "\n";
$number2 = 3.75;
$roundedValue = round($number2);
•••
echo "Rounded value of $number2 is: $roundedValue\n";

echo "\n";
$number3 = 4.2;
$ceiledValue = ceil($number3);
echo "Ceiled value of $number3 is: $ceiledValue\n";
echo "\n";
$number4 = 4.8;
$flooredValue = floor($number4);
echo "Floored value of $number4 is: $flooredValue\n";
echo "\n";
$minValue = min(10, 20, 30, 40, 50);

echo "Minimum value is: $minValue\n";
echo "\n";
$maxValue = max(10, 20, 30, 40, 50);

echo "Maximum value is: $maxValue\n";
echo "\n";
$base = 2;
$exponent = 3;
$poweredValue = pow($base, $exponent);
echo "$base raised to the power of $exponent is: $poweredValue\n";
echo "\n";
$number5 = 25;
$sqrtValue = sqrt($number5);
echo "Square root of $number5 is: $sqrtValue\n";
echo "\n";
?>
Output:

•••
Absolute value of -10 is: 10
Rounded value of 3.75 is: 4
Ceiled value of 4.2 is: 5
Floored value of 4.8 is: 4
Minimum value is: 10
Maximum value is: 50
2 raised to the power of 3 is: 8
Square root of 25 is: 5
[Execution complete with exit code 0]
Conclusion:
This PHP script demonstrates the use of various math functions:
abs(): Calculates the absolute value of a number.

round(): Rounds a float to the nearest integer.
ceil(): Rounds fractions up to the nearest whole number.
floor(): Rounds fractions down to the nearest whole number.
min(): Finds the lowest value in a list of arguments.
max(): Finds the highest value in a list of arguments.
pow(): Raises a number to a power.
sqrt(): Calculates the square root of a number.

•••
Quiz:
1.Gooogle

•••
PRACTICAL SET 4 – PHP & MYSQL

[CO4] Write the server side scripts for designing web-based services with database
connectivity.
AIM 1 : Use Registration Form from practical number 4 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:
Relevant CO: 4
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’ );
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 );
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.
Code:
CREATE DATABASE IF NOT EXISTS registration;
USE registration;
CREATE TABLE IF NOT EXISTS users (

id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
password VARCHAR(100) NOT NULL
);
<!DOCTYPE html>
<html>

•••
<head>
<title>User Registration</title>
</head>
<body>
<form action="submit.php" method="post">
<label>Name:</label>
<input type="text" name="name" required><br><br>
<label>Email:</label>
<input type="email" name="email" required><br><br>
<label>Password:</label>
<input type="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
<?php
// Establish database connection
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "registration";
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Retrieve form data

$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
// Insert data into database

$sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email',
'$password')";
if ($conn->query($sql) === TRUE) {

echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

•••
$conn->close();
?>
<?php
// Establish database connection
$username = "your_username";
$password = "your_password";
$dbname = "registration";
// Check connection
}
// Retrieve all data from the database

$sql = "SELECT * FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<h2>Registered Users</h2>";
echo "<table border='1'>";
echo
"<tr><th>ID</th><th>Name</th><th>Email</th><th>Password</th><th>Action</th></tr>";
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["id"] . "</td>";
echo "<td>" . $row["name"] . "</td>";
echo "<td>" . $row["email"] . "</td>";
echo "<td>" . $row["password"] . "</td>";
echo "<td><a href='update.php?id=" . $row["id"] . "'>Update</a> | <a
href='delete.php?id=" . $row["id"] . "'>Delete</a></td>";
echo "</tr>";
}
echo "</table>";
} else {
echo "No records found";
}
$conn->close();
?>

•••
Output:
Conclusion:
Database Setup: A MySQL database named registration was created with a table named users
to store user registration details, including id, name, email, and password.
Registration Form (index.php): Users can input their information through a simple HTML
form. Upon submission, the data is sent to submit.php for processing.
Data Submission (submit.php): submit.php receives the form data, establishes a connection to
the MySQL database, inserts the user's information into the users table, and provides feedback
on the registration status.
Viewing Registered Users (manage.php): manage.php displays all registered users in an HTML
table format. It retrieves user data from the database and dynamically generates table rows,
allowing users to view their registration details.
Update and Delete Functionality: While not fully implemented in the provided code, the system
is designed to allow users to update and delete their registration information. Additional PHP
files (update.php and delete.php) would handle these functionalities by modifying or removing .

•••
Quiz:
1.What is MySql?
2.Write a sample code to demonstrate php mysql connectivity.
http://www.php.net/manual/en/ref.mysql.php

•••
PRACTICAL SET 4 – PHP & MYSQL

AIM 2: Write a PHP script for user authentication using PHP-MYSQL. Use
session for storing username.
Date:
Relevant CO: 4
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:

•••
<?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:
<?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():
<?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.
Code:
<?php
// Start the session
session_start();
// Database connection parameters

$host = 'localhost';
$username = 'your_username';
$password = 'your_password';
$database = 'your_database';
// Connect to the database

$conn = new mysqli($host, $username, $password, $database);
// Check connection
}
// Function to sanitize user input

function sanitize($input) {
global $conn;
return mysqli_real_escape_string($conn, $input);
}
// Function to authenticate user

function authenticateUser($username, $password) {
global $conn;
// Sanitize inputs
$username = sanitize($username);
$password = sanitize($password);
// Query to check if user exists

$sql = "SELECT * FROM users WHERE username='$username' AND
password='$password'";
if ($result->num_rows == 1) {
// User exists, set session variable

•••
$_SESSION['username'] = $username;
return true;
} else {
// User doesn't exist or password is incorrect
return false;
}
}
// Check if form is submitted

if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get username and password from the form
$username = $_POST['username'];
$password = $_POST['password'];
// Authenticate user
if (authenticateUser($username, $password)) {
// Redirect to a protected page or homepage
header("Location: welcome.php");
exit();
} else {
// Authentication failed, display error message
$error = "Invalid username or password";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);
?>">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
<?php if (isset($error)) echo "<p>$error</p>"; ?>
</body>
</html>
<?php
// Close the connection

•••
$conn->close();
?>
Output:
Conclusion:
Database Setup: Ensure you have a MySQL database set up with a table named users containing
at least username and password fields.
Connection to Database: Establish a connection to the MySQL database using PHP's MySQLi
extension.
User Authentication Function: Create a function to authenticate users by querying the database
with the provided username and password. If a matching record is found, set a session variable
to store the username.
Form Submission Handling: Check if the login form has been submitted. If so, extract the
username and password from the form and call the authentication function.
Session Handling: Start a session at the beginning of the script. After successful authentication,
store the username in a session variable for later use.
Redirecting: Upon successful authentication, redirect the user to a welcome page (welcome.php)
using the header() function.

•••
Welcome Page: Create a welcome.php page to greet authenticated users. Ensure it starts the
session and checks if the user is logged in before displaying any content.
Error Handling: Display an error message if authentication fails, informing the user that their
credentials are invalid.
Security Considerations: Sanitize user input to prevent SQL injection attacks. Store passwords
securely using techniques like hashing and salting.
Quiz:
1.What is PHP Session?
2. How to destroy PHP Session?
• https://www.w3schools.com/php/php_sessions.asp

•••
PRACTICAL SET 5 – AJAX & JQuery
[CO5] Develop a web application using advanced web programming features including AJAX
and JQuery using concepts of Web API.
AIM 1 : Using AJAX Create visual search feature to search using name for
practical number 15 which list name, mobile number and email id of matching
users.
Date:
Relevant CO: 5
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
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)
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
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

•••
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.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Visual Search</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Visual Search</h1>
<input type="text" id="searchInput" placeholder="Search by name">
<div id="searchResults"></div>
<script>
$(document).ready(function(){
$('#searchInput').on('input', function(){
var query = $(this).val();
if(query.length > 0){
$.ajax({
url: 'search.php',
method: 'POST',
data: {query: query},
success: function(response){
$('#searchResults').html(response);
}
});
} else {
$('#searchResults').empty();
}
});
});
</script>
</body>
</html>

•••
<?php
if(isset($_POST['query'])) {
$search = $_POST['query'];
// Perform a database query to retrieve matching results

$sql = "SELECT name, mobile_number, email FROM your_table WHERE name LIKE
'%$search%'";
$result = mysqli_query($connection, $sql);
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<p>Name: " . $row['name'] . "<br>Mobile: " . $row['mobile_number']
. "<br>Email: " . $row['email'] . "</p>";
}
} else {
echo "No results found";
}
}
?>
Conclusion:
User Interface: The HTML interface includes an input field where users can enter search queries
and a section to display the search results.
AJAX Functionality: JavaScript code is used to handle user input and send asynchronous
requests to the server without reloading the page.
Server-side Processing: PHP script (search.php) handles the incoming requests, performs a
database query to retrieve matching results based on the provided search query, and sends the
results back to the client-side JavaScript.
Dynamic Display: The search results are dynamically displayed on the web page without
requiring a page refresh, providing a seamless user experience.
Customization: The implementation can be customized further based on specific requirements,

such as adding pagination, refining search criteria, or enhancing the visual presentation of the
results.
Quiz:
1.What is Ajax?

•••
2. Explain XMLHttpRequest.
• https://www.w3schools.com/xml/ajax_intro.asp

•••

AIM 2: Create a REST API using php.
Date:
Relevant CO: 5
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 develop an online transaction payment REST API for our
example. I will try to keep it as simple as possible so i will use GET request to retrieve information.
1. Create REST API in PHP
2. Consume REST API in PHP

•••
1. Create REST API in PHP

To create a REST API, follow these steps:
A. Create a Database and Table with Dummy Data
B. Create a Database Connection
C. Create a REST API File
A. Create a Database and Table with Dummy Data
To create database run the following query.
CREATE DATABASE allphptricks;
To create a table run the following query. Note: I have already attached the SQL file of this table
with dummy data, just download the complete zip file of this tutorial.
CREATE TABLE IF NOT EXISTS `transactions` (

ì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'];
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 âpi/([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.
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.
Code:
<?php
$username = "username";
$password = "password";
$dbname = "your_database";
}
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$method = $_SERVER['REQUEST_METHOD'];
$request = explode('/', trim($_SERVER['PATH_INFO'],'/'));
$resource = array_shift($request);
$id = array_shift($request);
switch ($method) {
case 'GET':
if ($id !== null) {
$sql = "SELECT * FROM $resource WHERE id = $id";

} else {
$sql = "SELECT * FROM $resource";
}
$data = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
echo json_encode($data);
break;

•••
case 'POST':
$data = json_decode(file_get_contents("php://input"), true);

$sql = "INSERT INTO $resource (name, email) VALUES ('".$data['name']."',
'".$data['email']."')";
$conn->query($sql);
echo "Resource created successfully";
break;
case 'PUT':
$data = json_decode(file_get_contents("php://input"), true);
$sql = "UPDATE $resource SET name='".$data['name']."',
email='".$data['email']."' WHERE id=$id";
$conn->query($sql);
echo "Resource updated successfully";
break;
case 'DELETE':
$sql = "DELETE FROM $resource WHERE id=$id";

$conn->query($sql);
echo "Resource deleted successfully";
break;
}
$conn->close();
?>
Conclusion:
Define Endpoints: Decide on the endpoints and the actions they perform.
Handle HTTP Methods: Use PHP to handle different HTTP methods and perform
corresponding actions.
Database Interaction: If necessary, interact with a database to fetch or manipulate data.
Response Handling: Return appropriate responses with proper status codes and data.

•••
Quiz:
1.What is REST API?
• https://www.allphptricks.com/create-and-consume-simple-rest-api-in-php/)

•••

AIM 3: Create an Image slider using jQuery.
Date:
Relevant CO: 5
Objectives:
1. To understand how JQuery Works.

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

• Include jQuery from a CDN, like Google
<head>
<script src="jquery-3.6.4.min.js"></script>
</head>
OR
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
</head>

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

•••
$("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:
$("#test")
When a user clicks on a button, the element with id="test" will be hidden:
$("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()
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.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider">
<div class="slides">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="prev">❮</div>
<div class="next">❯</div>
</div>

•••
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
.slider {
position: relative;
max-width: 800px;
margin: auto;
overflow: hidden;
}
.slides {
display: flex;
}
.slides img {
width: 100%;
transition: transform 0.5s ease;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

•••
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = $(".slides img");
slides.hide();
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides.eq(slideIndex - 1).show();
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
$(".prev").click(function() {
slideIndex--;
showSlides();
});
$(".next").click(function() {
slideIndex++;
showSlides();
});
});
Conclusion:
HTML Structure: The HTML markup defines the structure of the slider, including the container
for the slides and navigation buttons for moving between images.
CSS Styling: CSS is used to style the slider components, including the layout, positioning, and
appearance of the slides and navigation buttons.
JavaScript (jQuery) Functionality: jQuery is utilized to handle the slideshow functionality,

including transitioning between images at regular intervals and responding to user clicks on the
navigation buttons to move forwards or backwards in the slideshow.
Dynamic Display: The image slider dynamically updates the display to transition smoothly
between images, creating a visually engaging experience for users.

•••
Customization: The example provided can be customized further based on specific design
requirements, such as adjusting transition effects, adding captions to images, or incorporating
additional navigation controls.
Quiz:
1.What is jquery?
2. Javascript Vs. Jquery
• https://www.w3schools.com/jquery/jquery_intro.asp
• )

•••

AIM 4: 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:
Relevant CO: 5
Objectives:
1. To understand use of COOKIES.

Theory:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color Preferences</title>
<style>
body {
}
.container {
width: 50%;
margin: 50px auto;
text-align: center;
}
#colorInput {
width: 200px;
padding: 10px;
}
#saveBtn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;

•••
cursor: pointer;
}
</style>
</head>
<body>
<form id="colorForm">
<input type="text" id="colorInput" placeholder="Enter color name">
<button type="button" id="saveBtn">SAVE</button>
</form>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Function to set a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// Function to get a cookie

function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,
c.length);
}
return null;
}
// Function to set background color from cookie

function setBackgroundColorFromCookie() {
var color = getCookie("backgroundColor");
if (color) {
document.body.style.backgroundColor = color;
document.getElementById("colorInput").value = color;
}
}
// Set background color from cookie on page load

•••
setBackgroundColorFromCookie();
// Save button click event

document.getElementById("saveBtn").addEventListener("click", function() {
var color = document.getElementById("colorInput").value;
document.body.style.backgroundColor = color;
setCookie("backgroundColor", color, 30); // Save color in cookie for 30 days
});
});
</script>
</body>
</html>
Conclusion:
In conclusion, the provided HTML code creates a simple form with a text input field and a button
labeled "SAVE". When the user enters a color name in the text box and clicks the button, the
entered color value is saved in a cookie named "backgroundColor". Upon subsequent visits to
the page, the background color is set to the value saved in the cookie, providing a personalized
experience for the user. This functionality enhances user interaction by allowing them to
customize the background color according to their preferences across multiple visits to the page.
Quiz:
1.What is cookie?
2.What is the life of cookie?
• https://www.w3schools.com

Web Programming Gtu Filinalpractical Practical File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming Gtu Filinalpractical Practical File

Uploaded by

Copyright:

Available Formats

L. D.

A Laboratory Manual for

L. D. College of Engineering, Ahmedabad

This is to certify that Mr./Ms. Dodiya Dhrupalkumar Jesingbhai

Name and Sign of Faculty member

C.E., L. D. College of Engineering, Ahmedabad-15 1

L. D. College of Engineering, Ahmedabad

C.E., L. D. College of Engineering, Ahmedabad-15 2

navigation Links corresponding

C.E., L. D. College of Engineering, Ahmedabad-15 3

round (), ceil() & floor (), min ()

C.E., L. D. College of Engineering, Ahmedabad-15 4

L. D. College of Engineering, Ahmedabad

Subject Name: Web Programming Subject Code: 3160713

RB1 Regularity 05 High (>70%) Moderate (40-70%) Poor (0-40%)

Efficient Incomplete Solution

C.E., L. D. College of Engineering, Ahmedabad-15 5

L. D. College of Engineering, Ahmedabad

Computer Engineering Department

Create your class time table using table tag, 19/1/2024

C.E., L. D. College of Engineering, Ahmedabad-15 6

Use External, Internal, Inline CSS to format College 1/3/2024

C.E., L. D. College of Engineering, Ahmedabad-15 7

GUJARAT TECHNOLOGICAL UNIVERSITY, AHMEDABAD,

Degree Programmes in which this course is offered Semester in which offered

Computer Engineering 6th Semester

After learning the course, the students should be able to:

C.E., L. D. College of Engineering, Ahmedabad-15 8

4. TEACHING AND EXAMINATION SCHEME

5. SUGGESTED LEARNING RESOURCES

B. LIST OF E-LEARNING WEBSITES

C.E., L. D. College of Engineering, Ahmedabad-15 9

PRACTICAL SET 1 – HTML & CSS

Competency and Practical Skills:

1. To understand HTML Page Structure.

- HTML stands for Hypertext Markup Language

- HTML Document consists of three main parts

C.E., L. D. College of Engineering, Ahmedabad-15 10

How to save and check output

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

HTML List Tag

- Unordered HTML List

C.E., L. D. College of Engineering, Ahmedabad-15 11

- Ordered HTML List

- HTML Description Lists

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

C.E., L. D. College of Engineering, Ahmedabad-15 12

<p>Mobile No.: 9510433710</p>

C.E., L. D. College of Engineering, Ahmedabad-15 13

1. Explain HTML Document Structure.

C.E., L. D. College of Engineering, Ahmedabad-15 14

➢ Headings (<h1> to <h6>): Used to define different levels of headings.

C.E., L. D. College of Engineering, Ahmedabad-15 15

2.Css web,HTML web, JAVA web

Signature of Faculty: Grade:

PRACTICAL SET 1 – HTML & CSS

Competency and Practical Skills:

1. To study HTML table tag

HTML Table Tag

C.E., L. D. College of Engineering, Ahmedabad-15 17

C.E., L. D. College of Engineering, Ahmedabad-15 18

C.E., L. D. College of Engineering, Ahmedabad-15 19

C.E., L. D. College of Engineering, Ahmedabad-15 20