Appunti pagine dinamiche e form per il recupero del debito di Lab di informatica

Pagine Dinamiche e Forms

OBIETTIVI DELLA LEZIONE
In questa lezione:
  1. impareremo la differenze tra pagine statiche e dinamiche
  2. vedremo come costruire un FORM HTML
  3. vedremo come vengono passati i dati ad una CGI

 

Pagine statiche vs pagine dinamiche

Dispense: 1-PagineDinamiche_new.pdf

FORMS

  • 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
    E' sostanziamente una serie di convenzioni che fanno si che un web server sappia come rispondere a richieste del tipo: www.dti.unimi.it/~sassi/LIA2003/provaform.php
    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".
  • 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 />
      
      Il mio OS è:
      Macintosh
      DOS
      Windows
      Windows95
      OS/2
      UNIX
      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 />
      
      Il mio OS è:
      Macintosh
      DOS
      Windows
      Windows95
      OS/2
      UNIX
      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!">
      
  • SELECT

    • Il mio OS è:<br />
      <select name="fav_os">
      <option>Macintosh
      <option>DOS
      <option checked>Windows
      <option>Windows95
      <option>OS/2
      <option>UNIX
      </select>
      
      Il mio OS è:
      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>
      
      Il mio OS è:
    • 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>
      
      Il mio OS è:
      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>";
?>
&nbsp;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:
  1. 'E': termina il programma
  2. '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.
  3. 'C': cancella il file di testo "consumienel.txt". Chiede sempre conferma prima di cancellare.
  4. '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!
  5. '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 visualizzare la risposta di un web server alla richiesta del client, potete utilizzare il client telnet PuttyTel.
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