République Algérienne Démocratique et Populaire

‫الجمهورية الجزائرية الديمقراطية الشعبية‬

Ministère de l’Enseignement Supérieur et de la Recherche Scientifique
‫وزارة التعليم العالي والبحث العلمي‬
Université Zian Achor de Djelfa
‫جامعة زيان عاشور الجلفة‬

Mémoire de fin d’études

Pour l’obtention du diplôme Licence Professionnalisante en Informatique

Option : Développement WEB et applications mobiles

Conception et implémentation d’un

réseau social

Réalisé par : Encadré par :

M. DARBEIDA Abdelhak M. B ELKHIRAT Ahmed
M. B EKKOUCHE Eboubaker (Univ-Djelfa)

Promotion : 2020/2021
Dédicaces

“ À mes chers parents ma mère et mon père Pour leur patience, leur
amour, leur soutien et leurs encouragement,
À mes frères, À mes amies et mes camarades,
Sans oublier tous les professeurs que ce soit du Primaires, du
moyen, du secondaire ou de L’enseignement supérieur,
À tous ceux qui me sont chers, à vous tous
Merci.
”
- Abdelhak

“ À ma mère, À mon père,

À mes frères et soeurs, À ma famille,
À mes amis, À mes collègues et À mes professeurs,
À mes lecteurs,
À tous ceux qui me sont chers, à vous tous
j’ai dédié ce travail.
”
- Eboubaker

I
Remerciements

Avant tout nous remercions Allah le tout puissant qui nous a donné la force, la patience et le
courage pour qu’on puisse accomplir ce modeste travail.

Nous remercions tout particulièrement notre encadreur, monsieur Belkhirat Ahmed, pour l’aide
compétente qu’il nous a apportée, pour sa patience et ses encouragements à accomplir ce travail.

Nous exprimons nos reconnaissances à nos enseignants, nos amis, nos collègues de promotion
developpment web et application mobile 2018

Je souhaite aussi remercier l’équipe pédagogique et administrative de Université Zian Achor de

Djelfa pour leurs efforts dans le but de nos offrir une excellente formation.

Pour finir, je souhaite remercier toute personne ayant contribué de prés ou de loin à la réalisation
de ce travail.

II
Remerciements

Résumé
Les réseaux sociaux sont l’un des sites les plus utilisées. De nos jours, il est devenu nécessaire
d’utiliser les réseaux sociaux pour la communication quotidienne, et l’échange d’expériences.

Dans ce travail, nous avons développé un réseau social. Ce réseau social avec ses fonctionnalités,
aide les gens pour communiquer avec les autres.

Mots clés : Média, Réseau social, communication

Abstract
Social networking is one of the most used sites nowadays. It has become necessary to use social
networks for daily communication, and the exchange of experiences.

In this work, we developed a social media site. This website with its features helps people to
communicate with others.

Keywords : media, social network, communication

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

‫ تواصل‬،‫ شبكة التواصل الاجتماعي‬،‫ وسائل وسيط‬: ‫كلمات مفتاحية‬

III
Table des matières

Introduction générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1 Étude de l’existant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Les réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Les réseaux sociaux les plus populaires . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 L’historique de réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 Les usages des réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.6 Les types de réseaux sociaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7 Les avantages et les inconvénients du réseau social . . . . . . . . . . . . . . . . . . . . 7
1.7.1 Avantages du réseau social : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.7.2 Inconvénients du réseau social : . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.8 Les statistiques d’utilisation de réseaux sociaux . . . . . . . . . . . . . . . . . . . . . 8
1.8.1 Les statistiques d’Algérie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2 Analyse et conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.2 Analyse des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3 Phase de conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.1 Le Langage UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.2 Avantages et inconvénients d’UML . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3.3 Les diagrammes de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . 17
2.3.4 Les diagrammes d’ Activités . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.3.5 Le diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

3 Réalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.2 L’environnement de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.2.1 L’environnement Machine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.2.2 L’environnement Logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.3 Technologies utilisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.4 Interfaces Graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.4.1 La Page « Login » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.4.2 La Page « Register » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.4.3 La Page « Confirmation Code » . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.4.4 La Page « Profile » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.4.5 La Page « Feed » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.4.6 La Page « Create Post » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.4.7 La Page « Community » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
3.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

IV
Table des figures

1.1 infographique montre la chronologie des réseaux sociaux. . . . . . . . . . . . . . . . . 5

1.2 Part des dépenses publicitaires dans les médias sociaux 2013-2017 . . . . . . . . . . . 6
1.3 Nombre d’utilisateurs facebook aux états unis [10]. . . . . . . . . . . . . . . . . . . . 9
1.4 Nombre d’utilisateurs Linkedin aux états unis [11]. . . . . . . . . . . . . . . . . . . . 10
1.5 Nombre d’utilisateurs des réseaux sociaux au monde en 2020, par région [12]. . . . . . 11
1.6 L’utilisation de la connexion mobile, d’Internet, des médias sociaux par rapport à la
population totale en Algérie (2021) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.7 Utilisateurs de réseaux sociaux en Algérie (2021) . . . . . . . . . . . . . . . . . . . . 12
1.8 Utilisateurs de Facebook en Algérie (2021) . . . . . . . . . . . . . . . . . . . . . . . . 13
1.9 Utilisateurs de Twitter en Algérie (2021) . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.10 Utilisateurs de Linked-in en Algérie (2021) . . . . . . . . . . . . . . . . . . . . . . . . 14

2.1 Diagramme de Cas d’utilisation : General. . . . . . . . . . . . . . . . . . . . . . . . . 18

2.2 Diagramme de Cas d’utilisation : S’inscrire & Se connecter. . . . . . . . . . . . . . . . 19
2.3 Diagramme de Cas d’utilisation : Gérer les profils. . . . . . . . . . . . . . . . . . . . . 21
2.4 Diagramme de cas d’utilisation : Gérer les Posts. . . . . . . . . . . . . . . . . . . . . 22
2.5 Diagramme de cas d’utilisation : Gérer les relations. . . . . . . . . . . . . . . . . . . . 24
2.6 Diagramme de cas d’utilisation : Gérer les communautés. . . . . . . . . . . . . . . . . 25
2.7 Diagramme d’activité <Se connecter> . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.8 Diagramme d’activité <S’inscrire> . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.9 Diagramme d’activité <Créer Post> . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.10 Diagramme d’activité <Aime un Post> . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.11 Diagramme d’activité <Commenter un Post> . . . . . . . . . . . . . . . . . . . . . . 32
2.12 Diagramme d’activité <abonné à un profil > . . . . . . . . . . . . . . . . . . . . . . . 33
2.13 Diagramme d’activité <Créer communauté> . . . . . . . . . . . . . . . . . . . . . . . 34
2.14 Diagramme d’activité <Créer Post en communauté> . . . . . . . . . . . . . . . . . . 35

3.1 L’architecture de la plateforme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.2 Interface de la plate-forme Draw.io. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.3 Interface de Visual Studio Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.4 Interface de XAMPP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.5 Logo de Laravel PHP Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.6 Architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.7 Logo de Composer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.8 Logo de MySQL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.9 Logo de TailWind CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.10 Logo de Javascript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.11 Logo de Vue.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.12 Logo de NPM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.13 Login Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.14 Register Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
3.15 Confirmation Code Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.16 Profile Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.17 Feed Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

V
Table des figures

3.18 Create Post Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

3.19 Community Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

VI
Introduction générale

Contexte

Les humains ont toujours eu tendance à communiquer entre eux sur de courtes et longues distances.
Pour satisfaire ce désir, les gens ont utilisé de nombreux outils pour se connecter et converser. Ces
outils ont considérablement changé au fil du temps, passant de la création sans prétention de signaux
de fumée et de klaxons soufflants à des systèmes d’écriture et des lettres développés.

Alors que la volonté des gens de communiquer entre eux persistait et grandissait, de nouvelles
technologies sont apparues pour faciliter les communications malgré un long kilométrage. L’immense
phase qui a suivi dans le développement des outils de communication a eu lieu en 1990 lorsque Tim
Berners-Lee et Robert Cailliau ont combiné Internet et son système de noms de domaine (DNS)
avec l’idée de l’hypertexte qui a créé le premier serveur World Wide Web (WWW). Une fois que le
Web est devenu accessible au public, il s’est développé très rapidement, s’étendant pour atteindre de
nombreux domaines tels que l’apparition d’Amazon et le déjeuner de Yahoo ! et MSN en 1995.

Même si Internet existe depuis relativement peu de temps, il est devenu un outil de communication
dans le monde entier que les gens tiennent pour acquis. L’un des principaux facteurs à l’origine
de l’utilisation généralisée d’Internet est le développement et la croissance rapides des nouvelles
technologies (telles que les PC et les smartphones). Par conséquent, la communication des gens a
radicalement changé. Au lieu d’utiliser des téléphones, il est devenu courant de converser par courrier
électronique, messagerie instantanée et de nombreux autres services Web.

La tendance la plus récente dans la communication en ligne est les réseaux sociaux en ligne (OSN).
Ils sont devenus une partie importante de notre civilisation moderne en donnant à chacun la pos-
sibilité d’exprimer et de partager des idées, des sentiments et des affaires. L’utilisation généralisée
de différentes plateformes de réseaux sociaux (à des fins personnelles ou professionnelles) nous a fait
prendre conscience du monde dans lequel nous vivons. Par exemple, Twitter diffuse les nouvelles
rapidement et les rend plus disponibles et accessibles. Facebook a brisé les contraintes de temps et
d’espace dans nos interactions sociales quotidiennes. Les entreprises créent des liens plus étroits avec
leurs clients via Instagram.

1
Introduction générale

Objectif

Les sites de médias sociaux les plus populaires sont ceux qui ont été créés presque au début
d’Internet. Mais il y a de nouveaux sites qui rivalisent avec les anciens pour les meilleurs classements.

Notre objectif principal est de tenter notre chance de créer un site de médias sociaux spécifique
à notre pays et à notre communauté qui concurrencera les anciens et les nouveaux sites de médias
sociaux existants.

Problématique

Les problèmes auxquels nous avons été confrontés sont de savoir comment éviter les inconvénients
des sites de médias sociaux existants et il y a des restrictions, et comment résoudre les inconvénients
d’un nouveau site de médias sociaux créé

2
Chapitre 1

Étude de l’existant

3
Chapitre 1. Étude de l’existant

1.1 Introduction

Les réseaux sociaux peuvent être considérés comme des sources utiles d’informations, d’opinions
et de comportements concernant différents domaines d’intérêt. Dans ce chapitre, nous allons parler
généralement sur les réseaux sociaux et son impact sur les individus. Nous discuterons ensuite les
statistiques d’utilisation ces derniers dans le monde et en Algérie.

1.2 Les réseaux sociaux

A la fin des années 1990 naissent les premiers réseaux sociaux sur internet. Le réseau Facebook,
le site de microblogage Twitter, ou encore le site de partage vidéo YouTube, sont certainement en
le monde les médias sociaux le plus populaires. Ces sites Web permettent de créer des profils, des
messages, des forums, de former un cercle d’amis et de trouver des partenaires, des offres d’emploi
ou d’autres partenaires d’affaires avec lesquels être en relation sur le Web.

Ce type d’applications Internet forme ce que nous appelons les sites de réseaux sociaux : des lieux
dédiés à la communication des connaissances, à la rencontre de nouvelles personnes ou à la création
de relations professionnelles.

Tous les réseaux sociaux ont des opérations similaires : créer un profil (informations personnelles,
photos, passe-temps ou compétences) et inviter des ”amis” ou ”partenaires” à se lier.
Selon la version idéale des créateurs de ces réseaux sociaux, chaque nouveau contact qui accepte une
invitation augmente le réseau de contacts. Les utilisateurs qui viennent d’arriver enregistrent aussi
leurs contacts et ainsi de suite.... Jusqu’à ce que le monde entier soit connecté.

Mais généralement, la plupart des utilisateurs n’invitent personne, mais recherchent des familiers
qui font déjà partie du réseau, principalement des individus qui se connaissent par Internet interposé.
Contacts ”amis”, contacts ”virtuels” !

Les gens ont tendance à consacrer beaucoup de temps à ces technologies pour de nombreuses
raisons, d’abord par curiosité et parce qu’elles sont ”en vogue”. D’autres raisons sont plus idéalistes
et le fait de pouvoir entrer en contact avec le monde entier n’est pas la dernière des causes.

1.3 Les réseaux sociaux les plus populaires

• Facebook : est un réseau social créé en 2004. Au départ, ce réseau social a été conçu comme
un outil à l’usage des étudiants. Rapidement Facebook s’est par la suite ouvert à certaines
entreprises, puis à toute personne désirant s’inscrire. Aujourd’hui plus d’un demi-milliard d’in-
ternautes l’utilisent, ce qui en fait l’un des principaux sites internet au monde.

• Twitter : microblog et réseau social permettant de créer l’espace personnel et communiquer

avec d’autres internautes.

4
Chapitre 1. Étude de l’existant

• YouTube : peut également être considéré partiellement comme un réseau social dans la mesure
où le service a développé des outils d’interactions entre ses membres.

• LinkedIn : réseau professionnel de référence dans le monde permettant de promouvoir ses

compétences et ses relations [1].

1.4 L’historique de réseaux sociaux

Les réseaux sociaux se sont développés au cours des 10 dernières années pour devenir un secteur
de plusieurs milliards de dollars avec plus de 2 milliards de personnes inscrites dans un ou plusieurs
réseaux. La figure ci-dessous montre l’historique de quatre des sites de médias sociaux

Fig. 1.1 : infographique montre la chronologie des réseaux sociaux.

1.5 Les usages des réseaux sociaux

L’une des utilisations intéressantes de ces réseaux de manière professionnelle est la contractualisa-
tion. LinkedIn, le leader des réseaux sociaux d’affaires, donne les possibilités de son réseau pour les
points intéressants suivants :

• Gérer l’information qui est accessible au public à votre sujet en tant que professionnel.

• Trouver des clients potentiels, des fournisseurs de services et des experts en la matière recom-
mandés, et être présentés à ces derniers.

• Créer et collaborer à des projets, recueillir des données, partager des fichiers et résoudre des
problèmes

5
Chapitre 1. Étude de l’existant

• Être trouvé pour des opportunités d’affaires et trouver des partenaires potentiels

• Obtenez de nouvelles idées à partir de discussions avec des professionnels partageant les mêmes
idées dans des groupes privés.

• Découvrez les liens internes qui peuvent vous aider à décrocher des emplois et à conclure des
affaires.

• Afficher et distribuer des offres d’emploi pour trouver les meilleurs talents pour votre entreprise

Autre utilisation intéressante, à des fins de marketing, les réseaux sociaux constituent un mécanisme
alternatif de traitement des données sur le marché. Le postulat est qu’il permet à l’information
d’arriver aux individus désirés avec la plus grande économie de moyens (par rapport à une diffusion
généralisée de l’information globale à tous les acteurs). Les réseaux sociaux jouent le rôle de filtre. Ils
sont considérés comme les moyens qui permettent d’atteindre le plus rapidement possible les points
les plus éloignés du réseau, et de saturer au mieux un réseau. Ainsi, les réseaux sociaux peuvent être
considérés comme un canal de distribution basé sur le filtrat coopératif. (Fig.2) présente la part des
dépenses publicitaires dans les médias sociaux en pourcentage des dépenses publicitaires numériques
dans le monde entre 2013 et 2017. En 2014, la publicité sur les médias sociaux représentait 28,7 pour
cent des dépenses numériques mondiales [9].

Fig. 1.2 : Part des dépenses publicitaires dans les médias sociaux 2013-2017

6
Chapitre 1. Étude de l’existant

1.6 Les types de réseaux sociaux

Il existe plusieurs types de réseaux sociaux, qui peuvent être regroupés en trois catégories, selon
leur ouverture : [8]

• Réseaux ouverts,

• Réseaux à invitation (il faut être invité par un de ses membres),

• Services professionnels en ligne de réseautage (ils favorisent la rencontre professionnelle, les

offres d’emploi et la recherche de profils),

D’autre part, une classification spécialisée des sites de réseaux sociaux pourrait définir sept catégories
en fonction de leurs objectifs :

• Les sites de réseaux sociaux d’entreprises et d’emplois,

• Les sites de réseaux sociaux des jeunes,

• Les sites de réseaux sociaux privés (sur invitation),

• Les sites de réseaux sociaux spécialisés : vidéo, images....

• Les sites des réseaux sociaux communautaires et thématiques,

• Les sites de réseaux sociaux ”identité numérique” comme MyBlogLog,

• Les sites de réseaux sociaux micro : microblogging, microvidéo, etc.

1.7 Les avantages et les inconvénients du réseau social

Le réseau social s’est développé à un point tel qu’il fait maintenant partie de la vie quotidienne
des gens. Comme pour tout ce qui se trouve sur Internet, il y a des avantages et des inconvénients à
utiliser les réseaux sociaux.

1.7.1 Avantages du réseau social :

• Faibles coûts

– Le réseau social à des fins personnelles et professionnelles est gratuit. Il s’agit d’un moyen
facile et économique d’atteindre vos consommateurs et les membres de votre réseau.

• Bâtit la crédibilité

– Pour des raisons professionnelles, la connexion avec vos clients sur un plan personnel et
professionnel les rendra fidèles à votre entreprise et à votre marque.

7
Chapitre 1. Étude de l’existant

• Connexions

– La connexion avec les personnes de vos réseaux d’amis ou de votre réseau de travail vous
sera bénéfique à long terme. Cela vous aidera à établir des liens qui pourraient vous être
utiles à l’avenir.

1.7.2 Inconvénients du réseau social :

• Manque d’anonymat

– Le réseau social exige habituellement que vous saisissiez votre nom, votre emplacement,
votre âge, votre sexe et de nombreux autres types de renseignements personnels.

• Escroqueries et harcèlement

– En étant en ligne, vous risquez de faire face à des cas de harcèlement, de cyberharcèlement,
d’escroquerie en ligne et de vol d’identité.

• Prend beaucoup de temps

– Si vous êtes nouveau dans le réseau social, l’apprentissage du processus peut prendre
beaucoup de temps [2].

1.8 Les statistiques d’utilisation de réseaux sociaux

Les figures ci-dessous montrent que le nombre total d’internautes dans le monde a atteint 4,66
milliards en janvier 2021 a augmenté de 316 millions de croissance de 7,3%, depuis janvier 2020. Il y
a maintenant 4,20 milliards d’utilisateurs de médias sociaux dans le monde. Ce chiffre a augmenté de
490 millions de janvier 2020 à janvier 2021, soit une croissance annuelle de plus de 13%. Le nombre
d’utilisateurs des médias sociaux équivaut désormais à plus de 53% de la population mondiale [7].

8
Chapitre 1. Étude de l’existant

Fig. 1.3 : Nombre d’utilisateurs facebook aux états unis [10].

9
Chapitre 1. Étude de l’existant

Fig. 1.4 : Nombre d’utilisateurs Linkedin aux états unis [11].

10
Chapitre 1. Étude de l’existant

Fig. 1.5 : Nombre d’utilisateurs des réseaux sociaux au monde en 2020, par région [12].

1.8.1 Les statistiques d’Algérie

Les figures ci-dessous sont des statistiques faites en janvier 2021 qui montrent qu’il y avait 26,35
millions d’internautes en Algérie. Ces chiffres ont augmenté de 3,6 millions d’utilisateurs depuis
janvier 2020.

11
Chapitre 1. Étude de l’existant

D’autre part les utilisateurs des réseaux sociaux atteignent 25 millions au début de l’année 2021
par rapport à l’année 2020 où ils étaient 22 millions, soit une augmentation de 3 millions [6].

Fig. 1.6 : L’utilisation de la connexion mobile, d’Internet, des médias sociaux par rapport à la
population totale en Algérie (2021)

Fig. 1.7 : Utilisateurs de réseaux sociaux en Algérie (2021)

12
Chapitre 1. Étude de l’existant

Fig. 1.8 : Utilisateurs de Facebook en Algérie (2021)

Fig. 1.9 : Utilisateurs de Twitter en Algérie (2021)

13
Chapitre 1. Étude de l’existant

Fig. 1.10 : Utilisateurs de Linked-in en Algérie (2021)

14
Chapitre 2

Analyse et conception

15
Chapitre 2. Analyse et conception

2.1 Introduction

Ce chapitre est destiné pour l’analyse et la conception de notre système qui sera fait grâce à la
modélisation UML.

2.2 Analyse des besoins

L’analyse des besoins comporte l’étude et la description textuelle détaillée de système.

Dans cette partie nous allons analyser le système d’information à propos des utilisateurs et leur
activité. Donc, chaque utilisateur a ses renseignements spécifiques (identifient, nom, prénom, numéro
de téléphone, adresse électronique), et d’autre information optionnel (l’étude, le travail, les membre
de famille).

2.3 Phase de conception

La modélisation consiste à créer une représentation virtuelle d’une réalité de telle sorte à faire
ressortir les points auxquels on s’intéresse. Nous utilisons dans ce projet le langage UML pour la
modélisation.

2.3.1 Le Langage UML

UML, c’est l’acronyme anglais pour « Unified Modeling Language ». On le traduit par « Langage
de modélisation unifié ». La notation UML est un langage visuel constitué d’un ensemble de schémas,
appelés des diagrammes (14 au total), qui donnent chacun une vision différente du projet à traiter.
Dans ce travail on va présenter seulement 3 diagrammes. Ces diagrammes sont :

• Le diagramme de cas d’utilisation.

• Le diagramme de classe.

• Le diagramme d’activité.

2.3.2 Avantages et inconvénients d’UML

Les avantages

• UML est un langage formel et normalisé.

• Offre une Exactitude rigoureuse.

• Facilité l’utilisation

• Garantie un aide pour la communication performant.

16
Chapitre 2. Analyse et conception

• Aisé à comprendre la personnification abstraite composite et complexes.

• Offre un milieu d’analyse les besoins.

• UML c’est un langage universel.

Les inconvénients

• La mise en pratique d’UML nécessite un apprentissage et passe par une période d’adaptation.

• Le processus est une autre clé de la réussite d’un projet, processus est une tâche complexe et
longue [5].

2.3.3 Les diagrammes de cas d’utilisation

Les diagrammes de cas d’utilisation sont 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 appropriés. Un cas d’utilisation représente
une unité discrète d’interaction entre un utilisateur (humain Ou machine) et un système. Il est une
unité significative de travail. Dans un diagramme de cas D’utilisation, les utilisateurs sont appelés
acteurs (actors), ils interagissent avec les cas d’utilisation (use cases).

Vu qu’il y’a un grand nombre de cas d’utilisation, on a divisé notre diagramme de cas d’utilisation
en en plusieurs diagrammes. Et voici quelques-uns de nos diagrammes de cas d’utilisation

17
Chapitre 2. Analyse et conception

Diagramme des cas d’utilisation : General

Fig. 2.1 : Diagramme de Cas d’utilisation : General.

18
Chapitre 2. Analyse et conception

Diagramme de Cas d’utilisation : S’inscrire & Se connecter

Fig. 2.2 : Diagramme de Cas d’utilisation : S’inscrire & Se connecter.

Ci-dessous on va présenter quelques scénarios pour le diagramme ci-dessus.

Scénario du Cas S’inscrire :

Nom : S’inscrire.

Acteur : Visiteur.

But : S’inscrire sur le serveur par la création des nouveaux comptes.

Préconditions : lancer la page S’inscrire.

Scénario nominal :

1. Le visiteur accède à la page S’inscrire.

2. Le système affiche la page S’inscrire.
3. Le visiteur remplit le formulaire de la page S’inscrire et l’envoie au système.
4. Le système vérifie les informations envoyées par le visiteur.
5. Le système affiche la page de code de confirmation et envoie un code de confirmation au
visiteur.
6. Le visiteur remplit le code de confirmation.
7. Le système vérifie le code de confirmation envoyées par le visiteur, crée un nouveau compte
et retourne à la page d’accueil .

19
Chapitre 2. Analyse et conception

Scénario alternatif :

– 4.1. les informations envoyées par le visiteur non valides, aller a 3.

– 4.2. le compte déjà existe.

– 7. le code de confirmation envoyées par le visiteur non valides, aller a 6.

Post-conditions :

– Succès : création d’un compte, mise à jour de la base de données.

– Échec : retour à la page S’inscrire.

Scénario du Cas Se connecter :

Nom : Se connecter.

Acteur : Utilisateur.

But : se connecter à son compte et lancer les fonctionnalités du système.

Préconditions : Il doit être inscrit.

Scénario nominal :

1. L’utilisateur accède à la page Se connecter.

2. L’utilisateur entre son nom d’utilisateur et son mot de passe.

3. Le système vérifie les informations envoyées par l’utilisateur.

Scénario alternatif :

– 3.1. Si les informations envoyées par l’utilisateur sont non valides, aller a 2.

– 3.2. Si le compte n’existe pas, on affiche un message d’erreur et aller à 1.

Post-conditions :

– Succès : se connecter au serveur, utiliser le système.

– Échec : retour à la page d’accueil.

20
Chapitre 2. Analyse et conception

Diagramme de Cas d’utilisation : Gérer le profil

Fig. 2.3 : Diagramme de Cas d’utilisation : Gérer les profils.

21
Chapitre 2. Analyse et conception

Diagramme de cas d’utilisation : Gérer les Posts

Fig. 2.4 : Diagramme de cas d’utilisation : Gérer les Posts.

Ci-dessous on va présenter quelques scénarios pour le diagramme :gérer les posts

Scénario du Cas Créer Post :

Nom : Créer.

Acteur : Utilisateur.

But : ajouter un nouveau post.

Préconditions : l’utilisateur doit être déjà inscrit.

Scénario nominal :

1. L’utilisateur accède à la page Créer post.

2. L’utilisateur saisit le contenu du post.
3. L’utilisateur clique sur le bouton post.
4. Le système vérifie le contenu du post.
5. Le système publie le nouveau post.

22
Chapitre 2. Analyse et conception

Scénario alternatif :

– 4.1.Si le contenu du post est interdit, aller a 2.

Post-conditions :

– Succès : la publication d’un nouveau post.

– Échec : retour à la page d’accueil.

Scénario du Cas aime un Post :

Nom : aime.

Acteur : Utilisateur.

But : aime un post.

Préconditions : l’utilisateur doit être déjà inscrit.

Scénario nominal :

1. L’utilisateur accède à la page du post.

2. Le système affiche la page du post.
3. L’utilisateur cliquez sur le bouton aime du post.
4. Le système reçoit la requête aime un post.
5. Le système changer la couleur de bouton aime.
6. Le système incrémenter les j’aimes du post.

Post-conditions :

– Succès : ajouter un j’aime à la post, mise à jour la base de données.

Scénario du Cas commente à un Post :

Nom : comment.

Acteur : Utilisateur.

But : ajouter commentaire a la post.

Préconditions : l’utilisateur doit être déjà inscrit.

Scénario nominal :

1. L’utilisateur accède à la page du post.

2. Le système affiche la page du post.
3. L’utilisateur clique sur le bouton commenter un post.

23
Chapitre 2. Analyse et conception

4. Le système afficher le formulaire de commentaire.

5. L’utilisateur saisit le contenu de commentaire et clique sur le bouton commenter.
6. Le système vérifie le contenu du commentaire.
7. Le système incrémenter les commentaires du post.
8. Le système ajouter le commentaire dans la partie de commentaire.

Scénario alternatif :

– 6.1.Le contenu du commentaire est interdit, aller a 5.

Post-conditions :

– Succès : ajouter un commentaire à la post, mise à jour la base de données.

– Échec : retour à la page d’accueil.

Diagramme de cas d’utilisation : Gérer les relations

Fig. 2.5 : Diagramme de cas d’utilisation : Gérer les relations.

Ci-dessous on va présenter un scénario pour le diagramme :gérer les relations

Scénario de cas : abonné à un profil

Nom : abonner à un profil.

Acteur : Utilisateur.

24
Chapitre 2. Analyse et conception

But : abonner à un profil.

Préconditions : l’utilisateur doit être déjà inscrit.

Scénario nominal :

1. L’utilisateur accède à la page du profil.

2. Le système affiche la page du profil.

3. L’utilisateur clique sur le bouton abonner.

4. Le système reçoit la demande de l’abonnement.

5. Le système modifie le contenu du bouton s’abonner pour se désabonner.

6. Le système incrémenter les abonnements de ce profil.

Post-conditions :

– Succès : ajouter un abonner à profil, mise à jour la base de données.

Diagramme de cas d’utilisation : Gérer les communautés

Fig. 2.6 : Diagramme de cas d’utilisation : Gérer les communautés.

Ci-dessous on va présenter quelques scénarios pour le diagramme :gérer les communautés

25
Chapitre 2. Analyse et conception

Scénario du Cas Créer communauté :

Nom : Créer.

Acteur : Utilisateur.

But : ajouter une nouvelle communauté.

Préconditions : l’utilisateur doit être déjà inscrit.

Scénario nominal :

1. L’utilisateur accède à la page Créer communauté.

2. L’utilisateur saisit les informations de la communauté.
3. Le système vérifie les informations de la communauté.
4. L’utilisateur clique sur le bouton créer.
5. Le système ajouter la nouvelle communauté.

Scénario alternatif :

– 3.1.les information de la communauté est interdit, aller a 2.

Post-conditions :

– Succès : la création d’une nouvelle communauté.

– Échec : retour à la page d’accueil.

Scénario du Cas : Créer Post en communauté

Nom : Créer.

Acteur : Utilisateur.

But : ajouter un nouveau post dans la communauté.

Préconditions : l’utilisateur doit être déjà inscrit et déjà rejoint dans une communauté.

Scénario nominal :

1. L’utilisateur accède à la page Créer post de la communauté.

2. L’utilisateur saisit le contenu du post.
3. Le système vérifie le contenu du post.
4. L’utilisateur clique sur le bouton post.
5. Le système vérifie le rôle de la profile.
6. Le système publie le nouveau post.

Scénario alternatif :

26
Chapitre 2. Analyse et conception

– 3.le contenu du post est interdit, aller a 2.

– 5.l’utilisateur n’est pas autorisé à publier un post.

Post-conditions :

– Succès : la publication d’un nouveau post dans une la communauté.

– Échec : retour à la page d’accueil.

2.3.4 Les diagrammes d’ Activités

Le cas d’utilisation peut avoir plusieurs scénarios alternatifs. Il est alors difficile d’avoir une vision
de l’ensemble des actions, le diagramme d’activité est un moyen graphique pour donner cette vision
d’ensemble. Ce diagramme peut aider à y voir un peu plus clair à propos les fonctionnalités et les
activités qui peuvent être exécutés par l’application.

Et voici quelques-uns de nos diagrammes d’activités que nous avons utilisés dans notre projet :

27
Chapitre 2. Analyse et conception

Diagramme d’activité : Se connecter

Fig. 2.7 : Diagramme d’activité <Se connecter>

28
Chapitre 2. Analyse et conception

Diagramme d’activité : S’inscrire

Fig. 2.8 : Diagramme d’activité <S’inscrire>

29
Chapitre 2. Analyse et conception

Diagramme d’activité : Créer Post

Fig. 2.9 : Diagramme d’activité <Créer Post>

30
Chapitre 2. Analyse et conception

Diagramme d’activité : Aime un Post

Fig. 2.10 : Diagramme d’activité <Aime un Post>

31
Chapitre 2. Analyse et conception

Diagramme d’activité : Commenter un Post

Fig. 2.11 : Diagramme d’activité <Commenter un Post>

32
Chapitre 2. Analyse et conception

Diagramme d’activité : S’abonner à un profil

Fig. 2.12 : Diagramme d’activité <abonné à un profil >

33
Chapitre 2. Analyse et conception

Diagramme d’activité : Créer communauté

Fig. 2.13 : Diagramme d’activité <Créer communauté>

34
Chapitre 2. Analyse et conception

Diagramme d’activité : Créer Post en communauté

Fig. 2.14 : Diagramme d’activité <Créer Post en communauté>

35
Chapitre 2. Analyse et conception

2.3.5 Le diagramme de classe

2.3.5.1 Définition

Le diagramme de classes permet de représenter la relation entre les éléments de modélisation

statique comprenant les différentes entités du domaine d’application ainsi que les associations entre
elles. L’élaboration du diagramme de classe représente une étape essentielle dans le processus de
conception de la base de données.

D’après l’étude du système existant et des différents diagrammes de cas d’utilisation, nous avons
pu dégager les principales classes illustrées dans la figure ci-dessous pour avoir une vue plus claire
du système étudié. Ce diagramme de classes contient des attributs et des méthodes

Dans la page suivante, On représente le diagramme de classes pour notre système.

36
 Diagramme de classes

<<Trait>>
Video Storable
+ id_video:int + extension:string 1
+ videoable_type:string Image
+ mime:string
+ videoable_id:int + size:int + id_image:int
+ video_width:int + sha256:string + imageable_type:string
+ video_height:int + imageable_id:int
+ seconds:int + filePath(): string + image_width:int
+ videoable():Comment|Post + url():string + image_height:int
0..*
+ imageable():Comment|Post|Profile
Has Videos 0..*

1 Has Images
<<Trait>>
1
Videoable
<<Trait>>
+ videos(): Video[] Imageable
+ images(): Image[]

Post
+ id_post:int <<Trait>>
+ title:string Likeable
+ post_body:text + likes(): Like[]
+ pageable_type:string
+ pageable_id: int 1
+ post_created_at:timestamp
+ post_updated_at:timestamp Comment
+ post_deleted_at:timestamp
+ id_comment:int
+ pageable():Community|Profile + comment_body:text
+ author(): Profile + commentable_type:string
0..* + comment_created_at:timestamp
0..* Has Likes
+ comment_updated_at:timestamp
0..*
+ comment_deleted_at:timestamp
Has Comments + commentable():Community|Profile
+ author(): Profile
1 0..*

0..*
<<Trait>>
Commentable Like
+ comments(): + id_like:int
Comment[] + likeable_type:string
+ likeable_id:int
+ liked_at:timestamp

Has Comments + liker():Profile

To: Pageable + likeable():Comment|Post
Has Posts 0..*
To: Profile
To: Profile
Has Likes
To:Profile
To: Profile

37
 From: Like
From: Post From: Post From: Comment
From: Image

1
<<Interface>>
pageable
+
page():Profile|Community
0..* 0..*
Has Posts Has Posts
1 1 1 1 1
1
Profile
Community 0..*
+ id_profile:int
+ id_community:int 0..* + username:string
+ members_count:int
+ active:bool
+ name:string
Member + profile_created_at:timestamp
+ comm_created_at:timestamp
+ community_id:int + profile_updated_at:timestamp
+ comm_updated_at:timestamp + profile_deleted_at:timestamp
+ comm_deleted_at:timestamp + profile_id:int
+ role_id:int + userProfile():User
+ owner():Profile + joined_at:timestamp + profileImage():Image
+ members(): Member[] + banned_at:timestamp + notify(notification:Notification):bool
+ posts(): Post[]
+ bann_duration:int + posts():Post[]
+ can(permission_id:int):bool + comments():Comment[]
+ is_banned():bool + replies():Comment[]
+ profile():Profile + createdCommunityPosts():Post[]
+ community(): Community + profilePagePosts():Post[]
+ posts():Post[] 1..* 1
+ role():Role
+ permisiions():Permission[]
+ comments():Comment[] Has Profiles Has Notifications
+ replies():Comment[]
0..*
0..* 0..*
1 Notification
Role User + id_notification:int
Has Role
+ id_user:int + not_data:string
+ id_role:int + not_read_at:timestamp
+ rolle_name:string - password:string
- remember_token:string + not_created_at:timestamp
+ permissions():Permission[] 1 # api_token:string + not_updated_at:timestamp
+ can(permission_id:int):bool + email:string + profile():Profile
+ members():Member[] Has Permissions
+ phone:string + read():void
0..* + email_verified_at:timestamp + is_read():bool
+ phone_verified_at:timestamp
+ user_created_at:timestamp
+ user_updated_at:timestamp
0..* + user_deleted_at:timestamp
Permission 1 1 UserSettings
0..* + settings():UserSettings
+ id:int + profiles(): Profile[] + settings: string[]
+ name:string + active_profile():Profile + user(): User
+ roles():Role[] + is_verified():bool
+ members():Member[] +email(message:string):bool

38
Chapitre 2. Analyse et conception

2.3.5.2 Règles de passage du diagramme de classes au modèle relationnel

Règle1 : Présence de la cardinalité (?..1) d’un côté de l’association

1. Chaque classe se transforme en une table.

2. Chaque attribut de classe se transforme en un champ de table .
3. L’identifiant de la classe qui est associée à la cardinalité (?..1) devient la clé étrangère de
l’autre classe.

Règle2 : Présence de (?..N) des deux côtés de l’association

1. Chaque classe se transforme en une table.

2. Chaque attribut de classe se transforme en un champ de table.
3. L’association se transforme en une table. Cette table a comme champs l’identifiant de
chacune des deux classes, plus d’éventuels autres attributs.

Règle3 : Présence d’une généralisation (Héritage)

1. Créer une table pour chaque sous type, chaque table se compose des attributs génériques
et d’attributs spécifiques.

En suivant ces règles de passage du diagramme de classes au modèle relationnel, nous obtenons
les tables de base de données suivantes :
La figure de la page suivante représente notre modèle relationnel

39
Chapitre 2. Analyse et conception

40
Chapitre 2. Analyse et conception

41
Chapitre 2. Analyse et conception

42
Chapitre 2. Analyse et conception

2.4 Conclusion

Dans ce chapitre, nous avons présenté t la modélisation de notre système. On a fait intervenir trois
types de diagrammes : diagramme des cas d’utilisation, le diagramme d’activités, et Le diagramme
de classes.

Le diagramme des cas d’utilisation et le diagramme d’activités nous ont permis d’établir les fonc-
tionnalités du système, et e diagramme de classes nous a permis de générer les tables de la base de
données.

Cette base théorique va nous guider dans la prochaine étape de développement qui sera décrite
dans le chapitre suivant.

43
Chapitre 3

Réalisation

44
Chapitre 3. Réalisation

3.1 Introduction

Ce chapitre présente la dernière partie de ce mémoire, il traite la phase qui a pour objectif l’im-
plémentation de notre travail. Nous débutons, tout d’abord, par la description des environnement et
outils de développement utilisées pour développer notre site. Ensuite nous mentionnons les étapes de
réalisation. Finalement nous donnons un aperçu sur le travail réalisé en termes de capture d’écran.

Rappelons que, le projet que nous décrivons à travers ce rapport concerne la réalisation d’une
plateforme web, c’est-à-dire un site web dynamique utilisable via Internet. Ce type d’application
repose principalement sur une architecture client-serveur. Dans notre cas, le client est le navigateur
Web, le serveur est un programme qui fonctionne sur un ordinateur distant.

Fig. 3.1 : L’architecture de la plateforme

Une requête Web typique est envoyée au serveur Web, qui exécute n’importe quel code PHP et les
traduit en HTML. Si les données externes sont requises, une requête de base de données (SQL) est
envoyée au serveur de base de données, qui exécute la requête SQL et renvoie les données au serveur
Web. Le serveur Web rassemble et envoie à la réponse Web au client en HTML.

3.2 L’environnement de développement

3.2.1 L’environnement Machine

• DELL Latitude E5440

– Type de système d’exploitation : Windows10 Pro 64bits

– Processeur : Intel(R) Core (TM) i5-4300U CPU @ 1.90GHz, 2501 Mhz, 2 Core(s), 4
Logical Processor(s)
– Mémoire Vive : 8Go.
– Disque Dur : 500Go HDD.

45
Chapitre 3. Réalisation

• HP

– Type de système d’exploitation : Windows10 Pro 64bits

– Processeur : Intel(R) Core (TM) i5-4210U CPU @ 2.9GHz, 3100 Mhz, 2 Core(s), 4 Logical
Processor(s)
– Mémoire Vive : 12Go.
– Disque Dur : 240Go SSD, 500Go HDD.

3.2.2 L’environnement Logiciel

Draw.io

Pour créer les diagrammes de UML, nous avons utilisé une plate-forme en ligne appelée draw.io.

Draw.io ou Diagrams.net est une plate-forme en ligne open source publiée en 2013, où les gens
peuvent créer des diagrammes. Ce site Web prend en charge la collaboration en temps réel lorsqu’il
est connecté à un compte Google. Il n’y a pas d’option pour un compte payant, mais vous pouvez
payer pour des serveurs. draw.io est entièrement en ligne et construit autour de Google Drive, qui
vous permet de créer des organigrammes, UML, relation d’entité, diagrammes de réseau, maquettes
et plus encore [4].

Fig. 3.2 : Interface de la plate-forme Draw.io.

46
Chapitre 3. Réalisation

DbVisualizer

DbVisualizer est un outil de base de données indépendant des fournisseurs de bases de données.
Il a été conçu pour être utilisé par les administrateurs de bases de données, les développeurs de
logiciels et les analystes de données, fournit une interface utilisateur simple et tout-en-un pour la
gestion des bases de données d’entreprise. Il fonctionne avec les systèmes d’exploitation de bureau
standard Windows, MacOS et Linux/Unix [3].

Visual Studio Code

Visual Studio Code est un éditeur de code multiplateforme édité par Microsoft. Cet outil destiné
aux développeurs supporte plusieurs dizaines de langages de programmation comme le HTML, C++,
PHP, Javascript, CSS, etc. Visual Studio Code intègre plusieurs outils facilitant la saisie de code par
les développeurs comme la coloration syntaxique ou encore le système d’auto-complétions IntelliSense.
En outre, l’outil permet aux développeurs de corriger leur code et de gérer les différentes versions de
leurs fichiers de travail puisqu’un module de débogage est aussi de la partie [13].

Fig. 3.3 : Interface de Visual Studio Code.

47
Chapitre 3. Réalisation

XAMPP

XAMPP signifie Cross-Platform (X), Apache (A), MySQL (M), PHP (P) et Perl (P).
C’est un ensemble de logiciels permettant de mettre en place facilement un serveur Web et un
serveur FTP. Il s’agit d’une distribution de logiciels libres (X Apache MySQL Perl PHP) facile à
installer offrant une bonne souplesse d’utilisation permettent l’exploitation d’un serveur Apache, de
l’SGBD MySQL et l’interpréteur PHP. XAMPP est également multiplate-forme, ce qui signifie qu’il
fonctionne aussi bien sur Linux, Mac et Windows [14].

Fig. 3.4 : Interface de XAMPP.

3.3 Technologies utilisées

Laravel PHP Framework

Laravel 1 est un framework web PHP open-source et gratuit, créé par Taylor Otwell et destiné au
développement d’applications web suivant l’architecture modèle – vue – contrôleur (MVC) et basé sur
Symfony. Certaines des fonctionnalités de Laravel sont un système d’empaquetage modulaire avec un
gestionnaire de dépendances dédié, différentes façons d’accéder aux bases de données relationnelles,
des utilitaires qui facilitent le déploiement et la maintenance des applications, et son orientation vers
le sucre syntaxique.

1
https://www.laravel.com/

48
Chapitre 3. Réalisation

Fig. 3.5 : Logo de Laravel PHP Framework.

MVC

• Model : L’élément central du motif. Il s’agit de la structure de données dynamique de l’ap-

plication, indépendante de l’interface utilisateur. Il gère directement les données, la logique et
les règles de l’application.

• View : est l’interface utilisateur, il demande au modèle de donner des informations pour qu’il
les présente à l’utilisateur ou de modifier ces informations

• Controller : celui qui gère l’interaction avec l’utilisateur. Le contrôleur interprète les entrées
de la souris et du clavier de l’utilisateur, informant le modèle et la vue à changer le cas échéant.

Fig. 3.6 : Architecture MVC

49
Chapitre 3. Réalisation

Symfony :

Symfony est un framework d’applications Web PHP open source, conçu pour les développeurs qui
ont besoin d’une boîte à outils simple et élégante pour créer des applications Web complètes. Il a été
développé par Fabien Potencier le 18 octobre 2005.

Composer :

Composer est un gestionnaire de packages au niveau de l’application pour le langage de program-

mation PHP qui fournit un format standard pour la gestion des dépendances du logiciel PHP et
des bibliothèques requises. Nous l’avons utilisé pour installer le framework Laravel via la ligne de
commande.

Fig. 3.7 : Logo de Composer.

MySQL Database

MYSQL 2 est un logiciel open source. C’est en fait un système de gestion de base de données
relationnelle (SGBDR). Ce SQL est synonyme de langage de requête structuré. C’est le SGBDR le
plus populaire et le mieux utilisé pour développer une variété d’applications logicielles basées sur le
web. Avec l’aide de MYSQL, il est possible d’organiser les informations, gérer, récupérer et mettre à
jour les données quand vous le souhaitez.

Fig. 3.8 : Logo de MySQL.

2
https://www.mysql.org/

50
Chapitre 3. Réalisation

TailWind CSS

Tailwind CSS 3 est un framework CSS ”utility-first” qui fournit un catalogue complet de classes et
d’outils CSS qui vous permet de commencer facilement à styliser votre site Web ou votre application.

Fig. 3.9 : Logo de TailWind CSS.

Javascript

JavaScript 4 est un langage de programmation de scripts, principalement utilisé dans les pages web
interactives. C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses
principales interfaces sont fournies par des objets qui ne sont pas des instances de Classes, mais qui
sont équipés de constructeurs permettant de générer leurs propriétés.

Fig. 3.10 : Logo de Javascript.

Vue.js

Vue.js 5 est un framework JavaScript frontal open source pour la création d’interfaces utilisateur
et d’applications à page unique. Il a été créé par Evan You et est maintenu par lui et le reste des
membres actifs de l’équipe principale.

Fig. 3.11 : Logo de Vue.js.

3
https://tailwindcss.com/
4
https://developer.mozilla.org/fr/docs/Web/JavaScript
5
https://vuejs.org/

51
Chapitre 3. Réalisation

NPM

NPM (abréviation à l’origine de Node Package Manager) est un gestionnaire de packages pour le
langage de programmation JavaScript. Nous l’avons utilisé pour installer vue js et tailwind css

Fig. 3.12 : Logo de NPM.

3.4 Interfaces Graphiques

Dans la partie qui suit, nous allons exposer les principales interfaces de notre système.

3.4.1 La Page « Login »

Si l’utilisateur a déjà un compte, il peut saisir ses identifiants et se connecter au site et bénéficier
des fonctionnalités du site.

Fig. 3.13 : Login Page

52
Chapitre 3. Réalisation

3.4.2 La Page « Register »

Si l’utilisateur n’a pas de compte, il peut saisir ses informations et créer un nouveau compte, après
avoir confirmé son inscription il peut bénéficier des fonctionnalités du site.

Fig. 3.14 : Register Page

3.4.3 La Page « Confirmation Code »

Après l’enregistrement de l’utilisateur, un code de confirmation sera envoyé à son numéro de

téléphone sous forme de message , ce code de confirmation confirmera son nouveau compte.

53
Chapitre 3. Réalisation

Fig. 3.15 : Confirmation Code Page

3.4.4 La Page « Profile »

Lorsque l’utilisateur sera autorisé à utiliser les fonctionnalités du site, il pourra voir sa page de
profil et éditer ses informations en détail.

Fig. 3.16 : Profile Page

54
Chapitre 3. Réalisation

3.4.5 La Page « Feed »

L’une des principales fonctionnalités du site que vous pourrez utiliser après avoir créé un compte
est de voir les publications du site et de réagir à ces publications.

Fig. 3.17 : Feed Page

3.4.6 La Page « Create Post »

L’autre fonctionnalité principale est de créer votre propre poste que vous pouvez le faire en tant
que texte uniquement ou vous pouvez l’ajouter une images ou des vidéos.

55
Chapitre 3. Réalisation

Fig. 3.18 : Create Post Page

3.4.7 La Page « Community »

La communauté est l’endroit où les utilisateurs ayant les mêmes intérêts peuvent se rencontrer. Il
peut être créé par un utilisateur, et les utilisateurs peuvent le rejoindre s’il était public ou demander
à le rejoindre s’il était privé.

Fig. 3.19 : Community Page

56
Chapitre 3. Réalisation

3.5 Conclusion

Dans ce chapitre, nous avons décrit l’aspect pratique de notre projet. Tout d’abord, nous avons
listé l’ensemble des moyens technologiques utilisés (matériels et logiciels). Puis, nous avons présenté
les différentes inttravers cette réalisation, nous avons pu atteindre les objectifs fixés lors de la phase
d’analyse des besoins. Nous avons aussi découvert plusieurs outils de développement. Nous avons
essayé de fournir un ensemble d’interfaces intuitives et simples à utiliser.

57
Conclusion générale

58
Conclusion générale

Conclusion générale

Les réseaux sociaux aujourd’hui sont des réseaux mondiaux prédominants du web. Ces réseaux
visent un large éventail d’utilisateurs de toutes tranches d’âges et de sexes et cela pour diverses
raisons tant personnelles que professionnelles.

L’avantage qu’offre ces réseaux est leur facilité d’utilisation pour publier des informations person-
nelles et communiquer avec aisance, même par des utilisateurs aux compétences techniques limitées.

Dans ce sens nous avons développé ce site qui est très simple afin que l’utilisateur puisse facilement
créer un compte, et utiliser les différentes applications offertes par le service ainsi que la possibilité
de partager facilement des informations avec des contacts sélectionnés ou le public et cela à des fins
personnelles.

Nous avons utilisé le langage UML pour modéliser notre système se basant sur une expression des
besoins en lien avec les objectifs du système, puis nous avons passé en revue quelques technologies
web et les principes des réseaux sociaux.

La réalisation d’un tel projet nous a permis d’approfondir nos connaissances acquises tous le long
de notre formation, et de pratiquer de nouvelles technologies, elle nous a ainsi permis de maitriser
le langage UML, et les outils de développement web. Bien évidemment, nous avons rencontré des
difficultés pendant ce projet. Ces difficultés vont de la modélisation à la programmation.

Enfin, ce travail nous a donné l’opportunité de toucher une partie de divers aspects du métier de
développeur et du concepteur.

59
Bibliographie

[1] G.Magdalena . et O.Jacek. “L’IMPACT DES RESEAUX SOCIAUX SUR LES COMPOR-
TEMENTS DES JEUNES CONSOMMATEURS”. In : Ecole Polytechnique de Lodz : Pologne.
[5] P.Roques et F.Vallée. UML en action. fr. 4e édition. 61, bd Saint-Germain 75240 Paris Cedex
05 : EYROLLES, fév. 2007.
[8] S.Prince. “Creation, distribution and social data gathering by an application on Facebook.”
In : Master in Science in Telecommunication Engineering Management (MASTEAM) : Poly-
technic University of Catalonia, avr. 2010.

60
Webographie

[2] Blogpost. url : http : / / profcmns2012 . blogspot . com / 2012 / 04 / advantages - and -
disadvantages-of-social.html (visité le 20/05/2021).
[3] DbVisualizer. url : https://www.dbvis.com/ (visité le 27/06/2021).
[4] Draw.io. url : https://app.diagrams.net/ (visité le 26/05/2021).
[6] Data Reportal. DIGITAL 2021: ALGERIA. url : https://datareportal.com/reports/
digital-2021-algeria?rq=algeria&fbclid=IwAR20-ShY3S46mnxXtj1G66-nVaQi54BtGC5R_
dUlrpdKScUQB2EsSvgJYNo (visité le 20/06/2021).
[7] Data Reportal. DIGITAL 2021: GLOBAL OVERVIEW REPORT. url : https://datareportal.
com/reports/digital-2021-global-overview-report?rq=DIGITAL%5C%202021%5C%3A%
5C%20GLOBA# (visité le 20/06/2021).
[9] STATISTA. Dépenses publicitaires sur les médias sociaux en pourcentage des dépenses en
publicité numérique dans le monde de 2013 à 2017. url : https : / / fr . statista . com /
statistiques/570838/part-des-depenses-publicitaires-sur-les-reseaux-sociaux-
au-niveau-mondial--2017/ (visité le 21/05/2021).
[10] STATISTA. Number of Facebook users in the United States form 2017 to 2025 (in millions).
url : https://www.statista.com/statistics/408971/number-of-us-facebook-users/
(visité le 21/05/2021).
[11] STATISTA. Number of LinkedIn users in the United States from 2018 to 2022(in millions).
url : https://www.statista.com/statistics/194471/number-of-linkedin-users-usa/
(visité le 21/05/2021).
[12] STATISTA. Number of social network users worldwide in 2020, by region. url : https :
/ / www . statista . com / statistics / 454772 / number - social - media - user - worldwide -
region/ (visité le 21/05/2021).
[13] Visual Studio Code. url : https://code.visualstudion.com/ (visité le 11/06/2021).
[14] XAMPP Local Serveur. url : https://xampp.org/ (visité le 21/06/2021).

61