web technology lab manual and programs

WEB TECHNOLOGY LAB MANUAL

1.AIM:

To create a web page which includes a map and display the related information when a hot spot is clicked in the map

ALGOTITHM:

Step 1: Create a html file with map tag

Step 2: Set the source attribute of the img tag to the location of the image and also

set the usemap attribute

Step 3: Specify an area with name, shape and href set to the appropriate values

Step 4: Repeat step 3 as many hot spots you want to put in the map

Step 5: Create html files for each and every hot spots the user will select

PROGRAM:

ImageMap.html

<HTML>

<HEAD>

<TITLE>Image Map</TITLE>

</HEAD>

<BODY><img src="india_map.jpg" usemap="#metroid" ismap="ismap" >

<map name="metroid" id="metroid">

<area href='TamilNadu.html' shape='circle' coords='175,495,30' title='TamilNadu'/>

<area href = "Karnataka.html" shape = "rect" coords = "100,400,150,450" title = "Karnataka" />

<area href = "AndhraPradesh.html" shape = "poly" coords = "150, 415, 175,348,265,360,190,420,190,440" title = "Andhra Pradesh" />

<area href = "Kerala.html" shape = "poly" coords = "108,455,150,515,115,490,148,495,110,448,155,501" title = "Kerala" />

</map>

</BODY>

</HTML>

TamilNadu.html

<HTML>

<HEAD>

<TITLE>About Tamil Nadu</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Tamil Nadu</H1></CENTER>

<HR>

<UL>

<LI>Area : 1,30,058 Sq. Kms.</LI>

<LI>Capital : Chennai</LI>

<LI>Language : Tamil</LI>

<LI>Population : 6,21,10,839</LI>

</UL><hr>

<a href='ImageMap.html'>India Map</a>

</BODY>

</HTML>

Karnataka.html

<HTML>

<HEAD>

<TITLE>About Karnataka</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Karnataka</H1></CENTER>

<HR>

<UL>

<LI>Area : 1,91,791 Sq. Kms</LI>

<LI>Capital : Bangalore</LI>

<LI>Language : Kannada</LI>


</UL>

<hr>


</BODY>

</HTML>

AndhraPradesh.html

<HTML>

<HEAD>

<TITLE>About Andhra Pradesh</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Andhra Pradesh</H1></CENTER>

<HR>

<UL>

<LI>Area : 2,75,068 Sq. Kms</LI>

<LI>Capital : Hyderabad</LI>

<LI>Language : Telugu</LI>


</UL><hr>


</BODY>

</HTML>

Kerala.html

<HTML>

<HEAD>

<TITLE>About Kerala</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Kerala</H1></CENTER>

<HR>

<UL>

<LI>Area : 38,863 Sq. Kms.</LI>

<LI>Capital : Thiruvananthapuram</LI>

<LI>Language : Malayalam</LI>


</UL><hr>


</BODY>

</HTML>

OUTPUT:

2.AIM:

To create a web page that displays college information using various style sheet

ALGORITHM:

Step 1: Create a web page with frame sets consisting two frames

Step 2: In the first frame include the links

Step 3: In the second frame set display the web page of the link

Step 4: create a external style sheets

Step 5: create a inline and internal style sheets and make it link to the

external

style sheets

PROGRAM:

XYZ.CSS:

h3{font-family:arial;font-size:20;color:cyan}

table{border-color:green}

td{font-size:20pt;color:magenta}

HTML CODE:

<html>

<head><h1><center>ALL STYLE SHEETS</center></h1>

<title>USE of INTERNAL and EXTERNAL STYLESHEETS

</title>

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

<style type="text/css">

.vid{font-family:verdana;font-style:italic;color:red;text-align:center}

.ani{font-family:tahoma;font-style:italic;font-size:20;text-align:center;}

font{font-family:georgia;color:blue;font-size:20}

ul{list-style-type:circle}

</style>

</head>

<body>

<ol style="list-style-type:lower-alpha">

<b>A.C.S GROUP OF COLLEGES</b><br><br><br>

<li>Raja Rajeswari Engineering College

<li>Dr. M.G.R University and Research Institute

<li>Raja Rajeswari College of Engineering,Bangalore

<li>Tamilnadu College of Arts and Science

</ol>

<p style="font-size:20pt;color:purple">A.C.S GROUP OF COLLEGES</p>

<p class="ani">A.C.S Group of colleges is owned by A.C.Shanmugam.<br>It is approved by

AICTE(All India Council for Technical Education).

It is affliated to Anna University.<br></p>

<h2 class="vid">Raja Rajeswari Engineering College</h2>

<br>

<font>It is an ISO certified Institution</font><br>

<br>

<font>

<h2>List of Courses offered</h2>

<ul>

<li>Computer Science and Engineering</li>

<li>Ece</li>

<li>mech</li>

<li>eee</li>

</ul>

</font>

<h3>Results of cse students</h3>

<table width="100%" cellspacing="2" cellpadding="2" border="5">

<tr>

<th>S.NAME</th>

<th>MARKS</th>

<th>RESULT</th>

</tr>

<tr>

<td align="center">Dinesh</td>

<td align="center">100</td>

<td align="center">pass</td>

</tr>

<tr>

<td align="center">Bala</td>



</tr>

<tr>

<td align="center">Gopi</td>



</tr>

</table>

</body>

</html>

OUTPUT:

3.AIM:

To create a Client Side Scripts for Validating Web Form Controls using DHTML

PROGRAM:

<html>

<head>

<title>A Simple Form with JavaScript Validation</title>

<script type="text/javascript">



</script>

</head>

<body bgcolor="#FFFFFF">

<form name="contact_form" method="post"action="/cgi-bin/articles/development/javascript/form-validation-with-javascript/contact_simple.cgi"onSubmit="return validate_form ( );">

<h1>Please Enter Your Name</h1>

<p>Your Name: <input type="text" name="contact_name"></p><p><input type="submit" name="send" value="Send Details"></p>

</form>

</body>

</html>

4.AIM:

write a java program to create applets with the following features

Create a color palette with matrix of buttons.

a. Set background and foreground of the control text area by

selecting a color from color palette.

b. In order to select foreground or background use checkbox

controls as radio buttons.

c. To set background images.

ALGORITHM:

Step 1: Import all necessary packages and classes

Step 2: Define a class that extends applet and implements action listener and item listener

Step 3: Declare an array of buttons to set colors, two checkboxes for foreground

and background colors

Step 4: Declare a text area to hold the text, a checkbox group for checkboxes

Step 5: Add the array of buttons in the init function.

Step 6: In the actionPerformed() method, do the following:

i) Get the action command in the string, color

ii) If foreground is checked then set the foreground color to the selected color

iii) If background is checked then set the background color to the selected color

PROGRAM:

import java.awt.*;

import java.awt.event.*;

import java.applet.*;

/*<applet code="exp" width=400 height=400>

</applet>*/

public class exp extends Applet implements ItemListener

{

int currcolor=5;

int flag=1;

String text="Click any of the buttons";

Button buttons[]=new Button[5];

String colours[]={"Red","Blue","Green","Yellow","Magenta"};

Image img;

CheckboxGroup cbg=new CheckboxGroup();

Checkbox box1=new Checkbox("Background Color",cbg,true);

Checkbox box2=new Checkbox("Text Color",cbg,false);

Checkbox box3=new Checkbox("Loading Image",cbg,false);

public void init()

{

for(int i=0;i<5;i++)

{

buttons[i]=new Button(" ");

add(buttons[i]);

}

buttons[0].setBackground(Color.red);

buttons[1].setBackground(Color.blue);

buttons[2].setBackground(Color.green);

buttons[3].setBackground(Color.yellow);

buttons[4].setBackground(Color.magenta);

add(box1);

add(box2);

add(box3);

box1.addItemListener(this);



}

public void itemStateChanged(ItemEvent ev)

{

if(box1.getState()==true)

flag=1;

else if(box2.getState()==true)

{

text="Default color is black";

flag=2;

}

else if(box3.getState()==true)

{

img=getImage(getDocumentBase(),"Water lilies.jpg");

flag=3;

}

repaint();

}

public void paint(Graphics g)

{

if(flag==2)

{

g.drawString(text,30,100);

switch(currcolor)

{

case 0:

g.setColor(Color.red);

break;

case 1:

g.setColor(Color.blue);

break;

case 2:

g.setColor(Color.green);

break;

case 3:

g.setColor(Color.yellow);

break;

case 4:

g.setColor(Color.magenta);

break;

case 5:

g.setColor(Color.black);

break;

}


}

else if(flag==1)

{


switch(currcolor)

{

case 0:

setBackground(Color.red);

break;

case 1:

setBackground(Color.blue);

break;

case 2:

setBackground(Color.green);

break;

case 3:

setBackground(Color.yellow);

break;

case 4:

setBackground(Color.magenta);

break;

case 5:

setBackground(Color.white);

break;

}

}

else if(flag==3)

{

g.drawImage(img,20,90,this);

}

}

public boolean action(Event e,Object o)

{

for(int i=0;i<5;i++)

{

if(e.target==buttons[i])

{

currcolor=i;

text="You have chosen "+colours[i];

repaint();

return true;

}

}

return false;

}

}

OUTPUT:

C:\jdk1.6.0_05\bin>javac ColorPalette.java

C:\jdk1.6.0_05\bin>appletviewer ColorPalette.java

5.AIM:

To write html and servlet to demonstrate invoking a servlet from a html.

ALGORITHM:

Client:

Step1: In index.jsp on the client side declare the contents that you like to transfer

to the server using html form and input type tags.

Step2: create a submit button and close all the included tags.

Server:

Step1: In the servlet side using the parameter request get the stings declared in the client side (requst.getparameter)

Step2: Include necessary html coding that helps to display the content

PROGRAM:

Sevlet Code:

import java.io.*;

import java.util.*;

import javax.servlet.*;

public class PostParam extends GenericServlet

{

public void service(ServletRequest request,ServletResponse response) throws ServletException,IOException

{

PrintWriter pw = response.getWriter();

Enumeration e = request.getParameterNames();

while(e.hasMoreElements())

{

String pname = (String)e.nextElement();

pw.print(pname + " = ");

String pvalue = request.getParameter(pname);

pw.println(pvalue);

}

pw.close();

}

}

HTML CODE:

<HTML>

<head>

<TITLE>INVOKING SERVLET FROM HTML</TITLE>

</head>

<BODY>

<CENTER>

<FORM name = "PostParam" method = "Post" action="http://localhost:8080/servlets-examples/servlet/PostParam">

<TABLE>

<tr>

<td><B>Employee </B> </td>

<td><input type = "textbox" name="ename" size="25"

value=""></td>

</tr>

<tr>

<td><B>Phone </B> </td>

<td><input type = "textbox" name="phoneno" size="25"

value=""></td>

</tr>

</TABLE>

<INPUT type = "submit" value="Submit">

</FORM>

</CENTER>

</body>

</html>

OUTPUT:

6.AIM:

To write java servlet programs to conduct online examination and to display student mark list available in a database

ALGORITHM:

Client:

Step1: In index.html on the client side declare the contents that you like to

transfer to the server using html form and input type tags.


Servlet:

Step 1: Import all necessary packages

Step 2: Define a class that extends servlet

Step 3: In the doPost() method, do the following:

i) Set the content type of the response to "text/html"

ii) Create a writer to the response

iii) Get a paratmeter from the request

iv) If its value is equal to right answer then add 5 to mark variable

v) Similarly repeat step

vi) for all parameters

vii) Display the result in an html format using the writer

STUDENT MARK LIST DATABASE

Step 1: Import necessary to java packages and javax packages and classes

Step 2: Create a class that extends HttpServlet and implements ServletException

and IOException

Step 3: In the doGet() method, do the following:

i) Create a PrintWriter object

ii) Open a connection with the data source name

iii) Write a sql query and execute to get the resultset

iv) Display the resultset information in html form

PROGRAM:

SERVLET CODE:

import java.io.*;

import java.sql.*;


import javax.servlet.http.*;

public class StudentServlet3 extends HttpServlet

{

String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5;

int Total=0;

Connection connect;

Statement stmt=null;

ResultSet rs=null;

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

try

{

String url="jdbc:odbc:NEO";

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

connect=DriverManager.getConnection(url," "," ");

message="Thank you for participating in online Exam";

}

catch(ClassNotFoundException cnfex){

cnfex.printStackTrace();

}

catch(SQLException sqlex){

sqlex.printStackTrace();

}

catch(Exception excp){

excp.printStackTrace();

}

Seat_no=request.getParameter("Seat_no");

Name=request.getParameter("Name");

ans1=request.getParameter("group1");





if(ans1.equals("True"))

Total+=2;

if(ans2.equals("False"))

Total+=2;

if(ans3.equals("True"))

Total+=2;


Total+=2;


Total+=2;

try

{

Statement stmt=connect.createStatement();

String query="INSERT INTO student("+"Seat_no,Name,Total"+") VALUES('"+Seat_no+"','"+Name+"','"+Total+"')";

int result=stmt.executeUpdate(query);

stmt.close();

}catch(SQLException ex){

}

response.setContentType("text/html");

PrintWriter out=response.getWriter();

out.println("<html>");

out.println("<head>");

out.println("</head>");

out.println("<body bgcolor=cyan>");

out.println("<center>");

out.println("<h1>"+message+"</h1>\n");

out.println("<h3>Yours results stored in our database</h3>");

out.print("<br><br>");

out.println("<b>"+"Participants and their Marks"+"</b>");

out.println("<table border=5>");

try

{


String query="SELECT * FROM student";

rs=stmt.executeQuery(query);

out.println("<th>"+"Seat_no"+"</th>");

out.println("<th>"+"Name"+"</th>");

out.println("<th>"+"Marks"+"</th>");

while(rs.next())

{

out.println("<tr>");

out.print("<td>"+rs.getInt(1)+"</td>");

out.print("<td>"+rs.getString(2)+"</td>");


out.println("</tr>");

}

out.println("</table>");

}

catch(SQLException ex){ }

finally

{

try

{

if(rs!=null)

rs.close();

if(stmt!=null)

stmt.close();

if(connect!=null)

connect.close();

}

catch(SQLException e){ }

}

out.println("</center>");

out.println("</body></html>");

Total=0;

} }

HTML CODE:

<html>

<head><title>Database Test</title></head>

<body>

<center>

<h1>Online Examination</h1>

</center>

<form action="StudentServlet3.view" method="POST">

<div align="left"><br></div>

<b>Seat Number:</b> <input type="text" name="Seat_no">

<div align="Right">

<b>Name:</b> <input type="text" name="Name" size="50"><br>

</div>

<br><br>

<b>1. Every host implements transport layer.</b><br/>

<input type="radio" name="group1" value="True">True

<input type="radio" name="group1" value="False">False<br>

<b>2. It is a network layer's responsibility to forward packets reliably from source to destination</b><br/>



<b>3. Packet switching is more useful in bursty traffic</b><br/>



<b>4. A phone network uses packet switching</b><br/>



<b>5. HTML is a Protocol for describing web contents</b><br/>



<br><br><br>

<center>

<input type="submit" value="Submit"><br><br>

</center>

</form>

</body>

</html>

OUTPUT:

(ii)STUDENT MARKLIST USING SERVLET

AIM:

To create a three tier application for displaying the student marklist

ALGORITHM:

Client:

Step1: In index.html on the client side declare the contents that you like to

transfer to the server using html form and input type tags.


Servlet:

Step 1: Import all necessary packages

Step 2: Define a class that extends servlet

Step 3: In the doPost() method, do the following:

i) Set the content type of the response to "text/html"

ii) connect with the database which has the student marklist

iii) query the data to the database

Step 4: Display the student marklist

PROGRAM:

SERVLET CODE:

import java.io.*;

import java.sql.*;


import javax.servlet.http.*;

public class serv extends HttpServlet

{

String message,Reg_no;

Connection connect;

Statement stmt=null;

ResultSet rs=null;

public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException

{

try

{

String url="jdbc:odbc:NEO";

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

connect=DriverManager.getConnection(url," "," ");

message="Mark List";

}

catch(ClassNotFoundException cnfex){

cnfex.printStackTrace();

}

catch(SQLException sqlex){

sqlex.printStackTrace();

}

catch(Exception excp){

excp.printStackTrace();

}

Reg_no=request.getParameter("regno");

response.setContentType("text/html");

PrintWriter out=response.getWriter();

out.println("<html>");

out.println("<head>");

out.println("</head>");

out.println("<body bgcolor=cyan>");

out.println("<center>");

out.println("<h1>"+message+"</h1>\n");

try

{


String query=new String("SELECT * FROM MarkList WHERE regno= "+Reg_no);

rs=stmt.executeQuery(query);

boolean b=rs.next();

out.println("Regsitration No:"+rs.getInt(1));

out.println("<br>"+"Name:"+rs.getString(2));

out.println("<table border=5>");

out.println("<th>"+"cs01"+"</th>");

out.println("<th>"+"cs02 "+"</th>");

out.println("<th>"+"cs03"+"</th>");

out.println("<th>"+"status"+"</th>");

while(b)

{

out.println("<tr>");





out.println("</tr>");

b=rs.next();

}

out.println("</table>");

}

catch(SQLException ex){

out.println("error in connection");

}

finally

{

try

{

if(rs!=null)

rs.close();

if(stmt!=null)

stmt.close();

if(connect!=null)

connect.close();

}

catch(SQLException e){ }

}

out.println("</center>");

out.println("</body></html>");

}

}

HTML CODE:

<html>

<head><title> mark sheet</title></head>

<body>

<center>

<h1>Student Mark Sheet</h1>

</center>

<form action="serv" method="POST">

registration number:<input type="text" name="regno">

<input type="submit" value="Submit"><br><br>

</form>

</body>

</html>

OUTPUT:

9.AIM:

Write a Programs using AJAX

PROGRAM:

<html>

<head>

<script type="text/javascript">

function loadXMLDoc()

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

</html>

OUTPUT:

Let AJAX change this text

AJAX is not a new programming language.

AJAX is a technique for creating fast and dynamic web pages.

web technology lab manual and programs

Documents

public void dopost

input type tags

client side declare

statement stmt connect

statement stmt null

resultset rs null

included tags

content type