department of cse/it/mca - jits.ac.in tech.pdf · department of cse/it/mca manual ... c. create two...

JYOTHISMATHI INSTITUTE OF TECHNOLOGY & SCIENCE

Department Of CSE/IT/MCA

MANUAL

WEB TECHNOLOGIES LAB

B.Tech CSE & IT

JYOTHISHMATHI INSTITUTE OF TECHNOLOGY & SCIENCE NUSTULAPUR, KARIMNAGAR

1


INDEX

SNO PROGRAM

PNO 1

2

3

4

Develop static pages (using Only HTML) of an online Book store. The pages should resemble www.amazon .com .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 conformation

Validate the registration, user login, user profile and payment by

credit card pages using JavaScript.

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

Bean Assignments a. Create a JavaBean which gives the exchange value of INR

(Indian rupees) into equivalent American/Canadian/Australian Dollar value.

b. Create a simple Bean with a label – which is the count of number of clicks. Then create a BeanInfo class such that only the “count” property is visible in the property window.

c. Create two Beans a) keypad. b) Display pad. After that integrate the two beans to make it work as calculator.

d. Create two Beans Traffic light (implemented as a label with only three background colors red, green ,yellow) and automobile (implemented as a textbox which states its state / movement). The state of the automobile should depend on the following light transition table. Light transition Automobile state Red -> yellow ready Yellow ->green move Green -> red stopped

2

3

22

29

32


40 Install TOMCAT web server. Convert the static web pages of

5

6

7

assignment 2 into dynamic web pages 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.

Redo the previous task using JSP by converting 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.

Implement the “Hello world!” program using JSP struts Framework.

3

41


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

resemble www.amazon .com .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 conformation

HOME PAGE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>home</title> </head> <body style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <span style="font-style: italic;"><br> </span> <h1 style="text-align: center;"><big><span style="color: rgb(255, 102, 0); font-family: Comic Sans MS; font-weight: bold; text- decoration: underline;">WELCOME TO THE SITE</span></big></h1> <div style="text-align: center;"><a href="signup.html"><big style="color: rgb(255, 153, 255);"><big><big><big>sign up</big></big></big></big></a><big style="color: rgb(255, 153, 255);"><big><big><big><a href="signup.html"><img alt="ar" src="navSaMenuOrangeArrow._V30062588_.gif" style="border: 0px solid ; width: 16px; height: 24px;"></a></big></big></big></big><br> <br> <div style="text-align: left;"> <table style="text-align: left; width: 987px; height: 88px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2"> <tbody align="center"> <tr style="color: rgb(255, 255, 51);"> <td style="vertical-align: top;"><a style="color: rgb(255, 0, 0);" href="books.html"><big><span style="font-weight: bold;">Books

4


Catalog</span></big></a><br> </td> </tr> <tr style="color: rgb(255, 255, 51);"> <td style="vertical-align: top;"><a style="color: rgb(255, 0, 0);" href="shop.html"><big><span style="font-weight: bold;">Shopping Carts</span></big></a><br> </td> </tr> <tr> <td style="vertical-align: top;"><a href="payments.html"><big style="color: rgb(255, 0, 0);"><span style="font-weight: bold;">Credit Card Payments</span></big></a><br> </td> </tr> </tbody> </table> <big style="color: rgb(255, 255, 204);"><span style="font-weight: bold;"><br> <br> </span></big></div> <br> <big><big><big><big><big style="color: rgb(255, 153, 255);"><big><big><big><a href="signup.html"><img alt="gl" src="giftcard-envelope-gno._V2976536_.jpg" style="border: 0px solid ; width: 176px; height: 152px;"></a></big></big></big></big></big></big></big></big><br> <br> </div> </body> </html>

Registration

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>newmember</title> </head> <body style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <big><span style="color: rgb(255, 102, 0);"></span></big> <h2 style="text-align: center; text-decoration: underline;"><big><span style="font-family: Comic Sans MS;"><span

5


style="color: rgb(255, 102, 0);">NEW MEBERS DETAILS</span></span></big></h2> <br> <div style="text-align: left;"><br> </div> <table style="text-align: left; margin-left: auto; margin-right: auto; color: rgb(204, 51, 204);" border="0"> <tbody> <tr> <td colspan="2"><b class="h1">New to Amazon.com? Register Below.</b></td> </tr> <tr> <td align="right"><b>My name is:</b></td> <td><input name="userName" size="30" maxlength="50" value=""></td> </tr> <tr> <td align="right"><b>My e-mail address:</b></td> <td><input name="email" size="30" maxlength="64" value="[email protected]" type="text"></td> </tr> <tr> <td align="right"><b>Type it again:</b></td> <td><input name="emailCheck" size="30" maxlength="64" value="" type="text"></td> </tr> <tr> <td align="right"><b>Birthday:</b></td> <td> <select name="month"> <option value="">Month</option> <option value="1"> January </option> <option value="2"> February </option> <option value="3"> March </option> <option value="4"> April </option> <option value="5"> May </option> <option value="6">

6


June </option> <option value="7"> July </option> <option value="8"> August </option> <option value="9"> September </option> <option value="10"> October </option> <option value="11"> November </option> <option value="12"> December </option> </select> <select name="day"> <option value="">Day</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</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>

7

<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> <b>(optional)</b> </td> </tr> <script type="text/javascript"></script> <tr> <td> <br> </td> <td align="left"> <br> <table> <tbody> <tr> <td style="color: rgb(204, 51, 204);"><input id="flex_corp_checkbox" name="corpAccount" type="checkbox"></td> <td style="color: rgb(204, 51, 204); font-weight: bold;">Interested in a corporate account? (<a style="color: rgb(51, 102, 102);" href="file:///H:/pjkts/Amazon_com%20Registration.htm#" id="corpLearnLink" name="corplearn|he|corpLearnMorePopDiv">Learn more</a>)</td> </tr>

8


</tbody> </table> </td> </tr> <tr> <td colspan="2"> <br> <br> <b class="h1">Protect your information with a password</b><br> This will be your only Amazon.com password. </td> </tr> <tr> <td align="right"><b>Enter a new password:</b></td> <td><input name="password" autocomplete="off" maxlength="20" type="password"></td> </tr> <tr> <td align="right"><b>Type it again:</b></td> <td><input name="passwordCheck" autocomplete="off" maxlength="20" type="password"></td> </tr> <tr> <td> </td> <td style="text-align: center;"><input alt="SM" src="file:///C:/Documents%20and%20Settings/abhi/Desktop/html/btn-submit- sm._V46884984_.gif" value="Continue" border="0" height="22" type="image" width="86"></td> </tr> </tbody> </table> <br> </body> </html>

USER-LOGIN:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>signup</title> </head> <body style="background-color: black;"> <span style="font-weight: bold;"><br> <br> </span>

9


<div style="text-align: center;"><small><span style="font-weight: bold;"><big><big><big><big><span style="font-weight: bold;"><small><small><small><small><small><small><small><font size="-1"><big><big><big><big><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;"><span style="font-family: Comic Sans MS;"><big><span

style="text-decoration: underline;">welcome to the site</span></big><br> </span></span></span></big></big></big></big></font></small></small></small></s mall></small></small></small></span></big></big></big></big></span></small> <div style="text-align: left;"><small> <br> </small> <div style="text-align: center;"> <h2><small><span style="font-weight: bold;"></span><span style="color: rgb(153, 51, 153);"> User ID: </span> </small><input style="color: rgb(0, 0, 0);" name="userName" size="30" maxlength="50" value=""><small><span style="font-weight: bold;"><big><big><big><big><span style="font-weight: bold;"><small><small><small><small><small><small><small><font size="-1"><big><big><big><big><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;"><span style="font-family: Comic Sans MS;"></span></span></span></big></big></big></big></font></small></small></sma ll></small></small></small></small></span></big></big></big></big></span></small ></h2> </div> </div> <span style="font-weight: bold;"></span></div> <div style="text-align: center;"> <div style="text-align: center;"> <h2><small><span style="font-weight: bold;"></span><span style="color: rgb(153, 51, 153);">Password:</span> </small><input name="pwd" size="30" maxlength="12" type="password"><small><span style="font-weight: bold;"><big><big><big><big><span style="font-weight: bold;"><small><small><small><small><small><small><small><font size="-1"><big><big><big><big><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;"><span style="font-family: Comic Sans MS;"></span></span></span></big></big></big></big></font></small></small></sma

ll></small></small></small></small></span></big></big></big></big></span></small ></h2> </div> <img style="width: 78px; height: 26px;" alt="submit"

10


src="btn-submit-sm._V46884984_.gif"> <a href="newmember.html"><span style="color: rgb(0, 204, 204); text-decoration: underline;"><big><span style="font-family: Book Antiqua; font-weight: bold;">NEW USER</span></big> </span><img style="width: 15px; height: 14px; color: rgb(0, 204, 204); text-decoration: underline;" alt="ar" src="navSaMenuOrangeArrow._V30062588_.gif"><br> </a></div> <div style="text-align: center;"><br> <br> <a href="home.html"><img alt="hm" src="51ZLs54qfjL._SL110_.jpg" style="border: 0px solid ; width: 209px; height: 149px;"></a><br> <br> <span style="color: rgb(102, 102, 204);"> <a href="home.html"><big style="color: rgb(255, 255, 204);"><span style="text-decoration: underline; font-weight: bold;">Home</span></big></a></span></div> </body> </html>

BOOKS-CATALOG:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>books</title> </head> <body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <div style="text-align: center; background-color: rgb(0, 0, 0);"><big style="text-decoration: underline; font-family: Comic Sans MS; color: rgb(255, 102, 0);"><big><big><span style="font-weight: bold;">BOOKS CATALOG</span></big></big></big><big style="font-family: Comic Sans MS; color: rgb(255, 102, 0);"><big><big><small><small><small><br> <br> </small></small></small></big></big></big><big style="font-family: Comic Sans MS; color: rgb(255, 102, 0);"><big><big><small><small></small></small></big></big></big> <div style="text-align: left;"> <table

11


style="text-align: left; width: 656px; margin-left: auto; margin-right: auto; height: 118px;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top;"> <div style="text-align: center;"><a href="home.html"><img alt="home" src="home.jpg" style="border: 0px solid ; width: 110px; height: 86px;"></a><br> </div> <div style="text-align: center;"><a href="home.html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Home</span></a><br> </div> </td> <td style="vertical-align: top; text-align: left;"> <div style="text-align: center;"><a href="shop.html"><img style="width: 123px; height: 82px;" alt="shop" src="shop.jpg"><br> </a></div> <div style="text-align: center;"><a href="shop.html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Shop Carts</span></a><br> </div> </td> <td style="vertical-align: top; text-align: center;"><a href="payments.html"><img style="width: 127px; height: 80px;" alt="cr" src="credit.gif"><br> <span style="font-weight: bold; color: rgb(255, 0, 0);">Payments</span></a><br> </td> </tr> </tbody> </table> </div> <div style="margin-left: 800px;"> <div style="margin-left: 40px;"><span style="font-family: Comic Sans MS;"></span></div> </div> <span style="font-family: Comic Sans MS;"></span> <div style="text-align: left;"></div> <table style="text-align: left; width: 626px; height: 293px; margin-left: auto; margin-right: auto; color: rgb(153, 255, 153);" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top; text-align: left;"> <img style="width: 126px; height: 115px;" alt="b1" src="b1.jpg"><br> <br>

12


<div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK1</span></big><br> </div> </td> <td style="vertical-align: top;"> <img style="width: 84px; height: 94px;" alt="b2" src="b2.jpg"><br> <div style="margin-left: 40px;"><br> <big><span style="font-weight: bold;"> <br> BOOK2</span></big><br> </div> </td> <td style="vertical-align: top;"> <div style="text-align: left;"> <img style="width: 115px; height: 115px;" alt="b3" src="b3.jpg"><br> </div> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;"> BOOK3</span></big></div> </td> </tr> <tr> <td style="vertical-align: top;"> <img style="width: 115px; height: 115px;" alt="b4" src="b4.jpg"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK4</span></big></div> </td> <td style="vertical-align: top;"> <img style="width: 115px; height: 115px;" alt="b5" src="b5.jpg"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK5</span></big></div> </td> <td style="vertical-align: top;"> <img style="width: 115px; height: 115px;" alt="b6" src="b6.jpg"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK6</span></big></div> </td> </tr> <tr> <td style="vertical-align: top;"> <img style="width: 114px; height: 115px;" alt="b7" src="b7.jpg"><br> <br> <div style="margin-left: 40px;"><big><span

13


style="font-weight: bold;">BOOK7</span></big></div> </td> <td style="vertical-align: top;"> <img style="width: 115px; height: 115px;" alt="b7" src="b8.jpg"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK8</span></big></div> </td> <td style="vertical-align: top;"> <img style="width: 115px; height: 115px;" alt="b8" src="b9.jpg"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">BOOK9</span></big></div> </td> </tr> </tbody> </table> <span style="font-family: Comic Sans MS;"><br> <span style="text-decoration: underline;"><span style="font-weight: bold;"></span></span></span></div> </body> </html>

SHOPPING-CART:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>shop</title> </head> <body style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <div style="text-align: center; text-decoration: underline;"><big><big><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;"><big><big><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;"><span style="font-family: Comic Sans MS;">SHOP CARTS<small><small><small><br> </small></small></small></span></span></span></big></big></span></span></big></ big> <div style="text-align: left;"> <table style="text-align: left; width: 656px; margin-left: auto; margin-right: auto; height: 118px;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr>

14


<td style="vertical-align: top;"> <div style="text-align: center;"><a href="home.html"><img alt="home" src="home.jpg" style="border: 0px solid ; width: 110px; height: 86px;"></a><br> </div> <div style="text-align: center;"><a href="home.html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Home</span></a><br> </div> </td> <td style="vertical-align: top; text-align: left;"> <div style="text-align: center;"><a

href="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/shop. html"><img style="width: 123px; height: 82px;" alt="shop" src="shop.jpg"><br> </a></div> <div style="text-align: center;"><a

href="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/shop.

html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Shop Carts</span></a><br> </div> </td> <td style="vertical-align: top; text-align: center;"><a href="payments.html"><img style="width: 127px; height: 80px;" alt="cr" src="credit.gif"><br> <span style="font-weight: bold; color: rgb(255, 0, 0);">Payments</span></a> <br> </td> </tr> </tbody> </table> </div> <br> <br> <table style="text-align: left; width: 626px; height: 293px; margin-left: auto; margin-right: auto; color: rgb(153, 255, 153);" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top; text-align: left;"> <img style="width: 126px; height: 115px;" alt="b1"

src="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/b1.jpg

"><br>

15


<br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">    BOOK1<span style="color: rgb(255, 204, 255);"><br> Price:$ 8.35<br> </span></span></big></div> <div style="text-align: center;"> <div style="text-align: left; margin-left: 40px;"><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);"><span style="color: rgb(204, 204, 204);">    <a href="payments.html"> BUY</a></span></span></span></big><br> </div> </div> <div style="margin-left: 40px;"> <div style="text-align: center;"><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);"></span></span></big></div> </div> </td> <td style="vertical-align: top;">         <img style="width: 84px; height: 94px;" alt="b2"


"><br> <div style="margin-left: 40px;"><br> <big><span style="font-weight: bold;"> <br>     BOOK2<br> </span></big><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);">Price:$ 13.56<br> <span style="color: rgb(204, 204, 204);">   <a href="payments.html"> BUY</a></span></span></span></big><br> </div> </td> <td style="vertical-align: top;">   <img style="width: 115px; height: 115px;" alt="b3"


"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">    BOOK3<br> </span></big><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);">Price:$ 12.05<br> <span style="color: rgb(204, 204, 204);">    <a href="payments.html">BUY</a></span></span></span></big><br>

16


</div> </td> </tr> <tr> <td style="vertical-align: top;">       <img style="width: 115px; height: 115px;" alt="b4"


"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">    BOOK4<br> </span></big><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);">Price:$ 6.60<br> <span style="color: rgb(204, 204, 204);">    <a href="payments.html">BUY</a></span></span></span></big><br> </div> </td> <td style="vertical-align: top;">    <img style="width: 115px; height: 115px;" alt="b5"




"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">    BOOK6<br> </span></big><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);">Price:$ 3.25<br> <span style="color: rgb(204, 204, 204);">    <a href="payments.html">BUY</a></span></span></span></big><br> </div> </td>

17


</tr> <tr> <td style="vertical-align: top;">       <img style="width: 114px; height: 115px;" alt="b7"






"><br> <br> <div style="margin-left: 40px;"><big><span style="font-weight: bold;">    BOOK9<br> </span></big><big><span style="font-weight: bold;"><span style="color: rgb(255, 204, 255);">Price:$ 8.45<br> <span style="color: rgb(204, 204, 204);">    <a href="payments.html">BUY</a></span></span></span></big><br> </div> </td> </tr> </tbody>

18


</table> <br> </div> </body> </html>

PAYMENT BY CREDIT CARD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"> <title>payments</title> </head> <body style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <div style="text-align: center;"><big><big style="text-decoration: underline;"><big><big><span style="font-family: Comic Sans MS;"><span style="color: rgb(255, 102, 0);"><span style="font-weight: bold;">Credit card payments</span></span></span></big></big></big><big><big><big><span style="font-family: Comic Sans MS;"><span style="color: rgb(255, 102, 0);"><small><small><small><br> </small></small></small></span></span></big></big></big></big> <div style="text-align: left;"> <table style="text-align: left; width: 656px; margin-left: auto; margin-right: auto; height: 118px;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="vertical-align: top;"> <div style="text-align: center;"><a

href="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/hom e.html"><img alt="home"

src="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/home.

jpg" style="border: 0px solid ; width: 110px; height: 86px;"></a><br> </div> <div style="text-align: center;"><a

19


href="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/hom e.html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Home</span></a><br> </div> </td> <td style="vertical-align: top; text-align: left;"> <div style="text-align: center;"><a


html"><img style="width: 123px; height: 82px;" alt="shop"

src="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/shop.j

pg"><br> </a></div> <div style="text-align: center;"><a


html"><span style="color: rgb(255, 0, 0); font-weight: bold;">Shop Carts</span></a><br> </div> </td> <td style="vertical-align: top; text-align: center;"><img style="width: 127px; height: 80px;" alt="cr"

src="file:///C:/Documents%20and%20Settings/VIJAY%20KUMAR/Desktop/html/credit.

gif"><br> <span style="font-weight: bold; color: rgb(255, 0, 0);">Payments</span><br> </td> </tr> </tbody> </table> </div> <br> <table style="text-align: left; margin-left: auto; margin-right: auto; color: rgb(204, 51, 204);" border="0"> <tbody> <tr> <td colspan="2"><b class="h1">New to Amazon.com? payments Below<br> </b></td> </tr> <tr> <td align="right"><b>Name is:</b></td> <td><input name="userName" size="30" maxlength="50" value=""></td>

20


</tr> <tr> <td align="right"><b>e-mail address:</b></td> <td><input name="email" size="30" maxlength="64" value="[email protected]" type="text"></td> </tr> <tr> <td align="right"><b>Type it again:</b></td> <td><input name="emailCheck" size="30" maxlength="64" value="" type="text"></td> </tr> <tr> <td align="right"><b>Birthday:</b></td> <td> <select name="month"> <option value="">Month</option> <option value="1">January </option> <option value="2">February </option> <option value="3">March </option> <option value="4">April </option> <option value="5">May </option> <option value="6">June </option> <option value="7">July </option> <option value="8">August </option> <option value="9">September </option> <option value="10">October </option> <option value="11">November </option> <option value="12">December </option> </select> <select name="day"> <option value="">Day</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</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>

21

<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> <b>(optional)</b> </td> </tr> <script type="text/javascript"></script> <tr> <td style="vertical-align: top; text-align: right; font-weight: bold;">Book Name<br> </td> <td style="vertical-align: top;"><input name="emailCheck" size="30" maxlength="64" value="" type="text"></td>

22


</tr> <tr> <td style="text-align: right;"><span style="font-weight: bold;">Credit card no:</span><br> </td> <td style="vertical-align: top;"><input name="emailCheck" size="30" maxlength="64" value="" type="text"></td> </tr> <tr> <td align="right"><b>Enter password:</b></td> <td><input name="password" autocomplete="off" maxlength="20" type="password"></td> </tr> <tr> <td align="right"><b>Re-TypePassword:</b></td> <td><input name="passwordCheck" autocomplete="off" maxlength="20" type="password"></td> </tr> <tr> <td> </td> <td style="text-align: center;"><input alt="SM" src="btn-submit-sm._V46884984_.gif" value="Continue" border="0" height="22" type="image" width="86"></td> </tr> </tbody> </table> <br> </div> </body> </html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Registration Form </TITLE> <SCRIPT langauge ="JAVASCRIPT" > function VALIDATE() {

var FNAME1=register.FNAME.value; var LNAME1=register.LNAME.value; // var UNAME1=register.UNAME.value;

23


// var PSWD1=register.PSWD.value; var EMAIL1=register.EMAIL.value; var CITY1=register.CITY.value; var ADDRESS1=register.ADDRESS.value; var PHONE1=register.PHONE.value; var CCNO1 =register.CCNO.value;

if( (FNAME1=="") || (LNAME1 =="") || (EMAIL1=="") ||

(CITY1=="") || (ADDRESS1=="") || (PHONE1=="") || (CCNO1=="" )) { alert(" Sorry ! \n You have to enter information into all fields");

return false; }

if(!isNaN(FNAME1)) { alert("name should contain alphabets");

register.FNAME.select(); return false;

}

if(!isNaN(FNAME1.charAt(0))) {

alert(" User name should not start with a Digit"); register.FNAME.select();

return false; }

if(!isNaN(LNAME1)) { alert("name should contain alphabets");

return false; }

if(!isNaN(LNAME1.charAt(0)))

{ alert(" User name should not start with a Digit");

register.LNAME.select();

return false; }

/* if(!isNaN(UNAME1.charAt(0))) {

alert(" User name should not start with a Digit");

24


register.UNAME.select(); return false; }

if(PSWD1.length<6) { alert (" Enter password with minnimum 6 characters");

register.PSWD.select(); return false; }*/

if(!CheckEmail()) {

return false; }

if(!isNaN(CITY1.charAt(0))) {

alert(" CITY name should not start with a Digit"); register.CITY.select();

return false; }

if(isNaN(PHONE1)) {

alert(" PHONE NO should have Digits Only"); register.PHONE.select();

return false; } if(PHONE1.length<10) { alert(" PHONEname should have minimum 10 Digits");

register.PHONE.select(); return false; }

if(!isValidCredit()) {

register.CCNO.select(); return false; }

if(!isValidDate()) {

register.EDATE.select(); return false; }

// showValues(); return true;

}

25


/* code for date checking*/ function isValidDate() { var a=register.EDATE.value; //alert("length"+a.length);

if(a.length!=10) {

alert(" not a valid date\n enter asmm/dd/yyyy fromat"); return false; }

a1=a.substr(2,1);

a2=a.substr(5,1); //alert(a2);

if((a1!="/") &&(a2!="/")) {

alert(" not a valid date\nnot a valid date\n enter as\n mm/dd/yyyy fromat");

return false; }

var mm=a.substr(0,2); var dd=a.substr(3,2); var yy =a.substr(6,4);

// alert(mm+dd+yy); mm1=isNaN(mm); dd1=isNaN(dd); yy1=isNaN(yy);

if((mm1==true)||(dd1==true)||(yy==true)) {

return false; } if((dd>31)||(dd<1))

{ return false;

} if((mm>12)||(mm<1)) return false;

if((yy<2007)||(yy>2020)) {

alert( "enter a valid expiry date between2007 - 2020"); return false;

}

return true;

26


} /* code for credit card checking */

function isValidCredit()

{ var a=register.CCNO.value;

if(a=="")

{ alert("EMPTY"); return false; }

if(a.charAt(0)=="0") {

alert(" should not start with 0"); return false;

}

len=a.length; if(len!=19) {

alert("you entered an invalid number \n enter a number with four digits \n seperated by one space");

return false; }

if(!((a.substr(4,1)==" ")&&(a.substr(9,1)==" ")&&(a.substr(14,1)==" "))) { return false;

} a1=a.substr(0,4); a2=a.substr(5,4); a3=a.substr(10,4); a4=a.substr(15,4); if(!(!isNaN(a1))&&(!isNaN(a2))&&(!isNaN(a3))&&(!isNaN(a4))) {

alert(" NOT A VALID NUMBER"); return false;

}

//alert("you entered a valid number");

return true;

}

27


/* code for email checking */

function CheckEmail() { var EMAIL1=register.EMAIL.value;

if(!isValidEmail(EMAIL1)) {

alert(" You have entered an \n invalid Email Address"); register.EMAIL.focus(); register.EMAIL.select(); return false;

} // alert(" You entered a valid email id");

return true; }

function isValidEmail(EMAIL1)

{ if((EMAIL1=="")||(hasInvalidChar(EMAIL1))) {

alert(" you entereed\n invalid charccte"); return false;

}

var Pos=EMAIL1.indexOf("@",1); if(Pos==-1) return false;

if(EMAIL1.indexOf("@",Pos+1)>-1) return false;

var dotpos= EMAIL1.indexOf(".",Pos+1);

if(dotpos==-1) return false;

var lastDot=EMAIL1.indexOf("."); // alert("LASTDOT INDEX"+lastDot); if( lastDot+4!=EMAIL1.length) { alert(" you should have 3 characters after .");

return false; } return true;

} function hasInvalidChar(EMAIL1)

28


{ var invalidChars= "/;:,'";

for(var k=0;k<invalidChars.length;k++) { var ch=invalidChars.charAt(k);

if(EMAIL1.indexOf(ch)>-1) return true;

}

return false;

} /* code over for email checking*/

/* function show()

{ var a =document.register.elements;

var b=document.disp; var c=a.FNAME.value;

b.writeln(c);

}

*/

</SCRIPT>

</HEAD>

<BODY BGCOLOR=#CCFFFF>

<form name="register" action="WELCOME1.htm" method="post" onSubmit=" return VALIDATE()"> <h3> <font color =#660066 ><CENTER> REGISTRATION FORM</CENTER> </font></h3>

<pre> <CENTER> <FONT COLOR=#6600FF SIZE ="+2"> <B> First Name <INPUT TYPE="TEXT" NAME="FNAME" VALUE="" >

Last Name <INPUT TYPE="TEXT" NAME="LNAME" VALUE="" >

EMail Id <INPUT TYPE="TEXT" NAME="EMAIL" VALUE="" >

City <INPUT TYPE="TEXT" NAME="CITY" VALUE="" >

29

Address <INPUT TYPE="TEXT" NAME="ADDRESS" VALUE="" >

Phone No <INPUT TYPE="TEXT" NAME="PHONE" VALUE="" >

Credit Card No <INPUT TYPE="TEXT" NAME="CCNO" VALUE="" >

Expiry Date <INPUT TYPE="TEXT" NAME="EDATE" VALUE="">

<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"> <INPUT

TYPE="RESET" NAME="RESET" VALUE="CLEAR"> 

</CENTER>

</FONT> </pre>

</form>

</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 an input and returns user details by taking user information from the XML document.

/* XML Document which stores info */

<?xml version="1.0" ?> <document> <users> <user> <userid>abc</userid> <password>abc</password> <first_name>raj</first_name> <last_name>kumar</last_name> <dob>10/1/1982</dob> </user> <user> <userid>ravi</userid> <password>ravi</password> <first_name>ravi</first_name> <last_name>kumar</last_name> <dob>11/11/1982</dob> </user> <user>

30


<userid>sri</userid> <password>sri</password> <first_name>sri</first_name> <last_name>ram</last_name> <dob>12/12/1983</dob> </user> <user> <userid>lax</userid> <password>lax</password> <first_name>laxman</first_name> <last_name>kumar</last_name> <dob>1/1/1980</dob> </user> <user> <userid>chandu</userid> <password>chandu</password> <first_name>chandana</first_name> <last_name>priya</last_name> <dob>9/11/1998</dob> </user> <user> <userid>vysu</userid> <password>vysu</password> <first_name>vyshnavi</first_name> <last_name>matha</last_name> <dob>17/6/1982</dob> </user> <user> <userid>prem</userid> <password>prem</password> <first_name>prem</first_name> <last_name>kumar</last_name> <dob>11/11/1988</dob> </user> <user> <userid>geeta</userid> <password>geeta</password> <first_name>geeta</first_name> <last_name>anjali</last_name> <dob>13/1/1972</dob> </user> <user> <userid>preeti</userid> <password>preeti</password> <first_name>prethi</first_name> <last_name>priya</last_name>

31


<dob>7/11/1968</dob> </user> <user> <userid>praveen</userid> <password>praveen</password> <first_name>kumar</first_name> <last_name>kumar</last_name> <dob>11/11/1999</dob> </user> </users> </document>

/*html program which uses xml document For searching */ <html> <head> <title>authorization page</title> <script language="JavaScript" Run At=server>

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.load("info.xml"); function search() { var id=document.myform.id.value; var pword=document.myform.pword.value; var qry=xmlDoc.selectNodes("document/users/user[userid='"+id+"']"); if(qry.length!=0) { if(pword!=qry.item(0).childNodes.item(1).text) //document.body.innerHTML="Password incorrect"; document.write("success"); } else

document.body.innerHTML="No matching data found. userid incorrect";

} </script> </head> <body> <pre> <center> <form name="myform" method=post action="result.html"> User id:<input type=text name=id><br> password :<input type=password name=pword><br>

32


<input type=submit value=Go onClick="search()"> </form> </center> </pre> </body> </html>

4. Bean Assignments

4.1 Create a JavaBean which gives the exchange value of INR (Indian rupees) into equivalent American/Canadian/Australian Dollar value.

4.2 Create a simple Bean with a label – which is the count of number of clicks. Then create a BeanInfo class such that only the “count” property is visible in the property window.

4.3 Create two Beans a) keypad. b) Display pad. After that integrate the two beans to

make it work as calculator.

4.4 Create two Beans Traffic light (implemented as a label with only three background colors red, green ,yellow) and automobile (implemented as a textbox which states its state / movement). The state of the automobile should depend on the following light transition table.

Light transition Automobile state Red -> yellow ready Yellow ->green move Green -> red stopped

Code :

import java.awt.*;

import java.awt.event.*; import java.io.Serializable;

public class Colors extends Canvas implements Serializable

{ transient private Color color; private boolean rectangular; public Colors() { addMouseListener(new MouseAdapter() { public void mousePressed(MouseEvent me) {

33


change(); } });

rectangular=false;

setSize(200,100); change(); } 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); } } }

34


import java.awt.*; import java.applet.*; import java.awt.event.*; public class traffic extends Applet implements Runnable { Thread t; Font f,f1; int i=0,a=0,j=0; public void init(){

setBackground(Color.lightGray);

f=new Font("TimesNewRoman",f.ITALIC,28);

f1=new Font("TimesNewRoman",Font.ITALIC+Font.BOLD,28);

}

public void start() { t=new Thread(this); t.start(); }

public void run() {

for(i=25;i>=0;i--)//countdown

{

try

{ Thread.sleep(1000); } catch(Exception e) { System.out.println(e); } if(i<=25 && i>3)//red {

a=1; repaint();

} else

35


if(i<=3 && i>0)//yelloe {

a=2; repaint();

} else if(i==0)//green {

for(j=0;j<25;j++) {

a=3; try {

Thread.sleep(1000); } catch(Exception e) {

System.out.println(e); }

repaint();

}

if(j==25)//end of green(return to red)

{ run();

}

}

}

repaint(); }

public void paint(Graphics g) { setBackground(Color.lightGray);//ROAD

36


g.setColor(Color.black);//pole top g.fillArc(100,150,100,100,0,180); g.drawArc(100,150,100,100,0,180);

g.setColor(Color.black);//POLE UP

g.fillRect(150,150,50,150); g.drawRect(150,150,50,150);

g.setColor(Color.black);//POLE DOWN g.fillRect(165,300,20,155); g.drawRect(165,300,20,155);

g.drawOval(150,150,50,50);//RED

g.drawOval(150,200,50,50);//YELLOW

g.drawOval(150,250,50,50);//GREEN

g.setColor(Color.red);//COUNTDOWN STOP

g.setFont(f); g.drawString(""+i,50,50);

g.setColor(Color.white);//CROSSING1


g.setColor(Color.white); g.fillRect(300,145,15,135); g.drawRect(300,145,15,135);

g.setColor(Color.white);


g.setColor(Color.white);//CROSSING2

g.fillRect(450,5,15,125);

37


g.drawRect(450,5,15,125);

g.setColor(Color.white); g.fillRect(450,145,15,135); g.drawRect(450,145,15,135);

g.setColor(Color.white);


g.setColor(Color.black);//TREE1DOWN


g.setColor(Color.green);//TREE1UP

g.fillArc(560,290,100,100,0,180); g.drawArc(560,290,100,100,0,180);

g.setColor(Color.black);//TREE2DOWN


g.setColor(Color.green);//TREE2UP

g.fillArc(420,290,100,100,0,180); g.drawArc(420,290,100,100,0,180);

if(a==1)//REDSIGNAL {

g.setColor(Color.red); g.fillOval(150,150,50,50); g.drawOval(150,150,50,50); g.drawString("STOP",50,150);

} if(a==2)//YELLOWSIGNAL

38

{

}


g.setColor(Color.yellow); g.fillOval(150,200,50,50); g.drawOval(150,200,50,50); g.drawString("READY",50,200);

if(a==3)//GREENSIGNAL {

g.setColor(Color.blue);//countdown g.setFont(f);

g.drawString(""+j,150,50);

g.setColor(Color.green);

g.fillOval(150,250,50,50); g.drawOval(150,250,50,50); g.drawString("GO",50,250);

}

int x1[]={220,300,300,280};

int y1[]={250,150,250,150}; int n1=4; int n2=3; int x2[]={340,380,380}; int y2[]={150,100,150};

int x3[]={460,460,500};

int y3[]={150,100,150};

g.setColor(Color.black);

g.fillPolygon(x1,y1,n1); g.drawPolygon(x1,y1,n1);

g.setColor(Color.yellow);


39


g.setColor(Color.yellow); g.fillPolygon(x2,y2,n2);

g.drawPolygon(x2,y2,n2);

g.setColor(Color.yellow);

g.fillPolygon(x3,y3,n2); g.drawPolygon(x3,y3,n2);

g.setColor(Color.black); g.fillOval(440,210,60,60);

g.drawOval(440,210,60,60);

g.setColor(Color.black); g.fillOval(340,210,60,60);

g.drawOval(340,210,60,60);

g.setColor(Color.red);


g.setColor(Color.black);

g.setFont(f1); g.drawString ("Zumbo",380,200);

} }

40

6. Redo the previous task using JSP by converting 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.

//WEBCLIENT using HTML

<HTML>

<BODY BGCOLOR=#CCFFFF>

<form name="register" action="processregister.jsp" method="post" > <h3> <font color =#660066 ><CENTER> REGISTRATION FORM</CENTER> </font></h3>

<pre> <CENTER> <FONT COLOR=#6600FF SIZE ="+2"> <B> First Name <INPUT TYPE="TEXT" NAME="FNAME" VALUE="" >

Last Name <INPUT TYPE="TEXT" NAME="LNAME" VALUE="" >

EMail Id <INPUT TYPE="TEXT" NAME="EMAIL" VALUE="" >

City <INPUT TYPE="TEXT" NAME="CITY" VALUE="" >

Address <INPUT TYPE="TEXT" NAME="ADDRESS" VALUE="" >

Phone No <INPUT TYPE="TEXT" NAME="PHONE" VALUE="" >

<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT"> <INPUT TYPE="RESET" NAME="RESET" VALUE="CLEAR">



</CENTER>

</FONT> </pre>

</form>

</BODY> </HTML>

/* JSP PROGRAM WHICH HANDLES THE REGISTRATION FORM

THIS PROGRAM RESIDES IN THE WEB SERVER*/

<html> <head><title>Password Changed</title>

41


</head> <body> <%@ page language=”Java” %> <%@ page import=”java .sql .* “%>

<%PreparedStatement ps; Connection con; String m1=null; Class.forName(“sun.jdbc.odbc.JdbcOdbcDriver”); Con=DriverManager.GetConnection (“Jdbc: Odbc: pw”, “ “, “ “); String firstName=request.getParameter (“fname”); String lastName=request.getParameter (“lname”); String emailid=request.getParameter (“email”);

String city=request.getParameter (“city”); String address=request.getParameter (“address”); String pno=request.getParameter (“phone”);

out.Println (“<body bgcolor=bisque text=black>”);

Ps=con.prepareStatement (“update user set pword=’ “+pword1+” ‘where u_id=? And pword=?”); Ps.setString (1, id); Ps.setString (2, psword); Ps.executeUpdate (); out.println (“Ur password has been changed”);

%> </body> </html>

7. Implement the “Hello world!” program using JSP struts Framework.

42