cs67 - internet programming lab manual

31
Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J Powered by: premanandhj.blogspot.in Page 1 of 31 premanandhj.hpage.com NATCHATRAN-Dazzling in front of World Lab Manual Subject Code & Name: CS 67 - Internet Programming Lab Computer Science and Engineering Prepared by: PREM ANANDH.J Ex:1 Website creation AIM: To design a College Web Site using HTML scripting language. PROGRAM: Home.html <html> <head> <title>St.Xec</title> </head> <body bgcolor="black"> <center><h1><font face="stencil" color="yellow">JP COLLEGE OF ENGINEERING</h1> <h7>Ayikudi,Tenkasi</h7></font> <font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font> </center> <hr> <p> <font face="stencil" color="green"> <center> <a href="home.html">Home</a> <a href="facilities.html">Facilities</a> <a href="courses.html">Courses</a> <a href="gallery.html">Gallery</a> <a href="contactus.html">Contact us</a> </center> </font> </p> <hr><h2><font face="stencil" color="white">Welcome to JPCOE</h2> <br> Be the Best.... <br> <hr><center><font face="Comic Sans MS" color="white">powered by JPCOE.all rights reserved</font> </body> </html> Facilities .html <html> <head> <title>St.Xec</title> </head> <body> <center><h1><font face="stencil" color="yellow"> JP COLLEGE OF ENGINEERING </font></h1> <font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font> <h7>k.k.dist-629171</h7> </center> <hr> <p>

Upload: premanandhj

Post on 12-Apr-2015

328 views

Category:

Documents


1 download

DESCRIPTION

CS67 - Internet Programming Lab Manual based on anna university syllabus

TRANSCRIPT

Page 1: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 1 of 31 premanandhj.hpage.com

NATCHATRAN-Dazzling in front of World

Lab Manual

Subject Code & Name: CS 67 - Internet Programming Lab

Computer Science and Engineering

Prepared by: PREM ANANDH.J

Ex:1 Website creation AIM:

To design a College Web Site using HTML scripting language.

PROGRAM:

Home.html <html>

<head>

<title>St.Xec</title>

</head>

<body bgcolor="black">

<center><h1><font face="stencil" color="yellow">JP COLLEGE OF ENGINEERING</h1>

<h7>Ayikudi,Tenkasi</h7></font>

<font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font>

</center>

<hr>

<p>

<font face="stencil" color="green">

<center>

<a href="home.html">Home</a>

<a href="facilities.html">Facilities</a>

<a href="courses.html">Courses</a>

<a href="gallery.html">Gallery</a>

<a href="contactus.html">Contact us</a>

</center>

</font>

</p>

<hr><h2><font face="stencil" color="white">Welcome to JPCOE</h2>

<br>

Be the Best....

<br>

<hr><center><font face="Comic Sans MS" color="white">powered by JPCOE.all rights reserved</font>

</body>

</html>

Facilities .html <html>

<head>

<title>St.Xec</title>

</head>

<body>

<center><h1><font face="stencil" color="yellow"> JP COLLEGE OF ENGINEERING </font></h1>

<font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font>

<h7>k.k.dist-629171</h7>

</center>

<hr>

<p>

Page 2: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 2 of 31 premanandhj.hpage.com

<font face="stencil" color="green">

<center>

<a href="home.html">home</a>

<a href="facilities.html">Facilities</a>

<a href="courses.html">courses</a>

<a href="gallery.html">gallery</a>

<a href="contactus.html">contact us</a>

</center>

</font>

</p>

<body bgcolor="black">

<hr><h2><font face="stencil" color="white"><br>FACILITIES<br></h2></font>

<br>

<ul><h4><font face="stencil" color="red">

<li>Excellent infrastructure

<li>Experienced Staff members

<li>Well Equpied lab

<li>ATM center

<li>Separate hostel for boys and girls

<li>English language lab

<li>Transport facility to varies Places

</ul>

<hr><center><font face="Comic Sans MS" color="white">powered by JPCOE.all rights

reserved</font></center>

</body>

</html>

Gallery.html <html>

<head>

<title>St.Xec</title>

</head>

<body>

<center><h1><font face="stencil" color="yellow"> JP COLLEGE OF ENGINEERING </font></h1>

<font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font>

<h7>k.k.dist-629171</h7>

</center>

<hr>

<p>

<font face="stencil" color="green">

<center>

<a href="home.html">home</a>

<a href="facilities.html">Facilities</a>

<a href="courses.html">courses</a>

<a href="gallery.html">gallery</a>

<a href="contactus.html">contact us</a>

</center>

</font>

</p>

<body bgcolor="black">

<hr><h2><font face="stencil" color="white"><br>PHOTO GALLERY<br></h2></font>

<br>

Page 3: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 3 of 31 premanandhj.hpage.com

<center>

<img src="image1.jpg" alt="College photot" width="800" height="250"><br><br>

<img src="image2.jpg" alt="College photot" width="250" height="300">

</center>

<hr><center><font face="Comic Sans MS" color="white">powered by JPCOE.all rights

reserved</font></center>

</body>

</html>

Courses.html <html>

<head>

<title>St.Xec</title>

</head>

<body bgcolor="black">

<center><h1><font face="stencil" color="yellow"> JP COLLEGE OF ENGINEERING </font></h1>

<font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font>

<h7>k.k.dist-629171</h7>

</center>

<hr>

<p>

<font face="stencil" color="green">

<center>

<a href="home.html">home</a>

<a href="facilities.html">Facilities</a>

<a href="courses.html">courses</a>

<a href="gallery.html">gallery</a>

<a href="contactus.html">contact us</a>

</center>

</font>

</p>

<h1><font face="Arial Black" color="blue">COURSES</h1></font>

<h2><font face="Bookman Old Style" color="red">BE</h2>

<h3>

<ol>

<li>CSE

<li>ECE

<li>IT

<li>EEE

<li>MECH

</ol>

</h3>

</font>

<h2><font face="Bookman Old Style" color="green">ME<br></h2>

<h3>

<ol>

<li>Network Engg.

<li>VLSI

</ol>

<h3>

</font>

<hr><br><center><font face="Comic Sans MS" color="white">powered by JPCOE. all rights

reserved</font>

Page 4: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 4 of 31 premanandhj.hpage.com

</body>

</html>

contactus.html <html>

<head>

<title>St.Xec</title>

</head>

<body bgcolor="black">

<center><h1><font face="stencil" color="yellow"> JP COLLEGE OF ENGINEERING </font></h1>

<font face="stencil" color="Red"><h4>Run by DMI Sister and MMI Father</h4></font>

<h7>k.k.dist-629171</h7>

</center>

<hr>

<p>

<font face="stencil" color="green">

<center>

<a href="home.html">home</a>

<a href="facilities.html">Facilities</a>

<a href="courses.html">courses</a>

<a href="gallery.html">gallery</a>

<a href="contact us.html">contact us</a>

</center>

</font>

</p>

<hr><h2><font face="Comic Sans MS" color="white">Contact us</h2>

<br>

<Address>Jp colege of Engineering<br>College Road<br>Ayikudi<br>Tenkasi<br>Ph No: 123456

<br><br>mail us to [email protected]<br></Address>

<br>

<hr><center>powered by JPCOE.all rights reserved</font>

</body>

</html>

OUTPUT:

Page 5: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 5 of 31 premanandhj.hpage.com

Page 6: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 6 of 31 premanandhj.hpage.com

Page 7: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 7 of 31 premanandhj.hpage.com

Ex: 2 Image map creation AIM: 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.

ALGOTITHM: Step 1: Create a html file with map tag

Step 2: Set the source attribute of the “img” tag to the location of the image and also set the “usemap”

attribute

Step 3: Specify an area with name, shape and “href” set to the appropriate values

Step 4: Repeat step 3 as many hot spots you want to put in the map

Step 5: Create html files for each and every hot spots the user will select

PROGRAM:

Imagemap.html <html>

<head><title>Image Map - India</title></head>

<body>

<center><b><h4>Image Map - India</h4></b>

<map id="india map" name="india map">

<img src="india_map.jpg" usemap="#india map">

<area shape="circle" coords="200,175,10" alt="Delhi" href="delhi.html">

<area shape="circle" coords="130,390,10" alt="Mumbai" href="mumbai.html">

<area shape="circle" coords="385,370,10" alt="kolkatta" href="kolkatta.html">

Page 8: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 8 of 31 premanandhj.hpage.com

<area shape="circle" coords="255,535,10" alt="Chennai" href="chennai.html">

</map>

</center>

<p><b>Note:</b> Click the hot spot to get the details of metro cities</p>

</body>

</html>

chennai.html <html>

<head>

<title>CHENNAI</title>

</head>

<body bgcolor="green with black">

<center><font color="orange"size=4 face="lucida calligraphy">CHENNAI DETAILS</font></center>

<u><font color="yellow"size=4 face="arial">DESCRIPTION</font></u>

<ul><font color="violet"size=3 face="algerian">

<li>chennai is a capital of tamilnadu

<li>chennai is a big city of tamilnadu

</body>

</html>

delhi.html <html>

<head>

<title>DELHI</title>

</head>

<body bgcolor="skyblue">

<center><font color="black" size="5" face="lucida calligraphy">DELHI</font></center>

<font color="orange" size="4" face="arial">DESCRPTION</font><br>

<font color="white" size="3" face="monotype corsiva">DELHI IS A CAPITAL OF INDIA.<br>

DELHI IS A BEAUTYFULL PLACE.</font>

</body>

</html>

kolkatta.html <html>

<head>

<title>KOLKATTA</title>

</head>

<body bgcolor="skyblue">

<center><font color="black" size="5" face="lucida calligraphy">KOLKATTA</font></center>

<font color="orange" size="4" face="arial">DESCRPTION</font><br>

<font color="white" size="3" face="monotype corsiva">KOLKATTA IS A CAPITAL OF WEST

BENGAL.<br>

KOLKATTA IS A HOTEST CITY.</font>

</body>

</html>

mumbai.html <html>

<head>

<title>MUMBAI</title>

</head>

<body bgcolor="skyblue">

<center><font color="black" size="5" face="lucida calligraphy">MUMBAI</font></center>

<font color="orange" size="4" face="arial">DESCRPTION</font><br>

Page 9: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 9 of 31 premanandhj.hpage.com

<font color="white" size="3" face="monotype corsiva">MUMBAI IS A CAPITAL OF

MAHARASTRA.<br>

MUMBAI IS A BIG CITY.</font>

</body>

</html>

OUTPUT:

Page 10: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 10 of 31 premanandhj.hpage.com

Ex: 3 Creation of Embedded style sheets AIM:

To create a web page using Embedded Cascading style sheets.

PROGRAM:

EmbeddedCSS.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Embedded style sheet</title>

<style type="text/css">

h1

{

font-family:Arial;

color:green

}

h2

{

font-family:Arial;

color:red;

left:20px

}

h3

{

font-family:arial;

color:blue;

}

p

{

font-size:14pt;

font-family:verdana

}

#mystyle1

{

font-family:Comic Sans MS;

color:yellow;

font-size:15

}

</style>

</head>

<body>

<h1>

<center> This page is created using Embedded Style Sheet </center>

</h1>

<h2>

This line is aligned left and red colored.

</h2>

<p>

The embedded style sheet is the most commonly used style sheet. This paragraph is written in Verdana

font with font size of 14.

Page 11: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 11 of 31 premanandhj.hpage.com

</p>

<h3> This is a blue <a href=”colorname.html”>colored</a> line. </h3>

<div class="mystyle1">

</div>

</body>

</html>

OUTPUT:

Ex: 4 Creation of External style sheets AIM:

To create a web page using Embedded Cascading style sheets.

PROGRAM:

Ex4CSS.css h1

{

font-family:Arial

}

h2

{

font-family:times new roman;

color:red;

left:20px

}

h3

{

font-family:arial;

color:blue;

}

p

{

font-size:14pt;

Page 12: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 12 of 31 premanandhj.hpage.com

font-family:Monotype Corsiva

}

Ex4CSS.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="ex4CSS.css" />

</head>

<body>

<h1 class="special"> <center> This page is created using External Style

Sheet</center> </h1>

<h2>

This line is aligned left and red colored.

</h2>

<p>

The External style sheet is the compact representation of Cascading

Style Sheets.

This paragraph is written in Monotype Corsiva font with font size of 14.

</p>

<h3>

This is a blue <a href=”colorname.html”>colored</a> line.

</h3>

</body>

</html>

OUTPUT:

Ex:5 Validating Web Form Controls using DHTML

Page 13: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 13 of 31 premanandhj.hpage.com

Aim:

To Write a Client Side Scripts (Java Script) for Validating Web Form Controls using DHTML

PROGRAM:

ApplicationForm.html <html>

<head>

<title>The Student Registration Form</title>

<script type="text/javascript">

function validate()

{

var i;

var name_str=document.my_form.name;

var phoneID=document.my_form.ph_txt;

var ph_str=document.my_form.ph_txt.value;

var str=document.my_form.Email_txt.value;

if((name_str.value==null)||(name_str.value==""))

{

alert("Enter some name");

return false;

}

if(document.my_form.Age_txt.value=="")

{

alert("Enter the Age");

return false;

}

if((document.my_form.Age_txt.value<"5")&&(document.my_form.Age_txt.value>"21"))

{

alert("Invalid Age");

return false;

}

if(ph_str.length<1 ||ph_str.length>11)

{

alert("Invalid length of Phone Number");

return false;

}

for (i = 0; i < ph_str.length; i++)

{

var ch = ph_str.charAt(i);

if (((ch < "0") || (ch > "9")))

{

alert("Invalid Phone Number");

phoneID.focus();

return false;

}

}

var index_at=str.indexOf("@");

var len=str.length;

var index_dot=str.indexOf(".");

var emailID=document.my_form.Email_txt;

if ((emailID.value==null)||(emailID.value==""))

Page 14: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 14 of 31 premanandhj.hpage.com

{

alert("Please Enter your Email ID");

emailID.focus();

return false;

}

if (str.indexOf("@")==-1)

{

alert("Invalid E-mail ID");

return false;

}

if (str.indexOf(".")==-1 || str.indexOf(".")==0 || str.indexOf(".")==index_at)

{

alert("Invalid E-mail ID");

return false;

}

if (str.indexOf("@",(index_at+1))!=-1)

{

alert("Invalid E-mail ID");

return false;

}

if (str.indexOf(" ")!=-1)

{

alert("Invalid E-mail ID");

return false;

}

if (!document.my_form.group1[0].checked && !document.my_form.group1[1].checked)

{

alert("Please Select Sex");

return false;

}

alert("Registered Successfully");

return true;

}

</script>

</head>

<body bgcolor=aqua>

<center><h3>Application Form</h3></center>

<form name="my_form" onsubmit="validate()">

<strong>Name:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>

<input type=text name=name><br/><br/>

<strong>Age:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>

<input type=text name=Age_txt><br/><br/>

<strong>Phone No:&nbsp</strong>

<input type=text name=ph_txt><br/><br/>

<strong>Email:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong>

<input type=text name=Email_txt><br/><br/>

<strong>Sex:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </strong>

<input type="radio" name="group1" value="Male">Male&nbsp&nbsp&nbsp&nbsp

<input type="radio" name="group1" value="Female">Female<br/><br/><br/>

<strong>Hoby: </strong> &nbsp&nbsp

<input type="checkbox" name ="option1" value="Singing">Singing<br/>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

Page 15: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 15 of 31 premanandhj.hpage.com

<input type="checkbox" name ="option1" value="Reading">Reading<br/>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

<input type="checkbox" name ="option1" value="T.V.">Watching T.V<br/>

<br/><br/>

<strong>Country:</strong>

<select name="My_Menu">

<option value="India">India</option>

<option value="China">China</option>

<option value="Nepal">Nepal</option>

</select>

<center>

<input type="submit" value="Submit"></br>

</center>

</form>

</body>

</html>

OUTPUT:

Page 16: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 16 of 31 premanandhj.hpage.com

Ex:6 Creation of Color palette AIM

Write a java program 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, color

ii) If foreground is checked then set the foreground color to the selected color

iii) If background is checked then set the background color to the selected color

PROGRAM:

Page 17: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 17 of 31 premanandhj.hpage.com

ColorPalette.java import java.awt.*;

import java.awt.event.*;

import java.applet.*;

/*<applet code="ColorPalette" width=400 height=400>

</applet>*/

public class ColorPalette extends Applet implements ItemListener

{

int currcolor=5;

int flag=1;

String text="Click any of the buttons";

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,false);

Checkbox box3=new Checkbox("Loading Image",cbg,false);

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(),"prem.jpg");

flag=3;

}

Page 18: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 18 of 31 premanandhj.hpage.com

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);

Page 19: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 19 of 31 premanandhj.hpage.com

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;

}

}

OUTPUT:

C:\jdk1.6.0_05\bin>javac ColorPalette.java

C:\jdk1.6.0_05\bin>

Page 20: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 20 of 31 premanandhj.hpage.com

Ex: 7 Creation of Java Servlet

AIM:

Write programs in Java using Servlets to invoke servlets from HTML forms.

PROCEDURE

1. Open NetBean IDE5.5.

2. Click file menu and choose project ‘categories’ type as ‘web’ and ‘projects’ as ‘Web Application’.

3. Type the project name.

4. Click finish button.

5. Add a new servlet web file. Type the name of servlet file

6. Type the servlet code

7. Compile and run the file

8. Write a html code with form controls.

9. Set the servlet code path in html file form action.

10. Open the web page in browser.

ALGORITHM:

Client:

Step1:

Define and design the contents that you like to transfer to the server using html form and input type

tags.

Step2: create a submit button and close all the included tags.

Page 21: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 21 of 31 premanandhj.hpage.com

Server:

Step1: In the servlet side using the parameter request get the stings declared in the client side

(requst.getparameter)

Step2: Include necessary html coding that helps to display the content

PROGRAM:

ex7servlet.java import java.io.*;

import java.util.*;

import javax.servlet.*;

import java.net.*;

import javax.servlet.http.*;

public class ex7servlet extends GenericServlet

{

public void service(ServletRequest req,ServletResponse res) throws ServletException,IOException

{

PrintWriter out=res.getWriter();

Enumeration en=req.getParameterNames();

out.println("Student Details\n");

while(en.hasMoreElements())

{

String name_received=(String)en.nextElement();

out.print(name_received+ " = ");

String value_received=req.getParameter(name_received);

out.println(value_received);

out.println(" ");

}

out.close();

}

}

invokeServlet.html <html>

<head>

<title>Student Information Form</title>

</head>

<body>

<center>

<form name="form1"

action="http://localhost:8084/Ex7_Servlet/ex7servlet">

<h3>Enter student information in following fields -</h3>

<table>

<tr>

<td><b>Roll Number</b></td>

<td><input type="text" name="Roll Number" size="25" value=" "></td>

</tr>

<tr>

<td><b>Student Name</b></td>

<td><input type="text" name="Student Name" size="25" value=" "></td>

</tr>

<tr>

Page 22: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 22 of 31 premanandhj.hpage.com

<tr>

<td><b>Student Address</b></td>

<td><input type="text" name="Address" size="50" value=" "></td>

</tr>

<tr>

<td><b>Phone</td>

<td><input type="text" name="Phone" size="25" value=" "></td>

</tr>

<tr>

<td><b>Total Marks</td>

<td><input type="text" name="Total Marks" size="10" value=" "></td>

</tr>

</table>

<input type="submit" value="submit">

</form>

</center>

</body>

</html>

OUTPUT:

Page 23: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 23 of 31 premanandhj.hpage.com

Ex: 8. Simple XML Document using XSL AIM:

Write simple XML document to display the student information using XSL (eXtensible Stylesheet

Language)

PROGRAM:

SimpleXml.xsl <?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2>Students Database</h2>

<table border="1">

<tr bgcolor="gray">

<th>Name</th>

<th>Address</th>

<th>Standard</th>

<th>Marks</th>

</tr>

<xsl:for-each select="Student/Person-Details">

<tr bgcolor="pink">

<td><xsl:value-of select="name"/></td>

<td><xsl:value-of select="address"/></td>

<td><xsl:value-of select="branch"/></td>

<td><xsl:value-of select="marks"/></td>

</tr>

</xsl:for-each>

</table>

</body>

Page 24: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 24 of 31 premanandhj.hpage.com

</html>

</xsl:template>

</xsl:stylesheet>

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

<?xml-stylesheet type="text/xsl" href="SimpleXml.xsl"?>

<Student>

<Person-Details>

<name>Yogi</name>

<address>Pune</address>

<branch>CSE</branch>

<marks>85 percent</marks>

</Person-Details>

<Person-Details>

<name>Naren</name>

<address>Chennai</address>

<branch>IT</branch>

<marks>90 percent</marks>

</Person-Details>

<Person-Details>

<name>Varun</name>

<address>Mumbai</address>

<branch>MECH</branch>

<marks>80 percent</marks>

</Person-Details>

<Person-Details>

<name>Nithya</name>

<address>Delhi</address>

<branch>CSE</branch>

<marks>77 percent</marks>

</Person-Details>

</Student>

OUTPUT:

Page 25: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 25 of 31 premanandhj.hpage.com

Ex: 9. Web Programming using AJAX AIM: Write a HTML web page to change the content of the element using AJAX concept.

PROCEDURE

1. Open NetBean IDE 5.5. to execute Ajax program.

2. Create a new “Web Application” project.

3. Attach the text file named data.txt with the project

4. Add a new html file named “index.html “

5. Add a button in a web page.

6. Include Ajax coding for the button click action to change the content of the “div” element.

7. Update the content from “data.txt” at the place of “div” element.

PROGRAM:

Index.html <html>

<head>

<title> Ajax at work </title>

<script language = "javascript">

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest)

{

XMLHttpRequestObject = new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");

}

function getData(dataSource, divID)

{

if(XMLHttpRequestObject)

{

var obj = document.getElementById(divID);

XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange = function()

{

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

{

obj.innerHTML = XMLHttpRequestObject.responseText;

}

}

XMLHttpRequestObject.send(null);

}

}

</script>

</head>

<body>

<h1> Fetching data with Ajax </h1>

Page 26: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 26 of 31 premanandhj.hpage.com

<form>

<input type = "button" value = "Display Message" onclick = "getData('data.txt', 'targetDiv')">

</form>

<div id="targetDiv">

<p>The fetched data will go here.</p>

</div>

</body>

</html>

Data.txt This is the new data

OUTPUT

Page 27: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 27 of 31 premanandhj.hpage.com

Ex: 10. On-line Examination using JSP AIM:

To 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.

PROCEDURE

1. Create a MS-Access database ans save the name as “StudentDB1”

2. Create a table “StudentTable” with fields Seat_no, Name and Marks.

3. Save the table and database. Close the MS-Access.

4. Open ODBC window by selecting start->control panel->Administrative Tools->Data

Source(ODBC)

5. In a ODBC Admin window click “Add “ button, select “Microsoft Access Driver(*.mdb,*.accdb)”

and press finish.

6. Set the Data Source name as “StudentDB1”, Select the location of the created MS-Access database.

7. Open NetBean IDE 5.5.

8. Create a new “Web Application” project by choosing file->new Project->Web Application.

9. Choose the project location and set the project name as “onlineExam”

10. Design the online exam home page with 5 question in the “index.jsp” file

11. Design the repot page named “index.jsp” to display the student mark list.

12. Save the project

13. Build the project by choosing Build->Build main project .

14. Run the project

ALGORITHM:

1. In the “index.jsp” set 5 questions with true and false option.

2. Submit the form information into “Exam.jsp”.

3. In the “Exam.jsp” get the data from “index.jsp”(seat no,name,5 answer value)

4. Check the value all the question. If the question is correct add 2 marks else o with total.

5. Update the details into database.

6. Show the current student mark sheet.

PROGRAM

index.jsp <%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<html>

<head>

<title>Online Examination</title>

<script language="javascript">

function validation(Form_obj)

{

if(Form_obj.Seat_no.value.length==0)

{

alert("Please,fill up the Seat Number");

Form_obj.Seat_no.focus();

return false;

}

Page 28: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 28 of 31 premanandhj.hpage.com

if(Form_obj.Name.value.length==0)

{

alert("Please,fill up the Name");

Form_obj.Name.focus();

return false;

}

return true;

}

</script>

</head>

<body bgcolor=lightgreen>

<center>

<h1>JP College of Engineering</h1>

<h2>OnLine Examination - Web Technology</h2>

</center>

<form action="Exam.jsp" method="post" name="entry" onSubmit="return validation(this)">

<input type="hidden" value="list" name="action">

<strong>Seat Number:</strong><input type="text" name="Seat_no"><br><br>

<strong>Name:</strong>><input type="text" name="Name" size="50"><br><br>

<b>Total Marks:10(5*2=10) </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Time: 15

Min.</b>

<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>

Exam.jsp <%@ page language="java" import="java.sql.*" %>

<%@ page import="java.io.*" %>

Page 29: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 29 of 31 premanandhj.hpage.com

<%@ 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;

Connection connect;

Statement stmt;

ResultSet rs;

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

String url = "jdbc:odbc:StudentDB1";

connect = DriverManager.getConnection(url, " ", " ");

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;

stmt = connect.createStatement();

String query = "INSERT INTO StudentTable (" + "Seat_no,Name,Marks" + ") VALUES ('" +SeatNum +

"', '" + Name + "', '"+Total+ "')";

int result = stmt.executeUpdate(query);

stmt.close();

stmt = connect.createStatement();

query = "SELECT * FROM StudentTable WHERE Name="+"'"+Name+"'";

rs = stmt.executeQuery(query);

%>

<html>

<head><title>Student Mark List</title></head>

<body bgcolor=khaki>

Page 30: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 30 of 31 premanandhj.hpage.com

<center>

<h2>Students Marksheet</h2>

<h3>Name of the College:JP College of Engineering</h3>

<h4>Department:CSE</h4>

<table border="1" cellspacing="0" cellpadding="0">

<tr>

<td><b>Seat_No</b></td>

<td><b>Name</b></td>

<td><b>Marks</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();

connect.close();

%>

</table>

</center>

<br/> <br/><br/>

<b>Date:<%=new java.util.Date().toString() %><br/><br/>

<b>Signature: <strike>prem</strike> <b><br/><br/>

<a href="http://localhost:8084/onlineExam/index.jsp">Click here to go back</a>

</body>

</html>

OUTPUT

Page 31: CS67 - Internet Programming Lab Manual

Natchatran - Dazzling in front of world Prepared by: PREM ANANDH.J

Powered by: premanandhj.blogspot.in Page 31 of 31 premanandhj.hpage.com