Mémoire de fin d’études

Présenté à

L’Institut Supérieur des Sciences Appliquées et de Technologie de Mateur

En vue de l’obtention du mastère professionnel en

Réseaux et Télécommunications
Spécialité : service et sécurité réseaux
Réalisée Par

Soulef Hlel

Plateforme d'organisation et de
planification des formations certifiantes

Mr. Tarek BCHINI Encadrant (ISSAT Mateur)

Mr. Bilel BOULARES Encadrant (N3RD Tunisie)

Année universitaire 2016 - 2017

Mémoire Mastère professionnel
Présenté à

L’Institut Supérieure des Sciences Appliquées et de Technologie de Mateur

En vue de l’obtention du mastère professionnel en

Réseaux et Télécommunications
Spécialité : service et sécurité réseaux
Réalisée Par

Soulef Hlel

Plateforme d'organisation et de
planification des formations certifiantes

Mr. Tarek BCHINI Encadrant (ISSAT Mateur)

Mr. Bilel BOULARES Encadrant (N3RD Tunisie)

Année universitaire 2016 - 2017

2
 Dédicace
Du plus profond du mon cœur je dédie ce modeste
travail à : mes chers parents : Mon père ‘’Saleh’’, ma
mère ‘’Malika’’, qui ont assuré tous mes besoins
matériels et moraux,, qui n’ont jamais cessé de
m’encourager à finir mes études et qui m’ont aidé avec
un grand amour. Aucun dédicace ne serait exprimer la
profonde affectation et l’immense respect que je leur
avoue. Que ‘’DIEU’’ leur préserve une bonne santé et
longue vie
A mes chères sœurs et mon frère Pour leur tendresse,
que ‘’DIEU’’ nous unisse pour toujours.

A tous mes amis, tous ceux qui me sont chers en leur

espérant une vie pleine de bonheur.

3
 Remerciements
Je veux remercier, en premier lieu, mes encadreurs qui
ont collaboré avec moi d’une manière étroite pour la
réalisation de ce rapport.

Je veux exprimer par la même occasion ma gratitude

pour mes proches et pour leur soutien tout au long du
stage.

Enfin, je remercie tous mess enseignants pour leur aide

à la réalisation de ce travail.

4
Titre : Plateforme d’organisation et de planification des formations certifiantes

Acteurs : HLEL Soulef

Etablissement Universitaire : Université de Carthage Institut Supérieur des Sciences

appliquées et de Technologie de Mateur

Encadrant : BCHINI Tarek

Organisme PFE : N3RD Tunisie

Encadrant : BOULARES Bilel

RESUME :
Ce projet réalisé au sein de l’entreprise N3RD Tunisie consiste à développer une plateforme
de formation en ligne pour la gestion des formations, le développement, le renforcement des
compétences et pour le gain d’argent

MOTS CLES : Plateforme, Formation, Laravel, XAMPP, CSS, HTML

ABSTRACT:
This project, realized within the N3RD company, is to develop an online training platform for
training management, development, competence building and for earn of money.

KEY WORDS: Plateform, Formation, Laravel, XAMPP, CSS, HTML.

5
 Table des matières

Introduction générale............................................................................................................................11
Chapitre 1 Présentation du cadre du projet...........................................................................................13
Introduction..........................................................................................................................................13
1. Présentation du lieu de travail et du projet............................................................................13
1.1. Description de l’existant :.....................................................................................................14
1.2. Critique de l’existant :..........................................................................................................15
2. Objectif du projet..................................................................................................................15
3. Présentation de l’application.................................................................................................16
Conclusion...........................................................................................................................................17
Chapitre 2 Analyse et spécification des besoins...................................................................................18
Introduction..........................................................................................................................................18
1. Les applications Web............................................................................................................18
1.1 Définition.............................................................................................................................18
2. Spécification des besoins......................................................................................................19
2.1 Besoins fonctionnels.............................................................................................................19
3. Développement :...................................................................................................................20
4. Les besoins non fonctionnels................................................................................................21
Conclusion...........................................................................................................................................22
Chapitre 3 : Etude conceptuelle............................................................................................................23
Introduction..........................................................................................................................................23
1. Principe de conception..........................................................................................................23
2. Les diagrammes des cas d’utilisateurs..................................................................................23
3. Composition du diagramme de cas d’utilisation...................................................................24
3.1 L’acteur de notre projet........................................................................................................24
4. Les différents cas d’utilisation..............................................................................................24
 Diagramme des cas d’utilisation général..............................................................................26
5. Modèles statiques.................................................................................................................36
6. Modèle dynamique...............................................................................................................39
7. Diagramme d’activité...........................................................................................................47
Conclusion...........................................................................................................................................47
Chapitre 4 : Réalisation........................................................................................................................48
Introduction..........................................................................................................................................48
8. Environnement logiciel et langages utilisés..........................................................................48
9. Framework............................................................................................................................50
10. Développement de la solution...............................................................................................51

6
 11. Interfaces graphiques principales partie back end.................................................................61
4.2. Authentification....................................................................................................................61
4.1.1. Interface d’accueil administrateur.....................................................................................62
4.1.2. Tables...............................................................................................................................64
12. Interface gestion de la plateforme.........................................................................................65
13. Interface comptes utilisateurs...............................................................................................67
14. Interface ajout utilisateurs.....................................................................................................68
15. Interface de gestion des formations......................................................................................69
8.1. Liste des formations..........................................................................................................69
8.2. Ajout/ modification d'une formation.................................................................................69
16. Interface de gestion des questions.........................................................................................70
17. Interface de gestion des vidéos.............................................................................................71
18. Interface de gestion de forum...............................................................................................72
19. Interface de gestion des réclamations...................................................................................73
20. Interfaces de gestion de profil...............................................................................................74
13.1. Consultation de profil...........................................................................................................74
Conclusion...........................................................................................................................................77
Conclusion et perspectives...................................................................................................................78
Listes des acronymes............................................................................................................................79

7
 Liste des figures

Figure 1 : Logo de N3RD.........................................................................................................13

Figure 2: Planification temporelle............................................................................................16
Figure 3: Fonctionnement d'une application web [N3]............................................................18
Figure 4 : Diagramme de cas d’utilisation générale.................................................................26
Figure 5: Diagramme des cas d’utilisation pour administrateur...............................................27
Figure 6: Diagramme des cas d’utilisation pour Apprenant.....................................................28
Figure 7: Diagramme des cas d’utilisation pour Formateur.....................................................29
Figure 8: Diagramme du cas d'utilisation « Gestion des Formations »....................................30
Figure 9: Diagramme du cas d'utilisation « Gestion des formation ».......................................33
Figure 10: Diagramme du cas d'utilisation « Gestion profil »..................................................34
Figure 11 : Diagramme du cas d'utilisation « Gestion plateforme »........................................35
Figure 12: Diagramme de classe...............................................................................................37
Figure 13 : Diagramme de séquences « s’authentifier »...........................................................39
Figure 14 : Diagramme de séquences « Ajouter formation »...................................................40
Figure 15: Diagramme de séquences « Gérer formation ».......................................................41
Figure 16: Diagramme de séquences « Animer formation »....................................................43
Figure 17: Diagramme de séquences « suivre formation ».......................................................44
Figure 18 : Diagramme de séquences « Ajouter utilisateur »...................................................45
Figure 19: Diagramme de séquences « Répondre réclamation »..............................................46
Figure 20 : Diagramme d’activité « Gérer utilisateur »............................................................47
Figure 21: Modèle MVC [N11]................................................................................................50
Figure 22: Interface d’accueil...................................................................................................52
Figure 23: Interface Qui somme nous.......................................................................................53
Figure 24: Interfaces Contact....................................................................................................54
Figure 25 : Consulter forum......................................................................................................55
Figure 26: Interface ajouter sujet..............................................................................................56
Figure 27: Interface ajouter réponse.........................................................................................56
Figure 28: Interface liste des formations..................................................................................57
Figure 29: Détail de formation..................................................................................................58
Figure 30: Suivre formation......................................................................................................59
Figure 31 : Consultation de vidéo.............................................................................................59

8
Figure 32: Passer un test Qcm..................................................................................................60
Figure 33: Interface de chat......................................................................................................60
Figure 34 : Interface d'authentification.....................................................................................61
Figure 35: Interface d'accueil....................................................................................................62
Figure 36 : Notifications pour formations................................................................................63
Figure 37 : Notifications pour réclamations.............................................................................63
Figure 38: Interface de gestion de la plateforme......................................................................64
Figure 39: Liste comptes utilisateurs........................................................................................65
Figure 40 : Modifier utilisateurs...............................................................................................65
Figure 41 : Ajouter utilisateurs.................................................................................................66
Figure 42 : Liste des formations...............................................................................................67
Figure 43:Interface d’ajout / modification de formation..........................................................67
Figure 44: Interface liste des questions.....................................................................................68
Figure 45: Interface d’ajout des questions................................................................................69
Figure 46: Interface liste des vidéos.........................................................................................69
Figure 47: Liste des catégories.................................................................................................70
Figure 48: Liste des sujets.........................................................................................................70
Figure 49 : Gestion des réclamations........................................................................................71
Figure 50 : Affichage et envoi des émails................................................................................72
Figure 51: Consultation de profil..............................................................................................72
Figure 52: Changer nom email et mot de passe........................................................................73
Figure 53: Modifier l’information personnelle.........................................................................73
Figure 54: Modifier l'image......................................................................................................74
Figure 55: Interface formateur..................................................................................................74
Figure 56: Interface apprenant..................................................................................................75

9
 Liste des tableaux
Tableau 1: Description du cas « S'authentifier »......................................................................30
Tableau 2: Description cas d'utilisation « Ajouter utilisateur »................................................31
Tableau 3 : Description cas d'utilisation « Modifier utilisateur ».............................................31
Tableau 4: Description cas d'utilisation « Supprimer utilisateur »...........................................32
Tableau 5: Description cas d'utilisation « Ajouter formation »................................................34
Tableau 6: Description cas d'utilisation « Animer une Formation »........................................34
Tableau 7: Description cas d'utilisation « Gérer le profil »......................................................35
Tableau 8: Description cas d’utilisation « Gérer la plateforme ».............................................36
Tableau 9: Description cas d'utilisation « Supprimer utilisateur »...........................................36

10
Introduction générale
Actuellement, les technologies Web ont permis aux développeurs de rendre le Web plus
générique et populaire, et surtout plus standard. De nos jours il est pris en charge par tous les
navigateurs.

Grâce à Internet, nous devons changer notre apprentissage « penser apprentissage rapide et
efficace », avec un minimum de problèmes d’organisation, de logistique et surtout de perte de
temps. Ce nouveau mode d’apprentissage est le e-learning.

Le e-Learning, est un système d'apprentissage formalisé spécialement conçu pour être utilisé à
distance en utilisant la communication électronique. Parce que l'apprentissage à distance est
moins coûteux à supporter et n'est pas contraint par des considérations géographiques, il offre
des opportunités dans des situations où l'éducation traditionnelle a des difficultés à
fonctionner.  Les élèves ayant des problèmes de planification ou de distance peuvent en
bénéficier, tout comme les employés, car l'enseignement à distance est plus flexible en termes
de temps et peut être livré pratiquement n'importe où.

Aujourd'hui il existe beaucoup d'applications de ce type qui offrent plusieurs fonctionnalités

pouvant aider un administrateur à gérer un environnement scolaire. La plupart de ses
applications sont libre mais ne répondent pas au besoin des utilisateurs.

Le projet qui nous a été ainsi confié consiste à développer une plateforme de formation
personnalisée pour la gestion des formations, qui aide les formateurs à gérer leurs formations et
les apprenants à l'apprentissage. Le système à réaliser comporte plusieurs-fonctionnalités parmi
les quelles ; nous trouvons les fonctionnalités de gestion/ en premier lieu/, et les
fonctionnalités$ de communication/ en deuxième lieu.

Ce rapport se subdivise en quatre chapitres :

 Le premier chapitre : cadre et objectifs du projet, sera consacré pour une présentation à
la fois de l'organisme d'accueil et du projet.
 Le second chapitre entamera une spécification des besoins fonctionnels et ceux non
fonctionnels.
 Le troisième chapitre élaborera l'étude conceptuelle de notre projet.

11
  Le quatrième chapitre sera consacré à la réalisation du portail en plus d'une description
des interfaces du système.
Enfin, la conclusion générale viendra rappeler le bilan de nos travaux et les résultats obtenus,
puis énoncera les perspectives de nos travaux.

12
Chapitre 1 Présentation du cadre du projet

Introduction
Dans ce chapitre introductif, nous présentons dans un premier temps le cadre général du projet et
l’environnement de stage. Par la suite nous décrivons les principaux objectifs à atteindre. En
dernier lieu nous présentons la planification temporelle.

1. Présentation du lieu de travail et du projet 

Créée en 2011, N3RD [0] est une société d’ingénierie et de développement web qui, grâce à
l’utilisation des nouvelles technologies du web, est capable aujourd’hui d’assurer les différentes
tâches suivantes :
 Création et Design des maquettes web.
 Conception détaillée des grands sites et des bases de données.
 Développement web avancé en proposant un grand choix de formules (avec ou sans
frameworks, avec ou sans CMS, avec ou sans animation, etc…).
 Développement Web des sites, des applications nomades et des applications mobiles
embarquées.
 Tests avancés de validation et garantie de sécurité contre les attaques web.

Figure 1 : Logo de N3RD

N3RD est une société très active dans le domaine du développement Web et mobile (sites et
applications), elle n’utilise que les dernières technologies :
 Web 2.0 et plus.
 Frameworks : Laravel, Symphony2, Zend et Code Igniter.
 CMSs: Prestashop, Drupal et WordPress.
 Langages de développement coté serveur : PHP5, MySQL5, CSS3, HTML5.
 Animation dynamique coté client : CSS3, JavaScript, Bootstrap, Ajax et JQuery.

13
Métiers  :
 Développement de sites et applications web pour tout business.
 Développement des solutions web personnalisées.
 Conseils.
 Boutiques en ligne et e-commerce.
 Design sur mesure.
 Création multimédia.
 Infogérance (hébergement, gestion d’infrastructure…).
 Création d’outils collaboratifs.
 Optimisation pour les plateformes mobiles.
 Création d’applications mobiles.

Méthode de suivi  :

N3RD utilise la méthode agile afin de mettre le client au centre du processus. En validant étape
par étape le développement fonctionnel du projet, les ingénieurs se placent comme CTO (Chief
Technology Officer) afin de contribuer pleinement à la progression du projet.
L’accompagnement et le conseil technique permettent de garantir la pérennité des offres
commerciales.

Compétences Techniques  :
 Analyse des besoins.
 Conceptions et mise en place des bases de données.
 Identification des spécifications.
 Rédaction des cahiers des charges et des spécifications techniques.
 Web design.
 Développement d’interfaces Back/Middle/Front office.
 Intégration.
 Tests unitaires.
 Maintenance évolutive.
 Optimisation du référencement.

1.1. Description de l’existant :

14
La formation continue se fait actuellement de façon traditionnelle : cours, apprenants et
tuteurs sur place. Dans ce cadre plusieurs plateformes de formation en ligne se subdivisent en
plateformes « propriétaires » et plateformes « libres ».

Ce projet vise à mettre en place une plateforme de formation en ligne. La plateforme

permettra à un utilisateur de suivre des formations (gratuite au payer), les contenus réalisés
par les formateurs sont sous plusieurs formes. Chaque formation peut être composée d'une ou
plusieurs vidéos documentés, l'apprenant peut poser des questions et commenter chaque
formations et tchater en mode synchrone ou asynchrone. Ce projet est un moyen de
renforcement des compétences des apprenants à distance en terminant par un test d'évaluation,
et permettant un gain d'argent.

1.2. Critique de l’existant :

Il existe plusieurs problèmes tel que :

 Les outils nécessitent une installation et nécessitent un très haut débit de

connexion.
 Parfois il existe certaines lenteurs d’exécution.
 Interfaces très chargées et compliquées.

2. Objectif du projet
Ce projet a pour objectif de créer une plateforme qui assure les fonctionnalités suivantes :

 Administrateur :
 S’authentifier.
 Consulter la liste des utilisateurs (apprenant, formateur).
 Répondre aux réclamations.
 Consulter la liste des formations existantes.
 Supprimer l’utilisateur non actif (apprenant, formateur).
 Ajouter une formation.
 Pour apprenant :
 S’authentifier.
 Gérer son profil (mettre à jour ses informations Personnels et la liste
des formations).
 S’inscrire à une formation.
 Consulter la liste des formations proposées.
 Réclamer un problème.

15
  Payer d’une formation.
 Télécharger et uploader des documents.
 Tchater avec ses collègues et le formateur.
 Pour le Formateur :
 S’inscrire au site de formation.
 S’authentifier.
 Gérer son profil.
 Ajouter une formation.
 Consulter la liste des apprenants par Formation.
 Réclamer un problème.
 Animer une formation.
 Uploader un cours.
 Uploader et télécharger des documents.
Etapes de réalisation :

Pour avoir une idée plus précise de mon travail tout au long du stage, voici un diagramme de
Gantt qui récapitule le déroulement des missions qui m’ont été demandées.

Le diagramme de Gantt [N1] est un outil de planification des tâches nécessaire pour la
réalisation d'un projet quel que soit le secteur d’activité. Il permet de visualiser l’avancement des
tâches d’un projet de manière simple et concise, de planifier et suivre les besoins en ressources
humaines et matérielles et donc de pouvoir suivre l’avancement du projet.

Le diagramme suivant va représenter les tâches principales à réaliser dans notre projet.

Figure 2: Planification temporelle

16
3. Présentation de l’application
Notre objectif consiste à créer une plateforme d’E-Learning qui répond au besoin du
formateur et des apprenants à la fois et de manière à :

 Garantir plus de souplesse pour la planification des formations à l’aide d’une

interface ergonomique et simple à manipuler pour les différents utilisateurs
 Faciliter l’accès aux ressources et services.
 Faciliter l’échange et la collaboration à distance.
 Améliorer la qualité d’apprentissage en utilisant les nouvelles technologies
multimédia.
 Garantir une interactivité entre le formateur et les apprenants à travers des
discussions instantanées pour donner des réponses aux questions en directe.
 Assurer la sécurité d’information.

Conclusion
Dans ce chapitre, nous avons donné la présentation générale du projet dont nous avons
détaillé les objectifs et les différentes étapes à réaliser en développant cette application. Le
chapitre qui suit va couvrir l’étude préliminaire

17
 Chapitre 2 Analyse et spécification des
besoins

Introduction
Dans ce chapitre, nous allons procéder à une étude préliminaire de notre projet ainsi d’une
analyse de l’existant. Nous allons exposer les solutions et les critiques, puis on va citer les
besoins fonctionnels et non fonctionnels, pour finir par la présentation de notre application.

1. Les applications Web

1.1 Définition
Une application web désigne un logiciel applicatif hébergé sur un serveur et accessible via un
navigateur web.

Contrairement à un logiciel traditionnel, l’utilisateur d’une application web n’a pas besoin de
l’installer sur son ordinateur. Il lui suffit de se connecter à l’application à l’aide de son
navigateur favori. La tendance actuelle est d’offrir une expérience utilisateur et des
fonctionnalités équivalentes aux logiciels directement installés sur les ordinateurs. Les
technologies utilisées pour développer les applications web sont les mêmes que celles
employées dans la création des sites internet [N2] :

Figure 3: Fonctionnement d'une application web [N3]

2. Spécification des besoins

2.1 Besoins fonctionnels

Notre objectif est de créer une plateforme qui assure les fonctionnalités suivantes :

 Visiteur :
 Créer un compte
 Consulter les formations et le forum partie front-end
 Contacter l’administrateur
 Administrateur :
 S’authentifier.
 Consulter et gérer la liste des utilisateurs (apprenant, formateur) .
 Répondre aux réclamations par l'envoi des emails.
 Consulter et gérer la liste des formations existantes (modifier au
supprimer).
 Gérer les vidéos et les documents et les QCM par chaque formation.
 Consulter la liste des formations par formateurs.
 Gérer son profil.
 Pour apprenant :
 S’authentifier.
 Gérer son profil (mettre à jour ses informations Personnels et la liste
des formations).
 Commenter une formation.
 Consulter la liste des formations proposées.
 Passer un test de certification.
 Réclamer un problème.
 Payer d’une formation.
 Télécharger des documents.
 Chater avec ses collègues et le formateur.
 Pour le Formateur :
 S’inscrire au site de formation.
 S’authentifier.
 Gérer son profil.
 Ajouter une formation.
 Uploader des documents.
 Commenter une formation.
3. Développement :
 Coté Front end :
 Inscription

Un visiteur peut s’inscrire dans notre site. Lors de cette inscription, il saisit son nom, email et
mot de passe afin de devenir utilisateur.

 Authentification

Afin d’accéder au site et pouvoir accéder aux différentes fonctionnalités (recherche,

messagerie...), tout utilisateur doit s’authentifier.

 Contact

Pour toute questions ou informations, l’utilisateur/visiteur doit pouvoir contacter

l'administrateur.

 Commenter

Un utilisateur peut ajouter un commentaire sous chaque formation.

 Blog

Formulaire de soumission de la part des utilisateurs. Ils exposent leur problématique, en

choisissant la catégorie associée. Les visiteurs peuvent juste consulter les sujets.

 Formation

Chaque utilisateur est capable d'accéder à la page formation pour consulter les listes des
formations proposer et de voir les détails de chacune, les formations peuvent être gratuits ou
payantes.

Pour les formations gratuites, seuls les utilisateurs connectés sont capables de suivre la
formation et de télécharger les documents accompagnés et les vidéos, aussi de commenter la
formation et les vidéos.

Les formations payantes ne sont accessibles qu’après un paiement. Une fois la formation
payée l'utilisateur peut suivre la formation et passer un test de QCM, s'il réussit une badge va
être ajoutée au compte de l'apprenant sinon il doit payer autre fois pour repasser le QCM.

Aussi l'apprenant peut communiquer avec le formateur ou les apprenants qui ont payé la
même formation.
  Recherche de formation

À tout moment, un utilisateur peut rechercher une formation selon leur : nom, catégorie à la
description.

 Les fonctionnalités côté administrateur :

 Connecter à son espace.
 Recevoir une notification pour chaque ajout d'une nouvelle formation au d'une
réclamation.
 Consulter et répondre à la réclamation par envoi d'un email.
 Une fois la formation ajoutée elle doit être activée par l'administrateur pour
quelle sera affichée à la page des formations coté front end.
 Si une formation et activée, le formateur n'a pas le droit d'aucune modification.
 Gestion des comptes des utilisateurs.
 L'administrateur est capable juste de modifier nom, email au mot de passe, et de
changer le rôle de chaque utilisateur.
 Gérer son compte.

Tout utilisateur (apprenant, admin, formateur) a des droits sur ses informations personnelles.
Il peut donc modifier à tout moment ses données telles que son pseudo, son mot de passe...
mais aussi son image (avatar) et ses informations personnelles.

 Compte côté Formateur :

 Gérer ses informations personnelles de son compte et qui contient les
fonctionnalités indiquées dans la partie Spécifications fonctionnelles au-dessus.

 Compte côté apprenant :

 Il peut consulter sa liste des bades et de gérer ses informations personnelles de
son compte.

4. Les besoins non fonctionnels

Il s’agit des nécessités qui précisent le système. Les besoins non fonctionnels sont importants
car ils agissent de manière indirecte sur le résultat et sur l'efficacité de l’utilisateur, ce qui fait
qu’ils ne doivent pas être oubliés. En effet, les exigences demandées au niveau du défit sont :
 L’extensibilité : dans le cadre de ce tache, le projet devra être extensible, c'est-à-dire
qu'il pourra y avoir une possibilité de gérer de nouvelles fonctionnalités.
  La sécurité : l’application devra être bien sécurisée, les informations ne devront pas être
autoriser à tout le monde, c'est-à-dire que le projet est accessible par un logo et un mot
de passe attribué à un acteur.
 La performance : l’application devra être performante c'est-à-dire que le système doit
réagir dans un délai précis, quel que soit l’action de l’utilisateur.
 L’ergonomie : le thème adopté par l’application, doit être inspiré des couleurs et du
logo type de l’entreprise d’accueil.
 La compatibilité : l’application doit être compatible avec les majeurs navigateurs
(Firefox, Internet Explorer, Opéra et Google Chrome).
 La Modularité : l'application doit être structurée en modules pour assurer une meilleure
lisibilité, une diminution du risque d'erreurs et une possibilité de tests sélectifs.

Conclusion
Au cours de ce chapitre, nous avons donné une analyse sur l’étude de l’existant et la critique
de ce dernier, ensuite nous avons proposé une solution.

Pout bien achever notre travail, on va élaborer dans le chapitre qui suit l’approche
conceptuelle de notre application web.
 Chapitre 3 : Etude conceptuelle

Introduction
La conception est la phase la plus importante dans la cycle de développement des
applications Web, au cours de ce chapitre, on présentera tout d’abord la modélisation du
diagramme de cas d’utilisation, par la suite on va montrer une vue statique du système par
la modélisation du digramme de classes relatif à notre projet, après on va présenter les
tables utilisées pour la manipulation de la base de données, et on terminera par la
présentation de la vue dynamique par la modélisation de quelques diagrammes de
séquence.

1. Principe de conception

La conception détaillée est une tâche délicate car elle nous permet de spécifier d’une manière
définitive les fonctionnalités du futur système d’information.

De ce fait la phase de conception nécessite des méthodes et langages permettant de mettre en place un
modèle sur lequel nous allons nous appuyer.

La modélisation consiste à créer une représentation virtuelle d’une réalité de telle façon à faire
ressortir les points auxquels nous allons nous intéresser, ce type de méthode est appelé
« analyse ». Parmi les méthodes existantes, on va choisir la plus simple et la plus organisée
la méthode UML.

2. Les diagrammes des cas d’utilisateurs

D’une manière générale, le diagramme de cas d’utilisation sert à définir l’ensemble des
actions réalisées par le système en répondant à une action d’un acteur. Entre autres il
consiste à schématiser les interactions entre les différents acteurs formants le système.
Le cas d’utilisation représente un ensemble d’actions réalisées par le système et donnant
un résultat intéressant et observable pour un acteur spécifié. Il permet de :
 Modéliser les attentes des utilisateurs du système.
 Améliorer la compréhension du système.
  Définir les interactions entre le système et l’acteur particulier.

3. Composition du diagramme de cas d’utilisation

Le diagramme de cas se compose de deux éléments principaux :

Un Acteur : La définition d'un acteur définit la limite du système. Tout ce qui fait
partie du système que nous définissons n'est pas un acteur. Ne pas placer donc pas la
base de données qui stocke les informations système en tant qu'acteur sur le
diagramme de cas d’utilisation : il fait partie du système et ne peut donc pas être un
acteur.
Un cas d’utilisation : Un cas d'utilisation est une procédure par laquelle un acteur
peut utiliser le système. 

3.1 L’acteur de notre projet

 Un visiteur : Il peut consulter toutes les formations proposées et les formateurs existants.
 Un Administrateur : Il s'occupe principalement de la partie technique de la plate-forme.
Ainsi la gestion des comptes utilisateurs et la gestion des formations. L'administrateur est
là aussi pour lire et répondre aux messages que peuvent se poster par les différents
utilisateurs de la plate-forme.
 Apprenant : Il souhaite suivre des cours et va s'inscrire sur la plate-forme. Une fois
l'apprenant inscrit, il va pouvoir consulter les formations et ajouter certaines formations au
favori et faire les tests qui lui sont proposés, enfin télécharger les documents supportés.
L’apprenant peut avoir la possibilité de participer aux forums, d'envoyer un message à un
formateur, à un autre apprenant ou même à l'administrateur pour commenter la formation.
 Formateur : Les formateurs, en premier temps s'inscrivent sur la plate-forme, ils peuvent
participer aux forums, lire et envoyer des messages, modifier leurs profils, répondre à des
commentaires, ajouter des formations et uploader des documents.

4. Les différents cas d’utilisation

4.1. Diagrammes de cas d’utilisation générale

 Inscription : Lors de cette inscription, un visiteur saisit son nom, email et mot de
passe afin de devenir utilisateur.
 Animer une formation : il s’agit d’un outil permettant d’effectuer les opérations de
gestion de modification telles que l’ajout, la suppression, la consultation des
informations caractérisant chacun des formations.
 Consultation du forum : Un visiteur n'a pas le droit d'ajouter un sujet dans le
forum, il peut juste consulter les sujets par catégorie.
 Gérer le profil : Un utilisateur a des droits sur ses informations personnelles. Il peut
donc modifier à tout moment ses données telles que son pseudo, son mot de passe...
mais aussi son image(avatar) et ses informations personnelles.
 Gestion des utilisateurs : Il s’agit d’un outil permettant d’effectuer les opérations
de gestion de modification telles que l’ajout, la suppression, la consultation des
informations caractérisant chacun des utilisateurs.
 Gestion des formations : Il s’agit d’un outil permettant d’effectuer les opérations
de gestion de modification telles que l’ajout, la suppression, la consultation des
informations caractérisant chacun des formations.
 Gestion de la plateforme : Il s’agit d’un outil permettant d’effectuer les opérations
de gestion de modification telles que l’ajout, la suppression, la consultation des
informations caractérisant chacun des composant de la plateforme.
 Gestion du forum : Elle permet d’effectuer les opérations de gestion telles que la
modification, l’ajout et la suppression des sujets et des catégories.
Diagramme des cas d’utilisation général

Figure 4 : Diagramme de cas d’utilisation générale

Diagrammes de cas d’utilisation pour administrateur
La figure suivante détaille le cas d’utilisation pour administrateur
 Figure 5: Diagramme des cas d’utilisation pour administrateur

Diagrammes des cas d’utilisations pour les activités des apprenants

Figure 6: Diagramme des cas d’utilisation pour Apprenant

Diagramme des cas d’utilisation pour les activités des formateurs

Figure 7: Diagramme des cas d’utilisation pour Formateur

Nous nous intéressons au cas d’utilisations les plus pertinents.
Cas d'utilisation « S'authentifier »

Cas d'utilisation « S'authentifier »

Acteur : Administrateur
Pré condition : Affichage de la page d'authentification
Post condition : Administrateur authentifié
Scénario nominal :
1. Accéder à l’interface d’authentification
2. Saisie des données
3. Validation
4. Ouverture de l'espace de travail correspondant au profil.
Scénario alternatif :
1. Le système informe l’acteur que les données saisies sont erronées et lui demande s’il
veut corriger ces données.

Tableau 1: Description du cas « S'authentifier »

Cas d'utilisation « Gestion des utilisateurs »

Figure 8: Diagramme du cas d'utilisation « Gestion des Formations »

Cas d'utilisation « Ajouter utilisateur»
Acteur : administrateur
Pré condition : administrateur authentifié
Post condition : utilisateur ajouté
Scénario nominal :
1. Accéder à l'interface d'ajout utilisateur.
2. L'acteur saisie les données relatives à un utilisateur et lui affecter un rôle.
3. Le système vérifie la validité des informations saisies.
4. Le système sauvegarde ces informations dans la base de données.
5. Le système notifie l’acteur du succès de l'opération.

Scénario alternatif :
1. Le système notifie l’acteur que des données sont manquantes ou incorrectes : ce scénario
commence au point 03 du scénario nominal.

Tableau 2: Description cas d'utilisation « Ajouter utilisateur »

Cas d'utilisation « Modifier utilisateur »

Acteur : Administrateur
Pré condition : Administrateur authentifié
Post condition : utilisateur modifié
Scénario nominal :
1. Accéder à l'interface des listes des utilisateurs
2. Choisir un utilisateur
3. Modifier données
4. Le système vérifie la validité des informations saisies.
5. Le système sauvegarde ces informations dans la base de données.
6. Le système notifie l’acteur du succès de l'opération.

Scénario alternatif :
1. Le système notifie l’acteur que des données sont manquantes ou incorrectes : ce
scénario commence au point 04 du scénario nominal.

Tableau 3 : Description cas d'utilisation « Modifier utilisateur »

Cas d'utilisation « Supprimer utilisateur »

Acteur : Administrateur
Pré condition : Administrateur authentifié
Post condition : utilisateur supprimé
Scénario nominal :
 1. Accéder à l'interface des listes des utilisateurs.
2. Sélectionner un utilisateur
3. Cliquer sur le bouton supprimer
4. Le système notifie l’acteur de bon déroulement de l'opération.
Scénario alternatif :
1. Erreur de suppression

Tableau 4: Description cas d'utilisation « Supprimer utilisateur »

Cas d'utilisation « Gestion des formations »

Figure 9: Diagramme du cas d'utilisation « Gestion des formation »
Cas d'utilisation « Ajouter formation »
Acteur : administrateur, formateur
Pré condition : administrateur ou formateur authentifié
Post condition : formation ajoutée
Scénario nominal :
1. Accéder à l'interface d'ajout des formations
2. L'acteur saisi les données relatives à la formation.
3. Le système vérifie la validité des informations saisies.
4. Le système notifie l'administrateur qu'une formation a été ajoutée.
5. Le système ajoute la formation au profil du formateur.

Scénario alternatif :
1. Le système notifie l’acteur que des données sont manquantes ou incorrectes : ce
scénario commence au point 03 du scénario nominal.
Tableau 5: Description cas d'utilisation « Ajouter formation »

Cas d'utilisation «Animer une Formation»

Acteur : Administrateur, formateur
Pré condition : Administrateur authentifié
Post condition : Le formateur anime une formation.
Scénario nominal :
1. Accéder à l'interface des listes des formations.
2. Sélectionner une formation.
3. L'acteur uploade son support de formation par vidéo et ajoute des questions.
4. Le système sauvegarde ces informations dans la base de données.
5. Le système informe l'acteur du succès de chaque l'opération.
Scénario alternatif :
1. Données erronées
Tableau 6: Description cas d'utilisation « Animer une Formation »
Cas d'utilisation « Gestion profil »

Figure 10: Diagramme du cas d'utilisation « Gestion profil »

 Cas d'utilisation «Gérer le profil»
Acteur : Administrateur, Apprenant, Formateur
Pré condition : L'acteur doit être authentifié.
Post condition : Mise a jour du profil.
Scénario nominal :
1. Accéder à l'interface de profil.
2. Cliquer sur bouton modifier.
3. L’acteur met à jour ses informations.
4. Le système vérifie la validité des données saisies.
5. Le système sauvegarde ces informations dans la base de données.
6. Le système informe l'acteur du succès de l'opération mise à jour de son profil.

Scénario alternatif :
1. Le système notifie l’acteur que des données sont manquantes ou incorrectes : ce
scénario commence au point 04 du scénario nominal.

Tableau 7: Description cas d'utilisation « Gérer le profil »

Cas d’utilisation « Gestion des plateforme »

Ce cas d’utilisation se fait comme suit :

Figure 11 : Diagramme du cas d'utilisation « Gestion plateforme »

Cas d'utilisation «Gérer la plateforme»

Acteur : Administrateur
 Pré condition : Administrateur authentifié
Post condition : Gérer les services
Résumé :
1. Permet à l’administrateur de créer, supprimer, modifier un service pour la plateforme.

Tableau 8: Description cas d’utilisation « Gérer la plateforme »

Cas d'utilisation « Supprimer utilisateur »

Acteur : Administrateur
Pré condition : Administrateur authentifié
Post condition : utilisateur supprimé
Scénario nominal :
1. Accéder à l'interface de suppression marque
2. Sélectionner une marque
3. Supprimer marque
4. Valider
Scénario alternatif :
1. Erreur de suppression
Tableau 9: Description cas d'utilisation « Supprimer utilisateur »

5. Modèles statiques
5.1 Diagramme de classe

Le diagramme de classe [N4] est un schéma utilisé en génie logiciel pour présenter les classes
et les interfaces d’un système ainsi que les différentes relations qui existent entre elles. Ce
diagramme appartient à la partie statique d’UML car il fait abstraction des aspects temporels
et dynamiques.

Une classe est un ensemble de fonctions et de données (attribut) qui sont liées par un champ
sémantique. Les classes sont utilisées dans la programmation orientée objet. Elles permettent
de modéliser un programme et découper une tâche complexe en plusieurs petits travaux
simples.
 Figure 12: Diagramme de classe

5.2 Description des classes

 La classe users : définit les utilisateurs de notre système qui sont caractérisé par un
login et un mot de passe et des informations personnelles.
 La classe sujet : précise les sujets ajoutées par les utilisateurs (formateur, apprenant,
administrateur) dans le forum de la plateforme.
 La classe catégorie : précise les catégories ajoutées par l'administrateur dans le forum
de la plateforme.
 La classe setting : précise les paramètres de configuration ajoutées par l'administrateur
de la plateforme.
 La classe contact : précise les messages de réclamation envoyés a l’administration.
 La classe commentaire : précise les commentaires ajoutés par formation ou par vidéo
par l’utilisateur connecté.
 La classe documents : précise les documents ajoutés par vidéo (référence, nom code à
barre…)
 La classe vidéo : précise les vidéos ajoutés par formation.
 La classe question_ Qcm : contient les groupes des questions par formation.
 La classe réponse_ Qcm : contient les groupes des réponses des questions d'un
utilisateur.
 La classe formation : définit les formations de notre système ajoutés par les formateurs.
 La classe paiement : précise les listes des formations payées par utilisateur.
 La classe chat : contient les messages transférés entre deux utilisateurs.

Méthodes :

Nous n'avons pas inclut les méthodes des différentes classes dans le diagramme de classe, vu
leurs large nombre, mais nous notons que dans presque chaque classe les méthodes suivantes
"Insert ()", "Update ()" et "Delete()" sont implémentées.
 6. Modèle dynamique
6.1 Diagramme de séquence
Le diagramme de séquence est la représentation graphique des interactions entre les acteurs et le
système selon un ordre chronologique dans la formulation UML. Le but étant de décrire comment se
déroulent les actions entre les acteurs ou les objets.

6.2 Diagramme de séquence « s’authentifier »

La figure représente le diagramme de séquence du cas d'utilisation d'authentification.

 Figure 13 : Diagramme de séquences « s’authentifier »

 Description du diagramme

Un utilisateur qui se connecte doit introduire son login et son mot de passe. Le contrôleur
vérifie les données saisies. Si elles sont valides, il lance une requête interrogeant la base de
données. Si l'utilisateur existe c.à.d. authentification réussite : redirection à l'interface
d'accueil avec la liste de ressources attribuées. Sinon redirection à l'interface d'authentification
et affichage d'un message d'erreur et on boucle.
6.3 Diagrammes de séquences « Gestion des formations »
La figure suivante représente le diagramme de séquence du cas d'utilisation ajouter formation.
 Figure 14 : Diagramme de séquences « Ajouter formation »

 Description du diagramme

Le formateur introduit les informations concernant formation (nom, description…). Dans le

cas favorable, une requête "Insert" sera exécutée et un message de succès sera affiché à
l'acteur. Sinon, un message d'erreur sera affiché.
La figure suivante représente le diagramme de séquence du cas d'utilisation gérer formation.
 Figure 15: Diagramme de séquences « Gérer formation »

 Description du diagramme

Le formateur ressaisi les données relatives à une formation. Ces données passent au
contrôleur qui vérifie leur validité. Dans le cas favorable, une requête "Update" sera exécutée
et un message de succès sera affiché à l'administrateur. Sinon, un message d'erreur sera
affiché.

Si non le formateur peut demander la suppression d'une formation, le contrôleur retourne une
confirmation si la confirmation est OK alors une requête "Delete" sera exécutée et un message
de succès sera affiché.

La figure suivante représente le diagramme de séquence du cas d'utilisation « animer

formation ».
Figure 16: Diagramme de séquences « Animer formation »
  Description du diagramme

L'administrateur demande la suppression d'un fournisseur, le contrôleur retourne une

confirmation, si la confirmation est OK alors une requête "Delete" sera exécutée et un
message de succès sera affiché si la suppression est réussite, sinon un message d'erreur sera
affiché.

6.4 Diagrammes de séquences « suivre une formation »

La figure 17 représente le diagramme de séquence du cas d'utilisation suivre formation.

 Figure 17: Diagramme de séquences « suivre formation »

 Description du diagramme

L'apprenant accède à une formation si la formation est gratuite, il peut consulter tous les
vidéos de la formation et télécharger des documents s'ils existent, et même de commenter la
formation pour demander une explication ou poser une question. Sinon, il doit payer la
formation.
La figure 18 représente le diagramme de séquence du cas d'utilisation ajouter utilisateur.

Figure 18 : Diagramme de séquences « Ajouter utilisateur »

 Description du diagramme

L'administrateur introduit les informations concernant l'utilisateur (Email, mot de passe.).

Dans le cas favorable, une requête "Insert" sera exécutée et un message de succès sera affiché
à l'administrateur. Sinon, un message d'erreur sera affiché.
La figure19 représente le diagramme de séquence du cas d'utilisation « répondre réclamation
».
 Figure 19: Diagramme de séquences « Répondre réclamation »

 Description du diagramme

L'administrateur, après la consultation des réclamations reçues, il peut répondre à la question

des utilisateurs par l'envoi d'un mail vers le destinataire.
 7. Diagramme d’activité

Figure 20 : Diagramme d’activité « Gérer utilisateur »

Conclusion
Dans ce chapitre, nous avons présenté la partie conceptuelle en élaborant les différents
diagrammes qui nous ont facilité l’implémentation de notre application.

Le chapitre suivant est consacré à la description de l’application. Nous y décrivons les

différentes interfaces développées ainsi que l’environnement logiciel que nous avons opté
pour réaliser notre projet.
 Chapitre 4 : Réalisation

Introduction
Ce chapitre est consacré à l’exposé de la mise au point de notre application. Pour ce faire,
nous allons présenter en premier lieu, l’environnement logiciel ainsi que les différents choix
techniques utilisés dans notre projet. Ensuite, nous allons décrire les principales interfaces que
nous avons développées tout en expliquant brièvement la démarche à suivre pour un bon
fonctionnement de notre application.

8. Environnement logiciel et langages utilisés

Les principaux outils qui sont utilisés pour la conception et le développement de notre
application sont : la réalisation de cette application a été faite sous la plateforme XAMPP
server qui permet d’intégrer le langage de script PHP, MYSQL et le serveur Apache…

Tout d’abord, voici les différents langages utilisés pour la réalisation du site web :

Le rôle du CSS est de gérer l'apparence de la page web (agencement,

positionnement, décoration, couleurs, taille du texte…). Ce langage est le
complément du langage HTML pour obtenir une page web avec du style.
Le navigateur parcourt le document HTML. Lorsqu'il rencontre une
balise, il demande à la CSS de quelle manière il doit l'afficher. [N5]
 Le langage PHP est un langage de programmation web exécuté côté
serveur et non pas du côté client comme le langage JavaScript. J'ai réalisé
des scripts PHP pour rendre le site web dynamique et pour pouvoir
modifier le contenu du site web. [N6]

Le code PHP dans chacune des pages HTML agit à chaque chargement et rafraîchissement de
la page web. L’ensemble de mes scripts PHP que j’ai réalisé possèdent tous la même
structure. Tout d’abord je me connecte à ma base MySQL, ensuite je crée et exécute ma
requête et pour finir j’affiche le résultat.

MySQL dérive directement de SQL (Structured Query Language) qui est

un langage de requête vers les bases de données exploitant le modèle
relationnel, mais ne possède pas toute la puissance du langage SQL. [N7]

Le serveur de base de données MySQL est très souvent utilisé avec le langage de création de
pages web dynamiques qui est PHP.

XAMPP est un ensemble de logiciels permettant de mettre en place

facilement un serveur Web local, un serveur FTP et un serveur de
messagerie électronique. Il s'agit d'une distribution de logiciels
libres (X (cross) ApacheMariaDB Perl PHP) offrant une bonne souplesse
d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à
la portée d'un grand nombre de personnes puisqu'il ne requiert pas de
connaissances particulières et fonctionne, de plus, sur les systèmes
d'exploitation les plus répandus. [N8]
 J’ai utilisé Bootstarp puisqu’ il est utile par la création de design
(animation, graphisme …) d’applications et de sites web. C’est un
ensemble qui contient des formulaires, boutons, des codes HTML et
CSS, outils de navigations et autres éléments interactifs. [N9]

9. Framework

Nous avons utilisé Laravel [N10] comme étant un cadre de travail.

2.1 Définition
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 distribué
sous licence MIT, avec ses sources hébergées sur GitHub.

Laravel fournit des fonctionnalités en termes de routage de requête, de mapping objet-

relationnel (un système baptisé Eloquent implémentant Active Record), d'authentification, de
vue (avec Blade), de migration de base de données, de gestion des exceptions et de test
unitaire.

2.2 Modèle MVC

 Figure 21: Modèle MVC [N11]

C'est un modèle d'organisation du code :

 Le modèle est chargé de gérer les données.

 La vue est chargée de la mise en forme pour l'utilisateur.

 Le contrôleur est chargé de gérer l'ensemble.

En général on résume en disant que le modèle gère la base de données, la vue produit les
pages HTML et le contrôleur fait tout le reste. Dans Laravel :

 Le modèle 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.
 Le contrôleur se décline en deux catégories : contrôleur classique et contrôleur de
ressource.
 La vue est soit un simple fichier avec du code HTML, soit un fichier utilisant le
système de template Blade de Laravel.

10.Développement de la solution
2.3 Interfaces graphiques principales partie front end
 2.4 Interfaces accueil
L’interface de démarrage de notre plateforme est celle affichée dans la figure suivante :
 Figure 22: Interface d’accueil
Cette interface comporte quelques formations et une description de la plateforme.

2.5 Interfaces Qui somme nous

L’interface « Qui somme nous » de notre application est présentée dans la figure 23 :
 Figure 23: Interface Qui somme nous
Cette interface présente une description détaillée de la plateforme ( historique, opportunité et
indication des formateurs).

2.6 Interfaces Contact

L’interface « contact » de notre application est présentée dans la figure suivante :
 Figure 24: Interfaces Contact

Pour contacter l'administrateur, l’utilisateur ou le visiteur doit remplir le formulaire suivant, si

tous les champs sont remplis avec succès, il va cliquer sur envoyer message.

2.7 Interface forum

Interface consulter forum

L’interface « forum » de notre application est présentée dans la figure 25 :

 Figure 25 : Consulter forum
Tous les utilisateurs connectés ont la possibilité de consulter, d'ajouter un sujet ou de
commenter une réponse pour un sujet publié.

Interface ajouter sujet

 Figure 26: Interface ajouter sujet

Un utilisateur doit remplir le formulaire suivant, si tous les champs sont remplis avec succès,
il va cliquer sur ajouter pour publier un sujet.

Interface ajouter réponse

Figure 27: Interface ajouter réponse

Un utilisateur peut ajouter ou supprimer ces réponses pour un sujet publié.

2.8 Interface formation

 Interface liste des formations

Figure 28: Interface liste des formations

Selon cette interface on peut consulter toutes les formations activées, payantes et non
payantes aussi, Tous les acteurs ont la possibilité de rechercher une formation selon son nom,
ou sa catégorie, à l'aide du champ de recherche au-dessus de la page.
  Interface Détail de formation

En cliquant sur une formation, on peut accéder à l'interface ci-dessous :

Figure 29: Détail de formation

 Interface Suivre formation

En cliquant sur le bouton suivre formation ? on peut consulter la liste des vidéos pour une
formation.
 Figure 30: Suivre formation

En cliquant sur une vidéo, on peut accéder à l'interface ci-dessous :

Figure 31 : Consultation de vidéo

Cette interface présente la vidéo choisie et les documents ajoutées par le formateur, un
apprenant a la possibilité de lancer ou télécharger la vidéo ou le document, et aussi d'ajouter
un commentaire.
  Interface Passer un test Qcm

En cliquant sur passer certif, on peut accéder à l'interface ci-dessous :

Figure 32: Passer un test Qcm

Pour une formation payante, un apprenant peut passer un test de certification si toutes les
réponses sont justes. Dans ce cas, un badge de cette formation va être ajouté dans le compte
de l'apprenant.
 Figure 33: Interface de chat

11. Interfaces graphiques principales partie back end

4.2. Authentification

Figure 34 : Interface d'authentification

L'interface de la figure précédente est la première page qui se charge lorsqu’on se connecte à
l'application.

L'utilisateur est invité à saisir son login et son mot de passe pour pouvoir y accéder. Une fois
authentifié, il se trouve à la page d'accueil avec ses ressources attribuées. Ses ressources sont
sauvegardées dans la base de données et sont déterminées selon le rôle de l'utilisateur
authentifié.

4.1.1. Interface d’accueil administrateur

 Figure 35: Interface d'accueil

L'interface d’accueil constitue la première page lancée une fois l'utilisateur est authentifié.
A partir de cette page, l’administrateur peut accéder à tout ce qui est indiqué au menu de
gauche. Ce menu-là change selon les ressources allouées à chaque utilisateur.

Dans l'interface “home principale“, l’administrateur peut consulter les 10 dernières formations

ajoutées. Les 4 derniers utilisateurs ont inscrit la liste des réclamations envoyés, avec une
information sur le nombre totale des messages, les formations désactivés et activés, et les
membres de la plateforme.

L’administrateur peut gérer la configuration de la plateforme les formations, les utilisateurs, le

forum de l'interface front end, les réclamations envoyés à partir de l'interface contact du front
end et finalement de gérer son profil : d'ajouter ou modifier ses informations personnelles et
sa photo.
Les notifications pour les formations : Lorsqu’un formateur ajoute une nouvelle formation
une notification va informer l’administrateur pour activer cette formation ajoutée, par un cliq
sur le bouton d'activation en jaune ou avec le numéro en rouge à gauche de la page.

Figure 36 : Notifications pour formations

Les notifications pour les messages : Lorsqu’un utilisateur envoie une réclamation vers
l'administrateur, une notification va informer l’administrateur qu'il a un nouveau message
encore non lu avec le flag au-dessus de la page ou avec notification "new" en vert sur le
service contact.

Figure 37 : Notifications pour réclamations

 4.1.2. Tables
Dans tous les tables de notre application on utilise la bibliothèque Data table qui permet
d'ajouter :

 Pagination des données de notre tableau.

 Tri des données sur une ou plusieurs colonnes.

 Filtres à la volé.

 Boite de recherche en temps réel.

12. Interface gestion de la plateforme

Figure 38: Interface de gestion de la plateforme

Cette interface désigne la liste des services de la plateforme, à travers laquelle on peut ajouter,
modifier ou supprimer un service affiché dans les interfaces front end. Pour l'ajout, on doit
choisir le type de service a ajouter parmi les trois suivantes (texte, textarea à l’image
 13. Interface comptes utilisateurs 

Figure 39: Liste comptes utilisateurs

Cette interface désigne la liste des comptes des utilisateurs, à travers laquelle on peut ajouter,
modifier ou supprimer un compte.

L’administrateur peut ajouter des nouveaux utilisateurs en cliquant sur le bouton ajouter
utilisateur, et en remplissant le formulaire de l’interface d'ajout. Il peut aussi les modifier ou
les supprimer en cliquant sur le bouton modifier ou supprimer.
 Figure 40 : Modifier utilisateurs
L’administrateur peut modifier le nom et l'email, ainsi que le rôle et le mot de passe d'un
utilisateur. Aussi il peut activer et désactiver les listes des formations ajoutées par un
utilisateur et en cliquant sur le bouton modifier l’interface au-dessous va être affichée.

14. Interface ajout utilisateurs 

Figure 41 : Ajouter utilisateurs

Cette interface permet l’ajout d’un nouvel utilisateur en déterminant son nom, login, mot de
passe et en précisant le rôle auquel il appartient. De cette façon chaque utilisateur récupéra les
ressources nécessaires.
 15. Interface de gestion des formations
8.1. Liste des formations

Figure 42 : Liste des formations

Au niveau de cette interface, on peut ajouter, modifier ou supprimer des formations dans notre
plateforme. On peut connaitre toutes les caractéristiques des formations tel que leurs noms,
leurs niveau, leurs état, leurs prix de ventes (qui sont des prix modifiable au cours du temps)...

8.2. Ajout/ modification d'une formation

 Figure 43:Interface d’ajout / modification de formation
L’administrateur peut ajouter des nouvelles formations en cliquant sur le bouton ajouter
formation, en remplissant le formulaire de l’interface d'ajout. Il peut aussi les modifier ou les
supprimer en cliquant sur le bouton modifier ou supprimer. L’administrateur choisit une
formation et clique sur le bouton modifier l’interface au-dessus va être affichée. Une fois
l'ajout ou la modification d’une formation est terminé un message de succès s’affichera.

Après l'ajout d'une formation, un formateur peut gérer des questions au des vidéo.

16. Interface de gestion des questions

9.1. Liste des questions
En cliquant sur la bouton question on peut accéder à la liste des questions par
formation.

Figure 44: Interface liste des questions

9.2. Ajout des questions
En cliquant sur le symbole plus , on peut accéder à l'interface d'ajout des questions par
formation.

Figure 45: Interface d’ajout des questions

Pour ajouter une question, il faut entrer la question et les choix des réponses, et indiquer la
réponse juste, puis cliquer sur enregistrer les données seront enregistrées dans la base et un
message de succès s’affichera.

17. Interface de gestion des vidéos

10.1. Liste des vidéos
En cliquant sur bouton vidéo on peut accéder à la liste des vidéos par formation.

Figure 46: Interface liste des vidéos

A partir de cette interface on peut déterminer une liste précise contenant les titres et
descriptions et documents de chaque formation.

Comme la montre la figure ci-dessous, on peut supprimer des vidéos par formation ou d'ajouter
des documents par vidéo.

18. Interface de gestion de forum

11.1. Liste des catégories et des sujets

Figure 47: Liste des catégories

 Figure 48: Liste des sujets

A l’aide de ces interfaces, l’administrateur peut gérer le forum dans la partie front end par
l'ajout, la modification et la suppression des sujets, des catégories à partir de son back end.
Toute information concernant les sujets (nom, catégories) est indiquée dans le tableau
affiché dans cette interface au-dessous.

19. Interface de gestion des réclamations

12.1. Liste des messages

En cliquant sur bouton Afficher , on peut accéder pour lire un message.

Figure 49 : Gestion des réclamations

L’interface de contrôle des messages nous affiche les différents messages envoyés à
l’administrateur.
A l’aide de cette interface, l’administrateur peut gérer les réclamations envoyées à partir de
l'interface contact dans la partie front end de notre projet.

En cliquant sur le champ setting, on peut accéder à l'interface ci-dessous :

Figure 50 : Affichage et envoi des émails

L'administrateur peut contacter un utilisateur ou un visiteur en cliquant sur l’icône
‘’afficher’’, ça s’affichera par la suite un formulaire contenant le message reçu et un champ
pour écrire un émail à envoyer pour répondre aux réclamations et questions posés, comme le
présente l’interface ci-dessus
 20. Interfaces de gestion de profil

13.1. Consultation de profil

Figure 51: Consultation de profil

En cliquant sur le champ setting on peut accéder à l'interface ci-dessous :

Figure 52: Changer nom email et mot de passe

En cliquant sur le bouton modifier on peut accéder à l'interface ci-dessous :

 Figure 53: Modifier l’information personnelle

En cliquant sur l'image on peut accéder à l'interface ci-dessous pour modifier l'image :

Figure 54: Modifier l'image

  Interface formateur back end

Figure 55: Interface formateur

Comme la montre la figure ci-dessus, un formateur possède quelques fonctionnalités similaires

à l'administrateur, comme la gestion de ces formations et une notification indiquant les
formations encore non activées.

 Interface apprenant back end

 Figure 56: Interface apprenant

Comme la montre la figure ci-dessus, un apprenant peut gérer son profil et consulter ses badges
obtenus.

Conclusion
Dans cette partie, nous avons mis l’accent sur la description des différentes technologies et
outils utilisés lors de la réalisation de notre projet. Notre choix a été effectué selon le besoin
de l’application tout en essayant à chaque fois d'utiliser l'outil le plus adéquat. De plus, nous
avons présenté les différentes phases de déroulement de travail ainsi que la visualisation de
quelques interfaces.
Conclusion et perspectives
Notre projet de fin d’études vise à développer une application web qui a été réalisé au sein de
la société N3RD Tunisie qui nous a offert l’opportunité d’appliquer nos connaissances
théoriques sur le plan pratique.

Nous avons analysé la politique environnementale optimale de notre application.

L’analyse conceptuelle est modélisée par le concept orienté objet (UML), ce qui a permis
de mener correctement la tâche d’analyse des besoins à l’aide du diagramme de cas
d’utilisation et la tâche de conception, ainsi les scénarios sont aussi détaillés afin
d’expliquer toute tâche faite puisque nous travaillons avec le plateforme XAMP.

Le projet consistait en général à développer une application web Plateforme d'organisation et

de planification des formations certifiantes.

Ce stage nous a permis d’approfondir nos connaissances théoriques, acquises tous le long de
notre formation. Cette petite expérience nous a permis de maîtriser le langage de modélisation
UML, Le Framework Laravel (outils de développement PHP), sous lequel le développement
n’a pas été une tâche facile

Ce projet était bénéfique sur tous les plans. Ainsi, il nous a permis de nous perfectionner en
améliorant nos connaissances en programmation et en conception, de bien comprendre et
mettre en évidence le déroulement d’un cycle de vie d’un logiciel et de découvrir le monde de
l’entreprise (fonctionnement).

Bien que nous ayons pu atteindre les objectifs tracés au départ, notre application pourrait être
enrichie soit de point de vue nombres de services offerts, soit au niveau de l’aspect de ses
services. Sachant qu’aucune conception n’est parfaite et que toute conception peut s’enrichir,
ce travail reste ouvert pour d’autres améliorations grâce à la diversité des langages de
programmation et des systèmes de gestion de base de données.
Listes des acronymes

AJAX: Asynchronies JavaScript And XML

CSS: Cascading Style Sheets

CTO: Chief Technology Officer

HTML: Hyper Text Markup Language

MVC: Model Vue Controleur

PHP: PHP Hypertext Preprocessor

UML: Unified Modeling Language

x
XAMPP: X (cross) ApacheMariaDB Perl PHP

Bibliographie et Netographie
[0] : http: //www.N3RD.com

[N1] : https://fr.wikipedia.org/wiki/Diagramme_de_Gantt Gantt

[N2] : https://www.ideematic.com/dictionnaire-web/application-web

[N3] :https://www.google.tn/search?q=fonctionnement+d
%27une+application+web&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwjys5XEm
J7WAhVFbBoKHfpBDxcQsAQILg&biw=1280&bih=683#imgrc=yWLJj6kYMDSYwM:

[N4] : https://fr.wikipedia.org/wiki/Diagramme_de_classes

[N5] : https://fr.wikibooks.org/wiki/Le_langage_CSS

[N6] : https://fr.wikipedia.org/wiki/PHP

[N7] : https://fr.wikipedia.org/wiki/MySQL

[N8] :https://fr.wikipedia.org/wiki/XAMPP

[N9] : https://fr.wikipedia.org/wiki/Bootstrap
[N10] : https://fr.wikipedia.org/wiki/Laravel

[N11] : http://prof.bpesquet.fr/cours/modele-mvc/