app chat rapport

UNIVERSITE IBN ZOHR
ECOLE S UPERIEURE DE TECHNOLOGIE
Département Informatique
Option Génie Informatique
Rapport de Projet de Fin
d’Etude
La Conception et Réalisation d’une
Application web de Chat en
PHP -MySQL
Réalisé par :
Mlle .Safae Ait Mouna
Ms. Mohamed Oumeslakht
Mlle. Naima Elkouraichi
Encadré par :
Prof. Mourad Gridach
Année universitaire 2014-2015
Ecole Supérieure de Technologie d’Agadir BP 33/ AGADIR
Tél: 05 28 23 85 83
Fax: 05 28 22 78 24
Site web www.esta.ac.ma
La
Remerciement
Les mots ne peuvent pas exprimer notre gratitude pour Mr Mourad
GRIDACH notre encadrant et professeur qui nous a accompagner pendant tout le
chemin vers l’accomplissement de ce projet de fin d’étude qui par son expérience
et son enthousiasme, nous a donné beaucoup de propositions tout au long de ce
projet, ses conseils et ses commentaires précieux nous ont permis de surmonter
nos difficultés et de progresser dans notre projet. Nous sommes très révérés d’avoir
la chance de travailler avec un tel encadrant.
Egalement, nous remercions
Monsieur Driss MAMASS, notre directeur de
l’Ecole Supérieure de Technologie d’Agadir.
Ainsi, nous adressons nos extrêmes gratitudes au
jury de notre soutenance de
projet de fin d'étude, qui a accepté d’évaluer notre travail.
En fin
nous tenons à remercier toute personne qui a contribué de
près ou du loin à la réalisation de ce projet.
4
Dédicace
A nos chers parents
Pour leur soutien à la fois moral et matériel durant toute notre
carrière et surtout durant les moments difficiles.
A tous nos amis
Pour leur soutien et leur encouragement et a tous notre collègues
de les promotions 2013-2014 et 2014-2015
A tous nos proches
Pour leur aide afin de réaliser ce travail
Et à tous ceux que nous aimons et qui nous aiment
5
Table d’abréviation
Abréviation
HTML
CSS
Signification
hypertext Markup Language
Cascading Style Sheets
PHP
Hypertext Preprocessor
SQL
Structured Query Language
UML
Unified Modeling Language
XML
Extensible Markup Language
OMG
Object Management Group
6
Table des figures
Figures
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7
Figure 8
Figure 9
Figure 10
Figure 11
Figure 12
Figure 13
Figure 14
Figure 15
Figure 16
Figure 17
Figure 18
Figure 19
Figure 20
Figure 21
Figure 22
Figure 23
Figure 24
Figure 25
Figure 26
Figure 27
Figure 28
Figure 29
Figure 30
Figure 31
Figure 32
Figure 33
Figure 34
Figure 35
Figure 36
Figure 37
Figure 38
Figure 39
Figure 40
Figure 41
Figure 42
Figure 43
Titre
l’architecture Client/serveur.
Exemple de serveur.
Diagramme de classe.
Diagramme des cas d’utilisation.
Diagramme de séquence « Inscription ».
Diagramme de séquence « Se connecter».
Diagramme de séquence « Gérer les messages » .
Diagramme de séquence « Modifier le compte ».
Diagramme de séquence « Ajouter un utilisateur » .
Diagramme de séquence « Supprimer un utilisateur ».
Diagramme de séquence «Gérer une publication ».
Diagramme de séquence « Se déconnecter ».
La base de donnée de l’application.
Interface d’accueil.
Interface d’inscription.
Message d’erreur 1.
Message d’erreur 2.
Message d’erreur 3.
Message d’erreur 4.
Interface d’identification.
Message d’erreur 5.
Mot de passe oublié 1.
Mot de passé oublié 2.
Interface de profil 1.
Interface de profil 2.
Zone utilisateur.
Zone recherche.
Interface de modification.
Message d’erreur 6.
Exemple de la recherche d’un utilisateur.
Nouveaux messages.
Nouvelles invitations.
Amis connectés.
Envoyer une invitation.
Supprimer un ami.
Zone publication.
Publication « vidéo ».
Publication « WORD ».
Publication « PDF ».
Publication « TXT ».
Publication « image ».
Publication « statut/texte ».
Exemple de conversation.
page
12
13
23
25
26
27
28
29
30
31
32
33
35
35
36
36
37
37
38
38
39
40
40
41
42
43
43
44
44
45
45
45
46
46
46
47
47
47
48
48
48
49
49
7
Table des matières
REMERCIEMENT ..................................................................................................................... 4
DEDICACE ................................................................................................................................. 5
TAB LE D’ABREVIATION ......................................................................................................... 6
TAB LE D ES FIGUR ES ................................................................................................................ 7
INTRODUCTION ......................................................................................................................... 9
CHAPITRE 1 : CONTEXTE GENERAL DU PROJET ........................................................................... 11
PROBLEMATIQUE ET ARCHITECTURE CLIENT/SERVEUR:..................................12
1. Problématique : ...........................................................................................................12
2. Architecture Client/serveur : ........................................................................................ 12
3. Cahier De Charge : ....................................................................................................... 14
LES OUTILES ET LES LANGAGES UTILISES :..................................................... 17
1. Les langages de programmation :................................................................................. 17
2. Les outils utilisés ........................................................................................................... 18
CHAPITRE 2 : Analyse et Conception ........................................................................................……. 22
MODELESATION................................................................................................................23
1 Description de classes.................................................................................................. 23
2 Diagrammes de cas d’utilisation.....................................................................................25
3 Diagramme de séquences...............................................................................................26
CHAPITRE 3 : MISE EN ŒUVRE ...........................................................................................34
PROTOTYPE DE L’APPLICATION……………………………………………………………35
1 Base de donnée .........................................................................................................................35
2 Page d’accueil …………………………………………………………………………………………………………………35
3 Profil ……………………………………………………………………………………………………………………………….40
CONCLUSION…………………………………………………………………………………...50
8
Introduction
Dans le cadre de notre formation à l’Ecole Supérieure de Technologie
nous sommes amenés à réaliser un projet de fin d’étude pour avoir notre
diplôme universitaire de technologie, acquis après deux ans d’étude.
Notre projet de fin d’étude consiste à réaliser une application Web de
chat multi-client, cette dernière doit
permettre à un client de
communiquer ou plutôt d’échanger des messages avec un autre client
connecté sur le web, en se basant sur une interface graphique conçu à
l’aide du langage orienté objet PHP. Pour assurer la communication entre
les deux clients nous allons utiliser les sockets, toujours sous le langage
PHP.
Selon le sommaire présenté ci-dessus, ce rapport s’oriente
autour de trois axes principaux :
 Le premier chapitre explicite une représentation de notre
projet et comporte une analyse des différents outils et
langages utilisés.
 Le deuxième chapitre est consacré à la conception du projet,
nous y introduisons, en premier lieu, une présentation du
diagramme des cas d’utilisations, de séquences et le
diagramme des classes. Par la suite nous nous concentrons
sur les étapes principales du fonctionnement de l’application et
l’analyse des méthodes de transformation.
 Le troisième chapitre détaille les tâches des composantes
importantes de l’application ainsi que la description de chaque
interface utilisée.
Enfin une conclusion générale, qui dresse un bilan global sur ce
travail
9
CHAPITRE 1
Contexte
Générale
Du
Projet
10
Problématique et Architecture
Client/serveur
1-Problématique :
Notre projet consiste à réaliser une application Web de Chat comporte un
serveur permet à tout nouveau client de se connecter directement aux autres
clients. L’application doit également permettre l’échange des messages en
utilisant des interfaces graphiques pour la gestion de la communication sous un
réseau locale.
Alors notre problématique c’est comment réaliser cette application web de
chat multi-client qui permettra à un utilisateur de chatter avec un autre ?
2-L’architecture Client/serveur :
Après une étude approfondie de la problématique, on a conclu qu’on va
travailler avec l’architecture Client/serveur. Cette dernière est l’Architecture de
réseau logicielle dans laquelle les programmes d'application, dits clients, font
appel, dans le cadre d'un réseau, à des services génériques distants fournis par
des ordinateurs appelés serveurs.
2-1Fonctionnement d’un système client/serveur :
Figure 1 :l’architecture Client/serveur.
Le client
Dans un réseau informatique, un client est le logiciel qui envoie des
demandes à un serveur. Il peut s'agir d'un logiciel manipulé par une
personne, ou d'un agent logiciel automatique ou semi-automatique.
11
Le serveur
Un serveur informatique est un dispositif informatique matériel ou
logiciel qui offre des services, à différents clients. Les services les plus
courants sont :
Figure 2 : Exemple de serveur.
l'accès aux informations du World Wide Web ;
le partage de fichiers ;
le courrier électronique ;
le partage d'imprimantes ;
le commerce électronique ;
le stockage en base de données ;
le jeu et la mise à disposition de logiciels applicatifs (optique software as a
service).
Le mot serveur ne désigne pas une taille d'ordinateur, mais un rôle joué par un
appareil sur un réseau informatique. Un serveur peut être une petite boîte, un
micro-ordinateur, ou alors un mini-ordinateur, un mainframe voire une ferme de
calcul. La taille de l'appareil et sa puissance sera choisie en fonction de la
quantité de travail, qui dépend du nombre d'utilisateurs qui demandent des
services au même instant.
Un appareil serveur peut exécuter plusieurs logiciels serveurs en même temps et
servir pour de nombreux usagers en même temps.
Application client /serveur :
Une application client/serveur ou bien on peut dire la raison d’être un réseau
informatique, c’est :
 Une partie cliente : qui exécute des requêtes vers un serveur
 une partie serveur : qui traite les requêtes clientes et y répond
12
 un protocole applicatif : qui définit les échanges entre un client et un
serveur
 un accès via une API (interface de programmation) à la couche de
transport des messages.
Avantages de l’architecture client/serveur :
Le modèle client/serveur est particulièrement recommandé pour des réseaux
nécessitant un grand niveau de fiabilité, ses principaux atouts sont :
des ressources centralisées : étant donné que le serveur est au centre du
réseau, il peut gérer des ressources communes à tous les utilisateurs, comme par
exemple une base de données centralisée, afin d'éviter les problèmes de
redondance.
une meilleure sécurité: car le nombre de points d'entrée permettant l'accès
aux données est moins important.
un réseau évolutif : grâce à cette architecture il est possible de supprimer ou
rajouter des clients sans perturber le fonctionnement du réseau et sans
modification majeure.
Inconvénients du modèle client/serveur :
L'architecture client/serveur a tout de même quelques lacunes parmi lesquelles :
un coût élevé dû à la technicité du serveur
un maillon faible: le serveur est le seul maillon faible du réseau
client/serveur, étant donné que tout le réseau est architecturé autour de lui !
Heureusement, le serveur a une grande tolérance aux pannes.
3- Cahier de charge :
3-1Description de l’application :
L'objectif de ce projet est de concevoir une application de chat multi-client, à
l'aide des outils techniques avancés. Cette application permettra à un utilisateur
de créer un compte ou de se loguer à l'aide d'un compte existant, puis de discuter
avec les autres utilisateurs depuis un ordinateur vers un autre ordinateur sous un
réseau local.
3-2Les étapes suivies :
La première des choses à faire est d’aller allonger la problématique, pour
pouvoir faire une analyse complète du sujet.
Puis faire l’étude nécessaire afin de désigner les langages avec lesquels nous
allons travailler.
13
Après avoir indiqué les langages avec lesquels nous allons élaborer Ce travail,
nous allons indiquer les outils techniques qui vont nous aider à bien réaliser ce
projet.
Enfin nous dresserons les résultats que nous avons obtenus après l’analyse et
la conception de la problématique, et la réalisation du projet.
3-3Fonctionnalités :
Cette application doit permettre à un client d’envoyer et de recevoir des
messages d’un autre client.
Elle doit aussi permettre d’envoyer des images.
Permettre de chatter depuis un ordinateur vers un autre ordinateur.
Elle doit permettre à l’utilisateur la gestion de texte envoyer, c’est-à-dire
changer la couleur de texte, et contrôler sa taille.
3-4Le besoin fonctionnel :
Serveur :
 Le serveur central gère tous les interactions entre les clients (envoi
de messages, des fichiers, d’images).
 Il a sa propre interface qui affiche tous les clients avec leurs statuts
(connecté, déconnecté).
 le serveur central va tester est ce que le compte de client est déjà
crée
 Aussi le serveur va tester le mot de passe de client si il est correct
ou non
 charge de vérifier que les connexions clientes sont toujours actives
Client:
 Les utilisateurs doivent être connectés sur le même réseau.
 chaque utilisateur possède un identifiant unique, et le protéger à
l'aide d'un mot de passe.
 Chaque client doit avoir une interface.
 Cette interface doit contenir un espace pour l’inscrire et créer un
nouveau profile et une autre pour connecter au application
 Cette interface doit contenir un espace pour écrire le message, un
autre pour l’affichage des messages envoyé ou reçu, et une barre
qui contient tous les utilisateurs connectés.
14
 L’interface-ordinateur contient un bouton qui affiche des
émoticônes que le client peut envoyer, et un bouton de parcours des
fichiers pour envoyer des images.
 Pas de limitation au niveau du nombre de clients pouvant se
connecter simultanément
 Un client peut changer son mot de passe en cas d’oubli.
 Un client peut modifier son compte (nom, photo de profil, Mot de
passe...)
 le client peut consulter son historique de conversation ainsi que la
date et l’heure de cette dernière
 Un même compte ne peut être ouvert sur deux machines.
 L’échange et le partage de fichiers entres les clients
(Images, pdf, doc...)
3-5Les besoins non fonctionnels :
Notre application web de chat doit nécessairement assurer ces besoins d’après
l’architecture Client/serveur :
 La sécurité: l’application devra être hautement sécurisée, les informations
ne devront pas être accessibles à tout le monde, c'est-à-dire que cette
application web est accessible par un identifiant et un mot de passe attribué
à une personne physique.
 La performance : l’application devra être performante c'est-à-dire que le
système doit réagir dans un délai précis, quel que soit l’action de
l’utilisateur.
 La convivialité : l’application web doit être simple et facile à manipuler
même par des non experts.
 L’évolution : la possibilité de supprimer ou rajouter des clients sans
perturber le fonctionnement du réseau et sans modification majeure.
Les outils et langages utilisés
1-Les Outils utilisés :
15
NotePAdd++ :
Notepad++ est plus qu’un simple éditeur
de texte, il s’agit d’un outil destiné avant
tout aux développeurs, débutants comme
confirmés.
Notepad++ apporte une solution aux
problèmes
en
proposant
de
fonctionnalités supplémentaires :
 Coloration des symboles
 Chargement de fichiers de toute
taille
 Recherche et remplacement de texte
 Choix des polices d’affichage
Offrant la coloration syntaxique de plus de vingt
langages de programmation différents, de l’Ada au
XML en passant par les populaires ASP,
PHP,C++,java, JavaScript…..Etc.
WampServer :
WampServer est une plateforme de développement Web de type WAMP,
permettant de faire fonctionner localement (sans se connecter à un serveur
externe) des scripts PHP.
WampServer n'est pas en soi un logiciel, mais un environnement comprenant
deux serveurs (Apache et MySQL), un
interpréteur de script (PHP), ainsi que
phpMyAdmin pour l'administration Web des
bases MySQL. Il dispose d'une interface
d'administration permettant de gérer et
D’administrer ses serveurs au travers d'un tray
icon (icône près de l'horloge de Windows).
PowerAMC :
PowerAMC est un logiciel de modélisation, il permet de modéliser les
traitements informatiques et leurs bases de données associées. PowerAMC
Permet de réaliser tous les types de modèles informatiques. A not er qu'il
r este un des seuls qui permet de travailler avec la méthode MERISE
16
Adobe Photoshop Cs6 :
Photoshop est un logiciel de retouche, de traitement et de dessin assisté par
ordinateur édité par Adobe. Il est principalement utilisé pour le traitement de
photographies numériques, mais sert également à la création des images.
Photoshop CS6 avec 62 % de nouvelles
fonctions par rapport à la version
Précédente (la CS5). CS6 bénéficie aussi
d'un nouveau moteur graphique : le
Mercury Engine. Ce dernier se veut
capable d'exploiter les capacités de calcul
des cartes graphiques.
2-Les
Langages
Programmation :
de
HTML5 :
L'HTML est un langage informatique utilisé
sur l'internet. Ce langage est utilisé pour
créer des pages web. L'acronyme signifie
Hyper Text Markup Language, ce qui
signifie en français "langage de balisage
d'hypertexte". Cette signification porte bien son nom puisqu'effectivement ce
langage permet de Réaliser de l'hypertexte à base d'une structure de balisage.
CSS3 :
“Cascading Style Sheets “ en anglais et
“les feuilles de styles“ au français sont un
langage qui permet de gérer la présentation
d'une page Web. Les styles permettent de
définir des règles appliquées à un ou
plusieurs documents HTML. Ces règles
17
portent sur le positionnement des éléments, l'alignement, les polices de
caractères, les couleurs, les marges et espacements, les bordures, les images de
fond, etc. Le but de CSS est séparer la structure d'un document HTML et sa
Présentation.
JavaScript :
Le JavaScript est un langage de script
incorporé dans un document HTML.
Historiquement il s’agit même du
premier langage de script pour le web.
C’est un langage de programmation
qui
permet
d’apporter
des
améliorations au
Langage de programmation HTML en
permettent d’exécuter des commandes du Coté client, c’est-à-dire au niveau du
navigateur et non du serveur web.
PHP :
Le langage PHP est un langage de
programmation web côté serveur, ce qui
veut dire que c'est le serveur qui va
interpréter le code PHP (langage de
scripts) et Générer du code HTML qui
pourra être interprété par votre
navigateur.
Le
PHP
permet
d'ajouter
des
fonctionnalités de plus en plus
complexes, d'avoir des sites dynamiques,
de pouvoir gérer une administration de boutique en ligne, de modifier un blog,
de créer des réseaux sociaux...
SQL :
SQL est un langage informatique
normalisé servant à exploiter des bases
de données relationnelles. La partie
langage de manipulation des données de
SQL permet de rechercher, d'ajouter, de
modifier ou de supprimer des données
dans les bases de données relationnelles.
18
Les instructions SQL s'écrivent d'une manière qui ressemble à celle de phrases
Ordinaires en anglais. Cette ressemblance voulue vise à faciliter l'apprentissage
et la lecture.
UML :
UML C’est un langage de modélisation objet qui permet de représenter les
applications informatiques sous forme de
diagramme. Ce langage est défini par
l’OMG dans le but de définir une notation
standard pour représenter des applications
qui sont réalisées à l’aide des objets.
L’utilisation d’un langage de modélisation
UML permet d’améliorer progressivement
les méthodes de travail, et préserve les
modes de fonctionnement. On utilise des
diagrammes pour faciliter la compréhension
du fonctionnement des applications.
jQuery :
jQuery est
une bibliothèque JavaScript libre et multiplate forme créée pour faciliter l'écriture
de scripts côté client dans le code HTML.
Des pages web jQuery prend beaucoup de
tâches courantes qui nécessitent de
nombreuses lignes de code JavaScript à
accomplir, et les enveloppe dans les
méthodes que vous pouvez appeler avec une seule ligne de code.
XML :
.Le but de XML est de faciliter le
traitement automatisé de documents et
de données. L'idée est de pouvoir
structurer les informations de telle
manière qu'elles puissent être à la fois
lues par des personnes sur le web et traitées par des applications qui exploiteront
de
manière
automatisée
les
informations
en
question.
19
L'objectif majeur de XML donc est d'étendre les fonctionnalités de HTML afin
de
faciliter
les
échanges
de
documents
sur
le
WEB.
Ces évolutions comprennent :
•la définition libre de nouvelles balises et de nouveaux attributs,
•
le
support
de
structure
complexe
de
documents,
• la vérification de la structure d'un document par rapport à une grammaire type
définie dans un document appelé DTD (Document Type Définition),
• la séparation entre le contenu (document XML) et la mise en page.
XML peut donc être défini comme étant un langage de description et d'échanges
de données structurés.
CHAPITRE 2
20
Analyse
Et
Conception
Modélisation UML :
Comme tout projet informatique il est souvent très recommandé d'établir une
bonne démarche de gestion de projet, C'est pourquoi dans cette partie on va
attaquer la partie conception.
1-diagramme de classe :
Le diagramme de classe constitue un élément très important de la modélisation.
Il permet de définir quelles seront les composantes du système final. Il permet
21
aussi, dans le cas de travaux réalisés en groupe (ce qui est pratiquement toujours
le cas dans les milieux industriels), de séparer les composantes de manière à
pouvoir répartir le travail de développement entre les membres du groupe.
Enfin il permet de construire le système de manière correcte.
Figure 3 : Diagramme de Classe
Ce diagramme représente les relations entre les différentes classes qui gèrent le
fonctionnement de l’application.
Utilisateur : Comporte toutes les informations d’utilisateur inscrit à
l’application.
Message : Comporte toutes les informations qui concernent les messages
Echangés entre deux utilisateurs connectés
Article : Cette table contient les informations a propos des articles publiés par
un utilisateur connecté.
Invitation: cette table comporte les invitations d'amitié envoyées par un
émetteur à un récepteur.
22
Commentaire : Cette table contient les informations a propos des articles
publiés par un utilisateur connecté.
Aimer : Un panneau qui contient des informations qui concerne une admiration
d’un utilisateur par une publication d’un autre.
2-diagramme de cas d’utilisation :
23
Figure 4 : Diagramme de cas d’utilisation.
Après une étude détaillée de la problématique, nous sommes sorties avec le
digramme de cas d’utilisation ci-dessus (figure 1), et qui représente l’ensemble
de fonctionnalités qu’un utilisateur pourra effectuer sur le système. L'utilisateur
peut :
 Créer son compte (profil), d’après l’inscription (saisir tous les
informations obligatoires)
 Se connecter a l’application.
 Gestion des messages (envoyer, recevoir).
 Ajouter ou supprimer un ami(e).
 Ajouter une publication (texte, vidéo, image, doc)
24
 Se déconnecter de l’application
2-Diagramme de Séquence :
Le diagramme de séquence fait partie des diagrammes comportementaux
(dynamique) et plus précisément des diagrammes d’interactions. Il permet de
représenter des échanges entre les différents objets et acteurs du système en
fonction du temps.
2-1L’inscription à l’application :
Figure 5 : Diagramme de séquence « Inscription »
L’inscription consiste à renseigner des informations telles que le nom,
prénom, adresse e-mail, mot de passe, pays…etc. Ces informations
seront vérifiées avant d’être validées afin de remplir tous les champs
obligatoires et aussi d’éviter que plusieurs utilisateur s’inscrire avec le
même nom et prénom. Cette étape permet à un utilisateur de s’abonner
à l’application. Le schéma ci-dessus montre comment se déroule cette
25
étape d’inscription.
2-2 Se connecter a l’application :
Figure 6 : Diagramme de séquence « Se connecter »
Se Connecter est l’étape où l’utilisateur est amené à saisir son adresse et son mot
de passe pour rediriger vers son profil, l’application fera la vérification de
l’identificateur et du mot de passe de l'utilisateur s’ils sont corrects ou non.
Nous avons précisé aussi dans ce diagramme le cas si l’utilisateur a oublié son
mot de passe.
2-3Gestion des messages :
26
Figure 7 : Diagramme de séquence « Gérer des messages »
Ce diagramme de séquence présente la fonctionnalité qui permet à l’utilisateur
de gérer ses messages ainsi le déroulement de l’envoi et le reçoit d’un message
quelque soit son type (texte, image, vidéo).
2-4La modification :
27
Figure 8 : Diagramme de séquence « Modifier le compte »
Une fois connecté, l'utilisateur peut modifier ses informations personnelles
(nom, prénom, adresse e-mail, pays,…), ainsi qu’ajouter une image a son profil
et avoir un nouveau.
2-5 Envoyer une invitation :
28
Figure 9 : Diagramme de séquence « Ajouter un utilisateur »
L’utilisateur envoie une demande d’amitié à un autre utilisateur préinscrit dans
l’application. Le récepteur reçoit la demande, puis l’application d’émetteur
envoi une notification à l’application d’invité (application destinataire).
L’invité reçoit l’invitation c’est lui qu’a le droit d’accepte ou d’ignorer
l’invitation.
2-6 supprimer un ami :
29
Figure 10 : Diagramme de séquence «Supprimer un utilisateur »
Ce diagramme de séquence présente la fonctionnalité qui permet à l’utilisateur
de supprimer un autre utilisateur a partir de son liste des amis.
30
2-7 Publier :
Figure 11 : Diagramme de séquence «Gérer une publication »
Ce diagramme présente le fonctionnement de cas ou l’utilisateur publier un
article dans leur profil (texte, image, vidéo, document).
31
2-8 Se déconnecter :
Figure 12 : Diagramme de séquence «Se déconnecter »
Ce diagramme présente la dernière étape de cette application lors que
l’utilisateur demande de se déconnecter de l’application et la fermer.
32
CHAPITRE 3
Mise
En
Œuvre
33
Prototype de l’application
Dans cette partie du rapport nous allons présenter notre application, et on va
voire tous les fonctions possibles, et les operateurs implémentés qui peuvent être
effectué par l’utilisateur.
1-Création de la base de données:
Figure 13 : Base de données de l’application.
2-page d’accueil :
La figure ci-dessous Constitué de première interface qui réagir avec l'utilisateur,
elle est divisée en deux partie une pour l'inscription et l'autre pour connecter a
votre profile.
Figure 14 : Interface d’accueil.
34
2-1 L’inscription :
Figure 15 : Interface d’inscription.
L’utilisateur qui veut l’inscrire a l’application, il doit remplir tous les champs
pour valider son compte après qu’il a cliqué sur le bouton « Inscription ».
Les cas d’erreurs :
Si l’utilisateur n’a pas remplir tous les champs.
Figure 16 : Message d’erreur 1.
35
Si l’utilisateur veut s'inscrire à l'application utilisant une adresse
déjà utilisée par un autre utilisateur.
Figure 17 : Message d’erreur 2.
Si l'utilisateur a saisi le nom et le prénom d'une longueur de plus
que 25 caractères.
Figure 18 : Message d’erreur 3.
36
Si l'utilisateur n'a pas saisi le même mot lors de la confirmation du mot de
passe
Figure 19 : Message d’erreur 4.
2-2 Connecter :
Pour que le client puisse se
connecter a l’application, il
doit entrer son identificateur
(prénom Nom), et son mot de
passe corrects.
Figure 20 :Interface d’identification
37
Le cas d’erreur :
Si l’utilisateur entre à l'application utilisant un identificateur ou un
mot de passe incorrect
Figure 21 : Message d’erreur 5.
Si l’utilisateur a oubli son mot de passe, il doit cliquer sur mot de
passe oublié, et répondre au question de sécurité.
38
Figure 22 : mot de passe oublié 1.
Après que l’utilisateur a répondu au question, il peut changer son mot de
passe comme le suivant.
Figure 23 : mot de passe oublié 2.
3-page Profile :
3-1 Avant la modification :
Lorsqu’un utilisateur entre son adresse et mot de passe corrects à la première
fois sans modifier son compte, il arrive sur la page de son profil comme la figure
dissous.
39
Figure 24 : Interface de profil 1 .
3-2 Après la modification :
Apres que l’utilisateur a créer son profil il a le droit de le modifier insérer une
photo a son profil changer son nom ajouter des langues ajouter des amis…Etc.
Et cette interface se divise a plusieurs partie.
40
Figure 25 : Interface de profil 2 .
Zone utilisateur :
Contient l’image de profil, les informations personnelles ainsi que le nombre de
ses amis.
41
Figure 26 : zone utilisateur .
Zone Recherche :
Figure 27 : Zone recherche.
Dans cette zone il y’a :
un label fait la redirection vers l’accueil de compte.
Un label fait la redirection vers l’historique des messages.
Icône des paramètres pour modifier le profil
42
Figure 28 : Interface de modification.
On cas que l’utilisateur modifier le mot de passe et les deux ne sont pas
identique il s’affiche un message d’erreur comme cela :
Figure 29 : message d’erreur 6 .
43
Une partie pour chercher un utilisateur préinscrit. :
Figure 30 : exemple de la recherche d’un utilisateur.
Icône qui fait signe de nouveaux messages.
Figure 31 : Nouveaux messages.
Icône qui fait le signe d’une notification.
Figure 32 : Nouvelles invitations.
44
Zone amis connectés:
Dans cette zone se déplace les noms
de tous les amis connectés à
l’application avec une icône verte
devant.
L’utilisateur peut choisir un ami dans
cette liste des amis connectés
Pour chatter avec
Figure 33 : Amis connectés.
L’utilisateur a le droit de d’ajouter un autre utilisateur dans son liste des amis
d’après le bouton demande :
Figure 34 : Envoyer une invitation.
Comme il peut aussi supprimer des amis dans cette liste :
Figure 35 : Supprimer un ami.
45
Zone publication :
Figure 36 : zone publication.
Cette Zone qui permet à un utilisateur de publier des articles qui sera affichés
chez ses amis. Cet article peut être :
Un vidéo :
Figure 37 : publication « vidéo ».
Document WORD :
Figure 38 : publication « WORD».
46
Document PDF :
Figure 39 : publication « PDF ».
Fichier type TXT :
Figure 40 : publication « TXT ».
Image :
Figure 41 : publication « image ».
47
Statut/texte :
Figure 42 : publication « statut/texte ».
Et à la fin voilà un exemple de conversation entre deux amis :
Figure 43 : Exemple de conversation.
48
Conclusion
Durant ce parcours on a pu mettre en pratique de nombreuses
compétences acquises durant notre formation, que ce soit au niveau
technique, conceptuel ou encore organisationnel, ce qui nous a permis
de mettre en pratique le processus de conduite d'un projet.
Le rapport contient trois chapitres, dans lesquels nous avons décrit
les étapes principales de la réalisation du projet et qui nous a mené à
un résultat satisfaisant, et simple à utiliser par n’importe quel
utilisateur.
Une application dont nous sommes fières en souhaitant l’évoluer
encore plus, malgré tous les obstacles techniques que nous avons
rencontrés et la contrainte de temps, mais que nous avons pu
surmonter pour en arriver jusque-là.
Nous souhaitons, enfin que ce modeste travail soit en mesure de
satisfaire ses lecteurs et récolter ainsi leurs félicitations.
49
50