Vous êtes sur la page 1sur 20

INSA - ASI TechnoWeb : Rappels UML 1/20

Technologie Web
Modélisation de site Web en UML

Alexandre Pauchet
INSA Rouen - Département ASI
BO.B.RC.18, pauchet@insa-rouen.fr
INSA - ASI TechnoWeb : Rappels UML 2/20

Plan

1 Démarche

2 Cas d’utilisation

3 Navigation

4 Interaction

5 Modèle objet

6 Conclusion
INSA - ASI TechnoWeb : Rappels UML 3/20

Démarche (1/3)
Approche

Système

Diagrammes de
Cas d'utilisation
séquence système

classe1
methode()

classe2
methode()

Besoins classe3

utilisateurs
methode()

Modèle Diagramme de 
du domaine Diagrammes 
classes participantes
d'interaction

CODE

Maquette
Diagramme de navigation Diagrammes de classes
INSA - ASI TechnoWeb : Rappels UML 4/20

Démarche (2/3)
Approche simplifiée

Besoins
utilisateurs
Cas d'utilisation

Diagrammes de séquence

Diagrammes de collaboration
Maquette

Diagrammes de classes

CODE

Diagramme de navigation
INSA - ASI TechnoWeb : Rappels UML 5/20

Démarche (3/3)
Cas d’étude

Librairie en ligne
Ex : www.amazon.fr, www.fnac.com, www.eyrolles.com, etc.
Exigences fonctionnelles : recherche, présentation d’ouvrages,
sélection, commande
Exigences non fonctionnelles : ergonomie, simplicité d’utilisation,
performance, etc.
Contraintes de conception :
Mise à jour des données de référence
Mise à jour depuis les formulaires du site
Panier
Paiement sécurisé
INSA - ASI TechnoWeb : Rappels UML 6/20

Spécification des exigences (cas d’utilisation) (1/4)


Démarche

Structuration en cas d’utilisation

Cas d'utilisation

Identifier les acteurs


Identifier les cas d’utilisation
Structurer les cas d’utilisation en package
Etudier les relations entre cas d’utilisation
Hiérarchiser les cas d’utilisation
INSA - ASI TechnoWeb : Rappels UML 7/20

Spécification des exigences (cas d’utilisation) (2/4)


Exemple : cas d’utilisation de l’internaute

Consulter ses 
commandes 
en cours

Internaute

Effectuer une 
<< extends >>
recherche rapide

<< extends >>
Effectuer une 
Effectuer une 
recherche avancée
commande
<< extends >>
Gérer son  << extends >>

<< extends >>
panier

<< extends >>
Consulter  Rechercher 
l'aide en ligne des ouvrages

Effectuer une  Effectuer une 
recherche par thème recherche par 
rubrique éditoriale
INSA - ASI TechnoWeb : Rappels UML 8/20

Spécification des exigences (cas d’utilisation) (4/4)


Scenarios

Exemple : “Effectuer une commande”


Acteur principal : l’internaute
Objectifs : À tout moment, le client doit pouvoir accéder au formulaire du bon de commande, dans lequel il peut
saisir ses coordonnées et les informations nécessaires au paiement et à la livraison.
Préconditions : Le panier n’est pas vide et l’Internaute a pu accéder au formulaire de commande (cf. Gérer son
panier ).
Postconditions : Une commande a été enregistrée et transmise au service Commandes.
Scénario nominal :
1. L’Internaute saisit l’ensemble des informations nécessaires au paiement et à la livraison :
- son adresse email,
- son adresse de facturation,
- son adresse de livraison si elle est différente de son adresse de facturation,
- son numéro de carte de crédit.
2. Le Système affiche un récapitulatif de la commande.
3. L’internaute valide sa commande.
4. Le Système envoie la commande validée au service Clients.
5. Le Système confirme la prise de commande à l’Internaute.
Extensions :
1a. L’Internaute est déjà client.
1. L’internaute s’identifie avec son e-mail et son mot de passe.
2. Le Système affiche les données concernant l’Internaute.
2a. Le Système ne reconnaît pas le client
Le Système prévient l’Internaute du problème (retour en 1a.1).
1-3a. L’Internaute annule sa commande.
1. Le Système revient à l’affichage du panier (cas d’utilisation terminé).
Exigences supplémentaires : Utilisation de SSL.
INSA - ASI TechnoWeb : Rappels UML 9/20

Spécification des exigences (cas d’utilisation) (3/4)


Planification

Remarque importante
Scenarios −→ diagrammes de séquence système

Packages
UC de l’internaute
UC des employés
Acteurs
UC secondaires

Classement des cas d’utilisation


Cas d’utilisation Priorité Risque Itération
Rechercher des ouvrages Haute Moyen 2
Gérer son panier Haute Bas 3
Effectuer une commande Moyenne Haut 4
Consulter ses commandes en cours Basse Moyen 6
Consulter l’aide en ligne Basse Bas 7
Maintenir le catalogue Haute Bas 1
Maintenir les informations éditoriales Moyenne Bas 5
Maintenir le site Moyenne Bas 5
INSA - ASI TechnoWeb : Rappels UML 10/20

Navigation (1/2)
Approche

Approche

Maquette
Diagramme de navigation

Maquette
Dessins/canevas pouvant intégrer des fonctionnalités de navigation
Vue concrète mais non définitive de l’IHM
Support de discussion avec le client
INSA - ASI TechnoWeb : Rappels UML 11/20

Navigation (2/2)
Diagramme de navigation

<<page>> <<page>>
Nouveautés Aide

<<page>>
<<frame>>
Page d'accueil
<<page>> Recherche rapide
Meilleurs ventes
<<page>>
<<exception>> Recherche avancée
erreur
<<page>>
... <<action>>
[non] livre trouvé ?
Recherche
[oui]
<<action>> <<action>>
<<frame>> <<action>>
Recalculer Mettre dans le panier
Résultat de recherche Classement

[il reste au 
moins 1 livre] [plusieurs pages]
<<page>> <<page>>
<<action>>
Panier Fiche client remplie
Parcours des pages
[client identifié]

<<action>> <<action>> <<action>>


Établir un devis Commander <<page>>
Modification compte
Fiche détaillée d'ouvrage

<<page>>
<<action>>
Fiche client vide
Saisir infos commande <<page>>
Fiche d'auteurs
<<frame>> <<page>> <<action>>
Devis Fiche de commande Acheter [Fin normale avec achat]
INSA - ASI TechnoWeb : Rappels UML 12/20

Interaction (1/3)
Approche

Diagrammes d’interaction
Diagrammes de séquence
Diagrammes de collaboration

Approche
Système

Cas d'utilisation
(scénarios)

Diagrammes de séquence
Système
Système

Diagrammes de
séquence système
Diagrammes de collaboration
INSA - ASI TechnoWeb : Rappels UML 13/20

Interaction (2/3)
Diagramme de séquence

Exemple : Recherche avancée

Internaute RechercheAvancée ContrôleRecherche Catalogue tous les : Livre

vérifierSyntaxeRecherche(phrase)

chercherLivres(phrase)
chercherLivresParAuteur(a)
find()

create

résultats
résultats : Livre

create(resultats)

RésultatRecherche
pageSuivante()

pagePrécédente()
INSA - ASI TechnoWeb : Rappels UML 14/20

Interaction (3/3)
Diagramme de collaboration

Exemple : Recherche avancée


1.1. vérifierSyntaxeRecherche(phrase)

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

RechercheAvancée
1.2.1. chercherLivresParAuteur(a)

1.2.1.1.1.2 résultats
ContrôleRecherche Catalogue
Internaute
1.2.1.1. find() 1.2.1.1.1.1. create
1.2.2. create(résultats)

1.2.1.1.1.
2. pageSuivante()
RésultatRecherche
3. pagePrécédente()

tous les : Livre résultats : Livre
INSA - ASI TechnoWeb : Rappels UML 15/20

Modèle objet (1/2)


Rappel : MVC

MVC : Modèle-Vue-Contrôleur
observateur
     services de mise à jour
Vue

                   Notification d'évènements
                                    de mise à jour + données modifiées Contrôleur

observable Modèle           services du modèle

Choix du paradigme
Au moment de l’analyse du problème (Cas d’utilisation, modèle du
domaine, diagramme de navigation)
3 approches :
1 Fonctionnelle/Procédurale
2 Objets
3 Composants
INSA - ASI TechnoWeb : Rappels UML 16/20

Modèle objet (2/2)


Diagramme de classes

Gestion du panier
Page Panier
$total : real
$contenu

ajouterLigne($code, $nombre=1)
PagePanier 1 modifierQuantiteLigne($code, $nombre)
quantite [0...*] : integer=1 supprimerLigne($code)
afficher($idSession, $code) viderPanier()
modifierQuantiteLigne($code, $nombre)
PageResultatRecherche <<link>> supprimerLigne($code)
recalculer() 0...1
0...1
mettreDansPanier() viderPanier()
demanderDevis() <<build>>
commander()
verifierNombre()

1 ErreurPanierVide

Session messageErreur : string

id
nom : string
prenom : string 1
1
email : string
...
INSA - ASI TechnoWeb : Rappels UML 17/20

Conclusion (1/4)
Cycle en V

Diagrammes et production de documents


Cahier des charges
DSE / DSI
Cas d’utilisation et diagrammes de séquence système
Maquette
Diagramme de navigation
DCP / DCD
Modèle du domaine
Diagrammes des classes participantes
Diagrammes d’interaction (de séquence ou de collaboration)
Diagrammes de classes
INSA - ASI TechnoWeb : Rappels UML 18/20

Conclusion (2/4)
Limites du modèle UML

Qualités
“Simple”
Expressif
Méthodologique

Limites
Ne représente pas les états du système
Rapidement limité (gros systèmes)
Pas d’interconnexion de systèmes
Pas dynamique (Agents informatiques, composants, etc.)
Pas de vérification
INSA - ASI TechnoWeb : Rappels UML 19/20

Conclusion (3/4)
Alternatives

p1
p2
t1 t2
e1 e2 e4

t3 t1
t4
2
e3

p3

Alternatives
Approche SMA
Repésentation des interactions par automates/réseaux de Petri
Vérification logique

Contrainte : évènements discrets


INSA - ASI TechnoWeb : Rappels UML 20/20

Conclusion (4/4)
Références

“UML : Modéliser 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/