Upload
rijubtechii
View
73
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Web Technology Lab Manual and Programs
Citation preview
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>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='ImageMap.html'>India Map</a>
</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>
<LI>Population : 7,57,27,541</LI>
</UL><hr>
<a href='ImageMap.html'>India Map</a>
</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>
<LI>Population : 3,18,38,619</LI>
</UL><hr>
<a href='ImageMap.html'>India Map</a>
</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>
<td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Gopi</td>
<td align="center">98</td>
<td align="center">pass</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">
<!--
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>
<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);
box2.addItemListener(this);
box3.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;
}
g.drawString(text,30,100);
}
else if(flag==1)
{
g.drawString(text,30,100);
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.
Step2: create a submit button and close all the included 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.*;
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");
ans2=request.getParameter("group2");
ans3=request.getParameter("group3");
ans4=request.getParameter("group4");
ans5=request.getParameter("group5");
if(ans1.equals("True"))
Total+=2;
if(ans2.equals("False"))
Total+=2;
if(ans3.equals("True"))
Total+=2;
if(ans4.equals("False"))
Total+=2;
if(ans5.equals("False"))
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
{
Statement stmt=connect.createStatement();
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.print("<td>"+rs.getString(3)+"</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/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>
<b>3. Packet switching is more useful in bursty traffic</b><br/>
<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False<br>
<b>4. A phone network uses packet switching</b><br/>
<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<b>5. HTML is a Protocol for describing web contents</b><br/>
<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False<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.
Step2: create a submit button and close all the included 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.*;
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
{
Statement stmt=connect.createStatement();
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.print("<td>"+rs.getString(3)+"</td>");
out.print("<td>"+rs.getString(4)+"</td>");
out.print("<td>"+rs.getString(5)+"</td>");
out.print("<td>"+rs.getString(6)+"</td>");
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.