Come applicazione web di tutorial si presenta un tipico sito per l ecommerce, dopo una introduzione approfondita alla tematica.

Transcript

1 Autore: Classe: Nicola CECCON QUINTA INFORMATICA (5IA) Anno scolastico: 2007/2008 Scuola: Itis Euganeo APPLICAZIONE WEB for ECOMMERCE Sintesi sulla tematica della progettazione e realizzazione di applicazioni web, cioè di quelle applicazioni che permettono la creazione di siti dinamici, mediante l utilizzo delle tecnologie internet, per la realizzazione di servizi interattivi dipendenti dalla consultazione di database remoti. Come applicazione web di tutorial si presenta un tipico sito per l ecommerce, dopo una introduzione approfondita alla tematica.

2 Indice Basic concepts pagina 3 Progettazione di una applicazione web pagina 13 Applicazione di ecommerce pagina 34 Pubblicazione dell applicazione web pagina 69 Esercizi pagina 72 Bibliografia pagina 73 Sitografia pagina 73 Note pagina 73

3 Basic concepts HTTP Il protocollo HTTP (Hyper Text Transfer Protocol) funziona su un meccanismo richiesta/risposta (client/server): il client esegue una richiesta ed il server restituisce la risposta. Nell'uso comune il client corrisponde al browser ed il server al sito web. Vi sono quindi due tipi di messaggi HTTP: messaggi richiesta e messaggi risposta. In altri termini il protocollo HTTP è il protocollo che sovrintende al dialogo tra un client web (user agent) ed un server web (server agent), è possiamo dire che è il linguaggio nativo del web. Il protocollo HTTP 1 presenta alcune caratteristiche: E' un protocollo a caratteri, cioè i messaggi scambiati tra client e server sono costituiti da sequenze di caratteri, dove per messaggi si intende la richiesta del client e la risposta del server in termini di informazioni di controllo. Il server, invece, a seguito di una richiesta URL 2 può restituire oltre a caratteri anche dati binari (immagini, audio, video) nello standard MIME 3. Prevede per ogni singola interazione tra client e server il seguente processo: 1) Apertura di una connessione di livello di trasporto (TCP) tra client e server utilizzando la porta well know numero ) Invio di una singola richiesta da parte del client, che specifica l'url desiderata. 3) Invio di una risposta del server e dei dati richiesti nella URL. 4) Chiusura della connessione a livello di trasporto. Il processo evidenzia come il protocollo sia stateless, cioè non è previsto il concetto di sessione all interno della quale ci si ricorda dello stato dell'interazione fra client e server, cioè ogni singola interazione è storia a se ed è del tutto indipendente dalle altre. L assenza del concetto di sessione costituisce una problematica poiché mentre in moltissime situazioni di navigazione è necessario ricordare lo stato dell'interazione tra client e server come, per esempio, nei siti di ecommerce, dove il contesto vede l utente effettuare il login, riempire il carrello, inserire i dati della carta di credito e confermare l ordine. In un caso come questo è essenziale che il server HTTP sia in grado di capire che la request effettata da un certo client è associabile ad un altra, cioè che si tratta esattamente dallo stesso client. In altre parole il server deve essere in grado di capire che i dati della carta di 1 Il protocollo versione HTTP/1.1, presentato come RFC 2068 nel 1997 e successivamente aggiornato nel 1999 come descritto dal RFC URL è l acronimo di Uniform Resource Locator o URL è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine. Ogni Uniform Resource Locator si compone normalmente di tre parti: tiposerver://nomehost/nomefile: 1. la prima parte indica il tipo di server, ovvero lo schema o protocollo utilizzato per indirizzare la risorsa (ad esempio http); 2. la seconda parte si riferisce al nome dell'host o server, oppure a un nome di dominio (FQDN) (ad esempio 3. la terza infine indica il path o nome file della risorsa (per esempio Euganeo/inf.htm). 3 MIME è l acronimo di Multipurpose Internet Mail Extensions ed è uno standard generico per il formato dei documenti scambiati sulla rete Internet tramite posta elettronica, news, WWW (standard generico significa che prevede tutte le possibili funzionalità per la trasmissione dei documenti; non è poi detto che un applicativo sia in grado di realizzarle tutte). 4 Porta di default, se non specificata altra porta (tra le utilizzabili) 3

4 credito che sono stati inviati con una request si riferiscono ad una certa lista di prodotti che è stata selezionata ed inviata in precedenza. Pagine WEB E fondamentale capire che nella interazione con un sito non necessariamente quello che è memorizzato sul server web è quello che l utente visualizza sul proprio browser, in altri termini il file sul server può essere diverso dal contenuto trasmesso. Questa differenza è legata al fatto che l attuale tecnologia permette di avere due tipologie pagine: Pagine web statiche. Pagine web dinamiche. Pagina statica In una pagina web statica, il contenuto della pagina viene stabilito una volta per tutte nel momento in cui si crea e si memorizza la pagina sul server web e quindi ogni volta che un utente accede a una pagina statica, il browser presenta sempre le stesse informazioni, a meno che non venga aggiornata, cioè riscritta dall autore del sito. E evidente che le pagine statiche sono file HTML indicate per visualizzare informazioni che non cambiano spesso. Per esempio, gli utenti Bob e Alice accedono, da un altra pagina del sito, alla pagina Prodotti e ricevono entrambi lo stessa pagina (contenuto giallo). 4

5 Pagina dinamica In una pagina web dinamica, detta anche pagina web interattiva, i contenuti della pagina variano: In funzione degli input dell utente (per esempio l autenticazione ad un servizio di mailing list, la selezione di una categoria di prodotti). A causa del verificarsi di un evento sul server (per esempio il variare di una immagine nella Home page al variare dell accesso). Per esempio, gli utenti Bob e Alice accedono ad una pagina del sito provenienti da un altra e ricevono due contenuti diversi (Bob riceve la paginacon contenuto celeste, mentre Alice riceve il contenuto rosa). Le pagine web dinamiche sono: Indicate per visualizzare informazioni che dipendono dall interazione. File con uno o più parti di codice in un linguaggio di programmazione o tecnologia apposita per la realizzazione di pagine dinamiche. E importante sottolineare che il codice della pagina dinamica è nascosto all utente che riceve sempre una pagina HTML, cioè il server web prima di inviare la pagina all utente trasforma la pagina dinamica in una pagina statica generando, come si dice, al volo il codice HTML come risultato di una elaborazione del codice dinamico presente nella pagina sul server. Questa elaborazione del codice dinamico è effettuata da un apposito modulo o componente software del server web oppure un software esterno in stretta relazione con esso, definito script engine, che assolve alla funzione di interprete del linguaggio dinamico. 5

6 Database I database e il server DBMS che li gestisce giocano un ruolo fondamentale nella progettazione e costruzione di una applicazione web, infatti una tipica pagina web dinamica interroga un database (remoto) e visualizza i dati risultanti dall interrogazione. Un metodo tipico di interazione prevede l'utilizzo di un form, cioè la possibilità di inviare richieste al server utilizzando un modulo elettronico di invio dati. Per esempio, gli utenti Bob e Alice utilizzano un form di Login per autenticarsi ed accedere ad un area riservata del sito, i dati per l autenticazione sono registrati in un database. A seguito dell autenticazione Bob e Alice ricevono due contenuti (listini) diversi. 6

7 Tipologie di utenti e database La presenza di un database comporta la definizione di tre tipologie di utenti: Amministratore che ha pieno accesso al database. Il database può essere modificato dall amministratore tramite una o più pagine dinamiche, che costituiscono la parte della applicazione web riservata all amministratore 5, mediante il DBMS associato oppure con un software appositamente scritto, per esempio in Visual Basic. Utente che ha un accesso parziale spesso in solo lettura, tipicamente per visualizzare dati a seguito di query di ricerca come, per esempio, la consultazione di un catalogo di prodotti. Utente che ha un accesso anche in scrittura, tipicamente per l inserimento di dati che lo riguardano o l utilizzo di alcuni servizi, come l inserimento di un prodotto nel carrello della spesa. Per esempio Bob (utente con accesso parziale) interagisce con il sito dinamico ricevendo un elenco di prodotti, Tommy inserisce nel database dati con un form e Alice (amministratore) gestisce il database utilizzando un DBMS e/o un pannello di controllo di gestione del database E' chiaro che l interazione dipende dalla tipologia di utente e che non consiste solo nella visualizzazione di dati, ma anche nella modifica o inserimento. Si possono usare pagine web dinamiche anche per modificare il contenuto del database in funzione degli input dell utente: all utente viene presentato un form, per consentirgli di immettere i dati che verranno impiegati per inserire nuovi record, oppure per modificare o per eliminare record esistenti. 5 Questa parte prende comunemente il nome di Pannello di controllo. 7

8 Definizioni di applicazione web Un'applicazione web è costituita da pagine dinamiche per un ambiente multiutente, cioè il problema consiste nel realizzare programmi che devono interagire contemporaneamente con più utenti. Questo significa che indipendentemente dalla piattaforma software le problematiche sono sempre le stesse: il problema della integrità e quello della consistenza dei dati. Si devono però considerare le differenze tra la programmazione per un'applicazione multiutente e la programmazione per una applicazione web, sintetizzabili nelle seguenti due: 1) La differenza non é data tanto dal fatto che il programma é distribuito tra pagine, perché un software si realizza in moduli che interagiscono, ma dal fatto che il protocollo HTTP comporta che le pagine sono senza memoria 6. Senza memoria significa che una volta che la pagina dinamica é stata processata dal server web, trasformata in HTML e inviata, tutti i dati della pagina vengono persi, cioè il server non mantiene le informazioni sulle precedenti richieste dell utente o in altri termini il server web si stacca completamente dal client e si pone semplicemente in attesa di un altra richiesta chiudendo la connessione con il client. Non vengono mantenute quindi le informazioni sullo stato della connessione del client e per questo si dice che il protocollo HTTP è stateless, cioè senza stato. Poichè, l esecuzione di una applicazione web consiste in una serie di interazioni disconnesse e compito del programmatore è garantire la continuità dell applicazione durante la sequenza di interazioni dell utente. Per esempio, se invio il codice personale alla pagina di autenticazione di un sito di ecommerce questo viene perso una volta che la pagina di autenticazione viene processata con l invio della risposta dell autenticazione: il codice non é più disponibile per le altre pagine, come la pagina per il pagamento con la carta di credito che necessita degli stessi dati. 2) Un'altra differenza rispetto ad altre applicazioni è data dalla larghezza di banda della trasmissione disponibile e dal carico di lavoro sul server. Questi due fattori incidono sulla quantità di informazioni trasferibili tra server e client ed anche sull interfaccia utente che deve necessariamente essere alleggerita dai componenti grafici non strettamente necessari. E quindi prioritario, quando possibile, ottimizzare il carico di lavoro tra client e server facendo per esempio svolgere al client la validazione dei dati in modo da diminuire il carico sul server e la trasmissione di informazioni di controllo ed errore. Definizione accurata di applicazione web (last) Una applicazione web è una applicazione client/server per un ambiente stateless, cioè senza memoria, che utilizza le tecnologie di Internet. Pertanto, saper programmare per il web significa essere in grado di programmare in un ambiente "senza memoria", cioè conoscere i diversi meccanismi e strumenti per conservare o passare i dati, detti parametri, tra le diverse pagine dell'applicazione web. Per esempio, come fare in modo che il codice personale inviato alla pagina di autenticazione di un sito di ecommerce sia anche disponibile alla pagina per il pagamento con la carta di credito, senza dover reintrodurlo. 6 Il modello di interazione del web è privo di del concetto di connessione. 8

9 Approcci per creare pagine web dinamiche Le pagine web dinamiche si possono creare mediante un elaborazione dal lato server (programmi compilati, script lato server), oppure tramite una combinazione di elaborazioni dal lato server e dal lato client (scaricamento ed esecuzione nel client di programmi compilati, script dal lato client), in particolare: Nell elaborazione dal lato server, il server web riceve la richiesta della pagina web dinamica, esegue tutte le operazioni necessarie per crearla e invia la pagina completata al client, affinché venga visualizzata nel suo browser. Nell elaborazione dal lato client, alcune elaborazioni sono eseguite nella stazione di lavoro client, sia per comporre la richiesta della pagina web dinamica, sia per crearla o per visualizzarla. Elaborazioni dal lato client Un approccio all elaborazione dal lato client prevede lo scaricamento di programmi eseguibili compilati (Applet Java 7 di SUN, ActiveX 8 di Microsoft), conservati sul server web, nel browser dell utente, e quindi la loro esecuzione nella stazione di lavoro dell utente. Il browser e il sistema operativo dell utente devono essere in grado di elaborare il file del programma eseguibile 9. Un altro approccio all elaborazione dal lato client si basa sugli script 10 lato client. Questa tecnica permette di digitare codice non compilato, in linguaggi quali JavaScript 11 o VBScript, nel documento HTML insieme con il testo statico HTML: tag (marcatori) particolari indicano al browser dell utente che il testo è un codice di programma e se il browser è in grado di riconoscere e di interpretare il codice lo esegue. Grazie a questo approccio, è possibile realizzare interfacce utente più complesse di quelle che si possono ottenere tramite il normale HTML 12. Un uso tipico di questa tecnica è la validazione 13 dell input, cioè il controllo della correttezza degli input dell utente presso la sua stazione di lavoro, anziché nel server web, riducendo quindi il traffico di rete e migliorando le prestazioni dell applicazione. 7 Java è un linguaggio di programmazione che costituisce un sottoinsieme semplificato del C++. Si usa comunemente per creare applicazioni web, chiamate applet Java, che si possono scaricare nel browser di un utente da un server web, e quindi eseguire direttamente all interno del browser. Dal momento che l applet Java gira in un ambiente di esecuzione Java generico, fornito dal browser 7, l esecuzione dell applet è identica in qualsiasi sistema operativo e con qualsiasi browser web. Per ragioni di sicurezza, le applet Java possono ricevere dati da un server web e inviarglieli, ma non possono leggere o scrivere dati su qualsiasi file nella stazione di lavoro dell utente. 8 I programmi ActiveX si possono creare mediante molti linguaggi di programmazione e in ambienti diversi, purché questi linguaggi supportino i protocolli ActiveX della Microsoft. 9 La differenza principale fra un programma web ActiveX e un applet Java risiede nel modello della sicurezza, infatti le applet Java hanno un rigido modello della sicurezza, che impedisce loro di danneggiare il computer client sul quale operano, mentre le applicazioni ActiveX hanno accesso completo 9 al sistema operativo e ai file del computer client. 10 Uno script è un programma e la differenza fra i due termini è che per tradizione, i documenti eseguibili compilati sono chiamati programmi, e i programmi interpretati sono chiamati script. 11 Da non confondere con Java. 12 E importante sottolineare la non stabilità degli script il cui funzionamento varia al variare del browser e delle versioni dello stesso browser. Inoltre, questo codice comporta dei problemi di accessibilità. 13 Il caso tipico è il controllo sulla presenza e sulla forma dell indirizzo di posta elettronica in una casella di testa in un form. 9

10 Elaborazioni dal lato server Le elaborazioni lato server possono essere ottenute con programmi compilati oppure programmi non compilati detti script lato server che vengono interpretati ed elaborati durante l esecuzione sul server. I programmi compilati possono essere realizzati con diversi linguaggi 14 e indipendentemente dal linguaggio si utilizza il protocollo Common Gateway Interface CGI, in pratica un protocollo per eseguire programmi su un server HTTP. Uno svantaggio, nell usare programmi basati su CGI, è che un server web avvia una copia del programma ogni volta che c è la richiesta, quindi per esempio è possibile che un server web molto attivo esaurisca la sua capacità di memoria, se serve molte richieste contemporaneamente 15. Un altro approccio, per creare pagine web dinamiche che usano l elaborazione dal lato server, utilizza script dal lato server (server side scripting). Uno script dal lato server è costituito da codice non compilato che viene inserito all interno della pagina HTML (HTML Embedded) per estenderne le capacità, come per esempio, per abilitare il file HTML della pagina web a eseguire interrogazioni (query) sul database. Il codice di scripting viene eseguito dal motore presente sul server prima che la pagina web venga inviata al browser che riceverà quindi esclusivamente il codice di mark-up generato dinamicamente in funzione dei risultati dell'elaborazione e non avrà alcun accesso al codice server-side che ha generato la risposta. Fra gli esempi 16 della tecnologia che usa questo approccio, vi sono: Active Server Page ASP 17 di Microsoft. PHP Tipici linguaggi sono Java, Visual Basic,C++ e soprattutto il Perl. Il Perl (Practical Estraction and Report Language) è un linguaggio finalizzato principalmente alla trattazione di stringhe e file di testo particolarmente per le ricerche di sequenze di caratteri all'interno di stringhe (pattern matching), sostituzioni di sottostringhe (pattern substitution), operazioni su file di testo strutturati in campi e record oppure non strutturati. Per questi motivi il Perl è abbastanza, anche se meno di un tempo, utilizzato nella scrittura di procedure CGI installate su un server web, o per lo sviluppo di procedure di manutenzione delle attività di un server. 15 Per questo motivo in seguito della diffusione di siti web interattivi, i fornitori di server hanno sviluppato tecnologie proprietarie. Fra gli esempi di tecnologie che risolvono questo problema, vi sono: Netscape Service Application Programming Interface (NSAPI, interfaccia di programmazione per applicazioni di servizio della Netscape) e Internet Server Application Programming Interface (ISAPI, interfaccia di programmazione per applicazioni di server Internet), della Microsoft. 16 Elenco non esaustivo. 17 Microsoft Active Server Pages (ASP) is a server-side scripting environment that you can use to create and run dynamic, interactive Web server applications. Dalla definizione di Microsoft si capisce che ASP non é un linguaggio di scripting, ma un ambiente per la creazione dinamica di pagine... La generazione avviene con l'ausilio di un linguaggio di scripting ASP-compatibile, cioè supportato da ASP o meglio con più linguaggi dato che una pagina ASP può ospitare contemporaneamente diversi linguaggi di scripting. La pagina ASP contiene normalmente scripting ASP ed eventualmente codice nei linguaggi di scripting lato client (tipicamente JavaScript per la portabilità del codice su più piattaforme). L'utilizzo di ASP implica la definizione di un file ".asp" che contiene: In termini insiemistici si potrebbe definire l'insieme ASP in questo modo: ASP = (testo, tag HTML, comandi ASP, linguaggi di scripting). 18 PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. Il suo nome è un acronimo ricorsivo che sta per PHP: Hypertext Preprocessor (PHP: preprocessore di ipertesti). Il motore di esecuzione di PHP è Open Source e si presenta tradizionalmente come un modulo da affiancare ad un web server Apache. Il motore di PHP5 è il nuovo Zend Engine II che contiene il nuovo modello ad oggetti e decine di nuove funzionalità. PHP5 fornisce una completa architettura object oriented affiancata ala più comune programmazione procedurale. È stata completamente riscritto il supporto al linguaggio XML utilizzando l'eccezionale libreria libxml2. È stata riscritta anche l'integrazione con il database più amato dagli sviluppatori PHP, si tratta di MySQL. La nuova 10

11 Java Server Pages JSP. Python. Gli script server side sono interpretati ed elaborati durante l esecuzione sul server da un particolare modulo associato al server web detto script engine lato server. Nella figura che segue si illustra come esempio lo schema generale di interazione con un form. L utente, per prima cosa, chiede una pagina web dinamica e il browser dell utente inoltra la richiesta al server web. Quindi, il server web avvia un programma (lo script engine) per elaborare la richiesta. Il programma compone una interrogazione (query) e la invia al database. Il database restituisce al programma i dati richiesti. Qui i dati vengono formattati in una pagina web HTML dal server web. Poi il server rimanda la pagina web dinamica al browser dell utente. Tommy <HTML> <?php SELECT * FROM Prodotti?> <HTML> Richiesta <HTML> AA 1200 BB 1300 CC 1435 <HTML> Risposta Script engine Server Web Risposta SQL PRODOTTI AA 1200 BB 1300 CC 1435 SELECT * FROM Prodotti Richiesta SQL Server DB Schema generale di interazione per mezzo di form (scripting PHP e interogazione SQL) con server separati su stessa rete locale. estensione si chiama MySQLi ed è dedicata al nuovissimo MySQL 4.1. Questa nuova estensione comprende le interfacce object-oriented in aggiunta a quelle tradizionali. Inoltre supporta tutte le caratteristiche avanzate di della versione 4 di MySQL. È stato creato un nuovo supporto nativo per SQLite. 11

12 E' importante sottolineare che il server web e il server di database possono essere processi in esecuzione su una unica macchina come su macchine separate 19, collegate tipicamente, ma non necessariamente 20, in rete locale LAN. Architettura di una applicazione web L architettura di una applicazione web si sviluppa su tre livelli logico-funzionali, detta Three-Tier: 1. Livello di presentazione. È il livello dell interfaccia utente (corrispondente al client) che si occupa di acquisire dati e visualizzare i risultati dell applicazione web ed è costituito da diversi componenti combinati tra loro come il browser, i documenti HTML, gli script lato client 2. Livello intermedio o Business Logic. È il livello che contiene la logica elaborativa dell applicazione che permette di soddisfare le richieste di dati e di elaborazione del client. Il livello dipende dal server web utilizzato, e dai suo componenti, ed è costituito da script, cioè da codice dinamico, in base alla tecnologia utilizzata (ASP, PHP ). 3. Livello dati. E il livello che non fornisce servizi direttamente tramite il server web, ma che sono forniti da applicazioni indipendenti dall ambiente web. Tipici esempi sono i server di dati (DBMS) e i server di . In particolare per i database è opportuno utilizzare delle tecnologie di connessione 21 tra il livello intermedio e il livello dei dati in modo da rendere indipendente l applicazione dalla tipologia di dati utilizzati per future modifiche. Infrastruttura applicazione web L infrastruttura applicazione web è costituita dal sistema operativo e dal server web utilizzato e attualmente dominano due infrastrutture competitive: 1. Sistema operativo Linux 22 con server web Apache e scripting server side PHP. 2. Sistema operativo Microsoft Server con server web Microsoft IIS e scripting server side ASP. E importante sottolineare che la scelta dell infrastruttura web incide anche sulla scelta del linguaggio di scripting e sul database Ovviamente la scelta della separazione su due macchine server diverse è una soluzione spesso più performante. 20 Potrebbero essere collegate in modalità sicura attraverso Internet. 21 Come ODBC, ADO 22 O in termini più generali sistemi Unix come Mac OS Server X della Apple. 23 Per finalità didattiche si citano i database MySQL e Microsoft SQL che non esauriscono l insieme delle soluzioni affidabili presenti sul mercato come Oracle, Interbase, DB2... Non è comunque raro trovare come database Microsoft Access nonostante le limitazioni che comporta. In linea generale, nel primo caso si opta per il linguaggio PHP e il database MySQL mentre nel secondo per ASP e il database Microsoft SQL oppure MySQL. 12

13 Progettazione di una applicazione web In un applicazione web si devono progettare: 1. La Business Logic, cioè le operazioni consentite che determinano l interazione tra utente e sito 2. Il Database, in pratica quali informazioni si conservano e come 3. Gli script, cioè soluzione al problema dell'ambiente stateless, SQL, 4. Il sito, vale a dire l organizzazione del sito e l interfaccia delle pagine e il risultato di questa progettazione è formalizzato con degli schemi che si utilizzano nella fase implementazione dell applicazione. Si consideri come esempio l applicazione Forum allo scopo di specificare i concetti introdotti in precedenza. Un Forum di discussione permette agli utenti di un sito di discutere tra loro scambiando informazioni, consigli, pareri Nei Forum più semplici i messaggi sono organizzati in maniera gerarchica su un unico livello, con in radice le discussioni e per ogni discussione i messaggi, in quelli più complessi sono possibili più livelli. Un qualsiasi utente può leggere i messaggi (con diverse tecniche di selezione), ma tipicamente 24 solo gli utenti registrati al servizio possono inserire o rispondere ad uno specifico messaggio (funzione Quote o Cita). La registrazione comporta la richiesta di dati personali e della coppia di informazioni per l autenticazione: Nickname-Password. La differenziazione tra gli utenti può essere fatta: con la disabilitazione dell'operazione di inserimento nell interfaccia della pagina oppure con un controllo nella fase d inserimento del messaggio, con conseguente invio alla pagina di registrazione o di login (o un avviso con la possibilità di accedere alla registrazione). Progettazione della Business Logic per un forum Nella progettazione del funzionamento dell'applicazione é consigliabile procedere con una metodologia che si basa sulla definizione di scenari d utilizzo relativi a diversi tipi d utente, allo scopo di individuare le possibili interazioni e, quindi, le risposte dell applicazione. Gli scenari d utilizzo hanno l obiettivo di individuare le possibili interazioni degli utenti, in modo da saturare lo spazio d utilizzo introducendo funzionalità del sistema o vincoli d uso e quindi servono per stabilire i diversi moduli software (pagine con scripting) che l'applicazione deve presentare. Uno scenario parte dalla individuazione delle categorie di utenti definendo un profilo per ogni utente rappresentativo 25 ricorrendo ad indagini statistiche o definendo delle tipologie di utenti (attribuendo dei nomi fittizi, actor drama ). 24 Questa limitazione cerca di rispondere alla prblematica dell abuso e della responsabilità nell utilizzo di questo mezo di comunicazione e in alcuni forum l inserimento del messaggio non è automatico, ma avviene dopo un controllo di convalida da parte di un responsabile del forum o della singola discussione (il cosidetto Moderatore del forum). 25 Iinformazioni personali e obiettivi dell utente. 13

14 Per esempio in un forum i seguenti scenari: 1. Utente registrato, legge e scrive (Alice) 2. Utente non registrato o Registra, vuole parecipare scrivendo (Francesco) o Non si registra, legge solo (Toni) 3. Moderatore di una discussione (Marco) 4. Amministratore (Arturo) 5. Utente che ha perso la registrazione (Teresa) A questo livello risulta essere utile (anche ai fini della progettazione di un sito usabile) predisporre delle schede per ogni utente. Definiti gli utenti si procede alla definizione dei task dell utente, cioè le possibili azioni che l utente può compiere, rappresentandole mediante l utilizzo di un linguaggio per i task oppure di diagrammi in cui si evidenziano oltre ai task anche la destinazione di un task stabilita dall applicazione. In particolare una tecnica di progettazione prevede l utilizzo del linguaggio UML 26 dei casi d uso, detti Use Case, che prevede l individuazione di attori e situazioni di un particolare scenario, mentre in questa dispensa si utilizzano degli appositi diagrammi, appositamente creati, più semplici, che possono anche rappresentare contemporaneamente diverse categorie di utenti. I task non rappresentano le pagine dell applicazione web, ma le azioni che dipendono dal tipo di utente: un task può essere costituito da più pagine, si pensi ad esempio al login ad un servizio in cui oltre alla pagina di login c è la pagina di gestione dell errore di accesso. Consideriamo alcuni esempi. Il diagramma dei task per l esempio dell applicazione per un forum nel caso di un utente non registrato e che legge soltanto (Toni) è il seguente: Visualizza HOME Lettura discussioni Lettura messaggi 26 UML, in particolar modo, è un linguaggio per la definizione di modelli che permette di migliorare la comprensione della realtà studiata attraverso diverse tipologie di diagrammi che conducono ad una visione globale del sistema. Questi diagrammi descrivono il comportamento del sistema o parte di esso attraverso un set di azioni eseguite da uno o più attori. Questo strumento permette di evidenziare le funzionalità che il sistema mette a disposizione dal punto di vista esterno, dell utente, come una black box sigillata e quindi osservarne solo i comportamenti dall esterno. I casi d uso sono i modi in cui il sistema può essere utilizzato e nel caso delle applicazioni web ricalcano in buona parte la navigazione del sito. 14

15 Il diagramma dei task per l esempio dell applicazione per un forum nel caso di un utente registrato (Alice) al servizio è il seguente: Visualizza HOME Login Lettura discussioni Lettura messaggi [ 1b ] [ 1a ] [ 1c ] Utente loggato? Inserimento messagio Cita Messaggio Il diagramma dei task per l esempio di un forum nello scenario di un utente registrato. Note: [1a] Login prima dell inserimento del messaggio o citazione, utente non loggato. [1b] Dopo il Login si ritorna all inserimento oppure alla citazione del messaggio. [1c] Utente che ha effettuato il Login con successo. 15

16 Il diagramma dei task per l esempio dell applicazione per un forum nel caso di un utente non registrato e che vuole partecipare scrivendo (Bob) al servizio è il seguente: Visualizza HOME Registrazione Lettura discussioni Lettura messaggi [ 1b ] [ 1a ] [ 1c ] Utente loggato? Inserimento messagio Cita Messaggio Il diagramma dei task per l esempio di un forum nello scenario di un non utente registrato. Note: [1a] Registrazione prima dell inserimento del messaggio o citazione. [1b] Dopo la registrazione si ritorna all inserimento oppure alla citazione del messaggio. [1c] Utente che ha effettuato il Login con successo. 16

17 Il diagramma complessivo dei task per l esempio dell applicazione per un forum nel caso di un utente non registrato (Alice), di uno non registrato e che vuole partecipare scrivendo (Bob) e di un utente non registrato e che legge soltanto (Toni) è il seguente al servizio è il seguente: Visualizza HOME Registrazione Login Lettura discussioni [ 1d ] Lettura messaggi [ 1b ] [ 1a ] [ 1c ] Utente loggato? Inserimento messagio [ 1e ] Cita Messaggio Note: Il diagramma dei task per l esempio di un forum comprensivo di diversi scenari (tipologie di utente). [1a] Login prima dell inserimento del messaggio o citazione, utente non loggato. [1b] Dopo il Login si ritorna all inserimento oppure alla citazione del messaggio. [1c] Utente che ha effettuato il Login con successo. [1d] Il tentativo login porta alla registrazione per un utente non registrato. [1e] Dopo la registrazione si ritorna all inserimento oppure alla citazione del messaggio. 17

18 Consideriamo i task utente per un giornale on line che permette di stampare la versione stampabile dell articolo e di inviare l articolo ad un amico tramite . Visualizza HOME Lettura articolo Versione stampa Scegli articolo (indice) Invia amico Stampa Diagramma dei task per un giornale on line. Dopo il forum consideriamo l esempio di una chat (aziendale), altro servizio molto popolare in Internet, così caratterizzata: 1) Il navigatore può partecipare alla chat registrandosi al servizio con la compilazione di un form presente in Home Page o nella pagina Chat. 2) La registrazione si completa con l inviare l indirizzo valido, il Nickname e la Password. 3) Gli utenti, attraverso un login (Nickname e Password), accedono alla chat che permette di inviare e leggere i messaggi, comprensivi di Emoticon, nella parte pubblica e di avere in tempo reale l elenco degli utenti collegati (i Nicknames). 4) La chat non permette la comunicazione privata e presenta un unica stanza. 18

19 Lo schema dei task dell applicazione chat per un utente registrato e per uno non registrato è il seguente: Visualizza HOME CHAT Login Registrazione [ 1c ] Conferma registrazione [ 1b ] Login corretto? [ 1a ] Lettura messaggi Inserimento messagio Diagramma dei task per un utente registrato e uno non registrato al servizio. Note: [1a] Login prima dell inserimento del messaggio o citazione, utente non loggato. [1b] Dopo il Login si ritorna all inserimento oppure alla citazione del messaggio. [1c] Utente che ha effettuato il Login con successo. 19

20 Progettazione Database Il risultato della progettazione è il database relazionale in forma normalizzata. Nel caso, per esempio, del forum organizzato su due livelli il database relazionale, semplificato, potrebbe essere il seguente: Discussioni (CodDiscussione 27, Discussione, Moderatore) Messaggi (CodMessaggio,Testo, DataInserimento, OraInserimento, CodDiscussione) Membri (CodMembro, Cognome, Nome, Nickname, Password, , DataRegistrazione, TipoMembro, CodAvatar ) Avatar (CodAvatar, Descrizione) Progettazione sito Si progetta il sito sulla base delle best practice di usabilità e linee guida di accessibilità, come nei seguenti esempi: Esempio interfaccia di una Home page con servizio newsletter Progettazione degli Script È la fase di progettazione del codice che consiste in: 1. Individuazione e scelta dei meccanismi di condivisione dei parametri tra le pagine per risolvere il problema dell'ambiente stateless 2. Scelta della tecnica di connessione al database 3. Definizione delle istruzioni SQL di accesso al database 4. Eventualmente può essere utile la progettazione degli script mediante l utilizzo di un linguaggio di pseudoscripting 27 In sottolineato la chiave primaria, doppiasottolineatura chiave esterna. Dan e Pulvini, classe VIA Area progetto per esame di stato as 06/07 ITIS Euganeo 20

21 Meccanismi per il passaggio dei parametri Un parametro è una coppia costituita da un nome e un valore associato, per esempio nel caso del parametro Nickname per l accesso ad un servizio utilizzando un form la coppia potrebbe essere (NICK Paperino123) in cui NICK è stabilito dal programmatore e Paperino123 è inserito dall'utente. Esistono tre tipi di parametri: 1) Parametri a livelli di pagina, disponibili per una sola pagina Parametri che devono essere passati da una pagina sorgente ad un'altra di destinazione e che sono disponibili esclusivamente per la pagina di destinazione e non per altre Distinguiamo tra: 11. Parametri Form, passati utilizzando il form. 12. Parametri URL, passati utilizzando un collegamento 28 2) Parametri a livello di sessione utente, disponibili per tutte le pagine 3) Parametri a livello di applicazione, disponibili per tutti gli utenti e le pagine contemporaneamente connessi nel web in un dato istante (esempio UtentiConnessi) I parametri giocano un ruolo fondamentale nell applicazione web: le pagine dell'applicazione, infatti, interagiscono tra di loro passandosi, con diverse tecniche, dei parametri che concorrono a determinare la creazione della pagina HTML inviata al browser. E quindi grazie ai parametri e ai meccanismi di passaggio che si supera la disconnessione tra le pagine. Queste tecniche devono permettere: a. La creazione dei parametri. b. L'invio dei parametri. c. La lettura o recupero degli stessi. d. La cancellazione. I parametri, però, hanno una diversa visibilità: Parametri a livelli di pagina sono visibili solo alla pagina di destinazione e solo all utente coinvolto nella interazione. Parametri a livello di sessione utente sono visibili in tutte le pagine e solo all utente coinvolto nella interazione. Parametri a livello di applicazione sono visibili in tutte le pagine e per tutti gli utenti coinvolti nella interazione. Parametri Form In questo caso il passaggio dei parametri avviene a seguito di una interazione attiva, con il navigatore che nella pagina contenente il form oltre ad inserire i dati effettua l invio dei dati alla pagina di destinazione con la pressione di un apposito pulsante. Per esempio nel caso di una procedura di registrazione ad un servizio di newsletter la pagina sorgente (formregistra.php) contiene il form con tutti i dati da inserire, mentre la pagina di destinazione, (registra.php), è quella che effettua la validazione dei dati e l eventuale inserimento nel database. 28 Definito passaggio mediante URL. 21

22 Parametri Form e passaggio. Note: [1a] Errore nella validazione porta automaticamente alla pagina sorgente. I parametri sono definiti nel codice della pagina sorgente all interno del tag <FORM> </FORM> come tag con l attributo NAME per il nome e INPUT 29 o VALUE 30 per il valore, mentre il metodo di passaggio (METHOD= GET o METHOD= POST ) e la pagina di destinazione (ACTION= nome_pagina ) sono specificati come attributi all interno di <FORM>. L azione di invio del form, quindi la richiesta dell URL specificato con accodamento dei parametri è svolta da un pulsante (INPUT TYPE= SUBMIT ). Si ricorda che i parametri passati alla pagina di destinazione e a nessun altra pagina, in altri termini i parametri hanno visibilità solamente per la pagina di destinazione cosa che indubbiamente può costituire un problema. 29 In un campo di input il valore è inserito dall utente. 30 In un campo di selezione o opzione il valore è scelto dall utente da una lista, con possibilità di scegliere iù di un valore. 22

23 In riferimento all esempio della procedura di registrazione se la pagina di destinazione dell invio del form registra.php effettua la sola validazione, mentre l inserimento viene effettuato dalla pagina insregistra.php quest ultima pagina non ha la visibilità dei dati elaborati dalla pagina registra.php rendendo quindi necessario il passaggio dei parametri da questa alla pagina che effettua l inserimento. Visibilità dei parametri Form. Note: [1a] Errore nella validazione porta automaticamente alla pagina sorgente. I parametri Form presentano la problematica, spesso sottovalutata e fonte di errore 31, della loro validazione, cioè la conformità dell input dell utente al valore da inviare come, per esempio, la presenza del carattere su un indirizzo di oppure una quantità all interno di un range. La validazione può essere effettuata lato client, quindi a livello dell utente senza interazione con il server, oppure lato server, con la conseguente interazione. Nel primo caso gli eventuali messaggi si errore sono comunicati come finestre di errore, nel secondo con l invio di una pagina di errore che specifica gli errori e contiene il Form oppure che rimanda al Form iniziale. 31 Errori di usabilità, ma anche errori molto più gravi di sicurezza come nel caso dell Inject SQL 23

24 Parametri URL In questo caso il passaggio avviene a seguito di una interazione implicita, cioè l utente non effettua un inserimento dei dati e l invio alla pagina di destinazione, ma attiva un collegamento alla pagina con la trasmissione dei parametri associati al collegamento. I parametri URL associati al collegamento sono creati dall applicazione, quindi dal programmatore, a seguito, tipicamente e del risultato di una interrogazione al database: è il caso tipico della consultazione di un catalogo on line in cui si parte dal generale per arrivare al particolare. Indipendentemente dal tipo di parametro a livello di pagina questi sono passati come stringa di testo accodata all'indirizzo URL della pagina di destinazione in base alla seguente sintassi: Il carattere? separa il nome della pagina dai parametri. Coppia parametro e valore separate dal carattere =. Il carattere & per separare le coppie. dominio pagina parametro parametro protocollo nome valore index.asp forum.asp login.asp sfondo.jpg logo.gif forum2008.mdb URL, passaggio parametri e sito su HD server. 24

25 Un esempio. Si consideri il tipico caso di un elenco di prodotti e della visualizzazione del dettaglio di ogni prodotto: in questo l elenco dei prodotti è generato dalla interrogazione del database e il codice del prodotto da visualizzare è trasmesso alla pagina di visualizzazione del dettaglio come parametro URL, associato dinamicamente ad ogni prodotto tramite il nome del prodotto. Oppure, per una videoteca l'elenco dei film di un attore con il collegmanto del dettaglio del film sul titolo del film. attori.php filmdet.php?codfilm=123 filmdet.php attori.php?codattore=46 Elenco film attore (generale) con parametro URL e dettaglio film (particolare) con parametri URL. 25

26 Risulta ovvio che in questa tipologia di parametro non esiste un problema di validazione, anche se si deve gestire l eventualità che l utente digiti direttamente l indirizzo URL della pagina comportando, perciò, un valore vuoto per il parametro (una soluzione reindirizza alla pagina sorgente oppure si attribuisce un valore di default). Parametri a livello di sessione utente L utilizzo delle sessioni permette di associare, lato server, chiamate che arrivino da uno stesso singolo client, legandole addirittura al pid del processo del client sulla macchina che lo ospita, questo garantisce unicità ed innumerevoli possibilità Sono parametri accessibili a tutte le pagine, ma esclusivamente al singolo utente durante la sessione 32 : due o più utenti che accedono alla stessa pagina utilizzano gli stessi nomi di parametri, ma con valori diversi, sono cioè nella programmazione utilizzati come variabili globali temporanee o permanenti. Altre tecniche, alcune già presenti come proprietà delle request stessa, come il tipo del browser, l indirizzo IP del chiamante ecc. non sono sufficienti a distinguere univocamente il client, pertanto è necessario disporre di un linguaggio di scripting con le sessioni. La sessione così ci permette di stabilire un "dialogo" con l'utente del sito, superando uno dei limiti del protocollo HTTP. Ovviamente, non sempre questo è un problema: la normale navigazione sui siti Internet può tranquillamente avvenire, ma ci sono, invece, delle situazioni in cui è importante stabilire questa specie di dialogo tra l'utente ed il server, in quanto ogni operazione che l'utente compie può influenzare le successive ed essere influenzata dalle precedenti. Un esempio è quello dei siti con aree riservate: se un certo numero di pagine è visibile solo agli utenti registrati, questi devono autenticarsi per poterle vedere, ma una volta effettuata l autenticazione devono essere messi in grado di vedere tutte le pagine dell'area riservata, senza, ovviamente, doversi autenticare di nuovo per ciascuna pagina; questo è possibile solo se il server ricorda che quell'utente si è già autenticato: il ricordo per ogni utente è la funzione dei parametri di sessione. Distinguiamo tra: Parametri di Sessione passati mediante un apposito oggetto o tecnica del linguaggio del programmazione Parametri Cookies Parametri di Sessione Sono parametri temporanei, assimilabili a variabili globali temporanee, che hanno una scadenza temporale, la cui durata si può cambiare rispetto a quella di default, oltre la quale il sistema li cancella. Presentano le seguenti caratteristiche: I parametri sono cancellati quando l utente chiude il browser I parametri sono cancellati quando scade la sessione 33 L implementazione dipende dal linguaggio di scripting utilizzato 32 Una alternativa, quando possibile, prevede il passaggio mediante form nascondendo il parametro specificando l'elemento del form come HIDDEN (nas costo). 33 Impostazione del file di configurazione del server 26

27 Il funzionamento delle sessioni è molto semplice, il server apre una sessione e gli assegna un nome univoco. Analizza l'utente, raccoglie i dati che vogliamo e li salva in un file 34 sul server che porta lo stesso nome della sessione. Nello stesso tempo deposita un cookie (header HTTP) nella macchina dell'utente. Ogni volta che ne ha bisogno dal cookie estrae i dati per risalire alla sessione e al file salvato. In pratica abbiamo una memoria virtuale salvata sul server. I dati rimarranno associati all'utente remoto, per tutte le pagine future e fino alla distruzione della sessione stessa od alla chiusura del browser. Nel diagramma che segue si evidenzia la visibilità dei parametri per due utenti nel caso di accesso ad un area riservata del sito. Visibilità NICK bob12 4 NICK alice21 NO Bob Alice SI SI login.php SI homear.php PASS NO SI IDUSER autentica.php listino.php ordini.php fatturazione.php errore.php Parametri di sessione (NICK) e visibilità, il parametro di sessione è creato nella pagina autentica.php se l autenticazione ha sucesso. 34 Il nome del file di testo è una stringa alfanumerica casuale lunga (32 caratteri alfanumerici), la quale stringa viene inviata al browser (trasparentemente all'utente ed al programmatore e sempre secondo il protocollo usato), di modo che, non appena l'utente richiederà un'altra pagina Web, il suo browser, re-inviando il nome della sessione al server, farà in modo che PHP sappia qual'è il suo file di sessione e quali dati associare a questa nuova richiesta ed all'utente. La stringa identificativa della sessione, scambiata tra le parti, che punta al file su server prende il nome di SID, Session IDentifier. 27

28 Ma se il navigatore non ha i cookie abilitati? Semplice, non si apre la sessione. Per ovviare a questo problema la soluzione, che però perde in sicurezza 35, è utilizzare parametri URL, cioè passare i dati tramite le query string. E evidente la necessità di effettuare un controllo preventivo sulla ricevibilità dei cookie e prevedendo l alternativa oppure un messaggio di errore. Nel caso di cookie non abilitati l utente riceve una pagina(avviso.php) con un messaggio di richiesta di abilitazione alla ricezione dei cookie. 35 La sicurezza di questo procedimento è compromessa dal fatto che un malintenzionato potrebbe prendere nota del codice di sessione. (possibilità comunque remota). 28

29 Parametri Cookies I cookies sono dei file di testo che sono generati e letti sul lato server sul quale è posto il sito web, e che vengono memorizzati sul lato client, ottimizzando in tal modo le risorse di memoria sul server. I cookies hanno diverse proprietà tra cui spiccano il nome, il valore, il server e la scadenza. Esistono due diversi tipi di cookies: Temporanei che durano sino a che l'utente non chiude il browser e che sono equivalenti ad un parametro di sessione. Permanenti che durano sino ad una data di scadenza impostata indipendentemente dalla chiusura del browser (corrispondono a delle variabili globali permanenti). E' soprattutto quella dei cookies permanenti una strada molto utilizzata per condividere i parametri tra tutte le sessioni di un utente in tempi diversi. Poiché sono memorizzati sul disco fisso del client, basta solo interrogare i cookies come se fossero semplici variabili, e ciò è possibile farlo anche a distanza di tempo. Infatti un cookies é molto di più di una variabile: una variabile una volta chiusa l'applicazione web, muore con essa, mentre, al contrario, i cookies restano sul computer del visitatore 36. Lo svantaggio dei cookies è che l utente deve avere nel proprio browser abilitata la ricezione altrimenti l applicazione non funziona correttamente. È per questo importante effettuare un controllo sull abilitazione prima della generazione e prevedere una pagina informativa che avvisa l utente di abilitare i cookies se vuole continuare ad utilizzare il sito (ed eventualmente spiegare come farlo a seconda del browser utilizzato). Il cookie, quindi, viene utilizzato quando vi è l'incombenza di memorizzare dei dati in particolari contesti 37, un esempio é il carrello in un sito di ecommerce: il codice del carrello, unico per ogni utente, per la gestione della prenotazione dei prodotti é assegnato all'utente all'accesso della Home page e disponibile in tutte le pagine dell'applicazione. Pertanto, la pagina di inserimento nel carrello effettua l'operazione prelevando (leggendo) il cookie assegnato. Nel diagramma che segue, per esempio, Alice entra nel sito e riceve l Home page H2, riservata ai visitatori, che tornano invece della pagina H1 per i visitatori che accedono per la prima volta. Alice è stata riconosciuta dal server web grazie ad un cookie (nome TIPO con valore H2 e scadenza 13 novembre 2008) presente nel suo computer in precedenza invitato alla prima visita. Bob invece riceve la pagina di deefault H1 e il cookie, che permetterà al prossimo accesso di ricevere la pagina H2. Invece, maargherita riceverà sempre la pagina H1 poiché ha disabilitato la ricezione di cookie (oppure solo rifiutato questo cookie). 36 Si deve fare attenzione all utilizzo dei cookies perché l utente mediamente non li sopporta e tende ad eliminarli oppure a disabilitarne la ricezione. A dire il vero se ne conosce l'esistenza e se é in grado di farlo (cosa del tutto non ovvia). 37 Uno svantaggio nell utilizzo si ha nel caso di dati personali e/o password in quanto i cookies sono dei semplici file di testo e quindi di facile lettura da tutti. 29