Hallo,
da ich gerade eine eigene Shoutbox geschrieben habe und es hier hauptsächlich Tutorials mit Einbindung von Datenbanken gibt, möchte ich hier mal eine Version mit einer einfachen Datei schreiben. Außerdem soll dieses Tutorial auch für PHP-Einsteiger verständlich sein, weshalb ich die Befehle genauer erläutere (wer das nicht braucht, ganz unten befindet ich ein kompletter Code).
Los geht’s:
Zuerst brauchen wir das Grundgerüst, sprich einige Eingabefelder, Abfragen etc.
Diese erstellt man am Besten mit den Form- und Input-Tags:
<FORM Action = "eintragen.php" METHOD=POST>
Hiermit wird ein Formular begonnen. Für das Attribut Action muss man hierbei die PHP-Datei, die die Daten abspeichern soll, angeben. In diesem Beispiel heißt sie einfach "eintragen.php".
Dann benötigt man Abfragen, z.B. für Name und Nachricht, man kann aber auch beliebig noch Dinge hinzufügen (Wohnort, Alter, Geschlecht, etc.). Abfragen werden mit dem "Input-Tag" erstellt. Bsp:
<INPUT type = "text" NAME="name" size = "15" maxlength = "15"><br>
type="text" bedeutet, dass es sich um ein Eingabefeld handelt. Das Attribut Name ist wichtig für PHP-Scripte, um die Eingaben später in $Variablen zu laden. Da es bei diesem Input um den Namen des Verfassers geht, heißt es "name", dies dient allerdings nur der Übersichtlichkeit. Man könnte auch Nummerncodes, Abkürzungen oder was einem sonst so einfällt benutzen. Ich würde jedoch empfehlen, nahe liegende Namen auszusuchen, damit man am Ende nicht die Übersicht verliert.
size= "15" bezeichnet die Breite des Eingabefeldes. Je nach Design und Geschmack des Programmierers kann man hier Werte eingeben. Hauptsache es bleibt übersichtlich und passt ins Seitenlayout, eurer Fantasie sind hierbei keine Grenzen gesetzt ;).
Dann kommt das letzte Attribut, maxlength. Die Zahl dahinter gibt an, wie viele Zeichen der Verfasser höchstens in das Feld schreiben darf.
Input eignet sich allerdings nicht für das Feld der eigentlichen Nachricht, da es keine mehrzeiligen Eingabefelder erstellen kann. Hierfür sollte man Textarea nehmen:
<textarea rows = 5 cols = 11 name = "eintrag" onKeypress="eintrag.value=eintrag.value.substring(0,100);">
Maximal 100 Zeichen!
</textarea>
Im Gegensatz zu einem Input-Tag, muss eine Textarea wieder geschlossen werden! Alles, was zwischen <textarea> und </textarea> steht, wird automatisch in das Textfeld eingetragen (sprich in unserem Textfeld steht jetzt "Maximal 100 Zeichen"). Nun zu den Attributen:
rows gibt die Zeilen des Textfelds an. Schreibt der Verfasser einen Text, der über diese 5 Zeilen hinausgeht, dann wird das Textfeld scrollbar. cols gibt die Breite des Textfeldes an, doch Achtung:
cols = 15 ist ungleich size = 15. Hier würde ich einfach mit den Werten rumsielen, so dass es passt. Für das name Attribut gilt alles, was ich beim Input-Tag schon erwähnt habe.
onKeypress="eintrag.value=eintrag.value.substring(0,100);" ist ein kleines Javascript. Da leider maxlength bei einer Textarea nicht Funktioniert, muss man sich hier anders helfen. Hierbei muss man für eintrag immer das eingeben, was man als name gewählt hat. Habt ihr z.B. geschrieben name="eintr" dann hieße es
onKeypress="eintr.value=eintr.value.substring(0,100);" Die letzte Zahl ist die Zeichenbegrenzung. Aber Achtung: Anders als bei Maxlenght, wird in diesem Code nicht einfach kein weiteres Zeichen mehr geschrieben, sondern immer das letztmögliche Zeichen ÜBERschrieben.
Als letztes packt man alles in eine schöne Form mit Beschreibung des jeweiligen Feldes, BSP:
Shoutbox
<FORM Action = "eintragen.php" METHOD=POST>
Name:<br>
<INPUT type = "text" NAME="name" size = "15" maxlength = "15"><br>
Nachricht:<br>
<textarea rows = 5 cols = "11" name = "eintrag" onKeypress="eintrag.value=eintrag.value.substring(0,100);">
Maximal 100 Zeichen!
</textarea><br>
<input type="Submit" value="Abschicken">
</FORM>
<input type="Submit" name="submit" value="Abschicken"> erstellt noch einen kleinen Button. value ist der Text, der später im Button steht, z.B. abschicken oder submit. type="Submit" gibt an, dass beim drücken des Buttons die Eingabe bestätigt werden soll. Eine andere Möglichkeit wäre type="reset" für einen Reset-Button.
Diesen Code kann man nun erstmal abspeichern, z.B. als shout.php (so werde ich ihn fortan nennen). Es ist einem selbst überlassen, ob man noch CSS einbindet, das Design verändert oder die Datei über Include in eine bereits bestehende Datei lädt, die Grundsätze sind gegeben.
Nun müssen die Werte über ein PHP-Script in einer Datei gespeichert werden. Das ist der komplizierteste Teil.
<FORM Action = "eintragen.php" METHOD=POST> Jetzt kommt das Attribut Action ins Spiel:
So, wie der Wert von Action muss jetzt auch eure nächste Datei heißen. In meinem Fall eintragen.php In dieser Datei werden jetzt die Ergebnisse aus dem Formular ausgelesen:
$name = $_POST['name'];
$eintrag = $_POST['eintrag'];
Die mit $ bezeichneten Strings sind die neuen Variablen in PHP, in die mit $_POST['etwas '] ein Wert geladen wird. Ihr müsst für etwas nur das angeben, was ihr im Formular für die Attribute „name“ geschrieben habt. Bei mir name und eintrag. Hat man nun alles übergeben, dann würde ich einige Veränderungen in Eintrag vornehmen:
$eintrag = ereg_replace("<",".",$eintrag);
$eintrag = ereg_replace(">",".",$eintrag);
ereg_replace ist eine suchen-ersetzen Funktion. Die Syntax sieht folgendermaßen aus:
ereg_replace("suche","ersetze durch",$string);
Zuerst ersetze ich alle < und > durch Punkte oder Lehrzeichen, damit der Verfasser keine HTML-Codes in seine Nachricht einbauen kann (man kann ihm natürlich einige Befehle zur Verfügung stellen, die die Form {b} oder {i} haben und unter die beiden ereg_replace Befehle noch einige weitere schreiben und dann {b} in <b> ändern, etc.). Danach kommen zwei weitere, wichtige Veränderungen:
$eintrag = nl2br($eintrag);
$eintrag = stripslashes($eintrag);
nl2br ersetzt den PHP-Zeilenumbruch \n durch HTML-Code <br>. Sonst steht nachher im Text statt eines Zeilenumbruchs immer \n und das ist sicherlich nicht erwünscht.
Danach (!!) kommt stripslashes. Dieser Befehl löscht alle Backslashs (\) aus dem Text (da PHP sonst z.B. bei diesem Eintrag:
Ich halte ihn für äußerst „klug“.
das hier anzeigt:
Ich halte ihn für äußerst „\klug\“.
Außerdem kann man z.B. noch Smilies einfügen (Zeichen wie :) :( etc durch <img src=“pfad/smilie01“> ersetzen), oder was einem sonst so einfällt.
Danach kommt dann das wichtigste:
Das Schreiben in eine Datei. Damit man allerdings weiß, ob der Verfasser alles korrekt eingegeben hat, sollte man noch eine kleine If-Abfrage machen:
if ($name == "") {
echo "Bitte Namen eingeben!";
}
Else If ($eintrag == ""){
echo "Bitte Nachricht eingeben!";
}
Else {
Hier werden wir gleich die Befehle zum Speichern der Daten hineinschreiben…
echo "Nachricht wurde erfolgreich eingetragen";
}
?>
Ich denke mal, hierzu ist nicht viel zu sagen. Hat man mehr Abfragen im Formteil, müssen hier natürlich auch mehr Else If Abfragen stehen.
Jetzt wird gespeichert. Hierzu ist folgendes zu erwähnen. Meine Datei, in die die Einträge geschrieben werden, heißt box.php. Für diese müssen natürlich die nötigen CHMOD Einstellungen vorgenommen werden, so dass unsere Shoutbox die „Berechtigung“ dazu hat, in die Datei zu schreiben. Später macht es außerdem Sinn, die Einträge in einer Tabelle anzeigen zu lassen, deshalb schreibe ich in diesem Beispiel Tags wie <td>, etc. hinzu.
$timestamp = time() + 2*60*60;
$datum = date("d.m.Y",$timestamp);
$uhrzeit = date("H:i",$timestamp);
Ich fange damit an, Uhrzeit und Datum herauszufinden. Time() liefert eine Timestamp, eine Anzahl von Sekunden die seit dem 1.1.1970 um 0:00 vergangen sind. Natürlich handelt es sich hierbei nicht um Deutsche Zeit. Momentan haben wir Sommerzeit (GMT +2), müssen also 2 Stunden hinzufügen. In Sekunden: 2*60*60. Danach wird die Zeit formatiert. Hierzu gibt es den Befehl date(„d.m.y“, $timestamp) für das Datum (d:Day (zweistelliger Wert), m:month (zweistelliger Wert), y:year (zweistelliger Wert)) und date(„H:i:s“, $timestamp) für die Uhrzeit (H:Hour (zweistellig, 24-Stunden-Format), i:Minuten (zweistelliger Wert, ich weiß leider die genaue Bedeutung der Abkürzung nicht), s:seconds (zweistelliger Wert). Für genauere Informationen sieh auch:
http://www.schattenbaum.net/php/datum.php
$datei = "box.php";
$fp = fopen($datei,"r");
$inhalt = fread($fp, filesize($datei));
fclose($fp);
Bei diesem Codeabschnitt geht es darum, alles, was in der Datei bereits steht, auszulesen und in eine Variable ($inhalt) zu speichern. So kann man später den neuen Eintrag ganz nach vorne einfügen und den alten Rest hinten anfügen.
$datei bezeichnet den Pfad und den Dateinamen.
Fopen($datei, „r“) öffnet die Datei $datei zum lesen ab dem ersten Zeichen in der Datei („r“).
Fread ($fp, filesize($datei)) liest de Inhalt der Datei $fp aus. Es ist nötig die Dateigröße anzugeben, deshalb dahinter der Befehl filesize, der die Größe einer Datei herausfindet.
Fclose schließt die Datei wieder.
$fp = fopen($datei,"r+");
fwrite($fp,"<tr><td width = 100>");
fwrite($fp,$name);
fwrite($fp," schrieb am ");
fwrite($fp,$datum);
fwrite($fp," um " );
fwrite($fp,$uhrzeit);
fwrite($fp,": ");
fwrite($fp,"<hr></tr></td>");
fwrite($fp,"<tr><td width = 100>");
fwrite($fp,$eintrag);
fwrite($fp,"<hr><br></td></tr>");
fwrite($fp,$inhalt);
fclose($fp);
Diesmal wird die Datei wieder am Dateianfang geöffnet, diesmal allerdings zum Lesen UND Schreiben („r+“). Danach wird mit
fwrite($fp,"etwas");
In die Datei $fp
etwas
geschrieben. Es müssen nun alle Einträge, HTML-Befehle und was ihr sonst so braucht, in die Datei geschrieben werden. Ich werde box.php später in einer Tabelle anzeigen lassen, deshalb schreibe ich Spalten und Zeilen-Tags (<td> und <tr>) und erst dann das Eingetragene. Wenn ihr die Datei nicht in einer Tabelle anzeigen lassen wollt, könnt ihr auch sämtliche andere HTML-Befehle, Texte etc. hineinschreiben.
Ganz zum Schluss schreibe ich mit fwrite($fp,$inhalt); alles wieder in die Datei, was vorher schon drin stand.
Ganz an den Schluss könnt ihr noch einen Zurück-Link oder Button, oder auch einen Link auf eure Startseite, etc. setzen.
Ich bevorzuge einen Zurückbutton (mit dem Nachteil, dass man bei neueren Browsern die darauf geladene Seite aktualisieren muss).
Das geht so:
<form method = "Post" Action="javascript:history.back()">
<input type="Submit" value="zurück">
</form>
Das Ereignis, das bei Drücken des Buttons eintritt ist in diesem Fall ein Java-Script, das dieselbe Funktion, wie der Zurück-Pfeil im Browser hat.
Jetzt noch mal der Code, so wie ich ihn verwende:
Dort wo die Shoutbox angezeigt werden soll:
<table>
<tr>
<td>
<?php include("shout.php"); ?>
</td>
</tr>
<?php include("box.php"); ?>
</table>
Die Datei shout.php:
Shoutbox
<FORM Action = "eintragen.php" METHOD=POST>
Name:<br>
<INPUT type = "text" NAME="name" size = "15" maxlength = "15"><br>
Nachricht:<br>
<textarea rows = 5 cols = "11" name = "eintrag" onKeypress="eintrag.value=eintrag.value.substring(0,100);">
Maximal 100 Zeichen!
</textarea><br>
<input type="Submit" name="submit" value="Abschicken">
</FORM>
Die Datei eintragen.php:
<?
$name = $_POST['name'];
$eintrag = $_POST['eintrag'];
$eintrag = ereg_replace("<",".",$eintrag);
$eintrag = ereg_replace(">",".",$eintrag);
$eintrag = nl2br($eintrag);
$eintrag = stripslashes($eintrag);
if ($name == "") {
echo "Bitte Namen eingeben!";
}
Else If ($eintrag == ""){
echo "Bitte Nachricht eingeben!";
}
Else {
$timestamp = time() + 2*60*60;
$datum = date("d.m.Y",$timestamp);
$uhrzeit = date("H:i",$timestamp);
$datei = "box.php";
$fp = fopen($datei,"r");
$inhalt = fread($fp, filesize($datei));
fclose($fp);
$datei = "box.php";
$fp = fopen($datei,"r+");
fwrite($fp,"<tr><td width = 100>");
fwrite($fp,$name);
fwrite($fp," schrieb am ");
fwrite($fp,$datum);
fwrite($fp," um " );
fwrite($fp,$uhrzeit);
fwrite($fp,": ");
fwrite($fp,"<hr></tr></td>");
fwrite($fp,"<tr><td width = 100>");
fwrite($fp,$eintrag);
fwrite($fp,"<hr><br></td></tr>");
fwrite($fp,$inhalt);
fclose($fp);
echo "Die Eingabe war erfolgreich.";
}
?>
<form method = "Post" Action="javascript:history.back()">
<input type="Submit" value="zurück">
</form>
In der Datei box.php steht dann beispielsweise so was:
<tr><td width = 100>Seoman schrieb am 07.08.2005 um 18:13: <hr></tr></td><tr><td width = 100>Dies ist eine „handgemachte“ PHP Shoutbox von Seoman.<hr><br></td></tr>
Das war es dann auch schon. Viel Spaß mit diesem Tutorial und euren neuen Shoutboxen,
Seoman
PS:
Bitte entschuldigt etwaige Rechtschreib- oder Flüchtigkeitsfehler. Ich habe mein bestes gegeben, das Tutorial fehlerlos zu halten, was mir aber sicherlich nicht ganz gelungen ist. Deshalb gilt in diesem Fall das Motto:
Wär Rächdschraip Feelär finded, daaf sih behallten.