Ministère de la formation professionnelle et de l'emploi

Centre Sectoriel de Formation en Télécommunications, Cité el Khadra

PROJET FIN DE FORMATION

Technicien Supérieur en Marketing et Multimédia

Sujet : Site web de l’association postale de Tunis

Carthage

Réalisé par:
Jihen Ouerghi
Lobna Hassini

Encadré par:
Mr Fehmi Bezzaouia
Résumé :

Le but de ce projet a été de développer un site web permettant aux utilisateurs de suivre les
activités et de pouvoir participer aux différentes conventions proposées par l’association.

Abstract:

The aim of this project was to develop a web site allowing users to follow the activities and to be
able to participate in the various conventions proposed by the association.

:‫خالصة‬
‫كان الهدف من هذا المشروع هو تطوير موقع على شبكة اإلنترنت‬
‫يسمح للمستخدمين بمتابعة األنشطة والقدرة على المشاركة في‬
.‫االتفاقيات المختلفة التي اقترحتها الجمعية‬

Remerciement
 Avant tout, nous tenons à présenter nos très sincères remerciements à notre
encadrant et chef de département marketing et multimédia de la centre de formation en

télécommunications, cité el khadra, Mr Fehmi Bezzaouia pour son soutien, son

encouragement, sa bienveillance et les critiques pertinentes qui nous ont été
précieuses tout au long de ce travail.

Nos remerciements s’adressent particulièrement à Mr Yassine FRIAA Directeur de

poste tunisienne qui ont bien voulu nous accepter au sein de leurs poste et nous faire
disposer de tous les documents et informations nécessaires pour l’élaboration de notre

rapport.
Table des matières
Introduction générale..................................................................................................................1
CHAPITRE 1. CONTEXTE GÉNÉRAL DU PROJET.............................................................................2
1.2 Présentation générale de l’office National des postes...................................................3
1.2.1 Historiques..............................................................................................................3
1.2.2 Services offerts par la Poste Tunisienne..................................................................4
1.3 L’Association Postale de Tunis Carthage.........................................................................4
1.3.1 Historique de APTC..................................................................................................4
1.3.2 Les différents partenaire de APTC...........................................................................5
1.3.2.1 Institut Molière.....................................................................................................5
1.3.2.2 California gym.......................................................................................................6
1.3.2.3 Carthage Land.......................................................................................................6
1.3.2.4 Friguia Parc...............................................................................................................6
1.3.3 Organigramme de APTC..............................................................................................7
1.5 Cadre du projet................................................................................................................10
1.6 Étude de l’existant............................................................................................................10
1.6.1 Description de l’existant............................................................................................10
1.7 Planning prévisionnel.......................................................................................................11
1.8 Objectif du travail.............................................................................................................12
Conclusion..................................................................................................................................12
CHAPITRE 2 SPECIFICATION DES BESOINS..................................................................................13
Introduction...........................................................................................................................13
2.1 Les besoins fonctionnels...................................................................................................13
2.1.1 Application Mobile (Admin).......................................................................................13
2.1.3 Application Mobile (Utilisateur)................................................................................14
2.2 Les besoins non fonctionnels...........................................................................................14
2.3Type de Diagramme..........................................................................................................14
2.3.1 Diagramme de cas d’utilisation global (Use case)......................................................15
2.3.1.1 Acteurs...............................................................................................................15
2.3.1.2 Cas d’utilisation (UC) global de l’admin..............................................................15
2.3.1.3 UC global de l’utilisateur.....................................................................................16
2.3.1.4 Raffinement des UC................................................................................................17
2.3.1.4.1 UC gérer des publications (par l’administrateur).............................................17
 2.3.1.4.2 UC d’inscrire....................................................................................................19
2.3.1.4.3 UC d’authentifier.............................................................................................20
Conclusion..................................................................................................................................21
CHAPITRE 3 CONCEPTION..........................................................................................................22
Introduction...........................................................................................................................22
3.1 Définition d’UML..............................................................................................................22
3.2 Diagramme de classes......................................................................................................23
3.2.1Gestion des règles..................................................................................................23
3.2.2Diagramme.............................................................................................................23
3.3 Cycles de développement................................................................................................25
3.3.1 Cycle en cascade........................................................................................................25
3.3.1.1 Avantages du modèle en cascade...................................................................26
3.3.1.2 Inconvénients du modèle en cascade.................................................................26
3.3.2 Cycle en spirale..........................................................................................................26
3.3.2.1 Avantages du modèle en spirale.........................................................................27
3.3.2.2 Inconvénients du modèle en spirale...................................................................27
3.3.3 Cycle itératif..............................................................................................................27
3.3.3.1 Avantages du modèle itératif.............................................................................28
3.3.3.2 Inconvénients du modèle itératif.......................................................................29
3.3.4 Cycle Agile.................................................................................................................29
3.3.5 Cycle en V..................................................................................................................29
3.3.5.1 Les avantages du cycle en V................................................................................30
3.3.5.2 Les inconvénients du cycle en V.........................................................................30
3.4 Diagramme de séquence..................................................................................................30
3.4.1 Diagramme de séquence de l’Authentification.........................................................31
3.4.2 Diagramme de séquence d’inscription......................................................................32
3.4.3 Diagramme de séquence de modification.................................................................33
Conclusion..............................................................................................................................34
CHAPITRE 4 : REALISATION.........................................................................................................35
Introduction...........................................................................................................................35
4.1 Environnement de travail.............................................................................................35
4.1.1 Environnement matériel........................................................................................35
4.1.2 Environnement logiciel..........................................................................................35
 4.1.2.1 Android Studio....................................................................................................36
4.1.2.1.1 Avantage de l’utilisation de Android studio.....................................................36
4.1.2.1.2 Inconvenant de l’utilisation de Android studio................................................37
4.1.2.2 Android SDK........................................................................................................37
4.1.2.3 JDK (Java Développement Kit)............................................................................37
4.1.2.4 Firebase..............................................................................................................38
4.1.2.4.1 A quoi sert Firebase.........................................................................................38
4.1.2.4.2 Avantage de l’utilisation de Firebase...............................................................39
4.1.2.4.2 Les différents services proposer par Firebase..................................................41
4.1.2.5 Architecture client/serveur................................................................................47
4.2 Architecture de développement...................................................................................48
2.4.1. Architecture MVC (Model-View-Controller)........................................................48
4.3 Langages de programmation........................................................................................48
4.3.1 JAVA.......................................................................................................................49
4.3.2 XML........................................................................................................................49
4.4. Format d’échange de données....................................................................................49
4.4.1 JSON......................................................................................................................49
4.5 Présentation des interfaces..........................................................................................49
4.5.1 Interfaces admin....................................................................................................49
4.5.2 Interfaces utilisateurs............................................................................................52
Conclusion Générale et perspectives.........................................................................................54

Liste des Figures

Webographies............................................................................................................................55

Figure 1 : Logo de APTC.................................................................................................................................5

Figure 2 : logo de l’institut Molière................................................................................................................5
Figure 3 : logo de California Gym...................................................................................................................6
Figure 4 : logo de Carthage Land...................................................................................................................6
Figure 5 : logo de Friguia Parc.......................................................................................................................7
Figure 6 : page Facebook de APTC...............................................................................................................11
Figure 7: UC global Administrateur.............................................................................................................16
Figure 8: UC global de l'utilisateur...............................................................................................................17
Figure 9 : UC gérer les publications.............................................................................................................18
Figure 10 : diagramme de séquence d’ajout de publication.......................................................................19
Figure 11: diagramme de séquence s'inscrire..............................................................................................20
Figure 12 : diagramme de séquence d'authentifier.....................................................................................21
Figure 13 : logo de UML...............................................................................................................................22
Figure 14 : diagramme de classe.................................................................................................................24
Figure 15 : Cycle en cascade........................................................................................................................25
Figure 16 : Cycle en spirale..........................................................................................................................27
Figure 17: Cycle itératif................................................................................................................................28
Figure 18 : cycle de vie en V.........................................................................................................................29
Figure 19 : diagramme de séquence 'authentification'...............................................................................31
Figure 20: diagramme de séquence d’inscription........................................................................................32
Figure 21 : diagramme de séquence de modification de profil...................................................................33
Figure 28 : Logo de Firebase........................................................................................................................38
Figure 29 : ajout d’un projet........................................................................................................................39
Figure 30 : fonctionnalités de Firebase........................................................................................................42
Figure 31 : Firebase Authentification...........................................................................................................43
Figure 32 : Firebase Cloud Messaging.........................................................................................................44
Figure 33 : Cloud Firestore...........................................................................................................................45
Figure 34 : architecture 3 tiers.....................................................................................................................47
Figure 35 : architecture MVC.......................................................................................................................48
Figure 36 : le format JSON...........................................................................................................................49
Figure 37 : page 'login'.................................................................................................................................50
Figure 38 : page 'home'...............................................................................................................................51
Figure 39 : Modification d’un post...............................................................................................................51
Figure 40 : page 'liste des utilisateurs'.........................................................................................................52
Figure 41 : page d’accueil............................................................................................................................52
Figure 43 : page de l’utilisateur...................................................................................................................53
 Introduction général

Il y a environ vingt-sept ans, l’invention de l’internet a révolutionné la façon de penser et de

vivre dans le monde, elle a permis aux consommateurs de faire des transactions, et accomplir
leurs tâches sans devoir se déplacer physiquement.
CHAPITRE 1. CONTEXTE GÉNÉRAL DU PROJET

Introduction
Au sein de la l’office national des postes une association a vu le jour, celle-ci a été Créée le 30
décembre 2017. Cette association pris pour sigle et nom APTC qui a pour signification
Association Postale de Tunis Carthage.
Dans le but de se faire connaitre et de partager leurs informations en temps réel, une solution a
été adaptée pour réaliser un site web. Cette cible a été l’objet de notre projet de fin de
formation.
Dans ce premier chapitre, il s’agit de mettre notre travail dans son contexte général.
Nous allons présenter alors l’Office National des Postes et l’APTC. Ensuit nous allons établir
l’Etat de art, une synthèse sur le cadre du projet et finir ce chapitre par les objectifs visés.
1.1 Présentation générale de l’office National des postes
La Poste Tunisienne, aussi nommé l’Office national des Postes (ONP) tunisiennes, est
l’entreprise publique tunisienne de service postale créé en 1998. A la suite du retrait des activités
de service téléphonie en 1999, l’ONP est une établissement industriel et commercial basé sur
deux activités principales : la collecte, le transport et la distribution de courrier et l’exploitation
des affaires financières tel qu’un ensemble de services informatiques, la vente des timbres, les
abonnements du transport, etc. En arrivant à ce niveau la poste tunisienne n’a cessé de mieux
maîtriser ses moyens humains, matériels et financières et de les orienter vers la mise en place
d’une meilleur gestion afin de pouvoir s’adapter aux changements technologiques, économiques
et sociaux à l’échelle nationale et internationale.

1.1.1 Historiques
Selon le décret le 15 juin 1998, l’office National des Postes a été créé. Il a démarré ses activités
dans le cadre d’un statut d’entreprise à partir du premier janvier 1999. La poste tunisienne assure
conformément au Code de la poste promulguée le 02 Juin 1998 des prestations économiques et
sociales importantes. Ci-dessous, se trouve les principales dates historiques de la poste tunisienne
: — 15 juin 1998 : création de l’Office National des Postes, dénommé « La Poste Tunisienne »,
sous la forme d’une entreprise publique à caractère industriel et commercial dotée de
l’autonomie financières et de la personnalité morale (démarrage de son activité le 1 janvier
1999).

— Août 2002 : certification assurance qualité ISO 9002 du réseau Rapid-Poste.

— Novembre 2002 : lancement de la carte de paiement sur Internet « e-DINARPOST » pour

les titulaires de comptes courants postaux.

— 2010 : Création d’un nouveau service Mobile-dinar permettant aux détenteurs de cartes e-
DINAR SMART de bénéficier de nouveaux services via leurs téléphones portables.

— Avril 2012 : Partenariat entre La poste Tunisienne et Ooredoo pour la mise en œuvre des
services de paiement via mobile. — Août 2017 : La Poste Tunisienne lance sa nouvelle Carte
prépayée « DigiCard »
1.2.2 Services offerts par la Poste Tunisienne
La poste Tunisienne offre plusieurs services à sa clientèle dont notamment : • Le système
d’information financière : Le système d’information financière gère des opérations financières. Il
est bâti autour d’un réseau informatique décentralisé d’architecture à trois niveaux (central,
régional et local) qui se communiquent à travers des réseaux étendus « Frame Relay » et des
réseaux locaux « Token Ring » et « Ethernet ». • Le système de gestion du courrier postal IPS :
Le système de gestion du courrier postal IPS « International Postal System » permet la gestion, le
contrôle et le suivi du courrier à échelle nationale et internationale. • Le système de gestion : Le
système de gestion permet de gérer le budget, la comptabilité et les ressources humaines de la
poste. L’architecture de ce système est centralisée et elle est en cours de migration vers une
architecture décentralisée à 3 niveaux : site central, direction régional et bureaux de Poste. Elle
couvre toutes les régions urbaines et rurales du territoire tunisien à travers un réseau commercial
composé d’un grand nombre de bureaux de Poste.

1.3 L’Association Postale de Tunis Carthage

1.3.1 Historique de APTC

APTC est une association au sein de la poste tunisienne. Elle a été créé pour épanouissement des
employés. L'Association Postale de Tunis Carthage a été créée le 30 Décembre 2017. Cette
association offre diverses activités et elle possède aussi de nombreux partenaires.
 Figure 1 : Logo de APTC

1.3.2 Les différents partenaire de APTC

1.3.2.1 Institut Molière

L’Institut de Langue Molière a été créé pour répondre à la demande des élèves, collégien,
lycéens, (des cours de soutien scolaire) étudiants et adultes, désireux d’apprendre ou de
perfectionner leur français à l'oral et à l'écrit

Figure 2 : logo de l’institut Molière

1.3.2.2 California gym

California Gym est la première chaine de clubs de fitness en Tunisie, et le leader dans le domaine
depuis 20ans. Offrant un service de qualité et équipée d’appareils à la pointe de la technologie,
elle a été la première certifiée par Les Mills, concept n°1 du fitness dans le monde, venu tout
droit de Nouvelle- Zélande. California Gym s’est en effet démarquée très tôt des autres salles de
fitness en proposant des cours collectifs pré-chorégraphiés et élaborés par les meilleurs experts
internationaux dans le domaine du fitness et de la santé.

Figure 3 : logo de California Gym

1.3.2.3 Carthage Land

Parc à thème sur la Carthage antique, grande variété de manèges et spectacles, et aire de jeux
aquatique.

Figure 4 : logo de Carthage Land

1.3.2.4 Friguia Parc

Friguia Parc est un parc zoologique tunisien situé sur la côte méditerranéenne, près du golfe
d'Hammamet, dans les environs de la ville de Bouficha. Ouvert le 11 novembre 2000, il couvre
une superficie de 36 hectares et compte près de 400 animaux et 62 espèces dans de vastes enclos.
 Figure 5 : logo de Friguia Parc

1.3.3 Organigramme de APTC

L’APTC est Organiser comme suit :

Abderraouf FAKHFAKH Président d’honneur

Nejmeddine AKREMI Président

Faouzi FEZZANI Vice-président

Ali KHOUDI Vice-président

Yessine FRIAA Secrétaire général

Hamdi LETAIEF Secrétaire Général Adjoint

Mohamed ARFAOUI Trésorier

Noura BOUGHANMI Membre

Jihene FAKHET Membre

Tableau 1 : Organigramme de l’APTC

 1.5 Cadre du projet

Ce travail s’inscrit dans le cadre du projet de fin de formation de 4ème période en marketing et

Multimédia à Centre Sectoriel de Formation en Télécommunications, Cité el Khadra (CSFT), 

L’objectif de ce projet, consiste d’une part à se familiariser avec le travail en entreprise et à

découvrir son processus adéquat dans le monde professionnel. D’autre part, il s’agit de mettre en

pratique les théories acquises au cours des quatrième période de formation , les confronter, les

adapter et les développer aux impératifs du temps et des moyens de l’organisme d’accueil

1.6 Étude de l’existant

1.6.1 Description de l’existant

L’association dispose d’une page Facebook où sont publiées toutes les actualités et les
évènements ainsi que les activités organisées. Cette page contient des informations sur
l’association et les partenaires qui contribuent à certaines activités et projets réalisés. Il contient
également une galerie photos et des vidéos qui enrichissent le contenu de la page.
 Figure 6: page Facebook de APTC

1.8 Objectif du travail

Dans le but de réaliser un site web accessible à tous un chacun dans un premier temps pour
permettre à l’utilisateur de connaitre l’association et les activités qui y sont pratiquées.

Dans la deuxième partie nous allons la concentrer aux adhérents qui auront payé leur
participation, cette section les permettra d’avoir accès à des conventions liées aux différents
partenaires de l’association.

Conclusion

Après avoir donné une présentation de APTC et la poste en donnant un aperçu sur son historique,
ses services et ses organigrammes. Dans un second temps, nous avons essayé de faire une étude
de l’existant en décrivant le service de distribution actuelle, ses procédures ainsi que ses
inconvénients. Dans un dernier temps, nous avons parlé du contexte général, la problématique et
les objectifs visés de notre projet et nous avons terminés ce chapitre par une description du
travail à faire. Dans le chapitre suivant, nous allons présenter les différents besoins fonctionnels
et non fonctionnels du projet.
CHAPITRE 2 SPECIFICATION DES BESOINS

Introduction

Dans ce chapitre, on va présenter les besoins fonctionnels et non fonctionnels de la solution,

enfin on va présenter le diagramme des cas d’utilisations global et détaillés

2.1 Les besoins fonctionnels

2.1.1 Site web (Admin)

Les besoins fonctionnels de l’administrateur sont :

 Gestion des postes : Cette tâche consiste à :

 La création de nouveaux postes par administrateur ;
 La modification de ses postes ;
 Et la suppression.
 Gestion des Attributs : Cette tâche consiste à :
 La création de nouveaux Attributs par administrateur ;
 La modification de ses Attributs ;
 Et la suppression.
 Gestion des historiques : Cette tâche consiste à :
 La création de nouveaux historiques par administrateur ;
 La modification de ses historiques ;
 Et la suppression.
 Gestion des structures : Cette tâche consiste à :
 La création de nouveaux structures par administrateur ;
 La modification de ses structures ;
 Et la suppression.
 Gestion des conventions : Cette tâche consiste à :
 La création de nouveaux conventions par administrateur ;
 La modification de ses conventions ;
 Et la suppression.
2.1.3 site web (Utilisateur)

Les besoins fonctionnels de l’utilisateur sont :

 Avoir accès aux publications sans inscriptions ;

 Inscription : l’utilisateur doit s’inscrire avant d’avoir accès a la partie convention de site web
, en introduisant son username et mot de passe qui sont obligatoires pour pouvoir se
connecter, ainsi que ces informations personnelles.
 La gestion de son compte : utilisateur peut modifier son compte à sa guise.

2.2 Les besoins non fonctionnels

Le système doit avoir des critères de qualité tels que :

 Sécurité : les comptes des utilisateurs doivent être protégés, donc la connexion avec
login et mot de passe est nécessaire. La visibilité des informations personnelles doit être
gérée.
 L’intégrité : l’intégrité et la cohérence des données doivent être assurées à chaque mise à
jour et insertion dans la base de données.
 La rapidité : le code doit être optimiser pour un meilleur rendement(vitesse).
 L’ergonomie : les interfaces doivent être conviviales et ergonomiques. Elles doivent être
simples, visible, lisible et faciles à utiliser.

Maintenabilité et scalabilité : Le code doit être compréhensible afin d’assurer son évolution et
son extensibilité pour répondre aux besoins du marché.

2.3Type de Diagramme

Actuellement, il existe treize types de diagrammes différents en version UML 2.5. Il permet
d’offrir la possibilité de représenter tous les aspects, fonctionnels, structurels et
Comportementaux d’un système.
Il faut bien distinguer deux catégories de diagrammes : ceux qui présentent une vision statique
du système et ceux qui mettent en évidence son aspect dynamique
Pour la conception de notre système "l’application social de APTC", nous allons modéliser trois
types de diagrammes de conception :

 Diagramme des cas d’utilisation : il énumère de façon synthétique les fonctionnalités

d’un système, du point de vue de l’utilisateur final.
 Diagramme de séquence : la collaboration d’un ensemble d’objet pour un contexte donné,
en mettant l’accent sur la chronologie des échanges et les éventuelles contraintes
temporelles.
 Diagramme de classe : Ce diagramme décrit l’ensemble des classes et interfaces d’un
système ainsi que les associations qui les relient.

Afin de présenter les diagrammes de modélisation, nous allons utiliser le logiciel Star

UML.

2.3.1 Diagramme de cas d’utilisation global (Use case)

Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision

globale du comportement fonctionnel d'un système logiciel. Ils sont utiles pour des présentations

auprès de la direction ou des acteurs d'un projet, mais pour le développement, les cas d'utilisation
sont plus appropriés. 

2.3.1.1 Acteurs

 Administrateur : C’est celui qui gère le système.

 Utilisateur : C’est celui qui suis les actualités sur site web .

2.3.1.2 Cas d’utilisation (UC) global de l’admin

Les tâches citées plus haut sont présentés par l’UC global de l’admin suivant :
 Figure 7 : UC global Administrateur

2.3.1.4 Raffinement des UC

2.3.1.4.1 UC gérer des publications (par l’administrateur)

Le diagramme suivant est le raffinement de l’UC "gérer les publications" :

Figure 8 : UC gérer les publications
  Description textuelle de la gestion de publication

Cas d’utilisation Ajout d’une publication

Acteur Administrateur

Description Mettre à jour ou ajouter des publications

Précondition Authentification

post condition L’admin doit remplir tous les trois partis

pour validé la publication

Tableau 2 : gestion de publication

 Diagramme de séquence de l’UC ajouter d’une publication

Figure 9 : diagramme de séquence d’ajout de publication

2.3.1.4.2 UC d’inscrire

 Description textuelle

Cas d’utilisation Inscription

Acteur Utilisateur

Description L’inscription d’un utilisateur se fait en

remplissant un formulaire avec les
informations nécessaires et en payant sa
cotisation mensuel.

Précondition L’utilisateur doit cliquer sur le lien ou

bouton s’inscrire pour ouvrir le formulaire
d’inscription.

Scénario nominal L’utilisateur remplit le formulaire puis

valide.

Post-condition L’utilisateur s’ajoute à la base de donné

avec succès.

Scénario d’exception Inscription non valide. Un message d’erreur

doit s’afficher à l’utilisateur.

Tableau 3 : inscription contexte

 Diagramme de séquence d’inscription

Figure 10 : diagramme de séquence s'inscrire
2.3.1.4.3 UC d’authentifier

 Description textuelle

Cas d’utilisation Authentification

Acteur Utilisateur / Administrateur

Description L’authentification d’un Utilisateur /

Administrateur se fait en remplissant un
formulaire avec son username et mot de
passe.

Précondition Utilisateur / Administrateur doit ouvrir

cliquer sur login.

Scénario nominal Utilisateur / Administrateur remplit le

formulaire puis valide

Post-condition Utilisateur / Administrateur sera dirigé vers

sa page respective de site

Login échoué. Un message d’erreur doit

s’afficher à l’utilisateur, lorsque l’email ou
Scénario d’exception
le mot de passe est erronée.

Tableau 4 : authentification

 Diagramme de séquence d’authentification

 Figure 11: diagramme de séquence d'authentifier

Conclusion

Dans ce chapitre, nous avons spécifié tous les besoins fonctionnels et non fonctionnels de notre
projet, et on a présenté également les diagrammes globaux des cas d’utilisation ainsi que leurs
raffinements. Dans le chapitre suivant on va entamer l’étape suivante du projet, à savoir la
conception détaillée, en présentant les diagrammes UML nécessaires à la phase du
développement.
CHAPITRE 3 CONCEPTION

Introduction

La conception est une étape primordiale dans le cycle de vie d’un projet, elle a pour objectif
d’élaborer des modèles détaillés de l’architecture du système. Elle vise également la réduction
de la complexité du système.

3.1. Conception architectural

Il existe deux types d’architectures logicielles : architecture physique et architecture logique.

3.1.1Architecture physique

Suite à une étude qui nous avons fait sur les différentes architectures, notre choix s’est porté sur
l’architecture client/serveur dont l’application est subdivisée entre deux entités client et serveur qui
coopèrent ensemble via des requêtes [N1] .

Le dialogue entre les deux entités peut se résumer par :

- Le client demande un service au serveur.

- Le serveur réalise ce service et renvoie le résultat au client.

Plus précisément, nous avons choisi l’architecture n-tiers pour les raisons suivantes : - Elle correspond le
mieux à la structure attendue dans le sens où notre système constituera en quelque sorte le serveur et
les autres acteurs seront les clients.

- Deuxièmement, vu que nous avons besoin d’un client léger qui n’aura qu’à se connecter au serveur, il
nous a donc paru évident d’opter pour une architecture plus évoluée que l’architecture 2-tiers.

- Finalement, bien que l’architecture 3-tiers soit adéquate, elle possède néanmoins des limites qui sont
corrigées dans la structure n-tiers qui est plus flexible, plus souple et plus puissante.

1.2. Architecture logique

Afin de bien concevoir notre site web et bien organiser notre code source, nous avons opté pour
l'architecture MVC (Modèle - Vue – Contrôleur) qui a pour but de séparer la logique du code en trois
parties que l'on retrouve dans des fichiers distincts, comme l'explique la description qui suit [N4] :

- Modèle : Cette partie gère les données de notre site. Son rôle est d'aller récupérer les informations «
brutes » dans la base de données, de les organiser et de les assembler pour qu'elles puissent ensuite
être traitées par le contrôleur. On y trouve donc les requêtes SQL.
 - Vue : Cette partie se concentre sur l'affichage. Elle ne fait presque aucun calcul et se contente de
récupérer des variables pour savoir ce qu'elle doit afficher.

- Contrôleur : Cette partie gère la logique du code qui prend des décisions. C'est en quelque sorte
l'intermédiaire entre le modèle et la vue : le contrôleur va demander au modèle les données, les
analyser, prendre des décisions et renvoyer le texte à afficher à la vue. C'est notamment lui qui
détermine si le visiteur a le droit de voir la page ou non (gestion des droits d'accès).

Figure 4.1: L’architecture MVC

Il faut tout d'abord retenir que le contrôleur est le chef d'orchestre : c'est lui qui reçoit la requête du
visiteur et qui contacte d'autres fichiers (le modèle et la vue) pour échanger des informations avec eux.
Le fichier du contrôleur demande les données au modèle sans se soucier de la façon dont celui-ci va les
récupérer. Par exemple : « Donne-moi la liste des demandes ».

Le modèle traduit cette demande en une requête SQL, récupère les informations et les renvoie au
contrôleur.

Une fois les données récupérées, le contrôleur les transmet à la vue qui se chargera d'afficher la liste des
demandes.

Le rôle de contrôleur ne se limite pas à faire la jonction entre le modèle et la vue mais il s’en charge
aussi à faire d’autres opérations par exemple des calculs, des vérifications d'autorisations ou
miniaturiser des images, etc.

Concrètement, le visiteur demandera la page au contrôleur et c'est la vue qui lui sera retournée. Bien
entendu, tout cela est transparent pour lui, il ne voit pas tout ce qui se passe sur le serveur. C'est sur ce
type d'architecture que repose un très grand nombre de sites professionnels

3Diagramme de deployment

Le diagramme de déploiement correspond à la description de l’environnement d’exécution du système

(matériel, réseau…) et de la façon dont les composants y sont installés
Figure 4.2: Diagramme de déploiement du site web

2Modélisation de l’aspect statique

Dans ce chapitre nous présentons les différents diagrammes UML (Unified Modeling Language)
créés en utilisant l’outil de conception en ligne staruml.

3.2.1 Définition d’UML

Le Langage de Modélisation Unifié, de l'anglais Unified Modeling Language, est un langage de

modélisation graphique à base de pictogrammes conçu pour fournir une méthode normalisée
pour visualiser la conception d'un système. Il est couramment utilisé en développement logiciel
et en conception orientée objet. 
 Figure 12 : logo de UML

3.2 Diagramme de classes

Lors de la modélisation orientée objet, ce diagramme est obligatoire et le plus important.

Le diagramme de classes est un schéma utilisé en génie logiciel pour présenter les classes et les
interfaces des systèmes ainsi que les différentes relations entre celles-ci. Ce diagramme fait
partie de la partie statique d'UML car il fait abstraction des aspects temporels et dynamiques.

3.2.1Gestion des règles

 Un utilisateur ne peut pas être un administrateur.

 Il peut avoir plusieurs administrateurs.
 Un administrateur peut supprimer des participant.
 Un administrateur peut ajouter plusieurs évènements.
 Un évènement est ajouté par un seul administrateur.
 Un participant peut participer à plusieurs Convention.
3.2.2Diagramme

Figure 13 : diagramme de classe

Dans notre diagramme nous avons les différentes classes et relations qui représente la structure
de la base de donnée.

 Admin : est la classe qui représente l’administrateur, c’est la seule personne autoriser à
faire des publications, ainsi que son état i_am_admin.
 User : est la classe qui représente un utilisateur, elle contient toutes ces informations
personnelles, ainsi que son état i_am_not_admin.
 Post : un post représente tout post (attribut structure historique) d’un administrateur, il
peut avoir des likes. Elle porte les informations décrivant un post.
 Convention : elle représente les évènements publiés par l’administrateur. Elle contient
les informations décrivant un évènement comme le titre, le corps, la date, le lieu (place).
  Participation : une classe association (relation n à n) entre Convention et User, contenant
les deux clés étrangères provenant de ces deux classes. Elle représente la participation des
utilisateurs aux Conventions.
 Likes : une classe association (relation n à n) entre Post et User, contenant les deux clés
étrangères provenant de ces deux classes. Elle représente les likes des utilisateurs aux
postes publiés.

3.3 Cycles de développement

3.3.1 Cycle en cascade

Une étape ne peut pas être débutée avant que la précédente ne soit achevée. La modification
d’une étape du projet a un impact important sur les étapes suivantes.

Ce modèle comporte 7 phases : analyse des besoins, spécifications, conception de l’architecture,

conception détaillée, implémentation, tests (validation) et enfin installation. Chacune de ces
phases doit produire un ou plusieurs livrables définis à l’avance et a une date d’échéance fixée.
On ne peut passer d’une étape à l’autre que lorsque les livrables de l’étape en cours sont jugés
satisfaisants. Si tout se passe bien on passe à la phase suivante, sinon on remonte à la phase
précédente, voire même en début de cycle si une anomalie critique est détectée.
 Figure 14 : Cycle en cascade

3.3.1.1 Avantages du modèle en cascade

Le planning est établi à l’avance et le maître d’ouvrage sait précisément ce qui va lui être livré et
quand il pourra en prendre livraison

3.3.1.2 Inconvénients du modèle en cascade

Ils sont assez nombreux mais le principal inconvénient est la très faible tolérance à l’erreur (les
anomalies sont détectées tardivement) qui induit automatiquement un coût important en cas
d’anomalie.

Ce modèle a été présenté il y a plus de 40 ans comme étant imparfait et depuis, un grand travail a
été fait pour trouver des modèles plus performants et plus robustes, c’est pourquoi je vous invite
à ne pas l’utiliser, mais simplement à le comprendre et à l’accepter comme une base de départ. Je
vous invite aussi à lire cet article du JDN qui est un bon plaidoyer pour l’abandon du cycle en
cascade.
3.3.2 Cycle en spirale

Le cycle en spirale reprend les étapes du cycle en V, mais prévoit l’implémentation de versions
successives, ce qui permet de mettre l’accent sur la gestion des risques, la première phase de
chaque itération étant dédiée à ce poste. A ce point il est nécessaire de définir la notion
de prototype. En effet, on ne fait pas des versions successives d’un même produit fini, corriger
une liste de bugs permet de passer de la béta à la finale mais pas du v1 à la v2… Le cycle en
spirale prévoit donc la livraison de prototypes, c’est à dire de versions incomplètes du produit. Il
peut s’agir d’une simple maquette ou même des wireframes sans aucune fonctionnalité (on parle
alors de prototype horizontal) ou bien de sites partiellement fonctionnels : telle version
implémentera la navigation de base, la suivante ajoutera l’espace membres, puis la zone de
téléchargements… on parlera alors de prototype vertical.

Figure 19 : Cycle en spirale

3.3.2.1 Avantages du modèle en spirale

Le but premier de ce modèle étant la gestion des risques, ceux-ci sont logiquement limités.
L’expertise du client croit à chaque itération du cycle, l’apprentissage se fait par touche et pas
d’un seul bloc. Enfin, ce modèle est très adaptatif : si chaque prototype apporte des
fonctionnalités indépendantes, il est possible de changer l’ordre de livraison des versions.

3.3.2.2 Inconvénients du modèle en spirale  

Selon moi le principal défaut du cycle en spirale c’est qu’il n’est adapté qu’aux projets
suffisamment gros, inutile de prévoir la livraison de 5 ou 6 prototypes pour un site vitrine sous
WordPress (même si on peut considérer qu’une maquette puis le site en lui-même constituent 2
cycles complets). De plus l’évaluation des risques en elle-même et la stricte application du cycle
de développement peut engendrer plus de coûts que la réalisation du logiciel. Enfin, ce type de
cycle de développement est complexe, entre les étapes prévues en théorie et celles mises en
pratique il y a une grande différence.

3.3.3 Cycle itératif

Simplifions un peu le modèle précédent en réduisant le nombre d’étapes du cycle et séparons les
activités des artéfacts (c’est à dire les produits issus de ces activités). Nous arrivons logiquement
au modèle itératif, que vous pouvez voir ci-dessous.

Figure 20 : Cycle itératif

Tout commence par l’expression de besoin : le client explique ce qu’il veut, tout en sachant que
ces besoins peuvent être modifiés par la suite du processus. Ensuite, on se lance dans
le processus itératif en lui-même avec la rédaction des spécifications qui est suivie par
le développement, puis la validation (c’est à dire les tests) et enfin une évaluation du travail qui
servira d’information de départ pour le cycle suivant en dressant le bilan des difficultés
rencontrées et des fonctionnalités abandonnées pendant le cycle. A l’issue de la validation on
passe aussi au déploiement : les livrables (il peut s’agir d »une version du site ou logiciel, ou
même d’une documentation) qui ont été validés sont déployés, c’est à dire mis à disposition.

3.3.3.1 Avantages du modèle itératif

 Ce type de cycle de développement est le plus souple de tous ceux présentés ici : chaque
itération permet de s’adapter à ce qui a été appris dans les itérations précédentes et le projet fini
peut varier du besoin qui a été exprimé à l’origine. Comme dans le cycle en spirale, la mise à
disposition de livrables à chaque cycle permet un apprentissage de l’utilisateur final en douceur.

3.3.3.2 Inconvénients du modèle itératif

 A mes yeux le plus gros piège de ce modèle de développement c’est la confiance qui amène bien
souvent à négliger les test d’intégration. Ainsi les développeurs livrent une nouvelle
fonctionnalité sans se rendre compte qu’ils ont cassé une chose qui fonctionnait dans les cycles
précédents. Il faut donc que le chef de projet soit particulièrement vigilant lors de la phase de
tests.

 3.3.4 Cycle Agile

Eh non le développement Agile n’est pas une question de cycle, c’est surtout une question de
philosophie, de culture, qui place la réactivité et l’implication du client en priorité. En fait les
méthodes Agile se basent sur un modèle semi-itératif qui peut être défini soit par la structure du
projet (modèle Top-Down), soit par les besoins exprimés (modèle Bottom-Up). Il serait inutile
de tenter de définir le développement Agile en quelques mots alors sachez que je travaille à la
rédaction d’un article qui y sera entièrement consacré dans les semaines à venir.
3.3.5 Cycle en V
Ce modèle est composé de 9 phases qui se répondent 2 à 2 : à chaque étape de conception
correspond une phase de test.

Notre choix de porte sur ce modèle car il est plus avantageux.

Figure 21 : cycle de vie en V

Les phases du cycle de vie en V se résument comme suit :

 Etude et analyse : l’analyse et la spécification des besoins,

 La conception architecturale et détaillées,
 Codage : développement de l’application,
 Tests et validations : les tests et la maintenance corrective.

Avantages : La structure en V permet d’espérer que le livrable final sera parfait, puisque les
phases de test sont aussi nombreuses que les autres étapes. De plus, il est facile de prévoir les
tests à effectuer au moment de la conception des fonctionnalités et des interfaces.

3.3.5.1 Les avantages du cycle en V

La méthode de cycle en V possède de nombreux avantages dans le développement d’une
application. La mise en œuvre du projet est sécurisée dans la mesure où chaque phase ne
commence qu’à partir du moment où la précédente est terminée. Elle permet de bien préparer en
amont les phases de spécification. En face de chaque phase de spécification, est mis en place un
système de vérification, ce qui assure un meilleur produit au final.

3.3.5.2 Les inconvénients du cycle en V

La méthode du cycle en V n’est pas adaptée pour le changement. Le cycle en V ne prévoit pas de
nouvelles décisions lors d’un cycle. Les changements doivent se faire entre deux cycle en V.

Il faut bien planifier un projet qui suit la méthode du cycle en V. Si le projet prend du retard, le
temps accordé pour les tests risque d’être insuffisant. D’autant plus que la phase de validation est
une phase indispensable pour le projet, elle permet de garantir la qualité du produit livré.

3.4 Diagramme de séquence

On a présenté dans le chapitre précédent quelques diagrammes de séquences globaux montrant

l’interaction entre l’utilisateur et le système. Les diagrammes qu’on va présenter montrent en
détails l’interaction entre les différentes composantes du système, en partant de l’utilisateur,
jusqu’au serveur.

Cette interaction est représentée par des flèches portant des messages descriptifs, on trouve par
exemple des noms de méthodes appelés avec ses paramètres, des messages d’erreurs ou
validation, des messages décrivant la tâche réalisée comme par exemple vérification, ou
remplissage du formulaire, ou bien des messages de navigation permettant la redirection vers
d’autres vues ou composants graphiques de site.

3.4.1 Diagramme de séquence de l’Authentification

Nous allons commencer par présenter le diagramme d’authentification :

 Figure 22 : diagramme de séquence 'authentification'

3.4.2 Diagramme de séquence d’inscription

Ici nous allons comment se passe une inscription :

 Figure 23 : diagramme de séquence d’inscription

3.4.3 Diagramme de séquence de modification

Ce diagramme montre comment se passe la modification du profil de l’adhérent.

 Figure 24 : diagramme de séquence de modification de profil

3.2 Conception de la base de données

La conception de la base de données est le processus par lequel les structures de cette base sont
définies afin de permettre le stockage de données conformément aux besoins de l’utilisateur. Les
structures des tables de notre base sont définies comme suit:

Citoyen (Num_CIN_citoyen)

estionnaire de la commune (Num_CIN_gest)

Entreprise (Matricule_fiscale, Raison_social, Code_TVA)

Demande (Id_demande) Type demande (Id_type_demande, Nom_demande)

Etat demande (Id_etat_demande, Nom_etat_demande)

Zone (Code_zone, Libelle_zone)

Rue (Code_rue, Libelle_rue, Num_maison)

Propriété (Code_propriete, Surface, Taxe)

4. Conception graphique

Par le design, on entend surtout la notion d’harmonie : une interface harmonieuse doit être :

 Bien structurée.

 Bien organisée.

 Suggère l’équilibre visuel.

.1. Charte graphique

Définir la charte graphique du site

C'est l'élaboration et la description des différents éléments graphiques qui composent l'aspect de votre
site Internet. L'ensemble comprend le logo, une bannière, les boutons, les en−têtes, les images, les
couleurs, les polices de caractères utilisées, le système de navigation. Elle se doit d'être uniforme, afin
de donner une image cohérente de votre site et de renforcer l'originalité et la crédibilité de ce qui va
être présenté sur le site. On peut adapter une charte graphique papier à l'Internet, en reprenant le logo,
les couleurs du logo, la typo utilisée, etc. Le graphisme est un élément important pour la fréquentation
de votre site et la compréhension de votre contenu. Quand vous recherchez une information sur
Internet, vous obtenez une multitude de réponses. Le graphisme peut être un élément décisif dans le
choix de l'internaute.

. 4.1.1. Les couleurs

Nous utilisons des couleurs qui a liee au poste . En effet, nous avons utilisé une paire de couleurs
(jaune et bleu)
4.1.2. Les formes

Notre site web mentionne la simplicité dans les formes utilisées puisqu’il est destiné au grand public
d’une part et aux citoyens et entreprises abonnés au site web. Pour cela nous avons choisi de travailler
avec des formes rectangulaires de différentes dimensions pour refléter cette diversité dans la cible.

4.1.3. Les images

et les photos Vu l’importance de la rapidité de téléchargement des informations en ligne, il est très
important de les optimiser de point de vu taille et qualité afin de présenter le site web dans le meilleur
habillage et fonctionnalités. En plus ces photos doivent refléter l’idée générale du site web. Pour cela
nous avons utilisé des images significatives qui traduisent le sujet de notre travail ainsi que la cible visée

.1.3. Les images et les photos

Vu l’importance de la rapidité de téléchargement des informations en ligne, il est très important de les
optimiser de point de vu taille et qualité afin de présenter le site web dans le meilleur habillage et
fonctionnalités. En plus ces photos doivent refléter l’idée générale du site web. Pour cela nous avons
utilisé des images significatives qui traduisent le sujet de notre travail ainsi que la cible visée.

4.1.4. Polices

Nous utilisons une police souple et régulière : Tahoma de taille 10 et 12 qui est très souvent utilisée
pour les sites web vu la bonne qualité d’affichage.

3. Conception de la maquette

Le « wireframing » ou maquettage de sites web est l'étape consistant à représenter schématiquement

l'organisation d'un site web

.3.1. Page d’accueil

La figure 4.18 nous montre l’organisation de la page d’accueil de notre site web :
Figure 4.18: Maquette de la page d’accueil

4.3.2. Page privée (gestionnaire de la commune, citoyen, entreprise)

Figure 4.19: Maquette de la page privé

Conclusion

Tout au long de ce chapitre, nous avons prévu une conception de notre application web à
travers ses différents modules afin d’avoir le passage souple et facile à l’étape suivante, étape
d’implémentation.

Le chapitre suivant présentera l’environnement de travail à savoir les outils et les méthodes
utilisés lors du développement.

CHAPITRE 4 : REALISATION

Introduction
Pour mener à bien notre projet, il est nécessaire de choisir les outils et technologies adéquats qui
permettent de simplifier le développement. Dans ce chapitre, on présentera l’environnement
matériel et logiciel et à la fin l’état de réalisation.

4.1 Environnement de travail

Dans ce qui suit, les différents outils matériels et logiciels utilisés pour la réalisation de notre
solution.

4.1.1 Environnement matériel

Pour le développement de notre solution, on a utilisé un ordinateur portable de la marque Lenovo
ayant les caractéristiques suivantes :

 Processeur : Intel core i7,

 RAM : 12 GO,
  Disque dur : 2 TO,
 Disque SSD : 250 GO,
 Type du système : 64 bits,
 Système : Windows 10,
 Fréquence : 2,8ghz.
 Carte graphique : GTX.
 Nous avons choisi ce matériel car les exigences des logiciels utilisés sont assez élevées.

Nous avons choisi ce matériel car les exigences des logiciels utilisés sont assez élevées.

4.1.2 Environnement logiciel

Les différents logiciels et technologies utilisés pour le développement de notre solution sont :

1.1 Wordpress:

WordPress est un système de gestion de contenu gratuit (SGC ou content management system (CMS) en
anglais) et open-source. Ce logiciel libre écrit en PHP repose sur une base de données MySQL et est
distribué par l'entreprise américaine Automattic.

1.2 Entreprise architect:

 Enterprise Architect est un logiciel de modélisation et de conception UML. Couvrant, par ses
fonctionnalités d'applicationdepuis la gestion des exigences, en passant par les phases de
conception, la construction,tests et maintenance. Il permet le développement d'applications selon
le schéma d'Architecture orientée modèle, ainsi que le schéma d'Architecture orientée services.

1.3 Xampp :

XAMPP est un ensemble de logiciels permettant de mettre en place facilement un serveur Web local, un
serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de logiciels libres (X
(cross) Apache MariaDB Perl PHP) offrant une bonne souplesse d'utilisation, réputée pour son
installation simple et rapide

1.4 HTML :
L’HypertextMarkupLanguage, généralement abrégé HTML, est le format de données conçu pour
représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son
nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des
pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des
programmes informatiques. Il est souvent utilisé conjointement avec des langages de programmation
(PHP, JavaScript…) et des formats de présentation (feuilles de style en cascade).

1.5 CSS :

l'anglais: Cascading Style Sheets, forment un Les feuilles de style en cascade, généralement appelées
CSS de langage informatique qui décrit la présentation des documents HTML et XML Les standards
définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des
années 1990, CSS Devient couramment utilisé dans la conception des sites web et bien pris en
charge par les navigateurs web dans les années 2000.
1.6 PHP

PHP: Hypertext Preprocessor, plus connu sous son sigle PHP(acronyme récursif), est un langage de
programmation 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. PHP a permis de créer un grand nombre de sites web célèbres,
comme Facebook, Wikipédia, etc. Il est considéré comme la base de la création des sites Internet dits
dynamiques

1. 7 MYSQL

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est distribué sous une
double licence GPL et propriétaire Il fait partie des logiciels de gestion de base de données les plus
utilisés au monde, autant par le grand public (applications web principalement) que par des
professionnels, en concurrence avec Oracle, Informix et Microsoft SQL Server.
 1. 8 JavaScript

JavaScript est un langage de script orienté objet principalement utilisé dans les pages HTML. À l’opposé
des langages serveur (qui s’exécutent sur le site), JavaScript est exécuté sur l’ordinateur de l’internaute
par le navigateur lui-- même. Ainsi, ce langage permet une interaction avec l’utilisateur en fonction de
ses actions (lors du passage de la souris au dessus d’un élément, du redimensionnement de la page…)

1. 9 JQuery

JQuery est une bibliothèque JavaScript open-source et cross-browser qui permet de traverser et
manipuler très facilement l’arbre DOM de vous pages JQuery est une bibliothèque JavaScript open-
source et cross-browser qui permet de traverser et manipuler très facilement l’arbre DOM de vous
pages
Ooredoo

Ooredoo Host (host.ooredoo.tn) est une vitrine en ligne de « Cloud computing » qui

vous permet en quelques clics et en toute simplicité, d'acheter votre Nom de domaine,
votre Hébergement Web et votre Messagerie professionnelle.

. CHOIX DU CMS

Le choix d'un CMS adapté à notre projet doit prendre en compte les différents critères suivants :

- La complexité de l'installation et de la configuration.

- Les fonctions fournies par le CMS.

- Le nombre de module disponible pour le CMS.

- L’activité de sa communauté

1.2.2. Logiciel de développement web

- Choix du langage de développement web :

Pour sélectionner le langage de développement avec lequel on va développer notre site web
dynamique, on a essayé de comparer les différents outils de développement Web disponibles afin de
trouver celui qui répond à nos besoins. Le langage à choisir doit être open source et compatible avec
MySQL, Apache et Windows. En outre, ce langage doit pouvoir assurer ce qu'on a déjà prévu réalisable à
la conception. Pour toutes ces nécessités on a opté à choisir PHP pour développer notre site web
dynamique. En effet, PHP peut s'interfacer avec MySQL et Apache, et il est indépendant du système
d'exploitation. Relativement aux autres langages de développement, on trouve que la force de PHP
réside dans le fait que celui-ci supporte directement les requêtes SQL (Structured Query language) se qui
se traduit par langage de requêtes structurées. Enfin, on trouve que le principal intérêt de PHP est que
celui-ci permet de créer facilement des pages dynamiques résultats de calculs ou de requêtes SQL
effectuées sur une base de données. De plus, l'exécution de ces pages se fait sur le serveur, ce qui
empêche l'affichage du code source aux clients et interdie l'accès aux fichiers comportant des données
sécurisées, d'ailleurs c'est le cas du login et mot de passe de l'administrateur de notre site web
dynamique qui vont être stockés dans un fichier. Comme tout autre langage de développement, PHP
présente quelques limites qui empêchent la réalisation de certaines fonctions. En effet, bien que
l'exécution de ce langage sur le serveur soit considérée comme un avantage mais cela n'autorise pas les
traitements sur le poste client. Pour cela, et afin de négliger les limites de PHP, on a décidé d'utiliser
javascript en parallèle qui s'occupera des évènements effectués sur le poste client et qui sera
complémentaire à PHP.

- Choix du logiciel de développement PHP

Notre choix est basé sur xampp de fait que ce dernier permet d'installer tout le nécessaire pour
commencer à programmer en PHP avec Apache et MySQL. Il simplifie toute 49 l'installation grâce à un
setup automatisé et évite toute la configuration du serveur. La version 5 est composée de : - Apache 2. -
PHP 5. - MySQL 5.

- Phpmyadmin. Xampp installe et configure automatiquement un environnement de travail complet

permettant de mettre en œuvre toute la puissance et la souplesse qu’offrent le langage dynamique PHP
et son support efficace des bases de données. Xampp regroupe un serveur Apache, une base de
données MySQL, le langage PHP ainsi que des outils facilitant le développement de nos sites ou de nos
applications

.2.3. Système de gestion de base de données

Un serveur de bases de données est un logiciel permettant de gérer plusieurs bases de données
réparties sur une ou plusieurs machines. On appelle cela un SGBD (Système de Gestion de Bases de
Données). Un serveur de base de données est en général couplé à une application cliente qui permettra
de l'interroger. Il s'agit la plupart du temps, soit d'une application d'administration qui donne accès à
toute la base, soit d'une application d'utilisation qui permet d'utiliser la base sans avoir besoin de saisir
de requête. Parmi les principaux serveurs de bases de données, on compte DB2, Oracle, PostgreSQL,
MySQL, SQL Server, SQLite, etc. Dans notre cas, nous avons choisi le serveur base de données MySQL
version 5 puisqu'il existe déjà avec xampp.

. Chronogramme de réalisation

La clé principale de la réussite d’un projet est un bon planning. En effet, le planning aide à bien
subdiviser le travail et séparer les taches à réaliser, il offre une meilleure estimation et gestion de temps
nécessaire pour chaque tache. De plus, il donne assez de visibilité permettant d’estimer
approximativement la date d’achèvement de chaque tâche. Le planning suivant présente la répartition
des différentes tâches le long de la période de développement de notre projet

Tableau 5.2: Chronogramme de realization

4.5 Présentation des interface

Dans cette partie nous présentons quelques interfaces de notre site web

4.5.1 Interfaces admin

Cette page représente la page login de d’administrateur il lui suffit juste entrer ses identifiants
A fin de se connecter autant qu’administrateur il faut entrer un lien particulier pour que la Page
d’authentification peut s’afficher, raison de sécurité

Figure 30:Authentification D'administrateur

C’est une fenêtre permettant l’authentification de l’administrateur

CHAPITRE 5. RÉFÉRENCEMENT D'UN SITE WEB

Introduction
Le référencement consiste à inscrire et faire apparaître votre site dans les annuaires et moteurs de
recherche Internet. L'objectif est de permettre à un internaute qui ne connait pas votre existence de
trouver votre site en tappant un ou plusieurs mots clés décrivant le sujet qu'il recherche

Objectifs du référencement :

Le but premier du référencement est de générer du trafic ciblé sur un site afin d'augmenter sa visibilité
auprès des internautes. Il s'agit alors d'indexer le mieux possible toutes les pages du site dans les outils
de recherche généralistes et spécialisés. Le référencement d'un site sur Internet sert à le populariser, à
le faire connaître vers le plus grand nombre d'internautes naviguant souvent par l'intermédiaire d'outils
de recherche. La plupart des internautes ne connaissent donc pas l'adresse du site que l'on veut
référencer. C'est pour cette raison qu'il faut stipuler vers le plus grand nombre d'outils de recherche
l'existence du site afin de toucher un public plus large.

Tout l’enjeu du référencement consiste à :

- Etre présent dans les bases de données des moteurs de recherche (Google, Voila, Altavista…) et des
annuaires (Yahoo, Wanadoo, AOL…), pour que l'on puisse y trouver rapidement le site, plus facilement
et en meilleure position des concurrents.

- Plus de visibilité sur la toile du net pour plus de chance d'être visité par un internaute est un dilemme
pour toute entreprise ayant un site web. En effet, sans un effort de référencement, le site ne sera jamais
positionné parmi les premiers résultats des moteurs de recherche et sera invisible pour les internautes
qui sont à la recherche des produits ou services.

- Générer plus de trafic ciblé grâce à l'élaboration d'un nombre d'actions stratégiques :

 Analyse de visibilité sur les moteurs de recherche.

 Analyse d'Audience et du trafic généré par le référencement.

 Analyse des actions générées et du retour sur investissement.

 Proposition d'actions afin d'améliorer l’audience du site et d'atteindre les objectifs escomptés en
matière de référencement.

Avantages et apports :

Avantages et apports : Le référencement représente, selon les sites, entre 20% et 40% du trafic global
d’un site Internet. Le trafic généré à travers les résultats naturels des moteurs est gratuit. Il permet de
toucher directement les internautes lors d’une recherche d’information sur Internet, et donc des
personnes qui ne seraient pas venues directement sur le site d'une entreprise ou d'une institution.

Le référencement naturel est un outil de recrutement de prospects qualifiés, qui fonctionne 7 jours sur 7
et 24h sur 24h, tout au long du cycle de vie d'un site Internet.
Le privilège principal du référencement est

de générer du trafic ciblé sur un site afin d'augmenter sa visibilité auprès des internautes.

En effet, il permet aux internautes d'accéder à un site sans connaître son adresse.

Référencer son site c'est :

 Donner de la visibilité à l’entreprise et promouvoir au mieux son site grâce au meilleur

référencement possible.

 Augmenter le nombre des prospects et trouver de nouveaux clients.

 Augmenter l’audience et fidéliser la clientèle.

 Augmenter le chiffre d’affaire de l’entreprise.

 Faire de l’entreprise un prestataire incontournable sur Internet.

Les types

a) Référencement automatique

Le référencement automatique consiste à inscrire un site automatiquement auprès des différents outils
de recherche. Ce référencement automatique passe par l’utilisation de logiciel. Les entreprises
procèdent au référencement automatique (en achetant un logiciel) ou alors confient ce référencement
automatique à une entreprise (le principe reste le même).

b) Le référencement manuel :
Le référencement manuel consiste à soumettre manuellement son site web aux différents outils
de recherche. Cela implique de chercher dans un premier temps les différents outils de
recherche puis de soumettre à chacun d’entre eux son site web.

C Le référencement semi-automatique
est au carrefour du référencement automatique et du référencement manuel. Le
référencement semi-automatique concerne plus particulièrement les annuaires de recherche. La
plupart des sites qui proposent le référencement semi-automatique offrent ces différents
services à savoir :
 Le classement pertinent de nombreux annuaires de recherche par thèmes.
 Des formulaires de soumissions pré-remplis.
f) Référencement Payant
 Le référencement payant apparu dès 1998 s’est largement développé dès 2001 avec l’explosion
des sites web et la découverte des enjeux cruciaux que revêtaient les différents outils de
recherche.

e) Référencement gratuit:

Le référencement gratuit consiste à référencer son site gratuitement auprès de différents outils de
recherche. Ce référencement est généralement proposé par des sociétés qui souhaitent vous faire
découvrir leurs offres. Ainsi, le référencement gratuit est plus volontiers tourné vers des outils de
recherche réputés, à savoir les principaux moteurs de recherche (Exalead, Google, MSN Live, etc.) ainsi
qu’auprès de certains annuaires (Yahoo, etc.). Le référencement gratuit est par conséquent limité.

c) Référencement « Optimiseur de moteur de recherche » (SEO) :

SEO est l'abréviation de "Search Engine Optimizer" qui signifie « Optimiseur de moteur de
recherche ». Le rôle des SEO est donc d’optimiser le positionnement dans les différents outils de
recherche. Grâce à ce référencement le site ne se contentera pas de se placer dans les outils de
recherche, mais il se placera parmi les premiers résultats autant que faire se peut.

Le référencement SEO se compose de plusieurs étapes :

 Tout d’abord l’optimisation du site web : En effet, les moteurs de recherche ne se contentent
pas d’indexer l’adresse url que l’entreprise leur a soumis, mais ils parcourent réellement le site
web à la recherche de tous les mots clés présents dans les différentes pages. Ainsi, c’est vers
une optimisation du contenu du site web que le SEO commence. Cela nécessite d’ajouter un
maximum de mots-clés, supprimer ou modifie les phrases « vides », réfléchir à une cohérence
globale du site web et surtout aider les outils de recherche à indexer l’intégralité des pages dans
un ordre simple et cohérent afin que rien ne soit oublier. Le SEO constitue donc un réel guide
pour les robots qui indexent un site.
 Ensuite, il consiste à augmenter le pagerank, à savoir l’indice de popularité. En effet, un site
web se classe dans un outil de recherche non seulement à partir des mots clés présents dans le
site, aussi optimisé soit-il, mais aussi grâce à son indice de confiance qui se base en partie sur sa
popularité. D’où tout l’intérêt de ne pas tricher avec des mots-clés non pertinents. Pour
augmenter son indice de confiance, plusieurs méthodes peuvent être mises en place : échanges
de liens dit « en dur », augmenter le nombre de backlinks, optimiser le netlinking (échange de
liens entre sites web), etc...

Le référencement SEO ne consiste nullement au trucage d’un site web à savoir tricher en
employant un ensemble de mots-clés qui ne soient pas en adéquation avec son site. Non, il
s’agit d’un référencement tout à fait « éthique », qui se contente juste d’optimiser un site en
fonction de ce qu’il est vraiment.

Le référencement SEO est donc un référencement complet puisqu’il se situe à 2 niveaux : en

amont au niveau du site en l’optimisant, et en aval auprès des outils de recherche en le rendant
le plus populaire possible

2) Les outils
Il existe quelques techniques de conception de site permettant de donner plus d'efficacité au
référencement des pages d'un site :

.1.1. Moteurs de recherche et annuaires

Les moteurs de recherche tels que Google ou Altavisa :

Pour référencer un site sur un moteur de recherche, il suffit de repérer le lien Ajouter une URL ou Add
an URL puis de saisir votre URL. Le moteur ajoute ainsi votre URL dans sa base de données et une fois
disponible il parcourt tout le site en partant de la première page et en le parcourant de lien en lien.

4.2.1. Les balise méta / Meta tags

Les balises méta s'insèrent entre les balise de votre page HTML.

TITLE

Exemple :

META NAME="description"

Exemple : (c) Africa Computing

f) Liens hypertexts
g) Attributs ALT des images