Université Hassan II de Casablanca

Faculté des Sciences Ain Chock

PROJET DE FIN D’ETUDES

pour obtenir la licence en

INFORMATIQUE MEDICALE

Intitulé
_____________________________________________________________________________________________________________________

Conception et réalisation d’une application Web pour la

gestion d’un cabinet de pédiatrie
______________________________________________________________________________________________________________________

Présenté et soutenu par

El ASRI Mohamed

BOUICHIDAR Amine

Le : 19-07-2022

Encadré par
Pr. Seddiq EL KASMI ALAOUI

Composition du jury

Pr. Brahim RAOUYANE Professeur à la Faculté des Sciences Ain-chock

Pr. Samia BENABDELLAH CHAOUNI Professeur à la Faculté des Sciences Ain-chock
Pr. Seddiq EL KASMI ALAOUI Professeur à la Faculté des Sciences Ain-chock
 Remerciement
Avant tout développement sur cette expérience professionnelle, il apparaît opportun de
commencer ce rapport par des remerciements, à ceux qui ont aidé dans notre cursus universitaire,
et même à ceux qui ont eu la gentillesse d'offrir ce projet à un moment très profitable.

Nous tenons à adresser nos vifs remerciements à notre encadrant Pr. Seddiq EL KASMI
ALAOUI, pour ses précieux conseils, son engagement et sa patience, qui ont grandement
contribué à l'avancement du projet. Nos vifs remerciements sont adressés aussi au Dr. Asmae
Zaidani, pédiatre concernée par notre projet, pour son accueil chaleureux et pour le partage de
son expertise.

Nous adressons également nos sincères remerciements au Pr. SAID JAI ANDALOUSSI,
chef de la filière « Informatique Médicale » à la FSAC, ainsi qu'à tous les professeurs et
dirigeants de cet institut pour les efforts qu’ils consacrent pour notre formation.

2
 Résumé
Le projet vise à développer une application qui informatise la gestion d’un cabinet de
pédiatrie avec une interface graphique simple et ergonomique.

Cette application sera utilisée entre autres pour gérer les rendez-vous, consultations,
ordonnances, certificats médicaux, dossiers des patients, facturations, gestion du personnel du
cabinet, ...

La démarche de la création de ce projet se situe sur plusieurs niveaux :

● La création d’un cahier de charge qui inclut toutes les exigences demandées
par le client.

● L’étude préalable de l’application consiste à :

○ La définition du contexte.
○ L’établissement des fonctionnalités de base.
○ L’établissement des diagrammes nécessaires à la conception de l’application.
○ Le choix des outils nécessaires (PHP, HTML, CSS, JavaScript...).

● La mise en place de l'application se fera également par étapes :

○ Création des interfaces graphiques.

○ Mise en place de chaque interface.
○ Tests unitaires des fonctionnalités de l’application.
○ Vérification de sécurité.
Et comme la plupart des projets de développement des solutions informatiques, celui-ci
est destiné aussi à évoluer au fil du temps, afin de s’approcher à la perfection.

Mots clés : Application Web, Cabinet de pédiatrie, Application de gestion,

informatisation.

3
 Abstract
The project aims to develop an application that computerizes the management of a
pediatric practice with a simple and ergonomic graphic interface.

This application will be used, among other things, to manage appointments, consultations,
prescriptions, medical certificates, patient files, invoicing, practice staff management, ...

The process of creating this project is on several levels:

● The creation of a specification that includes all the requirements, validated by the client.

● The preliminary study of the application consists of:

○ The definition of the context.

○ Establishing basic functionality.
○ The establishment of the diagrams necessary for the design of the application.
○ The choice of the necessary tools (PHP, HTML, CSS, JavaScript...).

● The implementation of the application will also be done in stages:

○ Creation of graphical interfaces.

○ Implementation of each interface.
○ Unit testing of application functionality.
○ Security check.
And like most IT solution development projects, this one is also intended to evolve over
time, in order to approach perfection.

Key words: Web application, pediatric practice, management application,

computerization

4
 Table des matières

Liste des figures .................................................................................................................................... 7

Liste des abréviations...........................................................................................................................10

Introduction générale...........................................................................................................................11

Chapitre I Contexte général du projet ..................................................................................................13

[Link] : ................................................................................................................................14

[Link]ématiques : ...........................................................................................................................14

[Link] préalable de l’existant ..........................................................................................................14

[Link] de l’existant .....................................................................................................................15

[Link] de l’existant ....................................................................................................................15

[Link] des besoins ...............................................................................................................16

[Link] fonctionnels ...................................................................................................................16

[Link] non fonctionnels ............................................................................................................17

[Link] proposée ..........................................................................................................................17

[Link] fonctionnalités attendues de l’application .................................................................................17

a. La gestion d’un patient : ............................................................................................................18

b. La gestion des « rendez-vous » : .................................................................................................18

c. La gestion des consultations : .....................................................................................................18

d. La gestion des ordonnances : .....................................................................................................18

e. La gestion des certificats médicaux : ..........................................................................................19

5
 f. La gestion de facturation: ..........................................................................................................19

g. La gestion du personnel : ...........................................................................................................19

[Link] de vie du projet ....................................................................................................................19

[Link] du projet (diagramme de Gantt).................................................................................21

[Link] ....................................................................................................................................22

Chapitre II Conception et modélisation du projet..................................................................................23

[Link] ..................................................................................................................................24

[Link]ésentation d’UML : ....................................................................................................................24

[Link]ésentation de MERISE : .............................................................................................................24

[Link] des acteurs du système : ............................................................................................25

[Link] de cas d’utilisation .....................................................................................................25

[Link] de séquence ...............................................................................................................27

[Link] des classes ...................................................................................................................34

[Link]èle conceptuel de données ........................................................................................................34

[Link]èle logique de données .............................................................................................................35

[Link]...................................................................................................................................36

Chapitre III Mise en œuvre du projet ...................................................................................................37

[Link] ..................................................................................................................................38

[Link] et langages de développement utilisés ...................................................................................38

[Link] .......................................................................................................................................38

[Link] ...........................................................................................................................................38

[Link] 38

[Link] ..........................................................................................................................................39

6
 [Link] ...................................................................................................................................39

[Link] .......................................................................................................................................39

[Link]......................................................................................................................................39

[Link] & GitHub ............................................................................................................................39

[Link] .......................................................................................................................................40

[Link] ...........................................................................................................................................40

[Link] ...................................................................................................................................40

[Link] ......................................................................................................................................40

[Link] Project .......................................................................................................................41

3.Réalisation ....................................................................................................................................41

a.Côté patient : .............................................................................................................................41

b.Côté secrétaire : .........................................................................................................................48

c.Côté médecin : ...........................................................................................................................51

d.Côté administrateur : .................................................................................................................60

[Link] ....................................................................................................................................62

Conclusion générale .............................................................................................................................63

Webographie .......................................................................................................................................65

Liste des figures

Figure 1 : L'ancienne application.........................................................................................................15

Figure 2 : Diagramme de Gantt (réel) ...................................................................................................22

Figure 3 : Diagramme de cas d’utilisation de gestion d’un patient ..........................................................26

7
Figure 4 : Diagramme de cas d’utilisation de la prise de rendez-vous .....................................................26

Figure 5 : Diagramme de cas d’utilisation de facturation .......................................................................27

Figure 6 : Diagramme de cas d’utilisation de gestion des comptes du personnel ......................................27

Figure 7 : Diagramme de séquence d’authentification ...........................................................................28

Figure 8 : Diagramme de séquence pour la gestion des rendez-vous .......................................................29

Figure 9 : Diagramme de séquence pour la gestion des consultations .....................................................31

Figure 10 : Diagramme de séquence pour la création de la fiche d’un patient .........................................33

Figure 11 : Diagramme de classes .........................................................................................................34

Figure 12 : MCD .................................................................................................................................35

Figure 13 : MLD ..................................................................................................................................36

Figure 14 : Portail ................................................................................................................................41

Figure 15 : Page d’authentification .......................................................................................................42

Figure 16 : Page d’inscription...............................................................................................................43

Figure 17 : Réinitialisation de mot de passe...........................................................................................44

Figure 18 : Page d’accueil ....................................................................................................................44

Figure 19 : Gestion des rendez-vous......................................................................................................45

Figure 20 : Réservation de rendez-vous.................................................................................................46

Figure 21 : Liste des rendez-vous ..........................................................................................................47

Figure 22 : Impression des Rendez-vous ...............................................................................................47

Figure 23 : Authentification du personnel .............................................................................................48

Figure 24 : Création de profile tuteur ...................................................................................................49

Figure 25 : Création de profile Patient ..................................................................................................49

Figure 26 : La prise de Rendez-vous .....................................................................................................50

8
Figure 27 : Insertion des données de vaccination ...................................................................................50

Figure 28 : Liste des rendez-vous ..........................................................................................................51

Figure 29 : Dashboard .........................................................................................................................51

Figure 30 : Création des consultations ..................................................................................................52

Figure 31 : Modification des consultations ............................................................................................53

Figure 32 : Création des ordonnances ...................................................................................................54

Figure 33 : Liste des ordonnances .........................................................................................................54

Figure 34 : Ordonnance .......................................................................................................................55

Figure 35 : Modification des ordonnances .............................................................................................56

Figure 36 : Création des certificats .......................................................................................................57

Figure 37 : Liste des certificats .............................................................................................................58

Figure 38 : Certificat médical ...............................................................................................................59

Figure 39 : Modification des certificats .................................................................................................60

Figure 40: Création des accès pour les employés ...................................................................................60

Figure 41 : Modification des données des employés ...............................................................................61

Figure 42 : Restriction des accès employés ............................................................................................61

Liste des tableaux

Table 1 : Les rôles de chaque acteur ........................................................................................... 25

9
 Liste des abréviations
UML : Unified Modeling Language.
MCD : Modèle Conceptuel de Données.
MLD : Modèle Logique de Données.
SGBD : Système de Gestion de Bases de Données.
BD : Base de données.
CIN : Carte Nationale d’Identité
HTML : Hyper Text Markup Language
CSS : Cascading Style Sheets
PHP : HyperText Preprocessor
HTTP : HyperText Transfer Protocol
HTTPS : HyperText Transfèr Protocol Secure
DDOS : Distributed Denial-of-Service
SQL : Structured Query Language
FSAC : Faculté des sciences Ain Chock

10
 Introduction générale
De nos jours, le développement des applications informatiques est très convivial et
reconnu dans presque tous les domaines y compris le domaine médical.

En effet, les applications informatiques et les sites web ont une apparence plus harmonisée
et spécifique avec la rapidité d’accès à l’information et la possibilité de profiter d’un certain
nombre de fonctionnalités innovantes, intéressantes et intuitives.

Dans ce cadre nous sommes appelés à concevoir, développer et intégrer un système

incluant des interfaces claires et faciles à utiliser afin de mettre en place une solution pour
l’organisation et l’automatisation de la gestion d’un cabinet de pédiatrie afin d’augmenter la
fiabilité, l’efficacité de l’effort humain et faciliter les tâches pénibles au sein du cabinet et surtout
rapprocher le médecin de ses patients et faciliter le processus de prise des rendez-vous.

Actuellement, il est important à un organisme de se tenir proche de ses utilisateurs en

proposant toujours des solutions adaptées et de bonnes qualités. Puisque ce dernier travaille
classiquement avec le papier, qui engendre le travail répétitif et la perte de temps. D’où l’idée de
développer une application web permettant de prendre un rendez-vous, gérer les dossiers
médicaux, gérer la facturation et les membres du personnel en quelques clics.

Certes connaître l’organisme s’avère indispensable afin de travailler dans de bonnes

conditions et de fournir un résultat satisfaisant.

Le présent projet s’articule autour de trois chapitres qui sont présentés comme suit :

● Le premier chapitre est consacré à la présentation théorique et l’analyse des besoins de la

même manière que le cycle de vie et la planification de projet.

● Le deuxième chapitre définit la conception de l’application par quelques diagrammes

d’UML, de la même façon que Merise avec le MCD et MLD.

11
 ● Le troisième chapitre permet de définir les outils que nous avons utilisés tout au long de
la réalisation de notre projet ainsi que la présentation des activités des différentes
interfaces de l’application.

On terminera ce rapport par une conclusion où on présentera les fonctionnalités réalisées

et on lancera nos perspectives.

12
 Chapitre I
Contexte général du projet

13
1. Introduction :

Ce chapitre présente d’une manière générale le contexte du projet, tels que sa description
détaillée, ses objectifs et aussi les besoins communiqués avec le client.

2. Problématiques :

La digitalisation des données médicale est devenue le plus caractéristique attendu, pour
plusieurs raisons comme celle que nous allons présenter dans cette partie.

● Recherche difficile sur les registres.

● Perte de temps.

● Détérioration des archives à cause de leur utilisation trop fréquente.

● Difficultés de stockage.

● Risque de perte des archives.

● Mauvaise modification.

● Difficulté des calculs des statistiques.

● Travaux manuels élevés, lourds et pénibles.

● Travail répétitif.

● Absence d'un moyen de recherche rapide.

● La gestion des RDV manuelles.

● Risque d'oubli ou chevauchement des RDV.

● La salle d'attente est toujours saturée.

● …………

3. Etude préalable de l’existant

14
 a. Etude de l’existant

Il existe une ancienne application pour la gestion de ce cabinet de pédiatrie, il s’agit

notamment d’une application web intranet qui permet la digitalisation des tâches d’un cabinet
pédiatrie tel que la gestion des dossiers médicaux des patients, consultation, ordonnance et
facturation ainsi qu’une côté administrateur pour la gestion des utilisateurs.

Figure 1 : L'ancienne application

La figure 1 présente une interface liée à l'ancienne application de gestion du cabinet de

pédiatrie.

b. Limite de l’existant

Après l'étude de l’existant réalisé nous nous sommes rendu compte de plusieurs
faiblesses et limites de la solution existante, telles que :

- Absence d'option de création de compte pour tout type d'utilisateurs.

- Application intranet.

- Faiblesse de système de management des rendez-vous.

15
 - Difficulté de navigation entre les interfaces.

- Ne répond pas à tous les besoins spécifiques.

- Pas d'accès pour le patient.

- L’option d’impression des factures ne fonctionne pas.

- Faiblesse d’ajout des patients.

- Manque de pages indiqué dans les interfaces graphiques.

- Problème de type de donnée choisi pour certaines variables.

- Redondance des attributs dans la base de données.

- Faiblesse des relations entre les tables de base de données.

- Le client n’est pas satisfait du produit final.

4. Identification des besoins

a. Besoins fonctionnels

Le développement d’une application Web pour la gestion d’un cabinet de pédiatrie qui
répondra aux besoins suivants :

● Permettre la création et la gestion des comptes utilisateurs.

● Blog pour créer une communauté.

● Créer des comptes pour le personnel.

● Gérer les profils et les droits d’accès à l’application.

● Rechercher un patient.

● Mettre à jour le dossier médical d’un patient au cours d’une consultation.

● Gérer les rendez-vous.

● Gérer la facturation.

● Chabot pour l'accueil des patients.

16
 b. Besoins non fonctionnels

Le développement d’une application Web demande une réponse sur plusieurs besoins
fonctionnels ainsi que les non fonctionnels, Comme suivant :

● Prendre un rendez-vous dans quelques minutes.

● Compatible à tous les écrans, et la plupart des navigateurs.

● Sécurisé et performant.

● Facile à utiliser.

● Ergonomiques et adaptées à l'utilisateur.

● …..

5. Solution proposée

La solution étudiée, Bien qu’il offre un espace de gestion du cabinet, il ne facilite ni la

gestion des rendez-vous pour les patients ou la secrétaire, ni la gestion de l’archivage des dossiers
médicaux des patients. La perte courante des dossiers médicaux des patients pour le médecin qui
représente une connaissance des antécédents médicaux d’un patient pour une nouvelle
consultation justifient la nécessité de la mise en place d’un système numérique pour la gestion
efficace des rendez-vous et des dossiers médicaux.

En effet, avec ce système les patients pourront rapidement prendre rendez-vous dans le
cabinet pour une consultation et gérer leur rendez-vous quel que soit l’heure. Pour toute
consultation, les médecins pourront facilement retrouver le dossier médical de leur patient et le
mettre à jour avec les nouvelles données de consultation. L’application met en contact
patient/médecin grâce au Blog, où les patients peuvent trouver des informations et obtenir des
réponses à propos de leur inquiétude à travers des articles écrits par le médecin. Ceci assure le
suivi effectif à long terme du patient.

6. Les fonctionnalités attendues de l’application

17
a. La gestion d’un patient :

● Créer une « fiche patient » à l’arrivée d’un nouveau patient.

● Rechercher « fiche patient ».

● Afficher « fiche patient ».

● Modifier « fiche patient ».

● Archiver « fiche patient ».

● Gérer la « vaccination ».

b. La gestion des « rendez-vous » :

● Prise de rendez-vous en ligne à travers l’application.

○ Ajouter « Rendez-vous ».

○ Supprimer « Rendez-vous ».

○ Imprimer la confirmation de « rendez-vous ».

● Validation de rendez-vous par la secrétaire.

○ Affichage « Rendez-vous ».

○ Validation de « Rendez-vous ».

○ Remplissage Fiche « Rendez-vous » : pour les rendez-vous immédiats.

○ Affichage du calendrier « Rendez-vous ».

c. La gestion des consultations :

● Saisir les données liées à une consultation.

● Modifier une consultation.

● Rechercher la fiche consultation.

d. La gestion des ordonnances :

18
 ● Ajouter une « ordonnance ».

● Modifier une « ordonnance ».

● Prescrire des médicaments.

● Imprimer une « ordonnance ».

● Rechercher une « ordonnances ».

e. La gestion des certificats médicaux :

● Rédiger un « certificat médical ».

● Modifier un « certificat médical ».

● Imprimer un « certificat médical ».

● Rechercher « certificat médical ».

f. La gestion de facturation:

● Créer « facture ».

● Afficher « facture ».

● Modifier « facture ».

● Imprimer « facture ».

g. La gestion du personnel :

● Ajouter un utilisateur

● Modifier un utilisateur

● Supprimer un utilisateur

7. Cycle de vie du projet

Le cycle de développement logiciel a subi de nombreuses évolutions au gré des

changements technologiques et des nouvelles méthodologies de programmation. Les auteurs
19
d’ouvrages sur le sujet, ainsi que les entreprises, ont tous redéfini, regroupé ou encore renommé
les étapes, s’appropriant ainsi une différente variante de ce cycle. Il n’en demeure pas moins que
ce cycle décrit essentiellement un processus de réalisation d’une solution logicielle allant de
l’idéation, en passant par la conceptualisation, jusqu’à la concrétisation finale. Loin d’être une
recette à appliquer, le cycle doit être organique et agile afin de s’adapter aux changements, aux
aléas et aux demandes.

● Planification :

Cette phase d’initiation de projet met la table pour l’estimation du projet avec une
connaissance à haut niveau des besoins et des objectifs visés. Diverses facettes sont abordées
avec le client durant des rencontres exploratoires ou d’analyses. Le contexte d’affaires, la
transition technologique, ainsi qu’une connaissance des utilisateurs internes/externes sont pris en
considération. Le tout permet d’appréhender les risques et les enjeux afin de mieux évaluer les
coûts et la planification du projet.

● Les requis :

Cette étape reprend les points notés durant l’étape de planification et ajoute un niveau de
précision supplémentaire pour faire avec le client un inventaire complet des besoins et des
objectifs. La transcription de ceux-ci se détaille en fonctionnalités qui pourront être proposées en
équipe (par sprints) pour le design et le développement.

● Le design et le prototypage :

Une fois les requis bien définis, une schématisation de l’architecture de la solution est faite
durant cette phase. Il peut prendre différentes formes. Il peut décrire l’architecture technologique
(matérielle et logicielle), les interfaces exposées à différents services ou applications ou à des
sources de données.

● Le développement logiciel :
Comme le nom l’indique, c’est l’étape où les développeurs codent la solution
(Frontend et Backend) et connectent les interfaces pour atteindre les objectifs définis.
Dans le cadre de la méthodologie Agile, c’est un processus itératif. Les clients sont en

20
 mesure de suivre, tester et approuver les fonctionnalités codées et à venir. Ceci permet de
livrer une solution opérationnelle en fonction des besoins priorisés par sprints.

● Les tests et l’assurance qualité

Durant la phase de développement, divers tests mettent à l’épreuve la solution pour valider
le comportement et les fonctions. Les équipes et le client suivant des plans de tests et les résultats
sont passés en revue. Le tout se déroule dans des environnements de tests ou de « Staging »,
différents de celui où la solution finale sera mise en production. Durant cette phase, il y a une
rétroaction continuelle entre l’assurance qualité et les développeurs pour supprimer les erreurs
(bogues). Lorsque le moment survient de mettre en production la solution, la phase déploiement
s’organise déjà.

● Le déploiement

Le déploiement marque la fin des développements et des tests sur le logiciel. Cette phase
est constituée du transfert de la solution sur l’environnement client ou celui de production. Des
mécanismes d’alerte et de contrôle sont mis en place en vue de la phase maintenance.

● La maintenance

C’est une phase où, typiquement, une autre équipe prend la relève. Cette nouvelle équipe
est en quelque sorte un service à la clientèle post-implantation. À la suite d’une période de
stabilisation de la solution en déploiement, l’équipe de support et maintenance reste alerte face
aux demandes du client. Les correctifs ou les demandes d’améliorations sont pris en charge selon
leur envergure et les délais définis dans l’entente de service (Service Levels Agreement). Si
nécessaire, le cycle de développement logiciel peut reprendre du départ si les efforts requis
représentent un nouveau projet.

8. Planification du projet (diagramme de Gantt)

La planification de projet est une étape nécessaire dans l’étude préalable ; son objectif
principal est la planification des tâches et la fourniture d’une vision globale sur le déroulement
du projet. Il permet de superviser la réalisation d’une tâche unique, avec ses ressources, ses dates

21
de début et de fin et la durée qui lui a été déjà consacrée, comme il permet de suivre l’avancement
du projet dans son ensemble.

Le diagramme de Gantt est un outil efficace pour représenter visuellement l’état

d’avancement et la succession des différentes activités qui constituent un ordonnancement ou la
gestion d’un projet. Chaque tâche est matérialisée par une barre horizontale, dont la position et
la longueur représentent la date de début, la durée et la date de fin.

Figure 2 : Diagramme de Gantt (réel)

La figure 2 représente l'état d’avancement et la succession des différentes tâches qui

construit notre projet. Concernant la méthodologie de travail et collaboration nous avons choisi
17 :00 de chaque jour comme un “Point de Production” (Voir annexes 1) qui désigne une réunion
pour discuter l'état d’avancement, problème rencontré et idée d’innovation.

9. Conclusion

Dans ce premier chapitre, nous avons fait une étude globale de notre projet tout en définissant
son contexte général, puis nous avons défini les défis et les problèmes qui peuvent être
rencontrés par un utilisateur dans des applications similaires, ensuite nous avons proposé des
solutions pour résoudre ces problèmes.

22
 Chapitre II
Conception et modélisation du
projet

23
[Link]

La conception est la phase la plus importante du cycle de développement de l’application

qui permet de décortiquer les diverses parties de l'application incluant l’architecture par
l'obtention d'une représentation complète sur le projet. Il se présente sous forme de diagrammes
utilisés pour représenter les différents éléments du système.

Ce chapitre a pour objectif de présenter la conception et la modalisation du projet, en adoptant

les méthodes de modélisation MERISE et UML.

[Link]ésentation d’UML :

Le langage UML (Unified Modeling Language) résume et visualise les systèmes de

programmation orientés objet. Le langage de modélisation est
donc un outil pratique pour les développeurs. D’une part, il
permet de créer des plans clairs pour les projets logiciels.
D’autre part, il permet aussi de présenter des systèmes
logiciels complexes de manière simple et compréhensible
même pour des personnes extérieures au domaine. Si, par
exemple, vous souhaitez présenter le logiciel de la dernière
application de l’entreprise au responsable marketing, il est inutile de présenter du code, mais
beaucoup plus judicieux de lui montrer un aperçu des fonctionnalités les plus importantes de
l’application via UML.

[Link]ésentation de MERISE :

Merise est une méthode d'analyse, de conception et de

gestion de projet complètement intégrée, ce qui en constitue le
principal atout. Il a fourni un cadre méthodologique et un langage
commun et rigoureux à une génération d'informaticiens français.

24
[Link] des acteurs du système :

ACTEUR RÔLE

Médecin ● Gestion des certificats.

● Gestion des ordonnances.
● Gestion des consultations.

Secrétaire ● Gestion des patients.

● Gestion des rendez-vous.
● Gestion des factures.

Administrateur ● Gestion d’accès du personnel.

Tuteur ● Prise de rendez-vous.

● Gestion du profile patient.

Table 1 : Les rôles de chaque acteur

[Link] de cas d’utilisation

Ce diagramme représente les besoins des utilisateurs par rapport au système. Dans ce
diagramme on trouve trois concepts : les acteurs, le cas d’utilisation et l’interaction entre ces
deux derniers.

L’acteur est toute personne ou système qui interagit avec le système en cours de
modélisation. Il peut être défini comme une description de l’interaction entre les acteurs et le
système, selon le point de vue de l’utilisateur.

25
 Figure 3 : Diagramme de cas d’utilisation de gestion d’un patient

La figure 3 présente les différentes gestions, qui se font par le médecin, la secrétaire, et le
tuteur au niveau des différents services proposés par notre solution.

Figure 4 : Diagramme de cas d’utilisation de la prise de rendez-vous

La figure 4 résume les étapes de la prise d’un rendez-vous, dans le cas où le Tuteur qui
demande le rendez-vous, et le cas du secrétaire qui le demande.

26
 Figure 5 : Diagramme de cas d’utilisation de facturation
La figure 5 présente le déroulement de la gestion de la facturation exécuté par la secrétaire.

Figure 6 : Diagramme de cas d’utilisation de gestion des comptes du personnel

La figure 6 résume le déroulement de la gestion des comptes des membres du personnel.

[Link] de séquence

27
 Le diagramme de séquence permet de représenter des collaborations entre les objets, selon
un point de vue temporel, on met l’accent sur la chronologie des envois de messages. Sa
représentation se concentre sur l’expression des interactions. Il peut servir à illustrer un cas
d’utilisation.

La gestion d’authentification est bien recommandée dans ce genre d'applications. Surtout

qu’après la validation du login et du mot de passe, le client peut accéder à l’application grâce à
son enregistrement dans la base de données.

Ce diagramme permet de clarifier le bon fonctionnement de l’authentification comme

dans la figure suivante :

Figure 7 : Diagramme de séquence d’authentification

28
Les étapes d’authentification :

● L’utilisateur tape son adresse mail, et son mot de passe.

● Le système envoie les données dans une requête à la base des données.

● La base des données répond à la requête, et il envoie la réponse au système.

● Si l’utilisateur est autorisé, il se réfère vers sa page d'accueil.

● Sinon le système affiche un message d’erreur, et il lui demande de vérifier ses

informations.

Figure 8 : Diagramme de séquence pour la gestion des rendez-vous

29
● Après l’authentification, du tuteur sur l’application, Il peut cliquer sur le bouton«
Demande de rendez-vous ».

● Le système affiche le formulaire de demande que le tuteur doit remplir.

● La demande de confirmation de rendez-vous, s'envoie au secrétaire après le remplissage

de toutes les données nécessaires pour la demande.

● La secrétaire doit vérifier la date de rendez-vous, avant la confirmation.

● S’il confirme le rendez-vous, le patient reçoit une notification.

● Le patient peut afficher ou imprimer le rendez-vous après la confirmation.

● Le patient peut annuler le rendez-vous, même après la confirmation du rendez-vous.

● La secrétaire reçoit une notification dans le cas d’annulation de rendez-vous par le patient.

30
 Figure 9 : Diagramme de séquence pour la gestion des consultations

● Après l’authentification, le médecin demande au système de créer une nouvelle

consultation.

● Le système répond par des champs à remplir par le médecin.

31
 ● Si le médecin effectue le remplissage avec succès, le système envoie une requête d’ajout
à la base des données.

● La DB vérifie si les informations proviennent sont identiques.

● Si les données sont identiques :

○ Le médecin reçoit le message que les données sont bien enregistré

● Sinon il reçoit le message d’erreur.

Création d’une consultation :

● Le médecin demande la liste des consultations.

● Le système envoie la requête de recherche après la réception de la demande du médecin.

● Si la base de données trouve un résultat, il envoie au système, pour les transférer au

médecin.

● Si la base de données n’a pas de résultat, il envoie un message d’erreur.

Modification d’une consultation :

● Après le choix de la consultation.

● Le système affiche toutes les informations de la consultation.

● Le médecin effectue les modifications, et quand sur le bouton de validation, le système

envoie les nouvelles données à la BD, afin de mettre à jour les anciennes valeurs.

● Le médecin reçoit le message de confirmation que les données sont à jour.

32
Figure 10 : Diagramme de séquence pour la création de la fiche d’un patient

● La secrétaire doit s’authentifier sur l’application.

● Quand elle clique sur le bouton de la création de fiche patient, le système affiche un
formulaire à remplir.

● Elle doit remplir les champs obligatoires, avant de cliquer sur Valider, pour envoyer la
requête de création correcte.

33
 ● La BD vérifie si les données n'existent pas dans la BD, avant de les enregistrer, sinon il
envoie un message d’erreur au système qui affiche ça à l’utilisateur.

[Link] des classes

Afin de finaliser l’architecture de notre application, on doit nécessairement passer par le

diagramme de classes qui est parmi les plus importants diagrammes dans la modélisation UML
et le plus utiles.

Ce diagramme permet la représentation statique du système à développer. Il est basé sur

deux concepts :

· La classe : un ensemble de fonctions et de données (attributs) qui sont liées par un champ
sémantique.

· L’association : une sorte de connexion sémantique entre deux classes (relation logique).

Figure 11 : Diagramme de classes

[Link]èle conceptuel de données

34
 Le modèle conceptuel de données (MCD) est une représentation graphique de haut niveau
qui permet facilement et simplement de comprendre comment les différents éléments sont liés
entre eux.

Il a pour objectif de constituer une perception claire et cohérente des données manipulées
dans l’entreprise en décrivant leur sémantique (le sens attaché à ces données) et les rapports qui
existent entre elles.

Figure 12 : MCD

[Link]èle logique de données

Le modèle logique de données est une étape de la conception qui consiste à décrire la
structure des données utilisées, et présenter la structure statique du système d'information, il a
pour but la traduction du modèle conceptuel de données en fonction du SGBD à utiliser lors du
développement de l'application.

35
 Figure 13 : MLD

[Link]

Dans ce deuxième chapitre, nous avons décrit la phase d’analyse et conception de notre
projet et nous avons aussi présenté et défini quelques diagrammes du formalisme UML.

Ces diagrammes, nous ont aidé à déduire notre MCD et MLD afin d’illustrer le
fonctionnement de l’application.

Le troisième chapitre sera dédié à la description des différents outils que nous avons
employés pour réaliser notre projet.

36
 Chapitre III
Mise en œuvre du projet

37
 1. Introduction

Ce chapitre sera consacré à la description des outils que nous avons utilisés tout au long
de la réalisation de notre projet. Pour mettre en place notre système, nous avons utilisé plusieurs
outils de conception et de développement qui ont assuré le bon déroulement de différentes phases
de ce projet.

Ainsi qu’une partie de réalisation qui présente et décrit les interfaces graphiques les plus
importantes dans notre application.

2. Outils et langages de développement utilisés

Avant de passer à la phase de réalisation, nous passons vers la phase de choix des
technologies, qu’on doit les utiliser pour implémenter notre connaissance et notre conception,
afin de créer l’application.

a. HTML
HTML est le format de données conçu pour représenter les pages web. C’est
un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML
permet également de structurer sémantiquement et de mettre en forme le contenu
des pages, d’inclure des ressources multimédias dont des images, des formulaires
de saisie, et des programmes informatiques.

b. CSS
Les feuilles de style en cascade, généralement appelées CSS, forment un
langage informatique qui décrit la présentation des documents HTML.

c. JS
JavaScript est un langage de programmation de scripts orienté objet, il est
à ce jour utilisé majoritairement sur Internet, conjointement avec les pages Web
(HTML). Le JavaScript s'inclut directement dans la page Web (ou dans un fichier
externe) et permet de dynamiser une page HTML.

38
 d. PHP
PHP est un langage de programmation libre principalement utilisé pour
produire des pages Web dynamiques via un serveur HTTP, mais pouvant
également fonctionner comme n'importe quel langage interprété de façon
locale.

e. Bootstrap
Bootstrap est une collection d'outils utiles à la création du design de sites
et d'applications web. C'est un ensemble qui contient des codes HTML et CSS,
des formulaires, boutons, outils de navigation et autres éléments interactifs,
ainsi que des extensions JavaScript en option.

f. JQuery
JQuery est une bibliothèque JavaScript libre et multiplateforme créée
pour faciliter l'écriture de scripts côté client dans le code HTML des pages web.
La première version est lancée en janvier 2006 par John Resig.

g. MySQL
Le SGBD MySQL est supporté par un large éventail d'outils. MySQL
est surtout installé pour les applications Web, ce SGBD est solide et utilisé
par de grands groupes spécialisés dans l'Internet. Plusieurs pilotes natifs de
type 4 sont disponibles pour MySQL et sont conseillés pour une utilisation
en PHP.

h. Git & GitHub

Git est un système de contrôle de version qui vous permet de gérer et
de suivre l'historique de votre code source. GitHub est un service
d'hébergement basé sur le cloud qui vous permet de gérer les référentiels
Git. Si vous avez des projets open source qui utilisent Git, alors GitHub est
conçu pour vous aider à mieux les gérer.

39
 i. Xampp
Xampp(APACHE) : est un ensemble de logiciels permettant de mettre
en place un serveur Web local, un environnement comprenant deux serveurs
(Apache et MySQL), un interpréteur de script (PHP), ainsi que PhpMyAdmin
pour l'administration Web des bases MySQL.

j. VSC
Visual Studio Code : (VSC par la suite) est un éditeur de code open-
source, gratuit et multiplateforme (Windows, Mac et Linux), développé par
Microsoft, Principalement conçu pour le développement d'application avec
JavaScript, TypeScript et [Link], l'éditeur peut s'adapter à d'autres types de
langages grâce à un système d'extension bien fourni.

k. StarUML
StarUML est un logiciel de modélisation UML, qui a été « cédé comme
open source » par son éditeur, à la fin de son exploitation commerciale, sous
une licence modifiée de GNU GPL.

l. Looping
Looping est un logiciel de modélisation conceptuelle de données entièrement gratuit et
libre d'utilisation. Il permet de modéliser des entités et des associations, de
générer des diagrammes de classes UML, de créer des associations réflexives
avec définitions des rôles, de transformer ces associations en entités avec
identifiants relatifs, d'exporter des scripts SQL, d'afficher en temps réel les
modules logiques de données textuels, ou encore d'exécuter des requêtes SQL
de création de tables de la base de données instantanément.

m. FileZilla
FileZilla Client est un client FTP, FTPS et SFTP, développé sous la
licence publique générale GNU. Il est intégré à la liste des logiciels libres

40
préconisés par l’État français dans le cadre de la modernisation globale de ses systèmes
d’informations.

n. Microsoft Project
Microsoft Project est un logiciel de gestion de projets édité par
Microsoft. Il permet aux chefs de projet et aux planificateurs de planifier et
piloter les projets, de gérer les ressources et le budget, ainsi que d'analyser et
communiquer les données des projets.

3. Réalisation

L’objectif de cette partie est d’appliquer tout ce qu’on a vu dans la partie théorique, Et pour
ce but, nous présentons par la suite notre réalisation qui contient quatre parties (Côté patient,
médecin, secrétaire et administrateur), à travers des captures d’écrans des parties réalisées.

a. Côté patient :

Figure 14 : Portail

41
 La figure 14, montre que l'utilisateur peut accéder à son espace, en cliquant sur le bouton
d’authentification, comme il a l’accès au chabot où il peut s’informer sur le cabinet, docteur et
l’application.

Figure 15 : Page d’authentification

La figure 15, représente l’interface d’où l’utilisateur (Tuteur) peut s’authentifier sur
l’application en saisissant son email et son mot de passe s’il a déjà créé son propre compte.

42
 Figure 16 : Page d’inscription

La figure 16, représente la page d’inscription, Où l'utilisateur peut créer son compte sur
l’application, il peut le créer en saisissant son nom complet, email, mot de passe et la confirmation
de son mot de passe.

43
 Figure 17 : Réinitialisation de mot de passe

La figure 17 montre l’interface de réinitialisation de mot de passe, si l’utilisateur ne s'en

souvient plus.

Figure 18 : Page d’accueil

44
 La figure 18, montre la page d’accueil de l’application, qui s’affiche si l’opération
d’authentification s’est effectuée avec succès.

Figure 19 : Gestion des rendez-vous

45
 La figure 19, présente une vue sur le processus de prise de rendez-vous ainsi qu’il donne
la possibilité d'accéder pour réserver un rendez-vous et aussi de gérer la liste des rendez-vous
réservés.

Figure 20 : Réservation de rendez-vous

La figure 20 présente l’interface de prise de rendez-vous, où l’utilisateur (Tuteur) doit

sélectionner l’un de ses fils enregistrés dans l’application qui est concerné par le rendez-vous puis
sélectionné est ce qu'il s’agit d'une consultation ou un contrôle ensuite précisé la date qui lui
convient. Si cette dernière a été déjà prise, le système affichera un message d’erreur.

46
 Figure 21 : Liste des rendez-vous

La figure 21, montre l’interface qui permet à l’utilisateur d’imprimer la fiche de rendez-
vous, s’il est confirmé par la secrétaire, et aussi il peut l’annuler.

Figure 22 : Impression des Rendez-vous

47
 La figure 22, présente l’interface d’impression de confirmation de rendez-vous par le
tuteur.

b. Côté secrétaire :

Figure 23 : Authentification du personnel

La figure 23, représente la page d’authentification du personnel, Et pour se connecter sur

l'application en tant que membre de personnel, il faut taper l’email et le mot de passe créé
par le l’administrateur ainsi qu’il est obligé de vérifier le code Captcha pour éviter les
attaques DDoS.

48
 Figure 24 : Création de profile tuteur

La figure 24, représente la page de création des profils tuteurs pour la prise de rendez-vous
à domicile.

Figure 25 : Création de profile Patient

La figure 25, montre la page de création des profils patient, après la sélection de son tuteur
depuis le tableau qui est affiché à droit pour le but de la prise de rendez-vous.

49
 Figure 26 : La prise de Rendez-vous

La figure 26, représente la page de la prise de rendez-vous à domicile pour le patient

exécuté par la secrétaire.

Figure 27 : Insertion des données de vaccination

La figure 27, montre l’interface où la secrétaire peut enregistrer les informations de

vaccination pour chaque patient.

50
 Figure 28 : Liste des rendez-vous

La figure 28, montre la liste des rendez-vous, Et les actions que la secrétaire peut effectuer
sur chaque rendez-vous, ainsi que l’option d’impressions des rendez-vous qui sont déjà
programmés, et les Rendez-vous qui sont en attente de confirmation.

c. Côté médecin :

Figure 29 : Dashboard
51
 La figure 29, présente la vue générale du médecin sur l’état de son cabinet, grâce aux
indicateurs où il peut savoir combien de consultations sont passées par jour et aussi combien
d’argent recevez par jour ou par mois à partir des factures payées.

Figure 30 : Création des consultations

La figure 30, représente que le médecin peut créer une consultation, il suffit de choisir le
patient concerné, et de remplir les champs requis qui s’affichent dans une “pop-up”.

52
 Figure 31 : Modification des consultations

La figure 31, représente la page de modification des consultations, le médecin peut

effectuer les modifications dans la table des consultations en cliquant sur le champ qui veut le
modifier.

53
 Figure 32 : Création des ordonnances

La figure 32, représente l’interface de la création d'ordonnance, où le médecin choisit

une consultation d’après la liste des consultations disponible qui appartient aux patients.

Figure 33 : Liste des ordonnances

54
 La figure 33, montre la liste des ordonnances au médecin qui peut les imprimer, ou
d’afficher les informations d’ordonnance.

Figure 34 : Ordonnance

La figure 34, montre l’interface graphique de l’ordonnance prête à imprimer.

55
 Figure 35 : Modification des ordonnances

La figure 35, montre que le médecin peut modifier les informations des ordonnances s’il
y a une erreur.

56
 Figure 36 : Création des certificats

La figure 36, montre que le médecin peut créer les certificats médicaux, il suffit de
sélectionner une consultation.

57
 Figure 37 : Liste des certificats

La figure 37, représente la liste des certificats médicaux, et les actions que le médecin
peut effectuer sur les certificats.

58
 Figure 38 : Certificat médical

La figure 38, représente l’interface graphique du certificat prêt à imprimer.

59
 Figure 39 : Modification des certificats

La figure 39, montre que le médecin à la possibilité de modifier les informations des
certificats médicaux qu’il a créé.

d. Côté administrateur :

Figure 40: Création des accès pour les employés

60
 La figure 40, montre que l'administrateur peut créer plusieurs accès pour les employées du
cabinet.

Figure 41 : Modification des données des employés

La figure 41, présent le privilège de modification des informations des employés accordé
à l’administrateur, s’il y’a un changement au niveau des données personnel d’un l’employé

Figure 42 : Restriction des accès employés

61
 La figure 42, montre que l'administrateur prend le privilège de restreindre les accès aux
membres de personnel en cas de changement des employés.

4. Conclusion

Dans le chapitre réalisation nous avons appelé à présenter les interfaces réalisées dans
notre application pour clarifier les étapes d’utilisation de notre service.

Au niveau du développement du code, les interfaces ont été modifiées selon le nouveau
besoin apparu afin de garder la cohérence et la simplicité au niveau de compréhension pour le
client. Comme résultat final, l’application est conforme au cahier des charges, respectant ces
objectifs et ces consignes.

62
 Conclusion générale

Ce projet nous a permis d'avoir une approche complète du développement des applications
informatiques et une bonne initiation à l'analyse des besoins ainsi que la gestion d’un projet
informatique.

La réalisation de notre application est à présent achevée, il comprend les fonctionnalités

suivantes :

● Gestion des rendez-vous.

● Gestion des patients.

● Gestion des consultations.

● Gestion des ordonnances.

● Gestion des certificats médicaux.

● Gestion des factures.

● Gestion des utilisateurs.

Sur le plan conceptuel nous avons utilisé le langage UML que nous avons bien maîtrisé à
travers l'étude effectuée de l'application gestion du cabinet de pédiatrie, et sur le plan pratique,
cette application a été développée avec le système de gestion de bases de données PHPMyAdmin.

Nous avons donc présenté les différentes étapes de la conception et la réalisation de notre
application. Par ailleurs, ce projet était pour nous une occasion intéressante d’acquérir de
nouvelles connaissances, ainsi qu'une expérience forte enrichissante qui nous a permis de mettre
en œuvre le bagage qu’on a pu acquérir durant notre formation universitaire au sein de la faculté,
sans oublier l’esprit d’équipe qu’on a pu développer tout au long de notre réalisation du projet.

Suite au travail livré, plusieurs points facultatifs restent à développer et à améliorer.

Parmi eux :

● Login avec reconnaissance faciale.

63
● L’utilisation du nouveau-né par rapport à la technologie du Web : py-script.

● Développer une version mobile de l’application.

● Développer la version arabe.

64
 Webographie
● [Link]
le 29/04/2022

● [Link] le 10/05/2022

● [Link] le 18/05/2022

● [Link] le 20/05/2022

● [Link] le 22/05/2022

● [Link] le 29/05/2022

● [Link]
mail-from-localhost le 10/06/2022

● [Link] le 14/06/2022

● [Link] le 19/06/2022

● [Link] le 22/06/2022

● [Link] le 25/06/2022

● [Link]
mysql-via-php le 29/06/2022

● [Link] le 01/07/2022

● [Link]
stage-les-regles-de-presentation/ le 03/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

65
● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link] le 06/07/2022

● [Link]
recognition/blob/master/[Link] le 08/07/2022

● [Link] le 11/07/2022

● [Link] le 12/07/2022

66
Les annexes

67
Annexe 1 : Point de Production

68
 Année universitaire : 2021/2022

LICENCE INFORMATIQUE MEDICALE

Nom & prénom : EL ASRI Mohamed, BOUICHIDAR Amine

Titre du sujet : La mise en œuvre d’une application Web pour la gestion d’un cabinet de
pédiatrie

Résumé
Le projet vise à développer une application qui informatise la gestion d’un cabinet de
pédiatrie avec une interface graphique simple et ergonomique.

Cette application sera utilisée entre autres pour gérer les rendez-vous, consultations,
ordonnances, certificats médicaux, dossiers des patients, facturations, gestion du personnel
du cabinet, ...

La démarche de la création de ce projet se situe sur plusieurs niveaux :

● La création d’un cahier de charge qui inclut toutes les exigences demandées par
le client.
● L’étude préalable de l’application consiste à :
○ La définition du contexte.
○ L’établissement des fonctionnalités de base.
○ L’établissement des diagrammes nécessaires à la conception de
l’application.
○ Le choix des outils nécessaires (PHP, HTML, CSS, JavaScript...).
● La mise en place de l'application se fera également par étapes :
○ Création des interfaces graphiques.
○ Mise en place de chaque interface.
○ Tests unitaires des fonctionnalités de l’application.
○ Vérification de sécurité.
Et comme la plupart des projets de développement des solutions informatiques,
celui-ci est destiné aussi à évoluer au fil du temps, afin de s’approcher à la perfection.

________________________________________________________

Mots clés : Application Web, Cabinet de pédiatrie, Application de gestion, informatisation.

________________________________________________________

69