BIOINFO3 - Lezione 311 PAGINA HTML Confrontiamo il codice sorgente della pagina restituitaci dal programma con il programma originale Come si può notare,

Presentazione sul tema: "BIOINFO3 - Lezione 311 PAGINA HTML Confrontiamo il codice sorgente della pagina restituitaci dal programma con il programma originale Come si può notare,"— Transcript della presentazione:

1 BIOINFO3 - Lezione 311 PAGINA HTML Confrontiamo il codice sorgente della pagina restituitaci dal programma con il programma originale Come si può notare, tutto ciò che è stampato dal programma pippo.pl (esclusa la prima riga) sullo standard output viene inviato al browser via rete come codice HTML da interpretare. Il browser crea quindi la pagina desiderata!

2 BIOINFO3 - Lezione 312 RICAPITOLANDO La prima istruzione di print sullo STDOUT eseguita dal programma serve a dire al browser che tutto ciò che riceverà successivamente deve essere interpretato come codice HTML print "Content-type:text/html\n\n"; (ricordarsi i due caratteri di a-capo!) tutto ciò che viene stampato successivamente dal programma è quindi trasferito dal server web, attraverso la rete direttamente al browser ed interpretato da questo come codice HTML BROWSER client HTTPD server html cgi-bin programma Output: pagina web Output

3 BIOINFO3 - Lezione 313 PASSAGGIO DI DATI NELLURL Abbiamo già visto come esistano delle variabili di Perl in cui ricevere gli argomenti. Possiamo eseguire il programma via WEB passando degli argomenti subito dopo il nome del programma e il simbolo di ? questi sono ancora resi disponibili al programma nella variabile @ARGV. N.B. Bisogna sostituire gli spazi tra gli argomenti con il carattere + @ARGV=(1,prova) $ARGV[0] 1 $ARGV[1] prova

4 BIOINFO3 - Lezione 314 INVIO DI DATI DA FORM (METODO GET) LURL con i dati già prefissati può essere utilizzato direttamente come link ipertestuale in una pagina WEB. Ora vediamo invece come sono passati al programma i dati inseriti da un utente in una form, utilizzando il metodo GET. Nella form HTML in cui si chiama il programma dovrà essere specificata la clausola method=GET.

5 BIOINFO3 - Lezione 315 FORM Inseriamo i dati richiesti e premiamo il bottone INVIA DATI

6 BIOINFO3 - Lezione 316 METODO GET Con il metodo get il browser crea lURL del programma da eseguire prendendo lURL specificata nellaction della form, aggiungendoci ? e i dati inseriti dallutente nei campi di input della form nel seguente formato. nomecampo 1 =valoreinserito 1 &nomecampo 2 =valoreinserito 2 &…... N.B. Anche i valori dei campi di tipo hidden o password sono passati in questo modo e quindi sono chiaramente visibili, con le ovvie conseguenze!

7 BIOINFO3 - Lezione 317 VARIABILI DAMBIENTE Lo script Perl ha a disposizione molte variabili dambiente che gli forniscono informazioni sulla modalità CGI-BIN, tra cui proprio i dati ricevuti dalla form. Queste variabili si trovano in un array associativo %ENV e sono settate dal web server httpd prima di mandare in esecuzione il programma CGI richiesto, che così le troverà pronte al momento dellinizio della sua esecuzione $ENV{DOCUMENT_ROOT} La root directory del server $ENV{HTTP_HOST} Lhost name del server $ENV{REMOTE_ADDR} Lindirizzo IP del client (il visitatore!) $ENV{QUERY_STRING} I dati passati con il metodo GET $ENV{REQUEST_METHOD} Il metodo:GET o POST ……….

8 BIOINFO3 - Lezione 318 %ENV Con il seguente programma si stampano i valori delle variabili dambiente allinizio dellesecuzione di un CGI Notare il contenuto della variabile di ambiente QUERY_STRING, che trasmette al programma tutto ciò che segue il ? nellURL che attiva il CGI-BIN

9 BIOINFO3 - Lezione 319 RICEZIONE DATI DELLA FORM Questa prima parte del programma serve a creare un array associativo %FORM con i dati ricevuti. Si crea una cella dellarray associativo per ogni campo di input della form. Il nome del campo funge da indice dellarray associativo %FORM, mentre il valore corrispondente è quello inserito dallutente in quel campo di input della form

10 BIOINFO3 - Lezione 3110 RICEZIONE DATI DELLA FORM Abbiamo visto che in $ENV{QUERY_STRING} sono contenuti i dati $ENV{QUERY_STRING}=nome=Nicola&cognome=Cannata Si splitta la stringa sul carattere & inserendo il risultato in @values @values=(nome=Nicola,cognome=Cannata); Ora si esegue un ciclo foreach per ogni elemento di @values. La variabile $e contiene via via il contenuto delle singole celle di @values. $e=$values[0]=nome=Nicola e si splitta la stringa $e sul carattere di = Nel primo ciclo ($nome,$valore)=(nome,Nicola) e si assegna $FORM{$nome}=$valore $FORM{nome}=Nicola Nel secondo ciclo $e=$values[1]=cognome=Cannata ($nome,$valore)=(cognome,Cannata) e si assegna $FORM{$nome}=$valore $FORM{cognome}=Cannata

11 BIOINFO3 - Lezione 3111 ARRAY %FORM Alla fine di questo gruppo di istruzioni il programma cgi-bin ha a disposizione larray associativo %FORM da cui ricavare tutti i dati inseriti dallutente nella form (e ovviamente anche i campi hidden). Le chiavi dellarray associativo sono i nomi dei campi di input. Nel programma benvenuto.pl ora si possono usare tranquillamente tali valori ad esempio per stamparli

12 BIOINFO3 - Lezione 3112 IL METODO POST Abbiamo finora visto la trasmissione di dati ad un programma cgi-bin: direttamente sullURL del programma dopo il ?. Gli argomenti sono ricevuti in @ARGV da una form con il metodo GET. I dati sono aggiunti sempre allURL dopo il ? e vengono ricevuti come stringa da splittare (prima sul carattere di & e poi sul carattere di =) nella variabile di ambiente $ENV{QUERY_STRING}. In entrambi i casi i dati vanno a fare parte integrante dellURL. Con il metodo POST i dati non sono invece visibili nellURL (e ciò può essere utile per campi hidden o di tipo password). Il programma cgi riceverà i dati direttamente sul suo standard input (STDIN) ancora nel formato nomecampo 1 =valoreinserito 1 &nomecampo 2 =valoreinserito 2 &…... programma STDOUT STDIN Dati

13 BIOINFO3 - Lezione 3113 CODIFICA DEI DATI I dati che il programma riceve sono preventivamente sottoposti ad una codifica per poter essere trasmessi in rete. Sicuramente avrete già visto che tutti gli spazi in un URL sono trasformati in +. Altri caratteri sono trasformati nella forma %xx dove xx è il codice ASCII del carattere (in esadecimale). Se a qualcuno interessassero tutti i codici ASCII gli consiglio di visitare il sito www.asciitable.com. Ad esempio: (space) + \t (tab) %09(9 decimale) \n (new-line) %0A(10 decimale) / %2F ~ %7E & %26(38 decimale) @ %40(64 decimale) % %25(37 decimale) N.B. Per quanto riguarda il carattere & non vengono codificati quelli che fungono da separatore tra le coppie nomecampo=valoreinserito ma solo eventuali altri contenuti nel nome del campo o nei valori inseriti

14 BIOINFO3 - Lezione 3114 LA FORM Proviamo a scrivere una form che trasmetta al programma cgi i dati col metodo POST E proviamo ad inserire dei dati contenenti spazi e caratteri speciali

15 BIOINFO3 - Lezione 3115 IL CGI-BIN Scriviamo il programma provapost.pl che deve ricevere i dati

16 BIOINFO3 - Lezione 3116 IL RISULTATO Eseguiamo il programma premendo il bottone INVIA DATI

17 BIOINFO3 - Lezione 3117 COSA E SUCCESSO? La prima istruzione print "Content-type:text/html\n\n"; sappiamo ormai benissimo che serve a segnalare al browser la natura dei dati che sta per ricevere! Listruzione read(STDIN,$buffer,$ENV{CONTENT_LENGTH}); non labbiamo invece mai incontrata. Essa legge dal file associato alla handle passata come primo parametro (quindi dallo standard input STDIN) un numero di caratteri corrispondente a quanto specificato dal terzo parametro (la variabile dambiente $ENV{CONTENT_LENGTH} settata dal server, che in questo caso vale 47 ) assegnando i caratteri prelevati alla variabile secondo parametro (e quindi a $buffer) Nello STDIN del programma cgi provapost.pl quindi erano stati scritti 47 caratteri dal server e precisamente due coppie nome=valore separate da &: nome=Qui+Quo+%26+Qua & email=qqq%40paperopoli.com

18 BIOINFO3 - Lezione 3118 ARRAY %FORM Le istruzioni successive servono ancora alla creazione di un array associativo %FORM destinato a contenere i dati, in modo analogo a quanto visto per il metodo GET @pairs=split(/&/,$buffer); spezza la stringa dei dati (in $buffer) sul carattere & inserendo ciascuna coppia nome=valore nellarray @pairs Nel nostro esempio avremo: @pairs=( nome=Qui+Quo+%26+Qua, email=qqq%40paperopoli.com ) ovvero $pairs[0]= nome=Qui+Quo+%26+Qua $pairs[1]= email=qqq%40paperopoli.com SI effettua quindi un ciclo foreach su ciascun elemento (chiamandolo $pair) dellarray @pairs ed effettuando un secondo split sul carattere = ($nome,$valore)=split(/=/,$pair);

19 BIOINFO3 - Lezione 3119 ARRAY %FORM Nel primo ciclo: $nome= nome $valore= Qui+Quo+%26+Qua Nel secondo ciclo: $nome= email $valore= qqq%40paperopoli.com Prima di effettuare lassegnamento allarray associativo si devono decodificare i caratteri speciali $valore=~ tr/+/ /; (è equivalente a $valore=~ s/+/ /g; ovvero trasforma ogni carattere + contenuto in $valore in uno spazio (ad esempio Qui+Quo+%26+Qua diventa Qui Quo %26 Qua ) $valore=~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg; è un po piu complesso ma permette di trasformare ogni stringa %xx nel carattere avente il codice ASCII xx. Il numero esadecimale dopo il % è catturato nella variabile $1 grazie alle parentesi tonde. La funzione hex restituisce il numero decimale corrispondente e la funzione pack lo trasforma nel carattere con quel codice ASCII decimale. Il parametro e permette di avere delle espressioni nella parte che viene sostituita. Senza la e ogni stringa %xx sarebbe stato sostituita da pack("C",hex($1)) e non dal risultato dellespressione. Senza la g sarebbe stata sostituita solo la prima stringa %xx ma non le successive!

20 BIOINFO3 - Lezione 3120 RICAPITOLANDO Nel nostro caso, nel primo ciclo avremo finalmente ripristinato il dato originale inserito dallutente. $valore= Qui Quo & Qua Al termine di questo gruppo di istruzioni, che vi consiglio di prendere così comè e di inserirlo in tutti i vostri programmi cgi che ricevono dati con il metodo POST da una form, nellarray associativo %FORM avremo le due chiavi nome,email, associate rispettivamente ai valori Qui Quo & Qua e qqq@paperopoli.com $FORM{nome}= Qui Quo & Qua $FORM{email}= qqq@paperopoli.com E tali valori potranno essere usati a piacere dal programma, ad esempio per inserirli in un database MySQL o per fare delle ricerche.

21 BIOINFO3 - Lezione 3121 ESERCIZIO Ora vi invito a scrivere un programma perl, attivato via cgi da una form con il metodo POST, che: stampi in una tabella (con bordo) a due colonne: Nella prima riga le intestazioni della tabella: nome nella prima colonna e valore nella seconda. Nelle righe successive: nella prima colonna il nome del campo della form e nella seconda il valore inserito dallutente. Se lutente non avesse inserito alcun valore inserire uno spazio HTML ( ) per non rovinare esteticamente la tabella. I nomi dei campi devono apparire in ordine alfabetico

22 BIOINFO3 - Lezione 3122 ESERCIZIO Si richiami il programma con la form generata dal seguente codice HTML

23 BIOINFO3 - Lezione 3123 ESERCIZIO Ecco la form

24 BIOINFO3 - Lezione 3124 ESERCIZIO Ed ecco come non deve rispondere il programma cgi-bin, poiché lascia dei buchi nella tabella in corrispondenza ai valori non inseriti nella form

25 BIOINFO3 - Lezione 3125 ESERCIZIO Ecco invece la versione corretta della tabella, senza gli antiestetici buchi!

26 BIOINFO3 - Lezione 3126 ESERCIZIO Ecco infine il codice del programma!

27 BIOINFO3 - Lezione 3127 IL MODULO CGI Ora esiste anche un modulo del Perl (si tratta di oggetti preconfezionati da usare a scatola chiusa; ne vedremo un altro per gestire linterazione con MySQL) che permette di estrarre in modo molto semplice i parametri ricevuti da una form. Una volta che avete capito come funziona il passaggio dei parametri, potete usare semplicemente questo modulo (sia per GET che per POST)!!! # richiesta di usare il modulo CGI # $i è un nuovo oggetto CGI } # ricavo i parametri della form # paper era un campo di tipo FILE # il file UPLOADATO viene salvato in una stringa

28 BIOINFO3 - Lezione 3128 ESERCIZIO Esercizio 16. Progettare una form HTML con tre campi di input (dimensione 10 caratteri, massimo numero di caratteri letto 10) organizzati in una tabella senza bordo di 2 colonne e 3 righe: login (di tipo text), password e re-type password (di tipo password). Premendo il bottone REGISTRATI ORA viene attivato un programma iscrivi.pl a cui sono trasmessi i dati della form con il metodo POST. Il programma deve confrontare i due campi di password e se uguali restituire una pagina HTML con titolo REGISTRAZIONE EFFETTUATA e con una scritta (ad esempio in ) Sono stati registrati i dati dellutente login-dellutente. Altrimenti (se le due password sono diverse) restituire una pagina HTML con titolo REGISTRAZIONE FALLITA e con la scritta ATTENZIONE! La password digitata la seconda volta non coincide con la prima. Premere BACK e reinserire i dati

29 BIOINFO3 - Lezione 3129 RIEPILOGO Installazione e requisiti dei programmi CGI-BIN Attivazione e passaggio di argomenti sullURL Attivazione da una form: metodo GET Attivazione da una form: metodo POST Come ricevere i dati nei tre casi Il modulo CGI