Web Technology Lab Manual
Web Technology Lab Manual
1. 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. 2. Create a web page with all types of Cascading style sheets. 3. Client Side Scripts for Validating Web Form Controls using DHTML 4. 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 5. Write programs in Java using Servlets: To invoke servlets from HTML forms To invoke servlets from Applets 6. Write programs in Java to create three-tier applications using JSP and Databases For conducting on-line examination. For displaying student mark list. Assume that student information is available in a database which has been stored in a database server. 7. Programs using XML Schema XSLT/XSL 8. Programs using AJAX 9. 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. Implement this scenario using Web Services and Data base.
Page 1 of 33
3 4
Client Side Scripts for Validating Web Form Controls Color Palette creation using Java SERVLETS
5.1 Invokation of Servlets from HTML forms 5.2 Invokation of Servlets from Applets Three-tier application creation using JSP and Databases 6.1 For conducting on-line examination 6.2 For displaying student mark list Programs using XML Schema XSLT/XSL WEB SERVICES AND DATA BASE
Programs using AJAX Web Services and Data Base. 9.1 An Airline Service 9.2 A Travel Agent
Page 2 of 33
Ex.No1
AIM
ALGORITHM
1. Using MS Paint Draw India map and save the map file. c. KOLKATTA d. CHENNAI 2. Draw Hot spots for a. DELHI b. MUMBAI 4. SYNTAX 1: Creating Hot Spots <MAP NAME = Map Name> <AREA SHAPE = Shape Name COORDS = x1,y1,x2,y2 </MAP> SHAPE can be Rect, Circle, Polygon and Default A Rectangle takes four coordinates: x1,y2,x2,y2 A Circle takes three coordinates: centerX, centerY and Radius A Polygon takes three or more pairs of coordinates denoting a polygonal region A Default shape will not take any parameter and it indicates the portion of the image not specified under any Area tag. HREF = HTML File Name indicates the name of the html file to be linked
3. Show detailed information about the cities when the Hot Spots are clicked.
5. SYNTAX 2: Calling map using HTML program 6. <IMG SRC = Picture file USEMAP = #Map Name>
<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>
Page 4 of 33
<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>
Page 5 of 33
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>
Page 6 of 33
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>
Page 7 of 33
OUTPUT
Page 8 of 33
Page 9 of 33
RESULT
Page 10 of 33
Ex.No 2
AIM:
Page 11 of 33
ALGORITHM
Steps to introduce Style into html 1. CASCADING STYLE SHEETS <HTML> <HEAD> <STYLE Type = text/css> Predefined tag name {attribute name1:attribute value1; attribute name2:attribute value2; attribute name-n:attribute value-n} <STYLE> </HEAD> <BODY> Write the body of program using user defined styles </BODY> </HTML> 2 LINKED STYLE SHEETS
1. Create .css file which contains only styles or rules or comment lines. 2. Link HTML with .CSS file using the following syntax <HTML> <HEAD <TITLE> <LINK REL = style sheet HREF = style sheet file name> </HEAD> <BODY> Write body program using styles </BODY> <HTML> 3. INLINE STYLE SHEETS <h1 STYLE =font-family: arial; font-size: 16mm; color: green>
Page 12 of 33
<center><h1>This is example for Inline Style Sheet </h1></center> ATTRIBUTES OF <STYLE> TAG Style tag attributes are divided into 6 categories. They are
1. Font Attributes 2. Color and Background attributes 3. Text attributes 4. Border attributes 5. Margin attributes 6. List Attributes (Contains only one attribute)
FONT ATTRIBUTES Attributes font-family font-style font-size Values A comma-delimited sequence of font family names (Serif, sanserif, cursive) Normal, italic or oblique. A term that denotes absolute size (xx-small, x-small, small, medium, large, x-large, xx-large), relative size (larger, smaller), a number (of pixels), font-weight percentage (of the parent elements size) Normal, bold, lighter, or one of the nine numerical values (100,200 to 900)
COLOR AND BACKGROUND ATTRIBUTES Attributes color background-color background-image background-repeat Values Sets an elements text-color- a color name or a color code Specifies the color in an elements background.A color name or a color code. Sets the background image. A URL or none. Within the background image specified, sets up how the image repeats throughout the page. Repeat-x (repeats horizontally), repeat-y(repeats vertically), repeat(both), no-repeat. TEXT ATTRIBUTES Attributes text-decoration vertical-align text-transform text-align Values Adds decoration to an elements text- none, underline, overline, linethrough, blink Determines an elements vertical position. Baseline, sub, super, top, texttop, middle, bottom, text-bottom, also percentage of the elements length. Applies a transformation to the text. Capitalize (puts the text into initial caps), uppercase, lowercase or none. Aligns text with an element. Left, right, center, or justify can be given.
Page 13 of 33
text-indent
length. BORDER ATTRIBUTES Attributes border-style border-color border-width border-top-width border-bottom-width border-left-width border-right-width border-top border-bottom border-left border-right border Values Solid, double, groove, ridge, inset, outset A color name or color code Thin, medium thick or length Thin, medium thick or length Thin, medium thick or length Thin, medium thick or length Thin, medium thick or length Specifies width, color and style Specifies width, color and style Specifies width, color and style Specifies width, color and style Sets all the properties at once
MARGIN RELATED ATTRIBUTES Attributes margin-top margin-bottom margin-left margin-right margin LIST ATTRIBUTES Attributes list-style-type Values Disc, circle, square, decimal, lower-case, upper-roman, lower-roman, lower-alpha, upper-alpha, none THE UNITS OF MEASUREMENTS The attribute values related to number values can have the following measurements. Unit name Em Ex Pica Point Pixel Millimeter Centimeter Inch Abbreviation Em Ex Pc Pt Px Mm Cm In Explanation The height of a font Height letter x in a font 1 pica is 12 points 1/72 of an inch One dot on a screen Printing unit Printing unit Printing unit Relative Yes Yes No No Yes No No No Values Percent, length or auto
Page 14 of 33
Ex.No 3
AIM:
To write Client Side Scripts for Validating Web Form Controls using DHTML
ALGORITHM
STEPS: 1. Draw Form design using <form> tag. 2. Write function program to validate all the fields in the form. 3. Call the function program in the required place. SYNTAX FOR CREATING FUNCTION function function-name(parameters list) { Write validation conditions } SYNTAX FOR CALLING A FUNCTION Event name = function_name(parameters list)
Page 15 of 33
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>
Page 16 of 33
(Or) <form onsubmit="return validateForm ( this )" ...> ... form control definitions here ... </form> ... <script language="JavaSCript"> <!-function validateForm ( form ) { // check form fields and // return false if not validated // return true otherwise } //--> </script>
When the submit button is clicked, the function loops through the form elements collection and checks for: <script language="JavaScript"> <!-function validateForm ( form ) { for ( var e = 0; e < form.elements.length; e ++ ) { var el = form.elements [ e ]; if ( el.type == 'text' || el.type == 'textarea' || el.type == 'password' || el.type == 'file' ) { // check text fields if ( el.value == '' ) { alert ( 'Please fill out the ' + el.name + ' field' );
Page 17 of 33
el.focus ( ); return false; } } else if ( el.type.indexOf ( 'select' ) != -1 ) { // check selectable dropdown menus if ( el.selectedIndex == -1 ) { alert ( 'Please select a value for ' + el.name ); el.focus ( ); return false; } } else if ( el.type == 'radio' ) { // check radio button groups var group = form [ el.name ]; var checked = false; if ( !group.length ) checked = el.checked; else for ( var r = 0; r < group.length; r ++ ) if ( ( checked = group [ r ].checked ) ) break; if ( !checked ) { alert ( 'Please check one of the ' + el.name + ' buttons' ); el.focus ( ); return false; } } else if ( el.type == 'checkbox' ) { // check checkbox groups var group = form [ el.name ]; if ( group.length ) { var checked = false; for ( var r = 0; r < group.length; r ++ ) if ( ( checked = group [ r ].checked ) ) break; if ( !checked ) { alert ( 'Please check one of the ' + el.name + ' checkboxes' ); el.focus ( ); return false; } }
Page 18 of 33
OUTPUT: The following example contains a generic function that may be used as a general handler for checking whether all the fields in a form have been filled out.
Full Name: Password:
File to upload:
Comments:
Languages:
Hobbies:
Page 19 of 33
Male
Female
Send me cash
Submit
Reset
Page 20 of 33
Ex.No 4
AIM:
To write a program 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 STEPS 1. Create Radio buttons for representing 3. Foreground Background
2. Create Radio buttons for various colors for Foreground and Background. Insert Text Area control and place a Paragraph inside the Text Area control. option selected by the user. 5. Syntax for Creating Radio Button Checkbox fg,bg CheckboxGroup cbg; cbg=new CheckboxGroup(); fg =new Checkbox("Foreground",cbg,false); bg =new Checkbox("Background",cbg,false); 6. Syntax for Creating Text Area Control and Inserting text inside thecontrol TextArea text; String va="Text Area is a subclass of Text Component.\n" text=new TextArea(va,10,50); 4. The background or foreground color of the text area is changed according to the
Ex.No 5
Servlets
Page 21 of 33
5.1 Invokation of Servlets from HTML forms 5.2 Invokation of Servlets from Applets Introduction Servlets are programs that run on a Web or application server and act as a middle layer between a request coming from a Web browser or other HTTP client and databases or applications on the HTTP server. Their job is to perform the following tasks
Page 22 of 33
Introduction
Java Server Pages or JSP for short is Sun's solution for developing dynamic Websites. JSP provide excellent server side scripting support for creating database driven web applications. JSP enable the developers to directly insert java code into jsp file, this makes the development process very simple and its maintenance also becomes very easy. JSP pages are efficient, it loads into the web servers memory on receiving the request very first time and the subsequent calls are served within a very short period of time. Java Server Pages are saved with .jsp extension. Following code which generates a simple html page.
<html> <head> <title>First JSP page.</title> </head> <body> <p align="center"><font color="#FF0000" size="6"><%="Java Developers"%></font></p> <p align="center"><font color="#800000" size="6"><%="Hello JSP"%> </font></p> </body> </html> In jsp java codes are written between '<%' and '%>' tags. So it takes the following form : <%= Some Expression %> .
Page 23 of 33
JSP pages are high level extension of servlet and it enable the developers to embed java code in html pages. JSP files are finally compiled into a servlet by the JSP engine. Compiled servlet is used by the
Page 24 of 33
Benefits of JSP
1. The JSP technology is platform independent, in its dynamic web pages, its web servers, and its underlying server components. The JSP pages can be accessed from any web server. 2. The JSP technology emphasizes the use of reusable components. These components can be combined or manipulated towards developing more purposeful components and page design..
Page 25 of 33
Ex.No 7
4. XSL-FO 5. XML Schema (WXS) 6. XML Namespaces 7. Resource Description Framework (RDF) 8. XML Encryption 9. XML Signature 10.XForms 11.XML Events 12.XML Query ( XQuery). 1. XML
documents electronically. It is defined in the produced by the W3C and XML is a flexible text format for creating structured computer documents. Extensible markup language. A way of organizing text information by labeling it with specified variables in a fixed format. 2. XSLT XSLT (XSL Transformations) is a declarative, XML-based language used Two W3C Recommendations, XSLT (the Extensible Style sheet for the transformation of XML documents into other XML documents. Language Transformations) and XPath (the XML Path Language) meet that needs.
Page 26 of 33
3. XPath XPath, the XML Path Language, is a query language for selecting nodes from an XML document. In addition, XPath may be used to compute values (e.g., strings, numbers, or Boolean values) from the content of an XML document. XPath was defined by the World Wide Web Consortium (W3C). Extensible Stylesheet Language Transformations (XSLT) has evolved from the early Extensible Stylesheet Language (XSL) standard. XSL specifies a language definition for XML data presentation and data transformations. Data presentation means displaying data in some format and/or medium. Presentation is about style. Data transformation means parsing an input XML document into a tree of nodes, and then converting the source tree into a result tree. Transformation is about data exchange. 4. XSL-FO XSL Formatting Objects, or XSL-FO, is a markup language for XML document formatting which is most often used to generate PDFs. XSL-FO is part of XSL, a set of W3C technologies designed for the transformation and formatting of XML data. The other parts of XSL are XSLT and XPath.
5. XML Schema The W3C XML Schema Definition Language is an XML language for describing and constraining the content of XML documents . W3C XML Schema is a W3C Recommendation. W3C means World Wide Web Consortium (W3C). W3C is the main international standards organization for the World Wide Web W3C to its full potential by developing protocols and guidelines that ensure long-term growth for the Web. 6. XML namespaces
Page 27 of 33
Provide a simple method for qualifying element and attribute names used in Extensible Markup Language documents by associating them with namespaces identified by URI references.
7. XML Encryption This document specifies a process for encrypting data and representing the result in XML. The data may be arbitrary data (including an XML document), an XML element, or XML element content. The result of encrypting data is an XML Encryption element which contains or references the cipher data. 8. XML Signature This document specifies XML digital signature processing rules and syntax. XML Signatures provide integrity, message authentication, and/or signer authentication services for data of any type, whether located within the XML that includes the signature or elsewhere. 9. XForms XForms is an XML format for the specification of a data processing model for XML data and user interface(s) for the XML data, such as web forms. XForms was designed to be the next generation of HTML / XHTML forms, but is generic enough that it can also be used in a standalone manner or with presentation languages other than XHTML to describe a user interface and a set of common data manipulation tasks. 10. XML Events The XML Events module defined in this specification provides XML languages with the ability to uniformly integrate event listeners and associated event handlers with Document Object Model (DOM) 11. Resource Description Framework (RDF)
Page 28 of 33
Ex.No 8
Introduction:
scripting to exchange data with a web server. This approach enables pages to be updated dynamically without causing a full page refresh to occur. As a result, the interaction between the user and the application is uninterrupted and remains continuous and fluid. Its a combination of related technologies used together in a creative way.
Ajax components
The Ajax programming pattern consists of a set of existing technologies brought together in an imaginative way, resulting in a richer and more engaging user experience. The following are the main pillars of the Ajax programming pattern and the role they play in its model.
Page 29 of 33
Ex.No 9.
Web Services
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. Implement this scenario using Web Services and Data base
Definitions Web services are typically application programming interfaces (API) or web APIs that can be accessed over a network, such as the Internet, and executed on a remote system hosting the requested services. Web services are automated information services that are conducted over the Internet, using standardized technologies and formats/protocols that simplify the exchange and integration of large amounts of data over the Internet. ... Software that runs over a network and provides information services based on XML standards that are accessed through a URI (Universal Resource Identifier) address and an XML defined information interface. ... Web services are simple, self contained applications which perform functions, from simple requests to complicated business processes. The "web services" model uses WSDL, UDDI and SOAP/XMLP. A WSDL description is retrieved from the UDDI directory. ...
Page 30 of 33
Web Services can convert your applications into Web-applications. Web Services are published, found, and used through the Web.
Web Services
Web services are application components Web services communicate using open protocols Web services are self-contained and self-describing Web services can be discovered using UDDI Web services can be used by other applications XML is the basis for Web services
Working of WebServices
The basic Web services platform is XML + HTTP. XML provides a language which can be used between different platforms and programming languages and still express complex messages and functions. The HTTP protocol is the most used Internet protocol. Web services platform elements:
SOAP (Simple Object Access Protocol) UDDI (Universal Description, Discovery and Integration) WSDL (Web Services Description Language)
Use cases
Travel agent use case, static discovery
1. Description
A company (travel agent) wants to offer the ability to book complete vacation packages: plane/train/bus tickets, hotels, car rental, excursions, etc. Service providers (airlines, bus companies, hotel chains, etc) are providing Web services to query their offerings and perform reservations. Credit card companies are providing services to guarantee payments made by consumers. This use case assumes that the discovery of the specific service providers and metadata happens prior to the invocation, and that a developer uses the description to create the web service invocation. This could be considered a "static" use case. By contrast, in a "dynamic"
Page 31 of 33
use case, the discovery of the specific service providers and metadata, and the subsequent web service invocation are performed by software agents at run time,
2 Scope
For this version of the usage scenario, we will limit ourselves to booking of vacation packages. We will assume that cancellation is not possible once a package has been purchased.
3 Stakeholders / Interests
The travel agent provides a system to provide the user with options for his/her vacation and earns money by charging fees for each package bought. Service providers (hotels, airlines) sell their services by making them available widely using Web services. Credit card companies enable customers to use their credit cards in a very large number of cases by making payment Web services available and make profit with each money transaction. The consumer books a vacation easily by choosing among a large variety of offers. Only the user in the scenario is a human being. The travel agent service, airline, hotel and payment services that the travel agent service is interacting with, are machines.
5 Usage scenarios
The following usage scenarios describe how a user would make a reservation for a vacation package (flight and hotel room), and how a developer would create a portion of a service.
Page 32 of 33
Page 33 of 33