m-v-c for web applications. model for web applications model consists of data and system state...
TRANSCRIPT
![Page 1: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/1.jpg)
M-V-C for web applications
![Page 2: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/2.jpg)
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
![Page 3: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/3.jpg)
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
![Page 4: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/4.jpg)
Controller for web applications
• controller handles events
• user-generated events– client-side scripting– http request processing– redirection– preprocessing
• system maintenance– web application management
![Page 5: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/5.jpg)
M-V-C Example
PHP/CGI
WebServer
WebBrowser
presentation request processing program logic
controllerview model
two-tier client-server architecture
![Page 6: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/6.jpg)
M-V-C Example
JSP/ASP/CF
WebServer
WebBrowser
entity
entity
database
view
controller
view/controller model
model
multi-tier client server architecture
![Page 7: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/7.jpg)
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
![Page 8: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/8.jpg)
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
![Page 9: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/9.jpg)
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
![Page 10: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/10.jpg)
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
![Page 11: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/11.jpg)
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
![Page 12: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/12.jpg)
build the controller
• add client side scripts– JavaScript– HMTL forms– input validation
• add navigation functionality– frames– layers
• update confirmation pages
![Page 13: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/13.jpg)
web application frameworks
![Page 14: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/14.jpg)
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
![Page 15: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/15.jpg)
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
![Page 16: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/16.jpg)
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
![Page 17: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/17.jpg)
Laboratory Five
![Page 18: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/18.jpg)
var element = theData.documentElement;
DOMVisualiser
![Page 19: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/19.jpg)
document.writeln (element.nodeName);
“fellowship”
DOMVisualiser
![Page 20: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/20.jpg)
currentNode = element.childNodes.item (i);document.write (currentNode.nodeName);
item (i) nodeName “member”
DOMVisualiser
![Page 21: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/21.jpg)
theMembers = theData.getElementsByTagName ("member");
theNine
NodeList consisting of all member elements
![Page 22: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/22.jpg)
if (m.getAttribute ("age") > 100) { bgcolour = "black"; colour = "white";}
document.write (“<td> + m.getAttribute('name') + “</td>”);
theNine
![Page 23: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/23.jpg)
XMLEditor
fellowship2.xml
fellowTable.xsl
Internet Explorer
XMLEditorpage
resultspage
MSDOMDocument
Object
MSDOMTransform
Object displayMember()
![Page 24: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/24.jpg)
function deleteMember () theName = document.controls.gonner.value;
XMLEditor
theMembera = theData.getElementsByTagName(“memebr");
NodeList consisting of all member elements
![Page 25: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/25.jpg)
function deleteMember () element = m.parentNode; element.removeChild (m);
XMLEditor
remove element with matching name from its parent
![Page 26: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/26.jpg)
function addMember () theName = theData.createAttribute ("name");
new “name” attribute node with value obtained from the form
theName.value = document.controls.name.value;
XMLEditor
![Page 27: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/27.jpg)
function addMember () newMember = theData.createElement ("member");
newMember.setAttributeNode(theName);
new “member” node created and name attribute attached
XMLEditor
![Page 28: M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current](https://reader036.vdocument.in/reader036/viewer/2022070306/5515e687550346d46f8b4f5d/html5/thumbnails/28.jpg)
function addMember ()
element.item (0).appendChild (newMember);
element = theData.getElementsByTagName("fellowship");
fellowship node located and new “member” node attached
XMLEditor