M-V-C for web applications

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

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

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

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

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

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

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

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

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

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

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

web application frameworks

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

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

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

Laboratory Five

var element = theData.documentElement; DOMVisualiser

document.writeln (element.nodeName); fellowship DOMVisualiser

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

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

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

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

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

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

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

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

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