tecnologie web: approcci avanzatigoy/materiale/2021/10_tecweb2021... · 2020. 11. 21. · goy -...

Goy - a.a. 2020/2021 1Tecnologie Web: approcci avanzati

Tecnologie Web: approcci avanzati

a.a. 2020/2021

9Anna Goy

10

Lumen Framework

Goy - a.a. 2020/2021 2Tecnologie Web: approcci avanzati

Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati 3

MVC - I• Model-View-Controller (MVC) è un pattern (o modello) architetturale (= modo

per strutturare il codice) molto diffuso nello sviluppo di sistemi software, in particolare nell'ambito della programmazione orientata agli oggetti

• E' usato per separare la presentazione dei dati dalla logica di business (logica "interna" dell'applicazione, che ne determina in funzionamento)

• E' basato sulla separazione dei compiti fra 3 componenti software:– Model: gestisce i dati (interagisce con il database) e implementa la logica

dell'applicazione– View: gestisce la User Interface dell'applicazione (es. pagine HTML),

visualizzando i dati forniti dal Model– Controller: coordina il lavoro degli altri due moduli; in particolare riceve la

richiesta del client (utente), attraverso la View, e invoca il Model e/o la View

[Ref: it.wikipedia.org/wiki/Model-view-controller;php-html.net/tutorials/model-view-controller-in-php]


MVC - II

Molti Framework PHP sono basati sul pattern MVC


Software framework - I

Frameworko ambiente software, generalmente un insieme di librerieo offre dei template ("modelli") astratti di codice che implementano funzionalità

generiche e che possono essere modificati dal programmatore aggiungendocodice specifico, così da implementare funzionalità specifiche

o generalmente un framework comprende anche compilatori/interpreti, Web Server, ...

o tipicamente i framework sono language-specific[it.wikipedia.org/wiki/Framework]


Lumen - I

• Lumen [lumen.laravel.com] is a new PHP micro-framework developed by the author of the Laravel framework, Taylor Otwell: think of it as a slimmed down Laravel installation

• Taylor Otwell developed Lumen with some very specific purposes in mind, namely, microservices and APIs

• I'm advocating the use of Lumen primarily for decoupled services and APIs, which is its intended use. That's not to say you can't build an entire application on Lumen, because you can…

[Ref: code.tutsplus.com/articles/introduction-to-lumen--cms-23928]

• Vedi ISTRUZIONI_Lumen.pdf !!!


Lumen: installazione - I(1) INSTALLARE LUMEN• Controllare i requisiti di sistema (con XAMPP dovrebbero essere a posto...)• Installare Composer [getcomposer.org]

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you

• Si lavora da prompt dei comandi (terminale)!

• download the Lumen installer using Composer


Lumen: nuovo progetto (app) - I(2) CREARE UN PROGETTO (APP) LUMEN• Once installed, the lumen new command will create a fresh Lumen

installation in the folder you specify; e.g.lumen new corsoTWconLumenwill create a project folder named corsoTWconLumen containing a fresh Lumen installation with all of Lumen's dependencies already installed


Lumen: nuovo progetto (app) - II• Serving your application:

– In the project folder, execute this command: php -S localhost:80 -t ./public→ the Web Server, with the Php Interpreter, starts listening on the port you specified (e.g. 80)

– Now visit http://localhost:port/ in your browsernel nostro caso: http://localhost (visto che gira sulla porta 80, che è quelladi default)

http://localhost/


Lumen: nuovo progetto (app) - III• Nella cartella del progetto (corsoTWconLumen) trovate

la tipica struttura di un progetto Lumen (= Laravel)• There are some configurations in the .env file

that must be adjusted, in particular concerning the database:DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE= fumettiConLumenDB_USERNAME=rootDB_PASSWORD=

NB il DBMS NON è incluso nel Framework!⇒ usiamo il MySQL Server già installato sul nostro PC (x es. quello offerto in XAMPP)


Lumen: database - I• Creazione del DATABASE

– Avviare MySQL Server dal pannello di controllo di XAMPP(NON avviate Apache: il Web Server è già running!)

– To use phpMyAdmin as a UI to MySQL, copy the folder phpMyAdmin from xampp to …corsoTWconLumen\public\ then access it at http://localhost/phpmyadminfrom your browser

– Creare un nuovodatabase fumettiConLumen


Lumen: database - II– La filosofia di molti framework è quella di costruire il database a partire dal

software... – In Lumen si utilizzano le migrazioni (migrations): attraverso opportuni

comandi creiamo automaticamente dei file php che poi possiamo modificare ed eseguire → questi migration files creano le tabelle del nostro database (corsoTWconLumen)

Attraverso i seeding files (anch'essigenerati automaticamente e volendomodificati) possiamo anche popolareil database (per i dettagli si vedaISTRUZIONI_Lumen.pdf)

NB Per qualche misteriosa ragione, il Seeder NON FUNZIONA! E la tabella NON viene riempita... :-( La riempiremo a mano, invocando per primo un paio di volte il servizio CREATE... ;-)


Lumen: API REST - I• Creazione dei ROUTE ENDPOINTS (servizi REST)

in web.php (cartella routes):$router->group(['prefix'=>'api/v1'],function() use($router){

// tutti i fumetti$router->get('/fumetti','FumettosController@index');

// crea un nuovo fumetto$router->post('/fumetti','FumettosController@store');

// cancella un fumetto$router->delete('/fumetti/{id}','FumettosController@destroy');

// info su un fumetto$router->get('/fumetti/{id}', 'FumettosController@show');

});


Lumen: API REST - IIcioè...

http://localhost/api/v1/fumetti (method GET) invoca la funzione index (def. in FumettosController.php)

http://localhost/api/v1/fumetti (method POST) invoca la funzione store (def. in FumettosController.php)

http://localhost/api/v1/fumetti/2 (method DELETE) invoca la funzione destroy (def. in FumettosController.php)

http://localhost/api/v1/fumetti/2 (method GET) invoca la funzione show (def. in FumettosController.php)


Lumen: models e controllers - I• Creazione dei MODELS (in app/Models/)

– The models are used to interact with the database– You must have one model per table– ⇒ we will have a model called Fumetto.php– (NB attenzione! Se il model si chiama Fumetto, la tabella deve chiamarsi

fumettos !)

• Creazione dei CONTROLLERS– in app/Http/Controllers/FumettosController.php importiamo il model

Fumetto.php e ne creiamo un'istanza ($fumetto), a cui poi chiederemo i dati– leggi tutti i fumetti (GET)

public function index() {$fumettos = $this->fumetto->all();return $fumettos;

}

funzioni predefinite nel modelcostruito automaticamente [https://laravel.com/docs/8.x/eloquent: "Think of each Eloquent model as a powerful query builder allowing you to fluently query the database table associated with the model"]


Lumen: models e controllers - II– crea un nuovo fumetto (POST)

public function store(Request $request) {$fumetto = $this->fumetto->create([

'nome' => $request->input('nome'),'descrizione' => $request->input('descrizione'),'prezzo' => $request->input('prezzo'),'categoria' => $request->input('categoria'),]);return $fumetto;

}

– cancella un fumetto (DELETE)public function destroy($fumettoId) {

$fumetto = $this->fumetto->find($fumettoId);if (empty($fumetto)){return "No data found";}$fumetto->delete();return $fumetto;

}


Lumen: models e controllers - II– leggi le info su un fumetto (GET)

public function show($fumettoId) {$fumetto = $this->fumetto->find($fumettoId);if (empty($fumetto)){return "No data found.";}

return $fumetto;}


Lumen: test con Postman - I• Test degli endpoint (servizi REST)

– Call the /fumetti endpoint with GET method (http://localhost/api/v1/fumetti) using PostmanYou should now see your data from the database being returned in a JSON format


Lumen: test con Postman - II– Send a POST request to the /fumetti endpoint

(http://localhost/api/v1/fumetti) using PostmanNB in Postman, impostare il metodo POST, selezionare il tab Body (della request) e, come formato dei dati, selezionare raw e JSON !! Inserire qualcosa come il seguente:{

"nome": "Tex Willer","descrizione": "primo numero di Tex","prezzo": 50,"categoria": "TEX"

}

Attenzione a eventuali segnali di errori sintattici...!!


Lumen: test con Postman - III– Send a DELETE request to the /fumetti/<id> endpoint

(http://localhost/api/v1/fumetti/2) using PostmanNB in Postman, impostare il metodo DELETE, selezionare il tab Params (della request)


Lumen: test con Postman - IV– Send a GET request to the /fumetti/<id> endpoint

(http://localhost/api/v1/fumetti/2) using PostmanNB in Postman, impostare il metodo GET, selezionare il tab Params (della request)

Goy - a.a. 2020/2021 Tecnologie Web: approcci avanzati

CASE STUDY: edicola fumetti (versione 3)Aggiorniamo il case study con il nuovo backend realizzato con Lumen

• Costuiamo un nuovo backend seguendo le istruzioni in ISTRUZIONI_Lumen.pdf DORU says: Congratulations if you have got so far. You should now have a basic PHP API running locally. There are many things that could be improved, like throwing proper HTTP errors in JSON format in case of failure and using resources to return the data in a standardized way. Remember that you can access and use all the source code for this project from GitHub. For more advanced topics or help please get in touch [www.dorusomcutean.com/api-how-to-create-lumen-basic-api]

ANNA says: Collegare la client app Bootstrap

PUT ALL TOGETHER & TRY YOURSELF!

22RIF ISTRUZIONI_Lumen.pdf → cartella corsoTWconLumen…

https://github.com/dorusomcutean/lumen-basic-api


Collegare la client app Bootstrap ai servizi definiti nel backend Lumen

(1) Per utilizzare il Web Server(e l'interprete PHP) fornitoda Lumen, copiamo la cartella app_client_Bootstrapda xampp/htdocs/... a .../corsoTWconLumen/public/(come abbiamo fatto per phpMyAdmin)

(2) Dobbiamo apportare alcune modifiche...

Adattiamo la client app al nuovo backend - I

23RIF ISTRUZIONI_Lumen.pdf → cartella corsoTWconLumen…


Siccome non abbiamo implementato né il servizio di update né quello di search... • cancelliamo le import di update-product.js e search-product.js (in

index.html)

Adattiamo la client app al nuovo backend - II

24RIF cartella public/app_client_Bootstrap


• cancelliamo il campo di ricerca e i pulsanti Edit dalla UI (in read-products.js )

Adattiamo la client app al nuovo backend - III



Modifichiamo le chiamate AJAX...In read-products.js modifichiamo l'URL nella HTTP request (GET), sostituendo il vecchio endpoint con il nuovo

Adattiamo la client app al nuovo backend - IV



In read-one-product.js facciamo lo stesso (passandogli anche l'id)

In create-product.js cambiamo solo l'URL

In delete-product.js cambiamo l'URL (passandogli l'id) e cancelliamo la dichiarazione del tipo (JSON) della request e il contenuto del body

Adattiamo la client app al nuovo backend - V



Attenzione! Il formato dei dati restituiti dal servizio è leggermente diverso...Vecchio: {products:[{p1},{p2}, ...]}Nuovo: [{p1},{p2}, ...]

Inoltre i nomi usati dal servizio nell'oggetto JSON (response) che rappresenta un prodotto sono diversi! Quindi in read-products.js dobbiamo modificare leggermente la funzione readProductsTemplate(data)...

Adattiamo la client app al nuovo backend - VI


l'array è disponibile direttamente in data (se NON in data.products)!


In read-one-product.js il servizio restituisce l'oggetto JSON corrispondente al fumetto cercato, quindi devo solo cambiare i nomi...

In create-product.js e delete-product.js NON ci sono nomi da modificare...

Adattiamo la client app al nuovo backend - VII



Inoltre, in create-product.js devo

• cambiare il tipo di campo di input per la categoria, che da numero diventa stringa

• controllare i nomi dei campi... l'unico da modificare è cat_id → categoria

Adattiamo la client app al nuovo backend - VIII



A questo punto... la nostra app è completa:

• il backend (servizi REST) è basato su Lumen

• il frontend è il "nostro" client (basato su Bootstrap)

⇒

1. avviamo il DBMS2. avviamo il Web Server

3. dal browser: http://localhost/app_client_Bootstrap/

PUT ALL TOGETHER & TRY YOURSELF!

31RIF cartella corsoTWconLumen (backend) + cartella public/app_client_Bootstrap (frontend)

non dimenticate lo slash finale!!!

Ricordatevi di fermare i server quando avete finito!!DBMS: pulsante Stop sul pannello di XAMPPWeb Server Lumen: ctrl+C nel prompt dei comandi

tecnologie web: approcci avanzatigoy/materiale/2021/10_tecweb2021... · 2020. 11. 21. · goy -...

Documents