[Tutorial] Statspicker mit Cache

[Gremlin]

Hallo,
hier mal ein kleines Tutorial in dem beschrieben wird wie man für das VMS einen ordentlichen Statspicker erstellt der zudem noch gecachet wird wodurch die Serverbelastung minimal bleibt.

Systemvorraussetzungen
- GDLib
- php >= 5

1) Rohling erstellen
Als erstes benötigt man einen Rohling auf diesen werden die Userstatistiken geschrieben. Ich nutze hier eine png Datei 185x50 Pixel


Picker von PrimeraClub.de


2) Speicherort für Cache erstellen
Damit die gecachten Statpicker auch irgendwo gespeichert werden können brauchen wir einen beschreibbaren ordner. Ich habe dafür den Ordner:

/dynamic_cache/picker/

erstellt, dieser Ordner braucht Chmod 777.

3) PHP Datei für den Picker erstellen
Das Herzstück ist die php Datei welche den Rohling beschriftet und zwischenspeichert diese habe ich picker.php genannt und ins Hauptverzeichnis gelegt.

PNG-Header senden
Als nächstes müssen wir dem Browser sagen das es sich bei der Ausgabe um ein PNG Bild handelt das ganze machen wir mit:

header('Content-Type: image/png'); 

Vorher darf keinerlei Ausgabe stattfinden auch kein Leerzeichen vor <?php.

Prüfen ob Picker schon gecachet wurde und noch aktuell ist
Damit das Script weis ob es den Picker neu erstellen muss oder aus dem Cache laden kann prüfe ich:

a) ob die Cachedatei besteht
b) Bearbeitungszeit der Cachedatei

Wenn die Cachedatei älter als 600 Sekunden (10 Minuten) ist möchte ich sie neu erstellen lassen.

if (!file_exists('dynamic_cache/picker/'.$_GET['uid'].'.png') || @filemtime('dynamic_cache/picker/'.$_GET['uid'].'.png') < time()-600){ 

Hier ist schon zu erkennen das die Cachedatei z.B. als 1.png für den User mit der ID 1 abgespeichert wird, hierzu später mehr.

Datenbankverbindung aufbauen
Wenn die Cachedatei veraltet ist baue ich die Verbindung zur Datenbank auf um die neuen Daten zu holen.
Damit nicht die komplette functions.lib.php includet werden muss baue ich in dieser Datei die Verbindung direkt mit

$db_host        = "localhost";                              
$db_user        = "user";                                   
$db_pass        = "passwort";                                       
$db_base        = "datenbank";  
$db_prefix       = "vms";

mysql_connect($db_host,$db_user,$db_pass);
mysql_select_db($db_base); 

auf ich habe hier extra die Variablen genommen damit ich bei Änderung schnell mal aus der functions.lib copy paste machen kann.

Ausgabepuffer aktivieren
Mit

ob_start(); 

starte ich den Ausgabepuffer sämtliche Ausgaben an den Clienten werden nicht sofort ausgegeben sondern in dem interenen Puffer gespeichert mehr dazu später.

Daten auslesen
Man kann sämtliche Daten auslesen und ausgeben ich gebe lediglich Nickname und Kontostand aus diese Daten lese ich aus der DB aus:

$stat = mysql_fetch_assoc(mysql_query('SELECT k.kontostand,u.nickname FROM 
                           '.$db_prefix.'_kontodaten AS k
                           LEFT JOIN '.$db_prefix.'_userdaten AS u ON u.uid = k.uid
                     WHERE k.uid='.(INT)$_GET['uid'].' LIMIT 1')); 

Bild erzeugen
Nun kommt der Rohling zum Einsatz mit:

$picker = ImageCreateFromPng('images/picker/1.png'); 

erzeuge ich ein neues Bild in php welches zur weiteren Bearbeitung über $picker ansprechbar ist.

Schriftfarbe
Die Schriftfarbe setze ich mit

$schriftfarbe = ImageColorAllocate($picker,0,0,0); 

die 3 Zahlen stehen für RGB Werte und können beliebig angepasst werden.

Beschriftung
So das wirklich wichtige ist nun die Beschriftung der Daten auf den Statpicker. Hierfür nutze ich wie man schon bemerkt haben dürfte die GDLib diese ist sehr weit verbreitet und reicht für unsere Anforderungen aus. Ich nutze hierfür ImageTTFText() weil ich damit beliebige TTF Schriftarten nutzen kann.

Als erstes schreibe ich in einer großen Schriftart den Nicknamen an den oberen Rand vom Bild:

ImageTTFText($picker,12,0,5,13,$schriftfarbe,"css/trebucbd.ttf",$stat['nickname']); 

die 12 steht dabei für die Schriftgröße
die 0 steht für eine Drehung der Schrift in ° im Uhrzeigersinn.
die 5 und 13 stehen für den Abstand von x/y Achse
$schriftfarbe haben wir eben oben definiert das färbt also die Schrift schwarz ^^
"css/trebucbd.ttf" gibt den Pfad zur ttf Datei an genügend Fonts gibt es unter http://www.fontasy.de/ da beziehe ich auch meine.
$stat['nickname'] steht einfach für den String der ausgegeben werden soll und kann natürlich durch alles mögliche ersetzt werden.

Dann gebe ich noch Guthaben und Seitenname aus hier nutze ich andere Schriftart, Schriftgröße, Ausrichtung etc. das sieht bei mir dann so aus:

ImageTTFText($picker,8,0,5,26,$schriftfarbe,"css/COMIC.TTF","Guthaben: ".$stat['kontostand']);

ImageTTFText($picker,8,0,5,49,$schriftfarbe,"css/COMIC.TTF","PrimeraClub.de"); 

Bild ausgeben
Mit folgender Zeile gibt das php Script dann das Bild als png an den Browser aus:

ImagePng($picker); 

Dann geben wir noch den belegten Speicher frei mit:

ImageDestroy($picker); 

MySQL Verbindung beenden
Dann noch schön die Datenbankverbindung beenden:

mysql_close(); 

Bild zwischenspeichern

file_put_contents('dynamic_cache/picker/'.$_GET['uid'].'.png', ob_get_flush() ); 

mit ob_get_flush() hole ich den Inhalt aus dem Puffer dieser beinhaltet also nun das PNG Bild diesen Speichere ich in dann als png in unserem Cache Verzeichnis. (Hier wird php5 benötigt, php4 kennt file_put_contents() noch nicht)

Bild war schon vorhanden
Das bislang war alles was wir machen mussten weil das Bild noch nicht gespeichert oder veraltet war die if Abfrage wurde also noch nicht beendet. Wenn das Bild doch schon vorhanden dann müssen wir einfach nur noch die Datei auslesen:

}else{
  readfile('dynamic_cache/picker/'.$_GET['uid'].'.png');
} 

Dadurch wird dann halt der alte Picker nochmal geladen und an den Browser ausgegeben.

Der User kann nun den Picker mit
http://www.deine-domain.de/picker.php?uid=USERID
aufrufen.

So schaut es aus:


Wenn ihr meine Url betrachtet könnt ihr sehen das bei mir auch noch die Variable &picker=1 ausgegeben wird das hat damit zu tun weil ich noch verschiedene Designs anbiete aber das muss ja nicht sein aber ist auch relativ einfach.

Mod_Rewrite
Einige Foren verbieten das einbinden von dynamischen Bildern hierfür habe ich auch schon einen Weg gefunden: Manipulation der Url mit mod_rewrite. Hierfür erfordert euer Server jedoch mod_rewrite. Erstellt einfach eine .htaccess mit folgendem Inhalt:

RewriteRule ^picker-([0-9]+).png$ picker.php?uid=$1

Ab sofort ist der Picker von User 1 dann z.B. als picker-1.png verfügbar. Sollte nachdem erstellen der .htaccess ein 500 Error erscheinen ist auf eurem Server kein Mod_Rewrite installiert. Ihr könnt euren Hoster jedoch bitten das zu aktivieren.

Viel Spaß mit dem Picker.

Der Picker darf gratis in Verbindung mit dem VMS1.x genutzt werden.

Gruß
Gremlin

Ps.: Wer mir was spenden will dafür kann es gerne tun!
Klammid: 184974
PrimusPortal Nick: Gremlin
PayPal: gremlincomputer [at] gmx [punkt] de
Ich freue mich auch über Backlinks von eurer Homepage hierzu könnt ihr diesen Code nutzen:

<a href="http://www.joke-factory.de" title="Witze" rel="follow">Witze</a>

Ps.: Die Grafik oben darf nicht verwendet werden.