Model-View-Controller CS 4720 Web & Mobile Systems - - PowerPoint PPT Presentation

CS ¡4720 ¡

Model-­‑View-­‑Controller ¡

CS ¡4720 ¡– ¡Web ¡& ¡Mobile ¡Systems ¡ ¡

CS ¡4720 ¡

Abstrac/ons ¡and ¡Tiers ¡

• Every ¡system ¡we ¡seem ¡to ¡build ¡we ¡talk ¡about ¡

/ers ¡

• 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-­‑/er ¡systems” ¡

• Why? ¡
• What ¡does ¡that ¡communicate? ¡

5

CS ¡4720 ¡

A ¡Three-­‑Tier ¡System ¡

• How ¡might ¡a ¡three-­‑/er ¡ ¡

system ¡be ¡different ¡than ¡a ¡ ¡ two ¡/er? ¡

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

three ¡/ers? ¡

6

CS ¡4720 ¡

Context ¡Clues ¡

• It’s ¡all ¡in ¡what ¡you’re ¡talking ¡about. ¡
• If ¡you’re ¡discussion ¡the ¡
• verall ¡system, ¡including ¡

the ¡client, ¡a ¡common ¡ ¡ view ¡of ¡a ¡three-­‑/er ¡ ¡ architecture ¡might ¡ ¡ be ¡this: ¡

7

CS ¡4720 ¡

Context ¡Switch ¡

• What ¡if ¡we ¡are ¡talking ¡about ¡just ¡inside ¡our ¡

applica/on? ¡

• 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 ¡paTern ¡over ¡and ¡
• ver ¡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-­‑/er ¡web ¡applica/on ¡

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: ¡

– hTp://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 ¡

applica/on ¡to ¡do ¡is ¡translate ¡this: ¡

– hTp://mysite.com/users/mss2x ¡

• Into ¡effec/vely ¡a ¡func/on ¡call ¡that ¡

– Iden/fies ¡what ¡the ¡user ¡is ¡asking ¡for ¡ – Loads ¡a ¡par/cular ¡resource ¡ – Displays ¡the ¡per/nent ¡info ¡about ¡that ¡resource ¡ back ¡to ¡the ¡user ¡

13

CS ¡4720 ¡

Model-­‑View-­‑Controller ¡

• This ¡is ¡the ¡defini/on ¡of ¡what ¡MVC ¡is ¡
• The ¡MVC ¡paTern ¡maps: ¡

– Iden/fies ¡what ¡the ¡user ¡is ¡asking ¡for ¡ – Loads ¡a ¡par/cular ¡resource ¡ – Displays ¡the ¡per/nent ¡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 ¡rou/ng ¡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 ¡representa/on ¡of ¡the ¡data ¡
• This ¡may ¡or ¡may ¡not ¡be ¡directly ¡linked ¡to ¡a ¡

database ¡(but ¡oben ¡is ¡in ¡larger ¡apps) ¡

• A ¡model ¡is ¡oben ¡translated ¡directly ¡into ¡a ¡DB ¡

table, ¡with ¡the ¡columns ¡as ¡its ¡aTributes ¡

• Think ¡“class ¡defini/on ¡w/ ¡DB ¡backend” ¡
• Oben ¡contains ¡rela/onship ¡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 ¡effec/vely ¡an ¡HTML ¡template ¡that ¡will ¡be ¡

populated ¡with ¡the ¡appropriate ¡data ¡from ¡the ¡ loaded ¡model ¡

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

19

CS ¡4720 ¡

Pueng ¡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 ¡4720 ¡

21

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 ¡

• f ¡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