Final Lab Manual WEB

VISVESVARAYA TECHNOLOGICAL UNIVERSITY
BELGAUM
PROGRAMMING THE WEB

LAB Manual
(10CSL78)
(As per Visvesvaraya Technological University Syllabus)
Complied By:
Prof. Deepak M Prof. Ravichandra M

Assistant Professor, Dept. of CSE Assistant Professor, Dept of CSE
DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

AND
Department of INFORMATION SCIENCE & ENGINEERING
SAI VIDYA INSTITUTE OF TECHNOLOGY

(Affiliated to VTU, Belgaum, Approved by AICTE, New Delhi and Govt. of Karnataka)
Rajanukunte, Doddaballapur Road, Bangalore-560064
Tel: 080-2846 8196, Fax: 2846 8193 / 98, Web: www.svit.co.in
2014-15
Disclaimer
The information contained in this document is the proprietary and exclusive property of Sai Vidya
Institute of Technology except as otherwise indicated. No part of this document, in whole or in part,
may be reproduced, stored, transmitted, or used for course material development purposes without the
prior written permission of Sai Vidya Institute of Technology.
The information contained in this document is subject to change without notice. The information in this
document is provided for informational purposes only.
Trademark
Edition: 2014 - 15
Document Owner
The primary contacts for questions regarding this document are:
Author(s): Prof. Deepak M
Department: Computer science & Engineering
Contact email id :
deepak.neo.m@gmail.com
Programming the WEB
Syllabus
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 includeUSN, Name, Name of the College, Brach, Year
ofJoining,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.
Dept. of CSE, SVIT, Rajanukunte Page 3

Programming the WEB
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.
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 search results with proper headings.
Note: In the examination each student picks one question from the
lot of all 12 questions.

Programming the WEB
Lab Instructions
Steps to Execute XHTML Program.
1.Create a folder by your name in any directory

2. Open notepad and type the program and save the file with .html extension in your folder.
3.Then open the Internet Explorer /Mozilla web browser and type the URL as
directoryname:\foldername\filename.html
Ex: E:\cse\data.html
4. Finally output will display.
Steps to Execute XML using XSLT & CSS Program
1.Create a folder by your name in any directory

2.Open notepad and type the XML program and save the file with .xml extension in your folder.
3.Open notepad and type the XSL/CSS program and save the file with .xsl extensionfor XSLT
program & save the file with .css extension for CSS program in your folder.
4.Then open the Internet Explorer /Mozilla web browser and type the URL as
directoryname:\foldername\filename.xml
Ex: E:\cse\pgmname.xml
5.Finally output will display.
Steps to Execute PERL Program.
1. Type the program in notepad and save it with .cgi extension in the C:\wamp\Apache2\cgi-bin
folder.
2. Next type the supported html & save it with .html extension in the same folder.
3. Start server(go to start->programs->Wamp server->start wamp server).
4.open the broser & type the URL as
http://localhost, then it will display the welcome web page
5.Then Open Browser and type the URL as
http://localhost/cgi-bin/pgrogram_name.cgi
EX: http://localhost/cgi-bin/9.cgi
6. Finally output will display.

Programming the WEB
To run perl programs
# cd /var/www/cgi-bin
All perl programs should be saved under.pl extension vim 6a.plpaste the perl program save and
Quit
To see the output go to browser and in the adress bar type
http://localhost/cgi-bin/6a.pl
For mysql programs
service mysqld start

mysql> show databases;
use any of the databases available or create a new database
create student
use student
show tables
if tables are not available create a new atble by the following cmd create table table name
insert into table

Programming the WEB
PROGRAM 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.
GUIDELINES:
1) Before doing anything remember please work in root mode(superuser mode)
<?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">
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num = prompt("Enter a number : \n", "");
if(num!=null && num>0)
{
document.write("<h1>" + num + " Fibonocci are <br></h1>");
if(num==1)
document.write("<h1> "+ fib1 + "</h1>");
else
document.write("<h1>" + fib1 + " " + fib2 + "</h1>");
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h1> " + fib + "</h1>");
fib1=fib2;
fib2=fib;
}
}
else
alert("No Proper Input");
</script>
</body>
</html>

Programming the WEB
Screenshot:

Programming the WEB
Program 1b
<?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">
<body>
var num = prompt("Enter a number : \n", "");
if(num >0 && num !=null)
{
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " -" + i*i + "\n";
}
alert(msgstr)
}
else
alert("No input supplied");
</script>
</body>
</html>

Programming the WEB

Programming the WEB
PROGRAM 2
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.

<script type='text/javascript'>
function formValidator()
{
var usn = document.getElementById('req1');
alert(usn.value);
if(isCorrect(usn))
{
return true;
}
return false;
}
function isCorrect(elem1)
{
exp1=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/
if(elem1.value.length == 0)
{
alert("US Number is empty");
elem1.focus();
return false;
}
else if(!elem1.value.match(exp1))
{
alert("USN should be in Proper format");
elem1.focus();
return false;
}
alert("US Number IS CORRECT");
return true;
}
</script>
<body>
<form onsubmit='return formValidator()'>
Enter your USN : <input type='text' id='req1'/>
<input type='submit' value='Check Field' />
</form>
Programming the WEB
</body>
</html>
Sample Output 1:

Programming the WEB
Sample Output 2:

Programming the WEB
PROGRAM 2b
Modify the above program to get the current semester also (restricted to be a number from
1 to 8)
GUIDELINES:
Before doing anything remember please work in root mode(superuser mode)

<head>
<script type='text/javascript'>
function formValidator()
{
var usn = document.getElementById('req1');
var sem = document.getElementById('req2');
if(isCorrect(usn))
{
if(isPerfect(sem))
return true;
}
return false;
}
function isPerfect(elem2)
{
var exp2 = /[1-8]$/
{
alert("Semester Number is empty");
elem2.focus();
return false;
}
else if((!elem2.value.match(exp2))||(elem2.value.length==2))
{
alert("Invalid Semester Number");
elem2.focus();
return false;
}
alert("Semester Number IS CORRECT");

return true;
}
function isCorrect(elem1)
{
var exp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/

Programming the WEB
{
alert("US Number is empty");
elem1.focus();
return false;
}
else if(!elem1.value.match(exp1))
{
alert("Please Enter currect USN number of VTU Format");
elem1.focus();
return false;
}
alert("US Number IS CORRECT");
return true;
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
Enter your USN. :
<input type='text' id='req1'/> <br/>
Enter your Sem. :
<input type='text' id='req2'/> <br/>
<input type='submit' value='Check Field' />
</form>
</body>
</html>
Sample Output 1:

Programming the WEB

Programming the WEB
Sample Output 2:

Programming the WEB
PROGRAM 3
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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Stacking order</title>

<style type="text/css">
.layer1Style
{
border: solid thick black;
padding: 1em;
width:300px;
background-color:yellow;
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;

Programming the WEB
z-index:0;
}
</style>
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
oldTop.zIndex="0";
newTop.zIndex="1";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<body>
<h2>Stacking of Paragraphs</h2>
<div style="z-index: 0;" class="layer1Style" id="layer1" onmouseover="mover('layer1')">
Hi!!!!! WEB is Interesting
</div>

WEB is easy to learn
</div>

JAVASCRIPT is different from java
</div>
</body>
</html>

Programming the WEB
Sample Output 1:
PROGRAM 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.
<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>The Stacking order</title>

<style type="text/css">
.layer1Style
{
border: solid thick black;
padding: 1em;
width:300px;
background-color:yellow;
position:absolute;
top:200px;
left:400px;
z-index:1;
}
.layer2Style
{
border: solid thick blue;
padding: 1em;
width:300px;
Programming the WEB
background-color:red;
position:absolute;
top:220px;
left:420px;
z-index:2;
}
.layer3Style
{
border: solid thick brown;
padding: 1em;
width:300px;
background-color:orange;
position:absolute;
top:240px;
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><body>
<br /><br />
<h3>The Stacking of paragraphs,and moved from the top stacking position, it returns to its
original position.</h3>
<div style="z-index: 1;" class="layer1Style" id="layer1" onmouseover="mover('layer1','1')"

onmouseout="moveBack()">
Hi!!!!! WEB is Interesting
</div>

Programming the WEB

WEB is easy to learn...
</div>

JAVASCRIPT is different from JAVA
</div>
</body>
</html>
Sample Output:

Programming the WEB
PROGRAM 4
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, Branch,
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.
GUIDELINES:
XML Part:
<?xml version = "1.0" encoding = "utf-8"?>

<!—4a.xml -->
<?xml-stylesheet type = "text/css" href = "4a.css" ?>

<vtu_college>
<details>
<usn>1VA06IS031</usn>
<name>Nagesh</name>
<college>SVIT</college>
<branch>Information Science and Engg</branch>
<year>2011</year>
<email>nagesh621@gmail.com</email>
</details>
<details>
<usn>4VA06CS007</usn>
<name>Deepti</name>
<branch>Computer Science and Engg</branch>
<year>2010</year>
<email>deepti@gmail.com</email>
</details>
<details>
<usn>1VA06IS047</usn>
<name>Sharath</name>
<branch>Information Science and Engg</branch>
<year>2010</year>
<email>sharath@gmail.com</email>
</details>

Programming the WEB
</vtu_college>
CSS PART:
details{
display:block;
font-size:14pt;
color:red;
font-family:Ariel;
}
usn,name,college,branch,year,email
{
display:block;
font-style:italic;
font-size:16pt;
color:blue;
}
PROGRAM 4b
Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
GUIDELINES:
XML Part:


<?xml-stylesheet type = "text/xsl" href = "4b.xsl" ?>
<vtu>
<usn> 1va06IS031 </usn>

<name> Nagesh </name>
<college> SVIT </college>
<branch> Information Science </branch>
</vtu>
XSL Part:

Programming the WEB

<xsl:stylesheet version = "1.0"

xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
xmlns = "http://www.w3.org/1999/xhtml">

<xsl:template match = "vtu">
<html><head><title> Style sheet for 6b.xml </title>

</head><body>
<h2> student info </h2>
<span style = "font-style: italic;color: blue;"> usn:
</span>
<xsl:value-of select = "usn" /> <br />
<span style = "font-style: italic;color: blue;"> name:
</span>
<xsl:value-of select = "name" /> <br />
<span style = "font-style: italic;color: blue;"> college:
</span>
<xsl:value-of select = "college" /> <br />
<span style = "font-style: italic;color: blue;"> branch:
</span>
<xsl:value-of select = "branch" /> <br />
</body></html>
</xsl:template>
</xsl:stylesheet>

Programming the WEB
PROGRAM 5
Write a perl program to display various server information like server mail,server
software,server protocol,cgi version etc.
GUIDELINES:
1) Before doing anything remember please work in root mode.
2) Please save the cgi or perl program in /var/www/cgi-bin directory and save the cgi/perl
program as filename.cgi or filename.pl
NOTE: If the file is html then please save in /var/www/html directory
3) Then open the terminal and type cd /var/www/cgi-bin and enter
4) Then give the read-write-execute permission by chmod 777 filename.cgi after you have
written the program then open firefox browser and type http://localhost/cgi-
bin/filename.cgi
NOTE:If you want to access html page then please type http://localhost/filename.html
5) To see the status of the server
service httpd status //displays apache server(daemon process) is running or not
6) If the associated server is not running then start the server else do not start
service httpd start //starts the httpd daemon process
NOTE: Before you write the programs please start the apache server
#! /usr/bin/perl
use CGI ':all';
print
header(),
start_html('more system info'),
h1('server info'),
(
('server name:',server_name()),br(),
('server port:',server_port()),br(),
('server software:',server_software()),br(),
('virtual hosr:',script_name()),br(),
('cgi revision:',$ENV {'GATEWAY_INTERFACE'}),br(),
('serverprotocol:',$ENV {'SERVER_PROTOCOL'})
),
end_html();
HTML PART
<html>
<head>
<title> svit </title>
</head>
<body>

Programming the WEB
<form action="http://localhost/cgi-bin/7a.pl" method=post>

<input type="submit" value="submit">
</form>
</body>
</html>
Screenshot:

Programming the WEB
PROGRAM 5b
Write a perl program to accept unix command from a html form and to display the output
of the command executed.
GUIDELINES:
bin/filename.cgi
#!/usr/bin/perl
use CGI qw(param);
$cmd=param('T1');
print "content-type:text/html\n\n";
print `/usr/bin/$cmd`;
print `/bin/$cmd`;
HTML PART
<html>
<body bgcolor=pink>
<form action="http://localhost/cgi-bin/5b.pl" method=get>
ENTER THE COMMAND:<input type="text" name="T1">
</form>
</body>
</html>

Programming the WEB
Screenshot:

Programming the WEB
PROGRAM 6a
Write a perl program to accept user name and display greeting message randomly chosen
from a list of 4 greeting messages.
GUIDELINES:
bin/filename.cgi
#! /usr/bin/perl
use strict;
use CGI':standard';
my $name=param('yourname');
print header();
print start_html(-title=>'GREETING MESSAGE' -BGCOLOR=>'#1E90FF');
print h2("Hello $name");
my $r=int(rand(4));
if($r==0){
print h2("Hai ".$name);
}
if($r==1){
print h2("Great Day ".$name);
}
if($r==2){
print h2("Welcome ".$name);
}
if($r==3){
print h2("Good Day ".$name);
}
print end_html();
HTML PART
Programming the WEB
<html>
<head>
<title>GREETING MESSAGE</title>
</head>
<body bgcolor="#1E90FF">
<form action="http://localhost/cgi-bin/8.pl" method="post">
<br>
Enter your name:<input type="text" name="yourname">
<br>
<br>
<input type="submit" value="click&submit">
<input type="reset" value="click&clear">
</form></body></html>
Screenshot:

Programming the WEB

Programming the WEB
PROGRAM 6b
Write a perl program to keep track of number of visitors visiting the webpage and to
display this count of visitor with proper headings.
GUIDELINES:
bin/filename.cgi
#!/usr/bin/perl
print "content-type:text/html","\n\n";
print "<html><body bgcolor=pink>\n";
print "<h2>number of times the page visited is</h2>\n";
my $countfile="r.txt";
my $noaccess;
if(open(FILE,"<".$countfile))
{
$noaccess=<FILE>;
close(FILE);
if(open(FILE,">".$countfile))
{
$noaccess++;
print FILE $noaccess;
close(FILE);
}
}
print $noaccess;
print "</body></html>"
HTML PART

Programming the WEB
<html>
<body>
<form action="http://localhost/cgi-bin/8b.pl" method=get>
</form>
</body>
</html>
Screenshot:

Programming the WEB
PROGRAM 7
Write a perl program to display a digital clock which displays the current time of the
server.
GUIDELINES:
bin/filename.cgi
#!/usr/bin/perl
use strict;
use CGI':all';
my($time,$str);
my($sec,$min,$hr)=localtime(time);
if($hr>=12)
{
$hr=$hr-12;
$str="pm";
}
else
{
$str="am";
}
$time=sprintf("%02d:%02d:%02d%s",$hr,$min,$sec,$str);
print "<body bgcolor=pink>";
print "<meta http-equiv=refresh content=1>";
print "$time";
HTML PART

Programming the WEB
<html>
<body>
<form action="http://localhost/cgi-bin/9.pl" method=get>
</form>
</body>
</html>
Screenshot:

Programming the WEB
PROGRAM 8
Write a perl program to insert name and age information entered by the user into a
table,created using mysql and display the current contents in the table.
GUIDELINES:
bin/filename.cgi
7) To work in mysql environment please type the command:
mysql –u root // here root is username and password is null
8) After typing the above command you will enter the mysql working environment then
follow the following instruction below
show databases; //it will display the all available databases
9) If you want to create a database then type
For eg: create SVIT;
10) Then make use of the created database to create table and query the tables under the
database just created. Type the command Ans:
use SVIT; //makes use of the database you just created.
11) To create the tables
create table student(
firstname varchar(25);
lastname varchar(20);
age int
);
12) Insert the rows into the tables Ans: for eg:
insert into student values(“prakash”,”r”,22);
13) To see the values in the table then type for eg:
select<column name>from<tablename>;

Programming the WEB
#!/usr/bin/perl
use DBI;
use CGI;
$form=new CGI;
$name=$form->param('name');
$age=$form->param('age');
$dbh=DBI->connect("DBI:mysql:svit","root","");
$insertrow=$dbh->prepare("insert into student3 values('$name','$age')");
$insertrow->execute();
$insertrow->finish();
$query=$dbh->prepare("select * from student3");
$query->execute();
$nrow=$query->rows;
print "<pre>";
print "<h1>name\t age\t </h1>";
for($i=1;$i<=$nrow;$i++)
{
@emparray=$query->fetchrow_array;
print "$emparray[0]\t\t";
print "$emparray[1]";
print "<pre>";
}
HTML PART
<html>
<body>
<form action="http://localhost/cgi-bin/10.pl" method=get>
name<input type="text" name="name">
age<input type="text" name="age">
</form>
</body>
</html>

Programming the WEB
Screenshot:

Programming the WEB
PROGRAM 09
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.
GUIDELINES:
2) Please goto directory /var/www/html and create new directory as php and give the root
permission for the php directory as chmod 777 php and please save the php program in
/var/www/html/php directory and save the php program as filename.php
3) Then open the terminal and type cd /var/www/html /php and enter
4) Then give the read-write-execute permission by chmod 777 filename.php after you have
written the program then open firefox browser and type
http://localhost/php/filename.php
PHP Part:
<?php
$Month = 2592000 + time();
//this adds 30 days to the current time
setcookie(‘AboutVisit’, date("F jS - g:i a"), $Month);
?>
<?php
if(isset($_COOKIE['AboutVisit']))
{
$last = $_COOKIE['AboutVisit'];
echo "Welcome back! <br> You last visited on ". $last;
}
else
{
echo "Welcome to our site!";
}
?>

Programming the WEB
Screenshot:

Programming the WEB
PROGRAM 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.
GUIDELINES:
2) Please goto directory /var/www/html and create new directory as php and give the root
permission for the php directory as chmod 777 php and please save the php program in
/var/www/html/php directory and save the php program as filename.php
3) Then open the terminal and type cd /var/www/html /php and enter
4) Then give the read-write-execute permission by chmod 777 filename.php after you have
written the program then open firefox browser and type
http://localhost/php/filename.php
PHP PART:
<?php
session_start();
session_register("count");
if(!isset($_SESSION))
{
$_SESSION["count"]=0;
echo"<p>counter initialized</p>\n";
}
echo $_SESSION["count"]++;
echo "<p>the counter is now<b>$_SESSION[count]</b></p>";
echo "<p>reload this page to increment</p>";
?>

Programming the WEB
Screenshot:

Programming the WEB
PROGRAM 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.
GUIDELINES:
bin/filename.cgi
7) To work in mysql environment please type the command:
mysql –u root // here root is username and password is null
8) After typing the above command you will enter the mysql working environment then
follow the following instruction below
show databases; //it will display the all available databases
9) If you want to create a database then type
For eg: create SVIT;
10) Then make use of the created database to create table and query the tables under the
database just created. Type the command Ans:
use SVIT; //makes use of the database you just created.
11) To create the tables
create table student(
firstname varchar(25);
lastname varchar(20);
age int
);
12) Insert the rows into the tables Ans: for eg:
insert into student values(“prakash”,”r”,22);
13) To see the values in the table then type for eg:
select<column name>from<tablename>;

Programming the WEB
INSERTION:
PHP PART:
<?php
$name=$_POST["name"];
$ad1=$_POST["ad1"];
$ad2=$_POST["ad2"];
$email=$_POST["email"];
$result=1;
$mysql=mysql_connect("localhost","root","") or die("connect err");
mysql_select_db("svit");
$result=mysql_query("insert into person values('$name','$ad1','$ad2','$email')");
print "name= $name ad1 = $ad1 ad2= $ad2 mail = $email result= $result " ;
?>
<html>
<head>
<title> Query DB </title>
</head>
<body>
<center> <h3><? if($result==1) print "Record Inserted Successfully"; ?></h3></center>
<h4>Current DB contents</h4>
<? $result=mysql_query("select * from person"); ?>
<table border="1" align="center" width="500">
<tr>
<th>Name</th><th>ad1</th><th>Ad2</th><th>Email</th></tr>
<? while($array=mysql_fetch_row($result)) {
print "<tr>";
print "<td>". $array[0]." </td>";
print "</tr>";
}
mysql_free_result($result);
mysql_close($mysql);
?>
</table>
</body>
</html>

Programming the WEB
HTML PART:
<html>
<head>
<title> Personal Details </title>
</head>
<body bgcolor="grey">
<form action="http://localhost/php/13a.php" method="post">
Complete the form below and click "Submit" <br>
<table width="500">
<tr>
<td>Name </td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Address1 </td>
<td><input type="text" name="ad1"></td>
</tr>
<tr>
<td>Address2 </td>
<td><input type="text" name="ad2"></td>
</tr>
<tr>
<td>Email ID </td>
<td><input type="text" name="email"></td>
</tr>
<tr><td><div align="center"><input type="submit"></td></tr>
</table>
</form>
</body>
</html>

Programming the WEB
Screenshot:

Programming the WEB
SEARCHING:
PHP PART:
<?
$name=$_POST["name"];
$found=0;
$mysql=mysql_connect("localhost","root","")or die("connect error");
mysql_select_db("svit");
$result=mysql_query("select *from person where name = '".$name. "'");
if(mysql_num_rows($result)>=1) $found=1;
?>
<html>
<body>
<h1>
<?
if($found==1) print "person found";
else print "not found";?>
</h1>
<table border="1" align="center" width="500">
<tr>
<th>name</th>
<th>Ad1</th>
<th>Ad2</th>
<th>e-mail</th>
</tr>
<? while($array=mysql_fetch_row($result)){
print"<tr>";
print "<td>".$array[0]."</td>";
print "</tr>";
}
mysql_free_result($result);
mysql_close($mysql);
?>
</table>
</body>
</html>

Programming the WEB
HTML PART:
<? xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html public="-//W3C//DTDXHTML11/EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dfd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>search</title>
</head>
<body bgcolor="grey">
<form action="http://localhost/php/13b.php" method="post">

complete the form and click "submit"<br>
<table width="500">
<tr>
<td>enter name of the person to search</td>
<td><input type="text" name="name"></td>
</tr>
<tr><td><div align="center"><input type="submit" value="search"></td></tr>
</table>
</form>
</body>
</html>
Screenshot:

Programming the WEB

Programming the WEB
Program No 12
Build a rails application to accept book 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
Steps to execute Ruby on rails on windows
Step 1:
Download the instantrails software (InstantRails-2.0-win.zip) from the link

http://rubyforge.org/frs/?group_id=904
Step 2: .
Extract the files on the C:/ Drive
Say(C:\myrails\InstantRails-2.0-win\instantrails) As in my case
Step 3:
Copy the directory named rails_apps into the directory named ruby (Because rails run on
ruby)
Note: InstantRails-2.0-win.zip is a self contained system, it doesn’t require any installation. Just
extracting the files is enough.
Step 4:
Goto “C:\myrails\InstantRails-2.0-win\instantrails” .You can see the rails icon “I” in red
color. As shown in the snapshot below. Double click on it.

Programming the WEB
Step 5:
A rails application will be invoked. You can manage the servers by this application.
Snapshot is given below.
Step 6:
Click on the icon on the top left corner, goto Rails application->open ruby console window
as shown in the example below.
Steps to create a rails application
Lab Program 12
Create a database:
To do this goto “C:\myrails\InstantRails-2.0-win\instantrails\mysql”
Execute the command
>mysql –u root

Programming the WEB
>create database lab12_development;

>create database lab12_test;
>create database lab12_production;
>use lab12_development;
>create table books (
id int not null auto_increment,
name varchar(80) not null,
description text not null,
price decimal(8, 2) not null,
primary key(id)
);
> exit
Follow Step 4 to Step 6 and you can see the following window
Now change the directory to
“C:\myrails\InstantRails-2.0-win\instantrails\ruby\rails_apps”
Execute the following command
rails -d mysql lab12

>cd lab12
Creating controller, model and view from database

>ruby script/generate scaffold Book name:string description:text price:float

Programming the WEB
Starting Rails Server

ruby script/server
Executing in the web browser

http://localhost:3000/books
You can see the following screen, Now click on new book and enter the data
Now go to command console of instantrails

Creating main (new) controller for searching book
ruby script/generate controller main

Programming the WEB
Opening main controller program

Open the file \lab12\app\controllers\main_controller.rb and edit it
Create two views welcome and result
class MainController < ApplicationController
def welcome
@num_books = Book.count
end
def result
@bookid = params[:sid]
@bookz = Book.find(:all, :conditions => "id = #{@bookid}")
end
end
Create Result view file

> notepad app\views\main\result.rhtml.erb
<html>
<title> Welcome template for books </title>
<body>
<p> Entered book id is <%= @bookid %> </p>
<table border=1>
<tr><th>Book Id</th><th>Book Name</th><th>Details </th> <th>Price </th> </tr>
<% @bookz.each do |bk|
@id = bk.id
@name = bk.name
@descp = bk.description
@price = bk.price %>
<tr>
<td> <%= @id %></td>
<td><%= @name %> </td>
<td><%= @descp %></td>
<td> <%= @price %></td>
</tr>
<% end %>
</table>
</form>
</body>
</html>
Create Welcome view file
> notepad app\views\main\welcome.html.erb
<html>
<title> Welcome template for books </title>

Programming the WEB
<body>
<p> Total number of books = <%= @num_books %> </p>
<form action = "result" >
Enter Searching Element: <input type="text" name="sid" />
<input type=submit value="Search" />
</form>
</body>
</html>
Starting Rails Server
ruby script/server
Executing in the web browser
http://localhost:3000/main/welcome
*Insert the data using http://localhost:3000/books
To create ERB files follow these steps

1. Open a notepad
2. Type the contents
3. Click on Save as and save with an extension .html.erb with quotes
Ex: “programname.html.erb”
As in the snapshot

Programming the WEB

Programming the WEB
Web Programming Viva Questions
1. HTML stands for

Ans: Hyper Text Markup Language
2. What type of language is HTML?

Ans: Markup Language
3. What does an HTML document describe?

Ans: Web pages
4. Links in HTML are defined with what tag?

Ans: <a>, anchor tag
5. How many heading styles are there in HTML?

Ans: 6 headings, h1..h6
6. How line break is given in HTML?

Ans: using <br> tag
7. What is the use of attributes used in HTML?

Ans: They provide additional information for tags
8. For what purpose <hr> tag is used?

Ans: The <hr /> tag is used to create an horizontal rule (line).
9. What are the basic text formatting tags used in HTML?

Ans: <b> for bold, <i> for italic, <u> for underline etc.
10. What is a hyperlink?

Ans: In web terms, a hyperlink is a reference (an address) to a resource on the web.
11. How images are displayed on web pages in HTML?

Ans: In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the
src attribute is the URL of the image you want to display on your page.
The syntax of defining an image: <img src=”url/”> .
12. Explain <table> tag used in HTML?

Ans: Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the
content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
tables, etc.
13. How many types of lists are available in HTML?

Programming the WEB
Ans: three types of lists are available <ul> for unordered list, <ol> for ordered list, <dl> for definition
lists.
14. Explain <form> element used in HTML?

Ans: A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-
down menus, radio buttons, checkboxes, etc.) in a form.A form is defined with the <form> tag.
15. How colors are defined in HTML?

Ans: HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green,
and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00).
The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a #
sign.
16. Explain about frames used in HTML?

Ans: With frames, you can display more than one HTML document in the same browser window. Each
HTML document is called a frame, and each frame is independent of the others.The disadvantages of
using frames are:
The web developer must keep track of more HTML documents
It is difficult to print the entire page
17. How to use styles in HTML?

Ans: When a browser reads a style sheet, it will format the document according to it. There are three ways
of inserting a style sheet: .
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the head section.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section with the <style> tag.
18. Expand CSS.

Ans: Cascading Style Sheets
19. What does styles do in Style sheets ?

Ans: They tell how to display various elements
20. How CSS syntax is made up of?

Ans: The CSS syntax is made up of three parts: a selector, a property and a value:
21. What is Javascript?

Ans: JavaScript is THE scripting language of the Web.JavaScript is used in millions of Web pages to add
functionality, validate forms, detect browsers, and much more.
22. What Javascript can do?

Ans: JavaScript gives HTML designers a programming tool
JavaScript can put dynamic text into an HTML page
JavaScript can react to events
JavaScript can read and write HTML elements –
Programming the WEB
JavaScript can be used to validate data –

JavaScript can be used to detect the visitor's browser –
JavaScript can be used to create cookies .
23. What was the original name of Javascript?

Ans: ECMA Script (European Computers Manufacturers Association)
24. What is a Javascript statement?

Ans: A JavaScript statement is a command to a browser. The purpose of the command is to tell the
browser what to do.
25. Explain the importance of XML?

Ans: XML stands for EXtensible Markup Language.
XML was designed to transport and store data.
XML is important to know, and very easy to learn.
XML tags are not predefined, user has to define the tags
26. What is the difference between XML and HTML?

Ans: XML is not a replacement for HTML.
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is.
HTML was designed to display data, with focus on how data looks.
HTML is about displaying information, while XML is about carrying information.

27. What is XML tree?
Ans: XML Documents Form a Tree Structure
XML documents must contain a root element. This element is "the parent" of all other elements.
The elements in an XML document form a document tree. The tree starts at the root and branches to the
lowest level of the tree.
All elements can have sub elements (child elements):
Ex <root> <child>
<subchild>.....</subchild>
28. What are the syntax rules for XML document?

Ans: All XML Elements Must Have a Closing Tag
XML Tags are Case Sensitive
XML Elements Must be Properly Nested
XML Documents Must Have a Root Element
29. What is an XML Element?

Ans: An XML element is everything from (including) the element's start tag to (including) the element's end tag.
An element can contain other elements, simple text or a mixture of both. Elements can also have attributes.
30. What is a well formed XML document?

Ans: Well Formed XML Documents
A "Well Formed" XML document has correct XML syntax.
The syntax rules were described in the previous chapters:

Programming the WEB
XML documents must have a root element

XML elements must have a closing tag
XML tags are case sensitive
XML elements must be properly nested
XML attribute values must be quoted
31. What is a valid XML document?

Ans: A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a
Document Type Definition (DTD): <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM
"Note.dtd"> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me
this weekend!</body> </note>
32. What is the purpose of XML DTD?

Ans: The purpose of a DTD is to define the structure of an XML document. It defines the structure with a
list of legal elements:
33. What is PHP?

Ans: PHP is a powerful tool for making dynamic and interactive Web pages.
PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
PHP stands for PHP: Hypertext Preprocessor
PHP is a server-side scripting language, like ASP
PHP scripts are executed on the server
PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)
PHP is an open source software
PHP is free to download and use
34. Why PHP is popular than ASP?

Ans: PHP runs on different platforms (Windows, Linux, Unix, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP is FREE to download from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side
35. What is basic PHP syntax?

Ans: A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be placed
anywhere in the document.On servers with shorthand support enabled you can start a scripting block with <? and
end with ?>.For maximum compatibility, we recommend that you use the standard form (<?php) rather than the
shorthand form.
A PHP file normally contains HTML tags, just like an HTML file, and some PHP scripting code.Below, we have an
example of a simple PHP script which sends the text "Hello World" to the browser:
36. Expand Perl?

Ans: Perl (Practical Extraction and Reporting Language) A scripting language for web servers. Most often used on
Unix server
37. What is CGI script?

Ans: CGI scripts are executables that will execute on the server to produce dynamic and interactive web
pages. Most ISPs offer some kind of CGI capabilities. ISPs often offer preinstalled, ready to run, guest-
books, page-counters, and chat-forums solutions in CGI.CGI is most common on Unix or Linux servers.

Programming the WEB
38. Who developed PHP?

Ans: Rasmus Lerdorf
39. Who developed HTML and World Wide Web?

Ans: Tim Berners Lee
40. What is the use of HTTP protocol?

Ans: application-level protocol for distributed, collaborative, hypermedia information systems
generic, stateless, object-oriented
can be used for many tasks, such as name servers & distributed object management systems

Final Lab Manual WEB

Uploaded by

Final Lab Manual WEB

Uploaded by

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

PROGRAMMING THE WEB

Prof. Deepak M Prof. Ravichandra M

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SAI VIDYA INSTITUTE OF TECHNOLOGY

Author(s): Prof. Deepak M

Department: Computer science & Engineering

4. a) Design an XML document to store information about a student in an engineering college

Dept. of CSE, SVIT, Rajanukunte Page 3

Dept. of CSE, SVIT, Rajanukunte Page 4

Steps to Execute XHTML Program.

1.Create a folder by your name in any directory

Steps to Execute XML using XSLT & CSS Program

1.Create a folder by your name in any directory

Steps to Execute PERL Program.

Dept. of CSE, SVIT, Rajanukunte Page 5

To run perl programs

For mysql programs

service mysqld start

Dept. of CSE, SVIT, Rajanukunte Page 6

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

Dept. of CSE, SVIT, Rajanukunte Page 7

Dept. of CSE, SVIT, Rajanukunte Page 8

Dept. of CSE, SVIT, Rajanukunte Page 9

Dept. of CSE, SVIT, Rajanukunte Page 10

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

Dept. of CSE, SVIT, Rajanukunte Page 12

Dept. of CSE, SVIT, Rajanukunte Page 13

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

alert("Semester Number IS CORRECT");

Dept. of CSE, SVIT, Rajanukunte Page 14

Dept. of CSE, SVIT, Rajanukunte Page 15

Dept. of CSE, SVIT, Rajanukunte Page 16

Dept. of CSE, SVIT, Rajanukunte Page 17

<title>The Stacking order</title>

Dept. of CSE, SVIT, Rajanukunte Page 18

<div style="z-index: 0;" class="layer2Style" id="layer2" onmouseover="mover('layer2')">

<div style="z-index: 0;" class="layer3Style" id="layer3" onmouseover="mover('layer3')">

Dept. of CSE, SVIT, Rajanukunte Page 19

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

<title>The Stacking order</title>

<div style="z-index: 1;" class="layer1Style" id="layer1" onmouseover="mover('layer1','1')"

Dept. of CSE, SVIT, Rajanukunte Page 21

<div style="z-index: 2;" class="layer2Style" id="layer2" onmouseover="mover('layer2','2')"

<div style="z-index: 3;" class="layer3Style" id="layer3" onmouseover="mover('layer3','3')"

Dept. of CSE, SVIT, Rajanukunte Page 22

Design an XML document to store information about a student in an engineering college

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

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

Dept. of CSE, SVIT, Rajanukunte Page 23

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

<usn> 1va06IS031 </usn>

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

Dept. of CSE, SVIT, Rajanukunte Page 24

<xsl:stylesheet version = "1.0"

<html><head><title> Style sheet for 6b.xml </title>

Dept. of CSE, SVIT, Rajanukunte Page 25

Dept. of CSE, SVIT, Rajanukunte Page 26

<form action="http://localhost/cgi-bin/7a.pl" method=post>

Dept. of CSE, SVIT, Rajanukunte Page 27

Dept. of CSE, SVIT, Rajanukunte Page 28

Dept. of CSE, SVIT, Rajanukunte Page 29

Dept. of CSE, SVIT, Rajanukunte Page 31

Dept. of CSE, SVIT, Rajanukunte Page 32

Dept. of CSE, SVIT, Rajanukunte Page 33

Dept. of CSE, SVIT, Rajanukunte Page 34

Dept. of CSE, SVIT, Rajanukunte Page 35

Dept. of CSE, SVIT, Rajanukunte Page 36

Dept. of CSE, SVIT, Rajanukunte Page 37

Dept. of CSE, SVIT, Rajanukunte Page 38

Dept. of CSE, SVIT, Rajanukunte Page 39

Dept. of CSE, SVIT, Rajanukunte Page 40

Dept. of CSE, SVIT, Rajanukunte Page 41

Dept. of CSE, SVIT, Rajanukunte Page 42

Dept. of CSE, SVIT, Rajanukunte Page 43

Dept. of CSE, SVIT, Rajanukunte Page 44