REPUBLIQUE TUNISIENNE

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUES



DIRECTION GENERALE DES ETUDES TECHNOLOGIQUES

Institut Supérieur des Etudes Technologiques de Siliana

Département : Technologie Informatique

- Rapport de projet -

Elaboré par : Maaoui Souheil / Gamgam Amine

Niveau : DSI 21

Du : 09/01/2023 au 08/02/2023

Encadré par : Mme Mariem ben Amor

Année universitaire : 2022/2023

ISET Siliana – Elmadina El-Jadida 6100 Siliana Tél. (+216) 78 874 600 Fax. (+216) 78 874 699
 Remerciement

Nous avons l’honneur d’exprimer notre profonde reconnaissance aux enseignants de l’Institut
Supérieur des Etudes Technologiques du Siliana précisément ceux du département technologie
de l’informatique

Nous tenons à exprimer nos vifs remerciements à notre encadreur Mme Mariem Ben Amor
pour l’encadrement et le soutien qu’il nous a procuré dès la rentrée scolaire jusqu’à la fin de ce
semestre.

Avec un grand respect, nous espérons que notre travaille vous plait
 Sommaire

Remerciement ......................................................................................................................................... 1
Sommaire ................................................................................................................................................ 2
Introduction générale ............................................................................................................................. 4
Chapitre 1 : Analyse du projet ............................................................................................................... 5
I. Introduction : ............................................................................................................................. 5
II. Description et critiques de l’existant : ................................................................................. 5
1. Description de l’existant : ..................................................................................................... 5
2. Critiques de l’existant : ......................................................................................................... 5
III. Solution proposée : ................................................................................................................ 6
IV. Environnement de matériel : ................................................................................................ 6
V. Environnement de logiciel : ...................................................................................................... 7
1. Langage de conception UML : ............................................................................................. 7
2. Google Chrome : .................................................................................................................... 7
3. HTML & CSS & JavaScript : .............................................................................................. 8
a. HTML : .......................................................................................................................... 8
b. CSS 3 : ............................................................................................................................ 8
c. JavaScript : .................................................................................................................... 8
4. PHP:........................................................................................................................................ 8
5. PHPMyAdmin : ..................................................................................................................... 9
6. WampServer : ........................................................................................................................ 9
VI. Conclusion :.......................................................................................................................... 10
Chapitre 2 : Conception ....................................................................................................................... 11
I. Introduction : ........................................................................................................................... 11
II. Base de données : ................................................................................................................. 11
III. Modélisation UML : ............................................................................................................ 12
IV. Conclusion :.......................................................................................................................... 15
Chapitre 3 : Réalisation........................................................................................................................ 16
I. Introduction : ........................................................................................................................... 16
II. Etude de la solution finale : ................................................................................................ 16
1. Page d’accueil : .................................................................................................................... 16
 2. Page de cours : ..................................................................................................................... 17
3. Page des programmes : ....................................................................................................... 17
4. Page des enseignants : ......................................................................................................... 19
5. Page de contact : .................................................................................................................. 20
6. Pied de page : ....................................................................................................................... 21
7. Page de cours en ligne : ....................................................................................................... 21
8. Page de profil : ..................................................................................................................... 23
9. Page d’accueil après le login :............................................................................................. 23
III. Conclusion :.......................................................................................................................... 24
Conclusion générale ............................................................................................................................. 25
Bibliographie ........................................................................................................................................ 26
Annexes ................................................................................................................................................. 27
 Introduction générale

Dans cette matière « Projet d’Intégration » et sous l’encadrement de madame « Mariem

Ben Amor » nous allons intégrer un projet de A jusqu’à Z au sujet d’un site web, application,
ou Jeu vidéo.

Moi Souheil Maaoui et mon collègue Amine Gamgam on a choisi de créer un site web
Dynamique qui gère tous les services d’une école appelé « Be Smart » privé qui servent des
cours présentiels et à distance.
 Chapitre 1 : Analyse du projet

I. Introduction :

On est sûr que tout ce travail ne peut pas être effectué sans des matériels informatiques
et des logiciels. Dans ce chapitre, nous allons présenter l’environnement matériel et
logiciel et les principales interfaces graphiques observées tout au long la période du
projet pour améliorer, élargir et bien maitriser mes connaissances.

II. Description et critiques de l’existant :

1. Description de l’existant :

L'école privé s'appuie sur le système des papiers par exemple lorsqu’un prof demande
un congé, autorisation, changement de régime horaire, etc ou un étudiant admet des questions
et des sujets un peu flou. Cette méthode est considérée comme dépassée pour le
développement technologique, fonctionnel, administratif et professionnel, ce qui nous obligé
de trouver une solution plus pratique et plus moderne.

2. Critiques de l’existant :

D'une part les travailleurs et les profs de l’école ont un problème des papiers de congé,
autorisation, etc.… et son remplissage car il perte beaucoup de temps en vue la modernité du
monde et d'autre part il y a un problème de communication entre l'entreprise et les clients, car
les clients ne peuvent pas connaître tous les produits et services de l'entreprise et la difficulté
de communiquer avec eux pour se renseigner sur certaines choses.
 III. Solution proposée :

Construire un site web pour l'école afin de faciliter la demande d’inscription pour les
clients, le congé, changement régime horaire, autorisation pour travailleurs, répondre aux
questions des étudiants des clients pour en savoir plus sur les produits et services de l'école,
contient :
• une interface login de 3 types de compte (compte admin pour l’administrateur qui gère
la société/ compte travailleur pour les profs/ compte clients pour les étudiants) et un formulaire
de création un nouveau compte.
• Une interface publique majeure pour la présentation de l'entreprise et les offres de
produits et services.
• une interface de nouvelle demande congé etc.… pour les travailleurs
• Une interface spéciale permettant aux administrateurs d'agir sur le site à travers laquelle
et modifier les prix, les horaires et les packs des formations
• une interface qui comprend les cours en lignes et les séances enregistrées etc.… pour
les travailleurs
• Une base de données au lieu de fichiers pour faciliter la manipulation et protéger les
sources de fichiers

IV. Environnement de matériel :

PC de travail Les caractéristiques

PC “ HP“ Core i3 8ème génération • Processeur : Intel Core i3 (8ème génération)

• RAM : 4 Go (1 x 4 GB)

• Résolution : 1366 x 768 (Full HD)

• Stockage : 1 To HDD

• Carte graphique : UHD Graphics

• Système d’exploitation : Windows 10, Professionnel 64 bits

• Poids : 2.33 kg
Tableau 1: Environnement du matériel
 Figure 1: Pc HP i3 8eme génération

V. Environnement de logiciel :

1. Langage de conception UML :

Staruml est un logiciel de modélisation UML qui a été cédé comme open source par son
éditeur à la fin de son exploitation commerciale sous une licence modifiée de GNU GPL. Il est
créé en 1 Novembre 2005 et son langage de programmation est Pascal Objet.

Figure 2: Logo Staruml

2. Google Chrome :

Chrome est un navigateur web propriétaire développé par Google basé sur le projet libre
Chromium fonctionnant sous Windows, Mac, Linux, Android et iOS. Chromium est similaire
à Chrome, mais ce dernier contient des mouchards (envoi d'informations personnelles vers un
serveur de Google) ou pisteurs

Figure 3: Logo Google Chrome

 3. HTML & CSS & JavaScript :

a. HTML :

Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière

version HTML5, est le langage de balisage conçu pour représenter les pages web. HTML
permet également de structurer sémantiquement et logiquement et de mettre en forme le
contenu des pages.

b. CSS 3 :
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style
Sheets, forment un langage informatique qui décrit la présentation des documents HTML et
XML. CSS devient couramment utilisé dans la conception de sites web et bien pris en charge
par les navigateurs web dans les années 2000.

c. JavaScript :
Javascript est langage de programmation de scripts principalement employé dans les
pages web interactives mais aussi pour les serveurs avec l'utilisation (par exemple) de Node.js

Figure 4: Logo HTML / CSS / JavaScript

4. PHP:

PHP HyperText Preprocessor, plus connu sous son sigle PHP (sigle auto-référentiel), est
un langage de programmation libre, principalement utilisé pour produire des pages Web
dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n'importe quel
langage interprété de façon locale. PHP est un langage impératif orienté objet.

Figure 5: Logo PHP

 5. PHPMyAdmin :

PhpMyAdmin est un outil d'administration gratuit et open-source pour la gestion des

bases de données MySQL et MariaDB. Il est écrit en PHP et fournit une interface graphique
basée sur le Web pour effectuer diverses tâches de gestion de base de données. Avec
phpMyAdmin, vous pouvez effectuer des tâches telles que la création et la gestion de bases de
données, de tables et d'index, l'exécution de requêtes SQL, l'importation et l'exportation de
données, la gestion des autorisations des utilisateurs, etc. Il vous permet d'interagir
visuellement avec votre base de données et fournit une interface facile à utiliser pour gérer
vos systèmes de base de données.

Figure 6: Logo phpMyAdmin

6. WampServer :

WampServer est une pile logicielle qui vous permet de créer un environnement de
serveur local sur votre ordinateur pour développer des applications Web. Il signifie Windows,
Apache, MySQL et PHP, qui sont les composants de base de la pile.

Lorsque vous installez WampServer, il configure un environnement de serveur local

sur votre ordinateur, ce qui facilite le développement et le test d'applications Web sans avoir
besoin d'une connexion Internet ou d'un serveur distant. Il fournit une interface conviviale
pour gérer les composants du serveur, tels que le démarrage et l'arrêt du serveur, la
configuration des paramètres et l'accès aux journaux.

Figure 7: Logo WampServer

VI. Conclusion :

En conclusion, l'analyse de projet constitue un élément fondamental pour minimiser les

risques, maximiser les opportunités et assurer le succès d'un projet. Elle fournit une base
solide pour prendre des décisions éclairées, élaborer des stratégies appropriées et atteindre les
objectifs fixés. Une analyse de projet approfondie permet de minimiser les surprises et les
échecs potentiels, ce qui augmente les chances de réaliser un projet de manière efficace et
efficiente.
 Chapitre 2 : Conception

I. Introduction :

Le chapitre de conception joue un rôle crucial dans le développement d'un système ou

d'une application. Ce chapitre met l'accent sur la création d'une architecture logicielle, d'une
interface utilisateur conviviale et d'une structure de données appropriée pour le système en
développement. Dans ce chapitre, nous explorerons les principes fondamentaux de la
conception logicielle et les différentes techniques utilisées pour créer une architecture solide.
De plus, nous aborderons la conception de la base de données en examinant les meilleures
pratiques pour modéliser les données de manière efficace et cohérente.

II. Base de données :

L'utilisation d'une base de données dans la partie conception d'un système est essentielle
pour garantir une gestion efficace et cohérente des données. Voici quelques utilités de
l'utilisation d'une base de données dans la conception :

✓ Stockage des données : Une base de données permet de stocker et d'organiser

les données de manière structurée. Cela permet d'accéder facilement aux informations
nécessaires et de les gérer de manière centralisée.
✓ Intégrité des données : En utilisant des contraintes et des règles au niveau de la
base de données, il est possible de maintenir l'intégrité des données. Des règles telles que les
clés primaires, les contraintes d'intégrité référentielle et les validations des données
garantissent que seules les données valides et cohérentes sont stockées.
✓ Partage et accès aux données : Une base de données facilite le partage des
données entre différentes parties d'un système. Plusieurs utilisateurs peuvent accéder
simultanément aux données tout en assurant la cohérence et la sécurité de l'accès.
✓ Performance des requêtes : La conception d'une base de données comprend
également l'optimisation des requêtes pour améliorer les performances du système. En
utilisant des index, des vues et d'autres techniques, les requêtes peuvent être exécutées plus
efficacement, réduisant ainsi le temps de réponse et améliorant les performances globales du
système.
 ✓ Sécurité des données : Une base de données permet de mettre en place des
mesures de sécurité pour protéger les données sensibles. Cela peut inclure des mécanismes de
contrôle d'accès, de chiffrement des données et de sauvegarde régulière pour prévenir la perte
ou la corruption des données.
✓ Évolutivité et extensibilité : En utilisant une base de données bien conçue, il
est plus facile de faire évoluer et d'étendre un système à mesure que les besoins de l'entreprise
évoluent. La conception de la base de données doit être flexible pour permettre l'ajout de
nouvelles fonctionnalités sans compromettre l'intégrité et les performances du système
existant.

En résumé, l'utilisation d'une base de données dans la conception d'un système offre de
nombreux avantages, notamment le stockage efficace des données, la garantie de l'intégrité
des données, le partage et l'accès sécurisé aux données, l'optimisation des performances, la
sécurité des données, ainsi que l'évolutivité et l'extensibilité du système.

III. Modélisation UML :

• Diagramme de cas d’utilisation (use case) :

Figure 8: Diagramme de cas d’utilisation (use case)

 • Digramme de classe :

Figure 9: Diagramme de classe

Le diagramme de classe représente les différentes classes principales du système d'e-learning.

La classe "Utilisateur" est la classe de base qui représente un utilisateur du site d'e-
learning. Elle contient des attributs tels que l'identifiant de l'utilisateur, le nom, l'email et le
mot de passe.

Les classes "Étudiant" et "Enseignant" héritent de la classe "Utilisateur" et ajoutent des

attributs spécifiques à chaque rôle. Par exemple, la classe "Étudiant" a un attribut de niveau et
un tableau de cours auxquels l'étudiant est inscrit, tandis que la classe "Enseignant" a un
attribut de domaine et un tableau de cours qu'il enseigne.

La classe "Cours" représente un cours spécifique du site d'e-learning. Elle contient des
attributs tels que l'identifiant du cours, le titre, la description et le contenu du cours.

La classe "Évaluation" représente une évaluation associée à un cours. Elle contient des
attributs tels que l'identifiant de l'évaluation, le titre, la description, la date et la note obtenue.

• Diagramme de séquence :

Ce diagramme de séquence illustre une interaction basique entre un utilisateur et un

système d'e-learning. Bien entendu, il peut y avoir plus de détails et d'étapes spécifiques en
fonction de la plateforme e-learning en question et des fonctionnalités disponibles.

Figure 10: Diagramme de séquence

 IV. Conclusion :

En conclusion, le chapitre de conception joue un rôle crucial dans le développement

d'un système d'e-learning efficace et fonctionnel. Il permet de transformer les besoins et les
spécifications identifiés en une architecture logicielle solide, une interface utilisateur
conviviale et une structure de données appropriée. Au cours de ce chapitre, nous avons
exploré les principes fondamentaux de la conception logicielle pour un site d'e-learning. Nous
avons examiné l'importance de concevoir une architecture bien pensée et extensible, en
mettant l'accent sur la création de classes, de relations et d'interfaces appropriées pour
répondre aux besoins des utilisateurs.
 Chapitre 3 : Réalisation

I. Introduction :

Ce chapitre se concentre sur la traduction des concepts, des modèles et des

spécifications définis lors de la phase de conception en code informatique fonctionnel. Il s'agit
d'une étape pratique où les développeurs utilisent des langages de programmation, des
frameworks et des outils pour créer les différentes parties du système.

Au cours de ce chapitre, nous explorerons les différentes étapes de l'implémentation, y

compris la création des modèles de données, la programmation des fonctionnalités,
l'intégration de composants externes, la réalisation des interfaces utilisateur, et bien plus
encore. Nous aborderons également des concepts tels que le développement itératif et
incrémental, les tests unitaires, l'intégration continue et les bonnes pratiques de codage.

II. Etude de la solution finale :

1. Page d’accueil :

Figure 11: Page d'accueil

2. Page de cours :

Figure 12: Page de cours

3. Page des programmes :

Figure 13: Page des programmes (Partie 1)

Figure 14: Page des programmes (Partie 2)

Figure 15: Page des programmes (Partie 3)

4. Page des enseignants :

Figure 16: Page des enseignants (partie 1)

Figure 17: Page des enseignants (partie 2)

 Figure 18: Page des enseignants (partie 3)

5. Page de contact :

Figure 19: Page de contact

6. Pied de page :

Figure 20: Pied de page

7. Page de cours en ligne :

Figure 21: Page de cours en ligne (Partie1)

Figure 22: Page de cours en ligne (Partie2)

Figure 23: Page de cours en ligne (Partie3)

Figure 24: Page de cours en ligne (Partie3)

8. Page de profil :

Figure 25: Page de profil

9. Page d’accueil après le login :

Figure 26: Page d’accueil après le login

III. Conclusion :

En conclusion, le chapitre de réalisation marque l'étape cruciale de la mise en œuvre

concrète du système d'e-learning. Nous avons exploré les différentes étapes et les aspects clés
de l'implémentation, en mettant l'accent sur la traduction des spécifications en code
fonctionnel.
 Conclusion générale

En conclusion, le projet e-learning représente une solution prometteuse pour l'éducation

et la formation à distance. Il offre de nombreux avantages, tels que la flexibilité, l'accessibilité
et la personnalisation de l'apprentissage. Grâce aux avancées technologiques, les plateformes
e-learning offrent une expérience d'apprentissage interactive et engageante, permettant aux
apprenants d'accéder à des ressources pédagogiques variées et d'interagir avec des instructeurs
et d'autres apprenants à travers le monde.

Le rapport de projet a mis en évidence plusieurs éléments clés pour le succès de l'e-
learning, notamment la conception et le développement de contenus pédagogiques de qualité,
l'intégration de technologies appropriées, la mise en place d'un suivi et d'une évaluation
efficaces, ainsi que la création d'une communauté d'apprentissage en ligne dynamique.

Cependant, il est important de reconnaître que l'e-learning ne peut pas remplacer

entièrement l'enseignement traditionnel. Il est essentiel de trouver un équilibre entre les
méthodes d'apprentissage en ligne et en présentiel, en tirant parti des forces de chaque
approche. De plus, il est crucial de prendre en compte les défis tels que l'accès limité à
Internet dans certaines régions, le manque de compétences technologiques chez les apprenants
et les enseignants, ainsi que la nécessité d'une formation et d'un soutien adéquats pour assurer
le succès de l'e-learning.

En conclusion, l'e-learning a le potentiel de révolutionner l'éducation en offrant des

opportunités d'apprentissage flexibles et accessibles à un large public. Cependant, sa mise en
œuvre doit être soigneusement planifiée et adaptée aux besoins des apprenants et des
enseignants. Avec une approche réfléchie et des investissements appropriés, l'e-learning peut
améliorer considérablement les résultats éducatifs et préparer les apprenants à relever les défis
du monde moderne.
 Bibliographie

www.youtube.com
www.google.com
www.wikepedia.com
 Annexes

• Liste des figures :

Figure 1: Pc HP i3 8eme génération ........................................................................................................ 7
Figure 2: Logo Staruml............................................................................................................................. 7
Figure 3: Logo Google Chrome ................................................................................................................ 7
Figure 4: Logo HTML / CSS / JavaScript ................................................................................................... 8
Figure 5: Logo PHP ................................................................................................................................... 8
Figure 6: Logo phpMyAdmin ................................................................................................................... 9
Figure 7: Logo WampServer .................................................................................................................... 9
Figure 8: Diagramme de cas d’utilisation (use case) ............................................................................. 12
Figure 9: Diagramme de classe.............................................................................................................. 13
Figure 10: Diagramme de séquence ...................................................................................................... 14
Figure 11: Page d'accueil ....................................................................................................................... 16
Figure 12: Page de cours ....................................................................................................................... 17
Figure 13: Page des programmes (Partie 1) .......................................................................................... 17
Figure 14: Page des programmes (Partie 2) .......................................................................................... 18
Figure 15: Page des programmes (Partie 3) .......................................................................................... 18
Figure 16: Page des enseignants (partie 1) .......................................................................................... 19
Figure 17: Page des enseignants (partie 2) ........................................................................................... 19
Figure 18: Page des enseignants (partie 3) ........................................................................................... 20
Figure 19: Page de contact .................................................................................................................... 20
Figure 20: Pied de page ......................................................................................................................... 21
Figure 21: Page de cours en ligne (Partie1) ........................................................................................... 21
Figure 22: Page de cours en ligne (Partie2) ........................................................................................... 22
Figure 23: Page de cours en ligne (Partie3) ........................................................................................... 22
Figure 24: Page de cours en ligne (Partie3) ........................................................................................... 22
Figure 25: Page de profil........................................................................................................................ 23
Figure 26: Page d’accueil après le login ................................................................................................ 23

• Liste des tableaux :

Tableau 1: Environnement du matériel................................................................................................... 6