Tutorial MySQL Chatroom

von Webbausteine.de - Version vom 12.12.2014 - einen Chatroom in NetObjects Fusion (NOF) einbauen für ausgewählte Benutzer. Bitte guckt Euch auch die neueste Version auf Werner-Zenk.de an. Ich beschreibe hier allerdings die Version vom 12.12.2014. Der Einbau funktioniert aber ebenso.

Ladet Euch zunächst das Skript bei Webbausteine.de herunter. Entpackt die ZIP-Datei und Ihr erhaltet ein Verzeichnis mit einigen Smileys sowie die Datei

  • chat.php

Sämtliche benötigten Tabellen erstellt das Skript chat.php von Webbausteine.de selbstständig. Gewisse Kenntnisse in HTML, CSS und PHP werden nur notwendig, wenn Ihr das Erscheinungsbild ändern und an Eure Wünsche anpassen wollt.

Legt Euch eine MySQL-Datenbank bei Eurem Provider an.

Öffnet die Datei chat.php, am besten mit einem Editor wie Notepad++, damit die Kodierung UTF-8 (ohne BOM) erhalten bleibt.

Tragt dann Eure, bei der Erstellung der Datenbank vom Provider zur Verfügung gestellten, Verbindungsdaten gleich oben ein. Das sieht dann bei meinem 1&1 Server ungefähr so aus:

// Verbindungsdaten zur Datenbank
$DB_HOST = "db12345678.db.1and1.com"; // Datenbank-Host
$DB_NAME = "db12345678"; // Datenbank-Name
$DB_BENUTZER = "dbo12345678"; // Datenbank-Benutzer
$DB_PASSWORT = "DeinDatenbankPasswort"; // Datenbank-Passwort

Gleich darunter tragt Ihr die Benutzer und deren Passwörter für den Chatroom ein. Ihr könnt beliebig viele Benutzer hinzufügen.

Achtet dabei auf Groß- und Kleinschreibung.

Falls Ihr das Skript direkt in NOF einbauen wollt, dürft Ihr weder Umlaute noch Sonder- oder Leerzeichen verwenden, denn NOF kodiert seine Skripte im ANSI Format und dann werden diese Zeichen nicht korrekt angezeigt.

// Namen und Passwörter
$NAME_PASS["Benutzer1"] = "Passwort1";
$NAME_PASS["Benutzer2"] = "Passwort2";

Danach könnt Ihr jedem Benutzer eine andere Farbe zur Anzeige seines Benutzernamens geben. Achtet auf exakt die gleiche Schreibweise der Benutzer, wie oben bei den eingetragenen Benutzernamen. Benutzer, die hier nicht aufgeführt werden, erscheinen schwarz.

// Namen und Farben
$NAME_COLOR["Benutzer1"] = "#EE0000";
$NAME_COLOR["Benutzer2"] = "#0000EE";

Die weiteren Einstellungen sind gut kommentiert und selbsterklärend. Ihr könnt noch die maximal anzuzeigenden, neuesten Einträge bestimmen sowie die Tage, wann ältere Beiträge aus der Datenbank gelöscht werden sollen und die Zeit, wann ein nicht aktiver Benutzer automatisch ausgeloggt werden soll.

Wenn Ihr das Skript mittels Inlineframe anzeigen lassen wollt, dann seid Ihr bereits fertig. Legt Euch ein Verzeichnis mit Eurem FTP-Programm auf dem Server an und kopiert das so konfigurierte Skript (chat.php) inklusive der Smileys in dieses Verzeichnis und verlinkt das Inlineframe zu der Datei chat.php.

Einrichten der Datenbank-Tabellen:

Den allerersten Aufruf der Datei chat.php auf Eurem Server, nehmt Ihr mit der Aktion “?install” vor. Dann werden sämtliche benötigten Tabellen der MySQL-Datenbank automatisch vom Skript angelegt. Ihr gebt also in der Browser-Zeile die URL zu dieser Datei ein, wie z.B.:

www.DeineDomain.de/Verzeichnis/chat.php?install

Nach erfolgreicher Installation erhaltet Ihr einen Hinweis und könnt mittels Eingabe Eures Benutzernamens sogleich den Chatroom betreten und loslegen.

Direkter Einbau in NetObjects Fusion (NOF):

Sucht Euch eine Eurer NOF-Seiten zum Einbau des Chatrooms aus und stellt die Dateierweiterung dieser Seite auf .php um.

> Menü oben > Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen

Gebt dieser Seite dann den Seitennamen chat (wie beim Original-Skript), damit Ihr nicht das gesamte Skript umschreiben müsst.

Für den direkten Einbau in NOF müsst Ihr das Skript in mehrere Teile zerlegen. Nehmt die Einstellungen für den Zugang zur Datenbank und für die Benutzer ebenso, wie oben beschrieben, vor.

Kopiert nun den oberen Teil von <?php bis zum schließenden Tag ?> an den Beginn Eurer Seite - also bis <!DOCTYPE html> (was Ihr nicht mit kopieren dürft).

> Layout markieren > Fenster “Layout-Eigenschaften” > ganz oben “Beginn der Seite” einfügen (keine Leerzeile lassen)

Anschließend kopiert Ihr Euch das Skript mit den Ajax-Funktionen von <script> bis zum schließenden Tag </script>und fügt das ebenfalls in die HTML des Layouts ein. Wenn Ihr wollt, könnt Ihr noch die CSS von <style> bis zum schließenden Tag </style> mit kopieren oder Eure eigene CSS erstellen, bzw. die vorhandene von NOF verwenden.

> Layout markieren > Fenster “Layout-Eigenschaften” >  “Zwischen Head Tags” einfügen

Zieht Euch nun, an der Stelle wo das Formular zum einloggen erscheinen soll, ein Textfeld auf und kopiert das Skript unten in den HTML Code-Editor des Textfeldes.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen

<?php
// Log In
if (!isset($_SESSION["user"])):
 if (isset($_GET["install_ok"])) print '<p>Installation OK!</p>';
 exit ('<form action="chat.php" method="post">' .
  '<label>Name: <input type="text" name="user" required="required" autofocus="autofocus"></label><br>' .
  '<label>Pass: &nbsp; <input type="password" name="pass" required="required"></label> ' .
  '<input type="submit" value=" &gt; "></form></body></html>');
endif;
?>

<form action="javascript:post()" method="post" id="form" autocomplete="off">
 <a href="?logout" title="Zum Abmelden hier klicken!"><?php echo $_SESSION["user"]; ?></a>:
 <input type="text" name="text" id="text" autofocus="autofocus" spellcheck="true" style="width: 80%">
</form>

Zur Anzeige des Chatrooms zieht Ihr Euch darunter ein weiteres Textfeld auf und fügt den Code unten ebenso in den HTML Code-Editor dieses Textfeldes ein.

<p id="chat"></p>

Fertig!

Mit etwas Kenntnissen könnt Ihr leicht das Aussehen des Chatrooms Euren Wünschen anpassen. Hier noch zwei Screenshots.

Anmeldung:

Anmeldung Chatroom

Chatroom:

Chatroom Ansicht

Viel Erfolg und Spaß beim Chatten!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik