Also, ursprünglich sollte es bei NULL losgehen. Da XAMPP mit Joomla! 6 nicht mehr nutzbar ist, setzt dieser Artikel voraus, dass ein Apache-Webserver mit PHP, Datenbank und z.B. phpMyAdmin zur Datenbankverwaltung entsprechend den aktuellen Anforderungen von Joomla! installiert ist. Ob XAMPP-Lite funktioniert, ist nicht getestet. Anleitungen für LAMP-Server mit Ubuntu oder Raspberry Pi sind mehrfach im Internet beschrieben, so dass ich darauf an dieser Stelle verweise.
Entwicklungsumgebung aufbauen
Datenbank anlegen
Vor der Installation von Joomla! muss bereits eine Datenbank vorhanden sein. Wenn der lokale Webserver unter localhost erreicht wird, öffnet man zum Anlegen der Datenbank im Web-Browser die Seite localhost/phpmyadmin/. Hier muss für Joomla! eine neue Datenbank angelegt werden.
Ein Klick auf Neu bewirkt, dass rechts eine neue Datenbank angelegt werden kann. Für das weitere Vorgehen nenne ich sie joomla. Laut Installationsanleitung muss die Kollation auf utf8mb4_unicode_ci gesetzt werden.
Joomla! in Betrieb nehmen
Für Joomla! wird das aktuelle Installationspaket herunterladen. Die Startseite der Dokumentation hat einen Link auf die Installationsanleitung. Sieht man genau hin, erkennt man, dass sie für Version 4 erstellt wurde. Mal sehen, was sich geändert hat!
Die heruntergeladene Installationsdatei öffnet man mit einem Doppelklick. Oben rechts erscheint die Schaltfläche Alle extrahieren. Ein Klick darauf öffnet den Dialog zur Festlegung des Installationsorts.
Je nach Installation des lokalen Webservers wird die URL localhost auf einen bestimmten Ordner im Dateisystem übersetzt. Dies ist das Wurzelverzeichnis der lokalen Installation. Dort legen wir für unsere Joomla! – Installation einen Ordner joomla an. Das bedeutet, dass unser lokales Testsystem unter localhost/joomla aufgerufen wird.
Als nächstes extrahiert man das Installationspaket in den gerade angelegten Ordner. Das Bild entstand noch mit der XAMPP-Testumgebung.
Jetzt können wir uns überlegen, wie wir während des Entpackens die Wartezeit überbrücken wollen.
... warten...
Zur Installation ruft man einfach die URL der Webseite auf, also hier localhost/joomla. Der Server arbeitet einige Zeit im Hintergrund, bis die Eingabefelder für die Installation erscheinen.
Ändert man hier die Sprache auf German (Germay) | Deutsch (Deutschland), so werden die abweichenden Sprachdateien sofort im Hintergrund nachgeladen. Leider bezieht sich das nur auf die Installationsoberfläche. Im anschließenden System ist zunächst einmal nur Englisch verfügbar.
Nach Eingabe der Zugangsdaten des Super Benutzers wird die Datenbank eingerichtet.
In der lokalen Testumgebung XAMPP ist root der Datenbank-Benutzer, und er hat kein Passwort.
Als Namen der Datenbank hatten wir joomla gewählt. Für dieses Beispiel lege ich na_ als Präfix fest.
Dann lässt man die Installation laufen.
... warten...
Wenn das erfolgreich erledigt ist, wird man beglückwünscht und gleich auf Verbesserungsmöglichkeiten verwiesen.
Versucht man das Backend zu öffnen, erscheint noch eine Fehlermeldung:
Das Verzeichnis „installation“ konnte nicht gelöscht werden. Bitte das Verzeichnis manuell löschen.
Dem lässt sich nachkommen. Es handelt sich um den leeren Ordner localhost/joomla/installation.
Optimierungen
Um PHP geeigneter einzustellen öffnet man (im XAMPP Control Panel in der Zeile Apache mit der Schaltfläche Konfig) die Datei php.ini. Eine Suche nach intl landet sofort im Bereich der Extensions. Hier löschen wir das kommentierende Semikolon vor intl und gd, zip steht weiter unten. (In den Linux-Installationsbeschreibungen hat man das meistens schon im Vorfeld erledigt!)
In einer Testinstallation sollte man sich Fehler anzeigen lassen. Den Buffer lasse ich auch erst einmal unverändert. Zumal diese Werte in der globalen Konfiguration ausgeschaltet sind. Nach dem Speichern der Datei muss der Server beendet und erneut gestartet werden.
Sprache nachladen
Nachdem man sich über die URL localhost/joomla/administrator wieder im Backend angemeldet hat, stellt man fest, dass dort weiterhin alles auf englisch ist. Im linken Menü kommt man über den Punkt System zum System Dashboard. Dort lässt sich in der Mitte unter Manage der Link Languages aufrufen. Auf der sich dann öffnenden Seite sieht man die installierten Sprachen und kann oben mit der Schaltfläche Install Languages weitere nachinstallieren. Die verfügbaren Sprachen stehen in einer Liste auf der folgenden Seite. Deutsch wird durch die Schaltfläche Install vor German de-DE gewählt.
Um Deutsch als Standardsprache festzulegen, geht man oben auf die Schaltfläche Manage Languages und betätigt den Radio-Button in der Spalte Default. Danach ist das Frontend auf Deutsch umgestellt.
Anschließend muss die Sprache auf die gleiche Weise auch noch für den Administrationsbereich umgeschaltet werden.
Responsive Bilder ermöglichen
Ich habe bereits an anderer Stelle auf die Erweiterung „Responsive Images“ hingewiesen. Sie sorgt dafür, dass zu Bildern je nach Bildschirmgröße die passende Datei übertragen wird. Um sie zu installieren, ruft man im linken Menü unter System links im Bereich Installieren den Punkt Erweiterungen auf. Man wählt rechts oben Aus Webkatalog installieren und gibt im Suchfeld responsive images ein. Dort landet man allerdings bei der älteren Version 4.2.6, zur aktuellen kommt man über die Schaltfläche Dokumentation. Vor dort lädt man sich das Paket herunter. Anschließend wiederholt man System → Installieren → Erweiterungen und bleibt bei Paketdatei hochladen. Dann wählt man die gerade heruntergeladene Datei aus und installiert sie. Unter Erweiterungen verwalten sieht man, dass sie direkt aktiviert wurde.
Als nächstes müssen die Parameter der Erweiterung eingestellt werden. Dazu geht man über das linke Menü System zum System-Dashboard und dort in die Mitte unter Verwalten zu Plugins und öffnen durch Klick auf Content - Responsive Images dessen Einstellungen. Im mittleren Register Behaviour verwende ich die Image sizes 360, 768, 1080, 1536, 2048, 2560, 3840, die einen Kompromiss darstellen hinsichtlich der Anpassung an die kaufbaren Bildschirmgrößen. WebP Image quality habe ich wie bei JPG auch auf 85, im direkten Vergleich fällt der Unterschied zum Standardwert 60 auf. Alles andere lasse ich unverändert. Mit Speichern & Schließen werden die Änderungen beendet.
Editor einstellen
Nachdem ich einige Versuche mit alternativen Editoren durchgeführt habe, bin ich doch wieder beim TinyMCE gelandet, weil die Alternativen nur in den kostenpflichtigen Varianten einen Mehrwert bieten. Wo wir aber gerade im System beim Verwalten der Plugins waren, ändern wir dort noch eine Einstellung beim TinyMCE und schalten das Kontextmenü Aus. Damit erhalten wir das Kontextmenü des Betriebssystems zurück.
Erste Inhalte bereitstellen
Zur Entwicklung des Templates werden einige Inhalte benötigt. Es gibt Beispielinhalte von Joomla, aber es erscheint im Hinblick auf die Layout-Entwicklung günstiger, eigene Inhalte zu verwenden. Der Beitrag zur Turmbesteigung des Aachener Doms ist relativ übersichtlich aufgebaut, sodass dafür ein großer Teil des Stylings bereits durch die grundlegenden Einstellungen abgedeckt sein wird.
Bevorzugt arbeite ich so, dass ich zuerst die verfügbaren Bilder aufbereite. Anschließend entsteht der Text und es entscheidet sich, welche Bilder dazu passen. Bei der Turmbesteigung war die Ausbeute an Bildern allerdings so gering, dass auf keins verzichtet wurde.
Medienordner
Ich hatte schon erwähnt, dass auf netzalben.de der Übersicht halber zu jedem Album ein eigener Medien-Ordner angelegt wird. Nach Anwahl von Neues Verzeichnis anlegen kann man den Namen eingeben. Bei netzalben.de entspricht er der URL des Beitrags, zu dem er gehört.
Der Ordner erscheint im Verzeichnisbaum. Durch Doppelklick auf den Ordnernamen wird dieser geöffnet. Die Bilder werden darin beim Hochladen abgelegt.
Beitrag anlegen
Um einen neuen Beitrag zu erstellen, klappt man im linken Menü die Unterpunkte zu Inhalt auf. Man kann dann zuerst auf die Seite der Beiträge gehen und dort die Schaltfläche Neu betätigen, oder man wählt direkt das + am rechten Rand des Menüs.
Zunächst trägt man den Beitragstitel ein. Im Feld Alias steht die URL. Diese wird beim ersten Speichern des Beitrags generiert. Bei Nichtgefallen kann sie von Hand editiert werden.
Für den Beitragsinhalt habe ich von der bestehenden Seite alles markiert und kopiert und nach Aktivierung der Option Als Text einfügen den Zwischenspeicher mit Strg-V in das Eingabefeld eingefügt. Damit erhält man den Text ohne Formatierungen.
Beim Betrachten des Quelltextes (Menüpunkt Werkzeuge → Source Code+) stellte ich fest, dass an einigen Stellen das HTML-Tag <br> eingefügt wurde, statt einen neuen Absatz zu beginnen. Nachdem das bereinigt war, habe ich den ersten Absatz umformatiert zur Kopfzeile 2. So heißt die Überschriftenebene 2 bei Joomla. Wie bei WordPress wird <h1> für den Seitentitel verwendet und <h2> für die oberste Gliederungsebene, usw.
Danach habe ich wiederholt den Cursor an die Stellen gesetzt, wo die Bilder hinkommen und über CMS Inhalt → Medien die Bildauswahl geöffnet. Nachdem man ein Bild ausgewählt hat, wird ein Eingabeformular für zusätzliche Daten eingeblendet. Diese Eingaben werden nur im Beitrag gespeichert. Da die Bilder in diesem Album keine Unterschriften haben, bleibt das Eingabefeld frei.
Auf diese Weise bekommen wir einen Beitrag mit einer sauberen HTML-Struktur, wie es vom TinyMCE in Joomla! erzeugt wird. Die Seite hat eine einfache Struktur: nach der Überschrift kommt Einleitungstext und danach abwechselnd Bilder mit Begleittext. In dieser Abfolge könnten die Inhalte auf einem Smartphone angeboten werden.
Den bisher erstellten Beitrag kann man sich in der Vorschau mit dem Standard-Template Cassiopeia betrachten. Um ihn auch außerhalb der Entwicklung aufrufbar zu machen muss in Joomla! ein Menüpunkt zu ihm führen. Dazu fügt man dem Main Menu über die Schaltfläche + oder über Neu einen Menüpunkt hinzu.
In das folgende Fenster tragen wir als Titel wieder Turmbesteigung Aachener Dom ein. Bei Menüeintragstyp gehen wir auf Auswählen und klappen dann im folgenden Fenster die Unterpunkte zu Beiträge auf. Durch Auswahl von Einzelner Beitrag gelangen wir zurück. Jetzt lässt sich der Beitrag Auswählen. Da es ja erst einen Beitrag gibt, fällt die Wahl nicht schwer. Man kann jetzt das ganze mit Speichern & Schließen beenden oder sich erst noch die ganzen Einstellmöglichkeiten ansehen. Dazu später.
Die zweite Schaltfläche rechts oben im Backend ist mit NetzAlben beschriftet und öffnet im Browser einen neuen Tab mit localhost/joomla. Dort steht jetzt der neue Menüpunkt und führt zum Beitrag in der Cassiopeia-Ansicht.