web programming manual, p.e.s. college of engineering, mandya.doc
TRANSCRIPT
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
1/53
P E S COLLEGE OF ENGINEERING, MANDYA
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
WEB PROGRAMMING
LABORATORY MANUAL
MAMATHA.B.S
Asst. Professor
2009
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
2/53
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
XTML 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 uses 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
P E S C E, Mandya2
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
3/53
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 usedlanguage 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
P E S C E, Mandya3
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
4/53
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
P E S C E, Mandya4
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
5/53
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
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
6/53
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 DETAILSDEGREE
COLLEGE
UNIVERSITY
SEMESTER
AGGREGATE
B.E.
PESCE
VTU BELGAUM
1st
2nd
3rd
4th
5th
6th
7th
AGGREGATE
74.42%
Dept. of Computer Science & Engineering
P E S C E, Mandya6
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
7/53
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
P E S C E, Mandya7
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
8/53
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
p, table, li
{
font-family:"lucida callingraphy",aerial,'sanse serif';
}
p{
word-spacing: 10 pt;
}
Dept. of Computer Science & Engineering
P E S C E, Mandya8
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
9/53
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
Steps to run:
Step 1. Save this file as filename.html
Step 2. To display the output on the browser just click on .html file.
Dept. of Computer Science & Engineering
P E S C E, Mandya9
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
10/53
2.Develop and demonstrate a XHTML file that includes JavaScript for the following
problems:
a) Input: A number n obtained using prompt
output: The first n Fibonacci numbersSolution:
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+" Fiboacii numbers are
\n");document.write(fib1+"
" +fib2);for(i=2; i
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
11/53
Steps to run:
Step 1. Save this file as filename.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Enter the input for n, observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya11
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
12/53
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
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
13/53
Dept. of Computer Science & Engineering
P E S C E, Mandya13
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
14/53
3. Develop and demonstrate a XHTML file that includes JavaScript that uses functions for
the following problems:
a) Parameter: A string
Output: The position in the string of the left-most vowelSolution:
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");
}
Steps to run:
Step 1. Save this file as filename.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Enter a string, observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya14
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
15/53
Dept. of Computer Science & Engineering
P E S C E, Mandya15
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
16/53
3. 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);
Steps to run:
Step 1. Save this file as filename.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Enter a number, observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya16
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
17/53
4.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 informationto 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;
}
Dept. of Computer Science & Engineering
P E S C E, Mandya17
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
18/53
else
{
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
P E S C E, Mandya18
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
19/53
Steps to run:Step 1. Save this file as filename.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Enter a USN validate, observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya19
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
20/53
Dept. of Computer Science & Engineering
P E S C E, Mandya20
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
21/53
4.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();
Dept. of Computer Science & Engineering
P E S C E, Mandya21
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
22/53
sems.select();
return false;
}
elsereturn true;
}
Student Database
USN :
SEM :
document.getElementById("usn").onchange=chkusn;
document.getElementById("sem").onchange=chksem;
Steps to run:
Step 1. Save this file as lab4b.html
Dept. of Computer Science & Engineering
P E S C E, Mandya22
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
23/53
Step 2. To display the output on the browser just click on .html file.
Step 3. Enter a USN, Semester, validate observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya23
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
24/53
Dept. of Computer Science & Engineering
P E S C E, Mandya24
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
25/53
5.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
P E S C E, Mandya25
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
26/53
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.
Steps to run:
Step 1. Save this file as p5a.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya26
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
27/53
5.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
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: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;}
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.
Second paragraph.Second paragraph.Second paragraph.
Dept. of Computer Science & Engineering
P E S C E, Mandya27
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
28/53
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.
Steps to run:
Step 1. Save this file as p5b.html
Step 2. To display the output on the browser just click on .html file.
Step 3. Observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya28
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
29/53
6.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
P E S C E, Mandya29
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
30/53
//---------------------------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
P E S C E, Mandya30
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
31/53
6.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
P E S C E, Mandya31
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
32/53
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
P E S C E, Mandya32
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
33/53
Note: Exercises from 7-14 should be worked under Linux.
7.a) Program to display various server information like server name, server software,
server protocol, CGI revision etc.
Edit the following using vi editor.
#! /usr/bin/perl
# p7a.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/p7a.cgi
Step 2: Change the permission of the file
chmod +x p7a.cgi
Step 3: Test your file by typing
./p7a.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/p7a.cgi
Note: If you are working in LAN environment, make use of servers IP address instead of local
host.
Dept. of Computer Science & Engineering
P E S C E, Mandya33
http://localhost/cgi-bin/p7a.cgihttp://localhost/cgi-bin/p7a.cgi -
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
34/53
7.b) Program to accept Unix command from a HTML form and to display the output of the
command executed.
HTML document
COMMAND:
PERL file
#!/usr/bin/perl
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
P E S C E, Mandya34
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
35/53
Steps to run:
Step 1: Save the CGI file in the folder /var/www/cgi-bin/p7b.cgi
Step 2: Save the HTML file in the folder /var/www/HTML/p7b.html
Step 3: Change the permission of both the fileschmod +x p7b.cgi
chmod +x p7b.html
Step 4: Open the HTML file in the browser using the URL
http://localhost/p7b.html
Step 5: Enter any simple Unix command, observe the output.
Dept. of Computer Science & Engineering
P E S C E, Mandya35
http://localhost/p7b.htmlhttp://localhost/p7b.html -
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
36/53
8.a)Program to accept the user name and display a greeting message randomly chosen from a
list of 4 greeting messages.
//------------------------HTML file--------------
Accept user name
Enter a user Name
//--------------------------CGI file-----------------------------------
#!/usr/bin/perl
use CGI:standard;
print "content-type:text/html\n\n";
$input=param(name);
print "PROGRAM 8a";
print ";
print$input;
my @msgs=(Good morning,Welcome,Hai,Hello);
print $msgs [ int rand scalar @msgs] ;
print "";
Dept. of Computer Science & Engineering
P E S C E, Mandya36
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
37/53
Steps to run:
Step 1: Save the CGI file in the folder /var/www/cgi-bin/p8a.cgi
Step 2: Save the HTML file in the folder /var/www/HTML/p8a.html
Step 3: Change the permission of both the fileschmod +x p8a.cgi
chmod +x p8a.html
Step 4: Open the HTML file in the browser using the URL
http://localhost/p8a.html
Dept. of Computer Science & Engineering
P E S C E, Mandya37
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
38/53
8.b) Program to keep track of the number of visitors, visited the webpage and display the
counter with proper headings.
#! /usr/bin/perl
# p8b.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/p8b.cgi
Step 2: Change the permission of the file
chmod +x p8b.cgi
Step 3: Test your file by typing
./p8b.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/p8b.cgi
Dept. of Computer Science & Engineering
P E S C E, Mandya38
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
39/53
9.Program to display a digital clock which displays the current time of the server
#! /usr/bin/perl
# p9.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/p9.cgiStep 2: Change the permission of the file
chmod +x p9.cgi
Step 3: Test your file by typing
./p9.cgi at the prompt.
Step 4: Open the file in the browser using the URL
http://localhost/cgi-bin/p9.cgi
Dept. of Computer Science & Engineering
P E S C E, Mandya39
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
40/53
10. 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.
//------p10.html to insert User details-----------------------------------//
User DetailsForm to collect user details
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
41/53
//------p10.cgi to insert and display User details-----------------------------------//
#! /usr/bin/perl
#p10.cgiuse 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
P E S C E, Mandya41
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
42/53
}
$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 database
mysql>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 p10.html in /var/www/html/p10.html
Step 2:Change the permission of the file.
Step 3:Test your file by $./p10.cgi at the command prompt.
Step 4: Open the file in the browser using the URL:http://10.0.1.232/p10.html
Dept. of Computer Science & Engineering
P E S C E, Mandya42
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
43/53
11.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.
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
44/53
12. 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/php/p12.php
Step 2:Change the permission of the file.
Step 4: Open the file in the browser using the URL http://localhost/php/p12.php
Dept. of Computer Science & Engineering
P E S C E, Mandya44
http://localhost/php/p12.phphttp://localhost/php/p12.php -
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
45/53
13. Create a XHTML form with Name, Address line1, Address line2 and e-mail text fields. On
submitting, store the values in Mysql table. Retrieve and display the data based on name.
// -------------p13a.html file to enter user details-----------//
Form to collect user details
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
46/53
// -------------p13b.html file to retrieve the data based on name -----------//
Retrieve the data based on name
// --p13a.php file to store the data in to mysql database cus_info, table address---//
User detailsCurrent data
Name: Address line1:
Dept. of Computer Science & Engineering
P E S C E, Mandya46
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
47/53
Address line2: Email-ID:
// ------------p13b.php file to retrieve the data based on name from the table address----------//
search details
Name: Address line1: Address line2: Email-ID:
Search resultsDept. of Computer Science & Engineering
P E S C E, Mandya47
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
48/53
Steps to run
Step1: Save the p13a.html file in /var/www/html /p13a.html
Step 2: Save the p13b.html file in /var/www/html /p13b.html
Step 3: Save thep13a.php and p13b.php files in /var/www/html /php/
Step 3. Change the permission.
Step 4: Open the file in the browser using the URL http://10.0.1.232/p13a.html
Dept. of Computer Science & Engineering
P E S C E, Mandya48
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
49/53
14. 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
P E S C E, Mandya49
http://10.0.1.230/php/insert.phphttp://10.0.1.230/php/insert.php -
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
50/53
// -------------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-----------//
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
51/53
insert book
ACCESSION_NO
TITLE
AUTHOR
EDITION
PUBLICATION
Dept. of Computer Science & Engineering
P E S C E, Mandya51
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
52/53
// -------------search.php to search for a book based on Title-----------//
-
7/30/2019 web programming manual, P.E.S. College Of Engineering, Mandya.doc
53/53
< ?else : ?>
Steps to run PHPStep1: 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 3. Change the permission.
Step 4: Open the file in the browser using the URL http://10.0.1.232/insert.html