wt_manual

advertisement
WEB TECHNOLOGIES
LAB MANUAL
IV YEAR B.Tech.CSE-1 Semester
2009
Department of Computer Science
GRIET
Objectives
This course introduces the technologies behind today's web-based
applications. A student completing this course should have acquired a good
understanding of the basic design principles of the web model of computing.
Students should have designed and implemented a web application using
current software development technologies and methodologies. He should
have learned in detail some cutting-edge technologies. The student should
have learned how to work in a group with strict delivery deadlines. The
student should have learned how to prepare reading material, bibliography
search, and make presentations to a class.
Course structure
The course will be mostly driven by active student participation. Students are
expected to research specific technologies and present them in the class. An
important part of the course are programming assignments. There will be
regular programming assignments that help students understand and
implement the concepts taught in the class.
How to use /read this manual
 This manual is divided into sections with different problems.
 Each section corresponds to different programs in the lab, the different lab
sessions and programs will be available in the manual.
 Each session contains theory that you will need for proper understanding
during the lab sessions.
 Get clear idea of different concepts that you will have to manage while
executing the lab tasks.
CONTENTS
1.
LAB SYLLABUS
2.
INTRODUCTION
3.
PROGRAMS DESCRIPTION
4.
PROGRAMS EXPLANATION WITH
 Definition
 Code
5.
ASSIGNMENT
6.
REFERENCES
7.
CONTENT BEYOND SYLLABUS.
JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY
HYDERABAD
IV B.Tech (I-SEM)
T
P
0
3
WEB TECHNOLOGIES LAB
C
2
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
2. Validate the Registration, user login, user profile and payment by credit card
pages using JavaScript.
3. Create and save an XML document at the server, which contains 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.
4. Create a JavaBean which gives the exchange value of INR (Indian Rupees) into equivalent
American/Canadian/Australian Dollar value.
5. 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.
6. Create two Beans Traffic Light(Implemented as a Label with only three
Background colours-Red,Green,Yellow) and Automobile(Implemented as a
TextBox which states its state/movement). The state of the Automobile should
depend on the following Light Transition Table.
Light Transition
Red ---> Yellow
Yellow ---> Green
Green --> Red
Automobile State
Ready
Move
Stopped
7. Convert the static web pages online library into dynamic web pages using servlets
and cookies.
EXPERIMENT-1
Develop static pages (using only HTML) of an online Book store. The page should
resemble www.amazon.com.The website should consist the following pages
 Home page
 Registration page and user Login
 User Profile page
 Books Catalog
 Shopping Cart
 Payment by credit card
 Order Confirmation
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//servletexamples//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
Email Id
: <input type="email" size=30>
Address
:
<textarea cols=50 rows=3></textarea>
Phone
Occupation
: <input type="text" size=30>
: <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>
type="Reset" value=" reset ">
</form>
</fieldset>
</body>
</html>
<input
OUTPUT SCREEN FOR REGISTRATION FORM
sourcecode for Userlogin
<html>
<head><center>
<font size="6" color="Black" ><h1><u>User
login.....</u><h1></font></center>
</head>
<form method="POST"
ACTION="http://localhost:8080//servletexamples//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>edition :2007</font>
<li><font color=blue>price :950</font>
<li><font color=blue>Publicher :gangii publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</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>edition :2007</font>
<li><font color=blue>price :5950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</tr>
<tr>
<td><img src="quick.gif" width=80></td><td><b>Web Technology &
Designing</b>
<ul><pre><li><font color=blue>Author
:Kiran-Gangadhar</font>
<li><font color=blue>edition :2007</font>
<li><font color=blue>price :5950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</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>
<li><font color=blue>edition :2007</font>
<li><font color=blue>price :950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</tr>
</table>
</body>
</html>
OUTPUT SCREEN FOR BOOKCATLOG
What is JavaScript?





JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages
JavaScript is an interpreted language (means that scripts execute without
preliminary compilation)
What can a JavaScript do?







JavaScript gives HTML designers a programming tool - HTML authors are
normally not programmers, but JavaScript is a scripting language with a very
simple syntax! Almost anyone can put small "snippets" of code into their HTML
pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement
like this: document.write("<h1>" + name + "</h1>") can write a variable text into
an HTML page
JavaScript can react to events - A JavaScript can be set to execute when
something happens, like when a page has finished loading or when a user clicks
on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and
change the content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate
form data before it is submitted to a server. This saves the server from extra
processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be
used to detect the visitor's browser, and - depending on the browser - load another
page specifically designed for that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and
retrieve information on the visitor's computer
To insert a JavaScript into an HTML page, we use the <script> tag. Inside the <script>
tag we use the type attribute to define the scripting language.
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and
ends:
The example below shows how to use JavaSript to write text on a web page:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
The document.write command is a standard JavaScript command for writing output to a
page.
By entering the document.write command between the <script> and </script> tags, the
browser will recognize it as a JavaScript command and execute the code line. In this case
the browser will write Hello World! to the page
EXPERIMENT-2
 Validate the Registration, user login and payment by credit card pages
using JavaScript.
Aim:
To 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;
var password2=form1.txtpassword2.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="";
form1.txtpassword2.value="";
}
if(password1!=password2)
{
return_ value=false;
window.alert("ur password mismatched ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
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>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var return_value=true;
var username=form1.txtusername.value;
var password1=form1.txtpassword1.value;
var password2=form1.txtpassword2.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 ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
if(password1!=password2)
{
return_value=false;
window.alert("ur password mismatched ");
form1.txtpassword1.value="";
form1.txtpassword2.value="";
}
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>
<form name="form1" onSubmit="essentials_of_validation(this)">
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>
<SCRIPT LANGUAGE="JAVASCRIPT">
function essentials_of_validation(form1)
{
var current=new Date();
var return_value=true;
var username=form1.txtusername.value;
var password1=form1.txtpassword1.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>
<body bgcolor="pink">
<marquee><strong>Enjoy the Shopping with special Offers</strong></marquee>
<form name="form1" onSubmit="essentials_of_validation(this)">
<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
XML
XML is a markup language. The mighty ones who created this acronym cheated a little,
as XML stands for eXtensible Markup Language. XML was released in the late 90's and
has since received a great amount of hype. The XML standard was created by W3C to
provide an easy to use and standardized way to store self-describing data (self-describing
data is data that describes both its content and its structure).
XML is nothing by itself. XML is more of a "common ground" standard. The main
benefit of XML is that you can use it to take data from a program like MSSQL
(Microsoft SQL), convert it into XML, then share that XML with a slough of other
programs and platforms. Each of these receiving platforms can then convert the XML
into a structure the platform uses normally, and presto! You have just communicated
between two platforms which are potentially very different!
What makes XML truly powerful is the international acceptance it has received.
Many individuals and corporations have put forth their hard work to make XML
interfaces for databases, programming, office application, mobile phones and more. It is
because of this hard work that the tools exist to do these conversion from whatever
platform into standardized XML data or convert XML into a format used by that
platform.
XML Applications:
Although there are countless numbers of applications that use XML, here are a few
examples of the current platforms and applications that are making use of this
technology:
Cell Phones - XML data is sent to some cell phones. The data is then formatted by
the specification of the cell phone software designer to display text or images, and
even to play sounds!
File Converters - Many applications have been written to convert existing
documents into the XML standard. An example is a PDF to XML converter.
VoiceXML - Converts XML documents into an audio format so that you can
listen to an XML document.
EXPERIMENT-3

Create and save an XML document at the server ,which contains 10 users
information. Write a program, which takes user id as input and returns the user
details by taking the user information from the XML document.
Aim:
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>
<jntuno>540</jntuno>
<name> karteek</name>
<phno>9701443556</phno>
<address>srikakulam1</address>
</user2>
<user3>
<jntuno>525</jntuno>
<name> giri</name>
<phno>9897895301</phno>
<address>rajam</address>
</user3>
<user4>
<jntuno>526</jntuno>
<name>gopi</name>
<phno>9999789540</phno>
<address>parlakimidi</address>
</user4>
<user5>
<jntuno>513</jntuno>
<name> manoj</name>
<phno>9989233331</phno>
<address>hyderabad</address>
</user5>
<user6>
<jntuno>514</jntuno>
<name> balaji</name>
<phno>9999789560</phno>
<address>vizag</address>
</user6>
<user7>
<jntuno>567</jntuno>
<name>kiran </name>
<phno>9999178957</phno>
<address>vijayanagaram</address>
</user7>
<user8>
<jntuno>518</jntuno>
<name> sekhar</name>
<phno>789580</phno>
<address>bobili</address>
</user8>
<user9>
<jntuno>517</jntuno>
<name>chaitu</name>
<phno>789590</phno>
<address>sallur</address>
</user9>
<user10>
<jntuno>595</jntuno>
<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
JavaBeans is a portable, platform-independent component model written
in the Java programming language. The JavaBeans architecture was built through a
collaborative industry effort and enables developers to write reusable components in the
Java programming language.
With the JavaBeans API you can create reuseable, platform-independent components.
Using JavaBeans-compliant application builder tools, you can combine these components
into applets, applications, or composite components.
JavaBean components are known as beans. Beans are dynamic in that they can be
changed or customized. Through the design mode of a builder tool, you use the property
sheet or bean customizer to customize the bean and then save (persist) your customized
beans.
Example and explanation of a simple bean program
import java.awt.Color;
import java.beans.XMLDecoder;
import javax.swing.JLabel;
import java.io.Serializable;
public class SimpleBean extends JLabel
implements Serializable {
public SimpleBean() {
setText( "Hello world!" );
setOpaque( true );
setBackground( Color.RED );
setForeground( Color.YELLOW );
setVerticalAlignment( CENTER );
setHorizontalAlignment( CENTER );
}
}
SimpleBean extends the javax.swing.JLabel graphic component and inherits its
properties, which makes the SimpleBean a visual component. SimpleBean also
implements the java.io.Serializable interface. Your bean may implement either the
Serializable or the Externalizable interface.
The JavaBeans™ specification defines the following types of bean properties:
Simple – A bean property with a single value whose changes are independent of changes
in any other property.
Indexed – A bean property that supports a range of values instead of a single value.
Bound – A bean property for which a change to the property results in a notification
being sent to some other bean.
Constrained – A bean property for which a change to the property results in validation by
another bean. The other bean may reject the change if it is not appropriate.
Bean properties can also be classified as follows:
Writable – A bean property that can be changed Standard Expert Preferred
Read Only – A bean property that cannot be changed.
Hidden – A bean property that can be changed. However, these properties are not
disclosed with the BeanInfo class
EXPERIMENT-4
. Create a JavaBean which gives the exchange value of INR(Indian Rupees) into equivalent
American/Canadian/Australian Dollar value.
Aim:
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
EXPERIMENT-5

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.
Aim:
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.*;
import java.awt.event.*;
public class KiranCount extends Canvas
{
private int count;
public KiranCount()
{
addMouseListener(new MouseAdapter()
{
public void mousePressed(MouseEvent me)
{
count++;
repaint();
}
});
setSize(200,300);
}
public void paint(Graphics g)
{
Dimension d=getSize();
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:
EXPERIMENT-6
.
Create two Beans Traffic Light(Implemented as a Label with only three
background colours-Red,Green,Yellow) and Automobile(Implemented as a TextBox
which states its state/movement). The state of the Automobile should depend on the
following Light Transition Table.
Light Transition
Red ---> Yellow
Yellow ---> Green
Green --> Red
Automobile State
Ready
Move
Stopped
Aim:
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.*;
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());
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);
}
}
}
Output screens
A
static web page is a web page that always comprises the same information
in response to all download requests from all users. Contrast with Dynamic web page.
It displays the same information for all users, from all contexts, providing the classical
hypertext, where navigation is performed through "static" documents.
Advantages



Quick and easy to put together, even by someone who doesn't have much
experience.
Ideal for demonstrating how a site will look.
Cache friendly, one copy can be shown to many people.
Disadvantages



Difficult to maintain when a site gets large.
Difficult to keep consistent and up to date.
Offers little visitor personalization (all would have to be client side).
Dynamic web page
Classical hypertext navigation, with HTML or XHTML alone, provides "static" content,
meaning that the user requests a web page and simply views the page and the information
on that page.
However, web navigation can also provide an "interactive experience" that is termed
"dynamic". Content (text, images, form fields, etc.) on a web page can change, in
response to different contexts or conditions. There are two ways to create this kind of
interactivity:
1. Using client-side scripting to change interface behaviors within a specific web
page, in response to mouse or keyboard actions or at specified timing events. In
this case the dynamic behavior occurs within the presentation.
2. Using server-side scripting to change the supplied page source between pages,
adjusting the sequence or reload of the web pages or web content supplied to the
browser. Server responses may be determined by such conditions as data in a
posted HTML form, parameters in the URL, the type of browser being used, the
passage of time, or a database or server state.
The result of either technique is described as a dynamic web page, and both may be used
simultaneously.
Advantages




Offers highly personalized and customised visitor options.
Database access improves the personalized experience (as opposed to using just
client side cookies)
Scripts can read in data sources and display it differently depending on how it is
run.
Can create the illusion of being updated regularly using time and date sensitive
routines (or even randomisers) to display pre-written text.
Disadvantages



Personalized pages are not very cache friendly.
Requires a basic minimum knowledge of the language being used.
Scripts need more consideration when uploading and installing, particularly to
*unix servers.
Servlets are modules that run inside request/response-oriented servers, such as
Java-enabled web servers. Functionally they operate in a very similar way to CGI scripts,
however, being Java based they are more platform independent.
Some Example Applications
A few of the many applications for servlets include,



Processing data POSTed over HTTPS using an HTML form, including purchase
order or credit card data. A servlet like this could be part of an order-entry and
processing system, working with product and inventory databases, and perhaps an
on-line payment system.
Allowing collaboration between people. A servlet can handle multiple requests
concurrently; they can synchronize requests to support systems such as on-line
conferencing.
Forwarding requests. Servlets can forward requests to other servers and servlets.
This allows them to be used to balance load among several servers that mirror the
same content. It also allows them to be used to partition a single logical service
over several servers, according to task type or organizational boundaries.
Servlet Architecture Overview
The central abstraction in the Servlet API is the Servlet interface. All servlets
implement this interface, either directly or, more commonly, by extending a class that
implements it such as HttpServlet. The inheritance hierarchy looks as follows.
The Servlet interface provides the following methods that manage the servlet and its
communications with clients.





destroy()
Cleans up whatever resources are being held and makes sure that any persistent
state is synchronized with the servlet's current in-memory state.
getServletConfig()
Returns a servlet config object, which contains any initialization parameters and
startup configuration for this servlet.
getServletInfo()
Returns a string containing information about the servlet, such as its author,
version, and copyright.
init(ServletConfig)
Initializes the servlet. Run once before any requests can be serviced.
service(ServletRequest, ServletResponse)
Carries out a single request from the client.
Cookies are small bits of textual information that a Web server sends to a browser
and that the browser returns unchanged when visiting the same Web site or domain later.
By having the server read information it sent the client previously, the site can provide
visitors with a number of conveniences:




Identifying a user during an e-commerce session. Many on-line stores use a
"shopping cart" metaphor in which the user selects an item, adds it to his
shopping cart, then continues shopping. Since the HTTP connection is closed
after each page is sent, when the user selects a new item for his cart, how does the
store know that he is the same user that put the previous item in his cart? Cookies
are a good way of accomplishing this. In fact, this is so useful that servlets have
an API specifically for this, and servlet authors don't need to manipulate cookies
directly to make use of it
Avoiding username and password. Many large sites require you to register in
order to use their services, but it is inconvenient to remember the username and
password. Cookies are a good alternative for low-security sites. When a user
registers, a cookie is sent with a unique user ID. When the client reconnects at a
later date, the user ID is returned, the server looks it up, determines it belongs to a
registered user, and doesn't require an explicit username and password.
Customizing a site. Many "portal" sites let you customize the look of the main
page. They use cookies to remember what you wanted, so that you get that result
initially next time. I'll give an example like this later in this section of the tutorial.
Focusing advertising. The search engines charge their customers much more for
displaying "directed" ads than "random" ads. That is, if you do a search on "Java
Servlets", a search site can charge much more for an ad for a servlet development
environment than an ad for an on-line travel agent. On the other hand, if the
search had been "Bali Hotels", the situation would be reversed. The problem is
that they have to show a random ad when you first arrive and haven't yet
performed a search, as well as when you search on something that doesn't match
any ad categories. Cookies let them remember "Oh, that's the person who was
searching for such and such previously" and display an appropriate (read "high
priced") ad instead of a random (read "cheap") one.
EXPERIMENT-7
. Convert the static web pages online library into dynamic web pages using servlets
and cookies.
Aim:
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>
<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>
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()">
Email Id
: <input type="email" size=30>
Alternate
Email Id
Address
Phone
: <input type="email" size=30>
:
<textarea cols=50 rows=3></textarea>
: <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>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>edition :2007</font>
<li><font color=blue>price :950</font>
<li><font color=blue>Publicher :gangii publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</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>edition :2007</font>
<li><font color=blue>price :5950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</tr>
<tr>
<td><img src="quick.gif" width=80></td><td><b>Web Technology & Designing</b>
<ul><pre><li><font color=blue>Author
:Kiran-Gangadhar</font>
<li><font color=blue>edition :2007</font>
<li><font color=blue>price :5950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</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>
<li><font color=blue>edition :2007</font>
<li><font color=blue>price :950</font>
<li><font color=blue>Publicher :jyothi publishers</pre></font></pre>
</ul>
<td><pre><b>add to cart</b>
<img src="click.gif"></pre></td>
</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
ASSIGNMENTS
1)
Implement an HTML portal that offers:




a main page describing the project and links to the other pages;
a site map;
three pages, each having a form, acting as a web interface for the web service
http://www.random.org/:
o integer generation form;
o sequence generation form;
o string generation form;
a form to act as an interface for http://www.google.com/advanced_search;
o it should contain at least 8 inputs, for the other provide default values by
using hidden inputs;
You should use:



text fields for number and text inputs;
radio buttons or drop down lists for enumerated or finite options;
check boxes for on / off options;
In each page include the link: http://validator.w3.org/check?uri=referer. It will help
validate the page.
A page is considered valid if:


is validated by the W3C validator;
gives the right parameters to the services.
2) First step: Create a database like XML (like the one in the example from above) file
with:



at least 10 record like elements (for example the link element);
each record should have at least 4 attribute like elements (for example the name or
uri element);
each record should have at least 3 sub-records (for example I could extend the
link elements to also contain multiple comment elements);
Second step: Create an XSLT file -- that is used by your XML file -- to transform the
database into a HTML file. Each information available in the XML file should be
presented in the generated HTML.
3 ) Implement a simple web application that allows the user to manipulate a simple
database. (For example you could implement an email address book or a bookmark
manager.)
The application should allow the user to:




add entries;
remove entries;
update entries;
search for entries;
In order to accomplish this you will have to develop some static HTML files and servlets.
The data should be kept in memory by using a collection (lists, maps, etc.) and nothing
should be written to the disk.
References :







http://www.w3schools.com/
www.tizag.com/xmlTutorial
http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/Servlet-TutorialCookies.html
http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial
http://www.cse.iitb.ac.in/dbms/Data/Courses/DBIS/Software/servlets/servlet_tuto
rial.html
http://beta.wikiversity.org/wiki/Web_technologies_--_Laboratory_6_--_20072008_--_info.uvt.ro
http://www.upriss.org.uk/awt/9103-Fa08.html
CONTENT BEYOND SYLLABUS.
Advanced Web Technology
Covering the topics like with examples
Introduction to PHP
Formal models of XML schemas
XML transformation languages
JavaScript browser programming
Web application programming frameworks
Web services
PHP is a powerful tool for making dynamic and interactive Web pages.
PHP is the widely-used, free, and efficient alternative to competitors such as
Microsoft's ASP.
Example #1 Our first PHP script: hello.php
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
Use your browser to access the file with your web server's URL, ending with the
/hello.php file reference. When developing locally this URL will be something like
http://localhost/hello.php or http://127.0.0.1/hello.php but this depends on the web
server's configuration. If everything is configured correctly, this file will be parsed by
PHP and the following output will be sent to your browser:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
This program is extremely simple and you really did not need to use PHP to create a page
like this. All it does is display: Hello World using the PHP echo() statement. Note that the
file does not need to be executable or special in any way. The server finds out that this
file needs to be interpreted by PHP because you used the ".php" extension, which the
server is configured to pass on to PHP. Think of this as a normal HTML file which
happens to have a set of special tags available to you that do a lot of interesting things.
Download