Die Shoutbox als Website Feature

Man sieht sie so mancherorts auf Webseiten – kleine Pinnwände oder neudeutsch: Shoutboxes. Über sie kann der Besucher ähnlich wie in einem Chat eine kleine Nachricht hinterlassen, die dann für alle Besucher sichtbar ist.

Angefangen hat die Mode, wie so vieles, in den USA. Kleine Bereiche, über die ihre Besucher Nachrichten auf der Homepage hinterlassen können. Auf www.shoutboxes.de und anderen Websites lässt sich kostenlos eine solche Shoutbox für die eigenen Seiten mieten – doch, das Ganze ist auch im Eigenbau möglich – mit PHP und MySQL.

Kostenlose Shoutbox von Shouti.de

Unsere Shoutbox soll im Großen und Ganzen die gleichen Features haben, wie das Beispiel von Shouti.de. Die Daten werden in einer MySQL-Datenbank hinterlegt.

Diese Datenbank hat folgende Struktur:

 CREATE TABLE `shoutbox` (
`id` SMALLINT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 60 ) NOT NULL ,
`nachricht` VARCHAR( 120 ) NOT NULL ,
`email` VARCHAR( 80 ) NOT NULL ,
`date` VARCHAR( 30 ) NOT NULL ,
`ip` VARCHAR( 15 ) NOT NULL ,
PRIMARY KEY ( `id` ) 
);

Das Basisskript sieht wie folgt aus:

      <?php 
// Daten für die Datenbankverbindung 
$db_host = "localhost"; // Host 
$db_user = "tfetzer"; // User 
$db_password = "tfetzer"; // Passwort
$db_name = "ju"; // Datenbank 
//Aufbau der Datenbankverbindung
mysql_connect($db_host,$db_user,$db_password) or die(mysql_error()); 
mysql_select_db($db_name) or die(mysql_error());

      if(isset($_POST['submit']))
{ 
if(!$_POST['name']) { 
echo "Fehler: Bitte geben Sie ihren Namen ein"; 
die; 
} 
if(!ereg("^.+@.+\..+$", $_POST['email'])) { 
echo "Fehler: Bitte geben Sie eine gültige Emailadresse ein"; 
die; 
} 
if(!$_POST['nachricht']) { 
echo 'Fehler: Bitte geben Sie eine Nachricht ein.'; 
die; 
} 

       $nachricht = strip_tags($_POST['nachricht'], ''); 
$email = strip_tags($_POST['email'], ''); 
$name = strip_tags($_POST['name'], ''); 

       if(strlen($nachricht)
> 120) { 
echo "Ihre Nachricht darf nicht größer als 120 Zeichen sein!";

die; 
} 
if(strlen($name) > 60) { 
echo "Ihr Name ist zu lang!"; 
die; 
} 

       $date = date("d.m.y H:i"); 

      
$query = "INSERT INTO shoutbox (name, nachricht, email, date, ip) 
VALUES ('$name','$nachricht','$email',
'$date','$_SERVER[REMOTE_ADDR]')"; 

       if (!mysql_query($query))
{ echo "Fehler"; } 

       mysql_close(); 

      
echo "Danke für den Beitrag<BR>"; 
echo "<a href=\"shoutbox.php\">Beitrag anschauen</a>";

      } else { 

$query = "SELECT nachricht, name, email, date, ip FROM shoutbox order by
id DESC LIMIT 10"; 
$erg = mysql_query($query); 
echo "<table>"; 
while($erg2=mysql_fetch_array($erg)) 
{ 

       echo "<tr> 
<td>$erg2[date] von <a href=\"mailto:$erg2[email]\"> 
$erg2[name]</a></td> 
</tr> 
<tr> 
<td>$erg2[nachricht]</td> 
</tr> 
<tr> 
<td><hr></td> 
</tr>"; 

} 
echo "</table>"; 

      ?> 
<form method="post" action="shoutbox.php"> 
<table> 
<tr> 
<td>Name :</td> 
<td><input type="text" name="name"></td>

</tr> 
<tr> 
<td>Email :</td> 
<td><input type="text" name="email"></td>

</tr> 
<tr> 
<td>Nachricht :</td> 
<td><textarea name="nachricht"></textarea></td>

</tr> 
<tr> 
<td>&nbsp;</td> 
<td><input type="submit" name="submit" value="Senden"></td>

</tr> 
</table> 
</form> 
<?php 
}
//mysql_close(); 
?>

Das Skript erkennt ob das Skript abgesendet wurde anhand des $_POST[’submit‘] Buttons. Daraufhin werden zunächst alle HTML Tags aus den Eingaben über den strip_tags() Befehl entfernt – dann wird überprüft ob die Nachricht nicht die vorgegebene Länge von 120 Zeichen überschreitet, oder ob die Emailadresse und der Name eingegeben wurden.

Bei der Überprüfung der Emailadresse wird auf Reguläre Ausdrücke zurückgegriffen. Sind die Eingaben des Benutzers in Ordnung, werden diese in die Datenbank geschrieben. Daraufhin kann der Besucher zur Shoutbox zurückkehren und seine Nachricht sehen.

Über die MySQL Abfrage „SELECT nachricht, name, email, date, ip FROM shoutbox order by id DESC LIMIT 10“ werden die zehn neuesten Nachrichten ausgegeben.

Weitere Features…
Eine alternative Lösung statt des Links zurück zur Shoutbox wäre die automatische Weiterleitung des Besuchers durch die header-Funktion.

Anstatt:

      echo "Danke für den Beitrag<BR>"; 
echo "<a href=\"shoutbox.php\">Beitrag anschauen</a>";

würde nur

      @header("location:shoutbox.php");

dastehen. Der Benutzer würde dann direkt seine Nachricht in der Shoutbox sehen. Wer es raffiniert machen will, kann über den header-Befehl noch einen Parameter in der URL übergeben, der dem Skript dann mitteilt, dass soeben eine Nachricht geschrieben wurde. Mit einem dezenten Hinweis, könnten Sie so dem Autor der Nachricht noch einen kleinen Hinweis geben.

Möchten Sie ihren Besuchern auch anbieten Smileys in die Nachrichten mit aufzunehmen? Dann müssen wir noch ein wenig mit JavaScript arbeiten. Das Formular müsste dann wie folgt erweitert werden:

      <script language="Javascript">
function SetSmiley(emo) {
document.shoutbox.nachricht.value+=''+emo;
document.shoutbox.nachricht.focus();
}
</script>
<form method="post" name="shoutbox" action="test.php">

<table> 
<tr> 
<td>Name :</td> 
<td><input type="text" name="name"></td>

</tr> 
<tr> 
<td>Email :</td> 
<td><input type="text" name="email"></td>

</tr> 
<tr> 
<td>Nachricht :</td> 
<td><textarea name="nachricht"></textarea></td>

</tr> 
<tr> 
<td>Smileys:</td> 
<td>
<a HREF="javascript:SetSmiley(' :-)')"><img SRC="smile.gif"
alt="" border="0" align="absmiddle"></a>
<a href="javascript:SetSmiley(' 8-)')"><img src="cool.gif"
alt="" border='0' align="absmiddle"></a> <a href="javascript:SetSmiley('
:-0')"><img src="asthonished.gif" alt="" border="0"
align="absmiddle"></a><a href= "javascript:SetSmiley('
:angry:')"><img src="angry.gif" alt="" BORDER="0"
align="absmiddle"></a>
</td> 
</tr>
<tr> 
<td>&nbsp;</td> 
<td><input type="submit" name="submit" value="Senden"></td>

</tr> 
</table> 
</form>

Dabei wird über <a href= „javascript:SetSmiley(‚ :-)‘)“> die Funktion setSmiley aufgerufen und die jeweilige Abkürzung für den Smiley dem Text in dem Textfeld hinzugefügt.

Nun sollte, um das ganze ein wenig zu vereinfachen, die Abkürzung für den jeweiligen Smiley noch bevor die Nachricht in die Datenbank geschrieben wird mit dem entsprechenden Verweis auf die Bilddatei über den <img> Tag ersetzt werden.

Dazu wird vor dem Speichern der Nachricht diese auf Abkürzungen untersucht und mit der str_replace Funktion werden diese ersetzt.

Das könnte so aussehen:

      $nachricht=str_replace(":-)", "<img src=smile.gif>",
$nachricht);
$nachricht=str_replace("8-)", "<img src=cool.gif>",
$nachricht);
$nachricht=str_replace(":angry:", "<img src=angry.gif>",
$nachricht);
$nachricht=str_replace(":-0", "<img src=asthonished.gif>",
$nachricht);

Für Interessierte gibt es das Skript samt Installationsanleitung zum Herunterladen. Am Besten ist es übrigens die Shoutbox über ein iFrame einzubinden. Wird dann eine neue Nachricht eingegeben, wird nur das iFrame selbst neu geladen, nicht die gesamte Seite.