Clouder

Posté le 29 Octobre 2017
Modifié le 29 Avril 2019

9762

Cette pub permet au site de vivre ...

Créer un chat en PHP

Je vous propose de créer un tchat en PHP / AJAX très complet. Vous pouvez également regarder ma vidéo qui vous explique comment réaliser un tchat complet en PHP / AJAX.


Côté SQL


Table tchat


CREATE TABLE tchat (
  id int(255) NOT NULL,
  id_pseudo int(255) NOT NULL,
  message text COLLATE utf8mb4_unicode_ci NOT NULL,
  date_message datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


Table user


CREATE TABLE user (
  id int(255) NOT NULL,
  pseudo varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  sex int(1) NOT NULL,
  birthday date NOT NULL,
  mail varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  password text COLLATE utf8mb4_unicode_ci NOT NULL,
  register datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


Page tchat.php


Côté PHP

<?php
   session_start();

   include('bd/connexionDB.php');

   $see_tchat = $DB->query("SELECT t.*, u.pseudo 
      FROM tchat t
      LEFT JOIN user u ON u.id = t.id_pseudo
      ORDER BY date_message
      LIMIT 100");

   $see_tchat = $see_tchat->fetchAll();
?>


Côté HTML

<!DOCTYPE html>
<html lang="fr"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Accueil</title><link href=">css/jquery-ui.theme.min.css" rel="stylesheet" type="text/css"/><link href="css/jquery-ui.structure.min.css" rel="stylesheet" type="text/css"/><link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css"/><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="css/style.css" rel="stylesheet" type="text/css"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   </head>

   <body><nav class="navbar navbar-default navbar-static-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" onclick="openNav(this)"> 
                  <span class="sr-only">Toggle navigation</span><span class="icon-bar bar1"></span><span class="icon-bar bar2"></span><span class="icon-bar bar3"></span></button><a class="navbar-brand" href="index.php">Accueil</a></div>

             <div id="myNav" class="overlay"><div class="overlay-content"><a href="condition.php">Conditions</a><a href="boucle.php">Boucles</a></div></div>

             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><?php 
                     if(isset($_SESSION['id'])){
                  ?><li><a href="p_deconnexion.php">Se déconnecter</a></li><?php
                     }else{   
                  ?><li><a href="p_inscription.php">S'inscrire</a></li><li><a href="p_connexion.php">Se connecter</a></li><?php
                     }   
                  ?></ul></div></div></nav>

      <div class="container">      
         <div class="row"><div class="col-xs-12 col-sm-12 col-md-12"><div style="background: white; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); padding: 10px">

                  <div style="font-size: 24px; font-weight: bold">Tchat</div>

                  <div id="msg" style="border: 1px solid #cccccc; padding: 10px 0; border-radius: 5px;overflow: scroll;height: 400px;margin: 10px 0; background: white"><?php   

                        foreach($see_tchat as $st){    

                           $date_message = date_create($st['date_message']);
                           $date_message = date_format($date_message, 'd M Y à H:i:s');

                           if(isset($_SESSION['id']) && $st['id_pseudo'] == $_SESSION['id']){
                        ?><div style="float: right;width: auto; max-width: 80%; margin-right: 26px;position: relative;padding: 7px 20px;color: #fff;background: #0B93F6;border-radius: 5px;margin-bottom: 15px; clear: both">

                              <span id="<?= $st['id'] ?>"><?= nl2br($st['message']) ?></span>

                              <div style="font-size: 10px; text-align: right; margin-top: 10px">Par <?= $st['pseudo'] ?>, le <?= $date_message ?></div></div><?php
                           }else{
                        ?><div style="position: relative;padding: 7px 20px;background: #E5E5EA;border-radius: 5px;color: #000;float: left;width: auto; max-width: 80%; margin-left: 10px;margin-bottom: 15px; clear: both">

                              <span id="<?= $st['id'] ?>"><?= nl2br($st['message']) ?></span>

                              <div style="font-size: 10px; text-align: right; margin-top: 10px">Par <?= $st['pseudo'] ?>, le <?= $date_message ?></div></div><?php
                           }
                        }   
                     ?><div id="message_recept"></div>                  
                  </div>

                  <?phpif(isset($_SESSION['id'])){   
                  ?><div style="border: 1px solid #cccccc; border-radius: 5px; position: relative; padding-top: 5px; background: white"><form method="post">

                              <textarea class="autoExpand" rows="1" data-min-rows="1" name="texte" id="message" class="msg" placeholder="Envoyer votre message" style="border: none;overflow: none; resize: none; width: 90%; outline: none; padding: 0 5px"></textarea>

                              <div style="position: absolute;top: -5px;right: 2px;font-size: 28px;"><input id="envoi" type="submit" class="fa fa-arrow-circle-up" value="" style="border: none; background: transparent; outline: none"/></div>      
                          </form>   
                       </div><?php
                      }       
                   ?></div></div></div></div>

      <footer><i class="fa fa-twitter social-cust"></i><i class="fa fa-facebook social-cust"></i><i class="fa fa-google-plus social-cust"></i></footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript">         
         var isopen = false;

         function openNav(x) {

            if(!isopen){
               isopen = !isopen;
               document.getElementById("myNav").style.height = "100%";
               x.classList.toggle("change");
            }else{
               isopen = !isopen;
               document.getElementById("myNav").style.height = "0%";
               x.classList.toggle("change");
            }

         }

         document.getElementById('msg').scrollTop = document.getElementById('msg').scrollHeight;      

         $('#envoi').click(function(e){
            e.preventDefault();

            var message = encodeURIComponent($('#message').val());

            message = message.trim();

            $('#message').val(null);

            if(message != ""){
                $.ajax({
                   url : 'function/send_mess.php?message=' + message,
                  type : 'GET',
                  dataType : "html",
                  success : function(data){
                       $("#message_recept").append(data);
                  }
                });
            }
         });

         setInterval("load_mess()", 1000);

           function load_mess(){  

              var lastID = $('#msg span:last').attr('id');

              if(lastID > 0){          
               $.ajax({
                  url : 'function/load_mess.php?id=' + lastID,
                  type : 'GET',
                  dataType : "html",
                  success : function(data){
                     $("#message_recept").append(data);
                  },
                  error : function(){
                     //alert("Oops une erreur est survenue lors du chargement du message !");
                  }
               });
            }
         };

         $(document).one('focus.autoExpand', 'textarea.autoExpand', function(){
             var savedValue = this.value;
             this.value = '';
             this.baseScrollHeight = this.scrollHeight;
             this.value = savedValue;

         }).on('input.autoExpand', 'textarea.autoExpand', function(){
             var minRows = this.getAttribute('data-min-rows')|0, rows;
             this.rows = minRows;
             rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 20);
             this.rows = minRows + rows;
         });
      </script></body>
</html>


Page send_mess.php


<?php
   session_start();

   include ('../bd/connexionDB.php');

   $DB = new connexionDB();

   if(isset($_SESSION['id'])){ 

      $mess = htmlspecialchars(trim($_GET['message']));

      if(isset($mess) && !empty($mess)){

         $verif_user = $DB->query("SELECT id FROM user WHERE id = ?",
            array($_SESSION['id']));

         $verif_user = $verif_user->fetch();

         if(isset($verif_user['id'])){

            $date_message = date('Y-m-d H:i:s');

            $DB->insert("INSERT INTO tchat (id_pseudo, message, date_message) VALUES (?, ?, ?)",
               array($_SESSION['id'], $mess, $date_message));

            $lastID = $DB->query("SELECT id FROM tchat WHERE id_pseudo = ? ORDER BY date_message DESC LIMIT 1", 
               array($_SESSION['id']));

            $lastID = $lastID->fetch();

            $date_message = date_create($date_message);
            $date_message = date_format($date_message, 'd M Y à H:i:s');

            ?><div style="float: right;width: auto; max-width: 80%; margin-right: 26px;position: relative;padding: 7px 20px;color: #fff;background: #0B93F6;border-radius: 5px;margin-bottom: 15px; clear: both"><span id="<?= $lastID['id'] ?>"><?= nl2br($mess) ?></span>               
                  <div style="font-size: 10px; text-align: right; margin-top: 10px">Par <?= $_SESSION['pseudo'] ?>, le <?= $date_message ?></div></div>

               <script>document.getElementById('msg').scrollTop = document.getElementById('msg').scrollHeight;
               </script><?php

         }
      }      
   }
?>


Page load_mess.php


<?php
   session_start();

   include ('../bd/connexionDB.php');

   $DB = new connexionDB();

   if(isset($_GET['id'])){

      $id = (int) $_GET['id'];

      $see_tchat = $DB->query("SELECT t.*, u.pseudo 
         FROM tchat t
         LEFT JOIN user u ON u.id = t.id_pseudo
         WHERE t.id > ?
         ORDER BY date_message", 
         array($id));

      $see_tchat = $see_tchat->fetchAll();

      if (count($see_tchat) > 0){

         foreach($see_tchat as $st){

            $date_message = date_create($st['date_message']);
            $date_message = date_format($date_message, 'd M Y à H:i:s');

            if(isset($_SESSION['id']) && $st['id_pseudo'] == $_SESSION['id']){
               ?><div style="float: right;width: auto; max-width: 80%; margin-right: 26px;position: relative;padding: 7px 20px;color: #fff;background: #0B93F6;border-radius: 5px;margin-bottom: 15px; clear: both">

                     <span id="<?= $st['id'] ?>"><?= nl2br($st['message']) ?></span>

                     <div style="font-size: 10px; text-align: right; margin-top: 10px">Par <?= $st['pseudo'] ?>, le <?= $date_message ?></div></div><?php
            }else{
               ?><div style="position: relative;padding: 7px 20px;background: #E5E5EA;border-radius: 5px;color: #000;float: left;width: auto; max-width: 80%; margin-left: 10px;margin-bottom: 15px; clear: both">

                     <span id="<?= $st['id'] ?>"><?= nl2br($st['message']) ?></span>

                     <div style="font-size: 10px; text-align: right; margin-top: 10px">Par <?= $st['pseudo'] ?>, le <?= $date_message ?></div></div><?php
            }   
         }
         ?><script>document.getElementById('msg').scrollTop = document.getElementById('msg').scrollHeight;
         </script>   
      <?php
      }
   }
?>
Cette pub permet au site de vivre ...
Voir d'autres articles
Créer son site de rencontres
Barre de menu intelligente
SQL
Recuperer la dernière insertion
Créer son site
Barre de recherche : Ajax
Cette pub permet au site de vivre ...

Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.

Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.

Utilisation des cookies

Accepter