Web Programming Lab Manual

1
1) 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
<html>
<body>
<script type="text/javascript">
var f1=0,f2=1,f3;
var i;
var n=prompt("Enter the Number");
document.write("The fibonacci Series is"+"<br />");
document.write(f1+"<br />");
for(i=2;i<=n;i++)
{
f3=f1+f2;
f1=f2;
f2=f3;
}
</script>
</body>
b) Input: A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using alert
<html>
<body>
var msg=" ";
var res;
var i;
var n=prompt("Enter the Number");
for(i=1;i<=n;i++)
{
res=i*i;
msg=msg + i + 'x' + i + '=' + res +'\n';
}
alert("The sqaures of the number is"+msg);
</script>
</body>
1
2
2. 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.
<html>
<head>
function checkusn()
{
var usn_val=document.getElementById("usn").value;
var upat=/^[1-4]{1}[a-zA-Z]{2}[0-9]{2}[a-zA-Z]{2}[0-9]{3}$/;
if(upat.test(usn_val))
alert("Valid USN");
else
alert("Invalid USN");
}
</script>
</head>
<body>
<form>
Enter USN:
<input type="text" id="usn"/>
<input type="submit" value="OK" onclick="checkusn();"/>
</form>
</body>
</html>
2.b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8)
<html>
<head>
function checkboth()
{
var usn_val=document.getElementById("usn").value;
var upat=/^[1-4]{1}[a-zA-Z]{2}[0-9]{2}[a-zA-Z]{2}[0-9]{3}$/;
if(upat.test(usn_val))
alert("Valid USN");
else
alert("Invalid USN");
var sem_val=document.getElementById("sem").value;
var spat=/^[1-8]$/;
if(spat.test(sem_val))
alert("Valid Sem");
else
alert("Invalid Sem");
}
</script>
</head>
<body>
<form>
Enter USN:
<input type="text" id="usn"/>
Enter sem:
<input type="text" id="sem"/>
<input type="submit" value="OK"onclick="checkboth();"/>
</form>
</body>
</html>
2
3
3a) 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.
<html>
<head>
function toTop(newTop)
{
newTop.style.zIndex="10";
}
</script>
<style>
p.one
{
position:absolute;
width:150px;
text-align:center;
margin:0.0in;
background-color:yellow;
z-index:1;
}
p.two
{
position:absolute;
width:150px;
text-align:center;
margin:0.2in;
background-color:green;
z-index:2;
}
p.three
{
position:absolute;
width:150px;
text-align:center;
margin:0.4in;
background-color:blue;
z-index:3;
}
</style>
</head>
<body>
<p class="one" id="one" onmouseover="toTop(this)" onmouseout="">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
<p class="two" id="two" onmouseover="toTop(this)" onmouseout="">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
<p class="three" id="three" onmouseover="toTop(this)" onmouseout="">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
</body>
</html>
3
4
3 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.
<html>
<head>
function toTop(newTop)
{
newTop.style.zIndex="10";
}
function toOriginal(o)
{
switch(o)
{
case "one": document.getElementById(o).style.zIndex=1;break;
case "two": document.getElementById(o).style.zIndex=2;break;
case "three": document.getElementById(o).style.zIndex=3;break;
}
}
</script>
<style>
p.one
{
position:absolute;
width:150px;
text-align:center;
margin:0.0in;
background-color:yellow;
z-index:1;
}
p.two
{
position:absolute;
width:150px;
text-align:center;
margin:0.2in;
background-color:green;
z-index:2;
}
p.three
{
position:absolute;
width:150px;
text-align:center;
margin:0.4in;
background-color:blue;
z-index:3;
}
</style>
</head>
<body>
<p class="one" id="one" onmouseover="toTop(this)" onmouseout="toOriginal('one')">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
<p class="two" id="two" onmouseover="toTop(this)" onmouseout="toOriginal('two')">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
<p class="three" id="three" onmouseover="toTop(this)"
onmouseout="toOriginal('three')">
1. CSE <BR />
2. TE <BR />
3. EC <BR />
4. ME </p>
</body>
</html>
4
5
4. 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.
4a.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="4a.css"?>
<vtu>
<student>
<USN>1KS13CS078</USN>
<NAME>Poorna</NAME>
<COLLEGE>KSIT</COLLEGE>
<BRANCH>CSE</BRANCH>
<YEAR>2019</YEAR>
<EMAIL>xyz@gmail.com </EMAIL>
</student>
<student>
<USN>1KS13CS084</USN>
<NAME>Rahul</NAME>
<COLLEGE>KSIT</COLLEGE>
<BRANCH>CSE</BRANCH>
<YEAR>2028</YEAR>
<EMAIL>abcd@gmail.com </EMAIL>
</student>
</vtu>
4a.css
vtu{background-color:aqua; width:100%;}
student{display:block;margin-bottom:30pt;}
USN{color:red;font-size:20pt;}
NAME{color:yellow;font-size:20pt;}
COLLEGE,BRANCH,YEAR,EMAIL{display:block;margin-left:20pt;}
4.b) Create an XSLT style sheet for one student element of the above document and use it to create a display of that
element.
4b.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="4b.xsl"?>
<student>
<h2>Student 1</h2>
<usn>1KS13CS066</usn>
<name>Jackie</name>
<college>KSIT</college>
<branch>CSE</branch>
<year>2010</year>
<email>poornapowers@gmail.com</email>
</student>
4b.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<html>
<body>
<h2>Student Information</h2>
<h5>USN:<xsl:value-of select ="student/usn"/></h5>
<h5>NAME:<xsl:value-of select ="student/name"/></h5>
<h5>COLLEGE:<xsl:value-of select ="student/college"/></h5>
<h5>BRANCH:<xsl:value-of select ="student/branch"/></h5>
<h5>YEAR:<xsl:value-of select ="student/year"/></h5>
<h5>EMAIL:<xsl:value-of select ="student/email"/></h5>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
5
6
5 a) Write a perl program to display various Server Information like Server Name, Server Software,Server
Protocol,CGI revision etc.
#!c:\perl\bin\perl.exe
#7a.pl
use CGI ':standard';
my $key;
print header;
print "
<html><head><title>XAMPP Server Information</title></head>
<body bgcolor='cyan'>
<table border='1'>
<caption style='font-size:24pt;'>XAMPP Server Information</caption>
<thead><th>Variable</th><th>Value</th></thead>
<tbody>
";
foreach $key(keys(%ENV))
{
print "<tr><td>$key</td><td>$ENV{$key}</td></tr>";
}
print "</tbody></table></body></html>";
OR (Without table)
#!c:\xampp\perl\bin\perl.exe
print header;
foreach $key (keys %ENV)
{
print "<html><body><p> $key :\t\t$ENV{$key} \n </p></body></html>";
}
5 b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command
executed.
print header;
my $myCmd=param("command");
if($myCmd)
{
system($myCmd);
}
print <<EOHTML;
<html>
<body>
<form action="http://localhost/cgi-bin/5b.pl">
<label>Enter Command </label>
<input type="text" name="command" />
<input type="submit" value="OK" />
</form>
</body>
</html>
EOHTML
6
7
6 a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from a list of 4
greeting messages.
use strict;
if(param())
{
my @msg=("Good Morning","Good Afternoon","Good Evening","Good Night");
my $n=int(rand(4));
my $name=param('name');
print header,
start_html('Welcome message'),
"Hello",br,
"$name",br,
"$msg[$n]",
end_html;
}
else
{
print header,
start_html('Welcome message'),
start_form(action=>"http://localhost/cgi-bin/6a.pl"),
"Enter your name",
textfield(name=>'name'),
submit,
end_form,
end_html;
}
6 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.
#!c:/xampp/perl/bin/perl.exe
my $vc=0;
open(VISITOR,"+<visitor.txt");
$vc=<VISITOR>;
$vc=$vc+1;
seek(VISITOR,0,0);
print VISITOR $vc;
close(VISITOR);
print header;
print "You are visitor number: $vc";
7. Write a Perl program to display a digital clock which displays the current time of the server.
print "Content-type:text/html"."\n\n";
print"<meta http-equiv='refresh' content='1' url='http://localhost/cgi-bin/7.pl'>";
($sec,$min,$hr)=localtime time;
if($hr>12)
{
$hr=$hr-12;
$ampm="PM";
}
else
{
$ampm="AM";
}
print "$hr: $min: $sec $ampm";
OR (Without AM and PM)
print "Content-type:text/html"."\n\n";
print"<meta http-equiv='refresh' content='1' url='http://localhost/cgi-bin/7.pl'>";
($sec,$min,$hr)=localtime time;
print "$hr: $min: $sec";
7
8
8. 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.
use DBI;
print header;
if(param)
{
$dbh=DBI->connect("DBI:mysql:ksit1","root","") or die "couldn't establish
connection";
$name=param "name";
$age=param "age";
$sth=$dbh->prepare("INSERT INTO student(name,age) values(?,?)") or die "couldn't
prepare";
$sth->execute($name,$age) or die "Execution failure";
$sth->finish();
$sth=$dbh->prepare("SELECT * FROM student") or die"couldn't prepare";
$sth->execute( )or die "Execution failure";
print "<table border='1'>";
print "<tr><th>Name</th><th>Age</th></tr>";
while(($nm,$ag)=$sth->fetchrow( ))
{
print"<tr><td>$nm</td><td>$ag</td></tr>";
}
print "</table>";
$sth->finish();
$dbh->disconnect();
}
print "<hr/>";
print<<EOHTML;
<html>
<body>
<form action="http://localhost/cgi-bin/8.pl">
<label>Enter Name:</label>
<input type="text" name="name"/>
<br/>
<label>Enter Age:</label>
<input type="text" name="age"/>
<br/>
<input type="submit" value="OK"/>
<input type="reset" value="Cancel"/>
</form>
</body>
</html>
EOHTML
STEPS TO CREATE DATABASE IN MYSQL:

mysql u root
mysql>create database ksit1;
mysql>use ksit1;
mysql>create table student(name varchar(20) not null,age int(3) not null);
Now run 8.pl from localhost/cgi-bin/8.pl in any browser.
8
9
9. 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
<?php
date_default_timezone_set("Asia/Calcutta");
$inTwoMonths = 60 * 60 * 24 * 60 + time();
setcookie('lastVisit', date("G:i - m/d/y"), $inTwoMonths);
if(isset($_COOKIE['lastVisit']))
{
$visit = $_COOKIE['lastVisit'];
echo "Your last visit was - ". $visit;
}
else
echo "You've got some stale cookies!";
?>
10. 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.
<?php
session_start();
if(!isset($_SESSION['pn']))
$_SESSION['pn'] = 1;
$pn=$_SESSION['pn'];
print "You have now visited $pn pages(s) <br />";
$_SESSION['pn']++;
?>
11. 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.
11a.html
<html>
<a href="http://localhost/11b.html"> Click here to search </a>
<body>
<form action="http://localhost/11a.php" method="get">
NAME <input type="text" name="field1" size=20><br />
ADDRESS LINE1 <input type="text" name="field2" size=50><br />
ADDRESS LINE2 <input type="text" name="field3" size=50><br />
E-MAIL <input type="text" name="field4" size=50><br />
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
11a.php
<html>
<?php
$mysql=mysql_connect("localhost","root","")or die("cant connect");
$er = mysql_select_db("person");
$nam=$_GET["field1"];
$add1=$_GET["field2"];
$add2=$_GET["field3"];
$email=$_GET["field4"];
$query = "insert into info values('$nam','$add1','$add2','$email')"or die ("cant
connect");
$result = mysql_query($query);
mysql_close($mysql);
?>
<br/>
<h3>Database has been updated</h3>
</body>
</html>
9
10
11b.html
<html>
<body>
<form action="http://localhost/11b.php" method="get">
<h3>Enter the Name</h3>
NAME<input type="text" name="name1" size=20><br />
<input type="submit"value="submit">
<input type="reset"value="reset">
</form>
</body>
</html>
11b.php
<?php
$mysql=mysql_connect("localhost","root")or die("cannot connect");
$db=mysql_select_db("person");
$name_s=$_GET["name1"];
$result=mysql_query("select * from info where name='$name_s'")or die("query failed");
?>
<html>
<body>
<table border="2" align="center">
<tr>
<th>NAME</th><th>ADDRESS1</th><th>ADDRESS2</th><th>EMAIL</th>
</tr>
<? while($array=mysql_fetch_row($result)):?>
<tr>
<td> <? echo $array[0];?> </td>
</tr>
<?endwhile;?>
</table>
<?mysql_close($mysql);?>
</body>
</html>
STEPS TO CREATE DATABASE IN MYSQL:

Step 1 : Login to Mysql
mysql u root
Step 2 :Create a new database info
mysql>create database person;
Step 3 : Switch to your database by
mysql>use person ;
Step 4: Create the table using table command of MySQL
mysql>create table info(name char(20), add1 char(50),add2 char(50),email char(50));
10

Web Programming Lab Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming Lab Manual

Uploaded by

Copyright:

Available Formats

1

a) Input: A number n obtained using prompt

b) Input: A number n obtained using prompt

OR (Without AM and PM)

STEPS TO CREATE DATABASE IN MYSQL:

Now run 8.pl from localhost/cgi-bin/8.pl in any browser.

STEPS TO CREATE DATABASE IN MYSQL:

You might also like