Développement et conception d'une application de générateur des QR Code Dynamique: -Génération des QR Codes Dynamique et personnalisé et Statique -Gestion des QR Codes (Modification du Contenu et design, suppression téléchargement et archivage). -langages et framework: php7, cakephp3.x, angular js1.x,bootstrap

1. Organisme d'accueil
Galactech Studio
Encadré par
ESEN Mme Ismahene Chahbi
Société M. Maher Sghaier
Année Universitaire : 2016-2017
Code : 377
Université de la Manouba
École Supérieure d’Économie Numérique
Rapport
de projet de fin d'études
Sujet
Conception et Développement d’une
application de Générateur de QR Code
Élaboré par:
Khadija shili
Présenté en vue de l'obtention du diplôme de
Licence Appliquée en Technologies et Systèmes d’informations

2. Dédicace« Personne ne peut atteindre le succès sans savoir l’aide des autres. Le sage et confiant
reconnaissent cette aide avec gratitude. » (Alfred North Whitehead)
Avec tous mes profonds respects, Reconnaissance, gratitudes et amour permettez-moi de
dédier le fruit de ce travail :
À ma chère mère
Aucune dédicace ne serait suffisante pour exprimer mon sincère respect et amour et ma
reconnaissance pour tous vous sacrifices.
Vous n’avez jamais cessé de me soutenir et de m’encourager durant tous ma vie
éducative. Vous prière et bénédiction m’ont guidé pour mener à bien mes études.
À mon cher père
Ce dédicace se trouve insuffisant pour exprimer ma gratitude et reconnaissance.
Je vous remercie pour votre patience, votre soutien, vos conseils et vos prières et j’espère que
j’étais et que je resterai à la hauteur de vous espérances.
À ma sœur et mon frère
Ma chère sœur qui est comme une mère pour moi, les mots ne suffisent guère pour exprimer
l’attachement et l’amour que je porte à toi.
Mon cher frère qui est un ami et m’ont toujours épaulé et soutenu.
Mes meilleurs vœux et mes sincères prières pour une vie pleine de bonheur et de réussite.
À tous mes chers enseignants qui mon guider et supporter tous au long de mes années
d’étude et j'espère que je porte de la fierté à tous mes enseignants qui m’ont fait confiance.

3. À ma chère Mlle Kim Jeong Suk
Vous êtes plus qu’une enseignante. Vous me manque beaucoup. Vous m’avez toujours
supporté, guidé et toujours là pour m’aider. Merci bien pour les bonheurs que j’ai avec vous
et tous mes collègues et pour tous vos conseils.
À ma chère amie Chaima Taboubi
Merci d’être toujours là pour me supporter et m’encourager même-ci ça ne fait pas
longtemps que je te connais. Je te remercie chaleureusement et que Dieu t’offre de la chance
et du bonheur.
À tous mes amis et ceux qui ont cru on moi et m’ont soutenu mes meilleurs vœux et prières
de bonheur et de réussite.

4. Remerciement
Ce projet est le fruit du concours de plusieurs personnes à qui je me permet de prendre
cette occasion pour adresser mes sincères remerciements et reconnaissances à toute
personne ayant contribué à la réalisation de ce travail.
Je voudrais tout d’abord exprimer mes gratitudes et mes remerciements à mon
encadrante pédagogique Mme Ismehene Chahbi pour sa patience et disponibilité et
son aide précieux.
Mesplussincèresremerciementsàtousl’équipedeGalactechStudioetsurtout Monencadrant
technique M. Maher Sghaier pour m’avoir accueilli et me donner l’occasion de faire ce stage.
Son aide et ses remarques et ses judicieux conseils qui ont contribué à alimenter ma réflexion.
Mes profondes gratitudes s’adressent aux membres de jurys, pour l’honneur qu’ils
m’ont fait en acceptant de juger mon modeste travail.

5. Table des matières
Introduction................................................................................................................. 1
Chapitre I : Cadre de Projet........................................................................................ 3
Introduction ............................................................................................................. 3
1. Présentation de l’organisme d’accueil ........................................................... 3
2. Étude de l’existant ......................................................................................... 3
a. Analyse de générateur QR Code « Unitag ».............................................. 3
b. Analyse de générateur QR Code « Generator Pro.code-qr »..................... 4
c. Critique de l’existant................................................................................... 4
3. Contexte du Projet......................................................................................... 5
4. Objectif .......................................................................................................... 5
5. Méthodologie et Modèle de Conception utiliser............................................. 6
a. Le Processus unifié.................................................................................... 6
Caractéristiques du Processus unifié :.............................................................. 6
b. Le Modèle de Conception .......................................................................... 7
Conclusion .............................................................................................................. 8
Chapitre II : Incubation................................................................................................ 9
Introduction ............................................................................................................. 9
1. Analyse des Besoins ..................................................................................... 9
1.1.Besoins fonctionnels................................................................................ 9
1.2.Besoins non fonctionnels......................................................................... 9
2. Spécification des Besoins............................................................................ 10
2.1.Identification des acteurs....................................................................... 10
2.2.Le diagramme de cas d’utilisation initial ................................................ 10
2.3.Affectation des priorités ......................................................................... 11
2.4.Raffinement des cas d’Utilisation Prioritaires ........................................ 12
2.4.1.Raffinement du cas d’utilisation « s’authentifier »............................... 12
2.4.2.Raffinement du cas d’utilisation « s’inscrire »..................................... 13
2.4.3.Raffinement du cas d’utilisation « Créer QrCode »............................. 14
3. Analyse........................................................................................................ 14
3.1.Analyse de cas d’utilisation « S’authentifier »........................................ 14

6. 3.2.Analyse de cas d’utilisation « S’inscrire ».............................................. 17
3.3.Analyse de cas d’utilisation « Créer QR Code ».................................... 19
Conclusion ............................................................................................................ 20
Chapitre III : Élaboration........................................................................................... 21
Introduction ........................................................................................................... 21
1. Raffinement des Cas d’Utilisation Secondaires........................................... 21
1.1.Raffinement du cas d’utilisation « Gérer QR Code »............................. 21
2. Analyse des cas d’utilisation Secondaire..................................................... 24
2.1.Analyse du cas d’utilisation « Gérer QR Code ».................................... 24
3. Conception des cas d’utilisation prioritaires................................................. 34
Conclusion ............................................................................................................ 39
Chapitre IV : Construction......................................................................................... 40
Introduction ........................................................................................................... 40
1. Conception des cas d’utilisation secondaire................................................ 40
2. Conception de la base de données ............................................................. 47
2.1.Description des classes des entités....................................................... 48
2.2.Diagramme de classes .......................................................................... 53
2.3.Script de création de la base de données ............................................. 53
Conclusion ............................................................................................................ 56
Chapitre VI : Transition............................................................................................. 57
Introduction ........................................................................................................... 57
1. Environnement de travail............................................................................. 57
1.1.Environnement matériel......................................................................... 57
1.2.Environnement Logiciels ....................................................................... 58
2. Architecture ................................................................................................. 60
2.1.Architecture Physique............................................................................ 60
2.2.Architecture Technique.......................................................................... 61
3. Interfaces de l’application ............................................................................ 61
Conclusion ............................................................................................................ 70
Conclusion et Perspective ........................................................................................ 71
Bibliographie............................................................................................................. 72
Webographie ............................................................................................................ 73

7. Liste des tableaux
Tableau 1:Analyse de générateur QR Code "Unitag"................................................. 4
Tableau 2: Analyse de générateur QR Code "GeneratorPro.Code-qr........................ 4
Tableau 3:Identification des acteurs ......................................................................... 10
Tableau 4:Affectation de priorité............................................................................... 12
Tableau 5:Description Textuelle du cas d'utilisation "sauthentifier" .......................... 13
Tableau 6:Description Textuelle du cas d'utilisation "s'inscrire"................................ 14
Tableau 7:Description textuelle du cas d'utilisation "créer QR Code"....................... 14
Tableau 8:Raffinement du cas d’utilisation « Gérer QR Code : Modifier »................ 22
Tableau 9: Description textuelle du cas d’utilisation « Archiver QR Code » ............. 23
Tableau 10: Description textuelle du cas d’utilisation « Télécharger QR Code » ..... 23
Tableau 11:Raffinement du cas d’utilisation « Gérer QR Code : Consulter liste
Statistique ».............................................................................................................. 24
Tableau 11 : les attributs de la table « users » ......................................................... 48
Tableau 12 : les attributs de la table « qrcodes » ..................................................... 49
Tableau 13 : les attributs de la table « apps » .......................................................... 49
Tableau 14 : les attributs de la table « facebookpages ».......................................... 50
Tableau 15 : les attributs de la table « files »............................................................ 50
Tableau 22 : Environnement Matérielle .................................................................... 57
Tableau 22 : Outils de Conception ........................................................................... 58
Tableau 23 : Outils de développement ..................................................................... 58
Tableau 24 : Langage de programmation................................................................. 59
Tableau 25 : Framework........................................................................................... 60

8. Liste des figures
Figure 1: La Structure logique du Processus Unifé .................................................... 6
Figure 2: Diagramme de cas d'utilisation Global....................................................... 11
Figure 3:Raffinement de Cas d"utilisation "S'authentifier" ........................................ 12
Figure 4: Raffine de cas d'utilisation "s'inscrire" ....................................................... 13
Figure 5: Raffinement de cas d'utilisation "créer QR Code"...................................... 14
Figure 6:Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'tilisation "S'authentifier".......................................................................................... 15
Figure 7:Diagramme de Calsse d'analyse du cas d'utilisation"s'authentifier" ........... 15
Figure 8:: Diagramme de collaboration du cas d’utilisation « S’authentifier »........... 16
Figure 9:Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « s’inscrire »........................................................................................... 17
Figure 10: Diagramme de classe d'analyse du cas d'utilisation « s’inscrire »........... 17
Figure 11: Diagramme de collaboration du cas d’utilisation « S’inscrire »................ 18
Figure 12:: Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du
cas d'utilisation « Créer QR Code ».......................................................................... 19
Figure 13: Diagramme de classe d'analyse du cas d'utilisation « Créer QR Code ... 19
Figure 14: Diagramme de Collaboration « Créer QR Code » ................................... 20
Figure 15: Raffinement de cas d’utilisation « Gérer QR Code »............................... 22
Tableau 9: Description textuelle du cas d’utilisation « Archiver QR.......................... 23
Figure 16 : Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse... 25
Figure 18 : Diagramme de collaboration du cas d’utilisation « Modifier »................. 26
Figure 19 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du
cas d'utilisation « Archiver QR Code » ..................................................................... 27
Figure 20 : Diagramme de classe d’analyse du cas d’utilisation « Archiver »........... 28
Figure 21 : Diagramme de collaboration du cas d’utilisation « Archiver » ................ 28
Figure 22 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du
cas d'utilisation « Télécharger QR Code » ............................................................... 29
Figure 23 : Diagramme de Classe d’analyse du cas d’utilisation « télécharger »..... 30
Figure 24 : Diagramme de collaboration du cas d’utilisation « télécharger »............ 31
Figure 25 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du
cas d'utilisation « consulter statistique de scan de QR Code » ................................ 32

9. Figure 26 : Diagramme de classe d’analyse du cas d’utilisation « Consulter Statique
de scan de QR Code » ............................................................................................. 33
Figure 28 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « S’authentifier » ...................................................... 34
Figure 29 : Diagramme de classe de conception « S’authentifier ».......................... 35
Figure 30 : Diagramme Séquence détaillé du cas d’utilisation « S’authentifier »...... 35
Figure 31 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « S’inscrire » ............................................................ 36
Figure 32 : Diagramme de classe de conception « S’inscrire »................................ 36
Figure 33 : Diagramme Séquence détaillé du cas d’utilisation « S’inscrire »............ 37
Figure 34 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « Créer QR Code » .................................................. 38
Figure 35 : Diagramme de classe de conception « Créer QR Code »...................... 38
Figure 36 : Diagramme Séquence détaillé du cas d’utilisation ................................. 39
« Créer QR Code »................................................................................................... 39
Figure 37 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « Modifier QR Code » .............................................. 40
Figure 38 : Diagramme de classe de conception « Modifier QR Code » .................. 41
Figure 39 : Diagramme Séquence détaillé du cas d’utilisation ................................. 41
« Modifier QR Code »............................................................................................... 41
Figure 40 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « Archiver QR Code » .............................................. 42
Figure 41 : Diagramme de classe de conception « Archiver QR Code ».................. 42
Figure 42 : Diagramme Séquence détaillé du cas d’utilisation ................................. 43
« Archiver QR Code »............................................................................................... 43
Figure 43 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « Télécharger QR Code » ........................................ 44
Figure 44 : Diagramme de classe de conception « Télécharger QR Code »............ 44
Figure 45 : Diagramme Séquence détaillé du cas d’utilisation ................................. 45
« Télécharger QR Code »......................................................................................... 45
Figure 46 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de
conception du cas d’utilisation « Consulter Statistique de scan du QR Code »........ 46
Figure 467: Diagramme de classe de conception « Consulter Statistique de scan du
QR Code »................................................................................................................ 46

10. Figure 48 : Diagramme Séquence détaillé du cas d’utilisation ................................. 47
« Consulter Statistique de scan du QR Code » ........................................................ 47
Tableau 17 : les attributs de la table « multilinks » ................................................... 50
Tableau 18 : les attributs de la table « qrcodeemail » .............................................. 50
Tableau 19 : les attributs de la table « qrcodesms » ................................................ 51
Tableau 20 : les attributs de la table « scan » .......................................................... 51
Tableau 21 : les attributs de la table « qrcodetext » ................................................. 51
Tableau 22 : les attributs de la table « vcard » ......................................................... 52
Figure 49 : Diagramme de classe............................................................................. 53
Figure 50 : Les différentes couches de l’architecture 3-tiers..................................... 60
Figure 51 : Interface d’inscription.............................................................................. 62
Figure 52 : Interface d’authentification...................................................................... 62
Figure 53 : Interface d’authentification...................................................................... 63
Figure 54 : Interface profil......................................................................................... 63
Figure 55 : Interface reset password ........................................................................ 64
Figure 56 : Interface boite email de l’abonné............................................................ 64
Figure 57 : Interface « Changer Mot de passe » ...................................................... 65
Figure 58 : Interface créer QR Code ........................................................................ 65
Figure 59 : Interface Vcard ....................................................................................... 66
Figure 60 : Interface Vcard : personnalisation de design.......................................... 67
Figure 61 : Interface Mange...................................................................................... 68
Figure 62 : Interface Mange...................................................................................... 69
Figure 63 : Interface Mange...................................................................................... 69
Figure 64 : Interface Archive..................................................................................... 70

11. 1
Introduction
Attirer et influencer les consommateurs est le souci majeur de toute entreprise qui veut
augmenter sa part du marché ainsi que sa position.
C’est pour cela les méthodes de marketing et de commercialisation des produits se
développent continuellement en parallèle avec les nouvelles technologies qui les
rendent faciles et plus efficaces.
Plusieurs méthodes de marketing sont apparues pour cette fin, tels que les
représentants, les affiches, les spots publicitaires, ou les bannes publicitaires qui se
trouvent, même sa bonne qualité des messages diffuser au consommateur, un peu
gênante. Ces méthodes peuvent se manifester comme une source de perte des clients.
C’est pour cela, plusieurs entreprises ont fait recours à une nouvelle technologie dans
le domaine de marketing, c’est les QR Codes.
Les QR Codes (Quick Response Code) sont des code-barres à deux dimensions, crée
en 1994 par l'entreprise japonaise Denso-Wave pour le contrôle des pièces des
voitures Toyota, ils sont rapides à décoder à l’aide d’un lecteur de QR code ou QR
code scanner installé sur un smart phone.
La société Galactec Studio, comme plusieurs entreprises, a décidé de créer un
Générateur de QR Code personnalisé permettant aux entreprise et personne physique
de générer et personnaliser ses QR Code d’une Manière dynamique.
Cette application consiste à mettre en place un espace en ligne pour la génération des
QR Codes personnalisés en termes de design et des informations.
Le présent Rapport est composé de cinq chapitres :
Le premier chapitre est consacré à la présentation du cadre du projet et les autres
chapitres représentent les différentes phases de processus unifié.
Dans le deuxième chapitre « Incubation », nous définissons la portée du système et
nous étudions sa faisabilité.

12. 2
Dans le troisième chapitre « Élaboration », nous clarifions le modèle initial des cas
d’utilisation pour la mise en place d’une architecture saine.
Le quatrième chapitre décrit l’implémentation et le développement de l’application.
Dans le chapitre « Transition », nous allons finaliser le produit, présenter les interfaces
de l’application ainsi que les scénarios d’exécution.

13. 3
Chapitre I : Cadre de Projet
Introduction
Ce chapitre est consacré à la présentation de l’organisme d’accueil, du contexte de
projet et la description des objectifs du projet ainsi que la méthodologie et le modèle
de conception adopté.
1. Présentation de l’organisme d’accueil
GalacTech Studio est une Startup de développement des jeux vidéo, des solutions de
réalité augmentée et le développement des applications web et mobiles. Elle a été
fondée en 2016 avec un effectif de 7 employés. L’entreprise est située au co-working
space « StartupHaus » à jean Jaurès.
2. Étude de l’existant
L’étude de l’existant permet de déterminer la valeur ajoutée du produit à fournir
aux utilisateurs par rapport aux solutions existantes. Dans cette partie, nous
allons présenter une analyse de quelques solutions.
a. Analyse de générateur QR Code « Unitag »
Type de QR Code Personnalisation possible
Web & réseaux sociaux : permets de
saisir un Url d’un site ou d’un réseau
social.
Autres Types : Type de QR Code à
générer comme Carte visite, Texte,
Téléphone, SMS, Mail, Géolocalisation,
Calendrier et Réseaux Wi-fi.
Templates : Permets de personnaliser
un QR Code en choisissant un
Template disponible dans la liste de
Templates.
Colors : possibilité de la
personnalisation de couleur du QR
Code soit par la modification de sa
couleur (single color, shaded colors) ou
en plaçant une image au lieu du QR
code.
Look : Permets la modification des
modules ainsi que les yeux du QR Code
Logo : Possibilité d’insertion d’un logo
(ex : logo d’entreprise).
Eyes : Permets de modifier la couleur
des yeux du QR Code.

14. 4
Options : permet la modification de la
couleur de l’arrière-plan du QR Code, la
création d’ombre ou la valeur de
redondance du QR Code (low, medium,
Quality, Strong).
Tableau 1:Analyse de générateur QR Code "Unitag"
Il est possible de créer des QR Code dynamique, dont nous pouvons modifier le
contenu ou le design d’un QR Code déjà crée, ou statique dont est impossible de
faire des modifications après création.
b. Analyse de générateur QR Code « Generator Pro.code-qr »
Type de QR Code Type D’image à télécharger
Mp3, App stores, Photos, Multi-URL,
PDF, etc.
Un Type d’image standard
Il est possible de spécifier la taille
d’image
Il impossible de changer le design
Tableau 2: Analyse de générateur QR Code "GeneratorPro.Code-qr
La plateforme permet de tester le QR Code par un scan.
Les qr codes créer sont statiques. Il est impossible de les modifier et il ne permet
plus de modifier le design lors de création.
c. Critique de l’existant
Les deux solutions proposent presque les mêmes services, mais le problème est dans
le type d’image de QR Code généré.
Unitag : génère des QR Code dynamiques. Ils la modification de design avec
l’intégration des logos au milieu de QR Code ou la modification des modules de QR
Code (eyse), mais il ne permet plus le téléchargement d’une image de QR Code
vectoriel (eps, svg).
Generator Pro.code-qr : génère des QR Codes statique sans design et la modification
du contenu est impossible
Les deux solutions manquent des fonctionnalités qui rendent une application de
générateur de QR Code plus performante.
Il n’existe plus une solution qui regroupe les fonctionnalités proposées par les deux
solutions.

15. 5
3. Contexte du Projet
Dans le cadre d’un projet de fin d’études, au sein de Galactec, qui est une
société tunisienne de développement des applications, sites web et des jeux
vidéo, etc., nous souhaitons développer une application web de générateur QR
Code.
Cette application doit assurer les fonctionnalités suivantes :
 Création des types de services QR Code (vCard, App, Websites, multiUrl,
etc.).
 Générer des QR Codes personnalisés.
 Préparation des statistiques
 Gestion des QR Codes (modification des informations, modification de
design, archivage).
4. Objectif
Les objectifs poursuivis par l’application consistent à mettre en place un espace
en ligne pour générer des QR Codes personnalisés en termes de design et
d’informations. Plus précisément, ces objectifs sont les suivants :
 Création des types de services QR Code :
✓ vCard : Ce type permet la création d’un service QR Code pour les
cartes Visites.
✓ App : permet la création d’un service QR Code pour les applications.
✓ Web Sites : permet la création d’un service QR code pour les sites Web
✓ MultiUrl : permet la création d’un service QR code de plusieurs URL.
 Générer des QR Codes personnalisés c.-à-d. la personnalisation de design
des QR Codes.
 Préparation de statistiques de scan des QR Code.
 Gestion des QR Code :
✓ Modification de design
✓ Modification des informations
✓ Consultation de Statistiques

16. 6
✓ Archivage
5. Méthodologie et Modèle de Conception utiliser
a. Le Processus unifié
Le processus unifié (UP, Ou Unified process) est un processus de développement
logiciel regroupant les activités à mener pour transformer les besoins d’un utilisateur
en système logiciel. C’est un Framework de processus générique pouvant être adapté
à une large classe de systèmes logiciels, à différents domaines d’application, à
différents types d’entreprises, à différents niveaux de compétence et à différentes
tailles de projets. [1]
Figure 1: La Structure logique du Processus Unifé
Caractéristiques du Processus unifié :
Le processus unifié est « itératif et incrémental, centré sur l’architecture, conduit par
les cas d’utilisation et piloté par les risques » :
➢ Itératif Incrémental :
Le projet se découpe en plusieurs itérations à courte durée qui aident à mieux suivre
l’avancement global. À la fin, cette itération produit un livrable qui présente une partie
du système final de façon incrémentale. [1]
➢ Piloté par les cas d’utilisation :

17. 7
✓ Le projet est mené en tenant compte des besoins et des exigences des
utilisateurs qui se traduisent en des cas d’utilisations identifiées, décrits
avec précision et priorisés. [1]
✓ Les Cas d’utilisation ne sont pas un simple outil de spécification des
besoins du système. Ils en guident la conception, l’implémentation et les
tests, c.-à-d. qu’ils guident le processus de développement. [1]
✓ Il est vrai que, les cas d’utilisation guident le processus, mais ils ne sont
pas sélectionnés de façon indépendante, ils doivent absolument être
développés tandems avec l’architecture du système. [1]
➢ Centré sur l’architecture :
✓ Tout système complexe doit être décomposé en parties modulaires afin
de garantir une maintenance et une évolution facilitée. Cette architecture
(fonctionnelle, logique, matérielle, etc.) doit être modélisée en UML et
pas seulement documentée en texte. [1]
✓ L’architecture propose une vue d’ensemble de la conception faisant
ressortir les caractéristiques essentielles en laissant de côté les détails
secondaires. [1]
➢ Piloté par les risques :
✓ Les risques majeurs du projet doivent être identifiés aux plus tôt, mais
surtout, levées le plus rapidement possible les mesures à prendre dans
ce cadre déterminent l’ordre des itérations. [1]
b. Le Modèle de Conception
UML (Unified Modeling Language) se définit comme un langage de
modélisation graphique et textuelle destiné à comprendre et décrire les besoins,
spécifier et documenter des systèmes, esquisser des architectures logicielles,
concevoir des solutions et communiquer des points de vue. [2]
UML unifie à la fois les notations et les concepts orientés objet. Il ne s’agit pas
d’une simple notation graphique, car les concepts transmis par un diagramme
ont une sémantique précise et sont porteurs de sens au même titre que les mots
d’un langage. [2]

18. 8
UML unifie également les notations aux différentes activités d’un processus de
développement et offre, par ce biais, le moyen d’établir le suivi des décisions
prises, depuis l’expression des besoins jusqu’au codage. [2]
UML modélise les exigences des utilisateurs en un modèle de conception
facilitant le codage. [2]
Conclusion
Dans ce chapitre, nous avons présenté le cadre du projet. Nous avons
commencé par une présentation de l’organisme d’accueil ; ensuite nous avons
présenté le contexte et l’objectif du futur système et nous avons fini par une
présentation de la méthodologie et le modèle de conception adopté.

19. 9
Chapitre II : Incubation
Introduction
Dans ce chapitre nous allons présenter la phase d’incubation pour définir les besoins
fonctionnels et non fonctionnels du système et définir les acteurs, leurs rôles et leurs
interactions avec le système.
1. Analyse des Besoins
Dans cette phase nous sommes appelés à analyser les besoins et les
exigences de l’entreprise.
1.1.Besoins fonctionnels
L’application à développer sera constituée d’une partie visible par les abonnées
qui constitue le Front Office. Elle offre les fonctionnalités suivantes :
❖ Création d’un QR Code
✓ Se connecter à la plateforme ou créer un nouveau compte (en cas
d’un nouvel abonné).
✓ Choisir un type de services QR Code
✓ Remplir un formulaire et valider.
✓ L’application génère un QR Code selon les informations saisies.
❖ Consulter les statistiques de scan de QR Code
❖ Gérer les QR Codes de l’abonné :
✓ L’abonné peut effectuer des opérations sur ses QR Codes
générés tels que la modification des informations ou de design,
l’archivage et la suppression totale des QR Codes archivés.
1.2.Besoins non fonctionnels
L’application que nous allons développer doit assurer les besoins suivants :

20. 10
Besoins de performance : l’application doit assurer une bonne performance
en termes de temps de réponse et de chargement des pages.
Besoin de sécurité : l’application doit assurer une gestion des rôles et des
droits d’accès aux informations.
Besoins d’ergonomie : au cours du développement de l’application, nous
devons prendre en considération de son ergonomie (les couleurs, la densité
d’éléments sur les écrans, l’interface utilisateur, etc.).
Besoins de maintenabilité : le système doit permettre d’effectuer la
maintenance là où il est demandé (bug, amélioration de code).
2. Spécification des Besoins
Dans cette partie, nous allons définir les acteurs, ses rôles et ses interactions
avec le système ainsi les cas d’utilisation.
2.1.Identification des acteurs
Acteurs Description
Abonné C’est un internaute qui a un
abonnement qui lui permet de créer des
QR Code selon ses besoins, les gérer et
consulter ses statistiques.
Tableau 3:Identification des acteurs
2.2.Le diagramme de cas d’utilisation initial
Le diagramme de cas d’utilisation (user case) est un ensemble de
processus métier qui permet de mettre en évidence les relations entre
les acteurs et le système étudié. Dans ce diagramme, nous allons
présenter les interactions réalisées par les différents acteurs.

21. 11
Figure 2: Diagramme de cas d'utilisation Global
2.3.Affectation des priorités
Nom cas
d’utilisation
Global
Cas
d’utilisation
Priorité Acteurs
S’authentifier 1 Personne physique ou
morale ayant un
abonnement
S’inscrire 1 Internaute
Créer QR Code 1 Personne physique ou
morale ayant un
abonnement
Modifier
2
Archiver 2
<Include>
<Include>
Abonné
Créer desQR Code
Gérer lesQR Codes
s'inscrire
S'authentifier

22. 12
Gérer QR Code Consulter
Statistique de
scan
2 Personne physique ou
morale ayant un
abonnement
Télécharger 2
Tableau 4:Affectation de priorité
2.4.Raffinement des cas d’Utilisation Prioritaires
Dans cette partie, nous présentons les cas d’utilisations prioritaires
suivants :
 S’authentifier
 S’inscrire
 Créer QR Code
2.4.1.Raffinement du cas d’utilisation « s’authentifier »
Chaque utilisateur de l’application doit s’authentifier pour qu’ils puissent
utiliser l’application.
Figure 3:Raffinement de Cas d"utilisation "S'authentifier"
Cas d’utilisation S’authentifier
Acteur Personne physique ou morale ayant un
abonnement
Objectif Les abonnés peuvent accéder à leurs
propres interfaces.
<Include>
<Include>
Abonné S'authentifier
Introduire login
Introduire Mot de passe

23. 13
Pré-Condition Ayant un compte contenant ses
informations personnelles
Post Condition Accès à sa page d’accueil
Description de Scénario nominal 1. Choisir la commande « Login »
2. L’abonné saisit ces identifiants
(login/mots de passe)
3. Le système vérifiait les
informations saisies.
4. Le système autorise l’accès et
affiche sa propre interface.
Alternative 2.a. Identifiant incorrect
Tableau 5:Description Textuelle du cas d'utilisation "sauthentifier"
2.4.2.Raffinement du cas d’utilisation « s’inscrire »
Chaque Internaute doit s’inscrire pour qu’il bénéficie des services de
l’application.
Figure 4: Raffine de cas d'utilisation "s'inscrire"
Cas d’utilisation S’inscrire
Acteur Internaute
Objectif Avoir un abonnement pour accéder et
bénéficier des services de l’application
selon le type d’abonnement.
Pré-Condition Non-inscrit
Post Condition Un nouveau compte est ajouté et
l’utilisateur accède à sa propre interface.
Description de Scénario nominal 1. Choisir la commande
« Register »
2. Introduire ces informations
personnelles.
3. Le système vérifie les
informations saisies
4. Le système confirme
l’abonnement et envoie un mail
de validation.
5. Le nouvel abonné consule sa
boite email et valide son compte.
6. Le système vérifie le lien de
validation et affiche la page
d’accueil de l’abonné.
Alternative 3.a.1. Compte déjà existe.
<Include>
Abonné
S'inscrire Introduire cesinformationspersonnelles

24. 14
3.a.2. Adresse mail déjà utilisée.
3.a.3. Champ erroné.
6.a. erreur de validation du compte.
Tableau 6:Description Textuelle du cas d'utilisation "s'inscrire"
2.4.3.Raffinement du cas d’utilisation « Créer QrCode »
Un abonné peut créer un ou plusieurs QR Code de même ou de différents
types.
Figure 5: Raffinement de cas d'utilisation "créer QR Code"
Cas d’utilisation Créer QR Code
Acteur Personne physique ou morale ayant un
abonnement.
Objectif Générer des QR Code personnalisés en
termes de design et des informations
saisies
Pré-Condition Ayant un abonnement
Post Condition Un QR Code crée
Description de scénario nominal 1. Choisir la rubrique « Créer »
2. Choisir type de QR Code à créer
(vCard, Social Media, Link, SMS,
mail, texte, app, file).
3. Remplir un formulaire et valider
4. Le système vérifie les
informations saisies et valide.
Alternative 4.a. Les informations saisies erronées.
Tableau 7:Description textuelle du cas d'utilisation "créer QR Code"
3. Analyse
La phase d’analyse permet de définir l’architecture du système ainsi qu’analyser les
cas d’utilisation. Nous allons, dans ce qui suit, présenter la traçabilité entre le modèle
de cas d’utilisation et le modèle d’analyse, nous allons aussi présenter le diagramme
de classes d’analyse et le diagramme de collaboration pour chaque cas d’utilisation.
3.1.Analyse de cas d’utilisation « S’authentifier »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Abonné
Créer QR Code S'authentifier

25. 15
Figure 6:Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'tilisation "S'authentifier"
Diagramme de Classe d’Analyse :
Figure 7:Diagramme de Calsse d'analyse du cas d'utilisation"s'authentifier"
S'authentifier
s'authentifier
Interface S'authentifier Gestionnaire s'authentifier users
<participate><participante>
<Participante>
<<Trace>>
Interface s'authentifier Gestionnaire s'authentifier users
Abonné

26. 16
Diagramme de collaboration
Figure 8:: Diagramme de collaboration du cas d’utilisation « S’authentifier »
Description du Diagramme de collaboration
 L’abonné introduit son identifiant et son mot de passe (1).
 Le système envoie les données saisies (2)
 Le système vérifie la validité des données saisie en consultant l’entité users (3).
 Le Système valide et autorise l’accès à l’interface personnelle de l’internaute (4).
Interface s'inscrire Gestionnaire s'inscrire
users
1: Saisie (identifiant, mot de passe) 2: envoyer les informations saisies
3: vérifier les identifiants saisies
4:affichage de l'interface personnelle
Abonné

27. 17
3.2.Analyse de cas d’utilisation « S’inscrire »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Figure 9:Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « s’inscrire »
Diagramme de Classe d’Analyse :
Figure 10: Diagramme de classe d'analyse du cas d'utilisation « s’inscrire »
S'inscrire
s'inscrire
Interface S'inscrire
Gestionnaire s'inscrire users
<participate><participate>
<Participate>
<<Trace>>
Interface s'inscrire
Gestionnaire s'inscrire users
Internaute

28. 18
Diagramme de collaboration
Figure 11: Diagramme de collaboration du cas d’utilisation « S’inscrire »
Description du diagramme de collaboration
 L’internaute remplit le formulaire d’inscription (1).
 Le système envoie les informations saisies (2).
 Le système vérifie la validité des données saisie et envoie un mail de
confirmation d’abonnement au nouvel abonné (3).
 Le système demande la validation du compte (4)
 Le nouvel abonné consulte sa boite email et valide son inscription (5).
 Le système envoie la demande de confirmation d’abonnement, valide
l’inscription (6,7).
 Le système affiche l’interface personnelle du nouvel abonné (8).
Interface s'inscrire Gestionnaire s'inscrire
users
1: Remplir les champs du formulaire
2: envoyer les informations saisies
3: vérifier les données saisies
et envoie d'email de
validation
4:demande de validation du compte
5: consulte sa boite email et valide son
inscription
6: Envoie de la demande de validation
7: validation d'inscription
8:affichage de l'interface personnelle
internaute

29. 19
3.3.Analyse de cas d’utilisation « Créer QR Code »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Figure 12:: Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « Créer QR Code »
Diagramme de Classe d’Analyse :
Figure 13: Diagramme de classe d'analyse du cas d'utilisation « Créer QR Code »
Créer QR Code
Créer QR Code
Interface Créer QR Code
Gestionnaire Créer QR Code
<participate>
<Participate>
<<Trace>>
qrcode
<participate>
Interface Créer QR Code Gestionnaire Créer QR Code
Abonné
qrcode

30. 20
Diagramme de collaboration
Figure 14: Diagramme de Collaboration « Créer QR Code »
Description du Diagramme de Collaboration
 L’abonné choisit le type de QR Code dans la rebique « Create QR Code » (1,2).
 L’abonné remplit le formulaire affiché (3)
 Le système vérifie les données saisies et valides (4,5)
 Le système affiche la liste des QR Code. (6)
Conclusion
Dans ce chapitre, nous avons présenté les différents besoins (fonctionnels et non
fonctionnels) et déterminé les utilisateurs de notre futur système. Nous avons aussi
réalisé une analyse complète et détaillée des cas d’utilisations prioritaires. Cette étude
nous a permis d’avoir une idée générale sur les fonctionnalités offertes par notre
système.
Interface Créer QR Code Gestionnaire Créer QR Code
1:Choisir créer qr code
4: envoyer les informations
2: choisir un type de qr code
3: Remplir le formulaire afficher
5:Ajout de qrCode
6:Affichage de liste de
qr code
Abonné
qrcode

31. 21
Chapitre III : Élaboration
Introduction
Cette phase est la phase la plus importante dans le cycle de développements conçu
pour notre application.
Durant cette phase, nous allons commencer par dégager et analyser les cas
d’utilisations secondaires. Ensuite, nous allons présenter un modèle de conception
pour les cas d’utilisation prioritaires.
1. Raffinement des Cas d’Utilisation Secondaires
Dans cette section, nous allons raffiner les cas d’utilisations suivants :
Gérer QR Code :
• Modifier
• Archiver
• Télécharger
• Consulter Statistique
1.1.Raffinement du cas d’utilisation « Gérer QR Code »
Un abonné peut gérer sa liste de QR Code (modification, archivage,
téléchargement ou consultation des statistiques de scan.

32. 22
Figure 15: Raffinement de cas d’utilisation « Gérer QR Code »
Raffinement du cas d’utilisation « Gérer QR Code : Modifier »
Cas d’utilisation Modifier contenu
Acteur Personne physique ou morale ayant un
abonnement.
Objectif Modifier le contenu du QR Code.
Pré-Condition Un ou plusieurs QR code est enregistré
dans la liste de QR Code de l’abonné
Post Condition Un QR Code est modifié
Description Scénario Nominal 1. Choisir le menu « Manage »
2. Le système affiche la liste des
QR Code de l’abonné
3. Choisir un QR code à modifier
4. Choisir la sous-commande
« edit » ou « design » pour
modifier le design.
5. Effectuer les modifications
souhaitées.
6. Valider les modifications.
7. Le système vérifie la validité des
informations saisies.
Alternative 2.a. Liste de QR Code vide
7.a. Les informations saisies non valides
Tableau 8:Raffinement du cas d’utilisation « Gérer QR Code : Modifier »
Raffinement du cas d’utilisation « Gérer QR Code : Archiver »
Abonné
Gérer les QR Code
Modifier
Archiver
Consulter Statistique
Télécharer

33. 23
Cas d’utilisation Archiver QR Code
Acteur Personne physique ou morale ayant un
abonnement.
Objectif Modifier le contenu ou le design du QR
Code.
Pré-Condition Un ou plusieurs QR code est enregistré
dans la liste de QR Code de l’abonné
Post Condition Un QR Code est archivé
Description Scénario Nominal 1. Choisir la rubrique « manage »
2. Sélectionner un QR Code
3. Le système affiche la liste des
QR Code de l’abonné
4. Choisir la sous-commande
Archiver.
5. Valider l’opération d’archivage
6. Le système recharge la liste des
QR Codes en supprimant le QR
Code archivé.
Alternative 3.a. Liste de QR Code vide
Tableau 9: Description textuelle du cas d’utilisation « Archiver QR Code »
Raffinement du cas d’utilisation « Gérer QR Code : télécharger »
Cas d’utilisation Télécharger
Acteur Personne physique ou morale ayant un
abonnement.
Objectif Téléchargement d’un QR Code.
Pré-Condition Un ou plusieurs QR code est enregistré
dans la liste de QR Code de l’abonné
Post Condition Un QR Code est téléchargé
Description Scénario Nominal 1. Choisir le menu « Manage »
2. Le système affiche la liste des QR
Code de l’abonné
3. Choisir la commande
« Download ».
4. Le système affiche un pop-up
contenant un formulaire.
5. Choisir le type et la taille d’image et
le niveau de correction du QR
Code.
6. Le système autorise le
téléchargement du fichier.
Alternative 2.1. Liste de QR Code vide
6.a. Fichier volumineux ne peut pas être
téléchargé.
6.b. Échec de téléchargement.
Tableau 10: Description textuelle du cas d’utilisation « Télécharger QR Code »

34. 24
Raffinement du cas d’utilisation « Gérer QR Code : Consulter liste Statistique
»
Cas d’utilisation Consulter statistique de scan
Acteur Personne physique ou morale ayant un
abonnement.
Objectif Consulter statistique de scan d’un QR
Code.
Pré-Condition Un ou plusieurs QR code est enregistré
dans la liste de QR Code de l’abonné
Post Condition La consultation des statistiques de scan est
effectuée.
Description Scénario Nominal 1. Choisir le menu « Manage »
2. Le système affiche la liste des QR Code
de l’abonné
3. Choisir la sous-commande «statistics».
4. Le système affiche le nombre de scan
ainsi que le nombre des appareils qui
ont scanné le QR Code.
Alternative 2.a. Liste des QR Codes vides
Tableau 11:Raffinement du cas d’utilisation « Gérer QR Code : Consulter liste Statistique »
2. Analyse des cas d’utilisation Secondaire
Nous allons établir une analyse détaillée des cas d’utilisation non prioritaires pour mieux
les comprendre et concourir à une architecture plus stable en présentant la traçabilité entre
le modèle de cas d’utilisation et le modèle d’analyse, les diagrammes de classes d’analyse
et les diagrammes de collaboration.
2.1.Analyse du cas d’utilisation « Gérer QR Code »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :

35. 25
Figure 16 : Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse
Modifier QR Code
Modifier QR Code
Interface Gérer QR Code
Gestionnaire Gérer QR Code
<participate>
<Participate>
<<Trace>>
qrcode
<participate>

36. 26
Diagramme de classe d’Analyse :
Figure 17:Diagramme de classe d'analyse « Modifier"
Diagramme de Collaboration
Figure 18 : Diagramme de collaboration du cas d’utilisation « Modifier »
Interface Gérer QR Code Gestionnaire Gérer QR Code
Abonné
qrcode
Interface Gérer QR Code Gestionnaire Gérer QR Code
1:Choisir Gérer qr code
4: envoyer la demande
2: choisir un qr code
8: Remplir le formulaire afficher
5:vérifie le qr code à
charger
7:Affichage du Formulaire de
modification
3: choisir edit ou design
6: recharge le QR Code
souhaiter
9: envoie des informations
saisies
10: vérifie des données
saisies et valide
11: affichage
de liste des
QR Codes
Abonné
qrcode

37. 27
Description de diagramme de collaboration
 L’abonné choisie un QR Code et sélectionne édit (modifier contenu) ou design
(modifier design) (1,2,3).
 Le système reçoit la demande et affiche un formulaire de modification (4,5,6,7).
 L’abonné modifie les données et valide (8).
 Le système envoie les données, les vérifier et valide (9,10).
 Le système affiche la liste de QR Code (11).
Analyse du cas d’utilisation « Archiver »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Figure 19 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « Archiver QR Code »
Archiver QR Code
Archiver QR Code
Interface Gérer QR Code
Gestionnaire Gérer QR Code
<participate>
<Participate>
<<Trace>>
qrcode
<participate>

38. 28
Diagramme de classe d’Analyse :
Figure 20 : Diagramme de classe d’analyse du cas d’utilisation « Archiver »
Diagramme de collaboration
Figure 21 : Diagramme de collaboration du cas d’utilisation « Archiver »
Interface Gérer QR Code Gestionnaire Gérer QR Code
Abonné
qrcode
Interface Gérer QR Code Gestionnaire Gérer QR Code
1:Choisir Gérer qr code
4: envoyer la demande
2: choisir un qr code
5:archiver qr code
6:Affichage de la listedes QR codes
3: choisir 'Archive'
Abonné
qrcode

39. 29
Description du diagramme de collaboration
 L’abonné choisit un QR Code dans la liste et sélectionne le sous menu « archive »
(1,2,3).
 Le système envoie la demande et sauvegarde le QR code dans l’archive (4,5).
 Le système affiche la liste de QR code (6).
Analyse du cas d’utilisation « télécharger »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Figure 22 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « Télécharger QR Code »
Télécharger QR Code
Télécharger QR Code
Interface Gérer QR Code
Gestionnaire Gérer QR Code
<participate>
<Participate>
<<Trace>>
qrcode
<participate>

40. 30
Diagramme de classe d’Analyse
Figure 23 : Diagramme de Classe d’analyse du cas d’utilisation « télécharger »
Interface Gérer QR Code Gestionnaire Gérer QR Code
Abonné
qrcode

41. 31
Diagramme de collaboration
Figure 24 : Diagramme de collaboration du cas d’utilisation « télécharger »
Description De diagramme de collaboration
 L’abonné choisit un QR Code dans la liste et sélectionne « Download »
(1,2,3).
 Le système envoie la demande et vérifie l’id du Qr Code à télécharger (4,5).
 Le système affiche un formulaire dans un pop-up (6)
 L’abonné spécifie de format, taille d'image et le niveau de correction d'erreur
du QR Code (7).
 Le système envoie la demande et télécharge le QR Code (8,9).
Analyse du cas d’utilisation « statistique de scan »
Traçabilité entre le modèle de cas d’utilisation et le modèle d’analyse :
Interface Gérer QR Code Gestionnaire Gérer QR Code
1:Choisir Gérer qr code
4: envoyer la demande
2: choisir un qr code
5:Vérification de l'id
du QR Code
6:Affichage d'un formulaire
3: choisir 'Download'
7: remplir le formulaire
8: envoyer demande
9: télécharger QR Code
Abonné
qrcode

42. 32
Figure 25 : Traçabilité entre le modèle du cas d'utilisation et le modèle d'analyse du cas
d'utilisation « consulter statistique de scan de QR Code »
Consulter statistique de scan
Consulter statistique de scan
Interface Gérer QR Code
Gestionnaire Gérer QR Code
<participate>
<Participate>
<<Trace>>
qrcode
<participate>
scans
<participate>

43. 33
de classe d’Analyse
Figure 26 : Diagramme de classe d’analyse du cas d’utilisation « Consulter Statique de scan
de QR Code »
Diagramme de collaboration
Figure 27 : Diagramme de collaboration du cas d’utilisation « consulter
statistique de Scan »
Interface Gérer QR Code Gestionnaire Gérer QR Code
Abonné
qrcodeScan
Interface Gérer QR Code
Gestionnaire Gérer QR Code
1:Choisir Gérer qr code
4: envoyer la demande
2: choisir un qr code
7:Affichage de nombre de scan et
nombre d'apareil
3: choisir 'statiscs'
6: Rechager les données
Abonné
qrcode
5:vérifier la requete
scans

44. 34
Description de diagramme de collaboration :
 L’abonné choisit un QR Code dans la liste et sélectionne « statistics » (1,2,3).
 Le système envoie la demande et vérifie la requête dans les entités Scans et
qrcode (4,5)
 Le système affiche le nombre de scan et le nombre d’appareil qui ont scanné le
QR code (7).
3. Conception des cas d’utilisation prioritaires
Dans cette partie, nous allons illustrer la traçabilité entre le modèle d’analyse et le modèle
de conception, le diagramme de classes du modèle de conception ainsi que le diagramme
de séquence du modèle de conception.
Modèle de conception du cas d’utilisation « S’authentifier »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 28 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « S’authentifier »
<<boundary>>
Interface S'authentifier <<entity>>
users
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire s'authentifier
Interface S'authentifier Gestonnaire s'authentifier users

45. 35
Diagramme de classe de Conception
Figure 29 : Diagramme de classe de conception « S’authentifier »
Diagramme de Séquence détaillé du cas d’utilisation « S’authentifier »
Figure 30 : Diagramme Séquence détaillé du cas d’utilisation « S’authentifier »
<<boundary>>
Interface S'authentifier <<entity>>
users
<<control>>
Gestionnaire s'authentifier
S'authentifier
Envoie de Requete
Envoie desdonnées
Resaisir sesidentifiants
Affichage de la page d'accueil
Saisie Incorrecte
Réponse
Vérification desdonnées
Envoie de Requete
Envoie desdonnées
Saisir sesidentifiants
Abonné :Interface S'authentifier :Gestionnaire S'authentifier :users
[Non Valide]
[Valide]
alt

46. 36
Modèle de conception du cas d’utilisation « S’inscrire »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 31 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « S’inscrire »
Diagramme de classe de Conception
Figure 32 : Diagramme de classe de conception « S’inscrire »
<<boundary>>
Interface s'inscrire
<<entity>>
users
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire s'inscrire
Interface s'inscrire Gestionnaire s'inscrire users
<<boundary>>
Interface S'inscrire <<entity>>
users
<<control>>
Gestionnaire s'inscrire

47. 37
Diagramme de Séquence détaillé du cas d’utilisation « s’inscrire »
Figure 33 : Diagramme Séquence détaillé du cas d’utilisation « S’inscrire »
S'inscrire
envoie des données
reponse
vérification
confirmation non effectuer
remplir le formulaire
affichage du formulaire d'inscription
remplir le formulaire
confirme l'inscription et affiche la page d'accueil
envoie de requete
envoie de la demande
vérification du mail et confirmation d'inscription
Vérification des données
champs erroné
Envoie de Requete
Vérification de validité des champs
validation d'inscription et deamande de confirmation du compte envoyer par mail
Envoie de Requete
Saisie Incorrecte
Réponse
Envoie des données
choisir le Menu "Register"
Envoyer la demande
Internaute :Interface S'inscrire :Gestionnaire S'inscrire :users
[Non Valide]
[Valide]
alt
[Non Valide]
[valide]
alt
[ok]
[Nok]
alt

48. 38
Modèle de conception du cas d’utilisation « Créer QR Code »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 34 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « Créer QR Code »
Diagramme de classe de Conception
Figure 35 : Diagramme de classe de conception « Créer QR Code »
<<boundary>>
Interface Créer QR Code
<<entity>>
qrcode
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire créer QR Code
Interface créer QR Code Gestionnaire créer QR Code qrcode
<<entity>>
users
<<Trace>>
users
<<boundary>>
InterfaceCréerQRCode
<<entity>>
qrcode
<<control>>
GestionnairecréerQRCode
<<entity>>
users

49. 39
Diagramme de séquence détaillé du cas d’utilisation « Créer QR Code »
Figure 36 : Diagramme Séquence détaillé du cas d’utilisation
« Créer QR Code »
Conclusion
Dans ce chapitre, nous avons réussi à dégager et analyser les besoins fonctionnels
restants. Nous avons réalisé aussi la conception des cas d’utilisations prioritaires.
Créer QR Code
QR Code généré et affichage de liste de QR Code de l'abonné
Envoie de Requete
QR Code n'est pasEnregistré
Envoie desdonnées
Remplir le formulaire
Réponse
Vérification desdonnées
Champserroné
Envoie de requete
Vérification de validité deschamps
Envoie de données
Remplire le formulaire
Affichage du formulaire selon type choisie
Choisir un type de QR Code
Choisir le Menu "Create QR Code
Envoie de Demande
Abonné :Interface Créer QR Code :Gestionnaire QR Code qrcode
ref
S'authentifier()
[Non Valide]
[Valide]
alt

50. 40
Chapitre IV : Construction
Introduction
La phase de construction est la quatrième phase du processus unifié. Elle vise à
Transformer l’architecture de référence en produit complet. Durant cette phase, nous
allons continuer à présenter le modèle de conception des cas d’utilisation secondaire
ainsi que la Conception de la base de données.
1. Conception des cas d’utilisation secondaire
Modèle de conception du cas d’utilisation « Gérer QR Code »
Modèle de conception du cas d’utilisation « Modifier QR Code »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 37 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « Modifier QR Code »
<<boundary>>
Interface Gérer QR Code
<<entity>>
qrcode
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire Gérer QR Code
Interface Gérer QR Code Gestionnaire Gérer QR Code qrcode

51. 41
Diagramme de classe de Conception
Figure 38 : Diagramme de classe de conception « Modifier QR Code »
Diagramme de séquence détaillé du cas d’utilisation « Modifier QR Code
»
Figure 39 : Diagramme Séquence détaillé du cas d’utilisation
« Modifier QR Code »
<<boundary>>
Interface Gérer QR Code
<<entity>>
qrcode
<<control>>
Gestionnaire Gérer QR Code
Modifier
Ecrasé et remplir leschampsà modifier
Envoie de Demande
Choisir le Menu "Manage"
Affichage de liste des Qr Codes
Choisir un QR Code
Affichage d'un formulaire rempli
choisir le sousmenu "Design"
Envoie de données
Vérification de validité deschamps
Envoie de requete
Champserroné
Vérification desdonnées
Réponse
Remplir le formulaire
Envoie desdonnées
Modification n'est pasenregister
Envoie de Requete
QR Code modifier et affichage de liste de QR Code de l'abonné
Abonné :Interface Gérer QR Code :Gestionnaire Gérer QR Code qrcode
ref
S'authentifier()
[Non Valide]
[Valide]
alt

52. 42
Modèle de conception du cas d’utilisation « Archiver QR Code »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 40 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « Archiver QR Code »
Diagramme de classe de Conception
Figure 41 : Diagramme de classe de conception « Archiver QR Code »
<<boundary>>
Interface Gérer QR Code
<<entity>>
qrcode
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire Gérer QR Code
Interface Gérer QR Code Gestionnaire Gérer QR Code qrcode
<<boundary>>
Interface GérerQRCode
<<entity>>
qrcode
<<control>>
Gestionnaire Gérer QRCode

53. 43
Diagramme de séquence détaillé du cas d’utilisation « Archiver QR Code
»
Figure 42 : Diagramme Séquence détaillé du cas d’utilisation
« Archiver QR Code »
Archiver
Affichage de liste de QR Code
QR Code archivé et recharge la liste de QR Code
Envoie de requete
envoie desdonnées
Annuler Archivage
Envoie de requete
Envoie de données
Confirme l'archivage
choisir le sousmenu "archive"
demande de spécification d'emplacement d'enregistrement
Choisir un QR Code
Affichage de liste des Qr Codes
Choisir le Menu "Manage"
Envoie de Demande
Abonné :Interface Gérer QR Code :Gestionnaire Gérer QR Code qrcode
ref
S'authentifier()
[OK]
[NOK]
alt

54. 44
Modèle de conception du cas d’utilisation « Télécharger QR Code »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 43 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « Télécharger QR Code »
Diagramme de classe de Conception
Figure 44 : Diagramme de classe de conception « Télécharger QR Code »
<<boundary>>
Interface Gérer QR Code
<<entity>>
qrcode
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire Gérer QR Code
Interface Gérer QR Code Gestionnaire Gérer QR Code qrcode
<<boundary>>
Interface GérerQR Code
<<entity>>
qrcode
<<control>>
Gestionnaire Gérer QR Code

55. 45
Diagramme de séquence détaillé du cas d’utilisation « télécharger QR
Code »
Figure 45 : Diagramme Séquence détaillé du cas d’utilisation
« Télécharger QR Code »
Télécharger
Réponse
Vérification
Affiche liste de Qr code
Envoie de Demande
Choisir le Menu "Manage"
Affichage de liste des Qr Codes
Choisir un QR Code
Affiche un formulaire dans un pop-up
choisir le sous menu "download"
Remplir le formulaire
Envoie de données
Envoie de requete
Annule le téléchargement
envoie des données
Envoie de requete
téléchargement du QR code
Abonné :Interface Gérer QR Code :Gestionnaire Gérer QR Code qrcode
ref
S'authentifier()
[OK]
[NOK]
alt

56. 46
Modèle de conception du cas d’utilisation « Consulter Statistique de
scan de QR Code »
Traçabilité entre le modèle d’analyse et le modèle de conception
Figure 46 : Diagramme Traçabilité entre le modèle d’analyse et le modèle de conception du
cas d’utilisation « Consulter Statistique de scan du QR Code »
Diagramme de classe de Conception
Figure 467: Diagramme de classe de conception « Consulter Statistique de scan du QR
Code »
Diagramme de séquence détaillé du cas d’utilisation « consulter
statistique de scan de QR Code »
<<boundary>>
Interface GérerQRCode
<<entity>>
qrcode
<<Trace>>
<<Trace>><<trace>>
<<control>>
Gestionnaire Gérer QRCode
Interface GérerQRCode Gestionnaire GérerQRCode qrcode
<<entity>>
scans
<<Trace>>
scans
<<boundary>>
Interface GérerQRCode
<<entity>>
qrcode
<<control>>
Gestionnaire Gérer QRCode
<<entity>>
scans

57. 47
Figure 48 : Diagramme Séquence détaillé du cas d’utilisation
« Consulter Statistique de scan du QR Code »
2. Conception de la base de données
Dans cette section, nous allons partir d’une description des classes entités des objets
dégagés puis nous allons présenter le diagramme de classes et nous finirons par la
présentation de script de la création de la base de données.
Consulter Statistique de Scan
Envoie de requete
Envoie de requete
Envoie de demande
Affichage de nombre de scan du QR Code ainsi le nombre d'appareil qui ont scanné le QR Code
choisir le sousmenu "Statistics"
Choisir un QR Code
Affichage de liste des Qr Codes
Choisir le Menu "Manage"
Envoie de Demande
Abonné :Interface Gérer QR Code :Gestionnaire Gérer QR Code Scansqrcode
ref
S'authentifier()

58. 48
2.1.Description des classes des entités
Dans cette partie, nous allons décrire les classes des entités qui sont déterminées à
partir de la conception des cas d’utilisation.
 Description de la classe entités « users »
users
Attribut Libellé Type
User_id Identifiant de l’utilisateur Entier
firstname Nom de l’utilisateur Chaine de caractère
Lastname Prénom de l’utilisateur Chaine de caractère
Email Email de l’utilisateur Chaine de caractère
Password Mot de passe de
l’utilisateur
Chaine de caractère
Phone Numéro de téléphone Chaine de caractère
Gouverment Gouvernorat de résidence
de l’utilisateur
Chaine de caractère
street Rue de résidence de
l’utilisateur
Chaine de caractère
City Cité de résidence de
l’utilisateur
Chaine de caractère
zipCode Code postal Chaine de caractère
Role Fonction de l’utilisateur Chaine de caractère
Avatar_dir Chemin de l’image
Avatar Photo de profil Chaine de caractère
enabled Statut du compte de
l’utilisateur
Chaine de caractère
Email_verified Vérification de l’email Booléen
Tableau 12 : les attributs de la table « users »
 Description de la classe entités « qrcode »
Qrcode
Attribut Libellé Type
Id Id de QR code Entier
shortUrl Forme réduite de l’url Chaine de caractère
codeColor Code du couleur Chaine de caractère
backgroundColor Couleur de background Chaine de caractère
Name Nom de QR code Chaine de caractère
Geolocation Géolocalisation de qrcode Booléen
Dynamic Défini un QR code
dynamique
Booléen
type Défini type de QR code
(app, vcard, etc.)
Chaine de caractère
Created Détermine la date de
création d’un QR code
Date

59. 49
Modified Détermine la date de
modification d’un QR
code
Date
archived Détermine la date
d’archivage d’un QR code
Date
Draft Booléen
ScanCounter Compte le nombre de
scan
Entier
uniqueScanCounter Compte le nombre
d’appareils qui ont
effectué un scan
Entier
Tableau 13 : les attributs de la table « qrcodes »
 Description de la classe entités « apps »
Apps
Attribut Libellé Type
Qrcode_id Id du qr code Entier
logo Logo de l’application Chaine de caractère
Name Nom de l’application Chaine de caractère
Description Description de l’application Chaine de caractère
Fallback Lien de l’application Chaine de caractère
Ioslink Lien de l’application pour
téléchargement depuis un ios
Chaine de caractère
Androidlink Lien de l’application pour
téléchargement depuis un os
android
Chaine de caractère
Windowslink Lien de l’application pour
téléchargement depuis un os
windows
Chaine de caractère
blackberrylink Lien de l’application pour
téléchargement depuis un os
blackberry
Chaine de caractère
Tableau 14 : les attributs de la table « apps »

60. 50
 Description de la classe entités « facebookpages »
facebookpages
Attribut Libellé Type
Qrcode_id Identifiant du qr code Entier
Name Nom du qr code Chaine de caractère
Type Chaine de caractère
pagelink Lien de la page facebook Chaine de caractère
Tableau 15 : les attributs de la table « facebookpages »
 Description de la classe entités « files »
files
Attribut Libellé Type
Qrcode_id Identifiant du qrcode Entier
Name Nom du fichier Chaine de caractère
File_src Chemin du Fichier image Chaine de caractère
Type Type fichier Chaine de caractère
size Taille du fichier Entier
Tableau 16 : les attributs de la table « files »
 Description de la classe entités « multilinks »
multilinks
Attribut Libellé Type
Qrcode_id Identifiant du QR code Entier
link Entier
Tableau 17 : les attributs de la table « multilinks »
 Description de la classe entités « qrcodeemail »
qrcodeemail
Attribut Libellé Type
qrcode_id Identifiant du QR code Entier
sender Indique l’émetteur d’un
email
Chaine de caractère
Reciver Indique le récepteur d’un
email
Chaine de caractère
Subject Indique l’objet d’un email Chaine de caractère
Header Indique l’entête d’un email Chaine de caractère
Body Indique le corps d’un email Chaine de caractère
Tableau 18 : les attributs de la table « qrcodeemail »

61. 51
 Description de la classe entités « qrcodesms »
qrcodesms
Attribut Libellé Type
qrcode_id Identifiant du QR code Entier
Phone Numéro de téléphone Chaine de caractère
Message Message à envoyer Chaine de caractère
Tableau 19 : les attributs de la table « qrcodesms »
 Description de la classe entités « Scans »
scans
Attribut Libellé Type
id Identifiant du scan Entier
ipAdress Indique l’adresse ip de
l’appareil qui a effectué le
scan
Chaine de caractère
browser Indique le navigateur
utiliser
Chaine de caractère
counter Indique l’objet d’un email Entier
uniqueUserId Indique l’id d’internaute Chaine de caractère
Qrcode_id Identifiant du qr code Entier
Tableau 20 : les attributs de la table « scan »
 Description de la classe entités « qrcodetext »
qrcodetext
Attribut Libellé Type
qrcode_id Identifiant du QR code Entier
body Le corps du texte Chaine de caractère
Tableau 21 : les attributs de la table « qrcodetext »
 Description de la classe entités « vcard »
vcard
Attribut Libellé Type
qrcode_id Identifiant du QR code Entier
headerColor Couleur de l’émulateur de vcard Chaine de caractère
headerImage Image de l’émulateur de vcard Chaine de caractère
buttonColor Couleur de l’émulateur de vcard Chaine de caractère
avatarImage Image de l’émulateur de vcard Chaine de caractère
firstname Nom à enregistrer dans la carte
visite
Chaine de caractère
lastname Prénom à enregistrer dans la carte
visite
Chaine de caractère
Company Société à enregistrer dans la carte
visite
Chaine de caractère

62. 52
Job Occupation à enregistrer dans la
carte visite
Chaine de caractère
Email Email à enregistrer dans la carte
visite
Chaine de caractère
Mobile Numéro de téléphone portable à
enregistrer dans la carte visite
Chaine de caractère
Phone Numéro de téléphone à enregistrer
dans la carte visite
Chaine de caractère
Fax Numéro de fax à enregistrer dans la
carte visite
Chaine de caractère
street Rue de résidence à enregistrer dans
la carte visite
Chaine de caractère
City Cité de résidence à enregistrer dans
la carte visite
Chaine de caractère
Zip Code postal à enregistrer dans la
carte visite
Chaine de caractère
Country Pays à enregistrer dans la carte
visite
Chaine de caractère
Website Site web à enregistrer dans la carte
visite
Chaine de caractère
About Description de l’entreprise ou la
personne qui crée un vcard
Chaine de caractère
Tableau 22 : les attributs de la table « vcard »

63. 53
2.2.Diagramme de classes
Figure 49 : Diagramme de classe
2.3.Script de création de la base de données
CREATE TABLE `users` (`user_id` int(11) NOT NULL, `firstname` varchar(255)
NOT NULL, `lastname` varchar(255) NOT NULL,`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL, `phone` int(11) DEFAULT NULL,
`gouverment` varchar(255) DEFAULT NULL,`street` varchar(255) DEFAULT NULL,
`city` varchar(255) DEFAULT NULL, `zipCode` int(11) DEFAULT NULL,
`avatar_dir` varchar(255) DEFAULT NULL, `avatar` varchar(255) DEFAULT NULL,
`enabled` tinyint(1) DEFAULT '1', `email_verified` tinyint(1) NOT NULL DEFAULT '0'
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;
Gérer
1..n
1
Créer
1 1..n
QrCode
-
-
-
-
-
-
-
-
-
-
-
id
shortURL
codeColor
Geolocalisation
dynamic
created
modified
archived
backgroundColor
name
type
: int
: char
: char
: boolean
: boolean
: Date
: Date
: Date
: char
: char
: char
+
+
Créer QrCode ()
Gérer QrCode ()
...
: void
: void
QrCodeSocialMedia
-
-
-
-
QrCode_id
PageName
Type
Link
: int
: char
: char
: URL
QrCodeEmail
-
-
-
QrCode_id
Header
Body
: int
: char
: char
QrCodevCard
-
-
-
-
-
-
-
-
-
-
-
-
QrCode_id
FirstName
LastName
CurrentPosition
email
Phone
Fax
Street
City
Country
Website
About
: int
: char
: char
: char
: char
: int
: int
: char
: char
: char
: char
: char
QrCodeLink
-
-
QrCode_id
Link
: int
: char
QrCodeSMS
-
-
-
QrCode_id
phone
msg
: int
: int
: char
QrCodeText
-
-
QrCode_id
BodyText
: int
: char
QrCodeApp
-
-
-
-
-
-
-
-
-
QrCode_id
Logo
Name
Description
IOSLink
AndroidLink
BlackBerryLink
Windows
fallback
: int
: IMG
: IMG
: char
: URL
: URL
: URL
: URL
: URL
QrCodeFile
-
-
-
-
-
QrCode_id
name
file_src
type
size
: int
: char
: char
: int
: char
vLink
-
-
-
-
-
QrCode_id
CoverColor
Logo
Description
AutoRedirect
: int
: char
: IMG
: char
: Boolean
vText
-
-
-
-
QrCode_id
HeaderColor
HeaderText
BodyColor
: int
: char
: char
: char
vCard
-
-
-
-
-
-
-
-
QrCode_id
CoverIMG
ProfilIMG
fbLink
tweetter
Google
Instagram
LinkedIn
: int
: IMG
: IMG
: URL
: URL
: URL
: URL
: URl
User
-
-
-
-
-
-
-
-
-
-
Person_id
firstname
lastname
password
phone
gouverment
street
city
zipcode
avatar
: int
: char
: char
: char
: char
: char
: char
: char
: char
: IMG
+
+
s'inscrire ()
S'authentifier ()
...
: void
: void

64. 54
CREATE TABLE `qrcodes` (`id` int(11) NOT NULL,`shortUrl` varchar(20) NOT NULL,
`codeColor` varchar(7) DEFAULT '#000000',
`backgroundColor` varchar(7) DEFAULT '#ffffff', `name` varchar(25) DEFAULT NULL,
`geolocation` tinyint(1) NOT NULL DEFAULT '0',
`dynamic` tinyint(1) NOT NULL DEFAULT '0', `type` varchar(20) DEFAULT NULL,
`created` timestamp NOT NULL, `modified` timestamp NOT NULL,
`archived` tinyint(1) NOT NULL DEFAULT '0',`draft` tinyint(1) NOT NULL DEFAULT
'1',
`scanCounter` int(11) NOT NULL DEFAULT '0', `uniqueScanCounter` int(11) NOT
NULL DEFAULT '0'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `apps` (`qrcode_id` int(11) NOT NULL,
`logo` varchar(255) DEFAULT NULL, `name` varchar(50) NOT NULL,
`description` varchar(255) DEFAULT NULL, `fallback` varchar(255) NOT NULL,
`ioslink` varchar(255) DEFAULT NULL, `androidlink` varchar(255) DEFAULT NULL,
`windowslink` varchar(255) DEFAULT NULL,`blackberrylink` varchar(255) DEFAULT
NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `facebookpages` ( `qrcode_id` int(11) NOT NULL,
`name` varchar(25) DEFAULT NULL, `type` varchar(15) DEFAULT NULL,
`pagelink` varchar(255) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `files` ( `qrcode_id` int(11) NOT NULL,
`name` varchar(255) NOT NULL, `file_src` varchar(255) NOT NULL,
`type` varchar(50) NOT NULL, `size` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `multilinks` (
`qrcode_id` int(11) NOT NULL,

65. 55
`link` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `qrcodeemail` (`qrcode_id` int(11) NOT NULL,
`sender` varchar(150) NOT NULL,`reciver` varchar(150) NOT NULL,
`subject` varchar(150) NOT NULL, `header` varchar(150) NOT NULL,
`body` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `qrcodesms` (`qrcode_id` int(11) NOT NULL,
`phone` varchar(15) NOT NULL,`message` varchar(160) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `qrcodetext` (`qrcode_id` int(11) NOT NULL, `body` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `vcards` ( `qrcode_id` int(11) NOT NULL,
`headerColor` varchar(7) DEFAULT NULL, `headerImage` varchar(255) DEFAULT
NULL, `buttonColor` varchar(7) DEFAULT NULL,
`avatarImage` varchar(255) DEFAULT NULL, `firstname` varchar(20) DEFAULT
NULL, `lastname` varchar(20) DEFAULT NULL,
`company` varchar(20) DEFAULT NULL, `job` varchar(30) DEFAULT NULL,
`email` varchar(150) DEFAULT NULL,`mobile` varchar(20) DEFAULT NULL,
`phone` varchar(25) DEFAULT NULL, `fax` varchar(25) DEFAULT NULL,
`street` varchar(255) DEFAULT NULL, `city` varchar(25) DEFAULT NULL,
`zip` int(5) DEFAULT NULL,`country` varchar(30) DEFAULT NULL,
`website` varchar(150) DEFAULT NULL,`about` varchar(255) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `websites` (`qrcode_id` int(11) NOT NULL,
`name` varchar(30) DEFAULT NULL,`link` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

66. 56
CREATE TABLE `scans` (`id` bigint(20) NOT NULL,
`os` varchar(20) DEFAULT NULL,`browser` varchar(20) DEFAULT NULL,
`ipAdress` varchar(45) NOT NULL, `uniqueUserId` varchar(255) NOT NULL,
`counter` int(11) NOT NULL DEFAULT '0', `qrcode_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Conclusion
Dans ce chapitre, nous avons réussi à réaliser une conception complète et détaillée
des cas d’utilisation non prioritaire, du diagramme de classes qui nous a permis de
générer et présenter le script de base de données.
Dans ce qui suit, nous allons présenter la dernière phase du processus unifié qui
consiste à connaitre l’environnement matériel et logiciel, ainsi que l’architecture
adoptée contribuant à la réalisation du projet.

67. 57
Chapitre VI : Transition
Introduction
Après avoir achevé la phase de construction, nous allons entamer dans la partie
transition dans laquelle on doit s’assurer que l’application soit prête à être livrée et
utiliser.
On se préoccupera ainsi, de l’exploitation de l’environnement logiciel de l’application,
par la suite nous allons faire une démonstration de quelques interfaces.
1. Environnement de travail
Pour mettre en œuvre une application complète et prête à être exploité par les
utilisateurs finaux, il existe de nombreuses technologies et solution techniques. Voici
quelques-unes que nous avons utilisées pour cette fin.
1.1.Environnement matériel
HP Pavillon G6
➢ Processeur : i3-2370M 2.40 GHz
➢ Disque Dur : 500 GO
➢ RAM : 4 GO
➢ Système d’exploitation : Windows10
Tableau 23 : Environnement Matérielle

68. 58
1.2.Environnement Logiciels
Outils de Conception
PowerAMC
PowerAMC est un logiciel de modélisation. Il
permet de modéliser les traitements
informatiques et leurs bases de données
associées. Créé par SDP sous le nom
AMC*Designor, racheté par Powersoft, ce logiciel
est produit par Sybase depuis le rachat par cet
éditeur en 1995. [3]
PowerAMC permet de réaliser tous les types de
modèles informatiques. [3]
Tableau 23 : Outils de Conception
Outils de développement
Outils de Développement
PHP Storm : est un environnement de développement
(IDE pour integrated development environment) conçu
pour PHP, développé par la société JetBrains s.r.o.
depuis 2009. Écrit en Java, il permet d'éditer du code
en PHP, en HTML et en JavaScript. [4]
MySQL est un système de gestion de base de données
relationnelle (SGBDR) open source basé sur SQL
(Structured Query Language). [5]
MySQL fonctionne sur presque toutes les
plateformes et tout type d’application. Il s’agit d’un
SGBDR le plus connu et utilisés. [5]
Tableau 24 : Outils de développement

69. 59
Langage de programmation
PHP
PHP est un langage interprété qui a été conçu dès son
origine pour le Web. Il est aujourd’hui devenu le leadeur
incontesté dans ce domaine. Plus de 9 millions de sites
l’ont aujourd’hui choisi comme plateforme de
développement web.[6]
Tableau 25 : Langage de programmation
Framework
CaKePhp
CakePhp est un Framework de développement
rapide pour PHP, gratuit, et open source. C’est
un ensemble de briques élémentaires pour les
programmeurs qui créent des applications
web. Notre objectif principal est de vous
permettre de travailler de manière rapide et
structurée, sans toutefois perdre en flexibilité.
[7]
AngularJs est une plateforme de développement
pour créer des applications en utilisant les standards
du web modernes. Angular comprend une foule de
caractéristiques essentielles telle que les gestures
mobiles, les animations, le filtrage, le routage, la
liaison de données, la sécurité, l'internationalisation,
et de beaux composants d'interface utilisateur. Il est
extrêmement modulaire, léger et facile à apprendre.
[8]

70. 60
Bootstrap, c'est d'abord un Framework CSS
proposé par Twitter sous la licence apache.
C'est-à-dire que vous pouvez l'utiliser comme
vous le souhaitez, que ce soit commercial ou
non. [9]
Tableau 26 : Framework
2. Architecture
2.1.Architecture Physique
Nous avons utilisé dans notre application l’architecture 3 tiers. Dans cette
architecture, le client est constitué d’un simple navigateur internet et
communique avec le serveur. Elle est composée de trois éléments ou trois
couches. La couche présentation ou affichage est le client « léger » dans la
mesure où il ne fait aucun traitement. [10]
La couche fonctionnelle ou métier est en général un serveur Web. Et enfin, la
couche de données est liée au serveur de base de données(SGBD). [10]
Figure 50 : Les différentes couches de l’architecture 3-tiers
La couche présentation (de premier niveau) souvent appelée IHM (Interface
Homme Machine) correspond à la partie visible et interactive. Cette partie est
réalisée pour le web en HTML en général avec JavaScript, Flash… [10]

71. 61
La couche métier (de second niveau) correspondant à la partie fonctionnelle
de l’application. Les opérations à réaliser, les fonctions d’accès aux données et
les traitements sont mis à la disposition des utilisateurs et invoqués par leurs
requêtes. Pour fournir ces services, elle s’appuie parfois sur la couche accès
aux données et en retour renvoie à la couche présentation les résultats qu’elle
a calculés. [10]
La dernière couche (de troisième niveau) gère l’accès aux données du
système. Ces données peuvent être stockées sur le même système (fichiers,
fichiers XML, Base de données, images… ou sur d’autres systèmes. L’accès
aux données est transparent pour la couche métier et correspond uniquement
à la préoccupation de la couche accès aux données. [10]
2.2.Architecture Technique
Pour l’élaboration de cette application, nous avons utilisé l’architecture MVC
(Model Vue Controller). [11]
L’architecture MVC proposée par SUN est une architecture permettant de
séparer la partie présentation dans une application web. [11]
Dans l’architecture MVC :
Le Model en MVC : représente essentiellement les données ou les informations.
Il représente également le logique métier qui est appliqué pour accéder et
modifier la base des données. [12]
Le View représente la IHM (Interface Homme Machine). Il communique avec
Controller pour envoyer les « user gestures », qui est une communication basée
sur l’évènement. La communication se produit lorsque l’utilisation clique sur un
"bouton" ou frappe une touche "retour". [12]
Controller : fournit le comportement de l’application. Il contrôle le traitement
des actions utilisateur, un évènement se déclenche chaque fois qu’une action
est réalisée. [12]
3. Interfaces de l’application
Dans cette partie, nous présentons quelques interfaces de notre application.

72. 62
Figure 51 : Interface d’inscription
Cette figure présente l’interface d’inscription :
Chaque internaute veut s’inscrire doit remplir les champs du formulaire et valide.
Figure 52 : Interface d’authentification
Après l’inscription l’interface d’authentification s’affiche et message demandant la
vérification du mail apparaitre pour confirmer l’inscription.

73. 63
Figure 53 : Interface d’authentification
Cette figure présente l’interface d’authentification :
Chaque Abonné introduit son login et mot de passe et valide pour accéder à son
espace personnel.
Figure 54 : Interface profil
Cette interface présente toutes les informations personnelles d’un abonné. Il est
possible de les modifier en changeant les valeurs des champs et cliquer sur « save ».
Il est aussi possible de modifier la photo de profil avec un simple clic sur la photo et la
modification du mot de passe en suivant le lien « change password ».

74. 64
Figure 55 : Interface reset password
Au cas où l’abonné ne peut plus s’accéder à son espace personnel lors
d’authentification, il peut suivre le lien « forgot password »
Cette figure présente l’interface reset password où l’utilisateur peut introduire son
mail et valide.
Le système envoie un mail à l’email introduit pour changer le mot de passe
Figure 56 : Interface boite email de l’abonné
Cette interface est une démonstration d’un email de demande de modification du mot
de passe.

75. 65
Figure 57 : Interface « Changer Mot de passe »
Dans cette interface l’abonné peut introduire son nouveau mot de passe et valide
Figure 58 : Interface créer QR Code
Pour générer son QR Code L’abonné choisie le type de QR Code à générer dans une
première étape.
Les données se diffèrent selon le type du QR Code disponible (vCard, App, Website,
etc.).

76. 66
Figure 59 : Interface Vcard
Cette interface présente la deuxième étape de création de création de création du QR
Code. Dans cette étape, l’abonné remplit les champs du formulaire par les informations
à stocker dans le QR Code et les valides en cliquant sur « suivant ».

77. 67
Figure 60 : Interface Vcard : personnalisation de design
Pour finir la création ou la génération du QR Code l’abonné peut définir la couleur du
background du QR Code ainsi que sa couleur. Il peut aussi ajouter un label.

78. 68
Figure 61 : Interface Mange
Cette figure présente l’ensemble des QR Codes créer par l’abonné.

79. 69
Figure 62 : Interface Mange
L’abonné peut voir le nombre de scan, modifier le continu ou design, télécharger ou
archiver un ou plusieurs QR Code
Figure 63 : Interface Mange
Dans cette interface les QR Code sont présentés sous forme d’une liste.

80. 70
Figure 64 : Interface Archive
Cette figure présente l’interface Archive dans laquelle tous les QR Codes non utilisés
sont archivés.
L’abonné peut les réutiliser ou les supprimer définitivement.
Conclusion
Dans ce dernier chapitre, nous avons présenté, tout d’abord, l’environnement de travail
utiliser pour la réalisation de projet. Ensuite, nous avons illustré et testé quelques
interfaces de notre application.

81. 71
Conclusion et Perspective
Ce rapport est le fruit d’un travail réaliser durant un stage au sein de la société
Galactech Studio pour un projet de fin d’études qui a pour objectif la génération des
QR codes et la permission de sa personnalisation d’une manière dynamique.
En élaborant ce projet, nous avons présenté, en premier lieu, le cadre du projet, ainsi
que les différents besoins, les acteurs et les risques de future application tout en
mettant on œuvre la méthodologie et le modèle de conception utilisée. Par la suite,
nous sommes penchés sur une analyse approfondie des besoins dégager dans une
première phase pour qu’on puisse réaliser une conception fiable. Cette analyse nous
a permis de comprendre le système et d’enchainer la réalisation.
Au terme de ce projet, nous avons réalisé les fonctionnalités de base utiles à chaque
abonné. D’autre fonctionnalités peuvent être ajoutées afin d’optimiser l’application,
notamment, la personnalisation des modules des QR Codes (Ajout du logo,
personnalisation de la forme des modules du QR Code, etc.) et la gestion
d’abonnement (payement électronique), l’ajout de scan en ligne, la création d’une
application Android de générateur de QR Code .
Ce projet est une opportunité pour découvrir et s’intégrer dans le monde de
professionnelle et d’améliorer les compétences en programmation web. La réalisation
de ce projet présente une formidable expérience humaine, grâce au contact avec
l’équipe de l’entreprise qui nous ont prodigué leurs conseils et nous font bénéficier de
leurs expériences.

82. 72
Bibliographie
[1] I.Jacobson, G.Booch and J.Rumbaugh. « Le processus unifié de développement
logiciel ». Édition Eyrolles,23 juin 2000.
[2] Pascal Roques. « UML 2 Modéliser une application web ». 3e édition Eyrolles.
[10] Jérôme Lafosse. « Java EE Guide de développement d’application web en java ».
Éditions ENI, Février 2009.
[11] Benjamin Aumaille. « J2EE Développement d’applications Web ». Édition ENI,
Mars 2002.
[12] B.V.Kumar, S.Sangeetha and S.V.Subrahmanya. « J2EE Architecture an
illustrative gateway to entreprise solutions: Concepts to Application Design and
Deployment». Édition Tata McGraw-Hill publishing Company 2007.

83. 73
Webographie
[3] http://www.techno-science.net/?onglet=glossaire&definition=764 Consulter le
11/05/2017.
[4] https://www.video2brain.com/fr/phpstorm .Consulter le 11/05/2017
[5] http://searchenterpriselinux.techtarget.com/definition/MySQL. Consulter
le 11/05/2017.
[6]https://books.google.tn/books?id=QSNCPOn3hDgC&pg=PA22&dq=php+gratuit&hl
=fr&sa=X&ved=0ahUKEwiv39zH9J3TAhXF6xQKHWtCBckQ6AEIFzAA#v=onepage&
q=php%20gratuit&f=false. Consulter le 11/05/2017.
[7] https://book.cakephp.org/1.3/fr/The-Manual/Beginning-With-CakePHP/What-is-
CakePHP-Why-Use-it.html . Consulter le 13/05/2017.
[8] https://devlopez.blogspot.com/2015/09/angularjs-definition-et-utilisation.html .
Consulter le 13/05/2017
[9] http://www.mathieurobin.com/2011/10/twitter-bootstrap-framework-css-js/
Consulter le 11/05/2017.