Anzeige
Tutorialbeschreibung

Eine einfache aber auch sichere Shoutbox für die eigene Website.

Eine einfache aber auch sichere Shoutbox für die eigene Website.

Jeder von euch hat bestimmt schon mal solch eine Shoutbox gesehen und sie evt. auch benutzt. Es ist ein kleines Textfeld mit einem Eingabefeld in das man Kommentare zur Website oder ähnliches Eintragen kann. Der Eintrag wird anschließend in einer MySQL Datenbank gespeichert und ausgelesen, sodass der Inhalt im Textfeld angezeigt wird. Ein netter und lustiger Effekt für die eigene Website.


Schritt 1:
Als Erstes erstellen wir uns eine neue php-Datei -> home.php

In dieser Datei Bauen wir uns zunächst unser Aussehen zusammen. Die Funktion kommen später.

Hier erstmal der Quelltext:

[CODE]

<html>
<head>
<title>Home</title>
</head>
<body>
  <form id="shoutbox" name="shoutbox" method="post" action="home.php">
    <table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">SHOUTBOX</td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="hidden" name="send" id="send" value="1" />
          <textarea name="ausgabe" cols="19" rows="5" readonly></textarea>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="absender" type="text" id="absender" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>Nachricht</td>
        <td><input name="text" type="text" id="text" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left"><input type="submit" name="button" id="button" value="Senden" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

[/CODE]

Ihr könnt den Quelltext einfach in eure home.php kopieren und speichern, anschließend ladet ihr die Datei hoch und folgendes müsstet ihr zu sehen bekommen:

Bild 1Bilder








 


Zum Verständniss:

Als Erstes wird eine Form erstellt deren Ziel die selbe Datei ist, in der wir uns gerade befinden. Da unser PHP Code der die Usereingaben verarbeitet im selben Document vorliegen wird. Des weiteren bekommt unser Formular die Sendeeigenschaft 'post', da die Formulareingaben versteckt ans Ziel gelangen sollen und nicht über die Adresszeile, wie es bei 'get' der Fall wäre.

Zum Zweiten wird im Formular eine Tabelle erstellt, um unserer Shoutbox ein wenig Form zu verleihen. Natürlich könnt ihr das Aussehen in eurem ermessen noch verändern! ;-)

In der Dritten Zeile findet ihr ein verstecktes Formularfeld. Dieses Formularfeld ist, wie die Eigenschaft 'hidden' schon sagt, versteckt und später im Browser nicht zu sehen. Zum sinn später mehr. In der selben Zeile findet ihr auch noch eine Textarea. Dieses mehrzeilige Textfeld wird später unsere Einträge ausgeben. In Zeile vier und fünf findet ihr ein Textfeld. In diese Textfelder werden eure User später ihren Namen und ihre Nachricht eintragen. In der letzten Zeile findet ihr dann schließlich noch den Button zum Senden des Formulars.


Schritt 2:

Als Zweites stellen wir jetzt eine Verbindung zur MySQL Datenbank her.

[CODE]

<?php
$dbHost = "localhost";
$dbUser = "benutzername";     //Hier bitte den Datenbank Benutzernamen eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbPass = "passwort";             //Hier bitte das Datenbank Passwort eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbName = "datenbank";         //Hier bitte den Namen der Datenbank eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");
?>
<html>
<head>
<title>Home</title>
</head>
<body>
  <form id="shoutbox" name="shoutbox" method="post" action="home.php">
    <table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">SHOUTBOX</td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="hidden" name="send" id="send" value="1" />
          <textarea name="ausgabe" cols="19" rows="5" readonly></textarea>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="absender" type="text" id="absender" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>Nachricht</td>
        <td><input name="text" type="text" id="text" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left"><input type="submit" name="button" id="button" value="Senden" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

[/CODE]
Wie man unschwer erkennen kann, ist am Anfang des Dokuments PHP-Code hinzugekommen. ;-)

Bitte ersetzt die Platzhalter durch eure Angaben!!!!

Schritt 3:

Nun haben wir eine Verbindung zur Datenbank aufgebaut, aber was soll man mit einer Datenbank wenn man keine Tabelle zum eintragen von Werten hat. Um eine solche Tabelle zu erstellen hier ein kleines Script:

[CODE]
<?php

$dbHost = "localhost";
$dbUser = "benutzername";    //Hier bitte den Datenbank Benutzernamen eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbPass = "passwort";             //Hier bitte das Datenbank Passwort eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbName = "datenbank";         //Hier bitte den Namen der Datenbank eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");

$sql = 'CREATE TABLE `tut_shoutbox` ('
        . ' `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, '
        . ' `text` TEXT NULL, '
        . ' `absender` CHAR(255) NULL'
        . ' )'
        . ' ENGINE = myisam;';
mysql_query($sql) or die("Konnte die Tabelle nicht erstellen!");

?>
[/CODE]
Bitte wieder die Platzhalter durch eure Angaben ersetzen!!! Das Script als *.php speichern, hochladen und einmal ausführen. Sollte die Seite Weiß bleiben ist die Tabelle erstellt worden, wenn da steht: 'Konnte die Tabelle nicht erstellen!' habt ihr falsche Angaben gemacht.

Schritt 3:

So, da nun die Tabelle vorhanden ist und die Verbindung steht kommen wir zum Herzstück des Ganzen: die Funktion zum Eintragen in die Datenbank. Aber zuerst wieder das Script:
[CODE]
<?php
$dbHost = "localhost";
$dbUser = "benutzername";     //Hier bitte den Datenbank Benutzernamen eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbPass = "passwort";             //Hier bitte das Datenbank Passwort eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbName = "datenbank";         //Hier bitte den Namen der Datenbank eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");

if($_POST['send']==1) {
    //Leerstellen entfernen
    $_POST['absender']=trim($_POST['absender']);
    $_POST['text']=trim($_POST['text']);
    //evt. vorhandenen HTML-Code entfernen
    $_POST['absender']=strip_tags($_POST['absender']);
    $_POST['text']=strip_tags($_POST['text']);
    //Sonderzeichen mit htmlentities ersetzen
    $_POST['absender']=htmlentities($_POST['absender']);
    $_POST['text']=htmlentities($_POST['text']);
    //testen, ob Felder ausgefüllt sind
    if(!$_POST['absender']){$fehler="Bitte geben Sie einen Namen an!<br /><br />";}
    if(!$_POST['text']){$fehler.="Bitte geben Sie eine Nachricht ein!<br /><br />";}
   
    if($fehler) {
        $meldung="<font color=red>".$fehler."</font>";
        unset($_POST['send']);
    } else {
        $sql="
          INSERT INTO
            tut_shoutbox (text, absender)
          VALUES
            (
            '".mysql_real_escape_string($_POST['text'])."',
            '".mysql_real_escape_string($_POST['absender'])."'
            )
        ";
        //SQL-String an die Datenbank schicken
        mysql_query($sql);
        $meldung="Ihre Angaben wurden aufgenommen.";
    }
}
?>
<html>
<head>
<title>Home</title>
</head>
<body>
  <form id="shoutbox" name="shoutbox" method="post" action="home.php">
    <table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">SHOUTBOX</td>
      </tr>
      <tr>
        <td colspan="2"><?php echo $meldung; ?></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="hidden" name="send" id="send" value="1" />
          <textarea name="ausgabe" cols="19" rows="5" readonly></textarea>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="absender" type="text" id="absender" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>Nachricht</td>
        <td><input name="text" type="text" id="text" value="" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left"><input type="submit" name="button" id="button" value="Senden" /></td>
      </tr>
    </table>
  </form>
</body>
</html>
[/CODE]

WOW sieht viel aus, ist es aber nicht! :-)

1. mit if($_POST['send']==1) wird erstmal geschaut ob das Formular abgeschickt wurde, vlt. erinnerst du dich noch an unser verstecktes Formularfeld: 'send' das den Wert '1' hatte. Genau das wird hier abgefragt. Denn sollte das Formular nicht abgeschickt worden sein, dann gibt es die Variable $_POST['send'] auch nicht.

2. mit den folgenden Funktionen: trim, strip_tags und htmlentities werden die Leerstellen entfernt, die eingaben von HTML-Code gesäubert und Umlaute wie 'ä, ü und ö' durch sogenannte htmlentities ersetzt.

3. mit den beiden folgenden Zeilen

    if(!$_POST['absender']){$fehler="Bitte geben Sie einen Namen an!<br /><br />";}
    if(!$_POST['text']){$fehler.="Bitte geben Sie eine Nachricht ein!<br /><br />";}

wird geprüft, ob die felder überhaupt ausgefüllt wurden. Wenn das nicht der Fall sein sollte wird eine Variable 'fehler' mit einer Fehlermeldung versehen, die dann später ausgegeben wird.

4. Mit der nächsten if-verzweigung wird geprüft ob die Variable 'fehler' existiert, was sie nicht tut, wenn die Formularfelder ausgefüllt wurden. Sollte sie aber existieren wird die Meldung formatiert und an die Variable 'meldung' übergeben und später ausgegeben. Wenn sie nicht existiert wird der eben genannte Schritt übersprungen und der Befehlskörper der else angabe wird ausgeführt. Das wäre in unserem Fall der Eintrag der Inhalte aus den Formularfeldern in die Datenbank.
Und wieder kommt die Variable 'meldung' ins Spiel, aber diesmal wird sie mit einer positiven Nachricht versehen. Undzwar damit, dass die Angaben aufgenommen wurden.

5. In der zweiten Zeile unserer Layout Tabelle wird nun unsere Meldung ausgegeben, die uns sagt, ob wir etwas falsch gemacht haben oder ob unsere Eingaben erfolgreich aufgenommen wurden.

Schritt 4: Die Vollendung

[CODE]
<?php
$dbHost = "localhost";
$dbUser = "benutzername";     //Hier bitte den Datenbank Benutzernamen eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbPass = "passwort";             //Hier bitte das Datenbank Passwort eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$dbName = "datenbank";         //Hier bitte den Namen der Datenbank eintragen. Wenn nicht bekannt -> Serveradministrator bzw. Provider befragen!
$connect = @mysql_connect($dbHost, $dbUser, $dbPass) or die("Konnte keine Verbindung zum Datenbankserver aufbauen!");
$selectDB = @mysql_select_db($dbName, $connect) or die("Konnte die Datenbank <b>$dbName</b> nicht auswählen!");

if($_POST['send']==1) {
    //Leerstellen entfernen
    $_POST['absender']=trim($_POST['absender']);
    $_POST['text']=trim($_POST['text']);
    //evt. vorhandenen HTML-Code entfernen
    $_POST['absender']=strip_tags($_POST['absender']);
    $_POST['text']=strip_tags($_POST['text']);
    //Sonderzeichen mit htmlentities ersetzen
    $_POST['absender']=htmlentities($_POST['absender']);
    $_POST['text']=htmlentities($_POST['text']);
    //testen, ob Felder ausgefüllt sind
    if(!$_POST['absender']){$fehler="Bitte geben Sie einen Namen an!<br /><br />";}
    if(!$_POST['text']){$fehler.="Bitte geben Sie eine Nachricht ein!<br /><br />";}
   
    if($fehler) {
        $meldung="<font color=red>".$fehler."</font>";
        unset($_POST['send']);
    } else {
        $sql="
          INSERT INTO
            tut_shoutbox (text, absender)
          VALUES
            (
            '".mysql_real_escape_string($_POST['text'])."',
            '".mysql_real_escape_string($_POST['absender'])."'
            )
        ";
        //SQL-String an die Datenbank schicken
        mysql_query($sql);
        $meldung="Ihre Angaben wurden aufgenommen.";
    }
}
?>
<html>
<head>
<title>Home</title>
</head>
<body>
  <form id="shoutbox" name="shoutbox" method="post" action="home.php">
    <table width="200" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">SHOUTBOX</td>
      </tr>
      <tr>
        <td colspan="2"><?php echo $meldung; ?></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="hidden" name="send" id="send" value="1" />
          <textarea name="ausgabe" cols="19" rows="5" readonly>
              <?php
                  $sql="SELECT * FROM tut_shoutbox";
                  $result=mysql_query($sql);
                  for($i=0;$i<mysql_num_rows($result);$i++) {
                    $ergebnis[$i]=mysql_fetch_array($result);
                  }
                  for($i=0;$i<count($ergebnis);$i++) {
                    $ergebnis[$i]['absender']=html_entity_decode($ergebnis[$i]['absender']);
                    $ergebnis[$i]['text']=html_entity_decode($ergebnis[$i]['text']);
                    echo $ergebnis[$i]['absender']." ".$ergebnis[$i]['text']." "." ";
                  }
              ?>
          </textarea>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="absender" type="text" id="absender" value="<?php echo $_POST['absender']; ?>" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>Nachricht</td>
        <td><input name="text" type="text" id="text" value="<?php echo $_POST['text']; ?>" size="13" maxlength="255" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="left"><input type="submit" name="button" id="button" value="Senden" /></td>
      </tr>
    </table>
  </form>
</body>
</html>
[/CODE]

Da man gerne auch noch das lesen möchte was man geschriben hat, wird nun noch der inhalt unsere Datenbanktabelle ausgegeben.

Die beiden folgenden Zeilen:
                  $sql="SELECT * FROM tut_shoutbox";
                  $result=mysql_query($sql);
machen nichts anderes als den Inhalt der Datenbanktabelle 'tut_shoutbox' auszuwählen und ihn in der Variable 'result' zu speichern.
In dem nun folgenden Schleifenkopf wird zuerst ausgezählt wieviele Einträge vorhanden sind. Und so viele einträge wie vorhanden sind wird auch die Schleife durchlaufen. Und bei jedem durchlauf wird in einem Array nach und nach jeder Eintrag gespeichert. Dieses Array wird in der nachfolgenden Schleife im Schleifenkopf wieder überprüft und gezählt wieviele Elemente das Array enthält. Soviele wie es enthält wird die Schleife wieder durchlaufen. Im Schleifenkörper werden zunächsteinmal die htmlentities die wir vorhin aus unseren Umlauten gebildet haben, wieder in welche verwandelt. Anschließend wird der komplette Inhalt des Arrays ausgegeben, sodass alle Einträge die gemacht wurden sichtbar werden.

Zusätzlich haben die Textfelder für den Namen und die Nachricht nun auch folgenden Inhalt bekommen:

<?php echo $_POST['absender']; ?>
und
<?php echo $_POST['text']; ?>

Warum?:

Man stelle sich vor, dass jemand eine lange Nachricht schreibt und dabei seinen Namen vergisst einzutragen und den Button 'Senden' drückt. Was wird wohl passieren: Die Applikation merkt, dass nicht alle felder ordnungsgemäß ausgefüllt wurden und gibt dementsprechend die Fehlermeldung aus... aber was ist mit der langen Nachricht: verloren...warum auch nicht - niemand hat dem Script gesagt, dass es den Inhalt wieder ausgeben soll wenn was falsch war!!! ;-)



So das wars...ich hoffe ihr habt es verstanden und es klappt bei euch wenn nicht einfach mal mailen(reckseb@gmx.de) oder über psd ne Nachricht posten.

Ich würde mich Natürlich auch über Feedback freuen :-)

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 19.07.2011 - 14:27

Schön erklärt. Vielen Dank für das Tut!
LG Susan

Portrait von CrOsBe
  • 05.06.2011 - 03:43

hat super funktioniert, Dankeschön!

Portrait von ceyhan
  • 11.02.2011 - 11:16

supi tut aber ich würde mich noch fragen wie die textzeile autoscrollen damit meine besucher nicht immer scrollen müssen

Portrait von testuserxc
  • 15.11.2010 - 21:50

Beide Daumen hoch. Danke!

Portrait von Supersuzi
  • 13.09.2010 - 08:12

Spitze beschrieben, Danke fürs teilen

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 17.06.2010 - 14:00

schönes Tut. Man kanns auch mit PHP und XML machen was ich persönlich besser finde

Portrait von InYaFace
  • 25.04.2010 - 04:04

kann mir das mal jmd möglicher weiße zusamm stelln und dan schicken ^^ ich blick im php nicht durch :D wäre nett danke schon ma im vorraus

PS tolles tut hab ich schon lange gesucht :)

Portrait von icehawk2
  • 17.01.2010 - 17:02

Sowas hab ich gesucht. . . danke dir . . .

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 18.12.2009 - 09:42

muss mich anschließen. aufschlussreich aber ein bisschen unübersichtlich! Danke, danke.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 28.10.2009 - 21:26

Gutes Erklärt aber bssl. unübersichtlich

Portrait von Blackout289
  • 04.10.2009 - 20:17

ich finds au ned schlecht^^
kann mir jmd sagen wie man des einstellt (ich weiß falsches wort :D)
das die Textarea automatisch nach unten scrollt?
mit autoscroll bekomm ich das iwie nich hin...bin noch recht neu auf dem Gebiet.

Portrait von Destruction929
  • 04.09.2009 - 22:54

Nix besonderes aber denke für Anfänger gut erklärt :) :)

Portrait von yoka86
  • 25.08.2009 - 16:30

sehr schönes tut!!!
nun hab ich auch mal den aufbau einer shoutbox verstanden :)

Portrait von susi171188
  • 03.08.2009 - 08:26

find ich wirklich gut gelungen. toll aufgebaut und gut erklärt...

Portrait von myhotshot
  • 07.07.2009 - 00:43

ich finde ihn gut wenn ich jetz noch wüste .. na ja hast ne PN

Portrait von PrOOnOOb
  • 10.06.2009 - 13:28

Colles Ding Gut beschrieben

Portrait von xyzutschixyz
  • 09.06.2009 - 17:07

stimmt hab ich übersehen. naja jetzt ist schonmal sicher, dass du es nicht vergisst mit ajax zu machen ;)

Portrait von xyzutschixyz
  • 09.06.2009 - 13:56

würde zwar gut funktionieren, da aber bei einer shoutbox oder chat ständig einträge gemacht werden können, würde man dort besser ajax vorziehen. so mach ich es zumindest, denn dadurch ist eine serverüberlastung ausgeschlossen bzw. minimiert.

Portrait von Flegma
  • 09.06.2009 - 16:53

Zieh dir mal meine Antwort auf den ersten Comment rein ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 01.06.2009 - 13:09

perfekt! hat gut geklappt danke

x
×
×