Projet de Fin d’Études

Licence Sciences et Techniques Génie Informatique

Département Informatique

Développement d’un site institutionnel pour une Start-up

Lieu de stage :

Réalisé par : Encadré par :

§ Chdaoui Mahfoud § Pr. Ouzarf Mohamed

§ Loulidi latrach Rahma § Mr. Kaarar Mohamed

Soutenu le 04/07/2022 devant le jury composé de :

§ Pr. Najah Said

§ Pr. Oubennaalla Youness
§ Pr. Ouzarf Mohamed

Année Universitaire 2021-2022

Projet de Fin d’Études 2021-2022

Remerciements

Au terme de ce travail, nous souhaitons remercier vivement notre encadrant Pr. Ouzarf
Mohamed pour sa générosité en matière d’encadrement, sa disponibilité, ses précieux conseils,
et son soutien infaillible qu’il n’a pas hésité à nous apporter pour maintenir la bonne démarche
du stage.

Nous profitons également de cette occasion pour exprimer notre gratitude envers notre
encadrant à NAWRA TECHNOLOGY, Mr Kaarar Mohamed, pour nous avoir fait confiance
et nous avoir permis d’intégrer son entreprise pour y effectuer notre stage qui nous a
énormément fait progresser, tant qu’au niveau technique que professionnel.

Nous tenons surtout à exprimer notre reconnaissance et nos vifs remerciements au corps
pédagogique de la Faculté de Sciences et Techniques de Fès ainsi que les intervenants
professionnels responsables de la formation Génie Informatique, en particulier, nos honorables
professeurs et membres du jury : Pr. Najah Said et Pr. Oubennaalla Youness qui nous font
l’honneur d’évaluer notre travail.

2
Projet de Fin d’Études 2021-2022

Résumé

Le projet réalisé dans ce stage a pour but de développer le site institutionnel d’une Start-
up Marocaine spécialisée dans le développement des solutions informatiques.

Ce site permettra aux internautes d’avoir plus d’informations sur l’entreprise, de

consulter des descriptions détaillées sur les solutions, services et offres proposés par cette
dernière, et le plus important de leurs donner un espace pour interagir avec l’équipe de
l’entreprise pour toutes informations complémentaires ainsi que la possibilité de s’inscrire aux
newsletters pour recevoir les nouvelles par e-mail, ou bien pour postuler à une offre d’emploi
ou de stage.

De même ce site web permettra aux personnels de l’entreprise de mieux gérer la totalité
du contenu du site, de l’ajouter , le modifier et le supprimer de manière dynamique.

Pour ce faire, on a réalisé une conception détaillée d’après nos acquis du cours de
modélisation orientée objet en UML pour assurer le bon fonctionnement du site web.

En se basant sur l’étude conceptuelle réalisée et grâce aux technologies implémentées

dans le site web notant HTML, CSS , PHP, Bootstrap et à l’aide de WordPress qui est un CMS
permettant de créer efficacement des sites web dynamiques, notre application web est prête à
être utilisée.

3
Projet de Fin d’Études 2021-2022

Abstract

The project carried out in this internship aims to develop the institutional site of a
Moroccan Start-up specialized in the development of IT solutions.

This site will allow Internet users to have more information about the company and to
consult detailed descriptions of the solutions, services and offers offered by the company, and
most importantly to give them a space to interact with the team of the company for any
additional information or to subscribe to the newsletter to receive news by email, or to apply
for a job or internship offer.

Likewise, this website will allow the team of the company to better manage all of their
content, to add, modify and delete it dynamically.

To do this, we carried out a detailed design based on our knowledge of the object-
oriented modeling course in UML to ensure the proper functioning of the website.

Based on the conceptual study carried out and the technologies implemented in the
website noting HTML, CSS, PHP, Bootstrap and using WordPress which is a CMS allowing to
perfectly create dynamic websites, our web application is ready to use.

4
Projet de Fin d’Études 2021-2022

Table des matières

REMERCIEMENTS .............................................................................................................................................. 2
RÉSUMÉ ................................................................................................................................................................. 3
ABSTRACT............................................................................................................................................................. 4
LISTE DES ACRONYMES................................................................................................................................... 9
INTRODUCTION GÉNÉRALE ......................................................................................................................... 10
CHAPITRE I CONTEXTE GÉNÉRALE DU PROJET .................................................................................. 11
1. PRÉSENTATION DU LIEU DE STAGE................................................................................................. 12
2. ÉTUDE DE L’EXISTANT ......................................................................................................................... 12
2.1. DÉCRIRE L’EXISTANT ......................................................................................................................... 12
2.2. CRITIQUE DE L’EXISTANT................................................................................................................... 12
2.3. SOLUTION PROPOSÉE .......................................................................................................................... 12
2.4. CAHIER DE CHARGE ............................................................................................................................ 13
2.5. CONDUITE DU PROJET......................................................................................................................... 14
2.6. PLANIFICATION DU PROJET ................................................................................................................ 15
CHAPITRE II ANALYSE ET CONCEPTION................................................................................................. 16
1. LANGAGE DE MODÉLISATION ........................................................................................................... 17
2. MODÉLISATION ....................................................................................................................................... 17
2.1. LES ACTEURS DU SYSTÈME ................................................................................................................. 17
2.2. DIAGRAMME DES CAS D’UTILISATION ............................................................................................... 20
2.3. DESCRIPTION DÉTAILLÉE DES CAS D’UTILISATION ET DIAGRAMMES D’ACTIVITÉ ADÉQUATS ....... 22
2.3.1. Authentification ................................................................................................................................. 23
2.3.2. Diagramme d’activité d’authentification .......................................................................................... 24
2.3.3. Ajouter un post ................................................................................................................................... 24
2.3.4. Diagramme d’activité d’ajouter un post ............................................................................................ 25
2.3.5. Modifier un post ................................................................................................................................. 25
2.3.6. Diagramme d’activité de modifier un post ........................................................................................ 26
2.3.7. Postuler à une offre ............................................................................................................................ 27
2.3.8. Diagramme d’activité de postuler à une offre ................................................................................... 28
2.3.9. Réinitialiser le mot de passe ............................................................................................................... 29
2.3.10. Diagramme d’activité de réinitialiser le mot de passe .................................................................... 30
3. MODÈLE STATIQUE ............................................................................................................................... 31
3.1. DIAGRAMME DES CLASSES ................................................................................................................. 31
3.2. SCHÉMA LOGIQUE DES DONNÉES ....................................................................................................... 32
CHAPITRE III RÉALISATION......................................................................................................................... 34
1. SYSTÈME DE GESTION DE CONTENU .............................................................................................. 35
1.1. POURQUOI UTILISER UN CMS ? ......................................................................................................... 35
1.2. WORDPRESS ........................................................................................................................................ 35
2. OUTILS DU DÉVELOPPEMENT ........................................................................................................... 36
3. PRÉSENTATION DES INTERFACES GRAPHIQUES ........................................................................ 38
3.1. AUTHENTIFICATION............................................................................................................................ 38
3.2. INTERFACE DE LA PAGE D’ACCUEIL ................................................................................................... 39
3.3. INTERFACE DE LA PAGE DES SOLUTIONS ........................................................................................... 43
3.4. INTERFACE DE LA PAGE SERVICES ..................................................................................................... 44
3.5. INTERFACE D’UN SERVICE .................................................................................................................. 45
3.6. INTERFACE DE LA PAGE CARRIÈRE .................................................................................................... 46
3.7. INTERFACE DE LA PAGE POSTULER .................................................................................................... 47
3.8. INTERFACE DE LA PAGE À PROPOS ..................................................................................................... 48

5
Projet de Fin d’Études 2021-2022

3.9. INTERFACE DE LA PAGE ARTICLES ..................................................................................................... 50

3.10. INTERFACE DE LA PAGE CONTACT .................................................................................................... 51
3.11. INTERFACES DE GESTION DU CONTENU DYNAMIQUE ........................................................................ 53
3.12. INTERFACE DE GESTION DES CONTACT.............................................................................................. 56
3.13. INTERFACE DE GESTION DES POSTULANTS ........................................................................................ 56
3.14. INTERFACE DE GESTION DES ADHÉRENTS .......................................................................................... 56
3.15. INTERFACE DE GESTION DES PROFILS ADMINISTRATEURS ............................................................... 57
CONCLUSION ET PERSPECTIVE .................................................................................................................. 58
WEBOGRAPHIE ................................................................................................................................................. 59

6
Projet de Fin d’Études 2021-2022

Liste des figures

Figure 1 : Méthode Agile ......................................................................................................... 14
Figure 2: Logo de Trello .......................................................................................................... 15
Figure 3 : Diagramme de Gantt ................................................................................................ 15
Figure 4 : Logo d'UML ............................................................................................................ 17
Figure 5 : Diagramme de cas d’utilisation lié à l'éditeur partie 1 ............................................ 20
Figure 6 : Diagramme de cas d’utilisation lié à l'éditeur partie 2 ............................................ 21
Figure 7 : Diagramme de cas d’utilisation lié à l'administrateur.............................................. 21
Figure 8 : Diagramme de cas d’utilisation lié à l'internaute ..................................................... 22
Figure 9 : Diagramme d'activité lié à l'authentification ........................................................... 24
Figure 10 : Diagramme d'activité d’Ajouter un post ................................................................ 25
Figure 11 : Diagramme d'activité de Modifier un post ............................................................ 26
Figure 12 : Diagramme d'activité de postuler à une offre ........................................................ 28
Figure 13 : Diagramme d'activités lié à la réinitialisation du mot de passe ............................. 30
Figure 14 : Diagramme de classe partie 1 ................................................................................ 31
Figure 15 : Diagramme de classe partie 2 ................................................................................ 32
Figure 16 : Logo de WordPress................................................................................................ 35
Figure 17 : Interface de la page d'Authentification .................................................................. 38
Figure 18 : Message d'erreur mot de passe invalide................................................................. 38
Figure 19 : Message d'erreur au cas de champs non renseignés .............................................. 39
Figure 20 : interface de la page d'accueil partie 1 ................................................................... 40
Figure 21 : interface de la page d'accueil partie 2 .................................................................... 41
Figure 22 : Mail de confirmation d'inscription......................................................................... 42
Figure 23 : en-tête du site web ................................................................................................. 42
Figure 24 : Interface de la page nos solutions .......................................................................... 43
Figure 25 : Interface de la page services .................................................................................. 44
Figure 26 : Interface de la page d'un service ............................................................................ 45
Figure 27 : Interface de la page carrière ................................................................................... 46
Figure 28 : Interface de la page Postuler .................................................................................. 47
Figure 29 : Mail de confirmation de postulation ...................................................................... 48
Figure 30 : Informations du postulant ...................................................................................... 48
Figure 31 : Interface de la page à propos ................................................................................. 49
Figure 32 : Interface de la page Articles .................................................................................. 50
Figure 33 : Interface de la page Contact .................................................................................. 51
Figure 34 : Mail de confirmation ............................................................................................. 52
Figure 35 : Mail de contact ...................................................................................................... 52
Figure 36 : Liste des services ................................................................................................... 53
Figure 37 : Ajouter un service .................................................................................................. 53
Figure 38 : Interface de modifier un service ............................................................................ 54
Figure 39 : Liste des offres ....................................................................................................... 54
Figure 40 : Interface Ajouter une offre .................................................................................... 55
Figure 41 : Interface Modifier une offre .................................................................................. 55
Figure 42 : Interface Gestion contacts...................................................................................... 56
Figure 43 : Interface Gestion postulants .................................................................................. 56
Figure 44 : Interface Gestion des adhérents ............................................................................. 56
Figure 45 : Interface gestion des profils administratifs ............................................................ 57
Figure 46 : Interface ajouter un profil administratif ................................................................. 57

7
Projet de Fin d’Études 2021-2022

Liste des tableaux

Tableau 1 : Description du cas d'utilisation d'authentification ............................................... 23
Tableau 2 : Description du cas d'utilisation Ajouter un post .................................................. 25
Tableau 3 : Description du cas d'utilisation modifier un post ................................................. 26
Tableau 4 : Description du cas d'utilisation postuler à une offre ............................................ 27
Tableau 5 : Description du cas d'utilisation Réinitialiser le mot de passe .............................. 30

8
Projet de Fin d’Études 2021-2022

Liste des acronymes

CMS Content management system

HTML HyperText Markup Language

CSS Cascading Style Sheets

PHP HyperText Preprocessor

SQL Structured Query Language

UML Unified Modeling Language

SGBD Système de Gestion de Base de Données

9
Projet de Fin d’Études 2021-2022

Introduction générale

De nos jours, être présent sur le web est devenu une nécessité pour les entreprises.
Surtout après la crise sanitaire provoquée par la Covid 19 qui a imposé l’utilisation du
télétravail. Ce qui oblige les entreprises à établir une présence sur le web.

Dans ce cadre, et afin de valider nos études acquises au cours de notre formation à la
Faculté des Sciences et Techniques de Fès en vue d’obtenir la Licence spécialisée en
Informatique, nous sommes amenés à effectuer un stage de fin d'études de deux mois, que nous
avons effectué au sein de NAWRA TECHNOLOGY, une Start-up spécialisée dans le
développement des solutions informatiques. Notre mission consiste à mettre en place un
système d’information et une application web multilingue pour cette entreprise. Ce système
vise à institutionnaliser l’entreprise.

Pour atteindre ces objectifs, On va initier une approche orientée objet de conception
suivant la modélisation UML, et utiliser les techniques de web adéquats pour la mise en
œuvre de ce projet.

Le présent document constitue le rapport du projet réalisé dans le cadre de ce stage. Ce

rapport comporte trois chapitres :
Le premier chapitre décrit le contexte général du projet. Nous donnerons dans un
premier temps une idée sur le lieu du stage. En deuxième temps, nous présenterons les objectifs
de notre projet sous forme de cahier de charges.
Dans le deuxième chapitre, nous allons aborder la conception et la modélisation du
système. Dans ce cadre nous détaillerons les différents diagrammes UML réalisés.
Le dernier chapitre sera consacré à la présentation de l’application réalisée ainsi que les
outils de développement utilisés.
Enfin, nous terminerons ce rapport par une conclusion globale du travail réalisé et
quelques futures perspectives.

10
Projet de Fin d’Études 2021-2022

Chapitre I
Contexte Générale du Projet

11
Projet de Fin d’Études 2021-2022

1. Présentation du lieu de stage

NAWRA TECHNOLOGY est une Start-up, qui se lance dans l’industrie des solutions
digitales modernes et innovantes. Leur objectif est de concevoir, réaliser et commercialiser des
produits et des solutions révolutionnaires afin de contribuer à la construction d’un avenir riche
et durable. NAWRA TECHNOLOGY est conçue par un groupe d’ingénieurs, leur objectif est
de mettre en œuvre des nouveaux produits innovants répondants aux demandes et exigences du
marché.

2. Étude de l’existant
2.1. Décrire l’existant

NAWRA TECHNOLOGY est une entreprise nouvelle dans le domaine informatique.

Actuellement, NAWRA TECHNOLOGY ne dispose d’aucun site web pour représenter la Start-
up. Du coup, l’entreprise a une base clientèle faible par rapport à la qualité des solutions
développées.

Pour le moment, la représentation de la Start-up se fait d’une manière physique

(organisation des conférences, contact par des appels téléphoniques, déplacement vers les
clients, etc. ), chose qui demande beaucoup d’effort et un budget important (coût de
déplacement, etc.) et qui n’est pas nécessairement efficace pour cibler le maximum des clients.

2.2. Critique de l’existant

À partir de l’analyse de l’existant, nous avons conclu que la représentation physique de

la Start-up n’augmente pas les chances d’avoir une grande base clientèle.
Puisque l’entreprise essaie d’être plus reconnue dans le domaine et d’enrichir sa base
clientèle, elle est obligée d’établir une présence sur le web, en réalisant un site institutionnel,
son but est de promouvoir l’image de l’établissement. Il présente généralement l’entreprise, son
fonctionnement, ses services ainsi que les valeurs qu’ils souhaitent véhiculer.
Notre mission va consister à la conception, la modélisation, et la mise en œuvre d’un
site web multilingue pour cibler les clients de différentes nationalités et non seulement les
clients Marocains.

2.3. Solution proposée

Pour atteindre cet objectif, la solution proposée est de mettre en place un système
d’information et une application web multilingue (en français, arabe, et anglais) pour cibler

12
Projet de Fin d’Études 2021-2022

des clients de différentes nationalités. Ce système vise à institutionnaliser l’entreprise. De

même, il va disposer des fonctionnalités suivantes :
• Un espace pour informer les internautes sur les nouvelles de l’entreprise et leurs
donner la possibilité de s’inscrire aux newsletters, de cette façon, ils vont recevoir ces
nouvelles via e-mail.
• Offrir aux internautes un espace pour consulter les solutions digitales, et les services
informatiques disponibles.
• Donner aux clients la possibilité d’émettre leurs avis ou de contacter l’entreprise pour
toutes informations complémentaires.
• Un espace pour proposer les offres d’emploi ou de stage disponibles avec toutes les
précisions nécessaires (type de contrat, période, etc.) et donner aux internautes la
possibilité de postuler à ces offres.
• Une partie pour mettre en place les valeurs et l’éthique de l’équipe de l’entreprise ainsi
que leur historique en précisant les dates clés qui marquent l’évolution de l’entreprise,
ce qui va établir des relations constructives entre l’équipe et les clients.
• Un blog pour publier les différents articles concernant le domaine informatique.
• Donner aux internautes la possibilité de choisir la langue du site.
• Un espace admin pour faciliter aux personnels de l’entreprise, la gestion et
l’organisation de la totalité du contenu du site et des langues à l’aide du tableau de
bord.

2.4. Cahier de charge

Avant de commencer la réalisation de notre projet, nous avons réalisé le cahier de

charges de notre application web. Pour ce faire, nous avons effectué plusieurs réunions avec le
directeur générale de l’entreprise. Nous avons ainsi identifié les acteurs du système et les
fonctionnalités que le système doit leurs offrir.

Les acteurs :

§ L’administrateur.
§ L’éditeur.
§ L’internaute.

Les fonctionnalités :

§ L’administrateur :

• Authentification.
• Gestion des profils administratifs.
• Gestion du mode maintenance du site.
• Gestion des langues.
• Gestion des solutions.

13
Projet de Fin d’Études 2021-2022

• Gestion des services.

• Gestion des évènements.
• Gestion des offres.
• Gestion des articles.
• Gestion des adhérents.
• Gestion des contacts.
• Gestion des postulants.

§ L’éditeur :

• Authentification.
• Gestion des langues.
• Gestion des solutions.
• Gestion des services.
• Gestion des évènements.
• Gestion des offres.
• Gestion des articles.
• Gestion des adhérents.
• Gestion des contacts.
• Gestion des postulants.

§ L’internaute :

• Consulter le contenu du site.

• Postuler à une offre d’emploi ou de stage.
• Contacter l’équipe de l’entreprise.
• S’inscrire à la newsletter.

2.5. Conduite du projet

Pour posséder à la réalisation de notre projet, l’équipe de l’entreprise nous a proposé de
travailler avec la méthode Agile.

Figure 1 : Méthode Agile

14
Projet de Fin d’Études 2021-2022

Le principe de la méthode Agile est de prévoir la fixation d’objectifs à court terme. De

cette façon le projet est fragmenté en plusieurs sous-parties que nous devons atteindre
progressivement en ajustant si nécessaire les objectifs pour répondre le plus possible aux
attentes de l’entreprise. On parle alors de sprints (figure 1). La méthode Agile permet
de renforcer les relations entre l’équipe et l’entreprise. Pour cette raison ,on a utilisé l’outil de
travail TRELLO (figure 2) où notre encadrant de l’entreprise , nous donne des cartes contenant
les objectifs à atteindre chaque semaine, chaque carte passe par des différents états : à faire, en
cours, terminé et en revue.

Cet outil nous a assuré la répartition des tâches et la facilitation du travail à distance.

Figure 2: Logo de Trello

2.6. Planification du projet

La planification du projet porte sur la prévision du déroulement des tâches tout au long
des phases constituant le cycle de développement. Pour la schématiser nous avons choisi
d’utiliser l’outil graphique Canva qui est une plateforme de création graphique conçue pour
faciliter la création des contenus visuels, il nous a permis la planification du projet à travers la
réalisation du diagramme de Gantt.

Figure 3 : Diagramme de Gantt

15
Projet de Fin d’Études 2021-2022

Chapitre II

Analyse et conception

16
Projet de Fin d’Études 2021-2022

1. Langage de modélisation

Figure 4 : Logo d'UML

Nous avons utilisé la méthode orientée objet pour réaliser la conception de notre
système. En effet cette dernière peut réunir des éléments du monde réel ainsi que des concepts
ou des idées spécifiques à la profession ou au domaine dans lequel le système sera intégré. La
modélisation objet consiste à définir, en première étape, ces éléments sous forme de types, donc
indépendamment de l'implémentation. Nous avons choisi le langage de modélisation le plus
utilisé :

UML : C'est un langage de modélisation, défini comme une norme de modélisation objet
qui sert à décrire et à documenter un système d'information.

2. Modélisation
2.1. Les acteurs du système

Définition d’un acteur :

Un acteur représente un rôle d'un utilisateur qui interagit avec le système modélisé. L’acteur
peut être un utilisateur humain, une machine, ou un autre système externe.

Dans le cas de notre application , les acteurs qui interviennent avec le système sont :

o Les éditeurs: ce sont les acteurs responsables de la gestion du contenu du système

.Leurs interactions se résument comme suit :

• Authentification :

L’application doit donner aux éditeurs le droit de s’authentifier en utilisant un login et un

mot de passe pour accéder à leurs espaces.
De même elle doit permettre aux éditeurs de réinitialiser leurs mots de passe en cas d’oubli.

• Gestion des solutions :

Une solution est un projet informatique (logiciel, application, etc.) développée par l'équipe de
l’entreprise en réponse à une commande d'un client ou bien aux besoins et exigences du
marché. L’éditeur aura la possibilité d’ajouter une nouvelle solution de manière dynamique,
ou bien modifier ou supprimer une solution existante dans le base de données.

17
Projet de Fin d’Études 2021-2022

• Gestion des services :

Les services informatiques englobent les services liés aux logiciels informatiques et les
services de traitement de données, y compris les services de conseil et d’installation des
logiciels .

Le système doit offrir aux éditeurs la possibilité de gérer les services proposés par l’entreprise.
L’éditeur doit pouvoir enregistrer un nouveau service dynamiquement , ou bien modifier ou
supprimer un service existant dans le base de données.

• Gestion des offres :

Une offre est une proposition d’emploi avec un contrat à durée indéterminée (CDI) ou bien un
stage avec un contrat à durée déterminée (CDD). Le système doit donner aux éditeurs le
droit de gérer les offres d’emploi ou de stage proposées par l’entreprise. L’éditeur aura
la possibilité d’ajouter une nouvelle offre de façon dynamique , ou bien modifier ou
supprimer une offre existante dans la base de données.

• Gestion des événements :

Un événement représente une date clé qui marque l’évolution de l'entreprise. L’éditeur doit
avoir le droit d’ajouter un nouvel événement ou bien de modifier ou supprimer un évènement
existant dans la base de données.

• Gestion des articles :

Le système doit offrir aux éditeurs la possibilité de gérer les articles . L’éditeur aura la
possibilité d’ajouter un nouvel article dynamiquement , ou bien modifier ou supprimer un
article existant dans le base de données.

• Gestion des adhérents :

L’éditeur doit avoir la possibilité de gérer les internautes qui se sont inscrits aux newsletters
de l’application . L’éditeur aura le droit de supprimer un adhérent existant dans la base de
données , ainsi de pouvoir envoyer les nouvelles aux adhérents via e-mail.

• Gestion des nouvelles :

Le système doit offrir aux éditeurs la possibilité de gérer les nouvelles de l’application.
L’éditeur aura la possibilité d’ajouter une nouvelle récente dynamiquement , ou bien modifier
ou supprimer une nouvelle existante dans le base de données.

• Gestion des contacts :

18
Projet de Fin d’Études 2021-2022

Le système doit offrir aux éditeurs la possibilité de gérer les messages des internautes qui ont
contacté l’équipe de l’entreprise . L’éditeur aura le droit de supprimer un contact existant dans
le base de données.

• Gestion des langues :

L’éditeur doit avoir le droit de gérer les langues du site , il aura de même la possibilité d’ajouter,
modifier ou supprimer une langue.

• Gestion des postulants :

L’éditeur doit avoir le droit de gérer les internautes qui ont rempli le formulaire de postulation
d’une offre de stage ou bien d’emploi.

o Les administrateurs : ont les mêmes interactions que les éditeurs en plus de pouvoir
gérer le mode de maintenance de l’application, et la gestion des profils administratifs.
De cette façon :

• Gestion des profils administratifs:

L’administrateur aura la possibilité d’ajouter d’autres profils administratifs en remplissant les

informations nécessaires.

o Les internautes : peuvent consulter la totalité du contenu de l’application . Leurs

principales interactions avec le système se résument comme suit :

• S’inscrire aux newsletters :

Les internautes auront le droit de s’inscrire aux newsletters du site pour recevoir les nouvelles
de l’entreprise en exclusivité via e-mail.

• Contacter l’entreprise :

Le système doit offrir aux internautes la possibilité de contacter l’équipe de l’entreprise pour
toutes informations complémentaires.

• Choisir la langue du site :

Le système doit offrir aux internautes la possibilité de choisir la langue du site.

• Postuler à une offre :

Le système doit donner aux internautes la possibilité de choisir une offre d’emploi ou bien de
stage et remplir un formulaire en vue d’enregistrer leurs postulations en ligne.

19
Projet de Fin d’Études 2021-2022

2.2. Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation (Use Case Diagram) constitue la première étape de

l’analyse UML en :

o Modélisant les besoins des utilisateurs.

o Identifiant les grandes fonctionnalités et les limites du système.
o Représentant les interactions entre le système et ses utilisateurs.

Après avoir identifié les acteurs du système, nous allons procéder à la réalisation des
diagrammes de cas d’utilisation. Les figures montrent respectivement les diagrammes relatives
à l’éditeur , l’administrateur et l’internaute.

Pour que les diagrammes soient plus lisibles, on a décidé de partitionner le diagramme
de cas d’utilisation lié à l’éditeur en deux parties :

Figure 5 : Diagramme de cas d’utilisation lié à l'éditeur partie 1

20
Projet de Fin d’Études 2021-2022

Figure 6 : Diagramme de cas d’utilisation lié à l'éditeur partie 2

Figure 7 : Diagramme de cas d’utilisation lié à l'administrateur

21
Projet de Fin d’Études 2021-2022

Figure 8 : Diagramme de cas d’utilisation lié à l'internaute

2.3. Description détaillée des cas d’utilisation et diagrammes

d’activité adéquats

Afin de mieux comprendre les fonctionnalités de notre système, nous avons décrit
textuellement les cas d’utilisation les plus importants à l’aide des scénarios et graphiquement à
travers les diagrammes d’activité.

Un diagramme d'activité permet de modéliser le comportement du système, y compris

la séquence des actions et leurs conditions d'exécution. Les actions sont les unités de base du
comportement du système.

22
Projet de Fin d’Études 2021-2022

2.3.1. Authentification

Cas d’utilisation Authentification.

Ce cas d’utilisation permet à l’administrateur ou l’éditeur d’accéder
Résumé au tableau de bord pour pouvoir exécuter ses fonctionnalités.

o Administrateur.
Acteurs
o Éditeur.
o L’administrateur ou l’éditeur saisit son login et mot de
passe.
o Le système vérifie si les champs sont bien remplis.
Scénario normal
o Le système vérifie la validité des données saisies.
o Les données ont été saisies correctement, le système affiche
le tableau de bord.
o L’administrateur ou l’éditeur saisit son login et mot de
passe.
o Le système vérifie si les champs sont remplis.
Scénario alternatif 1 o Les champs n’ont pas été bien renseignés.
o Le système affiche un message d’erreur.
o L’administrateur ou l’éditeur est appelé à ressaisir ses
informations à nouveau.
o L’administrateur ou l’éditeur saisit son login et mot de
passe.
o Le système vérifie si les champs sont remplis.
o Le système vérifie la validité des données saisies.
Scénario alternatif 2
o Les données saisies sont invalides.
o Le système affiche un message d’erreur.
o L’administrateur ou l’éditeur est appelé à ressaisir ses
informations à nouveau.
Post condition L’administrateur ou l’éditeur accède au tableau de bord pour
pouvoir exécuter ses fonctionnalités.
Pré-Condition L’administrateur ou l’éditeur lance l’application.
Tableau 1 : Description du cas d'utilisation d'authentification

23
Projet de Fin d’Études 2021-2022

2.3.2. Diagramme d’activité d’authentification

Figure 9 : Diagramme d'activité lié à l'authentification

2.3.3. Ajouter un post

Un post représente le contenu dynamique de l’application, il est réparti sous forme de

catégories (services, solutions, offres, événements, nouvelles et articles).

Cas d’utilisation Ajouter un post.

Ce cas d’utilisation permet à l’administrateur ou à l’éditeur
Résumé
d’ajouter un post d’une manière dynamique.
o Administrateur
Acteurs
o Éditeur
o L’administrateur ou l’éditeur choisit la langue du post.
o L’administrateur ou l’éditeur choisit la catégorie post.
o L’administrateur ou l’éditeur remplit les champs primaires
Scénario normal et personnalisés.
o Le système vérifie la saisie des champs obligatoires.
o Le système vérifie les informations saisies.
o Les informations ont été saisies correctement.
o L’administrateur ou l’éditeur choisit la langue du post.
o L’administrateur ou l’éditeur choisit la catégorie post.
o L’administrateur ou l’éditeur remplit les champs primaires
et personnalisés.
Scénario alternatif
o Le système vérifie la saisie des champs obligatoires.
o Les champs obligatoires ne sont pas tous renseignés.
o Le système encadre les champs en rouge.
o Le système affiche un message d’erreur.

24
Projet de Fin d’Études 2021-2022

Post condition L’administrateur ou l’éditeur doit être authentifié.

Pré-Condition Un nouveau post est ajouté avec succès.

Tableau 2 : Description du cas d'utilisation Ajouter un post

2.3.4. Diagramme d’activité d’ajouter un post

Figure 10 : Diagramme d'activité d’Ajouter un post

2.3.5. Modifier un post

Cas d’utilisation Modifier un post.

Résumé Ce cas d’utilisation permet à l’administrateur ou l’éditeur de

modifier un post.
Acteurs o Administrateur
o Éditeur
Scénario normal o L’administrateur ou l’éditeur choisit la langue du post.

25
Projet de Fin d’Études 2021-2022

o L’administrateur ou l’éditeur choisit la catégorie.

o L’administrateur ou l’éditeur modifie les champs primaires
et personnalisés.
o Le système vérifie la saisie des champs obligatoires.
o Le système vérifie les informations saisies.
o Les informations ont été remplies correctement.
Scénario alternatif o L’administrateur ou l’éditeur choisit la langue du post.
o L’administrateur ou l’éditeur choisit la catégorie post.
o L’administrateur ou l’éditeur modifie les champs primaires
et personnalisés.
o Le système vérifie la saisie des champs obligatoires.
o Les champs obligatoires ne sont pas tous renseignés.
o Le système encadre les champs en rouge.
o Le système affiche un message d’erreur.
Post condition Un post existant est modifié.

Pré-condition L’acteur doit être authentifié.

Tableau 3 : Description du cas d'utilisation modifier un post

2.3.6. Diagramme d’activité de modifier un post

Figure 11 : Diagramme d'activité de Modifier un post

26
Projet de Fin d’Études 2021-2022

2.3.7. Postuler à une offre

Cas d’utilisation Postuler à une offre

Résumé Ce cas d’utilisation permet à l’internaute de postuler à une

offre d’emploi ou de stage.

Acteur L’internaute
Scénario normal o L’internaute choisit la langue de site.
o L’internaute remplit les champs du formulaire de
postulation.
o Le système vérifie la saisie des champs obligatoires.
o Le système vérifie la validé des données saisies.
o Les informations ont été remplies correctement.
o Le système affiche une notification de postulation.
o Un mail informatif est envoyé à l’entreprise et le
postulant avec la langue choisie par le postulant.

Scénario alternatif 1 o L’internaute choisit la langue du site.

o L’internaute remplit les champs du formulaire de
postulation.
o Le système vérifie la saisie des champs obligatoires.
o Les champs obligatoires ne sont pas tous renseignés.
o Le système affiche un message d’erreur.
Scénario alternatif 2 o L’internaute choisit la langue du site.
o L’internaute remplit les champs du formulaire de
postulation.
o Le système vérifie la saisie des champs obligatoires.
o Le système vérifie la validé des données saisies.
o Les données sont invalides.
o Le système affiche un message d’erreur.

Post condition L’internaute a postulé avec succès.

Pré-condition L’internaute doit choisir une offre.

Tableau 4 : Description du cas d'utilisation postuler à une offre

27
Projet de Fin d’Études 2021-2022

2.3.8. Diagramme d’activité de postuler à une offre

Figure 12 : Diagramme d'activité de postuler à une offre

28
Projet de Fin d’Études 2021-2022

2.3.9. Réinitialiser le mot de passe

Cas d’utilisation Réinitialiser le mot de passe.

Acteurs o L’éditeur.
o L’administrateur.
Scénario normal o L’éditeur ou l’administrateur clique sur mot de
passe oublié.
o L’éditeur ou l’administrateur saisit son login ou
son e-mail.
o Le système vérifie si le champ est bien rempli.
o Le système vérifie la validité du login ou l’e-
mail saisi.
o L’éditeur ou l’administrateur reçoit un mail de
récupération.
o L’éditeur ou l’administrateur accède au lien de
récupération.
o L’éditeur ou l’administrateur saisit et
reconfirme le nouveau mot de passe.
o Le système vérifie si les champs sont bien
remplis.
o L’éditeur ou l’administrateur revient à la page
d’authentification

Scénario alternatif 1 o L’éditeur ou l’administrateur clique sur mot de

passe oublié.
o L’éditeur ou l’administrateur saisit son
identifiant ou son e-mail.
o Le champ n’est pas bien rempli.
o Le système affiche un message d’erreur.

Scénario alternatif 2 o L’éditeur ou l’administrateur clique sur mot de

passe oublié.
o L’éditeur ou l’administrateur saisie son login
ou son e-mail.
o Le système vérifie si le champ est bien rempli.
o Le système vérifie la validité du login ou l’e-
mail saisi.
o L’éditeur ou l’administrateur reçoit un mail de
récupération.
o L’éditeur ou l’administrateur accède au lien de
récupération.

29
Projet de Fin d’Études 2021-2022

o L’éditeur ou l’administrateur saisit et

reconfirme le nouveau mot de passe.
o Les deux mots de passe ne sont pas identiques.
o Le système affiche un message d’erreur.

Post condition L’éditeur ou l’administrateur réinitialise son mot de

passe
Pré-condition L’éditeur ou l’administrateur a oublié son mot de
passe
Tableau 5 : Description du cas d'utilisation Réinitialiser le mot de passe

2.3.10. Diagramme d’activité de réinitialiser le mot de passe

Figure 13 : Diagramme d'activités lié à la réinitialisation du mot de passe

30
Projet de Fin d’Études 2021-2022

3. Modèle statique
3.1. Diagramme de classes

Le diagramme de classes est un schéma utilisé en génie logiciel pour schématiser les
classes et les interfaces des systèmes ainsi que les différentes relations entre celles-ci. Ce
diagramme fait partie de la partie statique d'UML car il fait l’abstraction des aspects temporels
et dynamiques.
Pour des raisons de lisibilité, nous avons divisé le diagramme de classe de notre système
en deux parties pour qu’il soit plus lisible.

Figure 14 : Diagramme de classe partie 1

31
Projet de Fin d’Études 2021-2022

Figure 15 : Diagramme de classe partie 2

3.2. Schéma logique des données

Profil_administratif(id,login,nom, prénom, email, site_web, mot_de_passe, date_départ,

#id_langue) ;
Editeur (id_editeur, #id_profil_adminstratif) ;
Administrateur (id_administrateur, #id_profil_adminstratif) ;
Gestion_postulants (#id_postulant, #id_profil_adminstratif) ;
Gestion_catégories (#id_catégorie, #id_profil_adminstratif) ;
Gestion_langues (#id_langue, #id_profil_adminstratif);
Gestion_abonnés (#id_abonné, #id_profil_adminstratif) ;
Catégorie (id, titre, image_de_couverture, extrait, contenu, visibilité, slug, date_publication,
date_modification, #id_langue) ;
Offre (id_offre, #id_catégorie, période, type_offre) ;
Solution (id_solution, #id_catégorie) ;

32
Projet de Fin d’Études 2021-2022

Article (id_article, #id_catégorie) ;

Service (id_service, #id_catégorie, image) ;
Évènement (id_évènement, #id_catégorie) ;
Nouvelle (id_nouvelle, #id_catégorie) ;
Abonné (id, email, date_envoie, #id_langue) ;
Contact (id_contact, #id_abonné, nom, prénom, téléphone, objet, message) ;
Société (id,nom) ;
Contact_société (#id_contact, #id_société) ;

Adhérent (id_adhérent, #id_abonné) ;

Langue (id, nom, symbole, format_date, format_heure, drapeau) ;
Postulant (id, nom, prénom, email, téléphone, #id_langue) ;
Postulant_offre (#id_postulant, #id_offre) ;

33
Projet de Fin d’Études 2021-2022

Chapitre III
Réalisation

34
Projet de Fin d’Études 2021-2022

1. système de gestion de contenu

1.1. Pourquoi utiliser un CMS ?

Le système de gestion de contenue ou Content Management System (CMS) en anglais

regroupe une catégorie de logiciels qui permettent de concevoir, gérer et mettre à jour des sites
Web ou des applications mobiles de manière dynamique, pour cette raison notre encadrant de
stage nous a proposé d’utiliser un CMS pour pouvoir mettre en œuvre une application web
complétement dynamique, de même les CMS autorisent la structuration du contenu d'un site
Web (catégories, pages, etc.). Ce système de gestion de contenu permet également à plusieurs
personnes de travailler en équipe sur un projet à différents niveaux de permissions, en attribuant
aux membres de l’équipe un profil administratif (administrateur, éditeur, etc.).
Dans ce sens, on a réalisé une étude comparative entre WordPress et Drupal pour bien
choisir la solution qui répondra le plus à nos exigences et nos attentes.
Le choix du CMS adéquat peut être déterminé par différents facteurs. En fonction de
nos objectifs , la comparaison entre WordPress et Drupal porte sur trois critères de décision :

o Quel est le CMS le plus sécurisé ?

o Quel CMS nous permettra de mettre en œuvre une application dynamique ?
o Quel CMS choisir pour un meilleur référencement ?

En se basant sur nos objectifs, nous avons choisi WordPress, pour les raisons suivantes :
o Wordpress s’impose comme un CMS sûr et polyvalent pour les entreprises . Ce
système puissant peut être utilisé pour mettre en œuvre des projets de sites Web
personnalisés, avec des structures de pages complexes et complètement dynamiques,
ainsi qu’il possède d’excellentes extensions.
o Wordpress est très fort en terme de référencement et sécurité.
1.2. WordPress

WordPress est un CMS gratuit et open source. En fait, il est l’un des CMS les plus
connus sur le web. La particularité du CMS WordPress est qu’il est écrit en PHP et qu’il repose
sur une base de données MySQL.
WordPress permet de gérer des sites dynamiques, et même des sites e-commerce.
WordPress offre une interface personnalisable pour administrer les sites Internet et gérer
les contenus, La gestion du site Internet peut être partagée entre différents utilisateurs, dont les
droits peuvent être restreints en fonction du profil administratif : administrateur, éditeur, etc.

Figure 16 : Logo de WordPress

35
Projet de Fin d’Études 2021-2022

2. Outils du développement
Pour mettre en œuvre notre site web, nous avons adopté un environnement de
développement qui a assuré la progression de la phase d’implémentation. Cet environnement
comporte les outils logiciels suivants :

Git : Git est un logiciel de gestion de versions décentralisé. Il permet la

gestion de versions des projets. Pour cette raison on a utilisé la
plateforme GitLab pour stocker le code source de notre projet et de
suivre l'historique complète de toutes les modifications apportées à ce
projet.

HTML 5 : HyperText Markup Language 5, est un langage de balises

utilisé pour le but de structurer et donner du sens au contenu web. Par
exemple : définir des sections, des titres et tables de données ou bien
insérer des images ou des vidéos dans une page.

CSS 3 : (Cascading Style Sheets 3) : Est un langage de règles de style

utilisé pour mettre en forme le contenu HTML. Par exemple : modifier
la couleur d’arrière-plan ou mettre une image en arrière-plan ou bien
changer les polices.

Bootstrap: est un Framework qui facilite et accélère le développement

du Front-end. Il inclue une base CSS complète configurée à partir d’un
fichier de variables, un ensemble de conventions de structure HTML et
de nommage de classes des librairies JavaScripts simples pour les
fonctions les plus courantes. On a développé sur le thème de Bootstrap
de WordPress pour pouvoir manipuler le contenu dynamique du site.

36
Projet de Fin d’Études 2021-2022

JavaScript : est un langage de programmation orienté objet qui permet de

créer du contenu mis à jour de façon dynamique, de contrôler le contenu
multimédia, d’animer des images, et tout ce que vous pouvez imaginer
avec quelques lignes de JavaScript.

PHP 8 : HyperText Preprocessor18, plus connu sous PHP, est un

langage de programmation, principalement utilisé pour produire des
pages Web dynamiques via un serveur HTTP18, mais pouvant
également fonctionner comme n'importe quel langage interprèté de
façon locale. PHP est un langage impératif orienté objet.

Figma : est un éditeur de graphiques vectoriels et un outil de

prototypage. Il est principalement basé sur le web, avec des
fonctionnalités hors ligne supplémentaires activées par des applications
de bureau pour MacOs et Windows, on a utilisé cet outil pour réaliser le
prototype des interfaces de notre application web

Visual Code Studio : est un IDE que nous avons utilisé pour le
développement du contenu dynamique. Il s’agit d’un éditeur de code
supportant les langages de programmation Web, comme l’HTML, le CSS
et le Javascript.

MySQL : est un système de gestion de base de données relationnelle

(SGBDR). Il est distribué sous une double licence GPL et
propriétaire. Il fait partie des logiciels de gestion de données les plus
utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec
Oracle et Microsoft SQL Server.

37
Projet de Fin d’Études 2021-2022

3. Présentation des interfaces graphiques

3.1. Authentification

C’est la page qui permet à

chaque éditeur ou administrateur
d’accéder à leurs espaces pour la
gestion du contenu, en renseignant
leurs login ou e-mail et mot de passe
correctement, sinon un message
d’erreur va être affiché (figure 18 et
19)

Figure 17 : Interface de la page d'Authentification

Si on saisit un
mot de passe
invalide

Figure 18 : Message d'erreur mot de passe invalide

38
Projet de Fin d’Études 2021-2022

Si les champs ne sont

pas renseignés, un
message d’erreur
s’affiche comme suit

Figure 19 : Message d'erreur au cas de champs non renseignés

3.2. Interface de la page d’accueil

C’est la page principale de l’application, elle contient des extraits des services et
solutions récents (figure 20 et 21 ), ainsi que les nouvelles de l’entreprise sous forme de
diaporama, l’interface est affichée lorsqu’on ouvre l’application. À travers cette interface
l’internaute peut s’inscrire à la newsletter de l’entreprise.

Le site est traduit en trois langues (en français, arabe et anglais), dans ce rapport on va
prendre l’exemple de la version française du site, comme suit :

39
 Projet de Fin d’Études 2021-2022

Menu pour
choisir la
langue du site

Cette partie
représente la
diaporama des
nouvelles

Cette partie
représente les
trois services
récents

Figure 20 : interface de la page d'accueil partie 1

40
 Projet de Fin d’Études 2021-2022

Cette partie
représente les
trois solutions
récentes

Description
brève de
chaque solution

Espace pour
s’inscrire à la
newsletter

Bouton pour
remonter en
haut de la page

Figure 21 : interface de la page d'accueil partie 2

41
 Projet de Fin d’Études 2021-2022

Une fois inscrit à la

newsletter, l’internaute
recevra un mail en
fonction de la langue
du site

Figure 22 : Mail de confirmation d'inscription

En descendant dans les pages, l’en-tête du site change de couleur et de logo comme suit :

Le deuxième
logo

Sous-menu de
société

Figure 23 : en-tête du site web

Les liens de
l’application

42
Projet de Fin d’Études 2021-2022

3.3. Interface de la page des solutions

Cette interface, présente la liste des solutions actuelles avec des descriptions détaillées
sur chaque solution :

Description
détaillée de la
solution

Figure 24 : Interface de la page nos solutions

43
Projet de Fin d’Études 2021-2022

3.4. Interface de la page services

Cette interface présente la liste des services proposés par l’entreprise avec quelques
informations sur chaque service, les titres sont cliquables et ils nous dirigent vers une page qui
contient des informations détaillées sur chaque service.

Figure 25 : Interface de la page services

44
 Projet de Fin d’Études 2021-2022

3.5. Interface d’un service

Après avoir cliqué sur le titre d’un service, une interface va s’afficher comme suit :

Chaque
service
possède sa
propre
image de
couverture

Description
détaillée du
service

Figure 26 : Interface de la page d'un service

45
Projet de Fin d’Études 2021-2022

3.6. Interface de la page carrière

Cette interface contient la liste des offres avec quelques informations et un Bouton ( Savoir
plus ) qui permet de nous diriger vers une page contenant la liste des informations qui décrit
l’offre et permet aux internautes de postuler à cette offre .

En cliquant sur
le bouton, une
interface
s’affichera pour
plus de détails
sur l’offre et
donner la
possibilité de
postuler

Figure 27 : Interface de la page carrière

46
 Projet de Fin d’Études 2021-2022

3.7. Interface de la page postuler

Après avoir choisi une offre, une interface s’affichera comme suit pour donner aux
internautes la possibilité de postuler

Chaque offre
dispose de sa
propre image
de couverture

Formulaire de
postulation

Figure 28 : Interface de la page Postuler

47
Projet de Fin d’Études 2021-2022

Après avoir postulé

pour une offre,
l’internaute recevra un
e-mail informatif pour
confirmer
l’enregistrement de la
demande de postulation

Figure 29 : Mail de confirmation de postulation

De la même façon
l’équipe de l’entreprise
recevra un mail
contenant les
informations du
postulant

Figure 30 : Informations du postulant

3.8. Interface de la page à propos

Cette interface est réservée à la description de l’entreprise en soulignant les valeurs et
l’éthique de l’équipe de l’entreprise sous forme de vidéo, ainsi que l’historique de l’entreprise
en précisant les dates clés qui marquent son évolution, ce qui va aider à établir des relations

48
 Projet de Fin d’Études 2021-2022

constructives entre l’équipe de l’entreprise et les clients.

Vidéo descriptive de
l’entreprise

Time Line dynamique qui

comporte les dates clés qui
marquent l’historique de
l’entreprise

Figure 31 : Interface de la page à propos

49
Projet de Fin d’Études 2021-2022

3.9. Interface de la page articles

Cette interface représente la liste des articles actuels de l’entreprise :

Figure 32 : Interface de la page Articles

50
Projet de Fin d’Études 2021-2022

3.10. Interface de la page Contact

Formulaire de
contact

Figure 33 : Interface de la page Contact

51
Projet de Fin d’Études 2021-2022

Une fois qu’un internaute

valide l’envoie du
formulaire de contact. Il
recevra un mail de
confirmation en fonction
de la langue du site

Figure 34 : Mail de confirmation

De la même façon
l’équipe recevra un mail
contenant les
informations de
l’internaute

Figure 35 : Mail de contact

52
 Projet de Fin d’Études 2021-2022

3.11. Interfaces de gestion du contenu dynamique

o Gestion des services :

À partir de cette interface on a la possibilité d’ajouter, modifier, ou supprimer dynamiquement

un service.
Sélectionner
Choisir la la catégorie
langue

Ajouter un
service
Supprimer un
service

Modifier un
service

Figure 36 : Liste des services

Titre du
Sélectionner
service
la catégorie

Description
détaillée du
service

Figure 37 : Ajouter un service

Champ Image descriptive
Ajouter Description
personnalisé pour du service
l’image de brève du
la catégorie couverture du service
services service

On fait les même étapes pour modifier un service existant , avec l’interface suivante :

53
Projet de Fin d’Études 2021-2022

Figure 38 : Interface de modifier un service

o Gestion des offres :

De la même façon on fait la gestion des offres en changeant la catégorie :

Figure 39 : Liste des offres

De même pour l’ajout et la modification et la suppression d’une offre :

54
 Projet de Fin d’Études 2021-2022

Champs Figure 40 : Interface Ajouter une offre

personnalisés pour
la catégorie offres

Figure 41 : Interface Modifier une offre

On suit la même procédure avec tous le contenu dynamique du site (solutions,

événements, articles, et nouvelles ) en changeant la catégorie.

55
 Projet de Fin d’Études 2021-2022

3.12. Interface de gestion des contact

Cette interface affiche la liste des contacts, on a la possibilité de supprimer un contact
existant dans la base de données de cette manière :

Supprimer
un contact

Figure 42 : Interface Gestion contacts

Exporter les
contacts sous un
3.13. Interface de gestion des postulants fichier Excel

Cette interface affiche la liste des postulants, on a la possibilité de supprimer un

postulant existant dans la base de données de cette manière :

Supprimer
un postulant

Figure 43 : Interface Gestion postulants

Exporter les
postulants sous un
3.14. Interface de gestion des adhérents fichier Excel

De même, pour les adhérents :

Supprimer
un adhérent

Exporter les
Figure 44 : Interface Gestion des adhérents adhérents sous un
fichier Excel
56
 Projet de Fin d’Études 2021-2022

3.15. Interface de gestion des profils administrateurs

Cette interface affiche la liste des profils administratifs, on a la possibilité d’ajouter,
modifier, et supprimer un profil administratif existant dans la base de données de cette
manière :

Ajouter un
profil
administratif

Modifier un
profil
administratif

Supprimer
un profil
administratif

Figure 45 : Interface gestion des profils administratifs

Ajouter un profil administratif :

Figure 46 : Interface ajouter un profil administratif

La même interface s’applique pour la modification d’un profil administratif.

57
Projet de Fin d’Études 2021-2022

Conclusion et perspectives

Le projet qu’on a mis en œuvre au cours de notre stage de fin d’études était extrêmement
bénéfique tant au niveau technique qu’au niveau professionnel. De même, il nous a permis
d’enrichir nos connaissances en termes d’outils de programmation et de conception. C’était une
opportunité pour acquérir de nouvelles compétences dans la programmation web et maitriser le
CMS WordPress qui est un CMS très efficace en terme de création des sites dynamiques.

Ce stage nous a ainsi offert l’opportunité de découvrir et travailler dans un contexte réel
et d’affronter des vraies problématiques, ainsi qu’on a découvert les outils du télétravail vu que
le stage était à distance. Ces derniers nous ont aidés à acquérir une expérience fort précieuse.

La réalisation de ce projet avait comme objectif le développement d’un site

institutionnel pour une entreprise de développement informatique, ainsi que de dynamiser la
totalité du contenu du site.

Cette application reste toujours extensible par d'autres développeurs pour d’autres
améliorations et ajout de nouvelles fonctionnalités ou de nouvelles langues.

58
Projet de Fin d’Études 2021-2022

Webographie

• Documentation WordPress :

[Link]

• Documentation Bootstrap :

[Link]

• Documentation GitLab :

[Link]

• Forums & astuces :

[Link]

• Cours en ligne:

[Link]

59