Web Programming (3160713) 220220131122

A Laboratory Manual for

Web Programming
(3160713)

B.E. Semester 6th

(Computer Science and Engineering)

Directorate of Technical Education,

Gandhinagar, Gujarat
Page1
Web Programming (3160713) 220220131122

Government Engineering college, Patan

Certificate

This is to certify that Mr.Vaibhav Singh Enrollment No. 220220131122 Of

B.E. Semester 6th from Computer Science and Engineering of this Institute
(GTU Code: 022) has satisfactorily completed the Practical work for the
subject Web Programming (3160713) for the academic year 2024-25.

Place: __________________
Date: __________________

Name and Sign of Faculty member

Head of the Department

Page2
Web Programming (3160713) 220220131122

Preface

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

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

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

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

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

Practical – Course Outcome matrix

Course Outcomes (COs):

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.
Sr. CO
Objective(s) of Experiment CO2 CO3 CO4 CO5
No. 1
Create your resume using HTML (Suggested sections of
resume are Personal Information, Educational
1. Information, Professional Skills, Experience, √
Achievements, Hobbies), Experiment with text, colors,
link and lists.
Create your class time table using table tag, experiment
2. with rowspan, colspan, cellspacing and cellpadding √
attributes.
Design static web pages for your college containing a
3. description of the courses, departments, faculties, library √
etc. Provide links for navigation among pages.
Create User Registration Form in HTML (Suggested to
use fields like Name, Date of Birth, Gender, Email Id,
4. Mobile No.,Address, State , Education , Image Upload √
etc) using textbox, textarea, checkbox, radio button,
select box, button, file upload etc.
Create two web pages, one contains audios and other
5. page contains videos (using HTML5 audio and video √
tags). Also provide link for navigation between pages.
Create a web page using frame. Divide the page into two
parts with Navigation links on left hand side of page
(width=20%) and content page on right hand side of page
6. √
(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 attractive
7. background color, text color, an Image, font etc. (use √
internal CSS).
Page2
Web Programming (3160713) 220220131122

Use Inline CSS to format your resume that you created

8. √
in practical no 01.
Use External, Internal, Inline CSS to format College Web
9. √
site that you created in Practical No.03

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

Develop simple calculator for addition, subtraction,

11.
multiplication and division operation using java script. √
Write a java script code to combine and display the
12. 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 √

13.
No.4.

Write a PHP program to check if number is prime or

14. √
not.
Use Registration Form from practical number 4 to store
user registration details in MySql database. On
15. 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-
16. √
MYSQL. Use session for storing username.
Using AJAX Create visual search feature to search using
17. name for practical number 15 which list name, mobile √
number and email id of matching users.

18. Create a REST API using php. √

19. Create an Image slider using jQuery. √

20 Cookie Example √
Page3
Web Programming (3160713) 220220131122

Industry Relevant Skills

The following industry relevant competency are expected to be developed in the student by
undertaking the practical work of this laboratory.
1. HTML/CSS Skills: HTML is used extensively by web developers to build web pages.
CSS is used to implement different fonts, colors and layouts in the design of a website.
2. Javascript Skills: Java Script is used for creating interactive web pages to improve the
user experience.
3. PHP/MySQLSkills:PHP/MySQL is used extensively by web developers to create
fully functional dynamic web applications.
4. REST API, AJAX, JQuery Skills: RESTAPI,AJAX,JQuery are advanced
asynchronous web communication mechanisms and used by web developers for
building highly interactive webpages.

Guidelines for Faculty members

1. Teacher should provide the guideline with demonstration of practical to the students
with all features.
2. Teacher shall explain basic concepts/theory related to the experiment to
the students before starting of each practical
3. Involve all the students in performance of each experiment.
4. Teacher is expected to share the skills and competencies to be developed in the
students and ensure that the respective skills and competencies are developed in the
students after the completion of the experimentation.
5. Teachers should give opportunity to students for hands-on experience after the
demonstration.
6. Teacher may provide additional knowledge and skills to the students even though not
covered in the manual but are expected from the students by concerned industry.
7. Give practical assignment and assess the performance of students based on task
assigned to check whether it is as per the instructions or not.
8. Teacher is expected to refer complete curriculum of the course and follow the
guidelines for implementation.

Instructions for Students

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

6. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart from
Web Programming (3160713) 220220131122

those included in scope of manual.

7. Student shall refer technical magazines and data books.
8. Student should develop a habit of submitting the experimentation work as per the schedule
and s/he should be well preparedfor the same.

Sample Rubrics for Practical Evaluation

Understanding of Implementation of Presentation and report Total

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

Excellent Moderate level Problem not

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

Index
(Progressive Assessment Sheet)

Sr. No. Objective(s) of Experiment Page Date of Date of Assessme Sign. of Remar
No. perform submiss nt Teacher ks
ance ion Marks with date
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,
2. experiment with rowspan, colspan, cellspacing
and cellpadding attributes.
Design static web pages for your college
containing a description of the courses,
3.
departments, faculties, library etc. Provide
links for navigation among pages.
Create User Registration Form in HTML
(Suggested to use fields like Name, Date of
Birth, Gender, Email 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 contains audios and
other page contains videos (using HTML5
5.
audio and video tags). Also provide link for
navigation between pages.
Create a web page using frame. Divide the
page into two parts with Navigation links on
left hand side of page (width=20%) and
6. 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 town with an
7. attractive background color, text color, an
Image, font etc. (use internal CSS).
Use Inline CSS to format your resume that you
8.
created in practical no 01.
Use External, Internal, Inline CSS to format
Page6

9.
College Web site that you created in Prac. No.03
Web Programming (3160713) 220220131122

10. Develop a java script to display today’s date.

Develop simple calculator for addition,

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

Use JavaScript to Implement validation in

13.
Practical No.4.

Write a PHP program to check if number is

14.
prime or not.
Use Registration Form from practical number
4 to store user registration details in MySql
database. On submission next page displays all
15.
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
16. using PHP-MYSQL. Use session for storing
username.
Using AJAX Create visual search feature to
search using name for practical number 15
17.
which list name, mobile number and email id
of matching users.

18. Create a REST API using php.

19. Create an Image slider using jQuery.

20 Cookie Example
Total
Page7
Web Programming (3160713) 220220131122

Experiment No: 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:

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
o <head> section
o <body> section

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

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

- <head> section is used to specify title of the page using <title> tag. It is also used for adding

88
Web Programming (3160713) 220220131122

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
- ^text- to make the text Superscript text
- <h1> to <h6> tags – for making Headings
- Font Color (<font color=” red”>Hello</font>) – to change font color
- Font Size (<font size=”10px”>Hello</font>) – to change font size

HTML List Tag

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

- Unordered HTML List

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

<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>
Page9

99
Web Programming (3160713) 220220131122

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

Page10

1010
Web Programming (3160713) 220220131122

Page11

1111
Web Programming (3160713) 220220131122

Page12

1212
Web Programming (3160713) 220220131122

Page13

1313
Web Programming (3160713) 220220131122

Quiz:

1. Explain HTML Document Structure.

 An HTML document begins with <!DOCTYPE html> to define the HTML version. The
root element <html> wraps the entire content. Inside it, the <head> section contains
metadata like the page title, character encoding, CSS links, and other important settings that
are not displayed on the page. The <body> section contains all the visible content, such as
headings, paragraphs, images, links, and other elements that users see and interact with in
the browser. This structure ensures that web browsers can correctly display and interpret the
content and layout of the webpage.
2. List and explain any five HTML formatting tags.
 HTML formatting tags are used to style and emphasize specific parts of text on a webpage.
For example, the <b> tag makes text bold, while <i> displays text in italics. The <u> tag
underlines the text. The <strong> tag is used to highlight important content and also makes
the text bold with semantic meaning. Similarly, <em> is used for emphasized content and
renders text in italics with added importance. These tags help enhance the readability and
meaning of web content for users and assistive technologies.

3. Explain ordered and unordered list with example.

 HTML lists are used to display items in a structured format. An ordered list (<ol>) shows
items in a numbered sequence, ideal for steps or rankings. Each item is defined using the
<li> (list item) tag. For example: <ol>
<li>Step One</li>
<li>Step Two</li>
</ol>
An unordered list (<ul>) displays items with bullet points, suitable for general lists.
Example: <ul>
<li>Milk</li>
<li>Bread</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
Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page14

1414
Web Programming (3160713) 220220131122

Experiment No: 2

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

Date:

Competency and PracticalSkills:

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.
- rowspanattriute is used to make a call span more than one row.
- cellpadding represents the distance between cell borders and the content within a cell.
- The cellspacing attribute defines space between table cells.
- Example
o Below code is for arranging car details in tabular format.
o You may stude table tag and output as below.
Page15

1515
Web Programming (3160713) 220220131122

Code Output

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

Implementation:

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

Page16

1616
Web Programming (3160713) 220220131122

Page17

1717
Web Programming (3160713) 220220131122

Page18

1818
Web Programming (3160713) 220220131122

Quiz:

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

 The rowspan and colspan attributes in the HTML <table> tag are used to merge cells in a
table.
 rowspan: Merges two or more rows vertically into one cell.
Example: <td rowspan="2">Data</td> merges the cell with the one below it.
 colspan: Merges two or more columns horizontally into one cell.
Example: <td colspan="3">Header</td> spans the cell across three columns.

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

 In HTML tables, the <th> tag is used to define header cells, while the <td> tag defines data
cells. Header cells (<th>) are typically displayed in bold and centered, providing titles or
labels for rows or columns. Data cells (<td>) contain the actual content of the table and are
displayed with normal styling. Using <th> helps improve table structure and accessibility,
as screen readers recognize header cells and can provide better navigation for users. Both
tags must be used within <tr> (table row) tags.

Suggested Reference:

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

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page19

1919
Web Programming (3160713) 220220131122

Experiment No: 3

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

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 Taget Attribute
o By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
o The target attribute specifies where to open the linked document.
o The target attribute can have one of the following values:
▪ _self - Default. Opens the document in the same window/tab as it was clicked
▪ _blank - Opens the document in a new window or tab
▪ _parent - Opens the document in the parent frame
▪ _top - Opens the document in the full body of the window
Implementation:
Design static web pages for your college containing a description of the courses, departments,
Page20

faculties, library etc. Provide links for navigation among pages.

2020
Web Programming (3160713) 220220131122

Page21

2121
Web Programming (3160713) 220220131122

Page22

2222
Web Programming (3160713) 220220131122

Page23

2323
Web Programming (3160713) 220220131122

Page24

2424
Web Programming (3160713) 220220131122

Quiz:

1. Explain HTML Link target attribute.

 The HTML target attribute is used with the <a> (anchor) tag to specify where to open the
linked document. Common values include _self (default, opens in the same tab), _blank
(opens in a new tab or window), _parent (opens in the parent frame), and _top (opens in the
full body of the window). For example, <a href="page.html" target="_blank">Visit
Page</a> will open the link in a new tab. The target attribute improves user experience by
controlling how and where links open.

2. How to use image as a link ?

 To use an image as a link in HTML, wrap the <img> tag inside an <a> tag. When users
click the image, they are redirected to the specified link. For example:
<a href="https://example.com">
<img src="image.jpg" alt="Example Image" width="200">
</a>
In this example, clicking the image will take the user to example.com. This technique is
useful for creating clickable banners, icons, or image-based navigation elements on a
website.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page25

2525
Web Programming (3160713) 220220131122

Experiment No: 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:

Competency and PracticalSkills:

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

Page26

2626
Web Programming (3160713) 220220131122

- 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 "password" />
from user.

Text input control Teaxtarea is used to accept

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

Enter description here...

</textarea>
Page27

2727
Web Programming (3160713) 220220131122

Checkbox Control Checkboxes are used <input type = "checkbox" name =

when more than one "maths" value = “maths"> Maths
option is required to be
selected. <input type = "checkbox" name =
"physics" value = “physics">name =
"password" />

Radio Button Radio buttons are used

Controls when out of many options, <input type = "radio" name =
just one option is required "subject" 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 =
controls to their initial
"reset" value = "Reset" />
values.
Page28

2828
Web Programming (3160713) 220220131122

Button Control This creates a button that <input type = "button" name =
is used to trigger a client- "ok" 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.

Page29

2929
Web Programming (3160713) 220220131122

Page30

3030
Web Programming (3160713) 220220131122

Page31

3131
Web Programming (3160713) 220220131122

Page32

3232
Web Programming (3160713) 220220131122

Quiz:

1. Explain form tag with its attributes.

 The <form> tag in HTML is used to collect user input and submit it to a server. It acts
as a container for input elements like text boxes, radio buttons, checkboxes, and
buttons.
Common Attributes of <form>:
1. action – Specifies the URL where form data is sent.
Example: action="submit.php"
2. method – Defines the HTTP method (GET or POST) used to send data.
Example: method="post"
3. target – Determines where to display the response (_self, _blank, etc.).
Example: target="_blank"
4. enctype – Used with POST to define encoding type (important for file uploads).
Example: enctype="multipart/form-data"
5. autocomplete – Enables or disables auto-complete.
Example: autocomplete="off"

2. Differentiate between text input and password input controls.

 In HTML, both text and password input controls are used to collect user data through
forms. The <input type="text"> is used for general input like names or email, and it
displays the entered text clearly. On the other hand, <input type="password"> is used
for entering sensitive information like passwords. It hides the characters by displaying
dots or asterisks for privacy. While both accept user input, the password field adds a
layer of visual security, making it ideal for login forms and confidential data entry.

3. Explain various types of buttons available in HTML.

 HTML provides several types of buttons used for different purposes in web forms and
interfaces. The most common types include:
1. <button type="submit"> – Submits the form data to the server.
Example: <button type="submit">Submit</button>
2. <button type="reset"> – Resets all form fields to their default values.
Example: <button type="reset">Reset</button>
3. <button type="button"> – Performs custom actions when used with JavaScript.
Example: <button type="button" onclick="alert('Hello')">Click Me</button>
4. <input type="submit"> – Another way to submit form data.
Example: <input type="submit" value="Send">
5. <input type="button"> – Creates a clickable button for custom actions.
Example: <input type="button" value="OK" onclick="doSomething()">
Page33

3333
Web Programming (3160713) 220220131122

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page34

3434
Web Programming (3160713) 220220131122

Experiment No: 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:

Competency and PracticalSkills:

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">
Your browser does not support the video tag.
</video>

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

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

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

HTML Audio

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

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Page35

Your browser does not support the audio element.

</audio>
3535
Web Programming (3160713) 220220131122

The controlsattribute adds audio controls, like play, pause, and volume.

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

Implementation:

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

Page36

3636
Web Programming (3160713) 220220131122

Page37

3737
Web Programming (3160713) 220220131122

Page38

3838
Web Programming (3160713) 220220131122

Quiz:

1. Explain audio and video tags.

 The <audio> and <video> tags in HTML are used to embed media files into web
pages. The <audio> tag plays sound files like MP3, while the <video> tag plays video
files like MP4. Both support attributes like controls (to show play/pause options),
autoplay, loop, and muted. For example, <audio controls><source
src="song.mp3"></audio> will embed an audio player. Similarly, <video
controls><source src="movie.mp4"></video> adds a video player. These tags allow
users to enjoy multimedia content directly on a webpage without requiring extra
plugins.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page39

3939
Web Programming (3160713) 220220131122

Experiment No: 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:

Competency and PracticalSkills:

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
Page40

4040
Web Programming (3160713) 220220131122

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

4141
Web Programming (3160713) 220220131122

Page42

4242
Web Programming (3160713) 220220131122

Page43

4343
Web Programming (3160713) 220220131122

Quiz:

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

 The <frame> tag was used in HTML to define individual frames in a webpage layout,
typically within a <frameset> element. It is now obsolete in HTML5, replaced by more
modern layout techniques like CSS Grid or Flexbox.
rows and cols Attributes of the <frameset> Tag:
 rows: Specifies the height of each frame in a <frameset>, divided into horizontal sections.
It can take values in pixels or percentages.
 cols: Specifies the width of each frame, divided into vertical sections. Like rows, it can be
in pixels or percentages.
Example using rows:
<frameset rows="50%, 50%">
<frame src="top.html">
<frame src="bottom.html">
</frameset>
Example using cols:
<frameset cols="30%, 70%">
<frame src="left.html">
<frame src="right.html">
</frameset>

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

 The <iframe> tag is used to embed an inline frame in a webpage. An inline frame
allows you to embed another HTML document within the current page. It is commonly
used for embedding content like videos, maps, or other websites.
Syntax:
<iframe src="https://example.com" width="600" height="400" frameborder="0">
Your browser does not support iframes.
</iframe>
Attributes:
 src: Specifies the URL of the document to display.
 width: Sets the width of the iframe.
 height: Sets the height of the iframe.
 frameborder: Controls the border around the iframe (0 for no border).

3. Which attribute in frame tag is used to specifies the web page to load into that
frame?
 In HTML, the src attribute of the <frame> tag specifies the URL of the web page to
Page44

load into that frame. It is used within the <frameset> element to load different HTML
documents into separate sections of the page. For example, <frame src="page.html">
4444
Web Programming (3160713) 220220131122

will load "page.html" into the frame. However, the <frame> and <frameset> tags are
now obsolete in HTML5, and modern web design uses <iframe> or CSS for layout
purposes.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page45

4545
Web Programming (3160713) 220220131122

Experiment No: 7

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

Date:

Competency and PracticalSkills:

Relevant CO: 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.
Page46

4646
Web Programming (3160713) 220220131122

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!
Page47

o To select an element with a specific id, write a hash (#) character, followed by the
id of the element.

4747
Web Programming (3160713) 220220131122

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

- CSS Universal Selector

4848
Web Programming (3160713) 220220131122

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

o selector: pseudo-class {property: value}

4949
Web Programming (3160713) 220220131122

o CSS classes can also be used with pseudo-classes

o selector.class: pseudo-class {property: value}
o Example

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

- Types Of CSS

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

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

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

-CSS Background Color

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

Page50

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

5050
Web Programming (3160713) 220220131122

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

Page51

5151
Web Programming (3160713) 220220131122

Page52

5252
Web Programming (3160713) 220220131122

Page53

5353
Web Programming (3160713) 220220131122

Quiz:

1. Explain the syntax of the CSS.

 The syntax of CSS (Cascading Style Sheets) consists of selectors and declarations. A
selector targets the HTML element you want to style, and a declaration defines the style
rules. A declaration contains property-value pairs enclosed in curly braces {}. The
property is the style attribute (like color, font-size), and the value is the setting for that
property (like red, 16px).

2. What is internal CSS?

 Internal CSS is a method of applying styles directly within an HTML document, inside
the <style> tag, usually placed in the <head> section. It allows you to style the elements
of a specific page without affecting others. Internal CSS is useful for styling individual
pages when external stylesheets are unnecessary. For example:
<head>
<style>
p { color: blue; }
</style>
</head>

3. Explain CSS class and Id selector.

 In CSS, class and ID selectors are used to apply styles to HTML elements but differ in
their usage:
 Class Selector: Targets elements with a specific class. It is denoted by a period (.)
followed by the class name. Multiple elements can share the same class. Example:
.highlight { color: yellow; }
 ID Selector: Targets an element with a specific unique ID. It is denoted by a hash (#)
followed by the ID name. An ID should be unique on a page. Example: #unique-text {
color: red; }
IDs have higher specificity than classes.

Suggested Reference:

● https://www.w3schools.com/css/css_syntax.asp
● https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page54

5454
Web Programming (3160713) 220220131122

Experiment No: 8

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

Date:

Competency and PracticalSkills:

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

5555
Web Programming (3160713) 220220131122

Page56

5656
Web Programming (3160713) 220220131122

Page57

5757
Web Programming (3160713) 220220131122

Quiz:

1. Explain Internal CSS VS Inline CSS.

 Internal CSS and Inline CSS are two ways of applying styles to HTML elements, but
they differ in scope and usage:
 Internal CSS: Styles are defined within the <style> tag in the <head> section of the
HTML document. It affects multiple elements on the page. Example:
<style> p { color: blue; } </style>
Inline CSS: Styles are applied directly to individual HTML elements using the style
attribute. It affects only that specific element. Example:
<p style="color: blue;">This is blue text.</p>

2. CSS stands for Casecading Style Sheets .

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

 The <style> tag is used to define an internal style sheet in HTML. It is placed within
the <head> section of the HTML document. The styles defined inside the <style> tag
apply to elements on the same page. This method is useful when you want to apply
styles to a single HTML page without affecting other pages.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page58

5858
Web Programming (3160713) 220220131122

Experiment No: 9

Use External, Internal, Inline CSS to format College Web site that you created
in Practical No.03

Date:

Competency and PracticalSkills:

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

Page59

5959
Web Programming (3160713) 220220131122

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

Implementation:

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

Page60

6060
Web Programming (3160713) 220220131122

Page61

6161
Web Programming (3160713) 220220131122

Page62

6262
Web Programming (3160713) 220220131122

Quiz:

1. Explain External CSS.

 External CSS refers to an external stylesheet that is linked to an HTML document
using the <link> tag. The CSS rules are defined in a separate .css file, which is then
referenced by multiple HTML pages. This method helps in maintaining consistent
styling across multiple pages, as changes made to the external CSS file automatically
reflect on all linked pages.
2. Compare Internal, Inline and External CSS.
 Internal CSS, Inline CSS, and External CSS differ in where the styles are defined and
their scope:
 Internal CSS is placed within the <style> tag in the <head> section, affecting the
entire page.
 Inline CSS is applied directly to individual elements using the style attribute,
affecting only that specific element.
 External CSS is written in a separate .css file and linked to the HTML using the
<link> tag, allowing styles to be reused across multiple pages.
External CSS is the most efficient for large websites, while Inline and Internal CSS
are used for specific, smaller cases.
3. Which property is used to change the background color?
 The background-color property is used in CSS to change the background color of an
element.
body {
background-color: lightblue;
}

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

 The color property in CSS is used to change the text color of an element.

Example:
p{
color: red;
}

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page63

6363
Web Programming (3160713) 220220131122

Experiment No: 10

Develop a java script to display today’s date.

Date:

Competency and PracticalSkills:

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

▪ JavaScript code are stored in separate external file using the .js extension
6464
Web Programming (3160713) 220220131122

(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:

Develop a java script to display today’s date.

Page65

6565
Web Programming (3160713) 220220131122

Page66

6666
Web Programming (3160713) 220220131122

Quiz:

1. What is javascript?
 JavaScript is a high-level, dynamic programming language used primarily for creating
interactive effects within web browsers. It allows developers to implement complex
features such as interactive forms, animations, dynamic content updates, and more on
web pages. JavaScript is a client-side scripting language, meaning it runs directly in
the user's browser, but it can also be used on the server side (e.g., with Node.js).

2. Explain internal and external javascript.

 Internal JavaScript is written directly within the <script> tag in an HTML

document, usually in the <head> or <body> section. It's best for small scripts specific
to a single page.
 External JavaScript is stored in a separate .js file and linked to the HTML
document using the <script src="file.js"> tag. This method is preferred for larger
projects as it keeps the HTML clean, allows code reuse, and is easier to maintain.
External JavaScript enhances organization and scalability.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page67

6767
Web Programming (3160713) 220220131122

Experiment No: 11

Develop simple calculator for addition, subtraction, multiplication and division

operation using java script.

Date:

Competency and PracticalSkills:

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?

varx,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:
Page68

- Using DOM Javascript can

o change all the HTML elements in the page
6868
Web Programming (3160713) 220220131122

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

Page69

6969
Web Programming (3160713) 220220131122

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

</body>
</html>

7070
Web Programming (3160713) 220220131122

Implementation:

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

Page71

7171
Web Programming (3160713) 220220131122

Page72

7272
Web Programming (3160713) 220220131122

Quiz:

1. Explain Document Object Model.

 The Document Object Model (DOM) is a programming interface for HTML
and XML documents. It represents the document as a tree structure, where each
element, attribute, and piece of text is a node. The DOM allows JavaScript to
dynamically access, modify, and manipulate the document's content, structure,
and style. This enables developers to change elements, add events, and update
content in response to user actions.
Example:
document.getElementById("myElement").innerHTML = "New Text";
Suggested Reference:

● https://www.w3schools.com/js/js_htmldom.asp
● https://www.w3schools.com/js/js_validation.asp

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page73

7373
Web Programming (3160713) 220220131122

Experiment No: 12

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:

Competency and PracticalSkills:

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.

-
Page74

Example: the following javascript example demonstrate how to fetch value from textbox and

7474
Web Programming (3160713) 220220131122

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.

Page75

7575
Web Programming (3160713) 220220131122

Page76

7676
Web Programming (3160713) 220220131122

Page77

7777
Web Programming (3160713) 220220131122

Page78

7878
Web Programming (3160713) 220220131122

Page79

7979
Web Programming (3160713) 220220131122

Quiz:

1. Explain event handling with javascript.

 Event handling in JavaScript allows you to respond to user actions like clicks,
keypresses, and mouse movements. It involves attaching event listeners to elements,
which execute a function when the event is triggered. Events can be handled using
attributes like onclick or with addEventListener for better flexibility.

Example:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

Suggested Reference:

● https://www.w3schools.com/js/js_validation.asp
Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page80

8080
Web Programming (3160713) 220220131122

Experiment No: 13

Use JavaScript to Implement validation in Practical No.4.

Date:

Competency and PracticalSkills:

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

Implementation:

8181
Web Programming (3160713) 220220131122

Page82

8282
Web Programming (3160713) 220220131122

Page83

8383
Web Programming (3160713) 220220131122

Page84

8484
Web Programming (3160713) 220220131122

Quiz:

1. Explain javascript form validation.

 JavaScript form validation ensures that user input meets specific criteria before
submitting a form. It is performed on the client side, improving user experience
by instantly showing errors. JavaScript accesses form elements, checks input
values (e.g., for required fields, correct format), and displays error messages if
needed.

Suggested Reference:

● https://www.w3schools.com/js/js_validation.asp
Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page85

8585
Web Programming (3160713) 220220131122

Experiment No: 14

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

Date:

Competency and PracticalSkills:

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

Page86

8686
Web Programming (3160713) 220220131122

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

● PHP Conditional Statements

Statement Syntax

PHP - The if Statement

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

● PHP Loop Statements

Statement Syntax

The PHP while Loop

while (condition is true) {
code to be executed;
}
Page87

8787
Web Programming (3160713) 220220131122

The PHP do...while Loop

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

Implementation:

Page88

8888
Web Programming (3160713) 220220131122

Page89

8989
Web Programming (3160713) 220220131122

Page90

9090
Web Programming (3160713) 220220131122

Quiz:

1. What is PHP? Explain PHP Syntax.

 PHP (Hypertext Preprocessor) is a widely-used, open-source scripting language

primarily used for server-side web development. It is embedded within HTML
and allows for dynamic web content, database interactions, session
management, and more. PHP is executed on the server, and the result is sent to
the user's browser as HTML.

2. Explain foreach Loop in PHP.

 The foreach loop in PHP is used to iterate over arrays or objects. It simplifies
accessing each element without needing to manage the array's index manually.
It can loop through associative arrays by accessing both the key and the value.

Syntax:

foreach ($array as $value) {

// code

Example:

$fruits = ["Apple", "Banana", "Cherry"];

foreach ($fruits as $fruit) {

echo $fruit . "<br>"; // Output: Apple, Banana, Cherry

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page91

9191
Web Programming (3160713) 220220131122

Experiment No: 15

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:

Competency and PracticalSkills:

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’;

Page92

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

9292
Web Programming (3160713) 220220131122

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:

Page93

9393
Web Programming (3160713) 220220131122

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

Page94

3. Check the status of your MySQL commands

9494
Web Programming (3160713) 220220131122

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.

Page95

9595
Web Programming (3160713) 220220131122

Page96

9696
Web Programming (3160713) 220220131122

Page97

9797
Web Programming (3160713) 220220131122

Page98

9898
Web Programming (3160713) 220220131122

Page99

9999
Web Programming (3160713) 220220131122

Page100

100100
Web Programming (3160713) 220220131122

Quiz:

1. What is MySql?

 MySQL is an open-source relational database management system (RDBMS)

that uses Structured Query Language (SQL) to manage and manipulate
databases. It is widely used for developing web applications and managing
large datasets. MySQL stores data in tables, supports various data types, and
enables efficient querying, indexing, and management of information.

MySQL is commonly used in combination with web technologies like PHP and
JavaScript, forming the LAMP stack (Linux, Apache, MySQL,
PHP/Perl/Python) for web development.

2. Write a sample code to demonstrate phpmysql connectivity.

 Here’s a simple PHP code to demonstrate MySQL connectivity using MySQLi:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydatabase";

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

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

echo "Connected successfully";

// Query to fetch data

$sql = "SELECT id, name FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
Page101

echo "id: " . $row["id"] . " - Name: " . $row["name"] . "<br>";

}
101101
Web Programming (3160713) 220220131122

} else {
echo "0 results";
}

$conn->close();
?>

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page102

102102
Web Programming (3160713) 220220131122

Experiment No: 16

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

Date:

Competency and PracticalSkills:

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:
Page103

103103
Web Programming (3160713) 220220131122

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

Page104

104104
Web Programming (3160713) 220220131122

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

Page105

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

105105
Web Programming (3160713) 220220131122

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.

Page106

106106
Web Programming (3160713) 220220131122

Page107

107107
Web Programming (3160713) 220220131122

Page108

108108
Web Programming (3160713) 220220131122

Page109

109109
Web Programming (3160713) 220220131122

Page110

110110
Web Programming (3160713) 220220131122

Quiz:

1. What is PHP Session?

 A PHP session allows you to store user-specific data across multiple pages during a
user's visit. Unlike cookies, session data is stored on the server for better security.
Sessions begin with session_start() and store data in the $_SESSION
superglobal.

Example:
<?php
session_start();
$_SESSION["username"] = "JohnDoe";
echo "Hello, " . $_SESSION["username"]; // Output: Hello, JohnDoe
?>

2. How to destroy PHP Session?

 To destroy a PHP session, you need to perform the following steps:
1. Unset session variables using session_unset().
2. Destroy the session using session_destroy().
Example:
<?php
// Start the session
session_start();

// Unset all session variables

session_unset();

// Destroy the session

session_destroy();

echo "Session destroyed!";

?>

Suggested Reference:

● https://www.w3schools.com/php/php_sessions.asp
Rubric wise marks obtained:

Rubrics 1 2 3 Total
Page111

Marks

111111
Web Programming (3160713) 220220131122

Experiment No: 17

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:

Competency and PracticalSkills:

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.

Page112

112112
Web Programming (3160713) 220220131122

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

Page113

xhttp.send();

113113
Web Programming (3160713) 220220131122

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

Page114

XMLHttpRequest Object Properties

114114
Web Programming (3160713) 220220131122

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;
Page115

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

115115
Web Programming (3160713) 220220131122

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.

Page116

116116
Web Programming (3160713) 220220131122

Page117

117117
Web Programming (3160713) 220220131122

Page118

118118
Web Programming (3160713) 220220131122

Quiz:

1. What is Ajax?

 AJAX (Asynchronous JavaScript and XML) is a technique that allows web pages to
send and receive data from a server asynchronously, without refreshing the entire
page. It enables dynamic content updates, improving user experience by loading only
the necessary parts of a page. AJAX commonly uses JavaScript and the
XMLHttpRequest or Fetch API to interact with the server and exchange data in
formats like JSON or XML.

Example:
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send();

2. Explain XMLHttpRequest.
 XMLHttpRequest is a JavaScript object used to send HTTP requests to a server
and receive data asynchronously, enabling dynamic web page updates without
refreshing the page. It is a core component of AJAX, allowing interaction with
the server in the background.
Example:
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page119

119119
Web Programming (3160713) 220220131122

Experiment No: 18
Create a REST API using php.

Date:

Competency and PracticalSkills:

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

Page120

To create a REST API, follow these steps:

120120
Web Programming (3160713) 220220131122

A. Create a Database and Table with Dummy Data

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

CREATE DATABASE allphptricks;

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

CREATE TABLE IF NOT EXISTS `transactions` (

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

B. Create a Database Connection

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

C. Create a REST API File

Create a api.php file and paste the following script in it.
<?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){
Page121

$row = mysqli_fetch_array($result);
$amount = $row['amount'];

121121
Web Programming (3160713) 220220131122

$response_code = $row['response_code'];
$response_desc = $row['response_desc'];
response($order_id, $amount, $response_code,$response_desc);
mysqli_close($con);
}else{
response(NULL, NULL, 200,"No Record Found");
}
}else{
response(NULL, NULL, 400,"Invalid Request");
}

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

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

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

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

You will get the following output.

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

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

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

You will get the following output.

Page122

122122
Web Programming (3160713) 220220131122

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.

Page123

123123
Web Programming (3160713) 220220131122

Page124

124124
Web Programming (3160713) 220220131122

Page125

125125
Web Programming (3160713) 220220131122

Quiz:

1. What is REST API?

 REST API (Representational State Transfer Application Programming
Interface) is an architectural style for designing networked applications. It uses
HTTP requests to perform operations on resources (data), such as retrieving,
creating, updating, or deleting. REST is based on stateless communication,
where each request from a client to the server must contain all the information
the server needs to fulfill the request.

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page126

126126
Web Programming (3160713) 220220131122

Experiment No: 19

Create an Image slider using jQuery.

Date:

Competency and PracticalSkills:

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:
Page127

$(selector).action()

127127
Web Programming (3160713) 220220131122

● A $ sign to define/access jQuery

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

Examples:

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

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

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

$(document).ready(function(){

// jQuery methods go here…

});

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

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

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

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

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

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

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

An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
128128
Web Programming (3160713) 220220131122

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:

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

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

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

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

Mouse Events Keyboard Events Form Events Document/Window Events

Click Keypress submit Load

Dblclick Keydown change Resize

Mouseenter Keyup focus Scroll

Mouseleave blur Unload

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

$("p").click();

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

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

129129
Web Programming (3160713) 220220131122

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.

Page130

130130
Web Programming (3160713) 220220131122

Page131

131131
Web Programming (3160713) 220220131122

Page132

132132
Web Programming (3160713) 220220131122

Quiz:

1. What is jquery?
 jQuery is a fast, small, and feature-rich JavaScript library designed to simplify
the process of HTML document traversal, event handling, animation, and
AJAX interactions for rapid web development. It abstracts away many of the
complexities of working with JavaScript, making it easier to write less code for
common tasks such as DOM manipulation and event handling.
2. Javascript Vs. Jquery

 Definition:

i. JavaScript is a programming language that enables you to create dynamic,

interactive content on webpages.
ii. jQuery is a lightweight JavaScript library designed to simplify tasks like DOM
manipulation, event handling, and AJAX interactions.

 Syntax:

iii. JavaScript requires more lines of code to perform operations like DOM
manipulation, animations, and AJAX.
iv. jQuery provides simpler, shorter syntax, reducing the amount of code needed for
common tasks.

 Compatibility:

JavaScript works across all modern browsers but can require additional code to handle
browser inconsistencies.

jQuery abstracts these differences and ensures compatibility across browsers.

Usage:

JavaScript is the core language for client-side scripting.

jQuery is a library built on JavaScript that simplifies and speeds up development by

handling common tasks.

Performance:

JavaScript is faster because it is a native language, with no additional overhead.

jQuery can be slower because of its abstraction layer, but the difference is generally negligible
for small tasks.

Example:

JavaScript:
Page133

document.getElementById("myButton").addEventListener("click", function() {

133133
Web Programming (3160713) 220220131122

document.getElementById("myText").style.display = "none";

});

jQuery:

$("#myButton").click(function() {

$("#myText").hide();

});

Suggested Reference:

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

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks

Page134

134134
Web Programming (3160713) 220220131122

Experiment No: 20

Cookie Example

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

Date:

Competency and PracticalSkills:

Relevant CO: 5

Objectives:

1. To understand use of COOKIES.

Theory:

Page135

135135
Web Programming (3160713) 220220131122

Page136

136136
Web Programming (3160713) 220220131122

Page137

137137
Web Programming (3160713) 220220131122

Quiz:

1. What is cookie?
 A cookie is a small piece of data stored by a web browser on a user's device,
which is sent to the server with each HTTP request. Cookies are used to
remember information about the user, such as login details, preferences, or
tracking data, between sessions.
Key Features:
 Stored on the Client Side: Cookies are stored in the user's browser.
 Session or Persistent: Session cookies expire once the browser is closed, while persistent
cookies remain for a specified duration.
 Key-Value Pair: Each cookie stores data in the form of a key-value pair.
 Used for Personalization: They help store user preferences, session data, etc.
Example:
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC;
path=/";

2. What is the life of cookie?

 The life of a cookie is determined by its expiration date or whether it's a session
cookie.
1. Session Cookies: These cookies last only for the duration of the user's session
and are deleted once the browser is closed.
2. Persistent Cookies: These cookies have an expiration date set in the future and
remain stored even after the browser is closed, until the expiration date is
reached.
Example:
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

Suggested Reference:

● https://www.w3schools.com

Rubric wise marks obtained:

Rubrics 1 2 3 Total
Marks
Page138

138138