Ministère de l’Economie Numérique,

Porte-parole du Gouvernement

Ecole Supérieure Africaine des Technologies

de l’Information et de la Communication

Année académique : 2021 / 2022

MEMOIRE DE FIN DE CYCLE POUR L’OBTENTION DE LA

LICENCE EN SYSTEMES INFORMATIQUES ET GENIE LOGICIEL
(SIGL)

ETUDE ET MISE EN PLACE D’UNE APPLICATION

WEB SECURISEE POUR L’INFORMATION ET LA
PROMOTION DE L’ENTREPRISE : AFRICA
BIOMETRICS SECURITY

Présenté par :
MANLAN AHOUA NATHAN
Période de stage : du 21/02/2022 au 18/05/2022

Encadreur académique : Maitre de stage :

Dr. KABORE Raogo M. Tamegnon J.
Docteur à Esatic Directeur technique
ABS
 Ministère de l’Economie Numérique,
Porte-parole du Gouvernement

Ecole Supérieure Africaine des Technologies

de l’Information et de la Communication

Année académique : 2021 / 2022

MEMOIRE DE FIN DE CYCLE POUR L’OBTENTION DE LA

LICENCE EN SYSTEMES INFORMATIQUES ET GENIE LOGICIEL
(SIGL)

ETUDE ET MISE EN PLACE D’UNE APPLICATION

WEB SECURISEE POUR L’INFORMATION ET LA
PROMOTION DE L’ENTREPRISE : AFRICA
BIOMETRICS SECURITY
Présenté par :
MANLAN AHOUA NATHAN
Période de stage : du 21/02/2022 au 18/05/2022

Encadreur académique : Maitre de stage :

Dr. KABORE Raogo M. Tamegnon J.

Docteur à Esatic Directeur technique ABS

 Réalisé par Ahoua Nathan MANLAN, Etudiant en systèmes informatiques et génie logiciel

DEDICACE
A ma grande famille, pour tous les efforts qu’elle a effectués pour me hisser jusqu’ici, en ce jour de
réjouissance.

3
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

REMERCIEMENTS

Le travail que j’ai eu l’honneur d’effectuer provient de l’intervention et de l’implication de

nombreuses personnes pour lesquelles je ferais part d’ingratitude et de mauvaise foi si celles-ci ne
faisaient pas l’objet de remerciements. Ainsi donc j’aimerais remercier :
 Prof. KONATE ADAMA PASCAL, Directeur général de l’Ecole Supérieure Africaine des
Technologies de l’Information et de la Communication (ESATIC), pour l’aide dont nous avons
bénéficié au sein de l’Etablissement qu’il dirige.
 M. KOFFI ACKA DEXTER EMMANUEL, Directeur général de ABS de m’avoir accepté en
tant que stagiaire dans sa structure et pour toute l’aide qu’il m’a apporté.
 M. KABORE RAOGO, Docteur à l’ESATIC et notre encadreur académique pour sa
disponibilité et son apport incroyable.
 M. TAMEGNON JEAN-BAPTISTE, notre maître de stage, le Directeur technique de ABS,
pour ses conseils, le temps passé ensemble et le partage de son expertise au quotidien ainsi qu’à
son adjoint M. AKABLA ERIC.
 Aussi je remercie tout le personnel dudit cabinet, à citer M. SORO KADOHOTCHAN, M.
AMAN MIEZAN, M. ANOMAN XAVIER, [Link] SEYDOU et M. GNAPI
SAMUEL.
Des remerciements à l’endroit de mes ami(e)s proches notamment KOUAME E. SAMUEL,
KONIN A. GRACE et GOHOUROU EUNICE S. pour le soutien et l’aide apportés.
Mes remerciements vont également à l’endroit de mes ami(e)s de la huitième promotion d’ESATIC
(IT08) et en particulier à DIAKITE YACOUBA, DIOMANDE YVES et ainsi qu’à ceux d’autres
promotions tels que DOMORAUD WILLIAM et BAKABOU ESTHER pour leur soutien et leurs
conseils, apportés durant tout mon parcours.

4
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

SOMMAIRE
INTRODUCTION
PREMIERE PARTIE : GENERALITES
Chapitre 1 : L’ENTREPRISE D’ACCUEIL

I. PRESENTATION D’ABS

II. ORGANIGRAMME

Chapitre 2 : CAHIER DE CHARGES ET DEFNITIONS DES TERMES

I. CONTEXTE ET DEFINITION DU PROJET

II. OBJECTIFS DU PROJET

III. CONTRAINTES ET DIFFICULTES

IV. LIVRABLE ATTENDU

V. WEB ET APPLICATION WEB

VI. APPLICATION WEB SECURISEE

Chapitre 3 : LA BIBLIOTHEQUE REACT

I. PRESENTATION DE REACT

II. AVANTAGES D’AVEC LES AUTRES BIBLIOTHEQUES ET FRAMEWORKS

III. LE CARACTERE SECURITE DE REACT

Conclusion partielle
DEUXIEME PARTIE : ETUDE TECHNIQUE
Chapitre 4 : ETUDE DE L’EXISTANT

I. PRESENTATION DE L’EXISTANT

II. LIMITES DE L’EXISTANT

III. SOLUTION PROPOSEE

Chapitre 5 : PRESENTATION DES OUTILS DE MODELISATION

5
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

I. PRESENTATION DES OUTILS DE MODELISATIONS ET CHOIX

II. LES TROIS DIMENSIONS DE LA METHODE MERISE

Chapitre 6 : MODELISATION DU SYSTEME

I. LES REGLES DE GESTION

II. LE DICTIONNAIRE DE DONNEES, LES DEPENDANCES FONCTIONNELLES ET

LE GRAPHE DES DEPENDANCES FONCTIONNELLES

III. MODELE CONCEPTUEL DE DONNEES

IV. MODELE CONCEPTUEL DE TRAITEMENT

V. MODELE LOGIQUE DE DONNEES

Conclusion partielle
TROISIEME PARTIE : RESULTATS ET DISCUSSION
Chapitre 7 : RESULTATS

I. OUTILS DE DEVELOPPEMENT
II. PRESENTATION DE L’APPLICATION
Chapitre 8 : DISCUSSION ET VALOIR ECONOMIQUE

CONCLUSION

6
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

SIGLES ET ABREVIATIONS

ABS : Africa Biometrics Security

DD : Dictionnaire de Données

DEEP : Direction de l’Encadrement des Écoles Privées

DF : Dépendance Fonctionnelle

GDF : Graphe des Dépendances Fonctionnelles

JS : JavaScript

MERISE : Méthode d’Etude et de Réalisation Informatique par Sous-Ensembles

MCD : Modèle Conceptuel de Données

MOT : Modèle Organisationnel de Traitement

MLD : Modèle Logique de Données

PC : Personnal Computer

SI : Système Informatisé

UML : Unified Modeling Language

7
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

LISTE DES FIGURES

Figure 1 : Organigramme ABS ....................................................................... 13
Figure 2 : Illustration du domaine d’utilisation d’une application web................................... 16
Figure 3 : Logo de la bibliothèque React................................ 17
Figure 4 : Diagramme de préférence des Frameworks et bibliothèques................................ 19
Figure 5 : Applications mobiles faites avec React............................................................... 19
Figure 6 : Présentation du logiciel ABS............................................. 22
Figure 7 : Avantages et inconvénients de la méthode MERISE...............................................................24
Figure 8 : Avantages et inconvénients du langage UML.................................................... 25
Figure 9 : Tableau comparatif des deux outils............................................. 25
Figure 10 : Dictionnaire de données............................................................ 29
Figure 11 : Graphe des dépendances fonctionnelles .......................................................... 30
Figure 12 : Schéma du MCD...................................................................... 31
Figure 13 : Schéma du MCT............................................................ 32
Figure 14 : Schéma du MLD..................................................................... 34
Figure 15: Logo Visual studio code..................................................................... 35
Figure 16 : Logo Node JS..................................................................... 35
Figure 17 : Logo powerdesigner..................................................................... 36
Figure 18: Page d’accueil de l’application web............................................................................... 36
Figure 19 : Formulaire école.......................................................... 37
Figure 20: Formulaire professeur.............................................................................37
Figure 21: Formulaire entreprise.............................................................................38
Figure 22 : Estimation financière du projet…………………………………………39

8
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

LISTE DES TABLEAUX

Tableau 1: Avantages et inconvénients de la méthode MERISE........................ 24

Tableau 2 Avantages et inconvénients du langage UML ………………………………….25
Tableau 3 : Tableau comparatif des deux outils……………………………...............................25
Tableau 4 : Dictionnaire de données …………………….......................................29
Tableau 6 : Estimation financière...................................................................... 39

9
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

INTRODUCTION

Cela fait maintenant près de 10 ans que la Côte d’Ivoire prend à cœur l’avancée technologique et
le progrès scientifique. Elle met et propose au maximum l’automatisation et l’intégration de solutions
informatiques dans tous ses secteurs d’activités notamment l’Education Nationale. Hélas, malgré tout
ce bon vouloir et ce désir de s’améliorer, l’ivoirien ne reste pas moins attaché à certains vices tels que la
fraude, la corruption et la lenteur dans le travail qui, grâce à l’informatique seraient évidemment
éradiqués. En effet, la Direction de l’Encadrement des Écoles Privées(DEEP), en collaboration avec le
ministère de l’Education Nationale, le ministère de l’Enseignement Technique, de la Formation
Professionnelle et de l’Apprentissage et le ministère du Budget ont révélé que le comptage physique des
élèves affectés de l’Etat dans les écoles privés était un travail fastidieux et que le nombre exact d’élèves
affectés donné au préalable, subissait une falsification qui au final alourdissait les dépenses de l’Etat
lors des paiements de subventions des écoles. Ainsi, pour pallier à ce problème, un appel d’offre en
2020 a été lancé. Et donc c’est dans l’optique d’aider l’Etat que Africa Biometrics Security (ABS) s’est
portée volontaire pour ce projet.

Afin donc de promouvoir son activité informatique, dans maintes domaines d’activités,
d’apporter d’amples informations de la structure aux institutions scolaires et autres entreprises, Africa
Biometrics Security (ABS) nous a remis cette tache durant notre stage pour notre projet de fin d’étude à
travers le thème suivant : << Etude et mise en place d’une application web sécurisée pour
l’information et la promotion de l’entreprise : Africa Biometrics Security >>.

A cet effet, toute une problématique se pose à savoir : ce qu’est une application web
sécurisée, comment la mettre en place, quelles en seraient les étapes et fonctionnalités ?

Pour répondre à ces questions, il conviendra pour nous dans la première partie de faire
une présentation générale de notre structure d’accueil et de notre projet. Puis notre deuxième partie
sera consacrée à l’étude de l’existant, l’analyse et la conception du projet à l’aide des outils

10
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

informatiques et technologiques à notre disposition. Enfin dans la dernière partie, nous présenterons
les résultats attendus du projet et nous les discuterons.

11
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

PREMIERE PARTIE : GENERALITES

DESCRIPTION : A ce premier niveau, nous parlerons de l’entreprise qui nous a

accueillis, de sa structure, de l’ambiance dans laquelle nous avons travaillé, du cahier de
charge remis pour le projet et des différents termes utilisés dans le thème.

12
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Chapitre 1 : L’ENTREPRISE D’ACCUEIL

Dans cette partie nous nous intéresserons à la présentation de la structure d’accueil
dénommée ABS.

I. PRESENTATION D’ABS

Société d’intégration de solutions informatiques, Africa Biometrics Security a été créée en 2020
pour répondre au besoin de l’Etat d’automatiser le comptage physique des élèves du littoral ivoirien.
Elle est spécialisée en développement de logiciels appliqués aux besoins des écoles, des entreprises, des
organisations. Elle propose également des solutions performantes pour la création, le déploiement et la
maintenance de progiciels. Africa Biometrics Security (ABS) a son siège social à Abidjan, Cocody 2
plateaux, vallons Rue des jardins. Elle fournit de nombreuses prestations notamment :

 Approche et création personnalisée pour chaque projet.

 Une gamme complète de services : création et production industrielle de logiciel, site

internet/intranet et formation, fournitures d’équipements de dernière technologie à forte valeur
ajoutée.

 Une conception intégrant la dimension commerciale.

 Une équipe performante à la pointe des technologies Interactives.

Et comme toute bonne entreprise qui se respecte et se veut compétitive, ABS a des principes tels que :

 La sûreté et la confiance d’avec la clientèle

 Un esprit positif et collaboratif au sein de la société

13
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

 Une assistance perpétuelle pour les boites et les clients

II. ORGANIGRAMME
L’organigramme de ABS comporte trois (03) principaux départements dont la tête est la DIRECTION
GENERALE, voir la Fig.1 ci-dessous :

DIRECTION
GENERALE

SECRETARIAT
GENERAL

DIRECTION SERVICE
TECHNIQUE PROJETS

Fig. 1 : Organigramme d’ABS (source : service secrétariat général de la direction ABS)

Et dans le cadre donc de notre stage de fin de cycle, nous avons été affectés au Service Projets. Ce
service est dirigé par M. TAMEGNON JEAN-BAPTISTE, directeur technique et responsable du pilotage
des projets c’est-à-dire de la phase d’étude jusqu’à la réalisation.

14
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Chapitre 2 : CAHIER DE CHARGES ET DEFINITION DES THEMES

Dans cette deuxième partie du mémoire il sera question de présenter le projet ainsi que notre
cahier de charges, définir les termes du projet et nous présenterons les concepts clés nécessaires pour la
meilleure compréhension de notre sujet et du travail effectué.

I. CONTEXTE ET DEFINITION DU PROJET

Notre projet vise tous les services ou institutions désirant intégrer des solutions informatiques à
leur actif. Et présentement celui-ci est axé sur le domaine de l’Education Nationale. Le but premier du
projet est d’apporter un peu plus d’informations sur l’entreprise, aux yeux du monde et en second lieu
faire sa promotion pour d’éventuelles offres et demandes d’aide. Les entreprises où instituions déjà
clientes bénéficieront des mises à jour des logiciels octroyés par ABS. Cette application se voudra sûre
et sécurisée.

II. OBJECTIFS DU PROJET

1. Objectif principal
L’objectif principal est de réaliser une application web sécurisée pour l’entreprise Africa
Biometrics Security.
2. Objectifs spécifiques
L’application demandée doit :
 Etre avant tout dynamique
 Permettre d’acquérir de nouveaux clients.
 Permettre d’améliorer la notoriété de l’entreprise.
 Permettre d’apporter un nouveau service à vos clients / fidélisation de vos clients.
 Permettre d’apporter des informations au sujet de l’entreprise.
 Promouvoir un produit ou un service.
 Permettre d’avoir la mise à jour du logiciel ABS pour les clients l’ayant déjà.

15
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

III. CONTRAINTES ET DIFFICULTES

La contrainte liée à la réalisation du projet se situe au niveau de l’utilisation de React JS, une
bibliothèque JavaScript qui est un outil de développement que nous n’avons jamais eu à utiliser. Ce qui
a donc créé dans les débuts bon nombre de stress et d’angoisse. Il faut ajouter à cela des difficultés au
niveau de la machine de développement (PC portable Lenovo, Windows 10, core i5).

IV. LIVRABLE ATTENDU

Le livrable attendu à la fin de ce projet est une application web sécurisée qui répond scrupuleu-
sement au cahier de charge défini en amont et qui présente l’entreprise dans tous ses recoins.

V. WEB ET APPLICATION WEB

1. LE WEB

Le web désigne en anglais une toile d’araignée. C’est une technologie permettant de consulter des
pages regroupées sur des sites afin d’obtenir l’information que l’on recherche à partir d’un navigateur. .

2. L’APPLICATION WEB

Une application web désigne une partie logicielle qui peut être accéder à partir d’un navigateur.
On peut également considérer une application web comme un serveur2 web puisqu’il peut héberger
plusieurs applications web en son sein. Voici cités 4 caractéristiques d’une application web qui vous
aideront à la différencier des autres types d’applications :

 Elles nécessitent un développement unique pour tout appareil. Un seul développement en

HTML5 suffit pour n’importe quel système d’exploitation.
 Il n’est pas nécessaire de les télécharger. L’application est hébergée sur un serveur et est acces-
sible à partir d’un navigateur. Cela signifie qu’il est nécessaire d’être connecté pour y accéder.
 Elles sont accessibles à partir de n’importe quel navigateur. Si vous avez un navigateur installé
sur votre appareil (Firefox, Safari, Chrome…), vous pouvez accéder à l’application web.

16
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig. 2 : illustration du domaine d’utilisation d’une application web (source : [Link])

VI. APPLICATION WEB SECURISEE

Une application web sécurisée ou autrement dit sécurité des applications web décrit les mesures
de sécurité au niveau des applications web qui aident à empêcher le vol ou le détournement de données
ou de code contenus dans les applications. Cette sécurité vise à répondre et à remplir les quatre
conditions de sécurité, également appelées principes de sécurité :

 Confidentialité: stipule que les données sensibles stockées dans l'application Web ne doivent
en aucun cas être exposées.

 Intégrité: indique que les données contenues dans l'application Web sont cohérentes et ne sont
pas modifiées par un utilisateur non autorisé.

 Disponibilité: indique que l'application Web doit être accessible à l'utilisateur authentique
dans un délai spécifié en fonction de la demande.

17
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

 Non-répudiation: indique que l'utilisateur authentique peut ne pas refuser de modifier les
données contenues dans l'application Web et que l'application Web peut prouver l’identité de
l'utilisateur authentique.

Et dans notre cas, l’outil qui nous garantit au mieux d’accéder à ces 4 points est la bibliothèque React.
Nous en parlerons dans la suite de notre travail.

Chapitre 3 : LA BIBLIOTHEQUE REACT JS

Dans cette partie nous parlerons de la bibliothèque utilisée pour le développement.

I. PRESENTATION DE REACT JS

Conçue par Jordan Walke, un ingénieur de Facebook et publiée en Open-source2 depuis 2013,
React est une bibliothèque permettant de concevoir des applications web et mobiles très performantes
et qui peuvent modifier les données, sans avoir à recharger la page. Son approche est de considérer une
page web comme un ensemble de composants, c’est à dire de parties unitaires que l’on va pouvoir faci-
lement exploiter, réutiliser et tester. L'objectif principal de React est d'être rapide, évolutive et simple.

Fig. 3 : logo de la bibliothèque React .

Parmi ses atouts, nous profitons de :

18
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

 performance d’exécution

 souplesse de conception

 rafraîchissement des interfaces

 synchronisation constante avec les données

 flexibilité

(Atouts : [Link])

II. AVANTAGES D’AVEC LES AUTRES BIBLIOTHEQUES

ET FRAMEWORKS

Prenons en compte que bien que ce soit des mots différents, il va s’en dire qu’ils ont des points en
commun. Et par abus de langage, l’on prononce Framework là où très souvent il s’agirait d’une
bibliothèque et vice-versa.
Le développeur utilise une bibliothèque en appelant le code de cette dernière, tandis que le rôle du
Framework (cadre applicatif) est d’exécuter le code du développeur. Le Framework donne un
cadre, une organisation, un squelette, une méthode de travail. Tandis que la librairie, elle, offre des
fonctionnalités multiples à l’utilisateur pour son code.

Selon StackOveflow, environ 40,14 % des 67.000 répondants en 2021 ont choisi React, tandis que 22,96
% ont gardé la main sur Angular.

19
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig. 4 : diagramme de préférence des Framework et bibliothèques

Sur GitHub, React a 175.000 étoiles sur son dépôt, alors que les autres n’atteignent même pas la barre
des 150.000.

III. LE CARACTERE SECURITE DE REACT

Le caractère sécurité de React réside dans le fait que ses modules parcellaires et sa qualité
d’évolution sont à la pointe de la technologie. Les applications créées avec cette bibliothèque en disent
long : YouTube, Facebook, Instagram, Netflix… Il est même possible, qu’une fois hébergé sur internet,
qu’on n’ait pas accès au code source du site comme on le voit communément.

20
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig. 5 : applications mobiles faites avec React

Toutes ces plateformes combien sécurisées, sont la conséquence d’une seule et même bibliothèque,
React.

Au terme de notre première partie, nous retenons donc que ces chapitres nous ont permis d’avoir
un aperçu de l’entreprise qui nous a accueillie. Juste après nous avons eu à parler du cahier de charge
remis pour le dudit projet pour ensuite découler sur l’explication de certains de ces termes et de l’outil
de conception qui sera utilisé. Dans la suite de notre travail, nous ferons une étude technique du projet
afin de bien repérer le système d’information à mettre en place.

21
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

DEUXIEME PARTIE : ETUDE TECHNIQUE

DESCRIPTION : Tout au long de cette partie, nous ferons l’étude de l’existant du

projet et le choix de la méthode appropriée pour notre projet durant la conception de
notre système.

22
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Chapitre 4 : ETUDE DE L’EXISTANT

Dans ce chapitre nous ferons l’étude de l’existant au sein de l’entreprise, nous présenterons ses
failles si elle en a, et découler sur notre projet pour la meilleure compréhension de celle-ci.

I. PRESENTATION DE L’EXISTANT

Etant présentement sur le dossier du ministère de l’Education Nationale, il existe à ce jour un

logiciel ABS en charge de la récupération des données de pointage biométrique pour le suivi des élèves.
Projet WinDev, le logiciel ABS a été conçu par le directeur technique M. Tamegnon J. pour répondre au
besoin demandé.

Fig. 6 : Plateforme du logiciel ABS (source : secrétariat ABS )

23
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

II. LIMITES DE L‘EXISTANT

A la suite de ce qui précède, nous pouvons dire qu’il n’existe pas réellement de failles dans ce
logiciel excepté des informations importantes, relatives et propres à l’entreprise. Il a aussi que les mises
à jour de ce système sont difficiles d’accès.

III. SOLUTION PROPOSEE

Et donc pour pallier à ce qui a été mentionné plus haut nous avons décidé de mettre en place une
application web sécurisée et qui correspondra bien évidemment aux exigences du cahier de charge
donné en amont.

Chapitre 5: PRESENTATION DES OUTILS DE MODELISATION

Le chapitre 5 présentera les outils de modélisation de notre projet.

I. PRESENTATION DES OUTILS DE MODELISATION ET CHOIX

Quand l’on parle de modélisation, particulièrement en informatique, nous faisons allusion à l’ana-
lyse préalable des informations sur le projet suivie d’une représentation de la structure de ces informa-
tions. Tout comme l’architecte conçoit ses plans avant toute construction physique, il en est de même
pour l’informaticien aguerri. Et donc en génie logiciel, les outils de modélisation ou d’analyse les plus
utilisés sont UML et MERISE.

1. Présentation de MERISE

24
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

MERISE est un sigle qui se traduit par Méthode d’Etude et de Réalisation Informatique par Sous-En-
sembles. C’est une méthode de conception, de développement et de réalisation de projets informa-
tiques. Elle possède des avantages et des inconvénients qui sont :

AVANTAGES INCONVENIENTS

 Il ne cesse de s’améliorer  Apprentissage rigoureux

 Très intuitif
 Plusieurs modèles à prendre
 Portable : Il fonctionne sur en compte
la majorité des plateformes
 Pas en mesure de modéliser
 Gère les interfaces utilisa-
les données à caractère sé-
teurs
mantique
 Gratuit

Fig. 6 : Avantages et inconvénients de la méthode MERISE

2. Présentation d’UML

UML est également un sigle qui signifie Unified Modeling Langage ; en français, langage de
modélisation unifié. Contrairement à MERISE, UML est un langage de conception graphique et orienté
objet. Et tout comme MERISE, elle possède des avantages et des inconvénients :

25
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

AVANTAGES INCONVENIENTS
 Capable de modéliser les données  Approche objet moins intui-
à caractère sémantique
tive
 Indépendante vis-à-vis de la tech-
 Diagramme souvent difficile
nologie
d’adaptation
 Rend l’analyse plus aisée
 Temps de gestion des dia-
 Langage normalisé clair et précis
grammes souvent long

Fig 7 : Avantages et inconvénients du langage UML ()

3. Comparaison des deux outils

Voici présenté ci-dessous un tableau qui comparera nos deux outils :

MERISE UML

Méthode d’analyse et de concep- Langage de représentation d’un

tion de système d’information SI

Schéma directeur, étude préa- Diagrammes pour représenter

lable, étude détaillée et réalisa- chaque aspect d’un système sta-

26
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

tion tique ou dynamique

Relationnel Orienté objet

Fig.9: tableau comparatif des deux outils

4. Choix de notre outil de modélisation

A la vue de tout ce qui précède, depuis la présentation des deux (02) outils jusqu’à leur comparaison,
notre choix va être porté sur la méthode MERISE pour son caractère relationnel et pour le fait que l’ap-
préhension de cette méthode nous est plus aisée.

II. LES TROIS DIMENSIONS DE LA METHODE MERISE

A ce stade de notre mémoire nous décrirons les étapes recommandées par la méthode MERISE.
Dans son cours sur cette méthode, M. KABORE RAOGO scinde en six (06) le processus MERISE qui
eux-mêmes sont régis par trois (03) cycles fondamentaux dont nous ferons mention maintenant.

1. Le cycle de vie
Le cycle de vie comporte trois grandes périodes :

 La conception : période d'étude de l'existant puis du système à mettre en place,

 La réalisation : recouvre la mise en œuvre et l'exploitation,

 La maintenance : devra permettre au système d'évoluer et de s'adapter aux modifications de

l'environnement et aux nouveaux objectifs pendant une certaine durée de vie et ensuite il de-
vra laisser la place à un nouveau système.

2. Le cycle de décision
Tout au long de l'étude et de la maintenance, des décisions sont à prendre, très générales d'abord

puis de plus en plus détaillées. C’est la liste de tous les moments où une décision est prise sur le pro-

27
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

jet (décision de faire le projet après une étude préalable, décision de valider l’analyse fonctionnelle et
de passer à l’architecture, validation de la recette, etc.)

Exemple : La décision de créer un téléphone portable ne doit pas se faire sans l’accord de celui qui
passera ses heures à l’utiliser.

3. Le cycle d’abstraction
Le cycle d’abstraction concerne le système de spécification d'un système informatisé (SI) :

 La mémoire du SI est décrite sur le plan conceptuel, puis logique et enfin physique.

 Les processus de traitements sont décrits sur le plan conceptuel, puis organisationnel et enfin
opérationnel.

Chaque couche est décrite sous la forme d'un modèle. Lorsque les paramètres des couches inférieures
évoluent, la couche décrite n'est pas altérée, et elle ne le sera que si ses propres paramètres seront
modifiés.

Chaque modèle est décrit à travers un formalisme reposant sur des règles et des principes, un voca-
bulaire et une syntaxe. Des règles de transition permettent de passer plus ou moins automatiquement
d'un modèle à un autre, ce que nous montrerons dans la suite de notre travail et que nous détaille -
rons de façon spécifique à notre projet.

Chapitre 6: MODELISATION DU SYSTEME

Dans ce chapitre, nous mettrons en exergue toutes les étapes de MERISE que nous avons eu à faire
avant que la conception logicielle ne soit faite.

I. LES REGLES DE GESTION

28
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

L’objectif est de répondre à la question quoi? De comprendre la nature du problème. Et c’est au tra-
vers d’un ensemble de règles de gestion que vont se traduire les objectifs et les contraintes qui pèsent
sur l’entreprise.
Exemple de règles de gestion :

• Un professeur ne peut donner qu’un seul type de cours.

• Toute commande doit être visée par écrit.

Dans note contexte estudiantin à priori et générale à postériori, il s’en suit les règles de gestion sui-
vantes :

 Un professeur désire enseigner dans plusieurs écoles

 Une entreprise s’inscrit pour un service

 Une école demande plusieurs informations

 Une école veut une mise à jour

 Une école s’inscrit pour un service

Entités : professeur, entreprise, école, service, informations

Relations : enseigner, s’inscrire, demander, vouloir

II. LE DICTIONNAIRE DE DONNEES, LES DEPENDANCES

FONCTIONNELLES ET LE GRAPHE DES DEPENDANCES
FONCTIONNELLES
1. Le dictionnaire de données(DD)

Le dictionnaire des données est un document qui permet de recenser, de classer et de trier toutes
les informations collectées lors des entretiens ou de l’étude des documents. Voici présenté ci-dessous
notre dictionnaire de données :

29
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Type Règle
Nom de la Règle de
Format Longueur Elémentaire Calculé de Document
donnée gestion
calcul
adresséco Alphanumérique 30 OK
codeéco Numérique 10 OK
OK
drenéco Alphabétique 20
noméco Alphabétique 40 OK

adressentrep Alphanumérique 30 OK
fonctioentrep Alphanumérique 30 OK

nomentrep Alphanumérique 40 OK
typeentrep Alphabétique 30
OK
lieu Alphanumérique 40 OK NEANT NEANT NEANT
Alphabétique OK
but 100
Alphanumérique
adressprof 30 OK
mailprof 30 OK
Alphanumérique
OK
nomprof Alphabétique 40
prenomprof Alphabétique 50 OK
Numérique OK
salairedemprof 10
miseajourlogic Numérique 100 OK
Alphabétique OK
nomservice 40
typeservice Alphabétique 30 OK

Fig.10 : Dictionnaire de données

30
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

2. Les dépendances fonctionnelles(DF)

Lorsqu’on parle de dépendance fonctionnelle entre deux propriétés lorsque la connaissance d'une
valeur d'une propriété P1 permet de déterminer une et une seule valeur d'une autre propriété P2. On dit
que P2 dépend fonctionnellement (ou est en dépendance fonctionnelle) de P1. La dépendance
fonctionnelle est notée P1 --> P2;
Dans notre cas on note :
 Codeéco --> noméco
 Codeéco --> drenéco
 Fonctioentrep --> typeentrep
 Adressentrep --> nomentrep

3. Le graphe des dépendances fonctionnelles(GDF)

Le graphe des dépendances fonctionnelles épure le dictionnaire en ne retenant que les données
non déduites et élémentaires et il permet une représentation spatiale de ce que sera le futur modèle
conceptuel des données. On a donc :

31
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig. 11 : Schéma du graphe des dépendances fonctionnelles

III. LE MODELE CONCEPTUEL DE DONNEES

Le Modèle Conceptuel de données (MCD) sert à décrire les données du Système d’Information. Il
permet de représenter les données de manière facilement compréhensible à l'aide des concepts d'entités
et de relations. Nous avons donc :

32
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig 12 : Schéma du MCD

IV. LE MODELE CONCEPTUEL DE TRAITEMENT

Le modèle conceptuel des traitements permet de traiter la dynamique du système d'information,

c'est-à-dire les opérations qui sont réalisées en fonction d'événements. Ce modèle permet donc de
représenter de façon schématique l'activité d'un système d'information sans faire référence à des choix
organisationnels ou des moyens d'exécution, c'est-à-dire qu'il permet de définir simplement ce qui doit
être fait, mais il ne dit pas quand, comment ni où. Ci-dessous se trouve notre MOT :

Fig.13 : Schéma du MCT

33
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

[Link] MODELE LOGIQUE DE DONNEES

Le Modèle Logique des Données (MLD) est une étape intermédiaire pour passer du modèle E/A, qui
est un modèle sémantique, vers une représentation physique des données : fichiers, SGBD
hiérarchique, SGBD réseau, SGBD relationnel. Nous nous limiterons au seul MLD relationnel, qui
prépare le passage aux SGBD relationnels :

professeur (idProfesseur, addrProf, nomProf , métiéProf, Salaire)

école (id_ecole, nomecole, codeEcole, drenEcole)

enseigner (#idProfesseur, #id_ecole)

informations (idInformation, lieu, but)

entreprise (idEntreprise, lieu, fonction, type, nom)

demander (#id_ecole, #idInformation, #idEntreprise)

service (idService, miseajourdulogiciel)

s’inscrire(#idService, #idEntreprise)

34
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

A la suite de la présentation de nos deux outils de conception que sont UML et MERISE, nous avons
opté pour MERISE. En effet il nous a permis d’accomplir un travail assez rigoureux en amont avant
implémentation logicielle et d’être bien situé sur les spécificités et fonctionnalités de notre application.
Pour ce qui est du développement à proprement dit, et nous l’avons mentionné plus haut, la
bibliothèque REACT sera évidemment au rendez-vous. Ainsi dans le prochain chapitre nous
montrerons les résultats du travail effectué.

35
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

TROISIEME PARTIE : RESULTATS ET DISCUSSION

DESCRIPTION : Nous voilà enfin à la toute dernière partie de notre mémoire où

nous présenterons les résultats de notre projet et où nous en discuterons.

36
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Chapitre 7 : RESULTATS

I. LES OUTILS DE DEVELOPPEMENT

1. Visual studio code

Fig.14: Logo VS code

Visual Studio Code est un éditeur de code intelligent et extensible développé par Microsoft pour les
systèmes d’exploitation Windows, Linux et MacOs. Il intègre plusieurs fonctionnalités telles que la prise
en charge du débogage, l’auto complétion du code, les thèmes, etc…

2. Node JS

Fig.15: Logo Node JS

Node JS est une plateforme logicielle libre en JavaScript, orientée vers les applications réseau. Elle
est également utilisée comme serveur web.

37
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

[Link] Designer

Fig.16: Logo PowerDesigner

PowerDesigner est un logiciel de conception qui permet de modéliser les traitements informatiques
et leurs bases de données associées.

II. PRESENTATION DE L’APPLICATION

1. Présentation de la page d’accueil

2. Présentation de

3. Présentation de

38
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig.17 : Page d’accueil de l’application web

Voici ci-dessus présentée la page d’accueil de l’entreprise. Vous verrez la barre des menus, des images
défilantes et une barre d’actualité qui fait passer des informations sanitaires et environnementales.

2. Présentation du formulaire école

Fig.18 : Formulaire école

A ce niveau, on a un formulaire d’inscription pour les écoles désirant participer au projet
biométrique de l’entreprise.

3. Présentation du formulaire professeur

39
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

Fig.19 : Formulaire professeur

Ce second formulaire est entre autre réservé aux professeurs désirant prodiguer des cours dans des
écoles non loin de chez eux et qui accepterait le salaire que les professeurs proposeraient.

4. Présentation du formulaire entreprise

Fig.20 : Formulaire entreprise

Des entreprises recherchant des services informatiques, et assistances logicielles pour contacter la boite
pour possibilité d’aide.

Chapitre 8 : DISCUSSION ET VALOIR ECONOMIQUE

Dans cette dernière partie nous discuterons du cout du projet.

I. DISCUSSION
Les différentes fonctionnalités de l’application ont été testées et approuvées par l’entreprise mais
pas encore mise en production sur Internet. Il s’en est suivi au bout de quelques essais que notre

40
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

application répond aux exigences fonctionnelles. On parle en effet de la disponibilité d’une mise à jour
des firmes détenant des applications et logiciels octroyés par l’entreprise, des informations nécessaires
à la meilleure compréhension des services de l’entreprise, de formulaires pour inscrire école, entreprise
et professeur recherchant un travail dans des écoles.

II. VALOIR ECONOMIQUE

L’estimation financière nous permettra d’évaluer le cout de notre projet et donc on a :

N° Désignation Quantité Prix unitaire Montant(FCFA)

1 Ordinateur 2 500.000 1.000.000

2 Forfait Internet 2GB/jour 2000 160.000

3 Main d’œuvre 1 600.000 600.000

Fig.21 : Estimation financiere

Pour un total évident de : 1.760.000 FCFA

41
 Réalisé par Ahoua Nathan MANLAN, étudiant en systèmes informatiques et génie logiciel

CONCLUSION

Pour conclure nous pouvons dire que l’élaboration du projet étant la création d’une application web
sécurisée ne s’est hélas pas fait sans encombre; depuis l’apprentissage de la bibliothèque React jusqu’à
la conception dudit projet. L’application se voulant sécurisée, nous avons pu atteindre cet objectif-là;
des tests sont faits et pour l’instant rien à signaler. Et pour mener à bien tout ceci nous sommes passés
par une méthode de conception très pratique et soft appelée MERISE avant l’implémentation de notre
application.

Grâce à notre application l’entreprise ABS aura un plus grand marché et fournira aux entreprises et
écoles tierces des informations sur elle notamment son fonctionnement, ses points forts et ses
différents services. Ainsi, l’application assurera la promotion de l’entreprise aux yeux du monde.

Nous restons néanmoins à l’écoute pour d’éventuelles modifications et perspectives sécuritaires. Mais
plutôt qu’opter pour une bibliothèque qui peut être manipulée par tous pourquoi pas songer à mettre
un langage de programmation dont la structure et la conception serait faite avec nos langues locales ?

42
 BIBLIOGRAPHIE ET WEBOGRAPHIE

BIBLIOGRAPHIE :

[1] TRAORE ZIE ABASS «Etude et mise en place d’une application de gestion de clinique privée : la
grande clinique du dokui», Mémoire de fin de cycle Licence en Système Informatique Génie Logiciel,
ESATIC, 56 pages, 2019-2020.
[2] KEÏTA M. « Etude et mise en place d’une application web de sondage en ligne », Mémoire de fin de
cycle Licence en Système Informatique Génie Logiciel, ESATIC, 59 pages, 2018-2019.

WEBOGRAPHIE :

[3] [Link] Consultée le 12 mai à 15h32

[4] [Link]
profondeur) Consultée le 13 mai à 10h05
[5] [Link]
la-methode-merise, Wikipédia Consultée le 18 mai à 09h18
[6] [Link] Consultée le 26
mai à 16h40
 ANNEXE

Annexe 1 :

Fig.22 : Module Messagerie

Annexe 2 :

3
Fig.23 : Module Pédagogie

Annexe 3 :

3
Fig.24 : Module Finance

3
 TABLE DES MATIERES
DEDICACE .............................................................................................................................III
REMERCIEMENTS ............................................................................................................. IV
SOMMAIRE.......................................................................................................................... V
SIGLES ET ABREVIATIONS.............................................................................................VII
LISTE DES FIGURES .........................................................................................................VIII
LISTE DES TABLEAUX .....................................................................................................IX
INTRODUCTION..................................................................................................................X
PREMIERE PARTIE : GENERALITES................................................................................XII
Chapitre 1 : L’ENTREPRISE D’ACCUEIL……………………………………………………………………..XIII
I. PRESENTATION D’ABS……………………………………………………………………………………………..XIII
II. ORGANIGRAMME………………………………………………………………………………………………………XIV

Chapitre 2 : CAHIER DE CHARGES ET DEFNITIONS DES TERMES……………………………….XV

I. CONTEXTE ET DEFINITION DU PROJET………………………………………………………………………….XV

II. OBJECTIFS DU PROJET…………………………………………………………………………………………………XV

III. CONTRAINTES ET DIFFICULTES………………………………………………………………XVI

IV. LIVRABLE ATTENDU………………………………………………………………………………………..XVI

V. WEB ET APPLICATION WEB………………………………………………………………………………………..XVI

VI. APPLICATION WEB SECURISEE……………………………………………………………………………XVII

Chapitre 3 : LA BIBLIOTHEQUE REACT………………………………………………………………………..XVIII

I. PRESENTATION DE REACT…………………………………………………………………………………………XVIII

II. AVANTAGES D’AVEC LES AUTRES BIBLIOTHEQUES ET FRAMEWORKS………………………..XIX

III. LE CARACTERE SECURITE DE REACT……………………………………………………………………………XX

DEUXIEME PARTIE : ETUDE TECHNIQUE………………………………………………………..XXII

Chapitre 4 : ETUDE DE L’EXISTANT………………………………………………………………………….XXIII

3
 I. PRESENTATION DE L’EXISTANT…………………………………………………..XXIII

II. LIMITES DE L’EXISTANT………………………………………………………XXIV

III. SOLUTION PROPOSEE……………………………………………………..XXIV

Chapitre 5 : PRESENTATION DES OUTILS DE MODELISATION……………………………XXIV

I. PRESENTATION DES OUTILS DE MODELISATIONS ET CHOIX………………………XXIV

II. LES TROIS DIMENSIONS DE LA METHODE MERISE…………………………………..XXVII

Chapitre 6 : MODELISATION DU SYSTEME………………………………………………..XXVIII

I. LES REGLES DE GESTION……………………………………………………………XXIX

II. LE DICTIONNAIRE DE DONNEES, LES DEPENDANCES FONCTIONNELLES ET LE GRAPHE

DES DEPENDANCES FONCTIONNELLES…………………………………………………………XXIX

III. MODELE CONCEPTUEL DE DONNEES…………………………………………………………XXXII

IV. MODELE CONCEPTUEL DE TRAITEMENT…………………………………………..XXXIII

V. MODELE LOGIQUE DE DONNEES………………………………………………………………………..XXXIV

TROISIEME PARTIE : RESULTATS ET DISCUSSION………………………………………………XXXVI

Chapitre 7 : RESULTATS…………………………………………………………………………….XXXVII
I. OUTILS DE DEVELOPPEMENT………………………………………………………………. XXXVII
II. PRESENTATION DE L’APPLICATION………………………………………………XXXVIII
Chapitre 8 : DISCUSSION ET VALOIR ECONOMIQUE………………………………XL
I. DISCUSSION………………………………………………………………. XL
II. VALOIR ECONOMIQUE………………………………………………XLI
CONCLUSION………………………………………………………………………………………..XLII
BIBLIOGRAPHIE ET WEBOGRAPHIE ......................................................................... XLIII
ANNEXE……………………………………………………………..XLIV

3
 RESUME
Ce mémoire nous présente la création d’une application web sécurisée pour la promotion et
l’information sur l’entreprise Africa Biometrics Security. Cette application vise toutes les autres boites
et entreprises désirant s’informatiser ou acquérir les services de l’entreprise ABS. Pour atteindre donc
cet objectif, nous avons premièrement établie, par la méthode MERISE un plan de conception puis
nous l’avons mis en exécution à l’aide d’outils de conception matériels et logiciels. Elle est
intégralement faite avec la bibliothèque React et Node JS représente le serveur sur lequel toutes les
données seront recueillies.

ABSTRACT
This memory presents the creation of a safe and secure web application for the promotion and the
information on the entrance of Africa Biometrics Security. This application aims at all other companies
wishing to put computer science in their works and acquire the services of ABS. For reaching this goal,
firstly, we have used a design method called MERISE to establish a plan before the coding,
implemented with a library called React and we have also used a server called Node JS for saving data
of our application.

Ecole Supérieure Africaine des Technologies de l’Information et de la Communication Zone 3,

Km 4 Bd Marseille - 18 BP 1501 Abidjan 18 – [Link] Mail : direction. esatic@[Link]