Introduzione alla programmazione Web

Transcript

1 Introduzione alla programmazione Web Antonella Poggi Dipartimento di Informatica e Sistemistica Antonio Ruberti SAPIENZA Università di Roma Anno Accademico 2010/2011

2 Argomenti trattati Principi del web Il linguaggio (X)HTML Programmazione lato server 2

3 Principi del Web Il World Wide Web è un documento ipermediale distribuito, costituito da una rete di risorse informative interconnesse ed ospitate da calcolatori situati ovunque Ipertesto/Ipermedia: testo/multimedia accessibile anche in modo non lineare, dotato cioè di una struttura di collegamenti, nodi e link, che permettono di spostarsi da una parte all altra delle informazioni Il paradigma di interazione è quello del client/server: i calcolatori interconessi assumono di volta in volta il ruolo di somministratore (server) e ricevente (client) L accesso alle risorse da parte dei client avviene con una famiglia di programmi detti browser Il protocollo usato per lo scambio di messaggi è HTTP 3

4 Sistema uniforme per identificare le risorse sul Web URI (Uniform Resource Identifier): stringa che identifica una risorsa generica su Internet secondo il formato <schema>:<dettagli specifici dello schema> Uno schema possibile è lo schema isbn, per identificare univocamente i libri, dove i dettali diventano il codice numerico ISBN del libro Le risorse sul Web sono identificate da una particolare forma di URI detta URL (Uniform Resource Locator), la cui forma è hostname: nome o indirizzo IP del server che ospita la risorsa porta: socket su cui il server è in ascolto (opzionale, la porta associata di default al protocollo HTTP è la 80) path-risorsa: percorso della risorsa all interno del server query: stringa passata alla risorsa per ulteriore interpretazione (opzionale) frammento: identifica una parte della risorsa stessa (opzionale) 4

5 Esempio di localizzazione di una risorsa a partire dall URL La risorsa cercata è: la risorsa è accessibile tramite protocollo HTTP si trova su un certo server web per indirizzare il calcolatore si usano nomi logici ( che vengono mappati sugli effettivi indirizzi IP ( ) si trova in una certa posizione nel file system del calcolatore server, identificata da un certo path (~poggi/didattica/ progettoas11/index.htm) 5

6 Il protocollo HTTP Versioni: 0.9, 1.0, 1.1 ad oggi la più usata è la 1.1 Il browser del client invia al server una particolare struttura dati chiamata richiesta HTTP, specificando la URL della risorsa ed eventualmente un numero di porta Il server, che è in ascolto su quella porta, esegue le seguenti operazioni: apre una connessione con il client per servire la richiesta invia una struttura dati chiamata risposta HTTP, contenente l esito della richiesta, ovvero normalmente il file che il browser visualizzerà a partire dalla versione 1.1., processa ulteriori richieste del medesimo client (in 1.0, ad ogni request/reply corrisponde una nuova connessione) chiude la connessione 6

7 Richiesta HTTP Ha la seguente struttura: prima riga: un metodo (azione richiesta), l URI cui si riferisce la richiesta e la versione del protocollo usata intestazione: metadati (header) scambiati nella forma <header>: <value> che danno informazioni al server su come servire il client (e.g. capacità, tipi MIME accettati, ecc.) una linea vuota corpo: il più delle volte vuote, ma potrebbe contenere dei dati che il browser passa al server (con il metodo POST, cf. più avanti) 7

8 Metodi e header usati nelle richieste HTTP Metodi più comuni: GET: richiede al server l invio di un file il cui percorso è indicato come parametro POST: invia dei dati alla risorsa il cui percorso è indicato come parametro, racchiusi nel corpo della richiesta come coppie attributo=valore; la risorsa normalmente è un programma lato server in grado di elaborare i dati ricevuti e restituire una nuova risorsa creata dinamicamente, che sarà inclusa nella risposta HTTP HEAD: simile alla GET, ma il server restituisce solo l intestazione della risposta HTTP Header più comuni: Host: Nome del server a cui viene fatta la richiesta User-Agent: Identificazione del browser da cui proviene la richiesta Authorization: Può mantenere dati per l autenticazione Accept: Specifica dei tipi accettati dal browser nella risposta 8

9 Esempio di richiesta HTTP All accesso della pagina precedentemente citata, corrisponde una richiesta HTTP che comprende: GET /~poggi/didattica/progettoas11/index.htm HTTP/1.1 Host: User-Agent: Mozilla/5.0 ( ) Accept: text/* Accept-Charset: ISO , UTF=8 ( ) Accept-language: de, en; ( ) 9

10 Risposta HTTP La struttura della risposta HTTP è simile a quella della richiesta: prima riga: versione del protocollo, codice di stato del server (che indica l esito della richiesta) e messaggio esplicito intestazione: coppie di metadati <header>: <value> che a volte danno indicazioni in merito all intepretazione della risposta una linea vuota corpo: il più delle volte non vuoto per es., nel caso di risposta ad una richiesta GET contiene la risorsa richiesta 10

11 I codici di stato del server Nella risposta HTTP il server indica se è stato in grado o meno di soddisfare la richiesta, rispondendo con un codice numerico seguito dalla descrizione testuale del motivo per il quale, eventualmente, la richiesta non è stata soddifatta Il codice numerico è un numero a 3 cifre di cui la prima identifica la categoria cui il codice appartiene: 1XX codici puramente informativi 100 Continue : il client può continuare con la sua richiesta 2XX codici che indicano il successo della richiesta 200 OK 201 Created : la richiesta è stata servita ed è stata creata una nuova risorsa 3XX codici che indicano che la richiesta è stata ricevuta ma è necessaria un ulteriore azione affinché il servizio richiesta possa essere fornito 300 Multiple choices : l URI richiesto corrisponde a più documenti (es. un documento disponibile in più lingue) 301 Moved permanently : la risorsa è stata assegnata ad un nuovo URI 4XX codici che indicano errori nella richiesta 400 Bad request : richiesta non capita dal server a causa di errori di sintassi 401 Authorization required : la risorsa richiede un autorizzazione che non è fornita nella richiesta 5XX codici che indicano errori nel server o impossibilità di assolvere alla richiesta 500 Internal Server Error : il server è in una situazione inaspettata e non può rispondere alle richieste 501 Not implemented : il server non è implementato per rispondere correttamente alla richiesta effettuata 11

12 Esempio di risposta HTTP Alla richiesta del precedente esempio, segue la (seguente porzione di) risposta: HTTP/ OK Date: Fri, 06 May :49:19 GMT Server: Apache Last-Modified: Tue, 03 May :12:22 GMT Content-type: text/html <html> <head> ( ) 12

13 HTTP stateless e cookie Nessuna informazione viene mantenuta tra una richiesta e l altro: ogni richiesta del client viene servita come se fosse isolata Problema: informazioni sullo stato dei rapporti in corso tra client e server potrebbero far comodo in certi casi: per adattare le risposte a certe preferenze del client; per ricordare al server che il client si e gia autenticato Una possibile soluzione è fornita dall utilizzo dei cookie cookie: variabili residenti sul browser che server e client si scambiano per permettere al server di riconoscere più visite dello stesso browser come visite appartenenti appunto ad una stessa sezzione di lavoro dello stesso utente Dal punto di vista pratico, i cookie sono implementati tramite intestazioni HTTP: un server chiede al browser di impostare il valore dei cookie contestualmente ad una visita del browser ad una pagina ospitata dal server, inserendo in una risposta l'header Set-cookie ed esplicitando una lista di coppie nome/attributo (ognuna eventualmente associata ad un path di competenza ) nelle successive richieste, il client include uno header Cookie, rimandando la coppia (o le coppie) al server (se la richiesta e per un documento nel path di competenza del cookie e se il cookie non è scaduto) 13

14 Argomenti trattati Principi del web Il linguaggio (X)HTML Programmazione lato server 14

15 Il linguaggio (X)HTML Nello stato attuale del web, le risorse ipertestuali sono realizzate in alcuni linguaggi specifici: XHTML (o HTML) e XML per struttura e contenuto CSS per la presentazione XHTML (extensible HyperText Markup Language) è un linguaggio di markup Per markup si intende un meccanismo di annotazione di documenti in formato testo che permette di: strutturare il contenuto in componenti logiche, dette elementi etichettare gli elementi in modo utile, dando loro un nome ovvero assegnado loro un significato significato: ruolo dell elemento nel documento, in base al quale il software di analisi del documento (es. browser) opera (es. visualizza) le etichette sono sequenze speciali di caratteri dette tag 15

16 Elementi Elementi heading Elemento paragrafo Elemento elenco Titolo Sotto titolo (o titolo sezione) contenuto pagina * primo item di una lista non ordinata * secondo item della lista <html> <head> <title>il Linguaggio XHTML</title> </head> <body> <h1>titolo</h1> <h2>sotto titolo (o titolo sezione)</h2> <p>contenuto pagina</p> <ul> <li> primo item di una lista non ordinata </li> <li> secondo item della lista </li> </ul> </body> </html> 16

17 Dettaglio di un elemento: esempio L elemento paragrafo: <p>contenuto pagina</p> Tag di apertura contenuto Tag di chiusura 17

18 Il contenuto degli elementi Esistono due categorie principali di elementi: elementi a livello di blocco: possono apparire nel corpo di un elemento e contenere sia altri elementi a livello di blocco, che inline, che direttamente dati carattere. Normalmente, viene presentato su una nuova linea e fatto seguire da una linea vuota es. elemento <p> elementi inline: devono apparire all interno di elementi a livello di blocco e possono contenere dati o altri elementi inline, ma non elementi di tipo blocco es. elemento <img> 18

19 Elementi ed attributi Ogni elemento puo avere degli attributi (stabiliti dalla definizione formale dell'elemento come parte del linguaggio di markup). Dato un elemento del documento, suoi attributi possono (o a volte devono) essere assegnati esplicitamente a valori (dipende dalla definizione formale dell'elemento). La gestione dell'elemento da parte dell'applicazione che riceve il documento, potrà dipendere, oltre che dalla definizione dell'elemento, anche dai valori degli attributi. Nel caso di un documento XHTML, il browser che lo riceve con lo scopo di presentarlo, visualizzerà l'elemento anche in base ai valori assegnati ai suoi attributi N.B. Non tutti gli elementi hanno un contenuto (e.g., <img>)! Eventualmente, le informazioni che servono (e.g. per la visualizzazione) sono espresse mediante gli attributi 19

20 Elementi ed attributi: esempio Elemento tabella bordi grossi: <table border= 12 cellspacing= 5 > </table> Elemento tabella senza bordi: <table border= 0 cellspacing= 5 > </table> 20

21 Da HTML a XHTML HTML è nato come linguaggio di markup mirato alla visualizzazione dei contenuti del web da parte di browser sono definite quattro versioni principali XML è un sottoinsieme (più semplice da usare e meno vasto) del linguaggio più generale SGML (Standardized General Markup Language) XHTML 1.0 è una replica di HTML i cui elementi sono definiti con XML più formale rispetto a HTML torna alla separazione tra presentazione e contenuto 21

22 Definizione di elementi XHTML: esempio Attraverso un documento DTD (Document Type Definition) documento che specifica la grammatica che deve soddisfare un un documento XML ad esso associato -, si specifica come deve essere scritto un elemento, quali parti potrà o dovrà contenere in sintassi <!ELEMENT img EMPTY> <!ATTLIST img %attrs; src %URI; #REQUIRED alt %Text; #REQUIRED longdesc %URI; #IMPLIED height %Length; #IMPLIED width %Length; #IMPLIED ( ) > 22

23 Struttura base del documento XHTML <?xml version= 1.0 encoding= UTF-8?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" " TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns= > <head> <title>il linguaggio XHTML</title> </head> <body> <!-- qui compare il contenuto del corpo --> </body> </html> <html>: elemento radice; deve contenere uno e un solo elemento <head> seguito da un elemento <body>; l attributo obbligatorio xmlns fa riferimento al namespace di xhtml <head>: intestazione del documento; contiene metainformazioni come il titolo (obbligatorio), eventuale collegamento a fogli di stile, script da utilizzare nel resto del documento, <body>: il corpo vero e proprio del documento; può anche essere vuoto; il suo contenuto apparirà nella finestra del browser <?xml>: "prologo XML non indispensabile se lo scopo e' solo la visualizzazione; indica che si tratta di un doc. XML che rispetta lo standard XML 1.0 ed e scritto usando i caratteri della codifica UTF 8 bit. <!DOCTYPE>: documento html aderente al DTD specificato, definito universalmente (PUBLIC) 23

24 Affinché un documento sia accettato deve essere well-formed elementi e attributo in minuscolo elementi ben nidificati elementi sempre terminati dal corretto end tag elementi vuoti sempre terminati attributi tra virgolette deve essere valido: usare gli elementi consentiti dalla DTD cui fa riferimento rispettarne la struttura: un elemento può avere assegnati certi attributi e non altri, e può o non può contenere altri elementi 24

25 L ipertesto Il tessuto ipertestuale dei documenti XHTML è ottenuto prevalentemente tramite un unico elemento che implementa il concetto di link <a> permette di definire sia la sorgente che la destinazione di un ancora o di un link l attributo href contiene l URI della risorsa da connettere al contenuto dell elemento l ancora si ottiene definendo tramite l attributo id un riferimento univoco interno al documento che poi può essere usato come frammento in un URI che voglia puntare a tale posizione Esempio (porzione di pagina sita all URI <a id= qui /> <p> Il primo link punta al <a href= > sito del dipartimento di Informatica e Sistemistica</a>; il secondo punta esattamente all <a href= pagina.html#qui>inizio</a> di questo esempio.</p> 25

26 Tanti altri elementi per definire titoli che danno struttura al documento secondo il modello gerarchico di capitolo, paragrafo, sottoparagrafo, <h1>, <h2>, <h6> per specificare e formattare opportunamento liste ordinate <ol> e non ordinate <ul> per indicare l occorrenza e la forma di tabelle <table> per includere immagini <img>. 26

27 Argomenti trattati Principi del web Il linguaggio (X)HTML Programmazione lato server 27

28 Programmazione lato server Finora abbiamo visto come vengono specificate, per mezzo del linguaggio XHTML, risorse statiche accessibili sul web Per programmazione lato server, si intende quella serie di tecniche che consentono di produrre risorse in tempo reale, che un server può restituire al client senza che esista un file statico corrispondente ad esse - siti web dinamici programmi che generano su richiesta flussi di dati in formati tipici del Web, come XHTML, JPEG, GIF, tipicamente generano risorse sulla base di dati di input forniti dall utente mediante forms HTML (e.g. motore di ricerca) 28

29 Server Web Programma server che gestisce il protocollo HTTP daemon in attesa su una porta TCP (di default la porta 80) secondo le richieste dei client, distribuisce risorse ospitate all interno in un sottoalbero del file system generate all atto della richiesta attivando programmi (anch essi ospitati nel sottoalbero) che manipolano dati di input e restituiscono risultati in un forma trasferibile al client come se si trattasse di una risorsa statica altri compiti come l identificazione di una risorsa, del suo tipo MIME, la gestione dell autenticazione dell utente, la registrazione degli eventi 29

30 Passi di un server Web: l esempio di Apache 1. Traduzione da URI a nome di file 2. Verifica dell identità dell utente 3. Verifica dei privilegi di accesso 4. Altre forme di autenticazione 5. Determinazione del tipo MIME dell oggetto rchiesto 6. Invio della risposta al client 7. Registrazione degli eventi in appositi file di log N.B. ogni passo è gestito da uno o più moduli tramite un apposita API moduli sviluppati da Apache moduli prodotti da terzi per la connessione con altri programmi (e.g., per lo scripting) 30

31 Come si inviano dati al server? Il meccanismo principale per l input è costituito dall elemento form HTML, costituiti da elementi chiamati controlli (a cui è possibile associare un etichetta) <form>: deve contenere uno o più blocchi, pertanto i controlli, che sono inline, dovranno essere racchiusi in altro markup (per es. <p>) L attributo method stabilisce se i dati debbano essere inviati tramite GET o POST GET: dati vengono concatenati all URI inserita nella prima riga dell intestazione della richiesta HTTP POST: i dati vengono inseriti nel corpo della richiesta HTTP (virtualmente illimitati) L attributo action indica a quale risorsa URI inviare i dati I controlli sono quelli tipici delle interfacce grafiche: campi di testo, pulsanti, check box, <input>, <select>, <option>, 31

32 Interazione con l utente: passi principali Ciò che l utente inserisce nei campi di input viene incorporato all interno di una richiesta HTTP, rivolta ad una risorsa costituita da un programma lato server Il server web recapita i dati alla risorsa stessa La risorsa elabora i dati e genera una nuova pagina web, temporanea, contenente un effetto dell elaborazione dei dati di input La nuova pagina viene restituita dal server al browser tramite la risposta HTTP Il browser visualizza la risorsa appena generata. 32

33 Tecnologie lato server Varie tecniche utilizzabili differiscono per: modalità di interazione tra server e programma luogo dove il codice è situato modalità di esecuzione 33

34 Common Gateway Interface (CGI) l URI richiesta dal client identifica un programma che risiede in un sottoalbero preciso e protetto del file system il programma è mandato in esecuzione dal server HTTP passandogli come parametri tutti i dati relativi alla transazione (tra cui l IP del client) e i dati forniti dall utente ad ogni visita di un client viene mandata in esecuzione un istanza del programma " potenziale spreco di risorse computazionali lato server l output del programma è ciò che riceverà il browser come risposta N.B. Il server Web passa l intera richiesta HTTP nell input standard del programma CGI in linea di principio è possibile utilizzare un qualsiasi linguaggio di programmazione 34

35 Scripting lato server l URI richiesta identifica una risorsa, situata ovunque nel sottoalbero, costituita da codice (X)HTML mescolato a frammenti di script, separati dal codice (X) HTML per mezzo di un apposita sintassi che dipende dal linguaggio in corrispondenza di determinati tipi di file richiesti, il server HTTP richiama un modulo esterno di gestione che emette direttamente come output il codice (X)HTML che incontra per ogni script, ne interpreta il contenuto, producendo un output che viene sostituito all intero script lo stato della computazione viene mantenuto da uno script all altro è possibile definire una variabile in uno script e usarla in script successivi l interpretazione è affidata ad un programma esterno specifico del linguaggio effettuata ex-novo ad ogni richiesta il client riceve una risorsa web che non ha più traccia degli script Esempi di linguaggi di scripting lasto server: PHP, ASP 35

36 Java Enterprise Edition Gli elementi costitutivi sono essenzialmente due: servlet e JSP Un elemento software, detto container, indispensabile affinché si possano usare servlet e JSP, lavora in cooperazione con un server web o lo incorpora esempio di riferimento: Apache Tomcat Servlet classi Java che gestiscono in toto richieste e risposte HTTP per mezzo di appositi metodi alla richiesta della risorsa corrispondente alla servlet, il container istanzia l oggetto servlet e chiama un metodo specifico a seconda del tipo di messaggio ricevuto dal client (GET, POST, HEAD) JSP documenti in cui può essere presente codice Java mescolato a (X) HTML mescola il concetto di servlet con le tecniche proprie dello scripting lato server alla prima richiesta il container compila automaticamente la pagina JSP in una servlet con lo stesso comportamento che quindi sarà poi computazionalmente più efficiente 36