06csl78 web lab

Laboratory Manual Web Programming Lab (06CSL78)

P E S School of Engg. – Education for the Real World – Course Information – BE. VII-Sem CS / IS - 1

PES SCHOOL OF ENGINEERING (Hosur Road, 1KM before Electronic City, Bangalore-560 100)

Department of Computer Science & Engineering Academic Year 2011-2012 (Odd Semester)

SESSION: JULY 2011 – DECEMBER 2011

VII SEMESTER

WEB PROGRAMMING LAB MANUAL

SUBJECT CODE: 0CSL78

Faculty: Mr. Sajeevan K , Mr. Prabodh C P

&

Mr. Hanumant Pujar



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

on lots.

Experiment 1: Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered

list, table, borders, padding, color, and the <span> tag.

Objective: - To learn how to create a simple web page using html along with the usage of style sheets, lists, creation or tables with borders, padding and colors. Procedure:-

1. Open a new file using Notepad. 2. Rename the file as pgm1.html (Extension for html programs is .html ) 3. Create a file (external cascading style sheet) by name Lab1.css where the font, size, colors etc..

are specified. The style type should be set to “text/css” under the <head> tag. 4. The pgm1.css file should be included in pgm1.html file in the <link href ….> tag 5. In the <body> tag of the html document. Create an Ordered list using <ol> tag. Also create

sublists under the main list as shown below :

1. Dept of CSE

i. I Sem ii. III Sem

iii. V Sem iv. VII Sem

2. Dept of ISE

i. I Sem ii. III Sem

iii. V Sem iv. VII Sem

6. Create a Table which shows the Room No of the class/section and the strength of the students in each class/section of the departments, CSE and ISE.

7. Fill the table using an appropriate colour and specify the thickness of the border for the table. 8. Make the website neat and attractive with relevant text and pictures

9. Use suitable tags wherever necessary.



CSS Style Sheet Source Code: (Lab1.css)

p /* Paragraph */

{

font-family: "lucida calligraphy", arial, 'sans serif';

margin-left: 10pt;

word-spacing: 5px;

font-size: 75%;

}

li /* List Item */

{


margin-left: 10pt;

list-style-type: square;

font-size: 75%;

}

table /* Table */

{


margin-left: 10pt;

border-style: outset;

background-color: rgb(100,255,105);

}

body /* Body */

{

background-color:rgb(200,255,205);

}

td /* Table Data */

{

font-size: 75%;

padding: 0.5cm;

}

th /* Table Header */

{

text-align:center;

font-size: 85%;

}

h1, h2, h3, hr /* Heading 1, Heading 2, Heading 3, Horizontal Line */

{

color:#483d8b;

}

Span /* Span Tag */

{

color:blue;

background-color:pink;

font-size: 29pt;

font-style: italic;

font-weight: bold;

}

XHTML Source Code

<html>

<head>

<link rel="stylesheet" type="text/css" href="Lab1.css" />

<title> Web Programming Lab program1 </title>

</head>

<body>

<h1>Header is 36 pt with blue in color</h1> 

<h2>Header is blue</h2> 

<p>Paragraph has a left margin of 50 pixels</p> 

<table border="2"> 

<tr> 

<th width="200"> Name </th> 

<th> Email </th>

</tr>

<tr>

<td width="200">Dr. APJ</td> 

<td>[email protected]</td>

</tr>

<tr>

<td width="200">Dr. MAV</td>


</tr>

<tr>

<td width="200">Dr. GTR</td>


</tr>

<tr>

<td width="200">Dr. MMS</td>


</tr>

</table>

<hr> 

<ol type=1> 

<li> Dept of CSE 

<ol type=i>

<li> I SEM

<li> III SEM

<li> V SEM

<li> VII SEM

</ol>

<li> Dept of ISE

<ol type=i>

<li> I SEM

<li> III SEM

<li> V SEM

<li> VII SEM

</ol>

</ol>

<p> 

<span>This is a Span text.</span> This is a Ordinary text. This is a Ordinary

text. This is a Ordinary text. This is a Ordinary text. This is a Ordinary

text. This is a Ordinary text. This is a Ordinary text. This is a Ordinary

text. <span>This is a Span text.</span>

</p>

</body> 

</html> 

Screenshot of the above program



Experiment 2 : Problem Statement: - 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

Objective :-

To get acquainted with javascript and how to embed javascript in html code.

Proceedure :-

Question 2a :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number of Fibonacci elements to be generated from the user using prompt()

3. Validate input given and alert the user for invalid input using alert() 4. Generate the Fibonacci numbers using the standard algorithm and print it to std out using

document.write() Question 2b :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number till which the squares have to be generated using prompt()

3. Validate input given and alert the user for invalid input using alert() 4. For all the numbers from 1 to n, generate their squares and print them.



XHTML Source Code

<html>

<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>" +" Fibonacci Series for "+ num + " is:"+ "</h1>");

if(num==1)

document.write("<h1> "+ fib1 + "</h1>");

else

document.write("<h1>" + fib1 + "<br> " + 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>


Output 1:

Output 2:



Source Code for 2b (Number and its Squares) Program: <html>

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


Output 1:

Output 2:



Experiment 3 : Problem Statement :- Develop and demonstrate a XHTML file that includes Javascript script that uses

functions for the following problems:

a) Parameter: A string

Output: The position in the string of the left-most vowel

b) Parameter: A number

Output: The number with its digits in the reverse order

Objective :-

To get acquainted with javascript procedures and usage of regular expressions in javascript. Proceedure :-

Question 3a :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the string from the user using prompt() 3. Validate input string (should be only alphabets, a - z) using the regular expression “ /^[a-zA-Z]+$/ “

and alert the user for invalid input using alert() 4. Convert the string to lowercase using toLowerCase() 5. Use indexOf(<vowel>) for each vowel to get the position of

the vowel in the string.

6. Print the leftmost vowel i.e., print the lowest index got from indexof()

Question 3b :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number to be reversed from the user using prompt() 3. Validate input number (should be a positive number between 0 to 9) using the regular

expression “ /^[0-9]+$/ “ and alert the user for invalid input using alert() 4. Reverse the number using modulus operation. 5. Use math.floor(number/10) to get the floor of number after division (used for reversing) 6. Display the reversed string using alert()



Source Code for 3a (Left-most Vowel position) Program <html>

<head>

<title> Program to find left-most vowel </title>

<script type=text/javascript”>

function str_vowel()

{

var str=prompt(“Enter the string\n”);

for(var i=0;i<str.length;i++)

{

if(str.charAt(i)==’a’ || str.charAt(i)==’e’ || str.charAt(i)==’i’ ||

str.charAt(i)==’o’ || str.charAt(i)==’u’ || str.charAt(i)==’A’ ||

str.charAt(i)==’E’ || str.charAt(i)==’I’ || str.charAt(i)==’O’ ||

str.charAt(i)==’U’)

{

document.write(“The Entered string is:” + str + “<br/>“);

document.write(“The left-most vowel is:” + str.charAt(i) + “<br/>“);

var pos=i+1;

document.write(“The position of the leftmost vowel “ + str.charAt(i)

+ “ is: “ + pos + “\n”);

exit;

}

}

document.write(“The Entered String is:” + str + “<br/>“);

document.write(“The Entered String has no vowels!!!!”);

}

</script>

</head>

<body style=“background-color:yellow” onload=“str_vowel();”>

<h3 style=“text-align:center; color:red”>

Program includes JavaScript script functions to find the position of

the left-most vowel in the entered string. </h3>

</body>

</html>




Output 1:

Output 2:

Output 3:



Source Code for 3b (Reversing the number) Program <html>

<head>

<h1><center>Program to Reverse a Number </center></h1><hr>

<title> Program to Reverse a Number </title>


function disp(num)

{

var alphaExp = /^[0-9]+$/;

if(!num.value.match(alphaExp))

{

alert("Input should be positive numeric");

return false;

}

var rn=0, n= Number(num.value);

while(n!=0)

{

r = n%10;

n = Math.floor(n/10);

rn = rn*10 + r;

}

alert("The " + num.value + " in reverse is " + rn);

}

</script>

</head>

<body bgcolor="yellow">

<form>

<center>Enter a number :

<input type=text name=number>

<input type="button" value="Click me!" onclick="disp(number);" >

</center>

</form>

</body>

</html>




Output 1:

Output 2:



Experiment 4 :

Problem Statement :-

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)

Objective :-

To write functions in html, validate using regular expressions.

Proceedure :- Question 4a :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the USN from the user using prompt() 3. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-

Z][0-9][0-9][0-9]$/ 4. If the USN format is correct, alert the user with a message, else

alert the user with the format DAADDAADDD (for eg: 1PE09CS001)

Proceedure :- Question 4b :-

1. Declare the script tag as text/javascript in the beginning of the <body> of html program 2.Get the USN and Semester from the user using prompt() 3.Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-

Z][0-9][0-9][0-9]$/

4. If the USN format is correct, alert the user with a message, else alert the user with the

format DAADDAADDD (for eg: 1PE09CS001)

5.

Validate Semester by the user using the regular expression : /[1-8]$/

6. If the Semester is correct, alert the user with a message, else alert the user with the

valid semester number (1 – 8).



Source Code for 4a (USN Validation) Program <html>

<head>

<center> <h1> Program to Validate USN Number </h1></center>

<title> Program to Validate USN </title>

<script type='text/javascript'>

function formValidator()

{

var usn = document.getElementById('req1');

alert("Entered USN is " + usn.value);

if(isCorrect(usn))

{

return true;

}

return false;

}

function isCorrect(elem1)

{

alphaExp1=/[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(alphaExp1))

{

alert("US Number should be in DAADDAADDD (1PE02CS007) format");

elem1.focus();

return false;

}

alert("US Number is CORRECT");

return true;

}

</script>

</head>

<body bgcolor="blue">

<form onsubmit='return formValidator()'>

<center>Enter your USN. in DAADDAADDD format : <input type='text'

id='req1'/>

<input type='submit' value='Check Field' />

<br></center>

<i><font color="red">Note: </font></i>D-> Digit, A->Alphabet

</form>

</body>

</html>




Output 1:

Output 2:



Output 3:

Source Code for 4b (USN & Semester Validation) Program <html>

<head>

<h1><center>Program to Validate USN and Semester</h1></center><hr>

<title> Program to Validate USN and Semester </title>

<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 alphaExp2 = /[1-8]$/


{

alert("Semester Number is empty");

elem2.focus();

return false;

}




{

alert("Invalid Semester Number");

elem2.focus();

return false;

}

alert("Semester Number IS CORRECT");

return true;

}

function isCorrect(elem1)

{

var alphaExp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-

9]$/


{

alert("US Number is empty");

elem1.focus();

return false;

}


{

alert("US Number should be in DAADDAADDD format");

elem1.focus();

return false;

}

alert("US Number IS CORRECT");

return true;

}

</script>

</head>

<body bgcolor="yellow"><center>

<form onsubmit='return formValidator()'>

Enter your USN. in DAADDAADDD format :

<input type='text' id='req1'/> <BR/>

Enter your Sem. in D[1-8] format :

<input type='text' id='req2'/> <BR/>

<input type='submit' value='Check Field' />

<input type="reset" value="Reset"><br>

<font style=italic color=red>Note:</font> A->Alphabet, D->Digit

</form></center>

</body>

</html>




Output 1:

Output 2:



Experiment 5 :

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

Source Code for 5a (Paragraph highlighting) Program <html>

<head>

<title>The Stacking Order </title>

<style type="text/css">

.layer1Style

{

border: solid thick black;

padding: 1em;

width: 300px;

background-color: green;

position: absolute;

top: 100px;

left: 200px;

z-index:0;

}

.layer2Style

{

border: solid thick red;

padding: 1em;

width: 300px;

background-color: blue;

position: absolute;

top: 120px;

left: 220px;

z-index:0;

}

.layer3Style

{

border: solid thick green;

padding: 1em;

width: 300px;

background-color: purple;

position: absolute;

top: 140px;

left: 240px;

z-index:0;

}

</style>




var topLayer="layer3";

function mover(toTop)

{

var oldTop=document.getElementById(topLayer).style;

var newTop=document.getElementById(toTop).style;

oldTop.zIndex="0";

newTop.zIndex="10";

topLayer=document.getElementById(toTop).id;

}

</script>

</head>

<body><body style="background-color:yellow">

<h2 style="text-align:center;color:red"> Program Includes XHTML document to

show the stacking of Paragraphs</h2>

<div style="z-index:10;" class="layer1Style" id="layer1"

onmouseover="mover('layer1')">

This is the first paragraph with layer1style features embedde to it </div>



This is the Second paragraph with layer1style features embedde to it </div>



This is the Third paragraph with layer1style features embedde to it

</div>

</body>

</html>


Output 1:

Output 2:



Output 3:

Output 4:

Source Code for 5b (Paragraph Moving) Program <html>

<head>

<title>The Stacking Order </title>

<style type="text/css">

.layer1Style

{

border: solid thick black;

padding: 1em;

width: 300px;

background-color: green;

position: absolute;

top: 100px;

left: 400px;

z-index:1;

}

.layer2Style

{

border: solid thick blue;

padding: 1em;

width: 300px;

background-color: red;

position: absolute;

top: 120px;

left: 420px;

z-index:2;

}



.layer3Style

{

border: solid thick brown;

padding: 1em;

width: 300px;

background-color: orange;

position: absolute;

top: 140px;

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 style="background-color:yellow">

<h1 style="text-align:center;color:red"> The Stacking of paragraphs when

moved from the top stacking position, it returns to its original

position. </h1>


onmouseover="mover('layer1','1')" onmouseout="moveBack()">

First Paragrah </div>



Second Paragrah </div>



Third Paragrah </div>

</body>

</html>




Output 1:

Output 2:

Output 3:



Experiment 6 :

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

VTU. The information must include USN, Name, Name of the College, Brach, Year of Joining, and e-mail

id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.

b) Create an XSLT style sheet for one student element of the above document and use it to create a

display of that element.

Source Code for 6a (Student Information using XML and CSS) Program

CSS Source Code

ad {display:block; margin-top:15px; color:blue; font-size:13pt;}

usn{color:red; font-size:12pt; margi-left:15px;}

name{color:red; font-size:12pt; margi-left:15px;}

college{color:red; font-size:12pt; margi-left:15px;}

branch{color:red; font-size:12pt; margi-left:15px;}

year{color:red; font-size:12pt; margi-left:15px;}

email{color:red; font-size:12pt; margi-left:15px;}

h3{ color:brown; font-size:18pt;}

h2{ display:block; color:black; font-size:18pt;}

XML Source Code

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

<student_information>

<h3> Student - Information </h3>

<h2>Student 1 </h2>

<ad><label>usn:<usn> 1PE00CS030 </usn> </label> </ad>

<ad><label>Name:<name> HANUMANT PUJAR </name> </label> </ad>

<ad><label>College Name:<college> PESSE </college> </label> </ad>

<ad><label>Branch:<branch> CSE </branch> </label> </ad>

<ad><label>Year of Joining:<year> 2000 </year> </label> </ad>

<ad><label>Email-id:<email> [email protected] </email> </label>

</ad>

<h2> Student 2</h2>

<ad><label>usn:<usn> 1PE02CS014 </usn> </label> </ad>



<ad><label>Name:<name> Prabodh C P </name> </label> </ad>

<ad><label>College Name:<college> NIE </college> </label> </ad>




</ad>

<h2>Student 3</h2>

<ad><label>usn:<usn> 1SV02CS009 </usn> </label> </ad>

<ad><label>Name:<name> Majunatha H N </name> </label> </ad>

<ad><label>College Name:<college> MVJCE </college> </label> </ad>




</ad>

</student_information>




Source Code for 6b (Student Information using XML and XSLT) Program

XSL Source Code

<?xml version = "1.0"?>

<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 Program</title>

</head><body>

<h2> VTU Student Description </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 />

<span style = "font-style: italic; color: blue;"> Year of Join:

</span>

<xsl:value-of select = "YOJ" /> <br />

<span style = "font-style: italic; color: blue;"> E-Mail:

</span>

<xsl:value-of select = "email" /> <br />

</body></html>

</xsl:template>

</xsl:stylesheet>

XML Source Code

<?xml version = "1.0"?>

<?xml:stylesheet type = "text/xsl" href = "Lab6b.xsl" ?>

<VTU>

<USN> 1PE00CS030 </USN>

<name> HANUMANT PUJAR </name>

<college> PESSE</college>

<branch> CSE </branch>

<YOJ> 2000 </YOJ>

<email> [email protected] </email>

</VTU>




Experiment 7 :

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

Source Code for 7a (Server Information) program #!/usr/bin/perl

use CGI':standard';

print "content-type:text/html","\n\n";

print "<html>\n";

print "<head> <title> About this server </title> </head>\n";

print "<body><h1> About this server </h1>","\n";

print "<hr>";

print "Server name :",$ENV{'SERVER_NAME'},"<br>";

print "Running on port :",$ENV{'SERVER_PORT'},"<br>";

print "Server Software :",$ENV{'SERVER_SOFTWARE'},"<br>";

print "CGI-Revision :",$ENV{'GATEWAY_INTERFACE'},"<br>";

print "<hr>\n";

print "</body></html>\n";

exit(0);




Source Code for 7b (UNIX Command) program Perl Program

#!/usr/bin/perl

use CGI':standard';

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

$c=param('com');

print "<center><h2>Output of the UNIX command</h2><hr><br>";

print "Command is : <i><font color=red><b> $c</b></i></font> ";

print "<br>";

system($c);

print "</center>";

exit(0);

HTMLProgram

<html><title> Program to execute UNIX Command </title>

<body><center><h1>Program to Execute UNIX Command </h1>

<hr>

<form action="http://localhost/cgi-bin/6b.pl">

Enter the UNIX Command : <input type="text" name="com">

<input type="submit" value="submit">

</form></center>

</body></html>


Output 1:



Experiment 8 :

8. a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from

a list of 4 greeting messages.

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

Source Code for 8a (User Greeting Message) program #!/usr/bin/perl

use CGI ':standard';

use CGI::Carp qw(warningsToBrowser);

@coins = ("Welcome to Web Programming Lab","Have a nice time in lab",

"Practice all the programs", "well done Good Day");

$range = 4;

$random_number = int(rand($range));

if(param)

{

print header();

print start_html(-title=>"User Name",-bgcolor=>"Pink",-text=>"blue");

$cmd=param("name");

print b("Hello $cmd, $coins[$random_number]"),br();

print start_form();

print submit(-value=>"Back");

print end_form();

print end_html();

}

else

{

print header();

print start_html(-title=>"Enter user name",-bgcolor=>"yellow",-

text=>"blue");

print start_form(),textfield(-name=>"name",-value=>" "), submit(-

name=>"submit",-value=>"Submit"),reset();

print end_form();

print end_html();

}



Source Code for 8b (Track Number of Visitors) program #!/usr/bin/perl -w

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

$count="/var/www/cgi-bin/count.txt";

if(open(FILE,"<",$count))

{

$access=<FILE>;

close(FILE);

if(open(FILE,">",$count))

{

$access++;

print FILE $access;

close(FILE);

}

else

{

print "Cant write to the file";

}

}

else

{

print "File doesnot exist";

}

print "<h1><center> Program to Display Webcount </center></h1>";

print "<hr>";

print "<i> <center>The users have accessed this webpage <font size=12

color=red>$access</font>times </center></i>";




Experiment 9 :

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

Source Code for 9th (Digital Clock) program #!/usr/bin/perl


print "Refresh: 1\n";

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

print start_html(-title=>"Program 8",-bgcolor=>"Black",-text=>"white");

($s,$m,$h)=localtime(time);

print br,br,"The current system time is $h:$m:$s";

print br,br,hr,"In words $h hours $m minutes $s seconds";

print end_html;




Experiment 10 :

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.

Source Code for 10th (Student Information [name, age]) program

Perl Program #!/usr/bin/perl

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

print "<HTML><TITLE>Result of the insert operation </TITLE>";


use DBI;

$dbh=DBI->connect("DBI:mysql:vtu","root","root123");

$name=param("name");

$age=param("age");

$qh=$dbh->prepare("insert into student values('$name','$age')");

$qh->execute();

$qh=$dbh->prepare("Select * from student");

$qh->execute();

print "<table border size=1><tr><th>Name</th><th>Age</th></tr>";

while ( ($name,$age)=$qh->fetchrow())

{

print "<tr><td>$name</td><td>$age</td></tr>";

}

print "</table>";

$qh->finish();

$dbh->disconnect();

print"</HTML>";

HTML Program

<html>

<body>

<h1><center>Program to insert Student Information [Name,

Age]</h1></center>

<form action="http://localhost/cgi-bin/Lab10.pl">

Name : <input type="text" name="name"> <br>

Age :<input type="text" name="age"> <br>

<input type="submit" value="Submit">

</form>

</body>

</html>



Experiment 11 :

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.

Source Code for 11th (Recent User Date-Time using COOKIE) program <?php

date_default_timezone_set('Asia/Calcutta');

$inTwoMonths = 60 * 60 * 24 * 60 + time();

setcookie('lastVisit', date("G:i - m/d/y"), $inTwoMonths);

if(isset($_COOKIE['lastVisit']))

{

$visit = $_COOKIE['lastVisit'];

echo "Your last visit was - ". $visit;

}

else

echo "You've got some stale cookies!";

?>


Output 1:

Output 2:



Experiment 12 :

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.

Source Code for 12th (Number of View Count using SESSION) program <?php

session_start();

session_register("count");

if (!isset($_SESSION))

{

$_SESSION["count"] = 0;

echo "<p>Counter initialized</p>\n";

}

else { $_SESSION["count"]++; }

echo "<p>The counter is now <b>$_SESSION[count]</b></p>".

"<p>reload this page to increment</p>";

?>


Output 1:

Output 2:



Experiment 13 :

13. Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text fields. On

submitting, store the values in MySQL table. Retrieve and display the data based on Name.

Experiment 14 :

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.



User Manual

Procedure to carry out execution of Perl Programs

1) Login into system using “root” username.

2) After successful login, double click on the Terminal to get into command prompt with admin

privileges (#).

3) Change the path to \var\www\cgi-bin using cd and check using pwd command.

4) Open vi or vim editor, then type the program getting into insert mode.

5) Save all the perl programs with .pl extension.

For ex: Lab7.pl

6) Change the privileges of the program using chmod command.

For ex: chmod 777 Lab7.pl

7) Compile the perl program using the command perl program_name

For ex: perl Lab7.pl

8) If no errors are there at the command line after compiling the program, start the web browser, and

then type http://localhost/cgi-bin/Lab7.pl at the URL. Just change the program names for other

programs to execute without changing the syntax at URL.

Procedure to carry out execution of HTML programs

1. Open new Terminal and change the path to \var\www\html using cd command.

2. Open vi or vim editor, then type the program getting into insert mode.

3. Save all the html programs with .html extension.

For ex: Lab7.html

4. Open a web browser and type http://localhost/Lab7.html at the URL to run the program.

Procedure to carry out execution of php programs

1. Open new Terminal and change the path to \var\www\html using cd command, create a new directory

using the command mkdir php under html directory.

2. Change the path to \var\www\html\php using cd command.


4. Save all the php programs with .php extension.

For ex: Lab7.php

5. Open a web browser and type http://localhost/php/Lab7.php at the URL to run the program.

Procedure to carry out execution of MySQL programs

1. Open new Terminal and change the path to \var\lib\mysql\mysql using cd command.

2. Type mysql at the command prompt with the above path and then press enter to login to mysql

prompt from admin prompt.

For ex: mysql:>

3. To create a new database type the command as create database database_name;

4. To change the database usage, give the command as use database_name;

5. To create a new table under this database, type the command as create table table_name (parameter

list with datatype_name separated by commas);

For ex: create table student (name varchar(10), age int);

http://localhost/cgi-bin/Lab7.pl

http://localhost/Lab7.html

http://localhost/php/Lab7.php



6. To insert values into the above created table, type the command as insert into table_name values( “

“,” “);

For ex: insert into student values (“Pujar”,25);

7. To retrieve all the values present in the table, type the command as select * from table_name;

For ex: select * from student;

Procedure to carry out execution of xml programs



3. Save all the xml programs with .xml extension.

For ex: Lab7.xml

4. Open a web browser and type http://localhost/Lab7.xml at the URL to run the program.

Procedure to carry out execution of xsl/css programs



3. Save all the xsl/css programs with .xsl / .css extension.

For ex: Lab7.xsl or Lab7.css

4. As these programs are style sheets, so we can‟t run these programs at web browser or at the command

line.

5. Save these programs at the path where other programs such as html, php are inheriting the features

embedded in .xsl / .css programs.

Path for html programs \var\www\html

Path for php programs \var\www\html\php

http://localhost/Lab7.xml

06csl78 web lab

Documents