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

WebServer

WebBrowser

presentation request processing program logic

controllerview model

two-tier client-server architecture

M-V-C Example

JSP/ASP/CF

WebServer

WebBrowser

entity

entity

database

view

controller

view/controller model

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

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 (“<td> + m.getAttribute('name') + “</td>”);

theNine

XMLEditor

fellowship2.xml

fellowTable.xsl

Internet Explorer

XMLEditorpage

resultspage

MSDOMDocument

Object

MSDOMTransform

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