SlideShare a Scribd company logo
Web Programming Laboratory Manual

WEB PROGRAMMING
LABORATORY MANUAL

by Professor K. Karibasappa

Department Of Computer Science & Engineering

Page1|37
Web Programming Laboratory Manual

Department Of Computer Science & Engineering

Page2|37
Web Programming Laboratory Manual

INDEX

Program
1

Page
Number

2

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

3

b) Input: A number n obtained using prompt.
Output: A table of numbers from 1 to n and their squares using alert.
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.

4

5

6

b) Parameter: A number
Output: The number with its digits in the reverse order.
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)
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.
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.

Department Of Computer Science & Engineering

Page3|37

5

8

10

13

16

20
Web Programming Laboratory Manual

7

8

9
10
11
12
13

14

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.
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.
Write a Perl program to display a digital clock which displays the current time of the
server.
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.
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.
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.
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.
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.

Department Of Computer Science & Engineering

Page4|37

23

24
26
27
29
30

31

34
Web Programming Laboratory Manual

1. Develop and demonstrate a XHTML document that illustrates the use external
style sheet, ordered list, table, borders, padding, color, and the <span> tag.
1.css
p,table,li, // mystyle.css
{
font-family: "lucida calligraphy", arial, 'sans serif';
margin-left: 10pt;
}
p { word-spacing: 5px; }
body { background-color:rgb(200,255,205); }
p,li,td { font-size: 75%;}
#td { padding: 0.5cm; }
th
{
text-align:center;
font-size: 85%;
}
h1, h2, h3, hr {color:#483d8b;}
table
{
border-style: outset;
background-color: rgb(100,255,105);
}
p.one {
padding: 0.2in;
background-color: #C0C0C0;
border-style: solid;
}
li {list-style-type: lower-roman;}
span
{
color:blue;
background-color:pink;
font-size: 29pt;
font-style: italic;
font-weight: bold;
}

Department Of Computer Science & Engineering

Page5|37
Web Programming Laboratory Manual

1.html
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <!-- lab1.html -->
<link rel="stylesheet" type="text/css" href="1.css" />
<title> Lab program1 </title>
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
<hr> <!-- horizontal line -->
<h1>Web Programming LAB</h1>
<h3>List of lab programs</h3>
<ol> <!-- ordered list -->
<li> XHTML with CSS</li>
<li> XHTML with java scripts</li>
<li> Xml with CSS</li>
<li>XSLT style sheet</li>
<li>perl</li>
<li>perl with MYSQL</li>
<li>PHP with MYSQL</li>
</ol>
<table border="4" width="5%"> <!-- table with name & email -->
<tr>
<th >Name </th>
<th>Email</th>
</tr>
<tr>
<td >Dr. HNS</td>
<td>hns@gmail.com</td>
</tr>
<tr>
<td >Dr. MKV</td>
<td>mkv@rediffmail.com</td>
</tr>
<tr>
<td >Dr. GTR</td>
<td>gtr@rnsit.in</td>
</tr>
<tr>
Department Of Computer Science & Engineering

Page6|37
Web Programming Laboratory Manual

<td >Dr. MVS</td>
+
-+--<td>mvs@hotmail.com</td>
</tr>
</table>
<p class ="one">
Now is the time for all good web programmers to learn to use style sheets. <br >[padding: 0.2in]
</p>
<p>
<span>This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This
is a text. This is a text. This is a text. <span>This is a text.</span>
</p>
</body>
</html>

Department Of Computer Science & Engineering

Page7|37
Web Programming Laboratory Manual

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.
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers.
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- lab2a.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<title>Fibonacci Series</title>
<body bgcolor=cyan>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num = prompt("Enter a number : n", "");
if(num!=null && num>0)
{
document.write("<h1>" + num + " Fibonocci are <br></h1></font>");
if(num==1)
document.write("<h1> "+ fib1 + "</h1>");
else
document.write("<h1>" + fib1 + " " + fib2 + "</h1>");
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h1> " + fib + "</h1>");
fib1=fib2;
 fib2=fib;
}
}
else
alert("No Proper Input");
</script>
</body>
</html>

Department Of Computer Science & Engineering

Page8|37
Web Programming Laboratory Manual

b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- lab2b.html
A trivial document
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<title>Square of a Number</title>
<body>
<script type="text/javascript">
var num = prompt("Enter a number : n", "");
if(num >0 && num !=null){
msgstr="Number and its Squares are n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " - " + i*i + "n";
}
alert(msgstr)
}
else
alert("No input supplied");
</script>
</body>
</html>

Department Of Computer Science & Engineering

Page9|37
Web Programming Laboratory Manual

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
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- lab3a.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function disp(str)
{
var alphaExp = /^[a-zA-Z]+$/;
if(!str.value.match(alphaExp))
{
alert("Input should be only alphabets");
return false;
}
sml=31;
text = str.value.toLowerCase();
var ia = text.indexOf("a");
if(sml > ia && ia >= 0)
{sml=ia;}
var ie = text.indexOf("e");
if(sml > ie && ie >= 0)
{sml=ie;}
var ii = text.indexOf("i");
if(sml > ii && ii >= 0)
{sml=ii;}
var io = text.indexOf("o");
if(sml > io && io >= 0)
{sml=io;}
var iu = text.indexOf("u");
if(sml > iu && iu >= 0)
{sml=iu;}
if(sml == 31)
alert("No vowel found");
else
alert("The leftmost position of the vowel is " + sml);
}
</script>
</head>
Department Of Computer Science & Engineering

Page10|37
Web Programming Laboratory Manual

<title>VOWEL</title>
<body bgcolor="pink">
<center><form>
<br/>
<br/>
Enter a String :
<input type="text" name="strng" size = "30" maxlength="30">
<input type="button" value="Click me!" onclick="disp(strng)">
</center>
</form>
</body>
</html>

Department Of Computer Science & Engineering

Page11|37
Web Programming Laboratory Manual

b) Parameter: A number
Output: The number with its digits in the reverse order.
<? xml version ="1.0" encoding = "utf-8?>
<!-Document
: To reverse a given number Created on : JUNE 2009 Author:User-->
<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> reverse.html </title>
<script type="text/javascript">
function rev_num()
{
var num = prompt("Enter the number to be reversed:"," ");
var n = num;
var rev = 0,rem;
while(n > 0)
{
rem = n % 10;
rev = rev * 10 + rem;
n = Math.floor( n / 10);
}
alert ("The given number is : " +num+ "n");
alert ("The reverse of the given number is :" +rev+ "n");
}
</script>
</head>
<body onload="rev_num();">
</body>
</html>

Department Of Computer Science & Engineering

Page12|37
Web Programming Laboratory Manual

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.
<?xml version = "1.0" encoding = "utf-8" ?> <!-- lab4a.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<script type='text/javascript'>
function formValidator()
{
var usn = document.getElementById('req1');
alert(usn.value);
if(isCorrect(usn))
{
return true;
}
return false;
}
function isCorrect(elem1)
{
alphaExp1=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/
if(elem1.value.length == 0)
{
alert("US Number is empty");
elem1.focus();
return false;
}
else if(!elem1.value.match(alphaExp1))
{
alert("US Number should be in DAADDAADDD format");
elem1.focus();
return false;
}
alert("US Number IS CORRECT");
return true;
}</script>
<body BGCOLOR="cyan">
<br/><br/>
Department Of Computer Science & Engineering

Page13|37
Web Programming Laboratory Manual

<center>
<form onsubmit='return formValidator()'>
<font color="red">
<b>Enter your USN. in DAADDAADDD format :</b> <input type='text' id='req1'/> </font>
<input type='submit' value='Check Field' />
</form>
</body></html>
4.b) Modify the above program to get the current semester also (restricted to be a number from 1 to
8)
<?xml version = "1.0" encoding = "utf-8" ?>

<!-- lab4b.html -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function formValidator()
{ var usn = document.getElementById('req1');
var sem = document.getElementById('req2');
if(isCorrect(usn))
{ if(isPerfect(sem))
return true;
}
return false;
}
function isCorrect(elem1)
{var alphaExp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/
if(elem1.value.length == 0)
{
alert("US Number is empty");
elem1.focus();
return false;
}
else if(!elem1.value.match(alphaExp1))
{ alert("US Number should be in DAADDAADDD format");
elem1.focus();
return false; }
alert("US Number
IS CORRECT");
return true;
}
function isPerfect(elem2)
{ var alphaExp2 = /[1-8]$/
Department Of Computer Science & Engineering

Page14|37
Web Programming Laboratory Manual

if(elem2.value.length == 0)
{ alert("Semester Number is empty");
elem2.focus();
return false;
}
else if(!elem2.value.match(alphaExp2))
{ alert("Invalid Semester Number");
elem2.focus();
return false;
}
alert("Semester Number IS CORRECT");
return true;
}
</script>
</head>
<body bgcolor="cyan">
<center>
<aform onsubmit='return formValidator()'>
<table>
<br/><br/>
<tr><td><b><font color="red">Enter your USN. in DUUDDUUDDD format : </b></td>
<td><input type='text' id='req1'/> <BR/></td></tr>
<tr><td>
<b><font color="red">Enter your Sem. in D[1-8] format : </b></td>
<td><input type='text' id='req2'/> <BR/></td>
</tr></table>
<br/>
<input type='submit' value='Check Field' />
</form>
</body>
</html>

Department Of Computer Science & Engineering

Page15|37
Web Programming Laboratory Manual

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.
a) XHTML document that contains three short paragraphs of text, stacked on top of each other.
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The Stacking order</title>
<style type="text/css">.layer1Style {
border: solid thick black;
padding: 1em;
width:300px;
background-color:yellow;
position:absolute;
top:100px;
left:200px;
z-index:0;
}
.layer2Style
{
border: solid thick red;
padding: 1em;
width:300px;
background-color:BLUE;
position:absolute;
top:120px;
left:220px;
z-index:0;
}
.layer3Style
{
border: solid thick green;
padding: 1em;
width:300px;
background-color:purple;
Department Of Computer Science & Engineering

Page16|37
Web Programming Laboratory Manual

position:absolute;
top:140px;
left:240px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<body>
<h2>Stacking of Paragraphs</h2>
<div style="z-index: 10;" class="layer1Style" id="layer1" onmouseover="mover('layer1')">
The lives of most inhabitants of Industrailzed Countries, has well as some
unindustralized
countries, have been changed forever by the advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2" onmouseover="mover('layer2')">
The www may seem like magic , untill you undrestand how it works.The Web is
accessed through a browser.
</div>
<div style="z-index: 0;" class="layer3Style" id="layer3" onmouseover="mover('layer3')">
Windows XP provides many ways for you to communicate with friends, co-workers, and
I
with the rest of the world.
</div>
</body>
</html>

Department Of Computer Science & Engineering

Page17|37
Web Programming Laboratory Manual

b) The Stacking of paragraphs and moved from the top stacking position, it returns to its original
position.
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The Stacking order</title>
<style type="text/css">
.layer1Style{
border: solid thick black;
padding: 1em;
width:300px;
background-color:yellow;
position:absolute;
top:200px;
left:400px;
z-index:1;
}
.layer2Style{
border: solid thick blue;
padding: 1em;
width:300px;
background-color:red;
position:absolute;
top:220px;
left:420px;
z-index:2;
}
.layer3Style{
border: solid thick brown;
padding: 1em;
width:300px;
background-color:orange;
position:absolute;
top:240px;
left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
Department Of Computer Science & Engineering

Page18|37
Web Programming Laboratory Manual

var newTop=document.getElementById(toTop).style;
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origPos=pos;}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origPos;
}
</script>
</head><body>
<br />
<br />
<h3>The Stacking of paragraphs,and moved from the top stacking position, it returns to its original
position.</h3>
<div style="z-index: 1;" class="layer1Style" id="layer1" onmouseover="mover('layer1','1')"
onmouseout="moveBack()">
The lives of most inhabitants of Industrailzed Countries, has well as some unindustralized
countries, have been changed forever by the advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2" onmouseover="mover('layer2','2')"
onmouseout="moveBack()">
The www may seem like magic , untill you undrestand how it works.The Web is accessed through
a browser.
</div>
<div style="z-index: 3;" class="layer3Style" id="layer3" onmouseover="mover('layer3','3')"
onmouseout="moveBack()">
Windows XP provides many ways for you to communicate with friends, co-workers, and I with
the rest of the world.
</div>
<script type="text/javascript">
</script>
</body>
</html>

Department Of Computer Science & Engineering

Page19|37
Web Programming Laboratory Manual

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.
a) XML document to store information about a student in an engineering(using internal DTD to
show the XML structure)
student.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE student[
<!ELEMENT student_information (ad+)>
<!ELEMENT ad (usn,name,collegename,branch,year,email)>
<!ELEMENT usn (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT collegename (#PCDATA)>
<!ELEMENT branch (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT email (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="student.css"?>
<student_information>
<h3>student_information</h3>
<h2>student 1</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label>Name:<name> ABC </name></label></ad>
<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> abc@gmail.com </email></label></ad>
<h2>student 2</h2>
<ad><label> usn:<usn> 4bd06500 </usn></label></ad>
<ad><label>Name:<name> XYZ </name></label></ad>
<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> xyz@gmail.com </email></label></ad>

Department Of Computer Science & Engineering

Page20|37
Web Programming Laboratory Manual

<h2>student 3</h2>
<ad><label> usn:<usn> 4bd06501 </usn></label></ad>
<ad><label>Name:<name> PQR </name></label></ad>
<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> pqr@gmail.com </email></label></ad>
</student_information>
student.css
ad {display:block; margin-top:15px; color:blue; font-size:13pt; }
usn {color:red; font-size:12pt; margin-left:15px; }
name { color:red; font-size:12pt;margin-left:15px; }
college { color:red; font-size:12pt; margin-left:15px; }
branch { color:red; font-size:12pt; margin-left:15px; }
year { color:red; font-size:12pt; margin-left:15px; }
email { color:red; font-size:12pt; margin-left:15px; }
h3 { color:red; font-size:18pt; }
h2 { display:block; color:black; font-size:18pt; }
6b.xml

<?xml version = "1.0"?>
<!-- xslplane.xml -->
<?xml-stylesheet type = "text/xsl" href = "6b.xsl" ?>
<student>
<USN> 4bd06cs099 </USN>
<name> Cessna </name>
<college> BIET </college>
<branch>CSE</branch>
<year> 2009 </year>
<email>abc@gmail.com</email>
</student>
6b.xsl
<?xml version = "1.0"?>
<!-- xslplane.xsl -->
<xsl:stylesheet version = "1.0"
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
xmlns = "http://www.w3.org/TR/xhtml1/strict">
<xsl:template match = "/">
<h2> Student information </h2>
<span style = "font-style: italic"> USN: </span>
<xsl:value-of select = "student/USN" /> <br />
Department Of Computer Science & Engineering

Page21|37
Web Programming Laboratory Manual

<span style = "font-style: italic"> Name: </span>
<xsl:value-of select = "student/name" /> <br />
<span style = "font-style: italic"> Branch: </span>
<xsl:value-of select = "student/branch" /> <br />
<span style = "font-style: italic"> college Name: </span>
<xsl:value-of select = "student/college" /> <br />
<span style = "font-style: italic"> Year of Joining: </span>
<xsl:value-of select = "student/year" /> <br />
<span style = "font-style: italic"> Email-id: </span>
<xsl:value-of select = "student/email" /> <br />
</xsl:template>
</xsl:stylesheet>

Department Of Computer Science & Engineering

Page22|37
Web Programming Laboratory Manual

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.
7a.pl
#! /usr/bin/perl
# This line tells the machine to run the file through Perl
# Environment variables can be accessed using $ENV.
print "content-type:text/html","nn";
print "<html><body bgcolor='cyan'><h1><center>SERVER INFORMATION<center></h1><br>";
print "<hr><br>Server Name=",$ENV{'SERVER_NAME'};
print "<br>Running port=",$ENV{'SERVER_PORT'};
print "<br>SERVER PROTOCOL=",$ENV{'SERVER_PROTOCOL'};
print "<br>Server software=",$ENV{'SERVER_SOFTWARE'};
print "<br>CGI Version=",$ENV{'GATEWAY_INTERFACE'};
print "<br><hr></body></html>";
7b.html
<html>
<body bgcolor="cyan">
<form action="http://localhost/cgi-bin/7b.pl" method="get">
<center><h1>UNIX COMMAND EXECUTION</h1></center>
Enter the Command:<input type="text" name="com" size=40>
<br>
<br>
<input type="submit" value="Execute" >
<input type="reset" value="clear">
</form>
</body></html>

7b.pl
#!/usr/bin/perl
use CGI':standard'; # 6b.pl
print "content type: text/html nn";
$c=param('com');
system($c);
exit(0);
Department Of Computer Science & Engineering

Page23|37
Web Programming Laboratory Manual

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.
8a.pl
#!/usr/bin/perl
use CGI ':standard';
use CGI::Carp qw(warningsToBrowser);
@coins = ("Welcome to Web Programming Lab","Have a nice time in lab", "Practice all the programs",
"well done Good Day");
$range = 4;
$random_number = int(rand($range));
if(param)
{
print header();
print start_html(-title=>"User Name",-bgcolor=>"Pink",-text=>"blue");
$cmd=param("name");
print b("Hello $cmd, $coins[$random_number]"),br();
print start_form();
print submit(-value=>"Back");
print end_form();
print end_html();
}
else
{
print header();
print start_html(-title=>"Enter user name",-bgcolor=>"cyan",-text=>"blue");
print start_form(),br(),b("enter your name"),textfield(-name=>"name",-value=>" "), submit(name=>"submit",-value=>"Submit"),reset();
print end_form();
print end_html();
}

Department Of Computer Science & Engineering

Page24|37
Web Programming Laboratory Manual

8b.pl
#!/usr/bin/perl
use CGI ':standard';
use CGI::Carp qw(warningsToBrowser);
print header();
print start_html(-title=>"WebPage Counter", -bgcolor=>"Pink",-text=>"blue");
open(FILE,'<count.txt');
$count=<FILE>;
close(FILE);
$count++;
open(FILE,'>count.txt');
print FILE "$count";
print b("This page has been viewed $count times");
close(FILE);
print end_html();

Department Of Computer Science & Engineering

Page25|37
Web Programming Laboratory Manual

9. Write a Perl program to display a digital clock which displays the current time of
the server.
#! /usr/bin/perl
use CGI':standard';
$de=1;
print "Refresh:",$de,"n";
print "content-type:text/html","nn";
print "<html><body bgcolor=cyan><center><h1>DIGITAL CLOCK</CENTER></h1><br>";
($s,$m,$h)=localtime(time);
print"<table align=center border=2 bgcolor=cheery><tr><td><font color=red
size=7>$h</td><td><font size=10>:</td><td><font color=blue size=7>$m</td><td><font
size=7>:</td><td><font size=7>$s</td></tr></table>";
print "<br><br><center><h2>The current system time is $h hours $m minutes $s
seconds</center></h2>";
print "<br></body></html>";

Department Of Computer Science & Engineering

Page26|37
Web Programming Laboratory Manual

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.
10.html
<html>
<body>
<form action="http://localhost/10.pl" >
Name : <input type="text" name="name"> <br>
Age :<input type="text" name="age"> <br>
<input type="submit" value="Submit">
</form>
</html
10.pl
#! /usr/bin/perl
use CGI ':standard';
use DBI;
$age=param("age");
$name=param("name");
print "Content-type: text/htmlnn";
print "<HTML><TITLE>Result of the insert operation </TITLE><body>connection</br>";
$dbh=DBI->connect("DBI:mysql:test");
#$name=param("name");
#$age=param("age");
$qh=$dbh->prepare("insert into stud values('$name','$age')");
$qh->execute();
$qh=$dbh->prepare("Select * from stud");
$qh->execute();
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"</body></HTML>";

Department Of Computer Science & Engineering

Page27|37
Web Programming Laboratory Manual

Department Of Computer Science & Engineering

Page28|37
Web Programming Laboratory Manual

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.
<html> <!-- 11.php after saving always give chmod command-->
<head><title>Search Result </title></head>
<body bgcolor=orange>
<hr>
<?
// 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);
echo "<h1><font color=blue><center>Program creating and displaying cookie</h1></center>";
echo"<br>";
echo "<br><center>Hello, your last visit was".$cookiedate."! </center></body></html>";
print"<br>";
?>
</body>
</html>

Department Of Computer Science & Engineering

Page29|37
Web Programming Laboratory Manual

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.
12.php
<html>
<head><title>SESSION </title></head>
<body bgcolor=pink>
<?php
session_start();
session_register("count");
if (!isset($_SESSION))
{
$_SESSION["count"] = 0;
echo "<p>Counter initialized</p>n";
}
else { $_SESSION["count"]++; }
echo "<p><center><h1><font color=red>The counter is now
<b>$_SESSION[count]</center></h1></b></p>".
"<p><h2><center>reload this page to increment</center></h2></p>";
?>

Department Of Computer Science & Engineering

Page30|37
Web Programming Laboratory Manual

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.
<html>
<body>
<?php
$self = $_SERVER['PHP_SELF'];
$dbh = mysql_connect('localhost', 'root', 'satish1') or
die(mysql_error());
mysql_select_db('satish') or die(mysql_error());
if(isset($_POST['name']))
{
$nme = $_POST['name'];
$ad1 = $_POST['add1'];
$ad2 = $_POST['add2'];
$eml = $_POST['email'];
if($nme != "" && $ad1 != "")
{
$query = "INSERT INTO contact VALUES
('$nme', '$ad1', '$ad2', '$eml')";
$result = mysql_query($query) or die(mysql_error());
}
else
echo "one of the field is empty";
}
mysql_close($dbh);
?>
<FORM ACTION="<?=$self?>" METHOD="POST">
<P>
Name: <INPUT TYPE=text NAME="name" value=""> <BR>
Address 1:<INPUT TYPE=text NAME="add1" value=""><BR>
Address 2:<INPUT TYPE=text NAME="add2" value=""><BR>
email:<INPUT TYPE=text NAME="email" value=""><BR>
<INPUT TYPE=submit>
</FORM>
</body>
</html>

Department Of Computer Science & Engineering

Page31|37
Web Programming Laboratory Manual

Department Of Computer Science & Engineering

Page32|37
Web Programming Laboratory Manual

Department Of Computer Science & Engineering

Page33|37
Web Programming Laboratory Manual

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.
<html>
<body bgcolor=cyan>
<form action="p8.php" ><br><font color=orange><h1><center>BOOK INFORMATION</H1>
<table align=center><tr><td>ENTER ACESSION NO</td><td><INPUT NAME=acn></td></tr>
<tr><td>ENTER TITLE</td><td><INPUT NAME=tit></td></tr>
<tr><td>ENTER AUTHOR NAME</td><td><INPUT NAME=aut></td></tr>
<tr><td>ENTER EDITION</td><td><INPUT NAME=edi></td></tr>
<tr><td>ENTER PUBLICATION</td><td><INPUT NAME=pub></td></tr>
</TABLE><br><br>
<center><input type=reset value=CLEAR><BR><BR>
<center><input type=submit value=INSERT>
</FORM></BODY></HTML>
<?
mysql_connect("localhost");
$acn=$_GET['acn'];
$tit=$_GET['tit'];
$aut=$_GET['aut'];
$edi=$_GET['edi'];
$pub=$_GET['pub'];
if($acn && $tit && $aut && $edi && $pub ){
mysql_db_query("test"," insert into book values('$acn','$tit','$aut','$edi','$pub') ");
$res=mysql_db_query("test","select * from book");
echo"<body bgcolor=cyan><br><br><h1><center><font color=magenta>
RESULT OF THE QUERY</H1><table border=1 align=center>
<tr><th>ACSESSION_NO</TH><TH>TITTLE</TH><TH>AUTHOR</TH><TH>EDITION</TH><TH>PUBLICATIO
N</TH</TR>";
while($arr=mysql_fetch_row($res))
{print"<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td><td>$arr[4]</td></tr>";}
}
else
{
print "<body bgcolor=cyan><h1 align=center><font color=orange>DONT LET FEILDS TO BE NULL<BR><form
action =/p8.html><input type=submit value=BACK>";
}
?>
<html><body bgcolor=cyan>
<form action="p9.php">
<H1><center><font color=green>BOOKS ENQUIRY BASED ON TITLE OF BOOK</center></H1><br>

Department Of Computer Science & Engineering

Page34|37
Web Programming Laboratory Manual

<BR><BR><TABLE ALIGN=CENTER><TR><TD><font color=red ><blink><b>ENTER BOOK
TITLE</TD><TD><INPUT NAME=tit></td></tr></table>
<br><br><br><br><CENTER>
<input type=submit value=GET_ME_BOOKS>
</FORM></BODY></HTML>
<?
mysql_connect("localhost") or die("connection failed!!");
$tit=$_GET['tit'];
if($tit != ""){
$res=mysql_db_query("test","select ascn_no,author,edition,publication from book where title='$tit'") or die("Query
failed!!");}
if(mysql_num_rows($res))
{
echo"<body bgcolor=cyan><h1><font color=orange><CENTER>AVAILABLE BOOKS FOR GIVEN
TITLE<br><font color=red>$tit<br><table border=1
align=center><tr><th>ACSESSION_NO</TH><TH>AUTHOR</TH><TH>EDITION</TH><TH>PUBLICATION</T
H</TR>";
while($arr=mysql_fetch_row($res))
{print"<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td></tr>";}
}
else
{print"<body bgcolor=cyan><br><br><br><center><H2><FONT color=red
SIZE=8>SORRY</FONT><br><center>NO BOOKS ARE AVALIBLE FOR YOUR TITLE</H2><form
action=p9.html><br><br><input type=submit value=GOBACK>";
}
?>
OR
<?
$username="root";
$password="brpbrp";
$database="mysql";
$id=$_POST['id'];
$accno=$_POST['accno'];
$title=$_POST['title'];
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die("Unable to select database");
$query="INSERT INTO library VALUES ('$id','$accno','$title')";
mysql_query($query);
$query1="SELECT * FROM library";
$result=mysql_query($query1);
$num=mysql_numrows($result);
echo"<b>Output</b>";
print "<table border size=1><tr><th>ID</th><th>Accno</th><th>Title</th></tr>";
$i=0;
Department Of Computer Science & Engineering

Page35|37
Web Programming Laboratory Manual

while($i<$num) {
$id=mysql_result($result,$i,"id");
$accno=mysql_result($result,$i,"accno");
$title=mysql_result($result,$i,"title");
echo "<tr><td>$id</td><td>$accno</td><td>$title</td></tr>";
$i++;
}
print "</table>";
mysql_close();
?>

Department Of Computer Science & Engineering

Page36|37
Web Programming Laboratory Manual

Department Of Computer Science & Engineering

Page37|37

More Related Content

PPTX
Semiconductor memories
PPTX
Recognition-of-tokens
PDF
Embedded system in Smart Cards
PPTX
Drowsiness Detection using machine learning (1).pptx
PPTX
Watch-dog Timer in LPC1768
PPT
Design of embedded systems
PPTX
EMBEDDED SYSTEMS SYBSC IT SEM IV UNIT V Embedded Systems Integrated Developme...
PPT
8254 timer - Microprocessor and interfacing
Semiconductor memories
Recognition-of-tokens
Embedded system in Smart Cards
Drowsiness Detection using machine learning (1).pptx
Watch-dog Timer in LPC1768
Design of embedded systems
EMBEDDED SYSTEMS SYBSC IT SEM IV UNIT V Embedded Systems Integrated Developme...
8254 timer - Microprocessor and interfacing

What's hot (20)

PPTX
Three Address code
PPTX
Driver drowsinees detection and alert.pptx slide
PPT
E.s unit 6
PPT
Raster scan system
PDF
Driver Drowsiness Detection report
PPTX
project ppt.pptx
PPT
LIN protocol description
PPTX
Traffic Violation Detector using Object Detection
PDF
IRJET- Recognition of Vehicle Number Plate using Raspberry PI
PPTX
Chapter 2 intelligent agents
PPTX
Principal Sources of Optimization in compiler design
PDF
Computer Graphics Project Report on Sinking Ship using OpenGL
PPTX
Direct linking loaders
PPT
Digital Camera Hardware and software architecture
PPTX
Anti- aliasing computer graphics
PPTX
Controller Area Network(CAN)
PDF
EYE TRACKING BASED DRIVER DROWSINESS MONITORING AND WARNING SYSTEM
PDF
MC 7204 OS Question Bank with Answer
PPTX
Java servlets and CGI
PPT
Multi Robot Swarm Systems
Three Address code
Driver drowsinees detection and alert.pptx slide
E.s unit 6
Raster scan system
Driver Drowsiness Detection report
project ppt.pptx
LIN protocol description
Traffic Violation Detector using Object Detection
IRJET- Recognition of Vehicle Number Plate using Raspberry PI
Chapter 2 intelligent agents
Principal Sources of Optimization in compiler design
Computer Graphics Project Report on Sinking Ship using OpenGL
Direct linking loaders
Digital Camera Hardware and software architecture
Anti- aliasing computer graphics
Controller Area Network(CAN)
EYE TRACKING BASED DRIVER DROWSINESS MONITORING AND WARNING SYSTEM
MC 7204 OS Question Bank with Answer
Java servlets and CGI
Multi Robot Swarm Systems
Ad

Viewers also liked (20)

PDF
Webdesing lab part-b__java_script_
DOC
Internet programming lab manual
PDF
Tutorial PHP and Dreamweaver CS3
PDF
Internet programming lecture 1
PDF
Html - Tutorial
PPT
Beginners PHP Tutorial
PDF
Fundamental JavaScript [UTC, March 2014]
PDF
Introduction to JavaScript
PDF
3Q14
PDF
День Уличной Музыки
PDF
08 11-2011 - 2 q11 conference call presentation
PPTX
Jobbprofil pleieassistent
PPTX
Inter firm relationships and safe nests
PDF
Institutional presentation 2 q14
PDF
2 q14 arezzo_apresentacao_call eng
PPTX
Il dilemma del test: Manuale o Automatico?
PPTX
Webinar: Take Control of SharePoint Security
DOCX
Bbbbbbbbbbbbbbbbbbbbbbbbbb
PPT
2013 scuola aperta
PDF
Vincenzo De Colli Eng
Webdesing lab part-b__java_script_
Internet programming lab manual
Tutorial PHP and Dreamweaver CS3
Internet programming lecture 1
Html - Tutorial
Beginners PHP Tutorial
Fundamental JavaScript [UTC, March 2014]
Introduction to JavaScript
3Q14
День Уличной Музыки
08 11-2011 - 2 q11 conference call presentation
Jobbprofil pleieassistent
Inter firm relationships and safe nests
Institutional presentation 2 q14
2 q14 arezzo_apresentacao_call eng
Il dilemma del test: Manuale o Automatico?
Webinar: Take Control of SharePoint Security
Bbbbbbbbbbbbbbbbbbbbbbbbbb
2013 scuola aperta
Vincenzo De Colli Eng
Ad

Similar to Web programming manual (20)

PDF
wt record.pdf web technology lab manual ver useful for reg 21
PDF
Web technology practical list
PPTX
WEB DEVELOPMENT
PPT
Java script
PPTX
Introduction to Shiny for building web apps in R
PPT
PHP is a widely-used, open-source, server-side scripting language that is esp...
DOC
IT- 328 Web Administration (Practicals)
DOCX
INFO-6053 Fall 2017 Project 3 Page 1 of 6 .docx
PPT
.Net course-in-mumbai-ppt
PDF
Compiler Construction for DLX Processor
PPTX
Social Graphs and Semantic Analytics
PPTX
ASP DOT NET
DOCX
PPTX
cloud_content useful for engineering stu
PPT
Making Pretty Charts in Splunk
PPTX
web design
wt record.pdf web technology lab manual ver useful for reg 21
Web technology practical list
WEB DEVELOPMENT
Java script
Introduction to Shiny for building web apps in R
PHP is a widely-used, open-source, server-side scripting language that is esp...
IT- 328 Web Administration (Practicals)
INFO-6053 Fall 2017 Project 3 Page 1 of 6 .docx
.Net course-in-mumbai-ppt
Compiler Construction for DLX Processor
Social Graphs and Semantic Analytics
ASP DOT NET
cloud_content useful for engineering stu
Making Pretty Charts in Splunk
web design

Recently uploaded (20)

PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
sap open course for s4hana steps from ECC to s4
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Encapsulation theory and applications.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPT
Teaching material agriculture food technology
PDF
Electronic commerce courselecture one. Pdf
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
Programs and apps: productivity, graphics, security and other tools
Dropbox Q2 2025 Financial Results & Investor Presentation
sap open course for s4hana steps from ECC to s4
Building Integrated photovoltaic BIPV_UPV.pdf
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
The AUB Centre for AI in Media Proposal.docx
Per capita expenditure prediction using model stacking based on satellite ima...
NewMind AI Weekly Chronicles - August'25 Week I
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Understanding_Digital_Forensics_Presentation.pptx
Encapsulation theory and applications.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Unlocking AI with Model Context Protocol (MCP)
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Teaching material agriculture food technology
Electronic commerce courselecture one. Pdf
The Rise and Fall of 3GPP – Time for a Sabbatical?
Programs and apps: productivity, graphics, security and other tools

Web programming manual

  • 1. Web Programming Laboratory Manual WEB PROGRAMMING LABORATORY MANUAL by Professor K. Karibasappa Department Of Computer Science & Engineering Page1|37
  • 2. Web Programming Laboratory Manual Department Of Computer Science & Engineering Page2|37
  • 3. Web Programming Laboratory Manual INDEX Program 1 Page Number 2 Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. 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. 3 b) Input: A number n obtained using prompt. Output: A table of numbers from 1 to n and their squares using alert. 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. 4 5 6 b) Parameter: A number Output: The number with its digits in the reverse order. 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) 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. 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. Department Of Computer Science & Engineering Page3|37 5 8 10 13 16 20
  • 4. Web Programming Laboratory Manual 7 8 9 10 11 12 13 14 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. 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. Write a Perl program to display a digital clock which displays the current time of the server. 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. 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. 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. 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. 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. Department Of Computer Science & Engineering Page4|37 23 24 26 27 29 30 31 34
  • 5. Web Programming Laboratory Manual 1. Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. 1.css p,table,li, // mystyle.css { font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; } p { word-spacing: 5px; } body { background-color:rgb(200,255,205); } p,li,td { font-size: 75%;} #td { padding: 0.5cm; } th { text-align:center; font-size: 85%; } h1, h2, h3, hr {color:#483d8b;} table { border-style: outset; background-color: rgb(100,255,105); } p.one { padding: 0.2in; background-color: #C0C0C0; border-style: solid; } li {list-style-type: lower-roman;} span { color:blue; background-color:pink; font-size: 29pt; font-style: italic; font-weight: bold; } Department Of Computer Science & Engineering Page5|37
  • 6. Web Programming Laboratory Manual 1.html <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <!-- lab1.html --> <link rel="stylesheet" type="text/css" href="1.css" /> <title> Lab program1 </title> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> <hr> <!-- horizontal line --> <h1>Web Programming LAB</h1> <h3>List of lab programs</h3> <ol> <!-- ordered list --> <li> XHTML with CSS</li> <li> XHTML with java scripts</li> <li> Xml with CSS</li> <li>XSLT style sheet</li> <li>perl</li> <li>perl with MYSQL</li> <li>PHP with MYSQL</li> </ol> <table border="4" width="5%"> <!-- table with name & email --> <tr> <th >Name </th> <th>Email</th> </tr> <tr> <td >Dr. HNS</td> <td>hns@gmail.com</td> </tr> <tr> <td >Dr. MKV</td> <td>mkv@rediffmail.com</td> </tr> <tr> <td >Dr. GTR</td> <td>gtr@rnsit.in</td> </tr> <tr> Department Of Computer Science & Engineering Page6|37
  • 7. Web Programming Laboratory Manual <td >Dr. MVS</td> + -+--<td>mvs@hotmail.com</td> </tr> </table> <p class ="one"> Now is the time for all good web programmers to learn to use style sheets. <br >[padding: 0.2in] </p> <p> <span>This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span>This is a text.</span> </p> </body> </html> Department Of Computer Science & Engineering Page7|37
  • 8. Web Programming Laboratory Manual 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. a) Input: A number n obtained using prompt Output: The first n Fibonacci numbers. <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- lab2a.html --> <html xmlns = "http://www.w3.org/1999/xhtml"> <title>Fibonacci Series</title> <body bgcolor=cyan> <script type="text/javascript"> var fib1=0,fib2=1,fib=0; var num = prompt("Enter a number : n", ""); if(num!=null && num>0) { document.write("<h1>" + num + " Fibonocci are <br></h1></font>"); if(num==1) document.write("<h1> "+ fib1 + "</h1>"); else document.write("<h1>" + fib1 + " " + fib2 + "</h1>"); for(i=3;i<=num; i++) { fib= fib1 + fib2; document.write("<h1> " + fib + "</h1>"); fib1=fib2; fib2=fib; } } else alert("No Proper Input"); </script> </body> </html> Department Of Computer Science & Engineering Page8|37
  • 9. Web Programming Laboratory Manual b) Input: A number n obtained using prompt Output: A table of numbers from 1 to n and their squares using alert <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- lab2b.html A trivial document --> <html xmlns = "http://www.w3.org/1999/xhtml"> <title>Square of a Number</title> <body> <script type="text/javascript"> var num = prompt("Enter a number : n", ""); if(num >0 && num !=null){ msgstr="Number and its Squares are n"; for(i=1;i <= num; i++) { msgstr = msgstr + i + " - " + i*i + "n"; } alert(msgstr) } else alert("No input supplied"); </script> </body> </html> Department Of Computer Science & Engineering Page9|37
  • 10. Web Programming Laboratory Manual 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 <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- lab3a.html --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function disp(str) { var alphaExp = /^[a-zA-Z]+$/; if(!str.value.match(alphaExp)) { alert("Input should be only alphabets"); return false; } sml=31; text = str.value.toLowerCase(); var ia = text.indexOf("a"); if(sml > ia && ia >= 0) {sml=ia;} var ie = text.indexOf("e"); if(sml > ie && ie >= 0) {sml=ie;} var ii = text.indexOf("i"); if(sml > ii && ii >= 0) {sml=ii;} var io = text.indexOf("o"); if(sml > io && io >= 0) {sml=io;} var iu = text.indexOf("u"); if(sml > iu && iu >= 0) {sml=iu;} if(sml == 31) alert("No vowel found"); else alert("The leftmost position of the vowel is " + sml); } </script> </head> Department Of Computer Science & Engineering Page10|37
  • 11. Web Programming Laboratory Manual <title>VOWEL</title> <body bgcolor="pink"> <center><form> <br/> <br/> Enter a String : <input type="text" name="strng" size = "30" maxlength="30"> <input type="button" value="Click me!" onclick="disp(strng)"> </center> </form> </body> </html> Department Of Computer Science & Engineering Page11|37
  • 12. Web Programming Laboratory Manual b) Parameter: A number Output: The number with its digits in the reverse order. <? xml version ="1.0" encoding = "utf-8?> <!-Document : To reverse a given number Created on : JUNE 2009 Author:User--> <! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtmlll/DTD/xhtmlll.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> reverse.html </title> <script type="text/javascript"> function rev_num() { var num = prompt("Enter the number to be reversed:"," "); var n = num; var rev = 0,rem; while(n > 0) { rem = n % 10; rev = rev * 10 + rem; n = Math.floor( n / 10); } alert ("The given number is : " +num+ "n"); alert ("The reverse of the given number is :" +rev+ "n"); } </script> </head> <body onload="rev_num();"> </body> </html> Department Of Computer Science & Engineering Page12|37
  • 13. Web Programming Laboratory Manual 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. <?xml version = "1.0" encoding = "utf-8" ?> <!-- lab4a.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <script type='text/javascript'> function formValidator() { var usn = document.getElementById('req1'); alert(usn.value); if(isCorrect(usn)) { return true; } return false; } function isCorrect(elem1) { alphaExp1=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ if(elem1.value.length == 0) { alert("US Number is empty"); elem1.focus(); return false; } else if(!elem1.value.match(alphaExp1)) { alert("US Number should be in DAADDAADDD format"); elem1.focus(); return false; } alert("US Number IS CORRECT"); return true; }</script> <body BGCOLOR="cyan"> <br/><br/> Department Of Computer Science & Engineering Page13|37
  • 14. Web Programming Laboratory Manual <center> <form onsubmit='return formValidator()'> <font color="red"> <b>Enter your USN. in DAADDAADDD format :</b> <input type='text' id='req1'/> </font> <input type='submit' value='Check Field' /> </form> </body></html> 4.b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8) <?xml version = "1.0" encoding = "utf-8" ?> <!-- lab4b.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript'> function formValidator() { var usn = document.getElementById('req1'); var sem = document.getElementById('req2'); if(isCorrect(usn)) { if(isPerfect(sem)) return true; } return false; } function isCorrect(elem1) {var alphaExp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ if(elem1.value.length == 0) { alert("US Number is empty"); elem1.focus(); return false; } else if(!elem1.value.match(alphaExp1)) { alert("US Number should be in DAADDAADDD format"); elem1.focus(); return false; } alert("US Number IS CORRECT"); return true; } function isPerfect(elem2) { var alphaExp2 = /[1-8]$/ Department Of Computer Science & Engineering Page14|37
  • 15. Web Programming Laboratory Manual if(elem2.value.length == 0) { alert("Semester Number is empty"); elem2.focus(); return false; } else if(!elem2.value.match(alphaExp2)) { alert("Invalid Semester Number"); elem2.focus(); return false; } alert("Semester Number IS CORRECT"); return true; } </script> </head> <body bgcolor="cyan"> <center> <aform onsubmit='return formValidator()'> <table> <br/><br/> <tr><td><b><font color="red">Enter your USN. in DUUDDUUDDD format : </b></td> <td><input type='text' id='req1'/> <BR/></td></tr> <tr><td> <b><font color="red">Enter your Sem. in D[1-8] format : </b></td> <td><input type='text' id='req2'/> <BR/></td> </tr></table> <br/> <input type='submit' value='Check Field' /> </form> </body> </html> Department Of Computer Science & Engineering Page15|37
  • 16. Web Programming Laboratory Manual 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. a) XHTML document that contains three short paragraphs of text, stacked on top of each other. <!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>The Stacking order</title> <style type="text/css">.layer1Style { border: solid thick black; padding: 1em; width:300px; background-color:yellow; position:absolute; top:100px; left:200px; z-index:0; } .layer2Style { border: solid thick red; padding: 1em; width:300px; background-color:BLUE; position:absolute; top:120px; left:220px; z-index:0; } .layer3Style { border: solid thick green; padding: 1em; width:300px; background-color:purple; Department Of Computer Science & Engineering Page16|37
  • 17. Web Programming Laboratory Manual position:absolute; top:140px; left:240px; z-index:0; } </style> <script type="text/javascript"> var topLayer="layer3"; function mover(toTop) { var oldTop=document.getElementById(topLayer).style; var newTop=document.getElementById(toTop).style; oldTop.zIndex="0"; newTop.zIndex="10"; topLayer=document.getElementById(toTop).id; } </script> </head> <body> <h2>Stacking of Paragraphs</h2> <div style="z-index: 10;" class="layer1Style" id="layer1" onmouseover="mover('layer1')"> The lives of most inhabitants of Industrailzed Countries, has well as some unindustralized countries, have been changed forever by the advent of WWW. </div> <div style="z-index: 2;" class="layer2Style" id="layer2" onmouseover="mover('layer2')"> The www may seem like magic , untill you undrestand how it works.The Web is accessed through a browser. </div> <div style="z-index: 0;" class="layer3Style" id="layer3" onmouseover="mover('layer3')"> Windows XP provides many ways for you to communicate with friends, co-workers, and I with the rest of the world. </div> </body> </html> Department Of Computer Science & Engineering Page17|37
  • 18. Web Programming Laboratory Manual b) The Stacking of paragraphs and moved from the top stacking position, it returns to its original position. <!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>The Stacking order</title> <style type="text/css"> .layer1Style{ border: solid thick black; padding: 1em; width:300px; background-color:yellow; position:absolute; top:200px; left:400px; z-index:1; } .layer2Style{ border: solid thick blue; padding: 1em; width:300px; background-color:red; position:absolute; top:220px; left:420px; z-index:2; } .layer3Style{ border: solid thick brown; padding: 1em; width:300px; background-color:orange; position:absolute; top:240px; left:440px; z-index:3; } </style> <script type="text/javascript"> var topLayer="layer3"; var origPos; function mover(toTop,pos) { Department Of Computer Science & Engineering Page18|37
  • 19. Web Programming Laboratory Manual var newTop=document.getElementById(toTop).style; newTop.zIndex="10"; topLayer=document.getElementById(toTop).id; origPos=pos;} function moveBack() { document.getElementById(topLayer).style.zIndex=origPos; } </script> </head><body> <br /> <br /> <h3>The Stacking of paragraphs,and moved from the top stacking position, it returns to its original position.</h3> <div style="z-index: 1;" class="layer1Style" id="layer1" onmouseover="mover('layer1','1')" onmouseout="moveBack()"> The lives of most inhabitants of Industrailzed Countries, has well as some unindustralized countries, have been changed forever by the advent of WWW. </div> <div style="z-index: 2;" class="layer2Style" id="layer2" onmouseover="mover('layer2','2')" onmouseout="moveBack()"> The www may seem like magic , untill you undrestand how it works.The Web is accessed through a browser. </div> <div style="z-index: 3;" class="layer3Style" id="layer3" onmouseover="mover('layer3','3')" onmouseout="moveBack()"> Windows XP provides many ways for you to communicate with friends, co-workers, and I with the rest of the world. </div> <script type="text/javascript"> </script> </body> </html> Department Of Computer Science & Engineering Page19|37
  • 20. Web Programming Laboratory Manual 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. a) XML document to store information about a student in an engineering(using internal DTD to show the XML structure) student.xml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE student[ <!ELEMENT student_information (ad+)> <!ELEMENT ad (usn,name,collegename,branch,year,email)> <!ELEMENT usn (#PCDATA)> <!ELEMENT name (#PCDATA)> <!ELEMENT collegename (#PCDATA)> <!ELEMENT branch (#PCDATA)> <!ELEMENT year (#PCDATA)> <!ELEMENT email (#PCDATA)> ]> <?xml-stylesheet type="text/css" href="student.css"?> <student_information> <h3>student_information</h3> <h2>student 1</h2> <ad><label> usn:<usn> 4bd06499 </usn></label></ad> <ad><label>Name:<name> ABC </name></label></ad> <ad><label>College Name:<college> BIET,DVg </college></label></ad> <ad><label>Branch:<branch> CSE </branch></label></ad> <ad><label>Year of Joining:<year> 2007 </year></label></ad> <ad><label>Email -id:<email> abc@gmail.com </email></label></ad> <h2>student 2</h2> <ad><label> usn:<usn> 4bd06500 </usn></label></ad> <ad><label>Name:<name> XYZ </name></label></ad> <ad><label>College Name:<college> BIET,DVg </college></label></ad> <ad><label>Branch:<branch> CSE </branch></label></ad> <ad><label>Year of Joining:<year> 2007 </year></label></ad> <ad><label>Email -id:<email> xyz@gmail.com </email></label></ad> Department Of Computer Science & Engineering Page20|37
  • 21. Web Programming Laboratory Manual <h2>student 3</h2> <ad><label> usn:<usn> 4bd06501 </usn></label></ad> <ad><label>Name:<name> PQR </name></label></ad> <ad><label>College Name:<college> BIET,DVg </college></label></ad> <ad><label>Branch:<branch> CSE </branch></label></ad> <ad><label>Year of Joining:<year> 2007 </year></label></ad> <ad><label>Email -id:<email> pqr@gmail.com </email></label></ad> </student_information> student.css ad {display:block; margin-top:15px; color:blue; font-size:13pt; } usn {color:red; font-size:12pt; margin-left:15px; } name { color:red; font-size:12pt;margin-left:15px; } college { color:red; font-size:12pt; margin-left:15px; } branch { color:red; font-size:12pt; margin-left:15px; } year { color:red; font-size:12pt; margin-left:15px; } email { color:red; font-size:12pt; margin-left:15px; } h3 { color:red; font-size:18pt; } h2 { display:block; color:black; font-size:18pt; } 6b.xml <?xml version = "1.0"?> <!-- xslplane.xml --> <?xml-stylesheet type = "text/xsl" href = "6b.xsl" ?> <student> <USN> 4bd06cs099 </USN> <name> Cessna </name> <college> BIET </college> <branch>CSE</branch> <year> 2009 </year> <email>abc@gmail.com</email> </student> 6b.xsl <?xml version = "1.0"?> <!-- xslplane.xsl --> <xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" xmlns = "http://www.w3.org/TR/xhtml1/strict"> <xsl:template match = "/"> <h2> Student information </h2> <span style = "font-style: italic"> USN: </span> <xsl:value-of select = "student/USN" /> <br /> Department Of Computer Science & Engineering Page21|37
  • 22. Web Programming Laboratory Manual <span style = "font-style: italic"> Name: </span> <xsl:value-of select = "student/name" /> <br /> <span style = "font-style: italic"> Branch: </span> <xsl:value-of select = "student/branch" /> <br /> <span style = "font-style: italic"> college Name: </span> <xsl:value-of select = "student/college" /> <br /> <span style = "font-style: italic"> Year of Joining: </span> <xsl:value-of select = "student/year" /> <br /> <span style = "font-style: italic"> Email-id: </span> <xsl:value-of select = "student/email" /> <br /> </xsl:template> </xsl:stylesheet> Department Of Computer Science & Engineering Page22|37
  • 23. Web Programming Laboratory Manual 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. 7a.pl #! /usr/bin/perl # This line tells the machine to run the file through Perl # Environment variables can be accessed using $ENV. print "content-type:text/html","nn"; print "<html><body bgcolor='cyan'><h1><center>SERVER INFORMATION<center></h1><br>"; print "<hr><br>Server Name=",$ENV{'SERVER_NAME'}; print "<br>Running port=",$ENV{'SERVER_PORT'}; print "<br>SERVER PROTOCOL=",$ENV{'SERVER_PROTOCOL'}; print "<br>Server software=",$ENV{'SERVER_SOFTWARE'}; print "<br>CGI Version=",$ENV{'GATEWAY_INTERFACE'}; print "<br><hr></body></html>"; 7b.html <html> <body bgcolor="cyan"> <form action="http://localhost/cgi-bin/7b.pl" method="get"> <center><h1>UNIX COMMAND EXECUTION</h1></center> Enter the Command:<input type="text" name="com" size=40> <br> <br> <input type="submit" value="Execute" > <input type="reset" value="clear"> </form> </body></html> 7b.pl #!/usr/bin/perl use CGI':standard'; # 6b.pl print "content type: text/html nn"; $c=param('com'); system($c); exit(0); Department Of Computer Science & Engineering Page23|37
  • 24. Web Programming Laboratory Manual 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. 8a.pl #!/usr/bin/perl use CGI ':standard'; use CGI::Carp qw(warningsToBrowser); @coins = ("Welcome to Web Programming Lab","Have a nice time in lab", "Practice all the programs", "well done Good Day"); $range = 4; $random_number = int(rand($range)); if(param) { print header(); print start_html(-title=>"User Name",-bgcolor=>"Pink",-text=>"blue"); $cmd=param("name"); print b("Hello $cmd, $coins[$random_number]"),br(); print start_form(); print submit(-value=>"Back"); print end_form(); print end_html(); } else { print header(); print start_html(-title=>"Enter user name",-bgcolor=>"cyan",-text=>"blue"); print start_form(),br(),b("enter your name"),textfield(-name=>"name",-value=>" "), submit(name=>"submit",-value=>"Submit"),reset(); print end_form(); print end_html(); } Department Of Computer Science & Engineering Page24|37
  • 25. Web Programming Laboratory Manual 8b.pl #!/usr/bin/perl use CGI ':standard'; use CGI::Carp qw(warningsToBrowser); print header(); print start_html(-title=>"WebPage Counter", -bgcolor=>"Pink",-text=>"blue"); open(FILE,'<count.txt'); $count=<FILE>; close(FILE); $count++; open(FILE,'>count.txt'); print FILE "$count"; print b("This page has been viewed $count times"); close(FILE); print end_html(); Department Of Computer Science & Engineering Page25|37
  • 26. Web Programming Laboratory Manual 9. Write a Perl program to display a digital clock which displays the current time of the server. #! /usr/bin/perl use CGI':standard'; $de=1; print "Refresh:",$de,"n"; print "content-type:text/html","nn"; print "<html><body bgcolor=cyan><center><h1>DIGITAL CLOCK</CENTER></h1><br>"; ($s,$m,$h)=localtime(time); print"<table align=center border=2 bgcolor=cheery><tr><td><font color=red size=7>$h</td><td><font size=10>:</td><td><font color=blue size=7>$m</td><td><font size=7>:</td><td><font size=7>$s</td></tr></table>"; print "<br><br><center><h2>The current system time is $h hours $m minutes $s seconds</center></h2>"; print "<br></body></html>"; Department Of Computer Science & Engineering Page26|37
  • 27. Web Programming Laboratory Manual 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. 10.html <html> <body> <form action="http://localhost/10.pl" > Name : <input type="text" name="name"> <br> Age :<input type="text" name="age"> <br> <input type="submit" value="Submit"> </form> </html 10.pl #! /usr/bin/perl use CGI ':standard'; use DBI; $age=param("age"); $name=param("name"); print "Content-type: text/htmlnn"; print "<HTML><TITLE>Result of the insert operation </TITLE><body>connection</br>"; $dbh=DBI->connect("DBI:mysql:test"); #$name=param("name"); #$age=param("age"); $qh=$dbh->prepare("insert into stud values('$name','$age')"); $qh->execute(); $qh=$dbh->prepare("Select * from stud"); $qh->execute(); 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"</body></HTML>"; Department Of Computer Science & Engineering Page27|37
  • 28. Web Programming Laboratory Manual Department Of Computer Science & Engineering Page28|37
  • 29. Web Programming Laboratory Manual 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. <html> <!-- 11.php after saving always give chmod command--> <head><title>Search Result </title></head> <body bgcolor=orange> <hr> <? // 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); echo "<h1><font color=blue><center>Program creating and displaying cookie</h1></center>"; echo"<br>"; echo "<br><center>Hello, your last visit was".$cookiedate."! </center></body></html>"; print"<br>"; ?> </body> </html> Department Of Computer Science & Engineering Page29|37
  • 30. Web Programming Laboratory Manual 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. 12.php <html> <head><title>SESSION </title></head> <body bgcolor=pink> <?php session_start(); session_register("count"); if (!isset($_SESSION)) { $_SESSION["count"] = 0; echo "<p>Counter initialized</p>n"; } else { $_SESSION["count"]++; } echo "<p><center><h1><font color=red>The counter is now <b>$_SESSION[count]</center></h1></b></p>". "<p><h2><center>reload this page to increment</center></h2></p>"; ?> Department Of Computer Science & Engineering Page30|37
  • 31. Web Programming Laboratory Manual 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. <html> <body> <?php $self = $_SERVER['PHP_SELF']; $dbh = mysql_connect('localhost', 'root', 'satish1') or die(mysql_error()); mysql_select_db('satish') or die(mysql_error()); if(isset($_POST['name'])) { $nme = $_POST['name']; $ad1 = $_POST['add1']; $ad2 = $_POST['add2']; $eml = $_POST['email']; if($nme != "" && $ad1 != "") { $query = "INSERT INTO contact VALUES ('$nme', '$ad1', '$ad2', '$eml')"; $result = mysql_query($query) or die(mysql_error()); } else echo "one of the field is empty"; } mysql_close($dbh); ?> <FORM ACTION="<?=$self?>" METHOD="POST"> <P> Name: <INPUT TYPE=text NAME="name" value=""> <BR> Address 1:<INPUT TYPE=text NAME="add1" value=""><BR> Address 2:<INPUT TYPE=text NAME="add2" value=""><BR> email:<INPUT TYPE=text NAME="email" value=""><BR> <INPUT TYPE=submit> </FORM> </body> </html> Department Of Computer Science & Engineering Page31|37
  • 32. Web Programming Laboratory Manual Department Of Computer Science & Engineering Page32|37
  • 33. Web Programming Laboratory Manual Department Of Computer Science & Engineering Page33|37
  • 34. Web Programming Laboratory Manual 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. <html> <body bgcolor=cyan> <form action="p8.php" ><br><font color=orange><h1><center>BOOK INFORMATION</H1> <table align=center><tr><td>ENTER ACESSION NO</td><td><INPUT NAME=acn></td></tr> <tr><td>ENTER TITLE</td><td><INPUT NAME=tit></td></tr> <tr><td>ENTER AUTHOR NAME</td><td><INPUT NAME=aut></td></tr> <tr><td>ENTER EDITION</td><td><INPUT NAME=edi></td></tr> <tr><td>ENTER PUBLICATION</td><td><INPUT NAME=pub></td></tr> </TABLE><br><br> <center><input type=reset value=CLEAR><BR><BR> <center><input type=submit value=INSERT> </FORM></BODY></HTML> <? mysql_connect("localhost"); $acn=$_GET['acn']; $tit=$_GET['tit']; $aut=$_GET['aut']; $edi=$_GET['edi']; $pub=$_GET['pub']; if($acn && $tit && $aut && $edi && $pub ){ mysql_db_query("test"," insert into book values('$acn','$tit','$aut','$edi','$pub') "); $res=mysql_db_query("test","select * from book"); echo"<body bgcolor=cyan><br><br><h1><center><font color=magenta> RESULT OF THE QUERY</H1><table border=1 align=center> <tr><th>ACSESSION_NO</TH><TH>TITTLE</TH><TH>AUTHOR</TH><TH>EDITION</TH><TH>PUBLICATIO N</TH</TR>"; while($arr=mysql_fetch_row($res)) {print"<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td><td>$arr[4]</td></tr>";} } else { print "<body bgcolor=cyan><h1 align=center><font color=orange>DONT LET FEILDS TO BE NULL<BR><form action =/p8.html><input type=submit value=BACK>"; } ?> <html><body bgcolor=cyan> <form action="p9.php"> <H1><center><font color=green>BOOKS ENQUIRY BASED ON TITLE OF BOOK</center></H1><br> Department Of Computer Science & Engineering Page34|37
  • 35. Web Programming Laboratory Manual <BR><BR><TABLE ALIGN=CENTER><TR><TD><font color=red ><blink><b>ENTER BOOK TITLE</TD><TD><INPUT NAME=tit></td></tr></table> <br><br><br><br><CENTER> <input type=submit value=GET_ME_BOOKS> </FORM></BODY></HTML> <? mysql_connect("localhost") or die("connection failed!!"); $tit=$_GET['tit']; if($tit != ""){ $res=mysql_db_query("test","select ascn_no,author,edition,publication from book where title='$tit'") or die("Query failed!!");} if(mysql_num_rows($res)) { echo"<body bgcolor=cyan><h1><font color=orange><CENTER>AVAILABLE BOOKS FOR GIVEN TITLE<br><font color=red>$tit<br><table border=1 align=center><tr><th>ACSESSION_NO</TH><TH>AUTHOR</TH><TH>EDITION</TH><TH>PUBLICATION</T H</TR>"; while($arr=mysql_fetch_row($res)) {print"<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td></tr>";} } else {print"<body bgcolor=cyan><br><br><br><center><H2><FONT color=red SIZE=8>SORRY</FONT><br><center>NO BOOKS ARE AVALIBLE FOR YOUR TITLE</H2><form action=p9.html><br><br><input type=submit value=GOBACK>"; } ?> OR <? $username="root"; $password="brpbrp"; $database="mysql"; $id=$_POST['id']; $accno=$_POST['accno']; $title=$_POST['title']; mysql_connect(localhost,$username,$password); @mysql_select_db($database) or die("Unable to select database"); $query="INSERT INTO library VALUES ('$id','$accno','$title')"; mysql_query($query); $query1="SELECT * FROM library"; $result=mysql_query($query1); $num=mysql_numrows($result); echo"<b>Output</b>"; print "<table border size=1><tr><th>ID</th><th>Accno</th><th>Title</th></tr>"; $i=0; Department Of Computer Science & Engineering Page35|37
  • 36. Web Programming Laboratory Manual while($i<$num) { $id=mysql_result($result,$i,"id"); $accno=mysql_result($result,$i,"accno"); $title=mysql_result($result,$i,"title"); echo "<tr><td>$id</td><td>$accno</td><td>$title</td></tr>"; $i++; } print "</table>"; mysql_close(); ?> Department Of Computer Science & Engineering Page36|37
  • 37. Web Programming Laboratory Manual Department Of Computer Science & Engineering Page37|37