ELearning Material Web Application Design 3 Web Application

E-Learning Material Web Application Design 3

Web Application Design Architecture Which objects go where? The final model l notation Summary

Architecture Why should the architecture affect the app. ? Recap: single tier l two tier l three tier l

Partitioning the application Three fundamental parts l Presentation l l Logic l l means by which app. displays output and accepts input computation that is programmed into the application Data l 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 l l l Only has to process ASCII text-based HTML to produce web pages Platform independent To be operational, two things are required: l l l Browser must be on desktop machine Desktop needs access to network via TCP/IP Thin Client

Example tutor input attendance input marks <<include>> authenticate <<include>> check marks login <<include>> student Why is this <<include>>? get mark scheme create marking scheme read timetable Should it not be <<extend>>?

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

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

Example - data? . . and attendance marks must be stored centrally (more data). . . tutor input attendance The use case text gives us the complete process - if we are inputting marks then we will have identified a database object input marks <<include>> authenticate <<include>> check marks login <<include>> student get mark scheme create marking scheme read timetable . . similarly if we are creating a new marking scheme then it must be saved somewhere - in a database object

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’ navigation link Document that does not send output to client - also referred to as ‘server page’

Example redirect login invalid login authenticate tutor login click tutor index link invalid user bad login tutor index redirect authenticate login valid login browse index not tutor click timetable link timetable

Technology - CGI redirect login. htm invalid login chcltlog. cgi click tutor index link invalid user badlogin. cgi tutind. htm redirect chcklog. cgi valid login index. htm nottut. cgi click timetable link tmetble. htm

Technology - ASP redirect login. asp invalid login chcltlog. asp click tutor index link invalid user badlogin. asp tutind. asp redirect chcklog. asp valid login index. asp nottut. asp click timetable link tmetble. asp

Technology - JSP redirect login. jsp invalid login chcltlog. jsp click tutor index link invalid user badlogin. jsp tutind. jsp redirect chcklog. jsp valid login index. jsp nottut. jsp click timetable link tmetble. jsp

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 l In Thin Web Client apps. , actors interact only with client pages; l l Server pages interact only with server resources In Thick Web Client apps. , client can execute business logic with scripts, applets or Active. X (Microsoft) components

Summary 3 Various technologies to use: Common Gateway Interface server-side scripts l Java Server Pages l VBscript on client l Java. Script on client l Active Server Pages - more to follow later. . . l