E-Learning Material Web Application Design 3

Web Application Design Architecture Which objects go where? The final model notation 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 tier Presentation, 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 tier Presentation 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 > check marks student read timetable > tutor get mark scheme Example > Why is this >? Should it not be >?

input marks input attendance create marking scheme login authenticate > check marks student read timetable > tutor get mark scheme Example - presentation >

input marks input attendance create marking scheme login authenticate > check marks student read timetable > tutor get mark scheme Example - logic >

input marks input attendance create marking scheme login authenticate > check marks student read timetable > 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)... >

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 indextimetable 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.htmtmetble.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.asptmetble.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.jsptmetble.jsp click tutor index link click timetable link chcltlog.jsp valid login nottut.jsp invalid user redirect

Summary Design 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 2 Proper 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 scripts Java Server Pages VBscript on client JavaScript on client Active Server Pages - more to follow later...