Rapport

Département : GTIC
Référence :
Licence Appliquée en Gestion des Technologies

de l’Information et de la Communication
Projet de Fin d’Études
Conception et développement d’une

banque d’images en ligne
Réalisé par : Mohamed Koussay BOUSSETTA

Khouloud KCHAOU
Classe : GTIC-L3-A
Encadré par : Mme. Yosra BEN SALEM

M. Amine KEFI
Entreprise d’Accueil : Circle
Année Universitaire : 2019-2020

Dédicaces
e dédie ce modeste travail et ma profonde gratitude

J
A l’âme de mon cher père Mohamed Meher KCHAOU,
Avec ma tristesse éternelle de t’avoir perdu trop tôt, je te dédie ce travail comme preuve de reconnaissance et
d’amour. Cher papa, rien au monde ne vaut tes efforts fournis jour et nuit pour mon éducation et mon bien être.
Ce travail est le fruit de tes sacrifices que tu as consentis pour que je sois la fille que je le suis aujourd’hui.
Papa, je ne cesserai jamais de t’aimer et de te faire vivre en moi, je t’aime pour toujours papa.
Puisse Dieu, le tout puissant, t’avoir en sa sainte miséricorde.
A ma très chère mère Zahida KCHAOU TRIGUI,
Quoi que je fasse ou je dise, je ne saurais point te remercier comme il se doit.
Tu étais tout pour moi. Tu étais la mère et le père. Tu étais la sœur et le frère. Tu étais le réveil, la cuisinière, la
serveuse, la maitresse d’école, la baby-sitter, le médecin et la conseillère. Tu travaillais jour et nuit mais tu étais
toujours à mon service.
Aucune dédicace ne saurait être assez éloquente pour exprimer ce que tu mérites pour tous les sacrifices que tu
n’as cessé de me donner depuis ma naissance, durant mon enfance et même à l’âge adulte.
Maman, Merci pour la mère que tu as été quand j’étais petite. Et merci d’être la mère que tu es pour moi
aujourd’hui.Je t’aime éperdument.
Aux amies de ma chère maman Kawther Trabelsi , Ilhem HAJJI et Amel CHAKROUN
pour leur soutien physique et moral.
A ma chère sœur Amira KCHAOU et mon cher frère Habib KCHAOU, pour leur soutien moral
et l’amour qu’ils me donnent.
A tous mes amis et particulièrement à ma meilleure amie Sirine Louati.
A toute ma grande famille.
Khouloud KCHAOU
i
Dédicaces
e dédie ce modeste travail et ma profonde gratitude

J
A mes chers parents,
Qui étaient toujours présents pour me soutenir, qui m’ont élevé avec amour et tendresse, et qui étaient mon
modèle de persévérance,
A mes frères et ma sœur,

Pour leur soutien moral et l’amour qu’ils me donnent,
A toute ma grande famille,

A tous mes amis pour leur encouragement considérable.
Mohamed Koussay BOUSSETTA
ii
Remerciements
’est avec un grand plaisir que nous réservons ces lignes en signe de gratitude et de reconnaissance à tous
C ceux qui ont contribué de près ou de loin à la réalisation de ce modeste travail.
Nous remercions ALLAH qui nous aide et nous donne la patience et le courage durant ces langues années
d’études.
Nous souhaitons adresser nos remerciements les plus sincères à Madame Yosra BEN SALEM, notre chère
enseignante et encadrante à l’ISET’COM pour sa confiance, sa disponibilité et le soin apporté à notre suivi,
qui tout au long du projet nous a conseillés, aidés et guidés.
Nous tenons également à remercier notre encadrant dans la société CIRCLE, Monsieur Amin Kéfi, pour
ses directives, sa disponibilité et pour les conseils qu’il nous a prodigués. Ainsi qu’ à toute l’équipe de la société
qui nous ont chaleureusement accueillis et aidés lors du besoin.
Nos remerciements s’adressent aussi à Madame Afef BEN YOUSSEF pour son aide et ses conseils.
Il convient aussi de remercier profondément tous nos enseignants et l’équipe administrative de l’ISET’COM
pour la qualité de la formation qu’ils nous ont fournit tout au long de notre cursus universitaire. Qu’ils trouvent
dans ce modeste travail une graine de ce qu’ils ont semé.
Enfin, nous adressons nos remerciements les membres du jury pour l’honneur qu’ils nous font de participer
à notre soutenance.
iii
Table des matières
Introduction générale 1
1 Contexte général du projet 2

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Présentation de l'organisme d'accueil . . . . . . . . . . . . . . . . . . . . . 2
1.2.1 Organigramme de l'entreprise . . . . . . . . . . . . . . . . . . . . . 3
1.3 Présentation du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.1 L'importance du contenu visuel . . . . . . . . . . . . . . . . . . . . 4
1.3.2 Problématique du projet . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 L'objectif du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4 Étude de l'existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.1 Analyse de l'existant . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.2 Critique de l'existant . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.4.3 Solution proposée . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.5 Choix de la méthodologie de travail . . . . . . . . . . . . . . . . . . . . . . 9
1.5.1 Les méthodes agiles . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.5.2 Les principales méthodes agiles . . . . . . . . . . . . . . . . . . . . 10
1.5.3 Principe de SCRUM . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.5.4 Les rôles des acteurs de la méthode SCRUM . . . . . . . . . . . . . 11
1.5.5 Les artéfacts de SCRUM . . . . . . . . . . . . . . . . . . . . . . . . 12
iv
1.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2 Stratégie marketing du lancement de Flexipik 13

2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 Diagnostic de l'environnement interne et externe . . . . . . . . . . . . . . . 13
2.2.1 L'analyse SWOT . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.2 Le benchmark concurrentiel . . . . . . . . . . . . . . . . . . . . . . 15
2.2.3 Etude de marché . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3 L'élaboration de la stratégie marketing . . . . . . . . . . . . . . . . . . . . 18
2.3.1 La segmentation du marché . . . . . . . . . . . . . . . . . . . . . . 18
2.3.2 Le ciblage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.3 Le positionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3.4 Le mix marketing (les 7P de FLEXIPIK) . . . . . . . . . . . . . . . 21
2.3.4.1 La politique produit (présentation de l'ore) . . . . . . . . 21
2.3.4.2 La politique du prix . . . . . . . . . . . . . . . . . . . . . 22
2.3.4.3 La politique de distribution . . . . . . . . . . . . . . . . . 23
2.3.4.4 La politique de communication . . . . . . . . . . . . . . . 24
2.3.4.5 Les personnes . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3.4.6 Les processus . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.3.4.7 La preuve physique . . . . . . . . . . . . . . . . . . . . . . 26
2.4 LEAN CANVAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3 Backlog produit 29
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Etude préliminaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.1 Identication des acteurs . . . . . . . . . . . . . . . . . . . . . . . . 30
3.2.2 Identication des exigences fonctionnelles . . . . . . . . . . . . . . . 31
v
3.2.3 Identication des exigences non fonctionnelles . . . . . . . . . . . . 32
3.3 Spécications techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.3.1 Les technologies de Flexipik . . . . . . . . . . . . . . . . . . . . . . 33
3.3.2 La reconnaissance d'image . . . . . . . . . . . . . . . . . . . . . . . 34
3.3.3 La base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.3.4 Les outils de développement . . . . . . . . . . . . . . . . . . . . . . 35
3.3.5 Les outils de conception . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3.6 Outil de planication . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3.7 L'architecture logicielle . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.4 Spécications générales des exigences . . . . . . . . . . . . . . . . . . . . . 37
3.4.1 Détermination du cas d'utilisation global . . . . . . . . . . . . . . . 37
3.5 Planication et structuration . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.5.1 Dénition des rôles dans SCRUM . . . . . . . . . . . . . . . . . . . 39
3.5.2 Backlog du produit . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.5.3 Planning du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.6 Le diagramme de classes global du projet . . . . . . . . . . . . . . . . . . . 44
3.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4 Sprint 1 48
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
4.2 Le diagramme de cas d'utilisation du sprint n°1 . . . . . . . . . . . . . . . 50
4.3 Etude du cas d'utilisation "s'inscrire" . . . . . . . . . . . . . . . . . . . . . 51
4.3.1 Description textuelle des scénarios du cas d'utilisation
"s'inscrire" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
4.3.2 Diagramme de séquence du cas d'utilisation "s'inscrire" . . . . . . . 52
4.4 Etude du cas d'utilisation "S'authentier" . . . . . . . . . . . . . . . . . . 53
4.4.1 Description textuelle de scénarios de cas d'utilisation
"S'authentier" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
vi
4.4.2 Diagramme de séquence du cas d'utilisation "s'authentier" . . . . 54
4.5 Etude du cas d'utilisation "Gérer son compte (modier son compte)" . . . 55
"Gérer son compte (modier son compte)" . . . . . . . . . . . . . . 55
4.5.2 Diagramme de séquence du cas d'utilisation "Gérer son compte (mo-
dier son compte)" . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.6 Etude du cas d'utilisation "Charger une image" . . . . . . . . . . . . . . . 57
"Charger une image" . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.6.2 Diagramme de séquence du cas d'utilisation "Charger une image" . 58
4.7 Etude du cas d'utilisation "Consulter une image" . . . . . . . . . . . . . . 60
"Consulter une image" . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.7.2 Diagramme de séquence du cas d'utilisation "Consulter une image" 60
4.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5 Sprint 2 62
5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.3 Etude du cas d'utilisation "Télécharger une image" . . . . . . . . . . . . . 64
"Télécharger une image" . . . . . . . . . . . . . . . . . . . . . . . . 64
5.3.2 Diagramme de séquence du cas d'utilisation "Télécharger une image" 65
5.4 Etude du cas d'utilisation "Gérer ses collections (Modier ses collections)" 67
"Gérer ses collections (Modier ses collections)" . . . . . . . . . . . 67
5.4.2 Diagramme de séquence du cas d'utilisation "Gérer ses collections
(Modier ses collections)" . . . . . . . . . . . . . . . . . . . . . . . 67
5.5 Etude du cas d'utilisation "Ajouter une image à une collection" . . . . . . 69
vii
5.5.1 Description textuelle des scénarios du cas d'utilisation "Ajouter une
image à une collection " . . . . . . . . . . . . . . . . . . . . . . . . 69
5.5.2 Diagramme de séquence du cas d'utilisation "Ajouter une image à
une collection" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.6 Etude du cas d'utilisation "Ajouter une image aux favoris" . . . . . . . . 71
5.6.1 Description textuelle des scénarios du cas d'utilisation "Ajouter une
image aux favoris" . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.6.2 Diagramme de séquence du cas d'utilisation "Ajouter une image aux
favoris" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.7 Etude du cas d'utilisation "Gérer les commentaires (Ajouter un commentaire)" 72
"Gérer les commentaires(Ajouter un commentaire)" . . . . . . . . 72
5.7.2 Diagramme de séquence du cas d'utilisation "Gérer les commen-
taires(Ajouter un commentaire)" . . . . . . . . . . . . . . . . . . . 73
5.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6 Sprint 3 75
6.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6.3 Etude du cas d'utilisation "Gérer les images
(Approuver/Refuser une image)" . . . . . . . . . . . . . . . . . . . . . . . 78
"Gérer les images(Approuver/Refuser une image)" . . . . . . . . . . 78
6.3.2 Diagramme de séquence du cas d'utilisation "Gérer les images
(Approuver/Refuser une image)" . . . . . . . . . . . . . . . . . . . 79
6.4 Etude du cas d'utilisation "Gérer ses images(Supprimer une image)" . . . . 80
"Gérer ses images(Supprimer une image)" . . . . . . . . . . . . . . 80
6.4.2 Diagramme de séquence du cas d'utilisation "Gérer ses images
(Supprimer une image)" . . . . . . . . . . . . . . . . . . . . . . . . 81
viii
6.5 Etude du cas d'utilisation "Acheter un abonnement" . . . . . . . . . . . . 82
"Acheter un abonnement" . . . . . . . . . . . . . . . . . . . . . . . 82
6.5.2 Diagramme de séquence du cas d'utilisation "Acheter un abonnement" 83
6.6 Etude du cas d'utilisation "Consulter
son classement" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
"Consulter son classement" . . . . . . . . . . . . . . . . . . . . . . 84
6.6.2 Diagramme de séquence du cas d'utilisation "Consulter son classement" 85
6.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
7 Sprint 4 86
7.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
7.3 Etude du cas d'utilisation "Gérer les paramètres
généraux" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
"Gérer les paramètres généraux" . . . . . . . . . . . . . . . . . . . 89
7.3.2 Diagramme de séquence du cas d'utilisation
"Gérer les paramètres généraux" . . . . . . . . . . . . . . . . . . . 90
7.4 Etude du cas d'utilisation "Gérer les utilisateurs(Bloquer un utilisateur)" . 91
"Gérer les utilisateurs(Bloquer un utilisateur)" . . . . . . . . . . . . 91
7.4.2 Diagramme de séquence du cas d'utilisation "Gérer
les utilisateurs (Bloquer un utilisateur)" . . . . . . . . . . . . . . . 91
7.5 Etude du cas d'utilisation "Signaler une image" . . . . . . . . . . . . . . . 92
Signaler une image" . . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.5.2 Diagramme de séquence du cas d'utilisation "Signaler une image" . 93
ix
7.6 Etude du cas d'utilisation "Consulter les images
signalées" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
"Consulter les images signalées" . . . . . . . . . . . . . . . . . . . . 94
7.6.2 Diagramme de séquence du cas d'utilisation "Consulter les images
signalées" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
7.7 Etude du cas d'utilisation "Gérer les articles du blog (Modier un article)" 95
"Gérer les articles du blog (Modier un article)" . . . . . . . . . . . 95
7.7.2 Diagramme de séquence du cas d'utilisation "Gérer les articles du
blog (Modier un article)" . . . . . . . . . . . . . . . . . . . . . . . 96
7.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8 La réalisation des sprints 98

8.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2 Zoom sur les fonctionnalités du projet . . . . . . . . . . . . . . . . . . . . 98
8.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Conclusion générale 114
A Notions des trois points et IHIP 1

A.1 Dénition de la Méthode Des Trois Points : . . . . . . . . . . . . . . . 1
A.2 Les caractéristiques IHIP d'un service . . . . . . . . . . . . . . . . . . . . . 1
B La charte graphique de FLEXIPIK 1
C La solution de paiement en ligne ClicToPay 1

C.1 Eectuer une transaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
C.1.1 Diagramme de séquence du cas d'utilisation "Eectuer une transac-
tion" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
x
D La présentation du questionnaire 1
D.1 introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
D.2 Présentation du questionnaire . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
xi
Liste des tableaux
1.1 Tableau comparatif des solutions existantes sur le marché international . . 8

1.2 Les rôles des acteurs de la méthode SCRUM . . . . . . . . . . . . . . . . . 11
1.3 Les outils utilisés dans la méthode SCRUM . . . . . . . . . . . . . . . . . 12
2.1 Les bases et les variables de segmentation . . . . . . . . . . . . . . . . . . 19
3.1 Les rôles des membres du SCRUM . . . . . . . . . . . . . . . . . . . . . . 39

3.2 Le backlog produit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.1 Table du sprint (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

4.2 Description textuelle du cas d'utilisation " s'inscrire " . . . . . . . . . . . . 51
4.3 Description textuelle du cas d'utilisation " s'authentier " . . . . . . . . . 53
4.4 Description textuelle du cas d'utilisation " Gérer son compte" (modier
son compte) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.5 Description textuelle du cas d'utilisation "Charger une images" . . . . . . 58
4.6 Description textuelle du cas d'utilisation "Consulter une image" . . . . . . 60
5.1 Table du sprint (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

5.2 Description textuelle du cas d'utilisation "Télécharger une image" . . . . . 65
5.3 Description textuelle du cas d'utilisation "Gérer ses collections (Modier ses
collections)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.4 Description textuelle du cas d'utilisation "Ajouter une image à une collection" 69
5.5 Description textuelle du cas d'utilisation "Ajouter une image aux favoris" . 71
xii
5.6 Description textuelle du cas d'utilisation "Gérer les commentaires(Ajouter
un commentaire)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
6.1 Table du sprint (3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

6.2 Description textuelle du cas d'utilisation "Gérer les images(Approuver/Refuser
une image)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
6.3 Description textuelle du cas d'utilisation "Gérer ses images(Supprimer une
image)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
6.4 Description textuelle du cas d'utilisation "Acheter un abonnement" . . . . 82
6.5 Description textuelle du cas d'utilisation "Consulter son classement" . . . . 84
7.1 Table du sprint (4) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

7.2 Description textuelle du cas d'utilisation "Gérer les paramètres généraux" . 89
7.3 Description textuelle du cas d'utilisation "Gérer les utilisateurs(Bloquer un
utilisateur)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
7.4 Description textuelle du cas d'utilisation "Signaler une image" . . . . . . . 93
7.5 Description textuelle du cas d'utilisation "Consulter les images signalées" . 94
7.6 Description textuelle du cas d'utilisation "Gérer les articles du blog (Modier
un article)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
xiii
Table des gures
1.1 Fiche d'identité de Circle . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 L'organigramme l'agence Circle . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Zoom sur la science . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Les diverses utilisations des éléments visuels . . . . . . . . . . . . . . . . . 5
1.5 Le site web shutterstock . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6 Le site web freepik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7 Le processus agile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.8 Le processus SCRUM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1 L'analyse SWOT de FLEXIPIK . . . . . . . . . . . . . . . . . . . . . . . . 14

2.2 Le benchmark concurrentiel . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.3 Question 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.4 Question 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.5 Question 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.6 La politique d'ore de Flexipik . . . . . . . . . . . . . . . . . . . . . . . . 22
2.7 La politique de prix de Flexipik . . . . . . . . . . . . . . . . . . . . . . . . 23
2.8 LEAN CANVAS DE FLEXIPIK . . . . . . . . . . . . . . . . . . . . . . . . 27
3.1 Schéma de l'architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . 36

3.2 Le diagramme de cas d'utilisation global . . . . . . . . . . . . . . . . . . . 38
3.3 Planning des sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
xiv
3.4 Le diagramme de classes global . . . . . . . . . . . . . . . . . . . . . . . . 46
4.1 Le diagramme de cas d'utilisation du 1er sprint . . . . . . . . . . . . . . . 50

4.2 Le diagramme de séquence du cas d'utilisation "s'inscrire" . . . . . . . . . 52
4.3 Le diagramme de séquence du cas d'utilisation "s'authentier" . . . . . . . 54
4.4 Le diagramme de séquence du cas d'utilisation "Gérer son compte (exemple :
modier son compte)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.5 Le diagramme de séquence du cas d'utilisation "Charger une image" . . . . 59
4.6 Le diagramme de séquence du cas d'utilisation "Consulter une image" . . . 61
5.1 Le diagramme de cas d'utilisation du 2ème sprint . . . . . . . . . . . . . . 64

5.2 Le diagramme de séquence du cas d'utilisation "Télécharger une image" . . 66
5.3 Le diagramme de séquence du cas d'utilisation "Gérer ses collections (Mo-
dier ses collections)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
5.4 Le diagramme de séquence du cas d'utilisation "Ajouter une image à une
collection" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
5.5 Le diagramme de séquence du cas d'utilisation "Ajouter une image aux favoris" 72
5.6 Le diagramme de séquence du cas d'utilisation "Gérer les commentaires(Ajouter
un commentaire)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.1 Le diagramme de cas d'utilisation du 3ème sprint . . . . . . . . . . . . . . 77

6.2 Le diagramme de séquence du cas d'utilisation "Gérer les images(Approuver/Refuser
une image)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
6.3 Le diagramme de séquence du cas d'utilisation "Gérer ses images(Supprimer
une image)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.4 Le diagramme de séquence du cas d'utilisation "Acheter un abonnement" . 83
6.5 Le diagramme de séquence du cas d'utilisation "Consulter son classement" 85
7.1 Le diagramme de cas d'utilisation du 4ième sprint . . . . . . . . . . . . . . 88

7.2 Le diagramme de séquence du cas d'utilisation "Gérer les images(Approuver/Refuser
une image)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
xv
7.3 Le diagramme de séquence du cas d'utilisation "Gérer les utilisateurs(Bloquer
un utilisateur)" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.4 Le diagramme de séquence du cas d'utilisation "Signaler une image" . . . . 93
7.5 Le diagramme de séquence du cas d'utilisation "Consulter les images signalées" 95
7.6 Le diagramme de séquence du cas d'utilisation "Modier un article" . . . . 97
8.1 Inscription . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2 Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
8.3 Recherche et ltrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
8.4 Gestion de compte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
8.5 Consultation du prol contributeur, le suivre (1) ou le signaler (2) . . . . . 101
8.6 Chargement d'image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
8.7 Consulter la che image, pour l'ajouter aux favoris (1), à une collection (2),
pour la télécharger (3), la paratger (4), la commenter (5) ou la signaler (6) 103
8.8 Ajouet une image à une collection . . . . . . . . . . . . . . . . . . . . . . . 104
8.9 Consulter ses favoris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
8.10 Gérer ses collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
8.11 Consulter ses notications . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
8.12 Choix d'une ore (image, abonnement, paquet) . . . . . . . . . . . . . . . 106
8.13 Checkout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
8.14 Gérer ses images (contributeur) . . . . . . . . . . . . . . . . . . . . . . . . 107
8.15 Consulter son tableau de bord de contributeur . . . . . . . . . . . . . . . . 108
8.16 Consulter son classement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
8.17 Modier une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
8.18 Gérer les images (administrateur) . . . . . . . . . . . . . . . . . . . . . . . 110
8.19 Gérer les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
8.20 modier un utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
8.21 Gérer les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
xvi
8.22 Modier un article ou une page statique . . . . . . . . . . . . . . . . . . . 112
8.23 Consulter son tableau de bord administratif . . . . . . . . . . . . . . . . . 113
A.1 La règle de calcul de la Méthode Des Trois Points . . . . . . . . . . . . 1

A.2 Les caractéristiques distinctives des services . . . . . . . . . . . . . . . . . 2
C.1 Le logo de la plateforme ClicToPay . . . . . . . . . . . . . . . . . . . . . . 1

C.2 Le diagramme de séquence du cas d'utilisation "Eectuer une transaction" 2
xvii
Liste des abréviations
UX User eXperience
TV Television
B2B Business to Business
B2C Business to Consumer
PSD Photoshop Data le
XP Extreme Programming
SWOT Strengths, Weaknesses, Opportunities, Threats
CC BY Creative Commons Attribution
TND Tunisia Dinar
FAQ Frequently Asked Questions
CSS Cascading Style Sheets
DOM Document Object Model
PHP Hypertext Preprocessor
JPEG Joint Photographic Experts Group
PNG Portable Network Graphics
SQL Structured Query Language
SGBD Système de Gestion de Base de Données
xviii
Introduction générale
Contrairement à la compréhension des mots, la compréhension des images ne nécessite

aucune formation particulière. Les images ont été le premier moyen de transmission des
histoires et des connaissances d'une génération d'hommes des cavernes à une autre.
Dès lors, les images racontaient l'histoire de la vie, de la mort, de l'amour et du rire à
des millions de personnes plus ecacement que les mots imprimés ou parlés.
Et en raison de l'énorme capacité des images à exprimer les pensées dans leur plus
simple expression, à attirer l'attention rapidement, et à rester incrustée dans la mémoire,
leur utilisation pour plusieurs ns est devenue primordiale. Donnant ainsi naissance au
concept des banques d'images.
C'est dans ce cadre que s'inscrit le sujet de notre projet de n d'études réalisé au
sein de l'agence CIRCLE : la conception et le développement d'une banque d'images
en ligne qui sera la première application web en Tunisie et en Afrique où les créateurs
d'images (photographes, graphistes, agences de communication, publicités et marketing)
contribueront par leurs créations au service de toute personne qui en a besoin.
Ce rapport se développe ainsi au prisme de ce projet. Son élaboration a pour principale
source les diérents enseignements tirés des étapes suivis pour naliser la réalisation de
l'application web ainsi que les recherches sur internet, les documents et les informations
données par nos encadrants.
Le premier chapitre aura vocation à présenter le contexte général du projet, le 2ème cha-
pitre abordera la stratégie marketing du lancement de Flexipik, le 3ème chapitre traitera le
backlog produit, le 4ème, le 5ème, 6ème et 7ème chapitre présenteront l'étude conceptuelle
des quatre sprints et le 8ème chapitre présentera la réalisation du projet.
Finalement, la conclusion générale récapitule les principaux points de ce rapport, : et donne
des perspectives en vue d'améliorer et d'enrichir ce travail.
1
Chapitre 1
Contexte général du projet
1.1 Introduction
L 'étude de projet est une démarche stratégique visant à organiser le bon déroulement
d'un projet et d'assurer la conduite de toutes les phases qui le constituent. Une étude
complète et ecace conduit généralement à la réussite d'un projet.
Cette étude fera donc l'objet de notre premier chapitre qui sera consacré à la présentation
de l'organisme d'accueil, la présentation du projet, l'étude de l'existant et le choix de la
méthode de travail.
1.2 Présentation de l'organisme d'accueil

Circle est une jeune agence tunisienne de communication digitale 360° créée en mars
2018 qui accompagne les professionnels et les entreprises dans leurs projets de communi-
cation globaux et événementiels : conseils, créations graphiques, web marketing, photogra-
phie, création et montage des vidéos, architecture urbaine et design d'espace interne et
externe.
Sa vision est d'accompagner ses clients tout au long de leurs cursus de développement et
de leur apporter les solutions les plus adaptés à leurs problématiques.
La gure (g. 1.1) présente le logo de l'agence Circle ainsi que sa che d'identité :
2
Chapitre 1 Contexte général du projet
Figure 1.1 Fiche d'identité de Circle
1.2.1 Organigramme de l'entreprise

La gure (g. 1.2) présente l'organigramme de l'agence Circle où le directeur fondateur
et le responsable administratif et nancier supervisent : deux community managers (res-
ponsables des stratégies digitales) , un responsable marketing stratégique , trois graphistes
et un responsable en conception UX.
Figure 1.2 L'organigramme l'agence Circle
3
1.3 Présentation du projet

Dans la présente partie, nous allons donner un aperçu sur le sujet sur lequel nous avons
travaillé tout au long de la période du stage.
1.3.1 L'importance du contenu visuel

Au royaume du contenu, l'image est reine.
En eet, comme le démontre la gure (1.3), le cerveau humain traite le contenu visuel
60,000 fois plus rapidement que le contenu textuel et 90% de l'information transmise au
cerveau est visuelle.[1, 2]
Figure 1.3 Zoom sur la science
Ces statistiques reètent parfaitement les raisons pour lesquelles le contenu visuel n'a cessé
de jouer un rôle primordial, soit pour les entreprises, soit pour utilisation personnelle.
4
En fait, de nos jours, l'image est indispensable pour diverses utilisations telles celles citées
au niveau de la gure ( 1.4) :
Figure 1.4 Les diverses utilisations des éléments visuels
1.3.2 Problématique du projet

Personne ne peut nier le pouvoir incontournable de l'image d'attraction de son cible,
de transmission rapide des messages et d'incrustation des informations dans la mémoire.
5
Donc il est plus important que jamais d'exploiter la puissance de l'image pour atteindre
des diérents objectifs quel que soit le domaine (branding, marketing, publicité, édition ou
production artistique).
Mais d'une part, pas tous les entrepreneurs ont les moyens nanciers ou le temps d'embau-
cher un photographe pour chaque projet. Et d'autre part, les créateurs d'images tunisiens
n'ont pas de plateformes pour y exposer leurs créations et en gagner de l'argents.
Alors comment pouvons-nous exploiter le pouvoir des nouvelles technologies
pour permettre aux créateurs des images d'exposer leurs créations au service
des entreprises et particuliers dans le but de satisfaire leurs besoins ?
1.3.3 L'objectif du projet

Le but de ce projet est de développer une application web d'une banque d'images qui
donnera l'opportunité aux photographes et aux graphistes tunisiens de commercialiser leurs
créations, créant ainsi un stock qui sera disponible à toute personne qui en a besoin.
1.4 Étude de l'existant

L'étude de l'existant est une phase importante pour bien comprendre le système et
dénir ses objectifs.
Cette partie a pour objectif d'analyser les solutions similaires en dégageant les points forts
et les points faibles de chacune.
1.4.1 Analyse de l'existant

En ce qui concerne notre projet, nous n'avons signalé aucune banque d'images tuni-
sienne.
C'est pour cela que nous avons approfondi nos recherches pour sélectionner deux solutions
existantes à l'échelle internationale dans le but de dégager les fonctionnalités de base com-
munes et d'identier les points forts qui les diérencient des autres ainsi que leurs points
faibles.
Ces deux solutions sont :
6
Shutterstock (g. 1.5) a été fondée en 2003 par le programmeur et photographe

Jon Oringer à New York. Elle est aujourd'hui la plus grande banque en ligne d'images du
monde avec plus de 300 millions de contenus présents sur le site.[4]
Figure 1.5 Le site web shutterstock
Freepik (g. 1.6) est une banque d'image fondée en 2010 par les frères Alejandro
et Pablo Blanes, et leur ami Joaquín Cuenca, ayant comme objectif initial de fournir des
ressources graphiques gratuites aux designers. Elle s'est développée au cours des années en
changeant son modèle économique pour donner naissance à un système d'abonnement et
à ses deux nouveaux projets : Flaticon et Slidesgo.[5]
Figure 1.6 Le site web freepik
7
1.4.2 Critique de l'existant

Le tableau ( 1.1) récapitule les points forts que nous allons prendre en considération
lors du développent de FLEXIPIK et les points faibles que nous allons éviter.
Table 1.1 Tableau comparatif des solutions existantes sur le marché international
Les points forts Les points faibles

-Plus que 300 millions de contenu
et 200 000 ajoutés chaque jour.
-Prix très élevés.
-Technologies de reconnaissance d'image avancées.
-Concurrence acharné pour
-Navigation facile.
les nouveaux contributeurs.
-Moteur de recherche et ltres avancés.
-Outils d'édition d'image instantanés.
-Bonne expérience utilisateur et une érgonomie
bien étudiée. - Pas de catégorisation des images.
-Prix très concurrentiels. -Choix de forfait limité.
-téléchargement illimité (100 images par jour).
1.4.3 Solution proposée

FLEXIPIK est une application web, multi-vendeurs d'e-commerce de formes B2B
(Entreprise vers entreprise) et B2C (Entreprise vers Client). Elle permet ,d'une
part, aux créateurs d'images (Photos, vecteurs, PSD ,icônes) de s'inscrire en tant que
des contributeurs pour pouvoir charger leurs images et avoir accès à un tableau de bord
où ils peuvent suivre leurs statistiques et gérer leurs contributions.
Et d'autre part, toute personne ayant besoin d'images sera capable de s'inscrire pour
pouvoir télécharger directement le contenu gratuit voulu ou acheter les images payantes
après avoir choisi l'ore qui lui convient.
Quant au Back Oce, l'administrateur aura accès à un tableau de bord d'administration
de la plateforme doté de plusieurs fonctionnalités telles la gestion des paramètres généraux,
des images, des utilisateurs, des pages statiques, des catégories ainsi qu'un système de suivi
des statistiques et les indicateurs de performances.
8
1.5 Choix de la méthodologie de travail

Tout projet ayant un niveau de complexité considérable rend l'adoption d'une métho-
dologie de développement une nécessité pour garantir une qualité acceptable et éviter tout
retard au niveau des délais.
1.5.1 Les méthodes agiles
Figure 1.7 Le processus agile
Une méthode agile est une approche itérative et incrémentale, qui est menée dans un
esprit collaboratif, avec juste ce qu'il faut de formalisme.
La gure 1.7 décrit le processus agile qui se base sur le principe du développement
itératif qui consiste à découper le projet en plusieurs étapes d'une durée de
quelques semaines ; ce sont les itérations. Chaque itération est un mini-projet
en soi, au cours de chacune, une version minimale du produit attendu est développée puis
soumise, dans sa version intermédiaire, au client pour validation (le résultat n'est pas
un prototype, mais bien une version intermédiaire du produit nal).
L'objectif est d'obtenir, au terme de chaque itération, un sous-ensemble opéra-
tionnel du système cible et, au terme de la dernière itération, la version nale du
9
produit.[12]
1.5.2 Les principales méthodes agiles

Les méthodes agiles les plus connues et utilisées actuellement sont :
Scrum
XP (Extreme Programming)
Test Driven Development
Crystal Clear
Et suite à une réunion faite avant le démarrage du projet, nous avons décidé d'opter pour
SCRUM étant le plus convenable à notre projet.
1.5.3 Principe de SCRUM
Figure 1.8 Le processus SCRUM
Nous constatons dans la gure 1.8 que tout projet SCRUM commence par la déni-
tion du backlog du produit servant à développer des produits, généralement en quelques
mois.Le backlog est focalisé sur un ensemble de fonctionnalités à faire, sous forme d'itéra-
tions appelées Sprints.
10
Chaque Sprint vise un objectif déni par le directeur de produit (Product owner), à partir
duquel sont choisies les fonctionnalités à implémenter dans ce backlog du sprint, en tenant
compte des priorités et de la capacité de l'équipe.
Un sprint est un bloc de temps xé aboutissant à créer un incrément du produit potentiel-
lement livrable qui dure entre 1 et 4 semaines.
Le réunion quotidienne permet de faire un point avec toute l'équipe sur le travail qu'il
réalisera le jour même et liste les dicultés qu'il a rencontrées.
A la n de chaque Sprint, l'équipe délivre un produit potentiellement livrable au client.[13]
1.5.4 Les rôles des acteurs de la méthode SCRUM

Le tableau 1.2 présente et explique le rôle de chaque acteur présents dans la méthode
SCRUM.
Table 1.2 Les rôles des acteurs de la méthode SCRUM
Il est le représentant du client. Il porte la vision du projet à réaliser.
C'est le garant de l'application de la méthodologie agile.
Elle représente l'ensemble des personnes travaillant au développement du projet.
11
1.5.5 Les artéfacts de SCRUM

Le tableau 1.3 détaille les outils utilisés dans la méthode SCRUM.
Table 1.3 Les outils utilisés dans la méthode SCRUM
Product back- Il s'agit de la liste des fonctionnalités/des actions qui devront être mises en
log (ou back- ÷uvre par le produit ou le service.
log produit)
Sprint backlog Il s'agit de la liste des tâches à accomplir pendant un sprint/ une itération.
(ou backlog Elles correspondent à la réalisation des éléments du backlog produit, aectés
d'itération) à l'itération.
Graphiques Le burndown est un graphique qui représente le reste à faire jour après jour,
burndown/up ou itération après itération. Le burnup, lui, représente le suivi de l'eort livré
sur les tâches du backlog d'itération.
1.6 Conclusion
Ce chapitre a été consacré à la spécication du projet, à travers lequel nous avons
présenté son cadre général ainsi que la problématique et la solution proposée que nous
allons traiter son analyse, sa conception ainsi que sa réalisation au niveau des chapitres à
suivre.
Dans le chapitre suivant, nous allons présenter la stratégie marketing du lancement de
Flexipik.
12
Chapitre 2
Stratégie marketing du lancement de

Flexipik
2.1 Introduction
D ans le chapitre précédent, nous nous sommes intéressés à la la présentation de l'orga-

nisme d'accueil ainsi que le cadre générale du projet et la méthode de travail à suivre.
Dans ce chapitre nous présenterons le diagnostic de l'environnement interne et externe suivi
par l'élaboration d'une stratégie marketing.
2.2 Diagnostic de l'environnement interne et externe

2.2.1 L'analyse SWOT
Avant de dénir la stratégie marketing du lancement de exipik, il fallait commencer
par "la Matrice SWOT" (FFOM).
L'objectif de cette analyse est de dégager les menaces existantes à contrecarrer ainsi que les
opportunités oertes que nous allons en tirer prot par l'exploitation des forces de Flexipik
et la recherche des solutions adéquates pour les faiblesses détectées.
13
Chapitre 2 Stratégie marketing du lancement de Flexipik
2.1 L'analyse SWOT de FLEXIPIK

Figure
14
2.2.2 Le benchmark concurrentiel
Figure 2.2 Le benchmark concurrentiel
15
Pour plus approfondir le diagnostic de l'environnement externe, nous avons eu recours

au benchmark concurrentiel, dans le but d'en tirer l'avantage concurrentiel de Flexipik 2.2.
Nous avons constaté que les expériences proposées sont plus ou moins semblables sur le
plan technologique donc l'enjeu doit être basé sur les ores et les prix.
2.2.3 Etude de marché

Description de l'enquête :
Objectif :
Pour l'élaboration de la stratégie marketing, il faut débuter par la segmentation qui doit
être basée sur des données mises à jour et en cohérence avec les critères de segmentation
choisis. Alors nous avons élaborer une enquête par questionnaire en ligne dans le but de
collecter les données nécessaires.
Échantillon :
Notre échantillon est composé des acheteurs d'images (toute personne ayant besoin
d'images) et des contributeurs (les créateurs d'images :photographes,graphistes, designers
produit, web,mobile).
Choix du mode de diusion du questionnaire :

Dans le but d'assurer la rapidité de la collecte de réponses et de toucher le plus grand
nombre de répondeurs possible, nous avons opté pour une enquête en ligne sur le réseau
social Facebook, qui était diusé par messages privés et par publication dans les groupes
de freelance, photographie, design, communication et marketing, développement web et
mobile.
Présentation du questionnaire :
Au total, notre enquête comprend 10 questions : 3 questions introductives, 3 questions
spéciques et 4 questions concernant la che signalétique.
Présentation et analyse des résultats issus de Google :

Nous allons présenter les diagrammes statistiques des trois questions sur lesquelles nous
baserons notre segmentation. Nous avons collecté un nombre total de 75 réponses.
16
Question 1 : La première question nous a permis de diviser notre échantillon

selon la fréquence d'utilisation des images.
Figure 2.3 Question 1
Question 2 : La deuxième question nous a permis de diviser notre échantillon

selon la profession.
17
Question 3 : La troisième question nous a permis de diviser notre échantillon

selon le domaine de travail.
Ces résultats seront exploités dans la partie suivante de la segmention du marché.
2.3 L'élaboration de la stratégie marketing

La stratégie marketing est un plan d'actions coordonnées mis en ÷uvre sur le moyen
ou long terme par une entreprise pour atteindre ses objectifs commerciaux et marketing.
Après l'analyse sratégique, l'élaboration d'une stratégie marketing repose sur quatres élé-
ments fondamentaux : la segmentation, le ciblage, le positionnement et le marketing mix
[7].
2.3.1 La segmentation du marché

La segmentation signie diviser votre marché en sous-ensembles (segments) identiables
et exploitables. Ceux-ci partagent des caractéristiques communes en termes de besoins,
d'attentes ou de demande.
La première étape de la création de segments de marché consiste à dénir clairement le
marché d'intérêt.
18
Et dans notre cas, nous ciblons le marché de la vente des images numériques en ligne [6].
L'étape suivante est la détermination des types (segments) de consommateurs diérents
qui forment ce marché global.
Pour ce faire, il faut dénir les critères de segmentation ainsi que les variables de segmen-
tation qui vont conduire à l'identication des segments intéressants.
Cette phase est illustrée par le tableau 2.1 :
Table 2.1 Les bases et les variables de segmentation

BASE DE SEGMENTATION PRINCIPALE VARIABLE DE SEGMENTATION
Profession
socio-démographique
Domaine de travail
Comportementale Fréquence d'utilisation des images
Passant maintenant à la troisième étape qui s'agit de la construction des prols de

segments qui est basé sur l'étude de marché :
Segment 1 : marketeurs de masse (42,67%)

Des chefs d'entreprises, des employés ou des freelances travaillant dans le secteur de marke-
ting et communication et qui utilisent les images (photo, psd, icones, vecteur) fréquemment
ou très fréquemment dans leurs projets.
Segment 2 : marketeurs occasionnels (16%)
Des chefs d'entreprises, des employés ou des freelances travaillant dans le secteur de mar-
keting et communication et qui utilisent les images (photo, psd, icones, vecteur) dans leurs
projets mais pas fréquemment.
Segment 3 : designers de masse (10,66%)
Des chefs d'entreprises, des employés ou des freelances travaillant dans le secteur du design
(graphique, web, mobile, produit) et qui utilisent les images (photo, psd, icones, vecteur)
fréquemment ou très fréquemment dans leurs projets.
Segment 4 : designers occasionnels (4%)
Des chefs d'entreprises, des employés ou des freelances travaillant dans le secteur du design
(graphique, web, mobile, produit) et qui utilisent les images (photo, psd, icones, vecteur)
dans leurs projets mais pas fréquemment.
Segment 5 : Autres masses (18,67%)
Des chefs d'entreprises, des employés ou des freelances travaillant dans les autres secteurs
et qui utilisent les images (photo, psd, icones, vecteur) fréquemment ou très fréquemment
19
dans leurs projets.

Segment 6 : Autres occasionnels (8%)
Des chefs d'entreprises, des employés ou des freelances travaillant dans les autres secteurs
et qui utilisent les images (photo, psd, icones, vecteur) dans leurs projets mais pas fré-
quemment.
2.3.2 Le ciblage
Après avoir achevé la segmentation du marché cible, il faut passer maintenant à l'iden-
tier la cible de Flexipik.
En fait, il existe quatre principales stratégies de ciblage en fonction du nombre de segments
que l'entreprise choisit de cibler et de l'adaptation de l'ore qu'elle se propose d'adopter :
le marketing indiérencié, le marketing diérencié, le marketing concentré et le marketing
adapté.
Et comme Flexipik est la première banque d'images tunisienne à exploiter le marché de
vente d'images en ligne en Tunisie, elle vise à toucher le maximum des suspects, prospects
et prospects chauds. Et vu qu'il existe aussi une hétérogénéité entre les segments en terme
de besoin en nombre d'images et de la fréquence de l'utilisation, nous avons regrouper les
segments en deux lots.
Le premier (utilisateurs de masse) comporte les trois segments marketeurs, designers et
autres de masses qui représentent la partie de la cible qui utilisent beaucoup d'images dans
leurs projets.
Et le deuxième (utilisateurs occasionnels) comporte les trois segments marketeurs, designers
et autres occasionnels qui représentent la partie de la cible qui utilisent occasionnellement
les images dans leurs projets.
Alors la stratégie adoptée par Flexipik est la stratégie de ciblage marketing
adapté qui consiste à adapter son ore aux besoins spéciques de chaque seg-
ment de clients.
2.3.3 Le positionnement
Dans le but de déterminer notre positionnement par rapport aux autres acteurs et
identier l'avantage compétitif de chacun de nos compétiteurs, il fallait se baser sur les
20
conclusions tirées de l'étude faite par le biais du benchmark concurrentiel 2.2.

L'avantage compétitif de shutterstock : shutterstock se distingue par sa position
de leader mondial des banques d'images, par un stock qui compte plus de 300 millions
d'images. De plus, elle ore à ses utilisateurs des outils d'éditions d'image (convertisseur
d'image, recadrage, collage), ainsi qu'une recherche avancée dotée de nouvelle algorithme
de reconnaissance d'images.
L'avantage compétitif de freepik : freepik se diérencie par l'ore d'un grand
nombre de contenus gratuits et par des prix très bas. (un abonnement annuel ou mensuel
pour un accès illimité).
Positionnement de Flexipik : Comme Flexipik a ciblé tous les segments du marché,
elle se diérenciera de ses concurrents par la exibilité ses prix et de ses ores qui répondront
à tout besoin.
2.3.4 Le mix marketing (les 7P de FLEXIPIK)

Après avoir diagnostiquer l'environnement interne et externe en s'outillant du SWOT,
du benchmarking et du questionnaire. Et après avoir identier notre cible et choisi notre
positionnement, nous allons maintenant entamer l'élaboration du mix marketing.
Pour son concepteur, McCarthy, le marketing mix représente un ensemble d'éléments mar-
keting contrôlables qui, gérés de manière appropriée (c'est-à-dire en direction du marché
cible, en cohérence avec les besoins des consommateurs), auraient pour conséquence des
opérations d'aaires protables.[8]
Les quatre facteurs contrôlables concrétisant la politique marketing d'une organisation sont
politique de produit, la politique du prix, La politique de distribution (place) et la politique
de communication (promotion) connus par les 4P du marketing mix.
Cependant, personne ne peut nier la diculté de son application au domaine des services,
du fait de leurs caractéristiques IHIP (Voir annexe A), c'est pour cela que chaque élément
du marketing mix doit donc être adapté lorsqu'il est appliqué à une ore de service.
Par conséquent,dans cette section, nous ne parlerons plus de 4P mais plutôt des 7P.
2.3.4.1 La politique produit (présentation de l'ore)
Flexipik orira à ses clients un grand stock d'images de diérents types (Photos, vec-
teurs, PSD, icônes), variées, de taille diérente, de bonne qualité, d'actualité et plus ou
21
Figure 2.6 La politique d'ore de Flexipik
moins libres de droits.

Les images du stock sont subdivisées en deux types d'ores :
- images gratuites sous la licence "Creative Commons Attribution CC BY ", ne requérant
que l'inscription et l'attribution de l'auteur et de la source pour pouvoir les télécharger
et les utiliser (distribuer, modier, adapter et de s'appuyer sur l'image, même pour usage
commercial).
- images payantes 100% libre de droits, ne requérant pas l'attribution de l'auteur et qui
peuvent être téléchargées par :
l'achat d'un abonnement annuel ou sur-mesure (pour les grandes entreprises
ayant besoin d'accès multiples à leurs employés) : il nécessite l'engagement du client
pendant un an et il est destiné principalement au premier lot cité précédemment dans la
section de ciblage (utilisateurs de masse).
l'achat direct de l'image, d'un paquet d'images valable pour un an ou d'un
abonnement mensuel sans engagement : ils sont destinés principalement au deuxième
lot cité précédemment dans la section de ciblage (utilisateurs occasionnels).
De plus, Le stock est toujours alimenté par des nouvelles images soit par les contributeurs
soit par l'équipe de Flexipik tout en garantissant la bonne qualité du contenu grâce aux
véricateurs qui examinent les images une par une.
2.3.4.2 La politique du prix
La xation des prix étaient basé sur une comparaison par rapport aux concurrents
internationaux vu que, comme cité avant, nous n'avons pas de concurrents nationaux. Et
nous avons choisi la stratégie de pénétration en xant des prix relativement bas visant
22
ainsi à conquérir une part importante du marché. Pour inciter les clients à acheter des
abonnements annuel qui sont les plus bénéques pour nous puisque le client sera engager
à renouveler chaque mois, nous avons xer le même nombre d'images oert dans les deux
types d'abonnements mais avec des prix par mois plus bas en abonnements annuel que le
mensuel.
La gure 2.7 récapitule les détails des prix.
Figure 2.7 La politique de prix de Flexipik
2.3.4.3 La politique de distribution
FLEXIPIK est une banque d'images en ligne et donc disponible partout et à tout mo-
ment. En fait, la totalité des services de FLEXIPIK est oerte en ligne.
23
Par ailleurs, les utilisateurs peuvent y accéder via les ordinateurs, les tablettes et les smart-
phones de n'importe quelle dimension d'écran grâce à son application web réactif (respon-
sive).
2.3.4.4 La politique de communication
Au bout de 6 mois après son lancement, Flexipik vise à atteindre un nombre de 50 mille
inscriptions.
Et pour atteindre cet objectif, nous avons mis en place un stratégie Inbound Marketing
visant à exploiter le potentiel des nouveaux outils du web an d'attirer naturellement de
nouveaux clients plutôt que de leur courir après. De plus, elle coûte 61% moins cher que
via des actions marketing traditionnelles.
La stratégie inbound marketing est parfaitement adaptée au parcours du consommateur
en ligne. Ainsi, le tunnel de conversion est composé de 4 phases : attirer, convertir, vendre,
déliser.
Attirer : La nature de l'ore de Flexipik exige que ses images apparaissent parmi les
premiers résultats de recherche, de ce fait de grands eorts et ressources seront dédiés au
référencement de l'application web qu'il soit naturel ou payant, comme l'embauche des
rédacteurs et référenceurs web professionnels et les dépenses de référencement payant.
De plus un blog avec du contenu pertinent et des articles bien référencés servira à attirer
davantage de visiteur, l'internaute tape une requête de type informative sur un moteur
de recherche (par exemple les coûts d'un photo-shooting en comparaison avec les banques
d'images, des tutoriaux de graphisme, comment gagner de ses images ? ,où trouver les
meilleures icônes ? ,Comment créer des posts stylés pour les réseaux sociaux ?) et tombe
alors sur un contenu publié sur notre blog.
Par ailleurs, Flexipik travaillera sur sa présence sur les réseaux sociaux principalement Fa-
cebook et Instagram pour créer une relation client forte et gérer sa communauté virtuelle
et YouTube pour guider les utilisateurs de la banque d'images à travers des tutoriaux et
des guides d'utilisation de FLEXIPIK pour les clients, et des tutoriaux techniques pour les
contributeurs (conseils de photographie, conception graphique, etc).
Convertir : Pour convertir les visiteurs en des leads Flexipik proposera des images gra-
tuites de haute qualité nécessitant la création d'un compte sur la plateforme qui nous
permettra de collecter leurs coordonnées et savoir leurs intérêts et besoins. Et ce, à travers
les boutons d'appel à l'action (call-to-action) suscitant les visiteurs se jouir notre ore gra-
24
tuite, et menant à une page d'atterrissage (landing page) avec un design clair, invitant, et
joli et respectant la charte graphique de Flexipik (Voir annexe B).
Vendre : Maintenant que les visiteurs sont devenus des prospects et que leurs coordonnées
sont enregistrées chez nous (adresse mail, numéro de téléphone, nom de l'entreprise etc.)
et nous pouvons suivre leurs comportements et leurs intérêts, vous devons les faire avancer
dans le cycle de vente en leur proposant des images et des ores adaptées à leurs besoins.
Cela passe notamment par des workows d'email automatisés, ou par une page d'accueil
avec un contenu et des appels à l'action personnalisés.
En outre, l'aliation sera aussi un levier primordiale utilisé par Flexipik pour trouver da-
vantage de clients et booster ses ventes à travers un réseau d'apporteurs d'aaires qui sera
créé par l'ensemble des aliés qui vont recommander ses ores à sa place.
Fidéliser : Les études montrent que déliser sa clientèle existante ore un retour sur in-
vestissement beaucoup plus intéressant que l'acquisition d'un nouveau client. Pour cela,
Flexipik disposera d'un centre d'aide par email et par téléphone répondant à tous les soucis
de ses clients et d'une page FAQ pour un bon service après-vente. Elle inclura aussi du
contenu éducatif dans le blog et des tutoriaux. Elle utilisera même des méthodes de délisa-
tion comme la proposition des avantages commerciaux pour les clients les plus dèles (par
exemple par fêter leurs anniversaires par l'envoi d'un mail contenant un bon de réduction).
2.3.4.5 Les personnes
Flexipik est engagée envers ses clients à assurer un contenu de qualité et cet enjeu est
garanti par l'équipe de vérication qui veille à traiter les images une par une.
Et étant donné que FLEXIPIK exercera ses activités principalement en ligne, l'équipe
marketing et l'équipedes médias sociaux constitueront le bras le plus important de l'orga-
nisation.
FLEXIPIK disposera également d'un centre d'aide en ligne, d'un service d'appel client
gérés par des employés experts et bien qualiés.
C'est pour cela que FLEXIPIK se concentrera sur l'embauche de personnes talentueuses
d'horizons, de cultures et de perspectives divers.
2.3.4.6 Les processus
Dans le cadre de l'e-commerce et des parcours clients cross-canal, l'expérience utilisateur

est une composante importante, voire essentielle de l'expérience client.
25
C'est pour cela que Flexipik garanti à ses clients une expérience utilisateur unique en orant
des interfaces ergonomiques, une navigation rapide et facile et un contenu pertinent. Servant
ainsi à accélérer et simplier les processus d'inscription, d'achat (d'images, de paquets
d'images, d'abonnements), de résiliation des abonnements, de la découverte et l'obtention
d'informations.
De plus, les processus de réclamation et de demande de conseil sont assurés par un centre
d'aide disponible soit par e-mail soit par téléphone.
2.3.4.7 La preuve physique
Les preuves physiques sont le dernier élément à aborder dans le mix marketing de
Flexipik.
Comme Flexipik est une banque d'images en ligne, son application Web est sa principale
preuve physique. Son bureau fait également partie des preuves matérielles. Il s'agit alors
de l'aspect tangible du service.
2.4 LEAN CANVAS

Lean Canvas ou La Toile Maigre est un modèle de plan d'aaires d'une page adapté du
Business Model Canvas et optimisé pour les startups Lean.
Il a été créé pour remplacer les plans d'aaires (BUSUNESS PLAN) qui prennent trop de
temps à rédiger, sont rarement mis à jour et presque jamais lus par d'autres.
C'est pour cela que nous avons opté pour l'élaboration de ce modèle commercial illustré
par la gure 2.8
26
2.8 LEAN CANVAS DE FLEXIPIK

Figure
27
2.5 Conclusion
Ce chapitre a été consacré à la xation de la stratégie marketing qui sera suivie lors du
lancement de Flexipik, ainsi nous avons préciser les 7P du mix marketing et le lean canvas
tout en justiant nos choix.
Dans le chapitre suivant, nous allons présenter le backlog produit du projet à réaliser.
28
Chapitre 3
Backlog produit
3.1 Introduction
D ans ce chapitre, nous allons commencer par l'élaboration de la première phase de la

méthodologie Scrum, appelée planication et structuration ou sprint zéro.
La particularité de ce sprint se manifeste par le fait qu'on n'aura pas un produit potentiel-
lement livrable à la n de sa réalisation puisque cette phase est consacrée essentiellement
à la préparation de l'environnement de développement.
L'objectif de ce chapitre est d'établir une vision globale de notre produit, identier les
acteurs qui vont interagir avec notre système, dégager les exigences fonctionnelles et non-
fonctionnelles, élaborer la planication des releases, établir le backlog de produit et nale-
ment préparer la planication initiale des sprints et le planning de réalisation du projet.
3.2 Etude préliminaire

L'étude préliminaire est une étape incontournable que chaque processus de développe-
ment doit débuter avec. Elle consiste à identier les acteurs de notre produit et à déterminer
les besoins fonctionnels et non-fonctionnels.
L'objectif de cette étape est principalement la spécication détaillée des fonctionnalités
attendues d'un service ou d'un produit.
29
Chapitre 3 Backlog produit
3.2.1 Identication des acteurs
Un acteur représente un rôle joué par une entité externe (utilisateur humain, dispositif
matériel ou autre système) qui interagit directement avec le système étudié.
Un acteur peut consulter et/ou modier directement l'état du système, en émettant et/ou
en recevant des messages susceptibles d'être porteurs de données. [25]
Notre projet s'agit de concevoir et développer une première banque d'images 100%
tunisienne qui s'agit d'une application web, multi-vendeurs, d'e-commerce réunissant les
contributeurs et les acheteurs et créant des réseaux de vente et d'achat de photos, vecteurs,
PSD, icônes. Et pour la gestion d'une telle application, il faut un Back Oce qui sera destiné
à une équipe administrative composé d'un administrateur principal, des véricateurs et des
auteurs.
Donc FLEXIPIK sera en interaction avec cinq acteurs :
Acheteur : un acteur qui va accéder à la banque d'images et créer un compte, le para-
métrer, naviguer sur FLEXIPIK (consulter le contenu , rechercher des images, consulter les
prols des contributeurs, les suivre ou les signaler, télécharger des images et eectuer des
achats et consulter son tableau de bord (liste de favoris , de téléchargement, ses collections).
Contributeur : un acteur qui va accéder à FLEXIPIK, créer un compte qui lui per-
mettra de jouir des fonctionnalités oertes à l'acheteur en plus du chargement des images
et de la gestion de son tableau de bord qui lui permet de consulter ses statistiques (total
de ventes, total d'images chargées, total de j'aime) et ses images(acceptées, refusées, en
attente, signalées), les modier ou les supprimer ainsi que la consultation de son classement
par rapport aux autres contributeurs).
Administrateur : un acteur qui va accéder au Back Oce de FLEXIPIK, gérer son
panneau administratif ( consulter les indicateurs de performances, gérer les paramètres
généraux ainsi que les utilisateurs, les catégories, les images, les signalements, les pages
statiques et les articles du blog.
Véricateur : un acteur qui va accéder au Back Oce de FLEXIPIK et qui aura l'accès
seulement à la gestion des images(consulter, approuver, refuser, supprimer ou charger les
images).
Auteur : un acteur qui va accéder au Back Oce de FLEXIPIK et qui aura l'accès
seulement à la gestion des articles (ajouter, consulter, modier ou supprimer les articles).
30
3.2.2 Identication des exigences fonctionnelles
Ces exigences englobent la représentation abstraite des services que l'application web
FLEXIPIK est censé fournir aux diérents utilisateurs.[27] Celles de notre système sont
les suivants :
La gestion de l'inscription : Notre système doit permettre à l'acheteur et au
contributeur de créer un compte.
La gestion de l'authentication : Notre système doit permettre aux utilisateurs
de s'authentier et de réinitialiser leurs mots de passe en cas d'oublie.
La gestion de compte : Notre système doit permettre aux utilisateurs de consulter
leurs prols, de modier leurs informations personnelles.
un moteur de recherche : Notre système doit permettre à l'utilisateur de eectuer
des recherches par mots clés et d'aner les résultats grâce à un ltre détaillé (par types
d'image, par orientation, par licence, par popularité).
La gestion d'image : Notre système doit permettre à l'acheteur de consulter les
images et leurs détails, de les télécharger, les signaler, les commenter, les partager sur les
réseaux sociaux, les ajouter à sa liste de favoris ou à ses collections.
Toutes ses fonctionnalités seront permises au contributeur aussi, en plus du chargement,
la modication et la suppression d'images.
Pour l'administrateur, il jouit de toutes les fonctionnalités permises au contributeur en plus
de la gestion administratif de toutes les images (approuver les images, refuser les images,
supprimer les images signalées). Et pour le véricateur, il doit être aussi permis à la gestion
administratif de toutes les images et à la consultation les images signalées.
Un système de reconnaissance d'image : Notre système doit être doté d'un
algorithme d'analyse de similarité entre les images pour se prémunir contre la redondance
du contenu et optimiser les propositions des images similaires dans les ches des images.
Un système d'achat : Notre système doit permettre à l'acheteur d'eectuer des
achats tout en respectant les normes de l'e-commerce(choix de l'ore, checkout, choix de
la méthode de paiement, conrmation de l'achat).
La gestion des collections et de favoris : Notre système doit permettre aux
utilisateurs de créer des collections, de les consulter, de les modier et de les supprimer.
De plus, il doit permettre de gérer les favoris.
31
Un système de notications : Notre système doit être capable de notier les

utilisateurs des actions qui leur concernent faites par les autres utilisateurs telles l'ajout
d'un commentaire, la mention d'un j'aime sur ses images ou l'abonnement.
Un système de suivi et signalement : Notre système doit permettre à l'acheteur
de consulter les prols des contributeurs, de les signaler ou de les suivre pour visualiser
leurs nouveautés dans son l d'actualité.
La gestion des tableaux de bord : Notre système doit permettre à l'acheteur
de manipuler son tableau de bord où il peut consulter la liste de ses téléchargements, ses
collections, ses favoris, son contrat et ses téléchargements restants en cas d'abonnement.
Toutes ces fonctionnalités seront permises au contributeur aussi en plus du suivi de ses
statistiques et de son classement ainsi qu'un gestionnaire d'images.
Et pour l'équipe administrative, notre système doit lui permettre de gérer un panneau
administratif où il peut visualiser les statistiques et les indicateurs de performances en
plus de la gestion des paramètres généraux, des utilisateurs, des catégories, des images, des
signalements, des pages statiques et des articles du blog.
3.2.3 Identication des exigences non fonctionnelles

Les exigences non fonctionnelles sont celles qui sont importantes voire critiques aux
yeux des utilisateurs et qui assurent le bon fonctionnement du système. [26] Celles de notre
système se décrivent comme suit :
Facilité d'utilisation : Notre système doit être facile à manipuler pour l'utilisateur.
Intégrité des données : Des contrôles de saisie doivent être eectués pour assurer que
les données soient cohérentes et pertinentes.
Responsive : Notre système doit être adaptée aux diérents terminaux qu'un utilisateur
peut utiliser (ordinateur portable, téléphone mobile, tablette, etc.).
Ergonomie et souplesse : L'application doit orir des interfaces conviviales , ergono-
miques et exploitables par l'utilisateur.
Performance : Les traitements doivent être optimisés pour avoir un court temps de
réponse.
Ecacité : Notre système doit être fonctionnelle indépendamment de toutes circons-
tances pouvant entourer l'utilisateur.
Sécurité : Notre système doit assurer la condentialité des données pour qu'aucune
information personnelle ne soit divulguée.
32
Maintenabilité : La solution doit être extensible et facile à maintenir avec un traçage

des erreurs.
3.3 Spécications techniques

Les besoins techniques donnent une vision globale sur l'architecture générale de notre
projet aboutissant au développement de l'application web.
La première question qui se pose pour la réalisation de la partie technique du projet c'est
quelles sont les technologies à utiliser pour assurer le bon fonctionnement de l'application.
La présente partie se concentre sur le choix de certaines technologies qui concerne :
Les technologies de l'application web.
La base de données.
Les outils de développement, de conception et de planication.
L'architecture logicielle.
3.3.1 Les technologies de Flexipik

Pour la réalisation de l'application, nous avons utilisé les technologies suivantes :
HTML5 signie HyperText Markup Language qu'on peut traduire par lan-
gage de balises pour l'hypertexte . Il est utilisé an de créer et de représenter le contenu
d'une page web et sa structure.[14]
CSS3 est un langage de feuille de style utilisé pour décrire la présentation d'un do-
cument écrit en HTML ou en XML.Il décrit la façon dont les éléments doivent être achés
à l'écran, sur du papier ou sur d'autres supports.[15]
Bootstrap est un framework de développement frontal gratuit et open source. Il

est construit sur HTML, CSS et JS pour faciliter le développement de réactifs , mobile
premiers sites et applications Web.[16]
JavaScript JS ,est un langage de script léger, interprété et orienté objet, prin-

cipalement connu comme le langage de script des pages web.[17]
33
jQuery est une bibliothèque JavaScript conçue pour simplier la traversée et la

manipulation de l'arborescence DOM HTML, ainsi que la gestion des événements, l'ani-
mation CSS et Ajax.[18]
Ajax désigne un type de conception de pages Web permettant l'actualisation de
certaines données d'une page sans procéder au rechargement total de cette page.[19]
PHP Langage de scripts libre principalement utilisé pour produire des pages
Web dynamiques.[20]
Laravel est un framework web PHP open source gratuit qui a pour
objectif de faciliter et d'accélérer le processus de développement des applications Web.Il
suit le modèle architectural modèle vue-contrôleur.[21]
3.3.2 La reconnaissance d'image

Pour éliminer la redondance des images, il fallait un algorithme de comparaison de leur
similarité que nous allons présenter en expliquant les nalités des fonctions intervenantes.
Tout d'abord, nous utiliserons notre fonction mimeType() . Cette fonction indiquera le
type MIME de l'image. S'il s'agit de JPEG ou PNG, il renverra le type MIME. Sinon, il
retournera "false".
Après avoir connu le type MIME, nous redimensionnerons notre image en blocs de 8 x
8 pixels avec la fonction resizeImage () qui prend le type MIME de l'image source et
appelle la fonction createImage à l'aide de la source d'image. puis enregistre l'image redi-
mensionnée.
La fonction createImage() vériera si le type MIME est JPEG ou PNG. Si la condition
est satisfaite, nous appellerons imagecreatefromjpeg () ou imagecreatefrompng (). Sinon,
il retournera simplement "false".
Ensuite, nous utiliserons la fonction colorMeanValue() pour extraire la valeur moyenne
de couleur de l'image. Il listera également les pixels des couleurs. Cette fonction renverra
le tableau de valeurs moyennes.
Maintenant, la fonction bits() prendra le tableau colorMeanValue comme paramètre. Cette
valeur extraira la valeur de bit en 0,1. Si une valeur de couleur est supérieure à la valeur
moyenne, elle sera 1 sinon elle sera 0.
Enn, la fonction compare() prendra les deux images pour les comparer en utilisant les
34
fonctions mentionnées. Elle appellera createImage () pour les deux images et vériera
la valeur de retour. Lorsqu'il retourne "True", les deux images seront redimensionnées et
ltrées.
Ensuite, nous allons tirer la colorMeanValue des deux images et passer les valeurs à la fonc-
tion bits pour obtenir la valeur binaire des images. Après avoir obtenu les valeurs binaires,
nous utiliserons la fonction for et calculerons les valeurs des deux images.
Si la diérence de valeur calculée est inférieure ou égale à 10, vous pouvez dire que l'image
est similaire, sinon il y a une diérence dans l'image.[28]
3.3.3 La base de données

SQL est un langage standard pour le stockage, la manipulation et la récupération de
données dans des bases de données.
MySQL Système de gestion de base de données (SGBD).
3.3.4 Les outils de développement
WAMP Server est une plateforme de développement Web de type WAMP,

permettant de faire fonctionner localement des scripts PHP. Elle comprend deux serveurs
(Apache et MySQL), un interpréteur de script (PHP), ainsi que PhpMyadmin pour l'ad-
ministration Web des bases MySQL.
Visual Studio Code est un éditeur de code open-source développé par Microsoft
supportant un très grand nombre de langages grâce à des extensions. Il supporte l'auto-
complétion, la coloration syntaxique, le débogage, et les commandes git.[22]
Un shell, c'est un interpréteur de commandes, et en même temps un langage

de programmation. Et Bash est l'un des nombreux shells existants dans le monde Unix.[23]
Composer est un outil de gestion des dépendances en PHP. Il permet de déclarer

les bibliothèques dont le projet dépend et de les gèrer (installation / mis à jour).[24]
35
3.3.5 Les outils de conception

UML : C'est un langage de modélisation normalisé à base de diagrammes, développé
pour aider les développeurs à spécier, visualiser et construire la conception de systèmes
logiciels.
et :Entreprise architect et StarUML sont deux logiciels qui

permettent aux programmeurs de mettre en place des diagrammes UML.
3.3.6 Outil de planication

Gantt Project est un logiciel qui permet la planication d'un projet à travers la
réalisation d'un diagramme de Gantt.
3.3.7 L'architecture logicielle
Figure 3.1 Schéma de l'architecture MVC
Le MVC ( modèle/vue/contrôleur ) est une architecture de développement visant à

séparer le code source en modules. Ainsi, comme le démontre la gure 3.1, il y a 3 couches
distinctes dans l'architecture MVC :
le modèle est chargé de gérer les données.
la vue est chargée de la mise en forme pour l'utilisateur.
le contrôleur est chargé de gérer l'ensemble.
36
3.4 Spécications générales des exigences

La spécication des exigences doit être établie tout en se basant sur les besoins identiés.
Cette étape consiste premièrement à dégager le diagramme de cas d'utilisation global puis
à aecter les rôles aux membres du projet et tracer le backlog produit pour classier et
planier les cas d'utilisation en sprints.
3.4.1 Détermination du cas d'utilisation global

Selon la gure (3.2), l'utilisateur(seulement acheteur ou contributeur) de FLEXIPIK
peut procéder à l'inscription sur le site web.
Et à condition que l'utilisateur(acheteur, contributeur et administrateur) soit
connecté à son compte., il peut aussi gérer son compte, suivre des contributeurs, consul-
ter le blog, télécharger une image, consulter ses téléchargements, gérer ses collections ajou-
ter une image aux favoris, ajouter une image à une collection, consulter la liste de ses
favoris et commenter une image.
Et sans avoir besoin d'être authentié, il peut aussi consulter les prols des contributeurs,
rechercher des images et aner le résultat par le ltre (par type, catégorie, date,..), consul-
ter une image et visualiser ses détails, consulter les collections publiques et partager une
image sur les réseaux sociaux (Facebook, Pinterest,..).
Concernant l'acheteur, en plus de toutes ces fonctionnalités, il est permis d'acheter un
abonnement , un paquet d'images et une image, signaler un contributeur et une image.
Quant au contributeur, en plus des fonctionnalités citées précédemment, il peut charger
une image, gérer ses images, consulter ses ventes, consulter son classement et consulter son
tableau de bord.
Et concernant l'administrateur, il peut aussi gérer les images, consulter son tableau de
bord, la liste de contributeurs signalés, les images signalées, gérer les catégories et les uti-
lisateurs et gérer les paramètres généraux.
Pour le véricateur, il peut consulter la liste des images signalées et gérer les images.
Finalement, l'auteur est chargé de la gestion des articles du blog ( la rédaction et la consul-
tation des articles ,leurs modication, leurs suppression).
37
Chapitre 3
Figure 3.2 Le diagramme de cas d'utilisation global
38
Backlog produit
3.5 Planication et structuration

Cette section consiste à déterminer, à ordonnancer les tâches du projet et à estimer
leurs charges.
Les objectifs du planning sont les suivants :
Déterminer si les objectifs sont réalisés ou dépassés.
Suivre et communiquer l'avancement du projet.
Aecter les ressources aux tâches.
3.5.1 Dénition des rôles dans SCRUM

Comme nous l'avons déni précédemment au niveau du premier chapitre du rapport
"Contexte général du projet", la méthode Scrum est basée sur trois rôles principaux que
nous allons aecter aux membres du projet dans le tableau suivant (tab. (3.1)) :
Table 3.1 Les rôles des membres du SCRUM

Le propriétaire du produit (Product Owner) Amin ké
Le directeur du produit (SCRUM Master) Amin ké
Mohamed Koussay BOUSSETTA
Le membre de l'équipe (SCRUM Team)
Khouloud KCHAOU
3.5.2 Backlog du produit

Le backlog du produit est l'élément le plus important de SCRUM puisque qu'il repré-
sente l'ensemble des caractéristiques fonctionnelles ou techniques qui constituent le produit
souhaité. Les caractéristiques fonctionnelles sont appelées des histoires utilisateur (user
story) qui décrivent les interactions de l'utilisateur avec l'application et les caractéristiques
techniques sont appelées des histoires techniques (technical story).
Dans un backlog du produit, les stories sont rangées selon l'ordre envisagé pour leur
réalisation.[12]
39
Table 3.2 Le backlog produit

Histoires Estimations Priorités Descriptions Itérations
utilisateurs
(User Story)
S'inscrire 1 jour Haute En tant qu'acheteur ou contributeur), il peut créer 1
un compte
S'authentier 1 jour Haute En tant qu'utilisateur(acheteur/ contributeur/ ad- 1
ministrateur), il peut se connecter au site web.
Gérer son prol 2 jours Haute En tant qu'utilisateur, il peut gérer son prol en 2
supprimant, modiant, et ajoutant des données
personnelles.
Charger une 2 jours Haute En tant que contributeur, il peut charger des - 3
image chiers (Photos, vecteurs, PSD ,icônes).
Rechercher les 2 jours Haute En tant qu'utilisateur, il peut procéder à une re- 1
images cherche par mots clés.
Filtrer les 2 jours Moyenne En tant qu'utilisateur, lors de la recherche, il peut 2
images l'aner encore en ltrant le résultat par type (Pho-
tos, vecteurs, PSD ,icônes), par orientation, par ca-
tégorie, par couleur, par date, par popularité, par
Licence.
Consulter les 2 jours Moyenne En tant qu'utilisateur, il peut visualiser le prol de 1
prols contribu- chaque contributeur dans FLEXIPIK.
teurs
Suivre les 2 jours Faible En tant qu'utilisateur, il peut suivre des contri- 1
contributeurs buteurs pour voir leurs nouveaux travaux en feed
(l'accueil de l'utilisateur connecté).
Consulter la 2 jours Moyenne En tant qu'utilisateur, il peut visualiser la che in- 3
che d'une formative de chaque élément existant dans FLEXI-
image PIK.
Télécharger une 2 jours Haute En tant qu'utilisateur, il peut télécharger une 1
image image (Photos, vecteurs, PSD, icônes).
Consulter ses té- 2 jours Faible En tant qu'utilisateur, il peut visualiser ses télé- 1
léchargements chargements.
Ajouter une 3 jours Haute En tant qu'utilisateur, il peut ajouter une image à 2
image à une une de ses collections.
collection
Gérer ses collec- 1 jours Moyenne En tant qu'utilisateur, il peut gérer ses collections 1
tions en les créant, consultant, modiant, ou supprimant.
40
Consulter les 3 jours Faible En tant qu'utilisateur, il peut voir les collections 1
collections des autres utilisateurs mises en mode public .
publiques
Ajouter une 2 jours Moyenne En tant qu'utilisateur, il peut ajouter une image à 1
image aux sa liste de favoris.
favoris
Consulter ses fa- 2 jours Faible En tant qu'utilisateur, il peut consulter sa liste de 1
voris favoris.
Gérer les com- 4 jours Moyenne En tant qu'utilisateur, il peut ajouter un commen- 2
mentaires taire à une image ou le supprimer.
Partager une 5 jours Moyenne En tant qu'utilisateur, il peut partager une image 1
image sur des réseaux sociaux(Facebook, Pinterest,..).
Gérer les images 6 jours Haute En tant qu'administrateur ou véricateur, il peut 3
gérer tous les images de FLEXIPIK.
Gérer ses images 4 jours Moyenne En tant que contributeur, il peut gérer tous ses 2
images.
Acheter un 4 jours Haute En tant qu'acheteur, il peut acheter un abonnement 1
abonnement mensuel ou annuel .
Acheter un pa- 2 jours Haute En tant qu'acheteur, il peut acheter un paquet 1
quet d'images.
Acheter une 3 jours Haute En tant qu'acheteur, il peut acheter une image 1
image toute seule.
Consulter ses 5 jours Moyenne En tant que contributeur ou administrateur, il peut 2
ventes consulter la liste de toutes ses images vendues.
Consulter son 2 jours Moyenne En tant que contributeur, il peut consulter son clas- 2
classement sement par rapport aux autres contributeurs.
Consulter son 5 jours Faible En tant que contributeur, il peut accéder à son ta- 3
tableau de bord bleau de bord
contributeur
Consulter ses 3 jours Haute En tant qu'utilisateur, il peut accéder aux noti- 2
notications cations qu'il reçoit lors des actions faites par les
autres utilisateurs (aimer/commenter ses images).
Gérer les para- 2 jours Haute En tant qu'administrateur, il peut gérer les para- 2
mètres généraux mètres globaux et les limites qui concernent les per-
missions.
Gérer les utilisa- 5 jours Moyenne En tant qu'administrateur, il peut gérer tous les 2
teurs utilisateurs de FLEXIPIK en en ajoutant de nou-
veaux, en les consultant, les modiant, les suppri-
mant ou les excluant.
41
Gérer les caté- 2 jours Haute En tant qu'administrateur, il peut gérer les catégo- 1
gories ries d'images de FLEXIPIK.
Signaler une 1 jours Moyenne En tant qu'utilisateur, il peut signaler une image 1
image jugée inappropriée tout en précisant la raison
exacte.
Signaler un 1 jours Moyenne En tant qu'utilisateur, il peut signaler un contribu- 1
contributeur teur tout en indiquant la raison.
Consulter les 1 jours Faible En tant qu'administrateur, il peut accéder à la liste 1
contributeurs des contributeurs signalés pour prendre une déci-
signalés sion d'exclusion ou de suppression.
Consulter les 1 jours Faible En tant qu'administrateur, il peut accéder à la liste 1
images signalées des contributeurs signalés pour prendre une déci-
sion de suppression.
Gérer les ar- 5 jours Haute En tant qu'administrateur ou auteur, il peut gérer 3
ticles les articles.
Consulter le 3 jours Moyenne En tant qu'utilisateur, il peut visualiser les articles 2
blog du blog de FLEXIPIK.
Consulter son 5 jours Faible En tant qu'administrateur, il peut accéder à son 3
tableau de bord panneau administratif.
administratif
Le backlog du produit dans le tableau (3.2), montre la liste des fonctionnalités qui devront être im-
plémentées dans notre application web.
Celui-ci est présenté dans l'ordre de priorités dénies par l'équipe SCRUM et avec les estimations xées
en se basant sur la méthode des trois points .
Le choix des priorités dans cette section est basé sur la dépendance entre les fonctionnalités de l'application
web. Par exemple, nous ne pouvons pas eectuer la gestion de prol tant que nous n'avons pas encore
terminé la gestion de l'authentication (Voir annexe A)
3.5.3 Planning du projet

Avant d'entamer la réalisation du projet, il fallait faire une auto-formation sur les technologies choisies
qui a duré 22 jours (du 9 février 2020 au 30 février 2020).
42
Figure 3.3 Planning des sprints
La gure (3.3) présente la répartition des tâches du projet sur la durée qui lui a été aectée.
Notre projet est subdivisé sur quatre livrables (Sprints).
Ces livrables se sont déroulés sur quatre périodes, du 01/03/2020 au 29/03/2020, du 30/03/2020 au
22/04/2020, du 23/04/2020 au 26/05/2020 et du 27/05/2020 au 21/06/2020.
Du 01/03/2020 au 29/03/2020 : Le premier livrable contenant les neufs premières fonctionnalités
43
de base de la banque d'images qui portent sur la gestion des accès, la gestion des images, du suivie et de
la recherche.
Du 30/03/2020 au 22/04/2020 : Le deuxième livrable présente les fonctionnalités de person-
nalisation de l'expérience utilisateur qui portent sur la gestion de ses téléchargements, ses collections, ses
favoris, ses commentaires et ses partages.
Du 23/04/2020 au 26/05/2020 : Le troisième livrable inclut la gestion administrative des images
, le système d'achat, le système de notications et la gestion du tableau de bord du contributeur.
Du 27/05/2020 au 21/06/2020 : Le dernier livrable comprend la gestion du panneau administratif
(Back Oce) et le système de signalement.
3.6 Le diagramme de classes global du projet

Alors que le diagramme de cas d'utilisation montre le système du point de vue des acteurs, le diagramme
de classes en montre la structure interne. Il permet de fournir une représentation abstraite des objets du
système qui vont interagir pour réaliser les cas d'utilisation.
- Un utilisateur peut être un acheteur, un contributeur, un véricateur, un auteur ou un administrateur.
- Un utilisateur appartient à un pays, et un pays peut être habité par plusieurs utilisateurs.
- Un utilisateur peut recevoir plusieurs notications, et une notication ne peut être reçu que par un seul
utilisateur.
- Un utilisateur peut mentionner plusieurs j'aime (Like), et chaque j'aime appartient à une et une seule
image et ne peut être mentionnée que par un seul utilisateur.
- Un utilisateur peut eectuer plusieurs téléchargements, et chaque téléchargement concerne une seule
image et ne peut être eectué que par un seul utilisateur.
- Un utilisateur peut ajouter plusieurs commentaires, et chaque commentaire appartient à une seule image
et ne peut être ajouté que par un seul utilisateur.
- Un utilisateur peut gérer plusieurs collections en les créant, modiant ou supprimant. Et chaque collection
ne peut être gérée que par un seul utilisateur.
- Un utilisateur peut consulter plusieurs images et pour chaque image qu'il consulte une visite appartenant
à l'image sera enregistrée pour compter le nombre de vues sur chaque image. Et une image peut être
consultée par plusieurs utilisateurs.
- Un utilisateur peut suivre plusieurs contributeurs
- Un acheteur peut signaler plusieurs images en créant une instance d'une image signalée pour chaque
image qu'il signale. Et une image peut être signalée par plusieurs acheteurs.
- Un acheteur peut acheter plusieurs abonnements avec une achat qui s'enregistre pour chaque abonnement
qu'il achète. Et un abonnement peut être acheté par plusieurs acheteurs.
- Un contributeur peut faire tous ce qu'un acheteur peut faire
- Un contributeur gère plusieurs images en les créant, modiant, ou supprimant. Et une image ne peut
être gérée que par un seul contributeur.
- Un contributeur peut être suivi par plusieurs utilisateurs.
44
- Un véricateur gère plusieurs images en les créant, modiant, supprimant, approuvant, ou refusant. Et
une image peut être gérée par plusieurs véricateurs.
- Un auteur peut gère plusieurs articles en les créant, modiant, ou supprimant. Et un article ne peut être
géré que par un seul auteur.
- Un administrateur peut faire tous ce qu'un véricateur ou auteur peut faire.
- Un administrateur gère plusieurs catégories en les créant, modiant, ou supprimant. Et une catégorie ne
peut être gérer que par un seul administrateur.
- Un administrateur gère plusieurs pages statiques en les créant, modiant, ou supprimant. Et une page
ne peu être gérée que par un seul administrateur.
- Une image appartient à une seule catégorie et une catégorie peut contenir plusieurs images.
- Une image peut avoir plusieurs mentions j'aime.
- Une image peut avoir plusieurs téléchargements.
- Une image peut avoir plusieurs Commentaires.
- Une image peut appartenir à plusieurs collections et une collection peut contenir plusieurs images.
45
Chapitre 3
46
Backlog produit
Figure 3.4 Le diagramme de classes global

3.7 Conclusion
Ce chapitre a été consacré à l'identication des acteurs ainsi que les exigences fonctionnelles et non
fonctionnelles de notre projet. Suivi de l'étude technique, et la planication des diérentes tâches
Dans le chapitre suivant, nous allons élaborer l'étude conceptuelle du 1er sprint de notre projet.
47
Chapitre 4
Sprint 1
4.1 Introduction
D ans le chapitre précèdent, nous nous sommes focalisés sur l'étude préliminaire du projet, son étude
technique, et la planication des diérentes tâches.
Dans ce chapitre, nous nous intéresserons à l'étude conceptuelle et la réalisation du premier sprint.
Le tableau (4.1) résume les fonctionnalités du premier sprint à réaliser qui seront décrites par un tableau
descriptif textuelle et présentées par un diagramme de séquence détaillé.
Cette démarche sera suivie pour l'étude des cas d'utilisation jugés importants à présenter. Enn, nous
présenterons la réalisation du sprint.
Table 4.1 Table du sprint (1)

Histoires Estimations Priorités Descriptions Sous-tâches Itérations
utilisateurs
(User
Story)
S'inscrire 1 jour Haute En tant qu'acheteur ou contribu- -Validation de 1
teur), il peut créer un compte l'adresse e-mail
de l'utilisateur.
-S'inscrire avec
Facebook
S'authentier 1 jour Haute En tant qu'utilisateur(acheteur/ -Récupération 1
contributeur/ administrateur), il du mot de passe.
peut se connecter au site web. -S'authentier
avec Facebook.
48
Chapitre 4 Sprint 1
Gérer son 2 jours Haute En tant qu'utilisateur, il peut gé- - Consulter 2

prol rer son prol. son prol.
-Éditer les
informations
personnelles
de son prol .
- Supprimer son
compte
Charger une 2 jours Haute En tant que contributeur, il peut - Reconnaissance 3
images charger des chiers (Photos, vec- d'image pour éli-
teurs, PSD ,icônes). mination de la re-
dondance.
Rechercher 2 jours Haute En tant qu'utilisateur, il peut 1
les images procéder à une recherche par
mots clés.
Filtrer les 2 jours Moyenne En tant qu'utilisateur, lors de la 2
images recherche, il peut l'aner encore
en ltrant le résultat par type
(Photos, vecteurs, PSD ,icônes),
par orientation, par catégorie,
par couleur, par date, par popu-
larité, par Licence.
Consulter 2 jours Moyenne En tant qu'utilisateur, il peut vi- 1
les prols sualiser le prol de chaque contri-
contribu- buteur dans FLEXIPIK.
teurs
Suivre les 2 jours Faible En tant qu'utilisateur, il peut 1
contribu- suivre des contributeurs pour
teurs voir leurs nouveaux travaux en
feed (l'accueil de l'utilisateur
connecté).
Consulter la 2 jours Moyenne En tant qu'utilisateur, il peut vi- -Extraction de 3
che d'une sualiser la che informative de la palette de
image chaque élément existant dans couleurs et des
FLEXIPIK. méta-données de
l'image.
49
Chapitre 4 Sprint 1
4.2 Le diagramme de cas d'utilisation du sprint n°1
Figure 4.1 Le diagramme de cas d'utilisation du 1er sprint
Selon la gure (4.1), l'acheteur ou le contributeur de FLEXIPIK peuvent procéder à l'inscription

sur l'application web. Et à condition que l'utilisateur(acheteur, contributeur, administrateur,
véricateur, auteur) soit connecté à son compte., il peut aussi gérer son compte utilisateur , que ce
soit pour consulter son prol, éditer ses informations personnelles ou pour supprimer son compte.
Il peut aussi consulter les prols des contributeurs et les suivre pour qu'il puisse voir ses nouvelles créations
en délant son accueil. Encore plus, il peut procéder à une recherche par mots clés et l'aner en ltrant le
résultat par type (Photos, vecteurs, PSD ,icônes), par orientation, par catégorie, par couleur, ou par
licence (gratuit, premium) et les trier par date, par popularité, par nombre de vues, de téléchargements ou
de commentaires. De plus, il peut consulter la che d'une image (titre de l'image, date de publication,
mots clés, les commentaires, le contributeur de l'image, le type du licence, palette de couleurs,
nombre de vues et j'aime, détails de l'images (type,résolution,catégorie,taille chier)).
Finalement, en tant que contributeur, il peut aussi charger des images (Photos, vecteurs, PSD ,icônes).
50
Chapitre 4 Sprint 1
4.3 Etude du cas d'utilisation "s'inscrire"

Dans le but de rendre le diagramme des cas d'utilisation (4.1) plus lisible et an de mieux décrire
le comportement du système, nous avons décidé d'utiliser la technique de la description textuelle de cas
d'utilisation pour détailler l'enchaînement des tâches, suivie d'un diagramme de séquence.

"s'inscrire"
Table 4.2 Description textuelle du cas d'utilisation " s'inscrire "
Titre S'inscrire
Objectif Créer un compte
Acteur(s) acheteur/ contributeur
Précondition(s) Connexion internet disponible
Postcondition(s) Avoir un compte
1. Accéder au site web Flexipik
2. Cliquer sur le bouton "s'inscrire"
3- Accéder à la vue d'inscription
Scénario nominal 4-Saisir les informations personnelles tels que le nom, le prénom,
l'adresse email, le mot de passe, etc...
5- Cliquer sur le bouton s'inscrire
6- Renvoyer l'utilisateur à la page d'accueil.
1- Le système ache un message d'erreur de type " l'adresse email
Scénario alternatif est déjà utilisée" ou " champs invalide"
2-Reprise de l'étape 3 du scénario nominal.
Exception(s) Connexion interrompue
Documents -
Donc d'après le tableau ( 4.2), nous constatons que l'inscription d'un utilisateur(acheteur ou contri-
buteur) nécessite la disponibilité d'une connexion.
Puis l'utilisateur procède à la saisie de ses informations personnelles et les valider par un simple clic sur le
bouton s'inscrire.
Dans cette étape notre système vérie les données saisies. Dans le cas où la forme d'une information per-
sonnelle est erronée (Exemple : adresse mail erronée, mot de passe trop court, ressaisie erronée de mot
de passe) ou bien au cas où elle est déjà utilisée par un autre utilisateur, le système ache un message
d'erreur en demandant à l'utilisateur de ressaisir une autre fois ses informations.
Sinon il sera redirigé vers la page d'accueil.
51
Chapitre 4 Sprint 1
4.3.2 Diagramme de séquence du cas d'utilisation "s'inscrire"

L'objectif principal de cette partie est de visualiser une séquence de messages entre les objets par une
lecture de haut en bas grâce au diagramme de séquence où :
L'axe vertical représente le temps
L'axe horizontal représente les objets qui collaborent
Une ligne verticale en pointillés représente la ligne de vie de chaque objet.
Figure 4.2 Le diagramme de séquence du cas d'utilisation "s'inscrire"
La gure (g. 4.2) illustre le diagramme de séquence du cas d'utilisation "S'inscrire".
52
Chapitre 4 Sprint 1
En fait, après que l'utilisateur (acheteur/contributeur) ait saisit ses informations, la vérication des champs
s'eectue au niveau de la Vue inscription .
En cas d'erreur de saisie, un message d'erreur sera envoyé à l'utilisateur pour ressaisir ses informations,
sinon les données seront envoyées au Contrôleur RegisterController qui récupère la liste des uti-
lisateurs de la base de données à travers le modèle User et les compare avec les données saisies par
l'utilisateur.
Si les données sont existantes, un message d'erreur sera aché à l'utilisateur , sinon elles seront insérées
dans la base de données ( la table "Users"), un nouveau compte sera créé et l'utilisateur sera renvoyé
directement à la vue Page d'accueil.
4.4 Etude du cas d'utilisation "S'authentier"

"S'authentier"
Table 4.3 Description textuelle du cas d'utilisation " s'authentier "
Titre S'authentier
Objectif Se connecter au site web Flexipik
Acteur(s) Acheteur/Contributeur/Administrateur/Auteur/Véricateur
Précondition(s) avoir un login et un mot de passe
Postcondition(s) Etre authentié
1. Accéder au site web Flexipik
2. Cliquer sur le bouton "s'authentier"
3- Accéder à la vue d'authentication
Scénario nominal 4- Saisir login et mot de passe
5- Cliquer sur le bouton se connecter
1- Le système ache un message d'erreur de type "votre mot de passe
Scénario alternatif est incorrecte" ou "votre login est incorrecte"
2-Reprise de l'étape 3 du scénario nominal
Exception(s) Connexion interrompue/ Oublie du login et/ou du mot de passe
Document(s) -
53
Chapitre 4 Sprint 1
D'après le tableau ( 4.3), nous constatons que l'authentication d'un utilisateur nécessite des données
nécessaires pour l'authentication (login ou adresse mail et un mot de passe).
Donc l'utilisateur n'a qu'à accéder à FLEXPIK puis cliquer sur le bouton "S'authentier" an d'accé-
der à la vue d'authentication. Et après avoir entré son login et mot de passe, l'utilisateur doit valider
la procédure par un simple clic sur le le bouton " se connecter".
Ensuite s'il y a une erreur , l'utilisateur sera appelé à vérier et à ressaisir ses données. Sinon, il sera
renvoyé à la page d'accueil.
4.4.2 Diagramme de séquence du cas d'utilisation "s'authentier"
Figure 4.3 Le diagramme de séquence du cas d'utilisation "s'authentier"
54
Chapitre 4 Sprint 1
Comme l'illustre la gure ( 4.3) du diagramme de séquence du cas d'utilisation "s'authentier".

Après que l'utilisateur ait saisit son login et mot de passe, la Vue authentication eectue la vérication
des champs.
En cas d'erreur de saisie, un message d'erreur sera envoyé à l'utilisateur pour ressaisir ses informations.
Sinon les données seront envoyées au Contrôleur LoginController qui récupère la liste des utili-
sateurs de la base de données à travers le modèle User et les compare avec les données saisies par
l'utilisateur.
Si les données sont inexistantes, un message d'erreur sera aché à l'utilisateur , sinon l'utilisateur sera
renvoyé directement à la vue Page d'accueil.
4.5 Etude du cas d'utilisation "Gérer son compte (mo-

dier son compte)"
Dans cette partie, nous allons suivre la même démarche d'analyse que nous avons suivi dans la clari-
cation des cas d'utilisation précédents du premier sprint de notre projet.
Alors nous avons pris comme exemple de gestion de compte : la modication des informations per-
sonnelles.

"Gérer son compte (modier son compte)"
D'après le tableau ( 4.4), nous constatons que la gestion du compte nécessite la disponibilité d'une
connexion internet et son authentication àFLEXPIK
Donc l'utilisateur n'a qu'à accéder à FLEXPIK pour s'authentier pour ,par exemple, modier son
compte. Puis, poser le curseur sur l'icône de son prol pour qu'un liste déroulante s'ache, lui permettant
ainsi de choisir la rubrique "paramètres du compte" qui lui renvoi à la Vue "Compte" où il peut
eectuer les changements nécessaires et les enregistrer par un simple clic sur le bouton sauvegarder les
modications.
Enn, la page sera rafraichie automatiquement pour ré-acher le compte de l'utilisateur connecté mis à
jour.
55
Chapitre 4 Sprint 1
Table 4.4 Description textuelle du cas d'utilisation " Gérer son compte"
(modier son compte)
Titre Gérer son compte(exemple : modier son compte)
Objectif mettre à jour les informations son compte
Acteur(s) Acheteur/Contributeur/Administrateur/Auteur/Véricateur
Précondition(s) être authentié à FLEXIPIK
Postcondition(s) compte consulté, supprimé ou mis à jour
1. S'authentier à la banque d'images FLEXIPIK
2. Cliquer sur l'icône de" son prol" dans la barre de menus
3- Accéder à la rubrique "paramètres du compte"
Précondition(s) 4- Modier les données à mettre à jour
5- Cliquer sur le bouton sauvegarder les modications
6- Acher le compte mis à jour à l'utilisateur connecté.
1- Le système ache un message d'erreur par exemple de type
Scénario alternatif "format non valide du champs"
Exception(s) Connexion interrompue/ authentication non réussite
Document(s) -
4.5.2 Diagramme de séquence du cas d'utilisation "Gérer son compte

(modier son compte)"
Comme l'illustre la gure ( 4.4) du diagramme de séquence du cas d'utilisation "Gérer son
compte (exemple : modier son compte)".
Après que l'utilisateur s'est authentié à son compte, il accède à la Vue "Compte" en cliquant sur la
rubrique paramètres du compte. Puis, il procède au saisie des nouveaux données .
Ensuite, une vérication des champs se fait au niveau de la Vue "Compte" pour acher un message
d'erreur de saisie s'il existe. Sinon, une requête de mise à jour des données sera envoyée au contrôleur qui
fait la mise à jour de la table"Users" à travers le modèle "User".
Et enn , il rafraichi la page et ache un message de succès .
56
Chapitre 4 Sprint 1
Figure 4.4 Le diagramme de séquence du cas d'utilisation "Gérer son compte (exemple :
modier son compte)"
4.6 Etude du cas d'utilisation "Charger une image"

"Charger une image"
Comme l'indique le tableau ( 4.5), pour charger des images , l'utilisateur (contributeur/administrateur/
véricateur) doit être authentié à FLEXIPIK.
Puis l'utilisateur connecté accède à la page du chargement et choisi le format de l'image à charger puis
continue à remplir le formulaire de chargement et valide par un simple clic sur le bouton upload et si
une erreur existe (champs vides, format invalide), l'utilisateur sera renvoyé à la vue UPLOAD à nouveau
pour ressaisir les do le formulaire. Sinon, l'utilisateur sera renvoyé à la che de l'image.
57
Chapitre 4 Sprint 1
Table 4.5 Description textuelle du cas d'utilisation "Charger une images"
Titre Charger une image

Objectif Ajouter une nouvelle image à Flexipik
Acteur(s) Contributeur / administrateur/ Véricateur
Postcondition(s) Nouvelles images chargées dans FLEXIPIK
1- Accéder à la page de chargement.
2- Choisir le format du chier à charger
Scénario nominal 3- Remplir le formulaire du chargement
4- Cliquer sur le bouton " upload "
5- Renvoyer l'utilisateur à la che de l'image.
1- Le système ache un message d'erreur de type "champ obligatoire",
Scénario alternatif "Image déjà existante" ou "erreur de dimension"
Documents -
4.6.2 Diagramme de séquence du cas d'utilisation "Charger une

image"
Comme l'illustre la gure ( 4.5) du diagramme de séquence du cas d'utilisation "Charger une
image".
Après que l'utilisateur ait accédé à la Vue "Upload", il remplit le formulaire du chargement de -
chier dont les champs seront vériés et s'il y a une erreur , un message sera envoyé à l'utilisateur.
Sinon, les données seront envoyées au contrôleur ImagesController qui demande au modèle Image de
récupérer les images pour eectuer la vérication de la redondance. Et puis, si l'image déjà existe, un
message d'erreur sera envoyé à l'utilisateur.
Sinon, les données seront envoyées au modèle Image et au modèle Stock et par la suite , l'insertion des
données se fait dans (les tables Images et Stock ) de la base de données de FLEXIPIK, où l'image sera
enregistrée en trois dimensions (petite/ moyenne/grande) en plus d'un chier psd ou ai si l'utilisateur l'a
chargé.
Et nalement, la Vue "Upload" sera détruite et la Vue "Image.Show" sera créée pour acher la che
de l'image chargée avec toutes les informations à laquelle elles sont liées.
58
Chapitre 4 Sprint 1
Figure 4.5 Le diagramme de séquence du cas d'utilisation "Charger une image"
59
Chapitre 4 Sprint 1
4.7 Etude du cas d'utilisation "Consulter une image"

Dans l'étude du cas d'utilisation "Consulter une image", nous allons suivre le même enchainement
d'étapes suivi précédemment.

"Consulter une image"
Table 4.6 Description textuelle du cas d'utilisation "Consulter une image"
Titre Consulter une image

Objectif Visualiser les détails liés à une image voulue
Acteur(s) Acheteur/Contributeur/Administrateur/Auteur
Postcondition(s) Achage des informations liées à l'image voulue
1- Accéder à la vue Images
Scénario nominal 2- Sélectionner une image
3- Renvoyer l'utilisateur à la vue Image.Show
où les détails liés à l'image seront achés.
Documents -
Donc d'après le tableau ( 4.6), pour consulter une image , l'utilisateur (contributeur/administrateur/
acheteur/ auteur) n'a qu'à accéder à la vue Images pour sélectionner l'image qu'il veut consulter, puis
il sera renvoyé à la vue Image.Show où les détails liés à l'image seront achés.
4.7.2 Diagramme de séquence du cas d'utilisation "Consulter une

image"
Comme l'illustre la gure ( 4.6) du diagramme de séquence du cas d'utilisation "Consulter une
image" :
L'utilisateur sélectionne l'image qu'il veut consulter , ce qui entraine l'envoi d'une requête de récupération
des données liées à l'image de la vue Images au contrôleur ImagesController qui envoie à son tour
une demande de récupération des données au modèle Image . Et ce dernier transmet cette demande à
la base de données.
Puis, l'envoi des informations se passe de la base de données (la table Image) vers le modèle qui les
transmet au contrôleur qui procède à la création de la vue Image.Show où ces informations s'achent
à l'utilisateur.
60
Chapitre 4 Sprint 1
Figure 4.6 Le diagramme de séquence du cas d'utilisation "Consulter une image"
4.8 Conclusion
Dans ce chapitre, nous nous sommes intéressés à la conception et au développent des cas d'utilisation
du 1er sprint.
Dans le chapitre suivant, nous aborderons l'étude conceptuelle et la réalisation du deuxième sprint.
61
Chapitre 5
Sprint 2
5.1 Introduction
D ans le chapitre précèdent, nous nous sommes focalisés sur à l'étude conceptuelle du premier sprint.
Dans ce chapitre, nous nous intéresserons à l'étude conceptuelle du deuxième sprint.

utilisateurs
(User Story)
Télécharger une 2 jours Haute En tant qu'utilisateur, il peut 1
image télécharger une image (Pho-
tos, vecteurs, PSD, icônes).
Consulter ses té- 2 jours Faible En tant qu'utilisateur, il 1
léchargements peut visualiser ses télécharge-
ments.
Ajouter une 3 jours Haute En tant qu'utilisateur, il peut 2
image à une ajouter une image à une de
collection ses collections.
Gérer ses collec- 1 jours Moyenne En tant qu'utilisateur, il peut - Créer une 1
tions gérer ses collections en les collection.
créant, consultant, modiant, - Consulter
ou supprimant. une collection .
- Modier une
collection .
- Supprimer une
collection
62
Chapitre 5 Sprint 2
Consulter les 3 jours Faible En tant qu'utilisateur, il peut 1

collections voir les collections des autres
publiques utilisateurs mises en mode
public .
Ajouter une 2 jours Moyenne En tant qu'utilisateur, il peut 1
image aux ajouter une image à sa liste
favoris de favoris.
Consulter ses fa- 2 jours Faible En tant qu'utilisateur, il peut 1
voris consulter sa liste de favoris.
Gérer les com- 4 jours Moyenne En tant qu'utilisateur, il peut 2
mentaires ajouter un commentaire à une
image ou le supprimer.
Partager une 5 jours Moyenne En tant qu'utilisateur, il peut 1
image partager une image sur des ré-
seaux sociaux(Facebook, Pin-
terest,..).
Le tableau (5.1) résume les fonctionnalités du deuxième sprint à réaliser ,qui seront décrites par un
tableau descriptif textuelle et présentées par un diagramme de séquence.
Cette démarche sera suivie pour l'étude des cas d'utilisation jugés importants à présenter. Enn, nous
présenterons la réalisation du sprint.

Selon la gure (5.1), à condition qu'ils soient connectés, tous les utilisateurs peuvent télécharger une
image (Photos, vecteurs, PSD ,icônes) directement si elle est en mode gratuit ou après achat si elle est en
mode premium (payante). Ils sont capables aussi de consulter la liste de leurs téléchargements par exemple
pour re-télécharger une image déjà achetée, ils peuvent encore gérer leurs collections en les consultant, en
en créant d'autres, en les modiant et en les supprimant.
De plus, ils peuvent ajouter une image à une collection ou à leurs listes de favoris qu'ils sont capable de les
consulter à tout moment. Ils sont autorisés aussi à commenter une image , à supprimer leurs commentaires
ou à mentionner un j'aime sur les commentaires qui leur plaît.
Et sans avoir besoin d'être authentiés, il peuvent consulter les collections publiques ou encore partager
une image sur les réseaux sociaux (Facebook, Pinterest).
63
Chapitre 5 Sprint 2
Figure 5.1 Le diagramme de cas d'utilisation du 2ème sprint
5.3 Etude du cas d'utilisation "Télécharger une image"

Dans le but de rendre le diagramme des cas d'utilisation (5.1) plus lisible et an de mieux décrire
le comportement du système, nous avons décidé d'utiliser la technique de la description textuelle de cas
d'utilisation pour détailler l'enchaînement des tâches, suivie d'une partie d'analyse et conception.

"Télécharger une image"
Donc d'après le tableau ( 5.2), nous constatons que le téléchargement d'une image nécessite une
connexion internet et l'authentication de l'utilisateur. Puis l'utilisateur n'a qu'à choisir une image ,
cliquer sur le bouton "télécharger" et l'image sera enregistrée dans l'emplacement de stockage choisi.
64
Chapitre 5 Sprint 2
Le téléchargement peut être bloqué,par exemple, par l'insusance de l'espace de stockage ou encore par
l'atteinte de la limite de téléchargement et c'est à l'utilisateur alors de choisir s'il veut annuler l'opération
ou l'acheter seule.
Table 5.2 Description textuelle du cas d'utilisation "Télécharger une image"
Titre Télécharger une image

Objectif Télécharger une image
Acteur(s) acheteur/contributeur/administrateur/véricateur/auteur
Précondition(s) être authentié
Postcondition(s) Avoir l'image voulue téléchargée dans son espace de stockage
1- Accéder à l'image voulue
2- Choisir la taille du chier(S/M/L)
Scénario nominal 3- Cliquer sur le bouton "télécharger"
4- Avoir l'image voulue enregistrée sur espace de stockage.
1- L'image est payante et le système ache les tarifs d'achat.
Scénario alternatif 2- L'image est payante et le maximum de téléchargement est atteint
-> le système ache un message d'erreur.
Exception(s) Connexion interrompue / Espace disque insusant
Documents -
5.3.2 Diagramme de séquence du cas d'utilisation "Télécharger

une image"
Comme l'illustre la gure ( 5.2) du diagramme de séquence du cas d'utilisation "Télécharger une
image" :
L'utilisateur consulte l'image qu'il veut télécharger en accédant à la vue Image.Show, choisi le type du
chier et la taille (Small(petit)/Medium(moyenne)/Large(grande) pour image jpeg,png/chier AI/PSD)
et puis il n'a qu'à valider son choix par un simple clic sur le bouton télécharger.
Ensuite, une requête de téléchargement sera envoyé de la vue Image.Show vers le contrôleur Ima-
gesController qui passe à son tour au modèle Image une demande pour récupérer le chier choisi
de la base de données ( la table "Images") à travers le modèle "Images".
Par la suite l'envoi du chier demandé se fait entre la base de données et le contrôleur, passant par le
modèle.
Puis une vérication du type de l'image se fait au niveau du contrôleur, donc si l'image et gratuite, le
téléchargement sera eectué et l'utilisateur recevra son chier enregistré sur son espace de stockage choisi.
Sinon si l'image est payante et le type du compte utilisateur est normal alors il aura le choix à
annuler l'opération ou à continuer le téléchargement en passant par l'opération du paiement(acheter
65
Chapitre 5 Sprint 2
l'image voulue seul, acheter un paquet d'image ou un abonnement).

Sinon si l'image est payante, et le type du compte utilisateur est premium et le nombre total de
téléchargement n'a pas dépassé la limite, le téléchargement sera aussi eectuer avec succès.
Mais si l'image est payante, et le type du compte utilisateur est premium et le nombre total de
téléchargement a atteint la limite, le téléchargement sera bloqué et un message d'erreur sera aché
à l'utilisateur.
Figure 5.2 Le diagramme de séquence du cas d'utilisation "Télécharger une image"
66
Chapitre 5 Sprint 2
5.4 Etude du cas d'utilisation "Gérer ses collections (Mo-

dier ses collections)"
Le même enchaînement d'étape d'analyse suivie pour le cas d'utilisation précédent sera suivi pour
l'étude du cas d'utilisation "Gérer ses collections" (l'exemple de : Modier ses collections).

"Gérer ses collections (Modier ses collections)"
Donc d'après le tableau 5.3, nous constatons que la gestion de ses collections et plus précisément, la
modication d'une collection, nécessite l'authentication de l'utilisateur.
Puis l'utilisateur n'a qu'à accéder à la collection qu'il va modier, exprimé son intention de modication
au système par un simple clic sur le bouton "Editer".
Puis, il entraine les modications voulues (changer le titre de la collection et/ou le mode(collection pu-
blique/privée)) et il termine par un clic pour enregistrer les modications.
Table 5.3 Description textuelle du cas d'utilisation "Gérer ses collections (Modier ses
collections)"
Titre Gérer ses collections (Modier ses collections)

Objectif modier le titre et/ou le mode de la collection
Acteur(s) acheteur/contributeur/administrateur/véricateur/Auteur
Postcondition(s) la collection est mises à jour par les nouvelles données
1- Accéder à la collection voulue
2- Cliquer sur le bouton "Editer"
Scénario nominal 3- Modier le titre et/ou le mode de la collection (public/privé)
4- Valider la modication par clic sur le bouton "enregistrer
les changements".
Documents -
5.4.2 Diagramme de séquence du cas d'utilisation "Gérer ses col-

lections (Modier ses collections)"
Comme l'illustre la gure ( 5.3) du diagramme de séquence du cas d'utilisation "Gérer ses col-
lections (Modier ses collections)" :
67
Chapitre 5 Sprint 2
L'utilisateur demande d'éditer une collection, cette demande sera transmise de la vue Collection au
contrôleur CollectionsController, qui à son tour procède à l'achage de la vue AjaxCollection.
Ensuite, l'utilisateur saisit les modications voulues et une vérication des champs s'eectue au niveau de
la vue AjaxCollection et s'il existe une erreur, un message sera acher pour alerter l'utilisateur.
Sinon, une demande de modication de la collection choisie sera envoyée vers le contrôleur et par la suite
une requête de modication sera transmise entre lui et le modèle Collection, et la mise à jour s'eectue
au niveau de la base de données ( la table "Collections").
Figure 5.3 Le diagramme de séquence du cas d'utilisation "Gérer ses collections (Mo-
dier ses collections)"
68
Chapitre 5 Sprint 2
5.5 Etude du cas d'utilisation "Ajouter une image à une

collection"
5.5.1 Description textuelle des scénarios du cas d'utilisation "Ajou-
ter une image à une collection "
Donc d'après le tableau ( 5.4), nous constatons que l'ajout d'une image à une collection nécessite
l'authentication de l'utilisateur.
Puis l'utilisateur n'a qu'à choisir une image , cliquer sur le bouton "collection", choisir une collection et
puis l'opération sera validée par le système en achant un message de succès d'ajout.
Mais l'ajout peut être bloqué s'il s'avère que l'image est déjà existante dans la collection et c'est à l'utili-
sateur alors de détecter son erreur.
Donc s'il s'est trompé de l'image à ajouter il doit refaire les étapes dès le début. Sinon s'il s'est trompé de
la collection, il n'a qu'à choisir la bonne collection et valider son choix pour terminer l'opération.
Table 5.4 Description textuelle du cas d'utilisation "Ajouter une image à une collection"
Titre Ajouter une image à une collection

Objectif Enrichir une collection avec un nouveau élément
Précondition(s) Existance d'une collection/ être authentié
Postcondition(s) la collection contient la nouvelle image ajoutée
1- Accéder à l'image voulue ajouter.
2- Cliquer sur le bouton "collection".
Scénario nominal 3- Choisir une collection
4- Achage d'une message du succès d'ajout.
1- Le système ache un message d'erreur de type "image déjà existante
Scénario alternatif dans la collection".
2- Reprise de l'étape 1 ou 3 du scénario nominal.
Exception(s) Connexion interrompue.
Documents -
5.5.2 Diagramme de séquence du cas d'utilisation "Ajouter une

image à une collection"
Comme l'illustre la gure ( 5.4) du diagramme de séquence du cas d'utilisation "Ajouter une
image à une collection" :
69
Chapitre 5 Sprint 2
Figure 5.4 Le diagramme de séquence du cas d'utilisation "Ajouter une image à une
collection"
L'utilisateur demande à la vue Image.Show d'ajouter une image à une collection, cette demande
sera transcrite au contrôleur CollectionController en une demande d'achage du formulaire corres-
pondant, et ce dernier demande au modèle Collection de récupérer la liste de toutes les collections
créées par l'utilisateur puis la requête sera exécutée au niveau de la base de données ( la table "Collec-
tions") qui envoi à son tour les collections au modèle puis au contrôleur CollectionController où
s'eectue la vérication des collections à lesquelles l'image est déjà ajoutée. Ensuite, le contrôleur crée et
ache la vue AjaxCollection à l'utilisateur où s'ache les collections contenants déjà l'image cochées
et les autres décochées pour qu'il n'y aura pas de redondance d'image dans la même collection.
Ensuite, l'utilisateur remplit le formulaire aché en choisissant la collection voulue et par conséquent, une
demande d'ajout de l'image sera transferée de la vue AjaxCollection au contrôleur CollectionCon-
troller. Ce dernier l'envoie alors au modèle CollectionImage et l'insertion s'exécute au niveau de
70
Chapitre 5 Sprint 2
la base de données (la table CollectionImages).

Enn, le contrôleur termine l'opération par la destruction de la vue AjaxCollection et la redirection
de l'utilisateur vers la vue Image.Show où le message du succès d'ajout sera aché.
5.6 Etude du cas d'utilisation "Ajouter une image aux

favoris"
5.6.1 Description textuelle des scénarios du cas d'utilisation "Ajou-
ter une image aux favoris"
Donc d'après le tableau ( 5.5), nous constatons que l'ajout d'une image aux favoris nécessite l'au-
thentication de l'utilisateur. Puis il n'a qu'à accéder à une image , cliquer sur le bouton "j'aime" , et le
système procède à l'ajout de l'image à la liste de favoris de l'utilisateur connecté.
Table 5.5 Description textuelle du cas d'utilisation "Ajouter une image aux favoris"
Titre Ajouter une image aux favoris

Objectif Enregistrer l'image dans sa liste de favoris
Postcondition(s) Image est ajoutée à la liste des favoris de l'utilisateur connecté
1- Accéder à l'image voulue .
2- Cliquer sur le bouton " j'aime " .
Scénario nominal 3- Ajouter l'image à la liste des favoris de l'utilisateur
par le système
Documents -
5.6.2 Diagramme de séquence du cas d'utilisation "Ajouter une

image aux favoris"
Comme l'illustre la gure ( 5.5) du diagramme de séquence du cas d'utilisation "Ajouter une
image à une collection" : l'utilisateur clique sur le bouton "j'aime" pour qu'une demande d'ajout de
l'image aux favoris passe de la vue Image.Show au contrôleur ImagesController.
Ce dernier passe une requête d'ajout de l'image aux favoris au modèle Like et l'insertion s'eectue au
niveau de la base de données (la table "Likes").
71
Chapitre 5 Sprint 2
Figure 5.5 Le diagramme de séquence du cas d'utilisation "Ajouter une image aux
favoris"
5.7 Etude du cas d'utilisation "Gérer les commentaires

(Ajouter un commentaire)"
"Gérer les commentaires(Ajouter un commentaire)"
Table5.6 Description textuelle du cas d'utilisation "Gérer les commentaires(Ajouter un
commentaire)"
Titre Gérer les commentaires(Ajouter un commentaire)

Objectif Exprimer son avis sur une image
Précondition(s) Etre authentié
Postcondition(s) Commentaire ajouté à l'image
1- Accéder à l'image voulue .
Scénario nominal 2- Saisir son commentaire .
3- Partager le commentaire en cliquant sur le bouton "envoyer"
Documents -
72
Chapitre 5 Sprint 2
Donc d'après le tableau ( 5.6), nous constatons que l'ajout d'une image aux favoris nécessite l'au-
thentication de l'utilisateur. Puis l'utilisateur n'a qu'à accéder à une image, saisir son commentaire, et
cliquer sur le bouton envoyer
5.7.2 Diagramme de séquence du cas d'utilisation "Gérer les com-

mentaires(Ajouter un commentaire)"
Figure 5.6 Le diagramme de séquence du cas d'utilisation "Gérer les commen-

taires(Ajouter un commentaire)"
Comme l'illustre la gure ( 5.6) du diagramme de séquence du cas d'utilisation "Gérer les com-
mentaires(Ajouter un commentaire)" :
L'utilisateur saisie son commentaire et l'ajoute à l'image par un simple clic sur le bouton "Envoyer". Ainsi
une demande d'ajout du commentaire passe de la vue Image.Show vers le contrôleur Comments-
Controller.
Puis une requête d'ajout du commentaire sera transférée au modèle Comment et c'est au niveau de la
base de données que s'exécute la commande d'insertion des nouveau données dans la table correspondante
"Comments".
73
Chapitre 5 Sprint 2
5.8 Conclusion
Dans ce chapitre, nous nous sommes intéressés à la conception et au développement des cas d'utilisation
du 2ème sprint.
Dans le chapitre suivant, nous aborderons l'étude conceptuelle et la réalisation du troisième sprint.
74
Chapitre 6
Sprint 3
6.1 Introduction
D ans le chapitre précèdent, nous nous sommes focalisés sur à l'étude conceptuelle du deuxième sprint.
Dans ce chapitre, nous nous intéresserons à l'étude conceptuelle du troisième sprint.

utilisateurs
(User Story)
Gérer les images 6 jours Haute En tant qu'administrateur - Charger des images, 3
ou véricateur, il peut gérer - Consulter
tous les images de FLEXI- les images,
PIK en chargeant de nou- - Modier ses images,
velles images et en consul- - Approuver
tant, modiant,supprimant, les images,
approuvant ou encore refuser - Refuser les images,
des images. - Supprimer les
images.
75
Chapitre 6 Sprint 3
Gérer ses images 4 jours Moyenne En tant que contributeur, - Charger des images, 2
il peut gérer toutes ses - Consulter
images en chargeant de nou- ses images,
velles images, consultant ses - Modier ses images,
images, en modiant ou sup- - Supprimer les
primant ses images, et aussi images. - Vérier le
en vériant le statut de ses statut de ses images.
images (approuvée, en at-
tente, refusée)
Acheter un 4 jours Haute En tant qu'acheteur, il peut 1
abonnement acheter un abonnement men-
suel ou annuel .
Acheter un pa- 2 jours Haute En tant qu'acheteur, il peut 1
quet acheter un paquet d'images.
Acheter une 3 jours Haute En tant qu'acheteur, il peut 1
image acheter une image toute
seule.
Consulter ses 5 jours Moyenne En tant que contributeur 2
ventes ou administrateur, il peut
consulter la liste de toutes ses
images vendues.
Consulter son 2 jours Moyenne En tant que contributeur, il 2
classement peut consulter son classement
par rapport aux autres contri-
buteurs.
Consulter son 5 jours Faible En tant que contributeur, il 3
tableau de bord peut accéder à son tableau de
contributeur bord
Consulter ses 3 jours Haute En tant qu'utilisateur, il peut 2
notications accéder aux notications qu'il
reçoit lors des actions faites
par les autres utilisateurs (ai-
mer/commenter ses images).
Le tableau (6.1) résume les fonctionnalités du troisième sprint à réaliser ,qui seront décrites par un
Cette démarche sera suivie dans la présentation des cas d'utilisation jugés importants à présenter.
Enn, nous présenterons la réalisation du sprint.
76
Chapitre 6 Sprint 3
Figure 6.1 Le diagramme de cas d'utilisation du 3ème sprint
Selon la gure (6.1), tous les utilisateurs, à condition q'ils soient connectés, peuvent consulter les
notications qu'il reçoivent de la part du système après que les autres utilisateurs ont fait des actions qui
lui concerne (par exemple : aimer ou commenter une image).
Concernant l'acheteur, après l'authentication il peut acheter un abonnement mensuel ou annuel, acheter
un paquet d'images ou encore acheter une image toute seule.
Concernant le contributeur, il peut consulter son classement par rapport aux autres contributeurs de
FLEXIPIK (classement par le total d'images chargées, le total de ventes, le total d'abonnés).
En plus, il peut gérer son tableau de bord contributeur où il peut suivre les clés de performances (total
de j'aime, total de vues , d'abonnées, de téléchargements, la courbe d'évolution de téléchar-
gements). De plus, il peut gérer ses images en les consultant pour vérier leur statut après chargement,
par exemple(image approuvée/ image en attente/ image refusée). Il peut aussi modier les détails de ses
images ou encore les supprimer, mais il doit d'abord être connecté.
Pour l'administrateur et le véricateur, après l'authentication, ils peuvent gérer toutes les images de
FLEXIPIK dans leurs panneaux administratifs en chargeant de nouvelles images, en consultant la liste
77
Chapitre 6 Sprint 3
de toutes les images en gérant un ltre pour préciser leurs choix ou en modiant leurs images. Il peuvent
aussi soit approuver soit refuser les images en attente chargées par les contributeurs ou encore les supprimer.
6.3 Etude du cas d'utilisation "Gérer les images

(Approuver/Refuser une image)"
Dans le but de rendre le diagramme des cas d'utilisation (6.1) plus compréhensible et an de mieux
décrire le comportement du système, nous avons décidé d'utiliser la technique de la description textuelle
du cas d'utilisation pour détailler l'enchaînement des tâches, suivie d'une partie d'analyse et conception.
Pour ce cas d'utilisation nous allons aborder en même temps les deux extensions "Approuver une
image" et "Refuser une image".

"Gérer les images(Approuver/Refuser une image)"
Table 6.2 Description textuelle du cas d'utilisation "Gérer les
images(Approuver/Refuser une image)"
Titre Gérer les images(Approuver/Refuser une image)

Objectif Approuver ou refuser une image en attente
Acteur(s) administrateur/véricateur
Précondition(s) être authentié/ nouvelle image chargée
Avoir l'image approuvée et ajoutée aux image publiques de FLEXIPIK
Postcondition(s) ou refusée et signalée au contributeur avec la raison du refus.
1- Accéder à une image.
Scénario nominal 2- Cliquer sur le bouton "Approuver".
3- L'image est publiée
2- Cliquer sur le bouton "Refuser".
Scénario alternatif 3- L'image non publiée est signalée au contributeur.
Documents -
D'après le tableau (6.2), nous constatons que la gestion des images soit pour approuver ou refuser
une image chargée par un utilisateur nécessite l'authentication de l'utilisateur.
Puis il n'a qu'à accéder à une image, exprimer sa décision d'acceptation ou de refus et la valider par un
78
Chapitre 6 Sprint 3
simple clic sur le bouton correspondant à son choix "Approuver", "Refuser".

Et puis si l'image est acceptée, elle sera achée au public, sinon elle sera signalée à celui qu l'a chargée
comme refusée avec un message contenant la raison de la décision prise.
L'opération peut être bloquée faute de connexion internet.
6.3.2 Diagramme de séquence du cas d'utilisation "Gérer les images

(Approuver/Refuser une image)"
Figure 6.2 Le diagramme de séquence du cas d'utilisation "Gérer les

Comme l'illustre la gure ( 6.2) du diagramme de séquence du cas d'utilisation "Gérer les images
(Approuver/Refuser une image)" :
L'administrateur ou le véricateur demande d'accéder à l'image, puis la vue Admin.Images envoi

au contrôleur AdminController une demande d'accès à l'image. Ce dernier récupère l'image et ses
données de la table "images" à travers le modèle Image. puis, il ache la che de l'image dans la vue
Image.Show.
79
Chapitre 6 Sprint 3
Ensuite, l'utilisateur exprime son choix par un simple clic sur le bouton correspondant et la vue Image.Show
envoie les données au contrôleur qui met à jour le status de l'image dans la table à traves le modèle. Enn,
le contrôleur rafraichi la page et ache le message de succès de l'opération.
6.4 Etude du cas d'utilisation "Gérer ses images(Supprimer

une image)"

"Gérer ses images(Supprimer une image)"
D'après le tableau (6.3), nous constatons que la suppression d'une image nécessite l'authentication
de l'utilisateur.
Puis l'utilisateur n'a qu'à accéder à une image, cliquer sur le bouton de la suppression, valider l'alerte de
conrmation de l'action et puis l'image sera supprimée de la base de données de FLEXIPIK.
Table 6.3 Description textuelle du cas d'utilisation "Gérer ses images(Supprimer une
image)"
Titre Supprimer une image

Objectif Supprimer une image
Acteur(s) administrateur/véricateur/Contributeur
Postcondition(s) Avoir l'image écrasée de la liste d'image de FLEXIPIK.
2- Cliquer sur le bouton "supprimer".
Scénario nominal 3- Conrmer son action en validant l'alerte.
4- Image supprimée de la base de données par le système.
5- Renvoyer l'utilisateur à la liste de ses images mise à jour.
Documents -
80
Chapitre 6 Sprint 3
Figure 6.3 Le diagramme de séquence du cas d'utilisation "Gérer ses images(Supprimer

une image)"
6.4.2 Diagramme de séquence du cas d'utilisation "Gérer ses images

(Supprimer une image)"
Comme l'illustre la gure ( 6.3) du diagramme de séquence du cas d'utilisation "Supprimer une
image" :
L'administrateur, le véricateur ou le contributeur demande de supprimer une image après l'avoir consul-
tée, par un simple clic sur le bouton "Supprimer".
Ensuite la vue Image.Show envoi une alerte de conrmation au utilisateur pour qu'il annule son action
s'il s'avère qu'il s'agit d'une faute de clic sur le bouton "supprimer" sinon il procède à la validation de son
choix en cliquant sur "Conrm".
Donc après conrmation de la suppression les données de l'image seront envoyées au contrôleur Images-
Controller qui supprime l'mage de la table Images à travers le modèle Image.
Enn, la redirection de l'utilisateur vers la rubrique "Images" de son tableau de bord sera dépendante de
son rôle.
Ainsi, si le rôle de l'utilisateur est administrateur ou véricateur, le contrôleur va acher la vue Ad-
81
Chapitre 6 Sprint 3
min.Images. Sinon si le rôle de l'utilisateur est contributeur, le contrôleur va acher la vue Contri-
buteur.Images.
6.5 Etude du cas d'utilisation "Acheter un abonnement"

"Acheter un abonnement"
D'après le tableau (6.4), nous constatons que l'achat d'un abonnement nécessite l'authentication de
l'utilisateur et la possession d'un moyen de paiement (Par exemple : carte bancaire).
Puis l'utilisateur doit accéder à la page des tarifs, choisir l'abonnement qui lui convient et saisir les
données de facturation.
Mais toute erreur de saisie (format de champ invalide/ champ obligatoire vide) bloque l'opération et l'uti-
lisateur sera demandé de ressaisir ses données correctement. Ensuite, l'utilisateur insère ses données du
payement mais le contrôle de saisie dans cette étape est lié au codage du kit du paiement de la solution
choisie (Voir annexe C). Enn, si l'opération s'est eectuée avec succès, l'utilisateur sera redirigé à la
page d'accueil.
Table 6.4 Description textuelle du cas d'utilisation "Acheter un abonnement"
Titre Acheter un abonnement

Objectif Avoir accès aux images premiums selon le type d'abonnement.
Acteur(s) Acheteur/ Contributeur
Précondition(s) Etre authentié/ avoir un moyen de paiement
Accès à un nombre d'images premiums xe pour une durée de temps
Postcondition(s) qui varient selon le type d'abonnement.
1- Accéder à la page des tarifs.
2- Choisir un abonnement.
Scénario nominal 3- Saisir les données de facturation.
4- Saisir les données de payement.
1- Recevoir un message d'erreur de saisie à l'étape 3 .
Scénario alternatif 2- Reprise de l'étape 3 du scénario nominal
Exception(s) Connexion interrompue/ solde insusant
Fichier PDF de la facture de paiement
Documents et du contrat
82
Chapitre 6 Sprint 3
6.5.2 Diagramme de séquence du cas d'utilisation "Acheter un

abonnement"
Figure 6.4 Le diagramme de séquence du cas d'utilisation "Acheter un abonnement"
Comme l'illustre la gure ( 6.4) du diagramme de séquence du cas d'utilisation "Acheter un abon-
nement" :
L'acheteur clique sur le bouton de la page des tarifs au niveau de la barre de menus de l'application web
demande les tarifs d'achat oertes par FLEXIPIK, puis la vue Navbar passe une demande de d'a-
chage des tarifs au contrôleur PayementController qui les récupère de la table Subscriptions à
83
Chapitre 6 Sprint 3
travers le modèle Subscription.

Puis, Il procède à l'achage de la vue Tarifs avec la quelle l'acheteur sera en interaction pour dénir
son choix de l'abonnement qui lui convient. Ainsi, une demande d'achat de l'abonnement passe de la vue
vers le contrôleur qui détruit la vue Tarifs et crée la vue Checkout où l'acheteur tape ses données
de facturation et le contrôleur procède à la vérication des champs pour envoyer un message d'erreur au
cas où une erreur de saisie sera détectée.
Ensuite, ses données seront envoyées au contrôleur qui détruit la vue Checkout et l'opération se
continue selon les détails cités au niveau du diagramme de séquence du cas d'utilisation eectuer une
transaction" qui dière selon la solution de paiement choisie (Voir Annexe C Sprint 3).
Enn, les données seront insérées dans la table "SubscriptionsUser" de la base de données de
FLEXIPIK après qu'une demande d'insertion soit reçu par le modèle "SubscriptionUser" de la part du
contrôleur qui termine l'opération par la création de la vue Page d'accueil à la quelle l'utilisateur sera
renvoyé après le succès de l'achat de l'abonnement choisi.
6.6 Etude du cas d'utilisation "Consulter

son classement"
"Consulter son classement"
Table 6.5 Description textuelle du cas d'utilisation "Consulter son classement"
Titre Consulter son classement

Objectif Visualiser son rang par rapport à ses concurrents
Acteur(s) Contributeur
Postcondition(s) Rang consulté selon le ltre choisi
1- Accéder au "Dashbord Contributor".
Scénario nominal 2- Consulter la rubrique "Contributors Ranking".
3- Visualiser son classement en fonction du critère choisi.
Documents -
D'après le tableau (6.5), nous constatons que pour que le contributeur puisse consulter son classement
par rapport à ses concurrents, il doit tout d'abord être connécté à son compte.
84
Chapitre 6 Sprint 3
Puis l'utilisateur n'a qu'à accéder à son tableau de bord contributeur et consulter la rubrique "Classement
des contributeurs". Enn, le contributeur visualise son rang en fonction du critère xé par défaut et qu'il
peut le changer en manipulant le ltre (classement par total de téléchargement, total de j'aime , total
d'abonnés).
6.6.2 Diagramme de séquence du cas d'utilisation "Consulter son

classement"
Comme l'illustre la gure ( 6.5) du diagramme de séquence du cas d'utilisation "Consulter son
classement" :
Le contributeur accède à son tableau de bord contributeur et demande de consulter son classement en
cliquant sur la rubrique "Classement contributeurs". Puis, la vue Contributor.Dashboard envoie la
demande de consultation du classement au contrôleur ContributorsController qui à son tour récupère
la liste des contributeurs de la table "Users" à travers le modèle "User". Enn, ContributorsCon-
troller procède à l'achage de la vue Contributors où le classent des contributeurs de FLEXIPIK
sera aché au contributeur connecté.
Figure 6.5 Le diagramme de séquence du cas d'utilisation "Consulter son classement"
6.7 Conclusion
Dans ce chapitre, nous nous sommes intéressés à la conception et au développement des cas d'utilisation
du 3ème sprint.
Dans le chapitre suivant, nous aborderons l'étude conceptuelle et la réalisation du quatrième et dernier
sprint.
85
Chapitre 7
Sprint 4
7.1 Introduction
D ans le chapitre précèdent, nous nous sommes focalisés sur à l'étude conceptuelle du troisième sprint.
Dans ce chapitre, nous nous intéresserons à l'étude conceptuelle du quatrième sprint.

utilisateurs
(User Story)
Gérer les pa- 2 jours Haute En tant qu'administrateur, il 2
ramètres géné- peut gérer les paramètres glo-
raux baux et les limites qui concernent
les permissions.
Gérer les utili- 5 jours Moyenne En tant qu'administrateur, il Ajouter, consulter, 2
sateurs peut gérer tous les utilisateurs de modier, supprimer
FLEXIPIK. ou exclure les utili-
sateurs.
Gérer les caté- 2 jours Haute En tant qu'administrateur, il Ajouter, consulter, 1
gories peut gérer les catégories d'images modier ou suppri-
de FLEXIPIK. mer une catégorie.
Signaler une 1 jours Moyenne En tant qu'utilisateur, il peut si- 1
image gnaler une image jugée inappro-
priée tout en précisant la raison
exacte.
86
Chapitre 7 Sprint 4
Signaler un 1 jours Moyenne En tant qu'utilisateur, il peut si- 1

contributeur gnaler un contributeur tout en
indiquant la raison.
Consulter les 1 jours Faible En tant qu'administrateur, il 1
contributeurs peut accéder à la liste des contri-
signalés buteurs signalés pour prendre
une décision d'exclusion ou de
suppression.
Consulter les 1 jours Faible En tant qu'administrateur, il 1
images signa- peut accéder à la liste des contri-
lées buteurs signalés pour prendre
une décision de suppression.
Gérer les ar- 5 jours Haute En tant qu'administrateur ou au- Ajouter, consulter, 3
ticles teur, il peut gérer les articles. modier ou suppri-
mer un article.
Consulter le 3 jours Moyenne En tant qu'utilisateur, il peut vi- 2
blog sualiser les articles du blog de
FLEXIPIK.
Consulter son 5 jours Faible En tant qu'administrateur, il 3
tableau de peut accéder à son panneau ad-
bord adminis- ministratif.
tratif
Le tableau (7.1) résume les fonctionnalités du dernier sprint à réaliser ,qui seront décrites par un
Cette démarche sera suivie dans la présentation de chaque cas d'utilisation jugé important à présenter.
Enn, nous présenterons la réalisation du sprint.

Selon la gure (7.1), tous les utilisateurs peuvent consulter le blog. Et tout en étant authentier à
son compte, l'acheteur(et le contributeur) peut signaler un contributeur tout en indiquant la raison (Par
exemple : à cause d'usurpation d'identité, violation de copyright, problème de condentialité,
contenu violent) et il est aussi autorisé à signaler une image qu'il juge inappropriée mais toujours en
indiquant la raison (Par exemple : violation de copyright, problème de condentialité, contenu
violent ou sexuel).
Et quant à l'administrateur, il peut consulter son panneau administratif pour accéder à son tableau
de bord où il peut visualiser les indicateurs clés de performances (total d'images, total de ventes,
total d'utilisateurs, courbes du nombre d'inscriptions et de ventes du derniers mois,..), consulter la liste
87
Chapitre 7 Sprint 4
des contributeurs et des images signalés, gérer les catégories (en ajoutant une nouvelle catégorie, en les
consultant, en les modiant et les supprimant), gérer les utilisateurs (en consultant leurs prols, les mo-
diants (par exemple : pour changer le rôle de l'un des utilisateurs), en excluant des uns momentanément
ou dénitivement après être signalés et en ajoutant des nouveaux utilisateurs).
De plus, il peut gérer les paramètres généraux de FLEXIPIK (les paramètres de l'application web :
le nom de l'application web, la description,e-mail sans réponse de FLEXIPIK, e-mail de l'administrateur
de la messagerie, les limites : Approuver automatiquement les photos, Limiter le téléchargement de
photos par jour par chaque utilisateur, Nombre de photos à montrer, Description longueur, Longueur du
commentaire, Taille de chier autorisée, Limite de mots-clés d'une image).
Finalement, l'auteur après l'authentication est autorisé avec l'administrateur à la gestion des articles du
blog de FLEXIPIK. Alors il peut ajouter un nouveau article,le consulter, le modier ou encore le supprimer.
Figure 7.1 Le diagramme de cas d'utilisation du 4ième sprint
88
Chapitre 7 Sprint 4
7.3 Etude du cas d'utilisation "Gérer les paramètres

généraux"
Dans le but de rendre le diagramme des cas d'utilisation (7.1) plus compréhensible et an de mieux
décrire le comportement du système, nous avons décidé d'utiliser la technique de la description textuelle
de cas d'utilisation pour détailler l'enchaînement des tâches, suivie d'une partie d'analyse et conception.

"Gérer les paramètres généraux"
Table 7.2 Description textuelle du cas d'utilisation "Gérer les paramètres généraux"
Titre Gérer les paramètres généraux

Objectif Modier les paramètres de FLEXIPIK
Acteur(s) Administrateur
Postcondition(s) Avoir l'application web mise à jour par les nouveaux paramètres
1- Accéder au tableau de bord administratif
2- Choisir la nature des paramètres à modier
(paramètres généraux/limites).
Scénario nominal 3- Modier les paramètres voulues.
4- La page de gestion des paramètres choisie
rafraichie avec les nouveaux paramètres.
1- Le système ache un message d'erreur de type "champs invalide"
Scénario alternatif ou "champ obligatoire vide".
2- Reprise de l'étape 3 du scénario nominal.
Documents -
D'après le tableau (7.2), nous constatons que la gestion des paramètres de l'application web FLEXIPIK
nécessite l'authentication de l'utilisateur.
Puis l'utilisateur n'a qu'à accéder à son tableau de bord administratif et choisir la nature des paramètres à
modier (paramètres généraux/limites), entrainer les changements voulus et valider les modications
par un simple clic sur le bouton "Enregistrer".
Et s'il y a une erreur de saisie, il sera demandé de ressaisir les données, sinon la page sera rafraichie et
mise à jour par les nouveaux paramètres.
89
Chapitre 7 Sprint 4
7.3.2 Diagramme de séquence du cas d'utilisation

"Gérer les paramètres généraux"
Figure 7.2 Le diagramme de séquence du cas d'utilisation "Gérer les

Comme l'illustre la gure (7.2) du diagramme de séquence du cas d'utilisation "Gérer les pa-
ramètres généraux image" : L'administrateur accède à son tableau de bord administratif et de-
mande d'accéder aux paramètres généraux. Une demande de modication sera envoyée de la vue Ad-
min.Dashboard vers le contrôleur AdminController qui à son tour récupère les anciennes données
de la table AdminSettings à travers le modèle AdminSetting. Ensuite, il ache la vue Ad-
min.Settings où l'administrateur choisi et saisie les nouveaux paramètres et si après la vérication des
champs une erreur de saisie soit détectée, un message d'erreur sera envoyé à l'administrateur. Sinon une
demande de mise à jour passe de la vue vers le contrôleur qui fait la mise à jour au niveau de la base de
données (la table AdminSettings) à travers le modèle.
90
Chapitre 7 Sprint 4
7.4 Etude du cas d'utilisation "Gérer les utilisateurs(Bloquer

un utilisateur)"
Le même enchaînement d'étape d'analyse suivie pour le cas d'utilisation précédent sera suivi pour
l'étude du cas d'utilisation "Bloquer un utilisateur".

"Gérer les utilisateurs(Bloquer un utilisateur)"
D'après le tableau (7.3), nous constatons le blocage d'un utilisateur nécessite l'authentication de
l'administrateur
Puis il n'a qu'à accéder à la liste d'utilisateur signalés par exemple pour prendre la décision du blocage et
dénir la durée selon l'importance de la règle enfreinte qui a causé son signalement.
Ensuite, une alerte de conrmation sera aché à l'administrateur pour valider une dernière fois sa décision
et suite à la validation, le contributeur sera bloqué.
Table 7.3 Description textuelle du cas d'utilisation "Gérer les utilisateurs(Bloquer un

utilisateur)"
Titre Bloquer un utilisateur

Objectif Exclure un utilisateur de FLEXIPIK momentanément ou dénitivement.
Utilisateur averti par un blocage momentané
Postcondition(s) ou exclu dénitivement
1- Accéder à la liste des contributeurs signalés.
2- cliquer sur le bouton "ban" .
Scénario nominal 3- Conrmer l'alerte .
4- Bloquer un contributeur.
Documents -
7.4.2 Diagramme de séquence du cas d'utilisation "Gérer

les utilisateurs (Bloquer un utilisateur)"
Comme l'illustre la gure ( 7.3) du diagramme de séquence du cas d'utilisation "Gérer les utili-
sateurs (Bloquer un utilisateur)" :
91
Chapitre 7 Sprint 4
Figure 7.3 Le diagramme de séquence du cas d'utilisation "Gérer les utilisateurs(Bloquer

un utilisateur)"
L'administrateur accède à la liste des contributeurs signalés et clique sur le bouton "Ban" ("Bloquer"),
ainsi une demande de blocage passe à la vue ReportedContributors qui ache à l'administrateur
une alerte de conrmation de la décision du blocage.
Après avoir conrmé sa décision, une demande de blocage sera envoyé de la vue vers le contrôleur Ad-
minController qui insére les données dans la base de données et particulièrement dans la table Bans
à travers le modèle "Ban.
Enn, un message de succès de l'opération sera aché à l'administrateur.
7.5 Etude du cas d'utilisation "Signaler une image"

Signaler une image"
D'après le tableau (7.4), nous constatons que le signalement d'une image nécessite l'authentication
de l'utilisateur.
Puis l'utilisateur n'a qu'à accéder à une image, cliquer sur le bouton de la signalement, choisir la raison et
conrmer.
92
Chapitre 7 Sprint 4
Table 7.4 Description textuelle du cas d'utilisation "Signaler une image"
Titre Signaler une image

Objectif Avertir l'administrateur d'une image qui enfreint les règles de FLEXIPIK.
Acteur(s) Acheteur/Contributeur
Postcondition(s) Image achée dans la liste des images signalées chez l'admin.
2- Cliquer sur le bouton "Signaler".
Scénario nominal 3- Choisir la raison du signalement.
4- Acher un message de succès et la page de l'image
est rafraichie par le système.
Documents -
7.5.2 Diagramme de séquence du cas d'utilisation "Signaler une

image"
Comme l'illustre la gure ( 7.4) du diagramme séquence du cas d'utilisation "Signaler une
image" :
Figure 7.4 Le diagramme de séquence du cas d'utilisation "Signaler une image"
93
Chapitre 7 Sprint 4
L'utilisateur (acheteur/ contributeur) passe une demande de signaler une image à la vue Image.Show
qui lui répond par l'achage du formulaire correspondant où il doit choisir la raison du signalement.
Ensuite, une demande de signalement sera envoyée de la vue vers le contrôleur ImagesController qui
enregistre le signalement par l'ajout une ligne dans table Images à travers le modèle Image.
Et enn un message de succès sera aché à l'utilisateur.
7.6 Etude du cas d'utilisation "Consulter les images

signalées"
"Consulter les images signalées"
D'après le tableau (7.5), nous constatons que la consultation de la liste des images signalées nécessite
l'authentication de l'utilisateur.
Puis il n'a qu'à accéder à son tableau de bord et cliquer sur le bouton menant à la rubrique des images
signalées. L'opération peut être bloquée faute de connexion internet.
Table 7.5 Description textuelle du cas d'utilisation "Consulter les images signalées"
Titre Consulter les images signalées

Objectif Visualiser la liste de toutes les images signalées
Postcondition(s) Liste des images signalées achée sur l'écran de l'utilisateur
1- Accéder au tableau de bord.
Scénario nominal 2- Cliquer sur la rubrique des images signalées.
Documents -
7.6.2 Diagramme de séquence du cas d'utilisation "Consulter les

images signalées"
Comme l'illustre la gure ( 7.5) du diagramme séquence du cas d'utilisation "Consulter les
images signalées" :
L'administrateur accède à son tableau de bord et demande de consulter les images signalées en cliquant
sur la rubrique "reported images". Puis, la vue Admin.Dashboard envoie la demande au contrôleur
94
Chapitre 7 Sprint 4
ImagesController qui à son tour récupère la liste des images voulues de la table "Imagesreporteds"
à travers le modèle "Imagesreported". Enn, ContributorsController procède à l'achage de la
vue Imagesreported où les images récupèrées seront achées.
Figure 7.5 Le diagramme de séquence du cas d'utilisation "Consulter les images signa-
lées"
7.7 Etude du cas d'utilisation "Gérer les articles du blog

(Modier un article)"
"Gérer les articles du blog (Modier un article)"
D'après le tableau (7.6), nous constatons que la modication d'un article nécessite l'authentication
de l'utilisateur.
Puis l'utilisateur doit accéder à l'article qu'il veut éditer cliquer sur le bouton "Edit" et saisir les nouvelles
informations. Ensuite, le système procède à la vérication des champs pour alerter l'utilisateur au cas où
une erreur de saisie existe. Sinon, l'opération sera terminée avec succès, l'utilisateur sera renvoyé à la page
d'achage de l'article.
95
Chapitre 7 Sprint 4
Table 7.6 Description textuelle du cas d'utilisation "Gérer les articles du blog (Modier
un article)"
Titre Modier un article

Objectif Mettre à jour des informations de l'article choisi
Acteur(s) Administrateur/auteur
Postcondition(s) L'article choisi est mis à jour par les nouvelles informations
1- Accéder à l'article choisi.
2- Cliquer sur le bouton de modication.
3- Saisir les nouvelles informations.
Scénario nominal 4- Valider la modication par un simple clic sur le bouton "Sauvegarder
les changements".
5- Renvoyer l'utilisateur à la page d'achage de l'article mis à jour.
1- Recevoir un message d'erreur de saisie de données.
Scénario alternatif 2- Reprise de l'étape 3 du scénario nominal
Documents -
7.7.2 Diagramme de séquence du cas d'utilisation "Gérer les ar-

ticles du blog (Modier un article)"
Comme l'illustre la gure (7.6) du diagramme de séquence du cas d'utilisation "Modier un ar-
ticle" :
L'utilisateur accède à l'article qu'il veut éditer et passe une demande de modication par un simple clic sur
le bouton "Modier" , ainsi une demande de modication passe de la vue Post.Show vers le contrôleur
PostsController qui récupère à son tour les données anciennes de la table "Posts" à travers le modèle
Post, et ache la vue de modication d'article Post.Edit avec laquelle l'utilisateur va interagir en
tapant les nouvelles données. Et s'il s'avère qu'il existe une erreur de saisie après que la vue eectue la
vérication des champs, un message d'erreur sera aché à l'utilisateur.
Par la suite, une demande de mise à jour sera envoyée de la part de la vue Post.Edit vers le contrô-
leur qui met à jour l'article dans la base de données à travers le modèle Post et ache à nouveau la
vuePost.Show.
96
Chapitre 7 Sprint 4
Figure 7.6 Le diagramme de séquence du cas d'utilisation "Modier un article"
7.8 Conclusion
Dans ce chapitre, nous avons achevé l'étude conceptuelle des cas d'utilisation.
Le résultat nal ici est un produit livrable au client contrairement aux résultats des autres sprints qui sont
des produits potentiellement livrables.
Dans le chapitre suivant nous allons présenter la réalisation du projet.
97
Chapitre 8
La réalisation des sprints
8.1 Introduction
D ans le chapitre précédent, nous avons achevé l'etude conceptuelle du dernier sprint, terminant ainsi
l'étude conceptuelle du backlog produit. Dans ce chapitre nous présenterons la partie de la réalisation
de tous les cas d'utilisation mentionnés auparavant.
8.2 Zoom sur les fonctionnalités du projet
Figure 8.1 Inscription
98
Chapitre 8 La réalisation des sprints
Figure 8.2 Authentication
Figure 8.3 Recherche et ltrage
99
Figure 8.4 Gestion de compte
100
Figure 8.5 Consultation du prol contributeur, le suivre (1) ou le signaler (2)
101
Figure 8.6 Chargement d'image
102
Figure 8.7 Consulter la che image, pour l'ajouter aux favoris (1), à une collection (2),
pour la télécharger (3), la paratger (4), la commenter (5) ou la signaler (6)
103
Figure 8.8 Ajouet une image à une collection
Figure 8.9 Consulter ses favoris
104
Figure 8.10 Gérer ses collections
Figure 8.11 Consulter ses notications
105
Figure 8.12 Choix d'une ore (image, abonnement, paquet)
106
Figure 8.13 Checkout
Figure 8.14 Gérer ses images (contributeur)
107
Figure 8.15 Consulter son tableau de bord de contributeur
108
Figure 8.16 Consulter son classement
Figure 8.17 Modier une image
109
Figure 8.18 Gérer les images (administrateur)
Figure 8.19 Gérer les utilisateurs
110
Figure 8.20 modier un utilisateur
111
Figure 8.21 Gérer les catégories
Figure 8.22 Modier un article ou une page statique
112
Figure 8.23 Consulter son tableau de bord administratif
8.3 Conclusion
Dans ce chapitre nous avons présenté toutes les fonctionnalités du produit nal sous forme de captures
d'écran.
À ce stade, nous avons réussi donc à développer les diérents sprints de l'application web pour arriver
à un produit complet et fonctionnel. Cette solution demeure à présent ecace, mais nos compétences ne
cessent d'évoluer et par conséquent de nouveaux horizons peuvent être créés pour cette solution.
113
Conclusion générale
En guise de conclusion, Flexipik n'était pas seulement un projet de n d'étude à achever mais il était
aussi le plus grand challenge que nous avons confronté durant notre cursus.
Ce travail était très intéressant pour nous puisque nous avons réussi de partir d'une idée simple vers
un projet d'une future startup.
Le point de départ de la réalisation de ce projet était la xation de la problématique et des objectifs

du projet, suivi par l'étude de l'existant et le choix de la méthode de travail. Par la suite nous avons
xé la stratégie marketing du lancement de Flexipik où nous avons diagnostiqué l'environnement externe
et interne par les diérents outils d'analyse et d'étude du marché (SWOT, benchmarking concurrentiel,
questionnaire en ligne), ce qui nous a permis par la suite d'élaborer la stratégie marketing et de tracer le
lean canvas de Flexipik.
Ensuite, nous avons identié les exigences fonctionnels et non fonctionnels qui nous ont permis de
tracer le backlog produit du projet et d'établir nos choix technologiques nécessaires au développement de
l'application web. Et après nous avons divisé le backlog produit en quatre sprints et planier les étapes
à réaliser pendant la durée xée pour le projet. Le dernier volet de notre projet était la conception des
besoins et le développement des diérentes fonctionnalités.En tout au long du notre travail, nous avons
construit l'application incrément par incrément en utilisant la méthode Scrum.
Ce travail était donc très enrichissant puisqu'il nous a permis de découvrir un nouveau domaine de
travail et de s'éloigner des projets traditionnels. Il nous a permis d'approfondir nos connaissances dans les
bonnes pratiques de programmation notamment l'utilisation des Frameworks e l'utilisation de l'architec-
ture MVC.
Finalement, ce projet ne s'arrête pas à ce niveau, il est prêt pour toute amélioration envisageable. En
eet, à part des plusieurs fonctionnalités qui peuvent être ajoutées à l'application notamment un éditeur
d'image instantané et une recherche par image. D'autres horizons peuvent être créés tels la participation
dans STARTUP ACT pour décrocher le label d'une startup.
114
Annexe A
Notions des trois points et IHIP
A.1 Dénition de la Méthode Des Trois Points :

Méthode de groupe.
(Distribution,On ne connaît pas la durée,
La durée est considérée comme une variable aléatoire :
mais la probabilité des diérentes durées (g. A.1).
Figure A.1 La règle de calcul de la Méthode Des Trois Points
TM : temps moyen estimé (travail dans des conditions normales)

TO : temps optimiste (conditions idéales, pas d'obstacles, temps minimum pour accomplir
la tâche)
TP : temps pessimiste (temps maximum pour accomplir la tâche dans les pires conditions)
A.2 Les caractéristiques IHIP d'un service

La gure A.2 présentes les caractéristiques distinctives des services tout en expliquant les implications
de chacune [8].
1
Chapitre 8 Notions des trois points et IHIP
Figure A.2 Les caractéristiques distinctives des services
2
Annexe B
La charte graphique de FLEXIPIK
1
Charte
graphique
Guide d’application de l’identité visuelle
Construction
X 1/3 X
8X
1/3 X
3,5X
4,8X
15,4X
Un nom
L’appellation « FLEXIPIK» est une concatination des deux mots :

-Flexibility (FR:Flexibilité): pour reflèter la flexibilité de la banque d’images en terme
de paiement,
-et PIK , picture (photo) : pour faciliter la lecture et la mémorisation du nom
et en même temps pour faire appel aux types des élements graphiques qui peuvent être
vendus dans ce site web(Vecteurs,Photos, Psd, icones).
Riche de sens
Le keppel est une nuance de la couleur cyan qui évoque : le ciel, l’eau, la mer, l’espace, l’air
autrement dit , tout ce qui est infini et en même temps riche en composants, ce qui est le cas
de FLEXIPIK, une banque d’images ayant un contenu très riche et varié.
La couleur keppel dégage aussi la vérité, la confiance, la loyauté, l’intelligence et la sécurité.
Utilisation en communication visuelle
Dans le contexte de la communication visuelle, généralement le bleu et ses nuances et particulièrement

le keppel sont souvent utilisée pour représenter les domaines des technologies et de l’informatique.
Version couleurs
En deux couleurs,
Nous privilégions l’utilisation du logo en deux couleurs, de préférence sur fond blanc,
ou lorsque le fond ne nuit pas à la bonne visibilité des éléments du logo .
1
Couleurs officielles
C=70%
R=64
Pantone M=0% WEB
Keppel V=186
346 C J=57% 40ba92
B=146
N=0%
C=75%
R=55
Tuna Pantone M=71% WEB
V=58
432 C J=50% 373544
B=63
N=46%
Zone de protection
et taille minimale
Zone de protection
L’hauteur de la lettre x multipliée par 2 est l’espace de respiration à respecter impérativement
à gauche et à droite et l’hateur de x pour le haut et le bas.
Taille minimale
Le logo FLEXIPIK sera utilisé au minimum dans un format de L=3,91mm x H=1,27 mm.
H: 1,27 cm
L: 3,91 cm 2
Typographie
TYPOGRAPHIE PRINCIPALE
TYPOGRAPHIE DU LOGO ET TYPOGRAPHIE D’ACCOPMAGNEMENT
Nom de police: HP Simplified Bold Italic Nom de police: HP Simplified Light Italic
Les imprimés administratifs

Ces quelques exemples vous donnent un aperçu de la façon d’utiliser le logo
sur différents items de papeterie de FLEXIPIK .
Make it worth thounsand COINS
5,RUE ELBAYREM ETTOUNSSI - 7000 BIZERTE
RC Tunis B17339166 -TVA / 2388 V/P/M/000

Adresse: 5,RUE ELBAYREM ETTOUNSSI - 7000 BIZERTE
E-mail: flexipikcompany@flexipik.com
Site web: www.flexipik.tn Enveloppe 82*52mm
Tél/ fax: 7253134
Mobile: 24262383
Papier à lettre A4
63
KCHAOU Khouloud
DIRECTRICE GENERALE
Adresse: 5,RUE ELBAYREM ETTOUNSSI - 7000 BIZERTE

@Web: WWW.FLEXIPIK.TN
E-mail: KHOULOUD.KCHAOU@FLEXIPIK.TN
Mob: 24262383 TéL: 72531347
Carte Visite
Objets promotionnels
4
Annexe C
La solution de paiement en ligne

ClicToPay
C.1 Eectuer une transaction

Ce cas d'utilisation est dépendant de la solution de paiement en ligne choisie. C'est pour cela que nous
avons extrait les informations d'un manuel rédigé par la plateforme de paiement en ligne "Clictopay (Site
Web ociel : http ://www.clictopay.com.tn/)" pour que l'explication de l'opération soit basée sur
des données exactes et non sur des hypothèses.
Figure C.1 Le logo de la plateforme ClicToPay
C.1.1 Diagramme de séquence du cas d'utilisation "Eectuer une

transaction"
Comme l'illustre la gure ( C.2) du diagramme de séquence du cas d'utilisation "Eectuer une
transaction" :
1
Chapitre 8 La solution de paiement en ligne ClicToPay
Figure C.2 Le diagramme de séquence du cas d'utilisation "Eectuer une transaction"
2
Chapitre 8 La solution de paiement en ligne ClicToPay
1. Le client crée une commande sur la boutique en ligne du marchand.

2. Lorsque la commande est conrmée par le client, le système marchand envoi une demande d'en-
registrement de paiement sur ClicToPay. Les paramètres suivants sont envoyés :
(a) Montant à percevoir,
(b) Monnaie du paiement attendu,
(c) Numéro d'ordre interne,
(d) Marchand URL pour rediriger client après le paiement.
3. ClicToPay valide les données reçues et renvoi un identiant unique de la transaction enregistrée
et une URL du formulaire de paiement que le client doit être redirigé vers.
4. Le site marchand reçoit le résultat de la demande et récupère l'URL générée dans l'étape précé-
dente.
5. le client est redirigé vers la page de paiement.
6. Le formulaire de paiement est aché.
7. Le client remplit le formulaire et envoie les données à ClicToPay.
8. ClicToPay vérie au prêt du service d'annuaire (DS) si la carte spéciée est enrôlée au programme
d'authentication 3D Secure.
9. ClicToPay reçoit le résultat de la vérication d'enrôlement. Si la carte est enrôlée, ClicToPay
récupère l'URL du serveur de contrôle d'accès de la banque du porteur.
10. ClicToPay redirige le client vers la page d'authentication.
11. ACS vérie la demande d'authentication et ache le formulaire au client.
12. Le client est demandé de fournir un code d'authentication fourni par sa banque, ou généré et
envoyé par SMS.
13. l'ACS traite les données et renvoi le résultat (PaRes) à clictopay via le navigateur du client.
14. ClicToPay décrypte et analyse les données reçues.
15. Le portail de paiement eectue la demande d'autorisation.
16. Lorsque la transaction est traitée, le client est redirigé la page de résultat spéciée par le marchand
lors de l'enregistrement de la transaction.
17. Le site marchand demande à ClicToPay les résultats de paiement relatif à la transaction en cours.
18. ClicToPay prépare l'état demandé.
19. ClicToPay renvoie l'état de paiement au site marchand.
20. Le site marchand ache la page de résultat de paiement sur le navigateur du client.
Remarque : Les étapes 18 et 19 ne sont pas obligatoires, les commerçants peuvent les
ignorer dans leur mise en ÷uvre du processus.
3
Annexe D
La présentation du questionnaire
D.1 introduction
Dans cette partie, nous allons présenter le questionnaire sur les quel l'étude de marché a été eectuer
et traitée au niveau du deuxième chapitre du rapport.
D.2 Présentation du questionnaire

Le questionnaire comporte 9 questions et il est divisé en trois parties :
1. Partie 1 : Questions introductives : qui traitent la fréquence d'utilisation des images , le prol
(acheteurs ou contributeurs) et la source d'image principale pour l'utilisateur.
2. Partie 2 : Questions spéciques
3. Partie 3 : Fiche signalétique
1
Chapitre 8 La présentation du questionnaire
Partie 1 : Questions introductives
2
Partie 2 : Questions spéciques
3
Partie 3 : Fiche signalétique
4
5
Bibliographie
[1] Clémentine. La puissance des visuels . https ://eklos.fr/infographie-la-

en communication
puissance-des-visuels-en-communication/.dernière date de consultation le : 09/02/2020

[2] MaverickGlobal Info Soft. Visual Content, an Aid for Social Media Success .
https ://maverickinfosoft.wordpress.com/2015/05/21/visual-content-an-aid-for-social-
media-success/.dernière date de consultation le : 09/02/2020
[3] Amos Struck. What are Stock Images ? One of the Best Image Resources Explained .
https ://www.stockphotosecrets.com/questions-answers/what-are-stock-images.html.
dernière date de consultation le : 10/02/2020.
[4] Shutterstock. About us . https ://www.shutterstock.com/fr/about.dernière date de consultation
le : 10/07/2020
[5] Freepik. Get to know us. https ://www.freepikcompany.com/about_us.dernière date de consul-
tation le : 10/07/2020
[6] segmentation study guide. a step by step guide to segmenting a market .
https ://www.segmentationstudyguide.com/understanding-market-segmentation/a-
step-by-step-guide-to-segmenting-a-market/.dernière date de consultation le : 14/03/2020
[7] denitions-marketing. strategie-marketing. https ://www.denitions-
marketing.com/denition/strategie-marketing.dernière date de consultation le : 14/03/2020
[8] Patrick Gabriel.Ronan Divard.Marine Le Gall-Ely.Isabelle Prim-Allaz. Marketing des services. [PDF.]
http ://excerpts.numilog.com/books/9782100715527.pdf.dernière date de consultation le :
14/04/2020, P4 et 18.
[9] strategies marketing. strategie ciblage marketing. http ://www.strategies-marketing.fr/strategie-
ciblage-marketing/.dernière date de consultation le : 14/03/2020
[10] creative commons. licenses. https ://creativecommons.org/licenses/.dernière date de consulta-
tion le : 16/03/2020
[11] leanstack. lean canvas . https ://leanstack.com/leancanvas.dernière date de consultation le :
05/05/2020
[12] Claude AUBRY. Scrum Le guide pratique de la méthode agile. . [PDF]. P 8-9/ P 18-19 / P 24-25 / P
54-55.
[13] B.E. Haddad and J. Oger. Scrum, de la théorie à la pratique : initiation, perfectionnement, agilité.
Génie logiciel. Eyrolles, 2017. . [PDF]. P 9-14 / P 55-62 / P 111-120.
1
Bibliographie
[14] mozilla. html5. https ://developer.mozilla.org/fr/docs/Web/HTML.dernière date de consul-

tation le : 01/05/2020
[15] mozilla. CSS3. https ://developer.mozilla.org/fr/docs/Web/CSS.dernière date de consultation
le : 01/05/2020
[16] mozilla. BOOTSTRAP. https ://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-
programmation/le-bootstrap/.dernière date de consultation le : 01/05/2020
[17] mozilla. JS. https ://developer.mozilla.org/fr/docs/Web/JavaScript.dernière date de consul-
tation le : 01/05/2020
[18] supinfo. premiers pas JQUERY . https ://www.supinfo.com/articles/single/6071-premiers-
pas-jquery.dernière date de consultation le : 01/05/2020
[19] futura sciences. TECH AJAX. https ://www.futura-sciences.com/tech/denitions/tech-
ajax-3998/.dernière date de consultation le : 01/05/2020
[20] conseil webmaster. formation php. http ://www.conseil-webmaster.com/formation/php/.dernière
date de consultation le : 01/05/2020
[21] riptutorial. . https ://riptutorial.com/fr/laravel.dernière date de consultation le :
laravel
01/05/2020
[22] framalibre. Visual Studio Code. https ://framalibre.org/content/visual-studio-code.dernière
date de consultation le : 01/05/2020
[23] mozilla. BASH. http ://www.linux-france.org/prj/bash-scripts/.dernière date de consultation
le : 01/05/2020
[24] getcomposer. Composer. https ://getcomposer.org/doc/00-intro.md.dernière date de consulta-
tion le : 01/05/2020
[25] iutenligne. UML.acteur. http ://prive.iutenligne.net/iuRxM0CThIXDIjzG/informatique/langages/
kettaf/UML/04modeleconceptuel/0302acteurs.html.dernière date de consultation le :
02/05/2020
[26] ALICE SVADCHII. Comment décrire les exigences non fonctionnelles .
https ://bestofbusinessanalyst.fr/comment-decrire-les-exigences-non-
fonctionnelles/.dernière date de consultation le : 02/05/2020
[27] Raphael Yende. SUPPORT DE COURS DE GENIE LOGICIEL. [PDF]. https ://hal.archives-
ouvertes.fr/cel-01988734/document.dernière date de consultation le : 02/05/2020
[28] Vivek moyal. How Can PHP Compare Two Images for Similarity .
https ://www.phpclasses.org/blog/post/584-How-Can-PHP-Compare-Two-Images-
for-Similarity.html.dernière date de consultation le : 30/06/2020
2
Résumé
Ce présent rapport a été rédigé dans le cadre du projet de n d'études (PFE) pour l'obtention du diplôme
national de licence appliquée en gestion des technologies de l'information de la communication(GTIC).
Ce projet a été eectué au sein de l'entreprise "CIRCLE" pendant la période de 07 Février 2020 au 01er
juillet 2020.
L'objectif de ce travail est de concevoir et développer la première banque d'images 100% tunisienne qui
s'agit d'une application web, multi-vendeurs, d'e-commerce réunissant les contributeurs et les acheteurs et
créant des réseaux de vente et d'achat de photos, vecteurs, PSD, icônes. Cette banque d'images exposera
son contenu avec des ores exibles (par image, par abonnement annuel, mensuel ou sur-mesure, par pa-
quet d'images).
Mots clés : Application web, banque d'images, reconnaissance d'image, intelligence arti-
cielle, traitements d'image, signature d'image, e-commerce.
Abstract
This report was written within the framework of the end of studies project (PFE) for the obtaining of
the national diploma of the applied license in management of information technologies of communication
(ICTM).
This project was carried out within the company "CIRCLE" during the period from February 07, 2020 to
July 01, 2020.
The objective of this work is to design and develop the rst 100% Tunisian stock photos multi-vendor,
e-commerce web application, bringing together contributors and buyers and creating networks of sale and
purchase of photos, vectors, PSD, icons. This image bank will display its content with exible oers (per
image, per annual or monthly or customized subscription, per image package).
Keywords : Web application, image bank, image recognition, articial intelligence, image
processing, image signature, e-commerce.

Rapport

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport

Transféré par

Droits d'auteur :

Formats disponibles

Département : GTIC

Licence Appliquée en Gestion des Technologies

Projet de Fin d’Études

Conception et développement d’une

Réalisé par : Mohamed Koussay BOUSSETTA

Encadré par : Mme. Yosra BEN SALEM

Entreprise d’Accueil : Circle

Année Universitaire : 2019-2020

e dédie ce modeste travail et ma profonde gratitude

e dédie ce modeste travail et ma profonde gratitude

A mes frères et ma sœur,

A toute ma grande famille,

Mohamed Koussay BOUSSETTA

1 Contexte général du projet 2

2 Stratégie marketing du lancement de Flexipik 13

8 La réalisation des sprints 98

Conclusion générale 114

A Notions des trois points et IHIP 1

B La charte graphique de FLEXIPIK 1

C La solution de paiement en ligne ClicToPay 1

1.1 Tableau comparatif des solutions existantes sur le marché international . . 8

2.1 Les bases et les variables de segmentation . . . . . . . . . . . . . . . . . . 19

3.1 Les rôles des membres du SCRUM . . . . . . . . . . . . . . . . . . . . . . 39

4.1 Table du sprint (1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

5.1 Table du sprint (2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

6.1 Table du sprint (3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

7.1 Table du sprint (4) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

1.1 Fiche d'identité de Circle . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.1 L'analyse SWOT de FLEXIPIK . . . . . . . . . . . . . . . . . . . . . . . . 14

3.1 Schéma de l'architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.1 Le diagramme de cas d'utilisation du 1er sprint . . . . . . . . . . . . . . . 50

5.1 Le diagramme de cas d'utilisation du 2ème sprint . . . . . . . . . . . . . . 64

6.1 Le diagramme de cas d'utilisation du 3ème sprint . . . . . . . . . . . . . . 77

7.1 Le diagramme de cas d'utilisation du 4ième sprint . . . . . . . . . . . . . . 88

A.1 La règle de calcul de la Méthode  Des Trois Points  . . . . . . . . . . . . 1

C.1 Le logo de la plateforme ClicToPay . . . . . . . . . . . . . . . . . . . . . . 1

Contrairement à la compréhension des mots, la compréhension des images ne nécessite

Contexte général du projet

1.2 Présentation de l'organisme d'accueil

Figure 1.1  Fiche d'identité de Circle

1.2.1 Organigramme de l'entreprise

Figure 1.2  L'organigramme l'agence Circle

1.3 Présentation du projet

1.3.1 L'importance du contenu visuel

Figure 1.3  Zoom sur la science

Figure 1.4  Les diverses utilisations des éléments visuels

1.3.2 Problématique du projet

1.3.3 L'objectif du projet

1.4 Étude de l'existant

1.4.1 Analyse de l'existant

 Shutterstock (g. 1.5) a été fondée en 2003 par le programmeur et photographe

Figure 1.5  Le site web shutterstock

Figure 1.6  Le site web freepik

1.4.2 Critique de l'existant

Les points forts Les points faibles

1.4.3 Solution proposée

1.5 Choix de la méthodologie de travail

1.5.1 Les méthodes agiles

Figure 1.7  Le processus agile

1.5.2 Les principales méthodes agiles

1.5.3 Principe de SCRUM

Figure 1.8  Le processus SCRUM

1.5.4 Les rôles des acteurs de la méthode SCRUM

A.1 La règle de calcul de la Méthode Des Trois Points . . . . . . . . . . . . 1

Figure 1.1 Fiche d'identité de Circle

Figure 1.2 L'organigramme l'agence Circle

Figure 1.3 Zoom sur la science

Figure 1.4 Les diverses utilisations des éléments visuels

Shutterstock (g. 1.5) a été fondée en 2003 par le programmeur et photographe

Figure 1.5 Le site web shutterstock

Figure 1.6 Le site web freepik

Figure 1.7 Le processus agile

Figure 1.8 Le processus SCRUM

Table 1.2 Les rôles des acteurs de la méthode SCRUM

2.1 L'analyse SWOT de FLEXIPIK

Figure 2.2 Le benchmark concurrentiel

Choix du mode de diusion du questionnaire :

Présentation et analyse des résultats issus de Google :

Figure 2.3 Question 1

Figure 2.4 Question 2

Figure 2.5 Question 3

Table 2.1 Les bases et les variables de segmentation

Passant maintenant à la troisième étape qui s'agit de la construction des prols de

2.3.4.1 La politique produit (présentation de l'ore)

Figure 2.6 La politique d'ore de Flexipik

Figure 2.7 La politique de prix de Flexipik

2.8 LEAN CANVAS DE FLEXIPIK

3.2.1 Identication des acteurs

3.2.2 Identication des exigences fonctionnelles

Un système de notications : Notre système doit être capable de notier les

3.2.3 Identication des exigences non fonctionnelles

Maintenabilité : La solution doit être extensible et facile à maintenir avec un traçage

3.3 Spécications techniques

Bootstrap est un framework de développement frontal gratuit et open source. Il

JavaScript JS ,est un langage de script léger, interprété et orienté objet, prin-

jQuery est une bibliothèque JavaScript conçue pour simplier la traversée et la

MySQL Système de gestion de base de données (SGBD).

WAMP Server est une plateforme de développement Web de type WAMP,

Un shell, c'est un interpréteur de commandes, et en même temps un langage

Composer est un outil de gestion des dépendances en PHP. Il permet de déclarer

et :Entreprise architect et StarUML sont deux logiciels qui

3.3.6 Outil de planication

Figure 3.1 Schéma de l'architecture MVC

Le MVC ( modèle/vue/contrôleur ) est une architecture de développement visant à

3.4 Spécications générales des exigences