Schlagwort: Software

Eclipse IDE für Webentwicklung

24. Mai 2010

Eclipse IDE für Webentwicklung
Eclipse ist eine integrierte Entwicklungsumgebung (engl. integrated development environment), kurz gesagt ein Anwendungsprogramm für die Entwicklung von Software. Ursprünglich dafür gedacht, Java Programme zu schreiben, lässt sich Eclipse dank vieler Erweiterungen auch für ganz andere Programmiersprachen einsetzen. Im Bereich Webentwicklung mit Sprachen wie PHP, SQL, XHTML, CSS und Javascript stehen eine ganze Reihe solcher Erweiterungen zur Verfügung. Dieser Artikel beschreibt ein mögliches Szenario zum Einsatz von Eclipse als Werkzeug für Webentwickler. Entstanden ist diese “erweiterte Installationsanleitung” von Eclipse (und einigem, was man sonst noch für die Webentwicklung braucht) im Rahmen der Webdeveloper Schulung bei CBW. Die Beschreibungen beziehen sich dabei auf ein Windows XP Betriebssystem, lassen sich aber zum großen Teil auch auf andere Betriebssysteme übertragen.

Das Ziel: Eine Programmoberfläche zur Bearbeitung von PHP, HTML, CSS und Javascript Dateien in Form von Projekten, die Verwaltung von Datenbanken (alles mit Eclipse) sowie Sicherung von Code bzw. ganzen Projekten (Eclipse und SVN). Hauptaugenmerk liegt dabei auf einem lokalen, autarken System, dass vom einem Einzelanwender genutzt wird. Daher wird nachfolgend auch ein Webserver (Apache) inklusive der Sprachen PHP und PERL sowie MySQL als Datenbank (alles über XAMPP) in die Installationsbeschreibung aufgenommen.

Schritt 1: Die Vorbereitung, benötigte Software

  1. Eclipse + JRE: Das Basispaket von Eclipse, verfügbar unter: http://www.eclipse.org/downloads/ (Classic wählen). Dieses Paket ist OpenSource und für jeden kostenfrei. Da Eclipse selbst in Java geschrieben wurde, braucht es Java Runtime Enviroment (JRE), sollte JRE noch nicht auf dem Betriebssystem installiert sein, finden Sie diese unter: http://java.com/de/download/manual.jsp
  2. Tortoise SVN: TortoiseSVN ist ein kostenloser und freier Windows-Client für den Versionsverwaltungs-Dienst Subversion. TortoiseSVN ist als Shell-Erweiterung implementiert, es integriert sich in den Windows-Explorer und ist daher auch außerhalb und unabhängig von einer Integrierten Entwicklungsumgebung (IDE) verwendbar. Zu finden unter: http://tortoisesvn.tigris.org/, unter dem Abschnitt Installieren finden Sie weitere Informationen über SVN.
  3. XAMPP: XAMPP ist eine Distribution von Apache, MySQL, PHP und Perl, die es ermöglicht diese Programme auf sehr einfache Weise zu installieren. Zu finden unter: http://www.apachefriends.org/de/xampp.html bzw. http://www.apachefriends.org/de/xampp-windows.html für die Windows Version, nutzen Sie der Einfachhalt halber die “Installer” Variante – diese Beschleunigt den folgenden Installationsprozess noch einmal.

Schritt 2: Installation

  1. Die “Installation” von Eclipse: Sofern JRE noch nicht installiert wurde, installieren Sie zunächst JRE auf dem Betriebssystem. Eclipse selbst benötigt im eigentlichen Sinne keine Installation. Sie kopieren die entpackten Inhalte einfach in das Zielverzeichnis Ihrer Wahl (z.B.: Programme/eclipse), und starten Eclipse über den Aufruf der Datei: eclipse.exe.
  2. Die Installation von XAMPP: Der einfachste Weg XAMPP zu installieren ist die Installer-Variante. Starten Sie die heruntergeladene Datei durch einen Doppelklick und folgenden den Dialoganweisungen. Sie werden zunächst aufgefordert, ein Installationspfad (Zielverzeichnis) anzugeben, sollte dieses Verzeichnis nicht vorhanden sein, so wird es erstellt. Je nach Ihren Nutzer-Rechten sollten Sie XAMPP in einem Verzeichnis anlegen, in das Sie auch schreiben dürfen (dieses gilt insbesondere für Windows Vista, oder Windows 7). Nachdem der Installationsprozess die Dateien in das entsprechende Zielverzeichnis entpackt hat, besteht noch die Möglichkeit, Apache, MySQL und Filezilla FTPD als Dienste zu installieren. Dies hätte zur Folge, dass der Webserver (Apache), der Datenbankserver (MySQL) und FTP-Server (Filezilla FTDP) automatisch mit dem Start des Betriebssystems gestartet werden würden. Das macht nur bei sehr regelmäßiger Nutzung Sinn, ggf. können Sie die Anwendungen auch noch zu einem späteren Zeitpunkt zu den Windows-Diensten hinzufügen.
  3. Die Installation von Tortoise SVN: Apache Subversion (SVN) ist eine freie Software zur Versionsverwaltung von Dateien und Verzeichnissen. Dabei wird ein Dateibaum in einem zentralen Projektarchiv (engl. repository) abgelegt – ein Repository ist eigentlich nichts als ein Dateiserver, mit dem entscheidenen Unterschied, dass sich das System an jede Änderung erinnert, die jemals an den Dateien und Verzeichnissen vorgenommen wurden. Eigentlich geschaffen, um ein verteiltes Arbeiten an einem Projekt zu ermöglichen, es lässt sich aber ebenso gut für ein lokales Sicherungszenario nutzen. Der Subversion Client Tortoise SVN unterstützt die Protokolle HTTP, HTTPS, SVN, SVN + SSH und kann alternativ direkt mit Dateien arbeiten – eben diese Variante dient im weiteren als Sicherung für die Webprojekte. Starten Sie die Installation über einen Doppelklick auf die Datei und folgen Sie den Anweisungen. Nach der Installation muß der Rechner einmal neu gestartet werden, erst dann steht Ihnen der Tortoise SVN Client zur Verfügung.

Schritt 3: Die Eclipse IDE erweitern

Bisher wurde ausschließlich das “Basispaket” von Eclipse installiert – eine Entwicklungsumgebung, die für die gewünschte Zielsetzung (noch) nicht geeignet ist. Um Eclipse “Webentwicklungs-tauglich” zu machen, sind einige Erweiterungen zu installieren:

  1. PDT (PHP Development Tool): aus dem Hause Zend. Öffnen Sie dafür Eclipse und wechseln zu Help > Install New Software. Wählen Sie dort die http://download.eclipse.org/releases/galileo update Seite aus, und dort unter der Option Web, XML, and Java EE Development den Eintrag PHP Development Tools (PDT) SDK Feature Klicken Sie auf next und folgen den Anweisungen. Nach der Installation starten Sie Eclipse neu.
  2. Subclipse: Um das unter Tortoise SVN bereits beschriebene Versionsmanagement in Eclipse zu nutzen braucht man die Ertweiterung Subclipse. Zur Installation können Sie auf die gleiche Weise verfahren wie bei PDT. Über Help > Install New Software, hier geben Sie als neuen Remote Server: http://subclipse.tigris.org/update_1.6.x an, wählen die Option Subclipse und folgen den Anweisungen.
  3. Quantum-DB: ermöglicht die Kommunikation mit Datenbanken. Geben Sie als Remote Server: http://quantum.sourceforge.net/update-site an, und wählen das entsprechende Plugin. Je nach Eclipse- und QuantumDB-Version benötigen Sie eventuell zusätzlich das ‘Graphical Editor Framework (GEF)’-Plugin. Folgen Sie den Anweisungen und starten am Ende ihr Eclipse neu.
    Für die Kommunikation mit einer Datenbank bedarf es noch einen entsprechenden JDBC Treiber. Für MySQL: http://dev.mysql.com/downloads/connector/j/ und für MS SQL Server: http://msdn.microsoft.com/data/jdbc/. Laden Sie sich die entsprechenden Dateien herunter, und extrahieren Sie den Inhalt in ein Verzeichnis auf dem Rechner. Die Einrichtung wird dann wieder in Eclipse vorgenommen.
  4. Aptana: Das Apatana Eclipse Plugin entspricht in seinem Leistungsumfang weitesgehend dem eigenständigem Aptana Studio. Es liefert einige Funktionaliäten im Bereich der Frontend Entwicklung (HTML, CSS, JavaScript). Wechseln Sie wieder auf: Help > Install New Software und geben als Adresse: http://update.aptana.com/install/studio an, folgen den Anweisungen und starten dann Eclipse neu. Es erscheint ein Konfigurationsdialog über den Sie die verschiedenen Aptana Komponenten auswählen können. Deaktivieren Sie hier alle Optionen für Rails, Python und Subversion / Subclipse. Bei den Ajax Bibliotheken (Jquery, Dojo usw.) wählen Sie nach ihren eigenen Präferenzen aus. Diese Einstellungen lassen sich auch später noch ändern.

Mit diesen Erweiterungen wird Eclipse zur IDE für einen Webentwickler, der sowohl serverseitig (PHP, SQL) als auch Clientseitig (HTML, CSS, Javascript) arbeitet. Durch die Erweiterungen enthält ihre Eclipse Installation eine ganze Reihe neuer “Perspektiven”, die Sie über Window > Open Perspective > Other… öffnen können. Perspektiven sind eine Sammlung von einzelnen Dialogen (den Views), es gibt vorgefertigte, bspw. PHP, oder Aptana und die Möglichkeit eigene Perspektiven zu laden bzw. zu speichern. Innerhalb einer Perspektive lassen sich über Window > Show View > Other… weitere Dialoge zu einer Perspektive hinzufügen. Die einzelnen Dialoge sind dabei frei bewegbar, lassen sich an Gruppen (über Reiter) andocken sowie ein- und ausklappen.
Die “normalen” Arbeitsperspektiven sind PHP und/oder Aptana, hier werden Projekte angelegt und verwaltet. Dabei sollten Sie darauf achten, nicht zu viele Projekte gleichzeitig offen zu haben. Die Projekte werden abhängig von dem gewählten Workspace angelegt, idealerweise sollten Sie diesen also gleich auf die Webroot ihrer XAMPP Installation setzen (/xampp/htdocs). Ändern können Sie den Workspace übrigens über: File > Switch Workspace.
Nach dieser Grundinstallation fehlt noch der Feinschliff, die Konfiguration des Systems. Dieses geschieht über Window > Preferences, Handbuch und Hilfe sind ein guter Einstieg in die unzähligen Konfigurationsmöglichkeiten. So lassen sich bspw. Highlight-Farben, Standard-Editoren, Text-Encoding, Code-Debugger, Web-Browser usw. einstellen.

Weiterführende Artikel:

Herstellen einer Datenbank Verbindung mit Quantum-DB

  1. Wechseln Sie über Window > Open Perspective > Other… und wählen die Quantum DB Perspective.
  2. Klicken Sie auf das neue Lesezeichen-Symbol in der Datenbank Ansicht und dort auf Add driver und wählen Sie aus der Auswahlliste MySQL.
  3. Klick auf Add external jar und wählen Sie über den folgenden Dateiauswahl Dialog den mysql-connector-java-5.1.8-bin.jar. Bestätigen Sie über Open.
  4. Rechts von der Class name box, klicken Sie auf den Browse button. In dem Select a Driver Dialog, wählen Sie den com.mysql.jdbc.Driver, bestätigen Sie die Auswahl.
  5. Auf der Seite Connection Details, geben Sie Ihren Benutzernamen und Ihr Passwort ein (falls nötig) und dem Datenbank-Namen, mit der Sie sich verbinden wollen.

Ein Projekt lokal versionieren, der Einsatz von SVN

Mit Tortoise SVN ein lokales Repository anlegen ist denkbar einfach. Erstellen Sie an beliebiger Stelle auf ihrem System einen neuen Ordner, und wählen über das Kontextmenü die Option Tortoise SVN > Create Repository here…, das war es schon.
Wechseln Sie nun wieder zu Eclipse. Öffnen Sie über das Kontextmenu eines Projektordners den Eintrag Team > Share Project… und dann SVN (nicht CVS) aus. Dann wählen Sie Create new repository location aus und geben auf der folgenden Wizardseite das Verzeichnis des Repositories als URL an (dabei auf die 3 Slashes achten!).

file:///C:/pfad/zum/SVN/Repository

Klicken Sie auf next. Im nächsten Schritt wird die Position innerhalb des Repositories angegeben. Hier kann man entweder den Vorschlag annehmen, den Projektnamen als Unterverzeichnis im Repository nutzen. Oder, wenn man – wie empfohlen trunk – als zusätzliches Unterverzeichnis nutzen möchte, kann man das gewünschte Unterverzeichnis auch selbst angeben (über das Feld Use specified folder name: ). Beenden Sie den Wizard über Finish. Es erscheint der Commit Dialog. Hier können Sie einen Kommentar eingeben und die Liste der einzucheckenden Dateien überprüfen. Nach dem Klick auf OK werden die Dateien in das Subversion Repository unter einer initialen Versionsnummer eingecheckt. Für jede weitere Sicherung des Projektes wählen Sie über das Kontextmenü des Projektordners die Option Team > Commit.

Weiterführende Artikel:

Xdebug – besseres Debugging

In dieser Form ist Eclipse bereits wirklich “Webentwicklungs-tauglich”, aber es geht noch einiges mehr. Debugging, also das Abfangen und Analysieren von Fehlern ist bei jeder Entwicklung ein wichtiger Bestandteil. Xdebug ist ein solcher Deugger. Ein Server, der Client-Verbindungen an einem bestimmten (konfigurierbaren) Port erwartet. Der Xdebug Client agiert dabei als eine Art Fernbedienung für PHP. Der Client teilt PHP mit, zu pausieren, den nächsten Schritt auszuführen oder die Ausführung des gesamten Programms fortzusetzen. Der Xdebug Client ist in der Regel in einem Editor oder IDE (in unserem Fall in Eclipse PDT) eingebettet, so dass man nicht direkt mit dem eigentlichen Fehlerprotokoll arbeitet.
Die für sein System, und seine PHP Version richtige Variante findet man am leichtesten über den find binary Service von Xdebug.
Ist die entsprechende DLL-Datei einmal heruntergeladen und im PHP Extension Ordner abgelegt (z.B. /xampp/php/ext) muss zunächst die php.ini Datei angepasst werden (/xampp/php). Folgende Änderungen sind vorzunehmen:

; ggf. vorhandene Extensions aufjeden fall deaktivieren!
;extension=php_xdebug-2.0.3-5.2.5.dll
;zend_extension_ts = "C:\xampp\php\zendOptimizer\lib\ZendExtensionManager.dll"
;zend_extension_manager.optimizer_ts = "C:\xampp\php\zendOptimizer\lib\Optimizer"
 
[XDebug]
;; Und hier entsprechend der eigenen Pfad- und Dateistruktur eintragen
zend_extension_ts="C:\xampp\php\ext\php_xdebug-2.0.3-5.2.5.dll"
xdebug.remote_enable=1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.profiler_enable=0
xdebug.profiler_output_dir="C:\xampp\tmp"

Speichern Sie die Änderungen und starten den Apache Webserver neu. Nun Eclipse wieder starten und auf Window > Preferences gehen und dort auf PHP > Executables und dort auf Add. Hier einen Namen und den Pfad (xampp/php) angeben und Xdebug auswählen. Anschließend auf auf PHP > Debug gehen und dort Xdebug anstatt Zend auswählen. Schließlich noch ein kleiner Test, ob das ganze auch funktioniert:
Öffnen bzw. Erstellen eines PHP-Projektes, Datei anlegen und folgendes eingeben:

<?php
$variable = "test";
$variable = 24;
$variable = "anderer wert";
?>

Zum Testen einen Breakpoint auf die dritte Zeile setzen, auf den kleinen Käfer klicken. Den anschließenden Dialog, ob für das Debuggen immer die Debug-Perspektive geöffnet werden soll, bestätigen. Wenn alles richtig lief, sollte die Debug-Session starten und ein Pfeil im Code symbolisieren, wo der Debugger gerade ist. Zusätzlich sieht man alle Variablen und ihre Werte.Mit einem Klick auf die gelben Pfeile kann man sich dann mehr oder weniger viel Code ausführen lassen.
Eine ausführlichere Anleitung – und ein Vergleich mit anderen Debuggern findet man in dem Artikel Software-Profiling in PHP von Nils Langner und Mike Lohmann.

Und noch mehr nützliche Eclipse Erweiterungen…

Die meisten Webprojekte enthalten recht viele Bilddateien, gerade wenn man das Frontend zusammenbaut kann ein direkter Blick auf die Bildquellen aslo durchaus hilfreich sein. Eben das ermöglicht die Eclipse Erweiterung Quickimage. Bilder lassen sich damit sowohl in als Einzelansicht als auch als Thumbnails direkt in der IDE ansehen.

Wer gleich noch HTTP Requests in Eclispe analysieren möchte: Solex ist so ein ein Proxy, der HTTP-Requests abfängt und visualisiert. Nützlich, wenn man in einer Anwendung Parameter oder Cookies überprüfen muss. Das Plugin zeigt in einer Baumstruktur alle gesendeten Parameter und den REQUEST-body an.

Zusammenfassung

Die hier dargestellte IDE für Webentwicklung auf Basis von Eclipse für die Sprachen PHP, HTML, CSS und Javascript ist sicher nur eine von vielen möglichen Szenarien. Da gibt es das ZEND-Studio, noch immer die beliebteste IDE – mit einem Preis von derzeit ca. 475,00 Euro für eine Einzelplatzlizenz aber eben nicht ganz “billig”. Mit NetBeans PHP Edition gibt es neben Eclipse eine weitere kostenfreie IDE, sie hat ihre Stärken u.a. bei der Anbindung / Interaktion mit MySQL. Schließlich wäre dann noch das Aptana Studio zu nennen, eine auf Eclipse basierende Entwicklung. Das Aptana Studio schreibt sich “Web 2.0 Development” auf die Fahnen, und bietet in diesem Bereich einiges.
Für welche IDE man sich letztlich entscheidet hängt zu einem guten Teil von den eigenen Vorlieben ab, und lässt sich weniger durch die Leistungsfähigkeit der Entwicklungsumgebungen begründen. Eclipse hat den Ruf an der ein- oder anderen Stelle etwas “zickig” zu sein, und die Vielfalt an Erweiterungen, deren mögliche Kombinationen und ggf. auch negativen Wechselwirkungen fordern sicher zum Lesen vieler Foren- und Blogbeiträge, Dokumentationen und Installationsvoraussetzungen. Für viele bleibt sie trotzdem die IDE schlechthin, und meiner Meinung nach ist die oft kritisierte Vielfalt und Konfigurierbarkeit kein Nachteil, sondern bietet mir die Möglichkeit ein System nach meinen Vorstellungen aufzusetzen.

Themen: Webentwicklung
Kommentieren