You are on page 1of 96

WEB Technology LAB

1. Develop static pages (using only HTML) of an online book store. The pages should resemble: www.amazon.com. The web site should consist of the following pages. • • • • • • • Home Page Registration and User login User Profile Page Books catalog Shopping Cart Payment By credit card Order Conformation

WEB Technology LAB

Style.css <style type="text/css"> body { background-color:skyblue; } .textbox { font-family:verdana; border:1px solid black; color:orange; } #fs { float=center; width:600px; border:thin solid #E8E8E8; } #lg { font-family:verdana; font-size:20;

WEB Technology LAB

color:seablue; border-bottom:thin solid red; } .button { border:thin solid red; width:100px; } marquee { font-family:verdana; color:red; font-size:12; font-weight:bold; } h1 { float:right; border-bottom:thin solid green; font-family:verdana; color:green; font-weight:bold; } </style>

WEB Technology LAB

Frame.html <html> <head> <frameset rows="105,*"> <frame name="top" src="top.html"> <frameset cols="25,75"> <frame name="left" src="home.html"> <frame name="right" src="home1.html"> </frameset> </head>

WEB Technology LAB

WEB Technology LAB

Top.html <html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet>

</head>

<body> <marquee behavior="alternate">4th Year 1st Semester----WEB TECHNOLOGY LAB----NANDAN </marquee>

<h1>Online Book Store </h1> </body> </html>

WEB Technology LAB

WEB Technology LAB

Home1.html <html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> </head> <body> <marquee direction="up" behavior="alternate">Welcome To Web Technology Lab ---- HTML created by using Frames & CSS</marquee> </body> </html>

WEB Technology LAB

WEB Technology LAB

Home.html <html> <head> <style> body { background-color:lightgreen; } legend { font-family:verdana; } </style> </head> <body> <fieldset id="fs"><legend id="lg" align=center>Menu</legend> <font face="verdana" size=2> <table> <tr><td> <ol> <li><a href="userlogin.html" target="right">Registration And User Login<br></a></li>

WEB Technology LAB

<br><li><a href="userprofile.html" target="right">User Profile</a></li><br> <br><li><a href="books.html" target="right">Books Catalog</a></li><br> <br><li><a href="shopping.html" target="right">Shopping Cart</a></li><br> <br><li><a href="payment.html" target="right">Payment By Credit Card</a></li><br> <br><li><a href="order.html" target="right">Order Conformation</a></li><br> </ol> </td></tr> </table> </font> </fieldset> </body> </html>

WEB Technology LAB

User_Login.html <html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>User Login</u></legend> <font face=verdana> <table align=center> <br><tr><td><b>Username :</b></td><td><input type=text name=un class="textbox"></td></tr> <tr><td><b>Password :</b></td><td><input type=password name=pass class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr>

WEB Technology LAB

<tr><td>New User? <a href="reg.html"><b>Sign-up</b></a> Here</td></tr> <tr><td><a href="home1.html"><font face="verdana" size=2>Go to HOME page</font></a></td></tr> </table> </font> </fieldset> </body> </html>

WEB Technology LAB

WEB Technology LAB

Registration.html <html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>Regestration Form</u></legend> <font face="verdana"> <form> <table align=center> <br><tr><td><b>First Name :<b></td><td><input type=text name=fn class="textbox"></td></tr> <tr><td><b>Last Name :</b></td><td><input type=text name=ln class="textbox"></td></tr> <tr><td><b>Gender :</b></td><td><b>Male<input type=radio name=gender value=male></td><td><b>Female<b><input type=radio name=gender value=female></td></tr>

WEB Technology LAB

<tr><td><b>Branch :</b></td><td><select name=branch><option value="cse"><b>CSE</b></option><option value="it"><b>IT</b></option><option value="eee"><b>EEE</b></option><option value="ece"><b>ECE</b></option><option value="mech"><b>MECH</b></option><option value="civil"><b>CIVIL</b></option></select></td></tr> <tr><td><b>Roll No :</b></td><td><input type=text name=roll class="textbox"></td></tr> <tr><td><b>Address :</b></td><td><textarea rows=5 cols=20 class="textbox"></textarea></td></tr> <tr><td><b>Password :</b></td><td><input type=password name=pass class="textbox"></td></tr> <tr><td><b>Retype Password :</b></td><td><input type=password name=rpass class="textbox"></td></tr> <tr><td><b>Date Of Birth :</b></td><td><input type=text name=dob class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr> </table> </form> </font> </fieldset> </body> </html>

WEB Technology LAB

WEB Technology LAB

User_Profile.html <html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>User Profile</u></legend> <font face="verdana"> <form> <table align=center> <br><tr><td><b>First Name :<b></td><td><input type=text name=fn class="textbox"></td></tr> <tr><td><b>Last Name :</b></td><td><input type=text name=ln class="textbox"></td></tr> <tr><td><b>Email_id :</b></td><td><input type=text name=email class="textbox"></td></tr> <tr><td><b>Branch :</b></td><td><select name=branch class="textbox"><option value="cse"><b>CSE</b></option><option

WEB Technology LAB

value="it"><b>IT</b></option><option value="eee"><b>EEE</b></option><option value="ece"><b>ECE</b></option><option value="mech"><b>MECH</b></option><option value="civil"><b>CIVIL</b></option></select></td></tr> <tr><td><b>Address :</b></td><td><textarea rows=5 cols=20 class="textbox"></textarea></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr> </table> </form> </font> </body> </html>

WEB Technology LAB

Payment.html

WEB Technology LAB

<html> <head> <link href="C:\Documents and Settings\Nandan\My Documents\Frames\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style></head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>Payment By Credit Card</u></legend> <font face="verdana"> <table align=center> <tr><td><b>Name of the Bank :</b></td><td><input type=text name=notb class="textbox"></td></tr> <tr><td><b>Credit Card Holder Name :</b></td><td><input type=text name=holdname class="textbox"></td></tr> <tr><td><b>Pincard Number :</b></td><td><input type=text name=pin class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=Reset name=reset value=Reset class="button"></td></tr> </font></body></html>

WEB Technology LAB

2. Validate the Registration, User Login, User Profile and Payment by Credit Card pages using JavaScript.

WEB Technology LAB

User Login:<html>

WEB Technology LAB

<head> <link href="C:\Documents and Settings\Nandan\My Documents\06521A0564\06521A0564\Validation\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> <script language="javascript"> function fd() { if(document.fn.un.value=="") { alert("Please Enter your Username"); document.fn.un.focus(); return false; } else if(document.fn.pass.value=="") { alert("Please Enter Your Password"); document.fn.pass.focus(); return false;

WEB Technology LAB

} else return true; } </script> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>User Login</u></legend> <font face=verdana> <form name=fn method=post onsubmit="return fd()"> <table align=center> <br><tr><td><b>Username :</b></td><td><input type=text name=un class="textbox"></td></tr> <tr><td><b>Password :</b></td><td><input type=password name=pass class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr> <tr><td>New User? <a href="reg.html"><b>Sign-up</b></a> Here</td></tr> <tr><td><a href="home1.html"><font face="verdana" size=2>Go to HOME page</font></a></td></tr> </table></form> </font></fieldset> </body></html>

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

Registration:<html>

WEB Technology LAB

<head> <link href="C:\Documents and Settings\Nandan\My Documents\06521A0564\06521A0564\Validation\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> <script language="javascript">

function fd() { if(document.fn.fn.value=="") { alert("Please Enter Your First Name"); document.fn.fn.focus(); return false; } else if(document.fn.ln.value=="") { alert("Please Enter Your Last Name"); document.fn.ln.focus();

WEB Technology LAB

return false; } else if(document.fn.gender[0].checked==false && document.fn.gender[1].checked==false) { alert("Please Determine Your Gender"); document.fn.gender.focus(); return false; } else if(document.fn.branch.value=="") { alert("Please Choose Your Branch"); document.fn.branch.focus(); return false; } else if(document.fn.roll.value=="") { alert("Please Enter Your Roll Number"); document.fn.roll.focus(); return false; }

WEB Technology LAB

else if(document.fn.add.value=="") { alert("Please Enter Your Address"); document.fn.add.focus(); return false; } else if(document.fn.pass.value=="") { alert("Please Enter Your Password"); document.fn.pass.focus(); return false; } else if(document.fn.rpass.value=="") { alert("Please Enter Your Retype-Password"); document.fn.rpass.focus(); return false; } else if(document.fn.rpass.value!= document.fn.pass.value) { alert("Please Check Your Retype-Password");

WEB Technology LAB

document.fn.rpass.focus(); return false; }

else if(document.fn.dob.value=="") { alert("Please Enter Your Date Of Birth"); document.fn.dob.focus(); return false; } else return true; } </script> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>Regestration Form</u></legend> <font face="verdana"> <form name=fn method=post onsubmit="return fd()"> <table align=center> <br><tr><td><b>First Name :<b></td><td><input type=text name=fn class="textbox"></td></tr>

WEB Technology LAB

<tr><td><b>Last Name :</b></td><td><input type=text name=ln class="textbox"></td></tr> <tr><td><b>Gender :</b></td><td><b>Male<input type=radio name=gender value=male></td><td><b>Female<b><input type=radio name=gender value=female></td></tr> <tr><td><b>Branch :</b></td><td><select name=branch class="textbox"><option value=""><b>Select Branch</b></option><option value="cse"><b>CSE</b></option><option value="it"><b>IT</b></option><option value="eee"><b>EEE</b></option><option value="ece"><b>ECE</b></option><option value="mech"><b>MECH</b></option><option value="civil"><b>CIVIL</b></option></select></td></tr> <tr><td><b>Roll No :</b></td><td><input type=text name=roll class="textbox"></td></tr> <tr><td><b>Address :</b></td><td><textarea rows=5 cols=20 class="textbox" name=add></textarea></td></tr> <tr><td><b>Password :</b></td><td><input type=password name=pass class="textbox"></td></tr> <tr><td><b>Retype Password :</b></td><td><input type=password name=rpass class="textbox"></td></tr> <tr><td><b>Date Of Birth :</b></td><td><input type=text name=dob class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr> </table> </form> </font> </fieldset>

WEB Technology LAB

</body> </html>

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

User Profile:<html>

WEB Technology LAB

<head> <link href="C:\Documents and Settings\Nandan\My Documents\06521A0564\06521A0564\Validation\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> <script language="javascript">

function fd() { if(document.fn.fn.value=="") { alert("Please Enter Your First Name"); document.fn.fn.focus(); return false; } else if(document.fn.ln.value=="") { alert("Please Enter Your Last Name"); document.fn.ln.focus();

WEB Technology LAB

return false; } else if(document.fn.email.value=="") { alert("Please Enter Your E-mail ID"); document.fn.email.focus(); return false; } else if(document.fn.branch.value=="") { alert("Please Choose Your Branch"); document.fn.branch.focus(); return false; } else if(document.fn.add.value=="") { alert("Please Enter Your Address"); document.fn.add.focus(); return false; } else

WEB Technology LAB

return true; } </script> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>User Profile</u></legend> <font face="verdana"> <form name=fn method=post onsubmit="return fd()"> <table align=center> <br><tr><td><b>First Name :<b></td><td><input type=text name=fn class="textbox"></td></tr> <tr><td><b>Last Name :</b></td><td><input type=text name=ln class="textbox"></td></tr> <tr><td><b>Email_id :</b></td><td><input type=text name=email class="textbox"></td></tr> <tr><td><b>Branch :</b></td><td> <select name=branch class="textbox">

<option value=""><b>Select Branch</b></option> <option value="cse"><b>CSE</b></option> <option value="it"><b>IT</b></option> <option value="eee"><b>EEE</b></option> <option value="ece"><b>ECE</b></option> <option value="mech"><b>MECH</b></option> <option value="civil"><b>CIVIL</b></option>

WEB Technology LAB

</select></td></tr> <tr><td><b>Address :</b></td><td><textarea rows=5 cols=20 class="textbox" name=add></textarea></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=reset name=reset value=Reset class="button"></td></tr> </table> </form> </font> </body> </html>

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

Payment:<html>

WEB Technology LAB

<head> <link href="C:\Documents and Settings\Nandan\My Documents\06521A0564\06521A0564\Validation\style.css" type="text/css" rel=stylesheet> <style> body { background-color:skyblue; } </style> <script language="javascript">

function fd() { if(document.fn.notb.value=="") { alert("Please Enter The Name Of The Bank"); document.fn.notb.focus(); return false; } else if(document.fn.holdname.value=="") { alert("Please Enter Credit Card Holder Name"); document.fn.holdname.focus();

WEB Technology LAB

return false; } else if(document.fn.pin.value=="") { alert("Please Enter Pincard Number"); document.fn.pin.focus(); return false; } else return true; } </script> </head> <body> <fieldset id="fs"> <legend id="lg" align=center><u>Payment By Credit Card</u></legend> <font face="verdana"> <form name=fn method=post onsubmit="return fd()"> <table align=center> <tr><td><b>Name of the Bank :</b></td><td><input type=text name=notb class="textbox"></td></tr> <tr><td><b>Credit Card Holder Name :</b></td><td><input type=text name=holdname class="textbox"></td></tr>

WEB Technology LAB

<tr><td><b>Pincard Number :</b></td><td><input type=text name=pin class="textbox"></td></tr> <tr><td><input type=submit name=submit value=Submit class="button"></td><td><input type=Reset name=reset value=Reset class="button"></td></tr> </font> </body> </html>

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB

3. Create and save an XML document at the server, which contain 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.

WEB Technology LAB

users.xml:<?xml version="1.0"?>

WEB Technology LAB

<users> <user1> <uid>001</uid> <uname>Nandan Singh Sengar</uname> <dob>14/01/1988</dob> </user1> <user2> <uid>002</uid> <uname>Rakesh Rawat</uname> <dob>23/06/1988</dob> </user2> <user3> <uid>003</uid> <uname>Rakesh Yadav</uname> <dob>02/08/1988</dob> </user3> <user4> <uid>004</uid> <uname>Pavan</uname> <dob>10/10/1988</dob> </user4> <user5> <uid>005</uid> <uname>Sandy</uname> <dob>22/04/1988</dob> </user5> <user6> <uid>006</uid> <uname>Lala</uname> <dob>29/09/1988</dob> </user6>

WEB Technology LAB

<user7> <uid>007</uid> <uname>Sankar</uname> <dob>22/02/1988</dob> </user7> <user8> <uid>008</uid> <uname>Satish</uname> <dob>05/11/1988</dob> </user8> <user9> <uid>009</uid> <uname>Jobi</uname> <dob>11/07/1988</dob> </user9> <user10> <uid>010</uid> <uname>Rahul</uname> <dob>17/12/1988</dob> </user10> </users>

xml.html:<html>

WEB Technology LAB

<head> <script type="text/javascript"> function fd() { var xmldoc=new ActiveXObject("Microsoft.XMLDOM"); xmldoc.load("users.xml"); var root=xmldoc.documentElement; for(i=0;i<root.childNodes.length;i++) { var t2=document.f1.t1.value; var child=root.childNodes.item(i); var a=child.firstChild; var b=a.parentNode; if(t2==child.nodeName || t2==a.text) { for(i=0;i<b.childNodes.length;i++) { var c=b.childNodes.item(i); document.writeln("<li>"+c.nodeName+"-->"+c.text+"</li><br>"); } } } } </script> </head> <body bgcolor=silver> <form name=f1 onSubmit="fd()"> <font face="verdana" size=3> <table align=left> <tr><td>Enter the User id : </td><td><input type=text name=t1></td></tr><br> <tr><td><input type=submit name=submit value=Submit></td><td><input type=reset name=reset value=Reset></td></tr><br>

WEB Technology LAB

</table> </font> </form> </body> </html>

WEB Technology LAB

WEB Technology LAB

4. Create a Simple Bean which displays the color of the clicked object. The created object also includes rectangle.

WEB Technology LAB

Steps To Create A Simple Bean:The steps involved are: 1. Create a directory for the new bean and save it in, “C:\bdk\demo\sunw\demo\colors” 2. Create the java source file and save it as,

WEB Technology LAB

“Colors.java” 3. Compile the source file as, “C:\bdk\demo\sunw\demo\colors>javac Colors.java” 4. Create a manifest file with the name as “colors.mft” and write its code as, Name: sunw/demo/colors/Colors.class Java-Bean: True The “Java-Bean: True” statement must immediately follow the class file that is a bean and no space between “Name” and “:”, “Java-Bean” and “:” is allowed. Save it in “C:\bdk\demo” because manifest files in bdk are saved here always. 5. Generation or Creation of JAR file is done next for which we will give the command in DOS as, “jar cfm C:\bdk\jars\colors.jar C:\bdk\demo\colors.mft C:\bdk\demo\sunw\demo\colors\*.class” A jar file is generated in “C:\bdk\jars” named as “colors.jar” 6. Start the BDK as, Go to “C:\bdk\beanbox” and type “run” in the command prompt. 7. Test the newly created Java Bean.

Colors.java:package sunw.demo.colors; import java.awt.*; import java.awt.event.*; public class Colors extends Canvas {

WEB Technology LAB

transient private Color color; private boolean rectangular; public Colors() { addMouseListener(new MouseAdapter() { public void MousePressed(MouseEvent me) { change(); } }); rectangular = false; setSize(200,100); change(); } public boolean getRectangular() { return rectangular; } public void setRectangular(boolean flag) { this.rectangular = flag; repaint(); } public void change() { color = randomColor(); repaint(); } private Color randomColor() { int r = (int) (255 * Math.random()); int g = (int) (255 * Math.random()); int b = (int) (255 * Math.random()); return new Color(r,g,b); }

WEB Technology LAB

public void paint(Graphics g) { Dimension d = getSize(); int h = d.height; int w = d.width; g.setColor(color); if(rectangular) { g.fillRect(0,0,w-1,h-1); } else { g.fillOval(0,0,w-1,h-1); } } } Colors.mft:Name: E:/beans/demo/sunw/demo/colors/Colors.class Java-Bean: True

Output:-

WEB Technology LAB

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

WEB Technology LAB

PROCEDURE FOR INSTALLING TOMCAT 5.5.28:1. Open the Internet explorer and go to the below link to download the TOMCAT 5.5.28 on to your system. http://datadispensory.com/apache/tomcat/tomcat-5/v5.5.28/bin/apachetomcat-5.5.28.exe

WEB Technology LAB

2. After downloading the software onto your system; double click on the icon of the recently downloaded TOMCAT 5.5.28. A Wizard appears which will guide you throughout your installation process.

3. When “Next” button is clicked, a EULA appears that is nothing but the End User License agreement, hence the installation continuous if you click on “I Agree” button else the installation process will be terminated.

WEB Technology LAB

4. After pressing “I Agree” button you will be asked to choose which features of Apache Tomcat you want to install. Accordingly it will also show total space required by the software on the hard disk. For Full installation it requires 12.8MB.

5. After choosing the components you required the setup ask for the installation path i.e. the folder where you want to install the TOMCAT 5.5.28.

WEB Technology LAB

6. After defining the path or the folder where you want to install the software, setup ask you to configure the software by asking information such as “Connector port” Admin “username” and “password”.

7. At last the software will also ask for the installation path of a J2SE 5.0 JRE i.e. nothing but the Java Virtual Machine.

WEB Technology LAB

8. After defining the path for the Java Virtual Machine you have to click on “Install” button to install the software. On clicking the “Install” button the installation process begins.

9. When the installation process gets completed it ask you to click on “Finish” button to complete the installation process. Simultaneously it as you whether you want to run the “TOMCAT” now and also whether you want to see the “Readme” text document.

WEB Technology LAB

10. If you click on to “Run Apache Tomcat”, the Apache service manager starts the Apache Tomcat.

HOW TO RUN YOUR WEB APPLICATION VIA TOMCAT SERVER:1. Go to the directory where you have installed the TOMCAT software, and then open the “webapps” folder, you will be able to see many more folders in webapps folder. Now whenever you want to create a web application of yours own just create a new folder for your application and name it, it should contain all the contents of your application. For example I have created a Folder named “Date” which contains a “date.html” file in it as shown below.

WEB Technology LAB

2. Now open the internet explorer and give the URL address as : http://localhost:8080/Date/date.html

3. The webpage gets opened up as shown below,

Cookie.html :- (C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan) <html> <head> </head> <body bgcolor=silver> <font face=verdana> <form name=f1 method=post action="http://localhost:8080/Nandan/user"> <table align=center>

WEB Technology LAB

<tr><td>User Id :</td><td><input type=text name=uid></td></tr> <tr><td>Password :</td><td><input type=password name=pwd></td></tr> <tr><td>Credit Card Number :</td><td><input type=text name=ccnumber></td></tr> <tr><td><input type=submit name=submit value=Submit></td><td><input type=reset name=reset value=Reset></td></tr> </table> </form> </font> </body> </html>

web.xml:- (C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan\WEB-INF) <web-app> <servlet> <servlet-name>user</servlet-name> <servlet-class>user</servlet-class> </servlet>

WEB Technology LAB

<servlet-mapping> <servlet-name>user</servlet-name> <url-pattern>/user</url-pattern> </servlet-mapping> <servlet> <servlet-name>GetCookieServlet</servlet-name> <servlet-class>GetCookieServlet</servlet-class> </servlet>

<servlet-mapping> <servlet-name>GetCookieServlet</servlet-name> <url-pattern>/GetCookieServlet</url-pattern> </servlet-mapping>

</web-app> GetCookieServlet.java :-(C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ Nandan\WEB-INF\classes) import java.io.*; import javax.servlet.*; import javax.servlet.http.*;

public class GetCookieServlet extends HttpServlet {

WEB Technology LAB

public void doGet(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException { Cookie[] cookies=req.getCookies(); PrintWriter pw=res.getWriter(); for(int i=0;i<cookies.length;i++) { String name=cookies[i].getName(); String value=cookies[i].getValue(); pw.println("name="+name+";"+"value="+value); } pw.close(); } }

user.java:- (C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan\WEB-INF\classes) import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class user extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws ServletException,IOException {

WEB Technology LAB

res.setContentType("text/html"); String userid=req.getParameter("uid"); String password=req.getParameter("pwd"); String credit=req.getParameter("ccnumber"); Cookie c1=new Cookie("uid",userid); Cookie c2=new Cookie("pwd",password); Cookie c3=new Cookie("ccnumber",credit); res.addCookie(c1); res.addCookie(c2); res.addCookie(c3); PrintWriter out=res.getWriter(); out.println("USERID...."+userid); out.println("<br>"); out.println("PASSWORD...."+password); out.println("<br>"); out.println("CREDIT CARD NUMBER...."+credit); } }

COMPILATION PROCEDURE:1. After finishing writing the java files in “classes named folder do the following. 2. Open command prompt. 3. Go to C:\>cd C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan\WEB-INF\classes

WEB Technology LAB

4. Now set the class path as, C:\>Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan\WEB-INF\classes>set classpath=%classpath%; C:\>cd C:\Program Files\Apache Software Foundation\Tomcat 5.5\common\lib\servlet-api.jar; 5. Now compile the java files with “javac” code i.e., C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\Nandan\WEB-INF\classes>javac *.java 6. .class files are generated.

WEB Technology LAB

When the URL address is changed from, http://localhost:8080/Nandan/user To, http://localhost:8080/Nandan/GetCookieServlet we get the output as,

WEB Technology LAB

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

WEB Technology LAB

Procedure To Run The Program:1. First go to the StartControl PanelAdministrative ToolsDouble Click On Data Sources (ODBC) Add Button.

WEB Technology LAB

2. Then Select the drive for which you want to set up a Data Source. Choose the name as “Oracle in OraHome92” and click Finish Button.

3. Then Choose Your Own Data Source Name and Press The “Test Connection” Button To Check Whether The Connection is Working Or Not…

4.

WEB Technology LAB

5. To Test the Connection You Have to give The “Username” And “Password” Of our Database and Then Click On “OK” Button to check Whether the Username and Password Written Are Correct or Not and Also to Check Whether Connection is Working Or Not.

6. If the Connection is Working Well The Message Will Appear as

7. Next go on clicking “OK” until Data Sources (ODBC) gets closed…. 8. Now Go To The Path, C:\Program Files\Apache Software Foundation\Tomcat 5.5\bin\tomcat5w.exe And STOP The Server.

WEB Technology LAB

9. Then go to the path…. C:\Program Files\Apache Software Foundation\Tomcat 5.5\bin\tomcat5.exe And run the server as shown below…

10.

Now go the

http://localhost:8080/Nandanjsp/user.html

WEB Technology LAB

Enter the required data http://localhost:8080/Nandanjsp/insert.jsp appears saying that 1 row is inserted… 11. Now change the URL link to http://localhost:8080/Nandanjsp/reterive.jsp And View the content in the table.

user.html:<html> <head> </head> <body bgcolor=silver> <font face=verdana> <form name=f1 method=post action="insert.jsp"> <table align=center> <tr><td>Firstname :</td><td><input type=text name="fn"></td></tr> <tr><td>Lastname :</td><td><input type=text name="ln"></td></tr> <tr><td>Branch :</td><td><select name=branch><option value="default">Select Branch</option><option value="cse">CSE</option><option value="it">IT</option><option value="eee">EEE</option><option value="ece">ECE</option><option

WEB Technology LAB

value="mech">MECH</option><option value="civil">CIVIL</option></select></td></tr> <tr><td>Address :</td><td><textarea rows=5 cols=20 name="add"></textarea></td></tr> <tr><td>Email Id:</td><td><input type=text name="email"></td></tr> <tr><td><input type=submit value=Submit></td><td><input type=reset value=Reset></td></tr> </table> </form> </font> </body> </html>

insert.jsp:<%@page import="java.sql.*"%> <html> <body> <% String firstname=request.getParameter("fn"); String lastname=request.getParameter("ln"); String branch=request.getParameter("branch"); String address=request.getParameter("add"); String email=request.getParameter("email"); Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con=DriverManager.getConnection("jdbc:odbc:Nandan1","scott","tiger"); Statement st=con.createStatement();

WEB Technology LAB

int n=st.executeUpdate("insert into userinfo values('"+firstname+"','"+lastname+"','"+branch+"','"+address+"','"+email +"')"); %> <b><%=n%>row inserted</b> </body> </html>

retrieve.jsp:<%@page import="java.sql.*"%> <html> <body> <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con=DriverManager.getConnection("jdbc:odbc:Nandan1","scott","tiger"); Statement st=con.createStatement(); ResultSet rs=st.executeQuery("select *from userinfo"); %> <table> <%while(rs.next()){%>

WEB Technology LAB

<tr> <td><%=rs.getString("firstname")%></td> <td><%=rs.getString("lastname")%></td> <td><%=rs.getString("branch")%></td> <td><%=rs.getString("address")%></td> <td><%=rs.getString("email")%></td> </tr> <%}%> </table> <%con.close();%> </body> </html>

WEB Technology LAB

WEB Technology LAB

WEB Technology LAB