Web Technology Lab PDF

DEV BHOOMI INSTITUTE OF TECHNOLOGY
Department of Computer Science and Engineering
Year: 4th Semester: 8th
WEB-TECH Lab-PCS-852
LAB MANUAL
Prepared By: HOD(CSE)

<Name> <Name>
Department of Computer Science and Engineering
INDEX
S.No Practical’s Name Date Remark
1 Home page Development static pages (using Only
HTML) of an online Book store.
2 Validate the Registration, user login and payment by
credit card pages using JavaScript.
3 To write a program, which takes user id as input and
displays the user details by taking the user information
from the XML document.
4 To create a JavaBean so that it converts value of

INR(IndianRupees) into equivalent
American/Canadian/Australian Dollar value.
5 To create a simple Bean with a label - which is the count
of number of clicks and a BeanInfo class such that only
the “count” property is visible in the Property Window.
6 To create two Beans Traffic Light which implemented as

a Label with only three background colours-
Red,Green,Yellow and Automobile which is
implemented as a TextBox which states its
state/movement with above stated conditions.
7 To convert the static web pages online library into
dynamic web pages using servlets and cookies.
LAB MANUAL
Course Name: Web Technology Lab

Experiment No. 1
Course Code : PCS-852 Branch: CSE Semester: 8
Faculty : Ms. Abhilasha Rathore
Objective: Home page Development static pages (using Only HTML) of an online
Book store. The website should consist the following pages.
 Registration and user Login

 User Profile Page
 Books catalog
 Shopping Cart
 Payment By credit card
 Order Conformation
PROGRAM:
Source Code for home page
<html>
<head>
<title> ONLINE BOOK STORES</title>
</head>
<body bgcolor="pink">
<FRAMESET ROWS="20%,*">
<FRAME NAME="A2" SCROLLING="YES" SRC="head.html">
</FRAMESET><H1 ALIGN="CENTER"><U><FONT
COLOR="PURPLE">WELCOME TO ONLINE BOOK
SHOPPING<ITALIC></ITALIC>
</U></FONT></H1>
<H2> <FONT COLOR="WHITE"></FONT></H2>
<H3 ALIGN="CENTER"><A HREF="reg.html"><BR><BR>
<FONT COLOR="black"><ITALIC>REGISTRATION
FORM</FONT></ITALIC><BR><BR>
<BR><BR><A HREF="user profile .html"><FONT COLOR="black"><ITALIC>USER
PROFILE</FONT></ITALIC><BR>
<BR><BR><A HREF="user login.html"><FONT COLOR="black"><ITALIC>USER
LOGIN</FONT></ITALIC><BR>
<BR><BR><A HREF="book catalog.html"><FONT
COLOR="black"><ITALIC>BOOKS CATALOG</FONT></ITALIC><BR>
<BR><BR><A HREF="confim.HTML"><FONT COLOR="black"><ITALIC>BOOKS
CART</FONT></ITALIC><BR>
<BR><BR><A HREF="payment.HTML"><FONT
COLOR="black"><ITALIC>PAYMENT</H3></FONT></ITALIC><BR>
</BODY>
</HTML>
OUTPUT SCREEN:
Source Code for Registration and user Login
<html>
<head>
<center><u><h1>Registration
Form</h1></u></center>
</head>
<body>
<fieldset width=300><legend class=heading>Registration Form</legend>
<form actions="http://localhost:8080//servlet-examples//KiranUserProfile">
<pre class="reg">
First Name : <input type="text" size=30>
Last Name : <input type="text" size=30>
Age : <input type="text" size=30 onFocus="kirandisp()">
Email Id : <input type="email" size=30>
Alternate
Address :<textarea cols=50 rows=3></textarea>
Phone : <input type="text" size=30>
Occupation : <input type="text" size=30>
<input type="radio" name="agree" value="i agree">I Agree Terms & conditions <input
type="radio" name="agree" value="i disagree">I DisAgree
<input type="submit" value=submit> <input type="Reset" value=" reset ">
</form>
</fieldset>
</body>
</html>
OUTPUT SCREEN FOR REGISTRATION FORM
Source-Code for User-login
<html>
<head><center>
<font size="6" color="Black" ><h1><u>User login.....</u><h1></font></center>
</head>
<form method="POST" ACTION="http://localhost:8080//servlet-examples//KiranPass">
<body bgcolor="0x1ff0f2">
<pre>
Enter Name : <input type="text" name="name" size=15 > <br>
Enter Password : <input type="password" name="pwd" size=15><br>
<input type= Submit name=sbmt value="Login">
</pre>
</form></body>
</html>
OUTPUT SCREEN FOR USERLOGIN
Source code for books catalog
<html>
<head>
</head>
<body>
<center><font color="red" size=7 face="Vivaldi"><b><i>Book
Catlog</i></font></center></b>
<table>
<td><img src=java.jpg width=100></td><td><b>Java Complete <br>references</b>
<ul><pre><li><font color=blue>Author :Gangadhar</font>
<li><font color=blue>edition :2007</font>
<li><font color=blue>price :450</font>
<li><font color=blue>Publicher :Ideal publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</td>
<tr>
<td><img src="vbnet.gif" width=80></td><td><b>Visual Basics</b>
<ul><pre><li><font color=blue>Author :Kiran</font>
<li><font color=blue>Publicher :gangii publishers</pre></font></pre>
</ul>
</tr>
<tr>
<td><img src="web tech.gif" width=80></td><td><b>Web Technology &
Designing</b>
<ul><pre><li><font color=blue>Author :Kiran-Gangadhar</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
</tr>
<tr>
<td><img src="quick.gif" width=80></td><td><b>Web Technology & Designing</b>
</ul>
</tr>
<tr>
<td><img src="harry.jpg" width=80></td><td><b>Harry reference to java</b>
<ul><pre><li><font color=blue>Author :Harry Potter</font>
</ul>
</tr>
</table>
</body>
</html>
OUTPUT SCREEN FOR BOOKCATLOG
Outcome:
To Learn the development process of Home page using only HTML.
LAB MANUAL

Experiment No. 2
Objective: Validate the Registration, user login and payment by credit card pages
using JavaScript.
Program:
Registration
<html>
<head><title>
register</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var return_value=true;
var username1=form1.txtusername1.value;
var username2=form1.txtusername2.value;
var password1=form1.txtpassword1.value;
if(username1.length < 8)
{
return_value=false;
window.alert("user name less than 8 chars");
}
if(username1==username2)
{
return_value=false;
window.alert("both ids are same");
form1.txtusername2.value="";
}
if(password1.length<6)
{
return_value=false;
window.alert(" pwd should be > 6 char's ");
form1.txtpassword1.value="";
}
if(password1!=password2)
{
return_ value=false;
window.alert("ur password mismatched ");
}
return return_value;
}
</script>
</head>
<body BGCOLOR="YELLOW">
<CENTER><u>
<marquee><font name="mistral" size="+1">REGISTRATION
FORM</font></marquee>
</u></center>
<form name="form1" onSubmit="essentials_of_validation(this)">
Name:<input name="name" type="text" size="10">
<br>
Age:<input type="text" size="3">
<br>
Sex:<br>
<input name ="gen" type="radio" value="male">male
<input name="gen" type="radio" value="female">female
<br>
Address:<textarea name="address" rows="3" cols="3"></textarea>
<br>
Enter e-mail id u want :<sup>*</sup>
<input type="text" name="txtusername1" size="15">
<br>
Password:<sup>*</sup>
<input type="Password" name="txtpassword1" size="15">(password should exceed
6 characters)
<br>
Confirm password:<input type="password" name="txtpassword2" size=20>
<br>
Alternate mail:<sup>*</sup>
<input type="text" name="txtusername2" size="15">
<br>
Known This Site Through
<br>
<input name="things" type="checkbox" value="srts"> internet
<input name="things" type="checkbox" value="sp">newspapers
<input name="things" type="checkbox" value="spor"> friends
<br>
Rate ur site
<select name="rating">
<option selected>good
<option>average
<option>bad
<option>no rating
</select><br>
Enter the code<input name="code" type="text" size="5">
<table border="1" width="10%" height="10%">
<thead><tr><th>
1123</th></tr>
</thead>
</table>
<br>
<input type="submit" value="submit ">
<input type ="reset" value="clear ur entries">
</form>
<font size="+1">
<A Href="E:\cs540\online.html">Home</A>
<A Href="E:\cs540\user.html">Login</A>
</font>
</body>
</html>
User Login
<html>
<head>
{
var username=form1.txtusername.value;
if(username.length < 8)
{
return_value=false;
window.alert("user name less thn 8 chars");
}
if(password1.length<6)
{
return_value=false;
window.alert(" pwd should be > 6 char's ");
}
if(password1!=password2)
{
return_value=false;
window.alert("ur password mismatched ");
}
return return_value;
}
</script>
</head>
<body bgcolor="skyblue">
<marquee><b><u><font face="comic sans ms" color="light blue">login
here</font></u></b></marquee>
Username <input type="text" name="txtusername" size=20>
<br>Password: <input type="password" name="txtpassword1" size=20>
<br>Confirm password:<input type="password" name="txtpassword2" size=20>
<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
Payment by credit card
<html>
<head><title>
payment</title>
{
var current=new Date();
var username=form1.txtusername.value;
var a=form1.dd.value;
var b=form1.mm.value;
var c=form1.yyyy.value;
if(isNaN(username))
{
window.alert("Not a valid account number");
}
if(a<32 && b<13&& c>=current.getFullYear())
{
if(c>current.getFullYear())
{
window.alert(" you are validated");
}
else if(c=current.getFullYear())
{
if(b>current.getMonth())
{
window.alert(" you are validated");
}
else if(b=current.getMonth())
{
if(a>current.getDate())
{
window.alert("you are validated");
}
}
}
else
{
window.alert("Your card has expired");
}
}
else
{
window.alert(" card has expired");
}
}
</script>
</head>
<marquee><strong>Enjoy the Shopping with special Offers</strong></marquee>
<font size="+2">
Payment Through
<br>
<input name="pay" type="radio" >Credit card
<input name="pay" type="radio" >Debit card
<br>
Bank
<select name="bank">
<option selected>sbi
<option>HSBC
<option>ICICI
<option>others
</select>
<br>
Account/Card number:
<input name="txtusername" type="textbox">
<br>
Net banking id/Password<input name="txtpassword1" type="password">
<br>
Enter date of expiryof account/card<input name="dd" type="text" size=2>(dd)
<input name="mm" type="text" size=2>(mm)
<input name="yyyy" type="text" size=4>(yyyy)
<br>
<input type="submit" value="Accept">
<input type="reset" value="Reject">
</form>
<A Href="e:\cs540\online.html">Home</A>
<br><A Href="e:\cs540\shop.html">back</A>
</body>
</html>
Output screens for validations

Outcome:
To learn the process to Validate the Registration, user login and payment by credit card
pages using JavaScript.
LAB MANUAL

Experiment No. 3
Objective: To write a program which takes user id as input and displays the user
details by taking the user information from the XML document.
Program:
User Information
<?xml version="1.0"?>
<userdata>
<user1>
<jntuno>561</jntuno>
<name> chandu</name>
<phno>9989891510</phno>
<address>srikakulam</address>
</user1>
<user2>
<name> karteek</name>
<phno>9701443556</phno>
<address>srikakulam1</address>
</user2>
<user3>
<name> giri</name>
<phno>9897895301</phno>
<address>rajam</address>
</user3>
<user4>
<name>gopi</name>
<phno>9999789540</phno>
<address>parlakimidi</address>
</user4>
<user5>
<name> manoj</name>
<phno>9989233331</phno>
<address>hyderabad</address>
</user5>
<user6>
<name> balaji</name>
<phno>9999789560</phno>
<address>vizag</address>
</user6>
<user7>
<name>kiran </name>
<phno>9999178957</phno>
<address>vijayanagaram</address>
</user7>
<user8>
<name> sekhar</name>
<phno>789580</phno>
<address>bobili</address>
</user8>
<user9>
<name>chaitu</name>
<phno>789590</phno>
<address>sallur</address>
</user9>
<user10>
<name> sravan</name>
<phno>9000789500</phno>
<address>sklm</address>
</user10>
</userdata>
Information Retrival
<html>
<!--DOM with javascript>
<head>
<title>user profile example</title>
</head>
<body>
<script type="text/JavaScript">
var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
xmldoc.load("data.xml");
var ele=xmldoc.documentElement;
var y=window.prompt("eneter user num",1);
var node=ele.childNodes.item(y-1);
for(var i=0;i<node.childNodes.length;i++)
{
var child=node.childNodes.item(i);
var val=child.firstChild;
document.write("<h2>"+child.nodeName+":"+val.nodeValue);
}
</script>
</body>
</html>
Output screens for XML document
LAB MANUAL

Experiment No. 4
Objective: To create a JavaBean so that it converts value of INR(Indian Rupees) into equivalent
American/Canadian/Australian Dollar value.
Program:
package sunw.demo.KiranRupee;
import java.awt.*;
import java.awt.event.*;
public class KiranRupee extends Canvas
{
private double Rupee;
public KiranRupee()
{
addMouseListener(new MouseAdapter()
{
public void mousePressed(MouseEvent me)
{
repaint();
}
});
setSize(300,300);
}
public double getRupee()
{
return Rupee;
}
public void setRupee(double r)
{
Rupee=r;
repaint();
}
public void paint(Graphics g)
{
double Ausdollar,Usadollar,Candiandollar;
Usadollar=(Rupee*39.72);
Ausdollar=(Rupee*34.8941);
Candiandollar=(Rupee*40.4852);
Dimension d=getSize();
int h=d.height;
int w=d.width;
g.setFont(new Font("SansSerif",Font.PLAIN,22));
g.drawString("Indian Rupee :"+Rupee,50,50);
g.drawString("Aus Dollar :"+Ausdollar,50,150);
g.drawString("Candian Dollar :"+Candiandollar,50,200);
}
}
Output screen for javabean
Outcome:
To understand the process of creating a JavaBean so that it converts value of INR(Indian
Rupees) into equivalent American/Canadian/Australian Dollar value.
LAB MANUAL

Experiment No. 5
Objective: To create a simple Bean with a label - which is the count of number of
clicks and a BeanInfo class such that only the “count” property is visible in the Property
Window.
Program:
package sunw.demo.KiranCount;
import java.awt.*;
public class KiranCount extends Canvas
{
private int count;
public KiranCount()
{
{
{
count++;
repaint();
}
});
setSize(200,300);
}
{
int h=d.height;
int w=d.width;
g.setFont(new Font("SansSerif",Font.PLAIN,22));
g.drawString("Count :"+count,150,150);
}}
Outputscreen for Using bean info class:
Outcome:
To understand the process of creating a simple Bean with a label - which is the count of
number of clicks and a BeanInfo class such that only the “count” property is visible in the
Property Window.
LAB MANUAL

Experiment No. 6
Objective: To create two Beans Traffic Light which implemented as a Label with only
three background colours-Red,Green,Yellow and Automobile which is implemented as a
TextBox which states its state/movement with above stated conditions.
Program:
package sunw.demo.Colors;
import java.awt.*;
public class Colors extends Canvas
{
transient private Color color;
private boolean rectangular;
public Colors()
{
{
{
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);
}

{
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);
}
}
}
Output screens
Outcome:
To understand the process of creating Two Beans Traffic Light which implemented as a
Label with only three background colours-Red,Green,Yellow and Automobile which is
implemented as a TextBox which states its state/movement with above stated conditions.
LAB MANUAL

Experiment No. 7
Objective: To convert the static web pages online library into dynamic web pages using
servlets and cookies.
Program:
Shopping page:
<html>
<head>
<title> ONLINE BOOK STORES</title>
</head>
<FRAMESET ROWS="20%,*">
<FRAME NAME="A2" SCROLLING="YES" SRC="head.html">
</FRAMESET><H1 ALIGN="CENTER"><U><FONT
COLOR="PURPLE">WELCOME TO ONLINE BOOK
SHOPPING<ITALIC></ITALIC>
</U></FONT></H1>
<H2> <FONT COLOR="WHITE"></FONT></H2>
<H3 ALIGN="CENTER"><A HREF="reg.html"><BR><BR>
<FONT COLOR="black"><ITALIC>REGISTRATION
FORM</FONT></ITALIC><BR><BR>
<BR><BR><A HREF="user profile .html"><FONT COLOR="black"><ITALIC>USER
PROFILE</FONT></ITALIC><BR>
<BR><BR><A HREF="user login.html"><FONT COLOR="black"><ITALIC>USER
LOGIN</FONT></ITALIC><BR>
<BR><BR><A HREF="book catalog.html"><FONT
COLOR="black"><ITALIC>BOOKS CATALOG</FONT></ITALIC><BR>
<BR><BR><A HREF="confim.HTML"><FONT COLOR="black"><ITALIC>BOOKS
CART</FONT></ITALIC><BR>
<BR><BR><A HREF="payment.HTML"><FONT
COLOR="black"><ITALIC>PAYMENT</H3></FONT></ITALIC><BR>
</BODY>
</HTML>
Registration:
<html>
<head>
<center><u><h1>Registration Form</h1></u></center>
</head>
<body>
<fieldset width=300><legend class=heading>Registration Form</legend>
<form actions="http://localhost:8080//servlet-examples//KiranUserProfile">
<pre class="reg">
First Name : <input type="text" size=30>
Last Name : <input type="text" size=30>
Age : <input type="text" size=30 onFocus="kirandisp()">
Alternate
Address :
<textarea cols=50 rows=3></textarea>
Phone : <input type="text" size=30>
Occupation : <input type="text" size=30>

<input type="radio" name="agree" value="i agree">I Agree Terms & conditions
<input type="radio" name="agree" value="i disagree">I DisAgree
<input type="submit" value=submit> <input type="Reset" value=" reset ">
</form>
</fieldset>
</body>
</html>
Sign in:
<html>
<head><center>
<font size="6" color="Black" ><h1><u>User login.....</u><h1></font></center>
</head>
<form method="POST" ACTION="http://localhost:8080//servlet-examples//KiranPass">
<body bgcolor="0x1ff0f2">
<pre>
Enter Name : <input type="text" name="name" size=15 > <br>
Enter Password : <input type="password" name="pwd" size=15><br>
<input type= Submit name=sbmt value="Login">
</pre>
</form></body>
</html>
//servlet program
import java.util.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class KiranParameters1 extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
String name=res.getParameter("email");
String pass=res.getParameter("password");
if(name.equals(name)&&pass.equals(pass))
{
res.setHeader("Refresh", "5; URL=KiranBooksShopping.htm");
}
else
{
res.setHeader("Refresh","5;URl=KiranUserLoginInvlid.htm");
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response)

throws ServletException, IOException
{
doGet(request, response);
}
}
Books Catalog:
<html>
<head>
</head>
<body>
<center><font color="red" size=7 face="Vivaldi"><b><i>Book
Catlog</i></font></center></b>
<table>
<td><img src=java.jpg width=100></td><td><b>Java Complete <br>references</b>
<ul><pre><li><font color=blue>Author :Gangadhar</font>
<li><font color=blue>Publicher :Ideal publishers</pre></font></pre>
</ul>
</td>
<tr>
<td><img src="vbnet.gif" width=80></td><td><b>Visual Basics</b>
<ul><pre><li><font color=blue>Author :Kiran</font>
<li><font color=blue>Publicher :gangii publishers</pre></font></pre>
</ul>
</tr>
<tr>
<td><img src="web tech.gif" width=80></td><td><b>Web Technology &
Designing</b>
</ul>
</tr>
<tr>
<td><img src="quick.gif" width=80></td><td><b>Web Technology & Designing</b>
</ul>
</tr>
<tr>
<td><img src="harry.jpg" width=80></td><td><b>Harry reference to java</b>
<ul><pre><li><font color=blue>Author :Harry Potter</font>
</ul>
</tr>
</table>
</body>
</html>
//servlet program
import java.util.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class KiranParameters1 extends HttpServlet

{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
Enumeration ki=req.getParameterNames();
out.println("<html><body><br><center>Books
Selected</center><br><table>");
while(ki.hasMoreElements())
{
String name=""+ki.nextElement();
String value=req.getParameter(name);
out.println("<td>"+name+" : "+value +"</td></tr>");
}
out.println("</table>");
}
}
Output screens
Outcome:
To convert the static web pages online library into dynamic web pages using servlets and
cookies.

Web Technology Lab PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web Technology Lab PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

DEV BHOOMI INSTITUTE OF TECHNOLOGY

Department of Computer Science and Engineering

Year: 4th Semester: 8th

Prepared By: HOD(CSE)

4 To create a JavaBean so that it converts value of

6 To create two Beans Traffic Light which implemented as

Course Name: Web Technology Lab

 Registration and user Login

Source Code for home page

Source Code for Registration and user Login

OUTPUT SCREEN FOR REGISTRATION FORM

Source-Code for User-login

OUTPUT SCREEN FOR USERLOGIN

Source code for books catalog

Course Name: Web Technology Lab

Payment by credit card

Output screens for validations

Course Name: Web Technology Lab

Course Name: Web Technology Lab

Course Name: Web Technology Lab

Course Name: Web Technology Lab

public boolean getRectangular()

public void setRectangular(boolean flag)

private Color randomColor()

public void paint(Graphics g)

Course Name: Web Technology Lab

Occupation : <input type="text" size=30>

public void doPost(HttpServletRequest request,HttpServletResponse response)

public class KiranParameters1 extends HttpServlet

out.println("<td>"+name+" : "+value +"</td></tr>");

Anda mungkin juga menyukai