Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gianluca.moro@unibo.it Dipartimento di Elettronica, Informatica e Sistemistica G. Moro - Università di Bologna World Wide Web!! nato al Cern nel 1989!! E' una tecnologia che fornisce accesso e navigazione a documenti collegati fra loro sparsi su milioni di elaboratori!! I documenti formano un ipertesto (hypertext), navigabile in modo non lineare!! I documenti sono detti pagine web, collegati con link (o hyperlink) e possono contenere informazioni multimediali!! Visione del Web come un database interrogabile!! motori di ricerca che indicizzano milioni di pagine WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 2
Il Successo del Web!! architettura di tipo client-server decentralizzata:!! ampia scalabilità adatta ad ambienti di rete!! architettura basata su standard di pubblico dominio:!! uguali possibilità per tutte le piattaforme di calcolo!! protocolli http, ftp, tcp/ip!! linguaggio HTML!! Uniform Resource Locator (URL)!! gestione di testo, immagini, suoni, filmati etc:!! grande interesse da parte di tutti gli utenti. WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 3 Richiamiamo alcuni concetti: URL!! Standard per referenziare qualunque risorsa accessibile nel Web costituito da 3 parti:!! protocollo di accesso!! host che detiene la risorsa!! identità della risorsa!! Esempio:!! http://www.unibo.it:80/index.html!! http protocollo di accesso!! www.unibo.it:80 nome host e relativa porta (80)!! index.html identità della risorsa WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 4
Nomi di dominio top-level WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 5 Protocolli di accesso!! Oltre ad http, i più comuni sono:!! ftp file transfer protocol!! mailto usato per spedire posta!! telnet protocollo di terminale virtuale, per effettuare login remoti!! file accesso a documenti locali!! news protocollo per l'accesso ai gruppi di discussione!! gopher vecchio protocollo per reperimento di informazioni; concettualmente simile al Web, gestisce solo testo WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 6
Il protocollo TCP/IP!! Insieme di protocolli sviluppati da Vincent Cerf e Robert Kahn!! Standard di comunicazione di rete tra host (eterogenei) impiegato dai protocolli precedenti!! Transmission Control Protocol (TCP)!! Controlla l assemblaggio di un messaggio in pacchetti più piccoli prima della trasmissione e li riassembla una volta ricevuti!! Internet Protocol (IP)!! Regole per instradare i pacchetti dalla loro sorgente alla loro destinazione!! Ha rimpiazzato NCP usato in ARPANET WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 7 TCP/IP: Architettura Livello applicazione http, ftp, telnet, smtp!! apertura connessione con l applicazione destinataria!! aggiunta di dati di rete al pacchetto TCP (ogni host ha un indirizzo IP unico)!! trasmissione del pacchetto sulla rete Invio dati Livello trasporto TCP, UDP Livello rete IP Livello fisico Ethernet,X.25,Token Ring Ricezione dati WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 8
Indirizzi IP e nomi di dominio!! Appaiono come una serie di 4 numeri separati da un punto!! Ogni numero varia da 0 a 255!! I primi tre numeri identificano la rete!! es: l indirizzo IP seguente identifica un host!! 137.204.191.1!! corrisponde all host www.ingce.unibo.it!! risoluzione tramite DNS (domain name service)!! pertanto http://137.204.191.1/ è uguale a http://www.ingce.unibo.it/ WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 9 http: protocollo stateless!! ogni singola interazione http fra client e server si svolge secondo il seguente schema:!! apertura di una connessione TCP (livello trasporto)!! invio di una singola richiesta URL da parte del client (livello rete e livello fisico)!! ricezione della risposta del server con i dati di cui alla URL richiesta (livello fisico e livello rete)!! chiusura della connessione TCP (livello trasporto).!! protocollo request-response stateless!! ogni singola interazione è storia a se ed è del tutto indipendente dalle altre WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 10
Esempio di richiesta http!! esempio: http://www.unibo.it/index.html!! risolto l indirizzo e aperta la connessione TCP il client inoltra la richiesta seguente:!! GET /index.html HTTP/1.0 Metodo, URL e versione protocollo User-agent: Mozilla/3.0 Tipo del client Host: 137.204.202.18 Indirizzo IP del client Accept: text/html il client accetta pagine HTML Accept: image/gif il client accetta immagini Accept: application/octet-stream il client accetta file binari qualunque If-modified-since: data-ora Inviare il documento solo se è più recente della data specificata WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 11 Esempio di risposta http!! risposta dal server (supponiamo senza errori):!! meta informazioni, poi una riga vuota e quindi il contenuto del documento (es: una pagina HTML)!! HTTP/1.0 200 OK (200 significa senza errori) Server: NCSA/1.4 Date: Tue, july 4, 2001 19:17:05 GMT Content-type: text/html Content-length: 6528 Content-language: en Last-modified: Mon, july 3, 2001 15:05:35 GMT <----- riga vuota <HTML><HEAD> <TITLE> </TITLE> </HEAD ><BODY> </BODY></HTML> WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 12
Estensioni Server-side del Web!! Aggiunta di capacità di elaborazione server-side!! introduzione delle form per l'invio di dati al server Web!! Common Gateway Interface (CGI)!! standard per il passaggio dei parametri (delle form) tra Web server e programmi!! linguaggi: perl, C, pascal, (quasi tutti i linguaggi)!! programmi compilati per un sistema operativo specifico!! caricati (e scaricati) in memoria per ogni singola richiesta!! Tecnologie più evolute:!! script interpretati (o semi-compilati)!! Active Server Pages (Microsoft), Java Server Pages (Sun), Servlet (Sun), PHP (Apache), ColdFusion (Allaire) WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 13 Elaborazione Server-side: funzionamento generale 1. HTML Form transmission 2. Form Data Delivery http request http response 3. Execution of: CGI programs Java Server Pages Active Server Pages Java Servlet 4.Interactions Application Servers DBMSs 5. Response WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 14
Estensioni Client-side del Web!! Aggiunta di capacità di elaborazione client-side!! Linguaggi script:!! per definire computazioni associate ad una pagina HTML eseguite dal client (browser)!! JavaScript (Sun), VisualBasic (Microsoft), OracleBasic (Oracle), etc.!! impiegati soprattutto per validazione form lato client!! Applet Java:!! eseguibili Java trasmessi dal Web server al client ed eseguiti sulla macchina client (network computing)!! veri e propri programmi general purpose (es: StarOffice, Webstar) WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 15 FORM HTML: Acquisizione dati dall Utente <HTML> <HEAD> <TITLE>Questa e una form</title> </HEAD> <BODY> <FORM METHOD=POST ACTION= http://localhost/home/login.jsp > LOGIN <BR> User Name:<INPUT TYPE= text NAME= user > <BR> Password..:<INPUT TYPE= password NAME= password ><BR> <INPUT TYPE= reset VALUE= Annulla > <INPUT TYPE= submit VALUE= Conferma > </FORM> </BODY> </HTML> WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 16
FORM HTML: i Tag per l Input WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 17 Form: informazioni di base (i)!! Tag di apertura e chiusura della Form:!! <FORM>!!...!! </FORM>!! un parametro importante di <FORM> è METHOD il cui valore può essere GET o POST!! GET: le informazioni acquisite vengono accodate all URL e inviate insieme alla form stessa!! POST: le informazioni acquisite vengono inviate separatamente dalla form stessa e non sono visibili all utente WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 18
Form: informazioni di base (ii)!! ACTION è il parametro che definisce l URL dove inviare le informazioni della Form!! Esempio:!! ACTION= http://localhost/home/login.jsp!! l URL indica il software che dovrà elaborare la form!! e.g. CGI, JSP, Servlet, ASP, PHP, ColdFusion,...!! Se Form e relativo software di elaborazione sono nello stesso server allora non serve referenziare il server:!! ad esempio ACTION= /home/login.jsp!! Assegnare nomi diversi ai tag di Input per distinguerli nell elaborazione WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 19 Input di tipo TEXT!! Acquisisce Plain text - forma di input più semplice per acquisire del testo su una linea User Name: <INPUT TYPE= text NAME= user VALUE= verdi SIZE= 10 MAXLENGTH= 15 >!! i termini in blu (o sottolineati) sono opzionali, quelli in nero sono parole riservate, quelli in rosso (o in corsivo) sono impostabili!! VALUE= verdi ==> per visualizzare un valore di default!! SIZE= 10 ==> dimensione grafica del campo!! MAXLENGTH= 15 ==> num. max di caratteri inseribili WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 20
Input di tipo PASSWORD "! Come il tipo TEXT però acquisisce testo oscurato Password: <INPUT TYPE= password NAME= your_password VALUE= abc SIZE= 10 MAXLENGTH= 10 >! VALUE= abc ==> per presentare una password di default! SIZE= 10 ==> la dimensione grafica del campo e! MAXLENGTH= 10 ==> il num. max di caratteri inseribili è bene che coincidano WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 21 Input di tipo SELECT "! Visualizza un menù a tendina con valori pre-impostati alternativi da cui l utente può sceglierne uno A quale corso vuoi iscriverti? <SELECT NAME= id_corso > <OPTION VALUE= Fond1 >Fondamenti I <OPTION VALUE= Fond2 >Fondamenti II <OPTION>Calc1 <OPTION SELECTED>Calc2 </SELECT>! VALUE= Fond1 ==> Visualizza Fondamenti I ma assegna a id_corso il valore Fond1! SELECTED ==> diventa la scelta visualizzata di default WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 22
Input di tipo SELECT MULTIPLE "! Come SELECT però visualizza tutti o una parte dei valori preimpostati non alternativi da cui l utente può sceglierne uno o più A quali corsi vuoi iscriverti? <SELECT NAME= id_corsi MULTIPLE SIZE=4> <OPTION VALUE= Fond1 SELECTED>Fondamenti I <OPTION VALUE= Fond2 >Fondamenti II <OPTION>Calc1 <OPTION SELECTED>Calc2 </SELECT>! VALUE si comporta come nel tipo SELECT! SIZE determina il numero massimo di opzioni sempre visibili WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 23 Input di tipo CHECKBOX "! Visualizza un valore pre-impostato che l utente può scegliere A quali corsi vuoi iscriverti? <INPUT TYPE= checkbox NAME= id_corso1 CHECKED VALUE= Fond1 >Fondamenti I <INPUT TYPE= checkbox NAME= id_corso2 >Fondamenti II <INPUT TYPE= checkbox NAME= id_corso3 VALUE= CalcI >Calcolatori I! CHECKED visualizza il valore già selezionato! VALUE si comporta come nel tipo SELECT! se manca VALUE il valore assegnato, quando viene scelto, è on WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 24
Input di tipo RADIO "! Visualizza un insieme di valori pre-impostati alternativi dai cui l utente può sceglierne uno A quale corso vuoi iscriverti? <INPUT TYPE= radio NAME= corso VALUE= Fond1 CHECKED>Fondamenti I <INPUT TYPE= radio NAME= corso VALUE= Fond2 >Fondamenti II <INPUT TYPE= radio NAME= corso VALUE= CalcI >Calcolatori I! CHECKED seleziona il valore di default (è bene che ci sia sempre)! VALUE si comporta come nel tipo SELECT ma qui è obbligatorio! notare che il nome corso è lo stesso per tutti i valori alternativi tra loro WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 25 Input di tipo TEXTAREA!! Permette all utente di inserire del testo su più righe Area di testo per i commenti <TEXTAREA NAME= commento ROWS= 3 COLS= 40 > inserisci qui dentro i tuoi commenti </TEXTAREA>!! visualizza un area di 3 righe e 40 colonne e il testo inserito viene assegnato alla variabile commento WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 26
Pulsanti Submit e Reset (i)!! Ogni form deve avere almeno un pulsante di submit e possibilmente uno di reset <INPUT TYPE= reset VALUE= Pulsante Annulla > <INPUT TYPE= submit VALUE= Pulsante Submit >!! submit invia la form al Web server per l elaborazione!! reset annulla i valori che l utente ha immesso nella form ripristinandone lo stato iniziale!! VALUE assegna il titolo da visualizzare sul pulsante WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 27 Pulsanti Submit e Reset (ii)!! quando nella stessa form ci sono più pulsanti submit allora assegnare ai pulsanti NAME diversi per distinguerli nell elaborazione della form!! ad esempio:!! <INPUT TYPE= submit VALUE= conferma NAME= Submit >!! <INPUT TYPE= submit VALUE= abbandona NAME= Abbandona > WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 28
Input di tipo HIDDEN!! Non è propriamente un tipo per l acquisizione dati dall utente, tuttavia è utilizzato nelle form <INPUT TYPE= hidden NAME= my_name VALUE= Ciao >!! il valore Ciao viene assegnato alla variabile di nome my_name ma non viene visualizzato nulla all utente, tuttavia le informazioni sono visibili nella pagina sorgente!! può essere utilizzato per il passaggio di parametri tra FORM WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 29 Schema di funzionamento WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 30
Riferimenti per html e CGI!! Come costruire pagine html!! http://www.ncsa.uiuc.edu/general/internet/www/htmlprimer.html!! software di editing per html!! http://www.yahoo.com/computers/world_wide_web/html_editors/ MS_Windows/!! Principi di design per creare pagine web!! http://info.med.yale.edu/caim/stylemanual_top.html!! Forms e CGI!! tutorial sulle form!! http://robot0.ge.uiuc.edu/~carlosp/cs317/ft.1.html!! http://www.stars.com/vlib/providers/forms.html!! tutorial su CGI!! http://hoohoo.ncsa.uiuc.edu/docs/cgi/overview.htmla WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML G. Moro - Università di Bologna 31