Créer ta propre shoutbox en php (avec actualisation automatique)

WhiiTe'

WhiiTe'

Administateur
Ancien staff
Inscription
22 Octobre 2011
Messages
14 712
Réactions
8 501
Points
32 425
RGCoins
0
Noctis Strife a dit:
Je pense que y à humour et humour sa devient légèrement pénible de devoir parcourir des pages et des pages tout sa parcque tu "troll" sont travaille"
Cliquez pour agrandir...
HaX GamiG a dit:
Tu a pas vu le smiley ? Je le connait, je blague avec lui tout le temps. Tu connait pas le second degré ?
Cliquez pour agrandir...

Oui c'est vrai roh arrête de troller ::):troll:)
 
BAWMIR

BAWMIR

Jack Daniel Tennessee Honey.
Premium
Inscription
22 Septembre 2014
Messages
414
Réactions
100
Points
1 133
RGCoins
0
Super tuto Katsuni :d:
 
Kilian'

Kilian'

Développeur HTML5/CSS3 - PHP
Premium
Inscription
16 Août 2012
Messages
3 503
Réactions
990
Points
17 711
RGCoins
0
Bien jouer mais c'est vraiment pour les débutants ^^
 
Neziics'

Neziics'

Membre
Inscription
28 Mai 2014
Messages
1 513
Réactions
347
Points
1 466
RGCoins
0
Bon topic, mais tu as oublié de fermé les premières parenthèses dans ton code d'insertion à base de donées:
WhiiTe' SEC a dit:
Salut :RG:,


Code à remplacer à la place du echo "Ok"; !
PHP: 
        $pseudo = htmlspecialchars(trim($_POST['pseudo']));
        $message = htmlspecialchars(trim($_POST['message']));

        $insertmessage = $bdd->prepare('INSERT INTO chatbox(pseudo, message) VALUES (?, ?)');
        $insertmessage->execute(array($pseudo, $message));
Cliquez pour agrandir...
 
☄️ Fortnite ☄️

☄️ Fortnite ☄️

Premium
Inscription
20 Juillet 2013
Messages
1 330
Réactions
239
Points
6 008
RGCoins
0
WhiiTe' SEC a dit:
Salut :RG:,

Je vais vous expliquer comment créer sa propre shoutbox en PHP avec une actualisation automatique en Javascript (et JQuery).
J'utiliserai le logiciel Sublime Text 3.

Avant de commencer je tiens à vous préciser que je vais pas vous mâcher le travaille, vous devrez améliorer le système grâce à vos connaissances.

Pour commencer nous allons créer une base de donnée, je vais l’appeler 'chatboxrgfr' et dans cette base de donnée je vais créer une table que j’appellerai 'chatbox' avec trois colonnes, l'id en index primaire et en AUTO INCREMENT, le pseudo en VARCHAR de 255 et le message en text. (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)

Ensuite je vais créer un dossier 'index.php', à l'intérieur je structure déjà l'HTML.

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- On encode la page en utf-8 -->
        <title>Une shoutbox en PHP</title> <!-- Le titre de la page -->
    </head>
    <body>

    </body>
</html>

Maintenant nous allons donc faire le formulaire, c'est-à-dire la saisie de texte, pour le pseudo et le message, le code est bien évidemment à mettre entre les balises body. :oui:

HTML: 
       [/CENTER]
        <form method="POST">
            <input type="text" name="pseudo" placeholder="Entrez votre pseudo">
            <input type="text" name="message" placeholder="Votre message">
            <input type="submit" name="submit" value="Envoyer">
        </form>
[CENTER]
Vous pouvez changer le placeholder, mais pas le 'name', sinon sa ne sera pas coordonnée avec le PHP qui vient plus tard. :ok:

​
Nous avons la base de donnée et le formulaire maintenant nous allons donc au PHP.

Nous allons ouvrir nos balises PHP, au dessus du DOCTYPE, (<?php ?>).
Nous lierons la base de donnée à notre code grâce à une ligne très importante à apprendre !

La ligne : $bdd = new PDO('mysql:host=127.0.0.1;dbname=chatboxrgfr', 'root', '');

Premièrement nous allons dire que nous somme en local (127.0.0.1 = l'IP du serveur local) ensuite on va préciser la base de donnée que nous utilisons, le root signifie le nom d'utilisateur, je met root car il n'y en a pas sur phpmyadmin, et les deux dernières apostrophes signifient le mot de passe, il n'y en a également pas.

Maintenant nous allons faire le PHP, on va faire une série d'étapes et de vérifications avant d'insérer dans la base de donnée.

PHP: 
    if(isset($_POST['submit']) AND isset($_POST['pseudo']) AND isset($_POST['message']) AND !empty($_POST['pseudo']) AND !empty($_POST['message']))
    {
        echo "Ok";
    }

Cette ligne sert à vérifier si l'utilisateur à bien entrer le pseudo, le message et si les cases ne sont pas vides.
Normalement vous avez 'Ok' en haut de votre page.

Maintenant qu'on a vérifié si tout est bon, on va insérer dans la base de donnée, mais bien évidemment en sécurisant un peu.

Code à remplacer à la place du echo "Ok"; !
PHP: 
        $pseudo = htmlspecialchars(trim($_POST['pseudo']));
        $message = htmlspecialchars(trim($_POST['message']));

        $insertmessage = $bdd->prepare('INSERT INTO chatbox(pseudo, message) VALUES (?, ?)');
        $insertmessage->execute(array($pseudo, $message));

J'ai sécurisé la shoutbox en mettant un htmlspecialchars, cette "fonction" fait en sorte qui si l'utilisateur rentre du code genre <script alert('Hacked by jean claude'); </script>, ça sera écrit en texte plein et ça ne l’exécutera pas, et la fonction trim permet d'enlever les espaces au début et à la fin des messages.

Ensuite les deux dernières lignes servent à insérer dans la base de donnée.

Maintenant cliquez sur "Afficher" dans votre base de donnée, normalement vous aurez une petite colonne avec le pseudo, le message et l'id du message :stupéfait:. (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)

Maintenant nous allons faire l'affichage des messages !

Donc on va faire une boucle while avec une variable qui récupère les messages etc...
Je ne sais pas comment décrire sa donc je vais vous passer directement le code.

La boucle est à mettre en dessous du formulaire, avec un petit <br /> pour espacer le tout ;)
PHP: 
            $toutlesmessages = $bdd->query('SELECT * FROM chatbox ORDER BY id DESC');
            while($allmsg = $toutlesmessages->fetch())
            {
                ?>
                    <b><?php echo $allmsg['pseudo']; ?> : <?php echo $allmsg['message']; ?>
                    <br /><br /><br />
                <?php
            }
Vous pouvez styliser le tout, simplement. ;)

Pour l'instant, si vous avez bien tout comme moi votre page devrai ressembler à sa --> (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
) :dance:
Voilà à quoi ressemble mon code --> (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
) :dance:

Le point négatif est que si on met un message sur la shoutbox, et que quelqu'un d'autre, sur un PC différent est aussi sur la page, le message ne s'affichera pas, il faudra qu'il actualise sa page pour que le nouveau message apparaisse. :ok:

Pour que ça s'actualise directement il faudra faire une fonction en Javascript (et JQuery).
Donc là je vais vous mâcher le travaille. ]:)

Importez la librairie JQuery, donc mettez ce script entre vos balises head.
HTML: 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ensuite entourez votre boucle while d'une div avec comme id "shoutbox", ensuite créez un nouveau fichier 'load_messages.php' par exemple, et mettez à l'intérieur de ce nouveau dossier la boucle while, et la ligne qui nous connecte à la base de donnée (en haut de la page) (sa devrais vous donner sa (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)).

Maintenant mettez entre deux balises <script> en bas de votre page le script suivant :
Code: 
setInterval('load_messages()', 2000);
                        function load_messages() {
                            $('#shoutbox').load('load_messages.php');
                        }
Normalement, la boucle while s'actualisera toutes les 2 secondes (2000 millisecondes).

Si vous modifiez la boucle while sur l'index.php, vous devrez également le modifier sur le fichier load_messages.php ;)

Et voila :RG: c'est la fin de ce tuto, aucun c/C n'a été fait au court de ce topic, tout est de moi, je me suis aidé d'un tuto sur YouTube pour l'actualisation du code.​

Si vous avez des questions ou besoin d'aide, n'hésiter pas à m'envoyer un message privé !

:tchuss:

PARTIE 2 : https://reality-gaming.fr/threads/systeme-de-smiley-sur-sa-shoutbox.469977/​
Cliquez pour agrandir...
ceux tuto et t-il destiner au débutant ? :$
 
Haut