Projet de messagerie instantanée en Javascript, html, css et PHP/Mysql

Cahier des charges et spécification d'une messagerie instantanée.

Une messagerie instantanée permet à des membres identifiés de saisir un message court dans un champ texte de type input et l'afficher dans un bloc html contenant tous les messages de la discussion.

But du projet

Échanger des messages en direct, entre des utilisateurs identifiés sur une page web.

Pré-requis

Pour réaliser ce projet, vous allez devoir utiliser les technologies html, php, Javascript et SQL. La partie html, php et SQL est normalement maîtrisée avec le module PHP de votre formation. Il ne reste que la partie Javascript que nous allons étudier dans ce module avec la découverte de la gestion asynchrone de transfert de données (Ajax).

Découverte de l'Ajax

Dans ce projet, nous allons apprendre à interroger et récupérer des informations du serveur web sans rechargement de page du navigateur web. Le but est d’accélérer l'affichage de nouvelles informations sur une page web en ne récupérant que les informations nécessaires et ainsi éviter de reconstruire toute une page web avec 95% des informations identiques. La technologies Ajax va nous permettre d’exécuter des scriptes coté serveur (PHP + MySQL) et de récupérer la réponse fourni par le serveur Web (du code html). Le langage Javascript va ensuite nous aider à placer les nouvelles informations dans le code html de page du client web (le navigateur).

Fonctionnement du messenger

Le site ne va comporter qu'une seule page d'affichage. La page va afficher une zone d'affichage des messages et un menu pour la gestion des utilisateurs.

Un utilisateur aura le choix de se connecter à son compte si il est déjà enregistré dans la base de données ou de créer un compte si il souhaite rédiger des messages. Toute la partie connexion et création de compte sera gérer en Ajax avec Javascript.

Architecture MVC

L'application reprendra votre architecture MVC créée lors du module PHP. Elle reprendra la partie connexion d'un utilisateur et la partie session pour la sauvegarde de la connexion. Vous allez devoir créer un Layout dédié à l'Ajax qui ne fera que récupérer la vue qui correspond à l'action demandée (Contrôleur). Il n'y aura donc pas de structure de page car la page existe déjà et l'Ajax ne va récupérer qu'une partie du code html à mettre à jour.

Gestion de la connexion.

Si l'utilisateur n'a pas de compte alors un bouton lui propose d'en créer un. Lors du clique sur le bouton, une commande Ajax va récupérer la vue html du formulaire d'inscription pour l'afficher sur la page racine du site sous forme de pop-in.

Si l'utilisateur à un compte alors un clique sur le bouton « identification » va exécuter une commande Ajax qui va récupérer la vue html du formulaire d'identification.

La gestion des erreurs et validation se fera en Ajax avec des exécutions de commandes adaptées qui vont retournée soit des messages d'erreur ou alors des booléens pour indiquer que tout c'est bien passé du coté serveur. Si tout ce passe bien alors une fonction Javascript pourra faire disparaître les différents formulaires et indiquer que l'on est identifié et connecté.

Le compte utilisateur

Avant de pouvoir utiliser la messagerie instantanée, il faut pouvoir créer un compte utilisateur. Pour cela, vous devez stocker en base de données des informations utilisateurs (pseudo,mot de passe).

Ce qu'il faut faire

Ajouter un formulaire d'enregistrement d'utilisateur (pseudo, mot de passe). Créer une base de données et une classe PHP pour enregistrer l'utilisateur. Une fonction Ajax ira exécuter le bon contrôleur de votre modèle MVC en lui passant les informations du formulaire.

Affichage de la connexion

Une fois connecté, avec une fonction Javascript, vous allez faire disparaitre les boutons de connexion et afficher, où vous le souhaitez, le pseudo de la personne connectée.

Envoi de messages dans le messenger.

Une fois identifié, vous pourrez afficher un champ « input » sous la zone d'affichage des messages pour envoyer, à votre tour, un message.

Lors de la validation du champ input, le texte est enregistré en base de donnée et affiché dans le bloc html de la messagerie.

Enregistrement du message en base de données.

Créer une table pour enregistrer les messages instantanées.

La table comportera les champs suivants :

La date de publication du message (année,mois,jour,heure,minute,seconde).
L'identifiant de l'utilisateur (userId).
Le texte du message.

Une fonction javascript Ajax va réaliser les étapes suivantes.

Enregistrer le message :

Récupérer le contenu du champ input après validation.
Stocker le texte dans une table avec la date et l'id de l'utilisateur.

Affichage des nouveaux messages :

Récupérer la liste des 10 derniers messages et les afficher dans le bloc html contenant la messagerie.
La fonction Ajax va récupérer la vue html qui va créée l'affichage des messages.
Il faudra utiliser une fonction Javascript pour remplacer le contenu du bloc de la messagerie par le nouveau contenu récupéré de la vue PHP. Et cela sans recharger la page html.

Création de la zone du messenger.

Créer un bloc html, css dans lequel on trouvera une en-tête avec le nom de la messagerie, en bas du bloc, un champ de saisi de message. Pour envoyer le message on va utiliser la detection d'une action sur la touche « entrée » du clavier.

En option

Ajouter un bouton pour afficher une liste d'emoji dans le texte. https://www.w3schools.com/charsets/ref_emoji_smileys.asp

Création de la base de données

La base de données devra avoir les tables et les champs suivants :

Table 'membres' avec les champs suivants :

idMembre (identifiant unique - int)
pseudo (varChar)
passe (texte)

Table 'messages' avec les champs suivants :

idMessage (identifiant unique - int)
idMembre (clé étrangère)
message (texte) Attention !, vous devez utiliser le charset=utf8mb4 pour pouvoir enregistrer les emojis. La connexion à votre base de données avec PHP doit également utiliser le charset=utf8mb4. L'UTF8 ne reconnait pas le code des emojis.
date (date avec heure,minute,seconde)

Afficher les membres connectés

Cette fonctionnalité va afficher sur la page de votre messenger la liste des personnes connectées.

Voici l'algorithme de création de cette fonction.

Coté BDD

Ajouter un nouveau champ dans votre table 'membres'. Vous allez ajouter le champ 'lastAction' avec le type 'dateTime'.
Ce champ va contenir une date au format "année-mois-jour heure:minute:seconde".
Chaque membre connecté va mettre à jour ce champ toutes les 30 secondes (30000ms) avec la date courante du serveur.

Une fonction PHP ira récupérer tous les membres dont le champ 'lastAction' à une date de 1 minute en moins que la date courante. Vous pouvez utiliser la fonction SQL "Between" pour récupérer des résultats entre deux dates : https://sql.sh/cours/where/between

Coté PHP

Dans votre classe "membre", vous allez créer une nouvelle méthode que vous pourrez appeler selectConnectUsers(){}.
Cette méthode va exécuter une requête SQL qui va récupérer la liste des membres dont le champ 'lastAction' est compris entre la date courante et la date courante moins une minute.
La méthode va retourner une liste de résultats qui contiendra la liste des membres connectés.

Exemple PHP pour récupérer la date courante et la date courante moins une minute.

<?php 
 $date1 = time(); //date courante
 $date2 = time()-60;  //date courante moins 1 minute (60 secondes)
 echo date('Y-m-d h:i:s',$date1).'<br>';
 echo date('Y-m-d h:i:s',$date2);
 ?>

Coté Javascript

Pour l'affichage des membres sur la page de votre messenger, vous allez créer une fonction javascript à mettre dans un de vos fichiers javascript.
Vous pouvez appeler cette fonction userConnected(){}

Cette fonction va appeler votre fonction PHP selectConnectUsers(){} grace à un objet AJAX.

Pour atteindre cette méthode PHP, votre objet AJAX va devoir appeler un contrôleur PHP qu'il faudra créer (ex : userConnected.php). Ce contrôleur va créer un objet membre.class.php et appeler votre méthode $membre->selectConnectUsers().
Le contrôleur va récupérer la liste de membres connectés et va la transmettre à la vue qu'il faudra également créer. La vue va mettre en forme et en html la liste des membres.

Votre fonction AJAX va récupérer en réponse la vue PHP et l'afficher dans un cadre de votre page qui contient votre messenger.
Vous pouvez donc ajouter une nouvelle balise <div id="listeMembre"></div> où vous le souhaitez dans votre page messenger qui contiendra la liste des membres injectée par votre méthode AJAX.

Notation du projet

Le système de notation sera le suivant

Vous avez jusqu'au 26 février pour finir et me rendre le projet.

Le premier à rendre le projet avec toutes les fonctions demandées aura une note de 20/20.
Il y aura une décote de 0.5 point pour les projets suivants.
Attention car je prends en compte les deux groupes ce qui fait que le dernier aura une note de 7/20 (26 étudiants).
Les notes de participations vont jouer le role d'ajusteur de la note finale.

Il reste encore beaucoup de notes de participation à donner sur les exercices suivants :

Enregistrer vos messages en BDD et les afficher dans le messenger.
Afficher une popin et la cacher.

Attention sans retour de ces exercices, la note par defaut sera de 9/20.

Je reste disponible sur teams pour répondre à des questions par écrit ou pour compléter le cours si vous avez des difficultés sur certains points.

Astuces en vrac

Utiliser de préférence le navigateur Chrome pour faire du javascript

Forcer le scroll du messenger en bas

A chaque nouveaux messages, si vous avez une zone de message avec un style CSS overflow-y: scroll, vous allez avoir un escenceur qui sera toujours initialisé vers le haut.
Pour le forcer à resté en bas voici une astuce Javascript

//Creation d'une fonction qui place le scroll en bas de son élement 
function scrollBottom(element){
element.scrollTop = element.scrollHeight;
}

Il vous suffit ensuite d'appeler cette fonction juste après votre element.innerHTML = reponse réalisé dans votre AJAX.