Christoph Hautzinger's Blog - diginights.com

Gartenlaube Homepage online

nospam@example.com (Christoph Hautzinger) — Sun, 14 Oct 2007 16:30:00 +0200

Seit dieser Woche ist die neue Homepage der Heilbronner Gartenlaube online - bei genauerer Betrachtung fällt auf, dass es sich bei den eingebunden Partypics um Bilder von diginights handelt - sogar zu meiner Shooterzeit von 2004 sind noch einige Galerien mit dabei.

Um die Integration einfach zu gestalten, bieten wir seit geraumer Zeit einen speziellen Service an, der es externen Webseitenbetreibern ermöglicht, anhand eines speziell definierten Filters eine Teilmenge unseres Bilderrepositories (also beispielsweise sämtliche Bilder zu einer Location) auf ihrer Webseite in einem iFrame einzubinden, um so immer über aktuelle Bilder zu verfügen. Dieser Service wird auch von anderen Heilbronnern Clubs wie dem Creme 21 oder dem Barococo eingesetzt. Ein Webservice stand zur Designzeit damals garnicht zur Debatte, da die meisten Agenturen, die diese Clubwebseiten erstellen garnicht wissen, was das ist, geischweige denn, wie man gegen ihn programmiert .

Bei noch genauerer Betrachtung der Galerien fällt auf, dass es sich hierbei um eine unbeabsichtigte optische Täuschung handelt - unser Gehirn denkt sich zwischen die einzelnen Bildquadrate dunkle Kreise, wie man im folgenden Bild noch besser erkennen kann:

Google Maps Coordinate Picker

nospam@example.com (Christoph Hautzinger) — Sun, 13 May 2007 17:38:16 +0200

Lets have a look at one diginights location-detail page: There is a Google Map on the bottom of the page which displays the locations' accurate position. The database-table therfore holds three columns: The two coordinate values for lattitude an longitude and the zoom factor.

Our problem was the missing userfriendly admin interface, so i wrote a little class for this purpose which uses the Google Maps API to select a coordinate by double clicking the map. Additionaly an adress can be looked up which uses Google's Geocoder class internally.

See the code in actionlattitude:
longitude:
zoom:

Zoom in first and then double click map to set coordinate!

Feel free to download all necessary files here: GMapsCoordPicker.zip. The zip-archive contains 4 files:

GMapsCoordPicker.class.js
Put this file in your project's javascript directory (/web/js), it handls client side logic.

GoogleMapsHelper.php
Put this file in your project's helper dir (/lib/helper). It supplies a helper function google_maps_coord_picker(). The following example shows the usage in a symfony template:

<?php use_helper('GoogleMaps') ?>
longitunde: <?php echo input_tag('lon') ?><br />
lattitude: <?php echo input_tag('lat') ?><br />
zoom: <?php echo input_tag('zoom') ?><br />
<?php echo google_maps_coord_picker('lon', 'lat', 'zoom'); ?>

This helper includes the Google Maps API, thus an API key has to be generated and set up in the application configuration (/apps/[appname]/config/app.yml):

_google_maps_coordinate_picker.php
To simply integrate in the admin generator, we need a tremplate that includes the helper showed above and displays the map. You have to replace the parameters passed to google_maps_coord_picker() with the input field ids of your form. Note that symfony uses object_input_tag() for its form elements which builds unconvenional form-field-ids.

generator.yml
This file displays the integration of _google_maps_coordinate_picker.php in the admin generator.

Time Warp 2007

nospam@example.com (Christoph Hautzinger) — Sun, 25 Mar 2007 21:50:09 +0200

Nächsten Samstag werden wieder tausende feierwütige Freunde des Techno nach Mannheim auf die Time Warp pilgern. Nachdem ich letztes Jahr seit vier Jahren zum ersten Mal leider nicht dabei war, wird es dieses Jahr bestimmt wieder richtig geil, auch wenn mich das Line Up nicht so wirklich anspricht. Ganz besonders freu ich mich auf DJ Murphy, der letztes Jahr auf der After Hour zur Street Parade im Rohstofflager mit seinem kompromisslos hartem Sound überzeugt hat.

Sogar auf der Wikipedia gibt es eine Seite zur Time Warp.

Hin geht es mit dem diginights Eventshuttle... da beginnt die Party schon im Bus . Die Eventshuttle-Sektion ist auch zugleich ein neuer Bereich auf diginights, die von der Logik her nichts neues bietet, sondern auf die der Jomotours Busreisen setzt.

Nach der Party will ich feiertechnisch ein wenig kürzer treten und mich mal wieder etwas mehr um diginights kümmern... da gibt es ja auch genügend zu tun .

Gewinnspiele auf diginights.com

nospam@example.com (Christoph Hautzinger) — Sat, 17 Feb 2007 19:51:39 +0100

Wie dem ein oder anderen Leser hier sicherlich schon aufgefallen ist, gibt es auf diginights.com seit geraumer Zeit nun eine Gewinnspiel-Section. Die grundlegende Idee dahinter war, dem User mehr Funktionalität auf der Seite zu bieten, was uns mit dieser Idee (denke ich zumindest) auch ziemlich gut gelungen ist. Um automatische Eintragungen zu verhindern wurde ein Captcha-Schutz eingebaut, der nun auf allen anderen Formularseiten Verwendung findet, da es in der Vergangenheit öfters vorkam, dass Spamer die Location-eintragen Seite für ihre Zwecke missbrauchten.

In diesem Beitrag will ich aber ein wenig über die Verlosung schreiben, bzw. die der zu Grunde liegenden Logik.

Es existieren drei von Propel generierte Klassen: LotteryItem enthält die allgemeinen Infos zu einem Gewinnspiel, wie Name und Beschreibung oder das Auslosedatum, in LotteryPrize finden sich die einzelnen Preise, die zu einem Gewinnspiel gewonnen werden können und LotteryParticipant hält die Teilnehmer der jeweiligen Gewinnspiele. Um die Komplexität zu verringern sind die folgenden Codebeispiele auf das Nötigste gekürzt, zudem sind die PHPDoc Kommentare leider auch nicht dabei, da sie von meiner Blogsoftware in strong-Tags umgebaut werden (das muss ich mir nochmal anschauen):

1. Die naive Implementierung:

private function drawSingleLottery(LotteryItem $l) {
$prizes = $l->getLotteryPrizes();
// TODO: this is pretty slow and should be replaced with a piece of faster code in future
$participants = $l->getLotteryParticipants();
// determine winner array keys - exactly the amount of available prizes
$winnersKeys = array_rand($participants, $this->countTotalWinnersForPrizes($prizes));
if (!is_array($winnersKeys)) {
$winnersKeys = array($winnersKeys);
}
$winners = array();
$j = 0;
foreach ($prizes as $prize) { // loop all prizes
for ($i = 0; $i < $prize->getPrizeAmount(); $i++, $j++) {
$winner = $participants[$winnersKeys[$j]];
$winner->setLotteryPrize($prize);
}
}
$l->setIsDrawn(true);
$l->save();
}

Der Code läuft zwar, ist aber nicht schön: Die Methode LotteryItem::getLotteryParticipants() liefert in einem Array sämtliche Objekte der Personen, die am Gewinnspiel teilgenommen haben. Desto mehr Teilnehmer es werden, desto langsamer wird es, da für jede Zeile des Datenbankresultats ein Objekt gebaut wird und die Instanziierung dessen eine teuere Operation ist.

Über array_rand() werden genausoviele Schlüssel dieses Arrays zurückgegeben wie die in der selben Klasse definierte Methode countTotalWinnersForPrizes() zurückgibt - sie zählt die gesamte Anzahl aller zu vergebenden Preise.
mixed array_rand ( array input [, int num_req] ) gibt ein Array mit den Schlüsseln zurück, wenn der 2. Parameter größer als 1 ist, ansonsten einen Schlüssel, also kein Array (als integer in unserem Falle), was ich an der Methodendefinition nicht besonders schön finde, da dieser Fall hier extra abgefragt werden muss.

Zum Schluss wird über die eigentlichen Preise iteriert, jedem Gewinner einen Preis zugeordnet und das Gewinnspiel gespeichert. Konstrukte wie $participants[$winnersKeys[$j]]; sind unschön weil sie schwer zu lesen sind bzw. es schwer fällt, diese später wieder zu verstehen.

Ein Refactoring muss also her ...

2. Die wesentlich eleganter-/performantere Implementierung:

private function drawSingleLottery(LotteryItem $l) {
$prizes = $l->getLotteryPrizes();
$winners = $l->determineWinners();
// set for every winner a prize
$winner_i = 0;
foreach ($prizes as $prize) { // loop all prizes
for ($i = 0; $i < $prize->getPrizeAmount(); $i++) {
$winner = $winners[$winner_i++];
$winner->setLotteryPrize($prize);
}
}
$l->setIsDrawn(true);
$l->save();
}

Alles, was im ersten Codefetzen hässlich war ist verschwunden und die neue Methode LotteryItem::determineWinners() erblickt das Licht der Welt - diese scheint wohl direkt die Gewinner anstatt nur deren Keys zurückzuliefern, was nach einem Blick in den Code klar wird:

public function determineWinners() {
$amount = $this->countTotalWinnersForPrizes($this->getLotteryPrizes());
return LotteryParticipantPeer::retrieveRandomAmount($this, $amount);
}

Durch das Refactoring hat die countTotalWinnersForPrizes() Methode die Klasse gewechselt, ihr Innenleben bleibt jedoch unverändert.

Abschließend interessiert nur noch die performantere Implementierung von LotteryParticipantPeer::retrieveRandomAmount():

public static function retrieveRandomAmount(LotteryItem $l, $amount) {
if (!is_numeric($amount) || $amount < 1) throw new Exception('amount should be a positive integer');
$con = sfContext::getInstance()->getDatabaseConnection('propel');
$sql = 'SELECT '.self::ID.' FROM '.self::TABLE_NAME.' '.
'WHERE '.self::LOTTERY_ITEM_ID.' = '.$l->getId().' '.
'ORDER BY RAND() '.
'LIMIT '.$amount;
$q = new Query($con, $sql);
return self::retrieveByPKs($q->getCol(), $con);
}

...Diese baut lediglich eine Query von Hand mit dem in der aktuellen Propel-Version noch nicht abbildbaren MySQL-spezifischen ORDER BY RAND(), das zufällig so viele Gewinner-IDs liefert, wie die Funktion als zweiten Parameter übergeben bekommt (MySQL LIMIT). Das Resultat liefert über LotteryParticipantPeer::retrieveByPKs() die gewünschten Objekte als Array zurück.

...So weit also mal ein kleiner Einblick in die Technik, die dahintersteckt - Ich habe euch hoffentlich nicht zu sehr gelangweilt

Kleine Wbb2-Mysql-Triggerei

nospam@example.com (Christoph Hautzinger) — Tue, 23 Jan 2007 01:58:57 +0100

Die Usergallerien auf diginights.com halten die Daten für Usernamen, Userid und ersten Buchstaben des Usernamens in einer eigenen, vom Forum separaten Tabelle. Auf der Spalte ersten Buchstaben des Namens liegt ein INDEX, sodess danach schnell gesucht werden kann. Diese Vorgehensweise spart eine DB-Connection, da die Forumstabellen in einer eigenen Datenbank liegen und Symfony bzw. Propel leider nicht mehrere Datenbanken über einen DSN handeln können.

Ein Nachteil liegt hierbei auf der Hand: Sollte im Forum ein Username geändert werden bleibt dieser ohne Eingriff in den Forumscode in den Usergallerien unverändert.

MySQL bietet nur hierfür (eeeendlich) ab der Version 5 eine elegante Lösung des Problems: Trigger.

Und so sieht das kleine Triggerlein aus:

DELIMITER //
CREATE TRIGGER t_rename_boarduser
AFTER UPDATE ON forum_users
FOR EACH ROW
BEGIN
DECLARE initial_cap CHAR(1);
SET initial_cap = LOWER(SUBSTRING(NEW.username, 1, 1));
IF initial_cap REGEXP '[^a-z]' THEN
SET initial_cap := '@';
END IF;
REPLACE INTO siteusers (userid, name, name_initial_cap) VALUES (NEW.userid, NEW.username, initial_cap);
END//

Die Funktionsweise erklärt sich fast von selbst: Nach einem Update wird für jede aktualisierte Zeile der erste Buchstabe des Usernamens als Kleinbuchstabe in der Variablen initial_cap gespeichert. Sollte es ein Sonderzeichen (bzw. ein Zeichen, das nicht zwischen a und z liegt) sein, wird der Inhalt der Variablen mit einem '@' übeschrieben. Zum Schluss werden die Daten in die Tabelle aus der später die Daten für die Usergallerien gezogen werden, mit einem REPLACE gespeichert. "NEW" steht für einen Cursor, der auf die Zeile nach dem Update steht - synonym dazu steht OLD für den alten Wert, so wäre beispielsweise in OLD.username der alte Username vor dem Update gespeichert.

...somit entfällt die Manipulation des Forumscodes.

Mit Triggern zu arbeiten macht Spass und kann die Effizienz einer Anwendung deutlich erhöhen, allerdings kann es auch zu bösen Endlosschleifen kommen, wenn man beim Programmieren nicht aufpasst

Webseiten als Graph!?

nospam@example.com (Christoph Hautzinger) — Sun, 10 Dec 2006 15:11:31 +0100

Gestern bin ich auf eine Seite aufmerksam geworden, auf der man Webseiten als Graphen darstellen kann. Man gibt in einem Eingabefeld seine gewünschte Seite an, worauf ein Java-Applet sich diese herunterläd, das Markup parst und daraus einen Baum generiert:

Das Ergebnis der Seite diginights.com sieht zum Beispiel so aus:

Was bedeuten nun die einzelnen Farben? Die Legende lässt sich auf der Webseite des Applets finden (auf der man übrigens auch den Java Sourcecode findet):

blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

Eine "neue" Seite sollte State of the Art keine Tabellen (rot) zur Positionierung mehr verwenden, sondern dies durch dies über div-Tags (div) und deren CSS Attribute lösen.

Ein regionales Negativbeispiel hierzu habe ich natürlich auch gefunden:

(von www.stimme.de)

diginights goes symfony

nospam@example.com (Christoph Hautzinger) — Mon, 20 Nov 2006 00:01:23 +0100

Endlich ist es so weit... diginights.com ist nun auf mein heißgeliebtes symfony Framework umgestellt. Die endgültige Umstellung hat leider länger als erwartet gedauert, sodass wir Freitag bis 6 Uhr und Samstag bis 4 Uhr morgens gearbeitet haben

Symfony skaliert deutlich besser als unsere alte Seite, außerdem erleichtert es mir mein Leben in Zukunft enorm, weil sehr viele coole Sachen wie z.B.

- Session/User Management
- sehr cleveres Caching
- ORM (Object Relational Mapper via Propel - komplette Spezifikation über XML, generierung der Klassen über Kommandozeile)
- Ajax Support
- Formularvalidierung
- Routing
- Admin Generator, der die Adminstrationsoberflächen einer Tabelle an Hand eines Config-Files erzeugt

von Haus aus dabei sind (um nur ein paar Dinge zu nennen).

Der Name Symfony steht übrigens für die Zusammenschnürung mehrerer Open Source Technologien wie z.B. dem bereits erwähnten Propel, Creole zur Datenbankabstraktion, Prototype einer sehr umfangreichen Javascript Library, PEAR, etc.

Diese Woche über werde ich die kleineren Bugs fixen, die uns noch aufgefallen sind, sodass wir danach die schon länger geplanten Gewinnspiele in Angriff nehmen können. Intern wollen wir die Struktur der Party-Bilder im Dateisystem ändern und diese auf den 2. Server legen wovon wir uns nochmals einen Performanceschub erhoffen.

Zudem ist noch viel mehr geplant für die Zukunft, davon will ich aber noch nichts verraten