Filière Sience Mathématrique et Informatique

Projet Tutoré
Semestre S6

Mémoire

Gestion des infections

Présenté par :

Merizak jabrane Bouchrit Ismail

Encadrant : Pr. El Far Mohamed

Soutenu le 26/05/2022

Jury : Examinateur 1 : Pr. El Garouani Said

Examinateur 2 : Pr. Zinedine Ahmed

Encadrant : Pr. EL FAR Mohamed

Année Universitaire : 2021/2022

PAGE | 1
 Remerciements

Au nom d’Allah le tout miséricordieux,

On remercie encore toutes les personnes de près ou de loin qui, grâce à leur
collaboration, ont rendu possible la réalisation de ce mémoire PFE

On tient à exprimer notre profonde gratitude et nos sincères remerciements à notre

encadrant Monsieur EL FAR Mohamed, pour la confiance qu’il nous a accordé en acceptant
d’encadrer ce mémoire avec un grand intérêt et une grande compétence, pour ses
disponibilités, ses soutiens, ses conseils, pour la qualité de son suivi durant toute la période
de ce travail, et pour les encouragements qui nous ont permis de mener à bien ce travail.

On remercie également les membres de jury d’avoir pris le temps d’évaluer notre travail.

Ces remerciements vont tout au corps professoral et administratif de la Faculté des

Sciences Dhar EL Mehraz, spécialement ceux de département Informatique pour la richesse
et la qualité de leur enseignement et qui déploient de grands efforts pour assurer à leurs
étudiants une formation actualisée.

Merci à tous ceux qui ont participé de près ou de loin pour la réalisation de ce travail.

PAGE | 2
 Résumé

Le projet réalisé dans ce mémoire vise à développer une application web facilitant la prise
en charge des patients susceptibles d'avoir rencontré une infection dans les hôpitaux et
application mobile pour la consultation.

Cette application automatisera la procédure de traitement des dossiers médicaux et des

propositions thérapeutiques pour les patients infectés, en d’autres termes, elle permettra la
génération des décisions automatiques de prise en charge de ces patients qui doivent être
validées par la suite par les médecins.

En vue de structurer le travail et d’appliquer les acquis durant le cursus universitaire, nous
avons tout d’abord élaboré une étude conceptuelle et technique de l’application avant de
passer à son implémentation et son développement.

Le stage était une bonne occasion pour découvrir de nouvelles technologies. Le backend
de l'application est basé sur deux éléments essentiels : Laravel, Framework du PHP et SQL
afin de gérer la base de données, aussi pour l’application mobile en utilisant PHP et java.

Alors que Le Frontend se base sur CSS, Html, Tailwind, et d’autres techniques pour
rendre l'application ergonomique et professionnelle.

PAGE | 3
 Abstract
The project carried out in this dissertation aims to develop a web application facilitating
the care of patients likely to have encountered an infection in hospitals and a mobile
application for consultation.

This application will automate the procedure for processing medical records and
therapeutic proposals for infected patients, in other words, it will allow the generation of
automatic decisions for the management of these patients which must subsequently be
validated by doctors.

In order to structure the work and apply the knowledge acquired during the university
course, we first developed a conceptual and technical study of the application before moving
on to its implementation and development.

The internship was a good opportunity to discover new technologies. The backend of the
application is based on two essential elements: Laravel, Framework of PHP and SQL in order
to manage the database, also for the mobile application using PHP and java.

While The Frontend is based on CSS, Html, Tailwind, and other techniques to make the
application ergonomic and professional.

PAGE | 4
 Sommaire

Remerciements ............................................................................................................................. 2
Résumé .......................................................................................................................................... 3
Abstract ......................................................................................................................................... 4
Sommaire ...................................................................................................................................... 5
Liste des figures............................................................................................................................. 7
Liste des Tables ............................................................................................................................. 9
Liste des Acronymes .................................................................................................................... 10
Introduction Générale .................................................................................................................. 11
Chapitre 1: Analyse et cadre générale de projet.......................................................................... 12
1.1 introduction .......................................................................................................................... 12
1.2 Etude de l’Existant ............................................................................................................... 12
1.3 Étude de cahier des charges ................................................................................................ 12
1.3.1 Problématique ................................................................................................................ 12
1.3.2 Les objectifs ................................................................................................................... 13
1.3.3 Description générale de la solution Proposée .............................................................. 13
1.3.4 Les différents algorithmes de projet ............................................................................. 13
1.4 Analyse des besoins ............................................................................................................. 17
1.4.1 Les besoins fonctionnels ................................................................................................ 17
1.4.2 Les besoins techniques ................................................................................................. 18
1.5 Qualité de projet ..................................................................................................................22
1.5.1 Choix de cycle de vie ......................................................................................................22
1.5.2 Planification ...................................................................................................................22
1.6 Conclusion .......................................................................................................................... 24

PAGE | 5
Chapitre 2: Conception et modélisation .................................................................................... 25
2.1 introduction .........................................................................................................................25
2.2 Modélisation ........................................................................................................................25
2.2.1 Les acteurs : .................................................................................................................. 26
2.2.2 Diagramme de cas d’utilisation................................................................................... 26
2.2.3 Diagrammes de séquence ............................................................................................ 28
2.2.4 Diagramme de classe ................................................................................................... 36
2.3 Conclusion ........................................................................................................................... 37
Chapitre 3: Réalisation ................................................................................................................ 38
3.1 introduction ........................................................................................................................ 38
3.2 Application Web ................................................................................................................ 38
3.2.1 Authentification ........................................................................................................... 39
3.2.2 Après la connexion ....................................................................................................... 41
3.3 Application Desktop .......................................................................................................... 54
3.3.1 à propos ......................................................................................................................... 54
3.3.2 Installation ....................................................................................................................55
3.4 Application Mobile ............................................................................................................ 58
3.4.1 Authentification ........................................................................................................... 58
3.4.2 Après la connexion ...................................................................................................... 60
3.5 Conclusion ........................................................................................................................... 61
Conclusion Générale ................................................................................................................... 62
Webographie ............................................................................................................................... 63

PAGE | 6
 Liste des figures
Figure 1 : Laravel logo ........................................................................................................... 18

Figure 2: PHP logo ................................................................................................................ 18

Figure 3: HTML 5 logo ......................................................................................................... 19

Figure 4: CSS3 logo ............................................................................................................... 19

Figure 5: JavaScript Logo...................................................................................................... 19

Figure 6: Bootstrap logo ....................................................................................................... 19

Figure 7: Tailwind CSS logo ................................................................................................ 20

Figure 8: Chart.Js logo ......................................................................................................... 20

Figure 9: MySQL logo ......................................................................................................... 20

Figure 10 : JAVA logo ........................................................................................................... 20

Figure 11: Entreprise Architect logo ..................................................................................... 21

Figure 12: Visual Studio Code logo ...................................................................................... 21

Figure 13: Android Studio Logo ........................................................................................... 21

Figure 14: Electron Logo ....................................................................................................... 21

Figure 15 : Cycle de vie en V ................................................................................................22

Figure 16 : Diagramme de GANTT ..................................................................................... 24

Figure 17 : Diagramme de cas d’utilisation d’application web ...........................................27

Figure 18 : Diagramme de cas d’utilisation d’application mobile ..................................... 28

Figure 19 : séquence de la connexion ................................................................................. 30

Figure 20 : séquence de l’ajout d’un patient ....................................................................... 32

Figure 21 : séquence de la modification d’un patient ........................................................ 34

Figure 22 : séquence de la consultation des détails d’un patient ....................................... 35

PAGE | 7
Figure 23 : Diagramme de classe de l’application web ..................................................... 36

Figure 24 :page d’index ....................................................................................................... 38

Figure 25: l’interface des espaces ........................................................................................ 39

Figure 26: page de connexion ............................................................................................. 39

Figure 27 :page d’accueil secrétaire .................................................................................... 42

Figure 28: l'interface de l'ajout d'un patient ...................................................................... 43

Figure 29: modification d'un patient .................................................................................. 43

Figure 30: different notification.......................................................................................... 44

Figure 31: page d’accueil medecin....................................................................................... 45

Figure 32: Formulaire multi-step ....................................................................................... 45

Figure 33: toute la formulaire ............................................................................................. 47

Figure 34: Liste de patients ................................................................................................. 47

Figure 35: L’option de modifier .......................................................................................... 48

Figure 36: L’option de suppression..................................................................................... 48

Figure 37: L’option d’affiche les données du patient ........................................................ 50

Figure 38: imprimer Document PDF générer ..................................................................... 51

Figure 39: envoyer Document PDF générer ........................................................................ 51

Figure 40: L’interface statistiques .......................................................................................52

Figure 41: L'option 'avancer' ................................................................................................. 53

Figure 42: L’interface Reporting .......................................................................................... 53

Figure 43: mail reçu ............................................................................................................. 54

Figure 44: Sélection de la langue .........................................................................................55

Figure 45: Setup introduction à l'application .....................................................................55

PAGE | 8
Figure 46: Accord de licence............................................................................................... 56

Figure 47: Sélectionner le dossier d'application ................................................................ 56

Figure 48: créer une icône sur le bureau .............................................................................57

Figure 49: Installation ..........................................................................................................57

Figure 50: Fin d’installation. .............................................................................................. 58

Figure 51: L’interface de connexion .................................................................................... 59

Figure 52: Liste de patients traité ...................................................................................... 60

Figure 53: recherche ............................................................................................................ 60

Figure 54: Détails du patient .............................................................................................. 61

Liste des Tables

Tableau 1: la liste des acronymes dans le projet ................................................................. 10

Tableau 2: Exposition de Patient ......................................................................................... 14

Tableau 3: Intervention ........................................................................................................ 15

Tableau 4: Infection du site opératoire ............................................................................... 15

Tableau 5: Analyse Bioloqique ............................................................................................. 16

Tableau 6: Temperature ....................................................................................................... 16

Tableau 7: planification........................................................................................................ 23

Tableau 8 : table des acteurs ............................................................................................... 26

Tableau 9 : Scénario de l’authentification ......................................................................... 29

Tableau 10 : Scénario de l’ajout d’un patient ...................................................................... 31

Tableau 11 : Scénario de la modification d’un patient ........................................................ 33

PAGE | 9
 Liste des Acronymes

Abréviation Désignation

HTML HyperText Markup Language

PHP HyperText Preprocessor

CSS Cascading Style Sheets

SQL Structured Query Language

SGBD Système de Gestion de Base de

Données

MVC Model View Controller

UML Unified Modeling Language

POO Programmation Orientée Objet

Tableau 1: la liste des acronymes dans le projet

PAGE | 10
 Introduction Générale
Les infections contractées pendant la prestation de soins, plus précisément appelées
infections associées aux soins, sont un important problème de santé publique dans le monde.
Selon les estimations, de 5 % à 10 % des patients admis dans les hôpitaux pour soins aigus
dans les pays développés contractent une ou plusieurs infection(s). Dans les pays en
développement, le risque d’infection est de 2 à 20 fois plus élevé et la proportion de patients
touchés peut excéder 25 %. Le présent document vise à attirer l'attention du Comité régional
sur le problème de santé publique, jusqu’ici non reconnu, des infections associées aux soins
dans la Région et à démontrer qu’une part considérable de la charge de morbidité attribuable
à ces infections peut être évitée par des interventions peu coûteuses. Il propose un ensemble
d’actions pouvant être mises en œuvre facilement et rapidement dans les pays sans impliquer
de ressources importantes.

Dans ce contexte vienne l’importance de notre projet intitulé INFECTION, qui a pour le
but de réaliser une application avec une interface web simple pour la gestion des infections,
afin de connaître les patients infectés et les facteurs de ses infections, Le présent rapport
synthétise tout le travail que nous avons effectué, il est composé de :

Le premier chapitre : présente le cadre général du projet en décrivant l’organisme

d’accueil, la problématique du sujet, et la solution proposée, ainsi que les algorithmes du
projet.

Le deuxième chapitre : présente l'analyse fonctionnelle et techniques du projet, la

conception et les différents diagrammes d’UML utilisés.

Le troisième chapitre : présente les différentes interfaces de l’application.

Nous terminons par une conclusion et par les perspectives du projet.

PAGE | 11
 Chapitre 1: Analyse et cadre générale de projet

1.1 INTRODUCTION

Dans ce chapitre, nous avons présenté l’organisme d’accueil qui a ouvert ses portes pour
nous accueillir au sein de sa direction centrale informatique ; et Il nous a permis de découvrir
les problèmes rencontrés qui ont donné naissance à notre sujet de stage.

1.2 ETUDE DE L’EXISTANT

L'étude de l'existant permet de déterminer les points faibles et les points forts d'un
produit actuel pour pouvoir déterminer les besoins nécessaires, en vue d'en prendre en
considération lors de la conception et la réalisation de l’application de gestion des
infections. Dans notre cas et après plusieurs recherches nous n'avons trouvé aucune
application qui gère les infections associées aux soins. Ensuite, nous formulerons une
solution de la problématique.

1.3 ÉTUDE DE CAHIER DES CHARGES

1.3.1 Problématique

Les infections associées aux soins représentent aujourd’hui un problème majeur de

santé publique à l’échelle mondiale, étant responsables d’une lourde morbidité mais
également d’une létalité non négligeable.

La source de l’infection peut être un agent infectieux ou un germe et fait référence à un

virus, une bactérie ou un autre microbe.

Dans les établissements de santé, les germes se trouvent dans de nombreux endroits.
Les gens sont une source de germes, notamment :

❖ Les patients
❖ Les travailleurs du domaine de la santé
❖ Visiteurs et membres du ménage

PAGE | 12
1.3.2 Les objectifs

Créer une application intelligente pour la gestion des infections dédiée aux hôpitaux et
les parties concernées tel que les secrétaires et les médecins afin de :

❖ Ajouter un patient et saisir ses informations personnelles et les enregistrer.

❖ Remplir son formulaire par les détails.
❖ Afficher si le patient est infecté ou non
❖ Déterminer les facteurs de l’infection si le patient est infecté
❖ Donner les statistiques pour tous les patients, les facteurs de l’infection et les
services.
❖ Représenter ces données et statistiques par des graphes.

1.3.3 Description générale de la solution Proposée

Notre solution consiste á réaliser trois applications, une application mobile pour
consulter les patients et une application web et une autre application desktop pour gérer les
patients, services … :

Application WEB et DESKTOP: destiné pour les secrétaires de l’ hôpital est les
médecins, á partir de quelle le secrétaire peut ajouter un patient ainsi que le médecin peut
remplir les données du patient et le consulter pour savoir est ce qu’il est infecté ou non. Le
médecin peut aussi voir les statistiques qui seront afficher sous forme des graphes plus
lisibles et télécharger un document PDF pour chaque patient qui contient ses informations.

Application Mobile : destiné à chaque médecin, avec laquelle il peut consulter les
patient infectés et les non infectés et voir leurs informations et les facteurs de l’infection si
le patient est infecté.

1.3.4 Les différents algorithmes de projet

Dans cette application il y a 4 facteurs de l’infection, suite à l’insertion d’un nouveau

patient, l’application génère automatiquement un ou plusieurs facteurs de l’infection, voici
un aperçu des données et des algorithmes :

PAGE | 13
Exposition de patient :

Intervention Chirurgical Oui Non

Sonde Urinaire Oui Non

Catdéter veineux _______

Antibiotique : Oui Non

Si oui

Prescrit Prophylaxie Traitement

autre/inconnu

Date de début __/__/____

Durée _______

Pathologie associées: _______

Le type _______

Tableau 2: Exposition de Patient

Intervention:

Date de l'intervention __/__/____

Classe de la plaie _______

Propre Score ASA _______

PAGE | 14
 Durée de l'intervention _______

Urgence Oui Non

Programmée Oui Non

Tableau 3: Intervention

Infection du Site opératoire :

Infection du Site opératoire Oui Non

Date de l'infection __/__/____

Site infectieux Supérficiel Profond

organe /espace

Micro organisme 1 _______

Micro organisme 2 _______

Date de dernier contact __/__/____

Tableau 4: Infection du site opératoire

Analyse biologique:

NFS Oui Non

TP _______

VS _______

PAGE | 15
 Glycémie _______

Acide Urique _______

CRP _______

La tension artérielle _______

La respiration _______

Pulsation _______

Saturation _______

Examens radiologique _______

Tableau 5: Analyse Bioloqique

Température :

Infection Temperature Oui Non

Degree _______

Duree _______

Tableau 6: Temperature

Le patient sera considéré infecté si :

❖ Infection du Block: Nombre de jours de service est supérieur à 5jours

❖ Infection Antibiotique : Le médecin donne au patient un antibiotique d’une
durée supérieur à 10 jours
❖ Infection CRP: Le taux de CRP dépasse 6mg/L
❖ Infection température : La température dépasse 37.5 °C

PAGE | 16
1.4 ANALYSE DES BESOINS

Dans la phase d’analyse, on cherche d’abord à bien comprendre et à décrire de façon

précise les besoins des utilisateurs de l’application. Que souhaitent-ils faire avec cette
application ? Quelles fonctionnalités veulent-ils ? Pour quel usage ? Comment l’action
devrait-elle fonctionner ? C’est ce qu’on appelle « l’analyse des besoins ». Il y a deux types
de besoins :

1.4.1 Les besoins fonctionnels

La solution proposée consiste á réaliser trois applications Web, Desktop et mobile

accessible aux différents intervenants via une session personnelle, et par laquelle le médecin
devrait cocher les options liées au patient :

1-Application Web et Desktop :

Destinées au système médical, á partir desquelles ils peuvent remplir les informations
nécessaires du patient et les stocker et prédire la source de l'infection, les services offerts
par ces applications :

Pour l’espace secrétaire :

❖ L’authentification de secrétaire.

❖ Ajouter les patients.

❖ Modifier ou supprimer les coordonnes des patients.

❖ Recherche de patient.
Pour l’espace médecin :
❖ L’authentification de médecin.

❖ Provision de donnés avec différent paramètres.

❖ Consulter les patients.

❖ Voir les statistiques.
❖ Personnaliser les graphes.

PAGE | 17
 ❖ Suppression de patient.
❖ Recherche de patient.
❖ Imprimer les données de patient

2-Application Mobile :

Destiné aux médecins, à partir de laquelle ils peuvent consulter rapidement les
coordonnées du patient, les services offerts par cette application :

❖ L’authentification de Médecin.

❖ Consulte les données des patients infectés et non infectés.

❖ Recherche des patients.

1.4.2 Les besoins techniques

Les besoins techniques sont les besoins nécessaires pour l’environnement de

développement de l’application, et de même les différentes techniques Web utilisées soient
de backend ou de frontend.

Laravel :

Laravel est un Framework web open-source écrit en PHP respectant

le principe modèle-vue-contrôleur et entièrement développé
en programmation orientée objet.
Laravel est distribué sous licence MIT, avec ses sources hébergées
sur GitHub.
Figure 1 : Laravel
logo

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é
Figure 2: PHP facilement au HTML. PHP est un module supporté par le serveur web
logo
Apache, le plus répandu dans le monde.

PAGE | 18
 HTML:

L’HyperText Markup Language, généralement abrégé HTML, C’est un

langage permettant d’écrire de l’hypertexte, et c’est le langage de balisage
Figure 3: conçu pour représenter les pages web.
HTML 5 logo

CSS :

Cascading Style Sheets , les feuilles de style en cascade forment

un langage informatique qui décrit la présentation des
documents HTML et XML. Les standards définissant CSS sont publiés par
Figure 4:
CSS3 logo le World Wide Web Consortium (W3C).

JavaScript :

JavaScript est un langage de programmation de scripts

principalement employé dans les pages web interactives mais aussi pour les
Figure 5:
JavaScript Logo serveurs.

BOOTSTRAP :

C’est un Framework de CSS destiné aux applications web. Développé par

Twitter et distribué sous licence Apache 2, c'est un outil à considérer lors du
Figure 6:
développement d'applications web.
Bootstrap logo

PAGE | 19
 Tailwind CSS:

Tailwind CSS est un framework permettant aux développeurs de

personnaliser totalement et simplement le design de leur application ou de
Figure 7: leur site web. Avec ce framework CSS, il est possible de créer un design
Tailwind CSS
logo d’interface au sein même du fichier HTML

Chart.JS :

Chart.js est une bibliothèque JavaScript open source gratuite pour la

Figure 8: visualisation de données.
Chart.Js logo

MySQL :

MySQL est un système de gestion de base de données (SGBD). Selon le type

d'application, sa licence est libre ou propriétaire.
Figure 9:
MySQL logo

JAVA:

Java est un langage de programmation inspiré du langage C++, avec un

modèle de programmation orienté objet. Le Java permet de créer des
applications interactives avec l’utilisateur
Figure 10 :
JAVA logo

PAGE | 20
 Entreprise Architect :

C’est un logiciel de modélisation et de conception UML, édité par la société

australienne Sparx Systems. Couvrant, par ses fonctionnalités, l'ensemble
des étapes du cycle de conception d'application, il est l'un des logiciels de
Figure 11:
Entreprise Architect conception et de modélisation les plus reconnus.
logo

Visual Studio Code :

Visual Studio Code est un éditeur de code extensible développé par

Microsoft pour Windows, Linux et MacOs.
Figure 12: Visual
Studio Code logo

Android Studio :

Android Studio est un environnement de développement des applications

Android, est un des plus puissants éditeurs de code
Figure 13: Android
Studio Logo

Electron :

Electron (anciennement connu sous le nom d'Atom Shell) est un

framework logiciel gratuit et open source développé et maintenu par
GitHub. Il permet le développement d'applications graphiques de bureau
Figure 14:
utilisant les technologies Web : il combine le moteur de rendu Chromium
Electron Logo
et le runtime Node.js.

PAGE | 21
1.5 QUALITE DE PROJET
1.5.1 Choix de cycle de vie

Nous avons choisi le cycle en V. Car ce modèle est caractérisé par le parallélisme, dans
ce modèle verticalement nous trouvons les étapes du développement et horizontalement la
vérification

Figure 15 : Cycle de vie en V

1.5.2 Planification

Pour mieux planifier, analyser et contrôler le bon déroulement de la réalisation du

projet, ainsi qu’assurer une bonne qualité du produit dans des délais fixés et une conformité
entre ce qui est définie et ce qui est obtenu, nous avons utilisé les notions de la gestion des
projets informatiques et le respect des normes qualité. Dans ce cadre nous allons présenter
le diagramme de GANTT

PAGE | 22
Tableau 7: planification

PAGE | 23
 Figure 16 : Diagramme de GANTT

1.6 CONCLUSION

Ce chapitre avait pour but de donner une vision globale sur le projet, sa problématique
ainsi que son cadre général. Ce chapitre qui suit est fondé sur la définition et l’exploitation
des principaux concepts qui concerne La gestion des infection associés aux soins,
afin de bien pouvoir comprendre les facteurs de l’infection, algorithmes et langage de
programmation et les outils pour réaliser ce projet.

PAGE | 24
 Chapitre 2: Conception et modélisation

2.1 INTRODUCTION

Nous présentons, dans ce chapitre, les diagrammes qui schématisent les fonctionnalités
offertes par notre solution ainsi que leurs déroulements. Loin du code, cette représentation
est un moyen de communication entre le maître d’ouvrage et le développeur

2.2 MODELISATION

UML, c’est l’acronyme anglais pour « Unified Modeling Language ». On le 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.

UML nous fournit donc des diagrammes pour représenter le logiciel à développer : son
fonctionnement, sa mise en route, les actions susceptibles d’être effectuées par le logiciel,
etc.

UML est une démarche qui se base sur une approche objet. Cette approche s’appuie sur
4 principes fondamentaux. C’est une démarche :

❖ Itérative et incrémentale.
❖ Guidée par les besoins du client et des utilisateurs.
❖ Centrée sur l’architecture du logiciel.
❖ Qui décrit les actions et les informations dans une seule entité.

Réaliser ces diagrammes revient donc à modéliser les besoins et les solutions
fonctionnelles et techniques de l’application à développer.

PAGE | 25
2.2.1 Les acteurs :

Identification des acteurs et leur rôle :

Acteur Rôle
Médecin ❖ Remplir la forme médicale
❖ Modifier les informations de
patients
❖ Supprimer patient
❖ Rechercher
❖ Imprimer les informations
❖ Inspecter les informations
❖ Consulter les graph
Secrétaire ❖ Ajouter de patients
❖ Modifier les informations
personnelles de patients
❖ Rechercher
Tableau 8 : table des acteurs

2.2.2 Diagramme de cas d’utilisation

C’est un diagramme fonctionnel. Il montre les interactions fonctionnelles des acteurs et

du système d’étude. Il délimite précisément le système, décrit ce que fera le système sans
spécifier comment. Il exprime les services (use cases) offert par le système aux utilisateurs
(actors).

PAGE | 26
2.2.2.1 Application web :

Figure 17 : Diagramme de cas d’utilisation d’application web

PAGE | 27
2.2.2.2 Application mobile :

Figure 18 : Diagramme de cas d’utilisation d’application mobile

2.2.3 Diagrammes de séquence

C’est un diagramme dynamique. Il représente les échanges de messages entre les

acteurs et le système ou entre des parties durant une séquence temporelle d’actions appelée
scénario. Il permet de représenter la dynamique d’un use case ou la collaboration d’un
ensemble d’objets internes au système. Il montre la séquence, représentation verticale
chronologique, des messages passés entre blocs au sein d’une interaction.

PAGE | 28
2.2.3.1 Connexion

Acteur Médecin

Description Cette fonctionnalité permet au

médecin ou secretaire de s’authentifier
pour accéder à l’application.

Préconditions Post-conditions

Aucune Accès à la vue d’accueil

Scénario normal

❖ Le médecin ou secrétaire remplit les champs et clique sur ‘se connecter’.

❖ Le système vérifie si le médecin a rempli tous les champs.
❖ Le système vérifie si les informations saisies sont correctes.
❖ La session du médecin ou secrétaire commence et la page d’accueil s’ouvre

Scénario alternatif 1

❖ Le médecin ou secrétaire remplit les champs et clique sur ‘se connecter’.

❖ Le système détecte que le médecin a oublié de remplir un champ ou plus.
❖ Le système réaffiche le formulaire avec des alertes d’erreur à côté des champs non
remplis.

Scénario alternatif 2

❖ Le médecin ou secrétaire remplit les champs et clique sur ‘se connecter’.

❖ Le système vérifie si le médecin a rempli tous les champs.
❖ Le système trouve que le mot de passe ou l’email sont incorrectes.
❖ Le système affiche une erreur indiquant au médecin que le mot de passe ou l’email sont
incorrectes.

Tableau 9 : Scénario de l’authentification

PAGE | 29
Figure 19 : séquence de la connexion

PAGE | 30
2.2.3.2 Ajouter un patient

Acteur Résident

Description Cette fonctionnalité permet au secrétaire

d’ajouter un nouveau dossier pour un patient.

Préconditions Post-conditions

Authentification Ajout du dossier réussi

Scénario normal

❖ La secrétaire insère toutes les informations du dossier de patient et valide l’insertion.

❖ Le système vérifie la validité des informations saisies.
❖ Le système ajoute le dossier et redirige le résident vers la vue de l’affichage de ce dossier.

Scénario alternatif

❖ La secrétaire insère toutes les informations du dossier de patient et valide l’insertion.

❖ Le système vérifie la validité des informations saisies.
❖ Le système indique dans la même vue une erreur des champs incomplets.

Tableau 10 : Scénario de l’ajout d’un patient

PAGE | 31
Figure 20 : séquence de l’ajout d’un patient

PAGE | 32
2.2.3.3 Modifier un patient

Acteur Résident

Description Ce service permet au médecin résident de

modifier un dossier pour un patient.

Préconditions Post-conditions

La vérification secrétaire réussi Modification du dossier réussi

Scénario normal

❖ La secrétaire modifie les informations du dossier de patient et valide la modification.

❖ Le système vérifie la validité des informations saisies, et l’état de dossier.
❖ Le système modifie le dossier et redirige le résident vers la vue de l’affichage de dossier.

Scénario alternatif

❖ La secrétaire modifie les informations du dossier de patient et valide la modification.

❖ Le système vérifie la validité des informations saisies.
❖ Le système indique dans la même vue une erreur des champs incomplets.

Tableau 11 : Scénario de la modification d’un patient

PAGE | 33
Figure 21 : séquence de la modification d’un patient

PAGE | 34
2.2.3.4 Application mobile : consultation

Figure 22 : séquence de la consultation des détails d’un patient

PAGE | 35
2.2.4 Diagramme de classe

C’est une représentation utilisée dans la phase de conception d’une application pour
présenter les classes entités et les différentes relations entre celles-ci. Une classe est
constituée d’un ensemble de fonctions (méthodes) et de données (attributs). Donc voilà le
diagramme de classes qu’on a adopté pour la conception de notre application :

Figure 23 : Diagramme de classe de l’application web

PAGE | 36
2.3 CONCLUSION

Au cours de ce chapitre, nous avons conçu les différents composants de notre système.
Le prochain chapitre concerne la réalisation de notre modèle.

PAGE | 37
 Chapitre 3: Réalisation

3.1 INTRODUCTION

La phase de réalisation est une étape très importante dans le cycle de vie de nos
applications, cette phase permet de concrétiser notre projet par le développement des
interfaces et par des réalisations concrètes des fonctionnalités du système. Pour réaliser ces
applications nous avons en recourt à plusieurs outils de développement.

Dans cette dernière partie on va présenter le résultat final de notre application.

❖ La page d'index du projet où vous pouvez accéder à l'application Web ou

télécharger les autres applications (‘/index’).

Figure 24 :page d’index

3.2 APPLICATION WEB

❖ L’interface des espaces est la première interface de l’application où l'utilisateur

choisit où aller.

PAGE | 38
 Figure 25: l’interface des espaces

3.2.1 Authentification

❖ L’interface de l’authentification est apparue après que l'utilisateur a choisi

l'espace où aller que ce soit médecin ou secrétaire ne peut accéder aux pages
principales de l’application qu’après cette étape.

Figure 26: page de connexion

PAGE | 39
❖ Si le mot de passe ou nom d’utilisateur est incorrecte, une erreur va être affichée.

❖ Si le mot de passe ou nom d’utilisateur ne contient pas au moins 5 caractères, une

erreur va être affichée.

❖ Si les champs de mot de passe ou nom d’utilisateur ne contient est vide, une
erreur va être affichée.

PAGE | 40
 ❖ Si vous avez essayé d'accéder à l'un des espaces depuis l’URL, une erreur va être
affichée :

3.2.2 Après la connexion

❖ Si toutes les informations sont bien vérifiées, la page d’accueil s’affiche

normalement.

PAGE | 41
3.2.2.1 Secrétaire

❖ L’interface d’accueil du secrétaire contient le bouton pour ajouter les patients et

table de patients déjà ajouté contient des boutons pour modifier ou supprimer un
patient et une barre de recherche.

Figure 27 :page d’accueil secrétaire

PAGE | 42
❖ Formulaire pour ajouter un patient.

Figure 28: l'interface de l'ajout d'un patient

❖ Formulaire pour modifier les données d'un patient avec les anciennes données
sélectionnées.

Figure 29: modification d'un patient

PAGE | 43
 ❖ Notification différente à chaque opération.

Figure 30: different notification

3.2.2.2 Médecin

❖ La page d’accueil de médecin contient plus de fonctionnalités que secrétaire,

contient des boutons pour faciliter l’accès aux interfaces et aux icônes
statistiques, dans lesquels le système affiche le nombre de patients, le nombre de
patients complétés, incomplets et infectés.
❖ Barre graphique des mois où le patient est admis.
❖ Pourcentage de patients dans chaque service.

PAGE | 44
 Figure 31: page d’accueil medecin

❖ Table de patients incomplètes.

❖ Un formulaire en plusieurs étapes à remplir pour les patients incomplets, en

général chaque formulaire se caractérise par un ensemble de données différentes
aux autres formulaires.

Figure 32: Formulaire multi-step

PAGE | 45
PAGE | 46
 Figure 33: toute la formulaire

❖ Liste de patients avec états de chaque patient (infecté, non infecté) avec les
options d’afficher les données du patient, imprimer ces données, envoyer,
supprimer et modifier.

Figure 34: Liste de patients

❖ Liste de patients infectés.

PAGE | 47
❖ L’option de modifier les données d'un patient avec les anciennes données
sélectionnées.

Figure 35: L’option de modifier

❖ L’option de suppression d’un patient avec la confirmation.

Figure 36: L’option de suppression

PAGE | 48
❖ L’option d’affiche les données du patient avec le type d'infection prédit par
l'application.

PAGE | 49
 Figure 37: L’option d’affiche les données du patient

❖ L’option d’imprimer Document PDF générer par application.

PAGE | 50
 Figure 38: imprimer Document PDF générer

❖ L’option d’envoyer Document PDF générer par application.

Figure 39: envoyer Document PDF générer

❖ L’interface statistiques contient graphique de type ‘radar’ indiquant le nombre de

patients dans chaque service et graphique à barres horizontales indiquant le

PAGE | 51
nombre de chaque sexe dans le service et graphique de type ‘doughnut’ indiquant
le nombre de patients ont contracté le type d’infection.

Figure 40: L’interface statistiques

PAGE | 52
❖ Un bouton ‘avancer’ et un bouton ‘retour’ apparaissent quand on clique sur
‘avancer’, montre tous les services lorsque nous choisissons un service, un
graphique apparaît avec le nombre d'infectés et non infectés.

Figure 41: L'option 'avancer'

❖ L’interface « Reporting » contient graphique de type ‘bar’ qui est paramétrique,

son paramètre est age, homme, femme, infectés indiquant le nombre de patients
dans chaque, avec un option pour envoyer cette données en e-mail, le mail reçu
contient les données choisies au format PDF et un lien vers le graphique.

Figure 42: L’interface Reporting

PAGE | 53
 Figure 43: mail reçu

3.3 APPLICATION DESKTOP

3.3.1 à propos

Application Desktop est créé avec nativefier qui utilise Electron et Chromium, nativefier
installé par npm (ligne de commande Node.js)

❖ Nativefier est un outil en ligne de commande qui vous permet de créer

facilement une application de bureau pour n'importe quel site Web avec
une configuration succincte et minimale. Les applications sont encapsulées
par Electron dans un exécutable du système d'exploitation (.app, .exe, etc.) pour
une utilisation sous Windows, OSX et Linux.

Fichier setup créée avec InstallForge.

❖ InstallForge est un logiciel gratuit développé pour Windows pour créer des
routines d'installation et des assistants de mise à jour. Il est exploité
exclusivement via une interface utilisateur graphique ; les scripts ne sont pas
utilisés.

PAGE | 54
3.3.2 Installation

❖ Sélection de la langue.

Figure 44: Sélection de la langue

❖ Setup introduction à l'application.

Figure 45: Setup introduction à l'application

❖ Accord de licence.

PAGE | 55
 Figure 46: Accord de licence

❖ Sélectionner le dossier d'application.

Figure 47: Sélectionner le dossier d'application

❖ Sélectionner des tâches supplémentaires (créer une icône sur le bureau…).

PAGE | 56
 Figure 48: créer une icône sur le bureau

❖ Installation.

Figure 49: Installation

❖ Fin d’installation.

PAGE | 57
 Figure 50: Fin d’installation.

3.4 APPLICATION MOBILE

3.4.1 Authentification

❖ L’interface de connexion.
❖ Si le mot de passe ou nom d’utilisateur est incorrecte, un message d’erreur va être
affichée.

PAGE | 58
Figure 51: L’interface de connexion

PAGE | 59
3.4.2 Après la connexion

❖ Liste de patients traité.

Figure 52: Liste de patients traité

❖ Recherche.

Figure 53: recherche

PAGE | 60
 ❖ Détails du patient.

Figure 54: Détails du patient

3.5 CONCLUSION

Dans ce chapitre nous avons présenté en détails le développement de notre système,

PAGE | 61
 Conclusion Générale

En effet, ce projet était une étape très importante dans notre cycle de formation vu
qu’il était une occasion très intéressante et bénéfique pour savoir comment appliquer sur le
plan pratique des connaissances théoriques déjà acquises et aussi il nous a permis d’acquérir
de nouvelles connaissances techniques.

Afin de réaliser ce projet, nous avons créé un plan à suivre tout au long de ce projet
pour nous aider à organiser notre temps limité et à profiter au maximum du temps disponible.

Au même temps, nous avons appris l’importance de la recherche et de la

communication pour l’obtention des bonnes informations. Ainsi que l’importance de la
gestion du temps et de la planification des tâches pour le bon déroulement des travaux. Et
grâce à un environnement favorable pour le travail et la coordination d’efforts, nous avons pu
réaliser le projet demandé dans le cahier de charge et l’enrichi avec autre fonctionnalités afin
de le rendre plus efficace, et adorable.

C’est vrai que notre projet couvre tous les besoins du cahier de charge mais nous
espérons aborder des améliorations dans un futur proche pour évoluer le rendement de
l’application en ajoutant différentes fonctions et travailler avec d'autres frameworks comme
Angular ou Vue.js pour faire du site Web une « single-page », afin qu'il devienne plus rapide
et plus convivial, et améliorer le côté sécurité avec d'autres outils.

Les résultats obtenus sont prometteurs et cela nous encourage à continuer à travailler sur
ce projet.

PAGE | 62
 Webographie

❖ Forums:

# Stack overflow: https://stackoverflow.com/

# GitHub: https://github.com/

# Laracasts-Discuss: https://laracasts.com/discuss/

❖ Websites:

#Laracasts: https://laracasts.com

# W3schools: https://www.w3schools.com/

# Bootsnipp: https://bootsnipp.com/

❖ Fonts :

# Google Fonts : https://fonts.google.com/

#IonIcons: https://ionic.io/ionicons

# Font Awesome: https://fontawesome.com/

❖ YouTube Playlists:

# Laravel Crash Course:

https://www.youtube.com/watch?v=MFh0Fd7BsjE

#Tutorial CRUD Search & Pagination Laravel 9 Bootstrap 5:

https://www.youtube.com/watch?v=kDjD_1fg3xo

# Android App Development in Java All-in-One Tutorial Series:

https://www.youtube.com/watch?v=tZvjSl9dswg&t=61s

PAGE | 63