Final Web Lab Manual-1

1.
Develop and demonstrate a XHTML document that illustrates the use external style
sheet, ordered list, table, borders, padding, color, and the <span> tag.
xhtml.css
p.major {
font-size: 14pt;
font-style: italic;
font-family: 'Times New Roman';
}
p.minor {
font: 10pt bold 'Courier New';
}
h2 {
font-familY: 'Times New Roman';
font-size: 20pt; font-weight: bold
}
h3 {
font-family: 'Courier New';
font-size: 16pt;
color:red;
}
table {
border-top-width: medium;
border-bottom-width: thick;
border-top-color: red;
border-bottom-color: blue;
border-top-style: dotted;
border-bottom-style: dashed;
}
p {
border-style: dashed; border-width: thin; border-color: green
}
p.one {
padding: 0.2in;
background-color: #C0C0C0;
border-style: solid;
}
th.red {color: red}
th.orange {color: orange}
th.blue {color: blue}.spanred {font-size: 24pt; font-family: Ariel; color:
red;}
xhtml.html
<?xml version = "1.0" encoding = "utf-8"?>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>basic html tags</title>
<link rel = "stylesheet" type = "text/css" href="xhtml.css" />
</head>
<body>
<h3>Program that illustrates the use of the external style sheet</h3>
<p class = "major">
Welcome you all for the workshop on "Web Programming".
</p>
<p class = "minor">
Hope you enjoy the sessions and make it a grand success.
</p>
<h2> Introduction </h2>
<h3> 1.1 The Basics of WEB </h3>
<ol>
<li> Introduction to XHTML </li>
<li> Introduction XML </li>
<li> Introduction to javascript </li>
<li> Introduction to CSS </li>
<li> Introduction to Dynamic Documents </li>
</ol>
<table border = "5px">
<caption> Sessions dates </caption>
<tr>
<th></th>
<th class = "red"> xhtml </th>
<th class = "orange"> CSS</th>
<th class = "blue"> XML </th>
</tr>
<tr>
<th> Thur </th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
<tr>
<th> Fri</th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
<tr>
<th> Sat </th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
</table>
<p>Now it is the time for all good Web programmers to learn to use style
sheets. </p>
<p class ="one">Now is the time for all good web programmers to learn to use
style sheets. <br ></p>
<p>Lab sessions are held in the <span class = "spanred"> afternoon.
</span></p></body></html>
Dept. of CSE RGIT.

Output: Displays the format of all the CSS tags used.
Dept. of CSE RGIT.

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.
2(a) Input: A number n obtained using prompt
<?xml version="1.0" encoding="UTF-8"?>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> fib.html </title>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program to generate the
Fibonacci Series</h3>
<script type="text/javascript" >
var limit= prompt("Enter the limit 'n' to generate the fibonacci
series:","");
var f1=0;
var f2=1;
document.write("The limit entered to generate the fibonacci series
is:" , limit , "<br/>");
document.write("The fibonacci series: <br/>");
document.write("",f1,"<br/>");
var i,f3;
for(i=2; i<limit; i++)
{
f3=f1+f2;
f1=f2;
f2=f3;
}
</script>
</body>
</html>
Dept. of CSE RGIT.

2(a)Output: Generates first n Fibonacci numbers
Screen 1: Run the program in the Netbeans. This opens a browser window along with the user prompt to
enter the limit to generate the Fibonacci series.
Screen 2: The limit entered to generate the Fibonacci series is: 10
Screen 3: The program generates the Fibonacci series for limit entered.
Dept. of CSE RGIT.

2(b) Input: A number n obtained using prompt
<? xml version ="1.0" encoding = "utf-8?>
<head>
<title> square.html </title>
</head>
<h3 style="text-align:center;color:red"> Program to generate a table
of numbers from 1 to n and their squares using alert</h3>
<script type="text/javascript" >
var n= prompt("Enter the limit 'n' to generate the table of
numbers from 1 to n:","");
var msg = "";
var res = "0";
for(var x = 1; x <= n; x++)
{
res = x * x;
msg = msg + " "+ x + " * "+ x + " = " + res + "\n";
}
alert(msg);
</script>
</body>
</html>
Dept. of CSE RGIT.

2(b)Output: A table of numbers from 1 to n and their squares
using alert.
enter the limit to generate square table.
Screen 2: The limit entered to generate the square table is: 12
Screen 3: The program generates the square table for limit entered using alert.
Dept. of CSE RGIT.

3. Develop and demonstrate a XHTML file that includes Javascript script that uses
functions for the following problems:
a) Parameter: A string
Output: The position in the string of the left-most vowel
b) Parameter: A number
Output: The number with its digits in the reverse order
3(a) Parameter: A string

<head>
<title> string.html </title>
<script type="text/javascript">
function str_vowel()
{
var str= prompt("Enter the string\n", " ");
for( var i=0; i<str.length; i++)
{
if(str.charAt(i) =='a' ||str.charAt(i)=='e'||str.charAt(i)=='i'
||str.charAt(i)=='o'||str.charAt(i)=='u'||str.charAt(i)=='A'||
str.charAt(i)=='E'||str.charAt(i)=='I'||str.charAt(i)=='O'
|| str.charAt(i)=='U')
{
document.write(" The entered string is:" +str+ "<br/>");
document.write(" The leftmost vowel is:" +str.charAt(i)+
"<br/>");
var pos=i+1;
document.write(" The position of the leftmost vowel "
+str.charAt(i)+ " is: " +pos+ "\n");
exit;
}
}
document.write(" The entered string is:" +str+ "<br/>");
document.write(" The entered string has no vowels ");
}
</script>
</head>
<body style="background-color:yellow" onload="str_vowel();" >
<h3 style="text-align:center;color:red"> Program includes Javascript
script functions to find the position of the left-most vowel in the
entered string.</h3>
</body>
</html>
Dept. of CSE RGIT.

3(a)Output: The position in the string of the left-most vowel
enter the string.
Screen 2: (Run 1): The string entered is BIET. The position of the left most vowel is 2
Screen 3: (Run 2): The string entered is rvwxyz. The entered string has no vowels.
Dept. of CSE RGIT.

3(b) Parameter: A number



<head>
<title> reverse.html </title>
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);
}
document.write("The given number is : " +num+ " <br /> The
reverse of the given number is :" +rev+ "\n");
}
</script>
</head>
<body style="background-color:yellow" onload="rev_num();">
<h3 style="text-align:center;color:red"> Program includes Javascript
script functions to reverse the entered number.</h3>
</body>
</html>
Dept. of CSE RGIT.

3(b)Output: The number with its digits in the reverse order
enter the number.
Screen 2: The entered number to be reversed is: 1234
Screen 3: The reverse of the enter4ed number is: 4321
Dept. of CSE RGIT.

4. a) Develop and demonstrate, using Javascript script, a XHTML document that collects
the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters
followed by two digits followed by two upper-case characters followed by three digits;
no embedded spaces allowed) of the user. Event handler must be included for the form
element that collects this information to validate the input. Messages in the alert
windows must be produced when errors are detected.
b) Modify the above program to get the current semester also (restricted to be a number
from 1 to 8)
4(a)XHTML document that collects the USN
<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>USN.html</title>
function checkusn()
{
var str=document.getElementById("usn");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
if(result!=0)
{
alert("Entered usn("+str.value+") is not in the correct form.\n"+
"The correct pattern is : 1RG07CS080\n"+"Please go back and
retype your USN");
}
else
{
alert("Entered usn("+str.value+") is in the correct form.\n");
}
}
</script>
</head>
<h3 style="text-align:center;color:red"> Program includes XHTML document to
collect the Student-Information</h3>
<h3 style="color:purple">Student Information </h3>
<form name="my form">
<p style="color:purple"> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<br/>
<input type="button" onclick="checkusn()" value="Submit"/>
<input type = "reset" value= "Reset" />
<br/>
</form>
</body>
</html>
Dept. of CSE RGIT.

4(a)Output: Collects the student information in the correct
format specified
Screen 1: Browser window is displayed to collect the student information
Screen 2: Run 1: Entered USN is (4bd06cs044), which is not in the correct format. The correct
format is 4BD06CS099, which is displayed on the alert box.
Screen 3: Run 2: Entered USN is 4BD06CS099, which is in the correct format. The alert box
displays the message saying it is in the correct format.
Dept. of CSE RGIT.

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"?>

<!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>
<title>USN.html</title>
function checkusn()
{
var str=document.getElementById("usn");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
var stsem = document.getElementById("sem");
var pos = stsem.value.search(/[1-8]/);
if(result=>0&&pos=>0)
{
alert("Entered usn("+str.value+") is in the correct form.\n"+"Entered
sem("+stsem.value+") is in the correct form.\n");
}
else if(result<0&&pos>0)
"The correct pattern is : 1RG07CS080\n");
else if(result>0&&pos<0)
alert("Entered sem("+stsem.value+") is not in the correct range.\n"+
"The number is between 1 to 8\n");
else
{
"The correct pattern is : 1RG07CS080\n"+
"Entered sem("+stsem.value+") is not in the correct range.\n"+
"The number is between 1 to 8\n"+
"Please go back and retype your USN & sem");
}
}
</script>
</head>
<body>
<h3>Student Information </h3>
<form name="my form">
<p> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<p> Enter your SEM:</p>
<input type="text" id="sem" size=15/>
<br/>
<br/>
<input type="button" onclick="checkusn()" value="validate"/>
<input type = "reset” value= "reset" />
<br/>
</form>
</body></html>
Dept. of CSE RGIT.

4(a)Output: Collects the student information in the correct
format specified
Screen 1: Run 1: Entered USN is (1RG06cs099) and Sem is (9), which is not in the correct
format. The correct format is 1RG06CS099, & the Sem range is with in (1-8), which is displayed
on the alert box.
Screen 2: Run 2: Entered USN is (1RG06CS099) and Sem is (5). Which is in the correct format.
5. a) Develop and demonstrate, using Javascript script, a XHTML document that contains
Dept. of CSE RGIT.

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.
5(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">

<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:green;
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;
position:absolute;
top:140px;
left:240px;
z-index:0;
}
</style>
Dept. of CSE RGIT.

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><body style="background-color:yellow">
<h2 style="text-align:center;color:red"> Program includes XHTML
document to show the Stacking of Paragraphs</h2>
<div style="z-index: 10;" class="layer1Style" id="layer1"
onmouseover="mover('layer1')">
The lives of most inhabitants of Industrialized Countries, has
well as some unindustrialized countries, have been changed forever by the
advent of WWW.
</div>
The www may seem like magic , untill you undrestand how it
works.The Web is accessed through a browser.
</div>
Windows XP provides many ways for you to communicate with friends,
co-workers, and I with the rest of the world.
</div>
</body>
</html>
Dept. of CSE RGIT.

5(a)Output: That shows the stacking of the paragraphs
Screen 1: The window shows the default stacking of the paragraphs.
Screen 2: The window shows the paragraph when the mouse cursor is placed on it.
Dept. of CSE RGIT.

5(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:green;
position:absolute;
top:100px;
left:400px;
z-index:1;
}
.layer2Style{
border: solid thick blue;
padding: 1em;
width:300px;
background-color:red;
position:absolute;
top:120px;
left:420px;
z-index:2;
}
.layer3Style{
border: solid thick brown;
padding: 1em;
width:300px;
background-color:orange;
position:absolute;
top:140px;
left:440px;
z-index:3;
}
</style>
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
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>
Dept. of CSE RGIT.

<h1 style="text-align:center;color:red"> The Stacking of paragraphs when
moved from the top stacking position, it returns to its original
position.</h1>
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>
The www may seem like magic , untill you undrestand how it works.The Web is
accessed through a browser.
</div>
Windows XP provides many ways for you to communicate with friends, co-workers,
and Iwith the rest of the world.
</div>
</body>
</html>
Dept. of CSE RGIT.

5(b)Output: The Stacking of paragraphs when moved from the top
stacking position, it returns to its original position
Screen 1: The window shows the default stacking of the paragraphs.
Screen 2: The window shows the paragraph when the mouse cursor is placed on it.
Screen 3: The window displays the paragraphs to its original (default) position
Dept. of CSE RGIT.

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.
6(a)XML document to store information about a student in an

engineering college (using internal DTD to show the XML
structure)
student.xml (with internal DTD)
<?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)>
<!ELEMENT label (#PCDATA|email|year|branch|college|name|usn)*>
<!ELEMENT h3 (#PCDATA)>
<!ELEMENT h2 (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="stu.css"?>

<student_information>
<h3>Student-Information</h3>
<h2>student 1</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label>Name:<name> AAA </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> aaa@gmail.com </email></label></ad>
<h2>Student 2</h2>
<ad><label>Name:<name> BBB </name></label></ad>
<ad><label>Email -id:<email> bbb@gmail.com </email></label></ad>
<h2>Student 3</h2>
<ad><label>Name:<name> CCC </name></label></ad>
Dept. of CSE RGIT.

<ad><label>Email -id:<email> ccc@gmail.com </email></label></ad>
</student_information>
stu.css (External style sheet for student.xml file)

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; }
Dept. of CSE RGIT.

6(a)Output: An XMl file to display the details of three Students
Dept. of CSE RGIT.

6(b) An XSLT style sheet for one student element of the above
document and use it to create a display of that element.
xsl.xml
<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "xslstudent.xsl" ?>
<student>
<USN> 4bd06cs099 </USN>
<name> Cessna </name>
<college> BIET </college>
<branch>CSE</branch>
<year> 2009 </year>
<email>abc@gmail.com</email>
</student>
xslstudent.xsl
<?xml version = "1.0"?>

<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 />
<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>
Dept. of CSE RGIT.

6(b)Output: An XSTL style sheet to collect details of single
student
Dept. of CSE RGIT.

7(a) Write a Perl program to display various Server Information like Server Name, Server
Software, Server Protocol, CGI Revision etc.
7a.cgi
#!/usr/bin/perl
print "content-type:text/html \n\n";
print <<END;
<html>
<body bgcolor="aabbcc">
<h3> Perl Program to get the Server-Information</h3>
Server Name: $ENV{'SERVER_NAME'}<br>
Server Port: $ENV{'SERVER_PORT'}<br>
Server Software: $ENV{'SERVER_SOFTWARE'}<br>
Server Protocol: $ENV{'SERVER_PROTOCOL'}<br>
CGI VERSION: $ENV{'GATEWAY_INTERFACE'}
</body>
</html>
END
(7a):Ouput that the displays the Server Information
Dept. of CSE RGIT.

7(b) Write a Perl program to accept UNIX command from a HTML form and to display
the output of command executed.
7b.html
<html>
<head><title>UNIX COMMANDS</title></head>
<h3>ENTER UNIX COMMANDS</h3>
<form action="/cgi-bin/7b.cgi" method="post">
Comand:<input type="text" name="cmd" size=40>
</br>
</br>
<input type="submit" value="Submit">
</form>
</body>
</html>
7b.cgi
#!/usr/bin/perl
use CGI':standard';
print"Content-type:text/html\n\n";
print "<html><body bgcolor=aabbcc>
<h3>Output for the Entered Command</h3>
</body>
</html>";
$cmd=param("cmd");
if($cmd)
{
@result = `$cmd`;
print "<br>";
foreach(@result)
{
print "$_ <br>\t";
}
}
else
{
print "Please give command!!";
}
Dept. of CSE RGIT.

(7b):Ouput that the displays details of the entered Command.
Screen 1: The browser window is displayed with the text box to enter the Commands.
Screen 2: The window shows the results of the entered command.
Dept. of CSE RGIT.

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.
8a.html
<html>
<head><title>NAME</title></head>
<h3>ENTER NAME & RECEIVE THE GREETINGS</h3>
<form action="/cgi-bin/8a.cgi" method="get">
NAME:<input type="text" name="name"><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
8a.cgi
#!/usr/bin/perl
use CGI':standard';
print "content-type:text/html","\n\n";
$input=param(name);
print "<html><body bgcolor=aabbcc><h3>Hi,$input</h3>";
my @msgs=("Good","Welcome","Fine","Hello");
print "<h3>The message received is: ";
print $msgs[int rand scalar @msgs];
print "</h3></body></html>";
Dept. of CSE RGIT.

(8a):Ouput that the displays Name & message.
Screen 1: The browser window is displayed with the text box to enter the name .
Screen 2: The browser window displays the name entered and the message which is picked
randomly.
Dept. of CSE RGIT.

8(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.
8b.pl
#!/usr/bin/perl
use CGI;
$cgi=new CGI;
print $cgi->header;
print $cgi->start_html('Program 8b');
#print $cgi->start_body('<color=aabbcc>');
print $cgi->h3('<center><font color=green>Server Page Visited
Information</font>
</center>');
#print $cgi->hr;
$count_file="count.txt";
if(open(FILE,"<".$count_file))
{
$no_accesses = <FILE>;
close(FILE);
if(open (FILE,">".$count_file))
{
$no_accesses++;
print FILE $no_accesses;
close(FILE);
}
else
{
print "Cannot write the file. No Visitors information
in the server";
}
}
else {
print "cannot read the counter database for visitors";
}
print "<h3>Welcome User,</h3>";
print "<h3>This page has been visited<font color=red size=8> $no_accesses
</font> times from the creation</h3>";
#print $cgi->end_body;
print $cgi->end_html;
8b.html
<html>
<head><title>VISITORS</title></head>
<br/>
<h3>TO KNOW THE NO. OF VISITORS FOR THIS WEB PAGE</h3>
<form action="/cgi-bin/8b.pl" method="get">
<input type="submit" value="submit">
</form>
</body>
</html>
count.txt
Dept. of CSE RGIT.

(8b):Output that the displays the number of visitors to this page
Screen 1: The window gives the option to see the number of visitors to this web page on clicking
the submit button.
Screen 2: The user can see the number of visitors to this web page.
Dept. of CSE RGIT.

9. Write a Perl program to display digital clock which displays the Current time of the
server.
9.cgi
#!/usr/bin/perl
$GS="/usr/bin/gs";
$|=1;
$ds=1;
print "Refresh:",$ds,"\n";
print "content-type:image/png","\n\n";
my ($s,$m,$h)=localtime(time);
$t=sprintf("%02d:%02d:%02d",$h,$m,$s);
open(GS,"|gs -sDEVICE=png256 -sOutputFile=- -q -g200x50 - 2>/dev/null");
print GS <<end;
%!PS -Adobe-3.0 ESPF-3.0
%%BoundingBox:$x $y
%%EndComments
/Arial findfont 20 scalefont setfont
/fontColor {1.0 0.2 0.4 setrgbcolor}def
/bgColor {1.5 0.2 1.0 setrgbcolor}def
/bgColor clippath fill
40 20 moveto
($t)fontColor show
showpage
end
close(GS);
exit(0);
Dept. of CSE RGIT.

9:Output that the displays digital clock which shows the Current time of the server.
Please check the output
Dept. of CSE RGIT.

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>
<head><title>Age Information</title></head>
<h2>Age Infornmation</h2>
<form action="/cgi-bin/10.cgi" method="get">
<table border="0">
<tr><td>First Name:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr><td>Last Name:</td>
<td><input type="text" name="lname"></td>
</tr>
<tr><td>Age:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td><input type="submit" value="Submit Form"></td>
<td><input type="reset" value="Reset"></td
</tr>
</table>
</form>
</body>
</html>
10.cgi
#!/usr/bin/perl
use DBI;
use CGI':standard';
print "content-type:text/html","\n\n";
$lname = param("lname") or die "enter lanme";
$fname=param("fname")or die "enter name" ;
$age = param("age")or die "enter age";
$dbh = DBI->connect('DBI:mysql:people','root')
or die("Cannot Connect");
$sth = $dbh->prepare('insert into age_info values(?,?,?)')
or die("Cannot prepare:");
$sth->execute($lname,$fname,$age);
$sth = $dbh->prepare('select * from age_info')
or die("Cannot People");
$sth->execute();
print "<html>";
print "<head><title>Age Info</title></head>";
print "<body bgcolor='aabbcc'>";
print "<h3> contents of age_info table</h3>";
print "<table border='1'>";
print "<tr><th>LNAME</th><th>FNAME</th><th>AGE</th></tr>";
while(($ln,$fn,$age)=$sth->fetchrow())
{
print "<tr><td>$ln</td><td>$fn</td><td>$age</td></tr>";
}
print "</table></body></html>";
Dept. of CSE RGIT.

10:Output that the displays the user name and age entered.
Screen 1: The window is displayed with the text box to enter the Name and Age of the user.
Screen 2: The window shows the table details with the updated values.
Dept. of CSE RGIT.

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.
11.php
<?php
//Calculate 60 days in the future

//seconds * minutes * hours * days + current time
$inTwoMonths = 60 * 60 * 24 * 60 + time();
setcookie('lastVisit', date("G:i - m/d/y"), $inTwoMonths);
?>
11:Output that the displays the ‘Last visited on’ the web page created.
Dept. of CSE RGIT.

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
<?php
session_start();
if(isset($_SESSION['views']))
$_SESSION['views'] = $_SESSION['views']+ 1;
else
$_SESSION['views'] = 1;
echo "views = ". $_SESSION['views'];
?>
12:Output that stores page views & increments the count on each refresh.
13. Create a XHTML form with Name, Address Line1, Address Line2, and E-mail text
fields. On submitting, store the values in MYSQL table. Retrieve and display the data
based on Name.
13.XHTML (page to enter the user details)
<?xml version="1.0" encoding="ISO-8859-1"?>

Dept. of CSE RGIT.

<h3>Program to collect the Customer-Information</h3>
<form action = "/php/13.php" method = "post">
<table border="0">
<tr>
<td>Enter Name:</td>
<td><input type = "text" name = "name"></td>
</tr>
<tr>
<td>Enter Address Line1:</td>
<td><input type = "text" name = "add1"></td>
</tr>
<tr>
<td>Enter Address Line2:</td>
<td><input type = "text" name = "add2"></td>
</tr>
<tr>
<td>Enter Email-id: </td>
<td><input type = "text" name = "email"></td>
</tr>
<tr><td> </td></tr>
<tr></tr>
<tr>
<td><input type = "submit" value = "Submit"></td>
<td><input type = "Reset" value = "Reset"></td>
</tr>
</br>
<a href="13b.html">To Search click here.</a></td>
</table>
</form>
</body>
</html>
13b.html(html page to make the search)

<html>
<h3>Search Page</h3>
<form action = "/php/13b.php" method = "post">
Enter the name to be searched: <input type = "text" name =
"search">
<br/>
<br/>
<input type = "submit" value = "submit">
<input type = "reset" value = "Reset">
</form>
</body>
</html>
13.php(To update the details entered by the user in MYSQL table created)
<? Php
$name=$HTTP_POST_VARS["name"];
$add1=$HTTP_POST_VARS["add1"];
$add2=$HTTP_POST_VARS["add2"];
$email=$HTTP_POST_VARS["email"];
Dept. of CSE RGIT.

$mysql=mysql_connect("localhost","root")
or die("can't connect");
mysql_select_db("cus_info")
or die("can't select");
mysql_query("insert into address values('$name','$add1','$add2','$email')")
or die("query failed to insert");
$result=mysql_query("select * from address");
?>
<html>
<head><title>PHP and MYSQL</title></head>
<h3>Page to display the Stored data</h3>
<table border="1">
<tr>
<th>NAME</th>
<th>ADDRESS Line1</th>
<th>ADDRESS Line2</th>
<th>EMAIL-id</th></tr>
<?while($array=mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
</tr>
<? endwhile;?>
<?mysql_free_result($result);?>
<?mysql_close($mysql);?>
</table>
</body>
</html>
<?
$search = $HTTP_POST_VARS["search"];
$mysql = mysql_connect("localhost","root")
or die("Cannot Connect");
mysql_select_db("cus_info")
or die("Cannot select the database");
$result =mysql_query("select * from address where name like '%$search%'")
or die ("cannot execute");
?>
13b.php(To make the search based on the name entered in the table)
<?
$mysql = mysql_connect("localhost","root")or die("Cannot Connect");
mysql_select_db("cus_info") or die("Cannot select the database");
$result =mysql_query("select * from address where name like
'%$search%'")or die ("cannot execute");
?>
<html>
Dept. of CSE RGIT.

<? if(mysql_num_rows($result)>0): ?>
<table border = "1">
<tr>
<th>NAME</th>
<th>ADDRESS LINE1</th>
<th>ADDRESS LINE2</th>
<th>EMAIL</th>
</tr>
<br/>
<h3> Search Results</h3>
<? while($array = mysql_fetch_row($result)):?>
<tr>
</tr>
<? endwhile;?>
<? else: ?>
<?echo "no rows selected";?>
<? endif;?>
</table>
</body>
</html>
13:Output to collect the user information & displays the stored results.
Screen 1: The window gives the option to enter the user information.
Dept. of CSE RGIT.

Screen 2: The user can retrieve the results based on the name entered.
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
Dept. of CSE RGIT.

14.php (To update the details of the book entered by the user into the mysql table)
<?
$isbn=$HTTP_POST_VARS["isbn"];
$title=$HTTP_POST_VARS["title"];
$author=$HTTP_POST_VARS["author"];
$edition=$HTTP_POST_VARS["edition"];
$publication=$HTTP_POST_VARS["publication"];
$mysql=mysql_connect("localhost","root")
or die("can't connect");
mysql_select_db("books")
or die("can't select");
mysql_query("insert into book_info
values('$isbn','$title','$author','$edition','$publication')")
or die("query failed to insert");
$result=mysql_query("select * from book_info");
?>
<html>
<head><title>PHP and MYSQL</title></head>
<table border="1">
<tr>
<th>ISBN</th>
<th>TITLE</th>
<th>AUTHOR</th>
<th>EDITION</th>
<th>PUBLICATION</th>
</tr>
<?while($array=mysql_fetch_row($result)):?>
<tr>
</tr>
<? endwhile;?>
<?mysql_free_result($result);?>
<?mysql_close($mysql);?>
</table>
</body>
</html>
14b.php(To search for the book with the title specified by the user)
<?
$mysql = mysql_connect("localhost","root")or die("Cannot Connect");
mysql_select_db("books") or die("Cannot select the database");
$result =mysql_query("select * from book_info where title like
'%$search%'") or die ("cannot execute");
Dept. of CSE RGIT.

?>
<html>
<? if(mysql_num_rows($result)>0): ?>
<table border = "1">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Publication</th>
</tr>
<b>Query Executed for Search</b>
<? while($array = mysql_fetch_row($result)):?>
<tr>
</tr>
<? endwhile;?>
<? else: ?>
<?echo "no rows selected";?>
<? endif;?>
</table>
</body>
</html>
14.html(To enter the details of the books by the user).

<html>
<h3> Program to accept the Book-Information</h3>
<form action = "/php/14.php" method = "post">
<table border="0">
<tr>
<td>Enter ISBN:</td>
Dept. of CSE RGIT.

<td><input type = "text" name = "isbn"></td>
</tr>
<tr>
<td>Enter TITLE:</td>
<td><input type = "text" name = "title"></td>
</tr>
<tr>
<td>Enter AUTHOR:</td>
<td><input type = "text" name = "author"></td>
</tr>
<tr>
<td>Enter EDITION: </td>
<td><input type = "text" name = "edition"></td>
</tr>
<tr>
<td>Enter PUBLICATION:</td>
<td><input type = "text" name = "publication"></td>
</tr>
<tr>
<td><input type = "submit" value = "submit">
</td>
</tr>
</table>
</form>
</body>
</html>
14b.html(to make the search based on the title of given by user).

<html>
<h3>Search Page</h3>
<form action = "/php/14b.php" method = "post">
Enter the title of the book to be searched:
<input type = "text" name = "search">
<br/>
<input type = "submit" value = "submit">
<br/>
</form>
</body>
</html>
14:Output to collect the user information & displays the stored results.
Screen 1:
Dept. of CSE RGIT.

Dept. of CSE RGIT.

Final Web Lab Manual-1

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Final Web Lab Manual-1

Загружено:

Авторское право:

Доступные форматы

1.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

a) Input: A number n obtained using prompt.

b) Input: A number n obtained using prompt.

2(a) Input: A number n obtained using prompt

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

Dept. of CSE RGIT.

Screen 2: The limit entered to generate the Fibonacci series is: 10

Dept. of CSE RGIT.

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

Dept. of CSE RGIT.

Screen 2: The limit entered to generate the square table is: 12

Dept. of CSE RGIT.

3(a) Parameter: A string

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

<html xmlns = "http://www.w3.org/1999/xhtml">

Dept. of CSE RGIT.

Dept. of CSE RGIT.

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

<html xmlns = "http://www.w3.org/1999/xhtml">

Dept. of CSE RGIT.

Screen 2: The entered number to be reversed is: 1234

Screen 3: The reverse of the enter4ed number is: 4321

Dept. of CSE RGIT.

4(a)XHTML document that collects the USN

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

Dept. of CSE RGIT.

Screen 1: Browser window is displayed to collect the student information

Dept. of CSE RGIT.

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

Dept. of CSE RGIT.

Dept. of CSE RGIT.

5(a)XHTML document that contains three short paragraphs of text,

<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Screen 1: The window shows the default stacking of the paragraphs.

Dept. of CSE RGIT.

<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Screen 1: The window shows the default stacking of the paragraphs.

Dept. of CSE RGIT.

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

student.xml (with internal DTD)

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

<?xml-stylesheet type="text/css" href="stu.css"?>

Dept. of CSE RGIT.

stu.css (External style sheet for student.xml file)

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

(7a):Ouput that the displays the Server Information

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Screen 2: The window shows the results of the entered command.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Dept. of CSE RGIT.

Dept. of CSE RGIT.