Vous êtes sur la page 1sur 72

Mémoire de Projet de Fin d’Etudes

Sujet intitulé :

Applications Web pour le travail collaboratif

Présenté par : Ounjli wissal Encadré par : Pr. M.Tahrichi

Cheikh-Rai dounia

Année Universitaire :2018-2019

1
Remerciements

Plus par élan de reconnaissance et de gratitude que par conformité à la


traditionnelle page consacrée aux remerciements, nous tenons à remercier avec
un grand honneur toutes les personnes qui ont contribué de près ou de loin à la
réalisation du travail sujet du présent rapport.

Nous remercions Allah tout puissant de nous avoir donné le courage et la


volonté de mener à terme ce présent travail.

De prime à bord, nous remercions infiniment Monsieur Mohammed


TAHRICHI qui nous a fait l’honneur de nous encadrer et grâce à qui on a pu
mener à bien ce travail. Nous tenons à lui témoigner nos reconnaissances pour la
qualité de son encadrement, son soutien et ses précieux conseils.

Nous adressons nos sincères gratitudes au corps professoral de l’Ecole


Supérieure de Technologie d’Oujda, et à toutes les personnes qui ont contribué
de près ou de loin au bon déroulement de ce travail.

Nous tenons à exprimer nos sincères gratitudes à tout le corps professionnel de


l’Ecole Supérieure de Technologie d’Oujda, pour la formation enrichissante
qu’il nous a prodigué Durant cette année universitaire. Que tous ceux qui nous
ont aidés, de près ou de loin, tous ceux que nous avons oubliés avec notre plume
et non avec nos cœurs et pour lesquels nous réservons toute l’estime et la
considération, trouvent ici l’expression de nos sentiments les meilleurs.

2
Résumé :

Dans le cadre du module projet de fin d’étude, afin d’obtenir le titre de


technicien spécialisé en développement d’applications informatiques, on avait
comme projet la création d’une application web pour le travail collaboratif. Le
présent document est une description de nos travail.

L’objectif principal de ce projet est la gestion des formulaires. Ces


formulaires sont créés par les professeurs et seront remplis par les étudiants.

Afin de mettre en œuvre le projet, il est nécessaire, en premier lieu, de


définirson contexte général par une étude de l’existant, et une présentation de la
problématique et des objectifs du travail, pour ensuite, introduire le principe du
travail collaboratif, Le travail est finalisé par la réalisation de cette application
web.

3
Abstract :

As part of our end of studies project, to obtain the title of a specialized


technician in web application developement, we had as a project the creation of
a web application that serves collaborative work. This document is a summary
of our work.

The main objective of this project is the management of the forms. These
forms are created by the professors and will be completed by the .

To implement the project, we must first define its context by conducting a


study of the existing, a presentation of the issue and the project objectives, then,
introduce the principle ofcollaborative work. The work is completed by the
implementation of this web application.

4
Table de matière :
Remerciements……………………………………………………………2

Résumé……………………………………………………………………3

Abstract………………………………………………………………..…..4

Introduction générale…………………………………………..9

Chapitre 1 : Contexte général du projet…………………… ...10

I. Présentation du projet ……………………………………...11

I. 1. Contexte général du projet ………………………………11

I. 1. a. Problématique …………………………………………11

I. 1. b. Objectif de la solution :………………………………..11

I. 1. c. Contraintes ………………………………………….....12

I. 1. d. Cahier de charge …………………………………….13

I. 2. Planification du projet …………………………………..13

Chapitre 2 : Conception du projet

I.a Diagramme Use case ……………………….…………15

I.3.b Diagramme de Séquence………………………………17

Coté étudiant …………………………………………………17

1) Identification d’étudiant …………………………...17


2) Remplissage du formulaire par l’étudiant …………19
3) Consultation des notes par l’étudiant ……………….21

Coté Professeur ………………………………………………23

1) Identification Professeur …………………………...23


2) Création des formulaires …………………………….25
3) La correction des formulaires ………………………..27
4) Consultation des notes ……………………………….29

Coté admin ……………………………………………………31

5
1) Identification admin ……………………………………31
2) Création des comptes des professeurs ………………….33
3) Création des comptes des étudiants ……………………..35

I.3.c Diagramme des classes……………………………………….…37

Chapitre 3 :Introduction au travail collaboratif et outils utilisés………38

Introduction ……………………………………………………………39

I. Le travail collaboratif ………………………………………………..39

I. 1. Définition ………………………………………………………….39

I. 2. Les outils de travail collaboratif …………………………………..39


II. 1. introduction:………………………………………………………40

II. 1. a PHP: Hypertext Preprocessor…………………………………...40

II. 1. b Framework ……………………………………………………..40

II. 1.c L'ORM Doctrine………………………………………………...41

II. 1.d Le moteur de template Twig …………………………………....41

II. 1.e Symfony ……………………………………………………....41

II.1.f BOOTSTRAP…………………………………………………...42

II. 1. j jQuery…………………………………………………………..42

Chapitre 4 : Travail réalisé…………………………………………….43

I. Introduction………………………………………………………….44

II.présentation du code source………………………………………....44

III.présentation de l’application………………………………………..60

Conclusion générale …...………….……………………..…………….66

Webographie ...……………………………….………..………………67

Liste des abréviations…………………………………………………..68

Annexe A : Définitions ……………………………….………………..69

6
Liste des figures :

Figure 1 : Planification du projet…………………………………………………………14

Figure 2 : Diagramme Use Case ………………………………...……………………….15

Figure 3 : Diagramme de séquence d’identification d’étudiant …...………………….…17

Figure 4 : Diagramme de séquence de remplissage de formulaire par l’étudiant …...…..19

Figure 5 :Diagramme de séquence de consultation des notes par l’étudiant …...……….21

Figure 6 : Diagramme de séquence d’identification de professeur…...……….…………23

Figure 7 :Diagramme de séquence de création de formulaire ……..…………………….25

Figure 8 : Diagramme de séquence de correction des formulaires par professeur ….……27

Figure 9 : Diagramme de séquence de consultation des notes par professeur ……………29

Figure 10 : Diagramme de séquence d’identification d’admin……………………………31

Figure 11: Diagramme de séquence de création du compte professeur par l’admin………33

Figure 12: Diagramme de séquence de création du compte étudiant par l’admin…………35

Figure 13 : diagramme de classes….………………………………………………….……37

Figure 14 : Error.html.twig….………………………………………………….……. ……45

Figure 15 : Figure : Error403.html.twig.………………………………………………….…46

Figure 16 : Error404.html.twig ….………………………………………………….……. ..47

Figure 17 : Security.yaml ….………………………………………………….…….………48

Figure 18 : SecurityController.php ….……………………………………………..….…….49

Figure 19 : ProfesseurController.php ….………………………………………………….….50

Figure 20 : ProfController.php ….………………………………………………….………50

Figure 21: EtudiantController.php ….……………………………………………….…….51

7
Figure 22 : ConsultationAdminController.php.………………………………………….…51

Figure 23 : Ajouterformcontroller.php ………………………………………………….…..52

Figure 24 : UtilisateurController.php ….……………………………………………………52

Figure 25 : UserController.php ………………………………...……………………………53

Figure 26: AdminController.php ………………………………...………………………….53

Figure 27 : UtilisateurType.php ………………………………...…………………………..54

Figure 28: StructureFormType.php ………………………………...………………………54

Figure 29 : Login.html.twig ………………………………...……………………………….55

Figure 30 : consultationAdmin.html.twig…………………………...………………………56

Figure 31 : Admin.html.twig ………………………………...……………………………...56

Figure 32 :creerCompte.html.twig ………………………………...…………………….…57

Figure 33 : prof.html.twig ………………………………...………………………………..57

Figure 34 : ajouterForm.html.twig ……………………………...…………………………58.

Figure 35 : index.html.twig ………………………………...……………………………...58

Figure 36 : index.html.twig ………………………………...………………………………59

Figure 37 : Page d’acceuil ………………………………...………………………………..60

Figure 38 : Authentification ………………………………...………………………………60

Figure 39 : Page admin………………………………...………………………………..…..61

Figure 40 : Création des comptes ………………………………...………………………….61

Figure 41 : Consultation des comptes ……………………………...…………………..……62

Figure 42 : Consultation des formulaires …………………………...……………………….63

Figure 43 : ajouter information du formulaire…………………...………………………….63

Figure 44 : Création des formulaires ……………………...…………………………………64

Figure 45 : Consulter formulaire créer………………………...……………………………..65

Figure 46 : Remplir formulaire…………………………………………………65

8
Introduction générale :

Le partage d'informations et de travaux sont essentiels à la communication dans les


universités. Grâce à des outils sur internet, les collaborateurs peuvent créer, partager et
modifier des fichiers de travail en temps réel. Ces applications web et mobiles sont
simples d'utilisation. Elles permettent notamment d'améliorer la communication
interne dans l'université.

Les avantages d'utilisé une plateforme de travail collaboratif pour l'université sont
multiples :

- Les fichiers en ligne (quizz, documents Word, Excel) sont consultables et


modifiables à distance à tout moment, sur tous types d'appareils (ordinateur,
smartphone, tablette).

- Plusieurs utilisateurs peuvent mettre à jour le même fichier simultanément

- Les documents en ligne sont synchronisables : les modifications apportées à un


document depuis n'importe quel appareil sont prises en compte en temps réel.

Outils de collaboration :

Collaboration = Forums de discussion, e-coaching (création de contenus à travers un


processus de questionnement), communautés de pratique, outils de communication
lorsqu'ils sont utilisés pour créer de l'information et non pas uniquement pour
l'échanger, L'utilisateur est récepteur, émetteur et acteur. Il est acteur dans le sens où il
peut transformer l'information qu'il a reçue pour en créer une nouvelle, en interagissant
avec d'autres utilisateurs. L'interaction est celle de plusieurs personnes pour créer du
contenu, et ainsi atteindre un objectif.

L’école supérieure de Technologie Oujda peut prendre plus d’avantage d’une


application de gestion des formulaires, créés par des professeurs et remplis par des
étudiants, cette application permet d’améliorer le travail collaboratif entre le professeur
et leurs étudiants.

Afin de gérer ce travail la mise en place d’un système informatique est nécessaire. Ce
document resitue le contexte de ce projet et détailler les différentes phases d’analyse et
de conception nécessaires pour la réalisation d’une telle application.

9
10
I. Présentation du projet :

I. 1. Contexte général du projet :


I. 1. a. Problématique :

Ayant un certain nombre d’heures des séances de cours et ne disposant pas d’autre moyen
pour apprendre le cours complet, le seul moyen pour l’étudiant c’est attendre jusqu’au
prochaine séance pour avoir le reste des informations.

Le professeur tout seul est incapable de répondre à toutes les questions ou même vérifier que
tous les étudiants avaient compris le cours.

Prenons notre école comme exemple, elle ne dispose pas d’une Applications web pour le
travail collaboratif, même le nombre des heures qui semble suffisent, la plupart du temps le
professeur n’arrive pas à terminer son cours à 100%, il se trouve devant deux choix ; terminer
le cours le plus tôt possible, dans ce cas on trouve un décalage entre le professeur et les
Chapitre
étudiants, parce que la plupart ne comprennent 1 :Ou présenter un cours résumer
pas le cours.
qui pourra manquer des détailles importantes.
Contexte
I. 1. b. Objectif de la solution : général du projet
Afin de résoudre cette problématique, on a pensé à créer une application web de travail
collaboratif qui permet une gestion des formulaires. Ces formulaires sont créés par les
professeurs et seront remplis par les étudiants.

L’application choisie doit faciliter la tâche de la communication entre le professeur et


l’étudiant, en donnant un accès et un pouvoir de passer des quizz pour l’étudiant, et présenter
les résultats au professeur.

Cette application de travail collaborative permettra de :

Control et gestion des usagers ;


Création et édition des formulaires (par les professeurs) ;
Accès à la Base de données lecture et écriture (admin) ;
Remplition des formulaires ( par les étudiants ) ;
Corriger les formulaires( par les professeurs) ;
Extraction et traitement des résultats.

11
Besoins fonctionnels de l’application :

Le système doit permettre de générer des formulaires à partir d'une page Web offrant
un accès exclusif aux enseignants ;
Les formulaires doivent pouvoir être consultés par les étudiants pour l'envoi des
formulaires corrigés ;
Les différents formulaires doivent être stockés dans la base de données pour pouvoir
être consultés à partir du site Web ;
Les comptes des étudiants, des professeurs peuvent être créés à partir de la page
principale.

Technologie :

 Dans le serveur on doit avoir installer Apach, php, mysql workbench,


 La liaison de la base des données framework symfony.
 La base des données doit être optimisée

I. 1. c. Contraintes :

Contraintes en termes de délais :

A partir de la livraison du cahier des charges, nous disposons d’environ deux mois pour la
réalisation du projet. Le délai semble court pour le projet entier dédié à la gestion des
formulaires, mais reste suffisant avec une bonne planification ainsi qu’une bonne organisation
du déroulement des différentes étapes de ce projet .

Contraintes de sécurité :

La gestion de la sécurité est la principale contrainte de notre système. L'application doit


posséder une gestion de privilèges et de niveaux d'accès pour les différents types d'utilisateurs
(étudiants, professeur, ..).

Contraintes techniques :

Pour le développement de notre système, nous utilisons les langages de programmation


suivants : HTML/CSS , JAVASCRIPT et PHP, et le framework Symfony. La structure de
notre système doit être extensible et compatible avec le maximum des navigateurs pour
s’assurer que le site s’affichera correctement et avec la même apparence sur différents écrans.
De plus, le développement devra suivre toutes les normes techniques pour une meilleure
performance, maintenance et facilité de mise à jour. Notre système doit contenir trois sous
systèmes :

1. Système pour créer des formulaires


2. Système pour remplir les formulaires
3. Système pour consulter les résultats

12
I. 1. e. Cahier de charge :

Lors des réunions avec notre encadrant, on a spécifié un cahier de charge afin d’aboutir à la
réalisation du projet :

o Spécifier les différents éléments de l’application ;


o Spécifier les utilisateurs de l’application ( étudiants et professeurs et admin) ;
o Définir l’administrateur de l’application ( admin ) ;
o Définir les privilèges donnants aux administrateurs et les étudiants et les
professeurs ;
o Elaborer des diagrammes ( use case, Séquences, Classe, MCD) représentant les
fonctionnalités de l’application ;
o Choisir le framework le plus convenient ( Symfony ) ;
o Définir la structure de l’application.

I. 2. Planification du projet :

Afin de modéliser la planification des tâches nécessaires à la réalisation de notre projet, On a


établi les étapes suivantes :

Planification : Une première analyse du projet nous a permis de définir une suite d’étapes à
suivre pour sa réalisation.

Spécifications :Durant cette étape, nous allons définir clairement ce qui doit être réalisé pour
atteindre chaque objectif du projet.

Conception : Cette phase permettra de faire le choix entre les différentes solutions techniques
en respectant les contraintes du projet.

Programmation : Écriture du code des différents modules et leurs fonctionnalités.

Tests unitaires : Cette étape se chevauche avec l'étape de programmation, les tests unitaires
devront être effectues pendant le développement pour s'assurer du bon fonctionnement du
chaque module du l'application.

Intégration : Regroupement de l'ensemble des modules après leur validation par chaque
développeur des composants qu'il a réalisé.

Test global : Cette partie permet de s'assurer que toutes les fonctionnalités de l'application
sont valides, après l'intégration. Le diagramme ci-dessous illustre pour chaque étape du
déroulement du projet, les dates de début et de fin ainsi que la durée.

13
Figure 1 : planification du projet

14
Chapitre 2 :
Conception du projet

15
I. UML :
Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language (UML), est un
langage de modélisation graphique à base de pictogrammes conçu pour fournir une méthode
normalisée pour visualiser la conception d'un système. Il est couramment utilisé en
développement logiciel et en conception orientée objet.

UML est utilisé pour spécifier, visualiser, modifier et construire les documents nécessaires au
bon développement d'un logiciel orienté objet. UML offre un standard de modélisation, pour
représenter l'architecture logicielle.

I.1.Outil utilisé :
StarUML :StarUML est un logiciel de modelage UML qui est entré récemment dans le
monde de l'OpenSource. Ecrit en Delphi, il est modulaire et propose plusieurs générateurs de
code.

PowerAMC :un logiciel de conception créé par la société SAP, qui permet de modéliser les
traitements informatiques et leurs bases de données associées.

I.2.Diagramme de comportement :
Diagramme Use Case :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.

16
Figure 2 : Diagramme Use Case

17
Identification :

Titre : application de travail collaboratif

Acteurs principaux : professeur, étudiant.

Acteurs secondaire : système

Responsable : Admin

Les fonctionnalités de l’application :

Acteur : Etudiant

 L’Etudiant doit s’authentifier pour acceder à son espace ;


 L’Etudiant a le pouvoir de remplir les formulaires afin de les envoyés ;
 L’Etudiant peut consulter les notes à partir de la page de notation.

Acteur : Professeur

 Le professeur doit s’authentifier pour acceder à son espace ;


 Le professeur peut gestionner les formulaires :
 Créer des formulaires afin de les envoyés aux étudiants ;
 Supprimer des formulaires ;
 Modifier des formulaires déjà crées .
 Le professeur peut corriger les formulaires et consulter les notes.

Acteur : Admin

 L’Admin peut faire la gestion des comptes :


 Créer des comptes ( Etudiant/ Professeur ) ;
 Supprimer des comptes ;
 Modifier des comptes .
 L’Admin peut consulter les comptes déjà crées.

18
I.3.Diagrammes d'interaction :
Diagramme de Séquence :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.

Coté étudiant :
1) Identification d’étudiant :

Figure 3 : Diagramme de séquence d’identification d’étudiant

19
Scénarios Nominales :
1. L’ étudiant consulte l’application ;

2. Le système affiche la page d’accueil ;

3.L’ étudiant demande la page d’authentification ;

4.Le système affiche la page d’authentification ;

5.L’ étudiant saisie ses informations ;

6.Le système vérifie les informations saisies sont correctes dans la base des
données ;

7.Le système affiche l’espace étudiant.

Scénarios Alternatifs :
S.A.1 : le compte saisie n’existe pas.

S.A.1 commence au point 6 su scénario nominale.

Le système va afficher un message d’erreur.

Le scénario reprend au point 5.

20
2) Remplissage du formulaire par l’étudiant :

Figure 4 : Diagramme de séquence de remplissage de formulaire par


l’étudiant

21
Scénarios Nominales :
1.L’ étudiant consulte la page des formulaires ;

2.Le système affiche la page ;

3.L’ étudiant choisit le formulaire voulu ;

4.Le système affiche le formulaire qui est déjà sauvegardé a la base des
données ;

5.L’ étudiant remplit le formulaire;

6.L’ étudiant valide ses réponses ;

7.Le système affiche une alerte pour compléter l’opération ;

8.L’ étudiant envoie le formulaire remplie.

Scénarios Alternatifs :
S.A.1 : l’étudiant n’envoie pas le formulaire remplit.

S.A.1 commence au point 9 au scénario nominale.

Le système sauvegarde ou annule le formulaire dépend du choix d’étudiant.

Le scénario reprend au point 7.

22
3) Consultation des notes par l’étudiant :

Figure 5 : Diagramme de séquence de consultation des notes par l’étudiant

23
Scénarios Nominales :
1.L’étudiant consulte la page des notes ;

2.Le système affiche la page ;

3.Le système demande les notes de la base des données;

4. Le système affiche la note sauvegardée dans la base de données ;

5. Le système affiche que les notes.

24
Coté Professeur :
1) Identification Professeur :

Figure 6 : Diagramme de séquence d’identification de professeur

25
Scénarios Nominales :
1.Le professeur consulte l’application ;

2.Le système affiche la page d’accueil ;

3.Le professeur demande la page d’authentification ;

4.Le système affiche la page d’authentification ;

5.Le professeur saisie ses informations ;

6.Le système vérifie les informations saisies sont correctes la base de données ;

7.Le système affiche l’espace des professeurs.

Scénarios Alternatifs :
S.A.1 : le compte saisie n’existe pas.

S.A.1 commence au point 6 su scénario nominale.

Le système va afficher un message d’erreur.

Le scénario reprend au point 5.

26
2) Création des formulaires :

Figure 7 : Diagramme de séquence de création de formulaire

27
Scénarios Nominales :
1. Le professeur consulte la page des formulaires ;

2. Le système affiche la page des informations des formulaires ;

3. Le professeur entre les informations ;

4. le professeur valide les informations ;

5. Le système enregistre lesinformations dans la base de données,

6. Le système la page de création des formulaires ;

7. Le professeur remplis les champs ;

8. Le professeur sauvegarde le formulaire;

9. Le système sauvegarde le formulaire ;

10. Le système va publier le formulaire créé par le professeur,

28
3) La correction des formulaires :

Figure 8 : Diagramme de séquence de correction des formulaires par


professeur

29
Scénarios Nominales :
1. Le professeur demande la page de notation,

2. Le système affiche la page de notation,

3. Le professeur demande les formulaires désirées,

4. Le système appel les formulaires du base des données,

5. La base renvoie les formulaires,

6. Le système affiche le formulaire au professeur,

7. Le professeur corrige les formulaires,

8. Le système affiche la note finale,

9. Le professeur enregistre les notes,

10. Le système demande le type d’affichage des notes,

11. Le professeur choisit le type qui le convaincre.

30
4) Consultation des notes :

Figure 9 : Diagramme de séquence de consultation des notes par professeur

31
Scénarios nominales:
1. Le professeur consulte la page des notes,

2. Le système affiche la page,

3. Le professeur choisit les notes désirées,

4. Le système affiche les notes sauvegardées dans la base de données,

32
Coté Admin :
1) Identification admin :

Figure 10: Diagramme de séquence d’identification d’admin

33
Scénarios Nominales :
1. L’ admint consulte l’application ;

2. Le système affiche la page d’accueil ;

3. L’ admin demande la page d’authentification ;

4. Le système affiche la page d’authentification ;

5.L’ admin saisie ses informations ;

6. Le système vérifie les informations saisies sont correctes dans la base des
données ;

7. Le système affiche l’espace admin.

Scénarios Alternatifs :
S.A.1 : le compte saisie n’existe pas.

S.A.1 commence au point 6 su scénario nominale.

Le système va afficher un message d’erreur.

Le scénario reprend au point 5.

34
2) Création des comptes des professeurs :

Figure 11: Diagramme de séquence de création du compte professeur par


l’admin

35
Scénarios Nominales :
1. L’administrateur consulte la page d’admin ;

2. Le système affiche la page ;

3. L’administrateur demande de créer un compte professeur ;

4. Le système affiche le formulaire pour le remplir avec les infos du professeur ;

5. L’administrateur remplit le formulaire ;

6. L’administrateur valide le formulaire ;

7. Le système sauvegarde les infos dans la base de données ;

8. Le système affiche que le compte est crée.

36
3) Création des comptes des étudiants :

Figure 12: Diagramme de séquence de création du compte étudiant par


l’admin

37
Scénarios Nominales :
1. L’administrateur consulte la page d’admin,

2. Le système affiche la page,

3. L’administrateur demande de créer un compte professeur,

4. Le système affiche le formulaire pour le remplir avec les infos du professeur,

5. L’administrateur remplit le formulaire,

6. L’administrateur valide le formulaire,

7. Le système sauvegarde les infos dans la base de données,

8. Le système affiche que le compte est crée.

38
I.3 Diagrammes de structure :
Diagramme de classes :représentation des classes intervenant dans le système.

Figure 13 : diagramme de classes

39
Chapitre 3 :
Introduction au travail collaboratif et outils utilisés

40
Introduction :

Après avoir traité le contexte général du projet et son conception, ce troisième


chapitre propose une étude du travail collaboratif, et les outils utiliser pour
réaliser l’application et résoudre la problématique.

I. Le travail collaboratif :

I. 1. Définition :

Le travail collaboratif est le travail réalisé en commun par plusieurs personnes


qui mutualisent leurs connaissances et leurs compétences, s'organisent et
coordonnent leurs actions pour obtenir un résultat dont ils sont collectivement
responsables.
Les nouvelles technologies d'information et de communication sont l'outil
indispensable de ce mode de travail.
L'objectif du travail collaboratif est de réussir à faire coopérer et à fédérer une
ou des équipes autour d'un but commun, partageant des ressources, des
connaissances, un projet et des outils. Les fondements d'une démarche de travail
collaboratif reposent également sur des comportements et des postures dont le
but essentiel est une volonté de coopérer.
I. 2. Les outils de travail collaboratif :
Les moyens numériques sont très diversifiés, dans un environnement fermé
(intranet, plateforme de formation) ou ouvert (Internet, réseaux sociaux) :
 Des outils de communication : la messagerie instantanée, les réseaux
sociaux d’entreprises, les forums de discussion, le chat audio ou vidéo, le
téléphone ;
 Des outils d'organisation ou plateformes collaboratives : l'agenda pour
programmer les actions et rendez-vous, les logiciels de gestion de projet
comme Planzone ;
 Des outils de stockage et de partage : les services de stockage en ligne ;
 Des outils de création partagés :les wikis permettant d'écrire à plusieurs
ou les blogs partagés ou encore les pages créées sur les réseaux sociaux.

41
II. Les outils utiliser pour la réalisation de l’application :

II. 1. Introduction :

On a utilisée plusieurs outils pour assurer le bon fonctionnement de


l’application, Le principal outil qu’on a utilisée est Symfony qui est un
framework PHP développé par la société française SensioLabs.

Nous allons décomposer chaque partie de la phrase précédente.

PHP:

PHP est un langage de programmation libre côté serveur, il permet de


rendre les pages d'un site web dynamique via un serveur HTTP mais peut
également être utilisé en local. C'est un langage orienté objet et est à
l'origine de site web célèbre comme Facebook ou encore WikiPédia.

Framework :

Les frameworks permettent de réduire les temps de développement des


applications en répondant de façon efficace aux problèmes rencontrés le
plus souvent par les développeurs.

Un framework peut être indiqué comme étant une boîte à outils, en ce sens
qu'il propose, dans le cas de Symfony, un certain nombre de fonctionnalités
pour faciliter le travail, l'accélérer et même automatiser des parties, des
tâches que les développeurs rencontrent lors du développement d'une
application web. C'est le côté « work » du framework.

Un framework est un cadre structurel, c'est le côté « frame » du framework,


il oblige a procéder de certaines manières pour mieux libérer le processus
intellectuel. Il permet au développeur de ne plus s'occuper des tâches
répétitive et les présentent clairement pour faire face à l'augmentation de la
complexité.

42
L'ORM Doctrine :

Doctrine est l'ORM (Object-Relational Mapping) intégré par défaut dans


Symfony. Un ORM est un logiciel qui permet de donner l'illusion de
travailler avec une base de données objet alors que l'on est sur une base de
données relationnelle.

Grâce à cela le développeur ne fait plus de requête SQL et travailles avec


ses objets, sauvegarde ses objets à coups de « save » sans se soucier des
requêtes que l'ORM met en route à sa place. Il n'y plus besoin de modifier
toutes vos requêtes SQL une après l'autre, tout ce que vous avez à faire est
de vous concentrer sur votre application, générer vos classes et l'ORM se
chargera de créer la base, les tables, les relations et des gérer les données.

Ainsi grâce à l'ORM intégré dans le framework on fait encore gagner du


temps au développeur, du temps qu'il peut investir dans les algorithmes ou
le templating, un moteur de template est aussi fourni avec Symfony et il
s'agit de Twig !

Le moteur de template Twig :

Twig est un moteur de template utilisé pour des pages HTML recevant du
PHP. L'auteur de ce célèbre outils est Fabien Potencier, le créateur de
Symfony et co-fondateur de SensioLabs.

L'outils permet de réaliser des templates plus propres, il n'y a plus aucune
balise PHP dans les pages HTML ce qui facilite la lecture du code.

Symfony :

Symfony est un framework PHP. Il fournit une méthodologie, et des outils.


Il intègre des outils qui lui apporte des fonctionnalités intéressante et qui
ne sont pas de trop comme l'ORM Doctrine et un moteur de template
(Twig).
Comme tout framework il nécessite un temps de formation, d'apprentissage
des bonnes pratiques. Mais ce temps en vaut la peine !
Symfony utilise des bundles pour ajouter, retirer, modifier des
fonctionnalités sur les projets.

43
Les bundles sont utilisable sur tout les projets, il existe des bundles pour à
peu près tout, il existe des bundles pour faire des blogs, des forums, des
systèmes de paiement en ligne, etc.
Les formulaires sont aussi simple à mettre en place grâce à Symfony, il
vous suffit d'indiquer l'objet pour lequel vous souhaitez créer ce formulaire
et Symfony est capable de générer les champs en fonction des informations
dont il dispose.
Enfin la communauté utilisant le framwork Symfony est très active, comme
beaucoup de projet open source, ce qui permet d'être plutôt bien informé et
guidé en cas de problème par des utilisateurs certifiés. SensioLabs met en
place des certificats que l'on peut passer dans des centres d'examens
comme des certificats Microsoft ou Cisco.
De plus le framework Symfony est un des meilleurs, avec plus de 300 000
développeur Symfony recensé à travers le monde.

BOOTSTRAP :

Bootstrap est un framework développé par l'équipe du réseau social Twitter. Proposé
en open source (sous licence MIT), ce framework utilisant les langages HTML, CSS
et JavaScript fournit aux développeurs des outils pour créer un site facilement. Ce
framework est pensé pour développer des sites avec un design responsive, qui
s'adapte à tout type d'écran, et en priorité pour les smartphones. Il fournit des outils
avec des styles déjà en place pour des typographies, des boutons, des interfaces de
navigation et bien d'autres encore.

jQuery

jQuery est une librairie Javascript libre qui fait interagir javascript et HTML et
dont l'intérêt est de simplifier les commandes les plus utilisées. Sortie en 2006,
elle est depuis utilisée sur de nombreux sites comme Google, Mozilla, Amazon,
etc.

44
Chapitre 4 :
Travail réalisé

45
I. Introduction :

Dans ce chapitre on va vous présentez notre application, on va d’abord montrer


le code source puis ( back-end ) puis on va passer au design de l’application et le
résultat final ( front-end ).

II. présentation du code source :

1) Gestion d’erreur :

La gestion des erreurs est un élément important dans une application Web.
Avoir des messages suffisamment explicatifs sur vos pages d'erreur peut
apporter une plus-value à votre application, et à l'expérience utilisateur.
Symfony propose des pages d'erreur par défaut, selon les événements, mais il est
possible de les personnaliser.

Dans les applications Symfony, toutes les erreurs sont traitées comme des
exceptions. Peu importe si ce sont juste des erreurs « 404 Objet non trouvé » ou
une erreur fatale déclenchée par une exception dans votre code. Dans
l'environnement de programmation, Symfony détecte toutes les erreurs et affiche
une page d'exception spéciale avec plusieurs informations de débogage pour
vous aider à retrouver rapidement le problème racine.

46
Figure 14: Error.html.twig

47
Figure 15 : Error403.html.twig

48
Figure 16 :Error404.html.twig

49
2) Sécurité :
L'une des raisons qui pousse un développeur sérieux à travailler avec un framework est
l'utilisation de technologies toutes faites pour sécuriser son projet très facilement. Symfony
propose toute une série d'outils qui vous permettent de séruriser vos fonctionnalités
notamment via une distribution de ROLE. (USER, ADMIN, etc.)

Security.yml La manière la plus simple / efficace d'interdire un accès à un utilisateur non


identifié et de passer par le fichier security.yml

Figure 17 : Security.yaml

50
4) Les controleurs :
Le contrôleur correspond au code faisant le lien entre le modèle et la vue. Il récupère les
données utilisateurs pour y appliquer les traitements et donner les résultats à la vue.
Démarrons par ce dernier.

Le contrôleur est la couche qui va exécuter les traitements liés à notre application et
transmettre les résultats à la vue pour que ces derniers puissent être affichés à l'utilisateur.

Figure 18 : SecurityController.php

51
Figure 20 : profController.php

Figure 21 : EtudiantController.php

52
Figure 22: ConsultationAdminController.php

Figure 23 : Ajouterformcontroller.php

53
Figure 24 : UtilisateurController.php

Figure 25 : UserController.php

54
Figure 26 : AdminController.php

55
4) Les forums :
Le principe est d'ajouter des champs de formulaire en PHP, qui seront automatiquement
convertis en code HTML correspondant.

Figure 27 : UtilisateurType.php

Figure 28 : StructureFormType.php

56
5) Les fichiers html.twig :
Travailler avec des templates (ou des vues) permet de séparer le code PHP du rendu. Cela
permet une meilleur organisation du travail, notammement le travail collaboratif ou certaines
personnes sont amenées à ne travailler que sur les vues tandis que d'autres travailleront
qu'avec PHP. On parle alors de BACK (PHP) et de FRONT (HTML). Le moteur de template
TWIG permet d'augmenter le productivité des développeurs FRONT on proposant un langage
spécialisé plus concis et plus clair que peut l'être PHP.

L'idée c'est d'avoir un squelette unique du site et qu'on puisse le récupérer pour chaque page.

Figure 29 : Login.html.twig

57
Figure 30: consultationAdmin.html.twig

Figure 31 : Admin.html.twig

58
Figure 32: creerCompte.html.twig

Figure 33 : prof.html.twig

59
Figure 34 : ajouterForm.html.twig

Figure 35 : index.html.twig

60
61
Figure 36 : index.html.twig

III.présentation de l’application :

Page d’accueil : La page qui s’affiche à toutes les personnes visitant


l’application.

62
Figure 37 : Page d’acceuil
Authentification : La page ou l’utilisateur doit s’authentifier pour acceder à
l’espace qui le convient.

Figure 38 : Authentification


Espace admin :
L’espace qui s’affiche quand un utilisateur avec un role admin s’authentifie.

Page admin : La page ou l’admin choisir la tâche qu’il veut effectuer


( créer un compte/ consultation ).
63
Figure 39 : Page admin
Création des comptes : La page affiche un formulaire remplis par l’admin pour
créer des nouveaux comptes ( professeur/étudiant) et les insérés dans la base des
données.

Figure  40 : Création des comptes


Consultation des comptes : cette page contient tout les comptes crée par
l’adminavec la possibilité de les supprimés et modifier

64
Figure 41 : Consultation des comptes

65
Espace professeur :
L’espace qui s’affiche quand un utilisateur avec le role professeur s’authentifie.

Consultation des formulaires : la première page qui s’affichera pour le


professeur, elle contient toutes les formulaires déjà crées avec un possibilité de
les visualiser, supprimer et modifier.

Figure 42 : consultation des formulaires


Ajouter information du formulaire :cette page contient deux champs
( titre et description ) qui vont s’afficher dans le tableau de la page
d’accueil

66
Figure 43 : ajouter information du formulaire

Création des formulaires : elle contient un formulaire pour entrer la question,


la note et la réponse, ces informations seront afficher dans un tableau sur la
même page, avant de les visualisés comme un formulaire

Figure44 : Création des formulaires

67
Espace etudiant :
C’est l’espace qui s’affiche quandun utilisateur avec le role etudiant
s’authentifie.

Consulter formulaire créer : La première page qui s’affichera aux étudiants, il


contient les formulaires crées pour les remplis.

Figure 45 : Consulter formulaire créer

Remplir formulaire : L’étudiant remplis le formulaire voulu afin de l envoyer


au professeur.

Figure 46: Remplir formulaire

68
Conclusion générale :

Notre projet de fin d’études, «Réalisation d’une application web pour le


travail collaboratif », a pour objectif de créér des formulaires par les
professeurs et les remplir par les étudiants afin de les corriger.
Notre projet s’est déroulé en trois grandes étapes. En premier lieu, on a
procédé à la définition du contexte général du projet afin de préciser ses
objectifs. Pour ensuite, etudier les outils existantes dans le but de choisir
celui qui seront les plus adapté aux besoins de notre application. Ensuite,
on a commencé la mise en place de la solution choisie par réaliser
l’application,
Notre projet de fin d’études, nous a permis de mettre en pratique nos
connaissances acquises durant notre formation à l’Ecole Supérieure de
Technologie d’Oujda. De plus, on a eu l’occasion d’acquérir de nouveaux
concepts, et de nouvelles technologies.

69
Webographie

[ 1 ] : https://www.supinfo.com/articles/single/3195-symfony-c-est-quoi

[ 2 ] : https://symfony.com/

[ 3 ] :http://creersonsiteweb.net/page-apprendre-jquery

[ 4 ] : https://www.journaldunet.com/web-tech/developpeur/1159810-bootstrap/

[ 5 ] : https://fr.wikipedia.org/wiki/UML_(informatique)

[ 6 ] : https://www.commentcamarche.net/contents/659-merise-modele-

conceptuel-des-donnees

70
Liste des abréviations :

UML Langage de Modélisation Unifié

CRUD Create, Read, Update, Delete

ORM Object Relational Mapping

MVC Model View Controller

HTML HyperText Markup Language

CSS Cascading Style Sheets

PHP Hypertext Preprocessor

71
Annexe A : Définitions

Langage de Modélisation Unifié :

Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language (UML), est un


langage de modélisation graphique à base de pictogrammes conçu pour fournir une méthode
normalisée pour visualiser la conception d'un système. Il est couramment utilisé en
développement logiciel et en conception orientée objet.

Diagramme Use Case :

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

Diagramme de séquence :

Les diagrammes de séquences sont la représentation graphique des interactions entre les
acteurs et le système selon un ordre chronologique dans la formulation Unified Modeling
Language.

Diagramme de classes :

Il représente les classes intervenant dans le système. Le diagramme de classe est une
représentation statique des éléments qui composent un système et de leurs relations.

72