MVJ College of Engineering

(An ISO 9001:2000 Certified Institution)

Engineered for Channasandra, Near ITPL, Bangalore-560 067
Excellence in
Education

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

VII SEMESTER

06CSL78 – WEB PROGRAMMING LAB

ACADEMIC YEAR 2009 – 2010

LABORATORY MANUAL

NAM E OF THE STUDENT :

BRANCH :

UNIVERSITY SEAT NO. :

SEMESTER & SECTION :

BATCH :
06CSL78 Web Programming Laboratory

M.V.J. COLLEGE OF ENGINEERING

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

06CSL78 – WEB PROGRAMMING LAB

LABORATORY MANUAL
06CSL78 Web Programming Laboratory

CONTENTS

EXPT.NO NAME OF THE EXPERIMENT PAGE.NO

01 PROGRAM1 06
02 PROGRAM2 08
03 PROGRAM3 13
04 PROGRAM4 16
05 PROGRAM5 20
06 PROGRAM6 24
07 PROGRAM7 28
08 PROGRAM8 31
09 PROGRAM9 35
10 PROGRAM10 36
11 PROGRAM11 38
12 PROGRAM12 40
13 PROGRAM13 42
14 PROGRAM14 45

Information Science & Engineering 3 VII SEM

06CSL78 Web Programming Laboratory

PROGRAMS

1. Develop and demonstrate a XHTML document that illustrates the

Use external style sheet, ordered list, table, borders, padding, color,
and the <span> tag.

2. Develop and demonstrate a XHTML file that includes Javascript

Script for the following problems:

a) Input: A number n obtained using prompt

Output: The first n Fibonacci numbers

b) Input: A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using
Alert

3. Develop and demonstrate a XHTML file that includes Javascript

Script that uses functions for the following problems:
a) Parameter: A string
Output: The position in the string of the left-most vowel

b) Parameter: A number
Output: The number with its digits in the reverse order

4. a) Develop and demonstrate, using Javascript script, a XHTML

document that collects the USN ( the valid format is: A digit from 1
to 4 followed by two upper-case characters followed by two digits
followed by two upper-case characters followed by three digits; no
embedded spaces allowed) of the user. Event handler must be
included for the form element that collects this information to
validate the input. Messages in the alert windows must be produced
when errors are detected.

b) Modify the above program to get the current semester also

(restricted to be a number from 1 to 8)

5. a) Develop and demonstrate, using Javascript script, a XHTML

document that contains three short paragraphs of text, stacked on top
of each other, with only enough of each showing so that the mouse
cursor can be placed over some part of them. When the cursor is
placed over the exposed part of any paragraph, it should rise to the
top to become completely visible.

b) Modify the above document so that when a paragraph is moved

from the top stacking position, it returns to its original position
rather than to the bottom.

Information Science & Engineering 4 VII SEM

06CSL78 Web Programming Laboratory

6. a) Design an XML document to store information about a student in

an engineering college affiliated to VTU. The information must
include USN, Name, Name of the College, Brach, Year of Joining,
and e-mail id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.

b) Create an XSLT style sheet for one student element of the above
document and use it to create a display of that element.

7. a) Write a Perl program to display various Server Information like

Server Name, Server Software, Server protocol, CGI Revision etc.

b) Write a Perl program to accept UNIX command from a HTML

form and to display the output of the command executed.

8. a) Write a Perl program to accept the User Name and display a

greeting message randomly chosen from a list of 4 greeting
messages.

b) Write a Perl program to keep track of the number of visitors

visiting the web page and to display this count of visitors, with
proper headings.

9. Write a Perl program to display a digital clock which displays the

current time of the server.

10. Write a Perl program to insert name and age information entered by
the user into a table created using MySQL and to display the current
contents of this table.

11. Write a PHP program to store current date-time in a COOKIE and

display the ‘Last visited on’ date-time on the web page upon
reopening of the same page.

12. Write a PHP program to store page views count in SESSION, to

increment the count on each refresh, and to show the count on web
page.

13. Create a XHTML form with Name, Address Line 1, Address Line 2,
and E-mail text fields. On submitting, store the values in MySQL
table. Retrieve and display the data based on Name.

14. Using PHP and MySQL, develop a program to accept book

information viz. Accession number, title, authors, edition and
publisher from a web page and store the information in a database
and to search for a book with the title specified by the user and to
display the search results with proper headings.

Information Science & Engineering 5 VII SEM

06CSL78 Web Programming Laboratory

Program 1:

Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered
list, table, borders, padding, color, and the <span> tag.

Program:
lab1.html –

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//w3c//DTDXHTML/.1//EN"
"http://www.w3org/TR/xhtml11/DTD/xhtml.dtd"?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First Lab Manual Program</title>
</head>
<body>
<h1>About Web Programming
<ol>
<li>Case Sensitive</li>
<li>Similar to html 4.01</li>
<li>All tags should be closed</li>
</ol>
<table border="3" bgcolor="#CCCCC" cellpadding="30">
<tr>
<th> USN </th>
<th> NAME</th>
<th> DEPT </th>
</tr>
<tr class="backcolor">
<td> 1mj07mca21 </td>
<td> Mithilesh</td>
<td> Mca </td>
</tr>
<tr class="backcolor">
<td> 1mj07mca26 </td>
<td> Nawin</td>
<td> MCA </td>
</tr>
</table>
<style type="text/css">.A{font-size:24pt;font-family:ariel;color:red}
</style>
<p>
This is student<span class="A"> marks </span> information
</p>
</body>
</html>

Information Science & Engineering 6 VII SEM

06CSL78 Web Programming Laboratory

Output –

Write two files as mentioned and open the lab1.html to get the output as below –

Information Science & Engineering 7 VII SEM

06CSL78 Web Programming Laboratory

Program 2:
Develop and demonstrate a XHTML file that includes JavaScript script for the following problems:
a.Input: A number n obtained using prompt
Output: The first n Fibonacci numbers

Program:

2(a).html –
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Second program </title>
<SCRIPT LANGUAGE="JAVASCRIPT">
var f0=0,f1=1,fn=0,i=1;
n=prompt("Enter the number of terms u want",0);
document.write("The first " + n + " fibonacci series are ");
while(i<=n)
{
document.write(f0 + " ");
fn=f0+f1;
f0=f1
f1=fn;
i++;
}
</SCRIPT>
</head>

</html>

Information Science & Engineering 8 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 9 VII SEM

06CSL78 Web Programming Laboratory

2b. Input: A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using alert

Program-
2(b).html –
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml.dtd"?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 2b</title>
<body>
<script language="javascript">
<!--
var n,i,j,p,k=1,s;
n=prompt("Enter the value"," ");
document.writeln("value of n = "+n);
document.writeln("<br/>");
for(i=1;i<=n;i++)
{
for(j=1;j<=10;j++)
{
p=k*j;
document.writeln(p+" ,");
}
k++;
document.writeln("<br/>");
}
alert("THEIR SQUARE IS ");
document.writeln("<br/></br>");
k=1;
document.writeln("Their squares are");
document.writeln("</br></br>");
for(i=1;i<=n;i++)
{
for(j=1;j<=10;j++)
{
p=k*j;
s=p*p;
document.writeln(s+" ,");
}
k++;
document.writeln("<br/>");
}
document.close();
//-->
</script></body></html>

Information Science & Engineering 10 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 11 VII SEM

06CSL78 Web Programming Laboratory

When you click on ok button the following output will be shown –

Information Science & Engineering 12 VII SEM

06CSL78 Web Programming Laboratory

Exercise 3:

a. Develop and demonstrate a XHTML file that includes JavaScript script that uses functions for the
following problems:
a) Parameter: A string
Output: The position in the string of the left-most vowel

Program:

3(a).html –
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Finding out the Left most vowel </title>
<script language="javascript">
var str1=new String();
var i,j=0;
str1=prompt("Enter a string", "");
for(i=0;i<str1.length;i++)
{
switch(str1.charAt(i))
{
case 'a':
case 'e':
case 'i':
case 'o':
case 'u':
j=1;
}
if(j==1)
break;
}
if(j==1)
{
i=i+1;
document.write("First vowel position = " +i);
}
else
document.write("No vowels found");
</script>
</html>

Information Science & Engineering 13 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 14 VII SEM

06CSL78 Web Programming Laboratory

3b. Parameter: A number

Output: The number with its digits in the reverse order

Program:-

3(b).html –
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Finding whether a number is palendrome or not </title>
<script language="javascript">
var n,m,r,rev=0;
n=prompt("Enter a number","");
m=n;
while(n>0)
{
r=n%10;
rev=(rev*10)+r;
n=parseInt(n/10);
}
document.write("Reversed number = " +rev);
</script>
</html>

Output –

Information Science & Engineering 15 VII SEM

06CSL78 Web Programming Laboratory

Exercise 4:
a. Develop and demonstrate, using JavaScript script, a XHTML document that collects the USN
( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two
digits followed by two upper-case characters followed by three digits;no embedded spaces
allowed) of the user. Event handler must be included for the form element that collects this
information to validate the input. Messages in the alert windows must be produced when
errors are detected.
Program:-

4(a).html –
<html>
<head>
<title> Simple validation program </title>

<style type="text/css">
#a {MARGIN: 100px; WIDTH: 300px; BORDER: lime 2px solid; BACKGROUND: #f3f3f3}

</style>

<script language="JavaScript" type="text/javascript" src="valid1.js"></script>

</script>
<body>
<center>
<div id=a>
<form name=form1><BR>
<b>USN :</b> &nbsp;&nbsp; <input name=usn> <br>
<pre> <input onclick=check_data() type=button value=Submit>
</pre>
</form>
</div>
</center>
</body>
</html>

Valid1.js –
function check_data()
{
var usn=form1.usn.value;
if(usn=="")
{
alert("Please fill the USN field");
form1.usn.focus();
}
else
{
var str= /[0-9][A-Z][A-Z][0-9][0-9][a-zA-Z][a-zA-Z][0-9][0-9][0-9]$/;
if (!usn.match(str))
alert("Enter Valid USN, Ex- 1MJ07cs001");
else
document.write("Success");
}

Information Science & Engineering 16 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 17 VII SEM

06CSL78 Web Programming Laboratory

4b. Modify the above program to get the current semester also (restricted to be a number from 1 to8)
Program:

4(b).html –
<html>
<head>
<title> Simple validation program </title>

<style type="text/css">
#a {MARGIN: 100px; WIDTH: 300px; BORDER: lime 2px solid; BACKGROUND: #f3f3f3}

</style>

<script language="JavaScript" type="text/javascript" src="valid2.js"></script>

</script>

<body>
<center>
<div id=a>

<form name=form1><BR>
<b>USN :</b> &nbsp;&nbsp; <input name=usn> <br>
<b>SEM :</b> &nbsp;&nbsp; <input name=sem> <br>

<pre> <input onclick=check_data() type=button value=Submit>

</pre>

</form>

</div>

</center>

</body>
</html>
valid2.js –
function check_data()
{
var usn=form1.usn.value;
var sem=form1.sem.value;
if(usn=="")
{
alert("Please fill the USN field");
form1.usn.focus();
}

Information Science & Engineering 18 VII SEM

06CSL78 Web Programming Laboratory

else
{
var str= /[0-9][A-Z][A-Z][0-9][0-9][a-zA-Z][a-zA-Z][0-9][0-9][0-9]$/;
if (!usn.match(str))
alert("Enter Valid USN, Ex- 1MJ07cs001");
else
{
if(sem=="")
{
alert("Please fill the sem field");
form1.usn.focus();
}
else
{
var str= /^[1-8]$/;
if (!sem.match(str))
alert("Enter Valid SEM (1 to 8)");
else
document.write("Success");
}
}
}
}
Output –

Information Science & Engineering 19 VII SEM

06CSL78 Web Programming Laboratory

Exercise 5:
a. Develop and demonstrate, using JavaScript script, a XHTML document that contains three short
paragraphs of text, stacked on top of each other, with only enough of each showing so that the mouse
cursor can be placed over some part of them. When the cursor is placed over the exposed part of any
paragraph, it should rise to the top to
become completely visible.
b. Modify the above document so that when a paragraph is moved from the top stacking position,
it returns to its original position rather than to the bottom

Program -

5.html –
<html>
<head>
<title> A simple Validation script </title>

<script language="JavaScript">

function clearr()
{
form1.text.value="";
div1.style.visibility = "visible";
div2.style.visibility = "visible";
div3.style.visibility = "visible";
}

function show(div)
{
form1.text.value=(document.getElementById(div)).innerHTML;
if(div=="div1")
div1.style.visibility = "hidden";
else if(div=="div2")
div2.style.visibility = "hidden";
else
div3.style.visibility = "hidden";
}

</script>
</head>

<body>
<form name="form1">
<textarea name="text" cols=166 rows=10 style="font-family:'times new roman';font-size:14pt;
border=0;"> </textarea>
</form>

Information Science & Engineering 20 VII SEM

06CSL78 Web Programming Laboratory

<div style="position:absolute;top:400;color:red" id="div1" onclick="show('div1')"

onMouseOut="clearr()" >
Confirm Box - A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the
user clicks "OK", the box returns true. If the user clicks
"Cancel", the box returns false.Syntax- confirm("sometext");
</div>

<div style="position:absolute; top:380; font-size:25pt" id="div2" onclick="show('div2')"

onMouseOut="clearr()">
Prompt Box - A prompt box is often used if you want the user to input a value before entering a
page. When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the
input value. If the user clicks "Cancel" the box returns null.
Syntax- prompt("sometext","defaultvalue");
</div>

<div style="position:absolute;top:380; font-weight:bold" id="div3" onclick="show('div3')"

onMouseOut="clearr()">
An alert box - it is often used if you want to make sure information comes through to the user.When
an alert box pops up, the user will have to click "OK" to proceed.
Syntax- alert("sometext");
</div>

</body>
</html>

Information Science & Engineering 21 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 22 VII SEM

06CSL78 Web Programming Laboratory

Information Science & Engineering 23 VII SEM

06CSL78 Web Programming Laboratory

Exercise 6:

a. Design an XML document to store information about a student in an engineering college affiliated
to VTU. The information must include USN, Name, Name of the
College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS
style sheet and use it to display the document.

Program:

6(a).xml –
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE std-info [
<!ELEMENT std-info (std+)>
<!ELEMENT std (USN,Name,collegeName,Branch,YOJ,Mail)>
<!ELEMENT USN (#PCDATA)>
<!ELEMENT CollegeName (#PCDATA)>
<!ELEMENT Branch (#PCDATA)>
<!ELEMENT YOJ (#PCDATA)>
<!ELEMENT Mail (#PCDATA)>
]>
<std-info>
<std category="cs">
<USN>USN : 1MJ07MCA21</USN>
<Name>Name : Mithilesh</Name>
<CollegeName>College : MVJCE</CollegeName>
<Branch>Department : MCA</Branch>
<YOJ>YOJ : 2007</YOJ>
<Mail>Email : [email protected]</Mail>
</std>
<std category="is">
<USN>USN : 1MJ07MCA26</USN>
<Name>Name : Nawin</Name>
<CollegeName>College : MVJCE</CollegeName>
<Branch>Dept : MCA</Branch>
<YOJ>YOJ : 2007</YOJ>
<Mail>Email : [email protected]</Mail>
</std>
<std category="MCA">
<USN>USN : 1MJ07MCA48</USN>
<Name>Name : Sudhansu</Name>
<CollegeName>College : MVJCE</CollegeName>
<Branch>Dept : MCA</Branch>
<YOJ>YOJ : 2007</YOJ>
<Mail>Email : [email protected]</Mail>
</std>
</std-info>

Information Science & Engineering 24 VII SEM

06CSL78 Web Programming Laboratory

Style.css
USN{display:block;font-style:italic;font-size:14pt;color:black;}
Name{display:block;font-style:italic;font-size:14;color:blue;}
CollegeName{display:block;font-size:14;color:blue;}
Branch{display:block;font-size:14;color:blue;}
YOJ{display:block;font-size:14;color:blue;}
Email{font-size:14;color:brown;display:block;}

Output –

Write three files as mentioned with correct extension in the same directory. Then open 6(a).xml to get
the following output –

Information Science & Engineering 25 VII SEM

06CSL78 Web Programming Laboratory

6b. Create an XSLT style sheet for one student element of the above document and use it to create a
display of that element.

Program -

6(b).xml –
<?xml version="1.0" encoding="utf-8" ?>

<?xml-stylesheet type="text/xsl" href="sample.xsl" ?>

<student>

<usn> 1MJ07MCA21 </usn>

<name> MITHILESH KUMAR </name>
<branch> MCA </branch>
<college> MVJ COLLEGE </college>
<year_of_joining> 2007 </year_of_joining>
<email_id> [email protected] </email_id>

</student>

sample.xsl –
<?xml version = "1.0" encoding = "utf-8" ?>

<xsl:stylesheet version = "1.0" xmlns:xsl= "http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>

<h1> STUDENT LIST </h1>

<xsl:for-each select="student">

Usn: <span style="font-size:15pt;color:red">

<xsl:value-of select = "usn" /> <br/> </span>
Name: <xsl:value-of select = "name" /> <br/>
Branch: <xsl:value-of select = "branch" /> <br/>
College: <xsl:value-of select = "college" /> <br/>
Year_of_joining: <xsl:value-of select = "year_of_joining" /> <br/>
Email_id: <xsl:value-of select = "email_id" /> <br/>

</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Information Science & Engineering 26 VII SEM

06CSL78 Web Programming Laboratory

Output –

Write two files as mentioned with correct extension in the same directory. Then open 6(b).xml to get the
following output –

Information Science & Engineering 27 VII SEM

06CSL78 Web Programming Laboratory

Exercise 7:

a.. Write a Perl program to display various Server Information like Server Name, Server Software,
Server protocol, CGI Revision etc.

Program:

7(a).cgi –
#! "d:\Perl\bin\perl.exe"

print "Content-Type: text/html\n\n";

print "<html>\n\n";

print "<body><h1>About the Server</h1>";

print "<hr>";

print "Server Name: ", $ENV{SERVER_NAME}, "<br>\n";

print "Running on Port: ", $ENV{SERVER_PORT}, "<br>", "\n";

print "Server Software: ", $ENV{SERVER_SOFTWARE}, "<br>", "\n";

print "Server Protocol: ", $ENV{SERVER_PROTOCOL}, "<br>", "\n";

print "CGI Revision: ", $ENV{GATEWAY_INTERFACE},"<br>", "\n";

print "<hr>\n";
print "</body></html>\n";

Information Science & Engineering 28 VII SEM

06CSL78 Web Programming Laboratory

Output –

Steps to Execute –
First install any server like xampp or Apache. Then write above two files. Copy the 7(a).cgi into the
directory cgi-bin which will be inside the installed xampp or apache on your machine. Then open web
browser, Type http://localhost/cgi-bin/7(a).cgi then you will se the output as given below –

Information Science & Engineering 29 VII SEM

06CSL78 Web Programming Laboratory

7b. Write a Perl program to accept UNIX command from a HTML form and to display the output of
the command executed.

Program:

7(b).html
<html>
<body>
<form action="http://localhost/cgi-bin/7(b).cgi" method="post">
<input type="text" name="txtbox">

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

</form>
</body></html>

7(b).cgi

#!"d:\Perl\bin\perl.exe"

use CGI ":standard";

print header;
print start_html("this is a page");
my $cmd=param("txtbox");
exec($cmd);

Output –

Steps to Execute –
First install any server like xampp or Apache. Then write above two files. Copy the 7(b).cgi into the
directory cgi-bin which will be inside the installed xampp or apache on your machine. Then open
7(b).html and put the unix command over the text box and click execute. This will give output as -

Information Science & Engineering 30 VII SEM

06CSL78 Web Programming Laboratory

Thurs feb 6 06:57:55 PST 2008

Exercise 8:

a. Write a Perl program to accept the User Name and display a greeting message randomly chosen
from a list of 4 greeting messages.

Program:-

8(a).html
<html>
<body>
<form action="http://localhost/cgi-bin/8(a).cgi" method="post">
Enter the user name:<input type="text" name="txtbox">

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

</form>
</body></html>
8(a).cgi
#!"E:\Perl\bin\perl.exe"

use CGI ":standard";

print header;

print start_html("this is a page");

$i=0;
@message=('hi',"hello","welcome");

my $cmd=param("txtbox");

$index=length($cmd)%4;

print "$message[$index]";

print " $cmd";

Information Science & Engineering 31 VII SEM

06CSL78 Web Programming Laboratory

Output –

First install any server like xampp or Apache. Then write above two files. Copy the 8(a).cgi into the
directory cgi-bin which will be inside the installed xampp or apache on your machine. Then open
8(a).html and give the user name over the text box and click ok. This will give output as -

Information Science & Engineering 32 VII SEM

06CSL78 Web Programming Laboratory

8b. Write a Perl program to keep track of the number of visitors visiting the web page and to display
this count of visitors, with proper headings.

Program:

8(b).cgi
#!"d:\Perl\bin\perl.exe"

use CGI ":standard";

print header;

print start_html("this is a page");

$file = 'colours.txt'; # Name the file

open(INFO, $file); # Open the file
$n = <INFO>; # Read it into an array

close(INFO);
print "Visit No = $n";

open INFO, ">colours.txt";

print INFO ++$n;

close INFO;

Information Science & Engineering 33 VII SEM

06CSL78 Web Programming Laboratory

Output –

First install any server like xampp or Apache. Then write above two files. Copy the 8(b).cgi into the
directory cgi-bin which will be inside the installed xampp or apache on your machine. Then open web
browser, Type http://localhost/cgi-bin/8(b).cgi then you will se the output as given below –

Here the visit number is not showing since this is your 1st time. When you will click refresh button the
visit number will increase to 1 as below-

This visit number will keep on increasing as much time you will open this file.

Information Science & Engineering 34 VII SEM

06CSL78 Web Programming Laboratory

Exercise 9:

Write a Perl program to display a digital clock which displays the current time of the server.

Program:

9.cgi –
#!"d:\Perl\bin\perl.exe"

use CGI ":standard";

print header;

print start_html("this is a page");

my ($s,$m,$h)=localtime();

$date=localtime();

print h2("Current Time");

print "$h:","$m:","$s";

Output –

First install any server like xampp or Apache. Then write above two files. Copy the 9.cgi into the
directory cgi-bin which will be inside the installed xampp or apache on your machine. Then open web
browser, Type http://localhost/cgi-bin/9.cgi then you will se the output as given below –

Information Science & Engineering 35 VII SEM

06CSL78 Web Programming Laboratory

Exercise 10:

Write a Perl program to insert name and age information entered by the user into a table created
using MySQL and to display the current contents of this table.

Program:

10.html –
<html>
<head><title>exercise14</title></head>
<body>
<form action="http://localhost/cgi-bin/exer10.pl" method="post">
ID : <input type="text" name="id"><br>
Name : <input type="text" name="name"><br>
Age : <input type="text" name="age"><br>
<input type="Submit">
</form>
</body>
</html>

10.cgi –

#!"d:\Perl\bin\perl.exe"

use CGI ":standard";

use DBI;

print header;

print start_html("this is a page");

$name=param("name");
$age=param("age");

$db=DBI->connect('DBI:mysql:student','chinu');

$sqlinsert="insert into student values('$name','$age')";

$qh=$db->prepare($sqlinsert);

$qh->execute();

Information Science & Engineering 36 VII SEM

06CSL78 Web Programming Laboratory

Output –

Information Science & Engineering 37 VII SEM

06CSL78 Web Programming Laboratory

Exercise 11:

Write a PHP program to store current date-time in a COOKIE and display the ‘Last visited on’ date-
time on the web page upon reopening of the same page.

Program:

11.php –
<?
if(isset($_COOKIE['Datee']))
{
$cookiedate = $_COOKIE['Datee'];
}

$today = getdate();
//print_r($today); -you can see the format using this command
$d = $today[mday];
$m = $today[mon];
$y = $today[year];
$hr = $today[hours];
$mi = $today[minutes];
$se = $today[seconds];

$datestring ="$d-$m-$y, $hr:$mi:$se";

setcookie("Datee",$datestring);

print "Last visted date and time :".$cookiedate." ";

?>

Information Science & Engineering 38 VII SEM

06CSL78 Web Programming Laboratory

Output –
How to execute –
Copy this 11.php file to a directory named ‘htdocs’ which will be inside your installed xampp or
Apache web server. Then open web browser and type http://localhost/11.php . Then you will get the
output as follows –

For the first time Last visted date and time will not be displayed. When you click the refresh button it
will show the last time you visited this page as follows –

Information Science & Engineering 39 VII SEM

06CSL78 Web Programming Laboratory

Exercise 12:

Write a PHP program to store page views count in SESSION, to increment the count on each refresh,
and to show the count on web page.

Program:

<?php
session_start();
if(isset($_SESSION['count']))
{
print "Your session count: ".$_SESSION['count']. "<br>";
$_SESSION['count']++;
}
else
{
$_SESSION['count'] = 1;
print "Session does not exist";
}
?>

Information Science & Engineering 40 VII SEM

06CSL78 Web Programming Laboratory

Output –

Copy this 12.php file to a directory named ‘htdocs’ which will be inside your installed xampp or Apache
web server. Then open web browser and type http://localhost/12.php . Then you will get the output as
follows –

When you execute for the first time it will show this –

After that the session count will be increased each time it will be opened as follows –

Information Science & Engineering 41 VII SEM

06CSL78 Web Programming Laboratory

Exercise 13:

Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields. On
submitting, store the values in MySQL table. Retrieve and display the data based on Name.

Program:

13.html –
<html>
<head> <title>Database access from php</title>

<script language="javascript">
function empty()
{
form1.name.value="";
form1.add1.value="";
form1.add2.value="";
form1.email.value="";
form1.sname.value="";
}
</script>
</head>

<body onload="empty()">
<form name=form1 action="http://localhost/13.php" method="post">

<h2>Inserting a Record </h2>

Name : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="name"><br>
Address 1 : <input type="text" name="add1"><br>
Address 2 : <input type="text" name="add2"><br>
Email : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="email"><br><br><br>

<h2>Searching a Record </h2>

Enter the name to retrieve data’s : <input type="text" name="sname"><br>

<center> <input type="Submit" value="submit"> </center>

</form>
</body>
</html>

Information Science & Engineering 42 VII SEM

06CSL78 Web Programming Laboratory

13.php –
<?
$db=mysql_connect("localhost","root","chinu");
mysql_select_db("student",$db);

$name=$_POST['name'];
$add1=$_POST['add1'];
$add2=$_POST['add2'];
$email=$_POST['email'];
$sname=$_POST['sname'];

if($name=="" && $add1=="" && $add2=="" && $email=="")

echo "No record inserted <br><br>";
else
{
$query1="INSERT INTO student VALUES ('$name','$add1','$add2','$email')";
$result=mysql_query($query1);
echo "Record successfully inserted <br><br>";
}
if($sname!="")
{
$query2="SELECT * FROM student where name = '$sname'";
$result=mysql_query($query2);

echo "Selected record -> <br><br>";

while($record=mysql_fetch_assoc($result))
{
while(list($fieldname,$fieldvalue)=each($record))
{
echo "$fieldname: $fieldvalue <br>";
}
}
}
?>

Output –
How to Execute –
Before executing this program you need to install the MySql software. While it is being installed give
proper password. Then open ‘MySQL Command Line Client’, there give the password e.g. ‘chinu’.
Then create the database using the following query –

Information Science & Engineering 43 VII SEM

06CSL78 Web Programming Laboratory

create database student;

The write
use student;
Then create the student table using the following query –
create table student(name varchar(20),add1 varchar(50),add2 varchar(50),email varchar(30));

Now insert data into the table using the following query –
insert into student values(‘chinu’,’channasandra’,’bangalore’,’[email protected]’);
Similarly insert some more records.

And after that you copy the 13.php file to the directory named ‘htdocs’ which will be inside your
installed xampp or Apache web server. Then open the 13.html and give necessary input to get respective
output as follows –

When you click on submit the following window will appear –

Information Science & Engineering 44 VII SEM

06CSL78 Web Programming Laboratory

Exercise 14:
Using PHP and MySQL, develop a program to accept book information viz. Accession number, title,
authors, edition and publisher from a web page and store the information in a database and to search
for a book with the title specified by the user and to display the search results with proper headings.

Program:

14.html –
<html>
<head><title>Database Access</title>

<script language="javascript">
function empty()
{
form1.accession.value="";
form1.title.value="";
form1.author.value="";
form1.edition.value="";
form1.publisher.value="";
form1.btitle.value="";
}

</script>

</head>

<body onload="empty()">

<form name=form1 action="http://localhost/14.php" method="post">

<h2>Inserting a Record </h2>

Accession number: <input type="text" name="accession"> <br>
Title : <input type="text" name="title"> <br>
Author: <input type="text" name="author"> <br>
Edition: <input type="text" name="edition"> <br>
Publisher: <input type="text" name="publisher"> <br><br><br>

<h2>Searching a book </h2>

Enter the book Title : <input type="text" name="btitle"> <br>

Information Science & Engineering 45 VII SEM

06CSL78 Web Programming Laboratory

<center> <input type="Submit" value="submit"> </center>

</form>
</body>
</html>

14.php –
<?
$db=mysql_connect("localhost","root","chinu");

mysql_select_db("student",$db);

$accession=$_POST['accession'];
$title=$_POST['title'];
$author=$_POST['author'];
$edition=$_POST['edition'];
$publisher=$_POST['publisher'];
$btitle=$_POST['btitle'];

if($accession=="" && $title=="" && $author=="" && $edition=="" && $publisher=="")

echo "No record inserted <br><br>";
else
{
$query1="INSERT INTO book VALUES ('$accession','$title','$author','$edition','$publisher')";
$result=mysql_query($query1);
echo "Record successfully inserted <br><br>";
}
if($btitle!="")
{
$query2="SELECT * FROM book where title = '$btitle'";
$result=mysql_query($query2);

echo "Selected Books -> <br><br>";

while($record=mysql_fetch_assoc($result))
{
while(list($fieldname,$fieldvalue)=each($record))
{
echo "$fieldname: $fieldvalue <br>";
}
}
}
?>

Information Science & Engineering 46 VII SEM

06CSL78 Web Programming Laboratory

Output –
Similarly you create another table using following query
create table book(accession varchar(10),title varchar(15),author varchar(20), edition
varchar(10),publisher varchar(20));
Insert some data into this table by using the following query
insert into book values(‘1001’,’c program’,’Balaguruswamy’,’4’,’TataMcgrawhill’);

And after that you copy the 14.php file to the directory named ‘htdocs’ which will be inside your
installed xampp or Apache web server. Then open the 14.html and give necessary input to get respective
output as follows –

Information Science & Engineering 47 VII SEM

06CSL78 Web Programming Laboratory

When you click on submit button the following window will appear –

Information Science & Engineering 48 VII SEM