Interazione client-server (1) per far interagire il client con il server e necessario usare programmi residenti su server (p.e. script CGI - Common Gateway Interface) Fondamenti di Informatica II 29. Elementi di programmazione web e linguaggi di script (2) sul lato client occorre usare una form HTML sul lato server è necessario disporre di un CGI residente occorre installare sul proprio server un web server (p.e. APACHE) Corso di Laurea in Ingegneria Informatica A.A. 2008-2009 2 Semestre Corso (A-M) Prof. Giovanni Pascoschi 2 Interazione client-server (2) Componenti di una Form per far interagire il client con il server occorre seguire due fasi: impostazione dei tag necessari per la creazione del form, dei suoi campi e del tasto di invio; creazione di uno script CGI su server (o richiamo di uno script già impostato). i form vengono utilizzati per ottenere risposte dagli utenti attraverso l'uso di una interfaccia grafica che consiste in caselle di testo, pulsanti, caselle di controllo e altri elementi come illustrato nella prossima slide Componenti di input Componenti di invio 3 4
Sintassi Form Form - input un form è racchiuso tra i tag <form> e ed è strutturato come segue: <form>... all interno dei tag <form> i principali tag sono: <input> <textarea> <action> <method> L elemento base per la definizione degli elementi di una form è <input>, che consente di creare vari tipi di campi, detti controlli, per la immissione dei dati <input> possiede numerosi attributi: 1. name: specifica il nome simbolico utilizzato nei trasferimenti e nella identificazione dell output da parte dell elemento del form; è necessario per tutti i tipi di controllo tranne i pulsanti reset e submit; 2. maxlength: imposta il numero massimo di caratteri che possono essere digitati dall utente in un campo di immissione (default = illimitato) 3. size: imposta la lunghezza del campo visualizzato sullo schermo. Se è inferiore a maxlength, si ha un campo a scorrimento. 5 6 Form input Form esempio 4. type: definisce il tipo di campo o controllo da visualizzare, e può assumere 10 valori diversi: 4.1. text crea una casella di testo di una sola riga dove viene immessa p.e. una stringa. È usato soprattutto per informazioni non predefinite che vengono inserite in input dall utente. Viene seguito dagli attributi size e maxlenght 4.2. password crea una casella di password, nella quale il testo immesso non viene visualizzato in chiaro, ma come punti o asterischi 4.3. file crea una casella di file, utilizzata per sfogliare i file presenti nel sistema, per selezionarne uno <html> <head></head> <body> <form> Scrivi il tuo nome <input name= nome type= text size= 20 maxlength= 25 > <br> Scrivi la password <input name= pwd type= password size= 15 maxlength= 10 > <br>scrivi la tua email <input name= elmail type= text size= 20 maxlength= 40 > <br><br> </body> </html> 7 8
Form esempio Form input 4.4. checkbox: crea delle caselle di controllo, utilizzate per selezionare uno o più dati che non si escludono a vicenda; esempio: Le caselle possono avere lo stesso nome e valori diversi; in tale caso quando l utente seleziona una determinata casella, cliccandoci sopra, associa al nome quel determinato valore. L attributo checked imposta su attivato il valore iniziale di una casella (che in sua assenza è disattivato ). 9 10 Form esempio Form input <html> <head></head> <body> <h3>caselle di controllo</h3> <form> <input name= col1" type="checkbox" value= red"> Rosso <br> <input name= col2" type="checkbox" value= yellow"> Giallo<br> <input name= col3" type="checkbox" value= green"> Verde<br><br> </body> </html> 4.5. radio: crea dei pulsanti radio, utilizzati per selezionare un dato tra più scelte fornite in alternativa. Anche per i pulsanti radio si può usare l attributo checked. A differenza delle caselle di controllo, tutti i pulsanti radio di un modulo devono avere lo stesso name per rendere la scelta esclusiva. 11 12
Form esempio Form input <html> <head></head> <body> <form> <h3>box radio</h3> <input name checked= modo type= radio value= u"> urgente<br> <input name= modo" type="radio" value= n"> normale<br><br> </body> </html> 4.6. hidden: crea dei controlli che non vengono visualizzati, ma i cui valori vengono inviati insieme al form; sono usati di solito per memorizzare informazioni durante gli scambi client/server che altrimenti si potrebbero perdere; 4.7. image: inserisce una immagine, cliccando sulla quale il form viene inviato e le coordinate x, y del punto su cui si è cliccato vengono trasmesse attraverso coppie nome/valore. 4.8. reset: riporta il form ai suoi valori iniziali; 4.9. submit: invia il form; 4.10. button: crea un pulsante generico. 13 14 Form input Form input 5. value: ogni controllo ha un valore iniziale e uno corrente, costituiti entrambi da stringhe di caratteri. L attributo value specifica il valore iniziale e lo visualizza all interno del campo. Ad esempio, il tag: <input name= nome type= text maxlength= 40 size= 30 value= inserisci nome > produce la seguente visualizzazione: inserisci nome 6. src: definisce l immagine da inserire (se si è usato type= image ) 7. align: definisce la relazione tra immagine e testo (se si è usato type= image p.e. top, middle, bottom) Il valore corrente è impostato inizialmente al valore iniziale; quindi può essere modificato dall interazione dell utente o da uno script. Il valore iniziale di un form non cambia, e quando il form viene reimpostato il valore corrente di ogni controllo viene reimpostato al suo valore iniziale. 15 16
Form textarea Form esempio (15) per creare un area di testo che raccoglie un testo di più righe, di solito un commento immesso dall utente, si usa il tag <textarea> con gli attributi: name: il nome logico associato al testo di ritorno; cols: il numero di colonne visualizzate (ossia la larghezza del riquadro); rows: il numero di righe visualizzate (ossia l altezza del riquadro); se si scrivono più righe di quelle impostate con rows, <textarea> produce automaticamente la barra di scorrimento verticale che consente di far scorrere il testo <html> <head> </head> <body> <h2>area di testo</h2> <form> <textarea name= areatesto cols= 20 rows= 4 > </textarea> </body> </html> 17 18 Form input Form esempio per gestire l invio dei dati ogni form deve contenere gli attributi: submit: crea un bottone che invia i dati del modulo all URL indicato come valore dell attributo action (server Web o indirizzo di posta elettronica); reset: crea un bottone che reimposta il modulo, riscrivendo in ogni casella i valori iniziali. N.B.: All interno dei bottoni submit e reset si può scrivere una dicitura diversa da quella preimpostata, assegnandola come valore all attributo value <html> <head></head> <body> <h3>bottoni di invio e reset</h3> <form> <p>bottone di invio : <input type="submit" value=" Invia "> <p>bottone di reset : <input type="reset" value=" Annulla"> </body> </html> 19 20
Invio dei form Form - action per inviare i dati inseriti nella form, esistono altre tre attributi: action enctype method l attributo action determina il tipo di azione che sarà compiuto sulle informazioni immesse nel modulo: i dati vengono inviati a un indirizzo di posta elettronica formattati come solo testo, impostando l attributo enctype al valore text/plain: <form action= mailto:info@primeeng.it > <form enctype= text/plain > in caso contrario i dati sono inviati come allegato l indirizzo di posta elettronica che deve ricevere le informazioni del modulo l indirizzo del programma eseguibile o dello script che gestirà i dati contenuti nei campi della form 21 22 Form - action Form - method Se invece si vuole che i dati del modulo siano elaborati dallo script nome_script.cgi memorizzato nella directory cgi-bin del sito di indirizzo http://www.primeeng.it, si deve scrivere: <form action="http://www.primeeng.it/cgi-bin/nome_script.cgi > N.B.: L attributo action non è obbligatorio, e in sua assenza viene utilizzato l URL della pagina contenente il form l attributo method specifica la modalità di gestione dei dati raccolti dal programma gateway. Sono possibili due valori: get post il valore get va usato nei form che non effettuano cambiamenti di stato nell ipertesto, ma per esempio si limitano a eseguire una ricerca in un database i form che utilizzano il valore get vengono gestiti facendo seguire l URL da un punto interrogativo?, seguito a sua volta dai dati dell applicazione nella forma, facendo comparire in chiaro i dati trasmessi, p.e.: http://www.sito.it/cgi-bin/querystring.cgi?name=mario&eta=24 Se method è impostato a get i dati vengono spediti al server e separati in due variabili. Per questo metodo il numero massimo di caratteri contenuti nel form è 255 23 24
Form - method Form esempio completo 1 Il valore post va usato nei form che effettuano cambiamenti nell ipertesto o in un database Se method è impostato a post, i dati vengono ricevuti direttamente dallo script CGI senza un preventivo processo di decodifica. In tal modo lo script può leggere una quantità illimitata di caratteri (e non vengono inviati in chiaro sull url adatto per inviare password) Questi ultimi sono gestiti da variabili che vengono specificate da un insieme di campi e nomi di variabili accoppiati. Il nome della variabile viene fornito nel corpo del form <html> <head></head> <body> <form method= post action=mailto:info@primeeng.it enctype= text/plain > Scrivi il tuo cognome <input name= cnome type= text size= 20 maxlength= 30 > <br>scrivi la password <input name= cpwd type= password size= 10 maxlength= 10 > <br><br> <input type= submit value=" Invia "> <input type= reset value= Annulla > </body> </html> 25 26 Form esempio completo 1 Form esempio completo 2 <html> <body> <form action=mailto:info@primeeng.it method="post enctype="text/plain"> <h3>questo form invia una e-mail a Giovanni Pascoschi</h3> Cognome:<br> <input type="text" name="cognome" value="inserisci cognome" size="20"> <br> Mail:<br> <input type="text" name="mail" value="inserisci mail" size="20"> <br> Commento: <br> <input type="text" name="commento" value="inserisci commento" size="40"> <br><br> <input type="submit" value="invia"> <input type="reset" value="annulla"> </body> </html> 27 28
Form esempio completo 2 Form get/post Metodo get Metodo post Indicato per piccole quantità di dati (max 255 char) Indicato per grandi quantità di dati Solo parametri testuali Dati in qualsiasi formato (testi, immagini, video) In risposta ad una form e anche in richiamo da un URL con parametri in chiaro all interno di una pagina HTML Solo in risposta ad una form 29 30 Form get/post Pagine HTML dinamiche la pressione del bottone Invio invia effettivamente al programma di posta elettronica preimpostato le seguenti coppie nome/valore: cognome=tuocognome mail=tuamail commento=tuocommento una volta che il server riceve i dati e li elabora, le risposte inviate al client sono (parzialmente o totalmente) create on-the-fly (al volo) il contenuto delle pagine può variare di volta in volta in base a parametri diversi (selezioni del client, ora del giorno, stato del sistema). Ad esempio i motori di ricerca rispondono alle interrogazioni con delle pagine html contenenti link pagine create dinamicamente per fare cio è necessario che il web server utilizzi i seguenti strumenti: CGI, Servlet chiamata di programmi esterni ASP, JSP, PHP codice direttamente dentro le pagine html ed interpretato dal server (il client è all oscuro di questo codice) 31 32
ASP (Active Server Pages) JSP (Java Server Pages) E uno standard Microsoft pagine che hanno l estensione.asp utilizzano ActiveX scripting (generalmente codice VBscript o JavaScript) Esempio: <HTML><HEAD></HEAD> <BODY> <% For i = 3 To 5 %> <FONT SIZE <% = i %> > Informatica<BR> <% Next %> </BODY> </HTML> Informatica Informatica Informatica Standard della Sun (in risposta alla Microsoft) pagine che hanno l estensione.jsp utilizzano codice Java incorporato nel codice HTTP Esempio: <% for(int i=1; i<3; i++) { %> Il numero e <%= i %> <BR> <% } %> Il numero e 1 Il numero e 2 Il numero e 3 33 34 PHP (PHP Hypertext Preprocessor)) Richiesta di un documento.html Creato da un privato (Rasmus Lerdorf) nel 1994 distribuito con diversi Web servers (per es. Apache) utilizza una sintassi simile al C 1 index.html Esempio: <?php $a = 1; Function incrementa ($par) { return $par + 1; } $a = incrementa($a); echo( Il numero e ); echo ($a);?> Il numero e 2 Client 2 1 2 HTTP Server GET /index.html HTTP/1.0 Server Il server risponde inviando il contenuto del file index.html 35 36
Esecuzione di un CGI Esecuzione di un CGI 1. il server1 riceve la richiesta GET /form.html HTTP/1.0 1 2 form.html HTTP Server Server1 2. il client riceve la risposta dal server1 del tipo... <FORM METHOD=GET POST ACTION= http://server2/cgibin/program>... 3. il server2 riceve una richiesta del tipo : GET /cgibin/program?par1+par2 HTTP/1.0 Client 3 CGI Program il server riconosce una chiamata ad un CGI dal fatto che la risorsa richiesta si trova in una directory particolare (es: http://./cgi-bin/.) 4 HTTP Server Server2 4. il server2 risponde con la pagina html dinamica N.B.: I due server possono anche coincidere 37 38 Input e output del CGI program Interazione webserver-cgi L input di un CGI è una sequenza di valori o di coppie nome=valore I dati vengono mandati al server tramite pacchetti GET o POST del protocollo http un pacchetto GET viene inviato quando: l utente specifica l URL di un CGI l utente clicca un link all URL di un CGI invio dati da una FORM con METHOD=GET esistono tre modi per passare i parametri dal server CGI: come argomenti della linea di comando come variabili di ambiente come standard input di ritorno il CGI invia la risposta server sempre su standard output un pacchetto POST viene inviato quando: Invio dati da una FORM con METHOD=POST 39 40
Passaggio di parametri (client server) Passaggio sulla linea di comando chiamata diretta ad URL (può contenere o meno coppie nome = valore ) invio di una form (contiene coppie nome=valore ) non contiene = GET contiene = POST LINEA DI COMANDO VARIABILI AMBIENTE STANDARD INPUT il client invia una richiesta http: GET /cgi-bin/myprog?val1+val2 HTTP/1.0 (non c è il simbolo =) il server esegue: myprog val1 val2 nel codice del programma myprog.c i parametri potranno essere recuperati in questo modo: int main(int argc, char** argv) { argv[1]; /* contiene val1 */ argv[2]; /* contiene val2 */ } 41 42 Passaggio con variabile di ambiente Passaggio per standard input il client invia una richiesta http: GET /cgi-bin/myprog?nome1=val1&nome2=val2 HTTP/1.0 (c è il simbolo =) il server esegue myprog ma prima mette la stringa nome1=val1&nome2=val2 nella variabile di ambiente QUERY_STRING nel codice del programma myprog.c ci saranno istruzioni come: char* str = getenv("query_string"); il programmatore deve poi interpretare la stringa str il client invia una richiesta http: POST /cgi-bin/myprog HTTP/1.0 (una linea vuota) nome1=val1&nome2=val2 il server passa i parametri a myprog dallo standard input nel codice del programma myprog.c ci saranno istruzioni come: cin>>stringa; il programmatore deve poi interpretare la stringa (parsing) 43 44
Ritorno informazioni (server client) Considerazioni finali sui CGI Il ritorno delle informazioni dal server gateway CGI al client è sempre fatto tramite standard output se il nome del gateway program inizia per nph (non parsed header) Il server manda l output del gateway program al client così com è pagina non html in caso contrario il server premette l header del pacchetto http e il client aggiunge Content-type: type/subtype + (una riga vuota) + il resto del pacchetto http pagina html è possibile scrivere un CGI in un qualsiasi linguaggio (es. C, PERL, JAVA, VisualBasic) il.exe deve essere poi rinominato in.cgi ogni consultazione di un CGI prevede il lancio di un nuovo processo sul server (questo può essere oneroso per il server) c è un potenziale pericolo per la sicurezza dovuto al fatto che l applicazione CGI viene lanciata dal processo server (con i privilegi di quest ultimo) è uno standard de facto. Un tentativo di standardizzazione (Common Gateway Interface RFC Project) può essere reperito qui: http://web.golux.com/coar/cgi/ Reference: http://hoohoo.ncsa.illinois.edu/cgi/interface.html Versione 1.2 in progress : http://www.w3.org/cgi/ 45 46 Esempio di portale interattivo (travel.htm) Esempio di portale interattivo (travel.htm) 47 l esempio chiede all utente username e password e visualizza una serie di offerte settimanali di viaggi in base alle informazioni ricevute (se la password è corretta) 48 <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <!-- Bug2Bug Travel Homepage Deitel&Deitel Programm. Avanzata--> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>bug2bug Travel</title> </head> <body> <h1>welcome to Bug2Bug Travel</h1> <form method = "post" action = "/cgi-bin/portal.cgi"> <p>please enter your name and password:</p> <input type = "text" name = "namebox" /> <input type = "password" name = "passwordbox" /> <p>password is not encrypted</p> <input type = "submit" name = "button" value = Invia query /> </body> </html>
Esempio di portale interattivo (travel.htm) Esempio di portale interattivo (portal.cpp con metodo post) // Fig. 19.14: portal.cpp // Handles entry to Bug2Bug Travel. #include <iostream> #include <string> #include <cstdlib> using namespace std; int main( ) { char poststring[ 1024 ] = ""; string datastring = ""; string namestring = ""; string passwordstring = ""; int contentlength = 0; /* stringa inviata con POST del tipo : POST /cgi-bin/myprog HTTP/1.0 (una linea vuota) namebox=val1&passwordbox=val2 */ 49 50 Esempio di portale interattivo (travel.cpp con metodo post) Esempio di portale interattivo (travel.cpp con metodo get) // data was posted if ( getenv( "CONTENT_LENGTH" ) ) contentlength = atoi( getenv( "CONTENT_LENGTH" ) ); //lunghezza stringa inviata cin.read( poststring, contentlength ); datastring = poststring; // search string for input data int namelocation = datastring.find( "namebox=" ) + 8; //posizione inizio stringa name int endnamelocation = datastring.find( "&" ); // posizione fine stringa name int password = datastring.find( "passwordbox=" ) + 12; //pos. inizio stringa pwd int endpassword = datastring.find( "&button" ); //pos. fine stringa pwd // get values for name and password namestring = datastring.substr( namelocation, endnamelocation - namelocation ); passwordstring = datastring.substr( password, endpassword - password ); // data was posted if ( getenv( QUERY_STRING" ) ) query = getenv( QUERY_STRING" ) ); datastring = query; //dichiarare query // search string for input data int namelocation = datastring.find( "namebox=" ) + 8; int endnamelocation = datastring.find( "&" ); int password = datastring.find( "passwordbox=" ) + 12; int endpassword = datastring.find( "&button" ); // get values for name and password namestring = datastring.substr( namelocation, endnamelocation - namelocation ); passwordstring = datastring.substr( password, endpassword - password ); 51 52
Esempio di portale interattivo (travel.cpp) Esempio di portale interattivo (travel.cpp con metodo post) cout << "Content-Type: text/html\n\n"; // output HTTP header // output XML declaration and DOCTYPE cout << "<?xml version = \"1.0\"?>" << "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" " << "\"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd\">"; // output html element and some of its contents cout << "<html xmlns = \"http://www.w3.org/1999/xhtml\">" << "<head><title>bug2bug Travel</title></head><body>"; if ( passwordstring == "coast2coast" ) // password is correct cout << "<hr /><p>current member special: " << "Seattle to Tokyo ($400)</p>"; else // password was incorrect cout << "<p>sorry. You have entered an incorrect password</p>"; cout << "</body></html>"; return 0; } // end main // output specials cout << "<h1>welcome " << namestring << "!</h1>" << "<p>here are our weekly specials:</p>" << "<ul><li>boston to Taiwan ($875)</li>" << "<li>san Diego to Hong Kong ($750)</li>" << "<li>chicago to Mexico City ($568)</li></ul>"; 53 54 Esempio di portale interattivo (travel.cpp) Esempio di portale interattivo (travel.cpp) 55 56
Esempio di portale interattivo (travel.cpp) Riepilogo della lezione Elementi di programmazione web e linguaggi di script (2) Form HTML Linguaggi di script Script CGI (metodi linea di comando & get & post) 57 58 Fine della lezione Analisi esercizi studenti analisi esercizi studenti (calcolatrice, segreteria con forms, html) Domande? 59 60
Esercizi Esercizio n.1 : Creare una pagina web e uno script CGI con metodo get, che acquisiti due cateti (interi), dia come ritorno il perimetro e l area del triangolo rettangolo Esercizio n.2 : Creare una pagina web e uno script CGI con metodo post, che acquisite due stringhe, dia come ritorno le due stringhe invertite nella sequenza delle lettere Esercizio n.3 : Creare una pagina web e uno script CGI con metodo linea di comando, che acquisita una città capoluogo di regione italiana, dia come ritorno la regione corrispondente 61