SlideShare a Scribd company logo
Hands on MVC
 Mastering the Web
Chi siamo?
Michele Capra
 sviluppatore freelance
 .Net
 mail: michele@orangecode.it
 twitter: @piccoloaiutante



Claudio Gandelli
 sviluppatore freelance
 PHP
 mail: claudio@bitcandies.com
 twitter: @cgandelli
www.flickr.com/photos/justinbaeder/5317820857
Hands on MVC - Mastering the Web
WEB
www.flickr.com/photos/loungerie/1471835306




                                             Web
Web
1990 - Tim Berners-Lee
 Pool of Human Knowledge

Web Browser WorldWideWeb
       Web Server
        Web Page
Web
Internet
URL Uniform resource locator
HTTP Hypertext Tranfer Protocol
HTML Hypertext Markup Language
CSS Cascading Stylesheet
HTTP




       www.flickr.com/photos/kryptyk/125244997
HTTP

REQUEST | 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
CSS

Regole 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/3231178720




WEB 2.0
?
Progettazione
Integrare servizi disponibili
Progettazione
Scelta degli strumenti adatti
     Valutare alternative
www.flickr.com/photos/tuinkabouter/497701866




Linguaggi di Programmazione
Definire l’architettura del sistema
  Realizzare codice   modulare   e


    riusabile
  Riutilizzare codice già scritto
    Non “reinventare la ruota”
Architettura Software

www.flickr.com/photos/thomashawk/43213643
Identificare i dati in gioco
Persistere i dati in maniera intelligente
       Utilizzo di storage online
  Alternative ai DB relazionali: NoSQL
www.flickr.com/photos/thomashawk/24089964




Storage
Cloud Computing or not Cloud Computing?
Cloud




        www.flickr.com/photos/8525214@N06/3884240503
Lavoro di squadra
Rispettare 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
Benchmarking
Ottimizzazione
www.flickr.com/photos/luciano_meirelles/3461860276




                                                     Performance
Cavalcare il cambiamento
Adattare alle innovazioni
www.flickr.com/photos/jdhancock/3420540107




Mobile
Caso di studio
Realizzare un guestbook


1   La pagina deve mostrare i messaggi
dei visitatori



2   Gli utenti devono poter inserire i
propri messaggi
Mock up
Il prototipo HTML
Hands on MVC - Mastering the Web
Mock up
Il foglio di stile
Mock up
Il foglio di stile
Mock up
Il foglio di stile
Hands on MVC - Mastering the Web
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
Separiamo




www.flickr.com/photos/bitzcelt/3892962709
Separiamo
          Business Logic
           Presentazione

Separiamo il layer logico (ASP .net)
da quello di presentazione (HTML)
Separiamo
Logica e presentazione in file distinti
Separiamo


  DEMO
Separiamo
Abbiamo ottenuto:


Controller     contiene la logica
               dell'applicazione


  Vista        presenta i
               risultati forniti
               dal controller
Separiamo

  Percorso Request – Response
Con architettura View - Controller
www.flickr.com/photos/19724636@N00/3297328910




Refactoring MVC
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.
Refactoring MVC
MVC


DEMO
Refactoring MVC
                Pro
       Riusabilità del codice
        Astrazione dei dati
               Ordine

             Contro
            Numero di file
          Codice da scrivere
Pattern architetturale da implementare
ASP .Net MVC
ASP .Net MVC

Primo esperimento open source di Microsoft


             Nasce da Asp.net


    Implementazione nel .Net Framework
             del pattern   MVC.
ASP .Net MVC
       Sistema di   routing
           Scaffolding

             Template

           ActionFilter

Validazione automatica lato client

      Caching delle pagine
ASP .Net MVC


    DEMO
ASP .Net MVC

Richiesta   Url Routing   Mvc Route    Mvc Handler
              Module       Handler


                                        Controller
                                         Factory



Risposta                  ViewEngine   Controller
              View
ASP .Net MVC

   Ottima testabilità del codice


Separazione delle responsabilità di
              ogni layer


    Completo controllo dell’html
PHP Way




www.flickr.com/photos/dragonbe/3411273755
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
Approccio Naive


     DEMO


            http://webprog.php.local/
Refactoring MVC




www.flickr.com/photos/nrivera/3988954350
Refactoring MVC
Separazione View - Controller
Refactoring MVC
   Aggiunta del Model
Refactoring MVC
 Un semplice Framework MVC
MVC


DEMO


 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   MIT

Symfony 1 (1.4)
Symfony 2
Symfony
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”
Struttura del Progetto
Cartella Web

      Contiente i Front
        Controller per
            ciascuna
          applicazione

         Contiene le
       risorse pubbliche
            del sito
Cartella Apps
Contiente le applicazioni web che insistono
         sul modello di riferimento
Ogni applicazione contiene le configurazioni
     (e.g. routing) e tutti i Controller
Cartella Config
    Configurazione del progetto

Configurazione di accesso al database

      Schema dei dati per l’ORM
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
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
Elenco dei messaggi


 Controller
              View


Model
Routing
Il documento di Routing permette al
  Front Controller di indirizzare al
  Controller corretto le richieste
Symfony


 DEMO


    http://webprog.symfony.local/
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
Admin Generator


        DEMO


   http://webprog.symfony.local/admin.php/message
Hands on MVC
                             Mastering the Web
                                      Grazie


Michele Capra                Claudio Gandelli
 michele@orangecode.it         claudio@bitcandies.com
 twitter: @piccoloaiutante     twitter: @cgandelli




                                                www.flickr.com/photos/donbuciak/3151055123
Hands on MVC - Mastering the Web

More Related Content

PPTX
Novità di Asp.Net 4.0
PPSX
Asp.Net MVC 3 - Il Model View Controller secondo Microsoft
PDF
SPRING - MAVEN - REST API (ITA - Luglio 2017)
PPT
Presentazione Corso - Parte 3
PDF
Un backend per tutte le stagioni con Spring
PPTX
Asp.net 4 Community Tour VS2010
PDF
Spring Intro
PDF
MVC and Struts 1
Novità di Asp.Net 4.0
Asp.Net MVC 3 - Il Model View Controller secondo Microsoft
SPRING - MAVEN - REST API (ITA - Luglio 2017)
Presentazione Corso - Parte 3
Un backend per tutte le stagioni con Spring
Asp.net 4 Community Tour VS2010
Spring Intro
MVC and Struts 1

What's hot (20)

ODP
Spring Framework
PPS
Sviluppo Web Agile Con MonoRail
PDF
Modulo 6 Spring Framework Core E Aop
PPTX
ASP.NET MVC
PPT
Utilizzare Windows Vista come Software Developer
PPT
Spring 2.5
PDF
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
PPTX
DotNetCampus 2014 - BING e Windows Store App
PPTX
Cert03 70-486 developing asp.net mvc 4 web applications
PDF
Joomla! 1.5: CMS a mani tese verso gli sviluppatori
PPT
What's New in ASP.NET 4.5 and Visual Studio 2012
PPTX
ASP.NET MVC 2.0
PPTX
Win02 bing e windows store apps
PPT
Introduzione a JavaScript e jQuery (2/2)
PPTX
Alessandro Forte - Realizzare controlli Ajax in ASP.Net
PDF
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
ODP
Sviluppo applicazioni in Ruby on Rails
PDF
Sviluppo web con Ruby on Rails
PPTX
Mvc e di spring e angular js
PPTX
Integrazione continua con TFS Build
Spring Framework
Sviluppo Web Agile Con MonoRail
Modulo 6 Spring Framework Core E Aop
ASP.NET MVC
Utilizzare Windows Vista come Software Developer
Spring 2.5
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
DotNetCampus 2014 - BING e Windows Store App
Cert03 70-486 developing asp.net mvc 4 web applications
Joomla! 1.5: CMS a mani tese verso gli sviluppatori
What's New in ASP.NET 4.5 and Visual Studio 2012
ASP.NET MVC 2.0
Win02 bing e windows store apps
Introduzione a JavaScript e jQuery (2/2)
Alessandro Forte - Realizzare controlli Ajax in ASP.Net
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
Sviluppo applicazioni in Ruby on Rails
Sviluppo web con Ruby on Rails
Mvc e di spring e angular js
Integrazione continua con TFS Build
Ad

Similar to Hands on MVC - Mastering the Web (20)

PDF
PDF
ASP.NET MVC Intro
PDF
Smau milano 2012 massimiliano del cero
ODP
ConfSL: Sviluppo Applicazioni web con Symfony
PPTX
8 - Web app e CMS - 17/18
PPTX
8 - Web App e CMS - 16/17
PPTX
7 - Web application e CMS
PDF
Html e Css - 1 | WebMaster & WebDesigner
PPTX
14 - Web designer vs Web developer ...
PDF
Html e Css - 1 | WebMaster & WebDesigner
PDF
Web 2.0 sviluppare e ottimizzare oggi
PPTX
C’ era una volta il sito
PPTX
Applicazioni web based
PPTX
Asp.NET MVC Framework
PDF
Progettazione e realizzazione di siti web, a.a. 2013-2014
PPTX
Web designer vs Web developer
PPT
Presentazione Corso - Parte 1
PPTX
15 - Web designer vs Web developer
PPTX
Le applicazioni web e i CMS (18/19)
PDF
Symfony va a Skuola
ASP.NET MVC Intro
Smau milano 2012 massimiliano del cero
ConfSL: Sviluppo Applicazioni web con Symfony
8 - Web app e CMS - 17/18
8 - Web App e CMS - 16/17
7 - Web application e CMS
Html e Css - 1 | WebMaster & WebDesigner
14 - Web designer vs Web developer ...
Html e Css - 1 | WebMaster & WebDesigner
Web 2.0 sviluppare e ottimizzare oggi
C’ era una volta il sito
Applicazioni web based
Asp.NET MVC Framework
Progettazione e realizzazione di siti web, a.a. 2013-2014
Web designer vs Web developer
Presentazione Corso - Parte 1
15 - Web designer vs Web developer
Le applicazioni web e i CMS (18/19)
Symfony va a Skuola
Ad

Recently uploaded (9)

PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG UNIT - TIẾNG ANH 10 EXPLORE NEW WORLDS - CẢ NĂM...
PPTX
SLIDE-DE-CURSOS-OssssFICIAL-DA-EGEPI-.pptx
PDF
Mazzoni-Reggi-2012-Effetto-Lucifero-Su-Wikipedia.pdf
PPTX
Copia di PROGETTO VIOLENZA sulle donne PCTO
PDF
16 CHUYÊN ĐỀ BÀI TẬP ÔN THI TUYỂN SINH VÀO 10 - MÔN TIẾNG ANH - THEO FORM ĐỀ ...
PDF
CHUYÊN ĐỀ BỔ TRỢ NGỮ ÂM, TỪ VỰNG NÂNG CAO - TIẾNG ANH 9 VÀ ÔN THI VÀO LỚP 10 ...
PDF
BÀI TẬP TEST BỔ TRỢ THEO TỪNG UNIT - TIẾNG ANH 10 FRIENDS GLOBAL - CẢ NĂM (24...
PDF
GIÁO ÁN CHÍNH KHÓA TIẾNG ANH 9 - CẢ NĂM - THEO CÔNG VĂN 5512 (2 CỘT) NĂM HỌC ...
PDF
GIÁO ÁN KẾ HOẠCH BÀI DẠY CHÍNH KHÓA TIẾNG ANH 9 - CẢ NĂM - THEO CÔNG VĂN 5512...
BÀI TẬP TEST BỔ TRỢ THEO TỪNG UNIT - TIẾNG ANH 10 EXPLORE NEW WORLDS - CẢ NĂM...
SLIDE-DE-CURSOS-OssssFICIAL-DA-EGEPI-.pptx
Mazzoni-Reggi-2012-Effetto-Lucifero-Su-Wikipedia.pdf
Copia di PROGETTO VIOLENZA sulle donne PCTO
16 CHUYÊN ĐỀ BÀI TẬP ÔN THI TUYỂN SINH VÀO 10 - MÔN TIẾNG ANH - THEO FORM ĐỀ ...
CHUYÊN ĐỀ BỔ TRỢ NGỮ ÂM, TỪ VỰNG NÂNG CAO - TIẾNG ANH 9 VÀ ÔN THI VÀO LỚP 10 ...
BÀI TẬP TEST BỔ TRỢ THEO TỪNG UNIT - TIẾNG ANH 10 FRIENDS GLOBAL - CẢ NĂM (24...
GIÁO ÁN CHÍNH KHÓA TIẾNG ANH 9 - CẢ NĂM - THEO CÔNG VĂN 5512 (2 CỘT) NĂM HỌC ...
GIÁO ÁN KẾ HOẠCH BÀI DẠY CHÍNH KHÓA TIẾNG ANH 9 - CẢ NĂM - THEO CÔNG VĂN 5512...

Hands on MVC - Mastering the Web