Programmierung eines Besucherzählers mit Flash

1. Preis Alle Jugend-Forscht Teilnehmer finden Sie hier:
http://www.meine-kreissparkasse.de/jufo/

Es folgt die schriftliche Arbeit, die ich bei Jugend forscht abgegeben habe:
Eine druckbare Version im PDF-Format steht zum Download bereit!

Die Idee
    Die Entwicklung
    Die Funktionen
Die Website
    Die Registrierung
    Counter einrichten
Der Besucherzähler
    Wie der Benutzer ihn einbindet
    Was dabei wirklich passiert
    flash.php
    Die Schriftfarbe

Die Idee

Ich hatte bereits einen Besucherzähler mit der Programmiersprache ASP programmiert, der sich aus mehreren Bildern für die einzelnen Ziffern zusammensetzte. Mein Schulfreund Matthias stellte mir daraufhin 10 Flash-Movies als Ziffern zur Verfügung. Als ich einige Monate später anfing, mit PHP zu programmieren, hatten wir die Idee, einen Flash-Counter zu erstellen, den jeder Webmaster auf seine Homepage einbinden kann.

Die Entwicklung

Ich erstellte zunächst die Seiten zur Anmeldung von Benutzern: Registrierung von neuen Benutzern, Aktivierungscode, Passwort vergessen, Daten ändern usw.

Ich habe alles auf meinem eigenen Computer getestet, wo ich dafür den MS Internet Information Server, PHP 4.21 und MySQL installiert habe. Im Internet habe ich dies zunächst bei Tripod getestet – dort gab es PHP und MySQL kostenlos.
Die Styles, die zunächst aus 10 einzelnen Flash-Movies bestanden, hat Matthias erstellt, während ich den dazugehörigen PHP-Code geschrieben habe. Der Counter ließ sich über eine PHP-Seite, die ein JavaScript zurückgab, einbinden. Dies funktionierte allerdings nur kurze Zeit – nach einigen Tagen fing Tripod an, auch in PHP-Seiten Werbung einzublenden. Bei Domainbox bekamen wir Webspace mit PHP und MySQL ohne Werbung – zwar nicht kostenlos, aber doch noch relativ günstig.

Die Funktionen

Mittlerweile hat der Counter viele Extrafunktionen. Er besteht nur noch aus einem Movie, so dass wesentlich bessere Effekte möglich sind. Dieses Movie ist im Hintergrund transparent, die Vordergrundfarbe lässt sich bei einigen Styles frei einstellen. Die Anzahl der Ziffern lässt sich im Bereich von 4 bis 10 einstellen.

Die Website

Ich habe Flash-Counter.com mit PHP programmiert. Jede PHP-Seite bindet die Datei db.php und style.php ein. „db.php“ verbindet sich mit der MySQL-Datenbank, „style.php“ enthält den HTML-Header bis zum Body-Tag. Sollte sich das Stylesheet der Website verändern, so muss dies nur in dieser einen Datei getan werden.

Die Registrierung

Diese einfach aussehende Registrierseite ist hochkompliziert: Die dazugehörige PHP-Seite ist 11 KB groß, es sind über 400 Zeilen Programmcode. Warum so viel? Nun, diese Seite ist nicht nur das Anmeldeformular, sondern auch die Registrierung selbst. Das Formular ruft sich selbst auf. Wenn der Benutzer falsche Angaben macht, wird wieder dieses Formular angezeigt, allerdings mit dem Hinweis darüber, was falsch gemacht wurde. Folgende Fehler sind möglich (natürlich nicht alle auf einmal):

Folgende Fehler sind bei der Anmeldung aufgetreten:

- Der Benutzername enthält ein ungültiges Zeichen.
- Der Benutzername ist kürzer als 4 Zeichen.

- Der Benutzername ist länger als 20 Zeichen.

- Der Benutzername ist bereits belegt. Wählen Sie einen anderen.
- Die E-Mail-Adresse ist ungültig.

- Die E-Mail-Wiederholung stimmt nicht mit der E-Mail-Adresse überein.

- Die Homepage-URL ist länger als 100 Zeichen.
- Sie müssen eine Kategorie wählen.

- Das Passwort enthält ein ungültiges Zeichen.

- Das Passwort ist kürzer als 4 Zeichen.

- Das Passwort ist länger als 20 Zeichen.

- Die Passwort-Wiederholung stimmt nicht mit dem Passwort überein.

Auf alle diese Fehler muss die Anmeldeseite überprüfen. Erst, wenn alles in Ordnung ist, beginnt der Registriervorgang. Dabei wird zunächst eine 6-stellige, zufällige Zahl gezogen. Dies ist der Aktivierungscode. Dann werden alle eingegebenen Daten mit dem Aktivierungscode in einer MySQL-Tabelle gespeichert.

Damit sichergestellt wird, dass der Benutzer eine E-Mail-Adresse angegeben hat, unter der er erreicht werden kann, wird ihm eine E-Mail mit dem Aktivierungscode zugesandt. Erst wenn er diese Zahl in dem dafür vorgesehenen Formular eintippt, wird der Benutzername freigeschaltet. Dazu hat er zwei Wochen Zeit, in der sein Benutzername reserviert bleibt.

Counter einrichten

Nach der Aktivierung hat der Benutzer endlich die Möglichkeit, sich einen oder mehrere Counter einzurichten.

Name, Ziffernanzahl und Style können nun ausgewählt werden, weitere Einstellungen können nachträglich vorgenommen werden (siehe Abbildung 1, Seite 2) Auch hier wird auf fehlerhafte Eingaben überprüft.

Der Besucherzähler

Wie der Benutzer ihn einbindet

Das Einbinden in die eigene Homepage ist ganz einfach:

Die Zahl 1060 steht für die Nummer des Counters – diese sieht man in der Counterliste.

Mit dem oben stehenden HTML-Code baut man den Counter ein. Er erscheint an der Stelle, wo der HTML-Code steht.

Was dabei wirklich passiert

Der Browser verbindet sich mit der URL in dem HTML-Code. („http://www.flash-counter.com/count.php?id=1060&count=yes&visible=yes“) Dies ist auch eine PHP-Seite. Sie verbindet sich mit der Datenbank und ruft die Eigenschaften der Counters Nr. 1060 ab. Der Stand des Counters wird um 1 erhöht. Aus diesen Informationen wird dann folgender JavaScript-Code generiert:

document.writeln ('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="108" height="35">');

document.writeln ('<param name="_cx" value="476">');

document.writeln ('<param name="_cy" value="476">');

document.writeln ('<param name="FlashVars" value="-1">');

document.writeln ('<param name="Movie" value="http://www.flash-counter.com/styles/flash.php? style_len=scan_6&color=000000&state=000256">');

document.writeln ('<param name="WMode" value="transparent">');

document.writeln ('<param name="Play" value="-1">');

document.writeln ('<param name="Loop" value="-1">');

document.writeln ('<param name="Quality" value="High">');

document.writeln ('<param name="Menu" value="0">');

document.writeln ('<param name="Scale" value="ShowAll">');

document.writeln ('<embed src="http://www.flash-counter.com/styles/flash.php? style_len=scan_6&color=000000&state=000256" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="108" height="35">');

document.writeln ('</object>');

Dieser Code bewirkt, dass der Browser Flash lädt, um den Counter anzuzeigen. An Stelle einer Flash-Datei findet sich wieder eine PHP-Seite: Style, Ziffernanzahl, Farbe und Stand werden übergeben. Dies ist alles, was zur Darstellung benötigt wird. Aber wie kommen diese Daten jetzt zu Flash?

flash.php

Also, nach dem oben stehenden Code muss flash.php nun eine .swf-Datei zurückgeben. Style und Ziffernanzahl sind bekannt, es liegen Dateien im Format counter_4.swf, counter_5.swf, ..., counter_10.swf, style2_4.swf, ... vor.

Es gibt für jede Style/Ziffernanzahl-Kombination eine Datei, insgesamt 42 Dateien. Aber was ist mit dem Stand? Das wären Millionen Dateien. Und mit der Farbe kombiniert sind es Hunderte Milliarden Dateien. Es muss also eine andere Möglichkeit geben, Farbe und Stand in die Flash-Movies zu bekommen. Dies war das schwierigste Problem in der Entwicklung. In Flash gibt es die Funktion loadVariables, mit der sich Variablen aus einer externen Datei laden lassen. Dies könnte eine PHP-Seite sein, die den Stand zurückgibt. Aber auch hier gab es einen Haken: Flash müsste die Counter-ID übergeben – wir bräuchten eine Datei für jeden eingerichteten Counter. (Das sind mittlerweile über 500!)

Es musste eine andere Möglichkeit geben. Ich las in der PHP-Hilfe nach, wie man dynamisch Flash-Movies erzeugt. Leider gab es nicht die Möglichkeit, vorhandene Dateien einzulesen und verändert auszugeben. Doch da kam mir die Idee – ich schaute mit dem Windows-Editor in die Datei counter_6.swf. Dort fand ich zwischen vielen Binär-Sonderzeichen den Text

loadVariables ("http://www.flash-counter.com/counter.php?id=123456789");
Diese Zeile stand im Programmcode, vom einem meiner früheren Tests. Für eine PHP-Seite war es ohne Probleme möglich, die Binärdaten einzulesen, einen Text auszutauschen und die veränderte Version an den Browser zurückzuschicken. Damals wurde der flash.php noch die ID anstelle des Standes übergeben.

<?php

$newid=$_REQUEST['id']; // HTTP-Parameter einlesen

$fp=fopen("counter_6.swf","r"); // Datei zum Lesen öffnen $str = fread ($fp, filesize ("counter_6.swf")); // gesamten Inhalt auslesen $str=str_replace("id=123456789","id=$newid",$str); // ID ersetzen

print($str); // veränderte Version an den Browser schiken

fclose($fp); // Datei wieder schließen

?>

Mit diesem kurzen Abschnitt PHP-Code wurde die ID ausgetauscht und der Counter zeigte den richtigen Stand an – vorausgesetzt, die ID hatte die entsprechende Anzahl Nullen davor, denn im Binärcode darf nicht einfach ein Byte entfernt werden.

Dies ist eine gute Möglichkeit, Daten an Flash weiterzugeben – einfach einen Dummy-String durch die echten Werte ersetzen. Auch die Farbe wird so übergeben.

Allerdings bin ich nicht bei der Variante mit loadVariables geblieben. Es ist auch möglich, den Stand direkt zu verändern. Dazu habe ich statt der loadVariables-Anweisung folgende 6 Zeilen geschrieben:

count1=parseInt("10001",10);

count2=parseInt("10002",10);

count3=parseInt("10003",10);

count4=parseInt("10004",10);

count5=parseInt("10005",10);

count6=parseInt("10006",10);

Dies bewirkt, dass ein String in eine Zahl umgewandelt und dargestellt wird. Da eine Ziffer auch in anderen Zusammenhängen vorkommen könnte, habe ich hier höhere Zahlen verwendet. Die Anweisung parseInt(String, Basis) wandelt einen String in einer Zahl um. In diesem Fall ist die Zahl zwischen den Anführungszeichen eine Dezimalzahl – deshalb die 10 als 2. Parameter. Der Text „10001“ wird von flash.php durch vier Nullen und der 1. Ziffer des Standes ersetzt. Durch parseInt fallen die Nullen am Anfang weg und nur die echte Ziffer wird angezeigt. Würde ich nur eine einzelne Ziffer ersetzen, könnte es sein, dass im Binärcode an anderer Stelle auch eine Ziffer ersetzt wird.

Die Schriftfarbe

Lange Zeit war es geplant die Schriftfarbe verändern zu können. Aber erst vor kurzem habe ich eine Möglichkeit gefunden.

myColor = new Color(txt5);

myColor.setRGB(parseInt("COLORX",16));

Mit diesen Zeilen Flash-Programmcode wird die Farbe eines Textfeldes geändert, in diesem Fall das 5. Textfeld. Statt COLORX sollte hier die Hexadezimalfarbe stehen – diese Änderung ist kein Problem für flash.php.

Die Gruppe der Textfelder ließ sich so in Flash einfärben – alles funktionierte in der Entwicklungsumgebung von Flash, sobald es aber im Internet Explorer angezeigt wurde, blieben die Ziffern einfach schwarz. Lange Zeit hatte es gedauert, bis ich bemerkt hatte, dass dieser Code für jedes Textfeld einzeln durchgeführt werden muss – dann funktioniert es auch im Internet Explorer.

www.danielgrunwald.de

Programmierung eines Besucherzählers mit Flash