sambhram institute of technology bangalore – 560 097 · web programming laboratory (13mca18)...

Web Programming Laboratory (13MCA18)

SAMBHRAM INSTITUTE OF TECHNOLOGY

BANGALORE – 560 097

PRACTICAL RECORDS

NAME :__________________________________

SUBJECT :__________________________________

SUB CODE :__________________________________

USN :__________________________________

B. M. HEMALATHA, Asst. Prof, Department of MCA, SaIT


SAMBHRAMINSTITUTE OF TECHNOLOGY

Bangalore – 560 097

CERTIFICATE

Name of the Laboratory WEB PROGRAMMINGLABORATORY

This is to certify that Smt./Sri

has satisfactorily completed the course of Experiments

Prescribed by the University of V.T.U. Belgaumfor the degree ofMaster of Computer

Application course in the laboratory of this college in the year 2013 to 2014.

----------------------------------------- ----------------------------------------- Signature of the teacher Signature of In charge of the batch Head of Department

Date :-_______20___

Name of the Candidate:______________________________

Register No: ______________________________________

Examination Centre: SaIT, Bangalore

Date of Examination:



SAMBHRAMINSTITUTE OF TECHNOLOGY

Bangalore – 560 097PARTICULARS OF THE EXPERIMENTS PERFORMED

CONTENTS




Expr no.

Date. EXPERIMENTSPage No.

Sign

1

Create an XHTML page to demonstrate the usage of a. Text formatting tags.b. Linksc. Imagesd. Tables

2Develop and demonstrate the usage of inline and external style sheet using CSS.

3

Develop and demonstrate an XHTML file that includes JavaScript for the following problems:a)Input: A number n obtained using promptOutput: The first n Fibonacci numbersb)Input: A number n obtained using promptOutput: A table of numbers from 1 to n and their squares using alert.

4Develop and demonstrate using JavaScript, an XHTML document that displays random numbers (integers).

5[a]

Develop and demonstrate using JavaScript, an 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; 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.

5[b]Modify the above program to get the current semester also (restricted to be a number from1 to 8)

6[a]

Develop and demonstrate using JavaScript, an XHTML document that contains three images, 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.

6[b]Modify the above document so that when an image is moved from top stacking position, it returns to its original position rather than to the bottom.

7Develop using JavaScript, an XHTML document that use onload and onfocus events.

8[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, 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.


1. Create an XHTML page to demonstrate the usage of

a) Text Formatting tags.

b) Links

c) Images

d) Tables

a) Text Formatting tags-

<html><head><title> My first program </title></head><body><h1>The First Program</h1><p><pre><b> MCA I SEM, </b></br>

<i>Department of MCA, </i></br><em>Sambhram Institute of Technology</em></pre></p>

<p><strong><u>This is Web Technologies Lab Manual </u></br> 13MCA18 is subject code</strong></br><code> Total = Internals + Externals //this is code</code></br></p><p><pre> Illustration of subscripts and superscripts</br> x<sub>2</sub><sup>3</sup> + y<sub>1</sub><sup>2</sup></body></html>

Output:



b) Links-

<html> <head> <title> hyperlink </title> </head> <a href = "Link.html"> CLICK HERE </a> </html>

Link.html<html>

<body> This is Web Technologies Lab Program </body></html>

Output:



c) Images-

<html><head><title>display image</title></head><body><imgsrc="java.png" alt="cannot display"/></body>

</html>

Output:



d) Tables

<html><head><title> Table with text and image </title></head><body><table border = "border">

<caption><b>Dept of MCA details </b></caption><tr>

<th> Name</th><th> Designation </th>

</tr><tr>

<td> T SrinivasaRao</td><td>Head of the Department</td>

</tr><tr>

<td> Sharma</td><td>Professor</td>

</tr><tr>

<td> Y S Kalaivani</td><td>Assistant Professor</td>

</tr><tr>

<td>B M Hemaltha</td><td>Assistant Professor</td>

</tr></table></body></html>



Output:

2. Develop and demonstrate the usage of inline and external style sheet using CSS.



<html>

<head>

<title>Sample CSS</title>

<link rel = "stylesheet" type = "text/css" href = "Style1.css" />

</head>

<h1>SAMBHRAM INSTITUTE OF TECHNOLOGY </h1>

<p style=color: red>Master of Computer Application</p>

</html>

Style1.css

h1

{

font-family: 'Lucida Handwriting';

font-size: 30pt;

color: Blue;

}

Output:



3. Develop and demonstrate an XHTML file that includes javascript for the following problem:

(a) Input : A number n obtained using prompt

Output: The first n Fibonacci numbers.

(b) Input : A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using alert.

(a)Fibonacci numbers

<html><body><script type="text/javascript">var a=0,b=1,c=0; varnum = prompt("Please Enter valid input ",""); if(num!=null &&num>0) { document.write("Fibonacci series are.... <br />"); if(num==1)

document.write(a + "<br />"); else



document.write(a + "<br />" + b + "<br />"); for(i=3;i<=num;i++) {

c=a+b; document.write(c + "<br />"); a=b; b=c;

} } elsealert("Please Enter Valid input"); </script></body></html>



Output:


3(b) Squares on 1 to n

<html><head><title> Exercise1b </title></head><body><script type="text/javascript"></script></body></html>

Output:


4. Develop and demonstrate using JavaScript, an XHTML document that displays random numbers (integers).



<html>

<head>

<title>Random numbers</title>

<p>Click here to generate numbers</p>

<button onclick="ran()">Click here</button>

<script type="text/javascript">

function ran()

{

alert(Math.floor(Math.random()*101));

}

</script>

</head>

</html>

Output:



5a)Develop and demonstrate, using JavaScript script, a XHTML document that collectsthe USN ( the valid format is: A digit from 1 to 4 followed by two upper-case charactersfollowed by two digits followed by two upper-case characters followed by three digits; noembedded spaces allowed) of the user. Event handler must be included for the formelement that collects this information to validate the input. Messages in the alert windowsmust be produced when errors are detected.

<html><script type="text/javascript">functionchkusn() {

varusn=document.getElementById("usn"); if(usn.value.match(/^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/))

alert("USN isvalid"); else

alert("USN is Invalid"); } </script><body><form>Pls Enter USN:

<input type="text" id="usn"/><br /><input type="submit" value="submit" onclick="chkusn()"/>

</form></body></html>



Output:



5 b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8.

<html><script type="text/javascript">functionchkusn() { var usn=document.getElementById("usn"),sem=document.getElementById("sem"); if(usn.value.match(/^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/) &&sem.value.match(/^[1-8]$/))

alert("valid"); else

alert("Invalid"); } </script><body><form>

Enter USN :<input type="text" id="usn"/><br />Enter Sem :<input type="text" id="sem"/><br /><input type="submit" value ="submit" onclick="chkusn()"/>

</form></body></html>



Output:



6 a) Develop and demonstrate, using JavaScript script, a XHTML document that contains three images, 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.

<html><style type="text/css">.para1 {

padding: 1in;width:180px;position:absolute;top:70px;left:4in;z-index:1;

} .para2 {

padding: 1in;width:180px; position:absolute;top:105px; left:5in;z-index:2;

} .para3 {


} </style>



6 b) Modify the above document so that when an image is moved from the top stacking position,it returns to its original position rather than to the bottom.

<html><style type="text/css">.para1 {


} .para2 {

padding: 1in;width:180px; position:absolute;top:105px; left:5in;z-index:2;

} .para3 {


} </style>



7. Develop using JavaScript script, an XHTML document that use of onload and onfocus events.



<html><head><title>nochange.html</title><script type = "text/javascript" src = "nochange.js"></script></head><bodyonload="computeCost().focus"><form action = " "><h3> Groceries Order Form</h3><table border="border"><tr>

<th>Item</th><th>Price</th><th>Quantity</th>

</tr><tr>

<th>Rice</th><td>Rs.50</td><td><input type = "text" id = "rice" size = "2"/></td>

</tr><tr>

<th>Toordaal</th><td>Rs. 100</td><td><input type = "text" id = "toor_daal" size = "2"/></td>

</tr><tr>

<th>Uraddaal</th><td>Rs. 125</td><td><input type = "text" id = "urad_daal" size = "2"/></td>

</tr></table><p><input type = "button" value = "Total Cost" onclick = "computeCost();"/><input type = "text" size = "5" id = "cost" onfocus = "this.blur();"/></p><p><input type = "submit" value = "Submit Order"/><input type = "reset" value = "Clear Order Form"/></p></form></body></html>

Output:



8. 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,Branch, Year of Joining, and e-mail id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.



<?xml version="1.0" ?><?xml-stylesheet type="text/css" href="8a.css"?><vtu><student>

<usn>1ST10CS123</usn><name>V. SIVA KUMAR</name><coll>SaIT</coll><branch>ISE</branch><yoj>2010</yoj><email>[email protected]</email>

</student><student>

<usn>1ST10CS213</usn><name>S. Nagarjuna</name><coll>SaIT</coll><branch>CSE</branch><yoj>2011</yoj><email>[email protected]</email>

</student><br/><student>

<usn>1ST10CS321</usn><name>Lakshmi</name><coll>SaIT</coll><branch>ECE</branch><yoj>2012</yoj><email>[email protected]</email>

</student></vtu>

8a.cssusn{display: block; color:blue; } name,coll,branch,yoj,email{display:block;color:red;}

Output:



8 b) Create an XSLT style sheet for one student element of the above document and use it tocreate a display of that element.

<?xml version="1.0" ?>



<?xml-stylesheet type="text/xsl" href="8b.xsl"?><vtu><student>

<usn>1ST10CS123</usn><name>V. SIVA KUMAR</name><coll>SaIT</coll><branch>ISE</branch><yoj>2010</yoj><email>[email protected]</email>

</student><student>

<usn>1ST10CS213</usn><name>S. Nagarjuna</name><coll>SaIT</coll><branch>CSE</branch><yoj>2011</yoj><email>[email protected]</email>

</student><br/><student>

<usn>1ST10CS321</usn><name>Lakshmi</name><coll>SaIT</coll><branch>ECE</branch><yoj>2012</yoj><email>[email protected]</email>

</student></vtu>

8b.xsl

<?xml version="1.0"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">



<xsl:key name="student-by-usn" match="student" use="usn"/><xsl:template match="vtu">

<html><body><xsl:for-each select="key('student-by-usn','1ST10CS123')">

<span style="color:blue;" >USN: </span><xsl:value-of select="usn"/>

<span style="color:green;"><br/>Name: </span><xsl:value-of select="name"/>

<span style="color:blue;"><br/>Coll: </span><xsl:value-of select="coll"/>

<span style="color:blue;"><br/>branch: </span><xsl:value-of select="branch"/>

<span style="color:blue;"><br/>yoj: </span><xsl:value-of select="yoj"/>

<span style="color:blue;"><br/>email: </span><xsl:value-of select="email"/><br/></xsl:for-each></body></html></xsl:template></xsl:stylesheet>

OUTPUT:



9. Write a Perl program which demonstrates the usage of scalar variables and arrays.



#!/usr/bin/perluse CGI ‘:standard’;$index=0;while($name=<tejasazharkalamaamir>){

$name[$index++]=uc ($name);}

print (“\n The sorted list of names is : \n\n”);foreach $name(sort @name){

print("$name\n");}

Execution steps for Perl programs:

1. Root login in Fedora

2. Open Text editor, type the program

3. Save the file in File system/var/www/cgi-bin/prgm_name.pl

4. Open terminal and change the directory to cgi-bin

Cd /var/www/cgi-bin

5. Give permissions for the file

Chmod 777 prgm_name.pl

6. Open browser and give the path

http://localhost/cgi-bin/prgm_name.pl



Output:

10. Write a Perl program to display various Server information like Server Name,ServerSoftware, Server protocol,CGI Revision etc.



#!/usr/bin/perluse CGI ':standard'; print header; printstart_html; print "Server Name:",$ENV{'SERVER_NAME'},"<br/>"; print "Server Software:",$ENV{'SERVER_SOFTWARE'},"<br/>"; print "Server Protocol:",$ENV{'SERVER_PROTOCOL'},"<br/>"; print "CGI Version:",$ENV{'GATEWAY_INTERFACE'},"<br/>"; printend_html;

Output:

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



#!/usr/bin/perluse CGI ':standard'; print "Refresh:",1, "\n"; ($sec, $min, $hour)=localtime(time); if ($hour >12) {

$hour = $hour - 12; $ampm = "PM";

} else{

$ampm = "AM"; }

print header, h3("DIGITAL CLOCK"),"<big>$hour: $min: $sec: $ampm</big>";

Output:



12. Write a Perl program to accept the User Name and display a greeting messagerandomly chosen from a list of 4 greeting messages.



#!/usr/bin/perluseCGI':standard';use CGI::Carp qw(warningsToBrowser);@arr=("Hi","Hello","GoodMorning","Namaste");$range=4;$random_number=int(rand($range));if(param){

print header();printstart_html();$cmd=param("name");print "$cmd,$arr[$random_number]";printstart_form();print submit(-value=>"back");printend_form();printend_html();

}else{

print header();printstart_html();printstart_form(),textfield(-name=>"name",-value=>""),submit(-name=>"submit",-value=>"submit");printend_form();printend_html();

}

Output:



13. Write a Perl program to keep track of the number of visitors visiting the webpage and to display this count of visitors, with proper headings.

#!/usr/bin/perluse CGI ':standard'; print header; open(CNT,'<count.txt'); $count = <CNT>; close(CNT); $count++; open(CNT,'>count.txt'); print CNT $count; close(CNT); print “The no.of visitors are : $count”;

Execution Steps:1. Root login in Fedora2. Open Text editor, type the program 3. Save the file in File system/var/www/cgi-bin/prgm_name.pl4. Open terminal and change the directory to cgi-bin

Cd /var/www/cgi-bin5. Give permissions for the file

Chmod 777 prgm_name.pl6. Create file , initialize it to 07. Save the file with .txt extension(count.txt) in filesystem/var/www8. Open terminal and change the directory to www

Cd /var/www9. Give permissions to the file Chmod 777 count.txt10.Open browser and give the path

http://localhost/cgi-bin/prgm_name.pl



Output:



14. Write a CGI-Perl program to use a cookie to remember the day of the last login from a user and display it when run.

<?phpdate_default_timezone_set('Asia/Calcutta'); setcookie('datim',date("h:i:s A - m/d/y"),time()+86000); if(isset($_COOKIE['datim']))

echo "ur last visit was - ".$_COOKIE['datim']; else

echo "Cookie just created, refresh to view last access"; ?>

Output:


sambhram institute of technology bangalore – 560 097 · web programming laboratory (13mca18)...

Documents