web applications engineering: wrap-upcs9321/15s1/lectures/finalweek.pdf · 2015-06-03 · web...

Web Applications Engineering:Wrap-up

Dr. Moshe Chai Barukh

Service Oriented Computing Group, CSE, UNSW

Week 12

M. C. Barukh, H. Paik (CSE, UNSW) COMP9321, 15s1 Week 12 1 / 55

Acknowledgements

Contents from this slides has been reused from Dr. H. Paik.


Internet: IP (the address); TCP (communication, port numbers); DNS (Domain names);


Web: HTTP (hypertext transport); URL (Uniform Addressing); HTML(hypertext markup);Web Browsers and Web ServersM. C. Barukh, H. Paik (CSE, UNSW) COMP9321, 15s1 Week 12 4 / 55

Web Applications: Dynamic interactions, changing states, getting things done!!


Developing a Web application

Client-side programming - HTML/CSS, JavaScripts

Server-side programming - Many solutions. Essentially it is a programmingframework for processing HTTP dynamically.


Separating Data from Presentation: XML

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl" href="staffcard.xsl" ?>

<staff>

<name>Helen Paik</name>

<title>Lecturer, UNSW</title>

<email>hpaik@cse</email>

<extension>54095</extension>

<photo src="me.gif" />

</staff>

e.g., http://www.csszengarden.com/


http://www.csszengarden.com/

Also worth mentioning that XML ...

is a well-supported standard data format (W3 standard)

has free and standard parser support (SAX and DOM interfaces)

has definition and validation support (e.g., Document TypeDefinition)

has standard query languages (XPath, XQuery)

has standard transformation language (XSLT)

has many applications (SVG, MathML, CML, etc.)

In many ways, Web applications and XML are inseparable.

e.g, think of configuration files, development languages themselves, dataexchange formats, and more.


Servlets

Java-based solution for server-side programming. Servlet Containermanages the life-cycle of servlets (servlet config and context objects).

does not exist

Servlet(initialised)

constructor,init()

service()

destroy()Servlet Class Servlet Object

load class

Instantiate (constructor runs)

init()called once in the servlet's life

handle client requestsdoGet(), doPost(), etc.

service()

destroy()

Container

Each request runsin a separate thread.


Servlets: Web application contains ...

addressbook Web application:


Servlets: Parameter Data and Query Strings

http://www.ecample.com/servlet/PrintThis?arg=aString&color=red

Query string?

Parameters?

Does order of parameters matter?

How do you pass ’a String’ (including space and quotes) as arg’svalue?

HttpServletRequest methods for accessing parameter data?


Servlets: Forms

HTML forms elements are used to send parameters.


Servlets: HTTP GET and POSTPOST (implications on the server-side?)

GET (implications on the server-side?)


Servlets: Sessions

HTTP is stateless ...

IssueWelcome

StartSession

DisplayChoices

Add Choiceto Journey

Show Journeyso far

CloseSession

WelcomeServlet

Createa Journey object

for the user

MenuServlet

ControlServlet

EnoughServlet


Servlets: Sessions

Use of Cookies (JSESSIONID), URL re-writing ...User Travel-Application

WelcomeServlet

MenuServlet

ControlServlet

EnoughServlet

requestresponse

requestresponse (sessID=50)

request (sessID=50)response (sessID=50)

request (sessID=50)response

SessionTables25s29s36s50

(In the servlet container)

new entry for the new user

SessionData

s25s29s36

"JourneyFlag""Queue""Patron"

s50 "JourneyFlag"

id attribute address

SAWA

jny obj

Memory

jny2 obj

user1user2user3user4

Note: Cookies have more generic usage than just for sessions!M. C. Barukh, H. Paik (CSE, UNSW) COMP9321, 15s1 Week 12 15 / 55

Servlets: Attributes

Context AttributesAdminEmail

xx@xxxx

ConcurrentUsers42

ServletDB

Connection

Servlet JSPread

read

write

read

read

Everyone in the application has access

Session Attributes

UserNameHelen

ShoppingCart A

Servlet

Servlet

JSPreadwriteread

Accessible to only those with access to a specific HttpSession

Request Attributes

OptionChoiceDark Beer

Servlet JSPreadwrite

Accessible to only those with access to a specific (Http)ServletRequest

(HeadFirst, p.187)


JSP

Presentation layer technology - should not be used for coding business logic.

elements

template (HTML bits ...)

directive

scripting

action

pageincludetaglib

declarationscriptletexpression

standardcustom

JSP

Use less scripting more ’actions’ (e.g., using beans), EL (expression language),standard libraries like JSTL.


DB layer (Data is important!)

JDBC:

JavaProgram

java.sql.*

Driver

JDBCJVM

DBMS

SQL Query

Results


DB layer: DAO Patterns

DAO implementation:

Cars----------------------------------- CarNr Make Cost ----------------------------------- YPZ400 Ford 50 YPZ412 Ford 80 YPZ600 Mazda 80 WPZ600 BMW 100 WPZ610 BMW 200 WPZ620 BMW 250 PPZ410 Benz 250 PPZ420 Benz 350 PPZ430 Ford 150 YPZ420 Honda 150 ------------------------------------

CarDTO

carnrmakecost

<<interface>>CarDAO

List findAll()

CarDAOImpl.

List findAll() { JDBC connect select * from cars create CarDTOs return CarDTO list} - Client Code -

CarDAO.findAll()Loop

display individual CarDTO

// plus Setter and Getter methods forthese properties


DB layer: ORM Mapping

ORM (Object-Relational Mapping):

Various paradigm mismatch problems (object world vs. relational/entityworld)

We want to call car.save(), rather than writing ’insert into’ statement

Database

JDBC

HibernateMappings Configuration

Client Code

Java Objects

What does Hibernate do for you?


MVC pattern

It is ’the’ design pattern that glues your application together.

Browser

JSP(View)

JavaBean(Model)

Data

request

response

Server

Servlet(Controller)

Container

request

1

2

3

5

4

Key: having a controller


A scenario: Building ShipFast.com

Say you own a delivery service company and want to go online.

Your business partners are online retail companies.

Purpose of moving the operation online is (roughly)

to allow your business partners to send the delivery requests online,calculate the quote and send it back to your partnernotify the shipment to your partner when it is done

KennyCD.comCustomer

KennyCD.comSite

ShipFast.com

Internet InternetBusinessSystem

BusinessSystem


A Generic e-Commerce Architecture

A system typically consists of three layers and security layers.

PresentationLayer

BusinessLayer

DatabaseLayer

Fire

wallHTTP/

HTML

Fire

wall

Proprietary Component

Protocol

DatabaseAccess API

Each “layer” in the diagram has a purpose, architecture and an API.

There are two leaders among the providers of this architecture anddevelopment frameworks: J2EE and Microsoft.NET


A Typical e-Commerce Architecture

Presentation Tier: responsible for working with clients (acceptsHTTP request, returns HTML as response). Different browsers havedifferent display capabilities. Presentation tier should deal withtailoring HTML to the specific client browser type (including mobiledevices)

Business Tier: responsible for business logic, typically this layer haspackaged components working through well-defined interfaces (J2EE:EJB, .NET:COM+). It requires resources such as databaseconnections, transaction management, etc. These resourcerequirements normally make it difficult to support a large number ofclients. The presentation layer communicates with the business tierthrough a method transport protocol (eg., J2EE: RMI/IIOP, .NET:DCOM or SOAP)

Database Tier: responsible for storing data. Communicationbetween Database Tier and Business Tier use a specific API (J2EE:JDBC, .NET: ADO.NET)


ShipFast.com with .NET

Compare this to the generic architecture previously shown:

ASP.NET COM+using Visual Studio.NET

SQLServer or other

ADO.NET compliant DB

Fire

wallHTTP/

HTML

Fire

wall DCOM, MSMQ

or SOAP

ADO.NET

presentationlayer

businesslayer

databaselayer

.NET enterprise

servers


ShipFast.com with J2EE

Compare this to the generic architecture and .NET previously shown:

JSP EJB or JavaBeans

Any JDBC compliant DB

Fire

wallHTTP/

HTML

Fire

wall

RMI / IIOPJMS

or SOAP

JDBC

presentationlayer

businesslayer

databaselayer

J2EE services


Why Web Services?

Companies rely on technologies to create efficiencies and expand marketopportunities.

More and more companies collaborate with a wider circle of suppliers,service providers and strategic partners.

These companies must integrate their disparate applications.

eg., Amazon.com Web services

E-commerce services (third party suppliers): integrated throughAmazon.com’s ecommerce API which is based on Web Services

http://aws.amazon.com/fws/#functionality

Coding for Fun (an implementation example): http://blogs.msdn.

com/coding4fun/archive/2006/10/31/912260.aspx


http://aws.amazon.com/fws/#functionality

http://blogs.msdn.com/coding4fun/archive/2006/10/31/912260.aspx

http://blogs.msdn.com/coding4fun/archive/2006/10/31/912260.aspx

Going back to ShipFast.com

KennyCD.com

Customer

KennyCD.comSite

ShipFast.com

BusinessSystem(.NET)

BusinessSystem(J2EE)

TomBooks.comSite

BusinessSystem(PHP)

Some Other Site


Internet

KennyCD.com

Customer

TomBooks.com

Customer

Internet

how can you communicate with KennyCD.com and many others?integration of heterogeneous business layers that talk differentprotocols and have different data type representationshould be able to access remote functionality without being tied tospecific languages or platforms


Existing technologies for accessing remote functionality

Traditional Remote Procedure Calls (RPC):

.NET Distributed COM (Component Object Model)

J2EE Enterprise JavaBeans

Java RMI

and the list goes on ...

Need one idea to rule them all.


Web Services

Key concept:

Allow applications to share data and invoke capabilities from otherapplications

I Without regard to how those applications were built, what operatingsystem or platform they run on, and what devices are used to accessthem.

Can be called across platforms and operating systems, regardless ofprogramming language.

Key facts:

A standardised way of application-to-application communicationbased on XML open standards (ie., SOAP, WSDL and UDDI) over anInternet protocol backbone.

Major developers include: Apache, IBM, HP, Sun and Microsoft


A bit about SOAP

In late 1990, Microsoft started to think that their remote objectaccess technology COM/DCOM is weak and that they needsomething that is cross-platform – and naturally integrated with theInternet environment.

With their .Net initiative, they started developing a data transmitprotocol called SOAP (Simple Object Access Protocol).

The protocol is based on XML and uses HTTP, FTP and SMTP(Simple Mail Transfer Protocol) as a data transfer protocol.

Microsoft perfected the SOAP standard, they open-sourced this bygiving it to W3C.

W3C made SOAP an official standard for XML messasging

With other vendors following this standard, the way we access remoteobjects may finally become standardised ...


SOAP and Web Services

SOAP is a protocol for moving data across the Internet.

Web services are the remote objects. They use SOAP to transmit data toand from client (client can also be a Web service)

So, SOAP is a part of what makes Web Services possible, but that is notthe complete picture of Web Services.

Web service implementation platform providers:

Microsoft .NET (locked with one Web server, IIS)

Various Java implementationsI J2EE platforms (Jboss, Websphere, WebLogic)I Apache Axis


Web Services Conceptual Architecture (IBM)

http://www-4.ibm.com/software/solutions/webservices/pdf/WSCA.pdf

ServiceRegistry

ServiceRequestor

ServiceProvider

ServiceDescription

ServiceDescription

Service

Find Publish

Bind


http://www-4.ibm.com/software/solutions/webservices/pdf/WSCA.pdf

Web Services Conceptual Architecture (IBM)

Three roles:

service provider: develops an electronic service and registers itsdescription at a publicly accessible service registry.

service registry: hosts web services

service requestor: query the registry to find an electronic servicethat meets his or her requirements. A binding occurs between theservice provider and the service requestor.

Main Web Services Standards:

For service registry: UDDI, Universal Description, Discovery andIntegration (www.uddi.org/)

For service description: WSDL, Web-services Description Language (www.w3.org/TR/wsdl/)

For messages: SOAP, Simple Object Access Protocol(www.w3.org/TR/SOAP/)


www.uddi.org/

www.w3.org/TR/wsdl/

www.w3.org/TR/SOAP/

Interactions between WS and Client

The web service provider declares his services within the UDDI register.



The client looks for a Web service in the UDDI register

Downloads the Web service’s WSDL to build or generate a proxy(stub) for the web service



The client invokes the Web service through the user of the proxy via SOAP


XML Messaging Using SOAP


Simple Object Access Protocol (SOAP)

A SOAP message is an XML document with predefined elements

It also defines data encoding rules

<?xml version=’1.0’ encoding=’UTF-8’?>

<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"

xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"

xmlns:xsd="http://www.w3.org/1999/XMLSchema">

<SOAP-ENV:Body>

<ns1:doGoogleSearch xmlns:ns1="urn:GoogleSearch"

SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">

<key xsi:type="xsd:string">00000000000000000000000000000000</key>

<q xsi:type="xsd:string">shrdlu winograd maclisp teletype</q>

<start xsi:type="xsd:int">0</start>

<maxResults xsi:type="xsd:int">10</maxResults>

</ns1:doGoogleSearch>

</SOAP-ENV:Body>

</SOAP-ENV:Envelope>

Specification:http://www.w3.org/TR/2000/NOTE-SOAP-20000508/


http://www.w3.org/TR/2000/NOTE-SOAP-20000508/

Binding SOAP with a Transfer Protocol

SOAP binding describes how a SOAP message is carried in a transportprotocol (eg., HTTP, SMTP or FTP). For example, to bind SOAP toHTTP:

A SOAP request is wrapped inside an HTTP POST

The HTTP POST request specifies at least two HTTP headers:Content-Type and Content-Length.

Content-Type: defines the MIME type for the SOAP message and thecharacter encoding (optional) used

Content-Length: specifies the number of bytes in the body of theSOAP request or response.


An example of SOAP Binding over HTTP

Here is a request to a web service for the current price of stock DIS:

POST /StockQuote HTTP/1.1

Host: www.stockquoteserver.com

Content-Type: text/xml; charset="utf-8"

Content-Length: nnnn

SOAPAction: "Some-URI"

<SOAP-ENV:Envelope

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"

SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">

<SOAP-ENV:Body>

<m:GetLastTradePrice xmlns:m="Some-URI">

<symbol>DIS</symbol>

</m:GetLastTradePrice>

</SOAP-ENV:Body>



An example of SOAP Binding over HTTP

And here is the response from the service:

HTTP/1.1 200 OK

Content-Type: text/xml; charset="utf-8"

Content-Length: nnnn

<SOAP-ENV:Envelope

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"

SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>

<SOAP-ENV:Body>

<m:GetLastTradePriceResponse xmlns:m="Some-URI">

<Price>34.5</Price>

</m:GetLastTradePriceResponse>

</SOAP-ENV:Body>



An example of SOAP Binding over SMTP

To: <[email protected]>

From: <[email protected]>

Reply-To: <[email protected]>

Date: Tue, 15 Nov 2001 23:27:00 -0700

Message-Id: <[email protected]>

MIME-Version: 1.0

Content-Type: text/xml; charset=utf-8

Content-Transfer-Encoding: QUOTED-PRINTABLE

<?xml version=3D"1.0" encoding=3D"UTF-8"?>

<SOAP-ENV:Envelope

SOAP-ENV:encodingStyle=3D"http://schemas.xmlsoap.org/soap/encoding/"

xmlns:SOAP-ENC=3D"http://schemas.xmlsoap.org/soap/encoding/"

xmlns:SOAP-ENV=3D"http://schemas.xmlsoap.org/soap/envelope/"

xmlns:xsd=3D"http://www.w3.org/2001/XMLSchema"

xmlns:xsi=3D"http://www.w3.org/2001/XMLSchema-instance">

<SOAP-ENV:Body>

<m:echoString xmlns:m=3D"http://soapinterop.org/">

<inputString>get your SOAP over SMTP here !</inputString>

</m:echoString>

</SOAP-ENV:Body>



Web Services Description

Web Service Description is a machine-processable specification of the Webservice’s interface, written in Web Service Description Language (WSDL).

Specification: http://www.w3.org/TR/wsdl

The Web Services Description Language (WSDL) uses XML syntax. Itdescribes a service in terms of the operations that make up the service, themessages that each operation requires, and the parts from which eachmessage is composed.

WSDL is used by the client to generate a proxy (stub) to the Web service.The proxy is then acts as a go-between between the WS and the client.This is usually done by a tool.


http://www.w3.org/TR/wsdl

Web Services Description

Definition

Types

Messages

PortType

Binding

Service

Element

Part

Operation

soap:binding

operation

documentation

port

soap:address

Input

Output

soap:operation

Input

Output


Google Web Service

Google offers a web service that enables programmatic access to its searchengine Three individual operations are provided:

portType of the Web service<portType name="GoogleSearchPort">

<operation name="doGetCachedPage"><input message="typens:doGetCachedPage"/><output message="typens:doGetCachedPageResponse"/>

</operation><operation name="doSpellingSuggestion">

<input message="typens:doSpellingSuggestion"/><output message="typens:doSpellingSuggestionResponse"/>

</operation><operation name="doGoogleSearch">

<input message="typens:doGoogleSearch"/><output message="typens:doGoogleSearchResponse"/>

</operation></portType>

How could we make use of these operations?


Google Web ServiceSuppose we want to produce an html file that provides an information linkto each city whenever a city name is found in a document. TheendElement() method in an SAX implementation.

public void endElement(String uri, String localName, String qName)throws SAXException {

try { if (localName.equals("Person")) {Person = ec.toString();

out.write("<tr><td>"+Person+"</td>");holCount = 0; }

if (localName.equals("Year")) {Year = ec.toString();

if (holCount==0)out.write("<td>"+Year+"</td>");

elseout.write("<tr><td> </td><td>"+Year+"</td>");

holCount++; }if (localName.equals("City")) {

City = ec.toString();

out.write("<td>"+City+"</td>");

String cityRef = cityGoogle.findCityRef(City);

out.write("<td><a href=’"+cityRef+"’>"

+cityRef+"</a></td></tr>"); }}


Google Web ServiceThis code performs a Google search for the city.

import com.google.soap.search.*;public class cityGoogle {

public static String findCityRef(String City) {try {GoogleSearch s = new GoogleSearch();

s.setKey("fQZJXY+RQQO7D0hYnWAY+Xqn5kEahFpL");

s.setQueryString(City);

GoogleSearchResult r = s.doSearch();

GoogleSearchResultElement[] elements

= r.getResultElements();

if(r.getStartIndex() > 0) {return (elements[0].getURL());// first URL from Google

}else {

return ("No results.");}

} catch(Exception e) {return ("Problem searching: " + e.getMessage());

}} // End of findCityRef

}


Going back to ShipFast.com

Application integration using SOAP as a common message format.

Internet

KennyCD.com

Customer

KennyCD.comSite

ShipFast.com

BusinessSystem(.NET)


SOAP/HTML

TomBooks.comSite

BusinessSystem(PHP)

SOAP/HTML

Some Other Site


SOAP/HTML

KennyCD.com

Customer

TomBooks.com

Customer

Internet


Web2.0

Defining Web 2.0 (Tim O’Reilly, http://www.oreillynet.com/lpt/a/6228)Web 2.0 is about using the Web as platform for:

delivering software as a continually-updated service that gets betterthe more people use it,

consuming and remixing data from multiple sources, includingindividual users, while providing their own data and services in a formthat allows remixing by others,

creating network effects through an “architecture of participation”,

and going beyond the page metaphor of Web 1.0 to deliver rich userexperiences

e.g.,

Web 1.0 Web 2.0DoubleClick → Google AdSense

Ofoto → FlickrBritannica Online → Wikipediapersonal websites → blogging

screen scraping → web services


Mashup

Mashup is one of the good examples of Web2.0 in action ...

A Web application building technique that combines content frommore than one source into an integrated experience

Frequently implemented with Ajax from existing Web services(Google, Google Maps, Yahoo, Flickr, YouTube, etc.)

Users can mix many services for “unexpected/creative” usages


Mashup - examples

http://www.housingmaps.com/

- Uses Google Map API and Property Data


http://www.housingmaps.com/

Mashup

http://www.madhusudhan.info/YahooHackDay/SmartEditor.html

This mashup uses APIs from: Amazon eCommerce, Flickr, Yahoo Search,Yahoo Term Extraction


http://www.madhusudhan.info/YahooHackDay/SmartEditor.html

Mashup

http://www.vdiddy.com

APIs: Grouper Video + Yahoo Video Search + YouTube


http://www.vdiddy.com

Mashup Widgets

http://www.netvibes.com or http://www.facebook.com/apps/


http://www.netvibes.com

http://www.facebook.com/apps/

web applications engineering: wrap-upcs9321/15s1/lectures/finalweek.pdf · 2015-06-03 · web...

Documents