Professional Documents
Culture Documents
3160713_Web Programming Lab Manual
3160713_Web Programming Lab Manual
Web Programming
(3160713)
B.E. Semester6
(Computer Science and Engineering)
Certificate
Place: __________________
Date: __________________
Preface
Main motto of any laboratory/practical/field work is for enhancing required skills as well as
creating ability amongst students to solve real time problem by developing relevant
competencies in psychomotor domain. By keeping in view, GTU has designed competency
focused outcome-based curriculum for engineering degree programs where sufficient weightage
is given to practical work. It shows importance of enhancement of skills amongst the students
and it pays attention to utilize every second of time allotted for practical amongst students,
instructors and faculty members to achieve relevant outcomes by performing the experiments
rather than having merely study type experiments. It is must for effective implementation of
competency focused outcome-based curriculum that every practical is keenly designed to serve
as a tool to develop and enhance relevant competency required by the various industry among
every student. These psychomotor skills are very difficult to develop through traditional chalk
and board content delivery method in the classroom. Accordingly, this lab manual is designed
to focus on the industry defined relevant outcomes, rather than old practice of conducting
practical to prove concept and theory.
By using this lab manual students can go through the relevant theory and procedure in advance
before the actual performance which creates an interest and students can have basic idea prior to
performance. This in turn enhances pre-determined outcomes amongst students. Each
experiment in this manual begins with competency, industry relevant skills, course outcomes as
well as practical outcomes (objectives). The students will also achieve safety and necessary
precautions to be taken while performing practical.
This manual also provides guidelines to faculty members to facilitate student centric lab
activities through each experiment by arranging and managing necessary resources in order that
the students follow the procedures with required safety and necessary precautions to achieve the
outcomes. It also gives an idea that how students will be assessed by providing rubrics.
In the era of digitization, the demand of Internet based applications is increasing day by day.
Web Development is one of the required skills for IT Engineer. This focuses on front-end and
back-end design. After learning Web Development students can advance their career in the field
of web development.
Utmost care has been taken while preparing this lab manual however always there is chances of
improvement. Therefore, we welcome constructive suggestions for improvement and removal
of errors if any.
Web Programming (3160713) 2
20 Cookie Example √
Web Programming (3160713) 4
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.
1. Students have to write answers / solutions of QUIZ in separate file page. The quiz of
corresponding practical must be attached just behind each practical.
2. Students are expected to carefully listen to all the theory classes delivered by the faculty
members and understand the COs, content of the course, teaching and examination
scheme, skill set to be developed etc.
3. Students shall organize the work in the group and make record of all observations.
4. Students shall develop maintenance skill as expected by industries.
5. Student shall attempt to develop related hand-on skills and build confidence.
6. Student shall develop the habits of evolving more ideas, innovations, skills etc. apart from
those included in scope of manual.
Web Programming (3160713) 5
Index
(Progressive Assessment Sheet)
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:
Relevant CO: 1
Objectives:
Theory:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
- DOCTYPE specifies the document type. the document type is specified by the Document
Type Definition (DTD).
- <head> section is used to specify title of the page using <title> tag. It is also used for
adding external css and javascript files to html document.
Web Programming (3160713) 10
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
- HTML List allow web developers to group a set of related items in lists
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>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
<dl>
<dt>CE</dt>
<dd>- Computer Engineering</dd>
<dt>IT</dt>
<dd>- Information Technology</dd>
</dl>
o <dl> tag defines the description list,<dt> tag defines the term (name) <dd> tag
describes each term
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.
Output:
Web Programming (3160713) 12
Conclusion:
Quiz:
Suggested Reference:
- https://www.w3schools.com/html/html_basic.asp
- https://www.w3schools.com/html/html_lists.asp
- https://www.w3schools.com/html/html_formatting.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 13
Experiment No: 2
Create your class time table using table tag, experiment with rowspan, colspan,
cellspacing and cellpadding attributes.
Date:
Relevant CO: 1
Objectives:
- 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.
Web Programming (3160713) 14
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.
Web Programming (3160713) 15
Output:
Conclusion:
Quiz:
Suggested Reference:
https://www.w3schools.com/html/html_tables.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 16
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.
Date:
Relevant CO: 1
Objectives:
Theory:
HTML Links:
Design static web pages for your college containing a description of the courses, departments,
Web Programming (3160713) 17
faculties, library etc. Provide links for navigation among pages.
Output:
Conclusion:
Quiz:
https://www.w3schools.com/html/html_links.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 18
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:
Relevant CO: 1
Objectives:
</form>
</textarea>
</select>
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.
Hidden Control Hidden form controls are <input type = "hidden" name =
used to hide data inside "pagename" value = "10" />
the page which later on
Web Programming (3160713) 21
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.
Output:
Conclusion:
Quiz:
https://www.w3schools.com/html/html_forms.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 23
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:
Relevant CO: 1
Objectives:
Theory:
HTML Video
Example:
The controls attribute adds video controls, like play, pause, and volume.
The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.
HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Web Programming (3160713) 24
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.
Output:
Conclusion:
Quiz:
Suggested Reference:
https://www.w3schools.com/html/html_media.asp
Rubrics 1 2 3 Total
Web Programming (3160713) 25
Marks
Web Programming (3160713) 26
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:
Relevant CO: 1
Objectives:
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
<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.
Output:
Web Programming (3160713) 28
Quiz:
https://www.w3schools.com/tags/tag_frameset.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 29
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:
Relevant CO: 1
Objectives:
Theory:
Introduction To CSS
Example:In this example all <p> elements will be center-aligned, with a red text color
Web Programming (3160713) 30
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
p{
text-align: center;
color: red;
}
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>
o The universal selector (*) selects all HTML elements on the page.
o Example
-
Web Programming (3160713) 32
<!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>
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;
}
o Some selectors can be considered different because of the way the element they
belong to works.
o For example, the anchor that creates a link between documents can have pseudo
classes attached to it simply because it is not known at the time of writing the
markup what the state will be.
o It could be visited, not visited, or in the process of being selected.
o CSS pseudo-classes are used to add special effects to some selectors. You do not
need to use JavaScript or any other script to use those effects.
o selector: pseudo-class {property: value}
o CSS classes can also be used with pseudo-classes
o selector.class: pseudo-class {property: value}
o Example
Web Programming (3160713) 33
a : link { color: red} o
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>
body {
background-color: lightblue;
}
<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).
Output:
Conclusion:
Web Programming (3160713) 35
Quiz:
https://www.w3schools.com/css/css_syntax.asp
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 36
Experiment No: 8
Use Inline CSS to format your resume that you created in practical no 01.
Date:
Relevant CO: 1
Objectives:
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.
Output:
Web Programming (3160713) 37
Conclusion:
Quiz:
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 38
Experiment No: 9
Use External, Internal, Inline CSS to format College Web site that you created
in Practical No.03
Date:
Relevant CO: 1
Objectives:
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
<!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>
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.
Output:
Conclusion:
Quiz:
https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 41
Experiment No: 10
Date:
Relevant CO: 2
Objectives:
Javascript
o Internal Javascript
JavaScript code is placed in the head and body section of an HTML page.
Example
<html>
<head>
<title>Internal JavaScript</title>
<script type="text/javascript">
document.write("Hello World.!!!");
</script>
</head>
<body>
</body>
</html>
o External JavaScript
If you want to use the same script on several pages it could be good idea to
place the code in separate file, rather than writing it on each.
JavaScript code are stored in separate external file using the .js extension
(Ex: external.js).
Web Programming (3160713) 42
Example:
HTML File : index.html
<html>
<head>
<title>External JavaScript</title>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>
Implementation:
Output:
Conclusion:
Web Programming (3160713) 43
Quiz:
1. What is javascript?
2. Explain internal and external javascript.
Suggested Reference:
https://www.w3schools.com/JSREF/jsref_obj_date.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 44
Experiment No: 11
Date:
Relevant CO: 2
Objectives:
Javascript Syntax
varx,y,z;
x=5;
y=5
z=x+y;
document.write(“total is : ”+z)
- When a web page is loaded, the browser creates a Document Object Model of the page.
- The HTML DOM model is constructed as a tree of Objects:
- Using DOM Javascript can
o change all the HTML elements in the page
o change all the HTML attributes in the page
o change all the CSS styles in the page
o remove existing HTML elements and attributes
o add new HTML elements and attributes
o react to all existing HTML events in the page
o create new HTML events in the page
Web Programming (3160713) 45
DOM Examples
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
<h2>Number Validation</h2>
<input id="numb">
<p id="demo"></p>
<script>
function myFunction() {
// Get the value of the input field with id="numb"
let x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
let text;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Implementation:
Develop simple calculator for addition, subtraction, multiplication and division operation using
java script.
Output:
Web Programming (3160713) 47
Conclusion:
Quiz:
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/js/js_validation.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 48
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:
Relevant CO: 2
Objectives:
1. To understand the use of DOM for getting values from Form Controls.
2. To understand event handling with javascript
Theory:
What is an Event?
- JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.
- When the page loads, it is called an event. When the user clicks a button, that click too is
an event. Other examples include events like pressing any key, closing a window, resizing
a window, etc.
- Developers can use these events to execute JavaScript coded responses, which cause
buttons to close windows, messages to be displayed to users, data to be validated, and
virtually any other type of response imaginable.
- Events are a part of the Document Object Model (DOM) Level 3 and every HTML
element contains a set of events which can trigger JavaScript Code.
Example: the following javascript example demonstrate how to fetch value from textbox and
Web Programming (3160713) 49
display using alert()
<!DOCTYPE html>
<html>
<head>
<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.
Output:
Conclusion:
Web Programming (3160713) 50
Quiz:
https://www.w3schools.com/js/js_validation.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 51
Experiment No: 13
Date:
Relevant CO: 2
Objectives:
<!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>
</body>
</html>
Web Programming (3160713) 52
Implementation:
Output:
Conclusion:
Quiz:
https://www.w3schools.com/js/js_validation.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 53
Experiment No: 14
Date:
Relevant CO: 3
Objectives:
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
?>
<!DOCTYPE html>
<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
Web Programming (3160713) 54
Statement Syntax
Statement Syntax
Implementation:
Output:
Conclusion:
Quiz:
Web Programming (3160713) 56
1. What is PHP? Explain PHP Syntax.
Suggested Reference:
https://www.w3schools.com/php/php_looping.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 57
Experiment No: 15
Date:
Relevant CO: 4
Objectives:
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:
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.
echo "\t\n";
echo "\n";
// free result
mysql_free_result( $result );
Web Programming (3160713) 59
- 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().
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:
connect: ’.mysql_error());
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.
Output:
Web Programming (3160713) 60
Conclusion:
Quiz:
1. What is MySql?
2. Write a sample code to demonstrate phpmysql connectivity.
Suggested Reference:
http://www.php.net/manual/en/ref.mysql.php
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 61
Experiment No: 16
Write a PHP script for user authentication using PHP-MYSQL. Use session for
storing username.
Date:
Relevant CO: 4
Objectives:
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.
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:
Web Programming (3160713) 62
<?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>
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:
Web Programming (3160713) 63
<?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>
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// to change a session
variable, just overwrite it
$_SESSION["favcolor"]
= "yellow";
print_r($_SESSION);
?>
</body>
</html>
To remove all global session variables and destroy the session, use session_unset() and
session_destroy():
Web Programming (3160713) 64
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// remove all session
variables
session_unset();
</body>
</html>
Implementation:
Write a PHP script for user authentication using PHP-MYSQL. Use session for storing username.
Output:
Conclusion:
Quiz:
Web Programming (3160713) 65
1. What is PHP Session?
2. How to destroy PHP Session?
Suggested Reference:
https://www.w3schools.com/php/php_sessions.asp
References used by the students:
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 66
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:
Relevant CO: 5
Objectives:
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX is not a programming language.
AJAX just uses a combination of:
- A browser built-in XMLHttpRequest object (to request data from a web server)
- JavaScript and HTML DOM (to display or use the data)
AJAX allows web pages to be updated asynchronously by exchanging data with a web server
behind the scenes. This means that it is possible to update parts of a web page, without reloading
the whole page.
Ref: https://www.w3schools.com/js/js_ajax_intro.asp
Web Programming (3160713) 67
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
xhttp.onload = function() {
// What to do when the response is ready
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Method Description
Property Description
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
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.
Output:
Conclusion:
Quiz:
1. What is Ajax?
2. Explain XMLHttpRequest.
Suggested Reference:
https://www.w3schools.com/xml/ajax_intro.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 71
Experiment No: 18
Date:
Relevant CO: 5
Objectives:
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
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.
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
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
Now you can get the transaction information by browsing the following URL.
http://localhost/rest/api/15478959
$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:
Output:
Conclusion:
Quiz:
https://www.allphptricks.com/create-and-consume-simple-rest-api-in-php/ )
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 76
Experiment No: 19
Date:
Relevant CO: 5
Objectives:
JQUERY
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a
lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code. jQuery also simplifies a lot of the
complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
A. HTML/DOM manipulation
B. CSS manipulation
C. HTML event methods
D. Effects and animations
E. AJAX
There are several ways to start using jQuery on your web site.
You can:
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
<head>
<script src="jquery-3.6.4.min.js"></script>
</head>
OR
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
</head>
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is:
$(selector).action()
Examples:
All jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){
});
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 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: $().
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element:
$("#test")
Web Programming (3160713) 78
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:
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!!
});
$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded.
click()
Web Programming (3160713) 79
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:
Conclusion:
Quiz:
1. What is jquery?
2. Javascript Vs. Jquery
Suggested Reference:
https://www.w3schools.com/jquery/jquery_intro.asp
Rubrics 1 2 3 Total
Marks
Web Programming (3160713) 81
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:
Relevant CO: 5
Objectives:
Conclusion:
Quiz:
1. What is cookie?
2. What is the life of cookie?
Suggested Reference:
https://www.w3schools.com
Rubrics 1 2 3 Total
Marks