FORMS HTML
Il Web non è costituito soltanto da documenti fantasiosi e belle immagini; collegare documenti e servizi Internet è utile ma manca ancora un ingrediente fondamentale: l'interazione con l'utente. Gli utenti devono poter non solo vedere le pagine, ma anche utilizzarle.
In genere le informazioni inviate agli utenti sono statiche, costituite da documenti che non cambiano nel tempo, o comunque il loro cambiamento non dipende da chi ha visitato il sito, ma solo da chi gestisce il sito. Una funzionalità ulteriore è quella che consiste nel dare all'utente la possibilità di inserire o modificare informazioni nel sito, il quale può rispondere dinamicamente, creando nuovi documenti in risposta alle richieste dell utente.
La dinamicità si ottiene creando form (moduli) HTML che raccolgono le informazioni. Con le form HTML, gli utenti possono, ad esempio: iscriversi a una mailing list, inviare commenti su pagine Web o sui servizi in genere, riempire moduli di ordinazione per prodotti, o servizi in linea, o compilare la denuncia dei redditi.
sottoporre un'interrogazione a un database, partecipare a giochi interattivi, guidare da lontano un braccio di robot o una telecamera, partecipare a esperimenti sociali interattivi, come conversazioni di gruppo, indagini di mercato e votazioni elettroniche.
Ricapitolando, con le form HTML form HTML si possono acquisire o fornire dati, come ad esempio: interfacce per la consultazione di database, elezioni in linea accesso istantaneo a sistemi remoti, assistenza tecnica in linea distance learning e-commerce
Esistono interfacce per database, questionari per la clientela e interi centri commerciali su Web, oltre a giochi interattivi come poker e scacchi. Tutto ciò è straordinariamente interessante, ed è anche ciò che ha trasformato il Web da una sorta di primizia ipertestuale, utilizzato soltanto da scienziati e insegnanti, nella principale via di entrata dell'industria in Internet.
HTML statico e dinamico I documenti HTML si dividono in due categorie: statici e dinamici. Nel primo caso il documento è redatto una volta per tutte ed è mantenuto nella sua forma e distribuito immutato agli utenti che si connettono a un server.
La maggior parte dei documenti HTML è statica, infatti è più facile creare documenti di questo tipo, dato che non occorre che intervengano programmi adeguati. Si scrive il documento, lo si colloca sul server, e quando viene richiamato, il server lo distribuisce.
La creazione di documenti dinamici richiede invece una certa tecnica. In questo caso il documento HTML viene generato nel momento in cui è distribuito, da un programma specifico denominato script. Lo script è mantenuto sul server, e può essere scritto in qualunque linguaggio di programmazione.
Un documento HTML dinamico può anche essere molto semplice e non richiedere alcun input da parte dell'utente. Lo script di un tale documento potrebbe generare un documento dinamico contenente informazioni specifiche quali, ad esempio, la data, l ora, l identificativo del server o il particolare momento in cui l'utente si è collegato.
Anziché leggere semplicemente un documento HTML statico dal disco e inviarlo attraverso la connessione, il server esegue lo script, il quale crea istantaneamente il documento HTML dinamico, quindi trasmette tale documento appena creato all'utente in attesa.
Ad esempio, in questo modo sarebbe possibile distribuire un bollettino meteorologico, o anche qualcosa di più semplice come l'ora locale del sito dei server. Pertanto, i diversi soggetti che intervengono nell interazione (utente, script, server), svolgono i seguenti ruoli: L utente richiede il documento, lo script lo costruisce istantaneamente, il server lo trasmette.
Gestire l'input di dati da parte dell'utente richiede una tecnica ancora più raffinata: si utilizzano le form, come mezzo per consentire agli utenti Web di inviare informazioni a un server da un programma client (ovvero dal loro browser). L informazione può essere memorizzata per un successivo esame, o manipolata immediatamente per generare un nuovo documento in base ai dati inseriti nella form, dopodiché si invia il documento al browser.
Gli script che generano codice HTML dinamico, senza input di dati da parte dell'utente, sono semplicissimi. Il codice HTML è un testo ASCII, che non proviene necessariamente da un file di testo ma può derivare, ad esempio da istruzioni come: printf in C, print in Perl, writeln in Pascal il comando echo di Unix.
GLI SCRIPT CGI Per scrivere script si può utilizzare un linguaggio di programmazione adeguato come ad esempio C e Perl. Per mezzo degli script un utente può inviare dati in risposta alle richieste del server. Come accade in quasi tutti i colloqui che avvengono tramite un collegamento Internet, è richiesto un protocollo per garantire che i due capi del collegamento possano interagire.
Il protocollo che regola la trasmissione di dati fra un client ed un server attraverso uno script è CGI (Common Gateway Interface, ovvero "Interfaccia gateway comune"). Un programma che opera secondo i dettami del protocollo CGI è detto script CGI.
E stato necessario creare il protocollo CGI perché il protocollo Web http standard non era stato concepito come una via a doppio senso. Web era in origine una struttura di documenti ipertestuali passivi, e per rendere attiva tale struttura occorrevano meccanismi supplementari. Si può dunque considerare CGI come un'estensione del protocollo HTTP, che fornisce i meccanismi inizialmente mancanti a tale protocollo.
Il protocollo CGI specifica varie cose: settaggio di determinate variabili di ambiente del server, numerosi tag HTML e relativi parametri, che definiscono controlli e campi da inserire nei documenti Web, la natura dei dati che fluiscono dal browser al server, e da questi allo script stesso.
E importante capire che CGI non è un linguaggio, ma un semplice protocollo, ovvero una specificazione del modo in cui avviene l'interazione fra client e server. In questo, non è sostanzialmente diverso dai protocolli di Internet.
L implementazione di un documento HTML interattivo su un server Web è un processo che avviene in due fasi. Dapprima si prepara il documento HTML per mezzo di opportuni tag HTML, i quali definiscono l'area destinata a costituire una form nel documento, la natura dei controlli ivi contenuti, il nome e la collocazione dello script CGI con cui la form comunica. Scrivere una form è molto facile e (forse) anche divertente.
Come sempre, quando si lavora con HTML, tutto deve essere fatto con un semplice editor di testi ASCII. La seconda fase consiste nello scrivere il programma vero e proprio (lo script CGI) che elabora i dati raccolti dalla form e passati al server. Come si è detto, è possibile scriverlo in un qualunque linguaggio di programmazione che gestisca dispositívi di input standard, dispositivi di output standard e le variabili d'ambiente.
Scrivere uno script CGI è molto più complesso che scrivere codice HTML. Il nome dello script CGI associato a un documento HTML va inserito nel documento stesso, utilizzando un apposito comando, dopodiché sia il documento HTML sia lo script CGI vanno collocati dove il server può trovarli. Il server fa il resto.
Quando un utente compila la form e la invia, il browser la trasmette al server, il quale esegue lo script CGI associato. Quando i dati iniziano ad arrivare sulla connessione Internet, il server devia il flusso di dati CGI sul dispositivo di input standard, attraverso il quale lo script CGI lo riceve, lo analizza, e compie le operazioni necessarie a elaborarlo.
Il server reindirizza il flusso di dati diretto al dispositivo di output standard, rimandandolo sulla connessione Internet.
Il server reindirizza il flusso di dati diretto al dispositivo di output standard, rimandandolo sulla connessione Internet.
DISEGNO DI UNA FORM SEMPLICE Per predisporre il documento dinamico HTML si utilizza la coppia di tag <FORM>... </FORM> attraverso la quale si designa una sezione del documento come form interattiva. La form consiste di campi da compilare: in particolare, ve ne può essere uno solo o numerosi, come ad esempio, il modulo per la dichiarazione dei redditi.
E possibile creare all interno della form pulsanti, caselle per l'inserimento di testo, caselle di controllo, pulsanti di opzione, caselle di dati a scorrimento, e i pulsanti speciali predefiniti (submit e reset). Possono anche essere create mappe di immagini, costituite da immagini suddivise in porzioni sulle quali l'utente può fare clic per selezionare diverse opzioni, e che restituiscono, ad esempio, le coordinate di un punto in cui l'utente ha fatto clic con il mouse.
Inoltre, in una form si possono utilizzare quasi tutti gli elementi del linguaggio HTML, compresi titoli di sezione, filetti e stili. La coppia di tag <FORM>...</FORM> deve racchiudere tutti gli elementi interattivi del modulo, compresi pulsanti, caselle e cosi via. La stesura di una form è la prima fase per questo tipo di applicazione.
La seconda fase consiste nello scrivere il programma vero e proprio (lo script CGI) che elabora i dati restituiti al server dalla form.
Il tag < INPUT> Una istruzione fondamentale per le form è il tag <INPUT> con il quale si definiscono caselle di testo, caselle di controllo e pulsanti di opzione. Diversi attributi consentono di controllare: il tipo di dati che l'elemento accetta; lo stato normale dell'elemento, ad esempio "attivato" per pulsanti di opzione e caselle di controllo, o il testo inserito automaticamente nelle caselle di testo.
la dimensione delle caselle di testo e la lunghezza massima del testo inscrivibile. Saranno esaminati due esempi: una form per l'inserimento di tesi proposte da parte dei docenti e una form per la prenotazione degli appelli di esame da parte degli studenti. Al modulo per l'inserimento tesi si accede da una pagina HTML con un'ancora posta sul titolo del modulo.
Modulo di inserimento delle tesi da parte di docenti e ricercatori Il programma associato alla form per l'inserimento delle tesi produce due risultati quando attivato da un utente autorizzato: una risposta sul video per l'utente che può così controllare i dati immessi l'aggiunta di una parte di testo su un file sequenziale consultabile dagli studenti che contiene l'elenco delle tesi proposte.
La nostra form contiene: caselle in cui inserire testo, alcune caselle di controllo per selezionare un pulsante Submit per inviare tutto al server per l'elaborazione, un pulsante Reset, nel caso si desideri ricominciare da capo.
Nell esempio devono essere eseguite varie funzionalità, quali: il controllo della parola d'ordine, la raccolta dei dati inseriti nel modulo e la loro immissione nella lista delle tesi. Per eseguire queste operazioni è stato scritto un apposito programma nel linguaggio C che viene chiamato ogni volta che un utente riempie il modulo.
Quindi, quando i dati iniziano ad arrivare sulla connessione Internet, il server invia il flusso di dati CGI sul dispositivo di input standard, attraverso il quale lo script CGI lo riceve, lo analizza, e compie le operazioni necessarie ad elaborarlo. Lo script CGI prepara un documento HTML dinamico "ad hoc" da inviare all'utente (per la verifica) mediante il server WWW, trasmettendo un testo in formato html attraverso il dispositivo di output standard rimandandolo sulla connessione Internet e modificando il file html.
Titolo della Form <FORM method="get" ACTION= "/cgi-bin/programma"> HR <U>Nome del Docente che propone la tesi:</u><input TYPE="text NAME="nome" size=20, maxlength=40> <U>Password:</U><INPUT TYPE="password"NAME="pass" size=20, maxlength=40> <U>Titolo della tesi:</u><textarea NAME="tit" ROWS=2 COLS=40></TEXTAREA> <H3>Sintetica descrizione della tesi:</h3><textarea NAME="des" ROWS=8 COLS=60></TEXTAREA>
Per ora ci si concentra sull'elemento <INPUT> e sul suo funzionamento. L attributo NAME, contenuto nel tag <INPUT>, è fondamentale per la funzionalità del modulo; esso identifica univocamente il contenuto dell'elemento <INPUT> e può essere considerato un nome di variabile. Nell esempio si assegna all elemento <INPUT> il nome nome, ma si tratta di una scelta del tutto arbitraria; qualsiasi altro nome sarebbe andato bene.
L attributo TYPE, che nell esempio, è di tipo text definisce il tipo dei dati che l'utente può inserire mediante il tag <INPUT>. Nell'esempio, consente ad un utente di inserire valori di tipo "text' per le caselle da compilare. Un utente che, nell'inserire un testo, raggiunga il margine destro della casella, può continuare a digitare caratteri e vedere scorrere il testo a sinistra.
GLI ATTRIBUTI SIZE E MAXLENGTH Il tag <INPUT>ha altri attributi: l attributo SIZE fissa la larghezza della casella di testo a esattamente 20 caratteri, l'attributo MAXLENGTH impone un limite alla quantità di testo che si può inserire nella casella ed in questo caso è di 40 caratteri. In pratica l'attributo SIZE modifica la larghezza di una casella di testo; occorre specificare un valore che corrisponde alla larghezza, della casella.
Non esiste un limite massimo per la dimensione, ma si consiglia di non superare 80 caratteri, altrimenti il margine destro della casella di testo supererebbe quello della finestra del browser, con un effetto spiacevole. In ogni caso, l'attributo SIZE determina solo la larghezza fisica della casella di testo, senza imporre limiti al numero di caratteri che l'utente può inserire.
Se la casella è larga soltanto venti caratteri, il testo scorre verso sinistra quando l'utente inserisce il ventunesimo carattere. Se si desidera limitare il numero di caratteri che l'utente può inserire, occorre utilizzare l'attributo MAXLENGTH. Se questo attributo è omesso, non esiste alcun limite.
CASELLE DI CONTROLLO Per aggiungere alla form alcune opzioni di utilità più generale, si inseriscono alcune caselle di controllo affinché l'utente possa scegliere a quale opzione aderire. Nell esempio sono aggiunte alla form caselle di controllo e pulsanti. IL tipo checkbox specificato nel tag <INPUT> permette di aggiungere a una form un numero arbitrario di caselle di controllo. Una casella di controllo è un oggetto con due stati: attivato o meno.
<p>area:<dl><dd><select NAME="area" MULTIPLE SIZE=3><OPTION>INFORMATICA<OPTION>AUTOMATICA <OPTION>ECONOMIA E RICERCA OPERATIVA</SELECT></DL> <h3>selezionare quali esami sono richiesti per l'assegnazione della tesi nell'area INFORMATICA (pigiare con il mouse sui quadratini al lato di ciascun esame) :</h3><ul> <LI>Informatica Teorica <INPUT TYPE="checkbox" NAME="esinf" value="informatica Teorica"><LI>Sistemi Operativi <INPUT TYPE="checkbox" NAME="esinf" value="sistemi Operativi"><LI>Basi di dati <INPUT TYPE="checkbox" NAME="esinf" value="basi di dati"><li>impianti di Elaborazione <INPUT TYPE="checkbox" NAME="esinf" value="impianti di Elaborazione"><LI>Intelligenza Artificiale <INPUT TYPE="checkbox" NAME="esinf" value="intelligenza Artificiale"><LI>Sistemi Informativi <INPUT TYPE="checkbox" NAME="esinf" value="sistemi Informativi"></UL>
Come per le caselle di testo descritte in precedenza, ogni casella riceve un nome che la individua univocamente al momento in cui la form viene elaborata. Lo stato normale di una casella è "non attivata", tuttavia per mezzo dell'attributo CHECKED si può impostare lo stato "attivata".
Il tipo submit che nel nostro esempio ha valore Inserisci tesi crea un pulsante speciale, utilizzato per inviare una form compilata al luogo in cui deve essere elaborata. Quando l'utente fa clic sul pulsante Submit il browser Web invia i dati provenienti da tutti gli elementi <INPUT> al server.
<input TYPE="submit" value="inserisci tesi"> <p> <input type="reset" value="cancella"> <p>
L utente può riflettere un poco, attivare o disattivare le caselle ed eventualmente modificare il testo. Se è presente il pulsante submit, basta premerlo per segnalare il completamento della form, senza alcuna ambiguità.
Viceversa, il tipo reset che nel nostro caso vale Cancella crea un pulsante che, se l'utente non è soddisfatto per nulla della compilazione della form, può essere pigiato con il risultato di riportare le cose al loro stato iniziale, cioè all istante in cui la form è stata visualizzata per la prima volta, e ricominciare.
Quando si fa clic sul pulsante Reset, ogni cambiamento apportato alla form è cancellato immediatamente. Le caselle di testo sono azzerate, pulsanti e caselle tornano al loro stato normale e si può ricominciare da capo.
LO SCRIPT CGI PER ELABORARE LA FORM Allestita e pronta all'opera la form per l inserimento tesi, occorre pensare al problema di elaborare le informazioni che verranno immesse man mano. A questo punto, esistono due possibilità: si può cercare uno script CGI già fatto che compia esattamente ciò che serve, oppure si può scrivere uno script personalizzato; nel secondo caso, il passo successivo è la scelta di un linguaggio di programmazione con cui scrivere gli script.
Qualunque linguaggio possa accedere al dispositivo di input standard, a quello di output standard e alle variabili d'ambiente è perfettamente adatto allo scopo. Nel nostro esempio si è utilizzato il linguaggio C.
Solitamente non si scrive uno script CGI per utilizzarlo su un PC o su un Macintosh; generalmente un server Web è installato su una macchina Unix, cioe su una Workstation. E meglio dunque utilizzare gli strumenti disponibili sul sistema dei server, C e Perl si trovano su quasi tutti i sistemi server.
POST o GET Uno script CGI può leggere i dati trasmessi da una form secondo due meccanismi generali: il metodo GET e il metodo POST. Se si sceglie il metodo GET, tutti i dati provenienti dalla form vengono inviati allo script sia sulla riga di comando sia in una variabile d'ambiente. Il metodo POST, invece, riceve i dati della form dal dispositivo di input standard (stdin).
<FORM method="get" ACTION= "/cgi-bin/programma"> Il metodo è un attributo del tag form e, se specificato insieme all attributo ACTION, indica dove risiede il programma eseguibile (lo script CGI) associato alla form stessa.
RICEZIONE E PREPARAZIONE DEI DATI E necessario che lo script compia tre operazioni, prima che possa agire sui dati trasmessi dalla form. In primo luogo, lo script deve rintracciare tali dati e depositarli in qualche punto perché vengano analizzati per gli script che si servono del meccanismo GET. A questo scopo si utilizza la variabile d'ambiente QUERY-STRING, impostata dal server quando esegue lo script.
I dati immessi da chi riempie il formulario vengono tutti inseriti, come già detto, in un'unica stringa di caratteri detta query-string ; ogni dato è preceduto da parole che ne costituiscono il titolo e che quindi permettono di riconoscerne il significato; i dati sono separati gli uni dagli altri e dai titoli dai caratteri & e = mentre gli spazi vengono sostituiti nella query-string dal simbolo +.
Inoltre tutta una serie di altri caratteri vengono modificati nella query-string come l'"a capo" che viene sostituito dalla successione %0.
Nel caso del formulario per la proposizione di tesi da parte dei docenti, la query-string è composta da una successione di dati che sono il risultato delle varie parti che l'utente riempie: il nome del docente, la parola d'ordine che se corretta permette l'inserimento dei dati,
una text-area in cui si espone brevemente il contenuto della tesi e che quindi è una successione di parole inframezzate da "a capo", la successione dei titoli degli esami richiesti suddivisi in raggruppamenti disciplinari che risulta dall'utilizzazione dei cosiddetti checkbox cioè quadratini che permettono all'utente "cliccandovi" di aggiungere il nome dell'esame corrispondente nella query-string e così via.
Il programma deve quindi riottenere i singoli dati dalla query-string, utilizzarli ognuno secondo il suo significato e la sua funzione come nel caso della password che deve permettere l'inserimento dei dati e ricostruire i caratteri modificati. Il primo compito viene svolto da un programma che scompone la query-string nelle sue componenti e le raggruppa secondo i titoli.
Il compito della sostituzione è assunto da una serie di procedure che riconoscono e sostituiscono opportunamente i caratteri e le successione di caratteri in modo che appaiano correttamente nella risposta che appare sul video all'utente e nella parte di testo che viene aggiunta all'elenco delle tesi.
Sia con il metodo GET, sia con il metodo POST, i dati sono restituiti sotto forma di una lunga serie di coppie NOME=VALORE, separate l'una dall'altra da un segno &; l'operazione di analisi consiste nel separare le coppie NOME=VALORE.
Talvolta i caratteri di spaziatura vengono convertiti in segni più (+) per evitare incertezze semantiche durante l'analisi. Queste conversioni sono chiamate escape nel gergo di Unix. I dati restituiti sono sottoposti a questa procedura esattamente come i caratteri speciali nelle URL.
L'ultima operazione è dunque la decodifica (unescaping) di NOME e VALORE in ogni coppia NOME=VALORE, vale a dire la conversione dei segni più (+) in spazi e delle coppie esadecimali %xx nei caratteri corrispondenti.
VARIABILI D AMBIENTE UTILIZZATE DAGLI SCRIPT CGI Ricevuti i dati trasmessi dalla form, il server per prima cosa prepara alcune variabili d'ambiente per lo script. Queste variabili costituiscono uno spazio condiviso per tutti i programmi che vengono eseguiti sul server, una sorta di "bacheca pubblica.
Le variabili d ambiente contengono numerose informazioni, tra cui: il nome della macchina remota che sta inviando i dati, il nome, incluso il path (percorso) dello script, quale metodo (GET o POST) il server ha utilizzato per inviare i dati della form allo script.
Le seguenti variabili di ambiente sono utilizzate da molti programmi: REQUEST-METHOD, QUERY-STRING, CONTENT-LENGTH. La variabile d'ambiente REQUEST-METHOD registra il metodo utilizzato dal server per inviare allo script i dati delle form, GET o POST.
Questa informazione consente di determinare come leggere i dati provenienti dalla form nello script. Se il metodo utilizzato è GET, è facilissimo recuperare i dati dalle form: essi vengono registrati nella variabile d'ambiente QUERY-STRING.
Nel metodo POST, il server registra la lunghezza in caratteri dei dati inviati al dispositivo di input standard nella variabile d'ambiente CONTENT- LENGTH, perciò non resta che leggere i dati dal dispositivo di input standard (un carattere alla volta, come richiede il metodo POST), per quanti caratteri indica il valore di CONTENT-LENGTH.
SCRIPT ASSOCIATO ALLA FORM DESCRITTA IN PRECEDENZA SCRITTA NEL LINGUGGIO C #include <stdio.h> #include <stdlib.h> #include <string.h> void conv( char *old, char *new,) { char old[400], new[400]; int i=0, flag=1; while (flag==1) { if (old[i]=='+') new[i]=' '; else new[i]=old[i]; if (old[i++]==null) flag=0; } }
void tronca( char st[], char v[], char w[],) {char st[400], v[400], w[400]; int i=0; int k=0; while ((st[i]!= '&') && (st[i]!= '=')) { v[i]=st[i]; i++;} v[i]=null; while (st[i+k+1]!= NULL) { w[k] = st[i+k+1]; k++;} w[k] =NULL; } void main ( ) { char argc[500], argv[500]; int i, num; char pass[10], nome[40], titolo[200], descri[200], area[200], temp, ftesi[200], test[500], v1[200], v2[200], v3[200], v4[200], v5[200], v6[200], v7[200],
v8[200],v9[100], v10[100], w1[200], w2[200], w3[200], w4[200], w5[200], w6[200], w7[200], w8[200], w9[100], w10[100]; FILE *tesi; strcpy(test, getenv("query_string")); tronca (test, v1, w1); tronca(w1, nome, w2); tronca( w2, v3, w3); tronca(w3, pass, w4); tronca( w4, v5, w5); tronca(w5, titolo, w6); tronca(w6, v7, w7); tronca( w7, descri, w8); tronca( w8, v8, w9); tronca(w9, area, w10); i= strcmp( pass, "inftes.95"); if( i!= 0) { printf("parola d'ordine errata");
exit; } sprintf(ftesi, "/home/mosaic/htdocs/ccl/servizi/tesi.txt") ; tesi=fopen( ftesi, "a"); printf( "Content-type: text/html\n\n"); fprintf(ftesi, "Prof. %s \t titolo: %s \n area della tesi: %s \t descrizione: \n", nome, titolo, area); fprintf(ftesi, "%s \n \n", descri); fprint(ftesi, "-------------------------------------------------------------------\n \n"); printf("prof. %s \t \n titolo: %s area della tesi: %s\n descrizione: \n", nome, titolo, area); printf("%s \n \n", descri); fclose(ftesi); exit; }
exit; } sprintf(ftesi, "/home/mosaic/htdocs/ccl/servizi/tesi.txt") ; tesi=fopen( ftesi, "a"); printf( "Content-type: text/html\n\n"); fprintf(ftesi, "Prof. %s \t titolo: %s \n area della tesi: %s \t descrizione: \n", nome, titolo, area); fprintf(ftesi, "%s \n \n", descri); fprint(ftesi, "-------------------------------------------------------------------\n \n"); printf("prof. %s \t \n titolo: %s area della tesi: %s\n descrizione: \n", nome, titolo, area); printf("%s \n \n", descri); fclose(ftesi); exit; }