Você está na página 1de 60

ANAND INSTITUTE OF HIGHER TECHNOLOGY

KAZHIPATTUR, CHENNAI-603 103.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING


CS2358-INTERNET PROGRAMMING LAB

LAB MANUAL
Prepared by,
Mr.S.Praveen
Kumar,AP/CSE
Ms.R.Femila
Goldy,AP/CSE

CS2358 INTERNET PROGRAMMING LAB

LTPC
1 0 3 2

LIST OF EXPERIMENTS
1. Create a web page with the following using HTML
i) To embed an image map in a web page
ii) To fix the hot spots
iii) Show all the related information when the hot spots are clicked.
2. Create a web page with all types of Cascading style sheets.
3. Client Side Scripts for Validating Web Form Controls using DHTML
4. Write programs in Java to create applets incorporating the following features:
5. Create a color palette with matrix of buttons. Set background and foreground of the control
text area by selecting a color from Color palette.
In order to select Foreground or background use check box control as radio buttons
To set background images
6. Write programs in Java using Servlets:
To invoke servlets from HTML forms
To invoke servlets from Applets
7. Write programs in Java to create three-tier applications using JSP and Databases
for conducting on-line examination.
for displaying student mark list. Assume that student information is available in a
database which has been stored in a database server.
8. Programs using XML Schema XSLT/XSL
9. Programs using AJAX
10. Consider a case where we have two web Services- an airline service and a travel
agent and the travel agent is searching for an airline. Implement this scenario using Web
Services and Database.

Ex. No. 1

STUDY OF BASIC HTML TAGS

AIM:
To study basic HTML tags
Basic tags
1. <HTML> and </HTML>
Purpose: Indicates the beginning and the end of an HTML document
2. <HEAD> and </HEAD>
Purpose: Indicates the beginning and the end of an Header section of a document
3. <TITLE> and </TITLE>
Purpose: Specifies the text that should appear on the title bar of a browser window
4. <BODY> and </BODY>
Purpose: Indicates the beginning and the end of the documents content
5. <H1><H6> and </H1></H6>
Purpose: Headings are defined within these tags
<H1> defines the largest heading
<H6> defines the smallest heading
6. <P> and </P>
Purpose: Indicates the beginning and end of a paragraph in a HTML document
7. <BR>

Purpose: Inserts a line break without the need to start a new paragraph

8. <! -- -- >
Purpose: The comment tag, which indicates the browser that the text enclosed within
the tag, should be ignored
9. <HR>
Purpose: Defines a Horizontal rule, inserts a line in the page
Text Formatting tags
10. <B> and </B>
Purpose: Displays the text enclosed with these tags in Bold
11. <I> and </I>
Purpose: Displays the text enclosed with these tags in Italics
12. <BIG> and </BIG>
Purpose: Displays the text enclosed with these tags in bigger size
13. <SMALL> and </SMALL>
Purpose: Displays the text enclosed with these tags in smaller size
14. <SUB> and </SUB>
Purpose: Displays the text enclosed with these tags as a subscript
15. <SUP> and </SUP>
Purpose: Displays the text enclosed with these tags as a superscript
16. <FONT> and </FONT>
Purpose: Displays the text enclosed with these tags in specified font

Anchor tag
17. <A> and </A>
Purpose: HTML uses the <A> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web
Attributes: 1. HREF - Addresses the document to link to
2. TARGET Defines where the linked document should be displayed
Frames
18. <FRAMESET> and </FRAMESET>
Purpose: Defines how to divide the window into frames
Attributes: 1. COLS No: of columns the window should be divided into
2. ROWS No: of rows the window should be divided into
19. <FRAME> and </FRAME>
Purpose: Defines the page to be displayed in the frame
Attributes: 1. SRC The web page that should be displayed in the frame
2. NAME The name of the frame where other pages are displayed
Tables
20. <TABLE> and </TABLE>
Purpose: Defines a table
Attributes: 1. CELLSPACING Spacing between two cells in table
2. CELLPADDING Spacing between cell and its contents

3. BORDER Defines the border of the table


21. <TR>, <TH>, <TD> and </TR>, </TH>, </TD>
Purpose: Defines a row, a heading and a cell respectively
Lists
22. <OL> and </OL>

Purpose: Defines an ordered list of items, marked by numbers


23. <UL> and </UL>
Purpose: Defines an unordered list of items, marked by bullets
24. <LI> and </LI>
Purpose: Defines a list item
25. <DL> and </DL>
Purpose: Denotes a list of definitions
26. <DT> and </DT>
Purpose: Denotes a definition item in the definition list
27. <DL> and </DL>
Purpose: Denotes a definition for a definition item in the definition list
Forms
28. <FORM> and </FORM>
Purpose: Indicates the beginning and the end of a form, contains form elements
Attributes: 1. NAME Name given to the form
2. ACTION URL to be redirected to, when form is submitted
3. METHOD Get or post methods, to post values
29. <INPUT> and </INPUT>
Purpose: Indicates an input element in a form
Attributes: 1. TYPE Specifies the type of input element
2. NAME Specifies the name associated to the input element
3. VALUE Specifies the value assigned to the input element
30. <TEXTAREA> and </TEXTAREA>
Purpose: Defines a Text area, a larger text box with specified rows and columns
31. <SELECT> and </SELECT>

Purpose: Defines a selectable list of items (a drop down box)


32. <OPTION> and </OPTION>
Purpose: Defines an option in the selectable list of items
33. <BUTTON> and </BUTTON>
Purpose: Defines a push button in the form
34. <SUBMIT> and </SUBMIT>
Purpose: Defines a submit button for the form, to submit input elements values
Images
35. <IMG> and </IMG>
Purpose: Defines an image in the document
Attributes: 1. SRC The image file to be displayed
2. ALT Displays alternate text, if the browser doesnt load images

Ex. No. 2

IMAGE MAPPING

AIM:
To write the html code to perform the Image Mapping.
DESCRIPTION:
usemap attribute
specifies an image as a client-side image-map (an image-map is an image with
clickable areas)
Syntax
<img usemap="#mapname">
Value
#mapname

Description

A hash character ("#") plus the name or id of the <map>


element to use

<map>
Defines an image-map
Attribute:
name
creates a relationship between the image and the map

associated with the <img>'s usemap attribute

<area>
Defines a clickable area inside an image-map.
<area> element is always nested inside a <map> tag
Attribute:
alt
specifies an alternate text for an area, if the image cannot be displayed.
Syntax
<area alt="text">
target
Specifies where to open the target URL
Syntax
<area target="_blank | _self | _parent | _top | framename">

Attribute Values
Value
_blank
_self
_parent
_top
frame name

Description
Opens the linked document in a new window or tab
Opens the linked document in the same frame as it was clicked
Opens the linked document in the parent frame
Opens the linked document in the full body of the window
Opens the linked document in a named frame

coords
Specifies the coordinates of an area in an image-map.
Syntax
<area coords="value">
Value
x1,y1,x2,y2

Description
Specifies the coordinates of the left, top, right, bottom corner of the
rectangle (for shape="rect")

x,y,radius

Specifies the coordinates of the circle center and the radius (for
shape="circle")

x1,y1,x2,y2,..,xn,yn Specifies the coordinates of the edges of the polygon. If the first and last
coordinate pairs are not the same, the browser will add the last coordinate
pair to close the polygon (for shape="poly")
href
specifies the hyperlink target for the area.
Value
URL

Description
Possible values:
An absolute URL - points to another web site (like
href="http://www.example.com/sun.htm")
A relative URL - points to a file within a web site (like href="sun.htm")

Shape
Specifies the shape of the area
Syntax
<area shape="default|rect|circle|poly">

Value
default
rect
circle
poly

Description
Specifies the entire region
Defines a rectangular region
Defines a circular region
Defines a polygonal region

PROGRAM:
Usemap.html
<Html>
<Body>
<Img src = india.jpg usemap = #id1>
<map name = id1>
<area shape = "circle" href = "Kashmir.html" coords = "145,38,5" alt =
"Kashmir">
<area shape = "circle" href = "Ooty.html" coords = "190,297,5" alt = "Ooty">
<area shape = "circle" href = "Kochi.html" coords = "157,296,5" alt =
"Kochi">
</map>
</Body>
</Html>
Ooty.html
<Html>
<Body>

<Img src = "ooty.jpg"/>


</body>
</html>
Kochi.html
<Html>
<Body>
<img src = "kochi.jpg"/>
</body>
</html>
Kashmir.html
<Html>
<Body>
<img src = "kashmir.jpg"/>
</body>
</html>

OUTPUT:

Ex. No. 3

WEB PAGE CREATION USING TYPES OF CSS

AIM:
To create a webpage with all types of Cascading style sheets with HTML pages.
DESCRIPTION:

CSS has been added to HTML to give web developers

To get more control over their design and content layout.

To create a standard set of commands to control the styles of all the subsequent pages.

Web site designed in the CSS are faster to change and update.

Communication among multiple developers easier with CSS.

INSERTING A STYLE SHEET:


External Style Sheet
Internal Style Sheet
Inline Style
External Style Sheet:

Ideal for cases when the style is applied to many pages.

Look of an entire web page/site can be changed by changing one file.

Each page must link to the style sheet using the <link> tag

The <link> tag goes inside the head section.

Example:
<head>
<link rel=stylesheet type=text/css href=mystyle.css>
</head>
Embedded (or Internal) Style Sheet:

Should be used when a single document has a unique style

Defined in the head section with the <style> tag.

Example:
<head>
<style type=text/css>
body{background-color:red}
p{margin-left:20px}
</style>
</head>
Inline Style:

Should be used when a unique style is to be applied to a single occurrence of an


element.

Use style attribute can contain any css property.

Example:

<p style =color:red; margin-left:20px>


this is a paragraph<./p>
First.html
<html>
<head>
<title>Pick ur Ice Cream</title>
<center>
<body background="1.jpg">
<font color=red>
<h1>Select your Favourite Icecream</h1>
<a href="1.html"><img src="3.jpg">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="sundae.html"><img src="4.jpg">
</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
&nbsp;
<a href="feasta.html"><img src="5.jpg">
</a><br>
</body>
</html>
1.html
<html>
<head>
<title>cone</title>
<style type="text/css">
h1{color=blue;}
h2{color=green;}
h3{color=red;}
p{color=blue;}
</style>
</head>
<body background="2.jpg">
<center>
<br><br><br>
<table style="background-color:#ffffbb;">
<tr>
<td align=center>
<h1>Cone Ice Creams are....Mmmm....</h1>
<h2>most ideal for all ages!</h2><br>
<p>
click here for orders...
</p>
<a href="form.html"><img src="2a.jpg">
</a>
<p>
Enjoy the taste!!!
</p>
</td>

</tr>
</table>
</body>
</html>
Sundae.html
<html>
<head>
<title>sundae</title>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body background="9.jpg">
<h1 style="background-color=white;">Welcome!
</h1>
<br>
<font style="background-color:#b0ffff;"
<h2>Sundaes and sundays! Relishing Fun!!
</h2>
<p style="background-color:#b0ffff;">
Enjoy the taste
</p>
<a href="form.html"><img src="10.jpg" width=300>
</a>
<p style="background-color:#b0ffff;">
Order now
</p>
<h1 style="background-color:white;">Thank you for visiting
</h1>
</font>
</body>
</html>
a.css
h3{color:green;}
h2{color:blue;background-color:#b0ffff font-family:Arial;}
p{color:red;}
h1{font-weight:italic; color:"#ff00ff";}
Feasta.html
<html>
<head>
<title>feasta</title>
</head>
<body background="10.jpg">
<marquee>
<h1 style="background-color:white;">
Feast on feastas!
</h1>
</marquee>
<center>

<h3 style="font-family:Arial;font-weight:bold;text-indent:50 px;color:green;backgroundcolor:#ffffdd;">


Feast on your Earned Feasta.............
</h3>
</center>
<table>
<tr>
<td>
<p style="font-family:Arial;font-size=20;font-weight:bold;text-indent:50px;backgroundcolor:white;">
<a style="text-decoration:none;"href="form.html">Order Now...
</a></p>
</td>
</tr>
</table>
</body>
</html>
Form.html
<html>
<head>
<title>book</title>
<style type="text/css">
*{color= "#0000ff"}
</style>
</head>
<body background="7.jpg">
<br><br><br><br>
<center>
<form action="book.html" method="post">
<table style="color:blue; background-color:white;">
<tr>
<td>Customer's cool name:</td><td><input type="text" name="cname"
maxlength="20"></td>
</tr>
<tr>
<td>Cool address:</td><td><textarea rows="4" cols="20"></textarea></td>
</tr>
<tr>
<td>Pick the flavours to be added:</td>
<td colspan=2>
<select style="color:blue;">
<option value="vanilla" style="color:blue;">Vanilla</option>

<option value="strawberry" style="color:blue;">Strawberry</option>


<option value="butterscotch" style="color:blue;">Butterscotch</option>
<option value="deepchocolate" style="color:blue;">Deep Chocolate</option>
</select>
&nbsp;+&nbsp

<select style="color:blue;">
<option value="vanilla" style="color:blue;">Vanilla</option>
<option value="strawberry" style="color:blue;">Strawberry</option>
<option value="butterscotch" style="color:blue;">Butterscotch</option>
<option value="deepchocolate" style="color:blue;">Deep Chocolate</option>
</select>
</td>
</tr>
<tr>
<td>Servings for:</td><td><input type="text" maxlength="2"></td>
</tr>
<tr>
<br><td colspan=2 align="center"><input type="submit" value="Order!"></td>
</tr>
</table>
</body>
</html>
Book.html
<html>
<head>
<title>booking</title>
</head>
<body background="8.jpg">
<center>
<br><br><br><br>
<font color=red style="background-color:#cee7ff;">
<h1>Thank you for ordering!</h1><br>
<h2>We will deliver it within 3 hours</h2><br>
<a href="first.html" style="background-color:#b0ffff;">
<h3>&lt;&lt;Back to home</h3>
</a>
</body>
</html>

Output:
1.First page

2. Cone

3. Sundae

4. Feasta

5. Form

6. Acknowledgement

Ex. No. 4 VALIDATING WEB FORM CONTROLS USING DHTML

Aim:
To validate a web form controls using DHTML.
Algorithm:
Step1: The form will include one text field called "Your Name", and a submit button.
Step2: Validation script will ensure that the user enters their name before the form is sent to the
server.
Step3: Open this page to see it in action.
Step4: Try pressing the Send Details button without filling anything in the "Your Name" field.
You might like to open the source code for this form in a separate window.
Step5: The page consists of a JavaScript function called validate_form() that performs the form
validation, followed by the form itself.
home.html
<html>
<title>Reliance</title>
<head><center><font color="brown"><h1><b>Reliance
world</b></h1></font></center></head>
<body>
<table align="center" background="ind.gif" width="500" height="300" border="0"
cellpadding="50">
<tr>
<td>
<img src="reliance.jpg" alt="reliance logo"><br/>
<a href="onlineregister\onlineregister.html">Online account
registration</a>
</td>
</tr>
</table>
</body>
</html>
Onlneregister\onlineregister.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Online prepaid/postpaid Registration</title>
<script type="text/javascript">
<!--

function checkit()
{
var textstring = '';
// script for text box
for (i=0;i<9;i++)
{
if(i==1)
{
// script for file browser box
var box = document.forms['register'].elements[i];
if (!box.value)
{
alert('You haven\'t uploaded in ' + box.name + '!');
box.focus();
return;
}
document.register.imgphoto.src=box.value;
document.register.imgphoto.alt=box.name;
document.register.imgphoto.width=85;
document.register.imgphoto.height=100;
textstring += box.name + ': ' + box.value + '\n';
}
else if(i==3)
{
// script for select box
user_input =
document.register.gen.options[document.register.gen.selectedIndex].value;
textstring += 'Gender: ' + user_input + '\n';
}
else
{
var box = document.forms['register'].elements[i];
if(i<7)
{
if (!box.value)
{
alert('You haven\'t filled in ' +
box.name + '!');
box.focus()
return;
}
textstring += box.name + ': ' + box.value +
'\n';
}

else
textstring += box.name + ': ' + box.value + '\n';
}
}
// script for radio buttons.
user_input = '';
for (i=0;i<document.forms['register'].acctype.length;i++)
{
if (document.forms['register'].acctype[i].checked)
{
user_input =
document.forms['register'].acctype[i].value;
}
}
textstring += 'Account Type: ' + user_input + '\n';
// script for checkboxes
textstring += 'Address proofs:- '+ '\n';
for (i=11;i<15;i++)
{
if (document.register.elements[i].checked)
{
textstring += document.register.elements[i].name
+ ':';
var box =
document.forms['register'].elements[i+4];
if (!box.value)
{
alert('You haven\'t uploaded in ' +
box.name + '!');
box.focus();
return;
}
textstring += box.value + ',';
}
}
// script for textarea.
document.forms['register'].output.value = textstring;
}
// -->
</script>
</head>
<body>

<h2><font color="brown"><center><b>ONLINE PREPAID/POSTPAID


ACCOUNT REGISTRATION</b></center></font></h2>
<form name="register" action="#" onsubmit="checkit(); return false">
<table class="form" align="center" background="ind.gif" width="700"
cellpadding="10">
<tr>
<td>(* Compulsory)<br/>
Customer Name*</td>
<td><br/><input name="Customer Name" /></td>
<td>Customer photo(passportsize)*<br/>
<input type="file" name="Customer
photo"/></td>
</tr>
<tr>
<td>Mobile number*</td>
<td><input name="mobile number" /></td>
</tr>
<tr>
<td>Gender*</td>
<td><select name="gen">
<option value='' selected="selected">--- Select
---</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select></td>
</tr>
<tr>
<td>Residential Address*</td>
<td><input name="Residential address" /></td>
</tr>
<tr>
<td>City*</td>
<td><input name="City" /></td>
</tr>
<tr>
<td>State*</td>
<td><input name="state" /></td>
</tr>
<tr>
<td>E-mail address</td>
<td><input name="E-mail address" /></td>
</tr>
<tr>
<td>Contact number</td>
<td><input name="Contact number" /></td>
</tr>
<tr>
<td>Account type*</td>

<td><input type="radio" name="acctype"


value="POSTPAID" />Postpaid<br /
<input type="radio" name="acctype"
value="PREPAID" />Prepaid<br/>
</tr>
<tr>
<td>Address Proof*</td>
<td><input type="checkbox" name="Ration card" />Ration card<br />
<input type="checkbox" name="Otter id" />Otter
id<br />
<input type="checkbox" name="Pan card" />Pan
card<br />
<input type="checkbox" name="Driving License"
/>Driving License</td>
<td><input type="file" name="Ration card"/><br />
<input type="file" name="Otter id"/><br />
<input type="file" name="Pan card"/><br />
<input type="file" name="Driving
License"/></td>
</tr>
<tr>
<td><input type="submit" value="Submit form" /><input
type="reset" /></td>
</tr>
<tr>
<td>Customer details<br/>
<center><img src="" alt=""
name="imgphoto"></center></td>
</tr>
<tr>
<td colspan="2"><center><textarea cols="50" rows="15"
name="output">When you hit 'Submit' the user input will be written to this textarea and
customer photo is displayed</textarea></center></td>
</tr>
</table>
</form>
</body>
</html>

Output:
home.html

Onlneregister\onlineregister.html

Ex. No. 5 COLOR PALETTE WITH MATRIX OF BUTTONS


AIM:
To create applets with the following features i. Create a color palette with matrix of
buttons. ii. Set background and foreground of the control text area by selecting a color from
color palette. iii. In order to select foreground or background use checkbox controls as radio
buttons. iv. To set background images.
ALGORITHM:
Step 1: Import all necessary packages and classes
Step 2: Define a class that extends applet and implements action listener and item listener
Step 3: Declare an array of buttons to set colors, two checkboxes for foreground and
background colors
Step 4: Declare a text area to hold the text, a checkbox group for checkboxes
Step 5: Add the array of buttons in the init function.
Step 6: In the actionPerformed() method, do the following:
i) Get the action command in the string,
ii) If foreground is checked then set the foreground color to the selected color.
PROGRAM:
Colopal.java
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/*
<applet code="colorpal" width=300 height=300>
</applet>
*/
public class colorpal extends Applet implements ItemListener
{
int currcolor=5;
int flag=1;
String text="click any of the button";
Button buttons[]=new Button[5];
String colours[]={"Red","Blue","Green","Yellow","Magenta"};
Image img;
CheckboxGroup cbg=new CheckboxGroup();
Checkbox box1=new Checkbox("Background Color",cbg,true);
Checkbox box2=new Checkbox("Text Color",cbg,true);
Checkbox box3=new Checkbox("Loading Image",cbg,true);
public void init()
{
for(int i=0;i<5;i++)
{
buttons[i]=new Button(" ");
add(buttons[i]);
}

buttons[0].setBackground(Color.red);
buttons[1].setBackground(Color.blue);
buttons[2].setBackground(Color.green);
buttons[3].setBackground(Color.yellow);
buttons[4].setBackground(Color.magenta);
add(box1);
add(box2);
add(box3);
box1.addItemListener(this);
box2.addItemListener(this);
box3.addItemListener(this);
}
public void itemStateChanged(ItemEvent ev)
{
if(box1.getState()==true)
flag=1;
else if(box2.getState()==true)
{
text="Default color is black";
flag=2;
}
else if(box3.getState()==true)
{
img=getImage(getDocumentBase(),"a.jpg");
flag=3;
}
repaint();
}
public void paint(Graphics g)
{
if(flag==2)
{
g.drawString(text,30,100);
switch(currcolor)
{
case 0:
g.setColor(Color.red);
break;
case 1:
g.setColor(Color.blue);
break;
case 2:
g.setColor(Color.green);
break;
case 3:
g.setColor(Color.yellow);
break;

case 4:
g.setColor(Color.magenta);
break;
case 5:
g.setColor(Color.black);
break;
}
g.drawString(text,30,100);
}
else if(flag==1)
{
g.drawString(text,30,100);

switch(currcolor)
{
case 0:
setBackground(Color.red);
break;
case 1:
setBackground(Color.blue);
break;
case 2:
setBackground(Color.green);
break;
case 3:
setBackground(Color.yellow);
break;
case 4:
setBackground(Color.magenta);
break;
case 5:
setBackground(Color.white);
break;
}
}
else if(flag==3)
{
g.drawImage(img,20,90,this);
}
}
public boolean action(Event e,Object o)
{
for(int i=0;i<5;i++)
{
if(e.target==buttons[i])
{

currcolor=i;
text="You have chosen"+colours[i];

repaint();
return true;
}
}
return false;
}
}
3.html
<html>
<head>
<title>
applet
</title>
<body bgcolor="#ffffbb" text=blue>
<center>
<h2>Applet checker</h2>
<table border=1>
<tr>
<td>
<applet code="colorpal.class" width=300 height=300>
</applet>
</td>
</tr>
</table>
</center>
Output:

Ex. No. 6

INVOKE SERVLETS FROM HTML FORMS

AIM:
To write a program for invoke servlet from HTML form.
Set Environment Variables:
Set Environment variables for Tomcat 6.0 server
1. Control Panel -> System properties

a. Select Advanced tag


b. Click Environment variables in the bottom
c. Click New button in the User variables
d. Enter Variable Name and Variable Value in the New User Variable and
click OK button.
Variable Name
CATALINA_HOME
CLASSPATH
PATH
e. click OK two Times.

Variable Value
C:\Program Files\Apache Software
Foundation\Tomcat 6.0
C:\Program Files\Apache Software
Foundation \ Tomcat 6.0\lib\servlet-api.jar
C:\Program Files\Java\jdk1.6.0\bin

Executing Java Program:


C:\Documents and Settings\Administrator>cd..
C:\Documents and Settings>cd..

C:\>cd "Program Files"


C:\Program Files>cd "Apache Software Foundation"
C:\Program Files\Apache Software Foundation>cd "Tomcat 6.0"
C:\Program Files\Apache Software Foundation\Tomcat 6.0>cd webapps
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps>cd servletform
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\servletform>
cd WEB-INF
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\servletform\WEB-I
NF>cd classes
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\servletform\WEB-I
NF\classes>javac signup.java
HTML Source
index.html
<html>
<title>W3C</title>
<head><center><font
color="brown"><h1><b>W3C</b></h1></font></center></head>

<body>
<table align="center" background="ind.gif" width="500" height="300" border="0"
cellpadding="50">
<tr>
<td>
<img src="w3c.jpg" alt="w3c logo"><br/><br/>
<a href="form.html">Sign Up</a>
</td>
</tr>
</table>
</body>
</html>
form.html
<html>
<title>CSEmail</title>
<head><center><h1><b>Sign Up</b></h1></center></head>
<body>
<form action="servlet/signup" method="get">
<table align="center" background="ind.gif" width="500" height="600" border="0">
<tr>
<td>First name
:<br/>Last name
:</td>
<td>
<input type="text" name="firstname"/><br/>
<input type="text" name="lastname"/><br/>
</td>
</tr>
<tr>
<td>Email id :</td>
<td><input type="text" name="userid"/><br/></td>
</tr>
<tr>
<td>Password :<br/>Re-Password :<br/></td>
<td><input type="password" name="pwd"/><br/>
<input type="password" name="pwd"/><br/>
</td>
</tr>
<tr>
<td> Gender:</td>
<td> <input type="radio" name="gender" value="male" /> male
<input type="radio" name="gender" value="female" />
female<br/>
</td>
</tr>
<tr>
<td>Preferred City:</td>
<td>

<select name="city">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
<option value ="chennai">chennai</option>
<option value ="mumbai">mumbai</option>
<option value ="delhi">delhi</option>
</select><br/>
</td>
</tr>
<tr>
<td>Address :</td>
<td><textarea rows="3" cols="20" name="address"></textarea></td>
</tr>
<tr>
<td>
<input type="checkbox" name="terms" value="terms"/>I accept
the terms and conditions<br/><br>
<input type="submit" name="submit" value="submit"/>
<input type="reset" name="reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
XML Source
web.xml
<web-app>
<servlet>
<servlet-name>signup</servlet-name>
<servlet-class>signup</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>signup</servlet-name>
<url-pattern>/servlet/signup</url-pattern>
</servlet-mapping>
</web-app>
Servlet Source
signup.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class signup extends HttpServlet

{
public void doGet(HttpServletRequest req,HttpServletResponse res) throws
IOException, ServletException
{
res.setContentType("text/html");
PrintWriter out = res.getWriter();
String fn = req.getParameter("firstname");
String ln = req.getParameter("lastname");
String id = req.getParameter("userid");
String gen = req.getParameter("gender");
String city = req.getParameter("city");
String addr = req.getParameter("address");
out.println("<html>");
out.println("<head>");
out.println("<title>");
out.println("Acc verification");
out.println("</title>");
out.println("</head>");
out.println("<body>");
out.println("Servlet Reply<br/><br/>");
out.println("First Name:"+fn+"<br> Last Nmae:"+ln+"<br>
Email ID:"+id+"<br> Gender:"+gen+"<br>City:"+city+"<br> Address:"+addr);
out.println("</body>");
out.println("</html>");
}
}
Output:
Apache Tomcat 6.0 server homepage
http://localhost:8080/
index.html
http://localhost:8080/register/ or http://localhost:8080/register/index.html

form.html
http://localhost:8080/register/form.html

Servlet side:
http://localhost:8080/register/servlet/signup?
firstname=manikandan&lastname=c&userid=manikandan.c.mcc@gmail.com&pwd=123&pwd
=123&gender=male&city=chennai&address=1%2F436+Podhigai+st%2C%0D
%0AInjambakkam%2Cch-41.&terms=terms&submit=submit

Ex. No. 7

INVOKE SERVLETS FROM APPLETS

AIM:
To write a program to invoke a Servlet from applets
ALGORITHM:
1. Open C:\Program files\ Apache Software Foundation\Tomcat\webapps
2. Create a folder called MyServlets
3. Under this folder create another folder called WEB-INF
4. Create another folder inside WEB-INF called classes
5. Create a HTML file called Applet2Servlet.html and store it under MyServlets
folder
6. Use the applet tag to load the required applet class in the browser
7. Create a Java file FromApplet.java under MyServlets folder
8. Import the necessary packages
9. Create a object for JButton class and associate an ActionListener with it
10. In actionPerformed(), create a URL object called test
11. Create object for URLConnection and call openConnection() for test
12. Set setDoInput(), setDoOutput(), setUseCaches(), setDefaultUseCaches() to false
13. Call the showDocument() of getAppletContext() method and compile the program
14. Create a Java file ReadVal.java under classes folder to display a message
15. Create web.xml inside WEB-INF folder
16. Compile the Servlet code after setting the classpath
17. Create a link to Applet2Servlet.html using <a> in index.html of MyServlets folder
18. Start the Tomcat server
19. Open the browser and type http://localhost:8080/
20. Click Tomcat Manager and enter admin as username
21. Select MyServlets from the list
22. The index.html file is displayed and click the link which points to Applet2Servlet.htm
23. Click the button inside the applet to activate the servlet and display the message
24. Stop the server
25. Stop the program

PROGRAM:
HTML Source - Applet2Servlet.html
<html>
<body>
<applet code="FromApplet.class" width="200" height="40"></applet>
</body>
</html>
Applet code FromApplet.java
import java.net.*;
import java.applet.*;
import javax.swing.*;
import java.awt.event.*;
public class FromApplet extends JApplet implements ActionListener
{

JButton sendBtn = new JButton("Send Text");


public void init()
{
add(sendBtn);
sendBtn.addActionListener(this);
}
public void actionPerformed(ActionEvent a)
{
try
{

URL test = new URL


("servlet/ReadVal");
URLConnection con =
test.openConnection();
con.setDoInput(true);
con.setDoOutput(true);
con.setUseCaches(false);
con.setDefaultUseCaches(false);
con.setRequestProperty("ContentType", "text/html");
getAppletContext().showDocument(t
est,"_self");
catch(Exception e) { System.out.println(e);}

}
}
Servlet Code ReadVal.java

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class ReadVal extends HttpServlet


{
public void doGet(HttpServletRequest re,HttpServletResponse
rs) throws
IOException, ServletException
{
PrintWriter out = rs.getWriter();
try
{
rs.setContentType("text/html");
out.println("You activated this servlet through
an applet");
}
catch(Exception e) {out.println("Exception: "+e);}
}
Web.xml
<web-app>
<servlet>
<servlet-name>FromHTML</servlet-name>
<servlet-class>FromHTML</servlet-class>
</servlet>
<servlet>
<servlet-name>ReadVal</servlet-name>
<servlet-class>ReadVal</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FromHTML</servlet-name>
<url-pattern>/servlet/FromHTML</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ReadVal</servlet-name>
<url-pattern>/servlet/ReadVal</url-pattern>
</servlet-mapping>
</web-app>

Output:

Ex. No. 8

THREE TIER APPLICATION FOR ONLINE EXAMINATION


USING JSP

AIM:
To create three-tier applications using JSP and Databases for conducting on-line
examination and displaying student mark list.
JSP:
Java Server Pages or JSP for short is Sun's solution for developing dynamic web sites.
JSP provide excellent server side scripting support for creating database driven web applications.
JSP pages are efficient, it loads into the web server's memory on receiving the request very first
time and the subsequent calls are served within a very short period of time.
ODBC Connectivity
1. Select Control Panel -> Administrative Tools-> Data Sources (ODBC) then ODBC

Source Administrator window is opened.

2. Click System DNS tag and click Add button


3. The Create New Data Source is opened and select the driver Microsoft Access Driver

(*.mdb, *.accdb) -> click Finish.

4. Then the ODBC Microsoft Access Setup window is opened and select database and

enter the Data Source Name in the text field and click ok

5. Then test2 displayed on the System Data Source area on the System DNS and

Click ok.

PROGRAM:
Sample1.jsp
<%@page language="java" import="java.sql.*" %>
<%@page import="java.io.*" %>
<%@page import="java.util.*" %>
<%
String SeatNum,Name;
String ans1,ans2,ans3,ans4,ans5;
int a1,a2,a3,a4,a5;
a1=a2=a3=a4=a5=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection c = DriverManager.getConnection("jdbc:odbc:st");
if(request.getParameter("action")!=null)
{
SeatNum = request.getParameter("Seat_no");
Name = request.getParameter("Name");
ans1 =request.getParameter("group1");
if(ans1.equals("True"))
a1=2;
else
a1=0;
ans2 = request.getParameter("group2");
if(ans2.equals("True"))
a2=0;
else
a2=2;
ans3 = request.getParameter("group3");
if(ans3.equals("True"))
a3=0;
else
a3=2;
ans4 = request.getParameter("group4");
if(ans4.equals("True"))
a4=2;
else
a4=0;
ans5 = request.getParameter("group5");
if(ans5.equals("True"))
a5=0;
else
a5=2;
int Total=a1+a2+a3+a4+a5;
Statement stmt = c.createStatement();
String query = "INSERT INTO StudentTable (" + "Seat_no,Name,Marks" + ")
VALUES ('" +SeatNum + "', '" + Name + "', '"+Total+ "')";
int result = stmt.executeUpdate(query);

stmt.close();
stmt = c.createStatement();
query = "SELECT * FROM StudentTable WHERE Name="+"'"+Name+"'";
ResultSet rs = stmt.executeQuery(query);
%>
<html>
<head>
<title>Student Mark List
</title>
</head>
<body bgcolor=khaki>
<center>
<h2>Students Marksheet</h2>
<h3>Name of the College: Anand Institute of Higher Technology</h3>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Seat Number</b></td>
<td><b>Name</b></td>
<td><b>Marks Obtained</b></td>
</tr>
<%
while(rs.next())
{
%>
<tr>
<td><%=rs.getInt(1)%></td>
<td> <%=rs.getString(2)%></td>
<td> <%=rs.getString(3)%></td>
</tr>
<%
}
rs.close();
stmt.close();
c.close();
%>
</table>
</center>
<br/> <br/><br/>
<table>
<tr>
<td><br>Date:<%=new java.util.Date().toString() %></td>
</tr>
</table>
<div>
<a href="Sample.html">Click here to attend test again</a>
</body>

</html>
<%
}else{
%>
<html>
<head><title>Online Examination</title>
</head>
</html>
<%
}
%>
Sample.html
<html>
<body text=green>
<center>
<h1>OnLine Examination</h1>
</center>
<form action="Sample1.jsp" method="post" name="entry">
<input type="hidden" value="list" name="action">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="Seat_no"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="Name"></td>
</tr>
<hr/>
<tr>
<td><b>Total Marks:10(Each question carries equal marks) </b></td>
<td></td><td></td><td></td><td><b>Time: 15 Min.</b></td>
</tr>
</table>
<hr/>
<b>1. Apache is an open source web server</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br>
<br/>
<b>2. In Modern PC there is no cache memory.</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>
<br/>
<b>3. Tim-Berner Lee is the originator of Java.</b><br/>
<input type="radio" name="group3" value="True">True

<input type="radio" name="group3" value="False">False<br>


<br/>
<b>4.JPG is not a video file extension.</b><br/>
<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<br/>
<b>5. HTTP is a statefull protocol</b><br/>
<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False<br>
<hr/>
<center>
<input type = "submit" value="Submit">
<input type = "reset" value="Clear"><br><br>
</center>
</form>
</body>
</html>
OUTPUT:
1. Examination page

2.Result page

3.Database

Ex. No. 9

XML DOCUMENT WITH CSS

AIM:
To write a xml program for displaying document with CSS
DESCRIPTION:
o XML stands for eXtensible Markup Language.
o XML was designed to transport and store data.
o HTML was designed to display data.
XML Tree:

XML documents form a tree structure that starts at "the root" and branches to "the
leaves".
XML documents must contain a root element. This element is "the parent" of all
other elements
All elements can have sub elements (child elements):
<root>
<child>
<subchild>.....</subchild>
</child>
</root>

XML Syntax Rules:


All XML Elements Must Have a Closing Tag
XML Tags are Case Sensitive
XML Elements Must be Properly Nested
XML Documents Must Have a Root Element
XML Attribute Values Must be Quoted
PROGRAM:
ccc.html:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="s.css"?>
<JE>
<a>
<country>India</country>
<capital>New Delhi</capital>
<currency>Rupee</currency>
</a>

<a>
<country>United States of America</country>
<capital>Washington D.C.</capital>
<currency>U.S.Dollar</currency>
</a>
<a>
<country>England</country>
<capital>London</capital>
<currency>Sterling Pound</currency>
</a>
<a>
<country>Australia</country>
<capital>Canberra</capital>
<currency>Australian Dollar</currency>
</a>
</srinivas>
s.css:
JE
{
background-image:url('bg.jpg');
width:100%;
}
a
{
background-color:#ffffbb;
display:block;
margin-bottom:40pt;
margin-left:40pt;
}
country
{
font-style:bold;
color:blue;
font-size:25pt;
}
capital
{
color:red;
display:block;
margin-left:18pt;
font-size:20pt;
}
currency
{

font-size:18pt;
display:block;
color:green;
margin-left:40pt;
}
OUTPUT:

Ex. No. 10

XSLT

AIM:
To write a program to invoke a Servlet from an HMTL file
DESCRIPTION:
XSLT is used to transform an XML document into another XML document, or another
type of document that is recognized by a browser, like HTML and XHTML XML Tree:
<xsl:template>

The <xsl:template> element is used to build templates.

The match attribute is used to associate a template with an XML element. The match
attribute can also be used to define a template for the entire XML document. The value
of the match attribute is an XPath expression (i.e. match="/" defines the whole
document).

<xsl:value-of>

The <xsl:value-of> element can be used to extract the value of an XML element and add
it to the output stream of the transformation.

<xsl:for-each>

used to select every XML element of a specified node-set

PROGRAM:
stmarklist.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="stmarklist.xsl"?>
<marklist>
<marklistrow1>
<stnameh>St_Name</stnameh>
<subject1>WT</subject1>
<subject2> PCD</subject2>
<subject3> OOAD </subject3>
<subject4> ACA </subject4>
<subject5> AI </subject5>
<subject6> NM </subject6>
</marklistrow1>
<marklistrow2>
<stnameh>Ayyappan</stnameh>

<mark1> 90</mark1>
<mark2> 85 </mark2>
<mark3> 92</mark3>
<mark4> 74</mark4>
<mark5> 85</mark5>
<mark6> 73</mark6>
</marklistrow2>
<marklistrow2>
<stnameh>Anand</stnameh>
<mark1> 93</mark1>
<mark2> 84 </mark2>
<mark3> 97</mark3>
<mark4> 78</mark4>
<mark5> 82</mark5>
<mark6> 76</mark6>
</marklistrow2>
<marklistrow2>
<stnameh>Mathan</stnameh>
<mark1> 96</mark1>
<mark2> 87 </mark2>
<mark3> 93</mark3>
<mark4> 78</mark4>
<mark5> 88</mark5>
<mark6> 77</mark6>
</marklistrow2>
</marklist>
XSL code
stmarklist.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy -->
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<body>
<table align="center" border="3" WIDTH="400" HEIGHT="300"
cellspacing="10" cellpadding="30" background="ind.gif">
<thead><h1><center>MARK LIST</center></h1></thead>
<xsl:for-each select="marklist/marklistrow1">
<tr>
<th><xsl:value-of select="stnameh"/></th>
<th><xsl:value-of select="subject1"/></th>
<th><xsl:value-of select="subject2"/></th>
<th><xsl:value-of select="subject3"/></th>
<th><xsl:value-of select="subject4"/></th>
<th><xsl:value-of select="subject5"/></th>
<th><xsl:value-of select="subject6"/></th>

</tr>
</xsl:for-each>
<xsl:for-each select="marklist/marklistrow2">
<tr>
<th><xsl:value-of select="stnameh"/></th>
<th><xsl:value-of select="mark1"/></th>
<th><xsl:value-of select="mark2"/></th>
<th><xsl:value-of select="mark3"/></th>
<th><xsl:value-of select="mark4"/></th>
<th><xsl:value-of select="mark5"/></th>
<th><xsl:value-of select="mark6"/></th>
</tr>
</xsl:for-each>
</table>
</body>
</html>
Directory Structure
To save source files any location
E:\xml&xslt
E:\xml&xslt\ stmarklist.xml
E:\xml&xslt\ stmarklist.xsl
OUTPUT :

Você também pode gostar