Mémoire de Fin d’Etudes pour l’obtention du diplôme de

Master II en Informatique

CREATION D’UNE
gggggggggggg
APPLICATION WEB POUR
L’OPTIMISATION DE LA
GESTION DES ACTIVITES
D’UNE CABINET D’AUDIT

Présenté par : TSIMIODY Azonay Lalasy

Filière : Génie Logiciel

Classe : 5ème année GLFC

Matricule : 2266/19

Année universitaire : 2020-2021

Encadreur Pédagogique : Monsieur RANDRIANARIMANANA Fanomezantsoa

Année d’édition : Juillet 2021

 AVANT-PROPOS
L’Institut Supérieur d’Informatique ; IS-INFO, est un centre de formation spécialisé en
informatique. Toutes les études sont orientées vers l'apprentissage et la manipulation de
l'ordinateur au plus proche du monde de l'entreprise. L'IS-INFO a obtenu l'autorisation
d'ouverture le 07 juillet 2004, suivant l'agrément n° 449- MENRS/SG/DG ENRS SRS/DFPT,
ainsi que les reconnaissances des diplômes par la Fonction Publique sous le numéro
d'équivalence 844/2007 CNEAT, le 15 Janvier 2007 et le numéro d'équivalence 2064/2009
CNEAT, le 06 février 2009.

La Mission de l’Institut est la formation professionnelle des étudiants pour devenir des cadres
supérieurs d'entreprises. De plus, l’institut s'engage à former en Premier cycle des techniciens
supérieurs spécialisés ayant les capacités d'initiatives dans leurs attributions et en second
Cycle possédant des compétences techniques effectives suivant la norme et les besoins des
entreprises. L’Institut offre un diplôme de licence professionnelle pour les étudiants qui ont
effectué une formation de trois ans et un diplôme de master pour une formation de cinq ans.

L’IS-INFO propose à ses étudiants une formation diplômante. Les Diplômes de Licence
Professionnelle en Informatique : Bacc+3 et Les Diplômes de master en Informatique :
Bacc+5 sont délivrés aux étudiants dans les deux filières de formation suivantes :

 Génie Logiciel (GL) tous les matins entre 07 heures et 12 heures 30 minutes.
 Administrateur Systèmes et Réseaux (ASR) tous les après-midis entre 12 heures 30
minutes et 18 heures.

L’institut dispense deux types de formation :

 Une formation Initiale (FI) de demi-journée suivant la filière choisie

 Une Formation Continue (FC), sous forme de télé-enseignement, tous les samedis de
07 heures à 18 heures.

Après cinq années de formation au sein de l’Institut, l’impétrant peut effectuer un stage dans
les sociétés ou pas pour l’obtention du diplôme de master en Génie logiciel dont le thème est :
« Création d’une application web pour l’optimisation de la gestion des activités d’un cabinet
d’audit (cas de Delta Audit) ».

2
 REMERCIEMENTS

Nous adressons nos remerciements, en premier lieu DIEU Tout Puissant, qui nous a donné la
force, le courage, la volonté, la santé et la possibilité de poursuivre le cursus de la formation à
l’ISINFO, afin de faire cette soutenance de mémoire de fin d’études pour obtenir le diplôme
de MASTER II.

Nous tenons aussi à remercier la personne qui nous a encadré durant la réalisation de ce
mémoire : Monsieur RANDRIANARIMANANA Fanomezantsoa, enseignant formateur à
l’ISINFO et encadreur pédagogique pour tout le temps qu’il nous a consacré, ses directives
précieuses pendant la réalisation de ce mémoire.

Ainsi nous ne saurons réitérer un grand merci

• À nos parents qui nous ont soutenus moralement et financièrement pour qu’on puisse
continuer nos études à l’ISINFO afin de faire cette soutenance de mémoire de fin d’études ;

• Notre famille, collègues, et tous nos amis pour leurs suggestions, leurs aides et surtout
leur soutien ;

• Enfin, à tous ceux qui, de près ou de loin, nous ont aidés à la réalisation de ce travail.
 LISTE DES ABREVIATIONS
API : Application Programming Interface LAN: Local Area Network
CdCF : Cahier des Charges Fonctionnelles
MSP : MS Project
CI: CodeIgniter
MVC : Modèle-Vue-Contrôleur
CLI: Command Line Interface
NPM: Node Package Manager
CRUD: Create, Read, Update, Delete
PHP: Personal Home Page
CSS: Cascading Style Sheets
POO: Programmation Orientée Objet
DOM:
REST: Representational State Transfer
ES: EcmaScript
Sass: Syntactically Awesome Stylesheets
FN: formes normales
SCSS:
GPO: Group Policy Object
SPA: Single Page Applications
GPS:
SQL: Structured Query Language
HTML: HyperText Transfer Protocol
TS: TypeScript
HTTP: HyperText Markup Language
UML: Unified Modeling Language
JS: JavaScript
URL: Uniform Resource Locator
JSON: JavaScript Object Notation
XML: Extensible Markup Language
 LISTE DES FIGURES

Figure 1: : Fonctionnement MVC.............................................................................................17

Figure 2: code json....................................................................................................................21
Figure 3: Logo CodeIgniter......................................................................................................27
Figure 4: Page d’accueil CodeIgniter.......................................................................................28
Figure 5: URL avec CodeIgniter...............................................................................................31
Figure 6: Logo Angular............................................................................................................34
Figure 7: Diagramme de Gantt.................................................................................................47
Figure 8: Diagramme de Cas d’utilisation................................................................................48
Figure 9: Diagramme de séquence Authentification................................................................49
Figure 10: Diagramme de séquence Administration – demande accès de l’utilisateur............50
Figure 11: Diagramme de séquence Administration – validation compte utilisateur...............51
Figure 12 : Diagramme de séquence Administration – Données de base.................................51
Figure 13: Diagramme de séquence Demande de débours.......................................................52
Figure 14: Diagramme de séquence Autoriser débours............................................................52
Figure 15: Diagramme de séquence viser débours...................................................................53
Figure 16: Diagramme de séquence RH...................................................................................54
Figure 17: Diagramme de séquence Paiement..........................................................................54
Figure 18: diagramme de classe de notre application...............................................................55
Figure 19: Liaison entre backend et frontend...........................................................................65
Figure 20: Authentification de notre application......................................................................67
Figure 21: Création de compte dans notre application.............................................................67
Figure 22: page d’accueil de notre application.........................................................................68
Figure 23: Liste des données dans notre application................................................................70
Figure 24: Ajout des données dans notre application...............................................................71
Figure 25: Modification des données dans notre application...................................................71
Figure 26: Suppression des données dans notre application.....................................................72
 LISTE DES TABLEAUX

Tableau 1: Signification du code json.......................................................................................20

Tableau 2 : Signification directive Angular..............................................................................39
Tableau 3: Liste des diagrammes UML....................................................................................45
Tableau 4: Quelques fonctions Active Record du CodeIgniter................................................57
 SOMMAIRE

INTRODUCTION

PARTIE I : JUSTIFICATION DU THEME

1-Présentation générale du cabinet Delta Audit

2-Analyse de l’existant

3-Critique de l’existant

4-Techniques actuellement utilisées pour contourner les problèmes

5-Explication du thème

PARTIE II : ASPECTS THEORIQUES

1-Présentation des connaissances nécessaires pour la réalisation du travail

2-Les grandeurs utilisées

3-Présentation des scripts et langage de programmation

4-La gestion de projet

5-Le langage de modélisation UML

PARTIE III : MODELISATION ET REALISATION

1-Gestion de projet

2-Modelisation des diagrammes UML

3-Réalisation
PARTIE IV : SYNTHESE DU TRAVAIL

1-Evaluation des grandeurs

2-Mise en valeur du projet

3-Limite du projet

4-Amélioration apportée par le système dans l’activité du cabinet

CONCLUSION
 INTRODUCTION

Le développement d'une entreprise en matière de technologies de l'information et de la

communication exige des nouveaux moyens et supports pour échanger et diffuser
l'information dans le but de réduire les contraintes de temps, d'espace et de coût, et faciliter la
gestion de l'entreprise. Les entreprises doivent s’adapter aux nouvelles technologies qui
apparaissent. Au vu des innovations technologiques et de la digitalisation des entreprises, le
choix d’une application doit dépendre de son utilité.  Pour le moment, il semble que les
applications web soient la nouvelle tendance. Une application web est conseillée pour toute
entreprise qui a besoin de fonctionnalités particulières dont on ne trouve nulle part. De plus,
l’accès à une application web se fait depuis n’importe quel type de poste comme PC,
téléphone mobile, tablette, etc… et depuis n’importe quel endroit. Les applications web
révolutionnent l’entreprise car elles permettent d’être plus performantes et plus innovantes.
C’est dans ce cas que nous avons proposé à un cabinet d’audit de remplacer son application
desktop tournant par le système client-serveur par une application web manipulable par
internet. Pour informatiser toutes les activités et avoir une meilleure organisation de travail au
sein
du cabinet Delta Audit, nous avons réuni dans une application web l’activité principale de ses
employés en mettant en place une « application web pour l’optimisation de la gestion des
activités d’un cabinet d’audit (cas de Delta Audit) ». Actuellement, ce cabinet utilise une
application desktop qui ne répond plus à tous les attentes et n'apportent qu'une réponse
partielle à toutes ses activités. Le développement spécifique d'une application web apporte
toutes les fonctionnalités et les attentes de ce cabinet améliore-t-il la gestion de ses activités ?
Pour répondre à cette question, ce mémoire est structuré de la manière suivante : la première
partie sera consacrée à la description du contexte générale du projet. La deuxième partie décrit
la conception et l’analyse de notre application. La troisième partie détaille la réalisation de
l’application et la dernière partie nous présentera la synthèse de notre travail.

2
PARTIE I : JUSTIFICATION DU THEME
 1. Présentation générale du Cabinet Delta Audit

1.1. Présentation de sa structure

1.1.1. Historique

Premier cabinet d’audit et leader à Madagascar grâce à sa croissance depuis maintenant plus
d’une vingtaine d’années, Delta Audit a été créé en 1993 par cinq experts comptables. Le
Cabinet fournit des services sur mesure et pluridisciplinaires en Audit, Conseils (juridiques et
fiscaux) pour des entreprises et projets d’envergure nationales et internationales, des
organismes internationaux, organisations non gouvernementales, bailleurs de fonds
internationaux et diverses pme/pmi.[ CITATION Del \l 1036 ]

1.1.2. Organisation

Delta Audit possède une structure de cabinet de norme internationale. Le maintien d’un haut
degré de professionnalisme et la qualité de ses services sont garantis par un système de
supervision en cascade et un contrôle de qualité.
L’équipe de Delta Audit est composée de :

 Experts Comptables et Experts Comptables stagiaires qui maîtrisent parfaitement les

problèmes spécifiques des pays émergents et d’autre part, du fait de leur formation
sont rompus aux Techniques Modernes de Gestion, d’Organisation, de Ressources
Humaines, de Fiscalité, de Finances et de système d’information.
 Experts juristes et fiscalistes

Il dispose suivant les besoins, d’un réservoir d’experts pointus et spécialisés dans
différents secteurs (Gestion de Projets, Collectivités Décentralisées, Finance Rurale,
Agriculture, Fiscalité, Port Maritime, Informatique, Macro-économie, Bâtiments et
Travaux Publics, Ingénierie…) qui interviennent comme Consultants d’appui et suivant
les normes et les méthodologies internationale.

1.1.3. Missions

Il accompagne ses clients dans leur évolution et leur développement et les assistons dans la
recherche de solution.

2
Orienté Client : Il entretient des relations professionnelles et ouvertes avec ses clients dans
un climat de confiance, et œuvrons au bénéfice mutuel des deux parties en respectant la
déontologie et les normes du métier.

Performance : son approche, son expérience, son savoir-faire ainsi que sa connaissance
approfondie des secteurs d'activité (institutions financières, industrie, pétrole, mine...)
constituent le fondement de l'excellence de son service pour ses clients. Il emploie les
meilleures ressources, développons leurs compétences, nous leur fournissons l'opportunité
d’effectuer des formations continues à l’interne et à l’étranger et il les incite à appliquer ses
valeurs.[ CITATION Del \l 1036 ].

1.2. Description du processus de gestion

1.2.1. Processus de gestion des contrats

Le cabinet Delta Audit est un cabinet d'expertise comptable et d'audit qui accompagne les
sociétés d'état, les sociétés privées, et même les particuliers, dans la mise à jour de leur
comptabilité, la tenue des états financiers, l'audit des comptes, le business planning etc. Il
participe aux appels d'offres nationaux, régionaux et internationaux. Les missions de Delta
Audit proviennent soit des appels d'offre, des entreprises privées, des particuliers et des ONG.

Ces missions débutent avant tout par la signature d'un contrat entre les deux (2) parties qui
sont liées par la prestation à exécuter. Il s'agit de Delta Audit et du client. Le contrat
représente le document de base sur lequel les deux (2) parties donnent mutuellement leur
consentement sur l'exécution de la mission, le montant de la prestation, les modalités de
règlement, la période d'exécution et les clauses à respecter.

1.2.2. Processus de gestion des missions

Après la signature du contrat par les deux parties, le Manager du cabinet de Delta Audit saisie
la mission dans la logiciel desktop qui est développé avec power Builder et Sybase tournant
avec le client serveur. Ensuite, l’un des auditeurs du cabinet utilise le logiciel de demander de
charger la mission qui est validé par le chef de la mission. Ensuite l’employé qui se charge de
l'exécution proprement dite de la mission se lance dans la récupération des pièces comptables
chez le client pour analyse et interprétation. Les comptes rendus sur les dossiers sont faits au
Manager, qui seul détient le privilège de prise de décision lorsque des complications
surviennent.

2
 1.2.3. Processus de gestion des rapports

Après exploitation des pièces comptables par le chargé du dossier, des rapports sont rédigés
pour notifier au client le niveau d'avancement du dossier, des interprétations, et des directives
à suivre. Selon le type de mission des rapports provisoires sont produits et envoyés au fur et à
mesure au client. Les rapports sont présentés au Manager, qui valide les informations
contenues dans le document et avise les rapports avant leurs transmissions au client. Au terme
du contrat, un rapport final, résumant les directives à suivre et les analyses faites, est transmis
au client. Les documents sont donc imprimés et classifiés dans des portes dossiers.

2. Analyse de l’existant

2.1. Moyen matériel

Un serveur de base de données sert à stocker, à extraire et à gérer les données dans une base
de données. Il permet également de gérer la mise à jour des données. Il donne un accès
simultané à cette base à plusieurs serveurs Web et utilisateurs. Enfin, il assure la sécurité et
l’intégrité des données. Et quand on parle de données, on entend peut-être des millions
d’éléments simultanément accessibles à des milliers d’utilisateurs.

En plus de ces fonctions principales, le logiciel de serveur de base de données offre des outils
qui facilitent et accélèrent l’administration de la base, comme l’exportation de données, la
configuration de l’accès de l’utilisateur et la sauvegarde des données.

2.2. Son propre logiciel

Delta Audit accompli ses tâches d’une manière automatique en utilisant une application
bureau installée sur des ordinateurs de bureau de chaque employé. Son rôle se manifeste dans
l’enregistrement des missions pour le manager, demande de charger de mission pour les
auditeurs et valider ou refuser la demande de mission des auditeurs pour le chef de mission.
Son logiciel a été développer en 2012 avec power Builder et comme base de données Sybase
et tournant avec le protocole client-serveur.

2.3. Environnement réseau

Pour avoir accès aux données et pour pouvoir travailler dans cette application, les personnes
travaillant au sein de Delta Audit n’ont qu’à se mettre en connexion au serveur pour pouvoir
ouvrir une session. C’est-à-dire que le réseau LAN doit seulement fonctionner comme il se
doit et la connexion peut être établi.

2
 3. Critique de l’existant
Les problèmes qui nous ont forcés de chercher un autre outil informatique permettant de gérer
les activités de Delta Audit se présentent comme suit :

3.1 Le logiciel et réseau

 La non prise en compte de certains besoins et de l’activité du cabinet.

 L’application DESKTOP utilisé à Delta Audit est un client lourd et nous avons
besoins d’un client léger permettant la facilitation des interventions.
 Manque de module et des fonctionnalités donc il y a toujours des travails manuels.

 Les employés distants ou mobiles n’ont pas pu d’accéder aux ressources de

l’entreprise où qu’ils se trouvent.

 En plus, il s'est avéré que les logiciels de gestions des activités existant sur le marché
ne correspondent pas véritablement aux attentes du cabinet.
 Son réseau ne couvre que son bureau.
 Son réseau nécessite un administrateur à temps complet, disponible sur place prêt à
intervenir rapidement.
 Elle n’est pas portable et nécessite une installation manuelle de l'utilisateur.
 Elle nécessite généralement une mise à jour manuelle à chaque installation pour
installer les mises à jour pour vous assurer que vos niveaux de productivité restent les
mêmes.
 Elle n’est pas accessible partout (on ne peut pas emporter un ordinateur portable ou un
PC partout pour y accéder).
 De plus, elles font face aux problèmes de compatibilité de système d'exploitation.
 Les utilisateurs non autorisés peuvent accéder aux données importantes si le référentiel
de données n'est pas correctement sécurisé par l'administrateur du réseau. Donc
l'administrateur de réseau doit mettre en œuvre une politique de sécurité entièrement
fonctionnelle pour la sécurité de la base de données.
 L'administrateur de réseau a le droit de vérifier les fichiers de données personnels de
chaque utilisateur. De plus, il peut consulter l'historique Internet et l'historique
d'utilisation des ordinateurs des utilisateurs du réseau.

2
 3.2 Classification dossier

 Les documents au format papier prennent de la place. Derrière cette évidence se

cachent des contraintes liées à leur stockage, leur conservation et leur utilisation au
quotidien.

 Collecter, trier, ranger et conserver correctement les documents implique une

organisation rigoureuse et gourmande en temps. Ces tâches sont théoriquement à
réaliser après chaque traitement d’un nouveau document. C’est donc une mission
quotidienne que de tenir sérieusement les archives de son service.
 La recherche documentaire peut se transformer en véritable enquête !
 De plus, du fait de leur format et de leur mode de stockage, les archives papiers
nécessitent d’être présent physiquement si vous avez besoin de les consulter en cas de
litige par exemple.
 Enfin, pour des raisons de confidentialité, il faut également sécuriser la ou les pièces
de stockage afin de restreindre l’accès aux seules personnes habilitées.

4. Techniques actuellement utilisées pour contourner les

problèmes

4.1. Stratégie de groupe

3.1.1. Présentation

Un ensemble de paramètres qui s’appliquent automatiquement à des utilisateurs ou des

groupes sur des postes clients ou des serveurs.

 Les paramètres concernent :

 L’interface utilisateur
Exemple : Rediriger le répertoire « Mes Documents » vers un partage réseau.
 Le paramétrage d’une application
Exemple : Ajouter des sites de confiance à Internet Explorer, configurer les paramètres de
proxy de Firefox.
 Le déploiement d’une application
Exemple : Installer automatiquement un logiciel sur tous les postes.

2
  Un élément de sécurité
Exemple : Sécuriser le poste client en désactivant l’utilisation de certains logiciels.
 Une GPO concerne :

 L’utilisateur sur lequel est appliquée la stratégie

Les paramètres qu’elle contient ne seront appliqués qu’à l’utilisateur concerné (Bureau,
Panneau de conf).

 L’ordinateur sur lequel est appliquée la stratégie

Les paramètres qu’elle contient seront appliqués à tous les utilisateurs

de la machine concernée (Services, Applications, Ouverture de session).

3.1.2. Avantages

 Installation rapide et simple

 Déploiement en masse
 Facilité de prise en main
 Personnalisation des images déployées
 Une sensibilisation des employés quant aux activités qu'ils doivent accomplir ;
 Une meilleure compréhension des objectifs et orientations de l'organisation ;
 Une participation du personnel dans l'élaboration des objectifs ceci amène à une
 Responsabilisation du personnel à tous les niveaux de la hiérarchie ;
 Une amélioration dans la communication à tous les niveaux organisationnels ;
 Elles facilitent la gestion d’un domaine contenant de multiples ressources. Elle rend
possible un paramétrage automatique des postes clients en évitant un travail répétitif.
 Elle permet de centraliser le contrôle et la gestion de la sécurité des ressources
informatiques.
 Elles facilitent la gestion d’un domaine contenant de multiples ressources

Un administrateur réseau peut déployer automatiquement des logiciels aux utilisateurs d’un
domaine, à l’aide d’une Group Policy Object. Le déploiement de logiciels est simplifié, car il
ne nécessite plus de passer sur les postes un à un pour installer les mêmes logiciels.
L’administrateur pourra créer une liste d’utilisateurs ou d’ordinateurs qui recevront le ou les

2
logiciels en question, qui s’installeront au démarrage de la session. Elle permet de centraliser
le contrôle et la gestion de la sécurité des ressources informatiques.

3.1.3. Inconvénients

 Le trafic réseau est ralenti le temps de transfert de l’image ;

 L’intégration de drivers nécessite des connaissances plus spécifiques.

4.2. Application mobile

3.2.1. Présentation

Une application mobile est un programme téléchargeable de façon gratuite ou payante et

exécutable à partir du système d’exploitation d’un dispositif mobile (smartphone, tablette…).
Elles sont pour la plupart distribuées depuis des plateformes de téléchargement (parfois elles-
mêmes contrôlées par les fabricants de smartphones) telles que l'App Store (plateforme
d'Apple), le Google Play (plateforme de Google / Android), ou encore le Windows Phone
Store (plateforme de Microsoft).

Une application smartphone peut être efficace pour utiliser un service déjà existant, pour
communiquer, trouver des informations, échanger... Il existe aujourd’hui une très large
diversité d’applications mobiles : jeux, réseaux sociaux, agenda, opérations bancaires, GPS,
boîte mail, visualisation de chaînes de télévision, écoute de la radio ou musique, météo, faire
du shopping ... Vous pouvez accéder à tous vos liens utiles au quotidien avec une facilité
exemplaire.

3.2.2. Avantages

Une parfaite ergonomie est assurée pour les applications mobiles en comparaison aux sites
mobiles cela encourage les utilisateurs à demeurer fidèles aux applis. En effet, le
développement d’application mobile tient compte la taille du smartphone, le temps de
chargement et autres paramètres.

Les applications mobiles favorisent l’intégration des options de téléphone et ainsi,

l’expérience utilisateur devient plus développée.

Pas besoin d’avoir accès à l’internet pour que l’application fonctionne.

Facile à trouver sur les stores par rapport aux sites mobiles, les applications mobiles ont
connu ainsi un usage plus répandu auprès des jeunes surtout qu’elles notifient sur les
événements en cours. 

2
 3.2.3. Inconvénients

La soumission aux normes et règles éditées par les sociétés des plateformes mobiles à savoir
Apple, Google, Windows et autres.

Un investissement lourd pour le développement d’une application mobile adaptée à chaque

système d’exploitation mobile contrairement au cout qu’exige le développement d’un site
mobile.

Lors de toute mise à jour d’application mobile, le mobinaute se trouve dans l’obligation de la
faire à travers le store alors que le site mobile se met à jour d’une manière automatique.

5. Explication du thème

5.1. Objectif

5.1.1. Contexte de la mission

Au fur et à mesure, on a constaté des faiblesses accrues du système de gestion des

activités de Delta Audit.

Pour faire appel à ces faiblesses, le cabinet Delta Audit envisage de se doter d’un système
Informatique permettant l’appropriation des nouvelles technologies de l’information pour plus
d’efficacité. Essentiellement, le nouveau Système Informatique tel qu’envisagé devrait
permettre :

• La planification des activités ;

• L’optimisation des ressources et moyens pour ces activités ;

• Le suivi opérationnel de ces activités ;

• La disponibilité en temps réel et permanente des données des activités au niveau national,
entre autres, les données relatives à la réception des déclarations de patrimoine ;

• La production des informations relatives à la gestion technique des activités et les

indicateurs de performance, nécessaire pour le suivi-évaluation des activités ;

• La production automatique des rapports synthétiques et du tableau de bord de gestion.

2
L’objectif général de la mission est d’acquérir, développer et de mettre en œuvre les
matériels et applications/logiciels nécessaires pour la gestion intégrée des activités de Delta
Audit, et d’assurer la pérennité de son fonctionnement, en tenant compte des applications et
données déjà existantes.

Pour mieux comprendre, nous allons détailler les points suivants :

• Les masques de saisie et les données à manipuler ;

• Les fonctionnalités ;

• Les règles de gestion ;

• Les reporting (états de sortie) à produire.

5.1.2. Résultats attendus

Au terme du présent projet :

▪ L’application et la base des données est disponible au niveau national incluant les données
antérieures déjà existantes, l’accès étant régularisé par des privilèges prédéfinis ;
▪ Le nouveau système permet de gérer les données de gestion des activités opérationnelles
et des activités de soutien, en toute sécurité : la planification, optimisation des ressources
et le suivi opérationnel ;

▪ Entre autres, le nouveau système permet la gestion des activités de Delta Audit ;

▪ Le nouveau système permet de produire automatiquement le rapport financier, le tableau

de suivi-évaluation et les données statistiques ;

▪ Le personnel impliqué est apte à l’utilisation au quotidien du nouveau système ;

▪ Tous les droits de propriété sur les codes sources et les autres paramètres (éventuel nom
de domaine) sont cédés au Delta Audit.

5.2. Paramètres à tenir compte pour la réalisation de l’application

5.2.1. La dématérialisation

D’un point de vue financier, la dématérialisation a l’avantage de diminuer les coûts de façon
très intéressante en supprimant les frais liés au papier et à l’affranchissement.

2
 5.2.2. Ajout des nouvelles fonctionnalités

L’application web doit gérer toutes les activités de Delta audit en ajoutant des nouveaux
modules comme la gestion des fichiers, en centralisant toutes les données dans un logiciel et
sur des serveurs communs. Il faut également mentionner que la recherche documentaire est
plus rapide et plus efficace sur un outil informatique. L’utilisation de mots-clés, d’une plage
de dates ou encore la sélection d’un type de fichier particulier permettra de présenter
uniquement les documents pertinents au demandeur, qui n’a plus qu’à cliquer sur son sésame
sans quitter son bureau.

5.2.3. Maintenance et accessibilité

Les mises à jour sont automatiques et que chaque fois que vous ouvrez l’application, il s'agit
toujours de la dernière version stable. Ils ne dépendent pas des spécifications matérielles et
système pour fonctionner et également s'exécuter sur des appareils mobiles.

Elle offre une grande mobilité et un accès facile à partir de n’importe quel système ou
plateforme via tout simplement une simple connexion Internet et un Navigateur Web. Elle est
conçue de façon s’adapter à l’écran et la « langage » de l’appareil. C’est précisément cette
qualité des applications Web qui fait qu’elles vont être exécutées à travers les navigateurs
eux-mêmes.

5.3. Solution suggérée

5.3.1. Solution

Afin de remédier aux problèmes, nous avons opté pour réaliser une application web apportant
des améliorations à celle existante afin d’aboutir à l’objectif visé, ainsi de rendre le service du
système plus efficace. L’intérêt pour le cabinet est de pouvoir permettre ses salariés de se
concentrer purement et simplement sur son activité et rien d’autre. Il est donc important
d’entourer d’applications web répondant avec le plus de pertinence possible à ses besoins et
sa contrainte de productivité et ainsi de profiter d’outils sur mesure ! Une application qui
communique constamment avec une base de données est meilleure si c’est une application
Web de plus celle-ci est facilement maintenable, les rapports de bugs et autres instantanés et
surtout très portable car accessible sur n’importe quel système ou plateforme via tout
simplement un Navigateur Web !

2
Néanmoins, vu les innovations technologiques et la digitalisation des entreprises, selon moi,
le meilleur choix est une application web.
En tenant compte des critiques et des besoins d'informatiser les services cités ci-dessus,
plusieurs solutions sont envisageables mais nous pensons pour notre part que la solution est
de concevoir et développer une application permettant de satisfaire au maximum possible le
cabinet Delta Audit en particulier.
Pour cela l'application doit répondre aux besoins suivants :
 Avoir un logiciel qui respecte les principes des Interfaces Homme/Machine (IHM) tels
que l'ergonomie et la fiabilité.
 Réduire les tâches manuelles qui nous permettraient de gagner en spatiotemporel
 Archiver les informations en toute confidentialité
 Restituer rapidement les données recherchées
 Partager simultanément les informations
 Avoir un logiciel évolutif.

5.3.2. Présentation générale de l’application

C’est une application web pour la gestion des activités de Delta Audit. La conception
et la réalisation d’un tel système font référence aux procédures déjà existantes, et d’autres
parts
aux besoins réels exprimés par les différents responsables afin que le système d’information
devienne un moyen efficace pour son pilotage.

Cette application se présente aux utilisateurs d’une manière souple et très flexible et cela
aussi bien au niveau utilisation qu’au niveau fonctionnalité. Ainsi, son utilisation permet aux
utilisateurs de manipuler des interfaces conviviales, simples et faciles à appréhender. Quant à
sa fonctionnalité, elle est concrétisée par une approche très ouverte justifiée par sa conception
basée sur des opérations paramétrables. Dans ce sens, différents systèmes de codification,
données de base, sont à la disposition des utilisateurs pour l’alimentation et le traitement des
opérations à faire et qui aboutissent, par la suite, à des états entièrement paramétrables (filtres
dynamiques, tris, exportation et importation, etc.). De plus, ces données peuvent être à tout
moment mises à jour suivant le contexte et les objectifs de ce cabinet. Pour que les
responsables de Delta Audit aient accès à toutes les données, le système sera présenté en tant
qu’application web accessible et manipulable par réseau Internet. Afin d'atteindre cet objectif,

2
nous avons choisi la technologie CodeIgniter du PHP pour le serveur de données et Angular
10 pour la présentation au niveau du poste client.

En tant que système intégré, plusieurs modules sont développés mais tournent toutefois
autour d’une base de données unique organisée de façon relationnelle et structurée.
L’application est ainsi constitué des modules suivants :

▪ Données de base,

▪ Planification et réalisation des activités,

▪ Importation des fichiers,

▪ Gestion de feuille de temps,

▪ Gestion de ressources humaines,

▪ Gestion et administration des utilisateurs.

L’application sera installée sur un serveur au niveau de Delta Audit et l’accès par les
utilisateurs se fera par connexion Internet.

L’application suit le responsive web design qui est une approche de conception Web qui vise
à
l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour
l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses,
moniteurs d'ordinateur de bureau).

D’une manière générale, les actions principales des utilisateurs sur l’application se
résume à :

- Ajouter des données ;

- Modifier des données ;

- Supprimer des données ;

- Consulter des états de sortie : tableau de listing de données, reporting ou statistique ;

- Envoyer des e-mails : lettre de mise en demeure, récépissé de déclaration de

patrimoines, confirmation d’activation de compte ;

- Téléchargement des fichiers.

2
 Afin d’accéder à l’application, chaque utilisateur doit entrer et valider son Email et son
mot de passe qu’il aura préalablement définis lors de sa création du compte.
Après s’être authentifié, il pourra accéder à la page d’Accueil avec des menus spécifiques
dont il aura accès selon les droits et privilèges qui lui sont accordés par l’Administrateur qui
aura activé son compte.

2
PARITIE II : ASPECTS THEORIQUES
 1. Présentation des connaissances nécessaires pour la
réalisation du travail

1.1. Type de développement

1.1.1. Frontend

Le terme « front end » désigne les éléments d’un site que l’on voit à l’écran et avec lesquels
on peut interagir depuis un navigateur. En effet, tout ce qu’on voit sur un site internet par
exemple. Le « front end » se compose généralement :

- D’un design crée par un Web designer qui réalise des maquettes graphiques via des outils
de création comme Photoshop, Fireworks ou Draw.io ;

- Du code HTML, CSS, jQuery mis en place par ce développeur front end.

Le développeur Front End se charge de l’apparence du site. En d’autres termes, il est

responsable du design de l’interface qui est directement mise en contact avec les utilisateurs.
Son travail se concentre sur le visuel : polices, menus déroulants, boutons, transitions,
curseurs, formulaires de contact, etc. Il maîtrise les langages de programmation pour le
développement de site web statique : HTML, CSS, JavaScript qui sont interprétés par le
navigateur de votre ordinateur pour afficher un résultat.[CITATION htt \l 1036 ]

1.1.2. Backend

Pour que le travail du développeur Front End prenne vie et que le site soit fonctionnel, il
manque encore quelques éléments. C’est là qu’entre en scène le développeur Back End.
Le « back end » est un peu comme la partie immergée d’un iceberg. On ne la voit pas en tant
que simple Internaute mais elle représente une très grande partie d’un projet web. Si le Back
End consiste à la partie interactive, le développeur Back End est responsable de la gestion de
la partie interne du site ou d’une application. Le fonctionnement harmonieux de ces derniers
dépend de son travail et il doit être très méticuleux ; une seule erreur risque de faire chuter le
système. Il doit à des compétences en différents langages de programmation, notamment en
PHP, Java, Python, Ruby, C, C#, C++, Rust, Go, etc.[CITATION htt \l 1036 ].

2
 1.1.3. Fullstack

Le développement « Full Stack » rassemble à la fois le traitement du « Front end » et du «

Back end ». Un développeur web Full Stack peut tout faire ; il maîtrise à la fois le Back End
et le Front End. « Stack » est un terme désignant les différents langages. Il représente tout le
métier du développement web et a un domaine de compétence large.

Ainsi, pour le cas de notre projet de développement d’application web nous avons eu recours
à ce dernier type de développement, qui est le développement Full Stack. Nous avons travaillé
à la fois sur l’interface, le traitement des fonctionnalités et le traitement des données.
[CITATION htt \l 1036 ]

1.2. Les architectures utilisées

1.2.1. MVC

L’architecture MVC (modèle-vue-contrôleur) est un concept très puissant qui intervient dans
la réalisation d’une application. Son principal intérêt est la séparation des données (modèle),
de l’affichage (vue) et des actions (contrôleur). De nombreux applications et sites web
disposent d’une plateforme d’administration pour modifier facilement les contenus. Il est bien
évident que le développeur qui va utiliser ce système pour créer des pages ne doit pas
modifier la structure complète du site ou de l’application web, ni les actions ni l’affichage.
Pour qu’il ne modifie que les données, celles-ci doivent alors être isolées. C’est sur ce constat
que se base le système MVC. Chaque partie est bien distincte. Les données peuvent provenir
d’une source quelconque et la vue peut être conçue par des webdesigners n’ayant pas de
connaissance en programmation.[ CITATION ope \l 1036 ]

L’architecture MVC est une solution très intéressante et très puissante, à mettre en œuvre dans
de grands projets pour garantir une bonne organisation de travail et une séparation des
différentes couches d’abstraction qui facilitera non seulement le développement du projet
mais également la maintenance et les améliorations ou corrections éventuelles. D’une manière
assez simple, lorsqu'un client envoie une requête à l'application :

• la requête envoyée depuis la vue est analysée par le contrôleur ;

• le contrôleur demande au modèle approprié d'effectuer les traitements et notifie à la vue que
la requête est traitée ;

• la vue notifiée fait une requête au modèle pour se mettre à jour.

2
Ce principe de base est valable pour n’importe quelle structure qui utilise cette architecture
mais certaines différences peuvent se présenter selon le fonctionnement de chacune d’elles.

Figure 1: : Fonctionnement MVC

Source : tutorialsteacher.com

1.2.2. APIREST

API (Application Programming Interface) est une application où l’on peut effectuer
des actions via le protocole HTTP (protocole d’échange entre deux machines ou deux
applications plus précisément, protocole de communication client-serveur) c’est-à-dire, une
application capable de recevoir une requête HTTP et d’en rendre une réponse avec des
informations sous format brut (sans HTML). REST (Representational State Transfer) est une
architecture qui apporte des règles et des bonnes pratiques permettant de présenter et de
manipuler des ressources (éléments à manipuler avec un API selon le besoin) se basant sur le
fonctionnement et les spécificités du protocole HTTP.[ CITATION red \l 1036 ]

Ainsi, un API REST consiste à créer une liste d’actions possibles avec l’application et
de définir une manière d’effectuer ces actions avec le protocole HTTP tout en respectant
certaines règles et contraintes.

D’une manière plus concrète, l’API REST est un moyen d’établir la communication et
l’échange de données entre client (navigateur ou application front end) et serveur (API) avec
spécification des états des actions effectuées (basée sur le protocole HTTP) et du format de la
réponse (en général, les API REST rendent un contenu en JSON ou en XML).

2
 Une requête HTTP émane d’un client (tout logiciel ou application capable d’émettre
une requête HTTP), c’est une ligne de commande contenant une méthode HTTP permettant
de demander à l’API d’effectuer une action concernant une ressource spécifique qui est
identifiée dans l’URL. Pour un API RESTful c’est-à-dire qui respecte toutes les règles et
contraintes du REST, les méthodes HTTP suivantes sont le plus souvent utilisées :

✓ GET : pour récupérer les informations en rapport avec la ressource identifiée dans l’URL ;

✓ POST : pour créer une ressource (les informations pour créer la ressource sont
envoyées dans le contenu de la requête) ;

✓ PUT : pour information sur une ressource avec ce qui a été envoyé dans le contenu de la
requête ;

✓ DELETE : pour supprimer une ressource.

Une réponse HTTP émane d’un serveur (tout logiciel ou application capable de renvoyer une
réponse HTTP), c’est une ligne de commande précisant l‘état de la requête.

1.2.3. Design pattern

Les designs patterns sont des architectures réutilisables mis en place en réponse à un
problème de conception donné. Ils aident dans l’amélioration de la qualité de développement
et dans le raccourcissement de la durée de celui-ci. [ CITATION des \l 1036 ]

On distingue trois grandes catégories de design patterns :

• Les design patterns de création : qui définissent les mécanismes pour l’instanciation

2
et/ou l’initialisation des objets ;

• Les design patterns structuraux : qui organisent les interfaces/classes entre elles ;

• Les design patterns comportementaux : qui définissent la communication entre les

classes et leur responsabilité.

Les designs patterns ont pour principal objectif de :

▪ Réduire le couplage entre les différentes classes d’une application ;

▪ Réduire le temps de développement d’une application ;

▪ Faciliter la maintenance d’une application ;

▪ Faciliter la communication entre les différents développeurs.

Cependant, l’utilisation des designs patterns présente quelques inconvénients :

- Difficulté à identifier quand un pattern s’applique nécessite un apprentissage et de

l’expérience ;

- Les patterns peuvent dépendre d’autres patterns ;

- Les patterns sont nombreux (23 patterns répertoriés).

Selon leur rôle, les patterns sont répartis en trois groupes :

❖ Creation: Abstract Factory, Factory, Builder, Prototype, Singleton;

❖ Structuration: Adapter, Bridge, Composite, Facade, Proxy, Flyweight, Decorator;

❖ Comportement: Interpreter, Command, Chain of Responsability, Iterator, Mediator,

Template, Memento, Observer, State, Strategy, Visitor. Pour les besoins du projet, les
principaux designs patterns utilisés seront le pattern Singleton et le Pattern Factory lors de la
création des objets pour réduire le couplage entre les classes et pour un souci d’économie des
espaces alloués en mémoire étant donné que nous travaillerons sur des appareils avec des
capacités limitées

Description d’un pattern

Les Design Patterns sont représentés par :

Nom : qui permet de l’identifier clairement ;

2
Problématique : description du problème auquel il répond ;

Solution : description de la solution souvent accompagnée d’un schéma UML.

Nom : Singleton

Problématique : La classe ne doit avoir qu'une seule instance.

OBJECTIFS :

- Restreindre le nombre d'instance d'une classe à une et une seule ;

- Fournir une méthode pour accéder à cette instance unique.

RESULTAT : Le Design Pattern permet d'isoler l'unicité d'une instance.

EXEMPLE :

- Connexion à une base de données.

- Gestion de la mémoire.

1.2.4. Json

JSON ou JavaScript Object Notation, est un format de données textuelles dérivé de la notation
des objets du langage JavaScript qui permet de représenter de l’information structurée et
d’échanger des données.[ CITATION jso \l 1036 ]

Tableau 1: Signification du code json

Catégorie Description
Les Une réponse doit contenir ce type de code statu lorsqu'il s'agit d'informer le
informations client de l'état de la demande. C'est utile pour indiquer que, par exemple, la
requête a bien été reçue et que le traitement vient de commencer, dans le
cas de traitements asynchrones par exemple.

Les succès Tout s'est bien passé sur le serveur.

Les Une redirection est sur le point d'être effectuée.

redirections Petite exception avec le code 304 qui signifie que le contenu n'a pas
changé, dans un contexte de cache.

Les erreurs La requête contient une erreur et ne peut pas être traitée.
client

2
 Les erreurs Le serveur vient de rencontrer un problème empêchant le traitement de la
serveur requête.

Source : json.com

JSON comprend deux éléments structurels :

• Une collection de couple nom/valeur ;

• Une liste de valeurs ordonnées.

Ces éléments représentent généralement trois types de données :

▪ Un objet ;

▪ Un tableau ;

▪ Une valeur générique de type tableau, objet, booléen, nombre, chaîne ou nul.

Figure 2: code json

Source : Auteur

2
Le principal avantage de JSON est qu’il est simple à mettre en œuvre par un développeur tout
en étant complet. D’autant plus qu’il est lisible aussi bien par un humain que par une machine
et ses types de données sont simples à décrire. JSON est indépendant du langage de
programmation et des bibliothèques pour JSON existent dans la plupart des langages de
programmation afin de pouvoir l’utiliser. Cependant, JSON rencontre certains inconvénients
tels que : il ne peut représenter que quelques types généraux, et il n'est pas possible d'en
ajouter d'autres, c’est-à-dire que les données ne sont pas typées et non extensibles ce qui
affaiblit la sécurité et la fiabilité de ce format. D'un point de vue pratique, le fait de ne pas
admettre de commentaires constituerait un certain handicap.

2. Les grandeurs utilisées

2.1. La dématérialisation

D’un point de vue financier, la dématérialisation a l’avantage de diminuer les coûts de façon
très intéressante en supprimant les frais liés au papier et à l’affranchissement.

2.2. Ajout des nouvelles fonctionnalités

L’application web doit gérer toutes les activités dans Delta audit en ajoutant des nouveaux
modules comme la gestion des fichiers, en centralisant toutes les données dans un logiciel et
sur des serveurs communs. Il faut également mentionner que la recherche documentaire est
plus rapide et plus efficace sur un outil informatique. L’utilisation de mots-clés, d’une plage
de dates ou encore la sélection d’un type de fichier particulier permettra de présenter
uniquement les documents pertinents au demandeur, qui n’a plus qu’à cliquer sur son sésame
sans quitter son bureau.

2.3. Maintenance et accessibilité

Les mises à jour sont automatiques et que chaque fois que vous ouvrez l’application, il s'agit
toujours de la dernière version stable. Ils ne dépendent pas des spécifications matérielles et
système pour fonctionner et également s'exécuter sur des appareils mobiles.

Elle offre une grande mobilité et un accès facile à partir de n’importe quel système ou
plateforme via tout simplement une simple connexion Internet et un Navigateur Web.

2
Elle est conçue de façon s’adapter à l’écran et la « langage » de l’appareil. C’est précisément
cette qualité des applications Web qui fait qu’elles vont être exécutées à travers les
navigateurs eux-mêmes.

3. Présentation des scripts et langage de programmation

3.1. Langage de programmation

3.1.1. PHP

PHP (officiellement, ce sigle est un acronyme récursif pour PHP HyperText Preprocessor) est
un langage de scripts généraliste et Open Source, spécialement conçu pour le développement
d'applications web. Il peut être intégré facilement au HTML. [ CITATION php \l 1036 ]

PHP a une définition récursive : PHP : HyperText Processor. Mais, en réalité, son premier
nom est : Personal Home Page Tools. PHP est un langage de script côté serveur inclus dans
HTML.

Les raisons qui font que PHP soit plus utilisé sont que PHP ne coûte rien pendant la durée de
la vie de l'application. Le développement, le serveur, la gestion de la base de données, le
support, tous sont gratuits. La syntaxe de PHP est simple, PHP est donc facile à apprendre.
Pourtant, on ne peut pas utiliser les outils pour générer le code source de PHP, ils sont écrits à
la main.

Il vient s'incorporer dans HTML et son incorporation dans HTML a plusieurs conséquences
utiles comme : PHP peut être rapidement ajouté à du code produit par un éditeur HTML
graphique ; PHP se prête de lui-même a une division du travail entre concepteurs graphiques
et développeur de scripts ; PHP peut réduire les coûts de développement et améliorer son
efficacité.

PHP n'a pas besoin de compilation : C'est un point fort du type de langage de script, il n'est
pas nécessaire d'une compilation en code binaire avant de tester ou de déployer une
application. Il suffit de l'écrire et de la lancer. PHP est disponible sur plusieurs plates-formes :
PHP est disponible en natif pour Unix et pour Windows. PHP est aussi compatible avec les
serveurs Web populaires : Apache HTTP Server, Microsoft Internet Information Server et
Netscape Enterprise Server. PHP de plus en plus populaire.

2
En résumé, PHP n'est pas la panacée à tous les problèmes de développement Web, mais il a
de nombreux avantages. Il est fait par des développeurs Web et pour des développeurs Web.

3.1.2. TypeScript

TypeScript est un langage open source qui s'appuie sur JavaScript, l'un des outils les plus
utilisés au monde, en ajoutant des définitions de types statiques. Les types fournissent un
moyen de décrire la forme d'un objet, fournissant une meilleure documentation et permettant à
TypeScript de valider que votre code fonctionne correctement.[ CITATION typ \l 1036 ]

L'écriture de types peut être facultative dans TypeScript, car l'inférence de type vous permet
d'obtenir beaucoup de puissance sans écrire de code supplémentaire.

Certains langages ne permettraient pas du tout à ces programmes bogués de s'exécuter. La

détection d'erreurs dans le code sans l'exécuter est appelée vérification statique. Déterminer ce
qui est une erreur et ce qui n'est pas basé sur les types de valeurs sur lesquelles on opère est
connu sous le nom de vérification de type statique. TypeScript vérifie les erreurs d'un
programme avant son exécution, et le fait en fonction des types de valeurs, c'est
un vérificateur de type statique.

TypeScript est un langage qui est un sur - ensemble de JavaScript : la syntaxe JS est donc
légale TS. La syntaxe fait référence à la façon dont nous écrivons du texte pour former un
programme. TypeScript ne considère aucun code JavaScript comme une erreur en raison de sa
syntaxe. Cela signifie que vous pouvez prendre n'importe quel code JavaScript fonctionnel et
le mettre dans un fichier TypeScript sans vous soucier exactement de la façon dont il est écrit.

Cependant, TypeScript est un sur-ensemble typé, ce qui signifie qu'il ajoute des règles sur la
façon dont différents types de valeurs peuvent être utilisés. 

3.2. Framework

Un Framework ou structure logicielle est un ensemble cohérent d’outils et de composants

logiciels structurels organisés afin de modeler l’architecture (fondations et grandes lignes) de
tout ou une partie de logiciel en suivant des patterns (patrons) spécifiques.[ CITATION fra \l
1036 ] Il se distingue des bibliothèques logicielles ou librairies du fait que :

2
- un Framework est générique voire faiblement spécialisé et de ce fait peut être constitué de
plusieurs librairies spécialisées. Mais un Framework peut se spécialiser sur un langage de
programmation ou une plateforme ou un domaine spécifique.

- un Framework impose un cadre de travail qui guide l’architecture logicielle en conduisant le

développeur à respecter certains patterns (patrons). Il est à noter qu’orientée objet, le
Framework est composé de classes mères qui seront dérivées et étendues par héritage en
fonctions des besoins spécifiques de chaque logiciel à modeler.

Les Framework offrent de nombreux avantages tels que :

- une organisation de travail et de codes en utilisant un modèle d’architecture commun

aidant au développement ;

- une réutilisation des codes grâce aux bibliothèques incluses et à la technique orientée
objet.
- une facilité et rapidité de développement avec les nombreuses bibliothèques et helpers
intégrés garantissant une évolution dans la vitesse de développement et la qualité du rendu.
- une communauté assez vaste qui peut fournir de l’aide.[ CITATION fra \l 1036 ]

3.2.1 CodeIgniter

3.2.1.1. Présentation générale

CodeIgniter est un Framework PHP qui s'exécute côté serveur. C'est un ensemble de
ressources qui va permettre de développer plus rapidement en PHP.[ CITATION CI \l 1036 ]
L'architecture MVC adopté dans CodeIgniter permet de faciliter le développement et la
maintenance des applications web et sites Internet.

En effet, il existe de nombreux Framework PHP qui sont tout aussi performants mais
le choix dépendra du besoin spécifique par rapport à l’application à développer. Néanmoins,
certains critères de CodeIgniter nous ont conduits à privilégier ce Framework par rapport à
d’autres :

- Avant tout, CodeIgniter est un Framework PHP puissant avec une vaste liste des
bibliothèques ;

2
- Pas besoin de définir soi-même les fichiers de configurations préalables puisque ces fichiers
sont déjà inclus dans le dossier racine de la version de CodeIgniter utilisé et il ne suffira que
de modifier certaines lignes en fonction du besoin et tout sera prêt à l’emploi ;

- CodeIgniter est un Framework basé sur le type Modèle – Vue – Contrôleur (MVC), ce qui
est sans doute la meilleure structure pour construire n’importe quelle application garantissant
une organisation des fichiers et du travail ;

- Pas de conflits de version PHP ;

- Moins de risque de désordre dans le code puisque la séparation du code, sa décomposition

en modules dans un certain nombre de contrôleurs, modèles et vues, permettra facilement de
travailler simultanément sur un même projet par une équipe ;

- Moins de dédoublement de code vu que CodeIgniter vous force à prendre de nouvelles

habitudes de développement et réduit les chances de duplication ;
- CodeIgniter offre l’avantage de disposer d’une documentation très claire et détaillée qui aide
les utilisateurs à penser de manière plus ouverte ;

-CodeIgniter profite d’une communauté en ligne très efficace et active où vos questions
trouvent une réponse en quelques minutes. Avec son forum actif,

-CodeIgniter dispose également d’un Wiki où vous pouvez télécharger de nombreuses

bibliothèques et un ensemble de plugins développés par la communauté de CI. Ces plugins
sont à télécharger et à utiliser gratuitement.

Nous pouvons également trouver de nombreux scripts premium pour CodeIgniter qui vont
sûrement vous faire économiser du temps et vous fournir les meilleures solutions intégrées ;

- L’un des grands avantages de l’utilisation de CodeIgniter est son ensemble de

bibliothèques et aides qui sont incluent dans son téléchargement. La seule chose dont vous
ayez besoin : c’est de les ajouter à vos contrôleurs et modèles pour les initialiser. La majorité
des applications ont essentiellement besoin d’un ensemble commun de fonctions ou des
classes telles que la date, la pagination, la sécurité, la session, le panier, le cache…

-CodeIgniter dispose de tout cet ensemble de classes couramment utilisées et nous font
économiser beaucoup de temps ;

- Gestion des erreurs simple et transparente ;

2
- CodeIgniter dispose d’un ensemble de bibliothèques pour gérer les problématiques de
sécurité en quelques étapes.

- Gestion du système de cache avec une bibliothèque spécifique ;

- Dans CodeIgniter, le système de template (séparation du PHP et de l’HTML par système
contrôleur et vue) est très puissant et très simple pour effectuer n’importe quelle action.

Figure 3: Logo CodeIgniter

Source : codeigniter.com

3.2.1.2. Installation et configuration de base

 Installation

Nous devrons télécharger le fichier zip de la dernière distribution de CodeIgniter sur sa page
de téléchargement officielle. Au moment de la rédaction, la dernière version stable de
CodeIgniter est la version 4.1.3. Une fois qu'elle sera téléchargée, il faudra décompresser
l'archive. Une fois décompressé, nous pouvons voir un répertoire nommé CodeIgniter-4.1.3.
Nous pouvons renommer celui-ci pour plus de confort si nous le souhaitons et placer le
dossier dans notre répertoire web. Maintenant, ouvrons notre navigateur et entrez le chemin
vers ce dossier : http://votredomaine.com/codeigniter. Nous devrions pouvoir voir l’écran
d’accueil par défaut de CodeIgniter. C’est la confirmation que CodeIgniter a été installé avec
succès sur notre système. [ CITATION CI \l 1036 ]

2
 Figure 4: Page d’accueil CodeIgniter

Source : codeigniter.com
 Configuration

Comme nous avons une nouvelle installation de CodeIgniter, nous devons la configurer avant
toute autre chose.
 Index.php

Maintenant, vous allez ouvrir le fichier index.php. La première chose à configurer est de
définir si le Framework est actuellement en période de développement, de test ou de
production. 

Une fois cela fait, nous pouvons modifier les deux variables suivantes : system_path et
application_folder. Le premier est le chemin vers le dossier system et le second est celui vers
le dossier application.

2
  Config.php

Ce fichier de configuration est le cœur de la configuration du Framework. Il se trouve dans le

dossier ./application/config/.
La base URL c'est l'URL que nous devons taper pour accéder au fichier index.php

 Database.php

Nous allons configurer notre base de données, dans ce fichier, nous noterons nos identifiants
et le mot de passe de connexion à notre base de données.

 Autoload.php

Ce fichier nous permet d'inclure dès le lancement de CodeIgniter des bibliothèques,

des helpers, ainsi que des modèles et fichiers de langue. Pour faire cela, nous devons ajouter
dans le tableau les bibliothèques que nous voulons charger.

Nous allons aussi charger un helper : url. Il nous permettra d'écrire des URL en fonction des
paramètres que nous aurons définis dans le fichier ./application/config/config.php. En utilisant

2
ces fonctions, toutes nos URL seront instantanément modifiées si la valeur de $config
['base_url'].

3.2.1.3. Les éléments fondamentaux

 Les contrôleurs

Les contrôleurs représentent le cœur de notre application. Ils vont faire le lien entre les
données et l’affichage. On peut dire qu’ils seront la « logique » de notre application.
[ CITATION CI \l 1036 ]Dans le dossier Controller nous trouverons, par défaut, un fichier
welcome.php. Plusieurs choses nous intéressent :

La première ligne est un code de sécurité implémenté par CodeIgniter.

Nous voyons qu'il s'agit d'une classe ayant le nom Welcome. Elle hérite de CI_Controller qui
est une classe native de CodeIgniter permettant d'implémenter le fonctionnement global des
contrôleurs. Tous nos contrôleurs devront donc être obligatoirement être des enfants de cette
classe. Cette classe ne contient qu'une méthode index qui exécute une ligne bien étrange :

2
Nous voyons que cette ligne appelle la fonction view d'un objet load. Cet objet est déclaré
dans CI_Controller. En fait, cette ligne est juste l'équivalent d'un include de PHP. Disons que
c'est un include boosté. En clair, la fonction index charge simplement une vue nommée
welcome_message et l'affiche à l'écran. En résumé, un contrôleur est une classe qui hérite de
la classe native CI_Controller de CodeIgniter et qui contient les fonctions nécessaires pour
faire interagir les données et l’affichage.

 Les Urls avec CodeIgniter

Si nous avons bien suivi, nous nous demandons certainement comment ça se fait que lorsque
nous allons sur notre site c'est le contrôleur Welcome qui est chargé.
En fait, CodeIgniter utilise un système de routes très simple. Le contrôleur est directement
renseigné dans l'url.

Figure 5: URL avec CodeIgniter

Source : codeigniter.com

Le slash permet de séparer les urls en plusieurs segments. Les voici sous forme de liste :

▪ Le premier segment est l'url de base de notre site ou le domaine.

▪ Le deuxième est le nom de fichier index.php. Il est nécessaire pour le fonctionnement du
Framework, mais nous verrons une astuce pour le masquer juste après.

▪ Le troisième segment correspond au contrôleur que nous allons appeler. Ici, il s'agirait du
contrôleur Utilisateur.

▪ Le quatrième, quant à lui, correspond à la méthode que l'on souhaite appeler.

Elle doit bien entendu être présente dans le contrôleur précédent. A noter que les méthodes
doivent nécessairement être publiques pour être appelée.

2
▪ Le dernier segment est un paramètre que recevra la méthode.

 Les Modèles

Facultatifs, ils permettent d'envoyer des requêtes à la base de données et d’en retourner les
résultats sous une forme brute (sans HTML). En effet, si cette base de données a été bien
pensée, on aura logiquement un modèle par table.[ CITATION CI \l 1036 ]

 Les vues

Si nous nous rendons dans le dossier views dans application, nous verrons la vue par défaut
welcome_message. Nous trouvons une page HTML toute simple. C'est celle-ci qui est
affichée à l'écran lorsque nous affichons le site. Une vue est tout simplement un fichier. php
qui va contenir le html de notre page. L'idée est d'appeler la vue depuis le contrôleur afin de
lui envoyer des données préalablement récupérées. La vue se chargera d'intégrer ces données
dans le format HTML classique. Comme en PHP, il est possible d'imbriquer (include) les vues
entre elles. L'idée étant bien sûr d'éviter au maximum la redondance.

 Les helpers et les bibliothèques CodeIgniter

Un helper est un ensemble de fonctions pouvant être appelé depuis le contrôleur, la vue ou le
modèle. C'est simplement un fichier.php (sans classe) qui liste des fonctions regroupées par
un même thème. Si le principe n'est pas très "POO" mais il faut reconnaitre que c'est très utile.
Il est également possible de créer nos propres helpers et même de redéfinir les fonctions de
CodeIgniter. La plupart des bibliothèques sont facultatives. Ce sont des classes prédéfinies et
utilisables selon le besoin. Il est possible de créer ses propres classes et même de modifier le
comportement de celles fournies par CodeIgniter.

3.2.2 Angular

3.2.2.1 Présentation générale

Angular est le tout nouveau Framework de Google qui s'impose déjà comme étant la référence
des technologies Web modernes. Angular offre des performances accrues avec une
conception modulaire adaptée à la mobilité ainsi qu'une amélioration de la productivité des
équipes de développement.
Angular est un cadre de conception d'applications et une plate-forme de développement
permettant de créer des applications d'une seule page efficaces et sophistiquées.

2
Angular est une plateforme de développement, construite sur Manuscrit. En tant que plate-
forme, Angular comprend :
 Un Framework basé sur des composants pour la création d'applications Web
évolutives
 Une collection de bibliothèques bien intégrées qui couvrent une grande variété de
fonctionnalités, notamment le routage, la gestion des formulaires, la communication
client-serveur, etc.
 Une suite d'outils de développement pour vous aider à développer, créer, tester et
mettre à jour votre code
Angular nous aide à mieux organiser notre code Javascript pour créer des sites web
dynamiques et également des applications web. C’est un Framework Javascript pour créer de
l’HTML interactif. Parfait pour les SPAs (Single Page Applications), il est gratuit, open-
source, créé par Google depuis 2009 et profite d'une énorme communauté. Nous avons
privilégié ce Framework parmi tant d’autres puisque nous le jugeons très riche et très puissant
vu son utilisation des concepts et des bonnes pratiques incontournables dans le monde du
développement web actuel tels que :
- l’architecture MVC ;
- le Data Binding qui est un moyen de lier la partie vue à la partie logique. En d'autres termes,
les éléments de notre code HTML seront liés à notre contrôleur JavaScript ;
Angular est une plate-forme et un Framework permettant de créer des applications clientes
d'une seule page à l'aide de HTML et de TypeScript. Angular est écrit en TypeScript. Il
implémente les fonctionnalités principales et facultatives sous la forme d'un ensemble de
bibliothèques TypeScript que vous importez dans vos applications.
L'architecture d'une application Angular repose sur certains concepts fondamentaux. Les
blocs de construction de base du Framework Angular sont des composants Angular organisés
en NgModules. NgModules collecte le code associé dans des ensembles fonctionnels ; une
application Angular est définie par un ensemble de NgModules. Une application a toujours au
moins un module racine qui permet l'amorçage, et a généralement beaucoup plus de modules
de fonctionnalités.
 Les composants définissent des vues, qui sont des ensembles d'éléments d'écran parmi
lesquels Angular peut choisir et modifier en fonction de la logique et des données de
votre programme.
 Les composants utilisent des services, qui fournissent des fonctionnalités spécifiques
non directement liées aux vues. Les fournisseurs de services peuvent être injectés dans
les composants en tant que dépendances, ce qui rend votre code modulaire, réutilisable
et efficace.
Les modules, composants et services sont des classes qui utilisent des décorateurs. Ces
décorateurs marquent leur type et fournissent des métadonnées qui indiquent à Angular
comment les utiliser.

2
  Les métadonnées d'une classe de composant l'associent à un modèle qui définit une
vue. Un modèle combine du HTML ordinaire avec des directives Angular et
un balisage de liaison qui permettent à Angular de modifier le HTML avant de le
rendre pour affichage.
 Les métadonnées d'une classe de service fournissent les informations dont Angular a
besoin pour les rendre disponibles aux composants via l’injection de dépendances
(DI).
Les composants d'une application définissent généralement de nombreuses vues, organisées
hiérarchiquement. Angular fournit le Router service pour vous aider à définir des chemins de
navigation parmi les vues. Le routeur offre des capacités de navigation sophistiquées dans le
navigateur.

Figure 6: Logo Angular

3.2.2.2 Installation et configuration de base

Pour installer Angular sur votre système local, vous avez besoin des éléments suivants :

 Node.js

Angulaire nécessite un LTS actif ou LTS de maintenance version de Node.js.

 Gestionnaire de paquets npm

Les applications Angular, Angular CLI et Angular dépendent de paquets npm pour de
nombreuses fonctionnalités et fonctions. Pour télécharger et installer des packages npm, vous
avez besoin d'un gestionnaire de packages npm. Ce guide utilise les client npm interface de
ligne de commande, qui est installée avec Node.js par défaut. 

Vous utilisez ensuite Angular CLI pour créer des projets, générer du code d'application et de
bibliothèque et effectuer diverses tâches de développement en cours telles que les tests, le

2
regroupement et le déploiement. Pour installer Angular CLI, ouvrez une fenêtre de terminal et
exécutez la commande suivante :

npm install -g @angular/cli

Pour créer un nouvel espace de travail et une application de démarrage initiale :

Exécutez la commande CLI ng new et indiquez le nom my-app, comme indiqué ici :

ng new my-app

La ng new commande vous invite à fournir des informations sur les fonctionnalités à inclure
dans l'application initiale. Acceptez les valeurs par défaut en appuyant sur la touche Entrée ou
Retour.

L'Angular CLI installe les packages Angular npm nécessaires et d'autres dépendances. Cela
peut prendre quelques minutes. La CLI crée un nouvel espace de travail et une application de
bienvenue simple, prête à fonctionner.

L'Angular CLI comprend un serveur, afin que vous puissiez créer et servir votre application
localement.

1. Accédez au dossier de l'espace de travail, tel que my-app.

2. Exécutez la commande suivante :

cd my-app

ng serve --open

La ng serve commande lance le serveur, surveille vos fichiers et reconstruit l'application
lorsque vous apportez des modifications à ces fichiers.

3.2.2.3 Les éléments fondamentaux

 Le composant

Chaque application Angular a au moins un composant, le composant racine qui connecte une

hiérarchie de composants avec le modèle d'objet de document de page (DOM). Chaque
composant définit une classe qui contient des données d'application et une logique, et est
associé à un modèle HTML qui définit une vue à afficher dans un environnement cible.

Le décorateur identifie la classe immédiatement en dessous en tant que composant et fournit

le modèle et les métadonnées spécifiques au composant associées.@Component()

2
Les composants sont le bloc de construction principal pour les applications
angulaires. Chaque composant se compose de :

 Un modèle HTML qui déclare ce qui s'affiche sur la page

 Une classe TypeScript qui définit le comportement

 Un sélecteur CSS qui définit comment le composant est utilisé dans un modèle

 Facultativement, les styles CSS appliqués au modèle

Création d’un composant

Le moyen le plus simple de créer un composant est d'utiliser la CLI angulaire

Pour créer un composant à l'aide de la CLI angulaire :

Depuis une fenêtre de terminal, accédez au répertoire contenant votre application.

Exécutez-la 

ng generate component <component-name>

commande, où

 <component-name>

est le nom de votre nouveau composant.

Par défaut, cette commande crée les éléments suivants :

 Un dossier nommé d'après le composant

 Un fichier composant, <component-name>.component.ts

 Un fichier modèle, <component-name>.component.html

 Un fichier CSS, <component-name>.component.css

 Un dossier de spécification des tests, <component-name>.component.spec.ts

Où <component-name>est le nom de votre composant.

 Le Module

Angular NgModules diffère et complète les modules JavaScript (ES2015). Un NgModule

déclare un contexte de compilation pour un ensemble de composants dédié à un domaine

2
d'application, un flux de travail ou un ensemble de fonctionnalités étroitement lié. Un
NgModule peut associer ses composants à du code associé, tels que des services, pour former
des unités fonctionnelles. Chaque application Angular a un module racine, nommé par
convention AppModule, qui fournit le mécanisme d'amorçage qui lance l'application. Une
application contient généralement de nombreux modules fonctionnels.

Comme les modules JavaScript, NgModules peut importer des fonctionnalités d'autres
NgModules et permettre à leurs propres fonctionnalités d'être exportées et utilisées par
d'autres NgModules. Par exemple, pour utiliser le service de routeur dans votre application,
vous importez le Router NgModule.

L'organisation de votre code en modules fonctionnels distincts aide à gérer le développement

d'applications complexes et à concevoir pour la réutilisabilité. De plus, cette technique vous
permet de profiter du lazy-loading, c'est -à- dire du chargement de modules à la demande,
pour minimiser la quantité de code à charger au démarrage.

 Modèles, directives et liaison de données

Un modèle combine du HTML avec un balisage angulaire qui peut modifier les éléments
HTML avant qu'ils ne soient affichés. Les directives de modèle fournissent la logique du
programme et le balisage de liaison connecte vos données d'application et le DOM. Il existe
deux types de liaison de données :

 La liaison d'événement permet à votre application de répondre aux entrées de

l'utilisateur dans l'environnement cible en mettant à jour vos données d'application.

 La liaison de propriété vous permet d'interpoler les valeurs calculées à partir des

données de votre application dans le code HTML.

Avant qu'une vue ne soit affichée, Angular évalue les directives et résout la syntaxe de liaison
dans le modèle pour modifier les éléments HTML et le DOM, en fonction des données et de
la logique de votre programme. Angular prend en charge la liaison de données
bidirectionnelle, ce qui signifie que les modifications du DOM, telles que les choix de
l'utilisateur, sont également reflétées dans les données de votre programme.

Vos modèles peuvent utiliser des canaux pour améliorer l'expérience utilisateur en

transformant les valeurs pour l'affichage. Par exemple, utilisez des barres verticales pour

2
afficher les dates et les valeurs monétaires adaptées aux paramètres régionaux d'un
utilisateur. Angular fournit des tuyaux prédéfinis pour les transformations courantes, et vous
pouvez également définir vos propres tuyaux.

 Services et injection de dépendance

Pour les données ou la logique qui ne sont pas associées à une vue spécifique et que vous
souhaitez partager entre les composants, vous créez une classe de service. Une définition de
classe de service est immédiatement précédée du décorateur. Le décorateur fournit les
métadonnées qui permettent à d'autres fournisseurs d'être injectés en tant que dépendances
dans votre classe.@Injectable().

L'injection de dépendances (DI) vous permet de garder vos classes de composants simples et

efficaces. Ils ne récupèrent pas les données du serveur, ne valident pas les entrées de
l'utilisateur ou ne se connectent pas directement à la console ; ils délèguent ces tâches à des
services.

 Routage

Angular Router NgModule fournit un service qui vous permet de définir un chemin de

navigation entre les différents états de l'application et d'afficher les hiérarchies dans votre
application. Il est calqué sur les conventions de navigation familières du navigateur :

 Entrez une URL dans la barre d'adresse et le navigateur accède à une page
correspondante.

 Cliquez sur les liens sur la page et le navigateur accède à une nouvelle page.

 Cliquez sur les boutons Précédent et Suivant du navigateur et le navigateur navigue

dans l'historique des pages que vous avez consultées.

Le routeur mappe les chemins de type URL vers les vues plutôt que vers les pages. Lorsqu'un
utilisateur effectue une action, telle qu'un clic sur un lien, qui chargerait une nouvelle page
dans le navigateur, le routeur intercepte le comportement du navigateur et affiche ou masque
les hiérarchies de vues.

2
Si le routeur détermine que l'état actuel de l'application nécessite une fonctionnalité
particulière et que le module qui le définit n'a pas été chargé, le routeur peut charger
paresseux le module à la demande.

Le routeur interprète une URL de lien en fonction des règles de navigation dans la vue et de
l'état des données de votre application. Vous pouvez accéder à de nouvelles vues lorsque
l'utilisateur clique sur un bouton ou sélectionne dans une liste déroulante, ou en réponse à un
autre stimulus provenant de n'importe quelle source. Le routeur enregistre l'activité dans
l'historique du navigateur, de sorte que les boutons Précédent et Suivant fonctionnent
également.

Pour définir des règles de navigation, vous associez des chemins de navigation à vos
composants. Un chemin utilise une syntaxe de type URL qui intègre vos données de
programme, de la même manière que la syntaxe de modèle intègre vos vues avec vos données
de programme. Vous pouvez ensuite appliquer la logique du programme pour choisir les vues
à afficher ou à masquer, en réponse à la saisie de l'utilisateur et à vos propres règles d'accès.

 Les vues

Chaque vue fonctionne de pair avec un contrôleur. La vue consomme les données en
databinding et appelle les méthodes du contrôleur. Elle peut également inclure des directives
et faire appel aux filtres déclarés dans l’application. Au niveau de l’architecture MVC, la vue
sert à afficher les données à l’utilisateur. Elle dispose du modèle pour récupérer les données à
afficher et transmet les actions de l’utilisateur aux contrôleurs. Pour Angular, la vue est un
template de page HTML. Un template (HTML et CSS template) est un outil de design web
pré-utilisable et configurable selon le besoin intégrant la technologie HTML incluant du CSS
et du JavaScript. Cet outil contient des fonctionnalités utilisateurs stylés et dynamiques qui
sont déjà prêts à être utiliser selon le besoin. Il gère les composants utilisateurs de base
(formulaires, boutons, menus…) ainsi que d’autres fonctionnalités plus complexes comme les
graphes, les datatables, les maps, etc. Il prend en compte également la compatibilité avec le
support et le navigateur (résolution d’écran, responsivité, spécificité du navigateur). C’est un

2
outil complet qui permet de créer facilement et rapidement les vues de l’application par
réutilisation des codes sources et offre une large possibilité de compositions allant de pages
simples aux plus complexes. Son avantage est également de garantir une uniformité de toutes
les pages créées qui diffèrent juste au niveau de leur contenu.

Le binding permet d’afficher la donnée du modèle dans la vue. Son principe repose sur la
synchronisation de la donnée du modèle et son affichage à la vue.

 Les directives/Les filtres

Tableau 2 : Signification directive Angular

Directives Signification
ngIf Ajoute et supprime des éléments dans le DOM en fonction des résultats d’une
expression
ngFor C’est une directive de répétition qui génère une liste d’éléments en itérant sur
un tableau
ngClass Ajoute et supprime les classes CSS sur un élément
ngStyle Définit les styles CSS sur un élément HTML de manière conditionnelle

4. La gestion de projet

4.1. MS Project

4.1.1 Définition

Microsoft Project (MS Project ou MSP) est un logiciel de gestion de projets édité par
Microsoft. Il permet aux chefs de projets et aux planificateurs de planifier et piloter les
projets, de gérer les ressources et le budget, ainsi que d'analyser et communiquer les données
des projets. Actuellement, Microsoft Project est le logiciel de gestion de projet le plus utilisé
au monde.[ CITATION Mon21 \l 1036 ]

4.1.2 Planification et pilotage des projets

Microsoft Project permet la planification des projets, c’est-à-dire la création d’un plan. Il
permet la création de tâches et de jalons, leur hiérarchisation, et de définir des liens entre les
tâches. Une estimation de la durée et de la charge (ou travail) nécessaire à la réalisation de

2
chaque tâche peut ensuite être réalisée. Des modèles peuvent être créés afin de proposer des
plans types aux utilisateurs (par exemple, si les projets nécessitent de suivre une méthodologie
ou un processus précis. Microsoft Project propose différentes représentations graphiques du
projet : diagramme de Gantt, réseau des tâches...[ CITATION Mon21 \l 1036 ]

Les possibilités de pilotage des projets sont nombreuses : définition de la planification initiale
(c’est-à-dire l’enregistrement d’une photographie de référence du plan de projet), saisie de
l’avancement des tâches, replanification.

 Le chef de projet peut mettre à jour l’avancement du projet :

 Via la saisie d’un pourcentage d’avancement (délai ou charge) ;

 Via la mise à jour de la durée réelle et de la durée restante ;

 Via la mise à jour du travail réel (réalisé) et du travail restant (reste à faire).

4.1.3 La gestion dans le diagramme De Gantt

 Gestion des ressources

Microsoft Project permet la gestion des ressources de chaque projet, c’est-à-dire la création de
l’équipe projet puis l’affectation des ressources définies. Il est possible de créer différents
types de ressources :

 Ressources « travail », à qui l’on peut attribuer des charges de travail : individus,
mais aussi des machines-outils par exemple ;

 Ressources « matérielles », correspondant à des matériaux (ressources

consommables avec des unités) ;

 Ressources « coût » pour pouvoir associer aux tâches du projet des postes de dépense :
frais de déplacement, achat de prestation au forfait…

Les ressources, en particulier celles de type travail, peuvent être typées comme génériques :
elles correspondent alors à des profils de compétences. Chaque ressource peut être ensuite
affectée aux tâches du projet. Via le planificateur d’équipe, il est possible de gérer un plan de
capacité des ressources et d’allouer ainsi les tâches du projet aux ressources. Lorsque les
ressources ont été affectées, Microsoft Project rend possible l’analyse des plans de charge des
ressources affectées, via par exemple l’affichage d’un graphe des ressources. Une

2
fonctionnalité, l’audit des ressources, peut être utilisée pour résoudre les problèmes de sur
utilisation des ressources détectés, en réorganisation les tâches du projet.

 Gestion des coûts

Chaque ressource peut avoir un coût : taux journalier pour une ressource de type travail, coût
unitaire pour une ressource matérielle… Ainsi, en fonction des affectations des ressources
réalisées sur les tâches du projet et de coûts fixes pouvant être définis pour chaque tâche,
Microsoft Project calcule le coût du projet. Pour les individus, il est également possible de
gérer les heures supplémentaires. Depuis la version 2007, des ressources budgétaires
permettent par ailleurs de définir le budget initial du projet, qui peut être comparé au coût du
projet calculé.

4.2. Diagramme de Gantt

4.2.1 Définition

Un diagramme de Gantt est un diagramme à barres qui représente les activités (ou les tâches,
les événements) d’un calendrier de projet sur une période donnée.

Les diagrammes de Gantt modernes affichent souvent des dépendances (la façon dont chaque
tâche est liée aux autres) et peuvent inclure plusieurs membres d’équipe, des codes couleur,
des calendriers intégrés, etc.[ CITATION Mon21 \l 1036 ]

4.2.2 Avantages du diagramme de Gantt

 Représentation visuelle simple et directe des projets

 Montre clairement l’avancement d’un projet en temps réel
 Permet de coordonner toute l’équipe
 Permet d’anticiper facilement l’atteinte des objectifs tout en identifiant et en éliminant
les « points de friction » avant que les projets ne soient bloqués
 Permet de comprendre comment les tâches sont liées
 Limite l’utilisation de plusieurs plateformes pour communiquer sur les projets

2
 4.2.3 Inconvénients diagramme de Gantt

 Rend parfois difficile la compréhension de la complexité d’un projet

 Sans automatisation intégrée, la gestion peut s’avérer assez compliquée
 Les grands projets peuvent rapidement devenir ingérables, avec un défilement vertical
et horizontal à n’en plus finir
 Les dépendances entre les tâches. On vous a dit plus haut ce qu’on en pensait.

5. Le langage de modélisation (UML)

5.1. A propos de UML

5.1.1. Définition

UML, c’est l’acronyme anglais pour « Unified Modeling Language » traduit par « Langage de
modélisation unifié ». La notation UML est un langage visuel constitué d’un ensemble de
schémas, appelés des diagrammes, qui donnent chacun une vision différente du projet à
traiter. [ CITATION Mon20 \l 1036 ]UML nous fournit donc des diagrammes pour
représenter l’application à développer : son fonctionnement, sa mise en route, les actions
susceptibles d’être effectuées. UML est utilisé pour spécifier, visualiser, modifier et construire
les documents nécessaires au bon développement d'une application orienté objet. UML offre
un standard de modélisation, pour représenter l'architecture logicielle. Les différents éléments
représentables sont :
- Activité d'un objet/logiciel ;

- Acteurs ;

- Processus ;

- Schéma de base de données ;

- Composants logiciels ;

- Réutilisation de composants.

2
 5.1.2. Avantages

 UML permet d’économiser de l’argent

Lorsqu'une entreprise désire un logiciel ou une application, elle le réalise parfois en interne,
mais le fait plus généralement réaliser par une société de services. Dans un cas comme dans
l'autre il est nécessaire de définir l'ensemble des fonctionnalités que le logiciel doit posséder.

Le demandeur du logiciel n'a parfois pas de compétences particulières en informatique et

exprime donc ses souhaits sous forme d'un CdCF (Cahier des Charges Fonctionnelles), c'est-
à-dire un document décrivant sous forme textuelle l'ensemble des particularités que le logiciel
doit posséder, les conditions qu'il doit remplir (système(s) d'exploitation visé(s)), les écueils à
éviter, ainsi que les délais impartis, éventuellement des clauses sur le coût, les langages à
utiliser, etc.

Le CdCF est ainsi distribué à différentes sociétés de services (dans le cas d'une sous-
traitance) sous forme d'un appel d'offre, auquel les sociétés vont répondre par un coût, un
délai, etc. Lorsqu'une société obtient le marché et qu'elle décide (si elle a le choix) d'opter
pour un langage orienté objet, il lui faut dans un premier temps créer un modèle (c'est là
qu'intervient UML) afin :

- De présenter au client la façon suivant laquelle elle compte développer le logiciel

- D’accorder tous les acteurs du projet (une application de grande envergure est
généralement réalisée par modules développés par différentes équipes).
Ainsi, si le modèle ne convient pas au client, il sera "simple" à modifier, contrairement à une
application directement implémentée (qui aurait mobilisé beaucoup plus de personnel,
pendant une période plus longue), ce qui signifie une perte d'argent beaucoup moins
importante pour la société de services, ainsi qu'une meilleure probabilité de rendre dans les
temps (on parle généralement de Deadline) une application conforme aux exigences du client
(si l'application se conforme au modèle présenté au client, celui-ci peut difficilement contester
la validité du logiciel).

 Il permet le gain de précision

Encourage l'utilisation d'outils et constitue à cet effet un gage de stabilité.

2
  UML est un support de communication de performant
Il cadre l'analyse et facilite la compréhension de représentations abstraites complexes. Son
caractère polyvalent et sa souplesse en font un langage universel.

5.1.3. Inconvénients

La mise en pratique d'UML nécessite un apprentissage et passe par une période d'adaptation.
Même si l'Espéranto est une utopie, la nécessité de s'accorder sur des modes d'expression
communs est vitale en informatique. UML n'est pas à l'origine des concepts objets, mais en
constitue une étape majeure, car il unifie les différentes approches et en donne une définition
plus formelle.

5.2. Les diagrammes

Le méta modèle UML fournit une panoplie d'outils permettant de représenter l'ensemble des
éléments du monde objet (classes, objets, ...) ainsi que les liens qui les relie.[ CITATION
Mon20 \l 1036 ] Toutefois, étant donné qu'une seule représentation est trop subjective, UML
fournit un moyen astucieux permettant de représenter diverses projections d'une même
représentation grâce aux vues. Une vue est constituée d'un ou plusieurs diagrammes. On
distingue deux types de vues :

Les vues statiques, c'est-à-dire représentant le système physiquement

▪ Diagrammes d'objets ;

▪ Diagrammes de classes ;

▪ Diagrammes de cas d'utilisation ;

▪ Diagrammes de composants ;

▪ Diagrammes de déploiement.

Les vues dynamiques, montrant le fonctionnement du système

▪ Diagrammes de séquence ;

2
▪ Diagrammes de collaboration ;

▪ Diagrammes d'états-transitions ;

▪ Diagrammes d'activités.

Tableau 3: Liste des diagrammes UML

Diagramme utilisé pour étape analyse Diagramme utilisé pour étape conception
• Le diagramme de classes ;

• Le diagramme d’objets ;

• Le diagramme d’états-transitions ;
• Le diagramme de composant ;
• Le diagramme d’activités ;
• Le diagramme de déploiement.
• Le diagramme de collaboration ;

• Le diagramme de séquence ;

• Le diagramme de cas d’utilisation.

5.2.1. Diagramme de cas d’utilisation

Il s’agit de la solution UML pour représenter le modèle conceptuel. Les cas d’utilisation
permettent de structurer les besoins des utilisateurs et les objectifs correspondant du système.
Il se limite aux préoccupations réelles des utilisateurs, il ne présente pas de solution
d’implémentation. Ils identifient les utilisateurs du système (acteurs) et leur interaction avec le
système. Il comprend : les acteurs, le système et les cas d’utilisation.[ CITATION Mon20 \l
1036 ]

▪ Acteur : c’est une entité qui agit sur le système. Il est représenté par des petits personnages
▪ Cas d’utilisation : c’est un ensemble d’action réalisé par le système en réponse à une action
d’un acteur. Il est représenté par des ellipses.

2
 5.2.2. Diagramme de séquence

Le diagramme de séquence sert à illustrer un cas d’utilisation. Il permet de représenter les

collaborations entre les objets selon un point de vue temporel. On y met l’accent sur la
chronologie des envois de messages. Tel que l’ordre d’envoi d’un message est déterminé par
sa position sur l’axe vertical du diagramme, représentés par des flèches horizontales orientées
de l’émetteur du message vers le destinataire du message. Le temps s’écoule « de haut en bas
» de cet axe. La disposition des objets sur l’axe horizontal n’a pas de conséquence pour la
sémantique du diagramme.[ CITATION Mon20 \l 1036 ]

5.2.3. Diagramme de classe

Le diagramme de classe constitue un élément très important de la modélisation : il permet

de définir quelles seront les composantes du système final. Il permet, dans les cas de travaux
réalisés en groupe, de séparer les composantes de manière à pouvoir répartir le travail de
développement. Enfin, il permet de construire le système de manière correcte. [ CITATION
Mon20 \l 1036 ]

5.2.4. Diagramme d’activité

Le diagramme d’activité est un diagramme comportemental d’UML permettant de

représenter le déclenchement des évènements en fonction de l’état du système. Il est aussi un
diagramme état-transitions simplifié pour lequel les états se réduisent à de simples actions ou
activités et dont les transitions se déclenchent automatiquement avec éventuellement des
gardes.
Le diagramme d’activité simplifie l’écriture des diagrammes états-transitions.

C’est un Diagramme associé à un objet particulier ou à un ensemble d'objets, qui

illustre les flux entre les activités et les actions. Il permet de représenter graphiquement
le déroulement d'un cas d'utilisation.

Le diagramme d’activité se compose des éléments suivants :

2
 - Une activité représente une exécution d'un mécanisme, autrement dit, un
déroulement d'étapes séquentielles ;
- Une transition qui représente Le passage d'une activité vers une autre ;
- Les gardes qui représentent la condition de passage d’une activité à une autre dans
les transitions conditionnelles ils sont symbolisés par des losanges ;
- Les barres de synchronisation sont des barres représentées par une ligne
épaisse, le rôle cette barre est de synchroniser le départ de plusieurs transitions qui
arrivent de déférentes activités, aboutissant toutes à une activité commune.

5.2.5. Diagramme d’états de transitions

Le diagramme d’état de transition sert à représenter des automates finis, sous forme de
graphes d’états reliés par des arcs orientés qui décrivent les transitions. Ce dernier permet de
décrire les changements d’état d’un objet ou d’un composant en réponse des interactions avec
d’autres objets ou composants ou avec des acteurs. Un état se caractérise par sa durée et sa
stabilité. Il représente une conjonction instantanée des valeurs des attributs d’un objet. Une
transition, quant à lui, représente le passage instantané d’un état vers un autre, elle est
déclenchée par un évènement. En d’autres termes : c’est l’arrivée d’un évènement qui la
déclenche.

5.2.6. Diagramme de déploiement

Le diagramme de déploiement correspond à la fois à la structure du réseau informatique qui

prend en charge le système logiciel, et la façon dont les composants d’exploitation y sont
installés.

La méthode standard pour faire l’inventaire des objets-métiers est de lire les spécifications de
l’application à développer, de considérer si chaque nom peut être un objet-métier ou non et
enfin de déterminer la responsabilité de chaque verbe pour un objet métier. La responsabilité
d’un objet est soit la connaissance d’une information, soit l’action qu’il fait.

2
 5.2.7. Diagramme de paquetage

Un paquetage regroupe des éléments de la modélisation appelés aussi membres,

portant sur un sous-ensemble du système. Le découpage en paquetage doit traduire
un découpage logique du système à construire qui corresponde à des espaces de
nommages homogènes.

2
PARTIE III : MODELISATION ET
REALISATION
 1. Gestion de projet
Chaque projet nécessite un planning représentant visuellement l'état d'avancement des
différentes activités qui les constituent. Mon projet de fin d’études Gestion des ordres de
missions est réalisé selon le planning représenté sous forme de diagramme de Gantt réalisé à
l’aide de Gantt Project. Le diagramme de Gantt est un outil utilisé en ordonnancement et en
gestion de projet et permettant de visualiser dans le temps les diverses tâches composant un
projet.

Figure 7: Diagramme de Gantt

2. Modélisation : Diagrammes UML

2.1. Les diagrammes

2.1.1. Diagramme de cas d’utilisation

Les rôles des diagrammes de cas d’utilisation sont de recueillir, d’analyser et d’organiser les
besoins, ainsi que de recenser les grandes fonctionnalités d’un système. Il s’agit donc de la
première étape UML pour la conception d’un système. Il ne faut jamais négliger cette
première étape pour produire un site web conforme aux attentes des utilisateurs ciblés. Pour
élaborer les cas d’utilisation, il faut se fonder sur des entretiens avec les utilisateurs.

2
2.1.1.1 Diagramme de cas d’utilisation Administrateur

2.1.1.2 Diagramme de cas d’utilisation Auditeur

2
2.1.1.3 Diagramme de cas d’utilisation Chef de Mission

2.1.1.4 Diagramme de cas d’utilisation Chef hiérarchique

2
 2.1.1.5 Diagramme de cas d’utilisation Secrétaire

2.1.2. Diagramme de séquence

Un diagramme de séquences est un diagramme d'interaction qui expose en détail la façon dont
les opérations sont effectuées : quels messages sont envoyés et quand ils le sont.
Les diagrammes de séquences sont organisés en fonction du temps qui s'écoule au fur et à
mesure que nous parcourons la page. Les objets impliqués dans l'opération sont répertoriés de
gauche à droite en fonction du moment où ils prennent part dans la séquence.

2.1.2.1 Diagramme de séquence Authentification

Ce diagramme montre la chronologie des actions qui composent la séquence
d’authentification. Il décrit les différentes étapes et échanges manœuvrées au niveau de
l’application lors d’un processus d’authentification effectué par l’utilisateur.

2
Figure 8: Diagramme de séquence Authentification

2
 2.1.2.2 Diagramme de séquence Administration – demande
accès de l’utilisateur
Ce diagramme montre la chronologie des actions qui composent la séquence de demande
d’accès de l’utilisateur. Il décrit les différentes étapes et échanges manœuvrées au niveau de
l’application, plus précisément au niveau du module administration, lors d’un processus de
demande d’accès effectué par l’utilisateur traduit par la création de compte.

Figure 9: Diagramme de séquence Administration – demande accès de l’utilisateur

2.1.2.3 Diagramme de séquence Administration – validation

compte utilisateur
Ce diagramme montre la chronologie des actions qui composent la séquence de validation de
compte utilisateur. Il décrit les différentes étapes et échanges manœuvrées au niveau de
l’application, plus précisément au niveau du module administration, lors d’un processus de
validation de compte utilisateur effectué par l’administrateur.

2
Figure 10: Diagramme de séquence Administration – validation
compte utilisateur

2
 2.1.2.4 Diagramme de séquence Administration – Données
de base
Ce diagramme montre la chronologie des actions qui composent la séquence de mise à jour
des données de base. Il décrit les différentes étapes et échanges manœuvrées au niveau de
l’application, plus précisément au niveau du module administration, lors d’un processus de
mise à jour des données de base effectué par l’administrateur.

Figure 11 : Diagramme de séquence Administration – Données de base

2
 2.1.2.5 Diagramme de séquence Demande de débours
Figure 12: Diagramme de séquence Demande de débours

2.1.2.6 Diagramme de séquence Autoriser débours

2
Figure 13: Diagramme de séquence Autoriser débours

2
 2.1.2.7 Diagramme de séquence Viser débours

2.1.2.8 Diagramme de séquence Paiement

Figure 14: Diagramme de séquence Paiement

2
 2.1.3. Diagramme de classe

Le diagramme de classe étant un système complexe nous allons le décomposer en sous

diagramme :

2
2.1.4. Diagramme d’activité

2.1.4.1 Diagramme d’activité Administrateur

2
2.1.4.2 Diagramme d’activité Auditeur

2
2.1.4.3 Diagramme d’activité Chef de Mission

2
2.1.4.4 Diagramme d’activité Chef Hiérarchique

2
 2.1.4.5 Diagramme d’activité Secrétaire

2.1.5. Diagramme d’états de transitions

2.1.5.1 Diagramme d’états transitions du compte de

l’utilisateur

2
2.1.5.2 Diagramme d’états transitions demande de débours

2.1.5.3 Diagramme d’états transitions Autorisation débours

2.1.5.4 Diagramme d’états transitions visa débours

2.1.5.5 Diagramme d’états transitions paiement débours

2
 2.1.5.6 Diagramme d’états transitions feuille de temps

2.1.6. Diagramme de déploiement

2.1.7. Diagramme de paquetage

2.2. Création de la base de données

2.2.1. Algorithme de transformation d’une association en relationnel

1. Chaque classe du diagramme de classes devient une table en relationnel.

2
2. A chaque classe du diagramme de classe est associe un identifiant : celui-ci est soit un
identifiant à générer ≪classe_id≫ soit une propriété invariante de la classe. Cet identifiant
devient la clé primaire de la table créée correspondante.

3. Toute relation dont une des multiplicités est de type (…,1) provoque la génération d’une clé
étrangère. Cela a pour conséquence la création d’une colonne de nom dans la table, chaque
valeur de cette colonne doit faire référence à la clé primaire de l’autre table issue de
l’association.
4. Pour toutes les autres multiplicités, la relation devient une nouvelle table ayant pour clé
primaire le couple d’identifiant des tables issues de l’association.

2.2.2. Transformation des multiplicités

0..* - 1 ou 1..* - 1 : clé primaire de la table issue de la classe côté 0..* ou 1..* est dupliquée
dans la table issue de la classe côté 1 comme clé externe pouvant être une valeur nulle et un
traitement particulier sera faite dans le cas d’une association porteuse de propriété(s).
0..1 – 1 : clé primaire de la table issue de la classe côté 0..1 est dupliquée dans la table issue
de la classe côté 1 comme clé étrangère.

0..1 – 0..1 : la clé primaire de la table issue de l’une des classes est dupliquées dans la table
issue de l’autre classe comme clé externe qui peut être une valeur nulle.
0..* - 0..* ou 1..* - 1..* ou 1..* - 0..* : une table ayant comme clé ne clé composée des
identifiants des deux classes est créée. Les éventuelles propriétés de l’association deviennent
les attributs de la table.

Table issue de relation n-aire : une table ayant comme clé une clé composée des identifiants
des classes est créée. Les éventuelles propriétés de l’association deviennent les attributs de la
table.

Table issue d’une association réflexive 0..* - 0..1 : la clé primaire de la table issue de la classe
côté 0..* devient clé externe qui peut être une valeur nulle dans la table 0..1.

2.2.3. Respectez des règles de normalisation

Les formes normales (FN) sont un formalisme qui permet de vérifier l’atomicité des
données (élémentarité) d’une part et l’absence de redondances d’autre part. Il est préférable
de normaliser les relations au moins jusqu’à la troisième forme normale.

2
La première forme normale (1NF) permet de vérifier qu’une table puisse être considérée
comme étant relationnelle, c’est-à-dire formée de colonnes contenant toutes des données
atomiques.
Une relation est en première forme normale si chaque n-uplet contient une seule valeur
par attribut. En d’autres termes, au niveau de l’extension d’une relation, à l’intersection
d’une ligne et d’une colonne, on ne doit trouver qu’une et une seule valeur.
La deuxième forme normale (2NF) permet de valider le choix de la clé primaire en contrôlant
les dépendances fonctionnelles entre clé primaire et colonne non clé primaire.
Une relation est en deuxième forme normale si elle est en première forme normale,
d’une part, et si tout attribut n’appartenant pas à la clé primaire est en dépendance
fonctionnelle élémentaire avec la clé, d’autre part.

La troisième forme normale (3NF) permet de vérifier l’absence de redondances dans la table
en contrôlant les dépendances fonctionnelles entre colonnes non clé primaire.
Une relation est en troisième forme normale si elle respecte la deuxième forme normale et
si les dépendances fonctionnelles entre la clé primaire et les autres attributs sont
directes.

Forme normale de Boyce-Codd (BCNF) : Une relation est en forme normale de

BoyceCoddsi elle est en troisième forme normale et que le seul déterminant (membre
gauche des dépendances fonctionnelles) existant dans la relation est la clé primaire.
Quatrième forme normale (4FN) : Une relation est en quatrième forme normale si elle
respecte la forme normale de Boyce-Codd. S’il n’existe pas de dépendances
multivaluées ou si x ->->y | z existe, alors tous les autres attributs a, b, c… de la relation
sont en DF avec x (x ->a, b, c…).

Cinquième forme normale (5FN) : Une relation est en cinquième forme normale (aussi
appelée « forme normale de projection jointure ») si chaque dépendance de jointure
respecte la deuxième forme normale et si les dépendances fonctionnelles entre la clé
primaire et les autres attributs sont directes.

2.2.4. Respectez des règles de modélisation

Pas de NULL : en privilégiant le nombre de relations dans la base car plus il y a de

relation avec de faible nombres de colonnes, plus les informations sont bien réparties ou par

2
héritage c’est-à-dire que les attributs communs restent dans la relation générique et les
attributs spécialisées dans les relations spécifiques.

Informations atomiques : si les informations d’une colonne peuvent encore être

décomposées, il faudra les séparer dans des attributs différents permettant de faire
des recherches plus précises et plus spécifiques.

Pas de redondance : là encore utiliser la notion d’héritage. Les redondances

d’informations induisent à un accroissement du volume de données conduisant à un
problème de performance ou à une indécision sur la bonne valeur à prendre ou à une
possibilité de divergence des valeurs dupliquées.

La modification d’une information ne doit pas impacter plus d’une ligne (mise à jour unitaire)
: respecter les FN4 et FN5 et également FNBC.

Choix de la clé : plus courte possible, constitué d’un seul attribut, invariante (ne doit pas
changer de valeur au cours du temps), asémantique (sans aucune interprétation sémantique) :
généralement nombre entier.

3. Réalisation

3.1. Développement de notre application

3.1.1. Back-end

3.1.1.1. Création des modèles CI

Comme on a vu, si la base de données a été bien pensée, on aura logiquement un
modèle par table. Pour cela, on va créer le fichier nomTable_model.php dans le
dossier./api/application/models/. Et on y définira les fonctions de manipulation de données
dans la base telles que les requêtes de listing, d’ajout, de modification et de suppression sur
la table.

CI propose 2 manières d’écrire les requêtes à la base de données :

- Ecriture en langage SQL ;

- Ecriture en utilisant le pattern Active Record de la classe Database.

Pour notre part, on a adoptée l’Active Record dont les avantages sont :
• Simplicité d’utilisation : on peut réaliser des requêtes en juste quelques lignes de code ;
• L’utilisation des fonctionnalités d’Active Record permet de créer des applications

2
indépendantes de base de données, puisque la syntaxe de la requête est générée par
chaque adaptateur de base de données ;

• Elle permet également de requêtes plus sûres, puisque les valeurs sont échappées
automatiquement par le système.

En revanche, on a utilisé des requêtes SQL dans nos fonctions dans le cas des requêtes plus
compliquées et/ou faisant intervenir des jointures sur des tables.

Tableau 4: Quelques fonctions Active Record du CodeIgniter

Fonction Utilisation Description

get() Sélection ou Listing Exécute la requête de sélection et renvoie le résultat
Ecrire la partie SELECT de votre requête
select() Sélection ou Listing
(définitions des champs à sélectionner)
from() Sélection ou Listing Définir la table de sélection
join() Sélection ou Listing Faire jointure entre deux tables
where() Sélection ou Listing Définir des conditions (AND)
or_where
Sélection ou Listing Définir des conditions (OR)
()
Génère une chaîne d'insertion sur la base des
données que vous fournissez, et exécute la
requête. Vous pouvez passer soit un tableau ou un
insert() Insertion
objet à la fonction. Le premier paramètre
contiendra le nom de la table, le second est un
tableau associatif des valeurs ou un objet.
Génère une chaîne de mise à jour et exécute la
Modification ou mise requête sur la base des données que vous
update()
à jour fournissez. Vous pouvez passer un tableau ou un
objet à la fonction comme dans insert().
set() Insertion et mise à Cette fonction vous permet de définir des valeurs
jour pour les insertions ou les mises à jour. Il peut être
utilisé au lieu de passer un tableau de données

2
 directement aux fonctions d'insertion ou de mise à
jour.
delete() Suppression Génère une chaîne SQL delete et exécute la requête.

Par la suite, nous allons voir un exemple qui sera plus complète et plus explicite.

Client_model.php

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Client_model extends CI_Model
{
    protected $table = 'client';

    public function add($client)
    {
        $this->db->set($this->_set($client))
                 ->insert($this->table);
    }

    public function update($id, $client)
    {
        $this->db->set($this->_set($client))
                            ->where('id', (int) $id)
                            ->update($this->table);
    }
    public function delete($id)
    {
        $this->db->where('id', (int) $id)->delete($this->table);
    }
}

3.1.1.2. Création des contrôleurs CI

Nos modèles étant définis, nous pouvons nous intéresser aux contrôleurs qui vont
contenir les méthodes qui permettent de faire le traitement des requêtes et des données entre le
modèle et la partie front-end. Nos contrôleurs sont créés et placés dans le dossier
./api/application/controllers/api/.

2
En effet, pour chaque modèle, nous allons définir un contrôleur qui va contenir les fonctions
permettant de traiter les données à envoyer ou en provenance de la base. Le nom du fichier
sera défini comme nomTable.php.

Voici un exemple pour le fichier Client.php en rapport au modèle Client_model qui

manipule les données de la table ‘client’ :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
require APPPATH . '/libraries/REST_Controller.php';

class Client extends REST_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('client_model', 'DeboursManager');
    }
    public function index_get() {
        $id = $this->get('id');
        $code=$this->get('code');
        $data = array();
    }
    public function index_post() {
        $id = $this->post('id') ;
        $supprimer = $this->post('supprimer') ;
        if ($supprimer == 0) {
            if ($id == 0) {
                $dataId = $this->DeboursManager->add($data);
            } else {
                $update = $this->DeboursManager->update($id, $data);
            }
        } else {
            $delete = $this->DeboursManager->delete($id);
        }        
    }
}

3.1.2. Front-end

3.1.2.1. Création des contrôleurs TS

Nous avons vu que nos composants TS sont placés au niveau du dossier delta/app/
et à partir de là, nous avons défini un dossier propre pour chaque partie, menu et sous-menu
du système qui contient un fichier contrôleur, un fichier html, un fichier module et une feuille

2
de style (scss). Par exemple, pour le module client, nous avons le sous-dossier traitement qui
contient un autre sous-dossier client contenant les fichiers :

• client.component.ts : contrôleur TS

• client.component.html : vue

• client.module.ts : module JS

• client.scss : feuille de style

Client.component.ts

export class ClientComponent implements OnInit {
insert_in_base = function (debours, suppression)
  {    
      this.index_api.add('Client',insert_data , config).subscribe((response) =
>
      {
        if (this.NouvelItem == false) 
        {               
            if(suppression==0) 
            {
              this.selectedItem.nom_client  = debours.nom_client;
            } 
            else 
            {    
              this.rows_debours  = [...this.rows_debours];
            }
          }
          else
          {
            let item = {
                        id        :String(response.response) ,
                        nom_client: debours.nom_client,
                        code      : debours.code,
                    };
          }
          this.dialog.closeAll();
      },error =>
      {
        console.log("erreur");
      });
      
  }
}

2
 3.1.2.2. Création des modules TS
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthGuard } from '../../../../_helpers/auth.guard';
import { ClientComponent } from './client.component';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
const routes = [
  {
      path     : 'client',
      component: ClientComponent, canActivate: [AuthGuard]
  }
];
@NgModule({
  declarations: [
    ClientComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    FuseSharedModule,
    FuseWidgetModule,
  ]
})
export class ClientModule { }

3.1.2.3. Création des vues

En effet, ici, on procède plus exactement à une adaptation des éléments prédéfinis du
template aux besoins de nos pages (de nos vues).

Client.component.html

<div id="formsclient" class="page-layout simple fullwidth" fxLayout="column">
    <mat-tab-group *ngIf="afficherFormAjoutModif">
        <mat-tab label="Formulaire">
            <div class="divform">
                <form name="deboursForm" [formGroup]="deboursForm" novalidate 
fxLayout="column"
                    fxLayoutAlign="center center" fxLayout.xs="row">
                    <div class="centerinput">
                        <input type="hidden" formControlName="id" [(ngModel)]=
"debours.id">
                        <mat-form-field fxFlex="30" class="pl-4" appearanc
e="outline" fxFlex style="width:120px;">
                            <mat-label>Code</mat-label>

2
                            <input matInput formControlName="code" [(ngModel)]
="debours.code">
                            <mat-error>
                                Code obligatoire
                            </mat-error>
                        </mat-form-field>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start start">
                        <button (click)="ajout(debours,0)" mat-raised-button c
olor="accent" class="submit-button ml-4"
                            aria-label="CREATE AN FORM" [disabled
]="deboursForm.invalid">
                            Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </mat-tab>
    </mat-tab-group>
    </div>
</div>

3.1.2.4. Création de feuille de style scss

Le SCSS est la nouvelle syntaxe du langage Sass(Syntactically Awesome Stylesheets) qui
est un langage de feuille de style (script) interprété dans un CSS (Cascading Style Sheets ou
feuille de style en cascade. Son formalisme est assez similaire au CSS mais la différence c’est
au niveau de l’extension qui est .scss. Dans notre application, la définition du SCSS n’est pas
obligatoire puisque nous l’utilisons uniquement afin de redéfinir ou personnaliser un style
spécifique pour un contenu donné du fait que les contenus utilisent par défaut le style du
template.

Client.component.scss

.centerinput{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: row;

2
  width: 100% !important;

3.2. Principe de fonctionnement de l’application

3.2.1. Liaison et interaction

Le schéma suivant illustre le fonctionnement et l’interaction au niveau de notre application :

Figure 15: Liaison entre backend et frontend

Nous avons déjà vu dans le chapitre précèdent le principe du data binding bidirectionnel
entre la vue et le contrôleur JS qui stipule que lorsque vous ferez des actions sur votre page
HTML, les variables dans votre TypeScript se mettront à jour et vice-versa : lorsque vous
changerez vos variables dans votre TypeScript, les répercussions sur la vue seront
immédiates.
La partie front end est la partie client pour notre application et logiquement elle n’a pas
d’accès ou de communication directe avec la base de données pour effectuer des actions
(récupération, aout, mise à jour ou suppression) sur les données et doit pour cela passer par
la partie back end qui est la partie serveur de notre application (API) qui a un accès direct sur
la base de données.

2
Lorsque la partie front end veut faire appel à la partie back end ou plus précisément lorsqu’un
contrôleur JS veut appeler un contrôleur CI pour pouvoir récupérer ou envoyer des données
dans la base de données (c’est-à-dire envoyer des requêtes), il doit retourner l’URL spécifiant
le contrôleur CI en question avec la méthode adéquate puisque comme nous avons déjà vu
dans le chapitre précèdent, pour pouvoir accéder à un contrôleur CI et sa méthode, il faut les
spécifier dans l’URL.

Des fonctions de manipulation basiques des données dans la base de données sont définies
au niveau du modèle. Ce sont les fonctions CRUD (Create, Read, Update, Delete) qui
correspondent chacune à une fonction de traitement au niveau du contrôleur CI et qui y seront
accessibles grâce à l’appel du modèle en question au niveau du contrôleur.
Lorsque le contrôleur CI a fait appel à un contrôleur CI pour effectuer une requête sur une
ressource (ici une ressource correspond à un modèle c’est-à-dire à une table de la base de
données), ce dernier interagit avec le modèle correspondant à travers la méthode ou fonction
adéquate selon le besoin.

Une fois la requête traitée au niveau de la partie back end, le contrôleur CI utilise le principe
de l’APIREST pour renvoyer la réponse vers la partie front end en formatant les données en
JSON et en spécifiant les états des requêtes selon le fonctionnement du protocole HTTP.

3.2.2. Principe de packetage

Dans la phase de développement de l’application, nous utilisons deux serveurs

différents : le serveur node et le serveur de base de données (à travers l’outil xampp) qui
devront toujours être en marche pendant tout le lancement de l’application.
Pour pouvoir lancer l’application, on procèdera à deux phases :
1) on lance le serveur de base de données

2) on lancera le serveur node et on exécutera dans le répertoire de la partie angular la

commande « ng serve » et l’application sera tout de suite lancée dans le navigateur
en local.

2
 3.3. Présentation de l’application

3.3.1. Page d’Authentification et création de compte

C’est ce qui s’affiche en premier lors de la connexion à l’application. Afin d’accéder à toutes
ses fonctionnalités et pouvoir la manipuler, l’utilisateur doit s’identifier en entrant
obligatoirement son Email et son Mot de passe qui seront vérifiés afin de gérer ses droits
d’accès. Une fois ces informations authentifiées, l’application bascule vers la page d’Accueil
sinon un message d’erreur informe sur l’invalidité ou la non-existence des informations
entrées et reste sur la page d’Authentification.

Figure 16: Authentification de notre application

Nous remarquons sur cette page le lien « Créer un compte » qui va permettre aux personnes
qui veulent avoir accès à l’application mais qui ne sont pas encore inscrites de créer leurs
comptes. Au click de ce lien, un formulaire de saisie des informations nécessaires pour la
création de compte apparait. L’utilisateur devra le remplir et valider l’opération. A ce stade, le
compte sera créé et c’est à l’administrateur de l’activer et de donner les droits d d’accès
spécifiques à cet utilisateur.

2
 Figure 17: Création de compte dans notre application

3.3.2. Page d’accueil

La page d’accueil est le même pour tous les utilisateurs qui se connecte à l’application une
fois qu’ils arrivent à s’authentifier. Cependant, les menus et les différents contenus affichés à
l’utilisateur dépendent du rôle et de la permission qui lui ont été attribués par l’administrateur
après l’activation de son compte. En d’autres termes, chacun des utilisateurs a des accès
spécifiques au niveau des pages de l’application. Un utilisateur déclarant, par exemple, n’aura
pas accès à l’interface réservé au personnel de Delta Audit.

Figure 18: page d’accueil de notre application

2
 3.3.3. Les contenus

Nous avons défini dans l’étude général du système que les actions principales que les
utilisateurs auront à faire tourne autour de :

 Lister des données

 L’ajout de nouvelles données ;
 La modification ou la mise à jour de données ;
 La suppression de données ;
 Téléchargement des documents.
 Uploader des documents.

De ce fait, la structure générale des contenus de page est assez similaire mais se différencie
seulement en quelques points ou selon certaines spécificités propres au traitement.

3.3.3.1. Liste des données

D’une manière générale, après avoir cliqué sur un menu du module, on accède
immédiatement à un listing de données en rapport au thème de ce menu sous forme de tableau
dynamique avec des colonnes spécifiques.

2
 Figure 19: Liste des données dans notre application

Source : Auteur

Le bouton « Nouveau » sur la même page que le listing permet de faire un ajout de
nouvelle donnée à insérer dans le tableau.

3.3.3.2. Ajout des données

Au click du bouton « Nouveau », un formulaire d’ajout s’affiche soit au-dessus ou soit au-
dessous du listing et dont les champs correspondant aux colonnes du tableau de listing
pourront être remplis. Le bouton « Enregistrer » permet d’enregistrer les nouvelles données et
le bouton « Annuler » pour annuler l’opération.

Figure 20: Ajout des données dans notre application

2
 3.3.3.3. Modification des données
Pour modifier une ligne de données, il suffit de sélectionner cette ligne et un
bouton « Modifier » apparait au-dessus du listing. Au click du bouton « Modifier », le
formulaire apparait comme pour l’ajout au-dessous ou au-dessus du tableau de listing avec les
données correspondantes dans chaque champ afin d’être modifiées ou mises à jour. Le bouton
« Enregistrer » permet d’enregistrer les nouvelles données et le bouton « Annuler » pour
annuler l’opération.

Figure 21: Modification des données dans notre application

3.3.3.4. Suppression des données

Pour supprimer une ligne de données, il suffit de sélectionner cette ligne et un bouton
« Supprimer » apparait au-dessus du listing. Au click du bouton « Supprimer », une fenêtre
pop-up apparait demandant de confirmer ou d’annuler la suppression définitive de la ligne de
données choisie.

2
Figure 22: Suppression des données dans notre application

2
PARTIE IV : SYNTHESE DU TRAVAIL
1. Evaluation des grandeurs
 Il est essentiel pour votre entreprise de garder une trace de vos documents et de les
organiser.
 Les documents ne sont pas seulement des sources d'informations précieuses, mais ils
ont également une signification juridique. Vous pouvez envisager de sécuriser vos
documents à long terme dans l'application avec un système de gestion de documents
intelligent.

 Contrairement à un logiciel du Delta Audit qui devrait être installé sur chaque poste
utilisateur, l’application est directement accessible depuis un navigateur.

 Tout comme pour l'installation, mettre à jour des centaines voire des milliers de postes
pour chaque logiciel prend beaucoup de temps et les problèmes qui peuvent être
rencontrés sont nombreux. Avec l’application, plus besoin de se soucier de ce
problème.

 Comme l'application web repose sur un nombre limité de serveurs web, la mise à jour
est très rapide. De plus elle est sans intervention de la part des utilisateurs. Une fois
l'application mise à jour sur les serveurs, les utilisateurs vont tout de suite avoir accès
à la mise à jour.

 De plus comme les serveurs sont allumés 24h/7j, il est commun de mettre les données
les plus souvent utilisées en cache pour un accès instantané.

 L’application répond aux besoins spécifiques du cabinet et gère toutes les activités du
cabinet.

 L’applications est indépendante de la plate-forme, elle peut fonctionner dans différents

types de plates-formes avec la seule exigence d'un navigateur Web.

2
 2. Mise en valeur du projet

2.1. Qualité technique interne du projet

La qualité technique interne d’un produit est fondamentale pour la réalisation des fonctions
du produit, il est clair que c’est cette partie qui est la plus importante dans le travail, dont
voici
les principaux points pour notre produit :

 Les programmes sont complets, efficaces, correctes, performants et surtout

répondent aux besoins de Delta Audit ;
 L’application suit les normes requises pour la discipline d’une application web
 L’application occupe un minimum volume d’espace mémoire et optimale,
 L’utilisation de certaines technologies récentes comme le framework
Codeigniter 3 et angular 10, lors de la conception de ce projet a fait que notre
application soit fluide et bien organisée avec une architecture optimale

2.2. Qualité technique externe du projet

Il a été mentionné auparavant que la qualité technique interne d’un produit est
fondamentale dans un travail, sur le plan pratique, ce dernier dépend souvent de la qualité
technique externe, sans quoi le produit ne sera ni voyant ni attirant.
Par définition, la qualité technique externe d’un produit désigne la couverture du produit,
c’est surtout la première qualité que l’on voit de l’extérieur et qui, certes, n’est pas
nécessairement essentielle aux fonctionnements du produit mais utile pour rendre encore
meilleure sa qualité technique interne afin d’attirer la cible.

En voici les principaux :

 Il s’agit de la satisfaction de Delta Audit par le travail qu’on a apporté,

la façon dont on a accompli les tâches, du respect du temps donné pour la
réalisation du projet, notre ponctualité.
 L’objectif en termes de deadline du projet est bien respecté selon les sprints
planifiés lors de l’analyse
 De même pour la présentation écrite, elle est structurée et comporte de
nombreuses images d’illustration

2
3. Limite du projet
 Le chargement de l’application est un peu lent au début ;
 Si une page de l’application a un problème, l’application aura des problèmes. Ne vous
 Vous aurez nécessairement besoin d’une connexion internet pour sa reproduction.
Sinon, vous ne pourrez pas naviguer sur le Web et les applications Web ne vous seront
d’aucune utilité.
 L’application dépend de votre connexion Internet. Internet lent signifie une application
lente. Internet irrégulier signifie un service irrégulier.

4. Amélioration apportée par le système dans l’activité du

cabinet

 Tous les systèmes d'exploitation, que ce soit Windows, macOS, Linux, Android, ou
iOS, ont un navigateur web par défaut. Aucun besoin d'en installer, il est donc possible
d'utiliser l’application sans avoir installé un seul logiciel auparavant. Cela réduit la
configuration et la maintenance de chaque poste de manière significative.

 Les utilisateurs sont plus productifs car l'interface graphique est claire et ils ne
bloquent donc pas sur certaines tâches qui seraient compliquées à réaliser avec une
mauvaise interface.

 De plus la conduite du changement est plus rapide car une interface intuitive rendra les
changements eux aussi intuitifs, permettant aux utilisateurs de s'adapter plus
rapidement.

 L’application peut utiliser plusieurs serveurs en même temps pour accélérer le temps
de traitement permettant ainsi de manipuler une quantité importante de données sans
perdre en productivité.
 Récupération de données : les utilisateurs peuvent récupérer rapidement des données
en cas de perte de données ou de fautes techniques à l'aide de l’application.
 L’utilisation de l’applications améliorera l'efficacité et les performances de
l'entreprise.

2
 Le système de gestion des droits d'utilisateur robuste au sein de l’application peut
aider à limiter qui peut voir quelles informations. Avec cette fonctionnalité, il peut
également lutter efficacement contre la surcharge d'informations.
 L’application est une SPA ou « Single page Application  » c’est-à-dire sur une seule
page web ;
 Cette application aide beaucoup les employées de Delta Audit car elle facilite et
améliore leurs travails.
 L’application est facile à manipuler par l’utilisateur.

2
 CONCLUSION
Nous constatons alors que les systèmes informatiques, plus précisément les logiciels
ou les applications, sont devenus de plus en plus importants dans les activités
professionnelles. Convaincu de ce fait, Delta Audit a souhaité la mise en place d’une
application web pour l’optimisation de la gestion de ses activités. Pour satisfaire sa demande,
une application web a été développée.

La réalisation de cette application nous a donné l’occasion d’utiliser les Framework :

CodeIgniter et Angular. L’utilisation de ses nouvelles technologies nous a permis de nous
familiariser sur l’ergonomie et le dynamisme d’une application web. Ils facilitent et
améliorent le développement, ainsi que notre activité durant de développement. Nous avons
rencontré plusieurs difficultés lors de notre démarche, mais nous sommes parvenus à effectuer
le travail. L’application en elle-même est fonctionnelle et implémente les mêmes
fonctionnalités que
l’ancienne application et aussi des nouvelles fonctionnalités pour l’instant.

Cette application facilite et améliore la gestion des activités de Delta Audit et elle
permet aussi d'obtenir des informations précieuses en un temps réduit. Grace à notre
contribution, les données concernant ses activités sont à jours et permet de suivre en temps
réel l’évolution de ses travails.
 TABLE DES MATIERES

AVANT-PROPOS.......................................................................................................................i

REMERCIEMENTS...................................................................................................................ii

LISTE DES ABREVIATIONS.................................................................................................iii

LISTE DES FIGURES..............................................................................................................iv

LISTE DES TABLEAUX...........................................................................................................v

SOMMAIRE..............................................................................................................................vi

INTRODUCTION......................................................................................................................1

PARTIE I : JUSTIFICATION DU THEME..............................................................................2

1. Présentation générale du Cabinet Delta Audit................................................................2

1.1. Présentation de sa structure......................................................................................2

1.2. Description du processus de gestion.........................................................................3

2. Analyse de l’existant.......................................................................................................4

2.1. Moyen matériel.........................................................................................................4

2.2. Son propre logiciel....................................................................................................4

2.3. Environnement réseau..............................................................................................4

3. Critique de l’existant.......................................................................................................5

3.1 Le logiciel et réseau..................................................................................................5

3.2 Classification dossier................................................................................................6

4. Techniques actuellement utilisées pour contourner les problèmes.................................6

4.1. Stratégie de groupe...................................................................................................6

4.2. Application mobile...................................................................................................8

5. Explication du thème......................................................................................................9

5.1. Objectif.....................................................................................................................9

5.2. Paramètres à tenir compte pour la réalisation de l’application...............................10

2
 5.3. Solution suggérée...................................................................................................11

PARITIE II : ASPECTS THEORIQUES.................................................................................15

1. Présentation des connaissances nécessaires pour la réalisation du travail....................15

1.1. Type de développement..........................................................................................15

1.2. Les architectures utilisées.......................................................................................16

2. Les grandeurs utilisées..................................................................................................22

2.1. La dématérialisation...............................................................................................22

2.2. Ajout des nouvelles fonctionnalités........................................................................22

2.3. Maintenance et accessibilité...................................................................................22

3. Présentation des scripts et langage de programmation.................................................23

3.1. Langage de programmation....................................................................................23

3.2. Framework..............................................................................................................24

4. La gestion de projet.......................................................................................................40

4.1. MS Project..............................................................................................................40

4.2. Diagramme de Gantt...............................................................................................42

5. Le langage de modélisation (UML)..............................................................................43

5.1. A propos de UML...................................................................................................43

5.2. Les diagrammes......................................................................................................45

PARTIE III : MODELISATION ET REALISATION.............................................................49

1. Gestion de projet...........................................................................................................47

2. Modélisation : Diagrammes UML................................................................................47

2.1. Les diagrammes......................................................................................................47

2.2. Création de la base de données...............................................................................64

3. Réalisation.....................................................................................................................67

3.1. Développement de notre application......................................................................67

3.2. Principe de fonctionnement de l’application..........................................................74

3.3. Présentation de l’application..................................................................................75

2
PARTIE IV : SYNTHESE DU TRAVAIL..............................................................................82

1. Evaluation des grandeurs..............................................................................................73

2. Mise en valeur du projet...............................................................................................74

2.1. Qualité technique interne du projet........................................................................74

2.2. Qualité technique externe du projet........................................................................74

3. Limite du projet.............................................................................................................75

4. Amélioration apportée par le système dans l’activité du cabinet.................................75

CONCLUSION.........................................................................................................................77

TABLE DES MATIERES........................................................................................................xii

REFERENCES.........................................................................................................................xv

2
 REFERENCES

1. Delta Audit. [En ligne] http://deltaaudit.com/fr/.

2. la-difference-entre-developpement-back-end-front-end-et-fullstack. [En ligne]

https://www.nemesisstudio.com/quelle-est-la-difference-entre-developpement-back-end-
front-end-et-fullstack/.

3. openstudio. [En ligne] http://www.openstudio.fr/lab/Comprendre-la-notion-de-MVC.

4. redhat. [En ligne] https://www.redhat.com/fr/topics/api/what-is-a-rest-api.

5. design pattern. [En ligne] https://www.journaldunet.fr/web-tech/dictionnaire-du-

webmastering/1445322-pattern-definition-simple-et-pratique/.

6. json. [En ligne] https://www.journaldunet.fr/web-tech/dictionnaire-du-

webmastering/1445308-json-definition-et-presentation-de-ce-format-de-donnees/.

7. php. [En ligne] https://www.php.net/.

8. typescript. [En ligne] https://www.typescriptlang.org/docs/handbook/typescript-in-5-

minutes.html.

9. framework. [En ligne] https://www.journaldunet.fr/web-tech/dictionnaire-du-

webmastering/1203355-framework/.

10. CI. [En ligne] https://codeigniter.com/userguide3/general/welcome.html.

11. Tina, Monsieur. Cours gestion de projet. 2020-2021.

12. —. Cours UML. 2019-2020.

2
 RESUME

Mots clés : CodeIgniter, Angular 10, Application web, PHP, TypeScript

ABSTRACT
Keywords: CodeIgniter 3, Angular 10, Web application, PHP, TypeScript