8/3/2019 WP Autonomous) 2011
1/51
4P E S COLLEGE OF ENGINEERING, MANDYA
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
WEB PROGRAMMING
LABORATORY MANUAL
MAMATHA.B.S
Asst. Professor
2011
8/3/2019 WP Autonomous) 2011
2/51
WEB PROGRAMMING
OBJECTIVE
The aim of this manual is to provide the student with a practical knowledge to the programming
tools and skills required to build and maintain server sites on the Web. A wide variety of
technologies such as XHTML, CSS, XML, JavaScript, CGI, Perl, PHP and etc, are used in the
construction of a Web site.
Overview of XHTML
XHTML is not a programming language; its purpose is to describe the general form and layout of
documents to be displayed by a Brower. An XHTML document is a mixture of contents and controls.
The controls are specified by the tags of XHTML. Most XHTML tags consist of a pair of syntactic
markers that are used to delimit particular types of content.
XHTML documents can be created with a general purpose text editor.
Overview of CSS
The XHTML documents can even include the tags which specify presentation details, or style which
be more precisely and more consistently with Cascade Style Sheets (CSS).
Overview of XML
HTML is defined using Standard Generalized Markup Language(SGML), which is a language for
defining markup language s. XML is a simplified version of SGML, designed to allow users to easily
create markup languages that fit their own needs. XHTML is defined using XML. The XHTML
users must use the predefined set of tags and attributes whereas a user can create his own markup
language using XML, the set of tags and attributes are designed for the application at hand.
Overview of JavaScript
JavaScript is a client-side scripting language whose primary use in Web programming is to validate
form data and to create dynamic XHTML documents. JavaScript programs are embedded in XHTML
documents. The JavaScript code in an XHTML document is interpreted by the browser on the client.
Dept. of Computer Science&Engineering
PESCE, Mandya2
8/3/2019 WP Autonomous) 2011
3/51
Overview of Perl
Before applets and embedded scripts were developed, a computational capability was provided for
XHTML documents by allowing the document to request the execution of virtually any programs on
the server. This is done using Common Gateway Interface. Perl is the most commonly used language
for CGI programs.
Overview of PHP
PHP is a server side scripting language designed for Web applications. PHP code is embedded in
XHTML documents and the code is interpreted on the server before the XHTML document is
delivered to the requesting client. A requested document that includes PHP code is preprocessed to
interpret the PHP code and insert its output into XHTML document.
Overview of MySQL
MySQL is a widely used database system that implements SQL. It can be used to create databases
and can be accessed from a Perl program using a standard module DBI(Data Base Interface) which is
an API for database access.
FIRST EXAMPLE OF XHTML DOCUMENT.
Edit the following document in any text editor such as notepad
First document
Greetings from your webmaster !
Dept. of Computer Science&Engineering
PESCE, Mandya3
8/3/2019 WP Autonomous) 2011
4/51
Steps to run:
Step 1. Save this file as greet.html
Step 2. To display the output on the browser just click on greet.html file.
Dept. of Computer Science&Engineering
PESCE, Mandya4
8/3/2019 WP Autonomous) 2011
5/51
Exercises
1. Develop and demonstrate a XHTML document that illustrates the use of external style
sheet, ordered list, table, borders, padding, color and the tag.
Solution:
Edit the following document in any text editor such as notepad
XHTML document
Resume :Nitesh
.spanred {font-size: 24pt;
font-family: Ariel; color: red}
NITESH
8/3/2019 WP Autonomous) 2011
6/51
objective:
To pursue a career as Software Professional in
an esteemed organization, which would enhance my skills to work in competitive environment
and carve a winning edge for the organization.
CURRENT ACADEMIC DETAILS
DEGREE
COLLEGE
UNIVERSITY
SEMESTER
AGGREGATE
B.E.
PESCE
VTU BELGAUM
1st
2nd
3rd
4th
5th
6th
7th
AGGREGATE
74.42%
Dept. of Computer Science&Engineering
PESCE, Mandya6
8/3/2019 WP Autonomous) 2011
7/51
76.95%
77.15%
78.9%
76.07%
78.07%
76.07%
78.07%
ACADEMIC DETAILS
CLASS
SCHOOL/COLLEGE
BOARD
PASS YEAR
AGGREGRATE
12th
T.N.B.College,BGP.
B.I.E.C.,PATNA
2006
85.06%
10th
KNV HS Garhbanaili
B.S.E.B.,PATNA
2004
Dept. of Computer Science&Engineering
PESCE, Mandya7
8/3/2019 WP Autonomous) 2011
8/51
83.72%
SOFTWARE SKILLS
Operating System: Unix , Window XP
Programming Language: C,C++,JAVA,UNIX
WEB PROGRAMMING:HTML,XML,ASP,JSP
INTEREST
Watching cricket
Playig Sudoku
place: Mandya Nitesh
/* End of XHTML document */
CSS document(mystyle.css)
p, table, li
{
font-family:"lucida callingraphy",aerial,'sanse serif';
}
p{
word-spacing: 10 pt;
}
Dept. of Computer Science&Engineering
PESCE, Mandya8
8/3/2019 WP Autonomous) 2011
9/51
body{
background-color:blue;
}
p, u, td, p{
font-size:105%;
}
td{text-align:center;}
th{
text-align:centre;
font-size:85%;
}
h2, h3, h4, hr{color:white;}
table{
border-style:outset;
color: blue;
background-color:white;
}
li{list-style:square;}
/* End of CSS document */
Note: Save this file as mystyle.css
Dept. of Computer Science&Engineering
PESCE, Mandya9
8/3/2019 WP Autonomous) 2011
10/51
2. Develop and demonstrate an XHTML file that includes JavaScript for the following
problems:
a) Input: A number n obtained using prompt
output: The first n Fibonacci numbers
Solution:
Edit the following document in any text editor such as notepad
var fib1=0,fib2=1,fib =0;
var num=prompt ("Enter a number :\n"," ");
if(num>=1)
{
document.write(The first +num+ " Fiboancci numbers are:
\n");
document.write(fib1+"
" +fib2);
for(i=2; i
8/3/2019 WP Autonomous) 2011
11/51
Dept. of Computer Science&Engineering
PESCE, Mandya11
8/3/2019 WP Autonomous) 2011
12/51
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
Solution:
Edit the following document in any text editor such as notepad
var num=prompt("Enter a number: \n","");
msgstr="No. & its squares are \n";
for(i=1;i
8/3/2019 WP Autonomous) 2011
13/51
Dept. of Computer Science&Engineering
PESCE, Mandya13
8/3/2019 WP Autonomous) 2011
14/51
3. Develop and demonstrate a XHTML file that includes JavaScript for the following
problems:
a) Input: A text string, using prompt.
Output: Either Legal name or Illegal name , depending on whether the
input name fit the required format, which is First name, Last name, Initials
(Ex. Anil, Rao, M is Legal name and Anil, M Rao is illegal name.
var name=prompt ("Enter your name :\n","");
var pos=name.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/);
if(pos!=0)
{
alert("Illegal name\n");
}
else
alert("legal name\n");
Dept. of Computer Science&Engineering
PESCE, Mandya14
8/3/2019 WP Autonomous) 2011
15/51
b) Input: A phone number using promptOutput: Either The Phone number is in the correct form or The Phone number is not in thecorrect form depending on whether the phone number fit the required format ddd-ddd-dddd.
var num=prompt ("Enter your phone number :\n","");
var pos=num.search(/^\d{3}-\d{3}-\d{4}$/);
if(pos!=0)
{
alert("Illegal phone number\n");
}
else
alert("legal phone number\n");
Dept. of Computer Science&Engineering
PESCE, Mandya15
8/3/2019 WP Autonomous) 2011
16/51
4. Develop and demonstrate a XHTML file that includes JavaScript that uses functions for
the following problems:
a) Parameter: A string
Output: The position of the left-most vowel in the string
Solution:
Edit the following document in any text editor such as notepad
function disp(str)
{
text=str.value.toLowerCase();
var ch=text.search(/[aeiou]/);
if(ch>=0)
alert("the left most position of vowel is in the given string is"+(ch+1));
else
alert("not found");
}
Dept. of Computer Science&Engineering
PESCE, Mandya16
8/3/2019 WP Autonomous) 2011
17/51
Dept. of Computer Science&Engineering
PESCE, Mandya17
8/3/2019 WP Autonomous) 2011
18/51
4. b) Parameter: A number
Output: The number with its digits in the reverse order
Solution:
function reverse(n) {
n1=""+n;n2="";
for(i=n1.length;i>=0;i--)
n2=n2+n1.charAt(i);
return(n2); }
var num=prompt("Enter any number", " ");
var rev=reverse(num);
alert("The number with its"+"\n digits in the reverse order"+"\n"+rev);
Dept. of Computer Science&Engineering
PESCE, Mandya18
8/3/2019 WP Autonomous) 2011
19/51
5.a) Develop and demonstrate , using JavaScript, 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 3 digits; no embedded spaces) 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.
function formValidator()
{
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var usn = document.getElementById('usn');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name"))
{
if(usnlValidator(usn, "Please enter a valid usn"))
{
return true;
}
}
return false;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}
else
{
Dept. of Computer Science&Engineering
PESCE, Mandya19
8/3/2019 WP Autonomous) 2011
20/51
alert(helperMsg);
elem.focus();
return false;
}
}
function usnlValidator(elem, helperMsg){
//var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
var usnlExp = /^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/;
if(elem.value.match(usnlExp)){
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}
student detail
Name:
Usn:
Dept. of Computer Science&Engineering
PESCE, Mandya20
8/3/2019 WP Autonomous) 2011
21/51
Dept. of Computer Science&Engineering
PESCE, Mandya21
8/3/2019 WP Autonomous) 2011
22/51
5.b) Modify the above program to get the current semester also (restricted to be a number
from 1 to 8)
Usn validation
function chkusn()
{
var us=document.getElementById("usn");
var st=us.value;
var ok=st.search(/[1-4][A-Z]{2}\d{2}[A-Z]{2}\d{3}/);
if(ok==-1)
{
alert("The USN you entered ("+ st +" )is not in correct form.\n"+"The correct format is:"+
"(first [1-4] digit followed by Two Upper case characters follwed by two digits followed by "
+ " two characters followed by three digits\n"+"please go back and enter Usn");
us.focus();
us.select();
return false;
}
else
return true;
}
function chksem()
{
var sems=document.getElementById("sem");
var st=sems.value;
var ok=st.search(/[1-8]/);
if(ok==-1)
{
alert("Incorrect usn"+" please enter correct semester(1-8)");
sems.focus();
sems.select();
Dept. of Computer Science&Engineering
PESCE, Mandya22
8/3/2019 WP Autonomous) 2011
23/51
return false;
}
else
return true;
}
Student Database
USN :
SEM :
document.getElementById("usn").onchange=chkusn;
document.getElementById("sem").onchange=chksem;
Dept. of Computer Science&Engineering
PESCE, Mandya23
8/3/2019 WP Autonomous) 2011
24/51
Dept. of Computer Science&Engineering
PESCE, Mandya24
8/3/2019 WP Autonomous) 2011
25/51
Dept. of Computer Science&Engineering
PESCE, Mandya25
8/3/2019 WP Autonomous) 2011
26/51
6.a) Develop and demonstrate , using Javascript, 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.
Dynamic Stacking of Paragraphs
var top="p1";
function toTop(newTop){
domTop=document.getElementById(top).style;domNew=document.getElementById(newTop).style;domTop.zIndex="0";domNew.zIndex="10";top=newTop;
}
.panel1{position:absolute; top:0; left:0; z-index:0; border-style:solid; background-color:red;}.panel2{position:absolute; top:50px; left:110px; z-index:0; border-style:solid; background-color:black;}.panel3{position:absolute; top:100px; left:220px; z-index:0; border-style:solid; background-color:green;}
First paragraph.First paragraph.First paragraph.First paragraph.
First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.
Second paragraph.Second paragraph.Second paragraph.
Dept. of Computer Science&Engineering
PESCE, Mandya26
8/3/2019 WP Autonomous) 2011
27/51
Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.
Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.
Dept. of Computer Science&Engineering
PESCE, Mandya27
8/3/2019 WP Autonomous) 2011
28/51
6.b) Modify the above document so that when a paragraph is moved from the stacking
position, it returns to its original position rather than to the bottom.
Dynamic Stacking of Paragraphs.panel1{position:absolute; top:0; left:0; z-index:0; border-style:solid; background-color:orange;}.panel2{position:absolute; top:20px; left:50px; z-index:0; border-style:solid; background-color:white;}.panel3{position:absolute; top:40px; left:100px; z-index:0; border-style:solid; background-color:green;}
var topLayer="p3";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;}
First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.
First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.First paragraph.
Dept. of Computer Science&Engineering
PESCE, Mandya28
8/3/2019 WP Autonomous) 2011
29/51
Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.
Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.Second paragraph.
Second paragraph.Second paragraph.Second paragraph.Second paragraph.
Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.Third paragraph.
Third paragraph.Third paragraph.Third paragraph.Third paragraph.
Dept. of Computer Science&Engineering
PESCE, Mandya29
8/3/2019 WP Autonomous) 2011
30/51
7.a) Design an XML document to store information about a student in an engineering collegeaffiliated 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.
4ps07cs008
bikash
pes
B.E.
10/10/08
4ps07cs010
ajit
pes
B.E
12/10/08
4ps07cs012
Biswajit
pesB.E.
12/12/08
Dept. of Computer Science&Engineering
PESCE, Mandya30
8/3/2019 WP Autonomous) 2011
31/51
//---------------------------css document--------------------------------------
usn{display:block;margin-top:20px;margin-left:20px;color:red;}
name{display:block;margin-left:20px;color:blue;font-size:20pt;}
cname {display:block;margin-left:20px;font-size:20pt;color:pink;}
branch {display:block;margin-left:20px;font-size:20pt;color:black;}
yoj {display:block;margin-left:20px;font-size:20pt;color:green;}
email {display:block;margin-left:20px;color:orange;}
Steps to run:
Step 1. Save the css document as filename.css
Step 2. Save the xml document as filename.xml
Step 3. To display the output on the browser just click on .xml file.
Step 4. observe the output.
Dept. of Computer Science&Engineering
PESCE, Mandya31
8/3/2019 WP Autonomous) 2011
32/51
7.b) Create an XSLT style sheet for one student element of the above document and use it to
create a display of that element.
//---------------------------xml document-------------------------
4PS07CS008
VIPIN
PESCE
B.E.
10/10/08
/---------------------XSLT style sheet --------------------------
information
USN:
NAME:
CNAME:
BRANCH:
YOJ:
Dept. of Computer Science&Engineering
PESCE, Mandya32
8/3/2019 WP Autonomous) 2011
33/51
EMAIL:
Steps to run:
Step 1. Save the XSLT document as filename.xsl
Step 2. Save the xml document as filename.xml
Step 3. To display the output on the browser just click on .xml file.
Step 4. Observe the output.
Dept. of Computer Science&Engineering
PESCE, Mandya33
8/3/2019 WP Autonomous) 2011
34/51
Note: Exercises from 8-13 should be worked under Linux.
8.a) Program to display various server information like server name, server software,
server protocol, CGI revision etc.
Note: Edit the following using vi editor.
#! /usr/bin/perl
# serverinfo.cgi
print "content-type:text/html\n\n";
print "About this server";
print
";
print About this server;
print ;
print "Server name : $ENV{'SERVER_NAME'}";
print "
";
print "Server software: $ENV{'SERVER_SOFTWARE'}";
print "
";
print "Server protocol : $ENV{'SERVER_PROTOCOL'}";
print "
";
print "Server port : $ENV{'SERVER_PORT'}";
print "
";
print "CGI version : $ENV{'GATEWAY_INTERFACE'}";
print "";
exit(0);
Steps to run:
Step 1: Save the file in the folder /var/www/cgi-bin/ serverinfo.cgi
Step 2: Change the permission of the file
$ chmod +x serverinfo.cgi
Step 3: Test your file by typing
$ ./ serverinfo.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/ serverinfo.cgi
Note: If you are working in LAN environment, make use of servers IP address instead of local
host.
Dept. of Computer Science&Engineering
PESCE, Mandya34
8/3/2019 WP Autonomous) 2011
35/51
8.b) Program to accept Unix command from a HTML form and to display the output of the
command executed.
HTML document(command.html)
COMMAND:
PERL file
#!/usr/bin/perl
#command.cgi
print "content-type:text/html\n\n";
$query_string=$ENV{'QUERY_STRING'};
($a,$b)=split(/=/,$query_string);
print "Execute UNIX command";
print ";
$x=`$b`; //Back quotes to be used
print The Command output is ;
print
;
print $x;
print "";
exit(0);
Dept. of Computer Science&Engineering
PESCE, Mandya35
8/3/2019 WP Autonomous) 2011
36/51
Steps to run:
Step 1: Save the CGI file in the folder /var/www/cgi-bin/command.cgi
Step 2: Save the HTML file in the folder /var/www/HTML/command.html
Step 3: Change the permission of both the files
$ chmod +x command.cgi
$ chmod +x command.html
Step 4: Open the HTML file in the browser using the URL
http://localhost/command.html
Step 5: Enter any simple Unix command, observe the output.
Dept. of Computer Science&Engineering
PESCE, Mandya36
8/3/2019 WP Autonomous) 2011
37/51
9. a)Program to accept the user name and display a greeting message randomly chosen from a
list of 4 greeting messages.
//------------------------HTML file----message.html----------//
Accept user name
Enter a user Name
//--------------------------CGI file----------------message.cgi-------------------//
#!/usr/bin/perl
# message.cgi
use CGI:standard;
print "content-type:text/html\n\n";
$input=param(name);
print "Greeting message";
print ";
print$input;
my @msgs=(Good morning,Welcome,Hai,Hello);
print $msgs [ int rand scalar @msgs] ;
print "";
Dept. of Computer Science&Engineering
PESCE, Mandya37
8/3/2019 WP Autonomous) 2011
38/51
Steps to run:
Step 1: Save the CGI file in the folder /var/www/cgi-bin/message.cgi
Step 2: Save the HTML file in the folder /var/www/HTML/message.html
Step 3: Change the permission of both the files
chmod +x message.cgi
chmod +x message.html
Step 4: Open the HTML file in the browser using the URL
http://localhost/message.html
Step 5: Enter your name and submit. Observe the output.
Dept. of Computer Science&Engineering
PESCE, Mandya38
http://localhost/message.htmlhttp://localhost/message.html8/3/2019 WP Autonomous) 2011
39/51
9. b) Program to keep track of the number of visitors, visited the webpage and display the
counter with proper headings.
#! /usr/bin/perl
# visitors.cgi
open(IN,'count.txt');
$n++;
print OUT "$n";close(OUT);
print "content-type:text/html\n\n";
print "Visitors to a website";
print "You are $n visitor to this site";
print "";
Steps to run:
Step 1: Save the file in the folder /var/www/cgi-bin/visitors.cgi
Step 2: Change the permission of the file
chmod +x visitors.cgi
Step 3: Test your file by typing
./visitors.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/visitors.cgi
Dept. of Computer Science&Engineering
PESCE, Mandya39
8/3/2019 WP Autonomous) 2011
40/51
10. a) Write a Perl Program to display a greeting based on the access time of the web server.
#!/usr/bin/perl
# accesstime.cgi
use CGI ':standard';
$var=`date`;
$hr=substr($var,-18,2);
if($hr=12 && $hr16)
{
$stg="Good Evening.............";
}
header(),
start_html( -title=>Greeting message),
br(b("$stg")),
end_html ( );
exit(0);Steps to run:
Step 1: Save the file in the folder /var/www/cgi-bin/accesstime.cgi
Step 2: Change the permission of the file
chmod +x accesstime.cgi
Step 3: Test your file by typing
./accesstime.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/accesstime.cgi
Dept. of Computer Science&Engineering
PESCE, Mandya40
8/3/2019 WP Autonomous) 2011
41/51
10b) Program to display a digital clock which displays the current time of the server
#! /usr/bin/perl
# clock.cgi
use CGI':standard';
$var=`date`;
$delay=1;
$time=substr($var,-18,8);
print "refresh: $delay";
print "content-type:text/html\n\n";
print "clock";print "Digital Clock
";
print "$time";
print "";
exit(0);
Steps to run:
Step 1: Save the file in the folder /var/www/cgi-bin/clock.cgi
Step 2: Change the permission of the file
chmod +x clock.cgi
Step 3: Test your file by typing
./clock.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/clock.cgi
Dept. of Computer Science&Engineering
PESCE, Mandya41
8/3/2019 WP Autonomous) 2011
42/51
11. 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.
//------name.html to insert User details-----------------------------------//
User DetailsForm to collect user details
8/3/2019 WP Autonomous) 2011
43/51
//------name.cgi to insert and display User details-----------------------------------//
#! /usr/bin/perl
#name.cgi
use DBI;
use CGI':standard';
$lname=param(lname);
$fname=param(fname);
$age=param(age);
my $dbh=DBI->connect('DBI:mysql:people','root',' ')
or die ("Can't connect ");
mu $sth=$dbh->prepare(insert into age_information values(?,?,?))
or die "Can't prepare );
$sth->execute($lname,$fname,$age);
my $sth=$dbh->prepare('select * from age_information')
or die ("Can't prepare SQL :");
$sth->execute()
or die 9"Can't execute SQL :");
print ;
printAgeInfo;
print;
printCurrent Name,Age Information;
print;
printLastnameFirst NameAge;
while(($ln,$fn,$age)=$sth->fetchrow()) {
print "
$ln
$fn
$age
\n";
}
Dept. of Computer Science&Engineering
PESCE, Mandya43
8/3/2019 WP Autonomous) 2011
44/51
$sth->finish();
$dbh->disconnect();
print;
Steps to create database in MySQL:
From dollar prompt type
$mysql u root
Create a new database people;
mysql>create database people;
Switch to your databasemysql>use people;
Create the table using table command of MySQL
mysql>create table age_information(lname char(10),fname char(10),age int));
Insert few records using insert command.
Steps to run
Step1: Save the file p11.html in /var/www/html/name.htmlStep 2:Change the permission of the file.
Step 3:Test your file by $./name.cgi at the command prompt.
Step 4: Open the file in the browser using the URL:http://10.0.1.232/name.html
Step 5. Enter the inputs first name, last name and age and submit.
Dept. of Computer Science&Engineering
PESCE, Mandya44
8/3/2019 WP Autonomous) 2011
45/51
12. a) 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.
8/3/2019 WP Autonomous) 2011
46/51
12. b) 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.
Steps to run php
Step1: Save the file in /var/www/html/php/session.php
Step 2: Change the permission of the file.
Step 3: Open the file in the browser using the URL http://localhost/php/session.php
Dept. of Computer Science&Engineering
PESCE, Mandya46
http://localhost/php/session.phphttp://localhost/php/session.php8/3/2019 WP Autonomous) 2011
47/51
13. Using PHP and MySQL, develop a program 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.
// -------------insert.html file to enter Book information-----------//
Insert records
Enter The following Details
Enter accession-no
Enter Title
Enter Author
Enter Edition
Enter Publication
Dept. of Computer Science&Engineering
PESCE, Mandya47
http://10.0.1.230/php/insert.phphttp://10.0.1.230/php/insert.php8/3/2019 WP Autonomous) 2011
48/51
// -------------search.html file to search for a Book based on Title entered by the user-----------//
Search for book
Search page
Enter the Title:
// -------------insert.php to insert records into the table book_info-----------//
8/3/2019 WP Autonomous) 2011
49/51
ACCESSION_NO
TITLE
AUTHOR
EDITION
PUBLICATION
Dept. of Computer Science&Engineering
PESCE, Mandya49
8/3/2019 WP Autonomous) 2011
50/51
// -------------search.php to search for a book based on Title-----------//
8/3/2019 WP Autonomous) 2011
51/51
< ?else : ?>
Steps to create database in MySQL:
From dollar prompt type
$mysql u root Create a new database book_info;
mysql>create database book_info;
Switch to your database
mysql>use book_info;
Create the table using table command of MySQL
mysql>create table book_info (accn, title, author, edition, publication);
Insert few records using insert command.
Steps to run PHP
Step1: Save the insert.html file in /var/www/html /insert.html
Step 2: Save the search.html file in /var/www/html /search.html
Step 3: Save the insert.php and search.php files in /var/www/html /php/
Step 4. Change the permission.Step 5: Open the file in the browser using the URL http://10.0.1.232/insert.html