REVA INSTITUTE OF TECHNOLOGY AND … · REVA INSTITUTE OF TECHNOLOGY AND MANAGEMENT Kattigenahalli, JalaHobli, Yelahanka, Bangalore – 560064 Department of Master of Computer Applications

REVA INSTITUTE OF

TECHNOLOGY AND MANAGEMENT

Kattigenahalli, JalaHobli, Yelahanka, Bangalore – 560064

Department of Master of Computer Applications

I Semester MCA

Laboratory Manual

WEB Programming laboratory

13MCA18

WEBProgramming Laboratory – 13MCA18

-------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------- Department of M.C.A – RITM Page 2 of 25

Subject Code: 13MCA18 I.A Marks: 50

Hours/Week: 3 Exam Marks:

50

Total Hours: 42 Exam Hours: 3

Particulars of the Experiments Performed

C O N T E N T S

Sl.

No. Programs

Page

No.

01

Create an XHTML page to demonstrate the usage of

a. Text Formatting tags,

b. Links

c. Images

d. Tables

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

03

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: A table of numbers from 1 to n and their squares using alert

04 Develop and demonstrate using JavaScript, a XHTML document that displays

random numbers (integers)

05

a) Develop and demonstrate, using JavaScript script, a XHTML document that

collects the USN ( the valid format is: A digit from 1 to 4 followed by two

upper-case characters followed by two digits followed by two upper-case

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.

b) Modify the above program to get the current semester also (restricted to be a

number from 1 to 8)

06

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.

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.

07 Develop using JavaScript script, an XHTML document that use of onload and

onfocus events

08

a) Design an XML document to store information about a student in an

engineering college affiliated to VTU. The information must include USN,

Name, Name of the College, Brach, Year of Joining, and e-mail id. Make up

sample data for 3 students. Create a CSS style sheet and use it to display the

document.

b) Create an XSLT style sheet for one student element of the above document and

use it to create a display of that element.

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

10 Write a Perl program to display various Server information like Server Name,

Server Software, Server protocol, CGI Revision etc.

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

the server

12 Write a Perl program to accept the User Name and display a greeting message

randomly chosen from a list of 4 greeting messages.

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

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

STEPS TO WRITE AND EXECUTE WEB PROGRAM

01

Typing the program:

Open a NOTE-PADType the program

02

Save the Program:

Save the program as Filename.htm or filename.html

03

To EXECUTE the program:

Right click and open the file using browser


-------------------------------------------------------------------------------------------------------------


Once FEDORA OS loads:

1. Select ADA Internal; Password is ada@sd

2. Double click on Terminal

3. Login as Super User ; User Name: su ;

Password: entertwo

4. Change the path : $ cd /var/www/html

5. Start the service: $ service httpd start

6. Create a file : $ gedit command followed by the file

name followed by extension e.g. gedit test.html

7. Click on mozilla icon

8. Go to File -> uncheck Work Offline

9. In the address bar type

http://localhost/filename.html

NOTE: In case there is any error during execution

in Mozilla browser go to error console to check the

error in your program.

http://localhost/filename.html


-------------------------------------------------------------------------------------------------------------


1. Create an XHTML page to demonstrate the usage of

a. Text Formatting tags,

b. Links

c. Images

d. Tables.

<?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>Web Programming Lab Program-1</title>

</head>

<body>

<b> Defines bold text </b> <br />

<em> Defines emphasized text </em> <br />

<i> Defines a part of text in an alternate voice or mood </i> <br />

<small> Defines smaller text </small><br />

<strong> Defines important text </strong>

<sub>Defines subscripted text </sub>

<sup> Defines superscripted text </sup><br />

<ins> Defines inserted text </ins><br />

<del> Defines deleted text </del> <br />

<mark> Defines marked/highlighted text </mark> <br />

<linkrel="stylesheet" type="text/css" href="theme.css"><br />

<imgsrc="smiley.gif" alt="Smiley face" height="42" width="42"><br />

<table border="1" cellpadding="1" cellspacing="2" summary="This table gives the details

about coffee consumed by each person">

<caption>Cups of coffee consumed by each person</caption>

<tr>

<th>Name</th>

<th>Cups</th>

<th>Type</th>

<th>Sugar</th>

</tr>

</table>

</body></html>


-------------------------------------------------------------------------------------------------------------


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

<?xml version="1.0" encoding="utf-8"?>




<head>

<style>

h1 {color:red;}

h2 {color: green;}

p {margin-left:100px;}

</style>

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

<title>Web Programming Lab Program-2</title>

</head>

<body>

<h1> This header is 36 pt</h1>

<h2> This header is black </h2>

<p> This paragraph has a left margin of 50 pixels </p>

<hr/>

<table>

<tr>

<th> Name </th>

<th> Email </th>

<th> Phone number </th>

</tr>

<tr>

<td> Xyz </td>

<td> [email protected] </td>

<td> 12345 </td>

</tr>

<tr>

<td> Qwerty </td>


<td> 987654 </td>

</tr>

<tr>

Basic.css table { border: 2px solid red; }

th{ border: 2px solid blue; }

td { border: 2px solid blue; }

ol { font-size:16 ; list-style:lower-roman; font-color: red;}

p { font-size:90%; margin-left:100px; }


-------------------------------------------------------------------------------------------------------------


<td>Zaqwsx</td>


<td> 78563 </td>

</tr>

</table>

<hr />

This is an ordered list.

<ol>

<li>MCA </li>

<li>ISE </li>

<li>CSE </li>

<li>ECE </li>

</ol>

<p>

<span>This is some span text.</span>

This is some random text.

<span>This is some more span text.</span>

</p>

</body></html>


-------------------------------------------------------------------------------------------------------------


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





<body>

<script type="text/javascript">

var fib1=0,fib2=1,fib=0;

var num = prompt("Enter a number : \n", "");

if(num >0 && num !=null)

{

document.write("<h1>"+num+" fibonacci are<br></h1>");

if(num==1)

{

document.write("<h1>"+fib1+"</h1>");

}

else

{

document.write("<h1>"+fib1+"<br>"+fib2+"</h1>");

for(i=3;i<=num;i++)

{

fib=fib1+fib2;

document.write("<br><h1>"+fib+"</h1>");

fib1=fib2;

fib2=fib;

}

}

}

else

alert("No input supplied");

</script>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


3 b. Input: A number n obtained using prompt Output: A table of numbers from 1 to n and their

squares using alert





<body>


var num = prompt("Enter a number : \n", "");

if(num >0 && num !=null)

{

msgstr="Number and its Squares are \n";

for(i=1;i <= num; i++)

{

msgstr = msgstr + i + " - " + i*i + "\n";

}

alert(msgstr)

}

else

alert("No input supplied");

</script>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


4. Develop and demonstrate using JavaScript a XHTML document that displays random

numbers (integers)

<?xml version="1.0" encoding="utf-8"?>



<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Random Numbers</title> </head>

<body>

<h1>

Printing Random Numbers

</h1>


var num = prompt("Enter a number:","");

//return a random integer between 0 and 100

for (i=0; i<num; i++)

{

document.write(Math.floor(Math.random()*100),"<br />");

}

</script>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


5. A) Develop and demonstrate, using JavaScript script, a XHTML document that collects

the USN ( the valid format is: A digit from 1 to 4 followed by two upper

case characters followed by two digits followed by two upper case 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.

<?xml version="1.0"encoding="utf-8"?>

<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml 11//DTD/xhtml 11 dtd">


<head>

<title> lab prog 4a </title>

</head>

<body>


function func(usn)

{

var reg=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][A-Z][0-9][0-9]$/;

if(!usn.value.match(reg)||usn.value.length==0)

{

alert("invalid enter a valid usn");

return false;

}

else

alert("its valid");

}

</script>

<form>

enter the USN:

<input type="text" name="usn" size="30">

<input type="button" value="click" onclick="func(usn)">

</form>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


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

8

<?xml version="1.0"encoding="utf-8"?>

<!DOCTYPE html PUBLIC"-//w3c//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml 11//DTD/xhtml 11 dtd">


<head>

<title> lab prog 4bb </title>

</head>

<body>


function func(usn,sem)

{

var reg=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][A-Z][0-9][0-9]$/;

var se=/[1-6]$/;

if(!usn.value.match(reg)||usn.value.length==0)

{

alert("invalid enter a valid usn");

return false;

}

else if(!sem.value.match(se)||sem.value.length==0)

{

alert("invalid enter valid sem");

return false;

}

else

alert("its valid");

}

</script>

<form>

Enter your USN number in [1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][A-Z][0-9][0-9] format:

<input type="text" name="usn" size="30"><br>

Enter your Sem. in D[1-6] format:<input type="text" name="sem" size="30"><br>

<input type="button" value="check Field" onclick="func(usn,sem)">

</form>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


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.


<head>

<title>The Stacking Order</title>

<style type="text/css">

.layer1style

{

border:solid thick black;

padding:1em;

width:750px;

background-color:red;

position:absolute;

top:100px;

left:200px;

z-Index:0;

}

.layer2style

{

border:solid thick orange;

padding:1em;

width:750px;

background-color:skyblue;

position:absolute;

top:120px;

left:220px;

z-Index:0;

}

.layer3style

{

border:solid thick green;

padding:1em;

width:750px;

background-color:purple;

position:absolute;

top:140px;


-------------------------------------------------------------------------------------------------------------


left:240px;

z-Index:0;

}

</style>


var topLayer="layer3";

function mover(toTop)

{

var oldTop=document.getElementById(topLayer).style;

var newTop=document.getElementById(toTop).style;

oldTop.zIndex="0";

newTop.zIndex="10";

topLayer=toTop;

}

</script>

</head>

<body>

Program includes XHTML which is a Stacking Order

<div class="layer1style" id="layer1" onClick="mover('layer1')">

If you dream it, you can do it.

</div>


Knowing is not enough; we must apply. Willing is not enough; we must do.

</div>


Either you run the day, or the day runs you.

</div>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


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.


<head>

<title>The Stacking Order</title>

<style type="text/css">

.layer1style

{

border:solid thick black;

padding:1em;

width:750px;

background-color:red;

position:absolute;

top:100px;

left:400px;

z-index:1;

}

.layer2style

{

border:solid thick orange;

padding:1em;

width:750px;

background-color:blue;

position:absolute;

top:120px;

left:420px;

z-index:2;

}

.layer3style

{

border:solid thick green;

padding:1em;

width:750px;

background-color:purple;

position:absolute;

top:140px;

left:440px;

z-index:3;

}


-------------------------------------------------------------------------------------------------------------


</style>


var topLayer="layer3";

var origpos;

function mover(toTop,pos)

{

var newTop=document.getElementById(toTop).style;

newTop.zIndex="10";

topLayer=document.getElementById(toTop).id;

origpos=pos;

}

function moveBack()

{

document.getElementById(topLayer).style.zIndex=origpos;

}

</script>

</head>

<body>

Program includes XHTML which is a Stacking Order

<div class="layer1style" id="layer1" onmouseover=mover('layer1','1')

onmouseout=moveBack()>

If you dream it, you can do it.

</div>



Knowing is not enough; we must apply. Willing is not enough; we must do.

</div>



Either you run the day, or the day runs you.

</div>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


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

events

<html>

<head>

<script>

function onLoad()

{

alert("Page is loaded");

}

function onFocus(x)

{

x.style.background="yellow";

}

</script>

</head>

<body onload="onLoad()">

Enter your name: <input type="text" onfocus="onFocus(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>

</body>

</html>


-------------------------------------------------------------------------------------------------------------


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,

Brach, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS

style sheet and use it to display the document.

Filename: 8a.xml

<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "8a.xsl" ?>

<students>

<VTU>

<USN> 1ST10MCA10 </USN>

<name> CHIDU </name>

<college> S.a.I.T </college>

<branch> MCA</branch>

<YOJ> 2010 </YOJ>

<email> [email protected] </email>

</VTU>

<VTU>


<name> CHANDU </name>



<YOJ> 2010 </YOJ>


</VTU>

<VTU>


<name> JEEVAN </name>



<YOJ> 2010 </YOJ>


</VTU></students>


-------------------------------------------------------------------------------------------------------------


Filename: 8a.xsl


<xsl:stylesheet version = "1.0"

xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"

xmlns = "http://www.w3.org/1999/xhtml" >

<xsl:template match = "students">

<h2> VTU Students' Descriptions </h2>

<xsl:for-each select = "VTU">

<span style = "font-style: italic; color: blue;"> USN: </span>

<xsl:value-of select = "USN" /> <br />

<span style = "font-style: italic; color: blue;"> Name: </span>

<xsl:value-of select = "name" /> <br />

<span style = "font-style: italic; color: blue;"> College: </span>

<xsl:value-of select = "college" /> <br />

<span style = "font-style: italic; color: blue;"> Branch: </span>

<xsl:value-of select = "branch" /> <br />

<span style = "font-style: italic; color: blue;"> Year of Join: </span>

<xsl:value-of select = "YOJ" /> <br />

<span style = "font-style: italic; color: blue;"> E-Mail: </span>

<xsl:value-of select = "email" /> <br /> <br />

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>


-------------------------------------------------------------------------------------------------------------


8.b Create an XSLT style sheet for one student element of the above document and use it to

create a display of that element.

Filename: 8b.xml


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

<VTU>

<USN>1RE13MCA10 </USN>

<name> AAA </name>

<college> REVA </college>

<branch> MCA </branch>

<YOJ> 2013 </YOJ>


</VTU>

Filename: 8b.xsl




<xsl:stylesheet version = "1.0"

xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"

xmlns = "http://www.w3.org/1999/xhtml">

<xsl:template match = "VTU">

<html>

<head>

<title> Style sheet for 8b.xml </title>

</head>

<body>

<h2> VTU Student Description </h2>

<span style = "font-style: italic; color: blue;"> USN: </span>

<xsl:value-of select = "USN" /> <br />

<span style = "font-style: italic; color: blue;"> Name:

</span>

<xsl:value-of select = "name" /> <br />

<span style = "font-style: italic; color: blue;"> College:

</span>

<xsl:value-of select = "college" /> <br />

<span style = "font-style: italic; color: blue;"> Branch:

</span>

<xsl:value-of select = "branch" /> <br />

<span style = "font-style: italic; color: blue;"> Year of Join:

</span>

<xsl:value-of select = "YOJ" /> <br />

<span style = "font-style: italic; color: blue;"> E-Mail:

</span>

<xsl:value-of select = "email" /> <br />


-------------------------------------------------------------------------------------------------------------


</body></html>

</xsl:template>

</xsl:stylesheet>

FOR PERL PROGRAMS:

1) Login to super user by typing su

2) cd / var/www/cgi-bin

3) Service httpd start

4) gedit filename.pl ex: gedit prg9.pl

5) Chmod 777 prg9.pl

6) Run program in # prompt to check if any

errors

Type this on # prompt. perl prg9.pl

Execute now on browser:

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

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


-------------------------------------------------------------------------------------------------------------


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

#!/usr/bin/perl

$var1 = "Hello World";

$var2 = 14.6;

@arr1 = (0,1,2,3,4);

@arr2 = ("zero","one","two","three","four");

print $var1;

print (" ",$var2,"\n");

print (@arr1,"\n");

print (@arr2,"\n\n");

@arr3 = @arr1

print (@arr3,"\n");

print "\n";

print ($arr1[0], "\n"); # Print specific array elements (scalar values)

print ($arr2[3], "\n");

print "\n";

$arr2[1] = $arr1[1

$, = " "; # Kewlness: Changing the separator between array elements

print (@arr1,"\n");


print (@arr1,"\n");


print (%hash1,"\n\n");

$arr1[4] = $var1;

print (@arr1,"\n");

$arr2[7] = $var2; print (@arr2,"\n\n");

for ($i=0; $i<7; $i++) # Loop through all elements in array 1

{ print (arr1[$i], "\n"); #Print Hash value if it exists

}


-------------------------------------------------------------------------------------------------------------


10. Write a Perl program to display various Server information like Server Name, Server

Software, Server protocol, CGI Revision etc.

#!/usr/bin/perl

use CGI':standard';

print "content-type:text/html","\n\n";

print "<html>\n";

print "<head><title> About this server </title></head>\n";

print "<body><h1> About this server </h1>","\n";

print "<hr>";

print "Server name :",$ENV{'SERVER_NAME'},"<br>";

print "Running on port :",$ENV{'SERVER_PORT'},"<br>";

print "Server Software :",$ENV{'SERVER_SOFTWARE'},"<br>";

print "CGI-Revision :",$ENV{'GATEWAY_INTERFACE'},"<br>";

print "<hr>\n";

print "</body></html>\n";

exit(0);

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

server

#!/usr/bin/perl

use CGI ':standard';

print "Refresh: 1\n";

print "Content-Type: text/html\n\n";

print start_html(-title=>"Program 8",-bgcolor=>"green” -text=>"white");

($s,$m,$h)=localtime(time);

print br,br,"The current system time is $h:$m:$s";

print br,br,hr,"In words $h hours $m minutes $s seconds";

print end_html;


-------------------------------------------------------------------------------------------------------------


12. Write a Perl program to accept the User Name and display a greeting message

randomlychosen from a list of 4 greeting messages

#!/usr/bin/perl


use CGI::Carp qw(warningsToBrowser);

@coins = ("Welcome to Web Programming Lab","Have a nice time in lab", "Practice all the programs",

"well done Good Day");

$range = 4;

$random_number = int(rand($range));

if(param)

{

print header();

print start_html(-title=>"User Name",-bgcolor=>"Pink",-text=>"blue");

$cmd=param("name");

print b("Hello $cmd, $coins[$random_number]"),br();

print start_form();

print submit(-value=>"Back");

print end_form();

print end_html();

}

else

{

print header();

print start_html(-title=>"Enter user name",-bgcolor=>"yellow",-text=>"blue");

print start_form(),textfield(-name=>"name",-value=>" "), submit(-name=>"submit",-

value=>"Submit"),reset();

print end_form();

print end_html();

}

13. Write a Perl program to keep track of the number of visitors visiting the web page and

todisplay this count of visitors with proper headings

#!/usr/bin/perl


use CGI::Carp qw(warningsToBrowser);

print header();

print start_html(-title=>"WebPage Counter", -bgcolor=>"Pink",-text=>"blue");

open(FILE,'<count.txt');


-------------------------------------------------------------------------------------------------------------


$count=<FILE>;

close(FILE);

$count++;

open(FILE,'>count.txt');

print FILE "$count";

print b("This page has been viewed $count times");

close(FILE);

print end_html();

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

#!/usr/bin/perl

use CGI':standard';

@last_day = cookie('last_time');

$day_of_week = (qw(Sunday Monday Tuesday Wednesday Thursday Friday Saturday)) [(localtime)[6]];

$month = (qw(January February March April May June July August September October November

December)) [(localtime)[4]];

$day_of_month = (localtime) [3];

@day_stuff = ($day_of_week,$day_of_month, $month);

$day_cookie = cookie(-name => 'last_time', -value => \@day_stuff, -expires =>'+5d');

print header(-cookie => $day_cookie);

print start_html('this is day_cookie.pl') ;

if (scalar(@last_day) == 0)

{

print "welcome to u on your first visit <br />";

}

else

{

($day_of_week,$day_of_month,$month) = @last_day;

print "welcome back <br />","u r last visit

wason","$day_of_week,$month,$day_of_month <br />";

}

exit(0);

print end_html();

Documents

REVA INSTITUTE OF TECHNOLOGY AND … · REVA INSTITUTE OF TECHNOLOGY AND MANAGEMENT Kattigenahalli, JalaHobli, Yelahanka, Bangalore – 560064 Department of Master of Computer Applications