ADVANCED WEB PROGRAMMING LAB

DAYANANDA SAGAR COLLEGE OF ARTS, SCIENCE AND COMMERCE

DEPARTMENT OF MCA

V SEMESTER MCA (CBCS SCHEME)

ADVANCED WEB PROGRAMMING LAB MANUAL

MCA 505P

PREPARED BY

PROF.GURUNATH.R

MRS.SRIVATSALA.V
 MCA505P: ADVANCED WEB PROGRAMMING LAB

1. Develop and demonstrate a XHTML file that includes Javascript script to generate first n
Fibonacci numbers.
2. Develop and demonstrate the usage of inline and external style sheet using CSS
3. 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.
4. 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.
5. Design an XML document to store information about a student in a college affiliated to BU.
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.
6. Write a Perl program to display a digital clock which displays the current time of the server.
7. 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. 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.
9. Write a PHP program to read student data from an XML file and store into the MYSQL
database. Retrieve and display.
10. 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.
11. Write a CGI-Perl program to use a cookie to remember the day of the last login from a user
and display it when run.
12. Write a Perl program to display various Server informations like Server Name, Server
Software, Server protocol, CGI Revision etc.
13. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields.
On submitting, store the values in MySQL table. Retrieve and display the data based on Name.
14. Write a Perl program to accept the User Name and display a greeting message randomly
chosen from a list of 4 greeting messages.
 INSTRUCTIONS FOR WEB PROGRAMMING LAB

I. Technologies ,Programming languages, scripting languages used for this lab:

WAMP OR XAMPP which consist of Apache Server, MYSQL, Perl and PHP, HTML, CSS,
JAVASCRIPT.

WAMP is for Windows Operating System. XAMPP is for any Operating System. LAMP is for
Linux.

II. Lab Programs 1 to 5 need only notepad and browser.

Lab Programs 6 onwards are in Perl and PHP so a server software, browser and notepad is
required.

III. For executing perl or cgi-perl programs

-type the program and save in xampp->cgi-bin folder as <filename>.pl or filename.cgi.

-open the xampp control panel and start the apache server .

-to execute the program go to the browser and type the url

http://localhost/cgi-bn/filename.cgi

IV. For executing PHP programs

-type the program in notepad and save it as filename.php

-save it in the folder xampp->htdocs

-to execute open the browser and type the url

http://localhost/filename.php

V. For programs involving MYSQL go to xampp control panel and start the MySql and create
the appropriate database for the program.

-------------------------------------------ALL THE BEST-----------------------------------------------------

 LAB PROGRAMS
1. Develop and demonstrate a XHTML file that includes Javascript script to generate first n
Fibonacci numbers.

Lab1.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function fibo(n)
{
if (n==0) || (n==1)
return 0;
else
if(n==2)
return 1;
else
return (fibo(n-1)+fibo(n-2));
}
var n=window.prompt("enter a numer","0");
n=parseInt(n);
var i;
document.write(“The Fibonacci Series”+”<br>”);
for (i=0;i<n;i++)
document.write(fibo(i));
</script>
</head>
<body>
</body>
</html>
Output:
The Fibonacci Series
011235
2. Develop and demonstrate the usage of inline and external style sheet using CSS
Lab2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
p{
background-color: blue;
}
h3 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1> Welcome to CSS(external)</h1>
<h2 style="color:yellow;margin-left:30px;">This is a heading.(inline)</h2>
<h3>this a h3 heading</h3>
<p> This is a program to demonstrate external,internal and inline style sheets(internal)</p>
<body>
</html>

mystyle.css

h1{color:blue;font-weight:bold;}(type this in separate file and call it mystyle.css)

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

Lab3.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function sem(s)
{
var value=s.search(/[1-4][A-Za-z]{2}[0-9]{2}[A-Za-z]{2}[0-9]{3}/);
var n=s.length;
var s;
if(n==10 && value>=0)
s="valid USN";
else
s="INValid USN";
alert(s);
}
</script></head>
<body bgcolor="red">
<form>
<p>Enter the USN</p>
<input style="color:white;background-color:blue" type="text" id="s"/>
<input style="color:white;background-color:green" type="button" value="OK"
onclick="sem(s.value);">
</form>
</body>
</html>
Output:
4. 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.

Lab4.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic stacking of images</title>
<script type="text/javascript" src="Lab4.js">
</script>
<style type="text/css">
.panel1{position:absolute;top:10px;left:10px;z-index:0;background-color:yellow}
.panel2{position:absolute;top:40px;left:20px;z-index:0;background-color:blue}
.panel3{position:absolute;top:75px;left:30px;z-index:0;background-color:red}
</style>
</head>
<body>
<pre>
<p id="text1" class="panel1" onclick="toTop('text1');">
THIS IS DSI. BCA BLOCK.
</p>
</pre>
<pre>
<p id="text2" class="panel2" onclick="toTop('text2');">
THIS IS DSI . MCA BLOCK.
</p>
</pre>
<pre>
<p id="text3" class="panel3" onclick="toTop('text3');">
THIS IS DSI. BSC BLOCK.
</p>
</pre>
</body>
</html>
Lab4.js
var top='text3';
function toTop(newTop)
{
domTop=document.getElementById(top).style
domNew=document.getElementById(newTop).style
domTop.visibility="true";
domNew.z-visiblity ="false";
top=newTop;
}

5. Design an XML document to store information about a student in a college affiliated to BU.
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.
Lab5.css
usn {display:block;margin-left:10px;font-size:14pt;color:Red;}
name{display:block;margin-left:20px;font-size:14pt;color:Blue;}
college{display:block;margin-left:20px;font-size:12pt;color:Maroon;}
branch {display:block;margin-left:20px;font-size:12pt;color:Purple;}
year {display:block;margin-left:20px;font-size:14pt;color:Blue;}
email {display:block;margin-left:20px;font-size:12pt;color:Blue;}

Lab5.xml
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="Lab5.css"?>
<bu>
<student>
<usn>14CQSAC001</usn>
<name>AKASH</name>
<college>DSCASC</college>
<branch>Computer Science</branch>
<year>2016</year>
<email>akash@gmail.com</email>
</student>
<student>
<usn>14CQSAC002</usn>
<name>ANUSHA</name>
<college>DSCASC</college>
<branch>Computer Science</branch>
<year>2016</year>
<email>anusha@gmail.com</email>
</student>
<student>
<usn>14CQSAC003</usn>
<name>Vineeth</name>
<college>DSCASC</college>
<branch>Computer Science</branch>
<year>2016</year>
<email>vinu@gmail.com</email>
</student>
</bu>
Output:

6. Write a Perl program to display a digital clock which displays the current time of the server.
Lab6.cgi
#!"C:\xampp\perl\bin\perl.exe"
use CGI ':standard';
print "Refresh: 1\n";
print header(),
start_html(-title=>"Digital clock",-bgcolor=>"yellow",-text=>"red");
($s,$m,$h,$day,$mon,$year)=localtime(time);
$datetime=localtime;
if($h==12)
{
$ampm="pm";
}
elsif($h>=13)
{
$ampm="pm";
$h=$h-12;
}
else
{
$ampm="am";
}
print br,br,"The current system is $h:$m:$s $ampm<br>";
$mon++;
$year=$year+1900;
print "Date:$day/$mon/$year<br>";
print h1,"$datetime";
print end_html();
Output
7. 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.
Lab7.pl
#!"D:/xampp/perl/bin/perl.exe"
use CGI ':standard';
use DBI;
if(param)
{
print
header(),
start_html(-title=>"Web page to enter name and age",-bgcolor=>"yellow",-text=>"blue"),
"Enter name and age",
start_form(),
textfield('name'),
textfield('age'),
br(),br(),
submit();
$dbh=DBI->connect('DBI:mysql:dbase1',"root","")
or die "error connect:DBI->errstr()";
$name=param('name');
$age=param('age');
$qh=$dbh->prepare("insert into user values('$name','$age')")
or die "can't execute query:$dbh->errstr()";
$qh->execute();
$qh=$dbh->prepare("Select * from user");
$qh->execute();
print "<table border size=1><tr><th>Name</th><th>Age</th></tr>";
while ( ($name,$age)=$qh->fetchrow())
{
print "<tr><td>$name</td><td>$age</td></tr>";
}
print "</table>";
$qh->finish();
$dbh->disconnect();
print end_html();
}
else
{
print
header(),
start_html(-title=>"Web page to enter name and age",bgcolor=>"yellow",-text=>"blue"),
"Enter name and age",
start_form(-action=>"Lab7.pl",-method=>"post"),
textfield(-name=>'name'),
textfield(-name=>'age'),
br(),br(),
submit();
end_form(),
end_html();
}
Output:

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

Lab8.php
<?php
$sec30=60*60*24*30+time();
setcookie('lastVisit',date("g:i:s - d/m/y"),$sec30);
?>
<html>
<body bgcolor="yellow">
<p style="color:red">Hello
<?php
$visit =$_COOKIE['lastVisit'];
if(isset($_COOKIE['lastVisit']))
echo "Your last visit was=".$visit;
else
echo "You've got some stale cookies!";
?>
</p>
</body>
</html>
Output:
9. Write a PHP program to read student data from an XML file and store into the MYSQL
database. Retrieve and display.
Lab9.php
<?php
$con = mysqli_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysqli_select_db( $con,"dbase1");
$xml = simplexml_load_file("student.xml");
$aa = "";
foreach($xml->children() as $child)
{
foreach($child->children() as $childs)
{
$aa .= "'".$childs ."',";
}
$aa = substr_replace($aa, "", -1);
$sql = "INSERT into student_xml (usn,name,college,branch,year,email) values ( $aa )";
$aa = "";
$rr = mysqli_query($con,$sql);
}
if ($rr){ echo "data successfully captured from XML and inserted in db";}else{ echo "sorry no
data insertion";}

$que=select * from student_xml;

$rr = mysqli_query($con,$que);
if ($rr->num_rows > 0) {
// output data of each row
while($row = $rr->fetch_assoc()) {
echo "usn: " . $row["usn"]. " - Name: " . $row["name"]. "-College " . $row["college"]. "-
Branch" . $row["branch"]. "-Year" . $row[year]. " -Email:" . $row["email"]. "<br>";
 }
} else {
echo "0 results";
}
mysqli_close($con);
?>
10. 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.
Lab10.cgi
#!"D:\xampp\perl\bin\perl.exe"
use CGI ':standard';
print header(),
start_html(),
h1("DSCASC,MCA"),
hr();
$fname='count.txt';
if(open(FH,"<$fname"))
{
$c=<FH>;
$c=$c+1;
close(FH);
}
open(FH,">$fname");
print FH $c;
close(FH);
print "YOU ARE THE $c VISITOR";
print end_html();

count.txt//for count
12
Output:

11. Write a CGI-Perl program to use a cookie to remember the day of the last login from a user
and display it when run.

Lab11.pl
#!"D:/xampp/perl/bin/perl.exe"
# A CGI-Perl program to use a cookie to remember the

# day of the last login from a user and display it when run
use CGI ":standard";

#>>> Get the existing day cookie, if there was one

@last_day = cookie('last_time');

#>>> Get the current date and make the new cookie
$day_of_week = (qw(Sunday Monday Tuesday Wednesday Thursday
Friday Saturday)) [(localtime)[6]];
$month = (qw(January February March April May June July
August September October November December))
[(localtime)[4]];
$day_of_month = (localtime)[3];
@day_stuff = ($day_of_week, $day_of_month, $month);

$day_cookie = cookie(-name => 'last_time',

-value => \@day_stuff,
-expires => '+5d');

#>>> Produce the return document

#>>> First, put the cookie in the new header
print header(-cookie => $day_cookie);
print start_html('This is day_cookie.pl');

#>>> If there was no day cookie, this is the first visit

if (scalar(@last_day) == 0) {
print "Welcome to you on your first visit to our site <br />";
}

#>>> Otherwise, welcome the user back and give the date of the
#>>> last visit
else {
($day_of_week, $day_of_month, $month) = @last_day;
print "Welcome back! <br /> ",
"Your last visit was on ",
"$day_of_week, $month $day_of_month <br />";
}
print end_html;
Output
12. Write a Perl program to display various Server informations like Server Name, Server
Software, Server protocol, CGI Revision etc.
Lab12.pl
#!"D:/xampp/perl/bin/perl.exe"
print<<1a;
Content-type:text/html\n\n
<html>
<head><title>Environment Variables</title></head>
<body bgcolor=orange>
<table cellpadding=5 border=1>
<tr>
<th>ENV-VARIABLE</th>
<th>VALUE</th>
</tr>

foreach $i(sort keys %ENV) {

print "<tr><td>$i<td>$ENV{$i}</tr>";
}
print "</table></body></html>";

13. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields.
On submitting, store the values in MySQL table. Retrieve and display the data based on Name.
This program is written using php.
Lab13.php
<html>
<body bgcolor="cyan"">
<?php
$con=mysqli_connect('localhost','root','') or die(mysqli_error());
mysqli_select_db($con,'dbase1') or die(mysqli_error());
if(isset($_POST['name']))
{
$nme=$_POST['name'];
$ad1=$_POST['add1'];
$ad2=$_POST['add2'];
$eml=$_POST['email'];
if($nme!="" && $ad1!="" && $ad2!="" && $eml!="")
{
$query="INSERT INTO contacts VALUES ('$nme','$ad1','$ad2','$eml')";
$result=mysqli_query($con,$query) or die(mysql_error());
echo "Information Stored in database successfully!";
}
else
echo "One of the field is empty";
}
if(isset($_POST['sname']))
{
$n=$_POST['sname'];
if($n=="")
echo "Enter name!";
else
{
$var=mysqli_query($con,"SELECT * FROM contacts WHERE name='$n'") or die("No
match found");
$arr=mysqli_fetch_row($var);
if($arr[0]!="")
{
echo "<table border size=2>";
echo "<tr><th>Name</th><th>Address 1</th><th>Address 2</th><th>E-
mail</th></tr>";
do
{
echo "<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td><td>$arr[3]</td></tr>";
}while($arr=mysqli_fetch_row($var));
echo "</table>";
}
else
echo "Record not found";
mysqli_close($con);
}
}
?>
<form action="Lab13.php">
<INPUT TYPE=submit value="Refresh">
</form>
<FORM ACTION="Lab13.php" METHOD="POST">
<h3>Enter personel details</h3>
<pre>
Name :<INPUT TYPE="text" NAME="name" value=""><BR>
Address 1 :<INPUT TYPE="text" NAME="add1" value=""><BR>
Address 2 :<INPUT TYPE="text" NAME="add2" value=""><BR>
Email :<INPUT TYPE="text" NAME="email" value=""><BR>
<INPUT TYPE="submit" value="Submit"><INPUT TYPE=reset >
</pre>
</FORM>
<FORM ACTION="Lab13.php" METHOD="POST">
<h3>Search based on Name</h3>
<pre>
Enter name :<INPUT TYPE="text" NAME="sname"><INPUT TYPE="submit"
value="Search">
</pre>
</FORM>
</body>
</html>

14. Write a Perl program to accept the User Name and display a greeting message randomly
chosen from a list of 4 greeting messages.
Lab14.html

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

<!DOCTYPE html>

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

<head>

<title>Lab14.html</title>
 </head>

<body>

<h1>GREETINGS</h1>

<form action ="Lab14.pl" method="post">

USERNAME: <input type="text" name="p" /><input type="submit" value="SUBMIT" />

</form>

</body>

</html>

Lab14.pl

#!"D:/xampp/perl/bin/perl.exe"

print "Content-type:text/html\n\n";

use CGI':standard';

print "<html><body>";

$p=param("p");

@greetings=("Good morning","Welcome","How are you doing?","Hello!");

$i=int rand scalar @greetings;

print "Hi $p, $greetings[$i]";

print "</body></html>";
REFERNCES: Internet and World Wide Web by Dietel and Dietel
W3Schools
WWW.tutorialspoint.com
www.stackoverflow.com
www.youtube.com

THANK YOU