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?