Web Technology Mtech Cse Lab

127
SWAMI RAMANANDA TIRTHA INSTITUTE OF SCIENCE & TECHNOLOGY Post SLBC, Ramananda Nagar,Nalgonda Department of Computer Science &Engineering Laboratory Manual for the Academic Year ( 2011 - 2012 ) SUBJECT : JAVA AND WEB TECHNOLOGIES SEMESTER : Ist STREAM : CSE 1

Transcript of Web Technology Mtech Cse Lab

Page 1: Web Technology Mtech Cse Lab

SWAMI RAMANANDA TIRTHA INSTITUTE OF SCIENCE & TECHNOLOGY

Post SLBC, Ramananda Nagar,Nalgonda

Department of Computer Science &Engineering

Laboratory Manual for the

Academic Year ( 2011 - 2012 )

SUBJECT : JAVA AND WEB TECHNOLOGIES

SEMESTER : Ist

STREAM : CSE

1

Page 2: Web Technology Mtech Cse Lab

SWAMI RAMANANDA TIRTHA INSTITUTE OF SCIENCE & TECHNOLOGY

Post SLBC, Ramananda Nagar,Nalgonda

Department of Computer Science &Engineering

CERTIFICATE

This is to certify that this is bonafide record of the laboratory work carried

out by Mr. ________________________________ bearing H.T.No

________________________of M.Tech(CSE) Ist Semester during the year 2011-

2012 for the Lab JAVA & WEB TECHNOLOGIES in the partial fulfillment for

the award of the degree of Master of Technology.

INTERNAL HEAD OF THE DEPT.

INDEX

2

Page 3: Web Technology Mtech Cse Lab

S.No Program Page No Signature

1

Develop static pages (using only HTML) of an online Book store. The pages should resemble: The website should consist the following pages.Home page, Registration and user Login, User profile page, Books catalog, Shopping cart, Payment By credit card, order confirmation.

2 Validate the registration, user login, user profile and payment by credit card pages using JavaScript.

3Create and save an XML document at the server, which contains 10 users information. Write a program which takes User Id as input and returns the user details by taking the user information from the XML document.

4

Bean Assignments a. Create a simple Colors Bean program that will change the color

within the rectangle/ellipse whenever the button is clicked.b. Create a simple Counter Bean program that will change the

count by one in the Label Field whenever the button is clicked

5

Install TOMCAT web server. Convert the static web pages of assignments 2 into dynamic web pages using Servlets and cookies. Hint: User’s information (user id, password, credit card number) would be stored in web. Xml. Each user should have a separate shopping cart.

6

Redo the previous task using JSP by converting the static web pages of assignment 2 into dynamic web pages. Create a database with user information and books information. The books catalogue should be dynamically loaded from the database. Follow the MVC architecture while doing the website.

1. Develop static pages (using only HTML) of an online Book store. The pages should resemble:

The website should consist the following pages.

3

Page 4: Web Technology Mtech Cse Lab

1. Home page.2. User Login3. Registration.4. User profile page5. Books catalog6. Payment By credit card7. Order confirmation.

1. HomePage

<html><head><frameset rows=14%,5%,81% border="4" bordercolor="white"><frame src="Frame1.html" noresize marginheight=8 scrolling="NO"><frame src="Frame2.html" noresize marginheight=1 scrolling="NO"><frameset cols=11%,89%><frame src="Frame3.html" noresize scrolling="NO"><frame src="Main.html" marginheight=1 name="display"></frameset></html>

2. Login Page<html><head><title>Login Page</title></head><body ><form><BR><BR><BR><BR><BR><BR><BR>

4

Page 5: Web Technology Mtech Cse Lab

<CENTER><b>UserId : &nbsp&nbsp&nbsp<input type="text" id="uid"><br/><br/>Passowrd: <input type="text" id="pwd"><br /><br/><input type ="button" value ="LogIn"><br><br/>New User: <a href="Register.html" ><b> REGISTER </b> </a></CENTER></form></body></html>

3. User Registration Form<html><head><Title>User Registration Form</title><body bgcolor="wheat"onLoad=document. forms [0].elements[0].focus();><form action ="login.html" method="post" onsubmit="return

5

Page 6: Web Technology Mtech Cse Lab

verify(this.form)"><center><b><font size="8" face="Monotype Corsiva" color="#800000">New User Registration Form</font></p></center><br><i><font color="#FF0000">*</font><font color="#FF0000">Indicates all the fields are mandatory</font></i><hr><p><font color="#FF0000">*</font>User ID:</font><b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input name="uid" size="16" maxlength="15"></b><font color="#FF0000">*(Contains only letters (a-z), numbers (0-9) and underscore)</font><br><b><br></b> <font color="#FF0000">*</font>Password: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="password" name="pswd" size="9" maxlength="10" style="font-weight: bold; color:#008000"><font color="#FF0000">*(Password should be of minimum 4(four) and maximum 10(ten) characters.</font><br><br><font color="#FF0000">*</font>Re-Type Password<b><input type="password" name="cpswd" size="11" maxlength="10" style="color:#008000" ></b> </font><hr><Br><i>If you forget your password, you can retrieve it by answering your unique hint question. <br>Frame your question such that only you know its answer.</i></font></font><div align="center"></div><Br><font color="#FF0000">*</font>Select a question forgetting password </font><b>: </b></font><select size="1" name="secq"><option selected value="secq">Select a hit question ?</option><option value="What is your favourite multimedia software?">What is your favourite multimedia software?</option><option value="What is your favourite game?">What is your favourite game?</option><option value="who is your favourite Cricketer?">

6

Page 7: Web Technology Mtech Cse Lab

who is your favourite Cricketer? </option><option value="who is your favourite Film Actor?">who is your favourite Film Actor?</option><option value="what is your favourite food?">what is your favourite food?</option></select><br><br><font color="#FF0000">*</font>Hit Answer: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="seca" size="40"> (Write Your Answer)<hr><div align="left">DD MM YYYY <br><font size="4" color="#FF0000">*</font>Date of Birth: &nbsp&nbsp&nbsp<select size="1" name="DD"><option selected value="DD">Day</option> <option value="1">1</option><option value="2">2</option> <option value="3">3</option><option value="4">4</option> <option value="5">5</option><option value="6">6</option> <option value="7">7</option><option value="8">8</option> <option value="9">9</option><option value="10">10</option> <option value="11">11</option><option value="12">12</option> <option value="13">13</option><option value="14">14</option> <option value="15">15</option><option value="16">16</option> <option value="17">17</option><option value="18">18</option> <option value="19">19</option><option value="20">20</option> <option value="21">21</option><option value="22">22</option> <option value="23">23</option><option value="24">24</option> <option value="25">25</option><option value="26">26</option> <option value="27">27</option><option value="28">28</option> <option value="29">29</option><option value="30">30</option> <option value="31">31</option></select> <select size="1" name="MM"><option selected value="MM">Month</option><option value="JANUARY">JAN</option><option value="FEBRUARY">FEB</option> <option value="MARCH">MAR</option><option value="APRIL">APR</option> <option value="MAY">MAY</option><option value="JUNE">JUN</option> <option value="JULY">JUL</option>

7

Page 8: Web Technology Mtech Cse Lab

<option value="AUGUST">AUG</option> <option value="SEPTEMBER">SEP</option><option value="OCTOBER">OCT</option><option value="NOVEMBER">NOV</option><option value="DECEMBER">DEC</option></select> <select size="1" name="YYYY"><option selected value="YYYY">Year</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option></select></font></div><p>Gender:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" name="Male" value="male" checked> Male<INPUT type=radio value="female" name="Male" >Female <br><br>Contact No: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" size="6" name="std" maxlength="6"><b> -</b><input type="text" size="9" name="phno" maxlength="9"><p> Mobile No: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" size="18" name="mobno" maxlength="15"><br><br>Email:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n

8

Page 9: Web Technology Mtech Cse Lab

bsp<input type="text" name="email" size="20"><br>Address: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<textarea rows="3" cols="18" name="txt"></textarea> <p><hr><div align="left"> </div><center><input type="submit" value="Submit" name="Submit" tabindex="25"><input type="reset" value="Reset" name="Reset" tabindex="26"></center></form></body></html>

9

Page 10: Web Technology Mtech Cse Lab

4. Create Your Profile<html><body ><h1>Create Your Profile </h1><form action="two.html" method="post" style="background-color:wheat" onSubmit="return f(this.form)"><b><h3><p>Enter your First Name : <input name="textfield" type="text" size="16" maxlength="10"></p><p><label>Enter your Last Name : <input name="textfield2" type="text" size="16" maxlength="10"></label></p> <p <label>Date of Birth : &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select name="select"> <option selected value="dd">day</option> <option value="1">1</option> <option value="2">2</option><option value="3">3</option> <option value="4">4</option> </select> </label> <label> <select name="select2"> <option selected value="mm">month</option> <option value="jan">Jan</option> <option value="feb">Feb</option><option value="mar">Mar</option> <option vlue="apr">Apr</option> </select> </label> <label> <select name="select3"> <option selected value="yyyy">Year</option> <option value="1990">1990</option> <option value="1991">1991</option><option value="1992">1992</option> </select></label></p><p>Gender:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <label> <input name="r1" type="radio" value="radiobutton" checked>Male</label> <label> <input name="r1" type="radio" value="radiobutton"> Female</label></p><p><label>City&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select name="select4"> <option selected value="city">Select city</option><option value="hyd">Hyderabad</option> <option value="sec">Secundrabad</option>

10

Page 11: Web Technology Mtech Cse Lab

<option value="bang">Bangalore</option> <option value="del">Delhi</option> <option value="mum">Mumbai</option></select></label></p> <p> <label>State : &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select name="select5"> <option selected value="state">Select State</option><option value="ap">AndhraPradesh </option <option value="map">Maharashtra</option><option value="kar">Karnataka </option><option value="up">UttarPradesh</option> </select></label></p> <p><label>Country :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select name="select6"> <option selected value="country">Select Country</option><option value="ind">India< /option> <option value="cna">China</option><option value="sl">SriLanka</option> <option value="sauar">Saudi Arabia</option> </select> </label></p><p> <label>Zip Code :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input name="textfield3" type="text" size="8" maxlength="6"> </label> </p> <p> <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="submit" name="Submit1" value="Submit"></label> <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="reset" name="Submit2" value="Reset"> </label></p></form></body></html>

11

Page 12: Web Technology Mtech Cse Lab

12

Page 13: Web Technology Mtech Cse Lab

5. Catalog<html><head></head><body><bgsound src="mean.mp3" loop="-1"><table cellspacing="4" cellpadding="5"><tr><td><img src="b3.jpg" align="left" height=50 width=100></img><img src="books.jpg" align="left" height=50 width=100></img><img src="bk.gif" align="left" height=50 width=100></img><img src="books1.jpg" align="left" height=50 width=100></img><img src="b4.jpg" align="left" height=50 width=100></img></td></tr> </table><center><form type="get" name="f1" action="ccard.html"><font color="purple"><marquee behaviour="alternate"><h1>Select the Books U are interested in Buying</h1></marquee><table><tr><td></td><td width="350"><font color="sky blue"><h1>Magazines</h1><br></h1><h2><input type="checkbox" name="c1" value="India today"/>india today<br><input type="checkbox" name="c2" value="Politics & India"/>Politics & India<br><input type="checkbox" name="c3" value="Chip"/>Chip<br><input type="checkbox" name="c4" value="Digit"/>Digit<br></font></td><td width="350"><font color="sky blue"><h1>Comics</h1><br></h1><h2><input type="checkbox" name="c5" value="TinTin"/>TinTin<br><input type="checkbox" name="c6" value="Biloo"/>Biloo<br><input type="checkbox" name="c7" value="Arches"/>Arches<br><input type="checkbox" name="c8" value="Chandamama"/>Chandamama<br></font></td></tr><tr><td><img src="fm.jpg" align="left"></img></td><td width="350"><font color="green"><h1>Sports</h1><br></h1><h2><input type="checkbox" name="c9" value="Sports Star"/>Sports Star<br><input type="checkbox" name="c10" value="Cricket Next"/>Cricket Next<br><input type="checkbox" name="c11" value="Future of Indian Sports"/>

13

Page 14: Web Technology Mtech Cse Lab

Future of Indian Sports<br><input type="checkbox" name="c12" value="Tennis Stroke"/>Tennis Stroke<br></font></td><td width="350"><font color="green"><h1>Text Books</h1><br></h1><h2><input type="checkbox" name="c21" value="C & DS"/>C & DS<br><input type="checkbox" name="c13" value="C++"/>C++<br><input type="checkbox" name="c14" value="Networking"/>Networking<br><input type="checkbox" name="c24" value="Java "/>Java <br></font></td></tr></table><input type="button" name="b1" value="ADD TO THE CART" onclick="check()"/><br><textarea rows="20" cols="60" name="txtOutput"></textarea></h2><input type="submit" value=" Buy " /><input type="Reset" value=" Reset " /></form></center></body></html>

14

Page 15: Web Technology Mtech Cse Lab

15

Page 16: Web Technology Mtech Cse Lab

6. CreditCard<html><body><body leftmargin="30" class=""><form id="form1" name="form1" method="post" action="oder.html" onSubmit="return f(this.form)" style="background-color:wheat"> <b><h2><label>Name :&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input name="text" type="text" size="20" maxlength="16" /> <br /><br>Credit cardno : <input name="text" type="text" size="20" maxlength="20" /> </label> <p><label>Three Digit CVV no.:&nbsp<input name="text" type="text" size="5" maxlength="3" /> </label> </p> Expiry Date - <label>Month : <select name="select"> <option selected value="mm">Select</option> <option value="jan">Jan</option> <option value="feb">Feb</option> <option value="mar">Mar</option> </select> </label> <label>Year : <select name="select2"> <option selected value="yyyy">Select</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> </select> </label> <p>Shipping Address : <label> <input type="textarea" name="textarea"></textarea> </label></p> <p> <label>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;

16

Page 17: Web Technology Mtech Cse Lab

<input type="submit" name="b1" value="Submit" /></label> <label>&nbsp;&nbsp; <input type="reset" name="r2" value="Reset" /> </label> </p></form></body></html>

17

Page 18: Web Technology Mtech Cse Lab

7. Order

18

<html> <head><title>order confirmation</title> </head> <center><img src="a.gif" width="1000" height="100" border="1" alt="bsit-logo"/> <h1><u><i><font size=8 color="darkbrown">THANK U<hr></font></i></u></h1></center><br> <Br> <center><font size=5 color=blue><i><b> your order is confirmed! <br><br> you will get order by free delivery <br><br> Thank "U" visit again</b><i></font></center> </body></html>

Page 19: Web Technology Mtech Cse Lab

2. VALIDATION

AIM: To do validation for registration page using JavaScript.

DESCRIPTION:

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 6 characters).

2. Password (Password should not be less than 6 characters length).3. E-mail id (should not contain any invalid and must follow the

standard pattern ([email protected])4. Phone number (Phone number should contain 10 digits only).

Note: You can also validate the login page with these parameters1. Home page.html

<html><head><frameset rows=14%,5%,81% border="4" bordercolor="white"><frame src="Frame1.html" noresize marginheight=8 scrolling="NO"><frame src="Frame2.html" noresize marginheight=1 scrolling="NO"><frameset cols=11%,89%><frame src="Frame3.html" noresize scrolling="NO"><frame src="Main.html" marginheight=1 name="display"></frameset></html>

2. Login<html><head><script>function f(){if(document.getElementById('uid').value.length==0) alert("UserId can't e blank");else if(document.getElementById('pwd').value.length==0) alert("Password can't be blank");else { alert("successfully logged in"); window.open("Welcome.html");}}</script></head><body bgcolor="wheat"><BR><BR><BR><BR><BR><BR><BR><CENTER>

19

Page 20: Web Technology Mtech Cse Lab

UserId : <input type="text" id="uid"><br/>Passowrd: <input type="text" id="pwd"><br /><br/><input type ="button" onclick="f()" value ="LogIn"><br><br/> New User: <a href="register.htm" target="display" ><b> REGISTER </b> </a></CENTER></body></html>

3. User Registration Form

<HTML><HEAD><TITLE>User Registration Form</TITLE><SCRIPT language=javascript>function verify(form) {if(document.forms[0].elements[0].value==""){ alert("Please Enter User ID"); document.forms[0].elements[0].focus(); return(false);}if(document.forms[0].elements[1].value==""){ alert("Please Enter your Password"); document.forms[0].elements[2].value="";document.forms[0].elements[1].focus();return(false);}if(document.forms[0].elements[1].value.length<4){alert("Password must be greater than 4 character"); document.forms[0].elements[1].value="";document.forms[0].elements[2].value=""; document.forms[0].elements[1].focus();return(false);}if(document.forms[0].elements[2].value==""){alert("Please Enter your Confirm Password");document.forms[0].elements[2].focus(); return(false);}if((document.forms[0].elements[1].length)!=(document.forms[0].elements[2].length)){ alert("Your Password does not match with Confirm Password");document.forms[0].elements[1].value=""; document.forms[0].elements[2].value="";document.forms[0].elements[1].focus(); return(false);}if((document.forms[0].elements[1].length)==(document.forms[0].elements[2].length)){

20

Page 21: Web Technology Mtech Cse Lab

if((document.forms[0].elements[1].value)!=(document.forms[0].elements[2].value)) { alert("Your Password does not match with Confirm Password"); document.forms[0].elements[1].value=""; document.forms[0].elements[2].value=""; document.forms[0].elements[1].focus(); return(false); } }if(document.forms[0].elements[3].value=="secq"){ alert("Please Select your Security Question"); document.forms[0].elements[3].focus(); return(false);}if(document.forms[0].elements[4].value==""){alert("Please Answer the security question"); document.forms[0].elements[4].focus();return(false); }if(document.forms[0].elements[5].value=="DD"){ alert("Please select Day of DOB"); document.forms[0].elements[5].focus();return(false); }if(document.forms[0].elements[6].value=="MM"){ alert("Please select Month of DOB"); document.forms[0].elements[6].focus();return(false); }if(document.forms[0].elements[7].value=="YYYY"){ alert("Please select Year of DOB"); document.forms[0].elements[7].focus();return(false); }} </SCRIPT> </HEAD><BODY bgColor=wheat onload=document. [0].elements[0].focus(); forms ><FORM onsubmit="return verify(this.form)" action=login.html method=post><CENTER><B><FONT face="Monotype Corsiva" color=#800000 size=8>New User Registration Form</FONT><P></P></CENTER><BR><I><FONT color=#ff0000>*</FONT> <FONT color=#ff0000> Indicates all the fields are mandatory</FONT></I> <HR><P><FONT color=#ff0000>*</FONT> User ID:</FONT><B>&nbsp;&nbsp;&nbsp;&nbsp &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT maxLength=15 size=16 name=uid></B> <FONT color=#ff0000>* (Contains only letters (a-z), numbers (0-9) and underscore)</FONT>

21

Page 22: Web Technology Mtech Cse Lab

<BR><B><BR></B><FONT color=#ff0000> * </FONT> Password: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT style="FONT-WEIGHT: bold; COLOR: #008000" type=password maxLength=10 size=9 name=pswd> <FONT color=#ff0000>*(Password should be of minimum 4(four) and maximum 10(ten) characters.</FONT> <BR><BR><FONT color=#ff0000>*</FONT> Re-Type Password<B> <INPUT style="COLOR: #008000" type=password maxLength=10 size=11 name=cpswd></B> </FONT> <HR> <BR><I>If you forget your password, you can retrieve it by answering your unique hint question. <BR>Frame your question such that only you know its answer. </I></FONT></FONT><DIV align=center></DIV><BR><FONT color=#ff0000>*</FONT> Select a question forgetting password </FONT><B>: </B></FONT><SELECT size=1 name=secq> <OPTION value=secq selected>Select a hit question ?</OPTION> <OPTION value="What is your favourite multimedia software?">What is your favourite multimedia software?</OPTION> <OPTION value="What is your favourite game?">What is your favourite game?</OPTION> <OPTION value="who is your favourite Cricketer?">who is your favourite Cricketer? </OPTION> </SELECT><BR><BR><FONT color=#ff0000>*</FONT> Hit Answer: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT size=40 name=seca> (Write Your Answer) <HR><DIV align=left>DD MM YYYY <BR><FONT color=#ff0000 size=4>*</FONT> Date of Birth : &nbsp;&nbsp;&nbsp; <SELECT size=1 name=DD> <OPTION value=DD selected>Day</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION value=9>9</OPTION>

22

Page 23: Web Technology Mtech Cse Lab

<OPTION value=10> 10</OPTION> <OPTION value=11>11</OPTION> <OPTION value=12>12</OPTION> </SELECT> <SELECT size=1 name=MM> <OPTION value=MMselected>Month </OPTION> <OPTION value=JANUARY>JAN</OPTION> <OPTION value=FEBRUARY>FEB</OPTION> <OPTION value=MARCH>MAR</OPTION> <OPTION value=APRIL>APR</OPTION> <OPTION value=MAY>MAY</OPTION> <OPTION value=JUNE>JUN</OPTION> <OPTION value=JULY>JUL</OPTION> <OPTION value=AUGUST>AUG</OPTION><OPTION value=SEPTEMBER>SEP</OPTION> <OPTION value=OCTOBER>OCT</OPTION> <OPTION value=NOVEMBER>NOV</OPTION> <OPTION value=DECEMBER>DEC</OPTION></SELECT> <SELECT size=1 name=YYYY> <OPTION value=YYYY selected>Year</OPTION> <OPTION value=1997>1997</OPTION> <OPTION value=1998>1998</OPTION> <OPTION value=1999>1999</OPTION> <OPTION value=2000>2000</OPTION> <OPTION value=2001>2001</OPTION> <OPTION value=2002>2002</OPTION> <OPTION value=2003>2003</OPTION> <OPTION value=2004>2004</OPTION> <OPTION value=2005>2005</OPTION> <OPTION value=2006>2006</OPTION> <OPTION value=2007>2007</OPTION> <OPTION value=2008>2008</OPTION> <OPTION value=2009>2009</OPTION> <OPTION value=2010>2010</OPTION> </select >

<HTML><HEAD><TITLE>User Registration Form</TITLE>

<SCRIPT language=javascript>function verify(form) {

if(document.forms[0].elements[0].value=="")

23

Page 24: Web Technology Mtech Cse Lab

{alert("Please Enter User ID");document.forms[0].elements[0].focus();return(false);}

if(document.forms[0].elements[1].value==""){alert("Please Enter your Password");document.forms[0].elements[2].value="";document.forms[0].elements[1].focus();return(false);}

if(document.forms[0].elements[1].value.length<4){alert("Password must be greater than 4 character");document.forms[0].elements[1].value="";document.forms[0].elements[2].value="";document.forms[0].elements[1].focus();return(false);}

if(document.forms[0].elements[2].value==""){alert("Please Enter your Confirm Password");document.forms[0].elements[2].focus();return(false);}

if((document.forms[0].elements[1].length)!=(document.forms[0].elements[2].length)){alert("Your Password does not match with Confirm Password");document.forms[0].elements[1].value="";document.forms[0].elements[2].value="";document.forms[0].elements[1].focus();return(false);}

if((document.forms[0].elements[1].length)==(document.forms[0].elements[2].length)){ if((document.forms[0].elements[1].value)!=(document.forms[0].elements[2].value))

24

Page 25: Web Technology Mtech Cse Lab

{ alert("Your Password does not match with Confirm Password"); document.forms[0].elements[1].value=""; document.forms[0].elements[2].value=""; document.forms[0].elements[1].focus(); return(false); }}

if(document.forms[0].elements[3].value=="secq"){ alert("Please Select your Security Question"); document.forms[0].elements[3].focus(); return(false);}

if(document.forms[0].elements[4].value==""){alert("Please Answer the security question");document.forms[0].elements[4].focus();return(false);}

if(document.forms[0].elements[5].value=="DD"){alert("Please select Day of DOB");document.forms[0].elements[5].focus();return(false);}

if(document.forms[0].elements[6].value=="MM"){alert("Please select Month of DOB");document.forms[0].elements[6].focus();return(false);}

if(document.forms[0].elements[7].value=="YYYY"){alert("Please select Year of DOB");document.forms[0].elements[7].focus();return(false);}

}</SCRIPT>

25

Page 26: Web Technology Mtech Cse Lab

<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD><BODY bgColor=wheat onload=document. [0].elements[0].focus(); forms><FORM onsubmit="return verify(this.form)" action=login.html method=post><CENTER><B><FONT face="Monotype Corsiva" color=#800000 size=8>New User Registration Form</FONT><P></P></CENTER><BR><I><FONT color=#ff0000>*</FONT> <FONT color=#ff0000>Indicates all the fields are mandatory</FONT></I><HR>

<P><FONT color=#ff0000>*</FONT> User ID:</FONT><B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT maxLength=15 size=16 name=uid></B> <FONT color=#ff0000>* (Contains only letters (a-z), numbers (0-9) and underscore)</FONT> <BR><B><BR></B><FONT color=#ff0000>*</FONT> Password: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT style="FONT-WEIGHT: bold; COLOR: #008000" type=password maxLength=10 size=9 name=pswd> <FONT color=#ff0000>*(Password should be of minimum 4(four) and maximum 10(ten) characters.</FONT> <BR><BR><FONT color=#ff0000>*</FONT> Re-Type Password<B> <INPUT style="COLOR: #008000" type=password maxLength=10 size=11 name=cpswd></B> </FONT><HR><BR><I>If you forget your password, you can retrieve it by answering your unique hint question. <BR>Frame your question such that only you know its answer. </I></FONT></FONT><DIV align=center></DIV><BR><FONT color=#ff0000>*</FONT> Select a question forgetting password </FONT><B>: </B></FONT><SELECT size=1 name=secq> <OPTION value=secq selected>Select a hit question ?</OPTION> <OPTION

26

Page 27: Web Technology Mtech Cse Lab

value="What is your favourite multimedia software?">What is your favourite multimedia software?</OPTION> <OPTION value="What is your favourite game?">What is your favourite game?</OPTION> <OPTION value="who is your favourite Cricketer?">who is your favourite Cricketer?</OPTION> <OPTION value="who is your favourite Film Actor?">who is your favourite Film Actor?</OPTION> <OPTION value="what is your favourite food?">what is your favourite food?</OPTION></SELECT><BR><BR><FONT color=#ff0000>*</FONT> Hit Answer: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT size=40 name=seca> (Write Your Answer) <HR>

<DIV align=left>DD MM YYYY <BR><FONT color=#ff0000 size=4>*</FONT> Date of Birth: &nbsp;&nbsp;&nbsp; <SELECT size=1 name=DD> <OPTION value=DD selected>Day</OPTION> <OPTION value=1>1</OPTION> <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> <OPTION value=5>5</OPTION> <OPTION value=6>6</OPTION> <OPTION value=7>7</OPTION> <OPTION value=8>8</OPTION> <OPTION value=9>9</OPTION> <OPTION value=10>10</OPTION> <OPTION value=11>11</OPTION> <OPTION value=12>12</OPTION> <OPTION value=13>13</OPTION> <OPTION value=14>14</OPTION> <OPTION value=15>15</OPTION> <OPTION value=16>16</OPTION> <OPTION value=17>17</OPTION> <OPTION value=18>18</OPTION> <OPTION value=19>19</OPTION> <OPTION value=20>20</OPTION> <OPTION value=21>21</OPTION> <OPTION value=22>22</OPTION> <OPTION value=23>23</OPTION> <OPTION value=24>24</OPTION> <OPTION value=25>25</OPTION> <OPTION value=26>26</OPTION>

27

Page 28: Web Technology Mtech Cse Lab

<OPTION value=27>27</OPTION> <OPTION value=28>28</OPTION> <OPTION value=29>29</OPTION> <OPTION value=30>30</OPTION> <OPTION value=31>31</OPTION></SELECT> <SELECT size=1 name=MM> <OPTION value=MM selected>Month</OPTION><OPTION value=JANUARY>JAN</OPTION> <OPTION value=FEBRUARY>FEB</OPTION> <OPTION value=MARCH>MAR</OPTION> <OPTION value=APRIL>APR</OPTION> <OPTION value=MAY>MAY</OPTION> <OPTION value=JUNE>JUN</OPTION> <OPTION value=JULY>JUL</OPTION> <OPTION value=AUGUST>AUG</OPTION> <OPTION value=SEPTEMBER>SEP</OPTION> <OPTION value=OCTOBER>OCT</OPTION><OPTION value=NOVEMBER>NOV</OPTION> <OPTION value=DECEMBER>DEC</OPTION></SELECT> <SELECT size=1 name=YYYY> <OPTION value=YYYY selected>Year</OPTION> <OPTION value=1997>1997</OPTION> <OPTION value=1998>1998</OPTION> <OPTION value=1999>1999</OPTION> <OPTION value=2000>2000</OPTION> <OPTION value=2001>2001</OPTION> <OPTION value=2002>2002</OPTION> <OPTION value=2003>2003</OPTION> <OPTION value=2004>2004</OPTION> <OPTION value=2005>2005</OPTION> <OPTION value=2006>2006</OPTION> <OPTION value=2007>2007</OPTION> <OPTION value=2008>2008</OPTION> <OPTION value=2009>2009</OPTION> <OPTION value=2010>2010</OPTION> <OPTION value=2019>2019</OPTION> <OPTION value=2020>2020</OPTION></SELECT></FONT></DIV><P>Gender:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT type=radio CHECKED value=male name=Male> Male <INPUT type=radio value=female name=Male>Female <BR><BR>Contact No: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT maxLength=6 size=6 name=std><B> -</B> <INPUT maxLength=9 size=9 name=phno> <P>Mobile No:

28

Page 29: Web Technology Mtech Cse Lab

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT maxLength=15 size=18 name=mobno><BR><BR>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT name=email><BR>Address: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TEXTAREA name=txt rows=3 cols=18></TEXTAREA> <P><HR><DIV align=left></DIV><CENTER><INPUT tabIndex=25 type=submit value=Submit name=Submit> <INPUT tabIndex=26 type=reset value=Reset name=Reset> </CENTER></FORM> </B></BODY></HTML>alue=2019>2019</OPTION><OPTIONvalue=2020>2020</OPTION></SELECT> </FONT></DIV><P>Gender:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT type=radio CHECKED value=male name=Male> Male <INPUT type=radio value=female name=Male>Female <BR><BR>Contact No: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT maxLength=6 size=6 name=std><B> -</B> <INPUT maxLength=9 size=9 name=phno> <P>Mobile No: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT maxLength=15 size=18 name=mobno><BR><BR>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT name=email><BR>Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<TEXTAREA name=txt rows=3 cols=18></TEXTAREA> <P><HR><DIV align=left></DIV><CENTER><INPUT tabIndex=25 type=submit value=Submit name=Submit> <INPUT tabIndex=26 type=reset value=Reset name=Reset> </CENTER></FORM></B></BODY></HTML>

29

Page 30: Web Technology Mtech Cse Lab

30

Page 31: Web Technology Mtech Cse Lab

4. Create Your Profile<html><body ><h1>Create Your Profile Now</h1><form action="two.html" method="post" style="background-color:wheat" onSubmit="return f(this.form)"> <b><h3><p>Enter your First Name : <input name="textfield" type="text" size="16" maxlength="10"></p><p><label>Enter your Last Name : <input name="textfield2" type="text" size="16" maxlength="10"> </label></p> <p> <label>Date of Birth : &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp <select name="select"> <option selected value="dd">day</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </label> <label> <select name="select2"> <option selected value="mm">month</option> <option value="jan">Jan</option> <option value="feb">Feb</option> <option value="mar">Mar</option> <option vlue="apr">Apr</option> </select> </label> <label> <select name="select3"> <option selected value="yyyy">Year</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> </select> </label></p> <p>Gender :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp &nbsp&nbsp&nbsp&nbsp&nbsp <label> <input name="r1" type="radio" value="radiobutton" checked> Male</label> <label><input name="r1" type="radio" value="radiobutton"> Female</label></p> <p> <label>City :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp& <select name="select4"> <option selected value="city">Select city</option><option value="hyd">Hyderabad </option> <option value="sec">Secundrabad</option><option value="bang">Bangalore </option> <option value="del">Delhi</option> <option value="mum">Mumbai</option> </select></label> </p> <p> <label>State :

31

Page 32: Web Technology Mtech Cse Lab

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp&nbsp <select name="select5"> <option selected value="state">Select State</option><option value="ap">AndhraPradesh< /option> <option value="map">Maharashtra</option> <option value="kar">Karnataka </option> <option value="up">UttarPradesh</option> </select></label></p><p> <label>Country :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <select name="select6"> <option selected value="country">Select Country</option> <option value="ind">India</option> <option value="cna">China</option> <option value="sl">SriLanka</option> <option value="sauar">Saudi Arabia</option> </select></label></p> <p> <label>Zip Code :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input name="textfield3" type="text" size="8" maxlength="6"> </label></p><p><label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="submit" name="Submit1" value="Submit"></label> <label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="reset" name="Submit2" value="Reset"></label></p></form><script><!--function f(form) {if(document.forms[0].elements[0].value==""){alert("please enter your first name");document.forms[0].elements[0].focus();return(false);}if(document.forms[0].elements[1].value==""){alert("please enter your last name");document.forms[0].elements[1].focus();return(false);}if(document.forms[0].elements[2].value=="dd"){alert("Please select Day of DOB");document.forms[0].elements[2].focus();return(false);

32

Page 33: Web Technology Mtech Cse Lab

}if(document.forms[0].elements[3].value=="mm"){alert("Please select Month of DOB");document.forms[0].elements[3].focus();return(false);}if(document.forms[0].elements[4].value=="yyyy"){alert("Please select Year of DOB");document.forms[0].elements[4].focus();return(false);}if(document.forms[0].elements[7].value=="city"){alert("Please Select Your city");document.forms[0].elements[7].focus();return(false);}if(document.forms[0].elements[8].value=="state"){alert("Please Select Your State");document.forms[0].elements[8].focus();return(false);}if(document.forms[0].elements[9].value=="country"){alert("Please Select Your country");document.forms[0].elements[9].focus();return(false);}if(document.forms[0].elements[10].value==""){alert("Please enter your zip code");document.forms[0].elements[10].focus();return(false);}}--></script></body></html>

33

Page 34: Web Technology Mtech Cse Lab

5. Catalog<html><head><!---Java script><script type="text/javascript">function check(){

document.f1.txtOutput.value="YOUR CART CONTAINS---- \n"; if(document.f1.c1.checked==true)

{ document.f1.txtOutput.value+=document.f1.c1.value+" by Sahithi costs 100/-"; document.f1.txtOutput.value+="\n"; } if(document.f1.c2.checked==true)

{ document.f1.txtOutput.value+=document.f1.c2.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c3.checked==true){

document.f1.txtOutput.value+=document.f1.c3.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c4.checked==true){

document.f1.txtOutput.value+=document.f1.c4.value; document.f1.txtOutput.value+="\n"; }if(document.f1.c5.checked==true)

{ document.f1.txtOutput.value+=document.f1.c5.value; document.f1.txtOutput.value+="\n"; } if(document.f1.c6.checked==true)

{ document.f1.txtOutput.value+=document.f1.c6.value+" by Vijayeswar costs 500/-"; document.f1.txtOutput.value+="\n";

34

Page 35: Web Technology Mtech Cse Lab

}if(document.f1.c7.checked==true){

document.f1.txtOutput.value+=document.f1.c7.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c8.checked==true){

document.f1.txtOutput.value+=document.f1.c8.value+" by Alfred Buccanan costs 170/-"; document.f1.txtOutput.value+="\n"; } if(document.f1.c9.checked==true)

{ document.f1.txtOutput.value+=document.f1.c9.value+" costs 50/-"; document.f1.txtOutput.value+="\n"; } if(document.f1.c10.checked==true)

{ document.f1.txtOutput.value+=document.f1.c10.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c11.checked==true){

document.f1.txtOutput.value+=document.f1.c11.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c12.checked==true){

document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-"); document.f1.txtOutput.value+="\n"; }if(document.f1.c13.checked==true)

{ document.f1.txtOutput.value+=document.f1.c13.value; document.f1.txtOutput.value+="\n"; }

35

Page 36: Web Technology Mtech Cse Lab

if(document.f1.c14.checked==true){

document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-"); document.f1.txtOutput.value+="\n"; }

if(document.f1.c15.checked==true){

document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-"); document.f1.txtOutput.value+="\n"; }

if(document.f1.c16.checked==true){

document.f1.txtOutput.value+=document.f1.c16.value+" costs 20/-"; document.f1.txtOutput.value+="\n";} if(document.f1.c17.checked==true)

{ document.f1.txtOutput.value+=document.f1.c17.value+" costs 60/-"; document.f1.txtOutput.value+="\n"; } if(document.f1.c18.checked==true)

{ document.f1.txtOutput.value+=document.f1.c18.value; document.f1.txtOutput.value+="\n"; }

if(document.f1.c19.checked==true){

document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-"); document.f1.txtOutput.value+="\n"; }

if(document.f1.c20.checked==true){

document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-");

36

Page 37: Web Technology Mtech Cse Lab

document.f1.txtOutput.value+="\n"; }if(document.f1.c21.checked==true)

{ document.f1.txtOutput.value+=(document.f1.c21.value+" costs 250/-"); document.f1.txtOutput.value+="\n"; } if(document.f1.c22.checked==true)

{ document.f1.txtOutput.value+=(document.f1.c22.value+" costs 300/-"); document.f1.txtOutput.value+="\n"; }

if(document.f1.c23.checked==true){

document.f1.txtOutput.value+=(document.f1.c23.value+" 450/-"); document.f1.txtOutput.value+="\n"; }

if(document.f1.c24.checked==true){

document.f1.txtOutput.value+=(document.f1.c24.value+" costs 350/-"); document.f1.txtOutput.value+="\n";}}</script></head><body><bgsound src="mean.mp3" loop="-1"><table cellspacing="4" cellpadding="5"><tr><td><img src="b3.jpg" align="left" height=50 width=100></img><img src="books.jpg" align="left" height=50 width=100></img><img src="bk.gif" align="left" height=50 width=100></img><img src="books1.jpg" align="left" height=50 width=100></img><img src="b4.jpg" align="left" height=50 width=100></img></td></tr> </table><center><form type="get" name="f1" action="ccard.html"><font color="purple"><marquee behaviour="alternate"><h1>Select the Books U are interested in Buying</h1></marquee>

37

Page 38: Web Technology Mtech Cse Lab

<table><tr>

<td></td><td width="350"><font color="sky blue"><h1>Magazines</h1><br></h1><h2><input type="checkbox" name="c1" value="India today"/>India today<br><input type="checkbox" name="c2" value="Politics & India"/>Politics & India<br><input type="checkbox" name="c3" value="Chip"/>Chip<br><input type="checkbox" name="c4" value="Digit"/>Digit<br></font></td><td width="350"><font color="sky blue"><h1>Comics</h1><br></h1><h2><input type="checkbox" name="c5" value="TinTin"/>TinTin<br><input type="checkbox" name="c6" value="Biloo"/>Biloo<br><input type="checkbox" name="c7" value="Arches"/>Arches<br><input type="checkbox" name="c8" value="Chandamama"/>Chandamama<br></font></td></tr><tr><td><img src="fm.jpg" align="left"></img></td><td width="350"><font color="green"><h1>Sports</h1><br></h1><h2><input type="checkbox" name="c9" value="Sports Star"/>Sports Star<br><input type="checkbox" name="c10" value="Cricket Next"/>Cricket Next<br><input type="checkbox" name="c11" value="Future of Indian Sports"/>Future of Indian Sports<br><input type="checkbox" name="c12" value="Tennis Stroke"/>Tennis Stroke<br></font></td><td width="350"><font color="green"><h1>Text Books</h1><br></h1><h2><input type="checkbox" name="c21" value="C & DS"/>C & DS<br><input type="checkbox" name="c13" value="C++"/>

38

Page 39: Web Technology Mtech Cse Lab

C++<br><input type="checkbox" name="c14" value="Networking"/>Networking<br><input type="checkbox" name="c24" value="Java "/>Java <br></font></td></tr></table><input type="button" name="b1" value="ADD TO THE CART" onclick="check()"/><br><textarea rows="10" cols="30" name="txtOutput"></textarea></h2><input type="submit" value=" Buy " /><input type="Reset" value=" Reset " /></form></center></body></html>

7. CreditCard<html>

39

Page 40: Web Technology Mtech Cse Lab

<body leftmargin="30" class=""><form id="form1" name="form1" method="post" action="oder.html" onSubmit="return f(this.form)" style="background-color:wheat"> <b><h2><label>Name :&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input name="text" type="text" size="20" maxlength="16" /> <br /><br>Credit cardno : <input name="text" type="text" size="20" maxlength="20" /> </label> <p><label>Three Digit CVV no.:&nbsp<input name="text" type="text" size="5" maxlength="3" /> </label> </p> Expiry Date - <label>Month : <select name="select"> <option selected value="mm">Select</option> <option value="jan">Jan</option> <option value="feb">Feb</option> <option value="mar">Mar</option> </select> </label> <label>Year : <select name="select2"> <option selected value="yyyy">Select</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option></select> </label> <p>Shipping Address : <label> <input type="textarea" name="textarea"></textarea> </label> </p><p><label>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="submit" name="b1" value="Submit" /> </label> <label>&nbsp;&nbsp;<input type="reset" name="r2" value="Reset" /> </label> </p></form><script><!--function f(form) {if(document.forms[0].elements[0].value=="")

40

Page 41: Web Technology Mtech Cse Lab

{alert("please enter your name");document.forms[0].elements[0].focus();return(false);}

if(document.forms[0].elements[1].value==""){alert("please enter your credit card number");document.forms[0].elements[1].focus();return(false);}if(document.forms[0].elements[2].value==""){alert("please enter your three digit CVV number");document.forms[0].elements[2].focus();return(false);}if(document.forms[0].elements[3].value=="mm"){alert("Please select Month");document.forms[0].elements[3].focus();return(false);}if(document.forms[0].elements[4].value=="yyyy"){alert("Please select Year");document.forms[0].elements[4].focus();return(false);}if(document.forms[0].elements[5].value==""){alert("Please enter your address");document.forms[0].elements[5].focus();return(false);}}//--></script></body></html>

3. Create and save an XML document at the server, which

contains 10 users information. Write a program which takes User Id as input and returns the user details by taking the user information from the XML document.

User.xml<?xml version=”1.0”?>

41

Page 42: Web Technology Mtech Cse Lab

<userlist><user>

<userid>usr01</userid><username>Gouse</username><address>DSNR</address><phone>8801550101</phone><email>[email protected]</email>

</user><user>

<userid>usr02</userid><username>D Divakar</username><address>Ameerpet</address><phone>9888888888</phone><email>D [email protected]</email>

</user><user>

<userid>usr03</userid><username>Rajinth</username><address>SR Nagar</address><phone>9866666666</phone><email>[email protected]</email>

</user><user>

<userid>usr04</userid><username>M Vijaya</username><address>DESHMUKHI</address><phone>9835994445</phone><email>M [email protected]</email>

</user><user>

<userid>usr05</userid><username>Kusuma</username><address>KOTI</address><phone>968877555</phone><email>[email protected]</email>

</user>

<user><userid>usr06</userid><username>P Kalpana</username><address>KOTI</address><phone>968875554</phone><email>P [email protected]</email>

</user>

<user>

42

Page 43: Web Technology Mtech Cse Lab

<userid>usr07</userid><username>V Anitha</username><address>KPHB</address><phone>968888554</phone><email>V [email protected]</email>

</user>

<user><userid>usr08</userid><username>M Ramesh</username><address>IBP</address><phone>968878554</phone><email>M [email protected]</email>

</user>

<user><userid>usr09</userid><username>Raswitha</username><address>DSNGR</address><phone>968899554</phone><email>[email protected]</email>

</user>

<user><userid>usr10</userid><username>A Prasanna</username><address>KPHB</address><phone>9088008554</phone><email>A [email protected]</email>

</user>

</userlist>

User.html

<html><head>

<script language="javascript">function fncDisplayInfo(){var xhttp=null;var flag=0;var userid = document.frm.uname.value;var xmlDoc = new

43

Page 44: Web Technology Mtech Cse Lab

ActiveXObject("microsoft.xmldom");xmlDoc.load("user.xml");var noOfUsers =

xmlDoc.getElementsByTagName("userlist")[0].childNodes.length;for(var i=0;i<parseInt(noOfUsers);i++){ var uid

=xmlDoc.getElementsByTagName("user")[i].childNodes[0].childNodes[0].nodeValue;

if(uid == userid) {

document.write("<h1> User Details</h1>");

var userName = xmlDoc.getElementsByTagName("user")[i].childNodes[1].childNodes[0].nodeValue;

var Address =xmlDoc.getElementsByTagName("user")[i].childNodes[2].childNodes[0].nodeValue;

var phone = xmlDoc.getElementsByTagName("user")[i].childNodes[3].childNodes[0].nodeValue;

var email= xmlDoc.getElementsByTagName("user")[i].childNodes[4].childNodes[0].nodeValue;

document.write("<br><b>User ID :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+uid)

document.write("<br>User Name :&nbsp"+userName);

document.write("<br>Address :&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp "+Address);

document.write("<br>Phone no : &nbsp&nbsp&nbsp&nbsp&nbsp"+phone);

document.write("<br>E - Mail : &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+email);

flag =1;break;}

}if(flag==0){alert("InValid User");}

44

Page 45: Web Technology Mtech Cse Lab

}</script>

</head><body>

<center><h1><b>User Information</h1><form name="frm">

User ID : <input type="text" name="uname"><br>

<input type="button" name="btn" value="Submit" onclick="fncDisplayInfo()">

</form></center>

</body>

45

Page 46: Web Technology Mtech Cse Lab

46

Page 47: Web Technology Mtech Cse Lab

4. Developing a Simple Bean Using the BDK:

This section presents an example that shows how to develop a simple Bean

and connect it to other components via the BDK. Our new component is

called the Colors Bean. It appears as either a rectangle or ellipse that is

filled with a color. A color is chosen at random when the Bean begins

execution. A public method can be invoked to change it. Each time the

mouse is clicked on the Bean, another random color is chosen. There is one

boolean read/write property that determines the shape. The BDK is used to

lay out an application with one instance of the Colors Bean and one instance

of the OurButton Bean. The button is labeled “Change.” Each time it is

pressed, the color changes.G JAVA

Create a New Bean

Here are the steps that you must follow to create a new Bean:

1. Create a directory for the new Bean.

2. Create the Java source file(s).

3. Compile the source file(s).

4. Create a manifest file.

5. Generate a JAR file.

6. Start the BDK.

7. Test.

The following sections discuss each of these steps in detail.

Create a Directory for the New Bean

You need to make a directory for the Bean. To follow along with this example, create

c:\bdk\demo\sunw\demo\colors. Then change to that directory.

The Colors and OurButton Beans

Create the Source File for the New Bean

47

Page 48: Web Technology Mtech Cse Lab

The source code for the Colors component is shown in the following listing. It is located in the file Colors.java.

The import statement at the beginning of the file places it in the package

named sunw.demo.colors. Recall from Chapter 9 that the directory

hierarchy corresponds to the package hierarchy. Therefore, this file must be

located in a subdirectory named sunw\demo\colors relative to the

CLASSPATH environment variable. The color of the component is

determined by the private Color variable color, and its shape is determined

by the private boolean variable rectangular.

The constructor defines an anonymous inner class that extends

MouseAdapter and overrides its mousePressed( ) method. The

change( ) method is invoked in response to mouse presses. The component

is initialized to a rectangular shape of 200 by 100 pixels. The change( )

method is invoked to select a random color and repaint the component.

The getRectangular( ) and setRectangular( ) methods provide access to

the one property of this Bean. The change( ) method calls randomColor( )

to choose a color and then calls repaint( ) to make the change visible.

Notice that the paint( ) method uses the rectangular and color variables

to determine how to present the Bean.

// A simple Bean.package sunw.demo.colors;import java.awt.*;import java.awt.event.*;public class Colors extends Canvas {transient private Color color;private boolean rectangular;public Colors() {addMouseListener(new MouseAdapter() {public void mousePressed(MouseEvent me) {change();}});rectangular = false;setSize(200, 100);change();}

48

Page 49: Web Technology Mtech Cse Lab

public boolean getRectangular() {return rectangular;}public void setRectangular(boolean flag) {this.rectangular = flag;repaint();}public void change() {color = randomColor();repaint();}private Color randomColor() {int r = (int)(255*Math.random());int g = (int)(255*Math.random());int b = (int)(255*Math.random());return new Color(r, g, b);}public void paint(Graphics g) {Dimension d = getSize();int h = d.height;int w = d.width;g.setColor(color);if(rectangular) {g.fillRect(0, 0, w-1, h-1);}else {g.fillOval(0, 0, w-1, h-1);}}}

Compile the Source Code for the New Bean

Compile the source code to create a class file. Type the following: javac Colors.java.

Create a Manifest File

You must now create a manifest file. First, switch to the c:\bdk\demo

directory. This is the directory in which the manifest files for the BDK demos

are located. Put the source code for your manifest file in the file colors.mft.

It is shown here:

Name: sunw/demo/colors/Colors.class

49

Page 50: Web Technology Mtech Cse Lab

Java-Bean: True

This file indicates that there is one .class file in the JAR file and that it is a

Java Bean. Notice that the Colors.class file is in the package

sunw.demo.colors and in the subdirectory sunw\demo\colors relative to

the current directory.

Generate a JAR File

Beans are included in the ToolBox window of the BDK only if they are in JAR

files in the directory c:\bdk\jars. These files are generated with the jar

utility. Enter the following:

jar cfm ..\jars\colors.jar colors.mft sunw\demo\colors\*.class

This command creates the file colors.jar and places it in the directory c:\bdk\jars.(You may wish to put this in a batch file for future use.)

Start the BDK

Change to the directory c:\bdk\beanbox and type run. This causes the BDK

to start. You should see three windows, titled ToolBox, BeanBox, and

Properties. The ToolBox

window should include an entry labeled “Colors” for your new Bean.

Create an Instance of the Colors Bean

After you complete the preceding steps, create an instance of the Colors

Bean in the BeanBox window. Test your new component by pressing the

mouse anywhere within its borders. Its color immediately changes. Use the

Properties window to change the rectangular property from false to true.

Its shape immediately changes.

Create and Configure an Instance of the OurButton Bean

50

Page 51: Web Technology Mtech Cse Lab

Create an instance of the OurButton Bean in the BeanBox window. Then follow these steps:

1. Go to the Properties window and change the label of the Bean to

“Change”. You should see that the button appearance changes

immediately when this property is changed.

2. Go to the menu bar of the BeanBox and select Edit | Events | action |

actionPerformed.

3. Move the cursor so that it is inside the Colors Bean display area, and

click the left mouse button. You should see the Event Target Dialog

dialog box.

4. The dialog box allows you to choose a method that should be invoked

when this button is clicked. Select the entry labeled “change” and click

the OK button. You should see a message box appear very briefly,

stating that the tool is “Generating and compiling adaptor class.”

5. Click on the button. You should see the color change.

You might want to experiment with the Colors Bean a bit before moving on.

Output:

51

Page 52: Web Technology Mtech Cse Lab

a. ConvertBean.javaimport java.awt.*;import java.awt.event.*;import javax.swing.*;import javax.swing.border.*;import javax.swing.BorderFactory; public class ConvertBean extends JFrame implements ActionListener{JPanel np,cp;JLayeredPane lp1,lp2;JLabel lblrupees,lbl_america,lbl_africa,lbl_australia,lbl_safrica,lbl_singa;JTextField tfrupees;//JButton convert;JTextField tf_america,tf_africa,tf_australia,tf_safrica,tf_singa;

public ConvertBean(){setSize(600,400);setTitle("Converting Rupees to Dollars");

np=new JPanel();cp=new JPanel();setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

lblrupees=new JLabel("Enter the Amount in Rupees");lbl_america=new JLabel("American Dollars");

52

Page 53: Web Technology Mtech Cse Lab

lbl_africa=new JLabel("Afirca Dollars");lbl_australia=new JLabel("Australia Dollars");lbl_safrica=new JLabel("South Afirca Dollars");lbl_singa=new JLabel("Singapoor Dollars");

tfrupees=new JTextField(10);tfrupees.setPreferredSize(new Dimension(300,50));//convert=new JButton("Convert");//convert.setPreferredSize(new Dimension(1000,50));tfrupees.addActionListener(this);tf_america=new JTextField(5);tf_america.setEditable(false);tf_africa=new JTextField(5);tf_africa.setEditable(false);tf_australia=new JTextField(5);tf_australia.setEditable(false);tf_safrica=new JTextField(5);tf_safrica.setEditable(false);tf_singa=new JTextField(5);tf_singa.setEditable(false);

lp1=new JLayeredPane();lp1.setPreferredSize(new Dimension(400,50));lp1.setLayout(new GridLayout(2,1,6,6));

lp1.add(lblrupees);lp1.add(tfrupees);//lp1.add(convert);Font f=new Font("serif",1,20);np.setBorder(BorderFactory.createTitledBorder(BorderFactory.createEtchedBorder(),"Convering rupees to Dollars ",TitledBorder.CENTER,TitledBorder.ABOVE_TOP,f,Color.magenta));np.add(lp1);getContentPane().add(np,"North");

lp2=new JLayeredPane();lp2.setLayout(new GridLayout(5,1,6,6));lp2.setPreferredSize(new Dimension(300,150));lp2.add(lbl_america);lp2.add(tf_america);lp2.add(lbl_africa);lp2.add(tf_africa);lp2.add(lbl_australia);lp2.add(tf_australia);lp2.add(lbl_safrica);lp2.add(tf_safrica);lp2.add(lbl_singa);lp2.add(tf_singa);cp.add(lp2);getContentPane().add(cp,"Center");show();}

public static void main(String args[]){ new ConvertBean();

53

Page 54: Web Technology Mtech Cse Lab

}

public void actionPerformed(ActionEvent ae){double amount=Double.parseDouble(tfrupees.getText());beanpackage.DollarBean db=new beanpackage.DollarBean();

db.setAmericanDollars(amount);tf_america.setText(db.getAmericanDollars()+"$");

db.setAfricanDollars(amount);tf_africa.setText(db.getAfricanDollars()+"$");

db.setAustralianDollars(amount);tf_australia.setText(db.getAustralianDollars()+"$");

db.setSouthAfricanDollars(amount);tf_safrica.setText(db.getSouthAfricanDollars()+"$");

db.setSingapoorDollars(amount);tf_singa.setText(db.getSingapoorDollars()+"$");}}

b. ConvertDemo.javaimport javax.swing.*;import java.awt.*;import java.sql.*;import java.awt.event.*;import java.util.*;public class ConvertDemo extends JFrame implements ActionListener{JPanel p1,p2,p3,p4,p5,p6;JButton b1,b2,b3,b4;JTextField tfenam,tfdept,tfestb,tfddoc,tfddon,tf1,tf2,tf3,tf4,tf5,tf6,tf7,tf8;String st1;String DateString="";public ConvertDemo(){setSize(820,580);setTitle("Converting Rupees into Dollars");Font f=new Font("serif",1,16);

54

Page 55: Web Technology Mtech Cse Lab

p1=new JPanel(); p2=new JPanel(); p3=new JPanel(); p4=new JPanel(); p5=new JPanel(); p6=new JPanel();

tfenam=new JTextField();tfenam.setFont(f);tfenam.setEnabled(true);tfdept=new JTextField();tfdept.setFont(f);tfdept.setEnabled(true);tfestb=new JTextField();tfestb.setFont(f);tfestb.setEnabled(true);tfddoc=new JTextField();tfddoc.setFont(f);tfddoc.setEnabled(true);tfddon=new JTextField();tfddon.setFont(f);tfddon.setEnabled(true);

tf1=new JTextField(7);tf1.setFont(f);tf2=new JTextField(7);tf2.setFont(f);tf3=new JTextField(7);tf3.setFont(f); tf4=new JTextField(7);tf4.setFont(f);

b1=new JButton("convert");b1.addActionListener(this);

p2.add(b1);p2.add(b2);p2.add(b3);p2.add(b4);

JLabel l1=new JLabel(" G O Number");JLabel l2=new JLabel(" From");JLabel l3=new JLabel(" To");JLabel l4=new JLabel(" Post Held");JLabel l5=new JLabel(" Purpose for which&Qualifies");JLabel l6=new JLabel(" Date");

JLabel l9=new JLabel(" Employee Number");JLabel l10=new JLabel(" Employee Name");JLabel l11=new JLabel(" Department");JLabel l12=new JLabel(" Establishment");JLabel l13=new JLabel(" DDO Code");JLabel l14=new JLabel(" DDO Name");

JLabel l15=new JLabel("Converting Rupees into Dollars");l15.setFont(new Font("serif",1,20));

JLayeredPane ip1=new JLayeredPane();ip1.setBorder(BorderFactory.createTitledBorder(""));ip1.setPreferredSize(new Dimension(500,230));

55

Page 56: Web Technology Mtech Cse Lab

ip1.add(l1);ip1.add(tf1);ip1.add(l2);ip1.add(l3);ip1.add(l4);ip1.add(l5);ip1.add(l6);p4.add(l15);p1.add(l9);p1.add(l10);p1.add(tfenam);p1.add(l11);p1.add(tfdept);p1.add(l12);p1.add(tfestb);p1.add(l13);p1.add(tfddoc);p1.add(l14);p1.add(tfddon);

JLayeredPane ip2=new JLayeredPane();ip2.setPreferredSize(new Dimension(780,200));ip2.add(ip1);

p3.add(ip1);p3.add(ip2);p5.add(p4);p5.add(p1);p3.setLayout(new FlowLayout(FlowLayout.CENTER,10,20));p1.setLayout(new GridLayout(2,3,10,10));p5.setLayout(new GridLayout(2,1,1,2));ip1.setLayout(new GridLayout(6,1,10,10));ip2.setLayout(new GridLayout(2,1,1,10));

//Foreign Serevice Details

JLabel lf1=new JLabel(" From");JLabel lf2=new JLabel(" To");JLabel lf3=new JLabel(" Post Held");JLabel lf4=new JLabel(" Name of the Foreign Employee");JLabel lf5=new JLabel(" Leave and Pension contribution payble by");JLabel lf6=new JLabel(" Amount of Leave salary and Pesioncontribution actually recieved");

JLayeredPane ipf1=new JLayeredPane();

56

Page 57: Web Technology Mtech Cse Lab

ipf1.setBorder(BorderFactory.createTitledBorder(""));ipf1.setPreferredSize(new Dimension(500,230));ipf1.add(lf1);ipf1.add(lf2);ipf1.add(lf3);ipf1.add(lf4);ipf1.add(tf2);ipf1.add(lf5);ipf1.add(lf6);ipf1.add(tf3);

JLayeredPane ipf2=new JLayeredPane();ipf2.setPreferredSize(new Dimension(780,200));ipf2.add(ipf1);

p6.add(ipf1);p6.add(ipf2);p6.setLayout(new FlowLayout(FlowLayout.CENTER,10,20));ipf1.setLayout(new GridLayout(6,1,10,10));ipf2.setLayout(new GridLayout(2,1,1,10));

getContentPane().add(p5,"North");getContentPane().add(p2,"South");

addWindowListener(new WindowAdapter(){public void windowClosing(WindowEvent we){setVisible(false);//System.exit(0);}});show();}public void actionPerformed(ActionEvent ae){}

public static void main(String args[]){new ConvertDemo();}}

57

Page 58: Web Technology Mtech Cse Lab

c. DollarBean.javapackage beanpackage;public class DollarBean{double america,aus,africa,safrica,singa;public DollarBean(){america=0;aus=0;africa=0;safrica=0;singa=0;}public void setAmericanDollars(double amt){america=amt;}public double getAmericanDollars(){return america-40;}

public void setAfricanDollars(double amt){africa=amt;}public double getAfricanDollars(){return africa-20;}

public void setAustralianDollars(double amt){aus=amt;}public double getAustralianDollars(){return aus-30;}public void setSouthAfricanDollars(double amt){safrica=amt;}public double getSouthAfricanDollars(){return safrica-25;

58

Page 59: Web Technology Mtech Cse Lab

}public void setSingapoorDollars(double amt){singa=amt;}public double getSingapoorDollars(){return singa-28;}}

d. Sign/*<applet code="Sig.class" height=300 width=200></applet>*/import java.awt.*;import java.lang.String;import java.awt.event.*;import java.applet.Applet;import java.applet.*;public class Sig extends Applet implements ItemListener{boolean c1,c2,c3;String s1; Checkbox r1,r2,r3; CheckboxGroup cbg; public void init(){ cbg=new CheckboxGroup(); Panel p=new Panel(); p.setLayout(new GridLayout()); add(r1=new Checkbox("red",cbg,false)); add(r2=new Checkbox("yellow",cbg,false)); add(r3=new Checkbox("green",cbg,false)); r1.addItemListener(this);r2.addItemListener(this);r3.addItemListener(this); }

public void paint(Graphics g) { g.setColor(Color.red); g.drawOval(10, 30, 20, 20); //System.out.println(s1); g.setColor(Color.yellow); g.drawOval(10, 60, 20, 20); g.setColor(Color.green); g.drawOval(10, 90, 20, 20); s1=cbg.getSelectedCheckbox().getLabel();

59

Page 60: Web Technology Mtech Cse Lab

if(s1=="red") { g.setColor(Color.red); g.fillOval(10, 30, 20, 20); } else if(s1=="yellow") { g.setColor(Color.yellow); g.fillOval(10, 60, 20, 20); } else if(s1=="green") { g.setColor(Color.green); g.fillOval(10, 90, 20, 20); } } public void itemStateChanged(ItemEvent ie) {

repaint();}}

60

Page 61: Web Technology Mtech Cse Lab

5. Install TOMCAT web server.

Steps to run Simple Servlet Program:

1. Create the following directoryE.g.: C:\FirstServlet\WEB-INF\classes

FirstServlet: Directory consists of HTML, JSP & Images filesWEB-INF: Directory consists of web.xml filesclasses: Directory consists of JAVA files i.e. all .java & .class files

2. Write java program Welcome.java save under classes directory

import javax.servlet.*;import java.io.*;public class Welcome extends GenericServlet{public void service(ServletRequest r1,ServletResponse res)throws IOException, ServletException{res.setContentType("text/plain");PrintWriter pw=res.getWriter();pw.println("<b><h1>Hello");pw.close();}}

3. Create web.xml file save under WEB-INF directory<web-app>

<display-name> First program</display-name><description>First program</description><servlet>

<servlet-name>Hello</servlet-name><servlet-class>Welcome</servlet-class>

</servlet><servlet-mapping>

<servlet-name>Hello</servlet-name><url-pattern>/first/Hello</url-pattern>

</servlet-mapping></web-app>

4. Set classpath Go to environmental variables

61

Page 62: Web Technology Mtech Cse Lab

Variable name

CLASSPATH

Variable value

C:\ Program Files\Apache Software Foundation\Tomcat 5.5\common\lib\servlet-api.jar;.

5. Compile java file

C:\FirstServlet\WEB-INF\classes\> javac Welcome.java

6. Go to root directory , make the web archive file(war file)C:\FirstServlet\WEB-INF\classes\>cd.. C: FirstServlet \WEB-INF\>cd.. C:\FirstServlet\> jar –cvf first.war *.*

7. Copy the root directory & past it into the tomcat webapps directory .

C:\ Program Files\Apache Software Foundation\Tomcat 5.5\webapps/> FirstServlet

8. Start the TOMCAT server fromC:\ Program Files\Apache Software Foundation\Tomcat 5.5\bin\Tomcat Service Runner

9. After starting the tomcat server open the Internet browser, type in address bar as:

http://localhost:8080/

62

Page 63: Web Technology Mtech Cse Lab

10. Goto Tomcat Manager

Enter admin id & password & deploy the war file.

63

Page 64: Web Technology Mtech Cse Lab

11. Select your file from Applications

FirstServlet/

Note: if it successfully deployed then its Running will be true , otherwise it is false.

Go back to your root directory FirstServlet check the web.xml file. Again perform/ continue from step.5 to step.11

12. After selecting/clicking your FirstServlet/ from the applications.You will get the web page with address bar as:http://localhost:8080/FirstServlet/

then type your war file name(i.e. first)http://localhost:8080/FirstServlet/first/

then type your URL-PATTERN name( i.e. Welcome)http://localhost:8080/FirstServlet/first/Welcome

13. Then the output will be display:

2. Login details validation

64

Page 65: Web Technology Mtech Cse Lab

Login.html <html ><head>

<title>UserVerification</title><script language="JavaScript">

function valid(form){if(document.validate.uname.value=="") {pd.innerHTML="Enter Username";alert("Please Enter User Name");return false;}

if(document.validate.pwd.value=="") {pd.innerHTML="Enter Password";alert("Please Enter Password");return false;}

if((document.validate.uname.value).length<=5) {pd.innerHTML="Username must be more than 6 Chars";return false;}

if((document.validate.pwd.value).length<=5) {pd.innerHTML="Password must be more than 6 Chars";return false;}

}</script></head><body bgcolor="wheat"><center><h1>Sending data to servlet</h1>

<form name="validate" action="servlet/login" method="post" onSubmit="return valid(this)">

<h3>Member Login</h3><b><h2>Username <input type=text name="uname"><br>

65

Page 66: Web Technology Mtech Cse Lab

Password <input type=password name="pwd"><p id="pd"></p><br></h2>

<input type="submit" Value="Sign in" >&nbsp;&nbsp;&nbsp;&nbsp;</center></form></body></html>

Web.xml<web-app>

<display-name>UserVerify</display-name> <description>UserVerify </description><servlet> <servlet-name>UserVerify</servlet-name> <servlet-class>postParam</servlet-class> </servlet>

<servlet-mapping> <servlet-name>UserVerify</servlet-name> <url-pattern>/servlet/login</url-pattern> </servlet-mapping>

<welcome-file-list><welcome-file>Login.html</welcome-file></welcome-file-list>

</web-app>

postParam.java

import java.io.*;import javax.servlet.*;import java.util.*;public class postParam extends GenericServlet{public void service(ServletRequest req,ServletResponse res) throws IOException,ServletException{res.setContentType("text/html");

PrintWriter pw=res.getWriter();String pn=req.getParameter("uname");String pv=req.getParameter("pwd");

66

Page 67: Web Technology Mtech Cse Lab

pw.println("<html> <body><center>");pw.println("<h1><font color=red>Acessing the Data from Html and displaying on Servlet</h1>");pw.println("<br/><h2><b>NAME: "+pn);

pw.println("<br><br><b>PASSWORD:"+pv);pw.println("</h2></html></body>");

pw.close();} }

67

Page 68: Web Technology Mtech Cse Lab

68

Page 69: Web Technology Mtech Cse Lab

69

Page 70: Web Technology Mtech Cse Lab

70

Page 71: Web Technology Mtech Cse Lab

3. Validation Steps to run Simple Servlet Program:

1. Create the following directoryE.g.: C:\SecondServlet\WEB-INF\classes

SecondServlet : Directory consists of HTML, JSP & Images filesWEB-INF : Directory consists of web.xml filesClasses : Directory consists of JAVA files i.e. all .java & .class files

2. Create Login.html ,Success.html & Fail.html . Save all these three file under root directory SecondServlet

<html><body><center><h1>Enter the details</h1><pre><b><form action="test/verify">Name:&nbsp&nbsp&nbsp&nbsp:<input type="text" name="lname"><br>Password :<input type="password" name="lpwd"><br><input type="submit" value="Login"></center></form></body></html>

<html><body><h1>Login Sucessfully</h1></body></html>

<html><body><h1>Login Fail</h1><h2> Try again</h2></body></html>

3. Write java program VerifyServlet.java save under classes directory

71

Page 72: Web Technology Mtech Cse Lab

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class Verifyservlet extends HttpServlet {public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException{res.setContentType("text/htnl");String name=req.getParameter("lname");String pwd=req.getParameter("lpwd");if(name.equals("Gouse")&&pwd.equals("CSE"))res.sendRedirect("http://localhost:8080/Root/Success.html");elseres.sendRedirect("http://localhost:8080/Root/Fail.html");}}

4. Create web.xml file save under WEB-INF directory<web-app> <display-name> First program</display-name> <description>First program</description> <servlet> <servlet-name>mtech</servlet-name> <servlet-class>Verifyservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>mtech</servlet-name> <url-pattern>/test/verify</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>login.html</welcome-file> </welcome-file-list><//web-app>

5. Set classpath Go to environmental variables Variable name

CLASSPATH

72

Page 73: Web Technology Mtech Cse Lab

Variable value

C:\ Program Files\Apache Software Foundation\Tomcat 5.5\common\lib\servlet-api.jar;.

6. Compile java fileC:\ SecondServlet \WEB-INF\classes\> javac Welcome.java

7. Go to root directory , make the web archive file(war file)C:\ SecondServlet \WEB-INF\classes\>cd.. C: SecondServlet \WEB-INF\>cd.. C:\ SecondServlet\> jar –cvf test.war *.*

8. Copy the root directory & past it into the tomcat webapps directory .C:\ Program Files\Apache Software Foundation\Tomcat 5.5\webapps/> SecondServlet

9. Start the TOMCAT server fromC:\ Program Files\Apache Software Foundation\Tomcat 5.5\bin\Tomcat Service Runner

10. After starting the tomcat server open the Internet browser, type in address bar as:http://localhost:8080/

11. Goto Tomcat Manager Enter admin id & password & deploy the war file.

12. Select your file from Applications

SecondServlet/Note: if it successfully deployed then its Running will be true , otherwise it is false.Go back to your root directory FirstServlet check the web.xml file.& HTML fileAgain perform/ continue from step.5 to step.11

13. After selecting/clicking your SecondServlet/ from the applications.You will get the web page with address bar as:http://localhost:8080/SecondServlet/

73

Page 74: Web Technology Mtech Cse Lab

http://localhost:8080/SecondServlet/Success.html

74

Page 75: Web Technology Mtech Cse Lab

If user enter the wrong user name or passwordhttp://localhost:8080/SecondServlet/Fail.html

75

Page 76: Web Technology Mtech Cse Lab

76

Page 77: Web Technology Mtech Cse Lab

4. Cookies//Cooki.html

<html><body><form method="post" action="exp/Cooki1"><center><b>Enter Name:&nbsp<input type="text" name="nm" size="15"/><br>Password:&nbsp&nbsp&nbsp&nbsp&nbsp<input type="password" name="pw" size="15"/><br><br><input type="submit" name="Add" value="Add Cookie"/><br><br><input type="submit" name="List" value="List Cookies"/></center></form></body></html>

Web.xml

<web-app><servlet><servlet-name>Cooki1</servlet-name><servlet-class>Cooki1</servlet-class></servlet><servlet-mapping><servlet-name>Cooki1</servlet-name><url-pattern>/exp/Cooki1</url-pattern></servlet-mapping><welcome-file-list><welcome-file>Cooki.html></welcome-file></welcome-file-list></web-app>

Cooki.html

import java.io.*;

77

Page 78: Web Technology Mtech Cse Lab

import javax.servlet.*;import javax.servlet.http.*;public class Cooki1 extends HttpServlet{public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException{String s1=req.getParameter("nm");String s2=req.getParameter("pw");String s3=req.getParameter("Add");String s4=req.getParameter("List");

res.setContentType("text/html");

PrintWriter pw=res.getWriter();if(s4==null){Cookie c1 = new Cookie(s1,s2);res.addCookie(c1);res.sendRedirect("http://localhost:8080/Cooki/Cooki.html");}else{Cookie c[]=req.getCookies();for(int i=0;i<c.length;i++){pw.print("<b>"+c[i].getName()+":::"+c[i].getValue()+"<br>");}}pw.close();}

}

78

Page 79: Web Technology Mtech Cse Lab

:

79

Page 80: Web Technology Mtech Cse Lab

80

Page 81: Web Technology Mtech Cse Lab

5. Convert the static webpages of assignments 2 into dynamic webpages using servlets and cookies. Hint: Users information (user id, password, credit card number) would be stored in web.xml. Each user should have a separate Shopping Cart.

Web.xml<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE web-appPUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd"><web-app>

<display-name>Servlet 2.4 Examples</display-name><description>Servlet 2.4 Examples.</description><servlet>

<servlet-name>reg</servlet-name><servlet-class>reg</servlet-class>

</servlet><servlet>

<servlet-name>login</servlet-name><servlet-class>login</servlet-class>

</servlet><servlet>

<servlet-name>profile</servlet-name><servlet-class>profile</servlet-class>

</servlet><servlet>

<servlet-name>catalog</servlet-name><servlet-class>catalog</servlet-class>

<servlet-mapping><servlet-name>order</servlet-name><url-p</servlet>

<servlet><servlet-name>order</servlet-name><servlet-class>order</servlet-class>

</servlet>attern>order</url-pattern></servlet-mapping><servlet-mapping>

<servlet-name>catalog</servlet-name><url-pattern>catalog</url-pattern>

</servlet-mapping><servlet-mapping>

<servlet-name>profile</servlet-name>

81

Page 82: Web Technology Mtech Cse Lab

<url-pattern>profile</url-pattern></servlet-mapping><servlet-mapping>

<servlet-name>login</servlet-name><url-pattern>login</url-pattern>

</servlet-mapping><servlet-mapping>

<servlet-name>reg</servlet-name><url-pattern>reg</url-pattern>

</servlet-mapping></web-app>

Main.html<html ><body bgcolor="pink"><br /><br /><br /><br /><br /><h1 align="center"><U>ONLINE BOOK STORAGE</U></h1><br /><br /><br /><h2 align="center"><pre><b>Welcome to online book storage.Press LOGIN if you are having idotherwise press REGISTRATION</b></pre></h2><br /><br /><pre><div align="center"><a href="/tr/login.html">LOGIN</a> <a href="/tr/reg.html">REGISTRATION</a></div></pre></body></html>

Login.html<html><body bgcolor="pink"><br /><br /><br /><form name="myform" method="post" action="/tr/login"><div align="center"><pre>LOGIN ID :<input type="text" name="id" /><br />PASSWORD :<input type="password" name="pwd" /></pre><br /><br /></div><br /><br /><div align="center"><input type="submit" value="ok" onclick="validate()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" /></div>

82

Page 83: Web Technology Mtech Cse Lab

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

Reg.html<html><body bgcolor="pink"><br /><br /><form name="myform" method="post" action="/tr/reg"><div align="center"><pre>NAME :<input type="text" name="name" /><br />ADDRESS :<input type="text" name="addr" /><br />CONTACT NUMBER :<input type="text" name="phno" /><br />LOGINID :<input type="text" name="id" /><br />PASSWORD :<input type="password" name="pwd" /></pre><br /><br /></div><br /><br /><div align="center"><input type="submit" value="ok" onclick="validate()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" /></div></form></body></html>Profile.html<html><body bgcolor="pink"><br /><br /><br /><form name="myform" method="post" action="/tr/profile"><div align="center"><pre>LOGIN ID :<input type="text" name="id" /><br /></pre><br /><br /></div><br /><br /><div align="center"><input type="submit" value="ok" onclick="validate()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" /></div></form></body></html>Catalog.html<html ><body bgcolor="pink"><br /><br /><br /><form method="post" action="/tr/catalog">

83

Page 84: Web Technology Mtech Cse Lab

<div align="center"><pre>BOOK TITLE :<input type="text" name="title" /><br /></pre><br /><br /></div><br /><br /><div align="center"><input type="submit" value="ok" name="button1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" name="button2"/></div></form></body></html>

Order.html<html ><body bgcolor="pink"><br /><br /><form method="post" action="/tr/reg"><div align="center"><pre>NAME :<input type="text" name="name" /><br />PASSWORD :<input type="password" name="pwd" />TITLE :<input type="text" name="title" /><br />NO. OF BOOKS :<input type="text" name="no" /><br />DATE :<input type="text" name="date" /><br />CREDIT CARD NUMBER:<input type="password" name="cno" /><br /></pre><br /><br /></div><br /><br /><div align="center"><input type="submit" value="ok" name="button1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" name="button2"/></div></form></body></html>

Login.javaimport java.sql.*;import java.io.*;import java.util.*;import javax.servlet.*;

84

Page 85: Web Technology Mtech Cse Lab

import javax.servlet.http.*;public class login extends HttpServlet{

public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{

PrintWriter pw=resp.getWriter();pw.println("<html><body bgcolor=\"pink\");String id=req.getParamenter("id");String pwd=req.getParameter("pwd");try{

Driver d=new oracle.jdbc.driver.OracleDriver();DriverManager.registerDriver(d);

Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");Statement stmt=con.createStatement();String sqlstmt="select id,password from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;while(rs.next()){

if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2))){

flag=1;}

}if(flag==0){

pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");

pw.println("<a href=\"/tr/login.html\">press LOGIN to RETRY</a>");

}else{

pw.println("VALID LOGIN ID<br><br>");pw.println("<h3><ul>");

pw.println("<li><ahref=\"profile.html\"><fontcolor=\"black\">USER PROFILE</font>

</a></li><br><br>");

85

Page 86: Web Technology Mtech Cse Lab

pw.println("<li><ahref=\"catalog.html\"><fontcolor=\"black\">BOOKS CATALOG</font></a></li><br><br>");

pw.println("<li><ahref=\"order.html\"><fontcolor=\"black\">ORDER CONFIRMATION</font> </a></li><br><br>");}pw.println("</body></html>");

}catch(Exception e){

resp.sendError(500,e.toString());}

}}

Reg.htmlimport java.sql.*;import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class login extends HttpServlet{

public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{

PrintWriter pw=resp.getWriter();pw.println("<html><body bgcolor=\"pink\");String name=req.getParamenter("name");String addr=req.getParameter("addr");String phno=req.getParameter("phno");String id=req.getParamenter("id");String pwd=req.getParameter("pwd");int no=Integer.parseInt(phno);try{

Driver d=new oracle.jdbc.driver.OracleDriver();DriverManager.registerDriver(d);Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");Statement stmt=con.createStatement();String sqlstmt="select id,password from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;

86

Page 87: Web Technology Mtech Cse Lab

while(rs.next()){

if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2))){

flag=1;}

}if(flag==1){pw.println("SORRY INVALID ID ALREADY EXITS TRY AGAIN WITH NEW ID<br><br>");

pw.println("<a href=\"/tr/reg.html\">press REGISTER to RETRY</a>");

}else{

Statement stmt1=con.createStatement();stmt1.executeUpdate("insertintologin values("+names","+addr+","+no+","+id+","+pwd+")");pw.println("YOUR DETAILS ARE

ENTERED<br><br>");pw.println("<a href=\"/tr/login.html\">press LOGIN to

login</a>");}pw.println("</body></html>");

}catch(Exception e){

resp.sendError(500,e.toString());}

}}

Catlog.javaimport java.sql.*;import java.io.*;import java.util.*;

87

Page 88: Web Technology Mtech Cse Lab

import javax.servlet.*;import javax.servlet.http.*;public class login extends HttpServlet{

public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{

PrintWriter pw=resp.getWriter();pw.println("<html><body bgcolor=\"pink\");String title=req.getParameter("title");try{

Driver d=new oracle.jdbc.driver.OracleDriver();DriverManager.registerDriver(d);Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");Statement stmt=con.createStatement();String sqlstmt="select id,password from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;while(rs.next()){

pw.println(",div align=\"center\">");pw.println("TITLE :"+rs.getString(1)+"<br>");pw.println("AUTHOR :"+rs.getString(2)+"<br>");pw.println("VERSION :"+rs.getString(3)+"<br>");pw.println("PUBLISHER :"+rs.getString(4)+"<br>");pw.println("COST :"+rs.getString(5)+"<br>");pw.println("</div");flag=1;

}if(flag==0){

pw.println("SORRY INVALID TITLE TRY AGAIN <br><br>");

pw.println("<a href=\"/tr/catalog.html\">press HERE to RETRY</a>");

}pw.println("</body></html>");

}catch(Exception e){

resp.sendError(500,e.toString());}

}

88

Page 89: Web Technology Mtech Cse Lab

}

Profile.javaimport java.sql.*;import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class login extends HttpServlet{

public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{

PrintWriter pw=resp.getWriter();pw.println("<html><body bgcolor=\"pink\");String id=req.getParamenter("id");try{

Driver d=new oracle.jdbc.driver.OracleDriver();DriverManager.registerDriver(d);Connection

con=DriverManager.getConnection("jdbc:oracle:thin: @localhost:1521:orcl","scott","tiger");Statement stmt=con.createStatement();String sqlstmt="select * from login where id="+id+"";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0;pw.println("<br><br><br>");while(rs.next()){

pw.println("<div align=\"center\">");pw.println("NAME :"+rs.getString(1)+"<br>");pw.println("ADDRESS :"+rs.getString(2)+"<br>");pw.println("PHONE NO :"+rs.getString(3)+"<br>");pw.println("</div>");flag=1;

}if(flag==0){

pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");

pw.println("<a href=\"/tr/profile.html\">press HERE to RETRY</a>");

}pw.println("</body></html>");

}

89

Page 90: Web Technology Mtech Cse Lab

catch(Exception e){

resp.sendError(500,e.toString());}

}}

Order.javaimport java.sql.*;import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class login extends HttpServlet{

public void service(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{

PrintWriter pw=resp.getWriter();pw.println("<html><body bgcolor=\"pink\");String id=req.getParamenter("id");String pwd=req.getParameter("pwd");String title=req.getParameter("title");String count1=req.getParameter("no");String date=req.getParameter("date");String cno=req.getParameter("cno");int count=Integer.parseInt(count1);try{

Driver d=new oracle.jdbc.driver.OracleDriver();DriverManager.registerDriver(d);Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");Statement stmt=con.createStatement();String sqlstmt="select id,password from login";ResultSet rs=stmt.executeQuery(sqlstmt);int flag=0,amount,x;while(rs.next()){

if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2))){

flag=1;}

}

90

Page 91: Web Technology Mtech Cse Lab

if(flag==0){

pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");

pw.println("<a href=\\"/tr/order.html\\">press HERE to RETRY</a>");

}else{

Statement stmt2=con.createStatement();String s="select cost from book where

title="+title+"";ResultSet rs1=stmt2.executeQuery(s);int flag1=0;while(rs1.next()){

flag1=1;x=Integer.parseInt(rs1.getString(1));amount=count*x;pw.println("AMOUNT

:"+amount+"<br><br><br><br>");Statement stmt1=con.createStatement();stmt1.executeUpdate("insertintodetails values('"+id+",'"+title+"'+amount+'","'+cno+'")"');pw.println("YOUR ORDER has taken<br>");

}if(flag1==0){

pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");

pw.println("<a href=\\"/tr/order.html\\">press HERE to RETRY</a>");

}}pw.println("</body></html>");con.close();

}catch(Exception e){

resp.sendError(500,e.toString());}

}

91

Page 92: Web Technology Mtech Cse Lab

92

Page 93: Web Technology Mtech Cse Lab

93

Page 94: Web Technology Mtech Cse Lab

94

Page 95: Web Technology Mtech Cse Lab

6 . Redo the previous task using JSP by converting the static web pages write a program of assignments 2 into dynamic web pages. Create a database with user information and books information and books information. The books catalogue should be dynamically loaded from the database. Follow the MVC architecture while doing the website.

Main.html:<html><body bgcolor=”pink”><br><br><br><br><br><br><h1 align=”center”>>U>ONLINE BOOK STORAGE</u></h1><br><br><br><h2 align=”center”><PRE><b> Welcome to online book storage. Press LOGIN if you are having id Otherwise press REGISTRATION</b></PRE></h2><br><br><pre><div align=”center”><a href=”/tr/login.html”>LOGIN</a> href=”/tr/login.html”>REGISTRATION</a></div></pre> </body></html>

Login.html: <html>

<body bgcolor=”pink”><br><br><br> <form name="myform" method="post" action=/tr1/login.jsp"> <div align="center"><pre> LOGIN ID : <input type="passwors"

name="pwd"></pre><br><br> PASSWORD : <input type="password"

name="pwd"></pre><br><br> </div> <br><br> <div align="center"> <inputtype="submit"value="ok"

onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">

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

95

Page 96: Web Technology Mtech Cse Lab

Reg.html: <html> <body bgcolor="pink"><br><br> <form name="myform" method="post" action="/tr1/reg.jsp"> <div align="center"><pre> NAME :<input type="text" name="name"><br> ADDRESS :<input type="text" name="addr"><br> CONTACT NUMBER : <input type="text" name="phno"><br> LOGIN ID : <input type="text" name="id"><br> PASSWORD : <input type="password" name="pwd"></pre><br><br> </div> <br><br> <div align="center"> <inputtype="submit"value="ok"

onClick="validate()">()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">

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

Profile.html: <html> <body bgcolor="pink"><br><br> <form name="myform" method="post" action="/tr1/profile.jsp"> <div align="center"><pre> LOGIN ID : <input type="text" name="id"><br> </pre><br><br> </div> <br><br> <div align="center"> <inputtype="submit"value="ok"

onClick="validate()">()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">

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

Catalog.html:

96

Page 97: Web Technology Mtech Cse Lab

<html> <body bgcolor="pink"><br><br><br> <form method="post" action="/tr1/catalog.jsp"> <div align="center"><pre> BOOK TITLE : <input type="text" name="title"><br> </pre><br><br> </div> <br><br> <div align="center"> <inputtype="submit"value="ok"

name=”button1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<inputtype="reset" value="clear" name=”button2”> </form> </body> </html>

Order.html:<html> <body bgcolor="pink"><br><br><br> <form method="post" action="/tr1/order.jsp"> <div align="center"><pre> LOGIN ID :<input type="text" name="id"><br> PASSWORD : <input type="password" name="pwd"><br> TITLE :<input type="text" name="title"><br> NO. OF BOOKS : <input type="text" name="no"><br> DATE : <input type="text" name="date"><br> CREDIT CARD NUMBER : <input type="password" name="cno"><br> </pre><br><br> </div> <br><br> <div align="center"> <input type="submit" value="ok"

name=”button1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" name=”button2”>

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

Login.jsp: %@page import=”java.sql.*”% %@page import=”java.io.*”% <%

97

Page 98: Web Technology Mtech Cse Lab

out.println(“<html><body bgcolor=\”pink\”>”); String id=request.getParameter(“id”); String pwd=request.getParameter(“pwd”); Driver d=new oracle.jdbc.driver.OracleDriver(); DriverManager.registerDriver(d);

Connection con=DriverManager.getConnection(“jdbc:oracle:thin:@localhost:1521:orcl”,”scott”,”tiger”);

Statement stmt=con.createStatement(); String sqlstmt=”select id,password from login where id=”+id+” and password=”+pwd+””; ResultSet rs=stmt.executeQuery(sqlstmt); int flag=0; while(rs.next()) { flag=1; } if(flag==0) { out.println(“SORRY INVALID ID TRY AGAIN ID<br><br>”); out.println(“ <a href=\”/tr1/login.html\”>press LOGIN to RETRY</a>”); } else { out.println(“VALID LOGIN ID<br><br>”); out.println(“<h3><ul>”);

out.println(“<li><ahref=\”profile.html\”><fontcolor=\”black\”>USER PROFILE</font></a></li><br><br>”);

out.println(“<li><ahref=\”catalog.html\”><fontcolor=\”black\”>BOOKS CATALOG</font></a></li><br><br>”);

out.println(“<li><ahref=\”order.html\”><fontcolor=\”black\”>ORDER CONFIRMATION</font></a></li><br><br>”);

out.println(“</ul>”); } out.println(“<body></html>”); %> Reg.jsp: %@page import=”java.sql.*”%

98

Page 99: Web Technology Mtech Cse Lab

%@page import=”java.io.*”% <%

out.println(“<html><body bgcolor=\”pink\”>”); String name=request.getParameter(“name”); String addr=request.getParameter(“addr”); String phno=request.getParameter(“phno”); String id=request.getParameter(“id”); String pwd=request.getParameter(“pwd”); int no=Integer.parseInt(phno); Driver d=new oracle.jdbc.driver.OracleDriver(); DriverManager.registerDriver(d);

Connection con=DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scott”,”tiger”);

Statement stmt=con.createStatement(); String sqlstmt=”select id from login”; ResultSet rs=stmt.executeQuery(sqlstmt); int flag=0;

while(rs.next()){ if(id.equals(rs.getString(1))) { flag=1; }}if(flag==1) { out.println(“SORRY LOGIN ID ALREADY EXISTS TRY AGAIN WITH NEW ID <br><br>”); out.println(“<a href=\”/tr1/reg.html\”>press REGISTER to RETRY</a>”); }else{ Statement stmt1=con.createStatement (); stmt1.executeUpdate (“insert into login values (“+name+”,”+addr+”,”+no+”,”+id+”,”+pwd+”)”); out.println (“YOU DETAILS ARE ENTERED <br><br>”); out.println (“<a href =\”/tr1/login.html\”>press LOGIN to login</a>”); }out.println (“</body></html>”);%>

Profile.jsp:<%@page import=”java.sql.*”%> <%@page import=”java.io.*”%> <% out.println (“<html><body bgcolor=\”pink\”>”);

99

Page 100: Web Technology Mtech Cse Lab

String id=request.getParameter(“id”); Driver d=new oracle.jdbc.driver.OracleDriver(); DriverManager.regiserDriver(d);

Connection con=DriverManager.getConnection

(“jdbc:oracle:thin:@localhost:1521:orcl”,”scott”,”tiger”); Statement stmt=con.createStatement (); String sqlstmt=”select * from login where id=”+id+””; ResultSet rs=stmt.executeQuery (sqlstmt); int flag=0;

while(rs.next()) { out.println (“<div align=\”center\”>”); out.println (“NAME :”+rs.getString(1)+”<br>”); out.println (“ADDRESS :”+rs.getString(2)+”<br>”); out.println (“PHONE NO :”+rs.getString(3)+”<br>”); out.println (“</div>”); flag=1;}if(flag==0) { out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”); out.println(“<a href=\”/tr1/profile.html\”>press HERE to RETRY </a>”);}out.println (“</body></html>”);%>

100

Page 101: Web Technology Mtech Cse Lab

Catalog.jsp: <%@page import=”java.sql.*”%> <%@page import=”java.io.*”%> <% out.println (“<html><body bgcolor=\”pink\”>”); String title=request.getParameter (“title”); Driver d=new oracle.jdbc.driver.OracleDriver (); DriverManager.regiserDriver (d); Connection con=

DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scott”,”tiger”);

Statement stmt=con.createStatement (); String sqlstmt=”select * from book where title=”+title+””; ResultSet rs=stmt.executeQuery (sqlstmt); int flag=0;

while(rs.next()) { out.println (“<div align=\”center\”>”); out.println (“TITLE :”+rs.getString(1)+”<br>”); out.println (“AUTHOR :”+rs.getString(2)+”<br>”); out.println (“VERSION:”+rs.getString(3)+”<br>”); out.println (“PUBLISHER :” +rs.getString(4)+”<br>”); out.println (“COST :” +rs.getString(5)+”<br>”); out.println (“</div>”); flag=1;}if(flag==0) { out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”); out.println(“<a href=\”/tr1/catalog.html\”>press HERE to RETRY </a>”);}out.println (“</body></html>”);%>

101

Page 102: Web Technology Mtech Cse Lab

Order.jsp:<%@page import=”java.sql.*”%> <%@page import=”java.io.*”%> <% out.println (“<html><body bgcolor=\”pink\”>”); String id=request.getParameter (“id”); String pwd=request.getParameter (“pwd”); String title=request.getParameter (“title”); String count1=request.getParameter (“no”); String date=request.getParameter (“date”); String cno=request.getParameter (“cno”); int count=Integer.parseInt(count1); Driver d=new oracle.jdbc.driver.OracleDriver (); DriverManager.regiserDriver (d); Connection con=

DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scott”,”tiger”);

Statement stmt=con.createStatement (); String sqlstmt=”select id, password from login”; ResultSet rs=stmt.executeQuery (sqlstmt); int flag=0,amount,x;

while(rs.next()) { if(id.equals(rs.getString(1))&& pwd.equals(rs.getString(2))) { flag=1; } }if(flag==0){ out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”); out.println(“<a href=\”/tr1/order.html\”>press HERE to RETRY </a>”);} else{ Statement stmt2=con.createStatement(); String s=”select cost from book where title=”+title+””; ResultSet rs1=stmt2.executeQuery(s); int flag1=0; while(rs1.next()) { flag1=1; x=Integer.parseInt(rs1.getString(1)); amount=count*x;

102

Page 103: Web Technology Mtech Cse Lab

out.println(“AMOUNT :”+amount+”<br><br><br><br>”); Statement stmt1=con.createStatement (); stmt1.executeUpdate (“insert into details (“+id+”,”+title+”,”+amount+”,”+date+”,”+cno+”)”); out.println (“YOU ORDER HAS TAKEN<br>”);}if(flag1==0){ out.println(“SORRY INVALID BOOK TRY AGAIN <br><br>”); out.println(“<a href=\”/tr1/order.html\”>press HERE to RETRY </a>”); }} out.println (“</body></html>”);%>

103

Page 104: Web Technology Mtech Cse Lab

Out-put:

104

Page 105: Web Technology Mtech Cse Lab

105

Page 106: Web Technology Mtech Cse Lab

106