Hands on MVC - Mastering the Web
Upcoming SlideShare
Loading in...5
×
 

Hands on MVC - Mastering the Web

on

  • 3,263 views

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

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

Statistics

Views

Total Views
3,263
Views on SlideShare
665
Embed Views
2,598

Actions

Likes
0
Downloads
4
Comments
0

9 Embeds 2,598

http://www.bitcandies.com 2487
http://bitcandies.local 47
http://bitcandies.local 47
http://abtasty.com 9
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 3
http://www.linkedin.com 2
http://translate.googleusercontent.com 1
http://www.sfexception.com 1
http://prlog.ru 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hands on MVC - Mastering the Web Hands on MVC - Mastering the Web Presentation Transcript

  • Hands on MVC Mastering the Web
  • Chi siamo?Michele Capra sviluppatore freelance .Net mail: michele@orangecode.it twitter: @piccoloaiutanteClaudio Gandelli sviluppatore freelance PHP mail: claudio@bitcandies.com twitter: @cgandelli
  • 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//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>
  • 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>
  • 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 “reinventare la ruota”
  • Architettura Softwarewww.flickr.com/photos/thomashawk/43213643
  • Identificare i dati in giocoPersistere i dati in maniera intelligente Utilizzo di storage online Alternative ai DB relazionali: NoSQL
  • 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 inserire ipropri messaggi
  • 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 Realizzo la gestione degli inserimenti ==Una pagina di codice per realizzare il blog
  • Spaghetti Code DEMO
  • Spaghetti Code Pro Veloce da scrivere Veloce da eseguire Contro Scarsa manutenibilità Scarsa espressivitàDifficile riuso del codice Impossibile il Testing
  • Separiamowww.flickr.com/photos/bitzcelt/3892962709
  • Separiamo Business Logic PresentazioneSepariamo il layer logico (ASP .net)da quello di presentazione (HTML)
  • SepariamoLogica e presentazione in file distinti
  • Separiamo DEMO
  • SepariamoAbbiamo ottenuto:Controller contiene la logica dellapplicazione Vista presenta i risultati forniti dal controller
  • 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 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.
  • Refactoring MVC
  • MVCDEMO
  • Refactoring MVC Pro Riusabilità del codice Astrazione dei dati Ordine Contro Numero di file Codice da scriverePattern architetturale da implementare
  • ASP .Net MVC
  • ASP .Net MVCPrimo esperimento open source di Microsoft Nasce da Asp.net Implementazione nel .Net Framework del pattern MVC.
  • ASP .Net MVC Sistema di routing Scaffolding Template ActionFilterValidazione automatica lato client Caching delle pagine
  • ASP .Net MVC DEMO
  • ASP .Net MVCRichiesta Url Routing Mvc Route Mvc Handler Module Handler Controller FactoryRisposta ViewEngine Controller View
  • ASP .Net MVC Ottima testabilità del codiceSeparazione delle responsabilità di ogni layer Completo controllo dell’html
  • PHP Waywww.flickr.com/photos/dragonbe/3411273755
  • 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
  • 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, Documentazione Generatori automatici di codice Gratuito e licenziato MITSymfony 1 (1.4)Symfony 2
  • Symfony
  • 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”
  • Struttura del Progetto
  • Cartella Web Contiente i Front Controller per ciascuna applicazione Contiene le risorse pubbliche del sito
  • Cartella AppsContiente le applicazioni web che insistono sul modello di riferimentoOgni applicazione contiene le configurazioni (e.g. routing) e tutti i Controller
  • 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 automaticamente $ php symfony doctrine:build –model $ php symfony doctrine:build --sql
  • 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
  • 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 amministrazione dal Modello dei dati$ php symfony generate:app admin$ php symfony doctrine:generate-admin admin Message --module=message
  • Admin Generator DEMO http://webprog.symfony.local/admin.php/message
  • 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