Rapport de projet de

fin d’année
Application web de la
gestion des conférences

Présenté par : BOUFAR YOUSSEF

MIRI MOHAMED

Encadré par : MONSIEUR LAHCEN BOUNY

EMSI AGDAL 2 RABAT 2022/2023

INGÉNIERIE INFORMATIQUE ET RÉSEAUX

 REMERCIEMENTS

Nous tenons tout d’abord à remercier tous ceux qui nous ont aidés de près ou
de loin, et à exprimer nos gratitudes et nos respects pour leur soutien durant la
formation.

Nous tenons à remercier en premier notre encadrant Monsieur Lahcen BOUNY

pour ses précieux conseils qui nous ont étaient d’une grande utilité.

Nous remercions également tous nos enseignants de l’Emsi option ingénierie

informatique et réseaux pour leurs aides précieuses et leur disponibilité
constante tout au long de notre formation.

Nous Vous remercions tous

 Table des matières
Chapitre I .......................................................................................................................................... 1
Introduction ..................................................................................................................................2
Les tâches que nous avons réalisées.............................................................................................2
Objectif du projet......................................................................................................................... 4
Chapitre II .........................................................................................................................................5
Etude fonctionnelle ..................................................................................................................... 6
Rédaction du cahier des charges ............................................................................................. 6
Etude conceptuelle ...................................................................................................................... 6
Définition UML ........................................................................................................................ 6
Diagramme de cas d’utilisation (use-case diagram) : ..............................................................7
Diagramme de classe (class diagram): .................................................................................... 8
Diagramme de séquence (sequence diagram):....................................................................... 10
CONCLUSION : .......................................................................................................................13
Chapitre III ...................................................................................................................................... 14
Technologies utilisées ................................................................................................................. 15
Flask ......................................................................................................................................... 15
HTML ...................................................................................................................................... 15
Css ............................................................................................................................................ 16
BOOTSTRAP ........................................................................................................................... 16
JAVASCRIPT............................................................................................................................ 17
phpMyAdmin .......................................................................................................................... 17
StarUml ................................................................................................................................... 18
WampServer ............................................................................................................................ 18
Web scraping .......................................................................................................................... 19
Conclusion............................................................................................................................... 19
Chapitre IV ......................................................................................................................................20
Ecrans de l’application ................................................................................................................ 21
Conclusion...............................................................................................................................26
Webographies ............................................................................................................................. 27
Chapitre I
Contexte général

 Introduction.

 Les taches réalisées.

 Objectifs du projet

1
Introduction
C’est avec enthousiasme que nous effectuons notre troisième année
d’ingénierie informatique et réseaux au sein du EMSI.

L’intérêt que nous portons au développement Informatique et aux nouvelles

technologies nous a permis d’appréhender un nouveau marché : celui de
développement d'application WEB.

Le marché de développement Informatique regroupant plusieurs activités

différentes et relativement peu connues du grand public, nous emploierons
dans un premier temps à en préciser les principales.

Dans un second temps, on va vous présentez la méthodologie employée pour

effectuer chacune des missions qui nous ont été confiées ainsi que les résultats
détaillés de ces dernières.

La troisième partie exposera les étapes de réalisation de notre projet ainsi que
les résultats obtenus.

Les tâches que nous avons réalisées

Pendant note période de réalisation de projet, nous avons réalisés plusieurs
tâches par exemple :

Analyse :

L’analyse fonctionnelle est une démarche qui « consiste à rechercher et à

caractériser les fonctions offertes par un produit pour satisfaire les besoins de
son utilisateur. »

La démarche est généralement conduite en mode projet et peut être utilisée

pour créer (conception) ou améliorer (reconception) un produit.

2
Les besoins sont de toute nature et sont exprimés de façon individuelle ou
collective, objective ou subjective, avec des degrés de justification
disparates.

La ou les fonctions étudiées sont également diverses : fonctions de service,

fonctions d'évaluation, fonctions de traitement

Le cadre de l'étude doit être aussi pris en compte : contraintes ou variables

déduites de l'environnement, la réglementation, des usages, …etc.

Conception :

En ingénierie, une méthode de conception est un procédé qui a pour

objectif de permettre de formaliser les étapes préliminaires du
développement d'un système afin de rendre ce développement plus fidèle
aux besoins du client.

La phase de conception permet de décrire de manière non ambiguë, le plus

souvent en utilisant un langage de modélisation, le fonctionnement futur du
système, afin d'en faciliter la réalisation.

Réalisation :

La réalisation c’est la phase du codage dans cette phase on écrit les scripts
nécessaires el les formes graphiques qui vont nous aider à accomplir
l’application.

3
Objectif du projet

L’application dont nous allons vous présentez est un projet

de gestion des conférences.
Notre projet consiste à la réalisation d’une plateforme web
destinée à annoncer les conférences à venir.
L’administrateur a le droit d’ajouter, supprimer, modifier
l’un des conférences. Les utilisateurs ont le droit de
consulter les conférences.

4
Chapitre II

Analyse et conception
 Etude fonctionnelle : cahier de charge

 Etude conceptuelle

UML

5
Etude fonctionnelle
Rédaction du cahier des charges

Le cahier des charges présente des solutions dépendant des objectifs

fonctionnels (expression des besoins du client) et des orientations techniques
suivies (logiciels utilisés et documents à fournir par le client).

Etude conceptuelle
Définition UML
Le langage UML (Unified Modeling Language, ou langage de modélisation
unifié) a été pensé pour être un langage de modélisation visuelle commun, et
riche sémantiquement et syntaxiquement. Il est destiné à l'architecture, la
conception et la mise en œuvre de systèmes logiciels complexes par leur
structure aussi bien que leur comportement. L'UML a des applications qui vont
au-delà du développement logiciel, notamment pour les flux de processus
dans l'industrie.

Il ressemble aux plans utilisés dans d'autres domaines et se compose de

différents types de diagrammes. Dans l'ensemble, les diagrammes UML
décrivent la limite, la structure et le comportement du système et des objets
qui s'y trouvent.

L'UML n'est pas un langage de programmation, mais il existe des outils qui
peuvent être utilisés pour générer du code en plusieurs langages à partir de
diagrammes UML. L'UML a une relation directe avec l'analyse et la conception
orientées objet.

UML est destiné à faciliter la conception des documents nécessaires au

développement d'un logiciel orienté objet, comme standard de modélisation
de l'architecture logicielle. Les différents éléments représentables sont :

 Activité d'un objet/logiciel

 Acteurs
 Processus
 Schéma de base de données

6
  Composants logiciels
 Réutilisation de composants.
Il est également possible de générer automatiquement tout ou partie du code,
par exemple en langage Java, à partir des documents réalisés.

Diagramme de cas d’utilisation (use-case diagram) :

Représentation des possibilités d'interaction entre le système et les acteurs
(intervenants extérieurs au système), c'est-à-dire de toutes les fonctionnalités
que doit fournir le système.

Acteurs Rôle

Utilisateur -consulter les conférences

-Réserver l’une des conférences
Admin -S’authentifier
-Gérer les conférences
Figure 1.1: Identification des acteurs et leurs rôles

Notre diagramme de cas d’utilisation est le suivant :

7
 Figure 1.2: Diagramme de cas d’utilisation

Les diagrammes de cas d’utilisation sont des diagrammes UML utilisés pour
donner une vision globale du comportement fonctionnel d’un système
logiciel.

Diagramme de classe (class diagram):

Les diagrammes de classes sont l'un des types de diagrammes UML les plus
utiles, car ils décrivent clairement la structure d’un système particulier en
modélisant ses classes, ses attributs, ses opérations et les relations entre ses
objets.

C’est le point central dans le développement oriente objet. Il représente la

structure statique du système sous forme de classes et de leurs relations. Les
classes constituent la base pour la génération de code et des schémas de

8
bases de données. Le diagramme de classes identifie les classes de notre
système et les associations entre elles. C’est lui qui servira de base à la création
de la base de données.

Notre diagramme de classe est le suivant :

Figure 1.3: Diagramme de classe

9
Diagramme de séquence (sequence diagram):
Représentation de façon séquentielle du déroulement des traitements et des
interactions entre les éléments du système et/ou de ses acteurs.

Les diagrammes de séquence sont une solution populaire de modélisation

dynamique en langage UML, car ils se concentrent plus précisément sur
les lignes de vie, les processus et les objets qui vivent simultanément, et les
messages qu'ils échangent entre eux pour exercer une fonction avant la fin de
la ligne de vie.

Figure 1.4: Diagramme de séquence(ajouter conférence)

10
Figure 1.5: Diagramme de séquence(supprimer conférence)

11
Figure 1.6: Diagramme de séquence(modifier conférence)

12
 CONCLUSION :
Dans ce chapitre, nous avons présenté le langage de conception UML ainsi les
diagrammes élaborés de ce langage qui nous ont aidés à cerner les différentes
fonctionnalités du futur système. Dans le chapitre suivant, nous aborderons les
différents outils et technologies utilisés.

13
Chapitre III

Technologies utilisées
 Flask
 HTML
 Css
 Bootstrap
 Javascript
 phpMyAdmin
 StarUml
 WampServer
 Web scraping

14
Technologies utilisées
Flask
Flask est un micro framework open-source de
développement web en Python. Il est classé
comme microframework car il est très léger. Flask
a pour objectif de garder un noyau simple mais
extensible. Il n'intègre pas de système
d'authentification, pas de couche d'abstraction
de base de données, ni d'outil de validation de formulaires. Cependant, de
nombreuses extensions permettent d'ajouter facilement des fonctionnalités.

HTML
Le HyperText Markup Language, généralement abrégé
HTML ou, dans sa dernière version, HTML5, est le langage de
balisage conçu pour représenter les pages web.

Ce langage permet d’écrire de l’hypertexte (d’où son nom),

de structurer sémantiquement une page web, de mettre en
forme du contenu, de créer des formulaires de saisie ou
encore d’inclure des ressources multimédias dont des images, des vidéos, et
des programmes informatiques. L'HTML offre également la possibilité de créer
des documents interopérables avec des équipements très variés et
conformément aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec le langage de programmation

JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré du
Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

15
Css

Les feuilles de style en cascade, généralement appelées CSS de l'anglais

Cascading Style Sheets, forment un langage informatique qui décrit la
présentation des documents HTML et XML. Les standards définissant CSS sont
publiés par le World Wide Web Consortium (W3C). Introduit au milieu des
années 1990, CSS devient couramment utilisé dans la conception de sites web
et bien pris en charge par les navigateurs web dans les années 2000.

BOOTSTRAP

Bootstrap est une collection d'outils utiles à la création du design (graphisme,

animation et interactions avec la page dans le navigateur, etc.) de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS,
des formulaires, boutons, outils de navigation et autres éléments interactifs,
ainsi que des extensions JavaScript en option.

16
JAVASCRIPT

JavaScript est un langage de programmation de scripts principalement

employé dans les pages web interactives et à ce titre est une partie essentielle
des applications web. Avec les langages HTML et CSS, JavaScript est au cœur
des langages utilisés par les développeurs web. Une grande majorité des sites
web l'utilisent, et la majorité des navigateurs web disposent d'un moteur
JavaScript pour l'interpréter.

phpMyAdmin

phpMyAdmin (PMA) est une application Web de gestion pour les systèmes de
gestion de base de données MySQL et MariaDB, Réalisée principalement en PHP.
Il s'agit de l'une des plus célèbres interfaces pour gérer une base de données
MySQL sur un serveur PHP. De nombreux hébergeurs, gratuits comme payants, le
proposent ce qui évite à l'utilisateur d'avoir à l'installer.

17
StarUml

StarUML est un outil de génie logiciel dédié à la modélisation UML et édité par la
société coréenne MKLabs. Il est multiplateforme et fonctionne sous Windows, Linux
et MacOS.

La dernière version gère l'ensemble des diagrammes définis par UML 2, ainsi que
plusieurs diagrammes SysML, les organigrammes, les diagrammes de flux de
données, et les diagrammes entité-association.

WampServer

WampServer (anciennement WAMP5) est une plateforme de développement

Web de type WAMP, permettant de faire fonctionner localement (sans avoir à se
connecter à un serveur externe) des scripts PHP.

WampServer n'est pas en soi un logiciel, mais un environnement comprenant trois

serveurs (Apache, MySQL et MariaDB), un interpréteur de script (PHP), ainsi que
phpMyAdmin pour l'administration Web des bases MySQL.

Il dispose d'une interface d'administration permettant de gérer et d'administrer ses

serveurs au travers d'un tray icon (icône près de l'horloge de Windows).

La grande nouveauté de WampServer 3 réside dans la possibilité d'y installer et

d'utiliser n'importe quelle version de PHP, Apache, MySQL ou MariaDB en un clic.

18
 Ainsi, chaque développeur peut reproduire fidèlement son serveur de production
sur sa machine locale.

Web scraping
Le web scraping (parfois appelé harvesting ou en français moissonnage) est
une technique d'extraction du contenu de sites Web, via un script ou un
programme, dans le but de le transformer pour permettre son utilisation dans
un autre contexte comme l'enrichissement de bases de données, le
référencement ou l'exploration de données.

Conclusion
Après avoir cité les différents outils avec lesquels nous avons implémenté notre
système, le chapitre suivant sera consacré à la mise en œuvre de la solution.

19
Chapitre IV
Mise en œuvre

 Écrans de l’application

20
Ecrans de l’application
Les interfaces de l’application :
Login :

21
Home :

About :

22
Contact :

Ajouter une conférence :

23
Supprimer et modifier une conférence :

24
Exemple d’une conférence :

25
Conclusion

 Cette application permet de gérer les conférences.

 Ce projet s’étalait sur trois étapes. La première étape était la spécification
des besoins, la deuxième étape était l’étude fonctionnelle et la conception
du projet projetée ensuite en UML. Une fois les besoins sont définis et
analysés, nous avons entamé l’étape de programmation qui a pour objectif
de réaliser ce qui a été analysé et conçu. Cette réalisation a exigé une
maîtrise parfaite du langage Python (Flask) ainsi qu’une bonne
connaissance de l’usage des requêtes MySQL.
 Au cours de Projet de fin d’année, nous avons eu l'opportunité de
confronter les réalités de la vie professionnelle, de vivre de près les difficultés
quotidiennes que rencontrent les employés dans les différents services et
de m’impliquer dans la réalisation de plusieurs tâches informatiques.
 Ce projet était une occasion pour mettre en application nos différentes
connaissances acquises durant notre formation au sein de l’EMSI, et
d’approfondir certains et d’apprendre d’autres. De surcroît ce projet nous
a permis de raffiner nos capacités d’abstraction et de conception. Par
ailleurs, nous avons tiré grand profit, aussi bien au niveau méthodologique
qu’au niveau technologique. En effet nous avons amélioré nos capacités
à s’auto former et à gérer les erreurs produites lors d’une application.

26
Webographies
 https://fr.wikipedia.org/wiki/Web_scraping#:~:text=Le%20web%20s
craping%20(parfois%20appel%C3%A9,le%20r%C3%A9f%C3%A9
rencement%20ou%20l'exploration
 https://fr.wikipedia.org/wiki/UML_(informatique)#Diagrammes
 https://fr.wikipedia.org/wiki/JavaScript
 https://fr.wikipedia.org/wiki/Hypertext_Markup_Language
 https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
 https://fr.wikipedia.org/wiki/Flask_(framework)
 https://fr.wikipedia.org/wiki/Bootstrap_(framework)
 https://fr.wikipedia.org/wiki/PhpMyAdmin
 https://fr.wikipedia.org/wiki/WampServer
 https://fr.wikipedia.org/wiki/StarUML

27