Web Programming Lab Manual
Web Programming Lab Manual
06CSL78
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
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
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
Manual
} } else alert("No Proper Input"); </script> </head> <body bgcolor="maroon" text="white" > </body> </html> OUTPUT:
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:
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:
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
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:
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
Manual
OUTPUT:
10
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; }
11
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:
12
Manual
13
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
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:
15
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
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:
17
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> chulbul_pandey@gmail.com </email> </VTU> <VTU> <USN> 1HK07CS002</USN> <name> Makhi Pandey</name> <college> HKBKCE </college> <branch> CSE </branch> <YOJ> 2007 </YOJ> <email> makhi_pandey@gmail.com </email> </VTU> <VTU> <USN> 1HK07CS003</USN> <name> Ched Singh</name> <college> HKBKCE </college> <branch> CSE </branch> <YOJ> 2007</YOJ> <email> ched_singh@yahoo.com </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; }
18
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> chulbul_pandey@gmail.com </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>
19
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:
20
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:
21
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:
22
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
Manual
OUTPUT:
24
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:
25
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.
26
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>";
27
Manual
OUTPUT:
28
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>
29
Manual
OUTPUT:
30
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>
31
Manual
OUTPUT:
32
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>
33
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
Manual
OUTPUT: 13a.html
35
Manual
36
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
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>"; }
38
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
39
Manual
40
Manual
41