ilimitado Web Entwickler Blog

Dank eines Festplattencrash musste ich mal wieder mein System neu installieren, also nutze ich hier die Gelegenheit einmal zu notieren, wie meiner Ansicht nach eine gute Entwicklungsumgebung, kurz IDE, für Webdesigner, auf Basis von Eclipse aussehen kann, wie man die Entwicklungsumgebung einrichtet und was eine Eclipse IDE so alles bieten kann…
Denn, letztendlich finde ich Eclipse zwar lange noch nicht perfekt, aber es ist meiner Ansicht nach der beste php Editor am Markt und kostenlos, individuell anpassbar und rein theoretisch dank Open Source sogar “umprogrammierbar”. Da es in Java programmiet ist läufts natürlich auch unter Linux!
Bei Interesse, stelle ich außerdem im Lauf der Woche einfach mal vor, welche Tools ich sonst noch so im Einsatz habe für die Homepage Entwicklung und dem Alltag im Internet.

Die Basis, Eclipse 3.2.2 von EasyEclipse for PHP:
Eclipse ist eine Open Source Framework, programmiert in Java und prinzipiell für Software Entwicklung geschaffen. Hauptsächlich bekannt ist Eclipse als Entwicklungsumgebung für Java selbst. Dank einer sehr guten Plugin Unterstzützung und dem weitreichenden Angebot an Plugins, vor allem auch für Webdesigner kann man mit Eclipse also auch Homepages entwickeln.
(Wer noch nie von Eclipse gehört hat dem sei mal der Workshop zu Eclipse auf admin-wissen.de empfohlen.)
Gut, was braucht man dafür alles? Da wäre als erstes natürlich das Eclipse SDK 3.2.2 selber. Ich entscheide mich hier aber für ein bereits mit den wichtigsten Plugins ausgestattetem Paket. Das bekommt man auf der EasyEclipse for PHP Hompage.
Nach dem Download wird das Paket einfach installiert. Danach startet man nun mal das Programm. Dort muss als erstes der sogenannte Eclipse Workspace ausgewählt werden. Was das ist? Nun einfach ein Ordner, in welchem die Programme, Projekte, Homepages und so gespeichert werden sollen, werde da später noch drauf eingehen.

Die Plugins – Wie man Eclipse zur IDE für Webdesigner macht
Von einer Entwicklungsumgebung für Webdesigner ist jetzt noch nicht viel zu sehen. Wir müssen die IDE nun durch Plugins und Einstellungen erweitern. Als erstes wird mal im Menü unter “Window” -> “Open Perspective” -> “Other” die PHP Perspektive aktiviert.
Als nächstes kommen die zusätzlichen Eclipse Plugins für Webdesigner. Dabei wird immer gleich vorgegangen, im Eclipse
Menü geht man auf Help -> Software Updates -> Find and Install… dann wird man gefragt was man genau tun will und klickt dann auf “search for new features to install”. Im nächsten Menü kann man nun mit der Schaltfläche “New Remote Site” eine URL angeben zu einem Plugin, welches man installieren möchte. Außerdem empfiehlt es sich einen Haken bei “Automatically select mirrors” zu setzen.
Ok, nun also die Plugins. Als erstes braucht man einen verbesserten Javascript Editor für Eclipse. Dazu fügt man als neue “Remote Site” folgende URL hinzu: http://download.macromedia.com/pub/labs/jseclipse/autoinstall/
Auch verdammt nützlich ist das Multi Clipboard für Eclipse. Damit kann man mehrere Sachen in eine Zwischenablage kopieren und daraus in den Editor einfügen. Url für Eclipse: http://www.bastian-bergerhoff.com/eclipse/features
Um Bilder mal kurz anzuzeigen in Eclipse braucht man QuickImage. Praktisch für Webdesigner, da es zusätzlich die Größe des Bildes und Höhe sowie Breite anzeigt. Url: http://psnet.nu/eclipse/updates
Was braucht man noch? Ein Übersetzungs Plugin wäre praktisch, um mal schnell ein paar Wörter zu übersetzen, wenn man mal weider kein Vernünftigen Klassentitel oder Variablennamen findet. Da sei ein auf bablefish basierendes Plugin hingewiesen. Das muss man runterladen und in den eclipse plugins Ordner entpacken.

Ansonsten sei auf die tutego Homepage verwiesen, dort gibt es eine ausführlich Liste praktischer Eclipse Plugins. Wer direkt nach was sucht, sollte es in der Eclipse Plugin Zentrale versuchen.

HTTP Server (Apache) und Eclipse
Als nächstes möchte man ja seine PHP Proramme auch testen, und zwar local, nicht ständig per FTP Uploads machen und so. Also braucht man einen Localen Webserver, sprich HTTP Server.
Gut, dass es auch hierfür mittlerweile fertige Pakete gibt, nämlich XAMPP von den Apache Friends. Nach dem Download einfach installieren, bzw. entpacken. Auf der XAMPP Dokumentation Homepage ist auch alles perfekt beschrieben.
Man sollte da auch unbedingt lesen wie man XAMPP absichert.
Übrigens, wen es stört immer per http://localhost/ auf seinen Server zuzugreifen kann in der Datei C:\WINDOWS\system32\drivers\etc\hosts einen neuen Eintrag machen, z.B. 127.0.0.1 www.ilimitado.de
Dann kann man im Browser http://www.ilimitado.de/ aufrufen und man kommt nicht auf die Seite, welche im Internet liegt, sondern auf sein lokales XAMPP Verzeichnis. Das ist natürlich mit Vorsicht zu genießen!
Jedenfalls kann man nun auf der XAMMP Seite unter http://localhost/ erstmal XAMPP konfigurieren und unter http://localhost/phpmyadmin/ ist sogar schon phpMyAdmin installiert um Datenbanken zu pflegen. Zu allem sind genügen Dokumentationen verlinkt.
Gut, jetzt wollen wir die eigene Homepage lokal testen, dazu muss sie innerhalb des XAMMP Verzeichnisses im Ordner htdocs einfach in einen neuen Ordner, z.B. development kopiert werden. Dann kann man über http://localhost/development/ auf sie zugreifen.
Ok, zurück zum Eclipse, es macht total Sinn den Eclipse Workspace auf das htdocs Verzeichnis von XAMPP, bzw den neu angelegten development Ordner zu legen. Dazu klickt man in Eclipse auf “File” und dann “Switch Workspace”. In Eclipse gibt es ausserdem in der PHP Ansicht Buttons in der Leiste für XAMPP! Die Konfigurieren wir nun unter dem Menü “Window” -> “Preferences” dann zu “PHPeclipse Web Development” -> “PHP External Tools”. Hier tragen wir den Pfad zum PHP Interpreter ein. Diese liegt ausgehend vom XAMPP Verzeichnis im Ordner php und heißt, wen wundert’s php.exe. Beim Parser Command wird der Pfad ebenfalls angepasst. Das Menü lässt sich per klick auf das + Symbol noch aufklappen und unter Apache, MySQL und XAMPP geht’s weiter. Hier einfach auch wieder die Pfade anpassen. Jetzt können wir über die XAMPP Buttons aus Eclipse heraus den Apache und MySql Server starten und stoppen. Das ist total praktisch, denn hängt sich mal ein PHP Script auf, ist schnell und unkompliziert alles gestoppt und (neu) gestartet.
Als letztes noch den Pfad für den Eclipse internen Browser anpassen unter dem Menü “Window” -> “Preferences” dann zu “PHPeclipse Web Development” -> “Project Defaults” unter Localhost müssen die Unterordner bis zum Eclipse Workspace angegeben werden, in meinem Fall http://localhost/development/
Jetzt werden im PHPBrowser von Eclipse PHP Dateien immer automatisch geöffnet – fertig ist die Preview!

Wie man sich in Eclipse zuhause fühlt
So, nun können wir also PHP, HTML, CSS, Javascript in Eclipse programmieren und dank XAMPP testen. Jetzt brauchen wirs noch ein wenig Komfortabler.
Es sind nun für manche Dateien, z.B. XML und JavaScript mehrere Editoren installiert. Mal ist der Eine besser, mal der Andere. Man kann aber sehr leicht über “Window” -> “Preferences” -> “General” -> “File Associations” auswählen welche Editoren für welche Dateiendung vorgeschlagen werden sollen und welches der Standard ist. Dann klickt man mit rechts auf ein Datei im Navigator und sagt “open with” und kann einen Editor auswählen oder ganz normal per Doppelklick die Datei im default Editor öffnen.
Es wäre sogar denkbar einen externen Editor, welcher nicht in Eclipse registriert ist auszuwählen.
Ich nehme für CSS den CSS-Editor, für JavaScript JSEclipse, und für XML den XML Editor (kaum sichtbar, aber unten links kann man zwischen der XML Design und XML Source Ansicht noch switchen) als default.
Die meisten Editoren machen wunderschöne Code Vorschläge wenn man <strg> und <leertaste> drückt. Das spart enorm Tipp- und Denkarbeit.

So, nun aber ans PHP programmieren. Wir klicken uns durch das Menü nach “Window” -> “Preferences” dann zu “PHPeclipse Web Development”. Hier gibt’s viele Untermenüs zum einstellen, wie sich der PHP Editor verhält. Wichtig dabei, ob Tabs oder Leerzeichen verwendet werden, nach wieviel Zeichen ein Zeilenumbruch stattfinden soll…
Unter Help trägt man den Pfad zur php Hilfe Datei (runterladen kann man die unter: http://de.php.net/get/php_manual_de.chm/from/a/mirror) ein, setzt den Haken bei “show Help in *chm format” und passt das PHP HELP command an zu hh.exe “mk:@MSITStore:{0}::/de/function.{1}.html”. Jetzt kann man im PHP Editor einfach einen PHP Befehl markieren und <shift> + <strg> + <h> drücken und man landet in der Dokumentation zu diesem Befehl.

Als nächstes kommt der Zeichensatz, als Webdesigner ist das sehr wichtig, wir stellen ihn auf UTF-8 unter “Window” -> “Preferences” -> “General” -> “Workspace” -> “Text file encoding” -> “Other” -> “UTF-8″.

Weil wir grade in den Optionen sind unter “Preferences” -> “General” aktivieren wir “Show Heap Status” und sehen ab sofort in der unteren Eclipse Leiste, wieviel Speicher Eclipse grade belegt,.. wird das zuviel hilft nämlich oftmals ein Neustart, oder ein Klick auf den Mülleimer danaben.

Weiter geht’s, unscheinbar, aber wichtig ist im Eclipse unten links das kleine Icon mit gelbem Plus. Es öffnet ein Menü in welchem wir auf “Other…” klicken. Es öffnet sich ein Fenster, wo sich jeder durchklicken kann und nun aktivieren kann, was er denkt was man so brauchen könnte. Diese Plugins öffnen sich alle als Fenster irgendwo auf der Arbeitsfläche muss man manchmal kurz suchen aber man kann in Eclipse jedes Fenster einfach mit der Maus packen und woanders hinziehen, verankern oder loslösen einfach mal probieren und rum schieben…. Also, ich wähle aus der Rubrik General zunächst “Snippets”, damit kann man Codeabschnitte (Schnipsel eben) dauerhaft speicher und immer wieder abrufen.
Weiter geht’s mit der Multi Clipboard, befindet sich in der gleichnamigen Rubrik. Diese kann unter “Window” -> “Preferences” -> ” Multi Clipboard” noch konfiguriert werden. Unter “Window” -> “Preferences” -> “General” -> “Keys” können Tastenkombinationen angeschaut und geändert werden, die wichtigsten sind <alt> + <c> um etwas in die Ablage reinzukopieren und <alt> + <v> und dann eine Zahl von 1 bis 9 für das erste bis neunte Element im Clipboard und <strg> + <shift> + <v> um die Multi Clipboard anzuzeigen.
Als letztes noch unter Translator den Translator.
Jetzt haben wir es dann fast, es folgt noch ein Klick auf “Window” -> “Customize Perspective”. Hier passen wir Submenüs, und so weiter an. Dem Submenü New füge ich hinzu: XML und Web. Open Prespective wird ergänzt um PHP, SVN Repository und Resource, das Submenü “Show View” bezieht sich auf diesen kleinen Button unten links im Eclipse,… ich lass es wie es ist. Gut, schalten wir um auf Commands. Hier wird die Toolbar definiert. Hier aktivier ich SVN – das war’s.
Unter “Window” -> “Save Perspective As” speicher ich nun die Einstellungen ab.

Was noch fehlt ist ein Versionshaltungsmanagement. Ich bevorzuge Subversion (SVN) (hä, was ist denn Subversion?). Das SVN Plugin konfigurieren wir in “Window” -> “Preferences” -> “Team” -> “SVN”. Das SVN Interface wird auf JavaSVN(Pure Java) umgestellt. Dann kann man die Perspektive “SVN Repository Exploring” oben rechts in Eclipse über den Button mit dem gelben kleinen Plus Sysmbol öffnen und eine neues SVN Repository dem Eclipse Workspace hinzufügen. Wer SVN kennt sollte ab hier alleine weiterkommen. Einfach den Pfad zum Repository eintragen und im Nächsten Fenster Portnummer für SSH oder was auch immer einstellen und evtl. Keyfile und Passwort und natürlich Benutzername eintragen, speichern, fertig. Jetzt kann man einzelne Ordner oder auch alles als Eclipse Projekt auschecken und in die PHP Ansicht wechseln und endlich loslegen
Ansonsten einfach mal in die Subclipse FAQ schauen.

Dazu ein paar Tipps, jeder Eclipse Editor hat ein Umfangreiches Kontextmenü, erreichbar über die rechte Maustaste. Einfach mal anschauen und testen!
Extrem hilfreich ist im Navigator die Möglichkeit über das rechte Maus Menü auf einen Ordner klicken und Restore form local history auswählen. Hier können unterschiedliche Versionen von gelöschten Dateien wieder hergestellt werden. Ausserdem kann über replace with,… eine Datei aus der localen History, also die Version von vor einer Stunde als z.B. noch alles tat wieder hergestellt werden.
Die SVN funktionen verstecken sich übrigens unter dem rechte Maus Menü “Team”.
So zum Schluß noch, wie starte ich aus Eclipse heraus den Firefox, Opera oder einen sonstigen Browser? Ganz einfach, man klickt zunächst mal auf im Menü auf den Grünen “play” Button mit der roten Tasche drunter, nennt sich “Run External”, da legt man unter Program einen neuen Eintrag an. Ich nenne ihn Firefox starten, “Location” ist die firefox.exe. Als “Arguments” ist -url “localhost\development${resource_path}” anzugeben, da bekanntlich meine Projekte alle in http://localhost/development/ liegen, und die eclipse Variabel ${resource_path} enthält praktischer Weise den relativen Pfad und den Dateinamen der aktuell im Editor geöffneten Datei.
Einmal angelegt, kann man nun über die Schaltfläche den neuen Eintrag Firefox starten aufrufen – fertig

Hier noch ein Screenshot, wie mein Workspace so aussieht, einmal für einen normalen Monitor, und einen mit 2 Monitoren (äußerst empfehlenswert).

Im Übrigen, Eclipse speichert all die Einstellungen Workspace abhängig, wechselt man den Workspace muss man alles wieder neu anpassen oder man kopiert sich einfach den versteckten Ordner “.metadate” in den neuen Workspace

Achja, und wenn man schon so viel angepasst hat, das man sich schon fast wie daheim fühlt, dann wärs doch für die vollendung des WErkes total cool das Starbild (splash screen) von Eclipse an zu passen. Das ist auch gar kein Problem, einfach im Eclipse Ordner unter unter “plugins” einen Ordner wie org.eclipse.platform_3.2.0.v20060601 suchen, dort befindet sich die splash.bmp, diese einfach durch eine Eigene ersetzen und schon startet Eclipse mit einem individuellen Startbild

Übrigens, hatte ich es erwähnt? Einmal eingerichtet kann man den Eclipse Ordner einfach auch auf einen anderen Computer kopieren und dort nutzen, eventuell sind Pfade in den Optionen anzupassen aber prinzipiell muss mans echt nur rüberkopieren – fertig.

Weiterführende Literatur, also Bücher zu Eclipse: