Rapport projet conception et la réalisation d'une application web gestion des conférences.

1. Master : génie logiciel pour le cloud
Projet en conception et développement d’une application web
Année universitaire :2018/2019
Réaliser par : Encadré par :
SAAD SARHANI YASSINE RHAZALI
UNIVERSITE IBN TOFAIL KENITRA FACULTE DES SCIENCES - KENITRA

2. 1 | P a g e
Table de matières:
Introduction ……………………………………………page 2
Cadre du travail……………………………………..…page 4
Analyse et spécification des besoins………………..page 5
Conception Uml……………………………………… page13
Développement d’application……………………….page 24
Conclusion…………………………………………….page 38

3. 2 | P a g e
Introduction
Ce rapport présente le travail effectué dans notre projet de
ce module Conception et Patron de conception.
Au cours de notre études universitaires en master Génie
Logiciel pour le Cloud ,nous avons acquis plusieurs
connaissance en programmation,dévelopement web..
Ce projet nous dennera l'occasion de manipuler ces
connaissances et les développer.
Nous avons comme théme du projet de créer un site web
de gestion de conférences supporte le processus de
soumission de papier, d'affectation de papier, d'évaluation
de papier, de décision de papier.
Afin de rendre compte de notre projet informatique ,nous
allons vous décrire ses grandes importants axes.

4. 3 | P a g e
Dans un premier temps, on va présenter le projet dans la
phase d'analyse (spécification du cahier de charge)
Puis nous attarderons sur les étapes de conception et
spécification; ensuite, on va détailler la phase
d'implémentation et de développement en basant sur des
captures d'écran de l'application.
Et en fin, une conclusion dont on va montrer ce qu'on a
pris après la réalisation de ce projet.

5. 4 | P a g e
Cadre du travail
a-Problématique :
D’après notre expérience d’études supérieurs qui nous a
permis de construire une idée sur les obstacles qui
peuvent confronter un auteur de s’inscrire à une
conférence :
 difficulté inscrire à une conférence à distance
 difficulté pour l’auteur accédé aux données à tout
moment
 difficulté de communique avec les admin
b-Solution Proposée :
La solution est de créer un site web dynamique qui permet
de facilité la tâche de l’auteur :
• Gestion de publication des conférences
• Processus de soumission de papier
• Processus affectation de papier
• Processus évaluation de papier
• Processus decision de papier

6. 5 | P a g e
Analyse et spécification des besoins
1-Objectif de l'application :
L’auteur:
Ce site peut rependre aux besoins de l'utilisateur pour
s'inscrire à une conférence en ligne.
Les bossions:
Ce projet est fait faciliter le processus de soumission
de papier, d'affectation de papier, d'évaluation de papier,et
de décision de papier pour le but d'éviter plusieurs
problèmes.
2-Spécification du cahier de charge:
L'application web devra posséder deux parties, partie
d’utilisateur (auteur) et d’administrateur (admin-président-
comite)
Le projet va donc s'articuler autour de ces deux parties.
Les deux parties vont se focaliser sur l'insertion des pages
générales d'introduction, présentation et définition
du concept. Puis d'autres pages privilégiées, pour y
accéder il faut suivre quelques étapes; l’inscription

7. 6 | P a g e
et l’authentification pour que l'utilisateur peut avoir un
compte dans ce site dans la raison
D’avoir les droites d'accès aux données privilégiées du
site.
2-1-les fonctions
Inscriptions: une inscription de l’auteur.
Authentification : connexion des auteurs et administrateurs
de site.
Consulter Conférence : voir les conférence par l'utilisateur
et l'admin.
Créer une conférence: cette tâche est confiée à
l’administrateur de ce site.
Créer une session: cette tâche est confiée à
l’administrateur de ce site.
Déterminer péresedent:cette tâche est spécifiée pour les
administrateurs.
Affecter les papiers cette tâche est spécifiée à
l’administrateur et président de sa session.
Construire une liste de comité: cette tâche est confiée aux
administrateur et le président de sa session.
Établir les tutoriel: cette tâche est confiée aux
administrateur.

8. 7 | P a g e
Décider l'état de papier: cette tache concerne l'admin ,les
comite et président de sa session ils pourront accepté,
rejeté ou poster le papier, mais l'admin il a le droite finale.
Changer la session de papier : cette tâche est concerné
l'admin.
gère les inscription : cette tache spécifiée pour l'admin .
gère les statistique : cette tâche pour l'admin.
Évaluer le papier: cette tâche est spécifiée aux admin
président et comité.
Soumettre papier: cette tâche est spécifiée à l’auteur.
Supprimer papier: cette tâche est spécifiée à l’auteur.
S’inscrire à une conférence : cette tâche est spécifiée à
l’auteur.
Changer profil cette : tâche est spécifier à l’auteur.
2-2 Identification des acteurs:
Un acteur représente l'abstraction d'un rôle joué par des
entités externes qui interagissement directement avec le
système étudié.
il l'opportunité de consulter et/ou modifier directement
l’état du système, en émettant et/ou en recevant des
message éventuellement porteurs de données .
dans le cadre de ce projet, Cinque acteurs.

9. 8 | P a g e
Acteurs Rôles
Utilisateur Consulter site.
Créer un compte.
Auteur Soumettre papier.
Supprimer papier.
Changer profil.
S’inscrire conférence .
S’authentifier.
Président S’authentifier.
Affecter papier.
Choisir comité
Evaluer papier.
Décider l’état de papier
Comite /Comite locaux Evaluer papier
S’authentifier.
Prépare amphi
Réserver hôtel.
Administrateur S’authentifier.
Créer une conférence.
Déterminer date important.

10. 9 | P a g e
Déterminer session.
Déterminer président.
Construire liste comité.
Etablir le tutoriel.
Voir les évaluations.
Affecter les papiers.
Décider l’état papiers.
Gérer les inscriptions.
Changer session papier.
Les diagrammes ci-dessous exposant les différentes
situations d’utilisation pouvant être effectuées par les
acteurs du site.

11. 10 | P a g e
Figure 1 : Diagramme de cas d’utilisation (administrateur)

12. 11 | P a g e
Figure 2 : Diagramme de cas d’utilisation (président et
comité)

13. 12 | P a g e
Figure 3 : Diagramme de cas d’utilisation (auteur et
utilisateur)

14. 13 | P a g e
La conception UML :
1-Diagramme de classe :
Figure 4 : Diagramme de cas d’utilisation (auteur et
utilisateur)
-Ce diagramme définit les différentes classes du projet :

15. 14 | P a g e
-La classe membre est contient les attributs d’un
utilisateur qui déjà inscrit dans ce site il contient aussi la
méthode consulterSite() telle que chaque utilisateur il peut
consulter le site, ce class est joué le rôle d’une class
abstract qui n’est pas d’instance directe mais dont les
class descendants ont des instances .
Ce qui signifié qu’un membre il peut être un auteur, admin,
président ou comité.
La classe admin est contient trois méthodes il peut créer
conférence, gérer class gestionConference et gérer la
classe gestionAuteur.
La classe gestionConference contient les méthode pour
gérer tous les activités de conférence cette classe est
hériter de la classe gestionSession et cette classe aussi
hériter avec classe gestionPapier donc l’admin comme il
gérer la class gestionConference il géré les autres classe
gestionSession et gestionPapier.
La classe gestionPapier gérer par comité et président.
La classe gestionSession gérer par président et admin.
La classe conférence contient les attributs nécessite pour
créer une conférence.
La classe session contient les attributs nécessite pour
créer une session cette classe est relier avec la classe
conférence avec une relation de composition ce qui

16. 15 | P a g e
signifier que on ne peut pas trouver des conférences qui
ne contient des sessions.
La classe papier contient le attribut d’un papier relier avec
la classe conférence avec une relation de composition ce
qui signifier que on ne peut pas trouver des sessions qui
ne contient des papiers.
La classe auteur contient les méthodes de l’auteur un
auteur consulter le site web s’inscrire à une conférence
soumettre papier supprimer papier ou changer profil.
La classe comité est gérer la classe gestion papier
consulté site et cette classe présente comme une classe
parent de la classe comité locaux.
La classe comité locaux est celui le responsable de
prépare les amphis et réserver les hôtels.
2-Diagramme de séquences :
Les diagrammes de séquence du projet avec la notation
UML sont illustrés comme suit :
a-Diagramme de séquence <<s’inscrire>> :
Dans ce diagramme, l’utilisateur peut consulter la page
d’accueil du site pour s’inscrire par l’envoi de leurs
données qui seront ensuite vérifiées par le système au

17. 16 | P a g e
niveau de la base de données pour effectuer cette
tâche.
Figure 5 : Diagramme de séquence inscription
b-Diagramme de séquence <<s’authentifier>> :
Dans ce diagramme, l’utilisateur effectue la tâche
d’authentification par consulter la page du site et l’envoie
de leurs données qui sont vérifiées par le système qui
interroge la base de données afin de voir si les données
sont identiques.

18. 17 | P a g e
Figure 6 : Diagramme de séquence inscription
c-Diagramme de séquence <<s’inscrire à une
conférence >>
Dans ce diagramme, l’auteur avant m’inscrire à une
conférence il soumettre des papiers à une conférence et
le système qui composé de comité, président et admin il
évaluer ces papiers est donner le droite pour l’auteur
s’inscrire à une conférence si cette papier est accepter ou
poster.

19. 18 | P a g e
Figure 7 : Diagramme de séquence inscription à une
conférence
d-Diagramme de séquence << créer une conférence
>>
Dans ce diagramme un admin est créer une conférence
est les autres composant nécessite.

20. 19 | P a g e
Figure 8 : Diagramme de séquence pour créer une
conférence.
e- d-Diagramme de séquence << changer une
session>>

21. 20 | P a g e
Figure 9 : Diagramme de séquence pour changer une
session.
3-Diagramme d’état de transition :
Ce diagramme contient l’état de transition d’un objet
papier.

22. 21 | P a g e
Figure 10 : Diagramme d’état de transition
3-Diagramme d’activité:
Ce diagramme contient les activités

23. 22 | P a g e
Figure 11 : Diagramme d’activité

24. 23 | P a g e

25. 24 | P a g e
Développent d’application
1-introduction :
Pour réaliser l’application, il faut adapter un
environnement logiciel adéquat pour faire un bon travail.
2-Spécification logiciel :
a-langage de programmation :
Le HTML5 est le langage de base pour
apprendre pour créer des sites internet. Il est simple et se
maitrise assez vite, on l’a choisir car il est principalement
utilisé pour la création des sites web.
Est un langage de scripts généraliste et
Open Source, spécialement conçu pour le développement
d'applications web. Il peut être intégré facilement au
HTML, on a choisi car il est utilisé principalement pour
réaliser des pages web dynamiques.

26. 25 | P a g e
Est un langage de script léger et orienté objet.
On l’a choisi car il donne plusieurs outils pour la création
des pages web dynamiques.
est un langage qui décrit les styles d’un
document html via des feuilles de style , on l’a choisit car
il facilite un peu la tache du design en faisant des
collections ( feuilles de styles).
un système de gestion de base de
données relationnelle ,on l’a choisit car il est le plus utilisé
dans la création des sites web.
Bootstrap, un Framework CSS, fait partie
de ces outils qui accélèrent grandement un projet web.
Il étend les possibilités du langage CSS en ajoutant plein
de fonctionnalités et de composants. on l’a choisi car il est

27. 26 | P a g e
simple utilisé et adapter avec tous les matériel (laptop,
tablette, smartphone..)
a-outils logiciel:
Plateforme de développement
web de type xampp, on a choisi ce logiciel car il permet de
faire fonctionner localement des scripts php ainsi il donne
u outil de déploiement local ou en ligne pour le
déploiement local ou en ligne pour le développement.
un éditeur de texte générique disponible sur
Windows , linux et mac ,on l’a choisi car il donne une
analyse global et compétitive sur le projet.
Un logiciel de modélisation et de
conception UML, on l’a choisi car il est simple de maitriser
ces fonctions et il donne une analyse globale et
compétitive sur le projet.

28. 27 | P a g e
3-Présentation D’application :
Dans cette partie, on va présenter le développement
d’application en se basant sur des captures écrans.
3.1. Captures Ecran sur les pages web :
a-Espace Utilisateur :
*Page d’accueil (redirection)

29. 28 | P a g e
Figure 12 :Page d’accueil
L’utilisateur a plusieurs choix dans la page dans la page
d’accueil, le choix s’inscrire nous dirige vers la page
d’inscription de l’application.
Figure 13 : page inscription

30. 29 | P a g e
Après que l’utilisateur remplie tous les champs, s’il clique
sur <<s’inscrire >> il va se diriger vers un autre accueil,
L’accueil de l’utilisateur connectés.
Figure14 : page d’accueil utilisateurs connectés
S’il clique sur s’authentifier dans la page d’accueil ou
inscription il va se diriger vers la page d’authentification.

31. 30 | P a g e
Figure 15: page d’authentification
S’il clique sur s’inscrire dans la page d’accueil ou
authentifier il va se diriger vers la page d’inscription.
S’il clique sur contact dans page d’accueil il va se diriger
vers la page contact.
Figure16 : Page Contact
Si l’utilisateur à trouve un problème dans le site il peut
contact l’admin pour régler le problème.
Quel que soit l’utilisateur de ce site il peut voir tous les
conférences inscrite dans le site sur la page d’accueil.
S’il clique sur profil dans l’accueil il dirige vers le profil de
l’auteur.

32. 31 | P a g e

33. 32 | P a g e
Figure 17 : page profil d’un auteur
Cette page contient plusieurs options pour l’auteur qui
peut faire :
*Soumettre des papiers dans une session si la date de
soumission est supérieur ou égale la date réelle.
*Voir le contenu et Supprimer un papier de l’auteur.
* Voir le contenu et demande de changement de papier.
*modifier le profil.
b-Espace Administrateur :
b-1-présedent :
Si l’utilisateur est authentifier comme un président il a le
droite de passer au profil de président.

34. 33 | P a g e
Figure 18 : page profil de président
Le président il doit décider l’état des papiers de sa session
si la date d’évaluation est supérieure à la date réelle.
Il doit aussi ajouter un comité.

35. 34 | P a g e
Voir les évaluations des comites
b-2-Administrateur :
Si un utilisateur veut accéder le site comme étant un
admin.
Si l’ admin est accède au profil :

36. 35 | P a g e
Figure 19 : page profil d’administrateur
Cette page contient plusieurs options pour l’administrateur
qui peut faire :
*Créer une conférence.
*Créer une session pour une conférence.
*Voir les papiers et décider l’état de papier si la date
évaluation est supérieure ou égale la date réelle et voir
l’évaluation de président.
*Décide l’état de changement de l’auteur qui déjà
demander.
*Voir les auteurs qui déjà s’inscrire dans la conférence.
*Voir les messages d’un utilisateur si il poster.
b-3-comite :

37. 36 | P a g e
Figure 19 : page profil de comite
Cette page consternant le profil de comité qu’il peut
évaluer les papiers de sa session.

38. 37 | P a g e
Conclusion
Ce projet a été très bénéfique .dans un premier temps, il
nous a permis d’avoir une idée général comment ça se
passe pour la réalisation des projets informatiques.
Deuxièment, on a pris après la réalisation de ce projet
qu’un informaticien travail pour répondre aux besoins
Informatiques des utilisateurs et faciliter les taches pour
eux.
Notre première tâche était de bien comprendre les
fonctionnalités de l’application et les attributs concernent
la base de données, d’étudier les outils informatiques
qu’on va travailler avec (php ,xampp,sublime…)