Web e Server-side Computing: Richiami sulla tecnologia Web e FORM HTML Gianluca Moro gmoro@deis.unibo.it Dipartimento di Elettronica, Informatica e Sistemistica 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 DEIS - 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. 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 DEIS - Università di Bologna 3 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - Università di Bologna 4 Nomi di dominio top-level Protocolli di accesso Oltre ad http, i più comuni sono: ftp file transfer protocol mailto usato per spedire posta telnet file news protocollo di terminale virtuale, per effettuare login remoti accesso a documenti locali 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 DEIS - Università di Bologna 5 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 TCP/IP: Architettura 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 applicazione http, ftp, telnet, smtp 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 DEIS - Università di Bologna 7 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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/ 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 DEIS - Università di Bologna 9 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 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 DEIS - Università di Bologna 11 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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) Elaborazione Server-side: funzionamento generale 1. HTML Form transmission http request http response 2. Form Data Delivery 3. Execution of: CGI programs Java Server Pages Active Server Pages Java Servlet 5. Response 4.Interactions Application Servers DBMSs WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - Università di Bologna 13 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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) 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 DEIS - Università di Bologna 15 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - Università di Bologna 16 FORM HTML: i Tag per l Input 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 DEIS - Università di Bologna 17 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 DEIS - 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 DEIS - 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 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 DEIS - Università di Bologna 21 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 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 DEIS - Università di Bologna 23 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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? VALUE= Fond1 CHECKED>Fondamenti I VALUE= Fond2 >Fondamenti II 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 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 DEIS - Università di Bologna 25 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 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 DEIS - Università di Bologna 27 WWW e Server-Side Computing: Richiami sulla tecnologia Web e Form HTML DEIS - 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 DEIS - Università di Bologna 29 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/m S_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 DEIS - Università di Bologna 31