Vous êtes sur la page 1sur 63

1. ONLINE BOOK STORE Aim:To 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

Source Code:Home page.html


<!-- Home page for the Online bookstore --> <html> <head> <title>www.amazon.com</title> </head> <body background="E:\Html\online book store\a.jpg"> <h1 style="font-size:50pt;font-family:TimesNewRoman;font-type:bold;color:blue"> <center>ONLINE BOOK STORE</center> </h1> <marquee direction="left" style="font-size:12pt;font-type:bold; font-family:TimesNewRoman;color:red">Welcome to Online Book Store</marquee> <h3 align="center"><br><br><br><br><br><br><br> <a href="E:\Html\online book store\register.html"><li type="circle">Registration/login</a> <a href="E:\Html\online book store\profile.html"><li type="circle">UserProfilePage</a> <a href="E:\Html\online book store\cat1.html"><li type="circle">Books Catalog</a> </h3> </body> </html>

WEB TECHNOLOGIES LAB MANUAL

Register.html
<!-- Registration form and User Login --> <html> <head> <title>Registration/Login</title> </head> <frameset cols="670,*"> <frame src="E:\Html\online book store\registration.html"> <frame src="E:\Html\online book store\login.html"> <noframes> <p>ur browser dont supports framers</p> </noframes> </html>

Profile.html
<!-- Profile --> <html> <head> <title>Login Check</title> </head> <body bgcolor="cyan"> <center> <h1>Login Check</h1><br><br><br><br><br> <h3>Login_id:<input type="text" name="userid" size="25"><br></h3> <h3>Password:<input type="password" name="password" size="25"></h3><br> <a href="E:\Html\online book store\reg2.html"><h3>Signin</h3></a> <a href="E:\Html\online book store\homepage.html">Home</a><br><br> <img src="E:\Html\online book store\b.jpg" height="250" width="250"> </center> </body> </html>

Cat1.html
<!-- Books Catalog --> <html> <head> <title>Books Catalog</title> </head> <body> <h2 align="center" style="color:red;font-size:36">Available Books</h2>

WEB TECHNOLOGIES LAB MANUAL

<marquee direction="left" style="font- size:12pt;fonttype:bold; fontfamily:TimesNewRoman;color:green">Welcome to books catalog</marquee> <h3 style="color:blue"> Java 2: The Complete Reference, Fifth Edition by Herbert Schildt.<br><br><br> A Practitioners Approach to Software Engineering by RogersPressman.<br><br><br> Advanced Java Programming by Experienced Academicians.<br><br><br> Data base System Concepts, Silberschatz, Korth, McGraw hill, IV edition. <br> <br>< br> The Unified Modeling Language User Guide by Grady Booch,James Rumbaugh and Ivar Jacobson. </h3><br><br> <center><a href="E:\Html\online book store\homepage.html">Home</a></center> </body> </html>

Registration.html
<html> <head> </head> <body bgcolor="yellow"> <h2 align="center" style="font-size:40;font-family:Times New Roman;font- type:bold; color:red"> <br><br>Don't u registered yet now!<br> <br><br>Registration is easy<br> <br><br><a href="E:\Html\online book store\reg1.html" target="_blank">Register</a> </h2> </body> </html>

Login.html
<! Login Check --> <html> <head> <title>Login Check</title> <script type="text/javascript"> </script> </head> <body bgcolor="cyan"> <center> <h1>Login Check</h1><br><br><br><br><br> <h3>Login_id:<input type="text" name="userid" size="25"><br></h3> <h3>Password:<input type="password" name="password" size="25"></h3><br> <a href="E:\Html\online book store\catalog.html" target="_blank"><h3>Signin</h3></a><br> <img src="E:\Html\online book store\b.jpg"> </center> </body>
WEB TECHNOLOGIES LAB MANUAL

</html>

Reg2.html
<!-- Registration Form --> <html> <head> <title>Registration</title> </head> <body> <h2 align="center">See Your Profile</h2> <form method="post" action=" "> <p> <strong>Name:</strong> <input name="name" type="text" size="25"> </p><br> <p> <strong>Date of birth:</strong> <input name="dob" type="text" size="20"> </p> <p> <strong>Gender:</strong> <select name="gender"> <option>Male <option>Female </select> </p> <p> <strong>Town/Village:</strong> <input name="place" type="text" size="25"> </p> <p> <strong>State:</strong> <select name="state"> <option>AndhraPradesh <option>Tamilnadu <option>Karnataka <option>Other </select> </p> <p> <strong>Nationality:</strong> <select name="Nationality"> <option>Indian <option>Other </select> </p> <p> <strong>Email Address:</strong> <input name="email" type="text" size="50">
WEB TECHNOLOGIES LAB MANUAL

</p> <p> <strong>Phone:</strong> <input name="phone" type="text" size="20"> </p> </form><br> <center><a href="E:\Html\online book store\homepage.html">Home</a></center> </body> </html>

Reg1.html
<!-- Registration Form --> <html> <head> <title>Registration</title> </head> <body> <h2 align="center">Registration Form</h2> <form method="post" action=" "> <p> <strong>Name:</strong> <input name="name" type="text" size="25"> </p><br> <p> <strong>Date of birth:</strong> <input name="dob" type="text" size="20"> </p> <p> <strong>Gender:</strong> <select name="gender"> <option>Male <option>Female </select> </p> <p> <strong>Town/Village:</strong> <input name="place" type="text" size="25"> </p> <p> <strong>State:</strong> <select name="state"> <option>AndhraPradesh <option>Tamilnadu <option>Karnataka <option>Other </select> </p>
WEB TECHNOLOGIES LAB MANUAL

<p> <strong>Nationality:</strong> <select name="Nationality"> <option>Indian <option>Other </select> </p> <p> <strong>Email Address:</strong> <input name="email" type="text" size="50"> </p> <p> <strong>Phone:</strong> <input name="phone" type="text" size="20"> </p> <a href="E:\Html\online book store\success1.html">Register</a> <input type="reset" value="Reset"> </form> </body> </html>

Success1.html
<!-- Success message --> <html> <strong>Registration Successful! </html>

Catalog.html
<!-- Books Catalog --> <html> <head> <title>Books Catalog</title> </head> <body> <h2 align="center" style="color:red;font-size:36">Welcome User</h2> <marquee direction="left" style="font-size:12pt;font-type:bold; fontfamily:TimesNewRoman;color:green">Welcome to books catalog</marquee> <h3 style="color:blue"> Java 2: The Complete Reference, Fifth Edition by Herbert Schildt.<br><br><br> A Practitioners Approach to Software Engineering by Rogers Pressman.<br><br><br> Advanced Java Programming by Experienced Academicians.<br><br><br> Data base System Concepts, Silberschatz, Korth, McGraw hill, IV edition.<br><br><br> The Unified Modeling Language User Guide by Grady Booch,James Rumbaugh and Ivar Jacobson.
WEB TECHNOLOGIES LAB MANUAL

</h3><br><br> <h2> You want to buy any book <a href="E:\Html\online book store\cart.html">Click here</a> </h2> </body> </html>

Cart.html
<!-- Shopping cart --> <html> <head> <title>Shopping Cart</title> </head> <body> <h3 style="color:green"> Java 2: The Complete Reference, Fifth Edition by Herbert Schildt.<br><br> <center>Cost: $250<br> <input type="button" value="select"></center><br><br> A Practitioners Approach to Software Engineering by Rogers Pressman.<br><br><br> <center>Cost: $250<br> <input type="button" value="select"></center><br><br> Advanced Java Programming by Experienced Academicians.<br><br><br> <center>Cost: $250<br> <input type="button" value="select"></center><br><br> Data base System Concepts, Silberschatz, Korth, McGraw hill, IV edition.<br><br><br> <center>Cost: $250<br> <input type="button" value="select"></center><br><br> The Unified Modeling Language User Guide by Grady Booch,James Rumbaugh and Ivar Jacobson.<br><br> <center>Cost: $250<br> <input type="button" value="select"></center><br> </h3><br> <center><strong><a href="E:\Html\online book store\payment.html">BUY</strong> </body> </html>

Payment.html
<!-- Payment By Credit card --> <html> <head> <title>Payment</title> </head> <body> <h2 align="center" style="color:red;font-size:36">Welcome User</h2><br><br><br> <form method="post" action="">
WEB TECHNOLOGIES LAB MANUAL

<strong><h2>CREDIT CARD NO :</strong> <input name="number" type="text" size="25"><br><br> <strong>VALID FILL</strong> (dd/mm/yy)<strong>:</strong> <input name="Date" type="text" size="25"><br><br> <strong>CREDIT CARD HOLDER NAME:</strong> <input name="name" type="text" size="25"><br><br> </h2><br><br> <center><strong><a href="E:\Html\onlinebookstore\confirm.html">Submit</a></strong></center> </form> </body> </html>

Confirm.html
<!-- Order Conformation --> <html> <head> <title>Order Confirmation</title> </head> <body bgcolor="yellow" style="color:red"> Congrats!<br> Order Confirmed<br><br><br> </body> </html>

Output:Homepage

WEB TECHNOLOGIES LAB MANUAL

Registration/Login

Registration Form

WEB TECHNOLOGIES LAB MANUAL

Success Message

Books Catalog

WEB TECHNOLOGIES LAB MANUAL

10

Shopping Cart

Payment By credit card

WEB TECHNOLOGIES LAB MANUAL

11

Order Confirmation

Login Check to view Profile

User Profile
WEB TECHNOLOGIES LAB MANUAL

12

Books Catalog

Result:Static pages (using only HTML) of an online Book store are developed. The web site www.amazon.com consist all the required pages mentioned in the aim.

WEB TECHNOLOGIES LAB MANUAL

13

2.VALIDATION OF WEB PAGES BY JAVASCRIPT Aim:To validate the Registration, user login, user profile and payment by credit card pages using JavaScript.

Source Code:Homepage.html
<!-- Home page for the Online bookstore --> <html> <head> <title>Home Page</title> </head> <body background="E:\Html\olbs_jscript\a.jpg"> <h1 style="font-size:45pt;font-family:TimesNewRoman;font-type:bold;color:blue"> <center>VALIDATION BY JAVASCRIPT</center> </h1> <marquee direction="left" style="font-size:12pt;font-type:bold;fontfamily:TimesNewRoman;color:red">Welcome for Validation Checking by JavaScript</marquee> <center> <h3><br><br><br><br><br><br><br> <table border="0"> <tr><a href="E:\Html\olbs_jscript\registration.html"><li type="circle">RegistrationForm</a></tr> <tr><a href="E:\Html\olbs_jscript\login.html"><li type="circle">login</a></tr> <tr><a href="E:\Html\olbs_jscript\login.html"><li type="circle">User Profile Page</a></tr> <tr><a href="E:\Html\olbs_jscript\cat1.html"><li type="circle">Books Catalog</a></tr> <tr><a href="E:\Html\olbs_jscript\payment.html"><li type="circle">CreditCard</a></tr> </table> </h3></center> </body> </html>

WEB TECHNOLOGIES LAB MANUAL

14

Registration.html
<html> <head> </head> <body bgcolor="yellow"> <h2 align="center" style="font-size:40;font-family:Times New Roman;fonttype:bold;color:red"> <br><br>Don't u registered yet now!<br> <br><br>Registration is easy<br> <br><br><a href="E:\Html\olbs_jscript\reg1.html">Register</a> <center><a href="E:\Html\olbs_jscript\homepage.html">Home</a></center> </h2> </body> </html>

Login.html
<! Login Check --> <html> <head> <title>Login Check</title> <script language="javascript"> function validate() { var valid=0; var method=document.forms[0].method; var action=document.forms[0].action; var user=document.forms[0].elements[0].value; var pass=document.forms[0].elements[1].value; if(user=="pavan") { if(pass=="qiscet") { valid=1; } else alert("Wrong Password!!"); } else alert("Wrong Username or Password!"); if(valid==1) alert("validation successful \n Welcome Pavan"); } </script> </head> <body bgcolor="cyan"> <center><h1>Login Check</h1><br><hr><br><br> <form method="post">
WEB TECHNOLOGIES LAB MANUAL

15

Login_id:<input type="text" name="userid" size="25"><br><br> Password:<input type="password" name="pass" size="25"><br><br> <input type="submit" value="Login" onClick="validate()"> </form> <h3><a href="E:\Html\olbs_jscript\homepage.html">Home</a></h3> <img src="E:\Html\olbs_jscript\b.jpg"></center> </body> </html>

Cat1.html
<!-- Books Catalog --> <html> <head> <title>Books Catalog</title> </head> <body> <h2 align="center" style="color:red;font-size:36">Available Books</h2> <marquee direction="left" style="font-size:12pt;font-type:bold;fontfamily:TimesNewRoman;color:green">Welcome to books catalog</marquee> <h3 style="color:blue"> Java 2: The Complete Reference, Fifth Edition by Herbert Schildt.<br><br><br> A Practitioners Approach to Software Engineering by Rogers Pressman.<br><br><br> Advanced Java Programming by Experienced Academicians.<br><br><br> Data base System Concepts, Silberschatz, Korth, McGraw hill, IV edition.<br><br><br> The Unified Modeling Language User Guide by Grady Booch,James Rumbaugh and Ivar Jacobson. </h3><br><br> <center><a href="E:\Html\olbs_jscript\homepage.html">Home</a></center> </body> </html>

Payment.html
<!-- Payment By Credit card --> <html> <head> <title>Payment</title> <script language="javascript"> function validate() { var valid=0; var method=document.forms[0].method; var action=document.forms[0].action; var number=document.forms[0].elements[0].value; var date=document.forms[0].elements[1].value; var name=document.forms[0].elements[2].value; if(number=="05491A0538")
WEB TECHNOLOGIES LAB MANUAL

16

{ if(name=="pavan") { valid=1; } else alert("Holder Name Invalid!"); } else alert("Invalid Credit Card Number"); if(valid==1) alert("validation successful"); } </script> </head> <body> <h2 align="center" style="color:red;font-size:36">Welcome User</h2><br><br><br> <form method="post" action=""> <strong><h2>CREDIT CARD NO :</strong> <input name="number" type="text" size="25"><br><br> <strong>VALID FILL</strong> (dd/mm/yy)<strong>:</strong> <input name="Date" type="text" size="25"><br><br> <strong>CREDIT CARD HOLDER NAME:</strong> <input name="name" type="text" size="25"><br><br> </h2><br><br> <center><strong><input type="submit" value="Submit" onClick="validate()"></strong></center> <br><center><strong><a href="E:\Html\olbs_jscript\homepage.html">Home</a></strong></center> </form> </body> </html>

Reg1.html
<!-- Registration Form --> <html> <head> <title>Registration</title> <script language="javascript"> function validate() { var valid=0; var method=document.forms[0].method; var action=document.forms[0].action; var name=document.forms[0].elements[0].value; var dob=document.forms[0].elements[1].value; var place=document.forms[0].elements[3].value; var email=document.forms[0].elements[6].value;
WEB TECHNOLOGIES LAB MANUAL

17

var phone=document.forms[0].elements[7].value; if(name.length!=0) { if(dob.length!=0) { if(place.length!=0) { if(email.length!=0) { if(phone.length!=0) alert("Registration Sucessful!"); else alert("Enter phone number"); } else alert("Enter email"); } else alert("Enter Town/Village Name"); } else alert("Enter Date of Birth"); } else alert("Enter Name"); } </script> </head> <body> <h2 align="center">Registration Form</h2> <form method="post" action=""> <p> <strong>Name:</strong> <input name="name" type="text" size="25"> </p><br> <p> <strong>Date of birth:</strong> <input name="dob" type="text" size="20"> </p> <p> <strong>Gender:</strong> <select name="gender"> <option>Male <option>Female </select> </p> <p> <strong>Town/Village:</strong> <input name="place" type="text" size="25"> </p>
WEB TECHNOLOGIES LAB MANUAL

18

<p> <strong>State:</strong> <select name="state"> <option>AndhraPradesh <option>Tamilnadu <option>Karnataka <option>Other </select> </p> <p> <strong>Nationality:</strong> <select name="Nationality"> <option>Indian <option>Other </select> </p> <p> <strong>Email Address:</strong> <input name="email" type="text" size="50"> </p> <p> <strong>Phone:</strong> <input name="phone" type="text" size="20"> </p> <input type="submit" value="Register" onClick="validate()"> <input type="reset" value="Reset"> </form> <h3><a href="E:\Html\olbs_jscript\registration.html">Back</a></h3> <h3><a href="E:\Html\olbs_jscript\homepage.html">Home</a></h3> </body> </html>

Output:Home Page

WEB TECHNOLOGIES LAB MANUAL

19

Registration

Registration Form (Data of Birth is empty)

WEB TECHNOLOGIES LAB MANUAL

20

Registration Form (Valid one)

WEB TECHNOLOGIES LAB MANUAL

21

Login Check (wrong user name)

WEB TECHNOLOGIES LAB MANUAL

22

Login Check (Valid one)

Books Catalog

WEB TECHNOLOGIES LAB MANUAL

23

Payment by credit card (wrong credit card number)

Payment by credit card (Valid one)

Result:The Registration, user login, user profile and payment by credit card pages are successfully validated using JavaScript.
WEB TECHNOLOGIES LAB MANUAL

24

3.RETRIVING THE USER INFORMATION FROM THE XML DOCUMENT Aim:To create and save an XML document at the server, which contains 10 users information and to write a program, which takes User Id as input and returns the user details by taking the user information from the XML document.

Source Code:data.xml
<?xml version="1.0"?> <data> <user1> <username> <firstname>Pavan Kumar</firstname> <lastname>Kota</lastname> </username> <userid>143</userid> <branch>Computer Science and Enggineering</branch> <email>kota.pavankumar@yahoo.co.in</email> </user1> <user2> <username> <firstname>abc1</firstname> <lastname>K</lastname> </username> <userid>123</userid> <branch>Computer Science and Enggineering</branch> <email>abc1@yahoo.co.in</email> </user2> <user3> <username> <firstname>abc2</firstname> <lastname>K</lastname> </username> <userid>234</userid> <branch>Computer Science and Enggineering</branch> <email>abc2@yahoo.co.in</email> </user3> <user4>
WEB TECHNOLOGIES LAB MANUAL

25

<username> <firstname>abc3</firstname> <lastname>K</lastname> </username> <userid>345</userid> <branch>Computer Science and Enggineering</branch> <email>abc3@yahoo.co.in</email> </user4> <user5> <username> <firstname>abc4</firstname> <lastname>K</lastname> </username> <userid>456</userid> <branch>Computer Science and Enggineering</branch> <email>abc4@yahoo.co.in</email> </user5> <user6> <username> <firstname>abc5</firstname> <lastname>K</lastname> </username> <userid>567</userid> <branch>Computer Science and Enggineering</branch> <email>abc5@yahoo.co.in</email> </user6> <user7> <username> <firstname>abc6</firstname> <lastname>K</lastname> </username> <userid>678</userid> <branch>Computer Science and Enggineering</branch> <email>abc6@yahoo.co.in</email> </user7> <user8> <username> <firstname>abc7</firstname> <lastname>K</lastname> </username> <userid>789</userid> <branch>Computer Science and Enggineering</branch> <email>abc7@yahoo.co.in</email> </user8> <user9> <username> <firstname>abc8</firstname> <lastname>K</lastname> </username> <userid>890</userid>
WEB TECHNOLOGIES LAB MANUAL

26

<branch>Computer Science and Enggineering</branch> <email>abc8@yahoo.co.in</email> </user9> <user10> <username> <firstname>abc9</firstname> <lastname>K</lastname> </username> <userid>901</userid> <branch>Computer Science and Enggineering</branch> <email>abc9@yahoo.co.in</email> </user10> </data>

data_retrive.html
<!-- retriving the data from the xml file --> <html> <head> <title>Retriving data from Xml doc.</title> <script type="text/javascript"> var id,i; function getUserDetails() { id=window.prompt("Enter User Id:","0"); var xmldoc; xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load("data.xml"); nodedata=xmldoc.documentElement; nodeuser=nodedata.firstChild; num=parseInt(id) for(i=0;i<10;i++) { nodename=nodeuser.firstChild; nodefirstname=nodename.firstChild; nodelastname=nodename.lastChild; nodeuserid=nodename.nextSibling; nodebranch=nodeuserid.nextSibling; nodeemail=nodeuser.lastChild; if(id==nodeuserid.firstChild.nodeValue) { outputmessage="UserName: "+nodefirstname.firstChild.nodeValue+" "+nodelastname.firstChild.nodeValue+"\nUser Id: "+nodeuserid.firstChild.nodeValue+"\nBranch: "+nodebranch.firstChild.nodeValue+"\nEmail: "+nodeemail.firstChild.nodeValue; alert(outputmessage); break;
WEB TECHNOLOGIES LAB MANUAL

27

} else { nodeuser=nodeuser.nextSibling; } } if(i==10) alert("Sorry! Wrong User Id"); } </script> </head> <body bgcolor="cyan"> <br><br><br><br><br><center><input type="button" value="get user details" onclick="getUserDetails()"></center> </body> </html>

Output:Xml document, contained 10 users information

WEB TECHNOLOGIES LAB MANUAL

28

Button which is to get user details

WEB TECHNOLOGIES LAB MANUAL

29

User Id as input (Valid Example)

Required User Details

WEB TECHNOLOGIES LAB MANUAL

30

User Id as input (Invalid Example)

Alert Message

Result:An XML document, which contains 10 users information is created and saved at the server and a program is developed, which takes User Id as input and returns the user details by taking the user information from the created XML document.

WEB TECHNOLOGIES LAB MANUAL

31

4.INSTALLING THE TOMCAT SERVER Aim:Install TOMCAT web server. Convert the static web pages of assignments 2 into dynamic web pages using servlets and cookies.

Procedure: Downloaded .exe file in the D:\soft folder is below

If you downloaded the .exe version, installation is very easy. Execute the jakarta-tomcat5.0.28 either by selecting open or double-clicking it. The following window would appear on your desktop.

Choosing the features of tomcat: You have the options to select normal, full, minimum or custom, select one of them.

WEB TECHNOLOGIES LAB MANUAL

32

Choosing the installation location: Default location would be C:\Program Files\Apache Software Foundation\Tomcat 5.0 of course you may also choose the location you want.

Choosing the port number, user name and password: Default values displayed below.

Choosing the Jvm: Default JVM would be automatically selected, if you have multiple JVMs installed on your system, provide a suitable path there.

WEB TECHNOLOGIES LAB MANUAL

33

Then you will see the following windows.

Installation completed.

WEB TECHNOLOGIES LAB MANUAL

34

Starting Tomcat

Result:Tomcat 5.0 server is installed successfully on windows platform.

WEB TECHNOLOGIES LAB MANUAL

35

5. PROCEDURE TO RUN SERVLETS


Create a servlet and compile it. Create an application folder in D:\Tomcat 5.0\webapps like D:\Tomcat 5.0\webapps \appname. Create WEB-INF folder in app-name folder. Create classes folder in WEB-INF. Place the .class files in the classes folder. Write/copy the web.xml file from D:\Tomcat 5.0\webapps\ROOT\WEB-INF and place it in D:\Tomcat 5.0\webapps\app-name\WEB-INF. Place .html files in D:\Tomcat 5.0\webapps\app-name folder if any. Start tomcat Run the application.

WEB TECHNOLOGIES LAB MANUAL

36

HELLO SERVLET Aim:To develop a servlet to display simple hello message in the browser.

Source Code:HelloServlet.java
/* First Servlet */ import javax.servlet.*; import java.io.*; public class HelloServlet extends GenericServlet { public void service(ServletRequest req,ServletResponse res) throws IOException,ServletException { res.setContentType("text/html"); PrintWriter pw=res.getWriter(); pw.println("<b><center>Hello! Welcome to Servlets</center></b>"); pw.close(); } }

Web.xml
<?xml version="1.0" ?> <web-app> <display-name>Welcome to HelloServlet</display-name> <description>Welcome to HelloServlet</description> <servlet> <servlet-name>HelloServlet</servlet-name> <servlet-class>HelloServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloServlet</servlet-name> <url-pattern>/HelloServlet</url-pattern> </servlet-mapping> </web-app>

WEB TECHNOLOGIES LAB MANUAL

37

Output:Compiling HelloServlet.java file

Starting Tomcat server

WEB TECHNOLOGIES LAB MANUAL

38

You will see the following

Sending request to server from address bar of the browser

Response to the browser

WEB TECHNOLOGIES LAB MANUAL

39

Result:A servlet to display simple hello message in the browser is created and output is displayed in the browser.

WEB TECHNOLOGIES LAB MANUAL

40

6.READING SERVLET PARAMETERS Aim:To write a servlet code to read servlet parameters and to display them in a browser.

Source Code:PostParametersServlet.java
<!-- Reading Servlet Parameters --> import java.io.*; import java.util.*; import javax.servlet.*; public class PostParametersServlet extends GenericServlet { public void service(ServletRequest request,ServletResponse response)throws ServletException, IOException { // Get print writer. PrintWriter pw = response.getWriter(); // Get enumeration of parameter names. Enumeration e = request.getParameterNames(); // Display parameter names and values. while(e.hasMoreElements()) { String pname = (String)e.nextElement(); pw.print(pname + " = "); String pvalue = request.getParameter(pname); pw.println(pvalue); } pw.close(); } }

PostParameters.html
<html> <body> <center> <form name="Form1" method="post" action="http://localhost:8080/read_param/PostParametersServlet"> <table> <tr> <td><B>Employee</td> <td><input type=textbox name="Name" size="25" value=""></td>
WEB TECHNOLOGIES LAB MANUAL

41

</tr> <tr> <td><B>Phone</td> <td><input type=textbox name="Phone" size="25" value=""></td> </tr> </table> <input type=submit value="Submit"> </body> </html>

Web.xml
<?xml version="1.0" ?> <web-app> <display-name>Welcome Reading Servlet Parameters</display-name> <description>Welcome Reading Servlet Parameters</description> <servlet> <servlet-name>PostParametersServlet</servlet-name> <servlet-class>PostParametersServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>PostParametersServlet</servlet-name> <url-pattern>/PostParametersServlet</url-pattern> </servlet-mapping> </web-app>

Output:Compiling PostParameterServlet.java file

WEB TECHNOLOGIES LAB MANUAL

42

Html file to fill servlet parameters

Result displayed in browser

Result:-

A servlet code to read servlet parameters and to display them in a browser is developed and those values are displayed in browser successfully.
WEB TECHNOLOGIES LAB MANUAL

43

HANDLING HTTP GET REQUEST AND RESPONSES Aim:To handle http get request and responses.

Source Code:ColorGetServlet.java
/* Handling http get request and responses*/ import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class ColorGetServlet extends HttpServlet { public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException { String color = request.getParameter("color"); response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println("<h2><center>Handling http GET Request and Responses</center></h2><br>"); pw.println("<B>The selected color is: "); pw.println(color); pw.close(); } }

ColorGet.html
<html> <body> <center> <form name="Form1" action="http://localhost:8080/handle_getreq/ColorGetServlet"> <B>Color:</B> <select name="color" size="1"> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> </select> <br><br> <input type=submit value="Submit"> </form> </body> </html>

WEB TECHNOLOGIES LAB MANUAL

44

Web.xml
<?xml version="1.0" ?> <web-app> <display-name>Welcome to Handling doGet</display-name> <description>Welcome to Handling doGet</description> <servlet> <servlet-name>ColorGetServlet</servlet-name> <servlet-class>ColorGetServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ColorGetServlet</servlet-name> <url-pattern>/ColorGetServlet</url-pattern> </servlet-mapping> </web-app>

OutPut:Compiling ColorGetServlet.java

Html file to select a color

WEB TECHNOLOGIES LAB MANUAL

45

Selected color displayed in browser

Result:Http get request and responses are handled and the selected color is displayed in the browser. URL is displayed in the address bar as shown in above figer.
WEB TECHNOLOGIES LAB MANUAL

46

HANDLING HTTP POST REQUEST AND RESPONSES Aim:To handle http post request and responses.

Source Code:ColorPostServlet.java
/* Handling http post request and responses */ import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class ColorPostServlet extends HttpServlet { public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException { String color = request.getParameter("color"); response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println("<h2><center>Handling http POST Request and Responses</center></h2><br>"); pw.println("<B>The selected color is: "); pw.println(color); pw.close(); } }

ColorPost.html
<html> <body> <center> <form name="Form1" method="post" action="http://localhost:8080/handle_postreq/ColorPostServlet"> <B>Color:</B> <select name="color" size="1"> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> </select> <br><br> <input type=submit value="Submit"> </form> </body> </html>
WEB TECHNOLOGIES LAB MANUAL

47

Web.xml
<?xml version="1.0" ?> <web-app> <display-name>Welcome to Handling Http Post</display-name> <description> Welcome to Handling Http Post</description> <servlet> <servlet-name>ColorPostServlet</servlet-name> <servlet-class>ColorPostServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ColorPostServlet</servlet-name> <url-pattern>/ColorPostServlet</url-pattern> </servlet-mapping> </web-app>

Output:Compiling ColorPostServlet.java

Html file to select a color

WEB TECHNOLOGIES LAB MANUAL

48

Selected color displayed in browser

Result:Http post request and responses are handled and the selected color is displayed in the browser. URL is displayed in the address bar as shown in above figer.

WEB TECHNOLOGIES LAB MANUAL

49

COOKIES Aim:To create cookies and to add name, value to created cookies and to display them in the browser.

Source Code:AddCookieServlet.java
/* Adding Cookie */ import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class AddCookieServlet extends HttpServlet { public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException { String name = request.getParameter("name"); String value = request.getParameter("value"); Cookie cookie = new Cookie(name,value); response.addCookie(cookie); response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println(name+"<B> has been set to"); pw.println(value); pw.println("<br><a href=\"http://localhost:8080/cookie_demo/AddCookie.html\">Click here</a>To recreate cookie"); pw.close(); } }

GetCookiesServlet.java
/* Getting Created Cookies */ import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.util.*; public class GetCookiesServlet extends HttpServlet {

WEB TECHNOLOGIES LAB MANUAL

50

public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException { Cookie[] cookies = request.getCookies(); response.setContentType("text/html"); PrintWriter pw = response.getWriter(); pw.println("<h2><center>Received Cookies are:</center><br>"); pw.println("<B>"); pw.println("<table border=\"1\" align=\"center\"><tr><th>Name</th><th>Value</th><th>Version</th><th>Created Date</th></tr>"); for(int i = 0; i < cookies.length; i++) { String name = cookies[i].getName(); String value = cookies[i].getValue(); int version=cookies[i].getVersion(); Date date=new Date(); pw.println("<tr><td>"+name+"</td><td>"+value+"</td><td>"+version+"</td><td>"+date+"</t r>"); } pw.close(); } }

AddCookie.html
<html> <head> <title>Cookie Demo</title> </head> <body> <h2 align="center">Do you want to add Cookie?</h2> <form method="Post" action="http://localhost:8080/cookie_demo/AddCookieServlet"> <table align="center"> <tr><td>Enter Cookie Name:</td> <td><input type=textbox name="name"></td></tr> <tr><td>Enter Cookie Value:</td> <td><input type=textbox name="value"></td></tr></table> <br><br><center><input type="submit" value="submit" name="submit"> <br><input type="reset" value="reset" name="reset"></center> </form> </body> </html>

Web.xml
WEB TECHNOLOGIES LAB MANUAL

51

<?xml version="1.0" ?> <web-app> <display-name>Welcome to Cookies</display-name> <description>Welcome to Cookies</description> <servlet> <servlet-name>AddCookieServlet</servlet-name> <servlet-class>AddCookieServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AddCookieServlet</servlet-name> <url-pattern>/AddCookieServlet</url-pattern> </servlet-mapping> <servlet> <servlet-name>GetCookiesServlet</servlet-name> <servlet-class>GetCookiesServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>GetCookiesServlet</servlet-name> <url-pattern>/GetCookiesServlet</url-pattern> </servlet-mapping> </web-app>

Output:Compiling servlet files

Html files to enter cookie name and values


WEB TECHNOLOGIES LAB MANUAL

52

To see the Created Cookies

Result:Cookies are created and name, values are added to them and are displayed in the browser.
WEB TECHNOLOGIES LAB MANUAL

53

7.HELLO JSP Aim:To create and run a simple JSP page to print hello message and system date.

Source Code:First.jsp
<%@ page import="java.util.*" %> <html> <body> <center><h2> <% out.println("Hello! This is my first JSP");%> <br> <% out.println("Created Date is:"); %> <% out.println(new Date()); %> </h2></center> </body> </html>

Procedure: Create a source code like above save with .jsp extention. Set classpath and JAVA_HOME, which is described below graphically. Create an application folder in D:\Tomcat 5.0\webapps like D:\Tomcat 5.0\webapps\HelloJsp. Place your .jsp files in created application folder. Copy the WEB-INF folder from ROOT or WEBDEV and paste it in D:\Tomcat 5.0\webapps\HelloJsp (created application folder). Start tomcat and run the application shown below.

Setting classpath and JAVA-HOME:To set classpath and JAVA-HOME follow the below steps My computerright click

WEB TECHNOLOGIES LAB MANUAL

54

System PropertiesAdvancedEnvironment Variables

Environment Variablesnewfill parameters as shown in below figureclick ok

For classpath:

For JAVA-HOME:

Press ok

WEB TECHNOLOGIES LAB MANUAL

55

Output:Starting Tomcat server

WEB TECHNOLOGIES LAB MANUAL

56

Send request from address bar like below

Output displayed in the browser

WEB TECHNOLOGIES LAB MANUAL

57

Result:A JSP page is created to display hello message and system date in the browser.

WEB TECHNOLOGIES LAB MANUAL

58

1.FILTERS Aim:To understand the chroma filters.

Source Code:<html> <head> <script type="text/javascript"> function changecolor(color) { if(color) { chroma.filters("chroma").enabled=true; chroma.filters("chroma").color=color; } else chroma.filters("chroma").enabled=false; } </script> </head> <body> <center><img id="chroma" src="C:\WINDOWS\Web\tips.gif" style="position: relative;filter:chroma" hight=50 width=100/> <form> <select onChange="changecolor(this.value)"> <option value="">none</option> <option value="#00ffff">cyan</option> <option value="#ff00ff">Magenta</option> <option value="#000000">Black</option> </select></center> </form> </body> </html>

Output:-

Result:Chroma filters are implemented and understood successfully.


WEB TECHNOLOGIES LAB MANUAL

59

2. FLIP, MASK, SHADOW AND ALPHA FILTERS Aim:To understand the flip, mask, shadow and alpha filters.

Source Code:<html> <body> <h2>Flip filters:</h2> <table border=2> <tbody> <tr> <td><h2>QISCSE</h2></td> <td style="filter:fliph"><h2>QISCSE</h2></td> </tr> <tr> <td style="filter:flipv"><h2>QISCSE</h2></td> <td style="filter:fliph flipv"><h2>QISCSE</h2></td> </tr> </tbody> </table> <center><h2>Mask Filters:</h2> <div style ="position:absolute ;filter:mask(color=blue)"><h3>QS College of Engg. & Tech.</h3></div> </center><br><br> <h2>Shadow Filters:</h2> <h1 style="position:absolute;filter:shadow(direction=180,color=red)">QISCET</h1> <br><br><center><h2>Alpha Filters:</h2> <img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" width=100 height=100> <div style="position:absolute;filter:alpha(style=2,opacity=100,finishcapacity=2)"> <img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" width=100 height=100></div> </body> </html>

WEB TECHNOLOGIES LAB MANUAL

60

Output:-

Result:Flip, mask, shadow, alpha filters are implemented and understood successfully.

WEB TECHNOLOGIES LAB MANUAL

61

3. MISCELLANEOUS, GLOW, BLUR, WAVE AND DROP SHADOW FILTERS Aim:To understand the miscellaneous, glow, blur, wave and drop shadow filters.

Source Code:<html> <body> <h2>Miscellaneous Filters:</h2> <table> <tr> <td>Normal</td> <td>Inverted</td> <td>Gray</td> <td>Xray</td> </tr> <tr> <td><img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" width=100 height=100></td> <td><img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" style="filter:invert" width=100 height=100></td> <td><img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" style="filter:gray" width=100 height=100></td> <td><img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" style="filter:xray" width=100 height=100></td> </tr> </table> <br><h2>Glow Text:</h2> <div style="position:absolute;filter:glow(color=red,strength=4)"> <h2>QISCET</h2> </div><br><br> <table> <tr> <td><br><br><h2>Normal: </h2></td><td> <div> <img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" width=100 height=100> </div></td> <td><br><h2>Blur: </h2></td> <td><div style="position:absolute;filter:blur(add=0,direction=90,strength=18)"> <img src="C:\WINDOWS\Web\Wallpaper\follow.jpg" width=100 height=100> </div><br><br><br><br></td></tr></table> <table>
WEB TECHNOLOGIES LAB MANUAL

62

<tr> <td><br><h2>Wave Filter:<br></h2></td> <td><div style="position:absolute;filter:wave(add=0,freq=1,phase=0,strength=4)"> QISCET </div></td></tr><br> <tr><td><br><h2>Drop Shadow Filter:<br></h2></td> <td><br><div style="position:absolute;filter:dropshadow(offx=10,offy=10,color=blue)"> <h1>QISCET</h1> </div> </body> </html>

Output:-

Result:The miscellaneous, glow, blur, wave and drop shadow filters are implemented and understood successfully.
WEB TECHNOLOGIES LAB MANUAL

63