4.FINAL Web Tech Lab

Ex.
No: 1
EMBEDDING AN IMAGE MAP
Date:
Aim:
Algorithm:
Step1: Create a html file with map tag.
Step2: Set the source attribute of the img tag to the location of the image and also set the use map attribute.
Step3: Specify an area with name, shape and href set of the appropriate value.
Step4: Repeat step3 as many hot spots you want to put in the map.
Step5: Create html file for each and every hot spots the user will select the particular location it shows
information about it.
Program:
Solarsystem.html
<HTML>
<HEAD>
<TITLE>solar system</TITLE>
</HEAD>
<BODY>
<img src="p1.jpg" width="600" height="500" usemap="#metroid" ismap="ismap" >
<map name ="metroid" id="metroid">
<area href ="Mercury.html" shape = "rect" coords = "100,400,150,450" title = "Mercury planet" />
<area href ="venus.html" shape = "poly" coords = "150, 415, 175,348,265,360,190,420,190,440" title ="venus
planet"/>
<area href ='earth.html' shape='circle' coords='175,495,180' title='Earth planet'/>
<area href ='mars.html' shape='circle' coords='175,495,230' title='Mars planet'/>
</map>
</BODY>
</HTML>
Mercury.html
<HTML>
<HEAD>
<TITLE>About Mercury</TITLE>
</HEAD>
<BODY>
<CENTER> <H1>Mercury Planet</H1> </CENTER>
<p>
Mercury is the innermost and smallest planet in the Solar System,orbiting the Sun once every 87.969 Earth
days.The orbit of Mercury has the highest eccentricity of all the Solar System planets, and it has the smallest
axial tilt.It completes three rotations about its axis for every two orbits.The perihelion of Mercury's orbit
precesses around the Sun at an excess of 43 arcseconds per century; a phenomenon that was explained in the
20th century by Albert Einstein's General Theory of Relativity.
</p>
<a href='solarsystem.html'>solar planet</a>

</BODY>
</HTML>
1
Venus.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER> <H1>Venus Planet</H1> </CENTER>
<p>
Venus is the second planet from the Sun and the sixth largest. Venus' orbit is the most nearly circular of that
of any planet, with an eccentricity of less than 1%.
orbit: 108,200,000 km (0.72 AU) from Sun
diameter: 12,103.6 km
mass: 4.869e24 kg
Venus has been known since prehistoric times. It is the brightest object in the sky except for the Sun and the
Moon.
</p>
</BODY>
</HTML>
Earth.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER> <H1>Earth Planet</H1> </CENTER>
<p>
Earth is the third planet from the Sun and the fifth largest:
diameter: 12,756.3 km
mass: 5.972e24 kg
Earth is the only planet whose English name does not derive from Greek/Roman mythology. The name derives
from Old English and Germanic. There are, of course, hundreds of other names for the planet in other languages.
In Roman Mythology, the goddess of the Earth was Tellus - the fertile soil
</p>
</BODY>
</HTML>
Mars.html
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER> <H1>Mars Planet</H1> </CENTER>
<p>
Mars is the fourth planet from the Sun and the seventh largest:
diameter: 6,794 km
2
mass: 6.4219e23 kg
The first spacecraft to visit Mars was Mariner 4 in 1965. Several others followed including Mars 2, the first
spacecraft to land on Mars and the two Viking landers in 1976. Ending a long 20 year hiatus, Mars Pathfinder
landed successfully on Mars on 1997 July 4. In 2004 the Mars Expedition Rovers "Spirit" and "Opportunity"
landed on Mars sending back geologic data and many pictures; they are still operating after more than three years
on M
</p>
</BODY>
</HTML>
Output:
3
Ex.No: 2
CASCADING STYLE SHEETS
Date:
Result:
2.1 INLINE STYLE SHEET

Aim:
Algorithm:
Step1: Create a html file.
Step2: Inside the head tag define the click reference, its type and set href.
Step3: Close the head tag.
Step4: Inside the body tag define the required heading h1,h2,…hn paragraph.
Step5: Close the body tag and all opened tags.
Step6: Create the inline style sheet.
Step7: Define the style formats such as button and text to corresponding header.
Step8: Execute the program.
Program:
Inline.html
<html>
<head>
<title>inline sheet</title>
</head>
<body>
<p style="font-family:Showcard Gothic">Welcome user..</p>
4
<p style="font-size:40pt;font-family:Microsoft sans serif">Gmail</p>
<p style="font-size:30pt;color:red;font-family:arial">The worlds largest spam free Email provider</p>
<p style="font-size:30pt;color:blue;font-family:Kristen ITC">Old user login here...</p>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value=" ">@gmail.com.<br><br>
Password:<input type="password"value=""<br><br></h4>
<input type="submit" value="login">
<input type="reset"value="cancel"><br><br>
<p style="font-size:15pt;font-family=Lucida Handwriting">if u have your username or password
<a href="pass.html">click</a>here<br>
<p style="font-size:15pt;font-family=fixedsys">if you are a new user
<a href="logon.html">logon</a>here</p>
</body>
</html>
Logon.html
<html>
<head>
<title>hai</title>
</head>
<body>
<h4 style="font-family:Lucida Handwriting">User Name:<input type="text" value=" ">@gmail.com.<br><br>
password:<input type="password" value=""><br><br>
new password:<input type="new password" value=""><br>
<br>
confirm password:<input type="confirm password"value=""><br><br>
<input type="submit" value="ok">
<input type="submit" value="cancel">
</body>
</html>
Pass.html
<html>
<head> <title>hai</title>
</head> <body>
<h1>welcome to gmail</h1>
</body>
</html>
Output:
5
Result:
6
2.2 EMBEDDED STYLE SHEET
Aim:
Algorithm:
Step1: Create html file with the style tag, inside head tag.
Step2: Set the style such as font-family, font-size, color, left etc, for the heading h1,h2,…h6 and
respectively.
Step4: Specify the heading and information required inside the body tag.
Step5: Close the opened tag.
Program:
<html>
<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;
}
</style>
</head>
<body>
<h1> <center>EMBEDDED STYLE SHEET </h1>
<h2> Computer science and Engineering</h2>
<h3>
<p>
It is the best department.It has several lab facilities.
</p>
</h3>
</body>
</html>
Output:
7
Result:
2.3 EXTERNAL STYLE SHEET

Aim:
8
Algorithm:
Step1: Create a html file.
Step2: Inside the head tag define the link reference, its type and set href as “ex.css”.
Step4: Inside the body tag define the required heading h1,h2,…h6 and paragraph.
Step5: Close the body tag and all opened tags.
Step6: Create the cascade style sheet file “ex.css”.
Step7: Define the style formats such as font color, font size, etc to the corresponding headings and
paragraph and same its as “ex.css”.
Program:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body> <center>
<h1> External style sheet</h1></center>
<h2><center>GKMCET</center></h2>
<p>
<h3>Our Institution consists of various departments:<br>
1.CSE<br>
2.ECE<br></h3>
</p>
</body>
</html>
EX.CSS
h1
{
font-family:arial;
color:red;
}
h2
{
font-family:verdana;
color:green;
}
9
Output:
Ex.No: 3(a)
CLIENT SIDE SCRIPT FOR VALIDATING WEB FORM
Date:
Result:
10
Aim:
Algorithm:
Step1:Insert a <form> element in the HTML document with the following attributes:
o name – to identify the form element.
o action – specifies the target of the form data to be submitted.
o onsubmit – to call the Java script validation function when the submit button is pressed.
Step2:Insert all the necessary form elements such as <input>, <textarea>,<select>, and <fieldset>.
Step3:Insert various types of input fields (such as text, radio, checkbox, and submit) by using ‘type’
attribute of <input> element.
Step4:Embed the form validation function within the head section of the HTML document by using
<script> element as follows:
<script type="text/javascript">
Program:
FormValidation.html
<html>
<head>
<title>Form Validation Using Java Script</title>
function validation()
{
if(document.f1.name.value=="")
{
window.alert("Plz Enter Your Name");
return false;
}
else if(document.f1.email.value=="")
{
window.alert("Plz Enter Your E-mail:");
return false;
}
else if(document.f1.email.value.indexOf('@gmail.com')==-1)
{
window.alert("Plz Enter Your Valid E-mail");
return false;
}
else if(document.f1.addr.value=="")
{
11
window.alert("Plz Enter Your Address");
return false;
}
else if(document.f1.country.selectedIndex==0)
{
window.alert("Plz Select Your Country");
return false;
}
else if((document.f1.rdo[0].checked==false)&&(document.f1.rdo[1].checked==false))
{
window.alert("Plz Choose Your Gender");
return false;
}
else if((document.f1.chk[0].checked==false)&&(document.f1.chk[1].checked==false))
{
window.alert("Plz Select Your Qualification");
return false;
}
else
return true;
}
</script>
</head>
<body bgcolor="lightgreen">
<h3 style="text-align:center">Web Form Validation Using Java Script</h3>
<form name="f1" action="Register.html" onsubmit="return validation()">
<fieldset>
<legend>Registration Form</legend>
<br/>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Address:</td>
<td><Textarea name="addr" rows="5" cols="20"></Textarea></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option>---Select Your Country---</option>
<option>India</option>
<option>USA</option>
<option>AUS</option>
<option>UK</option>
12
</select>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="rdo">Male
<input type="radio" name="rdo">Female
</td>
</tr>
<tr>
<td>Qualification:</td>
<td>
<input type="checkbox" name="chk">B.E
<input type="checkbox" name="chk">M.E
</td>
</tr>
</table>
<br/>
<input type="submit" value="Register">
</fieldset>
</form>
</body>
</html>
Register.html
<html>
<head>
<title>Registration Successfull</title>
</head>
<body>
<h3>Registered Successfully.......!</h3>
</body>
</html>
OUTPUT:
Valid Form:
13
Result:
14
Ex.No: 3(b)
SQUARE AND CUBE OF NUMBERS USING JAVASCRIPT
Date:
Aim:
Algorithm:
Step1: Create a html tag.
Step2: Insert the script type as text/java script.
Step3: Get the input from user using prompt box.
Step3: Inside the script type using function for loop statement.
Step4: To calculate cube and square and display the result using alert box
Step5: Close the html tag.
Program:
Square.html
<html>
function fun(str)
{
var num=Number(str);
for(count=1;count<=num;count++)
{
alert("value="+count+"square="+count*count+"cube="+count*count*count);
}
}
</script>
<body>
var input_str=prompt("enter some number","","");
fun(input_str);
</script>
</body>
</html>
OUTPUT:
15
Result:
.
16
Ex.No: 3(c)
SIMPLE FUNCTION TO SEARCH THE WORD USING JAVASCRIPT
Date:
Aim:
Algorithm:
Step1: Create a html tag.

Step2: Insert the script type as text/java script.
Step3: Inside the script type using function RegExp in java script
Step4: RegExp using for to search the particular word present in the sentence
Step5: Close the html tag.
Program:
<html>
function TestString(str)
{
document.write("the given string is");
document.write("<em>"+str+"</em>"+"</br>");
var i=new RegExp("like");
if(i.test(str))
alert("the word 'like' is present in the string");
else
alert("sorry!!!");
}
</script>
</head>
<body>
<h3>
TestString("I like programming");
</script>
</h3>
</body>
</html>
17
OUTPUT:
Result:
18
Ex.No: 4(a) COLOR PALETTES BY APPLET PROGRAM
Date:
Aim:
Algorithm:
Step 1: Start the program.
Step 2: Create an array of button objects.
Step 3: Create an array of strings that has colors.
Step 4: Create a checkbox group with 3 check boxes.
Step 5: Add the buttons and set the background color.
Step 6: Add the boxes
Step 7: Register the events
Step 8: Define the item state Change method
i. If the first checkbox is clicked, the flag 1 is set.
ii. If the second checkbox is clicked, the flag 2 is set.
iii. If the third checkbox is clicked, the flag 3 is set.
Step 9: Define the paint method.
i. If flag=1, then set the chosen color to be the background using set back ground method.
ii. If flag=2, then set the chosen color to the text color using the set Color method.
iii. If flag=3, then set the heading as image.
Step 10: Stop the program.
Program:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/*
<applet code="Experiment3" width=50 height=50>
</applet>
*/
public class Experiment3 extends Applet implements ItemListener
{
int currcolor=5;
int flag=1;
int i;
String text="click any of 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,false);
Checkbox box3=new Checkbox("Loading Image",cbg,false);
public void init()

{
for(i=0;i<5;i++)
{
buttons[i]=new Button(" ");
19
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);
}
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(),"Water lilies.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:
20
g.setColor(Color.magenta);
break;
case 5:
g.setColor(Color.black);
break;
}
}
else if(flag==1)
{
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.black);
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;
}
}
21
return false;
}
}
Output:
22
Ex.No: 4(b) BANKING SYSTEM BY APPLET PROGRAM
Date:
Result:
Aim:
Algorithm:
Step 2: Create an array of button objects.
Step 3: Create an array of strings that has colors.
Step 4: Create a checkbox group with 3 check boxes.
Step 5: Add the buttons and set the background color.
Step 6: Add the boxes
Step 7: Register the events
Step 8: Define the item state Change method
i. If the first checkbox is clicked, the flag 1 is set.
ii. If the second checkbox is clicked, the flag 2 is set.
iii. If the third checkbox is clicked, the flag 3 is set.
Step 9: Define the paint method.
i. If flag=1, then set the chosen color to be the background using set back ground
method.
ii. If flag=2, then set the chosen color to the text color using the set Color method.
23
iii. If flag=3, then set the heading as image.
Program:
Bang2.java
package sasa;
/**
*
* @author Staff
*/
import java.io.*;
import java.awt.*;
import java.awt.event.*;
class frame1 extends Frame

{
frame1(String title)
{
super(title);
MyWindowAdapter ad=new MyWindowAdapter(this);
addWindowListener(ad);
}
public void paint(Graphics g)
{
g.drawString("This is a frame Window",10,40);
}
}
class MyWindowAdapter extends WindowAdapter

{
frame1 f1;
public MyWindowAdapter(frame1 f1)
{
this.f1=f1;
}
public void windowClosing(WindowEvent we)
{
f1.setVisible(false);
}
public class bang2 extends Applet implements ActionListener,ItemListener

{
Label customer,deposit,accno,widthdraw;
24
TextField cust,dept,number,draw;
TextArea t;
Choice type;
Checkbox yes,nu;
CheckboxGroup te;
Frame f;
Button b;
public void init()

{
f=new frame1("A frame window");

f.setSize(250,250);
f.setVisible(true);
setBackground(Color.yellow);
setForeground(Color.red);
customer=new Label("CUSTOMER");
deposit=new Label("DEPOSIT");
accno=new Label("ACCOUNT NUMBER");
widthdraw=new Label("WIDTHDRAW");
cust=new TextField(20);
dept=new TextField(20);
number=new TextField(20);
draw=new TextField(20);
type=new Choice();
type.add("FIXED");
type.add("RD");
type.add("SECOND CLASS");
te=new CheckboxGroup();
yes=new Checkbox("YES",te,false);
nu=new Checkbox("NO",te,false);
t=new TextArea(40,45);
b=new Button("submit");
add(customer);
add(cust);
add(accno);
add(number);
25
add(deposit);
add(dept);
add(widthdraw);
add(draw);
add(type);
add(b);
add(yes);
add(nu);
add(t);
b.addActionListener(this);
type.addItemListener(this);
}
public void actionPerformed(ActionEvent ae)

{
if(ae.getActionCommand().equals("submit"))
{
t.setText("NAME: "+cust.getText()+""+"ACCOUNT NUMBER :"+number.getText()+""+"DEPOSIT
AMOUNT: "+dept.getText()+""+"TYPE OF ACCOUNT : "+type.getSelectedItem());
}
}
public void itemStateChanged(ItemEvent ie)

{
}
}
Output:
26
Ex.No: 5(a) HTML TO SERVLET PROGRAM
Date:
Result:
Aim:
Algorithm:
27
Step1 :Write a client side HTML program (client.html) with the following:
o Insert a <form> that contains the fields such as text, password and one
submit button.
o Set the URL of the server as the value of form’s action attribute.
Step2 :Write a java servlet program (server.java) with the following:
o Define a class server that extends the property of the class GenericServlet.
o Handle the request from the client by using the method service() of GenericServlet class.
o Get the parameter names from the HTML form by using the method getParameterNames().
o Get the parameter values from the HTML forms by using the method getParameter().
o Send the response to the client by using the method of PrintWriter class.
Step3: Compile the java source code (server.java).
Step4: Run the HTML program (client.html).
Step5: Submit the form data to the server.
Program:
Addition.html:
<html>
<head>
<title> Addtion of Two Numbers </title>
</head>
<body>
<form action = “Addition” method = "GET">
firstnumber <input type =text size =20 name =firstnumber>
second number <input type =text size =20 name =secondnumber>
<input type = submit value = "submit">
</form>
</body>
</html>
Addition.java:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Addtion extends HttpServlet

{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String fname = request.getParameter("firstnumber");
String sname = request.getParameter("secondnumber");
int fno = Integer.valueOf(fname );
int sno =Integer.valueOf(sname);
out.println("Addition total No:");
out.println( fno+sno);
}
}
28
Ex.No: 5(b)
APPLET TO SERVLET PROGRAM
Date:
Output:
Result:
Aim:
Algorithm:
Step1: Start the program
Step2: Write the servlet example program and save it in java
29
Step3: Write the xml in program and save in the file with extension filename.xml
Step 4: Save the AppletServletExample in java files
Program:
Home.html:
<html>
<body>
<h1>Java Applet Demo</h1>
<applet code=AppletCallingServlet.class width=500 height=500>
</applet>
</body>
</html>
AppletCallingServlet.java
import java.io.*;
import java.awt.*;
import java.net.*;
public class AppletCallingServlet extends Applet
{
URL url = null;
URLConnection servletConnection = null;
public void init()

{
try{
url = new URL("http://localhost:8080/ServletExample/ServletExample");
servletConnection = url.openConnection();
servletConnection.setDoInput(true);
servletConnection.setDoOutput(true);
servletConnection.setUseCaches(false);
servletConnection.setDefaultUseCaches(false);
servletConnection.setRequestProperty("Content-Type","application/octet-stream");
}
catch(Exception e)
{
e.printStackTrace();
}
}
public void paint(Graphics g)

{
try
{
ObjectInputStream input = new ObjectInputStream(servletConnection.getInputStream());
g.drawString("Applet Servlet Communication",50,50);
String str = new String();
str = (String)input.readObject();
g.drawString(" Message sent from server: " + str,50,100);
30
input.close();
}
catch( Exception e)
{
e.printStackTrace();
}
}
ServletExample.java:
import java.io.*;
public class ServletExample extends HttpServlet

{
public void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException , IOException
{
ObjectOutputStream output = null;

try
{
output = new ObjectOutputStream(response.getOutputStream());
String str = new String("Hello World");
output.writeObject(str);
output.flush();
output.close();
System.out.println("Message is===== " + str);
}
catch( Exception e)
{
e. printStackTrace();
} }}
Output:
31
Result:
32
Ex.No: 6(a)
ONLINE EXAMINATION USING JSP
Aim: Date:
Algorithm:
Client:
Step 1: In index.html on the client side declare the contents that you like to transfer to the server using
html form and input type tags.
Step 2: create a submit button and close all the included tags.
Servlet:
Step 1: Import all necessary packages
Step 2: Define a class that extends servlet
Step 3: In the do Post() method, do the following:
i) Set the content type of the response to "text/html"
ii) Create a writer to the response
iii) Get a parameter from the request
iv) If its value is equal to right answer then add 5 to mark variable
v) Similarly repeat step
vi) for all parameters
vii) Display the result in an html format using the writer
Program:
onlineExam.html
<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;
}
return true;
}
</script>
</head>
<body bgcolor=lightgreen>
<h1 align="left">OnLine Examination</h1>

<form action="Exam.jsp"method="post"name="entry"onSubmit="return validation
(this)">
<div align="left">
<input type="hidden"value="list"name="action">
<table>
<tr>
<td><h3>Seat Number:</h3></td>
<td><input type="text" name="Seat_no"size="50"></td>
</tr>
<tr>
<td><h3>Name:</h3></td>
<td><input type="text" name="Name"size="50"></td>
33
</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>
</div>
<hr align="left"/>
<div align="left"><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/>

True
false<br>
<br/>
<b>3.Tim-Berner Lee is the originator of java.</b><br/>

True
false<br>
<br/>
<b>4.JPG is not video file extension.</b><br/>

True
false<br>
<br/>
<b>5.HTTpP is statefull protocol.</b><br/>

True
false<br>
</div>
<hr align="left"/>
<div align="left">
<input type="submit"value="Submit">
<input type="reset" value="clear">
<br>
34
<br>
</div>
</form>
</html>
Exam.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;
Connection connect = null;
Statement stmt = null;
ResultSet rs = null;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:studentDB1";
connect = DriverManager.getConnection(url);
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;
if (ans2.equals("false"))
a2 = 2;
else
a2 = 0;
a3 = 2;
else
a3 = 0;
if (ans4.equals("true"))
a4 = 2;
else
a4 = 0;
a5 = 2;
else
a5 = 0;
int Total = a1 + a2 + a3 + a4 + a5;

35
stmt = connect.createStatement();
String query = "INSERT INTO StudentTable(Seat_no,Name1,Marks)VALUES('" +
SeatNum + "','" + Name + "','" + Total + "')";

int result = stmt.executeUpdate(query);
stmt.close();
stmt = connect.createStatement();
query = "SELECT*FROM StudentTable WHERE Name1='"+Name+"'";
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:sri ram engg college</h3>
<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/>
<table>
<tr><td><b>Date:<%=new java.util.Date().toString()%></b></td></tr>
<tr><td><b>Signature:X.Y.Z.</b></td></tr>
</table>
<div>
<a href="onlineExam.html">click here to go back</a>
</div>
</body>
</html>
<%} else {%>
<%}%>
36
Database (Database1.mdb) –DSN CONNECTION(studentDB1)
37
Output:
38
Ex.No: 6(b) STUDENT MARKLIST USING SERVLET WITH DATABASE
Date:
CONNECTIVITY
Result:
AIM:
ALGORITHM:
Client:
Step1: In index.html on the client side declare 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.
Servlet:
Step 1: Import all necessary packages
Step 2: Define a class that extends servlet
Step 3: In the doPost() method, do the following:
i) Set the content type of the response to "text/html"
ii) connect with the database which has the student marklist
iii) query the data to the database
Step 4: Display the student marklist
Program:
Serv:
import java.io.*;
import java.sql.*;
39
public class serv extends HttpServlet
{
String message,Reg_no;
Connection connect;
Statement stmt=null; ResultSet
rs=null;
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException
{
try
{
String url="jdbc:odbc:NEO";
connect=DriverManager.getConnection(url," "," "); message="MarkList";
}
catch(ClassNotFoundException cnfex){
cnfex.printStackTrace();
}
catch(SQLException sqlex)
{
sqlex.printStackTrace();
}
catch(Exception excp)
{
excp.printStackTrace();
}
Reg_no=request.getParameter("regno");
response.setContentType("text/html"); PrintWriter
out=response.getWriter(); out.println("<html>");
out.println("<head>"); out.println("</head>");
out.println("<body bgcolor=cyan>");
out.println("<center>");
out.println("<h1>"+message+"</h1>\n");
try
{
Statement stmt=connect.createStatement();
String query=new String("SELECT * FROM MarkList WHERE regno= "+Reg_no); rs=stmt.executeQuery
(query);
boolean b=rs.next();
out.println("Regsitration No:"+rs.getInt(1)); out.println("<br>"+"Name:"+rs.getString(2)); out.println("<table
border=5>"); out.println("<th>"+"cs01"+"</th>"); out.println("<th>"+"cs02 "+"</th>");
out.println("<th>"+"cs03"+"</th>"); out.println("<th>"+"status"+"</th>");
while(b)
{
out.println("<tr>"); out.print("<td>"+rs.getString(3)+"</td>");
out.print("<td>"+rs.getString(4)+"</td>");
out.print("<td>"+rs.getString(5)+"</td>");
out.print("<td>"+rs.getString(6)+"</td>"); out.println("</tr>");
b=rs.next();
}
out.println("</table>");
40
}
catch(SQLException ex){
out.println("error in connection");
}
finally
{
try
{ if(rs!=null)
rs.close();
if(stmt!=null)
stmt.close();
if(connect!=null)
connect.close();
}
catch(SQLException e){ }
}
out.println("</center>");
out.println("</body></html>");
}
}
html:
<html>
<head><title> mark sheet</title></head>
<body>
<center>
<h1>Student Mark Sheet</h1>
</center>
<form action="serv" method="POST">
registration number:<input type="text" name="regno">
<input type="submit" value="Submit"><br><br>
</form>
</body>
</html>
Output:
41
42
Ex.No: 7(a)
SIMPLE XML PROGRAM
Date:
Result:
Aim:
Algorithm:
Step1: Start the program
Step2: Initialize the xml version and encoding format
Step3: Set the element information.
Step 4: Initialize all the details to PC data.
Program:
<?xml version="1.0"?>
<student>
<name>SHARAN</name>
</student>
Output:
43
Ex.No: 7(b) PROGRAM USING XML - XSLT
Date:
Result:
Aim:
Algorithm:
Step 2: Create an XML document with the details of the student such as name, address, standard and mark.
Step 3: Import an XSL file to the xml file.
Step 4: The XSL file imported puts the details of the students given in the xml file in a table and gets the
details of each student from the xml file using the value-of attribute.
Step 5: The output in the browser would be the details from the XML file with the style specified in
XSL applied to it.
Program:
Info.XML:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="detail.xsl"?>
<student>
44
<personal_info>
<name>priya</name>
<addr>avadi</addr>
<std>3rd yr</std>
<mark>85</mark>
</personal_info>
<personal_info>
<name>mathi</name>
<addr>tirutani</addr>
<std>3rd yr</std>
<mark>75</mark>
</personal_info>
<personal_info>
<name>reshma</name>
<addr>egmore</addr>
<std>3rd yr</std>
<mark>80</mark>
</personal_info>
<personal_info>
<name>dilshad</name>
<addr>pattalam</addr>
<std>3rd yr</std>
<mark>88</mark>
</personal_info>
</student>
Detail.XSL:
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body bgcolor="pink">
<center><h2>student database</h2></center>
<center>
<table bgcolor="aqua" border="7" width="650" height="400">
<tr>
<th>name</th>
<th>addr</th>
<th>std</th>
<th>mark</th>
</tr>
<xsl:for-each select="student/personal_info">
<xsl:sort select="mark"/>
<tr>
45
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="addr"/></td>
<td><xsl:value-of select="std"/></td>
<td><xsl:value-of select="mark"/></td>
</tr>
</xsl:for-each>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
46
Ex. No: 7(c)
PROGRAM USING XML WITH CSS
Date:
Result:
Aim:
Algorithm:

Step 2: Create an XML document with the details of the student such as customer, ITEM, Order_ITEM
Step 3: Import an CSS file to the xml file.
Step 4: The CSS file imported puts the details of the Order given in the xml file and gets the details
of each Order from the xml file using the value-of attribute.
Step 5: The output in the browser would be the details from the XML file with the style specified in
CSS applied to it.
Program:
Order.XML:
<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/css" href=ORDERPROCESSING.CSS"?>
<Order>
47
<Customer>
<Customerno>1001</Customerno>
<Cname>Selva</Cname>
<City>Namakkal</City>
</Customer>
<Cust_Order>
<Orderno>2345</Orderno>
<Odate>12/11/14</Odate>
<Cust_Noref>7890</Cust_Noref>
<Ord_Amt>20,000</Ord_Amt>
</Cust_Order>
<Item>
<Itemno>9000</Itemno>
<Item_Name>Mobile</Item_Name>
<Unit_Price> 20,000</Unit_Price>
</Item>
<Order_Item>
<Ordernorefcust_Order>8000</Ordernorefcust_Order>
<Itemnorefitem>3456</Itemnorefitem>
<Qty>1</Qty>
</Order_Item>
</Order>
ORDERPROCESSING.CSS
<Order>
{
font-family:arial;
Color:red;
font-size:16pt
}
<Customerno>
{
font-family:arial;
Color:red;
font-size:16pt
}
<Orderno>
{
font-family:arial;
Color:red;
font-size:16pt
}
<ITEMNO>
{
font-family:arial;
Color:red;
font-size:16pt
}
<ORDERNO REF CUST_ORDER>
48
{
font-family:arial;
Color:red;
font-size:16pt
}
Output:
49
Ex.No: 8(a)
PROGRAM USING DOM WITH XML
Date:
Result:
Aim:
50
Algorithm:
Step 1: Start the program
Step 2: Keep the xml and java file in the same folder.
Step 3: Import the required packages initially.
Step 4: Use Buffer Reader to read the contents from the command prompt.
Step 5: Get the name of the xml file from the user to execute.
Step 6: Using XML Reader Factory obtain the parser.
Step 7: If the document is correctly parsed then print document is well formed else print document
is not well formed.
Program:
Parsing_DOMDemo.java:
import java.io.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import org.xml.sax.*;
public class Parsing_DOMDemo

{
static public void main(String[] arg)
{
try
{
System.out.print("Enter the name of XML document ");
BufferedReader input = new BufferedReader(new InputStreamReader(System.in));
String file_name = input.readLine();
File fp = new File(file_name);
if(fp.exists())
{
try
{
DocumentBuilderFactory Factory_obj =
DocumentBuilderFactory.newInstance();
DocumentBuilder builder = Factory_obj.newDocumentBuilder();
InputSource ip_src = new InputSource(file_name);
Document doc = builder.parse(ip_src);
System.out.println(file_name + " is well-formed!");
}
catch (Exception e)
{
System.out.println(file_name + " isn't well-formed!");
System.exit(1);
}
}
else
{
51
System.out.print("File not found!");
}
}
catch(IOException ex)
{
ex.printStackTrace();
}
}
}
sax.xml:
<student>
<name>SHARAN</name>
Output:
After Validating:
sax.xml:
<student>
52
Ex.No: 8(b)
PROGRAM USING SAX WITH XML
Date:
<name>SHARAN</name>
</student>
Result:
Aim:
Algorithm:
53
Step 1: Start the program
Step 2: Keep the xml and java file in the same folder.
Step 3: Import the required packages initially.
Step 4: Use Buffer Reader to read the contents from the command prompt.
Step 5: Get the name of the xml file from the user to execute.
Step 6: Using XML Reader Factory obtain the parser.
Step 7: If the document is correctly parsed then print document is well formed else print document
is not well formed.
Program:
import java.io.*;
import org.xml.sax.*;
import org.xml.sax.helpers.*;
public class Parsing_SAXDemo

{
public static void main(String[] args) throws IOException
{
try
{
System.out.print("Enter the name of XML document ");
BufferedReader input = new BufferedReader(new InputStreamReader(System.in));
String file_name = input.readLine();
File fp = new File(file_name);
if (fp.exists())
{
try
{
XMLReader reader = XMLReaderFactory.createXMLReader();
reader.parse(file_name);
System.out.println(file_name + " is well-formed.");
}
catch (Exception e)
{
System.out.println(file_name + " is not well-formed.");
System.exit(1);
}
}
else
{
System.out.println("File is not present: " + file_name);
}
}
catch (IOException ex){ex.printStackTrace();}
}
}
54
two.xml
<student>
<name>SURESH</name>
Output:
XMLnot well formed program:
XML well formed program:

two.xml
<student>
<name>SURESH</name>
</student>
55
Ex.No: 9
PROGRAM USING AJAX
Date:
Result:
Aim:
Algorithm:
Step 1: Start the Program
Step 2: Enter the chemistry element in index.html
Step 3: Read the element data by request.getParameter() on chems.jsp.
Step 4: Check given element in element list.
Step 5: Display the definition of given element.
Step 6: Stop the Program
Program:
Chems.html
56
<html>
<head>
function loadXMLDoc()
{
var xmlhttp;
var data = (t1.value);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","chems.jsp?t1="+data,true);
xmlhttp.send();
}
</script>
</head>
<body>
<table>
<tr><td witdh=150> Enter the Chem Name : </td>
<td> <Input type=text name=t1 ></td>
</tr>
<tr><td witdh=150> Chem Name : </td><td> <div id="myDiv"></div></td>
</tr>
<tr><td> <button type="button" onClick="loadXMLDoc()">Change Content</button></td>
</tr>
</table>
</body>
</html>
chems.jsp
<%
String d=request.getParameter("t1");
String[]name;
int i=0,n=0;
name=new String[10];
name[0]="atomic number";
57
name[1]="catalyst";
name[2]="acid";
name[3]="base";
name[4]="bond energy";
name[5]="chain reactons";
name[6]="covalent bonds";
name[7]="element";
name[8]="enzyme";
name[9]="kinetics";
String[] defn;
defn=new String[10];
defn[0]="It is defined as the number of protons or electrons.";
defn[1]="a catalyst is a substance which fastens a reaction without themselves undergoing any change.";
defn[2]="An agent able to produce positively charged hydrogen ions.";
defn[3]="A base is a substance that can combine with a proton.";
defn[4]="The energy required to break a particular bond by hompolytic process.";
defn[5]="chain reaction:reactions which proceed by means of a set of repeating cyclic steps.";
defn[6]="Linkage of two atoms by the sharing of two electrons.";
defn[7]="a substance which cannot be further subdivided by chemical methods.";
defn[8]="a naturally occuringb substance able to catalyse a chemical reaction.";
defn[9]="The study of rate of reactions.";
for(i=0;i<9;i++)
{
if(d.equals(name[i]))
n=i;
}
out.println(defn[n]);
%>
Output:
58
Ex.No: 10 WEB SERVICE DATABASE CONNECTIVITY
Date:
Result:
Aim:
59
Algorithm:
Step 1: Start the Program
Step 2: Create a new service web application as server in net beans
Step 3: In the server side web application, save the NewWebService program in java extension.
Step 4: In the web service side name the pack as pack1
Step 5: Clean and build the server side and then text the web service
Step 6: Create the client side as web application client and save the programs in jsp and html extension
Step 7: Clean and build the server side and then text the web service client
Step 8: Stop the Program
Program:
NewWebService.java:
package pack1;
import javax.jws.WebService;
import javax.jws.WebMethod;
import javax.jws.WebParam;
import java.sql.*;
/**
*
* @author SREC
*/
@WebService()
public class NewWebService {
@WebMethod (operationName="get")
public String[] get(@WebParam(name="from")String from,@WebParam (name="to")String to)
{
String hello[]=new String[6];
int i=0;
try {
String filename = "d:/data1.mdb";
String database = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=";
database+= filename.trim() + ";DriverID=22;READONLY=true}";
Connection con = DriverManager.getConnection( database ,"","");
Statement s = con.createStatement();
s.execute("select * from details ");
ResultSet rs = s.getResultSet();
if (rs != null)
while ( rs.next() )
{
hello[i]= rs.getString("name");
i++;
60
hello[i]= rs.getString("date");
i++;
}
}
catch (Exception e) {
System.out.println("Error: " + e);
}
return hello;
}
Index.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<form name="air" action="action.jsp" method="post">
From<input type="text" name="from" id="from"><br/>
To<input type="text" name="to" id="to"><br/>
<input type="submit" value="GetDtails">
</form>
</body>
</html>
Action.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
<%
String from1=request.getParameter("from");
String to1=request.getParameter("to");
%>
<%-- start web service invocation --%><hr/>

<%
61
try {
pack1.NewWebServiceService service = new pack1.NewWebServiceService();

pack1.NewWebService port = service.getNewWebServicePort();
// TODO initialize WS operation arguments here
java.lang.String from = from1;
java.lang.String to = to1;
// TODO process result here
java.util.List<java.lang.String> result = port.get(from, to);
out.println("Result = "+result);
} catch (Exception ex) {
// TODO handle custom exceptions here
}
%>
<%-- end web service invocation --%><hr/>
</body>
</html>
Output
62
Result:
63

4.FINAL Web Tech Lab

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

4.FINAL Web Tech Lab

Uploaded by

Copyright:

Available Formats

Ex.

<a href='solarsystem.html'>solar planet</a>

2.1 INLINE STYLE SHEET

2.3 EXTERNAL STYLE SHEET

Step1: Create a html tag.

Step 10: Stop the program.

public void init()

Step 10: Stop the program.

class frame1 extends Frame

class MyWindowAdapter extends WindowAdapter

public class bang2 extends Applet implements ActionListener,ItemListener

public void init()

f=new frame1("A frame window");

public void actionPerformed(ActionEvent ae)

public void itemStateChanged(ItemEvent ie)

public class Addtion extends HttpServlet

public void init()

public void paint(Graphics g)

public class ServletExample extends HttpServlet

ObjectOutputStream output = null;

<h1 align="left">OnLine Examination</h1>

<b>2.In modern PC there is no cache memory.</b><br/>

<b>3.Tim-Berner Lee is the originator of java.</b><br/>

<b>4.JPG is not video file extension.</b><br/>

<b>5.HTTpP is statefull protocol.</b><br/>

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

int Total = a1 + a2 + a3 + a4 + a5;

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

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

Step 1: Start the program.

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

public class Parsing_DOMDemo

public class Parsing_SAXDemo

XML well formed program:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%-- start web service invocation --%><hr/>

pack1.NewWebServiceService service = new pack1.NewWebServiceService();

You might also like