Scribd
Upload
4K views

Web Programming Lab Manual

This document contains programs and output for a Web Programming laboratory manual. It includes 4 programs: 1. A XHTML document with external CSS, lists, tables, borders and colors. 2. Two XHTML programs with JavaScript - one calculates Fibonacci numbers, the other displays numbers and squares in an alert. 3. Two XHTML programs with JavaScript functions - one finds the position of the first vowel in a string, the other reverses digits in a number. 4. Two programs that validate a USN (University Serial Number) and semester number using regular expressions.

Uploaded by

Jeevan Poonacha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
4K views

Web Programming Lab Manual

This document contains programs and output for a Web Programming laboratory manual. It includes 4 programs: 1. A XHTML document with external CSS, lists, tables, borders and colors. 2. Two XHTML programs with JavaScript - one calculates Fibonacci numbers, the other displays numbers and squares in an alert. 3. Two XHTML programs with JavaScript functions - one finds the position of the first vowel in a string, the other reverses digits in a number. 4. Two programs that validate a USN (University Serial Number) and semester number using regular expressions.

Uploaded by

Jeevan Poonacha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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]

06CSL78

Web Programming Laboratory

Programs

Manual
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>
Prepared by: B. Fakruddin 1 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

<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; }
Prepared by: B. Fakruddin 2 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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;
Prepared by: B. Fakruddin 3 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>
Prepared by: B. Fakruddin 7 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>
Prepared by: B. Fakruddin 9 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT:

Prepared by: B. Fakruddin

10

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

11

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

12

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

Prepared by: B. Fakruddin

13

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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; }
Prepared by: B. Fakruddin 14 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

15

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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; }
Prepared by: B. Fakruddin 16 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

17

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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 email 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 VTU USN name college, branch, YOJ email

{ background-color: #ffffff; width: 100%; } { display: block; margin-bottom: 30pt; margin-left: 0; } { color: #FF0000; font-size: 20pt; } { color: #0000FF; font-size: 20pt; } { display: block; color: #000000; margin-left: 20pt; } { background-color: #ffff22; margin-left: 40pt; color: #336633; }

Prepared by: B. Fakruddin

18

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>

Prepared by: B. Fakruddin

19

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

20

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

21

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

22

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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);
Prepared by: B. Fakruddin 23 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT:

Prepared by: B. Fakruddin

24

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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:

Prepared by: B. Fakruddin

25

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

26

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

27

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT:

Prepared by: B. Fakruddin

28

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

11.

Write a PHP program to store current date-time in a COOKIE and display the Last visited on datetime 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>

Prepared by: B. Fakruddin

29

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT:

Prepared by: B. Fakruddin

30

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>

Prepared by: B. Fakruddin

31

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT:

Prepared by: B. Fakruddin

32

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>

Prepared by: B. Fakruddin

33

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>
Prepared by: B. Fakruddin 34 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

OUTPUT: 13a.html

Prepared by: B. Fakruddin

35

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

Prepared by: B. Fakruddin

36

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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: Accno: Author: Editor: Publisher: <input type="text" name="btitle" /><br /> <input type="text" name="accno" /><br /> <input type="text" name="author" /><br /> <input type="text" name="editor" /><br /> <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 />"; }
Prepared by: B. Fakruddin 37 Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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>"; }

Prepared by: B. Fakruddin

38

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

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

Prepared by: B. Fakruddin

39

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

Prepared by: B. Fakruddin

40

Dept. of Computer Science and Engineering, HKBKCE

Web Programming Laboratory

Manual

Prepared by: B. Fakruddin

41

Dept. of Computer Science and Engineering, HKBKCE

You might also like