Sviluppo di applicazioni Web -...

Ingegneria del Software 1

1Web EngineeringProf. A.R. Fasolino, Ing. P. Tramontana - Dip. di Informatica e Sistemistica

Sviluppo di applicazioni WebSviluppo di applicazioni Web

ØSiti Web: software che mostra ad un utente informazioni in unamodalità 'di sola lettura’, senza cioè che esso possa interagire permodificare lo stato del software stesso (in particolare i dati).

ØApplicazioni web: software, utilizzante la stessa infrastruttura diun sito, che consente ad un utente di interagire con essopermettendo la modifica dello stato del software (es. applicazioni die-commerce)

applicazioni software che utilizzano l’architettura e le infrastrutture del WorldWide Web

ØIntroduzione di nuovi modelli e metodi di sviluppo

Web Engineering: l’Ingegneria del Software applicata almondo delle applicazioni web


Web EngineeringHuman-Computer

Interaction

RequirementsEngineering

InformationEngineering

SoftwareEngineering

System Analysisand DesignModeling and

Simulation

Testing

Hypertext

Multimedia

ProjectManagement

Il Web engineering include diversi fattori e settori dello sviluppo software

Sviluppo di applicazioni WebSviluppo di applicazioni Web



Metodologie di Sviluppo di applicazioni WebMetodologie di Sviluppo di applicazioni Web

Numerose metodologie sono state pensate appositamente per i siti web e, inseguito, 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.


Metodologie di Sviluppo di applicazioni WebMetodologie di Sviluppo di applicazioni WebUML

Utilizzo dei vari diagrammi per descrivere gli elementi, le relazioni traessi, gli aspetti statici e dinamici delle applicazioni web

Ma

necessità di opportune estensioni alla notazione per le peculiarità delleWeb application



Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:

Una metodologia di sviluppo con UMLUna metodologia di sviluppo con UML• Definizione dei requisiti

• Individuazione degli usecase èUse case diagram,Modello Concettuale deidati

• Individuazione delle classiè Class diagram,

• Studio dinamico

èSequence diagram

• Implementazione

Use case diagramModello Concettuale

Sequence diagram

Class diagram



Estensioni di UMLEstensioni di UMLClassi:Classi:Pagina Client

Pagina Server

Form

Associazioni:Associazioni:Link

Submit

Builds

Redirect

<<submit>>

<<builds>>

<<redirect>>

<<link>>




Uso dei diagrammi UMLUso dei diagrammi UML

Ø Use case diagramDalla fase di analisi e dalla individuazione degli use case, con tali diagramsi può indicare quali sono le relazioni tra gli use case e gli attori delsistema.

Ø Class diagramFanno parte di tale diagram le molteplici pagine che costituiscono ilsistema e le altre classi con cui tali pagine interagiscono. In questo caso lapagina è intesa come classe del sistema.

Ø Sequence diagram

Nel caso delle web application tali diagram sono particolarmentesignificativi, visto che possono specificare come viene costruita la paginaper l’utente e inoltre per ogni caso d’uso indicano anche i passi chel’utente deve seguire per giungere al risultato.



Uso dei diagrammi UMLUso dei diagrammi UML

Ø E, inoltre

ØActivity Diagram (utili per guidare la struttura della navigazione)

ØStatechart Diagram

ØComponent Diagram

ØDeployment diagram per strutture complesse.



Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:Modelli Modelli architetturaliarchitetturali

1 richiesta con parametri

BrowserWeb

WebServer

4 Pagina web

ApplicationServer

2 Esecuzione Pagina Server

3

Oggettogenerico

InterfacciaDatabaseDatabase

Interpretedel

browser

PaginaPaginavisualizzatavisualizzataall’utenteall’utente

OggettoClient

5

5 a

5 b

Server

Client

OggettoDOM


Tecnologie server:Tecnologie server:

CGI

ASP

PHP

Cold Fusion

JSP

Tecnologie client:Tecnologie client:

Javascript

Jscript

VBScript

Flash

Linguaggi ipertestuali:Linguaggi ipertestuali:

HTML

XML

TecnologieTecnologie client client/server:/server:

Java

Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:Tecnologie realizzativeTecnologie realizzative



Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:CGI - CGI - Common Gateway InterfaceCommon 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 discripting, a patto che siano interpretati dal web server)

richiesta+parametri

Web server

Browserweb

MotoreCGI



Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:ASP - ASP - ActiveActive Server Server PagesPages

ØTecnologia proprietaria Microsoft

ØLe interazioni lato server sono codificate utilizzando uno dei linguaggi discripting Microsoft (VBScript, JScript), congiuntamente a estensioni server ASPche 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 cheviene inviata al browser. Nella pagina client può essere utilizzato un qualsiasilinguaggio di scripting



Richiesta conparametri

Web server

Browserweb

Interpretelinguaggi di

script

OggettoODBC Oggetto

generico

Interpretescript


Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:ASP - ASP - ActiveActive Server Server PagesPages

Database


Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:PHP - PHP - Hypertext PreProcessorHypertext PreProcessor

ØTecnologia non proprietaria

ØStessa architettura di asp, con un diverso linguaggio di scripting sul lato server

Richiesta conparametri

Web server

Browserweb

Interpretelinguaggi di

script

OggettoInterfaccia

Oggettogenerico

InterpreteScript Client


Database



Sviluppo delle applicazioni web:Sviluppo delle applicazioni web:Gerarchia del DOM - Gerarchia del DOM - Document Object ModelDocument Object Model


Un esempio: pronostici per i Mondiali di CalcioUn 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, conaggiornamento della classifica degli scommettitori



Inserimento Risultati

AmministratoreScommessa

ScommettitoreLogin

Login Amministratore

Calcolo Classifica

<<include>>

<<include>>

<<include>>

<<include>>

Utente

Registrazione

Utente non registrato

Visualizza Classifica

Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioUse Case Use Case DiagramDiagram


Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioModello ConcettualeModello Concettuale

Ø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 daogni giocatore

Scommessasegnos : Stringdata : Date

Inserimento()

ScommettitorePunteggio : Integer

Registrazione()Calcolo Punteggio()Riconoscimento()

Classifica

Calcolo Classifica()

nn

Utente.login : Stringpassword : Stringemail : String

Amministratore.

Riconoscimento()

Partitasquadre : Stringrisultato : Stringsegnop : Stringgiocata : Booleandata : Date

Inserimento Risultato()

0..n0..n 0..n0..n

0..n

0..1

0..n

0..1

0..n



Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioModello del databaseModello del database


Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioUse case registrazione nuovo giocatore - Use case registrazione nuovo giocatore - Class diagramClass diagram

nuovo.htm

check()

<<Client Page>> FormNuovologinpasswordemail

<<HTML Form>>

conn

open()

<<ADODB.Connection>>

rsRecordCount

open()

<<ADODB.Recordset>>

nuovo.asp<<Server Page>>

<<submit>>

rs2

open()

<<ADODB.Recordset>>

ØInserire un nuovoscommettitore neldatabase, controllandoche abbia una login chenon sia già presente

Requisiti funzionali



Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioUse case registrazione nuovo giocatore - Use case registrazione nuovo giocatore - Sequence diagramSequence diagram

: Utente non registrato

: nuovo.htm

: FormNuovo

: nuovo.asp

: Client nuovo

: conn

rs : rsrs : rs

rs2 : rs

carica

Riempi Form ( login, email, password)

check( )Messaggio ("Dati incompleti") submit (login, email, password)

builds

crea

open

crea

open(query elenco giocatori)

Messaggio("Login già presente")

close()

open(query inserimento giocatore)close()

close()

Messaggio("Iscirizione effettuata")


Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcio

Use case registrazione nuovo giocatore - ImplementazioneUse 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 !")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 dielaborazione del server

File nuovo.htm




Use case registrazione nuovo giocatore - Implementazione (2)Use case registrazione nuovo giocatore - Implementazione (2)

<% login=request.form("login")pass=request.form("pass")email=request.form("email")

‘Crea connessione al databaseset 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 utenteset rs=server.createobject("adodb.recordset")rs.open "select * from giocatore where login='"+login+"'",conn,3,3if rs.RecordCount<>0 then response.write("<script language=javascript>window.alert('Esiste un utente con questa login');history.back();</script>") set rs=nothingelse ‘ 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=nothingend ifset conn=nothing%>

File nuovo.asp



Use case Scommessa - Use case Scommessa - Class DiagramClass Diagram

ØEffettuare una scommessa,da parte di uno scommettitoreregistrato, su una partita sullaquale non abbia giàscommesso

Requisiti funzionaliFormLogin

loginpassword

<<HTML Form>>

login.htm<<Client Page>>

Client menu<<Built Client Page>>

Client scomm<<Built Client Page>>

menu.asp<<Server Page>>

<<builds>>

FormScomm<<hidden>> IdPartitaSegno

<<HTML Form>>

accept.asp

AccettaUtenteRegistrato ()Accetta Amministratore()

<<Server Page>>

<<submit>>

<<redirect>>

<<redirect>>

insscomm.asp

Inserisci Scommessa()

<<Server Page>>

<<link>>

<<submit>>

conn

open()

<<ADODB.Connection>>...>>

scomm.asp<<Server Page>> <<link>>

<<builds>>

rsRecordCount

open()

<<ADODB. Recordset>>...>>




Use case Scommessa - Use case Scommessa - Sequence DiagramSequence Diagram

: Utente : login.htm : FormLogin

: accept.asp

: menu.asp

: Client menu

: scomm.asp

: Client scomm

: FormScomm

: insscomm.asp

carica()

riempi form ( login,password)

submit()

Messaggio("Utente non riconosciuto")redirect

setta id e login nelle var. di sessione

builds

click (scommessa)link builds

riempi form (partita, segno)

submitMessaggio ("Scommessa effettuata")

redirect


<%login=request.form("login")pass=request.form("pass")

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+"' andpassword='"+pass+"'",conn,3,3rc=rs.eofif not(rc) then adm=rs("amministratore") : idg=rs("id")end ifrs.close : set rs=nothingconn.close : set conn=nothing

if rc then response.write("<script language=javascript>window.alert('Non seiregistrato');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 ifend if%>


Use case Scommessa - Implementazione: riconoscimento utentiUse case Scommessa - Implementazione: riconoscimento utenti

File accept.aspØRiconoscimentodell’utente

ØControlloamministratore

ØSettaggio dellevariabili di sessione




Use case Scommessa - Implementazione: Inserimento scommessaUse case Scommessa - Implementazione: Inserimento scommessa

<%if session("utente")="gioc" then 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 nextelse ‘Utente non riconosciuto ...end if%>

File scomm.asp



Use case Scommessa - Implementazione: Inserimento scommessaUse case Scommessa - Implementazione: Inserimento scommessa

<%if session("utente")="gioc" then idp=request.form("idpartita") segn=request.form("segno")

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.endelse ‘ Accesso non consentitoend if%>

File insscomm.asp



login.htm<<Client Page>> FormLogin

loginpassword

<<HTML Form>>

Client menuadm<<Built Client Page>>

Client admris<<Built Client Page>> FormInsRisult

goal1 : Integergoal2 : Integer

<<HTML Form>>

nn

menuadm.asp<<Server Page>>

<<builds>>

admris.asp<<Server Page>> <<link>>

<<builds>>

adminsr.asp

InserisciRisultato ()CalcolaClassifica()

<<Server Page>><<submit>>

<<redirect>>

conn

open()

<<ADODB.Connection>>

rsRecordCount

open()

<<ADODB. Recordset>>accept.asp

AccettaUtenteRegistrato ()Accetta Amministratore()

<<Server Page>>

<<submit>>

<<redirect>>

<<redirect>>


Use case Inserimento Risultato - Use case Inserimento Risultato - Class DiagramClass Diagram

ØInserire il risultato di unapartita, ricalcolando laclassifica generale

Requisiti funzionali


: Amministratore : login.htm : FormLogin

: accept.asp

: menuadm.asp

: Client menuadm

: admris.asp

: Client admris : FormInsRisult : adminsr.asp

loadRiempi Form (login, password)

submitMessaggio ("Amministratore riconosciuto")

redirect

settate le var. sessione

builds

linkclick (inserisci risultato)

buildsRiempi Form (partita, goal1, goal2)

submit

Messaggio ("Risultato inserito e classifica aggiornata")

InserisciRisultato( )

CalcolaClassifica( )

Accetta Amministratore ()


Use case Inserimento Risultato - Use case Inserimento Risultato - Sequence DiagramSequence Diagram



<%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 inserireset 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=nothingelse response.write("L'accesso a questa pagina e'permesso solo all'amministratore")end if%>


Use case Inserimento Risultato - Implementazione FormUse case Inserimento Risultato - Implementazione Form



Use case Inserimento Risultato - ImplementazioneUse 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%>



Un esempio: pronostici per i mondiali di calcioUn esempio: pronostici per i mondiali di calcioModello di DettaglioModello di Dettaglio

admris.asp<<Server Pag...

menuadm.asp<<Server Page>>

<<link>>

FormNuovologinpasswordemail

<<HTML Form>>

FormInsRisultgoal1 : Integergoal2 : Integer

<<HTML Form>>

nn

adminsr.asp

InserisciRisultato()CalcolaClassifica()


FormLoginloginpassword

<<HTML Form>>

nuovo.htm

check()

<<Client Page>>nuovo.asp

RegistraUtente()


login.htm<<Client Page>>

<<link>>

<<redirect>>

FormScomm<<hidden>> IdPartitaSegno

<<HTML Form>>

accept.asp

AccettaUtenteRegistrato()Accetta Amministratore()

<<Server Page>>

<<submit>>

<<redirect>>

<<redirect>>

scomm.asp<<Server Page>>

nn

logout.asp

ChiudiSessione()

<<Server Page>><<link>>

class.asp

VisualizzaClassifica()

<<Server Page>>

<<link>>

<<link>>

menu.asp<<Server Page>>

<<redirect>>

<<link>>

<<link>>

<<link>>

<<link>>

insscomm.asp<<Server Page>><<submit>>

<<link>><<link>>


BibliografiaBibliografia

J. Conallen. BuildingWeb Applications with UML. Addison-Wesley Publishing Company, Reading, MA, 1999.

J. Conallen. Modeling web applications with uml. White paper, Conallen Inc., http://www.conallen.com/whitepapers/webapps/ModelingWebApplications.htm, March 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

Sviluppo di applicazioni Web -...

Documents

Transcript of Sviluppo di applicazioni Web -...