Hands on MVC Mastering the Web
Chi siamo?Michele Capra sviluppatore freelance .Net mail: michele@orangecode.it twitter: @piccoloaiutanteClaudio Gandelli ...
www.flickr.com/photos/justinbaeder/5317820857
WEB
www.flickr.com/photos/loungerie/1471835306                                             Web
Web1990 - Tim Berners-Lee Pool of Human KnowledgeWeb Browser WorldWideWeb       Web Server        Web Page
WebInternetURL Uniform resource locatorHTTP Hypertext Tranfer ProtocolHTML Hypertext Markup LanguageCSS Cascading Stylesheet
HTTP       www.flickr.com/photos/kryptyk/125244997
HTTPREQUEST | RESPONSE
HTTP
HTTP
www.flickr.com/photos/tz1_1zt/3202641220                                           HTML
HTML             Linguaggio di markup     Annotation & Presentation Semantic<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//...
HTML                    Document Type Declaration                    Attributi                    Entità<!DOCTYPE HTML PUB...
CSS      www.flickr.com/photos/r80o/43381087
CSSRegole per la formattazione          Selettori     Override a cascata   Priorità dei selettori
www.flickr.com/photos/90921086@N00/56844581
WEB 2.0
WEB 2.0
http://www.flickr.com/photos/respres/3231178720WEB 2.0
?
ProgettazioneIntegrare servizi disponibili
Progettazione
Scelta degli strumenti adatti     Valutare alternative
www.flickr.com/photos/tuinkabouter/497701866Linguaggi di Programmazione
Definire l’architettura del sistema  Realizzare codice   modulare   e    riusabile  Riutilizzare codice già scritto    Non...
Architettura Softwarewww.flickr.com/photos/thomashawk/43213643
Identificare i dati in giocoPersistere i dati in maniera intelligente       Utilizzo di storage online  Alternative ai DB ...
www.flickr.com/photos/thomashawk/24089964Storage
Cloud Computing or not Cloud Computing?
Cloud        www.flickr.com/photos/8525214@N06/3884240503
Lavoro di squadraRispettare la pianificazione    Gestire le risorse
Team       www.flickr.com/photos/atomicshed/161716498
Produrre software di qualitàRobustezza Affidabilità Correttezza
www.flickr.com/photos/jeffkrause/5636722378                                              Test
BenchmarkingOttimizzazione
www.flickr.com/photos/luciano_meirelles/3461860276                                                     Performance
Cavalcare il cambiamentoAdattare alle innovazioni
www.flickr.com/photos/jdhancock/3420540107Mobile
Caso di studioRealizzare un guestbook1   La pagina deve mostrare i messaggidei visitatori2   Gli utenti devono poter inser...
Mock upIl prototipo HTML
Mock upIl foglio di stile
Mock upIl foglio di stile
Mock upIl foglio di stile
Caso di studio La programmazione
www.flickr.com/photos/36182550@N08/3347465868
Spaghetti Code          Devo realizzare il blog        Preparo l’html necessario Introduco le interrogazioni al database  ...
Spaghetti Code    DEMO
Spaghetti Code          Pro   Veloce da scrivere   Veloce da eseguire        Contro   Scarsa manutenibilità    Scarsa espr...
Separiamowww.flickr.com/photos/bitzcelt/3892962709
Separiamo          Business Logic           PresentazioneSepariamo il layer logico (ASP .net)da quello di presentazione (H...
SepariamoLogica e presentazione in file distinti
Separiamo  DEMO
SepariamoAbbiamo ottenuto:Controller     contiene la logica               dellapplicazione  Vista        presenta i       ...
Separiamo  Percorso Request – ResponseCon architettura View - Controller
www.flickr.com/photos/19724636@N00/3297328910Refactoring MVC
Refactoring MVCModello   gestisce il comportamento e i dati del    dominio applicativo, risponde a richieste di    informa...
Refactoring MVC
MVCDEMO
Refactoring MVC                Pro       Riusabilità del codice        Astrazione dei dati               Ordine           ...
ASP .Net MVC
ASP .Net MVCPrimo esperimento open source di Microsoft             Nasce da Asp.net    Implementazione nel .Net Framework ...
ASP .Net MVC       Sistema di   routing           Scaffolding             Template           ActionFilterValidazione autom...
ASP .Net MVC    DEMO
ASP .Net MVCRichiesta   Url Routing   Mvc Route    Mvc Handler              Module       Handler                          ...
ASP .Net MVC   Ottima testabilità del codiceSeparazione delle responsabilità di              ogni layer    Completo contro...
PHP Waywww.flickr.com/photos/dragonbe/3411273755
Approccio Naive         Devo realizzare il blog       Preparo l’html necessarioIntroduco le interrogazioni al database Rea...
Approccio Naive     DEMO            http://webprog.php.local/
Refactoring MVCwww.flickr.com/photos/nrivera/3988954350
Refactoring MVCSeparazione View - Controller
Refactoring MVC   Aggiunta del Model
Refactoring MVC Un semplice Framework MVC
MVCDEMO http://webprog.mvc.local/messages/show
Symfony Framework
Symfony Web Application Framework per progetti PHP Setup semplice Design “pulito” Tools di Testing, Debugging, Documentazi...
Symfony
SetupSi scarica il Framework o si clonadall’SVNSi genera un nuovo progetto con glistrumenti CLI messi a disposizione   $ p...
Struttura del Progetto
Cartella Web      Contiente i Front        Controller per            ciascuna          applicazione         Contiene le   ...
Cartella AppsContiente le applicazioni web che insistono         sul modello di riferimentoOgni applicazione contiene le c...
Cartella Config    Configurazione del progettoConfigurazione di accesso al database      Schema dei dati per l’ORM
Creazione del modelloGrazie all’ORM a partire dalla descrizione dello schema ilmodello e la persistenza verranno generati ...
Creazione di un moduloUn modulo suddivide l’applicazione per  “funzionalità”Per introdurre la funzionalità di gestione dei...
Elenco dei messaggi Controller              ViewModel
RoutingIl documento di Routing permette al  Front Controller di indirizzare al  Controller corretto le richieste
Symfony DEMO    http://webprog.symfony.local/
Generazione di CodiceL’Admin-Generator è lo strumento  fondamentale per il RADPermette la creazione di un pannello  di amm...
Admin Generator        DEMO   http://webprog.symfony.local/admin.php/message
Hands on MVC                             Mastering the Web                                      GrazieMichele Capra       ...
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
Hands on MVC - Mastering the Web
Upcoming SlideShare
Loading in …5
×

Hands on MVC - Mastering the Web

3,410 views

Published on

Web programming workshop for the web programming class at University of Brescia, Italy.

Published in: Education, Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,410
On SlideShare
0
From Embeds
0
Number of Embeds
2,577
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hands on MVC - Mastering the Web

  1. 1. Hands on MVC Mastering the Web
  2. 2. Chi siamo?Michele Capra sviluppatore freelance .Net mail: michele@orangecode.it twitter: @piccoloaiutanteClaudio Gandelli sviluppatore freelance PHP mail: claudio@bitcandies.com twitter: @cgandelli
  3. 3. www.flickr.com/photos/justinbaeder/5317820857
  4. 4. WEB
  5. 5. www.flickr.com/photos/loungerie/1471835306 Web
  6. 6. Web1990 - Tim Berners-Lee Pool of Human KnowledgeWeb Browser WorldWideWeb Web Server Web Page
  7. 7. WebInternetURL Uniform resource locatorHTTP Hypertext Tranfer ProtocolHTML Hypertext Markup LanguageCSS Cascading Stylesheet
  8. 8. HTTP www.flickr.com/photos/kryptyk/125244997
  9. 9. HTTPREQUEST | RESPONSE
  10. 10. HTTP
  11. 11. HTTP
  12. 12. www.flickr.com/photos/tz1_1zt/3202641220 HTML
  13. 13. HTML Linguaggio 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>
  14. 14. HTML Document 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>
  15. 15. CSS www.flickr.com/photos/r80o/43381087
  16. 16. CSSRegole per la formattazione Selettori Override a cascata Priorità dei selettori
  17. 17. www.flickr.com/photos/90921086@N00/56844581
  18. 18. WEB 2.0
  19. 19. WEB 2.0
  20. 20. http://www.flickr.com/photos/respres/3231178720WEB 2.0
  21. 21. ?
  22. 22. ProgettazioneIntegrare servizi disponibili
  23. 23. Progettazione
  24. 24. Scelta degli strumenti adatti Valutare alternative
  25. 25. www.flickr.com/photos/tuinkabouter/497701866Linguaggi di Programmazione
  26. 26. Definire l’architettura del sistema Realizzare codice modulare e riusabile Riutilizzare codice già scritto Non “reinventare la ruota”
  27. 27. Architettura Softwarewww.flickr.com/photos/thomashawk/43213643
  28. 28. Identificare i dati in giocoPersistere i dati in maniera intelligente Utilizzo di storage online Alternative ai DB relazionali: NoSQL
  29. 29. www.flickr.com/photos/thomashawk/24089964Storage
  30. 30. Cloud Computing or not Cloud Computing?
  31. 31. Cloud www.flickr.com/photos/8525214@N06/3884240503
  32. 32. Lavoro di squadraRispettare la pianificazione Gestire le risorse
  33. 33. Team www.flickr.com/photos/atomicshed/161716498
  34. 34. Produrre software di qualitàRobustezza Affidabilità Correttezza
  35. 35. www.flickr.com/photos/jeffkrause/5636722378 Test
  36. 36. BenchmarkingOttimizzazione
  37. 37. www.flickr.com/photos/luciano_meirelles/3461860276 Performance
  38. 38. Cavalcare il cambiamentoAdattare alle innovazioni
  39. 39. www.flickr.com/photos/jdhancock/3420540107Mobile
  40. 40. Caso di studioRealizzare un guestbook1 La pagina deve mostrare i messaggidei visitatori2 Gli utenti devono poter inserire ipropri messaggi
  41. 41. Mock upIl prototipo HTML
  42. 42. Mock upIl foglio di stile
  43. 43. Mock upIl foglio di stile
  44. 44. Mock upIl foglio di stile
  45. 45. Caso di studio La programmazione
  46. 46. www.flickr.com/photos/36182550@N08/3347465868
  47. 47. Spaghetti Code 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
  48. 48. Spaghetti Code DEMO
  49. 49. Spaghetti Code Pro Veloce da scrivere Veloce da eseguire Contro Scarsa manutenibilità Scarsa espressivitàDifficile riuso del codice Impossibile il Testing
  50. 50. Separiamowww.flickr.com/photos/bitzcelt/3892962709
  51. 51. Separiamo Business Logic PresentazioneSepariamo il layer logico (ASP .net)da quello di presentazione (HTML)
  52. 52. SepariamoLogica e presentazione in file distinti
  53. 53. Separiamo DEMO
  54. 54. SepariamoAbbiamo ottenuto:Controller contiene la logica dellapplicazione Vista presenta i risultati forniti dal controller
  55. 55. Separiamo Percorso Request – ResponseCon architettura View - Controller
  56. 56. www.flickr.com/photos/19724636@N00/3297328910Refactoring MVC
  57. 57. 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 allinterazione.Controller serve a coordinare il processo di interazione: riceve gli input dellutente e scatena le chiamate verso gli oggetti del modello, per poi passare alla vista il necessario a fornire loutput corretto.
  58. 58. Refactoring MVC
  59. 59. MVCDEMO
  60. 60. Refactoring MVC Pro Riusabilità del codice Astrazione dei dati Ordine Contro Numero di file Codice da scriverePattern architetturale da implementare
  61. 61. ASP .Net MVC
  62. 62. ASP .Net MVCPrimo esperimento open source di Microsoft Nasce da Asp.net Implementazione nel .Net Framework del pattern MVC.
  63. 63. ASP .Net MVC Sistema di routing Scaffolding Template ActionFilterValidazione automatica lato client Caching delle pagine
  64. 64. ASP .Net MVC DEMO
  65. 65. ASP .Net MVCRichiesta Url Routing Mvc Route Mvc Handler Module Handler Controller FactoryRisposta ViewEngine Controller View
  66. 66. ASP .Net MVC Ottima testabilità del codiceSeparazione delle responsabilità di ogni layer Completo controllo dell’html
  67. 67. PHP Waywww.flickr.com/photos/dragonbe/3411273755
  68. 68. Approccio Naive Devo realizzare il blog Preparo l’html necessarioIntroduco le interrogazioni al database Realizzo la gestione degli inserimenti == Una pagina di codice per realizzare il blog www.flickr.com/photos/lrargerich/3187525211
  69. 69. Approccio Naive DEMO http://webprog.php.local/
  70. 70. Refactoring MVCwww.flickr.com/photos/nrivera/3988954350
  71. 71. Refactoring MVCSeparazione View - Controller
  72. 72. Refactoring MVC Aggiunta del Model
  73. 73. Refactoring MVC Un semplice Framework MVC
  74. 74. MVCDEMO http://webprog.mvc.local/messages/show
  75. 75. Symfony Framework
  76. 76. Symfony Web Application Framework per progetti PHP Setup semplice Design “pulito” Tools di Testing, Debugging, Documentazione Generatori automatici di codice Gratuito e licenziato MITSymfony 1 (1.4)Symfony 2
  77. 77. Symfony
  78. 78. SetupSi scarica il Framework o si clonadall’SVNSi genera un nuovo progetto con glistrumenti CLI messi a disposizione $ php lib/vendor/symfony/data/bin/symfony generate:project webprog-symfony $ php symfony generate:app frontendSi configura il webserver per puntarealla catella pubblica “web”
  79. 79. Struttura del Progetto
  80. 80. Cartella Web Contiente i Front Controller per ciascuna applicazione Contiene le risorse pubbliche del sito
  81. 81. Cartella AppsContiente le applicazioni web che insistono sul modello di riferimentoOgni applicazione contiene le configurazioni (e.g. routing) e tutti i Controller
  82. 82. Cartella Config Configurazione del progettoConfigurazione di accesso al database Schema dei dati per l’ORM
  83. 83. Creazione del modelloGrazie all’ORM a partire dalla descrizione dello schema ilmodello e la persistenza verranno generati automaticamente $ php symfony doctrine:build –model $ php symfony doctrine:build --sql
  84. 84. 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
  85. 85. Elenco dei messaggi Controller ViewModel
  86. 86. RoutingIl documento di Routing permette al Front Controller di indirizzare al Controller corretto le richieste
  87. 87. Symfony DEMO http://webprog.symfony.local/
  88. 88. Generazione di CodiceL’Admin-Generator è lo strumento fondamentale per il RADPermette la creazione di un pannello di amministrazione dal Modello dei dati$ php symfony generate:app admin$ php symfony doctrine:generate-admin admin Message --module=message
  89. 89. Admin Generator DEMO http://webprog.symfony.local/admin.php/message
  90. 90. Hands on MVC Mastering the Web GrazieMichele Capra Claudio Gandelli michele@orangecode.it claudio@bitcandies.com twitter: @piccoloaiutante twitter: @cgandelli www.flickr.com/photos/donbuciak/3151055123

×