Aim: To create a web page with the following using HTML i) To embed an image map in a web page ii) To fix the hot spots iii) Show all the related information when the hot spots are clicked.
Algorithm: Step 1: Create an html file with map tag. Step 2: Set the source attribute of the img tag to thelocation of the image and also set the usemap attribute. Step 3: Specify an area with name, shape and href set tothe appropriate values. Step 4: Repeat step 3 as many hot spots you want to putin the map. Step 5: Create html files for each and every hot spots theuser will select.
Program: map.html: <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p>
Result: Thus the image mapping using HTML was successfully created.
4
Ex No: 2 Cascading Style Sheets Date:
Aim: To create a web page with i)Inline Cascading Style Sheet. ii) InternalCascading Style Sheet. iii) External Cascading Style Sheet.
Algorithm: Step 1: Create a simple HTML page. Step 2: Write internal CSS using <style> tag in the same page become internal CSS. Step 3: Create another CSS file using <style> tag with extension .css file, which becomes external CSS file Step 4: Include the external CSS file in your file. Step 5: Include the inline style using the style attribute in any of the tags. Step 6: Find the style changes on your page.
Program: css.html: <html> <head> <link rel="stylesheet" href="h3.css" type="text/css"> <style type="text/css"> p{color:Red;font-family:LucidaConsole;text-align:center} </style> </head> <body> <b><center>Program for Cascading Style Sheets</center></b><br> <h2>External Style Sheet</h2> <h3>This content was styled using the external style sheet.</h3> <h2><b>Internal Style Sheet</b></h2> <p>This content was styled using the internal style sheet.</p> <h2>Inline Style Sheets</h2> 5
<h4 style=color:"Green";font-family:"FreestyleScript";text-align:"right">This content was styled using the inline style sheet.</h4> </body> </html>
Result: Thus the web page with all type of cascading style sheets was successfully created.
6
Ex No: 3 Client side scripting - Java Script Date:
Aim: To perform client side scripts for validating web form controls using DHTML.
Algorithm: Step 1: Start Step 2: Design an HTML File with Form with some fields which is to be validated Step 3: Validate the fields by checking it with the help of script Step 4: If step 3 fails an alert message is passed insisting that the data in the field is invalid. Step 5: Stop
function validate() { if( document.myForm.Name.value == "" ) { alert( "Please provide your name!" ); document.myForm.Name.focus() ; return false; }
if( document.myForm.EMail.value == "" ) { alert( "Please provide your Email!" ); document.myForm.EMail.focus() ; return false; } else { // Put extra check for data format var ret = validateEmail(); if( ret == false ) { return false; } }
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) || document.myForm.Zip.value.length != 5 ) { alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus() ; return false; } 8
Result: Thus the client side scripts for validating web form controls using HTML was successfully created. 11
Ex No: 4 Java Applet Programming Date:
Aim: To write programs in Java to create applets incorporating the following features: Create a color palette with matrix of buttons Set background and foreground of the control text area by selecting a color from color palette. In order to select Foreground or background use check box control as radio buttons To set background images
Algorithm: Step 1: Start Step 2: A colorchooserApplet show six scroll bars that the user can manipulate to set the red,green,blue,hue,brightness and saturation components of a color. Step 3: A color patch shows the selected color, and there are six labels that show the numerical values of all the components. Step 4: RGB components are specified as integers in the range 0 to 255. HSB components are specified as float values in the range 0.0F to 1.0F. Step 5: Stop
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) 14
{ 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(); 15
return true; } } return false; } }
Output:
16
Result: Thus the implementation of Colour picker applet to apply foreground and background colour was successfully completed. 17
Ex No: 5a Invoking Servlet from HTML Date:
Aim: To write program in Java using Servlets to invoke servlets from HTML forms.
Algorithm: Step 1: Create a web page with two text fields and name it as Web.html. Step 2: Create a servlet program using http which gets the values entered in the text fields and name it as PostParam.java. Step 3: Open NetBeans and create new project of Web Application Step 4: Include the HTML file and Servlet program in that project. Step 5: Click Clean&Build option and Run the project.
Program: Web.html: <HTML><head> <TITLE>INVOKING SERVLET FROM HTML</TITLE> </head> <BODY><CENTER> <FORM name = "PostParam" method = "Post" action="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> 18
Result: Thus program in Java using Servlets to invoke servlets from HTML forms was successfully created.
20
Ex No: 5b Invoking Servlet from Applet Date:
Aim: To write program in Java using Servlets to invoke servlets from Applets
Algorithm: Step 1: Create a web page name it as index.html. Step 2: Create a Applet Program using Java which gives the user interface for the calculator application and name it as UserInterface.java.
Step 3: Create a Calculator application using java by implementing the UserInterface.java class and name it as Calculator.java.
Step 4: Open NetBeans and create new project of Web Application Step 5: Include the HTML file and Applet program in that project. Step 6: Click Clean&Build option and Run the project.
Program: index.html: <HTML> <HEAD> <TITLE> A Simple Program </TITLE> </HEAD> <BODY> Here is the output of my program: <APPLET CODE="UserInterface.class" WIDTH=300 HEIGHT=250> </APPLET> </BODY> </HTML>
public class UserInterface extends Applet implements ActionListener { privateTextField number1; private Button submit; privateTextField number2; privateTextField number3;
public void init(){ setLayout(null); submit = new Button("Add"); number1 = new TextField("Enter Number 1",100); number2 = new TextField("Enter Number 2",100); number3 = new TextField("Answer will be displayed here",100);
public void actionPerformed(ActionEventevt) { if (evt.getSource() == submit) { URL codeBase = getCodeBase(); try { /* * Below is more generic way. For this applet also need to be hosted. * */ //URL servletURL = new URL(codeBase.getProtocol(), codeBase.getHost(), codeBase.getPort(), "/calculate/do?number1=5&number2=6"); URL servletURL = new URL("http://localhost:8080/calculate/do?number1=" + number1.getText() + "&number2=" + number2.getText()); HttpURLConnection conn = (HttpURLConnection)servletURL.openConnection(); conn.setDoOutput(true); conn.setRequestMethod("GET"); System.out.println(conn.getResponseCode()); BufferedInputStreamBufStream = new BufferedInputStream(conn.getInputStream()); byte[] contents = new byte[1024];
Result: Thus program in Java using Servlets to invoke servlets from Applets was successfully created.
25
Ex No: 6a Online Examination using JSP Date:
Aim: To write programs in Java to create three-tier applications using JSP and Databases for conducting on-line examination.
Algorithm: Step 1: Create the web page with form and questions using HTML. Step 2: Create the Java script program to check the data in the web page. Step 3: Open NetBeans and create new project of Web Application Step 4: Include the HTML file and JSP program in that project. Step 5: Create the Database with the MS Access. Step 6: Connect the Database with the web page using jdbc:odbc:driver. Step 7: Store the result in the database. Step 8: Click Clean&Build option and Run the project.
Program: Online.html: <html><head><title>Database Test</title></head> <body> <center><h1>Online Examination</h1></center> <form action="online.jsp" 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 26
<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> Online.jsp: <%@ page contentType="text/html" language="java import="java.sql.*,java.io.*"%> <html><head> <title>Three Tier Application: Online exam</title> <style type="text/css"> body{color:blue;font-family:courier;text-align:center} </style></head><body> <% String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5; int Total=0; Connection connect; Statement stmt=null; ResultSetrs=null; %> <% String url="jdbc:odbc:NEO"; Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); connect=DriverManager.getConnection(url," "," "); message="Thank you for participating in online Exam"; 27
Result: Thus program to create three-tier applications using JSP and Databases for conducting on- line examination has successfully created.
30
Ex No: 6b Student Mark details using JSP Date:
Aim: To write java programs to create three-tier applications using JSP and Databases to display the student marks.
Algorithm: Step 1: Create the web page with one text field to get register number using HTML. Step 2: Create the Java script program to get the data in the web page. Step 3: Open NetBeans and create new project of Web Application Step 4: Include the HTML file and JSP program in that project. Step 5: Create the Database with the MS Access. Step 6: Connect the Database with the web page using jdbc:odbc:driver. Step 7: Click Clean&Build option and Run the project. Step 8: Display the marks in the database.
Result: Thusprogram to create three-tier applications using JSP and Databases for on-line Student mark-list result has successfully created. 33
Ex No: 7 XML Schema-XSLT/XSL Date:
Aim: To Write Programs using XML Schema XSLT/XSL.
Algorithm: Step 1: Start the Program Step 2: Create a xml file with root element as product. Step 3: Define the sub elements under the product. Step 4: Create a style for XSLT with focus on each item. Step 5: Include the XSLT file in XML using href, to display the product details in specified format. Step 6: Stop
Result: Thus programs using XML Schema XSLT/XSL was successfully created.
36
Ex No: 8 AJAX Date:
Aim: To write a programs using AJAX.
Algorithms: Step 1: Start the Program Step 2: Create a HTML filewith multiple divisions using<div> tag. Step 3: Call the reload function when submit event occurs. Step 4: Define reload function with xmlhttp object to process the request. Step 5:Refer the text file to update the web page Step 6: Stop
} } 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> ajax_info.txt: AJAX is not a new programming language AJAX is a technique for creating fast and dynamic web pages.
Output:
Result: Thus programs using AJAX was successfully created.
38
Ex No: 9 Web Services Airline Ticket Reservation Date:
Aim: To implement the following scenario using Web Services and Data base. Consider a case where we have two web Services- an airline service and a travel agent and the travel agent is searching for an airline.
Algorithms: Step 1: Create the web page with 3 text fields and 1 drop list to get source, destination places and date of travel and no. of seats using HTML. Step 2: Create the Java script program to get the data and display the flight details according to the no. of seats by comparing the database in the web page. Step 3: Create another Java script program to get the flight no. and passengers name and ID proof. Step 4: pen NetBeans and create new project of Web Application Step 5: Include the HTML file and JSP programs in that project. Step 6: Create the Database with the MS Access. Step 7: Connect the Database with the web page using jdbc:odbc:driver. Step 8: Click Clean&Build option and Run the project. Step 9: Display the flight and booking in the database.