Rapport de stage de fin d'études Application web de E-commerce

1. Ecole Polytechnique Méditerranéenne Privée De Tunis
Département Informatique
PROJET DE FIN D’ÉTUDES
Présenté en vue de l’obtention du Diplôme de Licence en Génie
Informatique
Spécialité : Développement des systèmes d’Informations
Conception et développement d’une application
web de gestion de produits (site E-commerce)
Réalisé par :
SOW Abdellatif Hamadi
DENDE Yannick
Encadré par :
Mr Mohamed RJAB
Année universitaire : 2020/2021

2. Remerciement
Au terme de ce travail, Nous avons le plaisir d’exprimer nos sincères
remerciements à nos encadrants pour leur appui continu durant toute la période
du projet. En effet, leurs conseils, leur aide précieuse, leur soutien, leur
bienveillance et leurs encouragements continus ont été pour nous des ressources
essentielles à la réalisation de ce travail.
Nos remerciements s’adressent aussi aux membres de jury qui nous ont
accorder d’évaluer et de juger ce travail.
Nous sommes également reconnaissants envers tous nos professeurs qui nous
ont offert de précieux conseils tout au long de notre parcours universitaire.
Enfin, nous tenons à exprimer nos vifs remerciements et notre grande gratitude à
tous ceux qui ont bien voulu apporter l’assistance nécessaire au bon déroulement
de ce projet.

3. Dédicaces
Je dédie cet ouvrage A mes chers parents Cyrille Dende et Mireille Womumu, Vous
avez su m’inculquer le sens de la responsabilité, de l’optimisme et de la confiance en soi et
surtout en Dieu face aux difficultés de la vie et à ma famille, mes chères frères & sœurs, pour
tour votre amour vrai qui me donne la joie de vivre, vous occupez une place particulière dans
mon cœur Christian, Judith, Fabrice, Patrick, Merveille, Noëlla, Fortune.
A ma grande famille de Tunis, je cite : Carmel, Jordan, Nathan, Jonathan, Herve, Toussaint
& Platini Iloko, Boniface, , Anifa, Ange, Ruth, Jemima Bukasa, Maria, Jemima lunya, Sarah,
Grace, Mido, Ketsia, Rabbi, Neville, Cathy, Angelos, Smille, Hubert, Arnold, Bénie, Romeo &
Costa Kiope, Ben & Chris Eyeya, John, Jonathan bandaka et à mon amie Emavie TinaTshepela
ton soutien a été immense et très heureux vous avoir connue.
DENDE YANNICK
Avec l’expression de ma reconnaissance, je dédie ce modeste travail à ceux qui, quels que
soient les termes embrassés, je n’arriverais jamais à leurs exprimer mon amour sincère.
A l’homme, mon précieux offre d’Allah, qui doit être de ma vie, réussite et tout mon
respect : mon cher père SOW Hamadi Samba.
A la femme qui a souffert sans me laisser souffrir, qui n’a jamais dit non à mes exigences
et qui n’a épargné aucun effort pour me rendre heureuse mon adorable mère Mariem Abdoul
BA.
A mon petit frère et mes chères sœurs qui n’ont pas cessée de me conseiller Qu’Allah les
protègent et leurs offre la santé et du bonheur.
A mes amis et collègues c’est toujours favorable de partager ce moment jovial avec vous.
A toute l’administration et enseignants au sein de MIT polytechnique qui sont toujours là
à répondre à nos besoins et services tel que : Mme wafa Amri, Mr Mohamed Rjab, Mme Imen
ben Amor, Mme Ahlem, Mr Salah, Mme Sonia, Mme Youssra, Mme Houda, Mme Nesrine,
Mme zikra et aussi mon cher binôme Yannick pour la patience tout au long du projet.
ABDELLATIF HAMADI SOW

4. Table des matières
Remerciement 2
Dédicaces 3
Liste des figures 7
Introduction générale 10
Présentation du contexte général du projet et étude de l’existant 11
Introduction 12
1. Cadre général 12
2. Organisme d’accueil 12
2.1. Présentation de l’organisme 12
Partenariat avec les réseaux professionnels : 13
Les objectifs de partenariat : 13
2.2. Domaine d’activité 14
2.3. L’organigramme 14
3. Présentation du sujet 15
4. Démarche à suivre 16
5. Analyse de l’existant 17
5.1. Etude de l’existant 17
5.2. Description de l'existant 17
5.3. Critique de l’existant 17
6. Solution proposée 17
a) Offrir une vitrine supplémentaire en ligne pour les produits 18
b) Développer une nouvelle clientèle 18
c) Proposer une gamme de produits plus large 18
d) Assurer les ventes 24h/24 et 7j/7 18
e) Réduire les couts 18
f) Créer une base de données de clients 19
Conclusion 19
Chapitre II : 20
Analyse et spécifications des besoins 20
Introduction 21
1. Méthodologie de conception UML 21
2. Identification des acteurs 21
3. Capture des besoins 22
3.1 Besoins fonctionnels 23

5. 3.1.1 Définition des besoins fonctionnels 23
3.1.2. Modélisation du diagramme des cas d’utilisations général 24
3.1.3. Raffinement des cas d’utilisation 25
A. Raffinement du cas d’utilisation « S’authentifier » 25
B. Raffinement du cas d’utilisation « Gestion utilisateur » 26
C. Raffinement du cas d’utilisation « Gestion des articles » 29
D. Raffinement du cas d’utilisation « Gestion catégorie » 29
E. Raffinement du cas d’utilisation « Gestion du commande » 30
F. Raffinement du cas d’utilisation « Consulter liste des produits » 30
G. Raffinement du cas d’utilisation « Passer une commande » 31
3.2. Besoins Non fonctionnels 33
Conclusion 33
Chapitre III : 34
Conception 34
Introduction 35
1. Modélisation des diagrammes de classes 35
2. Modélisation des diagrammes de séquences système 38
2.1 Diagramme de séquence « Authentification » 38
2.2 Modélisation de diagramme de séquence système « Ajouter un compte » : 39
2.3 Modélisation de diagramme de séquence système « Supprimer un compte » 40
2.4 Modélisation de diagramme de séquence système « passer une commande » 41
Conclusion 42
Chapitre IV : 43
Réalisation et Implémentation 43
Introduction 44
1. Environnement de travail 44
1.1. Environnement matériel 44
1.2. Environnement logiciel 45
1.2.1. Logiciel de modélisation 45
1.2.2. Logiciels de développement 45
a) Visual Studio Code 45
b) Symfony 46
c) Composer 46
1.2.3. Langages utilisés 46
a) HTML 46

6. b) CSS 47
c) PHP 47
a) MySQL 48
2. Interfaces de l’application 48
2.1. Interface d’authentification 48
2.2. Interface espace admin 49
2.3. Interface espace responsable 49
2.4. Interface espace Client 50
2.5. Interface inscription client : 51
2.6. Interface gestion utilisateur 51
2.7. Interface gestion article 52
2.8. Interface gestion catégorie 52
2.9. Interface gestion commande 53
2.10. Interface passage commande 54
Conclusion 54
CONCLUSION GENERALE 55

7. Liste des figures
Figure 1 : Organigramme de l’EPM ........................................................................................................ 15
Figure 2 : logo du langage UML ...............................................................................................................21
Figure 3 : diagramme de cas d’utilisations général ...................................................................................25
Figure 4 : Diagramme de cas d’utilisation raffiné « S’authentifier » ........................................................26
Figure 5 : Diagramme de cas d’utilisation raffiné « Gestion utilisateur » .................................................27
Figure 6 : Diagramme de cas d’utilisation raffiné « Gestion article » .......................................................29
Figure 7 : Diagramme de cas d’utilisation raffiné « Gestion catégorie » ..................................................30
Figure 8 : Diagramme de cas d’utilisation raffiné « Gestion commande » ...............................................30
Figure 9 : Diagramme de cas d’utilisation raffiné « Consulter liste des produits » ..................................30
Figure 10 : Diagramme de cas d’utilisation raffiné « Passer une commande » ........................................31
Figure 11 : Diagramme de cas d’utilisation raffiné « s’inscrire » .............................................................32
Figure 12 : Diagramme de classes .............................................................................................................36
Figure 13 : Diagramme de séquence « Authentification » ........................................................................39
Figure 14 : Diagramme de séquence « Ajouter un utilisateur » ................................................................40
Figure 15 : Diagramme de séquence « Supprimer un compte » ................................................................41
Figure 16 : Diagramme de séquence « Passation d'une commande » ........................................................42
Figure 17 : propriétés du système ..............................................................................................................44
Figure 18: Logo Draw.io ….......................................................................................................................45
Figure 19 : Logo Visual Studio Code .........................................................................................................45
Figure 20 : Logo Symfony…......................................................................................................................46
Figure 21 : logo de Composer.....................................................................................................................46
Figure 22 : logo de HTML……………......................................................................................................47
Figure 23 : logo de CSS ………...…….......................................................................................................47
Figure 24 : logo de PHP …........................................................................................................................47
Figure 25 : Logo MySQL ..........................................................................................................................48
Figure 26 : Interface d’authentification .....................................................................................................48
Figure 27 : Espace administrateur .............................................................................................................49

8. Figure 28 : Espace administrateur ..............................................................................................................49
Figure 29 : Interface des catégories ...........................................................................................................50
Figure 30 : Formulaire d’inscription ..........................................................................................................51
Figure 31 : Interface de gestion des utilisateurs .........................................................................................51
Figure 32 : Interface de gestion des articles ................................................................................................52
Figure 33 : Interface de gestion des catégories ............................................................................................52
Figure 34 : Interface de gestion des commandes ..........................................................................................53
Figure 35 : Interface de passage de commandes ............................................................................................54

9. Liste des tableaux
Tableau 1 : Raffinement CU « S’authentifier » ......................................................................................26
Tableau 2 : Raffinement CU « Ajouter un utilisateur » ..................................................................................27
Tableau 3 : Raffinement CU « Modifier un utilisateur » ................................................................................28
Tableau 4 : Raffinement CU « Supprimer un utilisateur » .............................................................................28
Tableau 5 : Raffinement CU « Consulter un utilisateur » ...............................................................................29
Tableau 6 : Raffinement CU « Consulter liste des produits » .........................................................................31
Tableau 7 : Raffinement CU « Passer une commande » .................................................................................32
Tableau 8 : Raffinement CU « S’inscrire » ......................................................................................................32
Tableau 9 : " Dictionnaire des données " .........................................................................................................37

10. 10
Rapport PFE 2021
Introduction générale
L’informatique représente l’évolution la plus importante et la plus innovante qui a marqué
le monde entier. Elle vient nous apporter de multiples choses pour faciliter notre mode de vie.
Aucun domaine n'est resté étranger à cette stratégie qui offre tant de services aussi bien pour la
communication et le marketing pour notre projet de fin d’études. Le e-commerce désigne
l’échangent commerciales qui se fait au niveau des media électronique. Les débuts et le progrès
du commerce électronique sont extrêmement liés au développement et à la généralisation
d'Internet. Revenons tout d'abord au début du e-commerce, il n'existe pas de date précise
concernant le lancement de ces activités commerciales sur Internet ou autres médias.
Cependant, une certitude reste présente, c'est que la création et le développement du
commerce électronique sont liés à des évolutions techniques du réseau, à l’avancement de la
vente à distance, mais aussi, à l'évolution même de la société et à son ouverture sur les nouvelles
technologies.
Notre rapport décrivant le travail réalisé durant ce projet de fin de formation comporte trois
chapitres. Ce rapport est reparti comme suit :
Dans le premier chapitre, nous allons présenter l’entreprise d’accueil et introduire l’étude
préalable. Dans le deuxième chapitre nous allons effectuer une analyse des différents besoins
concentrant sur la spécification des besoins notamment fonctionnels, cela nous permettra
d’identifier les différentes fonctionnalités de l’application qui seront détaillées par les
diagrammes de cas d’utilisation et consacrées à l’étude conceptuelle de la solution retenue.

11. 11
Rapport PFE 2021
Chapitre I :
Présentation du contexte
général du projet et étude de
l’existant

12. 12
Rapport PFE 2021
Introduction
Dans ce chapitre, nous mettons notre travail dans son contexte général. D’abord, nous
exposerons le cadre général de notre projet. Ensuite, nous présentons l’organisme d’accueil,
son historique, son organigramme, ses ressources ainsi que ses différentes missions. Enfin, nous
allons étudier l’existant, le critiquer et finir par donner la solution proposée.
1. Cadre général
Le présent projet est réalisé dans le cadre de la préparation du projet de fin de formation,
présenté en vue de l’obtention du diplôme License en Génie informatique pour l’année
universitaire 2020/2021.
2. Organisme d’accueil
2.1. Présentation de l’organisme
EPM, Fondée en 2011 en collaboration avec le réseau euro-méditerranéen pour
l’enseignement et la recherche en économie et en gestion, a été agréée par l’Etat sous le numéro
N° 03-2013 en 2013.
L’idée d’EPM a été l’émanation d’un groupe d’enseignants ayant une grande expérience
dans le domaine de l’enseignement public et privé et dans l’industrie. L’objectif est de former
des ingénieurs polyvalents dans différents domaines technologiques avec les qualités
scientifiques, techniques et humaines qui répondent aux exigences du marché de l’emploi
national et international. EPM propose outre le cycle préparatoire, des cycles d’ingénieurs et
des filières diversifiées comme le Génie Informatique, Génie Industriel et logistique, Génie
Mécanique, Génie Civil, Génie Electrique, Mécatronique et des mastères professionnels tels
qu’audit et efficacité énergétique, Développement des systèmes d’informations, etc. Les cours
sont assurés en Français avec des options en Arabe et en anglais. Dans un monde où les
nouvelles technologies de l’information, de production et de gestion ne cessent d’évoluer, la
formation d’ingénieurs de haute compétence devient plus qu’une nécessité, un enjeu
stratégique. L’EPM, pluridisciplinaire, couvre les domaines d’études : cycle préparatoire et
cycle ingénieur, licences professionnelles, masters professionnels et des collaborations avec le
groupe méditerranéen dans le domaine de la gestion. [1]

13. 13
Rapport PFE 2021
Largement ouverte sur son entourage socio-économique, l’Université Méditerranéenne n’a
cessé d’œuvrer pour encourager le développement durable et être en harmonie avec les défis de
la mondialisation.
Le rapprochement entre l’université et le secteur économique national et international est
désormais une réalité objective un challenge une stratégie de l’Université Méditerranéenne pour
la mise en œuvre des projets prometteurs. Ainsi, plusieurs accords-cadres ont été signés avec
des entreprises d’envergure nationale et internationale. D’autre part, le Partenariat Université-
Entreprise est devenu l’un des thèmes prioritaires dans un contexte économique en pleine
mutation La volonté d’ouverture de l’UM vers le monde s’est traduite aujourd’hui par la
signature de plusieurs conventions cadres de coopération avec des établissements universitaires
de plusieurs pays (France, Canada, Tunisie etc.…). Ces accords ont été conçus pour faciliter les
échanges scientifiques. L’UM vise à construire des passerelles d’échanges d’expériences et de
compétences mais aussi l’amélioration des méthodes pédagogiques, booster la recherche
scientifique et d’ériger un réseau de coopération solide et pérenne
Partenariat avec les réseaux professionnels :
L’Université Méditerranéenne possède de nombreuses conventions de partenariats
académiques et professionnels nationales et développent une pédagogie active et travaillent en
étroite collaboration avec des associations et organismes professionnels. Ainsi, elle participe à
l’évolution des métiers dans les différentes disciplines au sein de son groupe et elle offre aux
étudiants une participation aux différents programmes professionnels et surtout une
reconnaissance des réseaux professionnels
Les objectifs de partenariat :
a) Organiser des visites pour nos étudiants aux entreprises.
b) Présenter les formations de l’université par secteur d’activité.
c) Avoir des Enquêter auprès des services concernés pour identifier leurs besoins en
compétences.
d) Analyser et consolider les besoins de l’entreprise en formation continue.
e) Elaborer les cahiers des charges en collaboration avec l’entreprise.
f) Proposer un plan d’action et le faire valider par l’entreprise.

14. 14
Rapport PFE 2021
g) Evaluer nos formations et les relier avec le besoin du monde industriel.
h) Formations de haute qualité dans les différentes spécialités.
i) Organiser des journées entreprises.
j) Faciliter la recherche des stages et des PFE pour les étudiants. [2]
2.2. Domaine d’activité
L'Entreprise D-Shop est une société de commercialisation des produits électroniques et de
l’électroménager.
2.3. L’organigramme
L’organigramme est une représentation schématique des liens fonctionnels,
organisationnels hiérarchiques d’une entreprise. Il sert ainsi à donner une vue d’ensemble de la
répartition des postes et des fonctions au sein d’une structure.
a) L’administrateur : c’est l’employé qui occupe le rang le plus élevé dans la
direction d’une organisation, que ce soit une entreprise, un organisme à but non
lucratif ou une entité publique ou parapublique.
b) Le responsable : c'est le subordonné de l'administrateur. Il a l'autorisation de
faire les taches de l'administrateur sauf la gestion des utilisateurs.
La figure ci-dessous représente l’organigramme de la société D-Shop.

15. 15
Rapport PFE 2021
Figure 1 : Organigramme de l’EPM
3. Présentation du sujet
Dans le cadre de ce projet, nous allons créer un site de ventes en ligne, connu également
sous le nom de site e-commerce ou encore boutique en ligne, en effet un site Internet dynamique
sur lequel une entreprise expose ses produits et/ou services.

16. 16
Rapport PFE 2021
L'internaute est mis en dispositions à fonctionnalités facile pour faire sa sélection, partager
des informations, et passer des commandes directement via le site, nous allons alors développer
un site e-commerce offrant les fonctionnalités suivantes :
a) La gestion des comptes clients.
b) La gestion des produits.
c) La gestion des tarifs, des remises et des promotions.
d) La gestion de stock en temps réel.
e) La gestion d'un panier virtuel.
4. Démarche à suivre
La démarche adoptée est découpée en des étapes selon un cycle de vie similaire avec
l’application. Le cycle de vie suivi pour réaliser un site e-commercial, comprend généralement
les activités suivantes :
a) Etude de l’existant : cette étape est réalisée avant l'initialisation du changement et elle
permet de préparer l'analyse de toutes les besoins nécessaires de la solution cible et de
réaliser l'analyse des écarts.
b) Spécification des besoins : Elle consiste à définir la finalité du projet et son intégration
dans une stratégie globale.
c) Conception générale : dans cette activité, il s'agit de la préparation de l'architecture
générale du logiciel.
d) Conception détaillée : elle consiste à définir précisément chaque sous-ensemble du
logiciel.
e) Développement (Implémentation ou programmation) : il s’agit d’une traduction de
toutes les fonctionnalités définies dans la phase de conception en langage de
programmation.
f) Tests unitaires : Ils permettent la vérification individuelle que chaque sous ensemble
du logiciel est implémenté conformément aux normes définies dans la conception.
g) Intégration : dite aussi tests systèmes, elle consiste la vérification de la correspondance
exacte du logiciel au cahier des charges du projet en obtenant enfin un manuel
d’utilisation bien détaillé aux utilisateurs.
h) Validation : C'est-à-dire la validation de conformité du site avec les buts spécifiés à la
première étape du cycle de vie.

17. 17
Rapport PFE 2021
5. Analyse de l’existant
5.1. Etude de l’existant
L’étude de l’existant est une phase importante pour la compréhension du système actuel et
définir ses objectifs. Il s’agit d’une étude de l’existant suivie de critique permettant un projet de
présenter une amélioration résument la solution retenue.
5.2. Description de l'existant
Comme toutes les sociétés commerciales, D-Shop possède sa manière de présenter et de
commercialiser ses produits. Cette manière est divisée en deux étapes principales, la première
étape c’est l’exposition des produits par des affiches publicitaires, des dépliants, aussi par des
vitrines, la deuxième étape parle sur les ventes des produits à guichet ou par l’intermédiaire des
agents commerciaux.
5.3. Critique de l’existant
Depuis sa mise en place, la procédure existante atteint ses objectifs avec une fréquence
limitée et non extensible, voir qu’elle ne concerne qu’un nombre limité des clients qui sont très
proches de la société pour pouvoir voir les vitrines, voir les produits exposés et connaitre leurs
prix, disponibilité et caractéristiques. Tout ça représente une entrave devant la
commercialisation des produits.
6. Solution proposée
Afin de pallier aux défaillances, nous proposons d’informatiser la commercialisation de nos
produits en créant une boutique virtuelle sur Internet.
Il nous est indispensable de préciser à cette étape que notre projet de fin d’étude prendra en
évidence toutes ces contraintes en essayant d’élaborer les solutions disponible tout en respectant
les règles d’un site web tels que la simplicité d’utilisation entre les pages, une ergonomie fiable
et la sécurité des données confidentielles des clients.
Les apports de notre projet sont les suivants :

18. 18
Rapport PFE 2021
a) Offrir une vitrine supplémentaire en ligne pour les produits
Le site e-commerce développé donne davantage de visibilité aux produits de l’entreprise D-
Shop, à ses services et à ses actualités. Il permet aux internautes d’effectuer leurs achats en
ligne.
b) Développer une nouvelle clientèle
Notre site e-commerce permet à la société d’ouvrir logiquement la zone de chalandise à
d'autres territoires. Une vitrine en ligne sans frontière, qui lui permet d’ancrer localement tout
en développant son activité à plus grande échelle.
En effet, ses produits peuvent être visibles dans le monde entier : de quoi fidéliser la
clientèle étrangère qui passe dans cette boutique virtuelle tout en renforçant le marché local.
c) Proposer une gamme de produits plus large
L’un des avantages de notre boutique en ligne, c’est qu’elle offre la possibilité de proposer
une gamme de produits beaucoup plus importante que dans la boutique physique.
d) Assurer les ventes 24h/24 et 7j/7
Notre plateforme e-commerce permet de proposer des produits à la vente à n’importe quelle
heure du jour ou de la nuit. Une aubaine pour les clients de la société, qui n’ont alors plus besoin
de se déplacer pour acheter, et peuvent le faire où et quand bon leur semble !
e) Réduire les couts
Contrairement à une boutique physique, pour laquelle la société doit payer un loyer, des
charges de fonctionnement, des frais de personnel, les charges associées à une activité e-
commerce sont réduites. Les coûts de transaction sont moins importants, les intermédiaires sont
moins nombreux, donc la société peut pratiquer des prix plus attractifs par le biais du site
développé.

19. 19
Rapport PFE 2021
f) Créer une base de données de clients
Grâce aux données récoltées via les ventes en ligne (adresses e-mail, postales, numéros de
téléphone, profils complets, etc.), La société connait davantage ses clients. Cela lui permettra
de leur proposer des actions en fonction de leur parcours d'achat ou des promos selon les
produits qu'ils ont achetés.
L’évolution de la technologie a laissé entrevoir de nouvelles perspectives dans divers
domaines dont le plus évolutif est celui du web et son utilisation dans tous les secteurs. Chacune
de ces innovations dans ce domaine essaie d’offrir à son tour, de nouvelles solutions pour
contribuer au besoin de l’utilisateur. En effet, de nos jours, les chercheurs et les investisseurs
cherchent avec tous les moyens, à trouver des solutions adéquates pour les utilisateurs et encore
améliorer une solution déjà existante.
Dans ce cadre, et afin de surmonter les problèmes rencontrés par la société D-Shop dans la
commercialisation de ses produits, nous allons informatiser son processus de ventes de produit
en développant pour son compte un site e-commerce de ventes en ligne.
En conclusion, ce projet a pour objectif de diriger et mettre les gens vers le bon choix lors
d'achats d'articles à travers les fiches techniques détaillé et compréhensif, ainsi que la simplicité
de commerce à travers le visionnage de l'article n'importe où. C'est à dire, développer une
application web qui permet de mettre en disposition tous les articles d'une manière simple,
compréhensif, facile et accessible pour tout le monde.
Conclusion
Dans ce chapitre, nous avons présenté le cadre général du projet, l’organisme d’accueil et
nous avons étudié l’existant et ses différentes anomalies afin de faire une étude critique des
différentes solutions disponibles, pour enfin exposer notre solution et les fonctions générales
qu’elle offre. L’importance de ce chapitre réside dans l’introduction aux besoins fonctionnels
et non fonctionnels qui seront développés dans le prochain chapitre.

20. Chapitre II :
Analyse et spécifications des
besoins

21. 21
Rapport PFE 2021
Introduction
Afin de proposer une solution adéquate, il nous faudra bien faire l’étude des besoins du
client, et ceci en recensant les besoins fonctionnels et en appréhendant la liste des exigences
traduites par les besoins non fonctionnels. Ceci se fera par la suite d’une identification d’acteurs
et la définition de tous les besoins qui seront modélisés par le diagramme de cas d’utilisation
général.
1. Méthodologie de conception UML
UML (Unified Modeling Langage) est un langage d'analyse et de conception orienté objet
défini par l'OMG (Object Management Group) et aussi considéré comme une méthode
permettant la mise en schéma structuré de la relation entre divers systèmes (client-serveur, par
exemple) dans un cahier des charges et ça permet la découpe de différentes parties à coder.
UML utilise des diagrammes pour représenter chaque aspect d'un système c’est-à-dire
statique, dynamique, etc., en s'appuyant sur la notion d'orienté objet qui est un véritable atout
pour ce langage.
UML étant le résultat de la fusion de précédents langages de modélisation objet : Booch,
OMT, OOSE principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar
Jacobson, UML est à présent un standard adopté par l'OMG et le langage de modélisation le
plus répandu mondialement. [3]
Figure 2 : logo du langage UML
2. Identification des acteurs
La première étape de modélisation consiste la définition du périmètre du système, à définir
le contour de l’organisation et à le modéliser.
Un acteur est un type qui représente une abstraction qui réside juste en dehors du système
à modéliser.

22. 22
Rapport PFE 2021
Un acteur représente un rôle joué par une personne ou une chose qui interfère avec le
système (La même personne physique peut donc être représentée par plusieurs acteurs en
fonction des rôles qu’elle joue).
Nous distinguons trois acteurs qui interagissent avec l’application :
a) L’administrateur :
L'administrateur est l'acteur principal du système, il a le droit d’accéder à toutes les
rubriques de l‘application.
b) Le responsable :
Le responsable a la permission d’accéder à toutes les fonctionnalités de l’application sauf
la gestion des comptes.
c) Le client :
Le client aura l'accès de consulter le site web qui contient les différentes catégories et
articles ainsi que le passage des commandes.
3. Capture des besoins
L’étude faite durant la phase de pré analyse sert généralement de point de départ pour décrire
sans ambiguïté l’application à développer. C’est pour cela il est fondamental, au cours de ces
phases, de déterminer l’adéquation entre les besoins exprimés des utilisateurs et les traitements
envisageables.
Pour assurer cet objectif, il est essentiel d’avoir une vue claire et précise des besoins :

23. 23
Rapport PFE 2021
3.1 Besoins fonctionnels
Il s'agit des fonctionnalités du système. Ce sont les besoins spécifiant un comportement
d’entrée et de sortie du Système. Afin de satisfaire les besoins fonctionnels, notre application
web doit satisfaire à plusieurs qualités logicielles telles que :
3.1.1 Définition des besoins fonctionnels
- L’authentification
- Inscription des clients
- Consulter les produits exposés ainsi que leurs prix et caractéristiques
- Passage d'une commande
- Gestion des comptes des utilisateurs
- Gestion des articles
- Gestion des catégories
- Gestion des commandes
Besoins fonctionnels par acteur :
A. Responsable :
Le responsable a la possibilité de :
a) Gérer les articles.
b) Gérer les catégories.
c) Gérer les commandes
B. Administrateur :
L’administrateur a les possibilités suivantes :
a) Toutes les actions du responsable.
b) Gérer les comptes des utilisateurs.
C. Client :
Le client a les possibilités suivantes :
a) S’inscrire

24. 24
Rapport PFE 2021
Le client est toujours anonyme mais pour pouvoir passer à un stade plus rigoureux, il
faut qu’il s’inscrive, cela se fait uniquement pour la première commande mais après le client
pourras s’authentifier en mettant son email et mot de passe.
b) Consulter les produits exposés ainsi que leurs prix et caractéristiques
Notre site doit disposer d’une vitrine virtuelle à travers laquelle le client peut consulter
une grande variété des produits, il sera donc indispensable d’y présenter les prix et les
caractéristiques pour faciliter la tâche sur la sélection du produit à acheter.
c) Passer une commande
Après le choix d’un produit le client doit mentionner la quantité qui s’ajoute
automatiquement à sa sélection avec le prix unitaire et le prix total.
3.1.2. Modélisation du diagramme des cas d’utilisations général
Après avoir fait l’identifications des acteurs et les besoins fonctionnels correspondants, le
diagramme des cas d’utilisation est défini par la figure.
Ce diagramme présente les acteurs et les cas d’utilisation du système avec les relations
entre eux.
Chaque acteur est en association avec les cas d’utilisation correspondants.
Chaque cas d’utilisation est en relation d’inclusion <<include>> avec le cas d’utilisation
authentification.

25. 25
Rapport PFE 2021
Figure 3 : Diagramme de cas d’utilisations général
3.1.3. Raffinement des cas d’utilisation
A. Raffinement du cas d’utilisation « S’authentifier »
L’utilisateur peut se connecter au système en insérant son login et son mot de passe ensuite
le système vérifie son existence en tant qu’utilisateur autorisé avant de lui donner l’accès au
système.

26. 26
Rapport PFE 2021
Figure 4 : Diagramme de cas d’utilisation raffiné « S’authentifier »
a) Description textuelle du cas d’utilisation : « S’authentifier »
Cas d’utilisation S’authentifier
Acteur Administrateur/Responsable
Pré-Condition Avoir un login et mot de passe
Post-Condition Acteur authentifié
Scénario nominal L’acteur saisit le Login et le Mot de passe.
Il clique ensuite sur le Bouton « Connecter ».
Le système vérifie les informations saisies.
Le système affiche l’interface appropriée.
Exception Le système affiche un message d’erreur si les données saisies sont
incorrectes.
Tableau 1 : Raffinement CU « S’authentifier »
B. Raffinement du cas d’utilisation « Gestion utilisateur »
L'administrateur est le seul acteur quia l'autorisation de gérer les utilisateurs. Il n'est pas
logique qu'un responsable peut supprimer le compte de son gérant.

27. 27
Rapport PFE 2021
Figure 5 : Diagramme de cas d’utilisation raffiné « Gestion utilisateur »
a) Description textuelle du cas d’utilisation : « Ajouter un utilisateur ».
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Ajouter un
utilisateur ».
Cas d’utilisation Ajouter un utilisateur
Acteur Administrateur
Précondition L’administrateur est authentifié
Postcondition Utilisateur ajouté
Scénario nominal L’administrateur clique sur le bouton ajouter un utilisateur puis il
remplit les champs du formulaire puis il clique sur ajouter.
Exception Le système affiche un message d’erreur si les données saisies sont
de incorrectes.
Tableau 2 : Raffinement CU « Ajouter un utilisateur »
b) Description textuelle du cas d’utilisation : « Modifier un utilisateur »
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Modifier
un utilisateur ».

28. 28
Rapport PFE 2021
Cas d’utilisation Modifier un utilisateur
Acteur Administrateur
Pré-Condition Administrateur authentifié
Post-Condition Utilisateur modifié
Scénario nominal L’administrateur clique sur le bouton modifier un utilisateur puis il
modifie les champs du formulaire, enfin, il clique sur modifier.
Exception Le système affiche un message d’erreur si les données saisies lors de
la modification sont incorrectes.
Tableau 3 : Raffinement CU « Modifier un utilisateur »
c) Description textuelle du cas d’utilisation : « supprimer un utilisateur »
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Supprimer
un utilisateur ».
Cas d’utilisation Supprimer un utilisateur
Acteur Administrateur
Pré-Condition Administrateur authentifié
Utilisateur existant
Post-Condition Utilisateur supprimé
Scénario nominal L’administrateur choisi l’utilisateur à supprimer puis il clique sur le
bouton supprimer.
Exception Problème d’exécution de la requête :
S’il y a un problème de connexion avec le serveur de base de données
ou au niveau SGBD lui-même, le système affiche un message
d’erreur, annule l’opération et le cas d’utilisation se termine.
Tableau 4 : Raffinement CU « Supprimer un utilisateur »
d) Description textuelle du cas d’utilisation : « consulter un utilisateur »
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Consulter
un utilisateur ».

29. 29
Rapport PFE 2021
Cas d’utilisation Consulter un utilisateur
Acteur Administrateur
Pré-Condition Administrateur authentifié
Post-Condition Utilisateur consulté
Scénario nominal L’administrateur choisi l’utilisateur a consulté puis il clique sur le
bouton consulter.
Exception "aucune"
Tableau 5 : Raffinement CU « Consulter un utilisateur »
C. Raffinement du cas d’utilisation « Gestion des articles »
L'administrateur et le responsable ont l'autorisation de faire la gestion des articles : consulter,
ajouter, modifier, et supprimer l'article.
Figure 6 : Diagramme de cas d’utilisation raffiné « Gestion article »
D. Raffinement du cas d’utilisation « Gestion catégorie »
L'administrateur et le responsable ont l'autorisation de faire la gestion des catégories :
consulter, ajouter, modifier, et supprimer une catégorie.

30. 30
Rapport PFE 2021
Figure 7 : Diagramme de cas d’utilisation raffiné « Gestion catégorie »
E. Raffinement du cas d’utilisation « Gestion du commande »
L'administrateur et le responsable ont l'autorisation de faire la gestion des commandes :
consulter et supprimer la commande.
Figure 8 : Diagramme de cas d’utilisation raffiné « Gestion commande »
F. Raffinement du cas d’utilisation « Consulter liste des produits »
Le client à l'autorisation de consulter la liste des produits.
Figure 9 : Diagramme de cas d’utilisation raffiné « Consulter liste des produits »

31. 31
Rapport PFE 2021
a) Description textuelle du cas d’utilisation : « Consulter la liste des produits »
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Consulter
la liste des produits ».
Cas d’utilisation Consulter liste des produits
Acteur Client
Pré-Condition Accéder au site web
Post-Condition Produits consultés
Scénario nominal Le client écrit le lien du site web et clique sur entrée pour consulter.
Exception "aucune"
Tableau 6 : Raffinement CU « Consulter liste des produits »
G. Raffinement du cas d’utilisation « Passer une commande »
Figure 10 : Diagramme de cas d’utilisation raffiné « Passer une commande »
a) Description textuelle du cas d’utilisation : « passer une commande »
Le client à l'autorisation de passer une commande.
Le tableau ci-dessous représente le processus du déroulement du cas d’utilisation « Passer une
commande ».

32. 32
Rapport PFE 2021
Cas d’utilisation Passer une commande
Acteur Client
Pré-Condition S'inscrire
Post-Condition Commande ajoutée
Scénario nominal Le client choisit l'article à acheter puis il clique sur le bouton ajouter.
Exception "aucune"
Tableau 7 : Raffinement CU « Passer une commande »
H. Raffinement du cas d’utilisation « S’inscrire »
Figure 11 : Diagramme de cas d’utilisation raffiné « s’inscrire »
a) Description textuelle du cas d’utilisation : « S’inscrire »
Cas d’utilisation Passer une commande
Acteur Client
Pré-Condition Le client n’est pas authentifié
Post-Condition Le client est authentifié
Scénario nominal 1. L’utilisateur va entrer dans la page d’inscription
2. L’utilisateur remplit les formulaires d’inscription.
3. L’utilisateur confirme son pseudo et son mot de passe pour
avoir les droits d’accès.
4. L’utilisateur valide et vérifie l’opération.
Exception Pseudo et mot de passe incorrects.
Champs de formulaire incomplet.
Tableau 8 : Raffinement CU « S’inscrire »

33. 33
Rapport PFE 2021
3.2. Besoins Non fonctionnels
Les besoins non fonctionnels sont des conditions que le produit doit impérativement
respecter, ou bien des fonctions complémentaires c’est à dire des fonctionnalités qui ne sont pas
explicitement demandées par l’utilisateur mais qui contribueraient à l’amélioration de
l’application. Les besoins non fonctionnels se résument autour de ces axes :
a) La disponibilité
L’application doit être disponible pour être utilisée par tout le monde.
b) La sécurité
Pour pouvoir accéder à l’application, chaque utilisateur doit s’authentifier par un login
et mot de passe qui pourrons être vérifier par la connexion à la base de données. De même
pour que l'administrateur ou le responsable puisse accéder à l’espace administrateur, il doive
s’authentifier par un login et un mot de passe vérifiés par la connexion à la base de données.
c) L’ergonomie
Les interfaces relatives à l’application doivent être simples, significatives et intuitives afin
qu’elles puissent être utilisées facilement. En d’autres part, l’application doit être claire et
facile à utiliser par l’administrateur, les responsables et les clients.
d) La maintenance
Le code doit être compréhensible pour des raisons de réutilisation et de modification.
e) L'évolutivité
Cette application doit prendre en considération la possibilité d’ajouter d’autres
fonctionnalités, elle doit donc être évolutive.
Conclusion
Durant ce chapitre, nous avons identifié les acteurs de l’application, nous avons présenté
les différents besoins attendus de notre application web ainsi que les messages émis et reçus
par le système. Dans cette partie de conception des données fera l’objet du chapitre suivant.

34. Chapitre III :
Conception

35. 35
Rapport PFE 2021
Introduction
Dans ce chapitre, nous allons procéder à l’étude et à la conception de notre application. La
conception est modélisée, comme on l’a défini précédemment, à l’aide du langage de
modélisation UML. Nous commençons tout d’abord par la modélisation du diagramme de
classes, ensuite les diagrammes de séquences, et nous terminons par le diagramme de
déploiement.
1. Modélisation des diagrammes de classes
Le diagramme de classe sert de représenter l’ensemble des informations finalisées qui sont
gérées par le domaine. Ces informations sont structurées, c’est-à-dire qu’elles sont regroupées
dans des classes.
Le diagramme de classes est un schéma utilisé illustratif des classes, ainsi que les différentes
relations entre celles-ci. Il permet de modéliser un programme et aussi de la découpe d’une
tâche complexe en plusieurs petits travaux simples.
Les classes principales suivantes : Utilisateur, Administrateur, Responsable, Client,
Catégorie, Article, Commande.
Une fois les classes définies il faut préciser les attributs et les opérations correspondantes.
Le diagramme suivant met en évidence les interactions entre ces entités, ainsi que leurs attributs
et méthodes.
La figure 13représente le diagramme de classe de notre application :

36. 36
Rapport PFE 2021
Figure 12 : Diagramme de classes
a) Dictionnaire des données
Le dictionnaire de données est une structure qui rassemble l’ensemble des données relatives
au sujet d’étude et ayant pour but de structurer et de donner une première analyse des
informations du sujet. Le dictionnaire de données est représenté dans le tableau suivant :

37. 37
Rapport PFE 2021
Désignation Code Type
Id Identifiant d’un utilisateur Int
Nom Nom d’un utilisateur String
Prénom Prénom d’un utilisateur String
Adresse Le prénom du l’utilisateur (client,
administrateur, responsable)
String
Email Email d’un utilisateur String
Tél Numéro de téléphone d’un utilisateur Int
Sexe Sexe d’un utilisateur String
Fonction Fonction d’un utilisateur String
Nom utilisateur Login du l’utilisateur String
Mot_de_passe Mot de passe du l’utilisateur String
Id_art Identifiant de l’article Int
Nom_article Le nom de l’article String
Référence_art Référence de l’article String
Désignation _art Désignation de l’article String
Couleur_art Couleur de l’article String
Prix_art Prix de l’article Float
Quantité_en_stock_art Quantité en stock de l’article Int
Description art Description de l’article String
Id_cat Identifiant de la catégorie String
Désignation_cat Désignation de la catégorie String
Description_cat Description de la catégorie String
Ref_cmd Référence de la commande String
Date_cmd Date de la commande Date
Etat_cmd Etat de la commande String
Tableau 9 : " Dictionnaire des données "

38. 38
Rapport PFE 2021
2. Modélisation des diagrammes de séquences système
Les diagrammes de séquence peuvent servir à illustrer les cas d’utilisations décrits dans le
chapitre précédent. Ils permettent de représenter l’enchaînement chronologique des opérations
réalisées par un acteur et qui font passer d’un objet à un autre pour représenter un scénario.
Le diagramme de séquence est sous la forme d’un diagramme comportemental qui permet
d’indiquer les interactions qui existent entre un groupe d'objets. Même si d'autres diagrammes
comportementaux peuvent convenir, les diagrammes de séquence sont les plus utilisés,
essentiellement parce qu'ils permettent de voir comment les objets s'utilisent réciproquement.
Grâce à ces informations, on peut déterminer plus précisément pourquoi deux objets sont liés.
En effet, les diagrammes de séquence sont des éléments clés de la modélisation UML (Unified
Modeling Language), car ils représentent les apparences dynamiques de la complicité entre
classes. Dans ce qui suit nous allons présenter le diagramme de séquence de chaque cas
d’utilisation de l’application définit au chapitre précédent. [4]
2.1 Diagramme de séquence « Authentification »
La figure ci-dessous représente le diagramme de séquence système d’authentification qui
suit le scénario suivant :
a) L’authentification d’un utilisateur exige son identifiant et son mot de passe.
b) Le système est chargé de la vérification de ces valeurs qui doivent être propices aux celles
de la base de données.
c) Si l’authentification est réussite, l’utilisateur est permis d’accéder à l’application et le menu
principal sera affiché.
d) Sinon le système affiche un message d’erreur et redirigera l’utilisateur vers l’écran de
connexion pour un autre essai.

39. 39
Rapport PFE 2021
Figure 13 : Diagramme de séquence « Authentification »
2.2 Modélisation de diagramme de séquence système « Ajouter un compte » :
Pour ce diagramme de séquence système le scénario est le suivant :
a) L’administrateur doit remplir le formulaire d’un nouveau compte et valide
l’enregistrement.

40. 40
Rapport PFE 2021
b) Le système est chargé de la vérification de tous les champs obligatoires, si un champ est
laissé vider ou erroné l’utilisateur sera redirigé à le corriger.
c) S’il y a un problème au cours de l’exécution de la requête vers la base de données le
système affiche un message d’erreur et l’acteur retente.
d) Sinon le nouveau compte sera créé.
Figure 14 : Diagramme de séquence « Ajouter un utilisateur »
2.3 Modélisation de diagramme de séquence système « Supprimer un compte »
Le scénario suivant :
a) Le système affiche la page des comptes des utilisateurs et l’administrateur choisira le
compte qui souhaite le supprimer en cliquant sur ce dernier.

41. 41
Rapport PFE 2021
b) Le système demande le mot de passe de l’administrateur pour confirmer la suppression.
c) Si le mot de passe est incorrect la suppression sera annulée.
d) S’il y a un problème au cours de l’exécution de la requête vers la base de données le
système affiche un message d’erreur et l’acteur tente de nouveau.
e) Si non le système affiche un message de suppression effectuée.
Figure 15 : Diagramme de séquence « Supprimer un compte »
2.4 Modélisation de diagramme de séquence système « passer une commande »
Le client doit consulter la page des articles. Le cas d’utilisation commence lorsqu’il clique
sur ajouter, ce bouton se trouve à coté de chaque article. Lorsque la page du formulaire est
affichée, le client doit remplir les coordonnées. Puis il valide en cliquant sur "Valider".
Enfin, le système effectue l'enregistrement et retourner vers la page des articles. Sinon, le
système affiche un message d'erreur.

42. 42
Rapport PFE 2021
Figure 16 : Diagramme de séquence « Passation d'une commande »
Conclusion
Tout au long de ce chapitre nous avons présenté les différentes étapes de la conception de
notre application tout en évoluant dans le niveau de détails, ce qui va aboutir immédiatement à
l’implémentation avec une vision claire des aspects fonctionnels et organisationnels de
l’application. Dans le chapitre suivant nous allons entamer la partie réalisation de notre
application.

43. 43
Rapport PFE 2021
Chapitre IV :
Réalisation et
Implémentation

44. 44
Rapport PFE 2021
Introduction
Après avoir établi la conception de notre projet, nous voilà arrivés à la phase d’achèvement
et d’aboutissement du projet. Afin d’accomplir cette tâche avec succès, il nous a fallu bien
choisir les outils adéquats et nécessaires à utiliser. Ces choix d’outils, qui se basent sur les
besoins du projet et les résultats souhaités à obtenir, influencent la qualité du produit, donc cette
opération nécessite une attention minutieuse de notre part. Ce chapitre sera consacré alors au
premier lieu, à la présentation de l’environnement technique du travail. Par la suite, nous
présenterons le principe de fonctionnement du projet par une démonstration graphique.
1. Environnement de travail
1.1. Environnement matériel
Un ordinateur pour le développement ayant les caractéristiques suivantes :
• Marque : Dell
• Processeur Intel Core i5
• 8 Go de mémoire vive
• Disque dur de capacité 500GB
• Le Système d’exploitation Microsoft Windows 10
Une connexion internet par fibre optique ayant un débit de 20 Mb/s.
Figure 17 : propriétés du système

45. 45
Rapport PFE 2021
1.2. Environnement logiciel
Dans cette partie nous allons présenter les différents logiciels que nous avons utilisés tout au long de
notre projet :
1.2.1. Logiciel de modélisation
La partie modélisation et conception nous avons utilisé l’outil Pour la modélisation et la
représentation de notre système, nous avons choisi l’outil Draw.io version 14.6.13, est une
application de création de diagrammes, le choix s’est porté sur cet outil de modélisation car il
présente une solution de gestion des métadonnées à la pointe de l’innovation. De plus, il est
destiné non seulement aux concepteurs des logiciels mais aussi aux entreprises.
Figure 18 : Logo du draw.io
1.2.2. Logiciels de développement
a) Visual Studio Code
C’est un éditeur de code extensible développé par Microsoft pour MacOs, Windows et
Linux ,les capacités comprennent la prise en charge du débogage, la mise en certitude de la
syntaxe, la réalisation intelligente du code, les snippets, la refactorisation du code
et Git intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les acceptions
et installer des extensions qui ajoutent des fonctionnalités supplémentaires.[5]
Figure 19 : Logo Visual Studio Code

46. 46
Rapport PFE 2021
b) Symfony
Symfony est un ensemble de composants PHP ainsi qu’un Framework MVC libre écrit en
PHP. Il fournit des fonctionnalités modulables et évolutifs qui permettent de faciliter et
d’accélérer le développement d’un site web.[6]
Figure 20 : Logo Symfony
c) Composer
Composer est un logiciel gestionnaire de dépendances écrit en PHP. Il permet aux
utilisateurs de déclarer et d'installer les bibliothèques dont le projet principal a besoin,
développé au début par Nils Alderman et Jordi Boggiano (qui continuent encore aujourd'hui à
le maintenir), le projet est maintenant disponible sur la plateforme GitHub. Il est ainsi
développé par toute une communauté.[7]
Figure 21 : Logo Composer
1.2.3. Langages utilisés
a) HTML
Le langage HTML est un langage de marquage de description de données qui ne connait que
l’alphabet ASCII standard, limité à 128 caractères. Le marquage, réalisé par les balises, décrit
la structure logique du document et est interprété par les logiciels de navigation (navigation ou
browsers) lors de l’affichage.
En conclusion HTML est le langage de base pour la création des vues des applications web,
basé sur le concept de balisage, qui aide à la structuration de contenu.

47. 47
Rapport PFE 2021
Figure 22 : logo du HTML
b) CSS
CSS est un Language informatique utilisé pour mettre en forme les fichiers HTML sur
un site web, aussi les fichiers CSS permettent de gérer l’aspect graphique d’une page en HTML
Figure 23 : Logo de CSS
c) PHP
PHP est l'un des langages de script les plus actifs sur le Web. Il permet de Créer principalement
des pages Web HTML dynamiques mais aussi d'autres types de Contenu comme des images,
des animations Flash, des documents PDF, etc. Le code PHP est intégré dans des pages HTML
pour l'exécution côté serveur. Il est couramment utilisé pour obtenir des données d'une base de
données et de les présenter sur la page Web, nous avons utilisé ce logiciel pour la représentation
des différentes étapes de conception de ce portail.
Figure 24 : logo du PHP
1.2.3.1 Logiciels de gestion des bases de données

48. 48
Rapport PFE 2021
a) MySQL
MySQL est un serveur de bases de données relationnelles, Open Source, un serveur de bases
de données conserve les données dans des tables dissociées au lieu que de tout réunir dans une
seule table. Cela arrange la rapidité et l’agilité de l'ensemble. Les tables sont assemblées par des
relations définies, qui rendent possibilité d’une alliance de données entre plusieurs tables
pendant une requête. Le langage standard pour les traitements de bases de données relationnel.
Figure 25 : Logo MySQL
2. Interfaces de l’application
L’intérêt de cette partie est de présenter les principales interfaces graphiques de notre
application, de vérifier que les cas réalisés sont conformes aux besoins, d’éviter les erreurs
d’exécution qui peut se produire et de s’assurer que les interfaces réalisées sont présentables et
ergonomiques.
2.1. Interface d’authentification
Figure 26 : Interface d’authentification

49. 49
Rapport PFE 2021
C’est l'interface d'authentification : l’utilisateur est amené de taper son login et son mot de
passe, la page est équipée d’un contrôle de saisie qui vérifie les champs :
2.2. Interface espace admin
Figure 27 : Espace administrateur
Cette capture écran montre l’espace administrateur dans lequel, l’administrateur peut choisir
l’une des tâches suivantes :
a) Gérer les utilisateurs
b) Gérer les articles
c) Gérer les catégories
d) Gérer les commandes
2.3. Interface espace responsable
Figure 28 : Espace administrateur
Cette capture écran montre l’espace du responsable dans lequel, le responsable peut choisir
l’une des tâches suivantes :
a) Gérer les articles
b) Gérer les catégories
c) Gérer les commandes

50. 50
Rapport PFE 2021
2.4. Interface espace Client
Figure 29 : Interface des catégories
Cette capture écran montre le menu affichant les différentes catégories des produits, pour
consulter les catégories, le client sélectionne la catégorie qu’il souhaite voir et il aura toutes les
informations nécessaires.

51. 51
Rapport PFE 2021
2.5. Interface inscription client :
Figure 30 : Formulaire d’inscription
Cette capture écran montre le formulaire d’inscription d’un utilisateur, en effet, ce dernier est
amené à saisir ses coordonnées et il sera automatiquement ajouté.
2.6. Interface gestion utilisateur
Figure 31 : Interface de gestion des utilisateurs

52. 52
Rapport PFE 2021
Cette capture écran montre l’interface de gestion des utilisateurs, en effet, l’administrateur aura
les possibilités suivantes :
a) Consulter les informations des utilisateurs.
b) Modifier les coordonnées des utilisateurs.
c) Supprimer un ou plusieurs utilisateurs.
2.7. Interface gestion article
Figure 32 : Interface de gestion des articles
Cette capture écran montre l’interface de gestion des articles, en effet, on aura les possibilités
suivantes :
a) Consulter les informations des articles.
b) Modifier les détails des articles.
c) Supprimer un ou plusieurs articles.
2.8. Interface gestion catégorie
Figure 33 : Interface de gestion des catégories

53. 53
Rapport PFE 2021
Cette capture écran montre l’interface de gestion des articles, en effet, on aura les possibilités
suivantes :
a) Consulter les informations des catégories.
b) Modifier les détails des catégories.
c) Supprimer un ou plusieurs catégories.
2.9. Interface gestion commande
Figure 34 : Interface de gestion des commandes
Cette capture écran montre l’interface de gestion des commandes, en effet, l’administrateur ou
le responsable auront les possibilités suivantes :
a) Consulter les commandes.
b) Modifier les détails d’une commande.
c) Supprimer une commande.

54. 54
Rapport PFE 2021
2.10. Interface passage commande
Figure 35 : Interface de passage de commandes
Cette capture écran montre l’interface de passage des commandes, en effet, le client choisit
l’article qu’il veut commander et la quantité correspondante puis clique sur le bouton ajouter.
La commande sera automatiquement ajoutée.
Conclusion
Dans ce chapitre nous avons présenté l’environnement logiciel et matériel, nous avons
également détaillé son principe de fonctionnement par des illustrations montrant le bon
fonctionnement de notre application

55. 55
Rapport PFE 2021
CONCLUSION GENERALE
Arrivés au terme de notre projet de fin d'études dont le thème est intitulé : « Conception et
développement d’une application de vente en ligne des articles Electroniques », nous pouvons
dire sans pour autant prétendre à l'exhaustivité que nos objectifs ont été atteints avec succès.
Ce projet de fin d’étude nous a beaucoup appris. Il a fut pour nous le moyen de mettre en
pratique nos connaissances et acquis accumulés au cours de nos années d’études, et il nous a
ouvert la porte pour apprendre et manipuler plusieurs langages : HTML, UML, PHP. Nous
avons approfondi nos connaissances sur l’administration des différents types de bases de
données relationnelles (MySQL).
Nous voulons développer une application web responsive et qui est prête à être héberger afin
d’attaquer le marché de l’informatique avec un grand pourcentage de gagner des clients sur
l’échelle nationale et internationale.
Cette application sera certainement enrichie par d’autres travaux dans le futur afin de
satisfaire nos prochains clients dont les besoins évoluent continuellement en fonction du
contexte d’utilisation.

56. 56
Rapport PFE 2021
Webographie :
 [1] https://mit-polytech.tn/presentation
 [2] https://mit-polytech.tn/partenariat
 [3] :https://en.wikipedia.org/wiki/Unified_Modeling_Language
 [4] :https://lipn.univ-paris13.fr/~gerard Q /uml-s2/uml-cours05.html
 [5] https://fr.wikipedia.org/wiki/Visual_Studio_Code
 [6] https://fr.wikipedia.org/wiki/Symfony
 [7] https://fr.wikipedia.org/wiki/Composer_(logiciel)

57. 57
Rapport PFE 2021
Résumé
L’objectif final de notre projet de fin d’études consiste à la réalisation d’une application web
de gestion de produits ' site E-commerce'.
Tout au long de ce projet, nous avons essayé d’aborder trois étapes qui régissent l’ensemble
de ce travail.
Des améliorations pourraient aussi être apportées à ce site. Nous voulons faire de ce site
développé dans le cadre de notre projet de fin d’études, une lancée à la vie professionnelle.
‫الهدف‬ ‫النهائي‬ ‫لمشروع‬ ‫التخرج‬ ‫لدينا‬ ‫هو‬ ‫إنشاء‬ ‫تطبيق‬ ‫ويب‬ ‫إلدارة‬ ‫المنتجات‬ " ‫موق‬
‫ع‬ ‫التجارة‬ ‫"اإللكترونية‬
‫حاولنا‬ ‫خالل‬ ‫هذا‬ ‫المشروع‬ ‫تناول‬ ‫ثالث‬ ‫مراحل‬ ‫تحكم‬ ‫كل‬ ‫هذا‬ ‫العمل‬.
‫يمكن‬ ‫ًا‬‫ض‬‫أي‬ ‫إجراء‬ ‫تحسينات‬ ‫على‬ ‫هذا‬ ‫الموقع‬. ‫نريد‬ ‫أن‬ ‫نجعل‬ ‫هذا‬ ‫الموقع‬ ، ‫الذي‬ ‫تم‬ ‫تطويره‬ ‫كجزء‬ ‫من‬ ‫مشروع‬ ‫التخرج‬ ‫لدينا‬ ،
‫ا‬ً‫ق‬‫انطال‬ ‫للحياة‬ ‫المهنية‬
The final objective of our graduation project is to create an 'E-commerce site' product
management web application.
Throughout this project we have tried to address three stages that govern all of this work.
Improvements could also be made to this site. We want to make this site, developed as part of
our graduation project, a launch for professional life.