Département Génie Informatique

Mémoire de Stage de Fin d’Etudes

Présenté pour l’obtention du
Diplôme Licence Professionnelle

Filière
Développement des Systèmes d'Information et de Communication

Entreprise
IN4
Présenté Par
EL MAHDI OUQAS
Titre

Contribuer à la réalisation d’un

projet LMS

Encadré au niveau entreprise par

ILIASS BOUTALHA

Soutenu le 25/06/2021 devant le jury

Pr. ……. UMI-EST-Meknès

Pr. ……. UMI-EST-Meknès

2
 Table des matières

Table des figures 5

Dédicace 7

Remerciements 8

Chapitre I 9
1-Le Contexte de stage 10
2-L’entreprise in4 : 10

Chapitre II 12
I-Etude de projet : 13
1-Objectifs du projet 13
2-C'est quoi, une plate-forme d'apprentissage en ligne? 13
3- E-learning 14
4-Etude des besoins fonctionnels 14
5-Etude des besoins non fonctionnels 15

Chapitre III 17
I-Choix de langage de modélisation : 18
1-UML 18
II- diagrammes UML : 18
1-Diagramme de classe 18
2-Diagramme de cas d’utilisation 21
3-Diagramme de séquence : 26
4- Diagramme d’activités : 30

Chapitre III 32
I-Les Framework 33
1-Qu’est-ce qu’un Framework? 33
2-Pourquoi un Framework? 36
3-Analyse de différents Framework : 36
II-Choix du Framework et explication de ce choix 39
1-Front-End 39

3
 2-Back-End 40
3-Organisation du projet et division des tache : 41

Chapitre IV 42
1-installation de laravel : 43
2- cloner le projet déjà Crée : 43
3- L'avancement du projet 46
I-Mes tache dans Le projet: 58
1-AdminCheck : 58
2-MacCheck : 58
3-CRUDs : 59

Chapitre V 63
Conclusion générale 64
Bibliographie 65

4
 Table des figures
Figure 1 : Logo de la société In4. 10
Figure 2 : Organigramme du projet a réalisé 16
Figure 3 : Diagramme de classe 19
Figure 4 : Diagramme de cas d'utilisation générale 21
Figure 5 : Diagramme de séquence "Passer un quiz" 26
Figure 6 : Diagramme de séquence "Participer a un cour " 27
Figure 7 : Diagramme de séquence "Ajouter Un Cour ".. 28
Figure 8 : Diagramme de séquence "Gestion des adresses mac " 29
Figure 9 : Diagramme d’activité "Gestion des badges". 31
Figure 10 : Logo du framework Laravel. 40
Figure 11 : Logo du Git
Figure 12 : commande clone 43
Figure 13 : l’arborisant du projet 44
Figure 14 : Le fichier de configuration “.env”. 45
Figure 15 : la page d’authentification 46
Figure 16 : le profile de l’utilisateur 47
Figure 17 : pop-up de génération d’avatar 48
Figure 18 : générer un avatar aléatoirement 49
Figure 19 : L’erreur qui apparaitre si on a dépassé le nombre maximal des adresse mac ………50
Figure 20 : table de gestion des adresse mac 51
Figure 21 : Le fichier de routage "web.php" 52
Figure 22 : le code de vérification par mail 52
Figure 23 : la page dashboard 53
Figure 24 : la page dashboard en bas 54
Figure 25 : la page de Gestion des Cours. 55
Figure 26 : la suppression d’un badge. 56

5
Figure 27 : l’ajoute d’un quiz 56
Figure 28 : la modification un badge. 57
Figure 29 : Le code source du midlleware AdminCheck. 59
Figure 30 : Le code source du midlleware MacCheck 41
Figure 31 : Le code source du model Trophie 60
Figure 32 : Le code source du fichier de migration trophies. 60
Figure 33 : la table générée dans le serveur 61
Figure 34 : code source du Controlleur TrophieController 62

6
 Dédicace

En têtes de la liste de toutes personnes nous plaçons

les membres de nos familles bien aimés qui ne nous ont
jamais hésité à nous offrir le meilleur qu’ils pouvaient.
Notamment à nos chers parents En témoigne de notre
profonde gratitude et pour tous les sacrifices qu’ils nous
contentons, Grâce à leurs encouragement, leur soutiens
moral et matériel, et leurs amours infinis.

7
 Remerciements

Au terme de stage de fin d’etude que j’ai effectué

au sein de la société IN4 à MEKNES, je tiens à
exprimer mes sincères remerciements et mes profondes
gratitudes à « Monsieur Boutalha Iliass et Monsieur
Houssam Sadiki pour m’avoir encadré tout au long de la
période de stage, je tiens aussi à remercier toutes
l’équipe IN4 pour leur support et disponibilité que
j’apprécie beaucoup.
Mes remerciements vont à tous mes enseignants et
professeurs au sein de l’Ecole Nationale des Sciences
Appliquées de FES pour leur sympathie, leurs conseils
et directives, lesquels me seront sans nul doute d’un
grand intérêt, pour mon parcours académique et
professionnel.

8
 Chapitre I

Introduction

9
 1-Le Contexte de stage
Ce stage entre dans le cadre de l’approfondissement des apprentissages théoriques et
l’amélioration des compétences techniques, professionnels et personnels afin de se préparer
pour une intégration moins difficile dans le marché de travail.

Puisque l’évolution du monde favorise le tout digital, j’ai choisi de faire mon stage
d’initiation d’un mois dans une société active dans le domaine de digitalisation et de
l’informatique, afin de se familiariser avec les outils et méthodes de conceptions et
développement des projets informatiques.

Figure 1 : Logo de la société In4

2-L’entreprise in4 :
IN4 est une société fondée en 2019, qui accompagne ses clients dans la transformation
digitale de leur entreprise. Animé par la passion du numérique, de l’innovation et du
management de transition. L’équipe IN4 dont le chef est le président directeur général de la
société « M. Nabil LEMRAZI » est composé de profils confirmés et complémentaires dont la
mission est de transformer le défi de digitalisation en une réelle opportunité.

Installée à MEKNES au MAROC, IN4 offre aux entreprises, aussi bien marocaines
qu’étrangères, un service optimal dans le domaine de la

transformation digitale en mettant la collaboration, la Cocréation et l’adaptabilité au cœur de

son intervention.

1
La société IN4 est principalement active dans les domaines suivants :

1
 Chapitre II

Etudes de Projet

1
I-Etude de projet :
Le système consiste à mettre en place pour un client(directeur d’un école privée), une
plateforme sociale Learning pour le compte des étudiant de l’école qui souhaitent bénéficier
du cours accélérés.

1-Objectifs du projet
Dans un secteur où les contraintes de formation en présentiel sont importantes
(disponibilité, le frais de déplacement, etc.), le concept de la formation à distance offre des
réponses complémentaires et une plus grande flexibilité à l’apprenant qui pourra se former à
son rythme en fonction de ses disponibilités.

Notre objectif consiste à créer une plateforme du social Learning qui répond au besoin du
tuteur et des apprenants à la fois et de manière à :

✔ Favoriser une pédagogie socioconstructiviste (collaboration, activités, réflexion

critique, etc.),

✔ Garantir plus de souplesse pour la planification des formations à l’aide d’une interface
ergonomique, légère, efficace, compatible -sans nécessité d'un navigateur récent- et
simple à manipuler pour les différents utilisateurs,

✔ Faciliter l’accès aux ressources et services,

✔ Offrir aux apprenants un espace d’apprentissage individualisé,

✔ Faciliter le partage, la production, la communication et la collaboration à distance,

2-C'est quoi, une plate-forme d'apprentissage en ligne?

Une plateforme d'apprentissage en ligne, appelée encore LMS (Learning Management
System), est un site web qui héberge le contenu didactique et facilite la gestion de
l'apprentissage et la mise en œuvre de stratégies pédagogiques. On trouve aussi les
appellations de Centre de formation virtuel ou de Plate-forme e-learning (FOAD).

Une plateforme e-learning (ou LMS) est un produit dérivé des logiciels CMS (Content
Management System) mais présente des fonctions différentes pour la pédagogie et
l'apprentissage [3].

1
 3- E-learning
Le E-learning, ou formation en ligne est une technique de formation reposant sur la mise
à disposition de contenus pédagogiques via un support électronique : Cd-rom, Internet,
intranet, extranet, etc.

Le E-learning désigne les outils, les applications et l’ensemble des contenus mis à
disposition d’un stagiaire dans le but d’une formation pédagogique. Longtemps réduites à des
supports cd- rom, le E-learning a évolué et utilise dorénavant le web et différentes
applications. Contrairement à ce que l’on pourrait penser, la formation en ligne n’est pas
synonyme d’isolement. Cette solution permet aussi de nombreuses possibilités d’échange et
d’interactivité.
4-Etude des besoins fonctionnels
Les besoins fonctionnels représentent les attentes de chaque acteur de la future plate-
forme. Toute solution conceptuelle doit satisfaire, préalablement, à des besoins fonctionnels
afin de délimiter le périmètre fonctionnel de l‘application et surveiller la traçabilité des
besoins lors de la phase de développement.

La présente plateforme doit satisfaire les besoins fonctionnels suivants :

▪ La gestion des utilisateurs,

▪ La gestion des cours,

▪ La gestion des Trophie,

▪ La gestion des Quizes,

▪ La gestion des badges,

▪ La gestion des points,

▪ La gestion des ressources,

▪ La gestion des sondages,

▪ La gestion des Adresse Mac,

1
 5-Etude des besoins non fonctionnels
Un besoin non fonctionnel est une restriction ou une contrainte qui pèse sur un service du
système, telle les contraintes liées à l’environnement et à l’implémentation et les exigences en
matière de performances.

Les besoins non fonctionnels :

▪ Le code doit être clair pour permettre des futures évolutions ou améliorations,

▪ La plateforme doit fournir un accès rapide aux informations, et doit faire la mise à jour

en temps réel,

▪ La plateforme doit être portable, extensible, réutilisable et fiable,

▪ La plateforme offre une interface conviviale et facile à utiliser,

▪ La plateforme doit garantir la confidentialité, l’intégrité et la cohérence des données.

5-1 : Les acteurs système

Un acteur représente l’abstraction d’un rôle joué par des entités externes (utilisateur,
dispositif matériel ou autre système) qui interagissent directement avec le système étudié.

Les acteurs interagissant avec notre système sont :

● Administrateur : anime des formations dans le salon de formation et

responsable de l’administration du site de téléformation.

● Client : assiste à une formation dans le salon de formation.

1
 Figure 2 : Organigramme du projet a réalisé :
Cette figure représente un schéma général du fonctionnement de platform

1
 Chapitre III

Conception du projet

1
I-Choix de langage de modélisation :
1-UML
UML est un langage de modélisation, très répandu et très utile pour la conception des
systèmes d'informations orientées objets.

C'est vrai que UML n'est pas choisi automatiquement pour la conception mais il est déjà plus
connu que merise et merise n'est pas orientée objet.

Pour les applications web, je pense que UML exprime mieux la vue statique et dynamique du
système d’information : il propose je presque 13 diagrammes qu'on peut exploiter pour
définir les fonctionnalités du système (use case) et les objets y intervenant (modèle de
domaine) ... Donc une application web nécessite vraiment une analyse très approfondie pour
pouvoir dégager les nécessités de développement ainsi que quelques scénarios d'exécution.

II- diagrammes UML :

1-Diagramme de classe

1
 Figure 3 : Diagramme de classe

🡺Ce diagramme représente les classes nécessaires pour assurer un bon

fonctionnement du système à mettre en œuvre.

1
● User : C’est la class la plus dominant de le fonctionnement du system, elle est dédié à
tous ce qui concerne les interactions de l’utilisateur Soit Administrateur ou Client.

● Spended_Time : Consiste à gérer le temps passer par le client dans la plateforme.

● Badges : Gere tous les badges existe dans la plateforme.

● AsignBadge : les badges obtenus par l’utilisateur.

● Quize : Toutes les quizes existe dans la plateforme, chaque quiz a plusieurs questions
qui ont des reponse a un ou multiple choix.

● Question : ce qui concerne toutes les questions relative a un Quiz, peut être un ou
multiple.

● Answer : contient le la réponse liée a chaque des Question.

● QuizTest : Le quiz passer par un utilisateur, contient aussi le temp passée par ce client
dans ce test.

● Macs : Cette class dédié pour gérer les Adresse mac des appareils d’un utilisateur.

● Cour : la classe gérer les cours de la formation, ils peuvent être des images, vidéo ou
un livre pdf.

● ViewedCour : les cours déjà vue par l’utilisateur, elle contient aussi le temps passé
dans le cour et la progression de l’utilisateur.

● Trophies : se sont des produits virtuels que l’utilisateur peut les acheter depuis
le « market ».

● Points : C’est juste comme le concept des badges.

2
2
 2-Diagramme de cas d’utilisation
Dans le but de mieux comprendre notre système et les interactions avec les utilisateurs,
dans cette partie nous allons détailler les scenarios de principaux cas d’utilisation

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

🡺 Cette figure représente le diagramme de cas d’utilisation globale qui est

compose de deux acteurs admin et utilisateur et de quatre cas de gestion pour

l’admin et quatre pour l’utilisateur et un qui est commun entre les deux C’est
L’Authentification. Je vais détailler les cas dans ce qui suit.

2
3-1 Utilisateur :

Nom du cas : Modifier le profile.

Chaque utilisateur a un profil avec ses propres informations telles que le nom, prénom,
adresse, avatar.. , dans ce cas l’utilisateur peut Modifier ses information.

Scénario explicatif :

✔ L’utilisateur s’authentifier

✔ Le système affiche le page d’accueil.

✔ L’utilisateur choisir « mes information ».

✔ Le système affiche toutes les informations relatives à l'utilisateur authentifié.

✔ L’utilisateur faire des modifications.

✔ L’utilisateur sauvegarder les modifications.

Nom du cas : Gérer les adresse mac.

Pour empêcher le partage d’un seul compte entre plusieurs utilisateurs, on a limité les
appareils peuvent s’authentifié depuis le même compte par les adresses mac de ses appareils

Scénario explicatif :

✔ L’utilisateur s’authentifier

✔ Le système affiche le page d’accueil.

✔ L’utilisateur choisir accéder la page « Gérer mes adresse mac » via le « dropDown »

En haut.

2
 ✔ Le system affiche un tableau les adresse mac, les navigateurs et le system d’exploitation

Liée à l’utilisateur authentifie,

✔ L’utilisateur demande de l’envoie d’un mail de vérification avant qu’il puisse modifier

ses Adresse mac.

✔ Le system envoi un code de vérification vers l’email de l’utilisateur.

✔ L’utilisateur confirme le code et commence à faire ses modifications.

✔ L’utilisateur sauvegarder les modifications.

Nom du cas : Acheter des trophées.

Les trophées ce sont des cartes virtuelles vendu dans le marché du plateforme,
l’utilisateur peut les Acheter par une devise de la plateforme appelé « token », ses trophées
donne a l’utilisateur des Avantage dans son parcours de formation.

Scénario explicatif :

✔ L’utilisateur s’authentifier

✔ Le système affiche le page d’accueil.

✔ L’utilisateur choisir la page « Marché ».

✔ Le system affiche toutes les Trophées existe dans le marché avec leur prix et leurs

options

✔ L’utilisateur choisi le trophée qui il veut acheter

✔ S’il a le nombre de tokens suffisant il va poursuivre son achat.

2
 ✔ Le system déduire le nombre des tokens depuis le solde de l’utilisateur.

✔ Si l'utilisateur n'a pas un solde suffisant alors il doit convertir les points en tokens.

✔ Si l’utilisateur n’a pas les points suffisants donc l'achat ne peut pas être effectué.

Nom du cas : Participer au Cours.

Les Cours sont la formation offerte par le platform, ils sont sous forme des livre PDF ou
des vidéo explicatif ou bien des photos, un coure a un titre, un niveau, un nombre de point ou
de badge a obtenir par l’utilisateur lors qu’il le termine

Scénario explicatif :

✔ L’utilisateur s’authentifier

✔ Le système affiche le page d’accueil.

✔ L’utilisateur choisir la page « Dashboard ».

✔ Le system affiche la page Dashboard qui contient le niveau de l’utilisateur, le cour

suivante. et des statistiques relatifs a l’utilisateur tel que nombre de point, tokens.

✔ L’utilisateur accèdes vers la cour suivante.*

✔ S’il a terminé le cours le system va le donner les point et les badge de ce cour et afficher

le cour suivant, sinon le system doit enregistrer le progresse de l’utilisateur dans ce cours
La prochaine connexion de l’utilisateur.

Nom du cas : Passer Des Quiz.

Apres chaque cours l’utilisateur doit passer un Quiz pour qu’il puisse passer vers le
niveau

Suivant, il aura un nombre de point et badges comme une récompense.

Scénario explicatif :

2
 ✔ L’utilisateur Termine un cour.

✔ Le système affiche le page du quiz.

✔ L’utilisateur passe le quiz.

✔ S’il a terminé le quiz le system va le donner les point et les badges de ce quiz et le faite

monter vers le niveau suivant.

3-2 Administrateur :

Nom du cas : Gestion des Quiz.

Le quiz est un test que l’utilisateur doit passer après chaque cour il a terminé,

Chaque quiz se compose de plusieurs questions d’un seul choix ou de choix multiple.

Scénario explicatif :

✔ L’admin s’authentifier

✔ Le système affiche le centre de gestion.

✔ L’admin choisi de gérer les Quiz.

✔ Le system affiche la liste des Quiz avec la possibilité de des changement.

✔ L’admin faire les modification (suppression, modification, ajoute).

✔ L’admin sauvegarder les modifications.

Nom du cas : Gestion des Badges.

Le Badge est une récompense revoit par l’utilisateur lors il passe un Quiz ou bien lors
qu’il termine un cour.
Scénario explicatif :

✔ L’admin s’authentifier

2
 ✔ Le système affiche le centre de gestion.

✔ L’admin choisi de gérer les Badges.

✔ Le system affiche la liste des Badges avec la possibilité de des changement.

✔ L’admin faire les modification (suppression, modification, ajoute).

✔ L’admin sauvegarder les modifications.

Nom du cas : Gestion des Trophées.

Les trophées ce sont des cartes virtuelles vendu dans le marche du plateforme,
l’utilisateur peut les Acheter par un devise spécial du platform appelé « token » :

Scénario explicatif :

✔ L’admin s’authentifier

✔ Le système affiche le centre de gestion.

✔ L’admin choisi de gérer les Trophées.

✔ Le system affiche la liste des Trophées avec la possibilité de des changement.

✔ L’admin faire les modification (suppression, modification, ajoute).

✔ L’admin sauvegarder les modifications.

Nom du cas : Gestion des Cours.

Les Cours sont la formation offerte par le platform, ils sont sous forme des livre PDF ou
des vidéo explicatif ou bien des photos, un coure a un titre, un niveau, un nombre de point ou
de badge a obtenir par l’utilisateur lors qu’il le termine.

Scénario explicatif :

2
 ✔ L’admin s’authentifier

✔ Le système affiche le centre de gestion.

✔ L’admin choisi de gérer les Cours.

✔ Le system affiche la liste des Cours avec la possibilité de des changement.

✔ L’admin faire les modification (suppression, modification, ajoute).

✔ L’admin sauvegarder les modifications.

3-Diagramme de séquence :

2
 Figure 5 : Diagramme de séquence "Passer un quiz" :

🡺 Ce diagramme illustre le processus de passer un quiz par l’utilisateur avec ses

diffèrent interactions entre l’utilisateur et le system.

2
 Figure 6 : Diagramme de séquence "Participer a un cour " :

🡺 Ce diagramme Montre comment se déroule les différent processus de passer un quiz

par l’utilisateur avec ses diffèrent interactions entre l’utilisateur et le system.

3
 Figure 7 : Diagramme de séquence "Ajouter Un Cour ".

🡺 Ce diagramme illustre le processus d’ajouter un cour par l’administrateur et les

différant interaction entre l’admin et le system pour assurer le bon fonctionnement.

3
 Figure 8 : Diagramme de séquence "Gestion des adresses mac".

🡺 Ce diagramme illustre le processus de la gestion des adresse mac de l’utilisateur les

différant interaction avec et le system pour assurer le bon fonctionnement.

3
4- Diagramme d’activités :

3
 Figure 9 : Diagramme d’activité "Gestion des badges".

🡺 Ce diagramme illustre le processus de la gestion des badges par l’administrateur et le

scénario du fonctionnement.

Scenario normal

1. L’administrateur S’authentifier.
2. Le système Vérifie les informations entrées.
3. Le system ouvre le profil d’administrateur.
4. L’administrateur choisi le mode de modification.
5. L’administration entre les nouvelles informations pour l’ajoute et la modification du badge.
6. L’administrateur Valide les modifications
7. Le système Vérifie les informations entrées.

Scenario exceptionnel

1. Si les informations d’authentification ne sont pas valides, le system va rediriger

l’utilisateur vers la page d’authentification avec un message d’erreur.
2. Si les informations entrées du badge ne sont pas valides, le system va demander a l’admin
de ressaisir ses information.

3
 Chapitre III

Les Technologies utilisée

3
I-Les Framework
1-Qu’est-ce qu’un Framework?
Un framework désigne un ensemble de composants logiciels formant le squelette d’un
programme, conçu pour aider les développeurs informatiques dans leur travail de
programmation et leur offrir une base de travail réutilisable sur plusieurs projets.

Un framework s’apparente à un véritable espace de travail modulaire, réunissant les outils, les
ressources et les conventions ou normes nécessaires à la création d’applications web sur
mesure. Traduit litéralement, le mot anglais framework signie « cadre de travail ». Cette
traduction est plutôt heureuse pour comprendre le concept qui se cache derrière le terme. Un
framework de développement est donc :

● un ensemble cohérent de composants éprouvés et réutilisables

(bibliothèques, classes, helpers…).

● un ensemble de préconisations pour la conception et le développement d'applications.

Il existe un très grand nombre de frameworks et ce pour chaque technologie. Ils sont là
pour donner un cadre de travail au développeur. Grâce à ces outils, le développeur sera mieux
organisé, son code sera maintenable, évolutif et clair. En effet, deux développeurs utilisant le
même framework, n'auront donc aucun mal à se comprendre. Dans le monde du web il y’a
deux types de framework principale, ceux de la catégorie front-end, puis ceux de la catégorie
back-end.

3
1-1 :Front-End Framework :
Également appelés «frameworks CSS», il s'agit de packages contenant du code pré-écrit
et normalisé dans des fichiers et des dossiers. Ils vous donnent une base sur laquelle
construire tout en permettant une flexibilité dans la conception finale. En générale les
frameworks front-end contiennent les composants suivants:

● Une grille qui facilite l'organisation des éléments de conception de votre site Web

● Styles de police définis et taille variant en fonction de sa fonction (typographie

différente pour les titres par rapport aux paragraphes, etc.)

● Composants de site Web prédéfinis tels que les panneaux latéraux, les boutons et les
barres de navigation.

En fonction du cadre spécifique que vous choisissez, ils sont également beaucoup plus
capables de le faire. Voici quelques uns des frameworks front-end le plus connus :

✔ Bootstrap

✔ Semantic-UI

✔ Foundation

✔ Materialize

3
1-2: Back-End Framework (PHP) :
Un framework PHP est une plateforme de base qui nous permet de développer des
applications web. En d'autres termes, il fournit une structure. En utilisant un framework PHP,
vous gagnerez du temps, vous éviterez de produire du code répétitif et vous pourrez créer des
applications rapidement (RAD). Sans un framework PHP en place, il est beaucoup plus
difficile de créer des applications car vous devrez coder de manière répétée beaucoup de PHP.
Vous devrez également établir la connexion entre votre base de données et l’application que
vous développez à partir de rien. Pendant ce temps, utilisation d’un framework PHP vous
permet d’assurer plus facilement cette connexion. Voici quelques uns des frameworks front-
end le plus connus :

✔ Laravel

✔ CakePHP

✔ Symfony

✔ Zend Framework

3
 2-Pourquoi un Framework?

Utiliser un framework comporte de nombreux avantages :

Nous sommes cadrés ! Comme son nom l’indique, le framework nous permet d’être plus
disciplinés et de ne pas partir dans tous les sens

Gain de temps et d’efficacité : le framework apporte de nombreux outils qui permettent de

ne pas réinventer la roue pour toutes les fonctionnalités courantes

Meilleure structuration du code : le cadre et les directives fournies par les frameworks
permettent de donner une structure et par conséquent, d’améliorer la qualité du code. Ils
permettent de construire une unité cohérente.

Maintenance simplifiée : un projet bien structuré est infiniment plus simple à maintenir
qu’un projet fourre-tout.

3-Analyse de différents Framework :

3-1: Front-End

⮚ Bootstrap

compte parmi les plus populaires. Open Source, il présente un nombre important de
modules et d’extensions. La documentation disponible est tout aussi impressionnante. Il
fonctionne sur un système de grille en douze colonnes avec un affichage adapté pour
différentes tailles d’écran et il est possible de personnaliser les fichiers CSS.

⮚ Materialize

s’appuie sur les recommandations design de Google et est fourni avec de nombreux
composants prêts à l’emploi.

3
3-2 : Back-End

⮚ Symfony, le framework PHP avec la plus grande communauté

Symfony est incontestablement un des frameworks PHP les plus appréciés. Sa très
importante communauté rend les choses plus faciles en cas de difficulté et il est toujours
particulièrement agréable de ne pas se sentir seul face à son écran. La documentation est
également très fournie et accompagne les développeurs, qui se sentent généralement très à
l’aise en développement en Symfony. Symfony est particulièrement apprécié pour sa
modularité. Le framework offre de vastes possibilités de fonctions pour créer de nombreux
projets et applications à la fois stables et performantes. Le développement des API REST y
est très robuste et Symfony est donc un framework idéal pour les applications
professionnelles.

⮚ Laravel, un framework PHP de plus en plus populaire

Tout comme Symfony, Laravel est un framework très bien documenté. Là encore,
l’importante communauté permet de trouver rapidement réponse à ses questions en cas de
doute. Le framework Laravel offre à la fois la structure du modèle MVC et la rapidité de
développement que l’on attend d’un framework PHP. Laravel reprend le système de routage
Symfony et l’étend pour proposer un système d’envoi de mail, un moteur de template ultra-
efficace, un constructeur de formulaire particulièrement pratique, un créateur de requêtes
SQL, un ORM performant… et bien plus encore. Le principal avantage de Laravel est d’offrir
une structure claire au langage PHP. Complet et très puissant, il est parfois considéré comme
plus souple que Symfony.

4
 ⮚ CakePHP, le framework idéal pour débuter en PHP

Très facile à prendre en main, CakePHP est un framework idéal pour les développeurs
débutants ou non initiés au PHP. La configuration de Cake est à la fois simple et ordonnée.
Elle utilise la convention MVC et propose différents outils de sécurité et de validation de
formulaire. CakePHP intègre un ORM particulièrement fonctionnel. Les requêtes de
construction sont très simples, et le framework est livré avec des plugins robustes permettant
de réutiliser le code très facilement. Les héritages de classe sont très compréhensibles, et la
communauté suffisamment développée pour trouver facilement réponse à ses questions. Cela
est d’autant plus le cas que la documentation est à la fois fournie et très simple à comprendre.

⮚ Zend, pour une qualité de code irréprochable

Zend Framework est à la fois robuste et stable. Son package Open Source est très bien
documenté et bénéficie du soutien d’une large communauté de développeurs. Sa
documentation est également très complète. Zend permet à la fois de s’appuyer sur des
components MVC pour un code plus propre, d’avoir une architecture souple, et de développer
rapidement. Zend Framework est une solution particulièrement réputée pour la qualité de son
code. Son automatisation des mécanismes de protection des applications (filtrage de
validation d’entrée, Injection SQL, protection XSS) en fait un langage privilégié pour les gros
projets d’entreprise.

4
 II-Choix du Framework et explication de ce
choix
1-Front-End

Figure 9 : Logo du framework bootstrap.

Twitter Bootstrap est un framework CSS très puissant, permettant de développer et

concevoir des frontends/backends très rapidement sans avoir à passer par de l’intégration.

Comme les autres frameworks CSS que l’on peut trouver sur internet, il dispose d’une Grid
qui permet de placer les éléments avec beaucoup plus de facilité.

Mais Bootstrap se démarque des autres frameworks car il a l’avantage de :

● Etre “Responsive” (s’adapte à la taille de l’écran, que se soit tablette,

ordinateur, smartphone, etc.)

● Fonctionner sur tous les navigateurs.

● Posséder deux types de layout : le premier qui est fixe (la scrollbar

s’affichera si nécessaire), le second qui s’adapte à la largeur du

navigateur.

● Embarquer un tas de composants prêts à l’usage (labels, badges, boutons,

boutons dropdown, icônes, menus, navbar, progressbar, etc.) qui sont,

qui plus est, plutôt soignés.

4
 ● Posséder également une dizaine de composants JavaScript comme des
modals, tooltip, alert, carousel, etc. permettant de donner un peu
d’interaction à votre future interface.

● D’être développé en LESS.

En bref, c’est un framework très complet, et surtout agrémenté d’une très forte
communauté car il est le projet le plus “forké” et le plus suivi sur Github pour tous ces raison
il a été choisi.

2-Back-End

Figure 10 : Logo du framework Laravel.

Laravel a été choisi pour plusieurs raisons. Tout d’abord, il répondait aux critères de la
société, à savoir la mise en place de toutes les fonctionnalités désirées. Ensuite, bien
documenté qui permet de faire gagner du temps face à ces concurrents. Il possède une
communauté importante, ce qui nous donne la possibilité de trouver rapidement une réponse
en cas de doute. Laravel est un framework s’inspirant de ce qui existe de mieux, il reprends le
système de routage de Symfony en l’étendant de manière efficace, il utilise la bibliothèque
SwiftMailer pour l’envoi de mail, et bien d’autre encore. Tout en ajoutant ces propres
composants originaux pour former au final Laravel.

4
 Laravel nous offre :

 un système d’envoi de mail.

 un système de routage performant,

 un moteur de template efficace,

 un constructeur de formulaire très pratique,

 un système d’authentification pour les connexions,

 un créateur de requêtes SQL et un ORM performants (éloquent).

3-Organisation du projet et division des tache :

Figure 11 : Logo du Git.

Git est un système de contrôle de version distribué gratuit et open source conçu pour tout
gérer, des petits aux très grands projets, avec rapidité et efficacité.

Git est facile à apprendre et a une faible empreinte avec des performances ultra-rapides. Il

4
surclasse les outils SCM tels que Subversion, CVS, Perforce et ClearCase avec des
fonctionnalités telles que des branchements locaux bon marché, des zones de transit pratiques
et des flux de travail multiples.

4
 Chapitre IV

Avancement des travaux du

projet

4
 1-installation de laravel :

L’installation de Laravel a tout d’abord été faite sur un serveur local par le logiciel
composer qui est un logiciel gestionnaire de dépendances libre écrit en PHP. Il permet à ses
utilisateurs de déclarer et d'installer les bibliothèques dont le projet principal a besoin. Avant
d’installer Laravel et de le paramétrer, il a fallu mettre en place un serveur Web et créer une
base de données. Pour cela, Xampp a été téléchargé et installé. Le serveur utilisé est Apache
et concernant la base de donnée, il s’agit de MySQL.
2- cloner le projet déjà Crée :

Tout d'abord, pour Intégrer dans l'équipe de développement contribuer a des tache dans
le projet il faut le télécharger ou le cloner par un command dans la ligne de commande CMD
ou GIT BASH

Dans notre cas :

Figure 12 : commande clone.

4
Figure 13 : l’arborisant du projet.

4
 Apreé cloner le projet il faut crée un base de donnée et modifier le fichier .env pour que
le projet puisse accéder à la base de données :

o Nom du serveur de base de données : localhost

o Le port de la base de données : 3306

o Nom de la base de données : oze_kids

o Nom de l’utilisateur de la base de données : root

o Mot de passe de la base de données : rien

Figure 14 : Le fichier de configuration “.env”.

4
 3- L'avancement du projet
Jusque’ ce moment-là nous avons pas terminer le projet parce que on a toujours des
modification , ajouter des fonctionnalités, changer le Template ..etc.

je vais vous montrer la version la plus récente du site :

Figure 15 : la page d’authentification.

🡺 C’est La première page qui apparaît à l'utilisateur, comme j’ai déjà dit l’utilisateur

peut être utilisateur simple ou administrateur , cette page va verifier les information de
l’utilisateur et le rediriger vers La page appropriée pour chaque type d’utilisateur

5
 Une fois l'utilisateur authentifié, le système le redirigera vers le centre de gestion de
l'administrateur ou le profil client :

1-Simple Utilisateur :

Figure 16 : le profile de l’utilisateur.

Cette page contient :

✔ Navbar : Barre Fixée en haut de la page contient le nom d’utilisateur et son avatar, les

notifications barre de recherche et full-screen option

✔ Your Point : nombre de points de l’utilisateur.

✔ My level : le niveau de l’utilisateur.

✔ Customize me : changer l’avatar comme vous le verrez après.

✔ Mes informatons : Ou l’utilisateur peut modifier ses informations personnelles.

5
 ✔ Your progress : Progression de l'utilisateur dans toutes les formations.

✔ Your tokens : nombre de tokens de l’utilisateur.

✔ Trophies : le trophie en cours d’utilisation.

✔ Achievement : les badges obtenu(colorée) et non obtenu par l’utilisateur(noir et

blanc).

Si l’utilisateur Cliquer pour modifier sa photo d’avatar il ‘aura cette page de génération
d’avatar.

Figure 17 : pop-up de génération d’avatar.

🡺 Ce générateur des avatars est un API qui prend en paramètre les valeur des « inputs »

de type « select » et retourne une image svg, le bouton du dé en bas à gauche permet de
choisir un avatar aléatoirement.

5
 Figure 18 :générer un avatar aléatoirement.

🡺 Pour éviter qu'un compte soit partagé entre plusieurs utilisateurs, nous avons adopté

une solution utilisant les adresses mac, on a limiter le nombre des adresse mac a cinq, Donc si
l'utilisateur dépasse ce nombre on l'empêche de se connecter depuis un autre appareil comme
vous voyez ci-dessous

5
Apres une section dans laquelle j'ai exprimé les ativitées principales du société, une

Figure 19 : L’erreur qui apparaitre si on a dépassé le nombre maximal des adresse mac .

🡺 La solution ici c’est de se connecter depuis un appareil déjà enregistrer et

gérer les adresse mac (activer/désactiver) depuis la table suivante :

5
 Figure 20 : table de gestion des adresse mac

🡺 Pour des raisons de sécurité, l’utilisateur n’a pas le droit de modifier les

« checkboxes » du states de l’adresse mac, Cette Action a une procédure spéciale à suivre :
1. Cliquer sur activer les changements pour obtenir un code de vérification par email.

2. Entrer le code de vérification, si il est valide le system vas donner la main l’utilisateur de
modifié le statue des adresses mac.

5
Figure 21 : le code de vérification par mail.

Figure 22 : Si le code est valide.

5
 Figure 23 : la page dashboard.

🡺 En suite on a la page dashborad ou l’utilisateur peut participer a des cours, elle contient

✔ Xp Progress : un graphe présente les points obtenus par mois.

✔ Les image: sont les cours existe dans la formation.

✔ Le cercle autour des Images: Progression de l'utilisateur dans toutes le cour lié à

chaque image.

✔ Growth: Graphique montrant le pourcentage des formation terminées.

On n’a pas encore fini cette partie Au niveau Back-End.

5
 Figure 24 : la page dashboard en bas.

2-Administrateur :

5
 Figure 25 : la page de Gestion des Cours.

La gestion Des Cours, Badges, Quizz, Trophées et des notifications presque la même, on
a un DataTable avec tous les champs de notre objet (cour, badge, quiz, trophée ou bien
notification), le DataTable est remplie dynamiquement depuis la base de donnée,

Chaque ligne du DataTable contient deux boutons pour la suppression et pour la modification
Comme vous le verrez en détail en suite,

Chaque colonne dans le DataTable a deux flèches pour trier la table selon les valeurs de ce
champ.

La DataTable a une barre de recherche pour chercher dans la table

La page contient Aussi un bouton pour l’ajoute on va le simuler pour les trophées ci-dessous.

Le DataTable : une bibliothèque de javascript Il s'agit d’une table qui a plus de

fonctionnalités tel que le tri, la recherche, la responsivité et la pagination. etc.

5
 Figure 26 : la suppression d’un badge.

Si on clique sur Supprimé le system vas actualiser la page avec un message de succès

Figure 27 : l’ajoute d’un quiz.

Si on clique sur ajouter dans la page des quizz on aura ce formulaire à remplir, il contient
tous les champs d’un quiz,

6
-titre du quiz.

-les points et les badges liée à ce quiz.

-Global : est ce que ce quiz et contribuer dans le résultat général du niveau actuel de
l’utilisateur

-Ce quiz appartient à quel cours.

-Le sous-formulaire pour les questions liée à ce Quiz (Ajouter Contenu pour ajouter une autre
question)

Figure 28 : la modification un badge.

La modification d’un badge nous ramenée vers le même formulaire de l’ajoute, mais les
champs sont déjà remplis par les anciennes valeurs.

6
I-Mes tache dans Le projet:
1-AdminCheck :
C’est une couche de sécurité consiste à empêcher les non-administrateur d’accédé vers le
centre de gestion de l’admin :

Figure 29 : code source du midlleware AdminCheck .

Ce middleware var rediriger l’utilisateur var son page actuel s’il a tenté d'accéder vers le
centre de gestion de l’admin.
2-MacCheck :
C'est la partie des adresses mac décrite ci-dessus.

6
 Figure 30 : code source du midlleware MacCheck .

Ce middleware s'exécutent lors de la connexion, il compte les adresses mac active distincte de
l’utilisateur en traine d’authentifier, Si le nombre est dépasser 5 le middleware va empêcher
l’utilisateur de s’authentifier avec un message d’erreur comme indiquée dans la figue **.
3-CRUDs :
CRUD s’est les quatre fonctionnalités principales dans la gestion d’un objet :

C : CREATE

R : READ

U : UPDATE

D : DELETE

Au cours de ce stage j’ai implémenté plusieurs CRUD tel que : la gestion des Trophée, la
gestion des Badges comme indiquer dans la partie Administrateur en dessu.

6
Pour implémenter un CRUD il faut d’abord crée le model et le table de migration depuis cette
command

php artisan make:model Trophie -m

Cette commande va créer un model (classe) Trophée, et la « -m » var générer un fichier de

migration pour le model.

Figure 31 : code source du model Trophie.

Figure 32 : code source du fichier de migration trophies.

6
 Il faut ajouter les champs au table trophies et exécuter la commande

php artisan migrate

Après l’exécution de cette commande on aura la table dans notre serveur :

Figure 33 : la table générée dans le serveur.

Puis il faut crée le Controlleur qui va gérer les interactions avec le serveur et implémenter les
méthodes nécessaires

Php artisan make:controller TrophieController

6
Figure 34 : code source du Controlleur TrophieController .

6
Chapitre V

Bilans

6
Conclusion générale

Ce stage m’a apporté une nouvelle expérience professionnelle enrichissante. Grâce à ces
deux mois passés au sein de la société IN4, j’ai acquis de nouvelles connaissances autant sur
le milieu de l’entreprise que sur les langages informatiques.

Travaillé avec des frameworks tel que Laravel et Bootstrap a été bénéfique puisque j’ai pu
développer mes connaissances des langages PhP, HTML, CSS et javascript ainsi que celles
des langages-objet. J’ai bien entendu rencontrer quelques problèmes lors de la conception du
site tels que les erreurs générées par le php ou par des problèmes de compatibilités. Ces
problèmes ont tous été résolus à l’aide de mes encadrant iliass et houssam et m’ont également
apporté de nouveaux savoirs.

Au cours de Ces deux mois j’ai pu maitriser l'utilisation des frameworks front-end et back-
end, Et d’autres outils que je ne connaissais que de nom et que j’ai appris à les utilisées lors
de ce stage. j’ai eu aussi la chance d’assister et travailler dans une équipe de développement

6
Bibliographie

J’étais basé sur la documentation du sites officiels des frameworks utilisées «

Laravel, Botstrap ». Mais il existe plusieur sources d’informations dont voici les principales
:

www.laravel.com : le site officiel de Laravel avec un forum actif.

www.laracasts.com : le forume officiel de Laravel.

www.laravel.io : le forum officiel.

www.laracasts.com : De nombreux tutoriels vidéo en anglais dont un certain nombre en

accées gratuit dont une série complète pour Laravel 8.

www.getbootstrap.com : le site officiel de Bootstrap.

www.codepen.io : ce site m'a aidé au niveau du design de site Web.

www.stackoverflow.com/documentation/laravel/topics : Le site des questions il y a

plusieurs solutions sur les problèmes du Laravel.