Page de garde

Dédicaces

À mes parents, qui ont toujours été présents pour moi, m’encourageant et me soutenant tout
au long de ma vie. Votre amour inconditionnel et votre soutien constant ont été ma source de
force et de motivation. Je vous suis profondément reconnaissante.

À mes frères et sœurs, qui ont partagé avec moi des moments de joie, d’aventure et de soutien
mutuel. Votre présence dans ma vie a été un véritable cadeau et je suis fier d’avoir partagé ces
expériences avec vous.

À ma famille élargie, qui ont toujours été là pour moi. Vos encouragements et vos conseils
précieux ont été d’une grande importance pour moi.

À mes amis fidèles, qui ont été à mes côtés, m’apportant leur soutien tout au long de ce
parcours. Vos encouragements, votre amitié et vos moments de rire ont rendu cette expérience
encore plus mémorable.

Enfin, à tous ceux qui ont croisé ma route et qui ont contribué à ma croissance personnelle et
professionnelle, je vous exprime ma profonde gratitude. Vos enseignements, vos conseils et
vos encouragements ont façonné la personne que je suis aujourd’hui.

À vous tous, je dédie ce travail. Votre amour, votre soutien et votre présence ont été les piliers
de ma réussite. Je vous suis infiniment reconnaissante et je ne pourrai jamais assez vous
remercier pour tout ce que vous avez fait pour moi.
 Remerciements

C’est avec un grand plaisir que je réserve ces quelques lignes en signe de gratitude et
reconnaissance à tous ceux qui ont contribué à la réalisation de ce projet.

Mon encadrante Madame Basma Ben Salah, pour m’avoir incité à mener à bien ce travail,
pour son aide, son temps passé pour me guider, sa persévérance, son encouragement qu’elle
me prodigué, son dévouement et ses précieux conseils.

Mon encadrante industriel Madame Intissar Ben Zouari, pour m’avoir accordé son temps et
pour avoir mis à ma disposition ses compétences et ses conseils pour une meilleure maitrise
du sujet.

Tout l’ensemble du personnel de la société « Tunisie Technologie » pour leur coopération et

leur aide en m’offrant un environnement favorable au bon déroulement de ce stage.

Toute l’équipe pédagogique et administrative de « ISET Sousse » pour tous les efforts fournis
afin de nous offrir une formation de qualité.
 Sommaire

Chapitre 1 : Présentation du cadre de projet........................................................................................... 10

1.Présentation de la société d’accueil [1]........................................................................................... 10
3.Étude préalable................................................................................................................................ 11
3.1.Analyse de l’existant................................................................................................................ 11
3.2 Critique de l’existant................................................................................................................ 14
3.4.Solution proposée..................................................................................................................... 17
4.Choix de la méthodologie de gestion du projet............................................................................... 18
5.Diagramme de GANTT................................................................................................................... 19
Chapitre 2 : Spécification des besoins.................................................................................................... 21
1.Spécification des besoins................................................................................................................ 21
1.1.Identification des acteurs......................................................................................................... 21
1.2.Besoins fonctionnels................................................................................................................ 21
1.3.Besoins non fonctionnels......................................................................................................... 23
2.Présentation des cas d’utilisation.................................................................................................... 23
2.1.Diagramme des cas d’utilisation global................................................................................... 24
2.2.Diagramme des cas d’utilisation raffiné.................................................................................. 24
3.Architecture..................................................................................................................................... 31
3.1.Architecture physique.............................................................................................................. 31
3.2.Architecture applicative........................................................................................................... 32
Chapitre 3 : Conception.......................................................................................................................... 34
1.Diagramme de séquences................................................................................................................ 34
 1.1.Diagramme de séquences « s’authentifier »............................................................................ 34
1.2.Diagramme de séquences « S’inscrire ».................................................................................. 36
1.3.Diagramme de séquence « traiter les demandes d’inscription des utilisateurs ».....................36
2.Diagramme d’états-transitions........................................................................................................ 37
2.1.Diagramme d’états-transitions d’une réservation.................................................................... 38
2.2.Diagramme d’états-transitions d’une installation sportive...................................................... 38
2.3.Diagramme d’états-transitions d’un utilisateur........................................................................ 39
3.Diagramme d’activités.................................................................................................................... 39
3.1.Diagramme d'activités de l'authentification............................................................................. 40
3.2.Diagramme d’activités de s’inscrire........................................................................................ 41
3.3.Diagramme d’activités de traiter les demandes d’inscription des utilisateurs.........................42
3.4.Diagramme d’activité réserver une installation sportive pour un événement..........................44
3.5.Diagramme d’activités de gérer les équipes............................................................................ 45
4.Diagramme de classes..................................................................................................................... 46
Chapitre 4 : Réalisation.......................................................................................................................... 48
1.Environnement de développement.................................................................................................. 48
1.1.Environnement matériel........................................................................................................... 48
1.2.Environnement logiciel............................................................................................................ 48
2.Interfaces graphiques....................................................................................................................... 54
 Liste des abréviations

UML : Unified Modeling Language

MVC : Model Controller View

HTML : Hypertext Markup Languag

CSS : Cascading Style Sheets

PHP : Personal HomePage

SQL : Structured Query Language

 Liste des figures
Figure 1: Logo de la société d’accueil.................................................................................................... 12
Figure 2: Application SportEasy............................................................................................................. 13
Figure 3: Application Easy2coach.......................................................................................................... 14
Figure 4: Application SportFinder.......................................................................................................... 15
Figure 5: Modèle en Cascade [5]............................................................................................................ 20
Figure 6: Diagramme de GANTT........................................................................................................... 20
Figure 7: Diagramme des cas d’utilisation global.................................................................................. 25
Figure 8: Diagramme des cas d’utilisation « S’authentifier »................................................................ 26
Figure 9: Diagramme des cas d’utilisation « Mettre à jour le profil »................................................... 27
Figure 10 :Diagramme des cas d’utilisation « Traiter les demandes de réservation des stades » ..........28
Figure 11: Diagramme des cas d’utilisation " Traiter les demandes d’inscription des utilisateurs " .....29
Figure 12 : Diagramme de cas d’utilisation « Gérer les stades et les installations sportives » ..............30
Figure 13: Architecture physique [7]...................................................................................................... 32
Figure 14: Architecture MVC [8]........................................................................................................... 33
Figure 15: Diagramme de séquences « S’authentifier »......................................................................... 35
Figure 16: Diagramme de séquences « S’inscrire »............................................................................... 36
Figure 17: Diagramme de séquences « Traiter les demandes d’inscription des utilisateurs » ...............37
Figure 18: Diagramme de séquences « Traiter les demandes d’inscription des utilisateurs » ...............38
Figure 19: Diagramme d’états-transitions d’une installation sportive................................................... 38
Figure 20: Diagramme d’états-transitions d’un utilisateur..................................................................... 39
Figure 21: Diagramme d'activités de l'authentification.......................................................................... 40
Figure 22: Diagramme d'activités de s’inscrire..................................................................................... 41
Figure 23: Diagramme d'activités de traiter les demandes d’inscription................................................ 42
Figure 24: Diagramme d'activités de réserver une installation sportive pour un événement .................43
Figure 25: Diagramme d'activités de gérer les équipes.......................................................................... 44
Figure 26: Diagramme de classes........................................................................................................... 45
Figure 27: Logo Vscode [9].................................................................................................................... 47
Figure 28: Logo Laravel [10]................................................................................................................. 48
Figure 29: Logo Postman [11]................................................................................................................ 48
Figure 30: Logo MySQL [12]................................................................................................................. 49
Figure 31: Logo Visual Paradigm Online [13]....................................................................................... 49
Figure 32: Logo Xampp [14].................................................................................................................. 50
Figure 33: logo PHP [15]........................................................................................................................ 50
Figure 34: logo Bootstrap [16]............................................................................................................... 51
Figure 35: logo JavaScript [17].............................................................................................................. 51
Figure 36: logo CSS3 [18]...................................................................................................................... 51
Figure 37: logo HTML5 [19].................................................................................................................. 52
Figure 38: logo Ajax [20]....................................................................................................................... 52
Figure 39: Interface d’authentification avec message d’erreur.............................................................. 53
Figure 40: Interface d’authentification avec adresse ou mot de passe incorrect....................................54
Figure 41: Interface d’inscription........................................................................................................... 54
Figure 42: Interface Liste des utilisateurs............................................................................................... 55
Figure 43: Interface Liste des stades...................................................................................................... 55
Figure 44: Interface Liste des équipes.................................................................................................... 56
Figure 45: Interface Liste des demandes de réservation des installations sportives .............................. 56
Figure 46: Interface Liste des réservations effectuées par l’organisateur d’événements .......................57
Figure 47: Interface calendrier de réservation des installations sportives.............................................. 57
Figure 48: Interface liste des matchs...................................................................................................... 58
Figure 49: Interface liste des compétitions............................................................................................. 58
Figure 50: Interface liste des événements............................................................................................... 59
 Liste des tableaux
Tableau 1 : comparaison entre les solutions........................................................................................... 18
Tableau 2: Description textuelle des cas d'utilisation " S’authentifier "................................................. 26
Tableau 3: Description textuelle des cas d'utilisation " Mettre à jour le profil " .................................... 27
Tableau 4: scription textuelle des cas d'utilisation " Traiter les demandes de réservation des
installations sportives "........................................................................................................................... 29
Tableau 5: Description textuelle de cas d'utilisation " Traiter les demandes d’inscription des utilisateurs
"............................................................................................................................................................... 30
Tableau 6 : Description textuelle de cas d'utilisation "Gérer les stades et les installations sportives " ..31
Tableau 7: Tableau de l’environnement matériel.................................................................................... 47
 Introduction générale
Le présent rapport de stage a pour but de présenter notre expérience au sein de l’entreprise
Tunisie Technologie, où nous avons effectué notre stage de fin d’études. Ce stage, qui s’est
déroulé du 27/02/2023 au 05/60/2023 a été réalisé dans le cadre de notre formation en licence
appliquée en Technologies de l'Informatique parcours Développement des Systèmes
Informatiques. Cette entreprise est spécialisée dans le développement de solutions
technologiques innovantes. Dans ce contexte, notre travail consistait à concevoir et modéliser
une plateforme dédiée à la planification des événements dans les stades. Une telle plateforme
permettra aux utilisateurs de réserver des stades et d’organiser efficacement les événements
sportifs et les maintenances. Au cours de ce stage, nous avons travaillé en étroite collaboration
avec des experts, ce qui nous avons permis de bénéficier d’un encadrement de qualité et
d’acquérir une expérience concrète dans le domaine de la modélisation et de la conception
logicielle. Le présent rapport s’articule autour de quatre chapitres :

Le premier chapitre, intitulé présentation du cadre de projet, sera consacré à la description de

l'organisme d’accueil avec une étude comparative entre quelques solutions, ensuite, nous
présenterons la méthodologie de conception adoptée. Enfin, nous présenterons le diagramme
de GANTT.
Dans le deuxième chapitre, nous commencerons par l’identification des acteurs, ensuite, nous
enchaînerons par capturer les besoins fonctionnels et non fonctionnels, par la suite, nous
présenterons le diagramme des cas d’utilisation global de notre futur système et nous finirons
par le raffinement et la description textuelle de quelques cas d’utilisation ainsi que, nous
détaillerons l’architecture du système.

Dans le troisième chapitre, nous présenterons la partie conception en décrivant les différents
diagrammes : diagrammes de séquence, diagrammes d’états-transitions, diagrammes
d’activités et le diagramme de classes.

Le dernier chapitre intitulé Réalisation, qui décrit l’environnement matériel et logiciel du

projet. Nous détaillerons l’environnement de développement et nous illustrerons, après,
l’exécution de notre plateforme par des captures écrans.

Enfin, nous clôturons le rapport par une conclusion générale qui présente le bilan de notre
expérience, en évaluant les compétences que nous avons développées et les connaissances que
nous avons acquises au cours de ce stage, nous aborderons également les éventuelles
difficultés rencontrées et les perspectives d’amélioration de la plateforme.
 Chapitre 1 : Présentation du cadre de projet
Introduction:

L’objectif de ce chapitre est de présenter notre projet dans un contexte général, notamment la
société d’accueil ainsi que l’étude de l’existant, la méthodologie adoptée pour ce projet. Dans
une première section, nous présentons assez brièvement la société d’accueil, à savoir
tunitech. Dans la seconde section, nous décrivons l’étude de l’existant ainsi que la solution
proposée qui sera détaillée plus loin dans le rapport. Avant de clôturer ce chapitre par une
conclusion, nous mettons l’accent sur la méthodologie de développement adoptée ainsi que la
planification des tâches dans un diagramme de GANTT.

1. Présentation de la société d’accueil [1]

Tunisie technologie, dont le logo est présenté dans la figure 1, est une société offshore basée à
Sousse et fondée en 2012, spécialisée dans les services informatiques, avec un cycle de vie
complet de développement de logiciels et d'applications, avec une expertise de niche et un
accent sur les dernières technologies pour mieux répondre à ses exigences et aux besoins de
ses clients. La mission de l'entreprise est d'aider les organisations mondiales à surmonter les
défis technologiques de la transformation numérique en mettant l'accent sur de nouvelles
technologies émergentes, qui, selon nous, devraient avoir un impact positif sur tous les
domaines de notre vie, en la rendant plus simple, plus intelligente et en ouvrant de nouveaux
horizons prometteurs.
 Figure 1: Logo de la société d’accueil

3. Étude préalable

Cette étape est considérée comme l’une des principales étapes de la réalisation d’un nouveau
projet. Durant cette phase, nous avons mené une démarche de collecte d’informations sur les
solutions utilisées de nos jours et ceci pour pouvoir identifier les points faibles et essayer de
les éviter tout en offrant un ensemble de fonctionnalités répondant aux exigences des
utilisateurs.

3.1.Analyse de l’existant

L’étude des solutions existantes est une étape primordiale de la phase d’analyse d’un projet.
Cette section sera consacrée à la présentation des systèmes de gestion des infrastructures des
stades existants sur le marché.

SportEasy : [2]

Créée en 2012 par deux ingénieurs passionnés de sport, Albin Egasse et Nizar Melki,
SportEasy est une application en ligne gratuite pour gérer une équipe ou un club amateur, quel
que soit le sport. Elle regroupe des fonctionnalités de gestion administrative et sportive pour
les dirigeants et les entraîneurs, des fonctionnalités sociales et ludiques pour les joueurs et les
parents.
 Figure 2 : Application SportEasy

Easy2coach : [3]

Une plateforme en ligne de gestion et d’organisation d’équipes de football, principalement

utilisée par les entraîneurs et les responsables de club. La plateforme offre une variété d’outils
pour la gestion des effectifs et des calendriers, la planification des entraînements et des
tactiques, la communication avec les membres de l’équipe, la tenue de statistiques…
 Figure 3: Application Easy2coach

SportFinder : [4]

Une application gratuite qui permet de trouver des partenaires sportifs et des activités
sportives dans votre région. L’application permet aux utilisateurs de se connecter avec
d’autres personnes ayant des intérêts similaires en matière de sport et de planifier des sessions
d’entraînement ensemble. Les utilisateurs peuvent également créer leur propre profil et
indiquer leur niveau de compétence, leur emplacement géographique et leurs préférences en
matière de sport.
 Figure 4: Application SportFinder

3.2 Critique de l’existant

Les avantages de « SportEasy » incluent la facilité d’utilisation de l’application, la gestion

efficace des effectifs et des calendriers, ainsi que la planification des entraînements et des
tactiques. L’application offre également des fonctionnalités de communication en équipe,
telles que des notifications par e-mail et SMS, ainsi que la possibilité de partager des photos et
des vidéos avec les membres de l’équipe. De plus, SportEasy permet de suivre la progression
individuelle des joueurs, ce qui peut aider les entraîneurs à maximiser la performance de leur
équipe. Enfin, l’application est disponible sur mobile et sur ordinateur, ce qui facilite l’accès
et la communication pour les membres de l’équipe. Cependant, il y a aussi quelques
inconvénients à considérer. D'abord, la version gratuite de SportEasy a des limitations sur les
fonctionnalités et l’utilisation de l’application peut être coûteuse pour les clubs de sport avec
des budgets limités. Ensuite, certains utilisateurs ont signalé des problèmes de fiabilité, tels
que des bugs et des plantages.
La plateforme « Easy2Coach » présente plusieurs avantages pour les entraîneurs de football
et les responsables de club, la possibilité de gérer les effectifs et les calendriers de manière
efficace, la planification des entraînements et des tactiques, ainsi que la communication rapide
et facile avec les membres de l’équipe. L’utilisation de la plateforme peut également aider à
améliorer la progression individuelle des joueurs, ce qui peut contribuer à améliorer la
performance de l’équipe dans son ensemble. Mais il y a ainsi quelques inconvénients à
prendre en compte. Tout d’abord, l’utilisation d’Easy2Coach peut nécessiter une période
d’apprentissage pour les entraîneurs et les membres de l’équipe moins familiers avec les outils
numériques. De plus, l’application peut être coûteuse pour les clubs de football avec des
budgets limités. Enfin, la fiabilité de la plateforme peut être un problème, en particulier
lorsqu’il s’agit de mises à jour fréquentes ou de problèmes de connectivité.

L’application « SportFinder » offre de nombreux avantages aux utilisateurs, la facilité

d’utilisation et la grande variété de sports disponibles tels que la course à pied, le yoga, le
football, le basketball, le tennis, etc. En outre, elle permet de rencontrer de nouvelles
personnes partageant les mêmes centres d’intérêt et de se motiver mutuellement pour
pratiquer une activité physique régulière. Néanmoins, cette application présente également
certains désavantages. Tout d’abord, la qualité des partenaires sportifs ou des activités
proposées peut varier considérablement en fonction de l’emplacement géographique et du
nombre d’utilisateurs actifs dans la région. De plus, il peut y avoir des problèmes de
compatibilité entre les utilisateurs en termes de niveau de compétence, d’âge ou d’objectifs de
remise en forme. Finalement, l’utilisation de l’application peut parfois prendre du temps et
nécessiter une planification minutieuse, ce qui peut être un inconvénient pour les utilisateurs
ayant un emploi du temps chargé.

Nous essayons de récapituler les fonctionnalités assurées par chaque solution étudiée dans le
tableau 1 afin de faciliter la comparaison. Comme indiqué sur le tableau, chaque solution est
représentée par une colonne, et les fonctionnalités sont répertoriées dans les lignes. Les lettres
O ou X indiquent si la fonctionnalité est présente ou non dans la solution respective.
 SportEasy Easy2Coach SportFinder

Gestion des équipes X X X

Gestions des clubs X O O

Gestion des sponsors X O O

Gestion des installations sportives O O X

Gestion des réservations O O X

Gestion administrative X O X

Gestion des effectifs X X O

Planifier les évènements (matchs, tournois, X X Minutieuse

entraînements).

Planifier les tactiques X X O

Suivi la progression de l’équipe et l’évolution des X X O

joueurs

Championnat X O O

Calendrier X X X

Sondages d’équipes O X O

Paiement en ligne O O X

Communication (Notification par e-mail, SMS) X X X

Statistiques X X O
Profils utilisateurs X X X

Rechercher et inviter des partenaires de sport O O X

Géolocalisation des utilisateurs O O X

Compatibilité entre les joueurs (âge, compétences) X X O

Multisport X Football X

Version gratuite X X X

Version premium X X O

Partage photos et vidéos X O O

Multilinguisme X X X

Facilité de l’utilisation. X O X

O
Fiabilité O O

Compatibilité X X X

Tableau 1 : comparaison entre les solutions

3.4.Solution proposée

Cette étude nous permettra de dégager les points faibles et de ressortir quelques critiques, à
partir desquelles nous allons expliciter la solution adéquate à implémenter. En effet, suite aux
analyses et spécifications qui précédent, nous proposons de concevoir et de réaliser une
plateforme de gestion des stades qui soit sécurisée, performante, fiable, flexible, modulaire,
extensible, compatible avec les différents types de périphériques, simple et facile à utiliser
avec un design professionnel et cohérent. Naturellement, ce sont surtout les gestionnaires
d’équipes, les organisateurs d’événements, les sociétés de maintenance et l’administrateur qui
bénéficient de notre système. Cette plateforme offre une variété d’outils pour la gestion des
stades, des installations sportives et des équipes. En outre, elle regroupe des fonctionnalités
qui permettent aux sociétés de maintenance de planifier les dates de leurs travaux et qui
aident les organisateurs d’événements à programmer leurs événements sportifs tels que des
compétitions, des matchs, des festivals… Avec la possibilité de spécifier les détails tels que la
date, l’heure, la durée et le type d’événement. Une fois la date sélectionnée, il est important de
réserver le stade à l’aide d’un calendrier pour éviter toute confusion ou conflit avec d'autres
événements. D’ailleurs, ce calendrier permet aux utilisateurs de voir l’ensemble des
réservations en un seul coup d’œil jour par jour, semaine par semaine ou mois par mois, ce
qui facilite la réservation. Le système inclut également des fonctionnalités de communication,
telles que des notifications qui sont un moyen pratique de garder les utilisateurs informés des
mises à jour importantes, telles que les acceptations des réservations, ce qui facilite le
processus de réservation des installations sportives.

4. Choix de la méthodologie de gestion du projet

Étant donné que notre projet présente des exigences stables et bien définies dès le début, ce
qui signifie que les besoins du client sont clairement spécifiés et qu'il y a peu de chances
que ces besoins changent au cours du processus de développement. De plus, nous avons des
contraintes de temps strictes. Par conséquent, nous avons décidé d'adopter une approche en
Cascade pour assurer une gestion efficace du temps et une livraison conforme aux
exigences. En effet, la méthodologie en Cascade convient parfaitement à cette situation,
car elle suit un processus linéaire et séquentiel où chaque étape dépend de la réalisation et
de la validation de l'étape précédente, comme le montre la figure 5. Cela nous permet
d'avancer de manière progressive et structurée, en nous assurant que chaque étape est
terminée avant de passer à la suivante. D’ailleurs, la nature séquentielle de cette méthode
nous offre également l’avantage de pouvoir nous concentrer pleinement sur une étape à la
fois, ce qui contribue à assurer la qualité des livrables. De plus, la méthode en Cascade
appelée « Waterfall » en anglais nous permet de planifier le projet avec précision, car les
différentes phases se déroulent dans un ordre prévisible. Ainsi, nous pouvons définir des
délais clairs pour chaque étape et nous assurer que les délais sont respectés.
 Figure 5: Modèle en Cascade [5]

5. Diagramme de GANTT

Le diagramme de GANTT nous permet de planifier et d’organiser les différentes étapes de

notre projet. Comme indiqué sur la figure 6, il permet de visualiser les tâches à réaliser et leur
durée, ainsi que de déterminer les priorités et les dépendances entre les différentes étapes.

Figure 6: Diagramme de GANTT

Conclusion :

Ce chapitre introductif nous a permis de mettre notre projet dans son cadre général. En
premier lieu, nous avons présenté la société d’accueil. Ensuite, nous avons passé à l’analyse
détaillée de l’existant puis nous avons proposé notre solution tout en précisant les objectifs
visés. Enfin, nous avons présenté la méthodologie de conception adoptée pour le
développement de notre plateforme ainsi que le planning de notre projet. Le chapitre suivant
sera consacré à l’étude des besoins fonctionnels et non fonctionnels et les diagrammes des cas
d’utilisation de notre projet.
 Chapitre 2 : Spécification des besoins
Introduction:

Dans ce chapitre, nous allons présenter la phase de l’analyse et de la spécification des besoins.
Tout d’abord, nous identifions les acteurs, puis nous listons les besoins fonctionnels et non
fonctionnels de notre plateforme. Enfin, nous clôturons ce chapitre par la présentation des
diagrammes des cas d’utilisation ainsi que l’architecture du système.

1. Spécification des besoins

Pour garantir le succès de développement de notre projet et avoir un résultat qui satisfait à nos
attentes, il est indispensable de déterminer de façon claire, dès le début ce que nous attendons
de notre travail. Dans ce but, l’analyse des besoins constitue la première étape permettant de
dégager les détails des fonctionnalités désirées. Dans cette partie, nous allons présenter les
utilisateurs de notre plateforme tout en identifiant les besoins fonctionnels et non fonctionnels.

1.1.Identification des acteurs

En génie logiciel et plus particulièrement en UML, un acteur est une entité qui définit le rôle
joué par un utilisateur ou par un système qui interagit avec le système modélisé. [6]

Dans la suite, nous allons dénombrer les acteurs interagissant avec notre système :

1) Administrateur

2) Gestionnaire d’équipes

3) Organisateur d’événements sportifs

4) Société de maintenance

1.2.Besoins fonctionnels

Cette partie décrit les exigences que le système doit satisfaire d’une façon informelle. Les
fonctionnalités que nous proposons dans notre plateforme sont les suivantes :
1) L’administrateur est chargé de :

 S’authentifier

 S’inscrire

 Mettre à jour le profil.

 Gérer les stades et les installations sportives.

 Traiter les demandes d’inscription des utilisateurs.

 Traiter les demandes de réservation des installations sportives.

2) Le gestionnaire d’équipes est chargé de :

 S’authentifier

 S’inscrire

 Mettre à jour le profil.

 Gérer les équipes.

3) L’organisateur d’événements sportifs est chargé de :

 S’authentifier

 S’inscrire

 Mettre à jour le profil.

 Réserver une installation sportive pour un événement sportif ou autre.

 Consulter l’état de la demande de sa réservation (en attente, accepté, refusé).

4) La société de maintenance est chargée de :

 S’authentifier

 S’inscrire

 Mettre à jour le profil.

  Planifier les maintenances pour une installation sportive.

 Consulter l’état de la demande de sa réservation (en attente, accepté, refusé).

1.3.Besoins non fonctionnels

Comme les besoins fonctionnels expriment les fonctionnalités du système, les besoins non
fonctionnels sont des indicateurs de qualité de l’application à réaliser. Pour cela, nous allons
énumérer les spécifications non fonctionnelles relatives à notre plateforme :

 Sécurité : La plateforme assure un contrôle d’accès basé sur des politiques

d’authentification et de privilèges entre les différents acteurs. Chaque utilisateur doit
avoir une adresse Email et un mot de passe pour pouvoir accéder à son espace.

 Extensibilité : La plateforme doit être conçue d’une façon qu’elle soit faiblement
couplée (les différentes classes et objets sont indépendants l’un de l’autre).

 Performance : L’implémentation de la plateforme sera faite avec des technologies

performantes, légères et rapides.

 Ergonomie : L’interface de la plateforme doit être claire, lisible et plaire à l’utilisateur

en utilisant un design professionnel et cohérent.

 Compatibilité : La plateforme peut fonctionner correctement sur les différents

navigateurs, appareils et systèmes d’exploitation.

 Flexibilité : La possibilité d’ajouter d’autres fonctionnalités et d’apporter des mises à

jour à l’application.

 Fiabilité : Les pages se chargent rapidement et fonctionnent sans erreurs ce qui

garantit une expérience optimale à l’utilisateur.

 Simplicité : Le système doit être simple à utiliser. La navigation entre les pages doit
être souple et facile.

 Modularité : La plateforme doit avoir un code simple et aisé à maintenir et à com-

prendre.
2. Présentation des cas d’utilisation

Les cas d’utilisation sont des descriptions de la fonctionnalité offerte par le système pour
répondre aux besoins des acteurs. Les cas d’utilisation sont représentés par des ellipses au
centre du diagramme comme le montre la figure 7.

2.1.Diagramme des cas d’utilisation global

Figure 7: Diagramme des cas d’utilisation global

 2.2.Diagramme des cas d’utilisation raffiné

Notre diagramme des cas d’utilisation étant grand, ici, nous prenons en considération
quelques cas d’utilisation les plus courants pour le raffinement et la description textuelle.
2.2.1. Diagramme des cas « S’authentifier »

Comme présenté dans la figure 8, l’utilisateur peut accéder à la plateforme à l’aide de son
compte. Pour ce faire, il doit saisir son adresse Émail et son mot de passe.

Figure 8: Diagramme des cas d’utilisation « S’authentifier »

Cas d’utilisation S’authentifier

Acteur Tous les acteurs intervenants dans le système.

Préconditions -Le système est lancé.

-L’utilisateur possède une adresse Émail et un mot de passe.

-Le compte de l’utilisateur est vérifié par l’administrateur.

Postconditions Utilisateur authentifié.

Scénario nominal 1. L’utilisateur demande la page d’authentification.

2. Le système affiche la page d’authentification.

3. L’utilisateur saisit son adresse Émail et son mot de passe puis il valide.
 4. Le système vérifie si les coordonnés sont validés et si le compte est
confirmé par l’administrateur, puis il affiche la page d’accueil selon le
profil de l’acteur connecté.

Scénarios alternatifs Si l’adresse Émail et/ou le mot de passe ne sont pas corrects ou bien, il y a un
manque de données dans le formulaire ou bien le compte de l’utilisateur n’est pas
encore validé par l’administrateur. L’enchaînement alternatif redémarre à l’étape 2
du scénario nominal.

Tableau 2: Description textuelle des cas d'utilisation " S’authentifier "

2.2.2. Diagramme des cas « Mettre à jour le profil »

La figure 9 présente le raffinement des cas d’utilisation « Mettre à jour le profil »

Figure 9: Diagramme des cas d’utilisation « Mettre à jour le profil »

Cas d’utilisation Mettre à jour le profil

Acteur Utilisateur

Préconditions Utilisateur authentifié

Postconditions Profil modifié

 Scénario nominal 1. Après l’authentification, le système affiche la page d’accueil (la page de
mise à jour du profil).

2. L’utilisateur peut modifier son mot de passe, ses coordonnées de contact

et/ou sa photo de profil.

3. Le système vérifie la saisie puis, il enregistre les modifications.

Scénario alternatif -Manque de données dans le formulaire

-Données saisies non valides

-Serveur introuvable

Tableau 3: Description textuelle des cas d'utilisation " Mettre à jour le profil "

2.2.3. Diagramme des cas « Traiter les demandes de réservation des installations
sportives »

Comme indiqué la figure 10, L’administrateur examine les demandes de réservation des
installations sportives en les refusant ou en les acceptant.

Figure 10 : Diagramme des cas d’utilisation « Traiter les demandes de réservation des stades »

Cas d’utilisation Traiter les demandes de réservation des installations sportives

Acteur Administrateur
Préconditions Accès autorisé et interface de la liste des demandes de réservation affichée.

Début 1. L’administrateur saisit les informations d’authentification qui lui correspond

et les valide.

2. Le système autorise l’accès de l’administrateur à son espace

3. L’administrateur demande la liste des demandes de réservation des

installations sportives.

4. Le système affiche la liste des demandes

5. L’administrateur choisit l’opération à effectuer.

Scénario nominal 1. L’administrateur choisit la demande à accepter.

Accepter la demande de 2. L’administrateur accepte la demande.

réservation
3. Le système envoie une notification d'acceptation à l’utilisateur.

Scénario alternatif A.1 1. L’administrateur choisit la demande à refuser.

Refuser la demande de 2. L’administrateur refuse la demande.

réservation
3. Le système envoie une notification de refus à l’utilisateur.

Tableau 4: scription textuelle des cas d'utilisation " Traiter les demandes de réservation des
installations sportives "

2.2.4. Diagramme des cas « Traiter les demandes d’inscription des utilisateurs »
Comme le montre la figure 11, dans le processus de traitement des demandes d’inscription
des utilisateurs, l’administrateur peut prendre l’une des deux actions suivantes : valider le
compte de l’utilisateur ou supprimer le compte.
 Figure 11: Diagramme des cas d’utilisation " Traiter les demandes d’inscription des utilisateurs "

Cas d’utilisation Ce cas d’utilisation permet à l’administrateur de traiter les demandes d’inscription des
utilisateurs

Acteur Administrateur

Préconditions Administrateur authentifié.

Début Le système affiche la liste des demandes d’inscription des utilisateurs, l’administrateur
choisit l’opération à effectuer.

Scénario nominal 1. L’administrateur est satisfait des informations fournies par l’utilisateur et que
celui-ci remplit les critères d’admission.
Valider le compte de
l’utilisateur 2. L’administrateur procède à la validation du compte.

Scénario alternatif 1. L’administrateur constate que les informations fournies par l’utilisateur sont
incorrectes, non conformes aux critères d’admission ou s’il existe des raisons de
Supprimer le compte
sécurité ou de conformité.

2. L’administrateur procède à la suppression du compte.

 Tableau 5: Description textuelle de cas d'utilisation " Traiter les demandes d’inscription des
utilisateurs "

2.2.5. Diagramme de cas « Gérer les stades et les installations sportives »

Seul l’administrateur peut gérer les stades et les installations sportives comme illustre la
figure 12.

Figure 12 : Diagramme de cas d’utilisation « Gérer les stades et les installations sportives »

Figure 12 : Diagramme de cas d’utilisation « Gérer les stades et les installations sportives »

Cas d’utilisation Gérer les stades et les installations sportives

Acteur Administrateur

Préconditions Administrateur authentifié.

Début Le système affiche la liste des stades.

L’administrateur choisit l’opération à effectuer.

Scénario nominal 1. L’administrateur demande l’ajout d’un nouveau stade avec ses installations.

Ajouter un stade 2. Le système affiche le formulaire à remplir.

3. L’administrateur introduit les informations concernant le stade et ses

installations.

4. L’administrateur valide la saisie.

 5. Le système affiche un message de succès, ainsi il affiche le nouveau stade
dans la liste des stades.

Scénario alternatif A.1 1. L’administrateur sélectionne le stade à modifier.

Modifier un stade 2. Le système affiche le formulaire à mettre à jour.

3. L’administrateur effectue les modifications voulues.

4. L’administrateur valide ces modifications.

5. Le système affiche un message de succès, ainsi il affiche la liste des stades

avec les nouvelles modifications.

Scénario alternatif A.2 1. L’administrateur sélectionne le stade en question.

Supprimer un stade 2. Le système retire le stade de la liste.

Tableau 6 : Description textuelle de cas d'utilisation "Gérer les stades et les installations sportives "

3. Architecture

3.1.Architecture physique

Avant de commencer la conception et le développement, nous préparons notre architecture.

En effet, nous choisissons l’architecture en trois tiers pour la mise en place de notre
plateforme. Cette architecture, comprend trois couches, comme indiqué ci-dessous :

Couche de présentation : correspond à la partie client. Son rôle est d’afficher les données et
de permettre à l’utilisateur final d’interagir avec elles.

Couche application : le serveur d’application répond de manière automatique aux demandes

envoyées par le client, il est considéré comme un intermédiaire entre le client et le serveur de
base de données.

Couche d’accès aux données : c’est la couche responsable à la persistance des données, le
serveur de base de données partage les données stockées avec la couche de gestion afin
qu’elle puisse terminer son traitement. Il garantit la pérennité des données à conserver.
La figure 13 décrit les interactions entre les différentes couches de l’architecture en trois tiers.

Figure 13: Architecture physique [7]

Cette architecture garantit le faible couplage entre les composants de présentation, de service
et données. Cela signifie qu’un tiers dépend rarement de l’autre tiers et peut-être remplacé
sans modifier l’autre tiers.

3.2.Architecture applicative

Pour réaliser notre solution, nous avons utilisé Laravel qui implémente le patron de
conception MVC. En effet, en informatique et plus particulièrement en développement
logiciel un patron de conception (souvent appelé design pattern) est un arrangement
caractéristique de modules, reconnu comme bonne pratique en réponse à un problème de
conception d’un logiciel. Ce motif d’architecture logiciel se compose de trois types de
modules dont chacun a un rôle bien spécifique comme l’indique la figure 14. Les Composants
du pattern MVC sont :

Un modèle (Model) : correspond à une table d’une base de données. C’est une classe qui
étend la classe Model qui permet une gestion simple et efficace des manipulations de données
et l’établissement automatisé de relations entre tables.

Une vue (View) : correspond à l’interface avec laquelle l’utilisateur interagit. Elle est soit un
simple fichier avec du code HTML, soit un fichier utilisant le système de template Blade de
Laravel.
Un contrôleur (Controller) : Il prend en charge la gestion des événements de
synchronisation pour mettre à jour la vue ou le modèle et les synchroniser. Il reçoit tous les
événements de l’utilisateur et enclenche les actions à effectuer.

Figure 14: Architecture MVC [8]

Conclusion :
Dans ce chapitre, nous avons décrit les fonctionnalités de base de notre projet afin d’avoir une
vision plus claire sur son fonctionnement. Nous avons fourni une représentation d’un
diagramme global des cas d’utilisation relatifs aux acteurs interagissant avec le système avec
quelque exemples des diagrammes des cas d’utilisation raffinés de même que nous avons
définir l’architecture adoptée. Dans le chapitre suivant, nous détaillons quelques aspects de la
conception.
 Chapitre 3 : Conception
Introduction:

Cette partie sera consacrée à la conception détaillée de notre projet. Dans un premier temps,
nous avons modélisé l'aspect dynamique du système en utilisant le diagramme de séquences,
d’états-transitions et le diagramme d’activités. Dans un deuxième temps, nous avons fourni
une représentation d’un diagramme de classes qui décrit les classes de notre plateforme.

1. Diagramme de séquences
Pour schématiser la vue comportementale de notre système informatique, nous faisons recours
au diagramme de séquence. Ce diagramme permet de préciser les interactions entre l’acteur et
les systèmes avec des messages présentés dans un ordre chronologique.

1.1.Diagramme de séquences « s’authentifier »

L’utilisateur se connecte à la plateforme via un compte local. Il saisit son adresse Émail et son
mot de passe, le système vérifie les données saisies et envoie une requête d’authentification à
la base de données. Si les données correspondent à un compte valide, la connexion sera
établie sinon un message d’erreur sera affiché. Ce procédé est exécuté à chaque fois que
l’utilisateur tente de s’authentifier, c’est pourquoi nous avons utilisé l’opérateur « Loop ». La
figure 15 démontre le scénario d’authentification.
Figure 15: Diagramme de séquences « S’authentifier »
1.
1.1.

1.2.Diagramme de séquences « S’inscrire »

La figure 16 illustre le diagramme de séquence du scénario d’inscription.

Figure 16: Diagramme de séquences « S’inscrire »

1.3.Diagramme de séquence « traiter les demandes d’inscription des

utilisateurs »

Après avoir accédé à l’interface de liste des demandes d’inscription, l’administrateur choisit
l’utilisateur souhaité pour valider ou supprimer sa demande d’où l’utilisation du fragment de
type " Opt ". Le scénario de ce cas d’utilisation est décrit dans la figure 17.
 Figure 17: Diagramme de séquences « Traiter les demandes d’inscription des utilisateurs »

2. Diagramme d’états-transitions
Le diagramme d'états-transitions d'UML décrivent le comportement interne d'un objet à l'aide
d'un automate à états finis. Ils présentent les séquences possibles d'états et d'actions qu'une
instance de classe peut traiter au cours de son cycle de vie en réaction à des événements
discrets (de type signaux, invocations de méthode).
1.

2.

2.1.Diagramme d’états-transitions d’une réservation

Figure 18: Diagramme de séquences « Traiter les demandes d’inscription des utilisateurs »

2.2.Diagramme d’états-transitions d’une installation sportive

Figure 19: Diagramme d’états-transitions d’une installation sportive

 2.3.Diagramme d’états-transitions d’un utilisateur

Figure 20: Diagramme d’états-transitions d’un utilisateur

3. Diagramme d’activités
Le diagramme d’activités permet de représenter le déclenchement d’événements en
fonction des états du système et de modéliser des comportements pouvant être parallèles.
3.1.Diagramme d'activités de l'authentification
 Figure 21: Diagramme d'activités de l'authentification

3.2.Diagramme d’activités de s’inscrire

 Figure 22: Diagramme d'activités de s’inscrire

3.3.Diagramme d’activités de traiter les demandes d’inscription des

utilisateurs
Figure 23: Diagramme d'activités de traiter les demandes d’inscription
3.4.Diagramme d’activité réserver une installation sportive pour un
événement

Figure 24: Diagramme d'activités de réserver une installation sportive pour un événement
3.5.Diagramme d’activités de gérer les équipes

Figure 25: Diagramme d'activités de gérer les équipes

4. Diagramme de classes
Les diagrammes de classes sont l’un des diagrammes les plus utiles, car ils décrivent la
structure interne d’un système en modélisant ses classes, ses attributs et les relations entre ses
objets. La figure 26 présente le diagramme de classes de notre plateforme.
 Figure 26: Diagramme de classes

Conclusion :

Dans ce chapitre, nous avons commencé par présenter les diagrammes : Les diagrammes de
séquence, d’états-transitions, d’activités et le diagramme de classes qui ont permis de bien
comprendre les besoins du système à développer ainsi que les différentes interactions entre les
objets participant à son fonctionnement, chose qui facilitera la phase d’implémentation et de
codage.
 Chapitre 4 : Réalisation
Introduction :

Nous consacrons ce chapitre pour traiter l’environnement matériel et logiciel liés à la phase
d’implémentation et pour exposer également quelques interfaces de notre plateforme à travers
des imprimés écrans.

1. Environnement de développement
Cette section présente la description de l’environnement matériel et logiciel que nous avons
utilisé durant la réalisation de notre projet.

1.1.Environnement matériel

Notre projet est réalisé avec un DESKTOP-L4EJT07 ayant les caractéristiques techniques
présentées dans le tableau 7.

Processeur Core i3

Mémoire RAM installée 8,00 Go

Système d’exploitation Windows 10

Tableau 7: Tableau de l’environnement matériel

1.2.Environnement logiciel

Nous présentons dans cette section les différents outils logiciels et langages utilisés pour le
développement de notre plateforme.
 Figure 27: Logo Vscode [9]

Visual studio code est un éditeur de code extensible développé par Microsoft. Il est gratuit,
open source et multiplateform

Figure 28: Logo Laravel [10]

Laravel est un Framework PHP libre et open-source conçu pour faciliter et accélérer le déve-
loppement de sites web et d’applications web. Laravel propose une architecture MVC qui per-
met une séparation claire des préoccupations et une facilité de maintenance du code. Il intègre
également de nombreuses fonctionnalités telles que la gestion des requêtes HTTP, la gestion
de base de données, l’authentification, l’autorisation, les migrations de base de données et la
gestion des tâches planifiées.
 Figure 29: Logo Postman [11]

Postman est un environnement de développement d’API qui permet aux développeurs de

tester, de documenter et de déboguer leurs API plus facilement.

Figure 30: Logo MySQL [12]

MySQL est un système de gestion de bases de données relationnelles SQL open source
développé et supporté par Oracle. Il fait partie des logiciels de gestion de base de données les
plus utilisés au monde.
 Figure 31: Logo Visual Paradigm Online [13]

Visual Paradigm Online est un environnement de modélisation et de conception en ligne

basé sur le cloud. Il permet aux utilisateurs de créer facilement des diagrammes UML des
diagrammes de flux de données, des diagrammes de réseau, des diagrammes d’organigramme
et bien plus encore.

Figure 32: Logo Xampp [14]

Xampp est un environnement de développement web open source qui permet aux
développeurs de créer et de tester des sites web localement sur leur propre ordinateur.
 Figure 33: logo PHP [15]

PHP est un langage de script coté serveur qui a été spécifiquement pour le web. Le code
PHP est inclus dans une page HTML et sera exécuté à chaque fois qu’un visiteur affichera la
page. Le code PHP est interprété au niveau du serveur web et générer du code HTML ou toute
autre donné affichable dans le navigateur de l’utilisateur.

Figure 34: logo Bootstrap [16]

Bootstrap est un framework CSS. En d’autres termes, c’est un ensemble de fichiers CSS et
JavaScript fonctionnant ensemble et qu’on va pouvoir utiliser pour créer des design
complexes de manière relativement simple.

Figure 35: logo JavaScript [17]

JavaScript est un langage de programmation qui permet d’apporter des améliorations au
langage HTML en permettant d’exécuter des commandes du côté client, c’est à dire au niveau
du navigateur et non du serveur web.

Figure 36: logo CSS3 [18]

CSS 3 est un langage qui permet de gérer la présentation d’un page web. Les styles
permettent de définir des règles appliquées à un ou plusieurs document HTML. Ces règles
portent sur le positionnement des éléments, l’alignement, les polices de caractères, les
couleurs, les marges et espacement, les bordures, les images de fond...

Figure 37: logo HTML5 [19]

HTML 5 est la dernière version du langage de balisage hypertexte utilisé pour créer et
structurer le contenu des pages web. Il est utilisé pour décrire la structure, le contenu et la
présentation d’une page web en utilisant des balises et des attributs. Les principales
caractéristiques de HTML5 incluent la prise native des vidéos et des audios, la possibilité
d’utiliser des balises sémantiques pour structures les pages web de manière plus significative
pour les moteurs de recherche et les lecteurs d’assistance, ainsi que des fonctionnalités
améliorées pour les applications web, telles que le stockage de données côté client, la
géolocalisation, les graphiques interactifs et la prise en charge hors ligne.
 Figure 38: logo Ajax [20]

Ajax représente un ensemble de technologies destinées à réaliser de rapides mises à jour du

contenu d’une page Web, sans qu’elles nécessitent le moindre rechargement visible par
l’utilisateur de la page Web.

2. Interfaces graphiques
S’authentification

Nous allons commencer par présenter l’interface d’authentification qui s’affiche lors de
l’ouverture de notre plateforme. L’interface « Authentification » représente la sécurité de
notre application, elle permet à chaque utilisateur d’accéder à sa propre interface. Ici, chaque
utilisateur de l’application doit saisir son adresse Email et son mot de passe pour pouvoir
accéder à la plateforme, d’où il peut se produire trois cas :

 Adresse Email et mot de passe corrects et compte validé : ici, le système affiche la
page d’accueil correspondante.

 Compte non encore validé par l’administrateur : dans ce cas, l’utilisateur ne peut pas
accéder à la page d’accueil et la page d’authentification s’affiche avec un message
d’erreur (figure 39).

 Adresse Email ou mot de passe incorrect : la page d’authentification s’affiche avec un

message d’erreur (figure 40).
 Figure 39: Interface d’authentification avec message d’erreur

Figure 40: Interface d’authentification avec adresse ou mot de passe incorrect

 S’inscrire

Figure 41: Interface d’inscription

Liste des utilisateurs

La figure 42, montre l’interface qui permet à l’administrateur de valider pour approuver
l’inscription de l’utilisateur ou de supprimer l’utilisateur de la liste.

Figure 42: Interface Liste des utilisateurs

 Liste des stades

La figure 43 illustre l’interface de la liste des stades, cette interface est affichée pour chaque
société de maintenance et chaque organisateur d’événements, mais seulement l’admin peut
ajouter, modifier ou supprimer des stades comme le montre la figure.

Figure 43: Interface Liste des stades

Liste des équipes

Figure 44: Interface Liste des équipes

Liste des demandes de réservation des installations sportives

Figure 45: Interface Liste des demandes de réservation des installations sportives
Liste des réservations effectuées par l’organisateur d’événements
Figure 46: Interface Liste des réservations effectuées par l’organisateur d’événements

Calendrier de réservation des installations sportives

Figure 47: Interface calendrier de réservation des installations sportives
Liste des matchs
Figure 48: Interface liste des matchs

Liste des compétitions

Figure 49: Interface liste des compétitions
Liste des événements
Figure 50: Interface liste des événements
Conclusion :

La phase réalisation est l'étape la plus importante dans le cycle de vie d'une plateforme. Dans
ce chapitre, nous avons décrit brièvement le processus de réalisation de notre plateforme en
spécifiant l'environnement de développement associé à notre système. En effet, nous avons
achevé l'implémentation tout en respectant la conception élaborée. En d’autres termes, nous
détenons la version définitive de la plateforme installée dans notre environnement de
développement.
Conclusion générale
 Webographies
[1] Société, https://tuni-tech.com/ ()

[2] SportEasy, https://www.sporteasy.net/fr/about/us/ ()

[3] Easy2coach, https://www.easy2coach.net/fr/gestion-equipe/ ()

[4] Sport Finder, https://www.sport-finder.com/fr/ ()

[5] modèle en cascade https://fr.wikipedia.org/wiki/Mod%C3%A8le_en_cascade

[6] Acteur, Acteur (UML) — Wikipédia (wikipedia.org) ()

[7] Architecture en trois tiers, https://mastercomputersystem.com/reseaux.php

[8] Architecture MVC, https://waytolearnx.com/2020/06/difference-entre-mvc-et-mvvm.html

[9] Vscode, https://commons.wikimedia.org/wiki/File:Visual_Studio_Code_1.35_icon.svg

[10] Laravel, https://ar.wikipedia.org/wiki/%D9%85%D9%84%D9%81:Laravel.svg

[11] Postman,

[12] MySQL,

[13] Visual Paradigm Online,

[14] Xampp,

https://www.stickpng.com/fr/img/icones-logos-emojis/societes-de-technologie/logo-xampp

[15] PHP,

[16] Bootstrap,

[17] JavaScript,

[18] CSS3,

[19] HTML5,

[20] Ajax,