Royaume du Maroc

Université Sultan Moulay Slimane

Ecole Supérieure de Technologie – Béni Mellal
Département Informatique et Techniques de Gestion

Spécialité : DUT en Génie Informatique

(GI)

Rapport De PFE
Thème :

Application Web : un site web de cours en ligne gratuit

Effectué par : Encadrée par :

Moussaid Hicham Pr Abderrahmane Elbaalaoui

Zidane Sabir

Présenté et soutenu le 01 June 2023, devant le Jury composé de :

Pr. ………………… Président

Pr. ………………… Examinateur

Pr A. ELBAALAOUI Encadrant

Année universitaire : 2021-2022

1
 Résumé :
Le présent rapport porte sur la conception et le développement d'un site web

de cours en ligne gratuit pour faciliter l'apprentissage. L'objectif principal de ce

projet était de fournir une plateforme accessible à tous, permettant de

dispenser des cours dans différentes disciplines, allant de l'informatique à la

gestion de projet. Nous avons conçu ce site web en utilisant les dernières

technologies de développement web, tout en gardant à l'esprit la simplicité et

l'accessibilité pour les utilisateurs.

2
 Remerciement :
Nous tenons à exprimer notre profonde gratitude à notre encadrant, [Nom de

l'encadrant], pour son soutien et son accompagnement tout au long de la

réalisation de ce projet de fin d'études. Ses conseils avisés, sa disponibilité et

son professionnalisme ont été d'une aide précieuse.

Nous souhaitons également remercier l'ensemble des enseignants de l'Ecole

Supérieure de Technologie de Beni Mellal pour leur contribution à notre

formation. Leurs enseignements ont été d'une grande richesse et nous ont

permis d'acquérir les compétences nécessaires pour réaliser ce projet.

Nous tenons enfin à exprimer notre reconnaissance envers toutes les

personnes ayant participé de près ou de loin à la réalisation de ce projet. Leur

soutien, leur encouragement et leur engagement ont été déterminants pour la

réussite de ce travail.

3
 Dédicaces :
À nos parents,

Pour leur amour, leur soutien et leur patience tout au long de notre parcours

universitaire, nous dédions ce travail.

À nos professeurs,

Pour leur enseignement, leur expertise et leur accompagnement dans notre

formation, nous exprimons notre profonde reconnaissance et nos

remerciements.

À nos amis,

Pour leur amitié, leur soutien moral et leur présence à nos côtés tout au long

de ces années d'études, nous leur sommes reconnaissants.

4
 Introduction :
L'apprentissage en ligne est devenu un moyen de plus en plus populaire pour

les étudiants et les professionnels d'accéder à une variété de cours et de

formations. Cependant, malgré cette popularité, de nombreux sites web de

cours en ligne sont payants et inaccessibles pour une grande partie de la

population. C'est dans ce contexte que nous avons décidé de concevoir et de

développer un site web de cours en ligne gratuit, afin de faciliter

l'apprentissage pour tous.

Notre objectif était de créer une plateforme simple, accessible et conviviale

pour les utilisateurs, tout en offrant des cours de haute qualité dans différentes

disciplines. Nous avons utilisé les dernières technologies de développement

web pour garantir une expérience utilisateur optimale et une accessibilité

accrue. Notre travail a été encadré par Pr Abderrahmane ELBAALAOUI,

professeur à l'Ecole Supérieure de Technologie de Beni Mellal.

Dans ce rapport, nous présenterons en détail le processus de conception et

de développement de notre site web de cours en ligne gratuit. Nous

aborderons les différents choix techniques que nous avons faits, ainsi que les

défis que nous avons rencontrés tout au long du développement. Nous

conclurons ce rapport par une évaluation de notre travail, ainsi que par des

perspectives d'avenir pour notre site web.

5
 Table de matières :

Résumé :...............................................................................................................................................2
Remerciement :...................................................................................................................................3
Dédicaces :...........................................................................................................................................4
Introduction :......................................................................................................................................5
Table de matières :..............................................................................................................................6
Chapitre 1 : Etude préalable :................................................................................................7
1. Introduction :.......................................................................................................................7
a. Définition de l'étude préalable :.....................................................................................8
b. Objectifs de l'étude préalable :.......................................................................................8
2. Etude de l’existant :.............................................................................................................8
a. Analyse de la concurrence :............................................................................................9
b. Analyse des besoins des utilisateurs :............................................................................9
c. Benchmarking :................................................................................................................9
3. Critique de l’existant :.......................................................................................................10
a. Limites de l'existant :.....................................................................................................10
b. Opportunités de différenciation :.................................................................................10
c. Problématique :..............................................................................................................11
4. Solution proposée :............................................................................................................11
5. Conclusion :........................................................................................................................12
Chapitre 2 : conception :........................................................................................................12
1. Introduction :.....................................................................................................................12
2. Méthodologies de développement :.................................................................................13
3. Le langage UML :..............................................................................................................15
4. Diagramme de classes :....................................................................................................15
5. Les diagrammes de cas d’utilisations :..........................................................................17
6. Les diagrammes de séquences :......................................................................................17
7. Conclusion :........................................................................................................................19
Chapitre 3 : réalisation :.......................................................................................................20
1. Introduction :.....................................................................................................................20
2. Les outils utilisés :.............................................................................................................20
a. Langages de programmation :......................................................................................20
b. Framework de développement :...................................................................................22

6
 c. Outils de développement :............................................................................................22
d. Base de données :...........................................................................................................23
3. Les interfaces graphiques :..............................................................................................23
4. Conclusion :........................................................................................................................23

7
 Chapitre 1 : Etude préalable :

1. Introduction :

Dans ce premier chapitre, nous allons aborder l'étape de l'étude préalable

dans la réalisation de notre projet de fin d'études. Cette étape consiste à

effectuer une analyse approfondie des besoins, des objectifs et des

contraintes du projet, afin de déterminer la faisabilité de celui-ci. Elle permet

également de définir les différentes étapes du projet et de planifier les

ressources nécessaires pour sa mise en œuvre.

a. Définition de l'étude préalable :

L'étude préalable est une étape cruciale dans la réalisation d'un projet, qu'il

s'agisse d'un projet professionnel, d'un projet personnel ou d'un projet de

recherche. Elle consiste à analyser en détail les différentes composantes du

projet, à évaluer les risques potentiels, à déterminer les besoins et les attentes

des parties prenantes et à planifier les différentes étapes du projet.

b. Objectifs de l'étude préalable :

Les objectifs de l'étude préalable sont multiples. Elle permet de :

 Analyser les besoins et les attentes des parties prenantes du projet

 Identifier les risques potentiels liés au projet

 Déterminer les ressources nécessaires pour la réalisation du projet

 Planifier les différentes étapes du projet

 Estimer le budget nécessaire pour la réalisation du projet

 Évaluer la faisabilité du projet dans son ensemble

8
 2. Etude de l’existant :

Dans cette partie, nous allons effectuer une étude de l'existant pour notre site

web de cours en ligne gratuit. Cette étape est importante pour comprendre le

marché actuel, les offres concurrentes et les attentes des utilisateurs.

a. Analyse de la concurrence :

Dans cette section, nous allons étudier les sites web de cours en ligne gratuits

existants, afin d'identifier leurs forces et leurs faiblesses. Nous allons examiner

leur contenu, leur structure, leur interface utilisateur, leurs fonctionnalités et

leur modèle économique. Nous allons également analyser les avis et les

commentaires des utilisateurs pour comprendre leurs attentes et leurs

préférences.

b. Analyse des besoins des utilisateurs :

Dans cette partie, nous allons mener des enquêtes et des sondages auprès

des utilisateurs potentiels de notre site web de cours en ligne gratuit, afin de

comprendre leurs besoins et leurs attentes. Nous allons également analyser

les statistiques de trafic des sites web de cours en ligne gratuits existants pour

comprendre les préférences des utilisateurs en termes de contenu, de format

et de fréquence de publication.

9
 c. Benchmarking :

Dans cette section, nous allons réaliser une analyse comparative des sites

web de cours en ligne gratuits existants pour comprendre les tendances du

marché, les bonnes pratiques et les opportunités de différenciation. Nous

allons également étudier les modèles économiques des sites web de cours en

ligne gratuits existants pour déterminer les sources de revenus possibles pour

notre site web.

3. Critique de l’existant :

Dans ce chapitre, nous allons formuler une problématique basée sur notre

étude de l'existant, afin de comprendre les limites et les opportunités de notre

site web de cours en ligne gratuit.

a. Limites de l'existant :

En analysant les sites web de cours en ligne gratuits existants, nous avons

identifié certaines limites qui pourraient constituer une problématique pour

notre site web, telles que :

 La qualité du contenu proposé qui peut être inégale ou obsolète

 La difficulté de trouver facilement des cours pertinents en fonction de

ses besoins et de son niveau

 Le manque d'interaction et de personnalisation des cours proposés

 La publicité intrusive et l'utilisation des données personnelles des

utilisateurs

10
 b. Opportunités de différenciation :

En parallèle, nous avons également identifié des opportunités de

différenciation pour notre site web, en fonction des besoins et des attentes des

utilisateurs, telles que :

 Proposer une variété de types de cours adaptés à différents niveaux et

différents besoins.

 Fournir un contenu de haute qualité, régulièrement mis à jour.

 Offrir une expérience utilisateur intuitive et personnalisée, avec une

recherche facile et une recommandation de cours basée sur les intérêts

et le niveau de l'utilisateur.

 Proposer un modèle économique viable qui ne dépend pas uniquement

de la publicité et qui protège les données personnelles des utilisateurs.

c. Problématique :

En combinant les limites et les opportunités de différenciation de l'existant,

nous pouvons formuler une problématique pour notre site web de cours en
ligne gratuit :

Comment créer un site web de cours en ligne gratuit qui propose une
variété de types de cours de haute qualité, tout en offrant une expérience
utilisateur personnalisée et interactive, avec un modèle économique viable
et4.
respectueux de la vie privée des utilisateurs ?
Solution proposée :

Notre proposition de valeur pour notre site web de cours en ligne gratuit sera

de fournir une plateforme en ligne accessible à tous, proposant une grande

variété de cours de haute qualité, adaptés à différents niveaux et différents

11
besoins. Nous proposerons une expérience utilisateur personnalisée et

interactive, avec une recherche facile et une recommandation de cours basée

sur les intérêts et le niveau de l'utilisateur.

5. Conclusion :

En conclusion de cette première partie, nous avons mené une étude préalable

approfondie pour notre projet de site web de cours en ligne gratuit. Nous

avons analysé l'existant en identifiant les forces et les faiblesses des sites web

concurrents. Nous avons également formulé une problématique qui a permis

de déterminer les axes de développement prioritaires pour notre site web.

Grâce à cette étude préalable, nous avons acquis une compréhension plus

approfondie du marché des cours en ligne gratuits et de ses acteurs clés.

Nous avons identifié les limites et les opportunités de différenciation pour notre

projet, ainsi que les défis à relever pour répondre aux attentes et aux besoins

des utilisateurs. En somme, cette étude préalable a constitué une base solide

pour la suite de notre projet et nous a permis de mieux cibler les actions à

entreprendre dans les prochaines phases.

12
 Chapitre 2 : conception :

1. Introduction :

Dans ce chapitre, nous allons présenter les méthodologies de développement

et les outils de modélisation utilisés en conception pour notre projet de site

web de cours en ligne. Nous aborderons en particulier le langage UML et ses

différents types de diagrammes, tels que les diagrammes de classes, de cas

d'utilisation et de séquences. Nous verrons comment ces outils peuvent être

utilisés pour décrire l'architecture et les fonctionnalités du site, ainsi que les

interactions entre les différentes parties du système.

2. Méthodologies de développement :

La conception d'un site web de cours en ligne requiert une méthodologie de

développement rigoureuse pour assurer le succès du projet. Nous allons

présenter brièvement quelques-unes des méthodologies de développement

les plus courantes :

Méthodologie en cascade : cette méthode consiste à suivre un processus

linéaire où chaque étape est réalisée avant de passer à la suivante. Les

différentes étapes sont : la planification, l'analyse, la conception, la

programmation, les tests et la mise en production. Cette méthode est souvent

utilisée pour les projets de grande envergure avec des spécifications claires et

stables.

Méthodologie agile : cette méthode se concentre sur la collaboration entre les

membres de l'équipe et la livraison de fonctionnalités rapidement et

13
régulièrement. Les étapes sont itératives et l'équipe s'adapte en permanence

aux changements. Cette méthode est souvent utilisée pour les projets de taille

moyenne à grande avec des spécifications évolutives.

Méthodologie Scrum : cette méthode agile est basée sur des cycles de

développement courts appelés "sprints" qui durent généralement de 2 à 4

semaines. Chaque sprint se concentre sur la réalisation d'un ensemble de

fonctionnalités prioritaires. Les équipes Scrum sont autoorganisées et se

réunissent régulièrement pour évaluer les progrès et planifier le prochain

sprint.

Méthodologie DevOps : cette méthode combine les pratiques de

développement logiciel et les opérations pour accélérer le déploiement des

applications. Elle met l'accent sur l'automatisation des tests, de la construction

et du déploiement, ainsi que sur la collaboration entre les équipes de

développement et d'exploitation.

Pour notre projet de site web de cours en ligne, nous avons choisi la méthode

agile car elle nous permet de nous adapter rapidement aux changements et

de livrer des fonctionnalités utiles rapidement. Nous avons également opté

pour la méthode Scrum pour organiser notre travail en sprints et favoriser la

collaboration au sein de l'équipe.

14
 3. Le langage UML :

Le langage de modélisation unifié (UML) est un langage graphique de

modélisation utilisé pour représenter visuellement les différents aspects d'un

système logiciel. Il a été développé par un consortium de plusieurs entreprises

de l'industrie du logiciel dans les années 1990, et est devenu un standard de

facto dans le domaine de l'ingénierie logicielle.

Dans notre projet de site web de cours en ligne, nous allons utiliser UML pour

décrire la structure et le comportement de notre système logiciel. Nous allons

principalement nous concentrer sur les diagrammes de classes et les

diagrammes de cas d'utilisation pour modéliser notre système. Dans la section

suivante, nous allons décrire plus en détail ces diagrammes et leur utilisation

dans la conception de notre système.

4. Diagramme de classes :

Le diagramme de classes est un des diagrammes UML les plus couramment

utilisés pour modéliser la structure d'un système logiciel. Il permet de

représenter les différentes classes du système, leurs attributs et leurs

relations.

Dans un diagramme de classes, chaque classe est représentée par un

rectangle qui contient le nom de la classe. Les attributs de la classe sont

représentés sous forme de noms suivis de leur type de données, tandis que

15
les méthodes de la classe sont représentées sous forme de noms suivis de

leurs paramètres et types de retour.

Les relations entre les classes peuvent être représentées de différentes

manières, telles que l'association, l'agrégation, la composition, l'héritage, etc.

Par exemple, une association entre deux classes peut être représentée par

une ligne entre les deux classes avec une flèche indiquant la direction de

l'association et un nom indiquant la nature de l'association.

Le diagramme de classes est un outil puissant pour modéliser la structure d'un

système logiciel et peut aider à identifier les classes et les relations

nécessaires pour implémenter le système. Il peut également servir de base

pour la génération automatique de code à partir du diagramme.

Dans notre projet de site web de cours en ligne, nous allons utiliser le

diagramme de classes pour modéliser les différentes classes nécessaires

pour notre système, telles que les classes pour les utilisateurs, les cours, les

chapitres, les leçons, etc. Nous allons également modéliser les relations entre

ces classes, telles que les associations entre les utilisateurs et les cours, les

agrégations entre les chapitres et les leçons, etc. Le diagramme de classes

nous aidera à comprendre la structure globale de notre système et à identifier

les classes et les relations nécessaires pour implémenter notre site web de

cours en ligne.

16
 5. Les diagrammes de cas d’utilisations :

Un diagramme de cas d'utilisation est un outil de modélisation en UML qui

permet de représenter les interactions entre les acteurs (utilisateurs) et le

système. Il décrit les différents cas d'utilisation du système, ainsi que les

acteurs impliqués dans ces cas d'utilisation et les relations entre eux. C'est un

outil utile pour comprendre les besoins et les exigences des utilisateurs et

pour définir les fonctionnalités du système à concevoir.

Le diagramme de cas d'utilisation est constitué de deux éléments principaux :

les acteurs et les cas d'utilisation. Les acteurs sont les utilisateurs ou les

systèmes externes qui interagissent avec le système. Les cas d'utilisation sont

les actions que les utilisateurs peuvent effectuer avec le système pour

atteindre un objectif spécifique. Les relations entre les acteurs et les cas

d'utilisation sont représentées par des flèches.

Le diagramme de cas d'utilisation est donc un outil de communication efficace

pour décrire les fonctionnalités du système à concevoir et pour aider à la

compréhension et à la validation des exigences du système.

17
 6. Les diagrammes de séquences :

Un diagramme de séquence est un type de diagramme de modélisation en

UML qui représente la façon dont les objets interagissent les uns avec les

autres dans un système en séquençant les messages échangés entre les

objets. Il est utile pour représenter les interactions dynamiques entre les objets

dans un scénario donné, en montrant les objets impliqués et les messages

échangés entre eux.

Le diagramme de séquence est composé de plusieurs éléments, notamment

les objets impliqués, les messages échangés entre eux et les activations. Les

objets sont représentés par des boîtes de texte et les messages échangés

sont représentés par des flèches qui relient les boîtes de texte. Les activations

sont représentées par des barres verticales qui montrent la période d'activité

d'un objet.

Le diagramme de séquence est un outil de modélisation très utile pour

comprendre les interactions dynamiques entre les objets et pour concevoir des

systèmes complexes. Il permet de visualiser les interactions entre les objets

dans un scénario donné, de détecter des problèmes de conception et de

valider les exigences du système.

18
 7. Conclusion :

En conclusion, le chapitre de conception de ce rapport de PFE a permis de

présenter les différentes étapes et outils nécessaires pour concevoir un site

web de cours en ligne. Nous avons tout d'abord présenté les différentes

méthodologies de développement, notamment le modèle en cascade et le

modèle agile, en expliquant leurs avantages et leurs inconvénients. Nous

avons ensuite présenté le langage UML.

Nous avons ensuite présenté les différents diagrammes UML utilisés dans la

conception de notre site web de cours en ligne, notamment les diagrammes

de classes, les diagrammes de cas d'utilisation et les diagrammes de

séquence. Chacun de ces diagrammes nous a permis de mieux comprendre

les interactions entre les différents objets du système et de mieux concevoir

notre site web pour répondre aux besoins des utilisateurs.

Enfin, nous avons souligné l'importance de la conception dans le

développement d'un site web de cours en ligne, en expliquant comment une

bonne conception permet de garantir la qualité, la maintenabilité et la sécurité

du système.

En somme, ce chapitre de conception nous a permis d'avoir une vision plus

claire et précise de notre site web de cours en ligne. Nous sommes

maintenant prêts à passer à la phase de développement de notre site web en

utilisant les méthodologies et les outils présentés dans ce chapitre.

19
 Chapitre 3 : réalisation :

1. Introduction :

Dans ce chapitre, nous allons nous concentrer sur la mise en œuvre de notre

projet. Nous allons explorer les outils que nous avons utilisés pour la

réalisation de ce projet, ainsi que les interfaces graphiques que nous avons

développées. L'objectif de ce chapitre est de vous donner un aperçu détaillé

de la façon dont nous avons créé notre projet, en utilisant les différentes

techniques et outils disponibles. Nous allons commencer par vous présenter

les outils que nous avons utilisés, puis nous allons nous concentrer sur les

interfaces graphiques. En fin de compte, vous serez en mesure de

comprendre comment nous avons réalisé notre projet, de la conception à la

mise en œuvre finale.

2. Les outils utilisés :

Dans cette section, nous allons vous présenter les différents types d'outils que

nous avons utilisés pour la réalisation de notre projet.

a. Langages de programmation :

Nous avons utilisé plusieurs langages de programmation pour la réalisation de

notre projet, notamment :

20
HTML (HyperText Markup Language) est un langage
de balisage qui permet de décrire la structure et le
contenu d'une page Web. Les pages HTML sont
écrites en utilisant des balises qui définissent les
éléments de la page tels que le titre, les paragraphes,
les images, les liens, les formulaires, etc.

CSS (Cascading Style Sheets) est un langage de style

utilisé pour décrire la présentation d'une page Web
écrite en HTML. Le CSS permet de séparer la
présentation de la structure HTML en utilisant des
règles de style qui décrivent comment les éléments
HTML doivent être affichés sur la page.

JavaScript est un langage de programmation de haut

niveau et orienté objet, principalement utilisé pour
créer des interactions dynamiques sur les pages Web.
Il permet de créer des fonctionnalités interactives telles
que des menus déroulants, des animations, des
formulaires interactifs et des effets visuels.

PHP (Hypertext Preprocessor) est un langage de

script côté serveur principalement utilisé pour le
développement d'applications Web dynamiques. Il est
souvent utilisé en combinaison avec une base de
données pour créer des sites Web interactifs qui
peuvent stocker, récupérer et modifier des données en
temps réel.

21
 b. Framework de développement :

Nous avons utilisé un Framework de développement pour faciliter la création

de notre application Web, notamment :

Bootstrap est un Framework frontend open source,

c'est-à-dire une collection de fichiers HTML, CSS et
JavaScript qui permettent de concevoir rapidement et
facilement des interfaces utilisateur Web réactives et
attrayantes. Bootstrap a été développé par Twitter et
est maintenant maintenu par la communauté open
source.

c. Outils de développement :

Visual Studio Code est un éditeur de code source

développé par Microsoft pour Windows, Linux et
MacOs. Il est gratuit, open source et dispose de
fonctionnalités avancées pour le développement
d'applications Web, de bureautique et de logiciels en
général.

XAMPP est un environnement de développement Web

open source qui permet de créer un serveur Web local
sur une machine Windows, Linux ou MacOs. Il
comprend les composants de base nécessaires pour
exécuter des applications Web dynamiques telles que
PHP, Apache, MariaDB (MySQL) et Perl.

22
 StarUML est un logiciel open source de modélisation
UML (Unified Modeling Language) qui permet de créer
des diagrammes de classes, des diagrammes de cas
d'utilisation, des diagrammes de séquence, des
diagrammes de collaboration et bien d'autres types de
diagrammes. Il est utilisé pour la conception de
logiciels et de systèmes d'information.

d. Base de données :

Nous avons utilisé MySQL comme système de gestion de base de données

pour stocker et manipuler les données de notre application Web.

MySQL est un système de gestion de base de

données relationnelle open source largement utilisé
dans le développement d'applications Web. Il est
développé, distribué et supporté par Oracle
Corporation.

En utilisant ces différents types d'outils, nous avons pu créer une application

Web fonctionnelle et attrayante pour notre projet.

3. Les interfaces graphiques :

4. Conclusion :

23