Vous êtes sur la page 1sur 26

Université Mohammed Premier

Ecole Supérieure de Technologie


Oujda

Rapport du Projet de Fin d’Études


DUT en Développement d'Applications Informatiques

APPLICATION WEB D’ORIENTATION


SCOLAIRE ET PROFESSIONNELLE

Filière : Développement d'Applications Informatiques

Réalisé par : Encadré par :


Naoual SMAILI M. Abdelhafid SERGHINI
Ahmed OURIARHI

Soutenu le 20 avril 2019 devant le jury :

M. SERGHINI Professeur à l’EST d’Oujda.


M. ABBADI Professeur à l’EST d’Oujda.
M. TAHRICHI Professeur à l’EST d’Oujda.

Année universitaire 2018-2019


Projet de PFE : application web d’orientation scolaire et professionnelle 2019

REMERCIEMENTS

 Au Professeur Abdelhafid SERGHINI qui nous a donné ses


précieuses explications, ses sincères directives, et ses réponses
distinguées afin de réaliser ce projet.

 A tous les membres du jury.

 A toute personne qui nous a encouragé et nous a aidé pour


réaliser ce travail.

2
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Sommaire

Table des figures ...................................................................................................................... 4


Introduction générale ................................................................................................................ 5
Cahier des charges .................................................................................................................... 6
1. Les spécifications fonctionnelles : .................................................................................. 6
2. Les spécifications techniques : ....................................................................................... 7
Chapitre 1 : Conception et modélisation de l’application .......................................................... 8
1. Le langage de modélisation UML : ................................................................................ 8
2. Intérêt de la modélisation ............................................................................................... 8
3. Les avantages d’UML .................................................................................................... 9
4. L’outil Visual Paradigm for UML : ................................................................................ 9
5. Diagramme de cas d’utilisation : .................................................................................. 10
6. Modélisation: ............................................................................................................... 11
Chapitre 3 : Réalisation et implémentation de l’application ..................................................... 13
1. Les technologies utilisées : ........................................................................................... 13
2. L’environnement du développement : .......................................................................... 14
3. Réalisation : ................................................................................................................. 15
3.1. La couche présentation ............................................................................................. 15
3.1.1. Volet 1: Partie public : .......................................................................................... 15
3.1.2. Volet 2: Elève : ..................................................................................................... 19
3.1.3. Volet 3: Conseiller : .............................................................................................. 21
3.1.4. Volet 4: Administrateur : ...................................................................................... 23
Conclusion ............................................................................................................................. 25
Webographie : ........................................................................................................................ 26

3
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Table des figures


Figure 1 : Diagramme de cas d'utilisation. .............................................................................. 10
Figure 2 : Modèle physique de données .................................................................................. 11
Figure 3 : Diagramme de classes............................................................................................. 12
Figure 4 : Schéma des routes .................................................................................................. 15
Figure 5 : Page d'accueil ......................................................................................................... 16
Figure 6 : informations pop-up ............................................................................................... 17
Figure 7 : page de connexion .................................................................................................. 17
Figure 8 : page d'inscription .................................................................................................... 18
Figure 9 : Forum ..................................................................................................................... 19
Figure 10 : Poser une question au forum ................................................................................. 19
Figure 11 : Répondre à une question ....................................................................................... 20
Figure 12 : Profile d'élève ....................................................................................................... 21
Figure 13 : profile du conseiller .............................................................................................. 21
Figure 14 : Tableau de bord - Conseiller ................................................................................. 22
Figure 15 : Formulaire d’ajout - Concours .............................................................................. 22
Figure 16 : interface d'administration ...................................................................................... 23
Figure 17 : Formulaire d'ajout d'un conseiller ......................................................................... 24

4
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Introduction générale

De nos jours, l'orientation scolaire et professionnelle est d’une importance particulière du


moment qu’elle détermine fortement les chances d'une insertion professionnelle réussie sur le
marché du travail, qui est devenu de plus en plus exigent.

L'orientation, c'est d'abord une science au service de chaque individu réfléchissant à son avenir
professionnel. Peu importe son âge, à partir du moment où il/elle se projette dans l'avenir et
réfléchit à son futur métier, le processus d'orientation est déclenché. Ainsi, S’orienter c’est «
prendre ses repères », « faire des choix en connaissance de cause », c’est « construire
progressivement son propre parcours de formation et d’insertion », c’est « apprendre à devenir
autonome et lucide dans ses décisions ».
Pour cela, d’une part on trouve que l’Etat a construit le COPE (Centre d’Orientation et
Planification Educatif) à Rabat pour former les conseillers en orientation.
D’autre part, on trouve aussi des sites d’orientation comme Tawjihnet, 9rayti.

Les grands sites d’orientation au Maroc qu’on a précité, n’ont pas traité tous les besoins des
élèves. Ils offrent des informations certes, mais ils oublient qu’il y a un manque de
communication entre les conseillers et les élèves.

Pour cela, nous avons eu l’idée comme projet de développer une application web d’orientation
scolaire et professionnelle. Dans ce rapport, on va présenter les différentes étapes suivies pour
mener ce projet à son terme.
Nous avons essayé de développer l’application d'une manière différente de ceux déjà existant,
où nous avons essayé de travailler sur la possibilité d’instaurer un moyen de communication
entre l'élève et le conseiller.

5
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Cahier des charges


Dans cette partie, on présente le cahier des charges du projet tel qu’il a été proposé :
Il s’agit du développement d’une application web d’orientation scolaire et professionnelle.
Cette application aura pour cible les lycéens et leur entourage (professeurs, proviseurs de
lycées, parents) et les conseillers en orientation scolaire, et comme objectif :
• Fournir des informations sur les filières au lycée (Horizons de chaque filière...)
• Indiquer des informations sur les possibilités de réorientation, passerelle, concours...
• Apporter des informations aux lycéens sur les études supérieures
• Présenter les manifestations organisées pour permettre des rencontres entre lycéens,
professeurs et Universités

InaWay ?
Nous avons choisi « InaWay » comme nom de l’application, qui est un nom composé de :
‘Ina ’ c’est un terme marocain qui signifie Quelle ? et ‘way’ c’est en anglais et ça veut dire le
chemin.
Donc InaWay c’est Quelle chemin choisir ?

1. Les spécifications fonctionnelles :

L’application permettra aux utilisateurs les services suivants :


Pour le lycéen :
 D’apporter des informations aux lycéens sur les études supérieures
 De présenter les manifestations organisées pour permettre des rencontres entre lycéens,
professeurs et Universités
 D’indiquer des informations sur les possibilités de réorientation, passerelles…

Pour le conseiller en orientation :


 Organiser des rendez-vous avec les lycéens
 Donner d’informations (publication des documents officiels, des annonces…)
 Répondre aux questions des élèves dans le forum.

Pour l’administrateur :
 Tous les services offerts pour un conseiller.
 Gestion des conseiller
 Approuver des publications des conseillers

6
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Pour les services offerts aux conseillers et aux administrateurs et le forum ne sont accessibles
qu’après l’authentification par un email et un mot de passe corrects. L’email et le mot de passe
sont choisis lors de l’inscription pour l’élève, alors que les conseillers sont déjà enregistrés dans
la base de données depuis les annuaires du COPE (30 lauréats chaque année).

2. Les spécifications techniques :

L’application doit être développée en respectant les spécifications techniques ci-dessous :

- La modélisation du schéma de la base de données et de l’application doit être effectuée


avec le langage de modélisation UML.
- L’architecture de l’application doit respecter le modèle MVC 2.
- Serveur de base de données : MySQL.
- Langages de programmation:
 Back end: le framework PHP Symfony 4
 Front end: HTML5, CSS3, Bootstrap, JS coté client

7
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Chapitre 1 : Conception et modélisation de l’application


Penser avant d’agir, faire des plans avant de construire, concevoir d’abord, développer ensuite
c’est la démarche qui doit être suivie lors du développement d’une application et pour réussir
n’importe quel projet.
En effet, La conception d’un système informatique est une étape très importante dans la mesure
où elle influence la qualité et la fiabilité de toute application.

1. Le langage de modélisation UML :

Pour modéliser les fonctionnalités de l’application et représenter son architecture ainsi que les
interactions entre ses différents composants, on a choisi le langage UML.

"UML (en anglais Unified Modeling Language ou « langage de modélisation unifié ») est un
langage de modélisation graphique à base de pictogrammes. " Il est apparu dans le monde du
génie logiciel dans le cadre de la « conception orientée objet ».
Ce langage définit plusieurs diagrammes qui servent à visualiser un système sous différentes
perspectives.
Parmi ces diagrammes on cite :
 diagramme de classes
 diagramme d'objets
 diagramme de cas d'utilisation
 diagramme de séquences et diagramme de collaboration
 Et bien d’autres.

Dans la conception, on a réalisé un diagramme de cas d’utilisation qui représente l’ensemble de


cas d'utilisations de l’application ainsi que les acteurs et un diagramme de classes dans lequel
on a bien précisé les relations entre les classes de notre application et on a aussi ajouter un
modèle physique de données pour bien détailler les tables avec les relations entre eux.

2. Intérêt de la modélisation

L’utilisation de la modélisation conceptuelle dans le développement des systèmes


d’information permet de prendre en compte les besoins des applications d’une façon plus
adéquats et de présenter d’une manière abstraite certains aspects des systèmes physiques et
humains.

8
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

3. Les avantages d’UML

 UML est un langage formel et standardisé.


o Gain de précision.
o Motivation à l’utilisation d’outils.
o Gain de stabilité et de fixité.
 UML est un support de communication adéquat et compétitif.
o Il éclaire et facilite la compréhension de représentation abstraite complexe.
o UML a pour objectif de spécifier, édifier et documenter les systèmes à base de
logiciel.
o UML n’est pas une méthode mais une notation qui laisse la liberté de la conception.
o UML est un langage qui permet de modéliser tous les types de systèmes
informatiques mais, qui nécessite toutefois une méthodologie de conception.

4. L’outil Visual Paradigm for UML :

Pour la réalisation des diagrammes UML on a utilisé une version d’évaluation du logiciel
Visual Paradigm for UML qui est un logiciel de modélisation. Il permet de créer les
différents diagrammes d’UML, il est simple d'utilisation, personnalisable et dotée d'une
interface intuitive. Il intègre en outre des fonctions de génération de code pour les bases de
données et divers langages de programmation.

9
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

5. Diagramme de cas d’utilisation :

Le diagramme de cas d’utilisation suivant représente les différentes fonctionnalités offertes par
l’application:

Figure 1 : Diagramme de cas d'utilisation.

Cette application utilise deux catégories d'utilisateurs après l'inscription :


- Conseiller : Déposer des informations sur l’application, et participer sur les forum avec les
élèves .
- Elève : Collecter les informations sur les études au lycée et les études supérieurs.
Il y a aussi un côté d’administration pour gérer les utilisateurs, et Accepter ou refuser
les publications des conseillers.

10
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

6. Modélisation:

4.1. Modélisation du schéma de la base de données :


Les diagrammes ci-dessous représentent le schéma de la base de données de l’application:

Figure 2 : Modèle physique de données

Nous avons créé 15 tableaux dans la base de données de cette application:


• Sujet : Contenant les questions/sujet posées par les utilisateurs.
• Thème : le thème des sujets suggérés.
• Commentaire : les réponses des sujets suggérés.
• Niveau
• élève : Il contient l'information sur l'étudiant, le niveau, direction et le numéro
l'élève.
• Direction : direction d'étudiant dans l'académie
• Académie : les informations d'académie
• Secteur : secteur des études supérieurs (Public ou Privé).
• études supérieurs : Il contient les informations sur les études supérieurs(secteur et
conseiller qui propose les informations )
• Conseiller : Il contient l'information sur le conseiller, Son Académie.
• Article : Détails des publications affichées sur l’application web
• évènements : Détails de l'événement et forum d'orientation

11
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

• Concours : Informations sur les examens et les concours proposés dans l’application
web.
• Administrateur
• Utilisateur

Parmi les avantages du diagramme de classes on trouve la possibilité de modéliser le schéma


d’une base de données relationnelle pour un SGBDR, c’est-à-dire il peut remplacer un MCD
(Merise). Le diagramme de classes ci-dessous représente la modélisation du schéma de la base
de données de notre application.

Figure 3 : Diagramme de classes

• une école/université (études supérieures) peut appartenir à un seul secteur (public/privée),


• un sujet peut appartenir à un ou plusieurs thèmes,
• un sujet peut avoir un commentaire ou plus,
• une académie peut contenir plusieurs directions,
• une direction peut contenir plusieurs élevés/ conseilles,
• un administrateur est un conseiller avec plus de privilège,
• un élève/conseiller est un utilisateur.

12
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Chapitre 3 : Réalisation et implémentation de l’application

Dans ce chapitre, on va décrire les étapes de l’implémentation de l’application, en précisant les


choix techniques qu’on a choisi. Ensuite on présente les différentes fonctionnalités offertes par
l’application par quelques captures d’écrans des interfaces avec des commentaires.

1. Les technologies utilisées :

1.1. Symfony :
Symfony est un framework français open source pour PHP ainsi qu'un framework MVC. Il
fournit des fonctionnalités modulables et adaptables qui permettent de faciliter et d’accélérer le
développement.
Pour développer notre application on a utilisé Symfony 4.

Pourquoi Symfony ?
On a choisi le framework Symfony pour les raisons suivantes:

 Un développement bien organisé: Les fichiers doivent respecter une syntaxe particulière
et doivent se trouver au bon endroit dans l’arborescence du projet (grâce au design pattern
MVC) ce qui facilite l évolution du travail et la maintenance.
 Une grande performances : les requêtes sont optimisées et sécurisées grâce à Doctrine
l’ORM (couche d'abstraction à la base de données pour PHP) par défaut de ce framework.
 Une grande flexibilité : ce framework est complètement configurable et hautement

sécurisé. Il offre également tous les outils nécessaires pour améliorer la productivité et

accélérer le développement web, tels que la barre d’outils de débogage web, le support

natif pour les environnements de développement, les URL conviviales pour les moteurs de

recherche, etc.

 Une solide réputation : Symfony est open source, et il bénéficie d'une bonne communauté,
grâce au support de cette communauté, on pourra toujours trouver des réponses à nos
question.
 Une haute sécurité : le framework a un bon système de sécurité qui offre plusieurs
fonctionnalités parmi eux la gestion des utilisateurs, la gestion du système

13
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

d’authentification, la gestion d’accès aux pages web. Il intègre des mesures de sécurité
préventives pour lutter contre les failles et attaques XSS, CSRF et injection SQL.
 Un simple système de template : par défaut Symfony utilise le moteur de templating
Twig, qui facilite la tâche, permet de séparer la présentation des données du traitement, de
personnaliser la page web, de rendre les pages web plus lisibles, plus claires avec plus de
sécurité.

2. L’environnement du développement :

2.1. Visual studio code :


On a choisi Visual Studio code car il est léger, support des dizaines de langages parmi eux
Symfony et il a des extensions très intéressantes qui aide à aller plus vite dans le travail on
cite :

 PHP DocBloker : qui permet de créer des documentations facilement en dessus des
fonctions et variables.

 PHP Intelephense : qui fait l’autocomplétion, la gestion des namespaces etc.

 PHP Namespace Resolver : qui importe les bon namespaces et les classes en cas de
besoin.

 Twig language : qui permet d’utiliser les snippets, et aussi d’avoir la coloration
syntaxique dans les fichiers Twig.

2.2. MySQL :
Pour implémenter la base de données on a choisi le serveur de base de données MySQL pour
les raisons suivantes :

 Sa facilité d’installation.

 Sa haute performance.

 Sa fiabilité et sa simplicité d'utilisation.

 Sa rapidité

14
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

3. Réalisation :
3.1. La couche présentation

La structure de notre application sera selon le schéma suivant :

Figure 4 : Schéma des routes

3.1.1. Volet 1: Partie public :


Avec l’option virtual host sur WampServer, on a personnalisé l’adresse pour notre projet.
En tapant dans la barre d’adresse du navigateur ‘inaway.ma’ sur le port 8000 que le serveur
web est a l’écoute par défaut quand on travail avec Symfony, l’application s’ouvre et une page
d’accueil s’affiche contenant en gros 3 parties :

 la première partie en haut contient trois liens, le premier vers cette même page
d’accueil caché sous le logo, cela reste toujours dans toutes les pages pour facilité
l’accès à la page d’accueil, les autres deux liens vers des formulaires qui pop-up
connexion, l’inscription, ces deux liens ne sont affichés que sur les pages avec accès
public, après l’authentification, ils seront remplacés par un autre lien pour la
déconnexion.
Il y a aussi le bouton "voir plus" qui mène vers notre page facebook , il y a un autre
lien ‘êtes-vous un conseiller ?’ qui mène vers l’interface conseiller qu’on va voir
après.

 La deuxième partie au milieu de laquelle on affiche les nouveautés (pour chaque


route on voit des articles différents) limitées aux 8 derniers articles; lorsqu’on clique
sur un article on obtient les informations nécessaires dans un pop-up figure 6 .
Un bouton voir plus encore une fois pour afficher touts les articles( au delà de 8).

15
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

 La troisième partie en bas de la page est divisée en 4 colonnes


• Un menu composé d’un groupe de liens vers tous les actions offertes pour le
public.
• Un menu des liens vers les fonctions du SecurityController (connexion figure 7
qui offre la possibilité de s’authentifier par un email et un mot de passe,
inscription figure 8 pour l’enregistrement des nouveaux élèves et deconnexion).
• Un menu pour le forum (si l’utilisateur est connecté on voit un lien vers le
forum, sinon on voit le texte comme sur l’image).
• Finalement il y a la colonne qui contient une petite description sur l’application.
Avec des petites icônes tout en bas pour accéder aux réseaux sociaux d’InaWay.
Ci-dessous, une capture de la page d’accueil :

Figure 5 : Page d'accueil

16
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Figure 6 : informations pop-up

Lorsqu’on clique sur une des sections portantes de l’information, le reste de la description
s’affichera dans un pop-up.

Figure 7 : page de connexion

17
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Dans cette page on a le formulaire de connexion qui reflète la magic du composant de sécurité
offert par Symfony, ce composant traite ce formulaire automatiquement.
Tous les utilisateurs après l’authentification vont bénificier du droit d’acceder au forum et au
leurs profiles, les conseillers vont bénificier de plus d’une page pour déposer des informations
(concours, evénement , écoles supérieures, faculté …)
Les administrateurs vont être capable de gérer les conseillers et d’accepter ou refuser les
publications.

Figure 8 : page d'inscription

Pour les élèves qui sont nouveaux et qui veules a prticiper au forum, on a créer cette page pour
leur donner la possibilité de nous joindre .

18
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

3.1.2. Volet 2: Elève :


Ce volet permet aux élèves après l’authentification de bénéficier de touts les services offerts
précédemment, et en plus il sera capable :

• D’accéder au forum :

Figure 9 : Forum

• De poser des questions :

Figure 10 : Poser une question au forum


19
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

• Et de commenter en cliquant sur le titre de la question, il va être dirigé vers une page
contenant les commentaires sur la question choisi, et un petit formulaire pour laisser un
commentaire depuis la session ouverte.

Figure 11 : Répondre à une question

Et il y a encore une page profil qui affiche des informations sur l’élève au cas où les autres
utilisateurs (conseillers ou élèves) veulent le contactez ou l’inverse.

20
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Figure 12 : Profile d'élève

3.1.3. Volet 3: Conseiller :


Ce volet permet aux conseillers (après l’authentification) d’effectuer les mêmes opérations de
l’élève, et en plus ils peuvent réaliser les opérations suivantes :
• Accéder à son profile pour changer les informations si c’est nécessaire

Figure 13 : profile du conseiller

21
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

• Déposer de nouvelles informations :

Figure 14 : Tableau de bord - Conseiller

En cliquant sur une des sections, un formulaire pop-up grâce au framework Bootstrap (un
modal) qui permet d’ajouter les informations à la base de données.

Figure 15 : Formulaire d’ajout - Concours

22
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

3.1.4. Volet 4: Administrateur :


Ce volet permet aux administrateurs, en plus de toutes les opérations précédentes :

Figure 16 : interface d'administration

23
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

• La gestion des conseillers :

Lorsque l’utilisateur a le rôle d’administrateur, il sera capable d’accéder à la page


d’administration pour gérer les conseillers, il peut

 Ajouter de nouveaux conseillers avec le bouton en haut ‘ajouter un conseiller’.

Figure 17 : Formulaire d'ajout d'un conseiller

 Modifier les informations d’un conseiller si c’est nécessaire en cliquant sur le bouton
avec l’icône dans la colonne d’action au tableau.

 Supprimer en cliquant sur le bouton avec l’icône ‘trash’.

• L’accord des publications :

Il peut aussi accepter ou refuser les nouvelles publications, qui seront affichés dans un tableau
en cliquant sur ce petit bouton oui/non.

Si c’est oui donc l’administrateur à accepter la publication qui sera affichée dans la page
convenable, sinon cela sera archivée dans la base de donnée.

24
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Conclusion

Dans ce projet de fin d’études, nous avons été amenés à concevoir et implémenter une
application web “InaWay” sous le Framework Symfony 4.
Cette application d’orientation scolaire et professionnel ultramoderne offre des fonctionnalités
diverses pour les lycéens, les conseillers et les administrateurs.
Ce travail nous a donné l’occasion d’appliquer dans un cadre professionnel les connaissances
acquises durant notre formation à l'EST, et mettre en évidence nos capacités et nos
compétences dans ce domaine.

Finalement, notre projet ne s’arrête pas une fois que ce rapport est rendu : Si la première phase
de développement voit globalement sa fin ; la prochaine étape sera consacrée au
perfectionnement de certaines fonctionnalités qui vont rendre notre application plus fiable et
ses services plus pertinents.

25
Projet de PFE : application web d’orientation scolaire et professionnelle 2019

Webographie :

 https://openclassrooms.com
 https://www.developpez.com
 https://fr.wikipedia.org
 https://symfony.com/doc/current/index.html

26

Vous aimerez peut-être aussi