· web viewprogetto “jobit - innovative teaching methodologies and courseware for software...

51
Progetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il Software Development Come generare una semplice applicazione impiegando il framework PHP - Silex Autore: Kadri Vahtramäe, I-Sepp OÜj BCS Koolitus (Estonia) Collaboratori: European University Cyprus (Cyprus) Ceipes- Centro Internazionale per la Promozione dell’Educazione e lo Sviluppo (Italy)

Upload: votuong

Post on 19-Jun-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

Page 1:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Progetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“

Materiale per il Software Development

Come generare una semplice applicazione impiegando il framework PHP - Silex

Autore: Kadri Vahtramäe, I-Sepp OÜjBCS Koolitus (Estonia)

Collaboratori: European University Cyprus (Cyprus)Ceipes- Centro Internazionale per la Promozione dell’Educazione e lo Sviluppo (Italy)

Marzo 2017

Page 2:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

IndiceIntroduzione 4

Cosa apprendrai? 4

Le basi di PHP 5

Sintassi di base 5

Variabili

Tipologie 5

Basi delle variabili 5

Scopo delle variabili 5

Variabili predefinite 5

Costanti 5

Espressioni ed operatori 5

Operatori aritmetici 5

Operatori di assegnazione 5

Operatori di comparazione 6

Operatori logici 6

Operatori sequenziali 6

Operatori di matrice 6

Strutture di controllo 6

Decision making 6

Loops ( circuiti) 6

Fun zioni 6

Gestione degli errori- Errori ed aspettative 6

Object Oriented Concept 6

Classi ed oggetti 7

Funzioni speciali 7

Definizione dei namespaces e loro impiego

E stensione della funzionalità ad altre classi 7

Visibilit à 7

Debugging 7

Inviare le informazioni al web server 7

GET, POST, REQUEST 7

Page 3:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Configurazione PHP 7

Un esempio di come usare PHP nella barra dei comandi 8

Possibilità di ottenere il tuo server PHP e di farlo funzionare 8

Documen tazione 8

Testing 9

Framework 9

Alcuni esempi di framework PHP 9

Symfony/Silex 10

Git 10

Crea re una Web application 10

GitLab 11

A ggiungere SSH-key a GitLab 11

Git 11

C reare un nuovo repository 12

Prima istruzione “commit” di Git 12

A ggiungere Silex al tuo progetto 13

Impiego di Composer 13

Gitignore 13

I niziare a creare il tuo PHP web-server con il file iniziale PHP 14

Cre are il primo template con HTML 15

Us are Twig per i template 15

A ggiungere il tuo stile di base e HTML 16

Il primo commit di Twig per la separazione della pagina di base dai componenti 16

Crea re un database con Doctrine DBAL 16

Composer - PSR-4 Autoloading 18

Altri metodi per la classe Application.php 21

A ggiungere un form 22

Controller code per separare la classe 26

Salvataggio dei dati nel database 27

Recupero dati salvati dal database 30

Crea re un menù 32

Un piccolo sguardo al testing: PHPUnit 33

Page 4:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Eseguire una applicazione di Booking preimpostata 36

Conclu sioni

IntroduzioneIl principale scopo di questo materiale è quello di insegnarti una nuova lingua di programmazione- PHP, ma questo è solo il primo obiettivo. Un altro obiettivo molto importante è quello di comprendere come il linguaggio di programmazione ha un ruolo di rilievo nell’industria dedicata allo sviluppo di software e come questo linguaggio è utilizzato a livello pratico. Così come nella pratica, niente è a sé stante, utilizzeremo pertanto alcuni esempi per mostrare come PHP costituisce un importante blocco di sviluppo software e può avere connessioni con molti altri sistemi. Nello specifico questo materiale sarà in grado di fornirti la tua prima esperienza pratica. Questa ti darà, a sua volta, un piccolo assaggio ed una idea iniziale dello sviluppo software all’interno del web.

Cosa apprenderai?Oltre all’apprendere una nuova lingua,otterrai esperienza in tutti gli step dello sviluppo software in un team. Inizierai ad apprendere alcuni strumenti ampiamente impiegati per sviluppare un software sostenibile come parte di un team.

Le principali tematiche che apprenderai saranno:

● PHP e frameworks (Silex)● Version control systems e source control applications (Git, Gitlab)● Dependency managers (Composer)● Unit testing (PHPUnit)● Lingua dei Template(Twig)● Database (MySQL, SQLite)

Page 5:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Le basi di PHP

PHP (acronimo che sta per PHP: Hypertext Preprocessor) è uno dei più comuni linguaggi server-side scripting. Si tratta di una lingua scripting, cioè il codice non deve essere completato prima di essere impiegato ma si completa automaticamente durante l’utilizzo. PHP è una lingua impiegata per il server-side che indica che il codice non è eseguito nel browser o nel tuo dispositivo ma nel computer dal quale richiedi che sia eseguito.

I risultati della richiesta sono gestiti da te e sono mostrati nel tuo browser.

Sintassi di basehttp://php.net/manual/en/language.basic-syntax.php

https://www.tutorialspoint.com/php/php_syntax_overview.htm

Variabili Tipologie http://php.net/manual/en/language.types.php

https://www.tutorialspoint.com/php/php_variable_types.htm

https://www.tutorialspoint.com/php/php_arrays.htm

Basi delle variabili http://php.net/manual/en/language.variables.basics.php

Scopo delle variabili http://php.net/manual/en/language.variables.scope.php

Variabili predefinitehttp://php.net/manual/en/language.variables.predefined.php

Costantihttp://php.net/manual/en/language.constants.syntax.php

https://www.tutorialspoint.com/php/php_constants.htm

Espressioni ed operatorihttps://www.tutorialspoint.com/php/php_operator_types.htm

http://php.net/manual/en/language.operators.php

http://php.net/manual/en/language.expressions.php

Operatori aritmeticihttp://php.net/manual/en/language.operators.arithmetic.php

Operatori di assegnazionehttp://php.net/manual/en/language.operators.assignment.php

Page 6:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Operatori di comparazionehttp://php.net/manual/en/language.operators.comparison.php

Operatori logicihttp://php.net/manual/en/language.operators.logical.php

Operatori sequenzialihttp://php.net/manual/en/language.operators.string.php

Operatori di matricehttp://php.net/manual/en/language.operators.array.php

Strutture di controllo http://php.net/manual/en/language.control-structures.php

Decision makinghttp://php.net/manual/en/control-structures.if.php

http://php.net/manual/en/control-structures.else.php

http://php.net/manual/en/control-structures.elseif.php

https://www.tutorialspoint.com/php/php_decision_making.htm

http://php.net/manual/en/control-structures.switch.php

Loops ( Circuiti) https://www.tutorialspoint.com/php/php_loop_types.htm

http://php.net/manual/en/control-structures.while.php

http://php.net/manual/en/control-structures.do.while.php

http://php.net/manual/en/control-structures.for.php

http://php.net/manual/en/control-structures.foreach.php

http://php.net/manual/en/control-structures.break.php

http://php.net/manual/en/control-structures.continue.php

Funzionihttps://www.tutorialspoint.com/php/php_functions.htm

http://php.net/manual/en/language.functions.php

Gestione degli errori- Errori ed aspettativehttps://www.tutorialspoint.com/php/php_error_handling.htm

http://php.net/manual/en/language.errors.php

http://php.net/manual/en/language.exceptions.php

Concetti orientati all’oggetto https://www.tutorialspoint.com/php/php_object_oriented.htm

Page 7:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Classi ed oggettihttp://php.net/manual/en/language.oop5.php

Funzioni speciali __contstruct and __invokeWe will use __construct and __invoke in the Silex project!

http://php.net/manual/en/language.oop5.magic.php

Definizione dei namespaces e loro impiego Useremo namespace nel progetto Silex!

http://php.net/manual/en/language.namespaces.rationale.php

http://php.net/manual/en/language.namespaces.importing.php

https://knpuniversity.com/screencast/php-namespaces-in-120-seconds/namespaces

Estensione della funzionalità ad altre classi Useremo le estensioni nel progetto Silex!

http://php.net/manual/en/reflection.extending.php

VisibilitàUseremo la visibilità nel progetto SIlex!

http://php.net/manual/en/language.oop5.visibility.php

DebuggingÉ importante far acquisire ad un nuovo programmer una competenza di debugging. Fin dai primi passi in programmazione è necessario conoscere come cercare gli errori generati dal programma mentre si codifica, in modo tale da consentire un recupero dei dati in caso di fallimento.

http://php.net/manual/en/function.var-dump.php

Inviare le informazioni al web server GET, POST, REQUESThttps://www.tutorialspoint.com/php/php_get_post.htm

http://php.net/manual/en/reserved.variables.get.php

http://php.net/manual/en/reserved.variables.post.php

http://php.net/manual/en/reserved.variables.request.php

Configurazione PHPVi sono principalmente tre aree diverse in cui PHP scripting viene impiegato ( vedi articolo What can PHP do?). Due di esse sono:

1. Server-side scripting. Si tratta del più tradizionale e del principale campo di azione di PHP. Per poterlo utilizzare sono necessari tre elementi: Il decodificatore PHP ( CGI o server

Page 8:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

module), un web server ed un web browser. È necessario avviare il server con una installazione PHP ad esso connessa. Puoi accedere al programma PHP con un web browser, il web server inoltra la richiesta al decodificatore PHP e quest’ultimo esegue i bits di PHP all’interno del file per poi tornare indietro sul web server. Puoi avviare un web server sul tuo dispositivo se sei in fase di sperimentazione della programmazione PHP ( puoi vedere qui le istruzioni complete);

2. Barra dei comandi scripting. Puoi realizzare uno script PHP per avviarlo senza alcun web browser o server. É necessario soltanto il decodificatore PHP per utilizzarlo ( puoi vedere le istruzioni complete qui).

Un esempio di impiego di PHP dalla barra comandi

1. Apri il terminal dal tuo sistema operativo;2. Installa PHP sul tuo dispositivo.

Per Linux Ubuntu i seguenti comandi dovrebbero funzionare: sudo apt-get install php7.0-cli

sudo apt-get install php7.0-xml

3. Puoi vedere le informazioni di PHP digitando php -i (Opzioni barra comandi );4. Avvia la modalità interattiva PHP digitando php -a;5. Questo è sostanzialmente ciò che devi fare. Per avviare il testing, digita echo “Hello

world!”; se compare la scritta “Hello world!” allora stai usando correttamente PHP nella tua barra comandi!

Possibilità di ottenere il tuo server PHP e di farlo funzionare ● LAMP (Linux, Apache, MySQL, PHP)● WAMP (Windows, Apache, MySQL, PHP)● PHP built-in webserver

Impiegheremo l’ultima. Usa il sistema operativo Linux ed il inner-built web server per guadagnare maggiore tempo per la codificazione, dato che la configurazione di LAMP o WAMP richiede tempo ed esperienza.

Documentazione Qui di seguito trovi alcuni suggerimenti pratici riguardo la documentazione che devi aggiornare mentre esegui il lavoro pratico:

1. Il codice costituisce la parte più importante. Deve essere chiaro e semplice al fine di permettere ad altri programmatori di comprenderlo. Il codice dovrebbe riportare alcuni commenti necessari ed è importante non aggiungere commenti che lo rendono inutile e

Page 9:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

creano solo altro “ rumore” al codice. Ti mostreremo alcuni esempi di come scrivere un commento più avanti;

2. Version Control System costituisce buona parte della documentazione, dato che impartisci l’istruzione “ commit” per ogni parte del codice. Dovrai produrre un “ commit” descrittivo ( una descrizione più ampia può essere richiesta). Si tratta di un passo molto importante poiché creerà una “history” del codice reversibile mentre stai effettuando l’operazione di debugging. Il nome del comando “ commit” dovrebbe includerne il contenuto, il che significa descrivere a quale codice fa riferimento il comando “ commit” e a cosa serve. Se devi riportare note particolari o problematiche, sarebbe più opportuno scriverle qui (vedi articolo esplicativo riguardo ai commenti più opportuni da riportare nella istruzione “commit” qui);

3. Se avvii un nuovo progetto o scrivi una specifica sua nuova caratteristica, sono richiesti documenti addizionali. Per ogni progetto dovrebbe essere presente un file “Readme” nel quale tutte le parti più importanti riguardo il progetto sono trascritte. Troverai alcuni esempi per comprendere come un documento Readme dovrebbe apparire nella parte pratica.

TestingEsistono diverse tipologie di testing. In alcuni casi, potrai impiegare solo alcune di esse, ma molto spesso le potrai impiegare tutte:

1. Testing durante la codificazione. Questa costituisce l’azione di base e la parte più naturale del processo: devi testare il codice che hai scritto. Devi essere certo che ogni volta che avvii una parte di esso, questa funzioni come previsto. Non devi mai inviare il tuo codice se prima non hai effettuato il testing. Tutto ciò potrebbe accadere nel momento in cui diventerai più esperto e potrai cambiare le parti più “ semplici” del codice.

2. Una seconda persona (un altro programmatore o il tester) dovrebbe testare il codice. É molto importante che una seconda persona effettui il test. Generalmente, ciò avviene nella fase di completamento della codificazione, ma nella pratica, a livello più complesso, potrebbe essere effettuata una volta raggiunti alcuni checkpoint. Un’altra persona potrebbe riscontrare alcuni problemi o errori logici di cui il programmatore non si è accorto. Inoltre, un’altra persona potrebbe anche impiegare un altro sistema di testing che potrebbe rivelare alcuni bug che il programmatore non ha considerato.

3. Revisione del codice. Un’altra persona ( generalmente un programmatore) dovrebbe leggere il tuo codice. Potrebbe individuare alcuni problemi mancanti o errori logici. Potrebbe aiutare a rendere il codice più semplice o a riproporlo in modo tale che tutti possano comprenderlo e che si mantenga sostenibile.

4. Test automatici. Sono principalmente utili per le parti complesse del software poiché alcune volte il testing risulta difficile ed implica un grande dispendio di tempo. Sarebbe opportuno possedere i test di base per ogni pagina del progetto. Questo ti aiuterà specialmente nel momento in cui possiedi un codice riutilizzabile, in modo tale da permetterti di non spezzare qualche altro codice che non hai cambiato, ma di dipendere sempre dal codice che hai

Page 10:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

cambiato. Nell’esercizio pratico, ci focalizziamo sulla programmazione di un framework PHPUnit.

FrameworkIn generale, un framework è una struttura concettuale che ha come scopo quello di supportare o guidare la costruzione di un elemento che espande la struttura in modo utile. Un framework di un software è una astrazione nella quale il software che offre generiche funzionalità può essere cambiato in modo selettivo da un codice utente addizionale di scrittura. É possibile avere una funzionalità di codice simile in diversi luoghi nei quali esso deve essere eseguito con differenti dati. Un framework ci dà una grande mano poiché non è necessario riscrivere da capo l’intero codice partendo dagli elementi di base, ma, semplicemente, esso può essere impiegato quante volte si vuole, specificando alcuni dettagli. Questo permette di risparmiare tempo e sforzi e di riorganizzare il tuo codice in maniera migliore e più semplice per modificarlo, se necessario.

(Why use frameworks?, When use frameworks?)

Alcuni esempi di framework PHP1. Laravel2. Symfony(Silex)3. PhalconPhp4. Zend5. CakePhp6. Slim

Symfony/SilexSymfony è un set che riunisce Componenti PHP, un Web Application framework, Philosophy ed una Community —che funzionano insieme in armonia (6 good reasons to use Symfony).

GitGit è la versione di control system più impiegata. Una semplice definizione di control system è: ciò che aiuta a monitorare ciascun codice che viene scritto. Potrai ottenere una lista contenente indicazioni relative a quando il codice è stato scritto o aggiornato. Git ti aiuta anche a scrivere un codice come team, in modo tale che ciascuno dei membri possa portare a termine il proprio compito senza disturbare gli altri. In aggiunta a tutto ciò, GIt costituisce un ottimo strumento per documentare le ragioni connesse al cambiamento del codice. Per maggiori informazioni the chapter about committing oppure vedi il video o visita il sito web.

Per ottenere una introduzione veloce al mondo di Git, puoi utilizzare questo interactive tutorial oppure il seguente link per comprendere interazioni più complicate che caratterizzano Git.

Creare una Web applicationUna “source control application - repository manager -” è ciò che probabilmente dovrai impiegare per poter sviluppare un software nell’ambito di un team. Si tratta di un’applicazione che permette di

Page 11:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

condividere il codice, di visualizzare le modifiche ed automatizzare diverse parti del processo di sviluppo software. Solitamente, costituisce uno degli strumenti più utili ed è anche il punto di partenza per dare vita ad un nuovo progetto.

Le più famose” source control application” sono:

1. Github2. Bitbucket3. GitLab

In tutte, la base di partenza è la stessa. Lavorano contemporaneamente con la versione di controllo Git. Questa è’ facile da usare e, considerato che Git è anche parte del materiale, è perfetta per poter mettere in pratica la teoria appresa. In questo esempio, impiegheremo GitLab (Introduction to GitLab).

La descrizione dell’applicazione che andremo a sviluppare con queste istruzioni è disponibile al seguente link-https://gitlab.com/i-sepp/bcs-koolitus/

GitLab1) Crea il tuo account https://gitlab.com/users/sign_in ed effettua il log in .2) Crea un nuovo progetto - https://gitlab.com/projects/new.3) Aprendo il progetto creato, dovresti trovarvi alcune istruzioni.

Aggiungere SSH-key a GitLabPer prevenire la possibilità che altri utenti ottengano l’accesso al tuo codice, è necessario impiegare SSH-keys per effettuare il log in GitLab direttamente tramite la barra dei comandi. Questo implica che ciascun computer possiede il suo SSH-key e che questo è aggiunto all’utente GitLab. Se si comunica attraverso GitLab, questa chiave di accesso viene impiegata per autenticare l’utente.

Per cominciare, aprire GitLab e cercare “ impostazioni di profilo”, successivamente aprire SSH-keys.

A questo punto, è necessario inserire la SSH-key del tuo pc. Probabilmente dovrai generarne una.

Qui di seguito riportiamo alcune istruzioni su come procedere:

https://gitlab.com/help/ssh/README

https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/

Ora sei pronto per cominciare a lavorare con Git!

N.B. potresti impiegare anche una seconda opzione, che non prevede l’impiego di GitLab o di altri server, ma che ti permette di apprendere come usare Git a livello locale con i tuoi dispositivi. Per fare ciò, devi installare Git, configurare la variabile in modo che possa essere impiegata a livello globale (vedi il prossimo capitolo) ed inizializzare Git nella cartella che vuoi impiegare, semplicemente avviando “Git init”.

cd Projects/my_project_name

git init

Page 12:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Ora puoi iniziare ad usare Git ( git add, git commit etc.)

Git1) Installa Git sul tuo sistema operativo ( preferibilmente Linux)

Esempio: Impiegando il sistema Ubuntu, daremo il seguente comando:sudo apt-get install git

Tutte le istruzioni su come avviare ed installare Git sono disponibili al seguente link.

Le istruzioni relative al sistema Linux sono disponibili al seguente link.

2) Adesso, dobbiamo configurare le variabili globali per Git. Git le impiegherà in futuro e le collegherà al codice che produrrai.

In questo modo, creeremo lo storico di chi le ha scritte. Puoi accedere alle istruzioni in GitLab dal tuo nuovo progetto- “Git global setup”.git config --global user.name “Firstname Lastname”

git config --global user.email “[email protected]

3) Ora che hai configurato il tuo Git, sei pronto per usarlo!

Creare un nuovo repository Queste informazioni sono utili anche nel tuo nuovo progetto GitLab.

Adesso possiamo creare un link con una cartella nel tuo progetto in GitLab.

1) Innanzitutto, impiega il tuo comando per andare nella cartella dove desideri creare il tuo nuovo file del progetto.

2) Apri la cartella chiamata “ projects” cd Projects/

3) Successivamente, possiamo copiare la nuova cartella da GitLab sul computer. N.B. il nome cambierà a seconda del progetto.

git clone [email protected]:my_project_name.git4) Crea un file” Readme.md “

“Readme” consiste in una grande documentazione del progetto. Dovrebbe contenere tutte le informazioni necessarie riguardanti il progetto. Puoi sicuramente aggiungere informazioni gradualmente durante lo sviluppo del tuo progetto, ma per prima cosa, sarebbe meglio creare questo file direttamente ed immediatamente.

Qui di seguito alcuni template di file “Readme” che possono aiutarti:

https://gist.github.com/PurpleBooth/109311bb0361f32d87a2

https://gist.github.com/jxson/1784669

Puoi costruirlo aprendo file explorer ed aggiungendo un nuovo file alla tua cartella del progetto, oppure puoi usare la barra dei comandi:

cd my_project_name/

Page 13:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

touch README.md

Prima istruzione “commit” di GitAdesso possiamo caricare i cambiamenti effettuati su GitLab. Questo costituirà anche la prima istruzione “ commit” del progetto!

(Good article about commit messages, Some good suggestions about commit messages).git add README.md

git commit -m “You have to write here the message of your commit. Example: Added README.md”

git push -u origin master

L’ultimo comando da impartire permetterà di inviare i cambiamenti direttamente al server GitLab.

Una volta avviato GitLab, dovresti poter vedere un nuovo file “Readme-md”. Nella cartella “Repository->Commits” dovresti poter vedere il tuo primo “ commit”.

Per maggiori informazioni e per vedere un esempio clicca su questo link .

Aggiungere Silex al tuo progettoImpiego di Composer Per scaricare Silex ( download Silex) su un dispositivo locale, possiamo impiegare Composer.

Composer é un “dependency manager” per i software PHP. Puoi impiegarlo per scaricare tutto ciò che serve per un “software di terza parte” automaticamente. Semplifica un codice di terza parte nel tuo progetto software.

Inoltre, avrai un changelog nel quale troverai tutte le “dependencies” che sono necessarie per il progetto. Ciascuno degli utenti che impiega il tuo codice, ha adesso accesso alla stessa identica versione delle librerie.

Scaricalo seguendo le istruzioni qui di seguito:

1. installa il programma seguendo le istruzioni qui riportate.2. Scarca Silex seguendo le istruzioni riportate al seguente link

Silex creerà un file composer.json che conterrà tutte le” dependencies” di cui hai bisogno.

Creerà anche una cartella vendor/ . Questa cartella ingloberà tutto il tuo” codice di terza parte”. Se avvii git status potrai anche vedere il file composer.lock . Questo si auto- genera e si aggiorna automaticamente tutte le volte che installi un programma tramite Composer.

GitignoreDato che la cartella vendor/ sarà scaricata automaticamente con il programma Composer e che non possiamo in alcun modo apportarvi delle modifiche, non la aggiungeremo all’area start di Git. La ragione per la quale non dovremmo cambiare nessun codice nell’“archivio di terza parte” è che se questo accade, perderemmo la possibilità di aggiornare l’archivio con nuove versioni e riscontreremmo molti più codici da maneggiare. Di conseguenza, non è necessario inserire questa cartella in GitLab. É necessario però, dire a Git quali file dovrà ignorare(.gitignore).

Page 14:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Abbiamo bisogno di un altro file nuovo, nel quale definire i percorsi dei file che non devono essere caricati su GitLab.

1. Crea un nuovo file per il tuo progetto chiamato .gitignore. 2. Definisci la cartella Vendor in quel file. (vendor/) -(vedi l’azione corrispondente a fine

capitolo) 3. Digita git status4. Se visualizzi ancora la cartella vendor nella tua area staging, avvia git rm -rf --cached

vendor/. Se non la visualizzi, allora il lavoro è concluso. Questa parte è anche descritta al seguente link.

Adesso dovrebbero esserci 3 diversi file nella tua area staging: 1-.gitignore

2-composer.json

3-composer.lock

Impartisci l’istruzione “ commit” per chiudere la transazione come secondo progetto.

Dare l’istruzione “commit”:

1. git add . ( questo aggiunge tutti i nuovi file nei file del progetto all’area staging. Alternativamente, puoi aggiungerli separatamente - git add .gitignore composer.json composer.lock)

2. git commit -m “Adding Silex to project by using composer”3. git push origin master(opzionale- non è necessario comprimere i file dopo ogni

commit, puoi farlo quando ne hai bisogno per recuperare il tuo codice online).

Nota: se qualcuno dovesse clonare il tuo “repository GitLab” e volesse avviare il tuo codice, dovrebbe installare composer sul suo computer ed avviare “ composer install” nella cartella progetto. A questo punto, potrà ottenere ed attivare anche la cartella vendor.

(Un esempio è visibile cliccando sul seguente link )

Dato che abbiamo ottenuto un software di terze parti per la prima volta all’interno del progetto e che ha interessato la modalità con la quale il software viene installato, dovremmo documentare quanto accaduto nel documento “Readme.md”.

(Un esempio è disponibile cliccando sul seguente link )

Per adesso, assumiamo che tu sappia creare nuove azioni e che tu sappia caricarle in GitLab. Le successive istruzioni quindi non conterranno ulteriori informazioni relative al comando “ commit”.

Iniziare a creare il tuo PHP web-server con file iniziali PHP Per creare un “web server”, impiegheremo “PHP built-in web server”. Si suppone che tu abbia già installato PHP sul tuo dispositivo locale ma prima di tutto ciò, avremo bisogno di un file PHP per avviare il web-server:

1. Crea una nuova cartella web. Al suo interno crea un front-controller:mkdir web

Page 15:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

2. crea un font-controller chiamato index.php touch index.php3. Aggiungi un codice iniziale da impiegare per il monitoraggio per verificare se il tuo web-

server è in funzione. 4. Aggiungi Silex all’interno del tuo font controller ed attiva il debug per lo sviluppo 5. Definisci il primo percorso per l’attività di testing:

$app->get('/hello', function() {d

return 'Hello world!';

});

6. Ora, avvia i test. Avvia il tuo command line web server digitando nella tua cartella :php -S localhost:8000 -t web

7. Apri il seguente URL sul tuo web browser: http://localhost:8000/hel lo ed assicurati di visualizzare una pagina bianca con una singola scritta: “Hello world!” then it is working!

(Un esempio è disponibile al seguente link )

Nota: Da questo momento in poi, durante il processo di codificazione, gli errori PHP dovrebbero essere presenti nella tua barra comandi, nella quale è stato avviato il web-server. Se il tuo codice non funziona, sarà il primo punto nel quale ricercare degli errori nel tuo codice.

Creare il tuo primo template HTML Usare Twig per il templateSarebbe preferibile se avessimo un template HTML nel quale i file PHP e tutta la logica relativa al template potrebbe essere collocata e dove altre funzionalità back-end possono essere gestite.

Per questo motivo, impiegheremo Twig. “Twig” viene usato insieme a Silex(Symfony) (Twig in Silex).

Grazie a Twig, possono separare i template HTML dal linguaggio PHP, dato che Twig avrà il ruolo di intermediario tra PHP e HTML. Twig è molto utile e porterà il tuo HTML ad un alto livello. É molto semplice impararne le basi. Inoltre, possiede alcune funzioni utili, anche se un pochino più complicate, che ti aiuteranno nel momento in cui deciderai di impiegare Twig e di migliorare le tue competenze nel linguaggio template. Puoi creare una funzione “custom” in Symfony/Silex ed impiegarla nel tuo template con Twig senza sovraccaricare i tuoi template con tanti lunghi metodi PHP. Probabilmente durante questo corso, tratteremo le funzionalità Twig solo in superficie e quindi sarà facile comprenderle, visto che si comporta come come un PHP ma con una diversa sintassi.

1. Scarica la versione delle dependency di Twig(vedi le istruzioni qui)composer require twig/twig

2. Dobbiamo anche registrarlo nel font-controller: $app->register(new Silex\Provider\TwigServiceProvider(), [

'twig.path' => __DIR__.'/../views',

]);

Qui precisiamo che la directory del file chiamata “ views” diventerà la cartella storage del tuo file html.twig. Questo è solamente un nome della cartella che scegli. Per comodità è stata chiamata “ views”.

Page 16:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

3. Crea una cartella con il nome- “views”.4. Qui dovremmo creare un primo file HTML. Lo denomineremo “base.html.twig”.

Sarà necessaria l’estensione ”.twig” nella parte finale del nome del file in modo tale che possiamo scrivere il linguaggio di Twig di questo file. Inoltre, questo template conterrà la base delle nostre applicazioni e lo stile generale che verrà impiegato in tutte le pagine di applicazione.

5. In quel file, verranno aggiunti tutti i tag che sono necessari in una nuova pagina ( vedi il codice in commit).

6. Ora, tutto quello che resta da fare è impiegarlo in un “controller- index.php”. Anche il nome dovrebbe essere modificato per ottenere maggiore senso logico, per esempio “bookings/create”. Per questo motivo, la parte di codice che deve sostituire il messaggio” /hello “ in index.php sarà:$app->get('/bookings/create', function () use ($app) {

return $app['twig']->render('base.html.twig');

});

7. Testare nel tuo web browser il nuovo url: http://localhost:8000/bookings/create 8. Documentazione: dato che impieghiamo alcune nuove dependencies, sarebbe opportuno

riportare quanto accaduto nel documento” README.md” (vedi commit).

Aggiungere il tuo stile di base e HTMLPer abbellire il tutto, abbiamo bisogno di un pochino di stile. Aggiungiamo dunque CSS e HTML.

Dovremmo avere una nuova cartella per CSS. Visto che non “minificheremo” CSS e Javascript, aggiungeremo questa cartella all’interno della cartella web. Solitamente, per CSS/ Javascript vi sono due location nel progetto. Prima di tutto, è necessaria una location nella quale scrivi il codice e le tue cartelle CSS e Javascript e poi la stessa cartella,nella cartella web, che si trova effettivamente nel browser mentre la pagina viene visualizzata. La cartella duplicata è generata automaticamente e tutti i codici sono minificati.

Dato che i progetti di grandi dimensioni posseggono molte risorse, il codice deve essere minificato per ridurre il tempo di caricamento. In questo caso, per scopi di insegnamento, considerato che sono necessari strumenti extra per impiegare una configurazione extra, creeremo gli asset dei file direttamente nella cartella web.

Dato che tutti conoscono HTML e CSS, questi sono solo esempi ma sarebbe meglio crearne uno personale( vedi il mio codice al seguente link).

Il primo commit di Twig per separare la pagina di base dai componentiPossiamo separare gli elementi della pagina in differenti componenti usando Twig. Questo significa che diverse parti della nostra pagina saranno collocate in diversi file. Si tratta di un’ottima pratica per diverse ragioni:

Page 17:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

1. Il codice diventa maggiormente riutilizzabile;2. É più facile da impiegare;3. Ogni componente è considerato separatamente, per questo motivo è facile cambiarlo,

riprogrammarlo e ri-disegnarlo senza modificare altri elementi.Per fare tutto ciò, impieghiamo la funzionalità di Twig chiamata include.

Separa la parte superiore e la parte inferiore di HTML e di CSS in due file differenti.

In questo modo, otterrai 4 nuovi file: “_header.html.twig”, ” _footer.html.twig”, “header.css, footer.css”.

NB: la documentazione dei nuovi componenti si trova nella parte superiore nei nuovi file HTML

( vedi un esempio di separazione)

Creare un database usando Doctrine DBAL Doctrine DBAL è un potente database abstraction layer con diverse caratteristiche come uno schema di introspezione, uno schema di gestione ed una astrazione PDO. Possiamo impiegarlo per creare un database e comunicare tra PHP ed il database.

Avremo bisogno di un database per salvare alcuni dati da un form compilato. Il database vendor che impiegheremo sarà SQLite.

Per fare tutto ciò, segui i seguenti step:

1. Per cominciare, dobbiamo scaricare “Doctrine/DBAL” attraverso Composer (using Doctrine in Silex).

composer require "doctrine/dbal:~2.2"

2. Installa SQLite suol tuo dispositivo. In questo caso stiamo usando Ubuntu 16.04, quindi uno dei seguenti comandi funzionerà a seconda della versione di PHP impiegata. Esempio: sudo apt-get install php7.0-sqlite3Nota: Le istruzioni per l’installazione potrebbero cambiare nel corso del tempo e potrebbero essere diverse a seconda del sistema operativo che viene impiegato. Per questo motivo, sarebbe meglio digitare su google “ come installare SQLite sul tuo dispositivo” a seconda del sistema operativo.

Dopo questo passaggio, devi riavviare il tuo “PHP inner-built web server”.

3. Documentazione: è necessario aggiornare il file README.md, dal momento che abbiamo cominciato ad impiegare un archivio di terze parti chiamato “Doctrine DBAL”. Inoltre, SQLite deve essere installato su tutti i dispositivi che possono supportare questo software ( vedi qui un esempio)

4. Ora, dobbiamo registrare il nuovo servizio nel nostro front-controller.

Per prima cosa, dobbiamo creare una nuova cartella nella quale il file database verrà collocato. Chiameremo la cartella database.

(Instructions are here. More information about Doctrine general configuration.)$app->register(new Silex\Provider\DoctrineServiceProvider(), [

Page 18:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

'db.options' => [

'driver' => 'pdo_sqlite',

'path' => __DIR__.'/../database/app.db',

],

]);

Nelle “db.options”, dobbiamo definire come driver il database vendor che utilizzeremo. Nel nostro caso, sarà'pdo_sqlite'.

A questo punto, definiremo un percorso, il cui valore consiste in una sequenza nella cartella e che raccoglie il nostro database.

(Le istruzioni per installare ed usare SQLite sono disponibili al seguente link )

Nota: se il tuo codice di applicazione non funziona e compare un errore nella barra dei comandi, indicando che un driver è mancante, allora significa che il passaggio precedente, relativo all’installazione di SQLite, non è andato a buon fine.

I file dei database non dovrebbero essere caricati in GItLab. Si tratta di un processo automatico che viene generato in un ambiente di sviluppo. Per questo motivo, dobbiamo aggiungere la cartella del database a “ .gitignore file”.

5. Creare una “query MySQL” per dare vita ad uno schema per i “ bookings”. Si potrebbe costruire nel seguente modo:

"CREATE TABLE bookings (

id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,

firstName VARCHAR(40) NOT NULL,

lastName VARCHAR(40) NOT NULL,

phone VARCHAR(10) NOT NULL,

email VARCHAR(20) DEFAULT NULL,

birthday DATE NOT NULL,

startDate DATE NOT NULL,

endDate DATE NOT NULL,

arrivalTime TIME DEFAULT NULL,

additionalInformation TEXT,

nrOfPeople INT NOT NULL,

payingMethod VARCHAR(10) NOT NULL

);"

Impiegheremo la funzione di DBAL Connection.php executeQuery per avviare questo MySql. Il codice sarà il seguente:

$app['db']->executeQuery("MySQL code here");

Page 19:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

6. Se non esiste, dobbiamo creare questo schema una sola volta. Dobbiamo porre questo codice all’interno di una “if-clause”. Dovremo impiegare uno SchemaManager per controllare che esista o non esista nel nostro database.

if (!$app['db']->getSchemaManager()->tablesExist('bookings')) {

$app['db']->executeQuery("MYSQL code here");

}

7. Se ricarichi la pagina (http://localhost:8000/bookings/create), il codice dovrebbe essere in funzione ed un database dotato di uno schema chiamato “ bookings” dovrebbe essere creato. Per un test iniziale, puoi sempre utilizzare PHP var_dump per verificare il codice che è stato inserito nella “if-clause”. In futuro, non sarà necessario effettuare questa operazione. Non unire mai i file Git con i componenti var_dump, poiché vengono impiegati solamente per un test visivo iniziale (vedi la sezione php riguardante il debugging). Nota: puoi sempre ricreare la parte del database che si genera eliminando “app.db” dalla cartella.

8. Puoi controllare se il file del database è stato creato, verificando la presenza nella cartella database del file chiamato “app.db”. ( vedi qui un esempio)

Composer- PSR4- AutoloadingCome puoi notare, il front-controller diventa sempre più grande. Non abbiamo ancora aggiunto un form alla nostra pagina ma abbiamo definito i nuovi servizi e le nuove funzionalità e continueremo su questa strada.

Vi è solo un problema. Tutti i nostri codici PHP sono collocati nel front-controller. Immagina adesso che ci sarà un sito web con 20 pagine diverse. Probabilmente ci saranno molte schede nel nostro database e molte funzionalità complesse. É irragionevole scrivere tutto il nostro codice in un unico file poiché rende difficile la lettura e lo sviluppo ed, in un secondo momento, renderà difficile anche un testing.

Per questo motivo, dobbiamo separare il codice in pezzi e collocarli logicamente nella cartella del nostro progetto in modo tale da ottenere differenti file e metodologie. Questo significa che dobbiamo incominciare a praticare una programmazione orientata all’oggetto. Il front- controller è un file che può essere sempre preso in considerazione quando si apre una pagina web ma teniamo presente che eseguirà il codice in altri file.

Per questo motivo, separeremo una parte dei nostri codici in diversi file.

Per fare ciò, avremo bisogno di “PSR-4 autoloading” per caricare il nostro nuovo file nel front-controller, nello stesso modo in cui Composer posiziona i file nella cartella vendor (Good article about PSR-4 autoloading).

Innanzitutto, dobbiamo creare una nuova cartella dove memorizziamo i nuovi file PHP. Lo chiameremo “src” (che significa “ sorgente”).Ora dobbiamo definire questa nuova cartella per il caricamento automatico di Composer. Apri il file “composer.json” e aggiungi il nuovo percorso utilizzando PSR-4. Chiama il percorso con il namespace “BookingApp”. Assicurati di conoscere gli spazi dei nomi di php per capire meglio questa parte.

Page 20:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

"Autoload": {"psr-4": {"BookingApp \\": "src"}}

"autoload": {

"psr-4": { "BookingApp\\": "src" }

}

Ora possiamo chiamare i file nella cartella “src”, utilizzando un namespace chiamato “BookingApp”. È inoltre necessario eseguire l'installazione del Composer per rendere effettive le modifiche.

composer install

1. creeremo un file chiamato “Application.php” nella cartella src, che sarà aggiunta in una nuova classe di file denominata” Application”.

2. Poiché è un file PHP, deve iniziare con il tag di apertura di PHP: <?php

Successivamente, definiremo lo spazio dei nomi, dove si trova questo file.

Spazio dei nomi “BookingApp”;

Dobbiamo definire la classe del file che deve essere aggiunta allo stesso del nome del file:

class application

{

}

3. Poiché questa classe avrà la stessa funzionalità di Silex \ Application, allora useremo questa denominazione della classe per estenderlo. Gli daremo un nome personalizzato (SilexApplication) per un utilizzo più chiaro e migliore:

usa Silex\Application come SilexApplication;

class Application viene estesa a SilexApplication

4. Varieremo il codice da” index.php” a “Application.php”.Per ridefinire la funzionalità di Application.php, faremo la seguente aggiunta :$app = new Silex\Application();

Come si può vedere, il file PHP viene chiamato “Silex \ Application.php”. Il codice farà il resto.

Quando estendiamo questo file, dobbiamo sovrascrivere il ” file __construct method”, quindi nell'indice.php, quando rinomineremo il file “custom Application.php”, verrà anche attivato il nuovo construct-method personalizzato e potremo aggiungere alcuni metodi personalizzati. Poichè lo sovrascriveremo, il file deve possedere gli stessi parametri del

Page 21:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

“__construct method” in “Silex\Application.php”. Dobbiamo ancora denominare il “parent __construct”, quindi aggiungeremo al custom __construct method:public function __construct(array $values = []) {

parent::__construct($values);

}

Nota: per capire meglio questa parte, leggi i link riguardanti il “__construct” ed il “parent”. In questo capitolo, ci sono esempi più semplici della stessa funzionalità.

5. Ora possiamo portare il codice dall' ”indice.php” all'applicazione “Application.php” tramite il seguente passaggio: codice di configurazione e opzioni di $ app, nuova registrazione del servizio, creazione della tabella di database e definizione del percorso. Quando il file viene inserito nella classe “custom Application class”, il codice cambierà:

a. $app variable sarà $this nowb. Dobbiamo utilizzare tutti gli altri spazi dei nomi di file all'inizio del file.

usa Silex\Provider\DoctrineServiceProvider;

usa Silex\Provider\TwigServiceProvider;

[ … ]

$this['debug'] = true;

$this->register(new TwigServiceProvider(), array(

'twig.path' => __DIR__.'/../views',

]);

$this->register(new DoctrineServiceProvider(), ['db.options' => [

'driver' => 'pdo_sqlite',

'path' => __DIR__.'/../database/app.db',

],

]);

/* Creating a table if it doesn't exist yet */

if (!$this['db']->getSchemaManager()->tablesExist('bookings')) {

$this['db']->executeQuery("...MySQL..");

}

$this->get('/bookings/create', function() {

return $this['twig']->render('base.html.twig');

Page 22:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

});

6. Nel file” index.php” per dare un nome alla nostra nuova “Application.php” personalizzata useremo il suo nuovo spazio nominale definito.

<?php

use BookingApp\Application;

require_once __DIR__.'/../vendor/autoload.php';

$app = new Application();

$app->run();

7. Ora, se tutto è andato a buon fine , la creazione di una nuova classe è riuscita.(vedi un esempio qui).

Altri metodi per la classe Application.php????Well, now you might think that what was the point if now we will only enlarge the method __construct in Application.php. ????

In realtà, creeremo alcuni nuovi metodi per più parti separate logiche e creeremo nuove classi.

Abbiamo tre iter logici nel nostro codice:

1. Registrazione dei servizi2. Creazione di tabelle nel database3. Definizione di percorsi

Secondo questi percorsi , creeremo tre funzioni private.private function configureServices()

private function createDBTables()

private function configureControllers()

“Privato” perché lo utilizzeremo solo all'interno di questa classe (Leggi di più sulla visibilità).

Nota : Fondamentalmente puoi nominarli come pensi sia più logico, ma ricordate di usare nomi comprensibili per altri programmatori, in modo che il nome delle funzioni indichi anche lo scopo della funzione. (I programmi devono essere scritti per essere compresi dalle persone e principalmente eseguiti dalle macchine - Dalla "Struttura e interpretazione dei programmi informatici" di Abelson e Sussman)

Page 23:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Ora, tutto quello che resta da fare è scrivere il codice dentro le funzioni e chiamare le funzioni nella__construct method.

public function __construct(array $values = [])) {

parent::__construct($values);

$this->configureServices();

$this->createDBTables();

$this->configureControllers();

}

(Vedi esempio di commit.)

Aggiugere un formIl passo successivo è quello di creare un form nella nostra pagina.Per questo, useremo FormServiceProvider.

1. In primo luogo, è necessario scaricare alcuni componenti di modulo con Composer.composer require symfony/form

composer require symfony/twig-bridge symfony/config symfony/translation

(Vedi esempio di commit)

2. Quindi, dobbiamo registrare nuovi servizi in Application.php.usa Silex\Provider\FormServiceProvider;

usa Silex\Provider\LocaleServiceProvider;

usa Silex\Provider\TranslationServiceProvider;

[ ... ]$this->register(new FormServiceProvider());

$this->register(new LocaleServiceProvider());

$this->register(new TranslationServiceProvider(), [

'translator.domains' => [],

]);

Nota: al momento non usiamo alcuna logica di traduzione personalizzata, ma useremo il componente twig-bridge,questo richiede il TranslationServiceProvider perchè sia registrato .

3. Creare un form oggetto nel quale definiremo tutti i campi che desideriamo renderizzare:$form = $this->formFactory->createBuilder(FormType::class)

->add('firstName', TextType::class, ['required' => true])

->add('lastName', TextType::class, ['required' => true])

->add('phone', TextType::class, ['required' => true])

->add('email', TextType::class,['required' => false])

->add('birthday', DateType::class, [

'required' => true,

Page 24:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

'widget' => 'single_text',

'format' => 'dd.MM.yyyy',

])

->add('startDate', DateType::class, [

'required' => true,https://gitlab.com/i-sepp/bcs-koolitus/commit/942eb77a32fb499c3cd487a3b43232b303433881

'widget' => 'single_text',

'format' => 'dd.MM.yyyy',

])

->add('endDate', DateType::class, [

'required' => true,

'widget' => 'single_text',

'format' => 'dd.MM.yyyy',

])

->add('arrivalTime', TimeType::class, ['required' => true])

->add('nrOfPeople', IntegerType::class, ['required' => true])

->add('payingMethod', ChoiceType::class, [

'choices' => ['cash' => 'cash', 'transfer' => 'transfer'],

'required' => true

])

->add('additionalInformation', TextareaType::class, [

'required' => false

])

->add('submit', SubmitType::class,['label' => 'Send booking'])

->getForm()

;

il Form di base fornisce molti altri form-types. Ciascuna tipologia possiede diverse opzioni disponibili per l'utilizzo. Ad esempio, DateType possiede un'opzione "format", che è possibile utilizzare se si desidera avere un diverso tipo di formato nella serie di date nel form. Per saperne di più sulle possibilità di Form Type, si consiglia di esaminare la documentazione.

4. Tutti i form-types-namespaces devono essere definiti, quindi devono essere utilizzati all'inizio del file.

usa Symfony\Component\Form\Extension\Core\Type\ChoiceType;

usa Symfony\Component\Form\Extension\Core\Type\DateType;

[ … etc …]

Page 25:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

5. Ora, dobbiamo mostrare il modulo che abbiamo creato in un form. Per questo, creeremo un nuovo form chiamato “form.html.twig” e useremo Twig- template-inheritance per dare a questo form lo stesso HTML e CSS di base che abbiamo già nel nostro “base.html.twig”.

Così, in un primo momento, creeremo un blocco che potremo riutilizzare nel nostro “form.html.twig”.

Questi saranno tre blocchi: stylesheets, content e javascripts.{% block stylesheets %}

<link rel="stylesheet" type="text/css" media="screen" href="/css/normalize.css">

<link rel="stylesheet" type="text/css" media="screen" href="/css/base.css">

<link rel="stylesheet" type="text/css" media="screen" href="/css/header.css">

<link rel="stylesheet" type="text/css" media="screen" href="/css/footer.css">

{% endblock %}

[ … ]

<div class="content">{% block content %}{% endblock %}</div>

[ … ]

{% block javascripts %}{% endblock %}

6. Nel form.html.twig, preciseremo che questo nuovo modello estende la base.html.twig.{% extends 'base.html.twig' %}

7. Possiamo anche aggiungere qualche contenuto al blocco dei contenuti. Dal momento che stiamo cercando di renderizzare un form, possiamo utilizzare il form di rendering già pronto. Potresti renderizzare ogni campo separatamente, ma al momento non è necessario.

{% block content %}

<h2>Some nice heading here!</h2>

{{ form_start(form) }}

{{ form_widget(form) }}

{{ form_end(form) }}

{% endblock %}

8. Adesso dobbiamo usare questo modello nel controller. (Vedi esempio di modifiche al codice.)

return $this['twig']->render('form.html.twig', [

'form' => $form->createView(),

]);

Page 26:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

9. Ora, se ricarichi la tua pagina, Dovresti vedere il form . Perchè HTML possiede solamente 3 righe di codice per renderizzare cosi tante informazioni di HTML?È stato utilizzato il tema di twig predefinito, collocato in - /vendor/symfony/twig-bridge/Resources/views/form/form_div_layout.html.twig

Qui puoi vedere un mix di HTML e Twig che crea un codice HTML riutilizzabile per i tuoi elementi del form.

Twig form theming rende la codificazione molto più veloce. Puoi sempre personalizzare i tuoi elementi ma non è necessario scrivere una quantità enorme di HTML ogni volta che crei un nuovo form.Prenderemo solo un po 'di temi personalizzati in modo da poter abbellire il form.

10. Voglio avere una classe personalizzata nel mio elemento <form>. È abbastanza semplice da aggiungere.{{ form_start(form, {attr: {class: 'booking-form'}}) }}

11. Scriveremo un piccolo tema personalizzato all'interno dello stesso file. Se vogliamo avere una classe personalizzata attorno ad ogni campo di un modulo, quindi possiamo sovrascrivere i generi form_row Twig block e aggiungere quello che desideriamo. In alcuni casi, abbiamo bisogno di farlo per uno specific custom field, ma al momento stiamo generando un generale form_row styling in tutta la nostra applicazione.{% block form_row %}

<div class="form-row">

{{ form_label(form) }}

{{ form_widget(form) }}

</div>

{% endblock %}

12. Per utilizzare questo tema personalizzato dobbiamo definirlo all'inizio del file.{% form_theme form _self %}

13. Ora, per tutte le classi aggiunte scriveremo alcuni CSS e le aggiungeremo al template.{% block stylesheets %}

{{ parent() }}

<link rel="stylesheet" type="text/css" media="screen" href="/css/form.css">

{% endblock %}

Come desideriamo conservare i file di stile base.html.twig, useremo il Twig parent() function.

14. Ora la pagina del modulo deve essere molto più bella (Vedi questo commit).

Page 27:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Controller code per separare la classeSarebbe una buona idea separare il controller code dalla nostra general Application.php code. Questo serve per un codice più semplice e leggibile, che è sostenibile e più facile da testare.

1. Dovremmo creare una cartella separata per i controller nella cartella src.cd src

mkdir Controllers

2. Poi, creiamo una nuova classe per CreateBookingController.phpcd Controllers

touch CreateBookingController.php

3. Come sempre, iniziamo con un qualsiasi nuovo file PHP opening tag:<?php

4. e un namespace:namespace BookingApp\Controllers;

5. E poi, definendo il nome della classeclass CreateBookingController

{}

6. Ora dobbiamo pensare a quali tipi di variabili dobbiamo avere all'interno di questa classe. Se guardiamo la funzione anonima corrente all'interno di Application.php, possiamo notare che ci sono due variabili diverse che vengono prelevate dall'esterno della funzione:

$this[form.factory']

$this['twig']

Non c'è alcun motivo di trasferire tutta la variabile $this. Trasferiremo solo le dependencies di cui abbiamo bisogno della classe appena creata. Sarà molto più chiaro controllare quali tipi di variabili siano state utilizzate all'interno della nuova classe. Inoltre, sarà più facile testare e leggere. Ora, dobbiamo rinominare la Application.php$this->match('/get', new CreateBookingController(

$this['form.factory'],

$this['twig']

));

Non dimenticare di importare il nuovo namespace.usa BookingApp\Controllers\CreateBookingController;

7. Dobbiamo ricevere queste variabili all’interno di CreateBookingController, quindi useremo il __construct method .public function __construct(FormFactory $formFactory \Twig_Environment $twigEnv)

{

$this->formFactory = $formFactory;

$this->twigEnv = $twigEnv;

}

Page 28:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

useremo type declaration o type-hints per mostrare il contenuto delle variabili. Il tipo di suggerimento serve ad essere sicuri di aver trasferito una dipendenza appropriata. Attraverso type-hinting, verrà visualizzato un errore immediato se viene trasferita una dependency inadeguata.

Stiamo usando PHP non-static properties per rendere le variabili importate utilizzabili in ogni metodo nel caso in cui si consideri una nuova classe di files.

Ora, possiamo rintracciare le variabili ovunque in questa classe digitando:$this->formFactory;

\Twig_Environment è gia un global namespace, ma dobbiamo importarlo da FormFactory.usa Symfony\Component\Form\FormFactory;

8. Adesso, trasferiamo il tutto nella funzionalità del controller. Utilizziamo la funzionalità magica di PHP __invoke, in modo tale che la funzione venga rintracciata immediatamente ogni volta che utilizziamo questa classe.

public function __invoke() {}

9. Ora abbiamo solo bisogno del codice già scritto sulla creazione del form e rendering template dei modelli:

$form = $this->formFactory->createBuilder(FormType::class)

->add('firstName', TextType::class, ['required' => true])

[ … ]

->getForm()

;

return $this->twigEnv->render('form.html.twig', ['form' => $form->createView()]);

10. Non dimenticare di eliminare il precedente namespace da cui è stato importato Application.php e di scrivere su CreateBookingController.php. (Vedi questo commit.)

Salvataggio dei dati nel database

Abbiamo un buon form, ma non salva nulla nel database.1. Come possiamo immaginare, per salvare qualcosa nel database, abbiamo bisogno di un

database connesso, quindi dobbiamo passare dalla variabile Connection al file Application.php:

$this

->match('/bookings/create', new CreateBookingController(

$this['form.factory'],

$this['twig'],

$this['db']

Page 29:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

))

->method('GET|POST')

;

Inoltre, fino ad ora, abbiamo utilizzato solo il metodo GET, ma quando invieremo un form, dovremo utilizzare anche il metodo POST. Poiché ci servono entrambi, possiamo utilizzare il match method e definire i metodi consentiti nel method(s) function.

2. Adesso abbiamo bisogno di ricevere la variabile database dal CreateBookingController. Ciò significa importare la Connection namespace e definire una non-static property.

use Doctrine\DBAL\Connection;

[ … ]

public function __construct(

FormFactory $formFactory,

\Twig_Environment $twigEnv,

Connection $dbConnection

) {

$this->formFactory = $formFactory;

$this->twigEnv = $twigEnv;

$this->dbConnection = $dbConnection;

}

3. Inoltre, abbiamo bisogno di aggiungere la possibilità di creare alcuni form data. Come il metodo che gestisce ogni percorso in Silex framework implements Symfony’s HttpKernelInterface, quindi per impostazione predefinita gli argomenti che vengono sempre trasferiti sono Request e devi restituire una HTTP Response come già stiamo facendo. Dobbiamo solo ottenere la richiesta in una variabile per utilizzarla.

use Symfony\Component\HttpFoundation\Request;

public function __invoke(Request $request)

4. Quindi prenderemo tutte le informazioni dall’oggetto $request, i parametri POST.

$form->handleRequest($request);

5. Quindi controlliamo se i valori dei parametri sono validi (leggi attentamente questo articolo di presentazione del modulo).

if ($form->isValid()) {}

6. Se ciò è vero, dobbiamo utilizzare alcuni MySql per inviare questi dati al database:$data = $form->getData();

Page 30:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

$st = $this->dbConnection->executeQuery(

"INSERT INTO bookings (

firstName, lastName, phone, email, birthday, startDate,

endDate, arrivalTime, nrOfPeople, payingMethod,

additionalInformation

) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",

[

$data['firstName'],

$data['lastName'],

$data['phone'],

$data['email'],

$data['birthday']->format('Y-m-d H:i:s'),

$data['startDate']->format('Y-m-d H:i:s'),

$data['endDate']->format('Y-m-d H:i:s'),

$data['arrivalTime']->format('H:i:s'),

$data['nrOfPeople'],

$data['payingMethod'],

$data['additionalInformation']

]);

Si noti che dobbiamo formattare i dati in base al formato che vogliamo salvare nel campo database. Significa formattare alcuni oggetti Date in sequenza etc.

Anche questa query MySQL viene fatta in modo da impedire la SQL injection, che è uno dei metodi più semplici per attaccare un sito. Il metodo di prevenzione è quello di utilizzare la query parametrizzata (per saperne di più su SQL injection, leggete questo articolo).

7. Per consentire all’utente di sapere che la presentazione è riuscita, il modo più comune è di ricaricare la pagina.

use Symfony\Component\HttpFoundation\RedirectResponse;

[ … ]

return new RedirectResponse($request->getUri());

8. Adesso puoi testare la presentazione del form: se la pagina viene ricaricata dopo aver premuto invio, allora è andato a buon fine.

Page 31:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

NB! Se si ottiene una pagina vuota dopo la presentazione, accertarsi di aver compilato il modulo nel modo corretto. [...]. Il nostro form non possiede ancora la forma convalidata. Inoltre, non c’è la sezione che dice se hai inserito un valore di campo errato. Come ulteriore esercizio è possibile aggiungere la form validation a questa applicazione per risolvere questo problema.

(Puoi trovare un esempio qui).

Recupero dei dati salvati dal database Sarebbe bello vedere che tipo di booking è stata presentato. Possiamo quindi creare una nuova pagina nella nostra applicazione dove possiamo vedere tutti i dati inviati inseriti in una tabella.

1. Per prima cosa abbiamo bisogno di un nuovo percorso e controller. Dobbiamo definire un nuovo percorso in Application.php. Nomineremo il nuovo percorso “booking” e il nuovo Controller come ListBookingsController. Poiché utilizzeremo un altro modello twig per rendere i bookings,avremo bisogno della variabile Twig_Environment nel controller. Inoltre dovremo fare una query MySQL al database, quindi avremo bisogno della variabile Connection.

use BookingApp\Controllers\ListBookingsController;

[ … ]

$this

->get('/bookings', new ListBookingsController(

$this['db'],

$this['twig']

))

;

2. Adesso dobbiamo creare una nuova controller class per la cartella Controllers.

Allo stesso modo per il CreateBookingsController, definiamo il namespace, importando le variabili dei namespaces e definiamo le variabili passate nelle proprietà non-static.

<?php

namespace BookingApp\Controllers;

use Doctrine\DBAL\Connection;

use Symfony\Component\HttpFoundation\Request;

class ListBookingsController

{

public function __construct(

Connection $dbConnection, \Twig_Environment $twigEnv

Page 32:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

) {

$this->dbConnection = $dbConnection;

$this->twigEnv = $twigEnv;

}

}

3. Adesso dobbiamo definire il nostro metodo invoke, dove eseguire una query e trasferire il risultato a un nuovo modello.public function __invoke(Request $request) {}

4. Per la query utilizziamo due metodi Doctrine/DBAL/Connection.php: executeQuery() e fetchAll(). $query = $this->dbConnection->executeQuery("SELECT * FROM bookings"); $result = $query->fetchAll();

5. Quindi dobbiamo rinviare una risposta come modello twig e passare il risultato.

return $this->twigEnv->render('list.html.twig', ['bookings' => $result]);

6. Come potete vedere, è stato definito un nuovo modello che ancora non esiste. Dobbiamo crearlo e scrivere qualche riga di HTML e di CSS. Adesso, ricorda che tutto quello che abbiamo recuperato dal database si trova nell variabile chiamata “bookings” sotto forma di una matrice. Puoi accedere a qualsiasi campo della tabella “bookings” semplicemente utilizzando i nomi del campo della tabella definiti nel metodo Application.php createDBTables(). Poiché i bookings sono una matrice, è necessario utilizzare prima Twig For loop. Inoltre, se non ci sono bookings, non verrà mostrata nessuna riga di HTML, e per farlo useremo il metodo Twig empty. Ancora una volta, puoi estendere il base.html.twig per il layout e lo stile esistenti.

{% extends 'base.html.twig' %}

{% block content %}

<h2>The list of bookings</h2>

{% if bookings is empty %}

<p>You don't have any bookings!</p>

{% else %}

<table class="booking-table">

<thead>

<tr>

<th>First Name</th>

<th>Last Name</th>

Page 33:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

<th>Birthday</th>

<th>Arrival Time</th>

[ … ]

</tr>

</thead>

<tbody>

{% for row in bookings %}

<tr>

<td>{{ row.firstName }}</td>

<td>{{ row.lastName }}</td>

<td>{{ row.birthday|date('d.m.Y') }}</td>

<td>{{ row.arrivalTime|date('H:i') }}</td>

</tr>

{% endfor %}

</tbody>

</table>

{% endif %}

{% endblock %}

{% block stylesheets %}

{{ parent() }}

<link rel="stylesheet" type="text/css" media="screen" href="/css/list.css">

{% endblock %}

7. Ora, se hai ottenuto l’URL: http://localhost:8000/bookings, dovresti vedere i tuoi dati inviati. (Puoi trovare un esempio qui)

Creare un menùNon è comodo cambiare tra i diversi URL, quindi sarebbe utile avere un menù.

Possiamo generare degli URL in Twig usando il metodo Twig chiamato percorso. Possiamo indicare le route che abbiamo creato con il metodo bind.

1. Denominare le route:

$this

[ … ]

->method('GET|POST')

->bind('booking_form')

;

$this

Page 34:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

->get('/bookings', new ListBookingsController(

$this['db'],

$this['twig']

))

->bind('booking_list')

2. Quindi abbiamo bisogno dell’HTLM per il menù.Ancora una volta , è una buona pratica separare questo nuovo componente. In tal modo, creeremo un nuovo file denominato _menu.html.twig e un CSS per menu.css. Includeremo, inoltre, il file base.html.twig.

<link rel="stylesheet" type="text/css" media="screen" href="/css/menu.css">

[ … ]

{{ include('_menu.html.twig') }}

3. Nel” _menu.html.twig” ci sarà una funzionalità aggiuntiva. Se si vuole che l’utente sappia quale tipo di URL del link del menù è attualmente aperto, utilizzo la proprietà CSS color e la classe extra HTML. Prima però devo possedere una logica del codice per decidere se aggiungere questa classe extra all’elemento HTML. Devo conoscere quindi l’URL corrente per confrontarlo con l’URL del link del menù. Possiamo usare la variabile global request e denominare la funzione getRequestUri(). Se si apre Request.php, si può notare che questo metodo è descritto nella Request class e può essere rinominato da Twig. Poiché avrò bisogno dell’URL attuale in entrambi i link del menù, lo salveremo in una variabile con un nome più breve che useremo in seguito. Da ultimo, utilizzeremo il metodo pre-impostato Twig.

{% set currentUrl = global.request.getRequestUri() %}

4. Adesso, possiamo utilizzare il metodo Twig If per eseguire il confronto e il percorso per creare un percorso dai nomi delle route. Utilizzo ternary operator

<a class="menu-link {{ path('booking_form') == currentUrl ? 'active' }}"

href="{{ path('booking_form') }}">

Book

</a>

<a class="menu-link {{ path('booking_list') == currentUrl ? 'active' }}"

href="{{ path('booking_list') }}">

See bookings

</a>

5. Unisco questo HTML con un div e scrivo delle righe di CSS per rendere il menù esteticamente più piacevole. (Vedi questo commit per l'esempio di codice).

Page 35:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Un piccolo sguardo al testing: PHPunitL’ultima cosa da considerare è la possibilità di testare l’applicazione. In seguito si potranno inserire tutti i test desiderati mentre si sta sviluppando l’applicazione.

Utilizzeremo il framework PHPUnit per testare PHP:

1. Scarica PHPUnit:composer require --dev "phpunit/phpunit=5.5.*"

1. Scarica Silex WebTestCase testing dependenciescomposer require --dev symfony/browser-kit symfony/css-selector

Si noti che utilizziamo le proprietà del Composer perché queste dependencies sono utili solamente per la fase di sviluppo, non per quella di produzione.

3. Configurazione PHPUnit per lavorare con la tua applicazione:

E’ necessario un file separato per “phpunit.xml.dist”

Qui si definirà la cartella nella quale verranno posizionati i test.<?xml version="1.0" encoding="UTF-8"?>

<phpunit bootstrap="./vendor/autoload.php"

backupGlobals="false"

backupStaticAttributes="false"

colors="true"

convertErrorsToExceptions="true"

convertNoticesToExceptions="true"

convertWarningsToExceptions="true"

processIsolation="false"

stopOnFailure="false"

syntaxCheck="false"

>

<testsuites>

<testsuite name="BookingApp Test Suite">

<directory>./tests/</directory>

</testsuite>

</testsuites>

</phpunit>

4. Crea una nuova directory denominata “tests”

5. Stiamo per generare un simple test che renderà la pagina sicura per l’utente.

Page 36:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Quindi denominerò questo file di prova AppTest.php e questo test estenderà il WebTestCase.

<?php

use Silex\WebTestCase;

use BookingApp\Application;

class AppTest extends WebTestCase

{}

6. Per i passaggi successivi, dobbiamo seguire queste istruzioni. In primo luogo,

implementiamo il metodo createApplication. Quando avremo creato la nostra Application.php

personalizzata, questo metodo ci restituirà la nostra variabile $app:

usa BookingApp\Application;

[ … ]

public function createApplication()

{

return new Application();

}

7. Successivamente, dobbiamo scrivere il nostro test. Quindi, verificheremo fondamentalmente se la nostra booking page funziona, ovvero ci assicureremo che la risposta non rimandi errori ect.

public function testIfBookingsPageRenders()

{

$client = $this->createClient();

$crawler = $client->request('GET', '/bookings');

$this->assertTrue($client->getResponse()->isOk());

}

8. Adesso dobbiamo eseguire il test. Digitiamo nella barra dei comandi:vendor/bin/phpunit tests/AppTest.php

Se compare il colore verde, i test hanno funzionato. Come verifica, puoi notare che il test non funziona se elimini un punto e virgola da ListBookingsController.php

9. Documentazione: aggiornare il documento README.md con le informazioni sul test.

(Vedi esempio di commit)

Questo è essenzialmente un test automatico. Naturalmente, possiamo configurarlo in modo tale che i test vengano eseguiti ogni volta che viene terminata la fase coding di qualcosa. Il

Page 37:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

test automatico richiede la scrittura dei test mentre si sta programmando. Ogni volta che scrivi un nuovo codice puoi scrivere un test per verificarlo. Sicuramente per questa azione impiegherai più tempo, quindi dal punto di vista dell’azienda, è necessario decidere quale tipo di codice necessita di test automatici e quali tipi di codice non li richiedono. Di solito, una logica di codice debole, complicata o che influisce sugli utenti, deve essere testata. Per questo motivo, è importante che il tuo codice sia separato in piccole parti - classi diverse, così puoi testare una classe o addirittura un metodo alla volta.

Se vuoi saperne di più su PHPUnit e scrivere test usando questo framework, puoi visitare il sito PHPUnit.

Eseguire un’applicazione di Booking preimpostata

Questa applicazione preimpostata si trova qui ed è possibile copiarla usando Git per il tuo computer. https://gitlab.com/i-sepp/bcs-koolitus/

Questo capitolo contiene alcune istruzioni di sintesi più dettagliate per eseguire questa applicazione sviluppata come esempio. Ciò è indicato anche nel documento README.md del progetto:

1. Per prima cosa deve essere stato installato PHP.NB E’ necessario un php 7 se si sta utilizzando un altro progetto che richiede php7 per i pacchetti php. Se non si dispone del pacchetto php7 nel sistema operativo, è possibile aggiungerlo seguendo i comandi da qui

sudo apt-get install php7.0

sudo apt-get install php7.0-xml

2. E’ necessario installare SQLite:

sudo apt-get install php7.0-sqlite3

3. E’ necessario possedere un Composer.

Per installare il composer, segui la lista di comandi qui .

Per rendere il Composer globalmente utilizzabile, segui la lista comandi qui.

sudo mv composer.phar /usr/local/bin/composer

4. E’ necessario Git (opzionale)se:

- é stato scaricato il progetto con Git- si desidera sviluppare ulteriormente utilizzando Git

se si desidera utilizzare Git, è necessario un account “GitLab” e “SSH-key” sul computer.

Page 38:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Installazione di Git:

sudo apt-get install git

git config --global user.name “Firstname Lastname”

git config --global user.email “[email protected]

Vedi il capitolo relativo a Git, GitLab ed SSH-key.

Generare una SSH-key nel tuo computer.ssh-keygen -t rsa -b 4096 -C "[email protected]"

cat ~/.ssh/id_rsa.pub

Copiare l'output come SSH-key nella configurazione utente di Gitlab.

5. Devi scaricare il progetto da https://gitlab.com/i-sepp/bcs-koolitus .

6. Nella cartella in cui si trova sul computer, è necessario eseguire:

-Installa tutto il codice third-party.

-Crea una cartella per il file di database:

7. è possibile eseguire il command-line web server dalla cartella del progetto:

8. dal browser apriamo http://localhost:8000/bookings/create;

9. Testare PHPUnit;

Qui puoi trovare l’esempio dell’applicazione - https://gitlab.com/i-sepp/bcs-koolitus

Page 39:  · Web viewProgetto “JOBIT - Innovative teaching methodologies and courseware for software development VET to reduce skills gap in IT“ Materiale per il …

Conclusioni Ricorda che questo materiale è solo un esempio che dovrebbe fornire un primo approccio con PHP e PHP framework Silex. Questo lavoro può essere fatto in molti altri modi utilizzando strumenti diversi e costituisce un buon esempio di come utilizzare il framework PHP per creare una semplice applicazione. Oltre a programmare l'applicazione, il materiale contiene istruzioni per scrivere un codice sostenibile e facilmente leggibile. Inoltre, spesso sono riportati suggerimenti per prestare attenzione alla documentazione e al test durante la programmazione. Questi non dovrebbero passare inosservati poiché la documentazione e il test sono una parte della programmazione piuttosto che una fase separata che si realizza prima o dopo altre azioni.