Partie 1 -> Clique ici [Premium]
Partie 2 -> Clique ici [Premium]
Partie 3 -> Clique ici [Premium]
Partie 4 -> Clique ici [Membre]
Bonjour, bonsoir,
Aujourd'hui nous nous retrouvons pour l'épisode numéro 5 de ma série, une Shoutbox.
Vouloir parler avec ses membres depuis son site est toujours utile, c'est donc pour cela que je fais ce tutoriel.
Pour ce tutoriel je me suis basé directement sur une Shoutbox que @Maxime' a partagé (disponible ici) mais que j'ai amélioré pour afficher le grade du membre qui postera un message, la possibilité de tagger une personne depuis son message, le temps de quand le message a été posté (Posté il y a x temps), l'avatar, ainsi que deux commandes et les smileys (pris directement depuis les tutoriels de @Maxime' )
Nous allons commencer par créer nombre table SQL comportant les colonnes suivante:
id en int 11 en auto increment avec une clé
utilisateur en varchar 25
message en text
rank en enum avec 1 et 2
date_p en datetime
avatar en text
Puis vous appelez votre table shoutbox.
Maintenant nous allons faire un simple design avec un panel.
On se dirige dans notre fichier shoutbox.php puis nous commençons par mettre la function des smileys (adapté à ce tutoriel, mais repris sur ce topic)
PHP:
function Smiley($smiley){
$search = array(':dance:', ':D',':bave:',':$', ':bye:', ':coeur:', ':crazy:', ':devil:', ':DJ:', ':dodo:', ':nrv:', ':espion:', 'o_O', ':@', ':fight:', ':hug:', ':p', ':love:', ':mmh:', ':modo:', ':neo:', ':non:', ':oui:', ':mechant:', ':puke:', ':punch:', ':rofl:', ':bad:', ':tchuss:', ':\'(', ':nice:', ':troll:');
$replace = array('<img src="img/smileys/dance.gif" />', '<img src="img/smileys/awesone.png" />', '<img src="img/smileys/bave.gif" />', '<img src="img/smileys/blush.gif" />', '<img src="img/smileys/bye.gif" />', '<img src="img/smileys/coeur.gif" />', '<img src="img/smileys/crazy.gif" />', '<img src="img/smileys/devil.gif" />', '<img src="img/smileys/DJ.gif" />', '<img src="img/smileys/dodo.gif" />', '<img src="img/smileys/enerve.gif" />', '<img src="img/smileys/espion.gif" />', '<img src="img/smileys/etonne.gif" />', '<img src="img/smileys/facher.gif" />', '<img src="img/smileys/fight.gif" />', '<img src="img/smileys/hug.gif" />', '<img src="img/smileys/joueur.gif" />', '<img src="img/smileys/love.gif" />', '<img src="img/smileys/mmh.gif" />', '<img src="img/smileys/modo.gif" />', '<img src="img/smileys/neo.gif" />', '<img src="img/smileys/non.gif" />', '<img src="img/smileys/oui.gif" />', '<img src="img/smileys/pelo.gif" />', '<img src="img/smileys/puke.gif" />', '<img src="img/smileys/punch.gif" />', '<img src="img/smileys/rofl.gif" />', '<img src="img/smileys/bad.gif" />', '<img src="img/smileys/tchuss.gif" />', '<img src="img/smileys/triste.gif" />', '<img src="img/smileys/nice.gif" />', '<img src="img/smileys/troll.png" />');
$smiley = str_replace($search, $replace, $smiley);
return $smiley;
}
Maintenant nous allons donner le name shoutbox à notre submit et nous ferons l'étape de vérification pour savoir si notre input où se situe notre message contient bien du texte.
PHP:
if(isset($_POST['shoutbox']))
{
$message = htmlspecialchars(trim($_POST['message']));
$messagesmiley = Smiley($message);
Le $messagesmiley permet de prendre en compte la function Smiley.
Ici nous allons dire que le message doit contenir au maximum 500 caractères.
Ici nous allons dire que le message doit contenir au maximum 500 caractères.
PHP:
if(!empty($message))
{
$MessageLimite = strlen($messagesmiley);
if($MessageLimite <= 500)
{
Alors ici, nous allons faire les commandes ainsi que l'insertion des données.
Nous allons mettre la possibilité à ceux ayant un rank au dessus ou égal à 2 d'utiliser les commandes /bot et /vide puis la possibilité de dire bonjour au BOT avec @BOT pour tous les utilisateurs.
Nous allons mettre la possibilité à ceux ayant un rank au dessus ou égal à 2 d'utiliser les commandes /bot et /vide puis la possibilité de dire bonjour au BOT avec @BOT pour tous les utilisateurs.
PHP:
if(!isset($_COOKIE['messagesmiley']))
{
$bonjour = explode('@BOT', $messagesmiley);
if($_SESSION['rank'] >= 2){
$bot = explode('/bot', $messagesmiley);
$vide = explode('/vide', $messagesmiley);
}
Nous allons commencer par la commande /bot.
Nous allons préparer notre requête puis l'exécuter.
PHP:
if(isset($bot['1']))
{
$robot = $bot['1'];
$MessageBot = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$MessageBot->execute(array('BOT', $robot, '2', 'https://website.smooch.io/static_assets/images/features/bot-avatar.png'));
}
C'est simple à comprendre, il va juste y avoir une insertion de données
Maintenant nous allons faire la commande /vide.
Elle va vider notre table shoutbox et insérer un message pour dire que celle-ci a bien été vidé.
PHP:
elseif(isset($vide['1']))
{
$CommandeVide = $bdd->prepare('TRUNCATE shoutbox');
$CommandeVide->execute(array());
$CommandeVide = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeVide->execute(array($_SESSION['identifiant'], 'vient de vider la shoutbox.', $_SESSION['rank'], $_SESSION['avatar']));
}
C'est aussi simple à comprendre, premièrement on prépare notre première requête qui va nous permettre de vider notre table puis elle est exécuté.
Deuxièmement, on prépare notre requête à l'insertion des données qui vont afficher le message pour dire que la Shoutbox a bien été vidé puis la préparation est exécuté.
Nous allons maintenant faire la dernière commande, qui permet que le BOT dise bonjour. (Oui il sera que dire bonjour , tu auras beau l'insulter, il dira toujours bonjour )
Deuxièmement, on prépare notre requête à l'insertion des données qui vont afficher le message pour dire que la Shoutbox a bien été vidé puis la préparation est exécuté.
Question: Petite question, à quoi sert NOW() ?
Réponse: Sa permet d'insérer la date et l'heure à laquelle la commande à été effectué, fin elle apparaitra sur le message sous forme Posté il y a x secondes/minutes ...
Nous allons maintenant faire la dernière commande, qui permet que le BOT dise bonjour. (Oui il sera que dire bonjour , tu auras beau l'insulter, il dira toujours bonjour )
PHP:
elseif(isset($bonjour['1']))
{
$CommandeBonjour = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeBonjour->execute(array($_SESSION['identifiant'], $messagesmiley, $_SESSION['rank'], $_SESSION['avatar']));
$CommandeBonjour = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeBonjour->execute(array('BOT', 'Salut '.$_SESSION['identifiant'].' <img src="img/smileys/awesone.png" />', '2', 'https://website.smooch.io/static_assets/images/features/bot-avatar.png'));
}
Je vais vous expliquez ce que chaque prepare signifie.
La première sert à afficher votre message avec vos données, donc par exemple, si tu marques "@BOT Salut "
ton message s'affichera avant le message du BOT (évidant)
Et le deuxième sert à insérer le bonjour du BOT.
Il nous reste plus cas faire la prepare pour l'insertion du message et les différentes erreurs.
Donc, vous avez maintenant l'habitude de faire des prepares
La première sert à afficher votre message avec vos données, donc par exemple, si tu marques "@BOT Salut "
ton message s'affichera avant le message du BOT (évidant)
Et le deuxième sert à insérer le bonjour du BOT.
Il nous reste plus cas faire la prepare pour l'insertion du message et les différentes erreurs.
Donc, vous avez maintenant l'habitude de faire des prepares
PHP:
else
{
$MessageGo = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$MessageGo->execute(array($_SESSION['identifiant'], $messagesmiley, $_SESSION['rank'], $_SESSION['avatar']));
setcookie('message', $message, time()+3, null, null, false, true);
unset($_POST);
}
}
La prepare et l'execute je n'ai plus besoin de vous l'expliquer je pense, le setcookie permet de mettre un intervalle entre deux message, là il est de 3 secondes.
Aller, il nous reste plus que les erreurs et on a fini pour cette page!
(Oui oui, il reste encore deux pages )
Aller, il nous reste plus que les erreurs et on a fini pour cette page!
(Oui oui, il reste encore deux pages )
PHP:
else
{
$erreur = "Un message toutes les 3 secondes.";
}
}
else
{
$erreur = "Votre message fait plus de 500 caractères.";
}
}
else
{
$erreur = "Veuillez entrer un message.";
}
}
Bon, pas besoin de vous expliquez, c'est écrire noir sur blanc
Voilà ce que vous devriez avoir
Voilà ce que vous devriez avoir
PHP:
<?php
session_start();
if(isset($_SESSION['id']))
{
}else
{
header('Location: login');
exit();
}
require_once('includes/configuration.php');
require_once('includes/fonctions/configuration.fonction.php');
function Smiley($smiley){
$search = array(':dance:', ':D',':bave:',':$', ':bye:', ':coeur:', ':crazy:', ':devil:', ':DJ:', ':dodo:', ':nrv:', ':espion:', 'o_O', ':@', ':fight:', ':hug:', ':p', ':love:', ':mmh:', ':modo:', ':neo:', ':non:', ':oui:', ':mechant:', ':puke:', ':1punch:', ':rofl:', ':bad:', ':tchuss:', ':\'(', ':nice:', ':troll:');
$replace = array('<img src="img/smileys/dance.gif" />', '<img src="img/smileys/awesone.png" />', '<img src="img/smileys/bave.gif" />', '<img src="img/smileys/blush.gif" />', '<img src="img/smileys/bye.gif" />', '<img src="img/smileys/coeur.gif" />', '<img src="img/smileys/crazy.gif" />', '<img src="img/smileys/devil.gif" />', '<img src="img/smileys/DJ.gif" />', '<img src="img/smileys/dodo.gif" />', '<img src="img/smileys/enerve.gif" />', '<img src="img/smileys/espion.gif" />', '<img src="img/smileys/etonne.gif" />', '<img src="img/smileys/facher.gif" />', '<img src="img/smileys/fight.gif" />', '<img src="img/smileys/hug.gif" />', '<img src="img/smileys/joueur.gif" />', '<img src="img/smileys/love.gif" />', '<img src="img/smileys/mmh.gif" />', '<img src="img/smileys/modo.gif" />', '<img src="img/smileys/neo.gif" />', '<img src="img/smileys/non.gif" />', '<img src="img/smileys/oui.gif" />', '<img src="img/smileys/pelo.gif" />', '<img src="img/smileys/puke.gif" />', '<img src="img/smileys/punch.gif" />', '<img src="img/smileys/rofl.gif" />', '<img src="img/smileys/bad.gif" />', '<img src="img/smileys/tchuss.gif" />', '<img src="img/smileys/triste.gif" />', '<img src="img/smileys/nice.gif" />', '<img src="img/smileys/troll.png" />');
$smiley = str_replace($search, $replace, $smiley);
return $smiley;
}
if(isset($_POST['shoutbox']))
{
$message = htmlspecialchars(trim($_POST['message']));
$messagesmiley = Smiley($message);
if(!empty($message))
{
$MessageLimite = strlen($messagesmiley);
if($MessageLimite <= 500)
{
if(!isset($_COOKIE['messagesmiley']))
{
$bonjour = explode('@BOT', $messagesmiley);
if($_SESSION['rank'] >= 2){
$bot = explode('/bot', $messagesmiley);
$vide = explode('/vide', $messagesmiley);
}
if(isset($bot['1']))
{
$robot = $bot['1'];
$MessageBot = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$MessageBot->execute(array('BOT', $robot, '2', 'https://website.smooch.io/static_assets/images/features/bot-avatar.png'));
}
elseif(isset($vide['1']))
{
$CommandeVide = $bdd->prepare('TRUNCATE shoutbox');
$CommandeVide->execute(array());
$CommandeVide = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeVide->execute(array($_SESSION['identifiant'], 'vient de vider la shoutbox.', $_SESSION['rank'], $_SESSION['avatar']));
}
elseif(isset($bonjour['1']))
{
$CommandeBonjour = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeBonjour->execute(array($_SESSION['identifiant'], $messagesmiley, $_SESSION['rank'], $_SESSION['avatar']));
$CommandeBonjour = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$CommandeBonjour->execute(array('BOT', 'Salut '.$_SESSION['identifiant'].' <img src="img/smileys/awesone.png" />', '2', 'https://website.smooch.io/static_assets/images/features/bot-avatar.png'));
}
else
{
$MessageGo = $bdd->prepare('INSERT INTO shoutbox(utilisateur, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
$MessageGo->execute(array($_SESSION['identifiant'], $messagesmiley, $_SESSION['rank'], $_SESSION['avatar']));
setcookie('message', $message, time()+0, null, null, false, true);
unset($_POST);
}
}
else
{
$erreur = "Un message toute les 5 secondes !";
}
}
else
{
$erreur = "Le message ne doit pas dépasser les 100 caractères !";
}
}
else
{
$erreur = "Veuillez mettre un message !";
}
}
?>
Maintenant on va attaquer le fichier chargement_shoutbox.php que nous allons créer dans le dossier includes.
Nous allons commencer par mettre l'include de la base de données et une autre pour une fonction que nous créerons après.
Nous allons commencer par mettre l'include de la base de données et une autre pour une fonction que nous créerons après.
PHP:
<?php
include ('configuration.php');
include ('fonctions/date.php');
?>
Maintenant on va utiliser query pour exécuter notre requête SQL qui va nous permettre de limité les messages jusque 30 qui seront ordonnée par id
PHP:
<?php
include ('configuration.php');
include ('fonctions/date.php');
$message = $bdd->query('SELECT * FROM shoutbox ORDER BY id DESC LIMIT 30');
?>
Maintenant nous allons utiliser foreach pour itérer les cellules de notre tableau.
PHP:
<?php
include ('configuration.php');
include ('fonctions/date.php');
$message = $bdd->query('SELECT * FROM shoutbox ORDER BY id DESC LIMIT 10');
foreach ($message as $message) {
?>
Maintenant à vous de faire votre design de message, vous utiliserez <?= $message['']; ?> pour afficher les données sauf pour le date_p vous utilisez <?= conversion($message['date_p']); ?>, le conversion() permet d'utiliser notre function que nous ferons juste après puis vous fermerez le foreach avec <?php } ?>
Maintenant, on va dans notre dossier fonctions situé dans le dossier includes puis on crée date.php et vous collerez ceci
Maintenant, on va dans notre dossier fonctions situé dans le dossier includes puis on crée date.php et vous collerez ceci
PHP:
<?php
function conversion($temps){
$temps = strtotime($temps);
$diff_temps = time() - $temps;
if($diff_temps < 1){
return 'à l\'instant';
}
$sec = array (
12 * 30 * 24 * 60 * 60 => 'an',
30 * 24 * 60 * 60 => 'mois',
24 * 60 * 60 => 'jour',
60 * 60 => 'heure',
60 => 'minute',
1 => 'seconde'
);
foreach($sec as $sec => $value){
$div = $diff_temps / $sec;
if($div >= 1){
$temps_conv = round($div);
$temps_type = $value;
if($temps_conv > 1 && $temps_type != "mois"){
$temps_type .= "s" ;
}
return 'il y a ' . $temps_conv .' ' . $temps_type;
}
}
}
?>
Cette fonction permet de convertir notre datetime en Posté il y a x temps
Voilà on a enfin fini
Tu veux tester ?
Télécharger le projet:
Voilà on a enfin fini
Tu veux tester ?
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Télécharger le projet:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.