1

MISRIMAL NAVAJEE MUNOTH JAIN

ENGINEERING COLLEGE
(Managed By Tamil Nadu Educational and Medical Trust)
Thoraipakkam, Chennai – 600097.
CCS375
WEB TECHNOLOGIES LABORATORY

REGULATION – 2021

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

NAME :

REGISTER NUMBER :

YEAR : III
SEMESTER : V
2

MISRIMAL NAVAJEE MUNOTH JAIN ENGINEERING

COLLEGE
(Managed By Tamil Nadu Educational and Medical Trust)
Thoraipakkam, Chennai – 600097.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

REGISTER NUMBER

BONAFIDE CERTIFICATE

This is to certify that this is a B o n a f i d e r e c o r d of work done

by ________________________of III-Year B.E-Computer Science and
Engineering in the CCS375 WEB TECHNOLOGIES LABORATORY
during the Academic year 2024-2025.

Staff In-Charge Head of the Department

Submitted for the University Practical Examination held on _________________

Internal Examiner External Examiner

3

MISRIMAL NAVAJEE MUNOTH JAIN ENGINEERING COLLEGE,

CHENNAI – 97

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VISION
Producing competent Computer Engineers with a strong background in the latest
trends and technology to achieve academic excellence and to become pioneer
in software and
hardware products with an ethical approach to serve the society
MISSION
To provide quality education in Computer Science and Engineering with the
state-of-the-art facilities. To provide the learning audience that helps the
students to enhance problem solving skills and to inculcate in them the habit of
continuous learning in their domain of interest. To serve the society by
providing insight solutions to the real-world problems by employing the latest
trends of computing technology with strict adherence to professional and
ethical responsibilities.

.
4

EXP. DATE TITLE MARKS SIGN

PAGE NO
NO
1 CREATE WEB PAGE WITH FOLLOWING USING 4
HTML
2 CREATE A WEB PAGE WITH ALL TYPES OF 10
CASCADING STYLE SHEETS

3 CLIENT-SIDE SCRIPTS FOR VALIDATING WEB 12

FORM CONTROLS USING DHTML DESCRIPTION
4 APACHE TOMCAT SERVER 17

5 SERVLET PROGRAM USING HTTP SERVLET 20

6 ONLINE APPLICATIONS USING JSP 23

7 STUDENTS DESCRIPTION PROGRAMING XML 26
SCHEMA
8 PROGRAMS USING DOM AND SAX PARSERS 29

9 AJAX PROGRAM 31

10 TRAVEL AGENT AND AIRLINE SERVICE USING 33

AP AND DATABASES
5

Ex.No :01
DATE:

CREATE WEB PAGE WITH FOLLOWING USING HTML

AIM:
1) To embed an imagemap in a web page
2) To fix the hot spots
3) Show all the related information when the hot spots are clicked.

DESCRIPTION:
The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses
the tags to interpret the content of the page. HTML allows images and objects to
be embedded and can be used to create interactive forms.It provides a means
to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items.

OBACTIVE:
To create a web page using html by embedding image into it.

HOW TO EXECUTE THE PROGRAM:

1. Type in your HTML code.

2. Click "Save As"
3. Select a f older to save it in.
4. Save your document as: firstprogram "for example"
5. Then when you have your project name (firstprogram) make it
an HTML file.
Example: Save it as "firstprogram.html"
6. Then open your project.
7. It will open your pr oject in your browser (I.E. Internet Explorer).

EXPECTED OUTPUT AND ITS FORM:

Can easily embed any image in a web page.

LIMITATIONS:
It cannot produce dyna mic output alone, since it is a static language Sometimes,
the structuring of HTML docu ments is hard to grasp.

AIM:
To create a web page which includes a map and display therelated information when a
hot spot is clicked in the map
6

ALGORITHM:
Step 1: Create a html file with map tag
Step 2: Set the source attribute of the img tag to the location of the image and also
set the usemap attribute.
Step 3: Specify an area with name, Shape and href set to the appropriate values.
Step 4: Repeat step 3 as many hot spots you want to put in the map.
Step 5: Create html files for each and every hot spots the user will select.

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<title>Image Map</title>
</head>
<body>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" />
<map name="metroid" id="metroid">
<area href="TamilNadu.html" shape="circle" coords="175,495,30" title="Tamil Nadu" />
<area href="Karnataka.html" shape="rect" coords="100,400,150,450" title="Karnataka" />
<area href="AndhraPradesh.html" shape="poly" coords="150,415,175,348,265,360,190,420,190,440"
title="Andhra Pradesh" />
<area href="Kerala.html" shape="poly" coords="108,455,150,515,115,490,148,495,110,448,155,501"
title="Kerala" />
</map>
</body>
</html>

TamiINadu.html

<!DOCTYPE html>
<html>
<head>
<title>About Tamil Nadu</title>
</head>
<body>
<center><h1>Tamil Nadu</h1></center>
<hr>
<ul>
<li>Area: 1,30,058 Sq. Kms.</li>
<li>Capital: Chennai</li>
<li>Language: Tamil</li>
<li>Population: 6,21,10,839</li>
</ul>
<hr>
<a href="ImageMap.html">India Map</a>
</body>
7

</html>

Karnataka.html
<!DOCTYPE html>
<html>
<head>
<title>About Karnataka</title>
</head>
<body>
<center><h1>Karnataka</h1></center>
<hr>
<ul>
<li>Area: 1,91,791 Sq. Kms</li>
<li>Capital: Bangalore</li>
<li>Language: Kannada</li>
<li>Population: 5,27,33,958</li>
</ul>
<hr>
<a href="ImageMap.html">India Map</a>
</body>
</html>

AndhraPradesh.html
<!DOCTYPE html>
<html>
<head>
<title>About Andhra Pradesh</title>
</head>
<body>
<h1>Andhra Pradesh</h1>
<hr>
<ul>
<li>Area: 2,75,068 Sq. Kms</li>
<li>Capital: Hyderabad</li>
<li>Language: Telugu</li>
<li>Population: 7,57,27,541</li>
</ul>
<hr>
<a href="ImageMap.html">India Map</a>
</body>
</html>
8

Kerala.html
<!DOCTYPE html>
<html>
<head>
<title>About Kerala</title>
</head>

<body>
<h1>Kerala</h1>
<hr>
<ul>
<li>Area: 38,863 Sq. Kms</li>
<li>Capital: Thiruvananthapuram</li>
<li>Language: Malayalam</li>
<li>Population: 3,18,38,619</li>
</ul>
<hr>
<a href="ImageMap.html">India Map</a>
</body>
</html>

OUTPUT:
9
10
11

RESULT:

Thus image mapping has been performed using HTML.

12

Ex.No :02
DATE:

CREATE A WEB PAGE WITH ALL TYPES OF CASCADING STYLE SHEETS

AIM:
To create a web page with all types of cascading style sheets.
ALGORITHM:
1. Start the document.
2. Declare the document type and open the HTML tag.
3. In the head section, set the title and define the CSS styles for headers and paragraphs.
4. In the body section, create a centered main header.
5. Create a left-aligned secondary header.
6. Add a paragraph with specific text and style.
7. Create a third header with a hyperlink.
8. Close the body and HTML tags.
9. End the document.

PROGRAM:

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Embedded style sheet</title>
<style type="text/css">
h1 {
font-family: Arial;
color: green;
}
h2 {
font-family: Arial;
color: red;
text-align: left;
}
h3 {
font-family: Arial;
13

color: blue;
}
p{
font-size: 14pt;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>
<center>This is created using embedded style sheet</center>
</h1>
<h2>This line is aligned left and red-colored.</h2>
<p>
The embedded style sheet is the most commonly used style sheet.<br>
This paragraph is written in Verdana font with a font size of 14pt.
</p>
<h3>
This is a blue <a href="colorname.html">colored</a> line.
</h3>
</body>
</html>

OUTPUT:

RESULT:
Thus creating a web page has been performed using CSS.
14

Ex.No :03
DATE:

CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS

USING DHTML DESCRIPTION

AIM:
Dynamic HTML, or DHT ML, is an umbrella term for a collection of technologies used
together to create interactive and animated web sites. by using a combination of a
static markup language (such as HTML),a client-side scripting language (such as
J a v a S c r i p t ), a presentation definition language (such as CSS), and the Document
Object Model.

OBECTIVE:
To develop an html webpage to validate form using DHTML.

HOW TO EXECUTE THE PROGRAM:

1. Type in your HTML code.
2. Click "Save As"
3. Select a folder to save it in.
4. Save your document as: first program "for example"
5. Then when you have your project name (first program) make it an HTML file.
Example:Save it as "doc.html"
6. Then open your project.
7. It will open your project in your browser

EXPECTED OUTPUT AND ITS FORM:

Validating form using DHTML can be done.

LIMITATIONS:
Costly Editing tools: Although DHTML provides great functionality but the
editors' available for that in market are pretty expensive. Examples of HTML editors are
Dreamweaver and Fusion.

Long and Complex coding: DHTML coding is long and complex. Only the
expert Javascript and HTML.programmers can write them and edit them with good
degree of functionality.

Browser Support problems :DHTML suffers from browser support

problems for different browsers. For example, a code written for Netscape might
not work in Internet Explorer and Vice-Versa. The problem arises due to the
different features of browsers.
15

ALGORITHM:

The form will include one text field called "Your Name", and a submit button.
1) Validation script will ensure that the user enters their name before the form is
sent to the server.
2) Open this page to see it in action.
3) Try pressing the Send Details button without filling anything in the "Your Name" field.
4) You might like to open the source code for this form in a separate window
5) The page consists of a JavaScript function called vaIidate_form() that
performs the form validation, followed by the form itself.

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
<script type="text/javascript">
function validate() {
if (document.signup.fname.value == "") {
alert("Please Enter First Name!");
return false;
}
if (document.signup.lname.value == "") {
alert("Please Enter Last Name!");
return false;
}
if (document.signup.uname.value == "") {
alert("Please Enter User Name!");
return false;
}
if (document.signup.pword1.value == "") {
alert("Please Enter Password!");
return false;
}
if (document.signup.pword1.value.length < 6) {
alert("Please Enter at least 6 characters for Password!");
return false;
}
if (document.signup.pword2.value == "") {
alert("Please Enter Password Again!");
return false;
16

if (document.signup.pword2.value != document.signup.pword1.value) {
alert("Password Mismatch! Reenter Password!");
return false;
}
alert("Details Entered Successfully");
display();
return true;
}
function display() {
document.write('<h2>Details Entered:</h2>');
document.write('<br/><font color="#0066ff">First Name:</font> ' + document.signup.fname.value);
document.write('<br/><font color="#0066ff">Last Name:</font> ' + document.signup.lname.value);
document.write('<br/><font color="#0066ff">User Name:</font> ' + document.signup.uname.value);
document.write('<br/><font color="#0066ff">Country:</font> ' + document.signup.country.value);
document.write('<br/><font color="#0066ff">Alternate Email:</font> ' +
document.signup.aemail.value);
}
</script>
</head>
<body align="center" bgcolor="green">
<table width="100%" height="100%">
<tr>
<td colspan="2" width="15%"></td>
<td colspan="1" bgcolor="#ffffff" width="70%" height="100%">
<h1 align="center"><font color="#0066ff">Student Registration</font></h1>
<h2 align="center"><font color="#0066ff">New User Signup Form</font></h2>
<form name="signup" onsubmit="return validate()">
<font face="verdana,arial,helvetica,sans-serif" color="#660000" size="2">
<p>* First Name: <input type="text" name="fname" size="20"/></p>
<p>* Last Name: <input type="text" name="lname" size="20"/></p>
<p>* User Name: <input type="text" name="uname" size="20"/> @smaiI.com</p>
<p>* Password: <input type="password" name="pword1" size="20"/></p>
<p>* Confirm Password: <input type="password" name="pword2" size="20"/></p>
<p>Gender: <input type="radio" name="gen" value="male"/>Male
<input type="radio" name="gen" value="female"/>Female</p>
<p>Country:
<select name="country">
<option selected>Select Country</option>
<option value="India">India</option>
<option value="Russia">Russia</option>
17

<option value="France">France</option>

<option value="Italy">Italy</option>
</select>
</p>
<p>Language Known:<br/>
<input type="checkbox" name="lang" value="English"/>English<br/>
<input type="checkbox" name="lang" value="Tamil"/>Tamil<br/>
<input type="checkbox" name="lang" value="Hindi"/>Hindi<br/>
<input type="checkbox" name="lang" value="Malayalam"/>Malayalam<br/>
</p>
<p>Alternate Email: <input type="text" name="aemail" size="20"/></p>
<p><input type="checkbox" name="agree"/>I Agree The Terms & Conditions</p>
<p align="center"><input type="submit" value="Submit"/> <input type="reset" value="Reset"/></p>
</font>
</form>
</td>
<td colspan="2" width="15%"></td>
</tr>
</table>
</body>
</html>
18

OUTPUT:

RESULT:
Thus, client side scripts for validating web form controls using DHTML was
successfully tested and executed.
19

Ex.No :04
DATE:
APACHE TOMCAT SERVER

Installing & Configuring Apache Tomcat Server 7.0.35:

1. Download and Unpack Tomcat 7.0.35

• Visit Tomcat 7.0 download page and download the latest version (7.0.35 in this case).

• After downloading, extract the zip file to your preferred location on your PC.

2. Set Environment Variables

a. Set JAVA_HOME
Tomcat requires Java to run. You need to set the JAVA_HOME environment variable
to point to your JDK installation directory (e.g., C:\Program Files\Java\jdk1.6.0_xx).

Steps:
▪ Right-click on This PC or Computer, then go to Properties.
▪ Click on Advanced System Settings, then Environment Variables.
▪ Under System variables, click New and set:
▪ Variable name: JAVA_HOME
▪ Variable value: Your JDK installation path (e.g., C:\Program Files\Java\jdk1.6.0_xx).

b. Set CATALINA_HOME
CATALINA_HOME is required for Tomcat to locate its installation directory.

Steps:
▪ In the same Environment Variables window, under System variables, click New and set:
▪ Variable name: CATALINA_HOME
▪ Variable value: Path to your Tomcat directory (e.g., C:\apache-tomcat-7.0.35).

c. Set CLASSPATH
CLASSPATH needs to include the servlet and JSP libraries required to compile your Java code.

Steps:
▪ In the same Environment Variables window, click New again and set:
▪ Variable name: CLASSPATH
Variable value: Include the paths to the required JAR files: objectivec
.;%CATALINA_HOME%\lib\servlet-api.jar;%CATALINA_HOME%\lib\jsp-api.jar;

3. Tomcat Directory Structure

The extracted Tomcat directory contains several subdirectories such as bin, webapps, and common.
The key files for starting and stopping Tomcat are located in the bin directory:

,*“
20

▪ startup.bat (for starting Tomcat)

▪ shutdown.bat (for stopping Tomcat)

4. Starting and Stopping Tomcat

▪ To start the Tomcat server:
▪ Open a command prompt.
▪ Navigate to the bin folder in your Tomcat directory and run: startup.bat
▪ In the command prompt, run: Arduino, shutdown.bat

5. Setting up a Development Environment

• Inside the webapps directory of Tomcat, create a new directory for your web application (e.g.,
MyApp).
• Inside your app's directory, create a WEB-INF directory. This will contain:
o classes directory: For compiled Java classes.
o lib directory: For any JAR files your application needs.
o web.xml: The deployment descriptor for configuring your servlets and other resources.

,*“
21

1.

Configure web.xml
In your WEB-INF directory, add the following to web.xml:
xml
<servlet>
<servlet-name>YourServletName</servlet-name>
<servlet-class>com.yourpackage.YourServletClass</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>YourServletName</servlet-name>
<url-pattern>/servlet/YourServletName</url-pattern>
</servlet-mapping>

2. Start Tomcat
Run startup.bat in Tomcat's bin directory to start the server.

3. Access Servlet in Browser

Open a browser and visit:
bash
http://localhost:8080/YourAppName/servlet/YourServletName

,*“
22

Ex.No :05
DATE:

SERVLET PROGRAM USING HTTP SERVLET

AIM:
To write a servlet program using HTTP Servlet.

ALGORITHM:

1. Create a HTML page including some form elements.

2. Inside the «form» tag, for the action attribute specify the full path name
of the .jsp file.
3. Create a .java file that imports javax.http.servlet.*;
4. Create a class that extends HttpServlet.
5. This will request some information by filling out a form containing a link
to a servlet when the Submit button is clicked.
6. The server locates the requested servlet
7. Define the doPost function to process the data obtained from the HTML
file.
8. The servlet then gathers the information needed to satisfy the
user's request and constructs a Web page containing the information.
9. That Web page is then displayed on the user's browser

PROGRAM:

sam.html:
<html>
<head>
<title>Online Exam</title>
</head>
<body>
<form action="http://localhost:8080/examples/servlet/source_servlet" method="get">
<h3>1. Who invented mainframe system?</h3>
<input type="radio" name="s1" value="IBM"> IBM<br>
<input type="radio" name="s1" value="MICROSOFT"> Microsoft<br>
<input type="radio" name="s1" value="INFOSYS"> Infosys<br>
<input type="radio" name="s1" value="CISCO"> Cisco<br>
<h3>2. What is the capital of Sri Lanka?</h3>
<input type="radio" name="s2" value="MADRID"> Madrid<br>
<input type="radio" name="s2" value="COLOMBO"> Colombo<br>
<input type="radio" name="s2" value="DELHI"> Delhi<br>
<input type="radio" name="s2" value="MOSCOW"> Moscow<br>
<h3>3. What is the national game of India?</h3>
<input type="radio" name="s3" value="HOCKEY"> Hockey<br>
<input type="radio" name="s3" value="CRICKET"> Cricket<br>
<input type="radio" name="s3" value="FOOTBALL"> Football<br>
23

<input type="radio" name="s3" value="VOLLEYBALL"> Volleyball<br>

<h3>4. What is the NATO name of SUKHOI jets?</h3>
<input type="radio" name="s4" value="FLANKERS"> Flankers<br>
<input type="radio" name="s4" value="FOXBOAT"> Foxboat<br>
<input type="radio" name="s4" value="FISHBOAT"> Fishboat<br>
<input type="radio" name="s4" value="FOXTROT"> Foxtrot<br>
<h3>5. What was the first name of graphical browser?</h3>
<input type="radio" name="s5" value="NETSCAPE"> Netscape<br>
<input type="radio" name="s5" value="IE"> Internet Explorer<br>
<input type="radio" name="s5" value="MOZILLA"> Mozilla<br>
<input type="radio" name="s5" value="OPERA"> Opera<br>
<input type="submit" value="Submit">
</form></body></html>

source_servlet.java:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class source_servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
int score = 0;
String str;
try {
str = request.getParameter("s1");
if ("IBM".equals(str)) score++;
str = request.getParameter("s2");
if ("COLOMBO".equals(str)) score++;
str = request.getParameter("s3");
if ("HOCKEY".equals(str)) score++;
str = request.getParameter("s4");
if ("FLANKERS".equals(str)) score++;
str = request.getParameter("s5");
if ("MOZILLA".equals(str)) score++;
out.println("<html><head><title>Result</title></head><body>");
out.println("Your score: " + score);
out.println("</body></html>");
} catch (Exception e) {
out.println("<html><head><title>Error</title></head><body>");
out.println("An error occurred: " + e.getMessage());
out.println("</body></html>");
} finally {
out.flush();
out.close();
}}}
24

OUTPUT:

RESULT:
Thus servlet program using http servlet has been completed successfully and thus output is
verified.
25

Ex.No :06
DATE:
ONLINE APPLICATIONS USING JSP

AIM:
To develop a Online Applications for displaying students mark list using
java server pages and MS-Access database.

ALGORITHM:

Step 1: Start the program.

Step 2: Create a MS- Access database table named student for storing students
marks.
Step 3: Create an html form for entering the register number of the student.
Step 4: Open control panel and make the database connectivity settings.
Step 5: Create a JSP coding for processing the students marks from the database.
Step 6: Deploy the JSP and the html page in the Netbeans 6.8 IDE to create the
application package.
Step 7: Run the application in the IDE.
Step 8: The students mark list for the corresponding register number will be
displayed.
Step 9:Stop the program. www.vidyarthipIus.com

PROGRAM:

mark.html
<%@ page session="false" %>
<%@ page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Exam - Login & Mark List</title>
</head>
<body bgcolor="#779966" text="black">
<%
// Check if the 'login' parameter is passed (i.e., after form submission)
String login = request.getParameter("login");
if (login == null || login.isEmpty()) {
%>
<!-- Login Form -->
<center><font color="blue"><h2>LOGIN FORM</h2></font></center>
<form method="get" action="">
<table align="center" border="0" bgcolor="#777799">
<tr>
<td>REG NUMBER</td><td>:</td>
<td><input type="text" name="login"></td>
</tr>
26

</table>
<br><br>
<center>
<input type="submit" value="SUBMIT">
<input type="reset" value="RESET">
</center>
</form>
<%
} else {
// Process the login and display the mark list
try {
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
System.out.println("JDBC driver loaded");
String sql = "SELECT * FROM student WHERE reg_number = " + Integer.parseInt(login);
try (Connection con = DriverManager.getConnection("jdbc:odbc:student");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(sql)) {
if (!rs.next()) {
out.println("<center><h2>No records found for REG NUMBER: " + login + "</h2></center>");
} else {
%>
<!-- Mark List Display -->
<center>
<br>
<h2>MARK LIST</h2>
<br>
<hr/>
<br>
<table border="3">
<tr>
<th>CNS</th>
<th>WT</th>
<th>NPM</th>
<th>DWM</th>
<th>ES</th>
<th>OAD</th>
</tr><tr>
<td><%= rs.getString("CNS") %></td>
<td><%= rs.getString("WT") %></td>
<td><%= rs.getString("NPM") %></td>
<td><%= rs.getString("DWM") %></td>
<td><%= rs.getString("ES") %></td>
<td><%= rs.getString("OAD") %></td>
27

</tr>
</table>
</center>
<%
}}}
catch (ClassNotFoundException e) {
out.println("<center><h2>Error loading JDBC driver: " + e.getMessage() + "</h2></center>");
} catch (SQLException e) {
out.println("<center><h2>Database error: " + e.getMessage() + "</h2></center>");
} catch (Exception e) {
out.println("<center><h2>Unexpected error: " + e.getMessage() + "</h2></center>");
}}
%>
</body>
</html>

OUTPUT:

RESULT:
Thus a 3-tier application for displaying students mark list using java server pages and MS- Access
database has been developed.
28

Ex.No :07
DATE:
STUDENTS DESCRIPTION PROGRAM ING XML SCHEMA

Extensible Markup Language(XML) is amarkup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine- readable.It
is defined in the XML 1.0 Specification produced by the W3C, and several other related
specifications,all free open standards.

OBECTIVE:
Develop a XML program describing styles into it.

HOW TO EXECUTE THE PROGRAM:

We can't and you don't. XML itself is not a programming language,
so normal XML documents don't run or execute. XML is a markup
specification language and XML files are just data: they sit there until
you run a program which displa ys them (like a browser) or does some work
with them (like a converter which writes the data in another format, or a database
which reads the data), or modifies them (like an editor).
To view or displa y an XML file, open it with an XML editor or an XML browser.

EXPECTED OUTPUT AND ITS FORM:

The expected output is to appl ying styles to XML.

LIMITATIONS:
More difficult demanding and precise than html Lack of browser support/
end user application.

PROCEDURE:
• The xsl:output element specifies how to display the result tree.

• The XSL processor produces the output result tree. It should be specified by
xsl:output element.

• The method attribute of xsl:output specifies the overall process to produce the result tree.

• The HTML output method results the tree as HTML document.

Proqram5.xml:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="program5.css">
<title>Students Description</title>
</head>
<body>
<h1>STUDENTS DESCRIPTION</h1>
29

<students>
<student>
<USN>USN: 1ME15CS001</USN>
<name>NAME: SANVI</name>
<college>COLLEGE: TEC</college>
<branch>BRANCH: Computer Science and Engineering</branch>
<year>YEAR: 2015</year>
<e-mail>E-Mail: [email protected]</e-mail>
</student>
<student>
<USN>USN: 1ME15IS002</USN>
<name>NAME: MANORANJAN</name>
<college>COLLEGE: TEC</college>
<branch>BRANCH: Information Science and Engineering</branch>
<year>YEAR: 2015</year>
<e-mail>E-Mail: [email protected]</e-mail>
</student>
<student>
<USN>USN: 1ME13EC003</USN>
<name>NAME: CHANDANA</name>
<college>COLLEGE: TEC</college>
<branch>BRANCH: Electronics and Communication Engineering</branch>
<year>YEAR: 2013</year>
<e-mail>E-Mail: [email protected]</e-mail>
</student>
</students>
</body>
</html>

student {
display: block;
margin-top: 10px;
color: Navy; }
USN {
display: block;
margin-left: 10px;
font-size: 14pt;
color: Red; }
name {
display: block;
margin-left: 20px;
font-size: 14pt;
color: Blue; }
college {
display: block;
margin-left: 20px;
font-size: 12pt;
color: Maroon; }
30

branch {
display: block;
margin-left: 20px;
font-size: 12pt;
color: Purple; }
year {
display: block;
margin-left: 20px;
font-size: 14pt;
color: Green; }
e-mail {
display: block;
margin-left: 20px;
font-size: 12pt;
color: Blue; }

OUTPUT:

RESULT:
Thus Programs using XML- Schema- XS LT/XSL was developed and successfully executed.
31

Ex.No :08
DATE:
PROGRAMS USING DOM AND SAX PARSERS
AIM:
To create a program using Dorn and Sax parsers.

ALGORITHM:

Create XML String:

Define an XML structure string (txt) containing <note>, <to>, <from>, and <body> elements.

Check for Browser Support:

• If DOMParser is supported, parse the XML string using DOMParser and store it as an XML
document (xmlDoc).
• If not (for older IE), use ActiveXObject to parse the XML string.

Extract XML Data:

Use getElementsByTagName() to retrieve the content of to, from, and body from the
XML document.

Update HTML Content:

Use getElementById() to update the innerHTML of the HTML elements with the parsed
data from the XML document.

PROGRAM:
DOM:
<!DOCTYPE html>
<html>
<body>
<h1>Important Note</h1>
<div>
<b>To:</b> <span id="to"></span><br>
<b>From:</b> <span id="from"></span><br>
<b>Message:</b> <span id="message"></span><br>
</div>
<script>
// XML string that you want to parse
var txt = `<note>
<to>Sania Mirza</to>
<from>Serena Williams</from>
<body>Don't forget me this weekend!</body>
</note>`;
32

var parser, xmlDoc;

if (window.DOMParser) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(txt, "text/xml");
} else {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(txt);
}
document.getElementById("to").innerHTML =
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML =
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML =
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

OUTPUT:

RESULT:
The programs using Doms and Sax Parser was successfully executed.
33

Ex.No :09
DATE:
AJAX PROGRAM
AIM:
To create a sample AUX PROGRAM.

ALGORITHM:

Initialize ajax Request:

Declare a variable to hold the AJAX request object.
Check for Modern Browser Support:
Try creating an XML Http Request object (used by modern browsers).
Fallback to Internet Explorer (Newer Versions):
If the first attempt fails, try creating an Active XObject using "Msxml2.XMLHTTP"
for newer Internet Explorer versions.
Fallback to Internet Explorer (Older Versions):
If that fails, try creating an Active XObject using "Microsoft.XML HTTP" for older
Internet Explorer versions (IE6).
Error Handling:
If all methods fail, display an error message indicating that the browser does not
support AJAX.

PROGRAM:

<!DOCTYPE html>
<html>
<body>
<script language="javascript" type="text/javascript">
function ajaxFunction() {
var ajaxRequest;
try {
// Opera 8.0+, Firefox, Safari, Chrome, etc.
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser doesn't support AJAX!");
return false;
}}}
ajaxRequest.open("GET", "someURL", true); ajaxRequest.send(null);
}
</script>
34

<button onclick="ajaxFunction()">Click to trigger AJAX</button>

</body>
</html>

OUTPUT:

RESULT:
This Ajax program successfully executed.
35

Ex.No :10

DATE:

TRAVEL AGENT AND AIRLINE SERVICE USING AP AND DATABASES

Question - Consider a case where we have two web Services- an airline service and a
travel agent and the travel agent is searching for an airline. Implement this scenario
using Web Services and Data base.

ALGORITHM:

1. Understand the problem: Clearly define the problem and what needs to be
solved or accomplished.

2. Define the inputs: Identify the data or values that the algorithm will
process.

3. Establish the outputs: Specify the desired outcome or result from the
algorithm.

4. Design the process: Break down the steps or operations needed to

transform the inputs into the outputs.

5. Ensure correctness: Verify that the algorithm solves the problem for all
possible input cases.

6. Optimize for efficiency: Minimize the use of resources (such as time or

memory) to improve the algorithm's performance.

7. Terminate: Make sure the algorithm completes in a finite amount of time.

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

<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>
<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
<input type="radio" name="group1" value="international"> International
</td>
</tr>
<tr>
<td><b>Select Airline</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>
37

AirlineList.jsp:

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

<%@ page import="java.sql.*, java.util.Date, java.text.SimpleDateFormat" %>
<!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>Flight List</title>
</head>
<body>
<center>
<h1>Travel Easy</h1>
<h3>- A Smarter way to travel</h3>
<br><br>
<%
String type = request.getParameter("group1");
String from = request.getParameter("txt_from");
String to = request.getParameter("txt_to");
String depart = request.getParameter("txt_depart");
String no = request.getParameter("txt_no");
String airline = request.getParameter("airline");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String sTable = type.equals("domestic") ? "DomesticFlights" : "InternationalFlights";
String sSql = "SELECT * FROM " + sTable + " WHERE From='" + from + "'
AND To='" + to + "' AND DepartDate='" + depart + "' AND SeatCapacity >= " + no;
String sDBQ = "d:/" + airline + ".mdb";
String database = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=" + sDBQ +
";DriverID=22;READONLY=true";
Connection cn = null;
Statement st = null;
ResultSet rs = null;
try {
cn = DriverManager.getConnection(database, "", "");
st = cn.createStatement();
rs = st.executeQuery(sSql);
if (!rs.isBeforeFirst()) {
out.println("<center><b>Sorry!! No flights available</b></center>");
} else {
out.println("<h3><b>" + airline + " Flights</b></h3><br>");
out.println("<table cellpadding='15' cellspacing='20'>");
out.println("<tr><th>Flight No</th><th>From</th><th>To</th><th>Departure
Date</th><th>Seats Remaining</th></tr>");
while (rs.next()) {
out.println("<tr>");
out.println("<td>" + rs.getString("FlightNo") + "</td>");
38

out.println("<td>" + rs.getString("From") + "</td>");

out.println("<td>" + rs.getString("To") + "</td>");
out.println("<td>" + rs.getString("DepartDate") + "</td>");
out.println("<td>" + rs.getString("SeatCapacity") + "</td>");
out.println("</tr>");
}
out.println("</table>");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) rs.close();

if (st != null) st.close();

if (cn != null) cn.close();
}
%>
</center>
</body>
</html>

Kingfisher.jsp and SpiceJet.jsp

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

<%@ page import="java.sql.*" %>
<!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>
<center>
<h1>Kingfisher Airlines</h1>
<h3>- Have a nice trip!!!</h3>
<br><br>Your Booking Details:
<br><br>
<table cellpadding="10" cellspacing="10">
<%
String flightNo = request.getParameter("flight_no");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String sTable = request.getParameter("air_type");
String sSql = "SELECT * FROM " + sTable + " WHERE FlightNo='" + flightNo + "'";
String sDBQ = "d:/kingfisher.mdb";
String database = "jdbc:odbc:Driver={Microsoft Access Driver (*.mdb)};DBQ=" + sDBQ +
";DriverID=22;READONLY=true";
Connection cn = null;
39

Statement st = null;
ResultSet rs = null;
try {
cn = DriverManager.getConnection(database, "", "");
st = cn.createStatement();
rs = st.executeQuery(sSql);
if (rs.next()) {
out.println("<tr><th>Flight No</th><th>From</th><th>To</th><th>Departure Date</th><th>
Seats Remaining</th></tr>");
out.println("<tr>");
out.println("<td>" + rs.getString("FlightNo") + "</td>");
out.println("<td>" + rs.getString("From") + "</td>");
out.println("<td>" + rs.getString("To") + "</td>");
out.println("<td>" + rs.getString("DepartDate") + "</td>");
out.println("<td>" + rs.getString("SeatCapacity") + "</td>");
out.println("</tr>");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (rs != null) rs.close();
if (st != null) st.close();
if (cn != null) cn.close();
}
%>
</table>
</center>
</body>
</html>

DATABASE:
40

OUTPUT:

RESULT:

Travel Agent and Airline service using JSP and Databases program was successfully
executed.