Beruflich Dokumente
Kultur Dokumente
WEB LAB
(AN)2D
7th SEM
Prepared by
ANAND S
(AN)2D
Dept.of.CSE
GECR
WEB LAB
(AN)2D
INDEX
Sl. No
Pg. No
1a
1b
3-4
2a
4-5
2b
Modify the above program to get the current semester also (1-8)
5-6
3a
6-7
3b
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.
7-8
4a
8-9
4b
XSLT style sheet for one student element of the above document and use it to
create a display of that element.
9 - 10
5a
Perl program to display various Server Information like Serve Name, Server
Software, Server protocol, CGI Revision etc.
10 - 11
5b
Perl program to accept UNIX command from a HTML form and to display the
output of the command executed.
11 - 12
6a
Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.
12
6b
Perl program to keep track of the number of visitors visiting the web page and
to display this count of visitors, with proper headings.
13
Program Name
Perl program to display a digital clock which displays the current time of the
server.
13 - 14
Perl program to insert name and age information entered by the user into a
table created using MySQL and to display the current contentsof this table
14 - 15
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
15
10
PHP program to store page views count in SESSION, to increment the count
on each refresh, and to show the count on web page.
15 - 16
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.
16 - 18
18 - 20
11
12
Dept.of.CSE
GECR
WEB LAB
(AN)2D
<html>
<head>
<title>Fibonacci</title>
<body>
<script type="text/javascript">
var n = prompt("Enter a num");
document.write(n + " fibonacci numbers are <br/>");
for(var i = 1; i <= n; i++) {
document.write(fib(i) + "<br/>");
}
document.close();
function fib(n) {
if(n == 1) return 0;
if(n == 2) return 1;
return fib(n - 1) + fib(n - 2);
}
</script>
</head>
</body>
</html>
Output
-->Open with firefox
<html>
<head>
<title>Squares</title>
<script type="text/javascript">
var num=prompt("Enter a number"," ");
if(num>0&&num!=null)
{
Dept.of.CSE
GECR
WEB LAB
(AN)2D
2a) Develop and demonstrate, using Javascript script, a XHTML document hat 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.
2a.html
<html>
<head>
<title>USN Validation</title>
</head>
<body>
<script type="text/javascript">
function func(USN)
{
var pattern1=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/
if(!USN.value.match(pattern1)||USN.value.length==0)
{
alert("Invalid USN")
return false
}
else
alert("USN Valid")
}
</script>
<form action="">
<p>
USN:<input type="text" name="USN"><br/>
<input type="button" value="Validate" onclick="func(USN)">
Dept.of.CSE
GECR
WEB LAB
(AN)2D
</p>
</form>
</body>
</html>
Output
-->Open with firefox
2b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8)
2b.html
<html>
<head>
<title>USN and sem Validation</title>
</head>
<body>
<script type="text/javascript">
function func(USN, sem)
{
var pattern1=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/
var pattern2=/^[1-8]$/
var c=""
if(!USN.value.match(pattern1)||USN.value.length==0)
{
c=c+"invalid USN\n"
}
else
c=c+"valid USN\n"
if(!sem.value.match(pattern2)||sem.value.length==0)
{
c=c+"invalid sem\n"
}
else
c=c+"valid sem\n"
alert(c)
}
</script>
<form action="">
<p>
USN:<input type="text" name="USN"><br/>
Sem:<input type="text" name="sem"><br/>
<input type="button" value="Validate" onclick="func(USN,sem)">
</p>
</form>
</body>
</html>
Output
Dept.of.CSE
GECR
WEB LAB
(AN)2D
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.
3a.html
<html>
<head>
<title>3 Stack-3a</title>
<style type="text/css">
.plane1
{
border:solid thick black; background-color:green;
padding:10px; width:300px; height:200px; position:absolute;
top:100px; left:200px; z-index:0;
}
.plane2
{
border:solid thick red; background-color:blue;
padding:10px; width:300px; height:200px;
position:absolute; top:140px; left:220px; z-index:0;
}
.plane3
{
border:solid thick green; background-color:purple;
padding:10px; width:300px; height:200px;
position:absolute; top:180px; left:240px; z-index:0;
}
</style>
</head>
<body>
<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
document.getElementById(topLayer).style.zIndex="0";
document.getElementById(toTop).style.zIndex="1";
topLayer=toTop;
}
</script>
<p class="plane1" id="layer1" onMouseOver="mover('layer1');">Government Engineering College,
Ramanagara</p>
<p class="plane2" id="layer2" onMouseOver="mover('layer2');">Seventh Semester</p>
<p class="plane3" id="layer3" onMouseOver="mover('layer3');">Web Lab - Computer Science</p>
</body>
</html>
Dept.of.CSE
GECR
WEB LAB
(AN)2D
Output
-->Open with firefox
3b) 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.
3b.html
<html>
<head>
<title>3 Stack</title>
<style type="text/css">
.plane1
{
border:solid thick black; background-color:green;
padding:10px; width:300px; height:200px;
position:absolute; top:100px; left:200px; z-index:1;
}
.plane2
{
border:solid thick red; background-color:blue;
padding:10px; width:300px; height:200px;
position:absolute; top:140px; left:220px; z-index:2;
}
.plane3
{
border:solid thick green; background-color:purple;
padding:10px; width:300px; height:200px;
position:absolute; top:180px; left:240px; z-index:3;
}
</style>
</head>
<body>
<script type="text/javascript">
var topLayer="layer3";
var origpos;
function mover(toTop,pos)
{
document.getElementById(toTop).style.zIndex="4";
topLayer=toTop;
origpos=pos;
}
function moveBack()
Dept.of.CSE
GECR
WEB LAB
(AN)2D
{
document.getElementById(topLayer).style.zIndex=origpos;
}
</script>
<p class="plane1" id="layer1" onMouseOver="mover('layer1','1');"
onMouseOut="moveBack();">Government Engineering College, Ramanagara</p>
<p class="plane2" id="layer2" onMouseOver="mover('layer2','2');"
onMouseOut="moveBack();">Seventh Semester</p>
<p class="plane3" id="layer3" onMouseOver="mover('layer3','3');" onMouseOut="moveBack();">Web
Lab - Computer Science</p>
</body>
</html>
Output
-->Open with firefox
4a)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.css
GECR
WEB LAB
(AN)2D
<h2>Student 1</h2>
<student>
<label>USN: <usn>1GG11CS004</usn></label>
<label>Name: <name>BRUCLEE</name></label>
<label>College: <college>GECR</college></label>
<label>Branch: <branch>CSE</branch></label>
<label>Year: <year>2011</year></label>
<label>Email: <email>brucleejackson@yahoo.in</email></label>
</student>
<h2>Student 2</h2>
<student>
<label>USN: <usn>1SB12IS023</usn></label>
<label>Name: <name>MAHESH</name></label>
<label>College: <college>Shirdi Sai College</college></label>
<label>Branch: <branch>ISE</branch></label>
<label>Year: <year>2012</year></label>
<label>Email: <email>mahesh@gmail.com</email></label>
</student>
<h2>Student 3</h2>
<student>
<label>USN: <usn>1GG13CS04</usn></label>
<label>Name: <name>ANAND</name></label>
<label>College: <college>GECR</college></label>
<label>Branch: <branch>CSE</branch></label>
<label>Year: <year>2013</year></label>
<label>Email: <email>anand.jstd@icloud.com</email></label>
</student>
</student-information>
Output
-->Open 4a.xml with firefox
4b)Create an XSLT style sheet for one student element of the above document and use it to create a
display of that element.
4b.xsl
GECR
WEB LAB
(AN)2D
<xsl:for-each select="student">
<label style="margin-left:20px;">USN : <span style="color:red;"><xsl:value-of select ="usn"
/><br/></span></label>
<label style="margin-left:20px;">Name : <span style="color:maroon;"><xsl:value-of select
="name" /><br/></span></label>
<label style="margin-left:20px;">College : <span style="color:blue;"><xsl:value-of select
="college" /><br/></span></label>
<label style="margin-left:20px;">Branch : <span style="color:green;"><xsl:value-of select
="branch" /><br/></span></label>
<label style="margin-left:20px;">Year : <span style="color:blue;"><xsl:value-of select
="year" /><br/></span></label>
<label style="margin-left:20px;">Email : <span style="color:grey;"><xsl:value-of select
="email" /><br/></span></label>
</xsl:for-each>
</html>
</xsl:template>
</xsl:stylesheet>
4b.xml
<?xml-stylesheet type="text/xsl" href="4b.xsl" ?>
<student-information>
<student>
<usn>1GG13CS004</usn>
<name>ANAND</name>
<college>GECR</college>
<branch>CSE</branch>
<year>2013</year>
<email>anand.jstd@icloud.com</email>
</student>
</student-information>
Output
-->Open 4b.xml with firefox
5a)Write a Perl program to display various Server Information like Server Name, Server Software,
Server protocol, CGI Revision etc.
5a.pl
#!/usr/bin/perl
use CGI qw(:standard);
print header();
print start_html();
Dept.of.CSE
10
GECR
WEB LAB
(AN)2D
http://localhost/cgi-bin/5a.pl
5b)Write a Perl program to accept UNIX command from a HTML form and to display the output of the
command executed.
5b.html
<html>
<body>
<form action="http://localhost/cgi-bin/5b.pl" >
Command: <input type="text" name="cmd"/>
<input type="submit"/>
</form>
</body>
</html>
5b.pl
#!/usr/bin/perl
use CGI qw(:standard);
print header();
print start_html();
$cmd = param("cmd");
print "<h1>The output of $cmd is:</h1>";
print "<pre>".`$cmd`."</pre>";
print end_html();
Output
-->Open Terminal to compile perl program
Dept.of.CSE
11
GECR
WEB LAB
(AN)2D
6a)Write a Perl program to accept the User Name and display a greeting message randomly chosen
from a list of 4 greeting messages.
6a.html
<html>
<body>
<form action="http://localhost/cgi-bin/6a.pl">
Name: <input type="text" name="name"/>
<input type="submit"/>
</form>
</body>
</html>
6a.pl
#!/usr/bin/perl
use CGI qw(:standard);
print header();
print start_html();
$name=param("name");
@arr = ("Hi","Hey","Hello","Welcome");
print "<h1> $arr[rand(4)] $name </h1>";
print end_html();
Output
-->Open Terminal to compile perl program
sudo chmod 777 6a.pl
perl 6a.pl OR ./6a.pl
mv 6a.pl /var/www/cgi-bin/
-->Open 6a.html with firefox
Dept.of.CSE
12
GECR
WEB LAB
(AN)2D
6b)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.
6b.pl
#!/usr/bin/perl
use CGI qw(:standard);
print header();
print start_html();
open(FILE,"<count.txt");
$count=<FILE>;
close(FILE);
$count++;
open(FILE,">count.txt");
print FILE $count;
close(FILE);
print "<h1>Accessed $count times</h1>";
print end_html();
Output
-->Open Terminal to compile perl program
sudo chmod 777 6b.pl
perl 6b.pl OR ./6b.pl
mv 6b.pl /var/www/cgi-bin/
-->Open Browser
-->Type the addess as follows and press [ Enter ]
http://localhost/cgi-bin/6b.pl
7)Write a Perl program to display a digital clock which displays the current time of the server.
Html
7.pl
#!/usr/bin/perl
use CGI qw(:standard);
print "Refresh: 1\n";
print header();
print start_html();
($s,$m,$h)=localtime(time());
print "The time is: $h:$m:$s";
print end_html();
Output
-->Open Terminal to compile perl program
sudo chmod 777 7.pl
perl 7.pl OR ./7.pl
mv 7.pl /var/www/cgi-bin/
Dept.of.CSE
13
GECR
WEB LAB
(AN)2D
-->Open Browser
-->Type the addess as follows and press [ Enter ]
http://localhost/cgi-bin/7.pl
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.
8.html
<html>
<body>
<form action="http://localhost/cgi-bin/8.pl">
Name: <input type="text" name="name"/><br/>
Age: <input type="text" name="age"/><br/>
<input type="submit"/>
</form>
</body>
</html>
8.pl
#!/usr/bin/perl
use CGI qw(:standard);
use DBI;
print header();
print start_html();
$name=param("name");
$age=param("age");
$con=DBI->connect("DBI:mysql:student_info","root");
$query1=$con->prepare("insert into student values(?,?)");
$query1->execute($name,$age);
$query2=$con->prepare("select *from student");
$query2->execute();
print "Data in table:<BR/>";
while(@row=$query2->fetchrow_array())
{
print "@row <BR>";
}
print end_html();
Output
-->Open Terminal to compile perl program and create database
sudo chmod 777 8.pl
perl 8.pl OR ./8.pl
mv 8.pl /var/www/cgi-bin/
Dept.of.CSE
mysql
mysql>create database student_info;
mysql>use student_info;
mysql>create table student(name varchar(20), age int(20));
mysql>insert into student values(Anand,21);
mysql>insert into student values(Jackson,30);
mysql>exit;
14
GECR
WEB LAB
(AN)2D
Data in Table:
Anand 21
Jackson 30
Sudarshan 21
Praveen KR 23
9)Write a PHP program to store current date-time in a COOKIE and display the Last visited on datetime on the web page upon reopening of the same page.
9.php
<?php
$date=date("h:i:s a d/m/y");
setcookie("cook", $date, time()+3600*24*30);
if(!isset($_COOKIE["cook"]))
{
print "<h1>You are visiting for the first time</h1>";
}
else
{
print "<b>Your last visit:</b> <h1>".$_COOKIE["cook"]."</h1>";
}
?>
Output
-->Open Terminal to compile php program
sudo chmod 777 9.php
php 9.php
mv 9.php /var/www/cgi-bin/
-->Open Browser
-->Type the addess as follows and press [ Enter ]
http://localhost/cgi-bin/9.php
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.
10.php
<?php
session_start();
if(!isset($_SESSION["count"]))
{
print "<h1>You are visiting for the first time</h1>";
$_SESSION["count"]=1;
Dept.of.CSE
15
GECR
WEB LAB
(AN)2D
}
else
{
print "<span style='display:block;border:solid black thick;'><br/><center><b>Visit count:
</b><h1>".$_SESSION["count"]++."</h1></center><span>";
}
?>
Output
-->Open Terminal to compile php program
sudo chmod 777 10.php
php 10.php
mv 10.php /var/www/cgi-bin/
-->Open Browser ,
-->Type the addess as follows and press [ Enter ]
http://localhost/cgi-bin/10.php
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
11.html
<html>
<head><title>pg11</title></head>
<form action="http://localhost/cgi-bin/Insert.php" method="post">
<p>
Name:<input type=text name="name" value=""><br>
Address1:<input type=text name="ad1" value=""><br>
Address2:<input type=text name="ad2" value=""><br>
Email:<input type=text name="email" value=""><br>
<input type="submit" value="Insert">
</p>
</form>
<hr>
<form action="http://localhost/cgi-bin/Search.php" method="post">
Enter Name of the contact to be searched <input type="text" name="name">
<input type="submit" value="Search">
</form>
</body>
</html>
Dept.of.CSE
16
GECR
WEB LAB
(AN)2D
Insert.php
<?php
$dbh=mysql_connect('localhost','root','')or die(mysql_error());
mysql_select_db('pro11')or die(mysql_error());
if(isset($_POST['name']))
$nme=$_POST['name'];
$ad1=$_POST['ad1'];
$ad2=$_POST['ad2'];
$em1=$_POST['email'];
if($nme!=""&&$ad1!="")
{
$query="INSERT INTO contact_details VALUES('$nme','$ad1','$ad2','$em1')";
$result=mysql_query($query) or die(mysql_error());
echo "Data Inserted <br><hr>";
}
else
{
echo "one of the field is empty";
}
mysql_close($dbh);
?>
Serach.php
<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("pro11");
$n=$_POST["name"];
print "Entered Name is $n \n";
$var=mysql_query("SELECT * FROM contact_details WHERE name like '%$n%'");
echo"<table border size=1>";
echo"<tr> <th>Name</th> <th>Addrss1</th>
<th>Address2</th><th>Email</th></tr>";
while ($arr=mysql_fetch_row($var))
{
echo "<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td>
<td>$arr[3]</td></tr>";
}
echo"</table>";
mysql_free_result($var);
mysql_close($link);
?>
Output
-->Open Terminal to compile php program and create Database
sudo chmod 777 Insert.php
php Insert.php
sudo chmod 777 Search.php
php Search.php
mv Insert.php /var/www/cgi-bin/
mv Search.php /var/www/cgi-bin/
Dept.of.CSE
17
GECR
WEB LAB
(AN)2D
mysql
mysql>create database pro11;
mysql>use pro11;
mysql>create table contact_details(name varchar(20), ad1 varchar(20),ad2 varchar(20), email varchar(20));
mysql>exit;
12)Build a Rails application 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.
Creating Books Database
mysql -u root
create database lab12_development;
//create database lab12_test;
//create database lab12_production;
use lab12_development;
create table books (
id int not null auto_increment,
accession_no int not null,
title varchar(80) not null,
authors text not null,
edition decimal(8, 2) not null,
publisher varchar(80) not null,
primary key(id)
);
After creating the database and table, quit from mysql.. quit
Dept.of.CSE
18
GECR
WEB LAB
(AN)2D
Dept.of.CSE
19
GECR
WEB LAB
(AN)2D
THE END
Dept.of.CSE
20
GECR