Dept of Computer Science & Engineering, CMRIT.

WEB PROGRAMMING LABORATORY (06CSL78)

INDEX
Sl. No.
1.

TITLE
Develop and demonstrate a XHTML document the use of external style sheet, ordered list, table, borders, padding, color and the <span> tag. Develop and demonstrate a XHTML file that includes JavaScript script for the following problems: a) Input: a number n obtained using prompt Output: The first n Fibonacci numbers. b) Input: A number n obtained using prompt Output: Numbers 1 to n and their squares, using alert. Develop and demonstrate a XHTML file that includes JavaScript script with functions for the following problems: a) Parameter: a string Output: Position in string of leftmost vowel. b) Parameter: a number Output: The number with its digits in reverse order.

Page No.
36

2.

7 11

3.

12 16

a) Develop and demonstrate, using JavaScript, a XHTML file that collects the
USN(the valid format is: A digit from 1 to 4 followed by two upper case characters followed by three digits; no embedded Spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert window must be produced when errors are detected. b) Modify the above program to get the current semester also(number between 1 and 8). a) Develop and demonstrate using JavaScript script, a XHTML document that contains three short paragraphs Of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom.

4.

17 23

5.

24 29

P a g e |1

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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, College, branch, 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. b) Create an XSLT stylesheet for one student element of the above document and use it to create a display of that element. a) W rite a Perl program to display various server information like Server Name, Server Software, Protocol, CGI Revision, etc. b) Write a Perl program to accept a UNIX command from an HTML form and to display the output of the command executed. a) Write a Perl program to accept the user name and to display a greeting message randomly chosen from a list of 4 greeting messages. 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. Write a Perl program to display a digital clock which displays the current time of the server. 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. 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. 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. Create a XHTML form with Name, Address Line 1, Address Line 2, and Email text fields. On submitting, store the values in MySQL table. Retrieve and display the data based on Name. 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.

30 37

7.

38 42

8.

43 47

9.

48 50

10.

51 53

11.

54 56

12.

57 59

13.

60 63

14.

64 67

P a g e |2

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 1 Develop and demonstrate a XHTML document the use of external style sheet, ordered list, table, borders, padding, color and the <span> tag.

Required Steps
Create an external style sheet with classes defined for the span tag and <ol>. In the classes for the <span> tag values can be given for attributes such as color and font weight. The type of ordering (such as numeric or letters) can be specified for the ordered list, using the list-style-type attribute. A link to this style sheet is created in the xhtml document. Also, a table is created using the <table> tag. Properties of the table such as padding and border are defined. Headers and data are entered into the table using the <th> and <td> tags.

P a g e |3

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
<?xml version="1.0" encoding="utf-8"?> <!doctype http public "-//w3c//dtd xhtml 1.1 en" "http://www.w3c.org/tr/xhtml/dtd/xhtml11.dtd"> <html xmlns="http://w3c.org//1999/xhtml"> <head><title>program 1</title> <link rel="stylesheet" type="text/css" href="p1.css"> </head> <body><p><span class="blue">Paragraph with class Blue</span> <br /> <span class="green">Paragraph with class Green</span> <table border="border" cellpadding="10"> <caption>Name List</caption> <tr><th colspan="4">List of Names</th></tr> <tr><th colspan="2">CSE</th><th colspan="2"> ECE</th></tr> <tr><th>Sec A</th><th>Sec B</th><th> Sec A</th><th>Sec B</th></tr> <tr><td>a1</td><td>b1</td> <td>a2</td><td>b2</td></tr> </table> <ol><li>CSE <ol><li>Sec A <ol><li>Meenakshi</li><li>Asma</li></ol> </li> <li>Sec B <ol><li>Adam</li><li>Sandler</li></ol> </li> </ol> </li> <li>ECE <ol><li>Sec A <ol><li>Anne</li><li>Amy</li></ol> </li> <li>Sec B <ol><li>Peter</li><li>Sam</li></ol> </li> </ol> </li> </ol> </p></body> </html>
P a g e |4

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

EXTERNAL STYLE SHEET p1.css: span.blue{color:lightskyblue;font-weight:bold} span.green{color:darkolivegreen;font-weight:bold} ol{list-style-type:upper-roman} ol ol{list-style-type: upper-alpha} ol ol ol{list-style-type: decimal;}

P a g e |5

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT
Paragraph with class Blue Paragraph with class Green Name List List of Names CSE Sec A a1 Sec B b1 1. CSE 1. Sec A 1. 2. 2. Sec B 1. 2. 2. ECE 1. Sec A 1. 2. 2. Sec B 1. 2. ECE Sec A a2 Sec B b2

Meenakshi Asma Adam Sandler

Anne Amy Peter Sam

P a g e |6

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 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. b) Input: A number n obtained using prompt Output: Numbers 1 to n and their squares, using alert.

Required Steps
2a: Javascript script is embedded within the body of the XHTML file. The script contains the code to accept the value of n using a prompt. The first n Fibonacci numbers are then calculated using a do while loop. Each number is displayed in the browser window, in order.

2b: Javascript script is embedded within body of XHTML document, which accepts the value of n using a prompt. In a while loop that runs from 1 to n, for each value, the number and its square are displayed using the alert message box.

P a g e |7

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
2a: <?xml version="1.0" encoding="utf-8"?> <!doctype http public "-//w3c//dtd xhtml 1.1 en" "http://www.w3.org/tr/xhtml/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>lab2a</title></head> <body> <script type="text/javascript"> <!-var n=prompt("Enter the value of n"," "); var a=0; var b=1; var res=1; if(n<0) { alert("you have entered a negetive number!!"); } document.write("Fibonacci Series: <br />"); document.write(a,"<br /> " ); do { document.write(res,"<br />"); res=a+b; a=b; b=res; n--; }while(n>1); --> </script> </body> </html>

P a g e |8

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

Fibonacci Series: 0 1 1 2 3 5 8 13 21 34

P a g e |9

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
2b: <?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>lab2b</title></head> <body> <script type="text/javascript"> <!-var n=prompt("Enter the value of n(upto which squares have to be found): "," "); var a=1; if(n<0) alert("you have entered a negetive number!!!"); do { alert("the square of " +a+ " is " +a*a); a++; }while(a<=n); --> </script> </body> </html>

P a g e | 10

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 11

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 3 Develop and demonstrate a XHTML file that includes JavaScript script with functions for the following problems: a) Parameter: a string Output: Position in string of leftmost vowel. b) Parameter: a number Output: The number with its digits in reverse order.

Required Steps
3a: Javascript is embedded within the XHTML file. It accepts a sting from the user through a prompt. The string is displayed and is then scanned character by character. When the first vowel is found, it is displayed and the script terminates. If no vowel is found, an appropriate message is displayed. 3b: Javascript is embedded within the XHTML file. The number to be reversed is accepted through a prompt. The number is successively divided by 10 until the quotient is 0. The remainder of each division is added to the product of the previously obtained remainder(s) and 10. The number thus obtained is the reverse of the original number.

P a g e | 12

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
3a:

<?xml version="1.0" encoding="utf-8"?> <!doctype http public= "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vowel Position</title> </head> <body> <script type="text/javascript"> <!-var str=prompt("Enter a string:"); document.write("String is: "+str+"<br />"); var i; var f=0; var l=str.length; for(i=0;i<l;i++) { if(str[i]=='a' || str[i]=='e' || str[i]=='i' || str[i]=='o' || str[i]=='u') { f=1; document.write("The leftmost vowel is:"+str[i]+"<br />"); break; } } if(f==0) { document.write("No vowels found"); } --> </script> </body> </html>

P a g e | 13

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

String is: happy The leftmost vowel is:a

String is: sky No vowels found

P a g e | 14

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
3b: <?xml version="1.0" encoding="utf-8"?> <!doctype http public="-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <title>reverse</title> </head> <body> <script type="text/javascript"> <!-var n=prompt("Enter a number: "); var d=0; var r=0; document.write("Number entered is: "+n+"<br />"); while(n!=0) { d=n%10; n=parseInt(n/10); r=(r*10)+d; } document.write("<br /> Reverse number is: "+r); --> </script> </body> </html>

P a g e | 15

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

Number entered is: 123 Reverse number is: 321

P a g e | 16

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 4 a) Develop and demonstrate, using JavaScript, a XHTML file that collects the USN (the valid format is: A digit from 1 to 4 followed by two upper case characters followed by three digits; no embedded Spaces allowed) of the user. Event handler must be included for the form element that collects this information to validate the input. Messages in the alert window must be produced when errors are detected. b) Modify the above program to get the current semester also (number between 1 and 8).

Required Steps
4a: The USN is accepted through a text box. When the submit button is clicked, the javascript function for checking validity of the USN is called. The entered USN is compared with the valid pattern defined by a regular expression. If there is a mistake, an alert message is displayed saying so, and the USN typed in the textbox is highlighted so that the user can enter the right USN.

4b: In addition to the above, the semester is also accepted. If the value entered is greater than 8, or lesser than 1, an alert message is displayed saying the same. The value is then highlighted so that the user can enter the correct value.

P a g e | 17

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

4a: <?xml version="1.0" encoding="utf-8"?> <!doctype http public="-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <script type="text/javascript"> <!-function checkusn() { var myusn=document.getElementById("usn"); var pos=myusn.value.search(/^[1-4][A-Z] [A-Z]\d{2}[A-Z][A-Z]\d{3}$/); if(myusn.value==" ") { alert("enter usn "); myusn.focus(); myusn.select(); return false; } else if(pos!=0) { alert("Enter the correct format"); myusn.focus(); myusn.select(); return false; } else return true; } --> </script> </head> <body> <h3>USN validation</h3><br /> <br /> <form action=" " id="myform"> <p><label>USN:<input type="text" name="text" id="usn" /></label>
P a g e | 18

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

<br /> <input type="submit" name="submit" value="SUBMIT" /> </p> </form> <script type="text/javascript"> <!-document.getElementById("myform"). onsubmit= checkusn; --> </script> </body> </html>

P a g e | 19

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 20

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
4b: <?xml version="1.0" encoding="utf-8"?> <!doctype http public="-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/html"> <head> <script type="text/javascript"> <!-function checkusn() { var myusn=document.getElementById("usn"); var pos=myusn.value.search(/^[1-4][A-Z] [A-Z]\d{2}[A-Z][A-Z]\d{3}$/); var mysem=document.getElementById("sem"); var pos1=mysem.value.search(/^[1-8]$/); if(myusn.value==" ") { alert("enter usn "); myusn.focus(); myusn.select(); return false; } else if(pos!=0) { alert("Enter the correct USN format"); myusn.focus(); myusn.select(); return false; } if(mysem.value==" ") { alert("Enter a sem "); mysem.focus(); mysem.select(); return false; } else if(pos1!=0) { alert("Enter the correct sem"); mysem.focus();
P a g e | 21

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

mysem.select(); return false; } else return true; } --> </script> </head> <body> <h3>USN & SEM validation</h3><br /> <br /> <form action=" " id="myform"> <p><label>USN:<input type="text" name="text" id="usn"/></label> <br /> <label>SEM:<input type="text" name="text" id="sem" /></label> <br /> <input type="submit" name="submit" value="SUBMIT" /> </p> </form> <script type="text/javascript"> <!-document.getElementById("myform").onsubmit= checkusn; --> </script> </body> </html>

P a g e | 22

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 23

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 5 a) Develop and demonstrate using JavaScript script, a XHTML document that contains three short paragraphs Of text, stacked on top of each other, with only enough of each showing so that the mouse cursor can be placed over some part of them. When the cursor is placed over the exposed part of any paragraph, it should rise to the top to become completely visible. b) Modify the above document so that when a paragraph is moved from the top stacking position, it returns to its original position rather than to the bottom.

Required Steps

The javascript script embedded in the XHTML file consists of a stack function. The id of the paragraph that is currently on top is stored in a variable toplayer. The id of the paragraph that has been selected is passed as an argument to the function. Using the getElementById method, the z-Index(depth factor) of the paragraph that was previously on top is set to 0 and the z-Index of the newly selected paragraph is set to 10. The toplayer variable is updated to hold the id of the paragraph that is currently on top. Within the XHTML body, the paragraphs are defined. The element attributes are defined using an external style sheet. The stack function is called whenever the mouse cursor is placed over any of the paragraphs(onmouseover tag attribute is used).

P a g e | 24

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

5a: <?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>Paragraphs</title> <link rel="stylesheet" type="text/css" href="5.css" /> <script type="text/javascript"> <!-var toplayer="layer4"; function stack(toTop) { var oldtop=document.getElementById(toplayer).style; var newtop=document.getElementById(toTop).style; oldtop.zIndex="0"; newtop.zIndex="10"; toplayer=toTop; } --> </script> </head> <body> <h1>Program to demonstrate stack</h1> <div class="ls1" id="layer1" onmouseover="stack('layer1')"> <b>Paragraph1</b> </div> <div class="ls2" id="layer2" onmouseover="stack('layer2')"> <b>Paragraph2</b> </div> <div class="ls3" id="layer3" onmouseover="stack('layer3')"> <b>Paragraph3</b> </div> <div class="ls4" id="layer4" onmouseover="stack('layer4')"> <b>Paragraph4</b> </div> </body> <html>

P a g e | 25

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

5.css: .ls1{border:solid thick black; padding:len; width:500px; background-color:red; position:absolute; top:100px; left:200px;} .ls2{border:solid thick black; padding:len; width:500px; background-color:yellow; position:absolute; top:115px; left:250px;} .ls3{border:solid thick black; padding:len; width:500px; background-color:orange; position:absolute; top:120px; left:300px;} .ls4{border:solid thick black; padding:len; width:500px; background-color:green; position:absolute; top:125px; left:350px;}

P a g e | 26

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 27

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
5b: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns: "http://www.w3.org/1999/xhtml"> <head> <title>Paragraphs</title> <link rel="stylesheet" type="text/css" href="5.css" /> <script type="text/javascript"> <!-var toplayer="layer4"; var origpos; function stack(toTop) { var newtop=document.getElementById(toTop).style; newtop.zIndex="10"; toplayer=toTop; } function MoveBack() { document.getElementById(toplayer).style.zIndex=origpos; } --> </script> </head> <body> <h1>Program to show stack implementation</h1> <div class="ls1" id="layer1" onmouseover="stack('layer1')"> <b>Paragraph1</b> </div> <div class="ls2" id="layer2" onmouseover="stack('layer2')"> <b>Paragraph2</b> </div> <div class="ls3" id="layer3" onmouseover="stack('layer3')"> <b>Paragraph3</b> </div> <div class="ls4" id="layer4" onmouseover="stack('layer4')"> <b>Paragraph4</b> </div> </body> </html>
P a g e | 28

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 29

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 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, College, branch, 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. b) Create an XSLT stylesheet for one student element of the above document and use it to create a display of that element.

Required Steps

6a: Create an XML document with the details of the students. User defined tags can be used for each detail such as <usn>, <name>, etc. Values can be given for the attributes of each of these tags in an external style sheet. 6b: An XML file is created for student details as in 6a. From the set of students, one of them is selected based on the usn specified. This is done in the xsl file. The details of the selected student are displayed in a table.

P a g e | 30

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
6a:

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="e6a.css"?> <studentlist> <student> <usn>1CR06CS001</usn> <name>Ann</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>ann@gmail.com</emailid> </student> <student> <usn>1CR06CS005</usn> <name>Daniel</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>daniel@gmail.com</emailid> </student> <student> <usn>1CR06CS010</usn> <name>Harry</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>harry@gmail.com</emailid> </student> </studentlist>

P a g e | 31

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

e6a.css: student{display:block;margin-top:15px;color:blue;} usn{display:block;color:red;font-weight:bold} name{display:block;color:brown;} college{display:block;color:blue;font-weight:bold} branch{display:block;color:maroon;} joindate{display:block;color:magenta;font-weight:bold} emailid{display:block;color:green;}

P a g e | 32

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

1CR06CS001 Ann CMRIT Computer Science 2006 ann@gmail.com 1CR06CS005 Daniel CMRIT Computer Science 2006 daniel@gmail.com 1CR06CS010 Harry CMRIT Computer Science 2006 harry@gmail.com

P a g e | 33

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
6b: <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="s2.xsl"?> <document> <studentlist> <student> <usn>1CR06CS001</usn> <name>Ann</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>ann@gmail.com</emailid> </student> <student> <usn>1CR06CS005</usn> <name>Daniel</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>daniel@gmail.com</emailid> </student> <student> <usn>1CR06CS010</usn> <name>Harry</name> <college>CMRIT</college> <branch>Computer Science </branch> <joindate>2006</joindate> <emailid>harry@gmail.com</emailid> </student> </studentlist> </document>

P a g e | 34

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

s2.xsl: <?xml version="1.0" encoding="ISO-8859-1" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="document"> <html> <head> <title>Title</title> </head> <body> <table> <tr> <td valign="top"> <xsl:apply-templates select="studentlist" /> </td> </tr> </table> </body> </html> </xsl:template> <xsl:key name="student-by-usn" match="student" use="usn" /> <xsl:template match="studentlist"> <table border="1"> <xsl:for-each select="key('student-by-usn', '1CR06CS001')"> <tr> <td> <xsl:value-of select="usn" /> </td> <td> <xsl:value-of select="name" /> </td> <td> <xsl:value-of select="college" /> </td> <td> <xsl:value-of select="branch" /> </td>
P a g e | 35

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

<td> <xsl:value-of select="joindate" /> </td> <td> <xsl:value-of select="emailid" /> </td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>

P a g e | 36

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

1CR06CS001 Ann CMRIT Computer Science 2006 ann@gmail.com

P a g e | 37

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 7 a) W rite a Perl program to display various server information like Server Name, Server Software, Protocol, CGI Revision, etc. b) Write a Perl program to accept a UNIX command from an HTML form and to display the output of the command executed.

Required Steps

7a: Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create a CGI file in the directory /var/www/cgi-bin. Within the file, write the commands to print the details about the server, using the associated environment variable. After checking for errors, run the program in the browser.

7b: Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create the html file for the front end in the directory /var/www/html. The html file should display a text box where the command may be typed and a submit button to execute the command. Create the cgi file in the directory /var/www/cgi-bin. The cgi file should retrive the command from the browser, execute it and display the result on the browser.

P a g e | 38

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
7a: CGI file

#!/usr/bin/perl use strict; use CGI':standard'; print header(), start_html(-bgcolor=>'silver'), hr(), "<h2>SERVER INFORMATION</h2>", hr(), "Serevr Name:",$ENV{'SERVER_NAME'}, br(), "Server Software:",$ENV{'SERVER_SOFTWARE'}, br(), "Server Protocol:",$ENV{'SERVER_PROTOCOL'}, br(), "server port:",$ENV{'SERVER_PORT'}, br(), "CGI Revision",$ENV{'GATEWAY_INTERFACE'}, br(), end_html();

P a g e | 39

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 40

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

7b: HTML file <html> <body> <hr> <h2>UNIX COMMAND</h2> <form action="/cgi-bin/7b.cgi"> <input type="text" name="cmd"> <input type="submit" value="submit"> </form> </body> </html> CGI file #!/usr/bin/perl use strict; use CGI':standard'; my $cmd=param('cmd'); chomp($cmd=`/bin/$cmd`); print header(), start_html(-bgcolor=>'pink','RESULT'), hr(), "<h2>Executing command</h2>", hr(), br(), "$cmd"||"INVALID COMMAND", br(), hr(), end_html();

P a g e | 41

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 42

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PROGRAM 8 a) Write a Perl program to accept the user name and to display a greeting message randomly chosen from a list of 4 greeting messages. 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.

Required Steps
8a: Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create a html file in the directory /var/www/html. The html file should display a textbox to accept the user name, and a list of greetings. Create a CGI file in the directory /var/www/cgi-bin. Within the file, write the commands to retrieve the user name and greeting from the browser and display the greeting with the user name. After checking for errors, run the program in the browser.

8b: Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create the html file for the front end in the directory /var/www/html. Create the cgi file in the directory /var/www/cgi-bin. This folder should also contain a text file with initial value 0. The cgi file should contain the commands to retrieve the content of the file (the count), update the file and display the count in the browser.

P a g e | 43

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
8a: HTML file

<html> <head><title>Greeting message</title></head> <body bgcolor=pink> <hr> <h2>Greeting</h2> <hr><br> <form name=hi action="/cgi-bin/8a.cgi" method="post"> Enter ur name <input type="text" name="name" size=20><br><br> Greeting type: <select name="greet" size="4" multiple> <option>Good morning</option> <option>Good after noon</option> <option>Good evening</option> <option>Good night</option> </select> <input type="submit" value="submit"><br><hr> </form> </html>
CGI file

#!/usr/bin/perl use strict; use CGI':standard'; my $name; my $greeting; $name=param('name'); $greeting=param('greet'); print header(), start_html(-bgcolor=>'orange','RESULT'), hr(), "<h2>Displaying Greeting message</h2>", hr(), br(), "$greeting $name", hr(), end_html();
P a g e | 44

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 45

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
8b: HTML file <html> <body bgcolor=red> <hr><h1>VISITORS COUNT</h1> <form action="/cgi-bin/8b.cgi"> <br><input type="submit" value="submit"><br></form> </body> </html> CGI file #!/usr/bin/perl use strict; use CGI':standard'; my $line; my $count; open(FH,'<test2.txt')or die"can't open"; while($line=<FH>) { $count=$line; } close(FH); $count++; $line=$count; open(FH,'>test2.txt')or die"cant't"; while($count) { print FH"$count\n"; $count=0; } close(FH); print header(), start_html(-bgcolor=>'gray'), hr(), "<h1>Visitors count</h1>", hr(),br(),br(), "you r the $line user", hr(),br(),br(), end_html();
P a g e | 46

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

P a g e | 47

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps

Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create a html file in the directory /var/www/html. The html file should contain a button that the user can click to view the digital clock. Create a CGI file in the directory /var/www/cgi-bin. Within the file, write the commands to obtain the current time, using the appropriate function, determine whether it is AM or PM and then display the time in the browser. After checking for errors, run the program in the browser.

P a g e | 48

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

HTML file

<html> <head><title>Displaying Digital Clock</title> </head><body bgcolor=pink> <form action="/cgi-bin/9.cgi"> <hr><br><b><center>DIGITAL CLOCK</center></b> <hr><br> <center><input type="submit" value="DISLAY CLOCK"><br> <br><hr> </center></form> </body></html>

CGI file

#!/usr/bin/perl use strict; use CGI':standard'; my $ampm; my($sec,$min,$hour)=localtime(time); if($hour>12) { $hour=$hour-12; $ampm="PM"; }else { $ampm="AM"; } print header(), start_html(-bgcolor=>'pink'), <<EOHTML; <head> <META HTTP-EQUIV="Refresh" CONTENT="1"> <center><hr><b><h1>$hour:$min:$sec:$ampm</h1><b></center><hr> </head> EOHTML end_html();

P a g e | 49

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

On clicking the DISPLAY CLOCK button, a new page with time opens:

P a g e | 50

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps

Go to /etc/init.d and start http using the command ./httpd start. Also start mysqld using the command ./mysqld start. Check whether httpd is working by opening http://localhost/ using the browser. In MySQL, select the appropriate database and create a table to hold the name and age of the user. Create a html file in the directory /var/www/html. The html file should display the front end, which lets the user enter name and age information, and submit it. Create a CGI file in the directory /var/www/cgi-bin. The CGI script should retrieve the name and age values from the front end, connect to the database, prepare the appropriate query and insert the values into the table. Also retrieve all the rows from the table, including the one just inserted and display it to the user in a table. After checking for errors, run the program in the browser.

P a g e | 51

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

HTML file

<html> <body> <form action="/cgi-bin/a10.cgi"> Name : <input type="text" name="name"> <br> Age :<input type="text" name="age"> <br> <input type="submit" value="Submit"> </form> </html>

CGI file

#! /usr/bin/perl print "Content-type: text/html\n\n"; print "<HTML><TITLE>Result of the insert operation </TITLE>"; use CGI ':standard'; use DBI; $dbh=DBI->connect("DBI:mysql:student","root",""); $name=param("name"); $age=param("age"); $qh=$dbh->prepare("insert into user values('$name','$age')"); $qh->execute(); $qh=$dbh->prepare("Select * from user"); $qh->execute(); print "Table info: <br>" print "<table border size=1><tr><th>Name</th><th>Age</th></tr>"; while ( ($name,$age)=$qh->fetchrow()) { print "<tr><td>$name</td><td>$age</td></tr>"; } print "</table>"; $qh->finish(); $dbh->disconnect(); print"</HTML>";

P a g e | 52

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

On clicking submit, a new page with the following table opens.

P a g e | 53

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps

Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create a php file in the directory /var/www/html/php. The php file should retrieve the date and time of the previous access from the cookie, if it has been set. It should obtain the current date and time and store it in the cookie, so that it can be retrieved the next time the web page accessed. The date and time of last access should then be displayed to the user. After checking for errors, run the program in the browser.

P a g e | 54

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
PHP file

<? // get current date information as associative array if(isset($_COOKIE['Datee'])) { $cookiedate = $_COOKIE['Datee']; } $todayh = getdate(); $d = $todayh[mday]; $m = $todayh[mon]; $y = $todayh[year]; $hr = $todayh[hours]; $mi = $todayh[minutes]; $se = $todayh[seconds]; $datestring ="$d-$m-$y, $hr:$mi:$se"; setcookie("Datee",$datestring); print "Program for creating and displaying cookie"; print"<br>"; echo "<br>Hello, ".$cookiedate."! last visited!"; print"<br>"; ?>

P a g e | 55

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

On refreshing:

P a g e | 56

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps

Go to /etc/init.d and start http using the command ./httpd start. Check whether httpd is working by opening http://localhost/ using the browser. Create a php file in the directory /var/www/html/php. The php file should check whether a SESSION variable is set, and print the count on the browser if it is. The count vaue should then be incremented to include the current visit also. If the variable has not been set, a message should be displayed to the user, indicating that the session did not exist until now. The variable should then be initialized to 1 since it is the first visit. After checking for errors, run the program in the browser.

P a g e | 57

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION

PHP file

<?php session_start(); if(isset($_SESSION['count'])) { print "Your session count: ".$_SESSION['count']. "<br>"; $_SESSION['count']++; } else { $_SESSION['count'] = 1; print "Session does not exist"; } ?>

P a g e | 58

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT
When page is first opened:

On Refresh:

On refreshing again:

P a g e | 59

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps
Go to /etc/init.d and start http using the command ./httpd start. Also start mysqld using the command ./mysqld start. Check whether httpd is working by opening http://localhost/ using the browser. In MySQL, select the appropriate database and create a table to hold the name, address(in 2 lines) and email-id of the user. Create a html file in the directory /var/www/html. The html file should display the front end, which lets the user enter name, address and email-id, and submit it. Create a php file in the directory /var/www/html/php. The php file should retrieve the details entered by the user. It should then insert these details into the corresponding table. The row(s) corresponding to the name entered in the search field should then be displayed to the user. After checking for errors, run the program in the browser.

P a g e | 60

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
HTML file <html> <head> <title> Database Access using PHP </title> </head> <body> <form action="/php/prg13.php" method="post"> ID: <input type="text" name="id" /><br /> Name: <input type="text" name="name" /><br /> Address1: <input type="text" name="addr1" /><br /> Address2: <input type="text" name="addr2" /><br /> Email: <input type="text" name="email" /><br /><br /> Enter the student's name to retreive data: <input type="text" name="sname" /><br /> <input type="submit" value="submit"> </form> </body </html>

P a g e | 61

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PHP file

<?php $id=$_POST['id']; $name=$_POST['name']; $addr1=$_POST['addr1']; $addr2=$_POST['addr2']; $email=$_POST['email']; $sname=$_POST['sname']; mysql_connect('localhost','root', ''); mysql_select_db("student") or die("Unable to select database"); $insertquery="INSERT INTO personinfo VALUES('$id','$name','$addr1','$addr2','$email')"; mysql_query($insertquery); $selectquery="SELECT * FROM personinfo where Name='$sname'"; $result=mysql_query($selectquery); $numrows=mysql_numrows($result); print "<table border size=1> <tr><th>ID</th><th>Name</th> <th>Address1</th><th>Address2</th><th>Email</th></tr>"; $rownum=0; while($rownum<$numrows) { $row=mysql_fetch_array($result); print "<tr><td>".$row['ID']."</td><td>".$row['Name']."</td> <td>".$row['Address1']."</td><td>".$row['Address2']."</td> <td>".$row['email']."</td></tr>"; $rownum++; } print "</table>"; mysql_close(); ?>

P a g e | 62

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

Details of student whose name is Adam is retrieved:

P a g e | 63

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

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

Required Steps
Go to /etc/init.d and start http using the command ./httpd start. Also start mysqld using the command ./mysqld start. Check whether httpd is working by opening http://localhost/ using the browser. In MySQL, select the appropriate database and create a table to hold the title, author, edition and publisher of the book. Create a html file in the directory /var/www/html. The html file should display the front end, which lets the user enter title, author, edition, and publisher of the book and submit it. Create a php file in the directory /var/www/html/php. The php file should retrieve the details entered by the user. It should then insert these details into the corresponding table. The row(s) corresponding to the book title entered in the search field should then be displayed to the user. After checking for errors, run the program in the browser.

P a g e | 64

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

CODE SECTION
HTML file <html> <head> <title> Accessing Book Database </title> </head> <body> <form action="/php/prg14.php" method="post"> Accession Number: <input type ="text" name="accno" /> <br /> Title: <input type ="text" name="title" /><br /> Authors: <input type ="text" name="author" /><br /> Edition: <input type ="text" name="edition" /><br /> Publisher: <input type ="text" name="publish" /><br /> Search for a book with Title: <input type ="text" name="search" /><br /> <input type="submit" /> <input type="reset" /> </form> </body> </html>

P a g e | 65

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

PHP file

<?php $accno=$_POST['accno']; $title=$_POST['title']; $author=$_POST['author']; $edition=$_POST['edition']; $publish=$_POST['publish']; $search=$_POST['search']; mysql_connect('localhost','root', 'uma'); mysql_select_db("BookDealer") or die("Unable to select database"); $insertquery="INSERT INTO Bookinfo VALUES('$accno','$title','$author','$edition','$publish')"; mysql_query($insertquery); $selectquery="SELECT * FROM Bookinfo where title like '%$search%'"; $result=mysql_query($selectquery); $numrows=mysql_numrows($result); if ($numrows==0) die("Sorry No matches found"); else { print "<table border size=1> <tr><th>AccessionNo</th> <th>Title</th> <th>Authors</th><th>Edition</th> <th>Publications</th></tr>"; while($row=mysql_fetch_row($result)) { print "<tr><td>$row[0]</td><td>$row[1]</td> <td>$row[2]</td><td>$row[3]</td><td>$row[4]</td></tr>"; } print "</table>"; } mysql_close(); ?>

P a g e | 66

Signature of the Staff: Date:

Dept of Computer Science & Engineering, CMRIT. WEB PROGRAMMING LABORATORY (06CSL78)

OUTPUT

On submitting, the details of the book titled Java are displayed:

P a g e | 67

Signature of the Staff: Date: