Hands on MVC - Mastering the Web
0 likes1,438 views
Il documento descrive il framework MVC per lo sviluppo web, evidenziando i principi fondamentali come la separazione delle responsabilità tra modello, vista e controller. Viene presentata anche l'implementazione in ASP.NET MVC e Symfony, con un focus su come gestire la logica di business e la presentazione dei dati. È enfatizzato l'importanza di scrivere codice riutilizzabile e di testabilità, insieme alla gestione delle risorse e alla pianificazione del progetto.
Hands on MVC - Mastering the Web
- 1. Hands on MVC Mastering the Web
- 2. Chi siamo? Michele Capra sviluppatore freelance .Net mail: [email protected] twitter: @piccoloaiutante Claudio Gandelli sviluppatore freelance PHP mail: [email protected] twitter: @cgandelli
- 5. WEB
- 7. Web 1990 - Tim Berners-Lee Pool of Human Knowledge Web Browser WorldWideWeb Web Server Web Page
- 8. Web Internet URL Uniform resource locator HTTP Hypertext Tranfer Protocol HTML Hypertext Markup Language CSS Cascading Stylesheet
- 9. HTTP www.flickr.com/photos/kryptyk/125244997
- 11. HTTP
- 12. HTTP
- 14. 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 & presentation semantic</p> </div> </body> </html>
- 15. 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 & presentation semantic</p> </div> </body> </html>
- 16. CSS www.flickr.com/photos/r80o/43381087
- 17. CSS Regole per la formattazione Selettori Override a cascata Priorità dei selettori
- 19. WEB 2.0
- 20. WEB 2.0
- 22. ?
- 24. Progettazione
- 25. Scelta degli strumenti adatti Valutare alternative
- 27. Definire l’architettura del sistema Realizzare codice modulare e riusabile Riutilizzare codice già scritto Non “reinventare la ruota”
- 29. Identificare i dati in gioco Persistere i dati in maniera intelligente Utilizzo di storage online Alternative ai DB relazionali: NoSQL
- 31. Cloud Computing or not Cloud Computing?
- 32. Cloud www.flickr.com/photos/8525214@N06/3884240503
- 33. Lavoro di squadra Rispettare la pianificazione Gestire le risorse
- 34. Team www.flickr.com/photos/atomicshed/161716498
- 35. Produrre software di qualità Robustezza Affidabilità Correttezza
- 38. www.flickr.com/photos/luciano_meirelles/3461860276 Performance
- 39. Cavalcare il cambiamento Adattare alle innovazioni
- 41. Caso di studio Realizzare un guestbook 1 La pagina deve mostrare i messaggi dei visitatori 2 Gli utenti devono poter inserire i propri messaggi
- 42. Mock up Il prototipo HTML
- 44. Mock up Il foglio di stile
- 45. Mock up Il foglio di stile
- 46. Mock up Il foglio di stile
- 48. Caso di studio La programmazione
- 50. 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
- 51. Spaghetti Code DEMO
- 52. Spaghetti Code Pro Veloce da scrivere Veloce da eseguire Contro Scarsa manutenibilità Scarsa espressività Difficile riuso del codice Impossibile il Testing
- 54. Separiamo Business Logic Presentazione Separiamo il layer logico (ASP .net) da quello di presentazione (HTML)
- 55. Separiamo Logica e presentazione in file distinti
- 56. Separiamo DEMO
- 57. Separiamo Abbiamo ottenuto: Controller contiene la logica dell'applicazione Vista presenta i risultati forniti dal controller
- 58. Separiamo Percorso Request – Response Con architettura View - Controller
- 60. Refactoring MVC Modello 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.
- 61. Refactoring MVC
- 62. MVC DEMO
- 63. Refactoring MVC Pro Riusabilità del codice Astrazione dei dati Ordine Contro Numero di file Codice da scrivere Pattern architetturale da implementare
- 64. ASP .Net MVC
- 65. ASP .Net MVC Primo esperimento open source di Microsoft Nasce da Asp.net Implementazione nel .Net Framework del pattern MVC.
- 66. ASP .Net MVC Sistema di routing Scaffolding Template ActionFilter Validazione automatica lato client Caching delle pagine
- 67. ASP .Net MVC DEMO
- 68. ASP .Net MVC Richiesta Url Routing Mvc Route Mvc Handler Module Handler Controller Factory Risposta ViewEngine Controller View
- 69. ASP .Net MVC Ottima testabilità del codice Separazione delle responsabilità di ogni layer Completo controllo dell’html
- 71. Approccio Naive 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 www.flickr.com/photos/lrargerich/3187525211
- 72. Approccio Naive DEMO http://webprog.php.local/
- 74. Refactoring MVC Separazione View - Controller
- 75. Refactoring MVC Aggiunta del Model
- 76. Refactoring MVC Un semplice Framework MVC
- 77. MVC DEMO http://webprog.mvc.local/messages/show
- 79. Symfony Web Application Framework per progetti PHP Setup semplice Design “pulito” Tools di Testing, Debugging, Documentazione Generatori automatici di codice Gratuito e licenziato MIT Symfony 1 (1.4) Symfony 2
- 80. Symfony
- 81. Setup Si scarica il Framework o si clona dall’SVN Si genera un nuovo progetto con gli strumenti CLI messi a disposizione $ php lib/vendor/symfony/data/bin/symfony generate:project webprog-symfony $ php symfony generate:app frontend Si configura il webserver per puntare alla catella pubblica “web”
- 83. Cartella Web Contiente i Front Controller per ciascuna applicazione Contiene le risorse pubbliche del sito
- 84. Cartella Apps Contiente le applicazioni web che insistono sul modello di riferimento Ogni applicazione contiene le configurazioni (e.g. routing) e tutti i Controller
- 85. Cartella Config Configurazione del progetto Configurazione di accesso al database Schema dei dati per l’ORM
- 86. Creazione del modello Grazie 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
- 87. Creazione di un modulo Un 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
- 88. Elenco dei messaggi Controller View Model
- 89. Routing Il documento di Routing permette al Front Controller di indirizzare al Controller corretto le richieste
- 90. Symfony DEMO http://webprog.symfony.local/
- 91. Generazione di Codice L’Admin-Generator è lo strumento fondamentale per il RAD Permette 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
- 92. Admin Generator DEMO http://webprog.symfony.local/admin.php/message
- 93. Hands on MVC Mastering the Web Grazie Michele Capra Claudio Gandelli [email protected] [email protected] twitter: @piccoloaiutante twitter: @cgandelli www.flickr.com/photos/donbuciak/3151055123