Tutoriel PHP – Créer une chatbox

 

Bonjour à tous et bienvenue dans ce nouveau tutoriel PHP dans lequel nous allons créer une chatbox. Merci à l’abonné qui m’a proposé ce tutoriel.

Le principe de la chatbox erst très simple. Il s’agiera en fait d’une fenêtre de chat située sur votre site dans laquelle les membres de votre site pourront discuter entres eux, à condition qu’ils soient connectés.

 

Architecture de base

Il est important de savoir que pour ce tutoriel, je partirai d’une architechture déja toute faite. Son fonctionnement est simple. En fontion de l’url passée en get, le routeur inclue une page PHP spécifique qui va elle même appeler la vue correspondante. Cela ressemble à une architecture MVC, mais tout cela en code procédural.

URL => PHP => VUE

 

Vous retrouverez cette architecture à plusieurs reprises dans mes tutoriels.

 

Création de la chatbox

Commençons par créer une simple boite HTML sur la page d’accueil. Nous allons créer cette div dans la div de classe content, entre le header et le footer. Nous diviserons cette div en deux partie, la partie d’affichage des commentaires et la partie contenant le formulaire :

<div class="chatbox">

	<div class="msgs">
	</div>

	<div class="form">
	</div>

</div>
home.view.php

 

Stylisons maintenant le tout dans notre fichier CSS :

div.content div.chatbox {
	position:fixed;
	bottom:0px;
	right:100px;
	width:300px;
	height:400px;
	background:white;
	-webkit-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
	box-shadow: 1px 1px 20px -2px rgba(0,0,0,0.75);
}

div.content div.chatbox div.msgs {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:350px;
	font-family:arial;
	padding:10px;
	overflow: scroll;
	overflow-x:hidden;
}

div.content div.chatbox div.form {
	position:absolute;
	top:350px;
	left:0px;
	width:100%;
	height:50px;
	border-top:1px solid grey;
	font-family:arial;
}
style.css

 

 

Création du formulaire

Il nous faut maintenant créer le formulaire qui permettra à nos utilisateurs de poster leurs messages. Ce formulaire comprendra une entrée de type text, et un élément button. On enverra les données en POST et on insèrera ce formulaire dans la div de class form :

<div class="form">
	<form method="POST" action="">
		<input type="text" name="message" placeholder="Message">
		<button type="submit" name="send">Envoyer</button>
	</form>
</div>
home.view.php

 

Et, comme d’habitude, on stylise le tout en CSS :

div.content div.chatbox div.form form {
	margin:10px;
}

div.content div.chatbox div.form form input {
	width:190px;
	height:30px;
	border:2px solid #222;
	border-radius:5px;
	outline:0;
	padding-left:10px;
}

div.content div.chatbox div.form form button {
	width:62px;
	height:32px;
	background:#222;
	color:white;
	border:0;
	cursor:pointer;
}
style.css

 

Traitement back-end en PHP

Il nous faut maintenant rendre le tout fonctionnel. Pour ce faire, nous allons devoir créer un script PHP qui aura pour mission de traiter les informations rentrées par un membre dans le formulaire. Si ces informations sont correctes, le script insèrera le message dans la base de données, sinon, il affichera une erreur. On plaçera ce script dans le fichier php, avant la vue.

<?php

// Form send messages
if(isset($_POST['send'])) {
	if(isset($_POST['message'])) {
		if(!empty($_POST['message'])) {
			if(strlen($_POST['message']) <= 500) {

				$message = htmlspecialchars($_POST['message']);

				$req = $bdd->prepare("INSERT INTO messages (pseudo, message) VALUES (?,?)");
				$req->execute(array($_SESSION['user']['pseudo'], $message));

			} else {
				$error = "Votre message doit faire moins de 500 caractères !";
			}		
		} else {
			$error = "Vous devez entrer un message !";
		}
	}
}

?>
home.php.php

On vérifie ici que le message ne soit pas vide et qu’il comporte moins de 500 caractères.

 

Il nous faut définir la connexion à la base de données à la racine de notre projet :

<?php

$bdd = new PDO("mysql:host=127.0.0.1;dbname=chatbox;charset=utf8", "root", "");

?>
index.php

 

Ainsi qu’émuler une session :

<?php
session_start();

$_SESSION['user'] = array(

	"id" => 364,
	"pseudo" => "Cyberastuces"

);

?>
index.php

Structure de la base : Vous trouverez le fichier .sql dans le dépot github.

 

Afficher les messages

Il nous faut également un script pour afficher les messages. Nous allons insérer ce script dans une page externe, que nous serons amenés à appeller toute les 1,5 secondes.

<?php

// Recovery all messages
$bdd = new PDO("mysql:host=127.0.0.1;dbname=chatbox;charset=utf8", "root", "");
$msgs = $bdd->query("SELECT * FROM messages ORDER BY id DESC");

?>


<?php while($msg = $msgs->fetch()) { ?>
	<b><?= $msg["pseudo"] ?></b> : <span class="message"><?= $msg['message'] ?><br />
<?php } ?>
chatbox_messages.view.php

 

 

Actualisation automatique

Il nous faudrait maintenant actualisr automatiquement les messages. Pour cela commençons par inclure JQuery 3.0 (dernière version à ce jour) en visitant les librairies Google Developper. Insérons ce code dans la partie head de notre vue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
home.view.php

 

Nous pouvons maintenant écrire le code qui nous permettra de charger le fichier dans lequel les messages s’affichent. Ce fichier sera appelé toutes les 1,5 secondes dans la div .msgs. On insèrera ce code javascript après notre balise </body>.

<script>

	setInterval("messages()", 1500);
	function messages() {
		$(".msgs").load("views/chatbox_messages.view.php");
	}

</script>
home.view.php

 

Voilà ! Le tout est fonctionnel ! J’espère que ce tuto vous aura été utile !

 


Des fichiers sont disponibles au téléchargementImage téléchargement

Partagez cette vidéo !

Leave Comment