Web Application Architectureand Communication

Displaying a Web page in a Browser

• <a href= http://www.cems.uwe.ac.uk/~cjwallac/apps/poll2/tally.php?pollid=2

> Poll results</a>

Dynamic Web page needed when:

• consistent look and feel on each page of a large site is required

• data is derived from a database

• content depends on real time

• content depend on user choice

• business transactions e.g. e-commerce…

3-tier architecture

• A Presentation layer using Browser technology

• An Application layer using a web application server platform + application programs

• A Persistence layer using a relational database or other data store technology

(Level 1 Diagram)

usersa

information need

presentation layer

1

application layer

2

HTTP requests

persistence layer

3

SQL requests tables

HTML files

information

Browser such as IE6, FoxFire

Apache or MS IIS server +PHP

MySQL RDBMS

Presentation layer arch

• Decoding URLs : protocol/host/file– Host name converted to IP address(164.11.8.19) – www.dnsstuff.com

• Issue request to remote server using appropriate protocol (usually HTTP)

• accept the returned HTML (or JPEG, ..) file • Issue requests for any embedded links (<img src=red.gif/>• render (i.e. create a 2-d image ) the HTML• allow plug-ins to handle new file types• execute client-side scripts in JavaScript• support interaction between client-side scripts and the web page

(DHTML)• accept user input via a variety of controls on a form

Persistence layer arch

• interaction with the database using standard languages e.g. SQL queries using database-specific protocol over TCP/IP

• define and modify the data structures (e.g. tables) themselves ( the Database Schema)

• insert, update and delete data• maintain data persistently, with backup and recovery• handle transactions to support concurrent access to the

database via locking et• optimise access by compilation of queries, indexing,

replication of tables etc.

Application Layer arch

• Server (Apache, IIS)– Identifying appropriate action to take – fetch a file, pass request to an

interpreter– Sending output back to caller in MIME package– Support for:

• thousands of concurrent users • multi-threading [ allow multiple processes to run concurrently]• caching [holding results in a temporary store to reduce re-calculation]

• Server Script (e.g. in PHP)– Interacting with the server (accessing input and generating output)– interpreting the requests according to business rules and past

transactions from this client– requesting the appropriate data from the Persistence layer– computing derived data– creating the HTML (or GIF, MIDI..) for the page

Making sense

• We will be using a Patterns approach to structure our learning and analysis of systems and technology

• 3-tier architecture is a ‘Layered architecture’ – we will study this in detail next week.

• It depends on communication between programs in the layers, so we will look first at communications between processes.

Communication

• The ‘glue’ in this architecture is communication between software in the layers

• A single request from a user results in a complex flurry of communications and executions

• The flurry is composed of hundreds of simple interactions

• Sequence diagrams can be useful to provide a simplified description

Simple Interaction

• Call/reply pattern

caller callee

parameters

function

reply

Call – reply pattern

• Purpose– A local or remote process must be invoked,

sending parameter values to the process and receiving a response back.

• Multiple solutions– How parameter values are supplied– How the result is packaged for reply

A function call in PHP

• <?php print date(“H:I”); ?> in a php script– the script is the caller– the date procedure is the callee – the string “H:I” is the parameter

• Parameters identified by POSITION

– the function is to get the current date and time –

– the reply – a string containing the time in the required format e.g. “13:45”

A browser requests a page

• The user clicks on a link on a page. The link has an href=http://host/dir/page.html– The browser is the caller– The web server program(Apache or IIS) on

the machine host is the callee.– The string “dir/page.html” is the parameter– The function is to read that file in its file store– The reply is the contents of the file as a MIME

package containing an HTML file• Content-type: text/html

A browser requests a script to execute

• The user clicks on a link on a page. href=http://host/dir/getemp.php?empno=5– The browser is the caller– The web server on the machine host is the callee.– The string “dir/getemp.php?empno=5” is the

parameter– The function when the suffix is php is to find the

script, call it with the parameter and get the output. – The reply is the reply from getemp.php packaged as

HTML in MIME

Server runs a PHP script

• The web server is the caller• The getemp.php script is the callee• The parameter is empid=5

• Parameters are name/value couplets

• The function is to find the details of employee 5 and format a report

• to perform this function, the script calls mysql_connect procedures which in turn calls the mySQL server ….

• The reply is HTML text

Simple Interaction Variations• How are parameters distinguished

– By position– By name

• How is the reply packaged?• How is the interface defined?

– what parameters are required– what the effect of those parameters are– what replies to expect in what circumstances

• Does the process always produce the same output for the same input or does is depend in past calls?

• How does the caller find the callee?• What does the caller do when is waiting for a reply?• What happens if the callee doesn’t reply?• How long should the caller wait until it thinks the callee isn’t going to reply?• Is a reply always required?

Sequence diagram of SMS bus times requestsmsrequest

user :

078. / mobile phone : Message centre : Clickatell : web03 / web server : smsrequest : mysql :

bus 99()

076.. bus 99()

078 .. 076.. bus 99()

mo.php?text=bus+99&from=078()

mo.php :

text=bus 99, from=078()

text=99&from=078&code=BUS()

select dtime from service, timetable...()

table dtime, destination

Reply: next 99 departures ..

req?text=next+99+dep&to=078()

message centre 2 :

to 078 next 99 dep()

next 99 departures()

read()

A Pattern

• A pattern recurs in different guises – have the same overall structure and purpose,– with slight differences

• Patterns help us understand and describe complex systems

• Patterns ‘normalise’ descriptions – one thing in one place

• Same unit plays different ‘roles’ – webserver is callee with respect to (wrt) browser,

caller wrt getemp.php• Patterns are ‘fractal’

Simple PHP Calculator

• The workshop will get you to install and extend a simple interactive calculator.

• The coursework will require you to develop a simple PHP Calculator with a backend database e.g.

– www.eirpharm.com has an alcohol units calculator