E-Learning Material

1. E-Learning Material Web Application Design 3

2. Web Application Design • Architecture • Which objects go where? • The final model • notation • Summary

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

4. 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

5. 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.)

6. 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

7. 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

8. 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

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

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

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

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

13. 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

14. 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

15. 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’

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

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

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

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

20. 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

21. 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

22. 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...