Está en la página 1de 28

WEB TECHNOLOGIES

LAB MANUAL
1. Develop static pages (using Only HTML) of an online Book store.The
pages should resemble: www.amazon.com. The website should consist
the following pages.
• Home page
• Registration and User Login
• ]User Profile Page
• Books catalog
• Shopping Cart
• Payment By Credit Card
• Order Conformation

PROGRAM:

frame.html
<html>
<head>
<title>frame</title>
</head>
<frameset rows="30%,*">
<frame name="frame1" src="online.html">
<frameset cols="30%,*">
<frame name="frame2" src="list.html">
<frame name="frame3" src="i.html">
</frameset>
</html>

online.html
<html>
<head></head>
<body bgcolor="pink">
<a target="frame1">
</a>
<marquee direction="right">
<h1 align="center"><u><i><font face="algerian">ONLINE BOOK
STORE</font></i></u></h1>
</marquee>
</body>
</html>
list.html
<html>
<head></head>
<body bgcolor="#aaffbb">
<a target="frame2"></a>
<a href="reg.html" target="frame3">
<center><i><font color="red"
>REGISTRATION</font></i></center></a><br>
<a href="log.html" target="frame3">
<center><i><font color="green" >LOGIN</font></i></center></a><br>
<a href="profile.html" target="frame3">
<center><i><font color="gray"
>PROFILE</font></i></center></a><br>
<a href="bc.html" target="frame3">
<center><i>BOOKS CATALOG</i></center></a><br>
<a href="sc.html" target="frame3">
<center><i><font color="black">SHOPPING
CART</font></i></center></a><br>
<a href="pc.html" target="frame3">
<center><i><font color="brown">PAYMENT BY
CREDITCARD</font></i></center>
</a>
</body>
</html>

i.html
<html>
<head></head>
<body bgcolor="#aaccbb">
<a target="frame3"></a>
<center><img src="E:\sh\images1.jpg" height="400"
width="300"></center>
</body>
</html>

reg.html
<html>
<head></head>
<body bgcolor="#bbaa66">
<h3 align="center"><i><u>REGISTRATION</u></i></h3>
Email Id:
<input type="text" size="10"></input><br><br>
Password:
<input type="password" size="8"></input><br><br>
confirm password:
<input type="password" size="8"></input><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
<input type="submit" value="submit"></input>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="cancel"></input>
</body>
</html>

log.html
<html>
<head></head>
<body bgcolor="#aa66dd">
<h3 align="center"><i><u>LOGIN</u></i></h3><br><br><br>
Login:
<input type="text" size="10"></input><br><br>
Password:
<input type="password" size="8"></input><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="submit"></input>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="cancel"></input>
</body>
</html>

profile.html
<html>
<head></head>
<body bgcolor="#bbaacc">
<h3 align="center"><u><i>PROFILE</i></u></h3>
Name:
<input type="text" size="10"></input><br><br>
Address:
<textarea rows="4" cols="20"></textarea><br><br>
Phone No:
<input type="text" size="12" value="+91"></input><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="submit"></input>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="cancel"></input>
</body>
</html>

bc.html
<html>
<head></head>
<body bgcolor="#ddaaff">
<form>
Subject:Web Technologies<br>
<select name="wt">
<option value="w">Web Programming,Chris Bates,Rs250</option>
<option value="i">Internet And World Wide Web,Dietel,Rs450</option>
<option value="wa">Web App TEchone,Niit,Phi,Rs255</option>
</select><br>
Subject:Data Ware Housing And Data Mining<br>
<select name="dmdw">
<option value="d">Data Mining
Concepts&testing,Jiaineiham,Rs280</option><br>
<option value="i">Data Mining Introduction,Margareth
Dunham,Rs380</option><br>
<option value="dw">Data Warehousing in Real
World,Samanhory,Rs255</option><br>
</select><br>

Subject:Multimedia And Application Development<br>


<select name="Mad">
<option value="fm">Fundamentals Of
Multimedia,ZeNianli,Rs230</option>
<option value="i">Essential Action Script,Colin Moock,Rs330</option>
<option value="wa">Multimedia & Communication,Steve
health,Rs155</option>
</select><br><br>
<input type="submit" value="submit"></input>
&nbsp;&nbsp;<input type="reset" value="reset"></input>
</body>
</html>

sc.html
<html>
<head></head>
<body bgcolor="#dd66aa">
<table cellspacing="100">
<tr>
<td>
<img src="E:\sh\books1.jpg"><br>
Phychedelics<br>
knuckles<br>
Rs200
</td>
<td>
<img src="E:\sh\books2.jpg"><br>
The Capitalist World Economy<br>
Dietel<br>
Rs320</td>
</tr>
<tr>
<td>
<img src="E:\sh\books3.jpg"><br>
Algebra<br>
Jiaweiham<br>
Rs.430</td>
<td>
<img src="E:\sh\books4.jpg"><br>
Technical Analysis<br>
Arun k pujjari<br>
Rs.500</td>
</tr>
</table>
</body>
</html>

pc.html
<html>
<head></head>
<body bgcolor="#ddccff">
<form>
<table align="center" cellpadding="1" cellspacing="1"
width="30%"<tr><td>card no:</td>
<td ><input type="text" name="cno" size="16"></input><br></td></tr>
<tr><td> Card Type:</td>
<td><input type="text" size="10"></input><br></td></tr>
<tr>
<td>Cvv No:</td>
<td><input type="text" size="3"></input><br></td></tr>
<tr><td>Amount:</td>
<td><input type="text" size="8"></input><br></td></tr>
<tr><td>Valid Date:</td>
<td><input type="text" size="2"></input>/
<input type="text" size="4"></input><br></td></tr></table>
<br><center>
<a href="s.html"><strong>SUBMIT</strong></a>
&nbsp;&nbsp;&nbsp;<input type="reset" value="reset"></input>
</center>
</form>
</body>
</html>

s.html
<html>
<head></head>
<body bgcolor="#aabbcc">
<p>
Order is confirmed. with in two days you will collect ur books.<br>
Thank You for ur registering in our Online book store</p>
</body>
</html>
3. Create and save an XML document at the server , which contains Ten
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 .

EMPLOYEE.XML
<emps><emp>
<empno>1</empno>
<ename>a</ename>
<dob>12-1-80</dob>
<phno>8514248211</phno>
<email>satheesh_pani@yahoo.co.in</email>
</emp>
<emp>
<empno>2</empno>
<ename>b</ename>
<dob>12-1-80</dob>
<phno>8514248211</phno>
<email>satheesh_pani@yahoo.co.in</email>
</emp>

<emp>
<empno>3</empno>
<ename>c</ename>
<dob>21-323</dob>
<phno>9989643186</phno>
<email>teh_12@yahoo.co.in</email>
</emp>
<emp>
<empno>4</empno>
<ename>d</ename>
<dob>80</dob>
<phno>100</phno>
<email>pani@gmail.com</email>
</emp>
<emp>
<empno>5</empno>
<ename>e</ename>
<dob>1-82-98</dob>
<phno>343276</phno>
<email>shiva_nh317@yahoo.co.in</email>
</emp>
<emp>
<empno>6</empno>
<ename>f</ename>
<dob>45-09</dob>
<phno>238922</phno>
<email>greed@gmail.com</email>
</emp>
<emp>
<empno>7</empno>
<ename>i</ename>
<dob>12</dob>
<phno>48211</phno>
<email>dd@hgjgjyahoo.co.in</email>
</emp>
<emp>
<empno>8</empno>
<ename>p</ename>
<dob>11-80</dob>
<phno>5142411</phno>
<email>hhghpani@yahoo.co.in</email>
</emp>

</emps>

EMP.HTML

<html><head>
<script src="loadxmldoc.js">
</script></head>
<body>
<script>
xmldoc=loadxmldoc("employee.xml");
x=xmldoc.getElementsByTagName("empno");
var empno=prompt("enter employee no");
for(i=0;i<x.length;i++)
{
if(x[i].childNodes[0].nodeValue==empno)
break;
}
if(i<x.length)
{
document.writeln("Name:<b>"+xmldoc.getElementsByTagName("enam
e")[i].childNodes[0].nodeValue+"</b></br>");
document.writeln("dob:<b>"+xmldoc.getElementsByTagName("dob")
[i].childNodes[0].nodeValue+"</b></br>");
document.writeln("phno:<b>"+xmldoc.getElementsByTagName("phno")
[i].childNodes[0].nodeValue+"</b></br>");
document.writeln("email:<b>"+xmldoc.getElementsByTagName("email"
)[i].childNodes[0].nodeValue+"</b></br>");

else
{

alert("eno doesnot found");


}
</script>
</body>
</html>

LOADXMLDOC.js

function loadxmldoc(dname)
{
xmldoc=new ActiveXObject("microsoft.XMLDOM");
xmldoc.load(dname);
return(xmldoc);
}
4. Bean Assignments
a.Create a JavaBean which gives the exchange value of INR(Indian
Rupees)
into equivalent American/Canadian/Austarlian Dollor value.

package Exchange;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;

public class Exchange extends Canvas


{
private static final double USA_DOLLOR=40.0;
private static final double CAN_DOLLOR=32.0;
private static final double AUS_DOLLOR=28.0;
private double indianRupees=0.0;

public Exchange()
{
setBackground(Color.WHITE);
}
public double getrIndianRupees()
{
return indianRupees;
}
this.indianRupees=indianRupees;
repaint();
}
public void setIndianRupees(dounle indianRupees)
{
public Dimension getMinimumSize()
{
return newDimension(180,72);
}
public void paint()
{
Font f=new Font("Dialog",Font.BOLD,12);
g.setFont(F);
g.drawString("USDOLLORS",7,22);
g.drawString("CADOLLORS",7,42);
g.drawString("AUDOLLORS",7,62);
displayExchange(g);
}
public void displayExchange(Graphics g)
{
g.drawString("USEXCHANGE",100,22);
g.drawString("CAEXCHANGE",100,42);
g.drawString("AUEXCHANGE",100,62);
}
private String getUSExchange()
{
double usvalue=indianRupees|USA_DOLLOR;
usvalue=Math.round(usvalue);
return new Double(usvalue).toString();
}
private String getCAExchange()
{
double cavalue=indianRupees|CAN_DOLLOR;
cavalue=Math.round(cavalue);
return new Double(cavalue).toString();
}
private String getAUExchange()
{
double auvalue=indianRupees|AUS_DOLLOR;
auvalue=Math.round(auvalue);
return new Double(auvalue).toString();
}
}

package Exchange;
import java.beans.PropertyDescriptor;
import java.beans.SimpleBeanInfo;
import count;
public class ExchangeBeanInfo extends SimpleBeanInfo
{
public PropertyDescriptor[ ] getPropertyDescriptor()
{
try
{
PropertyDescriptor ExchangegetProperty=new
PropertyDescriptor("indianrupees",Exchange.class);
return new PropertyDescriptor[ ]
{
exchange property;
}
}
catch(Exception e)
{
return null;
}
}
}
4.Bean Assignments

b.Create a simple Bean with a label, which is the count of number of


clicks.
Then create a BeanInfo class such that only the "count" property is visible
in the
Property Window.

PROGRAM:

package count;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphiocs;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

public class Count extends Canvas


{
private int count;
public Count()
{
addMouseListener(new MOuseAdapter())
{
public void mousePressed(MOuseEvent me)
{
setCount(++count);
}
}
setBAckground(Color.White);
}
public int getCount()
{
return count;
}
public void setCount(int count)
{
this.count=count;
}
public Dimension getMinimumSize()
{
return new Dimension(90,35);
}
public void paint(Grapgics g)
{
Font f=new Font("Dialog",FONT.BOLD,12);
g.setFont(f);
g.drawString("count",7,22);
}
}

package count;
import java.beans.PropertyDescriptor;
import java.beans.SimpleBaenInfo;
public class CountBeanInfo extends SimpleBeanInfo
{
public PropertyDescriptor[ ] getPropertyDescriptors()
{
try
{
PropertyDescriptor countProperty=new
PropertyDescriptor("count",count.class);
return new PropertyDescriptor[ ]
{
count Property;
}
}
catch(Exception e)
{
return null;
}
}
}
4.Bean Assignments
d.Craete two beans Traffic Light(Implemented as a Label with only three
background colours-Red,Green,Yellow) and Automobile(Implemented as
a TestBox
which states its state/movement). The state of the Automobile should
depend on
the following Light Transition Table.

Light Transition Table


Red--->Yellow Ready
Yellow--->Green Move
Green--->Red Stopped

PROGRAM:

package automobile;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.PropertyChangeEvent;
import java.awt.event.PropertyChangeListener;

public class Automobile extends Canvas implements


PropertyChangeListener
{
private String transition=" ";
public static final int RED=1;
public static final int ORANGE=2;
public static final int GREEN=3;
public Automobile()
{
setBackGround(Color.WHITE);
}
public String getTransition()
{
return transiton;
}
public void setTransition(String transition)
{
this.transition=transition;
}
public synchriniozed void addTransitionStateChange()
{

repaint();
}
public synchriniozed void removeTransitionStateChange()
{

repaint();
}
public Dimension getMinimumSize()
{
return new Dimension(220,35);
}
public void paint(Graphics g)
{
Font f=new Font("Dialog",FONT.BOLD,12);
g.setFont(f);
g.drawString("count",7,22);
}
private String getMobileState()
{
if("GreenToRed".equals(transition))
{
return "stopped";
}
else if("RedtoOrange".equals(transition))
{
return "ready";
}
else if("OrangeToGreen".equals(transition))
{
return "move";
}
else
{
return "Invalid Transition";
}
}
public void property change(PropertyChangeEvent event)
{
int oldValue=((Integer)event.getOldValue()).intValue();
int newValue=((Integer)event.getNewValue()).intValue();
if(oldValue==RED && newValue==ORANGE)
{
transition="RedToOrange";
}
else if(oldValue==ORANGE && newValue==GREEN)
{
transition="OrangeToGreen";
}
else if(oldValue==GREEN && newValue==RED)
{
transition="GreenToRed";
}
repaint();
}
}

package trafficlight;
import java.beans.PropertyEditorSupport
{
private int signa;;
public void setValue(Object o)
{
signal=((Integer)o).intVAlue();
firePropertyChange();
}
public Object getValue()
{
return new Integer(signal);
}
public String getAsText()
{
switch(signal)
{
case TrafficLight.RED:
return TrafficLight.COLOR_RED;
case TrafficLight.ORANGE:
return TrafficLight.COLOR_ORANGE;
case TrafficLight.GREEN:
return TrafficLight.COLOR_GREEN;
default: return TrafficLight.COLOR_RED;
}
}
public void setAsText(String s) throws IllegalArgumentException
{
if(s.equalsIgnoreCase(TrafficLight.COLOR_RED))
signal=TrafficLight.RED;
else
if(s.equalsIgnoreCase(TrafficLight.COLOR_ORANGE))
signal=TrafficLight.ORANGE;
else if(s.equalsIgnoreCase(TrafficLight.COLOR_GREEN))
signal=TrafficLight.GREEN;
else
signal=TrafficLight.RED;
firePropertyChange();
}
public String[ ] getTags()
{
return new String[ ]
{
TrafficLight.COLOR_RED,
TrafficLight.COLOR_ORANGE,
TrafficLight.COLOR_GREEN
}
}
}

package trafficlight;
import java.beans.PropertyDescriptor;
import java.beans.SimpleBeanInfp;
import stickfigure.MoodEditor;
public class TrafficLightBeanInfo extends SimpleBeanInfo
{
public Property Descriptor[ ] getPropertyDescriptor()
{
try
{
System.out.println("Calling Traffic Light Info..");
PropertyDescriptor ExchangeProperty=new
PropertyDescriptor("indianRupees",Exchange.class);

trafficLight.setPropertyEditoprClass(SignalEditor.class);
trafficLight.setBound(true);
return new PropertyDescriptor[ ]
{
exchange property;
}
}
catch(Exception e)
{
return null;
}
}
}

package tarfficlight;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.beans.PropertyChangeListener;
import java.beans.PropertyChangeSupport;

public class TrafficLight extends Canvas


{
public static final string COLOR_RED="Red";
public static final string COLOR_ORANGE="Orange";
public static final string COLOR_GREEN="Green";
public static final int RED=1;
public static final int ORANGE=2;
public static final int GREEN=3;
private int signal=1;
private PropertyChangeSupport changes=new
PropertyChangeSupport(this);
public TrafficLight()
{
set.Background(Color.RED);
}
public void addPropertyChangeListener(PropertyChangeListener
p)
{
changes.addPropertyChangeListener(p);
}
public void
removePropertyChangeListener(PropertyChangeListener p)
{
changes.removePropertyChangeListener(p);
}
public synchronized void setSignal(int signal)
{
int old=this.signal;
this.signal=signal;
switch(signal)
{
case RED: setBackground(Color.RED);
break;
case ORANGE: setBackground(Color.ORANGE);
break;
case GREEN: setBackground(Color.GREEN);
break;
default:setBackground(Color.RED);
break;
}
repaint();
changes.firePropertyChange("signal",new Integer(old),new
Integer(signal));
}
public int getSignal()
{
return signal;
}
public Dimension getMinimumSize()
{
return new Dimension(90,35);
}
public void paint(Graphics g)
{
Font f=new Font("Dialog",FONT.BOLD,12);
g.setFont(f);
g.drawString("Traffic Signal",7,22);
}
}
5.Install TOMCAT web server.Convert the static web pages of
assignments 2 into dynamic
webpages using servlets and cookies.
Hint: Users information(user id,password,credit card number) would be
stored in web.xml.
Each user sholud have a separate Shppoing Cart.

PROGRAM

login.html

<html>
<head>
<tilte>Login Page
</title>
</head>
<body>
<form action="Login" method="post">
<table>
<tr><td colspan="2">please enter the LoginID and Password</td></tr>
<tr> <td colspan="2"><font color="red"><%=strMessage%>
</font></td></tr>
<tr><td>LoginID</td>
<td><input type="text" name="loginID" value=""></td></tr>
<tr><td>Password</td>
<td><input type="password" name="loginPwd" value=""></td></tr>
<tr><td><input type="submit" name="submit" value="submit"></td>
<td><input type="reset" name="reset" value="reset"></td></tr>
</table>
</form>
</body>
</html>

LoginServlet.java

import java.io.IOException;
import java.servlet.RequestDispatcher;
import java.servlet.ServletConfig;
import java.servlet.ServletException;
import java.servlet.http.HttpServlet;
import java.servlet.http.HttpServletRequest;
import java.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet
{
private String userID;
private String userPassword;
public void init(ServletConfig config)
{
userID=config.getInitParameter("userid");
userPassword=config.getInitParameter("userpassword");
}
public void doPost(HttpServletRequest
request,HttpServletResponse response) throws
ServletException,IOException
{
String loginID=rquest.getParameter("loginID");
String loginID=rquest.getParameter("loginPwd");
if(loginID!=null && loginPwd!=NULL)
{
if(checkAuthentication(loginID,loginPwd))
{
response.sendRedirect("Success.html");
}
else
{
System.out.println("Invalid Login....");
String strMessage="Invalid LoginID|
Password";
request.setAttribute("message",setMessage);
RequestDispatcher
dispatch=request.getRequestDispatcher("Login.jsp");
dispatch.forward(request,response);
}
}
else
{
response.sendRedirect("Login.jsp");
}
}
private Boolean checkAuthentication(String loginID,String
loginPwd)
{
boolean flag=false;
System.out.println("Checking Login.....");
if(loginID.equalsIgnoreCase(userId) &&
loginPwd.equals(userPassword))
{
falg=true;
}
System.out.println("Flag is"+flag);
return flag;
}
}

success.html

<html>
<head>
<title>Login Success
</title>
</head>
<body>
<h1>Successfully Logged In!</h12>
</body>
</html>

Web.xml

<?xml version="1.0" encoding="UTF-8"?>


<web-app>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>LoginServlet</servlet-class>
<init-param>
<param-name>userid</param-name>
<param-value>mylogin</param-value>
</init-param>
<init-param>
<param-name>userpassword</param-name>
<param-value>mypassword</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/Login</url-pattern>
</servlet-mapping>
</web-app>
6.Redo the previous task using JSP by converting the static web pages of
assignments 2 into dynamic web pages.Create a database with user
information
and books information.The books catalogue sholud be dynamically
loaded from the
database.Follow the MVC architecture while doing the website.

PROGRAM

<%@page language="java" contentType="text/html; charset=ISO-8859-


1"%>
<html>
<head>
<tilte>Login Page
</title>
</head>
<body>
<form action="jspSuccess.jsp" method="post">
<table>
<%String strMessage=(String)request.getAttribute("messge");%>
<tr><td colspan="2">please enter the LoginID and Password</td></tr>
<%if(strMessage!=null && strMEssage.length()>0){%>
<tr><td colspan="2"><font color="red"><%=strMessage%>
</font></td></tr>
<%}%>
<tr><td>LoginID</td>
<td><input type="text" name="loginID" value=""></td></tr>
<tr><td>Password</td>
<td><input type="password" name="loginPwd" value=""></td></tr>
<tr><td><input type="submit" name="submit" value="submit"></td>
<td><input type="reset" name="reset" value="reset"></td></tr>
</table>
</form>
</body>
</html>

jspSuccess.jsp

<%@page language="java" contentType="text/html; charset=ISO-8859-


1"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.ResultSet"%>
<html>
<head>
<title>LoginSuccess
</title>
</head>
<body>
<%String loginID=request.getParameter("loginID");%>
int count=0;
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:userinfo");
Statement stmt=con.createStatement();
String str="Select count(*) form UserDetails where
LoginID=""+loginID+" and UserPassword="+loginPWD+";
out.println(str);
if(rs.next())
{
out.println("abc");
count=rs.getInt(1);
}
}
catch(Exception e)
{
e.printStackTrace();
}
if(count==1)
{
%>
<h1>Successfully Logged In!</h1>
<%
}
else
{
<h2><font color="red">Invalid LoginID|Password. Please<a
href="jspLogin.jsp">
login</a></font></h2>
<%
}
%>
</body>
</html>