43
IT2357 WEB TECHNOLOGY LAB LIST OF EXPERIMENTS 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. Page 1 of 43

Web Technology Lab Manual

Embed Size (px)

Citation preview

Page 1: Web Technology Lab Manual

IT2357 WEB TECHNOLOGY LAB

LIST OF EXPERIMENTS

1. Create a web page with the following using HTML

i) To embed an image map in a web pageii) To fix the hot spotsiii) 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

Page 2: Web Technology Lab Manual

IT2357 – WEB TECHNOLOGY LABORATORY

Ex.No1

Web

page

creation using Hot Spots

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.

Page 2 of 33

EX. NO TITLE

HTML

1 Web page creation using Hot Spots

DHTML

2Web Page creation using Cascading style sheets

3Client Side Scripts for Validating Web Form Controls

4Color Palette creation using Java

SERVLETS

55.1 Invokation of Servlets from HTML forms5.2 Invokation of Servlets from Applets

6Three-tier application creation using JSP and Databases6.1 For conducting on-line examination6.2 For displaying student mark list

7 Programs using XML – Schema – XSLT/XSL

WEB SERVICES AND DATA BASE

8 Programs using AJAX

9

Web Services and Data Base.9.1 An Airline Service9.2 A Travel Agent

Page 3: Web Technology Lab Manual

ALGORITHM

1. Using MS Paint Draw India map and save the map file.

2. Draw Hot spots for a. DELHI b. MUMBAI c. KOLKATTA d. CHENNAI

3. Show detailed information about the cities when the Hot Spots are clicked.

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

5. SYNTAX 2: Calling map using HTML program

6. <IMG SRC = “Picture file” USEMAP = “#Map Name”>

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">

Page 3 of 33

Page 4: Web Technology Lab Manual

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

Page 4 of 33

Page 5: Web Technology Lab Manual

</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>

Page 5 of 33

Page 6: Web Technology Lab Manual

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>

Page 6 of 33

Page 7: Web Technology Lab Manual

</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

Page 7 of 33

Page 8: Web Technology Lab Manual

Page 8 of 33

Page 9: Web Technology Lab Manual

Page 9 of 33

Page 10: Web Technology Lab Manual

RESULT

The web page is designed and developed using HTML

Page 10 of 33

Page 11: Web Technology Lab Manual

Ex.No 2 Web Page creation using Cascading style sheets

AIM:

To create a web page with all types of Cascading style sheets

CASCADING STYLE SHEETS:

DHTML is a new and emerging technology that has evolved to meet the increasing

demand for eye-catching and mind-catching web sites.

DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting

Languages. HTML specifies a web page’s elements like table, frame, paragraph,

bulleted list, etc. CSS can be used to determine an element’s size, color, position and a

number of other features.

Scripting Languages (JavaScript and VBScript) can be used to manipulate the web

page’s elements so that styles assigned to them can change in response to a user’s input.

The combined technology of HTML and CSS becomes DHTML.

Similarly the combined technology of HTML and Scripting Languages also becomes

DHTML.

Types of Cascading Style Sheets

1. Cascading or embedded or Internal Style Sheet

2. Linked or External Style Sheet

3. Inline Style sheet

The style assignment process is accomplished with the <STYLE>…</STYLE> tags.

SYNTAX:

The attributes that can be specified to the <STYLE> tag are

1. Font Attributes

2. Color and Background attributes

3. Text Attributes

4. Border Attributes

5. Margin Attributes and

6. List Attributes.

Page 11 of 33

Page 12: Web Technology Lab Manual

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

Page 13: Web Technology Lab Manual

<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 Values

font-family A comma-delimited sequence of font family names (Serif, sanserif, cursive)

font-style Normal, italic or oblique.

font-size 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),

percentage (of the parent element’s size)

font-weight Normal, bold, lighter, or one of the nine numerical values (100,200 to 900)

COLOR AND BACKGROUND ATTRIBUTES

Attributes Values

color Sets an element’s text-color- a color name or a color code

background-color Specifies the color in an element’s background.A color name or a color

code.

background-image Sets the background image. A URL or none.

background-repeat 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 Values

text-decoration Adds decoration to an element’s text- none, underline, overline, line-

through, blink

Page 13 of 33

Page 14: Web Technology Lab Manual

vertical-align Determines an element’s vertical position. Baseline, sub, super, top, text-

top, middle, bottom, text-bottom, also percentage of the element’s length.

text-transform Applies a transformation to the text. Capitalize (puts the text into initial

caps), uppercase, lowercase or none.

text-align Aligns text with an element. Left, right, center, or justify can be given.

text-indent Indents the first line of text. A percentage of the element’s width or a

length.

Border Attributes

Attributes Values

border-style Solid, double, groove, ridge, inset, outset

border-color A color name or color code

border-width Thin, medium thick or length

border-top-width Thin, medium thick or length

border-bottom-width Thin, medium thick or length

border-left-width Thin, medium thick or length

border-right-width Thin, medium thick or length

border-top Specifies width, color and style

border-bottom Specifies width, color and style

border-left Specifies width, color and style

border-right Specifies width, color and style

border Sets all the properties at once

Margin Related Attributes

Attributes Values

margin-top

Percent, length or auto

margin-bottom

margin-left

margin-right

margin

List Attributes

Attributes Values

list-style-type Disc, circle, square, decimal, lower-case, upper-roman, lower-roman,

Page 14 of 33

Page 15: Web Technology Lab Manual

lower-alpha, upper-alpha, none

THE UNITS OF MEASUREMENTS

The attribute values related to number values can have the following measurements.

Unit name Abbreviation Explanation Relative

Em Em The height of a font Yes

Ex Ex Height letter x in a font Yes

Pica Pc 1 pica is 12 points No

Point Pt 1/72 of an inch No

Pixel Px One dot on a screen Yes

Millimeter Mm Printing unit No

Centimeter Cm Printing unit No

Inch In Printing unit No

Ex.No 3 Client Side Scripts for Validating Web Form Controls

Page 15 of 33

Page 16: Web Technology Lab Manual

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)

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; }

Page 16 of 33

Page 17: Web Technology Lab Manual

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>

(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

Page 17 of 33

Page 18: Web Technology Lab Manual

// 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' ); 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 ) {

Page 18 of 33

Page 19: Web Technology Lab Manual

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; } } } } return true;}//--></script>

Page 19 of 33

Page 20: Web Technology Lab Manual

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:

Male Female

Add my subscription Send me cash too

Page 20 of 33

Page 21: Web Technology Lab Manual

Ex.No 4 Color Palette creation using Java

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

Foreground

Background

2. Create Radio buttons for various colors for Foreground and Background.

3. Insert Text Area control and place a Paragraph inside the Text Area control.

4. The background or foreground color of the text area is changed according to the

option selected by the user.

5. Syntax for Creating Radio Button

Page 21 of 33

Page 22: Web Technology Lab Manual

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);

Ex.No 5 Servlets

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

The Servlet Life Cycle

1. When the servlet is first created, its init method is invoked, so init is where you

put one-time setup code.

Page 22 of 33

Page 23: Web Technology Lab Manual

2. After this, each user request results in a thread that calls the service method of the

previously created instance.

3. The service method then calls doGet, doPost, or another doXxx method, depending on

the type of HTTP request it received.

4. Finally, if the server decides to unload a servlet, it first calls the servlet’s destroy

method.

Ex.No 6. Three-tier application creation using JSP and Databases

6.1 For conducting on-line examination

6.2 For displaying student mark list

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>

Page 23 of 33

Page 24: Web Technology Lab Manual

</body>

</html>

        In jsp java codes are written between '<%' and '%>' tags. So it takes the following form :

<%= Some Expression %> .

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

The Components of JSPs

JSP syntax is almost similar to XML syntax. The following general rules are applicable to

all JSP tags.

1. Tags have either a start tag with optional attributes, an optional body, and a matching

end tag or they have an empty tag possibly with attributes.

2. Attribute values in the tag always appear quoted. The special strings &apos; and " can

be used if quotes are a part of the attribute value itself.

Any whitespace within the body text of a document is not significant, but is preserved,

which means that any whitespace in the JSP being translated is read and preserved during

translation into a servlet. The character \ can be used as an escape character in a tag, for

instance, to use the % character, \% can be used.

JavaServer Pages are text files that combine standard HTML and new scripting tags. JSPs

look like HTML, but they get compiled into Java servlets the first time they are invoked.

The resulting servlet is a combination of HTML from the JSP file and embedded dynamic

Page 24 of 33

Page 25: Web Technology Lab Manual

content specified by the new tags. Everything in a JSP page can be divided into two

categories:

1. Elements that are processed on the server

2. Template data or everything other than elements, that the engine processing the JSP

engines.

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..

Connecting JSP with MS-Access

Steps:

1. Create a table in MS-Access. For example “product” table.

2. Create a Data Source Name(DSN). For example “prod”.

3. Connect JSP with MS-Access using the following code

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

conn =DriverManager.getConnection("jdbc:odbc:prod","","");

4. Write the necessary queries to access the database.

5. Execute the program and check the database for updates.

Here is an example program to connect JSP with the MS-Access which inserts a row into

the database.

<<%@ page import ="java.sql.*"%>

<% Connection conn=null;

try

{

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

conn =DriverManager.getConnection("jdbc:odbc:access","","");

Statement st=conn.createStatement();

int i=st.executeUpdate("INSERT into product VALUES('3','bag','5','55')");

out.println("1 row is effected");

}

Page 25 of 33

Page 26: Web Technology Lab Manual

catch(Exception ex)

{

ex.printStackTrace();

}

%>

Ex.No 7 Programs using XML – Schema – XSLT/XSL

XML Technologies Overview

Extensible Markup Language (XML) has become the technology of choice for data transfer.

XML is actually a family of standards, some of which are still emerging.

XML technologies includes

1. XML

2. XSLT

3. XPath,

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

XML (Extensible Markup Language) is a set of rules for encoding

documents electronically. It is defined in the produced by the W3C and several other related

specifications; all are fee-free open standards.

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

Page 26 of 33

Page 27: Web Technology Lab Manual

XSLT (XSL Transformations) is a declarative, XML-based language used for the

transformation of XML documents into other XML documents.

Two W3C Recommendations, XSLT (the Extensible Style sheet Language

Transformations) and XPath (the XML Path Language) meet that needs.

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.

Page 27 of 33

Page 28: Web Technology Lab Manual

6. XML namespaces

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)

The Resource Description Framework (RDF) is a general-purpose

language for representing information in the Web.

12. XML Query ( XQuery)

Used for retrieving data from data base. It contains various queries to process the data

base.

Page 28 of 33

Page 29: Web Technology Lab Manual

Ex.No 8 Programs using AJAX

Introduction:

Ajax is an approach or pattern to web development that uses client-side

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. It’s 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.

JavaScript—A scripting language that is commonly hosted in a browser to add

interactivity to HTML pages. JavaScript is the most popular scripting language on the Web

and is supported by all major browsers. Ajax applications are built in JavaScript.

Document Object Model (DOM)

Defines the structure of a web page as a set of programmable objects that can be

accessed through JavaScript. In Ajax programming, the DOM is leveraged to effectively

redraw portions of the page.

Cascading Style Sheets (CSS)—Provides a way to define the visual appearance

of elements on a web page. CSS is used in Ajax applications to modify the exterior of the

user interface interactively.

XMLHttpRequest—Allows a client-side script to perform an HTTP request. Ajax

applications use the XMLHttpRequest object to perform asynchronous requests to the server

as opposed to performing a full-page refresh or postback.

Page 29 of 33

Page 30: Web Technology Lab Manual

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

Page 31: Web Technology Lab Manual

Web services architecture.

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

Page 32: Web Technology Lab Manual

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.

4 Actors & Goals

The goal of the consumer is to get the best combination of services and prices suiting his/her

needs.

The travel agent tries to provide customer satisfaction and sell packages.

The service providers are aiming at selling as many products as possible.

The credit card companies guarantee and do the payments of the purchased products.

Developers use WSDL and platforms to create instances of web services.

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: Web Technology Lab Manual

Page 33 of 33