Scribd
Upload
12 views59 pages

Final WT Lab Manual - Compressed

The document outlines the objectives and content of the CCS375 & Web Technologies lab at Shree Venkateshwara Hi-Tech Engineering College for the academic year 2023-2024. It covers fundamental concepts of internet programming, including Java, HTML, CSS, JavaScript, Servlets, JSP, and AJAX, along with practical examples of HTML tags and their usage. The lab aims to equip students with the skills necessary for developing web-based applications using the Java platform.

Uploaded by

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

Final WT Lab Manual - Compressed

The document outlines the objectives and content of the CCS375 & Web Technologies lab at Shree Venkateshwara Hi-Tech Engineering College for the academic year 2023-2024. It covers fundamental concepts of internet programming, including Java, HTML, CSS, JavaScript, Servlets, JSP, and AJAX, along with practical examples of HTML tags and their usage. The lab aims to equip students with the skills necessary for developing web-based applications using the Java platform.

Uploaded by

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

SHREE VENKATESHWARA

HI-TECH ENGINEERING COLLEGE


GOBI-638 455

NAME OF THE LAB CCS375 & WEB TECHNOLOGIES

University Register No_____________________________________________________________________

Name _______________________________________________________________________________________

Branch B.E-Computer Science and Engineering Batch_______________________

Certified that this is bonafide record of work done by the above student during the year
2023-2024

LAB IN-CHARGE HEAD OF THE DEPARTMENT

Submitted for the practical Examination held on _____________________________________

INTERNAL EXAMINER EXTERNAL EXAMINER


LEARNING OBJECTIVES

The objective of this lab is to provide a student with an understanding of the


fundamental concepts in internet programming and to provide the skills needed for
developing web based application with Java platform. They can also have knowledge of
the underlying generic principles of computer programming as applied to implementing
basic web-based applications.

INTRODUCTION

JAVA: java is one of the most popular programming languages used to create Web
applications and platforms. It was designed for flexibility, allowing developers to write
code that would run on any machine, regardless of architecture or platform. According
to the Java home page, more than 1 billion computers and 3 billion mobile phones
worldwide run Java.

HTML: Hypertext Markup Language (HTML) is the main markup language for creating
web pages and other information that can be displayed in a web browser. HTML is
written in the form of HTML elements consisting of tags enclosed in angle brackets (like
<html>), within the web page content. HTML tags most commonly come in pairs like
<h1> and </h1>, although some tags represent empty elements and so are unpaired, for
example <img>. The first tag in a pair is the start tag, and the second tag is the end tag
(they are also called opening tags and closing tags). In between these tags web
designers can add text, further tags, comments and other types of text-based content.

CSS: Cascading Style Sheets, more commonly known by the abbreviation CSS, are style
sheets that are linked to the XHTML (Extensible Hypertext Markup Language) of the
website. The CSS code allows Web developers to take control of many aspects of their
site, such as fonts, colors, positioning and styling of data, while the XHTML code of the
site deals with the actual content and structure of the website.

JAVASCRIPT : Javascript is an easy-to-use programming language that can be


embedded in the header of your web pages. It can enhance the dynamics and interactive
features of your page by allowing you to perform calculations, check forms, write
interactive games, add special effects, customize graphics selections, create security
passwords and more.

SERVLET The Servlet is a Java programming language class used to extend the
capabilities of a server. Although servlets can respond to any types of requests, they are
commonly used to extend the applications hosted by web servers, so they can be
thought of as Java Applets that run on servers instead of in web browsers. These kinds
of servlets are the Java counterpart to other dynamic Web content technologies
such as PHP and ASP.NET.

JSP - Java Server Page: It is a server-side technology; Java Server Pages are an extension
to the Java servlet technology that was developed by Sun. JSPs have dynamic scripting
capability that works in tandem with HTML code, separating the page logic from the
static elements -- the actual design and display of the page -- to help make the HTML
more functional (i.e. dynamic database queries). A JSP is translated into Java servlet
before being run, and it processes HTTP requests and generates responses like any
servlet. However, JSP technology provides a more convenient way to code a servlet.
Translation occurs the first time the application is run. A JSP translator is triggered by
the .jsp file name extension in a URL. JSPs are fully interoperable with servlets. You can
include output from a servlet or forward the output to a servlet, and a servlet can
include output from a JSP or forward output to a JSP. JSPs are not restricted to any
specific platform or server. It was orignially created as an alternative to Microsoft's
ASPs (Active Server Pages). Recently, however, Microsoft has countered JSP technology
with its own ASP.NET, part of the .NET initiative.

AJAX an acronym for Asynchronous JavaScript and XML) is a group of interrelated web
development techniques used on the client-side to create asynchronous web
applications. With Ajax, web applications can send data to, and retrieve data from, a
server asynchronously (in the background) without interfering with the display and
behavior of the existing page. Data can be retrieved using the XMLHttpRequest object.
Despite the name, the use of XML is not required (JSON is often used instead. See AJAJ),
and the requests do not need to be asynchronous

HTML Tags Chart

Tag Name Code Example Browser View


<!--This can be viewed in the HTML
<!-- comment Nothing will show (Tip)
part of a document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
body of
<body>The content of your HTML Contents of your web
<body> HTML
page</body> page (Tip)
document
The contents of your
The contents of your page<br>The web page
<br> line break
contents of your page The contents of your
web page
<center>This will center your This will center your
<center> center
contents</center> contents
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dd>
description <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
<dl>
Definition Term
<dt>Definition Term</dt>
definition Definition of the term
<dl> <dd>Definition of the term</dd>
list Definition Term
<dt>Definition Term</dt>
Definition of the term
<dd>Definition of the term</dd>/dl>
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
This is an <em>Example</em> of using This is an Example of
<em> emphasis
the emphasis tag using the emphasis tag
<embed src="yourfile.mid"
<embed embed Media player shown
width="100%" height="60"
> object (Tip)
align="center">

<embed src="yourfile.mid"
Music will begin playing
autostart="true" hidden="false"
when your page is
<embed embed loop="false">
loaded and will only
> object <noembed><bgsound
play one time. A control
src="yourfile.mid"
panel will be displayed
loop="1"></noembed>
to enable your visitors
to stop the music.
<font face="Times New
<font> font Example (Tip)
Roman">Example</font>
<font face="Times New Roman"
<font> font Example (Tip)
size="4">Example</font>
<font face="Times New Roman"
<font> font size="+3" Example (Tip)
color="#ff0000">Example</font>
<form
action="mailto:[email protected]"
>
Name: <input name="Name" value="" Name: (Tip)
size="10"><br> Email:
<form> form
Email: <input name="Email" value="" Submit Query
size="10"><br>
<center><input
type="submit"></center>
</form>
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h1>
heading 1 <h4>Heading 4 Example</h4>
<h2>
heading 2 <h5>Heading 5 Example</h5>
<h3>
heading 3 <h6>Heading 6 Example</h6>
<h4>
heading 4
<h5>
heading 5
<h6>

<head> heading of <head>Contains elements describing Nothing will show


HTML the document</head>
document

Contents of your web


horizontal page (Tip)
<hr> <hr />
rule
Contents of your web
page
Contents of your web
page
horizontal
<hr> <hr width="50%" size="3" />
rule
Contents of your web
page
Contents of your web
page
horizontal
<hr> <hr width="50%" size="3" noshade />
rule
Contents of your web
page
Contents of your web
<hr>
page
(Internet horizontal <hr width="75%" color="#ff0000"
Explorer rule size="4" />
Contents of your web
)
page
Contents of your web
<hr>
page
(Internet horizontal <hr width="25%" color="#6699ff"
Explorer rule size="6" />
Contents of your web
)
page
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title> Contents of your web
<html> markup
</head> page
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41"
<img> image height="41" border="0" alt="text
describing the image" /> (Tip)
Example 1:

<form method=post action="/cgi- Example 1: (Tip)


bin/example.cgi">
<input> input field
<input type="text" size="10" Submit

maxlength="30">
<input type="Submit" value="Submit">
</form>
<input> input field Example 2: Example 2: (Tip)
(Internet
Explorer <form method=post action="/cgi- Submit
) bin/example.cgi">
<input type="text" style="color: #ffffff;
font-family: Verdana; font-weight: bold;
font-size: 12px; background-color:
#72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:

<form method=post action="/cgi- Example 3: (Tip)


bin/example.cgi">
<table border="0" cellspacing="0"
cellpadding="2"><tr><td
<input> input field bgcolor="#8463ff"><input type="text"
size="10" maxlength="30"></td><td
bgcolor="#8463ff" valign="Middle">
<input type="image" name="submit"
src="yourimage.gif"></td></tr>
</table>
</form>
Example 4:
Example 4: (Tip)
<form method=post action="/cgi-
bin/example.cgi">
Enter Your Comments:<br>
<input> input field <textarea wrap="virtual"
name="Comments" rows=3 cols=20
maxlength=100></textarea><br>
<input type="Submit" value="Submit"> Submit Clear
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgi-


bin/example.cgi">
<center>
Example 5: Tip)
Select an option:
<select>
Select an option:
<option >option 1</option>
option 2
<input> input field <option selected>option 2</option>
<option>option 3</option> Submit
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
<input> input field Example 6: Example 6: (Tip)
<form method=post action="/cgi- Select an option:
bin/example.cgi">
Option 1
Select an option:<br>
<input type="radio" name="option"> Option 2
Option 1 Option 3
<input type="radio" name="option"
checked> Option 2 Select an option:
<input type="radio" name="option">
Option 3 Selection 1
<br> Selection 2
<br>
Select an option:<br> Selection 3
<input type="checkbox" Submit
name="selection"> Selection 1
<input type="checkbox"
name="selection" checked> Selection 2
<input type="checkbox"
name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example 1:
Example 1: (Tip)
<menu>
<li type="disc">List item 1</li>  List item 1
<li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>  List item 3
</MENU>
<li> list item
Example 2: Example 2:

<ol type="i"> i. List item 1


<li>List item 1</li> ii. List item 2
<li>List item 2</li> iii. List item 3
<li>List item 3</li> iv. List item 4
<li>List item 4</li>
</ol>
<head>
<link rel="stylesheet" type="text/css"
<link> link
href="style.css" />
</head>
<marque
<marquee bgcolor="#cccccc" loop="-1"
e>
scrolling scrollamount="2"
(Internet
text width="100%">Example
Explorer
Marquee</marquee>
) (Tip)
<menu>
 List item 1
<li type="disc">List item 1</li>
o List item 2
<menu> menu <li type="circle">List item 2</li>
 List item 3
<li type="square">List item 3</li>
</menu>
<meta name="Description"
content="Description of your site">
<meta> meta <meta name="keywords" Nothing will show (Tip)
content="keywords describing your
site">
<meta HTTP-EQUIV="Refresh"
<meta> meta CONTENT="4;URL=http://www.yourdo Nothing will show (Tip)
main.com/">
<meta http-equiv="Pragma"
<meta> meta Nothing will show (Tip)
content="no-cache">
<meta name="rating"
<meta> meta Nothing will show (Tip)
content="General">
<meta> meta <meta name="robots" content="all"> Nothing will show (Tip)
<meta name="robots"
<meta> meta Nothing will show (Tip)
content="noindex,follow">
Numbered Numbered

<ol> 1. List item 1


<li>List item 1</li> 2. List item 2
<li>List item 2</li> 3. List item 3
<li>List item 3</li> 4. List item 4
<li>List item 4</li>
</ol> Numbered Special Start

Numbered Special Start 5. List item 1


6. List item 2
<ol start="5"> 7. List item 3
<li>List item 1</li> 8. List item 4
<li>List item 2</li>
<li>List item 3</li> Lowercase Letters
<li>List item 4</li>
</ol> a. List item 1
ordered
<ol> b. List item 2
list
Lowercase Letters c. List item 3
d. List item 4
<ol type="a">
<li>List item 1</li> Capital Letters
<li>List item 2</li>
<li>List item 3</li> A. List item 1
<li>List item 4</li> B. List item 2
</ol> C. List item 3
D. List item 4
Capital Letters
Capital Letters Special
<ol type="A"> Start
<li>List item 1</li>
<li>List item 2</li> C. List item 1
<li>List item 3</li> D. List item 2
<li>List item 4</li> E. List item 3
</ol>
F. List item 4
Capital Letters Special Start
Lowercase Roman
<ol type="A" start="3"> Numerals
<li>List item 1</li>
<li>List item 2</li> i. List item 1
<li>List item 3</li> ii. List item 2
<li>List item 4</li> iii. List item 3
</ol> iv. List item 4

Lowercase Roman Numerals Capital Roman


Numerals
<ol type="i">
<li>List item 1</li> I. List item 1
<li>List item 2</li> II. List item 2
<li>List item 3</li> III. List item 3
<li>List item 4</li> IV. List item 4
</ol>
Capital Roman
Capital Roman Numerals Numerals Special Start

<ol type="I"> VII. List item 1


<li>List item 1</li> VIII. List item 2
<li>List item 2</li> IX. List item 3
<li>List item 3</li> X. List item 4
<li>List item 4</li>
</ol>

Capital Roman Numerals Special Start

<ol type="I" start="7">


<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<form method=post action="/cgi-
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option> Select an option: (Tip)
<option listbox <option selected>option 2</option> option 2
> option <option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example displaying the use of This is an example
<p> paragraph
the paragraph tag. <p> This will create displaying the use of the
a line break and a space between lines. paragraph tag.

Attributes: This will create a line


break and a space
Example 1:<br> between lines.
<br>
<p align="left"> Attributes:
This is an example<br>
displaying the use<br> Example 1:
of the paragraph tag.<br>
<br> This is an example
Example 2:<br> displaying the use
<br> of the paragraph tag.
<p align="right">
This is an example<br> Example 2:
displaying the use<br>
of the paragraph tag.<br> This is an example
<br> displaying the use
Example 3:<br> of the paragraph tag.
<br>
<p align="center"> Example 3:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag. displaying the use
of the paragraph tag.
small
<small> <small>Example</small> Example (Tip)
(text)
deleted
<strike> <strike>Example</strike> Example
text
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1:

<table border="4" cellpadding="2" Example 1: (Tip)


cellspacing="2" width="100%">
<tr> Column 1 Column 2
<td>Column 1</td>
<td>Column 2</td>
</tr> Example 2: (Tip)
</table>
<table> table Column 1 Column 2
Example 2: (Internet Explorer)

<table border="2"
bordercolor="#336699" Example 3: (Tip)
cellpadding="2" cellspacing="2"
width="100%"> Column 1 Column 2
<tr>
Row 2 Row 2
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding="2" cellspacing="2"


width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td> table data <td>Column 1</td>
Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td> Colum Colum Colum
<td>Row 2</td> n1 n2 n3
table </tr> Row 2 Row 2 Row 2
<th>
header <tr>
<td>Row 3</td> Row 3 Row 3 Row 3
<td>Row 3</td> Row 4 Row 4 Row 4
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
Title of your web page
document
<title> <title>Title of your HTML page</title> will be viewable in the
title
title bar. (Tip)
<table border="2" cellpadding="2"
<tr> table row Column 1 Column 2
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:<br>
Example 1:
<br>
<ul>
 List item 1
<li>List item 1</li>
 List item 2
<li>List item 2</li>
</ul>
<br>
Example 2:
unordered Example 2:<br>
<ul>
list <ul type="disc">
 List item 1
<li>List item 1</li>
 List item 2
<li>List item 2</li>
o List item
<ul type="circle">
3
<li>List item 3</li>
o List item
<li>List item 4</li>
4
</ul>
</ul>
CCS375 & WEB TECHNOLOGIES

List of Experiments

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


• To embed an image map in a web page.
• To fix the hot spots.
• 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:
● To invoke servlets from HTML forms.
● Session Tracking.
6. Write programs in Java to create three-tier applications using JSP and Databases
● For conducting on-line examination.
● 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.

Additional Experiments
8. Create a Web Page Design Using Basic Text Formatting tags, Ordered Lists, Unordered
List, &Tables.

9. Create Registration form using Form Components.


INDEX

S.no Date Name of the Experiments Page No Marks Sign

Web Page Design Using Basic Text


1 Formatting Tags, Ordered Lists, Unordered
List, Tables

2 Web Page Design Using Form Components

Create a web page with the following using


HTML
a. To embed a map in a web page
3
b. To fix the hot spots in that map
c. Show all the related information when
the hot spots are clicked
Create a web page with the following.
a. Cascading style sheets.
4 b. Embedded style sheets.
c. Inline style sheets. Use our college
information for the web pages.

Client Side Scripts for Validating Web Form


5
Controls Using DHTML

Installing & configuring TOMCAT &


6 Convert the static webpages into dynamic
webpages Using servlets

Create Java Servlet Program & Invoke


7
Servlets From HTML Forms

Session Tracking Using Hidden Form Fields


8
and Tracking for a Hit Count

Create Three-Tier Applications Using JSP


9
and Database

Create an XML Document Which Contains 10


10
Users Information.
Ex.No: 1
WEB PAGE DESIGN USING BASIC TEXT FORMATTING
TAGS, ORDERED LISTS,UNORDERED LIST, TABLES
Date:

AIM:
To develop a webpage using basic text formatting tags, ordered lists, Unordered list and
tables.

ALGORITHM:
STEP 1: Start the program.
STEP 2: Open Notepad and Type the program then save as .html
STEP 3: Open the Browse the location of the file in the local disk.
STEP 4: Stop the Program
PROGRAM:
<html>
<head> <title>Erode Sengunthar Engineering College </title></head>
<body>
<h1><center> <font color="green">Shree Venkateshwara Hi-Tech Engineering
College</font> </center></h1>
<p align="center">
<b>Sri kalivani nager,Othakuthirai,P.Mettupalayam(PO) </b>
<i>Email : [email protected] Web: www.svhec.com</i>
</p>
<hr>
<u><center><h3>
<font color="gray">Department of Computer Science and Engineering</font></h3>
</center></u>
<P><b><font color="red">Highlights </font></p>
<ul>
<li>Campus Wide networking</li>
<li>14 Mbps Internet Connectivity</li>
<li>MoU with leading Industries</li>
</ul>
<P><b><font color="red">Laboratory facilites </font></p>
<table border="1" >
<caption><font color="green"><b>Hardware Details</b></font></caption>
<thead>
<tr>
<th>S. No. </th>
<th>Configuration </th>
<th>Quantity </th>
<tr>
</thead>
<tbody align="center">
<tr>
<td>1 </td>
<td>AMD Processor, 2GB RAM </td>
<td>50 </td>

1
<tr>
<tr>
<td>2 </td>
<td>Core 2 Duo, 2GB RAM </td>
<td>100 </td>
<tr>
<tr>
<td>3 </td>
<td>Dual Core, 2GB RAM </td>
<td>50 </td>
<tr>
<tr>
<td>4 </td>
<td>PIV, 2GB RAM </td>
<td>05 </td>
<tr>
</tbody>
</table>
<P><b><font color="red">Software Details </font></p>
<ol>
<li>Operating Systems</li>
<li>Windows XP, 7, 2003 </li>
<li>Sun Solaris</li>
</ol>
<li>Software Details</li>
<ul>
<li>Adobe Photoshop </li>
<li>Oracle 9i</li>
</ul>
</body>
</html>

OUTPUT:

REULT:
Thus a web page has been created by using Basic Tags.

2
Ex.No: 2
WEB PAGE DESIGN USING FORM COMPONENTS
Date:

AIM:
To develop a webpage using Form Components like Textbox, Label, Checkbox, Radio button,
button ,Text area and

ALGORITHM:
STEP 1: Start the program.
STEP 2: Open Notepad and Type the program then save as .html
STEP 3: Open the Browse the location of the file in the local disk.
STEP 4: Stop the Program
PROGRAM :

<html>
<head> <title>Resume</title>
</head>
<body bgcolor="FFECEC">
<center><h1> <font color="blue">SVHEC --CSE- Online Employment Portal</font>
</h1></center>
<center><h3><font color="green">Enter your details and get link with job
seekers</font></h3></center>
<br>
<form>
<h3>Create your Account</h3>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td>Your name:</td>
<td><input type="text" name="name" size="25" maxlength="25" /> </td>
</tr>
<tr>
<td>Email.Id:</td>
<td><input type="text" name="email" size="25" maxlength="25"/> </td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pass" size="25" maxlength="25" /> </td>
</tr>
<tr>
<td>Conform password:</td>
<td><input type="password" name="pass1" size="25" maxlength="25" /> </td>
</tr>
</table>
<h4>Contact Details</h4>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td>Current location</td>

3
<td> <select name="city" size="1">
<option value="Che">Chennai
<option value="Slm">Salem
<option value="Cbe">Coimbatore
<option value="Madurai">Madurai
<option value="Trichy">Trichy
</select>
</td>
<td align="right"> Country</td>
<td><select name="country" size="1">
<option value="India">India
<option value="USA">USA
<option value="UK">UK
<option value="Australia">Australia
<option value="can">Canada
</select>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td> <input type="text" name="mobil" size="20" maxlength="15" /></td>
<td><input type="checkbox" name="alert" />Receive alerts in sms </td>
</table>
<h4>Current Personal Details</h4>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td>Total Experience</td>
<td><select name="year" size="1">
<option value="year">Year
<option value="Fresher">Fresher
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
</td>
<td><select name="month" size="1">
<option value="month">Month
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9

4
<option value="10">10
<option value="11">11
<option value="12">12
</select>
</td>
</tr>
<tr>
<td>Current Annual Salary</td>
<td><select name="lakh" size="1">
<option value="lakh">lakh
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
</select>
</td>
<td><select name="Thouasnd" size="1">
<option value="Thousand">Thousand's
<option value="0">0
<option value="1">10
<option value="2">20
<option value="3">30
<option value="4">40
<option value="5">50
<option value="6">60
<option value="7">70
<option value="8">80
<option value="9">90
</select>
</td>
</tr>
<tr>
<td> Country</td>
<td><select name="Ins" size="1">
<option value="Country">Country
<option value="mal">Malasiya
<option value="ind">India
<option value="sig">Singapore
<option value="uk">UK
<option value="us">USA
<option value="cin">China
</select>
</tr>

5
</table>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td> Current Industry</td>
<td><select name="Ins" size="1">
<option value="Industry">Industry
<option value="-">
<option value="Infosys">Infosys
<option value="tcs">TCS
<option value="MicroSoft">MicroSoft
<option value="oracle">Oracle
<option value="IBM">IBM
</select>
</td>
</tr>
<tr><td> Functional Area</td>
<td><select name="area" size="1">
<option value="Urarea">your Area
<option value="-">
<option value="Java">Java
<option value=".net">.Net
<option value="C++">C,C++
<option value="Testing">Testing
<option value="pearl">pearl
</select>
</td>
</tr>
<tr>
<td align="right"> Key Skills</td>
<td><textarea rows="2" cols="15" name="skills">
</textarea>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td> Basic Graduation</td>
<td><select name="Ins" size="1">
<option value="UG">UG
<option value="B.Sc">B.Sc
<option value="B.E">B.E
<option value="B.Tech">B.Tech
<option value="BBA">BBA
</select>
</td>
</tr>
<tr>
<td> Post Graduation</td>
<td><select name="area" size="1">

6
<option value="PG">PG
<option value="Java">M.E
<option value="C">M.Tech
<option value="C++">MCA
</select>
</td>
</tr>
</TABLE>
<h4>Upload Resume</h4>
<form id="form1">
Select a file to upload:
<input type="file" id="fname" size="50" accept="video/mpeg/doc" />
</form>
<p>You don't have a resume presently, you still want a account. Give brief description about
the profile below.</p>
<center><textarea rows="4" cols="40" name="skills">
</textarea></center><br><br>
<h4>Mailer and privacy settings</h4>
<table border="0" cellspacing="0" cellpadding="9">
<tr>
<td> <input type="checkbox" name="job" />job alerts</td>
<td> <input type="checkbox" name="com" />Communication in mobile</td>
</tr>
<tr>
<td> <input type="checkbox" name="res" />Resume service-email</td>
<td> <input type="checkbox" name="other" />Other Promotions</td>
</tr>
</table>
<center><input type="submit" name="sub" value="Register"></center>
</body>
</html>

7
OUTPUT:

RESULT:
Thus a web page has been created by using Html Form Components

8
Create a web page with the following using HTML
Ex.No: 3 a. To embed a map in a web page
b. To fix the hot spots in that map
Date: c. Show all the related information when the hot spots are clicked.

IMAGE MAP

An image map is a list of coordinates relating to a specific image, created in order to


hyperlink areas of the image to various destinations (as opposed to a normal image link, in which
the entire area of the image links to a single destination). For example, a map of the world may
have each country hyperlinked to further information about that country. Single image has various
links. The <map> tag is used to define a client-side image-map. An image-map is an image with
several clickable areas. The <map> element contains a number of <area> elements; it defines the
clickable areas in the image map. The <area> element is always nested inside a <map> tag.

AIM
To create a web page with the following using html
i) to embed an image map in a web page
ii) to fix the hot spots
iii) show all the related information when the hot spots are clicked

ALGORITHM

Step 1: Use the <img> tag to insert the graphic for the image map
Step 2: Define the hot regions for the image and place information between the <map> and
</map> tags
Step 3: The <area> element is always nested inside a <map> tag to create hot region.
Step 4: Show all the related information when the hot spots are clicked

PROGRAM:

Mainpage.html
<html>
<head>
<title>Planets</title>
</head>
<body>
<h3>Click on the planets to watch closer</h3>
<img src="D:\planet.jpg" width="800" height="600" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,143,300" href="sun.html" alt="Sun"/>
<area shape="circle" coords="0,0,400" alt="mercury" href="mer.html"/>
<area shape="circle" coords="0,0,600" alt="venus" href="ven.html"/>
</map>
</body>
</html>
Sun.html
<html><body>

9
<h1>This is Sun</h1>
<h2> The Sun is the star at the center of the Solar System. <br/>
It is almost perfectly spherical and consists of hot plasma interwoven with magnetic fields.
</h2>
<img src="D:\sun.jpg" alt="sun" width=200 height=200/>
</body>
</html>

Mercury.html
<html>
<body>
<h1>This is Mercury.</h1>
<h2>Mercury is the innermost and smallest planet in the Solar System,<br/>
orbiting the Sun once every 87.969 Earth days.
</h2>
<img src="D:\mercur.jpg" alt="mercury" width=200 height=200/>
</body>
</html>

Venus.html
<html>
<body>
<h1>This is Venus</h1>
<h2>Venus is the second planet from the Sun, orbiting it every 224.7 Earth days.<br/>
Venus reaches its maximum brightness shortly before sunrise or shortly after sunset,<br/>
for which reason it has been known as the Morning Star or Evening Star.</h2>
<img src="D:\venus.jpg" alt="venus" height=200 width=200/>
</body>
</html>

OUTPUT

10
RESULT
Thus web page has been created with image map & hot spot successfully to display all related
information when hot spot are clicked.

11
Ex.No: 4 Create a web page with the following.
a. Cascading style sheets.
b. Embedded style sheets.
Date: c. Inline style sheets. Use our college information for the web pages.

CASCADING STYLE SHEETS:


 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
AIM
To create a web page with all types of cascading style sheets.

ALGORITHM

Step 1: Use various selectors like ID selector, Class selector and Tag selector to create style
sheet.
Step 2: In Internal or External style sheet, an entire CSS document is embedded into the head
section of html document.
Step 3: In External style sheets, a CSS file (a separate document that contain only CSS rules) is
created and linked to the document to which it has to be applied.
Step 4: In Inline style sheets, use style attribute in relevant tag.

PROGRAM:
Mainpage.html

<html>
<head>
<title>
style sheets
</title>
<frameset cols="25%,*">
<frame name="frame1" src="main.html"/>
<frame name="frame2" src="lilly.jpg"/>
<frame name="frame2" src="Internal.html" />
<frame name="frame2" src="Inline.html"/>
<frame name="frame2" src="Internal.html"/>
</frameset>
</head>
</html>
Main.html
<html>
<body bgcolor="lightgreen">
<h3><strong> Different types of CSS </strong></h3>
<h3> <ol type="1">

12
<li>
<a href="Inline.html" target="frame2">Inline CSS</a>
</li>
<li>
<a href="Internal.html" target="frame2">Embedded CSS</a>
</li>
<li>
<a href="External.html" target="frame2">External CSS</a>
</li>
</ol>
</h3>
</body>
</html>
Inline.html
<html>
<head>
<style type="text/css">
.p1
{
color:Darkblue;
background-color:lightblue;
font-size:18px;
padding:0.6 cm;
position:absolute;
border-style:dotted;
border-color:green;
border-width:5px";
}
</style>
</head>
<body>
<h2 style="color:red";font-family:Monotype Corsiva;align:center;">INLINE STYLE
SHEET</h2>
<!-- Inline Style -->
<p style="color:Green;font-weight:bold;font-family:TimesNewRoman;font-size:18px;">
Inline styles are CSS styles that are applied to one html element using the style attribute.
</p>
<br/>
<p class="p1">
Syntax : <br>
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<[element name] style="[CSS property]:[property value];">
</p> <br/><br/><br/><br/><br/><br/>

<p class="p1" style="border-style:groove;">


Example : <br>
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&lt;p style ="colour:green;"&gt;

13
</p></style>
</body>
</html>

Internal.html
<html>
<head>
<style type="text/css">
#p1 /*ID Selector */
{
color:Red;
font-size:22px;
}
p /*Tag Selector */
{
font-size:20px;
color:green;
}
.p2 /* Class Selector */
{
font-size:18px;
background-color:lightblue;
color:darkblue;
}
</style>
</head>
<body>
<p id="p1">EMBEDDED STYLE SHEET</p>
<p>An Embedded Style Sheet is specified using the STYLE element within the HEAD section.
</p>
<br/>

<p class="p2">
Syntax: <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;style type="text/css"&gt; <br/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[Internal CSS Style Sheet] <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;/style&gt;
</p>
<body>
</html>

External.html
<html>
<head>

14
<link rel="Stylesheet" TYPE="text/css" href="mystyle.css">
</head>
<body>
<h2 style="color:red";font-family:Monotype Corsiva;text-align:center;">EXTERNAL STYLE
SHEET</h2>
<h3 style="color:Green;font-weight:bold;font-family:TimesNewRoman;font-size:18px;">
An External Style Sheet is specified using the LINK element within the HEAD tag.
</h3>
<p>
Syntax :
&lt;link REL="STYLESHEET" TYPE="text/css" HREF="[Style sheet URL]" &gt;
</p></style>
<br/><br/><br/><br/><br/><br/>
<p style="border-style:groove;">
Example : &lt;link REL="STYLESHEET" TYPE="text/css" HREF="mystyle.css" &gt;
</p></style>
</body>
</html>

mystyle.css
p
{
color:Darkblue;
font-size:18px;
padding:1cm;
position:absolute;
border-style:dotted;
border-color:green;
border-width:2px";
}

OUTPUT

15
RESULT:
Thus a web page has been created by using all types of cascading style sheets successfully.

16
Ex.No: 5
CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM
CONTROLS USING DHTML
Date:

Java Script:
JavaScript can be used to validate data in HTML forms before sending the content to a server.
Form data that typically are checked by a JavaScript could be:
 has the user left required fields empty?
 has the user entered a valid e-mail address?
 has the user entered text in a numeric field?
 has specific length of character?
AIM:
To create client side scripts for validating web form controls using DHTML.

ALGORITHM:

Step 1: Create necessary form controls like text boxes and buttons required for the web form
using html.
Step 2: Using java script validate data in the form.
Step 3: Create script function in head section.
Step 4: Script function is called whenever any one of the field is empty.
Step 5: Finally submit process is successful only after validating the entire form.

PROGRAM:

Validate.html

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function ValidateForm()
{
valid=true;
if (document.form.username.value == "" )
{
alert("\nPlease enter your name ");
username.focus();
valid=false;
}
if (document.form.username.value.length>10)
{
alert("Name should be less than 10 chacter");
username.focus();
valid=false;
}
if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) ||
form.email.value.indexOf('.') == -1)
{

17
alert ("\nPlease enter a proper email");
email.focus();
vaild=false;
}
if ((form.radiobutton[0].checked == false) && (form.radiobutton[1].checked== false))
{
alert ("\nPlease choose your gender");
radiobutton.focus();
vaild=false;}
if(form.dropdownlist.selectedIndex == 0)
{
alert ("\nPlease select your branch");
dropdownlist.focus();
vaild=false;
}
if((form.checkbox[0].checked==false)&&(form.checkbox[1].checked==false))
{
alert ("\nPlease check Yes or No");
checkbox.focus();
vaild=false;
}
if(form.textarea.value=="")
{
alert ("\nPlease give your Feedback");
textarea.focus();
vaild=false;
}
alert("Successfully Submitted");
return valid;
}
</SCRIPT>
<STYLE TYPE="TEXT/CSS">
#td1 /*ID Selector */
{
color:darkRed;
font-size:18px;
}
</STYLE>
</HEAD>
<BODY>
<center><h3>FEEDBACK FORM</h3></center>
<center>
<table border="5" cellspacing="2" width="100" cellpadding="3">
<td id="td1">
<FORM name="form" method="POST" onSubmit="ValidateForm()">
Username:
<input type="text" value="" name="username" size=30><br><br>
Email:
<input type="text" value="" name="email" size=30> <br><br>

18
Gender:&nbsp; &nbsp; &nbsp;
<INPUT TYPE="radio" NAME="radiobutton" value="Male">Male &nbsp; &nbsp; &nbsp;
&nbsp;
<INPUT TYPE="radio" NAME="radiobutton" value="Female">Female<br><br>
Branch:
<select name="dropdownlist">
<option selected="" value="ps">please select a branch</option>
<option value="EEE">electrical & electronics engg</option>
<option value="CSE">computer science engg</option>
<option value="IT">IT</option>
</select><br><br>
Are you interested in future seminar? <br><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox" value="Yes" >Yes &nbsp;&nbsp;&nbsp;
<input type="checkbox" name="checkbox" value="No" >No <br><br>
Feedback about today's Seminar<br><br>
<textarea name="textarea" rows="4" cols="40"></textarea>
<br>
<center><input type="button" name="SubmitButton" value="Submit"
OnClick="ValidateForm()">
<input type="reset" value="Reset">
</td>
</TABLE>
</FORM>
</BODY>
</HTML>

OUTPUT

19
RESULT
Thus client side scripting has been created to validate a web form controls using DHTML.

20
Ex.No: 6 INSTALLING & CONFIGURING TOMCAT &
CONVERT THE STATIC WEBPAGES INTO DYNAMIC WEBPAGES
Date: USING SERVLETS

AIM:
To Convert the static WebPages into dynamic WebPages using servlets

ALGORITHM:
STEP 1: Start the program.
STEP 2: Develop client side application using HTML.
STEP 3: Enter the register number at the client side HTML From.
STEP 4: Invoke the servlet form the client side application.
STEP 5: Develop a Http base servlet to display student exam results.
STEP 6: Read the register from the request object of servlet interface.
STEP 7: Check the availability of the register in the data base using JDBC Connectivity.
STEP 8: If the register number is available retrieve the results using executeQuery() method.
STEP 9: Send back the result to the client via response object.
STEP 10: Stop the program.

APACHE TOMCAT INITIALIZATION PROCEDURE


Apache Tomcat (or simply Tomcat) is an open source web server and Servlet container
developed by the Apache Software Foundation (ASF). Tomcat implements the Java Servlet and the
JavaServer Pages (JSP) specifications

Environment Used
 JDK 6 (Java SE 6)
 Apache Tomcat 6.x
 Windows OS

JDK Initialization
JDK should be installed with proper environment set up. Installing the JDK and
setting up the environment. Installing JDK automatically installs JRE.

TOMCAT download and Initialization


If you need to install Tomcat, you can download it from this location:
http://tomcat.apache.org/download-60.cgi

21
22
PROGRAM:
Text.html
<HTML>
<HEAD><TITLE> Results of a student</TITLE></HEAD>
<body>
<center><h3> University Examination Results July 2008 </h3></center>
<form method = "GET" action="NewServlet">
Enter Register Number : <input type ="text" name="regno" value= " ">
<input type ="submit" value="GetResult">
</form>
</body>
</HTML>

NewServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
public class NewServlet extends HttpServlet {
Connection con;
Statement st;
ResultSet rs;
public void init()
{
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
con = DriverManager.getConnection("jdbc:odbc:it","","");
System.out.println("Connection Created");
st= con.createStatement();
}
catch(Exception e)
{
System.out.println(e);
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
ResultSet rs;
String qr="";
try
{
out.println("<html>");
out.println("<body>");
out.println("<head>");
out.println("<title> Results </title>");

23
out.println("</head>");
out.println("<body>");
out.print("<h3>Results of " + request.getParameter("regno")+"</H3>");
rs=st.executeQuery("select * from rtable where
regno='"+request.getParameter("regno")+"'");
out.println("<h3><pre> <FONT COLOR='BLUE'> Subject Name Grade
</FONT></H3></pre>");
if(rs.next())
{
out.print("<h4> Web Technology : " + rs.getString(2)+"</h4>");
out.print("<h4> Enterprise Computing : " + rs.getString(3)+"</h4>");
out.print("<h4> C#.NET Programming : " +rs.getString(4)+"</h4>");
out.print("<h4> Java Programming : " + rs.getString(5)+"</h4>");
out.print("<h4> Principles of Management : " + rs.getString(6)+"</h4>");
}
else
{
out.println("<h1>Invalid Register Number</h1>");
} }
catch(Exception e)
{
out.println("<h1>"+qr+"<br>"+e+"</h1>");
}
finally
{
out.println("</body>");
out.println("</html>");
out.close();
}
}
}

24
OUTPUT:

Client

Server

25
Client

Server

RESULT:
Thus to convert the static WebPages into dynamic WebPages using servlets has been
developed, executed and verified successfully.

26
Ex.No: 7 CREATE JAVA SERVLET PROGRAM & INVOKE SERVLETS FROM
HTML FORMS
Date:

Servlet:
Servlets are simple java programs that run on the servers. Hence it is called as servlet. Servlet
make use of java extension classes in the packages javax.servlet and javax.servlet.http.

The following are the basic steps of using servlets:


 The client makes a request
 The web server forwards the request to the servlet after receiving it from the client
 After receiving the request servlet process the database.
 A updated response is returned back to the web server from the servlet
 The web server will forward the response to the client

AIM:
To write java program to invoke servlets from HTML forms

ALGORITHM:
1. Create Employee form using html
2. Create java servlet program and save as classname.java
3. Compile java program.
4. Copy class file and save it in
C:\Program Files\Apache Tomcat 4.0\webapps\examples\WEB-INF\classes

PROGRAM:

Invoking Servlets from HTML Form

<html>
<head>
<title>Employee Details</title>
</head>
<body>
<center>
<form name="my" method="post" action="http://localhost:8080/examples/servlet/my">
<h2>Enter employee details in following fields</h2>
<table>
<tr>
<td><h3>Employee ID</h3></td>
<td><input type="text" name="EID" size="25" value=""></td>
</tr>
<tr>
<td><h3>Employee Name</h3></td>
<td><input type="text" name="EName" size="25" value=""></td>
</tr>
<tr>
<td><h3>Employee Address</h3></td>

27
<td><textarea rows="2" cols="20" name="EAddress"></textarea></td>
</tr>
<tr>
<td><h3>Phone</h3></td>
<td><input type="text" name="Phone" size="25" value=""></td>
</tr>
<tr>
<td><h3>Salary</h3></td>
<td><input type="text" name="ESal" size="25" value=""></td>
</tr>
</table>
<input type="submit"value="submit">
</form>
</center>
</body>
</html>

Invoking Servlets

import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class my extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)
throws ServletException,IOException
{
PrintWriter out=res.getWriter();
Enumeration en=req.getParameterNames();
while(en.hasMoreElements())
{
String name_received=(String)en.nextElement();
out.print(name_received+"=");
String value_received=req.getParameter(name_received);
out.println(value_received);
out.println("");
}
out.close();
}
}

OUTPUT

Compile The Program:

C:\Documents and Settings\IT>cd\

28
C:\>cd C:\Program Files\Java\jdk1.6.0\bin

C:\Program Files\Java\jdk1.6.0\bin>javac my.java

Then follow the step to run


Step 1: Open Web Browser
Step 2: Enter http://localhost:8080
Step 3: Open employee details form
Step 4: Give input then click submit.
Step 5: It get submitted in server by invoking Servlets from HTML Forms

RESULT
Thus a java program has been written to invoke Servlet from HTML form.

29
Ex.No: 8 SESSION TRACKING USING HIDDEN FORM FIELDS AND TRACKING
FOR A HIT COUNT
Date:

AIM:
To write a program Session Tracking Using Hidden Form Fields and Tracking for a Hit Count
PROCEDURE:
STEP 1: Start the Program
STEP 2: Develop a Servlet application for Session tracking using Hidden Filed
STEP 3: Develop a Servlet application for Session tracking Hit Count Process.
STEP4: Stop the Program

PROGRAM:
hidden form fields
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ShoppingCartViewerHidden extends HttpServlet {
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
out.println("<HEAD><TITLE>Current Shopping Cart Items</TITLE></HEAD>");
out.println("<BODY>");
// Cart items are passed in as the item parameter.
String[] items = req.getParameterValues("item");
// Print the current cart items.
out.println("You currently have the following items in your cart:<BR>");
if (items == null) {
out.println("<B>None</B>");
}
else {
out.println("<UL>");
for (int i = 0; i < items.length; i++) {
out.println("<LI>" + items[i]);
}
out.println("</UL>");
}
// Ask if the user wants to add more items or check out.
// Include the current items as hidden fields so they'll be passed on.
out.println("<FORM METHOD=GET>"); // submit to self
if (items != null) {
for (int i = 0; i < items.length; i++) {
out.println("<INPUT TYPE=HIDDEN NAME=item VALUE=\"" +
items[i] + "\">"); }

30
}
out.println("Would you like to<BR>");
out.println("<INPUT TYPE=SUBMIT VALUE=\" Add More Items \">");
out.println("<INPUT TYPE=SUBMIT VALUE=\" Check Out \">");
out.println("</FORM>");
out.println("</BODY></HTML>");
}
}
OUTPUT

Tracking for a Hit Count


import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class SessionTracker extends HttpServlet {

public void doGet(HttpServletRequest req, HttpServletResponse res)


throws ServletException, IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();

// Get the current session object, create one if necessary


HttpSession session = req.getSession();
// Increment the hit count for this page. The value is saved
// in this client's session under the name "tracker.count".
Integer count = (Integer)session.getAttribute("tracker.count");
if (count == null)

31
count = new Integer(1);
else
count = new Integer(count.intValue() + 1);
session.setAttribute("tracker.count", count);
out.println("<HTML><HEAD><TITLE>SessionTracker</TITLE></HEAD>");
out.println("<BODY><H1>Session Tracking Demo</H1>");
// Display the hit count for this page
out.println("You've visited this page " + count +
((count.intValue() == 1) ? " time." : " times."));
out.println("<P>");
out.println("<H2>Here is your session data:</H2>");
Enumeration enum = session.getAttributeNames();
while (enum.hasMoreElements()) {
String name = (String) enum.nextElement();
out.println(name + ": " + session.getAttribute(name) + "<BR>");
}
out.println("</BODY></HTML>");
}
}

OUTPUT:

RESULT
Thus a java servlet program has been written and executed successfully.

32
Ex.No: 9 CREATE THREE-TIER APPLICATIONS USING
JSP AND DATABASE
Date:

JSP:
JSP provide excellent server side scripting support for creating database driven web
applications.
Java Server Pages (JSP) technology is the Java platform technology for delivering dynamic content
to web clients in a portable, secure and well-defined way.JPS pages are high level extension of
servlet and it enables the developers to embed java code in html pages. JSP files are finally
compiled into a servlet by the JSP engine. Compiled servlet is used by the engine to serve the
request.

AIM:
To create three-tier application using JSP and databases.
i) for conducting on-line examination.
ii) for displaying student mark list.

ALGORITHM

Step 1: Create a HTML program in which some questions are displayed. The user can select
the appropriate answer for each question and then user has to click the submit
button in order to submit these answers to the web server.
Step 2: Create a JSP which gets invoked when you click submit button on your HTML form.
This JSP will get all the values from the HTML form. It will compute the total marks of
that corresponding student. Then data will be sent to database.
Step 3: Create a database by specifying the field names and provide database connectivity.

Data Base Creation in Ms Access:

Step1:Open Ms Access and crate a new Blank database.

33
Step 2 : Browse the location and Save in C: and choose MS Access 2000 format

Step 3: Select Design view and delete ID colomn

Step 4: Save Table1 and Give field name

34
Step 5: Double click Table1 and give value s

Step 6: Save and Close the window. Next Step is to create database connectivity.

35
Step 7: Go to Start >Control Panel>Administrative Tools >ODBC>User DSN tab

Step 8: Give Data Source Name, Description & Select mdb file.

Step 8: Repeat same step for System DSN Tab.


Step 7: Create html file and save it in C:\Program Files\Apache
Tomcat4.0\webapps\examples\

HTML PROGRAM:

<html>
<head>
<title>Online Examination</title>
</head>
<body>
36
<p><b><center><font size="10">ONLINE EXAMINATION</font></center></b></p>
<form name="frm1" action="http://localhost:8080/examples/jsp/disp.jsp">
&nbsp&nbsp<font size="5"> Seat number:<input type="text" name="tb1" size="10" />
Name:<input type="text" name="tb2" size="10" align="right" /><br/><br/><br/>
</font><font size="4">
1.Which of these is a looping statement?<br/>
<input type="radio" name="r1" value="0"/>Switch
&nbsp&nbsp&nbsp <input type="radio" name="r1" value="0"/>If-else
&nbsp&nbsp&nbsp <input type="radio" name="r1" value="2"/>Do-while
&nbsp&nbsp&nbsp <input type="radio" name="r1" value="0"/>Try<br/><br/>
2.Is java implementing OOPS?<br/>
<input type="radio" name="r2" value="2"/>Yes
&nbsp&nbsp&nbsp<input type="radio" name="r2" value="0"/>No<br/><br/>
3.What is HTTP?<br/>
<input type="radio" name="r3" value="0"/>HTML Tag
&nbsp&nbsp&nbsp <input type="radio" name="r3" value="2"/>Protocol
&nbsp&nbsp&nbsp <input type="radio" name="r3" value="0"/>Class
&nbsp&nbsp&nbsp <input type="radio" name="r3" value="0"/>None Of The
Above<br/><br/>
4.Which of the following is wrong?<br/>
<input type="radio" name="r4" value="0"/>int x=10;
&nbsp&nbsp&nbsp <input type="radio" name="r4" value="0"/>int a[]={2,3};
&nbsp&nbsp&nbsp <input type="radio" name="r4" value="2"/>Strin s="test";
&nbsp&nbsp&nbsp <input type="radio" name="r4" value="0"/>All Of The Above<br/><br/>
5.What is the abbreviation of OS?<br/>
<input type="radio" name="r5" value="0"/>Operator Searching
&nbsp&nbsp&nbsp <input type="radio" name="r5" value="0"/>Operation Solving
&nbsp&nbsp&nbsp <input type="radio" name="r5" value="0"/>Ontological Solving
&nbsp&nbsp&nbsp <input type="radio" name="r5" value="2"/>Operating
Systems<br/><br/>
</font>
<center><input type="submit" value="submit"/></center>
</form>
</body>
</html>

JSP PROGRAM (disp.jsp)

<%@ page import="java.sql.*"%>


<html>
<head>
<title>Marks</title>
</head>
<body>
<center><p><font size="10">Thank You For Participating In Online
Exam</font></p></center>
<p><font size="5">Your Results Are Stored In Database</font></p>
<table border="3">
<tr>

37
<th>Seat_no</th>
<th>Name</th>
<th>Marks</th>
</tr>
<%try
{
int m1=Integer.parseInt(request.getParameter("r1"));
int m2=Integer.parseInt(request.getParameter("r2"));
int m3=Integer.parseInt(request.getParameter("r3"));
int m4=Integer.parseInt(request.getParameter("r4"));
int m5=Integer.parseInt(request.getParameter("r5"));
String s1=request.getParameter("tb1");
String s2=request.getParameter("tb2");
int marks=m1+m2+m3+m4+m5;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:mydsn","","");
Statement st=con.createStatement();
st.executeUpdate("insert into Table1(Seatno,Sname,Mark)"+"values('"+ s1 +"','"+ s2 +"','"+
marks +"')");
ResultSet rs=st.executeQuery("select * from Table1");
while(rs.next())
{
%>
<tr>
<td><%=rs.getString(1)%></td>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
</tr>
<%
}
st.close();
con.close();
}
catch(SQLException e){}
%>
</body>
</html>

38
OUTPUT

39
Updated in Database

RESULT
Thus three tier applications were created using JSP and databases to display online
examination mark

40
Ex.No: 10
CREATE AN XML DOCUMENT WHICH CONTAINS 10 USERS INFORMATION.
Date:

AIM:
Write a XML document, which contains 10 users information. Write a program, which takes User
Id as an input and returns the user details by taking the user information from the XML document.

DESCRIPTION:
XML, or Extensible Markup Language, is a markup language that you can use to create
your own tags. It was created by the World Wide Web Consortium (W3C) to overcome the
limitations of HTML, the Hypertext Markup Language that is the basis for all Web pages. Like HTML,
XML is based on SGML -- Standard Generalized Markup Language. Although SGML has been used in
the publishing industry for decades, its perceived complexity intimidated many people that
otherwise might have used it (SGML also stands for "Sounds great, maybe later"). XML was designed
with the Web in mind.

PROGRAM:
student.dtd:
<!ELEMENT student(rollnum,name,parntname,branch,year,addr,email,phno)>
<!ELEMENT roll_no(#PCDATA)>
<!ELEMENT name(first_name,last_name)>
<!ELEMENT first_name(#PCDATA)>
<!ELEMENT last_name(#PCDATA)>
<!ELEMENT father_name(fname,mname,lname)>
<!ELEMENT first_name(#PCDATA)>
<!ELEMENT last_name(#PCDATA)>
<!ELEMENT branch(#PCDATA)>
<!ELEMENT year(#PCDATA)>
<!ELEMENT address(door_no,street,city)>
<!ELEMENT door_no(#PCDATA)>
<!ELEMENT street(#PCDATA)>
<!ELEMENT city(#PCDATA)>
<!ELEMENT email(#PCDATA)>
<!ELEMENT phno(#PCDATA)>
student.xsd:
<xs:schema>
<xs:element name="student">
<xs:complextype>
<xs:sequence>
<xs:element name="roll_no" type="xs:string"/>
<xs:element name="name">
<xs:complextype>
<xs:sequence>
<xs:element name="first_name" type="xs:string"/>
<xs:element name="last_name" type="xs:string"/>

41
</xs:sequence>
</xs:complextype>
</xs:element>
<xs:element name="father-name">
<xs:complextype>
<xs:sequence>
<xs:element name="first_name" type="xs:string"/>
<xs:element name="last_name" type="xs:string"/>
</xs:sequence>
</xs:complextype>
</xs:element>
<xs:element name="branch" type="xs:string"/>
<xs:element name="year" type="xs:integer"/>
<xs:element name="addr">
<xs:complextype>
<xs:sequence>
<xs:element name="door-no" type="xs:string"/>
<xs:element name="street" type="xs:string"/>
<xs:element name="city" type="xs:string"/>
</xs:sequence>
</xs:complextype>
</xs:element>
<xs:element name="email" type="xs:string"/>
<xs:element name="phno" type="xs:integer"/>
</xs:sequence>
</xs:complextype>
</xs:element>
</xs:schema>
student.xml:
<?xml version="1.0" ?>
- <student xmlns:xsi="xmlschema-instance"
xsi:SchemaLocation="student.xsd">
<roll_no>08A01D2501</roll_no>
- <name>
<first_name>A</first_name>
<Last_name>Aruna</Last_name>
</name>
- <father_name>
<first_name>Venkateswara</first_name>
<Last_name>Rao</Last_name>
</father_name>
<branch>computer engineering</branch>
<year>1ST Year</year>
- <address>
<door-no>32-15/1-44</door-no>
<street>B.R.Nagar-1</street>
<city>Gurgaon</city>
</address>
<email>[email protected]</email>

42
<phno>9949643372</phno>
<roll_no>08A01D2501</roll_no>
- <name>
<first_name>Prathap</first_name>
<Last_name>Rudra</Last_name>
</name>
- <father_name>
<first_name>Venkateswara </first_name>
<Last_name>B</Last_name>
</father_name>
<branch> computer engineering (mtech) </branch>
<year>1st Year</year>
- <address>
<door-no>door no 603/n</door-no>
<street>Recoloney</street>
<city>Delhi</city>
</address>
<email>[email protected]</email>
<phno>9866145423</phno>
<roll_no>08A01D2503</roll_no>
- <name>
<first_name>Ramesh</first_name>
<Last_name>Kumar</Last_name>
</name>
- <father_name>
<first_name>Venkateswara</first_name>
<Last_name>Rao</Last_name>
</father_name>
<branch> computer engineering(mtech) </branch>
<year>1st Year</year>
- <address>
<door-no>32-15/1-44</door-no>
<street>B.R.Nagar-1</street>
<city>Gurgaon</city>
</address>
<email>[email protected]</email>
<phno>9985150379</phno>
<roll_no>08A01D2504</roll_no>
- <name>
<first_name>kishore</first_name>
<Last_name>Galla</Last_name>
</name>
- <father_name>
<first_name>Venkateswara</first_name>
<Last_name>Rao</Last_name>
</father_name>
<branch> Computer engineering (mtech) </branch>
<year>1st Year</year>
- <address>

43
<door-no>32-15/1-44</door-no>
<street>B.R.Nagar-1</street>
<city>Gurgaon</city>
</address>
<email>[email protected]</email>
<phno>990837394</phno>
<roll_no>08A01D2505</roll_no>
- <name>
<first_name>Madhu</first_name>
<Last_name>Garlapati</Last_name>
</name>
- <father_name>
<first_name>Venkateswara</first_name>
<Last_name>Rao</Last_name>
</father_name>
<branch> commputer engineering (mtech) </branch>
<year>1st Year</year>
- <address>
<door-no>32-15/1-44</door-no>
<street>B.R.Nagar-1</street>
<city>Gurgaon</city>
</address>
<email>[email protected]</email>
<phno>9908005778</phno>
</student>
Usevalidation.Html

<html>
<head>
<title>Login Form</title>
</head>
<body leftmargin=75 topmargin=75 bgcolor=white>
<form method=Get action="http:127.0.0.1:8080\validation">
UserName&nbsp;&nbsp;<input type=text name=user>
<br><br>
Password&nbsp;&nbsp;<input type=password name=pass>
<br><br>
<input type=submit value=submit>&nbsp;&nbsp;&nbsp;
<input type=reset name=cancel>
</form>
</body>
</html>

44
OUTPUT:

RESULT:
Thus a XML document with 10 user’s has been written and executed successfully.

45

You might also like