Continuiamo l‘approfondimento della Web Application Extension, l‘estensione di UML per le applicazioni: dopo aver visto nel dettaglio i fondamentali teorici e tecnici della WAE, e la modellazione di vari aspetti di una web application, concludiamo la serie sulla progettazione di applicazioni web con UML presentando un semplice esempio di applicazione dei concetti esaminati nei precedenti articoli.

Introduzione

Nei precedenti articoli abbiamo introdotto l‘argomento della progettazione di applicazioni web con UML e abbiamo approfondito come modellare i principali elementi di una applicazione web con UML. In questo articolo vediamo un semplice esempio di applicazione in un caso pratico.

La funzione login

L‘esempio che tratteremo è quello di una funzione di login ad una applicazione web. La funzione di per se è molto semplice ma lo scopo è quello di applicare i concetti visti sino ad ora e non di analizzare un esempio complesso che farebbe perdere di vista l‘obiettivo dell‘articolo.
Il caso d‘uso da realizzare è rappresentato nella figura seguente:

L‘utente si collega alla pagina di login e immette userid e password. Il sistema provvede alla validazione di userid e password. Se le credenziali sono valide il sistema consente all‘utente l‘accesso altrimenti visualizza un opportuno messaggio di errore.

Ipotizziamo di realizzare la funzione con una pagina JSP chiamata login.jsp che contiene due input type di tipo testo e password rispettivamente. Inoltre supponiamo che il submit del form HTML venga realizzato mediante una funzione Javascript di nome invia().
La richiesta client è servita da una servlet che funge da controller e riceve nella request la userid e la password digitate nella pagina JSP. La servlet si interfaccia con il livello di business-logic tramite un‘interfaccia che definisce il metodo per la convalida delle credenziali. Una classe di implementazione contiene il codice del metodo che viene eseguito.
Il class-diagram che utilizza gli stereotipi WAE è quello nella figura seguente:

Ovviamente questo schema è molto semplice dal punto di vista dei pattern utilizzati però ci consente di vedere all‘opera i diversi stereotipi analizzati negli articoli precedenti e le diverse modalità  di rappresentazione dei vari elementi dell‘applicazione.
Si possono innanzitutto notare le associazioni di tipo <> tra le pagine JSP e le pagine html, che stanno a rappresentare come la pagina HTML interpretata dal browser internet sia frutto di una elaborazione di una pagina server dinamica. Il form HTML è legato da una associazione di inclusione alla pagina client e dalla associazione di tipo <> con la servlet che funge da controller.
Il form contiene i campi di input per userid e password.
E‘ interessante notare come si sia rappresentata anche la presenza di un file .js di funzioni Javascript incluso nella pagina client e legato a questa da una relazione stereotipata <