WEB TECHNOLOGIES LAB MANUAL

Department of Information Technology

Subject code: RIT 601

Submitted by:Mr. Ramander Singh

Assistant professor: IT
Week-1

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

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.

Homepage OUTPUT:
Top frame Output:
Week-2:

2) Login page Description:

The login page contains the user name and the password of the user to authenticate.
 Oputput page:

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:

1. Snap shot of Cover Page.

2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
Output:

RESULT:
Thus the home page, login page, catalogue page for the online book store are created
successfully.
Week-3

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

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 [email protected])

4. Phone number (Phone number should contain 10 digits only).

DESCRIPTION:

JavaScript is a 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 client-side 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 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 visitor’s 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. Here’s where regular expressions come in handy.
A regular expression is a way of describing a pattern in a piece of text. In fact, it’s 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:

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
RESULT:

Thus the home page, login page, catalogue page for the online book store are created
successfully
Week-4

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

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 background-repeat 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 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 a 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: 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:

<link rel="stylesheet" type="text/css"

href="mystyle.css" />

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;…..}
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: 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:

<link rel="stylesheet" type="text/css"

href="mystyle.css" />

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;…..}
RESULT: Thus different style of CSS and different type of the properties are applied
Week-5:
------------------------------------------------------------------------------------------------------------
AIM: Write an XML file which will display the Book information.
It includes the following:
1) Title of the book
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 re-writing the definition may not be
worthwhile.
DTD is also established, and examples of common objects defined in a DTD abound
on the Internet -- freely available for re-use. A developer may be able to use these to
define a DTD more quickly than they would be able to accomplish a complete re-
development 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.

RESULT: Thus the XML stylesheets are successfully used to display the content in a table
format.
Week-6:

------------------------------------------------------------------------------------------------------------
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);

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 PropertyChangeSupport class. First, you
have to create a list of listeners to maintain:
onstrained - Constrained properties are similar to bound properties. In addition to
maintaining a 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:

1) Creating a directory- Create a 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.
Thus the colors bean is created successfully.
Result
Thus the Mouse Clicks bean is created successfully
Week-7:
------------------------------------------------------------------------------------------------------------
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 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

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.
OUTPUT:
RESULT: Thus TOMCAT web server was installed successfully.
Week-8:

------------------------------------------------------------------------------------------------------------
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 n ot 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:
web.xml:
OUTPUT:

RESULT:
Thus the user authentication is carried out for four users by using both cookies and
getInitParameters successfully.
Week-9
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.
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 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.

OUTPUT: