Projet de Fin d’Etude

Application Web : Réseau Social comme Facebook

Encadré par : EL KASRI Chakir

Réaliser par : EL ASSALI Abdeljabbar
Diplôme Universitaire de Technologie | Génie Informatique Année universitaire 2016/2017
Remerciement
Avant tout, je remercie Allah de m’avoir guidée et éclaircie la bonne
voie, et Avant d’entamer ce rapport de projet de fin d’études, je tiens
à exprimer mon sincère gratitude envers tous ceux qui m’ont aidé ou
ont participé au bon déroulement de ce projet.

Tout d’abord, je tiens à remercier M. Chakir El Kasri mon encadreur

durant le déroulement du projet pour son aide à la mise en place de
ce modeste travail.

1
Dédicace
A MA MÈRE
Tu m’as donné la vie, la tendresse et le courage pour réussir. Tout ce
que je peux t’offrir ne pourra exprimer l’amour et la reconnaissance
que je te porte.
En témoignage, je t’offre ce modeste travail pour te remercier pour
tes sacrifices et pour l’affection dont tu m’as toujours entouré.
A MON PÈRE
L’épaule solide, l’œil attentif compréhensif et la personne la plus
digne de mon estime et de mon respect. Aucune dédicace ne pourrait
exprimer mes sentiments, que Dieu te préserve et te procure Santé et
longue vie.
A mes frères
A ma famille
A mes amis ...

2
TABLE DES MATIÈRES
I. Introduction Générale....................................................................................................................5
II. Description du projet......................................................................................................................6
1- Exigences fonctionnelles.............................................................................................................6
a. Inscription...............................................................................................................................6
b. Authentification......................................................................................................................6
c. Profil.......................................................................................................................................6
d. Messagerie.............................................................................................................................6
e. Recherche de membres..........................................................................................................6
f. Liste d'amis.............................................................................................................................6
g. Amitié.....................................................................................................................................6
h. Compte...................................................................................................................................7
2- Exigences non fonctionnelles......................................................................................................7
III. Analyse et Conception de l’application.......................................................................................8
1- Modèle Conceptuel de Données................................................................................................8
2- Modèle Logique de Données......................................................................................................9
IV. Les outils et langages utilisés....................................................................................................10
1- Langages et Frameworks..........................................................................................................10
2- Les outils de développement....................................................................................................13
a. XAMP....................................................................................................................................13
b. Sublime Text.........................................................................................................................13
V. Développement de l’application...................................................................................................15
1- Fonctions de base.....................................................................................................................15
a. Système de Remember me...................................................................................................15
b. Système d’alerte...................................................................................................................16
c. Système d’internationalisation.............................................................................................17
2- Authentification........................................................................................................................17
a. Inscription.............................................................................................................................18
b. Connexion.............................................................................................................................19
c. Déconnexion.........................................................................................................................20
3- Gérer le profil...........................................................................................................................20
a. Edition de profil....................................................................................................................21
b. Changer le mot de passe......................................................................................................22
4- Messagerie...............................................................................................................................22
a. Consulter les messages.........................................................................................................22
b. Envoyer un message.............................................................................................................23

3
 5- Interaction................................................................................................................................23
a. Actualité...............................................................................................................................24
b. Publier une publication.........................................................................................................24
c. Interagir avec une publication..............................................................................................25
6- Membres..................................................................................................................................26
a. Liste des utilisateurs.............................................................................................................26
b. Rechercher un utilisateur......................................................................................................26
7- Amitié.......................................................................................................................................27
a. Invitation d'amis...................................................................................................................27
b. Accepter/Refuser une demande d’amitié.............................................................................28
c. Supprimer l’amitié................................................................................................................28
VI. Conclusion................................................................................................................................30

4
I. Introduction Générale
Il est plutôt clair que le futur des adresses électroniques n’est pas très brillant ces
derniers temps, l’évolution et l’abondance des réseaux sociaux sur le web en est
un exemple flagrant, les utilisateurs du net n’ont désormais nul besoin
d’adresses électroniques comme moyen de communication puisque les réseaux
sociaux disposent de moyens plus raffinés et plus sophistiqués que jamais, la
preuve, des sociétés leaders au mondes commencent désormais à restreindre
l’utilisation des boîtes électroniques, laissant seuls les réseaux sociaux
professionnels en tant que moyen de communication.

En conséquence, les réseaux sociaux sont devenus de nos jours plus utilisés que
jamais, par exemple, Facebook est maintenant l’adresse internet la plus visitée
au Maroc - plus que Google -, cette utilisation excessive a poussé les
développeurs à imaginer des solutions de plus en plus variées et adaptées aux
besoins des utilisateurs selon l’utilisation souhaité.

Mon projet de fin d’études consiste au développement d’une application Web

faisant objet d’un réseau social par des fonctionnalités comme celles de
Facebook et Twitter, donc le but de ce projet n’est pas de réaliser une application
qui n’existe pas sur le web mais le but est de pratiquer mes compétences, mes
formations ainsi les langages et les Frameworks qui j’ai étudié et quoi représente
mes études dans les grands projets comme Facebook, Twitter, Instagram etc.

5
II. Description du projet
1- Exigences fonctionnelles
a. Inscription
Un utilisateur peut s’inscrire uniquement s’il a accédé à l’application via son
URL. Lors de cette inscription, il saisit des informations personnelles, crée son
profil afin de devenir membre.

b. Authentification
Afin d’accéder au site et pouvoir accéder aux différentes fonctionnalités
(recherche, messagerie…), tout membre doit s’authentifier.

c. Profil
Tout membre du site possède un profil, auquel il peut poster des publications
que ses amis ou autres membres pourront visualiser et aimer. De même, un
membre a la possibilité de consulter le journal des autres et de l’aimer.

d. Messagerie
Par le biais de sa messagerie, un membre peut consulter ses messages reçus et
envoyés. Il a également la possibilité de répondre à ses messages et peut aussi de
se notifier pour les nouveaux messages reçus d’une manière simultanément.

e. Recherche de membres
À tout moment, un membre peut rechercher simultanément d'autres membres
selon différents critères : username, nom, prénom, émail…, de manière à
l'ajouter dans sa liste d'amis.

f. Liste d'amis
Un membre possède une liste d’amis, qui est constituée de membres. Il gère
cette liste, puisque à tout moment il peut ajouter des membres dans celle-ci.

g. Amitié
Un membre a la possibilité d’envoyer une demande d’amitié a un autre membre.
Cette demande peut accepter ou refuser selon le choix de l’autre membre.

6
 h. Compte
Un membre a des droits sur ses informations personnelles. Il peut donc modifier
à tout moment ses données telles que son nom, prénom, ville, pays, biographie
et son mot de passe… mais aussi son image personnelle.

2- Exigences non fonctionnelles

Afin que le site donne envie aux membres de le faire connaître à leurs proches et
de lui être fidèle, il est important de répondre aux exigences de qualité suivantes:

 Ergonomie efficace
Partager des informations avec des membres, des amis doit être un plaisir. La
mise en page du site doit faciliter un maximum la démarche à l’aide d’une
présentation claire et intuitive.

 Interface graphique
Les différentes couleurs et choix typographiques doivent permettent à un
utilisateur de repérer les différentes fonctionnalités qui s’offrent à lui.

 Charte d’utilisation
Puisque les utilisateurs du site sont tous différents (sexe, langue…), une charte
d’utilisation doit être consultable par tout utilisateurs, afin qu’ils connaissent les
règles d’utilisation du site.

7
III. Analyse et Conception de l’application
Un modèle peut être défini comme étant une image de la réalité.

Toute réalité complexe doit être représentée afin d’être comprise et maîtrisée.

Dans cette partie, nous utilisons la méthode MERISE, cette méthode est basée
sur la séparation des données et des traitements à effectuer en plusieurs modèles
conceptuels et physiques, pour modéliser une base de données.

1- Modèle Conceptuel de Données

Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle
les données qui seront utilisées par le système d'information. Cette étape
consiste à déterminer les différentes entités et les relations entre elles dans une
base de données.

Figure 1 : Modèle Conceptuel de Données

8
 3- Modèle Logique de Données
Le modèle logique de données a pour but d’ajouter au modèle conceptuel de
données la notion d’organisation c’est à dire comment les données seront
organisées dans la base de données.

Figure 2 : Modèle Logique de Données

9
IV. Les outils et langages utilisés
Pour réaliser ce projet nous avons eu l'occasion d'utiliser quelques outils de
développement, des langages de programmation, Framework, et aussi quelques
logiciels de développement.

1- Langages et Frameworks
a. HTML
Afin d'être au standard du W3C sur la famille HTML, nous avons utilisé le
XHTML 1.0, plutôt qu'une mise en page en HTML difficile à manipuler. Le
contenu et la présentation seront développer de façon distincte.

b. CSS3
Afin de manipuler la présentation, nous avons utilisé des feuilles de style CSS.
Pour les raisons suivantes :

D’une part, il permet d’alléger le code source écrit en XHTML, puisque tout ce
qui est relatif à la présentation est géré dans un fichier séparé. Ce qui entraîne
donc un chargement plus rapide des pages, qui est après manipulé par la feuille
de style.

Et d’autre part, il permet de nous retrouver plus facilement dans notre code et
ainsi facilite les modifications à effectuer, puisqu’au lieu d’avoir à modifier
toutes les pages unes à unes, nous avons juste à modifier le fichier CSS.

Exemples d’utilisation :
- tous les choix graphiques
- pages différentes lors que l’utilisateur s’est authentifié ou non.

c. PHP
Pour le coté serveur, nous avons choisi le langage PHP, ceci pour plusieurs
raisons :

Tout d’abord, le PHP gère très bien les requêtes SQL. Ce qui est important pour
manipuler les résultats de requêtes SQL.

Mais aussi, le PHP possède beaucoup de fonctions utiles telle que la cryptologie,
fonctions de traitement de base de données, mathématique, etc…

10
Enfin, le PHP est un des langages coté serveur le plus utilisé, il existe une
grande communauté d’utilisateurs de PHP.

Exemples d’utilisation :

 Cryptage de mot de passe

 Traitement des différents formulaires

 Utilisation de variables de session

d. SQL
L'association PHP/MySQL est de plus en plus utilisée ces dernières années.
C'est pourquoi nous avons choisi le serveur de base de données MySQL qui
offre de grandes performances en flexibilité et montée en charge. Il intègre de
nombreuses fonctionnalités et assure une bonne sécurité des données.

e. AJAX
Nous avons intégré à notre projet la méthode développement AJAX dans
plusieurs de nos modules.

En effet, nous l'utilisons en grande partie pour ses requêtes asynchrones qui nous
permettent de faire et de manipuler les requêtes au serveur sans déranger la page
de l'utilisateur.

Exemple d’utilisation :

 Chargement des publications

 Recherche des utilisateurs

 Module de messagerie

11
L’image ci-dessous illustre l'utilisation d'Ajax dans notre application :

Figure 3 : Chargement des publications

f. DOM et JAVASCRIPT
Une fois la feuille XML générée, nous pouvons afficher et interagir
dynamiquement avec la page de l'utilisateur grâce au JavaScript et au DOM.

g. JQUERY
JQuery est un Framework Javascript sous licence libre qui permet de faciliter
des fonctionnalités communes de Javascript.

L'utilisation de cette bibliothèque permet de gagner du temps de développement

lors de l'interaction sur le code HTML d'une page web, l'AJAX ou la gestion des
évènements. JQuery possède par la même occasion l'avantage d'être utilisable
sur plusieurs navigateurs web (cf. Internet Explorer, Firefox, Chrome, Safari ou
Opera).

La bibliothèque jQuery possèdent les fonctionnalités suivantes :

- Manipulation du DOM (HTML ou CSS)

- Gestion des évènements (clic, survol, soumettre un formulaire...)

- AJAX

12
 - Effet d'animation.

4- Les outils de développement

a. XAMP

Figure 4 : Illustration l'utilisation de XAMPP

C’est un ensemble de logiciels permettant de mettre en place facilement un

serveur Web local, un serveur FTP et un serveur de messagerie électronique. Il
s'agit d'une distribution de logiciels libres (X (cross) Apache MariaDB Perl
PHP) offrant une bonne souplesse d'utilisation, réputée pour son installation
simple et rapide. Ainsi, il est à la portée d'un grand nombre de personnes
puisqu'il ne requiert pas de connaissances particulières et fonctionne, de plus,
sur les systèmes d'exploitation les plus répandus.

b. Sublime Text
Sublime Text est un éditeur de texte générique codé en C++ et Python,
disponible sur Windows, Mac et Linux. Le logiciel a été conçu tout d'abord
comme une extension pour Vim, riche en fonctionnalités.

13
 Figure 5 : Illustration l'utilisation de Sublime Text

Depuis la version 2.0, sortie le 26 juin 20122, l'éditeur prend en charge 44

langages de programmation majeurs, tandis que des plugins sont souvent
disponibles pour les langages plus rares.

14
V. Développement de l’application
Pour mieux comprendre la fonctionnalité de notre application sous cette
plateforme nous allons décrire on détail le fonctionnement de l’interface
graphique à l’aide des images capturées.

1- Fonctions de base
J’ai nommé fonctions de base certaines principales fonctionnalités de notre
application, ils sont réalisés pour rendre l’application unique, plus avancé et plus
claire.

a. Système de Remember me

Figure 6 : Premier lancement de l'application

La figure ci-dessus correspond à la vue du premier lancement de l'application.

D'abord l'utilisateur doit s'authentifier sur le serveur web pour pouvoir utiliser
l'application. Une fois connecté, il peut configurer les paramètres généraux du
compte ainsi qu’il peut accéder à chaque fonctionnalité de l'application grâce
aux différents onglets ci-après :

15
Garder une session active ça veut dire que l'utilisateur ne déconnecté pas de son
compte quand il ferme le navigateur, alors il peut garder son session active
jusqu’à il déconnecté de son compte utilisant le bouton de déconnexion.

Deux moyennes de stockage dans un navigateur :

Session : le système authentification créé une session dont la durée de vie est
soit limitée dans le temps, elle dépend à la durée de vie de la fenêtre du
navigateur. Ainsi la fermeture du navigateur arrête la session.

Cookies : sont de petits fichiers texte permettant sauvegarder des informations

personnelles sur vous. Ils peuvent y mémoriser votre mot d'utilisateur et mot de
passe pour éviter de redemander ultérieurement.

Alors si l’utilisateur veut activer ce service, il suffit de cocher la checkBox de

garder ma session active.

c. Système d’alerte

Figure 7 : Illustration Système d'alerte

Cette application est basée sur la technique d’Ajax, donc les requêtes sont
asynchrones sans actualiser la page, pour cette raison, nous avons créé un

16
système d'alerte qui nous permet de notifier l’utilisateur après un traitement sois
par succès, danger, ou avertissement.

d. Système d’internationalisation

Figure 8 : Illustration système d'internationalisation

Pour faciliter l’utilisation de cette application et la rendre disponible dans

différentes langues, nous avons ajouté un système d'internationalisation qui nous
permet d'adapter notre application à trois langues -Arabe, Français et Anglais.

1- Authentification
Le système d’authentification est la composante principale de notre application,
qui permet à l’utilisateur de s’inscrire, connexion et de déconnexion.

17
 Ceux deus champs sont qui nous permet
de se connecter à notre propre compte Ce lien est réservé à la création d’un
nouveau compte après remplir les
champs dans la page Singup

Figure 9 : La page d'authentification

a. Inscription
Lors de la première utilisation, l'utilisateur doit remplir les champs ci-dessous
afin d'enregistrer ses informations qui seront stockées dans la base de données.
Ainsi, le choix de cocher ou décocher la case de Garder ma session active se fait
en cliquant dessus pour garder la session connectée lorsqu'on ferme le
navigateur.

Cette interface d’inscription qui nous permet de crée un nouveau compte, il faut
remplir tous les champs et choisir un unique Nom d’utilisateur même c’est pour
l’Adresse e-mail, et de cocher la check box pour garder votre session active ou
non si vous n’avez pas besoin de ça, et en fin de cliquer sur Inscription pour
enregistrer votre compte, avant un lien d’activation va être envoyé à votre boite
d’émail pour activer votre compte.

18
 Figure 10 : La page d'inscription

e. Connexion
Pour se connecter l'utilisateur doit saisir leur nom d'utilisateur et leur mot de
passe, et de cocher ou décocher la Checkbox s’il veut de garder son session
active ou non.

Figure 11 : La page de connexion

19
 f. Déconnexion
Pour vous déconnecter cliquer sur la liste déroulante dans le coin supérieur
droite de l'application puis sélectionner déconnexion comme l'illustre l'image ci-
dessous.

Figure 12 : Illustre comment déconnecté

2- Gérer le profil
Une fois l’utilisateur est connecté, il peut accéder à chaque fonctionnalité de
l'application, il peut modifier les paramètres de connexion, le mot de passe, le
mot d'utilisateur, gérer le profil, publier des publications, aimer des publications,
messagerie etc…

20
 Figure 13 : La page de profil

a. Edition de profil
L'onglet ''Editer mon profil'' permet de modifier les informations personnelles
après la validation.

Figure 14 : Edition de profil

21
 g. Changer le mot de passe
L'onglet ''Changer mot de passe'' permet à l'utilisateur de modifier son mot de
passe, Lorsque vous lancez la page de changement de mot de passe, il vous sera
généralement demandé d'entrer votre ancien mot de passe, avec un nouveau mot
de passe à saisir deux fois puis valider en cliquant sur changer mon mot de
passe.

Figure 15 : Changement de mot de passe

3- Messagerie
a. Consulter les messages
L’utilisateur peut consulter ses messages de voir ses derniers discutions avec ses
amis, et aussi il peut répondre à ses messages.

22
 Figure 16 : Consultation des messages

h. Envoyer un message
L’utilisateur peut envoyer un message mais seulement à ses amis qui sont dans
sa liste d’amis.

Figure 17 : Envoyer des messages

4- Interaction
a. Actualité

23
La page d’accueil composé par les publications de l’utilisateur connecté et les
publications de ses amis.

Figure 18 : Fil d'actualité

i. Publier une publication

Pour publier une publication il suffit de saisir votre contenu de la publication
dans le champ de texte et cliquer sur Publier ou Post, Vous avez aussi la
possibilité de choisir la confidentialité de votre publication.

24
 Figure 19 : Publier une publication

j. Interagir avec une publication

Donc l’utilisateur a la possibilité d’aimer, partager, et de commenter une
publication.

Pour commenter il suffit tout simplement de cliquer sur l’icône de commentaire

et après l’écriture de commentaire et de le publier.

Si vous avez cliqué sur l’icône de partage, Alors la publication va être publier
sur votre journal.

25
 Figure 20 : Interagir avec une publication

5- Membres
a. Liste des utilisateurs
La liste des utilisateurs nous permet de consulter tous les utilisateurs de société,
donc nous pouvons d’envoyer des invitations aussi des messages à toutes les
personnes et de voir leur journal.

Figure 21 : Liste des utilisateurs

k. Rechercher un utilisateur

26
Avec cette fonctionnalité vous pouvez rechercher une personne sur la société s’il
a inscrit, et l’ajouter comme ami, la recherche suffit selon le nom, prénom,
l’émail, la ville, et le pays.

Figure 22 : Rechercher un utilisateur

6- Amitié
a. Invitation d'amis
Pour ajouter une personne, allez dans la page profil, ensuite cliquez sur le
bouton Ajouter comme ami.

27
 Figure 23 : Invitation d'amis

l. Accepter/Refuser une demande d’amitié

Si vous avez reçu une demande d’amitié d’un membre quelconque, donc vous
avez le choix sois d’accepter ou de refuser cette demande, comme vous pouvez
recevoir les demandes d’amitiés simultanément par la technique d’Ajax.

Figure 24 : Accepter/Refuser une demande d’amitié

m. Supprimer l’amitié

28
Pour supprimer l’amitié d’une personne, vous pouvez tout simplement de
cliquer sur le bouton Supprimer l’amitié.

Figure 25 : Supprimer l’amitié

29
VI. Conclusion
Au bout de notre cursus en DUT, nous avons été chargés de réaliser un
projet de fin d'études. Notre sujet a été la réalisation d’une application
Web d’un Réseau Social qui ressemble au Facebook. Le cycle projet a
été divisé en quatre étapes comme suit : l'analyse des certaines
fonctionnalités du Facebook, la modélisation de la base de données
utilisée, l'étude des outils proposés et leurs capacités pour qu’on
puisse passer à la dernière phase qui est la réalisation.

Par ailleurs ce projet était pour nous une occasion pour acquérir des
connaissances techniques sur plusieurs outils et langages de
développement web et les utiliser pour réaliser un travail.

Enfin, étant notre premier projet nous avons rencontré plusieurs

difficultés au cours de la réalisation mais ça nous n’ont pas empêché
d’avance et d’améliorer nos techniques de travail et ce qui nous a
donné toujours la force de continuer c’est que le choix du sujet n’était
pas arbitraire, la réalisation de cette application est une volonté avant
qu’elle soit un sujet de projet de fin d’étude.

30