Rapport PFE Tayssir

République Tunisienne Ministère de
l’Enseignement Supérieur, de la
Recherche Scientifique et de la
Technologie
image/univK.jpg image/isigk.png
Université de Kairouan Institut
Supérieur d’Informatique et de
Gestion de Kairouan
PROJET DE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme National :
LICENCE EN INFORMATIQUE DE GESTION
Conception et Réalisation d’une

Application Web pour la gestion des
conventions
Élaboré par :Tayssir Taam
Soutenue le /06/2023
Devant les membres du jury :
Président :
Encadreur Académique : Mr Kalboussi Anis

Encadreur Professionnel : Mr Sassi Moncef
Année universitaire 2023 / 2024

Dédicaces
À Mon Cher Pére Abdelbasset
Mon cher père tu es mon épaule solide, aucun mot ne peut exprimer ma
profonde gratitude envers toi à travers cette dédicace. Tu as toujours été
là pour moi, me soutenant et m’encourageant à poursuivre mes rêves et à
atteindre mes objectifs. Ce travail est le fruit des sacrifices que tu as consentis
pour mon éducation et ma formation.Je suis reconnaissante pour tout ce que
tu as fait pour moi tout au long de mon parcours d’études et pour m’avoir
inculqué de fortes valeurs. Tu es une source d’inspiration pour moi et je suis
fière d’avoir un père aussi formidable que toi .Que Dieu te protège, te procure
la santé et te préserve une longue vie.
À Ma Belle Mére Houda
Merci à cette femme incroyable qui m’a toujours inspiré, pour tout, à ma
chère mère qui m’a donné tout l’amour et le soutien dont j’avais besoin pour
réussir dans la vie.
Tu es ma force Maman, ce travail t’est dédié en reconnaissance.
Merci pour ta présence inconditionnelle dans ma vie.
Tu es la meilleure maman du monde.
Que Dieu vous accorde, santé et longue vie.
À Mes Adorables Sœurs Intissar et Mariem
Mes chères sœurs, vous êtes pour moi bien plus que des anges gardiens et
des confidentes. Vous êtes des piliers solides sur lesquels je peux m’appuyer
en toute confiance.
Votre soutien moral, votre affection sont inestimables pour moi. Merci
d’être toujours là pour moi, peu importe les circonstances.
Que ce travail soit l’expression d’un amour sincère et d’une affection

profonde, témoins de l’importance que vous avez dans ma vie.
À Mon Fiancé Wassef
Tout au long de ce projet, Wassef a été un pilier solide, m’encourageant,

me soutenant et me conseillant à chaque étape.
Sa confiance en moi et en mes capacités a été un véritable moteur pour

mener à bien ce projet et je ne pourrais jamais assez le remercier pour tout
ce qu’il a fait.
Merci pour vos encouragements sans fin, pour ta compréhension pendant

mes moments de stress, et pour ta présence infaillible dans ma vie.
Je suis extrêmement chanceuse de t’avoir dans ma vie, tu es un trésor

précieux et je ne pourrais pas imaginer avoir un meilleur partenaire à mes
côtés pour partager les hauts et les bas de la vie .
À Ma chère Amie universitaire Ahlem
Je tiens à te remercier pour ton amitié sincère, ton soutien indéfectible et

ton aide précieuse tout au long de notre parcours universitaire.
Ta présence a été un vrai réconfort pour moi. Nous avons passé des
agréables moments ensemble qui vont rester gravés dans mon mémoire.
À Ma Meilleure Amie Haifa
Avec toute ma gratitude, je tiens à te dédier mon projet de fin d’études,

car ta présence et ton soutien inébranlable ont été essentiels tout au long de
ce parcours.
Merci d’avoir été là, de m’avoir encouragée et inspirée. Je ressens une fierté
immense à partager ce succès avec toi. Notre amitié est précieuse et je suis
reconnaissante de t’avoir à mes côtés.
Tayssir Taam
Remerciment
Je remercie Dieu le tout-puissant pour la santé, la détermination et l’énergie

qu’il m’a données, car elles ont été la clé de ma réussite pour entreprendre
et terminer ce rapport avec succès.
Tout d’abord, je tiens à exprimer toute ma gratitude et mes remerciements

envers cette occasion de présenter mon travail. Je souhaite adresser mes
plus sincères remerciements et mon respect à tous les membres du jury qui
ont accepté d’évaluer notre travail.
Je voudrais également exprimer ma reconnaissance envers mon encadrant

pédagogique à l’ISIGK, Mr Anis Kalboussi, pour sa pédagogie, sa
disponibilité, son aide et ses conseils concernant l’acheminement du projet
et l’architecture du rapport. Je le remercie également pour le temps qu’il a
consacré à m’informer et à me guider tout au long des différentes phases de
ce projet, ainsi que pour sa patience et son amabilité.
Je tiens pareillement à exprimer ma gratitude envers mon encadrant

professionnel à TUNISIE TELECOM, Mr Moncef Sassi, qui m’a
accompagné tout au long de ce projet avec un accueil chaleureux et une
expertise partagée. Je le remercie pour ses efforts pour m’intégrer dans
l’environnement de travail et pour sa contribution à mon développement
professionnel.
Enfin, je souhaite adresser mes sincères remerciements à tous les
enseignants de l’ISIGK qui m’ont enseigné pendant ces trois années
successives. Grâce à leurs compétences et leur soutien, j’ai pu poursuivre
mes études avec confiance et atteindre mes objectifs académiques.
Table des matières
1 Cadre du Projet 3
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Présentation de l’organisme d’Accueil . . . . . . . . . . . . . . . . . . . . 3
1.2.1 Description : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.2 Vision historique de l’entreprise Tunisie Telecom . . . . . . . . . . 4
1.2.3 Organigramme de TUNISIE TELECOM . . . . . . . . . . . . . . . 5
1.2.4 Les prestations offerts par Tunisie Télécom . . . . . . . . . . . . . . 5
1.3 Présentation du sujet proposé : . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.1 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.2 Solution Envisagée . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4 Méthodologie de travail adoptée : . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.1 La Méthode Adoptée : Le cycle de vie en Cascade . . . . . . . . . 7
1.4.2 Le langage de Modélisation . . . . . . . . . . . . . . . . . . . . . . 9
1.5 Calendrier prévisionnel de travail : . . . . . . . . . . . . . . . . . . . . . . 9
1.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2 Spécification et Analyse des Besoins 12

2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2 Identification des acteurs : . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.3 Spécification des besoins : . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3.1 Les besoins Fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3.2 Les besoins non Fonctionnels : . . . . . . . . . . . . . . . . . . . . . 13
2.4 Description des cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 14
2.4.1 Les cas d’utilisation de l’acteur « Administrateur » . . . . . . . . . 14
2.4.1.1 Raffinement de Cas d’utilisation «S’inscrire» . . . . . . . . 16
2.4.1.2 Raffinement de Cas d’utilisation « S’authentifier » . . . . 18
2.4.1.3 Raffinement de Cas d’utilisation «Gérer Bénéficiaires» . . 20
2.4.1.4 Raffinement de Cas d’utilisation «Gérer les Conventions» . 22
2.4.1.5 Raffinement de Cas d’utilisation «Recevoir une Notification» 24
2.4.1.6 Raffinement de Cas d’utilisation «Gérer la liste de conven-

tions expirées» . . . . . . . . . . . . . . . . . . . . . . . . 26
2.4.1.7 Raffinement de Cas d’utilisation «Consulter les statistiques » 28
2.4.2 Diagramme de cas d’utilisation général . . . . . . . . . . . . . . . . 29
2.4.3 Tableau récapitulatif des cas d’utilisation : . . . . . . . . . . . . . . 31
2.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3 Conception 32
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2 Conception des cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2.1 Diagramme de séquence . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2.1.1 Diagramme de séquence «inscription» . . . . . . . . . . . 33
3.2.1.2 Diagramme de séquence «Authentification» . . . . . . . . 35
3.2.1.3 Diagramme de séquence «Ajouter un bénéficiaire» . . . . . 37

3.2.1.4 Diagramme de séquence «Gérer les conventions» . . . . . 39
3.2.1.5 Diagramme de séquence «Ajouter une convention» . . . . 41
3.3 Diagramme de classe général . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.4 Diagramme d’activité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.4.1 Diagramme d’activité du cas d’utilisation «Authentification» . . . . 45
3.4.2 Diagramme d’activité du cas d’utilisation de «l’ajout d’un bénéficiare» 47
3.4.3 Diagramme d’activité du cas d’utilisation «Ajouter une convention» 49
3.4.4 Diagramme d’activité du cas d’utilisation «Gestion des conventions» 51
3.4.5 Diagramme d’activité du cas d’utilisation «Modifier une convention» 53
3.4.6 Diagramme d’activité du cas d’utilisation «La suppression d’une

convention» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4 Implémentation et Résultats 58
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.2 Architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.3 Environnement de Développement . . . . . . . . . . . . . . . . . . . . . . . 59
4.3.1 Environnement Matériel . . . . . . . . . . . . . . . . . . . . . . . . 60
4.3.2 Environnement Logiciel . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.4 Description de l’Application : . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.4.1 Présentation des interfaces de l’application . . . . . . . . . . . . . . 61
4.4.1.1 Interface «Authentifiction» . . . . . . . . . . . . . . . . . 61
4.4.1.2 Interface «Ajouter un bénéficiaire» . . . . . . . . . . . . . 61
4.4.1.3 Interface «Modifier bénéficiaire» . . . . . . . . . . . . . . 62
4.4.1.4 Interface «Supprimer une convention» . . . . . . . . . . . 62
4.4.1.5 Interface «Liste des conventions» . . . . . . . . . . . . . . 62

4.4.1.6 Interface «Renouveler une convention» . . . . . . . . . . . 62
4.4.1.7 Interface «Consulter statistiques» . . . . . . . . . . . . . . 62
4.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Conclusion générale et perspectives 69

Table des figures
1.1 Logo de l’entreprise Tunisie Télécom . . . . . . . . . . . . . . . . . . . . . 4
1.2 Organigramme de Tunisie Télécom . . . . . . . . . . . . . . . . . . . . . . 5
1.3 Processus de développement en Cascade . . . . . . . . . . . . . . . . . . . 8
1.4 Logo UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1 Diagramme de cas d’utilisattion de l’acteur « Administrateur » . . . . . . . 15
2.2 Raffinement de Cas d’utilisation « S’inscrire » . . . . . . . . . . . . . . . . 16
2.3 Raffinement de Cas d’utilisation «S’authentifier» . . . . . . . . . . . . . . 18
2.4 Raffinement de Cas d’utilisation «Gérer Bénéficiaires» . . . . . . . . . . . 20
2.5 Raffinement de cas d’utilisation «Gérer les Conventions» . . . . . . . . . . 22
2.6 Raffinement de Cas d’utilisation «Recevoir une Notification» . . . . . . . 24
2.7 Raffinement de Cas d’utilisation «Gérer la liste de conventions expirées» . 26
2.8 Raffinement de Cas d’utilisation «Consulter les statistiques» . . . . . . . . 28
2.9 Diagramme de cas d’utilisattion Global . . . . . . . . . . . . . . . . . . . . 30
3.1 Diagramme de séquence «inscription» . . . . . . . . . . . . . . . . . . . . . 34
3.2 Diagramme de séquence «Authentification» . . . . . . . . . . . . . . . . . 36
3.3 Diagramme de séquence «Ajouter un bénéficiaire» . . . . . . . . . . . . . . 38
3.4 Diagramme de séquence «Gérer les conventions» . . . . . . . . . . . . . . . 40

3.5 Diagramme de séquence «l’ajout d’une convention» . . . . . . . . . . . . . 42
3.6 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.7 Diagramme d’activité du cas d’utilisation «Authentification» . . . . . . . 46
3.8 Diagramme d’activité du cas d’utilisation «Ajouter un bénéficiare» . . . . 48
3.9 Diagramme d’activité du cas d’utilisation «Ajouter une convention» . . . 50
3.10 Diagramme d’activité du cas d’utilisation «Gestion des conventions» . . . 52
3.11 Diagramme d’activité du cas d’utilisation «Modifier une convention» . . . 54
3.12 Diagramme d’activité du cas d’utilisation «Supprimer une convention» . . 56
4.1 Architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.2 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
4.3 Logo StarUML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.4 Logo Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.5 Logo Overleaf Online LaTeX Editor . . . . . . . . . . . . . . . . . . . . . 65
4.6 Logo Laragon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.7 Logo MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.8 Logo Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.9 Logo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
4.10 Logo CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
4.11 Logo JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
4.12 Logo Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
4.13 Logo Node.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
4.14 Logo Vue.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Liste des tableaux
1.1 Tableau prévisionnel de travail . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.1 Description Textuelle de Cas d’utilisation «S’inscrire» . . . . . . . . . . . . 17
2.2 Description Textuelle de Cas d’utilisation «S’authentifier» . . . . . . . . . 19
2.3 Description Textuelle de cas d’utilisation «Gérer Bénéficiaires» . . . . . . 21
2.4 Description Textuelle de Cas d’utilisation «Gérer les conventions» . . . . . 23
2.5 Description Textuelle de Cas d’utilisation «Recevoir une Notification» . . 25
2.6 Description Textuelle de Cas d’utilisation «Gérer la liste de conventions

expirées» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.7 Description Textuelle de cas d’utilisation «Consulter les statistiques» . . . 29
2.8 Tableau récapitulatif des cas d’utilisation . . . . . . . . . . . . . . . . . . . 31
4.1 Environnement matériels utilisé . . . . . . . . . . . . . . . . . . . . . . . . 60

Acronymes
CSS : Cascading Style Sheets

HTML : HyperText Markup Language
TT : Tunisie Telecom
TTM : Tunisie Télécom Mobile
UML : Unified Modeling Language
Introduction Générale
L’avènement des technologies de l’information a transformé le monde professionnel, ou-

vrant de nouvelles opportunités et défis pour les entreprises de tous secteurs et tailles.
Cependant, la gestion des conventions au sein de l’entreprise Tunisie Telecom se fait en-
core de manière traditionnelle, sur papier ou à travers des fichiers Excel, ce qui est devenu
obsolète à l’ère de l’avancée technologique.
Dans ce contexte, ce rapport de fin d’études se focalise sur la conception et le développe-
ment de l’application web Digiconventt, spécialement créée pour la gestion des conventions
au sein de Tunisie Telecom, offrant à Tunisie Telecom une plateforme centralisée pour une
gestion optimisée des conventions.
Ce rapport présentera l’ensemble des étapes qui permettront la réalisation de ce travail.
En fait, il s’articulera autour de quatre chapitres :
Le Premier chapitre, intitulé « Cadre du Projet» ,débutera par la présentation de

l’organisme d’accueil, la vision historique de Tunisie Telecom, son organigramme ainsi que
ses services. Ensuite, la présentation du sujet proposé sera composée de la problématique
et de la solution envisagée. Et il se terminera par la méthodologie de travail adoptée ainsi
que le choix du langage de modélisation.
Le deuxième chapitre, intitulé «Spécification et Analyse des besoins » , exposera

les besoins fonctionnels et non fonctionnels, la description des tâches, et le diagramme de
cas d’utilisation globale de notre application.
Le troisième Chapitre, intitulé «Conception »Le troisième chapitre, intitulé « Concep-

tion », aura pour objectif de modéliser la conception de notre plateforme en utilisant dif-
férents diagrammes.
Le quatrième chapitre, intitulé « Implémentation et Résultats» inclura une pré-
1
Introduction Générale 2
sentation de l’environnement matériel et logiciel qui sera utilisé, ainsi que du langage de
programmation et des outils qui seront employés pour développer l’application. L’affichage
des interfaces sera également présenté à travers des captures d’écran. Enfin, nous clôture-
rons ce rapport en présentant une synthèse du travail dans une conclusion générale.
2
Chapitre 1
Cadre du Projet
1.1 Introduction
Dans ce premier chapitre de notre projet sur Tunisie Telecom, nous présentons l’orga-
nisme d’accueil en décrivant ses principaux services, son historique et son organigramme.
Nous abordons aussi la problématique identifiée dans notre projet ainsi que la solution pro-
posée. Enfin, nous expliquons notre choix de méthodologie de travail ainsi que le langage
de modélisation utilisé.
1.2 Présentation de l’organisme d’Accueil
1.2.1 Description :
Tunisie Télécom est l’opérateur public des télécommunications en Tunisie, responsable

de l’exploitation du réseau public et de la fourniture de services de téléphonie fixe, de télé-
phonie mobile et de services à valeur ajoutée, tels que l’internet. Elle a changé de statut le
1er janvier 1996 pour devenir un établissement public à caractère industriel et commercial,
doté de la personnalité civile et de l’autonomie financière, identifié par son nom commercial
«Tunisie Telecom».
Fondée en vertu de la loi N° 36 du 17 avril 1995, Tunisie Télécom compte plus de 8000
employés répartis dans 24 directions régionales, 80 Actels et points de vente privés. Elle est
présente dans les services de téléphonie fixe et mobile en Tunisie et à l’étranger, avec plus
de 12 millions d’abonnés. Parmi ces abonnés, elle compte plus de 6,3 millions d’abonnés à
3
Cadre du Projet 4
ses services de téléphonie fixe et mobile, démontrant ainsi sa position solide sur le marché
des télécommunications.
image/logo TT.jpeg
Figure 1.1 – Logo de l’entreprise Tunisie Télécom
1.2.2 Vision historique de l’entreprise Tunisie Telecom
• Fondation de Tunisie Telecom en tant qu’entreprise publique en 1995.

• Lancement du premier réseau de téléphonie mobile GSM en Tunisie en 2002.
• Transformation de Tunisie Telecom en société anonyme et ouverture de son capital
à hauteur de 35% en 2006.
• Introduction de l’offre d’accès à Internet à haut débit ADSL en 2007.
• Création de la filiale Tunisie Telecom Mobile (TTM) pour gérer l’activité de télé-
phonie mobile en 2010.
• Lancement du service de télévision par satellite "Tunisie Telecom SAT"en 2011.
• Obtention de la licence pour l’exploitation de la technologie 3G en 2013.
• Lancement de la 4G et expansion de la couverture réseau à travers tout le pays
en 2016.
• Tunisie Telecom a ouvert son nouveau siège social à Tunis, équipé des dernières
technologies de communication et de sécurité, en 2020..
4
Cadre du Projet 5
1.2.3 Organigramme de TUNISIE TELECOM
Pour faciliter la compréhension des fonctionnalités et améliorer la compréhension de

l’interaction entre les diverses services.
La figure ci-dessous illustre la structure fonctionnelle de la direction :
image/organic.png
Figure 1.2 – Organigramme de Tunisie Télécom
1.2.4 Les prestations offerts par Tunisie Télécom
Les services mobiles :
• Abonnement mobile
5
Cadre du Projet 6
• Cartes prépayées
• Recharge de crédit mobile
• Transfert de crédit mobile
• Roaming
Les services Fixe :
• Téléphonie fixe
• Abonnement internet fixe
• Solutions d’entreprises
Les services Internet :
• ADSL
• Fibre optique
• 4G Box
• Wi-Fi
• Hébergement Web
1.3 Présentation du sujet proposé :
Dans cette partie, nous commencerons par exposer la problématique actuelle, avant de
présenter notre solution proposée pour y remédier.
1.3.1 Problématique
Le processus de gestion des conventions au sein de l’entreprise Tunisie Telecom est ac-
tuellement effectué de manière manuelle, ce qui entraîne des retards et des problèmes de
visibilité.
Le chef d’agence est chargé de trouver des accords via divers supports tels que les e-mails,
les fichiers Excel, ce qui non seulement fait perdre beaucoup de temps, mais est également
inefficace lorsque l’accord souhaité est introuvable.
Ce processus manuel ne permet pas d’obtenir une visibilité claire et directe sur la gestion
des conventions, ce qui complique le suivi de leur progression et des engagements associés.Il
est donc crucial de mettre en place une solution numérique pour remédier à ces problèmes.
6
Cadre du Projet 7
1.3.2 Solution Envisagée
Pour résoudre les problèmes de gestion des convention au Tunisie Télécom , notre solu-
tion consiste en une puissante application web qui complète les lacunes actuelles et fournit
les services suivants :
• Digitalisation de la gestion et du suivi des conventions.

• Une visibilité claire pour les conventions.
• Consulter et mise à jour les informations à tout moment.
• Gestion des bénéficiaires et des organismes.
• Facilité du travail du chef de l’espace.
• Visualisation des statistiques sur des tableaux de bord.
• Envoyer automatiquement des notifications lorsque les accords sont sur le point
d’expirer. (Pour éviter toute interruption, veuillez renouveler l’accord et maintenir
la continuité du service)
1.4 Méthodologie de travail adoptée :
Choisir la bonne approche est essentiel pour démarrer un projet, et dans le cadre de
ce projet, Nous avons opté pour la méthode de modélisation en cascade pour ce projet en
raison de sa simplicité, de sa conformité aux exigences de notre projet , pour concevoir et
mettre en œuvre notre application.
1.4.1 La Méthode Adoptée : Le cycle de vie en Cascade
Le modèle en cascade, également connu sous le nom de « waterfall » en anglais, est

une méthodologie de développement logiciel qui adopte une approche séquentielle linéaire.
Dans ce modèle, les diverses étapes de développement sont organisées de manière linéaire,
nécessitant l’achèvement de chaque phase avant de passer à la suivante.
Les étapes couramment dans le cycle de vie en cascade sont :
1. Analyse des besoins

2. Conception
3. Implémentation
4. Vérification et validation
7
Cadre du Projet 8
5. Maintenance
Chaque étape doit être terminée avant de passer à la suivante, Les résultats de chaque
phase sont utilisés comme entrées pour la phase suivante, assurant ainsi une progression
étape par étape dans le processus de développement.
image/waterf.png
Figure 1.3 – Processus de développement en Cascade
Le cycle de vie en Cascade offrant plusieurs avantages :
◦ Définition claire des exigences.
◦ La possibilité de vérifier et valider après chaque phase.
◦ Une documentation exhaustive pour chaque étape de processus.
◦ Il est largement utilisé dans le développement de logiciels.
◦ Gestion simplifiée du projet.
8
Cadre du Projet 9
1.4.2 Le langage de Modélisation
"Le langage UML (Unified Modeling Language) est constitué de diagrammes intégrés
utilisés par les développeurs informatiques pour la représentation visuelle des objets, des
états et des processus dans un logiciel ou un système. Le langage de modélisation peut
servir de modèle pour un projet et garantir une architecture d’information structurée ;
il peut également aider les développeurs à présenter leur description d’un système d’une
manière compréhensible pour les spécialistes externes.
UML est utilisé dans le développement de logiciels orientés objet."[modelis]
image/UMLL.jpg
Figure 1.4 – Logo UML
1.5 Calendrier prévisionnel de travail :
Le calendrier est essentiel pour gérer le travail en estimant les délais.Notre projet prévoit
une mise en œuvre de l’application dans environ trois mois.
Le tableau ci-dessous présente notre planning pour les diverses étapes du projet.
9
Cadre du Projet 10
image/gggggggggggggggnnt.png
Table 1.1 – Tableau prévisionnel de travail
10
Cadre du Projet 11
1.6 Conclusion
Dans ce chapitre, nous avons présenté l’organisme d’accueil, ses services proposés, son
historique et son organigramme, ainsi qu’une problématique et sa solution proposée. Nous
avons donné un aperçu sur la méthodologie de travail ainsi que le langage de modélisation
choisi. Le chapitre suivant on va voir la spécification et l’analyse des besoins de notre
application.
11
Chapitre 2
Spécification et Analyse des Besoins
2.1 Introduction
Aprés avoir présenté l’organisme d’accueil, le sujet proposé et la méthodologie de travail

adoptée. nous allons à présent de spécifier et analyser les besoins en expliquant les besoins
fonctionnels et non fonctionnels de notre application dans ce chapitre.
2.2 Identification des acteurs :
Dans le contexte de cas d’utilisation, un acteur représente une entité externe qui inter-
agit avec le système pour réaliser une ou plusieurs fonctionnalités .Un acteur peut être un
être humain, un matériel ou un logiciel et il est une entité externe qui utilise le système
pour atteindre ses propres objectifs.
Notre système nécessite l’intervention d’un seul acteur principal.

L’administrateur : Un administrateur de l’« Espace TT » dont le rôle est de gérer le
fonctionnement de la plateforme et il a le droit d’accès à tous.
12
Spécification et Analyse des besoins 13
2.3 Spécification des besoins :
Dans cette section, nous nous concentrons sur la spécification des besoins fonctionnels
et non fonctionnels. L’objectif est de comprendre les besoins des acteurs ainsi que leurs
exigences.
2.3.1 Les besoins Fonctionnels
Les besoins fonctionnels d’une application définissent les exigences et les spécifications
qu’elle doit remplir pour atteindre un résultat satisfaisant. Dans notre cas, l’application
doit permettre à l’administrateur les fonctionnalités suivantes :
∗ S’inscrire : L’administrateur doit s’inscrire pour accéder à l’application en four-

nissant les coordonnées nécessaires.
∗ S’authentifier :L’administrateur doit s’authentifier avec ses informations correctes

pour accéder aux fonctionnalités de l’application.
∗ Gérer Bénéficiaires : L’administrateur doit avoir la possibilité d’effectuer les ac-

tions suivantes : ajouter, modifier et supprimer des bénéficiaires. De plus, il doit
pouvoir ajouter une convention lorsqu’un bénéficiaire est ajouté.
∗ Gérer les Conventions :L’administrateur peut ajouter, modifier ou supprimer
une convention,et de voir les détails de la convention.
∗ Recevoir une notification :Une fois connecté à l’application, l’administrateur

peut recevoir des notifications concernant les conventions qui vont bientôt expirer.
∗ Gérer la liste de conventions expirées : L’administrateur peut gérer la liste de

conventions expirées.
∗ Consulter les statistiques sur un Dashboard : L’administrateur peut consulter

les statistiques sur un Dashboard pour visualiser les données.
2.3.2 Les besoins non Fonctionnels :
Afin de garantir que notre application web est robuste, fiable et facile à utili-
ser, nous avons identifié plusieurs besoins non fonctionnels, qui doivent être pris en
13
compte dans notre document de spécification des besoins tels que :
∗ Ergonomie de l’interface :Il faut construire une application conviviale dotée

d’une interface simple afin de favoriser une utilisation optimale.
∗ Fiabilité : Il est necessaire que le système assurer l’exactitude, la mise à jour

et la fiabilité de toutes les informations présentées à l’administrateur.
∗ Efficacité :L’application doit offrir des fonctionnalités simples qui facilitent la

navigation et l’exécution des tâches courantes. Cela permet à l’administrateur de
gagner du temps et de se concentrer sur les tâches essentielles, lesquelles peuvent
être effectuées en temps réel.
∗ Visibilité : Les informations doivent être présentées de manière claire et concise

avec un tableau de bord pour faciliter la compréhension et la prise de décision.
∗ Renouvellement : L’application doit permettre à l’administrateur de renouve-

ler facilement les conventions et les accords importants avec des rappels clairs et
des notifications automatiques pour éviter les retards ou les problèmes juridiques.
∗ Sécurité : La sécurité de la plateforme est primordiale, et l’accès à ses fonction-

nalités est protégé par une authentification. Seul l’administrateur est autorisé à
y accéder.
2.4 Description des cas d’utilisation
Dans cette section, nous allons décrire les différentes cas d’utilisations de notre
application web Gestion de Conventions, afin de clarifier les différentes fonctionna-
lités qu’elle offre à l’Administrateur.
2.4.1 Les cas d’utilisation de l’acteur « Administrateur »
La figure ci-dessous représente le diagramme de cas d’utilisation relatif à l’Ad-

ministrateur.
14
image/admiiiiiiiiiin.png
Figure 2.1 – Diagramme de cas d’utilisattion de l’acteur « Administrateur »
15
2.4.1.1 Raffinement de Cas d’utilisation «S’inscrire»
image/inscription.png
Figure 2.2 – Raffinement de Cas d’utilisation « S’inscrire »
Le tableau suivant présente le cas d’utilisation « S’inscrire »
16
Cas d’utilisation S’inscrire

Acteur Administrateur
Objectif Permettre à l’administrateur de créer un compte pour accéder à l’application.
Précondition Tous les champs doivent être remplis.
1.L’administrateur accède à l’application web.
2.L’administrateur sélectionne l’option s’inscrire.
3. Le système affiche un formulaire.
4.L’administrateur doit remplir tous les champs avec ses informations
Scénario Nominal
personnelles .
5.Le système vérifie les informations.
6.Le système enregistre les données .
7.Le système affiche la page d’accueil de l’application pour l’administrateur.
Postcondition L’inscription a été créé avec succès.
Scénario Alternatif Le système affiche un message d’erreur indiquant qu’il y a un champ vide.
Table 2.1 – Description Textuelle de Cas d’utilisation «S’inscrire»
17
2.4.1.2 Raffinement de Cas d’utilisation « S’authentifier »
image/authentf.png
Figure 2.3 – Raffinement de Cas d’utilisation «S’authentifier»
Ce tableau ci-dessous décrit le cas d’utilisation «S’authentifier»
18
Cas d’utilisation S’authentifier

Permettre à l’administrateur de s’authentifier via Login et Mot de passe
Objectif
avant d’accéder dans l’application.
Précondition L’administrateur doit disposer d’un compte pour pouvoir s’authentifier sur l’application.
1.L’administrateur remplit les Champs nécessaires(Login et Mot de passe)
pour se connecter à l’application.
Scénario Nominal 2.L’administrateur clique sur le bouton se connecter.
3. Le système vérifié la cohérance des données saisies par l’administrateur.
4.Le système redirige l’administrateur vers la page d’accueil.
L’administrateur est connecté à son coompte et peut accéder aux
Postcondition
fonctionnalités de l’application .
-Logion ou Mot de passe incorrecte.
Scénario Alternatif -Champ vide.
-Le système affiche un message d’erreur.
Table 2.2 – Description Textuelle de Cas d’utilisation «S’authentifier»
19
2.4.1.3 Raffinement de Cas d’utilisation «Gérer Bénéficiaires»
image/benefiici.png
Figure 2.4 – Raffinement de Cas d’utilisation «Gérer Bénéficiaires»
20
Cas d’utilisation Gérer Bénéficiaire

Permettre à l’administrateur d’ajouter, modifier et supprimer des bénéficiaires
Objectif
ainsi que d’ajouter une convention à partir de l’ajout d’un bénéficiaire.
Précondition L’administrateur doit etre authentifié .
1.L’administrateur selectionne l’option Bénéficiaire.
2.L’administrateur ajouté un nouveau bénéficiaire en saisissant ses informations.
3.Le système vérifie et ajoute le bénéficiaire à la liste.
Scénario Nominal 4.L’administrateur peut ensuite ajouter une convention liée au bénéficiaire
ajouté.
5.Le système enregistre la convention et l’associe au bénéficiaire.
6.L’administrateur peut aussi modifier ou supprimer un bénéficiaire existant.
-Si les informations saisies sont correctes , un message de succès s’affiche.
Scénario Alternatif -Sinon un message d’erreur affiché,pour indiquer que les informations saisies
invalides ou que certains champs sont vides.
Table 2.3 – Description Textuelle de cas d’utilisation «Gérer Bénéficiaires»
21
2.4.1.4 Raffinement de Cas d’utilisation «Gérer les Conventions»
image/gestion convention.png
Figure 2.5 – Raffinement de cas d’utilisation «Gérer les Conventions»
Le tableau 2.3 donne un aperçu du déroulement du cas d’utilisation «Gérer les conven-
tions»
22
Cas d’utilisation Gérer les conventions

Objectif Permettre à l’administrateur de gérer les conventions dans l’application.
Précondtion L’administrateur a accès à la page de gestion des conventions.
1. L’administrateur consulte la plateforme.
2.Le systéme affiche la liste des conventions existantes.
3.L’administrateur choisit une option : modifier ou supprimer une
Scénario Nominal
convention.
4.Le système redirige l’administrateur vers la page correspondante
pour effectuer l’opération choisie.
Postcondition La convention est modifiée, ou supprimée avec succés .
Scénario Alternatif Le champ doit être obligatoirement rempli. Sinon, un message d’erreur devrait s’afficher.
Table 2.4 – Description Textuelle de Cas d’utilisation «Gérer les conventions»
23
2.4.1.5 Raffinement de Cas d’utilisation «Recevoir une Notification»
image/notiiiiiiiiiiiiiiiif.png
Figure 2.6 – Raffinement de Cas d’utilisation «Recevoir une Notification»
Le tableau 2.4 présente la description textuelle de cas d’utilisation «Recevoir une No-
tification»
24
Cas d’utilisation Recevoir une Notification

Objectif Permet à l’administrateur de recevoir une notification.
Précondtion L’admoninistarteur doit se connecter
Aprés avoir reçu la notification , l’administrateur est informé que la
Postcondition
date d’expiration de l’accord approche .
1.Le système détecte qu’une convention approche de sa date
d’expiration.
Scénario Nominal
2.Le système envoie une notification à l’administrateur
pour l’informer que la date de la convention est bientot expirée.
Table 2.5 – Description Textuelle de Cas d’utilisation «Recevoir une Notification»
25
2.4.1.6 Raffinement de Cas d’utilisation «Gérer la liste de conventions expi-

rées»
image/expirationn.jpg
Figure 2.7 – Raffinement de Cas d’utilisation «Gérer la liste de conventions expirées»
26
Ce tableau 2.5 montre comment se déroule le cas d’utilisation «Gérer la liste des conven-
tions expirées»
Cas d’utilisation Gérer la liste de convention expirée .

Permettre à l’administrateur de gérer les conventions
Objectif
qui sont échues dans la liste.
Précondtion L’administrateur doit etre authentifié.
1.L’administarteur accéde à l’application.
2.Le système affiche la liste des conventions enregistrées.
3.Le système vérifie si la date d’expiration d’une convention
approche.
4.Le système envoie une notification à l’administrateur
Scénario Nominal lorsque la date d”expiration d’une convention approche.
5.Aprés l’expiration de la convention, le système la classe comme expirée et l’ajoute
automatiquement à une liste dédiée des conventions expirées pour que l’administrateur
puisse y consulter.
6.L’administrateur peut Renouveler, Supprimer une convention à partir de
cette liste .
L’administrateur peut consulter la liste des accords et effectuer diverses taches sur les
Postcondition
conventions.
Table 2.6 – Description Textuelle de Cas d’utilisation «Gérer la liste de conventions

expirées»
27
2.4.1.7 Raffinement de Cas d’utilisation «Consulter les statistiques »
image/consulter.png
Figure 2.8 – Raffinement de Cas d’utilisation «Consulter les statistiques»
28
Cas d’utilisation Consulter les statistiques sur un Dashboard

Permettre à l’administrateur de consulter les statistiques de conventions
Objectif
sur un Dashboard pour avoir une vue global sur les conventions.
Précondition L’administrateur doit etre authentifié .
1.L’administrateur accéde à la page de Dashboard en cliquant sur le
bouton correspondant dans le menu.
2.Le système affiche le Dashboard qui contient les suivantes :
Scénario Nominal
a-afficher le nombre total des bénéficiaires .
b - afficher le nombre total des conventions encours,ainsi que le nombre de
conventions bientot expirées et le nombre des accords qui ont terminées.
Postcondition L’administrateur a consulté les statistiques .
Table 2.7 – Description Textuelle de cas d’utilisation «Consulter les statistiques»
2.4.2 Diagramme de cas d’utilisation général
Les diagrammes de cas d’utilisation (DCU) sont des outils graphiques de l’UML
qui servent à représenter le comportement fonctionnel d’un système logiciel.
La figure 2.7 représente le diagramme de cas d’utilisation global.
29
image/tttttttttttikpng.png
Figure 2.9 – Diagramme de cas d’utilisattion Global
30
2.4.3 Tableau récapitulatif des cas d’utilisation :

Acteur Intitulé Cas d’utilisation Description
L’administrateur doit s’inscrire et avoir un compte avant
S’inscrire
d’accéder à l’application .
L’administrateur doit s’authentifier via Login et Password
S’authentifier
Administrateur pour obtenir l’accès à l’application.
L’administrateur ajoute un nouveau bénéficiaire et une convention associée.
Gérer Bénéficiaires
Il peut également modifier ou supprimer les bénéficiaires existants.
L’administrateur a le droit de gérer plusieurs conventions en effectuant
différentes opérations :
-Il est capable de modifier une ou plusieurs conventions.
Gérer les conventions -Il est apte de supprimer et de voir les détails d’une ou de plusieurs
conventions.
Il est primordial de faire une authentification préalable afin de pouvoir
accéder à l’application et ainsi gérer l’ensemble de ces opérations.
Le système détecte lorsque la date d’expiration d’une convention
Recevoir une notiification approche et envoie une notification à l’administrateur pour l’en
informer.
Aprés l’expiration de la convention,l’administrateur peut gérer la liste
Gérer la liste des conventions
des conventions expirées.
expirées
Il a alors le choix de renouveler une convention, de supprimer une convention.
Le Dashboard permet à l’administrateur de voir les statistiques
des conventions :
-Voir nombre total des bénéficiaires.
Voir les statistiques de convention
-Afficher le nombre total des conventions encours,des conventions
sur le Dashboard
bientot terminées et les conventions qui ont expirées.
Grace à ce Dashboard l’administrateur dispose d’une vue claire
et directe.
Table 2.8 – Tableau récapitulatif des cas d’utilisation
2.5 Conclusion
Au cours de ce chapitre , nous avons identifié les besoins majeurs de notre application et
présenté les différents diagrammes pour clarifier ces besoins. Maintenant que nous avons une
vue d’ensemble de ce que notre projet nécessite, nous sommes prêts à passer au troisième
chapitre, qui se concentrera sur la conception de notre application.
31
Chapitre 3
Conception
3.1 Introduction
Après avoir défini les exigences et l’analyse. Dans ce chapitre de conception, nous nous
concentrerons sur la modélisation de notre système. Nous montrerons différents diagrammes
pouvant représenter le fonctionnement du système, tels que des diagrammes de séquence,
de classes et d’activités.
3.2 Conception des cas d’utilisation
Dans cette section consacrée à l’élaboration de la conception de notre projet, nous allons
utiliser les diagrammes de séquences, de classes et d’activités associés à notre application.
Ces diagrammes jouent un rôle essentiel en facilitant la compréhension, la communication
et la réalisation de notre conception.
3.2.1 Diagramme de séquence
Un diagramme de séquence permet de visualiser la chronologie des échanges de messages

entre les objets lors d’une interaction. Il est composé d’un groupe d’objets représentés
par des lignes de vie, ainsi que des flèches représentant les messages échangés entre ces
objets pendant l’interaction. Le diagramme de séquence capture la dynamique et l’ordre
des interactions entre les objets impliqués.
32
Conception 33
3.2.1.1 Diagramme de séquence «inscription»
La Figure ci-dessous de diagramme de séquence illustre le processus d’inscription sur

notre application web.
33
Conception 34
image/inns.png
Figure 3.1 – Diagramme de séquence «inscription»
34
Conception 35
3.2.1.2 Diagramme de séquence «Authentification»
Le diagramme de séquence ci-dessous présente les différentes étapes à suivre pour ef-
fectuer le processus d’authentification.
35
Conception 36
image/authentiific.png
Figure 3.2 – Diagramme de séquence «Authentification»
36
Conception 37
3.2.1.3 Diagramme de séquence «Ajouter un bénéficiaire»
Le diagramme de séquence présente la séquence d’actions lorsque l’administrateur pro-

cède à l’ajout d’un bénéficiaire.
37
Conception 38
image/ajoutbenef.png
Figure 3.3 – Diagramme de séquence «Ajouter un bénéficiaire»
38
Conception 39
3.2.1.4 Diagramme de séquence «Gérer les conventions»
Dans le diagramme de séquence suivant, nous allons présenter les séquences effectuées
pour la gestion des conventions, telles que la modification et la suppression d’une conven-
tion.
39
Conception 40
image/geeeeeeeeeeeeeeeeeeerconventtttttttttt.png
Figure 3.4 – Diagramme de séquence «Gérer les conventions»
40
Conception 41
3.2.1.5 Diagramme de séquence «Ajouter une convention»
Le diagramme de séquence montre la séquence d’actions qui se déroulent lorsqu’un

administrateur ajoute une convention.
41
Conception 42
image/addconvent.png
Figure 3.5 – Diagramme de séquence «l’ajout d’une convention»
42
Conception 43
3.3 Diagramme de classe général
"Le diagramme de classe est utilisé pour représenter les classes qui interviennent dans
un système. Il s’agit d’une représentation statique des différents éléments qui composent
le système, ainsi que de leurs relations".[clasiii]
Le diagramme de classe général de notre application est présenté dans la figure 3.6 pour
mettre en évidence les différentes relations de cet acteur.
43
Conception 44
image/classse.png
Figure 3.6 – Diagramme de classe
44
Conception 45
3.4 Diagramme d’activité
"En UML, un diagramme d’activité est utilisé pour montrer la séquence d’activités.
Les diagrammes d’activité affichent le flux de travail du début à la fin en détaillant les
nombreux chemins de décision qui existent dans la progression des événements contenus
dans l’activité."[activ]
3.4.1 Diagramme d’activité du cas d’utilisation «Authentification»
Le système affiche le formulaire d’authentification. L’administrateur saisit son adresse

email ainsi que son mot de passe. Ensuite, le système effectue une vérification. Si les
informations sont validées, le système affiche la page d’accueil. Sinon, il affiche un message
d’erreur.
45
Conception 46
image/authentifier.png
Figure 3.7 – Diagramme d’activité du cas d’utilisation «Authentification»
46
Conception 47
3.4.2 Diagramme d’activité du cas d’utilisation de «l’ajout d’un

bénéficiare»
Après s’être authentifié, l’administrateur accède à la fonctionnalité «Bénéficiaires» et

sélectionne l’option «Ajouter un bénéficiare». Le système affiche alors un formulaire dédié.
L’administrateur remplit les champs requis dans le formulaire, puis clique sur le bouton
"Ajouter". Ensuite, un message de confirmation s’affiche pour indiquer que le bénéficiare
a été ajouté avec succès.
47
Conception 48
image/ajouterrrrrbeneef.png
Figure 3.8 – Diagramme d’activité du cas d’utilisation «Ajouter un bénéficiare»
48
Conception 49
3.4.3 Diagramme d’activité du cas d’utilisation «Ajouter une conven-

tion»
Après l’authentification, l’administrateur accède à la fonctionnalité «Liste des bénéfi-

ciaires», ce qui lui permet de visualiser la liste des bénéficiaires. Ensuite, il choisit l’option
«Ajouter une convention» pour accéder au formulaire d’ajout d’une nouvelle convention.
L’administrateur saisit toutes les informations requises dans les champs obligatoires du
formulaire, puis clique sur le bouton «Ajouter». Un message de confirmation s’affiche, in-
diquant que la convention a été ajoutée avec succès.
49
Conception 50
image/conventionajoutÃľÃľ.png
Figure 3.9 – Diagramme d’activité du cas d’utilisation «Ajouter une convention»
50
Conception 51
3.4.4 Diagramme d’activité du cas d’utilisation «Gestion des conven-

tions»
La figure ci-dessous décrit le diagramme d’activité de cas d’utilisation «Gestion des

conventions». Après l’authentification, l’administrateur clique sur le bouton « Gestion des
conventions ». En conséquence, une liste des conventions avec leurs détails s’affiche dans
la page « Gestion des conventions ».
51
Conception 52
image/gestion des convention.png
Figure 3.10 – Diagramme d’activité du cas d’utilisation «Gestion des conventions»
52
Conception 53
3.4.5 Diagramme d’activité du cas d’utilisation «Modifier une conven-

tion»
La Figure décrit le diagramme d’activités du cas d’utilisation « Modifier une conven-

tion ». Après l’authentification, l’administrateur clique sur le bouton « Gestion des conven-
tions»ce qui affiche la liste des conventions. Il choisit la convention à modifier en cliquant
sur le bouton « Modifier » qui se trouve sur la même ligne que la convention sélectionnée.
En conséquence, le formulaire de modification s’affiche. L’administrateur effectue les mo-
difications souhaitées, puis clique sur le bouton « Enregistrer ». Un message indiquant le
succès ou l’échec de l’opération s’affiche.
53
Conception 54
image/modifyyyy.png
Figure 3.11 – Diagramme d’activité du cas d’utilisation «Modifier une convention»
54
Conception 55
3.4.6 Diagramme d’activité du cas d’utilisation «La suppression

d’une convention»
Après s’être authentifié, l’administrateur accède à la fonctionnalité «Gestion des conven-

tions». Cela affiche la liste des conventions disponibles. L’administrateur sélectionne la
convention à supprimer en cliquant sur le bouton «Supprimer». La suppression de la conven-
tion s’effectue avec succès.
55
Conception 56
image/suppression.png
Figure 3.12 – Diagramme d’activité du cas d’utilisation «Supprimer une convention»
56
Conception 57
3.5 Conclusion
Dans ce chapitre de conception, nous avons pu modéliser notre système à l’aide de diffé-
rents diagrammes. Nous avons donc représenté en détail le fonctionnement de l’application
à l’aide de différents diagrammes.
Dans le chapitre suivant, nous passerons à la réalisation de notre application.
57
Chapitre 4
Implémentation et Résultats
4.1 Introduction
Après avoir présenté la conception de notre projet .Ce chapitre se concentre sur la
presentation de l’architecture ainsi que sur l’environnement de développement que nous
avons utilisé, à la fois en termes de matériel et de logiciel. Nous clôturons ce chapitre par
quelques captures d’écran montrant les fonctionnalités de notre application.
4.2 Architecture MVC
"L’architecture le Modèle,la Vue et le Contrôleur (MVC) est une façon d’organiser une
interface graphique d’un programme. Elle consiste à distinguer trois entités distinctes qui
sont, le modèle, la vue et le contrôleur ayant chacun un rôle précis dans l’interface.
L’organisation globale d’une interface graphique est souvent délicate. Bien que la façon
MVC d’organiser une interface ne soit pas la solution miracle, elle fournit souvent une
première approche qui peut ensuite être adaptée. Elle offre aussi un cadre pour structurer
une application.
Dans l’architecture MVC, les rôles des trois entités sont les suivants :
• Modèle : Le modèle gère les données et leur accès, ainsi que leur mise à jour.
• Vue :La Vue représente l’interface utilisateur, permettant les entrées et sorties de
58
Implementation et Résultats 59
données.
• Contrôleur : Le Contrôleur gère les événements utilisateur et synchronise le modèle
et la vue."[viiew]
image/mvccccccccc.png
Figure 4.1 – Architecture MVC
4.3 Environnement de Développement
Dans cette partie, nous présentons l’environnement matériel mis à la répartition du

projet ainsi, que l’environnement logiciel utilisé pour le développement de notre application
web.
59
4.3.1 Environnement Matériel

Nous avons utilisé un poste de travail pour développer notre application, dont les
caractéristiques sont présentées dans le tableau ci-dessous. Cet environnement matériel
nous a permis de mener à bien la réalisation de notre projet.
Les Caractéristiques Ordinateur

Marque Pc Portable Model ASUS.
Processeur Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz 1.19GHz .
Mémoire RAM 8 GO .
Type du Système Système d’exploitation 64 bits, processeur x64.
Système d’exploitation Windows 11 Famille Unilingue.
Table 4.1 – Environnement matériels utilisé
4.3.2 Environnement Logiciel
Dans cette partie,nous présentons les logiciels ,les langages et les outils nécessaires pour
exécuter notre application.
Pour mener à bien mon projet de fin d’études, j’ai maîtrisé d’un vaste éventail d’outils
et de logiciels. L’ensemble de ces outils et logiciels est essentiel pour la réalisation efficace
de mon projet.
•StarUML
• Visual Studio Code VSC
• Online LaTeX Editor Overleaf
•Laragon
• MySQL
•Bootstrap
• JavaScript
• Laravel
• Node.js
• Vue.JS
• HTML5
•CSS3
60
image/envire.png
Figure 4.2 – Environnement logiciel
Si vous souhaitez obtenir des informations plus détaillées sur ces outils et logiciels,
vous pouvez consulter l’Annexe . Celle-ci offre une description complète et approfondie de
chaque outil.
4.4 Description de l’Application :
4.4.1 Présentation des interfaces de l’application
Dans cette section, nous allons présenter des captures d’écran qui illustrent l’apparence
de notre application. Nous allons également décrire les diverses interfaces que nous avons
conçues.
4.4.1.1 Interface «Authentifiction»
4.4.1.2 Interface «Ajouter un bénéficiaire»
La Figure ci-dessous permet à l’administrateur de l’application d’ajouter un nouveau

bénéficiaire.
61
4.4.1.3 Interface «Modifier bénéficiaire»
4.4.1.4 Interface «Supprimer une convention»
4.4.1.5 Interface «Liste des conventions»
La Figure suivante présente la liste des conventions.
4.4.1.6 Interface «Renouveler une convention»
À partir de cette interface, l’administrateur peut renouveler une convention.
4.4.1.7 Interface «Consulter statistiques»
4.5 Conclusion
Dans ce chapitre, nous avons identifié l’architecture de notre application web, ainsi
que l’environnement matériel et logiciel nécessaires pour son fonctionnement. Nous avons
présenté les diverses interfaces de l’application.
Finalement, nous avons achevé notre rapport avec ce dernier chapitre.
62
Conclusion et perspectives
63
ANNEXE
Environnement Logiciel :
Dans cette partie,nous présentons les logiciels ,les langages et les outils nécessaires pour
exécuter notre application.
• Outil de Modélisation : StarUML

StarUML est un outil logiciel dédié à la modélisation de logiciels.Il offre une interface et
des fonctionnalités spécifiques permettant aux développeurs de créer et de manipuler des
diagrammes UML pour la conception logicielle.
image/th.jpeg
Figure 4.3 – Logo StarUML
• Visual Studio Code VSC :

"Visual Studio Code est un éditeur de code simplifié, qui est gratuit et développé en open
source par Microsoft. Il fonctionne sous Windows, mac OS et Linux. Il fournit aux dévelop-
peurs à la fois un environnement de développement intégré avec des outils permettant de
faire avancer les projets techniques, de l’édition, à la construction, jusqu’au débogage."[vc]
64
ANNEXE 65
image/logo vs code.jpg
Figure 4.4 – Logo Visual Studio Code
• Outil de Documentation : Online LaTeX Editor Overleaf

Overleaf est une plateforme en ligne utilisant LaTeX, un langage de composition de do-
cuments scientifiques. LaTeX permet de créer des documents de qualité professionnelle
avec une mise en page automatique en utilisant des commandes simplifiées pour le texte,
les images et les tableaux. Très répandu dans les domaines scientifiques, LaTeX est open
source et gratuit.
image/Logo.Overlaef.jpg
Figure 4.5 – Logo Overleaf Online LaTeX Editor
•Laragon
"Laragon est un environnement de développement web ou serveur de développement local
utilisé pour créer et tester des applications web qui regroupe des serveurs comme Apache
HTTP Server et MySQL .Il apporte également des outils pour gérer une application web
tels que PHP ,Node.js ,HeidiSQL et PhpMyAdmin etc."[laragooon]
image/laragon.jpeg
Figure 4.6 – Logo Laragon
65
ANNEXE 66
• Système de gestion de base de données

"MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est
distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion
de base de données les plus utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels."[mysqlllll]
image/mysql.jpeg
Figure 4.7 – Logo MySQL
•Bootstrap :
"Bootstrap est un framework développé par l’équipe du réseau social Twitter. Il est proposé
en open source. Ce framework utilise les langages HTML, CSS et JavaScript pour fournir
aux développeurs des outils leur permettant de créer des sites facilement. On qualifie ce
type de framework de "Front-End Framework".[btstp]
image/bootstrap.jpeg
Figure 4.8 – Logo Bootstrap
•HTML5
"HTML5 pour « HyperText Markup Language 5 », est une version du célèbre format
HTML utilisé pour concevoir les sites Internet. C’est un langage de balisage permettant la
mise en forme d’une page Web.
HTML5 est une version successeur de la version HMTL 4.0 Lancée en octobre 2014, cette
version a ajouté certaines nouveautés par rapport à la version précédente. Elle offre par
exemple la possibilité de définir le contenu principal d’une page Web en plusieurs sections
(Header, Footer, Nav,Main et Aside)."[xml]
66
ANNEXE 67
image/Logo HTML.jpg
Figure 4.9 – Logo HTML
67
ANNEXE 68
•CSS3 :
"Le terme CSS est l’acronyme anglais de Cascading Style Sheets qui peut se traduire par
feuilles de style en cascade. Le CSS est un langage informatique utilise sur l’internet ´
pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi ap-
pele les fichiers CSS, comprennent du code qui permet de gérer le design d’une page en
HTML."[cssss]
image/LOGO CSS3.jpg
Figure 4.10 – Logo CSS3
• JavaScript :
"JavaScript est un langage de programmation qui permet d’implémenter des mécanismes
complexes sur une page web. À chaque fois qu’une page web fait plus que simplement
afficher du contenu statique. C’est la troisième couche des technologies standards du web,
les deux premières (HTML et CSS)."[jjjs]
image/js.jpeg
Figure 4.11 – Logo JavaScript
• Laravel :
"Laravel est un framework web open-source écrit en PHP respectant le principe modèle-
vue-contrôleur et entièrement développé en programmation orientée objet. Laravel est dis-
tribué sous licence MIT, avec ses sources hébergées sur GitHub."[laarrra]
68
ANNEXE 69
image/Logo Laravel.jpg
Figure 4.12 – Logo Laravel
• Node.js :
"Node.js est un environnement javascript multiplateforme qui permet aux développeurs de
créer des applications réseaux et côté serveur en utilisant JavaScript."[nod]
image/node.png
Figure 4.13 – Logo Node.JS
• Vue.JS :
"Vue (à prononcer comme en anglais : view) est un framework JavaScript qui se repose
sur les standards HTML, CSS et JavaScript. Il propose une manière efficace de déclarer
des composants pour la construction d’interfaces utilisateur, qu’elles soient simples ou
complexes."[VVV]
image/vue.js logo.png
Figure 4.14 – Logo Vue.JS
69
Résumé
Ce projet a été réalisé au sein de l’entreprise Tunisie Telecom dans le but d’obtenir le
diplôme de Licence en Informatique de gestion à l’Institut Supérieur d’Informatique et de
Gestion de Kairouan.
L’objectif de ce projet était de concevoir et développer une application web permettant la
digitalisation de la gestion des conventions. La réalisation de ce projet s’est basée sur le
Framework "Bootstrap" pour la partie Front-end et sur Laravel pour la partie back-end,
avec un système de gestion de données MySQL.
Abstract
This project was carried out within the Tunisie Telecom company in order to obtain the
Bachelor’s degree in IT management at the Higher Institute of IT and Management in
Kairouan.
The objective of this project was to design and develop a web application allowing the
digitalization of the management of conventions. The realization of this project was based
on the "Bootstrap" Framework for the Front-end part and on Laravel for the back-end
part, with a MySQL data management system.
ANNEXE 71
71

Rapport PFE Tayssir

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport PFE Tayssir

Transféré par

Droits d'auteur :

Formats disponibles

République Tunisienne Ministère de

PROJET DE FIN D’ETUDES

Conception et Réalisation d’une

Encadreur Académique : Mr Kalboussi Anis

Année universitaire 2023 / 2024

À Mon Cher Pére Abdelbasset

À Ma Belle Mére Houda

À Mes Adorables Sœurs Intissar et Mariem

Que ce travail soit l’expression d’un amour sincère et d’une affection

À Mon Fiancé Wassef

Tout au long de ce projet, Wassef a été un pilier solide, m’encourageant,

Sa confiance en moi et en mes capacités a été un véritable moteur pour

Merci pour vos encouragements sans fin, pour ta compréhension pendant

Je suis extrêmement chanceuse de t’avoir dans ma vie, tu es un trésor

Je tiens à te remercier pour ton amitié sincère, ton soutien indéfectible et

À Ma Meilleure Amie Haifa

Avec toute ma gratitude, je tiens à te dédier mon projet de fin d’études,

Je remercie Dieu le tout-puissant pour la santé, la détermination et l’énergie

Tout d’abord, je tiens à exprimer toute ma gratitude et mes remerciements

Je voudrais également exprimer ma reconnaissance envers mon encadrant

Je tiens pareillement à exprimer ma gratitude envers mon encadrant

1.2 Présentation de l’organisme d’Accueil . . . . . . . . . . . . . . . . . . . . 3

1.2.2 Vision historique de l’entreprise Tunisie Telecom . . . . . . . . . . 4

1.2.3 Organigramme de TUNISIE TELECOM . . . . . . . . . . . . . . . 5

1.2.4 Les prestations offerts par Tunisie Télécom . . . . . . . . . . . . . . 5

1.3 Présentation du sujet proposé : . . . . . . . . . . . . . . . . . . . . . . . . 6

1.3.2 Solution Envisagée . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.4 Méthodologie de travail adoptée : . . . . . . . . . . . . . . . . . . . . . . . 7

1.4.1 La Méthode Adoptée : Le cycle de vie en Cascade . . . . . . . . . 7

1.4.2 Le langage de Modélisation . . . . . . . . . . . . . . . . . . . . . . 9

1.5 Calendrier prévisionnel de travail : . . . . . . . . . . . . . . . . . . . . . . 9

2 Spécification et Analyse des Besoins 12

2.2 Identification des acteurs : . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.3 Spécification des besoins : . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.1 Les besoins Fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.2 Les besoins non Fonctionnels : . . . . . . . . . . . . . . . . . . . . . 13

2.4 Description des cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 14

2.4.1 Les cas d’utilisation de l’acteur « Administrateur » . . . . . . . . . 14

2.4.1.1 Raffinement de Cas d’utilisation «S’inscrire» . . . . . . . . 16

2.4.1.2 Raffinement de Cas d’utilisation « S’authentifier » . . . . 18

2.4.1.3 Raffinement de Cas d’utilisation «Gérer Bénéficiaires» . . 20

2.4.1.4 Raffinement de Cas d’utilisation «Gérer les Conventions» . 22

2.4.1.5 Raffinement de Cas d’utilisation «Recevoir une Notification» 24

2.4.1.6 Raffinement de Cas d’utilisation «Gérer la liste de conven-

2.4.1.7 Raffinement de Cas d’utilisation «Consulter les statistiques » 28

2.4.2 Diagramme de cas d’utilisation général . . . . . . . . . . . . . . . . 29

2.4.3 Tableau récapitulatif des cas d’utilisation : . . . . . . . . . . . . . . 31

3.2 Conception des cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 32

3.2.1 Diagramme de séquence . . . . . . . . . . . . . . . . . . . . . . . . 32

3.2.1.1 Diagramme de séquence «inscription» . . . . . . . . . . . 33

3.2.1.2 Diagramme de séquence «Authentification» . . . . . . . . 35

3.2.1.3 Diagramme de séquence «Ajouter un bénéficiaire» . . . . . 37

3.2.1.5 Diagramme de séquence «Ajouter une convention» . . . . 41

3.3 Diagramme de classe général . . . . . . . . . . . . . . . . . . . . . . . . . 43

3.4 Diagramme d’activité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.4.1 Diagramme d’activité du cas d’utilisation «Authentification» . . . . 45

3.4.2 Diagramme d’activité du cas d’utilisation de «l’ajout d’un bénéficiare» 47

3.4.3 Diagramme d’activité du cas d’utilisation «Ajouter une convention» 49

3.4.4 Diagramme d’activité du cas d’utilisation «Gestion des conventions» 51

3.4.5 Diagramme d’activité du cas d’utilisation «Modifier une convention» 53

3.4.6 Diagramme d’activité du cas d’utilisation «La suppression d’une

4.2 Architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

4.3 Environnement de Développement . . . . . . . . . . . . . . . . . . . . . . . 59