Zuerst war die (begeisternde) Idee. Aber war dies umsetzbar, und wie? Als erstes klärte ich daher die Machbarkeit mit einem möglichst einfachen Prototyp fürs Orakel, bei dem es erst mal nur um die Funktionalität ging. Dieser Prototyp wurde mit einer Benutzerin getestet. Dann kam das Design des Orakel-Teils (worauf klicken, wie sehen die Bärchen aus). Der Rest der Website wurde dann davon abgeleitet und darum herum gebaut.
Und so sahen die ersten Prototypen aus:
Die Idee war folgende: Die Benutzerin klickt auf eine Grafik (z.B. einen Bären-Haufen), dann sieht man das Bärchen in der gezogenen Farbe zuerst im Haufen und dann springt es hinaus (z.B. nach oben), so wie man die bereits gezogenen Bärchen zur Seite legt. Die Benutzerin klickt wieder, das zweite Bärchen erscheint in seiner Farbe im Haufen und springt dann hinaus neben das erste. Und so, bis es fünf Bärchen sind. Dann sieht man die fünf gezogenen Bärchen mit ihren Farben und den Deutungstext dazu.
Wie wird das nun technisch umgesetzt?
Voraussetzung: Jede Farbe erhält eine Nummer
Ein Gummibärchen kann fünf verschiedene Farben haben. Jeder Farbe
wird eine Zahl zugeordnet: rot = 1, gelb = 2, 3 = weiss, 4 = grün, 5 =
orange. Diese Reihenfolge wurde gewählt in Anlehnung an die Sortierung,
die Bittrich in seinem Buch vorgenommen hat. Jede mögliche Farbkombination
der fünf Bärchen entspricht dann einer eindeutigen Zahlenkombination.
Beispiel: zwei rote, ein weisses, ein grünes, ein oranges Bärchen
ergeben die Zahl 11345. Für die verschiedenen Deutungstexte bietet sich
eine Datenbank an. Zusammen mit dem Deutungstext für diese bestimmte Farbkombination
wird also in der Datenbank der Wert 11345 in einem eigenen Feld gespeichert.
Und so für alle 126 Deutungstexte.
Auch die Grafiken für die einzelnen Bärchen enthalten diese Nummer
im Namen: die Grafik für das rote Bärchen heisst dann "bear1.gif",
die für das grüne "bear4.gif" etc.
Das Ziehen der Bärchen, Darstellung der bereits gezogenen Bärchen
Hier gibt es mehrere Probleme zu lösen:
Von mir gewählte Lösung: Damit die zufällige Farbe beim Klicken
zugewiesen werden kann, braucht es eine Javascript-Funktion. Diese berechnet
bei Onclick auf den Bärenhaufen eine Zufallszahl zwischen 1 und 5. Diese
wird in ein Cookie geschrieben. Unter Verwendung der Zufallszahl wird auf dem
Bärenhaufen ein Bilderwechsel durchgeführt, der dort ein einzelnes
Bärchen in der richtigen Farbe darstellt. Dabei wird der Name der einzublendenden
Bärchen-Grafik aus "bear" + Zufallszahl + ".gif" zusammengesetzt,
damit die Farbe stimmt. (Die kleine Bärchen-Grafik wird dabei auf die Grösse
der Haufen-Grafik hinaufgezoomt! Das war eigentlich nicht so gedacht, hat mir
dann aber gefallen so.)
Hier die Javascript-Funktion "uebergabe", die bei Onclick aufgerufen
wird.
function setzeCookie(name, wert) {
document.cookie = name + "=" + escape (wert);
}
function uebergabe(){
x = parseInt(Math.random()*5+1);
setzeCookie("one",x);
if (document.images) {
document.images.baeren.src = "../img/bear" + x +".gif";
}
}
Ausserdem wird (nach dem Ausführen des Javascripts) durch den Klick die zweite Seite aufgerufen. Auf dieser geschieht wieder dasselbe: Beim Klicken auf den Haufen (also beim Ziehen des zweiten Bärchens) wird wiederum eine Zufallszahl berechnet. Diese wird wieder in ein anderes, ein neues Cookie geschrieben.
Zusätzlich wird jetzt oben das bereits gezogene Bärchen dargestellt. Dies wird mit PHP gemacht: PHP schreibt den HTML-Code für das Darstellen eines Bildes und arbeitet beim Namen des Bildes mit dem Wert des ersten Cookies, wo ja die Farbe des ersten Bärchens als Zahl gespeichert ist:
$BildURL1 = array ("../img/bear", "$one", ".gif");
$URLstring1 = implode("", $BildURL1);
print "<img src='$URLstring1' width='85' height='88' alt='Erstes Bärchen'><br>";
Dies wiederholt sich auch auf den nächsten Seiten. Beim Ziehen des fünften Bärchens wird schliesslich die Seite aufgerufen, wo der passende Deutungstext erscheinen soll, siehe nächsten Abschnitt.
Den richtigen Deutungstext aus der Datenbank holen
Nach dem Ziehen des fünften Bärchens wird mit PHP die Seite generiert, die die vorher gezogenen Bärchen oben und den passenden Deutungstext darstellt. Der PHP-Code macht zusammengefasst folgendes:
Die fünf beim Ziehen gesetzten Cookies werden in ein Array ausgelesen ("one", "two", "three" etc. sind die Namen der Cookies):
$Kukies = array ("$one", "$two", "$three", "$four", "$five");
Die Zahlen werden aufsteigend sortiert. Das ist nötig, da z.B.der Text für die Kombination 14341 in der Datenbank mit der Nummer 11344 gespeichert ist.
sort($Kukies);
Aus den Werten wird ein String erstellt, der die Zahlenkombination für den Deutungstext darstellt:
$Kombi = implode("", $Kukies);
Eine Verbindung zur Datenbank wird hergestellt, der String wird geschickt und jener Deutungstext herausgeholt und dargestellt, der in der DB mit der entsprechenden Zahlenkombination verknüpft ist.
$query = "select * from yummi_bear where ident = '$Kombi'";
$result = mysql_query($query,$link);
$num = mysql_numrows($result);
for ($i = 0; $i < $num; $i++) {
$row = mysql_fetch_array($result);
echo "$row[deutung]"
}
Die Darstellung der gezogenen Bärchen oben geschieht wie auf den vorigen Seiten mit PHP unter Verwendung der Cookies. Zusätzlich wird noch das Datum und die Zeit der Deutung in die Seite geschrieben.
Struktur
In der Datenbank-Tabelle yummi_bear sind die Deutungstexte des Orakels gespeichert. Sie hat drei Felder pro Eintrag.
CREATE TABLE yummi_bear ( ident int(11) DEFAULT '0' NOT NULL, kurztext text NOT NULL, deutung text NOT NULL );
im Feld "ident" ist die Zahlenkombination gespeichert, die der Farbkombination
entspricht,
im Feld "kurztext" ist der kurze Text gespeichert, der zuoberst erscheint,
z.B. "Drei rote, ein gelbes, ein grünes Bärchen",
im Feld "deutung" ist der Deutungstext enthalten.
Vorgehen für das Abfüllen der Daten in die DB-Tabelle
Ich beschreibe hier das Vorgehen etwas abgekürzt (soweit ich mich noch erinnere).
Auf dem Server wird phpMyAdmin installiert. Die Datenbank-Tabelle mit ihren drei Feldern wird generiert. Via phpMyAdmin wird ein Mustereintrag gemacht. Dann wird die Tabelle mit diesem Mustereintrag "gedumpt". Ich habe dann also auf meinem Mac ein Dokument, das die Befehle zum Generieren der Datenbank-Tabelle und zum Abfüllen der Daten enthält.
Ich gehe dann vom Inhaltsverzeichnis des Buches aus: Ich setze die Liste mit den 126 Farb-Kombinationen in eine Liste mit 126 Zahlenkombinationen um. ("Zwei rote, ein gelbes, zwei grüne Bärchen" wird zu "11244"). Jede Zahlenkombination ergänze ich mit dem entsprechenden Deutungstext (kopieren und einsetzen). Um diese einzelnen Einträge herum setze ich nun mit Suchen/Ersetzen die Befehle aus dem Dump-Dokument ein ("insert into" etc.). Oben setze ich den Befehl zum Generieren der Tabelle aus dem Dump-Dokument ein. Ich muss auch noch die Umlaute und anderen Sonderzeichen HTML-mässig maskieren und schauen, dass keine " und ' vorkommen. So wird dann aus diesem Dokument quasi das neue Dump-Dokument. Dieses lade ich wieder auf den Server und fertig ist die Tabelle!
Das Gästebuch ist ebenfalls mit einer MySQL-Tabelle und PHP gelöst. In der Tabelle "feedback" gibt es fünf Felder:
id: Index für die automatische Nummerierung der Tabellen-Einträge
comments: für die Daten aus dem Formular-Feld "Ihr Beitrag"
names: für die Daten aus dem Formular-Feld "Name"
email: für die Daten aus dem Formular-Feld "E-Mail"
datum: hier wird via PHP-Variable Datum und Zeit eines Eintrages erfasst.
Das Formular auf der Website erlaubt es der Besucherin, ihren Kommentar, Namen und E-Mail-Adresse anzugeben. Es muss aber nur das Feld für den Kommentar ausgefüllt werden. Dies wird mit einer Formularüberprüfung mit Javascript überprüft. Die Felder für Name und E-Mail dürfen leer bleiben. Beim Abschicken der Formulardaten wird auch das aktuelle Datum mitgeschickt und in die DB-Tabelle geschrieben.
$datum=date("j.n.Y, H.i");
if(isset ($submit)) {
$query = "INSERT INTO feedback (names, email, comments,datum) VALUES ('$names', '$email', '$comments', '$datum')";
$result = mysql_query($query, $link);
}
Das Absenden des Formulars ruft die eigene Seite wieder auf, zusätzlich zu den bisherigen Einträgen aus der DB wird der neue Eintrag und ein "Dankeschön" in die Seite geschrieben. Beim Auslesen der Daten in der DB-Tabelle wird darauf geachtet, dass nur Felder ausgelesen werden, in denen tatsächlich etwas steht. Sonst entstehen unschöne Leerzeilen auf der Seite bei Einträgen, wo die Besucherin keinen Namen und/oder E-Mail-Adresse angegeben hat. Dies wird mit if-/else if-Abfragen gemacht.
$abfrage = "select * from feedback ORDER BY id DESC";
$ergebnis = mysql_query($abfrage,$link);
$num = mysql_numrows($ergebnis);
echo "<a name='lesen'></a><hr size='5'><h3><font color='#330066'>Orakel-Gästebuch</font></h3><hr size='5'>";
if(isset ($submit)) {
echo "<span class='gtitel'>Danke für Ihren Beitrag!</span><hr>";
}
for ($i = 0; $i < $num; $i++) {
$row = mysql_fetch_array($ergebnis);
if ($row[email] == "" && $row[names] == "") {
echo "<span class='eintrag'>$row[comments]<br><br>(Geschrieben am $row[datum] Uhr)</span><hr>";
} elseif ($row[email] == "") {
echo "<span class='eintrag'>$row[comments]<br><br>$row[names] (geschrieben am $row[datum] Uhr)</span><hr>";
} elseif ($row[names] == "") {
echo "<span class='eintrag'>$row[comments]<br><br>$row[email] (geschrieben am $row[datum] Uhr)</span><hr>";
} else {
echo "<span class='eintrag'>$row[comments]<br><br>$row[names], $row[email] (geschrieben am $row[datum] Uhr)</span><hr>";
}
}
Antonia Lutz, Februar/März 2002