Tecnologie Web: approcci avanzatigoy/materiale/2021/08_TecWeb2021_REST1.pdf · 2020. 12. 8. · Goy...

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

Tecnologie Web: approcci avanzati

a.a. 2020/2021

8aAnna Goy

RESTful servicescon PHP + JS/jQuery

(parte 1)


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

Aggregare servizi: mashup - IMashup [https://it.wikipedia.org/wiki/Mash-up_(informatica)]:

In informatica un mash-up è un sito o un'applicazione web di tipo ibrido, cioè tale da includere dinamicamente informazioni o contenuti provenienti da più fonti. Un es. potrebbe essere un programma che, acquisendo da un sito web una lista di appartamenti, ne mostra l'ubicazione utilizzando il servizio Google Maps per evidenziare il luogo in cui gli stessi appartamenti sono localizzati.Mash-up (letteralmente: "poltiglia"), in termini informatici, indica un'applicazione che usa contenuti [e servizi! ndr] da più sorgenti per creare un servizio completamente nuovo. Il contenuto dei mash-up è normalmente preso da terzi via API, tramite feed (es. RSS e Atom) o JavaScript.

3


Aggregare servizi: mashup - II

La definizione delle modalità di invocazione dei servizi può seguire approcci diversi, più o meno standardizzati:

1. Open API2. servizi RESTful

3. SOAP Web Services

4

meno formale (meno standard)

più formale (più standard)

Per farvi un'idea dei servizi disponibili...www.programmableweb.com/apis/directory


Microservizi - I"La tendenza, in questi ultimi anni, è quella di creare dei microservizi tramite un linguaggio di backend come PHP per l'utilizzo con applicazioni client per il web (Javascript) o per il mobile, tramite lo sviluppo di applicazioni native o ibride. PHP7 può essere la soluzione ideale per lo sviluppo si questi microservizi" [Zimuel2017, p. 242]

⇒ oltre che per integrare servizi offerti da terze parti, il paradigma dei microservizi (x es. servizi RESTful) può essere utilizzato come architettura di un'applicazione web, di cui i (micro)servizi (PHP) rappresentano il backend(server-side) dell'applicazione e vengono invocati dal frontend (client-side) dell'applicazione

5

microservizio1 microservizio2 microservizio3 microservizio...


Servizi RESTful: intro - I

• servizi RESTful = servizi la cui interfaccia di accesso è basata sul paradigma REST (REpresentational State Transfer)

• REST = insieme di principi architetturali per la progettazione e realizzazione di interfacce di accesso ai servizi (non è né uno standard, né una tecnologia, né un linguaggio)

• non è necessario introdurre nuovi protocolli o linguaggi: interfaccia RESTful = utilizza, sostanzialmente, URL e HTTP !!

• obiettivo: offrire la possibilità di interagire con il servizio indipendentemente dal linguaggio di programmazione con cui il servizio è implementato⇒ possibilità di far interagire in modo "trasparente" applicazionieterogenee

6

ServiceConsumerService

ConsumerServiceConsumer

messaggio di richiesta

messaggio di risposta

ServiceProvider

inte

rfac

cia

(RES

T o

SOAP

/W

SDL)


Servizi RESTful: intro - II

[da: www.programmableweb.com/api/twitter]Esempio (semplice)Invocazione del servizio: https://api.twitter.com/1.1/search/tweets.json?q=%40BigData

NB: l'invocazione del servizio (search/tweets.json) è un URL con parametri (q=@BigData) → metodo GET di HTTP

7


Servizi RESTful: intro - IIIEsempio di risultato (NB: è un oggetto JSON... vedi prossime slide){ "statuses": [

{ ..."created_at": "Mon Sep 24 03:35:21 +0000 2012","id_str": "250075927172759552","entities": { ..."hashtags": [

{ "text": "BigData, ... }],

},"in_reply_to_user_id_str": null,"contributors": null,"text": "...","metadata": {"iso_language_code": "en","result_type": "recent"

},"retweet_count": 0,..."user": { ..."name": "Sean Cummings","profile_image_url": "...","created_at": "Mon Apr 26 06:01:55 +0000 2010","location": "LA, CA", ...

}, ...}, ...]}

8


JSON - ICos'è JSON (JavaScript Object Notation)?[www.json.org; www.html.it/articoli/introduzione-a-json-1/]

• è un formato testuale molto usato per lo scambio di dati in app client-server

• è basato su due strutture:– coppie nome: valore– liste ordinate di valori (array) [...]

• un oggetto JSON è sempre racchiuso tra parentesi graffe {...}

• Esempio: JSON è utilizzato nelle API di Google Maps, x es per creare una mappa:map = new google.maps.Map(document.getElementById("map"), options);

options = {zoom: 14,center: new google.maps.LatLng(45.06...,7.68...),mapTypeId: google.maps.MapTypeId.ROADMAP

};

9

oggetto JSON


JSON - IIEsempio (oggetto studente):{

"nome":"Paolo","cognome":"Rossi","matricola":123456,"emails":["[email protected]",

"[email protected]"],"indirizzo":

{"via":"Roma","num":1,"cap":00100

}"esami":[

{"codice":"INF123","voto":"30L"

},{

"codice":"SPS456","voto":"28"

}]

} 10

oggetto JSON costituito da una serie di coppie nome: valore{nome: "Paolo" ...}

NB • il valore di emails è un array di stringhe []• il valore di indirizzo è... un oggetto JSON

{...}• il valore di esami è un array di oggetti JSON

[{...}, {...}, ...]

→ la potenzialità di JSON deriva principalmetedal fatto che oggetti JSON (= insiemi di coppie nome: valore {...}) e array ([...]) possono essere combinati (annidati) quanto si vuole!

JSON è case sensitive!!{nome: "Paolo" ...}è diverso da {Nome: "Paolo" ...}!!


JSON, PHP e Javascript - IE' possibile gestire oggetti JSON... con PHP:json_encode(<php var>);

input: variabile PHP (può essere di qualunque tipo, per es. un array associativo)output: oggetto JSON (rappresentato come stringa)

json_decode(<JSON string>);input: oggetto JSON (rappresentato come stringa)output: variabile PHP (= oggetto JSON convertito in un tipo PHP opportuno per es. un

array associativo)

... e con Javascript:JSON.stringify(<JSON object>);input: oggetto JSON (utile, x es, per trasmettere dati su HTTP!!)output: stringaJSON.parse(<string>);input: stringaoutput: oggetto JSON

11


JSON, PHP e Javascript- II

Un oggetto JSON è un oggetto Javascript ⇒ in Javascript posso accedere ai suoielementi con la dot notation (come per gli oggetti del DOM)!!studente.nome→ Paolostudente.cognome→ Rossistudente.matricola→ 123456studente.emails→ lista (array) di 2

elem (stringhe)studente.indirizzo.via→ Romastudente.indirizzo.num→ 1studente.indirizzo.cap→ 00100studente.esami→ lista (array) di 2

oggetti json

12

for (i=0; i<studente.emails.length; i++){document.write(studente.emails[i]);

}

for (i=0; i<studente.esami.length; i++){cod = studente.esami[i].codice;vot = studente.esami[i].voto;document.write(cod+": "+vot);

}


Servizi RESTful: intro - IVPrincipi architetturali del paradigma REST:[www.html.it/pag/19595/introduzione-ai-web-service/ → lezioni 1 - 4]

1. Identificazione delle risorse: "risorsa" = qualsiasi elemento oggetto di elaborazione (es: un cliente, un prodotto)Ogni risorsa deve essere identificata univocamente attraverso un URI; x es: http://www.myapp.com/clienti/1234URI = Uniform Resource Identifier = sequenza di caratteri che identifica universalmente ed univocamente una risorsa (x es. un URL o un indirizzo email)

2. Utilizzo esplicito dei metodi HTTP: utilizzare i metodi (le operazioni) definiti nel protocollo HTTP per interagire con il servizio: GET, POST, PUT/PATCH, DELETE

⇒ rende uniformel'invocazione di operazioni sulle risorse

13


Servizi RESTful: intro - V3. Risorse autodescrittive (content negotiation):

– il formato dei dati (MIME type) desiderato può essere indicato nella richiesta(x es: Accept: application/json)

– il formato inviato è indicato nella risposta(x es: Content-Type: application/json; charset=UTF-8)

4. Collegamenti tra risorse: tutto quello che un client deve sapere su una risorsa, e sulle risorse ad essa correlate, deve essere contenuto nella risposta stessa (HTTP response) o accessibile tramite link(rif. principio 1)

5. Comunicazione senza stato (stateless):HTTP è stateless (= una richiesta non ha alcuna relazione con le richieste precedenti/successive) → lo stesso principio vale per la comunicazione con servizi RESTful → una risposta REST dipende solo dalle info contenute nella richiesta !!

NOTA sulla sicurezza: le richieste che arrivano a un servizio REST dovrebbero essere sempre controllate per prevenire attacchi (es. Denial Of Service) o usi non autorizzati (... bisogna validare sempre gli input!!!)

14


Servizi RESTful: progettazione - I

Progettare il servizio:

1. Funzionalità (chi può fare cosa)

2. Dati (input/output)

3. API endpoints (richieste/risposte)

4. Corrispondenza con i metodi HTTP

5. Route protection6. URL styling

Case study: backoffice edicola fumetti (usati) onlinecartella REST

api_server → servizio (backend)api_client → client (frontend)

15

Rif.


Servizi RESTful: progettazione - II

1. Funzionalità (chi può fare cosa) [*] inserire un nuovo prodotto → admin cancellare un prodotto → admin aggiornare le info su un prodotto → admin leggere la lista dei prodotti → everyone leggere le info su un prodotto → everyone cercare un prodotto → everyone

2. Dati (input/output)formato: JSON

[*] il processo di autenticazione non lo vediamo :-(

16


Servizi RESTful: progettazione - III3. API endpoints (richieste/risposte) inserimento → in: dati prodotto; out: messaggio cancellazione → in: id prodotto; out: messaggio aggiornamento → in: dati prodotto; out: messaggio lettura lista → in: -- ; out: lista prodotti lettura singolo prodotto → in: id prodotto; out: info prodotto ricerca → in: stringa; out: lista prodotti

4. Corrispondenza con i metodi HTTP inserimento → POST cancellazione → DELETE aggiornamento → PUT (o PATCH) lettura lista → GET lettura singolo prodotto → GET ricerca → GET

17

replace a resource

update parts of a resource


PostmanPer testare le API REST (prima di costruire un client) possiamo usare Postman [https://www.getpostman.com/downloads/]→ scaricatelo e installatelo!

18


Case Study: file system

api_server/ → BACKENDdataMgr/ → gestione dei dati sui prodotti

Database.php → classe x gestire la connessione al DBProduct.php → classe che rappresenta le proprietà dei prodotti e gestisce le

richieste di operazioni su di essiapi/ → servizi

create.phpdelete.phpread.phpread_one.phpupdate.phpsearch.php

app_client/ → FRONTENDesClientRest.html(jquery-3.4.1.js → libreria jQuery)

19



a.a. 2020/2021

8bAnna Goy

RESTful services

Case Study BACKEND

(con PHP)



Case Study: database - IDatabase fumetti

Tabella categorie (struttura)

Tabella prodotti (struttura)

22RIF REST/api_server/fumetti.sql


Case Study: database - IITabella categorie (dati)

Tabella prodotti (dati)

23RIF REST/api_server/fumetti.sql


Case Study: gestione dei dati - I

Backend (cartella api_server/dataMgr/) → gestione dei prodottidataMgr/Database.php (classe x gestire la connessione al DB)class Database {private $host = "localhost";private $db_name = "fumetti";private $username = "root";private $password = "";public $conn;public function getConnection(){$this->conn = null;try {$this->conn=new PDO("mysql:host=".$this->host.";dbname=".$this->db_name.

";charset=utf8", $this->username, $this->password);}catch(PDOException $exception) {echo "Connection error: " . $exception->getMessage();

}return $this->conn;

}}

24


Case Study: gestione dei dati - IIdataMgr/Product.php (classe che rappresenta le proprietà dei prodotti e gestisce le

richieste di operazioni su di essi)class Product {private $conn;public $id;public $name;public $description;public $price;public $category_id;public $category_name;public function __construct($db){$this->conn = $db;

}...

25

variabili d'istanza che rappresentando le proprietà del singolo prodotto

il construttore inizializza la variabile d'istanza per la connessione al DB


Case Study: gestione dei dati - III...// servizio di lettura di tutti i prodottifunction read() { // NB default access modifier = public

// estraggo tutti i prodotti $query = "SELECT * FROM prodotti JOIN categorie

ON prodotti.cat_id = categorie.idcat";// preparo la query$stmt = $this->conn->prepare($query); // eseguo la query$stmt->execute(); return $stmt;

}...

26

NB $stmt conterrà il risultato dell'esecuzione della query (in questo caso un recordset)


Case Study: gestione dei dati - IV...// servizio di lettura dei dati di un prodotto, dato il suo idfunction readOne() {// estraggo il prodotto con l'id indicato$query = "SELECT * FROM prodotti JOIN categorie

ON prodotti.cat_id = categorie.idcat WHERE prodotti.id = ?";// preparo la query$stmt = $this->conn->prepare($query);// invio il valore per il parametro$stmt->bindParam(1, $this->id);// eseguo la query$stmt->execute();// leggo la prima (e unica) riga del risultato della query$row = $stmt->fetch(PDO::FETCH_ASSOC); // inserisco i valori nelle variabili d'istanza $this->name = $row['nome'];$this->price = $row['prezzo'];$this->description = $row['descrizione'];$this->category_id = $row['cat_id'];$this->category_name = $row['nomecat'];

}...

27

la funzione fetch (libreria PDO) con parametro PDO::FETCH_ASSOC invocata su un PDOStatement (un recordset), restituisce un record ($row), in particolare un array le cui chiavi sono i nomi delle colonne della tabella

NB $stmt conterrà il risultato dell'esecuzione della query (in questo caso un recordset con un solo elemento)

la fu

nzio

ne re

adO

neno

n re

stitu

isce

un

risul

tato

, ben

sì m

odifi

ca l'

ogge

tto

su c

ui

vien

e in

voca

ta (c

ioè

il pr

odot

to)


Case Study: gestione dei dati - V...// servizio di inserimento di un nuovo prodottofunction create() {// inserisco il nuovo prodotto$query = "INSERT INTO prodotti SET nome = :name, prezzo = :price,

descrizione=:description, cat_id = :category_id";// preparo la query$stmt = $this->conn->prepare($query);// sanifico...$this->name=htmlspecialchars(strip_tags($this->name));$this->price=htmlspecialchars(strip_tags($this->price));$this->description=htmlspecialchars(strip_tags($this->description));$this->category_id=htmlspecialchars(strip_tags($this->category_id));

// invio i valori per i parametri$stmt->bindParam(":name", $this->name);$stmt->bindParam(":price", $this->price);$stmt->bindParam(":description", $this->description);$stmt->bindParam(":category_id", $this->category_id);// eseguo la query$stmt->execute(); return $stmt;

}... 28

i valori del nuovo prodotto sono nelle variabili d'istanza!!

NB $stmt conterrà il risultato dell'esecuzione della query


Case Study: gestione dei dati - VI...// servizio di aggiornamento dei dati di un prodottofunction update() {// aggiorno i dati del prodotto con l'id indicato$query = "UPDATE prodotti SET nome = :n, prezzo = :p, descrizione = :d,

cat_id = :c_id WHERE id = :i";// preparo la query$stmt = $this->conn->prepare($query);// sanifico...$this->name=htmlspecialchars(strip_tags($this->name));$this->price=htmlspecialchars(strip_tags($this->price));$this->description=htmlspecialchars(strip_tags($this->description));$this->category_id=htmlspecialchars(strip_tags($this->category_id));$this->id=htmlspecialchars(strip_tags($this->id));// invio i valori per i parametri$stmt->bindParam(':n', $this->name);$stmt->bindParam(':p', $this->price);$stmt->bindParam(':d', $this->description);$stmt->bindParam(':c_id', $this->category_id);$stmt->bindParam(':i', $this->id);// eseguo la query$stmt->execute();return $stmt;

}... 29

i nuovi valori del prodotto sono nelle variabili d'istanza!!



Case Study: gestione dei dati - VII...// servizio di cancellazione di un prodottofunction delete() {// cancello il prodotto con l'id indicato$query = "DELETE FROM prodotti WHERE id = ?";// preparo la query$stmt = $this->conn->prepare($query);// sanifico...$this->id=htmlspecialchars(strip_tags($this->id));// invio il valore per il parametro$stmt->bindParam(1, $this->id);// eseguo la query$stmt->execute();return $stmt;

}...

30



Case Study: gestione dei dati - VIII...// servizio di ricerca prodotti per keywordfunction search($keywords){// cerco i prodotti $query = "SELECT * FROM prodotti JOIN categorie ON prodotti.cat_id =

categorie.idcat WHERE prodotti.nome LIKE ? OR prodotti.descrizioneLIKE ? OR categorie.nomecat LIKE ? ORDER BY prodotti.nome ASC";

// preparo la query$stmt = $this->conn->prepare($query); // sanifico...$keywords=htmlspecialchars(strip_tags($keywords));// aggiungo % prima e dopo le keywords per estrarre i testi che CONTENGONO// le keywords (rif. SQL)$keywords = "%{$keywords}%"; // invio i valori per i parametri$stmt->bindParam(1, $keywords);$stmt->bindParam(2, $keywords);$stmt->bindParam(3, $keywords);// eseguo la query$stmt->execute(); return $stmt;

}} // classe

31

NB $stmt conterrà il risultato dell'esecuzione della query (in questo caso un recordset)


Case Study: READ - IBackend (cartella api_server/api/) → implementiamo le funzionalità progettate...

leggere la lista dei prodotti accesso everyone; metodo GETdati in -- ; out: lista prodottimetodo read() in Product.php:– invia al DB una query che seleziona tutti i record della tabella prodotti– restituisce la lista (tabella) dei prodottiread.php:– stabilisce i permessi di lettura del file

header("Access-Control-Allow-Origin: *") // anyone

– definisce il formato della risposta (JSON)header("Content-Type: application/json; charset=UTF-8");

– crea un'istanza di Product e invoca il metodo read()– legge il risultato (recordset) e lo codifica in JSON– restituisce il JSON (con la lista dei prodotti)

32


Case Study: READ - II

In dettaglio...read.php (servizio di lettura di tutti i prodotti)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");

// definisco il formato della risposta (json) header("Content-Type: application/json; charset=UTF-8");

// includo le classi per la gestione dei datiinclude_once '../dataMgr/Database.php';include_once '../dataMgr/Product.php';

// creo una connessione al DBMS$database = new Database();$db = $database->getConnection();

// creo un'istanza di Prodotto$product = new Product($db);

// invoco il metodo read() che restituisce l'elenco dei prodotti$stmt = $product->read(); // NB $stmt è un recordset!...

33


Case Study: READ - III...if($stmt->rowCount()>0){ // se ci sono dei prodotti...

// creo una coppia products: [lista-di-prodotti]$products_list = array();$products_list["products"] = array();

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {// costruisco un array associativo ($product_item) // che rappresenta ogni singolo prodotto...$product_item = array("id" => $row['id'],"name" => $row['nome'],"description" => html_entity_decode($row['descrizione']),"price" => $row['prezzo'],"category_id" => $row['cat_id'],"category_name" => $row['nomecat']

);// ... e lo aggiungo al fondo di lista-di-prodottiarray_push($products_list["products"], $product_item);

}...

34

la funzione fetch (libreria PDO) con parametro PDO::FETCH_ASSOC invocata su un PDOStatement, restituisce un record ($row), in particolare un array le cui chiavi sono i nomi delle colonne della tabella

la funzione array_push inserisce al fondo di un array ($products_list["products"]) i parametri che seguono l'array ($product_item)


Case Study: READ - IV...http_response_code(200); // response code 200 = tutto ok

// trasformo la coppia products: [lista-di-prodotti] in un oggetto JSON// vero e proprio e lo invio in HTTP responseecho json_encode($products_list);

}else { // se NON ci sono prodotti...http_response_code(404); // response code 404 = Not found

// creo un oggetto JSON costituito dalla coppia // message: testo-del-messaggioecho json_encode(array("message" => "No products found"));

}

35

json_encode($array) → funzione che prende in input una variabile PHP (per es. un array) e restituisce un oggettoJSON rappresentato come stringa


Case Study: READ - VInviamo al servizio una richiesta di lettura dei prodotti:• avviate Postman (NB potrebbe essere un po' lento...)

• impostate il metodo GET• inserite l'URL: http://localhost/esempiTWaa2021/REST/api_server/api/read.php• cliccate su Send

36

Risposta: oggetto JSONcostituito da una coppia(products:[...]) il cui valore è la lista di prodotti


Case Study: READ_ONE - I leggere le info su un prodotto

accesso everyone; metodo GETdati in: id prod; out: info prodmetodo readOne() in Product.php:– invia al DB una query che cerca il prodotto con quell'id– restituisce il record trovato (o un messaggio di errore)read_one.php:– stabilisce i permessi di lettura del file



– stabilisce i metodi consentiti (GET)header("Access-Control-Allow-Methods: GET");

– legge l'id nella richiesta: $_GET['id']– crea un'istanza di Product e invoca il metodo readOne()– legge il risultato (recordset) e lo codifica in JSON– restituisce il JSON (con le info sul prodotto)

37


Case Study: READ_ONE - II

In dettaglio...read_one.php (servizio di lettura dei dati di un prodotto, dato il suo id)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");


// definisco il metodo consentito per la requestheader("Access-Control-Allow-Methods: GET");




... 38


Case Study: READ_ONE - III...// leggo l'id nella richiesta (GET) e lo inserisco nella// variabile d'istanza id dell'oggetto $product $product->id = isset($_GET['id']) ? $_GET['id'] : die();

// invoco il metodo readOne() che restituisce le info del// prodotto su cui viene invocato (l'id è già nella // variabile id di $product!)$product->readOne();

if($product->name!=null){ //se il prodotto esiste (il nome non è nullo)...

// costruisco un array assoc. ($product_item) che rappresenta il prodotto// (leggendo i valori dalle variabili d'istanza di $product)...$product_item = array("id" => $product->id,"name" => $product->name,"description" => $product->description,"price" => $product->price,"category_id" => $product->category_id,"category_name" => $product->category_name

);...

39

forma compatta di if: se $_GET['id'] è settata, la leggo, altrimenti invoco la funzione die() che "uccide" lo script


Case Study: READ_ONE - IV...http_response_code(200); // response code 200 = tutto ok

// ... e lo restituisco nella response, dopo averlo trasformato in ogg. JSONecho json_encode($product_item);

}else { // se il nome del prodotto NON esistehttp_response_code(404); // response code 404 = Not found

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Product does not exist"));

}

40


Case Study: READ_ONE - VInviamo al servizio una richiesta delle info su un prodotto:• avviate Postman• impostate il metodo GET• inserite l'URL:

http://localhost/esempiTWaa2021/REST/api_server/api/read_one.php?id=4• cliccate su Send

41

attenzioneche sia un id esistente!

Risposta(oggetto JSON)

Richiesta(GET)


Case Study: CREATE - I inserire (creare) un nuovo prodotto

accesso admin; metodo POSTdati in: dati prod; out: messaggiometodo create() in Product.php:– invia al DB una query che crea un nuovo record (nella tabella prodotti)– restituisce un messaggiocreate.php:– stabilisce i permessi di lettura del file



– stabilisce i metodi consentiti (POST)header("Access-Control-Allow-Methods: POST");

– legge i dati nella richiesta$data = json_decode(file_get_contents("php://input"));

– crea un'istanza di Product e invoca il metodo create()– restituisce un messaggio

42

(2)(1)


Case Study: CREATE - II(1) ricordatevi che...json_encode($x);

input: variabile PHP (può essere di qualunque tipo, per es. un array associativo)output: oggetto JSON rappresentato come stringa

json_decode($json_string);input: oggetto JSON rappresentato come stringaoutput: var. PHP (= oggetto JSON convertito in un tipo PHP opportuno (es. array assoc.)

(2)file_get_contents("php://input")

input: nome di un file (stringa)output: stringa contenente il contenuto del file

php://input = stream ("flusso") di raw data (dato "grezzi") proveniente dal body dellaHTTP request (dove ci sono i dati della POST!!)

Perché non leggo semplicemente $_POST??Perché se invio dati codificati in JSON (Content-Type: application/json) questiNON vengono inseriti nella variabile superglobale $_POST…

[https://stackoverflow.com/questions/8893574/php-php-input-vs-post]43


Case Study: CREATE - IIIIn dettaglio...create.php (servizio di inserimento di un nuovo prodotto)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");


// definisco il metodo consentito per la requestheader("Access-Control-Allow-Methods: POST");




... 44


Case Study: CREATE - IV...// leggo i dati nel body della request (metodo POST)$data = json_decode(file_get_contents("php://input"));

// controllo che i dati ci siano...if(!empty($data->nome) && !empty($data->prezzo) &&

!empty($data->descrizione) && !empty($data->cat_id)) {

// inserisco i valori nelle variabili d'istanza dell'oggetto $product$product->name = $data->nome;$product->price = $data->prezzo;$product->description = $data->descrizione;$product->category_id = $data->cat_id;

// invoco il metodo create() che crea un nuovo prodottoif($product->create()) { // se va a buon fine...http_response_code(201); // response code 201 = created

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Product was created"));

}...

45


Case Study: CREATE - V...else{ // se la creazione è fallita...

http_response_code(503); // response code 503 = service unavailable

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Unable to create product"));

}}else { // se i dati sono incompletihttp_response_code(400); // response code 400 = bad request

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Unable to create product. Data is incomplete: "."nome=".$data->nome." prezzo=".$data->prezzo." descrizione=".$data->descrizione." cat_id=".$data->cat_id));

}

46


Case Study: CREATE - VIInviamo al servizio una richiesta di inserimento nuovo prodotto:• avviate Postman• impostate il metodo POST• inserite l'URL: http://localhost/esempiTWaa2021/REST/api_server/api/create.php• cliccate su Body, poi su raw e inserite i dati nella request:

{"nome":"La valle del terrore","prezzo":"25","descrizione":"Una storia disegnata da Magnus","cat_id":1

}

• cliccate su Send

47


Case Study: CREATE - VIIRichiesta

Risposta

48


Case Study: UPDATE - I aggiornare i dati su un prodotto

accesso admin; metodo PUTdati in: dati prod; out: messaggiometodo update() in Product.php:– invia al DB una query che aggiorna il record (id in input)– restituisce un messaggioupdate.php:– stabilisce i permessi di lettura del file



– stabilisce i metodi consentiti (POST, PUT, PATCH)header("Access-Control-Allow-Methods:POST,PUT,PATCH");

– legge i dati nella richiesta$data = json_decode(file_get_contents("php://input"));

– crea un'istanza di Product e invoca il metodo update()– restituisce un messaggio

49


Case Study: UPDATE - IIIn dettaglio...update.php (servizio di aggiornamento dei dati di un prodotto)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");


// definisco il metodo consentito per la requestheader("Access-Control-Allow-Methods: POST, PUT, PATCH");




... 50


Case Study: UPDATE - III...// leggo i dati nel body della request (metodo POST)$data = json_decode(file_get_contents("php://input"));

// inserisco i valori nelle variabili d'istanza dell'oggetto $product$product->id = $data->id; // indica il prodotto da aggiornare!$product->name = $data->nome;$product->price = $data->prezzo;$product->description = $data->descrizione;$product->category_id = $data->cat_id;

// invoco il metodo update() che aggiorna i dati del prodottoif($product->update()) { // se va a buon fine...http_response_code(200); // response code 200 = tutto ok

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Product was updated"));

}else { // se l'aggiornamneto è fallito...http_response_code(503); // response code 503 = service unavailable

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Unable to update product"));

}51


Case Study: UPDATE - IV

Inviamo al servizio una richiesta di aggiornamento dati prodotto:• avviate Postman• impostate il metodo PUT• inserite l'URL: http://localhost/esempiTWaa2021/REST/api_server/api/update.php• cliccate su Body, poi su raw e inserite i dati:

{"id":"11","nome":"La valle del terrore","prezzo":"50","descrizione":"Una storia disegnata da Magnus","cat_id":1

}

• cliccate su SendNB se specificate un id inesistente, l'operazione sembra andare a buon fine

ugualmente... occorrerebbe un controllo preliminare sull'id!!!

52



Case Study: UPDATE - V

53

Richiesta

Risposta


Case Study: DELETE - I cancellare un prodotto

accesso admin; metodo DELETEdati in: id prod; out: messaggiometodo delete() in Product.php:– invia al DB una query che cancella il prodotto con quell'id– restituisce un messaggio (ok/problemi...)delete.php:– stabilisce i permessi di lettura del file



– stabilisce i metodi consentiti (DELETE)header("Access-Control-Allow-Methods: DELETE");

– legge l'id nella richiesta$data = json_decode(file_get_contents("php://input"));

– crea un'istanza di Product e invoca il metodo delete()– restituisce un messaggio

54


Case Study: DELETE - IIIn dettaglio...delete.php (servizio di cancellazione di un prodotto)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");


// definisco il metodo consentito per la requestheader("Access-Control-Allow-Methods: DELETE");




... 55


Case Study: DELETE - III...// leggo i dati nel body della request (metodo POST)$data = json_decode(file_get_contents("php://input"));

// inserisco l'id che indica il prodotto da cancellare nella// corrispondente variabile d'istanza dell'oggetto $product$product->id = $data->id; // indica il prodotto da cancellare!

// invoco il metodo delete() che cancella il prodotto indicatoif($product->delete()) { // se va a buon fine...http_response_code(200); // response code 200 = tutto ok

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Product was deleted"));

}else { // se l'aggiornamneto è fallito...http_response_code(503); // response code 503 = service unavailable

// creo un oggetto JSON costituito dalla coppia message: testo-msgecho json_encode(array("message" => "Unable to delete product"));

}

56


Case Study: DELETE - IVInviamo al servizio una richiesta delle info su un prodotto:• avviate Postman• impostate il metodo DELETE• inserite l'URL: http://localhost/esempiTWaa2021/REST/api_server/api/delete.php• cliccate su Body, poi su raw e inserite i dati:

{"id":"11"

}

• cliccate su Send

57

Richiesta(DELETE)



Case Study: SEARCH - I ricercare un prodotto

accesso everyone; metodoGETdati in: stringa; out: lista prodottimetodo search() in Product.php:– invia al DB una query che cerca i prodotti con quella stringa nel nome o

nella descrizione o nel nome della categoria– restituisce la lista (tabella) dei prodotti trovatisearch.php:– stabilisce i permessi di lettura del file



– legge la stringa nella richiesta: $_GET['s']– crea un'istanza di Product e invoca il metodo search()– legge il risultato (recordset) e lo codifica in JSON– restituisce il JSON (con la lista dei prodotti)

58


Case Study: SEARCH - IIIn dettaglio...search.php (servizio di ricerca prodotti per keyword)//stabilisco i permessi di lettura del file (anyone)header("Access-Control-Allow-Origin: *");





// leggo le keywords (parametro s) nella richiesta (GET)$keywords = isset($_GET["s"]) ? $_GET["s"] : "";

...

59

forma compatta di if: se $_GET['id'] è settata, la leggo, altrimenti a $keywords assegno la stringa vuota


Case Study: SEARCH - III...// invoco il metodo search() → lista prodotti che soddisfano la query$stmt = $product->search($keywords); // NB $stmt è un recordset!

// creo una coppia products: [lista-di-prodotti]$products_list = array();$products_list["products"] = array();

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

// costruisco un array assoc. ($product_item) // che rappresenta ogni singolo prodotto...$product_item = array("id" => $row['id'],"name" => $row['nome'],"description" => html_entity_decode($row['descrizione']),"price" => $row['prezzo'],"category_id" => $row['cat_id'],"category_name" => $row['nomecat']

);...

60

la funzione fetch (libreria PDO) con parametro PDO::FETCH_ASSOCinvocata su un PDOStatement, restituisce un record ($row), in part. un array le cui chiavi sono i nomi delle colonne della tabella


Case Study: SEARCH - IV

...// ... e lo aggiungo al fondo di lista-di-prodottiarray_push($products_list["products"], $product_item);

} // while

// trasformo la coppia products: [lista-di-prodotti] in un oggetto JSON// vero e proprio e lo invio in HTTP responseecho json_encode($products_list);

61

la funzione array_push inserisce al fondo di un array ($products_list["products"]) i parametri che seguono l'array ($product_item)


Case Study: SEARCH - VInviamo al servizio una richiesta di ricerca (data una stringa):• avviate Postman• impostate il metodo GET• inserite l'URL:

http://localhost/esempiTWaa2021/REST/api_server/api/search.php?s=Topolino• cliccate su Send

62

Richiesta(GET)


Case Study: SEARCH - VIRisposta

63

oggetto JSON costituito da una coppia (products:[...]) il cui valore è la lista di prodotti trovati



a.a. 2020/2021

8cAnna Goy

RESTful services

Case Study FRONTEND(con Javascript/jQuery)

v1



Client app v1 - ICreiamo un'app(client) cheutilizza i serviziREST creati…

↓

66


Client app v1 - IIesClientRest.html → struttura generale<HTML><HEAD>...<script src="jquery-3.4.1.js" type="text/javascript"></script><script>jQuery(document).ready(function() {// definizione dei gestori di eventi (vedi oltre)

});</script></HEAD><BODY><script>// variabili per impostare a mano le operazionivar id_readOne = 4;var nuovo_prod = '{"nome":"La valle del terrore", "prezzo":"25",

"descrizione":"Una storia disegnata da Magnus","cat_id":1}';var agg_prod = '{"id":"16","nome":"La valle del terrore", "prezzo":"50",

"descrizione":"Una storia disegnata da Magnus","cat_id":1}';var ogg_delete = '{"id":"16"}';var s_search = "Topolino";</script>...

67


Client app v1 - III...<p><a href="err.php" id="read">leggi tutti i prodotti</a> (GET)</p><p><a href="err.php" id="read-one">leggi singolo prodotto</a> (GET) <br />

DATA: id=<script> document.write(id_readOne); </script></p><p><a href="err.php" id="create">crea prodotto</a> (POST) <br />

DATA: <pre><script> document.write(nuovo_prod); </script></pre></p><p><a href="err.php" id="update">aggiorna prodotto</a> (PUT) <br />

DATA: <pre><script> document.write(agg_prod); </script></pre></p><p><a href="err.php" id="delete">cancella prodotto</a> (DELETE) <br />

DATA: <pre><script> document.write(ogg_delete); </script></pre></p><p><a href="err.php" id="search">cerca prodotto</a> (GET) <br />

DATA: <script> document.write(s_search); </script></p><hr /><p><strong>RESULT</strong> <br /><div id="products"></div>

</p></BODY></HTML>

Vediamo ora la definizione dei gestori di eventi…68

link su cui sono definiti i gestori di eventi

sezione in cui vengono stampati i risultati

Client app v1: lettura di tutti i prodotti - I

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

$("#read").on("click", function(){

$.ajax({

url: "http://localhost/esempiTWaa2021/REST/api_server/api/read.php",type: "GET",success: function(response) {

... vedi prossima slide},error: function(xhr,err,exc){

... vedi prossima slide}...

quando l'utente clicca sull'elemento con

la funzione ajax ha come unico parametro un oggetto JSON costituito da coppie nome-valore; le principali coppie definiscono...

le funzioni di callback (eseguite quando il server risponde): funzioni anonime che rappresentano i valori degli attributisuccess: il parametro response contiene

l'URL del servizioil metodo della richiesta HTTP

id="read" eseguo la funzione anonima, che ha un'istruzione: la chiamata ajax!

la risposta del server (in questo es una lista di prodotti, cioè un array di oggetti JSON) error: il parametro xhr è l'oggetto XMLHttpRequest, err contiene la descrizione testuale dell'errore, exc contiene l'eccezione lanciata (che, se si è verificato un errore HTTP, è una stringa con l'errore, x es. "Not Found")

Client app v1: lettura di tutti i prodotti - II


success: function(response){html_list = "<ul>";for (i=0; i<response.products.length; i++){

nome = response.products[i].name;descr = response.products[i].description;prezzo = response.products[i].price;cat = response.products[i].category_name;html_list += "<li><em>"+nome+"</em>: "+descr+", "+prezzo+" euro, "+cat+"</li>";

} html_list += "</ul>";$("#products").html(html_list);

},

error: function(xhr,err,exc){console.log(xhr,err,exc);$("#products").html(xhr+err+exc);

}

response contiene un ogg. JSON con la coppia'products': array di ogg. JSON→ con un ciclo li considero uno per volta ed estraggo i valori degli attributi [*]

NB stampare l'errore sulla pagina NON è una buona prassi... può mettere a rischio lasicurezza dell'app!

costruisco una stringa con questi valori (un item di una lista HTML)

stampo la lista HTML nell'elem. che ha id="products" (con la funzione html(...))

stampo l'errore sulla console e sulla pagina (nell'elem. con id="products")

Client app v1: lettura di tutti i prodotti - III


$("#read").on("click", function(){$.ajax({

... vedi slide precedenti}); // chiamata ajaxreturn false;

});

[*] Trick: per vedere com'è fatto il risultato che vi arriva dal server... invocate il servizio con Postman! (o al limite anche con il browser...)

ATTENZIONE!! assolutamente necessario per far funzionare l'on-click! Serve a evitare che parta la HTTP request legata all'attributo href dell'elemento (link) con id="read" (se succede, la chiamata ajax non funziona!)Nota: equivale a chiamare la funzione preventDefault() sull'evento (click), che qui però non viene catturato...

Client app v1: lettura dati singolo prodotto - I


$("#read-one").on("click", function(){$.ajax({

url: "http://localhost/esempiTWaa2021/REST/api_server/api/read_one.php?id="+id_readOne,

type: "GET",success: function(response){

nome = response.name;descr = response.description;prezzo = response.price;cat = response.category_name;html_par = "<p>read id: "+id_readOne+" > <em>"+nome+"</em>: "+

descr+", "+prezzo+" euro, "+cat+"</p>";$("#products").html(html_par);

},error: function(xhr,err,exc){

...}

}); // chiamata ajaxreturn false;

});

URL con parametro (richiesta di tipo GET)

response contiene un singolo prodotto (oggetto JSON) → posso estrarre direttamente i valori degli attributi

Client app v1: nuovo prodotto - I


$("#create").on("click", function() {$.ajax({

url: "http://localhost/esempiTWaa2021/REST/api_server/api/create.php",type: "POST", contentType: 'application/json',data: nuovo_prod,

success: function(response){ html_par = "<p>"+response.message+"</p>";$("#products").html(html_par);


...}


});

formato dei dati inviati nella requestNota: x dichiarare i dati che ci si aspetta nella response si usa dataType...

response contiene un oggetto JSONche rappresenta un messaggio

Client app v1: aggiornamento prodotto - I


$("#update").on("click", function() {$.ajax({

url: "http://localhost/esempiTWaa2021/REST/api_server/api/update.php",type: "PUT", contentType: 'application/json',data: agg_prod,success: function(response){

html_par = "<p>"+response.message+"</p>";$("#products").html(html_par);


...}


});


Client app v1: cancellazione prodotto - I


$("#delete").on("click", function() {$.ajax({

url: "http://localhost/esempiTWaa2021/REST/api_server/api/delete.php",type: "DELETE", contentType: 'application/json',data: ogg_delete,success: function(response){

html_par = "<p>"+response.message+"</p>";$("#products").html(html_par);


...}


});


Client app v1: ricerca prodotti - I


$("#search").on("click", function() {$.ajax({url: "http://localhost/esempiTWaa2021/REST/api_server/api/

search.php?s="+s_search,

type: "GET", success: function(response){ html_list = "<p>Ricerca per: "+s_search+"</p>";html_list += "<ul>";for (i = 0; i < response.products.length; i++){nome = response.products[i].name;descr = response.products[i].description;prezzo = response.products[i].price;cat = response.products[i].category_name;html_list += "<li><em>"+nome+"</em>: "+descr+", "+

prezzo+" euro, "+cat+"</li>";} html_list += "</ul>";$("#products").html(html_list);

},error: function(xhr,err,exc){ ... }

}); // chiamata ajaxreturn false; });

URL con parametro (richiesta di tipo GET)

response contiene un array di oggetti JSON→ con un ciclo li considero uno per volta ed estraggo i valori degli attributi [*]


NEW CASE STUDY: edicola fumetti (versione 1)

• Backend: con PHP, costruiamo una serie di servizi che permettano di – inserire, aggiornare e cancellare prodotti– leggere e cercare prodottie offriamo interfacce RESTful per usare questi servizi

• Frontend: costruiamo un pagina web che agisca da client, invocando i servizi REST• Questa prima versione di client è piuttosto grezza... x esempio:

– sarebbe utile una UI per acquisire i dati (x es. utilizzando dei form HTML)– è possibile migliorare la visualizzazione dei risultati ottenuti – si possono inserire controlli più accurati, x es. nella update, se l'utente specifica un id

inesistente, l'operazione sembra andare a buon fine ugualmente (occorrerebbe un controllo preliminare sull'id)

– ...

PUT ALL TOGETHER & TRY YOURSELF!

77RIF cartelle REST/api_server (contiene le api, il dataMgr e fumetti.sql) e REST/app_client

Tecnologie Web: approcci avanzatigoy/materiale/2021/08_TecWeb2021_REST1.pdf · 2020. 12. 8. · Goy...

Documents

Transcript of Tecnologie Web: approcci avanzatigoy/materiale/2021/08_TecWeb2021_REST1.pdf · 2020. 12. 8. · Goy...