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 Web Engineering: l’Ingegneria del Software applicata al mondo delle applicazioni web Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 1 Sviluppo di applicazioni Web Il Web engineering include diversi fattori e settori dello sviluppo software Software Engineering Multimedia Hypertext Human-Computer Interaction Web Engineering Requirements Engineering Testing Project Management Modeling and Simulation Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software Information Engineering System Analysis and Design 2 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. Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 4 2 Sviluppo delle applicazioni web: Una metodologia di sviluppo con UML • Definizione dei requisiti • Individuazione degli use case èUse case diagram, Modello Concettuale dei dati Modello Concettuale • Individuazione delle classi è Class diagram, Use case diagram • Studio dinamico èSequence diagram • Implementazione Class diagram Sequence diagram Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 5 Sviluppo delle applicazioni web: Classi: Estensioni di UML Pagina Client Pagina Server Form Associazioni: Link Submit Builds Redirect <<submit>> <<redirect>> <<link >> <<builds> > Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 6 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. Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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. Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 8 4 Sviluppo delle applicazioni web: Modelli architetturali Server 1 richiesta con parametri Interprete del browser 5a Browser Web Web Server 4 Pagina web 5b 2 Esecuzione Pagina Server 5 Oggetto Client 3 Pagina visualizzata all’utente Oggetto DOM Application Server Client Database Interfaccia Database Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Oggetto generico 9 Sviluppo delle applicazioni web: Tecnologie realizzative Tecnologie server: CGI ASP PHP Cold Fusion JSP Tecnologie client: Javascript Jscript VBScript Flash Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software Linguaggi ipertestuali: HTML XML Tecnologie client client/server: /server: Java 10 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 12 6 Sviluppo delle applicazioni web: ASP - Active Server Pages Web server Richiesta con parametri Browser web Interprete script Interprete linguaggi di script Pagina visualizzata all’utente Oggetto ODBC Oggetto generico Database Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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 con parametri Web server Browser web Interprete Script Client Pagina visualizzata all’utente Interprete linguaggi di script Database Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software Oggetto Interfaccia Oggetto generico 14 7 Sviluppo delle applicazioni web: Gerarchia del DOM - Document Object Model Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 16 8 Un esempio: pronostici per i mondiali di calcio Use Case Diagram Registrazione Utente non registrato Visualizza Classifica <<include>> Utente Scommessa Amministratore Login Scommettitore <<include>> Inserimento Risultati <<include>> Login Amministratore <<include>> Calcolo Classifica Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 17 Un esempio: pronostici per i mondiali di calcio Modello Concettuale Amministratore. 0..1 Riconoscimento() Utente. login : String password : String email : String 0..n Scommettitore Punteggio : Integer Registrazione() 0..n Calcolo Punteggio() Riconoscimento() n Classifica 0..n 0..n Scommessa segnos : String data : Date Partita squadre : String risultato : String segnop : String giocata : Boolean data : Date Inserimento Risultato() 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 18 9 Un esempio: pronostici per i mondiali di calcio Modello del database Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 19 Un esempio: pronostici per i mondiali di calcio 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 <<ADODB.Connection>> conn open() <<submit>> <<Server Page>> nuovo.asp <<ADODB.Recordset>> rs RecordCount open() <<ADODB.Recordset>> rs2 open() Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 20 10 Un esempio: pronostici per i mondiali di calcio Use case registrazione nuovo giocatore - Sequence diagram : Utente non registrato : nuovo. htm carica : 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 open( query elenco giocatori) close() rs2 : rs Messaggio("Login già presente") open( query inserimento giocatore) close() close() Messaggio("Iscirizione effettuata") Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 21 Un esempio: pronostici per i mondiali di calcio Use case registrazione nuovo giocatore - Implementazione File nuovo.htm <script language =javascript > function check() { if (document.nuovo.email.value=="”) email="nessuna" if (document.nuovo.login.value=="") alert("Non hai inserito il login !") else if (document.nuovo.pass.value=="") alert("Non hai inserito la password !") else 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 22 11 Un esempio: pronostici per i mondiali di calcio 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 else ‘ 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 end if set conn=nothing %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 23 Un esempio: pronostici per i mondiali di calcio Use case Scommessa - Class Diagram Requisiti funzionali <<HTML Form>> FormLogin login password <<Client Page>> login.htm ØEffettuare una scommessa, da parte di uno scommettitore registrato, su una partita sulla quale non abbia già scommesso <<redirect >> <<submit>> <<ADODB.Connection>> ...>> conn open() <<Server Page>> accept.asp <<Server Page>> scomm.asp <<ADODB. Recordset>> ...>> rs RecordCount <<Server Page>> menu.asp <<link>> <<builds>> <<link>> <<Built Client Page>> Client menu <<builds>> <<Built Client Page>> Client scomm open() Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software <<redirect >> AccettaUtenteRegistrato () Accetta Amministratore() <<HTML Form>> FormScomm <<submit>> <<hidden>> IdPartita Segno <<Server Page>> insscomm.asp Inserisci Scommessa() 24 12 Un esempio: pronostici per i mondiali di calcio Use case Scommessa - Sequence Diagram : Utente : login.htm : FormLogin carica() riempi form ( login,password) : accept.asp submit() : menu.asp Messaggio("Utente non riconosciuto") redirect builds : Client menu setta id e login nelle var. di sessione click (scommessa) : scomm.asp link builds : Client scomm : FormScomm riempi form (partita, segno) : insscomm.asp submit Messaggio ("Scommessa effettuata") redirect Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 25 Un esempio: pronostici per i mondiali di calcio Use case Scommessa - Implementazione: riconoscimento utenti <% login=request.form("login") pass=request.form("pass") File accept.asp 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") end if 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>") else if adm then session("utente")="admin" %> <script language=javascript>location.href="menuadm.asp"</script> <% else session("utente")="gioc”: session("idg")=idg ‘ Login e password corrette: puoi scommettere %> <script language=javascript>location.href="menu.asp"</script> <% end if end if %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software ØRiconoscimento dell’utente ØControllo amministratore ØSettaggio delle variabili di sessione 26 13 Un esempio: pronostici per i mondiali di calcio Use case Scommessa - Implementazione: Inserimento scommessa <% if session("utente")="gioc" then File scomm.asp oggi=Date() ‘ 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 end if rs.movenext next else ‘Utente non riconosciuto ... end if %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 27 Un esempio: pronostici per i mondiali di calcio 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 else '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") end if response.end else ‘ Accesso non consentito end if %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 28 14 Un esempio: pronostici per i mondiali di calcio Use case Inserimento Risultato - Class Diagram Requisiti funzionali ØInserire il risultato di una partita, ricalcolando la classifica generale <<HTML Form>> FormLogin <<Client Page>> login.htm login password <<redirect >> <<submit>> <<ADODB. Recordset>> rs RecordCount open() <<Server Page>> accept.asp <<redirect >> <<Server Page>> menuadm.asp <<redirect >> AccettaUtenteRegistrato () Accetta Amministratore() <<builds>> <<Server Page>> <<link>> <<Built Client Page>> admris.asp Client menuadm <<ADODB.Connection>> conn open() <<builds>> <<HTML Form>> <<submit>> FormInsRisult <<Built Client Page>> Client admris n goal1 : Integer goal2 : Integer <<Server Page>> adminsr.asp InserisciRisultato () CalcolaClassifica() Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 29 Un esempio: pronostici per i mondiali di calcio Use case Inserimento Risultato - Sequence Diagram : Amministratore : login.htm : FormLogin load : accept.asp Riempi Form (login, password) submit Messaggio ("Amministratore riconosciuto") settate le var. sessione : menuadm.asp Accetta Amministratore () redirect : Client menuadm builds : admris.asp click (inserisci risultato) link : Client admris : FormInsRisult : adminsr.asp builds Riempi Form (partita, goal1, goal2) submit InserisciRisultato( ) CalcolaClassifica ( ) Messaggio ("Risultato inserito e classifica aggiornata") Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 30 15 Un esempio: pronostici per i mondiali di calcio Use case Inserimento Risultato - Implementazione Form <% if session("utente")="admin" then set conn=server.createobject("Adodb.connection") conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("db97.mdb") ' 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 else response.write("L'accesso a questa pagina e'permesso solo all'amministratore") end if %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 31 Un esempio: pronostici per i mondiali di calcio 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>") else response.write("Accesso permesso solo all'amministratore") end if %> Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 32 16 Un esempio: pronostici per i mondiali di calcio Modello di Dettaglio <<link>> <<Server Page>> menuadm.asp <<redirect >> <<Client Page>> login.htm <<Server Pag... admris.asp n <<HTML Form>> FormInsRisult goal1 : Integer <<submit>> goal2 : Integer <<Server Page>> adminsr.asp <<redirect >> <<link>> <<Server Page>> <<Server Page>> <<HTML Form>> logout.asp accept.asp FormLogin <<submit>> login ChiudiSessione() AccettaUtenteRegistrato() password <<redirect >><<link>> Accetta Amministratore() InserisciRisultato() CalcolaClassifica () <<link>> <<Server Page>> class.asp <<link>> <<link>> <<Client Page>> nuovo.htm check() <<HTML Form>> FormNuovo <<Server Page>> <<submit>> nuovo.asp login password email RegistraUtente() <<Server Page>> menu.asp VisualizzaClassifica () <<link>> <<link>> <<link>> <<link>> <<Server Page>> <<submit>> <<Server Page>> scomm.asp insscomm.asp <<redirect >> <<link>> n <<HTML Form>> FormScomm <<hidden>> IdPartita Segno Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica 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 Web Engineering Prof. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica Ingegneria del Software 34 17