CS 4720

Model-View-Controller

CS 4720 – Web & Mobile Systems

CS 4720

Abstractions and Tiers• Every system we seem to build we talk about

tiers• How do we reason about the architecture of a

system?• How can we communicate how the pieces fit

together?

2

CS 4720

A Two-Tier System

3

CS 4720

A Two-Tier System?

4

CS 4720

Describing the World• We generally refer to client/server systems as

“two-tier systems”• Why?• What does that communicate?

5

CS 4720

A Three-Tier System• How might a three-tier

system be different than a two tier?

• Do we add a server?• Do we add a client?• What does it mean to have

three tiers?

6

CS 4720

Context Clues• It’s all in what you’re talking about.• If you’re discussion the

overall system, includingthe client, a common view of a three-tier architecture might be this:

7

CS 4720

Context Switch• What if we are talking about just inside our

application?• We assume that the client is there, but it is

somewhat immaterial• How do we define the layers now?

8

CS 4720

Three-Tier Architecture

9

CS 4720

Three-Tier Architecture• We will see this architecture pattern over and

over again in this class– Web development– Web services– Android (basically all mobile…)

• Here we are discussing it in the context of a RESTful web architecture

10

CS 4720

Principles of REST• Remember this one?

– 3. Addressable Resources– Everything has its place and every place has a thing– “Everything is a resource”

• This is actually key to how we go about building a three-tier web application

11

CS 4720

RESTful Tiers• If every resource is a place, and every place is a

resource, how do we define our resources?• We know the URL would look something like:

– http://mysite.com/users/mss2x• Where:

– mysite.com is the domain– users is the “category of resources”– mss2x is a specific instance of the resource

12

CS 4720

RESTful Tiers• What we want the web server / web

application to do is translate this:– http://mysite.com/users/mss2x

• Into effectively a function call that– Identifies what the user is asking for– Loads a particular resource– Displays the pertinent info about that resource

back to the user

13

CS 4720

Model-View-Controller• This is the definition of what MVC is• The MVC pattern maps:

– Identifies what the user is asking for– Loads a particular resource– Displays the pertinent info about that resource

back to the user• To Model, Controller, View (in that order)

14

CS 4720

MVC

15

CS 4720

MVC

16

CS 4720

Controller• The role of the controller is basically traffic cop• It takes the request from the user and (with the

assistance of the server and routing rules) turns it into a method call of sorts

• It finds the appropriate model to load• It finds the appropriate view to load• It returns the whole thing back to the user

17

CS 4720

Model• The model is the representation of the data• This may or may not be directly linked to a

database (but often is in larger apps)• A model is often translated directly into a DB

table, with the columns as its attributes• Think “class definition w/ DB backend”• Often contains relationship rules (a Student has

many Classes, for instance)

18

CS 4720

View• The closest thing to what you’ve been dealing

with so far is the view• It’s effectively an HTML template that will be

populated with the appropriate data from the loaded model

• It often has PHP (or whatever) embedded in it• All UI components go here

19

CS 4720

Putting it all Together• So, if you were building a blog, what might

some of the models be?• What are the resources that should have

addresses to them?• How do they relate to each other?

20

CS 472021

REST and MVC• REST and MVC aren’t directly related, but they

intersect in many, many ways• The idea of “nouns” in the system – of

addressable resources – is a major component of both

• In general, a good MVC system will be RESTful, although a RESTful system does not have to follow MVC.

CS 4720

Example Code• What do some of these things look like?

22