Scribd
Upload
437 views212 pages

Gitam WT Lab Manual

The document outlines the steps for a web technology lab assignment to create a static homepage with 3 frames, including a top frame with navigation links, a left frame with additional links, and a right frame to display page content. It also provides source code for pages including a catalog page to display books for purchase and add to cart, and a cart page to view items added to the cart.

Uploaded by

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

Gitam WT Lab Manual

The document outlines the steps for a web technology lab assignment to create a static homepage with 3 frames, including a top frame with navigation links, a left frame with additional links, and a right frame to display page content. It also provides source code for pages including a catalog page to display books for purchase and add to cart, and a cart page to view items added to the cart.

Uploaded by

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

WEB TECHNOLOGY LAB

Week1:
Aim: A static homepage must contain 3
frames.
Top frame: Home, Login, Registration,
Catalogue and Cart page
Left frame: At least 4 links for navigation
Right frame: All pages to the links should load
here.
Sourecode: <-- Top.html >

<html>
<head>
</head>
<body>

Department of CSE,GST Page 1


WEB TECHNOLOGY LAB

<table height="252"

width="1256" border="1">

<tr>

<td align="center"><img

src="image.jpg" height="70"

width="70" ></td>

<th

colspan="4"><H1><B><I>ONLINE

BOOK STORE</I></B></H1></th>

</tr>

<tr>

Department of CSE,GST Page 2


WEB TECHNOLOGY LAB

<th><a href="home.html"

target="id3">Home</a></th>

<th><a href="login.html"

target="id3">Login</a></th>

<th><a href="registration.html"

target="id3">Registration</a></th> <th><a

href="catologue.html"

target="id3">Catologue</a></th> <th><a

href="cart.html" target="id3">Cart</a></th>

</tr>
</table>
</body>
Department of CSE,GST Page 3
WEB TECHNOLOGY LAB

</html>
< -- Left.html -->
<html>

<body>
<a href="cse.html"

target="id3">CSE</a><br> <a

href="ece.html" target="id3">ECE</a><br>

<a href="eee.html"

target="id3">EEE</a><br> <a

href="civil.html" target="id3">CIVIL</a>

</body>

</html>

Department of CSE,GST Page 4


WEB TECHNOLOGY LAB

< --Right.html -- >


<html>
<body>
<p align="center">
<font size="10" color="blue">
description
</font>
</p>
</body>
</html>

< --Homepage.html-- >


<html>
<head>
<frameset rows="40%,60%,*">
<frame src="top.html" name="id1" />

Department of CSE,GST Page 5


WEB TECHNOLOGY LAB

<frameset cols="20%,60%">
<frame src="left.html" name="id2" />
<frame src="right.html" name="id3" />
</frameset>
</head>
</html>

Department of CSE,GST Page 6


WEB TECHNOLOGY LAB

Department of CSE,GST Page 7


WEB TECHNOLOGY LAB

Department of CSE,GST Page 8


WEB TECHNOLOGY LAB

Aim: To create
contains LOGIN HTML page this
details.
Source code:
< -- LOGIN.html -- >
<html>
<body>
<table

align="ce

nter">

<form

action=su

ccess.htm

l>

Department of CSE,GST Page 9


WEB TECHNOLOGY LAB

<tr><td>

Username

:</td>

<td><input

type="text"

/></td>

</tr>

<tr><td>Password:</td>
<td><input

type="passw

ord"/></td>

</tr>
Department of CSE,GST Page 10
WEB TECHNOLOGY LAB

<tr><td><input

type="submit"

value=signin />

<input

type="reset"

value=clear />

</td>
</tr>
</form>
</table>
</body>
</html>

Department of CSE,GST Page 11


WEB TECHNOLOGY LAB

Output:
Homepage.html/Login

Department of CSE,GST Page 12


WEB TECHNOLOGY LAB

Week -1B
Aim: To create CATOLOGUE page
that should contain following fields.
1. Snap shot of cover page
2. Author Name
3. Publisher
4. Price
5. Add to cart button
Source code:
< -- Catologue.html -- >
<html>
<body>
<p align="center">COMPUTER
SCIENCE ENGINEERING</p>

<table align="center" height="100"


width="500" border="5">

Department of CSE,GST Page 13


WEB TECHNOLOGY LAB

<tr><td><img src="1.jpg"
height="50" width="50" alt="search
image"/></td>
<td>Book: XML Bible<br>
Author: Winston<br>
Publication: Wiely
</td>
<td>$40.5</td>
<td><input type="button"
value="Add to cart"/></td>
</tr>
<tr><td><img src="2.jpg"
height="50" width="50" alt="search
image"/></td>
<td>Book: AI<br>
Author: S.Russel<br>
Publication: Princeton hall
</td>
Department of CSE,GST Page 14
WEB TECHNOLOGY LAB

<td>$63</td>
<td><input type="button"
value="Add to cart"/></td>
</tr>
<tr><td><img src="3.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: Java 2<br>

Author: Watson<br>
Publication: BPB publications
</td>

<td>$

Department of CSE,GST Page 15


WEB TECHNOLOGY LAB

35.5</

td>

<td><input

type="button"

value="Add to

cart"/></td> </tr>

</table>
<p align="center">ELECTRICAL
AND ELECTRONICS
ENGINEERING</p>

<table align="center" height="100"


width="500" border="5">

Department of CSE,GST Page 16


WEB TECHNOLOGY LAB

<tr><td><img src="7.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: EDC<br>

Author: Winston<br>
Publication: Wiely
</td>

<td>$

40.5</

td>

<td><input

type="button"
Department of CSE,GST Page 17
WEB TECHNOLOGY LAB

value="Add to

cart"/></td> </tr>

<tr><td><img src="5.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: SATELLITE

COMMUNICATION<br>

Author: SAT<br>
Publication: Princeton hall
</td>

<td>

Department of CSE,GST Page 18


WEB TECHNOLOGY LAB

$63</

td>

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

</tr>
<tr><td><img src="6.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book:

ANTENNAS<br>

Author: Watson<br>
Publication: BPB publications

Department of CSE,GST Page 19


WEB TECHNOLOGY LAB

</td>

<td>$

35.5</

td>

<td><input

type="button"

value="Add to

cart"/></td> </tr>

</table>
<p align="center">CIVIL
ENGINEERING</p>

Department of CSE,GST Page 20


WEB TECHNOLOGY LAB

<table align="center" height="100"


width="500" border="5">
<tr><td><img src="11.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: FEDERALS OF

CIVIL PROCEDURE <br>

Author: Winston<br>
Publication: Wiely
</td>

<td>$

40.5</

td>
Department of CSE,GST Page 21
WEB TECHNOLOGY LAB

<td><input

type="button"

value="Add to

cart"/></td> </tr>

<tr><td><img src="12.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: CIVIL

PROCEDURE<br>

Author:

S.Russel<

Department of CSE,GST Page 22


WEB TECHNOLOGY LAB

br>

Publicatio

n:

Princeton

hall

</td>

<td>$

63</td

>

<td><input

type="button"

Department of CSE,GST Page 23


WEB TECHNOLOGY LAB

value="Add to

cart"/></td> </tr>

<tr><td><img src="13.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book:BULIDING

MATERIALS<br>

Author:

Watson<br>

Publication:

Department of CSE,GST Page 24


WEB TECHNOLOGY LAB

BPB

publications

</td>

<td>$

35.5</

td>

<td><input

type="button"

value="Add to

cart"/></td> </tr>

</table>

Department of CSE,GST Page 25


WEB TECHNOLOGY LAB

<p

align="center">ELECTRONI

CS AND

COMMUNICATION

ENGINEERING</p> <table

align="center" height="100"

width="500" border="5">

<tr><td><img src="3.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: java2<br>

Department of CSE,GST Page 26


WEB TECHNOLOGY LAB

Author: Winston<br>
Publication: Wiely
</td>

<td>$

40.5</

td>

<td><input

type="button"

value="Add to

cart"/></td> </tr>

<tr><td><img src="4.jpg"

height="50" width="50"
Department of CSE,GST Page 27
WEB TECHNOLOGY LAB

alt="search image"/></td>

<td>Book: SATELLITE

COMMUNICATIONS

<br>

Author:

S.Russel<

br>

Publicatio

n:

Princeton

hall

Department of CSE,GST Page 28


WEB TECHNOLOGY LAB

</td>

<td>

$63</

td>

<td><input type="button"
value="Add to cart"/></td>
</tr>
<tr><td><img src="5.jpg"

height="50" width="50"

alt="search image"/></td>

<td>Book: TELEPHONIC

COMMUNICATION<br>

Department of CSE,GST Page 29


WEB TECHNOLOGY LAB

Author: Watson<br>
Publication: BPB publications
</td>

<td>$

35.5</

td>

<td><input

type="button"

value="Add to

cart"/></td> </tr>

</table>
</body>
</html>
Department of CSE,GST Page 30
WEB TECHNOLOGY LAB

Output:
Homepage.html/Catalogue

Department of CSE,GST Page 31


WEB TECHNOLOGY LAB

Department of CSE,GST Page 32


WEB TECHNOLOGY LAB

Week2
Aim: To create a Cart page that
contains Detains about the books
which are added to the Cart.
Source code:
< -- Cart.html -->
<html>
<body><table>
<tr>
<th><h4>BOO

NAME</h4></t

h>

<TD><th><h4>
Department of CSE,GST Page 33
WEB TECHNOLOGY LAB

PRICE</h4></t

h></TD>

<TD><th><h4>

QUANTITY</h

4></th></TD>

<TD><th><h4>

AMOUNT</h4

></th></TD>

</tr>

<tr>

Department of CSE,GST Page 34


WEB TECHNOLOGY LAB

<th><h5>JAV

A2</h5></th

>

<TD><th><h

5>$35.5</h5>

</th></TD>

<TD><th><h

5>2</h5></th

></TD>

<TD><th><h

5>$70</h5><

Department of CSE,GST Page 35


WEB TECHNOLOGY LAB

/th></TD>

</tr>

<tr>
<th><h5>XM

BIBLE</h5>

</th>

<TD><th><h

5>$40.5</h5>

</th></TD>

<TD><th><h

Department of CSE,GST Page 36


WEB TECHNOLOGY LAB

5>1</h5></th

></TD>

<TD><th><h

5>$40.5</h5>

</th></TD>

</tr>

</table></body>
</html>
Output:
Cart.html

Department of CSE,GST Page 37


WEB TECHNOLOGY LAB

Week-2B
Aim: To create a “Registration form
“which contains following fields.
1. Name (Text field)
2. Password (password field)
3. E- mail id (text field)
4. Phone Number (text field)
5. Sex (radio button)
6. Date of birth (3 select boxes)
7. Languages Known (Check
boxes – English, Telugu, Hindi,
Tamil)
8. Address (Text area)
Source code:
< -- Registration.html-- >
<html>
<body>

Department of CSE,GST Page 38


WEB TECHNOLOGY LAB

<form

action=su

ccess.htm

l>

<table>

<tr><td>

Name:</t

d>

<td><input

type="text"

Department of CSE,GST Page 39


WEB TECHNOLOGY LAB

/></td>

</tr>

<tr><td>Password:</td>
<td><input

type="passw

ord"/></td>

</tr>

<tr><td>E

MAIL-

ID:</td>

<td><input

Department of CSE,GST Page 40


WEB TECHNOLOGY LAB

type="text"

/></td>

</tr>
<tr><td>PH

ONE

NUMBER:

</td>

<td><input

type="text"/

></td>

</tr>
<tr><td>SEX:</td>

Department of CSE,GST Page 41


WEB TECHNOLOGY LAB

<td><input type="radio"/
name="radiobutton"VALUE="male"
>M
<input type="radio"/
name="radiobutton"
VALUE="female">F</td>
</tr>
<tr><td>DOB:</td>
<td>
<select>
<option>DAY</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
Department of CSE,GST Page 42
WEB TECHNOLOGY LAB

<option>MONTH</option>
<option>JAN</option>
<option>FEB</option>
<option>MAR</option>
<option>APR</option>
</select>
<select>
<option>YEAR</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
</select></td>
</tr>
<tr><td>LANGUAGES
KNOWN:</td>

Department of CSE,GST Page 43


WEB TECHNOLOGY LAB

<td><input
type="checkb
ox"/>english
<input
type="checkb
ox"/>telugu
<input
type="checkb
ox"/>hindi
<input type="checkbox"/>tamil
</td>
</tr>
<tr><td>Address:</td>
<td><textarea
rows=5></text
area></td>
</tr>
<tr><td><input
type="submit"
Department of CSE,GST Page 44
WEB TECHNOLOGY LAB

value="submit"/
> <input
type="reset"
value="reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>

Output:
Registration.html

Department of CSE,GST Page 45


WEB TECHNOLOGY LAB

Department of CSE,GST Page 46


WEB TECHNOLOGY LAB

Department of CSE,GST Page 47


WEB TECHNOLOGY LAB

Week-3
Aim: Write JavaScript to validate the
following fields in registration page.
1. Name (Name should contains
alphabets and the length should not
be less than 6 characters)
2. Password (Password should not
be less than 6 characters length)
3. E- mail id (should not contain
any invalid and must follow the
standarn pattern [email protected])
4. Phone Number (Phone number
should contain 10 digits only)
And use PHP to connect with the
database to store the above details.
Source code:
<--

Registra
Department of CSE,GST Page 48
WEB TECHNOLOGY LAB

tion.htm

l>

<html>

<head>
<title>JavaScript Form

Validation using a sample

registration form</title>

<link rel='stylesheet'

href='js-form-validation.css'

type='text/css' /> <script

src="sample-registration-

Department of CSE,GST Page 49


WEB TECHNOLOGY LAB

form-

validation.js"></script>

</head>
<body

onload="document.registration.userid.f

ocus();"> <h1>Registration

Form</h1>

<p>Use tab keys to move from one


input field to the next.</p>
<form name='registration'

method="post" onSubmit="return

Department of CSE,GST Page 50


WEB TECHNOLOGY LAB

formValidation();"

action="data1.php"> <ul>

<li><label

for="userid">User

id:</label></li>

<li><input

type="text"

name="userid"

size="12" /></li>

<li><label

Department of CSE,GST Page 51


WEB TECHNOLOGY LAB

for="passid">Passwo

rd:</label></li>

<li><input

type="password"

name="passid"

size="12" /></li>

<li><label

for="username">Name:

</label></li>

<li><input type="text"

name="username"

Department of CSE,GST Page 52


WEB TECHNOLOGY LAB

size="50" /></li>

<li><label

for="address">Addres

s:</label></li>

<li><input type="text"

name="address"

size="50" /></li>

<li><label

for="country">Countr

y:</label></li>

<li><select name="country">

Department of CSE,GST Page 53


WEB TECHNOLOGY LAB

<option selected=""

value="Default">(Please

select a country)</option>

<option

value="Australia">Australia

</option>

<option

value="canada">

Canada</option>

<option

value="india">In

Department of CSE,GST Page 54


WEB TECHNOLOGY LAB

dia</option>

<option

value="russia">R

ussia</option>

<option

value="usa">US

A</option>

</select></li>

<li><label

for="zip">ZIP

Code:</label></li>

Department of CSE,GST Page 55


WEB TECHNOLOGY LAB

<li><input

type="text"

name="zip"

/></li> <li><label

for="email">Email

:</label></li>

<li><input type="text"

name="email"

size="50" /></li>

<li><label

Department of CSE,GST Page 56


WEB TECHNOLOGY LAB

id="gender">Sex:</lab

el></li>

<li><input type="radio"

name="sex" value="Male"

/><span>Male</span></li>

<li><input type="radio"

name="sex" value="Female"

/><span>Female</span></li>

<li><label>Language:</label></

li>

Department of CSE,GST Page 57


WEB TECHNOLOGY LAB

<li><input type="checkbox"

name="en" value="english"

checked /><span>English</span></li>

<li><input type="checkbox"

name="nonen" value="non-english"

/><span>Non English</span></li>

<li><label

for="desc">About:</label></li>

<li><textarea

name="desc"

id="desc"></textarea></li

Department of CSE,GST Page 58


WEB TECHNOLOGY LAB

> <li><input

type="submit"

name="submit"

value="Submit" /></li>

</ul>
</form>
</body>
</html>
< sample-registration-form-
validation.js>
function formValidation()
{
var uid = document.registration.userid;

Department of CSE,GST Page 59


WEB TECHNOLOGY LAB

Department of CSE,GST Page 60


WEB TECHNOLOGY LAB

var passid =
document.registration.passid;
var uname =
document.registration.userna
me; var uadd =
document.registration.addres
s; var ucountry =
document.registration.countr
y; var uzip =
document.registration.zip;
var uemail =
document.registra
tion.email; var
umsex =
document.registra
tion.msex; var
ufsex =
Department of CSE,GST Page 61
WEB TECHNOLOGY LAB

document.registra
tion.fsex;
if(userid_validati
on(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}

Department of CSE,GST Page 62


WEB TECHNOLOGY LAB

}
}
}
}
}
}
}
return false;
}
function
userid_validation(uid,mx,my)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my ||
uid_len < mx)
{
alert("User Id should not be
empty / length be between
"+mx+" to "+my); uid.focus();
return false;

Department of CSE,GST Page 63


WEB TECHNOLOGY LAB

}
return true;
}
function
passid_validation(passid,mx,my)
{
var passid_len = passid.value.length;

if (passid_len == 0 ||passid_len >=


my || passid_len < mx)
{
alert("Password should not be
empty / length be between
"+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
Department of CSE,GST Page 64
WEB TECHNOLOGY LAB

var letters = /^[A-Za-z]+$/;


if(uname.value.match(letter
s))
{
return true;
}
else
{
alert('Username must
have alphabet characters
only'); uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters
= /^[0-9a-zA-
Z]+$/;
if(uadd.value.
Department of CSE,GST Page 65
WEB TECHNOLOGY LAB

match(letters)
)
{
return true;
}
else
{
alert('User address must
have alphanumeric
characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "Default")
{
alert('Select your
country from the

Department of CSE,GST Page 66


WEB TECHNOLOGY LAB

list');
ucountry.focus();
return false;
}
else
{
return true;
}
}
function allnumeric(uzip)
{
var numbers
= /^[0-9]+$/;
if(uzip.value.
match(numbe
rs))
{
return true;
}

Department of CSE,GST Page 67


WEB TECHNOLOGY LAB

else
{
alert('ZIP code must
have numeric characters
only'); uzip.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+
([\.-]?\w+)*@\w+
([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mail
format))
{
return true;
}
else
{

Department of CSE,GST Page 68


WEB TECHNOLOGY LAB

alert("You have entered


an invalid email
address!");
uemail.focus();
return false;
}
}
function validsex(umsex,ufsex)
{
x=0;
if(umsex.checked)
{
x++;
}
if(ufsex.checked)
{
x++;
}
if(x==0)
{
Department of CSE,GST Page 69
WEB TECHNOLOGY LAB

alert('Select
Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Succesfully Submitted');
window.locatio
n.reload()
return true;
}
}

< --data1.php -- >


<html>
<body>
<?php
$userid1=$_POST
['userid'];
Department of CSE,GST Page 70
WEB TECHNOLOGY LAB

$passid1=$_POST
['passid'];
$username1=$_P
OST['username'];
$address1=$_POS
T['address'];
$country1=$_POS
T['country'];
$zip1=$_POST['zi
p'];
$email1=$_POST[
'email'];
$gender=$_POST[
'sex'];
$en1=$_POST['en
'];
$nonen1=$_POST
['nonen'];

Department of CSE,GST Page 71


WEB TECHNOLOGY LAB

$desc1=$_POST['
desc'];
if($en1=="english"&&$nonen1=="n
on-english")
{
$checkbox1=$en1+"and"+$nonen1;
}
else if($en1=="english")
{
$checkbox1=$en1;
}
else if($nonen1=="non-english")
{
$checkbox1=$nonen1;
}
$con=mysql_connect(
"127.0.0.1","root","");
if($con)
{
print "<br>"."connected to mysql";
Department of CSE,GST Page 72
WEB TECHNOLOGY LAB

}
$db_con=mysql_select_db("validdata
base",$con);
if($db_con)
{
print "<br>"."connected to database";
print "<br>";
print "<br>"."---------------database
data--------------"."<br>";

$sql="INSERT INTO
`validdatabase`.`data_validation` (
`userid` ,`password` , `name` ,
`address` , `country` , `zipcode` ,
`email` , `sex` , `language` , `about`
)
VALUES('$userid1','$passid1','$user
name1','$address1','$country1','$zip1'
,'$email1','$gender','$checkbox1','$de
sc1' )";
$result=mysql_query($sql);
Department of CSE,GST Page 73
WEB TECHNOLOGY LAB

$sql1="SELECT *
FROM
`data_validation`";
$result1=mysql_query($
sql1);
while($data=mysql_fetch_assoc($res
ult1))
{
print "<br>";
print
$data['userid']."<br>";
print
$data['password']."<br
>"; print
$data['name']."<br>";
print
$data['address']."<br>"
; print
Department of CSE,GST Page 74
WEB TECHNOLOGY LAB

$data['country']."<br>"
; print
$data['zipcode']."<br>"
; print
$data['email']."<br>";
print
$data['sex']."<br>";
print
$data['language']."<br
>"; print
$data['about']."<br>";
print "<br>";
}
}
?>
</body>
</html>
< -- js-form-validation.css -->
Department of CSE,GST Page 75
WEB TECHNOLOGY LAB

h1 {
margin-left: 70px;
}
f
o
r
m

li
{
li
st
-
st
y
l
e
:
n
o
Department of CSE,GST Page 76
WEB TECHNOLOGY LAB

n
e
;
margin-bottom: 5px;
form
ul li
label
{ floa
t:
left;
clear:
left;
width
:
100p
x;
text-
align:
right;
Department of CSE,GST Page 77
WEB TECHNOLOGY LAB

margin-right: 10px;
font-
family:Verdana,
Arial, Helvetica,
sans-serif; font-
size:14px;
}
form ul li
input,
select,
span
{ float:
left;
margin-bottom: 10px;
}
form
texta
rea {
float:
Department of CSE,GST Page 78
WEB TECHNOLOGY LAB

left;
widt
h:
350p
x;
heig
ht:
150p
x;
}
[type
="sub
mit"]
{ clea
r: left;
margin:
20px 0 0
230px;
font-
Department of CSE,GST Page 79
WEB TECHNOLOGY LAB

size:18p
x
}
p{
margi
n-left:
70px;
font-
weigh
t:
bold;
}

Department of CSE,GST Page 80


WEB TECHNOLOGY LAB

Department of CSE,GST Page 81


WEB TECHNOLOGY LAB

Database image:

Table image :

Department of CSE,GST Page 82


WEB TECHNOLOGY LAB

Registration.html

Department of CSE,GST Page 83


WEB TECHNOLOGY LAB

Userid validation:

Department of CSE,GST Page 84


WEB TECHNOLOGY LAB

Department of CSE,GST Page 85


WEB TECHNOLOGY LAB

Password validation:

Name validation:

Department of CSE,GST Page 86


WEB TECHNOLOGY LAB

Email id validation:

Database data:

Department of CSE,GST Page 87


WEB TECHNOLOGY LAB

Department of CSE,GST Page 88


WEB TECHNOLOGY LAB

Week-4
AIM:To implement:
a)Inline style sheet b)Embedded
style sheet c)External style sheet
To implement Inline style sheet
PR
OG
RA
M:
<ht
ml>
<hea
d>

Department of CSE,GST Page 89


WEB TECHNOLOGY LAB

<titl
e>
inline
style
sheet
</titl
e>
</head>
<body>
<p
style="fo
nt-
size:20pt
"> this is

Department of CSE,GST Page 90


WEB TECHNOLOGY LAB

an
example
</p>
<p
style="font-
size:30pt;col
or:red"> this
is second p
tag
</p>
</body>
</html>
OUTPUT:

Department of CSE,GST Page 91


WEB TECHNOLOGY LAB

Department of CSE,GST Page 92


WEB TECHNOLOGY LAB

B) To implement Embedded Style


sheet
PROGRAM:
<html>
<head>
<title>
embed
ded
style
sheet
</title>
<style
type="text/css">
h1{font-
size:30pt;color:red;
background-
Department of CSE,GST Page 93
WEB TECHNOLOGY LAB

color:yellow}
p{font-size:15pt}
p.blue{c
olor:blu
e}
h1.obj{f
ont-
style:ita
lic}
</style>
</head>
<body>
<h1 class=obj>
this is
example
of h1
Department of CSE,GST Page 94
WEB TECHNOLOGY LAB

tag
</h1>
<p>
this
is p
tag
</p
>
<h1>
this is
second
h1 tag
</h1>
<p class=blue>
this is
demo for
Department of CSE,GST Page 95
WEB TECHNOLOGY LAB

p
element
</p>
</body>
</html>

Department of CSE,GST Page 96


WEB TECHNOLOGY LAB

OUTPUT:

Department of CSE,GST Page 97


WEB TECHNOLOGY LAB

C) To implement External Style


sheet
PROGRAM:
CSS file:
a:hover{text-
decoration:underline;co
Department of CSE,GST Page 98
WEB TECHNOLOGY LAB

lor:red;background-
color:blue} h1
em{color:red}
li
em{color:yellow;bac
kground-
color:red;font-
weight:bold} ul
{margin-
left:2cm;color:red}
ul ul{text-
decoration:underline;margin-
left:1.5cm;color:yellow}

Department of CSE,GST Page 99


WEB TECHNOLOGY LAB

Department of CSE,GST Page 100


WEB TECHNOLOGY LAB

HTML file:
<html>
<head>
<title>external</tilte>
<link
type="text/css"
rel="stylesheet"
href="file.css">
</head>
<h1>courses
offered in
<em>DRKIST</e
m></h1> <ul>
<li>
mca</li>

Department of CSE,GST Page 101


WEB TECHNOLOGY LAB

<li>
b-
tech
<ul
>
<li>
cse
</li
>
<li>
ece
</li
>
<li>
eee
Department of CSE,GST Page 102
WEB TECHNOLOGY LAB

</li
>
</ul
>

</li>
<li>
mba<
/li>
<li>
m-
tech<
/li>
<li>m-
tech<em>:specialisat

Department of CSE,GST Page 103


WEB TECHNOLOGY LAB

ion S/w
Engineering</em></
li> </ul>
<a href
"http:homepage.h
tml">homepage.h
tml</a> </html>

Department of CSE,GST Page 104


WEB TECHNOLOGY LAB

OUTPUT:

Department of CSE,GST Page 105


WEB TECHNOLOGY LAB

Week-5
Aim: Write an XML file which will
display the Book information which
includes the following.
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher Name
5) Edition
6) Price
Write the Document Type Definition
(DTD) to validate the above XML
file.
Display the XML file as follows.

The Contents should be
displayed in a table. The header of
the table should be in color GREY
and the
Department of CSE,GST Page 106
WEB TECHNOLOGY LAB


Author names column should
be displayed in one color and
should be captalized and in
bold.Use your own color for
remaining columns.

Use XML schemas XSL and
CSS for the above purpose.
Note: Give at least for 4 books.It
should be valid syntactivally.
Hint: You can use some xml editors
like XML-spy.
Source code:
< -- Book info.html-->
<html>
<head>
<title>Book
Information</
title> <script
language="ja
vascript">
function fun_next()
Department of CSE,GST Page 107
WEB TECHNOLOGY LAB

{
e.recordset.moveNext();
if(e.recordset.EOF)
{
window.alert("End of File reached");
}}
function fun__prev()
{
e.recordset.movePrev();
if(e.recordset.BOF)
{
window.alert("End of File reached");
}}
function fun_first()
{
e.recordset.moveFirst();
}
function fun_last()
{

Department of CSE,GST Page 108


WEB TECHNOLOGY LAB

e.recordset.moveLast();
}
</script>
</head>
<body>
<form
name="fn"
align="center">
<xml id="e"
src="Book.xml"
>
</xml>
<table id="book" datasrc="#e"
dataPageSize="2" border="2"
width="100" height="100"
align="center">

Department of CSE,GST Page 109


WEB TECHNOLOGY LAB

<thead
bgcolor="grey">
<tr>
<th>NAME</th>
<th>AUTHOR</th>
<th>ISBN</th>
<th>PUBLISHER</th>
<th>EDITION</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="lightgreen"><span
datafld="NAME"></span></td>
<td bgcolor="lightblue"><b><span
datafld="AUTHOR"></span></b></
td>
<td bgcolor="lightgrey"><span
datafld="ISBN"></span></td>

Department of CSE,GST Page 110


WEB TECHNOLOGY LAB

<td bgcolor="lightgrey"><span
datafld="PUBLISHER"></span></td
> <td bgcolor="lightgreen"><span
datafld="EDITION"></span></td>
<td bgcolor="lightgreen"><span
datafld="PRICE"></span></td>
</tr>
</tbody>
</table>
<table align="center">
<input type="button" name="b1"
onClick="book.nextPage()"
value="Next"> <input
type="button" name="b2"
onClick="book.previousPage()"
value="Prev"> <input
type="button" name="b3"
onClick="book.firstPage()"
value="First"> <input

Department of CSE,GST Page 111


WEB TECHNOLOGY LAB

type="button" name="b4"
onClick="book.lastPage()"
value="Last"> </table>
</form>
</body>
</html>
< -- Book.xml -->
<?xml
version="1.0"
encoding="ISO-
8859-1"?> <?
xml-stylesheet
type="text/css"
href="Book_xsl.
xsl"?>
<CATALOG>
<BOOK>
<NAME>COMPLETE
REFERENCE</NAME>
Department of CSE,GST Page 112
WEB TECHNOLOGY LAB

<AUTHOR>HILBER
T
SCILTZ</AUTHOR>
<ISBN>1234</ISBN>
<PUBLISHER>TMH
</PUBLISHER>
<EDITION>SEVENT
</EDITION>
<PRICE>450</PRICE
>
</BOOK>
<BOOK>
<NAME>C LANGUAGE</NAME>
<AUTHOR>BALAGURUSWAMY<
/AUTHOR>
<ISBN>1235</ISBN>
<PUBLISHER>UNIVERSAL</PUB
LISHER>
<EDITION>FOURTH</EDITION>
<PRICE>250</PRICE>
Department of CSE,GST Page 113
WEB TECHNOLOGY LAB

</BOOK>
<BOOK>
<NAME>ASP.NET
</NAME>
<AUTHOR>O
REILLY</AUTHO
R>
<ISBN>1236</ISB
N>
<PUBLISHER>WRAX</PUBLISH
ER>
<EDITION>THIRD</EDITION>
<PRICE>350</PRICE>
</BOOK>
<BOOK>
<NAME>PHP</NA
ME>
<AUTHOR>KING
ADAM</AUTHOR
>
Department of CSE,GST Page 114
WEB TECHNOLOGY LAB

<ISBN>1237</ISBN
>
<PUBLISHER>DELHI</PUBLISH
ER>
<EDITION>SECON</EDITION>
<PRICE>150</PRICE>
</BOOK>
</CATALOG>
< -- Book_xsl .xsl -->
<?xml version="1.0"
encoding="ISO-8859-1"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://w
ww.w3.org/1999/X
SL/Transform">
<xsl:tem
plate
match="/
Department of CSE,GST Page 115
WEB TECHNOLOGY LAB

">
<html>
<h2
align="center">
BOOKS
CATALOG</h2
> <table
border="1"
align="center">
<tr>
<th>NAME</th>
<th>AUTHOR</th>
<th>PUBLISHER</th>
<th>ISBN</th>
<th>EDITION</th>
<th>PRICE</th>
<th>Cart</th>
</tr>
<xsl:for-each
select="CATAL
Department of CSE,GST Page 116
WEB TECHNOLOGY LAB

OG/BOOK">
<tr>
<td><xsl:value-of
select="NAME"/></td>
<td
bgcolor="yellow"><b><xs
l:value-of
select="AUTHOR"/></b>
</td> <td><xsl:value-of
select="PUBLISHER"/></t
d>
<td><xsl:value-of
select="ISBN"/></t
d> <td><xsl:value-
of
select="EDITION"/
></td>
<td><xsl:value-of
select="PRICE"/><

Department of CSE,GST Page 117


WEB TECHNOLOGY LAB

/td> <td><input
type="button"
value="Add
Cart"/></td>
</tr>
</xsl:
for-
each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
< -- Output -- >

Department of CSE,GST Page 118


WEB TECHNOLOGY LAB

Department of CSE,GST Page 119


WEB TECHNOLOGY LAB

Department of CSE,GST Page 120


WEB TECHNOLOGY LAB

Department of CSE,GST Page 121


WEB TECHNOLOGY LAB

Week-6
Aim: Installation of Tomcat Apache 5.0
Apache Tomcat Installation:
Here we install Apache Tomcat 5.0
version. After download Tomcat we have
to follow the steps described
below.
Step: 1
Click on ‘jar’ file to run Tomcat. Then
the window appears like

Click on “Next” button to continue


install wizard.
Department of CSE,GST Page 122
WEB TECHNOLOGY LAB

Step: 2
Then the agreement license will appear
click on “I agree” to continue
Installation.

Department of CSE,GST Page 123


WEB TECHNOLOGY LAB

Step 3:
Component box will appear. Choose
which component you want and click
“next” to go to next wizard.

Step 4:
Select the path at where you want to
save the installation files, as default it
Department of CSE,GST Page 124
WEB TECHNOLOGY LAB

selects path as shown below. If you need


to change the path then click on
“Browse” and select the path. Then click
on “Next” button to continue.

Department of CSE,GST Page 125


WEB TECHNOLOGY LAB

Step 4:
Then a window appears as it to specify
connector the port. And Administrator
login also there then it takes user name
as ‘admin’. As default it took “8081” as
shown below.

Department of CSE,GST Page 126


WEB TECHNOLOGY LAB

Step 5:
If there is any other process in that port
like ‘Oracle’ then we need change the
port number as shown and
click “Next” to go to next wizard. Here I
gave port “8081”

Department of CSE,GST Page 127


WEB TECHNOLOGY LAB

Department of CSE,GST Page 128


WEB TECHNOLOGY LAB

Step 6:
Then we have to choose select the path
of the JVM installed in our computer.
Automatically it took if it does not
select then we need to set the path.
Then click on “Install” to install the
files.

Department of CSE,GST Page 129


WEB TECHNOLOGY LAB

Step 7:
The files are extracted and installation is
running. If you want to know the details
of installation files click on “Show
details”. Then click on “Next”.

Department of CSE,GST Page 130


WEB TECHNOLOGY LAB

Step 8: This
is final wizard of installing Apache
Tomcat. Mark the option to Run Apache
Tomcat. And finally
click on “Finish” to finish the
installation.

Department of CSE,GST Page 131


WEB TECHNOLOGY LAB

Servlet Execution Using Tomcat


Apache
Program: (login.html)
<html>
<head>
<title>loginpage</title>
</head>
<body>
<center>
<form
action="http://localhost:8091/main/welc
ome1">
username<input type="text/html"
length="10" name="t1">
<br>

Department of CSE,GST Page 132


WEB TECHNOLOGY LAB

password<input
type="password"length="10"
name="t2">

Department of CSE,GST Page 133


WEB TECHNOLOGY LAB

<br>
<input

type="submit

"

value="submi

t"> </form>

</centre>
</body>
</html>
Program

Department of CSE,GST Page 134


WEB TECHNOLOGY LAB

(valid.jav

a) import

javax.ser

vlet.*;

import

javax.ser

vlet.http.

*; import

java.io.*;

public class valid extends HttpServlet


{

Department of CSE,GST Page 135


WEB TECHNOLOGY LAB

public void
Service(HttpServletRequest
request,HttpServletResponse
response)throws
ServletException,IOException
{
response.set

ContentType(

"text/html");

PrintWriter

out=response

.getWriter();

String ss=" ";

Department of CSE,GST Page 136


WEB TECHNOLOGY LAB

String

s1=request.g

etParameter(

"t1"); String

s2=request.g

etParameter(

"t2");

if(s1.equalsIgnoreCase("akhil")&&s2
.equalsIgnoreCase("ravi"))
ss="

Succ

Department of CSE,GST Page 137


WEB TECHNOLOGY LAB

ess";

else

ss="INVALID and tryagain";


out.println("your

username and

password

are"+ss);

out.close();

Department of CSE,GST Page 138


WEB TECHNOLOGY LAB

Department of CSE,GST Page 139


WEB TECHNOLOGY LAB

}
}
Program: (Web.xml)
<web-app>
<servlet>
<servlet-name>Valid</servlet-name>
<servlet-class>Valid</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Valid</servlet-name>
<url-pattern>/welcome1
</url-pattern>
</servlet-mapping>
</web-app>

Department of CSE,GST Page 140


WEB TECHNOLOGY LAB

Output:
How to compile servlet tomcat using
HTML and .java File.

In Apache Software Foundation ->


Tomcat 5.0 -> webapps -> (create a
main folder) main (place html or jsp
file here) ->IN WEB-INF (folder,
create two sub folders) -> classes
(folder) & lib (folder) and paste
web.xml file ->
paste .java file in classes.

Department of CSE,GST Page 141


WEB TECHNOLOGY LAB

Department of CSE,GST Page 142


WEB TECHNOLOGY LAB

Department of CSE,GST Page 143


WEB TECHNOLOGY LAB

Department of CSE,GST Page 144


WEB TECHNOLOGY LAB

Aim: Install a database (Mysql or


Oracle)
PROGRAM/PROCEDURE:
The following outline describes the steps
required to install Personal Oracle8i on
the Microsoft Windows 98 operating
system. It is assumed that this is a fresh
install and that no other Oracle products
are installed at this time. If this is not the
case, then these instructions may not
work on your system.
The Installation Process
As with most Windows installation
programs, inserting the CD-ROM into
the CD-ROM drive automatically
executes the setup program. (If this does
not happen, use the Windows Explorer
to view the contents of your CD-ROM
Department of CSE,GST Page 145
WEB TECHNOLOGY LAB

drive and double click on the "setup"


program there).
If you downloaded the Personal
Oracle8i from Oracle Technet, then you
need to unzip the files into a temporary
directory and double click on the
setup.exe program to get the
installation process started.
The following Welcome window will
appear:

Department of CSE,GST Page 146


WEB TECHNOLOGY LAB

Department of CSE,GST Page 147


WEB TECHNOLOGY LAB

It is assumed that this is a fresh install so


no other Oracle products should be
installed at this time.
Click on the Next button to move to the
File Locations screen as shown below:

Department of CSE,GST Page 148


WEB TECHNOLOGY LAB

In this screen, the Source and


Destination locations must be selected.
The Source path should reflect your
CD-ROM. Leave this as the default. In
the example above, the CD-ROM is the
E: drive.
For the Destination, leave the Oracle
Home named OraHome81 as the
default. Choose a hard disk drive that
has at least 2 gigabytes of free space. In
the example here, we are using the C:
drive.
Leave the \Oracle\Ora81 path as it is (the
default).
Click on the Next button to load the
Product information. This may take up to
2 minutes (depending on the speed of
your machine). During this time, the
following window will

Department of CSE,GST Page 149


WEB TECHNOLOGY LAB

appear:

Department of CSE,GST Page 150


WEB TECHNOLOGY LAB

Department of CSE,GST Page 151


WEB TECHNOLOGY LAB

Department of CSE,GST Page 152


WEB TECHNOLOGY LAB

Note that if you are running Windows


95, Windows NT or Windows 2000, you
will most likely see the following error
message:
"Invalid Staging Area. There are no top
level components for Windows NT (or
95) available for install from this
staging area."
Once the product information has been
read, the following 3 "Available
Products" options are presented:

Department of CSE,GST Page 153


WEB TECHNOLOGY LAB

Make sure the "Oracle8i Typical


Installation 8.1.5" is selected and click
on the Next button.
The "Type of Starter Database" screen
will appear next:

Department of CSE,GST Page 154


WEB TECHNOLOGY LAB

Make sure the "Standard Starter


Database" option is selected and
click on the Next button to continue.
Department of CSE,GST Page 155
WEB TECHNOLOGY LAB

The next step is to identify the


database using the Global database
name:

Department of CSE,GST Page 156


WEB TECHNOLOGY LAB

Department of CSE,GST Page 157


WEB TECHNOLOGY LAB

Leave this as the default. Make a


note of the following:
Oracle SID is ORCL
Global Database Name is oracle
Click on the Next button to continue
to the "Location of Documentation"
screen

Department of CSE,GST Page 158


WEB TECHNOLOGY LAB

Department of CSE,GST Page 159


WEB TECHNOLOGY LAB

Department of CSE,GST Page 160


WEB TECHNOLOGY LAB

In this step, you need to select where the


Oracle documentation will reside. If you
have the extra free space on your hard
disk (140MB or so), then choose the
"Hard Disk" option. Otherwise, choose
the "CD-ROM" option and links will be
made to the Oracle 8i CD-ROM for
documentation support. This means that
in order to view Oracle documentation,
you will need to have the CD in the CD-
ROM drive.
Click on the Next button to move to the
"Summary" screen:

Department of CSE,GST Page 161


WEB TECHNOLOGY LAB

Department of CSE,GST Page 162


WEB TECHNOLOGY LAB

Department of CSE,GST Page 163


WEB TECHNOLOGY LAB

In this screen (shown above), the


products and files that will be installed
are summarized. Note that in this
example (with documentation to be
copied to the hard disk), it will take
close to 600 MB of disk space for the
installation.
If everything looks OK at this point,
click on the Install button to begin the
installation.

Department of CSE,GST Page 164


WEB TECHNOLOGY LAB

Department of CSE,GST Page 165


WEB TECHNOLOGY LAB

Department of CSE,GST Page 166


WEB TECHNOLOGY LAB

During the install, you will notice


various Oracle products being copied
over to the hard disk. For example, in
the above figure, Net8 is being copied
over.
Once the installation is completed, the
last step will be to exit the installation
and then reboot the computer.
Department of CSE,GST Page 167
WEB TECHNOLOGY LAB

In the figure below, the Exit button has


been clicked on. Click on the Yes button
to confirm exiting the Installation
program.

Department of CSE,GST Page 168


WEB TECHNOLOGY LAB

Department of CSE,GST Page 169


WEB TECHNOLOGY LAB

Department of CSE,GST Page 170


WEB TECHNOLOGY LAB

At this point, be sure to reboot


your computer so any final changes
can take affect. In particular, the
path c:\oracle\ora81\bin will be
added to the PATH statement in
your c:\autoexec.bat file.

New Program Groups


After Personal Oracle8i is installed, you
will notice several new program groups
in the Start menu. These include:
 Oracle Installation Products
Tools to help manage the installation
and removal of Oracle products on the
machine.
 Oracle - OraHome81
The set of tools used to work with
Personal Oracle8i. These include:
o Application Development - Tools
to develop Oracle applications
including SQL*Plus o Database
Department of CSE,GST Page 171
WEB TECHNOLOGY LAB

Administration - Tools to start up


and shut down the database server
o Migration Utilities - Tools to migrate
older Oracle databases to version 8i
o Network Administration - Tools to
configure connections to other Oracle
servers.

Department of CSE,GST Page 172


WEB TECHNOLOGY LAB

Department of CSE,GST Page 173


WEB TECHNOLOGY LAB

Starting and Stopping the Database


The first step to working with Oracle is
to start up the database. This must be
done each time the computer is
rebooted. By default, the database is
shut down until you start it up. Before
shutting down Windows, the database
should be shut down.
To start up Personal Oracle8i, go to Start
-> Programs -> Oracle - OraHome81 ->
Database Administration and run the
Start Databasecommand as shown in the
figure below:

Department of CSE,GST Page 174


WEB TECHNOLOGY LAB

Once Personal Oracle8i has started, the


following dialog box will appear:

Click the OK button to close the dialog


box.
Again, remember to shut the database
down before you turn off your computer
by using the Stop
Database command on the following
program group: Start -> Programs ->
Oracle - OraHome81 -> Database
Administration

Department of CSE,GST Page 175


WEB TECHNOLOGY LAB

Testing the Installation


Once the database is running, the
SQL*Plus tool can be used to connect to
the database.
Go to the Start -> Programs -> Oracle -
OraHome81 -> Application
Development program group and run the
SQL Plus command as shown below:

Once SQL Plus is running, you will be


prompted for 3 things: Username,
password and Host String.

Department of CSE,GST Page 176


WEB TECHNOLOGY LAB

The default Database Administrator's


account has a username of SYSTEM and
a default password of MANAGER.
Fill in the Username and password fields
with the SYSTEM account and leave the
Host String field blank. Since we are
connecting to a local Oracle database, no
Host String is required. Click on the OK
button as shown below:

If the database is running and the


username and password are typed
correctly, SQL*Plus should log the
SYSTEM user in and present the SQL>
prompt as shown below:

Department of CSE,GST Page 177


WEB TECHNOLOGY LAB

Department of CSE,GST Page 178


WEB TECHNOLOGY LAB

One of the first things to do is to change


the SYSTEM user's default password.
This can be accomplished using the
GRANT command as follows:
GRANT CONNECT TO system
IDENTIFIED BY newpassword ;
where newpassword is a secret password
you make up. Don't forget the semi-
colon at the end of the command.
Another common task is to create a
"regular" user for application
development. This can be accomplished

Department of CSE,GST Page 179


WEB TECHNOLOGY LAB

using the CREATE USER command as


seen below:

Department of CSE,GST Page 180


WEB TECHNOLOGY LAB

Department of CSE,GST Page 181


WEB TECHNOLOGY LAB

By default, you can also log in with the


SCOTT/TIGER account. That is, there
is a demo account already set up in the
database with username SCOTT and
password TIGER. Many of the examples
in the Oracle documentation use the
tables included in the SCOTT user's
account.
Department of CSE,GST Page 182
WEB TECHNOLOGY LAB

Department of CSE,GST Page 183


WEB TECHNOLOGY LAB

Department of CSE,GST Page 184


WEB TECHNOLOGY LAB

Creation Of Table in Oracle

Department of CSE,GST Page 185


WEB TECHNOLOGY LAB

Week-8
How to Create Data Source Name
(DSN) using oracle:
Go To Control Panel -> Choose
Administrative Tools

Department of CSE,GST Page 186


WEB TECHNOLOGY LAB

Department of CSE,GST Page 187


WEB TECHNOLOGY LAB

Choose Data Sources in


Administrative Tools

Choose System DSN in ODBC Data


Source Administrator

Department of CSE,GST Page 188


WEB TECHNOLOGY LAB

Click Add in System DSN

Choose Microsoft ODBC for Oracle


then Click Finish

Department of CSE,GST Page 189


WEB TECHNOLOGY LAB

Give Data Source Name and


Username of Oracle then Click OK

Now DSN is visible in System DSN

Department of CSE,GST Page 190


WEB TECHNOLOGY LAB

User Authentication Using JSP &


JDBC
Program: (index.jsp)
<html>
<script>
function Validate()
{
var

uid=document.getElemen

tById("uid").value; var

pwd=document.getEleme

ntById("pwd").value;

Department of CSE,GST Page 191


WEB TECHNOLOGY LAB

if(uid.length!=0 &&

pwd.length!=0)

{
return true;
}
else
{
alert("Missing UserName

or Password"); return

false;

}
}
</script>
<head>
<title>Login</title>
Department of CSE,GST Page 192
WEB TECHNOLOGY LAB

</head>
<body>
<form

action="confirm.jsp

" method="post">

<table>

<tr><th></th><th>Login</th></tr>
<tr><td>User

Name:</td><td><input type="text"

id="uid" name="uid"></td></tr>

<tr><td>Password:</td><td><input

type="password" id="pwd"

name="pwd"></td></tr>
Department of CSE,GST Page 193
WEB TECHNOLOGY LAB

<tr><td><input
type="submit"
value="Submit"
onclick="return
Validate()"></td><td><input
type="reset"></td></tr>

</table>
</form>
</body>
</html>

Program: (Confirm.jsp)
<html>
</html>
<%@page

import="jav

Department of CSE,GST Page 194


WEB TECHNOLOGY LAB

a.sql.*"%>

<%

try
{
String

uid=request.getPara

meter("uid"); String

pwd=request.getPara

meter("pwd"); String

pass="";

Class.forName("sun.jdbc.odbc.JdbcO
dbcDriver");

Department of CSE,GST Page 195


WEB TECHNOLOGY LAB

Connection

con=DriverManager.getConnection("

jdbc:odbc:oracle","sysman","tharun")

; PreparedStatement

ps=con.prepareStatement("select *

from users where id=?");

ps.setString(1,uid);

ResultSet

rs=ps.executeQue

ry(); int flag=0;

while(rs.next())
{
Department of CSE,GST Page 196
WEB TECHNOLOGY LAB

pass=rs.getString(2);
if(pass.equals(pwd))
{
flag=1;
}
else
{

flag=0;
}
}

if(flag==1)
{
out.print("Success");
}
else
Department of CSE,GST Page 197
WEB TECHNOLOGY LAB

out.print("Login Failed .. try again <a


href=index.jsp>Click Here</a>");
}
catch(Exception e)
{
out.print(e);
}
%>

Department of CSE,GST Page 198


WEB TECHNOLOGY LAB

Department of CSE,GST Page 199


WEB TECHNOLOGY LAB

Department of CSE,GST Page 200


WEB TECHNOLOGY LAB

Week-9
JDBC
PRAC
TICE:
Progra
m:
(index.j
sp)
<html>
<script>
function Validate()
{
var
uid=document.getElementB
yId("uid").value; var
pwd=document.getElement
ById("pwd").value; var
rpwd=document.getElement
ById("rpwd").value;

Department of CSE,GST Page 201


WEB TECHNOLOGY LAB

if(uid.length!=0 && pwd.length!=0


&& pwd.equals(rpwd))
{
return true;
}
else
{
alert("Wrong Entry Of
Data"); return false;
}
}
</script>
<head>
<title>Register</title>
</head>
<form
action="regis
ter.jsp">
<body>
<h2 align=center>Register</h2>
<br/> User Name : <input
type="text" id="uid"
Department of CSE,GST Page 202
WEB TECHNOLOGY LAB

name="uid"> <br/>
Password : <input
type="password" id="pwd"
name="pwd">
<br/> Retype-Password : <input
type="password" id="rpwd"
name="rpwd"> <br/> e-mail :
<input type="text" id="em"
name="em">
<br/> Ph No : <input type="text"
id="ph" name="ph">
<br/> <input type="submit"
value="Submit" onclick="return
Validate()"><input type=reset>
</body>
</form>
</html>
Progra
m:
(Registe
r.jsp)
<html>
Department of CSE,GST Page 203
WEB TECHNOLOGY LAB

</html>
<%@page
import="jav
a.sql.*" %>
<%
try
{
String
uid=request.getPa
rameter("uid");
String
pwd=request.getP
arameter("pwd");
String
em=request.getPa
rameter("em");
String
ph=request.getPar
ameter("ph");
Class.forName("sun.jdbc.odbc.JdbcOd
bc");

Department of CSE,GST Page 204


WEB TECHNOLOGY LAB

Connection
con=DriverManager.getConnectio
n("jdbc:odbc:oracle","sysman","th
arun"); PreparedStatement
ps=con.prepareStatement("insert
into register values(?,?,?,?)");
ps.setString(1,uid);
ps.setString(2,pwd);

Department of CSE,GST Page 205


WEB TECHNOLOGY LAB

Department of CSE,GST Page 206


WEB TECHNOLOGY LAB

ps.setString(3,em);
ps.setString(4,ph);
int
i=ps.execut
eUpdate();
if(i>0)
out.print("Insertion Successful <a
href=index.jsp>Click here to Add
More</a>");
else
out.print("Insertion Failed <a
href=index.jsp>Click here to Add
More</a>");
}
catch(Exception e)
{
out.print(e);
}
%>
Department of CSE,GST Page 207
WEB TECHNOLOGY LAB

Program: (Web.xml)
<w
eb-
app
>
</w
eb-
app
>
OUTPUT:

Department of CSE,GST Page 208


WEB TECHNOLOGY LAB

Department of CSE,GST Page 209


WEB TECHNOLOGY LAB

Department of CSE,GST Page 210


WEB TECHNOLOGY LAB

Department of CSE,GST Page 211


WEB TECHNOLOGY LAB

Department of CSE,GST Page 212

You might also like