Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Die Shoutbox als Website Feature

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...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 4 Minuten
  • von Thiemo Fetzer
  • 5. Oktober 2004
Bookmarke mich
Share on pocket

4eck Media GmbH & Co. KG

SEO-Sicht

Warscher - Digital Experts

Webagentur klickbeben

Werbeagentur Hannover | 360 Grad Konzept

pictibe – Werbeagentur & Marketingagentur

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.
Screenshot
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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Thiemo Fetzer

Thiemo Fetzer

Agenturpartner

Berlin Translate

Berlin

wolpersweb.de Webdesign & SEO

Düsseldorf

Warscher – Digital Experts

Horgen

Orange Services

München

PromoMasters Online Marketing

Wien

Alle Agenturpartner

Jobs

Junior Webdesigner/ Mediengestalter

Innsbruck

Senior Online Marketing Manager

München

Assistent/in der Geschäfts­führung

Innsbruck

Frontend Development & Project Management

Remote

Cloud Engineer Container & Kubernetes

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Eine Antwort zu „Die Shoutbox als Website Feature“
— was ist Deine Meinung?

  1. Web-Stefan München sagt:
    5. Oktober 2010 um 7:26 Uhr

    cool nummer, die shout boxes. werd ich ausprobieren. danke für den tipp

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.