A Practical Record

on

R1UC602C- Web Technology Lab

Submitted in partial fulfillment of the requirements for the award of the
degree of

B.Tech.

In

Computer Science & Engineering

Submitted By:
Admission Number YEAR : III
22SCSE1011726
Student Name Ansh Tripathi SEMESTER : VI

School of Computer Science & Engineering

Galgotias University Greater Noida, Uttar Pradesh 203201

June 2024
1
Objective:
The objective of this lab is to develop an ability to design and
implementstatic and dynamic website.

OUTCOMES:

At the end of the course, students should be able to:

• Design and implement dynamic websites with good

aesthetic sense ofdesigning and latest technical know-how's.

• Have a Good grounding of Web Application Terminologies,

Internet Tools,E – Commerce and other web services.

2
 Page MARK
S. No. LIST OF EXPERIMENTS No.

1 Design the following static web pages required for an online

book store web site. 1) HOME PAGE: The static home page
must contain three frames. 2) LOGIN PAGE 3) CATOLOGUE 5
PAGE: The catalogue page should contain the details of all
the books
available in the web site in a table. 4) REGISTRATION PAGE

2 Write JavaScript to validate the following fields of the 12

. Registration page. 1. First Name (Name should contains
alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters
length). 3. E-mail id (should not contain any invalid and must
follow the standard pattern [email protected]) 4.
Mobile
Number (Phone number should contain 10 digits only). 5. Last
Name and Address (should not be Empty).
Develop and demonstrate the usage of inline, internal and
3 external style sheet using CSS 16
.
Develop and demonstrate JavaScript with POP-UP boxes and
4 functions for the following problems: a) Input: Click on Display 19
. Date button using onclick( ) function Output: Display date in the
textbox b) Input: A number n obtained using prompt Output:
Factorial of n number using alert c) Input: A number n obtained
using prompt Output: A multiplication table of numbers from 1
to 10 of n using alert d) Input: A number n obtained using
promptand add another number using confirm Output: Sum of
the entire n numbers using alert
Write an HTML page that contains a selection box with a list of
5 5 countries. When the user selects a country, its capital should 22
. be printed next in the list. Add CSS to customize the properties
of the font of the capital (color,bold and font size).

Write an HTML page including any required JavaScript

6 that takes a number from text field in the range of 0 to 24
. 999 and shows it in words. It should not accept four and
above digits,alphabets and special characters.

Create a form using various form elements and print the 27

7 values using Java Script
.

3
 Write a AJAX program in which user will enter a
8.
numberand table of that will be displayed
30

Create and save an XML document at the server, which

9. contains10 users information .Write a program which
takes user id as input and returns the user details by
32
taking the user informationfrom the XML document

Write a Servlet/ JSP program which takes value from

10. HTML and print using Servlet/ JSP. 36

Creating a JSP (JavaServer Pages) program that

11.
interacts with an Oracle 37

To create a JSP (JavaServer Pages) program that prints

12.
the multiplication table of a given number 40

13. Servlet/ JSP program without session Management

42

14. Servlet/ JSP program with session Management

43

15. Servlet/ JSP program with navigation

45

4
 Experiment 1

Design the following static web pages required for an online book store web site.

1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain the details of all the
books available in the web site in a table.
4) REGISTRATION PAGE

Aim: Design the following static web pages required for online book store.

1. Home page:- the static home page must contains three pages
2. Top frame:- logo and college name and links to homepage, login page,
registration page and catalogue page
3. Left frame:- at least four links for navigation which will display the catalogue
of Respective links
4. Right frame:- the pages to links in the left frame must be loaded here initially
it Contains the description of the website.

DESCRIPTION: In this program the entire web paged are created by using
basic HTML tags. Home page is divided into 3 frames by using <frameset> and
<frame> tags. A frame is used to display a web page within a web page.

<frameset>:
• The <frameset> tag defines a frameset.
• The <frameset> element holds one or more <frame> elements.
• Each <frame> element can hold a separate document.
• The <frameset> element specifies HOW MANY columns or rows there will
be in the frameset, and HOW MUCH percentage/pixels of space will occupy
each of them.
<frame>:
• The <frame> tag defines one particular window (frame) within a
<frameset>.
• Each <frame> in a <frameset> can have different attributes, such as
border, scrolling, the ability to resize, etc.

PROGRAM:
home.html:

<frameset rows="40%,*">
<frame src="top.html" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>

top.html:

<html>
<head>

5
<title>Top Frame</title>
</head>
<body bgcolor="YellowGreen ">
<img src="images/logo1.png" width="125" height="115" align="left">

<img src="images/cse.png" width="125" height="115" align="right">

<center>
<marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book
Store</i></b> </font>
</marquee> <br>
<font face="Brush Script" size="6" color="white"><b>Created & Maintained By
Developers</b></font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center">
<td> <a href="Home.html" target="_parent"><font face="Brush Script"
size="6"
color="navy">HOME </a> </td>
<td> <a href="login.html" target="rightframe"><font face="Brush Script"
size="6"
color="navy">LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe"> <font face="Brush
Script"
size="6" color="navy">REGISTER </a> </td>
<td> <a href="catalogue.html" target="rightframe"> <font face="Brush
Script"
size="6" color="navy">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>

left.html:

<html>
<body align="center" bgcolor="bisque"> <br>
<a href="cse.html" target="rightframe"><font
size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font
size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font
size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font
size="6">MECH</font></a><br>
</body>
</html>

right.html:

<html>

6
<body bgcolor="orange">
<center>
<img src="images/Books.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>

cse.html:

<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and
Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<option value="select the book" selected>Select the book
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>

7
ece.html:

<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication
Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and Systems</li> <li>Digital
Communication</li>
</ul>
</h2>
</body>
</html>

eee.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication
Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
catalogue.html:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>

8
 <img src="images/wt.jpg" width=100 height=100/>
</td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br>
Publication:Oxford
University Press</td> <td>531 &nbsp;&nbsp;&nbsp;</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="images/php.jpg" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura
Thompson <br> Publication:PEARSON</td> <td> 898 &nbsp;&nbsp;&nbsp;
</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>

login.html:

<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center>
<img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr><td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table> </form> </basefont> </body> </html>

registration.html:

<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">
<center><font color="blue" size="6" face="arial">Registration
Form</font></center><br />
<form action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>

9
&nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' /><br /><br />
EmailAddress<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;
<font color="redblue">e.g. [email protected]</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
&nbsp;&nbsp;&nbsp;
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form> </body> </html>

order.html:
<html>
<head><title>order conformation</title></head>
<body bgcolor="cyan">
<center>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU...Visit Again</h2>
</center>
</body>
</html>

OUTPUT

10
11
 Experiment 2

Write JavaScript to validate the following fields of the Registration page.

1. First Name (Name should contains alphabets and the length should not
be less than 6
characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard
pattern
[email protected])
4. Mobile Number (Phone number should contain 10 digits only).
5. Last Name and Address (should not be Empty).
AIM: To validate the fields of registration page using JavaScript
DESCRIPTION: In order to validate the fields of login and registration
pages JavaScript is
used. JavaScript is programming code that can be inserted into HTML
pages. JavaScript
inserted into HTML pages, can be executed by all modern web browsers.
JavaScript is
mainly used for validating the elements in a form submitted by the user.
This JavaScript code
can react to user events.
PROGRAM: After clicking OK button the page is redirected to success.html
<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function formValidator()
{
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var email = document.getElementById('email');
var pass = document.getElementById('pass');
var addr = document.getElementById('addr');
var mobileno = document.getElementById('mobileno');
// Check each input in the order that it appears in the form!
if(notEmpty(firstname, "can not be null")){
if(isAlphabet(firstname, "Please enter only letters for your Firstname")){
if(lengthRestriction(firstname, 6)){
if(isAlphabet(lastname, "Please enter only letters for your Lastname")){
if(emailValidator(email, "Please enter a valid email address")){
if(lengthRestriction(pass, 6)){
if(isAlphanumeric(pass, "please enter Numbers and Letters Only for
password")){
if(notEmpty(addr, "please enter the address")){
if(isNumeric(mobileno, "Please enter a valid mobileno")){

12
 if(lengthRestriction1(mobileno, 10 , 10)){
return true;
}}}}
}
}
}
}}}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

13
function lengthRestriction(elem, min){
var uInput = elem.value;
if(uInput.length >= min){
return true;
}else{
alert("Please enter minimum " +min+ " characters");
elem.focus();
return false;
}
}
function emailValidator(elem, helperMsg)
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else{
alert(helperMsg);
elem.focus();
return false;
}
}
function lengthRestriction1(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else {
alert("Please enter 10 numbers only");
elem.focus();
return false;
}
}
</script>
<center><font color="blue" size="6" face="arial">Registration
Form</font></center><br />
<form onsubmit='return formValidator()' action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
&nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' /><br /><br />
Email Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;

14
 <font color="redblue">e.g. [email protected]</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
&nbsp;&nbsp;&nbsp;
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form>
</body>
</html>

15
 Experiment 3

Develop and demonstrate the usage of inline, internal and external style
sheet using CSS.

Aim: Design a web page using CSS which includes the following:
1) Use different font styles
2) Control the repetition of image with background-repeat and no-repeat
property
3) Define style for links as a: link, a: active, a: hover, a: visited
4) Add customized cursors for links.

PROGRAM:
style.css
p.left
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
p.center
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
p.right
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-family:arial;
text-decoration:underline;
}

sample.html

<html>

16
<head>
<style type="text/css">
body
{
background-image:url('images/cse.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
background-color:pink;
}
a:link { text-decoration:none;color:orange; }
a:visited { text-decoration:none;color:red; }
a:hover { text-decoration:underline;color:blue; }
a:active { text-decoration:underline;color:purple; }
h3 { color:green; }
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and External) </h1>
<p>This Paragraph is a Not Styled</p>
<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>
<b>This is normal Bold</b> <br>
<b id="headline">This Bold Text is Styled </b>

<h2><b><a href=" ">This is a link</a></b></h2>

<h3 class="c1">The cursor over this element is plus sign</h3>
<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is a I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</html>

CSS (Inline, Internal and External)

This Paragraph is a Not Styled

This Paragraph is Styled by class "Left"

17
This Paragraph is Styled by class "Center"

This Paragraph is Styled by class "Right"

This is normal Bold

This Bold Text is Styled

This is a link
The cursor over this element is plus sign

The cursor over this element is a pointing hand

The cursor over this element is a grasping hand

The cursor over this element is a I bar

The cursor over this element is a wait

The cursor over this element is a question mark

OUTPUT

18
 Experiment 4

4: Develop and demonstrate JavaScript with POP-UP boxes and functions for
the following problems:
a) Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number using
confirm
Output: Sum of the entire n numbers using alert
PROGRAM:
a) date.html
<html>
<body>
<script>
function display(){
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"/"+month+"/"+year;
}
</script>
<form>
<input type="text" id="dis" /><br />
<input type="button" value="Display Date" onclick="display()" />
</form>
<body>
</html>
OUTPUT:

b) factorial.html
<html>
<head>
<title>factorial</title>
<script language='javascript'>
function factorialcalc()
{
number = parseint(prompt("enter a number, i'll calculate its factorial", "whole
numbers bigger than zero, please"))

19
factorial = 1
for (i=1; i <= number; i++)
{
factorial = factorial * i
}
alert("the factorial of " + number + " is " + factorial)
}
</script>
</head>
<body><form name=frm>
<input type=button value='factorial' onclick="factorialcalc();">
</form>
</body>
</html>

c) multable.html
<html>
<head><title> Multiplication Table </title></head>
<body>
<script type="text/javascript">
<!--
var n=prompt("Enter positive value for n: "," ");
if(!isNaN(n)) {
var table="";
var number="";
for(i=1;i<=10;i++) {
number = n * i;
table += n + " * " + i + " = " + number + "\n";
}
alert(table);
}
else {
alert("Enter positive value");
n=prompt("Enter positive value for n: "," ");
}
document.write(n+" table values displayed using alert ..<br />");
// -->
</script>
</body>
</html>
OUTPUT

20
d) sum of n numbers.html
<html>
<head><title>sum of n numbers using popup boxes</title>
<script language='javascript'>
function addsum()
{
alert("you're going to give me a list of numbers. i'm going to add them together
for you");
var keepgoing = true
var sumofnums = 0
while (keepgoing) {
sumofnums = sumofnums + parseint(prompt("what's the next number to
add?",""))
keepgoing = confirm("add another number?")
}
alert("the sum of all your numbers is " + sumofnums)
}
</script>
</head>
<body>
<form name=frm>
<input type=button value='sum of n numbers' onclick="addsum();">
</form>
</body>
</html>

21
 Experiment 5

Write an HTML page that contains a selection box with a list of 5

countries. When the user selects a country, its capital should be printed
next in the list. Add CSS to customize the properties of the font of the
capital (color,bold and font size).

<html>
<head>
<title>WT Lab manual program no. 3</title>
</head>
<style>
h1
{
color: red;
text-align: center;
}
.textbox1
{
color: blue;
font-size: 30px;
font-weight: bold;
}
</style>
<body>
<center>
<h1> Select the country name to find its capital</h1>
<form name="myform">
Select Country <select name="country" id="sbox1"
onClick="myFunction()" required>
<option value=""></option>
<option value="NEW DELHI">INDIA</option>
<option value="CANBERRA">AUSTRALIA</option>
<option value="WASHINGTON D.C">AMERICA</option>
<option value="LONDON">UNITEDKINGDOM</option>
<option value="BERLIN">GERMANY</option>
</select><br><br>
Capital <input type="text" class="textbox1" id="sbox2">
</form>
</center>
<script>
function myFunction()
{ var a=document.getElementById("sbox1").value;
document.getElementById("sbox2").value=a; }
</script> </body> </html>
OUTPUT:

22
23
 Experiment 6

Write an HTML page including any required JavaScript that takes a

number from text field in the range of 0 to 999 and shows it in words. It
should not accept four and above digits, alphabets and special characters.

AIM: To convert number to words using JavaScript

PROGRAM:
0-999.html
<html>
<head>
<title>HTML - Convert numbers to words using JavaScript</title>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
<script>
function NumToWord(inputNumber, outputControl)
{
var str = new String(inputNumber)
var splt = str.split("");
var rev = splt.reverse();
var once = ['Zero', ' One', ' Two', ' Three', ' Four', ' Five', ' Six', ' Seven', '
Eight', ' Nine'];
var twos = ['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', '
Sixteen', '
Seventeen', ' Eighteen', ' Nineteen'];
var tens = ['', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', '
Seventy', ' Eighty', '
Ninety'];
numLength = rev.length;
var word = new Array();
var j = 0;
for (i = 0; i < numLength; i++) {
switch (i) {
case 0:
if ((rev[i] == 0) || (rev[i + 1] == 1)) {
word[j] = '';

24
 }
else {
word[j] = once[rev[i]];
}
word[j] = word[j];
break;
case 1:
aboveTens();
break;
case 2:
if (rev[i] == 0) {
word[j] = '';
}
else if ((rev[i - 1] == 0) || (rev[i - 2] == 0)) {
word[j] = once[rev[i]] + " Hundred ";
}
else {
word[j] = once[rev[i]] + " Hundred and";
}
break;
default: break;
}
j++;
}
function aboveTens() {
if (rev[i] == 0) { word[j] = ''; }
else if (rev[i] == 1) { word[j] = twos[rev[i - 1]]; }
else { word[j] = tens[rev[i]]; }
}
word.reverse();
var finalOutput = '';
for (i = 0; i < numLength; i++) {
finalOutput = finalOutput + word[i];
}
document.getElementById(outputControl).innerHTML = finalOutput;
}
</script>
</head>
<body>
<h1>HTML - Convert numbers to words using JavaScript</h1>
<input id="Text1" type="text" onkeypress="return isNumberKey(event)"
onkeyup="NumToWord(this.value,'divDisplayWords');" maxlength="3"
style="backgroundcolor: #efefef; border: 2px solid #CCCCC; font-size:
large" />
<br /> <br />
<div id="divDisplayWords" style="font-size: 30; color: Teal; font-family:
Arial;">

25
</div>
</body>
</html>
OUTPUT

26
 Experiment 7
Create a form using various form elements and print the values using
Java Script

<html>
<head><title>cust_detail</title>
<script type="text/javascript">
function f1()
{
for(var i=0;i<document.frm1.r1.length;i++)
{
if(document.frm1.r1[i].checked)
{
var c=document.frm1.r1[i].value;
}
}

for(var j=0;j<document.frm1.c1.length;j++)
{
if (document.frm1.c1[j].checked)
{
var d=document.frm1.c1[j].value;
}
}

for(var k=0;k<document.frm1.m1.length;k++)
{

if(document.frm1.m1[k].selected)

var e=document.frm1.m1[k].value;

for(var l=0;l<document.frm1.m2.length;l++)

if(document.frm1.m2[l].selected)

var f=document.frm1.m2[l].value;

27
 }
}

alert("name : "+(document.frm1.t1.value)+"\nfather name :

"+(document.frm1.t2.value)+"\ndob :
"+(document.frm1.t3.value)+"\ngender : "+c+"\nadress :
"+(document.frm1.t4.value)+"\ncontact num :
"+(document.frm1.t5.value)+"\ncourse : "+e+"\nBranch : "+f
+"\nqual : "+d+"\npercentage : "+(document.frm1.t6.value)+"\nemail
id: "+(document.frm1.t7.value));
}
</script>
</head>

<body>
<form name="frm1">
<table>
<tr><td>name</td><td>
<input type="textbox" name="t1"></td></tr>
<tr><td>Fathers name</td><td>
<input type="textbox" name="t2"></td></tr>
<tr><td>date of birth</td><td>
<input type="textbox" name="t3"></td></tr>
<tr><td>Gender</td><td>
<input type="radio" name="r1" checked="checked"
value="male">male</td><td>
<input type="radio" name="r1" value="female">female</td></tr>
tr><td>Address</td><td>
<input type="textbox" name="t4"></td></tr>
<tr><td>Contact no.</td><td>
<input type="textbox" name="t5"></td></tr>
<tr><td>course</td><td>
<select name="m1" ><option name="B.tech" value="B.tech"
>B.tech</option>
<option name="M.tech" value="M.tech">M.tech</option></td></tr>

<tr><td>branch</td><td><select name="m2"><option name="cs"

value="cs" >cs</option><option name="it" value="it">it</option>
<option name="ec" value="ec">ec</option></td></tr>
<tr><td>qualification</td><td><input type="checkbox" name="c1"
value="12th">12th</td><td><input type="checkbox" name="c1"
value="graduate">Graduate</td></tr>

<tr><td>percentage obtained</td><td><input type="textbox"

name="t6"></td></tr>
<tr><td>Email id</td><td>

28
 <input type="textbox" name="t7"></td></tr>
<tr><td><input type="submit" name="s1"
onClick="f1()"></td><td>
<input type="reset" name="s2"></td></tr>

</table>
</form>

</body>

</html>

OUTPUT

29
 Experiment 8

Write a AJAX program in which user will enter a number and table
of that will be displayed
<html> <head> <script>
var request;
function sendInfo() {
var v=document.vinform.t1.value;
var url="index.jsp?val="+v;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); }
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
Try {
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
} catch(e)
{
alert("Unable to connect to server"); } }

function getInfo(){
if(request.readyState==4){
var val=request.responseText;
document.getElementById('amit').innerHTML=val;
}
}
</script> </head>
<body>
<marquee><h1>This is an example of ajax</h1></marquee>
<form name="vinform">
<input type="text" name="t1">
<input type="button" value="ShowTable" onClick="sendInfo()">
</form>
<span id="amit"> </span>
</body>
</html>

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

• <%
• int n=Integer.parseInt(request.getParameter("val"));
• for(int i=1;i<=10;i++)
• out.print(i*n+"<br>");
• %>

30
31
 Experiment 9
To achieve this, we need to do the following:

Create an XML document containing the user information.

Write a JSP program that takes a user ID as input, reads the XML document, and
returns the user details.
Let's start with each step:

Step 1: Create the XML Document

We'll create an XML file named users.xml containing information for 10 users.
This file should be placed in a directory accessible to the JSP application (e.g.,
the WebContent directory).

users.xml:

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user>
<id>1</id>
<name>John Doe</name>
<email>[email protected]</email>
<age>30</age>
</user>
<user>
<id>2</id>
<name>Jane Smith</name>
<email>[email protected]</email>
<age>25</age>
</user>
<!-- Add 8 more users here -->
<user>
<id>3</id>
<name>Mike Johnson</name>
<email>[email protected]</email>
<age>35</age>
</user>
<user>
<id>4</id>
<name>Emily Davis</name>
<email>[email protected]</email>
<age>28</age>
</user>
<user>
<id>5</id>
<name>Robert Brown</name>
<email>[email protected]</email>
<age>40</age>
</user>

32
 <user>
<id>6</id>
<name>Linda Wilson</name>
<email>[email protected]</email>
<age>32</age>
</user>
<user>
<id>7</id>
<name>David Lee</name>
<email>[email protected]</email>
<age>29</age>
</user>
<user>
<id>8</id>
<name>Sarah Taylor</name>
<email>[email protected]</email>
<age>26</age>
</user>
<user>
<id>9</id>
<name>James Anderson</name>
<email>[email protected]</email>
<age>33</age>
</user>
<user>
<id>10</id>
<name>Laura Thomas</name>
<email>[email protected]</email>
<age>27</age>
</user>
</users>
Step 2: Create the JSP Program
We will create a JSP file named userDetails.jsp that will read the XML document
and return user details based on the provided user ID.

userDetails.jsp:

jsp
Copy code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.*, javax.xml.parsers.*, org.w3c.dom.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Details</title>
</head>
<body>
<h1>Get User Details</h1>
<form action="userDetails.jsp" method="get">
<label for="userId">Enter User ID:</label>

33
 <input type="text" id="userId" name="userId" required>
<input type="submit" value="Get Details">
</form>
<hr/>
<%
String userId = request.getParameter("userId");
if (userId != null && !userId.trim().isEmpty()) {
try {
File xmlFile = new File(application.getRealPath("/users.xml"));
DocumentBuilderFactory dbFactory =
DocumentBuilderFactory.newInstance();
DocumentBuilder dBuilder = dbFactory.newDocumentBuilder();
Document doc = dBuilder.parse(xmlFile);
doc.getDocumentElement().normalize();

NodeList nList = doc.getElementsByTagName("user");

boolean userFound = false;

for (int temp = 0; temp < nList.getLength(); temp++) {

Node nNode = nList.item(temp);
if (nNode.getNodeType() == Node.ELEMENT_NODE) {
Element eElement = (Element) nNode;
String id =
eElement.getElementsByTagName("id").item(0).getTextContent();
if (userId.equals(id)) {
userFound = true;
String name =
eElement.getElementsByTagName("name").item(0).getTextContent();
String email =
eElement.getElementsByTagName("email").item(0).getTextContent();
String age =
eElement.getElementsByTagName("age").item(0).getTextContent();
out.println("<h2>User Details</h2>");
out.println("<p>ID: " + id + "</p>");
out.println("<p>Name: " + name + "</p>");
out.println("<p>Email: " + email + "</p>");
out.println("<p>Age: " + age + "</p>");
break;
}
}
}

if (!userFound) {
out.println("<p>User with ID " + userId + " not found.</p>");
}
} catch (Exception e) {
e.printStackTrace();
out.println("<p>Error processing the request.</p>");
}
}
%>
</body>

34
</html>
Explanation:
Form to Get User ID:

A form is provided for the user to enter a user ID.

The form sends a GET request to the same JSP page (userDetails.jsp).
Processing the Input:

The JSP page checks if the userId parameter is provided.

It reads the users.xml file using the DOM parser.
It iterates through the <user> elements to find a match for the given user ID.
If a match is found, it displays the user details. If not, it shows a message
indicating the user was not found.
Running the Application:
Ensure users.xml is in the correct directory (WebContent).
Deploy your project to the Tomcat server.
Start Tomcat and access your JSP page via a web browser, typically at
http://localhost:8080/your_project/userDetails.jsp.
By following these steps, you will have a JSP application that reads an XML
document to retrieve and display user details based on the provided user ID.

35
 Experiment 10

Aim: Write a Servlet/ JSP program which takes value from HTML and print using Servlet/ JSP.

Index.html

<html>
<head>
</head>
<body>
<form name myform action="getParameter" method="post">
<input type="text" name="yourname" value="">
<input type="submit" value="submit">
</form>
</body>
</html>

getParameter.java

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

public class getParameter extends HttpServlet {

public void doPost(HttpServletRequest request,
HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name = request.getParameter("yourname");
out.println("<html>");
out.println("<body>");
out.println("<head>");
out.println("<title>Hello, Tell me your name again!</title>");
out.println("</head>");
out.println("<body>");
out.println("<h2>Hello, " + name + "</h2> <br>");
out.print("<form action=\"");
out.println("NamedHello\" method=POST>");
out.println("<input type=text length=20 name=yourname><br>");
out.println("<input type=submit></form>");
out.println("</body>");
out.println("</html>");
}}

36
 Experiment 11

Creating a JSP (JavaServer Pages) program that interacts with an Oracle

database involves several steps. Below is a simple example to guide you through
the process:

Set up your development environment:

Ensure you have JDK installed.

Set up an application server like Apache Tomcat.
Download the Oracle JDBC driver (ojdbc8.jar) and add it to your project
classpath.
Create the Oracle Database Table:
CREATE TABLE users (
id NUMBER GENERATED BY DEFAULT AS IDENTITY,
username VARCHAR2(50) NOT NULL,
password VARCHAR2(50) NOT NULL,
PRIMARY KEY (id)
);

Create a JSP Page to Display Data from Oracle Database:

Here’s a step-by-step guide with code examples:

a. Directory Structure:

b. web.xml Configuration (in WEB-INF/web.xml):

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">

<servlet>
<servlet-name>JSPServlet</servlet-name>
<jsp-file>/index.jsp</jsp-file>
</servlet>

<servlet-mapping>
<servlet-name>JSPServlet</servlet-name>
<url-pattern>/index.jsp</url-pattern>
</servlet-mapping>

</web-app>
c. JSP Page (index.jsp):

jsp
Copy code

37
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="oracle.jdbc.driver.OracleDriver" %>
<html>
<head>
<title>JSP Oracle Database Example</title>
</head>
<body>
<h1>Users List</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Username</th>
<th>Password</th>
</tr>
<%
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
conn =
DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe",
"your_username", "your_password");
stmt = conn.createStatement();
String sql = "SELECT id, username, password FROM users";
rs = stmt.executeQuery(sql);

while(rs.next()){
int id = rs.getInt("id");
String username = rs.getString("username");
String password = rs.getString("password");
%>
<tr>
<td><%= id %></td>
<td><%= username %></td>
<td><%= password %></td>
</tr>
<%
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try { if (rs != null) rs.close(); } catch (SQLException e) {
e.printStackTrace(); }
try { if (stmt != null) stmt.close(); } catch (SQLException e) {
e.printStackTrace(); }
try { if (conn != null) conn.close(); } catch (SQLException e) {
e.printStackTrace(); }
}
%>

38
 </table>
</body>
</html>
Deploy and Run the Application:

Copy your project to the webapps directory of your Tomcat server.

Start Tomcat and access your JSP page via a web browser, typically at
http://localhost:8080/your_project/index.jsp.
Note:

Replace your_username and your_password with your Oracle database

username and password.
Ensure the Oracle database is running and accessible.
The ojdbc8.jar file should be in the lib directory or included in the project
classpath.
By following these steps, you should have a basic JSP application that connects
to an Oracle database and displays data from a table.

39
 Experiment 12
To create a JSP (JavaServer Pages) program that prints the multiplication table
of a given number, you can follow these steps:

Set up your development environment:

Ensure you have JDK installed.

Set up an application server like Apache Tomcat.
Create the JSP page:

Here’s a simple example:

Directory Structure:

Copy code
your_project/
└── WebContent/
├── index.jsp
└── WEB-INF/
└── web.xml
web.xml Configuration (in WEB-INF/web.xml):

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>JSPServlet</servlet-name>
<jsp-file>/index.jsp</jsp-file>
</servlet>
<servlet-mapping>
<servlet-name>JSPServlet</servlet-name>
<url-pattern>/index.jsp</url-pattern>
</servlet-mapping>
</web-app>
JSP Page (index.jsp):

jsp
Copy code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

40
 <title>Multiplication Table</title>
</head>
<body>
<h1>Multiplication Table</h1>
<form action="index.jsp" method="get">
<label for="number">Enter a number:</label>
<input type="text" id="number" name="number" required>
<input type="submit" value="Generate Table">
</form>
<hr/>
<c:if test="${not empty param.number}">
<h2>Table for Number: ${param.number}</h2>
<table border="1">
<tr>
<th>Multiplier</th>
<th>Result</th>
</tr>
<%
int number = Integer.parseInt(request.getParameter("number"));
for (int i = 1; i <= 10; i++) {
%>
<tr>
<td><%= number %> x <%= i %></td>
<td><%= number * i %></td>
</tr>
<%
}
%>
</table>
</c:if>
</body>
</html>

A form is provided for the user to enter a number.

The form sends a GET request to the same JSP page (index.jsp).
Processing the Input:

The JSP page checks if the number parameter is not empty using the JSTL
<c:if> tag.
If the number parameter is provided, it parses it to an integer.
Generating the Multiplication Table:

The multiplication table for the entered number is generated using a for loop in
JSP.
The table displays the results in a simple HTML table.
Running the Application:
Deploy your project to the Tomcat server.
Start Tomcat and access your JSP page via a web browser, typically at
http://localhost:8080/your_project/index.jsp.
By following these steps, you should have a JSP application that generates and
displays the multiplication table for a given number input by the user.

41
 Experiment 13
JSP program without session Management

Index.html
<html>
<body>
<form action = "main.jsp" method = "GET">
First Name: <input type = "text" name = "first_name"> <br />
Last Name: <input type = "text" name = "last_name" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>

Main.jsp

<%-- Retrieve data from request parameters --%>

<% String fname = request.getParameter("first_name");
String lname = request.getParameter("last_name"); %>
<%-- Check if name and age are not empty --%>
<% if (fname != null && !fname.isEmpty() && lname != null &&
!lname.isEmpty()) { %>
<p>:fname: <%= fname %></p>
<p>:lname <%= lname %></p>
<% } else { %>
<p>Please enter both fname and lname.</p>
<% } %>
<html> <head><title>Without Cookies</title> </head>
<body> <center> <h1>Setting Cookies</h1> </center>
<ul> <li><p><b>First Name:</b>
<%= request.getParameter("first_name")%>
</p></li>
<li><p><b>Last Name:</b>
<%= request.getParameter("last_name")%>
</p></li> </ul>
<form action="withoutcookie.jsp" method="post">
<input type="submit" value="Want to go to third page">
</form> </body></html>

withoutcookie.jsp
<html> <head> <title>Reading Cookies</title> </head>
<body>
<center>
<h1>Setting Cookies</h1>
</center>
<p>Name: <%= fname %></p>
</body>

</html>

42
 Experiment 14

JSP program with session Management

Index.html

<html>
<body>

<form action = "main.jsp" method = "GET">

First Name: <input type = "text" name = "first_name">
<br />
Last Name: <input type = "text" name = "last_name" />
<input type = "submit" value = "Submit" />
</form>

</body>
</html>

<%
// Create cookies for first and last names.
Cookie firstName = new Cookie("first_name",
request.getParameter("first_name"));
Cookie lastName = new Cookie("last_name",
request.getParameter("last_name"));

// Set expiry date after 24 Hrs for both the cookies.

firstName.setMaxAge(60*60*24);
lastName.setMaxAge(60*60*24);

// Add both the cookies in the response header.

response.addCookie( firstName );
response.addCookie( lastName );
%>

Main.jsp

<html>
<head>
<title>Setting Cookies</title>
</head>

<body>
<center>
<h1>Setting Cookies</h1>
</center>
<ul>
<li><p><b>First Name:</b>
<%= request.getParameter("first_name")%>
</p></li>

43
 <li><p><b>Last Name:</b>
<%= request.getParameter("last_name")%>
</p></li>
</ul>
<form action="navigate.jsp" method="post">
<label for="url">Enter URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Go">
</form>

</body>
</html>

withCookie.html

<html>
<head>
<title>Reading Cookies</title>
</head>

<body>
<center>
<h1>Reading Cookies</h1>
</center>
<%
Cookie cookie = null;
Cookie[] cookies = null;

// Get an array of Cookies associated with the this domain

cookies = request.getCookies();

if( cookies != null ) {

out.println("<h2> Found Cookies Name and Value</h2>");

for (int i = 0; i < cookies.length; i++) {

cookie = cookies[i];
out.print("Name : " + cookie.getName( ) + ", ");
out.print("Value: " + cookie.getValue( )+" <br/>");
}
} else {
out.println("<h2>No cookies founds</h2>");
}
%>
</body>

</html>

44
 Experiment 15
Servlet Navigation

Important programs

• index.html file: for getting input from the user.

• Login.java file: a servlet class for processing the response. If password
is servet, it will forward the request to the welcome servlet.
• WelcomeServlet.java file: a servlet class for displaying the welcome
message.
• web.xml file: a deployment descriptor file that contains the information
about the servlet.

Index.html
<form method="post" action="Validate">
Name:<input type="text" name="user" /><br/>
Password:<input type="password" name="pass" ><br/>
<input type="submit" value="submit">
</form>

Validate.java

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Validate extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String name = request.getParameter("user");
String password = request.getParameter("pass");
if(password.equals(“abesit")) {
RequestDispatcher rd =
request.getRequestDispatcher("Welcome");
rd.forward(request, response);
} else {
out.println("<font color='red'><b>You have entered incorrect
password</b></font>");
RequestDispatcher rd =
request.getRequestDispatcher("index.html");
rd.include(request, response); }
}finally {
out.close(); } } }
welcome.java

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

45
import javax.servlet.http.*;
public class Welcome extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("<h2>Welcome user</h2>");
} finally {
out.close();
} }
}

46