web manual

WEB PROGRAMMING LAB MANUAL

CSE, CITECH Page 1

1. Develop and demonstrate a XHTML document that illustrates the use external style

sheet, ordered list, table, borders, padding, color, and the tag.

Prg1.html

program1

ordered list

india

pakistan

china

GOLD

SILVER

BRONZE

INDIA

0

1

2

CHINA

0

1

2

JAPAN

1


CSE, CITECH Page 2

0

2

when we plan for

saving our hard earned money,our focus is always to ensure that they are good.

Prg1a.css

P

{font-family:Times New roman;

font-size:10pt;

font-variant:normal;

font-style:italic;

font-weight:bolder;

text-decoration:underline;

text-indent:0.5in;

color:red;

}

.spanred {font size:16pt;

font-weight:ligher;

color:green; }

OUTPUT:


CSE, CITECH Page 3

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

Prg2a.html

fibonacci 2.a

var a=0;

var b=1;

var c,i;

var n=prompt("enter a number"," ");

while(n


CSE, CITECH Page 4

2 b) Input: A number n obtained using prompt

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

Prg2b.html

exercisse2.b

var n=prompt("enter a positive value for n", );

while(n


CSE, CITECH Page 5

3. Develop and demonstrate a XHTML file that includes Javascript script that uses

functions for the following problems:

a) Parameter: A string

Output: The position in the string of the left-most vowel

Prg3a.html

position3.a

var str=prompt("enter a string");

var i;

document.write("the given string is:",str," ");

var len=str.length;

for(i=0;i


CSE, CITECH Page 6

3 b) Parameter: A number

Output: The number with its digits in the reverse order

Prg3b.html

exerise 3b

var r=0,d,f=0,n=prompt("enter value for n");

if(n0)

if(f==0)

document.write("reverse of given numbers is ",r," ");

INPUT: Enter the Number is: 789

OUTPUT:


CSE, CITECH Page 7

4. a) Develop and demonstrate, using Javascript script, a XHTML document that collects

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

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

prg4a.html

exercise 4a

function chkusn()

{

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 the USN:");

usn.focus();

}

if(pos!=0)

{

alert("the format is not correct!!!");

usn.focus();

usn.select();

return false;

}

else

{

alert("...the format is correct..");

return true;

}

}


CSE, CITECH Page 8

validation example

example to check the format of data entered in the txt box

usn:

document.getElementById("submit").onclick=chkusn;

INPUT:

Enter the USN: 2AB09CS001

OUTPUT:


CSE, CITECH Page 9

4b) Modify the above program with semester

Prg4b.html


CSE, CITECH Page 10

validation example

example to check the format of data entered in the text box

usn:

sem:

document.getElementById("submit").onclick=chkusn;

INPUT:

Enter the USN and SEM: 2AB09CS001 and 2.

OUTPUT:


CSE, CITECH Page 11

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.

Prg5a.html

Stacking

function bringThisUp(div1,div2,div3)

{

document.getElementById("paragraph1").style.zIndex = div1;



}

.paragraph

{

border: solid 4px;

width:4in;

height: 3in;

position: absolute;

}

#paragraph1

{

left: 3in;

top: 3in;

z-index: 0;

border-color: red;

background-color: orange;

}

#paragraph2

{

left: 3.5in;

top: 3.5in;

z-index: 1;

border-color: green;

background-color: white;

}

#paragraph3

{


CSE, CITECH Page 12

left: 4in;

top: 4in;

z-index: 2;

border-color: blue;

background-color: green;

}

Program #5a

XHTML Document to illustrate to Stacking(Z-Index) using

CSS

City Engineering College

Dept. of Information Science and Engineering

XHTML document to illustrate z-index using Javascript

Welcome to Bangalore

Welcome to CEC

Welcome to ISE Dept.

OUTPUT:

Hi welcome to Bangalore

Welcome

to ISE

Dept.

Hi welcome to

CEC


CSE, CITECH Page 13

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.

Prg5b.html

Stacking

var curIndex;

function bringThisUp(currDiv)

{

var myDiv = document.getElementById(currDiv);

curIndex = myDiv.style.zIndex;

myDiv.style.zIndex = "3";

}

function sendThisBack(currDiv)

{

var myDiv = document.getElementById(currDiv);

myDiv.style.zIndex = curIndex;

}

.paragraph

{

border: solid 4px;

width: 3in;

height: 3in;

position: absolute;

}

#paragraph1

{

left: 3in;

top: 3in;

z-index: 0;

border-color: red;

background-color: orange;

}

#paragraph2

{

left: 3.5in;

top: 3.5in;

z-index: 1;

border-color: green;

background-color: white;


CSE, CITECH Page 14

}

#paragraph3

{

left: 4in;

top: 4in;

z-index: 2;

border-color: blue;

background-color: green;

}

Program #5b

XHTML Document to illustrate to Stacking(Z-Index) Position

using CSS


Dept. of Computer Science and Engineering

XHTML document to illustrate z-index using Javascript

Welcome to Bnagalore

Welcome to CEC

Welcome to ISE Dept.

OUTPUT:

Welcome to Bangalore

Welcome to CEC

ISE


CSE, CITECH Page 15

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

college affiliated to VTU. The information must include USN, Name, Name of the College,

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

style sheet and use it to display the document.

Prg6a.xml

1CE07CS042

GOPAL


COMPUTER SCIENCE

20-july-2007

[email protected]

1CE07IS086

kashi


INFORMATION SCIENCE

26-june-2009

[email protected]

1CE07EC056

madhu


ELECTRONICS

9-mar-2002

[email protected]


CSE, CITECH Page 16

pg6a.css

student{display:block;margin-top:15px;color:blue;}

usn{display:block;color:maroon;margin-top:15px;font-sixe:16pt;}

name{display:block;color:green;margin-top:15px;font-sixe:12pt;}

college{display:block;color:red;margin-top:15px;font-sixe:12pt;}

branch{display:block;color:yellow;margin-top:15px;font-sixe:12pt;}

joindate{display:block;color:aqua;margin-top:15px;font-sixe:12pt;}

emailid{display:block;color:green;margin-top:15px;font-sixe:12pt;}

OUTPUT:

1CE07IS001

SOW

CEC

ISE

09-05-2007

[email protected]

1CE07IS002

SHEELA

CEC

ISE

09-06-2007

[email protected]

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

to create a display of that element.

Prg6b.xml

1CE08CS045

kavya

CEC

CSE

2007

[email protected]


CSE, CITECH Page 17

Prg6b.xsl

program 6b

XML Document using XSL

CEC

Dept. of ISE

VTU student from XML to XSLT

USN:

NAME:

College:

BRANCH:

YOJ:

E-MAIL:

OUTPUT:


CSE, CITECH Page 18

7. a) Write a Perl program to display various Server Information like Server Name, Server

Software, Server protocol, CGI Revision etc.

Prg7a.html

Server info

Server info display pgm

Prg7a.pl

#!/usr/bin/perl

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

printf" server information ";

print"server name:- ",$ENV{'SERVER_NAME'};

print" RUNNING PORT:- ",$ENV{'SERVER_PORT'};

print" SERVER PROTOCOL:- ",$ENV{'SERVER_PROTOCOL'};

print" SERVER SOFTWARE:- ",$ENV{'SERVER_SOFTWARE'};

print" GATEWAY INTERFACE:- ",$ENV{'GATEWAY_INTERFACE'};

print" ";

OUTPUT:

SERVER INFORMATIOM

SERVAER NAME: localhost

SERVAER PORT: 80

SERVAER PROTOCOL: HTTP/1.1

SERVAER SOFTWARE: Apache/2.2.12

GATEWAY INTERFACE: CGI


CSE, CITECH Page 19

7 b) Write a Perl program to accept UNIX command from a HTML form and to display

the output of the command executed.

prg7b.html

UNIX COMMANDS

Prg7b.pl

#!/usr/bin/perl

use CGI":standard";

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

$input=param(command);

print"";

print"command resultcommand executed:",$input;

#system($input);

print`$input`;

print"";

OUTPUT:

COMMAND result:

Command executed: date Fri Jul 29 11:01:55 IST 2011


CSE, CITECH Page 20

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

randomly chosen from a list of 4 greeting messages.

Prg8a.pl

#!/usr/bin/perl

use CGI ":standard";

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

$input=param(username);

print"hi",$input;

my @msgs=("GOOD DAY!!","@@@@WELCOME@@@@","FINE DAY","...BEST

WISES");

print "";

print $msgs[int rand scalar@msgs];

print "--visit soon........";

OUTPUT:

HI! HI!

FINE DAY GOOD DAY..!!

visit soon. visit soon.

8 b) Write a Perl program to keep track of the number of visitors visiting the web page and

to display this count of visitors, with proper headings

prg8b.pl

#!/usr/bin/perl

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

print "no of visits to this page....";

$file='color.txt';

open(INFO,$file);

$n=;

close(INFO);

print"$n";

open INFO,">color.txt";

print INFO ++$n;

close INFO;

print "";

OUTPUT:

Number of Visits to this Page 5


CSE, CITECH Page 21

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

server.

Prg9.pl

#!/usr/bin/perl

use CGI":standard";

$de=1;

print "refresh:",$de,"\n";

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

print "DIGITAL CLOCK";

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

print"The current system time is $h hours $m minutes $s seconds";

print "";

OUTPUT:

DIGITAL CLOCK

The Current System time is 12 hours 53 minutes 47 seconds

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.

Prg10.html

CONNECTION TO MYSQL

enter your information:

NAME:

AGE:


CSE, CITECH Page 22

Prg10.pl

#!/usr/bin/perl

use CGI":standard";

use DBI;

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

print "connection";

$name=param("name");

$age=param("age");

$dbh=DBI->connect("DBI:mysql:web","root","");

$sql="insert into age_info values('$name','$age')";

$qh=$dbh->prepare($sql);

$qh->execute();

print "information is successfully inserted into the database";

$qh->finish();

$sql="select * from age_info";

$sth=$dbh->prepare($sql);

$sth->execute();

print "contents of the table is..";

print "Name";

print "age";

while(($name,$age)=$sth->fetchrow())

{

print "$name$age";

}

print "";

$dbh->disconnect();

OUTPUT:

Enter your Information

Information is successfully inserted into the database

A content of the table is...

Name Age

Sow 22

Sheela 21

Anugana 13


CSE, CITECH Page 23

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.

Prg11.php


CSE, CITECH Page 24

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.

prg13.html

Mysql

program#14

XHTML Document to use of PHP & MYSQL


Dept of Computer Science and engineering

Form to insert values into table

NAME:

ADDR1:

ADDR2:

EMAIL:


CSE, CITECH Page 25

Form to retrieve values based on Title

NAME:

Prg13a.php


CSE, CITECH Page 26

{

print"";

print"$f";

print"";

}

print"";

}

print"";

mysql_close($mysql);

?>

Prg13b.php


CSE, CITECH Page 27

OUTPUT:

Hurray inserted successfully!!

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.

Prg14.html

Mysql

Program #14

XHTML Document to use of PHP & MYSQL


Dept. of Computer Science and Engineering

Form to insert values into table

ACCESSION NUMBER:

TITLE:

AUTHOR:

EDITION:

Name Address1 Address2 Email-id

sow Bangalore Karnataka [email protected]


CSE, CITECH Page 28

PUBLISHER:

Form to retrieve values based on Title

TITLE:


CSE, CITECH Page 29

Prg14a.php


CSE, CITECH Page 30

Prg14b.php

web manual

Documents