Web Technology - MGR

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-withjavascript/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. b. c. Set background and foreground of the control text area In order to select foreground or background use To set background images.
by selecting a color from color palette. checkbox controls as radio buttons.
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.

Web Technology - MGR

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology - MGR

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY LAB MANUAL

h3{font-family:arial;font-size:20;color:cyan} table{border-color:green} td{font-size:20pt;color:magenta}

</tr> </table> </body> </html>

by selecting a color from color palette. checkbox controls as radio buttons.

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

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

PROGRAM: Sevlet Code:

STUDENT MARK LIST DATABASE

} catch(ClassNotFoundException cnfex){ cnfex.printStackTrace(); } catch(SQLException sqlex){ sqlex.printStackTrace(); } catch(Exception excp){ excp.printStackTrace(); }

<br><br><br> <center> <input type="submit" value="Submit"><br><br> </center> </form> </body> </html>

(ii)STUDENT MARKLIST USING SERVLET

To create a three tier application for displaying the student marklist

} xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body>

Let AJAX change this text

You might also like