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

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? ¡ CS ¡4720 ¡ 2

A ¡Two-­‑Tier ¡System ¡ CS ¡4720 ¡ 3

A ¡Two-­‑Tier ¡System? ¡ CS ¡4720 ¡ 4

Describing ¡the ¡World ¡ • We ¡generally ¡refer ¡to ¡client/server ¡systems ¡as ¡ “two-­‑/er ¡systems” ¡ • Why? ¡ • What ¡does ¡that ¡communicate? ¡ CS ¡4720 ¡ 5

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? ¡ CS ¡4720 ¡ 6

Context ¡Clues ¡ • It’s ¡all ¡in ¡what ¡you’re ¡talking ¡about. ¡ • If ¡you’re ¡discussion ¡the ¡ overall ¡system, ¡including ¡ the ¡client, ¡a ¡common ¡ ¡ view ¡of ¡a ¡three-­‑/er ¡ ¡ architecture ¡might ¡ ¡ be ¡this: ¡ CS ¡4720 ¡ 7

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? ¡ ¡ CS ¡4720 ¡ 8

Three-­‑Tier ¡Architecture ¡ CS ¡4720 ¡ 9

Three-­‑Tier ¡Architecture ¡ • We ¡will ¡see ¡this ¡architecture ¡paTern ¡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 ¡ CS ¡4720 ¡ 10

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 ¡ CS ¡4720 ¡ 11

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 ¡ CS ¡4720 ¡ 12

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 ¡ CS ¡4720 ¡ 13

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) ¡ CS ¡4720 ¡ 14

MVC ¡ CS ¡4720 ¡ 15

MVC ¡ CS ¡4720 ¡ 16

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 ¡ CS ¡4720 ¡ 17

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) ¡ CS ¡4720 ¡ 18

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 ¡ CS ¡4720 ¡ 19

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? ¡ CS ¡4720 ¡ 20

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

Example ¡Code ¡ • What ¡do ¡some ¡of ¡these ¡things ¡look ¡like? ¡ CS ¡4720 ¡ 22