1. M-V-C for web applications

2. Model for Web Applications model consists of data and system state database tables –persistent data session information –current system state data business logic (eCommerce) –rules governing the transaction

3. View for web applications view gives a presentation of the model client-side presentation in a browser window –(D)HTML –CSS stylesheets –server-side templates administrative information –server output logs

4. Controller for web applications controller handles events user-generated events –client-side scripting –http request processing –redirection –preprocessing system maintenance –web application management

5. M-V-C Example PHP /CGI Web Server Web Browser presentationrequest processingprogram logic controllerviewmodel two-tier client-server architecture

6. M-V-C Example JSP /ASP /CF Web Server Web Browser entity database view controller view/ controller model multi-tier client server architecture

7. development of absence monitoring web app model data –student ids and names –number of absences model API –list names –list names and absences –update absences implement as a relational database

8. development of absence monitoring web app views –attendance register –list of absences –add a student –delete a student implemented in a browser –DHTML interface –pages dynamically generated from model

9. development of absence monitoring web app controller –handle requests for views generate correct page from the database –update the model translate user action into a database update –update the views refresh browser when view changes

10. build the model design data structure implement tables create SQL queries –support all required functionality test queries against sample data –this is a simple view

11. build the view develop server side scripts to query the database –SQL already tested is the model API design web pages and embed the scripts –view now updates from the model

12. build the controller add client side scripts –JavaScript –HMTL forms –input validation add navigation functionality –frames –layers update confirmation pages

13. web application frameworks

14. technologies designed to implement web apps in M-V-C –model 2 architecture provide standard re-useable components for model, view and controller greatly ease the design of large sophisticated web apps significant learning curve

15. web application frameworks typically xml configuration files glue components into an application implement standard web concepts –interface features (forms) –request and response objects –sessions –database interactions many frameworks exist

16. web application frameworks Many frameworks are being developed… –JavaServer Faces, Struts, Webwork2 –WebObjects (.NET specific) –Model Glue (ColdFusion specific) –Velocity, Fusebox, Mach II, Maypole, Catalyst, Tapestry, ZNF, Phrame, Cocoon, Ruby on Rails, … Most, but not all, are based around M-V-C

17. Laboratory Five

18. var element = theData.documentElement; DOMVisualiser

19. document.writeln (element.nodeName); fellowship DOMVisualiser

20. currentNode = element.childNodes.item (i); document.write (currentNode.nodeName); item (i) nodeName member DOMVisualiser

21. theMembers = theData.getElementsByTagName ("member"); theNine NodeList consisting of all member elements

22. if (m.getAttribute ("age") > 100) { bgcolour = "black"; colour = "white";} document.write ( + m.getAttribute('name') + ); theNine

23. XMLEditor fellowship2.xml fellowTable.xsl Internet Explorer XML Editor page results page MSDOM Document Object MSDOM Transform Object displayMember()

24. function deleteMember () theName = document.controls.gonner.value; XMLEditor theMembera = theData.getElementsByTagName(memebr"); NodeList consisting of all member elements

25. function deleteMember () element = m.parentNode; element.removeChild (m); XMLEditor remove element with matching name from its parent

26. function addMember () theName = theData.createAttribute ("name"); new name attribute node with value obtained from the form theName.value = document.controls.name.value; XMLEditor

27. function addMember () newMember = theData.createElement ("member"); newMember.setAttributeNode(theName); new member node created and name attribute attached XMLEditor

28. function addMember () element.item (0).appendChild (newMember); element = theData.getElementsByTagName("fellowship"); fellowship node located and new member node attached XMLEditor