20cs521 - Web Programming Laboratory Lab Manual
20cs521 - Web Programming Laboratory Lab Manual
REGULATION 2020
K.S.R. COLLEGE OF ENGINEERING: TIRUCHENGODE - 637 215
(Autonomous)
DEPARTMENT OF COMPUTER SCIENCE AND ENIGNEERING
(REGULATIONS 2020)
IM 1 To inculcate in the students self-learning abilities that enable them to become competitive and
considerate engineers, technologists, scientists, managers, administrators and entrepreneurs
by diligently imparting the best of education, nurturing environmental and social needs.
IM 2 To foster and maintain mutually beneficial partnership with global industries and Institutions
through knowledge sharing, collaborative research and innovation.
DV To create ever green professionals for software industry, academicians for knowledge
cultivation and researchers for contemporary society modernization.
DM 1 To produce proficient design, code and system engineers for software development.
DM 2 To keep updated contemporary technology and fore coming challenges for welfare of the
society.
PEO 1 Rational Computing: Figure out, formulate, analyze typical problems and develop effective
solutions by imparting the idea and principles of science, mathematics, engineering
fundamentals and computing.
PEO 2 Professional Excellence: Competent professionally and successful in their chosen career
through life-long learning.
PEO 3 Social and Ethical Technocrats: Excel individually or as member of a team in carrying out
projects and exhibit social needs and follow professional ethics.
Programme Outcomes (POs) of B.E. - Computer Science and Engineering
Technical competency: Develop and Implement computer solutions that accomplish goals
PSO1
to the industry, government or research by exploring new technologies.
PSO2 Professional awareness: Grow intellectually and professionally in the chosen field.
K.S.R. COLLEGE OF ENGINEERING (Autonomous) R 2020
SEMESTER – V
L T P C
20CS521 WEB PROGRAMMING LABORATORY
0 0 3 1
Prerequisite: Basic knowledge about problem solving techniques.
Course Outcomes: On Completion of this course, the student will be able to Cognitive level
CO1: Design simple web pages using markup languages like HTML and XHTML. Create
Create dynamic web pages using DHTML and java script that is easy to navigate and Create
CO2:
use.
CO3: Program Server side web pages that have to process request from client web pages. Create
CO4: Represent web data using XML and develop web pages using JSP. Create
CO5: Deploy various web services and how these web services interact, Analyze
LIST OF EXPERIMENTS:
1. Create a web page with the following using HTML.
a. To embed an image in a web page.
b. To fix the hot spot.
c. Show all the related information when the hot spots are clicked.
2. Create a web page with all types of cascading style sheets.
3. Develop Client Side Scripts for Validating Web Form Controls using DHTML.
4. Installation of Apache Tomcat Web Server.
5. Write Programs in Java using Servlets.
a. To invoke servlets from HTML forms.
b. Session Tracking.
6. Write programs in java to create three-tier applications using JSP and Databases
a. For conducting on-line examination.
b. For displaying mark list. Assume that student information is available in a database which has been
stored in a database server.
7. Program using XML – Schema – XSLT/XSL.
8. Program using DOM and SX Parsers.
9. Program using AJAX.
10. Consider a case where we have two web services – an airline service and a travel agent. The travel agent is
searching for an airline. Implement this scenario using Web Service and Database.
Total : 45 Periods
CO PO MAPPING
Programme Outcomes
CO Course Outcomes
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2
S. PAGE STAFF’S
DATE NAME OF THE PROGRAM MARKS
NO. NO. SIGNATURE
Creating a Webpage with Image
1. 1
Maps and Hotspots
Creating a Webpage with
2. 6
Cascading Style Sheet
6. Online Examination 21
9. AJAX 34
AVERAGE
CREATING A WEBPAGE WITH IMAGE MAPS AND HOTSPOTS
Ex. No.: 01
Date:
AIM:
ALGORITHM:
PROGRAM:
/*mapping.html*/
<html>
<head>
<title>India Map</title>
<head>
<body bgcolor="PINK">
<font face="Monotype Corsiva" color="BLUE" size="6">
<marquee direction="left" behavior="alternate">INDIA MAP
</marquee>
</font>
<hr size="6" color="RED">
<map name="pagemap">
<area shape="rect" coords="602,631,579,651" href="Delhi.html">
<area shape="rect" coords="1272,1060,1162,934" href="Calcutta.html">
<area shape="rect" coords="539,1311,429,1185" href="MUMBAI.html">
<area shape="rect" coords="684,1848,574,1722" href="Chennai.html">
</map>
<img src="E:\OOAD\2022-2023\html\Ex1\india.jpg" usemap="#pagemap">
</body>
<font color="#ff0000" size="5">
<p><b>Hints:</b><i>Click on the Name of the Cities in the map to know its
description</i></p>
</html>
1
/* Delhi.html */
<html>
<body bgcolor="SKYBLUE">
<font face="Monotype Corsiva" size="18" color="RED">
<center><b><i><tt>Delhi is the capital of our INDIA<br> and <br>More IT companies are
Camped at Delhi</tt></i></b></center>
<a href="mapping.html">Home Page</a>
</font>
</body>
</html>
/* Calcutta.html */
<html>
<body bgcolor="SKYBLUE">
<font face="Times New Roman" size="18" color="RED">
<center><b><i>Calcutta is the wealthy city in WEST BENGAL<br> and <br>it has Famous
"Sunderbans Forests"</i></b></center>
<a href="mapping.html">Home Page</a>
</font></body></html>
/* MUMBAI.html */
<html>
<body bgcolor="DARKGREEN">
<font face="Times New Roman" size="12" color="RED">
<center>MUMBAI is the capital of Maharashtra<br> and <br>it has Famous India Gate</center>
<a href="mapping.html">Home Page</a>
</font>
</body>
</html>
/* Chennai.html */
<html>
<body bgcolor="BLACK">
<font face="Times New Roman" size="12" color="RED">
<center>Chennai is hte capital of Tamil Nadu<br> and <br>More IT companies are camped at
Chennai</center>
<a href="mapping.html">Home Page</a>
</font></body></html>
2
OUTPUT:
3
4
RESULT:
Thus the web page is created and the image is embedded with hot spot and the linking
pages successfully, and the output is verified.
5
CREATING A WEBPAGE WITH CASCADING STYLE SHEET
Ex. No.: 02
Date:
AIM:
To write a webpage that displays college information using various style sheet.
ALGORITHM:
Start the program.
Create a web page with framesets consisting two frames.
In the first frame include the links.
In the second frameset display the webpage of the link.
Create a external style sheets.
Create a inline and internal style and make a link to the external style sheet.
Stop the program.
PROGRAM:
/*base.html*/
<html>
<head>
<title>Cascading Style Sheets</title>
</head>
<body alink="blue" vlink="brown">
<h1><u><b><font face="Monotype corsiva" color="red"> Different
types of Cascading Style Sheets</font> </b></u></h1>
<br />
<font face="Arial"size="6">
<a href ="inline.html" style="text-decoration :none;"> 1. Inline Style Sheet</a><br />
<a href ="embedded.html" style="text-decoration :none;"> 2. Embeded Style
Sheet</a><br />
<a href ="external.html" style="text-decoration :none;"> 3. External Style
Sheet</a><br />
<a href ="import.html" style="text-decoration :none;"> 4. Imported Style
Sheet</a><br /></font>
</body>
</html>
/*Inline.html*/
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<ol class="decimal">
<h1 style="font-family :Monotype Corsiva ;background-color:antiquewhite ;"><li>
Inline Style Sheet</li></h1>
6
<h3>
<p style="text-indent :30pt;color:blue;font-family :arial;">
Inine Style is the style attached to one specific element.
The style is specified directly in the start tag as a value of the style attribute well applyexclusively
to this specific element occurrence.
</p></h3>
</ol>
</body>
</html>
/*Embedded.html*/
<html>
<head>
<title>Embeded Style Sheet</title>
<style type="text/css"> ol{list-
style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
h3{text-align: right; font-family:arial;color:blue}
</style>
</head>
<body>
<ol class="lroman"><h1>
<li>Embedded style sheet</li></h1>
<br />
Embedded style is the style attached to one specific document.The
information is specified as a content of the style element inside the
head element and wil apply to the entire documents.
</h3></ol>
</body>
</html>
/*External.html*/
<html>
<head>
<title>External Style Sheet</title>
<link rel=Stylesheet href="style1.css" type="text/css" />
</head>
<body>
<h1>1. External Style Sheet</h1><br />
<h3>
An external style sheet is a template documents/files
containing style info which can be linked with any number
of the documents. This is a very convenient way of formating the
entire site as well as restyling it by editing just one file</h3>
</body>
</html>
7
/*Import.html*/
<html>
<head><title>Imported Style Sheet</title>
<link rel= stylesheet href="style2.css" type="text/css">
</head>
<body>
<h1>1. Imported Style Sheet</h1>
<h3> Imported style sheet is a shet that can be imported to another sheet. This
alignes exacting one main sheet containing declarations that apply to the whle
site and partial sheets containing declarations that apply to specific
elements.</h3>
</body>
</html>
OUTPUT:
8
9
RESULT:
Thus the web page is created using all types of cascading style sheets
successfully and the output is also verified.
10
WEB FORM VALIDATION
Ex. No.: 03
Date:
AIM:
To write a DHTML code for creating the web page for validating the web form.
ALGORITHM:
The form will include one text field called "Your Name", and a submit button.
Validation script will ensure that the user enters their name before the form is sent to the
server.
Open this page to see it in action.
Try pressing the Send Details button without filling anything in the "Your Name" field. It will
shows a warning text to enter the name and never allows to navigate next page.
The JavaScript function called validate_form() that performs the form validation, followed by
the form itself.
PROGRAM:
/*val.html*/
<head>
<title>A Simple Form with JavaScript Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
if(document.contact_form.contact_name.value)
{
alert("Your details had sended");
valid=true;
}
return valid;
}
11
//-->
</script>
</head>
<body bgcolor=”#FFFFFF”>
<form name="contact_form" method="post"
action="welcome.html"
onSubmit="return validate_form();">
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
</body>
</html>
/*welcome.html*/
<html>
<head>
<title>Client Side Scripting</title>
</head>
<body alink="blue" vlink="brown">
<h1> Welcome to CSE, KSRCE </h1>
</body>
</html>
OUTPUT:
Step 1:
12
Step 2:
Step 3:
Step 4:
Step 5:
RESULT:
Thus the program has been written for creating the web page for validating the
information.
13
INSTALLATION OF APACHE TOMCAT WEB SERVER
Ex. No.: 04
Date:
AIM:
PROCEDURE:
Steps
1. Double click the exe file and follow the steps by clicking next.
The easiest way is to simply download and run the 32-bit/64-bit Windows Service Installer of
the latest version on Apache Tomcat. In my case the latest version of Apache Tomcat is 7 and
the download link is :
http://mirrors.hostingromania.ro/apache.org/tomcat/tomcat-7/v7.0.26/bin/apache-tomcat-
7.0.26.exe
Run this file if you agree with the license terms and switch to the Full type of install so all the
optional components are checked in the following screen:
Figure 1-Apache Tomcat Installation - choose full install
14
The only think you have to do here is to fill a “User Name”, provide a “Password” for it and
eventually tick on the checkbox for “Create shortcuts for all users”. Leave everything as is.
Normally you don’t need to change anything. Click on Next.
2. Tomcat uses an environment variable named JAVA_HOME to indicate the location of the JAVA
directory.
3. Additionally it uses another environment variable named CATALINA_HOME to indicate the
location of Tomcat’s Jakarta level directory.
4. In Windows XP (or equivalent) go to:
Control PanelSystemAdvancedEnvironment Variables
Click on the New button to add the following as seen with the screen grab attached:
Just these two need to be added to what ever you have already.
CATALINA_HOME c:\tomcat6\apache-tomcat-6.0.20
JAVA_HOME c:\program files\java\jdk1.6
5. Save the modifications and re-boot your computer to apply the new environment variable settings.
6. This can be tested from the command prompt (StartRun and type cmd<Enter>) by typing ECHO
followed by a space and then the variable enclosed inside a pair of % characters
(e.g. ECHO % JAVA_HOME%).
15
7. Starting and Stopping the server:
This is done via two batch files – startup and shutdown
They can be found in the Tomcat bin folder. It is recommended you create a shortcut for each
and place on your desktop.
Start the server by running the startup batch file – you should get a display like this:
8. Next test that the server can run a JSP page.
In the webapps\ROOT\ folder you will find an index.jsp file.
The ROOT folder is where the JSP pages need to live.
Open your web browser and in offline mode type the following in the url text box:
http://localhost:8080/index.jsp
If the following page appears then you have successfully installed Tomcat:
9. If the page does not appear then there is a problem and you should check all the steps you have
made.
10.Finally, shut down the server when not in use by simply running the shut down batch file.
RESULT:
16
INVOKING SERVLET FROM HTML FORMS
Ex. no: 05
Date:
AIM:
To write a html program for invoking servlet using html.
ALGORITHM:
PROGRAM:
/* GfgSession.java*/
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
* Servlet implementation class GfgSession
*/
@WebServlet("/GfgSession")
public class GfgSession extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* Default constructor.
*/
public GfgSession() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
17
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
// TODO Auto-generated method stub
// Create a session object if it is already not
// created.
HttpSession session = request.getSession(true);
String docType
= "<!doctype html public \"-//w3c//dtd html 4.0 "
+ "transitional//en\">\n";
out.println(
docType + "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
+
18
+ "<h2 align = \"center\">Gfg Session Information</h2>\n"
+ "<table border = \"1\" align = \"center\">\n"
+
"<tr>\n"
+ " <td>id</td>\n"
+ " <td>" + session.getId() + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Creation Time</td>\n"
+ " <td>" + createTime + " </td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Time of Last Access</td>\n"
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>User ID</td>\n"
+ " <td>" + userID + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"
+ "</table>\n"
+ "</body>"
+ "</html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
19
}
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<title>Processing get requests with data</title>
</head>
<body>
<form action = "GfgSession" method = "get">
<P><H1>Invoke the Servlet by Clicking the Button</H1></P>
<input type = "submit" value = "Submit" />
</label></p></b>
</form>
</body>
</html>
OUTPUT:
Screen 1:
Screen 2:
RESULT:
Thus the invocation of servlet from HTML from has been developed successfully.
20
ONLINE EXAMINATION
Ex no: 06
Date:
AIM:
To create a three tier application for conducting online examination using JSP and database.
DESCRIPTION
Create a JSP file with form tag.
The form tag action=”http://localhost:8081/ StudentServlet”.
Create a two textbox(name & seat number).
The 5 question are defined into true or false model and close the all tags. Import the necessary
packages and declare class, class name in exam.
Declare the connection, statement and result set object.
Use the deposit () for check the connection in JDBC:ODBC driver. The data are inserting into
corresponding table.
The execute update () are update the database. Display the table in after JSP file compilation.
PROGRAM:
/*StudentServlet.java*/
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class StudentServlet3
*/
@WebServlet("/StudentServlet")
public class StudentServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
String message,Name,Seat_no,ans1,ans2,ans3,ans4,ans5;
int Total=0;
Connection connect;
Statement stmt=null;
ResultSet rs=null;
21
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
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;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","sys as
sysdba","Siva@1076");
Statement stmt=con.createStatement();
message="Thank you for participating in online Exam";
PreparedStatement ps = con
.prepareStatement("insert into student values(?,?,?)");
ps.setString(1, Seat_no);
ps.setString(2, Name);
ps.setInt(3, Total);
int i = ps.executeUpdate();
if (i > 0)
out.print("You are successfully registered...");
ResultSet rs=stmt.executeQuery("select * from student");
response.setContentType("text/html");
out.println("<html>");
out.println("<head>"); out.println("</head>");
out.println("<body bgcolor=cyan>");
out.println("<center>");
out.println("<h1>"+message+"</h1>\n");
out.println("<h3>Yours results stored in our database</h3>");
out.print("<br><br>");
out.println("<b>"+"Participants and their Marks"+"</b>");
out.println("<table border=5>");
out.println("<th>"+"Seat_no"+"</th>");
out.println("<th>"+"Name"+"</th>");
22
out.println("<th>"+"Marks"+"</th>");
while(rs.next())
{
out.println("<tr>");
out.print("<td>"+rs.getString(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>");
out.print("<td>"+rs.getInt(3)+"</td>");
out.println("</tr>");
}
out.println("</table>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
/*Index.jsp*/
23
<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>
OUTPUT:
Screen 1:
Step 1:
Step 2:
Screen 2:
24
Database Output:
RESULT:
Thus the development of program in java to create three tire applicationusing servlet has been
verified successfully.
25
XML – SCHEMA – XSLT/XSL
Ex.No: 07
Date:
AIM:
To write a XML scheme to generate CD Collection details.
ALGORITHM:
Start the program
Use Xml Style Sheet code to define link <?xml-stylesheet type="text/xsl" href="yourxsl.xsl"?>
Use the catalog tag to define CD collection details.
Use the necessary heading for appropriate XML tag.
Provide necessary information for CD collection details
Stop the program
PROGRAM:
/*Username.xml*/
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<?xml-stylesheet type="text/xsl" href="yourxsl.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
<cd>
<title>Greatest Hits</title>
<artist>Dolly Parton</artist>
<country>USA</country>
<company>RCA</company>
<price>9.90</price>
<year>1982</year>
</cd>
<cd>
<title>Still got the blues</title>
26
<artist>Gary Moore</artist>
<country>UK</country>
<company>Virgin records</company>
<price>10.20</price>
<year>1990</year>
</cd>
<cd>
<title>Eros</title>
<artist>Eros Ramazzotti</artist>
<country>EU</country>
<company>BMG</company>
<price>9.90</price>
<year>1997</year>
</cd>
</catalog>
/*yourxsl.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>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<xsl:sort select="artist"/>
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
27
OUTPUT:
RESULT:
Thus the XML scheme to generate CD Collection details was executed successfully and
verified.
28
XML - DOM AND SAX PARSING
Ex. No: 08
Date:
AIM:
To write a program for implementing employee information XML document using DOM and
SAX Parser.
ALGORITHM:
In java program, import the necessary package and declare the class parsing for DOM and
SAX Parsing
In that main function display enter the name of the XML document and get the input from the
buffer reader object.
Then create a file object and it assign to buffered reader value.
The input source is filename, then it is well formed otherwise it is not well formed.
In XML program create the student information and the java file complete and
display the output.
PROGRAM:
DOM Paser
/*EmployeeParsing.java*/
package newpro;
import org.w3c.dom.*;
import javax.xml.parsers.*;
import java.io.*;
public class EmployeeParsing
{
public static void main(String[] args)throws Exception
{
//Get Document Builder
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
//Build Document
Document document = builder.parse(new File("E:\\OOAD\\2022-2023\\html\\users.xml"));
//Normalize the XML Structure; It's just too important !!
//document.getDocumentElement().normalize();
// TODO Auto-generated method stub
//Here comes the root node
Element root = document.getDocumentElement();
BufferedReader br=new BufferedReader(new InputStreamReader(System.in));
System.out.println("Enter User Id");
String id=br.readLine();
//Get all employees
NodeList nList = document.getElementsByTagName("employee");
System.out.println(root.getNodeName());
29
System.out.println("============================");
for (int temp = 0; temp < nList.getLength(); temp++)
{
Node node = nList.item(temp);
//System.out.println(""); //Just a separator
if (node.getNodeType() == Node.ELEMENT_NODE)
{
//Print employee's details of given id
Element eElement = (Element) node;
if(eElement.getAttribute("id").equals(id))
{
System.out.println("Employee id : " + eElement.getAttribute("id"));
System.out.println("First Name : " +
eElement.getElementsByTagName("firstName").item(0).getTextContent());
System.out.println("Last Name : " +
eElement.getElementsByTagName("lastName").item(0).getTextContent());
System.out.println("Location : " +
eElement.getElementsByTagName("location").item(0).getTextContent());
}}}}}
/*Users.xml*/
<?xml version="1.0" encoding="UTF-8"?>
<employees>
<employee id="501">
<firstName>Shareef</firstName>
<lastName>A</lastName>
<location>Hyd</location>
</employee>
<employee id="502">
<firstName>Shirish</firstName>
<lastName>Yadav</lastName>
<location>Chevella</location>
</employee>
<employee id="503">
<firstName>Singh</firstName>
<lastName>Thakur</lastName>
<location>Forest</location>
</employee>
<employee id="504">
<firstName>sowmya</firstName>
<lastName>Lakshmi</lastName>
<location>MP</location>
</employee>
<employee id="505">
<firstName>Abhi</firstName>
<lastName>Shambu</lastName>
<location>LD</location>
</employee>
<employee id="506">
<firstName>Nikitha</firstName>
30
<lastName>Reddy</lastName>
<location>UP</location>
</employee>
<employee id="507">
<firstName>Ashwini</firstName>
<lastName>Reddy</lastName>
<location>ADB</location>
</employee>
<employee id="508">
<firstName>priyanka</firstName>
<lastName>Reddy</lastName>
<location>MGD</location>
</employee>
<employee id="509">
<firstName>Kartheek</firstName>
<lastName>Reddy</lastName>
<location>MBD</location>
</employee>
<employee id="510">
<firstName>Ramadevi</firstName>
<lastName>Kommana</lastName>
<location>DSNR</location>
</employee>
</employees>
OUTPUT:
Enter User Id
503
employees
============================
Employee id : 503
First Name : Singh
Last Name : Thakur
Location : Forest
SAX Parser
/*ReadXMLFile.java*/
package newpro2;
import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
31
public class ReadXMLFile {
public static void main(String argv[]) {
try {
SAXParserFactory factory = SAXParserFactory.newInstance();
SAXParser saxParser = factory.newSAXParser();
DefaultHandler handler = new DefaultHandler() {
boolean bfname = false;
boolean blname = false;
boolean bnname = false;
boolean bsalary = false;
public void startElement(String uri, String localName,String qName,
Attributes attributes) throws SAXException {
System.out.println("Start Element :" + qName);
if (qName.equalsIgnoreCase("FIRSTNAME")) {
bfname = true;
}
if (qName.equalsIgnoreCase("LASTNAME")) {
blname = true;
}
if (qName.equalsIgnoreCase("NICKNAME")) {
bnname = true;
}
if (qName.equalsIgnoreCase("SALARY")) {
bsalary = true;
}
}
public void endElement(String uri, String localName,
String qName) throws SAXException {
System.out.println("End Element :" + qName);
}
public void characters(char ch[], int start, int length) throws SAXException {
if (bfname) {
System.out.println("First Name : " + new String(ch, start, length));
bfname = false;
}
if (blname) {
System.out.println("Last Name : " + new String(ch, start, length));
blname = false;
}
if (bnname) {
System.out.println("Nick Name : " + new String(ch, start, length));
bnname = false;
}
if (bsalary) {
System.out.println("Salary : " + new String(ch, start, length));
bsalary = false;
}
}
};
saxParser.parse("E:\\OOAD\\2022-2023\\html\\file.xml", handler);
32
} catch (Exception e) {
e.printStackTrace();
}
}
}
/*file.xml*/
<?xml version="1.0"?>
<company>
<staff>
<firstname>yong</firstname>
<lastname>mook kim</lastname>
<nickname>mkyong</nickname>
<salary>100000</salary>
</staff>
<staff>
<firstname>low</firstname>
<lastname>yin fong</lastname>
<nickname>fong fong</nickname>
<salary>200000</salary>
</staff>
</company>
OUTPUT:
Start Element :salary
Salary : 200000
End Element :salary
End Element :staff
End Element :company
RESULT:
Thus the creation of program using DOM and SAX has been verified successfully.
33
AJAX
Ex.No: 09
Date:
AIM:
ALGORITHM:
Table1.html
<html>
<head>
<script>
var request;
function sendInfo()
{
var v=document.vinform.t1.value;
var url="index.jsp?val="+v;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
try
{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}
catch(e)
{
34
alert("Unable to connect to server");
}
}
function getInfo(){
if(request.readyState==4){
var val=request.responseText;
document.getElementById('amit').innerHTML=val;
}
}
</script>
</head>
<body>
<marquee><h1>This is an example of ajax</h1></marquee>
<form name="vinform">
<input type="text" name="t1">
<input type="button" value="ShowTable" onClick="sendInfo()">
</form>
<span id="amit"> </span>
</body>
</html>
index.jsp
<%
int n=Integer.parseInt(request.getParameter("val"));
for(int i=1;i<=10;i++)
out.print(i*n+"<br>");
%>
web.xml
35
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>table1.html</welcome-file>
</welcome-file-list>
</web-app>
OUTPUT
RESULT:
36
IMPLEMENTING AN APPLICATION USING THE WEB SERVICES
Ex.No: 10
Date:
AIM:
To implement a application using the web services.
ALGORITHM:
Start the program
Create a root rocess for reservation
Create a service with focus on each item
Run the program, display the result
Stop the program.
PROGRAM:
/*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>Travel Agency</title>
</head>
<body>
<center><h1>Travel Easy</h1>
<h3> - A Smarter way to travel</h3>
<br><br>
<b> Enter your Details</b>
<form name="index" action="AirlineList.jsp" method="post">
<br>
<table cellpadding="6" cellspacing="6">
<tr>
<td><b>From</b></td>
<td><input type="text" name="txt_from"></td>
</tr>
<tr>
<td><b>To</b></td>
<td><input type="text" name="txt_to"></td>
</tr>
<tr>
<td><b>Date of Journey</b></td>
<td><input type="text" name="txt_depart"></td>
</tr>
37
<tr>
<td><b>Number of Passengers</b></td>
<td><input type="text" name="txt_no"></td>
</tr>
<tr>
<td><b>Type of Flight</b></td>
<td><input type="Radio" name="group1" value="domestic">Domestic Flights</td>
</tr>
<tr>
<td></td>
<td><input type="Radio" name="group1" value="international">International
Flights</td>
</tr>
<tr>
<td><b>Select desired Airlines</b></td>
<td>
<select name="airline">
<option>Kingfisher</option>
<option>SpiceJet</option>
</select>
</td>
</tr>
</table>
<br><br>
<input type="Submit" name="Submit" value="Find Flights">
</form>
</center>
</body>
</html>
/*AirlineList.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>Domestic Flights</title>
</head>
<body>
<center><h1>Travel Easy</h1>
<h3> - A Smarter way to travel</h3>
</center>
<br><br>
<%@ page language="java" %>
<%@ page import ="java.sql.*" %>
<%@ page import = "java.util.Date,java.text.SimpleDateFormat,java.text.ParseException"%>
<%
38
String type = request.getParameter("group1");
String from= request.getParameter("txt_from");
out.println(from);
String to = request.getParameter("txt_to");
String depart= request.getParameter("txt_depart");
String ret = request.getParameter("txt_return");
String no = request.getParameter("txt_no");
String airline = request.getParameter("airline");
Class.forName("oracle.jdbc.driver.OracleDriver");
String sTable = type;
Connection cn = null;
Statement st = null;
ResultSet rs = null;
out.println("<h3><b>"+airline +"Flights"+"</b></h3><br>");
out.println("<table cellspacing=20 cellpaddinng=15>");
out.println("<tr><th>Flight No</th><th>From</th><th>To</th><th>Departure
Date</th><th>Arrival Date</th><th>Start Time</th>");
out.println("<th>Reach Time</th><th>Seats Remaining</th></tr>");
try {
cn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","sys as
sysdba","Siva@1076");
st=cn.createStatement();
rs = st.executeQuery( "select * from ft Fromt='"+from+"' and Tot='"+to+"' and
DepartDate='"+depart+"'and SeatCapacity>="+no+"");
out.println(rs.next());
ResultSetMetaData rsmd = rs.getMetaData();
int i=1;
String flight_no[] = new String[100];
while(rs.next())
{
out.println("hi");
flight_no[i] = rs.getString(1);
out.println("<tr><td>"+rs.getString(1)+"</td>");
out.println("<td>"+rs.getString(2)+"</td>");
out.println("<td>"+rs.getString(3)+"</td>");
out.println("<td>"+rs.getString(4)+"</td>");
out.println("<td>"+rs.getString(5)+"</td>");
out.println("<td>"+rs.getString(6)+"</td>");
out.println("<td>"+rs.getString(7)+"</td>");
out.println("<td>"+rs.getInt(8)+"</td></tr>");
i++;
}
out.println("</table>");
if(i==1)
{
out.println("<br><center><b>Sorry!! No flights scheudle available</b></center><br>");
}
else
{
39
out.println("<form name='AirlineList' action='"+airline+".jsp' method='post'>");
out.println("<br><table><tr><td>Select Flight</td><td>");
out.println("<select name='flight_no'>");
for(int temp=1;temp<i;temp++)
{
out.println("<option>"+flight_no[temp]+"</option>");
}
out.println("</select></td></tr><tr></tr>");
out.println("<tr><td><input type='hidden' name='no' value='"+no+"'></td>");
out.println("<td><input type='hidden' name='air_type' value='"+type+"'></td></tr>");
for(int j=1;j<=Integer.parseInt(no);j++)
{
out.println("<tr><th>Passenger" +j+ "details</th></tr>");
out.println("<tr></tr>");
out.println("<tr><td>Name</td><td><input type='text'
name='pas"+j+"_name'></td></tr>");
out.println("<tr><td>Age</td><td><input type='text'
name='pas"+j+"_age'></td></tr>");
out.println("<tr><td>Sex</td><td><input type='text'
name='pas"+j+"_sex'></td></tr>");
out.println("<tr></tr>");
}
out.println("</table><br><br><input type='Submit' name='Submit' value='Book
Now'/></form>");
}
//out.println("<input name ='submit' value='Submit' type='submit'/>");
}
finally {
try { if( null != rs ) rs.close(); } catch( Exception ex ) {}
try { if( null != st ) st.close(); } catch( Exception ex ) {}
try { if( null != cn ) cn.close(); } catch( Exception ex ) {}
}
%>
</body>
</html>
/*KingFisher.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>Kingfisher Airlines</title>
</head>
<body>
<%@ page language="java" %>
<%@ page import ="java.sql.*" %>
40
<%
String s = request.getParameter("no");
out.println("<h1><center>Kingfisher Airlines</h1><br><h3>- Have a nice
trip!!!</h3></center><br>");
out.println("<br><br>Your Booking Details");
out.println("<br><br><table cellspacing=10 cellpaddin=10>");
Class.forName("oracle.jdbc.driver.OracleDriver");
//String ft = request.getParameter("air_type");
Connection cn = null;
Statement st = null;
ResultSet rs = null;
String name,age,sex,flightno,from,to,departure,arrival,starttime,reachtime,seat;
out.println("<tr><th>Name</th><th>Age</th><th>Sex</th><th>Flight
No</th><th>From</th><th>To</th><th>Departure Date</th><th>Arrival Date</th><th>Start
Time</th><th>Reach Time</th><th>Seat No</th></tr>");
try
{
cn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","sys as
sysdba","Siva@1076");
st = cn.createStatement();
String fn=request.getParameter("flight_no");
rs = st.executeQuery("select * from ft where FlightNo='"+fn+"'" );
ResultSetMetaData rsmd = rs.getMetaData();
int seat1=1;
while(rs.next())
{
flightno = rs.getString(1);
from = rs.getString(2);
to = rs.getString(3);
departure = rs.getString(4);
arrival = rs.getString(5);
starttime = rs.getString(6);
reachtime = rs.getString(7);
seat = rs.getString(8);
seat1 = Integer.parseInt(seat);
for(int i=1;i<=Integer.parseInt(s);i++)
{
name= request.getParameter("pas" +i+ "_name");
age = request.getParameter("pas" +i+"_age");
sex = request.getParameter("pas" +i+"_sex");
flightno = request.getParameter("flight_no");
out.println("<tr><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>");
out.println("<td>"+flightno+
"</td><td>"+from+"</td><td>"+to+"</td><td>"+departure+"</td>");
out.println("<td>"+arrival+"</td><td>"+starttime+"</td><td>"+reachtime+"</td><td>"+seat1+"</td>
");
seat1--;
}
41
}
Connection cn1 = null;
Statement st1 = null;
ResultSet rs1 = null;
try
{
}
finally {
try { if( null != rs ) rs.close(); } catch( Exception ex ) {}
try { if( null != st ) st.close(); } catch( Exception ex ) {}
try { if( null != cn ) cn.close(); } catch( Exception ex ) {}
}
%>
</body>
</html>
/*SpiceJet.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>SpiceJet Airlines</title>
</head>
<body>
<%@ page language="java" %>
<%@ page import ="java.sql.*" %>
<%
String s = request.getParameter("no");
out.println("<h1><center>SpiceJet Airlines</h1><br><h3>- Have a nice
trip!!!</h3></center><br>");
out.println("<br><br>Your Booking Details");
out.println("<br><br><table cellspacing=10 cellpaddin=10>");
Class.forName("oracle.jdbc.driver.OracleDriver");
// String sTable = request.getParameter("air_type");
String fn=request.getParameter("flight_no");
// String sSql = "";
// String sDBQ = "d:/SpiceJet.mdb";
42
Connection cn = null;
Statement st = null;
ResultSet rs = null;
String name,age,sex,flightno,from,to,departure,arrival,starttime,reachtime,seat;
out.println("<tr><th>Name</th><th>Age</th><th>Sex</th><th>Flight
No</th><th>From</th><th>To</th><th>Departure Date</th><th>Arrival Date</th><th>Start
Time</th><th>Reach Time</th><th>Seat No</th></tr>");
try
{
cn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","sys as
sysdba","Siva@1076");
st = cn.createStatement();
rs = st.executeQuery( "select * from ft where FlightNo='"+fn+"'" );
ResultSetMetaData rsmd = rs.getMetaData();
int seat1=1;
while(rs.next())
{
flightno = rs.getString(1);
from = rs.getString(2);
to = rs.getString(3);
departure = rs.getString(4);
arrival = rs.getString(5);
starttime = rs.getString(6);
reachtime = rs.getString(7);
seat = rs.getString(8);
seat1 = Integer.parseInt(seat);
for(int i=1;i<=Integer.parseInt(s);i++)
{
name= request.getParameter("pas" +i+ "_name");
age = request.getParameter("pas" +i+"_age");
sex = request.getParameter("pas" +i+"_sex");
flightno = request.getParameter("flight_no");
out.println("<tr><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>");
out.println("<td>"+flightno+
"</td><td>"+from+"</td><td>"+to+"</td><td>"+departure+"</td>");
out.println("<td>"+arrival+"</td><td>"+starttime+"</td><td>"+reachtime+"</td><td>"+seat1+"</td>
");
seat1--;
}
}
Connection cn1 = null;
Statement st1 = null;
ResultSet rs1 = null;
try
{
43
// sSql = "update " sTable " set SeatCapacity=" seat1 " WHERE FlightNo='"
request.getParameter("flight_no") "'";
rs1 = st.executeQuery( "update ft set SeatCapacity="+seat1+" where FlightNo='"+fn+"'" );
}
catch(Exception e)
{
}
}
finally {
try { if( null != rs ) rs.close(); } catch( Exception ex ) {}
try { if( null != st ) st.close(); } catch( Exception ex ) {}
try { if( null != cn ) cn.close(); } catch( Exception ex ) {}
}
%>
</body>
</html>
Database Query:
Create table ft(flightno varchar(20), fromt varchar(20), tot varchar(20), departdate varchar(20),
arrivaldate varchar(20), starttime varchar(10), reachtime varchar(20), seatcapacity number(2));
OUTPUT:
44
45
Database Output:
RESULT:
Thus the program for creating web service is executed and verified successfully.
46