Université de BLIDA 1

Faculté des sciences

Département d’informatique

RAPPORT DE FIN D’ÉTUDES POUR L’OBTENTION DU DIPLÔME DE LICENCE EN

INFORMATIQUE

Option : Ingénierie des systèmes informatiques et logiciels

Réalisation d'une Site Web de

gestion des dons de sang au centre
de transfusion sanguine de BLIDA

Réalisé par :

● BOUROUBA Mohamed Anis.

● MESSAOUDI Toufik.
● ZAIDI Mohamed Haithem.

Encadreur :

● Dr........

Année universitaire : 2023/2024.

1
Table des matières :

Remerciements 4

Liste des figures et tableaux 6-7

CHAPITRE I : INTRODUCTION GENERALE : 8

1. introduction 8

2. problematique. 8

3. OBJECTIFS du projet. 9

4. STRUCTURE DU PROJET. 9

CHAPITRE II : ANALYSE ET CONCEPTION : 10

I. INTRODUCTION. 10

1. Phase d’analyse. 10

2. Phase de conception. 10

2.1. Définition d’UML. 10

2.2. Les types de diagrammes UML. 10

2.3. Les raisons du choix d’UML. 11

2.4. Avantages et inconvénients d’UML. 11

II. CAPTURE DES BESOINS. 11

1. Identification des besoins du système. 11

2. Identification des acteurs et des cas d’utilisation. 11

III. CONCEPTION DU SYSTÈME. 12

1. Diagrammes des cas d’utilisations. 12

2. Diagrammes de séquences. 13

3. Diagrammes de classes 18

2
 IV. CONCLUSION. 19

CHAPITRE III : IMPLÉMENTATION DE L’APPLICATION : 20

I. INTRODUCTION. 20

II. ENVIRONNEMENTS DE DÉVELOPPEMENT. 20

III. DÉPLOIEMENT DE L’APPLICATION. 23

IV. CONCLUSION. 31

CHAPITRE IV : CONCLUSION GÉNÉRALE. 32

RÉSUMÉ 33

BIBLIOGRAPHIE. 35

3
Remerciements :

Je tiens remercier avant tout nos Dieu tout puissant de m’avoir accordé volonté et

patience pour accomplir ce travail. Mes remerciements les plus sincères vont à tous ceux qui ont

contribué de près ou de loin à la réalisation de ce travail en particulier:

-Notre promoteur DR. pour leur encadrement, et pour l’effort fournit, les conseils

efficaces et sa patience dans la suivie.

-Les membres de jury pour avoir accepté la participation au jury de ce travail.

-Notre chef de département Mr Oueld Aissa

- Tous les enseignants et le personnel du département d’informatique.

A TOUT MERCI

4
Liste des figures :

Figure 1 : Diagramme de cas d’utilisations général_______________

Figure 2 :Diagramme de classe_______________________________
Figure 3 HTML____________________________________________
Figure 4:CSS______________________________________________
Figure 5:JAVA SCRIPT_______________________________________
Figure 6:PHP MYADMIN____________________________________
Figure 7:VS CODE__________________________________________
Figure 8:STAR UML________________________________________
Figure 9:Page d'accueil de l’application.________________________
Figure 10:About us page____________________________________
Figure 11:Reviews_________________________________________
Figure 12:Page service______________________________________
Figure 13:Our team page____________________________________
Figure 14:Page des questions________________________________
Figure 15: Register page____________________________________
Figure 16: login page_______________________________________
Figure 17:Cote user________________________________________
Figure 18: Reciever form____________________________________
Figure 19: Donor form______________________________________
Figure 20: cote admin______________________________________
Figure 21:donors page______________________________________
Figure 22:Recievers page____________________________________
Figure 23:profile page______________________________________

5
6
Liste des tableaux :

7
 CHAPITRE 1 : INTRODUCTION GÉNÉRALE

I- Introduction :
-Le don de sang consiste à offrir volontairement une partie de son sang

pour aider ceux qui en ont besoin, que ce soit après un accident, lors

d'une opération ou pour traiter certaines maladies. Cette action est

cruciale pour sauver des vies.

-Le Centre de Transfusion Sanguine(CTS) de BLIDA a mis en travail le 19

avril-2005 et ce CTS ce situe en approximation de l'hôpital Ferroudja, rue

des frères Ramoul, Blida.

Le CTS de BLIDA est une installation spécialisée dédiée à la collecte, au

test, au traitement, au stockage et à la distribution de sang et de produits

sanguins. Ce centre jouent un rôle crucial dans l'assurance que des

approvisionnements en sang sûrs et adéquats sont disponibles pour les

traitements médicaux et les urgences.

II- problématique :

Avant les sites web, le CTS de BLIDA faisait face à de nombreux défis

logistiques et organisationnels. Les campagnes de sensibilisation

reposaient sur des méthodes traditionnelles, limitant leur portée. La

difficulté à localiser les points de collecte et les horaires décourageait les

donneurs potentiels. La gestion des donneurs était laborieuse et sujette à

des erreurs, entraînant une mauvaise coordination. En cas d'urgence,

mobiliser rapidement les donneurs était presque impossible. Ces obstacles

limitaient l'efficacité des campagnes de don et la capacité à maintenir des

réserves adéquates.

8
III- Objectifs du projet :

- Notre site web de don de sang a plusieurs objectifs clés visant à

promouvoir et à faciliter le don de sang pour le CTS de BLIDA. Ces
objectifs peuvent inclure :

1. Faciliter et encourager le don de sang en développant une

plateforme fiable et sécurisée.

2. Sensibiliser et informer le public sur l'importance du don

de sang et ces bénéfices.

3. Simplifier le processus de prise de rendez-vous pour les

donneurs potentiel.

4. Créer une interface conviviale et esthétiquement

agréable pour améliorer l'expérience utilisateur.

5. Assurer une gestion efficace et en temps réel des stocks

de sang pour répondre aux besoins des hôpitaux.

IV- Structure du rapport :

Notre travail est présenté comme suit :

Chapitre 1 : ce chapitre est une introduction générale aux différents aspects

du

projet ainsi que les objectifs et motivations derrière sa conception.

Chapitre 2 : dans ce chapitre, nous allons présenter le résultat de l’étude

effectuée

sur le système, c’est-à-dire les différents diagrammes obtenus

durant le développement ainsi que les méthodes et les processus de

9
fonctionnement du système.

Chapitre 3 : ce chapitre contient la partie pratique de notre projet dans lequel

nous

allons présenter :

● Les ressources logicielles et matérielles utilisées.

● L’implémentation des données et traitement.

● L’utilisation et la manipulation de l’application.

● La structure des bases de données.

Conclusion générale : une perspective sur le travail fait, il est accompagné par
une bibliographie.

10
 CHAPITRE 2 : analyse et conception.

I- Introduction: Pour les besoins de notre projet, nous allons utiliser UP

unified process comme un Processus de développement

 UP unified process:

-Le Processus Unifié (PU) est une méthodologie de développement logiciel qui met
l'accent sur la gestion du cycle de vie du logiciel et la production de logiciels de haute
qualité qui répondent aux besoins des utilisateurs. Dans ce chapitre on va basé sure
deux phases du UP "Phase d'analyse" "Phase conception". La phase d'analyse et
de conception dans le Processus Unifié est une étape cruciale où les
besoins des utilisateurs sont collectés, analysés et transformés en un
modèle conceptuel de système.

1- Phase d’analyse : Dans cette phase, nous cherchons à comprendre et à

saisir au mieux les besoins des utilisateurs. Quels sont leurs attentes par rapport
à notre application ? À quelles fonctionnalités veulent-ils accéder ? Pour quelles
raison ? Et pour quel usage ?
C’est ce qu'on appelle l’analyse des besoins, une fois que notre
compréhension de ces besoins complète, nous allons commencer à
échafauder une solution.

2- Phase de conception : Dans cette phase, nous nous intéressons aux

aspects techniques de la solution proposées et nous essaierons de clarifier ces
aspects. Pour réaliser ces deux phases de notre projet, nous utiliserons
différentes méthodes et notations, parmi ces notations, UML est l’une des plus
en vogue ces dernières années.

2.1-Définition d’UML: UML (Unified Modeling Language) est un langage de

modélisation standardisé utilisé pour spécifier, visualiser, construire et documenter
les artefacts d'un système logiciel. UML fournit un ensemble de notations
graphiques pour créer des modèles abstraits des systèmes, facilitant ainsi la
compréhension et la communication entre les différentes parties prenantes du
projet.[2]

Dans ce travail nous utiliserons les trois diagrammes suivant :

11
 diagrammes de cas d’utilisations, de séquences et de classes. [8].

2.3- Les raisons du choix d’UML : De la même façon qu'il vaut mieux
dessiner une maison avant de la construire, il vaut mieux modéliser
un système avant de le réaliser, UML met à notre disposition un
large panel d’outils et de diagramme afin d’arriver à une
modélisation qui répond au mieux aux besoins du projet. En résumé,
UML facilite la conception, la communication et la gestion des
projets logiciels, ce qui en fait un choix judicieux pour les équipes de
développement.

II- Analyse des besoins :

1- Identification des acteurs : La première étape est de définir les

acteurs susceptibles de jouer un rôle dans notre application. Un acteur
représente une figure abstraite d’une action faite par des entités
extérieures, des utilisateurs ou des administrateurs par exemple, qui sont
les deux seuls acteurs dans notre application.

Acteu Rôle
r
-Visiteur -Consulter site web , voire les contacts, voire les infos
du services et l'équipe des médecins responsables.

-Donneur -Proposer un don de sang.

- -Lancer une demande de don de sang.

Récepteu
r

-Admin -Gestion des donneurs, gestion des récepteurs,

gestion du profile, ajouter un admin, suivie les
donneurs et recepteurs.

2- Identification des besoins du système : Cette étape consiste à

déterminer et décrire les fonctionnalités, les acteurs et les cas d’utilisation.

12
Dans ce qui suit, nous présenterons les besoins de notre projet par acteur.

1- Diagrammes des cas d’utilisation : Ces diagrammes représentent

les différents cas d’utilisation, les acteurs ainsi que les relations qui les
unissent, ils sont utilisés pour mettre en exergue le comportement d’un
système afin que l’utilisateur puisse en comprendre le fonctionnement et
que le développeur puisse le concevoir.

Le formalisme utilisé est comme suit :

Figure 1 : Diagramme de cas d’utilisations général

Description : Ce diagramme montre les différents cas d’utilisations du

système, et les différentes fonctionnalités que propose ce dernier, ainsi que la
personne qui peut accéder ou faire ces actions.

13
 2- Diagramme de séquences : Ces diagrammes permettent de décrire
comment les éléments du système interagissent entre eux afin d’accomplir une
tâche précise, ces derniers montrent toutes les interactions de façon
chronologique.

3- Diagrammes de classes : Les diagrammes de classes représentent un

ensemble de classes, d’interfaces et d’associations ainsi que leurs relations. On

14
utilise ces diagrammes pour modéliser la vue de conception statique d’un
système. Cela implique la modélisation.

Le formalisme utilisé est le suivant :

Figure 2 :Diagramme de classe

Description : ce diagramme permet de représenter une vue statique du système,

et de mettre en évidence les différentes relations entre les classes, des services
rendus et utilisés par chacune d'elles et de l'articulation de l'ensemble.
 Diagramme de séquence
 Passage au modèle relationnel

III- Conclusion :

Le modèle de conception nous a permis de modéliser le système, tout en

préservant autant que possible la structure définie par le modèle d’analyse, tout
en prenant aussi en compte, les besoins et les exigences définis auparavant par
les utilisateurs. Nous avons vu le langage de modélisation unifié UML pour la
modélisation de notre système. Ce modèle nous servira pour la construction et
l’implémentation de l’application. Le prochain chapitre sera entièrement

15
consacré à la présentation de l’application réalisée.

16
 CHAPITRE 3 : Implémentation de l’application.

I- Introduction :

L’implémentation est une étape qui consiste à traduire les solutions

proposées précédemment en un ou plusieurs langage de programmation ou de
balisage comme le HTML, en y intégrant une base de données dans certains cas.
Dans ce qui suit, nous allons présenter les technologies utilisées dans le
développement de notre application en y ajoutant des captures d’écran.

II- Environnements de développement :

1- HTML :

HTML ou “Hyper Text Markup language” est un langage de

balisage conçu pour représenter les pages web sous forme de balises. Il
permet d’écrire de l’hypertexte. Il permet également de structurer
sémantiquement et logiquement et il permet la mise en forme du
contenu des pages, d’y inclure des ressources multimédias tels que des
images, des vidéos...etc, il est utilisé la plupart du temps avec les deux
langages CSS et Javascript. La version utilisée est HTML5. [5]

Figure 3 HTML

2- CSS :

CSS est l’acronyme pour “cascading style sheets” ou feuille de

style en cascade en français est langage qui sert à décrire la
présentation des documents HTML et XML. Introduit au milieu des
années 1990, CSS est à ce jour très utilisé dans la conception des sites
internet, et pris en charge et supporté par tous les navigateurs web. La
version utilisée est CSS 3.0.

17

Figure 4:CSS
3- Javascript :

JavaScript désigne un langage de développement informatique, et

plus précisément un langage de script orienté objet. On le retrouve
principalement dans les pages Internet. Il permet, entre autres,
d'introduire sur une page web ou HTML des petites animations ou des
effets. Créé en 1995 par Brendan Eich, en même temps que la technologie
Java, le langage JavaScript se distingue des langages serveurs par le fait
que l'exécution des tâches est opérée par le navigateur lui-même, sur
l'ordinateur de l'utilisateur, et non sur le serveur web. Il s'active donc
généralement sur le poste client plutôt que côté serveur.

Figure 5:JAVA SCRIPT

4- PhpMyAdmin :
Il s'agit de l'une des plus célèbres interfaces pour gérer une base de
données MySQL. De nombreux hébergeurs, gratuits comme payants, le
proposent ce qui évite à l'utilisateur d'avoir à l'installer.Cette interface
pratique permet d'exécuter, très facilement et sans grandes
connaissances en bases de données, des requêtes comme les créations de
table de données, insertions, mises à jour, suppressions et modifications
de structure de la base de données, ainsi que l'attribution et la révocation
de droits et l'import/export. Ce système permet de sauvegarder
commodément une base de données sous forme de fichier .sql et d'y
transférer ses données, même sans connaître SQL.Les requêtes SQL
restent possibles, ce qui permet de les tester interactivement lors de la
création d'un site pour les utiliser ensuite en batch (c'est-à-dire en différé)
une fois au point.

18
 Figure 6:PHP MYADMIN

5- VS Code :

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

Microsoft pour Windows, Linux et macOS, il prend en charge presque tous
les principaux langages de programmation, et facilite le développement
d’applications en tous genres grâce à des centaines d’extensions

facilitants le processus.
Figure 7:VS CODE

6- 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, il permet de modéliser des projets
en utilisant les diagrammes UML.

19
Figure 8:STAR UML

20
III- Déploiement de l’application :

Figure 9:Page d'accueil de l’application.

Figure 10:About us page

21
 Figure 11:Reviews

Figure 12:Page service

22
 Figure 13:Our team page

Figure 14:Page des questions

23
Figure 15: Register page

Figure 16: login page

24
 Figure 17:Cote user

Figure 18: Reciever form

25
Figure 19: Donor form

Figure 20: cote admin

26
 Figure 21:donors page

Figure 22:Recievers page

27
 Figure 23:profile page

IV- Conclusion :
tout au long de ce chapitre, nous avons eu un aperçu général sur les
différents outils qui ont pris part à l’implémentation du projet, ainsi qu’à des
illustrations des plus importantes parties du site web.

28
 Conclusion générale.

Dans ce rapport, nous avons proposé et décrit le fonctionnement d’une

application web qui a pour but d’aider les utilisateurs à trouver et apprécier

leurs ouvrages favoris facilement et sous différents formats mais encore en

rechercher de nouveaux ou consulter les tendances actuelles en matière de

littérature et de sciences entre autres.

Pour atteindre cet objectif, nous avons débutés par une étude concernant les

besoins fonctionnels des utilisateurs et des différents acteurs. En utilisant la

notation UML, nous avons conçu un modèle qui répond au mieux à tous ces

besoins, pour le déploiement de ce dernier, nous avons utilisés la technologie

PhpMyAdmin pour la mise en œuvre et la gestion de la base de données. Et

enfin nous sommes passés à l’implémentation du modèle grâce aux langages

HTML,CSS, JavaScript et aux technologies ReactJS , Node.js et Bulma.

Ce projet était une expérience enrichissante, qui nous a permis de

parfaire nos connaissances en développement web, et tout ce gravite autour de

cette discipline ainsi que sur les systèmes d’informations.

29
 Résume:
Le don de sang represente une contribution essentielle a la societe, car des
millions de personnes necessitent des transfusions sanguines chaque
annee. Qu'il s'agisse de besoins lors de chirurgies, d'accidents ou de
maladies necessitant des composants sanguins, la disponibilité de sang est
vitale. Ainsi, notre projet vise a concevoir et mettre en place une application
web pour faciliter la gestion des dons de sang.
Cette plateforme permettra une gestion efficace des donneurs et des banques
de sang, assurant un acces rapide aux informations necessaires. En
centralisant et en optimisant la gestion des donnees sur les donneurs ,
notre objectif est de contribuer a la numerisation du secteur de la sante.
Cela facilitera egalement l'acces a l'information dans le domaine des dons
de sang, ameliorant ainsi les soins de sante et le bien-etre des citoyens.

mot cles: don de sang, gestion de sang , sante , donneurs , transfusions

Abstract:
The act of blood donation represents an essential contribution to society, as
millions of people require blood transfusions each year. Whether it's for
surgical needs, accidents, or illnesses requiring blood components, the
availability of blood is vital. Therefore, our project aims to design and
implement a web application to facilitate blood donation management.
This platform will enable efficient management of donors and blood banks,
ensuring quick access to necessary information. By centralizing and
optimizing donor data management, our goal is to contribute to the
digitization of the healthcare sector. This will also facilitate access to
information in the field of blood donation, thereby improving healthcare
and citizens' well-being.

Key words: blood donation, blood management, health, donors, transfusions.

‫ملخص‬
‫ حيث يحتاج ماليين األشخاص إلى‬،‫التبرع بالدم يمثل مساهمة أساسية في المجتمع‬
‫ سواء كان ذلك لالحتياجات الجراحية أو الحوادث أو األمراض‬.‫نقل الدم كل عام‬
‫ يهدف مشروعنا إلى‬،‫ لذا‬.‫ فإن توفر الدم أمر حيوي‬،‫التي تتطلب مكونات الدم‬
.‫تصميم وتنفيذ تطبيق ويب لتسهيل إدارة التبرع بالدم‬
‫ مما يضمن الوصول السريع‬،‫ستتيح هذه المنصة إدارة فعالة للمتبرعين وبنوك الدم‬
،‫ من خالل تركيز إدارة بيانات المتبرعين وتحسينها‬.‫إلى المعلومات الالزمة‬
.‫يهدف مشروعنا إلى المساهمة في تطوير قطاع الرعاية الصحية رقميًا‬
‫ مما يعزز‬،‫وسيتيح ذلك أيضًا الوصول إلى المعلومات في مجال التبرع بالدم‬
30
 ‫الرعاية الصحية ورفاهية المواطنين‬
‫كلمات مفتاحية‪ :‬التبرع بالدم‪ ،‬إدارة الدم‪ ،‬الصحة‪ ،‬المتبرعين‪ ،‬عمليات نقل‬
‫الدم‪.‬‬

‫‪31‬‬