Model-View-Controller Architecture in a Systems Analysis and Design Course Dr. Robert F. Zant Illinois State University
Model-View-Controller Architecture in a Systems Analysis and Design Course
Dr. Robert F. Zant
Illinois State University
The Plan
• Curriculum overview
• MVC Concepts
• Example MVC implementation
Curriculum Structure
Systems Development I
Systems Development II Object Oriented Systems DevelopmentSystems Development/Analyst Web Application Development
Directed Project in Information Technology
Systems Development I
• Taken by all IS majors
• Covers Traditional and Object-Oriented SAD
Systems Development II
• Taken by IS majors in Systems Development/Analyst Sequence
• Covers Traditional SAD
• Includes Simulated Project
OO Systems Development
• Taken by IS majors in Web Application Development Sequence
• Covers Object Oriented SAD
• Includes Simulated Project
Directed Project in Information Technology
• Taken by IS majors in both sequences
• Includes Real-World Project
Curriculum Structure
Systems Development I
Systems Development II Object Oriented Systems DevelopmentSystems Development/Analyst Web Application Development
Directed Project in Information Technology
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
MVC Structure
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
Primary Data Flow
Server Side Programming
Client Side Interface Design
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
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)
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
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"; %>
Example Page Controller
<% NOTE: Page Controller to List Products ;
INCLUDE $sys_base$m/Products/table1.m ;
INCLUDE $sys_base$v/Products/table1.v ; %>
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>
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 %>
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>
Example View
SET xslt = $url_base$"v/Products/xslt/table1.xslt" ;
INCLUDE $xmlfile$ ;
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>
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>
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>
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>
Recommended Software
• ODB Script– http://odbscript.com/
• Abyss Web Server– http://www.aprelium.com/
• Cooktop– http://xmlcooktop.com/
• TextPad– http://www.textpad.com/
Thank You
Questions?