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
Top Related