INSA - ASI

TechnoWeb : Rappels UML

1/20

Technologie Web
Modlisation de site Web en UML Alexandre Pauchet
INSA Rouen - Dpartement ASI
BO.B.RC.18, pauchet@insa-rouen.fr

INSA - ASI

TechnoWeb : Rappels UML

2/20

Plan

Dmarche Cas dutilisation Navigation Interaction Modle objet Conclusion

INSA - ASI

TechnoWeb : Rappels UML

3/20

Dmarche
Approche

(1/3)

Systme

Casd'utilisation

Diagrammesde squencesystme

classe1 methode()

classe2

Besoins utilisateurs

methode()

classe3 methode()

Modle dudomaine

Diagrammede classesparticipantes

Diagrammes d'interaction CODE

Maquette Diagrammedenavigation Diagrammesdeclasses

INSA - ASI

TechnoWeb : Rappels UML

4/20

Dmarche

(2/3)

Approche simplie

Besoins utilisateurs Casd'utilisation Diagrammesdesquence

Maquette Diagrammesdeclasses

Diagrammesdecollaboration

CODE

Diagrammedenavigation

INSA - ASI

TechnoWeb : Rappels UML

5/20

Dmarche
Cas dtude

(3/3)

Librairie en ligne
Ex : www.amazon.fr, www.fnac.com, www.eyrolles.com, etc. Exigences fonctionnelles : recherche, prsentation douvrages, slection, commande Exigences non fonctionnelles : ergonomie, simplicit dutilisation, performance, etc. Contraintes de conception :
Mise jour des donnes de rfrence Mise jour depuis les formulaires du site Panier Paiement scuris

INSA - ASI

TechnoWeb : Rappels UML

6/20

Spcication des exigences (cas dutilisation)

Dmarche

(1/4)

Structuration en cas dutilisation

Casd'utilisation

Identier les acteurs Identier les cas dutilisation Structurer les cas dutilisation en package Etudier les relations entre cas dutilisation Hirarchiser les cas dutilisation

INSA - ASI

TechnoWeb : Rappels UML

7/20

Spcication des exigences (cas dutilisation)

Exemple : cas dutilisation de linternaute

(2/4)

Consulterses commandes encours Internaute

<<extends>>

Effectuerune rechercherapide
<<extends>>

<<extends>>

Effectuerune commande
<<extends>>

Effectuerune rechercheavance
<<extends>>

Grerson panier

<<extends>>

Consulter l'aideenligne

Rechercher desouvrages

Effectuerune rechercheparthme

Effectuerune recherchepar rubriqueditoriale

INSA - ASI

TechnoWeb : Rappels UML

8/20

Spcication des exigences (cas dutilisation)

Scenarios

(4/4)

Exemple : Eectuer une commande

Acteur principal : linternaute Objectifs : tout moment, le client doit pouvoir accder au formulaire du bon de commande, dans lequel il peut saisir ses coordonnes et les informations ncessaires au paiement et la livraison. Prconditions : Le panier nest pas vide et lInternaute a pu accder au formulaire de commande (cf. Grer son panier ). Postconditions : Une commande a t enregistre et transmise au service Commandes. Scnario nominal : 1. LInternaute saisit lensemble des informations ncessaires au paiement et la livraison : - son adresse email, - son adresse de facturation, - son adresse de livraison si elle est diffrente de son adresse de facturation, - son numro de carte de crdit. 2. Le Systme affiche un rcapitulatif de la commande. 3. Linternaute valide sa commande. 4. Le Systme envoie la commande valide au service Clients. 5. Le Systme confirme la prise de commande lInternaute. Extensions : 1a. LInternaute est dj client. 1. Linternaute sidentifie avec son e-mail et son mot de passe. 2. Le Systme affiche les donnes concernant lInternaute. 2a. Le Systme ne reconnat pas le client Le Systme prvient lInternaute du problme (retour en 1a.1). 1-3a. LInternaute annule sa commande. 1. Le Systme revient laffichage du panier (cas dutilisation termin). Exigences supplmentaires : Utilisation de SSL.

INSA - ASI

TechnoWeb : Rappels UML

9/20

Spcication des exigences (cas dutilisation)

Planication

(3/4)

Remarque importante
Scenarios diagrammes de squence systme

Packages
UC de linternaute UC des employs Acteurs UC secondaires

Classement des cas dutilisation

Cas dutilisation Rechercher des ouvrages Grer son panier Eectuer une commande Consulter ses commandes en cours Consulter laide en ligne Maintenir le catalogue Maintenir les informations ditoriales Maintenir le site Priorit Haute Haute Moyenne Basse Basse Haute Moyenne Moyenne Risque Moyen Bas Haut Moyen Bas Bas Bas Bas Itration 2 3 4 6 7 1 5 5

INSA - ASI

TechnoWeb : Rappels UML

10/20

Navigation
Approche

(1/2)

Approche

Maquette Diagrammedenavigation

Maquette
Dessins/canevas pouvant intgrer des fonctionnalits de navigation Vue concrte mais non dnitive de lIHM Support de discussion avec le client

INSA - ASI

TechnoWeb : Rappels UML

11/20

Navigation

(2/2)

Diagramme de navigation
<<page>> Nouveauts <<page>> Paged'accueil <<page>> Aide <<frame>> Rechercherapide <<page>> Rechercheavance <<action>> Recherche

<<page>> Meilleursventes

<<page>> ...

<<exception>> erreur
[non]

livretrouv? [oui]

<<action>> Recalculer
[ilresteau moins1livre]

<<action>> Mettredanslepanier

<<frame>> Rsultatderecherche

<<action>> Classement
[plusieurspages]

<<page>> Panier

<<page>> Ficheclientremplie
[clientidentifi]

<<action>> Parcoursdespages

<<action>> tablirundevis

<<action>> Commander

<<action>> Modificationcompte

<<page>> Fichedtailled'ouvrage

<<page>> Ficheclientvide

<<action>> Saisirinfoscommande <<action>> Acheter

<<page>> Fiched'auteurs
[Finnormaleavecachat]

<<frame>> Devis

<<page>> Fichedecommande

INSA - ASI

TechnoWeb : Rappels UML

12/20

Interaction
Approche

(1/3)

Diagrammes dinteraction
Diagrammes de squence Diagrammes de collaboration

Approche
Systme

Casd'utilisation (scnarios) Diagrammesdesquence

Systme

Systme

Diagrammesde squencesystme

Diagrammesdecollaboration

INSA - ASI

TechnoWeb : Rappels UML

13/20

Interaction

(2/3)

Diagramme de squence

Exemple : Recherche avance

Internaute RechercheAvance ContrleRecherche Catalogue tousles:Livre

vrifierSyntaxeRecherche(phrase)

chercherLivres(phrase)

chercherLivresParAuteur(a) create

find()

rsultats:Livre
create(resultats)

rsultats

RsultatRecherche
pageSuivante()

pagePrcdente()

INSA - ASI

TechnoWeb : Rappels UML

14/20

Interaction

(3/3)

Diagramme de collaboration

Exemple : Recherche avance

1.1.vrifierSyntaxeRecherche(phrase) 1.rechercher(phrase) 1.2.chercherLivres(phrase)

RechercheAvance

1.2.1.chercherLivresParAuteur(a)

Internaute

ContrleRecherche
1.2.2.create(rsultats)

1.2.1.1.1.2rsultats

Catalogue
1.2.1.1.1.1.create

1.2.1.1.find() 1.2.1.1.1.

2.pageSuivante() 3.pagePrcdente()

RsultatRecherche tousles:Livre rsultats:Livre

INSA - ASI

TechnoWeb : Rappels UML

15/20

Modle objet
Rappel : MVC

(1/2)

MVC : Modle-Vue-Contrleur
observateur

Vue

servicesdemisejour

Notificationd'vnements demisejour+donnesmodifies

Contrleur

observable

Modle

servicesdumodle

Choix du paradigme
Au moment de lanalyse du problme (Cas dutilisation, modle du domaine, diagramme de navigation) 3 approches :
1 2 3

Fonctionnelle/Procdurale Objets Composants

INSA - ASI

TechnoWeb : Rappels UML

16/20

Modle objet

(2/2)

Diagramme de classes

Gestion du panier
Page $total:real $contenu PagePanier quantite[0...*]:integer=1 afficher($idSession,$code) modifierQuantiteLigne($code,$nombre) supprimerLigne($code) recalculer() viderPanier() demanderDevis() commander() verifierNombre()
1 1

Panier

ajouterLigne($code,$nombre=1) modifierQuantiteLigne($code,$nombre) supprimerLigne($code) viderPanier()

PageResultatRecherche mettreDansPanier()

<<link>> 0...1

0...1

<<build>>

ErreurPanierVide messageErreur:string

Session id nom:string prenom:string email:string ...

INSA - ASI

TechnoWeb : Rappels UML

17/20

Conclusion
Cycle en V

(1/4)

Diagrammes et production de documents

Cahier des charges DSE / DSI
Cas dutilisation et diagrammes de squence systme Maquette Diagramme de navigation

DCP / DCD
Modle du domaine Diagrammes des classes participantes Diagrammes dinteraction (de squence ou de collaboration) Diagrammes de classes

INSA - ASI

TechnoWeb : Rappels UML

18/20

Conclusion

(2/4)

Limites du modle UML

Qualits
Simple Expressif Mthodologique

Limites
Ne reprsente pas les tats du systme Rapidement limit (gros systmes) Pas dinterconnexion de systmes Pas dynamique (Agents informatiques, composants, etc.) Pas de vrication

INSA - ASI

TechnoWeb : Rappels UML

19/20

Conclusion
Alternatives

(3/4)

p1 e1 t1 t3 t4 e3 p3 2 e2 t2 e4 t1

p2

Alternatives
Approche SMA Repsentation des interactions par automates/rseaux de Petri Vrication logique Contrainte : vnements discrets

INSA - ASI

TechnoWeb : Rappels UML

20/20

Conclusion
Rfrences

(4/4)

UML : Modliser un site e-commerce, Pascal Roques, Eyrolles. http://laurent-audibert.developpez.com/Cours-UML/html/ index.html http://www.coredump.fr.to/category/modelisation/uml/ http://uml.free.fr/