Scribd
Upload
150 views

Web Technology

The document describes the implementation of hotspots on a web page using HTML and image mapping. It includes an index page with hotspots linking to pages about Chennai, Chennai Airport and the Taj Mahal. Each destination page provides information about the location in text and images. Cascading style sheets are then used to style multiple web pages for a college website. Finally, JavaScript is used to validate user input fields on a registration form.

Uploaded by

Abi Abinaya
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
150 views

Web Technology

The document describes the implementation of hotspots on a web page using HTML and image mapping. It includes an index page with hotspots linking to pages about Chennai, Chennai Airport and the Taj Mahal. Each destination page provides information about the location in text and images. Cascading style sheets are then used to style multiple web pages for a college website. Finally, JavaScript is used to validate user input fields on a registration form.

Uploaded by

Abi Abinaya
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 42

EXP NO 1:

IMPLEMENTATION OF HOTSPOTS
Mapping.html:
<html>
<head>
<title>
Mapping
</title>
<h2><Center>WEB PAGE CREATION</center></h2>
</head>
<body bgcolor="red">
<h4 align="CENTER">
IMPLEMENTATION OF HOTSPOTS
<br><br>
</h4>
<center><img src="india2.jpg" usemap="#map"/></center>
<map name="map">
<area shape="rectangle" href="Chennai.html"
coords="192,466,215,480"/>
<area shape="rectangle" href="Chennaiairport.html"
coords="182,480,208,498"/>
<area shape="rectangle" href="TajMahal.html"
coords="149,180,167,200"/>
</map>
</body>
</html>
chennai.html:
<html>
<head>
<center><h2>CHENNAI<h2></center>
</head>
<body bgcolor="sky blue">
A city of southeast India on the Coromandel Coast of the Bay of Bengal.
Founded in 1639 as Fort St. George by the British East India Company,
Chennai was held by the French from 1746 to 1749.
It is today a major industrial, commercial,
and cultural center with a thriving harbor (constructed 1862-1901).
<center><img src="chennai.jpg"></center>
</body>
</html>

chennaiairport.html:
<html>
<head>
<center><h2>CHENNAI AIRPORT</h2></center></head>
<body bgcolor="orange">
Chennai International Airport (IATA: MAA, ICAO: VOMM) is the primary
airport serving the southern Indian metropolis of Chennai.
It is located on GST road in the neighbourhood of Tirusulam in
Kanchipuram district, Tamil Nadu, within the Chennai Metropolitan Area
limits.
The IATA code MAA for the airport is derived from the former name of
Chennai, Madras.
For the year ending January 2012, it was the third busiest airport in India
in terms of both international and overall passenger traffic,which is
expected to double after December 2012 when the new terminals are
opened.
The airport is spread across the suburban areas of Meenambakkam,
Pallavaram and Tirusulam with passenger entry at Tirusulam and cargo
entry at Meenambakkam.
The domestic and the international terminals are named after former chief
ministers of Tamil Nadu, K. Kamaraj and C.N. Annadurai, respectively.
It is the first airport in India to have international and domestic terminals
adjacent to each other.
The airport is the regional headquarters of the Airports Authority of India
for the southern region of India comprising the states of Tamil Nadu,
Andhra Pradesh, Karnataka, and Kerala and the union territories of
Puducherry and Lakshadweep.
As of 2012, the annual passenger traffic at the airport is about 13 million
and the airport handles about 325 aircraft movements a day.
The passenger traffic is estimated to double by 2020 when the airport will
be capable of handling only 500 aircraft movements a day[citation
needed].
However, the airport is expected to reach saturation by 201617,
necessitating the construction of a second international airport.
In 2012, the airport was ranked 153 in the Airport Service Quality survey
(by the Airports Council International) among 156 airports in Asia.
<center><img src="chennaiairport.jpg"></center>
</body>
</html>

TajMahal.html:
<html>
<head>
<center><h2>TAJ MAHAL<h2></center>
</head>
<body bgcolor="green">
The Taj Mahal ("crown of buildings",; also "the Taj") is a mausoleum
located in Agra, India.
It is one of the most recognizable structures in the world.
It was built by Mughal emperor Shah Jahan in memory of his third wife,
Mumtaz Mahal.
<center><img src="TajMahal.jpg"></center>
</body>
</html>

OUTPUT:

Exp No:2

CASCADING STYLE SHEETS

mainpage.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<title>DCE</title>
<body bgcolor="red">
<h1><center>DHANALAKSHMI COLLEGE OF
ENGINEERING</center></h1>
<br><center><a
href="mainpage.html">HOME</a>&nbsp&nbsp&nbsp&nbsp
<a href="about.html">ABOUT US</a>&nbsp&nbsp&nbsp&nbsp
<a href="details.html">CONTACT US</a>&nbsp&nbsp&nbsp&nbsp
<a href="course.html">COURSES</a></center>
<center><br><b><h2>Chairman:DR.V.P.RAMAMOORTHY</h2></b><b
r>
<p>Our college offers a wide range of courses.<br>
Currently 6 UG courses and 2PG courses are offered.<p></center>
</body>
</html>

about.html:
<html>
<head>
<title>DCE</title>
<style type="text/css">
h1
{
background-color:pink;
font-family:arial;
font-size:30px;
color:violet;
}
p
{

background-color:grey;
font-family:Monotype Corsiva;
font-size:25px;
color:orange;
}
</style>
</head>
<body bgcolor="red">
<h1><center>DHANALAKSHMI COLLEGE OF
ENGINEERING</center></h1>
<a href="mainpage.html">HOME</a>
<br><p>&nbsp&nbsp&nbsp&nbsp&nbsp This institution was established
in the tear 2000.This is approved by AICTE and is affiliated to ANNA
UNIVERSITY.it is an ISO 9001:2000 certified and NBI accredited
organisation.It has an excellent infrastructure.It was found by the former
anna university professor Dr.V.P.RAMAMOORTHY.</p>
</body>
</html>
details.html:
<html>
<head>
<title>DCE</title>
</head>
<body bgcolor="red">
<ht style="font-family:arial;font-align:center;color:violet">
<center>DHANALAKSHIMI COLLEGE OF ENGINEERING</center></h1>
<a href="mainpage.html">HOME</a>
<br><h2 style="font-family:Bradley Hand ITC;fontsize:30px;color:Black;background-color:yellow">CONTACT:</h2>
<h3 style="font-family:Monotype Corsiva;fontsize:25px;color:Blue;background-color:violet">
DHANALAKSHIMI COLLEGE OF ENGINEERING,<br>
Dr.V.P.R Nagar,<br>Manimangalam,<br>Chennai-601301.<br>
PH NO:04465619401,27178355<br>www.dceeducation.com</h3>
</div>
</body>
</html>

course.html:
<html>
<head>
<link rel="stylesheet"type="text/css"href="style.css">
</head>
<title>DCE</title>
<body bgcolor="red">
<h1><center>DHANALAKSHMI COLLEGE OF
ENGINEERING</center></h1>
<br>
<a href="mainpage.html">HOME</a>
<center><h3>The course offered:</h3>
<p><br>1.Information Technology
<br>2.Electronic and Communication Engineering
<br>3.Electrical and Electronics Engineering
<br>4.Mechanical and Civil Engineering
<br>5.Computer Science and Engineering
</p></center>
</body>
</html>
style.css:
h1
{
font-family:arial;
font-size:30pt;
color:00ffff;
}
h2
{
background-color:pink;
font-family:times new roman;
font-size:20pt;
color:blue;
}
h3
{
font-family:Comic Sans MS;

background-color:pink;
font-size:15pt;
font-color:green;
}
p
{
font-family:Monotype corsiva;
background-color:grey;
font-size:15pt;
color:00f000;
}
OUTPUT:

3)WEB FORM VALIDATION USING JAVA SCRIPT


AIM:
To create a web form with client side validation using Java script.
STEPS:
1.
Insert a <form> element in the HTML document with the
following attributes:

name to identify the form element.

action specifies the target of the form data to be submitted.

onsubmit to call the Java script validation function when the


submit button is pressed.
2.
Insert all the necessary form elements such as <input>,
<textarea>, <select>, and <fieldset>.
3.
Insert various types of input fields (such as text, radio,
checkbox, and submit) by using type attribute of <input> element.
4.
Embed the form validation function within the head section of
the HTMLdocument by using <script> element as follows:
<script type="text/javascript">
PROGRAM:
FormValidation.html
<html>
<head>
<title>Form Validation Using Java Script</title>
<script type="text/javascript">
function validation()
{
if(document.f1.name.value=="")
{
window.alert("Plz Enter Your Name");
return false;
}
else if(document.f1.email.value=="")
{
window.alert("Plz Enter Your E-mail:");
return false;
}

else if(document.f1.email.value.indexOf('@gmail.com')==-1)
{
window.alert("Plz Enter Your Valid E-mail");
return false;
}
else if(document.f1.addr.value=="")
{
window.alert("Plz Enter Your Address");
return false;
}
else if(document.f1.country.selectedIndex==0)
{
window.alert("Plz Select Your Country");
return false;
}
else
if((document.f1.rdo[0].checked==false)&&(document.f1.rdo[1].checked=
=false))
{
window.alert("Plz Choose Your Gender");
return false;
}
else
if((document.f1.chk[0].checked==false)&&(document.f1.chk[1].checked=
=false))
{
window.alert("Plz Select Your Qualification");
return false;
}
else
return true;
}
</script>
</head>
<body bgcolor="lightgreen">
<h3 style="text-align:center">Web Form Validation Using Java
Script</h3>
<form name="f1" action="Register.html" onsubmit="return
validation()">
<fieldset>
<legend>Registration Form</legend>

<br/>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Address:</td>
<td><Textarea name="addr" rows="5" cols="20"></Textarea></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option>---Select Your Country---</option>
<option>India</option>
<option>USA</option>
<option>AUS</option>
<option>UK</option>
</select>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="rdo">Male
<input type="radio" name="rdo">Female
</td>
</tr>
<tr>
<td>Qualification:</td>
<td>
<input type="checkbox" name="chk">B.E
<input type="checkbox" name="chk">M.E
</td>
</tr>
</table>

<br/>
<input type="submit" value="Register">
</fieldset>
</form>
</body>
</html>
Register.html
<html>
<head>
<title>Registration Successfull</title>
</head>
<body>
<h3>Registered Successfully.......!</h3>
</body>
</html>

4)

COLOR PALETTE USING JAVA

AIM:
To write the java program 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.

ALGORITHM:
1.
Import all necessary packages and classes.
2.
Define a class CPalette that extends Applet and implements
the interfaces ActionListener and ItemListener.
3.
Define the objects for the controls such as Button,
CheckboxGroup, Checkbox and TextArea.
4.

Add all the controls by using the init() method of Applet class.

5.

Arrange all the controls by using the method setBounds().

6.
Set the background color for each buttons by using the
method setBackground().
7.
Make the controls to listen the action by using the method
addActionListener().
8.

Make the frame visible by using the method setVisible().

9.
If the item state value s=1, change the background of the
control TextArea.
10. If the item state value s=2, change the foreground of the
control TextArea.
11. Compile the java file (CPalette.java) by using the following
command line:
C:\jdk1.3.1\bin>javac CPalette.java
12.

Create the <applet> code and save it as ColorPalette.html.

13.

Run the HTML file (ColorPalette.html) in Internet Explorer.

PROGRAM:
CPalette.java
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public
class
CPalette
extends
ActionListener,ItemListener
{
Button b1,b2,b3,b4;
CheckboxGroup cg;
Checkbox c1,c2;
TextArea ta;
int s;
public void init()
{
setLayout(null);
b1=new Button();
add(b1);
b1.setBounds(50,50,50,25);
b1.addActionListener(this);
b1.setBackground(Color.blue);
b2=new Button();
add(b2);
b2.setBounds(120,50,50,25);
b2.addActionListener(this);
b2.setBackground(Color.black);
b3=new Button();
add(b3);
b3.setBounds(50,95,50,25);
b3.addActionListener(this);
b3.setBackground(Color.red);
b4=new Button();
add(b4);
b4.setBounds(120,95,50,25);
b4.addActionListener(this);
b4.setBackground(Color.cyan);
cg=new CheckboxGroup();
c1=new Checkbox("Background",cg,false);
add(c1);
c1.setBounds(50,200,100,25);

Applet

implements

c1.addItemListener(this);
c2=new Checkbox("Foreground",cg,false);
add(c2);
c2.setBounds(50,250,100,25);
c2.addItemListener(this);
ta=new TextArea();
add(ta);
ta.setBounds(150,150,120,120);
setVisible(true);
}
public void itemStateChanged(ItemEvent ie)
{
if(c1.getState()==true)
s=1;
if(c2.getState()==true)
s=2;
}
public void actionPerformed(ActionEvent ae)
{
if(s==1)
{
if(ae.getSource()==b1)
ta.setBackground(Color.blue);
else if(ae.getSource()==b2)
ta.setBackground(Color.black);
else if(ae.getSource()==b3)
ta.setBackground(Color.red);
else
ta.setBackground(Color.cyan);
}
if(s==2)
{
if(ae.getSource()==b1)
ta.setForeground(Color.blue);
else if(ae.getSource()==b2)
ta.setForeground(Color.black);
else if(ae.getSource()==b3)
ta.setForeground(Color.red);
else
ta.setForeground(Color.cyan);
}

}
}
ColorPalette.html
<html>
<head>
<title>Color
Palette
</head>
<body
<applet
code="CPalette.class"
</applet>
</body>
</html>

Demonstration</title>
bgcolor="lightblue">
width="300"
height="400">

5) INVOKING SERVLETS FROM HTML FORM


AIM:
To write a java program to invoke servlets from HTML forms.
ALGORITHM:
1.
Write a client side HTML program (client.html) with the
following:

Insert a <form> that contains the fields such as text,


password and one submit button.

Set the URL of the server as the value of forms action


attribute.
2.

Write a java servlet program (server.java) with the following:

Define a class server that extends the property of the class


GenericServlet.

Handle the request from the client by using the method


service() of GenericServlet class.

Get the parameter names from the HTML form by using the
method getParameterNames().

Get the parameter values from the HTML forms by using the
method getParameter().

Send the response to the client by using the method of


PrintWriter class.

3.

Compile the java source code (server.java).

4.

Run the HTML program (client.html).

5.

Submit the form data to the server.

PROGRAM:
client.html
<html>
<head>
<title>Invoking
Servlet
From
HTML</title>
</head>
<body>
<form
name="form1"
method="post"
action="http://localhost:8080/servlets-examples/servlet/server">
<fieldset>
<legend>Login</legend>

<table>
<tr>
<td>E-mail:</td>
<td><input
type="text"
name="LoginID"
size="25"/></td>
</tr>
<td>Password:</td>
<td><input
type="password"
name="Password"
size="25"></td>
</tr>
<tr>
<td><input
type="submit"
Value="Login"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
server.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class server extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException
{
PrintWriter pw=res.getWriter();
pw.print("<h2>Logged in Successfully...</h2>");
pw.print("<h3><u>Login Details</u></h3>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String str1=(String)e.nextElement();
String str2=req.getParameter(str1);
pw.print(str1+"="+str2+"<br/>");
}
pw.close();
}
}

6) INVOKING SERVLETS FROM APPLETS

AIM:
To write a java applet program that invokes servlet.
ALGORITHM:
1.
Write a java applet program (AppletClient.java) with the
following:

Define the class AppletClient which extends the property of


the class Applet and implements the interface ActionListener.

Define the objects for Button and add the button in the init()
method of Applet class.

Make the button to listen the action by using the method


addActionListener().

Set the URL of the servlet program by using the object of the
class URL.

Define the object for AppletContext and display the response


from the server using the method showDocument().
2.
Create an HTML file (AppletClient.html) that contains the
applet tag and pass the class name to that applet code.
3.
Write a simple servlet program (MyServer.java) that contains
any response message.
4.
Run the HTML file (AppletClient.html) that contains the
corresponding applet code.
5.
Click the button on the applet window in order to invoke the
servlet program.
PROGRAM:
AppletClient.java

import java.io.*;
import java.net.*;
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class AppletClient extends Applet implements ActionListener
{

public void init()


{
Button b1=new Button("Click Here to Access Date Information from
Server");
b1.setBackground(Color.black);
b1.setForeground(Color.red);
add(b1);
b1.addActionListener(this);
}
public void actionPerformed(ActionEvent ae)
{
try
{
AppletContext ac=getAppletContext();
URL u=new URL("http://localhost:8080/servletsexamples/servlet/MyServer");
ac.showDocument(u);
}
catch(Exception e)
{
System.out.println(e);
}
}
}
AppletClient.html
<html>
<head>
<title>Invoking Servlets From Applet</title>
</head>
<body>
<applet code="AppletClient.class" width="300" height="100">
</applet>
</body>
</html>
MyServer.java
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class MyServer extends GenericServlet

{
public void service(ServletRequest req,ServletResponse res)throws
ServletException,IOException
{
PrintWriter pw=res.getWriter();
Date d=new Date();
pw.println("<h3>Current Date and Time From Server:</h3>");
pw.println("<b>"+d+"</b>");
}
}

7) ONLINE EXAMINATION USING JSP


AIM:
To create three tier application for conducting online examination using
JSP and database.
ALGORITHM:
1.
Design the HTML page (ExamClient.html) with the following

Create a form to get the input from the user.

Use radio buttons to make various options for the questions.

Set the URL of the server (ExamServer.jsp) as the value of


the action attribute.

Use submit button to invoke the server and send the form
data to the server.
2.

Create the JSP file with the following

Read the input from the client.

Retrieve the answers from the database.

Match the answers with the correct answers are available


inthe database table.

For each correct answer increment the mark by 5.

Server displays the mark and result to the client as a


response.
PROGRAM:
ExamClient.html
<html>
<head>
<title>Online Exam Client</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<h3>Answer the following questions (5 marks for each correct
answer)</h3>
<hr/>
<form name="examForm" method="post" action="ExamServer.jsp">

1.Who is called as the father of computer?<br/>


<input type="radio" name="ans1" value="Sachin">Sachin
<input type="radio" name="ans1" value="Stuart">Stuart
<input type="radio" name="ans1" value="Charles Babbage">Charles
Babbage
<input type="radio" name="ans1" value="Napier">Napier
<br/><br/>
2.C++ was developed by?<br/>
<input type="radio" name="ans2" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans2" value="None">None
<input type="radio" name="ans2" value="David Ritchie">David Ritchie
<input type="radio" name="ans2" value="John">John
<br/><br/>
3.C was developed by?<br/>
<input type="radio" name="ans3" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans3" value="Stroustrup">Stroustrup
<input type="radio" name="ans3" value="David Ritchie">David Ritchie
<input type="radio" name="ans3" value="Charles Babbage">Charles
Babbage
<br/><br/>
<input type="submit" value="Check Your Result"/>
</form>
</body>
</html>
ExamServer.jsp
<%@page contentType="text/html" language="java"
import="java.sql.*"%>
<html>
<head>
<title>Online Exam Server</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>

<p>
<a href="ExamClient.html">Back To Main Page</a>
</p>
<hr/>
<%
String str1=request.getParameter("ans1");
String str2=request.getParameter("ans2");
String str3=request.getParameter("ans3");
int mark=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:examDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM examTab");
int i=1;
while(rs.next())
{
if(i==1)
{
String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
}
}
if(i==2)
{
String dbans2=rs.getString(1);
if(str2.equals(dbans2))
{
mark=mark+5;
}
}
if(i==3)
{
String dbans3=rs.getString(1);
if(str3.equals(dbans3))
{

mark=mark+5;
}
}
i++;
}
if(mark>=10)
{
out.println("<h4>Your Mark Is : "+mark+"</h4>");
out.println("<h3>Congratulations....! You Are Eligible For The Next
Round...</h3>");
}
else
{
out.println("<h4>Your Mark is : "+mark+"</h4>");
out.println("<h3>Sorry....!! You Are Not Eligible For The Next
Round...</h3>");
}
%>
</body>
</html>
Database Name: examDB.accdb
Table Name: examTab

8) DISPLAYING STUDENT MARK LIST USING JSP


AIM:
To create a three tier application for displaying student mark list using
JSP and database.
ALGORITHM:
1.
Design the HTML page (stud.html) with the following

Create a form to get the input (Register Number) from the


user.

Set the URL of the server (marklist.jsp) as the value of the


action attribute.

Use submit button to invoke the server and send the form
data to the server.
2.

Create the JSP file with the following

Read the parameter value (Register Number) from the form


by using the method getParameter().

Retrieves the details from the database table with respect to


the form input.

Displays the mark list to the client as the response.


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="regno"/><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.*"%>
<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 str=request.getParameter("regno");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:markDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE
rno="+str);
while(rs.next())
{
%>
Register No:<%=rs.getObject(1)%><br/>
Name:<%=rs.getObject(2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Artificial Intelligence</td><td><
%=rs.getObject(3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><
%=rs.getObject(4)%></td></tr>
<tr><td>Advanced Computer Architecture</td><td><
%=rs.getObject(5)%></td></tr>

<tr><td>Principles of Compiler Design</td><td><


%=rs.getObject(6)%></td></tr>
<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>
<tr><td>Unix Internals</td><td><%=rs.getObject(8)%></td></tr>
</table>
<%
}
%>
<br/>
<a href="stud.html">Back</a>
</body>
</html>

9) DISPLAYING STUDENT DETAILS USING XML AND XSLT


AIM:
To write the programs using XML and XSLT for displaying student details.
ALGORITHM:
1.

Create an XML document (stud.xml) that contains the markup

tags such as <name>, <dept>, and <rno>.


2.

Create an XSL document (stud.xsl) that defines the style to

display an XML document.


3.

Associate style sheet (XSL) with XML using the markup <?

xml-stylesheet>
4.

Load the XML document (stud.xml) in the browser.

PROGRAM:
stud.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="stud.xsl"?>
<studInfo>
<stud>
<name>Name1</name>
<dept>CSE</dept>
<rno>97709104001</rno>
</stud>
<stud>
<name>Name2</name>
<dept>CSE</dept>
<rno>97709104002</rno>
</stud>
<stud>
<name>Name3</name>
<dept>CSE</dept>
<rno>97709104003</rno>
</stud>

</studInfo>

stud.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Details - Transformation</title>
</head>
<body>
<table border="1">
<caption>Student Details</caption>
<tr>
<th>Name</th><th>Department</th><th>Register No</th>
</tr>
<xsl:for-each select="/studInfo/stud">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="dept"/></td>
<td><xsl:value-of select="rno"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:transform>

10) DISPLAYING RANKING DETAILS USING XML AND XSLT


AIM:
To write the programs using XML and XSLT for displaying player ranking
details.
ALGORITHM:
1.

Create an XML document (rank.xml) that contains the markup

tags such as <rank>, <name>, and <country>.


2.

Create an XSL document (rank.xsl) that defines the style to

display an XML document.


3.

Associate style sheet (XSL) with XML using the markup <?

xml-stylesheet>
4.

Load the XML document (rank.xml) in the browser.

PROGRAM:
rank.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="rank.xsl"?>
<rankInfo>
<player>
<rank>1</rank>
<name>H.M.Amla</name>
<country>SA</country>
</player>
<player>
<rank>2</rank>
<name>A.B.De Villiers</name>
<country>SA</country>
</player>
<player>
<rank>3</rank>
<name>V.Kohli</name>
<country>IND</country>

</player>
<player>
<rank>4</rank>
<name>K.C.Sangakkara</name>
<country>SL</country>
</player>
<player>
<rank>5</rank>
<name>M.S.Dhoni</name>
<country>IND</country>
</player>
</rankInfo>

rank.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Student Details - Transformation</title>
</head>
<body>
<table border="1">
<caption>ICC Player Rankings</caption>
<tr>
<th>Rank</th><th>Name</th><th>Country</th>
</tr>
<xsl:for-each select="/rankInfo/player">
<tr>
<td><xsl:value-of select="rank"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="country"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:transform>

11) DISPLAYING CRICKET PLAYERS PROFILE USING AJAX


AIM:
To write a program using AJAX for displaying cricket players profile.
ALGORITHM:
1.

Create an XHTML document (AjaxDemo.html) with the

following.

Insert some images of cricket players.

Call the function getContent() with respect to the


onmouseover event. The function accepts an argument that is the
URL of another page contains the information about the player.

Call the function clearContent() with respect to the


onmouseout event.
2.

Within this XHTML document, insert AJAX based JavaScript

code with the following.

Create the object for ActiveXObject (for older versions of


browsers such as IE5 and IE6).

Create the object for XMLHttpRequest (for modern browsers


such as IE7+, Firefox, Chrome, Safari, and Opera).

AJAX send the request with the use of send() and open()
methods.

Receive the response with the use of responseText Property.

AJAX Call the function diplayProfile() with respect to the event


onreadystatechange.
PROGRAM:
AjaxDemo.html
<html>
<head>
<title>Ajax Demo...</title>
<style type="text/css">
.box{border:1px solid blue;padding:10px}
</style>
<script type="text/javascript">
var req;
function getContent(url)
{

if(window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}
req.onreadystatechange=diplayProfile;
req.open('POST',url,true);
req.send(null);
}
function diplayProfile()
{
if(req.readyState==4) {
document.getElementById('contentArea').innerHTML=req.responseText;
}

function clearContent()
{
document.getElementById('contentArea').innerHTML='';
}
</script>
</head>
<body bgcolor="cyan">
<h1>Mouse over the image for More Information</h1>
<img src="sachin.jpg" height="95" width="80"
onmouseover='getContent("sachin.html")'
onmouseout='clearContent()'/>
<img src="dravid.jpg" height="95" width="80"
onmouseover='getContent("dravid.html")'
onmouseout='clearContent()'/>
<img src="kohli.jpg" height="95" width="80"
onmouseover='getContent("kohli.html")' onmouseout='clearContent()'/>
<img src="raina.jpg" height="95" width="80"
onmouseover='getContent("raina.html")' onmouseout='clearContent()'/>
<img src="yuvi.jpg" height="95" width="80"
onmouseover='getContent("yuvi.html")' onmouseout='clearContent()'/>

<img src="veeru.jpg" height="95" width="80"


onmouseover='getContent("veeru.html")' onmouseout='clearContent()'/>
<img src="dhoni.jpg" height="95" width="80"
onmouseover='getContent("dhoni.html")' onmouseout='clearContent()'/>
<div class="box" id="contentArea"/>
</body>
</html>
sachin.html
<html>
<body>
<b>Full name:</b> Sachin Ramesh Tendulkar<br/><br/>
<b>Born:</b> April 24, 1973, Bombay (now Mumbai),
Maharashtra<br/><br/>
<b>Major teams:</b> India, Asia XI, Mumbai, Mumbai Indians,
Yorkshire<br/><br/>
<b>Nickname:</b> Tendlya, Little Master<br/><br/>
<b>Playing role:</b> Top-order batsman<br/><br/>
<b>Batting style:</b> Right-hand bat<br/><br/>
<b>Bowling style:</b> Right-arm offbreak, Legbreak googly
</body></html>
dravid.html
<html>
<body>
<b>Full name:</b> Rahul Sharad Dravid<br/><br/>
<b>Born:</b> January 11, 1973, Indore, Madhya Pradesh <br/><br/>
<b>Major teams:</b> India, Scotland, Asia XI, ICC World XI, Karnataka,
Kent,
Marylebone Cricket Club, Rajasthan Royals, Royal Challengers
Bangalore<br/><br/>
<b>Nickname:</b> The Wall<br/><br/>
<b>Playing role:</b> Top-order batsman<br/><br/>
<b>Batting style:</b> Right-hand bat<br/><br/>
<b>Bowling style:</b> Right-arm offbreak
</body>
</html>

kohli.html
<html>
<body>
<b>Full name:</b> Virat Kohli<br/><br/>
<b>Born:</b>November 5, 1988, Delhi<br/><br/>
<b>Major teams:</b>India, Delhi, India Red, India Under-19s, Royal
Challengers Bangalore<br/><br/>
<b>Playing role:</b>Middle-order batsman<br/><br/>
<b>Batting style:</b>Right-hand bat<br/><br/>
<b>Bowling style:</b>Right-arm medium
</body>
</html>
raina.html
<html>
<body>
<b>Full name:</b> Suresh Kumar Raina<br/><br/>
<b>Born:</b>November 27, 1986, Muradnagar, Ghaziabad, Uttar
Pradesh<br/><br/>
<b>Major teams:</b>India, Chennai Super Kings, India Blue, India
Under-19s, Indian Board President's XI, Rajasthan Cricket Association
President's XI, Uttar Pradesh, Uttar Pradesh Under-16s<br/><br/>
<b>Playing role:</b>Middle-order batsman<br/><br/>
<b>Batting style:</b>Left-hand bat<br/><br/>
<b>Bowling style:</b> Right-arm offbreak
</body>
</html>
yuvi.html
<html>
<body>
<b>Full name:</b>Yuvraj Singh<br/><br/>
<b>Born:</b>December 12, 1981, Chandigarh<br/><br/>
<b>Major teams:</b>India, Asia XI, Kings XI Punjab, Pune Warriors,
Punjab, Yorkshire<br/><br/>
<b>Playing role:</b>Middle-order batsman<br/><br/>

<b>Batting style:</b>Left-hand bat<br/><br/>


<b>Bowling style:</b>Slow left-arm orthodox
</body>
</html>
veeru.html
<html>
<body>
<b>Full name:</b>Virender Sehwag<br/><br/>
<b>Born:</b>October 20, 1978, Delhi<br/><br/>
<b>Major teams:</b>India, Asia XI, Delhi, Delhi Daredevils, ICC World
XI, India Blue, Leicestershire, Rajasthan Cricket Association President's
XI<br/><br/>
<b>Playing role:</b>Top-order batsman<br/><br/>
<b>Batting style:</b>Right-hand bat<br/><br/>
<b>Bowling style:</b>Right-arm offbreak
</body>
</html>
dhoni.html
<html>
<body bgcolor="cyan">
<b>Full name:</b> Mahendra Singh Dhoni<br/><br/>
<b>Born:</b>July 7, 1981, Ranchi, Bihar (now Jharkhand)<br/><br/>
<b>Major teams:</b>India, Asia XI, Bihar, Chennai Super Kings,
Jharkhand<br/><br/>
<b>Playing role:</b>Wicketkeeper batsman<br/><br/>
<b>Batting style:</b>Right-hand bat<br/><br/>
<b>Bowling style:</b>Right-arm medium
</body>
</html>

You might also like