Web Technology

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>
<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>
<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>
<ht style="font-family:arial;font-align:center;color:violet">
<center>DHANALAKSHIMI COLLEGE OF ENGINEERING</center></h1>
<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>
<br>
<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
{
font-family:times new roman;
font-size:20pt;
color:blue;
}
h3
{
font-family:Comic Sans MS;
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>
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.setBackground(Color.black);
b3=new Button();
add(b3);
b3.setBounds(50,95,50,25);
b3.setBackground(Color.red);
b4=new Button();
add(b4);
b4.setBounds(120,95,50,25);
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);
ta.setBackground(Color.red);
else
ta.setBackground(Color.cyan);
}
if(s==2)
{
if(ae.getSource()==b1)
ta.setForeground(Color.blue);
ta.setForeground(Color.black);
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);
}
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>
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>
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");
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)
{
{
mark=mark+5;
}
}
if(i==3)
{
{
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>
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/>

<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>
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><
<tr><td>Advanced Computer Architecture</td><td><
<tr><td>Principles of Compiler Design</td><td><

<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
<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-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
<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>
.box{border:1px solid blue;padding:10px}
</style>
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>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>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>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>Bowling style:</b>Right-arm medium
</body>
</html>

Web Technology

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Technology

Enviado por

Direitos autorais:

Formatos disponíveis

EXP NO 1:

CASCADING STYLE SHEETS

3)WEB FORM VALIDATION USING JAVA SCRIPT

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

COLOR PALETTE USING JAVA

Create a color palette with matrix of buttons.

In order to select Foreground or background use check box control

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

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

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

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

5) INVOKING SERVLETS FROM HTML FORM

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

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

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

Define a class server that extends the property of the class

Handle the request from the client by using the method

Send the response to the client by using the method of

Compile the java source code (server.java).

Run the HTML program (client.html).

Submit the form data to the server.

6) INVOKING SERVLETS FROM APPLETS

Define the class AppletClient which extends the property of

Make the button to listen the action by using the method

Define the object for AppletContext and display the response

public void init()

7) ONLINE EXAMINATION USING JSP

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

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

For each correct answer increment the mark by 5.

Server displays the mark and result to the client as a

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

8) DISPLAYING STUDENT MARK LIST USING JSP

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

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

Create the JSP file with the following

Read the parameter value (Register Number) from the form

Retrieves the details from the database table with respect to

Displays the mark list to the client as the response.

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

9) DISPLAYING STUDENT DETAILS USING XML AND XSLT

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

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

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

display an XML document.

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

10) DISPLAYING RANKING DETAILS USING XML AND XSLT

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

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

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

display an XML document.

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

11) DISPLAYING CRICKET PLAYERS PROFILE USING AJAX

Create an XHTML document (AjaxDemo.html) with the

Insert some images of cricket players.

Call the function getContent() with respect to the

Call the function clearContent() with respect to the