Présentation de l’architecture de l’application web

L’architecture d’application web développée pour la gestion des faits d’état civil à la mairie de Ziguinchor repose sur PHP et Laravel. Ce mémoire présente une solution visant à optimiser l’efficacité et la qualité des services administratifs locaux.

Chapitre V : Implémentation et présentation de l’application

Introduction

Nous sommes au dernier chapitre de notre travail et nous espérons que vous avez pu assimiler tous nos dires précédents pour mieux comprendre cette dernière partie. Ce chapitre sera consacré à la présentation de l’architecture de l’application, la structure de la base de données ensuite la conception et la présentation de la solution informatique. C’est la suite logique de notre précédent chapitre qui faisait part d’une étude des outils technologiques.

D’abord nous allons voir l’architecture de l’application, le schéma de la base de données de façon générale et faire la présentation de l’application.

Architecture de l’application

L’architecture de notre application dépend des outils technologiques qu’on avait eu à choisir dans le chapitre précédent. Rappelons que nous avons choisi comme pile de développement les technologies suivantes : PHP comme langage de programmation, MySQL comme système de gestion de base de données (SGBD), Laravel comme Framework web et le trio légendaire HTML/CSS/JavaScript pour la partie front-end (interface utilisateur).

L’architecture de notre application est la même architecture que le Framework Laravel vu que nous l’utilisons pour l’implémentation de notre solution. Celui-ci utilise le modèle MVC.

MVC est l’acronyme de « Model View Controller ». Il représente l’architecture que les développeurs adoptent lors de la création d’applications. Avec l’architecture MVC, nous examinons la structure de l’application en ce qui concerne le fonctionnement du flux de données de notre application

MVC est une architecture logicielle qui sépare la logique domaine/application du reste de l’interface utilisateur. Pour ce faire, il sépare l’application en trois parties : le modèle, la vue et le contrôleur.

Le modèle gère les comportements fondamentaux et les données de l’application. Il peut répondre aux demandes d’informations, aux instructions de modification de l’état de ses informations et même informer les observateurs des systèmes événementiels lorsque les informations changent. Il peut s’agir d’une base de données ou d’un nombre quelconque de structures de données ou de systèmes de stockage.

La vue définit effectivement la présentation au sein l’application. Il restituera les données du modèle sous une forme adaptée à l’interface utilisateur.

Le contrôleur reçoit l’entrée de l’utilisateur et effectue des appels aux objets modèles et à la vue pour effectuer les actions appropriées.

Dans l’ensemble, ces trois composants fonctionnent ensemble pour créer les trois composants de base de MVC. La figure suivante résume le fonctionnement du modèle.

[img_1]

Figure 22 : Modele MVC

Un modèle est une représentation d’une instance ou d’un objet réel dans notre base de données. La vue représente l’interface à travers laquelle l’utilisateur interagit avec notre application. Lorsqu’un utilisateur entreprend une action, le contrôleur gère l’action et met à jour le modèle si nécessaire.

Nous pouvons prendre un exemple dans notre solution notamment la déclaration de naissance. Le client fait une demande de déclaration de naissance et le Controller lui renvoie le formulaire concernant les informations sur la déclaration en faisant une requête aussi sur la base de données pour récupérer la liste des formations sanitaires.

Notons qu’il existe d’autres architectures logicielles : le modèle client-serveur, l’architecture en couches et l’architecture Peer-to-Peer.

En conclusion, nous pouvons dire avoir une architecture logicielle reconnue dont le modèle MVC est une chose indéniable dans le monde du génie logiciel. En effet cela permet aux développeurs de parler la même langue lors du développement. Cela facilite la compréhension et la collaboration entre développeurs. Ainsi un projet est bien segmenté en mettant toutes les parties explicitement.

La base de données

Nous allons voir la base de données de notre application web. Premièrement on va voir les différentes tables qui composent notre structure de la base de données. Ensuite essayons de parler des relations qui existent entre les tables.

[img_2]

Figure 23 : Schema de la base de donnees

Présentation de l’application

Dans cette partie nous allons voir la présentation de notre solution informatique de manière détaillée. Nous allons voir en premièrement les acteurs et leurs rôles du système. Ensuite on va vous montrer les fonctionnalités à l’aide des différentes interfaces utilisateurs. Enfin nous allons parler de la sécurité de l’application.

Acteurs et Rôles

Dans notre application web nous avons actuellement quatre (4) acteurs et respectivement quatre (4) rôles. Nous allons vous présenter les permissions pour chaque rôle.

Cela concerne les naissances, les décès et les mariages

Explication des icônes

Icônes

Explication

supprimer

[img_3]

Afficher

Editer

Imprimer

Corbeille

Ces icônes sont utilisées sous formes de boutons dans notre application et connaitre leurs significations est vraiment important.

Interfaces utilisateurs

• Page d’accueil

Restaurer

Export fichier Excel

Valider

Ajouter

[img_4]

Figure 24 : Interface page d’accueil

C’est la page principale de l’application, notre point d’entrée pour découvrir les fonctionnalités. Elle a un formulaire de connexion et quatre onglets notamment A propos, Guide d’utilisation, contacts et inscription citoyen qui renvoient respectivement à une page web.

Ainsi les informations du tableau ci-dessus ne sont que des comptes fictifs pour tester l’application.

• Page inscription citoyen

La page inscription citoyen permet aux citoyens de pouvoir faire leur enregistrement au niveau de la plateforme afin de faire leurs demandes de documents administratifs.

[img_5]

[img_6]

Figure 25 : Interface page inscription citoyen

• Page tableau de bord en tant que’officier

[img_7]

Figure 26 : Interface tableau de bord officier

Dans cette figure nous avons le tableau de bord d’un utilisateur connecté en tant qu’un officier. Cette page est divisée en trois parties : nous avons la partie « Accès Rapide », la partie statistique nommée « Quelques Chiffres » et la partie de la navigation.

La section « Accès rapide » contient des boutons de lien pour aller rapidement dans une page. En effet nous avons sélectionné certaines actions très fréquentes et le mettre dans le tableau de bord. Cela permettra pour l’utilisateur d’aller directement au niveau des pages avec un raccourci. Si nous prenons par exemple le cas de déclaration de naissance.

Pour aller dans cette page on devait aller dans le menu de navigation, cliquer sur le bouton « gestion des actes » et choisir « actes de naissances » pour pouvoir accéder au formulaire de déclaration de naissance. Ainsi avec le bouton qui se trouve dans le tableau de bord on peut facilement trouver le formulaire de déclaration de naissance en un clic.

La partie « Quelques chiffres » fait apparaître quelques chiffres concernant les données de l’application sur les différents actes notamment : nombre déclaration de naissances, de décès et de mariages, etc.

Enfin la partie de navigation qui concerne les liens de navigation permet aux utilisateurs de se promener au niveau des onglets. Et l’affichage de boutons de navigation dépend des type d’utilisateurs et selon leurs permissions.

• Formulaire de déclaration de naissance

[img_8]

Figure 27 : Formulaire declaration de naissance

Ce formulaire permet d’enregistrer une naissance selon les types de déclarations. Il peut contenir un fichier comme preuve pour les pièces justificatives dont le certificat d’accouchement ou certificat administratif de déclaration de naissance.

• Liste des déclarations de naissance

[img_9]

Figure 28 : Interface liste des declarations de naissance

Voici la page contenant la liste des déclarations de naissance. En haut nous avons une barre de recherche. En effet on peut faire une recherche sur les déclarations de naissance en fonction du numéro de registre, du nom de l’enfant, du prénom de l’enfant, du lieu et de la date de naissance. Pour chaque déclaration nous avons un ensemble de boutons d’option qui va nous permettre de d’exécuter une action donnée (figure ci-dessous). Le premier bouton permet de valider une déclaration, le deuxième bouton permet de visualiser une déclaration, le quatrième bouton permet de supprimer une déclaration et le dernier bouton permet d’imprimer un extrait une déclaration.

[img_10]

Figure 29 : Interface boutons d’options de la liste

• Visualisation d’une déclaration de naissances

[img_11]

Figure 30 : Interface visualisation d’une declaration

Cette page nous permet de visualiser toutes les détails d’une déclaration de naissance. En effet dans le tableau, on limitait le nombre de champs à afficher. Dans notre visualisation on peut même faire les actions présentes sur le tableau. Au-delà de cela, on peut imprimer la déclaration en plusieurs formats : copie littérale, extrait de naissance, bulletin de naissance et volet N°1.

• Interface Impression extrait de naissance

[img_12]

Figure 31 : Interface impression extrait de naissance

Avec l’ouverture de cette page on peut imprimer facilement un extrait de naissance à l’aide d’une déclaration effectuée.

• Interface impression volet N°1

[img_13]

Figure 32 : Interface impression volet N°1

Ces interfaces liées pour beaucoup à la déclaration de naissance sont similaires pour les déclarations de mariage et de décès. En effet nous avons les mêmes procédés (formulaire d’ajout, modification, visualisation et impressions) pour les déclarations de mariage et de décès que celle de la naissance.

• Interface statistiques

[img_14]

Figure 33 : Interface statistiques

Cet onglet nous permet de voir les différentes données statistiques d’un centre donné. On pourra faire des exports en Excel à l’aide des trois (3) boutons ci-dessus des données.

• Exportation statistiques sous format Excel

[img_15]

Figure 34 : Ouverture fichier Excel genere

• Interface Gestion des utilisateurs

Figure 32 : Ouverture fichier Excel généré

Dans cette page, pour pouvoir y accéder il faut te connecter avec un profil admin. Nous avons en haut la barre de recherche qui contient le bouton d’ajout d’un utilisateur, les éléments de recherche (nom, prénom, courriel), le bouton corbeille et le bouton citoyens.

Le bouton « ajouter un utilisateur » nous permet d’accéder au formulaire de création d’un nouvel utilisateur. Au niveau du tableau dans le champ « actions » on a les différentes actions que peut faire l’utilisateur dont : activer / désactiver, modifier ou mettre dans la corbeille un utilisateur. La case à cocher nommée « citoyens » permet d’afficher uniquement les utilisateurs qui ont un profil citoyen. Le bouton « corbeille » nous amène dans une liste

[img_16]

Figure 35 : Interface Gestion des utilisateurs

d’utilisateurs récemment supprimés que l’on pourra restaurer ou les supprimer définitivement.

• Interface Modification d’un profil utilisateur

[img_17]

Figure 36 : Interface modification utilisateur

Dans cette page l’utilisateur a la possibilité de changer ses informations personnelles.

• Interface configuration

[img_18]

Figure 37 : Interface configuration

Toujours en tant qu’admin, dans cet onglet on va pouvoir configurer notre application en ajoutant les formations sanitaires et les centres d’état civil. Elle contient deux onglets dont formations sanitaires et liste des centres.

Pour les formations sanitaires et les centres nous aurons les mêmes opérations CRUD (créer, lire, modifier et supprimer) en plus de la barre de recherche pour affiner les résultats.

• Interface de sauvegarde de la base de données

[img_19]

Figure 38 : Interface page de sauvegarde BD

Dans cette page on pourra télécharger le fichier de sauvegarde de la base de données généré de manière dynamique par l’application. N’empêche que nous pouvons générer manuellement un fichier de sauvegarde en cliquant sur le bouton « sauvegarder ».

• Interface des demandes des citoyens

[img_20]

Figure 39 : Interface Demandes citoyens

On peut cette page si on se connecte avec un utilisateur de rôle « citoyen » « officier » ou « agent » mais nous n’aurons pas les mêmes boutons d’actions. En tant qu’un citoyen, l’utilisateur pourra créer, modifier ou supprimer une demande.

• Interface formulaire de création d’une demande

[img_21]

Figure 40 : Interface formulaire de creation de la demande

Avec ce formulaire le citoyen pourra faire une demande d’un document administratif en remplissant tous les champs obligatoires et cliquer sur le bouton « enregistrer ». Il peut annuler la saisie en appuyant sur le bouton « annuler ».

Conclusion

Dans cette partie nous avons montré quelques actions que nous pouvons faire avec l’application en fonction des différents rôles des utilisateurs notamment : admin, officier, agent et citoyen. Il décrit une bonne partie des fonctionnalités de notre solution informatique. En conclusion nous pouvons dire que notre application web est régie par des permissions qui guident les actions de l’utilisateur. Pour les impressions des documents nous avons seulement montré deux exemplaires alors que l’application en compte plus de dix.

Conclusion Générale et Perspectives

Ce travail a été très riche en apprentissage et a favorisé une amélioration continue de nos compétences et connaissances dans le domaine du management et de la programmation. Nous avons réalisé une application web pour la gestion des faits d’état civil cas des mairies du Sénégal.

Premièrement nous avons fait une étude minutieuse sur l’état civil au Sénégal, afin de comprendre pleinement notre sujet de mémoire et aussi de déceler les problèmes que rencontre ce système. Ensuite nous avons eu à voir la structuration et le fonctionnement de la Mairie. En plus s’ajoute la partie de la modélisation et de la conception de notre nouveau système avec le langage UML. Enfin nous avons développé notre application web que l’on a surnommé NIAMA.

La partie programmation, nous avons utilisé les outils suivants :

• Les langages de programmation web PHP, JavaScript, HTML/CSS
• Le Framework de PHP Laravel
• MySQL comme système de gestion de base de données.
• Visual Studio Code comme éditeur de code
• L’environnement de développement WAMP

Cette expérience a été très bénéfique pour nous, en effet la réalisation d’un projet informatique de l’analyse jusqu’à la conception et à l’implémentation, toutes les étapes du génie logiciel sont respectées. Nous avions pu approfondir nos connaissances et compétences surtout dans le domaine de la programmation.

Ce pendant nous avons eu à faire des perspectives concernant l’utilisation de notre logiciel afin de l’améliorer pour une meilleure expérience utilisateur.

Dans nos perspectives nous souhaitons que notre solution ait une amélioration et une extension dans d’autres domaines de la mairie notamment la comptabilité et la Finance, de la gestion du personnel et aussi de l’engagement citoyen. C’est tout le sens d’avoir une application web, elle est très extensible contrairement aux autres types d’applications. En effet au lieu d’avoir des applications différentes dans chaque service de la mairie on peut regrouper toutes ses applications en une seule application.

Dans la partie finance et comptabilité on peut intégrer facilement un module qui permettra de gérer toutes les dépenses et ressources liées à l’activité de la mairie. De ce fait nous aurons une traçabilité dans la gestion des finances et de la comptabilité pour une meilleure gouvernance longtemps promulguée par le gouvernement sénégalais. De manière détaillée le module Finance/Comptabilité se caractérisé par :

1. La gestion des dépenses
2. La gestion des ressources

Nous avons aussi le module gestion du personnel appelée littéralement gestion des ressources humaines. On note trois grands aspects du module dont :

1. Le recrutement
2. La formation
3. La motivation
4. Les congés

En plus de cela au futur le citoyen aura plus d’audience que dans cette version. Rappelons qu’actuellement l’utilisateur ne peut que seulement demander des documents administratifs. On pourra intégrer un module qui permettra aux utilisateurs de pourra faire une pré-déclaration au niveau de la plateforme et venir le continuer avec l’officier. La pré- déclaration consiste à remplir toutes les informations par l’utilisateur (citoyen) concernant la déclaration de son enfant par exemple l’officier aura juste le rôle de validateur et de correcteur. Celui-ci gagnerait beaucoup temps à saisir les informations liées à une déclaration.