Résumé

Ce présent travail s’inscrit dans le cadre de projet de fin d’étude pour l’obtention du diplôme
de la licence fondamentale en science informatique de l’Institut Supérieur d’Informatique du
Kef, ce travail est réalisé au sein de Sprint code. Le projet consiste à développer une appli-
cation Web pour la Cabinet de formation Média World Academy . Pour réaliser ce travail,
nous avons utilisé le langage de modélisation unifié UML .
Le développement de cette application est effectué à l’aide du Framework Laravel ,et comme
un langage de programmation PHP et Bootstrap, Laragon comme un serveur , et MySQL pour
la gestion de la base de données.
Mots clés : Bootstrap ,PHP, Laravel, UML

Abstract
This present work is part of the end of study project for the graduation of the fundamental
license in computer science from the Higher Institute of Computer Science of Kef, this work is
done within Sprint code. The project consists of developing a Web application for the training
firm Media World Academy. To carry out this work, we used the unified modeling language
UML.
The development of this application is carried out using the Laravel Framework, and as a
language PHP and Bootstrap programming, Laragon as a server, and MySQL for database
management.
Keywords : Bootstrap, PHP, Laravel, UML
Glossaire

CRUD : Create, Retrieve, Update and Delete

CSS : Cascading Style Sheets

HTML Hypertext Markup Language

HTTP : Hypertext Transfer Protocol

JS : JavaScript

MVC : Modèle-Vue-Contrôleur

PHP : PHP Hypertext Preprocessor

HTTP Hypertext Transfer Protocol

SGBD : Système de gestion de base de données

SQL : Structured Query Language

UML : Unified Modeling Language

Table des matières

Introduction générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Présentation de l’organisme d’accueil : . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.1 Présentation de la société : . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.2 Equipe : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.3 Services : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.4 Objectifs : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.5 marketing : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Cadre du projet : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.1 Etude de l’existant : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.2 Problématique : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 Solutions proposées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Démarche de développement adoptée . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.1 Présentation du langage UML . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.2 Démarche de développement adopté . . . . . . . . . . . . . . . . . . . . 6
1.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Analyse et Spécification des besoins . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Spécifications des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.1 Les besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2.2 Les besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Prototype des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 Diagrammes de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.1 Le cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.2 Identificateurs des acteurs : . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.3 Diagramme de cas d’utilisation Global . . . . . . . . . . . . . . . . . . . 10
2.5 Diagramme de cas d’utilisation raffiné . . . . . . . . . . . . . . . . . . . . . . . 12
2.5.1 Diagramme de cas d’utilisations’authentifier : . . . . . . . . . . . . . . 12
2.6 Diagramme détaillé de cas d’utilisation de formateur . . . . . . . . . . . . . . . 13
2.6.1 Diagramme de cas d’utlilisation raffiné Gérer cours . . . . . . . . . . . . 15
2.6.2 Diagramme de cas d’utilisation raffiné Gérer formations . . . . . . . . . 17
2.6.3 Diagramme de cas d’utilisation raffiné Discuter . . . . . . . . . . . . . . 19
2.6.4 Diagramme de cas d’utilisation raffiné Gérer tests . . . . . . . . . . . . . 20
2.6.5 Diagramme de cas d’utilisation raffiné Consulter étudiant . . . . . . . . . 21
2.6.6 Diagramme de cas d’utilisation raffiné Consulter avis : . . . . . . . . . . 22
2.6.7 Diagramme de cas d’utilisation raffiné Consulter articles : . . . . . . . . . 23
2.7 Diagramme détaillé de cas d’utilisation d’administrateur . . . . . . . . . . . . . 24
2.7.1 Diagramme de cas d’utilisation raffiné Gérer cours : . . . . . . . . . . . . 26

5
 2.7.2 Diagramme de cas d’utilisation raffiné Gérer articles : . . . . . . . . . . . 27
2.7.3 Diagramme de cas d’utilisation raffiné Gérer contact : . . . . . . . . . . . 30
2.7.4 Diagramme de cas d’utilisation raffiné Consulter statistiques . . . . . . . 32
2.7.5 Diagramme de cas d’utilisation raffiné Consulter avis : . . . . . . . . . . 33
2.7.6 Diagramme de cas d’utilisation raffiné Gérer formateur . . . . . . . . . . 34
2.7.7 Diagramme de cas d’utilisation raffiné Gérer étudiants : . . . . . . . . . . 36
2.7.8 Diagramme de cas d’utilisation raffiné Gérer formation . . . . . . . . . . 38
2.7.9 Diagramme de cas d’utilisation raffiné Gérer tests . . . . . . . . . . . . . 39
2.7.10 Diagramme de cas d’utilisation raffiné Discuter . . . . . . . . . . . . . . 41
2.8 Diagramme détaillé de cas d’utilisation d’etudiant . . . . . . . . . . . . . . . . 42
2.8.1 Diagramme de cas d’utilisation raffiné Consulter formations : . . . . . . . 44
2.8.2 Diagramme de cas d’utilisation raffiné Consulter cours : . . . . . . . . . . 44
2.8.3 Diagramme de cas d’utilisation raffiné passer test : . . . . . . . . . . . . 46
2.8.4 Diagramme de cas d’utilisation raffiné Consulter liste formateur : . . . . 47
2.8.5 Diagramme de cas d’utilisation raffiné évaluer formations : . . . . . . . . 48
2.8.6 Diagramme de cas d’utilisation raffiné Consulter articles : . . . . . . . . . 48
2.8.7 Diagramme de cas d’utilisation raffiné Discuter : . . . . . . . . . . . . . . 50
2.8.8 Diagramme de cas d’utilisation Modifier profil . . . . . . . . . . . . . . . 52
2.9 Diagramme de cas d’utilisation Contacter admin . . . . . . . . . . . . . . . . . 52
2.10 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

3 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2 Les diagrammes de séquences . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2.1 Définition et composition . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2.2 Diagramme de séquence d’authentification . . . . . . . . . . . . . . . . . 56
3.2.3 Diagramme de classe de conception S’authentifier . . . . . . . . . . . . . 57
3.2.4 Diagramme de séquence inscription étudiants . . . . . . . . . . . . . . . 57
3.2.5 Diagramme de classe de conception Inscription étudiants . . . . . . . . . 58
3.3 Diagramme de séquence Gérer formateurs : . . . . . . . . . . . . . . . . . . . . 59
3.3.1 Diagramme de séquence ajouter formateur . . . . . . . . . . . . . . . . . 59
3.3.2 Diagramme de séquence modifier formateur . . . . . . . . . . . . . . . . 61
3.3.3 Diagramme de séquence supprimer formateur . . . . . . . . . . . . . . . 62
3.3.4 Diagramme de classe de conception Gérer formateur . . . . . . . . . . . . 63
3.4 Diagramme de séquence Gérer formations : . . . . . . . . . . . . . . . . . . . . 63
3.4.1 Diagramme de séquence ajouter formation . . . . . . . . . . . . . . . . . 63
3.4.2 Diagramme de séquence modifier formation . . . . . . . . . . . . . . . . 65
3.4.3 Diagramme de séquence supprimer formation . . . . . . . . . . . . . . . 66
3.4.4 Diagramme de classe de conception Gérer formation . . . . . . . . . . . . 67
3.5 Diagramme de séquence Gérer Articles : . . . . . . . . . . . . . . . . . . . . . . 67
3.5.1 Diagramme de séquence ajouter Article . . . . . . . . . . . . . . . . . . 67
3.5.2 Diagramme de séquence modifier article . . . . . . . . . . . . . . . . . . 69
3.5.3 Diagramme de séquence supprimer article . . . . . . . . . . . . . . . . . 70
3.5.4 Diagramme de classe de conception Gérer article . . . . . . . . . . . . . . 71
3.6 Diagramme de séquence Gérer Statistiques : . . . . . . . . . . . . . . . . . . . . 71
3.6.1 Diagramme de séquence afficher statistique . . . . . . . . . . . . . . . . 71
3.7 Diagramme de séquence Gérer Cours : . . . . . . . . . . . . . . . . . . . . . . . 72
3.7.1 Diagramme de séquence ajouter cours . . . . . . . . . . . . . . . . . . . 72
3.7.2 Diagramme de séquence afficher cours . . . . . . . . . . . . . . . . . . . 74
3.7.3 Diagramme de séquence modifier cours . . . . . . . . . . . . . . . . . . . 74

6
 3.7.4 Diagramme de séquence supprimer cours . . . . . . . . . . . . . . . . . . 75
3.7.5 Diagramme de classe de conception Gérer cours . . . . . . . . . . . . . . 77
3.8 Diagramme de séquence Gérer tests : . . . . . . . . . . . . . . . . . . . . . . . . 77
3.8.1 Diagramme de séquence creer test . . . . . . . . . . . . . . . . . . . . . 77
3.8.2 Diagramme de séquence creer question . . . . . . . . . . . . . . . . . . . 79
3.8.3 Diagramme de séquence supprimer test . . . . . . . . . . . . . . . . . . . 81
3.8.4 Diagramme de classe de conception Gérer tests . . . . . . . . . . . . . . 82
3.9 Diagramme de séquence Contacter admin : . . . . . . . . . . . . . . . . . . . . 83
3.9.1 Diagramme de séquence Envoyer message . . . . . . . . . . . . . . . . . 83
3.9.2 Diagramme de classe de conception Gérer contact admin . . . . . . . . . 85
3.10 Diagramme de séquence Consulter cours . . . . . . . . . . . . . . . . . . . . . . 85
3.11 Diagramme de séquence passer tests . . . . . . . . . . . . . . . . . . . . . . . . 86
3.12 Diagramme de classe métier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.12.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.12.2 La composition d’un diagramme de classe . . . . . . . . . . . . . . . . . 88
3.12.3 Modéle d’entité persistant . . . . . . . . . . . . . . . . . . . . . . . . . . 88
3.13 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

4 Réalisation et tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.2 Architecture de développement : . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.2.1 Architecture de 3 tiers : . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.2.2 Architecture du modéle MVC . . . . . . . . . . . . . . . . . . . . . . . . 92
4.3 Environnement de développement . . . . . . . . . . . . . . . . . . . . . . . . . 92
4.3.1 Environnement matériel : . . . . . . . . . . . . . . . . . . . . . . . . . . 92
4.3.2 Environnement logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
4.4 Implémentation de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
4.4.1 Présentation des exemples des interfaces . . . . . . . . . . . . . . . . . . 95
4.4.2 Les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
4.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Conclusion et Perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112

Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

7
Table des figures

1.1 Logo Sprint Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.2 Organigramme de l’organisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.1 Diagramme de cas d’utilisation global. . . . . . . . . . . . . . . . . . . . . . . . 11

2.2 Diagramme de cas d’utilisation d’authentification . . . . . . . . . . . . . . . . . 12
2.3 Interface d’authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.4 Diagramme détaillé de cas d’utilisation de formateur . . . . . . . . . . . . . . . 14
2.5 Diagramme de cas d’utilisation Gérer cours . . . . . . . . . . . . . . . . . . . . 15
2.6 Interface Gérer cours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7 Diagramme de cas d’utilisation Gérer formations . . . . . . . . . . . . . . . . . 17
2.8 Interface Gérer formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.9 Diagramme de cas d’utilisation Discuter . . . . . . . . . . . . . . . . . . . . . . 19
2.10 Diagramme de cas d’utilisation Gérer tests. . . . . . . . . . . . . . . . . . . . . . 20
2.11 Interface Gérer test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.12 Diagramme de cas d’utilisation Consulter étudiant. . . . . . . . . . . . . . . . . 22
2.13 Diagramme des cas d’utilisation Consulter avis . . . . . . . . . . . . . . . . . . . 22
2.14 Diagramme de cas d’utilisation Consulter articles . . . . . . . . . . . . . . . . . 23
2.15 Interface Consulter article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.16 diagramme détaillé de cas d’utilisation d’administrateur . . . . . . . . . . . . . 25
2.17 Diagramme de cas d’utilisation Gérer cours admin . . . . . . . . . . . . . . . . . 26
2.18 Interface Gérer cours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.19 Diagramme de cas d’utilisation Gérer articles . . . . . . . . . . . . . . . . . . . . 28
2.20 Interface Gérer article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.21 Diagramme de cas d’utilisation Gérer contact. . . . . . . . . . . . . . . . . . . . 30
2.22 Interface Gérer contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.23 Diagramme de cas d’utilisation Consulter statistiques. . . . . . . . . . . . . . . . 32
2.24 Interface Consulter statistique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.25 Diagramme de cas d’utilisation Consulter avis . . . . . . . . . . . . . . . . . . . 33
2.26 Diagramme de cas d’utilisation Gérer formateur . . . . . . . . . . . . . . . . . . 34
2.27 Interface Gérer formateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.28 Diagramme de cas d’utilisation Gérer étudiants . . . . . . . . . . . . . . . . . . 36
2.29 Interface Gérer étudiant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.30 Diagramme de cas d’utilisation Gérer formation. . . . . . . . . . . . . . . . . . . 38
2.31 Interface Gérer formation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.32 Diagramme de cas d’utilisation Gérer tests. . . . . . . . . . . . . . . . . . . . . . 40
2.33 Interface Gérer test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.34 Diagramme de cas d’utilisation Discuter . . . . . . . . . . . . . . . . . . . . . . 41
2.35 Diagramme détaillé de cas d’utilisation d’étudiant . . . . . . . . . . . . . . . . 43
2.36 Diagramme de cas d’utilisation consulter formation . . . . . . . . . . . . . . . . 44
2.37 Diagramme de cas d’utilisation Consulter cours . . . . . . . . . . . . . . . . . . 45
2.38 Interface payer formation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
2.39 Diagramme de cas d’utilisation passer test . . . . . . . . . . . . . . . . . . . . . 46

8
2.40 Diagramme de cas d’utilisation consulter liste formateur . . . . . . . . . . . . . 47
2.41 Interface consulter formateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.42 Diagramme de cas d’utilisation évaluer formation . . . . . . . . . . . . . . . . . 48
2.43 Diagramme de cas d’utilisation Consulter articles . . . . . . . . . . . . . . . . . 49
2.44 Interface Consulter article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.45 Diagramme de cas d’utilisation Discuter. . . . . . . . . . . . . . . . . . . . . . . 50
2.46 Diagramme de cas d’utilisation Modifier profil. . . . . . . . . . . . . . . . . . . . 52
2.47 Diagramme de cas d’utilisation Contacter admin. . . . . . . . . . . . . . . . . . 52
2.48 Interface Contacter admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

3.1 Diagramme de Séquence S’authentifier . . . . . . . . . . . . . . . . . . . . . . . 56

3.2 Diagramme de classe de conception S’authentifier . . . . . . . . . . . . . . . . . 57
3.3 Diagramme de séquence inscription . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.4 Diagramme de classe de conception S’inscrire . . . . . . . . . . . . . . . . . . . . 59
3.5 Diagramme de séquence ajouter formateur . . . . . . . . . . . . . . . . . . . . . 60
3.6 Diagramme de séquence Modifier formateur . . . . . . . . . . . . . . . . . . . . 61
3.7 Diagramme de séquence supprimer formateur . . . . . . . . . . . . . . . . . . . 62
3.8 Diagramme de classe de conception Gérer formateur . . . . . . . . . . . . . . . . 63
3.9 Diagramme de séquence ajouter formation . . . . . . . . . . . . . . . . . . . . . 64
3.10 Diagramme de séquence Modifier formation . . . . . . . . . . . . . . . . . . . . 65
3.11 Diagramme de séquence supprimer formation . . . . . . . . . . . . . . . . . . . . 66
3.12 Diagramme de classe de conception Gérer formation . . . . . . . . . . . . . . . . 67
3.13 Diagramme de séquence ajouter article . . . . . . . . . . . . . . . . . . . . . . . 68
3.14 Diagramme de séquence Modifier article . . . . . . . . . . . . . . . . . . . . . . 69
3.15 Diagramme de séquence supprimer article . . . . . . . . . . . . . . . . . . . . . 70
3.16 Diagramme de classe de conception Gérer article . . . . . . . . . . . . . . . . . . 71
3.17 Diagramme de séquence Gérer statistique . . . . . . . . . . . . . . . . . . . . . . 72
3.18 Diagramme de séquence ajouter cours . . . . . . . . . . . . . . . . . . . . . . . . 73
3.19 Diagramme de séquence afficher cours . . . . . . . . . . . . . . . . . . . . . . . . 74
3.20 Diagramme de séquence Modifier cours . . . . . . . . . . . . . . . . . . . . . . . 75
3.21 Diagramme de séquence supprimer cours . . . . . . . . . . . . . . . . . . . . . . 76
3.22 Diagramme de classe de conception Gérer cours . . . . . . . . . . . . . . . . . . 77
3.23 Diagramme de séquence creer test . . . . . . . . . . . . . . . . . . . . . . . . . 78
3.24 Diagramme de séquence creer question . . . . . . . . . . . . . . . . . . . . . . . 80
3.25 Diagramme de séquence supprimer test . . . . . . . . . . . . . . . . . . . . . . . 82
3.26 Diagramme de classe de conception Gérer test . . . . . . . . . . . . . . . . . . . 83
3.27 Diagramme de séquence envoyer message . . . . . . . . . . . . . . . . . . . . . 84
3.28 Diagramme de classe de conception Gérer contact admin . . . . . . . . . . . . . 85
3.29 Diagramme de séquence consulter cour . . . . . . . . . . . . . . . . . . . . . . . 86
3.30 Diagramme de séquence passer tests . . . . . . . . . . . . . . . . . . . . . . . . 87
3.31 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

4.1 Architecture de trois tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

4.2 Modéle MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
4.3 Logo visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
4.4 Logo laragon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
4.5 Logo Draw.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
4.6 Logo laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
4.7 Logo HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
4.8 Logo CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
4.9 Logo bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

9
4.10 Interface acceuil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
4.11 Interface contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
4.12 Interface inscription . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
4.13 Interface authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
4.14 Interface paneau admin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
4.15 Interface liste formateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
4.16 Interface ajouter formateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
4.17 Interface liste article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
4.18 Interface ajouter article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
4.19 Interface liste contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
4.20 Interface repondre contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
4.21 Interface statistiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
4.22 Interface liste formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
4.23 Interface ajouter formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
4.24 Interface liste cours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
4.25 Interface ajouter cours . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.26 Interface ajouter test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
4.27 Interface ajouter Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
4.28 Interface panneau utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
4.29 Interface acceuil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
4.30 Interface liste formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
4.31 Interface formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
4.32 Interface Panier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
4.33 Interface Payement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
4.34 Interface liste des formations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
4.35 Interface Discuter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
4.36 Interface évaluer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
4.37 Interface formateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
4.38 Interface passer test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
4.39 Interface Réponse test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

10
Liste des tableaux

2.1 Description textuelle du cas d’utilisation s’authentifier . . . . . . . . . . . . . . . 13

2.2 tableau descriptif du cas d’utilisation Ajouter cours . . . . . . . . . . . . . . . . 16
2.3 tableau descriptif du cas d’utilisation Modifier cours . . . . . . . . . . . . . . . 16
2.4 tableau descriptif du cas d’utilisation Ajouter formations . . . . . . . . . . . . . 18
2.5 tableau descriptif du cas d’utilisation supprimer formations . . . . . . . . . . . 18
2.6 tableau descriptif du cas d’utilisation Envoyer message . . . . . . . . . . . . . . 20
2.7 tableau descriptif du cas d’utilisation Ajouter test . . . . . . . . . . . . . . . . . 21
2.8 tableau descriptif du cas d’utilisation Consulter étudiant . . . . . . . . . . . . . 22
2.9 tableau descriptif du cas d’utilisation Consulter Avis . . . . . . . . . . . . . . . 23
2.10 tableau descriptif du cas d’utilisation Consulter articles . . . . . . . . . . . . . 23
2.11 tableau descriptif du cas d’utilisation Gérer cours admin . . . . . . . . . . . . . 27
2.12 tableau descriptif du cas d’utilisation Ajouter Article . . . . . . . . . . . . . . . 28
2.13 tableau descriptif du cas d’utilisation Modifier Article . . . . . . . . . . . . . . 29
2.14 tableau descriptif du cas d’utilisation Supprimer Article Article . . . . . . . . . 29
2.15 tableau descriptif du cas d’utilisation Répondre a message . . . . . . . . . . . . 31
2.16 tableau descriptif du cas d’utilisation Supprimer message . . . . . . . . . . . . . 31
2.17 tableau descriptif du cas d’utilisation Consulter statistiques . . . . . . . . . . . 32
2.18 tableau descriptif du cas d’utilisation Consulter Avis . . . . . . . . . . . . . . . 34
2.19 tableau descriptif du cas d’utilisation Gérer formateur . . . . . . . . . . . . . . 35
2.20 tableau descriptif du cas d’utilisation Gérer étudiants étudiant . . . . . . . . . . 37
2.21 tableau descriptif du cas d’utilisation Gérer formations . . . . . . . . . . . . . . 39
2.22 tableau descriptif du cas d’utilisation Gérer test . . . . . . . . . . . . . . . . . . 40
2.23 tableau descriptif du cas d’utilisation Envoyer message . . . . . . . . . . . . . . 42
2.24 tableau descriptif du cas d’utilisation consulter formation . . . . . . . . . . . . 44
2.25 tableau descriptif du cas d’utilisation Consulter cours . . . . . . . . . . . . . . . 45
2.26 tableau descriptif du cas d’utilisation passer test . . . . . . . . . . . . . . . . . 46
2.27 tableau descriptif du cas d’utilisation Consulter liste formateurs . . . . . . . . . 47
2.28 tableau descriptif du cas d’utilisation évaluer formation . . . . . . . . . . . . . 48
2.29 tableau descriptif du cas d’utilisation Consulter articles . . . . . . . . . . . . . 49
2.30 tableau descriptif du cas d’utilisation Envoyer message . . . . . . . . . . . . . . 51
2.31 tableau descriptif du cas d’utilisation Suprimer message . . . . . . . . . . . . . 51
2.32 tableau descriptif du cas d’utilisation Modifier profil . . . . . . . . . . . . . . . 52
2.33 tableau descriptif du cas d’utilisation Envoyer message . . . . . . . . . . . . . . 53

11
Chapitre 1

Présentation générale

1.1 Introduction
Dans ce présent chapitre, on va identifier le contexte général de notre projet. D’une part,
on va faire une présentation générale de l’organisme d’accueil qui consiste en une description
de l’entreprise. D’une autre part, on va présenter notre projet et spécifier les problèmes, les
objectifs et les solutions proposées.

1.2 Présentation de l’organisme d’accueil :

1.2.1 Présentation de la société :
Sprint Code est une Agence de développement web et de Communication Digitale, située
au cœur du centre-ville du Kef et Spécialisée dans les métiers de la communication, du web et
du design graphique.
Depuis sa création en 2019, Sprint Code a accompagné plusieurs clients opérant dans des sec-
teurs d’activité variés. Nous travaillons avec des entreprises, des professionnels, des institutions,
des artisans et des commerçants, installés dans le monde entier. Ils bénéficient de notre créativité
ergonomique, de notre maı̂trise des CMS open source et de notre puissance de travail.
Notre agence web offre à ses clients une large palette de services web professionnels de haute
qualité. Nous proposons une approche complète d’accompagnement, allant de la stratégie de
communication digitale à la réalisation et la diffusion de vos projets internet en définissant une
ligne de conduite bien claire.
Sprint Code s’engage à améliorer votre image de marque, en créant un site internet profession-
nel sur mesure : site vitrine, site de services, site e-catalogue, site e-commerce, site spécifique,
Application web . . .
Nous vous offrons un service professionnel, complet, rapide et personnalisé et nous serons tou-
jours à votre disposition pour le suivi,la maintenance et l’évolution de vos solutions.

2
 Figure 1.1 – Logo Sprint Code

1.2.2 Equipe :
Nous mettons à votre disposition une équipe jeune, dynamique et créative afin de mieux
répondre à vos ambitions.
Notre équipe est composée des spécialistes du web : graphistes, analyste, développeurs, web-
marqueteurs,commerciaux, responsable projet, rédacteurs référenceur.
Toute l’équipe Sprint Code vous accueille dans le monde des nouvelles technologies.

Figure 1.2 – Organigramme de l’organisme

1.2.3 Services :
Développement Web :

— Création site web.

— Création site Vitrine.
— Création site E-commerce.
— Création site E-catalogue.
— Création site spécifique .

3
Développement des applications mobiles :

— Applications natives.
— Applications hybrides.

Sécurité Informatique

1.2.4 Objectifs :
— Objectifs à court terme :

Répondre aux besoins des clients avec un niveau de satisfaction +95% .

— Objectifs à moyen terme :

Notre entreprise veut avoir une part de 30% du marché tunisien et 90% du marché au nord
ouest dans les 3 premières années (2019-2022) .

— Objectifs à long terme :

Notre entreprise cherche à s’ouvrir sur le marché international.

1.2.5 marketing :
Notre technique de marketing actuelle et le marketing direct (prospection) et le télémarketing.
Nous somme entrain de chercher de financement pour élargir notre technique actuelle et faire
une campagne de marketing digital pour atteindre nos objectifs et par conséquence élargir notre
équipe de travail.

1.3 Cadre du projet :

1.3.1 Etude de l’existant :
MEDIA WORLD ACADEMY est une cabinet de formation professionnel privé qui a
pour but d’assurer aux salariés , employés ou demandeurs d’emploi, une formation destinée à
conforter, améliorer ou acquérir des connaissances professionnelles Qui vous offre un large choix
des formations accélérées,personnelle et professionnelles. Notre objectif principal est rendre les
formations professionnelles accessibles pour tout le monde.

4
1.3.2 Problématique :
C’est une phase primordiale qui se fait aprés l’étude de l’existant.Elle a pour objectif la
découverte des erreurs produites par l’utilisation manuelle à fin d’apporter les solutions conve-
nables.
— L’absance d’un site web qui peut définir le cabinet de formation.
— L’étudiant se déplace au cabinet pour s’inscrire au formation.
— L’etudiant ne peut pas être à jour avec les nouveautés de cabinet de formation.
— Absence d’un moyen pratique qui peut Faciliter le Communication entre l’administrateur
et ses étudiants.
— Étudier c’est forcément en présentiel ,il n’a pas l’option de l’éducation à distance.

1.3.3 Solutions proposées

Comme il n’y a pas de site web de la Cabinet de formation , nous allons créer un site web
qui vise à faciliter la relation avec les étudiants.
Offrir un établissement ouvert 24/24h.
Offrir aux étudiants et aux formateurs la possibilité d’inscription en ligne.
Offrir à l’administrateur la possibilité de publier toutes les informations concernant le cabinet.
Offrir aux étudiants les possibilités de poursuivre les cours.

Ce site comporte trois espaces :

Espace étudiant :

— S’inscrire.
— Contacter l’administrateur et les formateurs.
— Consulter les actualités.
— Consulter les cours.
— Passer des tests .
— Consulter les formations.
— Consulter les articles.

Espace administration :

— Gérer les formateurs.

— Gérer les étudiants.
— Gérer les contacts.
— Discuter avec les étudiants et les formateurs .
— Gérer les articles .
— Consulter les statistiques.
— Consulter les avis .
— Gérer les cours.
— Gérer les tests .

Espace formateur :

— Gérer les formations.

— Consulter les étudiants.

5
 — Discuter avec l’administrateur et les étudiants.
— Consulter les articles .
— Gérer les cours.
— Gérer les tests.

1.4 Démarche de développement adoptée

Dans le cadre de notre projet, nous options pour une modélisation basée sur le langage
UML en s’inspirant de la méthode processus unifié.Nous présentons cette modélisation dans
la section qui suit.

1.4.1 Présentation du langage UML

Le langage UML ( Unified Model Language ) est un langage de modélisation graphique à base
de pictogrammes Conçu pour fournir une méthode normalisée pour spécifier,visualise,modifier
et construire la conception d’un systéme.Il est couramment utilisé en développement logiciel et
en conception orienté objet.
UML est essentiellement un support de communication, qui facilite la représentation et
la compréhension de solution objet.Sa notion graphique permet d’exprimer visuellement une
solution object,ce qui facilite la compraison et l’évaluation des solutions.L’aspect de sa notion,
limite l’ambiguité et les incompréhensions.
Une façon d’UML mettre en oeuvre est considérer vues qui peuvent se superposer pour
collaborer à la définition du systéme.[1]
Nous distinguons deux types de vues :

Vue statique :

— Diagramme de cas d’utilisation : cas d’utilisation permet de structurer les besoins des
utilisateurs et les objectifs correspondant à un systéme, il identifie les utilisateurs du
systéme (Acteurs) et leurs interactions avec le systéme, et il permet de classer les ac-
teurs et structurer les objectifs du systéme.

— Diagramme de classe : est une collection d’éléments de modélisations statistiques, qui

montre la structure d’un modéle .

Vue dynamique :

— Diagramme de séquences : représentation d’une façon séquentielle du déroulement des

traitements et des interaction entre les éléments du systéme et ses acteurs qui servent à
servent à illustrer un cas d’utilisation.

1.4.2 Démarche de développement adopté

La conception de notre interface a été élaboré en suivant la démarche suivante :
L’élaborationdes diagrammes de cas d’utilisation. Cette étape a été réalisée suite à la spécification
fonctionnelle de l’application . Recensement des classes candidates et élaboration du diagramme

6
des classes. En fini par le dressage des diagrammes de séquences pour mettre en évidence in-
teractions entre les différents objects du systéme adoptés.
Comme nous l’avons indiqué ci-dessus ,nous nous basons sur une approche de modélisation
par activités qui s’inspire du processus unifié.Ces différentes activités sont décrites ci-aprés :
Expression des besoins : L’expression des besoins comme son nom l’indique , permet de définir
les différents besoins :

— Inventorier les besoins principaux et fournir une liste de leur fonction

— Recenser les besoins fonctionnels ( du point de vue de l’utilisateur ) qui conduisent à
l’élaboration des modéles de cas d’utilisation
— Appréhender les besoins non fonctionnels (technique) et livrer une liste des exigences.Le
modéle de cas d’utilisation présente le systéme du point de vue de l’utilisateur et
représente sous forme de cas d’utilisation et d’acteur, les besoins d’étudiants.

Analyse :

Dans cette phase nous cherchons à bien comprendre et à décrire d’une façon précise,les be-
soins des utilisateurs ou des étudiants (l’analyse des besoins).

Conception :

Dans cette phase nous apportons plus de détails à la solution et nous cherchons à clarifier
des aspects techniques tels que l’installation des différentes parties logicielles à installer .

Implémentation :

Vise au triple objectif de raffiner le modéle de conception générer le code source et les tests
unitaires associés intégrer le travail d’implémentation des différentes équipes travaillants en
paralléle.

Test :

Ils sont continuellement mis en oeuvre pendant le processus de développement.Il doivent également
comprendre des tests de non régressions essentiels dans tout processus incrémental.

1.5 Conclusion
Dans ce premier chapitre nous avons défini le champ de notre étude suivi d’une étude de
l’existant afin de préciser nos objectifs à atteindre ainsi la démarche de modélisation et de
développement à adopter.

7
Chapitre 2

Analyse et Spécification des besoins

2.1 Introduction
Dans ce chapitre , nous allons focaliser sur les fonctionnalités offertes par notre application,
en recensant les différents besoins fonctionnels qu’elle doit satisfaire et en les présentant à l’aide
de langage de modélisation UML .

2.2 Spécifications des besoins

La spécification de besoins constitue la phase de départ de toute application à développer
dans laquelle nous allons identifier les besoins de notre application . Nous distinguons des besoins
fonctionnels qui présentent les fonctionnalités attendues de notre application et les besoins non
fonctionnels pour éviter le développement d’une application insatisfaite et de trouver un accord
commun entre les spécialistes et les utilisateurs pour la réussite de notre projet .

2.2.1 Les besoins fonctionnels

Les besoins fonctionnels sont les besoins qui être satisfaits par des fonctionnalités fournies
par le systéme :
Administrateur

C’est l’acteur qui gére les fonctionnalités de l’application. Du fait l’application doit permettre
à l’administrateur :
— La Gestion des formateurs : l’admin peut consulter, modifier, supprimer, ajouter des
formateurs.
— La Gestion des étudiants : l’admin peut consulter,ajouter ,modifier, supprimer des étudiants.
— La Gestion des cours : l’admin peut consulter, modifier, supprimer, ajouter des cours.
— La Gestion des articles : l’admin peut consulter, modifier, supprimer, ajouter des articles.
— La Gestion des contacts : l’admin peut consulter, répondre, supprimer, un message.
— La Gestion des tests : l’admin peut ajouter,suprimer un test.

8
 — La Gestion des formations : l’admin peut consulter, modifier, supprimer, ajouter des
formations.
— La Gestion du statistique.
— La Gestion des avis :l’admin peut supprimer un avis.

— La gestion du profil : l’admin peut modifier son profil.

Formateur

L’application permettre au formateur :

— La Gestion des cours : le formateur peut ajouter, modifier , supprimer ou consulter le
cours .
— La Gestion des étudiants : le formateur peut consulter la liste des étudiants.
— La Gestion tests : le formateur peut ajouter,suprimer un test.
— La Gestion des contacts : le formateur peut envoyer un message a l’équipe et admin.

— La Gestion des avis : le formateur peut peut consulter les avis des étudiants au formation.
— La Gestion des articles : le formateur peut consulter les articles .
— La gestion du profil : le formateur peut modifier son profil.
Utilisateur

L’application permettre à l’utlilisateur de :

— S’inscrire : l’utilisateur peut d’abord inscrire .
— Gérer des messages : l’utilisateur peut envoyer des messages a l’admin .
— Consulter des actualités : l’utilisateur peut consulter les articles seulements .

Etudiant

Via l’application l’étudiant peut :

— Consulter cours : l’étudiant peut consulter le cours aprés le paiement .
— Discuter : l’étudiant peut discuter avec l’admin , formateur et l’équipe .
— Passer le test : l’étudiant peut passer un test .
— Consulter la liste des formateurs : l’étudiant peut consulter la liste des formateurs.
— évaluer les formations : l’étudiant peut évaluer la formation.
— La gestion du profil : l’étudiant peut modifier son profil.

2.2.2 Les besoins non fonctionnels

— La fiabilité : l’application doit être fiable. Elle ne doit pas causer des dommages
(matériels ou économiques) en cas de défaillance.
— La maintenance : les codes sources des modules dévoloppés doivent être identifiés et
compréhensibles pour pouvoir les maintenir d’une facon rapide et facile .
— La Sécurité : l’application doit être sécurisée par un login et passe word .
— L’ Ergonomie : l’interface de l’applicaton doit être ergonomique et simple à utiliser
pout tout type d’utilisateur .
— L’Extensibilité : la posibilité d’ajouter ou modifier des nouvelles fonctionnalités .

2.3 Prototype des interfaces

Un prototype est un modèle original qui possède toutes les qualités techniques et toutes les
caractéristiques de fonctionnement d’un nouveau produit. Dans le domaine de développement

9
des applications une technique est apparue intéressant : il s’agit du prototypage.Cette tech-
nique consiste à préparer quelques interfaces graphiques de l’application en utilisant un outil
de conception de prototypes afin de valider le choix du client cela nous permettra d’améliorer
et optimiser avant la réalisation pour éviter de se bloque dans des choix erronés qu’il lui serait
difficile de modifier une fois l’application crée.

2.4 Diagrammes de cas d’utilisation

Les diagrammes de cas d’utilisation a pour but de donner une vision globale sur les inter-
faces de futur application . C’est le premier diagramme UML constitué d’un ensemble d’acteurs
qui agit sur des cas d’utilisation et qui décrit sous la forme d’actions et des réactions, le com-
portement d’un système du point de vue utilisateur. Un cas d’utilisation représente une unité
significative de travail. Dans un diagramme de cas d’utilisation, les utilisateurs sont appelés
acteurs (actors), ils interagissent avec les cas d’utilisation (use cases) .

2.4.1 Le cas d’utilisation

Un cas d’utilisation est une unité cohérente représentant une fonctionnalité visible de
l’extérieur.Il eéalise un service de bout en bout, avec un déclenchement, un déroulement et
une fin, pour l’acteur qui l’initie. Un cas d’utilisation modélise donc un service rendu par le
systéme, sans imposer le monde de réalisation de service. [2]

2.4.2 Identificateurs des acteurs :

L’administrateur ,l’utilisateur, l’étudiants , Formateur sont les acteurs qui interagissent avec
notre projet .

— Administrateur : c’est le responsable de l’administration du site.

— Utilisateur : c’est l’étudiants , l’administrateur et le formateur.
— Etudiants : c’est l’acteur qu’il a inscrit au formtion.
— Formateur :anime des formations dans la salle de formation.

2.4.3 Diagramme de cas d’utilisation Global

Le diagramme suivant est un diagramme de cas d’utilisation global pour notre application.
Chaque usage que l’acteur fait du systéme est représenté par un cas d’utilisation. Chaque cas
d’utilisation réprésenté par une fonctionnalité qui lui est offerte afin de produire le résultat
escompté.

10
Figure 2.1 – Diagramme de cas d’utilisation global.

11
2.5 Diagramme de cas d’utilisation raffiné
Le raffinement est une opération nécessaire est fortement significative car elle va permettre
de mieux comprendre avec plus de détails les fonctionnalitésdu systéme .

2.5.1 Diagramme de cas d’utilisations’authentifier :

La figure 2.2 représente de cas d’utilisation d’authentification du chaque acteur avec une
description détaillée sous dessous :

Figure 2.2 – Diagramme de cas d’utilisation d’authentification

L’authentification est un processus permettant au systéme de s’assurer de la légitimité de

la demande d’accées faite par l’utilisateur afin d’autoriser l’accés des ressources du systéme.

Dans le tableau suivant nous présentons une description textuelle de la figure 2.2 :

Titre : Authentification
Objectif : Accéder aux espaces privés
Acteurs : Administrateur, Formateur , étudiant
Pré condition :
-l’utilisateur n’est pas encore authentifié .
-l’utilisateur lance la page d’authentification.
Post condition : Authentification validé et succès d’accès.
Scenario nominal :
1. L’utilisateur ouvre l’application.
2. L’utilisateur saisit ses droits d’accés et authentifié.

12
 3. Le systéme vérifie si les champs ne sont pas vides et que le format est valide .
4. Le systéme vérifie l’existance et la validité du compte dans la base de données.
5. Le systéme dirige l’acteur vers son espace de travail.
Scenario alternatif :
A. Les données ne sont pas compatibles avec le format demandé.
3. Le systéme affiche un message d’erreur .
B. Les données ne sont pas compatibles avec un compte dans la base de données ou il n’existe
pas .
4. Le systéme affiche un message d’erreur .

Table 2.1 – Description textuelle du cas d’utilisation s’authentifier

•Prototype de l’interface Authentification

La figure 2.3 réprésente l’interface d’authentification :

Figure 2.3 – Interface d’authentification

2.6 Diagramme détaillé de cas d’utilisation de formateur

La figure 2.4 si dessous représente les fonctionnalités de formateur avec leur descriptions
détaillée :

13
Figure 2.4 – Diagramme détaillé de cas d’utilisation de formateur

14
 Cette partie est dédiée a toute fonctionalité qu’il peut le faire un formateur.

2.6.1 Diagramme de cas d’utlilisation raffiné Gérer cours

Figure 2.5 – Diagramme de cas d’utilisation Gérer cours

* Description textuelle de cas d’utilisation Gérer cours

Dans le tableau suivant nous présentons une description textuelle ajouter cours de la figure
2.5 :

Titre : Ajouter cours

Objectif : Ajouter le cours pour suivre l’étudiant
Acteurs : Formateur
Pré condition :
Formateur authentifié
Post condition : Contenu ajouté
Scenario nominal :
1. Formateur demande d’ajouter un contenu du cours.
2. Le système affiche le formulaire .
3. Formateur remplit les champs et valide.
4. Le système vérifie les informations.
5. Le système enregistre le nouveau contenu du cours.

15
 Scenario alternatif : :
1. Si un champ est vide le système affiche un message d’erreur au formateur.

Table 2.2 – tableau descriptif du cas d’utilisation Ajouter cours

Dans le tableau suivant nous présentons une description textuelle modifier cours de la figure
2.8 :

Titre : modifier cours

Objectif : modifier cours
Acteurs : Formateur
Pré condition :
Formateur authentifié
Post condition : Contenu modifié
Scenario nominal :
1. Formateur demande la liste des cours .
2. Le système affiche la liste .
3. Le formateur recherche le cours .
4. Formateur remplit les champs et valide.
5. Le système enregistre le nouveau contenu du cours.

Table 2.3 – tableau descriptif du cas d’utilisation Modifier cours

•Prototype de l’interface Gérer cours

La figure 2.6 réprésente l’interface Gérer cours :

16
 Figure 2.6 – Interface Gérer cours

2.6.2 Diagramme de cas d’utilisation raffiné Gérer formations

Figure 2.7 – Diagramme de cas d’utilisation Gérer formations

* Description textuelle de cas d’utilisation ajouter formations

Dans le tableau suivant nous présentons une description textuelle ajouter formations de la
figure 2.7 :

Titre : Ajouter formations

Objectif : Ajouter la formations pour suivre l’étudiant

17
 Acteurs : Formateur
Pré condition :
Formateur authentifié
Post condition : Contenu ajouté
Scenario nominal :
1. Formateur demande d’ajouter une formation.
2. Le système affiche le formulaire .
3. Formateur remplit les champs et valide.
4. Le système vérifie les informations.
5. Le système enregistre la nouvelle formation.
Scenario alternatif :
1. Si un champ est vide le système affiche un message d’erreur au formateur.

Table 2.4 – tableau descriptif du cas d’utilisation Ajouter formations

Dans le tableau suivant nous présentons une description textuelle supprimer formations de
la figure 2.7 :

Titre : Supprimer formations

Objectif : Supprimer formations
Acteurs : Formateur
Pré condition :
Formateur authentifié
Post condition : Contenu supprimé
Scenario nominal :
1. Formateur demande la liste des formations .
2. Le système affiche la liste .
3. Le formateur recherche la formation à supprimé .
4. Le systéme affiche la formation.
5. Le formateur supprime la formation .

Table 2.5 – tableau descriptif du cas d’utilisation supprimer formations

•Prototype de l’interface Gérer formations

La figure 2.8 réprésente l’interface Gérer formations :

18
 Figure 2.8 – Interface Gérer formations

2.6.3 Diagramme de cas d’utilisation raffiné Discuter

Figure 2.9 – Diagramme de cas d’utilisation Discuter

* Description textuelle de cas d’utilisation Envoyer message

Dans le tableau suivant nous présentons une description textuelle Envoyer message de la fi-
gure 2.9 :

Titre : Envoyer message

Objectif : Envoyer message a l’admin et étudiant
Acteurs : Formateur
Pré condition :
Formateur connecté
Post condition : Le message a été envoyé
Scenario nominal :
1. Le formateur demande la liste des formations.
2. Le systéme affiche la liste.

19
3. Le formateur choisit la formation qui peut le discuter .
4. L’interface message est affiché.
5. Formateur envoie un message vers l’admin et étudiant.
6. Le message a été envoye avec succès.

Table 2.6 – tableau descriptif du cas d’utilisation Envoyer message

2.6.4 Diagramme de cas d’utilisation raffiné Gérer tests

Figure 2.10 – Diagramme de cas d’utilisation Gérer tests.

20
 * Description textuelle de cas d’utilisation Gérer test

Dans le tableau suivant nous présentons une description textuelle ajouter test de la figure
2.10 :

Titre : Ajouter un test

Objectif : l’étudiant teste ses conaissances .
Acteurs : Formateur
Pré condition : Formateur connecté
Post condition : Test ajouté.
Scenario nominal : :
1. Formateur demande d’ajouter un test .
2. Le systéme affiche le formulaire d’ajouter test .
3. Le formateur remplit le formulaire.
4. Le systéme ajoute le test a la base de donnés.

Scenario alternatif :

Table 2.7 – tableau descriptif du cas d’utilisation Ajouter test

•Prototype de l’interface Gérer test

La figure 2.11 réprésente l’interface Gérer tests :

Figure 2.11 – Interface Gérer test

2.6.5 Diagramme de cas d’utilisation raffiné Consulter étudiant

21
 Figure 2.12 – Diagramme de cas d’utilisation Consulter étudiant.

* Description textuelle de cas d’utilisation Consulter étudiant

Dans le tableau suivant nous présentons une description textuelle consulter étudiants de la
figure 2.12 :

Titre : Consulter étudiant

Acteurs : Formateur
Pré condition : Formateur connecté
Post condition : étudiant consulté
Scenario nominal :
1. Formateur demande de consulter la liste des étudiants.
2. Le système affiche la liste.

Table 2.8 – tableau descriptif du cas d’utilisation Consulter étudiant

2.6.6 Diagramme de cas d’utilisation raffiné Consulter avis :

Figure 2.13 – Diagramme des cas d’utilisation Consulter avis .

* Tableau descriptif du cas d’utilisation consulter les Avis

Dans le tableau suivant nous présentons une description textuelle consulter avis de la figure
2.13 :

22
 Titre : Consulter les avis
Objectif : Consulter les avis
Acteurs : formateur
Pré condition :
Post condition : Voir tous les avis
Scenario nominal :
1. Le formateur consulte la page d’acceuil .
2. Le formateur recherche la formation.
3. Le formateur choisit la formation puis consulte les avis.

Table 2.9 – tableau descriptif du cas d’utilisation Consulter Avis

2.6.7 Diagramme de cas d’utilisation raffiné Consulter articles :

Figure 2.14 – Diagramme de cas d’utilisation Consulter articles

* Tableau descriptif du cas d’utilisation Consulter articles

Dans le tableau suivant nous présentons une description textuelle consulter articles de la fi-
gure 2.14 :

Titre : Consulter articles

Objectif : cette interface permet à formateur de Consulter articles
Acteurs : formateur
Pré condition :

Post condition : le formateur Consulter les articles

Scenario nominal : :
1. Le formateur consulte la page d’acceuil.
2. Le systéme affiche la page d’acceuil .
3. le formateur Consulte les articles.

Table 2.10 – tableau descriptif du cas d’utilisation Consulter articles

23
 •Prototype de l’interface Consulter articles

La figure 2.15 réprésente l’interface Consulter articles :

Figure 2.15 – Interface Consulter article

2.7 Diagramme détaillé de cas d’utilisation d’adminis-

trateur
Le diagramme 2.16 représente le cas d’utilisation détaillé relatif à l’administrateur.

24
Figure 2.16 – diagramme détaillé de cas d’utilisation d’administrateur

25
2.7.1 Diagramme de cas d’utilisation raffiné Gérer cours :

Figure 2.17 – Diagramme de cas d’utilisation Gérer cours admin

* Description textuelle de cas d’utilisation Gérer cours

Dans le tableau suivant nous présentons une description textuelle de la figure 2.17 :

Titre : Ajouter cours

Objectif : Ajouter le cours pour suivre l’étudiant .
Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Contenus ajouté
Scenario nominal : :
1. L’admin demande d’ajouter un contenu du cours.
2. Le système affiche le formulaire .
3. L’admin remplit les champs et valide .
4. Le système vérifie les informations.
5. Le système enregistre le nouveau contenu du cours.

26
 Scenario alternatif : :
1. Si un champ est vide le système affiche un message d’erreur a l’admin.

Table 2.11 – tableau descriptif du cas d’utilisation Gérer cours admin

•Prototype de l’interface Gérer cours

La figure 2.18 réprésente l’interface Gérer cours :

Figure 2.18 – Interface Gérer cours

2.7.2 Diagramme de cas d’utilisation raffiné Gérer articles :

27
 Figure 2.19 – Diagramme de cas d’utilisation Gérer articles

* tableau descriptif du cas d’utilisation Ajouter Articles

Dans le tableau suivant nous présentons une description textuelle de la figure 2.19 :

Titre : Ajouter Articles

Objectif : Ajouter Articles pour suivre l’étudiant ,le formateur et l’utilisateur
Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Article ajouté
Scenario nominal :
1. L’admin demande d’ajouter un Article .
2. Le système affiche le formulaire .
3. L’admin remplit les champs et valide.
4. Le système vérifie les informations.
5. Le système enregistre le nouveau Article.
Scenario alternatif : :
1. Si un champ est vide le système affiche un message d’erreur a l’admin.

Table 2.12 – tableau descriptif du cas d’utilisation Ajouter Article

28
 * tableau descriptif du cas d’utilisation Modifier Article

Dans le tableau suivant nous présentons une description textuelle modifier article de la figure
2.19 :

Titre : Modifier Article

Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Article Modifié
Scenario nominal : :
1. L’admin demande de modifier l’article .
2. Le système affiche l’interface .
3. L’admin recherche a l’article a modifié .
4. Le systéme affiche l’article.
5. L’admin remplit les champs et valide
6. Le système vérifie les informations.
7. Le système enregistre le nouveau Article.

Table 2.13 – tableau descriptif du cas d’utilisation Modifier Article

* tableau descriptif du cas d’utilisation Supprimer Article

Dans le tableau suivant nous présentons une description textuelle supprimer article de la figure
2.19 :

Titre : Supprimer Article

Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Article Supprimé
Scenario nominal : :
1. L’admin demande la liste des articles.
2. L’interface affiche la liste.
3. L’admin recherche l’article a supprimer puis clique sur le bouton supprimer .
4. Le système affiche l’interface de confirmation supression.
5. L’admin confirme la supprission .

Table 2.14 – tableau descriptif du cas d’utilisation Supprimer Article Article

29
 •Prototype de l’interface Gérer articles

La figure 2.20 réprésente l’interface Gérer articles :

Figure 2.20 – Interface Gérer article

2.7.3 Diagramme de cas d’utilisation raffiné Gérer contact :

Figure 2.21 – Diagramme de cas d’utilisation Gérer contact.

* tableau descriptif du cas d’utilisation Répondre à un message

Dans le tableau suivant nous présentons une description textuelle répondre message de la figure
2.21 :

Titre : Répondre à un message

Objectif : Répondre l’ utilisateur.
Acteurs : Administrateur
Pré condition :
Admin connecté

30
 Post condition : Le message a été envoyer
Scenario nominal : :
1. L’admin consulte la liste des messages envoyés par l’utilisateur.
2. Admin choisie un message.
3. Admin envoie un message au créateur.
4.le message a été envoyé avec succès.

Table 2.15 – tableau descriptif du cas d’utilisation Répondre a message

* tableau descriptif du cas d’utilisation Supprimer message

Dans le tableau suivant nous présentons une description textuelle supprimer message de la
figure 2.21 :

Titre : Supprimer un message

Objectif : Supprimer un message
Acteurs : Administrateur
Pré condition :
Admin connecté
Post condition : Le message a été Supprimé
Scenario nominal : :
1. L’admin affiche la liste des message.
2. L’admin recherche le message à supprimer.
1. Admin choisit un message.
2. Admin suprime le message .

Table 2.16 – tableau descriptif du cas d’utilisation Supprimer message

31
 •Prototype de l’interface Gérer contact

La figure 2.22 réprésente l’interface Gérer contact :

Figure 2.22 – Interface Gérer contact

2.7.4 Diagramme de cas d’utilisation raffiné Consulter statistiques

Figure 2.23 – Diagramme de cas d’utilisation Consulter statistiques.

* tableau descriptif du cas d’utilisation consulter les statistiques

Dans le tableau suivant nous présentons une description textuelle de la figure 2.23 :

Titre : Consulter statistiques

Acteurs : Administrateur
Pré condition : Admin connecté
Post condition : Voir les statistiques du formations
Scenario nominal : :
1. L’administrateur clique sur statistique.
2. Le systéme renvoi la page statistique .
3. L’administrateur consulte les statistiques.

Table 2.17 – tableau descriptif du cas d’utilisation Consulter statistiques

32
 •Prototype de l’interface Consulter statistique

La figure 2.24 réprésente l’interface Consulter statistique :

Figure 2.24 – Interface Consulter statistique

2.7.5 Diagramme de cas d’utilisation raffiné Consulter avis :

Figure 2.25 – Diagramme de cas d’utilisation Consulter avis .

* Tableau descriptif du cas d’utilisation consulter les Avis

Dans le tableau suivant nous présentons une description textuelle de la figure 2.25 :

Titre : Supprimer les avis

Objectif : Supprimer les avis

33
 Acteurs : Administrateur
Pré condition : Admin connecté
Post condition : Voir tous les avis puis supprime .
Scenario nominal :
1. L’administrateur consulte la liste des avis.
2. L’administrateur choisit un avis afin de le supprimer.
3. Avis supprime est un message de succés est affiché .

Table 2.18 – tableau descriptif du cas d’utilisation Consulter Avis

2.7.6 Diagramme de cas d’utilisation raffiné Gérer formateur

Figure 2.26 – Diagramme de cas d’utilisation Gérer formateur

* Tableau descriptif du cas d’utilisation Gérer Formateur

Dans le tableau suivant nous présentons une description textuelle de la figure 2.26 :

Titre : Ajouter Formateur

Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Formateur ajouté
Scenario nominal : :
1. L’admin demande d’ajouter un formateur .
2. Le système affiche le formulaire .

34
 3. L’admin remplit les champs et valide.
4. Le système vérifie les informations.
5. Le système enregistre le nouveau formateur.
Scenario alternatif : :
1. Si un champ est vide le système affiche un message d’erreur a l’admin.

Table 2.19 – tableau descriptif du cas d’utilisation Gérer formateur

•Prototype de l’interface Gérer formateur

La figure 2.27 réprésente l’interface Gérer formateur :

35
 Figure 2.27 – Interface Gérer formateur

2.7.7 Diagramme de cas d’utilisation raffiné Gérer étudiants :

Figure 2.28 – Diagramme de cas d’utilisation Gérer étudiants

* Tableau descriptif du cas d’utilisation Gérer étudiants

Dans le tableau suivant nous présentons une description textuelle de la figure 2.28 :

Titre : Ajouter étudiant

Objectif : Ajouter étudiant

36
 Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : étudiant ajouter
Scenario nominal :
1. L’admin demande d’ajouter un étudiant.
2. Le système affiche le formulaire .
3. L’admin remplit les champs et valide .
4. Le système vérifie les informations.
5. Le système enregistre le nouveau étudiant.
Scenario alternatif :
1. Si un champ est vide le système affiche un message d’erreur a l’admin.

Table 2.20 – tableau descriptif du cas d’utilisation Gérer étudiants étudiant

•Prototype de l’interface Gérer étudiant

La figure 2.29 réprésente l’interface Gérer étudiant :

Figure 2.29 – Interface Gérer étudiant

37
2.7.8 Diagramme de cas d’utilisation raffiné Gérer formation

Figure 2.30 – Diagramme de cas d’utilisation Gérer formation.

* tableau descriptif du cas d’utilisation Gérer formation

Dans le tableau suivant nous présentons une description textuelle de la figure 2.30 :

Titre : Ajouter Formation

Objectif : Ajouter formation pour suivre l’étudiant ,le formateur et l’utilisateur
Acteurs : Administrateur
Pré condition :
Admin authentifié
Post condition : Formation ajouté
Scenario nominal : :
1. L’admin demande d’ajouter une formation.
2. Le système affiche la formulaire .
3. L’admin remplit les champs et valide.
4. Le système vérifie les informations.
5. Le système enregistre la nouvelle formation.

38
 Scenario alternatif : :
1. Si un champ est vide le système affiche un message d’erreur a l’admin.

Table 2.21 – tableau descriptif du cas d’utilisation Gérer formations

•Prototype de l’interface Gérer formations

La figure 2.31 réprésente l’interface Gérer formations :

Figure 2.31 – Interface Gérer formation

2.7.9 Diagramme de cas d’utilisation raffiné Gérer tests

39
 Figure 2.32 – Diagramme de cas d’utilisation Gérer tests.

* Description textuelle de cas d’utilisation Gérer test

Dans le tableau suivant nous présentons une description textuelle de la figure 2.32 :

Titre : Ajouter un test

Objectif : l’étudiant tester leur conaissance
Acteurs : Administrateur
Pré condition : Administrateur connecté
Post condition : Test ajouté.
Scenario nominal : :
1. L’Admin demande d’ajouter un test .
2. Le systéme affiche le formulaire d’ajouter test.
3. L’admin remplit le formulaire .
4. Le systéme ajoute le test a la base de donnés.

Table 2.22 – tableau descriptif du cas d’utilisation Gérer test

•Prototype de l’interface Gérer test

La figure 2.33 réprésente l’interface Gérer test :

40
 Figure 2.33 – Interface Gérer test

2.7.10 Diagramme de cas d’utilisation raffiné Discuter

Figure 2.34 – Diagramme de cas d’utilisation Discuter

* Description textuelle de cas d’utilisation Envoyer message

Dans le tableau suivant nous présentons une description textuelle Envoyer message de la fi-
gure 2.34 :

Titre : Envoyer message

Objectif : Envoyer message au formateurs et étudiants
Acteurs : Administrateur
Pré condition :
Administrateur connecté
Post condition : Le message a été envoyé
Scenario nominal : :
1. L’admin demande la liste des formations.

41
 2. Le systéme affiche la liste.
3. L’admin choisit la formation qui peut le discuter .
4. L’interface message affiche.
5. L’admin envoie un message vers le formateur et étudiant.
6. Le message a été envoyé avec succès.

Table 2.23 – tableau descriptif du cas d’utilisation Envoyer message

2.8 Diagramme détaillé de cas d’utilisation d’etudiant

La figure 2.35 si dessous représente les fonctionnalités d’étudiant avec leur descriptions
détaillée :

42
Figure 2.35 – Diagramme détaillé de cas d’utilisation d’étudiant

43
2.8.1 Diagramme de cas d’utilisation raffiné Consulter formations :

Figure 2.36 – Diagramme de cas d’utilisation consulter formation

* Tableau descriptif du cas d’utilisation consulter formation

Dans le tableau suivant nous présentons une description textuelle de la figure 2.36 :

Titre : Consulter formation

Objectif : cette interface permet à l’étudiant de consulter les formations disponible
Acteurs : étudiant
Pré condition :

Post condition : l’étudiant consulte les listes des formations

Scenario nominal : :
1. L’étudiant demande la page d’acceuil .
2. Le systéme affiche l’interface d’acceuil.
3. L’étudiant consulte les formations disponible.
4. Si il y a plusieurs formations, l’étudiant peut cherche a la formation .
5. le système affiche la formation.

Table 2.24 – tableau descriptif du cas d’utilisation consulter formation

2.8.2 Diagramme de cas d’utilisation raffiné Consulter cours :

44
 Figure 2.37 – Diagramme de cas d’utilisation Consulter cours

* Tableau descriptif du cas d’utilisation Consulter cours

Dans le tableau suivant nous présentons une description textuelle de la figure 2.37 :

Titre : Payement formation pour Consulter cours

Objectif : cette interface permet à l’étudiant de consulter le cours de formation
Acteurs : étudiant
Pré condition :
l’étudiant est authentifié
Post condition : l’étudiant consulté le cour de formation
Scenario nominal : :
1. L’étudiant demande les listes des formations .
2. Le systéme affiche la liste.
3. L’étudiant choisit une formations puis cliquer sur payement formation.
4. Le systéme affiche la page de payement.
5. L’étudiant confirme la payement .
6. Le cours affiché .

Table 2.25 – tableau descriptif du cas d’utilisation Consulter cours

45
 •Prototype de l’interface Pyer formation

La figure 2.38 réprésente l’interface payer formation :

Figure 2.38 – Interface payer formation

2.8.3 Diagramme de cas d’utilisation raffiné passer test :

Figure 2.39 – Diagramme de cas d’utilisation passer test

* Tableau descriptif du cas d’utilisation passer test

Dans le tableau suivant nous présentons une description textuelle de la figure 2.39 :

Titre : passer test

Objectif : cette interface permet à l’étudiant de passer test pour tester leur conaissance
Acteurs : étudiant
Pré condition :
l’étudiant est authentifié
Post condition : l’étudiant passe le test
Scenario nominal : :
1. L’étudiant demande l’interface de test .
2. Le systéme affiche l’interface du test.
3. l’étudiant passe le test .
4. l’étudiant reçoit son score.

Table 2.26 – tableau descriptif du cas d’utilisation passer test

46
2.8.4 Diagramme de cas d’utilisation raffiné Consulter liste forma-
teur :

Figure 2.40 – Diagramme de cas d’utilisation consulter liste formateur

* Tableau descriptif du cas d’utilisation consulter liste formateur

Dans le tableau suivant nous présentons une description textuelle de la figure 2.40 :

Titre : Consulter liste formateur

Objectif : cette interface permet à l’étudiant de consulter la liste des formateurs
Acteurs : étudiant
Pré condition :
l’étudiant est authentifié
Post condition : l’étudiant consulte la liste des formateurs
Scenario nominal : :
1. L’étudiant demande l’interface des formateurs .
2. Le systéme affiche l’interface des formateurs.
3. l’étudiant consulte la liste des formateurs.

Table 2.27 – tableau descriptif du cas d’utilisation Consulter liste formateurs

•Prototype de l’interface consulter formateur

La figure 2.41 réprésente l’interface consulter formateur :

Figure 2.41 – Interface consulter formateur

47
2.8.5 Diagramme de cas d’utilisation raffiné évaluer formations :

Figure 2.42 – Diagramme de cas d’utilisation évaluer formation

* Tableau descriptif du cas d’utilisation évaluer formation

Dans le tableau suivant nous présentons une description textuelle de la figure 2.42 :

Titre : évaluer formation

Objectif : cette interface permet à l’étudiant d’évaluer formation
Acteurs : étudiant
Pré condition :
Formtion payé
Post condition : l’étudiant évalue formation.
Scenario nominal : :
1. L’étudiant demande l’interface des formations .
2. Le systéme affiche l’interface des formations.
3. l’étudiant évalue la formation .

Table 2.28 – tableau descriptif du cas d’utilisation évaluer formation

2.8.6 Diagramme de cas d’utilisation raffiné Consulter articles :

48
 Figure 2.43 – Diagramme de cas d’utilisation Consulter articles

* Tableau descriptif du cas d’utilisation Consulter articles

Dans le tableau suivant nous présentons une description textuelle de la figure 2.43 :

Titre : Consulter articles

Objectif : cette interface permet à l’étudiant de Consulter articles
Acteurs : étudiant
Pré condition :

Post condition : l’étudiant Consulter les articles

Scenario nominal : :
1. L’étudiant demande la page d’acceuil .
2. Le systéme affiche la page d’acceuil .
3. l’étudiant Consulte les articles .

Scenario alternatif : :

Table 2.29 – tableau descriptif du cas d’utilisation Consulter articles

•Prototype de l’interface Consulter article

La figure 2.44 réprésente l’interface Consulter article :

49
 Figure 2.44 – Interface Consulter article

2.8.7 Diagramme de cas d’utilisation raffiné Discuter :

Figure 2.45 – Diagramme de cas d’utilisation Discuter.

* tableau descriptif du cas d’utilisation Discuter

Dans le tableau suivant nous présentons une description textuelle Envoyer message de la
figure 2.45 :

Titre : Envoyer message

Objectif : Envoyer message a l’admin et formateur
Acteurs : étudiant

50
 Pré condition :
étudiant connecté
Post condition : Le message a été envoyé
Scenario nominal : :
1. L’étudiant demande la liste des formations.
2. Le systéme affiche la liste.
3. L’étudiant choisit la formation qui peut le discuter .
4. L’interface message affiche.
5. L’étudiant envoie un message vers l’admin et formateur.
6. Le message a été envoyé avec succès.

Table 2.30 – tableau descriptif du cas d’utilisation Envoyer message

* tableau descriptif du cas d’utilisation Suprimer à message

Dans le tableau suivant nous présentons une description textuelle de la figure 2.45 :

Titre : Suprimer un message

Objectif : Suprimer un message
Acteurs : étudiant
Pré condition :
étudiant connecté
Post condition : Le message a été Suprimé
Scenario nominal : :
1. étudiant choisit un message.
2. étudiant suprime message.

Scenario alternatif :

Table 2.31 – tableau descriptif du cas d’utilisation Suprimer message

51
2.8.8 Diagramme de cas d’utilisation Modifier profil

Figure 2.46 – Diagramme de cas d’utilisation Modifier profil.

* tableau descriptif du cas d’utilisation Modifier profil

Dans le tableau suivant nous présentons une description textuelle de la figure 2.46 :

Titre : Modifier profil

Objectif : Profil modifié
Acteurs : Administrateur, formateur, étudiant
Pré condition :
— Formateur connecté .
— Administrateur connecté .
— Etudiant connecté .

Post condition : Le profil a été modifié

Scenario nominal : :
1. L’utilisateur clique sur modifier profil.
2. Le systéme affiche le formulaire .
3. L’utilisateur remplit le formulaire puis Modifier .

Table 2.32 – tableau descriptif du cas d’utilisation Modifier profil

2.9 Diagramme de cas d’utilisation Contacter admin

Figure 2.47 – Diagramme de cas d’utilisation Contacter admin.

52
 * tableau descriptif du cas d’utilisation contacter admin

Dans le tableau suivant nous présentons une description textuelle Envoyer message de la
figure 2.47 :

Titre : Envoyer message

Objectif : Envoyer message a l’admin
Acteurs : utilisateur
Pré condition :
— L’utilisateur est sur le site public de la cabinet.
— L’utilisateur est en train de consulter la page de contact.
— L’utilisateur envoie un message.

Post condition : Le message a été envoyé

Scenario nominal : :
1. L’utilisateur clique sur contact depuis le menu principale du site public.
2. Le systéme affiche le formulaire .
3. L’utilisateur remplit le formulaire puis envoyer .

Table 2.33 – tableau descriptif du cas d’utilisation Envoyer message

•Prototype de l’interface Contacter admin

La figure 2.48 réprésente l’interface Contacter admin :

Figure 2.48 – Interface Contacter admin

53
2.10 Conclusion
Dans ce chapitre, on a énuméré les besoins fonctionnels et les besoins Non fonctionnels
de ce projet. De plus, on a élaboré les différents diagrammes de cas d’utilisation ainsi que leurs
descriptions textuelles et leurs maquettes IHM. Dans le chapitre suivant, nous allons procéder
la modélisation de ces fonctionnalités par une étude conceptuelle afin de mieux comprendre le
développement de cette application.

54
Chapitre 3

Conception

3.1 Introduction
La conception est la phase la plus importante de cycle de développement permettant aux
concepteurs de décrire un systéme d’information avec des diagrammes illustrés avant de le
développer, ainsi que aprés avoir spécifie les besoins fonctionnels et non fonctionnels de l’appli-
cation, nous faisons la conception de différentes parties du projet moyennant des diagrammes
crées avec le langage UML .

3.2 Les diagrammes de séquences

3.2.1 Définition et composition
Le diagramme de séquences est un diagramme UML ( Unified Modeling Langage ), permet
de cacher les interactions d’objets dans le cadre d’un scénario d’une utilisation, un souci de
simplification, on présente l’acteur principal à gauche du diagramme et les acteurs secondaires
éventuels à droite du systéme. Le but étant de décrire comment se déroulent les actions entre
les acteurs et les objets.

— Acteurs : Un acteur représente un rôle joué par une entité ”personne ou une chose
extérieur au systéme étudié ” qui interagit avec le systéme étudié. Le même être humain
peut avoir alternativement plusieurs rôles (Administrateur, étudiants, etc.).

— Objets : Les objets sont des entités appartenant au systéme les objets interviennent
dans l’interaction(envoi de message entre objets).

— Messages : Les objets communique en échangeant des messages représentés sous la

forme des fléches.
Les messages sont étiquetés par le nom de l’opération ou du signal invoqué.

55
3.2.2 Diagramme de séquence d’authentification
•Acteurs : administrateur,étudiants,formateurs.

Lorsque l’acteur demande l’accés à l’application , il doit tout d’abord saisir son adresse e-
mail et son mot de passe.

Ce scénario est présenté par le diagramme de séquence de la figure 3.1 suivante :

Figure 3.1 – Diagramme de Séquence S’authentifier

— L’administrateur demande de s’authentifier.

— L’interface d’authentification demande l’email et mot de passe.
— L’utilisateur saisit l’adresse email et mot de passe.
— L’administrateur saisit le login et le mot de passe.
— Le contrôleur authentifier vérifie l’email et le mot de passe.
— Si l’authentification est réussie, la page d’acceuil est affichée. Sinon l’authentification est
échouée.

56
3.2.3 Diagramme de classe de conception S’authentifier

Figure 3.2 – Diagramme de classe de conception S’authentifier

3.2.4 Diagramme de séquence inscription étudiants

•Acteurs : étudiants

Pour fait l’inscription, le systéme vérifie d’abord si les données saisies par l’étudiant ne sont
pas déjà existés, si la vérification se termine avec succés l’étudiant peut acccéder à votre espace
par son adresse e-mail et son mot de passe.

Le diagramme suivant la figure 3.3 présente l’enchainement de la phase l’inscription d’étudiants :

57
 Figure 3.3 – Diagramme de séquence inscription

— L’utilisateur demande le formulaire d’inscription.

— L’interface inscription affiche le formulaire d’inscription.
— L’utilisateur register les données d’inscription .
— Le contrôleur inscription executer les données.
— Le modele inscription vérifie les donéées
— Si l’inscription est valide, la page d’acceuil est affiché. Sinon l’inscription est échouée.

3.2.5 Diagramme de classe de conception Inscription étudiants

58
 Figure 3.4 – Diagramme de classe de conception S’inscrire

3.3 Diagramme de séquence Gérer formateurs :

3.3.1 Diagramme de séquence ajouter formateur
•Acteurs : Administrateur

Pour ajouter un formateur l’administrateur doit remplir les informations des formateurs et
par la suite cliqué sur ajouter, un message de validation s’affiche .
Le diagramme suivant 3.5 présente l’enchainement de la phase Ajouter formateur

59
 Figure 3.5 – Diagramme de séquence ajouter formateur

— L’administrateur demande le formulaire d’ajout.

— L’interface formateur affiche le formulaire demandé.
— L’administrateur remplit le formulaire puis ajouter.
— Le contrôleur formateur exécute les données .
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon l’ajout est effectué est un message de succés est affiché.

60
3.3.2 Diagramme de séquence modifier formateur
•Acteurs : Administrateur

Pour la modification d’un formateur l’administrateur doit consulter la liste des formateurs
puis rechercher et sélectionne le formateur a modifier et par la suite changer les informations
puis une message de validation s’affiche puis l’administrateur confirme la modification.Une fois
le formateur a modifié le message de succés il va être affiché.
Le diagramme suivant 3.6 présente l’enchainement de la phase de modification formateur

Figure 3.6 – Diagramme de séquence Modifier formateur

— L’administrateur demande d’afficher la liste des formateurs.

— L’interface affiche la liste des formateurs.
— L’administrateur recherche puis choisit le formateur a modifier.
— L’administrateur update les données.
— Le modéle formateur vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.

61
 — Sinon modification effectué est un message de succéé est affiché.

3.3.3 Diagramme de séquence supprimer formateur

•Acteurs : Administrateur

Pour la suppression d’un formateur l’administrateur doit consulter la liste des formateurs puis
rechercher et sélectionne le formateur approprié et par la suite une message de validation s’af-
fiche puis l’administrateur confirme la suppression.Une fois le formateur a supprimé le message
de succés il va être affiché.
Le diagramme suivant 3.7 présente l’enchainement de la phase de supprimer formateur

Figure 3.7 – Diagramme de séquence supprimer formateur

62
 — L’administrateur demande d’afficher la liste des formateurs.
— L’interface affiche la liste des formateurs.
— L’administrateur recherche puis choisit le formateur a supprimé.
— L’interface formateur affiche la page de confirmation.
— L’administrateur confirme la supression.
— Le contrôleur formateur envoie la requete à le modéle formateur.
— Le modéle formateur supprime le formateur et un message de succée est affiché.

3.3.4 Diagramme de classe de conception Gérer formateur

Figure 3.8 – Diagramme de classe de conception Gérer formateur

3.4 Diagramme de séquence Gérer formations :

3.4.1 Diagramme de séquence ajouter formation
•Acteurs : Administrateur

Pour ajouter une formation l’administrateur doit remplir les champs du formation et par la
suite cliqué sur ajouter, un message de validation s’affiche .
Le diagramme suivant 3.9 présente l’enchainement de la phase Ajouter formation

63
 Figure 3.9 – Diagramme de séquence ajouter formation

— L’administrateur demande le formulaire d’ajout.

— L’interface formation affiche le formulaire demandé.
— L’administrateur remplit le formulaire puis ajouter.
— Le modéle formation vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon l’ajout est effectué et un message de succé est affiché.

64
3.4.2 Diagramme de séquence modifier formation
•Acteurs : Administrateur

Pour la modification d’une formation l’administrateur doit consulter la liste des formations
puis rechercher et sélectionne la formation a modifier et par la suite changer les informations
puis une message de validation s’affiche puis l’administrateur confirme la modification.Une fois
la formation a modifié le message de succés il va être affiché.
Le diagramme suivant 3.10 présente l’enchainement de la phase de modifier formation

Figure 3.10 – Diagramme de séquence Modifier formation

— L’administrateur demande d’afficher la liste des formations.

— L’interface affiche la liste des formations.
— L’administrateur recherche puis choisit la formation a modifier.
— L’administrateur remplit le formulaire puis ajoute.
— Le modéle formation vérifie les champs.
— Si un champ est vide alors, le systéme affiche un message d’erreur.

65
 — Sinon la modification est effectué est un message de sucée est affiché.

3.4.3 Diagramme de séquence supprimer formation

•Acteurs : Administrateur

Pour la suppression d’une formation l’administrateur doit consulter la liste des formations
puis rechercher et sélectionne la formation approprié et par la suite une message de validation
s’affiche puis l’administrateur confirme la suppression.Une fois la formation a supprimé le mes-
sage de succés il va être affiché.
Le diagramme suivant 3.11 présente l’enchainement de la phase de supprimer formation

Figure 3.11 – Diagramme de séquence supprimer formation

66
 — L’administrateur demande d’afficher la liste des formations.
— L’interface affiche la liste des formations.
— L’administrateur recherche puis choisit la formation a supprimé.
— L’interface formation affiche la page de confirmation.
— L’administrateur confirme la supression.
— Le contrôleur formation envoie la requete à le modéle formation.
— Le modéle formation supprime le formateur et un message de succée est affiché.

3.4.4 Diagramme de classe de conception Gérer formation

Figure 3.12 – Diagramme de classe de conception Gérer formation

3.5 Diagramme de séquence Gérer Articles :

3.5.1 Diagramme de séquence ajouter Article
•Acteurs : Administrateur

Pour ajouter un article l’administrateur doit remplir les champs d’aricle et par la suite cliqué
sur ajouter, un message de validation s’affiche .
Le diagramme suivant 3.13 présente l’enchainement de la phase Ajouter article

67
 Figure 3.13 – Diagramme de séquence ajouter article

— L’administrateur demande le formulaire d’ajout.

— L’interface article affiche le formulaire demandé.
— L’administrateur remplit le formulaire puis ajouter.
— Le modéle article vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon article ajouté est un message de succée est affiché.

68
3.5.2 Diagramme de séquence modifier article
•Acteurs : Administrateur

Pour la modification d’un article l’administrateur doit consulter la liste des articles puis re-
chercher et sélectionne l’article a modifier et par la suite changer les informations puis une
message de validation s’affiche puis l’administrateur confirme la modification.Une fois l’article
a modifié le message de succés il va être affiché.
Le diagramme suivant 3.14 présente l’enchainement de la phase de modifier article

Figure 3.14 – Diagramme de séquence Modifier article

— L’administrateur demande d’afficher la liste des articles.

— L’interface affiche la liste des articles.
— L’administrateur recherche puis choisit l’article a modifier.
— L’administrateur remplit le formulaire puis ajouter.
— Le modéle article vérifie les champs.
— Si un champ est vide alors, le systéme affiche un message d’erreur.
— Sinon la modification effectué avec succée .

69
3.5.3 Diagramme de séquence supprimer article
•Acteurs : Administrateur

Pour la suppression d’un article l’administrateur doit consulter la liste des articles puis re-
cherche et sélectionne l’article approprié et par la suite une message de validation s’affiche puis
l’administrateur confirme la suppression.Une fois l’article a supprimé le message de succés il va
être affiché.
Le diagramme suivant 3.15 présente l’enchainement de la phase de supprimer article

Figure 3.15 – Diagramme de séquence supprimer article

70
 — L’administrateur demande d’afficher la liste des articles.
— L’interface affiche la liste des articles.
— L’administrateur recherche puis choisit l’article a supprimé.
— L’interface article affiche la page de confirmation.
— L’administrateur confirme la supression.
— Le contrôleur article envoie la requete à le modéle article.
— Le modéle article supprime l’article et un message de succés est affiché.

3.5.4 Diagramme de classe de conception Gérer article

Figure 3.16 – Diagramme de classe de conception Gérer article

3.6 Diagramme de séquence Gérer Statistiques :

3.6.1 Diagramme de séquence afficher statistique
•Acteurs : Administrateur

Le diagramme suivant 3.17 présente l’enchainement de la phase afficher statistique

71
 Figure 3.17 – Diagramme de séquence Gérer statistique

— L’administrateur demande d’afficher les statistiques.

— L’interface statistique envoyer demande au contrôleur statistique.
— Le contrôleur statistique envoie les requete d’affichage à modéle statistique et vérifie
statistique.
— Le modéle statistique effectué l’affichage.
— L’interface statistique affiche les statistique.

3.7 Diagramme de séquence Gérer Cours :

3.7.1 Diagramme de séquence ajouter cours
•Acteurs : Administrateur , Formateur

Pour ajouter un cours l’administrateur et le formateur doivent remplir les champs du cours
et par la suite cliqur sur ajouter, un message de validation s’affiche.
Le diagramme suivant 3.18 présente l’enchainement de la phase Ajouter cours

72
 Figure 3.18 – Diagramme de séquence ajouter cours

— Le formateur demande le formulaire d’ajout.

— L’interface cours affiche le formulaire demandé.
— Le formateur remplit le formulaire puis ajoute le cours.
— Le modéle cours vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon le cours est ajouté avec succée.

73
3.7.2 Diagramme de séquence afficher cours
•Acteurs : Administrateur , formateur

Le diagramme suivant 3.19 présente l’enchainement de la phase afficher cours

Figure 3.19 – Diagramme de séquence afficher cours

— Le formateur demande la liste des cours.

— L’interface cours affiche le formulaire demandé.
— Le formateur choisit le cours pour afficher.
— Le contrôleur cours envoie les requete d’affichage à modéle cours.
— Le modéle cours effectue l’affichage.
— L’interface cours affiche le cours.

3.7.3 Diagramme de séquence modifier cours

•Acteurs : Administrateur , formateur

Pour modifier un cours l’administrateur et le formateur doivent consulter la liste des cours
rechercher et sélectionner le cours a modifier et par la suite changer les informations puis

74
une message de validation s’affiche puis l’administrateur et formateur confirment la modifica-
tion.Une fois le cours est modifié .un message de succés va être affiché.
Le diagramme suivant 3.20 présente l’enchainement de la phase de modifier cours

Figure 3.20 – Diagramme de séquence Modifier cours

— Le formateur demande d’afficher la liste des cours.

— L’interface affiche la liste des cours.
— Le formateur rechercher puis choisit le cours a modifier.
— Le formateur remplit le formulaire puis ajouter.
— Le modéle cours vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon cours est modifié avec succé .

3.7.4 Diagramme de séquence supprimer cours

•Acteurs : Administrateur, formateur

75
Pour supprimer un cours l’administrateur et le formateur doivent consulter la liste des cours
puis rechercher et sélectionner le cours approprié et par la suite un message de validation
s’affiche puis l’administrateur et le formateur confirment la suppression.Une fois le cours est
supprimé. Un message de succés il va être affiché.
Le diagramme suivant 3.21 présente l’enchainement de la phase de supprimer cours

Figure 3.21 – Diagramme de séquence supprimer cours

76
 — Le formateur demande d’afficher la liste des cours.
— L’interface affiche la liste des cours.
— Le formateur chercher puis choisit le cours a supprimé.
— L’interface cours affiche la page de confirmation.
— Le formateur confirme la supression.

3.7.5 Diagramme de classe de conception Gérer cours

Figure 3.22 – Diagramme de classe de conception Gérer cours

3.8 Diagramme de séquence Gérer tests :

3.8.1 Diagramme de séquence creer test
•Acteurs : Administrateur , Formateur

Pour ajouter un test il faut d’abord creer le titre et la description du test puis les questions et
les réponses pour chaque question . Une fois le test crée un message de validation s’affiche.
Le diagramme suivant 3.23 présente l’enchainement de la phase de création d’un test

77
 Figure 3.23 – Diagramme de séquence creer test

— Le formateur demande le formulaire d’ajouter test.

— L’interface test affiche la formulaire demandé.
— Le formateur remplit le formulaire de saisir le titre et la description du test puis ajouter.
— Le modéle test vérifie les champs.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon test ajouté.

78
3.8.2 Diagramme de séquence creer question
•Acteurs : Administrateur , Formateur

Aprés d’ajouter les descriptions des tests le formateur et l’administrateur vont écrire les ques-
tions et les réponses du test
Le diagramme suivant 3.24 présente l’enchainement de la phase de création des questions

79
Figure 3.24 – Diagramme de séquence creer question

80
 — Le formateur demande le formulaire de remplir les questions et les réponses.
— L’interface question affiche la formulaire demandé.
— Le formateur remplit la formulaire de saisir les questions et cocher les réponses puis
ajouter.
— Le modéle questions vérifie d’abord les champs du question.
— Si un champ vide alors, le systéme affiche un message d’erreur. .
— Sinon question effectuée. .
— Le modéle question vérifie si les réponses cocher.
— si les données sont corrects le modéle question fait l’enregistrement et un message de
succée est affiché .
— sinon échec d’ajout.

3.8.3 Diagramme de séquence supprimer test

•Acteurs : Administrateur, formateur

Pour supprimer un test l’administrateur et le formateur doivent consulter la liste des test
puis chercher et sélectionner le test approprié et par la suite un message de validation s’affiche
puis l’administrateur et le formateur confirment la suppression.Une fois le test est supprimé.
Un message de succés il va être affiché.
Le diagramme suivant 3.25 présente l’enchainement de la phase de supprimer test

81
 Figure 3.25 – Diagramme de séquence supprimer test

— Le formateur demande d’afficher la liste des tests.

— L’interface affiche la liste des tests.
— Le formateur rechercher puis choisit le test a supprimé.
— L’interface test affiche la page de confirmation.
— Le formateur confirme la supression.
— Le contrôleur test envoie la requete à le modéle test.
— Le modéle test supprime le test et un message de succée est affiché.

3.8.4 Diagramme de classe de conception Gérer tests

82
 Figure 3.26 – Diagramme de classe de conception Gérer test

3.9 Diagramme de séquence Contacter admin :

3.9.1 Diagramme de séquence Envoyer message
•Acteurs : Utilisateur , étudiant

Le diagramme suivant 3.27 présente l’enchainement de la phase d’envoyer message à l’ad-

ministrateur

83
 Figure 3.27 – Diagramme de séquence envoyer message

— L’utilisateur demande le formulaire de contact.

— L’interface contact affiche le formulaire de contact.
— L’utilisateur remplit le formulaire puis envoyer.
— Le modéle contact vérifie les champs.
— Si les champs non valide alors, le systéme affiche un message d’erreur.
— Sinon message est envoyé avec succée.

84
3.9.2 Diagramme de classe de conception Gérer contact admin

Figure 3.28 – Diagramme de classe de conception Gérer contact admin

3.10 Diagramme de séquence Consulter cours

•Acteurs : étudiant

Pour consulter le cour il faut d’abord faire le payement Le diagramme suivant 3.29 présente
l’enchainement de la phase de la phase payement cours

85
 Figure 3.29 – Diagramme de séquence consulter cour

— L’étudiant demande la liste des formations.

— L’interface formation affiche la formulaire demandé.
— Létudiant choisit la formation a acheter.
— L’interface formation affiche la page de payement .
— L’étudiant faire la payement.
— Payement est effectué avec succée.

3.11 Diagramme de séquence passer tests

•Acteurs : étudiant

Le diagramme suivant 3.30 présente l’enchainement de la phase de la phase passer tests

86
 Figure 3.30 – Diagramme de séquence passer tests

— L’étudiant demande la liste des tests.

— L’interface test affiche la formulaire demandé.
— Létudiant choisit le test.
— L’interface test affiche la page de test .
— L’étudiant faire le test.
— Le modéle test vérifie si un champ vide.
— Si un champ vide alors, le systéme affiche un message d’erreur.
— Sinon test est passé avec succes et le score est affiché .

87
3.12 Diagramme de classe métier
3.12.1 Définition
Le diagramme de classe est un schéma utilisé en génie logiciel pour présenter les classes
et les interfaces des systéme ainsi que les différentes relations entre celles-ci. Une classe décrit
les responsabilités,le comportement et le type d’un ensemble d’objets. Les classes sont utilisées
dans la programation orientée objet. Une classe est une description d’un groupe d’objets par-
tageant un ensemble commun de propriétés(les attributs), de comportements(les opérations
ou méthodes) et de relations avec d’autres objects (les associations et les agrégations).Elles
permettent de modéliser un programme et ainsi de découper une tache complexe en plusieurs
petits travaux simples.

3.12.2 La composition d’un diagramme de classe

En générale un diagramme de classe peut contenir les éléments suivants :

— Les classes :

Une classe est caractérisée par des propriétés(nom,attributs et méthodes) communes

à un ensemble d’objets et permettant de créer de instances de cas objects, ayant ces
propriétés.Une classe est représentée en utilisant un rectangle divisé en trois sections.La
section supérieure est le nom de la classe, la section centrale définit les attributs de la
classe et la section du bas c’est la section des méthodes.

— Les associations :

Une association est une relation logique entre deux classes nommé association binaire
ou plus nommé association n-air qui définit un ensemble de liens entre les objects de ces
classes.Une association définit le nombre minimum et maximum d’instances autorisée
dans la relation (cardinalité).

— Les attributs :

Un attribut est une information qui caractérise une classe et dont la valeur dépend
de l’objet instancié . Chacune de ces informations est définie par un nom,un type de
données, une visibilité et peut etre initialisé .

3.12.3 Modéle d’entité persistant

88
Figure 3.31 – Diagramme de classe

89
3.13 Conclusion
La phase conceptuelle est une étape fondamentale pour la réalisation de n’importe quel
projet. Elle permet de faciliter le système d’information et réaliser l’implémentation de la base
de données et le traitement.Dans ce chapitre nous avons présenté les diagrammes de séquences
et les diagrammes de classes de notre application.Le chapitre suivantest consacré à la phase de
réalisation de notre application.

90
Chapitre 4

Réalisation et tests

4.1 Introduction
Une manipulation souple et aisée reste toujours parmi les critères les plus décisifs pour
le succès de tout projet. C’est pourquoi le choix des outils de programmation doit être bien
étudié.Dans ce chapitre nous présentons en premier temps l’architecture et l’environnement de
développement utilisés.Dans un second temps nous illustrons la réalisation de notre travail par
des imprimes écran des interfaces les plus importantes de notre application.

4.2 Architecture de développement :

4.2.1 Architecture de 3 tiers :

Figure 4.1 – Architecture de trois tiers

Niveau 1 (La présentation des données ) : Elle correspond à la partie visible et

interactive de l’application pour les utilisateurs.On parle d’interface Homme/Machine.
Niveau 2 (Le traitement métier des données) : Elle correspond à la partie fonc-
tionnelle de l’application celle qui implémente le logique métier et qui décrit les opérations
que l’application opéra sur les données en fonction des requêtes des utilisateurs , effectuées au
travers de la niveau 1 (La présentation des données).

91
 Niveau 2 (L’accés aux données persistantes) : Elle consiste au stockage des données
du systéme.Ces données peuvent être propres au systéme, ou gérées par un autre systéme.Le
client ne peut pas accéder à données que par l’intermédiaire de deuxiéme tiers (Le traitement
métier des données).

4.2.2 Architecture du modéle MVC

Figure 4.2 – Modéle MVC

Le modèle MVC (Model, View, Controller ) est une méthode mise en point pour mieux
structurer une application par une interface graphique. Ce modèle permet la séparation entre
les données, les traitements et la présentation. Chaque entité joue un rôle bien précis dans la
conception logicielle du système :
— Le modéle : représente les données à manipuler par le programme. . . Il offre des
méthodes qui permettent de récupérer et de mettre à jour ces données (suppression,
insertions. . .).

— La vue : fournit efficacement l’élément d’interface utilisateur de l’application , il res-

tituera les données du modéle dans un formulaire adapté à l’interface utilisateur .

— Le contrôleur : permet la gestion des évènements et la synchronisation du modèle

et de la vue.

4.3 Environnement de développement

Nous présentons dans cette section l’environnement matériel mis à la disposition du présent
projet , ainsi que l’environnement logiciel utilisé pour le développement et la mise en place de
notre application.

4.3.1 Environnement matériel :

Pour la réalisation de ce projet nous avons disposé d’un ordinateur ASUS caractérisé par :

— Mémoire RAM installé : 4,00 GO

— Type systéme : système d’exploitation 64 bits
— Windows : 10 professionnel

92
4.3.2 Environnement logiciel
Dans ce qui suit nous présentons l’environnement logiciel utilisé pour mener à terme ce sujet

— Visual Studio Code : est un éditeur de code extensible développé par Microsoft pour
Windows, Linux et macOS.
Les fonctionnalités incluent la prise en charge du débogage, la mise en évidence de la
syntaxe, la complétion intelligente du code, les snippets, la refactorisation du code et Git
intégré. Les utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences
et installer des extensions qui ajoutent des fonctionnalités supplémentaires.[3]

Figure 4.3 – Logo visual Studio Code

— Laragon : C’est un environnement de développement web rapide, flexible, intuitif,

productif et puissant qui d’adresse à tous.Laragon vous offre tout ce dont vous avez
besoin pour créer des applications web modernes. [4]

Figure 4.4 – Logo laragon

— Draw.io : est une application gratuite en ligne, accessible via son navigateur (protocole
https) qui permet de dessiner des diagrammes ou des organigrammes. Cet outil vous
propose de concevoir toutes sortes de diagrammes, de dessins vectoriels, de les enregistrer
au format XML puis de les exporter. Draw.io est un veritable couteau suisse de la frise
chronologique, de la carte mentale et des diagrammes de tout genre.[5]

Figure 4.5 – Logo Draw.io

93
— Lravel : est un Framwork web open source écrit en PHP respectant le principe modéle-
vue-contrôleur Apprenez à prononcer et entiérement développé en programmation orientée
objet.[6]

Figure 4.6 – Logo laravel

— HTML 5 : est un langage de descriptionreprésentation et formatage des pages web,

il structure sémantiquement et met en forme les contenus et permet d’inclure divers
ressources (multimédias,formulaires de saisies,etc...).[7]

Figure 4.7 – Logo HTML5

— CSS 3 : le CSS quant à lui est utilisé pour décrire la présentation d’un document
structuré et décrit en HTML et permet de proposer une stylisation indépendante de la
structure du document.[7]

Figure 4.8 – Logo CSS 3

94
 — Bootstrap : est une collection d’outils qui facilite la création d’un site web. C’est un
ensemble qui contient des codes HTML et CSS et permet donc de crée des formulaires
désignés trés facilement ainsi que l’implémentation des éléments dynamiques comme un
carrousel ou une modal.[8]

Figure 4.9 – Logo bootstrap

4.4 Implémentation de l’application

4.4.1 Présentation des exemples des interfaces
La conception des interfaces de l’application est une étape trés importante puisque toutes
les interactions avec le coeur de l’application passent à travers ces interfaces , on doit alors
guider l’utilisateur avec les messages d’erreurs et de notifications , ainsi présenter un systéme
complet.Dans cette partie , nous allons présenter quelques interfaces de l’application.

4.4.2 Les interfaces

— Interface Acceuil :

Cette interface permet au utilisateur de consulter la page d’acceuil .

La figure 4.10 représente l’interface acceuil.

Figure 4.10 – Interface acceuil

95
 — Interface Contact :

Cette interface permet au utilisateur de contacter l’administrateur sans connexion .

La figure 4.11 représente l’interface contact.

Figure 4.11 – Interface contact

— Interface Inscription :

Pour accéder à l’application , L’utilisateur doit tout d’abord s’inscrire pour découvrir les nou-
veautés et faire l’inscription .

La figure 4.12 représente l’interface inscription.

96
 Figure 4.12 – Interface inscription

— Interface Authentification :
Pour accéder a leur espace privé , il faut d’abord faire l’authentification.

La figure 4.13 représente l’interface authentification .

97
 Figure 4.13 – Interface authentification

Interfaces Administrateur :
— Interface Paneau administrateur :

La figure 4.14 représente l’interface paneau admin.

Figure 4.14 – Interface paneau admin

98
 — Interface Liste formateurs :

La figure 4.15 représente l’interface liste formateur.Cette interface permet à l’administrateur

d’ajouter,modifier ou supprimer un formateur.

Figure 4.15 – Interface liste formateur

— Interface Ajouter formateurs :

Cette interface permet à l’administrateur d’ajouter un formateur . C’est tout de même pour
l’interface ajouter un étudiant et pour la modification . La figure 4.16 représente l’interface
ajouter formateur.

Figure 4.16 – Interface ajouter formateur

— Interface Liste des articles :

99
Cette interface permet à l’administrateur de consulter la liste des articles pour ajouter ,modifier
ou supprimer un article.
La figure 4.17 représente l’interface liste articles.

Figure 4.17 – Interface liste article

— Interface Ajouter des articles :

Cette interface permet à l’administrateur d’ajouter un marticle.C’est tout de même pour inter-
face de modification.
La figure 4.18 représente l’interface ajouter article.

Figure 4.18 – Interface ajouter article

— Interface Liste contact :

Cette interface permet à l’administrateur de consulter la liste des contacts pour répondre a un
message.
La figure 4.19 représente l’interface liste contact.

100
 Figure 4.19 – Interface liste contact

— Interface Répondre a un contact :

Cette interface permet à l’administrateur de répondre a les messages .

La figure 4.20 représente l’interface repondre contact.

Figure 4.20 – Interface repondre contact

— Interface Statistiques :

Cette interface permet à l’administrateur de consulter les statistiques des formations .

La figure 4.21 représente l’interface statistique.

101
 Figure 4.21 – Interface statistiques

Interfaces Formateurs et administrateur

— Interface Liste formations :

Cette interface permet à l’administrateur et le formateur de consulter la liste les formations

pour ajouter,modifier ou supprimer une formation .
La figure 4.22 représente l’interface liste formations.

Figure 4.22 – Interface liste formations

— Interface Ajouter formations :

Cette interface permet à l’administrateur et le formateur d’ajouter une formation ..C’est tout
de même pour interface de modification.
La figure 4.23 représente l’interface ajouter formations .

102
 Figure 4.23 – Interface ajouter formations

— Interface Liste des cours :

Cette interface permet à l’administrateur et le formateur consuler la liste des cours pour afficher
, ajouter,modifier ou supprimer un cours.
La figure 4.24 représente l’interface liste cours.

Figure 4.24 – Interface liste cours

— Interface Ajouter cours :

Cette interface permet à l’administrateur et le formateur d’ajouter cours sous forme PDF,Vidéo,WORD..C’e
tout de même pour interface de modification.
La figure 4.25 représente l’interface ajouter cours.

103
 Figure 4.25 – Interface ajouter cours

— Interface Ajouter test :

Cette interface permet à l’administrateur et le formateur d’ajouter un test d’évaluation.

La figure 4.26 représente l’interface ajouter test .

Figure 4.26 – Interface ajouter test

— Interface Ajouter Questions :

Aprés avoir écrire le titre et la déscription et dés qu’ il clique sur le bouton ajouter l’interface
de questions est affichée.
La figure 4.27 représente l’interface ajouter question.

104
 Figure 4.27 – Interface ajouter Question

Interfaces utilisateur
— Interface paneau utilisateur :

Aprés avoir faire l’inscription ,l’utilisateur peut accéder a son espace privée.
La figure 4.28 représente l’interface paneau utilisateur.

Figure 4.28 – Interface panneau utilisateur

— Interface Accéder à la page d’acceuil

Aprés avoir découvrir le panneau l’utilisateur accéde a la page d’accueil afin de voir les articles
et les formations.

La figure 4.29 représente l’interface acceuil.

105
 Figure 4.29 – Interface acceuil

— Interface Consulter les formations pour s’inscrire

L’utilisateur maintenant demande la liste des formations pour faire l’inscription .

La figure 4.30 représente l’interface liste formations.

106
 Figure 4.30 – Interface liste formations

— Interface choisir une formations

Maintenant l’utilisateur choisit une formation . L’utilisateur clique sur la bouton ”Ajouter au
Panier” pour mettre cette formation a son panier puis faire le payement .
La figure 4.31 représente l’interface choisit formations.

Figure 4.31 – Interface formations

107
 — Interface Panier

Mintenant l’utilisateur accéde a son panier pour faire le payement .

La figure 4.32 représente l’interface panier.

Figure 4.32 – Interface Panier

La figure 4.33 représente l’interface payement .

Figure 4.33 – Interface Payement

— Interface consulter liste des formations

Aprés le payement l’utilisateur peut consulter la liste des formations , des cours et il peut aussi
discuter avec l’administrateur et le formateur , ainsi il peut évaluer les formations qu’il a acheté
.
La figure 4.34 représente l’interface liste des formations.

108
 Figure 4.34 – Interface liste des formations

— Interface Discuter

L’utilisateur peut discuter avec l’administrateur et formateur et toutes l’équipes de formations .

La figure 4.35 représente l’interface Discuter .

Figure 4.35 – Interface Discuter

— Interface Evaluer formations

L’utilisateur peut maintenant ajouter ou supprimer un avis a la formations .
La figure 4.36 représente l’interface évaluer formation.

109
 Figure 4.36 – Interface évaluer

— Interface Consulter liste formateur

L’utilisateur peut consulter la liste des formateurs et leurs informations.
La figure 4.37 représente l’interface formateur .

Figure 4.37 – Interface formateur

— Interface passer test :

Cette interface permet a l’utilisateur de passer un test d’évaluation.

110
La figure 4.38 représente l’interface passer test.

Figure 4.38 – Interface passer test

— Interface Réponse test :

Cette interface permet a l’utilisateur de voir les réponses corrects .

La figure 4.39 représente l’interface réponse test .

Figure 4.39 – Interface Réponse test

4.5 Conclusion
Tout au long de notre chapitre , nous avons atteint la fin d’étude du projet.Dans ce dernier
chapitre , nous avons à la fois décrit les environnements matriels , logiciels, et les langages
utilisées sur lesquels nous avons construit notre application.Ensuite ,nous avons illustré les
fonctionnalités importantantes de l’application en fournissant quelques interfaces graphiques.Au
présent , nous passons à la conclusion générale et les perspective de notre projet.

111
Conclusion et Perspectives

Ce projet de fin d’études consiste à développer et concevoir une application permettant de

réaliser un etablissement informatisé ouvert 24/24h, d’Offrir aux étudiants la possibilité d’ins-
crire en ligne, poursuivre differents cours et formation Via une plateforme . Le comencement
de ce projet consiste a faire une récolte d’informations nécessaires pour dresser une étude de
l’existant , présenter un aperçu sur la problématique. Par la suite, nous avons abordé l’analyse
et la spécification des besoins qui nous a permis de déterminer les interactions qui se déroulent
entre les différents acteurs avec l’application visé. puis nous avons entamné la phase de concep-
tion qui est la phase la plus importante dont l’objectif est de concevoir les differnts classes
et leurs interactions. Le dernier volet de ce projet était la partie réalisation qui a été dédiee
à la présentation de l’environnement de travail et les interfaces les plus significatives de cette
application par la présnetation de differents captures de notre application. Ce projet de fin
d’études a été une bonne opportunité pour apprendre des nouvelles technologies(laravel), en
effet ,il nous a permis de suivre une méthodologie bien étudiée, d’approfondir nos connaissances
dans le monde de développement des applications. Tout au long de l’élaboration du projet, nous
avons rencontré plusieurs difficultés tant au niveau conceptuel qu’au niveau de la réalisation.
Tout de même, on a réussi de bien agir face a face a ces problémes afin d’atteindre notre but
et réaliser une résultat satsfaite .
Comme perspective, nous espérons faire basculer notre application web vers une application
mobile en améliorant l’interactivité . Nous espérons enfin que le travail que nous avons effectué
a été à la hauteur de la confiance.

112
Bibliographie

[1] : https ://www.omg.org/technology/readingroom/UML.htm ,consulté le 30/03/2021

[2] : https :/laurent-audibert.developpez.com /cours-uml/ ,consulté le 03/04/2021
[3] : https ://fr.wikipedia.org/wiki/Visual-Studio-Code ,consulté le 20/04/2021
[4] : Https ://www.commentcamarche.net/laragon-apache ,consulté le 20/04/2021
[5] : https ://www.tice-education.fr/tous-les-articles-er-ressources/articles-internet/
,consulté le 20/04/2021
[6] : https :www.developpez.com/actu/Quels-sont-les-framework-que-vous-aimeriez- ,consulté
le 20/04/2021
[7] :https ://www.pierre-giraud.com/html-css-apprendre-coder-cours/formulaire-form/ ,consulté
le 20/04/2021
[8] : https ://www.journaldunet.com/web-tech/developpeur/bootstrap astuces-pratiques/
,consulté le 20/04/2021

113
 République Tunisienne Ministére de l’Enseignement Supérieur et de
Recherche Scientifique Université de Jendouba

Université de Jendouba

Institut Supérieur d’Informatique de Kef

Rapport de fin d’études

Pour l’obtention de diplôme de Licence Fondamentale en Science
Informatique

Option : Science Informatiques

Conception et réalisation d’un site

Web de Cabinet de Formation Média
World Academy

Au sein Sprint Code

Réalisé par : Encadré par :

Chebbi ibtissem Dr. Louati Aymen

Promotion : 2021/2022