Web Programming Laboratory 10CSL78

Structure Page No.

1. OBJECTIVES 1

2. GENERIC SKILLS 1

3. SUBJECT OVERVIEW 1

4. BREADTH OPTIONS 2

5. PREREQUISITES 2

6. LIST OF LAB ASSIGNMENTS – SESSION WISE 3

7. VIVA QUESTIONS 45

1. OBJECTIVES:
On completion of this subject, the students will be able to
1. Learn how to create a simple web page using html along with the usage of style sheets, lists,
creation or tables with borders, padding and colors.
2. To get acquainted with javascript and how to embed javascript in html code.
3. To get acquainted with javascript procedures and usage of regular expressions in javascript.
4. To write functions in html, validate using regular expressions.

2. GENERIC SKILLS:
On completion of this subject students will be able to:

1. Students learn web concepts ,html and create web page.

2. Program basic functions in Javascript and DHTML.
3. Use Javascript and DHTML to create web pages with advanced interactivity.
4. Use variables, conditionals, and loops in Javascript and DHTML programs.
5. Use Javascript to control browser frames and windows.
6. Use Javascript to create functional forms.
7. Use Cascading Style Sheets (CSS) to design web pages.
8. Use CSS to create web pages with specialized fonts and design elements.

3. SUBJECT OVERVIEW:
This course introduces advanced programming skills for website design. Dynamic content
development will be explored through state of the art programming languages for the creation of
interactive web sites. Students will create web pages that utilize the most current advances in web
development.

Department of CSE, SVCE-Bangalore Page 1

Web Programming Laboratory 10CSL78

4. BREADTH OPTIONS:
This subject potentially can be taken as a breadth subject component for the following subjects like
java and j2ee and c #.

5. PREREQUISITES: This lab require basic’s of any programming knowledge

Summary:
In this web lab students can learn primary web programming skills such as basic knowledge about
HTML/CSS, client side scripting (using Javascript & JQuery), server side scripting (using PHP
language) and also SQL-based database conectivity in PHP are considered. After it students can
create basic web programs using pure PHP. In this part after that all students have basic web
programming skills we concentrate on more advenced concepts like: OOPS in PHP, HTML5, CSS3
and perl concepts some extended features.

Department of CSE, SVCE-Bangalore Page 2

Web Programming Laboratory 10CSL78

6. LIST OF LAB ASSIGNMENTS – SESSION WISE

WEB PROGRAMMIG LABORATORY

Subject Code:10CSL78 IA Marks :25

Hrs/Week :03 Exam Hours :03
Total Hours :42 Exam Marks:05

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
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
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.
b) Modify the above program to get the current semester also (restricted to be a number from 1
to 8)
3. 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.
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.
b) Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
5. 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.
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.
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.
7. Write a Perl program to display a digital clock which displays the current time of the server.
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.
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.

Department of CSE, SVCE-Bangalore Page 3

Web Programming Laboratory 10CSL78

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.
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.
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 results with proper
headings.

Note: Student is required to solve one problem in the examination. The questions are
allotted based on lots.

Department of CSE, SVCE-Bangalore Page 4

Web Programming Laboratory 10CSL78

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

Program1a.html

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fibonacci Series</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 enteredto generate fibonacci series is: ",limit,"<br/>");
document.write("The fibonacci series: <br/>");
document.write(" ",f1,"<br/>");
document.write(" ",f2,"<br/>");
var i,f3;
for(i=2;i<limit;i++)
{
f3=f1+f2;
document.write(" ",f3,"<br/>");
f1=f2;
f2=f3;
}
</script>
</body>
</html>

Department of CSE, SVCE-Bangalore Page 5

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 6

Web Programming Laboratory 10CSL78

Program1b.html

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Square Alerts</title>
</head>
<body style="background-color:yellow">
<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 n1=prompt("Enter the limit 'n' to generate table of number from 1 to n"," ");
var msg=" ";
var res="0";
for(var x=1;x<n1;x++)
{
res=x*x;
msg=msg+" "+x+"*"+x+"="+res+"\n";
}
alert(msg);
</script>
</body>
</html>

Department of CSE, SVCE-Bangalore Page 7

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 8

Web Programming Laboratory 10CSL78

2. a) Develop and demonstrate, using JavaScript script, a XHTML increment the count on
each 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)

Program2a.html

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

<html xmlns="http://www.w3.org/1999/xhtml/">
<head>
<title>USN.html</title>
<script type="text/javascript">
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 correct form.\n"+"the correct pattern
is:1VE10CS013\n"+"please go back and retype your usn");
}
else
{
alert("Entered usn ("+str.value+")is in correct form.\n");
}
}
</script>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red">Program includes xhtml document to collect 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>

Department of CSE, SVCE-Bangalore Page 9

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 10

Web Programming Laboratory 10CSL78

Department of CSE, SVCE-Bangalore Page 11

Web Programming Laboratory 10CSL78

Program2b.html

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

<html xmlns="http://www.w3.org/1999/xhtml/">
<head>
<title>USN.html</title>
<script type="text/javascript">
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 ");
}
else if(result!=0 && pos!=0)
{
alert("entered usn ("+str.value+")is not in the correct form \n"+"The correct pattern is:4bd07cs080
\n"+"Entered sem("+stsem.value+")is not in the correct form \n"+"the nor is btn 1 to 8\n"+"Please go
back and retype your usn and sem");
}
else if(pos!=0)
{
alert("Entered sem("+stsem.value+")is not in the correct range.\n"+"The number is between 1 to
8\n");
}
else
{
alert("Entered usn("+str.value+")is not in the correct form \n"+"The correct pattern is:4bd07cs080
\n"+"Entered sem("+stsem.value+")is in the correct form \n"+"the nor is btn 1 to 8\n"+ "Please go
back and retype your usn and sem");
}
}
</script>
</head>
<body>
<h3>student information</h3>
<form name="myform">
<p> Enter your usn:</p>
<input type="text" id="usn" size=15/>
<br/>
<p>Enter your sem:</p>
<input type="text" id="sem" size=5/>

Department of CSE, SVCE-Bangalore Page 12

Web Programming Laboratory 10CSL78

<br/>
<br/>
<input type="button" onclick="checkusn();" value="validate"/>
<input type="reset" value="Reset"/>
<br/>
</form>
</body>
</html>

OUTPUT

Department of CSE, SVCE-Bangalore Page 13

Web Programming Laboratory 10CSL78

Department of CSE, SVCE-Bangalore Page 14

Web Programming Laboratory 10CSL78

3. 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.

Program3a. html

<html xmlns="http://www.w4.org/1999/xhtml">
<head>
<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;

Department of CSE, SVCE-Bangalore Page 15

Web Programming Laboratory 10CSL78

}
</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=toTop;
}
</script>
</head>
<body>
Program includes XHTML which is a Stacking Order
<div class="layer1style" id="layer1" onClick="mover('layer1')">TCE, GADAG</div>
<div class="layer2style" id="layer2" onClick="mover('layer2')">Computer Science
</div>
<div class="layer3style" id="layer3" onClick="mover('layer3')">
Seventh Sem
</div>
</body>
</html>

OUTPUT

Department of CSE, SVCE-Bangalore Page 16

Web Programming Laboratory 10CSL78

Department of CSE, SVCE-Bangalore Page 17

Web Programming Laboratory 10CSL78

Program3b. html

<html xmlns="http://www.w4.org/1999/xhtml">
<head>
<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 red;
padding:1em;
width:300px;
background-color:blue;
position:absolute;
top:120px;
left:420px;
z-index:2;
}
.layer3style
{
border:solid thick green;
padding:1em;
width:300px;
background-color:purple;
position:absolute;
top:140px;
left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origpos;
function mover(toTop,pos)
{
var newTop=document.getElementById(toTop).style;

Department of CSE, SVCE-Bangalore Page 18

Web Programming Laboratory 10CSL78

newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origpos=pos;
}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origpos;
}
</script>
</head>
<body>
Program includes XHTML which is a Stacking Order
<div class="layer1style" id="layer1" onmouseover="mover('layer1','1')"
onmouseout="moveBack()">TCE, GADAG</div>
<div class="layer2style" id="layer2" onmouseover="mover('layer2','2')"
onmouseout="moveBack()">Computer Science</div>
<div class="layer3style" id="layer3" onmouseover="mover('layer3','3')"
onmouseout="moveBack()">Seventh Sem</div>
</body>
</html>

OUTPUT

Department of CSE, SVCE-Bangalore Page 19

Web Programming Laboratory 10CSL78

Department of CSE, SVCE-Bangalore Page 20

Web Programming Laboratory 10CSL78

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.
b) Create an XSLT style sheet for one student element of the above document and
use it to create a display of that element.

Program4a.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 year (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT lable (#PCDATA|email|year|branch|college|name|usn)*>
<!ELEMENT h3 (#PCDATA)>
<!ELEMENT h2 (#PCDATA)>
]>
<?xml-stylesheet type="text/css" href="6a.css"?>
<student_information>
<h3>student-information</h3>
<h2>student 1</h2>
<ad><label>usn:<usn>2tg06cs039</usn></label></ad>
<ad><label>name:<name>aaa</name></label></ad>
<ad><label>collegename:<college>tce</college></label></ad>
<ad><label>branch:<branch>cse</branch></label></ad>
<ad><label>year of joining:<year>2006</year></label></ad>
<ad><label>email id:<email>[email protected]</email></label></ad>
<h2>student 2</h2>
<ad><label>usn:<usn>2tg06cs023</usn></label></ad>
<ad><label>name:<name>bbb</name></label></ad>
<ad><label>collegename:<college>tce</college></label></ad>
<ad><label>branch:<branch>cse</branch></label></ad>
<ad><label>year of joining:<year>2006</year></label></ad>
<ad><label>email id:<email>[email protected]</email></label></ad>
<h2>student 3</h2>
<ad><label>usn:<usn>2tg06cs023</usn></label></ad>
<ad><label>name:<name>bbb</name></label></ad>
<ad><label>collegename:<college>tce</college></label></ad>
<ad><label>branch:<branch>cse</branch></label></ad>
<ad><label>year of joining:<year>2006</year></label></ad>

Department of CSE, SVCE-Bangalore Page 21

Web Programming Laboratory 10CSL78

<ad><label>email id:<email>[email protected]</email></label></ad>
</student_information>

Program4a.css

ad {display:block;margin-top:15px;color:blue;font-size:13pt;}
usn {color:red;font-size:12pt;margin-left:15px;}
name {color:yellow;font-size:12pt;margin-left:15px;}
college {color:blue;font-size:12pt;margin-left:15px;}
branch {color:red;font-size:12pt;margin-left:15px;}
year {color:pink;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;}

OUTPUT

Department of CSE, SVCE-Bangalore Page 22

Web Programming Laboratory 10CSL78

Program4b.xml

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl" href="6b.xsl" ?>
<student>
<usn>2TG07CS402</usn>
<name>Manjunath</name>
<college>TCE</college>
<branch>CSE</branch>
<year>2009</year>
<email>[email protected]</email>
</student>

Program4b.xsl

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

<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">collegename:</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 CSE, SVCE-Bangalore Page 23

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 24

Web Programming Laboratory 10CSL78

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

Program5a.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

OUTPUT

Department of CSE, SVCE-Bangalore Page 25

Web Programming Laboratory 10CSL78

Program5b.html

<html>
<head>
<title>command execution</title>
</head>
<body>
<form action="/cgi-bin/7b.cgi" method="get">
<font size="5" color="indigo">
Enter a command to be executed
</font>
<input type="text" name="command">
<input type="submit" value="enter">&nbsp;&nbsp;
<input type="reset" value="clear">
</form>
</body>
</html>

OUTPUT

Department of CSE, SVCE-Bangalore Page 26

Web Programming Laboratory 10CSL78

Program5b.cgi

#!/usr/bin/perl
use CGI':standard';
print "Content-type:text/plane" ,"\n\n";
$cmd=param("command")||print "commnd not found";
system($cmd);

OUTPUT

Department of CSE, SVCE-Bangalore Page 27

Web Programming Laboratory 10CSL78

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.
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.

Program6a.html

<html>
<head></head>
<body bgcolor="aabbcc">
<h3>enter the name and getting the greeting</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>

Program6a.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","welcom","fine","hello");
print "<h3>the messages received is:";
print $msgs[int rand scalar @msgs];
print "</h3></body></html>";

Department of CSE, SVCE-Bangalore Page 28

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 29

Web Programming Laboratory 10CSL78

Program6b.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();

OUTPUT

Department of CSE, SVCE-Bangalore Page 30

Web Programming Laboratory 10CSL78

7.Write a Perl program to display a digital clock which displays the current time of the
server.

Program7.cgi

#!/usr/bin/perl
print "content-type:text/html","\n\n";
print "<html>";
print "<head> <title> DIGITAL CLOCK </title>";
print "<meta http-equiv=refresh content=1>";
print "</head>";
print "<body> <font-size=10>";
($sec,$min,$hr)=localtime(time);
if($hr>12)
{
$hr=$hr-12;
$s="P.M";
}
else
{
$str="A.M";
}
$time=sprintf("%0.2d:%0.2d:%0.2d%s",$hr,$min,$sec,$str);
print "<center> $time </center> </font>";
print "</body>";
print "</html>";

OUTPUT

Department of CSE, SVCE-Bangalore Page 31

Web Programming Laboratory 10CSL78

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.

Program8.html

<html>
<head><title>age information</title></head>
<body bgcolor="aabbcc">
<h2>age information</h2>
<form action="/cgi-bin/p10.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>

OUTPUT

Department of CSE, SVCE-Bangalore Page 32

Web Programming Laboratory 10CSL78

Program8.cgi

#!/usr/bin/perl
use DBI;
use CGI':standard';
print"content-type:text/html","\n\n";
$lname=param("lname") or die "enter lname";
$fname=param("fname") or die "enter fname";
$age=param("age") or die "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>";

OUTPUT

Department of CSE, SVCE-Bangalore Page 33

Web Programming Laboratory 10CSL78

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.

Program9.php

<?php
$inTwoMonths=60 * 60 * 24 * 60 + time();
setcookie('lastVisit',date("G:i - m/d/y"), $inTwoMonths);
echo "cookie is set ";
if(isset($_COOKIE['lastVisit']))
$visit=$_COOKIE['lastVisit'];
else
echo "u hav got some stal cookie!";
echo "your lasrt visited on - $visit";
?>

OUTPUT

Department of CSE, SVCE-Bangalore Page 34

Web Programming Laboratory 10CSL78

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.

Program10.php

<?php
session_start();
if(isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;
else
$_SESSION['views']=1;
echo "views= ". $_SESSION['views'];
?>

OUTPUT

Department of CSE, SVCE-Bangalore Page 35

Web Programming Laboratory 10CSL78

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.

Program11a.html

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

<html xmlns="http://www.w3.org/1999/xhtml>
<body bgcolor="aabbcc">
<h3> Program to collect customer information</h3>
<form action="/php/13.php" method="get">
<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 Line 2:</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="search.html">To search click here.</a>
</table>
</form>
</body>
</html>

Department of CSE, SVCE-Bangalore Page 36

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 37

Web Programming Laboratory 10CSL78

Program11a.php

<?
$name=$_GET['name'];
$add1=$_GET['add1'];
$add2=$_GET['add2'];
$email=$_GET['email'];
$mysql=mysql_connect("localhost","root") or die ("cant connect");
mysql_select_db("cust_info") or die("cant select");
mysql_query("insert into adds values('$name','$add1','$add2','$email')") or die ("query failed to
insert");
$result=mysql_query("select * from adds");
?>
<html>
<head><title>dgasgda</title></head>
<body bgcolor="aabbcc">
<h3>Page to display the stored data</h3>
<table border="1">
<tr>
<th>NAME</th>
<th>ADDRESS1</th>
<th>ADDRESS2</th>
<th>EMAIL_id</th></tr>
<?while($array=mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
</tr>
<? endwhile;?>
<?mysql_free_result($result);?>
<?mysql_close($mysql);?>
</table>
</body>
</html>
<?
$search=$_GET['search'];
$mysql=mysql_connect("localhost","root") or die ("cannot connect");
mysql_select_db("cust_info") or die("cannot select the database");
$result=mysql_query("select * from adds where name like '%$search%'") or die("cannot execute");
?>

Department of CSE, SVCE-Bangalore Page 38

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 39

Web Programming Laboratory 10CSL78

Program11b.html

<html>
<body bgcolor="aabbcc">
<h3>Search page</h3>
<form action="/php/search.php" method="get">
Enter the name to be searched:<input type="text" name="search">
<br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

OUTPUT

Department of CSE, SVCE-Bangalore Page 40

Web Programming Laboratory 10CSL78

Program11b.php

<?
$search=$_GET['search'];
$mysql=mysql_connect("localhost","root") or die ("cannot connect");
mysql_select_db("cust_info") or die("cannot select the database");
$result=mysql_query("select * from adds where name like '%$search%'") or die("cannot execute");
?>
<html>
<body bgcolor="aabbcc">
<? if(mysql_num_rows($result)>0): ?>
<table border="1">
<tr>
<th>NAME</th>
<th>ADDRESS1</th>
<th>ADDRESS2</th>
<th>EMAIL-id</th></tr>
<br/>
<h3>Search Results</h3>
<?while($array=mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
</tr>
<? endwhile;?>
<? else: ?>
<?echo "no rows selected";?>
<? endif;?>
</table>
</body>
</html>

Department of CSE, SVCE-Bangalore Page 41

Web Programming Laboratory 10CSL78

OUTPUT

Department of CSE, SVCE-Bangalore Page 42

Web Programming Laboratory 10CSL78

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 results with
proper headings.

create database books_development;

create table books(
id int not null auto_increment,
bookname varchar(80) not null,
authorname varchar(8) not null,
edition int not null,
publisher varchar(20) not null,
primary key(id)
};

/* main controller program */

Class MainController<Application Controller

def welcome
@num_books=book.count
end
def result
@bookid=params[:sid]
@bookz=Book.find(:all,:conditions=>"id=#{@bookid}")
end
end

/*create result view*/

<html>
<title> welcome template for books</title>
<body>
<p> Entered book id is<%=@bookid%></p><table border=1>
<tr><th>Bookid</th><th>book name</th>
<th>author name</th><th>editin</th><th>publisher</th></tr>
<%@bookz.eachdo |bk|
@id=bkid
@bookname=bk.bookname
@authorname=bk.authorname
@edition=bk.edition
@publisher=bk.publisher%>
<tr>
<td><%=@id%></td>
<td><%=@bookname%></td>
<td><%=@authorname%></td>
<td><%=@edition%></td>

Department of CSE, SVCE-Bangalore Page 43

Web Programming Laboratory 10CSL78

<td><%=@publisher%></td>
</tr>
<%end%>
</table>
</body>
</html>

/*create welcome view file*/

<html>
<title> welcome template ffor books</title>
<body>
<p> total no of books=<%=@num_books%></P>
<form action="result">
enter searching element:<input type="text" name="sid"/>
<input type=submit value="search"/>
</form>
</body>
</html>

Department of CSE, SVCE-Bangalore Page 44

Web Programming Laboratory 10CSL78

7. VIVA QUESTIONS

1) What protocol is used by all computer connections to the Internet?

2) Describe the purpose of the five most commonly used HTTP methods?
3) What is the purpose of the Accept field in an HTTP request?
4) What response header field is most often required?
5) What important capability is lacking in a markup language?
6) Where is PHP code interpreted?
7) In what ways is PHP similar to Java Script?
8) Which programming languages are used in Ajax applications?
9) What are the differences between the JPEG and GIF image formats?
10) What are the two required attributes of an <img /> tag?
11) What is the default size of a text control’s text box?
12) What is the difference in behavior between a group of checkbox buttons and a group of radio
buttons?
13) What is specified when the border attribute of a <table> tag is set to “border”?
14) What is the purpose of the colspan attribute of the <th> tag?
15) What is the purpose of external style sheets?
16) What attributes are required in a link to an external style sheet?
17) What is the format of an inline style sheet?
18) What is the format of a document-level style sheet, and where does it appear?
19) Why must background images be chosen with care?
20) What are the possible values for the text-align property?
21) What purpose does the text-indent property serve?
22) What are the three ways color property values can be specified?
23) What value does typeof return for an object operand?
24) What is the usual end-of-line punctuation for the string operand to document. write?
25) What is the usual end-of-line punctuation for the string operand to alert?
26) Describe the operation of the prompt method?
27) What are the three possible forms of control expressions in JavaScript?
28) What is the difference between = = and = = =?
29) When is a JavaScript constructor called?
30) Describe the two ways the properties of an object can be referenced?
31) How is a new property of an object created?
32) Describe the semantics of the for-in statement?
33) What is an event handler?
34) What exactly does the focus function do?
35) What exactly does the select function do?
36) Define a dynamic XHTML document.
37) What is a template element of an XSLT style sheet?
38) What is one common use of the seek function?
39) What does the Perl DBI module provide?
40) What is the Perl DBI statement handle?

Department of CSE, SVCE-Bangalore Page 45