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>

</map>

</BODY>

</HTML>

TamilNadu.html

<HTML>

<HEAD>

<TITLE>About Tamil Nadu</TITLE>

</HEAD>

<BODY>

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

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

<LI>Capital : Bangalore</LI>

<LI>Language : Kannada</LI>

</BODY>

</HTML>

AndhraPradesh.html

<HTML>

<HEAD>

<TITLE>About Andhra Pradesh</TITLE>

</HEAD>

<BODY>

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

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

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

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

<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

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

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

<font>

<h2>List of Courses offered</h2>

<li>Computer Science and Engineering</li>

</font>

<h3>Results of cse students</h3>

<th>MARKS</th>

<th>RESULT</th>

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

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

function validate_form ( ){

valid = true;

if ( document.contact_form.contact_name.value == "" ) { alert ( "Please fill in the 'Your Name' box." ); valid = false; }

return valid;}

</script>

</head>

<h1>Please Enter Your Name</h1>

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

<TABLE>

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

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

value=""></td>

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

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

value=""></td>

</TABLE>

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

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;

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

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

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>

<h1>Online Examination</h1>

</center>

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

</div>

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

</center>

</form>

</body>

</html>

OUTPUT:

(ii)STUDENT MARKLIST USING SERVLET

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

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

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

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>

<h1>Student Mark Sheet</h1>

</center>

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

</form>

</body>

</html>

OUTPUT:

9.AIM:

Write a Programs using AJAX

PROGRAM:

<html>

<head>

function loadXMLDoc()

if (window.XMLHttpRequest)

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

xmlhttp=new XMLHttpRequest();

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

DS Lab Programs

c++ Lab Programs

Multimedia Technology lab programs

PLC Lab programs

os lab manual programs

Lab Programs GUI

Vlsi Lab Programs

ARM lab programs

Dotnet Lab Programs

Complete Lab Programs

Lab Programs Dbms

Ooad Lab Programs

Advanced Communications Lab Programs

Cn Lab Programs

C Programming Lab Programs

OOPS Lab Programs

ADA Lab Programs

C Lab Programs

Middleware Lab Programs

Vhdl Programs Lab