Vous êtes sur la page 1sur 84

JNTUWORLD

WEB TECHNOLOGIES LAB MANUAL


BY
R.V.S.LALITHA

Week-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.
Top frame : Logo and the college name and links to Home page, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
Left frame : At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link CSE the catalogue for CSE Books should be
displayed in the Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains
description of the web site.
2) LOGIN PAGE:
This page looks like below:
Logo
Web Site Name
Home Login Registration Catalogue Cart
CSE
ECE
EEE
CIVIL
3) CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a table.
The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
Note: Week 2 contains the remaining pages and their description.
HOME
<!--onlinebook.html-->
<!--designing webpage foronline book store-->
<html>
<head><title>online book store</tilte>
<frameset rows="25%,*">
<frame src="top.html" scrolling="no" name="top">
<frameset cols="15%,*">
<frame src="left.html" scrolling="no"name="left">
<frame src="right.html" name="right">
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
</head>
</html>

TOP
<!--top.html-->
<html>
<head><title>top</title>
</head>
<body>
<table border="2" bgcolor="pink">
<tr>
<td><img src="ebooks.jpg" height="100" width="120"></img></td>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<td colspan="6" align="center" width="100%"><h1><font color="cyan">Online Book
Store</font></h1></td>
</tr>
<tr align="center" bgcolor="#00ADAD" >
<td><a href="home.html" target="right"><font color="#ffff00">Home</font></a></td>
<td><a href="login.html" target="right"><font color="#ffff00">Login</font></a></td>
<td><a href="registration.html" target="right"><font color="#ffff00">Registration</font></a></td>
<td><a href="catalogue.html" target="right"><font color="#ffff00">Catalogue</font></a></td>
<td><a href="cart.html" target="right"><font color="#ffff00">Cart</font></a></td>
</tr>
</table>
</body>
</html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

LOGIN
<!--login.html-->
<html>
<head><title>login</title>
<script type="text/javascript">
function one()
{
var a=f.uname.value;
var b=f.pwd.value;
if(a=="aditya" && b=="aditya")
alert("Authenticated");
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
else
alert("Retry");
}
</script>
</head>
<body>
<form name="f">
<div align="center">
Username:<input type="text" size="10" name="uname" value=""/><br><br>
Password:<input type="password" size="10" name="pwd" value=""/><br><br>
<input type="submit" value="submit" onclick="one()"/>
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


CATALOGUE
<!--catalogue.html-->
<html>
<head><title>catalogue</title>
<body>
<table width="100%" height="100%">
<tr>
<td><img src="html.jpg" width="100" height="100"/></td>
<td>Name:Balaguru swamy<br>
Title:c<br>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Publications:ss</td>
<td>Price:$50</td>
<td><input type="image" src="ADDTOCART.bmp"
width="50" height="35"/></td>
</tr>
<tr>
<td><img src="css.jpg" width="100" height="100"/></td>
<td>Name:michael Bowers<br>
Title:css<br>
Publications:Apress</td>
<td>Price:$30</td>
<td><input type="image" src="ADDTOCART.bmp"
width="50" height="35"/></td>
</tr>
<tr>
<td><img src="getimg.jpg" width="100" height="100"/></td>
<td>Name:Brett spell<br>
Title:java<br>
Publications:Apress</td>
<td>Price:$50</td>
<td><input type="image" src="ADDTOCART.bmp"
width="50" height="35"/></td>
</tr>
<tr>
<td><img src="html.jpg" width="100" height="100"/></td>
<td>Name:Elizapeth<br>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Title:html<br>
Publications:ss</td>
<td>Price:$50</td>
<td><input type="image" src="ADDTOCART.bmp"
width="50" height="35"/></td>
</tr>
</table>
</body>
</html>

LEFT
<!--left.html-->
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<html>
<head><title>left</title>
</head>
<body>
<table width="100%" height="100%">
<tr align="center" bgcolor="pink">
<td><a href="cse.html" target="right">CSE</a></td>
</tr>
<tr align="center" bgcolor="#00ffff" ><td><a href="ece.html" target="right">ECE</a></td>
</tr>
<tr align="center"bgcolor="#ffff00"><td><a href="eee.html" target="right">EEE</a></td>
</tr>
<tr align="center" bgcolor="#ff00ff"><td><a href="mech.html" target="right">MECH</a></td>
</tr>
</table>
</body>
</html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

CSE
<!--cse.html-->
<html>
<head><title>cse</title>
<body>
<table width="100%" height="100%">
<tr>
<td><img src="html.jpg" width="100" height="100"/></td>
<td>Name:Balaguru swamy<br>
Title:c<br>
Publications:ss</td>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<td>Price:$50</td>
<td><input type="image" src="html.jpg"
width="15" height="15"/></td>
</tr>
<tr>
<td><img src="css.jpg" width="100" height="100"/></td>
<td>Name:michael Bowers<br>
Title:css<br>
Publications:Apress</td>
<td>Price:$30</td>
<td><input type="image" src="css.jpg"
width="15" height="15"/></td>
</tr>
<tr>
<td><img src="getimg.jpg" width="100" height="100"/></td>
<td>Name:Brett spell<br>
Title:java<br>
Publications:Apress</td>
<td>Price:$50</td>
<td><input type="image" src="getimg.jpg"
width="15" height="15"/></td>
</tr>
<tr>
<td><img src="html.jpg" width="100" height="100"/></td>
<td>Name:Elizapeth<br>
Title:html<br>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Publications:ss</td>
<td>Price:$50</td>
<td><input type="image" src="html.jpg"
width="15" height="15"/></td>
</tr>
</table>
</body>
</html>


RIGHT
<!--right.html-->
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<html>
<head><title>right</title></head>
<body>
<img src="Winter.jpg" width="100%" height="100%" title="Winter">
</body>
</html>


ECE
<!--ece.html-->
<html>
<head>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<title>ece</title></head>
<body><h3 align="center">Details will be posted later</h3></body>
</html>

Week-2:
4) CART PAGE:
The cart page contains the details about the books which are added to the cart.
5) REGISTRATION PAGE:
Create a registration form with the 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)


CART
<!--cart.html-->
<html>
<head><title>cart</title>
<script>
function one()
{
var a=f.t2.value;
var b=f.t3.value;
f.a1.value=a*b;
}
function two()
{
var a=f.t5.value;
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
var b=f.t6.value;
f.a2.value=a*b;
}
function add()
{
var s1=parseInt(f.a1.value);
var s2=parseInt(f.a2.value);
f.a3.value=s1+s2;
}
</script>
</head>
<body>
<form name="f">
<table width="100%" border="2" bgcolor="#fedcba">
<tr>
<th>BookName</th>
<th>price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td><input type="text" name="t1" value="" /></td>
<td>$<input type="text" name="t2" value="" /></td>
<td><input type="text" name="t3" value="" /></td>
<td>$<input type="text" name="a1" onfocus="one()"/></td>
</tr>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<tr>
<td><input type="text" name="t4" value="" /></td>
<td>$<input type="text" name="t5" value="" /></td>
<td><input type="text" name="t6" value="" /></td>
<td>$<input type="text" name="a2" onfocus="two()"/></td>
</tr>
<tr >
<td colspan="3" align="right"><b>Total Amount</b></td>
<td>$<input type="text" name="a3" value="" onfocus="add()"/></td>
</tr>
</table>
</form>
</body>
</html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

REGISTRATION
<!--registration.html-->
<html>
<head><title>registration</title>
<script>
function validate()
{
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
var p=f.pwd.value;
var i=p.length;
var a=f.email.value;
var a1=a.indexOf("@");
var dot=a.indexOf(".");
if(i<6)
alert("password must be six charecters");
if(a1<1||dot<a1+2||dot+2>a.length)
alert("retry");
}
</script>
</head>
<body>

<h3>Registration Form</h3>
<form name="f">

<pre>
Name :<input type="text" name="name" size="10"/><br>
Password :<input type="password" name="pwd" size="10"/><br>
Email Id :<input type="text" name="email" size="10"/><br>
Phone No :<input type="text" name="pno" size="10"/><br>
Sex : <input type="radio" name="r1" checked/>Male <input type="radio" name="r1" />Female
<br>
Date Of Birth :<select name="day">
<option>1</option>
<option>2</option>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select><select name="mon">
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>sep</option>
</select><select name="year">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select><br><br>
Languages Known :<input type="checkbox" name="c1" checked/>c
<input type="checkbox" name="c2" />c++
<input type="checkbox" name="c3" />java<br><br>
Address :<textarea name="text" value=" " rows="5" cols="10" scrolling="no"></textarea><br><br>
<input type="submit" value="submit" name="submit" onclick="validate()"/> <input type="reset"
value="reset"/>
</pre>
</form>
</body>
</html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


CART
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD







www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
REGISTRATION

WEEK 3:
VALIDATION:
Write J avaScript to validate the following fields of the above 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 standard pattern
name@domain.com)
4. Phone number (Phone number should contain 10 digits only).
<!--registration.html-->
<html>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<head><title>registration</title>
<script>
function validate()
{
var n=f.name.value;
var v=new RegExp("^[a-zA-Z][a-zA-Z]+$") ;
var p=f.pwd.value;
var ph=f.pno.value;
var a=f.email.value;
var a1=a.indexOf("@");
var dot=a.indexOf(".");
if(!n.match(v))
{
alert("name should be characters only");
if(n.length<6)
alert("name should be greaterthan 6 characters");
}
else
if(n.length<6)
alert("name should be greaterthan 6 characters");
if(p.length<6)
alert("password should be atleast 6 characters");
if(ph.length<10 ||ph.length>10)
alert("ph num should be exactly 10 char");
if(a1<1||dot<a1+2||(dot+2)>a.length)
alert("invalid email");
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
}
</script>
</head>
<body>
<h3>Registration Form</h3>
<form name="f">
<pre>
Name :<input type="text" name="name" size="10"/><br>
Password :<input type="password" name="pwd" size="10"/><br>
Email Id :<input type="text" name="email" size="10"/><br>
Phone No :<input type="text" name="pno" size="10"/><br>
Sex : <input type="radio" name="r1" checked/>Male <input type="radio" name="r1" />Female
<br>
Date Of Birth :<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select><select name="mon">
<option>jan</option>
<option>feb</option>
<option>mar</option>
<option>sep</option>
</select><select name="year">
<option>1990</option>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<option>1991</option>
<option>1992</option>
<option>1993</option>
</select><br><br>
Languages Known :<input type="checkbox" name="c1" checked/>c
<input type="checkbox" name="c2" />c++
<input type="checkbox" name="c3" />java<br><br>
Address :<textarea name="text" value=" " rows="3" cols="15" scrolling="no"></textarea><br><br>
<input type="submit" value="submit" name="submit" onclick="validate()"/> <input type="reset"
value="reset"/>
</pre> </form> </body></html>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


PHP code to retrieve data from database:
<?PHP
$user_name = "root";
$password = "root";
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
$database = "lalitha";
$server = "127.0.0.1";
$db_handle = mysql_connect($server, $user_name, $password);
$db_found = mysql_select_db($database, $db_handle);
if ($db_found) {
$SQL = "SELECT * FROM emp";
$result = mysql_query($SQL);
while ($db_field = mysql_fetch_assoc($result))
{
print $db_field['empid'] . "<BR>";
print $db_field['empname'] . "<BR>";
}
mysql_close($db_handle);
}
else {
print "Database NOT Found ";
mysql_close($db_handle);
}
?>



WEEK-4
Design a web page using CSS (Cascading Style Sheets) which includes the
following
1) Use different font ,styles:
In the style definition you define how each selector should work (font ,color
etc.) .Then ,in the body of your pages ,you refer to these selectors to activate
the styles.
<html>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<head><title>css</title>
<style>
h1
{
color:green;
font-family:segoe script;
font-size:20px;
font-weight:15px;
text-decoration:line-through;
text-transform:uppercase;
text-align:center;
}
</style>
<body>
<h1>This is simple style sheet</h1>
</body>
</html>
Output
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD





2) Set a background image for both the page and single elements on the
page.

<html>
<head><title>css</title>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<style>
body
{
background-image:url("css.jpg");
background-repeat:no-repeat;
background-position:50%;
}
</style>
</head>
<body></body>
</html>
Output:

3)Control the repetition of the image with the background-repeat property.

<html>
<head><title>css</title>
<style>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
body
{
background-image:url("css.jpg");
background-repeat:repeat;
}
</style>
</head>
<body>
</body>
</html>
Output:



4)Define styles for links as
A:link
A:visited
A:active
A:hover
<html>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<head><title>css</title>
<style>
a.link{text-decoration:blink};
a.visited{text-decoration:underline};
a.active{text-decoration:line-through};
a.hover{text-decoration:overline};
</style>
</head>
<body>
<a class="visited" href="sample.html"><h2>visited</h2></a><br>
<a class="active" href="sample.html"><h2>active</h2></a><br>
<a class="hover" href="sample.html"><h2>hover</h2></a><br>
<a class="link" href="css.html"><h2>css</h2></a>
</body>
</html>












www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Output:









www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
5)Layers
<html>
<head><title>css</title>
</head>
<body>
<div style="position:relative;font-size:30px;z-index:2;background-
color:blue;">layer1</div>
<div style="position:relative;top:-50;left:10pt;font-size:60px;z-
index:1;color:green;">layer2</div>


<div style="position:relative;font-size:50px;z-index:3;background-
color:red;color:white;">layer3</div>
<div style="position:relative;top:-50;left:10pt;font-size:80px;z-
index:4;">layer4</div>
</body>
</html>
Output:

6) Cursors
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<html>
<head><title>css</title>
<style>
.c1{cursor:default};
.c2{cursor:crosshair};
.c3{cursor:move};
.c4{cursor:havid};
.c5{cursor:text};
.c6{cursor:wait};
.c7{cursor:help};
.c8{cursor:n-resize};
.c9{cursor:s-resize};
.c10{cursor:e-resize};
.c11{cursor:w-resize};
.c12{cursor:progress};
.c13{cursor:notallowed};
.c14{cursor:no-drop};
.c15{cursor:all-scroll};
</style>
</head>
<body>
<a class="c1" href="sample.html">default</a><br>
<a class="c2" href="sample.html">crosshair</a><br>
<a class="c3" href="sample.html">move</a><br>
<a class="c4" href="sample.html">havid</a><br>
<a class="c5" href="sample.html">text</a><br>
<a class="c6" href="sample.html">wait</a><br>
<a class="c7" href="sample.html">help</a><br>
<a class="c8" href="sample.html">n-resize</a><br>
<a class="c9" href="sample.html">s-resize</a><br>
<a class="c10" href="sample.html">e-resize</a><br>
<a class="c11" href="sample.html">w-resize</a><br>
<a class="c12" href="sample.html">progress</a><br>
<a class="c13" href="sample.html">notallowed</a><br>
<a class="c14" href="sample.html">no-drop</a><br>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<a class="c15" href="sample.html">all-scroll</a><br>
</body>
</html>
Output:



www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD




WEEK-5
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

<?xml version="1.0" encoding="UTF-8"?>
<catalogue>
<book>
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
<book>
<title>java</title>
<author>Brett spell</author>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>
Output:

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


Write a Document Type Definition (DTD) to validate the above XML file
Xml file:
<?xml version="1.0" encoding="UTF-8"?>
<?DOCTYPE catalogue SYSTEM "book.dtd"?>
<catalogue>
<book>
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<book>
<title>java</title>
<author>Brett spell</author>
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>
Dtd file:
<!ELEMENT catalogue (book)*>
<!ELEMENT book (title,author,isbn,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>




Output:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD



Xml file with schema definition
<?xml version="1.0" encoding="UTF-8"?>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<catalogue>
<book xmlns:xsi="http//www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
</catalogue>
Schema file
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="book">
<xs:complexType>
<xs:all>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="isbn" type="xs:integer"/>
<xs:element name="publisher" type="xs:string"/>
<xs:element name="edition" type="xs:decimal"/>
<xs:element name="price" type="xs:float"/>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
</xs:all>
</xs:complexType>
</xs:element>
</xs:schema>
Output:

Xml file with XSL
XML file:
<?xml version="1.0" encoding="UTF-8"?>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<?DOCTYPE catalogue SYSTEM "book.dtd"?>
<?xml-stylesheet type="text/xsl" href="book.xsl"?>
<catalogue>
<book xmlns:xsi="http//www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
<book>
<title>java</title>
<author>Brett spell</author>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>
XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="2" align="center" bgcolor="pink">
<caption colspan="6" style="color:red"><b>Book Details</b></caption>
<th style="color:gray" >Title</th>
<th style="color:gray">Author</th>
<th style="color:gray">Isbn</th>
<th style="color:gray">Publisher</th>
<th style="color:gray">Edition</th>
<th style="color:gray">Price</th>
<xsl:for-each select="catalogue/book">

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<tr>
<td style="color:red"><xsl:value-of select="title"/></td>
<td style="text-transform:uppercase;font-style:strong;color:green"><b>
<xsl:value-of select="author"/></b></td>
<td style="color:red"><xsl:value-of select="isbn"/></td>
<td style="color:blue"><xsl:value-of select="publisher"/></td>
<td style="color:red"><xsl:value-of select="edition"/></td>
<td style="color:blue"><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


Output:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

Week-6:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
VISUAL BEANS:
Create a simple visual bean with a area filled with a color.
The shape of the area depends on the property shape. If it is set to true then the shape of the area is
Square and it is Circle, if it is false.
The color of the area should be changed dynamically for every mouse click. The color should also be
changed if we change the color in the property window .
WEEK-6

Week6.java
Path:E:\study\WT\09P3A0547\547\bdk\demo\sunw\demo\week6\edit week.java
package sunw.demo.week6;
import java.io.*;
import java.awt.*;
import java.beans.*;
import java.awt.event.*;
public class week6 extends Canvas
{
private Color c;
private boolean shape;
public week6()
{
shape=false;
setSize(300,300);
addMouseListener(new MouseAdapter()
{
public void mousePressed(MouseEvent m)
{
change();
}
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
});
change();
}//constructor
public Color getc()
{
return c;
}
public void setc(Color c1)
{
c=c1;
}
public boolean getshape()
{
return shape;
}
public void setshape(boolean shape1)
{
shape=shape1;
}
public void change()
{
int c2=(int)(255*Math.random());
int c3=(int)(255*Math.random());
int c4=(int)(255*Math.random());
c=new Color(c2,c3,c4);
repaint();
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
}
public void paint(Graphics g)
{
Dimension d=getSize();
int w=d.width;
int h=d.height;
g.setColor(c);
if(shape)
g.fillRect(50,50,w/2,h/2);
else
g.fillOval(50,50,w/2,h/2);
}
}
Week6.mft:
Path:E:\study\WT\09P3A0547\547\bdk\demo\edit week6.mft
Name: sunw/demo/week6/week6.class
Java-Bean: True
Jar file creation:
E:\study\WT\09P3A0547\547\bdk\demo>jar cfm ..\jars\week6.jar week6.mft sunw\demo
\week6\*.class






www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


Output:




Week-8
User Authentication :
Assume four users user1,user2,user3 and user4 having the passwords pwd1,pwd2,pwd3
and pwd4 respectively. Write a servelet for doing the following.
1. Create a Cookie and add these four user ids and passwords to this Cookie.
2. Read the user id and passwords entered in the Login form (week1) and authenticate
with the values (user id and passwords ) available in the cookies.
If he is a valid user(i.e., user-name and password match) you should welcome him by
name(user-name) else you should display You are not an authenticated user .

Use init-parameters to do this. Store the user-names and passwords in the webinf.xml and
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
access them in the servlet by using the getInitParameters() method.

Login.html:
<html>
<body bgcolor="cyan">
<center>
<form action="http://localhost:8090/initp1/initp1servlet" method="get">
USER NAME : <input type="text" ><br><br>
PASSWORD : <input type="password"><br><br>
<input type="submit" name="login" value="Log In">
&nbsp;&nbsp;
</form>
</center>
</body>
</html>

Init servlet:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.lang.*;
import java.util.*;
public class initp1servlet extends HttpServlet
{
String uname1,pwd1;
public void init()
{
ServletConfig sc=getServletConfig();
uname1=sc.getInitParameter("uname");
pwd1=sc.getInitParameter("pwd");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
if((uname1.equals("a"))&&(pwd1.equals("a")))
{
out.println("welcome"+uname1);
}
}
}





www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Web.xml
<web-app>
<servlet>

<init-param>
<param-name>uname</param-name>
<param-value>a</param-value>
</init-param>
<init-param>
<param-name>pwd</param-name>
<param-value>a</param-value>
</init-param>
<servlet-name>initp1servlet</servlet-name>
<servlet-class>initp1servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>initp1servlet</servlet-name>
<url-pattern>/initp1servlet</url-pattern>
</servlet-mapping>
</web-app>





www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD





Week-9

REGISTRATION FORM:
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function validate()
{
if(f1.fname.value== "")
{
alert("UserName Cannot be Empty");
f1.fname.focus();
return false;
}
if(f1.password.value== "")
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
{
alert("Password Cannot be Empty");
f1.password.focus();
return false;
}
var p=f1.password.value;
var i=p.length;
if(i>8)
{
alert(" password is not more than 8 characters");
f1.password.focus();
return false;
}
var a=f1.email.value;
var a1=a.indexOf("@");
var dot=a.indexOf(".");
if(a1<1||dot<a1+2||dot+2>a.length)
{
alert("enter the valid mail id");
f1.email.focus();
return false;
}
var pattern2 = /^\d{10}/;
if(!pattern2.test(document.f1.mnum.value))
{
alert("It is not valid mobile number.input 10 digits number!");
f1.mnum.focus();
return false;
}
}
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
</script>
</head>
<body>
<form name="f1" method="post" action="/radhi/registration.jsp" onSubmit= "return validate()">
<p align="center"><strong> name: </strong><em><strong> <input name="fname" type="text"
id="fname"/></strong></em></p>
<p align="center"><strong>Password:
<input name="password" type="password" id="password" /></strong></p>
<p align="center"><strong>Email:
<input name="email" type="text" id="email"/> </strong></p>
<p align="center"><strong>Mobile Number: <input name="mnum" type="text" id="mnum" /></strong></p>
<p align="center">
<input type="submit" name="Submit" value="Submit" >
</p>
</form>
</body>
</html>



www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
REGISTRATION JSP PAGE:
INSERTING:

<%@ page import="java.sql.*,java.lang.*"%>
<html>
<head>
<title>registration details</title>
</head>
<% try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/one","root","root");

String vname=request.getParameter("fname");
String pname=request.getParameter("password");
String veml=request.getParameter("email");
String mno=request.getParameter("mnum");
String vsql="insert into register values(?,?,?,?)";
PreparedStatement pst = con.prepareStatement(vsql);
pst.setString(1,vname);
pst.setString(2,pname);
pst.setString(3,veml);
pst.setString(4,mno);
pst.executeUpdate();
out.println("inserted successfully");
con.close();
}
catch(Exception e)
{
response.sendError(504,"Err Msg--> "+e);
}
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
%>
</html>
OPTIONS PAGE:
<html>
<head>
<title>Options</title>
</head>
<body>
<form name="f1" method="post" action="./optcheck.jsp" onSubmit = "return callMe()">
<br><br><br><br><br><br><br><br>
<table align="center" width="30%" height="30%">
<caption><b>Options</b></caption>
<tr><td><input type="submit" name="opt" value="Delete"></td></tr>
<tr><td><input type="submit" name="opt" value="Update"></td></tr>
<tr><td><input type="submit" name="opt" value="Display"></td></tr></table></form>
</body>
</html>
Optcheck.jsp:

<%
String vopt=request.getParameter("opt");

if(vopt.equals("Delete"))
response.sendRedirect("./delete.html");
else if(vopt.equals("Update"))
response.sendRedirect("./update.html");
else if(vopt.equals("Display"))
response.sendRedirect("./display.jsp");

%>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD




DISPLAYING:

<%@page import ="java.sql.*"%>
<html>
<head>
<title>Display</title>
</head>
<body>
<br>
<table border="2" align="center">
<%
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/one","root","root");
String vsql="select * from register";
PreparedStatement pst= con.prepareStatement(vsql);
ResultSet rs=pst.executeQuery();
%>
<tr bgcolor="chocolate"><td align="center"><b>NAME</b></td><td
align="center"><b>PASSWORD</b></td><td align="center"><b>EMAILID</b></td><td
align="center"><b>PHONE NO</b></td></tr>
<%
while(rs.next())
{
%>
<tr><td><%=rs.getString("name")%></td>
<td><%=rs.getString("pwd")%></td><td><%=rs.getString("mailid")%></td><td><%=rs.getString("phone")%></tr
>
<%}
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
con.close();
%>
</table>
</body>
</html>

UPDATING:
Update.html:
<HTML>
<HEAD>
<TITLE> Update </TITLE>
<script language = "javascript">
function callMe()
{
if(f1.no.value== "")
{
alert("Number Cannot be Empty");
f1.no.focus();
return false;
}
}
</script>
</HEAD>
<BODY>
<form name="f1" method="post" action="./update1.jsp" onSubmit = "return callMe()">
<br><table align="center" width="30%" height="30%">
<caption><b>Update Record</b></caption>
<tr><td>Enter Name :</td>
<td><input type="text" name="no"></td></tr>
<tr>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<td>Enter modify Name :</td>
<td><input type="text" name="name"></td></tr>
<tr>
<td align="center"><input name="sub" type="submit" value="Update"></td>
</tr>
</table></form>
</BODY>
</HTML>
Update.jsp:
<%@ page import="java.sql.*"%>
<%
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/one","root","root");

String vno=request.getParameter("no");
String vname=request.getParameter("name");

String vsql="update register set name=? where name=?";
PreparedStatement pst = con.prepareStatement(vsql);
pst.setString(1,vname);
pst.setString(2,vno);
int x=pst.executeUpdate();
out.println(x+" Record Updated");


con.close();
}
catch(Exception e)
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
{
response.sendError(504,"Err Msg--> "+e);
}

%>






DELETING:
Delete.html
<HTML>
<HEAD>
<TITLE> Delete </TITLE>
<script language = "javascript">
function callMe()
{
if(f1.no.value== "")
{
alert("Number Cannot be Empty");
f1.no.focus();
return false;
}
}
</script>
</HEAD>
<BODY>
<form name="f1" method="post" action="./del.jsp" onSubmit = "return callMe()">
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
<br><table align="center" width="30%" height="30%">
<caption><b>Delete Record</b></caption>
<tr>
<td>Enter Name :</td>
<td><input type="text" name="no"></td>
</tr>
<tr>
<td align="center"><input name="sub" type="submit" value="Delete"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
DELETE.jsp:
<%@ page import="java.sql.*"%>
<%
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/one","root","root");

String vno=request.getParameter("no");

String vsql="delete from register where name=?";
PreparedStatement pst = con.prepareStatement(vsql);
pst.setString(1,vno);
int x=pst.executeUpdate();
out.println(x+" Record deleted");


www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
con.close();
}
catch(Exception e)
{
response.sendError(504,"Err Msg--> "+e);
}

%>







OUTPUTS:
Registration form:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

Registration jsp:

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Options:

Display:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


Delete :
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD

Update :


www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD















www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD





Week-10
Write a JSP which does the following job:
Insert the details of the 3 or 4 users who register with the web site (week9) by using registration
form. Authenticate the user when he submits the login form using the user name and password
from the database ( similar to week8 instead of cookies).

Login.html:
<!--login.html-->
<html>
<head><title>login</title>
</head>
<body>
<form name="f" action=login.jsp>
<div align="center">
Username:<input type="text" size="10" name="uname" value=""/><br><br>
Password:<input type="password" size="10" name="pwd" value=""/><br><br>
<input type="submit" value="submit" />
<input type="reset" value="reset"/>
</div>
</form>
</body>
</html>
Login.jsp:
<%@page language="java" import="java.sql.*" %>
<%
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Connection con=null;
Statement stmt=null;
ResultSet rs=null;
try{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sandy","root","root");
stmt =con.createStatement();
String unm = request.getParameter("uname");
String pwd = request.getParameter("pwd");
String str="select * from reg where name='"+unm+"' and pwd=+pwd+";
rs=stmt.executeQuery(str);
if(rs.next())
out.println("User Login is valid");
else
out.println("no such User");
}
catch(Exception e)
{
e.getMessage();
}
%>

www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD






www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


Week-11
Create tables in the database which contain the details of items (books in our case like Book
name , Price, Quantity, Amount )) of each category. Modify your catalogue page (week 2)in such
a way that you should connect to the database and extract data from the tables and display them
in the catalogue page using JDBC.
Cart.jsp:

<%@page language="java" import="java.sql.*" %>
<%
Connection con=null;
int count=0;
Statement stmt=null;
ResultSet rs=null;
String[] bname=new String[20];
int[] price=new int[15];
int [] quantity=new int[15];
int[] amount=new int[15];
try{
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sandy","root","root");
stmt =con.createStatement();
rs=stmt.executeQuery("select * from cart");
for(int i=0;rs.next();i++)
{
count++;
bname[i]=rs.getString(1);
price[i]=rs.getInt(2);
quantity[i]=rs.getInt(3);
amount[i]=rs.getInt(4);
}
if(count!=0)
{
%>
<html>
<body>
<table border="1">
<tr>
<th>BookName</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<%
for(int j=0;j<count;j++)
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
{
%>
<tr>
<th><%=bname[j]%></th>
<th><%=price[j]%></th>
<th><%=quantity[j]%></th>
<th><%=amount[j]%></th>
</tr>
</body>
</html>
<%
}
}
}
catch(Exception e)
{
e.getMessage();
}
%>
Output:
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD





Week-12
HTTP is a stateless protocol. Session is required to maintain the state.
The user may add some items to cart from the catalog page. He can check the cart page for the
selected items. He may visit the catalogue again and select some more items. Here our interest
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
is the selected items should be added to the old cart rather than a new cart. Multiple users can
do the same thing at a time(i.e., from different systems in the LAN using the ip-address instead of
localhost). This can be achieved through the use of sessions. Every user will have his own
session which will be created after his successful login to the website. When the user logs out his
session should get invalidated (by using the method session.invalidate() ).
Modify your catalogue and cart JSP pages to achieve the above mentioned functionality using
sessions.

Session.html:
<!--session.html-->
<html><head><title>login</title></head>
<body>
<form name="f" action="http://localhost:8084/WebApplication1/session">
<div align="center">
UserName:<input type="text" size="10" name="username" value=""/><br><br>
Password:<input type="password" size="10" name="password" value=""/><br><br>
<input type="submit" value="submit"/>
<input type="reset" value="reset"/>
</div></form></body></html>
Session.java:
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Session extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
HttpSession session = request.getSession(true);
// print session info
Date created = new Date(session.getCreationTime());
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
Date accessed = new Date(session.getLastAccessedTime());
out.println("ID " + session.getId());
out.println("Created: " + created);
out.println("Last Accessed: " + accessed);
// set session info if needed
String dataName = request.getParameter("dataName");
if (dataName != null && dataName.length() > 0) {
String dataValue = request.getParameter("dataValue");
session.setAttribute(dataName, dataValue);
}
// print session contents
Enumeration e = session.getAttributeNames();
while (e.hasMoreElements()) {
String name = (String)e.nextElement();
String value = session.getAttribute(name).toString();
out.println(name + " = " + value);
}
}
}
Web.xml
<web-app>
<servlet>
<servlet-name>session</servlet-name>
<servlet-class>session</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>session</servlet-name>
<url-pattern>/session</url-pattern>
</servlet-mapping>
www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD
</web-app>

Output:



www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD






www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com


JNTUWORLD


























www.jntuworld.com
www.jntuworld.com
www.jwjobs.net www.android.jntuworld.com

Vous aimerez peut-être aussi