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.

Anzeige

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 <div>-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 <script type=“text/javascript“ src=“../libraryXYZ.js“/>-Tag angezogen werden.
  • YUI-JavaScript-Bibliotheken können direkt aus dem WEB über Edge Computing geladen werden. Basierend auf einem Algorithmus wird also ein nahegelegener regionaler Server gesucht, von dem die JavaScript-Bibliotheken geladen werden.

Die zweite Variante bietet neben dem Vorteil der garantierten Aktualität der Bibliothek einen großen Performancevorteil, denn die Bibliotheken und zugehörigen CSS-Dateien werden für den Transfer gezippt. Dadurch ergibt sich eine Größenreduktion von bis zu 90 Prozent für JavaScript-Bibliotheken und 60 Prozent für CSS-Inhalte – sicherlich ein nicht zu unterschätzendes Argument. Unter dem Link befindet sich darüber hinaus der YUI Dependency Configurator – ein Hilfsmittel für den Entwickler, der die zu verwendenden Bibliotheken mit der Maus konfigurieren kann, statt diese mit JavaScript selbst zu erstellen. Neben grafischen Control-Bibliotheken (Tree, DataGrid etc.) stehen funktionale Bibliotheken zur Verfügung, wie beispielsweise die Connection-Bibliothek zum Senden des XMLHttpRequest.

Layout initialisieren

Jetzt stehen die YUI-Funktionalitäten für die benötigten Komponenten zur Verfügung. Als Nächstes wird eine separate JavaScript-Datei erstellt (yuidemo.js), die das komplette Handling des Webshops abdeckt – angefangen bei Initialisierung bis hin zur Eventverarbeitung. Dabei wird zunächst der Tree im linken Bereich der Applikation initialisiert. Im Rahmen der Layouterstellung wurde der linken div-Box die ID tree-div zugewiesen, entsprechend kann die div-Box aus JavaScript angesprochen werden, um der Box Inhalte zuzuweisen. Listing 2 (PDF) zeigt die Initialisierung des Baums.

Bei der Initialisierung des Baums werden lediglich die Top-Level-Elemente (Action Figures, Books und T-Shirts) gesetzt, die Inhalte werden dynamisch geladen, sobald ein Knoten geöffnet wird – dafür sorgt die Zeile tmpNode.setDynamicLoad(loadNodeData, 0). Abschließend wird dem Baum mitgeteilt, dass er gerendert werden soll. tree.draw() „zeichnet“ den Baum im zuvor definierten div-Container. An dieser Stelle kann ein erster Test der Anwendung durchgeführt werden. Die Applikation enthält jetzt im linken Bereich einen Baum mit drei Elementen.

Logger

Für den unwahrscheinlichen Fall, dass die drei Einträge nicht erscheinen und Sie auf Fehlersuche gehen müssen, stellt YUI dem Entwickler ein hilfreiches Werkzeug zur Verfügung. Auch wenn die Einträge erscheinen, sollten Sie dieses Werkzeug bei der Entwicklung einer Anwendung immer aktivieren. YUI beinhaltet eine Konsolenausgabe für das Logging einer YUI-Anwendung. Das Logging ist wesentlich detaillierter als das Tracking der Anwendung mit Firebug, die Konsolenausgabe kann zu Entwicklungszwecken direkt in der Anwendung platziert werden. Das Log-Level der YUI-Logger kann vom Entwickler konfiguriert werden. Neben den automatisch geloggten Einträgen gibt es auch die Möglichkeit, eigene Log-Einträge hinzuzufügen, um etwa einen empfangenen XMLHttpRequest zu loggen: “YAHOO.log(“XHR transaction was successful. Response text: ” +oResponse.responseText, “xhr”);” Davon sollte kräftig Gebrauch gemacht werden!

Client an Server!

Bisher bewegt sich die Anwendung nach wie vor nur im Browser, ein Datenaustausch mit dem Server findet noch nicht statt. Genau das wird im nächsten Schritt implementiert. Die drei Top-Nodes im Baum sind bereits präpariert, indem für den Mausklick auf einen Node die Methode loadNodeData (tmpNode.setDynamicLoad(loadNodeData, 0) (siehe Listing 2) definiert wurde. Innerhalb der loadNodeData-Methode sollen die Subelemente für den Baumeintrag mittels XMLHttpRequest vom Server geholt werden. Auf dem Server wird dazu ein einfaches PHP-Skript erstellt (Listing 3 (PDF)).

Das PHP-Skript liefert die einzelnen Sub-Arrays, also die Kindelemente für das aktuell selektierte Tree-Node als JSON-Objekte. Die Umwandlung von PHP-Objekten in JSON-Objekte wird mit der PHP-Funktion printJSONArrayOfObjects umgesetzt. Der Client erhält somit nach erfolgreichem Versenden eines XMLHttpRequests ein JSON-Objekt, das die einzelnen Sub-Nodes beinhaltet. Diese können dem Baum hinzugefügt werden. Wichtig ist es, an dieser Stelle bereits einen Schritt weiter zu denken: Beim Klick auf ein Kindelement sollen die Detailinformationen zu dem Artikel angezeigt werden – deshalb muss jedem Kindelement ein Listener hinzugefügt werden, der bei einem Klick-Event entsprechend eine Methode aufruft, um die Detaildaten vom Server anzufragen. Listing 4 (PDF) zeigt, wie der XMLHttpRequest beim Klick auf einen Top-Node an den Server gesendet und das Ergebnis der Abfrage verarbeitet wird.

Anzeige

  Um die Detailinformationen vom Server abzurufen, wurde in Listing 4 jedem Node ein Event-Listener hinzugefügt, der die Methode loadProductDetails aufruft, sobald ein Artikel im Baum gewählt wurde. Um die Artikeldaten vom Server zu erhalten, muss ein weiteres PHP-Skript erstellt werden. Diesem Skript wird eine Query mit dem gewählten Artikelnamen übergeben. Basierend auf dem Artikelnamen werden die Detailinformationen zusammengestellt und als HTML an den Client zurückgesendet. HTML und nicht JSON? Kein Tippfehler, sondern ganz einfach eine PHP-Funktion, welche die Umwandlung von Objekten in eine übersichtliche Tabelle übernimmt. Statt zuvor durch printJSONArrayOfObjects, werden die Artikeldetails jetzt mit der Funktion printHTMLTable direkt in eine HTML-Tabelle umgewandelt und an den Client gesendet. Im Rahmen der Webshop-Demoapplikation werden die Detaildaten statisch aus einem Array gelesen. In einem echten Webshop steht an dieser Stelle der Zugriff auf die Datenbank. Das PHP-Skript liefert zwar HTML statt JSON an den Client zurück, ist jedoch ansonsten analog zu Listing 4 aufgebaut und wird an dieser Stelle nicht explizit aufgeführt.

Innerhalb des clientseitigen Callbacks des XMLHttpRequests wird die auf dem Server generierte HTML-Tabelle weiter verarbeitet. Viel Nacharbeit ist an dieser Stelle jedoch nicht mehr nötig, die Tabelle wird genau wie der Baum ganz einfach einem div-Bereich als Inhalt zugewiesen (Listing 5 (PDF) erklärt dies).

Der „Kern“ des Webshops steht somit. Daten können vom Server asynchron geholt und im Client angezeigt werden. Damit noch eine kleine Prise AJAX-/Web-2.0-Geschmack in den Webshop kommt, wird zuletzt eine YUI Drag-and-Drop-Funktion hinzugefügt, die es ermöglicht, Artikel aus dem Baum zu draggen und in den Einkaufswagen zu droppen. Um dem Benutzer Drop-Bereitschaft zu signalisieren, wenn ein Item auf den Einkaufswagen gezogen wird, wird der er farblich hervorgehoben, sobald ein Artikel auf ihn gezogen wird. Beim Drop wird eine Liste unterhalb des Einkaufswagens mit den gedroppten Artikeln angezeigt bzw. erweitert. Die Drag-and-Drop-Funktionalität muss den einzelnen Artikeln beim Aufbau des Baumes zugewiesen werden, also innerhalb der for-Schleife, die durch die einzelnen Artikel einer Kategorie iteriert. Die Implementierung der Drag-and-Drop-Funktionalität ist in Listing 6 dargestellt.

Die Drag-and-Drop-Funktionalität könnte als Erweiterung noch mit einem entsprechenden Server-Call untermauert werden. Dadurch werden die Items im Warenkorb zum Server gesendet und dort zum Beispiel temporär gespeichert bzw. weiterverarbeitet. Da das Prinzip YUI-PHP-Server-Call jedoch bereits umfangreich innerhalb des Artikels behandelt wurde, wird Ihnen diese Erweiterung als I-Tüpfelchen in der Anwendung überlassen. Ansonsten ist der Demowebshop jetzt ready to run bzw. ready to demo. Um den Webshop im Rahmen eines echten Shopsystems einsetzen zu können, sind noch kleine Erweiterungen nötig – dabei liegt die Betonung jedoch auf kleine. Das Hauptkonstrukt sollte nach diesem Artikel bereits existieren.

Fazit

Unabhängig davon, ob Sie den Webshop aus dem Artikel selbst implementiert oder ganz einfach nur den Artikel gelesen haben, sollten Sie folgendes als Quintessenz für die Zukunft mitnehmen: AJAX bietet umfangreiche Schnittstellen, um an PHP anzudocken (es muss nicht immer Java sein!). Gleichermaßen bietet PHP ein umfangreiches API, um AJAX-GUIs mit Daten zu versorgen (Stichwort: JSON). AJAX und PHP ergänzen sich gegenseitig gut, und gerade im Kontext der weit verbreiteten LAMP-Architekturen (Linux Apache MySQL PHP) bietet AJAX die Möglichkeit, bestehende LAMP-Anwendungen durch AJAX-Ergänzungen im GUI in punkto Usability und Effizienz zu verbessern. YUI ist dabei sicherlich nicht die einzige Lösung, allerdings ein solider Ankerpunkt, um ganz einfach mal loslegen zu können – für die Zukunft also einfach Ärmel hoch gekrempelt und weiter gemacht!

Über die Autoren:

Florian Müller arbeitet für Comit Schweiz und betreut dort den Bereich User-Interface-Technologien. Darüber hinaus betreibt Florian die Plattform richability, wo regelmäßig über neuste Erkenntnisse aus dem Bereich Frontend-Technologien & Entwicklung informiert wird. Sie erreichen ihn via Florian.Mueller@richability.com.

Reto Lamprecht arbeitet für Comit Schweiz im Bereich User-Interface-Technologien. Reto evaluiert regelmäßig GUI-Technologien und Konzepte, um Kunden optimale Frontend-Lösungen bieten zu können. Sie erreichen Reto unter Reto.Lamprecht@hyperfinder.ch bzw. http://www.hyperfinder.ch.

Dieser Artikel entstand im Zuge einer Kooperation mit der von Createordie organisierten webinale, die vom 31. Mai bis 02. Juni 2010 in Berlin stattfindet.

Bildmaterial: Grafixar
GD Star Rating
loading...
Die Kompatibilität von AJAX und PHP , 4.0 out of 5 based on 1 rating
Alle Bilder in diesem Artikel unterliegen der Creative-Commons-Lizenz (Namensnennung-Keine Bearbeitung, CC BY-ND; Link zum rechtsverbindlichen Lizenzvertrag). Ausgenommen sind anders gekennzeichnete Bilder unter anderem von Panthermedia, Fotolia, Pixelio, Morguefile sowie Pressefotos oder verlagseigenes Bildmaterial.