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

WhiiTe' · 18 Juillet 2015

Salut

,

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.

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.

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

. (

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.

)

Voilà à quoi ressemble mon code --> (

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

)

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.

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

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/

Mrjoccie · 18 Juillet 2015

Ta skype ? Super tuto

WhiiTe' · 18 Juillet 2015

Mrjoccie a dit:
Ta skype ? Super tuto

Passe en MP avant

Et merci

Kévin 🚀 · 18 Juillet 2015

Good Job

WhiiTe' a dit:
<input type="password" name="message" placeholder="Votre message">

Petite erreur ici en C/c ton code sur le sujet c'est un type="text" le champ message sinon le message s'affichera comme un mdp dans le input ^^

WhiiTe' · 18 Juillet 2015

Faragnight a dit:
Good Job

Petite erreur ici en C/c ton code sur le sujet c'est un type="text" le champ message sinon le message s'affichera comme un mdp dans le input ^^

Ah oui j'ai éditer en plus dans mon éditeur de texte, bien vu merci

Frappe · 19 Juillet 2015

Super tuto

Merci à toi.

HaXGamiG · 19 Juillet 2015

Ta pas fait ça tout seul noob

Bon travallie

Florian. · 19 Juillet 2015

HaX GamiG a dit:
Ta pas fait ça tout seul noob

Bon travallie

Sa fonctionne

cette fois-ci

HaXGamiG · 19 Juillet 2015

RGPG | Heberg-Me a dit:
Sa fonctionne cette fois-ci :rofl:

Al'batard fallait pas le dire :mdr:

Jak Chirak · 19 Juillet 2015

Super tuto, bien réalisé, beau design omg bravo

Mrjoccie · 19 Juillet 2015

merci grace a toi j'ai pu cree ma shoutbox en bootstrap

Go >

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

WhiiTe' · 19 Juillet 2015

HaX GamiG a dit:
Ta pas fait ça tout seul noob

Bon travallie

La shout si ^^ noob

WhiiTe' · 19 Juillet 2015

COMPTEOFF#SOON a dit:
Super tuto, bien réalisé, beau design omg bravo

Merci

WhiiTe' · 19 Juillet 2015

Mrjoccie a dit:
merci grace a toi j'ai pu cree ma shoutbox en bootstrap
Go >
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Whouah c'est très jolie, GG à toi même si c'est une template, tu peut faire une sorte d'espace membres avec des profils pour chaque utilisateurs et tes membres n'auront pas leur pseudo à mettre ^^

HaXGamiG · 19 Juillet 2015

WhiiTe' a dit:
La shout si ^^ noob

Ma bite oui

WhiiTe' · 19 Juillet 2015

HaX GamiG a dit:
Ma **** oui

Bas si tu me crois pas viens Skype et je te le code devant tes yeux

HaXGamiG · 19 Juillet 2015

WhiiTe' a dit:
Bas si tu me crois pas viens Skype et je te le code devant tes yeux

Tu ss pas coder :mdr:

___Romaiin · 20 Juillet 2015

WhiiTe' a dit:
Salut ,

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">  <title>Une shoutbox en PHP</title>  </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.

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.

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($_POST['pseudo']); $message = htmlspecialchars($_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.

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 . (
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.
)
Voilà à quoi ressemble mon code --> (
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
)

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.

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 galerie 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 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é !

Très bien ^^ J'ai simplement une question un peu conne: Est ce que le htmlspecialchars protége des injections SQLs ? Parce que la, je pense que tu protége juste du XSS.

Lagger · 20 Juillet 2015

Merci du partage :love:

Lagger · 20 Juillet 2015

J'ai un problème moi, quand je vais sur ma page, il actualise et après je vois plus les input ...

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

WhiiTe'

Administateur

Mrjoccie

Membre

WhiiTe'

Administateur

Kévin 🚀

Administrateur

WhiiTe'

Administateur

Frappe

Sauvage

HaXGamiG

Développeurs

Florian.

HaXGamiG

Développeurs

Jak Chirak

Membre

Mrjoccie

Membre

WhiiTe'

Administateur

WhiiTe'

Administateur

WhiiTe'

Administateur

HaXGamiG

Développeurs

WhiiTe'

Administateur

HaXGamiG

Développeurs

___Romaiin

imagination.

Lagger

Responsable des lags

Lagger

Responsable des lags