Conception et mise en place d’une application SIG-Web d’aide à la décision pour les urgences en Tunisie
Et pour observer la concentration des lits par gouvernorat, nous avons effectué cette cartographie illustrée dans la figure suivante :
L'analyse des cartes révèle une décentralisation des structures hospitalières, avec une concentration plus élevée le long de la côte et dans la région du Grand Tunis.
En effet l’analyse géographique des lits hospitaliers, des HR, des HC, et des CHU/CHS en Tunisie souligne la nécessité d'une répartition équilibrée des ressources médicales dans l'ensemble du pays Cela permettrait de garantir un accès équitable aux soins de santé pour tous les citoyens, indépendamment de leur lieu de résidence, et d'améliorer les services de santé dans les régions moins
pourvues [Figure 35]
Conclusion
En conclusion, ce chapitre a fourni une vue d'ensemble détaillée de notre zone d'étude spécifique, en examinant son cadre géographique, démographique ainsi que le nombre et la répartition des structures sanitaires publiques. nous avons également exploré la distribution géographique des établissements hospitaliers dans cette zone. Ces informations constituent une base solide pour les prochaines étapes de notre projet, en nous permettant de mieux comprendre le paysage sanitaire local et d'identifier les éventuelles lacunes ou opportunités d'amélioration.
CHAPITRE III : CONCEPTION ET MISE EN PLACE D'UN SIG WEB SANITAIRE
Introduction
Ce chapitre fournira une présentation des outils et des logiciels utilisés pendant la réalisation de ce projet. Ensuite, nous aborderons les analyses des besoins réalisées et nous élaborons des études conceptuelles, décrivant les différentes approches et les modèles envisagés pour la mise en œuvre réussie du projet.
I. Les logiciels et site Web utilisés
La phase de réalisation du projet nécessite une large gamme de logiciels et des outils qui sont illustrés dans le tableau suivant : [Tableau 4]
Visual Studio Code est un éditeur de code source gratuit et polyvalent développé par Microsoft, offrant une interface conviviale et de nombreuses fonctionnalités pour la programmation
XAMPP
PhpMyAdmin
XAMPP est un ensemble de logiciels open-source pour créer un environnement de développement web local
Enterprise Architect
PhpMyAdmin est un outil web open-source permettant de gérer facilement les bases de données MySQL via une interface graphique.
Enterprise Architect est un outil spécialisé dans la modélisation UML, pratique et complet pour les utilisateurs du domaine du développement d'applications. - 41 -
II. Langages de programmation utilisées
Pour atteindre les objectifs mentionnés précédemment et développer le SIG Web, on a utilisé les langages suivants :
CSS
Les feuilles de styles sont un langage utilisé pour mettre en forme le contenu HTML
PHP
PHP 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
JS est un langage de script léger, il permet de créer du contenu mis à jour de façon dynamique, d’animer des images et de contrôler le contenu multimédia
HTML
HTML est un langage de balisage utilisé pour structurer et donner du sens au contenu web.
III. Analyse des besoins
Afin d’attendre l'objectif précité au début de ce travail, il est essentiel d'identifier et de recenser les besoins qui y sont liés. Cela implique d'interroger les différents acteurs pour comprendre leurs pratiques et se familiariser avec elles Cette phase comprend donc l'analyse et la définition des besoins du système.
1. Analyse fonctionnelle
L'analyse fonctionnelle est une étape indispensable dans le cycle de vie d'un logiciel. Cette étape a pour objectif de traduire les besoins en solutions et de permettre l'atteinte des objectifs qui répondent aux attentes des utilisateurs
1.1 Identification des acteurs
Un acteur représente le rôle abstrait joué par des entités externes telles que les utilisateurs, les dispositifs, le matériel ou d'autres systèmes, qui interagissent directement avec le système étudié. Dans notre système, les acteurs sont les suivants :
Les utilisateurs : Ce sont les acteurs de notre application. Il existe 3 types d’utilisateurs : Admin, Agent hospitalier, agent SHOCRoom.
• L'administrateur (Admin) : Il est chargé d'ajouter et de gérer les établissements et les utilisateurs dans le système. Il a les droits d'administration pour effectuer ces tâches.
• L'agent hospitalier : Son rôle principal est de mettre à jour la disponibilité des lits dans son établissement hospitalier et des scanners. Il peut effectuer des modifications en temps réel pour refléter les changements de disponibilité et garantir la précision des informations.
• L'agent SHOCRoom : Cet acteur a pour responsabilité de visualiser les données concernant les services d’urgence et de coordonner les activités liées à la gestion des lits et des scanners. Il peut accéder aux informations nécessaires pour faciliter la prise de décisions et assurer une coordination.
1.2 Capture des besoins fonctionnels
La capture des besoins fonctionnels vise à identifier les fonctionnalités que le système doit réaliser. Elle permet de créer un modèle des besoins centré sur les activités des utilisateurs Voici les principaux besoins fonctionnels du système :
Gestion des utilisateurs :
• Le système doit permettre à l'administrateur d'ajouter, modifier et supprimer des utilisateurs.
• Les utilisateurs doivent pouvoir se connecter au système en utilisant leurs identifiants (N° Carte CIN)
Visualisation de la carte :
• Le système doit afficher une carte interactive montrant la répartition des hôpitaux dans la zone d'étude.
• Les utilisateurs doivent pouvoir zoomer, déplacer la carte et obtenir des informations détaillées sur chaque hôpital.
Consultation des informations hospitalières :
• Les utilisateurs doivent pouvoir consulter les informations concernant chaque hôpital, telles que le nombre de lits d'urgence disponibles et le fonctionnement du scanner.
• Les utilisateurs doivent pouvoir rechercher des hôpitaux par gouvernorat, délégation ou nom.
Mise à jour des informations hospitalières :
• Les agents hospitaliers doivent pouvoir mettre à jour les informations sur le nombre de lits d'urgence disponibles dans leur établissement
• Les agents hospitaliers doivent pouvoir signaler les problèmes ou les pannes concernant le fonctionnement du scanner.
Recherche dans la carte :
• Les utilisateurs doivent pouvoir effectuer des recherches dans la carte en spécifiant le gouvernorat, la délégation ou le nom de l'hôpital.
Gestion des couches d'information :
• Le système doit permettre à l'administrateur de gérer les couches d'information affichées sur la carte
2. Analyse non fonctionnelle
L'application doit être robuste et rapide, tout en répondant aux attentes des utilisateurs en termes de besoins non fonctionnels. Voici les exigences spécifiques:
La performance :
• Les actions de l'utilisateur doivent bénéficier d'un temps de réponse raisonnable, avec un délai d'attente inférieur à 10 secondes.
• L'application doit être disponible et fonctionnelle sur une période déterminée
• La robustesse de l'application se traduit par sa capacité à éviter les erreurs et à ne pas perdre ou altérer les données lorsqu'elle est soumise à des sollicitations.
Ergonomie et convivialité :
• L'application doit être conviviale et facile à utiliser. Les interfaces utilisateur doivent être intuitives, simples et ergonomiques.
• Les messages affichés à l'utilisateur doivent être clairs, concis et précis
Facilité d’utilisation :
• L’application dont on dispose sera une application simpliste et utilisable sans aucune complexité.
Extensibilité :
• L'application doit maintenir des performances constantes même en cas d'utilisation intensive.
• Lors du développement des différents modules de l'application, il faut prendre en compte la possibilité d'extension en ajoutant de nouvelles fonctionnalités. Par exemple, cela peut inclure tous les départements d'un hôpital ou l'ensemble du personnel hospitalier
Maintenabilité :
• Les modules de l'application doivent être bien documentés afin de faciliter leur maintenance
3. Spécification des besoins fonctionnels
Pour illustrer les besoins fonctionnels de notre application, nous utiliserons un diagramme de contexte statique et un diagramme de cas d'utilisation global. Ces diagrammes décrivent comment le système doit être utilisé et ce qu'il est censé accomplir. Les principaux éléments du diagramme de cas d'utilisation sont les acteurs, les cas d'utilisation et les sujets
4. Diagramme de contexte statique
Le diagramme de contexte statique permet de visualiser les relations entre les différents acteurs et le système lui-même Il met en évidence les interactions entre eux et montre comment ils interagissent avec le système
Dans notre cas, le diagramme est présenté conformément à ce qui est mentionné dans la figure [Figure 36]
5. Diagramme de cas d’utilisation globale
Ce diagramme est créé pour illustrer comment les différentes fonctionnalités sont interconnectées et montrer leurs acteurs internes et externes. Il représente une fonctionnalité spécifique dans un système La figure 37 représente le diagramme de cas d’utilisation globale de notre application web.
IV. Etude conceptuelle
1. Vue statique
Dans la phase d'étude conceptuelle, nous utilisons la modélisation UML (Unified
Modeling Language) pour représenter la structure du système sans tenir compte de son évolution dans le temps. Cette vue statique nous permet de comprendre les entités, les relations et les fonctionnalités du système Dans cette partie, nous allons présenter les différents diagrammes utilisés pour décrire cette vue statique.
2. Modélisation en UML
L'utilisation du Langage de Modélisation Unifié (UML) offre une approche universelle pour la modélisation de systèmes.
La modélisation en UML permet de visualiser et de représenter l'architecture d'un projet en identifiant les acteurs, les processus et les composants.
2.1 Diagrammes dans UML
L'UML utilise des diagrammes qui représentent les aspects statiques ou structurels d'un système, ainsi que des diagrammes comportementaux qui capturent les aspects dynamiques d'un système. En totale il existe 14 diagrammes en UML représentés dans la figure ci-dessous : [Figure38]
La description de la programmation orienté objet nécessite un travail conceptuel qui définit les classes, de leurs relations, les attributs, les opérations et les interfaces dans notre cas on a besoin des trois diagrammes suivants :
• Diagramme de classe
• Diagramme de cas d’utilisation.
• Diagramme de séquence.
Figure 38 : Diagramme dans l’UML2.2 Diagramme de classe
Le diagramme de classes est un élément essentiel de la modélisation orientée objet
Il se concentre sur la structure interne du système et offre une représentation abstraite des objets du système et comment ils interagissent entre eux dans différents scénarios Les éléments clés de cette vue statique sont les classes et leurs relations (associations, généralisations et autres dépendances). La figure suivante illustre le diagramme de classes de notre application :
2.3 Diagrammes des cas d’utilisation détaillés
Le diagramme détaillé de cas d'utilisation présente les interactions spécifiques entre un acteur et le système Il décrit les différentes fonctionnalités associées à une tâche spécifique de notre application, permettant ainsi l'exécution d'une requête formulée par un utilisateur donné. Ce diagramme met en évidence les actions et les étapes nécessaires pour accomplir une action spécifique, offrant ainsi une vue détaillée des interactions utilisateur-système
• Diagramme du cas d’utilisation « Gérer les utilisateurs »
La figure suivante illustre le processus de gestion des utilisateurs :
Description textuelle :
Dans le cas d'utilisation "Gérer des utilisateurs", l'acteur principal est l'administrateur. Avant de commencer, l'administrateur doit s'authentifier avec succès Une fois l'opération terminée, la gestion des agents a été effectuée avec succès.
Le scénario nominal implique que l'administrateur de l'application peut ajouter, modifier,
Figure 40 : Diagramme du cas d’utilisation « Gérer les utilisateurs »supprimer, consulter la table d'utilisateurs et effectuer des recherches Cependant, il existe également des scénarios alternatifs tels que des problèmes de connexion internet ou un serveur d'application hors service, qui peuvent entraver le processus de gestion des utilisateurs
Cas d'utilisation Gérer des utilisateurs
Acteur Administrateur
Pré-condition
Post-condition
Scénario nominal
L'authentification avec succès
La gestion des agents a été faite avec succès
L'administrateur de l'application doit soit ajouter un utilisateur, le modifier, le supprimer, consulter la table d'utilisateur et le rechercher
Scénario alternatif Problème de connexion internet Serveur d'application hors service
Tableau
• Diagramme du cas d’utilisation « Visualiser la carte »
La figure suivante illustre le processus de visualisation de la carte :
Description textuelle :
Le cas d'utilisation est "Visualiser la carte" avec l'acteur principal étant l'Agent SHOCRoom. Avant de commencer, deux pré-conditions doivent être remplies : une authentification réussie et le chargement réussi de la carte. Après l'exécution de ce cas d'utilisation, plusieurs post-conditions sont satisfaites, notamment l'affichage d'un fond standard, la disponibilité des lits, la fonctionnalité des scanners et la localisation de l'hôpital.
Dans le scénario nominal, l'utilisateur de l'application doit cliquer sur l'hôpital pour visualiser la carte et ses informations associées. Cependant, il existe également des scénarios alternatifs tels qu'un problème de connexion Internet ou un serveur d'application hors service, qui peuvent empêcher le chargement ou l'affichage correct de la carte.
Cas d'utilisation Visualiser la carte Acteur Agent SHOCRoom
• L'authentification avec succès
Pré-condition
• Succès de chargement de la carte.
• Un fond standard
• Les lits disponibles
Post-condition
• La fonctionnalité des scanners
• Localisation hôpital
Scénario nominal
Scénario alternatif
L’utilisateur de l'application doit cliquer sur l’hôpital
• Problème de connexion internet.
• Serveur d'application hors service.
• Diagramme du cas d’utilisation « Mettre à jour les informations hospitalières »
La figure suivante illustre le processus de la mise à jour des informations hospitalières :
Description textuelle :
Le cas d'utilisation est "Mettre à jour les informations hospitalières" avec l'acteur principal étant l'Agent hospitalier Avant de commencer, une pré-condition doit être remplie : une authentification réussie. Après l'exécution de ce cas d'utilisation, la post-condition est que le formulaire soit rempli avec succès.
Dans le scénario nominal, l'agent hospitalier doit remplir un formulaire avec les informations telles que le nombre de lits disponibles, l'état du scanner et la localisation de son établissement afin de mettre à jour les informations hospitalières
Ces informations permettent d'identifier et de maintenir à jour les détails de l'établissement hospitalier dans le système.
Cependant, il existe également des scénarios alternatifs tels qu'un problème de connexion Internet ou un serveur d'application hors service, qui peuvent entraver le processus de mise à jour des informations hospitalières en empêchant l'envoi
ou la réception des données
Cas d'utilisation
Acteur
Pré-condition
Post-condition
Scénario nominal
Mettre à jour les informations hospitalières
Agent hospitalier
L'authentification avec succès
Le formulaire est rempli avec succès
L'agent hospitalier doit remplir un formulaire avec le nombre de lits disponibles, l'état du scanner et sa localisation pour identifier son établissement
Problème de connexion internet
Scénario alternatif
• Serveur d'application hors service
Tableau 8 :Tableau descriptif du cas d’utilisation « Mettre à jour les informations hospitalières »
2.4 Diagramme de séquence
C’est un diagramme qui représente les interactions d’un scénario particulier Il montre comment les objets interagissent les uns avec les autres et dans quel ordre.
• Les scénarios requis de l'application
Le diagramme suivant [Figure 43], représente le flux d'interaction entre différents composants dans un système lorsqu'un agent "SHOCRoom" appuie sur le bouton "Update" dans une interface utilisateur.
Le diagramme ci-dessous illustre la phase de sélection [Figure 44]. L'agent SHOCRoom effectue une sélection d'un hôpital, et une fois celui-ci sélectionné, l'hôpital devient plus grand et plus visible, tandis que les données globales relatives à cet hôpital apparaissent dans une fenêtre contextuelle.
Conclusion
Dans ce chapitre, nous avons effectué une analyse approfondie de la phase centrale du projet, qui nous a permis de reconstituer l'apparence et le comportement du système. Nous avons débuté par l'analyse des besoins, suivie de la phase de conception, qui inclut la conception proprement dite Cette phase s'est déroulée en trois étapes : premièrement, l'établissement du diagramme de classes ; ensuite, l'élaboration de diagrammes de cas d'utilisation détaillés ; enfin, la création de diagrammes de séquences correspondant aux différents cas d'utilisation L'objectif principal de cette démarche était d'illustrer les diverses fonctionnalités de l'application.
CHAPITRE IV : APPROCHE METHODOLOGIQUE
POUR LA MISE EN PLACE D'UN SIG WEB
SANITAIRE
Introduction
Ce chapitre se concentre sur la phase de réalisation et d'implémentation de l'application. Le passage à cette étape nous a permis de concrétiser les différents composants décrits dans le chapitre précédent.
I. WebMapping
1. Définition
Le WebMapping, également connu sous le nom de cartographie en ligne, désigne la pratique de visualiser, partager et interagir avec des données géographiques sur Internet Cela permet aux utilisateurs d'accéder à des cartes interactives en ligne qui affichent des informations géospatiales, telles que des lieux, des routes, des frontières, des points d'intérêt, des données démographiques, etc. Les technologies de WebMapping utilisent généralement des services web et des langages de programmation spécifiques pour afficher les données géographiques et permettre aux utilisateurs de zoomer, faire des recherches, effectuer des analyses et effectuer d'autres actions interactives Le WebMapping est devenu un outil essentiel dans de nombreux domaines, y compris la planification urbaine, la gestion des ressources, la navigation, le tourisme et bien d'autres encore.
2. Fonctionnalités
Les fonctionnalités essentielles d'une application de WebMapping comprennent :
• Publier des cartes en ligne.
• Effectuer des traitements complexes comme le calcul des itinéraires
• Diffuser des cartes dans un navigateur.
• Cartographier des données géographiques à la demande selon le choix des couches et de l'emprise géographique
• Saisir de l'information pour alimenter la base de données dans le serveur.
• Accéder à des bases de données métiers et sémantiques.
La cartographie en ligne présente un moyen excellent de publier des cartes sur le web et de les rendre accessibles aux autres utilisateurs. La création d’une carte web est un processus très différent de la création d’une carte dans un SIG.
II. Objectifs de la création d’une application SIG-WEB Sanitaire
La figure suivante [Figure 45] représente de manière générale certains objectifs de notre application SIG-WEB sanitaire.
CENTRALISER LES DONNÉES GÉOGRAPHIQUES
Regrouper les informations géographiques des établissements de santé, en une seule plateforme.
FACILITER L'ACCÈS AUX INFORMATIONS
L'application SIG-WEB sanitaire vise à rendre les données géographiques accessibles à un large éventail d'utilisateurs, qu'il s'agisse de professionnels de la santé.
AMELIORER LA PLANIFICATION DES SERVICES DE SANTE
L'application SIG-WEB sanitaire permet d'analyser les données géographiques pour mieux comprendre la répartition des services de santé, identifier les zones de carence et évaluer les besoins en termes d'infrastructures médicales.
RENFORCER LA COORDINATION DES INTERVENTIONS D'URGENCE :
L'application SIG-WEB sanitaire facilite la coordination des interventions d'urgence en fournissant des informations géographiques en temps réel.
L'objectif de ce projet est de développer une application Géoportail SIG-Web pour le ministère de la Santé. L'étude conceptuelle qui a été réalisée dans le chapitre précédent est pour comprendre les besoins de l'application, les fonctionnalités attendues et les utilisateurs cibles. Cette étude a également identifié les principales entités et les relations entre elles, ce qui constitue une base solide pour la conception de la base de données.
LES UTILISATEURS DU SIG NE SONT PAS DES DEVELOPPEURS WEB CE QUI REPRESENTE UN DEFI DE PUBLIER UNE CARTE SUR LE WEB.
III. Méthodologie adoptée
1. Présentation de l’application
Le choix de l'application "HOSPIMAP" repose principalement sur sa capacité à améliorer la coordination et à faciliter la prise de décisions. J'ai décidé de la proposer aux professionnels de la santé afin de leur permettre de bénéficier d'un suivi efficace des services d'urgence en Tunisie.
La réalisation de cette application nécessite les étapes suivantes :
2. Importation des données
Dans le cadre de la réalisation de notre projet, nous avons utilisé un serveur web local pour mettre en place notre base de données et établir la connexion avec notre SIG Web. Pour activer l’Apache et MySQL, nous avons utilisé le logiciel XAMPP, qui nous a permis de réaliser la connexion avec PhpMyAdmin
Dans un deuxième temps, nous avons importé notre base de données qui a été présentée dans le deuxième chapitre après l'avoir exportée au format ods Cependant, nous avons importé uniquement les tables « hôpital » et « gouvernorat » dans PhpMyAdmin afin de les rendre accessibles et exploitables dans notre application
Pour les autres tables, telles que "disponibilité_hopital" et "utilisateur", nous les avons créées directement dans PhpMyAdmin en utilisant l'option "nouvelle table". La figure 48 présente la création de la table "utilisateur" dans la base de données
Après avoir importé notre base de données, un aperçu du concepteur de notre base est affiché dans phpMyAdmin. La figure ci-dessous présente cet aperçu.
3. Les différents profils utilisateurs
L'application se compose de trois profils différents, chacun avec ses propres caractéristiques, comme indiqué dans le diagramme de cas d'utilisation global Ces profils offrent des fonctionnalités spécifiques adaptées aux besoins des utilisateurs correspondants : administrateur, agent hospitalier et agent
SHOCRoom
3.1 Page login
La page fournie est une page de connexion pour une application web. Elle permet aux utilisateurs d'entrer leur numéro de carte d'identité nationale (CIN) pour accéder à leur profil correspondant à leur fonction. Cette page offre une interface conviviale avec un formulaire de connexion où les utilisateurs peuvent saisir leur CIN et leur mot de passe Une fois que les utilisateurs soumettent le formulaire, le code associé effectue une vérification dans une base de données pour authentifier les identifiants fournis
En fonction du type d'utilisateur (hopital, shocroom, admin) associé à ces identifiants, les utilisateurs sont redirigés automatiquement vers des pages spécifiques adaptées à leur rôle et à leurs autorisations
Pour ce cas, le code suivant a été utilisé :
if ($Type === 'hopital') {
header('Location: agent_hospitalier.php'); exit();
} elseif ($Type === 'shocroom') {
header('Location: agent_shocroom.php'); exit();
} elseif ($Type === 'admin') {
header('Location: admin.php'); exit();
} else {
header('Location: default.html'); exit();
la fonction effectue une redirection vers une page spécifique (agent_hospitalier.php, agent_shocroom.php, admin.php) ou vers une page par défaut (default html) si le type d'utilisateur est inconnu
Et le reste du code contient principalement la structure de la page et les éléments visuels tels que les images, les formulaires de connexion, les boutons, etc.
Voici la [Figure 51] représentant le code de la page login.php dans Visual Studio Code (VSCode):
3.2 Page agent hospitalier
Cette page se présente sous la forme d'un formulaire qui permet aux utilisateurs de saisir des informations concernant la disponibilité des lits et des scanners dans les hôpitaux. Pour commencer, j'ai créé un code qui affiche l'heure actuelle. Cela m'aide ensuite à connaître précisément l'heure et la date de la mise à jour. Voici le code utilisé :
<div id="date"></div> <! Affichage de la date >
<div id="heure"></div> <! Affichage de l'heure >
Ensuite, j'ai ajouté la connexion à la base de données et la récupération des gouvernorats et des hôpitaux. Ce bloc de code de la page assure la connexion à la table « gouvernorat » ainsi « hôpital ». Il utilise des requêtes SQL pour récupérer les données nécessaires, puis génère dynamiquement les options de sélection dans la liste déroulante du formulaire. Voici le code utilisé pour la table « gouvernorat » :
<div class="form-group">
<label for="gouvernorat">Gouvernorat :</label>
<select name="gouvernorat" id="gouvernorat" required>
<option value="">Sélectionner un gouvernorat</option>
<! Code PHP pour afficher les options de gouvernorat depuis la base de données >
<?php
// Connexion à la base de données
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "Hospimap";
$conn = new mysqli($servername, $username, $password, $dbname);
// Vérification de la connexion if ($conn->connect_error) { die("La connexion à la base de données a échoué : " . $conn->connect_error);
// Requête SQL pour récupérer les gouvernorats depuis la table gouvernorat
$sql = "SELECT * FROM gouvernorat";
$result = $conn->query($sql);
if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo '<option value="' . $row['code_gov']
'">' . $row['nom_gov'] . '</option>';
// Fermeture de la connexion à la base de données $conn->close(); ?>
Voici la [Figure 52] représentant ce bloc dans VSCode:
L'AGENT PEUT CHOISIR DIRECTEMENT LE GOUVERNORAT ET L’HÔPITAL SANS AVOIR À LE SAISIR MANUELLEMENT.
Le reste du code concerne la liaison entre les gouvernorats et les hôpitaux Ce bloc est responsable de la deuxième liste déroulante du formulaire, qui affiche les hôpitaux en fonction du gouvernorat sélectionné. Lorsque l'utilisateur choisit un gouvernorat, le code JavaScript (dans le fichier "script.js") réagit à l'événement de changement de sélection et effectue une requête pour récupérer les hôpitaux correspondants dans la base de données. Voici le lien javascript utilisé :
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
<script src="script.js"></script>
Il y a également le code de saisie des disponibilités des lits et des scanners. Ce bloc comprend les champs de saisie permettant à l'agent d'indiquer le nombre de lits et de scanners disponibles, qui seront ensuite sauvegardés directement dans la table "disponibilite_hopital". Le code correspondant est le suivant :
</select>
</div>
<div class="form-group">
<label for="disponibilite lits">Disponibilité des lits :</label>
<input type="number" name="disponibilite lits" id="disponibilite lits" required>
</div>
<div class="form-group">
<label for="disponibilite scanners">Disponibilité des scanners :</label>
<input type="number" name="disponibilite scanners" id="disponibilite scanners" required>
</div>
<button type="submit">Envoyer</button>
</form>
Voici la [Figure 53] représentant le code de la page agent_hospitalier.php dans VSCode:
3.3 Page administrateur
Cette page permet à l'administrateur de gérer les utilisateurs et les établissements en leur donnant la possibilité de supprimer, ajouter et modifier des informations.
De plus, l'administrateur est capable de visualiser les utilisateurs ainsi que tous les hôpitaux connectés à la base de données.
Pour commencer, j'ai connecté ma page à ma base de données SQL Ensuite, j'ai créé le code pour récupérer la liste des utilisateurs depuis la table "utilisateur",
ainsi que pour les hôpitaux. Voici le code correspondant pour le cas «utilisateur» :
$sql = "SELECT * FROM utilisateur";
$result = $conn->query($sql);
if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { echo "<tr><td>" .
$row['id_utilisateur'] . "</td><td>" .
$row['nom_utilisateur'] . "</td><td>" .
$row['type_utilisateur'] . "</td></tr>"; }
} else { echo "<tr><td colspan='3'>Aucun utilisateur trouvé.</td></tr>";
Ensuite, j'ai créé des blocs d'ajout, de modification et de suppression pour chaque table. Enfin, j'ai inclus la bibliothèque Bootstrap et appelé son fichier JavaScript correspondant dans le but de créer des comportements interactifs pour les boutons, les menus déroulants, les onglets, les modales, etc
Le lien utilisé est le suivant :
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstr ap.min.js"
La figure suivante présente le lien dans VSCode: [Figure 54]
3.4 Page agent SHOCRoom
Dans la page de l'agent SHOCRoom, la partie cartographique dynamique est la principale fonctionnalité Elle permet à l'agent de sélectionner un gouvernorat et un hôpital spécifique pour visualiser en temps réel la disponibilité des lits et des scanners.
J'ai réalisé ce projet en utilisant Power BI, un outil puissant de visualisation et de création de rapports interactifs
• Power BI
Microsoft Power BI est une solution d'analyse de données de Microsoft. Il permet de créer des visualisations de données personnalisées et interactives avec une interface suffisamment simple pour que les utilisateurs finaux créent leurs propres rapports et tableaux de bord
L'intégration de Power BI avec un SIG permet d'ajouter une dimension géospatiale aux données analysées et visualisées dans Power BI.
Cela signifie que vous pouvez importer des données géographiques à partir d'un SIG dans Power BI et les combiner avec d'autres sources de données.
• Les principaux éléments qui caractérisent Power BI : La figure suivante [Figure 56] représente ce que fait Power BI:
En utilisant ces fonctionnalités comme base, nous avons été en mesure de créer notre propre projet Power BI.
a. Connexion aux données
Grâce à Power BI, nous avons pu connecter notre base de données locale SQL en quelques clics. Il nous a simplement fallu sélectionner "Obtenir des données" et importer notre base de données de type MySQL [Figure57]
Ensuite, il m'a suffi de renseigner mon serveur et le nom de ma base de données pour établir la connexion Pour obtenir une connexion en temps réel, j'ai simplement activé la fonction DirectQuery.
Les figures ci-dessous [Figure 58 et Figure 59] montrent l'interface de saisie du serveur ainsi que l'activation de l'option DirectQuery :
b. Gestion des données
Avec Power BI, vous pouvez gérer vos données en termes de suppression, ajout et calculs Dans notre cas, notre base de données sauvegarde toutes les informations fournies par l'agent hospitalier.
Grâce à l'option "Transformer vos données", nous pouvons filtrer les données saisies par l'agent en fonction de la date actuelle ou d'une journée spécifique, afin de visualiser les statistiques
Et voici les autres fonctions de gestion de données dans la figure 61 ci-dessous :
c. Création de mesures
Dans notre cas, nous avons tenté de créer un calcul pourcentage des lits disponibles par rapport au total Le diagramme correspondant est représenté dans la figure suivante : [Figure 62]
De même, nous avons créé un diagramme représentant le nombre de lits et de scanners disponibles en fonction des hôpitaux, avec les informations de la dernière mise à jour de la date et de l'heure. [Figure 63]
d. Visualisations dynamiques:
Notre premier objectif est de créer une carte présentant la répartition de tous les hôpitaux en Tunisie En cliquant sur un hôpital spécifique, une table réactive en temps réel affiche les informations sur la disponibilité des lits et des scanners. Pour réaliser cela, nous avons utilisé la carte fournie par Microsoft Bing, disponible dans les options de Power BI Cette carte interagit avec le système de projection internationale WGS84.
Nous avons intégré notre base de données contenant les coordonnées des hôpitaux ainsi que leurs données facultatives Les résultats obtenus sont les suivants : [Figure 64] et [Figure 65].
Pour améliorer les fonctionnalités et la convivialité de mon projet, j'ai créé une carte des gouvernorats ainsi qu'une liste interconnectée de tous les gouvernorats. Voici le résultat final présenté dans Power BI, comme illustré dans la figure suivante : [Figure 66]
Conception et mise en place d’une application SIG-Web d’aide à la décision pour les urgences en Tunisie
Après avoir terminé mon projet sur Power BI, j'ai simplement incorporé le rapport pour le publier sur le web, comme illustré dans les figures suivantes :
[Figure 67] [Figure 68]
Et il ne nous reste plus qu'à insérer le lien web dans la page agent_shocroom.php.
[Figure 69]
Conclusion:
Dans ce chapitre, nous avons décrit les différentes étapes qui nous ont menés à la réalisation de notre application. Maintenant, il nous reste qu’à obtenir les résultats sur le web, ce que nous présenterons dans le chapitre suivant
