E-Learning Material

Web Application Design 3

Web Application Design

Architecture

Which objects go where?

The final modelnotation

Summary

Architecture

Why should the architecture affect the app.?

Recap:single tier two tier three tier

Partitioning the application

Three fundamental parts Presentation

means by which app. displays output and accepts input

Logic computation that is programmed into the application

Data quantities and values that your app. processes and

stores

Single tierPresentation, Logic and Data all performed on one machine

Known as ‘standalone’ application

Everything self-contained - no connection to network required

Difficult to synchronise data with other machines

Data integrity damaged by time delays - not real-time changes

Change the logic, every machine to update

Platform dependent (PC, Mac, Unix etc.)

Two tier

Client-server framework

Data resides on server, Presentation and Logic on client

Data is centralised

System performance subject to network conditions and utilisation of server

Logic updates still apply to each client

Three tierPresentation layer resident on client

Logic performed by separate server

Data on network database server

Quick to change logic without affecting users

Client’s OS must be compatible with Logic server’s OS

Still dependent on network performance

Presentation at mercy of weakest computer - 16 colour client cannot display photos

Web App. Architecture

With three tier, we can use a browser for presentation Only has to process ASCII text-based HTML to

produce web pages Platform independent To be operational, two things are required:

Browser must be on desktop machine Desktop needs access to network via TCP/IP

Thin Client

input marks

input attendance

create marking scheme

login

authenticate<<include>>

check marks

student

read timetable

<<include>>

tutor

get mark scheme

Example

<<include>>

<<include>>

<<include>>

Why is this <<include>>?

Should it not be <<extend>>?

input marks

input attendance

create marking scheme

login

authenticate<<include>>

check marks

student

read timetable

<<include>>

tutor

get mark scheme

Example - presentation

<<include>>

<<include>>

<<include>>

input marks

input attendance

create marking scheme

login

authenticate<<include>>

check marks

student

read timetable

<<include>>

tutor

get mark scheme

Example - logic

<<include>>

<<include>>

<<include>>

input marks

input attendance

create marking scheme

login

authenticate<<include>>

check marks

student

read timetable

<<include>>

tutor

get mark scheme

Example - data?

The use case text gives us the complete

process - if we are inputting marks then

we will have identified a database object

..similarly if we are creating a new marking scheme then it must be saved somewhere - in a

database object

..and attendance marks must be stored centrally (more data)...

<<include>>

<<include>>

<<include>>

So far...

We have identified the user’s requirements and produced textual descriptions for each operation

We have produced a use case diagram to graphically represent the model

We identified the objects from the noun phrases that had behaviour

We have examined the sequence of messages passed between objects

All we need to do now is:

Map the application logic to the user’s requirements

Develop the navigation

Decide what the user will see

Communicate our design with the user and coder

Component Diagram Notation

Document that sends output to client - otherwise known as ‘client page’

Document that does not send output to client - also referred to as ‘server page’

navigation link

Example

login

authenticate login

bad login

browse index

valid login

invalid login

redirect

tutor index

timetable

click tutor index link

click timetable

link

authenticate tutor login

valid login

not tutor

invalid user

redirect

Technology - CGI

login.htm

chcklog.cgi

badlogin.cgi

index.htm

valid login

invalid login

redirect

tutind.htm

tmetble.htm

click tutor index link

click timetable

link

chcltlog.cgi

valid login

nottut.cgi

invalid user

redirect

Technology - ASP

login.asp

chcklog.asp

badlogin.asp

index.asp

valid login

invalid login

redirect

tutind.asp

tmetble.asp

click tutor index link

click timetable

link

chcltlog.asp

valid login

nottut.asp

invalid user

redirect

Technology - JSP

login.jsp

chcklog.jsp

badlogin.jsp

index.jsp

valid login

invalid login

redirect

tutind.jsp

tmetble.jsp

click tutor index link

click timetable

link

chcltlog.jsp

valid login

nottut.jsp

invalid user

redirect

SummaryDesign is where the abstraction of the business takes its first step into the reality of software

Design starts with the analysis model and architecture as the major inputs

The design model can be mapped straight to code

Component diagrams visualise components, interfaces and relationships

Summary 2Proper partitioning of the business objects in a Web App. is critical and depends on the architecture In Thin Web Client apps., actors interact

only with client pages;Server pages interact only with server

resources In Thick Web Client apps., client can

execute business logic with scripts, applets or ActiveX (Microsoft) components

Summary 3

Various technologies to use:Common Gateway Interface server-side

scriptsJava Server PagesVBscript on clientJavaScript on clientActive Server Pages - more to follow later...