Top Banner
Hands on MVC Mastering the Web
94

Hands on MVC - Mastering the Web

Dec 07, 2014

Download

Education

Web programming workshop for the web programming class at University of Brescia, Italy.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Hands on MVC - Mastering the Web

Hands on MVC

Mastering the Web

Page 2: Hands on MVC - Mastering the Web

Chi siamo?Michele Caprasviluppatore freelance.Netmail: [email protected]

twitter: @piccoloaiutante

Claudio Gandellisviluppatore freelancePHPmail: [email protected]

twitter: @cgandelli

Page 3: Hands on MVC - Mastering the Web

www.flickr.com/photos/justinbaeder/5317820857

Page 4: Hands on MVC - Mastering the Web
Page 5: Hands on MVC - Mastering the Web

WEB

Page 6: Hands on MVC - Mastering the Web

Web

www.flickr.com/photos/loungerie/1471835306

Page 7: Hands on MVC - Mastering the Web

Web1990 - Tim Berners-Lee

Pool of Human Knowledge

Web Browser WorldWideWeb

Web Server

Web Page

Page 8: Hands on MVC - Mastering the Web

WebInternet

URL Uniform resource locator

HTTP Hypertext Tranfer Protocol

HTML Hypertext Markup Language

CSS Cascading Stylesheet

Page 9: Hands on MVC - Mastering the Web

HTTP

www.flickr.com/photos/kryptyk/125244997

Page 10: Hands on MVC - Mastering the Web

HTTP

REQUEST | RESPONSE

Page 11: Hands on MVC - Mastering the Web

HTTP

Page 12: Hands on MVC - Mastering the Web

HTTP

Page 13: Hands on MVC - Mastering the Web

HTML

www.flickr.com/photos/tz1_1zt/3202641220

Page 14: Hands on MVC - Mastering the Web

HTMLLinguaggio di markup

Annotation & Presentation Semantic<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<title>Html</title></head><body>

<h1 id=“header”>HTML</h1><div class=“slide”>

<h2>Linguaggio di markup</h2><p>Annotation &amp; presentation semantic</p>

</div></body>

</html>

Page 15: Hands on MVC - Mastering the Web

HTMLDocument Type Declaration

Attributi

Entità

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<title>Html</title></head><body>

<h1 id=“header”>HTML</h1><div class=“slide”>

<h2>Linguaggio di markup</h2><p>Annotation &amp; presentation semantic</p>

</div></body>

</html>

Page 16: Hands on MVC - Mastering the Web

CSS

www.flickr.com/photos/r80o/43381087

Page 17: Hands on MVC - Mastering the Web

CSS

Regole per la formattazione

Selettori

Override a cascata

Priorità dei selettori

Page 18: Hands on MVC - Mastering the Web

www.flickr.com/photos/90921086@N00/56844581

Page 19: Hands on MVC - Mastering the Web

WEB 2.0

Page 20: Hands on MVC - Mastering the Web

WEB 2.0

Page 21: Hands on MVC - Mastering the Web

WEB 2.0

http://www.flickr.com/photos/respres/3231178720

Page 22: Hands on MVC - Mastering the Web

?

Page 23: Hands on MVC - Mastering the Web

ProgettazioneIntegrare servizi disponibili

Page 24: Hands on MVC - Mastering the Web

Progettazione

Page 25: Hands on MVC - Mastering the Web

Scelta degli strumenti adattiValutare alternative

Page 26: Hands on MVC - Mastering the Web

Linguaggi di Programmazione

www.flickr.com/photos/tuinkabouter/497701866

Page 27: Hands on MVC - Mastering the Web

Definire l’architettura del sistema

Realizzare codice modulare e

riusabileRiutilizzare codice già scritto

Non “reinventare la ruota”

Page 28: Hands on MVC - Mastering the Web

Architettura Software

www.flickr.com/photos/thomashawk/43213643

Page 29: Hands on MVC - Mastering the Web

Identificare i dati in giocoPersistere i dati in maniera intelligente

Utilizzo di storage online

Alternative ai DB relazionali: NoSQL

Page 30: Hands on MVC - Mastering the Web

Storage

www.flickr.com/photos/thomashawk/24089964

Page 31: Hands on MVC - Mastering the Web

Cloud Computing or not Cloud Computing?

Page 32: Hands on MVC - Mastering the Web

Cloud

www.flickr.com/photos/8525214@N06/3884240503

Page 33: Hands on MVC - Mastering the Web

Lavoro di squadraRispettare la pianificazione

Gestire le risorse

Page 34: Hands on MVC - Mastering the Web

Team

www.flickr.com/photos/atomicshed/161716498

Page 35: Hands on MVC - Mastering the Web

Produrre software di qualitàRobustezza Affidabilità Correttezza

Page 36: Hands on MVC - Mastering the Web

Test

www.flickr.com/photos/jeffkrause/5636722378

Page 37: Hands on MVC - Mastering the Web

Benchmarking

Ottimizzazione

Page 38: Hands on MVC - Mastering the Web

Performance

www.flickr.com/photos/luciano_meirelles/3461860276

Page 39: Hands on MVC - Mastering the Web

Cavalcare il cambiamentoAdattare alle innovazioni

Page 40: Hands on MVC - Mastering the Web

Mobile

www.flickr.com/photos/jdhancock/3420540107

Page 41: Hands on MVC - Mastering the Web

Caso di studioRealizzare un guestbook

2 Gli utenti devono poter inserire i propri messaggi

1 La pagina deve mostrare i messaggi dei visitatori

Page 42: Hands on MVC - Mastering the Web

Mock upIl prototipo HTML

Page 43: Hands on MVC - Mastering the Web
Page 44: Hands on MVC - Mastering the Web

Mock upIl foglio di stile

Page 45: Hands on MVC - Mastering the Web

Mock upIl foglio di stile

Page 46: Hands on MVC - Mastering the Web

Mock upIl foglio di stile

Page 47: Hands on MVC - Mastering the Web
Page 48: Hands on MVC - Mastering the Web

Caso di studio

La programmazione

Page 49: Hands on MVC - Mastering the Web

www.flickr.com/photos/36182550@N08/3347465868

Page 50: Hands on MVC - Mastering the Web

Spaghetti CodeDevo realizzare il blog

Preparo l’html necessario

Introduco le interrogazioni al database

Realizzo la gestione degli inserimenti

==

Una pagina di codice per realizzare il blog

Page 51: Hands on MVC - Mastering the Web

Spaghetti Code

DEMO

Page 52: Hands on MVC - Mastering the Web

Spaghetti CodePro

Veloce da scrivereVeloce da eseguire

Contro Scarsa manutenibilitàScarsa espressività

Difficile riuso del codiceImpossibile il Testing

Page 53: Hands on MVC - Mastering the Web

Separiamo

www.flickr.com/photos/bitzcelt/3892962709

Page 54: Hands on MVC - Mastering the Web

SepariamoBusiness Logic

Presentazione

Separiamo il layer logico (ASP .net)

da quello di presentazione (HTML)

Page 55: Hands on MVC - Mastering the Web

SepariamoLogica e presentazione in file distinti

Page 56: Hands on MVC - Mastering the Web

Separiamo

DEMO

Page 57: Hands on MVC - Mastering the Web

SepariamoAbbiamo ottenuto:

Controller contiene la logica

dell'applicazione

Vista presenta i risultati forniti dal controller

Page 58: Hands on MVC - Mastering the Web

Separiamo

Percorso Request – Response

Con architettura View - Controller

Page 59: Hands on MVC - Mastering the Web

Refactoring MVC

www.flickr.com/photos/19724636@N00/3297328910

Page 60: Hands on MVC - Mastering the Web

Refactoring MVCModello gestisce il comportamento e i dati del

dominio applicativo, risponde a richieste di informazioni di stato e a istruzioni di cambio di stato.

Vista traduce le informazioni ottenute dal modello in un formato adatto all'interazione.

Controller serve a coordinare il processo di interazione: riceve gli input dell'utente e scatena le chiamate verso gli oggetti del modello, per poi passare alla vista il necessario a fornire l'output corretto.

Page 61: Hands on MVC - Mastering the Web

Refactoring MVC

Page 62: Hands on MVC - Mastering the Web

MVC

DEMO

Page 63: Hands on MVC - Mastering the Web

Refactoring MVCPro

Riusabilità del codice

Astrazione dei dati

Ordine

ControNumero di file

Codice da scrivere

Pattern architetturale da implementare

Page 64: Hands on MVC - Mastering the Web

ASP .Net MVC

Page 65: Hands on MVC - Mastering the Web

ASP .Net MVC

Primo esperimento open source di Microsoft

Nasce da Asp.net

Implementazione nel .Net Framework

del pattern MVC.

Page 66: Hands on MVC - Mastering the Web

ASP .Net MVCSistema di routing

Scaffolding

Template

ActionFilter

Validazione automatica lato client

Caching delle pagine

Page 67: Hands on MVC - Mastering the Web

ASP .Net MVC

DEMO

Page 68: Hands on MVC - Mastering the Web

ASP .Net MVC

Url RoutingModule

Controller

ControllerFactory

Mvc RouteHandler

ViewEngine

Mvc Handler

View

Richiesta

Risposta

Page 69: Hands on MVC - Mastering the Web

ASP .Net MVC

Ottima testabilità del codice

Separazione delle responsabilità di ogni layer

Completo controllo dell’html

Page 70: Hands on MVC - Mastering the Web

PHP Way

www.flickr.com/photos/dragonbe/3411273755

Page 71: Hands on MVC - Mastering the Web

Devo realizzare il blog

Preparo l’html necessario

Introduco le interrogazioni al database

Realizzo la gestione degli inserimenti

==

Una pagina di codice per realizzare il blog

Approccio Naive

www.flickr.com/photos/lrargerich/3187525211

Page 72: Hands on MVC - Mastering the Web

Approccio Naive

DEMO

http://webprog.php.local/

Page 73: Hands on MVC - Mastering the Web

Refactoring MVC

www.flickr.com/photos/nrivera/3988954350

Page 74: Hands on MVC - Mastering the Web

Refactoring MVCSeparazione View - Controller

Page 75: Hands on MVC - Mastering the Web

Refactoring MVCAggiunta del Model

Page 76: Hands on MVC - Mastering the Web

Refactoring MVCUn semplice Framework MVC

Page 77: Hands on MVC - Mastering the Web

MVC

DEMO

http://webprog.mvc.local/messages/show

Page 78: Hands on MVC - Mastering the Web

Symfony Framework

Page 79: Hands on MVC - Mastering the Web

SymfonyWeb Application Framework per progetti PHPSetup semplice

Design “pulito”

Tools di Testing, Debugging, Documentazione

Generatori automatici di codice

Gratuito e licenziato MIT

Symfony 1 (1.4)

Symfony 2

Page 80: Hands on MVC - Mastering the Web

Symfony

Page 81: Hands on MVC - Mastering the Web

SetupSi scarica il Framework o si clona dall’SVNSi genera un nuovo progetto con gli strumenti CLI messi a disposizione

$ php lib/vendor/symfony/data/bin/symfonygenerate:project webprog-symfony

$ php symfony generate:app frontend

Si configura il webserver per puntare alla catella pubblica “web”

Page 82: Hands on MVC - Mastering the Web

Struttura del Progetto

Page 83: Hands on MVC - Mastering the Web

Cartella Web

Contiente i FrontController per

ciascuna applicazione

Contiene le risorse pubbliche

del sito

Page 84: Hands on MVC - Mastering the Web

Cartella AppsContiente le applicazioni web che insistono

sul modello di riferimento

Ogni applicazione contiene le configurazioni(e.g. routing) e tutti i Controller

Page 85: Hands on MVC - Mastering the Web

Cartella ConfigConfigurazione del progetto

Configurazione di accesso al database

Schema dei dati per l’ORM

Page 86: Hands on MVC - Mastering the Web

Creazione del modelloGrazie all’ORM a partire dalla descrizione dello schema il modello e la persistenza verranno generati automaticamente

$ php symfony doctrine:build –model$ php symfony doctrine:build --sql

Page 87: Hands on MVC - Mastering the Web

Creazione di un moduloUn modulo suddivide l’applicazione per

“funzionalità”Per introdurre la funzionalità di gestione dei

nostri messaggi creiamo il modulo “message”

$ php symfony doctrine:generate-module frontend message Message

Page 88: Hands on MVC - Mastering the Web

Elenco dei messaggi

ControllerView

Model

Page 89: Hands on MVC - Mastering the Web

RoutingIl documento di Routing permette al Front Controller di indirizzare al Controller corretto le richieste

Page 90: Hands on MVC - Mastering the Web

Symfony

DEMO

http://webprog.symfony.local/

Page 91: Hands on MVC - Mastering the Web

Generazione di CodiceL’Admin-Generator è lo strumentofondamentale per il RAD

Permette la creazione di un pannellodi amministrazione dal Modello deidati

$ php symfony generate:app admin

$ php symfony doctrine:generate-admin admin Message --module=message

Page 92: Hands on MVC - Mastering the Web

Admin Generator

DEMO

http://webprog.symfony.local/admin.php/message

Page 93: Hands on MVC - Mastering the Web

Grazie

Michele [email protected]

twitter: @piccoloaiutante

Claudio [email protected]

twitter: @cgandelli

www.flickr.com/photos/donbuciak/3151055123

Hands on MVC

Mastering the Web

Page 94: Hands on MVC - Mastering the Web