Sviluppo di applicazioni Web Siti Web: software che mostra ad un utente informazioni in una modalità 'di sola lettura, senza cioè che esso possa interagire per modificare lo stato del software stesso (in particolare i dati). Applicazioni web: software, utilizzante la stessa infrastruttura di un sito, che consente ad un utente di interagire con esso permettendo la modifica dello stato del software (es. applicazioni di e-commerce) applicazioni software che utilizzano l architettura e le infrastrutture del World Wide Web Introduzione di nuovi modelli e metodi di sviluppo : l Ingegneria del Software applicata al mondo delle applicazioni web 1 Sviluppo di applicazioni Web Il Web engineering include diversi fattori e settori dello sviluppo software Multimedia Software Engineering Hypertext Human-Computer Interaction Testing Project Management Modeling and Simulation Information Engineering Requirements Engineering System Analysis and Design 2 Ingegneria del Software 1
Metodologie di Sviluppo di applicazioni Web Numerose metodologie sono state pensate appositamente per i siti web e, in seguito, per le applicazioni web ad esempio: - RMM (Relationship Management Methodology ) - OOHDM (Object-Oriented Hypermedia Design Method) - WEBML (Web Modeling Language) Negli ultimi anni, con l evoluzione tecnologica delle applicazioni web, si è provveduto ad adattare UML per la modellazione di applicazioni Web. 3 Metodologie di Sviluppo di applicazioni Web UML Utilizzo dei vari diagrammi per descrivere gli elementi, le relazioni tra essi, gli aspetti statici e dinamici delle applicazioni web Ma necessità di opportune estensioni alla notazione per le peculiarità delle Web application 4 Ingegneria del Software 2
Definizione dei requisiti Sviluppo delle applicazioni web: Una metodologia di sviluppo con UML Individuazione degli use case Use case diagram, Modello Concettuale dei dati Individuazione delle classi Class diagram, Studio dinamico Sequence diagram Implementazione Use case diagram Modello Concettuale Class diagram Sequence diagram 5 Classi: Pagina Client Pagina Server Form Associazioni: Link Submit Builds Redirect Sviluppo delle applicazioni web: Estensioni di UML <<submit>> <<redirect>> <<builds>> 6 Ingegneria del Software 3
Sviluppo delle applicazioni web: Uso dei diagrammi UML Use case diagram Dalla fase di analisi e dalla individuazione degli use case, con tali diagram si può indicare quali sono le relazioni tra gli use case e gli attori del sistema. Class diagram Fanno parte di tale diagram le molteplici pagine che costituiscono il sistema e le altre classi con cui tali pagine interagiscono. In questo caso la pagina è intesa come classe del sistema. Sequence diagram Nel caso delle web application tali diagram sono particolarmente significativi, visto che possono specificare come viene costruita la pagina per l utente e inoltre per ogni caso d uso indicano anche i passi che l utente deve seguire per giungere al risultato. 7 Sviluppo delle applicazioni web: Uso dei diagrammi UML E, inoltre Activity Diagram (utili per guidare la struttura della navigazione) Statechart Diagram Component Diagram Deployment diagram per strutture complesse. 8 Ingegneria del Software 4
Sviluppo delle applicazioni web: Modelli architetturali Oggetto Client Interprete del browser 5 b 5 a Browser Web 5 1 richiesta con parametri 4 Pagina web Web Server 3 Server 2 Esecuzione Pagina Server Oggetto DOM Pagina visualizzata all utente Application Server Client Database Interfaccia Database Oggetto generico 9 Sviluppo delle applicazioni web: Tecnologie realizzative Tecnologie server: CGI ASP PHP Cold Fusion JSP Tecnologie client: Javascript Jscript VBScript Flash Linguaggi ipertestuali: HTML XML Tecnologie client/server: Java 10 Ingegneria del Software 5
Sviluppo delle applicazioni web: CGI - Common Gateway Interface Prima tecnologia diffusa in maniera invasiva sul World Wide Web Architettura ispirata al modello Thin Web Client Linguaggio di scripting predefinito: PERL (permessi anche altri linguaggi di scripting, a patto che siano interpretati dal web server) richiesta+ parametri Web server Browser web Pagina visualizzata all utente Motore CGI 11 Sviluppo delle applicazioni web: ASP - Active Server Pages Tecnologia proprietaria Microsoft Le interazioni lato server sono codificate utilizzando uno dei linguaggi di scripting Microsoft (VBScript, JScript), congiuntamente a estensioni server ASP che permettono di interfacciarsi con database, posta elettronica, etc. Dal lato server è possibile gestire variabili di sessione L elaborazione della pagina asp sul web server produce una pagina client che viene inviata al browser. Nella pagina client può essere utilizzato un qualsiasi linguaggio di scripting 12 Ingegneria del Software 6
Sviluppo delle applicazioni web: ASP - Active Server Pages Richiesta con parametri Web server Browser web Interprete script Interprete linguaggi di script Pagina visualizzata all utente Database Oggetto ODBC Oggetto generico 13 Sviluppo delle applicazioni web: PHP - Hypertext PreProcessor Tecnologia non proprietaria Stessa architettura di asp, con un diverso linguaggio di scripting sul lato server Richiesta parametri con Web server Browser web Interprete Script Client Interprete linguaggi di script Pagina visualizzata all utente Database Oggetto Interfaccia Oggetto generico 14 Ingegneria del Software 7
Sviluppo delle applicazioni web: Gerarchia del DOM - Document Object Model 15 Un esempio: pronostici per i Mondiali di Calcio Requisiti funzionali: Registrazione di un utente Inserimento di scommesse da parte di un utente registrato Visualizzazione della classifica degli scommettitori Inserimento dei risultati da parte dell Amministratore, con aggiornamento della classifica degli scommettitori 16 Ingegneria del Software 8
Use Case Diagram Registrazione Utente non registrato Utente Visualizza Classifica <<include>> Scommettitore Scommessa Login <<include>> Inserimento Risultati Amministratore Login Amministratore <<include>> <<include>> Calcolo Classifica 17 Modello Concettuale Amministratore. 0..1 Riconoscimento() 0..n Utente. login : String password : String email : String Scommettitore Punteggio : Integer Registrazione() 0..n Calcolo Punteggio() Riconoscimento() n 0..n Scommessa segnos : String data : Date 0..n Partita squadre : String risultato : String segnop : String giocata : Boolean data : Date Inserimento Risultato() Classifica Inserimento() Calcolo Classifica() Scommettitore: un partecipante al gioco Partita: un incontro dei mondiali di calcio Scommessa: il pronostico, fatto da uno Scommettitore, sul segno di una Partita (uno, ics, due) Amministratore: l utente responsabile dell aggioranmento dei risultati e della classifica Un giocatore può scommettere su ogni partita, al massimo una volta. Ogni partita può essere scommessa da ogni giocatore 18 Ingegneria del Software 9
Modello del database 19 Use case registrazione nuovo giocatore - Class diagram Requisiti funzionali Inserire un nuovo scommettitore nel database, controllando che abbia una login che non sia già presente <<Client Page>> nuovo.htm check() <<HTML Form>> FormNuovo login password email <<submit>> nuovo.asp <<ADODB.Connection>> conn open() <<ADODB.Recordset>> rs RecordCount open() <<ADODB.Recordset>> rs2 open() 20 Ingegneria del Software 10
: Utente non registrato carica Use case registrazione nuovo giocatore - Sequence diagram : nuovo.htm : FormNuovo Riempi Form (login, email, password) Messaggio ("Dati incompleti") check( ) submit (login, email, password) : nuovo.asp builds : Client nuovo crea : conn open crea rs : rs Messaggio("Login già presente") Messaggio("Iscirizione effettuata") open(query elenco giocatori) close() open(query inserimento giocatore) close() close() rs2 : rs 21 File nuovo.htm Use case registrazione nuovo giocatore - Implementazione <script language =javascript > function check() { if (document.nuovo.email.value==" ) email="nessuna" if (document.nuovo.login.value=="") alert("non hai inserito il login!") if (document.nuovo.pass.value=="") alert("non hai inserito la password!") document.nuovo.submit() } </script> <form name=nuovo method=post action=nuovo.asp> Login <input name=login> Password <input type=password name=pass> E-mail <input name=email> <input type=button value=iscriviti onclick=check()> </form> La validazione dei dati è svolta nella pagina client per alleggerire il carico di elaborazione del server 22 Ingegneria del Software 11
Use case registrazione nuovo giocatore - Implementazione (2) File nuovo.asp login=request.form("login") pass=request.form("pass") email=request.form("email") Crea connessione al database set conn=server.createobject("adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") Controlla se il login fosse già utilizzato da un altro utente set rs=server.createobject("adodb.recordset") rs.open "select * from giocatore where login='"+login+"'",conn,3,3 if rs.recordcount<>0 then response.write("<script language=javascript>window.alert('esiste un utente con questa login');history.back();</script>") set rs=nothing Inserisce l utente nel database set rs2=server.createobject("adodb.recordset") rs2.open "INSERT INTO giocatore ( login, password, email ) SELECT '"+login+"','"+pass+"','"+email+"'",conn,3,3 set rs2=nothing Iscrizione effettuata <a href=login.htm>clicca qui per tornare al login</a> set rs=nothing set conn=nothing 23 Use case Scommessa - Class Diagram <<Client Page>> login.htm <<redirect>> <<HTML Form>> FormLogin login password <<submit>> Requisiti funzionali Effettuare una scommessa, da parte di uno scommettitore registrato, su una partita sulla quale non abbia già scommesso <<ADODB.Connection>>...>> conn open() accept.asp AccettaUtenteRegistrato() Accetta Amministratore() <<redirect>> menu.asp <<builds>> scomm.asp <<Built Client Page>> Client menu <<ADODB.Recordset>>...>> rs RecordCount open() <<builds>> <<Built Client Page>> Client scomm <<HTML Form>> FormScomm <<hidden>> IdPartita Segno <<submit>> insscomm.asp Inserisci Scommessa() 24 Ingegneria del Software 12
Use case Scommessa - Sequence Diagram : Utente carica() : login.htm : FormLogin riempi form (login,password) submit() Messaggio("Utente non riconosciuto") : accept.asp redirect : menu.asp setta id e login nelle var. di sessione click (scommessa) builds : Client menu link : scomm.asp builds : Client scomm : FormScomm riempi form (partita, segno) : insscomm.asp Messaggio ("Scommessa effettuata") redirect submit 25 login=request.form("login") pass=request.form("pass") Use case Scommessa - Implementazione: riconoscimento utenti set conn=server.createobject("adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") set rs=server.createobject("adodb.recordset") rs.open "select * from giocatore where login='"+login+"' and password='"+pass+"'",conn,3,3 rc=rs.eof if not(rc) then adm=rs("amministratore") : idg=rs("id") rs.close : set rs=nothing conn.close : set conn=nothing if rc then response.write("<script language=javascript>window.alert('non sei registrato');history.back();</script>") if adm then session("utente")="admin" <script language=javascript>location.href="menuadm.asp"</script> session("utente")="gioc : session("idg")=idg Login e password corrette: puoi scommettere <script language=javascript>location.href="menu.asp"</script> File accept.asp Riconoscimento dell utente Controllo amministratore Settaggio delle variabili di sessione 26 Ingegneria del Software 13
Use case Scommessa - Implementazione: Inserimento scommessa if session("utente")="gioc" then oggi=date() File scomm.asp Leggi partite giocate... rs.movefirst genera intestazione del form per la scommessa ora=now() Per ogni partita non ancora giocata for i=1 to rs.recordcount if (datediff("d",oggi,rs("data"))>0)or ((datediff("d",oggi,rs("data"))=0) and datepart("h",ora)<7 ) then Genera il form per scommettere rs.movenext next Utente non riconosciuto... 27 Use case Scommessa - Implementazione: Inserimento scommessa if session("utente")="gioc" then idp=request.form("idpartita") segn=request.form("segno") File insscomm.asp set conn=server.createobject("adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") 'Controlla che non sia già presente set gp=server.createobject("adodb.recordset") query=" select idpartita,idgiocatore from scommesse where idpartita="+cstr(idp)+" and idgiocatore="+cstr(session("idg")) gp.open query,conn,3,3 rc=gp.recordcount gp.close:set gp=nothing if rc>0 then Scommessa già effettuata 'Inserisce la scommessa nel database set rs=server.createobject("adodb.recordset") rs.open "scommesse",conn,1,2,2 rs.addnew rs("idgiocatore")=session("idg"): rs("idpartita")=idp: rs("segnos")=segn: rs("data")=date() rs.update rs.close:set rs=nothing:conn.close:set conn=nothing response.write("scommessa effettuata") response.end Accesso non consentito 28 Ingegneria del Software 14
Use case Inserimento Risultato - Class Diagram <<Client Page>> login.htm <<redirect>> <<HTML Form>> FormLogin login password Requisiti funzionali Inserire il risultato di una partita, ricalcolando la classifica generale <<submit>> <<ADODB.Recordset>> rs RecordCount open() <<ADODB.Connection>> conn accept.asp AccettaUtenteRegistrato() Accetta Amministratore() admris.asp <<redirect>> menuadm.asp <<builds>> <<Built Client Page>> Client menuadm <<redirect>> open() <<builds>> <<Built Client Page>> Client admris n <<HTML Form>> <<submit>> FormInsRisult goal1 : Integer goal2 : Integer adminsr.asp InserisciRisultato() CalcolaClassifica() 29 : Amministratore : login.htm : FormLogin load : accept.asp Riempi Form (login, password) submit Messaggio ("Amministratore riconosciuto") Use case Inserimento Risultato - Sequence Diagram : menuadm.asp settate le var. sessione Accetta Amministratore () redirect builds : Client menuadm : admris.asp click (inserisci risultato) link : Client admris : FormInsRisult : adminsr.asp Riempi Form (partita, goal1, goal2) builds submit InserisciRisultato( ) CalcolaClassifica( ) Messaggio ("Risultato inserito e classifica aggiornata") 30 Ingegneria del Software 15
if session("utente")="admin" then set conn=server.createobject("adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") Use case Inserimento Risultato - Implementazione Form ' visualizza le partite il cui risultato e' da inserire set rst=server.createobject("adodb.recordset") rst.open "select id,squadre from partite where not(giocata) order by data",conn,3,3 <table> rst.movefirst for i=0 to rst.recordcount-1 <tr> <form method=post action=adminsr.asp> <input type=hidden name=idp value= =rst("id") > response.write("<td width=60% >"+rst("squadre")+"</td>") response.write("<td width=10% > <input type=text name=goal1></td>") response.write("<td width=10% > <input type=text name=goal2></td>") response.write("<td width=20% > <input type=submit value=inserisci></td>") </form> </tr> rst.movenext next </table> rst.close:set rst=nothing:conn.close:set conn=nothing response.write("l'accesso a questa pagina e'permesso solo all'amministratore") 31 Use case Inserimento Risultato - Implementazione if session("utente")="admin" then idp=request.form("idp") risultato=request.form("goal1")+" - "+request.form("goal2") goal1=cint(request.form("goal1")) goal2=cint(request.form("goal2")) if goal1>goal2 then segnop="uno" if goal1<goal2 then segnop="due" if goal1=goal2 then segnop="ics" set conn=server.createobject("adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") ' aggiorna la tabella partite calcola la classifica azzera la classifica ' carica la tabella giocatori ' per ogni giocatore calcola il punteggio cl.addnew array("idgiocatore","login","vincita"),array(idgioc,tabgioc.fields("login"),v_vincita) cl.update conn.close set conn=nothing response.write("<a href=class.asp> Vedi Classifica </a>") response.write("accesso permesso solo all'amministratore") 32 Ingegneria del Software 16
Modello di Dettaglio <<redirect>> <<Server Pag... admris.asp menuadm.asp <<HTML Form>> FormInsRisult n goal1 : Integer <<submit>> goal2 : Integer adminsr.asp <<Client Page>> login.htm <<HTML Form>> FormLogin login password <<Client Page>> nuovo.htm check() <<submit>> <<redirect>> accept.asp AccettaUtenteRegistrato() Accetta Amministratore() <<HTML Form>> FormNuovo login <<submit>> password email nuovo.asp RegistraUtente() logout.asp ChiudiSessione() <<redirect>> menu.asp InserisciRisultato() CalcolaClassifica() class.asp VisualizzaClassifica() <<redirect>> <<submit>> scomm.asp insscomm.asp n <<HTML Form>> FormScomm <<hidden>> IdPartita Segno 33 Bibliografia J. Conallen. Modeling web applications with uml. White paper, Conallen Inc., http://www.conallen.com/whitepapers/webapps/modelingwebapplications.htm, March 1999. J. Conallen. BuildingWeb Applications with UML. Addison-Wesley Publishing Company, Reading, MA, 1999. ASP 3.0 Guida Completa di S. Mitchell, J. Atkinson, Apogeo HTML 4.01 Specification, http://www.w3.org/tr/html401/ Manuale Javascript, http://developer.netscape.com/docs/manuals/js/client /jsref/index.htm 34 Ingegneria del Software 17