MVC for web applications

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
presentation
request processing
program logic
PHP /CGI
Web Server
Web Browser
controller
view
model
two-tier client-server architecture
6
M-V-C Example
model
entity
multi-tier client server architecture
JSP /ASP /CF
Web Server
Web Browser
database
controller
entity
view
view/ controller
model
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
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

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
DOMVisualiser
var element theData.documentElement
19
DOMVisualiser
fellowship
document.writeln (element.nodeName)
20
DOMVisualiser
item (i) nodeName member
currentNode element.childNodes.item
(i) document.write (currentNode.nodeName)
21
theNine
NodeList consisting of all member elements
theMembers theData.getElementsByTagName
("member")
22
theNine
if (m.getAttribute ("age") gt 100) bgcolour
"black" colour "white"
document.write (lttdgt m.getAttribute('name')
lt/tdgt)
23
XMLEditor
fellowship2.xml
Internet Explorer
fellowTable.xsl
MSDOM Document Object
MSDOM Transform Object
displayMember()
XML Editor page
results page
24
function deleteMember ()
XMLEditor
theName document.controls.gonner.value
theMembera theData.getElementsByTagName(memebr"
)
NodeList consisting of all member elements
25
function deleteMember ()
XMLEditor
element m.parentNode element.removeChild (m)
remove element with matching name from its parent
26
function addMember ()
XMLEditor
theName theData.createAttribute ("name")
theName.value document.controls.name.value
new name attribute node with value obtained
from the form
27
function addMember ()
XMLEditor
newMember theData.createElement ("member")
newMember.setAttributeNode(theName)
new member node created and name attribute
attached
28
function addMember ()
XMLEditor
element theData.getElementsByTagName("fellowship
")
element.item (0).appendChild (newMember)
fellowship node located and new member node
attached