Vous êtes sur la page 1sur 53

DEDICACE

A ma très chère famille,

recevez de ce travail, l'expression de mon éternelle reconnaissance.

I
Conception et réalisation d’une plateforme web avec système d’administration
REMERCIEMENTS

Merci au Dieu Tout-Puissant pour la vie et le soutien continuel qu’Il m’accorde.

Je tiens vivement à remercier les personnes par qui mon projet a vu le jour :

➢ Pr KONATE Adama, Directeur général de l’ESATIC (Ecole Supérieure


Africaine des TIC) pour son grand dévouement à faire de l’ESATIC le pôle
d’excellence des TIC en Afrique ;

➢ Dr SORO Etienne et Dr YOBOUET Pamela respectivement Directeur de la


pédagogie et Secrétaire générale de l’ESATIC pour la formation de qualité qui
n’est rien d’autre que le fruit de leur dur labeur ;

➢ Dr KOUADJO Hilaire et son épouse respectivement Président et Directrice


générale du Groupe Connect IEBS pour leur aimable attention et leur vif intérêt
porté à l’endroit des TIC ;

➢ Mme KOUASSI Johnson, mon encadrant académique pour sa grande disponibilité


et conseils de qualité ;

➢ M. EHOUSSOU Fongboum, mon maître de stage responsable du service


informatique de GCIEBS et M. KONAN Florentin son assistant, pour leurs
conseils avisés et leur encadrement de qualité ;

➢ Tout le personnel du Groupe Connect IEBS pour leur courtoisie et l’accueil


chaleureux qu’ils m’ont accordé ;

Enfin, je remercie de façon particulière mon père AMANI Assei Modeste et ma


mère N’GUESSAN Akissi Jacqueline, pour leur soutien si considérable.

II
Conception et réalisation d’une plateforme web avec système d’administration
AVANT-PROPOS

Dans le cadre de l’obtention de mon diplôme de licence générale en Systèmes


Réseaux Informatiques et Télécommunications (SRIT), j’ai eu à effectuer un stage au
sein du service informatique du Groupe Connect International English and Business
School (GCIEBS). GCIEBS est la structure à l’origine des cours de TOEIC (Test Of
English for International Communication) institués au sein de l’ESATIC (Ecole
Supérieure Africaine des Technologies de l’Information et de la Communication), dans
l’optique de familiariser les étudiants aux tests internationaux de la langue anglaise.

Mon stage s’est donc déroulé pendant une période de trois mois où j’ai acquis une
expérience enrichissante. En effet, c’est bien lors de ce stage que j’ai pu mettre en
pratique les connaissances théoriques acquises pendant ces trois dernières années à
l’ESATIC. Aussi, avais-je l’opportunité d’appréhender la grande implication de
l’informatique dans la quasi-totalité des activités de l’entreprise.

Mon projet vient ainsi répondre à un besoin informatique qui concerne la réalisation
du site internet de l’entreprise International Agency for Hybrid Services (IAHS). IAHS
est l’un des partenaires du Groupe Connect IEBS.

III
Conception et réalisation d’une plateforme web avec système d’administration
SOMMAIRE

INTRODUCTION

PREMIERE PARTIE : Présentation générale


CHAPITRE I : PRESENTATION DE L’ESATIC
I. HISTORIQUE
II. MISSION
CHAPITRE II : PRESENTATION DU GROUPE CONNECT IEBS
I. HISTORIQUE
II. STATUT JURIDIQUE ET MISSION
III. ORGANIGRAMME
CHAPITRE III : PRESENTATION DU PROJET
I. ETUDE DE L’EXISTANT
II. DEFINITION DE L’OBJECTIF DU PROJET ET PRESENTATION DU CAHIER DE CHARGES
Conclusion partielle
DEUXIEME PARTIE : Analyse et Conception
CHAPITRE I : LA METHODE D’ANALYSE ET DE CONCEPTION
I. PRESENTATION DES METHODES
II. PRESENTATION DE LA METHODE CHOISIE
CHAPITRE II : ANALYSE DES BESOINS
I. EXPRESSION DES BESOINS
II. LES CAS D’UTILISATION
CHAPITRE III : PHASE DE CONCEPTION
I. DIAGRAMME DE CLASSES METIER
II. DIAGRAMME DE SEQUENCES
Conclusion partielle
TROISIEME PARTIE : Réalisation
CHAPITRE I : TECHNOLOGIES UTILISEES
I. ENVIRONNEMENT DE DEVELOPPEMENT
II. LANGAGES DE DEVELOPPEMENT ET FRAMEWORK
III. DEPLOIEMENT DU SITE WEB
CHAPITRE II : PRESENTATION DE L’APPLICATION WEB
I. PRESENTATION DE L’ARCHITECTURE UTILISEE
II. LES FONCTIONNALITES DE L’APPLICATION WEB
Conclusion partielle
CONCLUSION GENERALE

IV
Conception et réalisation d’une plateforme web avec système d’administration
LISTE DES SIGLES ET ABREVIATIONS

GCIEBS Groupe Connect International English and Business School


IAHS International Agency for Hybrid Services
TOEIC Test Of English for International Communication
FDFP Fond de Développement pour la Formation Professionnel
ESATIC Ecole Supérieure Africaine des Technologies de l’Information
et de la Communication
UML Unified Modeling Language
POO La Programmation Orientée Objet
MVC Model View Controller
MERISE Méthode d’Etude et de Réalisation Informatique pour les
Systèmes d’Entreprise
UP Unified Process
RUP Rational Unified Process
XP eXtreme Programming
PHP Hypertext PreProcessor
HTML HyperText MarkUp Language
URL Uniform Resource Locator
AJAX Asynchronous JavaScript and XML
CSS Cascading Style Sheets

V
Conception et réalisation d’une plateforme web avec système d’administration
LISTE DES FIGURES ET TABLEAUX

Liste des figures

Figure 1: Organigramme du Groupe Connect IEBS (Source : Groupe Connect IEBS) ............ 7
Figure 2: Cycle de vie de UP (Source : Google) ...................................................................... 15
Figure 3: Les diagrammes UML (Source Google)................................................................... 16
Figure 4: Exemple descriptif d'un diagramme de cas d'utilisation (Source Google) ............... 18
Figure 5: Les tâches du Super administrateur sur le site web .................................................. 19
Figure 6: Les actions d’un client sur le site web ...................................................................... 19
Figure 7: Exemple descriptif d’un diagramme de classe (Source Google) .............................. 22
Figure 8: La structure d’une classe (Source Google) ............................................................... 22
Figure 9: Le diagramme de classes .......................................................................................... 24
Figure 10: Exemple descriptif d'un diagramme de séquences (Source Google) ...................... 25
Figure 11: Diagramme de séquence du cas d'utilisation « Authentification » ......................... 26
Figure 12: Diagramme de séquence du cas d'utilisation « Demande de service » ................... 26
Figure 13: La structure MVC (Source Google) ...................................................................... 32
Figure 14: Architecture 2-tiers (Source Google)...................................................................... 34

Liste des tableaux

Tableau 1: Tableau présentant quelques méthodes d’analyse et de conception ...................... 12


Tableau 2: Le formalisme de description textuelle des cas d'utilisation. ................................. 20
Tableau 3: Description du cas d'utilisation « Authentification ». ............................................ 20
Tableau 4: Description du cas d'utilisation « Demande de service ». ...................................... 21
Tableau 5: Les règles de gestion du site web d’IAHS ............................................................. 23
Tableau 6: Environnement matériel ......................................................................................... 29
Tableau 7: Caractéristiques du serveur de déploiement ........................................................... 33

VI
Conception et réalisation d’une plateforme web avec système d’administration
INTRODUCTION

Le numérique constitue le moteur de la croissance économique dans la quasi-


totalité des pays du monde. Nous sommes aujourd’hui plongés dans l’ère du
numérique qui est le levier de développement de plusieurs secteurs d’activité. L’un des
aspects de cette évolution est l’utilisation des sites web pour aider le particulier ou
l’entreprise à faire connaître ses activités au-delà des frontières. Malheureusement,
certaines entreprises ont encore un peu de mal à s’approprier cette technologie qui
pourrait leur être profitable.

L’entreprise International Agency for Hybrid Services en abrégé IAHS,


partenaire du Groupe Connect IEBS, a donc décidé de quitter ce lot en s’inscrivant
dans la course effrénée de l’évolution du numérique. En vue de répondre aux attentes
de cette dernière, il nous a été confié dans le cadre de nos trois (3) mois de stage, la
mise en place d’une plateforme web dotée d’un système d’administration capable de
proposer des services clientèles en ligne et faire d’IAHS une entreprise vraiment
professionnelle avec une plus grande visibilité. Le thème proposé est : « Conception
et réalisation d’une plateforme web avec système d’administration ». La
réalisation de ce projet contribuera à redynamiser les services d’IAHS et à propulser
son développement à l’international.

Pour une meilleure planification de l’étude, il convient de s’interroger comme


suit : Comment procéderons-nous pour réaliser cette plateforme ? Quelles sont les
différentes étapes nécessaires à la bonne conception de notre solution ? Quels outils
utiliserons-nous ?

La réponse à ces préoccupations conduira notre travail à être subdivisé en trois


grandes parties. Dans la première partie, il sera question d’aborder la présentation
générale concernant l’Ecole Supérieure Africaine des Technologies de l’Information
et de la Communication (ESATIC), la structure d’accueil et le projet. Ensuite, viendra
la deuxième partie qui est l’analyse et la conception. A ce niveau, nous présenterons
les méthodes d’analyse et de conception ainsi que la méthode Unified Process (UP)

1
Conception et réalisation d’une plateforme web avec système d’administration
utilisée pour la conception de notre projet. Dans la troisième partie, il s’agira de
présenter la réalisation du site web en indiquant les outils utilisés et en montrant les
résultats obtenus.

2
Conception et réalisation d’une plateforme web avec système d’administration
PREMIERE PARTIE :
Présentation générale

“ Il sera question dans cette partie de vous présenter notre école de formation,
l’entreprise dans laquelle nous avons effectué le stage et le projet.’’
CHAPITRE I : PRESENTATION DE L’ESATIC

L’ESATIC, Ecole Supérieure Africaine des Technologies de l’Information


et de la Communication est située à Abidjan-Treichville précisément en zone 3 km4
Boulevard de Marseille. Nous y avons bénéficié d’une formation de qualité dans le
secteur des Technologies de l’Information et de la Communication répondant ainsi aux
défis majeurs du numérique en Côte d’Ivoire.

I. HISTORIQUE

En 1967, l’on assiste à la création de l’Ecole Nationale Supérieure des Postes et


des Télécommunications (ENSPT). L’objet principal de sa création était d’offrir une
formation de pointe dans les métiers de la Poste. Après l’interruption des activités de
l’ENSPT en 1992, l’Institut Supérieur Africain des Postes et Télécommunications
(ISAPT) fut créé pour prendre le relais dans la formation. Malheureusement cette école
qui avait pour mission de prendre la relève de l’ENSPT en assurant la formation en
Télécommunications et en TIC, a dû cesser ses activités de 1998 à 2007.
En janvier 2012, le gouvernement ivoirien, dans le souci majeur de doter la Côte
d’Ivoire d’une structure de formation qui répond aux enjeux majeurs du secteur des
TIC, crée sur les cendres de l’Institut Supérieur Africain des Postes et
Télécommunications (ISAPT), l’Ecole Supérieure Africaine des Technologies de
l’Information et de la Communication (ESATIC) par le décret N° 2012-20 du 18
janvier 2012.
Enfin nous assistons en Mai 2012 à la nomination du Directeur Général qui depuis
lors, mène les activités de reprise des enseignements.
Le 11 octobre 2012 : première rentrée académique.
Le 15 octobre 2012 : Début officiel des cours.

4
Conception et réalisation d’une plateforme web avec système d’administration
II. MISSION

Conformément au Décret 2012-20 du 18 janvier 2012, L’ESATIC est chargée


d’assurer les missions d’intérêt général de formation initiale, continue et de recherche
dans les métiers des Technologies de l’Information et de la Communication (TIC).
L’école a pour missions de :
• former des cadres spécialisés dans les Technologies de l’Information et de la
Communication notamment dans les domaines de réseaux et services de
télécommunications /TIC, de la régulation et de la Cybersécurité ;
• mener toute recherche dans le secteur des Technologies de l’Information et de
la Communication ;
• mettre en place un cadre de coopération nationale et internationale dans le
domaine de la formation en matière de télécommunications/TIC.

5
Conception et réalisation d’une plateforme web avec système d’administration
CHAPITRE II : PRESENTATION DU GROUPE CONNECT IEBS

I. HISTORIQUE

Le Groupe Connect IEBS (GCIEBS) a existé depuis 2011 comme Cabinet


international de Formation en anglais reconnu aux Etats Unis et par le FDFP et depuis
Mai 2016 est effectivement devenu un Groupe avec plusieurs entités. Son expertise en
langue anglaise est établie sur le marché en Côte d’Ivoire. Elle assure en partie les
formations en anglais, interprétations, traductions et offre une plus-value. C’est un
centre de passage de tests internationaux. Une SARL au capital de 1.000.000 FCFA,
Régime d’imposition : Réel Simplifié. N° RC CM : CI-ABJ-2016-B-1319-CC N° :
1625613T.
L’entreprise International Agency for Hybrid Services (IAHS) partenaire de
GCIEBS, exerce pour sa part, dans plusieurs domaines d’activité notamment l’import-
export, le marketing, la communication et bien d’autres.
Le Fondateur de GCIEBS est le Dr KOUADJO KOFFI HILAIRE.

➢ Situation géographique
Le GROUPE CONNECT IEBS a son siège social situé en Côte d’Ivoire à Abidjan
dans la commune de Cocody, précisément à la riviera 3 cité COPRACI – villa N°129
– 01 BP 1400 ABIDJAN 01, Côte d’Ivoire.

➢ Coordonnées
Email : infos@groupeconnectiebs.com
Site internet : www.groupeconnectiebs.com / www.groupeconnectiebs.ci.
Téléphone : (225) 22 47 26 48 / 02 88 13 69 / 08 41 48 48

6
Conception et réalisation d’une plateforme web avec système d’administration
II. STATUT JURIDIQUE ET MISSION

Le Groupe Connect IEBS est une Société A Responsabilité Limitée


Pluripersonnelle de Droit ivoirien spécialisée dans la formation et le coaching. Le
Groupe a pour mission :
- la création de centres de formation ou perfectionnement à la pratique de langues
étrangères, avec organisation de séjours linguistiques ;
- la création et la gestion d’établissements destinés à assurer l’hébergement et la
restauration des étudiants ;
- la prise de participation sous toutes formes dans toutes entreprises ivoiriennes ou
étrangères poursuivant un but d’éducation et de formation ;

III. ORGANIGRAMME

Figure 1: Organigramme du Groupe Connect IEBS (Source : Groupe Connect IEBS)

7
Conception et réalisation d’une plateforme web avec système d’administration
CHAPITRE III : PRESENTATION DU PROJET

I. ETUDE DE L’EXISTANT

1. Présentation de l’existant

IAHS est une entreprise partenaire du Groupe Connect IEBS (GCIEBS) et exerce
diverses activités comme indiqué dans sa signification par les termes “ Hybrid
Services”. Dans le cadre de notre stage à GCIEBS, il nous a été demandé la
reconstruction du site internet d’IAHS qui n’est qu’un simple site de présentation.

Ce site n’a aucune interface favorisant une interaction véritable entre IAHS et ses
clients.

2. Critique de l’existant

Le site actuel nécessite donc une conception sérieuse et une refonte totale des
fonctionnalités adaptées aux services d’IAHS. Ainsi, le nouveau site devra répondre
aux besoins majeurs d’IAHS et lui donner un aspect plus attrayant vis-à-vis de ses
clients.

II. DEFINITION DE L’OBJECTIF DU PROJET ET PRESENTATION DU


CAHIER DE CHARGES

1. Objectif du projet

Face à l’essor du numérique et le grand impact des sites web sur la productivité
des entreprises, il convient de mettre à la disposition d’IAHS un site internet pouvant
lui donner une fière allure et la rapprocher de ses clients. Elle pourra donc suivre de
plus près ses clients grâce à sa base de données et leur offrir la possibilité d’interagir
plus facilement lors de leurs demandes de services.

8
Conception et réalisation d’une plateforme web avec système d’administration
2. Cahier de charges

a. Les acteurs

Les différents acteurs qui interagiront directement avec le système sont :


▪ le super administrateur : rôle permettant la gestion des comptes des utilisateurs,
des articles de l’entreprise et des demandes des clients ;
▪ l’éditeur d’articles : personne pouvant rédiger les articles, les publier, les
modifier et les supprimer en fonction de leur durée ;
▪ l’auteur d’articles : personne pouvant rédiger, modifier et supprimer ses
propres articles ;
▪ les clients : personnes pouvant consulter les articles du site, s’inscrire à la
newsletter de l’entreprise, envoyer des avis et effectuer des demandes de
service ;
▪ les internautes : personnes ne pouvant que consulter les informations
présentées sur le site.

b. Les tâches

Les différentes tâches qui nous conduiront à la résolution du problème sont :


• mettre en place un système d’administration pour faciliter la gestion des
utilisateurs ;
• concevoir une base de données en vue d’une gestion plus fluide des mises à
jour de la plateforme web ;
• réaliser une application web de gestion d’articles (textes, images et vidéos) ;
• héberger le site web.

Conclusion partielle

La présentation générale nous a permis de connaître le cadre de développement du


projet et les attentes de sa réalisation. Ayant donc élucidé certains détails ardus à la
compréhension du thème, nous présenterons dans la suite, la phase d’analyse et de
conception de la plateforme web qui est l’une des étapes importantes de ce projet.

9
Conception et réalisation d’une plateforme web avec système d’administration
DEUXIEME PARTIE :
Analyse et Conception

“ Cette partie concerne l’étude technique et conceptuelle de notre projet.’’


CHAPITRE I : LA METHODE D’ANALYSE ET DE CONCEPTION

I. PRESENTATION DES METHODES

1. Définition

En ingénierie, une méthode d'analyse et de conception est un procédé qui a pour


objectif de permettre de formaliser les étapes préliminaires du développement d'un
système afin de rendre ce développement plus fidèle aux besoins du client. Pour ce
faire, on part d'un énoncé informel (le besoin tel qu'il est exprimé par le client,
complété par des recherches d'informations auprès des experts du domaine
fonctionnel, comme les futurs utilisateurs d'un logiciel), ainsi que de l'analyse de
l'existant éventuel (c'est-à-dire la manière dont les processus à traiter par le système se
déroulent actuellement chez le client).
La phase d'analyse permet de lister les résultats attendus, en termes de
fonctionnalités, de performance, de robustesse, de maintenance, de sécurité,
d'extensibilité, etc.
La phase de conception permet de décrire de manière non ambiguë, le
fonctionnement futur du système afin d'en faciliter la réalisation ; le plus souvent en
utilisant un langage de modélisation.
La complexité croissante des systèmes d’informations a conduit les concepteurs à
s’intéresser aux méthodes. Chaque méthode se définit par une notation et un processus
spécifique. Nous présenterons certaines méthodes qui sont beaucoup utilisées
aujourd’hui. [1]

11
Conception et réalisation d’une plateforme web avec système d’administration
2. Les méthodes d’analyse et de conception

La présentation de ces méthodes est donnée de façon succincte dans le ci-dessous.

Tableau 1: Tableau présentant quelques méthodes d’analyse et de conception

Métho Avantages Inconvénients


des

Merise ✓ méthode d’analyse avec des • méthode moins adaptée aux


étapes bien définies ; grands projets nécessitant des
résolutions partielles et
✓ grande distinction entre les évolutives ;
données et les traitements
pendant la modélisation, surtout • méthode moins adaptée à la
avec une interaction profonde du modélisation orientée objet.
fait de la validation des données
par les traitements et vice versa.

UP ✓ le processus unifié utilise le


langage UML (langage de • gestion de projet plus
modélisation adapté à la POO) ; complexe : planification
adaptative ;
✓ méthode agile la plus utilisée
• l’évaluation des risques exige
✓ il est centré sur l’architecture ; une expertise généralement
pointue et repose sur une
✓ il est itératif et incrémental. capitalisation de l’expérience
vécue.

XP ✓ méthode agile la plus connue ; • trop grosses équipes (surcoût


de communication trop
✓ flexibilité (on peut s’adapter aux important) ;
problèmes de spécification) ;
• projets trop complexes (le
✓ coûts peu élevés pour ce type de manque de conception initiale
projets (pas de surcoût par des entraine des surcoûts).
process lourds).

12
Conception et réalisation d’une plateforme web avec système d’administration
RUP ✓ conforme à la méthode UP ; • lourd, bureautique (mise à
jour des schémas), rigoureux
✓ méthodologie Agile (tous les et couteux ;
avantages de ce type de
méthodologie) ; • projet de plus de dix
personnes.
✓ supporte de gros projets.

Agile ✓ adaptabilité et réactivité ; • gestion obligatoire de la com


munication ;
✓ réduction des risques, plus près
de la réalité ; • mauvaise visibilité à long ter
me ;
✓ rapidité et efficacité ;
• intégration continue.
✓ utilisation d’UML ;

✓ favorable aux changements.

3. Choix de la méthode utilisée

Vu les avantages de la méthode UP sur-cités, il serait plus aisé pour nous d’opter
pour cette dernière. Elle utilise le langage UML qui permet d’avoir une vue générale
sur notre système. De plus, nous aurons à utiliser le langage PHP orienté objet, pour
la réalisation de notre application web.

II. PRESENTATION DE LA METHODE CHOISIE

1. La méthode UP

UP (Unified Process et Processus Unifié en français) est une méthode agile issue
d'autres méthodes et langages propres à la POO, en particulier OMT (Object Modeling
Technology), OOSE (Object Oriented Software Engineering) et au langage UML.
Ses caractéristiques sont :

• UP est itératif et incrémental : le projet est découpé en itérations de courte


durée (environ 1 mois) qui permettent de mieux suivre l'avancement global. A
la fin de chaque itération, une partie exécutable du système final est produite,
de façon incrémentale ;

13
Conception et réalisation d’une plateforme web avec système d’administration
• UP est centré sur l'architecture : tout système complexe doit être décomposé
en parties modulaires afin de garantir une maintenance et une évolution
facilitées. Cette architecture (fonctionnelle, logique, matérielle, etc.) doit être
modélisée en UML et pas seulement documentée en texte ;
• UP est piloté par les risques : les risques majeurs du projet doivent être
identifiés au plus tôt mais surtout levés le plus rapidement possible. Les
mesures à prendre dans ce cadre déterminent l'ordre des itérations ;
• UP est conduit par les cas d'utilisation : le projet est mené en tenant compte
des besoins et des exigences des utilisateurs. Les cas d'utilisation du futur
système sont identifiés, décrits avec précision et priorisés. [6]

2. Le cycle de vie du Processus unifié

L'objectif d'un processus unifié est de maîtriser la complexité des projets


informatiques en diminuant les risques. UP est un ensemble de principes génériques
adapté en fonctions des spécificités des projets. UP répond aux préoccupations
suivantes :

o QUI participe au projet ?


o QUOI, qu'est-ce qui est produit durant le projet ?
o COMMENT doit-il être réalisé ?
o QUAND est réalisé chaque livrable ?

L'architecture bidirectionnelle

UP gère le processus de développement par deux axes. (Figure 2)

L'axe vertical : représente les principaux enchaînements d'activités, qui regroupent


les activités selon leur nature. Cette dimension rend compte de l'aspect statique du
processus qui s'exprime en termes de composants, de processus, d'activités,
d'enchaînements, d'artefacts et de travailleurs.

14
Conception et réalisation d’une plateforme web avec système d’administration
L'axe horizontal : représente le temps et montre le déroulement du cycle de vie du
processus ; cette dimension rend compte de l'aspect dynamique du processus qui
s'exprime en termes de cycles, de phases, d'itérations et de jalons. [6]

Figure 2: Cycle de vie de UP (Source : Google)

3. Le langage UML

UML (Unified Modeling Language), se définit comme un langage de modélisation


graphique et textuel destiné à comprendre et à définir des besoins, spécifier et
documenter des systèmes, esquisser des architectures logicielles, concevoir des
solutions et communiquer des points de vue. UML modélise l'ensemble des données
et des traitements en élaborant des différents diagrammes. En clair, il ne faut pas
designer UML en tant que méthode (Il y manque la démarche) mais plutôt comme une
boite d'outils qui sert à améliorer les méthodes de travail. [2]

L'intérêt de UML

UML est un langage semi-formel et normalisé :


• gain de précision ;

15
Conception et réalisation d’une plateforme web avec système d’administration
• gain de stabilité ;
• il encourage l'utilisation d'outils.

UML est un support de communication performant :


• il cadre l'analyse ;
• il facilite la compréhension de représentations abstraites complexes ;
• son caractère polyvalent et sa souplesse en font un langage universel.

Le langage de modélisation UML comporte quatorze (14) diagrammes. [2]

Figure 3: Les diagrammes UML (Source Google)


La suite de notre travail sera fonction de la démarche exigée par la méthode UP.

16
Conception et réalisation d’une plateforme web avec système d’administration
CHAPITRE II : ANALYSE DES BESOINS

L’analyse des besoins, première phase de réalisation d’un projet, conditionne sa


réussite dans la mesure où elle définit les besoins réels de ceux qui utiliseront le résultat
final. Elle est donc une phase de communication et d’échange entre le chef de projet
et le client en vue de collecter toutes les informations nécessaires à la réalisation du
projet.

I. EXPRESSION DES BESOINS

L'application envisagée doit satisfaire les besoins fonctionnels qui seront exécutés
par le système et les besoins non fonctionnels qui perfectionnent la qualité logicielle
du système.

1. Inventaire des besoins fonctionnels

Les besoins fonctionnels ou besoins métiers représentent les actions que le système
doit exécuter, il ne devient opérationnel que s'il les satisfait. Cette plateforme web doit
couvrir principalement les besoins fonctionnels suivants :
- la création des utilisateurs et la gestion des articles ;
- l’authentification des utilisateurs ;
- l’envoi et la réception des messages textes ;
- l’inscription à la newsletter ;
- la réalisation des demandes de service ;
- la connexion et la déconnexion (quitter le système d’administration).

2. Inventaire des besoins non fonctionnels

Ce sont des exigences qui ne concernent pas spécifiquement le comportement du


système mais plutôt identifient des contraintes internes et externes du système. Les
principaux besoins non fonctionnels (du point de vue technique) de notre système se
résument comme suit :

17
Conception et réalisation d’une plateforme web avec système d’administration
- un code bien clair pour faciliter les futures évolutions ou améliorations ;
- une application web offrant des interfaces utilisateur plus conviviales ;
- un respect de la confidentialité des données ;
- une garantie de l'intégrité et de la cohérence des données à chaque mise à jour et à
chaque insertion.

II. LES CAS D’UTILISATION

Les cas d'utilisation permettent d'illustrer les besoins. Ils détectent puis décrivent
les besoins fonctionnels (du point de vue de l'utilisateur), et leur ensemble constitue le
modèle de cas d'utilisation qui dicte les fonctionnalités complètes du système.

1. Diagramme de cas d’utilisation

Le diagramme de cas d'utilisation modélise à QUOI sert le système, en organisant


les interactions possibles avec les acteurs. C'est le premier diagramme du modèle
UML, celui où s'assure la relation entre l'utilisateur et les objets que le système met en
œuvre.

Figure 4: Exemple descriptif d'un diagramme de cas d'utilisation (Source Google)

18
Conception et réalisation d’une plateforme web avec système d’administration
Dans la suite, il est important de signifier que le stéréotype « include » symbolise une
dépendance, une inclusion.

Figure 5: Les tâches du Super administrateur sur le site web

Figure 6: Les actions d’un client sur le site web

19
Conception et réalisation d’une plateforme web avec système d’administration
2. Description textuelle des scénarios

L'étude de cas d'utilisation a pour objectif de déterminer ce que chaque utilisateur


attend du système. La détermination du besoin est basée sur la représentation de
l'interaction entre l'acteur et le système. Pour exprimer les cas d'utilisations de notre
système, nous avons choisi le formalisme suivant :

Tableau 2: Le formalisme de description textuelle des cas d'utilisation.

NN Numéro du cas d’utilisation Nom du cas d’utilisation.


Résumé But du cas d’utilisation.
Acteur Acteurs participant au cas d’utilisation.
Précondition Condition qui doit être remplie avant le début du cas d’utilisation.
Scénario nominal Séquences d’actions normales associées au cas d’utilisation
Alternative Séquences d’actions alternatives pouvant conduire également à un
succès.
Exception Séquences d’actions conduisant à un échec.

a. Le cas d’utilisation « Authentification »

Tableau 3: Description du cas d'utilisation « Authentification ».

Cas d’utilisation N° 1 Authentification


Résumé Vérification de l’identité des utilisateurs (Login et mot de passe).
Acteur Utilisateur.
Précondition L’utilisateur doit avoir un compte.
Scénario nominal [début]
• Demande de connexion ;
• Le système affiche le formulaire d’authentification
(demande le mail de l’utilisateur et le mot de passe) ;

20
Conception et réalisation d’une plateforme web avec système d’administration
• L’utilisateur saisit son login et son mot de passe puis
valide ;
• Le système vérifie la conformité des informations
fournies ;
• Le système donne l’accès à l’interface correspondante ;
[fin]
Alternative Dans le cas où les informations fournies sont incomplètes ou
incorrectes le système réaffiche le formulaire d’authentification et
attend que l’utilisateur saisisse à nouveau ses informations ;

b. Le cas d’utilisation « Demande de service »

Tableau 4: Description du cas d'utilisation « Demande de service ».

Cas d’utilisation N° 2 Demande de service


Résumé Le client a le privilège d’effectuer une demande de service.
Acteur Client
Scénario nominal [début]
• Accès au site web ;
• Accès au formulaire de demande de service ;
• Renseigner le formulaire ;
• Cliquer sur le bouton « Envoyer » ;
[fin]

21
Conception et réalisation d’une plateforme web avec système d’administration
CHAPITRE III : PHASE DE CONCEPTION

I. DIAGRAMME DE CLASSES METIER

1. Définition

Le diagramme de classes est le moyen de spécifier la structure et les liens entre les
objets dont le système est composé : il spécifie QUI sera à l’œuvre dans le système
pour réaliser les fonctionnalités décrites par les diagrammes de cas d’utilisation.

Figure 7: Exemple descriptif d’un diagramme de classe (Source Google)

Figure 8: La structure d’une classe (Source Google)

22
Conception et réalisation d’une plateforme web avec système d’administration
2. Elaboration

Nous procéderons à la définition des règles de gestion afin de mieux identifier les
objets du système.

Les règles de gestion

Tableau 5: Les règles de gestion du site web d’IAHS

Règles de gestion du site web d’IAHS

RG1 Un utilisateur a un et un seul rôle : super administrateur, éditeur ou auteur


d’articles
RG2 Un super administrateur publie, modifie et supprime un ou plusieurs article (s)

RG3 Un éditeur rédige, publie, modifie et supprime un ou plusieurs article (s)

RG4 Un auteur rédige, modifie et supprime un ou plusieurs article (s) à lui.

RG5 Un client peut être un particulier ou une entreprise

RG6 Un client fait une ou plusieurs demande (s) de service

RG7 Une demande concerne un et seul service

RG8 Un service est concerné par 0 ou plusieurs demande (s)

RG9 Un client adhère à la newsletter

RG10 Un super administrateur envoie 0 ou plusieurs message (s) d’offres de service


aux clients de la newsletter
RG11 Un article est consulté par 0 ou plusieurs client (s)

RG12 Un article comporte 0 ou plusieurs image (s)

RG13 Un article contient 0 ou plusieurs vidéo (s)

RG14 Un client envoie 0 ou plusieurs message (s) d’avis

RG15 Un super administrateur répond à une ou plusieurs demande (s)

RG16 Un client reçoit un ou plusieurs service (s)

23
Conception et réalisation d’une plateforme web avec système d’administration
Figure 9: Le diagramme de classes

24
Conception et réalisation d’une plateforme web avec système d’administration
II. DIAGRAMME DE SEQUENCES

1. Définition

Le diagramme de séquences permet de décrire COMMENT les éléments du


système interagissent entre eux et avec les acteurs :
o les objets au cœur d’un système interagissent en échangeant des messages ;
o les acteurs interagissent avec le système au moyen d’IHM (Interfaces Homme-
Machine).

Figure 10: Exemple descriptif d'un diagramme de séquences (Source Google)

25
Conception et réalisation d’une plateforme web avec système d’administration
2. Elaboration

Figure 11: Diagramme de séquence du cas d'utilisation « Authentification »

Figure 12: Diagramme de séquence du cas d'utilisation « Demande de service »

26
Conception et réalisation d’une plateforme web avec système d’administration
Conclusion partielle

La méthode d’analyse et de conception UP basée sur le langage UML, nous a permis


de bien modéliser notre système. Toutefois, les diagrammes de modélisation UML ont
été d’une grande utilité pour la compréhension du fonctionnement de la plateforme
web. La section suivante présentera la phase de réalisation telle qu’indiquée dans le
processus unifié.

27
Conception et réalisation d’une plateforme web avec système d’administration
TROISIEME PARTIE :
Réalisation

“ Passons finalement à la concrétisation de notre projet à travers la phase de


réalisation’’
CHAPITRE I : TECHNOLOGIES UTILISEES

I. ENVIRONNEMENT DE DEVELOPPEMENT

1. Environnement matériel

Pour le développement de notre système, un ordinateur nous a été utile. Ses


caractéristiques sont les suivantes :

Tableau 6: Environnement matériel

Marques Caractéristiques

HP Intel(R) core (TM) i3-5005U CPU


@2.00 GHz
4,00 Go RAM
931,50 Go disque dur
Système d’exploitation : Windows
10, 64 bits processeur x64

2. Environnement logiciel

➢ Laragon version 4.0.12


Développé par l’équipe du framework PHP Laravel, dans le but d’en faciliter
l’usage, le serveur laragon est un environnement de développement Web (local) dédié
au système d’exploitation Windows. Il est accompagné de différentes technologies à
savoir :
o NGINX / Apache (serveur web) ;
o PHP (langage interprété côté serveur) ;
o MySQL (base de données). [4]

29
Conception et réalisation d’une plateforme web avec système d’administration
➢ Sublime Text 3
Sublime Text est un éditeur de texte disponible à la fois sur Windows, sur Mac et
sur Linux. Il permet d’écrire les différentes instructions dans des langages comme le
C, le PHP, Objective-C ... [4]

➢ Visual Studio Code


Visual studio code est un éditeur de code open-source, gratuit et multi-plateforme
(Windows, Mac et Linux), développé par Microsoft, à ne pas confondre avec Visual
Studio, l'IDE propriétaire de Microsoft. Il peut s'adapter à plusieurs types de langages
grâce à un système d'extension bien fourni. [4]

➢ ArgoUML
ArgoUML est un logiciel libre de création de diagrammes UML. Programmé
en Java, il est édité sous licence EPL 1.0. Il est multilingue, supporte la génération de
code et l'ingénierie inverse. [4]

30
Conception et réalisation d’une plateforme web avec système d’administration
II. LANGAGES DE DEVELOPPEMENT ET FRAMEWORK

1. Langages de développement

➢ PHP (POO)

PHP : Hypertext Preprocessor, plus connu sous son sigle 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. PHP est un langage impératif orienté objet. [4]

➢ JavaScript

JavaScript est un langage de programmation de scripts principalement employé


dans les pages web interactives mais aussi pour les serveurs avec l'utilisation de
Node.js. [4]

➢ HTML5 CSS3
HTML5 (HyperText Markup Language 5) est la dernière révision majeure
du HTML (format de données conçu pour représenter les pages web). C’est le langage
de balisage conçu pour représenter les pages web. C'est un langage permettant d'écrire
de l'hypertexte, d'où son nom.
CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en
cascade ». Le CSS correspond à un langage informatique permettant de mettre en
forme des pages web (HTML ou XML). [4]

31
Conception et réalisation d’une plateforme web avec système d’administration
2. Framework utilisé

➢ Laravel version 2.1.0

Laravel est un framework (ensemble cohérent de composants logiciels structurels)


web open-source écrit en PHP respectant le principe modèle-vue-contrôleur (MVC) et
entièrement développé en programmation orientée objet. Laravel est distribué sous
licence MIT, avec ses sources hébergées sur GitHub. [4]

Figure 13: La structure MVC (Source Google)

➢ Bootstrap version 4.3.1


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. [4]

32
Conception et réalisation d’une plateforme web avec système d’administration
III. DEPLOIEMENT DU SITE WEB

Notre application web a été déployée sur un serveur web (Cloud4africa) en ligne
dont les caractéristiques sont les suivantes :

Tableau 7: Caractéristiques du serveur de déploiement

Package d’hébergement Pack Gold

Version de cPanel 80.0 (build 18)

Version Apache 2.4.39

Version de PHP 5.6.40

Version de MySQL 5.7.26

Architecture x86_64

Système d’exploitation linux

Adresse IP partagée 164.160.35.251

Espace disque 250 Go

Bande passante Illimitée

33
Conception et réalisation d’une plateforme web avec système d’administration
CHAPITRE II : PRESENTATION DE L’APPLICATION WEB

I. PRESENTATION DE L’ARCHITECTURE UTILISEE

Notre application web s’articule autour de l’architecture 2-tiers ou encore


l’architecture client-serveur de première génération. On a d’un côté le client qui
demande un service à travers des requêtes et de l’autre côté le serveur qui reçoit les
requêtes, effectue un traitement et renvoie les ressources demandées. L’avantage avec
cette architecture, c’est que les ressources sont centralisées sur le serveur et qu’elle est
plus sécurisée puisqu’il y’a moins de point d’entrée pour accéder aux données.

Figure 14: Architecture 2-tiers (Source Google)

II. LES FONCTIONNALITES DE L’APPLICATION WEB

1. Sécurité

En termes de sécurité, nous avons défini des rôles au niveau du système


d’administration, à savoir :
Le super administrateur

34
Conception et réalisation d’une plateforme web avec système d’administration
Il peut s’agir du responsable du service informatique. Donc il pourra se loguer avec
ses identifiants propres à lui et aura droit et accès à toutes les fonctionnalités du
système d’administration.
L’éditeur d’article
Celui-ci peut de même s’authentifier à l’aide de ses identifiants et pourra uniquement
gérer les articles.
L’auteur d’article
Il doit également s’authentifier et n’aura qu’à rédiger des articles.

2. La demande de service

Le client qui désire faire une demande de service, a la possibilité de remplir un


formulaire prévu à cet effet et de soumettre sa demande dûment renseignée.

3. La newsletter

Toutefois qu’un client souhaiterait être informé des nouvelles offres de service et
des promotions de l’entreprise, il devra s’inscrire à la newsletter ou lettre
d’information en français.

4. La boîte de messagerie

Cette fonctionnalité donne aux clients ou aux simples visiteurs, le privilège de


laisser des commentaires en rapport avec les services offerts ou d’autres aspects de
l’entreprise.

Les captures d’écran des interfaces de l’application web sont données en annexe.

Conclusion partielle

Le développement de ce site web a nécessité l’utilisation du framework laravel basé


sur la structure MVC. Nous avons également opté pour l’architecture client-serveur en
vue de réunir toutes nos ressources dans un même serveur.

35
Conception et réalisation d’une plateforme web avec système d’administration
CONCLUSION GENERALE

Au terme de notre travail, nous sommes parvenus à la réalisation de la plateforme


web de l’entreprise IAHS.

La conception de cette plateforme a nécessité l’utilisation de la méthode UP basée


sur le langage de modélisation UML. Quant à sa réalisation, nous avons utilisé des
langages et des outils de développements web tels que PHP qui est un langage de
programmation libre utilisé pour produire des pages web, JavaScript qui aussi est un
langage de programmation de scripts employé pour des pages web interactives. Aussi,
avons-nous utilisé HTML pour le contenu des interfaces et CSS pour leur mise en
forme. Tous ces langages sont à la base des interfaces favorisant la bonne interaction
entre l’utilisateur et le système.

Suite à cette démarche technique, nous avons obtenu des résultats. Ces derniers
répondent effectivement aux besoins de l’entreprise et de ses clients ; IAHS dispose
désormais d’un site qui lui confère la possibilité de gérer ses clients et d’avoir une
meilleure visibilité. Les clients de même pourront librement adresser leurs demandes
de service en ligne à l’entreprise.

Lors de la réalisation de ce projet, nous avons été confrontés à des difficultés


telles que le manque d’expérience dans certains outils de développement et parfois
l’inaccessibilité à des informations de l’entreprise.

Toutefois, nous suggérons à l’entreprise d’apporter sur sa plateforme web des


contenus d’articles plus attractifs afin de retenir plus de visiteurs et d’accroître la
capacité de son portefeuille client.

36
Conception et réalisation d’une plateforme web avec système d’administration
ANNEXES

VII
Conception et réalisation d’une plateforme web avec système d’administration
Annexe 1

Le site web

Les images ci-dessous illustrent les différentes interfaces de la plateforme web.

Page d’accueil du site web

Page d’actualité du site web

VIII
Conception et réalisation d’une plateforme web avec système d’administration
Annexe 2

Page pour la demande de service du site web


L’espace d’administration du site web

Nous présentons par la suite quelques interfaces du site d’administration.

Page de connexion du site d’administration

IX
Conception et réalisation d’une plateforme web avec système d’administration
Annexe 3

Tableau de bord du site d’administration

Liste des demandes de services de IAHS

X
Conception et réalisation d’une plateforme web avec système d’administration
Annexe 4

Formulaire de rédaction d’articles pour le site web

XI
Conception et réalisation d’une plateforme web avec système d’administration
BIBLIOGRAPHIE
[1] 2017, Sapohi Liliane, Mémoire de fin de cycle, licence professionnelle ESATIC,
Thème : « Conception et Réalisation d’un Système d’Information Sous-Régional pour
l’artisanat ».

[2] 2014 - 2015, Mr Lahcene KEDJAR et Mr Mokhtar OUMAKHLOUF, Mémoire de


fin de cycle, master en administration et sécurité des réseaux, Université A/Mira de
Béjaïa, Algérie, Thème : « Conception et Réalisation d’une application de messagerie
instantanée sous Android ».

[3] 2018, Kouassi Martial Landry Amalaman, Mémoire de fin de cycle, licence
professionnelle ESATIC, Thème : « Conception et réalisation d’une application de
gestion et de traçabilité de volaille ».

WEBOGRAPHIE

[4] Wikipédia, l’encyclopédie libre,


https://fr.m.wikipedia.org/wiki/, consulté le 23/05/2019 à 13h59.

[5] Rôle d'un site web pour une entreprise,


https://www.les-infostrateges.com/article/role-d-un-site-web-pour-une-entreprise,
consulté le 24/05/2019 à 15h38.

[6] Mémoire online.com, mémoire domaine informatique sur le thème : « Conception


et réalisation d’un site web dynamique pour la prise de rendez-vous médicale en ligne
»,
https://www.memoireonline.com/04/17/9870/m_Conception-et-realisation-dun-site-
web-dynamique-pour-la-prise-de-rendez-vous-medicale-en-ligne11.html, par
Eskandar Kouicem, Azza Dridi et Med Nadir Boukelal, licence en informatique 2016
Université de Constantine 2, consulté le 06/06/2019 à 16h51.

XII
Conception et réalisation d’une plateforme web avec système d’administration
TABLES DES MATIERES

DEDICACE .............................................................................................................................................. I
REMERCIEMENTS ............................................................................................................................... II
AVANT-PROPOS ................................................................................................................................ III
SOMMAIRE ......................................................................................................................................... IV
LISTE DES SIGLES ET ABREVIATIONS ...........................................................................................V
LISTE DES FIGURES ET TABLEAUX.............................................................................................. VI
INTRODUCTION ................................................................................................................................. 1
PREMIERE PARTIE : Présentation générale ................................................................................... 3
CHAPITRE I : PRESENTATION DE L’ESATIC ................................................................................. 4
I. HISTORIQUE ............................................................................................................................................. 4
II. MISSION .................................................................................................................................................... 5
CHAPITRE II : PRESENTATION DU GROUPE CONNECT IEBS .................................................... 6
I. HISTORIQUE ............................................................................................................................................. 6
II. STATUT JURIDIQUE ET MISSION ........................................................................................................ 7
III. ORGANIGRAMME ................................................................................................................................... 7
CHAPITRE III : PRESENTATION DU PROJET .................................................................................. 8
I. ETUDE DE L’EXISTANT ......................................................................................................................... 8
1. Présentation de l’existant ....................................................................................................................... 8
2. Critique de l’existant ............................................................................................................................. 8
II. DEFINITION DE L’OBJECTIF DU PROJET ET PRESENTATION DU CAHIER DE CHARGES ...... 8
1. Objectif du projet ................................................................................................................................... 8
2. Cahier de charges .................................................................................................................................. 9
a. Les acteurs ......................................................................................................................................... 9
b. Les tâches .......................................................................................................................................... 9
Conclusion partielle................................................................................................................................. 9
DEUXIEME PARTIE : Analyse et Conception ............................................................................... 10
CHAPITRE I : LA METHODE D’ANALYSE ET DE CONCEPTION .............................................. 11
I. PRESENTATION DES METHODES .......................................................................................................11
1. Définition..............................................................................................................................................11
2. Les méthodes d’analyse et de conception .............................................................................................12
3. Choix de la méthode utilisée ................................................................................................................13
II. PRESENTATION DE LA METHODE CHOISIE ....................................................................................13

XIII
Conception et réalisation d’une plateforme web avec système d’administration
1. La méthode UP .....................................................................................................................................13
2. Le cycle de vie du Processus unifié ......................................................................................................14
3. Le langage UML...................................................................................................................................15
CHAPITRE II : ANALYSE DES BESOINS ........................................................................................ 17
I. EXPRESSION DES BESOINS .................................................................................................................17
1. Inventaire des besoins fonctionnels ......................................................................................................17
2. Inventaire des besoins non fonctionnels ...............................................................................................17
II. LES CAS D’UTILISATION ......................................................................................................................18
1. Diagramme de cas d’utilisation ............................................................................................................18
2. Description textuelle des scénarios .......................................................................................................20
a. Le cas d’utilisation « Authentification » ..........................................................................................20
b. Le cas d’utilisation « Demande de service » ....................................................................................21
CHAPITRE III : PHASE DE CONCEPTION ...................................................................................... 22
I. DIAGRAMME DE CLASSES METIER...................................................................................................22
1. Définition..............................................................................................................................................22
2. Elaboration ...........................................................................................................................................23
II. DIAGRAMME DE SEQUENCES ............................................................................................................25
1. Définition..............................................................................................................................................25
2. Elaboration ...........................................................................................................................................26
Conclusion partielle............................................................................................................................... 27
TROISIEME PARTIE : Réalisation ................................................................................................. 28
CHAPITRE I : TECHNOLOGIES UTILISEES ................................................................................... 29
I. ENVIRONNEMENT DE DEVELOPPEMENT ........................................................................................29
1. Environnement matériel .......................................................................................................................29
2. Environnement logiciel.........................................................................................................................29
II. LANGAGES DE DEVELOPPEMENT ET FRAMEWORK ....................................................................31
1. Langages de développement .................................................................................................................31
2. Framework utilisé .................................................................................................................................32
III. DEPLOIEMENT DU SITE WEB ..............................................................................................................33
CHAPITRE II : PRESENTATION DE L’APPLICATION WEB ........................................................ 34
I. PRESENTATION DE L’ARCHITECTURE UTILISEE ..........................................................................34
II. LES FONCTIONNALITES DE L’APPLICATION WEB ........................................................................34
1. Sécurité .................................................................................................................................................34
2. La demande de service .........................................................................................................................35
3. La newsletter ........................................................................................................................................35
4. La boîte de messagerie .........................................................................................................................35
Conclusion partielle............................................................................................................................... 35

XIV
Conception et réalisation d’une plateforme web avec système d’administration
CONCLUSION GENERALE ............................................................................................................ 36
ANNEXES ........................................................................................................................................... VII
BIBLIOGRAPHIE ............................................................................................................................... XII
WEBOGRAPHIE ................................................................................................................................. XII
TABLES DES MATIERES ................................................................................................................XIII

XV
Conception et réalisation d’une plateforme web avec système d’administration

Vous aimerez peut-être aussi