Entwicklung von professionellen Webanwendungen mit PHP

Ausarbeitung Verteilte SystemeEntwicklung von professionellen Webanwendungen mit PHP

Ausarbeitungim Rahmen der Veranstaltung

Verteilte Systeme

an der Fachhochschule Gießen-FriedbergWintersemester 2007 / 08

Entwicklung von professionellen Webanwendungen mit PHP

Themensteller: Prof. Dr. Kremer

Abgabedatum: 22. November 2007Vortrag: 22. November 2007, 3-ter Block

Vorgelegt von:

Ortwin KartmannMatrikelnummer 690520

Alexander MankMatrikelnummer 704050

Bastian KurzMatrikelnummer 751029

Sten MüllerMatrikelnummer 726326

Seite 1 von 38


InhaltsverzeichnisALLGEMEINTER TEIL........................................................................................................................3

BETRIEB VON WEBANWENDUNGEN......................................................................................................3Serversetup.......................................................................................................................................3Load Balancing................................................................................................................................3

SCRIPTSPRACHE PHP............................................................................................................................4Geschichte........................................................................................................................................4Meilenstein PHP 4...........................................................................................................................4Meilenstein PHP 5...........................................................................................................................4Meilenstein PHP 6...........................................................................................................................4Vorteile.............................................................................................................................................5Nachteile..........................................................................................................................................7

DATENBANK MYSQL............................................................................................................................7Load Balancing................................................................................................................................8Tabellentypen...................................................................................................................................8

TOOLS FÜR DIE PROFESSIONELLE WEBENTWICKLUNG..........................................................................8Texteditoren.....................................................................................................................................8Zend Studio......................................................................................................................................9Eclipse............................................................................................................................................10Subversion......................................................................................................................................11Trac................................................................................................................................................12Mantis.............................................................................................................................................13Wiki................................................................................................................................................14Instant Messaging..........................................................................................................................15PhpMyAdmin..................................................................................................................................16

PHP FRAMEWORKS..........................................................................................................................17

WAS IST EIN FRAMEWORK?................................................................................................................17MVC – Model View Controller......................................................................................................17Akzeptanz und Einsatz von PHP-Frameworks...............................................................................18

CAKEPHP............................................................................................................................................19Installation.....................................................................................................................................19Views..............................................................................................................................................20Controllers.....................................................................................................................................21Components....................................................................................................................................22Plugins...........................................................................................................................................22

TEMPLATE ENGINE..........................................................................................................................23

WAS SIND TEMPLATESYSTEME?..........................................................................................................23SMARTY TEMPLATE ENGINE...............................................................................................................23

Geschichte......................................................................................................................................23Eigenschaften von Smarty..............................................................................................................24Vor- und Nachteile.........................................................................................................................25

BEISPIELE............................................................................................................................................25

AJAX & EFFEKTE...............................................................................................................................29

VORWORT ZU DOM............................................................................................................................29VORWORT ZU AJAX...........................................................................................................................30PROTOTYPE..........................................................................................................................................30SCRIPT.ACULO.US................................................................................................................................31EXT......................................................................................................................................................34

Layout.............................................................................................................................................34Dialog.............................................................................................................................................35Grid................................................................................................................................................35TabPanel........................................................................................................................................36Tree................................................................................................................................................36Menü..............................................................................................................................................37

Seite 2 von 38


Seite 3 von 38


Allgemeinter Teil

Dieser allgemeine Teil soll einen groben Überblick über die Entwicklung und das Betreiben von Anwendungen mit PHP und MYSQL geben.

Betrieb von Webanwendungen

Serversetup

Für den Betrieb von einer Webanwendung braucht man einen Webserver. In der Regel wird dafür PHP im Zusammenhang mit Apache verwendet. Apache ist ein leistungsfähiger Webserver und wird derzeit unter einer Open Source Lizenz in der Version 2.2.6 angeboten.

PHP wird dabei als Modul eingebunden (mod_php). Die Konfiguration erfolgt über die Konfigurationsdatei php.ini. Nach Änderungen an dieser Datei muss der Apache neu gestartet werden, damit die Änderungen aktiv werden.

Alternativ kann man PHP auch mit dem immer beliebter werdenden Webserver Lighttpd verwenden. Dieser Webserver hat den Vorteil, dass er wesentlich schneller als der Apache ist, dafür liefert er jedoch bei weitem nicht den Umfang und die Möglichkeiten von Apache.

Load Balancing

Wenn man sehr viele (gleichzeitige) Zugriffe hat und ein Server nicht mehr ausreicht, benötigt man ein Load Balancing System. Die ist ein Server, der mit dem Internet verbunden ist und alle eingehenden Anfragen auf mehrere interne Server zum Beareiten verteilt. Hierfür gibt es grundsätzlich zwei verschiedene Möglichkeiten:

1.) Der Load Balancer nimmt alle Anfragen entgegen und leitet diese der Reihe nach (Round Robin) an einen der vielen Webserver weiter. Jeder Webserver hat genau das gleiche Setup und die gleiche Konfiguration. Die Antwort wird dann vom Webserver bearbeitet an den Browser (Client) zurück geschickt.. Hierfür kann z.B. ein Load Balancer System von Cisco benutzt werden.

2.) Der Webserver Lighttpd hat von Haus aus die Unterstützung von einem Load Balancing System integriert. Auf dem Webserver, der mit dem Internet verbunden ist, läuft Lighttpd. Dieser nimmt die Anfragen entgegen und startet auf den weiteren Webservern einen PHP Prozess und leitet die Anfrage weiter. Diese zusätzlichen Client „berechnen“ dann die Anfrage, und geben das Ergebnis zurück.

In der Praxis wird ein Hardware Load Balancer bevorzugt.

Seite 4 von 38


Scriptsprache PHP

Geschichte

PHP wurde 1995 von Rasmus Lerdorf entwickelt und steht für „Personal Home Page Tools“. Anfangs bestand PHP aus einer Sammlung von Perl Scripten, die jedoch später in C umgesetzt wurden. Heute wird PHP immer noch in C entwickelt.

PHP 3 wurde 1998 von Andi Gutmans und Zeev Suraski neu geschrieben. Die Bedeutung der Abkürzug wurde ebenfall in „PHP Hypertext Preprocessor“ geändert.

Die von Gutmans und Suraski gegründete Firma Zend Technologies Ltd. entwickelte in der Folge die Zend Engine 1, die den Kern der PHP-4-Standardimplementierung bildet. Der Name „Zend“ ist aus den beiden Vornamen der Entwickler Zeev und Andi gebildet.

Meilenstein PHP 4

Mit PHP 4 wurden die Ausführungsgeschwindigkeit komplexer Applikationen und die Sicherheit bei Verwendung globaler Variablen verbessert. Eingeführt wurden die Unterstützung für viele weitere Webserver, das Sessionmanagement, die Ausgabepufferung sowie viele neue Sprachkonstrukte. Mit PHP4 wurden auch Klassen und Objekte eingeführt, die jedoch nur in eingeschränkter Funktion zur Verfügung standen.

PHP 4.0 ist am 22. Mai 2000 erschienen.

Meilenstein PHP 5

Mit PHP 5.0, welches am 13. Juli 2004 erschienen ist, unterstützte PHP erstmal richtige objektorientierte Programmierung. Weitere Erneuerungen waren Exceptions, die den Error Handler ablösen sollen. Mit der Reflection API kann man zur Laufzeit auf Objekte zugreifen und diese noch verändern. Weitere Neuerungen sind die Verbesserungen beim parsen von XML Dateien mit SimpleXML.

Ab PHP 5.1 wurde PDO hinzugefügt, eine Abstraktionsschicht für Datenbanken.

Ab PHP 5.2 kann man Filter für Eingabevariablen setzen, damit Manipulationen verhindert kann. Eine weitere Neuerung ist JSON. Damit kann man PHP Variablen serialisieren und mit Javascript darauf wieder zugreifen.

Meilenstein PHP 6

Zurzeit wird die Version 6.0 entwickelt. Bisher bekannte Änderungen sind zum einen die Entfernung von „Altlasten“ wie Register Globals, Magic Quotes und dem Safe Mode zum anderen die Unterstützung von Unicode sowie Namensräumen.

Seite 5 von 38


Vorteile

PHP ist eine sehr junge Programmiersprache. Durch Betrachtung der Nachteile bereits bestehender (Skript-) Sprachen wurde bei der Implementierung darauf geachtet, daß PHP die bekannten Nachteile außen vor läßt, dabei aber Vorteile von anderen Sprachen integriert.

Geringere Serverbelastung

Die Belastung des Web-Servers, auf dem PHP als Modul läuft, ist geringer als die eines Web-Servers, auf dem ein CGI ausgeführt wird. Soll ein CGI ausgeführt werden, so muß für jede Anfrage an den Server ein eigener Prozeß auf dem Web-Server gestartet werden. Um jedoch neue Prozesse zu erzeugen, sind teure System-Calls nötig, die die Geschwindigkeit bremsen. Bei PHP ist dies nicht der Fall, da es meist als Modul im Server eingebunden ist. Das bedeutet, daß PHP ein Teil des Web-Servers wird und immer geladen ist. Somit entfällt der Overhead der Prozesserzeugung.

Großer Funktionsumfang

PHP beinhaltet schon in seiner grundlegenden Form eine sehr große Anzahl verschiedener Bibliotheken und Funktionen. Besonders hervorzuheben sind hier Netzwerkfunktionen, Protokolle, und Datenbankanbindungen, die bei anderen Sprachen erst als externe Bibliotheken hinzugezogen werden müssen. Durch diese Vielzahl an Schnittstellen bringt PHP bereits alles mit, was zur Implementierung einer Web-Applikation bzw. eines Internetportals benötigt wird. Dies ermöglicht dem Programmierer, schnell Anwendungen zu entwickeln (Laut einer Untersuchung beträgt die Entwicklungszeit einer PHP-Anwendung nur 75% der Zeit, die für die Entwicklung der selben Anwendung mit ASP benötigt würde). Auch sonst stehen sehr viele Funktionen zur Verfügung, die das Programmieren wesentlich erleichtern. Hierbei sind besonders Funktionen zur Stringbearbeitung sowie zum Umgang mit Arrays zu nennen.

Zusätzlich existiert auch noch eine Vielzahl von Modulen, Bibliotheken, und Code-Schnipsel-Seiten im Netz, wie z.B. das PEAR.

In der neuesten Version ist es möglich, auch auf die Microsoft-COM-Komponenten zuzugreifen und weiterhin auch direkt auf Java-Objekte und gekapselte Java-Beans.

Browser(un)abhängigkeit

PHP wird auf dem Web-Server ausgeführt. Dort wird der Code interpretiert. Das bedeutet, daß der Browser des Clients normalerweise keinen PHP-Code zugesandt bekommt. Wird durch ein PHP-Skript reines HTML erzeugt, so kann man sagen, daß der Einsatz von PHP vollkommen browserunabhängig ist. Allerdings beschränken sich die Einsatzmöglichkeiten von PHP keineswegs auf reine HTML Seiten, sondern bieten auch die Möglichkeit, Browser-spezifische-Features zu verwenden. Zu diesem

Seite 6 von 38


Zweck ist es möglich herauszufinden, welcher Browser eine Anfrage an einen Server stellt.

Systemübergreifende Verfügbarkeit

Dies bietet für den Entwickler einer Anwendung, aber auch für eine Firma, die beispielsweise einen E-Shop betreibt, einen großen Vorteil, da es sehr leicht möglich ist, bei geänderten Anforderungen auf andere, leistungsfähigere oder sicherere Systeme umzusteigen (z.B. der Umstieg von Windows auf Linux). Auch für eine Softwarefirma stellt dies bei der Portierung ihrer Applikationen auf eine andere Serverplattform einen großen Vorteil dar.

Kostenlose Verfügbarkeit.

Es fallen bei der Benutzung von PHP keinerlei Lizenzgebühren an.

Open Source Gedanke:

PHP ist open source Software und kann damit die gesamten Vorteile, die dieses System mit sich bringt, für sich verbuchen. Hierzu zählen vor allem Punkte wie schnelle Fehlerbereinigungen, keine teuren Support-Hotlines und große Stabilität. Zudem kann sich jeder an der Fortentwicklung des Systems beteiligen. Gerade zu diesem Punkt ist anzumerken, daß PHP ein ausgereiftes Modulkonzept bietet, und daß Erweiterungen durch Spezifikation festgelegt sind (siehe dazu Anhang C des PHP Manual). Damit ist es leicht möglich, in C neue Module für PHP zu schreiben.

Der Benutzer einer Web-Site bekommt den Code, mit dessen Hilfe die Seiten erzeugt wurden, nicht zu Gesicht. Dies ist ein Nachteil clientbasierter Skript-Sprachen, bei denen der Quellcode an den Browser des Benutzers gesendet wird.

Suchmaschinen

Suchmaschinen sollten im allgemeinen keine Probleme haben, eine mit PHP programmierte Seite zu indizieren, da erstens die Dateiendung normalerweise keine Rolle mehr spielt und zweitens, wie oben bereits erwähnt, die Existenz von PHP auf dem Server vollständig vor einem Client verschleiert werden kann. Ein Spider einer Suchmaschine ist jedoch nichts anderes als ein automatisierter Browser.

Nachteile

Erhöhter Netzwerktraffic

Durch die Verwendung von PHP kann eine erhöhte Netzwerk- und Serverbelastung erfolgen, falls beispielsweise Usereingaben in ein Formular immer nur auf dem Server geprüft werden. Mit dem Einsatz eines zusätzlichen Javascripts kann dieser Nachteil umgangen werden, wenn schon auf der Client-Seite eine gewisse Syntaxprüfung der Eingaben erfolgt. Dies ersetzt zwar nicht die Prüfung auf Korrektheit auf dem Server, aber die Prüfung muß dann vielleicht nur einmal durchgeführt werden.

Seite 7 von 38


Falls PHP nicht als Modul in den Web-Server eingebunden wird, so ergeben sich daraus die gleichen Probleme wie bei anderen CGI auch. (Erzeugung von Prozessen mittels System-Calls, insbesondere fork())

Geschwindigkeit

Da PHP eine interpretierte Skriptsprache ist, ergibt sich ein Geschwindigkeitsnachteil bei der Ausführung von PHP gestützten Seiten. Vor jedem Durchlauf des Programms muss das Skript neu übersetzt werden, was sich speziell bei stark unter Last betriebenen Servern bemerkbar machen dürfte. Durch neuere Entwicklungen, wie die des ZEND Accelerator, wird dieser Nachteil weitgehend wettgemacht. Dabei wird das Skript nur einmal übersetzt und bleibt dann als kompilierte Version auf dem Server liegen. Zudem wurden auch verschiedene Optimizer (z.B: ZEND/Optimizer) entwickelt, die die Ausführung von PHP-Skripten beschleunigen.

Quellcode

Bei der Weitergabe einer Applikation ist der Quellcode nicht geschützt, da die Skripte aus reinen Textdateien bestehen. In neuerer Zeit wurden jedoch auch PHP-Compiler vorgestellt, so daß dann auch dieser Nachteil verschwinden dürfte.

Datenbank mySQL

Oft wird mySQL in Zusammenhang mit PHP als Datenbank genommen. mySLQ ist kostenlos erhältlich und ist insbesondere für Webeanwendungen optimiert. Derzeit ist mySQL ist der Version 5.0 erhältlich. Seit Version 5 können auch Transaktionen mit mySQL genutzt werden, sofern man InnoDB als Format für die Datenbank benutzt hat.

Die Konfiguration von mySQL erfolgt über die Datei my.cfg, die im Config Ordner zu finden ist. Nach Änderungen in dieser Datei muss die Datenbank neu gestartet werden, damit die Änderungen wirksam werden.

Load Balancing

Sollte die Webanwendung sehr stark Datenbanklastig sein, kann man die Datenbankzugriffe ganz einfach auf mehrere Rechner verteilen. Zunächst muss man eine Datenbank (einen MySQL Server) als Master definieren und kann dann beliebig viele weitere Server als Slave dazuschalten. Auf diesen Servern wird jedoch immer nur gelesen. Schreibzugriffe werden an den Master weitergeleitet und von dort dann wieder auf die einzelnen Clients verteilt.

Tabellentypen

Seite 8 von 38


Im Zusammenhang mit mySQL gibt es zwei wichtige Formate von Tabellen. Diese sind myISAM und InnoDB. InnoDB unterstützt Transaktionen und hat den Vorteil, dass bei Änderungen auch einzelnen Zeilen gelockt werden können. Bei MyISAM werden wird bei Schreibzugriffen immer die ganze Tabelle gelockt. Dafür ist jedoch MyISAM schneller als MyISAM.

Insbesondere für Logfiles lohnt sich noch die Verwendung von MyISAM.

Tools für die professionelle Webentwicklung

Am Einfachsten ist die Entwicklung von PHP Anwendungen, wenn man XAMP installiert. Dies ist eine Zusammenstellung von Apache, Mysql und PHP und ist unter Windows, Mac OS und Linux verfügbar. In der Regel reicht es das Paket herunterzuladen, zu entpacken und zu starten. Eine aufwendige Installation und Konfiguration ist i.d.R. nicht nötig. Jedoch können erfahrene Entwickler alle Einstellungen ändern und alles an Ihre Bedürfnisse anpassen.

Texteditoren

Für die Entwicklung von PHP Webanwendungen ist keine Entwicklungsumgebung notwendig, da die PHP Dateien mit jedem Editor erstellt und bearbeitet werden können.

Jedoch kann man mit einer professionellen Entwicklungsumgebung die Entwicklungszeit wesentlich steigern und auch Fehler vermeiden.

Es gibt viele Texteditoren wie z.B. Notepad++ mit Syntax Highliting. Diese sind zu empfehlen, wenn es sich um kleinere Projekte handelt.

Seite 9 von 38


Zend Studio

Im professionellen Einsatz kommen derzeit nur zwei Tools in Frage. Dies ist zum einen das Zend Studio oder Eclipse.

Das Zend Studio gibt es in drei Versionen (Standard, Professional und Enterprise). Diese unterscheiden sich z.A. in den Features. Die Professional Edition beinhaltet einen Debugger und einen Profiler, währen die Enterpreise Edition zusätzlich auch die Unterstützung zum Remote Debuggern bietet.

Aktuell ist das Zend Studio in der Version 5.2 und kostet je nach Version zwischen 99 und 300 Euro.

Seite 10 von 38


Eclipse

Die Alternative zum Zend Studio lautet Eclipse. Zend ist dem Eclipse Team beigetreten und wir künftig das Zend Studio nicht mehr weiterentwickeln.

Der Vorteil von Eclipse gegenüber anderen Editoren besteht daran, dass Eclipse sehr stark im Java Umfeld verbreitet ist und von Haus aus eine Veilzahl an Funktionen zur Verfügung stellt, die mit PHP dann auch genutzt werden können.

Außerdem gibt es sehr viele Plugins von Drittanbietern, die ebenfalls genutzt werden können. (wie z.B. den Subversion Client Subclipse)

Seite 11 von 38


Subversion

Für die Verwaltung des Quellcodes sollte man im professionellen Einsatz auf jeden Fall einen Quellcode Verwaltungs System wie z.B. SVN (alternativ auch noch CVS) benutzen. Dies hat den Vorteil, dass man jederzeit die Änderungen am Quellcode verfolgen kann. Wenn mehrere Leute gleichzeitig am gleichen Projekt und somit am gleichen Code arbeiten geht es ohne Subversion gar nicht mehr.

Seite 12 von 38


Trac

Die Zusammenarbeit in einem Team wird mit Trac erleichtert. Trac ist ein System, welches auf dem Server installiert wird. Man kann übers Web oder direkt in Eclipse über ein Plugin darauf zugreifen.

Mit Trac kann man aufs Subversion zugreifen und Änderungen verfolgen. Gleichzeitig bietet Trac einen umfangreichen Bugtracker an, mit dem Fehler und Bugs leichter verwaltet und verfolgt werden kann.

Da Trac modular aufgebaut ist, gibt es eine Vielzahl an weiteren Plugins, die einfach nachinstalliert und an die eigenen Bedürfnisse angepasst werden können.

Seite 13 von 38


Mantis

Als Alternative zu Trac, kann auch Mantis als Bugtracker verwendet werden.

Seite 14 von 38


Wiki

Bei großen Projekten kann es auch Sinn machen, zentral ein Wiki zu installieren und alle Änderungen und Dokumentationen dort für alle festzuhalten.

Seite 15 von 38


Instant Messaging

Sollte das Entwickler Team nicht im selben Büro sitzen, benötigt man einen Instant Messanger wie z.B. Skype oder ICQ für die schnellere Kommunikation.

Seite 16 von 38


PhpMyAdmin

Insbesondere wenn man als Datenbank mySQL einsetzt, kommt man um phpMyAdmin nicht herum.

Dies ist ein in PHP geschriebenes Tool, mit welchem man eine mySQL Datenbank verwalten kann. Außerdem der Konfiguration, Benutzerverwaltung kann man hiermit auch noch Datenbanken und Tabellen anlegen, sowie Datensätze anzeigen, suchen, eintragen und ändern.

Seite 17 von 38


PHP Frameworks

Was ist ein Framework?

Ein Framework (englisch für Rahmenwerk, Fachwerk, Gerüst, Gerippe, Grundstruktur oder Bezugssystem) ist im Sinne der Softwareentwicklung ein Programmiergerüst. Es handelt sich dabei also nicht um ein Programm, sondern vielmehr um einen vorgegeben Rahmen, innerhalb dessen der Entwickler eine Anwendung bzw. ein Programm erstellt. Frameworks werden vor allem im Rahmen der objektorientierten Softwareentwicklung verwendet. Seit Version 4 zählt PHP eindeutig zu den objektorientierten Programmiersprachen und mit PHP 5 wurde der objektorientierte Ansatz noch weiter verfeinert. Seither findet man im Netz eine Vielzahl von PHP-Frameworks. Ein Framework gibt in der Regel die Architektur einer Anwendung vor, da der Entwickler nicht wie bei einer üblichen Klassenbibliothek, die Klassen und Funktionen benutzt, sondern konkrete Implementierungen registriert werden, die dann durch das Framework gesteuert und benutzt werden. Man könnte somit eher von einer Klassenbibliothek aus kooperierenden (aufeinander abgestimmten) Klassen, die abstrakte und leere Operationen anbieten, reden. Vereinfacht ausgedrückt gibt ein Framework dem Entwickler eine Grundstruktur und eine Vielzahl von Bausteinen an die Hand. Die Bausteine existieren in der Form von abstrakten und konkreten Klassen und unterstützen das Erstellen von Anwendungen. Der Kontrollfluss der Anwendung wird somit aber weitestgehend durch das Framework definiert. Frameworks sind oftmals auf einen bestimmten Anwendungsbereich (z.B. elektronische Warenhäuser, Buchhaltungssysteme, etc.) beschränkt.

MVC – Model View Controller

Viele Frameworks unterstützen das MVC (Model-View-Controller) Konzept.Model – (Daten)Modell / DatenlogikView – Präsentation / AnzeigelogikController – (Programm)Steuerung / Steuerungslogik

Das Modell (model) enthält die darzustellenden Daten, unabhängig davon woher diese Daten kommen oder wie sie zusammenhängen.Die Steuerung (controller) enthält die eigentliche Programmlogik und nimmt Benutzeraktionen (Input) entgegen, wertet diese aus und agiert entsprechend. Die Präsentation (view) ist für die Darstellung der relevanten Daten zuständig. Je nach Entwurf leitet sie auch die Benutzeraktionen an die Steuerung weiter.Durch die Trennung dieser Komponenten soll ein flexibles Programmdesign, welches u.a. eine spätere Erweiterung oder Anpassung erleichtern und eine Wiederverwendbarkeit der einzelnen Komponenten ermöglichen soll.

Seite 18 von 38


Akzeptanz und Einsatz von PHP-Frameworks

In den letzen Jahren wurde eine Vielzahl von PHP-Frameworks entwickelt. Dies hängt vor allem damit zusammen, dass durch den objektorientieren Ansatz der neuen Versionen (PHP 4 und 5) die Akzeptanz von PHP im Unternehmensumfeld, also konkret für komplexe Unternehmensanwendungen, stark gestiegen ist. Somit kommen immer häufiger, bei komplexen (Enterprise)Anwendungen und Websites, PHP-Frameworks ins Spiel, da sie dem Entwickler eine Basis zur Verfügung stellen, die sich um häufig wiederkehrende Aufgaben kümmert.

Dies ist aber nur einer von vielen Vorteilen die für den Einsatz von PHP-Frameworks sprechen. PHP ist eine leicht zu erlernende Scriptsprache, die den Einsatz von objektorientiertem Code nicht, im Gegensatz zu z.B. bei Java, fordert. Es gibt also keine konkreten Regeln zur Strukturierung des Codes, somit ist es ebenso einfach „schlechten“ bzw. nicht wiederwendbaren Code zu produzieren. Eine mögliche Abhilfe hierbei bietet der Einsatz eines PHP-Frameworks.

PHP-Frameworks wie z.B. CakePHP, CodeIgniter und das Zend Framework bieten eine grundlegende Struktur (einheitliche Code-Basis) für den Entwickler und folgen zudem dem MVC-Konzept. Gerade bei komplexen Projekten an denen mehrere Entwickler gemeinsam arbeiten ist die einheitliche Struktur, die durch den Einsatz nahezu erzwungen wird, fast unumgänglich. Es resultiert ein verbesserter Workflow bei der Team-Arbeit und es reduziert sich die Gefahr der Redundanz. Weiterhin gibt viele sogenannte nützliche „Helfer“ (Helferklassen), die dem Entwickler das Leben deutlich leichter machen.

Ein weiterer Vorteil ist natürlich auch der geringere Zeitaufwand und die damit verbundenen Entwicklungskosten bzw. Wartungskosten, die immens gesenkt werden können.

Ein Nachteil ist sicherlich der Zeitaufwand für die Einarbeitung in ein Framework (Erlernen der Arbeitsweise und Verstehen des Codes), jedoch steht dem der Lernfaktor gegenüber, d.h. man denkt sich in neue Strukturen und Konzepte ein und lernt sehr viel dazu. Man sollte bei diesem Nachteil auch bedenken, dass dieser Zeitaufwand nur einmalig ist, anschließend kommen die Vorteile zum tragen. Die etwas geringere Performance als wirklichen Nachteil zu nennen ist in der heutigen Zeit wohl eher weniger repräsentativ.

Bei der Wahl des Frameworks sollte man auf vor allem auf eine gut geführte Dokumentation und den Entwicklungsstatus achten. Liegt ein Framework nur in der Beta-Version vor, so kann es passieren, dass Fehler in der Code-Basis unerkannt mitgeschleift werden. Dies wäre als deutlicher Nachteil zu nennen, aber die Erfahrung zeigt, dass diese Fehler von der Community meist schnell entdeckt und gemeldet werden, folglich schnell verbessert werden. Das Framework sollte aus diesem Grund leicht zu updaten sein, sprich der eigens programmierte Code sollte getrennt von den Verzeichnissen des Frameworks gespeichert sein, dies ist aber in der Regel der Fall.

Aktuelle PHP-Frameworks sind z.B. das Zend-Framework, Symfony, Seagull, Code Igniter, Prado und CakePHP. Die genannten Frameworks erfüllen ihren Zweck, sie

Seite 19 von 38


nehmen dem Entwickler Arbeit ab und reduzieren die Entwicklungszeit. Allerdings variiert der Funktionsumfang deutlich. Desweiteren setzen alle genannten PHP-Frameworks auf eine Trennung der Komponenten bzw. des Quellcodes nach dem MVC Konzept. Weiterhin werden standardmäßig verschiedene Datenbanken unterstützt, darunter auch die wohl meist genutzte und in der Webentwicklung bekannteste: MySQL.

Da die Auswahl eines Frameworks sehr stark von den eigenen Anforderungen, Rahmenbedingungen und Vorlieben abhängt, ist eine eindeutige Empfehlung schwierig.

Wir möchten an dieser Stelle ein PHP-Framework etwas näher vorstellen: CakePHP.

CakePHP

CakePHP (kurz Cake) wird seit 2005 entwickelt und folgt dem MVC-Konzept. Mit Cake lassen neben kleinen Webseiten oder Anwendungen auch große Projekte mit mehreren Mitarbeitern umsetzen. Cake PHP funktioniert auf allen Servern mit PHP 4.3.2 oder neuer, setzt allerdings wie viele andere Frameworks voraus, dass durch eine .htaccess-Datei Parameter des Webservers geändert werden können - zum Beispiel für das URL-Rewriting. Zum Bewältigen wiederkehrender Aufgaben in der Webentwicklung gehören sicherlich die Internationalisierung und die automatische Validierung von Formulardaten, die in Cake ebenfalls standardmäßig implementiert sind. Mit dem Kommandozeilen-Tool „bake“ hat man sogar die Möglichkeit, Quellcode automatisch zu erzeugen. Cake ist kostenlos und kann somit von jedem genutzt und erweitert werden, da der Quellcode offen ist. Die Dokumentation liegt derzeit nur in englischer Sprache vor, dennoch ist sie sehr gut verständlich.

Installation

Nachdem man die aktuelle Version von Cake heruntergeladen hat (cakephp.org) entpackt man diese auf den Webserver (webroot Verzeichnis). Hier die Übersicht der Verzeichnisse nach dem Entpacken:/app

/config/controllers/models/plugins/tmp/vendors/views/webroot.htaccessindex.php

/cake/vendors

Seite 20 von 38


.htaccessindex.phpDas „app“ Verzeichnis ist für den Entwickler bestimmt. Im „cake“ Verzeichnis liegen die Kernbibliotheken von Cake, diese sollten unberührt bleiben. Das „webroot“ Verzeichnis entspricht dem Eintrag des DocumentRoot-Verzeichnisses im Webserver. Die gebräuchlichsten Verzeichnisse des Entwicklers sind „models“, „views“ und „controllers“. Cake kommt, bei standardmäßigem Einsatz, nahezu ohne Konfiguration aus, lediglich die Zugangsdaten zur Datenbank müssen in die entsprechende Konfigurationsdatei (/app/config/database.php) eingetragen werden.

Models

Models repräsentieren in Cake eine Tabelle der Datenbank oder Einträge und deren Beziehung zu anderen Tabellen bzw. Einträgen. Desweiteren können sie Regeln zur Datenvalidierung enthalten, die bei Updates oder Inserts zum tragen kommen. Jedes Model bringt eine Reihe von Methoden mit, welche zur Verwaltung der Daten genutzt werden können. Der Entwickler muss also keine SQL-Befehle selbst schreiben, da die Methoden diese Aufgabe automatisch erledigen. Methoden zum Lesen sind beispielsweise Model::read(), Model::find(), Model::findAll() oder Model::findBy<fieldName>() [z.B.

Model::FindById(´12´)]. Methoden zum Schreiben sind beispielsweise Model::save() oder Model::saveField(). Zum Erstellen eines Datensatzes Model::create(). Ein Model für die Tabelle „users“ könnte Beispielsweise so aussehen (/app/models/user.php):

<?phpclass User extends AppModel {

var $name = ´User´;

function makeInactive($id) {// eigene Programmlogik

}} ?>

Der Tabellenname der Datenbank ist in der Regel Plural (z.B. users) und der Modelname singular (z.B. User). Im Deutschen ist das nicht immer möglich (z.B. Benutzer). Cake bietet hier die Möglichkeit über die Variable $useTable, den Tabellennamen anzupassen.

Views

Seite 21 von 38


Für den View gibt es sogenannte view-Files (Dateien), welche HTML- und PHP-Code enthalten. Man spricht dabei auch von Templates. Durch sogenannte Helper, stellt Cake die Möglichkeit zur Verfügung häufig wiederkehrenden Code, wie z.B. Formulare, zu erzeugen. Die Einbettung des folgenden PHP-Codes in ein Template erzeugt automatisch den HTML-Code für ein Textfeld: <?php echo $html->input(´name´); ?>. Durch Einschalten der Scaffolding-Option im Controller kann während der Entwicklung sogar auf das Erstellen der entsprechenden Views verzichtet werden. Cake erstellt dann dynamisch Views, anhand der Datenbankstruktur des verwendeten Model, mit add (hinzufügen), edit (bearbeiten) und delete (löschen) Buttons. Für sich wiederholende Ausgaben (z.B. ein Navigationsmenü) im Template kann man auf „Elements“ zurückgreifen. Dies sind quasi Templates innerhalb von Templates.

Controllers

Der Controller steuert die Anfragen (Eingaben des Benutzers) und enthält die eigentliche Programmierlogik. Er nutzt Models zum Lesen und Schreiben von Daten und sendet die Output-Daten zur dazugehörigen view-Datei. Dies soll anhand eines Beispiels verdeutlicht werden: Datei /app/controllers/videos_controller.php

class VideosController extends AppController {

function view($id) {

// eigene Programmlogik.. }

function rent($customer_id, $video_id){

// eigene Programmlogik.. }

function search($query) {

//eigene Programmlogik.. }}

Ein Controller kann mehrere Actions enthalten, hier: view, rent und search. Die Actions werden in Form von Funktionen realisiert. Ein Controller bindet automatisch das zugehörige Model ein, in diesem Beispiel würde das „Video“-Model eingebunden werden. Man hat natürlich die Option mehrere oder auch kein Model einzubinden.Die Actions dieses Controllers können so aufgerufen werden:

Seite 22 von 38


http://www.example.com/videos/view/253http://www.example.com/videos/rent/5124/0-235253http://www.example.com/videos/search/hudsucker+proxy

Der Aufruf ist also Domainname/Controller/Action/Parameter1/Parameter2/…Genau wie die automatische Einbindung des Models wird auch der entsprechende View aufgerufen. In diesem Beispiel würde beim Aufruf der Action „view“ das Template /app/views/videos/view.thtml, für „rent“ das Template /app/views/videos/rent.thtml und für „search“ das Template /app/views/videos/search.thtml ausgegeben werden. Die Ausgabe des Templates kann mit dem Aufruf der Funktion render() beeinflusst werden.

Components

Mit den Components wird in Cake die Möglichkeit geschaffen eine Klasse mit Variablen und Funktionen in einen Controller einzubinden. Wenn man z.B. eine Zinsberechnung in mehreren Controllern bräuchte, so schreibt man diese nur einmal und bindet diese Component in mehrere Controller ein.

Plugins

Mit Plugins bietet Cake die Möglichkeit eine Kombination aus Controllern, Models und Views zusammenzufassen. Dieses Plugin kann dann z.B. in anderen Projekten wiederverwendet werden.

Dies war ein kleiner Einblick in CakePHP. Wer mit diesem PHP-Framework arbeiten möchte kommt um das Lesen der Dokumentation leider nicht herum. In der Dokumentation werden weitaus mehr Themen abgehandelt als es hier möglich ist, vor allem sollte man den „Helpers“ seine Aufmerksamkeit schenken, da diese oft gebrauchten Code, durch einfache Funktionsaufrufe liefern und somit wesentlich zur Reduzierung der Entwicklungszeit beitragen. Wer objektorientiertes Programmieren in PHP bereits beherrscht, kann innerhalb weniger Tage vernünftig mit diesem Framework arbeiten.

CakePHP finden Sie im Internet unter: http://cakephp.org

Seite 23 von 38


Template Engine

Was sind Templatesysteme?

Eine Template-Engine zeigt Objektattribute und Methodenergebnisse an, mehr nicht. Und zwar inmitten von HTML-Code, den es aus den sogenannten Templates bezieht:

<h1>{$ur->game->getHeadline()}</h1>

Würde man den <h1>-Tag nachträglich zu einem <h2>-Tag machen wollen, muß man das einfach nur im Template tun, der PHP-Code, der ja ohnehin nur die Überschrift, also den Inhalt, liefern soll, bleibt unberührt.

Mit Templatesystemen versucht man nun Programmcode und Design zu trennen.

Der Programmierer bleibt bei seinem Code und läd ein sog. Template in das Script rein. Das Templatesystem untersucht die Templates und ersetzt bestimmte Platzhalter durch echte Werte und gibt das dann alles aus. Diese Trennung von Code und Design ermöglicht zwei Sachen.

1. Ein reiner HTML-Webautor kann nun die Seiten gestalten ohne auch nur PHP zu kennen. Er kriegt dann vom PHP-Programmierer die Platzhalter genannt, die er verwenden kann.

2. Der PHP-Programmiere kann sich voll und ganz seinen PHP-Scripten widmen. Er braucht sich nicht um HTML und CSS zu kümmern. Er muss nur sicherstellen, dass die Formulare verarbeitet werden und die MySQL-Befehle alle gültig sind.

Es gibt mehrere verschieden Template- Systeme. Die zwei bekanntesten sind Smarty und petTemplate. Hier will ich explizit auf Smarty eingehen.

Smarty Template Engine

Geschichte

Mit der Intention, eine Art "Basic-PHP" für Designer zu erschaffen, erstellten die Entwickler Monte Orth und Andrei Zmievski gegen Ende des Jahres 1999 die Spezifikation für eine Template-Engine, welche anschließend in der Hoffnung, dass sie Eingang in PHP finden würde, in C programmiert wurde.

Nachdem jedoch verschiedene technische Schwierigkeiten und eine hitzige Diskussion über die Frage, was eine Template-Engine können sollte und was nicht, eine Implementierung von Smarty in PHP verhinderten, entschlossen sich die

Seite 24 von 38

http://de.wikipedia.org/wiki/C_(Programmiersprache)


Programmierer, das Template-System als eine Klasse für PHP zu veröffentlichen und dessen Funktionalität auf diesem Weg zur Verfügung zu stellen.

Es entstand die Klasse SmartTemplate, bei der zum Passen regulären Ausdrücken verwendet wurden. Diese wurde jedoch nie veröffentlicht.

Da der Inhalt einer Seite jedoch bei jedem Aufruf geparstwurde, entstand ein großer Overhead. Um diesen Effekt zu vermindern, wurde Smarty mit der Erstveröffentlichung am 18. Januar2001um eine Vorkompilierung der Dateien (Caching) ergänzt.

Um die oben genannten Probleme zu lösen wurde das OpenSource-Projekt Smarty, das in Form einer PHP-Klasse vorliegt, entwickelt. DieBesonderheit bei dieser Engine liegt darin, dass nicht, wie sonst üblich,Variablen einfach ersetzt werden, sondern aus einem Template eineneue PHP Datei generiert wird, die dann von Smarty als PHP-Include eingebundenwird. Da dieses so genannte „Kompilieren“ von Templates nichtbei jedem Aufruf ausgeführt wird, sondern nur dann, wenn sich dasTemplate geändert hat, ergeben sich für die Ausführung große Geschwindigkeitsvorteile.

Eigenschaften von Smarty

Smarty unterstützt alle üblichen Ablaufstrukturen, wie beispielsweise beliebigtief geschachtelte Verzweigungen und Schleifen, Datenbankabfragensowie benutzerdefinierte Funktionen. Die Templates bestehen ausHTML-Code, erweitert um so genannte Template-Tags. Die Notation derTemplate-Tags ist der von HTML-Tags sehr ähnlich, jedoch wird {{…}}als Begrenzung genutzt. Smarty interpretiert alle Inhalte außerhalb derBegrenzungen als statisch. Sobald Template-Tags auftreten, werden dieseverarbeitet und die Ergebnisse als Ausgabe an dieser Stelle eingefügt.Die Werte von Variablen werden ausgegeben, indem der Variablennameausgeschrieben wird, zum Beispiel {{$nachname}}.Verzweigungen nutzen die Schlüsselwörter , else, elseif und/if. Als Bedingungen dienen boolesche Ausdrücke mit den üblichenVergleichs- und booleschen Operatoren.

Die Schlüsselwörter , sectionelse und /section definierenSchleifen. Dabei wird der Teil genau dann ausgeführt,wenn die Abbruchbedingung sofort greift, also kein Schleifendurchlaufdurchzuführen ist.Sie benötigen einen -Parameter, der der Laufvariablen entspricht,und einen -Parameter, der das Array referenziert, dessenWerte durchlaufen werden müssen.Als Beispiel für Funktionen sei der Aufruf {{include file=“header.tpl“}} gegeben. Hier wird an der Stelle, an der der Aufrufeintritt, der Inhalt eines anderen Template eingefügt, wie bei normalen includesüblich.

Seite 25 von 38


Vor- und Nachteile

Smarty bietet als Template Engine mehrere Vorteile, aber auch Nachteile.

Ein großer Vorteil ist, dass ein auch ein unerfahrener Programmierer das Layout entwerfen und einbinden kann, ohne dass man Gefahr läuft, dass man den Code beschädigt.

Ein weiterer Vorteil ist es, dass Smarty schneller als andere Template Engines ist, da vorkompiliert wird.

Darüberhinaus bietet es viele Möglichkeiten und ist Erweiterbar. Auch die große Verbreitung gerade in letzter Zeit wird Smarty immer besser.

Ein Nachteil ist, dass Template Engines langsam sind. PHP und HTML gemischt wäre schneller.

Als weiteren Nachteil muss man betrachten, dass man erst einmal die Smarty Syntax lernen muss.

Beispiele

Seite 26 von 38


Seite 27 von 38


Seite 28 von 38


Seite 29 von 38


Ajax & Effekte

Vorwort zu DOM

DOM – Document Object Model

Das Document Object Model ist eine Norm, die zunächst einmal den Programmiersprachen-Zugriff auf beliebige Elemente eines Auszeichnungssprachen-Dokuments beschreibt. Es handelt sich dabei, also nicht um eine Programmiersprache, noch ist es auf HTML beschränkt. Es definiert Objekte, Eigenschaften und Methoden, die eine Programmiersprache umsetzen sollte.

Eine Auszeichnungssprache wie HTML oder jede andere, XML-basierte Sprache ist als hierarchische Baumstruktur abbildbar. Die einzelnen Bestandteile dieser Baumstruktur werden als Knoten (node) bezeichnet. Es gibt verschiedene Knotentypen: Elementknoten, Attributknoten und Textknoten:Beispiel anhand eines HTML-Konstrukts:

<h1 align=“center“>Hallo Welt</h1>

In diesem Beispiel kommen alle erwähnten Knotentypen vor: der Elementknoten h1, der Attributknoten align und die Zeichenkette „Hallo Welt“ und „center“ als Textknoten von h1 und align.

Die Baumstruktur eines einfachen HTML-Dokuments könnte beispielsweise so aussehen:

Die Baumstruktur einer komplexen Webseite kann sehr umfangreich und tief verschachtelt sein. Zu den DOM-fähigen Programmiersprachen gehört JavaScript, mit

Seite 30 von 38


dem man in der Lage ist diese Baumstruktur zu verändern.

Vorwort zu AJAX

AJAX – Asynchronous JavaScript and XML

Eine der wichtigsten Funktionen im Web2.0 Zeitalter, für die JavaScript verwendet wird, ist AJAX. AJAX bezeichnet ein Konzept der asynchronen Datenübertragung vom Server zum Browser mittels JavaScript. Damit ist es möglich innerhalb der HTML-Seite eine HTTP-Anfrage an den Server zu senden, ohne die Seite, wie bei einem Link oder dem Abschicken eines Formulars, neu laden zu müssen. Die häufigsten Datenstrukturen die übertragen werden sind HTML, JSON (JavaScript Object Notation) und XML (Extensible Markup Language). Mit JavaScript ist es möglich auf das DOM (Document Object Model, Baumstruktur des HTML-Codes) einer Webseite zuzugreifen und HTML-Elemente zu ersetzen, zu löschen oder zu erweitern. Mit Hilfe der asynchronen Datenübertragung kann man nun eine Anfrage an den Server senden und die Antwort (z.B. HTML-Code) wieder direkt, ohne neues Laden der Seite, an die gewünschte Stelle in der HTML-Seite einbauen.

Daraus ergeben sich wesentlich geringere Ladezeiten und die Serverlast wird meist deutlich verringert. AJAX wird von allen gängigen Browsern unterstützt und ist kostenlos. Die Verwendung dieses Konzepts hat aber nicht nur Vorteile, denn z.B. der Zurück-Button des Browsers funktioniert nicht mehr effektiv, da die dynamischen Ajax-Schritte derzeit nicht in der Historie des Browsers gespeichert werden. AJAX funktioniert zwar, wie bereits erwähnt, in allen gängigen Browsern, jedoch nur dann wenn JavaScript nicht ausgeschaltet ist.

Die nachfolgend Vorgestellen Frameworks und Toolkits basieren auf dem AJAX Konzept und sind in JavaScript geschrieben.

Prototype

Das Protoype Framework wurde 2005 entwickelt. Prototype vervollständigt die JavaScript API mit extrem nützlichen und fehlenden Funktionen. Neben der Erweiterung von Basisobjekten, wie Object und function mit extend(), bind() und clone(), oder der Erweiterung des DOM-Elements mit vielen hilfreichen Methoden, gibt es viele „kleine Helferlein“ für die häufigsten Aufgaben.Eine der einfachsten Methoden ist HTML-Elemente mittels HTML-Code vom Server zu ersetzen oder zu erweitern (AJAX). Ein einfaches Beispiel wie das mit Prototype geht:

new Ajax.Updater(´mainContent´, ´/impressum.html´ , { method: ´get´

});

Seite 31 von 38


In diesem Beispiel wird das DOM-Element mainContent durch den HTML-Code der Datei impressum.html , der durch eine Serveranfrage geladen wird, ersetzt.Prototype bietet mehrere Möglichkeiten, den DOM-Baum zu editieren. Zum einen gibt es den DOM-Builder und ein Template-System, um neue Elemente zu erstellen und ein erweitertes DOM-Element-Objekt, um bestehende Element zu verändern.

Ein Beispiel für den DOM-Builder:

var el = new Element(’img’, {src : ’/photo.png’,align : ’left’

});

Diese Beispiel ergibt folgenden HTML-Code: <img drc=“/photo.png“ align=“left“ />

Zum Editieren von DOM-Elementen gibt es über 40 Methoden.Ein paar Beispiele davon:

// Versteckt das Objekt ’optionBox’$(’optionBox’).hide();

// Fügt ’link1’ die CSS Klasse ’selected’ hinzu$(’link1’).addClassName(’selected’);

// Setzt den Inhalt von ’status’ auf ’Wird geladen...’$(’status’).update(’Wird geladen...’);

// Ändert das Styleattribut von ’articleImg’$(’articleImg’).setStyle(’float:left; margin: 5px’);

// Versteckt alle Kind-Elemente von ’menu2 ’$(’menu2’).childElements().each( function(m) { m.hide() });

Neben sämtlichen Methoden zur Stringverarbeitung wie man sie aus anderen Programmiersprachen gewohnt ist, gibt es auch eine Vielzahl an Funktionen, die das Arbeiten mit Arrays vereinfachen.

Prototype finden Sie im Internet unter: http://prototypejs.org

Script.aculo.us

Dieses Toolkit wurde genau wie Prototype 2005 entwickelt und erweitert Prototype um Funktionen zum Verbessern der Benutzeroberfläche, wie Effekte, Drag and Drop, Sortierbare Listen, Autocomplete felder, etc.

Effekte in Script.aculo.us sind effektvolle grafische Veränderungen von Eigenschaften bestimmter DOM-Elemente. Zum Beispiel das Ausblenden eines

Seite 32 von 38

http://prototypejs.org/


DOM-Elements, indem es verkleinert, verschoben oder ausgeblendet wird. Auch ein wackelndes oder blinkendes Element, um die Aufmerksamkeit des Benutzers darauf zu lenken, gilt als Effekt. Die Anwendung der verschiedenen Effekte ist relativ gleich. Deswegen hier einige ausgewählte zum Verdeutlichen des Prinzips.

// Element mit der ID ’elementId’ wird ausgeblendet new Effect.Fade(’elementId’);

// Element mit der ID ’elementId ’ wird eingeblendet new Effect.Appear(’elementId’);

// Element mit der ID ’elementId’ wird eingeklappt new Effect.toggle(’elementId’ , ’blind’);

// Element mit der ID ’elementId ’ wird ausgeklappt new Effect.toggle(’elementId’ , ’blind’);

Besonders erwähnt sei hier die toggle() Funktion, die sie in dem Beispiel sehen. Durch sie wird nicht definiert ob es ein anzeigender oder ausblendender Effekt ist, sondern nur, dass je nach Sichtbarkeit des Elements der passende Effekt verwendet wird. Ist das Element unsichtbar, wird es eingeblendet und ist es sichtbar, wird es ausgeblendet. Welches Effekt-Paar hier verwendet werden soll bestimmt der zweite Parameter. Hier bestimmt »blind« das Effekt-Paar blindUp() und blindDown().

Die Drag and Drop Funktion ist elementar wichtig, wenn es darum geht, dem Benutzer eine »Desktop-Applikations« ähnliche Anwendung zu liefern. Unter »Drag and Drop«5 wird der Vorgang vom Ziehen eines Objekts auf ein anderes verstanden. Damit wird eine Beziehung zwischen den Objekten hergestellt. Mit »Drag and Drop« wird versucht, dem Benutzer durch eine Aktion, die er im normalen Alltag ständig gebraucht, die Anwendung intuitiver zu gestalten. Zum Beispiel das Wegwerfen eines Briefes in den Papierkorb, welches 1:1 mittels »Drag and Drop« auf den Computer umgesetzt werden kann.

In Srcipt.aculo.us wurde «Drag and Drop« folgendermaßen umgesetzt:

// <img class ="products" id="product_1" src="p1.jpg"/>new Draggable(’product_1’, { revert : true } );// <img class ="products" id ="product_2" src="p2.jpg"/>new Draggable(’product_2’, { revert : true } );

// <img class ="trash" id="trash" src="trash.jpg"/>new Droppables.add(’trash’, {

accept: ’products’,onDrop: function(e) {

alert(’Produkt ’ + e.id + ’ vernichtet’ ) },});

Seite 33 von 38


Das obige Beispiel zeigt zwei Produktbilder und einen Papierkorb. Die beiden Produktbilder wurden über den Javascript-Code in »Dragable«, also ziehbare Elemente umgewandelt. Wenn man mit der Maus auf eines der Bilder klickt und die Maustaste gedrückt hält, kann man das Bild innerhalb des Browserfensters verschieben. Beim Loslassen springt das Produkt-Bild in die ursprüngliche Position zurück. Aus dem Papierkorb-Bild wird ein »Dropable« Element, was bedeutet, dass durch Fallenlassen von »Dragable« Elementen eine Aktion ausgelöst wird. Begrenzt wird das auf Elemente, die die CSS-Klasse »products« verwenden. Desweiteren wird eine Funktion definiert, die die Id des Elements ausgibt, welches über dem Papierkorb fallen gelassen wurde. An dieser Stelle steht oft eineFunktion, die über einen Ajax-Request eine Aktion auf dem Server auslöst.

Neben den Effekten und den »Drag and Drop« Funktionen verdient noch der Ajax-Autocompleter und die Sortable Listen eine Erwähnung. Als Grundlage für eine einfache Sortable Liste dient eine normale HTML Liste mit <ul> und <li> Elementen.

// <ul id ="sortList">// <li id ="item1">item1</li>// <li id ="item2">item2</li>// <li id ="item3">item3</li>// </ul>new Sortable.create(’sortList’);

Selbstverständlich gibt es noch viele weitere Optionen und Möglichkeiten, eine Sortable Liste zu generieren. Zum Beispiel auch ohne <ul> und <li> Elemente. Es ist auch möglich, Elemente zwischen mehreren Listen auszutauschen. Der Ajax-Autocompleter dient dazu, eine angefangene Benutzereingabe eines Formular-Input-Feldes über eine Ajax Abfrage zu vervollständigen oder, falls es nicht eindeutig ist, eine Auswahlliste anzubieten. Besondersfür Datenmengen, die zu groß sind für eine normale Select-Box, ist das sehr hilfreich. Ein einfacher Ajax-Autocompleter kann so aussehen:

// <input type="text" name="test" id="test" />// <div id="result" class="autocomplete"></div>

new Ajax.Autocompleter( ’test’, ’result’, ’/complete.php’, {

minChars: 3,frequenzy: 1

});

Hier wird das Input-Feld mit der ID test zum Autocompletefeld. Es wird jede Sekunde geprüft, ob mindestens 3 Zeichen im Input-Feld enthalten sind und dann, sofern sich der Inhalt seit der letzen Abfrage verändert hat, eine Abfrage gestartet und das Ergebnis in dem <div> Element mit der ID result angezeigt.

Script.aculo.us finden Sie im Internet unter: http://script.aculo.us

Seite 34 von 38


Ext

Entwickelt wurde Ext Anfang 2006. Ext setzt eine Stufe höher an als Protoype und Script.aculo.us. Es beschränkt sich nicht auf die Veränderung des bestehenden HTML-Codesund das Anwenden von Effekten auf bestehende Elemente, sondern bringt komplett selbstständige Inhaltselemente (sogenannte Widgets) mit. Zwar bestehen diese Elemente auch komplett aus HTML/CSS Code, benötigen allerdings nicht mehr als ein Basis-HTML-Element, in das die generierten Elemente eingebettet werden. Ext bietet sich perfekt an für sogenannte »Rich Internet Applications«, welche versuchen, dem Benutzer das Gefühl einer echten Desktop-Anwendung zu geben. Auch auf einer normalen Webseite kann man die Ext Elemente natürlich einbinden. Es werden nur einige Beispiele für die Anwendung von Ext gezeigt, da bei der Vielzahl an Elementen, Optionen und Kombinationsmöglichkeiten mehr als ein kleiner Einblick nicht möglich ist. Die Dokumentation ist aber sehr umfangreich und gespickt mit vielen Beispielen.

Layout

Layout werden die Elemente zum Strukturgestalten der Oberfläche genannt. Die Seite wird in maximal 5 Bereiche eingeteilt (North, East, South, West und Center), welche wiederum in maximal 5 Bereiche eingeteilt werden können, und so weiter. Die Eigenschaften jedes Elements bestimmen ob es in der Größe veränderbar, auf- und zuklappbar, in Tabs unterteiltoder einfach nur statisch ist. In die einzelnen Element können dann beliebigeandere Elemente oder auch HTML-Codes gesetzt werden.

Dialog

Seite 35 von 38


Die Dialoge sind die einfachsten Elemente in Ext. Die »Confirm-Box«, die auf dem Bild zu sehen ist, können wir mit folgendem Beispiel einbinden:

Ext.MessageBox.confirm(’Confirm’,’Are you sure you want to do that?’,function(btn) { alert(’Taste: ’+btn); }

);

Anstelle der Funktion, die dem Benutzer die gedrückte Taste ausgibt, sollten eine Abfrage und der zum Verarbeiten benötigte Code stehen.

Grid

Das Grid Element ist wohl das mächtigste in Ext. Die Möglichkeiten sind hier nahezu unbegrenzt. Vom direkten Editieren in der Tabelle, über serverseitiges Sortieren bis hin zu »Drag and Drop« Unterstützung lässt sich alles konfigurieren.

Seite 36 von 38


TabPanel

Das Tabbing ist eine inzwischen sehr verbreitete Struktur, um Inhalt auf engem Raum kategorisiert abrufbar zu machen. Mit dem TabPanel von Ext lässt sich das sehr leicht in eine Webseite einbinden.

Tree

Durch das Tree-Element lassen sich Baumstrukturen anhand verschiedenster Datenquellen anzeigen und verändern. Mittels »Drag and Drop« können, Elemente beliebig verschoben oder die Reihenfolge geändert werden. Das Aussehen des Elements, das Icon der Einträge und auch die Strukturlinien können, an die eigene Umgebung und Bedürfnisse angepasstwerden. Die Quelle der Daten, aus der das Tree-Element gefüllt wird, ist recht flexibel.

Seite 37 von 38


Menü

Was wäre eine Anwendung, ob im Internet oder auf dem Desktop, ohne ein strukturiertes und übersichtliches Menü? Das Menü-Element von Ext bringt alle Möglichkeiten eines normalen »Desktop-Menüs« mit. Wie auf dem Bild zu sehen sind geschachtelte Strukturen, genauso wie Auswahl oder Schaltoptionen, möglich. Auch eine Toolbar ist in dem Menü-Element integriert.

Ext finden Sie im Internet unter: http://extjs.com

Seite 38 von 38

Documents

Entwicklung von professionellen Webanwendungen mit PHP