4 Tecnologie Web: approcci avanzati

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

Tecnologie Web:

approcci avanzati

a.a. 2020/2021

4

Anna Goy

Object-oriented

interazione con il client PHP:

(form)

Tecnologie Web: approcci avanzati

Goy - a.a. 2020/2021 3

FORM in HTML - I

In HTML...

<FORM METHOD="POST" ACTION="id.php" >

campi...

</FORM>

metodo HTTP utilizzato (di fatto, modo in cui vengono codificati i dati nell'HTTP request)

GET: i dati (coppie <nome, valore>) sono scritti in

coda alla risorsa richiesta POST: i dati (coppie <nome, valore>) sono scritti all'interno del body di HTTP request

script o programma server-side che "raccoglie" ed "elabora" i dati contenuti nel form

HTTP header

risorsa = identif.php HTTP body...

dati: <login, admin>

<pwd, pippo>

...

HTTP header

risorsa = identif.php?login=admin&pwd=pippo HTTP body......

Tipi di campi (tag <INPUT...>):

• Caselle di testo (di vario tipo)

<INPUT TYPE="text" NAME="login"/>

<INPUT TYPE="password" NAME="pwd"/>

• Pulsanti di opzione (radio button)

<INPUT TYPE="radio" NAME="accetto" value="si"/>

<INPUT TYPE="radio" NAME="accetto" value="no"/>

NB sono mutuamente esclusivi!

• Caselle di controllo (checkbox)

<INPUT TYPE="checkbox" NAME="cinema"/>

<INPUT TYPE="checkbox" NAME="teatro"/>

Oppure

<INPUT TYPE="checkbox" NAME="interessi[]" value="cinema"/>

<INPUT TYPE="checkbox" NAME="interessi[]" value="teatro"/>

NB non sono mutuamente esclusivi!

⇒ devo usare nomi diversi, opp "raccoglierli" in un array!

FORM in HTML - II

NB stesso nome!

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

• Campi nascosti

<INPUT TYPE="hidden" NAME="utente" value="pippo"/>

non vengono visualizzati nella pagina, ma vengono inclusi in HTTP request:

<utente, pippo>

• Pulsante di invio (submit)

<INPUT TYPE="submit" value="invia"/>

• Pulsante di reset

<INPUT TYPE="reset" value="reset"/>

NB Il tag <INPUT...> ha altri attributi opzionali, per esempio:

<INPUT TYPE="text" NAME="login" value="pippo" size="4"/>

<INPUT TYPE="checkbox" NAME="interessi" value="cinema"

checked/> [NB checked ≡ checked=true]

FORM in HTML - III

Altri tipi di campi:

• Aree di testo

<TEXTAREA NAME="msg" cols="20" row="5">

</textarea>

• Drop-down menu (select)

<SELECT NAME="job">

<option value="null"> </option>

<option value="imp">impiegato</option>

<option value="ins">insegnante</option>

</SELECT>

NB Il tag <SELECT...> ha un attributo opzionale:

<SELECT NAME="job" multiple >

... [NB multiple ≡ multiple=true]

se multiple=true posso effettuare selezioni multiple (click col mouse sulle scelte,

tenendo premuto il tasto Ctrl) → Attenzione! questa soluzione non è tanto usabile...

spesso meglio una checkbox!

FORM in HTML - IV

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

HTML5 introduce:

• nuovi valori per l'attributo type che fanno sì che alcuni controlli vengano effettuati automaticamente:

– <input type="email">

– <input type="url">

• nuovi valori per l'attributo type che fanno sì che venga fornito all'utente un widget per

l'input del dato:

– <input type="date">

FORM in HTML - V

• nuovi attributi per facilitare l'input e controllarlo:

– placeholder: testo che compare in un campo e che scompare quando l'utente inizia a scrivere

– required: attributo booleano che serve a rendere obbligatoria la compilazione dell'elemento; il controllo viene fatto automaticamente all'invio del form

<textarea

placeholder="Scrivi qui il tuo messaggio"

required>

</textarea>

NB per gli attributi booleani vale la seguente equivalenza:

attr=true ≡ ^attr _(es: required=true ≡ ^required₎

FORM in HTML - VI

Tecnologie Web: approcci avanzati

Goy - a.a. 2020/2021 9

FORM in HTML - VII

I valori inseriti attraverso i campi del form vanno a finire nell'HTTP request, nella forma di coppie ^<nome, valore>

⇒ 1. attenzione all'attributo NAME nel tag HTML corrispondente!

2. attenzione a non usare spazi o caratteri strani (sia nel NAME che nel valore inserito dall'utente)!

es: http://www.mysite.com/choice.php?my taste=milkchocolate

→ errore!

es: http://www.mysite.com/choice.php?taste=milk&chocolate

→ errore!

⇒ nel NAME... basta evitarlo!

nel valore (inserito dall'utente) → URL encoding (sostituzione dei caratteri "strani" inseriti nei campi dei form)

... per fortuna i browser lo fanno automaticamente!

(vedremo una problematica simile quando accenneremo ai problemi di sicurezza e di validazione dell'input...)

FORM in HTML - VIII

NOTA: Il caso delle checkbox è un po' più complesso...

• se ogni checkbox ha un nome diverso, allora verranno inseriti nell'HTTP request solo le caselle selazionate, come coppie <nome, ^ON>; x es:

<INPUT TYPE="checkbox" NAME="cinema"/>

<INPUT TYPE="checkbox" NAME="teatro"/>

<INPUT TYPE="checkbox" NAME="musica"/>

<INPUT TYPE="checkbox" NAME="sport"/>

→ <cinema,ON> <teatro,ON> <musica,ON>

• se le checkbox hanno lo stesso nome (un array), allora nell'HTTP request ci sarà una sola coppia, il cui valore sarà un array; x es:

<INPUT TYPE="checkbox" NAME="interessi[]" value="cinema"/>

<INPUT TYPE="checkbox" NAME="interessi[]" value="teatro"/>

<INPUT TYPE="checkbox" NAME="interessi[]" value="musica"/>

<INPUT TYPE="checkbox" NAME="interessi[]" value="sport"/>

→ <interessi,{cinema,teatro,musica}>

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

PHP: gestire i dati dei form - I

Come faccio (dallo script contenuto nella pagina PHP indicata nell'attributo

ACTION del tag <FORM...>) a leggere i parametri contenuti in HTTP request?

• I parametri sono resi disponibili a PHP all'interno di due variabili

"superglobali" (superglobals), predefinite e accessibili da qualunque pagina PHP: ^$_GET[] e ^$_POST[]

• $_GET[] e $_POST[] sono array associativi

− se il metodo utilizzato è GET, i parametri sono memorizzati in ^$_GET[]

$_GET["login"] → admin

$_GET["pwd"] → pippo

− se il metodo utilizzato è POST, i parametri sono memorizzati in ^$_POST[]

$_POST["login"] → admin

$_POST["pwd"] → pippo

admin pippo

...

login pwd ...

chiavi valori

PHP: gestire i dati dei form - II

NB1 le chiavi in ^$_GET[] o ^$_POST[] sono definite dai valori degli attributi ^NAME nei tag ^INPUT (o ^SELECT, o ^TEXTAREA):

<FORM METHOD="POST" ...>

<INPUT TYPE="text" NAME="login" /> → $_POST["login"]

NB2Essendo array (associativi), ^$_GET[] o ^$_POST[] possono essere manipolati con le funzioni per gli array (es. count, print_r, ecc.) e con i cicli, x es:

<?php foreach ($_POST as $par) { ?>

<p>parametro: <?= $par ?></p>

<?php } ?>

→ stampa solo i valori, senza chiavi!

<?php foreach ($_POST as $par => $val) { ?>

<p>parametro: <?= $par ?> = <?= $val ?> </p>

<?php } ?>

→ stampa chiavi e valori

parametro: admin parametro: pippo

parametro: login = admin parametro: pwd = pippo

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

PHP: gestire i dati dei form - III

NB3Il caso delle checkbox è un po' più complicato...

supponiamo di aver utilizzato un array (metodo consigliato), allora devo estrarre il valore (che è un array) e poi utilizzare un ciclo; x es:

$inter = $_POST["interessi"];

foreach ($inter as $int) { print $int.", ";

}

Il caso dei drop-down menu con scelta multipla è analogo...

chiave valore

ARRAY interessi

cinema teatro 0

1

23 musica sport

$_POST

cinema, teatro, musica, sport,

PHP: gestire i dati dei form - IV

Attenzione!!

Questi esempi mettono a rischio la sicurezza della vostra applicazione!!

• MAI usare direttamente il valore di un parametro, senza controlli!!

• l'utente, infatti, potrebbe aver inserito testo, immagini, tag, o anche codice, che potrebbe finire nella pagina (visualizzato o peggio eseguito) o – come vedremo – nella query ad un database...!!!

• occorre sempre validare l'input (controllare i valori dei parametri) per evitare iniezioni di codice maligno; x es:

<?php

$nome = htmlspecialchars($_POST["name"]);

?>

<p>Benvenuto <?= $nome ?></p>

funzione che ricodifica i caratteri speciali dell'HTML (rendendoli innocui), x es:

$txt="<p>hello</p>";

$clean_txt=htmlspecialchars($text);→ &lt;p&gt;hello&lt;/p&gt;

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

CASE STUDY: quiz

• costruiamo un form per permettere all'utente di inserire le risposte nel quiz

– cercate di usare campi di input diversi: testo, drop-down menu, checkbox, radio button, ...

– potete aggiungere alla classe Domanda

(a) una variabile per indicare quale tipo di campo di form richiede quella domanda;

(b) una variabile (magari di tipo array) che contenga le possibili risposte

– nella classe Risposta potrebbe esserci anche una variabile che dica se la risposta è corretta...

• leggiamo le risposte e calcoliamo i punti

• diamo un feedback all'utente

• Suggerimento: siccome gli script in DomandaII.php, RispostaII.php, domande_v2.php si occupano esclusivamente di gestire i dati, "isoliamoli" in una cartella (x es. dataMgr)...

PUT ALL TOGETHER & TRY YOURSELF!

RIF dataMgr/DomandaII.php, dataMgr/RispostaII, dataMgr/domande_v2.php, quiz_v2.php, quiz_v2_elabora_risposte.php 15