Pfe Oumaima Zayene

MINISTERE DE L’ENSEIGNEMENT
SUPERIEUR ET DE LA RECHERCHE
SCIENTIFIQUE UNIVERSITE DE
SOUSSE
‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬
INSTITUT SUPERIEUR D’INFORMATIQUE
ET DES TECHNOLOGIES DE COMMUNICATION – HAMMEM SOUSSE

Département Réseaux Informatiques
MEMOIRE DE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme de Licence Appliquée
Département
Technologies Réseaux Informatiques
des Réseaux Informatiques
Conception et réalisation d'un système

de suivi et de surveillance du
positionnement d’un site Web par
rapport aux mots-clés
Réalisé par :
Oumaima Zayene
Encadré(e)(s) par :
Mr. Heithem Saoudi
Mr. Aymen Ismail
Société d’accueil:
Année Universitaire 2020 – 2021

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR
ET DE LA RECHERCHE SCIENTIFIQUE
UNIVERSITE DE SOUSSE
‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬
INSTITUT SUPERIEUR D’INFORMATIQUE
MEMOIRE DE FIN D’ETUDES
Présenté en vue de l’obtention du diplôme de Licence Appliquée
Technologies des Réseaux Informatiques
Réalisé par :
Oumaima Zayene
Encadrant :………………………….…Date :………………………Signature :………….
Superviseur :…………………………..Date :………………………Signature :…………….
Année Universitaire 2020 – 2021

Résumé
Dans le cadre de l’obtention de diplôme de licence appliqué en réseaux informatique,

le présent travail est développé au sein de la société Virus Santé Communication .Ce
projet consiste à développer un système de suivi et de surveillance de positionnement
d’un site web par rapports a une liste des mots-clés données , informe l’agence de
marketing en cas de baisse de position et cette application capable de gérer une liste
des concurrents par rapport à la même liste des mots-clés et de présenter des rapports
quotidiens et mensuels sous formes des chartes graphique et statistiques.
Mots clés : SEO, PHP , Laravel, Golang, Vuejs …
Abstract
Within the context of obtaining the applied license in computer networks, this work
was developed within the virus santé communication company in collaboration with
the haute institute of informatics and communication technologies. This Project
consists of developing a system to track and monitor the positioning of a website by
reporting a list of certain keywords, informing the marketing agency in the event of a
drop in position and this application is able to manage a list of competitors against the
same list of keywords and provide daily and monthly reports in the form of graphics
and statistics.
Keywords: SEO, PHP, Laravel, Golang, Vuejs….

Dédicaces
En témoignage de ma gratitude et fidélité, je dédie ce modeste travail à ceux qui, quels

que soient les termes embrassés, je n’arriverai jamais à leur exprimer mon amour
sincère.
À mes chers parents « Mohamed » et « Saliha »
Aucune dédicace ne peut exprimer l’amour, l’estime et le respect que j’ai toujours eu
pour vous. Vous m’avez donné la vie et vous étiez toujours là pour me motiver et
m’encourager à devenir ce que je suis aujourd’hui.
Veuillez trouver dans ce modeste travail la conclusion de vos efforts, mon amour et ma
gratitude. Puisse ce jour vous apporter toute la joie et la fierté que vous avez tant
attendues. Puisse dieu vous accorder la bonne santé et vous garde comme toujours à mes
côtés.
À mes chers sœurs « Soulayma » et « Mariem »
Je ne peux exprimer à travers ces lignes tous mes sentiments d’amour envers vous.
Que l’amour et la fraternité nous unissent à jamais.
Aux familles : « Zayene » et « chaouch »
Que ce travail soit pour vous un modeste témoignage de mon profond respect et
amour.
À mes amis de toujours
Qui m’ont soutenu durant toutes ces années d’étude et avec qui j’ai partagé des
moments inoubliables de ma vie.
Remerciements
Tout d’abord je tiens à remercier Dieu, le tout puissant et miséricordieux, qui m’a
donné le courage, la force et la patience d’accomplir ce modeste travail.
En premier lieu je remercie toute l’équipe pédagogique de l’institut supérieur de
l’informatique et des technologies de la communication.
En second lieu, Je tiens à remercier, très sincèrement, Mr. Haythem Saoudi mon
encadrant académique, j’ai eu l’honneur et la chance de bénéficier de ses
connaissances et compétences, de ses précieux conseils et de don suivi tout au long de
notre parcours académique. Son sens élevé du devoir, le fait d’être toujours montré à
l’écoute ainsi que sa rigueur scientifique impose l’estime et le respect. Je vous
remercie infiniment.
En troisième lieu je tiens à remercier Mr. Aymen Ismail de m’avoir accueilli au
sein de sa société et qui m’a prêté de l’aide pour réaliser ce projet par ses idées, ses
conseils précieux, ses explications pertinentes et ses critiques constructives.
J’offre tout particulièrement de sincères remerciements à mon encadrant Mr. Achref

Taleb pour la confiance qu’il m’a témoignée. En effet, le soutien moral et matériel
qu’il a manifesté à mon égard m’ont permis d’accumuler des expériences
professionnelles et personnelles marquantes .
En dernier lieu, Je suis très reconnaissante de l’accueil qui m’a été réservé par toute
l’équipe de Virus Santé Communication Mr. MED Amine khelil, Mr. Wassim
Assidi, Mme. Asma Nouira et Mme. Nour Belkahla.
Je tiens, aussi à remercier les membres du jury. J’espère, que ce rapport pourra être à
la hauteur de vos attentes.

Table des Matières
Liste des figures………………………………………….…………………………………8
Liste des Tableaux……..………………………………………………………………….10
Liste des abréviations…………………….……………………………………………….11
Introduction générale……………….…………………………………………………….12
CHAPITRE 1 : ÉTUDE PREALABLE………..………………………………………...……..14
Introduction :………………...……………………………………………………..………………..15
1.1 Présentation de l’entreprise virus………………………………………………15
1.2 Le cadre de projet…………………………………………………..………….17
1.3 Problématique………………………………………………………………….18
1.4 Etude et critique de l’existant……….…………………………………………18
1.5 Solution proposée :…………………………………………………………….20
1.6 Méthodologie de travail………………………………………………………..21
1.7 planification :………………………………………………………………….22
Conclusion :………………………….…………………………………………………….23
CHAPITRE2 : ANALYSE ET SPECIFICATION DES BESOINS...………………………………24
Introduction :………………………….……………………………………………..………………25
2.1 Spécification des besoins………………………………………………………25
2.2 Diagrammes des cas d’utilisation :……………………………………………28
1. Langage de modélisation (UML) :……………………………………………….28
2. Le Modèle des cas d’utilisation……………………………………………….….28
3. Diagrammes des cas d’utilisation global …………………………………………29
4. Raffinement des cas d’utilisation :…………………………...……..……………..31

Conclusion…………………………………………………………...……………………………….37
CHAPITRE 3: CONCEPTION……………………………………………………………….38
Introduction :………………………………………………………………………………………..39
3.1 Méthode de modélisatio……………………………………………………….39
3.2 Diagrammes de séquence…………………………...………………………….41
3.3 Diagramme de classe………………………………………………………….47
3.4 Le modèle logique des données :………………………………...…………..49
Conclusion…………………………………………………...……………………………………….52
CHAPITRE 4 : REALISATION………………………………………………………………53
Introduction………………………………………………………………………………………….54
4.1 Environnement de travail……………………………..………………………..54
1. Environnement matériel :…………………………..…………………………..54
2. Environnement logiciel :……………………………………………………….54
3. Framework et Langages de programmation :………………………………….56
4. Système de gestion de la base de données relationnel :……………………..…57
4.2 Présentation de l’application…………………………………………………...59
1. Composition de page :…………………………………………………...……….59
2. Les interfaces graphiques:……………………………………………….…….60
Conclusion………………………………………………………...………………………………….71
Conclusion Générale……………………………………………………………………...72
Webographies……………………………………………………………………………..73
ANNEXES………………………………………...…………………..…………………….75
Liste des figures
Figure 1: Logo de l’entreprise……………………………………………………………………………………………….……..15

Figure 2: Organigramme de l’entreprise Virus…………………………………………………………………………….16
Figure 3: Logo de MONITORANK………………………………………………………………………………………………..19
Figure 4: Modèle en spirale………………………………………………………………………………………………………..22
Figure 5: Diagramme de cas d’utilisation générale…………………………………………….……………………….30
Figure 6: Diagramme de cas d’utilisation raffiné «s’authentifier »……………………………………………..31
Figure 7: Diagramme de cas d’utilisation raffiné « Gérer une liste des sites web »…………………….32
Figure 8: Diagramme de cas d’utilisation raffiné…………………………………………………………….…………..34
Figure 9: Diagramme de cas d’utilisation raffiné………………………………………………..……..………….…...36
Figure 10: Interactions entre les couches (MVC)………………………………………………..……..………….…..41
Figure 11: Diagramme de séquence : Authentification………………………………………..……..……………...42
Figure12 : Diagramme de séquence de créer un nouveau compte………………………..…………………..43
Figure13 : Diagramme de séquence « ajouter un site web »…………………………………..………………….45
Figure14 :Diagramme de séquence « ajouter une page web »……………………………….….……………….46
Figure 15: Diagramme de classe générale……………………………………………………………………………………48
Figure 16: logo de PhpStorm………………………………………………………………………….…………………………..55
Figure 17: logo Postman…………………………………………………………………………………………………………….55
Figure 18: logo draw.io……………………………….………………………………………………………………………………55
Figure 19: logo laravel eloquent ORM………………………………………………………………………………………..56
Figure 20: logo de Golang…………………………………………………………………………………..……………………….57
Figure 21: logo Xampp server……………………………………………………………………………………….……………..57
Figure 22: logo de phpmyadmin…………………………………………………………………………………..……………..58
Figure 23: logo de Base de données MySql……………………………………………………………..….……………….58
Figure 24: Composition de la page……………………………………………………………………………....……………..59
Figure 25: Interface d’authentification……………………………………………………………………..….……………..60
Figure 26: Interface de créer un nouveau compte………………………………………………………...…………….61
Figure 27: interface de mot de passe oublié……………………………………………………………………..…………61
Figure 28:interface d’accueil……………………………………………………………………..……….…….…………………62
Figure 29: liste des utilisateurs………………………………………………………………….…………….…………………..63
Figure 30: interface des permissions d’un utilisateur……………………………………………………..…………..63
Figure 31 : interface de liste des sites web…………………………………………………….….………………………..64
Figure 32 : interface d’un site web……………………………………………………………………..………….……………65
Figure 33: interface d’ajout une page…………………………………………………………………………..……………..66
Figure 34 : interface d’une page web………………………………………………………………………………………….67
Figure 35: interface de l’historique des positions d’une page web sur un mot clé…….…………………68
Figure 36: interface d’affectation un mot clé à une page de site web………………………………………....69
Figure 37 : liste des mots clés……………………………………………………………………………….……………………..69
Figure 38: interface d’un mot clé………………………………………………………………………..……………………….70
Figure 39: liste des positions……………………………………………………………………………….……….……………..71
Liste des Tableaux
Tableau 1: « Planification Temporelle »…………………………………………………………………………..…………22

Tableau 2: Description détaillée des acteurs………………………………………………………………………………29
Tableau 3: description textuelle de cas d’utilisation «s’authentifier»…………………………….……………31
Tableau 4: description textuelle de cas d’utilisation «Gérer la liste des sites web»…………………..…33
Tableau 5 : Description textuelle de diagramme de cas d’utilisation………………………………..………..36
Tableau 6: Gérer les ordres du propriétaire…………………………………………………………..…………………….37
Tableau 7: table user……………………………………………………………………………………………………………………49
Tableau8 : table site……………………………………………………………………………………………….…………………..49
Tableau 9:Table user_sites……………………………………………………………………………..…………………………..50
Tableau10 : table Page……………………………………………………………………………………………..…………………50
Tableau11 : Table Keyword…………………………………………………………………………….……………………………51
Tableau 12: Table keyword_Pages………………………………………………………………………………….……………51
Tableau13 : table Rank……………………………………………………………………………………………………..…………52
Tableau14 : Table competitors………………………………………………………………………….………………………..52
Liste des abréviations
SEO : Optimisation des moteurs de recherche
UML : Le Langage de Modélisation Unifié
API : interface de programmation d'application
MVC : Modèle-Vue-Contrôleur
POO : Programmation orienté objet
HTML : L'HyperText Markup Language
CSS : Cascading Style Sheets (Les feuilles de style en cascade)
PMA: PhpMyAdmin
SGBD : système de gestion de base de données
FTP: File Transfert Protocol
XAMPP: Cross-Platform Apache Maria DB PHP Perl.
MYSQL: My Structured Query Langage
Http : HyperText Transfer Protocol

Mémoire SFE Licence Appliquée en Réseaux informatique 12
Introduction générale
En quelques dizaines d’années, le web est passé du stade de réseau marginal utilisé par
quelques chercheurs à celui de moyen de communication incontournable. Son
audience est désormais supérieure à celle de la plupart des médias classiques.
L’augmentation incessante du nombre d’internautes va de pair avec celle du contenu

disponible sur la toile. Dans cette jungle d’informations, il est devenu beaucoup plus
difficile d’assurer à un site web une bonne visibilité.
Apporter de la plus-value sur Internet via du contenu de qualité est donc primordial
pour vous faire connaître de vos prospects et faire grandir votre image de marque.
Le référencement naturel (SEO) est donc une étape importante à considérer lorsque
vous souhaitez promouvoir votre activité sur Internet.
Pour réussir un référencement naturel, il faut trouver des mots-clés pertinents et

accessibles autour desquels on doit et créer un contenu de qualité.
Le référencement ou SEO, est une stratégie qui vise à bien classer un site dans les
résultats des moteurs de recherche dans le but d’améliorer votre référencement, il est
essentiel de suivre la position de votre site web sur les pages de résultats des moteurs
de recherche (exemple : Google).
En effet, le SEO est une course permanente aux meilleures positions dans les résultats
de recherche. Ces positions, n’étant pas immuables, vous devrez assurer un suivi de
positionnement Google pour voir si des optimisations sont nécessaires.
Dans ce contexte, on se propose de créer un système de suivi de positionnement des

sites web des clients dans les pages de résultat des moteurs de recherche qui a pour
rôle de simplifier le tâches de service référencement SEO.
C’est dans ce cadre que se situe mon projet de fin d’étude intitulé « Conception et
réalisation d'un système de suivi et de surveillance du positionnement d’un site Web
(SEO) par rapport aux mots-clés » dont l’objectif est de concevoir une plateforme
appelé « SCOOPrank ».
En conséquence ce rapport s’articule autour de quatre chapitres comme suit :
Le premier chapitre « Etude préalable » consistant à présenter l’organisme

d’accueil et à placer le projet dans son cadre général en exposant la problématique
ainsi qu’une brève description du projet.
Le second chapitre « Analyse et spécification des besoins» se focalise sur la

détermination des besoins fonctionnels et non fonctionnels ainsi que sur la présentation
des diagrammes de cas d’utilisation.
Le troisième chapitre « Conception » illustre la partie conception de notre

application de point de vue statique et dynamique et expose les différentes tables
formant notre base des données.
Le dernier chapitre « Réalisation » détaille tous les outils utilisés pour le

développement de notre application ainsi que quelques captures d’écran de la version
finale de notre plateforme avec un aperçu sur la mise en production.
Chapitre 1 :
Étude
préalable
Introduction :
Dans ce premier chapitre, le projet sera d’abord mis dans son contexte général en
commençant par la présentation de la société accueillante « Virus Santé
Communication ». Ensuite, on présentera la description du sujet à traiter ainsi que
l’explication de la problématique qui a donné lieu au sujet. Puis des solutions
existantes dans le marché international seront critiquées en proposant la solution
envisagée. Enfin la méthodologie employée pour satisfaire les besoins des utilisateurs
sera mentionnée.
1.1 Présentation de l’entreprise virus

1. Description de l’entreprise
Virus santé communication est une société canadienne fondé en juin 2014
Figure 1: Logo de l’entreprise
Dans le but de faire avancer le marketing de la santé, l’entreprise marque sa présence

avec une équipe qualifiée de professionnelles pour un objectif commun : faire avancer
le marketing de la santé au Québec. Cette société s’adresse aux différents acteurs dans
le domaine noble de la santé (les chirurgiens, les chercheurs, les dentistes, les
chiropraticiens, les psychologues, les pédiatres, les sexologues) aux propriétaires de
restaurants d’aliments biologiques, aux nutritionnistes, aux organismes de la santé et
aux ordres professionnels .L’expertise marketing de cette société est bien ciblée et doit
répondre aux besoins spécifiques de ce secteur : il se manifeste dans l’optimisation des
moteurs de recherche, la conception des sites internet traditionnels et mobiles, les
médias sociaux, le graphisme, la stratégie de marketing, l’image de marque, les
compagnes publicitaires, etc.
2. L’organigramme de Virus santé communication
Figure 2: Organigramme de l’entreprise Virus
« Source : La direction de l’entreprise »
L’organigramme de l’agence comme montre la figure n°2 se compose de :
Le gérant : Monsieur Jeff Porteau, qui assure la gestion de toute l’agence. Il est,
aussi, le stratège marketing : Il donne les grandes lignes directives au reste de l’équipe
et assure leur mise en œuvre. Il est de même le premier responsable de la gestion des
relations clients.
L’analyste : Monsieur Aymen Ismail, qui assure le suivi des performances des sites
web des clients. Il est responsable de la rédaction des rapports ainsi que de la
présentation des résultats aux clients. Il est tout de même en tête de l’équipe
tunisienne.
L’équipe développement : Composée d’un chef d’équipe et 3 développeurs web qui

sont chargés de la création des sites web, leur maintenance ainsi que toute intervention
technique requise.
3. Fiche de renseignements généraux

 Nom de l’entreprise : Virus Santé Communication
 Siege sociale : Téboulba, Monastir, Tunisie : 2411 Davidson Montréal H2W

2Y9,Canada
 Tel : -514-466-4747
 Email : virus-info@viruscomm.ca
 Site Web: https://virussantecommunication.ca/
4. Les services de l’entreprise

Au sein de la société Virus Santé Communication, il y a plusieurs services. Parmi
lesquels on cite essentiellement :
 Référencement web (SEO)
 Digital Marketing
 Optimisation des solutions web
 Stratégie de marque
 Conception d’image de marque
 Conception /Maintenance des solutions informatiques
1.2 Le cadre de projet
Dans le cadre de l’obtention du diplôme licence appliqué en réseaux informatique,

un projet de fin d’étude au sein de la société Virus Santé Communication a été
effectué.
Ce projet vise à compléter la formation des études universitaires, à l’Institut

Supérieur D’Informatique et des techniques de communication et à introduire les
étudiants à la vie professionnelle à l’aide d’une mise en pratique des connaissances
acquises durant les dernières années d’étude vécues dans cet établissement.
Notre travail consiste à : Concevoir et développer une solution pour suivre le

positionnement des sites web dans les moteurs de recherche particulièrement Google
par rapport à une liste des mots-clés données.
1.3 Problématique
Garder le site d’un client parmi les premières positions naturelles des moteurs de
recherche ce n’est pas évident, car les normes définissent des façons de faire pour
maximiser les performances, mais les analystes SEO sont souvent laissés à eux-mêmes
pour améliorer la visibilité d’un site.
Ils font face à plusieurs problèmes :
- Perte du temps pour tester les positions des sites web manuellement
- Tous les outils existes de suivi des positions sont payants
- lors d'une baisse de position il n'y a pas un outil qui donne l'information d'une
maniéré automatique.
1.4 Etude et critique de l’existant
Cette étude est une phase primordiale dans la réalisation d’un projet informatique :
Il est important d’analyser les fonctionnalités existantes et similaires à celle du projet.

Grâce à une étude approfondie de l’existant, le domaine d’étude a été beaucoup mieux
compris et les insuffisances ont été bien détectées de façon à pouvoir choisir la
solution qui sera la base de notre application.
1. Les applications commerciales existantes
Figure 3: Logo de MONITORANK
MONITORANK est un outil SEO en ligne de suivi de positionnement géo localisé.
Il permet de suivre les positions des sites sur des requêtes déterminées (vos mots-
clés).Il permet, aussi, le suivi des sites concurrents en ajoutant leurs sites et les
requêtes stratégiques pour eux.
MONITORANK met à sa disposition de nombreuses fonctionnalités :
 Suivi du positionnement des mots-clés
 Accès à de nombreux moteurs de recherche
 Nature de votre positionnement
 Interface entièrement personnalisable
 Statistiques par thématiques
 Export de vos données
 Accès à l’API MONITORANK

2. Critique de l’existant :
L’étude de l’existant a permis de consulter l’application MONITORANK afin de
pouvoir dégager ses manques auxquels il faut remédier dans la solution qui sera
proposée. Des inconvénients et des défauts majeurs ont été remarqués tel que :
 Interface difficile à prendre en main
 C’est un outil payant (abonnement selon le nombre des requêtes)
 MONITORANK ne donne pas l’information en cas de baisse de

position, l’utilisateur va tester leurs positions à chaque fois.
1.5 Solution proposée :
La solution que nous proposons consiste principalement à concevoir et à développer

une application web pour le suivi de positionnement des pages du site Web dans les
moteurs de recherche par rapport à une liste des mots clés donnés: la réalisation d’une
application web Complète qui satisfait les besoins demandés avec une partie pour le
front end, une autre pour le Back-end et des services web qui ont comme
fonctionnalités:
 Authentification
 Interface entièrement personnalisable
 Gestion des sites web
 Gestion des Mots-Clés
 Gestion des pages d’un site web
 Suivi du positionnement des pages web
 Le suivi des positions est géo localisé
 Suivi du positionnement des sites web concurrents

 Tester les positions des pages des sites web chaque heure
 Présentation des rapports quotidiens ou mensuels sous forme de chartes

graphiques et statistiques.
 Envoi d’un email à l’agence marketing en cas de baisse de positionnement de

site.
1.6 Méthodologie de travail
Le développement de nouveaux logiciels pose un grand défi à toutes les parties

prenantes. Plus l'application à développer est complexe, plus il est difficile d'organiser
clairement le processus de développement et de le rendre gérable dans sa complexité.
C’est pour cela qu’on doit opter pour les solutions les plus optimales pour avoir recours
à une méthodologie efficace qui permet de gérer un cycle de vie d’un projet.
1. Méthode Spirale :
Après [1] avoir présenté pour la première fois en 1986 sa méthode pour développer des
applications complexes, l’ingénieur logiciel américain Barry W. Boehm fit paraître son
modèle dans la publication A Spiral Model of Software Development and
Enhancement en 1988 et dans un cadre également plus large. Dans cette publication, il
décrit le modèle en spirale comme une alternative possible au modèle en cascade établi
jusqu’alors et qui servait en même temps de base expérimentale. Le modèle en spirale
ne part pas du principe que les tâches du développement logiciel doivent être
organisées de manière linéaire, mais de manière itérative. Les phases ne se déroulent
pas de manière unique, étape par étape, mais en plusieurs fois, en suivant une spirale.
 Identifier les risques, leur affecter une priorité
 développer une série de prototypes pour identifier les risques en

commençant par le plus grand risque
 utiliser un modèle en V ou en cascade pour implémenter chaque cycle

 si un cycle concernant un risque a été achevé avec succès,
− évaluer le résultat du cycle et planifier le cycle suivant
− si un risque n'a pu être résolu, terminer le projet immédiatement
Figure 4: Modèle en spirale
1.7 planification :
Février Mars Avril Mai Juin

Semaine 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
Formation SEO
Formation
Laravel/Vue js
Etude préalable
Modélisation
conceptuelle
Réalisation
Validation &
test
Rédaction de
rapport
Tableau 1: « Planification Temporelle »

Conclusion :
Dans ce premier chapitre, la société "Virus Santé Communication" a été d’abord
présentée en mettant en relief ses domaines d’activités. Ensuite, nous avons essayé
d’expliquer le contexte du projet et de dévoiler l’objectif du travail demandé. Puis, une
étude critique des applications commerciales existantes a été faite et la perception
d’alternatives qui vont combler les insuffisances a été proposée. Enfin, la
méthodologie employée dans la réalisation du projet a été présentée.
Dans le chapitre suivant, nous allons nous intéresser aux analyse et spécifications des
besoins du projet afin de bien organiser le travail avant la mise en place de notre
application.
Chapitre 2 :
Analyse et
spécification des
besoins
Introduction :
Dans ce chapitre nous allons étudier les différents besoins fonctionnels et non
fonctionnels dans le but d’identifier les différents acteurs et présenter le diagramme de
cas d’utilisation de notre système.
2.1 Spécification des besoins
Dans cette section, nous nous intéressons à présenter une solution qui permet
d’atteindre l’objectif de notre système à travers une spécification claire des besoins à
satisfaire. Dans un premiers temps, nous présentons les besoins fonctionnels, puis nous
identifions les besoins non fonctionnels.
1. Les besoins fonctionnels :

Les besoins fonctionnels représentent les fonctionnalités que le système doit exécuter,
il ne devient opérationnel que s’il les satisfait. Cette application doit couvrir
principalement les besoins fonctionnels suivants :
 Gestion des Sites web:
- Ajouter un site web
- Consulter un site web
- Modifier un site web
- Supprimer un site web
 Gestion des pages d’un site web :
- Ajouter une page web
- Consulter une page web
- Modifier une page web

- Supprimer une page web
 Gestion des mots-clés :
- Ajouter un mot clé
- Modifier un mot clé
- Supprimer un mot clé
- Affecter un mot clé à une page web
 Gérer une liste des utilisateurs : (dédié au propriétaire et à l’administrateur)
- Ajouter un utilisateur
- Supprimer un utilisateur
- Modifier les données d’un utilisateur
- Consulter le profil d’un utilisateur
- Spécifier les tâches pour le staff de l’agence.
 générer une liste des sites concurrents par rapport à la même liste de mots-clés.
 Un système de messagerie pour informer l'agence en cas de baisse de

positionnement.
 Suivre les positions des pages web selon une liste des mots clés sur les pages
de résultat de Google.
 Gérer une interface pour les positions des pages web sur chaque mot clé
(l’historique des positions sous forme des chartes graphique et des tableaux).
2. Les besoins non fonctionnels :
Les besoins non fonctionnels ne sont pas directement liés au comportement du

système. Elles ont plutôt un aspect visible à l’utilisateur :
 Sécurité : Lorsqu’un utilisateur veut accéder à un système d'information il doit

effectuer une procédure d'identification et d'authentification.
 Intégrité : D’une manière générale, l'intégrité des données désigne l'état de

données qui, lors de leur traitement, de leur conservation ou de leur
transmission, ne subissent aucune altération ou destruction, volontaire ou
accidentelle, et conservent un format permettant leur utilisation.
 Autonomie du système : Le système s’exécute et fonctionne entièrement sans

avoir recours à d’autres applications ainsi va-t-on gagner du temps grâce à la
centralisation de l’information.
 Ergonomie : L'application doit offrir une interface conviviale et ergonomique.

Le système doit permettre à l'utilisateur de se familiariser rapidement avec le
contenu, et être compréhensible: Le logiciel doit permettre une bonne gestion
des projets. Ceci est facilité par les fonctionnalités intégrées au logiciel.
 Fiabilité : La fiabilité d'un logiciel, ou plus généralement d'un système,

désigne, selon l'UTE (Union technique de l'électricité), son aptitude à assurer sa
mission dans des conditions d'environnement données et pendant une durée
donnée. La fiabilité caractérise ainsi la confiance que l'utilisateur peut placer
dans le service rendu par un système.
 Performance : le temps de réponse des différentes fonctionnalités de

l’application doit être optimal pour que le système puisse réagir et répondre à
toute requête dans un court délai.
2.2 Diagrammes des cas d’utilisation :
1. Langage de modélisation (UML) :

Pour la conception de notre application [3] nous avons adopté une méthode orientée
objet. En effet cette dernière est une approche incontournable dans le cadre du
développement des applications.
Pour mieux présenter l’architecture de notre application, on va choisir le langage de

modélisation le plus adopté UML [3] : C'est un langage de modélisation, défini comme
une norme de modélisation objet qui sert à décrire et à documenter un système
d'information.
En utilisant ce langage, les objectifs de la modélisation objet suivant sont assurés :
 Formaliser la conception d’application.
 Faciliter la communication entre les différents intervenants au sein d’un projet

informatique.
 Coordonner les activités entre les différents intervenants.
 Gérer l’évolution d’un projet informatique.
 Proposer des outils standardisés prenant en compte de nombreux aspects de la

conception.
2. Le Modèle des cas d’utilisation

Les cas d’utilisation a pour objectif de décrire sous forme d’actions et de réactions le
comportement d’un système du point de vue d’un utilisateur.
1. Identification des acteurs :

Un acteur est une personne, un matériel ou un logiciel qui interagit avec le système
dans le but de réaliser une ou plusieurs fonctions concernant les cas d’utilisation. Les
acteurs en interaction avec notre système sont :
Staff Propriétaire L’administrateur
 Description détaillée des acteurs :

Rôle Définition Acteur
Le staff L’équipe de l’agence de marketing et qui Gèrent l’application selon les
utilisera l’application pour gérer le ordres de propriétaire (consulter les
service SEO. sites web, ajouté, modifié,
supprimé)
Le propriétaire C’est le propriétaire de l’agence et le Gérer l’application

responsable d’équipe (sites web ,pages web ,liste des
mots clés etc…)
Donner les permissions au staff
pour gérer les sites web dans
l’application
L’administrateur C'est le responsable de l'application. Il
lance le projet et vérifier les résultats pour Un administrateur a
maintenir toutes autorisations.
Tableau 2: Description détaillée des acteurs
3. Diagrammes des cas d’utilisation global :

Les diagrammes de cas d'utilisation [2] décrivent les fonctions générales et la portée
d'un système. Ces diagrammes identifient également les interactions entre le système
et ses acteurs. Les cas d'utilisation et les acteurs dans les diagrammes de cas
d'utilisation décrivent ce que le système fait et comment les acteurs l'utilisent, mais ne
montrent pas comment le système fonctionne en interne.
Figure 5: Diagramme de cas d’utilisation générale

4. Raffinement des cas d’utilisation :

1. Raffinement de cas d’utilisation « s’authentifier » :
Figure 6: Diagramme de cas d’utilisation raffiné «s’authentifier »
 Description textuelle de diagramme de cas d’utilisation « s’authentifier »
Cas d’utilisation S’authentifier

Acteur Administrateur, propriétaire/staff
Pré-condition L’utilisateur doit avoir un compte.
Post-condition Chaque acteur introduit son login et son mot de passe pour
accéder à son espace privé.
Scénario 1. L’utilisateur demande l’accès.
2. Un formulaire d’authentification s’affiche.
3. L’utilisateur saisit son login (son numéro de matricule)
et son mot de passe.
4. Une vérification de données saisies s’effectue.
5. Si l’utilisateur est reconnu, il sera redirigé vers son
espace souhaité.
• Si le login et le mot de passe sont incorrects :
-un message d’erreur s’affiche.
-le formulaire d’authentification s’affiche de
nouveau.
Tableau 3: description textuelle de cas d’utilisation «s’authentifier»

2. Raffinement de cas d’utilisation « Gérer une liste des sites web »
Figure 7: Diagramme de cas d’utilisation raffiné « Gérer une liste des sites web »
 Description textuelle de diagramme de cas d’utilisation « gérer une liste des sites
web»
Cas d’utilisation Gérer une liste des sites web

Acteur Administrateur, Propriétaire
Pré-condition Authentification
Post-condition Assurer la mise à jour de logiciel c’est-à-dire ajouter,
supprimer et modifier les données des sites web.
Scénario  Cas d’ajout :
pour l’ajout des nouveaux sites :
1. L’acteur clique sur le bouton Ajouter un site.
2. Une interface qui contient un formulaire d’ajout

sera affichée.
3. L’acteur remplit les champs avec les

informations nécessaires (nom de site, url de site
web) puis clique sur Ajouter.
4. Un message de succès d’ajout d’un nouvel site

web sera affiché.
5. La liste des sites web s’affiche de nouveau

avec le nouveau site ajouté.
 Cas de modification :
L’acteur peut effectuer la consultation des sites web
avec possibilité de modification.
1. Une liste de tous les sites web s’affiche
2. L’acteur choisit le site web dans lequel il

veut modifier les données.
3. L’acteur saisit les nouvelles données et

clique sur le bouton enregistrer.
4. Un message de succès de modification des

données sera affiché
5. La liste des sites web s’affiche de nouveau

avec les nouvelles modifications.
 Cas de suppression :
Pour la suppression d’un site :
1. La liste de tous les sites web s’affiche.
2. . L’acteur choisit le site qu’il souhaite

supprimer et clique sur le bouton
supprimer.
3. Un message de succès de suppression d’un

site web sera affiché.
4. La liste des sites web s’affiche de nouveau.
 Cas de consulter un site :

Pour la consultation d’un site web :
1. Clique sur le bouton voir.
2. L’interface de site web s’affiche avec la liste
des pages web de ce site.
3. Ont gèrent la liste des pages de ce site web
d’après cette interface.
Tableau 4: description textuelle de cas d’utilisation «Gérer la liste des sites web»
3. Raffinement de cas d’utilisation « Gérer une liste des pages web »
Figure 8: Diagramme de cas d’utilisation raffiné
«Gérer une liste des pages web »
 Description textuelle de diagramme de cas d’utilisation « gérer une liste des pages
web»
Cas d’utilisation Gérer une liste des pages web

Acteur Administrateur, Propriétaire
Pré-condition L’utilisateur doit être authentifié et
Post-condition Assurer la mise à jour de logiciel c’est-à-dire ajouter,
supprimer et modifier les données des pages des sites web
Scénario  Cas de consultation : l’acteur choisit la page qu’il veut
consulter pour voir ses détails depuis la liste des pages de
site web, cliquer sur le bouton Voir.
 Une interface qui contient les détails d’une page web
sera affichée.
 Depuis cette interface on peut consulter la liste des
mots-clés affecté à cette page.
 Affecter un mot-clé à cette page on cliquant sur le
bouton affecté un mot clés.
 Cliquer sur le bouton voir pour consulter la liste des
concurrents et l’historique des positons de cette page

avec un mot clés prédéfini.
 Cas d’ajout : pour l’ajout des nouveaux pages à un site
web :
1. L’acteur choisit le site auquel il souhaite ajouter la
page Web.
2. L’acteur clique sur le bouton Voir.
3. Puis il clique sur le bouton Ajouter une page web

4. Une interface qui contient un formulaire d’ajout
sera affichée.
5. L’acteur remplit les champs avec les informations

nécessaires (nom de page , url de page web) puis
clique sur Ajouter.
6. Un message de succès d’ajout d’une nouvelle page

web sera affiché.
La liste des pages de site web s’affiche de nouveau
avec la page web ajouté.
 Cas de Modification : : L’acteur peut effectuer la

consultation des pages web avec possibilité de
modification.
1. En consultant le site web une liste de tous les
pages de ce site s’affiche.
2. L’acteur choisit la page web dans laquelle il veut
modifier les données et clique sur le bouton
modifier.
3. Une interface qui contient un formulaire de
modification sera affichée.
4. L’acteur saisit les nouvelles données et clique sur
le bouton enregistrer.
5. Un message de succès de modification des
données.
La liste des pages web s’affiche de nouveau avec les
nouvelles modifications.
 Cas de suppression : Pour la suppression d’une page

web :
1. La liste de tous les pages web de site s’affiche.
2. L’acteur choisit la page qu’il souhaite supprimer
et clique sur le bouton supprimer.
3. Un message de succès de suppression d’un site web
sera affiché.
4. La liste des sites web s’affiche de nouveau.
 Cas d’affectation d’un mot clé :
1. La liste de toutes les pages de site web s’affiche.

2. L’acteur clique sur le bouton ajouter un mot clé.
3. Une interface qui contient la liste des pages web et

la liste de tous les mots clés s’affiche.
4. L’acteur choisit la page web sur laquelle il souhaite
définir un mot-clé.
5. Clique sur le bouton Enregistrer.
6. La liste des pages Web apparaît avec le nouveau
mot-clé et la position par défaut est zéro.
Tableau 5 : Description textuelle de diagramme de cas d’utilisation
« Gérer une liste des pages web d’un site »
4. Raffinement de cas d’utilisation « Gérer les ordres du

propriétaire »
Figure 9: Diagramme de cas d’utilisation raffiné
« Gérer l’application selon les ordres du propriétaire»

 Description textuelle de diagramme de cas d’utilisation « gérer l’application selon

les ordres de propriétaire »
Cas d’utilisation Gérer l’application selon les ordres du propriétaire

Acteur Staff
Pré-condition Authentification
Post-condition Cet utilisateur accédera aux fonctionnalités de
L’application selon les autorisations. Le personnel est un
simple utilisateur qui aura des fonctionnalités restreintes.
Scénario
L'équipe de l'agence gère l'application selon les ordres du
propriétaire, c'est lui qui choisit l'utilisateur, le site sur
lequel il veut le travailler et la permissions
 Ajout : le staff a la permission d’ajouter des
données dans le site web choisit par le
propriétaire.
 Modifier : le staff de l’agence a la permission
de modifier le contenu de site web.
 Consulter : le staff a seulement la permission

de consulter l’interface de site.
 Supprimer : le staff peut supprimer seulement

les sites web choisit par le propriétaire.
Tableau 6: Gérer les ordres du propriétaire
Conclusion
Dans ce chapitre nous avons analysé les besoins fonctionnels et non fonctionnels
pour les satisfaire lors du développement de notre application en indiquant les rôles
de chaque acteur ainsi la présentation des diagrammes des cas d’utilisation qui
indiquent les différentes interactions entre les utilisateurs et le système résultant.
Le chapitre suivant sera consacré pour la conception de notre solution afin de trouver
les solutions adéquates pour le travail demandé.
Chapitre 3 :
Conception
Introduction :
La conception est la phase la plus importante dans le cycle de développement d’un
projet. Elle permet de mettre en place un modèle sur lequel il faut s’appuyer pour
l’implémentation du système.
Elle consiste à identifier les objets du système. Ainsi nous allons élaborer le
diagramme de classe du système pour décrire sa vue statique. Puis, nous décrirons la
vue dynamique par les diagrammes de déploiement des séquences.
3.1 Méthode de modélisation
1. La Méthode Modèle-Vue-Contrôleur(MVC)
Le pattern modèle-vue-contrôleur [4] [(en abrégé MVC), est un modèle destiné à

répondre aux besoins des applications interactives en séparant les problématiques liées
aux différents composants au sein de leur architecture respective. Cette méthode
présente des avantages et des inconvénients :
Nous expliquerons ces trois parties l'une après l'autre :
 Le modèle (ou Model) :
Contient les données manipulées par le programme. Il assure la gestion de ces données
et garantit leur intégrité. Dans le cas typique d'une base de données, c'est le modèle qui
la contient.
Le modèle offre des méthodes pour mettre à jour ces données (insertion suppression,
changement de valeur). Il offre aussi des méthodes pour récupérer ses données. Dans
le cas de données importantes, le modèle peut autoriser plusieurs vues partielles des
données. Si par exemple le programme manipule une base de données pour les emplois
du temps, le modèle peut avoir des méthodes pour avoir, tous les cours d'une salle,
tous les cours d'une personne ou tous les cours d'une groupe de Td.
 La vue (ou View) :
La vue fait l'interface avec l'utilisateur. Sa première tâche est d'afficher les données
qu'elle a récupérées auprès du modèle. Sa seconde tâche est de recevoir tous les actions
de l'utilisateur (clic de souris, sélection d'une entrées, boutons, …). Ses différents
événements sont envoyés au contrôleur.
La vue peut aussi donner plusieurs vues, partielles ou non, des mêmes données. Par
exemple, l'application de conversion de bases a un entier comme unique donnée. Ce
même entier est affiché de multiples façons (en texte dans différentes bases, bit par bit
avec des boutons à cocher, avec des curseurs). La vue peut aussi offrir la possibilité à
l'utilisateur de changer de vue.
 Le contrôleur (ou Controler) :
Le contrôleur est chargé de la synchronisation du modèle et de la vue. Il reçoit tous les

événements de l'utilisateur et enclenche les actions à effectuer. Si une action nécessite
un changement des données, le contrôleur demande la modification des données au
modèle et ensuite avertit la vue que les données ont changé pour que celle-ci se mette à
jour. Certains événements de l'utilisateur ne concerne pas les données mais la vue.
Dans ce cas, le contrôleur demande à la vue de se modifier.
Dans le cas d'une base de données des emplois du temps. Une action de l'utilisateur
peut être l'entrée (saisie) d'un nouveau cours. Le contrôleur ajoute ce cours au modèle
et demande sa prise en compte par la vue. Une action de l'utilisateur peut aussi être de
sélectionner une nouvelle personne pour visualiser tous ses cours. Ceci me modifie pas
la base des cours mais nécessite simplement que la vue s'adapte et offre à l'utilisateur
une vision des cours de cette personne.
Figure 10: Interactions entre les couches (MVC)
3.2 Diagrammes de séquence
Les diagrammes de séquences sont la présentation graphique des interactions entre les
acteurs et le système selon un ordre chronologique dans la formulation UML. Dans la
suite, nous présentons quelques diagrammes de séquence de notre système.
1. Diagramme de séquence d’authentification

L’authentification est désormais nécessaire si l’utilisateur veut bénéficier de plus de
fonctionnalités telles que le suivi des tests. La figure 13 montre les étapes qui sont
concernées par cette opération d’authentification, sachant que pour cela il faut déjà
avoir créé un compte.
Figure 11: Diagramme de séquence : Authentification

Scénario de créer un compte : La figure 12 illustre le diagramme de séquence de

cas d’utilisation « créer un compte »
Figure12 : Diagramme de séquence de créer un nouveau compte

Pour créer un compte, la console vérifie d'abord si les données saisies par l'utilisateur
n'ont pas été enregistrées auparavant afin d'éviter la duplication. Ensuite, une fois la
vérification est terminée avec succès, les informations peuvent être enregistrées dans le
tableau de l'utilisateur.
2. Diagrammes de séquence « ajouter un site web »

Scénario d’ajout un site web
Pour ajouter un site web l’acteur tout d’abord s’authentifie par le saisi de login (son
email) et le mot de passe.
 Ensuite, l’acteur consulte la liste des sites web
 L’acteur clique sur le bouton ajouter un site web, une interface d’ajout s’affiche.
 L’acteur saisit les informations d’un site web (nom du site, url du site),Puis clique
sur le bouton enregistrer pour la validation.
 Les informations saisies sont envoyées à la base de données pour vérifier

l’existence de site.
 Si le site web existe déjà un message d’erreur s’affiche, si non le site sera
enregistré dans la base de données et un message de succès est afficher.
Figure13 : Diagramme de séquence « ajouter un site web »

3. Diagrammes de séquence « ajouter une page à un site web »
Figure14 :Diagramme de séquence « ajouter une page web »

Scénario d’ajout une page web
Pour ajouter une page web à un site tout d’abord l’acteur s’authentifier par le saisi de
login (son email) et mot de passe.
 L’acteur consulte la liste des sites web, choisi le site ou il veut ajouter la page
web.
 L’acteur clique sur le bouton voir pour ouvrir la liste des pages web de ce site,
puis clique sur le bouton ajouter une page web.
 L’acteur saisi les informations d’une page web (nom, url) puis clique sur le
bouton enregistrer pour valider les informations.
 Les informations saisies sont envoyées à la base de données pour vérifier si les
champs est bien rempli ou non.
 Si les champs sont remplis correctement un message de succès s’affiche « page

ajouté avec succès » si non un message d’erreur.
3.3 Diagramme de classe
Les diagrammes de classes expriment d’une maniérée générale la structure statique

d’un système en termes de classes et de relations entre ces classes. Une classe permet
de décrire un ensemble d’objets (attributs et comportements), tandis qu’une relation
permet de faire apparaitre des liens entre ces objets. La classe peut être vue comme la
factorisation des éléments communs à un ensemble d’objets.
En se basant sur ce qui précède, une solution conforme aux besoins exprimés et aux
objectifs déjà fixés se résume dans un diagramme composé des classes suivantes :
Figure 15: Diagramme de classe générale

3.4 Le modèle logique des données :
 Table user « Utilisateur » : (id, name, email, password, statut, role)
Propriété
Type
Attribut Désignation
id Chaque utilisateur a un Integer

identificateur unique.
Name Nom de l’utilisateur String
Email L’adresse email de String

l’utilisateur
Password Le mot de passe de String
l’utilisateur
Statut Le statut de l’utilisateur String
(actif, désactivé)
Rôle Le rôle de l’utilisateur Enum [admin,
owner, staff]
Tableau 7: table user
 Table Site: (id, name ,Url)
Propriété
Type
id Chaque Site web possède Integer

un id unique
Name Nom de site web String
Url L’url de site web String
Tableau8 : table site

 Table User-Sites: (id, #user_id, #site_id, create, update, read, delete)
Propriété
Type
Id Identifiant de responsable integer

de site
User_id Identifiant de l’utilisateur Integer
Site_id Identifiant de site web Integer
Create Permission de créer un site Boolean

web ou d’ajouter des page
dans un site web
Update Permission de modifier un Boolean
site web
Read Permission de consulter Boolean
un site web
Delete Permission de supprimer un Boolean
site web
Tableau 9:Table user_sites
 Table Page: (id, name, url , #site_id)
Propriété
Type
Id Chaque page web a un Integer

identifiant unique
Name Le nom de la page web String
Url L’url de la page web String
Site_id Il désigne l’id de site web

auquel appartient chaque Integer
page.
Tableau10 : table Page

 Table Keyword « Mot-clè » : (id, content)
Propriété
Type
id Chaque mot-clé a un Integer

identifiant unique
Content c'est l'attribut qui désigne le String
contenu du mot-clé
Tableau11 : Table Keyword
 Table Keyword_Pages : (id, #Keyword_id, Page_id):
Propriété
Type
id Identifiant de la relation Integer

Page et mot-clé
Keyword_id Identifiant de mot-clé Integer
Pag_id Identifiant de la page web Integer
Tableau 12: Table keyword_Pages
 Table Rank «position» : (id , Date, Gélocalisation ,rank ,#keyword-page_id)
Propriété
Type
id Chaque position a un integer

identifiant unique
Date C’est la date de chaque String

position de page web
Détermine le pays dans

Géolocalisation lequel nous testerons les String
positions des pages web
Rank C’est l’attribut qui définit la integer
valeur de la position.
Keyword_page_id Il s'agit de l'identifiant qui

nous permet d'identifier la integer
page et le mot-clé de cette
position
Tableau13 : table Rank
 Table Competirors « Concurrent » (id , url, rank , #rank_id)
Propriété
Type
Id Chaque concurrent a un integer

identifiant unique
Url C’est l’url de site String
concurrent
Rank C’est l’attribut qui définit integer
la valeur de la position de
concurrent
Rank_id Définit l'ID de position
avec lequel le site du integer
concurrent sera comparé
Tableau14 : Table competitors
Conclusion
Dans ce chapitre conception, nous avons présenté la vue statique et dynamique de
l’application à développer à travers des diagrammes UML. Nous avons, ainsi, réussi à
concevoir notre modèle relationnel qui est constitué des différentes tables formant
notre base des données.
Chapitre 4 :
Réalisation
Introduction
Une des étapes de la vie d’un projet, aussi importante que la conception, est
l’implémentation. Cette étape constitue la phase d’achèvement et d’aboutissement du
projet. Pour remplir cette tâche avec succès il faut savoir utiliser les outils adéquats et
nécessaires. Ce choix d’outils peut influencer sur la qualité du produit obtenu et donc
nécessite une attention particulière et doit se baser sur les besoins du projet et le
résultat escompté.
Ce chapitre présente alors l’environnement technique du travail ainsi que le choix

pris en matière d’environnement logiciel. Par la suite nous présentons les interfaces de
notre solution.
4.1 Environnement de travail
Dans cette partie, nous allons étudier le choix des outils matériels et logiciels
nécessaires pour le développement de notre application web.
1. Environnement matériel :
Pour le développement de notre application nous avons utilisons un PC portable «
DELL» dont la configuration est la suivante :
 Processeur : Intel(R) Core (TM) i5-8250U CPU @ 1.60GHz 1.80 GHz
 Quantité de mémoire vive 8 Go
 Capacité du disque dur 439 Go
2. Environnement logiciel :
Tout au long du projet, nous avons utilisé certains outils logiciels, bien connus, afin de
pouvoir préparer le travail et réussir sa mise en œuvre, le test et le bon déroulement de
certains besoins de développement ou de conception.
 PhpStorm : L'éditeur comprend votre code et sa structure en profondeur, ce qui

lui permet de prendre en charge toutes les fonctionnalités du langage PHP pour les
projets modernes et plus anciens. Il fournit une saisie semi-automatique du code
avancée, les refactorisations, la prévention d'erreur à la volée, et bien plus
encore.[5]
Figure 16: logo de PhpStorm
 Postman :
C’est un logiciel qui se focalise sur les tests des API. Il est devenu très populaire
pour tester les Microservices, notamment grâce à sa simplicité et ses fonctionnalités
très spécialisées.[6]
Figure 17: logo Postman
 Draw.io :
Est un service pour dessiner des diagrammes en ligne. L’outil permet de créer
tout type de diagramme assez facilement et gratuitement.
Figure 18: logo draw.io

3. Framework et Langages de programmation :
 PHP:
Pour Hypertext Preprocessor, désigne un langage informatique, ou un langage

de script, utilisé principalement pour la conception de sites web dynamiques. Il s'agit
d'un langage de programmation sous licence libre qui peut donc être utilisé par
n'importe qui de façon totalement gratuite. [7]
 Laravel :
C’est un Framework web open-source en PHP respectant le principe MVC et

entièrement développé en POO. ses sources hébergées sur GitHub.
L’une des caractéristiques les plus importantes du Framework Laravel est qu’il est
livré avec ORM (Object Relation Mapping) intégré appelé Eloquent ORM.
L’ORM est un logiciel permettant la conversion des données relationnelles d’une base
de données en objets afin de pouvoir les manipuler dans notre application en POO.
Figure 19: logo laravel eloquent ORM
 GoLang :
Go a été créé par Google, il y a une dizaine d’années, alors que les délais de
compilation du C++ étaient extrêmement longs.
Ils ont décidé de trouver une solution qui était un langage de programmation
entièrement nouveau, étant un mix du C++, notamment les performances et les
caractéristiques de sécurité, combinées avec la vitesse de Python. Cela permet à Go

d’utiliser rapidement plusieurs cœurs tout en étant capable de mettre en œuvre la
concurrence. [8]
Figure 20: logo de Golang
 VUE JS : C’est un framework évolutif pour construire des interfaces utilisateur. À

la différence des autres frameworks monolithiques, Vue a été conçue et pensé pour
pouvoir être adopté de manière incrémentale. Le cœur de la bibliothèque se
concentre uniquement sur la partie vue, et il est vraiment simple de l’intégrer avec
d’autres bibliothèques ou projets existants. [9]
4. Système de gestion de la base de données relationnel :

 XAMPP :
C’est un ensemble de logiciels servant à mettre en place aisément un serveur Web, un

serveur FTP et un serveur de messagerie électronique. C'est une distribution de
logiciels libres (X Apache MySQL Perl PHP) offrant une bonne souplesse d'utilisation,
reconnue pour son installation simple et rapide.[10]
Figure 21: logo Xampp server

 PhpMyAdmin :
C’est une application web qui permet de gérer un serveur de bases de données
MySQL. Dans un environnement multi-utilisateurs, cette interface écrite en PHP
permet également de donner à un utilisateur un accès à ses propres bases de
données.[11]
Figure 22: logo de phpmyadmin
 MySQL :
Database Service est un service de base de données entièrement géré pour déployer des
applications natives du cloud en utilisant la base de données open source la plus
populaire au monde. Ce service est développé, géré et supporté à 100% par l'équipe de
MySQL. [12]
Figure 23: logo de Base de données MySql

4.2 Présentation de l’application
1. Composition de page :
L’application doit être simple d’utilisation et de navigation, que ce soit dans ses
fonctionnalités ou que ce soit dans son contenu. Pour faciliter la navigation, il est
obligatoire que l’ensemble des pages du l’application web possèdent la même
structure et organisation.
Pour cela, nous réalisons un modèle pour la structure des pages, La totalité visible par
l’utilisateur posséderont cette même structure :
- Un en-tête de page
- Un menu de navigation complet avec le logo de l’application.
- Le contenu qui se modifiera selon les pages.
Figure 24: Composition de la page
L’intérêt de procéder ainsi est que seul le contenu de l'application varie d’une page à
une autre. C’est pourquoi de page en page, on inclut toujours le même en-tête, le
même menu de navigation et le même pied de page. Cela évite de devoir implémenter
à nouveau chaque partie du l'application, ce qui entraine un gain de temps considérable
2. Les interfaces graphiques:
1. L’interface d’authentification :
Figure 25: Interface d’authentification
L’authentification est une étape primordiale par laquelle chaque utilisateur de notre
site web doit y passer pour accéder à l’application. Cette phase assure, en effet, la
sécurité de l’application en demandant l’accès à l’application.
 Avant de l’authentifier l’utilisateur, doit d’abord avoir un compte dans cette

application pour cela nous avons fait une interface pour la création d’un compte.
Figure 26: Interface de créer un nouveau compte
 Si l’utilisateur a oublié son mot de passe, il clique sur « mot de passe

oublié »pour vérifier son email. Il recevra alors, un message sur son email pour
avoir un nouveau mot de passe.
Figure 27: interface de mot de passe oublié

2. Interface page d’accueil
Après authentification le système collecte les modules qu’il a le droit de consulter et

génère à gauche le menu adéquat et l’intègre dans la page d’accueil.
Figure 28:interface d’accueil

3. Interface de gestion des utilisateurs
- La gestion des utilisateurs est déterminée par le propriétaire et l'administrateur.
 Liste des utilisateurs : cette figure présente la liste des utilisateurs de l’application
Figure 29: liste des utilisateurs
 Interface des permissions : le propriétaire choisit l’utilisateur puis d’après

cette liste il choisit le site et il donne les permissions selon leur besoins
Figure 30: interface des permissions d’un utilisateur

4. Interface de gestion la liste des sites web :
 Liste des sites web :
Cette figure présente la liste des sites des clients
Figure 31 : interface de liste des sites web

 Consultez le site web :
On cliquant sur le bouton voir d’un site de la figure précédente cette

interface s’ouvrir. Cette figure présente l’interface d’un site web dans
l’application
Figure 32 : interface d’un site we

 Ajout d'une nouvelle page à ce site Web:
On cliquant sur le bouton ajouter une page cette interface s’affiche pour ajouter
une nouvelle page web au site.
Figure 33: interface d’ajout une page w

 Consulter une page web :
Cette figure présente l’interface d’une page web avec ses détails
Figure 34 : interface d’une page web

 L’historique des positions d’une page web sur un mot clé :
La figure 35 présente l’historique des positions pour une page web avec la liste des
concurrents sur un seul mot-clé
Figure 35: interface de l’historique des positions d’une page web sur un mot clé
 Affecter un mot clé à une page de site web
Figure 36: interface d’affectation un mot clé à une page de site web
5. Interface de gestion la liste des mots-clés :
 la liste des mots-clés :
Figure 37 : liste des mots clés

 Consultez un mot-clé :
Cette figure présente l’interface d’un mot-clé ou on trouve les pages web
affecté à ce page et la dernière position pour chaque une. On peut aussi
affecter une autre page web a ce mot-clé on cliquant sur le bouton ajouter
une page
Figure 38: interface d’un mot clé

6. Interface des positions :
D’après cette interface on peut voir les positions des différents pages sur ces mots-clés
et leurs positions actuelles.
Figure 39: liste des positions
Conclusion
Dans ce chapitre nous avons présenté l’environnement de développement (matériel et
logiciel) ainsi que les Framework utilisés pour le développement de notre application.
Nous avons ensuite décrit le travail réalisé, et enfin, nous avons présenté quelques
interfaces de l’application.
Conclusion Générale
Ce stage de fin d’étude était une bonne occasion pour améliorer nos connaissances
théoriques et pratiques. En effet nous avons eu l’opportunité de participer à la fois à la
conception et à la réalisation d’une application web au profit de la société d’accueil
« Virus Santé Communication ». L’application réalisée sert à la mise en place d’une
plateforme de suivi et de surveillance des positionnements des sites web des clients
destinés à l’équipe de référencement web (SEO).
Il n’est pas évident d’éviter les problèmes et les difficultés au niveau de la

modélisation conceptuelle ainsi que celles dans l’écriture des codes. Cependant, nous
avons essayé de dégager les solutions les mieux adaptées à nos objectifs, nos
contraintes et nos possibilités.
En général, nous étions très intéressés par ce stage. Nous avons pu découvrir les
différents langages de programmation PHP, Laravel, Golang, Vuejs , etc. et avoir un
aperçu de leur fonctionnement. Cela nous a également permis de connaître les
différents services et d'avoir une approche réelle de mode de travail.
Nous avons pu faire le rapprochement entre ce que nous avons appris en cours et ce
qui se passe vraiment dans l’entreprise. Ce projet ne doit pas être considéré comme un
produit finit par l’application pour la société mais plutôt comme un premier prototype
qui sera la base des éventuelles extensions.
Webographies
1 Auteur : Dernière fois visité : 14-06-2021

https://www.ionos.fr/startupguide/productivite/modele-en-spirale/

https://www.ibm.com/docs/fr/rational-soft-arch/9.5?topic=diagrams-use-case

https://laurent-audibert.developpez.com/Cours-UML/?page=introduction-
modelisation-objet

https://www.irif.fr/~carton/Enseignement/InterfacesGraphiques/Cours
/Swing/mvc.html

https://www.jetbrains.com/fr-fr/phpstorm/
6 Auteur :
Soufiane Amar Dernière fois visité : 17-06-2021
https://openclassrooms.com/fr/courses/4668056-construisez-des-
microservices/5123020-testez-votre-api-grace-a-postman

https://www.journaldunet.fr/web-tech/dictionnaire-du-
webmastering/1203597-php-hypertext-preprocessor-definition/

https://www.journaldunet.com/web-tech/developpeur/1196711-google-go-est-
il-le-langage-de-l-ere-de-la-performance/

https://fr.vuejs.org/v2/guide/index.html

http://www.standard-du-web.com/xampp.php

https://www.projet-plume.org/fiche/phpmyadmin/

https://www.mysql.com/fr/

https://www.atlassian.com/fr/git/tutorials/what-is-git

https://elb.fr/vps/#:~:text=1.,de%20messagerie%20sur%20le%20serveur
.

https://docs.plesk.com/fr-FR/obsidian/administrator-guide/%C3%A0-
propos-de-plesk.70559/
Annexes
Mise en production
1. Git :
Git [6] est de loin le système de contrôle de version le plus largement utilisée
aujourd’hui. C’est un projet open source avancé, qui est activement maintenu.
Il a été développé en 2005 par Linus Torvalds, le créateur bien connu du noyau du
système d’exploitation linux. De plus en plus de projets de développement reposent
sur Git pour le contrôle de version, y compris des projets commerciaux et open
source. Les développeurs qui utilisent Git sont bien représentés dans le pool de talents
disponible, et la solution fonctionne bien sur une vaste gamme de systèmes
d’exploitation et d’environnements de développement intégrés (IDE).
En plus d’être décentralisé, Git a été conçu pour répondre à trois objectifs :
performances, sécurité et flexibilité.[13
2. L’intégration et le déploiement continu (CI/CD) :
CICD est un ensemble de pratiques qui permettent l'accélération de rythme de

déploiement des applications, d’un côté
− L’intégration continue « CI » permet aux développeurs d'apporter

des modifications régulières au code de leur application, de le tester,
puis de l'intégrer.
D’une autre coté, Cette solution vous permet d'éviter de travailler sur trop d'éléments
de l'application en même temps, qui peuvent entrer en conflit les uns avec les autres.
− Le déploiement continu « CD » pousse la pratique DevOps

consistant à automatiser les étapes de build, de test et de déploiement
à son extrême logique. Si une modification du code passe avec
succès toutes les étapes précédentes du pipeline, cette modification
est automatiquement déployée en production sans aucune
intervention manuelle. L'adoption du déploiement continu signifie
que vous pouvez offrir de nouvelles fonctionnalités à vos utilisateurs
aussi rapidement que possible, sans compromis sur la qualité.
 Éléments d'un pipeline CI/CD :
− Création /développement : création /codage d’une nouvelle fonction
− Test : test du code.
− Lancement : distribution de l'application au référentiel.
− Déploiement : déploiement du code en production.
3. Hébergement :
Un serveur d’hébergement est un ordinateur qui fonctionne sans interruption, ce qui

permet à notre site d’être tout le temps accessible et fonctionnel pour tout le monde,
depuis n’importe quel endroit. Un hébergeur est responsable du déploiement, de la
configuration et de la maintenance de ces serveurs et assure, donc, que notre site web
soit visible aux internautes.
Pour l’hébergement de cette application nous avons utilisés le VPS :
 VPS : « Virtual Private Server »
C’est un modèle répandu d’hébergement qui fait partie de la catégorie de service IaaS
(Infrastructure as a Service) délivré par les nombreux fournisseurs d’accès Internet. On
peut définir un VPS comme une machine virtuelle qui emploie les ressources d’un
serveur physique et offre aux utilisateurs les mêmes fonctionnalités qu’un serveur
dédié classique. [14]
Nous utilisons ce type de serveur parce que :
− C’est un serveur sécurisé
− C’est plus rapide et plus fiable qu’un serveur d’hébergement partagé.
− La personnalisation du service
− Des Ressources dédiées
− L’hébergement VPS offre plus de liberté et de fonctionnalité que les

hébergements mutualisés.
Pour faciliter la gestion des différents aspects de notre compte d'hébergement, tels que
les fichiers, les applications, les comptes clients ainsi que les comptes de messagerie
sur le serveur, nous avons utilisé Plesk.
 Plesk :
C’est un panneau de contrôle d’hébergement, c’est-à-dire un intermédiaire entre les

services du système et les utilisateurs. Par exemple, lorsqu’un utilisateur crée un site
Web via l’interface utilisateur de Plesk, Plesk propage cette requête vers un serveur
Web (Apache ou IIS). Ce dernier ajoute alors un nouvel hôte virtuel dans le système.
Cette méthode d’administration de tous les services du système à partir d’une même
interface Web réduit les frais de maintenance et offre aux administrateurs le contrôle et
la flexibilité nécessaires. [15]
 Apache : « serveur apache http »
Apache est un logiciel de serveur web gratuit, open-source et multiplateforme. Il

permet aux propriétaires de sites web de servir du contenu sur le web – d’où le nom
« serveur web ».
Bien que nous appelions Apache un serveur web, ce n’est pas un serveur physique
mais plutôt un logiciel qui s’exécute sur un serveur. Son travail consiste à établir une
connexion entre un serveur et les navigateurs des visiteurs du site web (Firefox,
Google Chrome, Safari, etc.) tout en délivrant des fichiers entre eux (structure client-
serveur). Apache est un logiciel multiplateforme, il fonctionne donc à la fois sur les
serveurs Unix et Windows.

Pfe Oumaima Zayene

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Pfe Oumaima Zayene

Transféré par

Droits d'auteur :

Formats disponibles

MINISTERE DE L’ENSEIGNEMENT

‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬

INSTITUT SUPERIEUR D’INFORMATIQUE

ET DES TECHNOLOGIES DE COMMUNICATION – HAMMEM SOUSSE

MEMOIRE DE FIN D’ETUDES

Conception et réalisation d'un système

Année Universitaire 2020 – 2021

‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬

INSTITUT SUPERIEUR D’INFORMATIQUE

ET DES TECHNOLOGIES DE COMMUNICATION – HAMMEM SOUSSE

Département Réseaux Informatiques

MEMOIRE DE FIN D’ETUDES

Présenté en vue de l’obtention du diplôme de Licence Appliquée

Technologies des Réseaux Informatiques

Encadrant :………………………….…Date :………………………Signature :………….

Superviseur :…………………………..Date :………………………Signature :…………….

Année Universitaire 2020 – 2021

Dans le cadre de l’obtention de diplôme de licence appliqué en réseaux informatique,

Mots clés : SEO, PHP , Laravel, Golang, Vuejs …

Keywords: SEO, PHP, Laravel, Golang, Vuejs….

En témoignage de ma gratitude et fidélité, je dédie ce modeste travail à ceux qui, quels

À mes chers parents « Mohamed » et « Saliha »

À mes chers sœurs « Soulayma » et « Mariem »

Aux familles : « Zayene » et « chaouch »

À mes amis de toujours

donné le courage, la force et la patience d’accomplir ce modeste travail.

En premier lieu je remercie toute l’équipe pédagogique de l’institut supérieur de

l’informatique et des technologies de la communication.

En troisième lieu je tiens à remercier Mr. Aymen Ismail de m’avoir accueilli au

J’offre tout particulièrement de sincères remerciements à mon encadrant Mr. Achref

la hauteur de vos attentes.

Liste des figures………………………………………….…………………………………8

Liste des Tableaux……..………………………………………………………………….10

Liste des abréviations…………………….……………………………………………….11

CHAPITRE 1 : ÉTUDE PREALABLE………..………………………………………...……..14

1.1 Présentation de l’entreprise virus………………………………………………15

1.2 Le cadre de projet…………………………………………………..………….17

1.4 Etude et critique de l’existant……….…………………………………………18

1.5 Solution proposée :…………………………………………………………….20

1.6 Méthodologie de travail………………………………………………………..21

1.7 planification :………………………………………………………………….22

CHAPITRE2 : ANALYSE ET SPECIFICATION DES BESOINS...………………………………24

2.1 Spécification des besoins………………………………………………………25

2.2 Diagrammes des cas d’utilisation :……………………………………………28

1. Langage de modélisation (UML) :……………………………………………….28

2. Le Modèle des cas d’utilisation……………………………………………….….28

3. Diagrammes des cas d’utilisation global …………………………………………29

4. Raffinement des cas d’utilisation :…………………………...……..……………..31

3.1 Méthode de modélisatio……………………………………………………….39

3.2 Diagrammes de séquence…………………………...………………………….41

3.3 Diagramme de classe………………………………………………………….47

3.4 Le modèle logique des données :………………………………...…………..49

4.1 Environnement de travail……………………………..………………………..54

1. Environnement matériel :…………………………..…………………………..54

2. Environnement logiciel :……………………………………………………….54

3. Framework et Langages de programmation :………………………………….56

4. Système de gestion de la base de données relationnel :……………………..…57

4.2 Présentation de l’application…………………………………………………...59

1. Composition de page :…………………………………………………...……….59

2. Les interfaces graphiques:……………………………………………….…….60

Figure 1: Logo de l’entreprise……………………………………………………………………………………………….……..15

Tableau 1: « Planification Temporelle »…………………………………………………………………………..…………22

SEO : Optimisation des moteurs de recherche