Capitolo 1 Tecnologie per applicazioni Web Parte prima: i protocolli di Internet e del Web Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Presentazione del ciclo di lezioni • • • • • • • Definizione e cronologia di Internet e del Web Protocolli base (TCP/IP, HTTP) HTML 3 e 4, client-side scripting XML e trasformazioni documentali Architetture per il Web Progettazione di siti Web data-intensive WebML (Web Modeling Language) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Internet: una definizione Sistema globale di informazione che: • collegato da un unico spazio di indirizzi basato sul protocollo IP • consente di comunicare mediante protocollo TCP/IP o sue estensioni • rende accessibili, pubblicamente o privatamente, servizi basati sulla infrastruttura descritta Federal Networking Council, 24/10/1995 Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Prima di Internet: comunicazione punto a punto Nella comunicazione punto a punto esiste un canale fisico dedicato Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano L’era di Internet: la commutazione di pacchetto Nella commutazione di pacchetto il messaggio viene diviso in atomi “instradati” lungo una rete di nodi Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Ipertesti multimediali Ipertesto multimediale: un documento a lettura non sequenziale con inserti multimediale Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Definizione di WWW Web: un sistema client-server su Internet per l’accesso a ipertesti multimediali richiesta client risposta Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera server Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Il protocollo TCP/IP • Transfer Control Protocol / Internet Protocol • Insieme di protocolli (suite) strutturati in maniera gerarchica • Ogni livello della gerarchia usa i servizi forniti dal livello inferiore e offre servizi al livello superiore Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano TCP e IP • Internet Protocol – si occupa della spedizione in rete di unita’ di informazione (datagram) – definisce il meccanismo di indirizzamento dei nodi di Internet (IP address) • Transfer Control Protocol – converte il flusso dati proveniente dalla applicazione in pacchetti (segment) trasmissibili in rete – verifica integrità e correttezza dei dati trasmessi (recupero pacchetti persi, rimozione duplicati ...) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Il protocollo HTTP • HyperText Transfer Protocol • Protocollo a livello di applicazione per lo scambio di ipertesti multimediali • Prescrive il formato di – nomi delle risorse (URL) – domande – risposte • Versioni: HTTP/0.9, 1.0, 1.1 • Riferimento: Tim Berners Lee, Request for Comment 1945, HTTP/1.0 Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Gli attori di HTTP •cliente (browser): genera richieste di risorse •(origin) server: depositario della risorsa richiesta Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Gli attori di HTTP •proxy: nodo intermedio che può fungere sia da client che da server. Intercetta le richieste e verifica se può soddisfarle da solo, altrimenti le inoltra al server. Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Scopi: •Migliorare le performance •Filtrare le richieste Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Gli attori di HTTP %4$$$-]] •gateway: nodo intermedio che può agire solo da server. Intercetta le richieste, verifica se sono ammesse e le traduce Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera $%##~^&^& $$=@@@ Scopi: •Traduzione tra protocolli •Protezione Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Uniform Resource Locator (URL) • È una stringa strutturata, ad esempio: http://www.elet.polimi.it/people/fraterna.html • Protocollo: http, ma anche ftp e gopher • Indirizzo della macchina: – simbolico: www.elet.polimi.it – numerico (IP): 131.175.21.1 – puo’ includere il numero di porta (es. :8080) • Path: sequenza di direttori • Nome risorsa: identificativo di un file – se la risorsa e’ un file html, può includere un indirizzo interno(es. fraterna.html#curriculum) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Formato dei documenti • I documenti risiedono sul server come file e vengono inviati al client usando il campo entity-body della risposta • ES: Ipertesto = file ASCII scritto secondo la sintassi HyperText Markup Language (HTML) • Estensioni tipiche del file: *.html *.htm • Il documento puo’ contenere inserti multimediali (immagini, audio, video) – il programma client carica e visualizza il testo – poi richiede al server i file corrispondenti agli inserti multimediali (con richieste separate) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Il browser HTTP • Applicazione in grado di: – accedere alla rete secondo il protocollo HTTP – richiedere risorse identificate da un URL a un server – interpretare e rendere a video la risposta del server Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Il browser HTTP • I diversi prodotti differenziano per: – La versione di HTML trattata – La capacità di trattare estensioni non standard di HTML (ad es. JavaScript, VBscript) – La capacità di eseguire programmi (es. Java) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Il server HTTP • Funzioni base: – accesso alla rete secondo il protocollo HTTP – invio di risorse identificate da un URL a un client – controllo degli accessi – lancio di programmi in risposta a richieste – registrazione degli accessi (logging) • Funzioni avanzate: – monitoraggio e amministrazione – connessione a basi di dati – esecuzione efficiente di applicazioni esterne Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Server HTTP: architettura base interfaccia di rete Risorse interfaccia file system interfaccia applicazioni Applicazioni Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Capitolo 1 Tecnologie per applicazioni Web Parte seconda: HTML e linguaggi client-side Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Sommario • Definizione di markup • Breve storia di HTML • HTML 3 – Tag di formattazione del testo – Tag di formattazione del paragrafo e del layout – Ipertestualità e multimedialità • Revisione critica di HTML 3 • HTML 4 e CSS • Scripting e componenti client-side Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano HyperText Markup Language •Linguaggio di descrizione di testi secondo lo schema SGML (Standard General Markup Language) •Marcatura: contenuto + marcatura Home Page di Piero Fraternali <HTML> <Title> </Title> <Body> </HTML> = risultato finale Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Concetti generali di HTML • La marcatura prevede l’uso di etichette, dette TAGS • I tag viaggiano (quasi) sempre in coppia • <tag> testo </tag> • Il significato di un tag può essere modificato tramite attributi • <tag attributo=valore> testo </tag> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Struttura del documento • File ASCII, struttura generale: <html> intestazione + corpo </html> • Intestazione: <head> .. </head> contiene informazioni sul documento: • titolo <title> .. </title> •Corpo: <body> .. </body> •contiene il testo del documento e i tag per la resa visiva Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Formattazione del testo • grassetto <b> prova </b> • corsivo <i> prova </i> • sottolineato <u> prova </u> Prova prova prova Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Formattazione del testo •Dimensioni: <font size=+3> prova</font> <font size=9> prova</font> •Colore: <font color=“FF0000”> prova</font> prova prova prova Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Titoli • titolo 1 • titolo 2 • titolo 3 <h1>Titolo livello 1</h1> <h2>Titolo livello 2 </h2> <h3>Titolo livello 3 </h3> Titolo di livello1 Titolo di livello2 Titolo di livello 3 Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Paragrafi, allineamenti • paragrafi: <p>testo</p>vai a capo • testo formattato: <pre>prova prova</pre> testo vai a capo prova prova Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Collegamenti ipertestuali • Esempio di collegamento : Visita la <a href = http://www.elet.polimi.it/fraterna.html> pagina di Piero </a> Visita la pagina di Piero Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Collegamenti ipertestuali • Uso della posta: Scrivi a<a href = mailto:[email protected]> Piero Fraternali</a> Scrivi a Piero Fraternali Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Immagini <p align=center >Ecco la mia foto: </p> <img src = “piero.gif” width=200 height=400 alt=“Foto di Piero”> Ecco la mia foto Foto di Piero Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Tabelle <table border="1" width=”50%" bgcolor="#C0C0C0"> <tr> <td width=”50%" bgcolor="#00FF00"> cella 1</td> <td width=”50%> cella 2</td> </tr> <tr "bgcolor="#0000FF"> <td width=”50%">cella 3</td> cella 1 cella 2 <td width=”50%">cella 4</td> cella 3 cella 4 </tr> </table> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Revisione critica • Situazione – Tag predefiniti insufficienti per le necessità grafiche e di strutturazione dei documenti – Introduzione di nuove caratteristiche richiede lunga standardizzazione • Obiettivi – Rendere HTML estensibile in modo consistente – Produrre documenti autodescrittivi • Due linee evolutive: – HTML: CSSL, HTML 4.0 – XML: XSL, XLL, RDF, .... Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano HTML 4 • Una “major revision” del linguaggio • Separa aspetti gli grafici dal markup “strutturale” • Probabilmente è l’ultima versione di HTML • Il concetto nuovo: Cascading Style Sheet (CSS) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Cascading Style Sheet (CSS) http://w3c.org/Style • Specifica della presentazione separata dal contenuto • Style Sheet: specifica testuale di regole di formattazione da applicare al testo • Regola: when <pattern> do <action> • Pattern: configurazione di elementi del testo • Azione: produzione di sezioni di testo contenenti oggetti grafici (control flow obj.s) • Migliora la resa dei documenti grazie alla presenza di oltre 60 proprietà grafiche Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano L’elemento <style> • Un elemento per descrivere regole di stile nei documenti – Esempio (nella parte head del documento): <style type="text/css"> body { color: black; background: white; } </style> • Significato: una regola di formattazione: quando trovi body -> metti colore=nero e sfondo=bianco • Effetto: determina l’apparenza dell’intero documento Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano File di stile esterni: uso di <link> • Le regole di stile possono essere applicate a più documenti • Conviene definire un file separato che le contenga • Tale file deve essere referenziato dal file HTML, come segue: • <link rel="stylesheet" href="style.css"> (Sempre nella parte head del documento) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempi di proprietà definibili • Margini, rientri: <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } </style> <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; } </style> • NB: il secondo esempio ha 3 regole Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Attributo class • Consente di classificare più finemente i tag HTML per applicare formati in modo selettivo • Esempio di testo HTML: <h2 class="subsection">Getting started</h2> • Regola di stile applicata solo alle occorrenze di h2 con class=subsection: h2.subsection { margin-top: 8em; margin-bottom: 3em; } Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Formattazione di sezioni • Il tag HTML <div> può essere usato per delimitare sezioni di testo • La sezione può essere classificata con l’attributo class • Si può così scrivere una regola che si applica solo alle sezioni volute div.box { border: solid; border-width: thin; } • Si applica ad esempio a: <div class="box"> testo da contornare con un bordo fine </div> • MORALE: ognuno può definirsi il proprio HTML! Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Client-side scripting • Obiettivo: rendere le pagine più interattive • Soluzione: inserire nella pagina HTML piccoli programmi detti script • Uno script reagisce a un evento prodotto dall’utente e modifica il documento • Due principali linguaggi di scripting client-side – VBScript (Microsoft) – Jscript (Netscape) • NB: E’ Il browser che interpreta le istruzioni • Capacità non standard fonte di incompatibilità Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio VBscript <HTML> <HEAD><TITLE>Esempio VBscript</TITLE></HEAD> <BODY> <P> Textbox <INPUT type=textbox name=TextBox1 language=“VBS” size=20> <P> Bottone <INPUT type=button value=”Ciao!" language=“VBS” name="HelloButton" onClick="OnClick_Button"> </BODY> </HTML> <SCRIPT language="VBS"> <!-- Sub OnClick_Button TextBox1.Value=”Ciao a tutti" End Sub --> </SCRIPT> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio JavaScript <HTML> <HEAD> <TITLE>Esempio JavaScript</TITLE> <script language="JavaScript"> function pushS() { alert("Ciao!"); } </script> </HEAD> <BODY> <script language="JavaScript"> <!-- oggi = new Date() document.write("L'ora attuale è:“ , oggi.getHours(),":",oggi.getMinutes(), ". ") document.write("<br>La data di oggi è: ", oggi.getDate(),"/",oggi.getMonth() + 1,"/",oggi.getYear());// --> </script> <form> <input type="button" name=“S” value=“Saluti!” onclick="pushS()"> </form> </BODY> </HTML> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio JavaScript Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Componenti Client-side • Ulteriori capacità sono ottenute inserendo nella pagina oggetti invece che semplici procedure (contenuti tra tag <object></object>) • Vari formati di componenti – ActiveX (Microsoft) – Applets e JavaBeans (Sun) • Il supporto varia di browser in browser Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Capitolo 1 Tecnologie per applicazioni Web Parte terza: XML, DTD, XSD Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XML: eXtensible Markup Language • Formato di file proposto dal W3C per distribuire documenti elettronici sul World Wide Web Evoluzione: • 1986: Standard Generalized Markup Language (SGML) ISO 8879-1986 • Agosto 1997: XML Working Draft • Dicembre 1997: XML 1.0 Proposed Recommendation • Febbraio 1998: Standard Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XML vs HTML • XML non rimpiazza HTML! • HTML: insieme fisso di tag • XML: standard per creare linguaggi di markup con tag personalizzati (erede di SGML); possono essere usati in qualunque dominio XML e HTML sono nati con scopi diversi: • XML progettato per descrivere DATI cosa sono i dati • HTML progettato per visualizzare i dati come appaiono i dati Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Uso di XML • Separare i dati dal modo con cui vengono visualizzati • Scambiare i dati tra sistemi incompatibili • Scambiare informazioni in sistemi B2B • Condividere dati • Memorizzare dati • Creare nuovi linguaggi (WML, MathML…) Accessibilità: • Supporto nei moderni browsers per Visualizzazione, validazione, Embedding in documenti HTML,Trasformazione con XSL, Visualizzazione con CSS • è un documento di testo il software che tratta documenti testuali tratta anche XML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio di documento XML <?xml version="1.0"?> Attributi <elenco> <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> <prodotto codice=“432”> <descrizione> Frigo </descrizione> </prodotto> </elenco> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Tag con contenuti Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Sintassi XML • Tutti gli elementi hanno un tag di chiusura • I tag sono “case sensitive” • I tag devono essere annidati correttamente • Un documento XML deve avere un tag radice Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Elementi <prodotto codice=“123kl14”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> • Si possono estendere • Hanno relazioni (padre-figlio) • Hanno contenuto Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Attributi <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> • Gli elementi possono avere degli attributi • I valori vanno racchiusi tra “ ” • Differiscono dagli elementi perchè non possono contenere elementi figli Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Namespace • Metodo per evitare conflitti di nome <table> <tr>...</tr> </table> <table> <product>...</product> </table> • Si introduce un prefisso <h:table> <h:tr>...</h:tr> </h:table> <my:table> <my:product>... </my:product> </my:table> • Un XML namespace è una collezione di nomi (attributi, elementi,…), identificata da un URI • URL HTML diventa URI (Uniform Resource Identifier) XML • un documento XML può far riferimento ad oggetti diversi (DTD, documenti XML, etc.) • è più importante identificare un oggetto che localizzarlo Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Tipi di marcature • Elementi: <prodotto> • • • • Entità: < (sta per <), ℞ (Unicode) Commenti: <!- - qualsiasi testo - - > Istruzioni: <? Nome-istruzione dati ?> Sezioni CDATA (character data) <![CDATA[ *p = &q; b = (i <= 3); ]]> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Document Type Definition (DTD) • Detta il tipo di un documento, cioè: – i tag ammessi – le regole di annidamento dei tag • Scopi: – Accordarsi su formato/struttura dei documenti – Validare documenti XML secondo certe regole • Esempio di dichiarazione di un elemento: <!ELEMENT PRODOTTO (DESCRIZIONE, PREZZO)> • L’elemento prodotto contiene al suo interno un elemento descrizione seguito da un elemento prezzo Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Validazione di un documento XML • Un documento XML la cui sintassi è corretta(cioè soddisfa le regole di scrittura di documenti XML) è detto “well-formed” (ben formato) • Un documento validato rispetto ad un DTD è detto “valid” (valido) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Modello di contenuto • Elementi contenenti elementi figli <!ELEMENT PRODOTTO (DESCRIZIONE))> – <prodotto> <descrizione>…</descrizione></prodotto> • Elementi con PCDATA (parsed character data = brano di testo qualunque) <!ELEMENT DESCRIZIONE #PCDATA)> – <descrizione> testo </descrizione> • Elementi vuoti <!ELEMENT ARTICOLO EMPTY)> – <articolo/> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Modello di contenuto • Contenuto misto <!ELEMENT ARTICOLO (#PCDATA | PRODOTTO)> – <articolo> testo </articolo> – <articolo><prodotto>..</prodotto><articolo> • Qualsiasi contenuto <!ELEMENT PARTE ANY)> – <parte><sottoparte></sottoparte><parte> – <parte><prodotto></prodotto></parte> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Occorrenze di un elemento • 1 volta <!ELEMENT PRODOTTO (DESCRIZIONE))> • 1 o più volte <!ELEMENT LISTA (PRODOTTO+))> • 0 o più volte <!ELEMENT LISTA (PRODOTTO*))> • 0 o 1 volta <!ELEMENT PRODOTTO (DESCRIZIONE?))> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio di DTD <!ELEMENT ELENCO (PRODOTTO+)> <!ELEMENT PRODOTTO (DESCRIZIONE, PREZZO?)> <!ELEMENT DESCRIZIONE #PCDATA> <!ELEMENT PREZZO #PCDATA> <elenco> <prodotto codice=“123”> <descrizione> Forno </descrizione> <prezzo> 1040000 </prezzo> </prodotto> <prodotto codice=“432”> <descrizione> Frigo </descrizione> </prodotto> NOTA: un DTD NON è un </elenco> documento XML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Dichiarazioni di attributi • Per ogni elemento dice: – quali attributi può avere il tag – che valori può assumere ciascun attributo – qual è il valore di default • Esempio di dichiarazione di attributo: <!ATTLIST PRODOTTO codice ID #REQUIRED label CDATA #IMPLIED status (disponibile | terminato) ‘disponibile’> • Il tag PRODOTTO può contenere 3 attributi Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Documenti con DTD <?XML version="1.0" standalone="no"?> DTD esterno <!DOCTYPE capitolo SYSTEM ”libro.dtd" [ <!ENTITY %ulink.module "IGNORE"> <!ELEMENT ulink (#PCDATA)*> <!ATTLIST ulink xml:link CDATA #FIXED "SIMPLE" xml-attributes CDATA #FIXED "HREF URL" URL CDATA #REQUIRED> ]> <capitolo>...</capitolo> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera DTD interno Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XML Schema Storia: - inizialmente proposto da Microsoft - divenuto W3C recommendation (maggio ‘01) Scopo: definire gli elementi e la composizione di un documento XML Un XML Schema definisce regole riguardanti: – – – – – – – Elementi Attributi Gerarchia degli elementi Sequenza di elementi figli Cardinalità di elementi figli Tipi di dati per elementi e attributi Valori di default per elementi e attributi Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Vantaggi di XML Schema rispetto a DTD XML Schema (noti anche come XSchema o XSD= XML Schema Definition): • Sono estendibili (per future aggiunte) • Sono anch’essi files XML • Sono più ricchi e completi di DTD • Supportano tipi di dati • Gestiscono namespaces Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio: documento XML <?xml version="1.0"?> <note xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "http://www.lol-si.com/Xschema/note.xsd"> <to> Tove </to> <from> Jani </from> <head> Reminder </head> <body> this weekend! </body> </note> Note: 1° attributo: URI che dichiara che si vuole la validazione del documento attraverso XSD 2° attributo: dichiara dove reperire il file XSD (sempre attraverso URI) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio: XML Schema <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"> <xs:element name="note"> <xs:complexType> <xs:sequence> <xs:element name="to" type="xs:string"/> <xs:element name="from" type="xs:string"/> <xs:element name="head" type="xs:string"/> <xs:element name="body" type="xs:string"/> </xs:sequence> </xs:complexType> xs: namespace per XSchema </xs:element> (contiene tutti i tag XSD) </xs:schema> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Elementi semplici (Simple elements) • Possono contenere solo testo (no elem. o attributi) • Definizione di elementi semplici: <xs:element name="nome" type="tipo"/> <xs:element name="nome" type=“tipo” default=“xyz” /> <xs:element name="nome" type=“tipo” fixed=“xyz” /> • Esempi di definizione di elementi semplici in XSD <xs:element name=“età” type=“xs:integer”/> <xs:element name=“cognome” type=“xs:string”/> • Esempi di elementi semplici XML <età> 65 </età> <cognome> Rossi </cognome> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Attributi in XSD • Definizione di attributi <xs:attribute name="name" type="type"/> Valore di <xs:attribute … default|fixed=“xyz” default o fisso use=“required|optional”/> Obbligatorio o opzionale • Esempio di definizione di attribute <xs:attribute name=“lang” type=“xs:string”/> • Esempio di attributo <lastname lang=“it”> qwerty </lastname> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Elementi complessi (Complex elements) 4 tipi di elementi complessi: • Vuoti (empty) • Contenenti solo altri elementi • Contenenti solo testo • Contenenti testo e/o altri elementi • Sintassi di elementi complessi: <xs:element name="name"> <xs:complexType> . . element content . . </xs:complexType> </xs:element> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Restrizioni • Restrizioni sui valori(min&max) • Sull’enumerazione di insiemi (set) • Su lunghezza, numero di spazi, ecc: lenght, blanks, … Indicatori (Indicators) • Ordinamento: Any, All, Choice, Sequence • Numero di occorrenze: maxOccurs, minOccurs – Se non specificati: 1 e 1 sola occorrenza • Raggruppamento: Per definire gruppi di elementi, tra loro correlati Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Capitolo 1 Tecnologie per applicazioni Web Parte quarta: Interrogare e trasformare documenti XML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XQuery • Proposta W3C: 15 Febbraio 2001 • Interrogazioni: – Path expressions • Sintassi abbreviata di XPath – Espressioni FLWR • Clausole FOR, LET, WHERE, RETURN Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Path expressions • • • • • • • • . .. / // @ * [] [n] Nodo corrente Nodo padre del nodo corrente nodo radice, o figlio del nodo corrente discendente del nodo corrente attributo del nodo corrente qualsiasi nodo predicato posizione Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempi di path expressions • Una path expression può iniziare con document(stringa_documento) Restituisce la radice del documento specificato • A partire dalla radice del documento si possono specificare delle espressioni per estrarre il contenuto desiderato • Esempio: document(“libri.xml”)/Elenco/Libro Restituisce l’insieme di tutti i libri contenuti nell’elenco che si trovano nel documento libri.xml Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempi di path expressions • Esempio: document(“libri.xml”)/Elenco/Libro[Editore=‘Bo mpiani’ AND @disponibilità=‘S’]/Titolo Restituisce l’insieme di tutti i titoli dei libri dell’editore Bompiani che sono disponibili e che si trovano nel documento libri.xml <Titolo>Il Signore degli Anelli</Titolo> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Espressioni FLWR • • • • FOR per l’iterazione LET per collegare variabili WHERE per esprimere predicati RETURN per generare il risultato Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Espressioni FOR • Esempio: FOR $l IN document(“libri.xml”)//Libro RETURN $l • La clausola FOR valuta l’espressione sulla destra (//Libro) che è un insieme, e itera all’interno di questo set assegnando il nodo di turno alla variabile $l • L’interrogazione restituisce l’insieme di tutti i libri che si trovano nel documento libri.xml • Le espressioni FOR possono essere annidate Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Espressioni LET • Esempio: LET $l := document(“libri.xml”)//Libro RETURN $l • La clausola LET valuta l’espressione (//Libro) e assegna l’intero insieme di libri trovati alla variabile $l • Il risultato di una clausola LET produce un singolo binding per la variabile: l’intero set viene assegnato alla variabile Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Clausola WHERE • La clausola WHERE esprime una condizione: solamente le tuple che soddisfano tale condizione vengono utilizzate per invocare la clausola RETURN • Le condizioni nella clausola WHERE possono contenere diversi predicati connessi da AND, OR, NOT • Esempio: FOR $l IN document(“libri.xml”)//Libro WHERE $l/Editore=“Bompiani” AND $l/@disponibilità=“S” RETURN $l • Restituisce tutti i libri pubblicati da Bompiani che sono disponibili Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Clausola RETURN • Genera l’output di un’espressione FLWR che può essere: – Un nodo <Autore>F. Dürrenmatt</Autore> – Un foresta ordinata di nodi <Autore>J.R.R. Tolkien</Autore> <Autore>Umberto Eco</Autore> <Autore>F. Dürrenmatt</Autore> – Un valore F. Dürrenmatt • Può contenere dei costruttori di elementi, riferimenti a variabili definite nelle parti FOR e LET ed espressioni annidate Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Clausola RETURN • Un costruttore di elemento consiste di un tag iniziale e di un tag finale racchiudenti una lista opzionale di espressioni che determinano il contenuto dell’elemento • Esempio: FOR $l IN document(“libri.xml”)//Libro WHERE $l/Editore=“Bompiani” RETURN <Libro-Bompiani> nuovo elemento $l/Titolo </Libro-Bompiani> <Libro-Bompiani><Titolo>Il Signore degli Anelli</Titolo></Libro-Bompiani> <Libro-Bompiani><Titolo>Il nome della rosa</Titolo></Libro-Bompiani> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XSL • Standard W3C: 16 novembre 1999 • XSL = eXtensible Stylesheet Language • Un foglio di stile è un file in cui sono condensate le specifiche e modalità di presentazione • si può quindi separare (più o meno nettamente) la definizione dei contenuti dalla loro resa grafica Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XSL • Linguaggio per rappresentare l’output di XML formattato • e per convertire un documento XML in un altro documento XML, HTML etc. • Usa la notazione XML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XSLT XSL = XSLT + XSL FO • XSLT (XSL Transformation) Trasforma un documento XML in un altro documento XML o altro tipo di documento (HTML, ecc.) • Può: – aggiungere nuovi elementi; – rimuovere elementi presenti; riorganizzare gli elementi; – decidere quali visualizzare, ecc. • XSL FO (Formatting Object) contiene le istruzioni per formattare l’output di un documento XML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XSLT • Trasforma un documento XML in un altro documento XML o altro tipo di documento (HTML, ecc.) • Può aggiungere nuovi elementi, rimuovere elementi presenti; può riorganizzare gli elementi, decidere quali visualizzare, ecc. Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano XSLT • Utilizza Xpath per definire le parti del documento sul quale effettuare le trasformazioni • Per gli elementi sui quali devono essere applicate le trasformazioni vengono definiti dei template Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Template • Per assegnare uno stile ad un particolare elemento XML oppure per applicare delle trasformazioni si usa un template nel foglio di stile • Il foglio di stile può essere eseguito da un processore XSLT che scandisce il documento XML sorgente, identifica gli elementi per i quali è stato definito un template nel foglio di stile, ed effettua le azioni specificate nel template. Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio di template <xsl:template match=paragrafo> <fo:blocco font-size="10pt" space-before="12pt"> <xsl:apply-templates/> </fo:block> </xsl:template> • La clausola match definisce su quali elementi si applica il template • Per ogni elemento si possono specificare più template (si applica il più specifico oppure si assegna una priorità per l’applicazione) • Un template può specificare lo stile per più elementi • All’interno del template si specifica come si devono processare gli elementi figli (xsl:apply-templates) • Nell’esempio: gli elementi “paragrafo” diventano oggetti di formattazione “blocco” che vengono visualizzati con 10 punti e 12 punti di spazio dopo ogni blocco Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Match • Si possono specificare gli elementi figli da processare utilizzando i seguenti simboli: • | operatore or • . Elemento corrente • // discendenti • / figlio • .. Padre • @ identifica un attributo • first-of-any(), first-of-type(), last-of-any(), last-oftype() Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Struttura di un documento XSL xsl:stylesheet template per il (template per un elemento figlio)* documento azione sul documento azione sull’elemento figlio Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera <?xml version=“1.0”?> <xsl:stylesheet> <xsl:template match=“/”> [azione] </xsl:template> <xsl:template match=“Elenco”> [azione] </xsl:template> <xsl:template match=“Libro”> [azione] </xsl:template> ... </xsl:stylesheet> Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Creare un documento HTML <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <HTML> <HEAD> <TITLE>Elenco libri</TITLE> </HEAD> <BODY> <xsl:apply-templates/> </BODY> </HTML> </xsl:template> <xsl:template match=“Elenco"> <xsl:apply-templates/> </xsl:template> <xsl:template match=“Libro"> <xsl:apply-templates/> </xsl:template> … </xsl:stylesheet> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Trasformazione <?xml version="1.0"?> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘N’> <Titolo>Il nome della rosa</Titolo> <Autore>Umberto Eco</Autore> <Data>1987</Data> <ISBN>55-344-2345-1</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘S’> <Titolo>Il sospetto</Titolo> <Autore>F. Dürrenmatt</Autore> <Data>1990</Data> <ISBN>88-07-81133-2</ISBN> <Editore>Feltrinelli</Editore> </Libro> </Elenco> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera <HTML> <HEAD> <TITLE>Book Catalogue</TITLE> </HEAD> <BODY> Il Signore degli Anelli J.R.R. Tolkien 2002 88-452-9005-0 Bompiani Il nome della rosa Umberto Eco 1987 55-344-2345-1 Bompiani Il sospetto F. Dürrenmatt 1990 88-07-81133-2 Feltrinelli </BODY> </HTML> Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Trasformazione XML-XML <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/"> <NuovoElenco> <xsl:for-each select=“Elenco/Libri"> <Libro> <Titolo><xsl:value-of select=“Titolo"/> </Titolo> <xsl:if test=“@disponibilità = ‘S’"> <Editore><xsl:value-of select=“Editore"/></Editore> </xsl:if> </Libro> </xsl:for-each> </NuovoElenco> </xsl:template> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Trasformazione XML-XML <?xml version="1.0"?> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘N’> <Titolo>Il nome della rosa</Titolo> <Autore>Umberto Eco</Autore> <Data>1987</Data> <ISBN>55-344-2345-1</ISBN> <Editore>Bompiani</Editore> </Libro> <Libro disponibilità=‘S’> <Titolo>Il sospetto</Titolo> <Autore>F. Dürrenmatt</Autore> <Data>1990</Data> <ISBN>88-07-81133-2</ISBN> <Editore>Feltrinelli</Editore> </Libro> Progettazione di dati e applicazioni per il Web </Elenco> S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera <?xml version="1.0"?> <NuovoElenco> <Libro> <Titolo>Il Signore degli Anelli</Titolo> <Editore>Bompiani</Editore> </Libro> <Libro> <Titolo>Il nome della rosa</Titolo> </Libro> <Libro> <Titolo>Il sospetto</Titolo> <Editore>Feltrinelli</Editore> </Libro> </NuovoElenco> Il nuovo elenco per ogni libro contiene solo il loro titolo e, se questo è disponibile, anche la sua casa editrice. Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Associare un foglio di stile ad un documento XML <?xml version="1.0"?> <?xml-stylesheet type=“text/xsl” href=“file://localhost/EsempiXML-XSL/libri.xsl”?> <!DOCTYPE Elenco SYSTEM "file://localhost/EsempiXML-XSL/libri.dtd"> <Elenco> <Libro disponibilità=‘S’> <Titolo>Il Signore degli Anelli</Titolo> <Autore>J.R.R. Tolkien</Autore> <Data>2002</Data> <ISBN>88-452-9005-0</ISBN> <Editore>Bompiani</Editore> </Libro> … </Elenco> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Capitolo 1 Tecnologie per applicazioni Web Parte quinta: Architetture per la pubblicazione dinamica di contenuti Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Motivazioni • Produrre pagine “al volo” in base alle esigenze dell’utente e da contenuti strutturati (p.e. database) • Scripting & componenti client-side non bastano • Soluzioni: – Architetture per produrre contenuti dinamici a lato-server Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Common Gateway Interface • Interfaccia che consente al Web Server di eseguire applicazioni esterne in grado di creare pagine dinamicamente Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Caratteristiche di CGI • Non è: •un linguaggio di programmazione •un protocollo di comunicazione • Definisce solo un insieme di variabili di ambiente utili alla applicazione (ad es. parametri inviati dal client) %&£$$ pp*&£$ Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Invocazione • Il cliente specifica nell’URL il nome del programma da eseguire •Il programma deve stare in una posizione precisa (di solito il direttorio cgi-bin) http://mio.server.web/cgi-bin/xyz.exe root cgi-bin xyz.exe Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esecuzione 1. Il server riconosce dall’URl che la risorsa richiesta dal cliente e’ un eseguibile http://mio.server.web/cgi-bin/xyz.exe Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esecuzione 2. Il server decodifica i parametri inviati dal cliente e riempie le variabili d’ambiente es: request_method, query_string, content_length, content_type http://mio.server.web/cgi-bin/xyz.exe?#^@@ #^@@ P$&*£ Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esecuzione 3. Il server lancia in esecuzione l’applicazione richiesta #^@@ P$&*£ Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esecuzione 4. L’applicazione stampa la sua risposta sullo standard output Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esecuzione 5. Il server ridireziona lo standard output sulla rete e quindi verso il client Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Invio di parametri a un programma CGI • Il client può usare due metodi: •GET •POST •GET: i parametri sono codificati nell’URL http://www.mioserver.it/cgi-bin/xyz?par=val •POST : i parametri sono spediti al server separatamente, usando il body del messaggio di richiesta HTTP •NB: il metodo POST richiede l’uso di un costrutto HTML chiamato FORM Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Form HTML Esempio: invio al server il nome dell’utente <form action=http://www.mysrvr.it/cgi-bin/xyz.exe method=post> <p>Dimmi il tuo nome: <input type=text name=“chisei” ></p> <input type=submit > </form> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Form HTML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Struttura di un programma CGI leggi le variabili d’ambiente elabora stampa intestazione MIME “Content-type: text/html” stampa codice HTML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Decodifica dei parametri leggi la variabile Request_method Valore? GET leggi la variabile Query_string POST leggi la variabile content_length leggi content_length caratteri da standard input Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Revisione critica di HTTP • HTTP non prevede metodi per identificare l’utente • Ogni richiesta è trattata come un evento isolato: una nuova richiesta non ricorda nulla della precedente • Non esiste il concetto di sessione interattiva dell’utente: impossibile fare applicazioni personalizzate Revisione critica di CGI • Il web server genera un nuovo processo cgi ad ogni richiesta: viene terminato alla fine del computo della risposta: no sessione utente e condivisione risorse • Altissimo sovraccarico di esecuzione per la creazione e distruzione di processi Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Obiettivi delle architetture server side • Migliori prestazioni: creare processi solo in fase di inizializzazione del sistema e riusare un pool di processi pronti • Mantenimento dello stato: sfruttare la persistenza del processo per mantenere informazioni sulla sessione dell’utente (stateful application) • Condivisione delle risorse: mantenere allocate le risorse condivise • Scalabilità: aumentare il numero di processi applicativi all’aumentare del traffico Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Architetture “application server” Applicazioni Base di dati Client Web server Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Application server App. Servers Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Java Servlet http://java.sun.com/products/servlet/index.html JVM HTTP Request Browser HTTP Response parametri Servlet container risposta Applicazioni (servlets) • Servlet container: un programma Java che fornisce un ambiente persistente di esecuzione per applicazioni Web ed espone le caratteristiche del Web server come oggetti Java • Servlet: l’analogo di uno script CGI nel mondo Java Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Valutazione • Astrazione object-oriented delle proprietà di un server HTTP esteso (request, response, session ecc) • Programmazione complessa perchè bisogna produrre sia il testo statico che i contenuti dinamici • La presentazione HTML è mescolata al codice applicativo • Esigenza: serve una soluzione più semplice per produrre pagine in modo dinamico a lato server Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Server-side scripting • Idea: inserire istruzioni per il calcolo dei contenuti dinamici all’interno della pagina HTML • Il codice è interpretato dal server • Il browser riceve HTML puro <HTML> …. </HTML> <%> …... </%> <HTML> <BODY> …. </BODY> </HTML> Web server + Esecutore script Template: testo+script da interpretare sul server Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Java Server Pages (JSP) • JSP è una architettura per server-side scripting proposta da Sun (come alternativa a ASP di Microsoft) • Si fonda su tecnologia Java: linguaggio Java, Java Servlet, Java Beans • Cronologia: • Proposta presentata a JavaOne 98 • Versione 0.92: revisione pubblica conclusa a Genn. 99 • Versione 1.0 disponibile 1Q 99 • Versione 1.1 disponibile 1Q 00 • Versione 1.2 in uso da ottobre 2001 Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano File JSP Un file .asp contiene una combinazione di: Testo Tag HTML Istruzioni di server-side scripting E’ necessario disporre di un ambiente di compilazione apposito (ad es. Tomcat di Apache Jakarta) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Procedure ed espressioni Scriptlets procedure racchiuse tra delimitatori (<%…….%>) scritte in Java Espressioni Un’espressione ha la forma: <%= variable%> La variabile viene valutata e il valore risultante, convertito in stringa, viene inserito nella pagina al posto dell’espressione Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Direttive Direttive: <%@ variable=“value” %> il tipo di linguaggio da utilizzare all’interno del file JSP (<%@ language=”java”%>) il file .jsp o .html che viene ritornato al client se l’esecuzione della pagina JSP restituisce un errore (<%@ errorepage=”contactwebmaster.html”%>) i moduli (packages) importati dagli oggetti usati nella pagina (<%@ import=”java.io.*, java.util.Hashtable%>) Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Esempio <HTML> <HEAD> <TITLE>Request Information Example</TITLE> </HEAD> <BODY> <H3>Request Information Example</H3> Method: <%= request.getMethod() %> <BR> Request URI: <%= request.getRequestURI() %> <BR> User Agent: <%= request.getHeader("User-Agent") %> </BODY> </HTML> Risultato: la stessa pagina computata dal servlet mostrato in precedenza Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Compilazione • Il file JSP viene prima tradotto in un servlet • Il servlet viene compilato in bytecode • La versione compilata viene tenuta in memoria per rendere più veloce una successiva richiesta della pagina • NB: La versione originaria di Microsoft ASP (non ASP.NET) non compilava i template Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Valutazione Indipendenza dal tipo di browser utilizzato Il browser vede solamente pagine HTML All’utente non sono necessari programmi proprietari o estensioni del browser Maggior facilità di apprendimento e utilizzo rispetto a servlet Oggetti di utilità Nasconde la presenza di programmi script agli utenti e ad eventuali hacker Resta però codice (anche se poco) frammisto a markup HTML Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano Tag eseguiti a lato server Obiettivo: togliere il codice dai template di pagina Soluzione: nascondere il codice “dietro” tag “magici”, eseguiti dal server <%@ taglib uri="http://www.myserver.com/mytaglib" prefix=“mytag" %> <HTML> <HEAD><TITLE>Esempio di tag iteratore</TITLE></HEAD> <BODY> <mytag:iteratore att1=“un” att2=“due” att3=“tre!”> <p><mytag:elemento></p> </mytag:iteratore> </BODY> </HTML> Progettazione di dati e applicazioni per il Web S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera Copyright © 2003 - The McGraw-Hill Companies, srl Contenuto per concessione del Politecnico di Milano