Ajax und PHP

Die Kompatibilität von AJAX und PHP

Fachbeitrag. Die Kompatibilität von AJAX und PHP am Beispiel der Yahoo User Interface Library (YUI) und warum beide Technologien doch zusammen passen können.
17. März 2010 | Joel

Ajax und PHP – passt das zusammen?“ – so der erste Gedanke des einen oder anderen Entwicklers mit PHP- bzw. AJAX-Brille. Dass die beiden Technologien keinesfalls im Widerspruch zueinander stehen und sich prinzipiell gut ergänzen, demonstriert der vorliegende Artikel. Basierend auf der Yahoo User Interface Library (YUI) wird der Webshop „All A Nerd Needs“ implementiert. Die Inhalte für den Webshop werden via PHP vom Server zur Verfügung gestellt.

Die Anzahl guter AJAX-Frameworks im Sinne von mehr als nur Drag-and-Drop ist in den vergangenen Jahren immens gestiegen. Entsprechend einfacher ist die Wahl eines AJAX-Frameworks geworden, das den eigenen Anforderungen entspricht. Steht man heutzutage vor der Entscheidung, eine JavaScript-AJAX-Bibliothek auszuwählen, wird man feststellen, dass die Bibliotheken sich in punkto Funktionsumfang nur geringfügig unterscheiden. Autosortierbare Tabellen mit Spalten, die durch den Benutzer selbständig angeordnet werden können, gehören zum festen Bestandteil von nahezu jeder AJAX-Bibliothek – Drag-and-Drop, Listen, Bäume etc. zählen ebenso zum Standardfunktionsumfang. Umso wichtiger ist es, den Fokus von technischen Frameworkaspekten wegzubewegen und stattdessen einen Aspekt zu beurteilen, der mindestens ebenso wichtig ist wie die technischen Funktionen und Features eines Frameworks: Dokumentation und Community!

Warum YUI?

Die Tatsache, dass ein AJAX-Framework erfolgreich in einem Projekt eingesetzt wurde, bedeutet leider noch nicht, dass auch eine entsprechende Community dahinter steht, bzw. das Framework so dokumentiert ist, dass es für andere Projekte leicht und transparent einsetzbar ist. Aus diesem Grund wurde für den All-A-Nerd-Needs-Webshop das Yahoo User Interface Library (YUI) eingesetzt. YUI glänzt mit einer umfangreichen Dokumentation und vielen Beispielen. Außerdem steht eine aktive Community hinter dem YUI-Framework. Fragen und Probleme, die während der Entwicklung einer Anwendung aufkommen, können auf diese Art schnell beantwortet werden. Auch wenn die Komponenten vom Erscheinungsbild auf Anhieb nicht Web-2.0-mäßig blinken, faden und leuchten, so können diese Features problemlos in CSS-Eigenarbeit hinzugefügt werden. Selbst wenn Sie bisher noch nicht mit YUI gearbeitet haben, können Sie schnell und einfach gute Resultate erzielen und bewegen sich überwiegend in der Eclipse-IDE, statt in der Google-Suchmaske nach Lösungen für Fehler zu recherchieren.

YUI steht aktuell in der Version 2.7.0 kostenlos zum Download zur Verfügung. Der zwölf Megabyte große Download umfasst neben den Core-JavaScript-Bibliotheken ein umfangreiches API sowie Beispiele für jedes einzelne Control bzw. die Komposition unterschiedlicher Controls. Bevor mit dem Kodieren richtig losgelegt werden kann, sollte in Erwägung gezogen werden, eine Entwicklungs-IDE zu installieren (wenn nicht bereits Eclipse installiert ist), um nicht im Texteditor auf tiefster JavaScript-/HTML-Ebene programmieren zu müssen.

Für Eclipse existiert das Plug-in JSEclipse, das direkt über den Eclipse Updater installiert werden kann. Darüber hinaus ist eine ausführliche Installationsanleitung verfügbar. Das Plug-in erleichtert die Arbeit mit JavaScript durch Autocompletion (nicht nur für YUI, sondern auch für Dojo, Prototype und weitere gängige AJAX-JavaScript-Bibliotheken) und weist bereits zur Erstellungszeit von AJAX-Seiten auf JavaScript-Syntax-Fehler hin – der Einsatz der guten alten Alert-Debug-Box kann dadurch deutlich reduziert werden.

Nachdem die Entwicklungsumgebung aufgesetzt wurde, kann mit der Erstellung des Webshops angefangen werden. Der Webshop hat in erster Linie Democharakter und zeigt unterschiedliche Aspekte der AJAX-PHP-Entwicklung. Es geht an dieser Stelle nicht darum, einen rocksolid Webshop zu erstellen, der nächste Woche bei Amazon live geschaltet werden kann. Man stelle sich also einen klassischen Webshop  vor, auf dessen linker Seite sich eine Baumstruktur mit Produktkategorien und Produkten befindet. Wird ein Produkt ausgewählt, erscheinen die Produktdetailinformationen im Hauptbereich der Anwendung. Da es in einem echten Webshopszenario durchaus vorkommen kann, dass die Detaildaten umfangreich ausfallen, werden diese dynamisch on-demand geladen. Die Alternative wäre das vollständige Laden der Daten im Baum.

Die Anzahl der Server-Roundtrips kann durch das direkte Laden zwar reduziert werden, allerdings stößt der Webshop dann bei größerer Artikelanzahl schnell an seine Grenzen. Stichwort: Skalierbarkeit! Das Laden und Nachladen der Daten wird mittels JSON (JavaScript Object Notation) realisiert. YUI kann JSON-Objekte direkt verarbeiten. Die Erzeugung der JSON-Objekte wird serverseitig in einem PHP-Skript implementiert, die Funktion printJSONArrayOfObjects() ermöglicht die Erzeugung von JSON-Objekten im Kontext einer PHP-Anwendung. Als AJAX-Sahnehäubchen wird dem Webshop noch Drag-and-Drop-Funktionalität hinzugefügt. Artikel können dann direkt aus dem Baum in den Einkaufswagen im rechten Teil der Anwendung gedragt werden.

Layouterstellung

Als erster Schritt Richtung Webshop wird in einem Eclipse-Webprojekt eine neue Seite index.html erstellt. Diese beinhaltet das Basislayout der Anwendung. Viele AJAX-Frameworks verwenden nach wie vor den Ansatz, dass der Entwickler ein Grundlayout selbständig auf

-Basis definieren muss. Die AJAX-Bibliothek greift dann auf die div-Tags zu und nimmt so Ihre Arbeit auf, indem zum Beispiel Bäume, Tabellen etc. in das div injiziert werden. Die Erstellung eines div-Layouts von Hand ist dabei extrem zeitaufwändig, ganz zu schweigen davon, dass plötzlich das Thema Crossbrowser-Issues wieder komplett auf den Schultern des Entwicklers lastet. YUI wählt an dieser Stelle einen eleganteren Ansatz. YUI stellt den CSS Grid Builder zur Verfügung. Der Grid Builder ermöglicht die Definition eines Layouts mit wenigen Mausklicks, ganz ohne HTML-Coding. Erstellen Sie für den Webshop ein Drei-Spalten-Layout und kopieren Sie den Layoutcode in die Datei index.html. Das so erstellte Grundlayout ist auszugsweise in Listing 1 (PDF) dargestellt.

YUI JavaScript integrieren

Die Inhalte für die einzelnen Layoutzellen werden durch YUI-Bibliotheken injiziert. Bei einem Seitenaufruf wird also lediglich das HTML-Gerüst vom Browser gerendert, die Inhalte werden durch entsprechenden JavaScript-Code dynamisch eingefügt. Es gibt zwei Möglichkeiten, YUI-Bibliotheken zu integrieren:

  • YUI-JavaScript-Bibliotheken können in die Applikation eingebettet und dann mittels

Kommentare

Kommentare anzeigen

Datenschutz

Weitere Informationen zum Datenschutz, Netiquette und warum wir Disqus nutzen, findet ihr hier.

comments powered by Disqus

amplifypixel.outbrain