Web Technology Lab Manual

Department of Computer Science
Engineering
LAB MANUAL
WEB TECHNOLOGY LAB
K.VIGNESWARA REDDY,
ASST. PROF.
IT DEPARTMENT
Week-1
Date:
----------------------------------------------------------------------------------------------------------AIM: Design the static web pages required for an online book
store web site.
1) HOME PAGE
DESCRIPTION:
The static home page must contain three frames.
Top frame
: Logo and the college name and links to Home
page, Login page, Registration page,

Left frame
: At least four links for navigation, which will
display the catalogue of respective links.

For e.g.: When you click the link CSE the catalogue for
CSE Books should be displayed in the Right frame.
Right frame: The pages to the links in the left frame must
be loaded here. Initially this page contains description of the
web site.
PROGRAM:
Homepage
<head>
<frameset rows="20%,*">
<frame src="topframe.html"name="f1">
<frameset cols="20%,*">
<frame src="leftframe.html"name="f2">
<frame src="rightframe.html"name="f3">
</frameset>
</frameset>
</head>
OUTPUT
Top frame:
<html>
<body>
<p>
<img
Users\Documents\My
src="C:\Documents
Pictures\Sample
and
Settings\All
Pictures\Winter.jpg"
align=left width=100 height=100">

<h1 align=center>Online book store</h1>
</p>
<br>
<p>
<h2> nbsp;
<a href="homepage.html" target=_parent>
Home
</a>

<a href="login.html" target="f3">
login
</a>

<a href="registration.html" target="f3">
registration
</a>
     nbsp;
<a href="catalogue.html" target="f3">
Catalogue
</a>

<a href="cart.html" target="f3">
Cart
</a>

</h2>
</p>
</body>
</html>
OUTPUT:
Leftframe:
<html>
<body>
<a
href=cse.html
target="f3"><h3>CSE</h3>
</a><br><br><br><br><br>
<a
href=ece.html
target="f3"><h3>ECE</h3></a><br><br><br><br><br>
<a
href=eee.html
target="f3"><h3>EEE</h3></a><br><br><br><br><br>
<a href=civil.html target="f3"><h3>Civil</h3></a>
</body>
</html>
OUTPUT:
Right frame:
<html>
<body bgcolor="pink">
<p><h2
align="center"> <font face="times new roman"
color="green" >Online book store information </font> </h2>

<h3>

<font
face="monotype corsiva" color=blue> This is the online book

store developed by students of pvpsit.It contains book catalogue
of various branches like cse,ece,eee,civil </font></h3>
</p> </body>
</html>
OUTPUT:
2) LOGIN PAGE
DESCRIPTION:
The login page contains the user name and the password of
the user to authenticate.
PROGRAM:
<html>
<head>
<p style= "background:yellow; top:100px; left:250px;
position:absolute; ">
</head>
<body background=E:\1.jpg>
<form action="index.jsp" method="get">
<label>
<font face="comic sans ms" color="green"
size="5">Login </font>
</label>
<input type="text" size="20" maxlength="20"
value=' '><br><br><br>
<label>
<font
face="comic
size="5">Password </font>
sans
ms"
color="green"
</label>
<input type="password" size="20" maxlength="20">

<br><br><br>




<input
type="submit"
value="submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT:
3) CATOLOGUE PAGE
DESCRIPTION:
The catalogue page should contain the details of all the
books available in the web site in a table.
The details should contain the following:
10
1. Snap shot of Cover Page.

2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
PROGRAM:
<html>
<body>
<center>
<table border=1>
<tr>
<th> Book Preview </th>
<th> Book Details </th>
<th> Price </th>
<th> Payment </th>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My
Documents\My Pictures\xml.bmp" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:XML Bible
Author:winston
11
Publisher:Wiesley
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="cart.html" target="_blank">
<img src="C:\Documents and Settings\All users\My
Documents\My
Pictures\cart.bmp"
width="150"
height="100"></img>
</a>
</td>
</tr>
<tr>
<td> <img src="C:\Documents and Settings\All users\My
Documents\My Pictures\java.bmp" width=100 height=50>
</img>
</td>
<td>
<pre>
<font face="comic sans ms" size=4 color="green" >
book:Java 2
Author:Watson
Publisher:BPB publications
</font>
</pre>
</td>
<td> $40 </td>
<td> <a href="cart.html" target="_blank">
12
<img src="C:\Documents and Settings\All users\My

Documents\My
Pictures\cart.bmp"
width="150"
height="100"></img>
</a>
</td>
</tr>
</table> </center>
</body>
</html>
OUTPUT:
13
RESULT:
Thus the home page, login page, catalogue page for the
online book store are created successfully
14
Week-2
Date:
----------------------------------------------------------------------------------------------------------AIM: Design of the cart page and the registration page required
for online book store.
4) CART PAGE
DESCRIPTION:
The cart page contains the details about the books which
are added to the cart.
PROGRAM:
<html>
<body>
<center><br><br><br>
<img src=E:\aa.jpg>
<table border=1 cellpadding=center>
<thead>
<tr>
<th>Book name</th>
<th>price</th>
<th>quantity</th>
<th>amount</th>
</tr>
</thead>
<tr>
15
<td>java 2</td>
<td>$45</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td> XML bible</td>
<td> $20</td>
<td> 5</td>
<td> $40</td>
</tr>
<th colspan=4>total amount=$110>
</th>
</tr>
</table>
</center>
</body>
</html>
OUTPUT:
16
5) REGISTRATION PAGE
DESCRIPTION:
Create a registration form with the following fields
1)Name(Textfield)
2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
17
7) Languages known (check boxes English, Telugu,

Hindi, Tamil)
8) Address (text area)
PROGRAM:
<html>
<body>
<center>
<img src=E:\aaa.jpg align=left>
<form>
<label>name</label>
<input type="text" size="20"><br><br> <br>
<label>password</label>
<input type="password" size="20" maxsize="28"><br> <br>
<br>
<label>email</label>
<input type="text" size="30"><br> <br> <br>
<label>phone no</label>
<input type="text" size="2">
<input type="text" size="6">
<input type="text" size="10"><br> <br> <br>
<label>Sex</label>
<input type="radio" name="sex">m
<input type="radio" name="sex">f <br> <br> <br>
<label> date of birth</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
18
<option>4</option>
<option>5</option>
</select>
<select>
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>apr</option>
</select>
<select>
<option>1980</option>
</select> <br> <br> <br>
<label> Languages Known </label>
<input type="checkbox"> English
<input type="checkbox"> Telugu
<input type="checkbox"> Hindi
<input type="checkbox"> Tamil <br> <br> <br>
<label> Address </label>
<textarea rows=5 cols=20 scrolling="yes"> </textarea>
</center>
</body>
</html>
OUTPUT:
19
RESULT:
Thus the registration and cart pages for online book store
pages are created successfully
Week-3
Date:
20
----------------------------------------------------------------------------------------------------------AIM: Write JavaScript to validate the following fields of the above

registration page.
1. Name (Name should contains alphabets and the length
should not be less than 6 characters).
2. Password (Password should not be less than 6 characters
length).
3. E-mail id (should not contain any invalid and must follow
the standard pattern
name@domain.com)
4. Phone number (Phone number should contain 10 digits
only).
DESCRIPTION:
JavaScript
is
simple
scripting
language
invented
specifically for use in web browsers to make websites more

dynamic. On its own, HTML is capable of outputting more-or-less
static pages. Once you load them up your view doesn't change
much until you click a link to go to a new page. Adding JavaScript
to your code allows you to change how the document looks
completely, from changing text, to changing colors, to changing
the options available in a drop-down list. JavaScript is a clientside language.
JavaScripts are integrated into the browsing environment,
which means they can get information about the browser and
HTML page, and modify this information, thus changing how
things are presented on your screen. This access to information
21
gives JavaScript great power to modify the browsing experience.

They can also react to events, such as when the user clicks their
mouse, or points to a certain page element. This is also a very
powerful ability.
Regular Expressions:
One of the most common situations that come up is having
an HTML form for users to enter data. Normally, we might be
interested
in
the visitors
name, phone
number
and
email
address, and so forth. However, even if we are very careful about

putting some hints next to each required field, some visitors are
going to get it wrong, either accidentally or for malicious
purposes. Heres where regular expressions come in handy. A
regular expression is a way of describing a pattern in a piece of
text. In fact, its an easy way of matching a string to a pattern.
We could write a simple regular expression and use it to check,
quickly, whether or not any given string is a properly formatted
user input. This saves us from difficulties and allows us to write
clean and tight code.
A regular expression is a JavaScript object. There are
multiple ways of creating them. They can be created statically
when the script is first parsed or dynamically at run time. A static
regular expression is created as follows:
regx=/fish|fow1/;
Dynamic patterns are created using the keyword to create
an instance of the RegExp class:
22
regx=new RegExp(fish|fow1);
Functions:
test(string)- Tests a string for pattern matches. This method
returns a Boolean that indicates whether or not the specified
pattern exists within the searched string. This is the most
commonly used method for validation. It updates some of the
properties of the parent RegExp object following a successful
search.
exec(string)- Executes a search for a pattern within a string. If
the pattern is not found, exec() returns a null value. If it finds one
or more matches it returns an array of the match results. It also
updates some of the properties of the parent RegExp object
PROGRAM:
Valid.js
function fun()
{
var userv=document.forms[0].user.value;
var pwdv=document.forms[0].pwd.value;
var emailv=document.forms[0].email.value;
var phv=document.forms[0].ph.value;
var userreg=new RegExp("^[a-zA-Z][a-zA-Z0-9]*$");
var emailreg=new RegExp("^[a-zA-Z][a-zA-Z0-9_.]*@[a-zAZ][a-zA-Z0-9_.]*.[a-zA-Z][a-zA-Z0-9_.]{2}.[a-zA-Z][a-zA-Z0-9_.]
{2}$|^[a-zA-Z][a-zA-Z0-9_.]*@[a-zA-Z][a-zA-Z0-9_.]*.[a-zA-Z][azA-Z0-9_.]{3}$");
var phreg=new RegExp("^[0-9]{10}$");
23
var ruser=userreg.exec(userv);
var remail=emailreg.exec(emailv);
var rph=phreg.exec(phv);
if(ruser && remail && rph && (pwdv.length > 6))
{
alert("All values are valid");
return true;
}
else
{
if(!ruser) { alert("username
invalid");document.forms[0].user.focus();}
if(!remail) { alert("password
invalid");document.forms[0].user.focus();}
if(!rph) { alert("phone number
invalid");document.forms[0].ph.focus();}
if(pwdv.length < 6) { alert("password
invalid");document.forms[0].pwd.focus();}
return false;
}
}
Register.html
<html>
<body><center>
<fieldset>
<legend>Registration</legend>
<form action="Database" method="get" onSubmit="return
fun()">
24
<pre>Name
:<input type="text" name="user"
size="10"><br>
Password :<input type="password" name="pwd"
size="10"><br>
E-mail
:<input type="text" name="email"
size="10"><br>
Phone Number :<input type="text" name="ph"
size="10"><br>
<input type="submit" value="Register">
</pre>
</form>
</body>
<script src="valid.js"></script>
</html>
25
OUTPUT:
26
RESULT:
Thus the home page, login page, catalogue page for the
online book store are created successfully
27
Week-4
Date:
----------------------------------------------------------------------------------------------------------AIM:
Design a web page using CSS (Cascading Style Sheets)
which includes the following:
1) Use different font, styles: In the style definition you define
how each selector should work .Then, in the body of your
pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single
elements on the page.
3) Control the repetition of the image with the backgroundrepeat property
DESCRIPTION:
Cascading Style Sheets (CSS) is a stylesheet language

used to describe the presentation of a document written in a
markup language. Its most common application is to style web
pages written in HTML and XHTML, but the language can be
applied to any kind of XML document.
In CSS, selectors are used to declare which elements a style
applies to, a kind of match expression. Selectors may apply to all
elements of a specific type, or only those elements which match
a certain attribute; elements may be matched depending on how
28
they are placed relative to each other in the markup code, or on

how they are nested within the document object model
A style sheet consists of a list of rules. Each rule or rule-set
consists of one or more selectors and a declaration block. A
declaration-block
consists
of
list
of
semicolon-separated
declarations in braces. Each declaration itself consists of a

property, a colon (:), a value, then a semi-colon (;)
Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the following rules:
1. External style sheet
2. Internal style sheet (inside the <head> tag)
3. Inline style (inside an HTML element)
An inline style (inside an HTML element) has the highest
priority, which means that it will override a style declared inside
the <head> tag, in an external style sheet, or in a browser (a
default value).
Syntax
The CSS syntax is made up of three parts: a selector, a
property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to
define, the property is the attribute you wish to change, and each
property can take a value. The property and value are separated
by a colon, and surrounded by curly braces:
29
body {color: black}

External Style Sheet
An external style sheet is ideal when the style is applied to
many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file. Each page must
link to the style sheet using the <link> tag. The <link> tag goes
inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file
mystyle.css, and format the document according to it.
Internal Style Sheet
An internal style sheet should be used when a single
document has a unique style. You define internal styles in the
head section by using the <style> tag,
<head>
<style>
selector {property:value; property:value;..}
</style>
</head>
30
Inline Styles
An inline style loses many of the advantages of style sheets
by mixing content with presentation. Use this method sparingly,
such as when a style is to be applied to a single occurrence of an
element.
To use inline styles you use the style attribute in the relevant tag.
The style attribute can contain any CSS property.
<p style="color: sienna; margin-left: 20px">
This is a paragraph </p>
PROGRAM:
Cas.css:
a:link{color:black;}
a:visited{color:pink;}
a:active{color:red;}
a:hover{color:green;}
.right {
text-align:center;
text-decoration:underline;
font-weight:bold;
color:blue;
font-family:comic sans ms;
font-size:30; }
.image {
text-align:left;
31
font-family:"monotype corsiva";
font-weight:10;
}
.image1 {
background-image:url("C:\Documents and Settings\All
Users\My Documents\My Pictures\krishna.jpg");
background-attachment:fixed;
background-repeat:no-repeat;
width:150;
height:150; }
table { align:center;border:10;
border-style:ridge;
border-color:yellow;}
htm.html:
<html>
<head>
<link rel="stylesheet" href="cas.css" type="text/css">
<style>
.xlink{
text-decoration:none;font-
weight:bold;cursor:crosshair;}
.ylink{text-decoration:underline;fontweight:bold;cursor:help;}
</style>
</head>
32
<body class="image">
<p style="text-align:right;">
<a
href="registration.html"
class="xlink">
Reg
Link</a>
<a href="topframe.html" class="ylink"> Help Link</a>
</p>
<p class="right">PVPSIT</p>
<div
style="position:relative;font-size:90px;z-
index:5;color:purple;">PVPSIT</div>
<div style="position:relative;font-size:50px;z-index:1;top:70; left:5;color:blue;">CSE</div>
<div
style="position:relative;font-size:90px;z-
index:1;color:purple;">PVPSIT</div>
<div style="position:relative;font-size:50px;z-index:5;top:70; left:5;color:blue;">CSE</div>
<table align="center" class="image1">
<tr>
<td> Fruits</td>
<td> Mango</td>
</tr>
</table>
</body>
</html>
OUTPUT:
33
RESULT: Thus different style of CSS and different type of the

properties are applied.
Week-5:
Date:
----------------------------------------------------------------------------------------------------------AIM: Write an XML file which will display the Book information.
It includes the following:
1) Title of the book
34
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price
Write a Document Type Definition (DTD) to validate the above
XML file.
Display the XML file as follows.
The contents should be displayed in a table. The header of the
table should be in color GREY. And the Author names column
should be displayed in one color and should be capitalized and in
bold. Use your own colors for remaining columns.
Use XML schemas XSL and CSS for the above purpose.
DESCRIPTION:
DTD vs XML Schema
The DTD provides a basic grammar for defining an XML
Document in terms of the metadata that comprise the shape of
the document. An XML Schema provides this, plus a detailed way
to define what the data can and cannot contain. It provides far
more control for the developer over what is legal, and it provides
an Object Oriented approach, with all the benefits this entails.
Many systems interfaces are already defined as a DTD.
They are mature definitions, rich and complex. The effort in rewriting the definition may not be worthwhile.
35
DTD is also established, and examples of common objects

defined in a DTD abound on the Internet -- freely available for reuse. A developer may be able to use these to define a DTD more
quickly than they would be able to accomplish a complete redevelopment of the core elements as a new schema.
Finally, you must also consider the fact that the XML
Schema is an XML document. It has an XML Namespace to refer
to, and an XML DTD to define it. This is all overhead. When a
parser examines the document, it may have to link this all in,
interpret the DTD for the Schema, load the namespace, and
validate the schema, etc., all before it can parse the actual XML
document in question. If you're using XML as a protocol between
two systems that are in heavy use, and need a quick response,
then this overhead may seriously degrade performance.
Write a Document Type Definition (DTD) to validate

the XML file.
PROGRAM:
XML document (bookstore.xml)
<bookstore>
<book>
<title>web programming</title>
<author>chrisbates</author>
<ISBN>123-456-789</ISBN>
<publisher>wiley</publisher>
36
<edition>3</edition>
<price>350</price>
</book>
<book>
<title>internet worldwideweb</title>
<author>ditel&ditel</author>
<ISBN>123-456-781</ISBN>
<publisher>person</publisher>
<price>450</price>
</book>
</bookstore>
XML document Validation using DTD
DTD document (bookstore.dtd)
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title,author,ISBN,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
37
Bookstore.xml
<!DOCTYPE bookstore SYSTEM "C:\Documents and
Settings\Administrator\My Documents\bookstore.dtd">
<bookstore>
<book>
<ISBN>123-456-789</ISBN>
<price>350</price>
</book>
<book>
<ISBN>123-456-781</ISBN>
<price>450</price>
</book>
</bookstore>
XML document Validation using DTD

XML Schema (bookstore.xsd)
38
<?xml version="1.0" encoding="UTF-8"?>

<xs:schema elementFormDefault="qualified"
attributeFormDefault="unqualified"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"></xs:element>
<xs:element name="author"
type="xs:string"></xs:element>
<xs:element name="ISBN" type="xs:string"></xs:element>
<xs:element name="publisher"
type="xs:string"></xs:element>
<xs:element name="edition"
type="xs:int"></xs:element>
<xs:element name="price"type="xs:decimal"></xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Bookstore.xml
39
<bookstore
xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"
xsi:noNamespaceSchemaLocation="C:\Documents and
Settings\Administrator\My Documents\bookstore.xsd">
<book>
<ISBN>123-456-789</ISBN>
<price>350</price>
</book>
<book>
<ISBN>123-456-781</ISBN>
<price>450</price>
</book>
</bookstore>
Display the XML file as follows.
40
PROGRAM:
XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="bookstore.xsl"?>
<bookstore>
<book>
<title>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book>
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>
XSL:
41
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2> My Books collection</h2>
<table border="1">
<tr bgcolor="red">
<th align="left">title</th>
<th align="left">author</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
<td><xsl:value-of select="title"/></td>
<xsl:choose>
<xsl:when test="price > 30">
<td bgcolor="yellow"><xsl:value-of select="author"/></td>
</xsl:when>
<xsl:when test="price > 10">
<td bgcolor="magneta"><xsl:value-of select="author"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="author"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
42
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
RESULT: Thus the XML stylesheets are successfully used to

display the content in a table format.
Week-6:
Date:
----------------------------------------------------------------------------------------------------------43
VISUAL BEANS:
AIM:
Create a simple visual bean with a area filled with a color.

The shape of the area depends on the property shape. If it is
set to true then the shape of the area is Square and it is Circle, if
it is false.
The color of the area should be changed dynamically for every
mouse click. The color should also be changed if we change the
color in the property window .
DESCRIPTION:
A Bean is a JavaBeans component. Beans are independent,
reusable software modules. Beans may be visible objects, like
AWT components, or invisible objects, like queues and stacks. A
builder/integration tool manipulates Beans to create applets and
applications.
Beans consist of three things:
Events
An event allows your Beans to communicate when
something interesting happens. There are three parts to this

communication:
EventObject
Event Listener - (the sink)
An Event Source (the Bean)
The event source defines when and where an event will
happen. Classes register themselves as interested in the event,
and they receive notification when the event happens. A series of
methods patterns represents the registration process:
public synchronized void addListenerType(ListenerType l);
44
public synchronized void removeListenerType( ListenerType l);

Properties
Properties define the characteristics of the Bean. For instance,
when examining an AWT TextField for its properties, you will see
properties for the caret position, current text, and the echo
character, among others. A property is a public attribute of the
Bean, usually represented by a non-public instance variable. It
can be read-write, read-only, or write-only. There are four
different types of properties:
Simple - As the name implies, simple properties represent
the simplest of the four. To create a property, define a pair
of set/get routines. Whatever name used in the pair of
routines, becomes the property name
Indexed - An indexed property is for when a single property
can hold an array of values. The design pattern for these
properties is:
public void setPropertyName (PropertyType[] list)
public void setPropertyName (
PropertyType element, int position)
public PropertyType[] getPropertyName ()
public PropertyType getPropertyName (int position)
Bound A bean that has the bound property generates an
event when the property is changed. The event is of type
propertyChangeEvent and is sent to objects that previously
registered an interest in receiveing such notifications. In
order for the notification to happen, you need to maintain a
watch
list
for
PropertyChangeEvents
via
the
45
PropertyChangeSupport class. First, you have to create a list

of listeners to maintain:
private PropertyChangeSupport changes =
new PropertyChangeSupport (this);
And then, you have to maintain the list:
public void addPropertyChangeListener (
PropertyChangeListener p) {
changes.addPropertyChangeListener (p);
}
public void removePropertyChangeListener (
PropertyChangeListener p) {
changes.removePropertyChangeListener (p);
}
Constrained - Constrained properties are similar to bound
properties.
In
addition
to
maintaining
list
of
PropertyChangeListeners, the Bean maintains a list of

VetoableChangeListeners. Then, prior to the Bean changing
a property value, it asks the VetoableChangeListeners if its
okay. If it isn't, the listener throws a PropertyVetoException,
which you declare the set routine to throw.
Methods
Bean methods are available for anyone to call by just
making each public. However, you can restrict which methods are
visible to the Bean builder/integration tool by providing a
getMethodDescriptors method along with your Bean's BeanInfo.
Every Bean can provide a supporting BeanInfo class to customize
a Bean's appearance to an integration tool.
Procedural Steps to create a Java-Bean:
46
1) Creating
directory-
Create
new
directory
in
C:\beans\demo\sunw\demo with a new folder name colors

2) Create a java source file
3) Compile the java source file
4) Create a manifest file colors.mft in the directory called as
C:\beans\demo
5) Create a jar file- to create a jar file type the following
command in the command prompt
jar cfm ..\jars\colors.jar colors.mft sunw\demo\colors\*.class
6) Start the BDK
7) Check whether the colors bean is placed in toolbox or not.
PROGRAM:
package sunw.demo.colors;
import java.awt.*;
import java.awt.event.*;
public class Colors extends Canvas
{
transient private Color color;
private boolean rectangular;
public Colors()
{
addMouseListener(new MouseAdapter(){
public void mousePressed(MouseEvent me){
change(); }
});
rectangular=false;
setSize(100,100);
47
change();
}
public boolean getRectangular()
{
return rectangular;
}
public void setRectangular(boolean flag)
{
this.rectangular=flag;
repaint();
}
public void change()
{
color=randomColor();
repaint();
}
private Color randomColor()
{
int r=(int)(255*Math.random());
int g=(int)(255*Math.random());
int b=(int)(255*Math.random());
return new Color(r,g,b);
}
public void paint(Graphics g)
{
Dimension d=getSize();
int h=d.height;
int w=d.width;
48
g.setColor(color);
if(rectangular)
{
g.fillRect(0,0,w-1,h-1);
}
else
{
g.fillOval(0,0,w-1,h-1);
}
}
}
OUTPUT:
49
RESULT:
Thus the colors bean is created successfully.
Program 2:
Visual Beans (program 2)
Convert.java
package sunw.demo.convert;
import java.awt.*;
public class convert extends Canvas
{
private double dollars=0.0;
private double rupees=0.0;
50
private double dollarvalue=0.0;

public convert()
{
setSize(100,1000);
}
public double getDollars()
{
return dollars;
}
public void setDollars(double value)
{
this.dollars=value;
}
public void setRupees(double value)
{
this.rupees=value;
}
public double getRupees()
{
return rupees;
}
public void change()
{
dollarvalue= value();
repaint();
}
private double value()
51
{
return rupees*dollars;
}
public void paint(Graphics g)
{
g.setColor(Color.red);
g.drawString(String.valueOf(dollarvalue),10,10);
}
}
Convert.mf
Name: sunw/demo/convert/convert.class
Java-Bean: True ( press Enter)
(Carriage return compulsory)
52
53
Result
Thus the convertion bean is created successfully
Program 3:
package sunw.demo.colors;
import java.awt.*;
public class mouseclick extends Canvas {
public int count=0;
public mouseclick() {
54
addMouseListener(new MouseAdapter() {
public void mousePressed(MouseEvent me) {
change();
}
});
setSize(100,100);
}
public void change() {
count++;
repaint();
}
public void paint(Graphics g) {
Dimension d = getSize();
int h = d.height;
int w = d.width;
g.setColor(Color.red);
g.fillRect(0,0,100,100);
g.setColor(Color.blue);
g.drawString(String.valueOf(count),50,50);
}
}
Mouseclick.mft
Name: sunw/demo/colors/mouseclick.class
Java-Bean: True
Output
55
Result
Thus the Mouse Clicks bean is created successfully
Week-7:
Date:
----------------------------------------------------------------------------------------------------------56
AIM: Install TOMCAT web server and APACHE.

While installation assign port number 8080 to APACHE. Make sure
that these ports are available i.e., no other process is using this
port.
DESCRIPTION:
Set the JAVA_HOME Variable
You must set the JAVA_HOME environment variable to tell
Tomcat where to find Java. Failing to properly set this variable
prevents Tomcat from handling JSP pages. This variable should list
the base JDK installation directory, not the bin subdirectory.
On Windows XP, you could also go to the Start menu, select
Control Panel, choose System, click on the Advanced tab, press
the Environment Variables button at the bottom, and enter the
JAVA_HOME variable and value directly as:
Name: JAVA_HOME
Value: C:\jdk
Set the CLASSPATH

Since servlets and JSP are not part of the Java 2 platform,
standard edition, you have to identify the servlet classes to the
compiler. The server already knows about the servlet classes, but
the compiler (i.e., javac) you use for development probably
doesn't. So, if you don't set your CLASSPATH, attempts to compile
57
servlets, tag libraries, or other classes that use the servlet and
JSP APIs will fail with error messages about unknown classes.
Name: JAVA_HOME
Value: install_dir/common/lib/servlet-api.jar
Turn on Servlet Reloading

The next step is to tell Tomcat to check the modification dates of
the class files of requested servlets and reload ones that have
changed since they were loaded into the server's memory. This
slightly degrades performance in deployment situations, so is
turned off by default. However, if you fail to turn it on for your
development server, you'll have to restart the server every time
you recompile a servlet that has already been loaded into the
server's memory.
To turn on servlet reloading, edit install_dir/conf/server.xml and
add a DefaultContext subelement to the main Host element and
supply true for the reloadable attribute. For example, in Tomcat
5.0.27, search for this entry:
<Host
name="localhost"
debug="0"
appBase="webapps" ...>
and then insert the following immediately below it:
<DefaultContext reloadable="true"/>
Be sure to make a backup copy of server.xml before making
the above change.
Enable the Invoker Servlet
58
The invoker servlet lets you run servlets without first

making changes to your Web application's deployment descriptor.
Instead, you just drop your servlet into WEB-INF/classes and use
the URL http://host/servlet/ServletName. The invoker servlet is
extremely convenient when you are learning and even when you
are doing your initial development.
To enable the invoker servlet, uncomment the following
servlet and servlet-mapping elements in install_dir/conf/web.xml.
Finally, remember to make a backup copy of the original version
of this file before you make the changes.
<servlet>
<servlet-name>invoker</servlet-name>
<servlet-class>
org.apache.catalina.servlets.InvokerServlet
</servlet-class>
...
</servlet>
...
<servlet-mapping>
<servlet-name>invoker</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>
OUTPUT:
59
RESULT: Thus TOMCAT web server was installed successfully.
60
Week-7:
Date:
----------------------------------------------------------------------------------------------------------AIM: Access the developed static web pages for books web site,
using these servers by putting the web pages developed in week1 and week-2 in the document root.
OUTPUT
61
62
RESULT:
Thus week-1 and week-2 pages are accessed using the TOMCAT
web server successfully.
Week-8:
Date:
----------------------------------------------------------------------------------------------------------AIM:
User Authentication:
Assume four users user1, user2, user3 and user4 having
the passwords pwd1, pwd2, pwd3 and pwd4 respectively.
Write a servelet for doing the following.
1. Create a Cookie and add these four user ids and
passwords to this Cookie.
63
2. Read the user id and passwords entered in the Login

form (week1) and authenticate with the values (user id
and passwords) available in the cookies.
If he is a valid user (i.e., user-name and password match)
you should welcome him by name (user-name) else you
should display You are not an authenticated user . Use
init-parameters to do this. Store the user-names and
passwords in the web.xml and access them in the servlet
by using the getInitParameters() method.
DESCRIPTION:
Servlet Life cycle:
1. Servlet class loading
2. Servlet Instantiation
3. call the init method
4. call the service method
5. call destroy method
Class loading and instantiation
If you consider a servlet to be just like any other Java
program, except that it runs within a servlet container, there has
to be a process of loading the class and making it ready for
requests. Servlets do not have the exact equivalent of a main
method that causes them to start execution.
When a web container starts it searches for the deployment
descriptor (WEB.XML) for each of its web applications. When it
finds a servlet in the descriptor it will create an instance of the
64
servlet class. At this point the class is considered to be loaded

(but not initialized).
The init method
The
HttpServlet
class
inherits
the
init
method
from
GenericServlet. The init method performs a role slightly similar to

a constructor in an ordinary Java program in that it allows
initialization of an instance at start up. It is called automatically
by the servlet container and as it causes the application context
(WEB.XML) to be parsed and any initialization will be performed.
It comes in two versions, one with a zero parameter constructor
and one that takes a ServletConfig parameter.
The servlet engine creates a request object and a response
object. The servlet engine invokes the servlet service() method,
passing the request and response objects. Once the init method
returns the servlet is said to be placed into service. The process
of using init to initialize servlets means that it is possible to
change configuration details by modifying the deployment
descriptor without having them hard coded in with your Java
source and needing a re-compilation.
void init(ServletConfig sc)
Calling the service method
The service() method gets information about the request
from the request object, processes the request, and uses
methods of the response object to create the client response. The
service method can invoke other methods to process the request,
such as doGet(), doPost(), or methods you write. The service
65
method is called for each request processed and is not normally

overridden by the programmer.
The code that makes a servlet go is the. servlet
void service(ServletRequest req,ServletResponse res)
The destroy Method
Two typical reasons for the destroy method being called are
if the container is shutting down or if the container is low on
resources. This can happen when the container keeps a pool of
instances of servlets to ensure adequate performance. If no
requests have come in for a particular servlet for a while it may
destroy it to ensure resources are available for the servlets that
are being requested. The destroy method is called only once,
before a servlet is unloaded and thus you cannot be certain when
and if it is called.
void destroy()
ServletConfig
Class
ServletConfig object is used by the Servlet Container to

pass information to the Servlet during it's initialization. Servlet
can obtain information regarding initialization parameters and
their values using different methods of ServletConfig class
initialization parameters are name/value pairs used to provide
basic information to the Servlet during it's initialization like JDBC
driver name, path to database, username, password etc.
66
Methods of ServletConfig
class
Following are the four methods of this class :

getInitParameter(String paramName) Returns value of
the given parameter. If value of parameter could not be
found in web.xml file then a null value is returned.
getInitParameterNames() Returns an Enumeration object
containing
all
the
names
of
initialization
parameters
provided for this Servlet.

getServletContext()
Returns
reference
to
the
ServletContext object for this Servlet. It is similar to

getServletContext() method provided by HttpServlet class.
getServletName()
Returns
name
of
the
Servlet
as
provided in the web.xml file or if none is provided then

returns complete class path to the Servlet.
PROGRAM:
cologin.html:
<html>
<head>
<title> login Page </title>
<p
style=
"background:yellow;
top:100px;
left:250px;
</head>
<body>
<form ACTION="clogin">
<label> Login </label>
67
<input type="text" name="usr" size="20"> <br> <br>

<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
<input type="submit" value="submit">
</form>
</body>
</html>
cologin1.html
<html>
<head>
<title> login Page </title>
<p
style=
"background:yellow;
top:100px;
left:250px;
</head>
<body>
<form ACTION="clogin1">
<label> Login </label>
<input type="text" name="usr" size="20"> <br> <br>
<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
</form>
</body>
</html>
Addcook.java:
import javax.servlet.* ;
import javax.servlet.http.*;
68
import java.io.*;
public class Addcook extends HttpServlet
{
String user,pas;
public void service(HttpServletRequest req,HttpServletResponse
res) throws ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
Cookie c1=new Cookie("usr1","suni");
Cookie p1=new Cookie("pwd1","ani");
Cookie c2=new Cookie("usr2","abc");
Cookie p2=new Cookie("pwd2","123");
Cookie c3=new Cookie("usr3","def");
Cookie c4=new Cookie("usr4","mno");
res.addCookie(c1);
res.addCookie(p1);
res.addCookie(c2);
res.addCookie(p2);
res.addCookie(c3);
res.addCookie(p3);
res.addCookie(c4);
res.addCookie(p4);
out.println("COOKIE ADDED");
}
}
69
Clogin.java:
import javax.servlet.* ;
import java.io.*;
public class Clogin extends HttpServlet
{
String user,pas;
{
user=req.getParameter("usr");
pas=req.getParameter("pwd");
Cookie[] c=req.getCookies();
for(int i=0;i<c.length;i++)
{
if((c[i].getName().equals("usr1")&&c[i+1].getName().equals("pwd
1"))||
c[i].getName().equals("usr2")
&&c[i+1].getName().equals("pwd2"))||
(c[i].getName().equals("usr3")&&
c[i+1].getName().equals("pwd3"))||
(c[i].getName().equals("usr4")&&
c[i+1].getName().equals("pwd4") ))
{
if((user.equals(c[i].getValue())
&&
pas.equals(c[i+1].getValue())) )
{
70
//RequestDispatcher
rd=req.getRequestDispatcher("/cart.html");
rd.forward(req,res);
}
else
{
out.println("YOU ARE NOT AUTHORISED USER ");
//res.sendRedirect("/cookdemo/cologin.html");
}
}
}
}
}
Web.xml:
<web-app>
<servlet>
<servlet-name>him</servlet-name>
<servlet-class>Clogin</servlet-class>
</servlet>
<servlet>
<servlet-name>him1</servlet-name>
<servlet-class>Addcook</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>him</servlet-name>
<url-pattern>/clogin</url-pattern>
</servlet-mapping>
71
<servlet-mapping>
<servlet-name>him1</servlet-name>
<url-pattern>/clogin1</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
72
73
74
2. Read the user id and passwords entered in the Login form

(week1)
and authenticate with the values (user id and
passwords) available in the cookies.

If he is a valid user (i.e., user-name and password match) you
should welcome him by name (user-name) else you should
display You are not an authenticated user .
Use init-parameters to do this. Store the user-names and
passwords in the webinf.xml and access them in the servlet by
using the getInitParameters() method.
home.html:
<html>
<head>
<title>Authentication</title>
</head>
<body>
<form action="ex1">
<label>Username </label>
<input type="text"size="20" name="user"><br><br>
password<input type="text" size="20" name="pwd"><br><br>
</form>
</body>
</html>
Example1.java
import javax.servlet.*;
import java.io.*;
public class Example1 extends GenericServlet
{
75
private
String
user1,pwd1,user2,pwd2,user3,pwd3,user4,pwd4,user5,pwd5;
public void init(ServletConfig sc)
{
user1=sc.getInitParameter("username1");
pwd1=sc.getInitParameter("password1");
}
public
void
service(ServletRequest
req,ServletResponse
res)throws ServletException,IOException
{
user5=req.getParameter("user");
pwd5=req.getParameter("pwd");
if((user5.equals(user1)&&pwd5.equals(pwd1))||
(user5.equals(user2)&&pwd5.equals(pwd2))||
(user5.equals(user3)&&pwd5.equals(pwd3))||
(user5.equals(user4)&&pwd5.equals(pwd4)))
out.println("<p> welcome to"+user5.toUpperCase());
76
else
out.println("You are not authorized user");
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>Example</servlet-name>
<servlet-class>Example1</servlet-class>
<init-param>
<param-name>username1</param-name>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-name>password1</param-name>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-value>1234</param-value>
</init-param>
<init-param>
<param-value>4567</param-value>
</init-param>
<init-param>
77
<param-value>cse</param-value>
</init-param>
<init-param>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-value>wt</param-value>
</init-param>
<init-param>
<param-value>lab</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Example</servlet-name>
<url-pattern>/ex1</url-pattern>
</servlet-mapping>
</web-app>
78
OUTPUT:
RESULT:
79
Thus the user authentication is carried out for four users by

using both cookies and getInitParameters successfully.
Week-9
Date:
-----------------------------------------------------------------------------------------------------------AIM:
Install a database (Mysql or
Oracle).
Create a table which should contain at least the following
fields: name, password, email-id, phone number (these should
hold the data from the registration form).
Practice 'JDBC' connectivity.
Write a java program/servlet/JSP to connect to that database and
extract data from the tables and display them. Experiment with
various SQL queries.
80
Insert the details of the users who register with the web site,
whenever a new user clicks the submit button in the registration
page (week2).
DESCRIPTION:
JDBC Driver Types

There are four types of JDBC drivers in use:
Type 1: JDBC-ODBC Bridge
A Type 1 JDBC-ODBC Bridge provides application developers
with a way to access JDBC drivers via the JDBC API. Type 1 JDBC
drivers translate the JDBC calls into ODBC calls and then send the
calls to the ODBC driver. Type 1 JDBC drivers are generally used
when the database client libraries need to be loaded on every
client machine.
Type 2: Native API/Partly Java Driver
A Type 2 Native API/Partly Java Driver is a partial Java driver
because it converts JDBC calls into database specific calls. Type 2
Native API/Partly Java Driver communicates directly with the
database server.
Type 3: Pure Java Driver
A Type 3 Pure Java Driver works in a three tiered
architecture. The JDBC calls are passed via the network to the
81
middle tier server. This server translates the calls to the database
specific native interface to further request the server. JDBC
drivers available from Simba are Type 3 drivers.
Type 4: Native Protocol Java Driver
The type 4 driver is written completely in Java and is hence
platform independent. It is installed inside the Java Virtual
Machine of the client. It provides better performance over the
type 1 and 2 drivers as it does not have the overhead of
conversion of calls into ODBC or database API calls. Unlike the
type 3 drivers, it does not need associated software to work.A
Type 4 Native Protocol Java Driver converts JDBC calls into the
database specific calls so that the client applications can
communicate directly with the server.
PROGRAM:
Registration.html:
<html>
<head>
<title>Registration page</title>
</head>
<body bgcolor="#00FFFf">
<form METHOD="POST" ACTION="register">
<CENTER>
<table>
<center>
<tr> <td> Username </td>
<td><input type="text" name="usr"> </td> </tr>
82
<tr><td> Password </td>

<td><input type="password" name="pwd"> </td> </tr>
<tr><td>Age</td>
<td><input type="text" name="age"> </td> </tr>
<tr> <td>Address</td>
<td> <input type="text" name="add"> </td> </tr>
<tr> <td>email</td>
<td> <input type="text" name="mail"> </td> </tr>
<tr> <td>Phone</td>
<td> <input type="text" name="phone"> </td> </tr>
<tr>
<td
colspan=2
align=center>
<input
type="submit"
value="submit"> </td> </tr>

</center>
</table>
</form>
</body>
Login.html
<html>
<head>
<title>Registration page</title>
</head>
<body bgcolor=pink> <center> <table>
<form METHOD="POST" ACTION="authent">
<tr> <td> Username </td>
<td><input type="text" name="usr"></td> </tr>
<tr> <td> Password </td>
<td> <input type="password" name="pwd"> </td> </tr>
83
<tr>
<td
align=center
colspan="2"><input
type="submit"
value="submit"></td> </tr>
</table> </center>
</form>
</body>
</html>
Ini.java:
import java.sql.*;
import java.io.*;
public class Ini extends GenericServlet
{
private String user1,pwd1,email1;
public
void
service(ServletRequest
req,ServletResponse
res)
throws ServletException,IOException
{
user1=req.getParameter("user");
pwd1=req.getParameter("pwd");
email1=req.getParameter("email");
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
84
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@195.100.1
01.158:1521:cclab","scott","tiger");
PreparedStatement st=con.prepareStatement("insert into
personal values(?,?,?,?,?,?)");
st.setString(1,user1);
st.setString(2,pwd1);
st.setString(3,"25");
st.setString(4,"hyd");
st.setString(5,email1);
st.setString(6,"21234");
st.executeUpdate();
con.close();
}
catch(SQLException s)
{ out.println("not found "+s);
}
catch(ClassNotFoundException c)
{
out.println("not found "+c);
}
}}
web.xml:
<web-app>
<servlet>
<servlet-name>init1</servlet-name>
<servlet-class>Ini</servlet-class>
85
</servlet>
<servlet-mapping>
<servlet-name>init1</servlet-name>
<url-pattern>/regis</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
86
87
88
89
RESULT:
Thus a table is created and the details are entered into the
table using jdbc from the registration form successfully.
90
Week-10
Date:
----------------------------------------------------------------------------------------------------------AIM: Write a JSP which does the following job
Insert the details of the 3 or 4 users who register with the
web site (week9) by using registration form. Authenticate the
user when he submits the login form using the user name and
password from
the database (similar to week8 instead of
cookies).
DESCRIPTION:
JSP Scripting Elements
JSP scripting elements let you insert Java code into the servlet
that will be generated from the current JSP page. There are three
forms:
1. Expressions of the form <%= expression %> that are
evaluated and inserted into the output,
2. Scriptlets of the form <% code %> that are inserted into the
servlet's service method, and
3. Declarations of the form <%! code %> that are inserted into
the body of the servlet class, outside of any existing
methods.
Each of these is described in more detail below.
91
JSP Expressions
A JSP expression is used to insert Java values directly into
the output. It has the following form:
<%= Java Expression %>
The Java expression is evaluated, converted to a string, and
inserted in the page. This evaluation is performed at run-time
(when the page is requested), and thus has full access to
information about the request. For example, the following shows
the date/time that the page was requested:
Current time: <%= new java.util.Date() %>
To simplify these expressions, there are a number of predefined
variables that you can use. These implicit objects are discussed in
more detail later, but for the purpose of expressions, the most
important ones are:
request, the HttpServletRequest;
response, the HttpServletResponse;
session, the HttpSession associated with the request (if
any); and
out, the PrintWriter (a buffered version of type JspWriter)
used to send output to the client.
JSP Scriptlets
If you want to do something more complex than insert a
simple expression, JSP scriptlets let you insert arbitrary code into
the servlet method that will be built to generate the page.
Scriptlets have the following form:
<% Java Code %>
92
Scriptlets have access to the same automatically defined

variables as expressions. So, for example, if you want output to
appear in the resultant page, you would use the out variable.
<%
String queryData = request.getQueryString();
out.println("Attached GET data: " + queryData);
%>
Note that code inside a scriptlet gets inserted exactly as
written, and any static HTML (template text) before or after a
scriptlet gets converted to print statements. This means that
scriptlets need not contain complete Java statements, and blocks
left open can affect the static HTML outside of the scriptlets.
JSP Declarations
A JSP declaration lets you define methods or fields that get
inserted into the main body of the servlet class (outside of the
service method processing the request). It has the following form:
<%! Java Code %>
Since declarations do not generate any output, they are
normally used in conjunction with JSP expressions or scriptlets.
For example, here is a JSP fragment that prints out the number of
times the current page has been requested since the server
booted (or the servlet class was changed and reloaded):
<%! private int accessCount = 0; %>
PROGRAM:
Login.html:

<html> <body>
<center><h1>XYZ Company Ltd.</h1></center>
93
<table border="1" width="100%" height="100%">

<tr>
<td valign="top" align="center"><br/>
<form action="auth.jsp"><table>
<tr>
<td colspan="2" align="center"><b>Login
Page</b></td>
</tr>
<tr>
<td
colspan="2"
align="center"><b> </td>
</tr>
<tr>
<td>User Name</td>
<td><input
type="text"
name="user"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password"
name="pwd"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
94
<td colspan="2" align="center"><input

type="submit" value="LogIN"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Auth.jsp:
<%@page import="java.sql.*;"%>
<html>
<head>
<title>
This is simple data base example in JSP</title>
</title>
</head>
<body bgcolor="yellow">
<%!String uname,pwd;%>
<%
uname=request.getParameter("user");
pwd=request.getParameter("pwd");
try
{
95
Connection
01.158:1521:CCLAB","scott","tiger");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select name,password from
personal where name='"+uname+"' and password='"+pwd+"'");
if(rs.next())
{
out.println("Authorized person");
}
else
{
out.println("UnAuthorized person");
}
con.close();
}
catch(Exception e){out.println(""+e);}
%>
</body>
</html>
OUTPUT:
96
97
RESULT:
The user is authenticated when he submits the login form using
the user name and password from the database.
Week-11:
Date:
----------------------------------------------------------------------------------------------------------AIM: Extract data from the tables and display them in the
catalogue page using JDBC.
DESCRIPTION:
Create tables in the database which contain the details of
items (books in our case like Book name, Price, Quantity,
Amount)) of each category. Modify your catalogue page (week 2)
in such a way that you should connect to the database and
extract data from the tables and display them in the catalogue
page using JDBC.
98
PROGRAM:
Retrieve.java:
import java.sql.*;
import java.io.*;
import java.util.*;
public class Retrieve extends HttpServlet
{
{
try{
Connection
01.158:1521:cclab","scott","tiger");
Statement s=con.createStatement();
ResultSet r=s.executeQuery("select * from cart");
out.println("<center> <table border=1>");
out.println("<thead> <th> Book name </th> <th> Price </th>
<th> Quantity </th> <th> Amount </th> </thead>");
while(r.next())
{
out.println("<tr> <td> "+r.getString(1)+"</td> ");
99
out.println("<td> "+r.getString(2)+"</td> ");

out.println("<td> "+r.getInt(3)+"</td> ");
out.println("<td> "+r.getString(4)+"</td> </tr>");
}
out.println("</table></center>");
con.close();
}
catch(SQLException sq)
{
out.println("sql exception"+sq);
}
catch(ClassNotFoundException cl)
{
out.println("class not found"+cl);
}
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>set</servlet-name>
<servlet-class>Cartenter</servlet-class>
</servlet>
<servlet>
<servlet-name>display</servlet-name>
<servlet-class>Retrieve</servlet-class>
100
</servlet>
<servlet-mapping>
<servlet-name>set</servlet-name>
<url-pattern>/enterdata</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>display</servlet-name>
<url-pattern>/display1</url-pattern>
</servlet-mapping>
</web-app>
101
CREATE THE TABLE AND INSERT VALUES INTO THE TABLE:
102
OUTPUT:
103
RESULT:
The data is extracted from the tables and displayed in the
catalogue page using JDBC.
Week-12:
Date:
----------------------------------------------------------------------------------------------------------AIM: Modify cart JSPpage to achieve the dynamism with the HTTP
protocol and session
management
DESCRIPTION:
HTTP is a stateless protocol. Session is required to
maintain the state.
Methods of session Object:
There are numerous methods available for session Object. Some
are:
getAttribute(String name)
104
getAttributeNames
isNew()
getCreationTime
getId
invalidate()
getLastAccessedTime
getMaxInactiveInterval
removeAttribute(String name)
setAttribute(String, object)
The <jsp:include> element allows you to include either static and
dynamic files in a JSP file.
Program :
Cart .java
import java.util.*;
import java.io.*;
public class Cart extends HttpServlet
{
public void init(ServletConfig config) throws
ServletException
105
{
super.init(config);
}
public void service(HttpServletRequest
req,HttpServletResponse res) throws
IOException,ServletException
{
PrintWriter pw=res.getWriter();
HttpSession hs=req.getSession();
ArrayList cart=(ArrayList)hs.getAttribute("cart");
if(cart==null)
{
pw.println("No items in your cart");
cart=new ArrayList();
hs.setAttribute("cart",cart);
}
String itemselected[];
String item;
itemselected=req.getParameterValues("book");
if(itemselected!=null)
{
for(int i=0;i<itemselected.length;i++)
{
item=itemselected[i];
cart.add(item);
106
}}
pw.println("Items in the cart<br>");
Iterator it=cart.iterator();
while(it.hasNext())
{
pw.println("<br><b>"+it.next()+"</b>");
}
}
}
Catalogue.java
import java.util.*;
import java.io.*;
public class Catalogue extends HttpServlet
{
int itemcount=0;
public void init(ServletConfig config) throws
ServletException
{
super.init(config);
}
107
public void service(HttpServletRequest

req,HttpServletResponse res) throws
IOException,ServletException
{
PrintWriter pw=res.getWriter();
HttpSession hs=req.getSession();
ArrayList cart=(ArrayList)hs.getAttribute("cart");
if(cart!=null)
{
itemcount=cart.size();
}
pw.println("You have"+itemcount+"items in cart");
pw.println("<body><center><fieldset><legend>Catalogu
e</legend><form action='cart' method='get'><input
type='checkbox' value='Java2'
name='book'>java2</input><br>");
pw.println("<input type='checkbox' name='book'
value='web programming'>Web
programming</input><br>");
value='Java2 Complete Reference'>Java2 Complete
Reference</input><br>");
value='Internet & World wide web'>Internet & World wide
web</input><br>");
108

value='Core servlets &JSP'>Core servlets
&JSP</input><br>");
value='J2EE 3rd edition'>J2EE 3rd edition</input><br>");
value='Electronic Devices and circuits'>Electronic Devices
and circuits</input><br>");
value='Software Engineering'>Software
Engineering</input><br>");
value='software project management'>software project
management</input><br>");
value='Computer networks'>Computer
networks</input><br>");
pw.println("</fieldset></center>");
pw.println("<input type='submit' value='submit'>");
}
}
<web-app>
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>Login</servlet-class>
109
<init-param>
<param-name>username</param-name>
<param-value>syam</param-value>
</init-param>
<init-param>
<param-name>password</param-name>
<param-value>syam</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/login.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>cat</servlet-name>
<servlet-class>Catalogue</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>cat</servlet-name>
<url-pattern>/Cat</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>cart</servlet-name>
<servlet-class>Cart</servlet-class>
</servlet>
110
<servlet-mapping>
<servlet-name>cart</servlet-name>
<url-pattern>/cart</url-pattern>
</servlet-mapping>
</web-app>
111
Result : Thus the session management is successfully created

using jsp
112
Week 13:
Aim : Write a program to implement MVC architecture.
Description :
Model-View-Controller Pattern
Model-View-Controller (MVC) is a classic design pattern often
used by applications that need the ability to maintain multiple
views of the same data. The MVC pattern hinges on a clean
separation of objects into one of three categories models for
maintaining data, views for displaying all or a portion of the
data, and controllers for handling events that affect the model or
view(s).
Because of this separation, multiple views and controllers can
interface with the same model. Even new types of views and
controllers that never existed before can interface with a model
without forcing a change in the model design.
How It Works
The MVC abstraction can be graphically represented as follows.
113
Events typically cause a controller to change a model, or view,

or both. Whenever a controller changes a models data or
properties, all dependent views are automatically updated.
Similarly, whenever a controller changes a view, for example, by
revealing areas that were previously hidden, the view gets data
from the underlying model to refresh itself.
A Concrete Example
We explain the MVC pattern with the help of a simple spinner
component which consists of a text field and two arrow buttons
that can be used to increment or decrement a numeric value
shown in the text field. We currently do not have an element
type that can directly represent a spinner component, but it easy
is to synthesize a spinner using existing element types.
114
The spinners data is held in a model that is shared with the text
field. The text field provides a view of the spinners current
value. Each button in the spinner is an event source, that
spawns an action event every time it is clicked. The buttons
can be hooked up to trampolines that receive action events, and
route them to an action listener that eventually handles that
event. Recall that a trampoline is a predefined action listener
that simply delegates action handling to another listener.
Depending on the source of the event, the ultimate action
listener either increments or decrements the value held in the
model The action listener is an example of a controller.
The trampolines that initially receive the action events fired by
the arrow buttons, are also controllers However, instead of
modifying the spinners model directly, they delegate the task to
a separate controller (action listener).
Multiple Controllers
The MVC pattern allows any number of controllers to modify the
same model. While we have so far focused only on the two arrow
buttons as likely source of events, there is, in fact, a third event
source in this example Whenever the text field has focus,
hitting the enter key fires off an action event that may
115
potentially be handled by a different action listener than the one

handling action events from the buttons.
Program :
Eshop.jsp:
<%@ page session="true" %>
<html>
<head>
<title>BOOK STORE</title>
</head>
<body bgcolor="#33CCFF">
<font face="Times New Roman,Times" size="+3">
BOOK STORE
</font>
<hr><p>
<center>
<form name="shoppingForm"
action="ShoppingServlet"
method="POST">
116
<b>BOOK:</b>
<select name=BOOK>
<option> 10588 | Hans Bergsten | Java Server Pages | O'Reilly |
2 | 34.95</option>
<option> 10589 | Deitel | Internet |McGraw Hill | 4 |
44.95</option>
<option> 10590 | Winston | XML BIBLE |Wiley | 2 |
14.95</option>
</select>
<b>Quantity: </b><input type="text" name="qty" SIZE="3"
value=1>
<input type="hidden" name="action" value="ADD">
<input type="submit" name="Submit" value="Add to Cart">
</form>
</center>
<p>
<jsp:include page="Cart.jsp" flush="true" />
</body>
</html>
Cart.jsp:
<%@ page session="true" import="java.util.*, shopping.BOOK"
%>
<%
Vector
buylist
(Vector)
session.getValue("shopping.shoppingcart");
if (buylist != null && (buylist.size() > 0)) {
%>
117
<center>
<table
border="0"
cellpadding="0"
width="100%"
bgcolor="#FFFFFF">
<tr>
<td><b>ISBN</b></td>
<td><b>AUTHOR</b></td>
<td><b>TITLE</b></td>
<td><b>PUBLISHER</b></td>
<td><b>EDITION</b></td>
<td><b>PRICE</b></td>
<td><b>QUANTITY</b></td>
<td></td>
</tr>
<%
for (int index=0; index < buylist.size();index++) {
BOOK anOrder = (BOOK) buylist.elementAt(index);
%>
<tr>
<td><b><%= anOrder.getisbn() %></b></td>
<td><b><%= anOrder.getAuthor() %></b></td>
<td><b><%= anOrder.getTitle() %></b></td>
<td><b><%= anOrder.getPublisher() %></b></td>
<td><b><%= anOrder.getEdition() %></b></td>
<td><b><%= anOrder.getPrice() %></b></td>
<td><b><%= anOrder.getQuantity() %></b></td>
<td>
<form name="deleteForm"
118
method="POST">
<input type="submit" value="Delete">
<input type="hidden" name= "delindex" value='<%= index
%>'>
<input type="hidden" name="action" value="DELETE">
</form>
</td>
</tr>
<% } %>
</table>
<p>
<form name="checkoutForm"
method="POST">
<input type="hidden" name="action" value="CHECKOUT">
<input type="submit" name="Checkout" value="Checkout">
</form>
</center>
<% } %>
Checkout.jsp:
<%@ page session="true" import="java.util.*, shopping.BOOK"
%>
<html>
<head>
<title>BOOK STORE</title>
</head>
<body bgcolor="#33CCFF">
<font face="Times New Roman,Times" size=+3>
119
BOOK STORE CHECK OUT

</font>
<hr><p>
<center>
<table
border="0"
cellpadding="0"
width="100%"
bgcolor="#FFFFFF">
<tr>
<td><b>ISBN</b></td>
<td><b>AUTHOR</b></td>
<td><b>TITLE</b></td>
<td><b>PUBLISHER</b></td>
<td><b>EDITION</b></td>
<td><b>PRICE</b></td>
<td><b>QUANTITY</b></td>
<td></td>
</tr>
<%
Vector
buylist
(Vector)
session.getValue("shopping.shoppingcart");
String amount = (String) request.getAttribute("amount");
for (int i=0; i < buylist.size();i++) {
BOOK anOrder = (BOOK) buylist.elementAt(i);
%>
<tr>
<td><b><%= anOrder.getisbn() %></b></td>
<td><b><%= anOrder.getAuthor() %></b></td>
<td><b><%= anOrder.getTitle() %></b></td>
<td><b><%= anOrder.getPublisher() %></b></td>
120
<td><b><%= anOrder.getEdition() %></b></td>

<td><b><%= anOrder.getPrice() %></b></td>
<td><b><%= anOrder.getQuantity() %></b></td>
</tr>
<%
}
session.invalidate();
%>
<tr>
<td>
</td>
<td>
</td>
<td><b>TOTAL</b></td>
<td><b>$<%= amount %></b></td>
<td>
</td>
</tr>
</table>
<p>
<a href="Eshop.jsp">Shop some more!</a>
</center>
</body>
</html>
Error.html:
<html>
<body>
<h1>
Sorry, there was an unrecoverable error! <br>
Please
try
<a
href="/examples/jsp/shopping/EShop.jsp">again</a>.
121
</h1>
</body>
</html>
OUTPUT:
Web.xml:
<web-app>
<servlet>
<servlet-name>ShoppingServlet</servlet-name>
122
<servlet-class>ShoppingServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ShoppingServlet</servlet-name>
<url-pattern>/ShoppingServlet</url-pattern>
</servlet-mapping>
</web-app>
ShoppingServlet.java:
import java.util.*;
import java.io.*;
import shopping.BOOK;
public class ShoppingServlet extends HttpServlet {
public void init(ServletConfig conf) throws ServletException {
super.init(conf);
}
public
void
doPost
(HttpServletRequest
req,
HttpServletResponse res)
throws ServletException, IOException {
HttpSession session = req.getSession(false);
if (session == null) {
res.sendRedirect("/error.html");
}
Vector
buylist=(Vector)session.getValue("shopping.shoppingcart");
String action = req.getParameter("action");
123
if (!action.equals("CHECKOUT")) {
if (action.equals("DELETE")) {
String del = req.getParameter("delindex");
int d = (new Integer(del)).intValue();
buylist.removeElementAt(d);
} else if (action.equals("ADD")) {
boolean match=false;
BOOK aCD = getBOOK(req);
if (buylist==null) {
buylist = new Vector(); //first order
buylist.addElement(aCD);
} else { // not first buy
for (int i=0; i< buylist.size(); i++) {
BOOK cd = (BOOK) buylist.elementAt(i);
if (cd.getTitle().equals(aCD.getTitle())) {
cd.setQuantity(cd.getQuantity()+aCD.getQuantity());
buylist.setElementAt(cd,i);
match = true;
} //end of if name matches
} // end of for
if (!match)
buylist.addElement(aCD);
}
}
session.putValue("shopping.shoppingcart", buylist);
String url="/Eshop.jsp";
//
ServletContext sc = getServletContext();
RequestDispatcher rd = req.getRequestDispatcher(url);
124
rd.forward(req, res);
}
else if (action.equals("CHECKOUT")) {
float total =0;
for (int i=0; i< buylist.size();i++) {
BOOK anOrder = (BOOK) buylist.elementAt(i);
float price= anOrder.getPrice();
int qty = anOrder.getQuantity();
total += (price * qty);
}
total += 0.005;
String amount = new Float(total).toString();
int n = amount.indexOf('.');
amount = amount.substring(0,n+3);
req.setAttribute("amount",amount);
String url="/Checkout.jsp";
ServletContext sc = getServletContext();
RequestDispatcher rd = sc.getRequestDispatcher(url);
rd.forward(req,res);
}
}
private BOOK getBOOK(HttpServletRequest req) {
String myBOOK = req.getParameter("BOOK");
String qty = req.getParameter("qty");
StringTokenizer t = new StringTokenizer(myBOOK,"|");
String isbn= t.nextToken();
String author= t.nextToken();
125
String title = t.nextToken();

String publisher = t.nextToken();
String Edition = t.nextToken();
String price = t.nextToken();
price = price.replace('$',' ').trim();
BOOK book = new BOOK();
book.setisbn(isbn);
book.setAuthor(author);
book.setTitle(title);
book.setPublisher(publisher);
book.setEdition(Edition);
book.setPrice((new Float(price)).floatValue());
book.setQuantity((new Integer(qty)).intValue());
return book;
}
}
book.java:
package shopping;
public class BOOK {
String isbn;
String author;
String title;
String publisher;
String Edition;
float price;
int quantity;
public BOOK() {
isbn="";
126
author="";
title="";
publisher="";
Edition="";
price=0;
quantity=0;
}
public void setPublisher(String title1) {
publisher=title1;
}
public String getPublisher() {
return publisher;
}
public void setEdition(String group1) {
Edition=group1;
}
public String getEdition() {
return Edition;
}
public void setisbn(String title) {
isbn=title;
}
public String getisbn() {
return isbn;
}
public void setAuthor(String group) {
author=group;
}
127
public String getAuthor() {

return author;
}
public void setTitle(String cty) {
title=cty;
}
public String getTitle() {
return title;
}
public void setPrice(float p) {
price=p;
}
public float getPrice() {
return price;
}
public void setQuantity(int q) {
quantity=q;
}
public int getQuantity() {
return quantity;
}
}
128
OUTPUT:
129
130
RESULT: Thus the cart page is dynamited with HTTP sessions and
useBean concept.
Experiment :14
Aim : Write a program to implement custom tag libraries
in JSP
Description :
Program :
First.jsp
<%@ taglib uri="hello" prefix="examples"%>
<html>
<head>
<title>First Custom tags</title>
</head>
<body>
<i><examples:hello/>
</i>
</body>
</html>
Web.xml
<web-app>
<taglib>
<taglib-uri>hello</taglib-uri>
<taglib-location>/WEB-INF/tlds/hello.tld</taglib-location>
131
</taglib>
</web-app>
Create a folder called tlds in WEB-INF directory.
Hello.tld
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<tag>
<name>hello</name>
<tag-class>tagext.HelloTag</tag-class>
<body-content>JSP</body-content>
</tag>
</taglib>
HelloTag.java
package tagext;
import javax.servlet.jsp.*;
import javax.servlet.jsp.tagext.TagSupport;
import java.util.*;
public class HelloTag extends TagSupport
{
public int doStartTag()
{
return EVAL_BODY_INCLUDE;
}
132
public int doEndTag()

{
Date date=new Date();
try
{
pageContext.getOut().write("HellOWorld");
pageContext.getOut().write("My
name
is :"+getClass().getName()+"and it's"+date);
}catch(Exception e){}
return EVAL_PAGE;
}
}
133
Output
Result :
Thus the implementation of custom tag libraries in JSP is
done.
Experiment No : 14
Aim : Display Hello World using Struts Framework in
NetBeans.
134
Description:Apache Struts 2 is an elegant, extensible framework

for creating enterprise-ready Java web applications. The
framework is designed to streamline the full development cycle,
from building, to deploying, to maintaining applications over
time. Apache Struts 2 was originally known as WebWork 2. After
working independently for several years, the WebWork and Struts
communities joined forces to create Struts 2. This new version of
Struts is simpler to use and closer to how Struts was always
meant to be.
Implementation:
Step 1:
Step 2:
135
Step 3:
Step 4:
136
step 5:
step 6:
137
step 7:
step 8:
138
step 9:
139

Web Technology Lab Manual

Uploaded by

Copyright:

Available Formats

Web Technology Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology Lab Manual

Uploaded by

Copyright:

Available Formats

Department of Computer Science

: Logo and the college name and links to Home

page, Login page, Registration page,

: At least four links for navigation, which will

display the catalogue of respective links.

align=left width=100 height=100">

align="center"> <font face="times new roman"

color="green" >Online book store information </font> </h2>

face="monotype corsiva" color=blue> This is the online book

<input type="password" size="20" maxlength="20">

1. Snap shot of Cover Page.

<img src="C:\Documents and Settings\All users\My

7) Languages known (check boxes English, Telugu,

----------------------------------------------------------------------------------------------------------AIM: Write JavaScript to validate the following fields of the above

specifically for use in web browsers to make websites more

gives JavaScript great power to modify the browsing experience.

address, and so forth. However, even if we are very careful about

:<input type="text" name="user"

:<input type="text" name="email"

Cascading Style Sheets (CSS) is a stylesheet language

they are placed relative to each other in the markup code, or on

declarations in braces. Each declaration itself consists of a

body {color: black}

RESULT: Thus different style of CSS and different type of the

DTD is also established, and examples of common objects

Write a Document Type Definition (DTD) to validate

XML document Validation using DTD

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

Display the XML file as follows.

RESULT: Thus the XML stylesheets are successfully used to

Create a simple visual bean with a area filled with a color.

something interesting happens. There are three parts to this

public synchronized void removeListenerType( ListenerType l);

PropertyChangeSupport class. First, you have to create a list

PropertyChangeListeners, the Bean maintains a list of

C:\beans\demo\sunw\demo with a new folder name colors

private double dollarvalue=0.0;

AIM: Install TOMCAT web server and APACHE.

Set the CLASSPATH

Turn on Servlet Reloading

The invoker servlet lets you run servlets without first

RESULT: Thus TOMCAT web server was installed successfully.

2. Read the user id and passwords entered in the Login

servlet class. At this point the class is considered to be loaded

GenericServlet. The init method performs a role slightly similar to

method is called for each request processed and is not normally

ServletConfig object is used by the Servlet Container to

Following are the four methods of this class :

provided for this Servlet.

ServletContext object for this Servlet. It is similar to

provided in the web.xml file or if none is provided then

<input type="text" name="usr" size="20"> <br> <br>

2. Read the user id and passwords entered in the Login form

and authenticate with the values (user id and

passwords) available in the cookies.

Thus the user authentication is carried out for four users by

Install a database (Mysql or

JDBC Driver Types

<tr><td> Password </td>