web programming lab

PESIT Bengaluru South Campus – Education for the Real World – LAB MANUAL – BE. VII-Sem IS 06CSL78

PES Institute Of Technology

Bengaluru South Campus

DEPARTMENT OF INFORMATION SCIENCE ENGINEERING

VII SEMESTER

WEB PROGRAMMING LABORATORY MANUAL

SUBJECT CODE: 06CSL78

By

Mr.Sreenath M.V


PROBLEM STATEMENT

1) Develop and demonstrate a XHTML document that illustrates the use of external

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

OBJECTIVE:

To learn how to use external CSS and to understand the advantages of external CSS over

document and inline level of CSS and also to know the usage of span tag.

PROCEDURE:

Create an HTML document with ordered list and Table tag for book store information

Create an external CSS file

Link the external CSS file to HTML document created above, using the HTML tag link

<link rel='stylesheet' href='style.css'/>

Include the span tag to change the color and size of the word in a paragraph (paragraph is all

ready styled by external CSS, so span tag overrides external CSS)

HTML File

<html>

<head><title>External Style Sheet</title>

<link rel='stylesheet' href='style.css'/>

</head>

<body>

<p align='center'><span>Welcome to

<span>bookstore.com</span><sup>™</sup> </span></p><br/>

<h2>Find your favorite books here.</h2>

Buy books in 3 easy steps:

<ol>

<li>Search for your favorite book.</li>

<li>Add to cart.</li>

<li>Pay using your Credit Card.</li>

</ol>

<strong>The books in our store: </strong> <br/>

<table border=1>

<tr>

<th>ISBN </th>

<th>Book title </th>

<th>Author </th>


<th>Price </th>

</tr>

<tr>

<td>29238234033</td>

<td>Programming the Web</td>

<td>Sebesta</td>

<td>340</td>

</tr>

<tr>

<td>89430029345</td>

<td>Mastering JavaScript</td>

<td>Manish</td>

<td>295</td>

</tr>

<tr>

<td>345788432567</td>

<td>Ruby on Rails</td>

<td>Paul Storm</td>

<td>550</td>

</tr>

</table>

</body>

</html>

CSS FILE

* {padding:0px;}

* {color:green;}

* {margin:10px;}

p{

font-family:Arial;

font-style:italic;

font-size:20px;

font-weight:bold;

border:5px dotted red;

}

ol

{

font-family:Arial;

font-style:italic;


font-size:15px;

font-weight:bold;

}

table

{

border:1px solid green;

width:800px;

text-align:center;

}

Sample Output


PROBLEM STATEMENT

2) Develop and demonstrate a XHTML file that includes JavaScript 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

OBJECTIVE:

To understand how to include java script in XHTML and to learn generating Fibonacci series

and squares of numbers using java script and XHTML

PROCEDURE:

Create an html program and include java script to read numbers from the keyboard

Promt() is the java script function used to read data from the keyboard

Find the Fibonacci series using

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

{

c=a+b;

arr[i]=c;

a=b;

b=c;

}

Read another number from the keyboard

var x1=prompt("Enter the limit for squares");

find the squares using

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

{

mul=i*i;

arr2[i]=mul;

}

Program to Find the Fibonacci series and also to find squares


<html>

<head>

<script type="text/javascript">

var x=prompt("Enter the limit of fibanacci series");

var arr=new Array(10);

var i,a=0,b=1,c;

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

{

c=a+b;

arr[i]=c;

a=b;

b=c;

}

alert(arr);

var x1=prompt("Enter the limit for squares");

var arr2=new Array(10);

var i,a=0,b=1,c;

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

{

mul=i*i;

arr2[i]=mul;

}

alert(arr2);

</script></head>

<body bgcolor="">

</body>

</html>

Sample Output


PROBLEM STATEMENT

3) Develop and demonstrate a XHTML file that includes JavaScript 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 understand how to include java script in XHTML and to learn reversing a number using

script.

PROCEDURE:

Create an XHTML program and include java script

Read data from the keyboard using promt() function

Find The position in the string of the left-most vowel Using var p=txt.search(/[aeiou]/);

Similarly find the reverse of a number using

while(n!=0)

{

r=n%10;

sum=(10*sum)+r;

n=Math.floor(n/10);

}

Program

<html>

<head>

<script>

function findpos(txt)

{

txt=txt.toLowerCase();

var p=txt.search(/[aeiou]/);

alert(p);

}


function reverse(n)

{

sum=0;

while(n!=0)

{

r=n%10;

sum=(10*sum)+r;

n=Math.floor(n/10);

}

alert(sum);

}

</script>

</head>

<body bgcolor="RED">

<marquee> LAB PGM 3</marquee>

<BR><BR><BR><BR>

<CENTER>

<form>

ENTER A STRING:<INPUT TYPE="TEXT" NAME="t1">

<BR><BR><input type="button" name=click value="FIND POSITION OF VOWEL"

onclick=findpos(t1.value);>

<BR><BR><BR><BR>

ENTER A NUMBER:<INPUT TYPE="TEXT" NAME="t2">

<BR><BR><input type="button" name=click value="REVERSE THE NUMBER"

onclick=reverse(t2.value);>

</form>

</CENTER>

</body>

</html>

Sample Out put


PROBLEM STATEMENT

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)

OBJECTIVE:

To understand how to include java script in XHTML and to know how to validate VTU USN

and semester values entered by the user

PROCEDURE:


Create a user defined function to validate VTU USN using regular expression

var pos = usn.value.match(/[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/);

if(pos)

{

alert("PATTERN VALID !!!!!!");

}

else

{

alert("PATTERN INVALID !!!!!!");

}

Similarly

Validate the semester using var pos = sem.value.match(/[1-8]{1}$/);

else if(pos)

{



}

else

{


sem.focus();

sem.select();

return false;

}

Note: match function returns the pattern if there is a match otherwise it returns null

Program 4ab.html

<html>

<head>


function validateusn()

{

var usn = document.getElementById("usn");

var pos = usn.value.match(/[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/);

alert(pos);

if(usn.value=="")

{

alert("PLEASE ENTER THE USN !!!!!!");

usn.focus();

return false;

}


if(pos)

{


}

else

{


}

}

function validatesem()

{

var sem = document.getElementById("sem");

var pos = sem.value.match(/[1-8]{1}$/);

if(sem.value=="")

{

alert("PLEASE ENTER THE SEM !!!!!!");

sem.focus();

return false;

}

else if(pos)

{


}

else

{


sem.focus();

sem.select();


return false;

}

}

</script>

</head>

<body>

<h2 align="center"><u> Validation Example </u></h2>

<form>

<p>

Enter USN : <input type="text" id="usn">For Ex: 1PE08IS030<br><br><br>

<input type="button" value="verify USN" onclick="validateusn();">

<br><br>

Enter SEM :<input type="text" id="sem">(1-8)<br><br>

<input type="button" value="verify SEM" onclick="validatesem()">

<input type="RESET" value="Clear All">

</p>

</form>

</body>

</html>


Sample output

PROBLEM STATEMENT

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.

OBJECTIVE:

To understand stacking of images and z-index property of HTML controls

PROCEDURE:


Create three paragraphs using <p> tag and apply some style to it

Using z-index property if an HTML Element, change the position of the paragraph

function mover(toTop)

{


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

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

oldTop.zIndex="0";

newTop.zIndex="10";

topLayer=toTop;

}

Similarly for the part B


var topLayer="layer3";

var origpos;

function mover(toTop,pos)

{


newTop.zIndex="10";

topLayer=document.getElementById(toTop).id;

origpos=pos;

}

function moveBack()

{

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

}

</script>

Program 5a.html

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

<head>

<meta http-equiv="content-type" content="tet/html; charset=UTF-8">

<title>The Stacking Order</title>


left:240px;

z-Index:0;

}

</style>



function mover(toTop)

{

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


oldTop.zIndex="0";

newTop.zIndex="10";

topLayer=toTop;

}

</script>

</head>

<body>

Program includes XHTML which is a Stacking Order

<p class="plane1" id="layer1" onMouseOver="mover('layer1')">

WEB LAB

</p>

<p class="plane2" id="layer2" onMouseOver="mover('layer2')">

Information Science

</p>

<div class="plane3" id="layer3" onMouseOver="mover('layer3')">

Seventh Sem

</p>

</body></html>

Program 5b.html

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

<head>


<title>The Stacking Order</title>

<style type="text/css">

.layer1style

{

border:solid thick black;

padding:1em;

width:300px;

background-color:green;

position:absolute;

top:100px;

left:400px;

z-index:1;

}

.layer2style

{

border:solid thick red;

padding:1em;

width:300px;

background-color:blue;

position:absolute;

top:120px;

left:420px;

z-index:2;

}

.layer3style

{

border:solid thick green;

padding:1em;

width:300px;

background-color:purple;

position:absolute;


top:140px;

left:440px;

z-index:3;

}

</style>



var origpos;

function mover(toTop,pos)

{


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()">

PESIT south campus

</div>



Information Science


</div>



Seventh Sem

</div>

</body>

</html>

Sample output

PROBLEM STATEMENT

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.

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

create a display of that element.

OBJECTIVE:

To understand how to create XML files to store information and to display this information using

CSS

PROCEDURE:


Create an XML program to store student information

Link the CSS file to XML program

<?xml-stylesheet type="text/css" href="6a.css"?>

Write an external CSS for the XML file created above

Program

Program 6a.xml

<?xml-stylesheet type="text/css" href="6a.css"?>

<students>

<student>

<usn>USN=123</usn>

<name>NAME=kumar</name>

<sem>SEM=5</sem>

</student>

</students>

Program 6a.css

student

{

display: block;margin-top:50px;

}

usn

{

color: red; font-size:16px;font-style:times;

}

name


{

color: green; font-size:12pt;font-weight:bold;

}

sem

{

color: orange; font-size:12pt;font-weight:bold;

}

Program 6b.xml

This is just sample code (include real world data of more students)

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

<students>

<student>

<usn>123</usn>

</student>

</students>

Program 6b.xsl

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

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

<xsl:template match="students">

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

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

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

</xsl:for-each>

</xsl:template>


</xsl:stylesheet>

Sample output of 6a.xml

PROBLEM STATEMENT

7 a) Program to Display the various server information like -, server software, protocol,

cgi-revision etc.

b) Program to accept UNIX/windows command from HTML form and to Display the

output of the command executed.

OBJECTIVE:

To understand the various server information like server name, server version and protocol used

in client server communication

PROCEDURE:

PERL INTERPRETER PATH

First line of Perl program specifies the path to perl interpreter.

HEADER

It notifies that the web server sends back html content to the client machine through

content-type header.

BODY

The CGI environment variables ($ENV) are used to display the following details about the

server machine: SERVER_NAME: Hostname of the server.

SERVER_SOFTWARE: The name and version of the server software

that is answering client request.

SERVER_PROTOCOL: The name and revision of the request protocol.

SERVER_PORT: The port number on which the server is listening

GATEWAY_INTERFACE: The revision of the CGI that the server uses.


PROGRAM 7a.pl

#!c:/xampp/bin/perl.exe

use CGI':standard';

print header();

Print start_html();

print "<HR><PRE>";

print "Server Name:sdf$ENV{'SERVER_NAME'} <BR>" "\n";

print "Running on Port: " $ENV{'SERVER_PORT'} "<BR>" "\n";

print "Server Software: " $ENV{'SERVER_SOFTWARE'} "<BR>" "\n";

print "Server Protocol: " $ENV{'SERVER_PROTOCOL'} "<BR>" "\n";

print "CGI Revision: " $ENV{'GATEWAY_INTERFACE'} "<BR>" "\n";

print "<HR></PRE>" "\n";

Print end_html()";

Sample Output:

Server name: pesselab600

Running on Port: 80

Server Software: NCSA/1.4.2

Server Protocol: HTTP/1.0

PROGRAM 7b

OBJECTIVE:

To understand how the system commands are executed by the Perl program

PROCEDURE:


First line of Perl program specifies the path to Perl interpreter.


HEADER



BODY

The UNIX command is sent from html page and is received using param() function

UNIX command is executed and the output is returned to the client machine.

7b.html (to be done by students)

7b.pl


use CGI':standard';

print header();

$cmd=param("cmd");

$count=4;

$temp=`$cmd`; #or system($cmd);

print $temp;

Sample Output:

Output for date command: Thu Oct 4 21:34:21 IST 2007

PROBLEM STATEMENT

6 A. Program To Accept The User Name And Display a Greeting Message randomly chosen

from a list of 4 greeting messages.

OBJECTIVE:

To understand how to well come a user, when he/she logs in to your website or any web

application.


PROCEDURE:



HEADER



BODY

The username and greeting message is sent from html page and is received using param()

The user is greeted based on the greeting message received.

Program

8a.html(to be done by students)

8a.pl


use CGI':standard';

print header();

#$name=param("nam");

$count=4;

@arr=("hello","hi","welcome","how r u");

$rand=rand($count);

$msg=$arr[$rand];

print b("HI $name your greeting message is $msg");

Sample Output

Rahul your greeting message is: Hello

Program 8b.pl

#!c:/xampp/perl/bin/perl.exe

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

open(FILE,"<count.dat");

$cnt=<FILE>;

close(FILE);

$cnt++;


open(FILE,">count.dat");

print FILE $cnt;

close (FILE);

print "this page has been accessed $cnt times";

SAMPLE OUTPUT

this page has been accessed 1o times

PROBLEM STATEMENT

9. Program To Display a Digital Clock Which Displays The Current Time Of The Server.

OBJECTIVE:

To fetch the server time which is assumed to be correct time, the aim of the program is just to

fetch the server time. Later we can change the client’s time and synchronize the time so that

server and all clients will have the same time.

PROCEDURE:



HEADER



BODY

The localtime(time) method returns the current time of the server and based on

the server time 24 hour format clock is displayed.

Program 9.pl

#!c:/perl/bin/perl.exe

use CGI qw(:standard);

print "Refresh: 1\n";

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


print "<html>";

print "<body>";

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

print "<h1 style=color:red;font-size:150;text-align:center;margin-top:200;border-style:dashed;>

$h:$m:$s </h1>";

print "</body>";

print "</html>";

PROBLEM STATEMENT

10. Program to Insert New Name And Age Information Entered by the User into the Table

Created by MY SQL And To Display The Current Contents of this Table.

OBJECTIVE:

To understand how to connect to database using PERL and perform SQL operations.

PROCEDURE:



HEADER



BODY

Connect to MY SQL using three simple steps

1) DBI->connect();

2) $con->prepare();

3) $stat1->execute();

In MYSQL

create database college

create table student (name varchar(20), age int);


Program

Lab10.html

<html>

<body>

<form action="http://localhost/lab/Lab10.pl" method="get">

Enter your information<br><br>

NAME <input type="text" name="name"><br><br>

AGE <input type="text" name="age"><br><br>

<input type="submit" value="insert into database">

</form>

</body>

</html>

Lab10.pl

#!c:/xampp/perl/bin/perl.exe

use CGI ':standard';

use DBI;

print header();

$name=param("name");

$age=param("age");

$con=DBI->connect("DBI:mysql:college","root","");

$stat1=$con->prepare("insert into student values(?,?)");

$stat1->execute($name,$age);

$stat2=$con->prepare("select *from student");

$stat2->execute();

print "Present information in table <BR>";

while(@row=$stat2->fetchrow_array())

{

print "@row <BR>";

}


Sample Output

Data inserted successfully

Present information in table

Name age

Rahul 24

Ramesh 25

PROBLEM STATEMENT

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.

OBJECTIVE:

To understand how to create Cookies in PHP and their usage.

PROCEDURE:

Create a PHP program to set the cookie using function setcookie($name,$tdate,$no_day);

Check the cookie is set or not using isset($_COOKIE["viscooki"])

The isset() function return true if cookie exists otherwise false

Program

<?php

$no_day=60*60*24*30+time();

$tdate=date("h:m:s a m/d/y");

$name="viscooki";

setcookie($name,$tdate,$no_day);

if(isset($_COOKIE["viscooki"]))

{

$lastvisit=$_COOKIE["viscooki"];


print "<center><b> your last visit was".$lastvisit;

}

else

{

print "no cookie available,please set the cookie";

}

?>

Note: don’t write <html> tag at the beginning of this program.

Sample Output

no cookie available, please set the cookie

PROBLEM STATEMENT

12) PHP program to store page views count in SESSION, to increment the count

on each refresh, and to show the count on web page.

OBJECTIVE:

To understand how to create Cookies in PHP and their usage.

PROCEDURE:

In web interaction, a session is a series of interactions between two communication end points

that occur during the span of a single connection. Typically, one end point requests a connection

with another specified end point and if that end point replies agreeing to the connection, the end

points take turns exchanging commands and data ("talking to each other"). The session begins

when the connection is established at both ends and terminates when the connection is ended.

Create a PHP program to start the session

Register the session in a session variable

Isset() function return true if session exists otherwise false, using this check the existence of

session


Program

<?php

session_start();

session_register("count");

if (!isset($_SESSION))

{

$_SESSION["count"] = 0;

echo "<p>Session set and Counter initialized</p>\n";

}

else

{

$val=$_SESSION["count"]++;

}

$val=$_SESSION["count"];

print "<p>The counter is now <b>$val</b></p>".

"<p>refresh this page to increment counter</p>";

?>

Sample Output

The counter is now 10

refresh this page to increment counter

PROBLEM STATEMENT

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.

OBJECTIVE:

To understand how to connect to MYSQL in PHP and to know various SQL operations.

PROCEDURE:

Connect to MY SQL using three simple steps and perform SQL operations.

1) mysql_connect(); // using host name, username and password

2) mysql_dbquuery(); // from a database

3) mysql_fetch_row($result))//from the result set


4) print the result using foreach loop

foreach($row as $col)

{

print $col;

}

Program

13.html

<html>

<body>

<form action="http://localhost/lab/ins.php"">

ENTER THE FOLLWING FIELDS <br /><br />

NAME <input type="text" name="name"><br /><br />

ADDR LINE1 <input type="text" name="add1"><br /><br />

ADDR LINE2 <input type="text" name="add2"><br /><br />

EMAIL ADDR <input type="text" name="email"><br /><br />

<input type="submit" value="INSERT"></p>

<input type="reset" value="CLEAR ALL">

</form>

<HR>

<form action="http://localhost/lab/search.php">

ENTER THE NAME TO BE SEARCHED<br /><br />

NAME <input type="text" name="name"><br /><br />

<input type="submit" value="SEARCH">

</form>

</body>

</html>

Ins.php program

<?php

$con=mysql_connect("localhost","root","root") or die("could not con");

$nam=$_REQUEST["name"];

$add1=$_REQUEST["add1"];

$add2=$_REQUEST["add2"];

$email=$_REQUEST["email"];

//for inserting


mysql_db_query("college","insert into student

values('$nam','$add1','$add2','$email')");

print "data inserted successfully";

mysql_close($con);

?>

Search.php program

<?php

$con=mysql_connect("localhost","root") or die("could not con");

$name=$_REQUEST["name"];

$qry="select *from student where name='$name'";

$result=mysql_db_query("college", $qry);

while($row=mysql_fetch_row($result))

{


{

print $col;

}

}

mysql_close($con);

?>

Sample Output

PROBLEM STATEMENT

14) Using PHP and MySQL develop a program to accept book information viz. Accession

number, title, authors, edition and publisher from 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.

the values in MySQL table. Retrieve and display the data based on Name.


OBJECTIVE:

To understand how to connect to MYSQL in PHP and to know various SQL operations.

PROCEDURE:

Connect to MY SQL using three simple steps and perform SQL operations.

1) mysql_connect(); // using host name, username and password

2) mysql_selectdb(); // select a database

3) mysql_query()// query from the database

4) mysql_fetch_row($result))//from the result set

5) print the result using foreach loop

6) create a table called book in MY SQL

7) create table book(accno varchar(20),title varchar(20),author varchar(20),edition int,

publisher varchar(20))

Program

14.html

<html>

<body>

<form action="http://localhost/lab/insbook.php"">

ENTER THE FOLLWING FIELDS <br /><br />

ACC NO <input type="text" name="accno"><br /><br />

TITLE <input type="text" name="title"><br /><br />

AUTHOR <input type="text" name="author"><br /><br />

EDITION <input type="text" name="edition"><br /><br />

PUBLISHER <input type="text" name="publisher"><br /><br />

<input type="submit" value="INSERT"></p>

<input type="reset" value="CLEAR ALL">

</form>

<HR>


<form action="http://localhost/lab/searchbook.php">

ENTER THE TITLE TO BE SEARCHED<br /><br />

NAME <input type="text" name="title"><br /><br />

<input type="submit" value="SEARCH">

</form>

</body>

</html>

insbook.php

<?php

$accno=$_REQUEST["accno"];

$title=$_REQUEST["title"];

$author=$_REQUEST["author"];

$edition=$_REQUEST["edition"];

$publisher=$_REQUEST["publisher"];

$con=mysql_connect("localhost","root","");

mysql_select_db("college");

$qry="insert into book(accno,title,author,edition,publisher)

values('$accno','$title','$author','$edition','$publisher')";

mysql_query($qry);

$qry="select * from book";

$result=mysql_query($qry);


{


{

print $col;

} print "<BR>";

}

?>

searchbook.php

<?php


$con=mysql_connect("localhost","root") or die("could not con");

$title=$_REQUEST["title"];

$qry="select *from book where title like '%$title%'";

$result=mysql_db_query("college", $qry);


{


{

print $col;

}

}

mysql_close($con);

?>

Sample output

web programming lab

Documents