1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.

Tutoriel #5 Espace membre - Une Shoutbox

Discussion dans 'Programmation web' créé par Arwantys, 16 Octobre 2016.

  1. Arwantys

    Arwantys Membre Premium Premium

    Inscrit:
    21 Octobre 2013
    Messages:
    1 656
    Appréciations:
    410
    Points:
    5 021
    [​IMG]

    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' :trollface:)

    [​IMG]

    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

    Bonjour visiteur, merci de vous inscrire ou de vous connecter afin de voir le contenu de cette balise. Cela est gratuit et ne prend que quelques secondes !


    Puis vous appelez votre table shoutbox.
    Maintenant nous allons faire un simple design avec un panel.

    Bonjour visiteur, merci de vous inscrire ou de vous connecter afin de voir le contenu de cette balise. Cela est gratuit et ne prend que quelques secondes !


    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.
    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.
    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 :d:, tu auras beau l'insulter, il dira toujours bonjour :trollface:)
    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 :D"
    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 :trollface:
    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'$messagetime()+3nullnullfalsetrue);
                        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 :trollface:)
    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
    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'$messagetime()+0nullnullfalsetrue);
                        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 !";
            }
        }

    ?>
    [​IMG]

    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.
    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
    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 && $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 :D
    Tu veux tester ?

    Bonjour visiteur, merci de vous inscrire ou de vous connecter pour voir les liens. C'est gratuit en 3 secondes !


    Télécharger le projet:

    Bonjour visiteur, merci de vous inscrire ou de vous connecter pour voir les liens. C'est gratuit en 3 secondes !

     
    AMO ♥ Azort Gaming et Ruby. aiment ça.


  2. AwH

    AwH Super Modérateur Ancien staff

    Inscrit:
    28 Septembre 2011
    Messages:
    5 089
    Appréciations:
    2 618
    Points:
    7 358
    L'indentation :x
    Je te conseil de preparer vraiment de preparer TOUTES tes requêtes ;)
     
    Adel XF et Arwantys aiment ça.
  3. Ruby.

    Ruby. Undefined

    Inscrit:
    25 Avril 2012
    Messages:
    507
    Appréciations:
    109
    Points:
    4 136
    Salut super tutoriel bien rédigier etc mais j'ai essayé pour voir ce que ça donné et j'ai vu ça

    Bonjour visiteur, merci de vous inscrire ou de vous connecter pour voir les liens. C'est gratuit en 3 secondes !



    pourquoi d'un côté c'est aligner et de l'autre côté c'est pas aligner?? c'est normal ??
    merci
     
    Arwantys aime ça.
  4. Arwantys

    Arwantys Membre Premium Premium

    Inscrit:
    21 Octobre 2013
    Messages:
    1 656
    Appréciations:
    410
    Points:
    5 021
    Merci :)

    Il faut rajouter display: inline; dans ton CSS du message :p donc par exemple tu crée dans ton CSS

    .shoutboxmsg {
    display: inline;
    }

    et tu fais <div class="shoutboxmsg"><?= $message['message']; ?></div>
     
  5. AMO ♥ Azort Gaming

    AMO ♥ Azort Gaming Membre Premium Premium

    Inscrit:
    8 Décembre 2012
    Messages:
    129
    Appréciations:
    47
    Points:
    3 726
    Salut ,Super beaux tutoriel +1 , j'en chercher un justement simple basique j'aurais une question pour ajouter des commande dans la shoutbox sa se passe depuis la base de données et après sur la page php ou on a inserer le php non .?
     
  6. Arwantys

    Arwantys Membre Premium Premium

    Inscrit:
    21 Octobre 2013
    Messages:
    1 656
    Appréciations:
    410
    Points:
    5 021
    Merci :)
    Tout se passe dans le php, par exemple si je veux ajouter une commande /ban j'ajoute
    $ban = explode('/ban', $messagesmiley); et

    PHP:
    elseif(isset($ban['1']))
                    {
                        
    $MessageB $ban['1'];
                        
    $CommandeBan $bdd->prepare('INSERT INTO shoutbox(identifiant, message, rank, date_p, avatar) VALUES(?, ?, ?, NOW(), ?)');
                        
    $CommandeBan->execute(array($_SESSION['identifiant'], 'a banni <b style="color: red !important">'.$MessageB.'</b> de la shoutbox.'$_SESSION['rank'], $_SESSION['avatar']));
                        
    $CommandeBan $bdd->prepare('INSERT INTO ban_shoutbox(identifiant, ban, date_b) VALUES(?, ?, NOW())');
                        
    $CommandeBan->execute(array($MessageB'1'));
                    }  
    Tu l'es ajoute où tu vois leur ligne :p fin tu vas te repérer
     
  7. AMO ♥ Azort Gaming

    AMO ♥ Azort Gaming Membre Premium Premium

    Inscrit:
    8 Décembre 2012
    Messages:
    129
    Appréciations:
    47
    Points:
    3 726
    Merci franchement tu gère j'ai réussis a me repérer .
     
  8. Ruby.

    Ruby. Undefined

    Inscrit:
    25 Avril 2012
    Messages:
    507
    Appréciations:
    109
    Points:
    4 136
    Tu l'as créer comment ta table pour ban_shoutbox?
     
  9. AMO ♥ Azort Gaming

    AMO ♥ Azort Gaming Membre Premium Premium

    Inscrit:
    8 Décembre 2012
    Messages:
    129
    Appréciations:
    47
    Points:
    3 726
    Ah oui ; La table ban_shoutbox , j'ai oublier bien vu je vais la faire et je t'envoie le code sql a mettre dans ta base de donnés .
     
    Ruby. aime ça.
  10. Ruby.

    Ruby. Undefined

    Inscrit:
    25 Avril 2012
    Messages:
    507
    Appréciations:
    109
    Points:
    4 136
    Ok l'ami merci
     

Partager cette page

Publicité