Web Technology Manual-2012

1
MOHAMED SATHAK A.J COLLEGE OF ENGINEERING

OLD MAHABALIPURAM ROAD, (SIPCOT -IT PARK) EGATTUR , CHENNAI 603 103.
NAME
:_________________________
REGISTER NUMBER :_________________________
DEPARTMENT LAB
:_________________________ :_________________________
YEAR-SEMESTER
:_________________________
MOHAMED SATHAK A.J COLLEGE OF ENGINEERING

OLD MAHABALIPURAM ROAD, (IT HIGHWAY) EGATTUR CHENNAI 603 103.
BONAFIDE CERTIFICATE
This is to certify that this is the Bonafide Record of work done by .Register number of Sixth Semester, Information Technology department in the WEB TECHNOLOGY LAB- IT2357 in the academic year 2011-2012.
Staff-in-charge
Head of the Department
Submitted for the Anna INTERNAL EXAMINER
University
practical
examination
held
on
EXTERNAL EXAMINER
INDEX
EXP. NO
1 2 3 4
DATE
CONTEXT
Web page using HTML Web page with all types of Cascading style sheets. Client Side Scripts for Validating Web Form Controls using DHTML. Java Applet to show Color Palette Programs to invoke Servlets From HTML Forms Three-tier applications using Jsp and Databases Programs using XML Schema XSLT/XSL Program using DOM Program using AJAX
PAGE NO
STAFF SIGN
6 7 8 9
1. Create a web page using HTML

Aim:
To create a web page which includes a map and display the related information when a hotspot is clicked in a map. Algorithm:
1. Start the program for embed map in web page
2. 3. 4. 5.
Create world.html file using notepad The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. 6. The map element contains a number of area elements that defines the clickable areas in the image map. 7. Set the coordination for the Hotspot areas 8. Finally terminate the program and embed web page. Program: world.html:
<html> <head> <title>WORLD INFORMATION</title> </head> <body> <p>Click on the map </p> <img height=300 width=800 src="C:\Documents and Settings\Owner\Desktop\wt lab manual 2010\pgm 1\worldmap.jpg" width="700" height="300" alt="world" usemap="#world" /> <map name="world"> <area name="africa" shape="circle" coords="420,180,55" href="africa.html" /> <area name="australia" shape="rect" coords="790,280,20,80" href="australia.html" /> </map> <br><p><h1 style="background-color:red" style="font-family:verdana"> GENERAL INFORMATION ABOUT OUR WORLD</h1></p> </br> <small><i> <ul><h2> <li>Most Populated Country:China Population 1,307,000,000</li> <li>Worlds Tallest Mountain: Mt. Everset in Nepal 29,025ft.(8.850m)</li> <li> Worlds Lowest Point: The lowest point on dry land is the shore of the Dead Sea, shared by Israel and Jordan, 418 m (1,371 ft) below sea level.</li> <li> Worlds Deepest Point: Russia's Lake Baikal, located north of the Mongolian border, is the world's deepest with a maximum depth of just over one mile (5371 feet / 1637 meters).</li> <li> Worlds Longest River: Africa's Nile River is the world's longest at 4,160 miles (6,695 kilometers) long.</li> <li> Worlds Largest Desert: Outside of polar regions, Northern Africa's Sahara Desert is the world's largest desert at more than 3.5 million square miles (9 million square kilometers), which is slightly smaller that the size of the United States</li>
5 <li> Worlds Largest City: Tokyo-Yokohama, Japan - 33,200,000</li></p> </h2></ul> </i></small> </body> </html>
africa.html:
<head> <title>AFRICA</title> <h1 align=center>Africa includes 53 Individual Countries</h1> <br> <p> <img align="left" src="C:\Documents and Settings\Owner\Desktop\wt lab manual 2010\pgm 1\imagesCA1BWOB7.jpg" height=320 width=320></img></p> </br> <table border=5> <tr> <th align=left>Continent Size:</th> <td align=left>11,700,000 square miles</td> </tr> <tr> <th align=left>Estimated Population:</th> <td align=left>877 million people</td> </tr> <tr> <th align=left>Largest Country:</th> <td align=left>Sudan, 968,000 square miles</td> </tr> <tr> <th align=left>Longest River:</th> <td align=left>Nile, 4,160 miles </td> </tr> </table> </body>
australia.html: <head> <title>Australia</title> <h1 align=center>Austalia is the 6th largest country and the smallest continent.</h1> <br>
6 <p> <img align="left" src="C:\Documents and Settings\Owner\Desktop\wt lab manual 2010\pgm 1\australia.jpg" height=320 width=320></img></p> </br> <table border=5> <tr> <th align=left>Continent Size:</th> <td align=left>7,682,300 square km</td> </tr> <tr> <th align=left>Estimated Population:</th> <td align=left>21 million people</td> </tr> <tr> <th align=left>land masses:</th> <td align=left>mainland and Tasmania</td> </tr> <tr> <th align=left>Largest Desert:</th> <td align=left>The Great Victoria Desert</td> </tr> </table> </body>
OUTPUT:
Image map: An image map is an active clickable image that loads different web pages depending on what part of the image is clicked. In an image map, the image is divided into regions or areas with each region or area linked to a different URL. Thus an image map links the various areas of an image with a series of URLs. These regions or areas are also called hotspots. Thus an image map is an image on a web page that contains hotspots. To create a map: <MAP NAME="MyMap"> </MAP>
To add an entry for each "hot-spot" using this syntax: <AREA SHAPE="Rect" HREF="MyPage.html" COORDS="26,185 238,185">
To determine the coordinates of the virtual shape that will be the "hotspot" area.
2. Create a web page with all types of Cascading style sheets

Aim: To create a web page with all types of cascading style sheets. Algorithm: 1. Start by three ways of employing CSS in your Web pages :inline styles, embedded or global 2. 3.
styles, and linked or external style sheets. I To create an inline style a. Add the style attribute to the HTML tag. b. The style declaration must be enclosed within double quotation marks. To create an embedded style a. Insert a <style> tag within the head section of HTML file. b. Within the <style> tag, enclose the style declarations need to the entire Web page. c. The style sheet language identifies the type of style used in the document. d. The default and the most common language is text/css for use with CSS. To create an External styles a. Create a text file containing style declarations b. Create a link to that file in each page of the Web site using a <link> tag. c. Specify the link attributes, such as href, rel, and type. d. Link a style sheet, the value of the href attribute should be the URL of the linked document, the value of the rel attribute should be stylesheet and the value of the type attribute should be text/css. Write the source code for the separate style sheet and finally terminate the program.
4.
5. Definitions:
Inline styles are added to each tag within an HTML file. Embedded styles are applied to an entire HTML file. External style sheets are placed in an external file and linked with pages in the Web site.
Program: home.html
<html> <head> <title>CASCADING STYLE SHEET</title> </head> <body alink="blue" vlink="brown"> <h1><u><b><font face="Monotype corsiva" color="red"> Different types of Cascading Style Sheets</font></b></u></h1> </ a href="inline.html" style="text-decoration:none:">1.INLINE STYLE SHEET</a></br> <a href="embed.html" style="text-decoration:none:">1.EMBEDED STYLE SHEET</a></br> <a href="external.html" style="text-decoration:none:">1.EXTERNAL STYLE SHEET</a></br><font face="arial" size="6"> </body> </html> INLINE.HTML:
10
<html> <head> <title>INLINE STYLE SHEET</title> </head> <body> <ol class="decimal"> <h1 style="font-family":Times New Roman,sans-serif;font-size;20pt; color:green"><li>Inline Style Sheet</li></h1> <h3> <p style="text-indent:30pt;color:blue;font-family:serif;font-size:16pt"> an Inline style is a css or cascading style sheets-style which is written directly on the element it affects.It is also known as inline css.</p> </h3 ol> </body> </html>
Embed.html: <html> <head> <title>EMBEDDED STYLE SHEET</title> <style type="text/css"> ol.a{list-style-type:lower-roman} h1{ font-family:arial black; font-size:30pt; color:orange; text-align:center;} h3{ font-family:arial black; font-size:16pt; color:blue; text=align:left;} </style> </head> <body> <ol class="a"> <h1> <li>Embedded style sheet</li></h1> </br> <h3> Embedded style sheets refer to when you embed style sheet information into an html document using the style element.</h3></ol> </body> </html> EXTERNAL.HTML: <html>
11 <head> <title>IMPORTED STYLE SHEET</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <h1>External Style Sheet</h1> <h3>An External style sheet is ideal when the style is applied to many pages.with an external style sheet,Each page must link to the style sheet using the<link>tag.</h3> </body> </html> style1.css: body{background-color:#EEEEFF;colr:black;} h1{font-family:arial black;font-size:25pt;color:orange;text-align:center;} h3{text-indent:30pt;font -family:arial black;font-size:12pt; color:blue;text-align:left;}
Output:
12
13
3. CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM USING DHTML Aim: To create Client Side Scripts for Validating Web Form Controls using DHTML. Algorithm: 1. Start the Program 2. Create a bank.html and in that page create two textboxes to enter the account number and name 3. User given input is validated and it is linked to either deposit.html /withdraw.html 4. This script validates text inputs typed and select boxes after something has been selected. 5. Insert Attributes on the tags are used to determine the validation process. 6. Embed JavaScript in the Web page for Client-side form validation. 7. Run the form with Internet explorer to check the details entered by the user. Program:
<html> <head> <title>The Student Registration Form</title> <script type=text/javascript> function validate() { var i; var name_str=document.my_form.name; var phoneID=document.my_form.ph_txt; var ph_str=document.my_form.ph_txt.value; var str=document.my_form.Email_txt.value; if((name_str.value==null)||(name_str.value=="")) { alert("Enter some name") return false } if(document.my_form.Age_txt.value=="") { alert("Enter Some Age") return false } if((document.my_form.Age_txt.value<"5")&& (document.my_form.Age_txt.value>"21")) { alert("Invalid Age") return false } if(ph_str.length<1 ||ph_str.length>11)
14 { alert("Invalid length of Phone Number") return false } for (i = 0; i < ph_str.length; i++) { var ch = ph_str.charAt(i); if (((ch < "0") || (ch > "9"))) { alert("Invalid Phone Number") phoneID.focus() return false } } var index_at=str.indexOf("@") var len=str.length var index_dot=str.indexOf(".") var emailID=document.my_form.Email_txt if ((emailID.value==null)||(emailID.value=="")) { alert("Please Enter your Email ID") emailID.focus() return false } if (str.indexOf("@")==-1) { alert("Invalid E-mail ID") return false } if (str.indexOf(".")==-1 || str.indexOf(".")==0 || str.indexOf(".")==index_at) { alert("Invalid E-mail ID") return false } if (str.indexOf("@",(index_at+1))!=-1) { alert("Invalid E-mail ID") return false } if (str.indexOf(" ")!=-1) { alert("Invalid E-mail ID") return false } if (!document.my_form.group1[0].checked && !document.my_form.group1[0].checked) {
15 alert("Please Select Sex"); return false; } if (!document.my_form.group1[0].checked && !document.my_form.group1[0].checked) { alert("Please Select Sex"); return false; } return true } </script> </head> <body bgcolor=aqua> <center><h3>Application Form</h3></center> <form name=my_form onsubmit=validate()> <strong>Name:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </strong> <input type=text name=name><br/> <strong>Age:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</strong> <input type=text name=Age_txt><br/> <strong>Phone No:&nbsp</strong> <input type=text name=ph_txt><br/> <strong>Email:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbs</strong> <input type=text name=Email_txt><br/><br/> <strong>Sex:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </strong> <input type="radio" name="group1" value="Male">Male&nbsp&nbsp&nbsp&nbsp <input type="radio" name="group1" value="Female">Female<br/><br/><br/> <strong>Hoby: </strong> &nbsp&nbsp <input type="checkbox" name ="option1" value="Singing">Singing<br/> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="checkbox" name ="option1" value="Reading">Reading<br/> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="checkbox" name ="option1" value="T.V.">Watching T.V<br/> <br/><br/> <strong>Country:</strong> <select name="My_Menu"> <option value="India">India</option> <option value="China">China</option> <option value="Shrilanka">Shrilanka</option> </select> <center> <input type=submit value=Submit></br> </center> </body> </html>
16
Output:
17
4. Java Applet to show Color Palette

Aim: To write a java code to implement Color palette with matrix of Buttons Background and Foreground in control text area by selecting form color palette and selecting from the check box. Algorithm: Step 1: Write a html applet tag with code set class name and comment the tag Step 2: Import all necessary packages and classes Step 3: Define a class that extends applet and implements action listener and item listener Step 4: Declare an array of buttons to set colors, two checkboxes for foreground and background colors Step 5: Declare a text area to hold the text, a checkbox group for checkboxes Step 6: Declare three panels, buttonpanel, palettepanel and checkpanel Step 7: Declare a string, color. Step 8: In the init() method, do the following: i) Create the buttonpanel and set the layout to gridlayout of 3 X 3 ii) Create an array of 9 buttons for various colors iii) Add action listener to each button and add all of them to button panel iv) Create the checkbpanel and set its layout to flow layout v) Create a checkbox group. Then create forground and background checkboxes vi) Add item listener to each checkbox and add them to the checkpanel vii) Create a text area and change its font to desired one. viii) Create the palettepanel and set is layout to border layout ix) Add the text area, buttonpanel, and checkpanel to various zones of the border layout x) Add the palettepanel to the applet Step 9: Write an empty itemStateChanged() method Step 10: 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:
/* <applet code=palette height=600 width=600> </applet> */ import java.awt.*; import java.awt.event.*; import java.applet.*; public class palette extends Applet implements ActionListener,ItemListener { Button[] colors; Checkbox foreground,background; TextArea workarea; CheckboxGroup cbg; Panel buttonpanel,checkpanel,palettepanel; String colour;
18 public void init() {` buttonpanel=new Panel(); buttonpanel.setLayout(new GridLayout(3,3)); colors=new Button[9]; colors[0]=new Button("RED"); colors[1]=new Button("GREEN"); colors[2]=new Button("BLUE"); colors[3]=new Button("CYAN"); colors[4]=new Button("ORANGE"); colors[5]=new Button("WHITE"); colors[6]=new Button("BLACK"); colors[7]=new Button("YELLOW"); colors[8]=new Button("PINK"); for(int i=0;i<9;i++) { colors[i].addActionListener(this); buttonpanel.add(colors[i]); } checkpanel=new Panel(); checkpanel.setLayout(new FlowLayout()); cbg=new CheckboxGroup(); foreground=new Checkbox("ForeGround",cbg,true); background=new Checkbox("BackGround",cbg,false); foreground.addItemListener(this); background.addItemListener(this); checkpanel.add(foreground); checkpanel.add(background); workarea=new TextArea(8,40); workarea.setFont(new Font("Garamond",Font.BOLD,20)); palettepanel=new Panel(); palettepanel.setLayout(new BorderLayout()); palettepanel.add(workarea,BorderLayout.CENTER); palettepanel.add(checkpanel,BorderLayout.EAST); palettepanel.add(buttonpanel,BorderLayout.SOUTH); add(palettepanel); } public void itemStateChanged(ItemEvent ie) { } public void actionPerformed(ActionEvent ae) { colour=ae.getActionCommand(); if(foreground.getState()==true) workarea.setForeground(getColour()); if(background.getState()==true) workarea.setBackground(getColour()); } public Color getColour() { Color mycolor=null;
19 if(colour.equals("RED")) mycolor=Color.red; if(colour.equals("GREEN")) mycolor=Color.green; if(colour.equals("BLUE")) mycolor=Color.blue; if(colour.equals("CYAN")) mycolor=Color.cyan; if(colour.equals("ORANGE")) mycolor=Color.orange; if(colour.equals("WHITE")) mycolor=Color.white; if(colour.equals("BLACK")) mycolor=Color.black; if(colour.equals("YELLOW")) mycolor=Color.yellow; if(colour.equals("PINK")) mycolor=Color.pink; return mycolor; } }
Output:
20
5. Programs to invoke Servlets from HTML forms
21
Aim: To invoke servlets from HTML Forms Algorithm 1. Start the Invoking Servlets from HTML Forms 2. Create the postparam.html 3. Use the two input type for Employee name and phono 4. The save the postparm.html 5. Create java serve let for invoke the html forms 6. After creating java servlets extracting PostParam.war 7. Then follow the step Step 1: Open Web Browser and type Step 2: http://localhost:8080 Step 3: Select Tomcat Manager Step 4: Deploy the war file and Run 8. Finally terminate the Invoking Servlets from HTML Forms 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>
22 <TITLE>INVOKING SERVLET FROM HTML</TITLE> </head> <BODY> <CENTER> <FORM name = "PostParam" method = "Post" action="http://localhost:8080/servletsexamples/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>
XML CODE:
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <display-name>Welcome to Tomcat</display-name> <description> Welcome to Tomcat </description>  <servlet> <servlet-name>PostParam</servlet-name> <servlet-class>PostParam</servlet-class> </servlet> <servlet-mapping>
<servlet-name>PostParam</servlet-name> <url-pattern>/PostParam</url-pattern> </servlet-mapping> 
23 </web-app>
Output:
D:\PostParam>jar cvf PostParam.war added manifest adding: PostParam.html(in = 410) (out= 220)(deflated 46%) adding: WEB-INF/(in = 0) (out= 0)(stored 0%) adding: WEB-INF/classes/(in = 0) (out= 0)(stored 0%) adding: WEB-INF/classes/PostParam.class(in = 1156) (out=643)(deflated 44%) adding: WEB-INF/classes/PostParam.java(in = 519) (out=272)(deflated 47%) adding: WEB-INF/web.xml(in = 674) (out= 314)(deflated 53%)
24
6. Three-tier applications using Jsp and Databases
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;
25 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");
26 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>
27 <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:
28
7. Program using XML Schema XSLT/XSL
29
Aim: To develop an XSLT program to extract book titles, authors, publications, book rating from the books XML document and use formatting. Algorithm:
1. Open a new, empty text file in your text editor, and type in the XML document to store the elements of a booklist. 2. Use your text editors Save command to save the document on your hard disk, by assigning the filename with the extension .xml. 3. Add elements to the XML document. 4. The bookdetaillist consists of title, author, ISBN, Price, Publisher, Email. 5. Open a new file and type the required XSLT for the booklist document. 6. Save the XSLT file with the extension .xsl. 7. View the output in the browser and print the results.
Source Code: Cdcatalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="Cdcatalog.xsl"?> <catalog> <cd> <title>Object oriented Programming</title> <artist>Balagurusamy</artist> <country>India</country> <company>PHI</company> <price>230</price> <year>2001</year> </cd> <cd> <title>Basic Java</title> <artist>Ramesh</artist> <country>India</country> <company>KK</company> <price>250</price> <year>2009</year> </cd> </catalog>
Cdcatalog.xsl <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
30
<xsl:template match="/"> <html> <body> <center> <h2>My Book Collection</h2> <table border="1"> <tr bgcolor="#8712F3"> <th align="left">Title</th> <th align="left">Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td> </tr> </xsl:for-each> </table> </center> </body> </html> </xsl:template> </xsl:stylesheet>
Output:
31
32
8. DOM
Aim: To Use Microsoft DOM to navigate and extract information from the books XML document. Algorithm:
1. 2. 3. 4. 5. 6.
Open a new, empty text file in your text editor, and type in the XML document to store the elements of an address book. Use your text editors save command to save the document on your hard disk, by assigning the filename Create the books XML document which contains title, author, ISBN number book name, publication and book rates. Using Document Object Model, extract the books XML document. This could be done by the method of DOM APIs which is written either using Java or C#. In the same manner, navigate the document from books XML.
Dom.html
<html> <body> <script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.writeln("Book Title:"); txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.write(txt); document.writeln("<br>"); document.writeln("Book Author:"); txt=xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue; document.write(txt); </script> </body> </html> Books.xml <?xml version="1.0" encoding="ISO-8859-1"?>
33 <bookstore> <book category="web" cover="paperback"> <title lang="en">Learning DOM - XML</title> <author>Saravanan</author> <year>2007</year> <price>250</price> </book> </bookstore>
OUTPUT:
9.Programs using AJAX
34
Introduction:
Ajax is the method of using JavaScript to send the client data on the server and then retrieve it without refreshing the complete page. We can us the XMLHttpRequest object to perform a GET or POST and then retrieve the server response without page refresh.
Aim: To write an AJAX program to change a content of text to another. Algorithm: 1. 2. 3. 4. 5. 6. A client event is created. Use div section to display information returned from a server. Create button to call a function named loadXMLDoc(), if it is clicked. Add a <script> tag to the page's head section containing the loadXMLDoc() function. Use XMLHttpRequest object to exchange data with a server behind the scenes. Use the open() and send() methods of the XMLHttpRequest object to send a request to a server. 7. Click the button to view the changes in the browser. 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>
35 <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>
Output:
36

Web Technology Manual-2012

Uploaded by

Document Information

Original Description:

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

Uploaded by

Copyright:

Available Formats

1

MOHAMED SATHAK A.J COLLEGE OF ENGINEERING

REGISTER NUMBER :_________________________

MOHAMED SATHAK A.J COLLEGE OF ENGINEERING

Head of the Department

Submitted for the Anna INTERNAL EXAMINER

1. Create a web page using HTML

2. Create a web page with all types of Cascading style sheets

4. Java Applet to show Color Palette

5. Programs to invoke Servlets from HTML forms

<servlet-name>PostParam</servlet-name> <url-pattern>/PostParam</url-pattern> </servlet-mapping>

6. Three-tier applications using Jsp and Databases

7. Program using XML Schema XSLT/XSL

Source Code: Cdcatalog.xml

Cdcatalog.xsl <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

9.Programs using AJAX

You might also like