L. D.

College of
Engineering
Opp. Gujarat University, Navrangpura, Ahmedabad -

LAB MANUAL
Branch: Computer Engineering

WEB PROGRAMMING
(3160713)

Faculty Details:
1) Prof. H. K. GEVARIYA
2) Prof. S. R. Modi
3) Prof. P. D. Salot
 WEB PROGRAMMING
(3160713)


Certificate

This is to certify that Mr./Ms. __________________________,

Enrollment Number________________ has satisfactorily completed the practical
work in _______________ subject at L D College of Engineering, Ahmedabad-
380015.

Date of Submission: _______________

Sign of Faculty: _______________

Head of Department: _______________

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

 WEB PROGRAMMING
(3160713)


L. D. College of Engineering, Ahmedabad

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

Term: 2022-2023

Sr. Marks
Title Date Page No. Sign
No. (20)
PRACTICAL SET-1(CO1)
1 Demonstrate use of unordered lists, ordered lists
and definition list.
Make the table of given design using HTML.

Design & Develop Resume web page using

3 basic html tags with appropriate CSS style to
display the content effectively.
Create Student registration webpage using
appropriate HTML form object. (Text box,
4
Text area, Dropdown, Radio button, Submit
button, Checkbox etc.)
PRACTICAL SET-2(CO2)
Create HTML Page with JavaScript that prints
1 Factorial number / Fibonacci series.

Create HTML Page with JavaScript which

takes Integer number as input and tells whether
2
the number is ODD or EVEN using Popup
box.
Develop simple calculator for addition,
3 subtraction, multiplication and division
operation.
4 Write a JavaScript that handles following
events:
a. If the mouse is over heading, change
font color to “red” and if the mouse

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

 WEB PROGRAMMING
(3160713)


goes out of the heading change it to

“black”.
b. If button named “red” is clicked,
background should change to red and
If button named “green” is clicked,
background should change to green.
c. Gives the key code for the key
pressed, if key pressed is
‘a’,’e’,’i’,’o’,’u’, the message should
be displayed on pop up box that
“vowel is pressed” and Background
color should change to red after
releasing the pressed key.
Design a form using HTML and JavaScript
that asks the user to enter his date of birth and
5 on clicking the Calculate Button it calls the
function that calculates how many days are left
in your birthday?
Write a java script program to “Wish a user “at
6
different hours of a day.
Write a JavaScript to apply various validations
7 on fields of Student Registration Form of
Practical set 1(4).
PRACTICAL SET-3(CO3)
Write PHP script to demonstrate use of given
date/time functions.
1 date(), getdate(), setdate(), time(),
checkdate().

Write a PHP program to print following

patterns.
1 1
ab 01
2
234 101
cdef 0101
56789 10101

Write PHP script to demonstrate use of Math

3 functions. abs () & round (), ceil() & floor (),
min () & max (), pow () & sqrt ().
4 Extend Practical set 2(7) by viewing
information on another page by clicking

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

 WEB PROGRAMMING
(3160713)


submit button using php.

Write a program that demonstrate use of in built
5
function of cookies.
PRACTICAL SET-4(CO4)
Extend Practical set 3(4) by applying insert
1 operation and Display the student records with
update and delete facility.
The user is first served a login page which
takes users name and password. After
submitting the details, the server checks these
values against the data from a database and
takes the following decisions
a. If name and password match, serves a
welcome page with user's full name.
b. If name matches and password doesn't
match, then serves password
2
mismatch page.
c. If name not found in database, serves
a registration page where users full
name is asked and on submitting the
full name, it stores, the login name,
password and full name in the
database (HINT: Use session for
storing the submitted login name and
password.)
Write a program that keeps track of how many
3
times a visitor has loaded the page.
PRACTICAL SET-5(CO5)
1 Mini Project on given titles.

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

 WEB PROGRAMMING
(3160713)


L. D. College of Engineering, Ahmedabad

Department of Computer Engineering

Practical Rubrics

Subject Name: Web Programming Subject Code: 3160713

Term: 2022-2023
Rubrics ID Criteria Marks Good Satisfactory Need Improvement

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

70%)

RB2 Web Page 05 Appropriate & Full Limited Very Less Identification
Design & Identification of the Identification of of the Problem / Very
Development of Problem & the Problem / Less Solution for the
the Web Page Complete Solution Incomplete Problem
for the Problem Solution for the
Problem

RB3 Testing of the 05 Correct Solution as Partially Correct Very less correct
Web Page required Solution for the solution for the problem
Problem

RB4 Documentation 05 Documentation Not up to Proper format not

completed neatly. standard. followed, incomplete.

SIGN OF FACULTY

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

 WEB PROGRAMMING
(3160713)


L. D. College of Engineering, Ahmedabad

Department of Computer Engineering

Subject Name: Web Programming (3160713)
Term: 2022-2023
Enrollment Number:
Name:
Sr. TOTAL
Title Date RB1 RB2 RB3 RB4 (20)
Sign
No
PRACTICAL SET-1(CO1)
Demonstrate use of unordered lists, ordered
1 lists and definition list.

Make the table of given design using HTML.

2
(a)

(b)
Design & Develop Resume web page using
3 basic html tags with appropriate CSS style
to display the content effectively.
Create Student registration webpage using
appropriate HTML form object. (Text box,
4 Text area, Dropdown, Radio button, Submit
button, Checkbox etc.)
PRACTICAL SET-2(CO2)
Create HTML Page with JavaScript that
5 prints Factorial number / Fibonacci series.

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

 WEB PROGRAMMING
(3160713)


Create HTML Page with JavaScript which

takes Integer number as input and tells
6
whether the number is ODD or EVEN using
Popup box.
Develop simple calculator for addition,
7 subtraction, multiplication and division
operation.
Write a JavaScript that handles following
events:
a. If the mouse is over heading, change
font color to “red” and if the mouse
goes out of the heading change it to
“black”.
b. If button named “red” is clicked,
background should change to red and
8 If button named “green” is clicked,
background should change to green.
c. Gives the key code for the key
pressed, if key pressed is
‘a’,’e’,’i’,’o’,’u’, the message should
be displayed on pop up box that
“vowel is pressed” and Background
color should change to red after
releasing the pressed key
Design a form using HTML and JavaScript
that asks the user to enter his date of birth and
9 on clicking the Calculate Button it calls the
function that calculates how many days are
left in your birthday?
Write a java script program to “Wish a user
10
“at different hours of a day.
Write a JavaScript to apply various
11 validations on fields of Student Registration
Form of Practical set 1(4).
PRACTICAL SET-3(CO3)
Write PHP script to demonstrate use of
given date/time functions.
12 date(), getdate(), setdate(), time(),
checkdate().

13 Write a PHP program to print following

patterns

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

 WEB PROGRAMMING
(3160713)


Write PHP script to demonstrate use of

14 Math functions. abs () & round (), ceil() &
floor (), min () & max (), pow () & sqrt ().
Extend Practical set 2(7) by viewing
15 information on another page by clicking
submit button using php.
Write a program that demonstrate use of in
16
built function of cookies.
PRACTICAL SET-4(CO4)
Extend Practical set 3(4) by applying insert
17 operation and Display the student records
with update and delete facility.
The user is first served a login page which
takes users name and password. After
submitting the details, the server checks these
values against the data from a database and
takes the following decisions
a. If name and password match, serves a
welcome page with user's full name.
b. If name matches and password doesn't
match, then serves password mismatch
18
page.
c. If name not found in database, serves
a registration page where users full
name is asked and on submitting the
full name, it stores, the login name,
password and full name in the
database (HINT: Use session for
storing the submitted login name and
password.)
Write a program that keeps track of how
19
many times a visitor has loaded the page.
PRACTICAL SET-5(CO5)
20 Mini Project on given titles.

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

 WEB PROGRAMMING
(3160713)


GUJARAT TECHNOLOGICAL UNIVERSITY, AHMEDABAD,

COURSE CURRICULUM
COURSE TITLE: WEB PROGRAMMING
(Code: 3160713)

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

Computer Engineering 6th Semester

1. RATIONALE

• The wide spread use of the Internet and WWW by common people has made it compulsion to
provide web-based interface for the applications to access the application from anywhere,
anytime, anyone.
• The subject covers the wide range of web technologies both client side and server side to
provide the exposure to the students to develop Rich Internet Applications using them.
• It covers the basics of WWW, HTML, CSS and client-side scripting with JavaScript, server-
side scripting with PHP and database connectivity using PHP and related technologies.

2. COMPETENCY

The course content should be taught and implemented with the aim to develop required skills
in the students so that they are able to acquire following competency:
 Develop GUI based Web application using HTML, CSS, JAVASCRIPT and PHP
with Database Connectivity.

3. COURSE OUTCOMES

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

CO-1 Use the various HTML tags with appropriate styles to display the various types of contents effectively

CO-2 Develop the dynamic web pages using HTML, CSS and JavaScript applying web design principles to
make pages effective.
CO-3 Develop the server-side PHP scripts using various features for creating
customized web services.
CO-4 Write the server side scripts for designing web-based services with database connectivity.

CO-5 Develop a web application using advanced web programming features including AJAX and JQuery
using concepts of Web API.

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

 WEB PROGRAMMING
(3160713)


4. TEACHING AND EXAMINATION SCHEME

5. SUGGESTED LEARNING RESOURCES

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

B. LIST OF E-LEARNING WEBSITES

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

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

 WEB PROGRAMMING
(3160713)


PRACTICAL SET 1 – HTML & CSS

[CO1] Use the various HTML tags with appropriate styles to display the various types of
contents effectively.

AIM 1: Demonstrate use of unordered lists, ordered lists and definition list

 Theory:

Unordered lists:

We use unordered lists to group items having no numerical order. When changing the order of list
items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes
in pairs, the content is written between opening <ul> and closing </ul> tags.

Ordered lists
HTML ordered list is used for listing items that are marked with numbers. It starts with
the <ol> tag. This tag comes in pairs, the content is written between opening <ol> and closing
</ol> tags.

Each item in the ordered list starts with opening <li> tag and ends with </li> closing tag.

Definition list

HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopaedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-
value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

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

 WEB PROGRAMMING
(3160713)


 Program:

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

 WEB PROGRAMMING
(3160713)


 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 2: Make the table of given design using HTML.

Theory:

HTML table tag is used to display data in tabular form (row * column). There can be many columns
in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr>,
<td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

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

 WEB PROGRAMMING
(3160713)


 Program:

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

 WEB PROGRAMMING
(3160713)


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

 WEB PROGRAMMING
(3160713)


 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 3: Design & Develop Resume web page using basic html tags with
appropriate CSS style to display the content effectively.

 Theory:

Creating an attractive page will be difficult for those who are not experts in CSS. Without
using CSS, you will not be able to make the web page, more attractive. So in order to make a
web page, we need to have a knowledge of HTML and CSS. In this article, the focus will be

What do I need to know to create my resume as a website?

HTML, CSS and JavaScript are the basic languages to create a website.
We can come a long way just using these three!

1. Create the structure with HTML. The first thing you have to learn, is HTML, which is
the standard markup language for creating web pages.
2. Style with CSS. The next step is to learn CSS, to set the layout of your web page with
beautiful colors, fonts, and much more.
3. Make it interactive with JavaScript. After studying HTML and CSS, you should learn
JavaScript to create dynamic and interactive web pages for your users.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 4: Create Student registration webpage using appropriate HTML form

object. (Text box, Text area, Dropdown, Radio button, Submit button,
Checkbox etc.)
 Theory:

HMTL Form Input types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input
element can be various types, which defines information field. Such as <input type="text"
name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


PRACTICAL SET 2 – HTML, CSS, JAVASCRIPT

[CO2] Develop the dynamic web pages using HTML, CSS and JavaScript applying web
design principles to make pages effective.

AIM 1: Create HTML Page with JavaScript that prints Factorial number /
Fibonacci series.

 Theory:
Factorial number

Factorial of number is the product of all positive descending integers. Factorial of n is denoted by n!
For example -

4! = 4 * 3 * 2 * 1 = 24

5! = 5 * 4 * 3 * 2 * 1 = 120

Here, 4! is pronounced as "4 factorial", it is also called "4 bang" or "4 shriek".

we are iterating a loop over the sequence of numbers to get the factorial of a given number. Using
this approach, the consumption of memory is less than the recursive implementation. But the code is
lengthier than the recursive method.

Fibonacci series is a series that generates subsequent series of numbers by the addition of the two
previous numbers. The first two terms of the Fibonacci series are zero and one, respectively. And the
next terms are the addition of the two previous terms.

Fn = (Fn -1) + (Fn - 2)

Fn represents the addition of the previous terms (Fn - 1) and (Fn - 2). Here Fn-1 is the first terms,
and Fn-2 is the second terms of the Fibonacci series.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 2: Create HTML Page with JavaScript which takes Integer number as
input and tells whether the number is ODD or EVEN using Popup box.

 Theory:
Even numbers are those numbers that are exactly divisible by 2.

The remainder operator % gives the remainder when used with a number. For example,

const number = 6;

const result = number % 4; // 2

Hence, when % is used with 2, the number is even if the remainder is zero. Otherwise, the number
is odd.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 3: Develop simple calculator for addition, subtraction, multiplication, and

division operation.

 Theory:
the Calculator is a portable device used in our daily life to perform various mathematical
functions such as addition, subtraction, multiplication, division, root, etc. However, we have
scientific or sophisticated calculators used to solve complex tasks such as trigonometry
functions, degrees, exponential operators, log functions, hyperbolic functions, square root, and so
on.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 4: Write a JavaScript that handles following events:

a. If the mouse is over heading, change font color to “red” and if the mouse goes
out of the heading change it to “black”.
b. If button named “red” is clicked, background should change to red and If
button named “green” is clicked, background should change to green.
c. Gives the key code for the key pressed, if key pressed is ‘a’,’e’,’i’,’o’,’u’, the
message should be displayed on pop up box that “vowel is pressed” and
Background color should change to red after releasing the pressed key

 Theory:
Common HTML Events
Here is a list of some common HTML events:

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and browser actions:

 Things that should be done every time a page loads

 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data
 And more ...

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 5: Design a form using HTML and JavaScript that asks the user to enter
his date of birth and on clicking the Calculate Button it calls the function that
calculates how many days are left in your birthday?

 Theory:

JavaScript offers some built-in date and time functions, which helps to calculate the age from the
date (Date of Birth). Using these JavaScript methods, you can easily find the age of anyone. For
this, we require a date input from the user and the current system date. We need to track the
following conditions in mind while calculating the difference between them:

o If the current date is less than the date (birthdate) entered by the user, that month will
not be counted as the month is not completed. Otherwise, we will add the number of
month days (30 or 31) to the current date to get the difference between them.
o If the current month is less than the birth month, the current year will not be counted. To
get the month's difference, we will subtract by adding the total number of months (12) to
the current month.
o Finally, we just need to subtract the date, month and year after satisfying the above two
conditions.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 6: Write a java script program to “Wish a user “at different hours of a
day.

 Theory:
In this practical, we will learn how to “welcome” any user according to the time. i.e.- if time is
below 12 then it shows “Good Morning, welcome to our website”. if time is greater than 12 but
less than 17 then it shows "Good Afternoon, welcome to our website". if time is greater than 17
but less than 24 then it shows "Good Evening, welcome to our website".

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 7: Write a JavaScript to apply various validations on fields of Student

Registration Form of Practical set 1(4).
 Theory:
Following pictorial shows in which field, what validation we want to impose. For Example,

 How would we set those validations?

o We will create JavaScript functions (one for each input field whose value is to
validate) which check whether a value submitted by user passes the validation.

o All those functions are called from another function.

o It sets the focus to the input field until the user supplies a valid value.

o When the user does so, they may proceed and can supply value to the next available
field.

o The later JavaScript function created is called on the on submit event of the form.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


PRACTICAL SET 3 – PHP

[CO3] Develop the server-side PHP scripts using various features for creating customized
web services.
AIM 1: Write PHP script to demonstrate use of given date/time functions.
date (), getdate(), setdate(), time(), checkdate().

 Theory:
setDate () function is an inbuilt function in PHP which is used to reset the current date of Date Time
object with the given date-time object.

The PHP date () function converts timestamp to a more readable date and time format.

The checkdate () function is a built-in function in PHP which checks the validity of the date passed
in the arguments. It accepts the date in the format mm/dd/yyyy. The function returns a Boolean
value. It returns true if the date is a valid one, else it returns false.

The time () function is used to get the current time as a Unix timestamp

The getdate () function is an inbuilt function in PHP which is used to get date/time information of
the current local date/time.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

AIM 2: Write a PHP program to print following patterns.
C.E., L. D. College of Engineering, Ahmedabad-15 37
 WEB PROGRAMMING
(3160713)


1 1
ab 01
234 101
cdef 0101
56789 10101

 Theory:
Generally, the pattern program is not helpful in the actual programming scenario, but we can
learn how to use nested loops by practicing this type of program.
It gives us deep idea about how to interact with one or more loops and how to iterate it.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


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

 Theory:
abs() : This function takes negative value as input and returns the absolute (positive) value of a
integer or float number
round() : This function takes numeric value as argument and returns the next highest integer value
by rounding up value if necessary.
ceil() : This function takes numeric value as argument and returns the next highest integer value by
rounding up value if necessary
floor() : This function takes numeric value as argument and returns the next lowest integer value
(as float) by rounding down value if necessary.
The max() function returns the highest value in an array, or the highest value of several specified
values.
The min() function returns the lowest value in an array, or the lowest value of several specified
values.
The pow() function returns x raised to the power of y
The sqrt() function returns the square root of a number.

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

 WEB PROGRAMMING
(3160713)


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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 4: Extend Practical set 2(7) by viewing information on another page by

clicking submit button using php.

 Theory:
The PHP super globals $_GET and $_POST are used to collect form-data. It is very useful to
retrieve all the information which is filled in form by user.

<form action="welcome.php" method="post">

Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
When the user fills out the form above and clicks the submit button, the form data is sent for
processing to a PHP file named "welcome.php". The form data is sent with the HTTP POST
method.
To display the submitted data, you could simply echo all the variables in welcome.php
page using above mentioned super global variables.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 5: Write a program that demonstrate use of in-built function of cookies.

 Theory:
A cookie is often used to identify a user. A cookie is a small file that the server embeds on the
user's computer. Each time the same computer requests a page with a browser, it will send the
cookie too. With PHP, you can both create and retrieve cookie values.

A cookie is created with the setcookie() function.

setcookie(name, value, expire, path, domain, secure, httponly);

Parameter Description

name Required. Specifies the name of the cookie

value Optional. Specifies the value of the cookie

expire Optional. Specifies when the cookie expires. The value: time () +86400*30, will set
the cookie to expire in 30 days. If this parameter is omitted or set to 0, the cookie
will expire at the end of the session (when the browser closes). Default is 0

path Optional. Specifies the server path of the cookie. If set to "/", the cookie will be
available within the entire domain. If set to "/php/", the cookie will only be
available within the php directory and all sub-directories of php. The default value
is the current directory that the cookie is being set in

domain Optional. Specifies the domain name of the cookie. To make the cookie available
on all subdomains of example.com, set domain to "example.com". Setting it to
www.example.com will make the cookie only available in the www subdomain

secure Optional. Specifies whether the cookie should only be transmitted over a secure
HTTPS connection. TRUE indicates that the cookie will only be set if a secure
connection exists. Default is FALSE

httponly Optional. If set to TRUE, the cookie will be accessible only through the HTTP
protocol (the cookie will not be accessible by scripting languages). This setting can
help to reduce identity theft through XSS attacks. Default is FALSE

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


PRACTICAL SET 4 – PHP & MYSQL

[CO4] Write the server side scripts for designing web-based services with database
connectivity.

AIM 1: Extend Practical set 3(4) by applying insert operation and display the
student records with update and delete facility.

 Theory:

Before we can access data in the MySQL database, we need to be able to connect to the server
connection object.

After a database and a table have been created, we can start adding data in them.

Here are some syntax rules to follow:

 The SQL query must be quoted in PHP

 String values inside the SQL query must be quoted
 Numeric values must not be quoted
 The word NULL must not be quoted

The INSERT INTO statement is used to add new records to a MySQL table:

INSERT INTO table_name (column1, column2, column3,...)

VALUES (value1, value2, value3,...)

The UPDATE statement is used to update existing records in a table:

UPDATE table_name
SET column1=value, column2=value2,...
WHERE some_column=some_value

The DELETE statement is used to delete records from a table:

DELETE FROM table_name

WHERE some_column = some_value.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 2: The user is first served a login page which takes users name and
password. After submitting the details, the server checks these values against
the data from a database and takes the following decisions
a. If name and password match, serves a welcome page with user's full
name.
b. If name matches and password does not match, then serves password
mismatch page.
c. If name not found in database, serves a registration page where users full
name is asked and on submitting the full name, it stores, the login name,
password and full name in the database (HINT: Use session for storing
the submitted login name and password.)
Theory:
A session is a way to store information (in variables) to be used across multiple pages.

Unlike a cookie, the information is not stored on the user’s computer.

What Is 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, favourite colour, 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.

Get PHP Session Variable Values

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.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


AIM 2: Write a program that keeps track of how many times a visitor has loaded
the page.

Theory:
A session mechanism can be used to store page views which increment on each refresh and
show the count on a webpage. A session is user specific and for every user, a separate session
is created along with a separate session variable which is associated with that session.
Using this mechanism, for every user the session variable is set to 1 initially for the first visit.
On consecutive visits, the value of this session variable is incremented and displayed on the
output webpage.

 Program:
C.E., L. D. College of Engineering, Ahmedabad-15 51
 WEB PROGRAMMING
(3160713)


 Output

Signature of Faculty: Grade:

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

 WEB PROGRAMMING
(3160713)


PRACTICAL SET 5 – AJAX & JQuery

[CO5] Develop a web application using advanced web programming features including AJAX
and JQuery using concepts of Web API.

AIM 1: Mini Project on given titles.

 Theory:
What is Ajax?

Asynchronous JavaScript and XML can be defined as a set of users in building websites and web
applications. Identifying specific purposes in web development applications is the best way to
understand Ajax. Ajax’s main work is to update the content asynchronously means in the user’s
web page whole content need not be reloaded, and only the required field is reloaded. XML is a
markup language means these are coded languages to annotate parts of a web document which
gives web browsers instructions about understanding and displaying the user content.

It combines various programming tools like JavaScript, HTML, DHTML, XML (extensible
markup language), CSS (cascading style sheets), DOM (document object model) and Microsoft
object

What is jQuery?

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS
document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the
terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM
animations, Ajax interactions, and cross-browser JavaScript development

What is Web API?

API stands for Application Programming Interface. API is actually some kind of interface
which is having a set of functions. These set of functions will allow programmers to acquire
some specific features or the data of an application.

Web API is an API as the name suggests, it can be accessed over the web using the HTTP
protocol. It is a framework that helps you to create and develop HTTP based RESTFUL
services. The web API can be developed by using different technologies such as java,
ASP.NET, etc.

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

 WEB PROGRAMMING
(3160713)


 Program:

 Output

Signature of Faculty: Grade:

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