42
DEPARTMENT OF VISVESVARAYA TECHNOLOGICAL UNIVERSITY # 22/1, Nagawara, Bangalore – 560 045 Phone: +91 80 2544 1722 / 3690 / 3698 / 3744 Fax: +91 80 2544 3813 Url: www.hkbkeducation.org Email: [email protected]

Web Programming Lab Manual

Embed Size (px)

Citation preview

Page 1: Web Programming Lab Manual

DEPARTMENT OF

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

# 22/1, Nagawara, Bangalore – 560 045 Phone: +91 80 2544 1722 / 3690 / 3698 / 3744 Fax: +91 80 2544 3813

Url: www.hkbkeducation.org Email: [email protected]

Page 2: Web Programming Lab Manual

06CSL78 Web Programming Laboratory Programs

Manual

Prepared by: B. Fakruddin 1 Dept. of Computer Science and Engineering, HKBKCE

1. Develop and demonstrate a XHTML document that illustrates the use external style sheet, ordered list, table, borders, padding, color, and the <span> tag. <!—Lab Program 1 --> <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <title> Lab program1 </title> </head> <body bgcolor="pink"> <h2> <center> CURRICULUM VITAE </center> </h2><hr> <img src="stone_bird.jpg" align="right" width="100" height="50" border="3" /> <h3> Qualification details: </h3> <table border="3" > <!-- table with some information --> <tr> <th>Qualification </th> <th>Board</th> <th>Pass out</th> <th>Percentage</th> <th>Class</th> </tr> <tr> <td >B.E</td> <td>VTU</td> <td>2008</td> <td>65 %</td> <td>FC</td> </tr> <tr> <td >P.U.C</td> <td>K.S.E.B</td> <td>2004</td> <td>60 %</td> <td>FC</td> </tr> <tr> <td >S.S.L.C</td> <td>K.S.E.B</td> <td>2000</td> <td>65 %</td> <td>FC</td> </tr> </table> <hr> <!-- horizontal line --> <h3>Personel Information:</h3>

Page 3: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 2 Dept. of Computer Science and Engineering, HKBKCE

<h3> <ol> <!-- ordered list --> <li>Name :Viyay</li> <li>DOB :20-03-1985</li> <li>Nationality :Indian</li> <li>Religion :Hindu</li> </ol> </h3> <hr /> <p><span>This is WP lab</span> Welcome to web programming lab <span>This is WP lab</span></p> </body> </html> // mystyle.css p,table,li { font-family: "lucida calligraphy"; margin-left: 10pt; } p { word-spacing: 5px; } body { background-color:rgb(100,255,205); } p,li,td { font-size: 75%; } td { padding: 0.5cm; } th { text-align:center; font-size: 85%; } h1, h2, h3, hr { color:#483d8b; } table { border-style: solid; background-color: rgb(200,100,105); } li { list-style-type: upper-alpha; } span { color:blue; background-color:pink; font-size: 15pt; font-style: italic; font-weight: bold; }

Page 4: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 3 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

2. 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 <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- lab2a.html --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Program 2a</title> <script type="text/javascript"> var fib=0,fib1=0,fib2=1; var num = prompt("Enter a number ", " "); if(num!=null && num>0) { document.write("<h1>" + num + " Fibonacci are <br/>"+"</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;

Page 5: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 4 Dept. of Computer Science and Engineering, HKBKCE

} } else alert("No Proper Input"); </script> </head> <body bgcolor="maroon" text="white" > </body> </html> OUTPUT:

Page 6: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 5 Dept. of Computer Science and Engineering, HKBKCE

b. Input : A number n obtained using prompt Output : A table of numbers from 1 to n and their squares using alert <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- lab2b.html A trivial document--> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Program 2b</title> <script type="text/javascript"> 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> </head> <body> </body> </html> OUTPUT:

Page 7: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 6 Dept. of Computer Science and Engineering, HKBKCE

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

<?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"> <head><title>Lab3a</title> <script type="text/javascript"> function findpos() { var str=prompt("Enter the String:",""); var pos=str.search(/a|e|i|o|u|A|E|I|O|U/); var len=str.length; alert("length of the string is:"+len); if(pos >= 0) alert("Position of the leftmost vowel is" +pos); else alert("vowel is not found "); } </script> </head> <body bgcolor="maroon" text="white"> <h1><center>Click here to enter the String : <input type="submit" value="CLICK!" onClick="findpos()" /> </center></h1> </body></html>

OUTPUT:

Page 8: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 7 Dept. of Computer Science and Engineering, HKBKCE

3. b). Parameter: A number

Output: The number with its digits in the reverse order. <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Program 3b </title> <script type="text/javascript">

function disp(num) { var alphaExp = /^[0-9]+$/; if(!num.value.match(alphaExp)) { alert("hey Input should be positive numeric only "); return false; } var rev=0, n= Number(num.value); while(n!=0) { rem = n%10; rev = rev*10+rem; n = Math.floor(n/10); } alert("The "+ num.value +" in reverse is "+rev); }

</script> </head>

Page 9: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 8 Dept. of Computer Science and Engineering, HKBKCE

<body bgcolor="maroon" text="white"> <form> <h2> Enter a number :<input type="text" name="number" /> <input type="button" value="Click me!" onclick="disp(number)" / > <input type="reset" value="Reset" /> </h2> </form> </body> </html>

OUTPUT:

Page 10: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 9 Dept. of Computer Science and Engineering, HKBKCE

4. 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 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. <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml"> <head><title>USN validator</title> <script type='text/javascript'> var usn; function formValidator() { usn = document.getElementById('field1'); if(isCorrect(usn)) { return true; } return false; } function isCorrect(element1) { regexp=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ if(element1.value.length == 0) { alert("USN is empty"); element1.focus(); return false; } else if(!element1.value.match(regexp)) { alert(usn.value+"\n Entered USN is Wrong!!!,\n It should be in DUUDDUUDDD format"); element1.focus(); return false; } alert(usn.value+"\n USN is in correct format"); return true; } </script> </head> <body bgcolor="maroon" text="white"> <form onsubmit='return formValidator()'> <h2> Where D stands for digit and U stands for upper case alphabet <br /><br /> Enter your USN. in DUUDDUUDDD format : <input type='text' id='field1'/> <input type='submit' value='Check Field' /> </h2> </form> </body> </html>

Page 11: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 10 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

Page 12: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 11 Dept. of Computer Science and Engineering, HKBKCE

4. b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8) <?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head><title>USN and Sem Validator</title> <script type='text/javascript'> function formValidator() { var usn = document.getElementById('field1'); var sem = document.getElementById('field2'); if(isCorrect(usn)) { if(isPerfect(sem)) return true; } return false; } function isCorrect(element1) { var regexp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ if(element1.value.length == 0) { alert("US Number is empty"); element1.focus(); return false; } else if(!element1.value.match(regexp1)) { alert("Entered USN is Wrong!!!\n It should be in DUUDDUUDDD format"); element1.focus(); return false; } alert("USN is in correct format"); return true; } function isPerfect(element2) { var regexp2 = /^[1-8]$/ if(element2.value.length == 0) { alert("Semester Number is empty"); element2.focus(); return false; }

Page 13: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 12 Dept. of Computer Science and Engineering, HKBKCE

else if(!element2.value.match(regexp2)) { alert("Invalid Semester Number,Enter it again "); element2.focus(); return false; } alert("Semester Number is correct"); return true; } </script> </head> <body bgcolor="maroon" text="white"> <form onsubmit='return formValidator()'> <h2> Enter your USN. in DUUDDUUDDD format : <input type='text' id='field1'/> <BR/> Enter your Sem. in D[1-8] format : <input type='text' id='field2'/> <BR/> <input type='submit' value='Check Field' /> </h2></form></body></html> OUTPUT:

Page 14: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 13 Dept. of Computer Science and Engineering, HKBKCE

Page 15: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 14 Dept. of Computer Science and Engineering, HKBKCE

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.

<?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Lab program 5a</title> <style type="text/css"> .para1 {

width:300px; background-color:green; position:absolute; top:100px; left:200px; border-style:solid; z-index:0;

} .para2{

width:300px; background-color:BLUE; position:absolute; top:120px; left:220px; border-style:solid; z-index:0;

} .para3{

width:300px; background-color:purple; position:absolute; top:140px; left:240px; border-style:solid; z-index:0;

} </style> <script type="text/javascript"> var topLayer="1"; function mover(toTop) {

var oldTop=document.getElementById(topLayer).style; var newTop=document.getElementById(toTop).style; oldTop.zIndex="0"; newTop.zIndex="10"; topLayer=toTop;

}

Page 16: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 15 Dept. of Computer Science and Engineering, HKBKCE

</script> </head> <body><body bgcolor="maroon" text=”white”> <center><h2>Lab 5a Program demo shown below</h2>

<div class="para1" id="1" onmouseover="mover('1')"> Free and open source software, also F/OSS, FOSS, or FLOSS (free/libre/open source software) is software that is liberally licensed to grant the right of users to study, change, and improve its design through the availability of its source code. </div>

<div class="para2" id="2" onmouseover="mover('2')"> Big news for developers out there: Google has just announced the release of a new, open sourced programming language called Go.The company says that Go is experimental, and that it combines the performance of compiled language like C++ and dynamic language like Python. </div> <div class="para3" id="3" onmouseover="mover('3')"> Microsoft Corporation is a multinational computer technology corporation that develops, manufactures, licenses, and supports a wide range of software products for computing devices.Headquartered in Redmond, Washington, USA. </div> </center> </body> </html> OUTPUT:

Page 17: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 16 Dept. of Computer Science and Engineering, HKBKCE

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

<?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Lab5b</title> <style type="text/css"> .para1{

width:300px; background-color:green; position:absolute; top:100px; left:200px; border-style:solid; z-index:0;

} .para2{

width:300px; background-color:BLUE; position:absolute; top:120px; left:220px; border-style:solid; z-index:0; }

.para3{ width:300px;

background-color:purple; position:absolute;

top:140px; left:240px; border-style:solid; z-index:0; }

</style> <script type="text/javascript"> var topLayer="3"; var origPos; function mover(toTop,pos) {

var newTop=document.getElementById(toTop).style; newTop.zIndex="10"; topLayer=document.getElementById(toTop).id; origPos=pos;

}

Page 18: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 17 Dept. of Computer Science and Engineering, HKBKCE

function moveBack() {

document.getElementById(topLayer).style.zIndex=origPos; } </script></head> <body bgcolor="maroon" text=”white”> <center><h1> Lab5b demo shown below</h1> <div class="para1" id="1" onmouseover="mover('1','1')" onmouseout="moveBack()"> Free and open source software, also F/OSS, FOSS, or FLOSS (free/libre/open source software) is software that is liberally licensed to grant the right of users to study, change, and improve its design through the availability of its source code. </div> <div class="para2" id="2" onmouseover="mover('2','2')" onmouseout="moveBack()"> Big news for developers out there: Google has just announced the release of a new, open sourced programming language called Go.The company says that Go is experimental, and that it combines the performance of compiled language like C++ and dynamic language like Python. </div> <div class="para3" id="3" onmouseover="mover('3','3')" onmouseout="moveBack()"> Microsoft Corporation is a multinational computer technology corporation that develops, manufactures, licenses, and supports a wide range of software products for computing devices.Headquartered in Redmond, Washington, USA. </div></center></body></html> OUTPUT:

Page 19: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 18 Dept. of Computer Science and Engineering, HKBKCE

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.

6a.xml

<?xml version = "1.0"?> <?xml-stylesheet type = "text/css" href = "6a.css" ?> <students>

<VTU> <USN> 1HK07CS001 </USN> <name> Chulbul Panday</name> <college> HKBKCE </college> <branch> CSE</branch> <YOJ> 2007 </YOJ> <email> [email protected] </email>

</VTU> <VTU>

<USN> 1HK07CS002</USN> <name> Makhi Pandey</name> <college> HKBKCE </college> <branch> CSE </branch> <YOJ> 2007 </YOJ> <email> [email protected] </email>

</VTU> <VTU>

<USN> 1HK07CS003</USN> <name> Ched Singh</name> <college> HKBKCE </college> <branch> CSE </branch> <YOJ> 2007</YOJ> <email> [email protected] </email>

</VTU> </students> 6a.css Students { background-color: #ffffff; width: 100%; } VTU { display: block; margin-bottom: 30pt; margin-left: 0; } USN { color: #FF0000; font-size: 20pt; } name { color: #0000FF; font-size: 20pt; } college, branch, YOJ { display: block; color: #000000; margin-left: 20pt; } email { background-color: #ffff22; margin-left: 40pt; color: #336633; }

Page 20: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 19 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

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.

6b.xml <?xml version = "1.0"?> <?xml-stylesheet type = "text/xsl" href = "6b.xsl" ?> <students>

<USN> 1HK07CS001 </USN> <name> Chubul Panday</name> <college> HKBKCE </college> <branch> CSE</branch> <YOJ> 2007 </YOJ> <email> [email protected] </email>

</students> 6b.xsl <?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 = "students"> <html> <head> <title> Style sheet for Lab6b.xml </title> </head>

Page 21: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 20 Dept. of Computer Science and Engineering, HKBKCE

<body> <h2> Student Description </h2> <!-- Apply the following to all occurences of the VTU element --> <!--<xsl:for-each select="VTU">--> <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: bold; color: blue;"> E-Mail: </span> <xsl:value-of select = "email" /> <br /><br /> <!--</xsl:for-each>--> </body> </html> </xsl:template> </xsl:stylesheet> OUTPUT:

Page 22: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 21 Dept. of Computer Science and Engineering, HKBKCE

7. a) Write a Perl program to display various Server Information like Server Name, Server Software, Server protocol, CGI Revision etc 7a.pl #!/usr/bin/perl print "content-type:text/html","\n\n"; print "<html>\n"; print "<head> <title> About this server </title> </head>\n"; print "<body bgcolor=maroon text=white ><h1> About this server </h1>","\n"; print "<hr><h2>"; 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 "Server admin : ",$ENV {'SERVER_ADMIN'}, "<br>"; print "</h2><hr>\n"; print "</body></html>\n"; exit(0);

OUTPUT:

Page 23: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 22 Dept. of Computer Science and Engineering, HKBKCE

7. b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command executed.

7b.html <html>

<body bgcolor="maroon" text="white">

<form method="post" action="http://192.168.1.8/cgi-bin/fa/7b.pl" > <h1> Enter any UNIX command: <input type="text" name="com"><input type="submit" value="Submit"> </h1> </form> </body> </html> 7b.pl #!/usr/bin/perl use CGI':standard'; print "content-type:text/html \n\n"; print "<html><head><title>7b.pl </title></head>"; print "<body bgcolor=maroon text=white> <h2>"; $c=param('com'); system($c); print "<br><a href=http://192.168.1.8/fa1/7b.html>Back</a></h2>"; exit(0);

OUTPUT:

Page 24: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 23 Dept. of Computer Science and Engineering, HKBKCE

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.

8a.html <html> <body bgcolor="maroon" text="white"> <form method="post" action="http://192.168.1.8/cgi-bin/fa/8a.pl" > <h1> Enter user Name: <input type="text" name="com"><input type="submit" value="Submit"> </h1> </form> </body></html> 8a.pl #!/usr/bin/perl use CGI':standard'; print "content-type:text/html \n\n"; print "<html><head><title>8a.pl </title></head>"; print "<body bgcolor=maroon text=white>"; print "<h2>"; $p=param('com'); $count=4; @a=("Hello","Welcome","How R U","Good After noon"); $rnd=rand($count); print " Hi $p $a[$rnd]</h2></body></html>"; exit(0);

Page 25: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 24 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

Page 26: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 25 Dept. of Computer Science and Engineering, HKBKCE

8. b) Write a Perl program to keep track of the number of visitors visiting the web page and to display this count of visitors, with proper headings.

8b.pl #!/usr/bin/perl use CGI':standard'; print "content-type:text/html","\n\n"; print "<html><head><title>8b </title></head>"; print "<body bgcolor=maroon text=white>"; open(IN,"<visit"); $count=<IN>; close(IN); open(OUT,">visit"); $count++; print OUT $count; close(OUT); print "<center><b> you are the visitor number: $count </center> </b>"; print " </body></html>"; exit(0); OUTPUT:

Page 27: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 26 Dept. of Computer Science and Engineering, HKBKCE

9. Write a Perl program to display a digital clock which displays the current time of the server. 9.pl #!/usr/bin/perl $ap="AM"; ($s,$m,$h)=localtime(time); if($h>=12) {

$h=$h-12; $ap="PM"; } if($h==0) { $h=12; } $t=sprintf("%02d:%02d:%02d %s",$h,$m,$s,$ap); print"content-type:text/html\n\n"; print "<html> <head> <title>WEB SERVER TITLE</title> </head> "; #print "<meta http-equiv=refresh content=1> "; #Above line is used to update the server time automatically ....it’s commented print "<body bgcolor=maroon text=white> <br /><br />"; print "<h1> The Current Time Of WebServer is <br /><br />"; print "<table bgcolor=blue align=center border=5> "; print "<tr><th>$t</th></tr> "; print "</table> <h1></body> </html> "; OUTPUT: For updating the time, refresh the page manually.

Page 28: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 27 Dept. of Computer Science and Engineering, HKBKCE

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. 10.html <html> <head> <title>lab10</title></head> <body bgcolor="maroon" text="white"> <form action="http://192.168.1.8/cgi-bin/fa/10.pl"> <h2><center>Enter your information</center><hr></b> NAME:<input type="text" name="name"><br><br> AGE :<input type="text" name="age"><br><br> <input type="submit" value="Submit"></h2> </form> </body></html> 10.pl #!/usr/bin/perl -w use CGI ':standard'; use DBI; print "content-type:text/html\n\n"; $name=param("name"); $age =param("age"); $dbh=DBI->connect("DBI:mysql:mydb","root",""); $res1=$dbh->prepare("insert into age_info values('$name','$age')"); $res1->execute(); $res=$dbh->prepare("select * from age_info"); $res->execute(); print "<html><body bgcolor=maroon text=white>"; print "<h2><center><br>THE CONTENTS OF THE DATABASE TABLE IS SHOWN BELOW <hr> <br>"; print "<table border=1>"; print "<tr><td>NAME</td><td>Age</td></tr>"; while(@a=$res->fetchrow_array()) { print "<tr><td>$a[0]</td><td>$a[1]</td></tr>"; } print "</table></center></h2></body></html>";

Page 29: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 28 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

Page 30: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 29 Dept. of Computer Science and Engineering, HKBKCE

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.

11.php <html> <head> <title> 11 php </title> </head> <body bgcolor="maroon" text="white"> <h2> <?php $no_day=60*60*24*30+time(); setcookie("visit0",date("G:i:s a - m/d/y"),"$no_day"); if(isset($_COOKIE["visit0"])) { $lastvisit=$_COOKIE["visit0"]; print "<br /><center>Your last visit was ".$lastvisit; } else { print "<br />Your visiting first time"; } ?> </h2> </body> </html>

Page 31: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 30 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

:

Page 32: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 31 Dept. of Computer Science and Engineering, HKBKCE

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. 12.php <html> <head> <title> 12.php </title> </head> <body bgcolor="maroon" text="white"> <h2> <?php session_start(); if (!isset($_SESSION["count"])) { $_SESSION["count"] = 0; echo "<p>Counter initialized</p>\n"; } else { $_SESSION["count"]++; } print "<p>The counter is now : <b>$_SESSION[count]</b></p>"; print "<p>Refresh this page to increment counter</p>"; ?> </h2> </body> </html>

Page 33: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 32 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT:

Page 34: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 33 Dept. of Computer Science and Engineering, HKBKCE

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.

13a.html …………………………..Run only this file………………………….. <html> <head><title>13a html prog</title></head> <body bgcolor="maroon" text="white"> <h2><center><blink> Enter Student information</blink></center><hr> <FORM ACTION="13a.php" method="post" > Name: <INPUT TYPE=text NAME="name" /> <BR /> Address 1: <INPUT TYPE=text NAME="add1" /><BR /> Address 2: <INPUT TYPE=text NAME="add2" /><BR /> Email: <INPUT TYPE=text NAME="email" /><BR /><br /> <INPUT TYPE="submit" value="Submit" /> <INPUT TYPE="reset" value="Clear" /> </h2> </FORM> </body></html>

13a.php <html> <head><title>13a php prog</title></head> <body bgcolor="maroon" text="white"> <?php $dbh = mysql_connect("localhost", "root",""); mysql_select_db("test"); if(isset($_POST["name"])) { $name = $_POST["name"]; $add1 = $_POST["add1"]; $add2 = $_POST["add2"]; $email = $_POST["email"];

if($name != "" && $add1 != "" && $add2 != "" && $email != "") { $query = "INSERT INTO contact1 VALUES('$name','$add1','$add2','$email')"; $result = mysql_query($query); echo "<h2>Data stored successfully.......<br /<br />"; }

else { echo "<br /><h2>One of the field is empty.....<br />"; } } mysql_close($dbh); ?> <h2> To store more information -> <a href="13a.html">Click here</a><br /><br /> To Retrive student information -> <a href="13b.html">Click here</a> </h2></body></html>

Page 35: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 34 Dept. of Computer Science and Engineering, HKBKCE

13b.html <html> <head><title>13b html prog</title></head> <body bgcolor="maroon" text="white"> <h2> <form action="13b.php" method="post"><br /> Enter Student Name: <input type="text" name="name" /> <input type="submit" value="Submit" /> </form> Go Back -><a href="13a.php">Click here</a> </h2> </body></html>

13b.php <html> <head><title>13b php prog </title></head> <body bgcolor="maroon" text="white"> <h2><center><blink>Search Result</blink></center> <hr> <?php $link=mysql_connect("localhost","root",""); mysql_select_db("test"); $name=$_POST["name"]; if($name == "" ) { echo "<h2>Field is empty ....Enter the Name</h2>"; } else { print "Entered Name is: $name <br /><br />"; $var=mysql_query("SELECT * FROM contact1 WHERE name like '%$name%'"); echo"<table border size=1>"; echo"<tr> <th>Name</th> <th>Address 1</th> <th>Address 2</th> <th>E-mail</th></tr>"; while ($arr=mysql_fetch_row($var)) { echo "<tr> <td>$arr[0]</td> <td>$arr[1]</td> <td>$arr[2]</td> <td>$arr[3]</td></tr>"; } echo"</table>"; } mysql_close($link); ?> <h2>TO Retrive more information -><a href="13b.html">Click here </a></h2> </h2></body></html>

Page 36: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 35 Dept. of Computer Science and Engineering, HKBKCE

OUTPUT: 13a.html

Page 37: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 36 Dept. of Computer Science and Engineering, HKBKCE

Page 38: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 37 Dept. of Computer Science and Engineering, HKBKCE

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.

14a.html …………………………..Run only this file…………………………..

<html> <head><title>14a html prog</title></head> <body bgcolor="maroon" text="white"> <h2><center><blink> Enter Book information</blink></center><hr> <form action="14a.php" method="post" > Book Title: <input type="text" name="btitle" /><br /> Accno: <input type="text" name="accno" /><br /> Author: <input type="text" name="author" /><br /> Editor: <input type="text" name="editor" /><br /> Publisher: <input type="text" name="publisher" /><br /><br /> <input type="submit" value="Submit" /> <input type="reset" value="Clear" /> </form> </body> </html>

14a.php <html> <head><title>14a php prog</title></head> <body bgcolor="maroon" text="white"> <?php $dbh = mysql_connect("localhost", "root",""); mysql_select_db("test"); if(isset($_POST["btitle"])) { $btitle = $_POST["btitle"]; $accno = $_POST["accno"]; $author = $_POST["author"]; $editor = $_POST["editor"]; $publisher = $_POST["publisher"]; if($btitle != "" && $accno != "" && $author != "" &&

$editor != "" && $publisher != "") { $query = "INSERT INTO book VALUES('$btitle','$accno','$author','$editor','$publisher')"; $result = mysql_query($query); echo "<h2>Data stored successfully.......<br /<br />"; }

Page 39: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 38 Dept. of Computer Science and Engineering, HKBKCE

else { echo "<br /><h2>One of the field is empty.....<br />"; } } mysql_close($dbh); ?> <h2> To store more information -> <a href="14a.html">Click here</a><br /><br /> To Retrive Book information -> <a href="14b.html">Click here</a> </h2> </body> </html> 14b.html <html> <head><title>14b html prog</title></head> <body bgcolor="maroon" text="white"> <h2> <form action="14b.php" method="post"><br /> Enter Book Name: <input type="text" name="btitle" /> <input type="submit" value="Submit" /> </form> Go Back -><a href="14a.php">Click here</a> </h2> </body> </html> 14b.php <html> <head><title>14b php prog </title></head> <body bgcolor="maroon" text="white"> <h2><center><blink>Search Result</blink></center> <hr> <?php $link=mysql_connect("localhost","root",""); mysql_select_db("test"); $btitle=$_POST["btitle"];

if($btitle == "" ) { echo "<h2>Field is empty ....Enter the Name</h2>"; }

Page 40: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 39 Dept. of Computer Science and Engineering, HKBKCE

else { print "Entered Name is: $btitle <br /><br />"; $var=mysql_query("SELECT * FROM book WHERE btitle like '%$btitle%'"); echo"<table border size=1>"; echo"<tr> <th>Book Title</th> <th>Acc no</th> <th>Author</th> <th>Editor</th> <th>Publisher</th></tr>"; while ($arr=mysql_fetch_row($var)) { echo"<tr> <td>$arr[0]</td> <td>$arr[1]</td> <td>$arr[2]</td> <td>$arr[3]</td> <td>$arr[4]</td></tr>"; } echo"</table>"; } mysql_close($link); ?> <h2>TO Retrive more information -><a href="14b.html">Click here </a></h2> </h2></body></html> OUTPUT: 14a.html

Page 41: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 40 Dept. of Computer Science and Engineering, HKBKCE

Page 42: Web Programming Lab Manual

Web Programming Laboratory Manual

Prepared by: B. Fakruddin 41 Dept. of Computer Science and Engineering, HKBKCE