Sie sind auf Seite 1von 93

Web Technologies & E-Commers

Web Technologies

AIM:
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
User Login
Books catalog

PROCEDURE:
Main page:
<html>
<head>
<title>home page</title>
</head>
<body>
<center><b><h1>welcome to amazon.com</h1></b><br><br>
<form method="post"action="login.html">
<input type="submit"value="click">registration user login hear
</center>
</body>
</html>

Login page:

<html>
<head>
<title>login page</title>
</head>
<body>
<center>
<form method="post" action="login.html">
<p><strong>name:</strong>
<input type="text" name="username" size="25">
</p>
<p><strong>password</strong>
<input name="pass" type="password" size="6"></p>
<p><strong>male</strong>
<input type="radio" value="male"<hacked>&nbsp&nbsp</p>
<p><strong>female</strong>
<option><input type="radio" value="female"<hacked>&nbsp;</p>
<input type="submit" value="submit">&nbsp&nbps
<input type="reset" value="reset">
<a href="registration.html">new users register hear </a>

1
Web Technologies & E-Commers
</form>
</center>
</body>
</html>

Registration:
<html>
<head>
<title>registration</title>
</head>
<body>
<center>
<form method="post" action="login.html">
<p><strong>name:</strong>
<input type="text" name="username" size="25">
</p>
<p><strong>password</strong>
<input name="pass" type="password" size="6"></p>
<p><strong>male</strong>
<input type="radio" value="male"<hacked>&nbsp&nbsp</p>
<p><strong>female</strong>
<input type="radio" value="female" </p>
<p><strong>address:</strong>
<textarea name="address" row="6" cols="20">
</textarea>
</p>
<p><strong>mobile no:</strong>
<input type="text" name="phno" size="10">
</p><br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</center>
</body>
</html>

Books Catalog:
<html>
<head>
<title>books catalog</title>
</head>
<body>
<center><h1><p>welcome to books catalog</p></h1>
<table border="1"width="25%"height="50%">
<tr>
2
Web Technologies & E-Commers
<th>computers</th>
<th>electronics</th>
<th>biotech</th>
<th>mechanical</th>
</tr>
<tr>
<td>
</body>
</html>

3
Web Technologies & E-Commers

4
Web Technologies & E-Commers

5
Web Technologies & E-Commers

AIM:
2. 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.

6
Web Technologies & E-Commers
Home page
Registration and user Login
User profile page
Books catalog
Shopping cart
Payment by credit cardt
Order Conformation

PROCEDURE:
Main.html:
<frameset rows=”25%, 75 %”>
<frame src=”top.html” name=”top”>
<frameset cols=”25%,75%”>
<frame src=”left.html” name=”left”>

<frame src=”right.html” name=”right”>


</frameset>
</frameset>
Top.html:
<html>
<body bgcolor=”pink”>
<br><br>
<marquee><h1 align=”center”><b><u>ONLINE BOOK
STORAGE</u></b></h1></marquee>
</body>
</html>

Right.html:
<html>
<body bgcolor=”pink”>
<br><br><br><br><br>
<h2 align=”center”>
<b><p> welcome to online book storage. Press login if you are
having id otherwise press registration.
</p></b></h2>
</body>
</html>
Left.html:
<html>
<body bgcolor=”pink”>
<h3>
<ul>
<li><a href=”login.html” target=”right”><font color=”black”>
LOGIN</font></a></li><br><br>
7
Web Technologies & E-Commers
<li><a href=”reg.html” target=”right”><font color=”black”>
REGISTRATION</font></a></li><br><br>
<li><a href=”profile.html” target=”right”><fontcolor=”black”>
USER PROFILE</font></a></li><br><br>
<li><a href=”catalog.html” target=”right”><fontcolor=”black”>
BOOKS CATALOG</font></a></li><br><br>
<li><a href=”scart.html” target=”right”><font color=”black”>
SHOPPINGCART</font></a></li><br><br>
<li><a href=”payment.html” target=”right”><fontcolor=”black”>
PAYMENT</font></a></li><br><br>
<li><a href=”order.html” target=”right”><font color=”black”>
ORDER CONFIRMATION</font></a></li><br><br>
</ul>
</body>
</html>

Login.html:
<html>
<body bgcolor=”pink”><br><br><br>
<script language=”javascript”>
function validate()
{
var flag=1;
if(document.myform.id.value==”“||document.myform.pwd.
value==” “)
{
flag=0;
}
if(flag==1)
{
alert(“VALID INPUT”);
}
else
{
alert(“INVALID INPUT”);
document.myform.focus();
}
}
</script>
<form name=”myform”>
<div align=”center”><pre>
LOGIN ID:<input type=”text” name=”id”><br>
PASSWORD:<input type=”password” name=”pwd”>
</pre><br><br>
</div>
8
Web Technologies & E-Commers
<br><br>
<div align=”center”>
<input type=”submit” value=”ok” onClick=”validate()”>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<input type=”reset” value=”clear”>
</form>
</body>
</html>

Reg.html:
<html>
<body bgcolor=”pink”><br><br>
<script language=”javascript”>
function validate()
{
var flag=1;
if(document.myform.name.value==””||
document.myform.addr.value==””||
document.myform.phno.value==””||
document.myform.id.value==””||
document.myform.pwd.value==””)
{
flag=0;
}
var str=document.myform.phno.value;
var x;
for(var i=0;i<str.length;i++)
{
x=str.substr(i,1)
if(!(x<=9))
{
flag=0;
break;

}
}
if(flag==1)
{
alert("VALID INPUT");
}
else
{
alert("INVALID INPUT");
document.myform.focus();
}
}
9
Web Technologies & E-Commers
</script>
<form name="myform">
<div align="center"><pre>
NAME:<input type="text" name="name"><br>
ADDRESS:<input type="type" name="addr"><br>
CONTACT NUMBER:<iput type="text" name="phno"><br>
LOGINID:<input type="text" name="id"><br>
PASSWORD:<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear">
</form></body></html>

Catalog.html:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center"><pre>
BOOK TITLE :<input type="text" name="title"><br>
</pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="buton1">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" name="buton2">
</body>
</html>

Order.html:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center"><pre>
LOGIN ID:<input type="text" name="id"><br>
TITLE:<input type="text" name="title"><br>
NO.OF BOOKS :<input type="text" name="no"><br>
COST OF BOOK:<input type="text"name="cost"><br>
DATE:<input tpe="text" name="date"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="buton1"> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" name="buton2">
</body>
</html>
10
Web Technologies & E-Commers

Payment.html:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""||
document.myform.pwd.value==""||
document.myform.amount.value==""||
document.myform.num.value=="")
{
flag=0;
}
var str=document.myform.amount.value;
var x;
for(var i=0;i<str.length;i++)
{
x=str.substr(i,1);
if(!(x<=9))
{
flag=0;
break;
}

}
str=document.myform.num.value;
for(var i=0;i<str.lenght;i++)
{
x=str.substr(i,1);
if(!(x<=9))
{
flag=0;
break;
}
}
if(flag==1)
{
alert("VALID INPUT");
}
else
{
alert("INVALID INPUT");
document.myform.focus();
11
Web Technologies & E-Commers
}
}
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID:<input type="text" name="id"><br>
PASSWORD:<input type="password" name="pwd"><br>
AMOUNT:<input type="text" name="amount"><br>
CREDITCARDNUMBER:<input type="PASSWORD" name="num+"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" >
</form>
</body>
</html>

Profile.html:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""||
document.myform.pwd.value=="")
{
flag=0;
}
if(flag==1)
{
alert("VALID INPUT");
}
else
{
alert("INVALID INPUT");
document.myform.focus();
}
}
</script>
<form name="myform">
<div align="center"><pre>

LOGIN ID :<input type="text" name="id"><br>


12
Web Technologies & E-Commers
PASSWORD:<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" >
</form>
</body>
</html>

13
Web Technologies & E-Commers

14
Web Technologies & E-Commers

15
Web Technologies & E-Commers

16
Web Technologies & E-Commers

17
Web Technologies & E-Commers
AIM:
3. To do validation for registration page using JavaScript.

DESCRIPTION: Write JavaScript to validate the following fields of the above


Registration page.

1. Name (Name should contains alphabets and the length should not be less than 6 characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard patern
(name@domain.com)
4. Phone number (Phone number should contain 10 digits only).

Note: You can also validate the login page with these parameters.

Validation.html

<html>
<head>
<title>Registration</title>
<script type="text/javascript">

function validate()
{
var c1=new RegExp("^[\\w]{6,}$");
var c2=new RegExp("^[\\w]{6,}$");
var c3=new RegExp("^[\\w]+@[\\w]+.com$");
var c4=new RegExp("^[\\d]{10}$");
var name=document.f.user.value;
var pwd=document.f.pwd.value;
var email=document.f.email.value;
var phone=document.f.phone.value;
var error="";
if(!name.match(c1))
{ error+="should be min of 6 char\n" }

if(!pwd.match(c2))
{
error+="should be min of 6 char\n"
}

if(!email.match(c3))
{
error+="should be of format name@domain.com\n"
18
Web Technologies & E-Commers
}

if(!phone.match(c4))
{
error+="should be of 10 digits"
}

window.alert(error);
}
</script>

</head>
<body bgcolor=#7D9EC0>
<center>
<form name=f>
<table align=center border=0 width=65% height=100%>
<caption align=center> REGISTRATION FORM </caption>
<tr >
<td>UserName :</td>
<td > <input type=text name=user></td>
</td>
</tr>
<tr>
<td>Password:</td>
<td ><input type=password name=pwd></td>

</tr>
<tr >
<td>E-mail id:</td>
<td ><input type=text name=email></td>

</tr>
<tr>
<td>Phone Number:</td>
<td ><input type=text name=phone></td>
<td> <p id= "ph"> </p></td>
</tr>
<tr>
<td><input type=buton value="Submit" onclick=validate()></td>
<td><input type=reset value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
19
Web Technologies & E-Commers
Output :

AIM
4. Write a program illustrating various methods in cascading style sheets.

1) Use different font, styles


2) Set a background image
3) Control the repetition of the image
4) Define styles for links
5) Work with layers
6) Add a customized cursor

DESCRIPTION: Design a web page using CSS (Cascading Style Sheets) which

includes the following:

1) Use different font, styles: In the style definition you define how each selector should work (font, color
etc.).Then, in the body of your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page. You can define the
background image for the page like this:
3) Control the repetition of the image with the background-repeat property.

As background-repeat: repeat
20
Web Technologies & E-Commers
4) Define styles for links as

5) Work with layers:

6) Add a customized cursor:

Selector {cursor:value}

.xlink {cursor:crosshair}
.hlink{cursor:help}

1. Font syles

<html>

<head>

<title> styles</title>

<style type="text/css">

b.headline {color:red;font-size:22pt;font-family:arial;text-decoration:none}

</style>

</head>

<body>

<b> this is normal bold</b> <br />

<b class="headline"> this is headline style bold</b>

</body>

</html>

21
Web Technologies & E-Commers

Output Screen:

22
Web Technologies & E-Commers
2. Background image

<html>

<head>

<style>

body{ background-image:url("winter.jpg");}

table

{ background-image:url(water lilies.jpg);}

</style>

<body >

<table border=2 width=50% height=50% align=center>

<tr>

<td> slno</td>

<td> name </td>

</tr>

<tr>

<td> 1</td>

<td> raj</td> </tr>

<tr> <td> 2</td>

<td> kumar</td> </tr>

</table></body></html>

23
Web Technologies & E-Commers

Output Screens:

24
Web Technologies & E-Commers
3. Control repeat

<html>

<head>

<style>

body{

background-image:url(winter.jpg);

background-repeat:no-repeat;

</style>

</head>

</body>

<h2> this is the body of the page where the image is repeated</h2>

</body>

</html>

25
Web Technologies & E-Commers

Output Screen:

26
Web Technologies & E-Commers
4. Different types of links

<html>

<head>

<style type="text/css">

a:link {text-decoration:underline;color=red}

a:active{ text-decoration;OVERLINE;COLOR:green}

a:visited{ text-decoration;COLOR:yellow}

a:hover{ text-decoration:overline; color=green}

</style></head>

<body>

<h2> these are links </h2>

<a href=LINKSTYLES.html >LINK1</a><br /><br /><br />

<a href=LINKSTYLES.html >LINK2</a><br /><br /><br />

<a href=3.html >LINK3</a><br /><br /><br />

<a href=4.html >LINK4</a><br />

</body></html>

27
Web Technologies & E-Commers

Output Screens:

28
Web Technologies & E-Commers
5. Work with layers

<html>

<head>

<title> WORKING WITH LAYERS</TITLE>

</head>

<body>

<div style="position: absolute;top: 50px;left: 5px;z-index: 2;font-size:50PX;color:red">LAYER 1 </div>

<div style="position: absolute;top: 70px;left: 50px;z-index: 1;font-size:50PX;color:green">LAYER 2 </div>

</body>

</html>

Output Screens:

29
Web Technologies & E-Commers
AIM :
5.Developing a Simple Bean Using the BDK:
This section presents an example that shows how to develop a simple Bean and connect it to other components via the
BDK.
Our new component is called the Colors Bean. It appears as either a rectangle or
ellipse that is filled with a color. A color is chosen at random when the Bean begins
execution. A public method can be invoked to change it. Each time the mouse is clicked
on the Bean, another random color is chosen. There is one boolean read/write property
that determines the shape.
The BDK is used to lay out an application with one instance of the Colors Bean and
one instance of the OurButton Bean. The buton is labeled “Change.” Each time it is
pressed, the color changes.

SOFTWARE DEVELOPMENT USING JAVA

Create a New Bean


Here are the steps that you must follow to create a new Bean:
1. Create a directory for the new Bean.
2. Create the Java source file(s).
3. Compile the source file(s).
4. Create a manifest file.
5. Generate a JAR file.
6. Start the BDK.
7. Test.

The following sections discuss each of these steps in detail.

Create a Directory for the New Bean


You need to make a directory for the Bean. To follow along with this example, create
c:\bdk\demo\sunw\demo\colors. Then change to that directory.
The Colors and OurButon Beans
Create the Source File for the New Bean

The source code for the Colors component is shown in the following listing. It is
located in the file Colors.java.

The import statement at the beginning of the file places it in the package named
sunw.demo.colors. Recall from Chapter 9 that the directory hierarchy corresponds to
the package hierarchy. Therefore, this file must be located in a subdirectory named
sunw\demo\colors relative to the CLASSPATH environment variable.

The color of the component is determined by the private Color variable color, and
its shape is determined by the private boolean variable rectangular.
The constructor defines an anonymous inner class that extends MouseAdapter and
overrides its mousePressed( ) method. The change( ) method is invoked in response to
30
Web Technologies & E-Commers
mouse presses. The component is initialized to a rectangular shape of 200 by 100 pixels.

The change( ) method is invoked to select a random color and repaint the component.
The getRectangular( ) and setRectangular( ) methods provide access to the one
property of this Bean. The change( ) method calls randomColor( ) to choose a color and
then calls repaint( ) to make the change visible. Notice that the paint( ) method uses the
rectangular and color variables to determine how to present the Bean.

// A simple Bean.
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() {
SOFTWARE DEVELOPMENT
USING JAVA
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) {
31
Web Technologies & E-Commers
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);
}
}
}

Compile the Source Code for the New Bean


Compile the source code to create a class file. Type the following:
javac Colors.java.
Create a Manifest File.

You must now create a manifest file. First, switch to the c:\bdk\demo directory. This
is the directory in which the manifest files for the BDK demos are located. Put the
source code for your manifest file in the file colors.mft. It is shown here:
Name: sunw/demo/colors/Colors.class
Java-Bean: True

This file indicates that there is one .class file in the JAR file and that it is a Java Bean.
Notice that the Colors.class file is in the package sunw.demo.colors and in the
subdirectory sunw\demo\colors relative to the current directory.
Generate a JAR File

Beans are included in the ToolBox window of the BDK only if they are in JAR files in the
directory c:\bdk\jars. These files are generated with the jar utility. Enter the following:
jar cfm ..\jars\colors.jar colors.mft sunw\demo\colors\*.class
This command creates the file colors.jar and places it in the directory c:\bdk\jars.
(You may wish to put this in a batch file for future use.)
Start the BDK

Change to the directory c:\bdk\beanbox and type run. This causes the BDK to start.
You should see three windows, titled ToolBox, BeanBox, and Properties. The ToolBox
window should include an entry labeled “Colors” for your new Bean.
Create an Instance of the Colors Bean

After you complete the preceding steps, create an instance of the Colors Bean in the
BeanBox window. Test your new component by pressing the mouse anywhere within
its borders. Its color immediately changes. Use the Properties window to change the
rectangular property from false to true. Its shape immediately changes.
32
Web Technologies & E-Commers
Create and Configure an Instance of the OurButon Bean
Create an instance of the OurButton Bean in the BeanBox window. Then follow
these steps:
1. Go to the Properties window and change the label of the Bean to “Change”.
You should see that the buton appearance changes immediately when this
property is changed.
2. Go to the menu bar of the BeanBox and select Edit | Events | action |
actionPerformed.
3. Move the cursor so that it is inside the Colors Bean display area, and click the
left mouse buton. You should see the Event Target Dialog dialog box.
4. The dialog box allows you to choose a method that should be invoked when
this buton is clicked. Select the entry labeled “change” and click the OK buton.
You should see a message box appear very briefly, stating that the tool is
“Generating and compiling adaptor class.”
5. Click on the buton. You should see the color change.
You might want to experiment with the Colors Bean a bit before moving on.

Output:

Create two Beans Traffic Light(implemented as a label with only three background colors-red, green, yellow) and
Automobile(Implemented as a Text Box which states its state/movement). The state of the Automobile should depend
on the following Light Transition table.
/*<applet code="Sig.class" height=300 width=200></applet>*/
import java.awt.*;
import java.lang.String;
33
Web Technologies & E-Commers
import java.awt.event.*;
import java.applet.Applet;
import java.applet.*;

public class Sig extends Applet implements ItemListener{


boolean c1,c2,c3;
String s1;
Checkbox r1,r2,r3;
CheckboxGroup cbg;
public void init(){
cbg=new CheckboxGroup();
Panel p=new Panel();
p.setLayout(new GridLayout());
add(r1=new Checkbox("red",cbg,false));
add(r2=new Checkbox("yellow",cbg,false));
add(r3=new Checkbox("green",cbg,false));
r1.addItemListener(this);
r2.addItemListener(this);
r3.addItemListener(this);
}
public void paint(Graphics g) {
g.setColor(Color.red);
g.drawOval(10, 30, 20, 20);
//System.out.println(s1);
g.setColor(Color.yellow);
g.drawOval(10, 60, 20, 20);
g.setColor(Color.green);
g.drawOval(10, 90, 20, 20);
s1=cbg.getSelectedCheckbox().getLabel();
if(s1=="red")
{
g.setColor(Color.red);
g.fillOval(10, 30, 20, 20);
}
else if(s1=="yellow")
{
g.setColor(Color.yellow);
g.fillOval(10, 60, 20, 20);
}
else if(s1=="green")
{
g.setColor(Color.green);
g.fillOval(10, 90, 20, 20);
}
}
34
Web Technologies & E-Commers
public void itemStateChanged(ItemEvent ie) {
repaint();
}
}

AIM:
6. Install TOMCAT web server. Convert the static webpages 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 should have
a separate Shopping Cart.

PROCEDURE:
First install the tomcat into the system.
Then make a subdirectly(eg., tr) in the \tomcat\webapps.
Under tr create WEB-INF directory and also place the html files in this tr directory only.
Next under WEB-INF create two subclasses lib,classes and web.xml
Next place all the class files under the classes and jar files(servlet-api.jar,classes12.jar
etc…) under lib subdirectories.
After this start tomcat by giving the following command at the instll_dir>tomcat>bin
Catalina.bat run
At the I.E(web browser) give the url as htp;//localhost:8080//tr/htmlfile or servlet url
patern
Portno 8080 is assigned for the tomcat.

Web.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"htp://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>Servlet 2.4 Examples</display-name>
<description>
Servlet 2.4 Examples.
</description>
<servlet>
<servlet-name>reg</servlet-name>
<servlet-class>reg</servlet-class>
</servlet>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>login</servlet-class>
</servlet>

<servlet>
35
Web Technologies & E-Commers
<servlet-name>profile</servlet-name>
<servlet-class>profile</servlet-class>
</servlet>
<servlet>
<servlet-name>catalog</servlet-name>
<servlet-class>catalog</servlet-class>
<servlet-mapping>
<servlet-name>order</servlet-name>
<url-p</servlet>
<servlet>
<servlet-name>order</servlet-name>
<servlet-class>order</servlet-class>
</servlet>
atern>order</url-patern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>catalog</servlet-name>
<url-patern>catalog</url-patern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>profile</servlet-name>
<url-patern>profile</url-patern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-patern>login</url-patern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>reg</servlet-name>
<url-patern>reg</url-patern>
</servlet-mapping>
</web-app>

Main.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htp://www.w3.org/1999/xhtml">
<body bgcolor="pink">
<br /><br /><br /><br /><br />
<h1 align="center"><U>ONLINE BOOK STORAGE</U></h1><br /><br /><br />
<h2 align="center"><pre>
<b>Welcome to online book storage.
Press LOGIN if you are having id
otherwise press REGISTRATION
</b></pre></h2>
36
Web Technologies & E-Commers
<br /><br /><pre>
<div align="center"><a href="/tr/login.html">LOGIN</a> <a href="/tr/reg.html">
REGISTRATION</a></div></pre>
</body>
</html>

Login.html
<html>
<body bgcolor="pink"><br /><br /><br />
<form name="myform" method="post" action="/tr/login">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id" /><br />
PASSWORD :<input type="password" name="pwd" /></pre><br /><br />
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok" onclick="validate()" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" />
</div>
</form>
</body>
</html>

Reg.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htp://www.w3.org/1999/xhtml">
<body bgcolor="pink"><br /><br />
<form name="myform" method="post" action="/tr/reg">
<div align="center"><pre>
NAME:<input type="text" name="name" /><br />
ADDRESS:<input type="text" name="addr" /><br />
CONTACT NUMBER:<input type="text" name="phno" /><br />
LOGINID:<input type="text" name="id" /><br />
PASSWORD:<input type="password" name="pwd" /></pre><br /><br
/>
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok" onclick="validate()" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" />
</div>
</form>
</body>
37
Web Technologies & E-Commers
</html>

Profile.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htp://www.w3.org/1999/xhtml">
<body bgcolor="pink"><br /><br /><br />
<form name="myform" method="post" action="/tr/profile">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id" /><br />
</pre><br /><br />
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok" onclick="validate()" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear" />
</div>
</form>
</body>
</html>

Catalog.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htp://www.w3.org/1999/xhtml">
<body bgcolor="pink"><br /><br /><br />
<form method="post" action="/tr/catalog">
<div align="center"><pre>
BOOK TITLE :<input type="text" name="title" /><br />
</pre><br /><br />
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok"
name="buton1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" name="buton2"/>
</div>
</form>
</body>
</html>

Order.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"htp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="htp://www.w3.org/1999/xhtml">
38
Web Technologies & E-Commers
<body bgcolor="pink"><br /><br />
<form method="post" action="/tr/reg">
<div align="center"><pre>
NAME:<input type="text" name="name" /><br />
PASSWORD:<input type="password" name="pwd" />
TITLE:<input type="text" name="title" /><br />
NO. OF BOOKS:<input type="text" name="no" /><br />
DATE:<input type="text" name="date" /><br />
CREDIT CARD NUMBER:<input type="password" name="cno" /><br /></pre><br
/><br />
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok" name="buton1"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear"
name="buton2"/>
</div>
</form>
</body>
</html>

Login.java
import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.htp.*;
public class login extends HtpServlet
{
public void service(HtpServletRequest req,HtpServletResponse resp)
throws ServletException,IOException
{
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String id=req.getParamenter("id");
String pwd=req.getParameter("pwd");
try
{
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1
521:orcl","scot","tiger");
Statement stmt=con.createStatement();
String sqlstmt="select id,password from login";
39
Web Technologies & E-Commers
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==0)
{
pw.println("SORRY INVALID ID TRY AGAIN
ID<br><br>");
pw.println("<a href=\"/tr/login.html\">press LOGIN to
RETRY</a>");
}
else
{
pw.println("VALID LOGIN ID<br><br>");
pw.println("<h3><ul>");
pw.println("<li><ahref=\"profile.html\"><fontcolor=\"blac
k\">USER PROFILE</font></a></li><br><br>");

pw.println("<li><ahref=\"catalog.html\"><fontcolor=\"black\">BO
OKS CATALOG</font></a></li><br><br>");
pw.println("<li><ahref=\"order.html\"><fontcolor=\"black\">ORD
ER CONFIRMATION</font></a></li><br><br>");
}
pw.println("</body></html>");
}
catch(Exception e)
{
resp.sendError(500,e.toString());
}
}
}

Reg.html
import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.htp.*;
40
Web Technologies & E-Commers
public class login extends HtpServlet
{
public void service(HtpServletRequest req,HtpServletResponse resp)
throws ServletException,IOException
{
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String name=req.getParamenter("name");
String addr=req.getParameter("addr");
String phno=req.getParameter("phno");
String id=req.getParamenter("id");
String pwd=req.getParameter("pwd");

int no=Integer.parseInt(phno);
try
{
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1
521:orcl","scot","tiger");
Statement stmt=con.createStatement();
String sqlstmt="select id,password from login";
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==1)
{
pw.println("SORRY INVALID ID ALREADY EXITS TRY
AGAIN WITH NEW ID<br><br>");
pw.println("<a href=\"/tr/reg.html\">press REGISTER to
RETRY</a>");
}
else
{
Statement stmt1=con.createStatement();
stmt1.executeUpdate("insertintologin
values("+names","+addr+","+no+","+id+","+pwd+")");
pw.println("YOUR DETAILS ARE
41
Web Technologies & E-Commers
ENTERED<br><br>");
pw.println("<a href=\"/tr/login.html\">press LOGIN to
login</a>");
}
pw.println("</body></html>");
}
catch(Exception e)
{
resp.sendError(500,e.toString());
}
}
}

Catlog.java
import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.htp.*;
public class login extends HtpServlet
{
public void service(HtpServletRequest req,HtpServletResponse resp)
throws ServletException,IOException
{
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String title=req.getParameter("title");
try
{
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1
521:orcl","scot","tiger");
Statement stmt=con.createStatement();
String sqlstmt="select id,password from login";
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
pw.println(",div align=\"center\">");
pw.println("TITLE:"+rs.getString(1)+"<br>");
pw.println("AUTHOR:"+rs.getString(2)+"<br>");
pw.println("VERSION:"+rs.getString(3)+"<br>");
pw.println("PUBLISHER:"+rs.getString(4)+"<br>");
42
Web Technologies & E-Commers
pw.println("COST:"+rs.getString(5)+"<br>");

pw.println("</div");
flag=1;
}
if(flag==0)
{
pw.println("SORRY INVALID TITLE TRY AGAIN
<br><br>");
pw.println("<a href=\"/tr/catalog.html\">press HERE to
RETRY</a>");
}
pw.println("</body></html>");
}
catch(Exception e)
{
resp.sendError(500,e.toString());
}
}
}

Profile.java
import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.htp.*;
public class login extends HtpServlet

{
public void service(HtpServletRequest req,HtpServletResponse resp)
throws ServletException,IOException
{
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String id=req.getParamenter("id");
try
{
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:
@localhost:1521:orcl","scot","tiger");
Statement stmt=con.createStatement();
43
Web Technologies & E-Commers
String sqlstmt="select * from login where id="+id+"";
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
pw.println("<br><br><br>");
while(rs.next())
{
pw.println("<div align=\"center\">");
pw.println("NAME :"+rs.getString(1)+"<br>");
pw.println("ADDRESS:"+rs.getString(2)+"<br>");
pw.println("PHONE NO:"+rs.getString(3)+"<br>");
pw.println("</div>");
flag=1;
}
if(flag==0)
{
pw.println("SORRY INVALID ID TRY AGAIN
ID<br><br>");
pw.println("<a href=\"/tr/profile.html\">press HERE to
RETRY</a>");
}
pw.println("</body></html>");
}
catch(Exception e)
{
resp.sendError(500,e.toString());
}
}
}

Order.java
import java.sql.*;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.htp.*;
public class login extends HtpServlet
{
public void service(HtpServletRequest req,HtpServletResponse resp)
throws ServletException,IOException
{
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String id=req.getParamenter("id");
44
Web Technologies & E-Commers
String pwd=req.getParameter("pwd");
String title=req.getParameter("title");
String count1=req.getParameter("no");
String date=req.getParameter("date");
String cno=req.getParameter("cno");
int count=Integer.parseInt(count1);
try
{
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1
521:orcl","scot","tiger");

Statement stmt=con.createStatement();
String sqlstmt="select id,password from login";
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0,amount,x;
while(rs.next())
{
if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==0)
{
pw.println("SORRY INVALID ID TRY AGAIN
ID<br><br>");
pw.println("<a href=\\"/tr/order.html\\">press HERE to
RETRY</a>");
}
else
{
Statement stmt2=con.createStatement();
String s="select cost from book where title="+title+"";
ResultSet rs1=stmt2.executeQuery(s);
int flag1=0;
while(rs1.next())
{
flag1=1;
x=Integer.parseInt(rs1.getString(1));
amount=count*x;
pw.println("AMOUNT
:"+amount+"<br><br><br><br>");
45
Web Technologies & E-Commers
Statement stmt1=con.createStatement();
stmt1.executeUpdate("insertintodetails
values('"+id+",'"+title+"'+amount+'","'+cno+'")"');
pw.println("YOUR ORDER has taken<br>");
}
if(flag1==0)
{
pw.println("SORRY INVALID ID TRY AGAIN
ID<br><br>");
pw.println("<a href=\\"/tr/order.html\\">press HERE to
RETRY</a>");
}
}
pw.println("</body></html>");
con.close();

catch(Exception e)
{
resp.sendError(500,e.toString());
}
}

Output :

46
Web Technologies & E-Commers

47
Web Technologies & E-Commers

48
Web Technologies & E-Commers

AIM:
7. 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 and books information. The books catalogue should be
dynamically loaded from the database. Follow the MVC architecture while doing the website.

PROCEDURE:
1) Create your own directory under tomcat/webapps (e.g. tr1)
2) Copy the html files in tr1
3) Copy the jsp files also into tr1
4) Start tomcat give the following command Catalina.bat run
5) At install-dir/bin at I.E give url as htp://localhost:8081/tr1/main.html

Main.html:
<html>
<body bgcolor=”pink”>

49
Web Technologies & E-Commers
<br><br><br><br><br><br>
<h1 align=”center”>>U>ONLINE BOOK STORAGE</u></h1><br><br><br>
<h2 align=”center”><PRE>
<b> Welcome to online book storage.
Press LOGIN if you are having id
Otherwise press REGISTRATION
</b></PRE></h2>
<br><br><pre>
<div align=”center”><a href=”/tr/login.html”>LOGIN</a>
href=”/tr/login.html”>REGISTRATION</a></div></pre>
</body></html>

Login.html:
<html>
<body bgcolor=”pink”><br><br><br>
<form name="myform" method="post" action=/tr1/login.jsp">
<div align="center"><pre>
LOGIN ID : <input type="passwors" name="pwd"></pre><br><br>
PASSWORD : <input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<inputype="submit"value="ok"
onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">
</form>
</body>
</html>

Reg.html:
<html>
<body bgcolor="pink"><br><br>
<form name="myform" method="post" action="/tr1/reg.jsp">
<div align="center"><pre>
NAME:<input type="text" name="name"><br>
ADDRESS :<input type="text" name="addr"><br>
CONTACT NUMBER : <input type="text" name="phno"><br>
LOGIN ID : <input type="text" name="id"><br>
PASSWORD : <input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<inputype="submit"value="ok"
onClick="validate()">()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">
</form>
</body>
50
Web Technologies & E-Commers
</html>

Profile.html:
<html>
<body bgcolor="pink"><br><br>
<form name="myform" method="post" action="/tr1/profile.jsp">
<div align="center"><pre>
LOGIN ID : <input type="text" name="id"><br>
</pre><br><br>
</div>
<br><br>
<div align="center">
<inputype="submit"value="ok"
onClick="validate()">()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="clear">
</form>
</body>
</html>

Catalog.html:
<html>
<body bgcolor="pink"><br><br><br>
<form method="post" action="/tr1/catalog.jsp">
<div align="center"><pre>
BOOK TITLE : <input type="text" name="title"><br>
</pre><br><br>
</div>
<br><br>
<div align="center">
<inputype="submit"value="ok"
name=”buton1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<inputype="reset"value="clear"
name=”buton2”>
</form>
</body>
</html>

Order.html:
<html>
<body bgcolor="pink"><br><br><br>
<form method="post" action="/tr1/order.jsp">
<div align="center"><pre>
LOGIN ID:<input type="text" name="id"><br>
PASSWORD : <input type="password" name="pwd"><br>
TITLE:<input type="text" name="title"><br>
NO. OF BOOKS : <input type="text" name="no"><br>
DATE: <input type="text" name="date"><br>
51
Web Technologies & E-Commers
CREDIT CARD NUMBER : <input type="password" name="cno"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name=”buton1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
type="reset" value="clear" name=”buton2”>
</form>
</body>
</html>

Login.jsp:
%@page import=”java.sql.*”%
%@page import=”java.io.*”%
<%
out.println(“<html><body bgcolor=\”pink\”>”);
String id=request.getParameter(“id”);
String pwd=request.getParameter(“pwd”);
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection
con=DriverManager.getConnection(“jdbc:oracle:thin:@localhost:1521:orcl”,”scot”,”tiger”);
Statement stmt=con.createStatement();
String sqlstmt=”select id,password from login where id=”+id+” and password=”+pwd+””;
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
flag=1;
}
if(flag==0)
{
out.println(“SORRY INVALID ID TRY AGAIN ID<br><br>”);
out.println(“ <a href=\”/tr1/login.html\”>press LOGIN to RETRY</a>”);
}
else
{

out.println(“VALID LOGIN ID<br><br>”);


out.println(“<h3><ul>”);
out.println(“<li><ahref=\”profile.html\”><fontcolor=\”black\”>USER
PROFILE</font></a></li><br><br>”);
out.println(“<li><ahref=\”catalog.html\”><fontcolor=\”black\”>BOOKS
CATALOG</font></a></li><br><br>”);
out.println(“<li><ahref=\”order.html\”><fontcolor=\”black\”>ORDER
CONFIRMATION</font></a></li><br><br>”);
52
Web Technologies & E-Commers
out.println(“</ul>”);
}
out.println(“<body></html>”);
%>
Reg.jsp:
%@page import=”java.sql.*”%
%@page import=”java.io.*”%
<%
out.println(“<html><body bgcolor=\”pink\”>”);
String name=request.getParameter(“name”);
String addr=request.getParameter(“addr”);
String phno=request.getParameter(“phno”);
String id=request.getParameter(“id”);
String pwd=request.getParameter(“pwd”);
int no=Integer.parseInt(phno);
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection con=
DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scot”,”tiger”);
Statement stmt=con.createStatement();
String sqlstmt=”select id from login”;
ResultSet rs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next())
{
if(id.equals(rs.getString(1)))
{
flag=1;
}
}
if(flag==1)

{
out.println(“SORRY LOGIN ID ALREADY EXISTS TRY AGAIN WITH NEW ID <br><br>”);
out.println(“<a href=\”/tr1/reg.html\”>press REGISTER to RETRY</a>”);
}
else
{
Statement stmt1=con.createStatement ();
stmt1.executeUpdate (“insert into login values (“+name+”,”+addr+”,”+no+”,”+id+”,”+pwd+”)”);
out.println (“YOU DETAILS ARE ENTERED <br><br>”);
out.println (“<a href =\”/tr1/login.html\”>press LOGIN to login</a>”);
}
out.println (“</body></html>”);
%>
53
Web Technologies & E-Commers

Profile.jsp:
<%@page import=”java.sql.*”%>
<%@page import=”java.io.*”%>
<%
out.println (“<html><body bgcolor=\”pink\”>”);
String id=request.getParameter(“id”);
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.regiserDriver(d);
Connection con=
DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scot”,”tiger”);
Statement stmt=con.createStatement ();
String sqlstmt=”select * from login where id=”+id+””;
ResultSet rs=stmt.executeQuery (sqlstmt);
int flag=0;
while(rs.next())
{
out.println (“<div align=\”center\”>”);
out.println (“NAME:”+rs.getString(1)+”<br>”);
out.println (“ADDRESS :”+rs.getString(2)+”<br>”);
out.println (“PHONE NO :”+rs.getString(3)+”<br>”);
out.println (“</div>”);
flag=1;
}
if(flag==0)
{
out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”);
out.println(“<a href=\”/tr1/profile.html\”>press HERE to RETRY </a>”);

}
out.println (“</body></html>”); %>
Catalog.jsp:
<%@page import=”java.sql.*”%>
<%@page import=”java.io.*”%>
<%
out.println (“<html><body bgcolor=\”pink\”>”);
String title=request.getParameter (“title”);
Driver d=new oracle.jdbc.driver.OracleDriver ();
DriverManager.regiserDriver (d);
Connection con=
DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scot”,”tiger”);
Statement stmt=con.createStatement ();
String sqlstmt=”select * from book where title=”+title+””;
ResultSet rs=stmt.executeQuery (sqlstmt);
54
Web Technologies & E-Commers
int flag=0;
while(rs.next())
{
out.println (“<div align=\”center\”>”);
out.println (“TITLE:”+rs.getString(1)+”<br>”);
out.println (“AUTHOR :”+rs.getString(2)+”<br>”);
out.println (“VERSION:”+rs.getString(3)+”<br>”);
out.println (“PUBLISHER :” +rs.getString(4)+”<br>”);
out.println (“COST :” +rs.getString(5)+”<br>”);
out.println (“</div>”);
flag=1;
}
if(flag==0)
{
out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”);
out.println(“<a href=\”/tr1/catalog.html\”>press HERE to RETRY </a>”);
}
out.println (“</body></html>”);
%>
Order.jsp:
<%@page import=”java.sql.*”%>
<%@page import=”java.io.*”%>
<%
out.println (“<html><body bgcolor=\”pink\”>”);
String id=request.getParameter (“id”);
String pwd=request.getParameter (“pwd”);
String title=request.getParameter (“title”);
String count1=request.getParameter (“no”);
String date=request.getParameter (“date”);
String cno=request.getParameter (“cno”);
int count=Integer.parseInt(count1);
Driver d=new oracle.jdbc.driver.OracleDriver ();
DriverManager.regiserDriver (d);
Connection con=
DriverManager.getConnection (“jdbc:oracle:thin:@localhost:1521:orcl”,”scot”,”tiger”);
Statement stmt=con.createStatement ();
String sqlstmt=”select id, password from login”;
ResultSet rs=stmt.executeQuery (sqlstmt);
int flag=0,amount,x;
while(rs.next())
{
if(id.equals(rs.getString(1))&& pwd.equals(rs.getString(2)))
{
flag=1;
}
55
Web Technologies & E-Commers
}

if(flag==0)
{
out.println(“SORRY INVALID ID TRY AGAIN ID <br><br>”);
out.println(“<a href=\”/tr1/order.html\”>press HERE to RETRY </a>”);
}
else
{
Statement stmt2=con.createStatement();
String s=”select cost from book where title=”+title+””;
ResultSet rs1=stmt2.executeQuery(s);
int flag1=0;
while(rs1.next())
{
flag1=1;
x=Integer.parseInt(rs1.getString(1));
amount=count*x;
out.println(“AMOUNT :”+amount+”<br><br><br><br>”);
Statement stmt1=con.createStatement ();
stmt1.executeUpdate (“insert into details (“+id+”,”+title+”,”+amount+”,”+date+”,”+cno+”)”);
out.println (“YOU ORDER HAS TAKEN<br>”);
}
if(flag1==0)
{
out.println(“SORRY INVALID BOOK TRY AGAIN <br><br>”);
out.println(“<a href=\”/tr1/order.html\”>press HERE to RETRY </a>”);
}
}out.println (“</body></html>”);%>

56
Web Technologies & E-Commers

57
Web Technologies & E-Commers

58
Web Technologies & E-Commers

59
Web Technologies & E-Commers

60
Web Technologies & E-Commers
AIM : Write a script for selection sort.

PROGRAM
<html>
<head>
<title> Sort
</title>
<script language="Javascript">
var b,i,j,temp;
var a;
a=[];
document.write("Enter array");
for(i=0;i<5;i++)
{
b=prompt("enter array element=","0");
a[i]=parseInt(b);
}
for(i=0;i<5;i++)
{
document.write("<br>"+a[i]);
}
document.write("<br>Sorted array is");
for(i=0;i<5;i++)
{
for(j=0;j<5;j++)
{
if(a[i]<a[j])
{
temp=a[i];
a[i]=a[j];
a[j]=temp;
}
}
}
for(i=0;i<5;i++)
{
document.write("<br>"+a[i]);
}
</script> </head></html>

61
Web Technologies & E-Commers
OUTPUT

Enter array
4
2
5

Sorted array is
2
4
5

62
Web Technologies & E-Commers
AIM : Write Java Script that inputs three integers from the user and outputs their sum, average, largest. Use alert dialog
box to display results.

PROGRAM :
<html> <head> <title> MAX </title>
<script language="javascript">
var a,b,c,n1,n2,n3,m1,m2,sum,avg;
a=prompt("enter 1st no="," ");
b=prompt("enter 2nd no="," ");
c=prompt("enter 3rd no="," ");
n1=parseInt(a);
n2=parseInt(b);
n3=parseInt(c);
sum=n1+n2+n3;
avg=sum/3;
m1=Math.max(n1,n2);
m2=Math.max(n3,m1);
alert("the sum is= "+sum);
alert("the avg is= "+m2);
alert("the max no is "+m2);
</script> </head></html>

OUTPUT :

63
Web Technologies & E-Commers

64
Web Technologies & E-Commers
AIM : Write a script to write word equivalent of a check amount.

PROGRAM
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var checkflag = "false";

function check(field)
{
if (checkflag == "false")
{
for (i = 0; i < field.length; i++)
{
field[i].checked = true;}
checkflag = "true";
return "Uncheck All";
}
else
{
for (i = 0; i < field.length; i++)
{
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}

</script>
</HEAD>
<BODY>
<center>
<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>
<inputype=buton value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>
</form>
</center>
</body>
</html>

65
Web Technologies & E-Commers

OUTPUT

66
Web Technologies & E-Commers
AIM : Practice writing css rules.

PROGRAM
<html>
<head>
<title>style sheets</title>
<style type=”text/css”></head>
em{backgroundcolor:#8000ff;color=white}
h1{font family:Lucida console;color:red}
p{font size:30pt}
sp{color:red}
</style>
</head>
<body>
<h2class=”sp”>testing</h2>
<em><h1>test</h1></em>
<em>test1</em>
<p>test2</p>
</body>
</html>

OUTPUT
testing
test
test1
test2

67
Web Technologies & E-Commers
AIM : Write a web page that displays grades of a student.

PROGRAM
<html>
<head>
<title> STUDENT GRADES
</title>
<script language="java script">
var a,n,b,c,sum=0,avg=0;
b=prompt("enter student no=","0");
n=parseInt(b);
while(n<=10)
{ a=prompt("enter ur grade=","0");
c=parseInt(a);
sum=sum+c;
n++;
}
avg=sum/n;
document.write("avg is"+avg);
</script>
</head></html>

68
Web Technologies & E-Commers
AIM : Write a function that responds to a click anywhere on the page.

PROGRAM
<html>
<body>
<center>
[<a href="/" onMouseOver="document.bgColor='Green'">GREEN</a>]
[<a href="/" onMouseOver="document.bgColor='Red'">RED</a>]
[<a href="/" onMouseOver="document.bgColor='orange'">orange</a>]
[<a href="/" onMouseOver="document.bgColor='green'">brightgreen</a>]
[<a href="/" onMouseOver="document.bgColor='seagreen'">seagreen</a>]
</center>
</body>
</html>

69
Web Technologies & E-Commers
OUTPUT

70
Web Technologies & E-Commers
AIM : Program for implementation of Fonts.

PROGRAM
<html>
<head>
<title>Font Test</title>
</head>
<body>
<br><b><font face=”Times New Roman”>Font Check</font></b>
<br><i><font face=”Times New Roman”><font size=4><font color=”black”>All Operations</font></i>
<br><i><b>Bold italic check</b></i>
</body>
</html>

OUTPUT
Font Check
All Operations
Bold italic check

AIM : Write A Program for creating a table.

PROGRAM

<! code to show the use of tables>

<html>

<head>

<title> Using Tables</title>

</head>

<body><center>

<table border="1" width="5" height="5" bordercolor="red">

<caption> Student Marks </caption>

<thead>
71
Web Technologies & E-Commers
<tr>

<th>Name</th>

<th>Marks</th>

</tr>

</thead>

<tbody>

<tr>

<td>alok</td>

<td>90</td>

</tr>

<tr>

<td>anuj</td>

<td>90</td>

</tr>

<tr>

<td>ankush</td>

<td>90</td>

</tr>

</tbody>

<tfoot>

<tr>

<th>Avg Marks</th>

<th>90</th>

</tr>

</tfoot>

72
Web Technologies & E-Commers
</body>

</html>

OUTPUT

AIM : Write A Program for implementation of List.

PROGRAM
<html>
<body>
<ul>
<li>list1</li>
</ul><ul> <li> JNTU WORLD </li>
<ol>
<li>IT</li>
<li>CSE</li>
<li>ECE</li>
</ol></ol></ul></body></html>

OUTPUT

73
Web Technologies & E-Commers
• list1
• JNTU WORLD
1. IT
2. CSE
3. ECE
AIM : Write a java script to compute addition of two numbers.
PROGRAM
<html>
<head>
<title>
Java Script Add
</title>
<script language="java script">
alert("Addition \n of two numbers!");
var num1, num2,n1,n2,sum;
num1=window. prompt("Enter the first number","0");
num2=window. prompt("Enter the second number","0");
n1=parseInt(num1);
n2=parseInt(num2);
sum=n1+n2;
alert("sum is"+sum);
</script>
</head>
<body>

</body>
</html>
OUTPUT

74
Web Technologies & E-Commers

Addition of 10 and 20 : 30

AIM : Write A Program for implementation of Switch case.

PROGRAM
<html>
<head>
<title>
USING THE SWITCH STATEMENT
</title>
<script language ="Javascript">
var num=true;var choice,ch,ft,lt,head;
choice=window.prompt(" 1. BOLD 2. ITALICS 3. UNDERLINED ......","1");
ch =parseInt(choice);
switch(ch)
{
case 1: ft="<b>";
lt="</b>";
head="<h1> This is in BOLD </h1>";
break;
case 2: ft="<i>";
lt="</i>";
head="<h1> This is in ITALICS </h1>";
break;
case 3: ft="<u>";
lt="</u>";
head="<h1> This is in UNDERLINED </h1>";
break;
default : num=false;
break;
}

75
Web Technologies & E-Commers
if(num==true)
document.write(head+ft+" <h1>Text </h1>"+lt);
else
document.write(" <h1>Wrong Choice ! try again.");
</script>
</head>
<body>
</body> </html>

OUTPUT

This is in UNDERLINED
Text

AIM : Write A Program to find maximum of 3 no’s.

PROGRAM
<html>
<head> <title> Maximum of Number </title>
<script language ="Javascript">
var a,b,c,a1,b1,c1,max1,max2;
a=window.prompt("Enter first number >>","0");
b=window.prompt("Enter second number >>","1");
c=window.prompt("Enter third number >>","2");

a1=parseInt(a);
b1=parseInt(b);
76
Web Technologies & E-Commers
c1=parseInt(c);
max1=Math.max(a,b);
max2=Math.max(max1,c);
document.write("<br><br><br><center><h1>Maximum number of "+a1+", "+b1+" and "+c1+" is "+max2);
</script>
<body></body>
</html>

77
Web Technologies & E-Commers
Output

Maximum number of 6, 1 and 9 is 9

78
Web Technologies & E-Commers
AIM : Write A Program for Entering a password.

PROGRAM
<html>
<head>
<title>event clicking</title>
<script language="javascript">
function passwordCheck()
{
var pw=ole.pw.value;
var cpw=ole.cpw.value;
if(pw!=cpw)
window.alert("Re-enter your password");
}
</script></head>

<center>
<body font size=5 bgcolor="cyan" leftmargin=120 topmargin=120 >
<Form id="ole" onSubmit="passwordCheck(this)">

PASSWORD:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=password name="pw"size=10 max length=8 > </input> <br><br><br>
CONFIRM PASSWORD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=password name="cpw"size=10 max length=8 > </input> <br><br><br>
<input type="submit" name="sub" value="submit"> &nbsp; &nbsp;
<input type="reset" name="rt" value="reset"></center
</body>
</html>

79
Web Technologies & E-Commers
OUTPUT :

80
Web Technologies & E-Commers
AIM : Write A Program for implementation of Thambola.

PROGRAM
<html>
<head>
<title> J Script </title>
<script language="javascript">
var value;
alert("thambola");
document.writeln("<table border=1 width=50% align=center> ");

document.writeln("<caption> Thambola </caption><tr>");

for(var i=1;i<=15;i++)
{

value=Math.floor(1+Math.random()*100);
document.writeln("<td>"+value+"</td>");
if(i%5==0 )
document.writeln("</tr><tr>");
}
document.writeln("</tr></table>");

</script>
</head>
</html>

OUTPUT

AIM : Write A Program for Factorial.

81
Web Technologies & E-Commers

PROGRAM
<html>
<head><u><center><b>RECURSIVE FACTORIAL</b><br></u>
<title>
factorial
</title>
<script lang="javascript">
var i,fact,a,n;
a=prompt("enter any no","0");
n=parseInt(a);
for (i=1;i<=n;i++)
{
res=fact(i);
document.writeln("<br> THE FACTORIAL OF "+i+" IS >> "+res);
}
function fact(x)
{
if(x==0 || x==1)
return(1);
else
return(x*fact(x-1));
}
</script>
</head>
</html>

OUTPUT

RECURSIVE FACTORIAL

THE FACTORIAL OF 1 IS >> 1


THE FACTORIAL OF 2 IS >> 2
THE FACTORIAL OF 3 IS >> 6
THE FACTORIAL OF 4 IS >> 24
THE FACTORIAL OF 5 IS >> 120

AIM : Write A Program for addition of two matrices.

82
Web Technologies & E-Commers
PROGRAM
<html>
<head>
<title>Array Addition</title>
<script language="javascript">
var a,n,i,j,b,c;
a=[[],[]];
b=[[],[]];
c=[[],[]];
n=parseInt(window.prompt("Enter the array size"," "));
window.alert("Enter the elements in the first array");
for (i=0;i<n;i++)
{
for (j=0;j<n;j++)
{
a[i][j]=parseInt(window.prompt("Enter the element",""));
}
}
window.alert("Enter the elements in the second array");
for (i=0;i<n;i++)
{
for (j=0;j<n;j++)
{
b[i][j]=parseInt(window.prompt("Enter the element",""));
}
}
document.writeln("<br>The elements of Ist Matrix are..");
for (i=0;i<n;i++)
{
for (j=0;j<n;j++)
{
document.writeln(a[i][j]);
}
}
document.writeln("<br>The elements of IInd Matrix are..");
for (i=0;i<n;i++)
{
for (j=0;j<n;j++)
{
document.writeln(b[i][j]);
}
}
for (i=0;i<n;i++)
{
for (j=0;j<n;j++)
{
c[i][j]=a[i][j]+b[i][j];
}
}
document.writeln("<br>The addition of matrices is:");
for (i=0;i<n;i++)

83
Web Technologies & E-Commers
{
for (j=0;j<n;j++)
{

document.writeln(c[i][j]);
}
}
</script>
</head>
</html>

OUTPUT

84
Web Technologies & E-Commers

85
Web Technologies & E-Commers

The elements of Ist Matrix are : 1 1 1 1


The elements of IInd Matrix are : 1 1 1 1
The addition of matrices is : 2 2 2 2

86
Web Technologies & E-Commers

AIM : Write A Program for Bubble Sort.


PROGRAM
<html>
<head>
<title>Bubble Sort</title>
<script language="JavaScript">
var a=[3,5,2,9,1,8]
var t,n=6;
for( var i=0;i<n;i++)
{
for(var j=0;j<n-1;j++)
{
if(a[j]>a[j+1])
{
t=a[j];
a[j]=a[j+1];
a[j+1]=t;
}
}
}
document.write("<h1>The sorted order is:&nbsp;");
for(i=0;i<n;i++)
{
document.write(a[i]);
document.write("&nbsp;&nbsp;");
}
</script>
</head>
<body topmargin=50 leftmargin=100></body>
</html>

OUTPUT
The sorted order is : 1 2 3 5 8 9

87
Web Technologies & E-Commers
AIM : Write A Program for implementation of Linear Search .

PROGRAM
<html>
<head>
<title>Array Addition</title>
<script language="javascript">
var flag=0,a,n,key,i
var a=new Array(10);
n=parseInt(window.prompt("Enter the size of the array",""));
window.alert("Enter the elements in the array");
for (i=0;i<n;i++)
{
a[i]=parseInt(window.prompt("Enter the element ",""));
}
key=parseInt(window.prompt("Enter the searching element",""));
for (i=0;i<n;i++)
{
if (a[i]==key)
{
flag=1;
window.alert(" element is found at location "+(i+1));
}
}
if (flag==0)
window.alert(" element is not

found");//document.writeln("The element is not found");


</script>
</head>
<body bgcolor="pink">
</body>
</html>

88
Web Technologies & E-Commers
OUTPUT

89
Web Technologies & E-Commers

90
Web Technologies & E-Commers
AIM : Write A Program for displaying an image on mouse click.

PROGRAM

<html>
<head>
<title>onclick image</title>
</head>
<body leftmargin=100 topmargin=100 bgcolor="#111111">
<img name="images" width=200 height=200 src=1.gif "><p>
<form><h3>
<input type="buton" value="image1" onClick="document.images.src='1.gif' ">
<input type="buton" value="image2"
onClick="document.images.src='2.gif' ">
<input type="buton" value="image3" onClick="document.images.src='3.gif' ">
</form></h3></body></html>

91
Web Technologies & E-Commers
OUTPUT

92
Web Technologies & E-Commers
AIM : Write A Program Code To Exhibit Blending Effect.

PROGRAM
<html>
<head>
<title> J Script </title>
<script language="javascript">
function blendOut()
{
//textInput.filters("blendTrans").apply();
//textInput.style.visibility="hidden";
textInput.filters("blendTrans").play();
}
</script>
</head>
<body>
<div id="textInput" onmouseover="blendOut()" style="width:100;
filter:blendTrans(duration=5)">
<h1> MULTI MEDIA </h1> </div>
</body>
</html>

93

Das könnte Ihnen auch gefallen