Alle Kategorien
Suche

Chat ohne Java - so funktioniert er auf Ihrer Homepage

Chat-Funktion für die eigene Homepage erstellen.
Chat-Funktion für die eigene Homepage erstellen.
Mit einer Chat-Funktion können Sie Ihre Homepage um eine nützliche Option erweitern, mit der Sie zum Beispiel in Echtzeit mit Ihren Besuchern kommunizieren. Welche Möglichkeiten Sie haben, einen Chat ohne Java einzufügen, erfahren Sie hier.

Eigenen Chat erstellen

Wenn Sie einen Chat ohne Java für Ihre Homepage erstellen möchten, haben Sie grundsätzlich zwei verschiedene Möglichkeiten.

  • Entweder Sie laden sich im Internet ein kostenloses Script herunter, das auf einer anderen Technologie wie zum Beispiel Java-Script, jQuery und/oder PHP basiert oder Sie erstellen selbst einen Chat.
  • Beide Verfahren haben ihre Vorteile. Während Sie mit einem kostenlosen Script schnell einen Chat einbinden können, ist das eigene Programmieren zwar etwas aufwendiger, allerdings können Sie Ihren Chat dann auch nach Ihren Wünschen und Bedürfnissen erstellen.
  • Kostenlose Chat-Scripts für Ihre Homepage finden Sie zum Beispiel auf der Website hotscripts
  • Im Folgenden erfahren Sie, wie Sie schnell die Grundfunktionen eines Chats mit jQuery, PHP und SQL in der Datei "index.php" erstellen können.

HTML-Grundgerüst erstellen

Zunächst müssen Sie sich um die Darstellung kümmern, indem Sie das Grundgerüst in HTML erstellen.

  • Erzeugen Sie dafür zunächst einen allgemeinen Rahmen für Ihren Chat und erstellen Sie danach das Formular zum Absenden der Nachrichten. Dies könnte zum Beispiel so aussehen:
    <div id="chatbox">
    <form id="form">
    Name: <input id="name" type="text" maxlength="25" />
    Nachricht: <input id="nachricht" type="text" maxlength="255" />
    <input id="send" type="submit" value="Schreiben" /></td>
    </form>
    </div>
  • Zuletzt müssen Sie noch den Bereich ("box") definieren, wo die abgesendeten Nachrichten in Echtzeit dargestellt werden. Dies könnte bspw. wie folgt geschehen (nach "</form>" und vor "</div>):
    <div id="box">
    <div class="inhalt">
    <div>Letzte Nachrichten:</div>
    <div id="nachrichten"></div>
    </div>
    </div>
  • Die Div-Bereiche "chatbox", "box", "inhalt" und "nachrichten" könnten Sie dann noch im Head-Bereich mit CSS gestalten.

SQL-Aufbau und PHP-Code

Als Nächstes müssen Sie sich um die SQL-Datenbank, in welcher die Chat-Daten gespeichert werden, und den PHP-Code, mit welchem die Daten in die Datenbank gespeichert oder aus dieser ausgelesen werden, kümmern.

  • Die SQL-Datenbank sollten die Spalten "id", "name", "nachricht" und "datum" haben.
  • Die Spalte "id" dient der genauen Zuordnung und die restlichen Spalten speichern die wichtigsten Daten.
  • Fügen Sie nun an den Anfang Ihrer PHP-Datei den folgenden PHP-Code ein:
    <?
    $con = mysql_connect ("localhost","benutzer","passwort") or  die("Could not connect");
    $db = mysql_select_db("chat",$con) or die("Keine Verbindung");

    if ($_GET['mode'] == "einfuegen")
    {
    $name = $_GET['name'];
    $nachricht = addslashes($_GET['nachricht']);
    $sql = "INSERT INTO chatbox 'name','nachricht','datum' VALUES ('".$name."','".$nacricht."',CURRENT_TIMESTAMP)";
    $query = mysql_query($sql);
    }

    $sql_laden = "SELECT * FROM chatbox ORDER BY datum DESC";
    $query_laden = mysql_query($sql_laden);
    $laden = mysql_fetch_array($query_laden);
    do
    {
    echo $laden['name'] . ': '.$laden['nachricht'] . '<br />
    Von: '.$laden['datum'].'<br />';
    }
    while($laden = mysql_fetch_array($query_laden));
    ?>
  • In den ersten Zeilen erstellen Sie eine Verbindung zur SQL-Datenbank, wobei Sie "benutzer" und "passwort" noch mit Ihren Zugangsdaten ergänzen müssten und die Datenbank "chat" ggf. in den Namen Ihrer Datenbank ändern.
  • Der nächste Abschnitt erzeugt das Einfügen in die Datenbank und die in die Tabelle "chatbox".
  • Der letzte Teil lädt die Daten aus der Tabelle "chatbox" und gibt diese für jeden Eintrag einzeln aus. 

Dynamische Ausgabe mit jQuery anstatt Java

Damit Ihr Chat auch dynamisch wird, sich also automatisch aktualisiert, müssen Sie noch einen jQuery-Code erzeugen.

  • Dazu benötigen Sie zunächst die jQuery-Library, die Sie mit "<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>" in den head-Bereich Ihrer HTML-Datei einbinden müssen.
  • Nun folgt der jQuery-Code. Diesen können Sie im Head-Bereich entweder zwischen "<script></script>" einfügen oder in einer .js-Datei speichern und dann einbinden. 
  • Der Code würde dann wie folgt aussehen:
     $(document).ready(function(){
    aktuellChat = function aktuellChat(){
    $.ajax({
    type: "POST",
    url: "index.php",
    data: "mode=aktuell",
    success: function(html){
    $('#nachrichten').html(html);
    }
    });
    }
    aktuellChat();
     
    $("#form").submit(function() {
    name = $('#name).val();
    nachricht = $('#nachricht').val();
    $.ajax({
    type: "POST",
    url: "index.php",
    data: "mode=einfuegen" + "&name=" + name + "&nachricht=" + nachricht,
    success: function(html){
    $('#nachrichten').html(html);
    }
    });
    $('#nachricht').val(""); 
    });
    setInterval(aktuellChat, 3000 );
    });
  • Im ersten Teil erzeugen Sie die Funktion "aktuellChat", mit der sich die Daten ausgeben lassen.
  • Der zweite Teil verarbeitet die Formular-Daten, schickt diese an den PHP-Code und aktualisiert dann die Nachrichten-Anzeige, wobei sich mit " $('#nachricht').val("");" das Eingabefeld für die Nachricht wieder leeren lässt.
  • Die letzte Zeile ("setInterval...") lässt die Nachrichten automatisch alle 3 Sekunden neu laden.
helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.
Teilen: