WT Record

REG NO :710118205004
EX. NO :1
HTML
DATE :
HTML TEXT
1. Design a Web Page as given below.
TAGS USED
html - <h1> Syntax - <h3>
body color – thistle; blockquote font – Georgia, size – 4, color – blue; title – HTML
TEXT
Other tags
<blockquote>, <pre>, <address>, <sup>, <ins>, <del>, <b>, <i>, <hr>, <p>, <abbr>,
<bdo>
SOURCE CODE
IT8511 – WEB PROGRAMMING LABORATORY

REG NO :710118205004
<!DOCTYPE html>
<html>
<head><title>HTML TEXT</title></head>
<body bgcolor="thistle">
<center>
<h1>
<abbr title="HyperText Markup Language">HTML</abbr>
</h1>
</center>
<center>
<h1>
<bdo dir="rtl">
<abbr title="HyperText Markup Language">HTML</abbr>
</bdo>
</h1>
</center> <br/>
<font face="Georgia" size="4" color="blue"><i><blockquote>"Our life is
frittered away by detail... Simplify, simplify."</blockquote></i></font>
<pre> - Henry David Thoreau</pre>
<hr width="100%"/>
<b>HTML</b> stands for <i>HyperText Markup Language</i>. <br/>

<b>HyperText</b> is text which contains links to other texts. <br/>
The term was coined by <b>Ted Nelson around <del>1964</del>
<ins>1965</ins></b>. <br/>
<h3>Syntax</h3>
<pre>
<html>
<head>
<title>.....</title>
</head>
<body>
......
</body>
</html>
</pre>
<address>
Web page develop by Rupilaa V M <sup>©</sup>
</address>
</body>

REG NO :710118205004
</html>
OUTPUT
HTML LINKS

REG NO :710118205004
2. Design a Web Page as given below.
TAGS USED
Link.html
<a>
Bigdata.html
<b>, <em>, <pre>
Semanticweb.html
<b>, <abbr>, <pre>
SOURCE CODE
Link.html

REG NO :710118205004
<!DOCTYPE html>
<html>
<head><title>HTML LINKS</title></head>
<body>
<a href="Bigdata.html" target="_blank"
title="BIGDATA">BIGDATA</a> <br/>
<a href="SemanticWeb.html" target=_blank" title="SEMANTIC
WEB">SEMANTIC WEB</a>
</body>
</html>
Bigdata.html
<!DOCTYPE html>
<html>
<head><title>BIG DATA</title></head>
<body>
<b>Big Data</b> is defined as any kind of data source that has at least three
shared characteristics:
<pre>
Extremely large <em>Volumes</em> of data
Extremely high <em>Velocity</em> of data
Extremely wide <em>Variety</em> of data
</pre>
</body>
</html>
Semanticweb.html
<!DOCTYPE html>
<html>
<head><title>SEMANTIC WEB</title></head>
<body>
The term <b>Semantic Web</b> comprises techniques that promise to
dramatically improve the current <abbr title="World Wide
Web">WWW</abbr> and its use.
<pre>
The Semantic Web is an initiative that aims at improving the current state
of the World Wide Web.
The key idea is the use of machine-processable Web information.
Key technologies include explicit metadata, ontologies, logic and
inferencing, and intelligent agents.

REG NO :710118205004
The development of the Semantic Web proceeds in layers.

</pre>
</body>
</html>
OUTPUT
3. Design a Web page which links to the same page as below.

REG NO :710118205004
TAGS USED
<a>, <h1>, <h2>, <pre>, <b>
SOURCE CODE
<!DOCTYPE html>
<html>
<head><title>LINKING WITHIN SAME PAGE</title></head>
<body>
<center>
<h1>IT6503 WEB PROGRAMMING</h1>
</center>
<a id="back"><h2>CONTENTS</h2></a>
<pre>
<a href="#1">UNIT 1 - SCRIPTING</a>
<a href="#2">UNIT 2 - JAVA</a>
<a href="#3">UNIT 3 - JDBC</a>
<a href="#4">UNIT 4 - APPLETS</a>
<a href="#5">UNIT 5 - XML AND WEB SERVICES</a>
</pre>

REG NO :710118205004
<a id="1"><b> 1. SCRIPTING</b></a><br/>

Web page Designing using HTML<br/>
Scripting basics - Client side and server side scripting<br/>
Java Script - Object, names, literals, operators and expressions<br/>
Java Script - statements and features<br/>
Java Script - events, windows, documents, frames, data types, built-
in functions<br/>
Java Script - Browser object model - Verifying forms<br/>
HTML 5<br/>
CSS3<br/>
HTML5 Canvas<br/>
Web site creation using tools<br/>
<a href="#back">BACK TO CONTENTS</a><br/><br/>
<a id="2"><b>2. JAVA</b></a><br/>
Introduction to object oriented programming<br/>
Features of Java<br/>
Data types, variables and arrays<br/>
Operators<br/>
Control statements<br/>
Classes and Methods <br/>
Inheritance<br/>
Packages and Interfaces<br/>
Exception Handling<br/>
Multithreaded Programming<br/>
Input/Output<br/>
Files<br/>
Utility Classes<br/>
String Handling<br/>
<a id="3"><b>3. JDBC</b></a><br/>
JDBC Overview<br/>
JDBC implementation <br/>
Connection class <br/>
Statements <br/>
Catching Database Results, handling database Queries<br/>
Networking<br/>
InetAddress class <br/>
URL class<br/>
TCP sockets <br/>
UDP sockets<br/>
Java Beans <br/>
RMI<br/>

REG NO :710118205004
<a id="4"><b>4. APPLETS</b></a><br/>

Java applets<br/>
Life cycle of an applet <br/>
Adding images to an applet <br/>
Adding sound to an applet<br/>
Passing parameters to an applet<br/>
Event Handling<br/>
Introducing AWT: Working with Windows Graphics and Text<br/>
Using AWT Controls, Layout Managers and Menus<br/>
Servlet – life cycle of a servlet<br/>
The Servlet API, Handling HTTP Request and Response, using
Cookies, Session Tracking<br/>
Introduction to JSP<br/>
<a id="5"><b>5. XML AND WEB SERVICES</b></a><br/>
Xml - Introduction-Form Navigation <br/>
XML Documents<br/>
XSL <br/>
XSLT<br/>
Web services-UDDI-WSDL-Java web services <br/>
Web resources<br/>
</body>
</html>
OUTPUT
HTML IMAGES
4. Embed a picture on a Web page and give suitable title.

REG NO :710118205004
TAGS USED
<figure>, <figcaption>
Image – VioletRose.jpg
OUTPUT
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>IMAGES</title>

REG NO :710118205004
</head>
<body>
<figure>
<center>
<img src="VioletRose.jpg" alt="ROSE FLOWER" border="2">
<figcaption><h2>ROSE</h2></figcaption>
</center>
</figure>
</body>
</html>
OUTPUT
HTML IMAGE MAP

5. Embed an image map picture (TamilNadu Map) on a Web page that provides
links to other Web pages (different states) and show all the related information
depending on where a user clicks on the image.

REG NO :710118205004
TAGS USED - <map>, <area>, <img>

Map
SOURCE CODE
IMAGEMAP.HTML
<!DOCTYPE html>
<html>
<head>
<title>TAMILNADU MAP</title>
</head>
<body>
<map id="TamilNadu" name="TamilNadu">
<area shape="circle" coords="58,210,5" href="Coimbatore.html"
target="_blank">
<area shape="rect" coords="120,280,140,300"
href="Madurai.html" target="_blank">
<area shape="poly" coords="80,360,100,380,120,390"
href="Tirunelveli.html" target="_blank">
</map>
<img src="TamilNadu.png" alt="TamilNadu Map" border="2"
usemap="#TamilNadu">
</body>
</html>
COIMBATORE.HTML
<!DOCTYPE html>
<html>
<head>
<title>COIMBATORE</title>
</head>

REG NO :710118205004
<body>
<h3>COIMBATORE - MANCHESTER OF INDIA</h3>
<pre>
COUNTRY : INDIA
STATE : TAMILNADU
COLLECTOR : ARCHANA PATNAIK IAS
FAMOUS TEMPLE : MARUDAMALAI, PERUR PATEESWARAR
</pre>
</body>
</html>
MADURAI.HTML
<!DOCTYPE html>
<html>
<head>
<title>MADURAI</title>
</head>
<body>
<h3>MADURAI</h3>
<pre>
COUNTRY : INDIA
STATE : TAMILNADU
FAMOUS TEMPLE : MEENAKSHI AMMAN TEMPLE
RIVER : VAIGAI
</pre>
</body>
</html>
TIRUNELVELI.HTML
<!DOCTYPE html>
<html>
<head>
<title>TIRUNELVELI</title>
</head>
<body>
<h3>TIRUNELVELI</h3>
<pre>
COUNTRY : INDIA
STATE : TAMILNADU
DISTRICT FORMED ON : 1 SEPTEMBER 1790
COLLECTOR : M.KARUNAKARAN IAS
FAMOUS TEMPLE : NELLAIAPPAR TEMPLE
RIVER : TAMBARAPARANI

REG NO :710118205004
</pre>
</body>
</html>
OUTPUT
IMAGEMAP.HTML
COIMBATORE.HTML

REG NO :710118205004
MADURAI.HTML
TIRUNELVELI.HTML
HTML LISTS
6. Create and test a Web document that describes unordered list, ordered list

REG NO :710118205004
and definition list.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>LISTS</title>
</head>
<body>
<h3>UNORDERED LISTS</h3>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
<li>RMI</li>
</ul>
<h3>ORDERED LISTS</h3>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
<li>RMI</li>
</ol>
<h3>DEFINITION LISTS</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheeet</dd>
<dt>ASP</dt>
<dd>Active Server Pages</dd>
<dt>PHP</dt>
<dd>Hypertext PreProcessor</dd>
<dt>JSP</dt>
<dd>Java Server Pages</dd>
<dt>RMI</dt>
<dd>Remote Method Invocation</dd>
</dl>

REG NO :710118205004
</body>
</html>
OUTPUT
HTML FORMS
7. Design a Web Page using Forms
SOURCE CODE

REG NO :710118205004
<!DOCTYPE html>
<html>
<head>
<title>HTML FORMS</title>
</head>
<body bgcolor="thistle">
<form name="MyForm">
<fieldset>
<legend><font color="blue"><h2>PERSONAL
DETAILS</h2></font></legend>
<label><font color="magenta"><h4>FILL YOUR PERSONAL
DETAILS</h4></font></label>
Name
<input type="text" name="name" required /> <br/> <br/>

Password

<input type="password" name="pass"> <br/> <br/>
Address
           &nbs
p;
<textarea name="address" rows="2" cols="30">
</textarea> <br/>
Date of Birth

<input type="date" name="dob"> <br/>
Gender
           &nbs
p;
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female <br/>
Mobile Number
<input type="number" name="mob"> <br/> <br/>
Email Id
           &nbs
p;
<input type="email" name="email"> <br/>

REG NO :710118205004
</fieldset>
<fieldset>
<legend><font color="blue"><h2>FAVOURITE
SPOT</h2></font></legend>
<label> <font color="magenta"><h4>FILL YOUR FAVOURITE
DETAILS</h4></font></label>
Pick Your Favourite Color
           &nbs
p;
<input type="color" name="color"> <br/>
Pick Your Favourite Number <br/>
[1-100 Step 5]
           &nbs
p;
           &nbs
p;
<input type="range" max="100" min="1" step="5"> <br/>
Mention Your Favourite URL

<input type = "url" name="url"> <br/>
Choose Your Favourite Newspaper
<input type="checkbox" name="news">THE HINDU
<input type="checkbox" name="news">TIMES <br/>
           &nbs
p;
           &nbs
p;
           &nbs
p;

<input type="checkbox" name="news">DINAMALAR

REG NO :710118205004
<input type="checkbox" name="news">DINATHANTHI

<br/>
Choose Your Favourite Browser

<select name="browser">
<option>Chrome</option>
<option>Firefox</option>
<option>Explorer</option>
<option>Safari</option>
</select> <br/><br/>
Choose Your Resume(.doc)

<input type="file" value="resume">
<input type="submit" value="UPLOAD"></br>
</fieldset>
<center><input type="reset" value="RESET">

<input type="submit" value="SUBMIT"></center>
</form>
</body>
</html>
OUTPUT

REG NO :710118205004
HTML TABLES
8. Design a table as given below.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML TABLES</title>
</head>
<body>
<table border="2" cellpadding="2" cellspacing="2" bordercolor="red">
<caption align="center"><font
color="blue"><h3>SUBJECT</h3></font></caption>

REG NO :710118205004
<tr>
<th>Name</th>
<th>Favourite Subject</th>
</tr>
<tr>
<td rowspan="2">Rupilaa</td>
<td>Web Programming</td>
</tr>
<tr>
<td>Internet Programming</td>
</tr>
</body>
</html>
OUTPUT
9. Design a table as given below.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML TABLES</title>
</head>
<body>
<table border="2" cellpadding="2" cellspacing="2" bordercolor="red">
<caption align="center"><font
color="blue"><h3>MARKS</h3></font></caption>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Subject</th>
</tr>
<tr>
<th>Internet Programming</th>

REG NO :710118205004
<th>Web Programming</th>
</tr>
<tr>
<td>Rupilaa</td>
<td align="center">95</td>
<td align="center">98</td>
</tr>
</body>
</html>
OUTPUT
HTML FRAMES
10.Design a Web Page as shown below.
Image
Big.jpeg

REG NO :710118205004
Semantic.png
SOURCE CODE
Frame.html
<!DOCTYPE html>
<html>
<frameset cols="20%,*">
<frame src="Link.html" name="menu">
<frame src="Display.html" name="content">
</frameset>
</html>
Link.html
<!DOCTYPE html>
<html>
<head><title>HTML LINKS</title></head>
<body>
<a href="Bigdata.html" target="content"
title="BIGDATA">BIGDATA</a> <br/>
<a href="SemanticWeb.html" target="content" title="SEMANTIC

WEB">SEMANTIC WEB</a>
</body>
</html>
Bigdata.html

REG NO :710118205004
<!DOCTYPE html>
<html>
<head><title>BIG DATA</title></head>
<body>
<b>Big Data</b> is defined as any kind of data source that has at least three
shared characteristics:
<pre>
Extremely large <em>Volumes</em> of data
Extremely high <em>Velocity</em> of data
Extremely wide <em>Variety</em> of data
</pre> <br/>
<img src="Big.jpeg"/>
</body>
</html>
Semanticweb.html
<!DOCTYPE html>
<html>
<head><title>SEMANTIC WEB</title></head>
<body>
The term <b>Semantic Web</b> comprises techniques that promise to
dramatically improve the current <abbr title="World Wide Web">WWW</abbr> and
its use.
<pre>
The Semantic Web is an initiative that aims at improving the current state
of the World Wide Web.
The key idea is the use of machine-processable Web information.
Key technologies include explicit metadata, ontologies, logic and
inferencing, and intelligent agents.
The development of the Semantic Web proceeds in layers.
</pre> <br/>
<img src="Semantic.png"/>
</body>
</html>
OUTPUT

REG NO :710118205004
11. Design a Web Page as shown below.
Image
Eightball.gif Floatingball.gif Redball.gif

Use width = 130; height = 198
SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<iframe src="eightball.gif" frameborder="0" name="ball" width="130"
height="198"> </iframe> <br/>

REG NO :710118205004
<a href="eightball.gif" target="ball">EightBall</a> <br/>

<a href="floatingball.gif" target="ball">FloatingBall</a> <br/>
<a href="redball.gif" target="ball">RedBall</a> <br/>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, the above web pages are created using HTML.
EX. NO : 2
CSS
DATE :
1. Create and test a web document that describes nested ordered lists of cars.
The outer list is of style {-webkit-column-count:2; margin:25px; background-
color:tan; list-style: upper-roman inside; color:purple; font-size:20px; } and
must have three entries, namely compact, midsize and sports. Inside each of
these three lists there must be two sub-lists of style {color:blue; font-size:18px;
list-style:lower-roman inside;}. The compact and midsize car sub-lists are two
doors and four doors; the sports car sub-lists are coupe and convertible. Each
sub-list must have at least two entries of style {color:red; font-size: 16px; font-
weight:bold;}, each of which is the model of a particular car that fits the
category. Add a title CARS AND ITS CLASSIFICATION of style {-webkit-
border-radius:10px; background-color:palegreen; width:600px; color:blue;
font-style:bolder; text-align:center; border:3px outset maroon;}. Use internal
style sheet.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:wheat; margin:100px; padding:10px;

REG NO :710118205004
width:200px;
border:3px ridge maroon; width:700px;}
h1 {-webkit-border-radius:10px; background-color:palegreen;
width:600px;
color:blue; font-style:bolder; text-align:center; border:3px outset
maroon;}
.list1 {-webkit-column-count:2; margin:25px; background-color:tan;
list-style: upper-roman inside; color:purple; font-size:20px; }
.list2 {color:blue; font-size:18px; list-style:lower-roman inside;}
.list3 {color:red; font-size: 16px; font-weight:bold;}
</style>
</head>
<body>
<center><h1>CARS AND ITS CLASSIFICATION</h1></center>
<ol class="list1">
<li>Compact</li>
<ol class="list2">
<li>Two Doors</li>
<ol class="list3">
<li>BMW</li>
<li>Ford</li>
</ol>
<li>Four Doors</li>
<ol class="list3">
<li>Jaguar</li>
<li>Chevrolet</li>
</ol>
</ol>
<li>Midsize</li>
<ol class="list2">
<li>Two Doors</li>
<ol class="list3">
<li>Cadillac</li>
<li>Audi ATS</li>
</ol>
<li>Four Doors</li>
<ol class="list3">
<li>Sedan</li>
<li>Nissan</li>
</ol>
</ol>
<li>Sports</li>
<ol class="list2">

REG NO :710118205004
<li>Coupe</li>
<ol class="list3">
<li>Alpina</li>
<li>Porsche</li>
</ol>
<li>Convertible</li>
<ol class="list3">
<li>Mercedes</li>
<li>Audi RS 7</li>
</ol>
</ol>
</ol>
</body>
</html>
OUTPUT

REG NO :710118205004
2. Add an external style sheet to the html document that represents hotel menu
items.
SOURCE CODE
Menu.css
body {margin:25px;
border:2px solid midnightblue;
height:600px; background-color:tan;}
h1 {height:40px; width:400px;
vertical-align:middle; font-weight:bolder;
-webkit-border-radius:15px;
color:white; background-color:blue;
font-face:TimesNewRoman;
text-align:center;}
.first {background-color:yellow;
height:25px; width:75px;
text-align:center; margin-left:120px;
vertical-align:middle; font-style:italic;
color:blue; border:2px solid aqua;
-webkit-border-top-left-radius:15px;

REG NO :710118205004
-webkit-border-bottom-right-radius:15px;}
.burg {background-color:yellow;
.snack {background-color:yellow;
.starter {background-color:yellow;
.last {background-color:yellow;

REG NO :710118205004
ul {-webkit-column-count:4; list-style:none;
-webkit-column-rule:2px solid white;
background-color:wheat;}
.style1 {font-face:Georgia; font-size:20px;
color:white; margin-left:5px; margin-right:5px;
background-color:maroon;}
.style2 {font-face:Georgia; font-size:20px;
color:white; margin-left:5px; margin-right:5px;
background-color:purple;
Menu.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Menu.css">
</head>
<body>
<center><h1>NON-VEGE MENU</h1></center>
<ul><div class="style1">
<h3 class="first">SOUPS</h3>
Tomato Soup
50 <br/>
Vegetable Soup 60
<br/>
Chicken Soup
   60 <br/>
Chicken Corn Soup 80 <br/>
<h3 class="burg">BURGERS</h3>
Aloo Veg Burger 30 <br/>
Paneer Tikka Burger 50 <br/>
Chicken Tikka Burger 60 <br/>
<h3 class="snack">SNACKS</h3>
Paneer Tikka
120 <br/>
Pudhina Tikka 120
<br/>
Chicken Tikka 150
<br/>

REG NO :710118205004
Mutton kabab 160

<br/>
</div>
<div class="style2">
<h3 class="snack">BREADS</h3>
Tandoori Roti
   8 <br/>
Butter Roti
  10 <br/>
Missi Roti
15 <br/>
Aloo Naan
25 <br/>
<h3 class="burg">NOODLES</h3>
Veg Noodle
100 <br/>
Hakka Noodle 110
<br/>
Chicken Noodle 120 <br/>
Prawn Noodle 150
<br/>
<h3 class="first">DOSAS</h3>
Plain Dosa
100 <br/>
Masala Dosa
85<br/>
Butter Dosa
95 <br/>
Paneer Dosa
125 <br/>
</div>
<h3 class="burg">BRIYANI</h3>
Veg Briyani
     100 <br/>
Egg Briyani
        130 <br/>
Mushroom Briyani 130 <br/>
Chicken Briyani   140 <br/>
Mutton Briyani    140
<br/>
Fish Briyani
        140 <br/>

REG NO :710118205004
Prawn Briyani

     140 <br/>
<h3 class="starter">STARTERS</h3>
Masala Pappad 30
<br/>
Finger Chips
70 <br/>
<h3 class="snack">SWEETS</h3>
Rasmalai
      80 <br/>
Basundi
      80 <br/>
Gulab Jamun
80 <br/>
Carrot Custard
   80 <br/>
</div>
<h3 class="last">RICE</h3>
Plain Rice
50 <br/>
Masala Rice
  60 <br/>
Jeera Rice
   90 <br/>
Ghee Rice
90 <br/>
Curd Rice
   80 <br/>
Veg Pulav
   120 <br/>
<h3 class="last">CURRY</h3>
Dal Tadka
   85 <br/>
Palak Paneer
   130 <br/>
Malai Kofta
   130 <br/>
Mix Veg
     120 <br/>
Jeera Aloo
90 <br/>
Butter Chicken

REG NO :710118205004
        210 <br/>
Chicken Kurma
       210 <br/>
Khadai Chicken     210
<br/>
Mutton Kurma
       220 <br/>
</div>
</ul>
</body>
</html>
OUTPUT

REG NO :710118205004
3. Design a table and alter that tables properties using an internal and inline CSS
file.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:plum;
margin:170px; border:4px outset green; width:270px}
table {background-color:tan; text-align:center; padding:2px;}
th {color:blue;background-color:greenyellow;font-size:25px;}
.odd {background-color:tomato; color:black; font-size:20px;
</style>
</head>
<body>
<center><table>
<tr>
<th>DOMAINS</th>
<th>TOOLS</th>
</tr>
<tr class="odd">
<td rowspan="3">Wireless Networks</td>
<td>Ns2</td>
</tr>
<tr class="odd">
<td>Opnet</td>
</tr>
<tr class="odd">

REG NO :710118205004
<td>Glomosim</td>
</tr>
<tr style="background-color:red; color:black; font-size:20px">
<td>Soft Computing</td>
<td>Matlab</td>
</tr>
<tr class="odd">
<td>Semantic Web</td>
<td>Protege</td>
</tr>
<td>Data Mining</td>
<td>Orange</td>
</tr>
<tr class="odd">
<td rowspan="3">Database</td>
<td>Oracle</td>
</tr>
<tr class="odd">
<td>MySQL</td>
</tr>
<tr class="odd">
<td>DB2</td>
</tr>
<td>Cloud Computing</td>
<td>CloudSim</td>
</tr>
</table></center>
</body>
</html>
OUTPUT

REG NO :710118205004
4. Design a form as given below.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
REG NO :710118205004
<style>
body {background-color:chartreuse;
margin:100px; padding:2px; border:2px outset maroon;}
form {color:white; font-face:TimesNewRoman;
font-size:20px; font-weight:bold;}
#dsg1 {background-color:green; padding:4px;}
#dsg2 {background-color:olive; padding:4px;}
input[type="text"] {background-color:chartreuse; border:2px solid
purple;}
input[type="reset"]{background-color:chartreuse; border:2px solid purple;
color:blue; font-weight:bolder; font-size:23px;}
input[type="submit"] {background-color:chartreuse; border:2px solid
purple;
select {background-color:chartreuse; border:2px solid purple;
color:blue; font-weight:bolder; font-size:18px;
font-face:TimesNewRoman;}
</style>
</head>
<body>
<form>
<div id="dsg1">First Name

<input type="text" name="fname"/><br/></div>
<div id="dsg2">Last Name

<input type="text" name="lname"/><br/></div>
<div id="dsg1">Gender


<input type="radio" name="sex" value="male"/> Male<br/>


<input type="radio" name="sex" value="female"/> Female<br/></div>
<div id="dsg2">Favourite Color

<select name="color">
<option>Violet</option>

REG NO :710118205004
<option>Indigo</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Orange</option>
<option>Red</option>
<option>Rose</option>
</select></br></div>
<div id="dsg1">Favourite Newspaper

<input type="checkbox" name="news"> The Hindu<br/>


<input type="checkbox" name="news"> Times of India<br/>


<input type="checkbox" name="news"> Indian Express<br/>


<input type="checkbox" name="news"> Deccan Chronicle<br/>


<input type="checkbox" name="news"> Hindustan Times<br/></div>
<div id="dsg2">

<input type="reset" value="RESET"/>

<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>

REG NO :710118205004
OUTPUT
5. Design a web page to demonstrate CSS3 text and border effects.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
h2 {text-shadow:-5px 15px 3px green; color:blue;
text-align:center; border-radius:15px; width:600px; height:50px;
background:radial-gradient(red,yellow);
box-shadow:10px 20px 5px blue;}
</style>
</head>
<body>
<h2 align="center">I LIKE WEB PROGRAMMING</h2>
</body>
</html>
OUTPUT

REG NO :710118205004

REG NO :710118205004
RESULT
Thus, the above web pages are created using HTML and CSS.
EX. NO :3
HTML DOM & DHTML
DATE :
1. Write a HTML to demonstrate ById.

SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<center>
<h3>Demonstration for ById</h3>
<p id="demo"></p>
</center>
<script>
document.getElementById("demo").style.color="blue";
document.getElementById("demo").innerHTML = "Hello, Welcome!!!";
</script>
</body>
</html>

REG NO :710118205004
OUTPUT
2. Write a HTML to demonstrate ByTagName.

SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<center>
<h3>Demonstration for ByTagName</h3>
<p></p>
</center>
<script>
document.getElementsByTagName("p")[0].style.color = "green";
document.getElementsByTagName("p")[0].innerHTML = "Welcome!!";
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
3. Write a HTML to demonstrate ByClassName.

SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<center>
<h3>Demonstration for ByClassName</h3>
<h4 class="demo"></h4>
</center>
<script>
document.getElementsByClassName("demo")[0].style.color = "green";
document.getElementsByClassName("demo")[0].innerHTML = "Life is
beautiful";
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
4. Write a HTML to demonstrate HTML Object Collections.

SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function start()
{
var tags = " ";
for(i=0;i<document.all.length;i++)
tags += "<br/>" + document.all[i].tagName;
demo.innerHTML += tags;
}
</script>
</head>
<body onload="start()">
<center>
<h3>Demonstration for HTML Object Collections</h3>
<h4 id="demo">The elements in this document are as follows:</h4>
</center>
</body>
</html>

REG NO :710118205004
OUTPUT
5. Develop a DHTML page to change the background color using mouse over
event on three squares containing different colors.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor(color)
{
document.getElementById("demo").style.background = color;
}
</script>
</head>
<body id = "demo">
<center>
<h2 style="color:purple">MOUSE OVER TO CHANGE
BACKGROUND</h2>
<table>
<tr>
<td bgcolor="yellow" onmouseover="changeColor('yellow')"
onmouseout="changeColor('transparent')">YELLOW</td>
<td bgcolor="chartreuse"

REG NO :710118205004
onmouseover="changeColor('chartreuse')"
onmouseout="changeColor('transparent')">CHARTREUSE</td>
<td bgcolor="plum" onmouseover="changeColor('plum')"
onmouseout="changeColor('transparent')">PLUM</td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT
6. Develop a DHTML page to create an address book.

SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:purple}
body {background-color:orange;}
th {color:yellow; background-color:blue; font-size:25px;}
td {color:blue; background-color:yellow; font-size:20px;}
input[type="text"] {background-color:chartreuse; border:2px solid purple;
color:blue; font-size:25px;}
input[type="number"]{background-color:chartreuse; border:2px solid
purple; color:blue; font-size:25px;}
input[type="button"] {background-color:plum; border:2px solid
purple;
div {color:navy; font-size:25px; font-weight:bold;}
</style>
<script>
function add()
{
n = document.getElementById("name");

REG NO :710118205004
e = document.getElementById("email");
m = document.getElementById("mob");
row = document.createElement("tr");
c1 = document.createElement("td");
t1 = document.createTextNode(n.value);
t2 = document.createTextNode(e.value);
t3 = document.createTextNode(m.value);
c1.appendChild(t1);
c2.appendChild(t2);
c3.appendChild(t3);
row.appendChild(c1);
t = document.getElementById("tlb");
t.appendChild(row);
n.value = "";
e.value = "";
m.value = "";
}
</script>
</head>
<body>
<center>
<h1>ADDRESS BOOK</h1>
<table><div>
<tr> <td>Name</td> <td><input type="text" id="name"/></td>
</tr>
<tr> <td>Email Id <td><input type="text" id="email"/></td> </tr>
<tr> <td>Mobile No <td><input type="number" id="mob"/></td>
</tr>
</div></table>
<input type="button" value="ADD" onclick="add()"/><br/><br/>
<table border="2" id="tlb">
<tr>
<th>NAME</th>
<th>EMAIL ID</th>
<th>MOBILE NO</th>
</tr>
</table>
</center>
</body>

REG NO :710118205004
</html>
OUTPUT

REG NO :710118205004
7. Develop a DHTML page for element visibility.

SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function my()
{
if(document.getElementById("demo").style.visibility == "visible")
document.getElementById("demo").style.visibility = "hidden";
else
document.getElementById("demo").style.visibility = "visible";
}
</script>
</head>
<body>
<input type="button" value="SHOW/HIDE" onclick="my()"/>
<div id="demo" style="position:absolute; top:40px; left:100px;">
<img src="Chocolate.jpg">
</div>
</body>
</html>
OUTPUT

REG NO :710118205004
8. Develop a DHTML page for Event Capturing.

SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function handler_body()
{
alert("You clicked on body");
}
function handler_p()
{
alert("You clicked on p tag");
}
function register()
{
document.body.addEventListener('click', handler_body(), true);
document.getElementById("demo").addEvenListener('click', handler_p(),
true);
}
</script>
</head>
<body>
<p id="demo">I LIKE WEB PROGRAMMING</p>
<script>
register();

REG NO :710118205004
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, the above web pages are created using DHTML
EX. NO : 3A
JAVASCRIPT
DATE :
1. Create a script that asks the user for a name, then greets the user with "Hello"
and the user name on the page.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
h2 {background-color:chartreuse; color:blue; width:150px;}
</style>
</head>
<body>
<script>
var name = prompt("Enter Your Name", "");
document.write("<center><h2>Hello " + name +
"</h2></center>");
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
2. Create a script that prompts the user for a number and then counts from 1 to
that number displaying only the odd numbers.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; }
h2 {color:red; }
</style>
</head>
<body>
<script>
var n = parseInt(prompt("Enter the Limit", ""));
document.writeln("<h1>ODD NUMBERS FROM 1 TO " + n +
"</h1>");
document.write("<h2>");
for(i = 1; i <= n; i = i+2)
document.write(i + " ");
document.write("</h2>");
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
3. Write a script that reads an integer and determines and displays whether it is
an odd or even number.
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:wheat; }
h2 {color:navy;}
</style>
</head>
<body>
<script>
var n = parseInt(prompt("Enter an integer", ""));
document.writeln("<h2>You Entered " + n + "<br/>");
if (n%2 == 0)
document.write(n + " is an Even Number</h2>");
else
document.write(n + " is an Odd Number</h2>");
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
4. Write a script that calculates the squares and cubes of the numbers from 0 to
10 and display the resulting values in an HTML table as below.
Number Square Cube
0 0 0
1 1 1
2 4 8
3 9 27
4 16 64
5 25 125
6 36 216
7 49 343
8 64 512
9 81 729
10 100 1000
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightpink; }
table {text-align:center; border:2px inset magenta;}
th {background-color:maroon; color:white; font-size:20px; font-
weight:bold; }
td {background-color:lightblue; color:navy; font-size:18px;
font-

REG NO :710118205004
weight:bold; }
</style>
</head>
<body>
<table align="center">
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
<script>
for(i = 0; i <= 10; i++)

document.write("<tr><td>" + i + "</td><td>" + (i*i) +
"</td><td>"
+ (i*i*i) + "</td></tr>");
</script>
</table>
</body>
</html>
OUTPUT

REG NO :710118205004
5. Write a script that asks the user to enter two integers and displays the larger
number followed by the words “is larger” in an information message dialog. If
the numbers are equal display the message “These numbers are equal”.
SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<script>
var a = parseInt(prompt("Enter First Integer", ""));
var b = parseInt(prompt("Enter Second Integer", ""));
if (a == b)
alert("These numbers are equal");
else if (a > b)
alert(a + " is larger");
else
alert(b + " is larger");
</script>
</body>
</html>
OUTPUT

REG NO :710118205004

REG NO :710118205004
6. Write a script that inputs three integer from the user and displays the sum,
average and product of the numbers in an alert dialog.
SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<script>
var a = parseInt(prompt("Enter First Integer", ""));
var b = parseInt(prompt("Enter Second Integer", ""));
var c = parseInt(prompt("Enter Third Integer", ""));
alert("Sum = " + (a+b+c) + " " + "Average = " + ((a+b+c)/3) + " " +
"Product =
" + (a*b*c));
</script>
</body>
</html>
OUTPUT

REG NO :710118205004

REG NO :710118205004
7. Write a script that inputs the radius of a circle from the user and displays the
circle’s diameter, circumference and area.
SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<script>
var r = parseInt(prompt("Enter Radius", ""));
pi = 3.14159;
alert("Diameter = " + (2*r) + " " + "Circumference = " + (2*pi*r) +
" " + "Area = " + (pi*r*r));
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
8. Write a script that calculates the sum of integers from 1 to 10 and displays the
result.
SOURCE CODE
<!DOCTYPE html>
<html>
<body>
<script>
sum = 0;
for(i = 1; i <= 10; i++)
sum += i;
alert("Sum = " + sum);
</script>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, the above programs are executed successfully using JavaScript

REG NO :710118205004
EX. NO : 3B
JAVASCRIPT
DATE :
1. Write a script for text validation.

SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function validate()
{
if(document.my.name.value == "")
{
alert("Enter Your Name");
document.my.name.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="my" onsubmit="return validate()">
Name <input type="text" name="name"/><br/>
</form>
</body>
</html>
OUTPUT
2. Write a script for restricting the password between 5 to 8 characters.

REG NO :710118205004
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function validate()
{
if((document.my.pwd.value == "") || (document.my.pwd.value.length <=
4) || (document.my.pwd.value.length >= 9))
{
alert("Enter Valid Password");
document.my.pwd.focus();
return false;
}
return true;
}
</script>
</head>
<body>
Password <input type="password" name="pwd"/><br/>
</form>
</body>
</html>
OUTPUT
3. Write a script for radio button validation.

REG NO :710118205004
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<script>
function validate()
{
if((document.my.sex[0].checked == false) &&
(document.my.sex[1].checked == false))
{
alert("Please Select Your Gender");
return false;
}
return true;
}
</script>
</head>
<body>
Gender <input type="radio" name="sex"/>Male
<input type="radio" name="sex"/>Female<br/>
</form>
</body>
</html>
OUTPUT
4. Write a script for checkbox validation.

SOURCE CODE

REG NO :710118205004
<!DOCTYPE html>
<html>
<head>
<script>
function validate()
{
if((document.my.item[0].checked == false) &&
(document.my.item[1].checked == false) && (document.my.item[2].checked ==
false) && (document.my.item[3].checked == false))

{
alert("Please Select Your Favourite Food Item");
return false;
}
return true;
}
</script>
</head>
<body>
Select Your Favourite Food Item <br/>
<input type="checkbox" name="item"/>Idly<br/>
<input type="checkbox" name="item"/>Dosa<br/>
<input type="checkbox" name="item"/>Pulav<br/>
<input type="checkbox" name="item"/>Kesari<br/>
</form>
</body>
</html>
OUTPUT
5. Write a script for select option validation.

SOURCE CODE
<!DOCTYPE html>

REG NO :710118205004
<html>
<head>
<script>
function validate()
{
if(document.my.item.selectedIndex == 0)
{
alert("Please Select Your Favourite Food Item");
return false;
}
return true;
}
</script>
</head>
<body>
Select Your Favourite Food Item <br/>
<select name="item">
<option>Select an Option</option>
<option>Pulav</option>
<option>Briyani</option>
<option>Fried Rice</option>
<option>Rice</option>
</select>
</form>
</body>
</html>
OUTPUT
6. Write a script for email validation.

SOURCE CODE
<!DOCTYPE html>
<html>

REG NO :710118205004
<head>
<script>
function validate()
{
var id = document.my.email.value;
atpos = id.indexOf("@");
dotpos = id.lastIndexOf(".");
if (id == "")
{
alert("Please Fill Your Email Id");
document.my.email.focus();
return false;
}
if (atpos == -1)
{
alert("Please Enter Valid Email Id");
return false;
}
if(id.indexOf(".") == -1 || id.indexOf(".") == 0 || id.indexOf(".") == atpos)

{
alert("Please Enter Valid Email Id");
return false;
}
return true;
}
</script>
</head>
<body>
Enter Your Email <input type="text" name="email"/><br/>
</form>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, the above programs are executed successfully using JavaScript
EX. NO :4 INSTALLATION OF APACHE TOMCAT WEB SERVER

REG NO :710118205004
DATE :
AIM:
To Installation and Configuration of Installation of Apache Tomcat web server
PROCEDURE:
Step 1: Open the terminal (Ctrl+Alt+T) and use the following command check the
Java version:
java –version
The output will show the Java version running on your system. Currently, the latest
release is OpenJDK 11.0.3:
Step 2: Create Tomcat User and Group
For security reasons, do not run Tomcat under the root user. Create a new group and
system user to run the Apache Tomcat service from the /opt/tomcat directory.
sudo groupadd tomcat
sudo useradd -s /bin/false –g tomcat –d /opt/tomcat tomcat
On it, find the Binary Distributions > Core list and the tar.gz link in it. Copy
the link of the file

REG NO :710118205004
Step 3: Go back to the terminal and change to the /tmp directory with the command:
cd /tmp
Now, use the curl command with the tar.gz link you copied in step 2 to download
the package:
curl -O http://www-us.apache.org/dist/tomcat/tomcat-9/v9.0.20/bin/apache-tomcat-
9.0.20.tar.gz
Step 5: Extract tar.gz File
1. To extract the tar.gz Tomcat file, create a new /opt/tomcat/ directory with the
command:
sudo mkdir /opt/tomcat
2. Then, extract the file in the new directory with the following command:
sudo tar xzvf apache-tomcat-9*tar.gz –C /opt/tomcat –strip-components=1
Step 6: Modify Tomcat User Permission
The new Tomcat user you created does not have executable privileges, but it needs
to access the installation directory. You need to setup execute privileges over the
directory.

REG NO :710118205004
1. Move to the directory where the Tomcat installation is located:

cd /opt/tomcat
2. Grant group ownership over the installation directory to the tomcat group with
the command:
sudo chgrp –R tomcat /opt/tomcat
3. Also, give it read access to the conf directory and its contents by typing:
sudo chmod –R g+r conf
4. Followed by changing directory permissions to grant execute access with:

sudo chmod g+x conf
5. Finally, give the tomcat user ownership of the webapps, work, temp, and logs
directories using the command:
sudo chown –R tomcat webapps/ work temp/ logs
Step 7: Create System Unit File
Since you are going to to use Tomcat as a service, you need to create a systemd
service file.
1. To configure the file, you first need to find the “JAVA_HOME” path. This is the
exact location of the Java installation package.
To do so, prompt the system to give you information about the Java packages
installed on the system. In the terminal, type:
sudo update-java-alternatives -1
Step 8: 1.As the output shows, there are two available versions of Java. Accordingly,
it also shows two paths displaying their location
Choose the version you want to use and copy its location. With that, you can move
on to create the service file.

REG NO :710118205004
2. Create and open a new file in the /etc/system/system under the name
tomcat.service:
sudo nano /etc/systemd/system/tomcat.service
3. Once the file opens, copy and paste the content below, changing the
JAVA_HOME value to the information you found in the previous step.
[Unit]
Description=Apache Tomcat Web Application Container
After=network.target
[Service]
Type=forking
Environment=JAVA_HOME=/usr/lib/jvm/java-1.11.0-openjdk-amd64
Environment=CATALINA_PID=/opt/tomcat/latest/temp/tomcat.pid
Environment=CATALINA_HOME=/opt/tomcat
Environment=CATALINA_BASE=/opt/tomcat
Environment=’CATALINA_OPTS=-Xms512M –Xmx1024M –server –XX:
+UserParallelGC’
Environment=’JAVA_OPTS=-Djava.awt.headless=true
Djava.security.egd=file:/dev/./urandom’
ExecStart=/opt/tomcat/bin/startup.sh
ExecStop=/opt/tomcat/bin/shutdown.sh
User=tomcat
Group=tomcat
UMast=0007
RestartSec=10
Restart=always
[Install]
WantedBy=multi-user.target
4. Save and Exit the file (Ctrl+X, followed by y[es] and Enter).
5. For the changes to take place, reload the system daemon with the command:

REG NO :710118205004
sudo systemctl daemon-reload
6. Now, you can finally start the Tomcat service:

sudo systemctl start tomcat
7. Verify the Apache Tomcat service is running with the command:

sudo systemctl status tomcat
The message you want to receive is that the service is active (running).
Step 9: Adjust Firewall
If you are using a firewall to protect your server (as you should), you will not be able
to access the Tomcat interface. Tomcat uses Port 8080, which is outside your local
network.
1. Open Port 8080 to allow traffic through it with the command:

sudo ufw allow 8080/tcp
2. If the port is open, you should be able to see the Apache Tomcat splash page.
Type the following in the browser window:
http://server_ip:8080
or
http://localhost:8080

REG NO :710118205004
RESULT:
Thus the Installation and Configuration of Installation of Apache Tomcat web
server is executed sucessfully.
EX. NO : 5
SERVLETS
DATE :
1. Write a Servlet program to display a message ‘WELCOME TO SERVLET

REG NO :710118205004
WORLD!!’ on the client system. Include CSS as also.

SOURCE CODE
Welcome.css
body {background-color: lightpink; font-family: TimesNewRoman;
font-size: 25px; color: blue; text-align: center; font-weight: bold;}
Welcome.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 Welcome extends HttpServlet
{
protected void processRequest(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("<html>");
out.println("<head>");
out.println("<link rel=stylesheet type=text/css href=Welcome.css");
out.println("</head>");
out.println("<body>");
out.println("WELCOME TO SERVLETS WORLD!!");
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
}
}
OUTPUT
2. Write program in Java to invoke Servlets from HTML forms.

SOURCE CODE
Student.html
<html>
<head>

REG NO :710118205004
<title>STUDENT INFORMATION</title>
<style>
body {background-color:lightpink;}
table {background-color:green; text-align:center; font-size:20px; font-
weight:bold;
padding:5px; border:3px solid chartreuse; border-spacing:5px; }
tr {color:white; }
input[type="text"] {background-color:lightblue; color:red; text-
align:center; font-size:20px; font-weight:bold; }
input[type="number"] {background-color:lightblue; color:red; text-
align:center; font-size:20px; font-weight:bold; }
input[type="submit"] {background-color:yellow; color:blue; font-size:22px;
font- weight:bold; }
</style>
</head>
<body>
<form action="Student" method="post">
<table>
<tr>
<td>Id</td>
<td><input type="number" name="id"/></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" name="name"/></td>
</tr>
</table> <br/>
<input type="submit" value="GO"/>
</form>
</body>
</html>
Student.css
body {background-color:lightpink;}
table {background-color:green; text-align:center; font-size:20px; font-weight:bold;
padding:5px; border:3px solid chartreuse; border-spacing:5px; color:aqua;}
tr {color:white; }
Student.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Student extends HttpServlet {
response)

REG NO :710118205004
throws ServletException, IOException {

try {
out.println("<link rel=stylesheet type=text/css href=Student.css");
out.println("<center><table><tr><td>ID</td><td>NAME</td></tr>");
out.println("<tr><td>" + request.getParameter("id") + "</td>");
out.println("<td>" + request.getParameter("name") + "</td></tr>");
out.println("</table></center>");
} finally {
out.close();
}
}
}
OUTPUT Student.html
Student.java
3. Write a program to perform Servlet Chaining.

SOURCE CODE
Login.css
body {background-color:springgreen;}
h1 {background-color:yellow; color:blue;}
form {background-color:darkseagreen; border:3px outset red; color:blue; font-

REG NO :710118205004
size:20px;}
input[type="text"] {text-align:center; background-color:lightpink; color:brown; font-
size:25px; font- weight:bold;}
input[type="submit"] {background-color:yellow; color:maroon; font-size:28px; font-
weight:bold;}
input[type="reset"] {background-color:yellow; color:maroon; font-size:28px; font-
weight:bold;}
Login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Login.css"/>
</head>
<body>
<form action="Servlet1" method="post">
<center>
Name <input type="text" name="name"/><br/><br/>
</center>
</form>
</body>
</html>
Servlet1.java
import java.io.*;
public class Servlet1 extends HttpServlet {
response)
PrintWriter out = response.getWriter()
try {
String name=request.getParameter("name");
RequestDispatcher rd = request.getRequestDispatcher("Servlet2");
if(name != null)
{
request.setAttribute("Name",name);
rd.include(request,response);

REG NO :710118205004
}
else
{
response.sendError(HttpServletResponse.SC_BAD_REQUEST,"NAME
REQUIRED");
}
} finally {
out.close();
}
}
}
Servlet2.java
import java.io.*;
public class Servlet2 extends HttpServlet {
response)
try {
String name = (String)request.getAttribute("Name");
out.println("<link rel=stylesheet type=text/css href=Login.css>");
out.println("<h1>NAME " + name + "</h1>");
} finally {
out.close();
}
}
}
OUTPUT
Login.html

REG NO :710118205004
Output
4. Write a program to invoke servlet using applet.

SOURCE CODE

REG NO :710118205004
MyServer.java
import java.io.*;
import java.util.*;
public class MyServer extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException
{
PrintWriter pw=res.getWriter();
Date d=new Date();
pw.println("<html><body bgcolor=blue><h2>Server Response</h2>");
pw.println("<h3>Current Date and Time From Server:</h3>");
pw.println("<b>"+d+"</b></body></html>");
}
}
AppletClient.java
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
import java.net.*;
public class AppletClient extends Applet implements ActionListener
{
public void init()
{
Label la=new Label("INVOKING SERVLET FROM APPLET");
la.setFont(new Font("Courier",Font.BOLD,15));
la.setForeground(Color.blue);
add(la);
Button b1=new Button("Click Here To Display Date Information From Server");
b1.setBackground(Color.black);
b1.setForeground(Color.white);
add(b1);
b1.addActionListener(this);
}
public void actionPerformed(ActionEvent ae)
{
try
{
AppletContext ac=getAppletContext();

REG NO :710118205004
URL url = new URL("http://localhost:8080/servlets3/MyServer");

ac.showDocument(url);
}
catch(Exception e)
{
System.out.println(e);
}
}
}
AppletClient.html
<html>
<head>
<title>Invoking Servlets From Applet</title>
</head>
<body bgcolor="violet">
<applet code="AppletClient.class" width="400" height="200">
</applet>
</body>
</html>

REG NO :710118205004
RESULT
Thus, the above program using Servlets is executed successfully
EX. NO : 6 Write programs in Java to create three-tier applications using
DATE : JSP and Databases

REG NO :710118205004
1. Creating simple application to access database using JDBC Formatting

HTML with CSS.
SOURCE CODE
Database
Online.css
body {background-color:springgreen;}
h1 {background-color:yellow; color:blue; text-decoration:underline;}
form {background-color:darkseagreen; border:3px outset red;
color:blue; font-size:20px;}
td {color:blue; font-size:25px; font-weight:bold;}
input[type="text"] {text-align:center; background-color:lightpink; color:brown; font-
size:25px;
font-weight:bold;}
input[type="number"] {text-align:center; background-color:lightpink; color:brown;
font-size:25px; font-weight:bold;}
input[type="submit"] {background-color:yellow; color:maroon; font-size:28px; font-
weight:bold;}
input[type="reset"] {background-color:yellow; color:maroon; font-size:28px; font-
weight:bold;}
Online.js
function validate()
{
if(document.Online.roll.value == "")
{
alert("Fill Your Roll Number");
return false;
}
if(document.Online.name.value == "")
{
alert("Fill Your Name");
return false;
}
if(document.Online.coll.value == "")
{
alert("Fill Your College Name");
return false;

REG NO :710118205004
}
return true;
}
Online.html
<html>
<head>
<title>ONLINE EXAMINATION</title>
<link rel="stylesheet" type="text/css" href="Online.css">
<script type="text/javascript" src="Online.js"></script>
</head>
<body>
<form name ="Online" action="Online" method="post" onsubmit="return
validate()">
<center><h1>ONLINE EXAMINATION</h1>
<hr/>
<table>
<tr>
<td>ROLL NO</td>
<td><input type="number" name="roll"/></td>
</tr>
<tr>
<td>NAME</td>
</tr>
<tr>
<td>COLLEGE</td>
<td><input type="text" name="coll"/></td>
</tr>
</table></center>
<hr/>
1.ECG indicates the functioning of:<br/>
<input type="radio" name="a1" value="ch1"/>Brain
<input type="radio" name="a1" value="ch2"/>Heart
<input type="radio" name="a1" value="ch3"/>Lung
<input type="radio" name="a1" value="ch4"/>Kidney
<br/><br/>
2.The largest ocean is <br/>
<input type="radio" name="a2" value="ch1"/>Atlantic Ocean
<input type="radio" name="a2" value="ch2"/>Pacific Ocean
<input type="radio" name="a2" value="ch3"/>Indian Ocean

REG NO :710118205004
<input type="radio" name="a2" value="ch4"/>Arctic Ocean

<br/><br/>
3.The Meghdoot was written by:<br/>
<input type="radio" name="a3" value="ch1"/>Kalidasa
<input type="radio" name="a3" value="ch2"/>Kambar
<input type="radio" name="a3" value="ch3"/>Valmiki
<input type="radio" name="a3" value="ch4"/>Banabhatt
<br/><br/>
4.Valentina Tereshkova is famous for being the:<br/>
<input type="radio" name="a4" value="ch1"/>First Woman Pilot
<input type="radio" name="a4" value="ch2"/>First Female Engineer
<input type="radio" name="a4" value="ch3"/>First Woman on the Moon
<input type="radio" name="a4" value="ch4"/>First Woman in Space
<br/><br/>
5.In how many disciplines or fields Nobel Prizes are awarded?<br/>
<input type="radio" name="a5" value="ch1"/>Four
<input type="radio" name="a5" value="ch2"/>Five
<input type="radio" name="a5" value="ch3"/>Six
<input type="radio" name="a5" value="ch4"/>Nine<br/>
<hr/>
<center>
</center>
</form>
</body>
</html>
Online.java
import java.io.*;
import java.sql.*;
public class Online extends HttpServlet {
response)
Connection con = null;
PreparedStatement ps = null;
try {
int roll = Integer.parseInt(request.getParameter("roll"));

REG NO :710118205004
String name = request.getParameter("name");

String coll = request.getParameter("coll");
int a1,a2,a3,a4,a5,total;
String ans1,ans2,ans3,ans4,ans5;
ans1 = request.getParameter("a1");
if(ans1.equals("ch2"))
a1 = 2;
else
a1 = 0;
a2 = 2;
else
a2 = 0;
a3 = 2;
else
a3 = 0;
a4 = 2;
else
a4 = 0;
a5 = 2;
else
a5 = 0;
total = a1+a2+a3+a4+a5;
try
{
Class.forName("com.mysql.jdbc.Driver");
}
catch(ClassNotFoundException c)
{
System.out.println(c);
}
try
{

REG NO :710118205004
con =
DriverManager.getConnection("jdbc:mysql://localhost/Online","root","");
ps = con.prepareStatement("insert into student values(?,?,?,?)");
ps.setInt(1,roll);
ps.setString(2,name);
ps.setString(3,coll);
ps.setInt(4,total);
ps.execute();
out.println("<link rel=stylesheet type=text/css href=Online.css>");
out.println("<form method=post>");
out.println("<center><h1>ONLINE EXAMINATION
RESULTS</h1></center>");
out.println("<hr>");
out.println("<center>");
out.println("<table><tr><td>Enter Your Roll No</td>");
out.println("<td><input type=number name=roll></td></tr>");
out.println("</table>");
out.println("<h1><a href=Result?roll=" + roll + ">CLICK TO VIEW
YOUR SCORE</a></h1>");
out.println("</form>");
out.println("</center>");
con.close();
}
catch(SQLException s)
{
System.out.println(s);
}
} finally {
out.close();
}
}
}
Result.java
import java.io.*;

REG NO :710118205004
import java.sql.*;
public class Result extends HttpServlet {
response)
Statement st = null;
try {
int no = Integer.parseInt(request.getParameter("roll"));
try
{
}
catch(ClassNotFoundException c)
{
System.out.println(c);
}
try
{
con =
DriverManager.getConnection("jdbc:mysql://localhost/Online","root","");
st = con.createStatement();
ResultSet rs = st.executeQuery("select * from student where rollno = " +
no);
out.println("<link rel=stylesheet type=text/css href=Online.css>");
out.println("<form>");
out.println("<center><h1>MARKSHEET</h1>");
out.println("<hr>");
while(rs.next())
{
out.println("<table>");
out.println("<tr><td>RollNo</td><td>" + rs.getInt("rollno") +
"</td></tr>");
out.println("<tr><td>Name</td><td>" + rs.getString("name") +
"</td></tr>");
out.println("<tr><td>College Name</td><td>" +
rs.getString("college_name") + "</td></tr>");

REG NO :710118205004
out.println("<tr><td>Mark</td><td>" + rs.getInt("mark") +
"</td></tr>");
out.println("</table>");
}
out.println("</form>");
out.println("</center>");
con.close();
}
catch(SQLException s)
{
System.out.println(s);
}
} finally {
out.close();
}
}
}
OUTPUT
Online.html
Online.java

REG NO :710118205004
Result.java
Database

REG NO :710118205004
RESULT
Thus, the above web page is created using JDBC.

REG NO :710118205004
EX. NO : 7
Programs using XML –Schema –XSLT/XSL/JSP
DATE :
1. Develop a JSP to accept user’s Name and then welcome the user by Name.
SOURCE CODE
Name.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form action="Display.jsp" method="post">
Name <input type="text" name="name"/>
<br/><br/>
<input type="submit" value="click"/>
</form>
</body>
</html>
Display.jsp
<!DOCTYPE html>
<html>
<head>
<title>NAME</title>
<style>
body {background-color:aqua;}
p {color:blue; font-size:25px;}
</style>
</head>
<body>
<p>Welcome <%=request.getParameter("name") %></p>
</body>
</html>

REG NO :710118205004
OUTPUT
Name.jsp
Display.jsp

REG NO :710118205004
2 . Develop a JSP to display date.

SOURCE CODE
Date.jsp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="background-color:yellow; color:blue; font-size:25px;">
<%= new java.util.Date() %>
</p>
</body>
</html>
OUTPUT

REG NO :710118205004
3. Develop a JSP to check for Even Number.

SOURCE CODE
Even.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="Even.jsp" method="post">
Enter an Integer <input type="number" name="no"/>
<br/>
<input type="submit" value="CHECK"/>
</form>
</body>
</html>
Even.jsp
<%@page language="java" %>
<%! public String oddeven(int no)
{
if(no % 2 == 0)
return "Even Number";
else
return "Odd Number";
}
%>
<!DOCTYPE html>
<html>
<head>
<title>EVEN OR ODD</title>
</head>
<body>
<% String num = request.getParameter("no");
int no = Integer.parseInt(num);%>
<h1 style="color:blue;"><%= oddeven(no) %></h1>
</body>
</html>

REG NO :710118205004
OUTPUT
Even.html
Even.jsp

REG NO :710118205004
4. Develop a JSP to check for Armstrong Number.

SOURCE CODE
Armstrong.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="Armstrong.jsp">
Enter an Integer <input type="number" name="no"/>
<br/>
<input type="submit" value="CHECK"/>
</form>
</body>
</html>>
Armstrong.jsp
<%! public String armstrong(int no)
{
int a = no;
int sum = 0;
while(no > 0)
{
int b = no%10;
sum = sum + b*b*b;
no = no/10;
}
if(sum == a)
return "Armstrong Number";
else
return "Not an Armstrong Number";
}%>
<!DOCTYPE html>
<html>
<head>
<title>ARMSTRONG</title>

REG NO :710118205004
</head>
<body>
<% String num = request.getParameter("no");
int no = Integer.parseInt(num); %>
<h3 style="color:green"><%= armstrong(no) %></h3>
</body>
</html>
OUTPUT
Armstrong.html
Armstrong.jsp
STANDARD ACTION

REG NO :710118205004
5. Develop a JSP using Include action.

SOURCE CODE
Welcome.html
<!DOCTYPE html>
<html>
<head>
<title>WELCOME</title>
</head>
<body>
<h3 style="color:green;">WELCOME TO JSP WORLD</h3>
</body>
</html>
Welcome.jsp
<!DOCTYPE html>
<html>
<head>
<title>GREET</title>
</head>
<body>
<h2 style="color:blue;">Hai, How are You?</h2>
<jsp:include page="Welcome.html"/>
</body>
</html>
OUTPUT
6. Develop a JSP using Forward action.

SOURCE CODE

REG NO :710118205004
Welcome.html
<!DOCTYPE html>
<html>
<head>
<title>WELCOME</title>
</head>
<body>
<h3 style="color:green;">WELCOME TO JSP WORLD</h3>
</body>
</html>
Welcome.jsp
<!DOCTYPE html>
<html>
<head>
<title>GREET</title>
</head>
<body>
<h2 style="color:blue;">Hai, How are You?</h2>
<jsp:forward page="Welcome.html"/>
</body>
</html>
OUTPUT
7. Develop a JSP using Plugin action.

SOURCE CODE
Hello.java

REG NO :710118205004
import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Color;
public class Hello extends Applet
{
public void paint(Graphics g)
{
setBackground(Color.YELLOW);
setForeground(Color.BLUE);
g.drawString("Hello, Welcome to JSP World", 20, 50);
}
}
Hello.jsp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<jsp:plugin type="applet" code="Hello" width="250" height="250">
</jsp:plugin>
</body>
</html>
OUTPUT
8. Develop a JSP using Javabeans to find the simple interest and display the
result.
SOURCE CODE
Interest.html

REG NO :710118205004
<!DOCTYPE html>
<html>
<head>
<title>SIMPLE INTEREST FORM</title>
</head>
<body>
<center>
<h1 style="color:blue;">SIMPLE INTEREST</h1>
<form action="Interest.jsp" method="post">
<table>
<tr>
<td>Amount</td> <td><input type="text" name="p"/></td>
</tr>
<tr>
<td>Period</td> <td><input type="text" name="n"/></td>
</tr>
<tr>
<td>Rate</td> <td><input type="text" name="r"/></td>
</tr>
</table>
<input type="submit" value="CALCULATE"/>
</form>
</center>
</body>
</html>
InterestDemo.java
package Interest;
public class InterestDemo {
public int p,n,r;
public void setP(int p)
{
this.p = p;
}
public void setN(int n)
{
this.n = n;
}
public void setR(int r)
{
this.r = r;
}

REG NO :710118205004
public int getP()

{
return p;
}
public int getN()
{
return n;
}
public int getR()
{
return r;
}
public int Calculate()
{
return ((p*n*r)/100);
}
}
Interest.jsp
<!DOCTYPE html>
<html>
<head>
<title>SI CALCULATION</title>
<style>
table {border: 2px outset blueviolet;}
</style>
</head>
<body>
<jsp:useBean id="demo" class="Interest.InterestDemo" scope="session" />
<jsp:setProperty name="demo" property="*" />
<center>
<h1 style="color:green;">SIMPLE INTEREST</h1>
<table border="2">
<tr>
<td>PRINCIPAL</td> <td><jsp:getProperty name="demo"
property="p"/></td>
</tr>
<tr>
<td>PERIOD</td> <td><jsp:getProperty name="demo"
property="n"/></td>
</tr>
<tr>

REG NO :710118205004
<td>RATE</td> <td><jsp:getProperty name="demo"

property="r"/></td>
</tr>
<tr>
<td>SIMPLE INTEREST</td> <td><%= demo.Calculate() %></td>
</tr>
</table>
</center>
</body>
</html>
OUTPUT
Interest.html
Interest.jsp

REG NO :710118205004
9. Develop a JSP for handling Session.

SOURCE CODE

REG NO :710118205004
Session.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="SessionSet.jsp" method="post">
Enter Your Name <input type="text" name="name"/>
<br/>
</form>
</body>
</html>
SessionSet.jsp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<% String name=request.getParameter("name");
session.setAttribute("Name",name); %>
<jsp:forward page="SessionDisplay.jsp" />
</body>
</html>
SessionDisplay.jsp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2 style="color:blue">
Welcome <%= (String)session.getAttribute("Name") %>

REG NO :710118205004
</h2>
</body>
</html>
OUTPUT
Session.html
SessionDisplay.jsp
10. Develop a JSP to maintain state using Cookie.

SOURCE CODE

REG NO :710118205004
Cookie.jsp
<!DOCTYPE html>
<html>
<head>
<title>COOKIE</title>
</head>
<body>
<form action="CookieAdd.jsp" method="post">
Enter Your Name <input type="text" name="name"/><br/>
</form>
</body>
</html>
CookieAdd.jsp
<!DOCTYPE html>
<html>
<head>
<title>COOKIE ADD</title>
<style>
a {color:yellow;background-color:purple;font-size:25px;}
</style>
</head>
<body>
<% String name = request.getParameter("name");
Cookie c = new Cookie("Name",name);
response.addCookie(c); %>
<h2 style="color:blue">Your Cookie has been Added</h2>
<a href="CookieRetrieve.jsp">CLICK TO RETRIEVE</a>
</body>
</html>
CookieRetrieve.jsp

REG NO :710118205004
<!DOCTYPE html>
<html>
<head>
<title>COOKIE RETRIEVE</title>
</head>
<body>
<% Cookie[] c = request.getCookies();
Cookie my = null;
for(int i = 0; i<c.length; i++)

{
if(c[i].getName().equals("Name"))
{
my =c[i];
break;
}
}%>
<h1 style="color:purple;">Welcome <%= my.getValue() %></h1>
</body>
</html>
OUTPUT
Cookie.jsp
CookieAdd.jsp

REG NO :710118205004
CookieRetrieve.jsp
11. Develop a JSP to connect to a database.

SOURCE CODE
Library.jsp
<!DOCTYPE html>
<html>
<head>

REG NO :710118205004
<title>LIBRARY</title>
</head>
<body>
<center>
<form action="DB.jsp" method="post">
<h1 style="text-align:center;color:green;">LIBRARY MANAGEMENT
SYSTEM</h1>
<table>
<tr>
<td>Enter Accession Number</td>
<td><input type="number" name="accno"/></td>
</tr>
<tr>
<td>Enter Title of the Book</td>
<td><input type="text" name="title"/></td>
</tr>
<tr>
<td>Enter Author Name</td>
</tr>
</table>
<input type="submit" name ="op" value="INSERT"/>
<input type="submit" name ="op" value="DELETE"/>
<input type="submit" name ="op" value="UPDATE"/>
<input type="submit" name ="op" value="VIEW"/>
</form>
</center>
</body>
</html>
DB.jsp
<%@page language = "java" %>
<%@page import = "java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<title>LIBRARY MANAGEMENT SYSTEM</title>
<style>
table {align:center; border:2px outset violet;}
th {text-align:center;color:blue;background-color:yellow;font-size:25px;}
td {text-align:center;color:yellow;background-color:blue;font-size:20px;}

REG NO :710118205004
</style>
</head>
<body>
<% String acc = request.getParameter("accno");
int no = Integer.parseInt(acc);
String title = request.getParameter("title");
String name = request.getParameter("name");
PreparedStatement ps = null;
con = DriverManager.getConnection("jdbc:mysql://localhost/library","root","");
String a1 = request.getParameter("op");
if(a1.equals("INSERT"))
{
ps = con.prepareStatement("insert into lib values(?,?,?)");
ps.setInt(1,no);
ps.setString(2,title);
ps.setString(3,name);
ps.execute(); %>
<h1 style="text-align:center;color:green;">RECORD INSERTED </h1>
<% }
if(a1.equals("DELETE"))
{
ps = con.prepareStatement("delete from lib where accno=?");
ps.setInt(1,no);
ps.execute();%>
<h1 style="text-align:center;color:green;">RECORD DELETED </h1>
<%}
if(a1.equals("UPDATE")){
ps = con.prepareStatement("update lib set title=? where accno=?");
ps.setString(1,title);
ps.setInt(2,no);
ps.execute();%>
<h1 style="text-align:center;color:green;">RECORD UPDATED </h1>
<%}
if(a1.equals("VIEW"))
{
Statement st = con.createStatement();
ResultSet rs = st.executeQuery("select * from lib");
%>
<table border="2">
<tr>

REG NO :710118205004
<th>Acc_No</th>
<th>Title</th>
<th>Author</th>
</tr>
<% while(rs.next())
{ %>
<tr>
<td><%= rs.getInt(1)%> </td>
<td><%= rs.getString(2) %></td>
<td><%= rs.getString(3) %></td>
</tr>
<%}%>
</table>
<% } %>
</body>
</html>
OUTPUT
Library.jsp
Insert Operation

REG NO :710118205004
Database
View Operation

REG NO :710118205004
RESULT
Thus, above programs are executed successfully using JSP.
EX. NO : 8
Programs using DOM-XML and SAX parsers
DATE :
1. XML DTD
SOURCE CODE
Student.dtd
<!ELEMENT Student-detail (Student+)>
<!ELEMENT Student (Id,Name,Dept)>
<!ELEMENT Id (#PCDATA)>

REG NO :710118205004
<!ELEMENT Name (#PCDATA)>

<!ELEMENT Dept (#PCDATA)>]
Student.xsl
<?xml version="1.0"?>
<stu:stylesheet version="1.0" xmlns:stu="http://www.w3.org/1999/XSL/Transform">
<stu:template match="/">
<html>
<head>
<style>
tr {text-align:center;}
</style>
</head>
<body>
<table border="2">
<tr bgcolor="yellow">
<th>ID</th>
<th>NAME</th>
<th>DEPARTMENT</th>
</tr>
<stu:for-each select="Student-detail/Student">
<tr bgcolor="plum">
<td><stu:value-of select="Id"/></td>
<td><stu:value-of select="Name"/></td>
<td><stu:value-of select="Dept"/></td>
</tr>
</stu:for-each>
</table>
</body>
</html>
</stu:template>
</stu:stylesheet>
Student.xml
<?xml-stylesheet type="text/xsl" href="Student.xsl"?>
<!DOCTYPE Student-detail SYSTEM "Student.dtd">
<Student-detail>
<Student>
<Id>1</Id>
<Name>Rupi</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>2</Id>
<Name>Ram</Name>
REG NO :710118205004
<Dept>CSE</Dept>
</Student>
<Student>
<Id>3</Id>
<Name>Jill</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>4</Id>
<Name>Jack</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>5</Id>
<Name>Johnny</Name>
<Dept>IT</Dept>
</Student>
</Student-detail>
OUTPUT
2. XML SCHEMA
SOURCE CODE
Student.xsd
<stu:schema xmlns:stu = "http://www.w3.org/2001/XMLSchema">
<stu:element name="Student-detail">
<stu:complexType>
<stu:sequence>
<stu:element name="Student">
<stu:complexType>
<stu:sequence>

REG NO :710118205004
<stu:element name="Id" type="stu:integer"/>

<stu:element name="Name" type="stu:string"/>
<stu:element name="Dept" type="stu:string"/>
</stu:sequence>
</stu:complexType>
</stu:element>
</stu:sequence>
</stu:complexType>
</stu:element>
</stu:schema>
Student.xsl
<stu:stylesheet version="1.0" xmlns:stu="http://www.w3.org/1999/XSL/Transform">
<stu:template match="/">
<html>
<head>
<style>
tr {text-align:center;}
</style>
</head>
<body>
<table border="2">
<tr bgcolor="yellow">
<th>ID</th>
<th>NAME</th>
<th>DEPARTMENT</th>
</tr>
<stu:for-each select="Student-detail/Student">
<tr bgcolor="plum">
<td><stu:value-of select="Id"/></td>
<td><stu:value-of select="Name"/></td>
<td><stu:value-of select="Dept"/></td>
</tr>
</stu:for-each>
</table>
</body>
</html>
</stu:template>
</stu:stylesheet>
Student.xml
<?xml-stylesheet type="text/xsl" href="Student.xsl"?>
<Student-detail xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:SchemaLocation="Student.xsd">
<Student>

REG NO :710118205004
<Id>1</Id>
<Name>Rupi</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>2</Id>
<Name>Ram</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>3</Id>
<Name>Jill</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>4</Id>
<Name>Jack</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>5</Id>
<Name>Johnny</Name>
<Dept>IT</Dept>
</Student>
</Student-detail>
OUTPUT
3. Create and save an XML document at the server, 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.
SOURCE CODE
Student.html
<!DOCTYPE html>
<html>
<head>
<style>
th {background-color:yellow; color:blue; text-align:center; font-size:25px;}
td {background-color:plum; color:purple; text-align:center; font-size:23px;}

REG NO :710118205004
</style>
</head>
<body>
<script>
function Display()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
myFunction(xhttp.responseXML);
}
}
xhttp.open("GET", "Student.xml", true);
xhttp.send();
function myFunction(xmlDoc)
{
var x = xmlDoc.getElementsByTagName("Student");
var key = document.getElementById("key").value;
for(i=0;i<x.length;i++)
{
if(key.match(x[i].getElementsByTagName("Id")
[0].childNodes[0].nodeValue))
j=i;
}
document.write("<table
border=2><tr><th>Id</th><th>Name</th><th>Dept</th></tr>");
document.write("<tr><td>");
document.write(x[j].getElementsByTagName("Id")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[j].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[j].getElementsByTagName("Dept")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
document.write("</table>");
}
}
</script>
<form>
Id <input type="text" id="key"/>
<input type="button" value="SUBMIT" onclick="Display()"/>

REG NO :710118205004
</body>
</html>
Student.xml
<StudentInfo>
<Student>
<Id>1</Id>
<Name>Rose</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>2</Id>
<Name>Lotus</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>3</Id>
<Name>Daffodil</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>4</Id>
<Name>Marigold</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>5</Id>
<Name>WaterLilly</Name>
<Dept>CSE</Dept>
</Student>
<Student>
<Id>6</Id>
<Name>Jasmine</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>7</Id>
<Name>Hibiscus</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>8</Id>
<Name>Tulip</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>9</Id>
REG NO :710118205004
<Name>WaxFlower</Name>
<Dept>IT</Dept>
</Student>
<Student>
<Id>10</Id>
<Name>Peony</Name>
<Dept>IT</Dept>
</Student>
</StudentInfo>
OUTPUT

REG NO :710118205004
RESULT
Thus, above programs using XML is executed successfully.

EX. NO : 9
AJAX
DATE :
Develop an AJAX application to display the text entered in the text field in a web
page with a “Welcome” message. Also display the current date and time of the
server on the page.
SOURCE CODE
Name.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>

REG NO :710118205004
function display()
{
if(window.XMLHttpRequest)
req = new XMLHttpRequest();
req.onreadystatechange = function()
{
if(req.readyState == 4 && req.status == 200)
document.getElementById("demo").innerHTML = req.responseText;
}
var name = document.getElementById("name").value;
req.open("GET","Name.jsp?Name="+name,true);
req.send();
}
</script>
</head>
<body>
Enter Your Name <input type="text" id="name"/><br/>
<input type="button" value="GREET" onclick="display()"/>
<div id="demo"></div>
</body>
</html>
Name.jsp
<%@page import="java.util.Date"%>
<!DOCTYPE html>
<html>
<head>
<title>DISPLAY</title>
</head>
<body>
<%
String name = request.getParameter("Name");
out.println("Date: " + new Date());
out.println("<br/>Welcome " + name);
%>
</body>
</html>
OUTPUT

REG NO :710118205004
Create a program to change the content of the web page using AJAX.
SOURCE CODE
Modify.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function display()
{

REG NO :710118205004
{
}
req.open("GET","Student.xml",true);
req.send();
}
</script>
</head>
<body>
<div id="demo">CHANGE ME</div><br/>
<input type="button" value="SUBMIT" onclick="display()"/>
</body>
</html>
Student.xml
<Student>
<Name>RUPI</Name>
</Student>
OUTPUT
Develop an application using AJAX program for displaying the message “Hello
Ajax World”. Use button and enable click event to display the message and name
the button as “Get Message”.
SOURCE CODE
Display.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function display()
{

REG NO :710118205004
{
}
req.open("GET","GetMessage.html",true);
req.send();}
</script>
</head>
<body>
<div id="demo">CHANGE ME</div><br/>
<input type="button" value="Get Message" onclick="display()"/>
</body>
</html>
GetMessage.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="color:blue">Hello AJAX World</h1>
</body>
</html>
OUTPUT

REG NO :710118205004
Develop an application using AJAX program to hide the text.

SOURCE CODE
Display.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>

REG NO :710118205004
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
OUTPUT
Develop an
application using AJAX to add a class.
SOURCE CODE
Display.html
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});

REG NO :710118205004
});
</script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div><br>
<button>Add classes to elements</button>
</body>
</html>
OUTPUT

REG NO :710118205004

REG NO :710118205004
RESULT
Thus, above programs are executed successfully using AJAX.

EX. NO : 10
WEB SERVICES
DATE :
1. Write a web application that functions as a simple hand calculator, but also
keeps a “paper trail” of all your previous work.
SOURCE CODE
Calc.java
package myCalc;
import javax.jws.WebService;
import javax.jws.WebMethod;
import javax.jws.WebParam;
@WebService(serviceName = "Calc")

REG NO :710118205004
public class Calc {
@WebMethod(operationName = "Addition")
public int Addition(@WebParam(name = "a") int a, @WebParam(name = "b") int
b) {
return (a+b);
}
@WebMethod(operationName = "Subtraction")
public int Subtraction(@WebParam(name = "a") int a, @WebParam(name = "b")
int b) {
return (a-b);
}
@WebMethod(operationName = "Multiplication")
public int Multiplication(@WebParam(name = "a") int a, @WebParam(name =
"b") int b) {
return (a*b);
}
@WebMethod(operationName = "Division")
public int Division(@WebParam(name = "a") int a, @WebParam(name = "b") int
b) {
return (a/b);
}
}
OUTPUT

REG NO :710118205004
RESULT

REG NO :710118205004
MyCalc.jsp
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<form action="MyCalculator.jsp">
<table>
<tr>
<td>Enter First Integer</td> <td><input type="number"
name="a"/></td>
</tr>
<tr>
<td>Enter Second Integer</td> <td><input type="number"
name="b"/></td>
</tr>
</table>
<input type="submit" value="ADD" name="op"/>
<input type="submit" value="SUB" name="op"/>
<input type="submit" value="MUL" name="op"/>
<input type="submit" value="DIV" name="op"/>
</form>
</body>
</html>
MyCalculator.jsp
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>

REG NO :710118205004
</head>
<body>
<%
String n1 = request.getParameter("a");
String n2 = request.getParameter("b");
String res = request.getParameter("op");
int a = Integer.parseInt(n1);
int b = Integer.parseInt(n2);
if(res.equals("ADD"))
{
try {
myCalculator.Calc_Service service = new myCalculator.Calc_Service();
myCalculator.Calc port = service.getCalcPort();
int result = port.addition(a, b);

out.println("Result = "+result);
} catch (Exception ex) {
out.println(ex);
}
}
if(res.equals("SUB"))
{
try {
int result = port.subtraction(a, b);

out.println(ex);
}
}
if(res.equals("MUL"))
{
try {
int result = port.multiplication(a, b);

out.println(ex);
}

REG NO :710118205004
}
if(res.equals("DIV"))
{
try {
int result = port.division(a, b);

out.println(ex);
}
}
%>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, Web Service for Calculator application has been deployed successfully.
EX. NO :10A
WEB SERVICES
DATE :

REG NO :710118205004
Write a web service for predicting for any product sales.

SOURCE CODE
Sales.java
package Prediction;
import javax.jws.WebService;
import javax.jws.WebMethod;
import javax.jws.WebParam;
@WebService(serviceName = "Sales")
public class Sales
{
@WebMethod(operationName = "Prediction")
public String Prediction(@WebParam(name = "txt") String txt)
{
return txt;
}
}
OUTPUT

REG NO :710118205004
Prediction.html
<!DOCTYPE html>
<html>
<body>
<form action="View.jsp" method="post">
Predict the sale of Marshmallow <input type="text" name="view"/><br/>
<input type="submit" value="PREDICTION"/>
</form>
</body>
</html>
View.jsp
<!DOCTYPE html>
<html>
<head>
<title>OPINION</title>

REG NO :710118205004
</head>
<body>
<%
String view = request.getParameter("view");
try
{
prediction.Sales_Service service = new prediction.Sales_Service();
prediction.Sales port = service.getSalesPort();
java.lang.String txt = view;
java.lang.String result = port.prediction(txt);
out.println("Your Prediction about the Sale of Marshmallow "+result);
}
catch (Exception ex)
{
System.out.println(ex);
}
%>
</body>
</html>
OUTPUT

REG NO :710118205004
RESULT
Thus, web service has been deployed and consumed by the client successfully

WT Record

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Record

Uploaded by

Copyright:

Available Formats

REG NO :710118205004

IT8511 – WEB PROGRAMMING LABORATORY

<pre> - Henry David Thoreau</pre>

<b>HTML</b> stands for <i>HyperText Markup Language</i>. <br/>

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

2. Design a Web Page as given below.

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

The development of the Semantic Web proceeds in layers.

3. Design a Web page which links to the same page as below.

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

<a id="1"><b> 1. SCRIPTING</b></a><br/>

IT8511 – WEB PROGRAMMING LABORATORY

<a id="4"><b>4. APPLETS</b></a><br/>

4. Embed a picture on a Web page and give suitable title.

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

HTML IMAGE MAP

IT8511 – WEB PROGRAMMING LABORATORY

TAGS USED - <map>, <area>, <img>

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

and definition list.

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

<input type="text" name="name" required /> <br/> <br/>

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

<input type="checkbox" name="news">DINATHANTHI

IT8511 – WEB PROGRAMMING LABORATORY

8. Design a table as given below.

IT8511 – WEB PROGRAMMING LABORATORY

9. Design a table as given below.

IT8511 – WEB PROGRAMMING LABORATORY

10.Design a Web Page as shown below.

IT8511 – WEB PROGRAMMING LABORATORY

<a href="SemanticWeb.html" target="content" title="SEMANTIC

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

11. Design a Web Page as shown below.

Eightball.gif Floatingball.gif Redball.gif

IT8511 – WEB PROGRAMMING LABORATORY

<a href="eightball.gif" target="ball">EightBall</a> <br/>

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

Mutton kabab &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 160

IT8511 – WEB PROGRAMMING LABORATORY

Prawn Briyani &nbsp; &nbsp; &nbsp;

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

IT8511 – WEB PROGRAMMING LABORATORY

4. Design a form as given below.

IT8511 – WEB PROGRAMMING LABORATORY

Mutton kabab 160

Prawn Briyani