WEB Manual

Dept of Computer Science & Engineering, CMRIT.
WEB PROGRAMMING LABORATORY (06CSL78)
INDEX
Sl
Pa
.
TITLE ge
N
No.
o.
Develop and demonstrate a XHTML document the use of external
3–
1. style sheet, ordered list, table, borders, padding, color and the
6
<span> tag.
Develop and demonstrate a XHTML file that includes JavaScript
script for the following problems:
a) Input: a number n obtained using prompt 7–
2.
Output: The first n Fibonacci numbers. 11
b) Input: A number n obtained using prompt
Output: Numbers 1 to n and their squares, using alert.
Develop and demonstrate a XHTML file that includes JavaScript
script with functions for the following problems:
a) Parameter: a string 12 –
3.
Output: Position in string of leftmost vowel. 16
b) Parameter: a number
Output: The number with its digits in reverse order.
a) Develop and demonstrate, using JavaScript, a XHTML file that
collects the USN(the valid format is: A digit from 1 to 4 followed
by two upper case characters followed by three digits; no
embedded Spaces allowed) of the user. Event handler must be
17 –
4. included for the form element that collects this information to
23
validate the input. Messages in the alert window must be
produced when errors are detected.
b) Modify the above program to get the current semester
also(number between 1 and 8).
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
24 –
5. the cursor is placed over the exposed part of any paragraph, it
29
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.
P a g e |1
Signature of the Staff:
Date:
a) Design an XML document to store information about a student in

an engineering college affiliated to VTU. The information must
include USN, Name, College, branch, Year of Joining, and email id.
30 –
6. Make up sample data for 3 students. Create a css style sheet and
37
use it to display the document.
b) Create an XSLT stylesheet for one student element of the above
document and use it to create a display of that element.
a) W rite a Perl program to display various server information like
Server Name, Server Software, Protocol, CGI Revision, etc. 38 –
7.
b) Write a Perl program to accept a UNIX command from an HTML 42
form and to display the output of the command executed.
a) Write a Perl program to accept the user name and to display a
greeting message randomly chosen from a list of 4 greeting
messages. 43 –
8.
b) Write a Perl program to keep track of the number of Visitors 47
visiting the Web page and to display this count of visitors, with
proper headings.
Write a Perl program to display a digital clock which displays the 48 –
9.
current time of the server. 50
Write a Perl program to insert name and age information entered
51 –
10. by the user into a table created using MySQL and to display the
53
current contents of this table.
Write a PHP program to store current date-time in a COOKIE and
54 –
11. display the ‘Last visited on’ date-time on the web page upon
56
reopening of the same page.
Write a PHP program to store page views count in SESSION, to
57 –
12. increment the count on each refresh, and to show the count on
59
web page.
Create a XHTML form with Name, Address Line 1, Address Line 2,
60 –
13. and E-mail text fields. On submitting, store the values in MySQL
63
table. Retrieve and display the data based on Name.
Using PHP and MySQL, develop a program to accept book
information viz. Accession number, title, authors, edition and
64 –
14. publisher from a web page and store the information in a
67
database and to search for a book with the title specified by the
user and to display the search results with proper headings.
P a g e |2
Date:
PROGRAM 1
Develop and demonstrate a XHTML document the use of

external style sheet, ordered list, table, borders, padding,
color and the <span> tag.
Required Steps
Create an external style sheet with classes defined for the span tag
and <ol>. In the classes for the <span> tag values can be given for
attributes such as color and font weight. The type of ordering (such
as numeric or letters) can be specified for the ordered list, using
the list-style-type attribute.
A link to this style sheet is created in the xhtml document.
Also, a table is created using the <table> tag. Properties of the

table such as padding and border are defined. Headers and data are
entered into the table using the <th> and <td> tags.
P a g e |3
Date:
CODE SECTION
<?xml version="1.0" encoding="utf-8"?>

<!doctype http public "-//w3c//dtd xhtml 1.1 en"
"http://www.w3c.org/tr/xhtml/dtd/xhtml11.dtd">
<html xmlns="http://w3c.org//1999/xhtml">
<head><title>program 1</title>
<link rel="stylesheet" type="text/css" href="p1.css">
</head>
<body><p><span class="blue">Paragraph with class Blue</span>
<br />
<span class="green">Paragraph with class Green</span>
<table border="border" cellpadding="10">
<caption>Name List</caption>
<tr><th colspan="4">List of Names</th></tr>
<tr><th colspan="2">CSE</th><th colspan="2">
ECE</th></tr>
<tr><th>Sec A</th><th>Sec B</th><th>
Sec A</th><th>Sec B</th></tr>
<tr><td>a1</td><td>b1</td>
<td>a2</td><td>b2</td></tr>
</table>
<ol><li>CSE
<ol><li>Sec A
<ol><li>Meenakshi</li><li>Asma</li></ol>
</li>
<li>Sec B
<ol><li>Adam</li><li>Sandler</li></ol>
</li>
</ol>
</li>
<li>ECE
<ol><li>Sec A
<ol><li>Anne</li><li>Amy</li></ol>
</li>
<li>Sec B
<ol><li>Peter</li><li>Sam</li></ol>
</li>
</ol>
</li>
</ol>
</p></body>
</html>
P a g e |4
Date:
EXTERNAL STYLE SHEET
p1.css:
span.blue{color:lightskyblue;font-weight:bold}
span.green{color:darkolivegreen;font-weight:bold}
ol{list-style-type:upper-roman}
ol ol{list-style-type: upper-alpha}
ol ol ol{list-style-type: decimal;}
P a g e |5
Date:
OUTPUT
Paragraph with class Blue

Paragraph with class Green
Name List
List of Names
CSE ECE
Sec A Sec B Sec A Sec B
a1 b1 a2 b2
1. CSE
1. Sec A
1. Meenakshi
2. Asma
2. Sec B
1. Adam
2. Sandler
2. ECE
1. Sec A
1. Anne
2. Amy
2. Sec B
1. Peter
2. Sam
P a g e |6
Date:
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.
b) Input: A number n obtained using prompt
Output: Numbers 1 to n and their squares, using alert.
Required Steps
2a:
Javascript script is embedded within the body of the XHTML file. The
script contains the code to accept the value of n using a prompt.
The first n Fibonacci numbers are then calculated using a do while
loop.
Each number is displayed in the browser window, in order.
2b:
Javascript script is embedded within body of XHTML document, which

accepts the value of n using a prompt.
In a while loop that runs from 1 to n, for each value, the number and
its square are displayed using the alert message box.
CODE SECTION
P a g e |7
Date:
2a:

<!doctype http public "-//w3c//dtd xhtml 1.1 en"
"http://www.w3.org/tr/xhtml/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>lab2a</title></head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
P a g e |8
Date:
OUTPUT
Fibonacci Series:
0
1
1
2
3
5
8
13
21
34
P a g e |9
Date:
CODE SECTION
2b:

<!doctype html public "-//w3c//dtd xhtml 1.1//en"
"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<head><title>lab2b</title></head>
<body>

</script>
</body>
</html>
P a g e | 10
Date:
OUTPUT
PROGRAM 3
P a g e | 11
Date:
Develop and demonstrate a XHTML file that includes

JavaScript script with functions for the following problems:
a) Parameter: a string
Output: Position in string of leftmost vowel.
b) Parameter: a number
Output: The number with its digits in reverse order.
Required Steps
3a:
Javascript is embedded within the XHTML file. It accepts a sting from

the user through a prompt.
The string is displayed and is then scanned character by character.
When the first vowel is found, it is displayed and the script
terminates.
If no vowel is found, an appropriate message is displayed.
3b:
Javascript is embedded within the XHTML file. The number to be

reversed is accepted through a prompt. The number is successively
divided by 10 until the quotient is 0. The remainder of each division
is added to the product of the previously obtained remainder(s) and
10.
The number thus obtained is the reverse of the original number.
CODE SECTION
P a g e | 12
Date:
3a:

<!doctype http public= "-//w3c//dtd xhtml 1.1//en"
"http://www.w3.org/tr/xhtml/dtd/xhtml11.dtd">
<head>
<title>Vowel Position</title>
</head>
<body>

</script>
</body>
</html>
OUTPUT
P a g e | 13
Date:
String is: happy

The leftmost vowel is:a
String is: sky

No vowels found
CODE SECTION
P a g e | 14
Date:
3b:

<!doctype http public="-//w3c//dtd xhtml 1.1//en"
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>reverse</title>
</head>
<body>

</script>
</body>
</html>
OUTPUT
P a g e | 15
Date:
Number entered is: 123
Reverse number is: 321
PROGRAM 4
a) Develop and demonstrate, using JavaScript, a XHTML file that

P a g e | 16
Date:
collects the USN (the valid format is: A digit from 1 to 4

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
window must be produced when errors are detected.
b) Modify the above program to get the current semester also

(number between 1 and 8).
Required Steps
4a:
The USN is accepted through a text box. When the submit button is
clicked, the javascript function for checking validity of the USN is
called. The entered USN is compared with the valid pattern defined by
a regular expression. If there is a mistake, an alert message is
displayed saying so, and the USN typed in the textbox is highlighted
so that the user can enter the right USN.
4b:
In addition to the above, the semester is also accepted. If the value

entered is greater than 8, or lesser than 1, an alert message is
displayed saying the same. The value is then highlighted so that the
user can enter the correct value.
CODE SECTION
P a g e | 17
Date:
4a:

<head>

</script>
</head>
<body>
<h3>USN validation</h3><br />
<br />
<form action=" " id="myform">
<p><label>USN:<input type="text" name="text"
id="usn" /></label>
<br />
<input type="submit" name="submit" value="SUBMIT" />
</p>
</form>
P a g e | 18
Date:

</script>
</body>
</html>
OUTPUT
P a g e | 19
Date:
CODE SECTION
P a g e | 20
Date:
4b:

<head>

</script>
</head>
<body>
<h3>USN & SEM validation</h3><br />
<br />
<form action=" " id="myform">
<p><label>USN:<input type="text" name="text"
id="usn"/></label>
<br />
<label>SEM:<input type="text" name="text"
id="sem" /></label>
<br />
<input type="submit" name="submit" value="SUBMIT" />
</p>
</form>

</script>
</body>
</html>
OUTPUT
P a g e | 22
Date:
PROGRAM 5
P a g e | 23
Date:
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.
Required Steps
The javascript script embedded in the XHTML file consists of a ‘stack’

function. The id of the paragraph that is currently on top is stored
in a variable ‘toplayer’. The id of the paragraph that has been
selected is passed as an argument to the function. Using the
getElementById method, the z-Index(depth factor) of the paragraph that
was previously on top is set to 0 and the z-Index of the newly
selected paragraph is set to 10. The toplayer variable is updated to
hold the id of the paragraph that is currently on top.
Within the XHTML body, the paragraphs are defined. The element
attributes are defined using an external style sheet. The stack
function is called whenever the mouse cursor is placed over any of the
paragraphs(onmouseover tag attribute is used).
P a g e | 24
Date:
CODE SECTION
5a:

<!doctype html public="-//w3c//dtd xhtml 1.1//en"
<head>
<title>Paragraphs</title>
<link rel="stylesheet" type="text/css" href="5.css" />

</script>
</head>
<body>
<h1>Program to demonstrate stack</h1>
<div class="ls1" id="layer1" onmouseover="stack('layer1')">
<b>Paragraph1</b>
</div>
<b>Paragraph2</b>
</div>
<b>Paragraph3</b>
</div>
<b>Paragraph4</b>
</div>
</body>
<html>
P a g e | 25
Date:
5.css:
.ls1{border:solid thick black;

padding:len;
width:500px;
background-color:red;
position:absolute;
top:100px;
left:200px;}
padding:len;
width:500px;
background-color:yellow;
position:absolute;
top:115px;
left:250px;}
padding:len;
width:500px;
background-color:orange;
position:absolute;
top:120px;
left:300px;}
padding:len;
width:500px;
background-color:green;
position:absolute;
top:125px;
left:350px;}
P a g e | 26
Date:
OUTPUT
P a g e | 27
Date:
CODE SECTION
5b:

<!doctype html public "-//w3c//dtd xhtml1.1//en"
<html xmlns: "http://www.w3.org/1999/xhtml">
<head>
<title>Paragraphs</title>
<link rel="stylesheet" type="text/css" href="5.css" />

</script>
</head>
<body>
<h1>Program to show stack implementation</h1>
<b>Paragraph1</b>
</div>
<b>Paragraph2</b>
</div>
<b>Paragraph3</b>
</div>
<b>Paragraph4</b>
</div>
</body>
</html>
P a g e | 28
Date:
OUTPUT
P a g e | 29
Date:
PROGRAM 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, College, branch, Year
of Joining, and email id. Make up sample data for 3 students.
Create a css style sheet and use it to display the document.
b) Create an XSLT stylesheet for one student element of the

above document and use it to create a display of that
element.
Required Steps
6a:
Create an XML document with the details of the students. User defined
tags can be used for each detail such as <usn>, <name>, etc.
Values can be given for the attributes of each of these tags in an
external style sheet.
6b:
An XML file is created for student details as in 6a.
From the set of students, one of them is selected based on the usn
specified. This is done in the xsl file. The details of the selected
student are displayed in a table.
P a g e | 30
Date:
CODE SECTION
6a:
<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/css" href="e6a.css"?>
<studentlist>
<student>
<usn>1CR06CS001</usn>
<name>Ann</name>
<college>CMRIT</college>
<branch>Computer Science </branch>
<joindate>2006</joindate>
<emailid>ann@gmail.com</emailid>
</student>
<student>
<name>Daniel</name>
<emailid>daniel@gmail.com</emailid>
</student>
<student>
<name>Harry</name>
<emailid>harry@gmail.com</emailid>
</student>
</studentlist>
P a g e | 31
Date:
e6a.css:
student{display:block;margin-top:15px;color:blue;}
usn{display:block;color:red;font-weight:bold}
name{display:block;color:brown;}
college{display:block;color:blue;font-weight:bold}
branch{display:block;color:maroon;}
joindate{display:block;color:magenta;font-weight:bold}
emailid{display:block;color:green;}
OUTPUT
P a g e | 32
Date:
1CR06CS001
Ann
CMRIT
Computer Science
2006
ann@gmail.com
1CR06CS005
Daniel
CMRIT
Computer Science
2006
daniel@gmail.com
1CR06CS010
Harry
CMRIT
Computer Science
2006
harry@gmail.com
CODE SECTION
P a g e | 33
Date:
6b:
<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="s2.xsl"?>
<document>
<studentlist>
<student>
<name>Ann</name>
<emailid>ann@gmail.com</emailid>
</student>
<student>
<name>Daniel</name>
<emailid>daniel@gmail.com</emailid>
</student>
<student>
<name>Harry</name>
<emailid>harry@gmail.com</emailid>
</student>
</studentlist>
</document>
s2.xsl:
P a g e | 34
Date:
<?xml version="1.0" encoding="ISO-8859-1" ?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="document">
<html>
<head>
<title>Title</title>
</head>
<body>
<table>
<tr>
<td valign="top">
<xsl:apply-templates select="studentlist" />
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:key name="student-by-usn" match="student" use="usn" />
<xsl:template match="studentlist">
<table border="1">
<xsl:for-each select="key('student-by-usn', '1CR06CS001')">
<tr>
<td>
<xsl:value-of select="usn" />
</td>
<td>
<xsl:value-of select="name" />
</td>
<td>
<xsl:value-of select="college" />
</td>
<td>
<xsl:value-of select="branch" />
</td>
<td>
<xsl:value-of select="joindate" />
</td>
P a g e | 35
Date:
<td>
<xsl:value-of select="emailid" />
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
OUTPUT
P a g e | 36
Date:
1CR06CS001 Ann CMRIT Computer Science 2006 ann@gmail.com
PROGRAM 7
P a g e | 37
Date:
a) W rite a Perl program to display various server information

like Server Name, Server Software, Protocol, CGI Revision,
etc.
b) Write a Perl program to accept a UNIX command from an

HTML form and to display the output of the command
executed.
Required Steps
7a:
• Go to /etc/init.d and start http using the command ./httpd start.

• Check whether httpd is working by opening http://localhost/ using
the browser.
• Create a CGI file in the directory /var/www/cgi-bin.
• Within the file, write the commands to print the details about the
server, using the associated environment variable.
• After checking for errors, run the program in the browser.
7b:

the browser.
• Create the html file for the front end in the directory
/var/www/html.
• The html file should display a text box where the command may be
typed and a submit button to execute the command.
• Create the cgi file in the directory /var/www/cgi-bin.
• The cgi file should retrive the command from the browser, execute it
and display the result on the browser.
P a g e | 38
Date:
CODE SECTION
7a:
CGI file
#!/usr/bin/perl
use strict;
use CGI':standard';
print
header(),
start_html(-bgcolor=>'silver'),
hr(),
"<h2>SERVER INFORMATION</h2>",
hr(),
"Serevr Name:",$ENV{'SERVER_NAME'},
br(),
"Server Software:",$ENV{'SERVER_SOFTWARE'},
br(),
"Server Protocol:",$ENV{'SERVER_PROTOCOL'},
br(),
"server port:",$ENV{'SERVER_PORT'},
br(),
"CGI Revision",$ENV{'GATEWAY_INTERFACE'},
br(),
end_html();
P a g e | 39
Date:
OUTPUT
P a g e | 40
Date:
CODE SECTION
7b:
HTML file
<html>
<body>
<hr>
<h2>UNIX COMMAND</h2>
<form action="/cgi-bin/7b.cgi">
<input type="text" name="cmd">
<input type="submit" value="submit">
</form>
</body>
</html>
CGI file
#!/usr/bin/perl
use strict;
use CGI':standard';
my $cmd=param('cmd');
chomp($cmd=`/bin/$cmd`);
print
header(),
start_html(-bgcolor=>'pink','RESULT'),
hr(),
"<h2>Executing command</h2>",
hr(),
br(),
"$cmd"||"INVALID COMMAND",
br(),
hr(),
end_html();
P a g e | 41
Date:
OUTPUT
P a g e | 42
Date:
PROGRAM 8
a) Write a Perl program to accept the user name and to 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.
Required Steps
8a:

the browser.
• Create a html file in the directory /var/www/html.
• The html file should display a textbox to accept the user name, and
a list of greetings.
• Within the file, write the commands to retrieve the user name and
greeting from the browser and display the greeting with the user
name.
8b:

the browser.
• Create the html file for the front end in the directory
/var/www/html.
• Create the cgi file in the directory /var/www/cgi-bin.
• This folder should also contain a text file with initial value 0.
• The cgi file should contain the commands to retrieve the content of
the file (the count), update the file and display the count in the
browser.
P a g e | 43
Date:
CODE SECTION
8a:
HTML file
<html>
<head><title>Greeting message</title></head>
<body bgcolor=pink>
<hr>
<h2>Greeting</h2>
<hr><br>
<form name=hi action="/cgi-bin/8a.cgi" method="post">
Enter ur name <input type="text" name="name" size=20><br><br>
Greeting type:
<select name="greet" size="4" multiple>
<option>Good morning</option>
<option>Good after noon</option>
<option>Good evening</option>
<option>Good night</option>
</select>
<input type="submit" value="submit"><br><hr>
</form>
</html>
CGI file
#!/usr/bin/perl
use strict;
use CGI':standard';
my $name;
my $greeting;
$name=param('name');
$greeting=param('greet');
print
header(),
start_html(-bgcolor=>'orange','RESULT'),
hr(),
"<h2>Displaying Greeting message</h2>",
hr(),
br(),
"$greeting $name",
hr(),
end_html();
P a g e | 44
Date:
OUTPUT
P a g e | 45
Date:
CODE SECTION
8b:
HTML file
<html>
<body bgcolor=red>
<hr><h1>VISITORS COUNT</h1>
<form action="/cgi-bin/8b.cgi">
<br><input type="submit" value="submit"><br></form>
</body>
</html>
CGI file
#!/usr/bin/perl
use strict;
use CGI':standard';
my $line;
my $count;
open(FH,'<test2.txt')or die"can't open";
while($line=<FH>)
{
$count=$line;
}
close(FH);
$count++;
$line=$count;
open(FH,'>test2.txt')or die"cant't";
while($count)
{
print FH"$count\n";
$count=0;
}
close(FH);
print
header(),
start_html(-bgcolor=>'gray'),
hr(),
"<h1>Visitors count</h1>",
hr(),br(),br(),
"you r the $line user",
hr(),br(),br(),
end_html();
P a g e | 46
Date:
OUTPUT
P a g e | 47
Date:
PROGRAM 9
Write a Perl program to display a digital clock which displays

the current time of the server.
Required Steps

the browser.
• The html file should contain a button that the user can click to
view the digital clock.
• Within the file, write the commands to obtain the current time,
using the appropriate function, determine whether it is ‘AM’ or ‘PM’
and then display the time in the browser.
P a g e | 48
Date:
CODE SECTION
HTML file
<html>
<head><title>Displaying Digital Clock</title>
</head><body bgcolor=pink>
<form action="/cgi-bin/9.cgi">
<hr><br><b><center>DIGITAL CLOCK</center></b>
<hr><br>
<center><input type="submit" value="DISLAY CLOCK"><br>
<br><hr>
</center></form>
</body></html>
CGI file
#!/usr/bin/perl
use strict;
use CGI':standard';
my $ampm;
my($sec,$min,$hour)=localtime(time);
if($hour>12)
{
$hour=$hour-12;
$ampm="PM";
}else
{
$ampm="AM";
}
print
header(),
start_html(-bgcolor=>'pink'),
<<EOHTML;
<head>
<META HTTP-EQUIV="Refresh" CONTENT="1">
<center><hr><b><h1>$hour:$min:$sec:$ampm</h1><b></center><hr>
</head>
EOHTML
end_html();
P a g e | 49
Date:
OUTPUT
On clicking the DISPLAY CLOCK button, a new page with time opens:
P a g e | 50
Date:
PROGRAM 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.
Required Steps

• Also start mysqld using the command ./mysqld start.
the browser.
• In MySQL, select the appropriate database and create a table to hold
the name and age of the user.
• The html file should display the front end, which lets the user
enter name and age information, and submit it.
• The CGI script should retrieve the name and age values from the
front end, connect to the database, prepare the appropriate query
and insert the values into the table.
• Also retrieve all the rows from the table, including the one just
inserted and display it to the user in a table.
P a g e | 51
Date:
CODE SECTION
HTML file
<html>
<body>
<form action="/cgi-bin/a10.cgi">
Name : <input type="text" name="name"> <br>
Age :<input type="text" name="age"> <br>
<input type="submit" value="Submit">
</form>
</html>
CGI file
#! /usr/bin/perl
print "Content-type: text/html\n\n";

print "<HTML><TITLE>Result of the insert operation </TITLE>";
use CGI ':standard';
use DBI;
$dbh=DBI->connect("DBI:mysql:student","root","");
$name=param("name");
$age=param("age");
$qh=$dbh->prepare("insert into user values('$name','$age')");
$qh->execute();
$qh=$dbh->prepare("Select * from user");
$qh->execute();
print "Table info: <br>"
print "<table border size=1><tr><th>Name</th><th>Age</th></tr>";
while ( ($name,$age)=$qh->fetchrow())
{
print "<tr><td>$name</td><td>$age</td></tr>";
}
print "</table>";
$qh->finish();
$dbh->disconnect();
print"</HTML>";
P a g e | 52
Date:
OUTPUT
On clicking submit, a new page with the following table opens.
PROGRAM 11
P a g e | 53
Date:
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.
Required Steps

the browser.
• Create a php file in the directory /var/www/html/php.
• The php file should retrieve the date and time of the previous
access from the cookie, if it has been set.
• It should obtain the current date and time and store it in the
cookie, so that it can be retrieved the next time the web page
accessed.
• The date and time of last access should then be displayed to the
user.
CODE SECTION
P a g e | 54
Date:
PHP file
<?
// get current date information as associative array
if(isset($_COOKIE['Datee']))
{
$cookiedate = $_COOKIE['Datee'];
}
$todayh = getdate();
$d = $todayh[mday];
$m = $todayh[mon];
$y = $todayh[year];
$hr = $todayh[hours];
$mi = $todayh[minutes];
$se = $todayh[seconds];
$datestring ="$d-$m-$y, $hr:$mi:$se";
setcookie("Datee",$datestring);
print "Program for creating and displaying cookie";
print"<br>";
echo "<br>Hello, ".$cookiedate."! last visited!";
print"<br>";
?>
OUTPUT
P a g e | 55
Date:
On refreshing:
P a g e | 56
Date:
PROGRAM 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.
Required Steps

the browser.
• The php file should check whether a SESSION variable is set, and
print the count on the browser if it is.
• The count vaue should then be incremented to include the current
visit also.
• If the variable has not been set, a message should be displayed to
the user, indicating that the session did not exist until now. The
variable should then be initialized to 1 since it is the first
visit.
P a g e | 57
Date:
CODE SECTION
PHP file
<?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";
}
?>
P a g e | 58
Date:
OUTPUT
When page is first opened:
On Refresh:
On refreshing again:
P a g e | 59
Date:
PROGRAM 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.
Required Steps

the browser.
the name, address(in 2 lines) and email-id of the user.
enter name, address and email-id, and submit it.
• The php file should retrieve the details entered by the user.
• It should then insert these details into the corresponding table.
• The row(s) corresponding to the name entered in the search field
should then be displayed to the user.
P a g e | 60
Date:
CODE SECTION
HTML file
<html>
<head>
<title> Database Access using PHP </title>
</head>
<body>
<form action="/php/prg13.php" method="post">
ID: <input type="text" name="id" /><br />
Name: <input type="text" name="name" /><br />
Address1: <input type="text" name="addr1" /><br />
Address2: <input type="text" name="addr2" /><br />
Email: <input type="text" name="email" /><br /><br />
Enter the student's name to retreive data: <input type="text"
name="sname" /><br />
<input type="submit" value="submit">
</form>
</body
</html>
P a g e | 61
Date:
PHP file
<?php
$id=$_POST['id'];
$name=$_POST['name'];
$addr1=$_POST['addr1'];
$addr2=$_POST['addr2'];
$email=$_POST['email'];
$sname=$_POST['sname'];
mysql_connect('localhost','root', '');
mysql_select_db("student") or die("Unable to select
database");
$insertquery="INSERT INTO personinfo
VALUES('$id','$name','$addr1','$addr2','$email')";
mysql_query($insertquery);
$selectquery="SELECT * FROM personinfo where Name='$sname'";
$result=mysql_query($selectquery);
$numrows=mysql_numrows($result);
print "<table border size=1> <tr><th>ID</th><th>Name</th>
<th>Address1</th><th>Address2</th><th>Email</th></tr>";
$rownum=0;
while($rownum<$numrows)
{
$row=mysql_fetch_array($result);
print "<tr><td>".$row['ID']."</td><td>".$row['Name']."</td>
<td>".$row['Address1']."</td><td>".$row['Address2']."</td>
<td>".$row['email']."</td></tr>";
$rownum++;
}
print "</table>";
mysql_close();
?>
P a g e | 62
Date:
OUTPUT
Details of student whose name is Adam is retrieved:
P a g e | 63
Date:
PROGRAM 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.
Required Steps

the browser.
the title, author, edition and publisher of the book.
enter title, author, edition, and publisher of the book and submit
it.
• The php file should retrieve the details entered by the user.
• It should then insert these details into the corresponding table.
• The row(s) corresponding to the book title entered in the search
field should then be displayed to the user.
P a g e | 64
Date:
CODE SECTION
HTML file
<html>
<head>
<title> Accessing Book Database </title>
</head>
<body>
<form action="/php/prg14.php" method="post">
Accession Number: <input type ="text" name="accno" />
<br />
Title: <input type ="text" name="title" /><br />
Authors: <input type ="text" name="author" /><br />
Edition: <input type ="text" name="edition" /><br />
Publisher: <input type ="text" name="publish" /><br />
Search for a book with Title: <input type ="text"
name="search" /><br />
<input type="submit" /> <input type="reset" />
</form>
</body>
</html>
PHP file
<?php
$accno=$_POST['accno'];
$title=$_POST['title'];
$author=$_POST['author'];
$edition=$_POST['edition'];
$publish=$_POST['publish'];
$search=$_POST['search'];
mysql_connect('localhost','root', 'uma');
mysql_select_db("BookDealer") or die("Unable to select
database");
$insertquery="INSERT INTO Bookinfo
VALUES('$accno','$title','$author','$edition','$publish')";
mysql_query($insertquery);
$selectquery="SELECT * FROM Bookinfo where title like
'%$search%'";
$result=mysql_query($selectquery);
P a g e | 65
Date:
$numrows=mysql_numrows($result);
if ($numrows==0)
die("Sorry No matches found");
else
{
print "<table border size=1> <tr><th>AccessionNo</th>
<th>Title</th> <th>Authors</th><th>Edition</th>
<th>Publications</th></tr>";
while($row=mysql_fetch_row($result))
{
print "<tr><td>$row[0]</td><td>$row[1]</td>
<td>$row[2]</td><td>$row[3]</td><td>$row[4]</td></tr>";
}
print "</table>";
}
mysql_close();
?>
OUTPUT
P a g e | 66
Date:
On submitting, the details of the book titled ‘Java’ are displayed:
P a g e | 67
Date:

WEB Manual

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

WEB Manual

Caricato da

Copyright:

Formati disponibili

Dept of Computer Science & Engineering, CMRIT.

WEB PROGRAMMING LABORATORY (06CSL78)

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

Develop and demonstrate a XHTML document the use of

A link to this style sheet is created in the xhtml document.

Also, a table is created using the <table> tag. Properties of the

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

EXTERNAL STYLE SHEET

Paragraph with class Blue

Sec A Sec B Sec A Sec B

Develop and demonstrate a XHTML file that includes

Javascript script is embedded within body of XHTML document, which

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

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

Develop and demonstrate a XHTML file that includes

Javascript is embedded within the XHTML file. It accepts a sting from

Javascript is embedded within the XHTML file. The number to be

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

String is: happy

String is: sky

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

Number entered is: 123

Reverse number is: 321

a) Develop and demonstrate, using JavaScript, a XHTML file that

collects the USN (the valid format is: A digit from 1 to 4

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

In addition to the above, the semester is also accepted. If the value

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

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

a) Develop and demonstrate using JavaScript script, a XHTML

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

The javascript script embedded in the XHTML file consists of a ‘stack’

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

.ls1{border:solid thick black;

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

a) Design an XML document to store information about a

b) Create an XSLT stylesheet for one student element of the

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml version="1.0" encoding="ISO-8859-1" ?>

<xsl:key name="student-by-usn" match="student" use="usn" />

1CR06CS001 Ann CMRIT Computer Science 2006 ann@gmail.com

a) W rite a Perl program to display various server information

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

• Go to /etc/init.d and start http using the command ./httpd start.

• Go to /etc/init.d and start http using the command ./httpd start.

a) Write a Perl program to accept the user name and to display

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

• Go to /etc/init.d and start http using the command ./httpd start.

• Go to /etc/init.d and start http using the command ./httpd start.

Write a Perl program to display a digital clock which displays

• Go to /etc/init.d and start http using the command ./httpd start.

Write a Perl program to insert name and age information

• Go to /etc/init.d and start http using the command ./httpd start.

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

On clicking submit, a new page with the following table opens.

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

• Go to /etc/init.d and start http using the command ./httpd start.

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

• Go to /etc/init.d and start http using the command ./httpd start.

When page is first opened:

Create a XHTML form with Name, Address Line 1, Address