Conception Et Développement D'une Application Web de Gestion D'un Clinique

Université Ibn Tofail
Facultédes Sciences
Département d’Informatique
Projet de fin d’étude

Filière :
Sciences Mathématiques et Informatiques(SMI)
Sujet de Projet :
Conception et développement d’une

Application web de gestion d’un clinique
Année universitaire :2021/2022
Réalisé par : Encadré par :
Jaafar ES SAGHIR Mr. El bachir AMEUR
Khaoula BOUSSELHAM
Faculté des sciences Kenitra

+212 5 37 32 94 00
E-mail : contact.fsk@uit.ac.ma
Application web Gestion d’un clinique 2021/2022
Dédicace
Que ce présent rapport dédie nos amours innés à nos parents

qui, avec beaucoup de d’affection, nous a aidées moralement
matériellement durant toute la période de nos études, et que sans
eux ce travail n’aurait pu être achevé.
A notre cher encadrent Mr. El BACHIR ameur pour son aide
et son grand cœur, et aussi notre autre professeur pour les
encourage
Que tous nos frères trouvent ici l’expression de notre grand
amour.
A tous nos amis.
A toutes les personnes qui ont contribué du près ou du loin à
l’élaboration de ce modeste travail, en reconnaissances à leur bien
Fait à mon égard.
2
Remerciement
Nous tenons à exprimer nos remerciements avec un grand plaisir et un

grand respect à notre encadrant Mr. EL BACHIR ameur pour ses
conseils, sa disponibilité et ses
encouragements qui nous ont permis de réaliser ce travail dans les meilleures
conditions. A tous les professeurs qui nous ont aidés pendant les trois ans
passés à l’Université Ibn Tofail.
A toute personne ayant contribué de près ou de loin à l’avancement de notre
projet.
A nos familles et amis pour leur aides. Nous ne pourrons nommer ici toutes
les personnes qui nous ont aidés et encouragés de près ou de loin et nous les
remercions vivement.
3
Table des matières

Liste des figures .................................................................................................................. 6
Listes des tables .................................................................................................................. 7
Liste des acronymes ............................................................................................................ 8
Introduction générale .......................................................................................................... 9
Chapitre1 : Contexte général et analyse du projet .......................................................... 10
1.1 Présentation générale : ............................................................................................... 11
1.2 Définition de l’application web : ............................................................................... 11
1.3 Définition de clinique : .............................................................................................. 11
1.4 Problématiques d’ un clinique : ................................................................................. 11
1.5 Analyse des fonctionnels : ......................................................................................... 12
1.5.1 Besoins fonctionnels : ........................................................................................ 12
1.5.2 Besois non fonctionnels : ................................................................................... 12
1.6 Arborescence de l’application ................................................................................... 13
Chapitre 2 : Conception du projet ..................................................................................... 14
2.1 Introduction : ............................................................................................................. 15
2.2 Méthodologie d’analyse : .......................................................................................... 15
2.2.1 Le langage UML ................................................................................................ 15
2.3 Outil de modélisation : ............................................................................................. 16
2.3.1 Entreprise Architect :.......................................................................................... 16
2.4 Modélisation du contexte :......................................................................................... 16
2.4.1 Identification des acteurs: ................................................................................... 16
2.4.2 Diagramme de classes : ...................................................................................... 18
2.4.3 Diagramme de cas d’utilisation : ........................................................................ 23
2.4.4 Les diagrammes de séquence ............................................................................. 24
Chapitre 3 : Réalisation du projet ..................................................................................... 28
3.1 Introduction : ............................................................................................................. 29
3.2 Les outils de développment : ..................................................................................... 29
3.2.1 HTML 5 : ........................................................................................................... 29
3.2.2 CSS3 : ................................................................................................................. 29
3.2.3 PHP: ................................................................................................................... 30
3.2.4 JavaScripts :........................................................................................................ 30
3.2.5 JQuery : .............................................................................................................. 30
3.2.6 PHPMyAdmin : .................................................................................................. 31
3.2.7 Boostrap : ........................................................................................................... 31
4
3.2.8 XAMPP : ............................................................................................................ 32

3.3 Présentation de l’application : ................................................................................... 32
3.3.1 Interface du visiteur : .......................................................................................... 32
3.3.2 Interface de l’utilisateur : ................................................................................... 34
3.4 Conclusion : ............................................................................................................... 45
Conclusion générale .......................................................................................................... 47
Bibliographie..................................................................................................................... 48
5
Liste des figures
Figure 1: Arborescence de l’application ............................................................................................ 13

Figure 2 : Diagramme de classes ....................................................................................................... 19
Figure 3 :Diagramme de cas d’utilisation .......................................................................................... 13
Figure 4 : Diagramme de séquence « Administration »..................................................................... 14
Figure 5 : Diagramme de séquence « Infermier» ............................................................................... 15
Figure 6 : Diagramme de séquence « Secrétaire» .............................................................................. 16
Figure 7 : Diagramme de séquence « Utilisateur» ............................................................................. 16
Figure 8 : Diagramme de séquence « Prendre une rendez-vous» ...................................................... 17
Figure 9 : L'interface principale d'application.................................................................................... 32
Figure 10 : L’interface pour prendre un rendez-vous ........................................................................ 33
Figure 11 :Fenêtre d'authentification ................................................................................................. 34
Figure 12 : L'interface admission. ...................................................................................................... 34
Figure 13 : Menu de la gestion de rendez-vous ................................................................................. 35
Figure 14 ’Interface d’ajouter un patient ........................................................................................... 35
Figure 15 : Menu de la gestion de patient .......................................................................................... 36
Figure 16 ’Interface de la gestion de consultation ............................................................................. 36
Figure 17: Menu constante ................................................................................................................. 37
Figure 18: La liste des constantes ...................................................................................................... 37
Figure 19:L’Interface d’ajouter une consultation .............................................................................. 38
Figure 20: Menu de la gestion des consultations ............................................................................... 38
Figure 21 : L’Interface d’ajouter une ordonnance ............................................................................. 39
Figure 22 :L’Interface de la gestion d'hospitalisation ........................................................................ 39
Figure 23 L’Interface d’ajouter une hospitalisation ........................................................................... 40
Figure 24 : Menu de la gestion d’hospitalisation ............................................................................... 40
Figure 25 : Menu de la gestion de dossier médical, la facture et le rapport journalier ...................... 41
Figure 26 : Interface d’administrateur................................................................................................ 41
Figure 27 : Menu de la gestion de rendez-vous archiver ................................................................... 42
Figure 28 : Menu de la gestion des comptes des utilisateurs ............................................................. 42
Figure 29 : Menu de voir historique des connexions ......................................................................... 43
Figure 30 : Menu de la gestion des autres opérations ........................................................................ 43
Figure 31 : Menu de la gestion des chambres et les lits ..................................................................... 44
Figure 32 : Menu de la gestion des examens médicaux ..................................................................... 44
Figure 33 : Menu de la gestion des chambres et les lits ..................................................................... 45
10
Listes des tables
Tableau 1 : Rôles des administrateurs ................................................................................................ 16

Tableau 2 : Rôles des infermiers ........................................................................................................ 17
Tableau 3 : Rôles des secrétaires ....................................................................................................... 17
Tableau 4 : Rôles des médecins ......................................................................................................... 18
Tableau 5 : Rôles des patients ............................................................................................................ 18
Tableau 6 : Classe « Administration » ............................................................................................... 20
Tableau 7 : Classe « Dossier médicale » ............................................................................................ 20
Tableau 8 : Classe « Patient» ............................................................................................................. 20
Tableau 9 : Classe « RDV» ................................................................................................................ 21
Tableau 10 : Classe « Consultation» .................................................................................................. 21
Tableau 11 Classe « Facture» ............................................................................................................ 11
Tableau 12 : Classe « Médecin» ........................................................................................................ 22
Tableau 13 Classe «Ordonnance» ...................................................................................................... 22
10
Liste des acronymes
PHP Hypertext Preprocessor en Anglais soit un langage de script.
HTML HyperText Markup Language, langage de balises pour l'hypertexte.
CSS Cascading Style Sheets, permet de créer des pages web à l'apparence soignée.
DM Dossier médicale.
RDV Rendez-vous.
XAMPP X Apache MySQL Perl PHP,un ensemble de logiciels permettant de mettre en place
un serveur Web local.
UML Unified Modeling Language,langage de modélisation unifié.
10
Introduction générale
La gestion des données de manière automatisée occupe aujourd'hui une place privilégiée
dans l'informatique. Grâce à cette technologie, le temps passé à rechercher des données est
fortement réduit, laissant présager qu'elle a encore de beaux jours devant elle.C'est dans ce
contexte que certaines entreprises tentent d'exploiter au maximum ces technologies afin
d'augmenter leur productivité et font face à des problématiques douloureuses qui peuvent
constituer des freins au progrès.
Dans ce projet, nous passerons par 3 phases. Premièrement, nous obtiendrons les
informations et les différentes tâches de l'application, et la deuxième étape utilisera des outils
de modélisation UML pour la modélisation et la conception du système. La troisième phase
mettra en œuvre le projet à l'aide d'outils de développement tels que Visual Studio (html, css,
javascript), contrôle de base de données avec (php), en utilisant des composants dans l'outil
PHPMyadmin.
Le projet apporte une solution pour la gestion de la clinique à travers une application web
Tenez-en également compte pour un bon fonctionnement. Toute personne autorisée peut gérer
compte, médecin ou patient. Notre objectif est de compléter la population de la base de
données Les données sont à la fois un moyen de gérer diverses opérations et un outil de
configuration Il est chargé de traiter toutes les demandes reçues par les participants et d'y
répondre dans les meilleurs délais en accédez à la base de données après authentification pour
faciliter les tâches de la clinique.
10
Chapitre1 : Contexte général et analyse du projet
10
1.1 Présentation générale :

L’internet est aujourd’hui le premier réseau mondial accessible à toutes les
entreprises.Word Wide Web est la partie de l’application de l’internet dont on parle le
plus.C’est une technologie qui permet à partir d’un logiciel client appelé navigateur(ou
browser)d’accdéer facilment à des document stockés sur un serveur connecté à l’internet.Avec
le web,l’internet s’ouvre au grand public et ne n 'éccessite plus de connaissances spécifiques
en informatique.Le modèle Intenet est celui du client serveur, ou un programme client
donner la main à l’utilisateur de soumettre des requêtes à un serveur Web et de visualiser le
résultat.
Nous présenterons dans le premier chapitre le Contexte général et la descriptio

description du
projetLe chapitre deux contient plusieurs diagrammes UML (diagrammes de classes,
diagrammes de cas d'utilisation, diagrammes de séquence) et bases de données.Finalement,
données. Le
troisième chapitre est une présentation des outils que nous avons utilisés pendant le
développement et la description de l'application et Comment ça fonctionne.
1.2 Définition de l’application web :

Une application web désigne un logiciel applicatif hébergé sur un serveur et accessible
via un navigateur web.
Contrairement à un logiciel traditionnel, l’utilisateur d’une application web n’a pas besoin
de l’installer sur son ordinateur. Il lui suffit de se connecter à l’application à l’aide de son
navigateur. La tendance actuelle est d’offrir une expérience utilisateur et des fonctionnalités
équivalentes aux logiciels directement installés sur les ordinateurs. Les technologies utilisées
pour développer les applications web sont les mêmes que celles employées dans la création des
sites internet .
10
1.3 Définition de clinique :
La gestion d’un cabinet médical est un emploi complexe. Cependant, les premières années de
Construction des cabinets médicaux et les médecins s’orientaient à un objectif bien déterminé, celui-ci se
résumait à comment travailler avec les patients à l’aide de moyens faciles et rapides. Mais malgré tous
les efforts des médecins il reste des difficultés, parmi lesquelles: L’archivage des dossiers des patients
sur des feuilles peut engendrer leur perte et perdre beaucoup de temps pour trouver un dossier ; la
modification d’un élément dans un dossier peut obliger le médecin à refaire un nouveau dossier. A cause
de ces difficultés, les médecins préfèrent s’approprier des bénéfices liés à l’informatisation de la gestion
de leurs cabinets médicaux dans le but de simplifier, sécurisé et minimisé leur travail.
1.4 Problématiques d’ un clinique :
 Perte de temps.
 Difficulté des stockage.
 Risque de perte des archives.
 Recherche difficile sur les registres.
 Détérioration des archives à cause de leur utilisation trop fréquente.
11
1.5 Analyse des fonctionnels :

1.5.1 Besoins fonctionnels :
Les besoins fonctionnels se rapportent aux fonctionnalités que l'application en question
doit offrirpour satisfaire les utilisateurs.
Les fonctionnalités que doit intégrer l'application à développer peuvent être décrites comme suit :
-Gestion des dossiers médicales: contenant des données des patients (identité, âge, adresse,
profession,etc.).
-Gestion des rendez-vous: qui permet aux patients de prendre un rendez-vous sans devoir
interagir avec unmembre du personnel administratif.
-Gestion des patients : l’application offre au les admins une interface qui permet de consulter
lesinformations des patients, liste de ses patients,leurs consultations et la liste des rendez-vous.
-Authentification : le système doit permettre à l'utilisateur de saisir son login et son mot de
passe pour accéder au système. Cette opération assure la sécurité du système et limite le nombre
des utilisateurs.
-Gestion des factures : l’application offre au les admins une interface qui permet de
consulter les facturesdes patients.
1.5.2 Besois non fonctionnels :

Les besoins non fonctionnels représentent les règles à respecter afin d’assurer une bonne
qualité de l’application à achever et le bon fonctionnement du futur système. Quant aux besoins
non fonctionnels, ils serécapitulent en :
- Contraintes ergonomiques : (Le système doit) o Permettre aux utilisateurs de se familiariser

rapidement avec le contenu o Être simple et compréhensible .
- Contraintes techniques : o L’accès à la base de données doit être rapide et sécurisée o

L’application doit être toujours effective o Temps de réponse minimum.
12
Figure 1: Arborescence de l’application
2021/2022
Déconnexion Administration Patient Hospitalisation Consultation Admission

Gestion d’un clinique
13
Prendre une Connexion
rendez-vous
1.6 Arborescence
Application web
Page d’accueil
2 Chapitre 2 : Conception du projet
14
2.1 Introduction :
La conception est une phase importante avant la réalisation de tout projet, Cette phase
nécessite des méthodes permettant de mettre en place un modèle sur lequel on va s'appuyer.
C’est à dire créer une représentation similaire à la réa
réalité
lité de telle façon à faire ressortir les
points auxquels on s'intéresse. Nous allons commencer ce chapitre par la présentation de la
méthodologie d’analyse, en justifiant la raison du choix de cette méthodologie pour mon
application, nous allons montrer ensuite les acteurs de l’application et leurs rôles, ainsi que les
différents diagrammes UML.
2.2 Méthodologie d’analyse :

2.2.1 Le langage UML
Définition :
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.
Pourquoi UML ?
Nous avons choisi de travailler avec UML parce qu’il exprime mieux la vue statique et
dynamique du système d'information et, pour notre application Web, il est nécessaire de faire
une analyse très approfondie pour pouvoir dégager les nécessités de développement ainsi que
quelques scénarios d'exécution.
15
2.3 Outil de modélisation :

2.3.1 Entreprise Architect :
Enterprise Architect 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 conception et de modélisation
les plus reconnus.
2.4 Modélisation du contexte :

2.4.1 Identification des acteurs:
Un acteur est une entité externe qui agit sur le système. Le terme acteur ne désigne pas
seulementles utilisateurs humains mais également les autres systèmes. Les acteurs de notre
application sont :
Tableau 1 : Rôles des administrateurs
Acteur Rôles
S’authentifier
Gestion des Patients :
-Ajouter/Modifier/Supprimer un patient
- Consulter/Exporter la liste des patients
Administrateur
Gestion des rendez-vous :
-Ajouter/Modifier/Supprimer un rendez-vous
- Consulter/Exporter la liste des rendez-vous
Gestion des Dossiers médicales :
16
-Ajouter/Modifier/Supprimer un dossier médicale

- Consulter la liste des dossiers médicales
- Consulter la liste des hospitalisations
-Impimer un dossier médicale et une facture
Gestion des infermeirs :
-Ajouter/Modifier/Supprimer une infermier
- Consulter/Exporter la liste des infermeirs.
Gestion des sécretaires :
-Ajouter/Modifier/Supprimer une sécretaire
- Consulter/Exporter la liste des sécretaires.
Gestion des médcins :
-Ajouter/Modifier/Supprimer un médcin
- Consulter/Exporter la liste des médcins
Gestion des consultations :
- Ajouter/Modifier/ une consultation
Tableau 2 : Rôles des infermiers
Acteur Rôles
- S’authentifier
- Consulter la liste des patients
Infermier
- Consulter la liste des rendez-vous
-Ajouter/Modifier/ une consultation
- Ajouter/Supprimer un patient
Tableau 3 : Rôles des secrétaires
Acteur Rôles
- S’authentifier
Sécretaire
- Ajouter/Supprimer un patients
17
Tableau 4 : Rôles des médecins
Acteur Rôles
- S’authentifier
-Ajouter/Modifier/ une consultation
Médecin - Ajouter/Supprimer un patient
-Ajouter/Modifier/Supprimer un dossier médicale
- Consulter liste des dossiers médicales.
-Impimer un dossier médicale
-Impimer une facture
Tableau 5 : Rôles des patients
Acteur Rôles
Patient -Prendre une rendez-vous
2.4.2 Diagramme de classes :

Un diagramme de classe est un diagramme UML qui contient des classes, des interfaces,
des packages et leurs relations, et qui fournit une vue logique de tout ou partie d’un système
informatique. On construit un diagramme de classes pour simplifier l’interaction des objets d’un
système qu’on est en train de modéliser. Ces diagrammes expriment la structure statique d’un
systèmeen termes de classes et de relations entre eux.
Une classe décrit un ensemble d’objets et une association décrit un ensemble de liens. Un
diagramme de classe n’exprime rien de spécifique concernant les liens d’un objet particulier,
mais il décrit, le lien potentiel entre un objet et d’autres objets.
18
Figure 2 : Diagramme de classes
19
Tableau 6 : Classe « Administration »
Classe : Administration
Nom Type Description
id_admin int(11) Un id unique pour chaque utilisateur
adress_admin string Adresse de l’utilisateur
nom_ admin varchar(255) Nom de l’utilisateur
prénom_ admin varchar(255) Prénom de l’utilisateur
Tel_admin int(11) télephone de l’utilisateur
**« id_admin» représente la clé primaire de la table adminidtration.
Tableau 7 : Classe « Dossier médicale »
Classe : DM
Num_DM int(11) Un id unique pour chaque DM
Num_chambre int(11) Nombre des chambres
Num_conlt int(11) Un id unique pour chaque consultation
Num_med int(11) Un id unique pour chaque médecin
Num_pat int(11) Un id unique pour chaque patient
Nombre des sejours
Num_sejour int(11)
Date_DM date Date de prendre le DM
Type_analyse Varchar(255) Type d’analyse
**« Num_DM» représente la clé primaire de la table DM.

**« Num_conlt» ,«id_med» e t «Num_pat» représentent les clés étrangères de la table DM.
Tableau 8 : Classe « Patient»
Classe : Patient
Num_DM int(11) Un id unique pour chaque DM
Adresses_pat string Adresse des patients
Nom_pat varchar(255) Nom des patients
Prenom_pat Varchar(255) Prénom des patients
Tele_pat int(11) Télephone des patients
**« Num_DM» représentent la clé étrangère de la table patient.

**« Num_pat» représente la clé primaire de la table patient.
20
Tableau 9 : Classe « RDV»
Classe : RDV
Num_RDV int(11) Un id unique pour chaque RDV
heure_RDV date heure des RDV
Date_RDV date Date des RDV
**« Num_RDV» représente la clé primaire de la table RDV.

**« Num_pat» représentent la clé étrangère de la table RDV.
Tableau 10 : Classe « Consultation»
Classe : Consultation
Num_conslt int(11) Un id unique pour chaque consultation
heure_conslt date heure des consultations
Date_conslt date Date des consultations
**« Num_conslt» représente la clé primaire de la table consultation.

**« Num_pat» clé étrangère de la table consultation.
Tableau 11 Classe « Facture»
Classe : Facture
Num_fct int(11) Un id unique pour chaque facture
heure_fct date heure des factures
Prix_total Int(11) Prix total des factures
Date_fct date Date des factures
**« Num_fct» représente la clé primaire de la table facture.

**« Num_pat» représentent la clé étrangère de la table facture.
21
1
Tableau 12 : Classe « Médecin»
Classe : Médecin
Num_med int(1 Un id unique pour chaque médecin
1)
Nom_med varchar(255) Nom des médecins
spécialité string Spécialité des médecins
Tele_med Int(11) Télephone des médecins
Prenom_med varchar(255) Prenom des médecins
**« Num_med» représente la clé primaire de la table médecin.
Tableau 13 Classe «Ordonnance»
Classe : Ordonnance
Num_ord int(11) Un id unique pour chaque médecin
Date_ord date Date des ordonnances
Heure_ord date Heure des ordonnances
Dosage_ord int(11) Dosage des ordonnances
**« Num_ord» représente la clé primaire de la table ordonnance.
**« Num_pat» représentent la clé étrangère de la table ordonnance.
21
2
2.4.3 Diagramme de cas d’utilisation :

Les cas d’utilisation décrivent le comportement du système du point de vue de l’utilisateur
sous la forme d’actions et de réactions. Un cas d’utilisation indique une fonctionnalité du
système déclenché par un acteur externe au système. Dans cette partie, nous allons présenter le
cas d’utilisation global.
Diagramme de cas d’utilisation global :

Le diagramme ci-dessous montre l'ensemble des cas d'utilisation et décrit les exigences
fonctionnelles du système. Chaque cas d'utilisation correspond donc à une fonction métier du
système, selon le point devue de l'un de ses acteurs. Les spécifications fonctionnelles découlent
directement du diagramme de cas d’utilisation. Il s’agit de reprendre chaque cas et de décrire
très précisément les interactions des acteurs avec le système.
Figure 3 :Diagramme de cas d’utilisation
21
3
2.4.4 Les diagrammes de séquence

Les cas d’utilisation décrivent le comportement du système du point de vue de l’utilisateur
sous la forme d’actions et de réactions. Un cas d’utilisation indique une fonctionnalité du
système déclenché par un acteur externe au système. Dans cette partie, nous allons présenter le
cas d’utilisation global. Puis nous allons présenter les cas d’utilisation de chaque acteur avec
leurs descriptions textuelles, qui sont :
Figure 4 : Diagramme de séquence « Administration »
Le premier scénario pour l'administrateur consiste à s'authentier au système.La chronologique de

ce scénario est représentée par la figure 4.
21
4
Figure 5 : Diagramme de séquence « Infermier»
Ce diagramme représente le diagramme de séquence détaillé "Ajouter une consultation" est

représentépar la figure 5.
21
5
Figure 6 : Diagramme de séquence « Secrétaire»
La sécretaire a la possibilité d’ajouter une patients est représentée par la figure 6.
Figure 7 : Diagramme de séquence « Utilisateur»
21
6
On considère le cas de la réussite de la saisie. L’utilisateur peut être soit l’administrateur soit
le médecin soit l’infermier ou la secrétaire. L’authentification est une étape fondamentale dans
l’application. Pour accéder au système, l’utilisateur introduit son nom d’utilisateur et mot de
passe. Si les informations sont correctes une page d’accueil s’affiche selon l’utilisateur, si non le
système renvoie un message d’erreur.
Chaque utilisateur du système (Administrateur, médecin, secrétaire,infermier) possède des

privilèges d’accès définis auparavant par l’administrateur de l’application tout ça est représentée
par la figure 7.
Figure 8 : Diagramme de séquence « Prendre une rendez-vous»
Le scénario d'ajout d'un rendez-vous au planning du médecin se fait selon la chronologie

représentée par la figure 8.
21
7
3 Chapitre 3 : Réalisation du projet
21
8
3.1 Introduction :
Dans ce chapitre on va parler des outils et des langages de développement, les étapes de la
réalisation et nous allons montrer quelques captures d’écran pour avoir une idée sur
l’application et son fonctionnement.
3.2 Les outils de développment :

3.2.1 HTML 5 :
L'HTML est un langage informatique utilisé sur l'internet. Ce langage est utilisé pour créer
des pages web.ce qui signifie "langage de balisage d'hypertexte". Cette signification porte bien
son nompuisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure
de balisage.
3.2.2 CSS3 :
Le terme CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire par
"feuilles de style en cascade". Le CSS est un langage informatique utilisé sur l'internet pour
mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les fichiers
CSS, comprennent du code qui permet de gérer le design d'une page en HTML
21
9
3.2.3 PHP:
PHP ce langage est principalement utilisé pour produire un site web dynamique. Il est
courant que ce langage soit associé à une base de données, tel que MySQL. Exécuté du côté
serveur (l'endroit où est hébergé le site) il n'y a pas besoin aux visiteurs d'avoir des logiciels ou
plugins particulier. Néanmoins, les webmasters qui souhaitent développer un site en PHP
doivent s'assurer que l'hébergeur prend en compte ce langage.
3.2.4 JavaScripts :
JavaScript (souvent abrégé JS) est un langage de programmation de scripts principalement

utilisé dans les pages web interactives mais aussi côté serveur. C'est un langage orienté objet
à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par
des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de
constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage
qui permet d'en créer des objets héritiers personnalisés.
3.2.5 JQuery :
JQuery est un Framework JavaScript sous licence libre qui permet de faciliter des
fonctionnalités communes de JavaScript. L'utilisation de cette bibliothèque permet de gagner du
temps de développement lors de l'interaction sur le code HTML d'une page web, l'AJAX ou la
gestion des évènements. JQuery possède par la même occasion l'avantage d'être utilisable sur
plusieurs navigateurs web (Internet Explorer, Firefox, Chrome, Safari ou Opera).
30
3.2.6 PHPMyAdmin :
phpMyAdmin est une application web qui permet de gérer un serveur de bases de données
MySQL. Dans un environnement multi
multi-utilisateurs,
utilisateurs, cette interface écrite en PHP permet
également de donner à un utilisateur un accès à ses propres bases de données.
3.2.7 Boostrap :
Bootstrap est un Framework destiné aux applications web. Développé par Twitter et
distribué sous licence Apache, c'est un outil à considérer lors du développement rapide
d'applications web. L'utilisation combinée du HTML, du CSS, et du JavaScript propose
Bootstrap dépasse les Framework CSS classiques et propose carrément des éléments graphiques
complets avec une garantie maximale de compatibilité entre les divers navigateurs.au
développeur des méthodes de développemen
développement très efficaces.
31
3.2.8 XAMPP :
XAMPP est un ensemble de logiciels permettant de mettre en place facilement un serveur

Web, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de
logiciels libres offrant une bonne souplesse d'utilisation, réputé
réputéee pour son installation simple et
rapide. Ainsi, il est à la portée d'un grand nombre de personnes puisqu'il ne requiert pas de
connaissances particulières et fonctionne, de plus, sur les systèmes d'exploitation les plus répandus.
3.3 Présentation de l’applica

l’application :
3.3.1 Interface du visiteur :
La page d’accueil est l’une des pages les plus importantes d’un site web. C’est sur elle que la
plupart des visiteurs du site se font leur première impression et leur ressenti sur notre formation et
nos offres. C’est lavitrine de notre activité.
Notre site est entièrement réactif et compatible avec tous les navigateurs modernes,
fonctionne avec n'importe quel appareil et une taille d'écran. Il est construit avec la dernière
version de Bootstrap.
Figure 9 : L'interface principale d'application
32
Votre interface de l’ application clinic+ Il comporte :
 Un bouton pour prendre une rendez-vous

 Un bouton pour connecter
connecter
 E-mail et la numéro de téléphone de clinique avec une description de l’application
l’application
 Interface d'ajouter un nouveau rendez-vous :
Figure 10 : L’interface pour prendre un rendez

rendez-vous
Cette interface permet au visiteur d’ajouter les informations :

 Le nom complet
 Téléphone
 Maladie
 la date de rendez-vous
vous et leur heure
33
 Authentification :
Figure 11 :Fenêtre d'authentification
Figure 11:Fenêtre d'authentification

une fenêtre s'affiche à l'écran, elle demandera d'introduire le nom d'utilisateur et le mot de passe
déjà attribué par l’administrateur pour commencer à utiliser notre application,les utilisatuers qui
connecter a l’application est : administrateur,sécretaire,médecin,infermier.
3.3.2 Interface de l’utilisateur :

 Admission :
Figure 12 : L'interface admission.
Espace admission contient : les rendez-vous,les

vous,les anciens patients,les nouveaux patients.
34
 La liste des rendez-vous :


Figure 13 : Menu de la gestion de rendez-vous
La gestion des rendez-vous est une tâche essentielle de l’utilisateur, celle-ci vérifie la disponibilité
de la datedemandée, il donne la possibilité de supprimer un rendez-vous et d’après la supprission il
archivé.
 Nouveau patient :
’Interface d’ajouter un patient
Figure 14 ’Interface d’ajouter un patient
Cette interface permet au utilisateur d’ajouter les informations de leurs patient, chaque patient a
unidentifiant
35
 Liste des patients:

patients:

Figure 15 : Menu de la gestion de patient
Cette interface permet à l’utilisateur d’afficher et rechercher dans la liste des patients,il donne la
possibilitéd’imprimer le fiche patient
Consultation :
Espace consultation contient : les constantes,les consultations patients,les registres consultations.
Figure 16 ’Interface de la gestion de consultation
36
 Constante :
Figure 17: Menu constante
Cette interface nous permet de saisir les nouvelles prises qui contient (température,poids,tension..)
Et afficher les anciennes.
 Anciennes :
Figure 18: La liste des constantes
37
 Consultations patients :
Cette interface nous permet de saisir les nouveaux consultations et afficher les anciennes
et dans ceformulaire on la possibilité d’ajouter la facture total .
 Nouvelle consultation :
Figure 19:L’Interface d’ajouter une consultation
 Toutes les consultations :
Figure 20: Menu de la gestion des consultations
Cette interface permet à l’utilisateur d’afficher la liste des consultaions et donner la possibilité
d’ajouterdes ordonnances et des examens pour un patient et suivi les examens.
38
 Ordonnance :
Figure 21 : L’Interface d’ajouter une ordonnance
 Hospitalisation :
Figure 22 :L’Interface de la gestion d'hospitalisation
Espace consultation contient :les hospitalisations des patients,les registres des hospitalisations.
39
 Hospitalisations des patients :
Figure 23 L’Interface d’ajouter une hospitalisation
Ce formulaire contient des informations d’un patient dans un clinique comme :premiers
soins,motif,lechambre et le lit de patient.
On a remplir le formulaire et cliqué sur valider.
 Registre des hospitalisations :
Figure 24 : Menu de la gestion d’hospitalisation
Cette interface afficher toutes les hospitalisations et donner la possibilité de changer le lit et
afficher laconsultation de patient.
40
 Patient :
Figure 25 : Menu de la gestion de dossier médical, la facture et le rapport journalier
On peut dire que cette section contient toute les operations qu’on peut faire dans un clinique
et aussidonner la possibilité d’impimer soit un dossier médicale,une facture ou bien un rapport
journalier.
 Administration :
Figure 26 : Interface d’administrateur
Cette figure représente l'accueil de l'administrateur après son authentification.

Espace administration contient : rendez-vous archiver, les comptes d’utilisateurs, des autres
traitementet le historique des connexions.
41
 Rendez-vous archiver :
Figure 27 : Menu de la gestion de rendez-vous archiver
Cette interface contient tous les rendez-vous archivé dans notre application et donner la
possibilité derestorer les rendez-vous disponible.
 comptes d’utilisatuers :
Figure 28 : Menu de la gestion des comptes des utilisateurs
Cette section contient toute les utilisateurs qui connecter a l’application : administrateur, secrétaire,
infermieret le médecin et aussi donner la possibilité de désactivé un utilisateur tout ça est gérer par
administrateur.
42
 historique des connexions :
Figure 29 : Menu de voir historique des connexions
Cette interface contient toute les informations des connexions que ce soit :
 Nombre de session
 Date de début de session
 Date de fin de session
 Autres :
Figure 30 : Menu de la gestion des autres opérations
Espace autres contient :les matériels médicals,les examens médicaux et les produits à prescrire.
43
 Matériel médical :
Figure 31 : Menu de la gestion des chambres et les lits
Cette interface nous permet de saisir les nouveaux chambre et chaque chambre contient
plusieurs lits etdans ce formulaire on la possibilité de supprimer les chambres et les lits
 Examens médicaux :
Figure 32 : Menu de la gestion des examens médicaux
Cette interface contient la liste des examens médicaux et une bouton pour supprimer un examen
44
 produits à prescrire :
Figure 33 : Menu de la gestion des chambres et les lits
Cette interface nous permet de saisir les nouveaux porduits et chaque produits admet un
nom,une formats,dossages et un prix et dans ce formulaire on la possibilité de supprimer les
produits.
3.4 Conclusion :
Dans ce chapitre nous avons présenté les aspects pratiques liés à la réalisation du notre
application web, à savoir les outils de développement nécessaires pour le fonctionnement de
l’Application. En dernier, nous avons illustré quelques interfaces graphiques de notre
Application.
45
Conclusion générale
Le développement de nos applications web nous permet de faire face à une expérience
professionnelle dans le domaine du développement d'applications que nous ne pouvons que qualifier
de riche. De plus, cela nous donne l'opportunité de concrétiser nos connaissances théoriques à
travers un cas réel. Ce projet nous apporte donc les langages de programmation qui nous tiennent le
plus à cœur et une plateforme pour notre découverte et notre pratique.
Nous avons couvert toutes les étapes nécessaires à la conception et au développement d'une
application Web dans ce rapport. Cette application est spécialement développée pour l'usage des
cinq acteurs, Visiteur, Administrateur, Infirmier, Médecin et Secrétaire, et les besoins sont bien
analysés puis soigneusement conçus pour notre base de données, notre interface nous permet de
répondre à tous les besoins du clinique
. Ceci est réalisé en testant certains scénarios d'exécution de notre application.
Cependant, comme tout informaticien attentif aux observations techniques, nous proposons
quelques pistes d'amélioration et de développement de notre travail.
Notre future application, l'objectif est de fournir la meilleure gestion de la clinique de manière
sécuritaire. Nous envisageons des améliorations à notre application web, telles que l'ajout de
fonctionnalités pour modifier les consultations ou les rendez-vous des patients et les documents
médicaux, une base de données de tous les patients que nous avons visités (et leurs coordonnées...),
un système de réservation des rendez-vous, l'impression de documents médicaux ou de facture.
.
46
Bibliographie
Cours : (Filière SMI - Faculté des Sciences de Kénitra)
[1] Pr. Abdelalim Sadiq. « Cours Technologie du Web ». 2018/2019.
[2] Pr. Jalal Laassiri. « Cours C.O.O (UML) ». 2019/2020.
[3] Pr. Ikram Elazami. « Cours Bases de données ». 2019/2020.
[4] Pr. Moulay El Hassan Charaf . « Cours Bases de données II ». 2019/2020.
Autre Cours :
[5] Pr. Hatim Karraz Aroussi. « Programmation Web en Javascript et Jquery ».
[6] Rémy Malgouyres. « Programmation Web en PHP, Conception, Architectures et

Développement deWeb Services ».
Sites Internet :
[7] https://getbootstrap.com/
[8] https://www.memoireonline.com/
[9] https://www.pdfprof.com/
[10] https://medexa.com/
[11] http://www.oujood.com/php/bdd-inserer-donnees.php
[12] https://www.pierre-giraud.com/
47

Conception Et Développement D'une Application Web de Gestion D'un Clinique

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Conception Et Développement D'une Application Web de Gestion D'un Clinique

Transféré par

Droits d'auteur :

Formats disponibles

Université Ibn Tofail

Projet de fin d’étude

Sciences Mathématiques et Informatiques(SMI)

Conception et développement d’une

Année universitaire :2021/2022

Réalisé par : Encadré par :

Jaafar ES SAGHIR Mr. El bachir AMEUR

Faculté des sciences Kenitra

Que ce présent rapport dédie nos amours innés à nos parents

Nous tenons à exprimer nos remerciements avec un grand plaisir et un

Table des matières

3.2.8 XAMPP : ............................................................................................................ 32

Liste des figures

Figure 1: Arborescence de l’application ............................................................................................ 13

Listes des tables

Tableau 1 : Rôles des administrateurs ................................................................................................ 16

Liste des acronymes

PHP Hypertext Preprocessor en Anglais soit un langage de script.

HTML HyperText Markup Language, langage de balises pour l'hypertexte.

un serveur Web local.

UML Unified Modeling Language,langage de modélisation unifié.

Chapitre1 : Contexte général et analyse du projet

1.1 Présentation générale :

Nous présenterons dans le premier chapitre le Contexte général et la descriptio

1.2 Définition de l’application web :

1.3 Définition de clinique :

1.4 Problématiques d’ un clinique :

1.5 Analyse des fonctionnels :

1.5.2 Besois non fonctionnels :

- Contraintes ergonomiques : (Le système doit) o Permettre aux utilisateurs de se familiariser

- Contraintes techniques : o L’accès à la base de données doit être rapide et sécurisée o

Déconnexion Administration Patient Hospitalisation Consultation Admission

2 Chapitre 2 : Conception du projet

2.2 Méthodologie d’analyse :

2.3 Outil de modélisation :

Enterprise Architect est un logiciel de modélisation et de conception UML, édité par la

2.4 Modélisation du contexte :

-Ajouter/Modifier/Supprimer un dossier médicale

Tableau 3 : Rôles des secrétaires

Tableau 4 : Rôles des médecins

2.4.2 Diagramme de classes :

Figure 2 : Diagramme de classes

Tableau 6 : Classe « Administration »

**« id_admin» représente la clé primaire de la table adminidtration.

Tableau 7 : Classe « Dossier médicale »

**« Num_DM» représente la clé primaire de la table DM.

Tableau 8 : Classe « Patient»

**« Num_DM» représentent la clé étrangère de la table patient.

Tableau 9 : Classe « RDV»

**« Num_RDV» représente la clé primaire de la table RDV.

Tableau 10 : Classe « Consultation»

**« Num_conslt» représente la clé primaire de la table consultation.

Tableau 11 Classe « Facture»

**« Num_fct» représente la clé primaire de la table facture.

Tableau 12 : Classe « Médecin»

**« Num_med» représente la clé primaire de la table médecin.

Tableau 13 Classe «Ordonnance»

**« Num_ord» représente la clé primaire de la table ordonnance.

**« Num_pat» représentent la clé étrangère de la table ordonnance.

2.4.3 Diagramme de cas d’utilisation :

Diagramme de cas d’utilisation global :

Figure 3 :Diagramme de cas d’utilisation

2.4.4 Les diagrammes de séquence