Web applications (WA)

Transcript

1 Web applications (WA) Web application workflow Tutte le WA fanno all incirca le stesse cose Trasmettono al web server i dati Eseguono l elaborazione dei dati sul lato server (server-side processing) Formattano i risultati per il client Trasmettono al client i risultati 2

2 Web application workflow L utente L utentedefinisce una unaquery tramite tramite la la query query interface interface La La query query e e inviata inviataal al lato lato server server L agente L agenterisponde alla allaquery utilizzando utilizzandola la sorgente sorgentedei deidati dati Utente Utente Browser (clien-side itf) itf) Server-side processing Data Data source source I I risultati risultativengono mostrati mostrati I I risultati risultatisono sono formattati formattatie e inviati inviati al al client client La La sorgente sorgente dei dei dati dati restituisce restituisce il il risultato risultato della della query query 3 Web application technologies Browser (IE, Mozilla) Javascript, Java VBScript,ActiveX HTML forms Image MAP Cookies HTTP post/get Utente Utente Browser (clien-side itf) itf) Server-side processing Data Data source source Web server (Apache) Server-side script (PHP, Perl, ASP, JSP) Application server (Servlet/EJB container) CGI SQL ODBC driver DB 4

3 Esempio: interfaccia con DB Le pagine Web sono create al volo da un programma che invia delle query al database e produce un documento HTML in base ai risultati della query 5 WA innovation Static web Web of hypertext files with static content and fixed connections (links) Customized web Il contenuto dipende dall utente e dalle sue preferenze (sessioni) Dynamic web Il contenuto fornito dipende dall interazione con l utente (forms) 6

4 WA benefits Standardized technologies Integration of heterogeneous platforms User-friendly Lots of tech to pick Choose the right one! 7 3 componenti dell architettura Interfaccia utente (User Interface) obiettivo: presentare le informazioni all utente Gestore della logica (Processing Management) obiettivo: controllare l esecuzione delle elaborazioni Gestore dei dati (Data Management) obiettivo: consentire l accesso ai dati 8

5 Componenti e livelli Tre componenti: presentazione, logica e dati Due livelli: client e server (anche di piu ) Qual è la corrispondenza? client server 9 Classificazione client presentazione logica dati server es: elaboratore locale sistema indipendente presentazione logica dati es: database distribuito dati sistema a dati distribuiti presentazione logica es: file system condiviso dati sistema a dati remoti 10

6 Classificazione client presentazione logica es: Web server logica dati sistema a transazioni distribuite presentazione es: emulazione di terminale logica dati sistema a presentazione remota presentazione es: GUI alternativa presentazione logica dati sistema a presentazione distribuita 11 Structure of WA systems Light client (presentation only) Web browser Few processing power Web interface Web server as the middle tier Server-side scripting engine Back end DBs, TPS, 12

7 Tecnologie e strumenti Centinaia di tecnologie e strumenti per lo sviluppo di applicazioni Web, che però ricadono in 4 categorie Display layer Communication layer Middleware layer Data layer 13 Tecnologie e strumenti Data Layer Middleware Layer Communication Layer Display Layer Utente 14

8 Quadro di riferimento 15 Display layer

9 Display layer Detto anche "font-end" Interfaccia fra l utente e il calcolatore Compito tradurre intenzioni, desideri, necessità, richieste dell'utente in istruzioni comprensibili dal calcolatore tradurre i dati generati dal calcolatore in informazioni comprensibili all utente 17 Display layer Creazione e modifica di UI widgets, o controlli bottoni, menu, finestre di dialogo, immagini cliccabili,... Parole chiave: intuitività e facilità d uso fondamentali per la qualità percepita dall utente 18

10 Tecnologie Quelle che consentono di creare interfacce basate su widgets 19 Form I form HTML sono un esempio di widget consentono di definire formati standard di input (test box, bottoni, menu, quiz,...) 20

11 Cookie I cookie sono dei piccoli file di testo che servono per memorizzare piccole quantità di informazioni sul computer dell utente possono essere letti soltanto dal sito di origine mantengono lo stato dell applicazione: HTTP è un protocollo stateless (che non conserva lo stato) Questo è quanto può fare il Web browser per andare oltre: plug-in 21 Plug-in Ai browser Web sono richieste sempre nuove caratteristiche supporto alla visualizzazione di audio, video, animazioni, interattività,... Browser più potenti? Meglio di no meglio leggeri perché siano veloci necessario un aggiornamento continuo Soluzione: plug-in aggiunta di nuove componenti, di dimensioni ridotte, solo quando richiesto 22

12 Java Linguaggio di programmazione sviluppato dalla Sun Microsystems nel 1991 Nasce come plug-in, ma è ben presto integrato nei browser Ritorna ad essere un plug-in Java Virtual Machine interpreta il codice Java (applet) scaricato dal Web server Libreria di widget estremamente completa 23 JavaScript Linguaggio di script sviluppato da Netscape Il codice JavaScript è parte integrante del documento HTML E interpretato dal browser (client), non richiede programmazione sul lato server Permette al client di intraprendere azioni direttamente senza passare dalla rete Consente la creazione di widgets Check dei forms 24

13 VBScript Risposta di Microsoft a JavaScript inizialmente Microsoft aveva sviluppato JScript, poi in gran parte abbandonato in favore di VBScript Linguaggio di script basato su Visual Basic 25 DHTML Dynamic HTML, consente di combinare l'html con i fogli stile (CSS, Cascading Style Sheets) e con i linguaggi di script I fogli di stile (Style Sheet) consentono di controllare la visualizzazione di un documento Web senza comprometterne la struttura font, colori, margini,... 26

14 Communication layer Communication layer Trasferire i dati inseriti dall utente dal browser Web al Web server L informazione deve essere trasferita interamente, correttamente, e nella sequenza in cui è stata inserita In più l informazione può (o deve) essere trasferita in modo sicuro nessuno deve poterla leggere, modificare, o spacciarsi come autore 28

15 Communication layer Molte tecnologie Problema: la comunicazion e deve essere garantita fra tipi di calcolatori e di programmi diversi 29 I protocolli Standard di comunicazione estremamente rigorosi che garantiscono il dialogo fra calcolatori e programmi diversi Protocollo TCP/IP (Transmission Control Protocol / Internet Protocol) insieme (suite) di protocolli alla base di Internet gestisce la comunicazione fra i nodi di una rete 30

16 I protocolli Protocollo HTTP (Hypertext Protocol) protocollo utilizzato dai browser e dai server Web per scambiarsi informazioni protocollo privo di stato (stateless), di tipo richiesta/risposta che gestisce il trasporto ed il mantenimento dell integrità dei documenti multimediali Protocollo HTTPS (HTTP sicuro) versione di HTTP che utilizza la comunicazione criptata 31 La crittografia È il metodo più diffuso per proteggere i dati I dati vengono alterati tramite una formula matematica prima di essere trasmessi, in modo da essere illeggibili I dati originali possono essere recuperati applicando la formula matematica inversa 32

17 La crittografia Due tipi di crittografia Crittografia a chiave segreta simmetrica mittente e ricevente hanno la stessa chiave per codificare/decodificare i dati problema: trasmettere la chiave segreta Crittografia a chiave pubblica e privata asimmetrica due chiavi, una privata e una pubblica 33 Crittografia asimmetrica Coppia di chiavi, una privata (mai trasmessa) ed una pubblica (trasmessa a tutti) i testi codificati con la chiave pubblica possono essere decodificati con la chiave privata: messaggi protetti i testi codificati con la chiave privata possono essere decodificati con la chiave pubblica: certificazione del mittente, firma digitale 34

18 Crittografia asimmetrica A Chiave privata Chiave pubblica B Chiave privata Testo criptato Chiave pubblica + Testo originale 35 Crittografia asimmetrica A Chiave privata + Testo criptato = Testo originale B Chiave pubblica 36

19 Crittografia asimmetrica A Chiave privata + Testo originale Testo "certificato" B Chiave pubblica 37 Crittografia asimmetrica A Chiave privata B Chiave pubblica + Testo "certificato" = Testo originale che proviene da A 38

20 Middleware layer Middleware layer Nel 99,9% delle applicazioni Web, il browser Web si connette ad un Web server Il Web server è il punto di ingresso del Middleware Layer Scopo: accettare le richieste in arrivo ed elaborarle, utilizzando le risorse fornite dal Web server o dalla rete di server e di risorse a cui il Web server è connesso 40

21 Middleware layer SOAP 41 CGI Common Gateway Interface Strumento di base per accedere alle risorse del Web server Servizio fornito da tutti i Web server che consente di Creare uno script eseguibile che il Web server può richiamare su richiesta Trasferire dati allo script Ottenere il risultato dello script (e.g. pagina) 42

22 CGI CGI non è un linguaggio di programmazione, ma un interfaccia standard per accedere alle risorse Definisce un modo di far dialogare il Web server con le risorse Le applicazioni CGI possono essere scritte in un qualunque linguaggio di programmazione C, Perl, Python 43 HTML vs. CGI Differenza chiave: è possibile generare le informazioni dinamicamente documento HTML browser Web (client) server Web script CGI applicazione 44

23 CGI 45 SSI Problema degli script CGI e la velocità di esecuzione Ogni volta che il Web server riceve una richiesta deve eseguire lo script CGI Soluzione: estendere le funzionalità del Web server, aggiungendo capacità logiche e di elaborazione Server Side Includes La prima delle tecnologie sviluppate in questa direzione 46

24 SSI Tag particolari sono inseriti nel documento HTML Il server Web è in grado di interpretare questi tag, e di tradurli al volo mentre il documento HTML viene trasferito al browser 47 SSI Nel documento HTML vengono inserite delle direttive SSI 48

25 SSI e tag proprietari Partendo dall idea di SSI alcune aziende hanno sviluppato dei Web server dotati di moltissime funzionalità per rendere le pagine dinamiche es: Cold Fusion (la più conosciuta, oltre 70 tag custom definiti), Net Objects 49 ASP Active Server Pages La tecnologia SSI è limitata all insieme di comandi/tag offerti da chi ha implementato il Web server SSI-enabled Come inserire in una pagina HTML del codice che su richiesta venga interpretato dinamicamente dal Web Server? Per questo è nata la tecnologia ASP PHP JSP 50

26 ASP ASP è un estensione dell IIS Web server rilasciata da Microsoft Anche il Web server Apache ha un estensione che permette di utilizzare la tecnologia ASP Consente di inserire script in VBScript (o JavaScript) 51 ASP Un pagina ASP è semplicemente un file di testo con estensione.asp che contiene codice HTML e script Gli script sono interpretati dinamicamente prima che le pagine vengano trasmesse al browser per la visualizzazione Come tutte le tecnologie del lato server (server-side) le funzionalità sono compatibili con qualunque browser L'elaborazione è fatta dal server, e il risultato è visualizzato come semplice HTML 52

27 Java server-side Alternativa alle tecnologie CGI o ASP Si puo utilizzare la libreria Java Due tecnologie legate a Java Java Server Pages (JSP): simile ad ASP (scriptlet e expression) con script in Java Java Servlet: simile a CGI, ma scritti in Java e supporto per sessioni ad alto livello 53 Data layer

28 Data layer I dati sono un elemento fondamentale delle applicazioni Web Caratteristiche dei dati Valore (bit), un tipo (as int), una struttura (record) Presentazione Le tecnologie del Data layer hanno lo scopo di standardizzare queste caratteristiche 55 Data layer 56

29 XML extensible Markup Language Linguaggio estensibile realizzato per elaborare i documenti strutturati Pensato per il Web e per superare i limiti dell HTML HTML è un linguaggio predefinito XML è un meta-linguaggio Non ha tag predefiniti Consente di definire nuovi linguaggi 57 Le componenti di XML Tre parti fondamentali di un documento che dovrebbero essere gestite separatamente Il contenuto (XML) La specifiche della struttura Document Type Definition (DTD) XML Schema Definition (XSD) Le specifiche relative allo stile di visualizzazione XML Stilesheet Language (XSL) 58

30 Le componenti di XML Contenuto Struttura Stile 59 Esempio di struttura CarOwners Owner Owner Car Car Model Year 60

31 Esempio di struttura (DTD) <?xml version="1.0" encoding="utf-8"?> <!ELEMENT CarOwners (Owner)*> <!ELEMENT Owner (Car)+> <!ATTLIST Owner id CDATA #REQUIRED first CDATA #REQUIRED last CDATA #REQUIRED > <!ELEMENT Car (Model,Year)> <!ELEMENT Model (#PCDATA)> <!ELEMENT Year (#PCDATA)> 61 Esempio di struttura (XSD) <xsd:element name="carowners"> <xsd:complextype> <xsd:sequence minoccurs="0" maxoccurs="unbounded"> <xsd:element name="owner"> <xsd:complextype> <xsd:sequence maxoccurs="unbounded"> <xsd:element name="car /> </xsd:sequence> <xsd:attribute name="id" type="xsd:string use="required"/> </xsd:complextype> 62

32 Esempio di contenuto (XML) <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="table.xsl"?> <!DOCTYPE CarOwners SYSTEM "cars.dtd"> <CarOwners> <Owner id="1" first="pippo" last="baudo"> <Car> <Model>Audi 80</Model> <Year>1999</Year> </Car> </Owner> </CarOwners> 63 Esempio di stile (XSL) <?xml version="1.0" encoding="utf-8"?> <xsl:template match="/"> <html> <head><title>cars DB</title></head> <body> <h1>owners</h1> <table border="1"> <xsl:for-each select="carowners/owner"> <tr> <td><xsl:value-of <td><xsl:value-of <td><xsl:value-of </tr> </xsl:for-each> </table> 64

33 Esempio XML DTD XSD Contenuto e Struttura XML Processor XSL Stile Visualizzazione HTML WML SQL 65