06csl78 Web Lab | Cascading Style Sheets | Html

Laboratory Manual

Web Programming Lab (06CSL78)

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

Department of Computer Science & Engineering
Academic Year 2011-2012 (Odd Semester)
SESSION: JULY 2011 – DECEMBER 2011

VII SEMESTER

WEB PROGRAMMING LAB MANUAL

SUBJECT CODE: 0CSL78 Faculty: Mr. Sajeevan K , Mr. Prabodh C P & Mr. Hanumant Pujar

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

CS / IS

-1

Laboratory Manual

Web Programming Lab (06CSL78)

Note:
on lots.

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

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

Objective: - To learn how to create a simple web page using html along with the usage of style sheets,
lists, creation or tables with borders, padding and colors. Procedure:1. Open a new file using Notepad. 2. Rename the file as pgm1.html (Extension for html programs is .html ) 3. Create a file (external cascading style sheet) by name Lab1.css where the font, size, colors etc.. are specified. The style type should be set to “text/css” under the <head> tag. 4. The pgm1.css file should be included in pgm1.html file in the <link href ….> tag 5. In the <body> tag of the html document. Create an Ordered list using <ol> tag. Also create sublists under the main list as shown below : 1. Dept of CSE i. I Sem ii. III Sem iii. V Sem iv. VII Sem 2. Dept of ISE i. I Sem ii. III Sem iii. V Sem iv. VII Sem Create a Table which shows the Room No of the class/section and the strength of the students in each class/section of the departments, CSE and ISE. Fill the table using an appropriate colour and specify the thickness of the border for the table. Make the website neat and attractive with relevant text and pictures Use suitable tags wherever necessary.

6. 7. 8. 9.

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

CS / IS

-2

Laboratory Manual

Web Programming Lab (06CSL78)

CSS Style Sheet Source Code: (Lab1.css)
p /* Paragraph */ { font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; word-spacing: 5px; font-size: 75%; } li /* List Item */ { font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; list-style-type: square; font-size: 75%; } table /* Table */ { font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; border-style: outset; background-color: rgb(100,255,105); } body /* Body */ { background-color:rgb(200,255,205); } td /* Table Data */ { font-size: 75%; padding: 0.5cm; } th /* Table Header */ { text-align:center; font-size: 85%; } h1, h2, h3, hr { color:#483d8b; } /* Heading 1, Heading 2, Heading 3, Horizontal Line */

Span /* Span Tag */ { color:blue; background-color:pink; font-size: 29pt; font-style: italic; font-weight: bold; }
P E S School of Engg. – Education for the Real World – Course Information – BE. VII-Sem CS / IS -3

com</td> </tr> <tr> <td width="200">Dr. VII-Sem CS / IS -4 . APJ</td> <td>Drapj@gmail. – Education for the Real World – Course Information – BE.com</td> </tr> <tr> <td width="200">Dr.List Item --> <!-. GTR</td> <td>Drgtr@yahoo.Heading 1 --> <h2>Header is blue</h2> <!-.com</td> </tr> <tr> <td width="200">Dr.Paragraph --> <table border="2"> <tr> <th width="200"> Name </th> <th> Email </th> </tr> <tr> <td width="200">Dr. MMS</td> <td>Drmms@hotmail.Table Data --> P E S School of Engg.Laboratory Manual Web Programming Lab (06CSL78) XHTML Source Code <html> <head> <link rel="stylesheet" type="text/css" href="Lab1.css" /> <title> Web Programming Lab program1 </title> </head> <body> <h1>Header is 36 pt with blue in color</h1> <!-.Ordered List --> <!-.Horizontal Line --> <!-. MAV</td> <td>Drmav@rediffmail.Table Row --> <!-.Table Header --> <!-.com</td> </tr> </table> <hr> <ol type=1> <li> Dept of CSE <ol type=i> <li> I SEM <li> III SEM <li> V SEM <li> VII SEM </ol> <li> Dept of ISE <ol type=i> <li> I SEM <li> III SEM <li> V SEM <li> VII SEM </ol> </ol> <!-.Heading 2 --> <p>Paragraph has a left margin of 50 pixels</p> <!-.Table with Name & Email --> <!-.

This is a Ordinary text. This is a Ordinary text.</span> </p> </body> </html> <!-. VII-Sem CS / IS -5 . This is a Ordinary text.Paragraph --> <span>This is a Span text. This is a Ordinary text. – Education for the Real World – Course Information – BE.End of HTML Document--> Screenshot of the above program P E S School of Engg. <span>This is a Span text.End of Body --> <!-. This is a Ordinary text.Laboratory Manual Web Programming Lab (06CSL78) <p> <!-. This is a Ordinary text.</span> This is a Ordinary text. This is a Ordinary text.

4. generate their squares and print them. 2. 3.write() Question 2b :1. VII-Sem CS / IS -6 . Declare the script tag as text/javascript in the beginning of the <body> of html program Get the number till which the squares have to be generated using prompt() Validate input given and alert the user for invalid input using alert() For all the numbers from 1 to n. P E S School of Engg. Get the number of Fibonacci elements to be generated from the user using prompt() 3. : : : : A number n obtained using prompt The first n Fibonacci numbers A number n obtained using prompt A table of numbers from 1 to n and their squares using alert Proceedure :Question 2a :1. Generate the Fibonacci numbers using the standard algorithm and print it to std out using document.Develop and demonstrate a XHTML file that includes Javascript script for the following problems: a) Input Output b) Input Output Objective :To get acquainted with javascript and how to embed javascript in html code.Laboratory Manual Web Programming Lab (06CSL78) Experiment 2 : Problem Statement: . Validate input given and alert the user for invalid input using alert() 4. – Education for the Real World – Course Information – BE. Declare the script tag as text/javascript in the beginning of the <body> of html program 2.

VII-Sem CS / IS -7 .write("<h1> "+ fib1 + "</h1>"). i++) { fib= fib1 + fib2. if(num==1) document. fib2=fib.write("<h1>" + fib1 + "<br> " + fib2 + "</h1>"). document. if(num!=null && num>0) { document. var num = prompt("Enter a number : \n". "").fib=0. – Education for the Real World – Course Information – BE.Laboratory Manual Web Programming Lab (06CSL78) XHTML Source Code <html> <body> <script type="text/javascript"> var fib1=0.write("<h1>" +" Fibonacci Series for "+ num + " is:"+ "</h1>"). </script> </body> </html> Screenshot of the above program Output 1: Output 2: P E S School of Engg.fib2=1. } } else alert("No Proper Input"). for(i=3. fib1=fib2. else document.i<=num.write("<h1> " + fib + "</h1>").

Laboratory Manual Web Programming Lab (06CSL78) Source Code for 2b (Number and its Squares) Program: <html> <body> <script type="text/javascript"> var num = prompt("Enter a number : \n".i <= num. </script> </body> </html> Screenshot of the above program Output 1: Output 2: P E S School of Engg. VII-Sem CS / IS -8 . – Education for the Real World – Course Information – BE. for(i=1. i++) { msgstr = msgstr + i } + " ." + i*i + "\n". ""). alert(msgstr) } else alert("No input supplied"). if(num >0 && num !=null) { msgstr="Number and its Squares are \n".

. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. a . 6. VII-Sem CS / IS -9 . Get the string from the user using prompt() 3. print the lowest index got from indexof() Question 3b :1. Validate input string (should be only alphabets. – Education for the Real World – Course Information – BE.z) using the regular expression “ /^[a-zA-Z]+$/ “ and alert the user for invalid input using alert() 4. 5. Use indexOf(<vowel>) for each vowel to get the position of the vowel in the string. Print the leftmost vowel i. Validate input number (should be a positive number between 0 to 9) using the regular expression “ /^[0-9]+$/ “ and alert the user for invalid input using alert() 4. Proceedure :Question 3a :1. Reverse the number using modulus operation. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Get the number to be reversed from the user using prompt() 3.floor(number/10) to get the floor of number after division (used for reversing) 6.Develop and demonstrate a XHTML file that includes Javascript script that uses functions for the following problems: a) Parameter: A string Output: The position in the string of the left-most vowel b) Parameter: A number Output: The number with its digits in the reverse order Objective :To get acquainted with javascript procedures and usage of regular expressions in javascript. Use math.Laboratory Manual Web Programming Lab (06CSL78) Experiment 3 : Problem Statement :. Display the reversed string using alert() P E S School of Engg. Convert the string to lowercase using toLowerCase() 5.e.

charAt(i)==’a’ || str.”> <h3 style=“text-align:center. } } document.charAt(i) + “ is: “ + pos + “\n”).charAt(i)==’i’ || str.i<str.write(“The position of the leftmost vowel “ + str.charAt(i)==’u’ || str. document. document.write(“The Entered string is:” + str + “<br/>“).Laboratory Manual Web Programming Lab (06CSL78) Source Code for 3a (Left-most Vowel position) Program <html> <head> <title> Program to find left-most vowel </title> <script type=text/javascript”> function str_vowel() { var str=prompt(“Enter the string\n”). </h3> </body> </html> P E S School of Engg. } </script> </head> <body style=“background-color:yellow” onload=“str_vowel().10 .write(“The Entered String has no vowels!!!!”).write(“The Entered String is:” + str + “<br/>“).charAt(i)==’e’ || str.charAt(i)==’A’ || str. – Education for the Real World – Course Information – BE. exit.charAt(i)==’E’ || str.charAt(i)==’o’ || str.charAt(i)==’U’) { document. color:red”> Program includes JavaScript script functions to find the position of the left-most vowel in the entered string. for(var i=0.write(“The left-most vowel is:” + str.charAt(i) + “<br/>“). VII-Sem CS / IS .charAt(i)==’I’ || str.charAt(i)==’O’ || str.length. var pos=i+1.i++) { if(str. document.

– Education for the Real World – Course Information – BE.11 . VII-Sem CS / IS .Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program Output 1: Output 2: Output 3: P E S School of Engg.

} var rn=0. VII-Sem CS / IS .floor(n/10). n = Math." > P E S School of Engg. } </script> </head> <body bgcolor="yellow"> <form> <center>Enter a number : <input type=text name=number> <input type="button" value="Click </center> </form> </body> </html> me!" onclick="disp(number).value). while(n!=0) { r = n%10.Laboratory Manual Web Programming Lab (06CSL78) Source Code for 3b (Reversing the number) Program <html> <head> <h1><center>Program to Reverse a Number </center></h1><hr> <title> Program to Reverse a Number </title> <script type="text/javascript"> function disp(num) { var alphaExp = /^[0-9]+$/. rn = rn*10 + r. – Education for the Real World – Course Information – BE. return false.match(alphaExp)) { alert("Input should be positive numeric"). if(!num.12 .value + " in reverse is " + rn).value. } alert("The " + num. n= Number(num.

Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program Output 1: Output 2: P E S School of Engg. VII-Sem CS / IS .13 . – Education for the Real World – Course Information – BE.

else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) Proceedure :Question 4b :1.14 . b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8) Objective :To write functions in html. validate using regular expressions.Get the USN and Semester from the user using prompt() 3. alert the user with a message. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. Validate Semester by the user using the regular expression : /[1-8]$/ 6. If the USN format is correct. Proceedure :Question 4a :1. If the Semester is correct. else alert the user with the valid semester number (1 – 8). using Javascript script. a XHTML document that collects the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters followed by two digits followed by two upper-case characters followed by three digits. else alert the user with the format DAADDAADDD (for eg: 1PE09CS001) 5. Declare the script tag as text/javascript in the beginning of the <body> of html program 2. – Education for the Real World – Course Information – BE. If the USN format is correct. Get the USN from the user using prompt() 3. alert the user with a message. Event handler must be included for the form element that collects this information to validate the input.Laboratory Manual Web Programming Lab (06CSL78) Experiment 4 : Problem Statement :a) Develop and demonstrate. VII-Sem CS / IS . Messages in the alert windows must be produced when errors are detected. P E S School of Engg. Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][AZ][0-9][0-9][0-9]$/ 4. alert the user with a message. no embedded spaces allowed) of the user.Validate USN input by the user using the regular expression : /[1-4][A-Z][A-Z][0-9][0-9][A-Z][AZ][0-9][0-9][0-9]$/ 4.

return false. A->Alphabet </form> </body> </html> P E S School of Engg. alert("Entered USN is " + usn.match(alphaExp1)) { alert("US Number should be in DAADDAADDD (1PE02CS007) format").focus(). } alert("US Number is CORRECT"). – Education for the Real World – Course Information – BE. VII-Sem CS / IS . elem1.focus().length == 0) { alert("US Number is empty").value.getElementById('req1').Laboratory Manual Web Programming Lab (06CSL78) Source Code for 4a (USN Validation) Program <html> <head> <center> <h1> Program to Validate USN Number </h1></center> <title> Program to Validate USN </title> <script type='text/javascript'> function formValidator() { var usn = document. } return false. } </script> </head> <body bgcolor="blue"> <form onsubmit='return formValidator()'> <center>Enter your USN. } function isCorrect(elem1) { alphaExp1=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/ if(elem1. return false. return true. elem1. if(isCorrect(usn)) { return true. in DAADDAADDD format id='req1'/> <input type='submit' value='Check Field' /> : <input type='text' <br></center> <i><font color="red">Note: </font></i>D-> Digit.value).value.15 . } else if(!elem1.

– Education for the Real World – Course Information – BE.16 . VII-Sem CS / IS .Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program Output 1: Output 2: P E S School of Engg.

} function isPerfect(elem2) { var alphaExp2 = /[1-8]$/ if(elem2. } return false. } P E S School of Engg.value.Laboratory Manual Web Programming Lab (06CSL78) Output 3: Source Code for 4b (USN & Semester Validation) Program <html> <head> <h1><center>Program to Validate USN and Semester</h1></center><hr> <title> Program to Validate USN and Semester </title> <script type='text/javascript'> function formValidator() { var usn = document. return false. VII-Sem CS / IS .focus(). elem2. var sem = document.17 .getElementById('req1'). – Education for the Real World – Course Information – BE. if(isCorrect(usn)) { if(isPerfect(sem)) return true.length == 0) { alert("Semester Number is empty").getElementById('req2').

VII-Sem CS / IS . elem2.Laboratory Manual else if(!elem2.value. elem1.value. elem1. in D[1-8] format : <input type='text' id='req2'/> <BR/> <input type='submit' value='Check Field' /> <input type="reset" value="Reset"><br> <font style=italic color=red>Note:</font> A->Alphabet. } alert("Semester Number IS CORRECT"). return false.focus(). } alert("US Number IS CORRECT"). return false.18 .focus().match(alphaExp2)) { alert("Invalid Semester Number"). return true.value. D->Digit </form></center> </body> </html> P E S School of Engg. } </script> </head> <body bgcolor="yellow"><center> <form onsubmit='return formValidator()'> Enter your USN.match(alphaExp1)) { alert("US Number should be in DAADDAADDD format"). – Education for the Real World – Course Information – BE. return false. in DAADDAADDD format : <input type='text' id='req1'/> <BR/> Enter your Sem. return true.length == 0) { alert("US Number is empty"). } else if(!elem1. } Web Programming Lab (06CSL78) function isCorrect(elem1) { var alphaExp1 = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][09]$/ if(elem1.focus().

19 .Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program Output 1: Output 2: P E S School of Engg. – Education for the Real World – Course Information – BE. VII-Sem CS / IS .

20 . top: 120px. width: 300px. left: 240px.layer2Style { border: solid thick red. VII-Sem CS / IS . b) Modify the above document so that when a paragraph is moved from the top stacking position. left: 200px. } .layer3Style { border: solid thick green. using JavaScript script. it returns to its original position rather than to the bottom Source Code for 5a (Paragraph highlighting) Program <html> <head> <title>The Stacking Order </title> <style type="text/css"> . z-index:0. left: 220px. background-color: green. z-index:0. When the cursor is placed over the exposed part of any paragraph. top: 140px. position: absolute. background-color: purple. position: absolute. padding: 1em. stacked on top of each other. padding: 1em. a XHTML document that contains three short paragraphs of text. background-color: blue.layer1Style { border: solid thick black. padding: 1em. it should rise to the top to become completely visible. top: 100px. } . width: 300px. z-index:0. position: absolute.Laboratory Manual Web Programming Lab (06CSL78) Experiment 5 : 5. width: 300px. – Education for the Real World – Course Information – BE. } </style> P E S School of Engg. a) Develop and demonstrate. with only enough of each showing so that the mouse cursor can be placed over some part of them.

21 . var newTop=document. topLayer=document." class="layer2Style" id="layer2" onmouseover="mover('layer2')"> This is the Second paragraph with layer1style features embedde to it </div> <div style="z-index:0.getElementById(toTop).id.getElementById(toTop). function mover(toTop) { var oldTop=document. VII-Sem CS / IS . } </script> </head> <body><body style="background-color:yellow"> <h2 style="text-align:center.Laboratory Manual Web Programming Lab (06CSL78) <script type="text/javascript"> var topLayer="layer3"." class="layer1Style" id="layer1" onmouseover="mover('layer1')"> This is the first paragraph with layer1style features embedde to it </div> <div style="z-index:2.getElementById(topLayer). – Education for the Real World – Course Information – BE.color:red"> Program Includes XHTML document to show the stacking of Paragraphs</h2> <div style="z-index:10.style.zIndex="10". newTop.zIndex="0"." class="layer3Style" id="layer3" onmouseover="mover('layer3')"> This is the Third paragraph with layer1style features embedde to it </div> </body> </html> Screenshot of the above program Output 1: Output 2: P E S School of Engg.style. oldTop.

z-index:2. left: 400px. background-color: green. width: 300px. z-index:1. padding: 1em.layer1Style { border: solid thick black. } . background-color: red. width: 300px. VII-Sem CS / IS .layer2Style { border: solid thick blue.Laboratory Manual Web Programming Lab (06CSL78) Output 3: Output 4: Source Code for 5b (Paragraph Moving) Program <html> <head> <title>The Stacking Order </title> <style type="text/css"> . } P E S School of Engg. position: absolute. – Education for the Real World – Course Information – BE.22 . top: 100px. left: 420px. position: absolute. top: 120px. padding: 1em.

</h1> <div style="z-index:1. it returns to its original position. background-color: orange.pos) { var newTop=document.zIndex=origPos.'1')" onmouseout="moveBack()"> First Paragrah </div> <div style="z-index:2.id. padding: 1em. } function moveBack() { document.'3')" onmouseout="moveBack()"> Third Paragrah </div> </body> </html> id="layer2" id="layer3" P E S School of Engg. position: absolute.23 . – Education for the Real World – Course Information – BE. origPos=pos.zIndex="10". } </script> </head> <body style="background-color:yellow"> <h1 style="text-align:center. var origPos.getElementById(toTop).Laboratory Manual . VII-Sem CS / IS ." class="layer3Style" onmouseover="mover('layer3'. z-index:3. Web Programming Lab (06CSL78) function mover(toTop." class="layer1Style" id="layer1" onmouseover="mover('layer1'.color:red"> The Stacking of paragraphs when moved from the top stacking position. width: 300px. topLayer=document.style. newTop. } </style> <script type="text/javascript"> var topLayer="layer3". top: 140px." class="layer2Style" onmouseover="mover('layer2'.'2')" onmouseout="moveBack()"> Second Paragrah </div> <div style="z-index:3. left: 440px.layer3Style { border: solid thick brown.getElementById(topLayer).getElementById(toTop).style.

– Education for the Real World – Course Information – BE. VII-Sem CS / IS .Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program Output 1: Output 2: Output 3: P E S School of Engg.24 .

Name of the College. margi-left:15px.} h2{ display:block. Brach. Name. font-size:12pt. Year of Joining.} year{color:red.} usn{color:red. VII-Sem CS / IS . – Education for the Real World – Course Information – BE. font-size:12pt.} h3{ color:brown. margin-top:15px. margi-left:15px. font-size:18pt.Information </h3> <h2>Student 1 </h2> <ad><label>usn:<usn> 1PE00CS030 </usn> </label> </ad> <ad><label>Name:<name> HANUMANT PUJAR </name> </label> </ad> <ad><label>College Name:<college> PESSE </college> </label> </ad> <ad><label>Branch:<branch> CSE </branch> </label> </ad> <ad><label>Year of Joining:<year> 2000 </year> </label> </ad> <ad><label>Email-id:<email> pujar. Source Code for 6a (Student Information using XML and CSS) Program CSS Source Code ad {display:block. The information must include USN.} name{color:red. b) Create an XSLT style sheet for one student element of the above document and use it to create a display of that element. a) Design an XML document to store information about a student in an engineering college affiliated to VTU. margi-left:15px.com </email> </label> </ad> <h2> Student 2</h2> <ad><label>usn:<usn> 1PE02CS014 </usn> </label> </ad> P E S School of Engg. margi-left:15px.} college{color:red. font-size:18pt. margi-left:15px. font-size:12pt. font-size:13pt. and e-mail id.vtu@gmail. color:black. font-size:12pt. color:blue. font-size:12pt. margi-left:15px.} XML Source Code <?xml-stylesheet type="text/css" href="Lab6a.Laboratory Manual Web Programming Lab (06CSL78) Experiment 6 : 6.css"?> <student_information> <h3> Student .} email{color:red. font-size:12pt. Create a CSS style sheet and use it to display the document. Make up sample data for 3 students.} branch{color:red.25 .

com </email> </label> </ad> </student_information> Screenshot of the above program P E S School of Engg.Laboratory Manual Web Programming Lab (06CSL78) <ad><label>Name:<name> Prabodh C P </name> </label> </ad> <ad><label>College Name:<college> NIE </college> </label> </ad> <ad><label>Branch:<branch> CSE </branch> </label> </ad> <ad><label>Year of Joining:<year> 2002 </year> </label> </ad> <ad><label>Email-id:<email> prabodhcp@gmail.com </email> </label> </ad> <h2>Student 3</h2> <ad><label>usn:<usn> 1SV02CS009 </usn> </label> </ad> <ad><label>Name:<name> Majunatha H N </name> </label> </ad> <ad><label>College Name:<college> MVJCE </college> </label> </ad> <ad><label>Branch:<branch> CSE </branch> </label> </ad> <ad><label>Year of Joining:<year> 2002 </year> </label> </ad> <ad><label>Email-id:<email> manjuhnm@gmail.26 . VII-Sem CS / IS . – Education for the Real World – Course Information – BE.

org/1999/xhtml"> <xsl:template match = "VTU"> <html><head><title> Style sheet for 6b."> E-Mail: </span> <xsl:value-of select = "email" /> <br /> </body></html> </xsl:template> </xsl:stylesheet> XML Source Code <?xml version = "1. – Education for the Real World – Course Information – BE. color: blue."> USN: </span> <xsl:value-of select = "USN" /> <br /> <span style = "font-style: italic.vtu@gmail. color: blue."> Branch: </span> <xsl:value-of select = "branch" /> <br /> <span style = "font-style: italic."> College: </span> <xsl:value-of select = "college" /> <br /> <span style = "font-style: italic.0"?> <xsl:stylesheet version = "1.0"?> <?xml:stylesheet type = "text/xsl" href = "Lab6b.xml Program</title> </head><body> <h2> VTU Student Description </h2> <span style = "font-style: italic. VII-Sem CS / IS . color: blue.xsl" ?> <VTU> <USN> 1PE00CS030 </USN> <name> HANUMANT PUJAR </name> <college> PESSE</college> <branch> CSE </branch> <YOJ> 2000 </YOJ> <email> pujar.org/1999/XSL/Transform" xmlns = "http://www.com </email> </VTU> Screenshot of the above program P E S School of Engg."> Name: </span> <xsl:value-of select = "name" /> <br /> <span style = "font-style: italic. color: blue. color: blue."> Year of Join: </span> <xsl:value-of select = "YOJ" /> <br /> <span style = "font-style: italic. color: blue.w3.Laboratory Manual Web Programming Lab (06CSL78) Source Code for 6b (Student Information using XML and XSLT) Program XSL Source Code <?xml version = "1.0" xmlns:xsl = "http://www.w3.27 .

print "<hr>". print "</body></html>\n".Laboratory Manual Web Programming Lab (06CSL78) Experiment 7 : 7."<br>". print "content-type:text/html". exit(0). print "Server name :"."<br>". VII-Sem CS / IS . print "<body><h1> About this server </h1>"."\n". Server protocol."<br>". print "<head> <title> About this server </title> </head>\n". print "Running on port :". Screenshot of the above program P E S School of Engg.$ENV{'SERVER_SOFTWARE'}.$ENV{'SERVER_PORT'}. a) Write a Perl program to display various Server Information like Server Name. print "Server Software :". – Education for the Real World – Course Information – BE. print "CGI-Revision :"."<br>". print "<hr>\n". b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command executed. CGI Revision etc.$ENV{'GATEWAY_INTERFACE'}. Server Software.28 . Source Code for 7a (Server Information) program #!/usr/bin/perl use CGI':standard'."\n\n".$ENV{'SERVER_NAME'}. print "<html>\n".

$c=param('com'). – Education for the Real World – Course Information – BE.pl"> Enter the UNIX Command : <input type="text" name="com"> <input type="submit" value="submit"> </form></center> </body></html> Screenshot of the above program Output 1: P E S School of Engg.29 . print "Command is : <i><font color=red><b> $c</b></i></font> ". system($c). VII-Sem CS / IS .Laboratory Manual Web Programming Lab (06CSL78) Source Code for 7b (UNIX Command) program Perl Program #!/usr/bin/perl use CGI':standard'. print "</center>". print "<br>". exit(0). print "<center><h2>Output of the UNIX command</h2><hr><br>". print "content-type:text/html\n\n". HTMLProgram <html><title> Program to execute UNIX Command </title> <body><center><h1>Program to Execute UNIX Command </h1> <hr> <form action="http://localhost/cgi-bin/6b.

-value=>" "). } P E S School of Engg. print start_form().Laboratory Manual Web Programming Lab (06CSL78) Experiment 8 : 8.-bgcolor=>"Pink".-text=>"blue"). print end_form().br(). VII-Sem CS / IS . use CGI::Carp qw(warningsToBrowser). c) Write a Perl program to keep track of the number of visitors visiting the web page and to display this count of visitors. @coins = ("Welcome to Web Programming Lab". if(param) { print header().reset(). print end_form(). – Education for the Real World – Course Information – BE. } else { print header(). "Practice all the programs". print start_html(-title=>"User Name". print submit(-value=>"Back"). print b("Hello $cmd. "well done Good Day"). $cmd=param("name"). print start_html(-title=>"Enter user name". Source Code for 8a (User Greeting Message) program #!/usr/bin/perl use CGI ':standard'. print start_form(). a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from a list of 4 greeting messages.-value=>"Submit"). with proper headings."Have a nice time in lab".-bgcolor=>"yellow". $random_number = int(rand($range)).textfield(-name=>"name". submit(name=>"submit". print end_html().text=>"blue").30 . $coins[$random_number]"). $range = 4. print end_html().

$count)) { $access=<FILE>. – Education for the Real World – Course Information – BE. } print "<h1><center> Program to Display Webcount </center></h1>". close(FILE).$count)) { $access++. Screenshot of the above program P E S School of Engg. print FILE $access. print "<i> <center>The users have accessed this webpage <font size=12 color=red>$access</font>times </center></i>".txt".31 . if(open(FILE. } else { print "Cant write to the file". close(FILE). VII-Sem CS / IS .">". } } else { print "File doesnot exist". $count="/var/www/cgi-bin/count. print "<hr>"."<".Laboratory Manual Web Programming Lab (06CSL78) Source Code for 8b (Track Number of Visitors) program #!/usr/bin/perl -w print "content-type:text/html \n\n". if(open(FILE.

"In words $h hours $m minutes $s seconds". print start_html(-title=>"Program 8".Laboratory Manual Web Programming Lab (06CSL78) Experiment 9 : 9.$m. print "Content-Type: text/html\n\n". – Education for the Real World – Course Information – BE. Screenshot of the above program P E S School of Engg."The current system time is $h:$m:$s".-bgcolor=>"Black". print end_html.hr.br. print br. print "Refresh: 1\n".32 . Write a Perl program to display a digital clock which displays the current time of the server.$h)=localtime(time). Source Code for 9th (Digital Clock) program #!/usr/bin/perl use CGI ':standard'.-text=>"white"). print br. VII-Sem CS / IS .br. ($s.

VII-Sem CS / IS . $qh->finish(). use DBI. use CGI ':standard'. $dbh->disconnect()."root123"). age]) program Perl Program #!/usr/bin/perl print "Content-type: text/html\n\n". HTML Program <html> <body> <h1><center>Program to insert Student Age]</h1></center> <form action="http://localhost/cgi-bin/Lab10. $dbh=DBI->connect("DBI:mysql:vtu". $age=param("age")."root". $name=param("name"). while ( ($name. print"</HTML>". $qh->execute(). } print "</table>". $qh=$dbh->prepare("insert into student values('$name'. – Education for the Real World – Course Information – BE.pl"> Name : <input type="text" name="name"> <br> Age :<input type="text" name="age"> <br> <input type="submit" value="Submit"> </form> </body> </html> Information [Name.$age)=$qh->fetchrow()) { print "<tr><td>$name</td><td>$age</td></tr>". $qh->execute(). 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.'$age')"). print "<HTML><TITLE>Result of the insert operation </TITLE>". Source Code for 10th (Student Information [name. $qh=$dbh->prepare("Select * from student"). P E S School of Engg.Laboratory Manual Web Programming Lab (06CSL78) Experiment 10 : 10.33 . print "<table border size=1><tr><th>Name</th><th>Age</th></tr>".

VII-Sem CS / IS .Laboratory Manual Web Programming Lab (06CSL78) Screenshot of the above program P E S School of Engg.34 . – Education for the Real World – Course Information – BE.

if(isset($_COOKIE['lastVisit'])) { $visit = $_COOKIE['lastVisit']. setcookie('lastVisit'. – Education for the Real World – Course Information – BE.".35 .m/d/y"). ?> Screenshot of the above program Output 1: Output 2: P E S School of Engg. VII-Sem CS / IS . echo "Your last visit was . } else echo "You've got some stale cookies!". Write a PHP program to store current date-time in a COOKIE and display the „Last visited on‟ date-time on the web page upon reopening of the same page. Source Code for 11th (Recent User Date-Time using COOKIE) program <?php date_default_timezone_set('Asia/Calcutta'). $visit. $inTwoMonths = 60 * 60 * 24 * 60 + time(). $inTwoMonths). date("G:i .Laboratory Manual Web Programming Lab (06CSL78) Experiment 11 : 11.

echo "<p>Counter initialized</p>\n". VII-Sem CS / IS .36 .Laboratory Manual Web Programming Lab (06CSL78) Experiment 12 : 12. Write a PHP program to store page views count in SESSION. "<p>reload this page to increment</p>". to increment the count on each refresh. ?> Screenshot of the above program Output 1: Output 2: P E S School of Engg. – Education for the Real World – Course Information – BE. } echo "<p>The counter is now <b>$_SESSION[count]</b></p>". } else { $_SESSION["count"]++. and to show the count on web page. if (!isset($_SESSION)) { $_SESSION["count"] = 0. Source Code for 12th (Number of View Count using SESSION) program <?php session_start(). session_register("count").

37 . Using PHP and MySQL. Address Line 2. Address Line 1. 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. title. store the values in MySQL table. and E-mail text fields. Accession number. Retrieve and display the data based on Name. On submitting. – Education for the Real World – Course Information – BE. develop a program to accept book information viz. VII-Sem CS / IS . P E S School of Engg.Laboratory Manual Web Programming Lab (06CSL78) Experiment 13 : 13. Experiment 14 : 14. authors. Create a XHTML form with Name.

For ex: Lab7. Save all the html programs with .38 . 2. Change the path to \var\www\html\php using cd command.pl 6) Change the privileges of the program using chmod command. and then type http://localhost/cgi-bin/Lab7.php extension. Open new Terminal and change the path to \var\lib\mysql\mysql using cd command.Laboratory Manual Web Programming Lab (06CSL78) User Manual Procedure to carry out execution of Perl Programs 1) Login into system using “root” username. create a new directory using the command mkdir php under html directory.php 5. then type the program getting into insert mode. type the command as create table table_name (parameter list with datatype_name separated by commas). Open vi or vim editor.pl 7) Compile the perl program using the command perl program_name For ex: perl Lab7. 2.pl 8) If no errors are there at the command line after compiling the program. Open new Terminal and change the path to \var\www\html using cd command. 2) After successful login. To create a new database type the command as create database database_name. Type mysql at the command prompt with the above path and then press enter to login to mysql prompt from admin prompt. For ex: chmod 777 Lab7. To create a new table under this database. 4.html 4. Open new Terminal and change the path to \var\www\html using cd command.pl at the URL. To change the database usage. Procedure to carry out execution of HTML programs 1. 5) Save all the perl programs with .pl extension. For ex: create table student (name varchar(10). Open vi or vim editor. double click on the Terminal to get into command prompt with admin privileges (#). For ex: Lab7. 2.php at the URL to run the program. then type the program getting into insert mode.html extension. Save all the php programs with .html at the URL to run the program. then type the program getting into insert mode. – Education for the Real World – Course Information – BE. 3. 3. Procedure to carry out execution of MySQL programs 1. 4. 3) Change the path to \var\www\cgi-bin using cd and check using pwd command. give the command as use database_name. age int). Open a web browser and type http://localhost/Lab7. Open a web browser and type http://localhost/php/Lab7. 4) Open vi or vim editor. P E S School of Engg. start the web browser. 5. For ex: mysql:> 3. For ex: Lab7. VII-Sem CS / IS . Procedure to carry out execution of php programs 1. Just change the program names for other programs to execute without changing the syntax at URL.

Save these programs at the path where other programs such as html. For ex: select * from student. Procedure to carry out execution of xsl/css programs 1.css extension. Procedure to carry out execution of xml programs 1. 3. php are inheriting the features embedded in . 7.” “). 2. Save all the xml programs with . then type the program getting into insert mode. To insert values into the above created table.Laboratory Manual Web Programming Lab (06CSL78) 6. To retrieve all the values present in the table. 5. For ex: insert into student values (“Pujar”.39 .xsl or Lab7.xsl / .xml at the URL to run the program. Open vi or vim editor. For ex: Lab7.css 4.xml extension.25). 2.xml 4. VII-Sem CS / IS . then type the program getting into insert mode. Save all the xsl/css programs with . Open new Terminal and change the path to \var\www\html using cd command. For ex: Lab7.xsl / . type the command as insert into table_name values( “ “. 3. Path for html programs \var\www\html Path for php programs \var\www\html\php P E S School of Engg. Open vi or vim editor.css programs. Open new Terminal and change the path to \var\www\html using cd command. type the command as select * from table_name. – Education for the Real World – Course Information – BE. As these programs are style sheets. Open a web browser and type http://localhost/Lab7. so we can‟t run these programs at web browser or at the command line.

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.