Sei sulla pagina 1di 44

1

Ex No: 1 Image Mapping using HTML


Date:

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

Algorithm:
Step 1: Create an html file with map tag.
Step 2: Set the source attribute of the img tag to thelocation of the image and also set the
usemap attribute.
Step 3: Specify an area with name, shape and href set tothe appropriate values.
Step 4: Repeat step 3 as many hot spots you want to putin the map.
Step 5: Create html files for each and every hot spots theuser will select.

Program:
map.html:
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
</body>
</html>





2

Sun.html:
<html>
<body>
<p align="center"><h3><b>SUN</b></h3><img src="sun_files/sun.gif"
height="98" width="99"></p>
</body>
</html>

Mercury.html:
<html>
<body>
<p><h3><b>MERCURY</b></h3><img src="mercur_files/merglobe.gif"
height="100" width="100"></p>
</body>
</html>

Venus.html:
<html>
<body>
<p><h3><b>VENUS</b></h3><img src="venus_files/venglobe.gif" border="0"
height="100" width="100"></p>
</body>
</html>

Output:



3















Result:
Thus the image mapping using HTML was successfully created.

4

Ex No: 2 Cascading Style Sheets
Date:

Aim:
To create a web page with
i)Inline Cascading Style Sheet.
ii) InternalCascading Style Sheet.
iii) External Cascading Style Sheet.

Algorithm:
Step 1: Create a simple HTML page.
Step 2: Write internal CSS using <style> tag in the same page become internal CSS.
Step 3: Create another CSS file using <style> tag with extension .css file, which becomes
external CSS file
Step 4: Include the external CSS file in your file.
Step 5: Include the inline style using the style attribute in any of the tags.
Step 6: Find the style changes on your page.

Program:
css.html:
<html>
<head>
<link rel="stylesheet" href="h3.css" type="text/css">
<style type="text/css">
p{color:Red;font-family:LucidaConsole;text-align:center}
</style>
</head>
<body>
<b><center>Program for Cascading Style Sheets</center></b><br>
<h2>External Style Sheet</h2>
<h3>This content was styled using the external style sheet.</h3>
<h2><b>Internal Style Sheet</b></h2>
<p>This content was styled using the internal style sheet.</p>
<h2>Inline Style Sheets</h2>
5

<h4 style=color:"Green";font-family:"FreestyleScript";text-align:"right">This content
was styled using the inline style sheet.</h4>
</body>
</html>

h3.css:-
h3{font-family:Arial;font-size:20;color:blue;}




Output:










Result:
Thus the web page with all type of cascading style sheets was successfully created.

6

Ex No: 3 Client side scripting - Java Script
Date:

Aim:
To perform client side scripts for validating web form controls using DHTML.

Algorithm:
Step 1: Start
Step 2: Design an HTML File with Form with some fields which is to be validated
Step 3: Validate the fields by checking it with the help of script
Step 4: If step 3 fails an alert message is passed insisting that the data in the field is
invalid.
Step 5: Stop

Program:
validate.html
<html>
<head>
<title>Form Validation</title>

<script type="text/javascript">
<!--
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
7


function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}

if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
else
{
// Put extra check for data format
var ret = validateEmail();
if( ret == false )
{
return false;
}
}

if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
8

if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
9

</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

Output:




10
























Result:
Thus the client side scripts for validating web form controls using HTML was successfully
created.
11

Ex No: 4 Java Applet Programming
Date:

Aim:
To write programs in Java to create applets incorporating the following features:
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

Algorithm:
Step 1: Start
Step 2: A colorchooserApplet show six scroll bars that the user can manipulate to set the
red,green,blue,hue,brightness and saturation components of a color.
Step 3: A color patch shows the selected color, and there are six labels that show the
numerical values of all the components.
Step 4: RGB components are specified as integers in the range 0 to 255. HSB components are
specified as float values in the range 0.0F to 1.0F.
Step 5: Stop

Program:
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

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

public class exp extends Applet implements ItemListener

{

int currcolor=5; int flag=1;

String text="Click any of the buttons";
12


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


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(),"Water lilies.jpg"); flag=3;
}
repaint();
}
public void paint(Graphics g)
{
if(flag==2)
14

{ 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();
15

return true;
}
}
return false;
}
}

Output:


16







Result:
Thus the implementation of Colour picker applet to apply foreground and background colour
was successfully completed.
17

Ex No: 5a Invoking Servlet from HTML
Date:

Aim:
To write program in Java using Servlets to invoke servlets from HTML forms.

Algorithm:
Step 1: Create a web page with two text fields and name it as Web.html.
Step 2: Create a servlet program using http which gets the values entered in the text fields and
name it as PostParam.java.
Step 3: Open NetBeans and create new project of Web Application
Step 4: Include the HTML file and Servlet program in that project.
Step 5: Click Clean&Build option and Run the project.

Program:
Web.html:
<HTML><head>
<TITLE>INVOKING SERVLET FROM HTML</TITLE>
</head>
<BODY><CENTER>
<FORM name = "PostParam" method = "Post" action="PostParam">
<TABLE>
<tr>
<td><B>Employee </B></td>
<td><input type = "textbox" name="ename" size="25"
value=""></td>
</tr>
<tr>
<td><B>Phone </B></td>
<td><input type = "textbox" name="phoneno" size="25"
value=""></td>
</tr>
</TABLE>
<INPUT type = "submit" value="Submit">
</FORM></CENTER></body></html>
18


PostParam.java:
import java.io.*;
importjava.util.*;
importjavax.servlet.*;
public class PostParam extends GenericServlet
{
public void service(ServletRequestrequest,ServletResponse response) throws
ServletException,IOException
{
PrintWriterpw = response.getWriter();
Enumeration e = request.getParameterNames();
while(e.hasMoreElements())
{
String pname = (String)e.nextElement();
pw.print(pname + " = ");
String pvalue = request.getParameter(pname);
pw.println(pvalue);
}
pw.close();
}
}

19

Output:





Result:
Thus program in Java using Servlets to invoke servlets from HTML forms was successfully
created.

20

Ex No: 5b Invoking Servlet from Applet
Date:

Aim:
To write program in Java using Servlets to invoke servlets from Applets

Algorithm:
Step 1: Create a web page name it as index.html.
Step 2: Create a Applet Program using Java which gives the user interface for the
calculator application and name it as UserInterface.java.

Step 3: Create a Calculator application using java by implementing the
UserInterface.java class and name it as Calculator.java.

Step 4: Open NetBeans and create new project of Web Application
Step 5: Include the HTML file and Applet program in that project.
Step 6: Click Clean&Build option and Run the project.

Program:
index.html:
<HTML>
<HEAD>
<TITLE> A Simple Program </TITLE>
</HEAD>
<BODY>
Here is the output of my program:
<APPLET CODE="UserInterface.class" WIDTH=300 HEIGHT=250>
</APPLET>
</BODY>
</HTML>


UserInterface.java:
importjava.applet.Applet;
importjava.awt.Button;
importjava.awt.Graphics;
importjava.awt.TextField;
importjava.awt.event.ActionEvent;
importjava.awt.event.ActionListener;
importjava.awt.event.MouseAdapter;
importjava.awt.event.MouseEvent;
importjava.awt.event.MouseListener;
importjava.io.BufferedInputStream;
21

importjava.io.BufferedOutputStream;
importjava.io.BufferedReader;
importjava.io.ByteArrayInputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importjava.net.HttpURLConnection;
import java.net.URL;

public class UserInterface extends Applet implements ActionListener
{
privateTextField number1;
private Button submit;
privateTextField number2;
privateTextField number3;

public void init(){
setLayout(null);
submit = new Button("Add");
number1 = new TextField("Enter Number 1",100);
number2 = new TextField("Enter Number 2",100);
number3 = new TextField("Answer will be displayed here",100);

number1.setBounds(20, 20, 140, 30);
number2.setBounds(20, 70, 140, 30);
number3.setBounds(20, 120, 140, 30);
submit.setBounds(20, 170, 140, 30);

number3.setEditable(false);

add(submit);
add(number1);
add(number2);
add(number3);

submit.addActionListener(this);

MouseAdapterforTextClear = new MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEventevt) {
TextField text = (TextField) evt.getSource();
text.setText("");
}
};

number1.addMouseListener(forTextClear);
number2.addMouseListener(forTextClear);
22

}

public void actionPerformed(ActionEventevt)
{
if (evt.getSource() == submit)
{
URL codeBase = getCodeBase();
try
{
/*
* Below is more generic way. For this applet also need to be hosted.
*
*/
//URL servletURL = new URL(codeBase.getProtocol(),
codeBase.getHost(), codeBase.getPort(),
"/calculate/do?number1=5&number2=6");
URL servletURL = new
URL("http://localhost:8080/calculate/do?number1=" +
number1.getText() + "&number2=" + number2.getText());
HttpURLConnection conn =
(HttpURLConnection)servletURL.openConnection();
conn.setDoOutput(true);
conn.setRequestMethod("GET");
System.out.println(conn.getResponseCode());
BufferedInputStreamBufStream = new
BufferedInputStream(conn.getInputStream());
byte[] contents = new byte[1024];

intbytesRead=0;
String reply = null;
while( (bytesRead = BufStream.read(contents)) != -1){
reply = new String(contents, 0, bytesRead);
}
number3.setText(reply);
}
catch(Exception ex){
ex.printStackTrace();
}
}
}
}




23

Calculator.java
package calculator;

importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;


public class Calculator extends HttpServlet
{

@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException
{
try
{
Integer number1 = Integer.parseInt(request.getParameter("number1"));
Integer number2 = Integer.parseInt(request.getParameter("number2"));
PrintWriter out = response.getWriter();
Integer number3 = number1+number2;
out.write(number3.toString());
}
catch(Exception ex)
{
ex.printStackTrace();
}
}
}



Output:
24








Result:
Thus program in Java using Servlets to invoke servlets from Applets was successfully
created.


25

Ex No: 6a Online Examination using JSP
Date:

Aim:
To write programs in Java to create three-tier applications using JSP and Databases for
conducting on-line examination.

Algorithm:
Step 1: Create the web page with form and questions using HTML.
Step 2: Create the Java script program to check the data in the web page.
Step 3: Open NetBeans and create new project of Web Application
Step 4: Include the HTML file and JSP program in that project.
Step 5: Create the Database with the MS Access.
Step 6: Connect the Database with the web page using jdbc:odbc:driver.
Step 7: Store the result in the database.
Step 8: Click Clean&Build option and Run the project.

Program:
Online.html:
<html><head><title>Database Test</title></head>
<body>
<center><h1>Online Examination</h1></center>
<form action="online.jsp" method="POST">
<div align="left"><br></div>
<b>Seat Number:</b><input type="text" name="Seat_no">
<div align="Right">
<b>Name:</b><input type="text" name="Name" size="50"><br>
</div>
<br><br>
<b>1. Every host implements transport layer.</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br>
<b>2. It is a network layer's responsibility to forward packets reliably from
source to destination</b><br/>
<input type="radio" name="group2" value="True">True
26

<input type="radio" name="group2" value="False">False<br>
<b>3. Packet switching is more useful in bursty traffic</b><br/>
<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False<br>
<b>4. A phone network uses packet switching</b><br/>
<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<b>5. HTML is a Protocol for describing web contents</b><br/>
<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False<br>
<br><br><br>
<center>
<input type="submit" value="Submit"><br><br>
</center></form></body></html>
Online.jsp:
<%@ page contentType="text/html" language="java
import="java.sql.*,java.io.*"%>
<html><head>
<title>Three Tier Application: Online exam</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<%
String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5;
int Total=0;
Connection connect;
Statement stmt=null;
ResultSetrs=null;
%>
<%
String url="jdbc:odbc:NEO";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection(url," "," ");
message="Thank you for participating in online Exam";
27

%>
<% Seat_no=request.getParameter("Seat_no");
Name=request.getParameter("Name");
ans1=request.getParameter("group1");
ans2=request.getParameter("group2");
ans3=request. getParameter("group3");
ans4=request.getParameter("group4");
ans5=request.getParameter("group5");
if(ans1.equals("True"))
Total+=2;
if(ans2.equals("False"))
Total+=2;
if(ans3.equals("True"))
Total+=2;
if(ans4.equals("False"))
Total+=2;
if(ans5.equals("False"))
Total+=2;
%>
<%
stmt=connect.createStatement();
String query="INSERT INTO student("+"Seat_no,Name,Total"+")
VALUES('"+Seat_no+"','"+Name+"','"+Total+"')";
int result=stmt.executeUpdate(query);
%>
<%
rs=stmt.executeQuery("SELECT * FROM student");
%>
<table border="1">
<th>seat no</th><th>name</th>
<th>mark</th>
<%
while(rs.next())
{
28

%>
<tr><td><%=rs.getObject(1)%></td>
<td><%=rs.getObject(2)%></td>
<td><%=rs.getObject(3)%></td></tr>
<%
}
%>
</table>
<br/></body></html>



Database table:


Output :

29
















Result:
Thus program to create three-tier applications using JSP and Databases for conducting on-
line examination has successfully created.

30

Ex No: 6b Student Mark details using JSP
Date:

Aim:
To write java programs to create three-tier applications using JSP and Databases to display
the student marks.

Algorithm:
Step 1: Create the web page with one text field to get register number using HTML.
Step 2: Create the Java script program to get the data in the web page.
Step 3: Open NetBeans and create new project of Web Application
Step 4: Include the HTML file and JSP program in that project.
Step 5: Create the Database with the MS Access.
Step 6: Connect the Database with the web page using jdbc:odbc:driver.
Step 7: Click Clean&Build option and Run the project.
Step 8: Display the marks in the database.


Program:
Stud.html:
<html><head><title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<h2>EXAMINATION RESULT</h2><hr/>
<form name="f1" method="GET" action="marklist.jsp">
Enter Your Reg.No:
<input type="text" name="rno"/><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="SUBMIT"/>
</form></body><html>

Marklist.jsp
<%@ page contentType="text/html" language="java" import="java.sql.*"%>
31

<html><head><title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<h2>EXAMINATION RESULT</h2><hr/>
<%
String str1=request.getParameter("rno");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:studmarkjsp");
Statement stmt=con.createStatement();
String qry="SELECT * FROM student WHERE regno=" + "'"+str1+"'";
ResultSetrs=stmt.executeQuery(qry);
while(rs.next())
{
%>
Register Number:<%=rs.getObject(1)%><br/>
Name:<%=rs.getObject(2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Network Programming and
Management</td><td><%=rs.getObject(3)%></td></tr>
<tr><td>Object Oriented Analysis and
Design</td><td><%=rs.getObject(4)%></td></tr>
<tr><td>Cryptography and Network
Security</td><td><%=rs.getObject(5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr>
<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>
<tr><td>Software Requirement and
Engineering</td><td><%=rs.getObject(8)%></td>
</table>
<%
}
%>
<br/>
</body></html>
32

Database Table:


Output:





Result:
Thusprogram to create three-tier applications using JSP and Databases for on-line Student
mark-list result has successfully created.
33

Ex No: 7 XML Schema-XSLT/XSL
Date:

Aim:
To Write Programs using XML Schema XSLT/XSL.

Algorithm:
Step 1: Start the Program
Step 2: Create a xml file with root element as product.
Step 3: Define the sub elements under the product.
Step 4: Create a style for XSLT with focus on each item.
Step 5: Include the XSLT file in XML using href, to display the product details in
specified format.
Step 6: Stop

Program:
Product.xml:
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/xsl" href="product.xsl"?>
<!DOCTYPEproductdet[
<!--ELEMENT product(code,item,capacity,price,company)-->
<!ELEMENT code (#PCDATA)>
<!ELEMENT item (#PCDATA)>
<!ELEMENT capacity (#PCDATA)>
<!ELEMENT price (#PCDATA)>
<!ELEMENT company (#PCDATA)>
]>
<productded>
<product>
<code>A001</code>
<item>pendrive</item>
<capacity>8gb</capacity>
<price>700</price>
<company>trascend</company>
</product>
34

<product>
<code>A002</code>
<item>hard disk</item>
<capacity>80gb</capacity>
<price>5600</price>
<company>seagate</company>
</product>
</productded>
Product.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><head><title>outputdocument</title></head>
<body>
<p><center><b>PRODUCT DETAILS ARE:</b></center></p>
<table border="1" align="center">
<tr><th>code</th><th>item</th><th>capacity</th><th>price</th><th>company</th
></tr>
<xsl:for-each select="//product" >
<tr><td><xsl:value-of select="code"/></td>
<td><xsl:value-of select="item"/></td>
<td><xsl:value-of select="capacity"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="company"/></td></tr>
</xsl:for-each>
</table></body></html>
</xsl:template></xsl:stylesheet>







35

Output:
















Result:
Thus programs using XML Schema XSLT/XSL was successfully created.

36

Ex No: 8 AJAX
Date:

Aim:
To write a programs using AJAX.

Algorithms:
Step 1: Start the Program
Step 2: Create a HTML filewith multiple divisions using<div> tag.
Step 3: Call the reload function when submit event occurs.
Step 4: Define reload function with xmlhttp object to process the request.
Step 5:Refer the text file to update the web page
Step 6: Stop

Program:
Sample.html:
<!DOCTYPE html>
<html><head>
<script>
functionloadXMLDoc()
{
varxmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseT
ext;
37

}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body></html>
ajax_info.txt:
AJAX is not a new programming language
AJAX is a technique for creating fast and dynamic web pages.



Output:




Result:
Thus programs using AJAX was successfully created.

38

Ex No: 9 Web Services Airline Ticket Reservation
Date:

Aim:
To implement the following scenario using Web Services and Data base.
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.

Algorithms:
Step 1: Create the web page with 3 text fields and 1 drop list to get source, destination
places and date of travel and no. of seats using HTML.
Step 2: Create the Java script program to get the data and display the flight details
according to the no. of seats by comparing the database in the web page.
Step 3: Create another Java script program to get the flight no. and passengers name
and ID proof.
Step 4: pen NetBeans and create new project of Web Application
Step 5: Include the HTML file and JSP programs in that project.
Step 6: Create the Database with the MS Access.
Step 7: Connect the Database with the web page using jdbc:odbc:driver.
Step 8: Click Clean&Build option and Run the project.
Step 9: Display the flight and booking in the database.

Program:
Airline.html:
<html><head><title>Airline Ticket Reservation System</title>
<style type="text/css">
body{color:blue;font-family:verdana;}
</style>
</head>
<body>
<h2>Airline Ticket Reservation System</h2><hr/>
<form name="f1" method="GET" action="index.jsp">
Enter source:
<input type="text" name="src"/><br/><br/>
Enter Destination:
<input type="text" name="dstn"/><br/><br/>
39

Enter Travel Date:
<input type="text" name="date"/><br/><br/>
Enter No of seats:
<input type="text" name="seat"/><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="SUBMIT"/>
</form></body><html>
Booking.jsp:
<%@ page contentType="text/html" language="java"
import="java.sql.*,java.io.*"%>
<html><head><title>Booking Details</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<%
String fno,pn,id,idno;
intscount;
Connection connect;
Statement stmt=null;
ResultSetrs=null;
%>
<%
String url="jdbc:odbc:booking";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection(url," "," ");
%>
<%
fno=request.getParameter("fno");
pn=request.getParameter("pn");
id=request.getParameter("id");
idno=request.getParameter("idno");
String s4=request.getParameter("sc");
scount=Integer.parseInt(s4);
40

%>
<%
stmt=connect.createStatement();
String query="INSERT INTO booking("+"fno,pn,id,idno"+")
VALUES('"+fno+"','"+pn+"','"+id+"','"+idno+"')";
int result=stmt.executeUpdate(query);
%>
<%
rs=stmt.executeQuery("SELECT * FROM booking where idno='"+idno+"'");
while(rs.next())
{
%>
<table><tr><td>Flight No:<%=rs.getObject(1)
%>
</td></tr>
<tr><td>P Name:<%=rs.getObject(2)
%></td></tr>
<tr><td>ID:<%=rs.getObject(3)
%>
</td></tr>
<tr><td>ID No: <%=rs.getObject(4)
%>
</td></tr>
</table>
<%
}
%>
<%
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection("jdbc:odbc:flight");
stmt=connect.createStatement();
String query1="UPDate FLIGHT SET SEAT=seat-"+s4+" where flightno='"+fno+"'";
int result1=stmt.executeUpdate(query1);
%>
41

<br/></body></html>
Flightdb.jsp:
<%@ page contentType="text/html" language="java" import="java.sql.*"%>
<html><head><title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;}
</style></head><body>
<h2>Ticket Reservation </h2><hr/>
<%
int s1;
String str1=request.getParameter("src");
String str2=request.getParameter("dstn");
String str4=request.getParameter("date");
String str5=request.getParameter("dep");
String str6=request.getParameter("arr");
String str3=request.getParameter("seat");
s1=Integer.parseInt(str3);
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:flight");
Statement stmt=con.createStatement();
String qry="SELECT * FROM FLIGHT WHERE src=" + "'"+str1+"'and dstn=" +
"'"+str2+"'"+"and seat >="+s1;
ResultSetrs=stmt.executeQuery(qry);
%>
<table
border="1"><th>FlightNo</th><th>Flight</th><th>Source</th><th>Destination</th
><th>DateDept</th><th>Dept</th><th>Arrl</th><th>seat</th>
</table>
<%
while(rs.next())
{
%>
<table border="1">
<tr><td><%=rs.getObject(1)%>&nbsp;</td>
<td><%=rs.getObject(2)%></td>
42

<td><%=rs.getObject(3)%></td>
<td><%=rs.getObject(4)%></td>
<td><%=rs.getObject(5)%></td>
<td><%=rs.getObject(6)%></td>
<td><%=rs.getObject(7)%></td>
<td><%=rs.getObject(8)%></td></tr>
</table>
<%
}
%>
<br/><h2><b>
<br><br><br>Book your Ticket from the options available above<br><br><br><br>
<form name="f1" action="booking.jsp">
<table>
<tr><td><b>Enter Flight Number:</td><td><input type="text"
name="fno"></td></tr>
<tr><td><b>passenger name1:</td><td><input type="text" name="pn"></td></tr>
<tr><td><b>passenger ID proof:</td><td><input type="text" name="id"></td></tr>
<tr><td><b>passenger ID No:</td><td><input type="text" name="idno"></td></tr>
<tr><td><b> No of Seats:</td><td><input type="text" name="sc"></td></tr>
</h2>
</table><input type="submit" value="BOOK"/>
</form></body></html>

Database tables:
Flight details:


43

Booking details:



Output:

44






Result:
Implementation of the given scenario using Web Services and Database was successfully
created.

Potrebbero piacerti anche