Appunti pagine dinamiche e form per il recupero del debito di Lab di informatica
Pagine Dinamiche e Forms
OBIETTIVI DELLA LEZIONE
In questa lezione:
- impareremo la differenze tra pagine statiche e dinamiche
- vedremo come costruire un FORM HTML
- vedremo come vengono passati i dati ad una CGI
Pagine statiche vs pagine dinamiche
Dispense: 1-PagineDinamiche_new.pdfFORMS
- Dispense: 2-FORMSinHTML.pdf
-
Client e Server
Il web browser che ci permette di inserire i dati e li inoltra è detto client o anche user agent. Su di un computer "remoto" detto Server machine è installato un programma detto server che è in grado di fornire al client una pagina HTML in seguito ad una domanda specifica (del client).
Il client non ha nessuna idea di come il server generi il documento. Il server è per il client come una scatola nera ed è assolutamente equivalente se la pagina è:- letta da un file su disco
- generata da un programma invocato dal server
- ...
-
CGI (primi passi)
CGI="common gataway interface" è un metodo di interazione standard tra il client ed un programma lato server. E' indipendente dal:- sistema operativo
- linguaggio di programmazione
- web server impegato
I file CGI sono riconosciuti dal web server perchè sono contenuti in una cartella specifica sul server o perché terminano con una estensione standard (.cgi, .php, .asp, ...).
Lo standard CGI prevede che, se al server viene richiesta una cartella sensa specificare quale file di quella cartella si desideri, il server inoltri il file "index.htm" contenuto in quella cartella (se esiste). GET e POST
Un form HTML prevede che i dati vengano forniti al server attraverso i due metodi standard HTTP, GET e POST.- GET: i dati vengono codificati e aggiunti all'URI.
Convenzione CGI: URI + "?" + controllo1=valorecontrollo1 + "&" + controllo2=valorecontrollo2 ...
Esempio:
http://www.dti.unimi.it/~sassi/LIA2003/provaform.php?nome=giovanni&cognome=rossi&matricola=123456
Lo standard CGI prevede che i caratteri dopo il "?" vengano copiati dal server nella variabile di ambiente "QUERY_STRING". Ogni programma CGI deve quindi estrare i valori dalla variabile di ambiente e decodificarli opportunamente.
ATTENZIONE alcuni sistemi operativi limitano il numero di caratteri di una variabile di ambiente a 256. Se prevedete di doverne inoltrare di più non usate GET: verrebbero troncati e mai ricevuti dal programma! - POST: i dati vengono posti nel body della richiesta HTTP.
Risultato: l'URI non cambia.
Esempio:
http://www.dti.unimi.it/~sassi/LIA2003/provaform.php
Il metodo POST non ha nessun limite sulla dimensione dei dati da trasferire.
Lo standar CGI prevede che il server debba estrarre la stringa dei valori dei controlli dal body della richiesta HTTP e copiarla sullo stdin. Il numero dei caratteri posti dal server sullo stdin viene posto nella variabile di ambiente "CONTENT_LENGTH".
- GET: i dati vengono codificati e aggiunti all'URI.
-
CGI (qualche dettaglio)
Come fa un programma CGI a ritornare la pagina HTML compilata dinamicamente al server WEB? Scrive sullo stdout!
Vediamo due esempi di comunicazioni HTTP:GET
Richiesta del client:GET /~sassi/LIA2003/provaform.php?nome=Giovanni&cognome=Rossi&matricola=123456 HTTP/1.1 Host: www.dti.unimi.it User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206
Firefox/0.8 Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,
[...] Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive
Risposta del server:HTTP/1.x 200 OK Date: Mon, 19 Apr 2004 07:33:48 GMT Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2 mod_ssl/2.8.9 OpenSSL/0.9.6g
mod_perl/1.26 X-Powered-By: PHP/4.1.2 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>Prova FORM. La tua matricola è ...
POST
Richiesta del client:POST /~sassi/LIA2003/provaform.php HTTP/1.1 Host: www.dti.unimi.it User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206
Firefox/0.8 Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,
[...] Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Content-Type: application/x-www-form-urlencoded Content-Length: 44 nome=Giovanni&cognome=Rossi&matricola=123456
Risposta del server:HTTP/1.x 200 OK Date: Mon, 19 Apr 2004 07:33:54 GMT Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2 mod_ssl/2.8.9 OpenSSL/0.9.6g
mod_perl/
1.26 X-Powered-By: PHP/4.1.2 Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>Prova FORM. La tua matricola è ...
INPUT
- text
<INPUT type="text" name="cognome" size="40">
<INPUT type="text" name="cognome" size="40" value="Rossi">
- hidden
<INPUT type="hidden" value="Rossi">
Non produce output sul browser del client, ma il valore viene inoltrato al server. - radio
Il mio OS è:<br /> <input type="radio" name="fav_os" value="mac">Macintosh<br /> <input type="radio" name="fav_os" value="dos">DOS<br /> <input type="radio" name="fav_os" value="win" checked>Windows<br /> <input type="radio" name="fav_os" value="win95">Windows95<br /> <input type="radio" name="fav_os" value="os2">OS/2<br /> <input type="radio" name="fav_os" value="unix">UNIX<br />
Si può selezionare solo una opzione. - checkbox
Il mio OS è:<br /> <input type="checkbox" name="fav_os" value="mac">Macintosh<br /> <input type="checkbox" name="fav_os" value="dos">DOS<br /> <input type="checkbox" name="fav_os" value="win" checked>Windows<br /> <input type="checkbox" name="fav_os" value="win95">Windows95<br /> <input type="checkbox" name="fav_os" value="os2">OS/2<br /> <input type="checkbox" name="fav_os" value="unix">UNIX<br />
Si possono selezionare più valori. - submit
<INPUT type="submit" value="Invia!">
ATTENZIONE: ogni FORM deve contenere un bottone di submit! - reset
<INPUT type="reset" value="Cancella!">
- text
SELECT
-
Il mio OS è:<br /> <select name="fav_os"> <option>Macintosh <option>DOS <option checked>Windows <option>Windows95 <option>OS/2 <option>UNIX </select>
Si può selezionare un valore solo. - size: una finestra più larga
Il mio OS è:<br /> <select name="fav_os" size="3"> <option>Macintosh <option>DOS <option checked>Windows <option>Windows95 <option>OS/2 <option>UNIX </select>
- multiple: selezionare più valori
Il mio OS è:<br /> <select name="fav_os" size="3" multiple> <option>Macintosh <option>DOS <option checked>Windows <option>Windows95 <option>OS/2 <option>UNIX </select>
Per selezionare il secondo valore tenere premuto il tasto CTRL mentre si seleziona con li mouse!
-
TEXTAREA
<textarea cols=40 rows=5 name="testo"> Testo che si trova già digitato in una frase molto lunga. </textarea>
Un esempio: Form che scarica una pagina TELEVIDEO
<html> <head> <title>Esempio di form che accede a Televideo</title> </head> <body> VISUALIZZA LA PAGINA TELEVIDEO <br /> <form method="get" action="http://www.televideo.rai.it/nazionale/solotesto.asp"> <table> <tr> <th>Pagina Televideo:</th> <td><input type="text" name="tlv"></td> </tr> <tr> <th></th> <td><input type="submit" value="Visualizza"></td> </tr> </table> <input type="hidden" name="sottop" value="01"> </form> </body> </html>
Il nostro primo script PHP
<html> <head> <title>Prova FORM. La tua matricola è <?php print " " . $_REQUEST['matricola'] . "."; ?> </title> </head> <body> Ben arrivato <?php print "<b>" . $_REQUEST["nome"] . " " . $_REQUEST['cognome'] . "</b>"; ?> ti stavo aspettando. <br /> Il tuo numero di matricola è nel titolo. </body> </html>
Lab
Esercizio 1:
Costruire una pagina HTML che contenga un FORM che richieda all'utente di inserire nome, cognome e matricola. Il FORM deve inviare i dati con il metodo GET all'indirizzo http://www.dti.unimi.it/~sassi/LIA2003/provaform.php; i dati devono essere contenuti in controlli chiamati rispettivamente "nome", "cognome" e "matricola".
Una volta ottenuta la risposta corretta dal server, rifate l'esercizio utilizzando il metodo POST per l'invio dei dati. Cosa cambia?
Esercizio 2:
Dal sito www.trenitalia.com è possibile ottenere informazioni circa l'orario ferroviario. La pagina è però appensantita da immagini e applets. Scriviamo noi una nostra interfaccia!
Ispirandosi all'interfaccia a Televideo vista a lezione, preparare una pagina HTML che contenga un FORM che permetta di ottenere dal server http://orario.trenitalia.com/webapp/trenitalia/TimeTable l'orario di un particolare treno.
I controlli da fornire con il metodo POST (o GET, in questo caso funzionano entrambi) sono:
"stazin" (stazione di partenza),
"stazout" (stazione di arrivo),
"datag" (giorno di partenza),
"datam" (mese di partenza),
"dataa" (anno di partenza),
"timsh", (ora di partenza),
"timsm" (minuti dopo l'ora di partenza),
"lang" (linguaggio; suggerimento: predisporre un controllo hidden con il valore predefinito "it")
"nreq" (numero di risultati da visualizzare).
Esercizio 3: BONUS
In questo esercizio è richiesto di sviluppare una applicazione leggermente più complessa di quanto fatto fino ad ora (questo non vuol dire che le linee di codice richieste saranno molte).
Il signor Rossi è ossessionato dai consumi elettrici di casa e tenta in ogni modo di ridurli. A questo fine introduce spesso migliorie all'impianto (introduzione lampadine a basso consumo, elettrodomestici più avanzati, ...).
A fronte di ogni miglioria si annota su di un foglio la data e la lettura del contatore.
Sapendo che siete dei brillanti studenti, vi commissiona il programma tabellaconsumi.c che gli permetta di tenere nota delle lettura e creare a richiesta una pagina HTML con una tabella riassuntiva.
Il programma una volta partito deve mostrare il testo "PRONTO> " e rimanere in attesa di un comando. Una volta eseguito il comando deve tornare di nuovo nello stato di attesa (dovete scrivere un semplice interprete di comandi). I comandi che il programma accetta sono:
- 'E': termina il programma
- 'N': crea un file di testo vuoto "consumienel.txt" e lo chiude. Se il file esiste già chiede conferma prima di cancellarlo. Suggerimento: per verificare se il file esiste apritelo in sola lettura. Se non riuscite ad aprirlo significa che non esiste.
- 'C': cancella il file di testo "consumienel.txt". Chiede sempre conferma prima di cancellare.
- 'A': aggiunge una lettura al file "consumienel.txt". La lettura contiene quattro valori: giorno, mese, anno e KWh consumati. Suggerimento: per prima cosa chiedete il valore della lettura all'utente, quindi aprite il file e aggiungetela in fondo. Il file viene chiuso dopo ogni lettura aggiunta. Suggerimento: rigurdate l'input/output formattato!
- 'H': crea il file HTML "consumi.html" in cui ci sia per ogni riga il numero della lettura, la data e il numero di KWh consumati.
Esercizio 4:
Scrivere un programma in C che calcoli la differenza tra due date qualunque inserite dall'utente. Le date devono essere memorizzate in un dato di tipo struct e passate ad una funzione calcoladifferenza().
Suggerimento: per verificare se un anno è bisestile, riguarda il programma "AnniBisestili.c" della lezione 4. Riguarda inoltre la lezione 7 e la differenza tra gli operatori "." e "->".
Per esempio, dopo averlo lanciato specificate l'Hostname (www.dti.unimi.it), la porta (80), il protocollo (RAW) e specificate "Close window on exit": NEVER.
Quindi una volta aperta la finestra telnet (potrebbe non apparire nulla) digitate, ad esempio,
GET / HTTP/1.0
e premete enter due volte.
Ad esempio, una richiesta GET minimale allo script PHP dell'esercizio 1
GET /~sassi/LIA2003/provaform.php?nome=Giovanni&cognome=Rossi&matricola=123456 HTTP/1.0... e una richiesta POST minimale:
POST /~sassi/LIA2003/provaform.php HTTP/1.0 Host: www.dti.unimi.it Content-Type: application/x-www-form-urlencoded Content-Length: 44 nome=Giovanni&cognome=Rossi&matricola=123456
Commenti
Posta un commento