DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CCS375 WEB TECHNOLOGIES LABORATORY

(REGULATION 2021)

NAME :
REGISTER NO. :
YEAR/ SEMESTER : III Year / V Sem
ACADEMIC YEAR : 2023-2024
 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

LABORATORY RECORD

BONAFIDE CERTIFICATE

This is to certify that bonafide record of practical work done by

Mr. /Ms____________________________Register Number________________of the
Year 2023-2024 B.E. Department of Computer Science and Engineering in the
CCS375 – Web Technologies Laboratory for the Fifth Semester University
Examination held on .

Signature of Head of the Department Signature of the Lab Course Incharge

Signature of Examiners:

Internal Examiner External Examine_____________________

 DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

INSTITUTE VISION & MISSION

Vision of JNNIE: Lead the transformation of engineering and management learning

experience to educate the next generation of innovators and entrepreneurs who want to make
the world a better place.
Mission of JNNIE:
7. To develop the required resources and infrastructure and to establish a conducive ambience
for the teaching-learning process.
8. To nurture professional and ethical values in the students and to instils in them a spirit of
innovation and entrepreneurship.
9. To encourage a desire for higher learning and research in the students and to equip them
to face global challenges.
10. To provide opportunities for students to learn job-relevant skills to make them
industry ready.
11. To interact with industries and other organizations to facilitate transfer of knowledge
and know-how.

DEPARTMENT VISION & MISSION

Department Vision: To produce globally competent, quality computer professionals and to

inculcate the spirit of moral values for the cause of development of our nation

Department of Mission:
M1. Establish closer and symbolic relationship with IT industries and expose the students to
the cutting edge technological advancements.
M2. Provide impetus and importance to beyond curriculum learning and thereby provide an
opportunity for the student community to keep them updated with latest and socially relevant
technology.
M3. To impart interpersonal skills and ethical responsibilities to the students
 PROGRAM EDUCATIONAL OBJECTIVES (PEOs):
PEO Statements M1 M2 M3
Our graduates to pursue higher education and research, or have a successful 2 3 3
career in industries associated with Computer Science and Engineering, or as
entrepreneurs.
Our graduates will have the ability and attitude to adapt to emerging 3 3 2
technological changes.
Our graduates shall adapt to the changing career opportunities, assimilate new 2 3 3
technologies and work in multi-disciplinary areas with strong focus on
innovation and entrepreneurship.
3- High; 2-Medium; 1-Low
POs PROGRAM OUTCOMES
PO1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals and an engineering specialization to the solution of complex engineering problems.
PO2 Problem analysis: Identify, formulate, review 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
the public health and safety, and the 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 modeling 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 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: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.
 PROGRAM SPECIFIC OUTCOMES:

PSO1 To apply software engineering principles and practices for developing quality software for
scientific and business applications.
PSO2 To adapt to emerging Information and Communication Technologies (ICT) to innovate ideas
and solutions to existing/novel problems.
 OBJECTIVES

1. To understand different Internet Technologies

2. To learn java-specific web services architecture
3. To Develop web applications using frameworks

LIST OF EXPERIMENTS

1. Create a web page with the following using HTML.

1. To embed an image map in a web page.
2. To fix the hot spots.
3. Show all the related information when the hot spots are clicked
2. Create a web page with all types of Cascading style sheets.
3. Client Side Scripts for Validating Web Form Controls using DHTML.
4. Installation of Apache Tomcat web server.
5. Write programs in Java using Servlets:
1. To invoke servlets from HTML forms
2. Session tracking using hidden form fields and Session tracking for a hit count
6. Write programs in Java to create three-tier applications using JSP and Databases
a For conducting on-line examination.
b For displaying student mark list. Assume that student information is available in a
database which has been stored in a database server.
7. Programs using XML – Schema – XSLT/XSL.

TOTAL: 30 PERIODS

LIST OF EQUIPMENT FOR A BATCH OF 30 STUDENTS SOFTWARE

Notepad or Dream Weaver, MySQL or Equivalent, Apache Server, WAMP/XAMPP
 INDEX

EX.NO. DATE EXPERIMENT NAME MARKS SIGN.

1 Creation of webpage with Image Map to fix the Hotspot

Creation of web page with all types of Cascading style

2
sheets.
Client Side Scripts for Validating Web Form Controls
3
using DHTML.

4 Installation of Apache Tomcat web server.

5a To invoke servlets from HTML forms.

Session tracking using hidden form fields and Session

5b tracking for a hit count

Creation of Three-Tier Applications Using JSP and

6a
Databases - for Conducting On-Line Examination
Creation of Three-Tier Applications Using JSP and
6b
Databases - for Displaying Student Mark List

7 Programs using XML – Schema – XSLT/XSL.

 INTRODUCTION TO SOFTWARE TO BE USED

Dream Weaver

On the surface, Dreamweaver is an IDE (Integrated Development Environment).

That means it’s a piece of software that combines different tools to make web design and
development easier.
What makes it special is that it is somewhere between a CMS (where you control everything about
your website through a visual interface) and a pure code editor.

MySQL
MySQL is an open source relational database management system. It runs as a server and allows
multiple users to manage and create numerous databases. It is a central component in the LAMP
stack of open source web application software that is used to create websites.

Apache Server
Apache is an open-source and free web server software that powers around 40% of websites
around the world. The official name is Apache HTTP Server, and it’s maintained and developed
by the Apache Software Foundation.

It allows website owners to serve content on the web — hence the name “web server.” When
someone wants to visit a website, they enter a domain name into the address bar of their browser.
Then, the web server delivers the requested files by acting as a virtual delivery man.

File servers, database servers, mail servers, and web servers use different kinds of server software.
Each of these applications can access files stored on a physical server and use them for various
purposes.

The job of a web server is to serve websites on the internet. To achieve that goal, it acts as a
middleman between the server and client machines. It pulls content from the server on each user
request and delivers it to the web.
WAMP
WAMP - Stands for "Windows, Apache, MySQL, and PHP." WAMP is a variation of LAMP for
Windows systems and is often installed as a software bundle (Apache, MySQL, and PHP). It is
often used for web development and internal testing, but may also be used to serve live websites.

XAMPP
XAMPP is an abbreviation for cross-platform, Apache, MySQL, PHP and Perl, and it allows you
to build Word Press site offline, on a local web server on your computer. This simple and
lightweight solution works on Windows, Linux, and Mac – hence the “cross-platform” part.
Ex No: 1 CREATION OF WEBPAGE WITH IMAGE MAP TO FIX
Date : HOTSPOTS

AIM
To create a web page with image map to fix the hotspots and show its related information.

SOFTWARE USED

Dreamweaver or Notepad and browser.

DESCRIPTION
In Web page development, an image map is a graphic image defined so that a user can click
on different areas of the image and be linked to different destinations. we make an image map by
defining each of the sensitive areas in terms of their x and y coordinates (that is, a certain horizontal
distance and a certain vertical distance from the left-hand corner of the image).
With each set of coordinates, you specify a Uniform Resource Locator or Web address
that will be linked to when the user clicks on that area.

There are three HTML elements used to create image maps:

<img> specifies the location of the image to be included in the map.

<map> is used to create the map of clickable areas.
<area> is used within the map element to define the clickable areas.

Code:
main.html

<html>
<head>
<title>India Map</title>
<h1><center>India Map</center></h1>
</head>
<body bgcolor="cyan">
<img src ="indiamap.jpg" alt="indiamap" width="700" height="834" usemap="#indiamap">
<map name=indiamap>
<area shape="circle" coords="251,659,25" href="tamilnadu.html" alt="Tamilnadu">
<area shape="rect" coords="151,563,228,659" href="karnataka.html" alt="Karnataka">
</map>
</body>
</html>

4
 tamilnadu.html
<html>
<head>
<title>Tanil Nadu-India</title>
</head>
<body bgcolor="silver">
<h1> <center> <b> Tamil Nadu </b> </center> </h1> <hr/>
<img src="tamilnadu image.jpg" align="right" width="480" height="600">
<h3> <font face="Times new roman" size="4" color="purple"> <p> <i> <pre>
Tamil Nadu, a major state in southern India, is bordered with Puducherry,
Kerala, Karnataka and Andhra Pradesh. Tamilnadu has the third largest urbanized
population in the country after maharashtra and Uttar Pradesh. The key industries
of the state are heavy engineering and manufacturing-based companies and textiles.<br>
Tamil Nadu covers total land area of 130,060 km2 and is divided into 32
districts which are: Ariyalur, Cuddalore, Dharmapuri, Dindigul, Erode, Kancheepuram,
Kanyakumari, Karur, Krishnagiri, Nagapattinam, Namakkal, Perambalur, Pudukottai,
Ramanathapuram, Salem, Sivaganga,Thanjavur, The Nilgiris, Theni, Thiruvallur,
Thiruvannamalai, Thiruvarur, Thirunelveli,Tiruppur, Trichirappalli, Uticorin,
Vellore, Villupuram and Virudhunagar.
</pre> </i> </p> </h3>
<h2> <b> <font color="Black"> Tourist Attractions in Tamil Nadu </font> </b> </h2>
<ul type="square">
<li> Brihadeeshwara Temple </li>
<li> Ramanathaswamy Temple </li>
<li> Marina Beach </li>
<li> Kapaleesawarar Temple </li>
<li> Meenakshi Amman Temple </li>
<li> Nataraja Temple </li>
<li> Kodaikanal Lake </li>
<li> Group of Monuments </li>
<li> Yercaud </li>
</ul>
<a href="main.html">Back</a>
</body>
</html>

5
karnataka.html
<html>
<head>
<title> Karnataka-India </title>
</head>
<body>
<h1> <center> <b> Karnataka </b> </center> </h1> <hr/>
<img src="karnataka.jpg" align="right" width="450" height="550">
<font face="arial" size="4" color="black"> <p> <i> <b> <pre>
A map of Karnataka shows that there are 30 districts in the state, which are grouped under
four divisions, and they are as follows: Bangalore Division, Belgaum Division, Gulbarga Division,
and Mysore Division. As per the the data of 2011 census, the state had a literacy rate of 75.36%,
in which 82.47% are males and 68.08% are females.<br>
Karnataka has 14 national highways and 115 state highways with total length of 28,311 km.
One of its state highways, KA SH 1, it runs north through Udupi, Shimoga, Haveri, Dharwad and
Belgaum districts in the Karnataka. This state highway touches several cities and villages like
Karkala, Agumbe, Thirthahalli and Dharwad.Its total length is 450 km. </pre> </b> </i>
<h3> <b> Places to Visit in Karnatakau </b> </h3>
<ol type="1">
<li> Bengaluru </li>
<li> Mysore </li>
<li> Mangalore </li>
<li> Hampi </li>
<li> Coorg </li>
<li> Bijapur </li>
<li> Hubli-Dharwad </li>
<li> Badami </li>
<li> Goolbarga </li>
<li> Gokarna </li>
<li> Jog falls </li>
<li> Bandipur National Park </li>
<br>
<a href="main.html"> Back </a>
</body>
</html>

6
Output:

7
RESULT:
Thus the Web Page had been created using image map to fix the hotspots and relevant
information had been displayed.

8
 Ex No: 2 CREATION OF A WEB PAGE WITH ALL TYPES OF
Date : CASCADING STYLE SHEETS

AIM
To create a webpage with all types of Cascading Style Sheets.

SOFTARE USED
Dreamweaver or Notepad and browser.

DESCRIPTION
Cascading Style Sheet (CSS) is used to set the style in web pages which contain HTML elements.
It sets the background color, font-size, font-family, color etc property of elements in a web pages.
There are three types of CSS which are given below:
Inline CSS
Internal or Embedded CSS
External CSS

ALGORITHM
Internal CSS:
STEP 1: Create a HTML program with <style> tag.
STEP 2: Inside the <style> tag, specify the format required for that web page.
STEP 3: Run the program with a web browser.
External CSS:
STEP 4: Open a notepad, type the needed CSS in it and save it with .css extension.
STEP5: Refer this .css file in the HTML using the tag <link>.
STEP 6: Run the program with a web browser.

CODE
Inline Stylesheet

<!DOCTYPE html>
<html>
<head>
<title> HTML Tables </title>
</head>
<body bgcolor="pink" >
<center>
<h2><u>Creating HTML Tables Using Inline CSS</u></h2><br>
<table border="2" cellpadding="4" cellspacing="4">
<tr>
<th colspan="2" style="background-color:red; olor:blue;font-size:30px;text-align:center;"> Job
WebSites </th>
</tr>
<tr>
<th style="background-color:blue; color:white; font-size:25px; text align:center;">Naukri.com</th>
<th style="background-color:green;color:violet;font-size:25px;text-align:center;">LinkedIn</th>

9
</tr>
<tr>
<td style="background-color:black;color:red;font-size:25px;text-align:center;">Indeed</td>
<td style="background-color:aqua;color:blue;font-size:25px;text-align:center;">Monster</td>
</tr>
<tr>
<td style="background-color:yellow;color:green;font-size:25px;text-align:center;">Glassdoor</td>
<td style="background-color:orange;color:brown;font-size:25px;text-align:center;">National Career
Service</td>
</tr>
<tr>
<th style="background-color:white;color:blue;font-size:25px;text-align:center;">Times jobs</th>
<th style="background-color:violet;color:black;font-size:25px;text-align:center;">Freshersworld</th>
</tr>
<tr>
<td style="background-color:pink;color:violet;font-size:25px;text-align:center;">Jobgrin</td>
<td style="background-color:blue;color:aqua;font-size:25px;text-align:center;">Shine</td>
</tr>
<tr>
<td style="background-color:brown;color:#000088;font-size:25px;text-
align:center;">wisdomjobs</td>
<td style="background-color:cyan;color:#990000;font-size:25px;text-align:center;">CareerJet</td>
</tr>
</table>
</center>
</body>
</html>

Internal Or Embedded Stylesheet

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main
{
text-align:right;
background-image: url("bgimage1.jpg");
background-repeat: no-repeat;
}
.font
{
font-family:times New Roman;
color:#770000;
font-size:18px;
font-weight:bold;

10
 }
.facility
{
font-family:arial;
font-style:bold;
font-size:16px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="font">
<pre>
J.N.N Insitute of Engineering <br>
Department of Computer Science
<br>
<hr>
Department of Computer Science and Engineering has been established in the
year 2008 with the aim of emerging as realm of per-eminence that empowers the
students to reach the zenith, as assertive IT professionals by offering quality
technical education and research environment to best serve the nation.</pre>
</div>

<div class ="facility">

<pre>
The college is having all the world class facilities for the betterment of the students.
The college give human values with the best quality of higher education.
The college organizes many workshops, events for the students which make them confident.
</pre>
</div>
</div>
</body>
</html>

External Stylesheet
xyz.css
h3
{
font-family:arial;
font-size:20;
color:cyan
}
table
{
border-color:green
}
td
{font-size:20pt;
color:magenta

11
}

Style.html
<html>
<head><h4><center>CASCADING STYLE SHEETS</center></h4>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS
</title>
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css">
.vid{font-family:verdana;
font-style:italic;
color:red;
text-align:center
}
.ani
{
font-family:tahoma;
font-style:italic;font-size:20;
text-align:center;
}
font
{
font-family:georgia;
color:blue;
font-size:18
}
ul
{
list-style-type:circle
}
</style>
</head>
<body>
<ol TYPE="l">
<b><center><h3>JNN GROUP OF INSTITUTE</h3></center></b><br><br><br>
<li>JNN INSTITUTE OF ENGINEERING COLLEGE
<li>JNN INSTITUTE OF ARTS AND SCIENCE COLLEGE
<li>JNN INSTITUTE OF CBSE SCHOOL
<li>JNN INSTITUTE OF TEACHER TRAINING
</ol>
<p style="font-size:20pt;color:purple"><CENTER>JNN GROUP OF INSTITUTE</CENTER></p>
<p class="ani">JNN Group of colleges is owned by
JAYACHANDRAN.<br>It is approved by AICTE(All
India Council for Technical Education).It is
affliated to Anna University.<br></p>
<h2 class="vid">JNN INSTITUTE OF ENGINEERING COLLEGE</h2>
<font><Center>It is an ISO certified Institution</center></font><br>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>Artificial Intelligence and data Science</li>

12
<li>Electronics and Communication Engineering</li>
<li>Robotics and Automation</li>
<li>Computer Science and Engineering</li>
<li>Cyber Security</li>
<li>Agricultural Engineering</li>
</ul>
</font>
<h3>Computer Science and Engineering Toppers</h3>
<table width="100%" cellspacing="2"
cellpadding="2" border="5">
<tr>
<th>NAME</th>
<th>PERCENTAGE</th>
<th>RESULTS</th>
</tr>
<tr>
<td align="center">R.Bharath</td>
<td align="center">96</td>
<td align="center">Distinction</td>
</tr>
<tr>
<td align="center">Abdul Rabbu</td>
<td align="center">98</td>
<td align="center">Distinction</td>
</tr>
<tr>
<td align="center">Surendar</td>
<td align="center">75</td>
<td align="center">First class</td>
</tr>
</table>
</body>
</html>

13
Output:

Inline Stylesheet

Internal or Embedded Stylesheet

14
External Stylesheet

RESULT
Thus a web page has been created with all types of CSS.

15
Ex No: 3 CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM
Date : CONTROLS USING DHTML

AIM
To write the DHTML codes using JAVA Script and CSS to create Client Side Scripts for
Validating Web Form Controls.

SOFTWARE USED
Dreamweaver or Notepad and browser.
DESCRIPTION
DHTML stands for Dynamic HTML, it is totally different from HTML. The browsers
Which support the dynamic HTML are some of the versions of Netscape Navigator and Internet
Explorer of version higher than 4.0. The DHTML is based on the properties of the HTML, javascript,
CSS, and DOM (Document Object Model which is used to access individual elements of a document)
which helps in making dynamic content. It is the combination of HTML, CSS, JS, and DOM. The
DHTML make use of Dynamic object model to make changes in settings and also in properties and
methods. It also makes uses of Scripting and it is also part of earlier computing trends.

ALGORITHM
Step 1 : Open the notepad.
Step 2 : Create the HTML header and give the title as “WebForm”.
Step 3 : Specify the style type as “text/css”.
Step 4 : Define the properties for the Layout and Layer.
Step 5 : Specify the script type as “text/javascript”.
Step 6 : Create a function as “validate()”.
Step 7 : Specify the conditions for the form to be created using javascript.
Step 8 : Open the body of the HTML.
Step 9 : Create the division as “Layer”.
Step 10: Create a form and name it. Create a table for better alignment of the contents of the form.
Step11: Specify the requirements of the form like Name, Qualification, Date Of Birth, etc.
Step 12: Define the input type, name and id of all the required parameters.
Step 13: Create a “Submit” button and make a link to the function using onclick=“validate()”.
Step 14: Save and run the HTML file to get the output

16
PROGRAM:
Registration.html

<html>
<head>
<title>Job Registration</title>
<style type="text/css">
#Layer1 {
position:absolute;
width:1047px;
height:792px;
z-index:1;
left: 103px;
top: 80px;
}
.style1 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
.style2 {
color: #000099;
font-weight: bold;
background-color:#00CCFF;
}
#Layer2 {
position:absolute;
width:1040px;
height:49px;
z-index:2;
left: 59px;
top: 9px;
}
.style3 {
color: #006666;
font-weight: bold;
background-color:#E0D2F0;
}

body{
background-color:#DADADA;
}
</style>
<script type="text/javascript">

17
function validation()
{
if(document.validate.name.value=="")
{
alert("enter the full name")
document.validate.name.focus();
return false
}
if(!isNaN(document.validate.name.value))
{
alert("enter the valid name");
document.validate.name.focus();
document.validate.name.value="";
return false
}
if(document.validate.day.value=="0")
{
alert("enter the day")
document.validate.day.focus();
return false
}
if(document.validate.month.value=="0")
{
alert("enter the month")
document.validate.month.focus();
return false
}
if(document.validate.year.value=="0")
{
alert("enter the year")
document.validate.year.focus();
return false
}
if(document.validate.gender.value=="0")
{
alert("enter the gender")
document.validate.gender.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();

return false
}
if(document.validate.city.value=="")

18
{
alert("enter the city")
document.validate.city.focus();
return false
}
if(!isNaN(document.validate.city.value))
{
alert("enter the valid City")
document.validate.city.focus();
document.validate.city.value="";
return false
}
if(document.validate.state.value=="")
{
alert("enter the state")
document.validate.state.focus();
return false
}
if(!isNaN(document.validate.state.value))
{
alert("enter the valid state")
document.validate.state.focus();
document.validate.state.value="";
return false
}
if(document.validate.pincode.value=="")
{
alert("enter the pincode ")
document.validate.pincode.focus();
return false
}
if( isNaN(document.validate.pincode.value))
{
alert("enter a valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.pincode.value.length!=6)
{
alert("please enter the valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();

19
return false
}
if(document.validate.email.value=="")
{
alert("enter the email id")
document.validate.email.focus();
return false
}
if(!(document.validate.email.value==""))
{
var x=document.validate.email.value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
document.validate.email.focus();
return false;
}
}
if(document.validate.mobile.value=="")
{
alert("enter the mobile no")
document.validate.mobile.focus();
return false
}
if( isNaN(document.validate.mobile.value))
{
alert("enter a valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.value="";
return false
}
if(document.validate.mobile.value.length !=10)
{
alert("enter the valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.select();
return false
}
if(document.validate.qualification.value=="0")
{
alert("enter the qualification")
document.validate.qualification.focus();
return false
}
if(document.validate.experience.value=="0")

20
{
alert("enter the experience")
document.validate.experience.focus();
return false
}
if(document.validate.project.value=="")
{
alert("enter the project description")
document.validate.project.focus();
return false
}
if(document.validate.salary.value=="")
{
alert("enter the salary ")
document.validate.salary.focus();
return false
}
if( isNaN(document.validate.salary.value))
{
alert("enter a valid salary")
document.validate.salary.focus();
document.validate.salary.value="";
return false
}
}
</script>
</head>

<body>
<div id="Layer1">
<form id="validate" name="validate" method="post" action="">
<p>&nbsp;</p>
<table width="886" border="0" cellspacing="2" cellpadding="2">

<tr>
<td colspan="2"><div align="center" class="style1">Personal Details </div></td>
<td width="30" rowspan="10">&nbsp;</td>
<td colspan="2"> <div align="center" class="style2">Education and Experience
</div></td>
</tr>
<tr>
<td width="111">Full Name</td>
<td width="255"><label>
<input name="name" type="text" id="name" />
</label></td>
<td width="152">Qualification</td>
<td width="217"><select name="qualification">

21
<option value="0">Select</option>
<option value="1">UG</option>
<option value="2">PG</option>
<option value="3">PHD</option>
</select></td>
</tr>
<tr>
<td>Date of Birth </td>
<td><select name="day">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>

<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>

<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>

<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>

22
<select name="month">
<option value="0">Month</option>
<option value="1">Janauray</option>
<option value="2">Feburary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">Sepetember</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select name="year">
<option value="0">Year</option>
<option value="1">2009</option>
<option value="2">2008</option>
<option value="3">2007</option>
<option value="4">2006</option>
<option value="5">2005</option>
<option value="6">2004</option>
<option value="7">2003</option>
<option value="8">2002</option>
<option value="9">2001</option>
<option value="10">2000</option>
<option value="11">1999</option>
<option value="12">1998</option>
<option value="13">1997</option>
<option value="14">1996</option>
<option value="15">1997</option>
<option value="16">1996</option>
<option value="17">1995</option>
<option value="18">1994</option>
<option value="19">1993</option>
<option value="20">1992</option>
<option value="21">1991</option>
<option value="22">1990</option>
<option value="23">1989</option>
<option value="24">1988</option>
<option value="25">1987</option>
<option value="26">1986</option>
<option value="27">1985</option>
<option value="28">1984</option>

23
 <option value="29">1983</option>
<option value="30">1982</option>
<option value="31">1981</option>
<option value="32">1980</option>
</select></td>
<td>Work Experience </td>
<td><select name="experience">
<option value="0">Select</option>
<option value="1">Fresher</option>
<option value="2">1 yr</option>
<option value="3">2 yrs</option>
<option value="4">3 yrs</option>
<option value="5">4 yrs</option>
<option value="6">5 yrs</option>
<option value="7">>5 yrs</option>
</select></td>
</tr>
<tr>
<td height="70">Sex</td>
<td><select name="gender" id="gender" >
<option value="0">Select Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select></td>
<td>Project Description </td>
<td><label>
<textarea name="project" id="project"></textarea>
</label></td>
</tr>
<tr>
<td>Address</td>
<td><label>
<textarea name="address" id="address"></textarea>
</label></td>
<td>Expected Salary P.A </td>
<td><label>
<input name="salary" type="text" id="salary" />
</label></td>
</tr>
<tr>
<td>City</td>
<td><label>
<input name="city" type="text" id="city" />
</label></td>
<td colspan="2" rowspan="5">&nbsp;</td>
</tr>

24
 <tr>
<td>State</td>
<td><label>
<input name="state" type="text" id="state" />
</label></td>
</tr>
<tr>
<td>PinCode</td>
<td><label>
<input name="pincode" type="text" id="pincode" />
</label></td>
</tr>
<tr>
<td>Email ID</td>
<td><label>

<input name="email" type="text" id="email" />

</label></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><label>
<input name="mobile" type="text" id="mobile" />
</label></td>
</tr>
<tr>
<td colspan="5"><label>
<div align="center">
<input type="submit" name="Submit" value="Submit" onclick="return
validation()" />
<label>
<input type="reset" name="Submit2" value="Reset" />
</label>
</div>
</label></td>
</tr>
</table>
</form>
</div>
<div id="Layer2">
<div align="center">
<h1 class="style3">Job Registration Form </h1>
</div>
</div>
</body>
</html>

25
Output:

RESULT

Thus the web page for Job registration form is created and its webpages are validated using
Javascript.

26
Ex No: 4 INSTALLATION OF APACHE TOMCAT WEB SERVER
Date :

AIM
To install Apache Tomcat Web Server in Windows System.

Apache Tomcat HTTP Server

Apache Tomcat is a Java-capable HTTP server, which could execute special Java programs
known as "Java Servlet" and "Java Server Pages (JSP)". Tomcat is an open-source project, under
the "Apache Software Foundation" (which also provides the most use, open-source, industrial-
strength Apache HTTP Server). The mother site for Tomcat is http://tomcat.apache.org.
Alternatively, you can find tomcat via the Apache mother site @ http://www.apache.org.
Tomcat was originally written by James Duncan Davison (then working in Sun) in 1998, based
on an earlier Sun's server called Java Web Server (JWS). It began at version 3.0 after JWS 2.1 it
replaced. Sun subsequently made Tomcat open-source and gave it to Apache.
The various Tomcat releases are:
Tomcat 3.0 (1999): Reference Implementation (RI) for Servlet 2.2 and JSP 1.1.
Tomcat 4.1 (Sep 2002): RI for Servlet 2.3 and JSP 1.2.
Tomcat 5.0 (Dec 2003): RI for Servlet 2.4 and JSP 2.0.
Tomcat 6.0 (Feb 2007): RI for Servlet 2.5 and JSP 2.1.
Tomcat 7.0 (Jan 2011): RI for Servlet 3.0, JSP 2.2 and EL 2.2.
Tomcat 8.0 (Jun 2014): RI for Servlet 3.1, JSP 2.3, EL 3.0 and WebSocket 1.0. Tomcat 8.5
(June 2016) supports HTTP/2, OpenSSL, TLS virtual hosting and JASPIC 1.1.
Tomcat 9.0 (Jan 2018): RI for Servlet 4.0, JSP 2.3, EL 3.0, WebSocket 1.0, JASPIC 1.1.
Tomcat 10.0 (Mar2023): RI for Servlet 5.0, JSP 3.0, EL 4.0, WebSocket 2.0, JASPIC 2.0.

How to Install Tomcat and Get Started with Java Servlet Programming
STEP 0: Create a Directory to Keep all your Works
I shall assume that you have created a directory called "c:\myWebProject" (for Windows) or
"~\myWebProject" (for Mac OS X) in your earlier exercises. Do it otherwise. This step is
important; otherwise, you will be out-of-sync with this article and will not be able to find your
files later.
STEP 1: Download and Install Tomcat
For Windows
Goto http://tomcat.apache.org ⇒ Under "Tomcat 9.0.{xx} Released", where {xx} is the latest
update number ⇒ Click "Download" ⇒ Under "9.0.{xx}" ⇒ Binary Distributions ⇒ Core ⇒
"zip" (e.g., "apache-tomcat-9.0.{xx}.zip", about 11 MB).
UNZIP the downloaded file into your project directory "c:\myWebProject". Tomcat shall be
unzipped into directory "c:\myWebProject\apache-tomcat-9.0.{xx}".
For EASE OF USE, we shall shorten and rename this directory to "c:\myWebProject\tomcat".
Take note of Your Tomcat Installed Directory. Hereafter, I shall refer to the Tomcat installed
directory as <TOMCAT_HOME>.

27
Tomcat's Sub-Directories
Take a quick look at the Tomcat installed directory. It contains the these sub-directories:
bin: contains the binaries and scripts (e.g., startup.bat and shutdown.bat for Windows;
startup.sh and shutdown.sh for Unixes and Mac OS X).
conf: contains the system-wide configuration files, such as server.xml, web.xml, and
context.xml.
webapps: contains the webapps to be deployed. You can also place the WAR (Webapp
Archive) file for deployment here.
lib: contains the Tomcat's system-wide library JAR files, accessible by all webapps. You could
also place external JAR file (such as MySQL JDBC Driver) here. logs: contains Tomcat's log
files. You may need to check for error messages here. work: Tomcat's working directory used by
JSP, for JSP-to-Servlet conversion.

STEP 2: Create an Environment Variable JAVA_HOME

(For Windows)
You need to create an environment variable (system variable available to all applications)
called "JAVA_HOME", and set it to your JDK installed directory.
Many Java applications (such as Tomcat) require the environment variable JAVA_HOME to be
set to the JDK installed directory.
To set the JAVA_HOME environment variable:
First, find your JDK installed directory. For JDK 11, the default is "c:\Program Files\Java\jdk-
11.0.{x}", where "{x} is the update number. Use your "File Explorer" to find this directory and
take note of your update number {x}. Check if JAVA_HOME is already set. Start a CMD and
issue:
set JAVA_HOME
If you get a message "Environment variable JAVA_HOME not defined", proceed to the next
step.
If you get "JAVA_HOME=C:\Program Files\Java\jdk-11.0.{x}", verify that it is set correctly to
your JDK directory. If not, proceed to the next step.
To set the environment variable JAVA_HOME in Windows 10:
Launch "Control Panel" ⇒ (Optional) "System and Security" ⇒ "System" ⇒ Click "Advanced
system settings" on the left pane.
Switch to "Advanced" tab ⇒ Click "Environment Variables"
Under "System Variables" (the bottom pane) ⇒ Click "New" (or Look for "JAVA_HOME" and
"Edit" if it is already set) ⇒ In "Variable Name", enter "JAVA_HOME" ⇒ In "Variable Value",
enter your JDK installed directory you noted in Step 1. (In the latest Windows 10: you can push
the "Browse Directory" button and navigate to the JDK installed directory to avoid typo error.)
To verify, RE-START a CMD (restart is needed to refresh the environment variables) and
issue:
set JAVA_HOME
JAVA_HOME=c:\Program Files\Java\jdk-11.0.{x} <== Verify that this is YOUR JDK
installed directory

28
Notes: Windows' environment variables (such as JAVA_HOME, PATH) are NOT
casesensitive.

STEP 3: Configure the Tomcat Server

The Tomcat configuration files, in XML format, are located in the "conf" sub-directory of your
Tomcat installed directory, e.g. "c:\myWebProject\tomcat\conf" (for Windows) or
"~/myWebProject/tomcat/conf" (for Mac OS X). The important configuration files are:
server.xml web.xml
context.xml
Make a BACKUP of the configuration files before you proceed!!!
Step 3(a) "conf\server.xml" - Set the TCP Port Number
Use a programming text editor (e.g., Sublime Text, Atom) to open the configuration file
"server.xml".
The default TCP port number configured in Tomcat is 8080, you may choose any number
between 1024 and 65535, which is not used by existing applications. We shall choose 9999 in
this article. (For production server, you should use port 80, which is pre-assigned to HTTP server
as the default port number.)
Locate the following lines (around Line 69) that define the HTTP connector, and change
port="8080" to port="9999".
<!-- A "Connector" represents an endpoint by which requests are received
and responses are returned. Documentation at :
Java HTTP Connector: /docs/config/http.html
Java AJP Connector: /docs/config/ajp.html
APR (HTTP/AJP) Connector: /docs/apr.html
Define a non-SSL HTTP/1.1 Connector on port 8080
-->
<Connector port="9999" protocol="HTTP/1.1"
connectionTimeout="20000" redirectPort="8443" />
Step 3(b) "conf\web.xml" - Enable Directory Listing
Again, use a programming text editor to open the configuration file "web.xml".
We shall enable directory listing by changing "listings" from "false" to "true" for the "default"
servlet. This is handy for test system, but not for production system for security.

Locate the following lines (around Line 108) that define the "default" servlet; and change the
"listings" from "false" to "true".
<servlet>
<servlet-name>default</servlet-name>
<servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>0</param-value>

29
</init-param>
<init-param>
<param-name>listings</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
Step 3(c) "conf\context.xml" - Enabling Automatic Reload
We shall add the attribute reloadable="true" to the <Context> element to enable automatic reload
after code changes. Again, this is handy for test system but not recommended for production, due
to the overhead of detecting changes.
Locate the <Context> start element (around Line 19), and change it to <Context
reloadable="true">. <Context reloadable="true">
......
......
</Context>
2.5 STEP 4: Start Tomcat Server
The Tomcat's executable programs and scripts are kept in the "bin" sub-directory of the Tomcat
installed directory.
Step 4(a) Start Server
For Windows
I shall assume that Tomcat is installed in "c:\myWebProject\tomcat". Launch a CMD shell and
issue:
c: // Change drive
cd \myWebProject\tomcat\bin // Change directory to your Tomcat's binary directory startup
// Run startup.bat to start tomcat server

Step 4(b) Start a Client to Access the Server

Start a browser (Firefox, Chrome) as an HTTP client. Issue URL "http://localhost:9999" to access
the Tomcat server's welcome page. The hostname "localhost" (with IP address of 127.0.0.1) is
meant for local loop-back testing within the same machine. For users on the other machines over
the net, they have to use the server's IP address or DNS domain name in the form of
"http://serverHostnameOrIPAddress:9999".
(Optional) Try issuing URL http://localhost:9999/examples to view the servlet and JSP
examples. Try running some of the servlet examples.

30
Step 4(c) Shutdown Server For
Windows
You can shutdown the tomcat server by either:
Press Ctrl-C on the Tomcat console; OR
Run "<TOMCAT_HOME>\bin\shutdown.bat" script. Open a new "cmd" and issue:
c:// Change the current drive cd \myWebProject\tomcat\bin// Change directory to
your Tomcat's binary directory shutdown// Run shutdown.bat to shutdown the server

RESULT
Thus the Apache Tomcat Web Server Software successfully installed.

31
Ex.No:5a INVOKING SERVLETS FROM HTML FORM
Date:

AIM:
To write a java program to invoke servlets from HTML form.
PROCEDURE:
client.html:
(1) Create a web page using HTML form that contains the fields such as text, password and
one submit button.
(2) Set the URL of the server as the value of form’s action attribute.
(3) Run the HTML program.
(4) Submit the form data to the server.
server.java:
(1) Define the class server that extends the property of the class HttpServlet
(2) Handle the request from the client by using the method service() of HttpServlet class.
(3) Get the parameter names from the HTML form by using the method getParameterNames().
(4) Get the parameter values from the HTML forms by using the method getParameter().
(5) Send the response to the client by using the method of PrintWriter class.

PROGRAM:
MySrv.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MySrv extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");

32
out.println(" <BODY>");
//Getting HTML parameters from Servlet
String username=request.getParameter("uname"); String password=request.getParameter("pwd");
if((username.equals("user")) && (password.equals("pswd")))
{
out.println(" <h1> Welcome to "+username);
}
else
{
out.println(" <h1> Registration success ");
out.println(" <a href='./index.html'> Click for Home page </a>");
}
out.println(" </BODY>");
out.println("</HTML>");
out.close();
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doPost( request,response);
}}
Registration.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT="">
<META
NAME="Description" CONTENT=""> </HEAD>
<BODY bgcolor='#e600e6'>
<form action='./MySrv' method="post">
<center> <h1> <u> Login Page </u></h1>
<h2> Username : <input type="text" name="uname"/> Password : <input type="password"
name="pwd"/>
<input type="submit" value="click me"/>
</center>

33
</form>
</body>
</HTML>
web.xml:
<web-app>
<servlet>
<servlet-name>MySrv</servlet-name>
<servlet-class>MySrv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MySrv</servlet-name>
<url-pattern>/MySrv</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

OUTPUT:

RESULT:
Thus the java program to invoke servlets from HTML form has been executed successfully.

34
Ex.No:5b SESSION TRACKING USING HIDDEN FORM FIELDS
Date:

AIM:
To write a Java Program for Session Tracking Using Hidden Form Fields. This servlet
demonstrates session tracking using hidden form fields by displaying the shopping cart for a
bookworm. Note that, if you try this servlet, the buttons at the bottom of the page it generates don't
take you anywhere real.

PROCEDURE:
1. Create a web page using HTML form that contains the fields such as text, password and one
submit button.
2. Set the URL of the server as the value of form’s action attribute.
3. Ask if the user wants to add more items or check out.
4. Include the current items as hidden fields so they'll be passed on and submit to self.

PROGRAM:
register.html:
<html>
<body bgcolor = "cyan">
<center>
<h1>WELCOME TO REGISTRATION PAGE</h1>
<form action="./registerone" METHOD="post"> Name: <input type="text" name =
"name"><br><br>
Password: <input type="password" name="password"><br><br> PROFESSION:
<select name="profession">
<option value="engineer">ENGINEER</option>
<option value="teacher">TEACHER</option>
<option value="businessman">BUSINESSMAN</option>
</select><br><br>
<input type="submit" value="REGISTER">
</form>
</center>
</body>
</html>

35
web.xml
<web-app>
<welcome-file-list>
<welcome-file>register.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>RegistrationServletOne</servlet-name>
<servlet-class>RegistrationServletOne</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletOne</servlet-name>
<url-pattern>/registerone</url-pattern>
</servlet-mapping>
<servlet>

<servlet-name>RegistrationServletTwo</servlet-name>
<servlet-class>RegistrationServletTwo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletTwo</servlet-name>
<url-pattern>/registertwo</url-pattern>
</servlet-mapping>
</web-app>

RegistrationServletOne.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletOne extends HttpServlet
{

36
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException
{
String name = request.getParameter("name");
String password = request.getParameter("password");
String profession = request.getParameter("profession");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>COMPLETE THE REGISTRATION</h1>");
out.println("<form action = ./registertwo method = post");
out.println("<input type = hidden name = name value =" + name + ">");
out.println("<input type = hidden name = password value =" + password + ">");
out.println("<input type = hidden name = profession value =" + profession + ">");
out.println("EMAIL ID:<input type =text name = email><br><br>");
out.println("PHONE NO:<input type =text name = cell><br><br>");
out.println("<input type =submit value=registernow>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
}

RegistrationServletTwo.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletTwo extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException

37
{
String name = request.getParameter("name");
String password = request.getParameter("password");
String profession = request.getParameter("profession");
String email = request.getParameter("email");
String cell = request.getParameter("cell");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>REGISTRATION SUCCESSFUL </h1>");
out.println("</center>");
out.println("</body></html>");
out.close();
}

38
Output:

39
RESULT:
Thus the Java program for Session Tracking using hidden form fields has been executed
successfully.

40
Ex.No:5b SESSION TRACKING A HIT COUNT
Date:

AIM:
To write a Java Program for Session tracking a hit count. This servlet uses session tracking to
count the number of times a client has accessed it.

PROCEDURE:
1. Get the current session object, create one if necessary
2. Increment the hit count for this page. The value is saved in this client's session under the
name "tracker.count".
3. Display the hit count for this page

PROGRAM:
PageHitCounter.java
import java.io.*;
import java.sql.Date;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class PageHitCounter extends HttpServlet {
private int hitCount;
public void init()
{
// Reset hit counter. hitCount = 0;
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
// Set response content type response.setContentType("text/html");
// This method executes whenever the servlet is hit
// increment hitCount hitCount++;
PrintWriter out = response.getWriter();
String title = "Total Number of Hits";
String docType = "<!doctype html public \"-//w3c//dtd html 4.0 " + "transitional//en\">\n";

41
out.println(docType + "<html>\n" + "<head><title>" + title + "</title></head>\n" + "<body bgcolor
= \"#f0f0f0\">\n" +
"<h1 align = \"center\">" + title + "</h1>\n" + "<h2 align = \"center\">" + hitCount + "</h2>\n" +
"</body>
</html>"
);
}
public void destroy()
{
// This is optional step but if you like you
// can write hitCount value in your database.
}
}
Web.xml
<servlet>
<servlet-name>PageHitCounter</servlet-name>
<servlet-class>PageHitCounter</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PageHitCounter</servlet-name>
<url-pattern>/PageHitCounter</url-pattern>
</servlet-mapping>

42
OUTPUT:

RESULT:
Thus the Java program for session tracking a hit count has been executed successfully.

43
Ex No: 6a CREATION OF THREE-TIER APPLICATIONS USING JSP AND
Date : DATABASES - For conducting on-line examination

AIM
To create a three-tier application using JSP and Databases for the conduction of online-
examination.

SOFTWARE REQUIRED
Tomcat Server

DESCRIPTION
Java Server Pages (JSP) is a technology that helps software developers create dynamically
generated web pages based on HTML, XML, or other document types. Released in 1999 by Sun
Microsystems, JSP is similar to PHP and ASP, but it uses the Java programming language.

ALGORITHM
1. Design the HTML page (ExamClient.html) with the following
a Create a form to get the input from the user.
b Use radio buttons to make various options for the questions.
c Set the URL of the server (ExamServer.jsp) as the value of the action attribute.
d Use submit button to invoke the server and send the form data to the server.
2. Create the JSP file with the following
a Read the input from the client.
b Retrieve the answers from the database.
c Match the answers from the user with the correct answers from the database table.
d For each correct answer increment the mark by 5.
e Server displays the mark and result to the client as a response.

CODE
ExamServer.jsp:
<%@page contentType="text/html" language="java" import="java.sql.*"%>
<html>
<head>
<title>Online Exam Server</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<p>
<a href="ExamClient.html">Back To Main Page</a>
</p>
<hr/>
<%
String str1=request.getParameter("ans1");
String str2=request.getParameter("ans2");
String str3=request.getParameter("ans3");

44
int mark=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:examDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM examTab");
int i=1; while(rs.next())
{ if(i==1)
{
String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
} }
if(i==2)
{
String dbans2=rs.getString(1);
if(str2.equals(dbans2))
{
mark=mark+5;
} } if(i==3)
{
String dbans3=rs.getString(1);
if(str3.equals(dbans3))
{
mark=mark+5;
} } i++; }
if(mark>=10)
{
out.println("<h4>Your Mark Is : "+mark+"</h4>");
out.println("<h3>Congratulations....! You Are Eligible For The Next Round...</h3>");
} else {
out.println("<h4>Your Mark is : "+mark+"</h4>");
out.println("<h3>Sorry....!! You Are Not Eligible For The Next Round...</h3>");
}
%>
</form>
</body>
</html>

ExamClient.html:

<html>
<head>
<title>Online Exam Client</title>
<style type="text/css">
body{background-color:white;font-family:courier;color:black}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>

45
<h3>Answer the following questions (5 marks for each correct answer)</h3> <hr/>
<form name="examForm" method="post" action="ExamServer.jsp">
1. All computers must have <br/>
<input type="radio" name="ans1" value="Operating System">Operating System
<input type="radio" name="ans1" value="Application Software">Application Software
<input type="radio" name="ans1" value="CD Drive">CD Drive
<input type="radio" name="ans1" value="Microsoft word">Microsoft word
<br/><br/>
2. The term PC means <br/>
<input type="radio" name="ans2" value="Private Computer">Private Computer
<input type="radio" name="ans2" value="Professional Computer">Professional Computer
<input type="radio" name="ans2" value="Personal Computer">Personal Computer
<input type="radio" name="ans2" value="Personal Calculator">Personal Calculator <br/><br/>
3. C was developed by?<br/>
<input type="radio" name="ans3" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans3" value="Stroustrup">Stroustrup
<input type="radio" name="ans3" value="David Ritchie">David Ritchie
<input type="radio" name="ans3" value="Charles Babbage">Charles Babbage <br/><br/>
<input type="submit" value="Check Your Result"/>
</form>
</body>
</html>

OUTPUT

46
 ONLINE EXAMINATION
Back To Main Page

Your Mark Is : 15
Congratulations....! You Are Eligible For The Next Round...

RESULT
Thus a simple web application using JSP and Database had been created for the
conduction of online examination.

47
Ex No: 6b CREATION OF THREE-TIER APPLICATIONS USING JSP AND
Date : DATABASES - For displaying student mark list

AIM
To create a three-tier application using JSP and Databases for displaying the student
mark list.

SOFTWARE REQUIRED
Tomcat Server

DESCRIPTION
Java Server Pages (JSP) is a technology that helps software developers create dynamically
generated web pages based on HTML, XML, or other document types. Released in 1999 by Sun
Microsystems, JSP is similar to PHP and ASP, but it uses the Java programming language.

ALGORITHM
1. Design the HTML page (stud.html) with the following
a. Create a form to get the input (Register Number) from the user.
b. Set the URL of the server (marklist.jsp) as the value of the action attribute.
c. Use submit button to invoke the server and send the form data to the server.
2. Create the JSP file with the following
a. Read the parameter value (Register Number) from the form by using the
method getParameter().
b. Server retrieves the details from the database table with respect to the form
input.
c. Server displays the mark list to the client as the response.
CODE
marklist.jsp:
<%@ page contentType="text/html" language="java" import="java.sql.*"%> <html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<%
String str=request.getParameter("regno");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:markDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE rno="+str);
while(rs.next())
{
%>
Register No:<%=rs.getObject(1)%><br/>

48
Name:<%=rs.getObject(2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th> <tr><td>Network Programming and Management
</td><td><%=rs.getObject(3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><%=rs.getObject(4)%></td></tr>
<tr><td>Cryptography and Network Security</td><td><%=rs.getObject(5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr>
<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>
<tr><td>Software Requirement and Engineering</td><td><%=rs.getObject(8)%></td></tr>
</table>
<%
}
%>
<br/>
<a href="stud.html">Back</a>
</body>
</html>

stud.html

<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
{
color:blue;
font-family:courier;
text-align:center
}
</style>
</head>
<body>
<center>
<h2>EXMINATION RESULT</h2><hr/>
<form name="f1" method "GET" action="marklist.jsp">
Enter your Reg.No:
<input type="text" name="regno"/><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="SUBMIT"/>
</form>
</center>
</body>
<html>

49
OUTPUT

EXAMINATION RESULT

Registration No : 4376996
Name : Sanjai

Subject Marks
Network Programming and Management 76
Object Oriented Analysis and Design 85
Cryptography and Network Security 90
Embedded Systems 65
Web Technology 88
Software Requirement and Engineering 75

Back

RESULT
Thus a simple web application using JSP and Database had been created displaying
student mark list.

50
Ex No: 7 PROGRAMS USING XML – SCHEMA – XSLT/XSL
Date :

AIM
To write a XML scheme to generate CD Collection details.

SOFTWARE REQUIRED
Dreamweaver or Notepad and Browser.

DESCRIPTION

In HTML documents, tags are predefined but in XML documents, tags are not predefined. World
Wide Web Consortium (W3C) developed XSL to understand and style an XML document, which
can act as XML based Stylesheet Language.
An XSL document specifies how a browser should render an XML document.

Main parts of XSL Document

1. XSLT: It is a language for transforming XML documents into various other types of
documents.
2. XPath: It is a language for navigating in XML documents.
3. XQuery: It is a language for querying XML documents.
4. XSL-FO: It is a language for formatting XML documents.

How XSLT Works?

The XSLT stylesheet is written in XML format. It is used to define the transformation rules to be
applied on the target XML document. The XSLT processor takes the XSLT stylesheet and applies
the transformation rules on the target XML document and then it generates a formatted document
in the form of XML, HTML, or text format. At the end it is used by XSLT formatter to generate
the actual output and displayed on the end-user.

ALGORITHM
Step 1: Start the program
Step 2: Use Xml Style Sheet code to define link
<?xml-stylesheet type="text/xsl" href="yourxsl.xsl"?>
Step 3: Use the catalog tag to define CD collection details.
Step 4: Use the necessary heading for appropriate XML tag.
Step 5: Provide necessary information for CD collection details
Step 6: Stop the program

CODE CDCatalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<?xml-stylesheet type="text/xsl" href=" CDCatalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>

51
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
</catalog>
CDCatalog.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:sort select="artist"/>
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

52
Output:

RESULT
Thus an XML application had been created to display CD Catalog using XSL.

53