Web technology lab manual

1
EX. NO: 1
DATE: IMAGE MAPPING USING HTML
AIM
To write the html code to perform the Image Mapping.
ALGORITHM
1. Start.
2. Write the code for tnmap.html.
3. Perform mapping using <MAP> tag.
4. Insert Hyperlink using <A href>.
5. Display Results.
6. Stop.
Required files to run:
1. maptn.jpg
2. salem.gif
3. erode.gif
4. covai.gif
5. tnmap.html
6. erode.html
7. salem.html
8. covai.html
PROGRAM:
File Name: tnmap.html

<html> <head> <title>TamilNadu</title> </head>

2
<body> <map name="tamilnadu">
<area href="salem.html" shape="circle" coords="78,78,10">
<area href="erode.html" shape="circle" coords="60,90,10">
<area href="covai.html" shape="circle" coords="50,120,10">
</map>
<img src="maptn.jpg" border="1" usemap="#tamilnadu"> </body> </html>
2. File Name: salem.html
<html><head><title>salem page </title></head>
<body> This is the Salem district in Tamilnadu. <br>
<img src="salem.gif"> <br>
Salem is surrounded by hills and is known for mango cultivation.<br>
There were eleven taluks in the district. They are:
<ol>
<li>Attur
<li>Edappadi
<li>Gangavalli
<li>Mettur
<li>Omalur
<li>Salem
<li>Salem South
<li>Salem West
<li>Sangagiri
<li>Valapady
<li>Yercaud
</ol>
<a href="tnmap.html">home </a> </body></html>

3
3. File Name: erode.html
<html><head><title>erode page </title></head>
<body> This is the Erode district in Tamilnadu. <br>
<img src="erode.gif"> <br>
Erode was the largest district by area in the state before the Formation of Tirupur District.<br>
There were six taluks in the district. They are:
<ol>
<li>Andiyur
<li>Bhavani
<li>Erode
<li>Gobichetipalayam
<li>Perundurai
<li>Sathyamangalam
</ol> <a href="tnmap.html">home </a> </body></html>
4. File Name: covai.html
<html><head><title>covai page </title></head>
<body> This is the coimbatore district in Tamilnadu.<br>
<br>
<img src="covai.gif">
<br> Coimbatore is the second largest city in Tamilnadu. There were ten taluks in the district. They are:
<ol>
<li>Annur
<li>Coimbatore (North)
<li>Coimbatore (South)

4
<li>Kinathukadavu
<li>Madukkarai
<li>Mettupalayam
<li>Perur
<li>Pollachi
<li>Sulur
<li>Valparai
</ol>
<a href="tnmap.html">home </a> </body></html>
OUTPUT

6

RESULT
Thus image mapping has been performed using HTML.

7
EX NO: 2
DATE: APPLYING INLINE CASCADING STYLE SHEETS TO A WEB PAGE
AIM
To demonstrate the use of style sheets in HTML.
ALGORITHM
1. Create a simple HTML page.
2. Write internal CSS using <style> tag in the same page become internal CSS.
3. Create another CSS file using <style> tag with extension .css file for external CSS file.
4. Include the external CSS file in HTML file.
5. Find the style changes on the page.
Required files to run
1. parliament.jpg
2. bharat.jpg
3. odissi.jpg
4. kathakali.jpg
5. mohini.jpg
6. liststyle.css
7. style1.html
Program
Filename: style1.html
<html> <head> <title>Inline Style Sheet</title>

<link rel="stylesheet" type="text/css" href="liststyle.css">

8

<style>
p.ex1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 46;
color: purple;
}
</style>

</head> <body bgcolor=gold> <center> <p class="ex1"> All About INDIA </p> </center>
<p> <ul class="a">
<li>India never invaded any country in her last 100000 years of history.
<li>When many cultures were only nomadic forest dwellers over 5000 years ago, Indians established
Harappan culture in Sindhu Valley (Indus Valley Civilization)
<li>The name 'India' is derived from the River Indus, the valleys around which were the home of the
early settlers. The Aryan worshippers referred to the river Indus as the Sindhu.
<li>The Persian invaders converted it into Hindu. The name `Hindustan' combines Sindhu and Hindu
and thus refers to the land of the Hindus.
<li>Chess was invented in India. </ul>

<p style="color:blue;text-align:center;"> The Parliament <br><img src="parliament.jpg" width=200
height=200> </p>

<font size="36px" face="Times New Roman" color=red> Culture Of India</font>
<p> <ul class="b">
<li> The culture of India has been shaped by the long history of India, its unique geography and the
absorption of customs, traditions and ideas from some of its neighbors as well as by preserving its
ancient heritages, which were formed during the Indus Valley Civilization and evolved further during
the Vedic age, rise and decline of Buddhism, Golden age, Muslim conquests and European colonization.

9
<li>India's great diversity of cultural practices, languages, customs, and traditions are examples of this
unique co-mingling over the past five millennia.
</ul> </p> <font size="36px" face="Times New Roman" color=red>Indian Classical
Dances</font></br>
<font size="4px" face="Times New Roman" color=blue>
The various dance forms of India are
<ol class="d">
<li> Bharatanatyam<img src="bharat.jpg" height=200 width=200>
<li>Odissi<img src="odissi.jpg" height=200 width=200>
<li>Kathakali<img src="kathakali.jpg" height=200 width=200>
<li> MohiniAttam<img src="mohini.jpg" height=200 width=200>
</ol>
</font> </body> </html>
2. File name: liststyle.css
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: square; }
ul.c {list-style-type: disc; }
ol.d {list-style-type: decimal;}
ol.e {list-style-type: lower-alpha;}
ol.f {list-style-type: lower-roman;}
</style>

10
OUT PUT
RESULT
Thus inline and external styles are applied to the html file and the program was executed
successfully.

11
EX NO:3 CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM
DATE: CONTROLS USING DHTML
AIM
To create a web form with client side validation using Java script.
ALGORITHM
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 HTML document by using <script>
element as follows: <script type="text/javascript">.
5. Add the necessary elements in formvalid.html file.
6. Create register.html file for displaying “register successful”.
7. Execute formvalid.html file in any of the web browsers that support javascript.
1. formvalid.html
2. register.html
PROGRAM
File Name:formvalid.html
<html> <head>
<title>Form Validation Using Java Script</title>
<script type="text/javascript">

12
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))

13
{
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>

14
<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>
File Name: register.html
<html> <head> <title>Registration Successful</title> </head>
<body> <h3>Registered Successfully.......!</h3>
</body> </html>
OUTPUT

15
RESULT
Thus the form validation program is executed successfully and the output is verified.

16
EX. NO:4
DATE: COLOR PALETTE USING JAVA
AIM
To write the java program to create applets incorporating the following features:
1. Create a color palette with matrix of buttons.
2. Set background and Foreground of the control text area by selecting a color from color palette.
3. 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 using java compiler as: javac CPalette.java
12. Create the <applet> code and save it as “ColorPalette.html”.
13. Run the HTML file ColorPalette.html in Internet Explorer.
1. CPalette.java
2. ColorPalette.html

17
PROGRAM
File Name :CPalette.java
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class CPalette extends Applet implements 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);

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

19
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)
{
ta.setForeground(Color.blue);
ta.setForeground(Color.black);
ta.setForeground(Color.red);
else
ta.setForeground(Color.cyan);
}
}

20
}
/* <applet code=”CPalette.class” width=”200” height=”200”> </applet> */
File Name: ColorPalette.html
<html>
<head>
<title>Color Palette Demonstration</title>
</head>
<body bgcolor="lightblue">
<applet code="CPalette.class" width="300" height="400">
</applet>
</body>
</html>
How to run
1. Select Start - > Search for cmd. Now a black screen is displayed.
2. Go to the folder where we are having jdk bin.
D:Program FilesJavajdk1.6.0bin>
3. Create the file named CPalette.java in ..bin folder.
4. Create the file named ColorPalette.html in the same folder.
5. Compile the java file using the command: javac CPalette.java.
6. Verify the CPalette.class file is generated or not using the command dir C*.*.
7. Open the ColorPalette.html using Internet Explorer browser.
8. Select the foreground and background color. Now you can see the change in the text box for color
changing.

21
OUTPUT
RESULT
Thus the colour palette is created and executed using Java applets.

22
EX NO: 5 INVOKING SERVLETS FROM HTML FORM
DATE:
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:
i.Insert a <form> that contains the fields such as text, password and one submit button.
ii.Set the URL of the server as the value of form‟s action attribute.
2. Write a java servlet program (server.java) with the following:
i.Define a class server that extends the property of the class GenericServlet.
ii.Handle the request from the client by using the method service() of GenericServlet class.
iii.Get the parameter names from the HTML form by using the method getParameterNames().
iv.Get the parameter values from the HTML forms by using the method getParameter().
v.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.
1. client.html
2. server.java

23
PROGRAM
File Name: 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>

24
File Name: 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();
}
}

26
RESULT
Thus the program for invoking servlets using HTML is executed successfully and verified.

27
EX NO: 6 AUTHENTICATION AND PERSONAL DETAILS
DATE: FORM FILLING USING SERVLETS
AIM
To write a program in Java servlet to accept the personal information of the user after
authentication and display the users information.
ALGORITHM
1. Create a file named index.html for which the user can fill their username and password for
authentication.
2. If it is the authorized user, it display NewServlet2 file. Otherwise, it display as “Not authorized user”
and exit.
3. In the NewServlet2 file, the user can be redirected to formfill.html.
4. In the formfill.html file, the user can fill his/her personal information and then while pressing submit
button, NewServlet1 file will be displayed.
5. NewServlet1 file displays the user‟s personal information in the form of web page.
1. index.html
2. formfill.html
3. NewServlet1.java
4. NewServlet2.java
PROGRAM
File: index.html
<html> <body>
<form method="post" action="NewServlet2">
Enter your username: <input type="text" name="t1"><br>
Enter your password: <input type="password" name="t2"><br>

28
<input type="submit" value="OK">
</form> </body> </html>
File: Formfill.html
<html> <head> <title>TODO supply a title</title> </head>
<body>
<form method="post" action="NewServlet1">
Enter your Name: <input type="text" name="t1"><br>
Enter your age: <input type="text" name="t2"><br>
Select your Degree:<br>
<input type="radio" name="r1" value="B.E.,">Engineering<br>
<input type="radio" name="r1" value="B.Sc.,">Science<br>
<input type="radio" name="r1" value="M.B.B.S.,">Medicine<br>
<input type="submit" value="OK">
</form> </body> </html>
File: NewServlet1.java
import java.io.*;
import javax.servlet.http.*;
public class NewServlet1 extends HttpServlet
{
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{

29
response.setContentType("text/html");
try (PrintWriter out = response.getWriter())
{
String name = request.getParameter("t1");
String age= request.getParameter("t2");
String str = request.getParameter("r1");
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet NewServlet1</title>");
out.println("</head>");
out.println("<body>");
if(name!=null)
{
out.println("Welcome to the website, <b>"+name+"</b><br>");
if(age!=null)
out.println("Your age is "+age+"<br>");
if(str!=null)
out.println("your qualification is "+str);
}
else
out.println("Unfilled Information..");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)

30
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
}
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
File: NewServlet2.java
import java.io.*;
import javax.servlet.http.*;
@WebServlet(urlPatterns = {"/NewServlet2"})
public class NewServlet2 extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
try (PrintWriter out = response.getWriter()) {
String str1 = request.getParameter("t1");
String str2 = request.getParameter("t2");
if(str1.equals("india") && (str2.equals("india")))

31
{
out.println("<h1>Logged in Successfully..." + "</h1>");
out.println("<a href=formfill.html>click here to enter personal details</a>");
out.println("</body>");
out.println("</html>");
}
else
{
out.println("Username or password is not correct");
out.println("</body>");
out.println("</html>");
}
}
}
@Override

32
protected void doGet(HttpServletRequest request, HttpServletResponse response)
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
}
@Override
public String getServletInfo() {
return "Short description";
}
}
OUTPUT

34
RESULT
Thus the program for authentication and personal information form filling is executed using java
servlets successfully and output is verified.

35
EX NO:7 JAVA PROGRAM FOR APPLET-SERVLET COMMUNICATION
DATE:
AIM
To write a java program for applet-servlet communication.
ALGORITHM
1. Create a Java Application using File -> New Project -> Categories-Java, Project-Java Application.
Give the Name of the Project as „MyJavaApplication‟ and then click Finish.
2. Create an applet file by right click on the MyJavaApplication project, select New-> Applet. Give the
name of the applet as MyAddApplet.
3. Copy the MyAddApplet code in MyAddApplet.java file.
4. Run the Project.
5. Now we will get the Addition of two numbers applet.
6. Create a New Project by selecting File -> New Project. Give the name of the project as
„MyWebApplication‟.
7. Create a jar file for our applet file by right click on the MyWebApplication project, select Properties,
in the categories, select Packaging and click Add Project to add the created MyJavaApplication project
in the form of jar file. After adding, the jar file will be seen in build/web folder.
8. In the MyWebApplication, index.html file, add the following code within the body section:
<h1> Web Application using NetBeans IDE</h1>
<applet code="MyAddApplet" archive="MyJavaApplication.jar" width="400" height="400" />
</applet>
9. Run the project.
1. index.html in MyWebApplication project
2. MyAddApplet.java in MyJavaApplication project
3. MyJavaApplication.jar

36
PROGRAM
MyAddApplet.java
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class MyAddApplet extends Applet implements ActionListener
{
Button b1;
TextField t1,t2,t3;
Label l1;
public void init()
{
setLayout(new FlowLayout(FlowLayout.LEFT));
t1 = new TextField();
l1 = new Label("Add Two Numbers");
add(l1);
add(t1);
add(t2);
b1=new Button("Add");
add(b1);
add(t3);
setVisible(true);
}

37
public void actionPerformed(ActionEvent ae)
{
int a,b,result;
String str;
{
str = t1.getText();
a = Integer.parseInt(str);
str = t2.getText();
b = Integer.parseInt(str);
result = a + b;
t3.setText(String.valueOf(result));
}
}
}

38
OUTPUT
RESULT
Thus the program for applet-servlet communication is executed successfully and verified.

39
EX.NO:8
DATE: ONLINE SHOPPING USING JSP
AIM
To write an online book shopping application using JSP.
ALGORITHM
1. Create an index.html file that contains the necessary books to be displayed for purchasing within the
form element. Add Submit button within the form. Add the action as books.jsp for the form element.
2. Create a new jsp file named books.jsp.
3. Calculate the total cost for selected books. Display the cost of book purchase.
4. Pass the cost to sports.jsp using hidden form field included within the form element in books.jsp file.
5. Create a new jsp file named sports.jsp.
6. Calculate the total cost of purchasing the sports and books.
7. Display the total cost of purchasing.
8. Run the web application.
Required programs to run:
1. index.html
2. books.jsp
3. sports.jsp
PROGRAM
index.html
<html> <head> <title>Online shopping - Books</title> </head>
<body>
<form method="post" action="books.jsp">
<h3>Select the books in the following list: <br>

40
<select name="s1" multiple>
<option value="1">Java Unleashed
<option value="2">Java Server Programming
<option value="3">JSP Bible
<option value="4">Java Servlets
</select> <br>
<input type="submit" value="OK"> <br> </form> </body> </html>
books.jsp
<html> <head> <title>Online Shopping - Sports items</title> </head>
<body>
<% int cost=0;
String s[] = request.getParameterValues("s1");
for(int i=0;i<s.length;i++)
{
if(s[i].equals("1"))
cost += 200;
else if(s[i].equals("2"))
cost += 300;
cost += 350;
cost += 300;
}
%>

41
<h3> You have selected <%= s.length %> Books. <br>
The cost is <%= cost %></h3>
<form method="post" action="sports.jsp">
<input type="hidden" name="h1" value='<%=cost%>'> <br>
Select the sports items: <br>
<select name="s1" multiple>
<option value="1">Ball
<option value="2">Bat
<option value="3">Carrom Board
<option value="4">Chess Board
</select> <br> <input type="submit" value="OK"> </form> </body></html>
sports.jsp
<html> <head> <title>Onlien Shopping - Final Cost </title> </head>
<body>
<% String s = request.getParameter("h1");
String s1[] = request.getParameterValues("s1");
int cost = Integer.parseInt(s);
%>
<h3> You have selected <%=s1.length%> Sport items. <br>
<%
for(int i=0;i<s1.length;i++)
{
if(s1[i].equals("1"))
cost += 100;
else if(s1[i].equals("2"))
cost += 300;

42
cost += 1500;
cost += 500;
}
%>
The total cost of purchase is: <%=cost%> </h3> </body> </html>
OUTPUT

44
RESULT
Thus online shopping program is created using JSP and executed successfully.
EX NO:9 DISPLAYING CRICKET PLAYERS PROFILE USING AJAX

45
DATE:
AIM
To write a program using Ajax for displaying cricket players profile.
ALGORITHM
1. Create an XHTML document (AjaxDemo.html) with the following:
i. Insert some images of cricket players.
ii. 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.
iii. Call the function clearContent() with respect to the onmouseout event.
2. Within this XHTML document, insert AJAX based JavaScript code with the following:
i. Create the object for ActiveXObject (for older versions of browsers such as IE5 and IE6).
ii. Create the object for XMLHttpRequest (for modern browsers such as IE7+, Firefox, Chrome, Safari,
and Opera).
iii. AJAX send the request with the use of send() and open() methods.
iv. The response is obtained with the use of responseText Property.
v. AJAX Call the function diplayProfile() with respect to the event onreadystatechange.
3. Run the program.
1. Ajaxdemo.html
2. sachin.html
3. dravid.html
4. kohli.html
5. raina.html

46
6. yuvi.html
7. veeru.html
8. dhoni.html
9. sachin.jpg
10. dravid.jpg
11. kohli.jpg
12. raina.jpg
13. yuvi.jpg
14. veeru.jpg
15. dhoni.jpg
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);

47
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")'
<img src="kohli.jpg" height="95" width="80" onmouseover='getContent("kohli.html")'
<img src="raina.jpg" height="95" width="80" onmouseover='getContent("raina.html")'
<img src="yuvi.jpg" height="95" width="80" onmouseover='getContent("yuvi.html")'
<img src="veeru.jpg" height="95" width="80" onmouseover='getContent("veeru.html")'
<img src="dhoni.jpg" height="95" width="80" onmouseover='getContent("dhoni.html")'
<div class="box" id="contentArea"/> </body> </html>

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

49
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>Batting style:</b>Right-hand bat<br/><br/>
<b>Bowling style:</b>Right-arm offbreak </body> </html>

50
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>
OUTPUT
RESULT
Thus the program of displaying cricket players information using Ajax is successfully executed
and the output is verified.

51
EX NO:10 STUDENT RANKING DETAILS USING XML AND XSLT
DATE:
AIM
To write the program using XML and XSLT for displaying student ranking details based on
CGPA values.
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>. Add the necessary
sorting markup in XSL file.
4.Load the XML document (stud.xml) in the browser.
1. stud.xml
2. stud.xsl
PROGRAM
File Name:stud.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="stud.xsl"?> <studInfo>
<stud> <name>Amala</name> <dept>CSE</dept> <rno>97709205001</rno>
<cgpa>8.5</cgpa></stud>
<stud> <name>Deepak</name> <dept>CSE</dept> <rno>97709205002</rno>
<stud> <name>Sangeetha</name> <dept>CSE</dept> <rno>97709205003</rno>

52
<stud> <name>Usha</name> <dept>CSE</dept> <rno>97709205004</rno> <cgpa>7.5</cgpa></stud>
</studInfo>
stud.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body>
<h2>Students Information</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>name</th>
<th>dept</th>
<th>rno</th>
<th>cgpa</th>
</tr>
<xsl:for-each select="studInfo/stud">
<xsl:sort select="cgpa"/>
<tr>
<td><xsl:value-of select="name" /></td>
<td><xsl:value-of select="dept"/></td>
<td><xsl:value-of select="rno"/></td>
<td><xsl:value-of select="cgpa"/></td> </tr>
</xsl:for-each>

53
</table> </body> </html>
</xsl:template>
</xsl:stylesheet>
OUTPUT
RESULT
Thus the program for student information is displayed with order of CGPA using XML and
XSLT is successfully executed and the output is verified.

54
EX NO:10 PROGRAM TO ACCESS THE INFO FROM DATABASE USING JDBC
DATE: CONNECTIVITY
AIM
To write a java program to access the information from Database using JDBC Connectivity.
ALGORITHM:
1. Start the process
2. Install the JDBC Driver using forName () method
3. Create a table with required fields.
4. Create a data source using ODBC Data source in windows.
5. Establish connection to the Data source using getConnection() Method.
6. Create a statement object in the above connection object in order to send query to the table.
7. Send the query to the table using executeQuery() method.
8. Store the results in the ResultSet object.
9. Display the result on the screen.
10. Stop the process.
Required files:
1. stud.mdb
2. odbctest.java
PROGRAM
import java.sql.*;
class odbctest
{

55
public static void main(String a[])
{
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection c=DriverManager.getConnection(
"jdbc:odbc: students”);
Statement s=c.createStatement();
ResultSet rs;
String q="select * from stud";
rs=s.executeQuery(q);
System.out.println("NametttBranchttClassttGrade ");
System.out.println("----ttt------ tt-----tt-----");
while(rs.next())
{
System.out.print(rs.getString(1)+"tt");
System.out.println(rs.getString(4)+"tt");
}
}catch(Exception e)
{ System.out.println("Error"+e); }
}
}

56
OUTPUT
RESULT
Thus the database connectivity is done and the program is executed for selecting the students
from students data source successfully.

Web technology lab manual

More Related Content

What's hot

Viewers also liked

Similar to Web technology lab manual

Recently uploaded

Web technology lab manual