model-view-controller architecture in a systems analysis and design course dr. robert f. zant...
TRANSCRIPT
![Page 1: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/1.jpg)
Model-View-Controller Architecture in a Systems Analysis and Design Course
Dr. Robert F. Zant
Illinois State University
![Page 2: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/2.jpg)
The Plan
• Curriculum overview
• MVC Concepts
• Example MVC implementation
![Page 3: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/3.jpg)
Curriculum Structure
Systems Development I
Systems Development II Object Oriented Systems DevelopmentSystems Development/Analyst Web Application Development
Directed Project in Information Technology
![Page 4: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/4.jpg)
Systems Development I
• Taken by all IS majors
• Covers Traditional and Object-Oriented SAD
![Page 5: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/5.jpg)
Systems Development II
• Taken by IS majors in Systems Development/Analyst Sequence
• Covers Traditional SAD
• Includes Simulated Project
![Page 6: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/6.jpg)
OO Systems Development
• Taken by IS majors in Web Application Development Sequence
• Covers Object Oriented SAD
• Includes Simulated Project
![Page 7: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/7.jpg)
Directed Project in Information Technology
• Taken by IS majors in both sequences
• Includes Real-World Project
![Page 8: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/8.jpg)
Curriculum Structure
Systems Development I
Systems Development II Object Oriented Systems DevelopmentSystems Development/Analyst Web Application Development
Directed Project in Information Technology
![Page 9: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/9.jpg)
MVC Architecture
• Used in both second level courses as a unifying theme
• Provides an architectural template for novice system developers
• Use is prevalent in industry
![Page 10: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/10.jpg)
MVC Structure
![Page 11: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/11.jpg)
MVC
• Controller - Interprets user requests and invokes Model and View
• Model - contains application logic and access logic for persistent data
• View - displays model results to user
![Page 12: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/12.jpg)
Primary Data Flow
![Page 13: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/13.jpg)
Server Side Programming
![Page 14: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/14.jpg)
Client Side Interface Design
![Page 15: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/15.jpg)
Guidelines
• All responses from users are processed first by a Front Controller
• Communication of user responses to the Front Controller is by name (e.g., field names on HTML forms)
• A Front Controller invokes a Page Controller, not a Model or View
• A Page Controller invokes one Model and one View
![Page 16: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/16.jpg)
Guidelines (cont.)
• A Model executes application logic and accesses data stores (contains no HTML)
• A Model creates an XML file or an object containing its results
• Communication of Model results to a View are by name (e.g., tags in XML)
![Page 17: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/17.jpg)
Guidelines (cont.)
• A View creates a presentation stream
• A View contains no application logic
• A View obtains all non-constant text data from the XML file or result object produced by the Model
• A View does not directly reference any data in a Model or URL for the site
![Page 18: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/18.jpg)
Example Front Controller
<% NOTE: This is the Front Controller ; DEFAULT pc = "menu", sys_base = $path_Translated_dir$"/", url_base = http:"//"$server_name$$path_info_dir$"/", home = $url_base$index.odb ;
SESSION LOGIN = "login.odb?from=$pc$", TIMEOUT = 10 ;
INCLUDE $sys_base$"c/"$pc$".c"; %>
![Page 19: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/19.jpg)
Example Page Controller
<% NOTE: Page Controller to List Products ;
INCLUDE $sys_base$m/Products/table1.m ;
INCLUDE $sys_base$v/Products/table1.v ; %>
![Page 20: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/20.jpg)
Example Model
<% NOTE: Model to List Products ; DATABASE "DSN=myProducts" ; SELECT Category, ProductID, Heading, Description, UnitPrice, UnitsOnHand FROM Products ORDER BY ProductID ; OUTPUT $xmlfile$ ; NOTE: xmlfile defined during login;%> <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl” href="$xslt$”?>
<root> <links> <home>$home$</home> </links>
![Page 21: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/21.jpg)
Example Model (cont.)
<products><% EACHROW %> <row> <ProductID>$ProductID$</ProductID> <Category>$Category$</Category> <Description>$Description$</Description> <UnitPrice>$UnitPrice$</UnitPrice> <UnitsOnHand>$UnitsOnHand$</UnitsOnHand> </row><% ENDROW %> </products> </root> <% OUTPUT %>
![Page 22: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/22.jpg)
Example XML File
<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="$xslt$" ?><root> <links> <home>http://localhost/new/widgets/index.odb</home> </links> <products> <row> <ProductID>3</ProductID> <Heading>Reinforced plastic 8 inch</Heading> <Category>Plastic Widgets</Category> <Description>Oversized polyethelene with steel</Description> <UnitPrice>10.0000</UnitPrice> <UnitsOnHand>70</UnitsOnHand> </row> </products> </root>
![Page 23: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/23.jpg)
Example View
SET xslt = $url_base$"v/Products/xslt/table1.xslt" ;
INCLUDE $xmlfile$ ;
![Page 24: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/24.jpg)
Example XSL
<?xml version="1.0"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:output method="html" omit-xml-declaration="yes"/><xsl:template match="/"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="content-type" content="text/html" /><title>World Wide Widgets</title><style type="text/css"> @import url(v/widgets.css);</style></head><body>
![Page 25: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/25.jpg)
Example XSL (cont.)
<div id="pageHeader"><a><xsl:attribute name="href"> <xsl:value-of select=“root/links/home"/> </xsl:attribute><h1>World Wide Widgets</h1></a></div> <!-- End of Page Header --><xsl:apply-templates /><div id="pageFooter">[<a><xsl:attribute name="href"> <xsl:value-of select=“root/links/home"/> </xsl:attribute>Continue...</a>]</div> <!-- End of Page Footer --></body></html></xsl:template>
![Page 26: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/26.jpg)
Example XSL (cont.)
<xsl:template match=“products"> <table> <caption>Products<br />by Product ID</caption> <tr> <th>Product ID</th><th>Product</th> <th>Category</th><th>Description</th> <th>Price</th><th>On Hand</th> </tr> <xsl:apply-templates select=“row"/> </table></xsl:template>
![Page 27: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/27.jpg)
Example XSL (cont.)
<xsl:template match=“row"> <tr> <td><xsl:value-of select=“ProductID" /></td> <td><xsl:value-of select="Heading" /></td> <td><xsl:value-of select="Category" /></td> <td><xsl:value-of select="Description" /></td> <td><xsl:value-of select="format-number (UnitPrice,'$###,##0.00')" /></td> <td><xsl:value-of select="UnitsOnHand" /></td> </tr></xsl:template></xsl:stylesheet>
![Page 28: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/28.jpg)
Recommended Software
• ODB Script– http://odbscript.com/
• Abyss Web Server– http://www.aprelium.com/
• Cooktop– http://xmlcooktop.com/
• TextPad– http://www.textpad.com/
![Page 29: Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University](https://reader031.vdocuments.mx/reader031/viewer/2022032706/56649ddc5503460f94ad40ca/html5/thumbnails/29.jpg)
Thank You
Questions?