97
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> 09P31A0547

WT Labmanualnew

Embed Size (px)

DESCRIPTION

wt

Citation preview

Page 1: WT Labmanualnew

WEB TECHNOLOGIES LAB MANUALBY

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 bedisplayed in the Right frame.Right frame: The pages to the links in the left frame must be loaded here. Initially this page containsdescription of the web site.2) LOGIN PAGE:This page looks like below:LogoWeb Site NameHome Login Registration Catalogue CartCSEECEEEECIVIL3) 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">

09P31A0547

Page 2: WT Labmanualnew

</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>

09P31A0547

Page 3: WT Labmanualnew

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

09P31A0547

Page 4: WT Labmanualnew

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");

09P31A0547

Page 5: WT Labmanualnew

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>

09P31A0547

Page 6: WT Labmanualnew

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>

09P31A0547

Page 7: WT Labmanualnew

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>

09P31A0547

Page 8: WT Labmanualnew

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

09P31A0547

Page 9: WT Labmanualnew

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

09P31A0547

Page 10: WT Labmanualnew

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>

09P31A0547

Page 11: WT Labmanualnew

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

09P31A0547

Page 12: WT Labmanualnew

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

09P31A0547

Page 13: WT Labmanualnew

<html>

<head><title>right</title></head>

<body>

<img src="Winter.jpg" width="100%" height="100%" title="Winter">

</body>

</html>

ECE

<!--ece.html-->

<html>

<head>

09P31A0547

Page 14: WT Labmanualnew

<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 fields1) 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;

09P31A0547

Page 15: WT Labmanualnew

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>

09P31A0547

Page 16: WT Labmanualnew

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

09P31A0547

Page 17: WT Labmanualnew

REGISTRATION

<!--registration.html-->

<html>

<head><title>registration</title>

<script>

function validate()

{

09P31A0547

Page 18: WT Labmanualnew

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>

09P31A0547

Page 19: WT Labmanualnew

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

09P31A0547

Page 20: WT Labmanualnew

CART

09P31A0547

Page 21: WT Labmanualnew

09P31A0547

Page 22: WT Labmanualnew

REGISTRATION

WEEK 3:VALIDATION:Write JavaScript to validate the following fields of the above registration page.1. Name (Name should contains alphabets and the length should not be less than 6characters).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 [email protected])4. Phone number (Phone number should contain 10 digits only).

<!--registration.html-->

<html>

09P31A0547

Page 23: WT Labmanualnew

<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");

09P31A0547

Page 24: WT Labmanualnew

}

</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>

09P31A0547

Page 25: WT Labmanualnew

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

09P31A0547

Page 26: WT Labmanualnew

09P31A0547

Page 27: WT Labmanualnew

PHP code to retrieve data from database:

<?PHP$user_name = "root";$password = "root";

09P31A0547

Page 28: WT Labmanualnew

$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>

09P31A0547

Page 29: WT Labmanualnew

<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

09P31A0547

Page 30: WT Labmanualnew

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

<html><head><title>css</title>

09P31A0547

Page 31: WT Labmanualnew

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

09P31A0547

Page 32: WT Labmanualnew

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

Output:

4)Define styles for links as A:link A:visitedA:activeA:hover<html>

09P31A0547

Page 33: WT Labmanualnew

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

09P31A0547

Page 34: WT Labmanualnew

Output:

09P31A0547

Page 35: WT Labmanualnew

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

09P31A0547

Page 36: WT Labmanualnew

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

09P31A0547

Page 37: WT Labmanualnew

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

Output:

09P31A0547

Page 38: WT Labmanualnew

WEEK-5Write an XML file which will display the book information which includes the following:1) Title of the book2) Author Name3) ISBN number4) Publisher name5) Edition6) 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> <isbn>12</isbn>

09P31A0547

Page 39: WT Labmanualnew

<publisher>Apress</publisher> <edition>2</edition> <price>$45</price> </book></catalogue>

Output:

09P31A0547

Page 40: WT Labmanualnew

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>

09P31A0547

Page 41: WT Labmanualnew

<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:

09P31A0547

Page 42: WT Labmanualnew

Xml file with schema definition

<?xml version="1.0" encoding="UTF-8"?>

09P31A0547

Page 43: WT Labmanualnew

<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"/>

09P31A0547

Page 44: WT Labmanualnew

</xs:all>

</xs:complexType>

</xs:element>

</xs:schema>

Output:

Xml file with XSL

XML file:

<?xml version="1.0" encoding="UTF-8"?>

09P31A0547

Page 45: WT Labmanualnew

<?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>

09P31A0547

Page 46: WT Labmanualnew

<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">

09P31A0547

Page 47: WT Labmanualnew

<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:

09P31A0547

Page 48: WT Labmanualnew

Week-6:

09P31A0547

Page 49: WT Labmanualnew

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 isSquare 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();

}

09P31A0547

Page 50: WT Labmanualnew

});

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();

09P31A0547

Page 51: WT Labmanualnew

}

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

09P31A0547

Page 52: WT Labmanualnew

Output:

Week-8User Authentication :Assume four users user1,user2,user3 and user4 having the passwords pwd1,pwd2,pwd3and pwd4 respectively. Write a servelet for doing the following.1. Create a Cookie and add these four user id’s and passwords to this Cookie.2. Read the user id and passwords entered in the Login form (week1) and authenticatewith 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 byname(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

09P31A0547

Page 53: WT Labmanualnew

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);} }}

09P31A0547

Page 54: WT Labmanualnew

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>

09P31A0547

Page 55: WT Labmanualnew

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== "")

09P31A0547

Page 56: WT Labmanualnew

{

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;

}

}

09P31A0547

Page 57: WT Labmanualnew

</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>

09P31A0547

Page 58: WT Labmanualnew

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);

09P31A0547

Page 59: WT Labmanualnew

}

%>

</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");

09P31A0547

Page 60: WT Labmanualnew

%>

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>

09P31A0547

Page 61: WT Labmanualnew

<%}

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>

09P31A0547

Page 62: WT Labmanualnew

<tr>

<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();

}

09P31A0547

Page 63: WT Labmanualnew

catch(Exception e)

{

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>

09P31A0547

Page 64: WT Labmanualnew

<form name="f1" method="post" action="./del.jsp" onSubmit = "return callMe()">

<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");

09P31A0547

Page 65: WT Labmanualnew

con.close();

}

catch(Exception e)

{

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

}

%>

OUTPUTS:

Registration form:

09P31A0547

Page 66: WT Labmanualnew

Registration jsp:

09P31A0547

Page 67: WT Labmanualnew

Options:

Display:

09P31A0547

Page 68: WT Labmanualnew

Delete :

09P31A0547

Page 69: WT Labmanualnew

09P31A0547

Page 70: WT Labmanualnew

Update :

09P31A0547

Page 71: WT Labmanualnew

09P31A0547

Page 72: WT Labmanualnew

09P31A0547

Page 73: WT Labmanualnew

Week-10Write 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 registrationform. 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.*" %>

<%

09P31A0547

Page 74: WT Labmanualnew

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();

}

%>

09P31A0547

Page 75: WT Labmanualnew

09P31A0547

Page 76: WT Labmanualnew

Week-11Create tables in the database which contain the details of items (books in our case like Bookname , Price, Quantity, Amount )) of each category. Modify your catalogue page (week 2)in sucha way that you should connect to the database and extract data from the tables and display themin 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{

09P31A0547

Page 77: WT Labmanualnew

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++)

09P31A0547

Page 78: WT Labmanualnew

{

%>

<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:

09P31A0547

Page 79: WT Labmanualnew

Week-12HTTP 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 theselected items. He may visit the catalogue again and select some more items. Here our interest

09P31A0547

Page 80: WT Labmanualnew

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

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());

09P31A0547

Page 81: WT Labmanualnew

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>

09P31A0547

Page 82: WT Labmanualnew

</web-app>

Output:

09P31A0547

Page 83: WT Labmanualnew

09P31A0547

Page 84: WT Labmanualnew

09P31A0547