Lab Programes Only

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-size:20;
color:seablue;
border-bottom:thin solid red;

WEB Technology LAB
.button
border:thin solid red;
width:100px;
marquee
color:red;
font-size:12;
font-weight:bold;
h1
float:right;
border-bottom:thin solid green;
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>

<style>
body
</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
</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>
<br><li><a href="userprofile.html" target="right">User

Profile</a></li><br>
WEB Technology LAB
<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>

<style>
body
</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>
<tr><td>New User? <a href="reg.html"><b>Sign-up</b></a>

Here</td></tr>
WEB Technology LAB
<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>

<style>
body
</style>
</head>
<body>
<fieldset id="fs">
<legend id="lg" align=center><u>Regestration Form</u></legend>
<font face="verdana">
<form>
<br><tr><td><b>First Name :<b></td><td><input type=text name=fn

<tr><td><b>Last Name :</b></td><td><input type=text name=ln

<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

<tr><td><b>Address :</b></td><td><textarea rows=5 cols=20

class="textbox"></textarea></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


</table>
</form>
</font>
</fieldset>
</body>
</html>
WEB Technology LAB
WEB Technology LAB
User_Profile.html
<html>
<head>

<style>
body
</style>
</head>
<body>
<fieldset id="fs">
<legend id="lg" align=center><u>User Profile</u></legend>
<form>


<tr><td><b>Email_id :</b></td><td><input type=text name=email

<tr><td><b>Branch :</b></td><td><select name=branch

class="textbox"><option value="cse"><b>CSE</b></option><option
WEB Technology LAB

class="textbox"></textarea></td></tr>

</table>
</form>
</font>
</body>
</html>
WEB Technology LAB
WEB Technology LAB
Payment.html
<html>
<head>

<style>
body
</style></head>
<body>
<fieldset id="fs">
<legend id="lg" align=center><u>Payment By Credit Card</u></legend>
<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="button"></td><td><input type=Reset name=reset value=Reset
</font></body></html>
WEB Technology LAB
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>
<head>

Documents\06521A0564\06521A0564\Validation\style.css" type="text/css"
rel=stylesheet>
<style>
body
</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");

WEB Technology LAB
document.fn.pass.focus();
return false;
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()">
<br><tr><td><b>Username :</b></td><td><input type=text name=un



<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>
WEB Technology LAB
</font></fieldset>
</body></html>
WEB Technology LAB
WEB Technology LAB
WEB Technology LAB
Registration:-
<html>
<head>

rel=stylesheet>
<style>
body
</style>
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=="")
{
WEB Technology LAB
alert("Please Enter Your Last Name");
document.fn.ln.focus();
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();
WEB Technology LAB
return false;
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)

WEB Technology LAB
alert("Please Check Your Retype-Password");
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>
WEB Technology LAB


<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
<tr><td><b>Roll No :</b></td><td><input type=text name=roll


class="textbox" name=add></textarea></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


</table>
</form>
</font>
WEB Technology LAB
</fieldset>
</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:-
WEB Technology LAB
<html>
<head>

rel=stylesheet>
<style>
body
</style>
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");

WEB Technology LAB
document.fn.ln.focus();
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;
}
WEB Technology LAB
else
return true;
</script>
</head>
<body>
<fieldset id="fs">
<legend id="lg" align=center><u>User Profile</u></legend>


<tr><td><b>Email_id :</b></td><td><input type=text name=email

<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>
WEB Technology LAB
<option value="civil"><b>CIVIL</b></option>
</select></td></tr>

class="textbox" name=add></textarea></td></tr>

</table>
</form>
</font>
</body>
</html>
WEB Technology LAB
WEB Technology LAB
WEB Technology LAB
WEB Technology LAB
WEB Technology LAB
Payment:-
WEB Technology LAB
<html>
<head>

rel=stylesheet>
<style>
body
</style>
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");

WEB Technology LAB
document.fn.holdname.focus();
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>
<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="button"></td><td><input type=Reset name=reset value=Reset
</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:

WEB Technology LAB
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,
“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;
WEB Technology LAB
import java.awt.*;
import java.awt.event.*;
public class Colors extends Canvas {
transient private Color color;
private boolean rectangular;
public Colors() {
addMouseListener(new MouseAdapter() {
public void MousePressed(MouseEvent me) {
change();
}
});
rectangular = false;
setSize(200,100);
change();
}
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());
WEB Technology LAB
int b = (int) (255 * Math.random());

return new Color(r,g,b);
}
public void paint(Graphics g) {
Dimension d = getSize();
int h = d.height;
int w = d.width;
g.setColor(color);
if(rectangular) {
g.fillRect(0,0,w-1,h-1);
}
else {
g.fillOval(0,0,w-1,h-1);
}
}
}
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
WEB Technology LAB
information (user id, password, credit card number) would be stored in

web.xml. Each user should have a separate Shopping Cart.
PROCEDURE FOR INSTALLING TOMCAT 5.5.28:-

WEB Technology LAB
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/apache-
tomcat-5.5.28.exe
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
WEB Technology LAB
click on “I Agree” button else the installation process will be

terminated.
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
WEB Technology LAB
application. For example I have created a Folder named “Date” which

contains a “date.html” file in it as shown below.
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>
WEB Technology LAB
</head>
<font face=verdana>
<form name=f1 method=post action="http://localhost:8080/Nandan/user">
<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>
WEB Technology LAB
<servlet>
<servlet-name>user</servlet-name>
<servlet-class>user</servlet-class>
</servlet>
<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.*;
WEB Technology LAB
import javax.servlet.*;
import javax.servlet.http.*;
public class GetCookieServlet extends HttpServlet
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.*;
WEB Technology LAB
import javax.servlet.*;
import javax.servlet.http.*;
public class user extends HttpServlet

{
public void doPost(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException
{
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.
WEB Technology LAB
2. Open command prompt.

3. Go to
C:\>cd C:\Program Files\Apache Software Foundation\Tomcat

5.5\webapps\Nandan\WEB-INF\classes
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…
WEB Technology LAB
4.
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

WEB Technology LAB
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.
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…

WEB Technology LAB
10. Now go the
http://localhost:8080/Nandanjsp/user.html
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>
<font face=verdana>
WEB Technology LAB
<form name=f1 method=post action="insert.jsp">

<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
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");
WEB Technology LAB
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();
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>
<%
WEB Technology LAB
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()){%>
<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

Lab Programes Only

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Programes Only

Uploaded by

Copyright:

Available Formats

WEB Technology LAB

border:1px solid black;

border:thin solid #E8E8E8;

border-bottom:thin solid red;

border:thin solid red;

border-bottom:thin solid green;

<frame name="top" src="top.html">

<frame name="left" src="home.html">

<frame name="right" src="home1.html">

<link href="C:\Documents and Settings\Nandan\My

<marquee behavior="alternate">4th Year 1st Semester----WEB

<h1>Online Book Store

<link href="C:\Documents and Settings\Nandan\My

<marquee direction="up" behavior="alternate">Welcome To Web

<fieldset id="fs"><legend id="lg" align=center>Menu</legend>

<font face="verdana" size=2>

<li><a href="userlogin.html" target="right">Registration And User

<br><li><a href="userprofile.html" target="right">User

<br><li><a href="books.html" target="right">Books

<br><li><a href="shopping.html" target="right">Shopping

<br><li><a href="payment.html" target="right">Payment By Credit

<br><li><a href="order.html" target="right">Order

<link href="C:\Documents and Settings\Nandan\My

<legend id="lg" align=center><u>User Login</u></legend>

<br><tr><td><b>Username :</b></td><td><input type=text name=un

<tr><td><b>Password :</b></td><td><input type=password

<tr><td><input type=submit name=submit value=Submit

<tr><td>New User? <a href="reg.html"><b>Sign-up</b></a>

<tr><td><a href="home1.html"><font face="verdana" size=2>Go to

<link href="C:\Documents and Settings\Nandan\My

<legend id="lg" align=center><u>Regestration Form</u></legend>

<br><tr><td><b>First Name :<b></td><td><input type=text name=fn

<tr><td><b>Last Name :</b></td><td><input type=text name=ln

<tr><td><b>Gender :</b></td><td><b>Male<input type=radio

<tr><td><b>Branch :</b></td><td><select name=branch><option

<tr><td><b>Roll No :</b></td><td><input type=text name=roll

<tr><td><b>Address :</b></td><td><textarea rows=5 cols=20

<tr><td><b>Password :</b></td><td><input type=password

<tr><td><b>Retype Password :</b></td><td><input type=password

<tr><td><b>Date Of Birth :</b></td><td><input type=text name=dob

<tr><td><input type=submit name=submit value=Submit

<link href="C:\Documents and Settings\Nandan\My

<legend id="lg" align=center><u>User Profile</u></legend>

<br><tr><td><b>First Name :<b></td><td><input type=text name=fn

<tr><td><b>Last Name :</b></td><td><input type=text name=ln

<tr><td><b>Email_id :</b></td><td><input type=text name=email

<tr><td><b>Branch :</b></td><td><select name=branch

<tr><td><b>Address :</b></td><td><textarea rows=5 cols=20

<tr><td><input type=submit name=submit value=Submit

<link href="C:\Documents and Settings\Nandan\My

<legend id="lg" align=center><u>Payment By Credit Card</u></legend>

<tr><td><b>Name of the Bank :</b></td><td><input type=text

<tr><td><b>Credit Card Holder Name :</b></td><td><input type=text

<tr><td><b>Pincard Number :</b></td><td><input type=text name=pin

<tr><td><input type=submit name=submit value=Submit

<link href="C:\Documents and Settings\Nandan\My

alert("Please Enter your Username");

alert("Please Enter Your Password");

<legend id="lg" align=center><u>User Login</u></legend>

<form name=fn method=post onsubmit="return fd()">

<br><tr><td><b>Username :</b></td><td><input type=text name=un

<tr><td><b>Password :</b></td><td><input type=password

<tr><td><input type=submit name=submit value=Submit

<tr><td>New User? <a href="reg.html"><b>Sign-up</b></a>