Scribd
Upload
117 views

It2357 Lab Manual

The document provides an algorithm for designing a lab manual for a Web Technology lab course. It outlines 10 experiments covering topics such as designing student ID cards, creating job registration forms, hot spots using HTML, creating frames, using CSS for styling, building a scientific calculator with JavaScript, creating a clock with JavaScript, form validation with DHTML, changing images with DOM, and using applets and regular expressions. Each experiment provides step-by-step instructions for students to complete the tasks and learn the related technologies.

Uploaded by

Saravanan Nallusamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
117 views

It2357 Lab Manual

The document provides an algorithm for designing a lab manual for a Web Technology lab course. It outlines 10 experiments covering topics such as designing student ID cards, creating job registration forms, hot spots using HTML, creating frames, using CSS for styling, building a scientific calculator with JavaScript, creating a clock with JavaScript, form validation with DHTML, changing images with DOM, and using applets and regular expressions. Each experiment provides step-by-step instructions for students to complete the tasks and learn the related technologies.

Uploaded by

Saravanan Nallusamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Department of Information Technology

Lab Manual

om

IT2357 - WEB TECHNOLOGY LAB


(VI Semester IT)

.c

Prepared by

w
w

.re
jin
pa

ul

K.Poornimathi
(SL/IT)
G.Rajesh Kannan
(Lecturer /IT)

RAJALAKSHMI ENGINEERING COLLEGE

Rajalakshmi Nagar, Thandalam, Chennai 602 105

1. DESIGNING STUDENT ID CARD


AIM:
To design an ID card for a particular student.
ALGORITHM:
Step 1: Create a html file with table tag

Step 2: Set the necessary attributes needed for designing


an ID card.[i.e rowspan,colspan,border].

om

.c

Step 3: Front side of ID card should contains


Student name

ul

Roll no

.re
jin
pa

Department
Section

Image of the student.

Step 4: Back side of ID card should contains


Address

w
w

Phone number

Blood Group
Fathers Name

2. JOB REGISTRATION FORM


AIM:
To design an Job Registration form using XHTML.
ALGORITHM:
Step 1: Create a html file with form tag

Step 2: Use the following tag


Label

Text

ul

Textarea

.c

Button

om

.re
jin
pa

Checkbox

Radio Button
Menus

w
w

Step 3: Store the file in the html format and run in


web browser

3.HOT SPOT USING HTML


AIM:
To create a web page which includes a map and display the related
information when a hot spot is clicked in the map

om

ALGORITHM:

Step 1: Create a html file with map tag

.c

Step 2: Set the source attribute of the img tag to the


location of the image and also set the usemap attribute

.re
jin
pa

ul

Step 3: Specify an area with name, shape and href set to


the appropriate values
Step 4: Repeat step 3 as many hot spots you want to put
in the map

w
w

Step 5: Create html files for each and every hot spots the
user will select.

4.CREATING FRAMES

AIM:

Step 1: Create a web page with frame sets consisting of

.c

ALGORITHM:

om

To create the several frames using HTML and display to the web
browser.

ul

many frames.Use the following tag

.re
jin
pa

<frameset cols=50%,50%,50%>

Step 2:Insert the many html files using frame tag and src
attributes.Use the following tag and attributes
<frame src=example.html>

w
w

Step 3: Display the several files in the web browser.

5.WEB PAGE CREATION USING CSS


AIM:
To create a web page that displays college information using various
style sheet

om

ALGORITHM:

frames

.c

Step 1: Create a web page with frame sets consisting two

ul

Step 2: In the first frame include the links

.re
jin
pa

Step 3: In the second frame set display the web page of


the link

Step 4: create a external style sheets


Step 5: create a inline and internal style sheets and make

w
w

it link to the external style sheets

6.Scientific Calculator using JavaScript

AIM:

om

To design the scientific calculator and make event for each button
using java script.

.c

ALGORITHM:

Step 1: Create a title for the web page and declare the

ul

script within the <head> use <script> tag for declaring

.re
jin
pa

function.

Step 2: Separate functions are given for calculating the


total value,sin cos,tan,log,pow.

Step 3:

Use predefined Math function for scientific

operations.

Step 4: create the table for structuring the calculator

using <table> tag and attributes.

w
w

Step 5: Create the button and provide the event handling


for each button to make event.Use onclick() method.

7.CREATING CLOCK
AIM:
To design web page to create a real time clock with a timing event
using java script event handling mechanism.

om

ALGORITHM:

Step 1: Create a title for the web page and declare the

.c

script within the <head> use <script> tag for declaring

ul

function.

Step 2:Create a function with the name of display().


Step 3:Write a script coding for timing event.

Step 4:Create the code for body elements with onload()

.re
jin
pa

method.This method is used to load the document in the


Web browser.

w
w

Step 4: Display the clock.

8.a.CLIENT SIDE FORM VALIDATION USING DHTML


AIM:

om

To create a Client Side Scripts for Validating Web Form Controls


using DHTML
Algorithm:

.c

The form will include one text field called "Your Name", and a

ul

submit button.

Validation script will ensure that the user enters their name

.re
jin
pa

before the form is sent to the server.

Open this page to see it in action.

Try pressing the Send Details button without filling anything in


the "Your Name" field.

You might like to open the source code for this form in a
separate window

The page consists of a JavaScript function called

validate_form() that performs the form validation, followed by

w
w

the form itself.

8.b.CHANGE THE SOURCE OF IMAGE


AIM:

om

To create the DOM code for changing the source of the image.
ALGORITHM:

Step 1: Create a title for the web page and declare the

Step 2:Create a function with the name of change().

.re
jin
pa

ul

function.

.c

script within the <head> use <script> tag for declaring

Step 3:Write a script coding for change the source


image.Use the following code wihin the function.
Document.getElementById(hi).img=Image.gif;

Step 4:Create the code for body elements with onclick().


method.This method is used to call the java script

function change().

w
w

Step 4: Display the new image.

9.APPLET
AIM:

om

write a java program to create applets with the following feature


Create a color palette with matrix of buttons.
a.

Set background and foreground of the control text

b.

.c

area by selecting a color from color palette.

In order to select foreground or background use


To set background images.

.re
jin
pa

c.

ul

checkbox controls as radio buttons.

ALGORITHM:
Step 1: Import all necessary packages and classes
Step 2: Define a class that extends applet and implements
action listener and item listener
Step 3: Declare an array of buttons to set colors, two
checkboxes for foreground and background colors

w
w

Step 4: Declare a text area to hold the text, a checkbox


group for checkboxes
Step 5: Add the array of buttons in the init function.
Step 6: In the actionPerformed() method, do the
following:
Get the action command in the string, color
I) If foreground is checked then set the foreground
color to the selected color
II)If ackground is checked then set the background
color to the selected color

10.REGULAR EXPRESSIONS

om

AIM:
To display the area code for the given phone number using java
script regular expressions.

Step 1: Create a title for the web page and declare the

ul

.c

ALGORITHM:

.re
jin
pa

script within the <head> use <script> tag for declaring


function.

Step 2:Create a function with the name of display() and


with the necessary variables

Step 3:Write a script coding for Regular Expressions.

w
w

Step 4:Use the following expressions within the function.

Var i=str.match(/(d{3})\ \d{3}-\d{4}/);

Step 4:Create the code for body elements with onclick()


method.This method is used to call scripting the
document in the Web browser.

Create three labels,Text box and one button

Step 4: Display the result.

om
.c
ul
.re
jin
pa

CYCLE-II

w
w

SERVER SIDE
PROGRAMMING

om

1.a.INVOKING HTML FORM USING SERVLET


AIM:

.c

To write html and servlet to demonstrate invoking a servlet from a


html.

ul

ALGORITHM:

.re
jin
pa

Client:

Step1: In index.html on the client side declare the


contents that you like to transfer to the server using html
form and input type tags.

Step2: create a submit button and close all the included


tags.

Server:

w
w

Step 1:Import the necessary package,classes


methods.Use the following javax packages.

and

Import javax.servlet.http.*;
import javax.http.*;
Step 2:create the class that extends to the HttpServlet
class
Step 3:Use the doGet(req ,res)with two parameter that
throws IOException,ServletException.

Step 4: In the servlet side using the parameter request get


the stings declared in the client side (requst.getparameter)

Step5: Include necessary html coding that helps to


display the content.

om

1.b.SERVER INFORMATION
AIM:

.c

To write the servlet program to display the server information in the


web browser,

.re
jin
pa

Server:

ul

ALGORITHM:

Step 1:Import the necessary package,classes


methods.Use the following javax packages.

and

Import javax.servlet.http.*;
import javax.http.*;

w
w

Step 2:create the class that extends to the HttpServlet


class
Step 3:Use the doGet(req ,res)with two parameter that
throws IOException,ServletException.

Step 4:Use the PrintWriter class to print the information

Step 5:Use the certain functions for get the server


information .Use the following functions.
getServerName(),getServerPort(),getProtocol(),
getScheme()

Step2: Include necessary html coding that helps to


display the content.

AIM:

om

1.c.CREATING SESSION

.c

To write the servlet program to create the session and session id.

.re
jin
pa

Server:

ul

ALGORITHM:

Step 1:Import the necessary package,classes


methods.Use the following javax packages.

and

Import javax.servlet.http.*;
import javax.http.*;

w
w

Step 2:create the class that extends to the HttpServlet


class
Step 3:Use the doGet(req ,res)with two parameter that
throws IOException,ServletException.

Step 4:Use the PrintWriter class to print the information

Step 5:Use the HttpSession class to create the session and


Session id.
Step2: Include necessary html coding that helps to
display the content.

.c

AIM:

om

1.d.ADDING COOKIES

ul

To write a hml coding to create and add cookie to the web server.
ALGORITHM:

.re
jin
pa

Client:

Step1: In index.html on the client side declare the


contents that you like to add the cookie in the server
using html form and input type tags.

Step2: create a submit button and close all the included


tags.

w
w

Server:

Step 1:Import the necessary package,classes


methods.Use the following javax packages.

and

Import javax.servlet.http.*;
import javax.http.*;
Step 2:create the class that extends to the HttpServlet
class
Step 3:Use the doGet(req ,res)with two parameter that
throws IOException,ServletException.

Step 4: Use the Cookie class and methods.

Step5: Include necessary servlet coding that helps to add


the cookie to web browser..

2.a.Invoke JSP from Applet

.c

Aim:

om

To invoke JSP from Applet

ul

Algorithm:

w
w

.re
jin
pa

1.Start the Invoking JSP from Applet


2.Create the Ats.html
3.Use the one input type for roll no
4.When submit button is click it perform the action=
http://localhost:8080/Student/Student
5.The save as the Ats.html
6.Then create java coding for AppletToJSP.java
7.In coding create three important objects
8.Label sent and received and button click to send to
servlets.
9.Set the url as
http://localhost:8080"+"/JSP/AppletToJSP
10.Then create java coding for AppletToJSP.jsp and
Intermediate.jsp(see the source code)
11.Finally save and run the program

om

.c

2.b.CREATE THE SIMPLE BEAN

.re
jin
pa

Algorithm:

ul

Aim:
To create a simple Bean to display the message.

Step 1: Create a folder name as SampleBean and file name as SBean.

Step2: SBean file should consists of getproperty and setproperty


methods to get and set the user message.

w
w

Step3:Create a JSP file to invoke a SBean.

om

.c

3.a.STUDENT MARKLIST USING JSP

AIM:

ul

To create a three tier application for displaying the student marklist

.re
jin
pa

ALGORITHM:
Client:
Step1: In index.html on the client side declare the
contents that you like to transfer to the server using
html form and input type tags.
Step2: create a submit button and close all the included
tags.

SERVER:
Step 1: Import all necessary packages

w
w

Step 2: Use all JDBC components.


Step 3: Use scriplet to insert java coding.

i)Set the content type of the response to "text/html"


ii)connect with the database which has the student
marklist query the data to the database
Step 4: Display the student marklist

om

3.b.ONLINE EXAMINATION USING SERVLET WITH DATABASE

.c

AIM:

.re
jin
pa

ul

To write java servlet programs to conduct online examination and to


display student mark list available in a database
ALGORITHM:
Client:
Step1: In index.html on the client side declare the
contents that you like to transfer to the server using html
form and input type tags.
Step2: create a submit button and close all the included
tags.

Servlet:

Step 1: Import all necessary packages

w
w

Step 2: Define a class that extends servlet


Step 3: In the doPost() method, do the following:
i)Set the content type of the response to "text/html"
ii)Create a writer to the response
iii)Get a paratmeter from the request
iv)If its value is equal to right answer then add 5 to mark
variable
v)Similarly repeat step
vi)for all parameters
vii)Display the result in an html format using the writer

STUDENT MARK LIST DATABASE


Step 1: Import necessary to java packages and javax
packages and classes
Step 2: Create a class that extends HttpServlet and
implements ServletException and IOException
Use all JDBC components.

om

Step 3: In the doGet() method, do the following:

w
w

.re
jin
pa

ul

.c

i)Create a PrintWriter object


ii)Open a connection with the data source name
iii)Write a sql query and execute to get the resultset
iv)Display the resultset information in html form

om

.c

3.c.CREATING CUSTOM TAG LIBRARY USING JSP

ul

AIM:

.re
jin
pa

To write the JSP program to create the custom tag library for
calculating area of triangle.
ALGORITHM:

Server:

Step 1:Import the necessary package,classes


methods.Use the following javax packages.

and

Import javax.servlet.http.*;

w
w

import javax.http.*;
import javax.servlet.jsp.*;

Creation of Tag Handler.


Creation of Tag Library Descripor(TLD).

Step 2:Creation of JSP with registration and use of tags


declared in TLD.
i)Tag Handler class must extends TagSupport(Supported
by JSP API).

ii)create the CustomTag and store a java file named


firstTag.java and use the area of square formula(n*n).
iii). Use doStart() method to create the custom tag named
MyTag.tld.
iv).Register the custom tag from MyTag.tld file with the
JSP web page
Step 3:Use the custom tag in your file

Step 4:Execute the file and display the data.

.c

om

AIM:

.re
jin
pa

Write a Programs using AJAX


ALGORITHM:

ul

4.Program using AJAX

1. use Javascript to initialise the XML HTML request object


2. use HTML to create areas for user input and output
3. use Javascript to send the user inputs to a server
4. process the data on a server

5. use Javascript to process any response from the server and display the

w
w

result

om

.c

5.WEB SERVICES
AIM:

.re
jin
pa

ul

Consider a case where we have two web Services- an airline service


and a travel agent and the travel agent is searching for an airline. Implement
this scenario using Web Services and Data base.
PROCEDURE:

a) Develop webservices
b) Test the webservice

c) Develop client and call the webservice there

w
w

d) Finally deploy and test the application

om
.c
ul
.re
jin
pa
w
w

CYCLE-III
REPRESENTATION OF DATA

om

.c

1.a.PROGRAM USING XML WITH DTD

ul

AIM:

To write a XML code to validate the XML elements with XML DTD.

.re
jin
pa

ALGORITHM:

Step 1:Create the xml file with version and doctype.

Step 2:To define the elements under the Doctype


mentioned within paranthesis angular brackets.

Tag with the defined fields are used.

w
w

Details are given using these tags


Validate the elements and display the results.

om
.c

ul

2. PROGRAM USING XML WITH CSS


AIM:

.re
jin
pa

To write a XML code to vdispaly the XML elements with XML CSS.
ALGORITHM:

Step 1:Create the xml file with version and doctype.

Step 2:Create external or internal style sheet to provide


the style to xml elements.Store that file with the .CSS
format.

w
w

Import the css file with the use of following code.


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

Create the tag elements.


Display the result in the web browser.

om
.c

3. PROGRAM USING XML WITH XSLT

ul

AIM:

.re
jin
pa

To write a XML code to dispaly the XML elements with XML


XSLT.
ALGORITHM:

Step 1:Create the xml file with simple elements.

Step 2:Create external or internal style sheet to provide


the style to xml elements.Store that file with the .CSS
format.

w
w

Import the css file with the use of following code.


<?xml-stylesheet type="text/css" href="style.css"?>
Create the tag elements.\
Write the XSLT coding.
Display the result in the web browser.

om
.c
ul

5. PROGRAM USING XML DOM

.re
jin
pa

AIM:

To write a XML code to validate the xml elements using XML DOM
Parser.
ALGORITHM:

Declare the main method and set up the parser.


Step 2: The new instance of DOMParserFactory and
from this one we create a new Instance of DOMParser.
To the Parse Method of DOMParser, we pass two
parameters, name of the XML File and the class which
implements interface HandlerBase..

w
w

The javax.xml.parsers.DOMParser class is a wrapper


thatdefinesanumber of convenience methods.

It wraps the org.xml.DOM.Parser object. If needed,


you can obtain that parser using the DOMParser's
getParser() method.

The DOM Methods needs to be implemented from the


DocumentHandler Base Interface .

om
.c
ul

6.PROGRAM USING XML SAX

.re
jin
pa

AIM:

To write a XML code to validate the xml elements using XML SAX
Parser.
ALGORITHM:

Declare the main method and set up the parser.


Step 2: The new instance of SAXParserFactory and
from this one we create a new Instance of SaxParser. To
the Parse Method of SaxParser, we pass two parameters,
name of the XML File and the class which implements
interface HandlerBase..

w
w

The javax.xml.parsers.SAXParser class is a wrapper


thatdefinesanumber of convenience methods.

It wraps the org.xml.sax.Parser object. If needed,


you can obtain that parser using the SAXParser's
getParser() method.

The DOM/SAX Methods needs to be implemented from


the DocumentHandler Base Interface .

om
.c
ul

.re
jin
pa

Web Service Reference:


Setting Servers:

Set up the installed JRE in eclipse (Windows ->


Preferences -> Java -> Installed JREs)
Set up the installed runtime for server in eclipse (Windows
-> Preferences -> Server -> Installed Runtimes)
Set up the Server view in eclipse (Windows -> Show View
-> Other)
Set up the Tomcat Server by right clicking and selecting
New -> Server option from the Server view in eclipse.

w
w

Creating web service:


Create a new Dynamic Web Project in eclipse (File -> New
-> Other)
Enter name as ?WebServiceTutorial?, select project
location as ?E:\Test? and select Apache Tomcat v5.5 as the
Target server.
Now create a new Java class from the Project Explorer
(Dynamic Web Projects -> Java Source -> New -> Class)
Enter name as ?Hello? and package as ?com.tutorial?.
Add a simple method in the ?Hello? class as below.
public String sayHello(String name){

return "Hello " + name;


}

om

.re
jin
pa

.c

Save and build the project.


Create a new Web service in eclipse (File -> New -> Other)
Select Generate a proxy
Select Test the Web service.
Select Overwrite files without warning
Select or enter the Bean name as ?com.tutorial.Hello?. This
is the java class that we just now created.
Continue the wizard by clicking Next and finish.
On Finish, the Tomcat server starts up and launches the
Test client.
Verify the generated contents. Look for Hello.class and the
generated JSPs as below.
Verify the Tomcat folder and ensure the newly created web
applications ? WebServiceTutorial,
WebServiceTutorialClient.
We can also run the following url from the browser to
access/test the Web service.
If servlet error ?org.eclipse.jst.ws.util.JspUtils cannot be
resolved or is not a type? is thrown on the browser, then
copy the webserviceutils.jar file from the
E:\Eclipse3.1\eclipse\plugins\org.eclipse.jst.ws.consumptio
n_0.7.0 into the WEB-INF\lib folder of the
WebServiceTutorialClient application and restart the
Tomcat server.
The browser displays the methods available in the web
service.
Click on the sayHello(..) method, enter your name (for
e.g. ?Jeeva?) in the inputs section and click ?Invoke?.
The WSDL for the Hello Web service can be found in
E:\Test\WebServiceTutorial\WebContent\wsdl\Hello.wsdl.
On double-click, the WSDL opens in a graphical editor.
Right-click on the WSDL file and explore the options to
test the web service / publish the WSDL file / generate
client / etc.

ul

w
w

om

.c

ul

.re
jin
pa

w
w

You might also like