Chatter sans Java - de sorte qu'il fonctionne sur votre site

Chatter sans Java - de sorte qu'il fonctionne sur votre site


Créer la fonction de chat pour votre site web.

Créez votre propre chat

Si vous voulez créer une conversation sans Java pour votre site web, vous avez deux options.

  • Soit télécharger sur Internet un script libre vers le bas, qui est basé sur une technologie différente tels que Java script, jQuery et / ou PHP ou même de créer une discussion.
  • Les deux méthodes ont leurs avantages. Alors que vous pouvez intégrer rapidement une discussion avec un script gratuit qui possèdent la programmation est un peu compliqué, mais vous pouvez créer votre discussion après vos souhaits et besoins.
  • Gratuit script chat pour votre site web, visitez le site Web par exemple hotscripts .
  • Ci-dessous, vous apprendrez comment vous pouvez rapidement créer les fonctions de base d'un chat en utilisant jQuery, PHP et SQL dans le fichier "index.php".


  • Créer un lecteur MP3 avec PHP - comment cela fonctionne:

    Si vous programmez votre site web avec PHP, tandis que d'un lecteur MP3 ...

Créer la structure HTML

D'abord, vous devez prendre soin de la présentation par la création du cadre de base en HTML.

  • Pour ce faire, créez d'abord un cadre général pour que le chat, puis créer le formulaire pour envoyer les messages. Cela pourrait ressembler à ceci:
    <Div id = "chat">
    <Form id = "forme">
    Nom: <input id = type "nom" = "text" maxlength = "25" />
    Message: <input id = "message" type = "text" maxlength = "255" />
    <Id d'entrée = "envoyer" type = "submit" value = "lettre" /> </ td>
    </ Form>
    </ Div>
  • Enfin, vous devez également définir la zone ("box") où les messages envoyés sont affichés en temps réel. Cela pourrait, par exemple, comme suit (en conformité avec "</ form>" et avant "</ div>) .:
    <Div id = "box">
    <Class Div = "contenu">
    <Div> Dernières nouvelles: </ div>
    <Div id = "nouvelles"> </ div>
    </ Div>
    </ Div>
  • La Div-zones "chat", "boîte", "contenu" et "messages" vous pourriez encore faire la section de tête avec CSS.

SQL Conception et du code PHP

Ensuite, vous aurez besoin de discuter dans lequel les données sont stockées dans la base de données SQL, et le code de PHP, avec laquelle les données sont stockées dans la base de données ou lues à partir de cette inquiétude.

  • La base de données SQL doit avoir le colonnes "id", "name", "message" et "Date".
  • La colonne "id" est la répartition exacte et les colonnes restantes stocker les données les plus importantes.
  • Maintenant, vous ajouter à la partie supérieure de votre fichier PHP du code PHP suivant:
    <?
    Con $ = mysql_connect ("localhost", "utilisateur", "password") or die ("Impossible de se connecter");
    $ Db = mysql_select_db ("chat", con $) or die ("Impossible de se connecter");

    if ($ _ GET ['mode'] == "Insérer")
    {
    $ Nom = $ _ GET ['nom'];
    $ message = addslashes ($ _ GET ['message']);
    $ Sql ​​= "INSERT INTO chatbox 'nom', 'message', 'Date' VALUES ('"', '' $ Nacricht .. "', CURRENT_TIMESTAMP $ Nom..)";
    $ Query = mysql_query ($ sql);
    }

    $ Sql_laden = "SELECT * FROM chatbox Tri par date DESC";
    $ Query_laden = mysql_query (sql_laden $);
    Télécharger $ = mysql_fetch_array (query_laden $);
    faire
    {
    echo $ inviter ['nom']. ':'. $ Inviter ['message']. »<br />
    De: '. $ Inviter ["date"] <br />'; '.
    }
    while ($ upload = mysql_fetch_array (query_laden $));
    ?>

  • Dans la première rangée, vous créez une connexion à la base de données SQL, "utilisateur" et "Mot de passe" même avec votre accès viendrait compléter et, si nécessaire, modifier la base de données "chat" dans le nom de votre base de données.
  • La section suivante génère l'insertion dans la base de données et dans le tableau "chat".
  • La dernière partie de charger les données de la table "chat" et leur donne individuellement pour chaque élément.

Sortie dynamique avec jQuery au lieu de Java

Pour vous assurer que votre conversation est également dynamique, afin de se mettre à jour automatiquement, vous avez encore besoin de créer un code jQuery.

  • Vous devrez d'abord la bibliothèque jQuery, vous offrir un "<script type =" text / javascript "src =" https://code.jquery.com/jquery-latest.min.js "> </ script>" dans doit inclure la section de la tête de votre fichier HTML.
  • Maintenant, le code jQuery suit. Vous pouvez soit insérer entre "<script> </ script>" ou l'enregistrer dans un fichier .js et puis incorporer dans la région de la tête.
  • Le code ressemblerait alors à ceci:
    $ (Document) .ready (function () {
    discussion courant = fonction actuellement chatter () {
    .ajax $ ({
    tapez: "POST"
    url: "index.php"
    Données "mode = actuelle"
    succès: function (html) {
    $ ('# Message') html (html).
    }
    });
    }
    Dialoguez actuellement ();

    $ ("# Formulaire»). Proposez (function () {
    name = $ ('# nom) .val ();
    message = $ ('# message') val ().
    .ajax $ ({
    tapez: "POST"
    url: "index.php"
    "Mode = Insertion" Data + "& name =" + nom + "& message =" + nouvelles
    succès: function (html) {
    $ ('# Message') html (html).
    }
    });
    . $ ('# Message') val ("");
    });
    setInterval (conversation en cours, 3000);
    });

  • Dans la première, vous créez la fonction "chat en cours" avec laquelle des données de sortie.
  • La deuxième partie traite les données de formulaire, les envoie au code PHP et mis à jour l'affichage du message, avec "(") $ ('# message') val. ";" le champ de saisie pour le message peut être à nouveau vide.
  • La dernière ligne («setInterval ...") peut rechargera automatiquement toutes les 3 secondes le message.
MOTS-CLÉS: