Download - Web Technologies- Final Manual
![Page 1: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/1.jpg)
WEB TECHNOLOGIES LAB MANUAL
IV-B.Tech.I-Semester (CSE)
(2011-2012)
PREPARED BY
Mr. M.Parameshwar M.Tech.
Asst. Professor
DEPARTMENT OF COMPUTER SCIENCE &ENGINEERING
Sri Venkateswara Engg College
1
![Page 2: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/2.jpg)
Syllabus
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
2. Validate the Registration, user login, user profile and payment by credit card pages using JavaScript.
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 the user details by taking the user information from the XML document.
4. 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. Than create a BeanInfo class such that only the 'count' property is visible in the Property Window.
c. Create two Beans-a)KeyPad .b)DisplayPad .After that integrate the two Beans to make it work as a Calculator.
d. Create two Beans Traffic Light(Implemented as a Label with only three background colours-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
5. Install TOMCAT web server. Convert the static web pages of assignments 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.
6. Redo the previous task using JSP by converting the static web pages of assignments 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.
7. Implement the 'Hello World!' program using JSP Struts Framework
2
![Page 3: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/3.jpg)
Required Work
There will be homework assignments of about 20 programmatic/project scripts/memos, most
of which will involve programming. Assignments are due at the beginning of its theoretic class on
the date specified. Late assignments will receive 75% of full credit if they are handed in within one
week of the specified due date. After one week, no credit will be given or else losing of credits is
made in practice. There is no specific attendance policy for the course, although it is expected that
absences will leave the student unprepared for tests and assignments. Tests will not be rescheduled
except in extreme circumstances. However, the lowest quiz grade will be dropped. Grades will be
determined as follows:
Day – to- Day evaluation Marks 15 marks
Internal practical Examination 10 marks
Final Exam (University / External End Exam) 50 marks
At the minimum, traditional grading cutoffs will apply. That is, 90% is guaranteed an A, 87% is
guaranteed a B+, etc. Depending on class performance, some shifting of grades (in an upward
direction only) may occur as final letter grades are assigned.
3
![Page 4: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/4.jpg)
LIST OF CONCEPTS UNDER TAKEN IN THE WEB TECHNOLOGIES LAB
Sl. No.
Name of the Program / Project conceptRecord Code
Lab Code
Page No.
1 Develop static pages (using only HTML) of an online Book store. The pages should resemble.
WT-01 WT-01 28-39
2 Validate the Registration, user Login, User Profile and payment by credit card pages using JavaScript
WT-02 WT-02 49-59
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 the user details by taking the user information from XML document.
WT-03 WT-03 60-67
4 a) Create a JavaBean which gives the exchange value of INR(Indian Rupees) into equivalent American/Canadian/Australian Dollor value.
WT-04a WT-04a 73-86
4 b)Create a simple Bean with a label- which is the count of number of clicks. Then create a Bean Info class such that only “the “count” property is visible in the property window.
WT-04b WT-04b 77-78
4 c) Create two Beans – a) Key Pad b) Display Pad After that integrate the two Bean to make it work as a calculator.
WT-04c WT-04c 79-83
4 d) Create two Beans Traffic Light (implemented as a Label with only three background colours- 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.
WT-04d WT-04d 84-86
5 Install TOMCAT web server. Covert the static web pages of assignments 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.
WT-05 WT-05 97-101
4
![Page 5: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/5.jpg)
6 Redo previous task using JSP by converting the static webpages of assignments 2 into dynamic webpages. Create a database with user information and books information. The books catalogure be dynamically loaded from the database. Follow MVC architecture while doing the website.
WT-06 WT-06 103-111
10 Implement the “Hello World” program using JSP Struts Framework
WT-07 WT-07 112
5
![Page 6: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/6.jpg)
INTRODUCTION
Course Objectives :
The Web Technologies Lab for engineers is a 3 hour training lab course spread at about
42 hours. The Lab co-ordinates two sections of one is Introduction to HTML, Java Script,
Java Beans, Servlets, JSP and Struts and other is Programming of self- explanative simple
practical concepts include training and its programming also an extension to the university
prescribed work for the lab. In developing web applications concepts in Web Technologies by
using servlets and jsp whenever and wherever it is mandatory in corporate training way.
Course goals:
The specific goals of this course are:
To understand and be able to articulate the issues involved in designing, implementing
web Technologies supported programming languages like servlets, jsp, and JDBC.
To appreciate the strengths and tradeoffs between different C/S programming
paradigms, such as static or dynamic ones.
To develop a working knowledge of Web application programming provided by J2EE
and struts framework.
6
![Page 7: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/7.jpg)
Basic tags used in html
<html>
<body>
<h1>My first page</h1>
<h2>B.purushottam</h2>
<h3>4th CSE</h3>
<h4>SVEC</h4>
<h5>kandl</h5>
<h5>hyd</h5>
<p>myself doing phd <br>
u r very much
</p>
<hr>web techonology
</body>
</html>
Entities
<html><head><title>Firstpage</title></head><body><font face="arial" color="ff0000" size="+7"> my first page</font>a<bb>cIBM<sup>TM</sup>©®30°½</body></html>
7
![Page 8: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/8.jpg)
Creation of table:
<html>
<caption>example table</caption>
<table border="2" cellspacing="4" cellpadding="3">
<tr>
<th>1<sup>st</sub></th>
<th>2<sup>nd</sup></th>
<th>3<sup>rd</sup></th>
</tr>
<tr>
<td align="top">5</td>
<td align="center">6</td>
<td align="bottom">7</td>
</tr>
<tr>
<td align="center" colspan="2"><img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\sunset.jpg" width="20" height="20"></td>
<td>8</td>
</tr>
</table>
</html>
8
![Page 9: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/9.jpg)
Designing a Calculator using forms
<html><body><center><form name ="calc"><table border=4><tr><td><input type="text" name="input" size="16"><br></td></tr><tr><td><input type="button" name="one" value="1" OnClick="calc.input.value+='1'"><input type="button" name="two" value="2" OnClick="calc.input.value+='2'"><input type="button" name="three" value="3" OnClick="calc.input.value+='3'"><input type="button" name="plus" value="+" OnClick="calc.input.value+='+'"><br><input type="button" name="four" value="4" OnClick="calc.input.value+='4'"><input type="button" name="five" value="5" OnClick="calc.input.value+='5'"><input type="button" name="six" value="6" OnClick="calc.input.value+='6'"><input type="button" name="minus" value="-" OnClick="calc.input.value+='-'"><br><input type="button" name="seven" value="7" OnClick="calc.input.value+='7'"><input type="button" name="eight" value="8" OnClick="calc.input.value+='8'"><input type="button" name="nine" value="9" OnClick="calc.input.value+='9'"><input type="button" name="times" value="*" OnClick="calc.input.value+='*'"><br><input type="button" name="clear" value="c" OnClick="calc.input.value=''"><input type="button" name="zero" value="0" OnClick="calc.input.value+='0'"><input type="button" name="dolt" value="= " OnClick="calc.input.value=eval(calc.input.value)">
9
![Page 10: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/10.jpg)
<input type="button" name="div" value="/" OnClick="calc.input.value+='/'"><br></td></tr></table></form></center></body></html>
Display time & Date
<html>
<head>
<title>
The Date Object</title>
</head>
<body>
<pre>
<script language="javascript">
mydate=new Date()
document.write("Today's Date\t:\t");
10
![Page 11: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/11.jpg)
document.write(mydate.getDate()+"/"+mydate.getMonth()+"/"+mydate.getYear());
document.write("<br>");
document.write("systemtime\t:\t");
document.write(mydate.getHours()+":"+mydate.getMinutes()+":"+mydate.getSeconds());
</script>
</pre>
</body>
</html>
Displaying an image
<HTML>
<head>
<title>using SetTimeoutMethod</title>
<script language="javascript">
window.defaultStatus="workingwithtimeout";
function disp()
{
document.write("<br><br><br>");
document.write("<center>");
document.write('<img src="C:my documents\Sunset.jpg" width="100"height="100">');
document.write("</center>");
}
11
![Page 12: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/12.jpg)
function startbk()
{
setTimeout('disp()',3000);
}
</script>
</head>
<body>
<center>
<p>AN IMAGE WILL BE DISPLAYED IN 3 SECONDS AFTER YOU CLICK THIS BUTTON</P>
<br><br>
<input type="button"name="but1"value="startcountdown"onClick='startbk()'>
</center>
</body>
</html>
1)
12
![Page 13: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/13.jpg)
DESIGN A WEB PAGE FOR “A.P. TOURISM ".
Program:-
ap tourism.html:-
<Html>
<frameset rows="20%,80%">
<frame name="AP" src="ap.html"/>
<frameset cols="30%,70%">
<frame name="left" src="menu.html"/>
<frame name="right" src="main.html"/>
</frameset>
</html>
Ap.html:-
<Html>
<body>
<center>
<h1><strong>A.P.TOURISM</strong>
</center>
</body>
</html>
Hyderabad.html:-
<html>
<body bgcolor="yellow">
<center>
<h3>WELCOME TO HYDEARABAD</h3>
13
![Page 14: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/14.jpg)
<p>Capital City of A.P</p>
</center>
</body>
</html>
Main.html:-
<html>
<frameset cols="50%,50%" rows="50%,50%">
<frame name="hyd" src="wel.html"/>
<frame name="viz" src="wel.html"/>
<frame name="vjy" src="wel.html"/>
<frame name="tpt" src="wel.html"/>
</frameset> </html>
Menu.html:-
<html>
<body>
<h1><ul type="square">
<li><a href="hyderabad.html" target="hyd">Hyderabad</li>
<li><a href="vizag.html" target="viz">Vizag</li>
<li><a href="vijayawada.html" target="vjy">Vijayawada</li>
<li><a href="tirupathi.html" target="tpt">Tirupathi</li>
</ul>
</h1>
</body>
</html>
14
![Page 15: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/15.jpg)
Tirupathi.html:-
<html>
<body bgcolor="VIOLET">
<center>
<h3>WELCOME TO TIRUPATHI</h3>
<p>venkateswara temple</p>
</center>
</body>
</html>
Vijayawada.html:-
<html>
<body bgcolor="pink">
<center>
<h3>WELCOME TO VIJAYAWADA</h3>
<p>educational city</p>
</center>
</body>
</html>
Vizag.html:-
<html>
<body bgcolor="green">
<center>
<h3>WELCOME TO VIZAG</h3>
15
![Page 16: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/16.jpg)
<p>steel plant</p>
</center>
</body>
</html>
Wel.html:-
<html>
<head><center><h1>WELCOME</h1>
</center>
</head>
</html>
OUTPUT:-
CONCLUSION:-
The above program written by me is an errorless one.
16
![Page 17: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/17.jpg)
Design a web page for BSNL using frame sets.
Program:-
MAIN.HTML:-
<html>
<frameset rows="20%, 80 %">
<frame name="title" src="title.html">
<frameset cols="20%, 80 %">
<frameset rows="50%,*">
<frame name="menu" src="menu.html"/>
<frame name="display"/>
</frameset>
<frame name="application"/ >
</frameset>
</frameset>
</html>
MENU.HTML:-
<html>
<body>
<ul><br>
<li><a href="isd.html" target="display"> ISD </li>
<li><a href="std.html" target="display"> STD </li>
<li><a href="local.html" target="display"> LOCAL </li>
<li><a href="application.html" target="application"> APPLICATION FORM
</li>
</UL> </body></html>
17
![Page 18: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/18.jpg)
TITLE.HTML:-
<html>
<body bgcolor="red" text="orange">
<center>
<H1>
Bharath Sanchar Nigam Limited
</H1>
</center>
</body>
</html>
APPLICATION.HTML:-
<html>
<head>
<title>application form</title>
</head>
<body>
<form name="application"method="post" align="centre">
<br><br>
<table cellpadding="10" cellspacing="10" align="centre"bgcolor="purple">
<tr><td>Name</td>
<td><input type="text" size="10" maxlength="20"></td></tr>
<tr><td><p>Address</td><td><textarea rows="4"
cols="32"></textarea></td></tr>
<tr><td><p>Gender</td>
<td><input type="radio"name="gender">male<input>
<input type="radio"name="gender">female<input></td></tr>
18
![Page 19: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/19.jpg)
<p><tr><td>Connection</td></tr><tr><td><input type="checkbox"
value="STD">STD</td>
<tr><td><input type="checkbox" value="ISD">ISD</td>
<tr><td><input type="checkbox" value="LOCAL">LOCAL</p></td><tr>
<tr><td><p><input type="submit" value="SUBMIT"></p></td>
<td><p><input type="reset"></p></td></tr>
</form>
</body>
</html>
ISD.HTML:-
<Html>
<body>
<h1>
ISD CALL @ Rs.6.00/UNIT
</body>
</html>
STD.HTML:-
<html>
<body>
<h1> STDCALL @ Rs.2.50/UNIT
</body>
</html>
19
![Page 20: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/20.jpg)
LOCAL.HTML:-
<html> <body>
<h1> LOCAL CALL @ Rs.1.00/unit </h1> </body>
</html>
OUTPUT:
CONCLUSION:-
The above program written by me is an errorless one.
20
![Page 21: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/21.jpg)
DESIGN A COMPLEX TABLE FOR ENTERING THE STUDENT MARKS DETAILS YEAR WISE.
Program:-
<html>
<head>
<title>Complex table</title>
</head>
<body>
<table border ="2" align="center">
<caption>TABLE THAT SHOWS MARKSLIST</caption>
<colspan="4" align="center">
<thead>
<tr bgcolor="skyblue">
<th rowspan="3">
<h6>Name</h6>
</th>
<th rowspan="3">
<h6>Rollno</h6>
</th>
<th colspan="8" valign="top">
<h6>Markslist</h6>
</th>
<th rowspan="3" valign="center">
21
![Page 22: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/22.jpg)
<h6>Total</h6>
</th>
</tr>
<tr bgcolor=" pink" valign="bottom">
<th rowspan="2" valign="top"> 1 year</th>
<th colspan="2">2 year</th>
<th colspan="5">3 year</th>
</tr>
<tr bgcolor="yellow" valign="bottom">
<th>1 sem </th>
<th>2 sem</th>
<th>3 sem</th>
<th colspan="4"> 2 sem</th>
</tr>
</thead>
<tbody>
<tr> <td>SHANKAR</td>
<td>1209</td>
<td>747</td>
<td>650</td>
<td>625</td>
<td>655</td>
22
![Page 23: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/23.jpg)
<td colspan="4">--</td>
<td>1224</td>
</tr>
<tr> <td>SRAVAN</td>
<td>579</td>
<td>750</td>
<td>650</td>
<td>650</td>
<td>635</td>
<td colspan="4">--</td>
<td>1224</td>
</tr>
<tr> <td>DURGAPRASAD</td>
<td>1221</td>
<td>700</td>
<td>600</td>
<td>675</td>
<td>640</td>
<td colspan="4">--</td>
<td>1224</td>
</tr>
</tbody>
23
![Page 24: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/24.jpg)
</table>
</body>
</html>
OUTPUT:-
CONCLUSION:-
The program written by me is an error free program.
24
![Page 25: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/25.jpg)
DESIGN A FEED BACK FORM USING “FORMS".
Program:-
<HTML>
<head>
<title> using html forms </title>
</head>
<body bgcolor="BLUE">
<h2> FEEDBACK FORM</h2>
<p>please fill out this form to help us in building our website</p>
<form method="post"action="/egi_bin/formmail>
<p><strong>name:</strong>
<input name="name"Type="test"size="25"></p>
<p><strong>comments:</strong>
<text area name="comments"rows="4"cols=36">
</text area></p>
<p><strong>e-mail address:</strong>
<input name="e-mail"type="password"size="25"></p>
<P> <strong> Things you like: </strong></P>
site design
<input name="things" Type="checkbox"value="links"> Ease of use:
<input name="things"Type="checkbox"value="ease"> images:
<input name="things"Type="checkbox"value="images"> Search engine
<input name="how to get to site"Type="radio"value="search Engine">
links form another site
<input name="how to get to site"Type="radio"value="links">dietel.com website
<input name="how to get to site"Type ="radio"value="dietel.com">
25
![Page 26: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/26.jpg)
</p>
<p><strong>rate our site(1-10):</strong>
<select name="rating">
0<opinion selected>
<option>Amazing:-(
<option>10
<option>9
<option>8
<option>7
<option>6
<option>5
<option>4
<option>3
<option>2
<option>1
<option>The pity:-(
</select></p>
<input Type="submit" value="submit your entries">
<input Type="reset"value="clear your entries">
</form>
</body>
</HTML>
26
![Page 27: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/27.jpg)
OUTPUT:-
COCNLUSION:-
The program written by me is an errorless one.
27
![Page 28: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/28.jpg)
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
User Profile Page
Shopping Cart
Order Confirmation
Registration and User Login
Books catalog
Payment by Credit card
Homepage.html :
<html><head><title>online book shop</title></head><frameset rows="30%,70%"><frame name="frame1" src="homepagetext.html"><frameset cols="30%,70%"><frame name="frame2" src="homepagemenu.html"><frame name="homepage" src=""></frameset></frameset></html>
Homepagetext.html
<html><head><title>text of the homepage</title></head><body bgcolor="yellow"><marquee><h1>WELCOME TO ONLINE BOOK STORE</h1></marquee><img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Sunset.jpg" width="50" height="60" align="right" alt="sacet"><p>please <br> buy atleast one book<br></p></boby></html>
28
![Page 29: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/29.jpg)
Homepagemenu.html
<html><head><title>menu of the homepage</title></head><body><center><h2><u>MENU</u></h2></center><ol><a href="reg.html" target="homepage"><li>REGISTRATION</a><a href="login.html" target="homepage"><li>LOGIN</a><a href="profile.html" target="homepage"><li>USER PROFILE</a><a href="bookscatalog.html" target="homepage"><li>BOOKS CATALOG</a><a href="shoppingcart.html" target="homepage"><li>SHOPPING CART</a><a href="credit.html" target="homepage"><li>CREDIT CARD</a><a href="order.html" target="homepage"><li>ORDER CONFORMATION</a></ol></body></html>
Reg.html
<html><head><title>registration</title></head><body bgcolor="pink"><frame name="regform" method="post" action=""><center><caption>REGRISTRATION</caption><table><tr><td>first name</td>
29
![Page 30: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/30.jpg)
<td><input type="text" name="name" value="" size="10"></td></tr><tr><td>second name</td><td><input type="text" name="name" value="" size="10"></td></tr><tr><td>enter ur username</td><td><input type="username" name="name" value="" size="10"></td></tr><tr><td>enter ur password</td><td><input type="password" name="name" value="" size="10"></td></tr><tr><td>date of birth</td><td><input type="number" name="" value="" size="3">DD</td><td><input type="number" name="" value="" size="3">MM</td><td><input type="number" name="" value="" size="3">YY</td></tr><tr><td>nationality</td><td><input type="text" name="name" value="" size="6"></td></tr><tr><td>gender</td><td><input type="radio">MALE</td><td><input type="radio">FEMALE</td></tr><tr><td>address</td><td><textarea rows="4" cols="10"></textarea></td></tr><td colspan=2><input type="button" value="submit" onclick="function()"><input type="button" value="cancel" onclick="function()"></td></tr></table></center></body></html>
30
![Page 31: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/31.jpg)
Loging.html
<html><head><title>login form</title></head><body bgcolor="green"><frame name="login" method="post" action=""><center><caption>USER LOGIN</caption><table><tr><td>enter userID</td><td><input type="text" name="name" value="" size="10"></td></tr><tr><td>enter password</td><td><input type="password" name="name" value="" size="6"></td></tr><tr><td colspan=1><input type="button" value="sign in" onclick="function()"><input type="button" value="cancel" onclick="function()"></td></tr></table></center></body></html>
Userprofile.html
<html><head><title>user profile</title></head><body bgcolor="orange"><frame name="profile" method="post" action=""><center><table border="2" bgcolor="white" cellpadding="5"><caption>USER PROFILE</caption><tr><td>name</td><td>DOB</td><td>address</td><td>cellno</td><td>e-mail</td><td>gender</td><td>nationality</td>
31
![Page 32: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/32.jpg)
</tr><tr><td>Koyi</td><td>15-jan-1978</td><td>S R nagar</td><td>9985130820</td><td>[email protected]</td><td>m</td><td>indian</td></tr><tr><td>naresh</td><td>15-feb-1979</td><td>A G colony</td><td>998130821</td><td>[email protected]</td><td>m</td><td>indian</td></tr></table></center></body></html>
Bookscatalog.html:
<html><head><title>books catalog</title></head><body bgcolor="sky blue"><frame name="bookscatalog" method="post" action=""><center><table border="2" bocolor="blue" cellpadding="5"><caption>BOOKS CATALOG</caption><tr><td>sno</td><td>name of the book</td><td>author</td><td>publication</td><td>edition</td><td>availability</td><td>price</td><td>if u want add</td></tr><tr><td>1</td>
32
![Page 33: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/33.jpg)
<td>WT</td><td>bates</td><td>pearson</td><td>2nd edition</td><td>yes</td><td>500</td><td><input type="button" value="add" onclick="function()"></td></tr><tr><td>2</td><td>OS</td><td>stallings</td><td>pearson</td><td>edition</td><td>5th edition</td><td>400</td><td><input type="button" value="add" onclick="function()"></td></tr></table></center></body></html>
Shoppingcart.html
<html><head><title>shopping cart</title></head><body bgcolor="violet"><center><caption>SHOPPING CART</caption><p >selected books are huecheck once again</p><table border="1" cellpadding="15"><tr><td>sno</td><td>name of book</td><td>author</td></tr><tr><td>1</td><td>CN</td><td>taninbalm</td></tr></table><p><input type="submit" value="ok"></p></center> </body> </html> 33
![Page 34: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/34.jpg)
Creditcard.html:
<html><head><title>credit card</title></head><body bgcolor="orange"><frame name="credit card" method="post" action=""><center><caption>PAYMENT BY CREDIT CARD</caption><table border="1" cellpadding="15"><tr><td>username</td><td><input type="text" name="name" value="" size="10"></td></tr><tr><td>pin no</td><td><input type="number" name="" value="" size="10"></td></tr><tr><td><input type="button" value="submit" onclick="function()"></td><td><input type="button" value="cancel" onclick="function()"></td></tr></table></center></body></html>
Orderconfirmation.html:
<html><head><title>order conforamtion</title></head><body bgcolor="blue"><frame name="order conformation" method="post" action=""><center><caption>ORDER CONFORMATION</caption><p>we will send books with in a week<br><input type="submit" value="ok"></p></center></body></html>
34
![Page 35: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/35.jpg)
OUTPUT:loginform
Order.html output:
Registration.html
35
![Page 36: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/36.jpg)
Userprofile.html output
Shoppingcart.html output:
36
![Page 37: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/37.jpg)
Homepagetext.html output:
Homepage menu.html output:
Creditcard.html
37
![Page 38: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/38.jpg)
bookscatalog.html
Homepage.html
38
![Page 39: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/39.jpg)
STYLE SHEETS 39
![Page 40: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/40.jpg)
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
40
![Page 41: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/41.jpg)
Stylesheet.html
<html>
<head>
<style type="text/css">
body
{
background-image:url('img_tree.pngtop');
background-repeat:no-repeat;
background-position:top right;
margin-right:200px;
}
</style>
</head>
41
![Page 42: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/42.jpg)
Stylesheet.css
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only show once, and
positioned away from the text.</p>
<p> In this example we have also added a margin on the
right side, so the background image will never disturb
the text.</p>
</body>
</html>
42
![Page 43: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/43.jpg)
EXAMPLES RELATED TO JAVASCRIPT
Program using javascript
<html><body><script type="text/javascript">document.write("Hello World!");</script></body></html>
Explanation:
To insert a JavaScript into an HTML page, we use the <script> tag.
Inside the <script> tag we use the type attribute to define the scripting language.
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends.
The document.write command is a standard JavaScript command for writing output to a page.
By entering the document.write command between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page.
COMMENT IN JAVASCRIPT
<html><body><scripttype="text/javascript"> <!--document.write("HelloWorld!");//--></script></body></html>
Explanation:
Just add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement.
The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
43
![Page 44: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/44.jpg)
Where to Put the JavaScript:
JavaScript in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, other times when a user triggers an event.
SCRIPT IN <HEAD>
<html><head><script type="text/javascript">functionmessage() {alert("This alert box was called with the onload event"); }</script></head><body onload="message()"> </body></html>
Explanation:
Scripts to be executed when they are called, or when an event is triggered, go in the head section.
If you place a script in the head section, you will ensure that the script is loaded before anyone uses it.
Script in <body>
Scripts to be executed when the page loads go in the body section.
If you place a script in the body section, it generates the content of a page
<html><head></head><body><script type="text/javascript"> document.write("This message is written by JavaScript");</script></body></html>
44
![Page 45: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/45.jpg)
JavaScript is Case Sensitive
Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions
JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello Dolly" to the web page document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.
Note: Using semicolons makes it possible to write multiple statements on one line
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will write a heading and two paragraphs to a web page
Ex:-<script type="text/javascript">
document.write("<h1>a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Blocks
JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket {, and ends with a right curly bracket }.
The purpose of a block is to make the sequence of statements execute together.
This example will write a heading and two paragraphs to a web page
45
![Page 46: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/46.jpg)
Ex:
<script type="text/javascript">
{
document.write("<h1>a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
JavaScript Comments
Comments can be added to explain the JavaScript, or to make the code more readable.
Single line comments start with //.
Multi line comments start with /* and end with */.
Ex:
<script type="text/javascript">
//Write heading
document.write("<h1>This is aheading</h1>");
//Write two paragraphs
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
46
![Page 47: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/47.jpg)
JavaScript Variables
As with algebra, JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more descriptive name, like carname.
Rules for JavaScript variable names:
Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
Ex:
<html>
<body>
<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>
</body>
</html>
O/P: hege
Tove
47
![Page 48: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/48.jpg)
Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as "declaring" variables.
You can declare JavaScript variables with the var statement:
Ex:
var x;
var name;
var x=5;
var carname=”Volvo”;
After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo.
Note: When you assign a text value to a variable, use quotes around the value.
48
![Page 49: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/49.jpg)
2. Validate the Registration, user Login, User Profile and payment by credit card pages using JavaScript
Credit card validation:
<html><head><script type="text/javascript">function fna(){var fn,ln,pn;fn=f3.name.value;ln=f3.cno.value;
pn=f3.pno.value;var u=ln.length;
if(fn==""){ window.alert("enter customer name");}else if(ln==""){ window.alert("enter cardno");}else if(u!=16){ window.alert("Invalid cardno");} else if(pn=="")
{ window.alert("Enter pin no:"); } else { window.alert("Credit card accepted...");
}
}</script></head>
<body bgcolor="opera"><form name="f3" method="post" action=" ">
<center><caption>PAYMENTBYCREDIT CARD</caption>
<table><tr><td>Customer name</td><td><input type="text" name="name" value="" size="20"></td></tr>
49
![Page 50: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/50.jpg)
<tr><td>card no</td><td><input type="text" name="cno" value="" size="20"></td></tr><tr><td>pin no</td><td><input type="password" name="pno" value="" size="20"></td></tr></table></center><center><input type="button" value="submit" onclick="fna()"></center></form></body></html>
Output:
50
![Page 51: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/51.jpg)
Login page validation:
<html>
<head>
<script type="text/javascript">
function fname()
{
var fn,ln;
fn=f2.fna.value;
ln=f2.pwd.value;
if(fn=="")
{
window.alert("enter ur Id");
}
else if(ln=="")
{
window.alert("enter ur password");
}
else
{
window.alert("Login Success");
}
}
</script>
</head>
<body bgcolor="pink">
<form name="f2" method="post" action=" ">
51
![Page 52: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/52.jpg)
<center>
<table>
<caption>LOGIN</caption>
<tr>
<td>enter user id</td>
<td><input type="text" name="fna" value=""size="10"></td>
</tr>
<tr>
<td>enter password</td>
<td><input type="password"name="pwd" value=""size="6"></td>
</tr>
<tr>
<td><input type="BUTTON" value="SIGN IN "onclick="fname()"></td>
<td><input type="BUTTON" value="CANCEL"></td>
</tr>
</table>
</center>
</form>
</body>
</html>
52
![Page 53: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/53.jpg)
Outputs:
53
![Page 54: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/54.jpg)
Profile validation
<html><head><script type="text/javascript">function fname(){
var fn,cn,db,nt,ad;fn=f1.fna.value;db=f1.dob.value;ad=f1.address.value;cn=f1.cno.value;nt=f1.nat.value;
if(fn==""){ window.alert("entername");}else if(db==""){ window.alert("enter date of birth");}else if(ad==""){window.alert("enter address");}else if(cn==""){ window.alert("enter cellno:");}else if(nt==""){window.alert("enter nationality");}
else {
window.alert("Profile Submited.."); }
}</script></head>
<body bgcolor="orange"><form name="f1" method="post" action=""><center><table border="2" bgcolor="white" cellpadding="5"><caption>USER PROFILE</caption><tr><td>name</td>
54
![Page 55: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/55.jpg)
<td><input type="text" name="fna" value="" size="10"></td></tr><tr><td>Date of Birth</td><td><input type="number" name="dob" value="" size="10"></td></tr><tr><td>ADDRESS</td><td><textarea rows="10" cols="10" name="address"></textarea></td><tr><td>CELLNUMBER</td><td><input type="number" name="cno" value="" size="10"></td></tr><tr><td>NATIONALITY</td><td><input type="text" name="nat" value="" size="10"></td></tr><tr><td colspan=2 align=center><input type="button" value=SUBMIT
onclick="fname()"></center></body></html>
Outputs:
Registration form validations:
55
![Page 56: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/56.jpg)
<html>
<head>
<script type="text/javascript">
function checkform(){
var fn,ln,ep,cp,db1,db2,db3,nt,ad,gen1,gen2;ln=f1.sna.value;ep=f1.pwd1.value;cp=f1.pwd2.value;fn=f1.fna.value;db1=f1.dd.value;
db2=f1.mm.value; db3=f1.yy.value;
nt=f1.nat.value;ad=f1.address.value;gen1=f1.gender[0].checked;gen2=f1.gender[1].checked;
if(fn==""){ window.alert("enter first name");}else if(ln==""){ window.alert("enter second name");}else if(ep==""){ window.alert("enter ur pwd");}else if(cp==""){ window.alert("confirm ur pwd");}else if(ep!=cp){ window.alert("passwords are not match");}else if(db1==""||db2==""||db3==""){window.alert("date of birth");}else if(nt==""){
56
![Page 57: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/57.jpg)
window.alert("enter nationality");}else if(gen1==false||gen2==false){window.alert("enter gender");}else if(ad==""){window.alert("enter address");}
else { window.alert("Registration conformed..."); }}</script></head><body bgcolor="pink"><form name="f1" method="post" action=" "><center>
<caption>REGISTRATION</caption><table><tr><td>first name</td><td><input type="text" name="fna" value="" size="10"></td></tr><tr><td>second name</td><td><input type="text" name="sna" value="" size="10"></td></tr><tr><td>enter pwd</td><td><input type="password"name="pwd1" value="" size="6"></td></tr><tr><td>conform ur pwd</td><td><input type="password"name="pwd2" value="" size="6"></td></tr><tr><td>Date of birth</td><td><input type="text" name="dd" value="" size="2">DD</td><td><input type="text" name="mm" value="" size="2">MM</td><td><input type="text" name="yy" value="" size="4">YY</td></tr><tr><td>nationality</td><td><input type="text"name="nat" value="" size="10"></td></tr>
57
![Page 58: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/58.jpg)
<tr><td>gender</td><td><input type="radio" name=gender>Male<input type="radio" name=gender>Female</td></tr><tr><td>Address</td><td><textarea rows="3" cols="3" name=address></textarea></td></tr><tr><td><input type="BUTTON" value="SUBMIT" onclick="checkform()"></td><td><input type="RESET" value="CANCEL"></td></tr>
</table></center></form></body></html>
Outputs:
58
![Page 59: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/59.jpg)
59
![Page 60: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/60.jpg)
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 the user details by taking the user information from XML document.
Info.xml<?xml version="1.0"?>
<info>
<user>
<name>suresh reddy</name>
<id>1201</id>
<dob>12/01/1989</dob>
<place>S r nagar</place>
<rank>07</rank>
</user>
<user>
<name>chand</name>
<id>1202</id>
<dob>13/08/1989</dob>
<place>Ongole</place>
<rank>02</rank>
</user>
<user>
<name>naresh</name>
<id>1203</id>
<dob>1/02/1988</dob>
<place>bapatla</place>
<rank>05</rank>
</user>
60
![Page 61: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/61.jpg)
<user>
<name>Kalyan</name>
<id>1204</id>
<dob>18/09/1989</dob>
<place>guntur</place>
<rank>04</rank>
</user>
<user>
<name>Koyi</name>
<id>1205</id>
<dob>13/07/1988</dob>
<place>A g colony</place>
<rank>06</rank>
</user>
<user>
<name>alludu</name>
<id>1206</id>
<dob>3/05/1989</dob>
<place>nellore</place>
<rank>09</rank>
</user>
<user>
<name>surendra</name>
<id>1207</id>
<dob>31/05/1987</dob>
<place>martur</place>
61
![Page 62: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/62.jpg)
<rank>10</rank>
</user>
<user>
<name>suneel</name>
<id>1208</id>
<dob>05/06/1985</dob>
<place>vizag</place>
<rank>01</rank>
</user>
<user>
<name>rajesh</name>
<id>1209</id>
<dob>07/04/1988</dob>
<place>machilipatnam</place>
<rank>08</rank>
</user>
<user>
<name>pavan</name>
<id>1210</id>
<dob>20/03/1988</dob>
<place>tenali</place>
<rank>03</rank>
</user>
</info>
62
![Page 63: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/63.jpg)
microsoft.js
function loadXMLDOC(dname)
{ var xmldoc;
if(window.ActiveXObject)
{
xmldoc=new ActiveXObject("microsoft.XMLDOM");
}
else if(document.implementation && document.implementation.createDocument)
{
xmldoc=document.implementation.createDocument(" "," ","null");
}
else
{
alert("the browser cannot handle this msg");
}
xmldoc.async=false;
xmldoc.load(dname);
return(xmldoc);
}
function getid()
{
var doc=loadXMLDOC("info.xml");
var id=info.id.value;
var a=doc.getElementsByTagName('name');
var b=doc.getElementsByTagName('id');
var c=doc.getElementsByTagName('dob');
63
![Page 64: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/64.jpg)
var d=doc.getElementsByTagName('place');
var e=doc.getElementsByTagName('rank');
var count=0;
for(var i=0;i<b.length;i++)
{
if(b[i].childNodes[0].nodeValue==id)
{
count=1;
document.open();
document.write("<body bgcolor=yellow text=violet>");
document.write("<center><table border=1 cellpadding=5 cellspacing=5>");
document.write("<tr><th>name</th><th>id</th><th>dob</th><th>place</th><th>rank</th></tr>");
document.write("<td>"+a[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+b[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+c[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+d[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+e[i].childNodes[0].nodeValue+"</td>");
document.close();
}
}
if(count==0)
{ alert("the record is not found");
} }
64
![Page 65: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/65.jpg)
myxml.js
function loadXMLDOC(dname)
{
var xmldoc;
if(window.ActiveXObject)
{
xmldoc=new ActiveXObject("microsoft.XMLDOM");
}
else if(document.implementation && document.implementation.createDocument)
{
xmldoc=document.implementation.createDocument(" "," ","null");
}
else
{
alert("the browser cannot handle this msg");
}
xmldoc.async=false;
xmldoc.load(dname);
return(xmldoc);
}
function getid()
{
var doc=loadXMLDOC("info.xml");
var id=info.id.value;
var a=doc.getElementsByTagName('name');
65
![Page 66: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/66.jpg)
var b=doc.getElementsByTagName('id');
var c=doc.getElementsByTagName('dob');
var d=doc.getElementsByTagName('place');
var e=doc.getElementsByTagName('rank');
var count=0;
for(var i=0;i<b.length;i++)
{
if(b[i].childNodes[0].nodeValue==id)
{
count=1;
document.open();
document.write("<body bgcolor=yellow text=violet>");
document.write("<center><table border=1 cellpadding=5 cellspacing=5>");
document.write("<tr><th>name</th><th>id</th><th>dob</th><th>place</th><th>ran k</th></tr>");
document.write("<td>"+a[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+b[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+c[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+d[i].childNodes[0].nodeValue+"</td>");
document.write("<td>"+e[i].childNodes[0].nodeValue+"</td>");
document.close();
}
}
if(count==0)
{ alert("the record is not found"); }
}
66
![Page 67: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/67.jpg)
studentdetails.html
<html><head><script type="text/javascript" src="myxml.js">
</script></head><body bgcolor="pink"><h1 align="center"><u>Welcome INFO Site</h1><fieldset><legend>STUDENT DETAILS</legend><form name="info"><table border="1" align="center" bgcolor="yellow"><tr><th>enter your ID</th><td><input type="text" name="id" value=""></td></tr><tr><td colspan="2" align="center"><input type="button" value="get result" onclick="getid()"><input type="reset" value="cancel"></td></tr></table></form></fieldset></html>Output:
67
![Page 68: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/68.jpg)
Java Beans
//GuiAppl.java //main program
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class GuiAppl extends JFrame implements ActionListener
{
JTextField tfProdId, tfProdName, tfPrice;
JButton jbStore;
public GuiAppl()
{
tfProdId=new JTextField("enter prodid");
tfProdName=new JTextField("enter prodname");
tfPrice=new JTextField("enter price");
jbStore=new JButton("Display");
Container cp=getContentPane();
cp.setLayout(new FlowLayout());
cp.add(tfProdId);
cp.add(tfProdName);
cp.add(tfPrice);
cp.add(jbStore);
pack();
jbStore.addActionListener(this);
}
68
![Page 69: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/69.jpg)
public static void main(String a[])throws Exception
{
GuiAppl guiAppl=new GuiAppl();
guiAppl.setVisible(true);
}
public void actionPerformed(ActionEvent ae)
{
try
{
String vprodid, vprodname, vprice;
vprodid=tfProdId.getText();
vprodname=tfProdName.getText();
vprice=tfPrice.getText();
ProdBean pb=new ProdBean();
pb.setProdId(vprodid);
pb.setProdId(vprodname);
pb.setPrice(vprice);
}
catch(Exception e)
{
System.out.println(e);
}
}
}
69
![Page 70: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/70.jpg)
ProdBean.java
public class ProdBean
{
String propone, proptwo, propthree;
public ProdBean()
{ }
public void setProdId(String s1)
{
propone=s1;
System.out.println("property one-->"+s1);
}
public String getProdId()
{
System.out.println("get property-->"+propone);
return propone;
}
public void setProdName(String s2)
{
proptwo=s2;
System.out.println("property two-->"+s2);
}
public String getProdName()
{
System.out.println("get property-->"+proptwo);
return proptwo; }
public void setPrice(String s3)
70
![Page 71: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/71.jpg)
{
propthree=s3;
System.out.println("property three-->"+s3);
}
public String getPrice()
{
System.out.println("get property-->"+propthree);
return propthree;
}
}
OUTPUT:
71
![Page 72: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/72.jpg)
Procedure:
1. First compile the bean program
2. After that compile and run the main program
Example:
C:\abc\javac ProdBean.java (compiling bean prg)
C:\abc\javac GuiAppl.java (compiling main prg)
C:\abc\java GuiAppl (running main prg)
72
![Page 73: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/73.jpg)
Bean Assignments
4a) Create a JavaBean which gives the exchange value of INR(Indian Rupees) into equivalent American/Canadian/Australian Dollor value.
CurrencyAppl.java
//main program
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class CurrencyAppl extends JFrame implements ActionListener
{
JTextField tfameCurr, tfcanCurr, tfausCurr;
//declare the text fields
JButton jbStore;//declare button
public CurrencyAppl()//constructor
{
tfameCurr=new JTextField("Enter Indian Currency(in Rs)");
//creation of text field
tfcanCurr=new JTextField("Enter Indian Currency(in Rs)");
tfausCurr=new JTextField("Enter Indian Currency(in Rs)");
jbStore=new JButton("convert");
Container cp=getContentPane();
cp.setLayout(new FlowLayout());
cp.add(tfameCurr);
cp.add(tfcanCurr);
cp.add(tfausCurr); 73
![Page 74: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/74.jpg)
cp.add(jbStore);
pack();
jbStore.addActionListener(this);
}
public static void main(String a[])throws Exception
{
CurrencyAppl currencyAppl=new CurrencyAppl();
currencyAppl.setVisible(true);
}
public void actionPerformed(ActionEvent ae)
{
try
{
float vameCurr, vcanCurr, vausCurr;
vameCurr=Float.parseFloat(tfameCurr.getText());
vcanC urr=Float.parseFloat(tfcanCurr.getText());
vausCurr=Float.parseFloat(tfausCurr.getText());
CurrencyBean cb=new CurrencyBean();
cb.setAmeCurr(vameCurr);
cb.setCanCurr(vcanCurr);
cb.setAusCurr(vausCurr);
}
catch(Exception e)
{
System.out.println(e); } } }
CurrencyBean.java
74
![Page 75: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/75.jpg)
public class CurrencyBean
{
float ameCurr,canCurr,ausCurr;
public CurrencyBean()
{
}
public void setAmeCurr(float ameCurr)
{
this.ameCurr=ameCurr;
System.out.println("equivalent American Currency(in doller)--->"+(ameCurr/40));
}
public float getAmeCurr()
{
return ameCurr;
}
public void setCanCurr(float canCurr)
{
this.canCurr=canCurr;
System.out.println("equivalent canadian Currency(in doller)--->"+(canCurr/35));
}
public float getCanCurr()
{
return canCurr;
}
public void setAusCurr(float ausCurr)
75
![Page 76: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/76.jpg)
{
this.ausCurr=ausCurr;
System.out.println("equivalent Australian Currency(in doller)--->"+(ausCurr/30));
}
public float getAusCurr()
{
return ausCurr;
}
}
Procedure:
1. First compile the bean program
2. After that compile and run the main program
Example:
C:\abc\javac Currency.Bean.java (compiling bean prg)
C:\abc\javac CurrencyAppl.java (compiling main prg)
C:\abc\java CurrencyAppl (running main prg)
76
![Page 77: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/77.jpg)
equivalent American Currency(in doller)--->0.125
equivalent canadian Currency(in doller)--->0.14285715
equivalent Australian Currency(in doller)--->0.16666667
Equivalent American Currency in dollar 0.35
Equivalent canadian Currency in dollar 0.4567
Equivalent Australian Currency in dollar 0.268
4b) Create a simple Bean with a label- which is the count of number of clicks. Then create a Bean Info class such that only “the “count” property is visible in the property window.
import java.io.*;
import java.util.*;
import java.awt.*;
import java.awt.event.*;
public class Click extends Frame implements MouseListener
{
Label l;
TextField t;
private Integer count=0;
public Click()
{
System.out.println("in con");
l=new Label("click on me");
t=new TextField("0",10);
setLayout(new FlowLayout());
add(l);
add(t);
77
![Page 78: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/78.jpg)
l.addMouseListener(this);
setSize(300,200);
setVisible(true);
}
public void mouseClicked(MouseEvent me)
{
count=count+1;
t.setText(count.toString());
}
public void mousePressed(MouseEvent me){}
public void mouseReleased(MouseEvent me){}
public void mouseEntered(MouseEvent me){}
public void mouseExited(MouseEvent me){}
public static void main(String args[])throws Exception
{
Click c=new Click();
}
}
OUTPUT:
78
![Page 79: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/79.jpg)
4c) Create two Beans – a) Key Pad b) Display Pad After that integrate the two Bean to make it work as a calculator
import java.awt.*;
import java.awt.event.*;
import java.io.Serializable;
public class Calc extends Frame implements ActionListener
{
private Integer res,res1;
int op;
TextField tf=new TextField("0",20);
Button b1=new Button("1");
Button b2=new Button("2");
Button b3=new Button("3");
Button b4=new Button("4");
Button b5=new Button("5");
Button b6=new Button("6");
Button b7=new Button("7");
Button b8=new Button("8");
Button b9=new Button("9");
Button b0=new Button("0");
Button b11=new Button("+");
Button b12=new Button("-");
Button b13=new Button("x");
Button b14=new Button("/");
Button b15=new Button("=");
79
![Page 80: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/80.jpg)
public Calc()
{
setLayout(new GridLayout(6,6));
setSize(200,200);
setVisible(true);
add(b0);
add(b1);
add(b2);
add(b3);
add(b4);
add(b5);
add(b6);
add(b7);
add(b8);
add(b9);
add(b11);
add(b12);
add(b13);
add(b14);
add(b15);
add(tf);
b0.addActionListener(this);
b1.addActionListener(this);
b2.addActionListener(this);
80
![Page 81: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/81.jpg)
b3.addActionListener(this);
b4.addActionListener(this);
b5.addActionListener(this);
b6.addActionListener(this);
b7.addActionListener(this);
b8.addActionListener(this);
b9.addActionListener(this);
b11.addActionListener(this);
b12.addActionListener(this);
b13.addActionListener(this);
b14.addActionListener(this);
b15.addActionListener(this);
res=0; }
public void actionPerformed(ActionEvent ae)
{
String cmd=ae.getActionCommand();
if(cmd.equals("0"))
{ res=Integer.parseInt(res.toString()+"0"); tf.setText(res.toString()); }
else if(cmd.equals("1"))
{ res=Integer.parseInt(res.toString()+"1"); tf.setText(res.toString()); }
else if(cmd.equals("2"))
{ res=Integer.parseInt(res.toString()+"2"); tf.setText(res.toString()); }
else if(cmd.equals("3"))
{ res=Integer.parseInt(res.toString()+"3"); tf.setText(res.toString()); }
else if(cmd.equals("4"))
{ res=Integer.parseInt(res.toString()+"4"); tf.setText(res.toString()); }
81
![Page 82: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/82.jpg)
else if(cmd.equals("5"))
{ res=Integer.parseInt(res.toString()+"5"); tf.setText(res.toString()); }
else if(cmd.equals("6"))
{ res=Integer.parseInt(res.toString()+"6"); tf.setText(res.toString()); }
else if(cmd.equals("7"))
{ res=Integer.parseInt(res.toString()+"7"); tf.setText(res.toString()); }
else if(cmd.equals("8"))
{ res=Integer.parseInt(res.toString()+"8"); tf.setText(res.toString()); }
else if(cmd.equals("9"))
{ res=Integer.parseInt(res.toString()+"9"); tf.setText(res.toString()); }
else if(cmd.equals("+"))
{ res1=res; res=0; tf.setText("0"); op=0; }
else if(cmd.equals("-"))
{ res1=res; res=0; tf.setText("0"); op=1;}
else if(cmd.equals("x"))
{ res1=res; res=0; tf.setText("0"); op=2;}
else if(cmd.equals("/"))
{ res1=res; res=0; tf.setText("0"); op=3;}
else if(cmd.equals("="))
{
res=Integer.parseInt(tf.getText());
if(op==0) res=res1+res;
else if(op==1) res=res1-res;
else if(op==2) res=res*res1;
else if(op==3)
{ if(res!=0) res=res1/res;
82
![Page 83: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/83.jpg)
else System.out.println("Div Zero");
}
tf.setText(res.toString());
}
}
public void setRes(Integer r)
{ res=r; }
public Integer getRes()
{ return res; }
public static void main(String[] args)
{
Calc c=new Calc();
}
}
83
![Page 84: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/84.jpg)
4d) Create two Beans Traffic Light (implemented as a Label with only three background colours- 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
GreenRed Stop
Program : Tsignal.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.io.Serializable;
public class Tsignal extends Frame implements MouseListener
{
private Color col=Color.red;
Choice sgen=new Choice();
Label l1=new Label("Ready");
public Tsignal()
{
setSize(200,200);
setVisible(true);
setLayout(new FlowLayout());
add(l1);
this.addMouseListener(this);
}
public void mousePressed(MouseEvent me)
{
84
![Page 85: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/85.jpg)
Color c;
if(col==Color.red)
{
c=Color.yellow;
l1.setText("Ready");
}
else if(col==Color.yellow)
{
c=Color.green;
l1.setText("Move");
}
else if(col==Color.green)
{
c=Color.red;
l1.setText("Stopped");
}
else
{
c=Color.red;
l1.setText("Stopped");
}
setCol(c);
repaint();
}
public void mouseEntered(MouseEvent me) { }
public void mouseExited(MouseEvent me) { }
public void mouseReleased(MouseEvent me) { }
public void mouseClicked(MouseEvent me) { }
85
![Page 86: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/86.jpg)
public void setCol(Color c)
{
col=c;
repaint();
}
public Color getCol()
{
return col;
}
public void paint(Graphics g)
{
System.out.println(col.toString());
g.setColor(col);
g.fillOval(50,50,100,100);
}
public static void main(String[] args)
{
Tsignal c=new Tsignal();
} }
Output:
86
![Page 87: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/87.jpg)
EXAMPLES ON SERVLET
A SERVLET PROGRAM TO PRINT " WELCOME TO SERVLET"
Program:-
WEB.XML:
<Web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>first</servlet-class>
</servlet>
<servlet-mapping>
servlet-name>s1</servlet-name>
<url-pattern>/first</url-pattern>
</servlet-mapping>
</web-app>
FIRST.JAVA:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class first extends HttpServlet
{ public void service(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html");
87
![Page 88: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/88.jpg)
PrintWriter pw=res.getWriter();
pw.println("<h1>welcome to servlet</h1>");
pw.close();
}
}
OUTPUT:
CONCLUSION:-
The program written by me is an errorless one.
88
![Page 89: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/89.jpg)
A SERVLET PROGRAM TO IMPLEMENT THE " DoGET " METHOD.
Program:-
COLOR CHOOSEN.HTML:
<html>
<body>
<form name="form 1" method="GET" action="./colors">
<b>COLOR</b>
<select name="color" size="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<input type=submit value="send"/>
</form>
</body>
</html>
WEB.XML:
<web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>colors</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s1</servlet-name>
<url-pattern>/colors</url-pattern>
</servlet-mapping>
</web-app>
89
![Page 90: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/90.jpg)
COLORS.JAVA:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class colors extends HttpServlet
{ public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{ String color=req.getParameter("color");
PrintWriter pw=res.getWriter();
pw.println("<b>selected color is:</b>");
pw.println(color);
pw.close(); } }
OUTPUT:
Conclusion:-
The program written by me is an errorless one.
90
![Page 91: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/91.jpg)
A SERVLET PROGRAM TO IMPLEMENT THE "DOPOST " METHOD.
Program:-
COLOR CHOOSEN.HTML:
<html>
<body>
<form name="form 1" method="POST" action="./colors">
<b>COLOR</b>
<select name="color" size="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<input type=submit value="send"/>
</form>
</body>
</html>
WEB.XML:
<web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>colors</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s1</servlet-name>
<url-pattern>/colors</url-pattern>
</servlet-mapping>
</web-app>
91
![Page 92: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/92.jpg)
COLORS.JAVA:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class colors extends HttpServlet
{
public void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
String color=req.getParameter("color");
PrintWriter pw=res.getWriter();
pw.println("<b>selected color is:</b>");
pw.println(color);
pw.close();
} }
OUTPUT:
CONCLUSION:-
The program written by me is an errorless one.
92
![Page 93: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/93.jpg)
A PROGRAM TO IMPLEMENT “SERVLET COMMUNICATION".
Program:-
PROFILE.HTML:
<html>
<head>
<h1>user form</h1>
</head>
<body bgcolor="yellow">
<form action="./first" method="POST">
name:<input type="text" name="t1"><br><br>
address:<input type="text" name="t2"><br><br>
age:<input type="text" name="t3"><br><br>
<input type="submit" value="send"/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
WEB.XML:
<web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>ser1</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s1</servlet-name>
<url-pattern>/first</url-pattern>
</servlet-mapping>
93
![Page 94: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/94.jpg)
<servlet>
<servlet-name>s2</servlet-name>
<servlet-class>ser2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s2</servlet-name>
<url-pattern>/second</url-pattern>
</servlet-mapping>
</web-app>
SER1.JAVA:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class ser1 extends HttpServlet
{
public void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
String name=req.getParameter("t1");
String addr=req.getParameter("t2");
int age=Integer.parseInt(req.getParameter("t3"));
Cookie c1=new Cookie ("c1",name);
Cookie c2=new Cookie ("c2",addr);
Cookie c3=new Cookie ("c3",age+" ");
res.addCookie(c1);
res.addCookie(c2);
res.addCookie(c3);
PrintWriter PW=res.getWriter();
94
![Page 95: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/95.jpg)
PW.println("<a href=./second>click here</a>");
PW.close();
}
}
SER2.JAVA:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
public class ser2 extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException
{
PrintWriter Out=res.getWriter();
res.setContentType("text/html");
Cookie []cc=req.getCookies();
if(cc!=null)
{
for(int i=0;i<cc.length;i++)
{
String s1=cc[i].getName();
if(s1.equals("c1"))
Out.println(cc[i].getValue());
else if(s1.equals("c2"))
Out.println(cc[i].getValue());
else if(s1.equals("c3"))
Out.println(cc[i].getValue());
}}}}
95
![Page 96: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/96.jpg)
OUTPUT:
CONCLUSION:-
The program written by me is an errorless one.
96
![Page 97: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/97.jpg)
5. Install TOMCAT web server. Covert the static web pages of assignments 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.
Aim: To validate the user login, user profile, and payment by credit card by using Html and java Servlets
Description:
1. We start the designing of the program with an HTML and then proceed to design of a java servlets
2. We start html tag first. In the head tag a funciton profile(f1,f2) is declared that describes the status of those users logged in successfully.
3. In body tag, describe the background colors to be used by using bgcolor.
4. Three forms are used in developing the web page.
5. The first form will receive the username and password , on submit these data i.e username & password are send to servlet for processing the information. If these values are valid then the program displays logged in successful. This form is preceded by marquee that scroll to either to left or right as specified.
6. Second form contains one text field , one password field and one text area . This form gives the details of the user. that will be displayed in text field.
7. Third form contains the 2 text -field and one password field. This is useful to pay amount by credit card .
8. To design a servlet import java packages, like servlet etc.
9. Create a class UserInfo that extends properties of HttpServlet. The doPost method present in this class takes HttpServletRequest and HttpServletResponse as parameters.
10. Set the MIME type to text/html . For any servlet the default MIME type is text/plain.
11. An instance out for PrintWriter is created, which is initailized by using getWriter method.
12. Strings user and password are created, which takes values sent by the user .
13. Strinds ua,pa,ub,pb ........ contains the information of five users which is stored under the xml document.
14. Values present in user password are verified with either ua,pa or ub,pb ........ if these are correct then display login successful message. else login invalid message.
97
![Page 98: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/98.jpg)
15. To successfully execute this application an xml file is also to be created that should contain user details . user details are mentioned with in init-param tags .
16. Place the class file and xml file under the WEB-INF directory then deploy under Tomcat.
SOURCE CODE:
a. Register.html :<html><head><script language="javascript"><!-- function profile(f1,f2) { document.f2.ta.value="USER NAME:"+document.f1.userid.value+"\n STATUS:logged in"; }//--></script></head><body bgcolor="red"><MARQUEE style="color:block;font-size:20;font-weight:bold" direction="left" bgcolor="white" scrollamount="20">CHECK UR REGISTERED ACCOUNT HERE</marquee><br><br><form name="f1" method="post" action="http://localhoat:8080/WebApp/userinfo">USER NAME:<input type="text" name="userid"><br><br>PASSWORD:<input type="password" name="password"><br><br><input type="submit" name="login" value="login"><br><br></form><marquee style="color:white;font-size:20;font-weight:bold" direction="rirht" bgcolor="block" scrollamount="20">CHECK UR USER PROFILE HERE</marquee><br><br><centere>USER PROFILE</CENTRE><BR><BR><form name="f2">USER NAME:<input type="text" name="userid1"><br><br>PASSWORD:<input type="password" name="password1"><br><br><input type="button" value="check profile" onClick="profile(f1,f2)"><textarea name="ta" cols=40 rows=15></textarea></form></body></html>
98
![Page 99: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/99.jpg)
b. UserInfo.java :
import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;public class UserInfo extends HttpServlet{public void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException{System.out.println("Inside depost method--->");PrintWriter out=res.getWriter();res.setContentType("text/html");String user=req.getParameter("userid");String psw=req.getParameter("password");System.out.println("user name is-->"+user);String user1=req.getParameter("userid1");String password1=req.getParameter("password1");String user2=req.getParameter("userid2");String password2=req.getParameter("password2");String ua=getInitParameter("user1");String pa=getInitParameter("pass1");String ub=getInitParameter("user2");String pb=getInitParameter("pass2");String uc=getInitParameter("user3");String pc=getInitParameter("pass3");String ud=getInitParameter("user4");String pd=getInitParameter("pass4");String ue=getInitParameter("user5");String pe=getInitParameter("pass5");if((user.equals(ua)&&psw.equals(pa))||(user.equals(ub)&&psw.equals(pb))||(user.equals(uc)&&psw.equals(pc))||(user.equals(ud)&&psw.equals(pd))||(user.equals(ue)&&psw.equals(pe))){ out.println("<html><head>");out.println("<script language=\"javascript\">");out.println("alert(\"u have reegistered Successfully\")");out.println("</script></head><body>");}else{out.println("<html><head>");out.println("<script language=\"javascript\">");out.println("alert(\"not a valid user\")");out.println("</script></head><body>");out.println("<a href=\"./Register.html\">Back</body></html>");} } }
99
![Page 100: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/100.jpg)
c. Web.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app>
<servlet>
<servlet-name>request info</servlet-name>
<servlet-class>UserInfo</servlet-class>
</servlet>
<init-param>
<param-name>user1</param-name>
<param-value>reddy1</param-value>
</init-param>
<init-param>
<param-name>pass1</param-name>
<param-value>dilip1</param-value>
</init-param>
<init-param>
<param-name>user2</param-name>
<param-value>reddy2</param-value>
</init-param>
<init-param>
<param-name>pass2</param-name>
<param-value>dilip2</param-value>
</init-param>
<init-param>
<param-name>user3</param-name>
<param-value>reddy3</param-value>
100
![Page 101: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/101.jpg)
</init-param>
<init-param>
<param-name>pass3</param-name>
<param-value>dilip3</param-value>
</init-param>
<init-param>
<param-name>user4</param-name>
<param-value>reddy4</param-value>
</init-param>
<init-param>
<param-name>pass4</param-name>
<param-value>dilip4</param-value>
</init-param>
<init-param>
<param-name>user5</param-name>
<param-value>reddy5</param-value>
</init-param>
<init-param>
<param-name>pass5</param-name>
<param-value>dilip5</param-value>
</init-param>
<servlet-mapping>
<servlet-name>request info</servlet-name>
<url-pattern>/requestinfo</url-pattern>
</servlet-mapping>
</web-app>
101
![Page 102: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/102.jpg)
JavaServerPages (JSP)
Examples:
Welcome.jsp
<html>
<body bgcolor=khaki>
<table border=5 align="center">
<tr><th class="title">
<% out.println("wel come to jsp page");
%></tr>
</table>
</body>
</html>
102
![Page 103: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/103.jpg)
6. Redo previous task using JSP by converting the static webpages of assignments 2 into dynamic webpages. Create a database with user information and books information. The books catalogure be dynamically loaded from the database. Follow MVC architecture while doing the website.
Home.jsp:
<html>
<center>
<b><a href="main.jsp">REGISTRATION</a><br>
<br><b><a href="login.jsp">Login</a>
</center>
</html>
103
![Page 104: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/104.jpg)
Main.jsp:
<html>
<head><title></title></head>
<script>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.lang.*" %>
function check(f1)
{
var err="";
if(f1.uname.value=="") { alert("\nEnter User Name"); f1.uname.focus(); return false;}
else if(f1.pwd.value=="") { alert("\nEnter Password"); f1.pwd.focus(); return false; }
else if(!isNaN(f1.uname.value.charAt(0)))
{ alert("\nUserName should start with a letter"); f1.uname.focus(); return false; }
}
</script>
<body>
<table>
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String database = "jdbc:odbc:abc";
Connection con = DriverManager.getConnection(database,"","");
Statement smt=con.createStatement();
String uname=request.getParameter("uname");
System.out.println(uname);
String pwd=request.getParameter("pwd");
System.out.println(pwd);
104
![Page 105: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/105.jpg)
if(uname!=null)
{
try
{
smt.execute("insert into users values('"+uname+"','"+pwd+"')");
}
catch(Exception e) { out.println("Error"); }
response.sendRedirect("home.jsp");
}
String query="select * from users";
smt.execute(query);
ResultSet rs=smt.getResultSet();
con.close();
%>
<form name=fr action="main.jsp" onsubmit="return check(document.fr)" method="post">
<center>
User Name<input type=text name="uname"/>
Password<input type=password name="pwd"/><br><br><br>
<input type=submit value="Enter"></input>
</center>
</form>
</body>
105
![Page 106: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/106.jpg)
Catalog.jsp:
<html>
<%@ page import="java.sql.*" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.io.*" %>
<body>
<form name="myfrm" action="cart.jsp" method="get">
<center>
<table align=center border=1>
<input type=hidden name=uname value='<%out.print(request.getParameter("uname"));%>'></input>
<tr><th></th><th>Title</th><th>Author</th></tr>
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String database = "jdbc:odbc:abc";
Connection con = DriverManager.getConnection(database,"","");
Statement smt=con.createStatement();
smt.execute("select * from catalog");
ResultSet rs=smt.getResultSet();
int i=1;
while(rs.next())
{
out.println("<tr><td><input type=checkbox name=b"+i+"></td><td>");
out.println(rs.getString("title")+"</td><td>"+rs.getString("author")+"</td></tr>");
i=i+1;
}
out.println("<input type=hidden name=rc value='"+i+"'></input>");
%>
106
![Page 107: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/107.jpg)
<tr><td colspan=3 align=center><input type=submit value="Add to Cart"></input></td></tr>
</table>
</body>
</html>
Create two table 1.users.mdb in that fields are username and password
2.catalog.mdb in the fields are title and author
Variable name: JAVA_HOME
Variable value::C:\Program Files\Java\jdk1.5.0_05
Cart.jsp:
<html>
<head>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.lang.*" %>
<script>
function submitted()
{
alert("Thank you for purchasing..");
document.location="catalog.jsp";
}
</script>
<body>
<table align=center border=1>
<tr><td colspan=4>User Name:
107
![Page 108: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/108.jpg)
<%
String uname=request.getParameter("uname");
out.println("<b>"+uname+"</b></tr><tr><th colspan=4>List of selected Books</th></tr>");
String filename = "c:\\users.mdb";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String database = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=";
database+= filename.trim() + ";DriverID=22;READONLY=false}";
Connection con = DriverManager.getConnection(database,"","");
Statement smt=con.createStatement();
smt.execute("select * from catalog");
ResultSet rs=smt.getResultSet();
int i=1;
boolean f=false;
while(rs.next())
{
String val=request.getParameter("b"+i);
if(val!=null)
{
String title=rs.getString("title");
String author=rs.getString("author");
out.println("<tr><td>"+title+"</td><td>"+author+"</td></tr>");
f=true;
}
i=i+1;
}
if(!f) out.println("<tr><td colspan=4>No books selected...</td></tr>");
%>
108
![Page 109: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/109.jpg)
<tr><td colspan=4 align=center><input type=button value="Ok" onclick="submitted();"></input></td></tr>
</body>
</html>
OUTPUT for JSP program(Data base programs):
Click on registration we will get
109
![Page 110: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/110.jpg)
Enter username and password and click on enter.. automatically it navigates to HOME PAGE.. the vales of username and password stores in db it stores in DB.
After that click on LOGIN page u get this window
Enter userid and password click on login ,it navigates to
110
![Page 111: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/111.jpg)
Select the book titles (ie check the box corresponding title) and click on addcart.
Click on Ok we will get confirmation ie
111
![Page 112: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/112.jpg)
7) Implement the “Hello World” program using jsp struts Framework.
LINK PROGRAM------------------------<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %><%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<html:html locale="true"><head><title><bean:message key="welcome.title"/></title><html:base/></head><body bgcolor="white">
<logic:notPresent name="org.apache.struts.action.MESSAGE" scope="application"> <font color="red"> ERROR: Application resources not loaded -- check servlet container logs for error messages. </font></logic:notPresent>
<h3><bean:message key="welcome.heading"/></h3><p><bean:message key="welcome.message"/></p>
</body></html:html>
HELLO WORLD:---------------------<%@page contentType="text/html"%><%@page pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body><link rel="stylesheet" href="struts.css" type="text/css"> <center><h1>HELLO WORLD</h1></center> <br/> <a href="./Welcome.do">Struts Welcome Page</a> </body> </html>
112
![Page 113: Web Technologies- Final Manual](https://reader033.vdocuments.us/reader033/viewer/2022061105/543ee363afaf9f215e8b4e16/html5/thumbnails/113.jpg)
113