[TUTORIAL]: Eine einfache aber auch sichere Shoutbox für die eigene Website.

Fleeting20
Jeder von euch hat bestimmt schon mal solch eine Shoutbox gesehen und sie evt. auch benutzt.Hier ein kleines Tut wie man eine erstellt.

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

In dieser Datei Bauen wir uns zunächst unser Aussehen zusammen + Connecting zur Datenbank.

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
<?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>


Bitte ersetzt die Platzhalter durch eure Angaben!!!!


Datei hochladen und folgendes müsstet ihr zu sehen bekommen:





Schritt 2:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
<?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!");
?>

Bitte wieder die Platzhalter durch eure Angaben ersetzen!!!

Schritt 3:
So, kommen wir zum Herzstück des Ganzen: die Funktion zum Eintragen in die Datenbank. Aber zuerst wieder das Script:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
<?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>


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

Schritt 4: Die Vollendung
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
<?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>


Wenns Probs gibt hier Posten.
warped
Können CSS und PHP miteinander? Denn so sieht sie sehr trostlos aus unglücklich
Ansonsten schönes Tutorial, danke Augenzwinkern
Fleeting20
Klaro geht CSS mit PHP (wäre mir neu wenn nicht Zunge raus ).


Jau desshalb steht da ja auch ''EINFACHE'' Augenzwinkern
voodoo44
Und wenn jetzt noch die Datenbankverbindung nach den Querrys geschlossen wird bin sogar ich zufrieden Zunge raus