Kau-Boys blog » Webentwicklung

RewriteRule mit Leerzeichen in der Zieladresse

Bernhard — Mon, 19 Apr 2010 10:22:03 +0000

Auf einer Seite die ich betreue wurde ich vor kurzem vor die Aufgabe gestellt eine RewriteRule in der .htaccess zu definieren, die auf eine PDF zeigt, die ein Leerzeichen im Dateinamen enthält. Das war gar nicht so einfach rauszufinden und selbst im sehr guten Forum von modrewrite.de konnte ich keine geeignete Lösung finden.

In URLs werden Leerzeichen einfach mit der Zeichenkette %20 ersetzt, aber das alleine führt noch nicht zum Erfolg. Da das Prozentzeichen ein spezielles Zeichen in Rewrite Rules darstellt muss es mit einem Backslash escaped werden. Eine funktionierende Rewrite Rule mit einem Leerzeichen könnte also wie folgt aussehen:

RewriteEngine on
RewriteRule ^kurzer-dateiname.pdf$ dateiname\%20mit\%20Leerzeichen\%20.pdf

Wer also den Dateinamen nicht ändern kann um Leerzeichen zu ersetzen (z.B. durch Unterstriche) kann mit dieser Regel trotzdem einen schöneren/kürzeren Dateinamen über die .htaccess anbieten.

Das war es auch schon. Heute gibt es mal nur einen kurzen Artikel, aber viel mehr gibt es auch nicht dazu zu sagen. Außer vielleicht, dass ihr niemals versuchen solltet ein Leerzeichen in der Zieladresse zu verwenden, da sonst die gesamte .htaccess ungültig wird und der Server einen 500 Fehler für jede Seite zurückliefert.

Ich hoffe der Tipp konnte euch weiterhelfe. Kommentare sind wie immer gern gesehen!

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables

Bernhard — Mon, 15 Mar 2010 15:29:16 +0000

Nachdem wir uns in Teil 1 des Tutorials mit der Draggable Klasse beschäftigt haben, wenden wir uns heute seinem Bruder der Droppables Klasse zu. Mit ihr können wir auf ein aufgenommenes Element reagieren. Eine typische Anwendung sind Einkaufkörbe auf Online-Shops. Ich möchte daher einen einfachen Einkaufswagen demonstieren.

Der Quellcode für dieses Beispiel

Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:




	
		Drag-and-Drop Part 2
		
		
		
	
	
		Drag-and-Drop

In den Zeilen 35-39 sind zwei einfache “Artikel” aufgeführt (in unserem Fall einfache farbige DIVs) sowie der “Warenkorb”, der eine leere unsortierte Liste enthält. In diese fügen wir dann per Drag-and-Drop die Waren ein. Sehen wir uns nun aber den interessanten Teil des Quellcodes an, das JavaScript. Die Zeilen 41-46 sollten aus dem ersten Teil des Tutorials bekannt sein. Wir erzeugen hier zwei Draggables wobei wir die Option reset auf true setzen, damit die Artikel beim “loslassen” wieder auf ihre ursrpüngliche Position zurückkehren. Nun aber zum neuen Teil der Droppables-Klasse:

Droppables.add('shopping_cart', {
	onDrop: addItem,
	hoverclass: 'hover'
});

Wichtig ist hier, dass wir keine Instanz der Klasse durch das Schlüsselwort new erzeugen. Es existiert vielmehr schon eine Instanz, der wir mit der add() Funktion eine neue “Drop-Zone” hinzufügen. Es ist also möglich mehrere Bereiche einer Website für die Reaktion auf Draggables zu verwenden. Es wäre z.B. möglich einen “Papierkorb” einzurichten, mit dem man einenen bereits hinzugefügten Artikel wieder aus der Liste entfernen kann bzw. dessen Anzahl verringern.

Der add() Funktion können auch mehrere Optionen übergeben werden, welche das sind könnt ihr in der API zu Droppables nachlesen. Ich verwende hier die hoverClass Option, die der “Drop-Zone” eine Klasse zu weist, wenn der Benutzer mit einem Draggable darüber steht. Zusätzliche gebe ich eine Callback-Funktion für das onDrop Event an. Wie ihr der Funktion addItem() entnehmen könnte, bekommt die onDrop() Funktion eine Referenz auf das aufgenommene Elemente sowie auf die “Drop-Zone” und das Event selbst übergeben. In der Funktion selbst fügen wir den Artikel an die Liste an und setzen die Anzahl auf 1, sofern er noch nicht enthalten ist. Wenn er enthalten ist erhöhen wir dir Anzahl um 1.

Das Beispiel

Das oben beschriebene Beispiel sieht dann wie folgt aus (es darf aber gerne unter Verwendung von Bildern anstelle von DIVs und mehr CSS noch ansprechender gestaltet werden):

Warenkorb

Wie ihr also sehen könnt ist es sehr einfach ein Element für die Interaktion mit Draggables zu verwenden. Was ihr dabei mit den Elementen macht ist eurer Fantasie überlassen. Die Möglichkeiten sind schier unbegrenzt. Ich möchte euch also dazu animieren einfach einmal mit der Funktion zu experimentieren.

Das war es dann auch schon wieder mit diesem Teil des Tutorials. Im nächsten Teil sehen wir uns einen sehr speziellen Fall von Drag-and-Drop an und zwar mit dem Sortieren von Elementen. Wie einfach so etwas möglich ist und wie leicht sich die Sortierreihenfolge auslesen lässt, das erwartet euch in Teil 3 des Tutorials. Für welche Einsatzzwecke habt ihr bisher Draggables und Droppables genutzt? Über einen Kommentar dazu würde ich mich wie immer sehr freuen.

Assoziatives Array als HTML Tabelle ausgeben

Bernhard — Tue, 09 Mar 2010 21:39:06 +0000

Sehr häufig wird gefordert ein assoziatives Array als HTML Tabelle auszugeben. Ich nutze hier sehr oft die implode() Funktion, um dabei mit möglichst wenig Quellcode zu dem Gewünschten Ergebnis zu kommen. Da ich meine Lösung wirklich sehr schön und genial einfach finde, wollte ich euch kurz die Funktion präsentieren. Als auszugebendes Array nehmen wir das MySQL-Debugging Array aus meinem vorherigen Artikel MySQL unter PHP debuggen mit einer eigenen MySQL Klasse.

function array_to_table($a){
	$t='';
	$t.='';
	foreach($a as $row){
		$t.= '';
	}
	return $t.=''.implode(' ', array_keys($a[0])).'
'.implode(' ', $row).'';
}

// Ausgabe der Tabelle
echo array_to_table($mysqli->queries);

'.implode('	', array_keys($a[0])).'
'.implode('	', $row).'

In Zeile 3 werden die Schlüssel des assoziativen Array für die Überschriften der Spalten genutzt. Wir öffnen hier eine Zeile und eine Spalte und fügen dann mit Hilfe der implode() Funktion alle Schlüssel in diese Zeile ein. Die “Glue” für die implode() Funktion ist hierbei ein schließendes Tag für die Spalte und ein weiteres öffnendes. Am Ende der Zeile schließen wir noch die letzte Spalte und die Zeile. Die gleiche elegante Anwendung der implode() Funktion verwenden wir auch bei den einzelnen Spalten mit den Werten. Hier in einer foreach Schleife.

Mit dieser Funktion kann jedes assoziative Array sehr elegant ausgegeben werden. Dabei lässt sich die Funktion trefflich erweitern. So könnte z.B. in einem Parameter ein Array mit Schlüsselnamen übergeben werden, wenn die Schlüssel des Assoziativen Arrays nicht passend für die Tabelle sind. Oder es könnte jeder Zeile eine alternierende “gerade” und “ungerade” Klasse mitgegeben werden. Oder aber man vergibt Klassen um eine der vielen JavaScript Sortierungen auf die Tabelle anwenden zu können.

Wir ihr also sehen könnt ihr eure Fantasie bei der Erweiterbarkeit freien Lauf lassen. Ich vergebe meistens die Klassen für Sortierung einer Tabelle mit der Tablekit Sortierung.

Ich hoffe, dass euch die Funktion bei eurer täglichen Arbeit helfen kann. Ich liebe die implode() Funktion, da man mit ihr sehr elegant PHP Arrays in Strings umwandeln kann. Ich verwende sie auch häufig beim Erstellen von SQL Statements in Verbindung mit dem IN() Operator.

MySQL unter PHP debuggen mit einer eigenen MySQL Klasse

Bernhard — Thu, 04 Mar 2010 22:41:07 +0000

Bei einem meiner Projekte kam es zu ungewöhnlich langen Ladezeiten eines Formulars. Da hier allerdings auch sehr viele Datenbankabfragen ausgeführt werden müssen und dabei auch noch die Werte per COUNT() gezählt werden wunderten mich die Zeiten nicht wirklich.

Nun wollte ich natürlich wissen, welche Abfrage dabei besonders viel Zeit in Anspruch nimmt um dann gezielt optimieren zu können. Ich setze in dem Projekt auf die MySQLi Klasse von PHP. Da ich hierbei die Klasse objektorientiert nutze, war es sehr einfach möglich diese zu erweiterten. Eine Möglichkeit wäre es natürlich gewesen eine eigene Funktion zu schreiben, aber in diesem Fall hätte ich auch alle Skript anpassen müssen, in denen ich eine Query ausführe. Daher habe ich mich dazu entschlossen einfach die query() Funktion von MySQLi zu überschreiben. Hier ein stark vereinfachtes Beispiel, wie so etwas aussehen könnte:

error;
		}

		$end = microtime(true);

		$this->queries[] = array(
			'number' => count($this->queries),
			'query' => $query,
			'error' => $error_message,
			'time' => $end - $start
		);

		$this->queries_time += $end - $start;

		return $result;
	}
}

$mysqli = new mysqliDebugger('host', 'user', 'pass', 'name');
if($result = $mysqli->query('SELECT * FROM tablename')){
	while($row = $result->fetch_assoc()){
		// Verarbeiten der Ergebniszeilen
	}
}

if($result = $mysqli->query('SELECT * FROM tablename2')){
	while($row = $result->fetch_assoc()){
		// Verarbeiten der Ergebniszeilen
	}
}

?>

Sehen wir uns die wichtigsten Zeilen des Quellcodes an. Die Zeilen 8-10 zeigen den Konstruktor unserer neuen Klasse, die den Konstruktor der geerbten Klasse MySQLi aufruft. In den Zeilen 16-36 überschreiben wir die query() Funktion der MySQLi Klasse mit unserer Debugging-Klasse. Dort wird zuerst einmal zur Protokollierung der Ausführungszeit der Startzeitpunkt mit Hilfe der microtime() Funktion ermittelt. Anschließend wird der Query mit dem Aufruf parent::query($query) an die query() Funktion der MySQLi Klasse übergeben. Einen eventuell auftretenden Fehler speichern wir dabei in einer Variablen ab.

In Zeile 23 speichern wir die Endzeit des Query. Anschließend speichern wir alle Werte, die wir zur späteren Auswertung benötigen in einem Array gespeichert. Zusätzlich summieren wir noch alle Zeiten auf, um später die Gesamtdauer aller Statements bestimmen zu können. Die ab Zeile 38 wird eine einfache Instanziierung und Nutzung der Klasse aufgezeigt, wie man sie auch von MySQLi kennt. Wer also in seinen Skripten schon MySQLi verwendet kann einfach beim Instanziieren der Klasse die neue Debugging-Klasse verwenden und muss keine weiteren Zeilen im Quellcode ändern. Ich empfehle eine kleine Bedingung zu verwenden, die feststellt, ob der Debugging-Modus aktiv ist und nur dann die Debugging-Klasse zu verwenden, wenn sie auch benötigt wird. Das spart im produktiven Einsatz etwas Rechenzeit. Eine mögliche Bedingung könnte wie folgt aussehen:

if($debug){
	$mysqli = new mysqliDebugger('host', 'user', 'pass', 'name');
} else {
	$mysqli = new mysqli('host', 'user', 'pass', 'name');
}

Anstelle der $debug Variablen könntet ihr auch einen GET Parameter oder einen Session Parameter verwenden. Ich rate aber dringend davon ab einen einfach zu erratenden GET Parameter zu verwenden, da in solchen Fällen eure SQL-Statements für Unbefugte sichtbar werden könnten, was unter Umständen die Sicherheit eueres Systems gefährden könnte.

Nachdem wir die Daten gesammelt haben möchten wir sie natürlich auch ausgeben. Das solltet ihr auch wieder die vorherige Bedingung verwenden. Dazu erstellen wir einfach eine Tabelle, die die gesammelten Daten enthält:

queries as $query) : ?>
	
	Gesamtdauer: queries_time ?>
	
		Anzahl
		Query
		Fehler
		Zeit

Nehmen wir an, wir die Tabelle aus dem ersten Statement ist in der Datenbank nicht vorhanden. In diesem Fall würden wir einen SQL-Fehler erhalten. In der Tabelle können wir dann direkt den Fehler ermitteln und entsprechend das Statement korrigieren. Auch hier wird das Statement gespeichert und die Zeit gemessen.

Gesamtdauer: 0.0025820732116699
Anzahl	Query	Fehler	Zeit
0	SELECT * FROM tablename	Table ‘name.tablename’ doesn’t exist	0.00076198577880859
1	SELECT * FROM tablename2		0.0018200874328613

Ihr habt mit dieser kleinen Beispiel-Klasse einen sehr einfachen Debugger zur Hand, mit dem ihr sehr schnell die langsamen Statements in eurem System finden könnt. Ihr könnt die Klasse natürlich auch noch nach euren Wünschen erweitern und auch andere Funktionen von MySQLi überschreiben. Wenn ihr, so wie ich, zentral an einer Stelle die Datenbankverbindung erzeugt könnt ihr durch die Bedingung aus dem zweiten Quellcode eure gesamte Applikation debuggen.

Ich habe damit in meinem Projekt schon zwei überflüssige Statements finden können und einige andere Statements noch weiter optimieren können. Ich hoffe, dass euch der Debugger auch bei eurer täglichen Arbeit unterstützen kann. Über Anregungen und Kommentare Wrede ich mich wie immer freuen.

Das Bermudadreieck des Internet Explorer – Oder: Wo zum Teufel ist mein Ordner hin?

Bernhard — Wed, 03 Mar 2010 17:10:12 +0000

Heute bin ich mal wieder auf ein sehr faszinierendes Problem mit dem Internet Explorer gestoßen. Meine erste Vermutung war mal wieder ein Programmierfehler im vielgeliebten IE6, aber der Fehler trat auch im Internet Explorer 7 auf.

Ich nutze in einem Projekt absolute Pfade in allen Dateinamen, Links und Formularen. Nun hatte ich aber im einem Formular dummerweise das Gleichheitszeichen nach dem Short Open Tag in PHP vergessen. Mein Formular sah also in verkürzter Form wie folgt aus:

...

Soweit so gut, aber im Grund durfte hierdurch kein Problem entstanden sein. Der absolute Pfad enthielt eine Angabe in der Form http:/www.beispiel.de/formularordner. Da nun dieser Pfad nicht zur Verfügung stand enthielt das action Attribut des Formulars nur den Wert form.php.

Das Formular wurde über einen Link aufgerufen und somit befand sich der Nutzer innerhalb des “formularordner”. Wenn nun also der Pfad relativ angegeben wird, müsste das Formular in genau diesem Ordner gesucht werden. Einige Nutzer bekamen aber eine schöne 404 Fehlermeldung. Da mir einer dieser Nutzer einen Screenshot des Dilemmas geschickt hat konnte ich feststellen, dass der Browser versuchte den Pfad http./www.beispiel.de/form.php zu öffnen. Hier war aber natürlich kein Formular zu finden.

Ich konnte den Fehler dann beheben, indem ich das Gleichheitszeichen wieder an seine korrekte Stelle eingefügt habe. Dadurch kam es nicht mehr zu den falschen Aufrufen. Der Vollständigkeit halber hier noch der korrekte Quellcode:

...

Was aber genau beim Internet Explorer dazu geführt hat, dass er den Ordner einfach “verschluckt” hat konnte ich bisher noch nicht feststellen. Mir ist es auch bisher nicht gelungen den Fehler auf einem meiner Rechner zu reproduzieren. Es liegt auch nicht an einem grundsätzlichen Problem bei einem der Nutzer, denn nachdem sie den Browser neu geöffnet hatten funktionierte plötzlich alles wieder wie gewohnt.

Das erstaunlichste ist aber, dass dieser Fehler schon vor 13 Monaten im Skript vorhanden ist und erst jetzt von drei Nutzern entdeckt wurde, obwohl das betreffende Formular wohl hunderte Male am Tag genutzt wird.

Sollte jemand von euch schon einmal dieses Problem selbst erlebt haben und vielleicht sogar eine Erklärung oder Lösung dafür kennen würde es mich wirklich brennend interessieren. Mit dem absoluten Link funktioniert es aber soweit wieder und ich hoffe, dass der Internet Explorer nun den Ordner beibehält.

Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable

Bernhard — Tue, 02 Mar 2010 16:38:32 +0000

Heute möchte ich mein angekündigtes Tutorial über Drag-and-Drop starten. Das Ziel dieses Tutorials ist der Nachbau einer dynamischen Newsseite, wie ich sie in meinen Artikel Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen vorgestellt habe. Da eine solche Seite mit vielen verschiedenen Techniken zusammengesetzt ist, werden wir immer kleine Teile auf dem Schritt zur fertigen Seite nachvollziehen.

Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.

Der Quellcode für dieses Beispiel

Beginnen wir also mit dem Beispiel. Zuerst einmal benötigen wir etwas HTML in dem wir ein Element platzieren, welches wir dann aufnehmen möchten. Für das Element nehme ich exemplarisch ein DIV, aber ihr könnt auch z.B. ein Bild verwenden:




	
		Drag-and-Drop Teil 1
		
		
		
	
	
		Drag-and-Drop

Wichtig für das Aktivieren der Draggable Funktion auf ein Element ist eine ID für das Element. Das DIV hat hier die ID “draggable”. Im Kopf werden die beiden JavaScript Dateien für Prototype und Scriptaculous eingebunden. Wichtig ist hierbei, dass zuerst Prototype eingebunden wird. Zusätzlich ist noch etwas CSS angegeben um dem DIV einen Rahmen und eine Hintergrundfarbe zu verpassen. Alles was nun notwendig ist, um das DIV aufnehmbar zu machen ist eine einzige Zeile JavaScript:

new Draggable('draggable');

Es wird hier eine neue Instanz des Draggable Objekts erzeugt. Dem Konstruktor wird hierbei die ID des Elements übergeben, welches aufnehmbar sein soll.

Ein Beispiel gefällig

Da dieser Blog auch Prototype einsetzt, sollten wir es nicht bei einem Quellcode Auszug belassen, sondern einfach mal hier ein solches DIV einfügen. Also, hier kommt es:

Dieses DIV kann nun beliebig im Sichtbaren Bereich verschoben werden. Die Klasse bietet aber auch viele Optionen, die in einem Hash an die Funktion als zweiten Parameter übergeben werden können. Wir können z.B. die Bewegung eines Elements auf die horizontale beschränken und zusätzlich das Element beim “Loslassen” des Elements wieder auf seine ursprüngliche Position zurücksetzen. Der JavaScript Befehl dazu sieht wie folgt aus:

new Draggable('draggable2', {constraint: 'horizontal', revert: true});

Ich habe hier die ID um eine Zwei erweitert, damit ich auch dieses Beispiel hier vorführen kann. Wichtig ist natürlich immer, dass ihr für die verschiedenen Elemente unterschiedliche IDs verwendet und niemals eine ID in zwei Instanzen verwendet. Das DIV verhält sich dann wie folgt:

Da es hier in diesem Tutorial nicht darum geht alle möglichen Optionen zu erklären möchte ich euch gerne auf die API Referenz der Draggable Klasse verweisen. Dort findet ihr eine Liste aller Optionen und einige weitere Beispiele.

Damit möchte ich auch schon den ersten Teil des Tutorials abschließen. Ihr solltet einfach einmal die verschiedenen Optionen ausprobieren um zu sehen, wie sich das DIV dabei verhält. Im zweiten Teil beschäftigen wir uns mit “dem Bruder” von Draggable. Dabei handelt es sich um die Droppables Klasse, die es ermöglicht ein aufgenommenes Element “einzufangen” und auf das Element zu reagieren.

Weitere Sicherheitslücken beim Internet Explorer 6 aufgetreten

Bernhard — Mon, 01 Mar 2010 22:52:15 +0000

Es vergeht fast keine Woche, in dem nicht neue Sicherheitslücken im Internet Explorer 6 bekannt werden. Dieses Mal sind die Versionen 6 und 7 für Windows XP betroffen. User von Windows 7 sowie von Windows Server 2008 und Vista sind laut dem Blogartikel von Microsoft nicht betroffen.

Wie so oft wird den Nutzern geraten die Scripting Funktionen ihres Browsers zu deaktivieren. Dies ist aber nicht immer für den Benutzer möglich bzw. findet er oft die nötigen Einstellungen dazu nicht. Meiner Meinung nach wird durch diese Sicherheitslücken zunehmend die Angst vor JavaScript und Co. gestärkt. Das macht es für uns Webentwickler natürlich teilweise sehr schwer den effektiven und wohl dosierten Einsatz von clientseitigen Skriptsprachen zu rechtfertigen.

Nun kann man zwar nicht dem Internet Explorer die Schuld daran geben, denn schließlich tauchen bei jedem Browser mehrmals pro Jahr Sicherheitslücken auf. Aber beim Internet Explorer 6 häufen sich solche Fehler in letzter Zeit. Wenn das natürlich dazu führt, dass er IE6 schneller von Unternehmensrechnern verschwindet und damit seine Hauptzielgruppe verliert umso besser. Doch leider findet er sich noch immer auf jeder Standardinstallation eines Windows XP System und auch die Service Packs zwingen den Benutzer nicht zum Update. Microsoft hat zwar angekündigt den Support für Windows XP ohne SP3 zum Juli einzustellen, aber auf ein Support Ende des IE6 warten wir bisher vergeblich.

Wenn ich mir zu meinem Geburtstag diesen Monat etwas von Microsoft wünschen dürfte, dann wäre es nicht das neue Office 2010, was ja im Juni erscheinen soll, sondern das Ende einer Ära im Browsermarkt.

Der Internet Explorer ist tot! Lang lebe der Internet Explorer!

Bernhard — Thu, 25 Feb 2010 16:01:50 +0000

Schon vor längerer Zeit hat Google angekündigt den Support für den Internet Explorer 6.0 für die meisten seiner Dienste nicht mehr fortzusetzen. Zu dieser Aussage gibt es jetzt auch ein genaues Datum, ab wann der Support eingestellt werden soll. Der Stichtag ist demnach der 13. März 2010. Was anschließend beim Aufruf der entsprechenden Dienste mit dem Internet Explorer 6.0 zu sehen sein wird konnte ich noch nicht erfahren.

Da ich aber, wie in meinem Artikel Internet Explorer 6 unter Windows 7 nutzen mit dem Windows XP Mode beschrieben habe, selbst noch eine Installation des IE6 auf meinem Laptop laufen habe, werde ich euch dann berichten, ob die Dienste noch nutzbar sind. Auf der Homepage von YouTube ist für Nutzer des Internet Explorers schon länger ein Hinweis zu sehen, der zum Update des Browsers auffordert:

Interessant ist hierbei auch, dass die Reihenfolge der vorgeschlagenen Browser bei jedem neuen Laden der Seite zufällig neu verteil wird. Genau das hat man ja auch Microsoft bei der aufgezwungenen Browserauswahl für Windows 7 gefordert.

Nachdem nun aber nicht nur Google dem IE6 abschwört, sondern auch in letzter Zeit immer mehr Berichte über Sicherheitsprobleme in fast allen Medien die Runde machen ist zu hoffen, dass der Internet Explorer 6 das Jahr 2010 nicht überleben wird. Es sollte mittlerweile auch dem letzten Admin klar sein, dass dieser in die Jahre gekommene Browser keine Zukunft mehr hat. Die vielen Unternehmen, die noch am Browser festhalten, weil es speziell angepasste Intranet-Lösungen dafür gibt sollten sich ernsthaft fragen, wie seriös ein Anbieter solch einer Software noch sein kann, wenn es mittlerweile schon zwei Nachfolgeversionen des IE6 gegeben hat. Die Zeit zum umstellen der Software war also sehr wohl da. Jeder von euch, der schon einmal eine Website aus den IE6 Zeiten auf den IE7 portiert hat wird mir wohl zustimmen können, dass die Anpassungen marginal waren. Das optimieren von Websites an den IE6 ist aber bis heute eine Königsdiziplin für Webdesigner und eine der sinnlosesten und zeitraubenden oberdrein.

Ich sehe im Internet Explorer 8 einen großen Schritt von Microsoft in die richtige Richtung. Der Internet Explorer in Version 9 soll dann den anderen standardkonformen Browsern in nichts mehr nachstehen. Mal sehen, was aus dieser Ankündigung am Ende wird. Aber da der Umstieg vom IE7 auf den IE8 und später den IE9 keine großen Hürden darstellen sollte ist zu hoffen, dass wir Webentwickler dann mehr Zeit für interessantere Dinge haben werden.

P.S. Bei all dem schlechten Gerede über den IE6 wollte ich noch erwähnen, dass ich heute die Umarbeitung des Themes meines Blog für den IE6 abgeschlossen habe. Alle transparenten PNGs sind nun in transparente GIFs konvertiert. Alle Nutzer die noch dazu gezwungen sind den IE6 zu nutzen können meinen Blog nun auch in all seiner Pracht genießen.

Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen

Bernhard — Tue, 23 Feb 2010 23:46:48 +0000

An dieser Stelle muss ich mal ein Lob loswerden. Zurzeit laufen ja die Olympischen Winterspiele in Vancouver und Whistler. Und natürlich ist die Präsenz im Web auch extrem hoch. Im Fernsehen sind die Spiele vor allem in ARD und im ZDF im Free-TV und bei den digitalen Kanälen der beiden Öffentlich-rechtlichen zu sehen. Das erwartet man auch, denn dafür zahlen wir ja auch brav unsere Gebühren.

Was man nicht unbedingt erwartet und was mich sehr überrascht hat ist der sehr gute Web 2.0 auftritt. Es ist immer sehr gut zu sehen, auf welchen Kanälen gerade etwas live zu sehen ist und was gerade für neue Entscheidungen gefallen sind. Außergewöhnlich ist allerdings, wie dynamisch sich die Seite an die eigenen Interessen anpassen lässt:

Quelle: olympia.ard.de

Wie ihr auf dem ersten Screenshot sehen könnt können die verschiedenen Bereiche ausgelendet werden. Die Einstellungen werden hierbei in einem Cookie gespeichert, sodass die Einstellungen bei einem erneuten Besuch erhalten bleiben.

Eine andere Möglichkeit die Seite anzupassen besteht darin die verschiedenen Elemente per Drag-and-Drop zu verschieben. Dies geht genauso flüssig und unproblematisch wie man es auch von iGoogle oder ähnlichen Seiten gewohnt ist. Auch hier werden die Anordnungen in demselben Cookie gespeichert:

Quelle: olympia.ard.de

Ebenfalls sehr nett gemacht ist die Mediabox, die sehr an die Steuerung von diversen MP3-Playern mit Albumansicht erinnert. Einige Inhalte seinen außerdem erst dann geladen zu werden, sobald der Benutzer an die entsprechende Stelle scrollt.

Einige von euch werden sich jetzt fragen wieso ich einen solchen Artikel geschrieben habe. Einerseits um wirklich mal ein Lob an einen sehr guten Internet Auftritt loszuwerden. Andererseits aber auch um einen kleinen Überblick zu geben, was alles mit recht einfachen Mitteln möglich ist. Dem Quellcode konnte ich entnehmen, dass die ARD auf das JavaScript-Framework MooTools setzt.

Ich möchte diesen Artikel zum Einstieg für eine kleine Reihe rund um Drag-and-Drop Funktionen und andere oft gesehene Techniken zu nehmen. Im ersten Teil dieser Reihe werde ich auf die Grundlagen von Drag-and-Drop eingehen und diese am Beispiel des Scriptaculous Frameworks zeigen. Anschließend werden ich dann zeigen, wie man per Drag-and-Drop Elemente sortieren kann. In einem weiteren Teil geht es dann vermutlich um die Kombination der Sortierung mit AJAX.

Wer jetzt Lust bekommen hat sich das Ganze mal live anzusehen kann das auf der Olympia Website der ARD tun. Und das ZDF? Ja, das möchte ich nicht unerwähnt lassen. Auch hier gibt es viele Informationen rund um die WM und auch Livestreams. Aber die Seite ich nicht so dynamisch wie die der ARD. Besser gelöst finde ich hier aber der Liveticker. Dieser bekommt zwar die gleichen Einträge wie der bei der ARD, aber er aktualisiert sich von selbst und stellt auch sehr schön die aktuellen Zwischenergebnisse dar. Er läuft bei mir zurzeit fast ständig im Hintergrund. Also auch hier solltet ihr auch mal die Olympia Website des ZDF ansehen.

Ich hoffe ihr freut euch auf die kleine Tutorialreihe. Ich würde mich aber auch über eure Kommentare zu den Websites freuen.

Zeilen-Duplizierer mit AutoComplete Felder nutzen

Bernhard — Wed, 17 Feb 2010 13:18:55 +0000

ich bekam heute in einem Kommentar die Frage gestellt, ob mein Zeilen-Duplizierer aus dem Beitrag: Einfacher Zeilen-Duplizierer mit Prototype auch auf Feldern funktioniert, die die Scriptaculous Ajax.AutoCompleter Funktion verwenden.

Ich nutze den Duplizierer selbst in einem Formular, das solche Felder enthält. Meine erste Fassung entsprach dabei dem Einzeiler aus dem vorherigen Beitrag. Das Problem dabei ist allerdings, dass die AutoCompleter Funktion beim Erzeugen mit dem Felder verknüpft wird, auf das sie angewendet werden soll. Wenn man nun dieses Feld kopiert wird nicht eine neue Instanz des Ajax.AutoCompleter erzeugt, sondern die Referenz auf das alte Feld mit kopiert. Ein Eintrag im neu erzeugten Feld aktiviert also die AutoCompleter Funktion des vorherigen Feldes.

Um dieses Problem zu lösen hatte ich die erweiterte Funktion mit den beiden Callback-Funktionen erstellt. Damit ist es möglich die Referenz zum vorherigen Feld zu lösen und eine neue Instanz des Ajax.AutoCompleter nach dem Erzeugen der Kopie zu erstellen. Hier aber zuerst noch einmal die Funktion selbst. Ich habe mittlerweile auch eine Option zum Fokussieren des ersten Feldes in der Kopie hinzugefügt:

function addRow(selector, options){
	var lastRow = $$(selector).last();
	var newRow = lastRow.cloneNode(true);
	if (options.reset) {
		newRow.select('select', 'textarea', 'input').each(function(elm){
			elm.clear().checked = '';
		});
	}
	if(options.beforeInsert) options.beforeInsert(newRow);
	lastRow.insert({'after': newRow});
	if(options.afterInsert) options.afterInsert(newRow);

	if (options.focusFirst) {
		newRow.select('input', 'select', 'textarea').first().focus();
	}
}

Um die Ajax.Autocompleter Funktion nutzen zu können benötigt jedes Feld eine eindeutige ID. Nehmen wir also an, wir haben folgendes erstes Feld für unser Formular (hier ein Beispiel aus dem Artikel: Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous):


	
		Choose an address
		
			Address:

Wichtig sind hierbei natürlich die eckigen Klammern am Ende des Name Attributs, damit auch alle kopierten Werte mitübertragen werden. Damit wir einer Kopie dieses Feldes eine neue Instanz hinzufügen können, müssen wir beim Kopieren auch die ID verändern. Dazu schreiben wir uns eine kleine Callback-Funktion, die genau das erledigt:

function activateAutocomplete(newRow){
	var addressInput = $A(newRow.select('input')).first();
	addressInput.id += 1;
	addressInput.stopObserving();
	new Ajax.Autocompleter(addressInput.id, 'adresse_choices', 'get_addresses.php');
}

In der 2. Zeile selektieren wir das erste Element innerhalb der neuen Zeile (wir nehmen hier also an, dass es sich dabei um das AutoCompleter Feld handelt). Diesem fügen wir in der 3. Zeile zusätzlich zur ID eine 1 hinzu. Es entstehen also Felder nach dem Muster "address1", "address11" usw. Das reicht aus um die Felder genau zu referenzieren.
In der 4. Zeile kommt die schon angesprochene Funktion zum Einsatz, die das Autocomplete für das Feld deaktiviert. Zu guter Letzt erzeugen wir eine neue Instanz des Ajax.Autocompleter. Wir können dabei als zweiten Parameter dasselbe DIV Element für die Vorschläge verwenden, da es ja nicht möglich ist, gleichzeitig in zwei Felder etwas einzutippen. Das DIV wird automatisch durch Scriptaculous unter das Feld positioniert, in dem es verwendet wird.

Damit das ganze nun auch dupliziert werden kann, fügen wir noch einen entsprechenden Link ein. Dieser muss dann die Callback-Funktion als zweiten Parameter in der Funktion erhalten. Ich verwende hier ein SPAN Element mit einem onclick Event. Es geht aber auch mit einem gewöhnlichen Link:

Adresse hinzufügen

Es wird durch den Selektor "#addressform dl" die gesamte Definition inklusive des Label kopiert. Ihr könnt aber auch eine andere HTML Struktur wie z.B. eine unsortierte Liste verwenden.

Das war auch schon alles. Das Beispiel könnt ihr euch hier ansehen und auch den Quellcode dazu runterladen:

Beispiel
Download

Ich hoffe, dass euch die erweiterte Anwendung gefallen hat und vielleicht auf neue Ideen gebracht hat. Wenn ihr eine andere Anwendung kennt, bei der Ihr nicht weiterkommt würde ich mich wie immer über einen Kommentar sehr freuen.

Internet Explorer 6 unter Windows 7 nutzen mit dem Windows XP Mode

Bernhard — Mon, 01 Feb 2010 14:26:12 +0000

Wer sich von euch jetzt fragen sollte “Wieso sollte ich den IE6 unter Windows 7 nutzen?” dem würde ich gerne “Willst du nicht!” antworten. Aber diejenigen unter uns, die Webseiten entwickeln und auch mit dem IE6 eine Website testen müssen, wird dieser Artikel wohl helfen.

Unter Windows kann ja bekanntermaßen immer nur eine Version des Internet Explorers installiert sein. Da der IE8 auch einen Kompatibilitätsmodus für den IE7 besitzt hat man so schon mal zwei Fliegen mit einer Klappe geschlagen. Aber wie soll man unter Windows 7 einen IE6 installieren. Zum Glück gibt es hier eine sehr einfache und sehr benutzerfreundliche Methode. Zum Testen des Chrome Frame für meinem letzen Artikel habe ich noch eine virtuelle Maschine mit Windows XP unter Suns VirtualBox verwendet. Es geht aber sehr viel einfacher und erfordert keine Zeitaufwändige Installation eines XP-Systems, für das man auch noch eine Lizenz benötigt. Wer also keine mehr rumliegen hat und nicht unbedingt eine XP-VM benötigt, kann sich trotzdem den IE6 für Win7 holen.

Der Windows XP Modus

Alles was ihr benötigt ist der sogenannten Windows XP Mode. Dabei handelt es sich um eine spezielle Version von Microsofts Virtual PC. Alle Programme, die dort installiert sind, können auch unter Windows 7 gestartet werden. Und nicht wie man es von VMs gewohnt, indem man die VM startet und dort die Programme ausführt, sondern indem man sie direkt aus dem Startmenü von Windows 7 aufruft und auch direkt in Win7 nutzen kann.

Damit ihr den Windows XP Mode benötigt ihr mindestens eine Windows 7 Professional Lizenz oder höher. Benutzer von Win7 Starter oder Home können den Modus leider nicht nutzen. Zum installieren geht ihr einfach auf die Download-Website für den Windows XP Mode wählt eure Windows 7 Version und die gewünschte Sprache aus und installiert beide Dateien nacheinander. Anschließend könnt ihr die virtuelle Maschine über das Startmenü aufrufen und die nötigen Einstellungen für Windows XP durchführen. Ihr solltet in diesem Zusammenhang auch die Updates installieren aber auf KEINEN FALL das Update für den Internet Explorer 7.

Den Internet Explorer 6 unter Windows 7 nutzbar machen

Damit ihr nun den IE6 auch unter Windows 7 nutzen könnte ist ein sehr simpler Eingriff notwendig. Ihr müsst lediglich eine Verknüpfung zum IE6 in das Startmenü für “Alle Benutzer” kopieren. Dazu klickt ihr einfach mit der rechten Maustaste auf den “Start” Kopf und wählt “Öffnen – Alle Benutzer”:

Alle Verknüpfungen die hier zusätzlich zu den bereits abgelegten hinzugefügt werden sind anschließend in Windows 7 aufrufbar. Ihr könnt nun also hier eine Verknüpfung zum IE6 anlegen. Das geht wiederrum recht schnell, wenn ihr einfach die Verknüpfung auf dem Desktop per Drag-and-Drop hierher zieht:

Nun solltet ihr zur Sicherheit die Virtuelle Maschine einmal neustarten. Es funktioniert vielleicht auch ohne Neustart, aber bei mir war er notwendig (eventuell wegen der installierten Updates).

Den IE6 in Windows 7 aufrufen

Wenn alles richtig eingerichtet wurde, solltet ihr im Startmenü unter Windows 7 einen Unterordner in “Windows Virtual PC” mit der Bezeichnung “Windows XP Mode-Anwendungen” vorfinden. Dort sollte dann der Internet Explorer 6 aufrufbar sein:

Nachdem ihr den Internet Explorer gestartet habt könnt ihr ihn so verwenden, als wäre er direkt in Windows 7 installiert. Da aber nicht nur der IE6 sondern das gesamte System gestartet wird kommt es manchmal zu kuriosen Meldungen. So wird euch z.B. auch ab und zu auf Updates hingewiesen oder darauf, dass ihr keinen Virenscanner in der VM installiert habt. Wenn euch die Meldungen stören, solltet ihr einfach die erforderlichen Schritte in der VM durchführen.

Hier noch ein kleines “Beweisfoto” der Familienzusammenführung, für alle, die daran Zweifel haben, dass es so einfach ist:

Fazit

Mit dem Windows XP Mode ist es sehr einfach alte Programme unter Windows 7 zu nutzen. Es ist dabei sogar möglich mit der erweiterten Version von Virtual PC mehr als eine virtuelle Maschine zu betreiben. Wenn auch eine der anderen VMs eine Windows Installation ist, könnt ihr hier auch die Programme unter Win7 nutzbar machen. Wer also einen “echten Internet Explorer 7″ haben möchte, könnte z.B. eine weitere XP-VM aufsetzen oder eine Vista-VM nutzen. Ihr könnte in den VMs dann z.B. auch ältere Version von anderen Browsern installieren um diese gleichzeitig unter Win7 nutzen zu können. Zwar kann man viele andere Browser auch in mehreren Versionen auf einem System installieren, aber z.B. beim Firefox gibt es dabei immer mal wieder Probleme mit den Profilen.

Hat jemand von euch noch andere sinnvolle Anwendungen des Windows XP Mode gefunden? Vielleicht um ein paar Spieleklassiker zum Laufen zu bringen? Über Kommentare würde ich mich wie immer sehr freuen.

Blog oder Website fit machen für den IE6

Bernhard — Sat, 30 Jan 2010 16:22:32 +0000

Wie auf vielen News-Seiten zu lesen ist stellt Google ab Mitte des Jahres offiziell den Support für den Internet Explorer in der Version 6.0 ein. Unter den Besuchern meines Blog befindet sich zwar nur ein verschwindend geringer Prozentsatz an IE6 Nutzern, aber auch diese sollten meine Website einigermaßen ansehnlich präsentiert bekommen.

Das größte Problem ist oft, dass die schönen Themes nicht auf den IE6 angepasst wurden und daher zu sehr unschönen Darstellungen führen. Ich habe in einer virtuellen Maschine noch eine Installation vom Internet Explorer 6 laufen und damit mal selbst meinen Blog getestet. Das Ergebnis sah leider wie folgt aus:

Wie ihr hier sehen könnt sind die transparenten PNG Bilder im IE6 nicht transparent, da dieser nur transparente GIF Bilder unterstützt. Viel schlimmer war aber, dass die Sidebar mit den Widgets komplett nach unten gerutscht war. Um das zu beheben hätte ich sehr viele Dinge im CSS Layout und vermutlich auch im HTML-Quellcode ändern müssen. Daher habe ich überlegt, was man stattdessen tun könnte.

Die Lösung: Google Chrome Frame

Schon vor längerer Zeit hatte ich etwas vom Google Chrome Frame gelesen, der die Webkit Rendering Engine und die JavaScript Engine des Chrome Browsers in den Internet Explorer bringt. Dazu muss der Benutzer lediglich ein Plugin für den Internet Explorer installieren und der Website-Betreiber muss dem Plugin mitteilen, dass der Inhalt automatisch damit gerendert werden soll.

Den Browser zum Rendern mit dem Chrome Frame veranlassen

Alles was der Website-Betreiber tun muss, ist folgenden Meta-Tag in seinen Quellcode einzufügen:

Das X-UA-Compatible Meta-Tag sorgt dafür, dass das Plugin aktiviert wird und der Benutzer den Inhalt richtig dargestellt bekommt, vorausgesetzt natürlich er hat es auch installiert. Um einen Benutzer des Internet Explorers dazu zu bewegen das Plugin zu installieren, hat Google ein kleines JavaScript-Snippet bereitgestellt, mit dem der Benutzer einen Link zur Download-Seite des Plugins bekommt:

Damit die Aufforderung zum Download auch nur Benutzern des IE6 angezeigt wird, habe ich zusätzlich ein Conditional Comment benutzt, um das Snippet nur auf IE6 Benutzer anzuwenden, damit Benutzer des Internet Explorer 7 und höher keine Aufforderung bekommen. Außerdem müssen damit auch alle Nutzer eines andern Browsers nicht die JavaScript-Datei vom Google Server laden.

Der Blog nach der Installation des Plugins

Für diejenigen von euch, die etwas skeptisch sind, ob der ganze Aufwand lohnt, habe ich hier nun das “nachher” Bild, damit ihr sehen könnt, dass es wirklich funktioniert:

Wie ihr sehen könnt, sieht der Blog nun wieder richtig aus. Als kleinen Bonus des Plugins könnt ihr auch den Inspektor nutzen, wie man ihn von Chrome oder Safari gewöhnt ist. Aber die Besucher eures Blog werden das wohl eher nicht nutzen.

Ich hoffe, dass euch dieser Tipp helfen konnte. Mich würde interessieren, was ihr vom Google Chrome Frame haltet oder was für euch dagegen spricht. Hat ihn vielleicht jemand auch im Einsatz und schon echte Probleme oder Nachteile damit feststellen können? Über Kommentare würde ich mich wie immer sehr freuen … über ein baldiges Aussterben des IE6 aber noch viel mehr

Arrays und andere komplexe Daten mit PHP in einer MySQL-Datenbank speichern

Bernhard — Sun, 24 Jan 2010 00:11:06 +0000

Viele von euch werden wohl schon einmal vor dem Problem gestanden haben, dass sie ein Array oder ein Objekt in der Datenbank speichern mussten. Hier möchte ich ein paar Vorschläge unterbreiten, wie man das Problem nicht lösen sollte und wie es besser gehen kann.

Der schlechte Weg

Die einfachste und gleichzeitig auch schlechteste Methode wäre es, für jeden Index eines Arrays oder jede Eigenschaft eines Objekts eine neue Spalte zu erzeugen. Bei diesem Ansatz werden unter Umständen viele Zeilen erzeugt, die nicht immer einen Wert enthalten. Das ist zwar nicht so gravierend, aber durch diesen Ansatz erhöht sich auch die Anzahl der Spalten schnell auf eine unübersichtliche Anzahl. Zuletzt ist es hierbei bei jeder Änderung des Arrays oder Objekts notwendig die Datenbanktabelle anzupassen.

Eine bessere Lösung gefällig?

Etwas besser Lösung, die fast immer funktioniert aber nicht für alle Fälle optimal ist, wäre eine Serialisierung des Arrays oder Objekts. Hierbei werden die Daten mit der serialize() Funktion in einen String konvertiert und können somit direkt in eine VARCHAR oder TEXT Spalte speichert werden. Dabei muss der String natürlich noch durch die Funktion real_escape_string() (in diesem Beispiel von der MySQLi Klasse) “escaped” werden.

Speichern der Daten

// Das zu speichernde Array
$array = array('vorname' => 'Max', 'name' => 'Mustermann');
// Serialisieren der Daten
$string = serialize($array);
// Speichern der Daten
$mysqli->query('INSERT INTO table_name (array) VALUES ("'.$mysqli->real_escape_string($string).'")'))

Das Beispiel setzt natürlich voraus, dass die Variable $mysqli eine Instanz der MySQLi Klasse mit einer gültige Verbindung zu einer Datenbank enthält. Wir haben hier ein einfaches assoziatives Array, das serialisiert wird und anscheinend gespeichert wird. Die serialisierten Daten sehn in diesem Beispiel wie folgt aus:

Der zu speichernde String

a:2:{s:7:"vorname";s:3:"Max";s:4:"name";s:10:"Mustermann";}

Das Auslesen der Daten wird mit der Funktion unserialize() durchgeführt, die aus dem String wieder ein assoziatives Array erzeugt. Dazu lesen wir zuerst die Daten mit einem gewöhnlichen Query aus und konvertieren anschließend die Daten:

Auslesen der Daten

// Auslesen der Daten
$result = $mysqli->query('SELECT array FROM table_name');
$row = $result->fetch_assoc();
$string = $row['array'];
// Unserialisieren der Daten
$array = unserialize($string);

Diese Methode zum Speichern von komplexen Daten funktioniert recht gut, aber der serialisierte String benötigt dabei mehr Speicherplatz als für ein normales assoziatives Array eigentlich nötig wäre. Wie es eleganter geht zeige ich euch im nächsten Beispiel.

Die elegante Lösung mit JSON

Das Format JSON entspringt zwar der Skriptsprache JavaScript, aber es wird zu Zeiten von AJAX sehr oft auch serverseitig verwendet und erzeugt. Da die meisten serverseitigen Sprachen also auch JSON unterstützen bietet es sich auch für die Speicherung von komplexeren Datenstrukturen an. Die Anpassung des vorherigen Quellcodes beschränkt sich dabei auch auf eine einzige Zeile. Wir ersetzen lediglich die serialize() durch die json_encode() Funktion. Die Zeile 6 aus dem vorherigen Quellcode sieht dann folgt aus:

Speichern der Daten

...
$string = serialize($array);
...

Hierbei werden die Datei des assoziativen Arrays in die JSON Notation konvertiert. Hierbei ist der resultierende String kompakter als bei der Serialisierung, da die Länge der einzelnen Arraywerte nicht und Datentypen nicht gespeichert werden:

Der zu speichernde String

{"vorname":"Max","name":"Mustermann"}

Beim Lesen der Daten aus der Datenbank müssen sie dann selbstverständlich auch wieder in das ursprüngliche Format zurück konvertiert werden. Dabei kommt wie ihr schon vermutet die Funktion json_decode() zum Einsatz. Diese erzeugt aber normalerweise ein Standard-Objekt. Um das in unserem Beispiel verwendete assoziative Array zu erhalten, wird als zweiter Paramater “true” übergeben. Der Änderung am Quellcode aus dem vorherigen Beispiel sieht dann wie folgt aus:

Auslesen der Daten

...
$array = json_decode($string, true);

Die Verwendung von JSON sichert nicht nur die Daten sondern auch die Schlüssel eines Arrays. Dabei spielt es keine Rolle, ob das Array assoziativ ist oder Zahlen als Schlüssel verwendet. Auch wird die Sortierung dabei nicht verändert. Wer lediglich die Werte eines Array speichern möchte, also keine Schlüssel benötigt, kann auch einen noch einfacheren Weg gehen.

Array in der Datenbank light

Der einfachste Werte mehrere Daten eines Array in einer Datenbank zu speichern sind die Funktionen explode() und implode(). Hierbei werden die einzelnen Werte des Arrays durch den “Delimiter”, den man als ersten Parameter angibt voneinander getrennt bzw. miteinander verbunden. Auch bei dieser Variante müssen in den beiden Beispiel-Quellcodes nur die Funktionen für die Umwandlung ausgetauscht werden. Zu beachte ist hierbei, dass der “Delimiter” nicht in den Werten vorkommen darf. Wer also beispielsweise ein Array mit Datumsangaben im Format 2010-01-23 mit implode verbinden möchte, darf nicht den Bindestrich als “Delimiter” verwenden.

Die Werte können wie auch zuvor in einer VARCHAR oder TEXT Spalte gespeichert werden. Sehr hilfreich sind die beiden Funktionen aber auch beim Speichern in einer Spalte mit dem Spaltentyp SET. Da hierbei aber die Werte zusätzlich von Anführungsstrichen umgeben sein müssen, muss der “Delimiter” auch die Anführungsstriche enthalten. Die implode Funktion würde in der Speicherfunktion dann wie folgt eingesetzt:

Speichern der Daten in einer SET Spalte

...
$string = implode('", "', $array);
...

Fazit

Wie ihr also seht, gibt es viele Wege komplexere Daten in einer Datenbank zu speichern. Das Beispiel mit JSON als Repräsentation sollte in jeder serverseitigen Skriptsprache funktionieren, die JSON unterstützt. Solltet ihr PHP verwenden müsst ihr natürlich auch sicherstellen, dass JSON bei euch aktiviert ist. Am einfachsten geht das wie immer mit Hilfe der phpinfo() Funktion, die in der Ausgabe einen “json” Abschnitt haben sollte.

Diejenigen von euch, die einen WordPress Blog haben und sich schon einmal die Datenbanktabelle angesehen haben, werden vermutlich die JSON Strings schon gesehen haben. Den WordPress speichert z.B. Arrays eines Plugins automatisch in der JSON Notation in der “options” Tabelle ab. Das macht es einem Pluginentwickler sehr einfach das Array zu speichern.

Ich hoffe, dass euch das kleine Tutorial weiterhelfen oder auf neue Ideen bringen konnte. Über Anregungen würde ich mich wie immer sehr freuen.

Microsoft tritt der W3C SVG Working Group bei

Bernhard — Wed, 06 Jan 2010 13:06:38 +0000

Wie Microsoft gestern auf seinem IEBlog mitgeteilt hat, werden sie der W3C SVG Working Group beitreten. Dies bedeutet, dass SVG für Microsoft in Zukunft einen höheren Stellenwert hat und sie sich damit nicht mehr auf VML beschränken.

Für uns als Webentwickler wird damit das Thema in Zukunft wohl interessanter werden. Bisher musste man einen Nutzer, der den Internet Explorer verwendent stets dazu nötigen sich ein Plugin von Adobe zu installieren, zu welchem aber im letzen Jahr die Weiterentwicklung eingestellt wurde.

All denjenigen von euch, die bisher noch kein SVG eingesetzt haben, würde ich empfehlen es einfach mal auszuprobieren. Aus vielen Vektorprogrammen lässt sich direkt der SVG Quellcode erzeugen. Dieser kann dann entweder direkt in einem unterstützdenden Browser geöffnet werden, oder aber in eine Website eingebunden werden. Hier habe ich mal ein kleines Beipspiel integriert. Wer aber keine SVG fähigen Browser hat, wird das Bild leider nicht sehen können. Diejenigen müssen dann wohl bis zum IE9 warten, bis es ohne Plugin angezeigt werden kann:

Quelle: Wikipedia.de

Wikipedia verwendet schon seit längerem SVG Grafiken für verschiedene Bilder. Wer mehr über SVG und das manuelle Erstellen einer Verktorgrafik lernen möchte, findet z.B. auf der Seite selfsvg.info eine recht ausführliche Beschriebung der einzelnen Elemente und deren Eigenschaften.

Habt ihr SVG schon einmal eingesetzt? Welche Tools nutz ihr zur Erstellung und wo seht ihr die Grenzen von SVG? Über Kommentare würde ich mich wie immer freuen.

PDF-Dokument ohne PDFlib mit PHP erzeugen

Bernhard — Mon, 04 Jan 2010 17:45:47 +0000

Viele von euch werden wohl XAMPP benutzen, um lokal in PHP zu entwickeln und zu testen. In der Windows-Version enthält es auch die PHP-Extension PDFlib, die aber leider auf vielen Hostingpaketen mit Linux als Betriebssystem nicht enthalten ist. Da PDFlib mehrere hundert Euro Lizenzgebühren kostet stellen sich viele die Frage, ob es sinnvolle und kostenlose Alternativen gibt. Glücklicherweise gibt es Alternativen und eine sehr umfangreiche möchte ich euch kurz vorstellen.

Die kostenlose TCPDF Library

Nachdem ich ein paar kostenlose PDF Klassen für PHP getestet habe, hat sich ein klarer Sieger herausgestellt. Die Klasse TCPDF zeichnet sich nicht nur durch seinen großen Funktionsumfang, sondern auch durch seine sehr gute Quellcode-Kommentierung und die gute Dokumentation der Funktionen.

Ein einfaches Beispiel

Um zu zeigen, wie einfach es ist eine PDF zu erzeugen hier ein kleines Beispiel. Und wie man es von einem Programmierbeispiel erwartet schreiben wir einen einfachen Text mit “Hallo Welt” in die PDF:

setPrintHeader(false);
	$pdf->setPrintFooter(false); 

	$pdf->SetFont('times', 'BI', 20);
	$pdf->AddPage();
	$pdf->Cell(0, 10, 'Hallo Welt!', 0, 1, 'C', 0, 'http://kau-boys.de');
	$pdf->Output('example1.pdf', 'I');
?>

Zuerst wird die Klasse per require eingebunden. Anschließend erzeugen wir an neues TCPDF Objekt und weisen ihm als Orientierung Portrait (Hochformat) mit Millimeter als Einheit und einer Seitengröße im DIN A4 Format zu. Anschließend deaktivieren wir noch die Standard Kopf- und Fußzeile.

Mit setFont() können wir die Schriftart, die Formatierung und die Schriftgröße festlegen. Jetzt fügen wir eine neue Seite hinzu und erzeugen eine Zelle mit unserem Text und einem Link. Zuletzt geben wir die Datei aus und der Browser zeigt sie direkt an. Alternativ kann auch der Download-Dialog erzwungen werden. Das Beispiel könnt ihr euch hier ansehen:

Beispiel

Das Beispiel ist stark vereinfach und nutzt nur die allernötigsten Funktionen. Auf der Seite von TCPDF findet ihr auch eine Liste mit vielen weiteren Beispielen, die ihr euch ansehen solltet. Sehr beeindruckend sind auch die Beispiele mit Formularen, die entweder mit Funktionen von TCPDF oder mit einem einfachen HTML-Formular erzeugt werden können.

Ich hoffe, dass euch das kleine Beispiel weiterhelfen konnte und euch dazu ermutigt hat, es einfach einmal selbst auszuprobieren. Über Kommentare würde ich mich wie immer sehr freuen.

Große Rechtschreibreform im WWW: HTML 5 heißt jetzt HTML5

Bernhard — Tue, 20 Oct 2009 21:57:09 +0000

Manche werden sich jetzt vermutlich wundern, was mit dem Titel gemeint ist. Heute haben sich die beiden Organisationen WHATWG (Web Hypertext Application Technology Working Group) und W3C (World Wide Web Consortium) auf einen einheitlichen Namen für die nächste HTML Version geeinigt.

Das W3C verwendete bisher die Schreibweise mit einem Leerzeichen und die WHATWG entsprechend ohne Leerzeichen. Nachdem die Meldung in vielen Foren und Newsseiten die Runde gemacht hat, wurde heute um 13:43 Uhr bereits der deutsche Wikipedia Artikel zu HTML5 geändert. Auch das W3C hat ihre Spezifikation zu HTML5 heute bereits angepasst.

Für manche von euch scheint das keine große Nachricht zu sein, aber jetzt haben wir endlich Gewissheit, wie wir HTML5 schreiben müssen. Ich finde die Schreibweise ohne Leerzeichen auch nur konsequent, da z.B. CSS3 auch keines enthält. Aber im Markup-Language Umfeld gibt es ja dann noch XHTML 1.0 und andere, die man mit Leerzeichen schreibt. Aber ohne würden die auch komisch aussehen. Ich trauere ja immer noch ein bisschen XHTML 2.0 nach, das zu Gunsten von HTML5 nicht weiter verfolgt wird. Aber hoffentlich lernen alle Web-Entwickler wenigstens in Zukunft validen HTML5 Quellcode zu schreiben.

Was meint ihr zu dem Thema? Ist das wirklich eine Nachricht wert, oder seid ihr der Meinung, das W3C und die WHATWG sollten sich eher um wichtigere Dinge kümmern? Ich würde mir z.B. endlich mal eine endgültige CSS3 Spezifikation wünschen, damit wir endliche Dinge wie Border-Radius und Schatten verwenden können.

Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous

Bernhard — Tue, 06 Oct 2009 22:22:36 +0000

Viele nutzen Autovervollständigungen auf ihrer Website. Es ist nicht nur eine sehr beeindruckende Technik, sondern zudem eine sehr nutzerfreundliche. Zusätzlich kann sie dazu dienen, dass in einem Formular möglichst gültige Werte gespeichert werden. Selbstverständlich müssen alle Daten serverseitig erneut überprüft werden.

Ich möchte heute zeigen, wie einfach es mit Scriptaculous möglich ist, eine Autovervollständigung mit Google-Maps-Adressen umzusetzen. Da man per AJAX nicht auf fremde Website einen AJAX-Request durchführen kann, müssen wir ein Skript als Schnittstelle zwischen Google Maps und unserer Website verwenden. Fangen wir also dieses Mal mit der serverseitigen Script an:

$json = json_decode(file_get_contents('http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&hl=de&key=DEIN_GOOGLE_MAPS_API_KEY&q='.urlencode($_REQUEST['address'])));

echo '';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo ''.$value->address.'';
	}
}
echo '';

Zuerst stellen wir eine Suchanfrage an Google Maps, wobei wir den zu suchenden Text einfach im Parameter “q” übergeben. Der Parameter “output” gibt hierbei das von Google Maps zurückgelieferte Format an. Ich habe hier JSON verwendet und wandle die Daten anschließend mit der json_decode() Funktion in ein Objekt um. Es kann aber genauso gut XML in Kombination mit einer XML Funktion sie simplexml_load_string() verwendet werden. Da JSON da kompaktere Format ist habe ich mich in diesem Beispiel dafür entschieden.

Ein weiterer interessanter Parameter ist “hl”, der die Sprache der Adressen angibt. Viele werden den Parameter auch von der Google Suche kenne. Hier werden die Adressen also in deutsch zurückgegeben. Mit Hilfe dieses einen Parameters könnt ihr also sehr schnell die Funktion auf andere Spracheversionen eurer Seite anpassen.

Damit ihr überhaupt eine Anfrage an Google Maps stellen dürft, benötigt ihr einen kostenlosen Google Maps API Key, den ihr an den “key” Parameter anhängen müsst (Danke an paddy, der mich auf das Fehlen des Keys hingewiesen hat).

Nachdem die Daten von Google Maps empfangen wurden und im Objekt vorhanden sind, geben wir sie an die JavaScript Funktion zurück. Dazu erzeugen wir einfach eine unsortierte Liste mit einem Eintrag pro gefundener Adresse.

Und jetzt kommen wir zum sehr umfangreichen clientseitigen Script. Dazu müssen wir erst einmal ein Formular mit einem Textfeld erzeugen. Außerdem benötigen wir ein DIV, in dem die Ergebnisse ausgegeben werden. Zu guter Letzt kommt dann noch das JavaScript, das den ganzen AJAX-Request und das Behandeln der Empfangenen Daten erledingen muss. Was aber sehr kompliziert klingt, ist recht kurz umgesetzt:

Die ganze Sache lässt sich mit einer einzigen Zeile JavaScript erledigen. Selbstverständlich müssen dazu noch im Kopfbereich die “prototype.js” sowie anschließend die “scriptaculous.js” eingebunden werden. Die Funktion Ajax.Autocompleter() gehört hierbei zum Funktionsumfang von Scriptaculous. Das fertige Resultat sieht dann wie folgt aus:

Die hier verwendete ABC-Straße ist kein Witz, sondern die Adresse von Google Deutschland. Eine weitere schöne Eigenschaft von Google Maps ist die automatische Rechtschreibkorrektur, die bei fehlehaften Eingaben durchgeführt wird. Selbst eine Eingabe wie “plazt der luftblöcke” führt trotzdem zu dem gewünschten Platz vor dem ehemaligen Berliner Flughafen. Um die Sache testen zu können, habe ich hier ein kleines Beipsiel erstellt, dass ihr euch auch gerne im Quellcode runterladen könnt. Ich habe zusätzlich noch eine Funktion verwendet, die den Suchbegriff hervorhebt:

Beispiel
Download

Wir ihr also sehen könnt, ist es mit der Ajax.Autocompleter() Funktion und einem servreseitigen Skript sehr einfach möglich, auch Daten von anderen Seiten auszuliefern. Das dazu benötigte PHP Skript kann durch kleine Veränderungen an die entsprechende extrene Datenquelle und das zurückgelieferte Format angepasst werden. Die Funktion lässt sich aber natürlich auch genauso gut mit jQuery oder einem anderen Framework umsetzen. Dazu muss dann aber eventuell das zurückgelieferte Format des PHP Skript auch noch angepasst werden.

Ich hoffe das Beispiel hat euch gezeigt, wie vielfältig sich eine Autovervollständigung einsetzen lässt. Habt ihr auch schon einmal mit externen Daten gearbeitet? Oder habt ihr vielleicht eine Idee, konntet sie aber bisher nicht umsetzen? Über ein Kommentar dazu würde ich mich sehr freuen.

Die Grenzen der Frame-Weiterleitung sprengen

Bernhard — Tue, 29 Sep 2009 18:09:29 +0000

Viele Hoster bieten günstige Domains ohne Webhosting Komponenten an. Bei einigen Hoster wie z.B. Strato handelt es sich aber leider nur um Domains mit der Möglichkeit der Frame-Weiterleitung. Das ist aber teilweise vor der Bestellung nicht zu sehen.

Manch einer wird sich eventuell darüber freuen, da er irgendwo ein kostenloses Hosting mit einer sehr langen URL hat und durch die Frameweiterleitung den Besuchern immer eine kurze Domain präsentieren kann. Doch die Sache hat auch ihre Haken.

Das Lesezeichen-Problem

Das navigieren innerhalb der Seite gestaltet sich für den Besucher, wie er es erwartet. Er kann alle Links anklicken und der Hauptframe öffnet daraufhin die richtige Seite. Auch das Navigieren mit den “Vor” und “Zurück” Buttons funktioniert tadellos. Aber sobald der Benutzer eine Seite gefunden hat, die er seinen Favoriten hinzufügen möchte fängt der Ärger an. Nicht nur, dass der Name des Lesezeichens oft nur die Domain enthält, viel schlimmer ist, dass das Lesezeichen auch auf die selbige zeigt. Wenn der Besucher also später das Lesezeichen aufruft kommt er nicht auf die gewünschte Seite, sondern auf die Startseite und muss von dort aus erst wieder mühsam auf die richtige Seite navigieren.

Das Suchmaschinen-Problem

Die meisten Suchmaschinen (Google eingeschlossen) haben Probleme mit framebasierten Seiten. Sie sehen oft nur das Frameset-Konstrukt und nicht die Inhalte der einzelnen Frames. Das bedeutet in den meisten Fällen, das eure Internet-Seiten, die tausende von Seiten haben können, bei Suchmaschinen genau EINE Seite als Eintrag enthalten. Und das ist die Startseite oder genauer gesagt das Frameset der Domain. Eine Möglichkeit den Suchmaschinen doch die anderen Seiten mitzuteilen ist das Erstellen einer Sitemap. Diese solltet ihr dann aber manuell den Suchmaschinen mitteilen, da sie die Datei unter umständen auch nicht finden können. Dabei könnt ihr entweder die Domain um die Seitennamen erweitern, oder aber die URL eures Webspace verwenden und um die Seitennamen erweitern.

Die Lösung

Beide Probleme zeigen also, dass Frame-Weiterleitungen ein Relikt aus alten Zeiten sind und nicht mehr verwendet werden sollten. Aber was kann man tun, wenn der Hoster keine HTTP-Weiterleitung bietet, oder dafür einen Aufpreis verlangt? Ganz einfach, man bedient sich eines recht simplen Tricks. Dazu legt man zuerst einen Ordner mit beliebigen Namen auf dem Server an. Dann stellt man die Domain so ein, dass sie als Ziel den Ordner enthält. In diesem Ordner erzeugt man dann eine index.php (oder eine Index-Datei einer andern Scriptsprache) mit folgendem Inhalt:

Dieser einfache JavaScript Snippet ändert die URL des Top-Frame auf einen neuen Wert. Wenn der Besucher also eure Domain aufruft, die lediglich eine Frame-Weiterleitung untersützt, sorgt der Code dafür, dass das oberste Frameset auf eine andere URL umgeleitet wird. Hierbei müsste ihr natrülich “example.com” durch eure eigene Domain ersetzen (das “http://” dabei nicht vergessen). Für alle Besucher, die keine JavaScript Unterstützung aktiviert haben solltet ihr zusätzlich einen NOSCRIPT Tag einfügen der einen Link enthält:

Der Link bekommt dabei das Attribut “traget” mit dem Wert “top”. Somit wird auch hier der Link im obersren Frameset aufgerufen. Um Benutzern, die ein Lesezeichen auf eure umzuleitende Domain haben, könntet ihr auch noch den Request an die Domain anhängen. Somit wird der Besucher dann auf die richtige Zielseite auf der anderen Domain umgeleitet. Zusammengesetzt sieht das ganze Beispiel dann wie folgt aus (oder ähnlich in einer anderen Skriptsprache):

Diesen Codeblock platziert Ihr einfach im BODY Tag der Index-Seite. Dabei solltet ihr aber Besuchern ohne JavaScript eine schönere Seite präsentieren, als eine die nur den Link auf weißem Untergrund enthält.

~~Da ich selbst noch eine Domain besitze, die ich leider zur Zeit noch nicht auf ein aktuelles Hostingpaket umziehen kann, könnt ihr euch das ganze in einem kleinen Beispiel auch ansehen.~~ Die Domain ist mittlerweile endlich umgezogen und daher habe ich nun das Beispiel auf die alte Subdomain abgeändert. Dazu solltet ihr einfach JavaScript vorübergehen deaktivieren, damit ihr auch die Seite und den Quelltext betrachten könnt. Wenn ihr dann JavaScript wieder aktiviert und die Seite aktualisiert, solltet ihr auf meinen Blog umgeleitet werden.

Beispiel

Mit diesem Trick könnt ihr also die Frame-Weiterleitung umgehen, aber ihr präsentiert dann dem Besucher die entsprechend andere URL, als sie aufgerufen haben. Dies sollte aber einer schönen URL aber dafür der eingeschränkten Suchmaschinenfreundlichkeit und der Verhinderung von Lesezeichen bevorzugt werden. Ihr könnt weiterhin die schöne URL in Mails verbreiten und den Besucher trotzdem umleiten. Wenn ihr die Domain vollständig nutzen möchtet bleibt euch leider nichts anderes Möglich, als diese in das Webhosting-Paket zu übertragen oder zu einem reinen Domain-Anbieter zu wechseln, der auch eine HTTP-Weiterleitung anbietet, auch wenn das eventuell einen Aufpreis bedeutet.

Externe Links kennzeichnen mit CSS3

Bernhard — Tue, 08 Sep 2009 20:24:38 +0000

Wer kennt nicht das Problem mit externen Links? Man möchte dem Benutzer kein target=”_blank” zumuten und lässt daher auch externe Links im gleichen Fenster öffnen. Damit der Benutzer aber sehen kann, dass es sich um einen externen Link handelt, möchte man die Links gerne markieren. Daruch kann der Benutzer ihn eventuell selbstständig in einem neuen Fenster/Tab öffnen.

Bisher habe ich schon viele Lösungen für dieses Problem gefunden. Einige davon wurden serverseitig vorgenommen, einige sehr aufwändig per JavaScript clientseitig. Meistens wurden dabei alle Links innerhalb einer Seite gesucht und dann per Script angepasst.

Durch die tollen neuen Möglichkeiten von CSS3 gibt es aber eine sehr elegante Variante, die keinerlei Umbauarbeiten an den Scripten erfordert. Es reicht ein simpler CSS Selektor, der alle externen Links erkennt und anschließend entsprechend kennzeichnet.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']){ /* Styles für externe Links */ }

Der Anfang sollte bekannt sein. Wir selektieren zuerst alle Links mit einem “href” Attribut, das mit “http” beginnt. Damit schließen wir alle Anker, reine Ankerlinks, relative Links sowie “mailto”-Links aus. Mit der not() Funktion von CSS3 selektieren wir anschließend alle Links, die NICHT die Domain als absoluten Link mit “http” oder “https” enthalten. Dabei ist natürlich “example.com” durch die zu suchende Domain zu ersetzen. Sollen auch Subdomains nicht selektriert werden, können diese ebenfalls in einer weitern not() Funktion angegeben werden. Vereinfacht könnte man auch alle Links auswählen, die den Domainnamen und die Toplevel-Domain nicht enthalten:

a[href^='http']:not([href*='example.com']){ /* Styles für externe Links */ }

Hierbei würden aber auch externe Links ausgelassen, die den eigenen Domainnamen im Linktext enthalten wie z.B. bei “http://www.einblog.de/toller_artikel_auf_example.com”.

Nachdem nun alle externen Links selektiert wurden, können sie mit ein paar netten Styles versehen werden. Ich habe hier mal exemplarisch mit dem Pseudoelement “:after” einen Text nach dem Link eingefügt, diesen rot markiert und zusätzlich ein Icon als Hintergrund eingefügt. Der Phantasie sind hier aber keine Grenzen gesetzt.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']):after {
	content: ' (external)';
	color: red;
	background: transparent url('external_link.png') center right no-repeat;
	padding-right: 16px;
}

Wie das ganze für die verschiedenen Linkarten aussieht könnt Ihr euch auf der kleinen Beispielseite ansehen. Ihr benötigt dafür aber einen teilweise CSS3 kompatiblen Browser. Ich habe es erfolgreich mit Firefox 3.5, Safari 4.0, Chrome 2.0 und Opera 10.0 getestet. Der Internet Explorer unterstützt die not() Funktion auch in Version 8.0 noch nicht.

Beispiel

Wenn Ihr Anregungen zu der Lösung habt oder eine andere tolle Lösung kennt würde Sie mich sehr interessieren.

Die magische select() Funktion!

Bernhard — Mon, 31 Aug 2009 17:17:16 +0000

Bei meinem vorherigen Post zum Zeilen-Duplizierer stand ich vor dem Problem, dass ich Elemente eines bestimmten Tags innerhalb eines ausgewählten DOM-Elements finden musste. Da ich hierfür in den Utility Methods nicht gefunden habe, musste ich die Funktion getElementsByTagName() verwenden. Alleine hiermit konnte ich aber noch immer nicht auf die Elemente zugreifen. Dazu musste ich den Aufruf noch mit der $A() Funktion verwenden. Der gesamte Aufruf für die drei Formularfelder sah dann wie folgt aus:

$A(newRow.getElementsByTagName('select')).invoke('clear');
$A(newRow.getElementsByTagName('textarea')).invoke('clear');
$A(newRow.getElementsByTagName('input')).each(function(elm){
	elm.clear().checked = '';
});

Heute bin ich durch Zufall dann auf die seit Prototype 1.6 neue Funktion select() gestoßen. Damit konnte ich in einem ersten Versuch die gleiche Selektion mit folgenden Zeilen nachbilden:

newRow.select('select').invoke('clear');
newRow.select('textarea').invoke('clear');
newRow.select('input')).each(function(elm){
	elm.clear().checked = '';
});

Aber selbst diese Vereinfachung ist noch zu umständlich. Die Funktion erlaubt das Selektrieren mit mehreren CSS-Selektoren. Dazu werden die CSS-Selektoren einfach als Parameter der Funktion übergeben:

newRow.select('select', 'textarea', 'input')).each(function(elm){
	elm.clear().checked = '';
});

Diese Vereinfachung ist zwar nicht ganz sinnvoll, da hier auch für Textfelder das “checked” Attribute geleert wird, aber es schadet auch an dieser Stelle nicht weiter.

Wie ihr also sehen könnt bietet die select() Funktion eine sehr einfache Selektion innerhalb eines bereits selektierten Elements. Zusätzlich zu der bereits beschriebenen Funktionalität erweitert die select() Funktion die Elemente zusätzlich noch mit der extend() Funktion um weitere Methoden. Sie einfacht also folgenden Aufruf auf lediglich einen Funktionsaufruf:

// gewöhnlicher Aufruf mit der getElementsByTagName() Funktion
$A(newRow.getElementsByTagName('input')).map(Element.extend);
// gleicher Aufruf mit Hilfe der select() Funktion
newRow.select('input');

Die select() Funktion ermöglicht also im Prinzip das Anwenden der $$() Funktion erweitert um das Zusammenfassen der Elemente in einem Array. Dadurch lässt sich beim Verarbeiten von selektierten Elementen einiges an Mehraufwand einsparen.