1

Velammal College of Engineering and Technology

Viraganoor, Madurai-625 009

Department of Computer Science and Engineering

Academic Year: 2025-26 (Even Semester)

Lab Manual
Course Code/Name: 21PCS10 / Web Technology and Design
Laboratory

Batch – III Year ECE (2023-2027)

Prepared by, Verified by,

Course In-charge Name: [Link] HoD-CSE

1
 2

Vision and Mission of the Department and Institute

Institute Vision and Mission

Vision
To emerge and sustain as a Center of Excellence for Technical and Managerial Education
upholding social values
Mission
Our aspirants are
• Imparted with comprehensive, innovative and value-based education.
• Exposed to technical, managerial and soft skill resources with emphasis on research, and
professionalism.
• Inculcated with the need for a disciplined, happy, married and peaceful life.

Department Vision and Mission

Vision
To become a Center of Excellence in the field of Computer Science and Engineering upholding
social values.

Mission
• Heightening the knowledge of the faculty in recent trends through continuous development
programmes.
• Transforming the students into globally competent and technically well-equipped Computer
Professionals with strong theoretical and practical knowledge.
• Cultivating the spirit of social and ethical values for the cause of development of our Nation.

2
 3

Program Educational Outcome

Program Educational Objectives (PEOs): (Regulation 2017 – Prescribed by Anna University)

To enable graduates to pursue higher education and research, or have a successful

PEO 1 career in industries associated with Computer Science and Engineering, or as
entrepreneurs.
To ensure that graduates will have the ability and attitude to adapt to emerging
PEO 2
technological changes.

Program Specific Outcomes

PSOs for (Regulation 2017 – Prescribed by Anna University)

PSO1. To analyze, design and develop computing solutions by applying foundational concepts
of Computer Science and Engineering.

PSO2. To apply software engineering principles and practices for developing quality software
for scientific and business applications.

PSO3. To adapt to emerging Information and Communication Technologies (ICT) to innovate

ideas and solutions to existing/novel problems.

3
 4

Program Outcomes for both R2013 and R2017

PO1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization for the solution of complex engineering
problems.
PO2. Problem analysis: Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.
PO3. Design/development of solutions: Design solutions for complex engineering problems
and design system components or processes that meet the specified needs with appropriate
consideration for public health and safety, and cultural, societal, and environmental
considerations.
PO4. Conduct investigations of complex problems: Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.
PO5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools, including prediction and modelling to complex engineering
activities, with an understanding of the limitations.
PO6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal, and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
PO7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.
PO8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
PO9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
PO10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with t h e society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
PO11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
PO12. Life-long learning: Recognise the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological change.
4
 5

VELAMMAL COLLEGE OF ENGINEERING AND TECHNOLOGY

Department Of Computer Science and Engineering
Dos and Don’ts

1. Wearing T-shirts and in formals are strictly prohibited.

2. Keep all the belongings, such as bags, lunch box and food materials outside the
lab.
3. On any circumstances private Laptop, Pen drive, CD, Notebooks are not allowed
inside the lab without prior permission of HoD-CSE.
4. Wearing ID Cards is compulsory. Entry will not be permitted, in case of not
having the ID cards.
5. On any account usage of a single PC by two or more students is prohibited.
6. Maintain a high degree of discipline inside the lab, by not roaming and making
unwanted noises.
7. In case of any difficulty in using the systems, contact only the Lab Instructor.
8. Chatting and viewing any video content pages are strictly prohibited. In case of
violation, serious action will be taken.
9. Remove the footwear and keep it outside only on shoe-rack.
10. Register the usage timing along with signature in the Login Register.
11. Conversation between boys and girls should be strictly avoided. Students
violating will be punished seriously.
12. Co-operate with the lab instructor in maintaining the rules and regulations, and
pave the way for effective utilization of lab.

5
 6

Outcome of the course

CO1:Construct Web pages using HTML/XML and style sheets.

CO2: Build dynamic web pages with validation using Java Script objects and by applying
different event handling mechanisms.
CO3: Prepare dynamic web pages using server side scripting.
CO4: Make use of PHP programming to develop web applications.
CO5: Develop web applications using AJAX and web services.

Pre-requisite of the course

• Fundamentals in Hardware and Software aspects

• Basic knowledge in computer programming skills

Objective of the course

• To apply HTML5 elements to create webpages

• To build interactive webpages at client side using CSS3
• To utilize java script for event handling and form validation
• To construct dynamic web applications using PHP
• To develop web application using AJAX and XML

6
 7

Syllabi of the course

21PCS10 WEB TECHNOLOGY ND DESIGN

TOTAL: 30
PERIODS
LIST OF EQUIPMENT FOR A BATCH OF 30 STUDENTS

Standalone desktops 60 Nos.

Requirements

• Java &Internet Connection

Evaluation Procedure

• The lab questions given under each exercise will cover the concepts
• Students have to complete the exercises within the lab hours. In case if the exercises
cannot be completed, they can show the output within two days. Marks will be awarded
for the output based on the uniqueness. Output will be assessed in person.
• Observation and Record have to be completed and get corrected from the faculty within
that week.
• Completed Observation and Record have to be submitted in the next lab session.

Assessment Scheme to be followed in this Lab

Observation Rubrics: Record Rubrics:

Coding(10) Observation(20)
Output(5) Record(5)
Viva(5) Total(25)
Total(20) Initial
Initial

Experiments and COs Mapping

7
 8

(Group the experiments based on the COs)

Sl. No Name of the Experiment COs

1 Create Websites using HTML 5 tags CO1
Use Image maps in webpages
2 CO1

3 Design Websites using style sheets CO2

Create an attractive webpage for any product using
4 Animations, transition and transformation. CO2

5 Form validation using JavaScript CO3

Use Event handling and DOM to change content of any
6 tags CO3

7 Validate the form using PHP regular expression. CO4

Create a web application that uses PHP and MySQL
8 CO4

9 Creating AJAX application using PHP CO5

10 Transforming XML using XSL and XSLT CO5

8
 LAB MANUAL

WEB TECHNOLOGY AND DESIGN

 COMPUTER SCIENCE AND ENGINEERING

WEB TECHNOLOGY AND DESIGN LAB

OBJECTIVE :
❖ To create a fully functional website with mvc architecture. To develop an online Book store using we
can sell books (Ex amazon .com).
OUTCOMES:
❖ To gain knowledge on designing static and dynamic web pages.
❖ Able to validate web pages at client-side.
❖ Design and validate XML documents.
❖ Gain knowledge on server side scripting.
❖ To develop a business application using STRUTS.
Hardware and Software required:
❖ A working computer system with either Windows or Linux
❖ A web browser either IE or firefox
❖ Tomcat web server and Apache web server
❖ XML editor like Altova Xml-spy [[Link]/XMLSpy – free ] , Stylusstudio , etc.,
❖ A database either Mysql or Oracle
❖ JVM(Java virtual machine) must be installed on your system
❖ BDK(Bean development kit) must be also be installed
CO-PO MAPPING:
CO/PO PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO 1 PSO 2 PSO 3
CO1 1 2 2 1 2 2 2
CO2 1 1 2 2 1 1 2 1 1 2 2
CO3 1 1 2 2 1 2 2 1 2 2 2 2
CO4 1 3 2 2 2 2 2 2 3 1
CO5 1 1 2 2 2 2 2 1 3 2
CO6 1 1 2 2 2 3 1

Week-1:
Design the following static web pages required for an online book store web site.
1) HOME PAGE:
The static home page must contain three frames.
Top frame: Logo and the college name and links to Home page, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
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.

Logo Web Site Name

Home Login Registration Catalogue Cart
CSE
ECE
Description of the Web Site
EEE
CIVIL
Fig 1.1
2) LOGIN PAGE:
This page looks like below:

Logo Web Site Name

Home Login Registration Catalogue Cart
 COMPUTER SCIENCE AND ENGINEERING

CSE
ECE Login :
EEE Password:
CIVIL

Submit Reset

3) CATOLOGUE PAGE:
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.
Logo Web Site Name
Home Login Registration Catalogue Cart
Book : XML Bible
CSE Author : Winston
Publication : Wiely $ 40.5
ECE

Book : AI
EEE
Author : [Link] $ 63
Publication : Princeton hall
CIVIL

Book : Java 2
Author : Watson $ 35.5
Publication : BPB publications

Book : HTML in 24 hours

Author : Sam Peter $ 50
Publication : Sam publication

Week-2:
4) CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:
Logo Web Site Name
Home Login Registration Catalogue Cart
CSE Book name Price Quantity Amount
ECE Java 2 $35.5 2 $70
EEE XML bible $40.5 1 $40.5
CIVIL Total amount - $130.5

5) REGISTRATION PAGE:
 COMPUTER SCIENCE AND ENGINEERING

Create a “registration form “with the following fields

1) Name (Text field) 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)
7) Languages known (check boxes – English, Telugu, Hindi, Tamil)
8) Address (text area)
WEEK 3:
VALIDATION:
6) 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@[Link])
4. Phone number (Phone number should contain 10 digits only).
Week-4:
7) 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 (font, color etc.). Then, in the body of your
pages, you refer to these selectors to activate the styles.
For example:
<HTML>
<HEAD>
<style type="text/css">
[Link] {color:red; font-size:22px; font-family:arial; text-
decoration:underline}
</style>

</HEAD>

<BODY>
<b>This is normal bold</b><br>
Selector {cursor:value}

For example:

<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>

<body>
<b>
<a href="[Link]" class="xlink">CROSS LINK</a>
<br>
<a href="[Link]" class="hlink">HELP LINK</a>
 </b>
</body>
</html>

<b class="headline">This is headline style bold</b>

</BODY>

</HTML>

2) Set a background image for both the page and single elements on the page.
You can define the background image for the page like this:
BODY {background-image:url([Link]);}

3) Control the repetition of the image with the background-repeat property.

As background-repeat: repeat Tiles the image until the entire page is filled, just like an ordinary background
image in plain HTML.
4) Define styles for links as
A:link
A:visited
A:active
A:hover
Example:
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>
Week-5:
8) Write an XML file which will display the Book information which includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price
9) Write a Document Type Definition (DTD) to validate the above XML file.
10) 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.
Week-6:
11) Install TOMCAT web server and APACHE.
While installation assign port number 4040 to TOMCAT and 8080 to APACHE. Make sure that
these ports are available i.e., no other process is using this port.
12) Access the above developed static web pages for books web site, using these servers by putting the web
pages developed in week-1 and week-2 in the document root.

13
 COMPUTER SCIENCE AND ENGINEERING
Access the pages by using the urls : [Link] (for tomcat)
[Link] (for Apache)
Week-7:
13) User Authentication: Write a Servlet 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
Week-8:
14) 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.
15) 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).
Week-9:
16) 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
Week-10:
17) Assume four users user1,user2, user3 and user4 having the passwords, pwd2,pwd3 and pwd4 respectively.
Write a servlet for doing the following.
Create a Cookie and add these four user id’s and passwords to this Cookie
Week-11:
18) Create and Run struts application and validate it using struts components.
REFERENCES:
1. HTML Black Book – Steve Holzner.
2. The complete Reference Java 2 Fifth Edition by Patrick Naughton and Herbert Schildt. TMH
3. Java Server Pages –Hans Bergsten, SPD O’Reilly

14
 WEB TECHNOLOGY AND DESIGN
MANUAL

Lab Exercises
1. Write a HTML program for the demonstration of Lists.
a. Unordered List
b. Ordered List
c. Definition List
d. Nested List
2. Write a HTML program for demonstrating Hyperlinks.
a. Navigation from one page to another.
b. Navigation within the page.
3. Write a HTML program for time-table using tables.
4. Write a HTML program to develop a static Home Page using frames.
5. Write a HTML program to develop a static Registration Form.
6. Write a HTML program to develop a static Login Page.
7. Write a HTML program to develop a static Web Page for Catalog.
8. Write a HTML program to develop a static Web Page for Shopping Cart.
9. Write HTML for demonstration of cascading stylesheets.
a. Embedded stylesheets.
b. External stylesheets.
c. Inline styles.
10. Write a javascript program to validate USER LOGIN page.
11. Write a javascript program for validating REGISTRATION FORM
12. Write a program for implementing XML document for CUSTOMER DETAILS.
13. Write an internal Document Type Definition to validate XML for CUSTOMER
DETAILS?
14. Write an external Document Type Definition to validate XML for CUSTOMER
DETAILS?
15. Write an XML for person information and access the data using XSL.
16. Write an XML for student information and access second students data using DOM.
17. Write a program to display contents of XML file in a table using Extensible Style
Sheets.

2
 WEB TECHNOLOGY AND DESIGN
MANUAL

18. Write a simple servlet that displays a message.

19. Write a servlet that reads parameters from employee login page.
20. Write a servlet for creating a cookie and retrieving it.
21. Write a servlet for session tracking.
22. Write a JSP that reads parameters from user login page.
23. Write a JSP that reads a value, creates a cookie and retrieves it.
24. Write a JSP for session tracking.
25. Write a servlet that connects to the database and retrieves the data and displays it.

3
 WEB TECHNOLOGY AND DESIGN
MANUAL
1. Write a HTML program for the demonstration of Lists.
e. Unordered List
f. Ordered List
g. Definition List
h. Nested List
Unordered List:
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul type=”square”>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output:

4
 WEB TECHNOLOGY AND DESIGN
MANUAL

Ordered List:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>
<ol type=”A”>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output:

5
 WEB TECHNOLOGY AND DESIGN
MANUAL

Definition List:
<html>
<head>
<title>Creating Definition List</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>

6
 WEB TECHNOLOGY AND DESIGN
Output: MANUAL

Nested List:
<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ol>
<li>Kurnool</li>
<ul>
<li>GPREC</li>
<li>BITS</li>
<li>GPCET</li>
</ul>
<li>Nandyala</li>

7
 WEB TECHNOLOGY AND DESIGN
<ul> MANUAL

<li>RGMCET</li>
<li>SREC</li>
</ul>
</ol>
</body>
</html>
Output:

2. Write a HTML program for demonstrating Hyperlinks.

c. Navigation from one page to another.
d. Navigation within the page.
Navigation from one page to another:
<html>
<head>
<title>Setting Hyperlink colors</title>
</head>
<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>
<center><h1>Setting Hyperlink colors</h1>
<a href=”[Link]”>Click here</a>to goto login page
</body>
</html>
Output:

8
WEB TECHNOLOGY AND DESIGN
MANUAL

9
 WEB TECHNOLOGY AND DESIGN
MANUAL

Navigation within the page:

<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor="pink">
<center><h1>Linking to a section in a page</h1>
<a name=”top”>This is the top of the page</a>
Click here to goto the <a target=”#bottom”>bottom</a>of the page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a name=”bottom”>This is the bottom of the page</a> Click
here to goto <a target=”#top”>top</a>of the page
</center>
</body>
</html>
Output:

10
WEB TECHNOLOGY AND DESIGN
MANUAL

11
 WEB TECHNOLOGY AND DESIGN
MANUAL

3. Write a HTML program for time-table using tables.

<html>
<head>
<title>Timetable</title>
</head>
<body>
<h1 align="center"><font color="Salmon">Timetable of III
CSE</font></h1><br>
<table align="center" border="2" cellspacing="0" cellpadding="15">
<tr align="center" valign=="middle">
<th>DAY</th>
<th>I</th>
<th>II</th>
<th
rowspan="7"><b>T<br>E<br>A<br><br>B<br>R<br>E<br>A<br>K</b></th>
<th>III</th>
<th>IV</th>
<th
rowspan="7"><b>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K</
b></th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr align="center">
<th>MON</th>
<td>IS</td>
<td>WT</td>
<td>SEM</td>
<td>OOAD</td>

12
WEB TECHNOLOGY AND DESIGN
MANUAL

<td>SCI</td>
<td>C#</td>
<td>COMP</td>
</tr>
<tr align="center">
<th>TUE</th>
<td>AP</td>
<td>AP Lab</td>
<td colspan="2">AP Lab</td>
<td>WT</td>
<td>IS</td>
<td>OOAD</td>
</tr>
<tr align="center">
<th>WED</th>
<td>WT</td>
<td>IS</td>
<td>C#</td>
<td>SCI</td>
<td colspan="3">MOOC'S</td>
</tr>
<tr align="center">
<th>THU</th>
<td>IS</td>
<td>LIB</td>
<td>OOAD</td>
<td>WT</td>
<td colspan="3">WT Lab</td>
</tr>
<tr align="center">

13
 WEB TECHNOLOGY AND DESIGN
MANUAL

<th>FRI</th>
<td>AP</td>
<td>AP</td>
<td>C#</td>
<td>OOAD</td>
<td colspan="3">C# Lab</td>
</tr>
<tr align="center">
<th>SAT</th>
<td>OOAD</td>
<td>SCI</td>
<td>WT</td>
<td>SEM</td>
<td>AP</td>
<td>AP</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
Output:

14
WEB TECHNOLOGY AND DESIGN
MANUAL

15
 WEB TECHNOLOGY AND DESIGN
MANUAL

4. Write a HTML program to develop a static Home Page using frames.

<html>
<head>
<title>RGM ENGINEERING COLLEGE</title>
</head>
<frameset cols="30%,70%">
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
</frameset>
<frameset rows="25%,25%,50%">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]">
<frame src="e:\cse546\[Link]" name="display">
</frameset>
</frameset>
</html>
Output:

16
 WEB TECHNOLOGY AND DESIGN
MANUAL
5. Write a HTML program to develop a static Registration Form.
<html>
<head>
<title>Registration</title>
</head>
<body bgcolor=lightblue>
<h1 align=center><u>Registration Form</u></h1>
<br><br><br>
<div>
<strong>
First Name &nbsp <input type=text value=" " name="txt1"><br><br>
Last Name &nbsp <input type=text value=" " name="txt2"><br><br>
UserName &nbsp <input type=text value="" name="txt3"><br><br>
Password &nbsp <input type=password value="" name="pwd1"><br>
Confirm Password &nbsp <input type=password value="" name="pwd2"><br><br>
Address &nbsp <textarea rows=3 cols=60></textarea><br><br>
Date of Birth &nbsp
dd<select name="sel1">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>

17
 WEB TECHNOLOGY AND DESIGN
MANUAL

mm<select name="sel2">
<option>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
yyyy<select name="sel3">
<option> --- </option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>

18
 WEB TECHNOLOGY AND DESIGN
MANUAL

<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
Sex &nbsp
<input name="rb1" type="radio" value="radiobutton">Male
<input name="rb1" type="radio" value="radiobutton">Female
<br><br>
Martial Status &nbsp
<input name="rb2" type="radio" value="radiobutton">Single
<input name="rb2" type="radio" value="radiobutton">Married
<br><br>
Mobile Number &nbsp <input type=text name="txt4"><br><br>
Branch &nbsp
<input name="rb3" type="radio" value="radiobutton">CSE

19
 WEB TECHNOLOGY AND DESIGN
MANUAL

<input name="rb3" type="radio" value="radiobutton">IT

<input name="rb3" type="radio" value="radiobutton">ECE
<input name="rb3" type="radio" value="radiobutton">EEE
<input name="rb3" type="radio" value="radiobutton">MECH
<br><br>
Languages Known &nbsp
<input name="cb1" type="checkbox" value="checkbox">English
<input name="cb1" type="checkbox" value="checkbox">Telugu
<input name="cb1" type="checkbox" value="checkbox">Hindi
<input name="cb1" type="checkbox" value="checkbox">Kannada
<input name="cb1" type="checkbox" value="checkbox">Tamil
<br><br>
<center>
<input type=submit value="SUBMIT" name="btn1">&nbsp
<input type=reset value="CANCEL" name="btn1">
</center>
</strong>
</body>
</html>

Output:

20
WEB TECHNOLOGY AND DESIGN
MANUAL

21
 WEB TECHNOLOGY AND DESIGN
MANUAL

6. Write a HTML program to develop a static Login Page.

<html>
<head>
<title>login</title>
</head>
<body>
<br><br><br><br>
<h1 align=center><u>LOGIN</u></h1>
<br><br><br>
<h4>
<center>
username&nbsp&nbsp<input type=text><br>
password&nbsp&nbsp<input type=password><br><br><br>
</h4>
<input type=submit value=submit>
&nbsp&nbsp
<input type=reset value=cancel>
</center>
</body>
</html>

22
 WEB TECHNOLOGY AND DESIGN
MANUAL

Output:

23
 WEB TECHNOLOGY AND DESIGN
MANUAL
7. Write a HTML program to develop a static Web Page for Catalog.
<html>
<head>
<title>catalouge</title>
</head>
<body>
<center>
<table border=2 cellpadding=10 cellspacing=10>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:XML Bible<br>
Author:Wingston<br>
Publication:wiely</td>
<td>$40.5</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:A1<br>
Author:[Link]<br>
Publication:Princeton hall</td>
<td>$63</td>
<td><input type="button"value="add to cart"></td>
</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:JAVA 2<br>
Author:Watson<br>
Publication:BPB</td>
<td>$35.5</td>

24
 WEB TECHNOLOGY AND DESIGN
MANUAL

<td><input type="button"value="add to cart"></td>

</tr>
<tr>
<td> <img src="D:\cse546\[Link]"height=100 width=100></td>
<td>Book:Html in 24 hrs<br>
Author:Sam Peter<br>
Publication:SAM</td>
<td>$50</td>
<td><input type="button"value="add to cart"></td>
</tr>
</table>
</center>
</body>
</html>
Output:

25
 WEB TECHNOLOGY AND DESIGN
MANUAL

8. Write a HTML program to develop a static Web Page for Shopping Cart.
<html>
<head>
<title>Cart</title>
</head>
<body>
<center>
<table border=0 width=50 height=10 cellpadding=10 cellspacing=10>
<tr>
<th>Book name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>JAVA 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
</table>
<h3>total amount-130.5</h3>
</center>
</body>

26
 WEB TECHNOLOGY AND DESIGN
MANUAL

</html>
Output:

27
 WEB TECHNOLOGY AND DESIGN
MANUAL

9. Write HTML for demonstration of cascading stylesheets.

d. Embedded stylesheets.
e. External stylesheets.
f. Inline styles.
Embedded stylesheets:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{backgroun
d-color: pink;}
h1
{color:orange;
text-align:
center;
}
p{
font-family: "Times
New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

28
 WEB TECHNOLOGY AND DESIGN
MANUAL

External Stylesheets:
[Link]:
body {background-color: #d0e4fe;}
h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
[Link]:
<html>
<head>
<title>External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”[Link]”>
</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>

29
 WEB TECHNOLOGY AND DESIGN
Output: MANUAL

Inline styles:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”>
WebSites</th>
</tr>
<tr>
<th style=”background-
color:blue”>MailSites</th>
<th style=”background-
color:green”>JobSites</th>

</tr> <tr>
30
 WEB TECHNOLOGY AND DESIGN
MANUAL

</tr> <td style=”background-color:grey”>Gmail</td>

<tr> <td style=”background-color:aqua”>Naukri</td>

<td style=”background-
color:yellow”>Yahoo</td>
</tr> <td style=”background-
</table> color:purple”>JobStreet</td>
</center>
</body>
</html>
Output:

31
 WEB TECHNOLOGY AND DESIGN
MANUAL

10. Write a javascript program to validate USER LOGIN page.

<html>
<head>
<title>Login Validation</title>
<script language="javascript">
function formValidator()
{
var username=[Link]('uname');
var password=[Link]('pwd');
if(isEmpty(username)&&isEmpty(password))
{
alert("enter something");
[Link]();
}
if(!isEmpty(username)&&isEmpty(password)&&isAlphabet(username))
{
alert("Please enter password");
32
 WEB TECHNOLOGY AND DESIGN
MANUAL
[Link]();
}
if(!isEmpty(username)&&!isEmpty(password)&&isAlphabet(username))
{
return true;
}
else
{
if(!isEmpty(username)&&!isEmpty(password)&&!isAlphabet(username))
{
alert("Please Enter only alphabets for username");
[Link]();
}
}
return false;
}
function isEmpty(elem)
{
if([Link]==0)
{
return true;
}
return false;
}
function isAlphabet(elem)
{
var alphaExp=/^[a-z A-Z]+$/;
if([Link](alphaExp))
{
return true;
}
}
33
 WEB TECHNOLOGY AND DESIGN
</script> MANUAL
</head>
<body bgColor=megastar>
<h1 align=center>USER LOGIN VALIDATION</h1>
<br><br>
<form name="form1" onSubmit="return formValidator()">
<center>
<table border=0 colsSpacing=4>
<tr>
<td>Username:</td>
<td><input type=text value="" name="uname"></td>

</tr>
<tr>
<td>Password:</td>
<td><input type=password value="" name="pwd"></td>
</tr>
<tr>
<td><input type=submit value="SUBMIT" name="btn1"></td>
<td><input type=reset value="CANCEL" name="btn2"></td>
</tr>
</table>
</center>
</form>
</body>
</html>
Output:

34
 WEB TECHNOLOGY AND DESIGN
MANUAL

11. Write a javascript program for validating REGISTRATION FORM.

<html>
<head>
<title>JavaScript sample registration from validation </title>
<script type='text/javascript'>
function formValidation()
{
var uid = [Link];
var passid = [Link];
var uname = [Link];
var uadd = [Link];
var uzip = [Link];
var uemail = [Link];
var umsex = [Link];
var ufsex = [Link];
if(userid_validation(uid,5,12))
{

35
 WEB TECHNOLOGY AND DESIGN
MANUAL
if(userid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}

36
 WEB TECHNOLOGY AND DESIGN
MANUAL
}
}
}
}
}
}
return false;
} function userid_validation(uid,mx,my)
{
var uid_len = [Link];
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("It should not be empty / length be between "+mx+" to "+my);
[Link]();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if([Link](letters))
{
return true;
}
else
{
alert('Please input alphabet characters only');
[Link]();
return false;

37
 WEB TECHNOLOGY AND DESIGN
} MANUAL
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if([Link](letters))
{
return true;
}
else
{
alert('Please input alphanumeric characters only');
[Link]();
return false;
}
}
function allnumeric(uzip)
{
var numbers = /^[0-9]+$/;
if([Link](numbers))
{
return true;
}
else
{
alert('Please input numeric characters only');
[Link]();
return true;
}
}

function ValidateEmail(uemail)

38
 WEB TECHNOLOGY AND DESIGN
{ MANUAL
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if([Link](mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
[Link]();
return false;
}
} function validsex(umsex,ufsex)
{
x=0;

if([Link])
{
x++;
} if([Link])
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
[Link]();
return false;
}
else
{
return true;
39
 WEB TECHNOLOGY AND DESIGN
MANUAL

}
}
</script>
</head>
<body>
<form name='form1' onsubmit='return formValidation()' >
<table width="500" cellpadding="3" style="border-collapse: collapse;">
<tr>
<td>User id </td>
<td><input type="text" name="userid" size="12" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="passid" size="12" /></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="username" size="50" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" size="50" /></td>
</tr>
<tr>
<td>ZIP Code </td>
<td><input type="text" name="zip" /></td>

</tr>
<tr>
<td>Email</td>

40
 WEB TECHNOLOGY AND DESIGN
MANUAL
<td><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="msex" value="Male" /> Male
<input type="radio" name="fsex" value="Female" /> Female</td>
</tr>
<tr>
<td>Language preference</td>
<td><input type="checkbox" name="en" value="en" checked />English
<input type="checkbox" name="nonen" value="noen" />Non English</td>
</tr>
<tr>
<td>Write about yourself<br>
(optional)</td>
<td><textarea name="desc" rows="4" cols="40"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit" /></td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

41
 WEB TECHNOLOGY AND DESIGN
MANUAL

Output:

42
 WEB TECHNOLOGY AND DESIGN
MANUAL

12. Write a program for implementing XML document for CUSTOMER DETAILS.
<?xml version="1.0"?>
<DOCUMENT>
<CUSTOMER>
<NAME>
<FIRST_NAME>Hari</FIRST_NAME>
<LAST_NAME>Krishna</LAST_NAME>
</NAME>
<DATE>10/09/2008</DATE>
<ORDERS>
<ITEM>
<PRODUCT>Mobile Set</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.14000/-</PRICE>
</ITEM>
<ITEM>
<PRODUCT>Mp3 Player</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.1300/-</PRICE>
</ITEM>
</ORDERS>
</CUSTOMER>
<CUSTOMER>
<NAME>
<FIRST_NAME>Anil</FIRST_NAME>
<LAST_NAME>Kumar</LAST_NAME>
</NAME>
<DATE>10/09/2008</DATE>
<ORDERS>
<ITEM>

43
 WEB TECHNOLOGY AND DESIGN
MANUAL

<PRODUCT>Monitor</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.14000/-</PRICE>
</ITEM>
<ITEM>
<PRODUCT>Washing Machine</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.17000/-</PRICE>
</ITEM>
</ORDERS>
</CUSTOMER>
</DOCUMENT>
Output:

44
 WEB TECHNOLOGY AND DESIGN
MANUAL
13. Write an internal Document Type Definition to validate XML for CUSTOMER
DETAILS?
<?xml version="1.0"?>
<!DOCTYPE DOCUMENT[
<!ELEMENT DOCUMENT (CUSTOMER)*>
<!ELEMENT CUSTOMER (NAME,DATE,ORDERS)>
<!ELEMENT NAME (FIRST_NAME,LAST_NAME)>
<!ELEMENT FIRST_NAME (#PCDATA)>
<!ELEMENT LAST_NAME (#PCDATA)>
<!ELEMENT DATE (#PCDATA)>
<!ELEMENT ORDERS (ITEM)*>
<!ELEMENT ITEM (PRODUCT,NUMBER,PRICE)>
<!ELEMENT PRODUCT (#PCDATA)>
<!ELEMENT NUMBER (#PCDATA)>
<!ELEMENT PRICE (#PCDATA)>
]>
<DOCUMENT>
<CUSTOMER>
<NAME>
<FIRST_NAME>aaa</FIRST_NAME>
<LAST_NAME>ZZZ</LAST_NAME>
</NAME>
<DATE>10/09/2008</DATE>
<ORDERS>
<ITEM>
<PRODUCT>Monitor</PRODUCT>
<NUMBER>1</NUMBER>
<PRICE>Rs.14000/-</PRICE>
</ITEM>
</ORDERS>

45
 WEB TECHNOLOGY AND DESIGN
</CUSTOMER> MANUAL
</DOCUMENT>
Output:

46
 WEB TECHNOLOGY AND DESIGN
MANUAL
14. Write an external Document Type Definition to validate XML for CUSTOMER
DETAILS?
[Link]:
<!ELEMENT document (customer)*>
<!ELEMENT customer (name,date,orders)>
<!ELEMENT name (firstname,lastname)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT orders (item)*>
<!ELEMENT item (product,number,price)>
<!ELEMENT product (#PCDATA)>
<!ELEMENT number (#PCDATA)>
<!ELEMENT price (#PCDATA)>
[Link]:
<?xml version="1.0"?>
<!DOCTYPE document SYSTEM "[Link]">
<document>
<customer>
<name>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</name>
<date>1 jan 2021</date>
<orders>
<item>
<product>chocolates</product>
<number>666</number>
<price>250</price>
</item>

<item>
47
 WEB TECHNOLOGY AND DESIGN
MANUAL
<number>777</number>

<product>sweets</product> <price>450</price>

</item>
</orders>
</customer>
</document>
Output:

48
 WEB TECHNOLOGY AND DESIGN
MANUAL

15. Write an XML for person information and access the data using XSL.
[Link]:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<people>
<person born="1982">
<name>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</name>
<profession>Project Lead</profession>
</person>
<person born="1980">
<name>
<firstname>ccc</firstname>
<lastname>ddd</lastname>
</name>
<profession>Project Manager</profession>
</person>
</people>
[Link]:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[Link]
<xsl:output method="html" omit-xml-declaration="no"/>
<xsl:template match="/">
<html>
<head>
<title>Presenting XML data</title>
</head>
<body>

49
 WEB TECHNOLOGY AND DESIGN
MANUAL
<table border="2">
<tr>
<th>Born</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Profession</th>
</tr>
<xsl:for-each select="people/person">
<tr>
<td><xsl:value-of select="@born"/></td>
<td><xsl:value-of select="name/firstname"/></td>
<td><xsl:value-of select="name/lastname"/></td>
<td><xsl:value-of select="profession"/></td>
</tr>

50
 WEB TECHNOLOGY AND DESIGN
MANUAL
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:

51
 WEB TECHNOLOGY AND DESIGN
MANUAL

16. Write an XML for student information and access second students data using
DOM.
[Link]:
<?xml version="1.0"?>
<school>
<class>
<class_title>XML</class_title>
<students>
<student>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</student>
<student>
<firstname>aaa</firstname>
<lastname>bbb</lastname>
</student>
</students>
</class>
</school>
[Link]:
<html>
<head>
<title>Accessing XML data</title>
<script type="text/javascript">
function getStudentData()
{
var xmldoc;
xmldoc=new ActiveXObject("[Link]");
[Link]("[Link]");
52
 WEB TECHNOLOGY AND DESIGN
MANUAL
nodeSchool=[Link];

nodeClass=[Link];
nodeStudents=[Link];
nodeStudent=[Link];
nodeFirstname=[Link];
nodeLastname=[Link];
[Link]="Name:"+[Link]+"
"+[Link];
}
</script>
</head>
<body bgcolor="pink">
<center>
<h1>Accessing XML Data</h1>
<div id="message"></div>
<input type="button" value="GET DATA" onClick="getStudentData()">
</center>
</body>
</html>
Output:

53
WEB TECHNOLOGY AND DESIGN
MANUAL

54
 WEB TECHNOLOGY AND DESIGN
MANUAL

17. Write a program to display contents of XML file in a table using Extensible Style
Sheets ?
[Link]:
<?xml version="1.0"?>
<?xml:stylesheet type="text/xsl" href="[Link]"?>
<book>
<bookinfo>
<title>C</title>
<authorname>Balaguru Swamy</authorname>
<isdnno>1234</isdnno>
<publisher>pearson</publisher>
<edition>4th</edition>
<price>$50</price>
</bookinfo>
<bookinfo>
<title>c++</title>
<authorname>Balaguru Swamy</authorname>
<isdnno>5678</isdnno>
<publisher>technical</publisher>
<edition>3rd</edition>
<price>$100</price>
</bookinfo>
</book>
[Link]:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[Link]
<xsl:output method="html" omit-xml-declaration="no"/>
<xsl:template match="/">
<html>
<head>

55
 WEB TECHNOLOGY AND DESIGN
MANUAL

<title>Book</title>
</head>
<body>
<center>
<table border="1" bgcolor=”grey”>
<thead >
<tr>
<th>title</th>
<th>authorname</th>
<th>isdnno</th>
<th>publisher</th>
<th>edition</th>
<th>price</th>
</tr>
</thead>
<xsl:for-each select="book/bookinfo">
<tr>
<td style="background-color:pink"><xsl:value-of select="title"/></td>
<td style="background-color:red"><xsl:value-of select="authorname"/></td>
<td style="background-color:green"><xsl:value-of select="isdnno"/></td>
<td style="background-color:purple"><xsl:value-of select="publisher"/></td>
<td style="background-color:brown"><xsl:value-of select="edition"/></td>
<td style="background-color:yellow"><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</center>
</body>
</html>
</xsl:template>

56
 WEB TECHNOLOGY AND DESIGN
MANUAL

</xsl:stylesheet>
Output:

57
 WEB TECHNOLOGY AND DESIGN
MANUAL

18. Write a simple servlet that displays a message.

[Link]:
import [Link].*;
import [Link].*;
public class FirstServlet extends GenericServlet{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException{
[Link]("text/html");
PrintWriter pw=[Link]();
[Link]("<html><head><title>First Servlet</title></head>");
[Link]("<body><center><h1>This Message came from a
servlet</h1>");
[Link]("</center></body></html>");
[Link]();
}
}
[Link]:
<web-app>
<servlet>
<servlet-name>abc</servlet-name>
<servlet-class>FirstServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>abc</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
Output:

58
WEB TECHNOLOGY AND DESIGN
MANUAL

59
 WEB TECHNOLOGY AND DESIGN
19. MANUAL
Write a servlet that reads parameters from employee login page.
[Link]:
<html>
<head>
<title>Servlet Parameters</title>
</head>
<body>
<center>
<form name="form1" method="POST"
action="[Link]
<table>
<tr>
<td><b>Employee</td>
<td><input type="text" name="ename"
value=""></td>
</tr>
<tr>
<td><b>Id</td>
<td><input type="text" name="id" value=""></td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
<td><input type="reset" value="clear"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
[Link]:

60
 WEB TECHNOLOGY AND DESIGN
MANUAL

import [Link].*;
import [Link].*;
import [Link].*;
public class Rparam extends GenericServlet{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException{
[Link]("text/html");
PrintWriter pw=[Link]();
Enumeration e=[Link]();
while([Link]()){
String pname=(String)[Link]();
[Link]("<b>"+pname+"=");
String pvalue=[Link](pname);
[Link]("<b>"+pvalue);
}
[Link]();
}
}
[Link]:
<web-app>
<servlet>
<servlet-name>rp</servlet-name>
<servlet-class>Rparam</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>rp</servlet-name>
<url-pattern>/rparam</url-pattern>
</servlet-mapping>
</web-app>

61
 WEB TECHNOLOGY AND DESIGN
MANUAL

Output:

62
 WEB TECHNOLOGY AND DESIGN
MANUAL

20. Write a servlet for creating a cookie and retrieving it.

[Link]:
<html>
<head>
<title> Cookies demo </title>
</head>
<body>
<center>
<form name="form1" method="POST" action="[Link]
<b>Enter a value for my cookie:
<input type="text" name="data" size=25 value="">
<br><input type="submit" value="submit">
</form>
</center>
</body>
</html>
[Link]:
import [Link].*;
import [Link].*;
import [Link].*;
public class AddCookieServlet extends HttpServlet
{
public void doPost (HttpServletRequest req, HttpServletResponse res)throws
ServletException,IOException
{
String data=[Link]("data");
Cookie cookie=new Cookie("MyCookie",data);
[Link](cookie);
PrintWriter pw=[Link]();
[Link]("<br>MyCookie has been sent to:");
63
 WEB TECHNOLOGY AND DESIGN
MANUAL

[Link](data);
[Link]();
}
}
[Link]:
import [Link].*;
import [Link].*;
import [Link].*;
public class GetCookieServlet extends HttpServlet
{
public void doGet (HttpServletRequest req, HttpServletResponse res)throws
ServletException, IOException
{
Cookie[] cookies=[Link]();
[Link]("text/html");
PrintWriter pw=[Link]();
[Link]("<b>");
for(int i=0;i<[Link];i++)
{
String name=cookies[i].getName();
String value=cookies[i].getValue();
[Link]("name="+name+";value="+value);
}
[Link]();
}
}
[Link]:
<web-app>
<servlet>
<servlet-name>ackk</servlet-name>

64
 WEB TECHNOLOGY AND DESIGN
MANUAL
<servlet-class>AddCookieServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ackk</servlet-name>
<url-pattern>/acook</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>gck</servlet-name>
<servlet-class>GetCookieServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>gck</servlet-name>
<url-pattern>/gcook</url-pattern>
</servlet-mapping>
</web-app>
Output:
Web page that accepts value for my cookie.

Servlet response that creates a cookie and adds it to the response:

65
 WEB TECHNOLOGY AND DESIGN
MANUAL

Servlet that reads the cookie from request.

66
 WEB TECHNOLOGY AND DESIGN
MANUAL
21. Write a servlet for session tracking.
[Link]:
import [Link].*;
import [Link].*;
import [Link].*;
import [Link].*;
public class DateServlet extends HttpServlet{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException{
[Link]("text/html");
HttpSession hs=[Link](true);
PrintWriter pw=[Link]();
[Link]("<b>");
Date d=(Date)[Link]("date");
if(d!=null){
[Link]("Last accessed date:"+d+"<br>");
}
d= new Date();
[Link]("date",d);
[Link]("current date:"+d);
[Link]();
}
}
[Link]:
<web-app>
<servlet>
<servlet-name>sess</servlet-name>
<servlet-class>DateServlet</servlet-class>
</servlet>
<servlet-mapping>
servlet-name>sess</servlet-name>
67
 WEB TECHNOLOGY AND DESIGN
MANUAL
<url-pattern>/ddd</url-pattern>
</servlet-mapping>
</web-app>
Output:

68
 WEB TECHNOLOGY AND DESIGN
MANUAL
22. Write a JSP that reads parameters from user login page.
[Link]:
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 align=center>Login</h1>
<form name="form1" action="[Link]" method="post">
<table>
<tr>
<td><b>UserName:</td>
<td><input type=txt name=t1></td>
</tr>
<tr>
<td><b>Password:</td>
<td><input type=password name=t2></td>
</tr>
<tr>
<td><input type=submit value=submit></td>
<td><input type=reset value=cancel></td>
</tr>
</table>
</form>
</body>
</html>
[Link]:

69
 WEB TECHNOLOGY AND DESIGN
MANUAL
<%@ page import="[Link].*"%>
<%@ page import="[Link].*"%>
<%@ page import="[Link].*"%>

<%@ page import="[Link].*"%>

<html>
<head>
<title>Login</title>
</head>
<body>
<%[Link]("User Name is:"+[Link]("t1"));
[Link]("Password is:"+[Link]("t2"));
%>
</body>
</html>
Output:
Login page to enter data:

70
 WEB TECHNOLOGY AND DESIGN
MANUAL

JSP after submitting the data:

71
 WEB TECHNOLOGY AND DESIGN
MANUAL
23. Write a JSP that reads a value, creates a cookie and retrieves it.
[Link]:
<html>
<body>
<form name="form1" action="[Link]">
<b>Enter Value for cookie:
<input type="text" name="data" value="">
<br>
<input type="submit" value="Enter">
</body>
</html>
[Link]:
<%@page contentType="text/html" language="java"%>
<%
String data=[Link]("data");
Cookie cookie=new Cookie("Mycookie",data);
[Link](60*60);
[Link](cookie);
[Link]("<b> Cookie value:"+data);
%>
<html>
<body>
<a href="[Link]">Click here</a> to see the cookie's data
</body>
</html>
[Link]:
<%@page session="false"%>
<html>
<body>
<%
Cookie[] cookies = null;

72
 WEB TECHNOLOGY AND DESIGN
MANUAL
cookies = [Link]();
if( cookies != null ){
for (int i = 0; i < [Link]; i++){
[Link]("Name : " + cookies[i].getName() + ", ");
[Link]("Value: " + cookies[i].getValue()+" <br>");
}
}else{
[Link]("<h2>No cookies founds</h2>");
}
%>
</body>
</html>
Output:
Web page that accepts cookie value:

JSP that reads and creates a cookie:

73
 WEB TECHNOLOGY AND DESIGN
MANUAL

JSP that reads a cookie from the request:

74
 WEB TECHNOLOGY AND DESIGN
MANUAL

24. Write a JSP for session tracking.

<%@ page import="[Link].*,[Link].*" %>
<%
Date createTime = new Date([Link]());
Date lastAccessTime = new Date([Link]());
%>
<html>
<head>
<title>Session Tracking</title>
</head>
<body>
<center>
<h1>Session Tracking Example</h1>
</center>
<table border="1" align="center">
<tr bgcolor="#ffcccc">
<th>Session info</th>
<th>Value</th>
</tr>
<tr >
<td>id</td>
<td><% [Link]( [Link]()); %></td>
</tr>
<tr>
<td>Creation Time</td>
<td><% [Link](createTime); %></td>
</tr>
<tr>
<td>Time of Last Access</td>
<td><% [Link](lastAccessTime); %></td>

75
 WEB TECHNOLOGY AND DESIGN
MANUAL

</tr>
</table>
</body>
</html>
Output:

76
 WEB TECHNOLOGY AND DESIGN
MANUAL
25. Write a servlet that connects to the database and retrieves the data and displays
it.
[Link]:
<html>
<body>
<form action="show" method="post">
<font face="verdana" size="2">
Enter Table Name :<input type="text" name="table">
<input type="submit" value="Display">
</font>
</form>
</body>
</html>
[Link]:
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

import [Link];
import [Link];
import [Link];
import [Link];

public class ServletDatabaseConnect extends HttpServlet

{
protected void doPost(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException

77
 WEB TECHNOLOGY AND DESIGN
MANUAL
{
PrintWriter pw=[Link]();
[Link]("text/html");
String tb=[Link]("table");

try
{
[Link]("[Link]");
Connection
con=[Link]("jdbc:oracle:thin:@localhost:1521:XE","nvn","nvn")
;
Statement st=[Link]();
[Link]("connection established successfully...!!");

ResultSet rs=[Link]("select * from "+tb);

[Link]("<table border=1>");
[Link]("<tr><th>Username</th><th>Password</th></tr>");
while([Link]())
{

[Link]("<tr><td>"+[Link](1)+"</td><td>"+[Link](2)+"</td></tr>");
}
[Link]("</table>");
[Link]();
}
catch (Exception e){
[Link]();
}

}
78
 WEB TECHNOLOGY AND DESIGN
} MANUAL
[Link]:
<web-app>
<servlet>
<servlet-name>ServletDBConnect</servlet-name>
<servlet-class>ServletDatabaseConnect</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDBConnect</servlet-name>
<url-pattern>/show</url-pattern>
</servlet-mapping>
</web-app>

79