Das Studienheft und seine Teile sind urheberrechtlich .... JOM01... · Long-Term-Support (LTS) – Langzeitversion Eine LTS-Version löst jeweils die Vorgänger- Langzeitversion ab

$

Das Studienheft und seine Teile sind urheberrechtlich geschützt. JedeNutzung in anderen als den gesetzlich zugelassenen Fällen ist nichterlaubt und bedarf der vorherigen schriftlichen Zustimmung desRechteinhabers. Dies gilt insbesondere für das öffentliche Zugänglich-machen via Internet, Vervielfältigungen und Weitergabe. Zulässig istdas Speichern (und Ausdrucken) des Studienheftes für persönlicheZwecke.

JOM01

Eine Website mit Joomla! erstellen – Teil 1

0515N01

Gerald Keßler

©

Falls wir in unseren Studienheften auf Seiten im Internet verweisen, haben wir diese nach sorgfäl-tigen Erwägungen ausgewählt. Auf Inhalt und Gestaltung haben wir jedoch keinen Einfluss. Wir distanzieren uns daher ausdrücklich von diesen Seiten, soweit darin rechtswidrige, insbesondere jugendgefährdende oder verfassungsfeindliche Inhalte zutage treten sollten.

051

5N01

© SGD, 27.02.17, Dorn, Hans-Peter (772587)

JOM010515N01

Eine Website mit Joomla! erstellen – Teil 1

Inhaltsverzeichnis 0515N01

Einleitung ....................................................................................................................... 1

1 Was ist Joomla! ? .................................................................................................... 3

1.1 Statische und dynamische Webseiten, CMS-Systeme ............................. 4

1.2 Entwicklung von Joomla! ........................................................................... 5

1.3 Das Konzept von Joomla! ........................................................................... 6

Wiederholungsaufgaben .......................................................................................... 9

2 Installation von Joomla! ......................................................................................... 10

2.1 Grundvoraussetzungen und Werkzeuge ................................................... 10

2.2 Lokaler Testserver oder Webserver? ......................................................... 11

2.3 XAMPP für Windows installieren ............................................................. 12

2.4 MAMP für Mac OS ..................................................................................... 17

2.5 Der Ordner „htdocs“ ................................................................................... 20

2.6 Anlegen einer Datenbank unter „phpMyAdmin“ .................................... 21

2.7 Download, Installation und Konfiguration von Joomla! ......................... 22


3 Ein erster Überblick ................................................................................................. 33

3.1 Die Arbeitsstruktur von Joomla! ............................................................... 33

3.2 Der Workflow .............................................................................................. 35

3.3 Erste Schritte im Backend .......................................................................... 36

3.4 System – Konfiguration .............................................................................. 37

3.5 Benutzer – Zugriffsberechtigungen .......................................................... 45

3.6 Menüs ........................................................................................................... 45

3.7 Inhalt – Beiträge, Kategorien, Medien ...................................................... 47

3.8 Komponenten .............................................................................................. 54

3.9 Erweiterungen – Module, Plugins, Templates, Sprachen ........................ 56

3.10 Hilfe .............................................................................................................. 69

3.11 Erste Modifikationen der Website ............................................................. 69


JOM01

Inhaltsverzeichnis


Anhang

A. Lösungen zu den Wiederholungsaufgaben ............................................... 76

B. Glossar .......................................................................................................... 78

C. Literaturverzeichnis ..................................................................................... 80

D. Abbildungsverzeichnis ................................................................................ 81

E. Sachwortverzeichnis .................................................................................... 84

F. Einsendeaufgabe .......................................................................................... 870515N01

JOM01


JOM01Eine Website mit Joomla! erstellen – Teil 10515N01

Einleitung

Joomla! wird hier als einfach verständliches und relativ leicht zu konfigurierendes Con-tent-Management-System (CMS) für Webseiten vorgestellt, das in drei Studienheften das Basis-Know-how zur Erstellung eigener Website-Projekte vermittelt. Mit diesem Wissen können eigene Webprojekte dann selbstständig aufgebaut und gepflegt werden.

Zum Erstellen und Verwalten von redaktionellen Inhalten mit Joomla! benötigen Sie le-diglich einen Browser (Internet Explorer, Firefox, Chrome etc.). Auch wenn das CMS mit der Programmiersprache PHP arbeitet, sind Programmierkenntnisse in PHP zum Bedienen des Systems meist nicht erforderlich. Grundkenntnisse in HTML und CSS sind bezüglich gezielter Anpassungen von Design und Inhalt aber sicherlich von Vorteil. Vo-raussetzung ist auch eine grundsätzliche Erfahrung im Umgang mit einem PC oder Mac und dem Internet sowie ein Grundverständnis üblicher Anwendungen wie etwa Text-verarbeitungsprogramme.

In diesem Studienheft wird das Konzept von Joomla! erläutert und durch die Installation geführt. Dabei ist die Installation eines lokalen Testservers (XAMPP) notwendig – auch diese Schritte werden ausführlich erklärt. Ein erster Überblick macht mit den Struktu-ren, den Menüs sowie den wichtigsten Funktions- und Arbeitsbereichen des Programms vertraut. Am Ende werden ein erster inhaltlicher Beitrag erstellt und die Grundlagen für die weitere Gestaltung und Navigation der Website erläutert.

JOM01 1

Einleitung


2 JOM01

1


1 Was ist Joomla! ?

Der Name „Joomla!“ ist in abgewandelter Schreibweise ein Begriff aus dem Wortschatz der ostafrikanischen Sprache Suaheli und bedeutet so viel wie „gemeinsam“ oder „alle zusammen“. Das Content-Management-System (CMS) Joomla! ist eine serverseitige Software. Joomla! benötigt also entweder einen (entfernten) Webserver eines Providers oder einen lokalen Testserver, wie wir ihn gleich installieren werden.

Joomla! basiert auf der Programmiersprache PHP und dem Datenbankverwaltungssys-tem MySQL. Ebenso wie bei PHP und MySQL handelt es sich bei dem CMS Joomla! um eine Open-Source-Software. Joomla! unterliegt der sogenannten „General Public Licen-se“ (GNU GPL) und kann somit von jedermann kostenlos heruntergeladen und für eige-ne – auch kommerzielle – Zwecke eingesetzt und angewendet werden. (Mehr über die GNU General Public License erfahren Sie auf der Webseite http://www.gnu.de).

Abb. 1.1: Screenshot der Website www.joomla.org

Joomla! ist 2005 aus dem Open-Source-Projekt „Mambo“ entstanden. Es bildete sich eine breite Joomla!-Community, die Joomla! in verschiedenen Arbeitsgruppen gezielt weiter-entwickelte. Aber auch Foren, User Groups, Events, Entwickler und Anbieter funktiona-

JOM01 3

http://www.gnu.de

www.joomla.org

1 Was ist Joomla! ?


ler Erweiterungen, Designvorlagen (Templates), Tutorials etc. sind konstruktive Be-standteile dieser Community. Einen Eindruck vom breiten Spektrum der Community vermittelt die Seite http://community.joomla.org.

Mit der Version 3.0 wurde das „Bootstrap-Framework“ implementiert und so eines der ersten CMS geschaffen, das „mobile ready“ ist. Das heißt, sowohl die Website-Inhalte als auch die Administration sind benutzerfreundlich mit anpassungsfähigem Layout für mobile Endgeräte zugänglich (Stichwort: responsive Webdesign).

1.1 Statische und dynamische Webseiten, CMS-Systeme

Webseiten können statisch sein, das heißt, mithilfe der Auszeichnungssprache HTML wird jede Seite erstellt und auf einem Webserver als einzelnes HTML-Dokument abge-legt, z. B. „produkte.html“, „impressum.html“ etc. Ruft ein Nutzer ein solches HTML-Dokument über seinen Browser mit der entsprechenden URL (z. B. http://www.irgend-was.de/produkte.html) auf, so wird eine Anfrage an den Webserver übermittelt und die angeforderte Datei mit allen zugehörigen Dateien, wie Bildern oder sonstigen Medien zum Browser übertragen und dort angezeigt. Jede weitere HTML-Seite wird dann eben-falls als jeweils einzelnes Dokument in gleicher Weise aufgerufen (Abb. 1.2 A).

Abb. 1.2: Vergleich statischer mit dynamischen Webseiten eines CMS-Systems

Webseiten eines CMS wie Joomla!, Wordpress, Typo3 oder Drupal werden dagegen dy-namisch erzeugt. Im Ergebnis wird dabei ebenfalls HTML-Code zur Darstellung an den Browser gesendet, doch werden die konkreten Inhalte dieser Seite auf dem Server dyna-misch zusammengesetzt. Mit Eingabe der Webadresse (URL) wird in diesem Fall also zu-nächst auf dem Server eine PHP-Seite des CMS-Systems aufgerufen. Dabei werden alle

4 JOM01

http://community.joomla.org

Was ist Joomla! ? 1


zugehörigen Inhalte der Seite aus einer auf dem Server liegenden Datenbank – z. B. MySQL – abgerufen und schließlich als HTML-Seite zusammengebaut. Die fertige HTML-Seite kann dann zurück an den Browser gesendet werden (Abb. 1.2 B).

1.2 Entwicklung von Joomla!

Joomla! hat eine bewegte Vergangenheit und für Außenstehende wirkt die Versionsstra-tegie verwirrend. Dabei setzen die Entwickler auf in der IT bewährte Konzepte – nur lei-der nicht kontinuierlich auf die gleiche Strategie. So wurden Versionen in den Anfangs-zeiten des Projekts nach dem Prinzip „It’s done when it’s done.“ (Es ist fertig, wenn es fertig ist.) veröffentlicht. Bis einschließlich Version 1.6 gab es keine definierten Veröf-fentlichungstermine. Dies hatte den Nachteil, dass neue Versionen oft sehr lange auf sich warten ließen und die Weiterentwicklung von Joomla! ins Stocken geriet. Somit verlor Joomla! zeitweise den Anschluss an die Entwicklungsstände anderer Content-Manage-ment-Systeme.

Nach Version 1.6 wechselte die Release-Strategie zum sog. „Time-based Release Cycle“ (zeitbasierter Veröffentlichungszyklus). Hierbei wird ein Datum festgesetzt, an dem eine neue Version veröffentlicht wird, und nicht wie vorher so lange gewartet, bis alle ange-strebten Features fertiggestellt sind. Außerdem wird nun zwischen zwei Arten von Ver-sionen unterschieden:

Short-Term-Support (STS) – Kurzzeitversion

Diese Versionen werden so lange mit (Sicherheits-)Updates versorgt, bis die jeweils nächste Joomla!-Version erscheint. Hier ist alle sechs Monate ein größeres Update vor-gesehen.

Long-Term-Support (LTS) – Langzeitversion

Eine LTS-Version löst jeweils die Vorgänger-Langzeitversion ab und wird bis zur Veröf-fentlichung der nächsten LTS-Version mit (Sicherheits-)Updates versorgt.

Alle LTS-Versionen tragen an zweiter Stelle der Versionsnummer eine 5 – dies erklärt den Sprung von Joomla 1.7 (STS) auf Joomla 2.5 (LTS).

Die Versionsnummer setzt sich somit aus bis zu drei Stellen zusammen:

Hauptversion.Unterversion.Wartungsversion

Die aktuelle Version lautete 3.4.1 (Stand: 04/2015) und ist eine STS-Version.

Frühere Versionen (ohne Support):

Joomla 1.0 – September 2005

Joomla 1.5 (LTS) – Januar 2008 (letzte Version: 1.5.28)

Joomla 1.6 – Januar 2011

Joomla 1.7 – Juli 2011

Joomla 2.5 (LTS) – Januar 2012 (letzte Version: 2.5.24)

Aktuelle Versionen (Stand: 09/2014):

Joomla 3.0 (STS) – September 2012

Joomla 3.1 (STS) – April 2013

JOM01 5

1 Was ist Joomla! ?


Joomla 3.2 (STS) – November 2013

Joomla 3.3 (STS) – Juni 2014

Joomla 3.4 (STS) – Februar 2015

Joomla 3.5 (LTS) – ?

Aufgrund des aktuellen Versionszyklus ist ein Upgrade einer 2.5er Version auf derzeit 3.4 für „normale“ Seitenbetreiber nicht empfehlenswert. Hier lohnt sich das Warten auf die nächste LTS 3.5. Die Veröffentlichung war für September 2014 vorgesehen; jetzt kam aber doch erst eine weitere STS-Version (3.4), um eine flexiblere Entwicklung des Joom-la!-Projekts zu gewährleisten.

Wer jedoch neu in Joomla! einsteigt, für den lohnt sich die aktuellste Version 3.4, die mit folgenden Features gegenüber Version 2.5 aufwartet:

• Sie bietet eine komplett überarbeitete, benutzerfreundliche und übersichtliche Ad-ministrations- und Benutzeroberfläche.

• Der Installationsprozess ist bei entsprechenden Voraussetzungen (Testserver oder Zugang zu Webserver) eine Sache von wenigen Minuten.

• „Responsive Webdesign“ ist möglich, also die dynamische Abstimmung der Darstel-lung und der Funktionselemente einer Website auf mobile Endgeräte wie Notebooks, Handys, Tablets etc.

• Erstellen, Editieren und Sortieren (Drag & Drop) von Inhaltselementen bzw. Beiträ-gen ist komfortabel möglich.

• Es wird sauberer Quellcode verwendet.

• Eine Benutzerverwaltung mit gezielten Zugriffsberechtigungen und Zugriffsebenen ist detailliert festlegbar.

• Es gibt eine einfache integrierte Update-Funktion und damit auch einen erhöhten Si-cherheitsstandard.

• Eine ausgereifte Suchfunktion, Spamschutz für Formulare, und vieles mehr stehen zur Verfügung.

1.3 Das Konzept von Joomla!

Ein Content-Management-System (CMS) wie Joomla! ist eine datenbankgestützte Soft-ware, die der Verwaltung von (Web-)Inhalten dient. Der Begriff Content-Management-System lässt sich mit „Inhalts-Verwaltungs-System“ ins Deutsche übersetzen. Mit einem CMS werden die Inhalte von Websites erstellt und verwaltet. Über eine systemeigene Benutzeroberfläche (Backend) wird ein Text eingegeben; dieser erscheint nach dem Speichern automatisch auf der Webseite (Frontend). Dies hat den Vorteil, dass sich In-halte sehr schnell und leicht ändern lassen.

6 JOM01

Was ist Joomla! ? 1


Abb. 1.3: Frontendansicht eines Standardtemplates

Der administrative Bereich von Joomla! liegt im Unterverzeichnis administrator. Das Backend ist somit über die URL http://www.meineSeite.de/administrator/ und ein Login (Benutzername und Passwort) zu erreichen.

Abb. 1.4: Login-Seite zum Backend

JOM01 7

http://www.meineSeite.de/administrator/

1 Was ist Joomla! ?


Über die Verwaltungsoberfläche (Backend) von Joomla! können alle Einstellungen, die die Website betreffen, vorgenommen werden.

Abb. 1.5: Backend mit Kontrollzentrum

Zusammenfassung

Joomla! ist ein frei zugängliches Content-Management-System (CMS) mit einer „Gene-ral Public License“, das seit 2005 stetig weiterentwickelt wurde. Eine Releasestrategie mit regelmäßigen Updates garantiert neben Aktualität auch ein permanentes Stabilitäts- und Sicherheitsniveau. Das CMS wird direkt auf dem Server dynamisch ausgeführt. Ser-verseitige Voraussetzungen sind dabei die Programmiersprache PHP und das Daten-bankverwaltungssystem MySQL. Während die Inhalte (Beiträge) in der MySQL-Daten-bank verwaltet werden, sind installierte Templates für das Layout zuständig. Joomla! ist modular aufgebaut. Man unterscheidet in Joomla! das Frontend als den öffentlich zu-gänglichen Bereich der Webseite, wie sie sich mit dem Aufruf eines Browsers darstellt, und das Backend als Verwaltungsbereich nach dem Login mit allen Steuerungsfunktio-nen der Joomla!-Website.

8 JOM01

Was ist Joomla! ? 1


Wiederholungsaufgaben

1.1 Mit welcher Programmiersprache und welchem Datenbankverwaltungssys-tem arbeitet Joomla!?

1.2 Welcher Lizenz unterliegt Joomla!? Ist es kostenpflichtig und kann es auch für eigene kommerzielle Projekte genutzt werden?

1.3 Warum ist es wichtig, regelmäßig Updates von Joomla! zu installieren?

1.4 Was versteht man unter „Frontend“?

1.5 Wie wird der administrative Bereich von Joomla! auch genannt?

1.6 Mit welchem Unterverzeichnis ruft man das Login für den administrativen Be-reich auf?

JOM01 9

2


2 Installation von Joomla!

Als Voraussetzung für den Betrieb von Joomla! ist ein Webserver notwendig. In diesem Kapitel wird gezeigt, wie man sich mit dem Anwendungspaket „XAMPP“ einen lokalen Testserver auf dem eigenen PC installieren kann. Anschließend wird auf diesem Testserver Joomla! installiert und konfiguriert.

Hinweis:

Durch die ständige Weiterentwicklung der gezeigten Anwendungen kann es sein, dass manche Screenshots der einzelnen Installationsschritte inzwischen nicht mehr mit der aktuellen Darstellung identisch sind und möglicherweise – je nach System-konfiguration – abweichen. Die grundsätzliche Vorgehensweise bleibt aber beste-hen.

2.1 Grundvoraussetzungen und Werkzeuge

Joomla! ist eine Webanwendung, die direkt auf einem Webserver installiert werden muss. Dafür geeignet ist ein Apache Server, der u. a. die Serverdienste und Komponen-ten PHP (ab Version 5.3.1+/empfohlen 5.4+) und MySQL (ab Version 5.1+) zur Verfü-gung stellt. Vom Internet-Provider Ihrer Wahl ist in der Regel die Information erhältlich, ob Joomla! in der aktuellen Version unterstützt wird. Voraussetzung ist dabei außerdem, dass Sie mit Ihrem Webhosting-Paket neben der PHP-Unterstützung auch den Zugriff auf zumindest eine MySQL-Datenbank gebucht haben.

Abb. 2.1: „Technical Requirements“ auf der Website www.joomla.org

10 JOM01

www.joomla.org

Installation von Joomla! 2


Auf der Webseite http://www.joomla.org/technical-requirements.html finden Sie ge-naue Informationen über die technischen Voraussetzungen für die aktuellen Joomla!-Versionen (Abb. 2.1).

Da wir aber zunächst auf unserem lokalen Rechner eine Testumgebung einrichten wollen, erfüllen wir mit der aktuellen Testserver-Gesamtlösung „XAMPP“ von „Apa-chefriends“ diese Bedingungen mit ein paar wenigen Installationsschritten.

Das „X“ von XAMPP steht hier für ein beliebiges Betriebssystem, das „A“ für den Apa-che Webserver, das „M“ für MySQL und „P“ für die Skriptsprachen PHP bzw. Perl. Sys-temvoraussetzungen Ihres Rechners wären dabei ca. 160 MByte freier Speicherplatz, 128 MByte RAM mit Windows-Betriebsystem (Windows 2000, 2003, XP, Vista, 7, 8) oder Mac OS X ab 10.6. Auch Linux wäre geeignet. Ein aktueller Browser wie der Inter-net Explorer 9 oder 10 mit den integrierten F12-Entwicklertools oder Firefox mit dem Add-on „Web-Developer“ sind empfehlenswert. Die genannten Entwicklertools sind da-bei nicht unbedingt erforderlich, aber später sehr hilfreiche Werkzeuge zum Analysieren von Elementen Ihrer Website und zum Lokalisieren zugehöriger CSS-Stilinformationen. Im Browser sollte JavaScript aktiviert sein und auch Cookies sollten akzeptiert werden.

Nach der lokalen Entwicklung soll die Joomla!-Webseite schließlich in Studienheft JOM03 auf den Webspace Ihres gewählten Providers übertragen werden. Dazu ist ein FTP-Programm für den Zugriff und die Datenübertragung auf den FTP-Server unerläss-lich. Die für alle Plattformen frei erhältliche FTP-Software „FileZilla“ ist dafür eine prak-tikable Lösung. Mehr Informationen und Download-Links finden Sie auf https://filezil-la-project.org.

Um die mit der Joomla!-Installation verknüpfte Datenbank über einen Browser zu ver-walten, wird üblicherweise die freie PHP-Applikation zur Administration von MySQL-Datenbanken, „phpMyAdmin“, verwendet. Diese Applikation wird mit der Installation von XAMPP bereits zur Verfügung gestellt.

2.2 Lokaler Testserver oder Webserver?

Es gibt eine wachsende Zahl von Providern, die ein kostenpflichtiges Webhosting mit einer bereits vorinstallierten Joomla!-Version (Ein-Klick-Installation) anbieten. Dazu ge-hören u. a. HostEurope, Alfahosting, 1&1, strato, Domainfactory. Dies hat den Vorteil, dass man sich nicht weiter mit dem Installationsprozess von Joomla! und der anschlie-ßenden Übertragung auf den Webspace auseinandersetzen muss und eigentlich sofort mit der Gestaltung der eigenen Joomla!-Webseite loslegen kann. Warum sich also die Mühe machen und mit XAMPP erst einen lokalen Testserver installieren und Joomla! auf dem eigenen PC zum Laufen bringen, wenn dann ohnehin früher oder später der Übertragungsprozess auf den gemieteten Webspace ansteht?

Bei genügend Routine und für die Abstimmung mit dem Kunden über das Web ist eine Entwicklung auf einem öffentlichen Webhost der direkteste Weg. Auch wenn weitere Entwickler (Administratoren) und Autoren an der Website beteiligt sein sollen, emp-fiehlt sich diese Vorgehensweise. Im Entwicklungsprozess kann man die Website vorrü-bergehend auch in einen Wartungsmodus schalten. Die Webseite ist dann vorab nur für registrierte Benutzer über ein Login zugänglich. Dieser Vorgang wird in Studienheft JOM03 noch einmal erläutert.

JOM01 11

https://filezilla-project.org

https://filezilla-project.org

http://www.joomla.org/technical-requirements.html



Da Sie sich aber zunächst erst Stück für Stück mit dem CMS Joomla! vertraut machen sollen, ist eine lokale Entwicklung dennoch sinnvoll. So können Sie ganz nach Belieben experimentieren und ausprobieren, und eine ständige Internetverbindung ist für den Entwicklungsprozess auch nicht zwingend notwendig. Erst wenn das Grundgerüst kom-plett steht und Sie mit dem Erscheinungsbild zufrieden sind, können Sie für den öffent-lichen Zugriff online gehen und die weitere Pflege und Aktualisierung vornehmen. Oder Sie können mit der lokalen Installation erst einmal grundlegende Erfahrungen sammeln und dann für die konkrete Entwicklung der Website den Installationsservice Ihres Pro-viders in Anspruch nehmen. Doch jetzt soll es endlich losgehen und wir werden die lo-kale Testumgebung mit XAMPP installieren.

2.3 XAMPP für Windows installieren

Mit dem kostenlosen XAMPP-Installer-Paket installieren Sie mit wenigen Klicks auf ein-fache Weise eine voll funktionsfähige Testumgebung eines auf Ihrem lokalen PC simu-lierten Apache Webservers mit den notwendigen Serverdiensten PHP und MySQL. Die-se Installer-Komplettpakete eignen sich wegen der vereinfachten Vorkonfiguration und aus Sicherheitsgründen nicht für einen öffentlich zugänglichen Webserver.

Die in der Testumgebung abgelegten lokalen Dateien werden über einen Browser mit http://localhost aufgerufen. „localhost“ steht hier stellvertretend für die IP-Adresse des momentan genutzten eigenen Systems und ermöglicht es, die Serverapplikation so zu er-reichen, also ob es sich um einen entfernten Webserver handeln würde, wie Abb. 2.2 noch einmal verdeutlicht.

Abb. 2.2: Prinzip eines lokalen Testservers

Zum Download von XAMPP öffnen Sie Ihren Browser, geben folgende Adresse ein: http://www.apachefriends.org/de und klicken anschließend auf den Menüpunkt Down-load. Es werden die verfügbaren Distributionen für Windows, Linux und Mac OS X an-gezeigt. Wir betrachten hier aber nur exemplarisch die Installationen für Windows (im Beispiel unter Windows 8). Auf der genannten Seite finden sich weitere Informationen über die Installationsanforderungen sowie Links zur Dokumentation und FAQs (fre-quently asked questions, dt. häufig gestellte Fragen) zu XAMPP. Klicken Sie auf die ak-tuellste Download-Version für Windows. Achten Sie dabei aber darauf, dass Ihr Be-triebssystem auch unterstützt wird (Abb. 2.3). Mit den hier angebotenen Versionen „1.8.2 & 1.8.3“ sind die technischen Voraussetzungen für Joomla 3.3 in beiden Fällen ge-geben. Nach Betätigen des Download-Buttons startet der Download automatisch.

12 JOM01

http://www.apachefriends.org/de

http://localhost



Abb. 2.3: XAMPP-Download-Verzeichnis auf der Website www.apachefriends.org

Begeben Sie sich nach erfolgreichem Download in das Download-Verzeichnis und star-ten Sie das Installer-Programm. Dazu müssen Sie über Administratorrechte verfügen und die Ausführung des Programms in einem Dialogfeld der Benutzerkontensteuerung bestätigen. Es erscheint möglicherweise noch ein Warnhinweis der Benutzerkonten-steuerung (Abb. 2.4). Da Sie XAMPP aber auf jeden Fall nicht im Programmverzeichnis installieren, können Sie diesen Hinweis mit OK bestätigen.

Abb. 2.4: Warnhinweis bei der Installation von XAMPP

Es startet nun der Setup Wizard und nach dem Willkommensbildschirm erscheint ein Dialogfeld, in dem Sie die Installation der einzelnen Komponenten steuern können. Sie können alles ausgewählt lassen, oder wenn Sie Speicherplatz sparen wollen, folgende nicht unbedingt benötigten Komponenten deaktivieren:

FileZilla FTP Server (nicht zu verwechseln mit dem eingangs erwähnten FileZilla Cli-ent), Mercury Mail Server, Tomcat, Perl, Webalizer, Fake Sendmail (Abb. 2.5).

JOM01 13

www.apachefriends.org



Abb. 2.5: Setup der XAMPP-Installation

Als Installationsordner wird C:\xampp vorgeschlagen, bestätigen Sie dies mit Next. Vom XAMPP-Kooperationspartner BitNami gibt es jetzt möglicherweise noch ein Informati-onsangebot zu diversen Open-Source-Programmpaketen – u. a. auch Joomla! – dies de-aktivieren Sie jedoch. Bestätigen Sie weiter mit Next, dann sollte die Installation endgül-tig starten und die Komponenten sollten entpackt und installiert werden. Dies kann ein paar Augenblicke dauern. Schließlich bestätigen Sie die Installation mit Finish und star-ten das XAMPP Control Panel (Abb. 2.6).

Abb. 2.6: Bestätigen des Setups

14 JOM01



Mit Start starten Sie nun testweise den Apache Webserver und die MySQL-Datenbank (Abb. 2.7).

Abb. 2.7: Das XAMPP Control Panel

Nach erfolgreichem Start unseres „frisch gebackenen“ Testservers – die Module Apache und MySQL sind jetzt grün unterlegt – öffnen Sie wieder Ihren Browser und geben in die Adresszeile http://localhost ein. Damit rufen Sie die Startseite der XAMPP-Installa-tion auf Ihrem lokalen und nun auch aktivierten Testserver auf (Abb. 2.8).

Abb. 2.8: Sprachauswahl für XAMPP

JOM01 15

http://localhost



Hinweis:

Mit dem lokalen Joomla!-Testsystem können Sie nur arbeiten, wenn der Testserver über das XAMPP Control Panel gestartet wurde, ansonsten gibt es eine Fehlermel-dung!

Eine mögliche Meldung zu den Intraneteinstellungen können Sie ignorieren und wählen in der Sprachauswahl Deutsch. Es erscheint nun die XAMPP-Willkommensseite mit ei-nigen Funktionen, Tools, Dokumentation und Beispieldateien (Abb. 2.9).

Abb. 2.9: XAMPP-Startseite

Sollte der Installationsvorgang nicht reibungslos verlaufen oder XAMPP sich nicht star-ten lassen, so konsultieren Sie die FAQs auf der Seite https://www.apachefriends.org/faq_windows.html. Denn es kann durchaus sein, dass der Betrieb des Testservers durch andere Programme behindert wird. So sind z. B. (lösbare) Probleme mit dem gleichzeiti-gen Betrieb des Internettelefondiensts „Skype“ bekannt.

Beenden Sie nun zunächst Apache und MySQL über das XAMPP Control Panel jeweils mit der Stop-Schaltfläche. Das XAMPP Control Panel finden Sie für einen erneuten Auf-ruf im neu erzeugten Ordner xampp auf Ihrer Festplatte. Idealerweise erstellen Sie sich dafür eine Verknüpfung auf Ihrem Desktop oder in der Taskleiste. In Windows 8 können Sie das Control Panel auch über das erzeugte App-Icon auf der Startseite aufrufen (Abb. 2.10).

16 JOM01

https://www.apachefriends.org/faq_windows.html

https://www.apachefriends.org/faq_windows.html



Abb. 2.10: App-Icon zum Aufruf des XAMPP Control Panels

2.4 MAMP für Mac OS

Für Mac-User gibt es analog zur Windows-Version auch eine XAMPP-Version für Mac. Wir möchten Ihnen hier jedoch eine andere, noch einfacher zu handhabende Alternative für einen lokalen Webserver unter Mac OS vorstellen: MAMP – My Apache MySQL PHP (http://www.mamp.info/de). Dabei handelt es sich um eine XAMPP-Version im „Mac-Stil“. Es gibt zwei Versionen: die kostenlose und vollkommen ausreichende Versi-on „MAMP“ und die kostenpflichtige Version „MAMP PRO“. Auf der Webseite finden Sie neben dem Download ebenfalls ausführliche Informationen und eine Dokumentati-on zu Installation und Betrieb (Abb. 2.11).

JOM01 17

http://www.mamp.info/de



Abb. 2.11: Screenshot der Website www.mamp.info

MAMP funktioniert für Mac OS X ab Version 10.4.0. Für die Installation sind Adminis-tratorrechte erforderlich. Die Installation geht nach dem Entpacken der pkg-Datei mit dem Ausführen des Installers denkbar einfach und problemlos vonstatten. Dabei können Sie über die Schaltfläche Anpassen die nicht benötigte mitgelieferte 14-Tage-Testversion von MAMP PRO deaktivieren (Abb. 2.12).

Abb. 2.12: Auswahl Installationstyp

18 JOM01

www.mamp.info



Nachdem der Installer alle notwendigen Pakete installiert hat, finden Sie in Ihrem Ord-ner Programme das neue Verzeichnis MAMP und darin das ebenso benannte Programm, mit dem Sie ein Control Panel für Ihren MAMP-Testserver starten können. Dabei wer-den voreingestellt der Apache Server und MySQL Server automatisch gestartet (Abb. 2.13 A) und ebenso öffnet sich die voreingestellte MAMP-Willkommensseite in Ihrem Browser (Abb. 2.13 B).

Abb. 2.13: MAMP-Anwendung und MAMP-Startseite im Browser

Eine Besonderheit gibt es bei der MAMP-Installation noch zu beachten. Wenn Sie sich das Adressfeld Ihres Browsers auf der gerade geöffneten Willkommensseite anschauen, sehen Sie eine spezielle Netzwerk-Portangabe, nämlich localhost:8888. Wenn Sie in Ih-

JOM01 19



rem MAMP Control Panel auf Einstellungen gehen und dann auf die Schaltfläche Stan-dard Apache und MySQL Ports klicken, können Sie diesen Port auf die Standardeinstel-lungen zurücksetzen (Abb. 2.14).

Abb. 2.14: Standardeinstellung für Apache- und MySQL-Ports

Sobald die Einstellungen übernommen wurden, ist eine zusätzlich Angabe des Ports für den Aufruf von Anwendungen und Dateien über den lokalen Testserver nicht mehr nö-tig.

2.5 Der Ordner „htdocs“

Als definiertes root-Verzeichnis (Stammordner) des Testservers fungiert das Verzeichnis htdocs (HyperText Documents). In der Windows-Installation finden Sie es auf der obers-ten Ebene des auf Ihrer Festplatte erstellten XAMPP-Ordners (Abb. 2.15 A) und in der MAMP-Version auf der obersten Ebene des Ordners MAMP im Verzeichnis Programme (Abb. 2.15 B). In der XAMPP-Version (Win) befinden sich in diesem Ordner bereits ein paar interne Dateien, während in der MAMP-Version der Ordner htdocs noch vollkom-men leer ist.

Hinweis:

Grundsätzlich müssen alle Dateien, die über den Testserver aufgerufen werden sol-len, in diesem Stammverzeichnis htdocs abgelegt werden.

20 JOM01



Befindet sich im Ordner htdocs eine index.html oder index.php, dann wird diese auto-matisch mit der Adresseingabe http://localhost aufgerufen. Dabei ist die zusätzliche Ein-gabe von „/htdocs/“ überflüssig, da das root-Verzeichnis für die Suchanfrage des Brow-sers ja bereits in der Serverkonfiguration vordefiniert ist. Würde man also eine Datei text.html in der obersten Ebene des Ordners htdocs ablegen, könnte man diese mit der Adresseingabe http://localhost/text.html aufrufen. Legt man diese Datei z. B. in einen Unterordner projekt, dann lautet der Aufruf der Datei: http://localhost/projekt/text.ht-ml. Das bedeutet, dass Sie Ihre lokale Joomla!-Installation in das Verzeichnis htdocs (idealerweise in einem Unterordner) platzieren müssen.

Abb. 2.15: Das Verzeichnis „htdocs“ bei XAMPP und MAMP

2.6 Anlegen einer Datenbank unter „phpMyAdmin“

Starten Sie zunächst erneut das XAMPP Control Panel und aktivieren Sie mit der Schalt-fläche Start den Apache Webserver und die MySQL-Datenbank, wie bereits in Abb. 2.7 gezeigt.

Rufen Sie im Browser erneut die Seite http://localhost auf. Wählen Sie in der linken Na-vigationsspalte den Menüpunkt phpMyAdmin. Es öffnet sich die Datenbank-Benutzer-oberfläche. Klicken Sie auf Datenbanken und tragen Sie in das Feld Neue Datenbank den Namen der neu anzulegenden Datenbank ein. In unserem Fall nennen wir die Daten-bank „schoenwald“. Klicken Sie dann auf Anlegen. Hierdurch erzeugen Sie eine leere Datenbank. Diese benötigen wir für die Installation von Joomla!.

JOM01 21

http://www.joomla.org

http://localhost/text.html

http://localhost/projekt/text.html

http://localhost/projekt/text.html

http://localhost

http://localhost



Abb. 2.16: Anlegen einer Datenbank mit „phpMyAdmin“

2.7 Download, Installation und Konfiguration von Joomla!

Nachdem alle Voraussetzungen für einen erfolgreichen Testserverbetrieb auf dem PC ge-schaffen sind, kann jetzt endlich die Installation von Joomla! in Angriff genommen wer-den. Die offizielle Joomla!-Website http://www.joomla.org bietet den Download der englischsprachigen Joomla!-Version an. Zusätzlich kann man sich in einem zweiten Schritt das deutsche Sprachpaket herunterladen und installieren. Hier bietet es sich an, über die Website http://www.jgerman.de gleich die deutschsprachige Joomla!-Version zu installieren.

Klicken Sie zum Download auf die angebotene zip-Version und bestätigen Sie unter Windows mit Speichern, wenn Sie danach gefragt werden.

Hinweis:

In den Bildbeispielen wird die Joomla!-Release-Version 3.3.0 angezeigt. Da inzwi-schen eine aktuellere Version vorliegt, laden Sie sich vorzugsweise diese Version he-runter.

22 JOM01


http://www.jgerman.de



Abb. 2.17: Download der deutschen Joomla!-Version

Die heruntergeladene zip-Datei dürfte eine Bezeichnung in der Art „Joomla_3.3.0-Stab-le-Full_Package_German.zip“ haben und sollte sich nun im jeweiligen Download-Ord-ner befinden.

Legen Sie einen Ordner mit dem Namen „joomla3“ in dem htdocs-Verzeichnis an. Ent-packen Sie die Joomla!-Installationsdateien in dieses Verzeichnis. Der Pfad lautet: C:\xampp\htdocs\joomla3 (Abb. 2.18 A-C).

JOM01 23



Abb. 2.18: Entpacken der Installationsdateien

Nun können Sie mit der Installation von Joomla! beginnen. Rufen Sie dazu in Ihrem Browser http://localhost/joomla3 die Startseite von Joomla! auf. Sie werden automatisch auf die index.php der Joomla!-Installation geleitet und befinden sich in der Hauptkonfi-guration des Installationsprogramms.

Die Sprachauswahl für den Installationsvorgang sollte auf German (DE-CH-AT) stehen (Abb. 2.19 A).

24 JOM01

http://localhost/joomla3



Abb. 2.19: Hauptkonfiguration der Joomla!-Installation

Unter Name geben Sie den Namen für die neu zu erstellende Website ein. Da Sie Joomla! anhand eines Beispielprojekts für einen fiktiven Urlaubsort kennenlernen sollen, geben Sie hier den Fantasienamen „Schönwaldfeld“ ein (Abb. 2.19 B). Dieser Name sollte also in inhaltlichem Bezug zur Ihrer geplanten Webseite stehen, da er später nicht nur im Header des Layouts, sondern auch in der Titelleiste des Browsers angezeigt wird und da-mit auch für Suchmaschinen von Bedeutung ist. (Der Name kann auch nachträglich noch geändert werden.)

Ebenfalls für Suchmaschinen von Bedeutung ist die kurze Beschreibung der Website, die Sie im nachfolgenden Feld Beschreibung eintragen können. Diese wird als globales Meta-tag-Element description den später generierten HTML-Seiten zugewiesen. Auch diesen Text können Sie nachträglich noch anpassen. Für das vorliegende Projektbeispiel können Sie hier bereits einen Fantasietext eintragen – z. B.: „Schönwaldfeld, der ideale Ferienort für Familien, Erholungssuchende, Wanderer und Radfahrer in schönster Mit-telgebirgslandschaft im Süden Deutschlands“ (Abb. 2.19 C).

Im Feld Admin-E-Mail geben Sie eine E-Mail-Adresse ein. Dieses Feld ist ein Pflichtfeld; im Testsystem ist jedoch der E-Mail-Server nicht aktiv, weshalb Sie keine E-Mail erhal-ten werden (Abb. 2.19 D).

Mit den nachfolgenden Feldern zur Benutzer- und Passworteingabe legen Sie Ihre Zu-gangsdaten zum Joomla!-Backend fest. Diese Zugangsdaten sollten Sie also auf keinen Fall vergessen und aus Sicherheitsgründen auch nicht die übliche Benutzerbezeichnung „admin“ verwenden, sondern für Benutzernamen und Passwort schwer nachvollziehba-re Formulierungen mit unterschiedlichen Zeichen, Groß-/Kleinschreibung, Sonderzei-

JOM01 25



chen und Ziffern wählen. Da Sie im vorliegenden Fall Joomla! aber zunächst nur lokal testen und die Webseite damit noch nicht öffentlich zugänglich ist, können Sie hier erst noch leicht zu merkende Zugangsdaten einsetzen. Diese können und sollten Sie dann später, wenn Sie mit Ihrer Website online gehen, entsprechend umformulieren. Sie tra-gen also im Projektbeispiel für Benutzer Ihren Nachnamen und als Passwort Ihren Vor-namen ein und bestätigen noch einmal das Passwort (Abb. 2.19 E).

Die unten stehende Option Site offline belassen Sie auf Nein. Dies ist zwar eine ganz nützliche Option, wenn Sie Joomla! direkt auf einem öffentlichen Webserver installieren wollen und die unfertige Seite im Frontend nur mit einem Login zugänglich machen möchten. Auf unserer lokalen Testversion ist das aber überflüssig, denn dort wollen Sie ja das Frontend, also den Zustand, in dem die Website online von einem Browser darge-stellt wird, aufrufen und kontrollieren können.

Wenn Sie alle Pflichteingaben (mit Sternchen markiert) vollständig getätigt haben, kli-cken Sie auf die Schaltfläche Weiter (Abb. 2.19 F).

Sie gelangen nun zur nächsten Eingabemaske, der Konfiguration der Datenbank. Hier werden die Zugangsdaten zum Datenbankserver eingetragen und die Datenbank für die Joomla!-Installation konfiguriert.

Für die Installation auf einem entfernten Webserver legen Sie zunächst im Benutzer-bereich des Providers eine neue Datenbank an. Die Zugangsdaten und den Namen der Datenbank notieren Sie sich, um diese bei der Joomla!-Installation korrekt anzugeben.

Bei der lokalen Installation von Joomla! unter XAMPP greifen Standardeinstellungen und Sie benötigen lediglich den Datenbanknamen (in unserem Fall „schoenwald“ s. o.).

Datenbanktyp: MySQLi

Belassen Sie es bei der Voreinstellung MySQLi (Abb. 2.20 A).

Das „i“ bedeutet „improved“ und stellt ein verbessertes und objektorientiertes MySQL-Modul seit PHP 5 dar.

Servername: localhost

localhost ist die Serveradresse, unter der der lokale Testserver erreichbar ist (Abb. 2.20 B).

Benutzername: root

root ist als standardmäßige Bezeichnung für den Administrator des Datenbankservers unter XAMPP hinterlegt.

Passwort:

Das Passwortfeld bleibt leer(!) (Abb. 2.20 C).

In den Standardeinstellungen von XAMPP ist kein Passwort für den Administrator hin-terlegt. Wenn Sie allerdings MAMP verwenden, dann tragen Sie hier ebenfalls die stan-dardmäßige Bezeichnung „root“ ein. Dies bietet wenig Sicherheit und sollte nur für ei-nen lokalen, nicht öffentlich zugänglichen Testserver verwendet werden. Für eine Installation auf einem Webserver sollten Sie hier ein individuelles und sicheres Passwort verwenden.

26 JOM01



Datenbankname: schoenwald

Tragen Sie hier den unter XAMPP > phpMyAdmin für die Datenbank gewählten Daten-banknamen ein (Abb. 2.20 D).

Im Feld Tabellenpräfix sehen Sie einen Zufallswert, der mit einem obligatorischen Un-terstrich endet. Diese vorangestellte Bezeichnung für die Datenbanktabellen ermöglicht es, mehrere Joomla!-Installationen parallel zu betreiben, falls nur eine einzelne Daten-bank zur Verfügung steht. Inzwischen werden von Providern aber auch bereits bei güns-tigen Hosting-Paketen mit PHP gleich mehrere Datenbanken zur Verfügung gestellt. Das Tabellenpräfix hat jedoch außerdem einen sicherheitstechnischen Aspekt. Belassen Sie das Tabellenpräfix also auf dem generierten Zufallswert, der bei Ihnen natürlich anders lautet als der im Screenshot gezeigte Wert (Abb. 2.20 E).

Die Option, ob alte Datenbanktabellen gesichert oder gelöscht werden sollen, können Sie auf Sichern belassen (Abb. 2.20 F).

Abb. 2.20: Datenbankkonfiguration der Joomla!-Installation

Klicken Sie auf Weiter – sollte an dieser Stelle noch eine Eingabemaske für eine mögliche FTP-Konfiguration angezeigt werden, belassen Sie Funktion aktivieren auf Nein und kli-cken auf Weiter. Nach einer Installationsprüfung und Zusammenfassung wird der Ins-tallationsprozess gestartet (Abb. 2.21).

Das Angebot Beispieldateien mit Standardinhalten zu installieren, lehnen Sie mit Keine ab, da wir eine saubere und schlanke Joomla!-Installation erzeugen wollen (Abb. 2.21 A).

JOM01 27



Abb. 2.21: Zusammenfassung der Konfigurationseinstellungen

Unter Überblick erhalten Sie noch einmal eine Zusammenfassung der Konfigurations-angaben und hätten bei Bedarf die Möglichkeit, sich diese per E-Mail senden zu lassen. Ihre Aufmerksamkeit sollten Sie unten auf die erfolgte Installationsprüfung und die Empfohlenen Einstellungen lenken. Bei der Installationsprüfung sollte sich erwartungs-gemäß alles im „grünen Bereich“ befinden und alles mit Ja (Abb. 2.21 B) beantwortet sein, denn sonst kann es zu Problemen bei der Installation kommen.

28 JOM01



Hinweis:

Insbesondere bei der Installation unter Mac OS, kann es vorkommen, dass die Vor-gabe configuration.php: nicht schreibgeschützt mit Nein (Abb. 2.21 C) beantwortet wird. Ist dies der Fall, müssen Sie zunächst die Zugriffsrechte für den Projektordner Ihrer Installation (hier joomla3) entsprechend anpassen, damit die Datei configura-tion.php, in der sämtliche Konfigurationseinstellungen von Joomla! gespeichert wer-den, während des Installationsvorgangs beschreibbar ist. Markieren Sie also unter Mac OS den Ordner joomla3 und rufen Sie das Infofenster des Ordners mit dem Menü Ablage > Informationen auf. Setzen Sie hier die Zugriffsrechte für alle (every-one) auf Lesen & Schreiben (Abb. 2.22).

Rechts unten finden Sie die Empfohlenen Einstellungen. Hier ist es je nach Konfigurati-on möglich, dass die empfohlenen Einstellungen für Fehler anzeigen und/oder Gepuffer-te Ausgabe noch abweichen (Abb. 2.21 D). Das behindert aber im Augenblick nicht die Installation. Sie können also nun den Button Installieren betätigen und damit den end-gültigen Installationsvorgang starten.

Abb. 2.22: Einstellung Zugriffsrechte Mac OS X

JOM01 29



Während der Installation werden die neuen Datenbanktabellen erstellt und die Konfigu-rationsdatei angelegt. Abschließend erscheint ein Bestätigungsfenster mit dem wichti-gen Hinweis, das Verzeichnis Installation, das sich jetzt noch im angelegten Ordner joomla3 befindet, zu löschen. Dies ist eine wichtige Sicherheitsvorkehrung von Joomla!. Denn würde das Installationsverzeichnis beibehalten, könnte ja nachträglich von nicht autorisierten Personen das Installationsprogramm erneut gestartet und schadhaft ausge-führt werden. Mit dem Button Installationsverzeichnis löschen (Abb. 2.23 A) können Sie dies bequem mit einem Mausklick tun. Sollte es dabei zu einer Fehlermeldung kommen, dass das Installationsverzeichnis (aufgrund von Zugriffsberechtigungen) nicht gelöscht werden kann, dann löschen Sie es manuell, indem Sie den Ordner Installation in den Pa-pierkorb bewegen. Mit der Schaltfläche Website (Abb. 2.23 B) können Sie nun einen ers-ten Blick auf die neue Joomla!-Website werfen (Abb. 2.24).

Abb. 2.23: Löschen des Installationsverzeichnisses

Allzu spannend fällt dieser Blick nicht aus, denn im Browser sehen Sie nur eine „abge-speckte“ Webseite, die außer dem vorher festgelegten Seitentitel, dem Standardmenüele-ment Home und einem Modul Anmeldung nichts weiter enthält. In der Adresszeile des Browsers sehen Sie die Eingabe: „http://localhost/joomla3“. Mit dieser Adresse rufen Sie künftig Ihre neu installierte Website auf dem lokalen Testserver auf. Im nächsten Kapitel werden wir uns einen Überblick über die Arbeitsbereiche im Backend von Joomla! ver-schaffen, bevor wir weitere Inhalte generieren.

30 JOM01



Abb. 2.24: Erste Ansicht der neuen Joomla!-Website

Zusammenfassung

Zum Betrieb von Joomla! ist grundsätzlich ein Webserver notwendig. Um mit Joomla! auf dem lokalen PC arbeiten zu können, ist die Installation einer Serverumgebung wie XAMPP erforderlich.

1. Über das XAMPP Control Panel werden der Apache Server und die Skriptsprache PHP aktiviert. (Dies ist vor jedem Arbeiten am CMS Joomla! notwendig!)

2. Die Oberfläche von XAMPP ist über http://localhost zu erreichen.

3. Unter phpMyAdmin wird zunächst eine neue Datenbank erzeugt.

4. Dann werden die Installationsdateien in einem Unterverzeichnis von htdocs abge-legt.

5. Für die browserbasierte Installation wird wiederum der Browser geöffnet und der Installationspfad eingegeben (http://localhost/joomla3).

6. Während der Installationsroutine müssen die Zugangsdaten und der Name der Da-tenbank angegeben werden.

7. Nach erfolgreicher Installation muss das Installationsverzeichnis gelöscht werden.

JOM01 31

http://localhost

http://localhost/joomla3




2.1 Was ist die Grundvoraussetzung für den Betrieb von Joomla!?

2.2 Wofür steht die Abkürzung „XAMPP“?

2.3 Mit welcher Anwendung wird die Datenbank im Testserver XAMPP verwal-tet?

2.4 Wie starten und stoppen Sie den lokalen Testserver?

2.5 Mit welcher Adresseingabe im Browser rufen Sie die im Ordner htdocs liegen-de index.php oder index.html auf?

2.6 Wo finden Sie ein deutschsprachiges Programmpaket von Joomla!?

2.7 Welchen Zweck hat die Definition eines Benutzernamens und eines Passworts in der Joomla!-Konfiguration?

2.8 Welcher Schritt ist am Ende des Joomla!-Installationsvorgangs notwendig, da-mit die Webseite gestartet werden kann?

32 JOM01

3


3 Ein erster Überblick

Im folgenden Kapitel wollen wir uns einen ersten Überblick über die Inhalte und Menüeinträge des Backends verschaffen und an der einen oder anderen Stelle auch bereits ein paar Hebel in Bewegung setzen. Alle wichtigen Funktionen ler-nen Sie dann ausführlich im weiteren Verlauf des Lehrgangs in der konkreten Anwendung anhand des Beispielprojekts „Schönwaldfeld“ kennen.

3.1 Die Arbeitsstruktur von Joomla!

Durch den modularen Aufbau – ähnlich einem Baukastensystem – ist Joomla! sehr fle-xibel und enorm erweiterbar. In der Standardversion bringt das System viele praktische und häufig verwendete Elemente, wie z. B. die Breadcrumb-Navigation (dt. Brotkrümel-navigation) oder eine Volltextsuche, mit. So erübrigt es sich, das Rad ständig neu zu er-finden. Die große Community rund um Joomla! stellt ergänzende Elemente, wie bei-spielsweise Bildgalerien oder Kalender, zur Verfügung.

Das Content-Management-System Joomla! besteht aus unterschiedlichen Bausteinen (Komponenten, Modulen, Plugins und Templates) sowie den einzelnen Inhalten (Beiträ-ge). Die Beiträge werden Kategorien zugeordnet, um sie besser strukturieren zu kön-nen. Die Beiträge (Inhalte) setzen sich aus Texten und Bildern zusammen (Abb. 3.1).

Abb. 3.1: Aufbau einer Joomla!-Website und Workflow

JOM01 33



Komponenten sind umfangreiche Programmteile, die die Website um bestimmte Funk-tionen erweitern, wie z. B. Bildgalerien oder Terminkalender. Die Inhalte einer Kompo-nente werden im Content-Bereich auf Beitragsebene angezeigt.

Das Backend-Menü Komponenten enthält bereits in Joomla! vorinstallierte Komponen-ten, wie Suchfunktion, Kontakte, Joomla!-Aktualisierung etc.

Die wichtigste Komponente für den Aufbau der Webseite ist die komplexe Inhaltskom-ponente. Sie besitzt einen eigenen Hauptmenüeintrag Inhalt. Hier werden die Inhalte in Form von Kategorien und Beiträgen verwaltet. Zudem gibt es eine Medienverwaltung, um Bilder, Videos und andere Medien verfügbar zu machen.

Module sind kleinere Programmbausteine, die variabel auf der Website positioniert werden können. Einzelne Module werden an definierten Positionen auf der Webseite, den sogenannten Modulpositionen, platziert. Beispiele für Module sind z. B. eine Me-nüleiste mit zuvor definierten Menüpunkten, eine Liste der meistgelesenen Beiträge oder ein Anmeldefeld zum Login registrierter Benutzer.

Plugins sind wichtige Kontrollelemente, die meist im Hintergrund agieren und be-stimmte Funktionen und Erweiterungen aktivieren und steuern. So gibt es z. B. das Capt-cha-Plugin, das Spammer fernhält oder das GoogleMap-Plugin, mit dem sich eine Karte in einen Beitrag einfügen lässt.

Hinweis:

Letzteres ist nicht im Standardumfang von Joomla! enthalten. (Es handelt sich um ein Drittanbieter-Plugin.)

Templates sind Layoutvorlagen, die das Aussehen einer Joomla!-Website steuern. In Joomla! sind bereits zwei Templates für das Frontend und zwei Templates für das Ba-ckend vorinstalliert. Es gibt jedoch zahlreiche Webseiten, wie z. B. www.joomlaos.de, die eine große Auswahl zusätzlicher, teils kostenfreier Templates anbieten.

Neben PHP, HTML und JavaScript basieren Templates auf CSS (Cascading Style Sheets), wodurch sich mit ein paar Handgriffen Einfluss auf die Gestaltung des Templates neh-men lässt. Die neue und ständig wachsende Auswahl an Templates für Joomla! 3.x ar-beitet mit modernsten Techniken wie CSS3/HTML 5 und nutzt das in Joomla! integrierte Bootstrap-Framework. Damit kann die flexible Anpassung von Design und Seitenauf-bau an unterschiedliche Endgeräte (responsive Design) wie Notebooks, Tablets oder Smartphones realisiert werden (Abb. 3.2).

34 JOM01

www.joomlaos.de

Ein erster Überblick 3


Abb. 3.2: Auf „Smartphone-Größe“ geschrumpfte Browseransichten von Frontend und Backend durch responsive Design

3.2 Der Workflow

Komponenten, Module, Plugins und Templates von Joomla! sind also die Bausteine zur Entwicklung einer Joomla!-Website. Dabei gibt es einen grundsätzlichen Workflow für die Erstellung neuer Inhalte (Abb. 3.1 unten):

1. Zunächst werden die Inhalte thematisch gegliedert. Dazu werden im Backend soge-nannte Kategorien definiert. Kategorien lassen sich mit Ordnern bzw. Verzeichnis-sen vergleichen und ermöglichen somit eine hierarchische Gliederung von Inhalten.

2. Dann werden Beiträge erstellt, die mit Texten, Bildern, Medien ausgestaltet werden. Diese Beiträge werden den zuvor definierten Kategorien zugeordnet. Beiträge, die keiner Kategorie zugeordnet werden können oder sollen, sind in der Standardkate-gorie Uncategorised ablegbar.

3. Im nächsten Schritt werden Menüs definiert, die mit den erstellten Kategorien, Bei-trägen und Inhalten verknüpft werden, um diese im Frontend der Webseite zugäng-lich zu machen.

4. Zusätzlich wird die Website mit Modulen ergänzt, die verschiedenste Inhalte und Funktionen an genau definierten Positionen zur Verfügung stellen.

JOM01 35



5. Für das Design und die Gestaltung der Webseite wird das aktive Frontend-Template mit seinen möglichen Optionen genutzt und die Stylesheets in den CSS-Dateien wer-den nach Bedarf angepasst.

3.3 Erste Schritte im Backend

Nun wollen wir uns das Backend näher betrachten. Starten Sie dazu zunächst Ihren Test-server mit dem XAMPP Control Panel, indem Sie die Module Apache und MySQL star-ten.

Nun sollte sich die Startseite des Backends mit dem Kontrollzentrum öffnen (Abb. 3.4). Das obere horizontale Menü zeigt das Hauptmenü (Abb. 3.4 A) mit jeweils zusätzlichen ausklappbaren Untermenüs. Die linke Spalte zeigt verfügbare Untermenüs für den im Augenblick aktiven Hauptmenüpunkt. Im Fall des geöffneten Kontrollzentrums gibt es hier sortierte Links für wichtige und oft verwendete Funktionen, auf die darüber schnell zugegriffen werden kann. Darunter finden sich Hinweise zur Wartung und Aktualisie-rung (Abb. 3.4 B). Der übrige Raum ist den speziellen Inhalten der einzelnen Menüpunk-te vorbehalten. Die Startseite bietet hier zunächst eine Übersicht über die angemeldeten Benutzer, die am häufigsten aufgerufenen und die zuletzt hinzugefügten Beiträge (Abb. 3.4 C). Im Augenblick steht hier noch nicht allzu viel, da ja nur Sie selbst angemel-det sind und noch keine Beiträge erstellt wurden. Zusätzlich können hier ggf. auch Ins-tallations- und Aktualisierungshinweise mit Infos über Neuerungen angezeigt werden. Unten in der hellgrauen Fußleiste gibt es ein paar nützliche Funktionen (Abb. 3.4 D). Über den Link Vorschau können Sie in einem neuen Tab eine aktuelle Ansicht des Fron-tends aufrufen. Die gleiche Funktion erhalten Sie übrigens auch, wenn Sie oben rechts in der Hauptmenüleiste auf den Website-Namen (hier „Schönwaldfeld“) klicken. Bleiben wir bei der hellgrauen Fußleiste: Hier wird die Anzahl der angemeldeten Besucher und Administratoren im Backend angezeigt. Das kleine Briefsymbol führt zur Komponente Nachrichten, einem internen Nachrichtensystem für im Backend angemeldete Benutzer. Mit dem Link Abmelden können Sie sich aus dem Backend ausloggen, ebenso wie über das Menü mit dem Zahnradsymbol am rechten oberen Rand des Hauptmenüs.

Abb. 3.3: Login mit zuvor festgelegten Benutzernamen und Passwort

Um in den Administrationsbereich von Joomla! und damit in das Backend zu gelangen, geben Sie im Browser folgen-de Adresse ein: http://localhost/joomla3/administrator/. Das heißt, über die index.php, die sich im Ordner administrator der Joomla!-Installation befindet, rufen Sie eine Login-Seite auf. Dort geben Sie Ihren während der Ins-tallation festgelegten Benutzernamen und das Passwort ein (Abb. 3.3). Dies ist auch künftig immer der erste Schritt, wenn Sie im Backend arbeiten wollen und noch nicht eingeloggt sind. Nach einer gewissen Zeit der Inaktivität wer-den Sie automatisch ausgeloggt und müssen sich ggf. neu anmelden.

36 JOM01

http://localhost/joomla3/administrator/

http://localhost/joomla3/administrator/



Abb. 3.4: Startseite des Backends mit Kontrollzentrum

Im Folgenden sollen die Menüeinträge des Hauptmenüs einmal im Einzelnen betrachtet und die wesentlichen Funktionen kurz erläutert werden. Teilweise nehmen Sie dabei auch schon Einstellungen für die Grundkonfiguration vor und erstellen einen ersten Bei-trag.

3.4 System – Konfiguration

Abb. 3.5: Menü „System“ mit Untermenüs

Öffnen Sie mit Klick auf den Menüpunkt System die zu-gehörigen Untermenüs. Näher betrachten wollen wir jetzt den Menüpunkt Konfiguration. Es öffnet sich eine Eingabemaske mit verschiedenen Einstellungsoptionen für die Site. Auf den Reitern System, Server, Berechti-gungen, Textfilter gibt es weitere grundlegende Einstel-lungs- und Konfigurationsmöglichkeiten.

JOM01 37



Zunächst fällt auf, dass direkt unterhalb der Menüleiste eine zusätzliche Werkzeugleiste aufgetaucht ist (Abb. 3.6 A). Diese Werkzeugleiste passt sich entsprechend dem gewähl-ten Menüpunkt mit verschiedensten Optionen an. Hier enthält sie drei elementare Schaltflächen: Speichern, Speichern & Schließen, Abbrechen. Später kommt bei der Ka-tegorie- und Beitragserstellung noch die Option Speichern & Neu hinzu. Diese Schaltflä-chen sind charakteristisch für die Arbeitsweise im Backend: Immer wenn Sie einen Arbeitsbereich öffnen, haben Sie die Option, zu speichern (Speichern) und im Arbeits-bereich für weitere Aktionen zu verbleiben oder mit Speichern & Neu ggf. eine neue Ein-gabemaske dieses Arbeitsbereichs aufzurufen. Mit Speichern & Schließen können Sie die vorgenommenen Eingaben speichern und den Arbeitsbereich gleichzeitig verlassen. Die dritte Option, Abbrechen, macht alle ausgeführten, aber ungesicherten Aktionen im ge-rade geöffneten Arbeitsbereich hinfällig und verlässt diesen ebenfalls.

In der linken Menüleiste sehen Sie eine ganze Reihe von Links, mit denen Sie direkt zu den globalen Einstellungsoptionen der aufgeführten Funktionen und Arbeitsbereiche gelangen können (Abb. 3.6 B). Diese Einstellungsoptionen lassen sich aber auch jeder-zeit direkt aus dem Menü der einzelnen Arbeitsbereiche heraus aufrufen – und zwar im-mer dann, wenn ganz rechts in der Werkzeugleiste eine Schaltfläche Optionen verfügbar ist. Wir wenden uns aber zunächst den Konfigurationsbereichen des geöffneten Menü-eintrags Konfiguration zu und betrachten das Register Site. Die meisten Einstellungen werden Sie so belassen können und die Einstellungsoptionen sind teilweise selbsterklä-rend. Wenn Sie mit der Maus über das jeweilige Thema fahren, erhalten Sie zudem auch immer einen erklärenden Tooltip (Quickinfo) zu dieser Einstellungsoption (Abb. 3.6 C).

Einige Einstellungen sollen kurz erläutert werden:

Website offline – ermöglicht es, die Website in einen Wartungsmodus zu schalten. Dies ist für die lokale Entwicklung zunächst unbedeutend und erst dann nützlich, wenn die Website auf einem entfernten Server eines Providers installiert wurde.

Bearbeitungsicons für – Sie können sich auch direkt im Frontend als Administrator oder berechtigter Benutzer anmelden, wenn ein Anmeldemodul (Login) vorhanden ist. Dann erscheinen nach erfolgreicher Anmeldung im Frontend kleine Icons in Form eines Stifts. Darüber können Sie direkt den Bearbeitungsmodus des jeweiligen Moduls aufru-fen. Probieren Sie es aus und melden Sie sich mit Ihrem Administratorkennwort im Frontend über das Anmeldeformular an.

Bei den Globalen Metadaten haben Sie die Möglichkeit, die bereits eingegebene site-übergreifende Metabeschreibung nachträglich zu bearbeiten und site-übergreifende Me-taschlüsselwörter zu ergänzen. In das noch offene Feld der globalen Metaschlüsselwör-ter geben Sie deshalb beispielhaft die Stichwörter „Schönwaldfeld, Ferienort, Erholungs-ort, Mittelgebirge, Radfahren, Wandern“ ein. Darüber hinaus lassen sich für jeden einzelnen Beitrag innerhalb der Beitragsbearbeitung auch individuell abgestimmte Be-schreibungen und Stichwörter definieren.

Mit der Anweisung index, follow erlauben Sie Suchmaschinen-Robots, Ihre Inhalte zu indexieren.

38 JOM01



Bei den Einstellungen für die Suchmaschinenoptimierung sollte Suchmaschinen-freundliche URL auf Ja stehen. Den Rest belassen Sie zunächst auf Nein. Lediglich bei der Auswahl Seitenname auch im Titel können Sie die Option Davor aktivieren. Damit stellen Sie sicher, dass Sie sinnvolle Dokumenttitel in der Browserkopfleiste erhalten, also z. B. statt nur Home jetzt Schönwaldfeld – Home.

Cookies speichern Nutzerdaten, um eine erneute Anmeldung auf der Domain zu er-leichtern. Hier ist keine Eingabe notwendig, da wir uns ohnehin nur auf einem Testser-ver befinden. Dies würde auch erst bedeutsam, wenn für die Website weitere Subdo-mains genutzt werden und die Standardeinstellung überschrieben werden soll.

Abb. 3.6: Konfigurationseinstellungen der Site

JOM01 39



Da Sie in dieser Rubrik jetzt bereits ein paar Angaben gemacht haben, klicken Sie auf Speichern. Das erfolgreiche Speichern wird mit einer kurzen Nachricht bestätigt.

Rufen Sie anschließend das Register System auf (Abb. 3.7). Auch in dieser Rubrik kön-nen Sie die Einstellungen weitgehend belassen. Auf eine Fehleranzeige wollen wir ver-zichten, um unseren Workflow nicht zu behindern (System debuggen: Nein).

Mit Cache verfügt Joomla! über eine integrierte Cache-Funktion, die das Anzeigen be-suchter Seiten beschleunigen kann – ähnlich der Cache-Funktion, die Sie von Ihrem Webbrowser kennen. Für das Beispielprojekt auf dem Testserver benötigen Sie diese Funktion aber nicht.

Abb. 3.7: Konfigurationseinstellungen „System“

Interessanter ist die Einstellung für die Sitzungslänge, denn mit dem voreingestellten Wert wird ein angemeldeter Benutzer nach 15 Minuten Inaktivität aus Sicherheitsgrün-den automatisch abgemeldet. Damit Sie sich nicht dauernd neu anmelden müssen, kön-nen Sie diesen Wert auf 60 Minuten oder mehr erhöhen (Abb. 3.7 A). Davon unabhängig sollten Sie natürlich sicherstellen, dass keine unberechtigten Personen Zugriff auf Ihren Computer haben, solange Sie im Backend angemeldet sind.

40 JOM01



Auch diese neue Einstellung bestätigen Sie mit Speichern und wenden sich nun dem Re-gister Server zu (Abb. 3.8). Die vorliegenden Einstellungen entsprechen denen, die wäh-rend der Installation in der Konfigurationsdatei (configuration.php) gespeichert wurden, und daran sollten Sie auch vorläufig nichts ändern, da sonst die Gefahr besteht, dass Ihre Webseite nicht mehr richtig läuft. Erst bei einem Umzug auf den Webserver eines Pro-viders muss die Konfigurationsdatei neu angepasst werden.

Abb. 3.8: Konfigurationseinstellungen „Server“

Sie brauchen jetzt also nicht zu speichern und schauen sich das nächste Register Berech-tigungen an. Hier können die globalen Einstellungen der Zugriffsrechte für verschiede-ne Benutzergruppen verwaltet und definiert werden. Auch hier belassen Sie es unbe-dingt bei den Voreinstellungen. Wir werden uns später noch ausführlicher mit dem Konzept der Zugriffsberechtigungen und Benutzergruppen befassen. Was die einzelnen Aktionen bedeuten, wird wieder durch einen Tooltip näher erklärt, und Sie können sich die Berechtigungen der einzelnen Gruppen für einen ersten Eindruck schon einmal an-schauen. So hat z. B. die Benutzergruppe Autor die Erlaubnis, sich im Frontend anzumel-den, neue Inhalte zu erstellen und die eigenen Inhalte weiterzubearbeiten. Als Mitglied dieser Benutzergruppe haben Sie aber keinen Zugriff auf das Backend oder die weiteren Inhalte und können Ihre Beiträge auch nicht veröffentlichen (Abb. 3.9).

JOM01 41



Abb. 3.9: Globale Einstellungen der Zugriffsberechtigungen

Werfen Sie noch kurz einen Blick in das Register Textfilter. Dort treffen Sie wieder auf die vorher schon aufgeführten Benutzergruppen. Hier geht es, wie es die kurze Erläute-rung unter Textfiltereinstellungen und weiter unten bereits treffend beschreibt, um eine Sicherheitsfunktion und die Verhinderung möglicher Angriffe mittels HTML-Code. Während Administrator und Super-Administrator natürlich keiner Einschränkung be-züglich der Codierungen unterliegen, wird eine bestimmte Filterung voreingestellt und auf die restlichen Benutzer angewendet. Dabei gibt es die Möglichkeit, diese Filterung mit weiteren HTML-Elementen und -Attributen zu ergänzen (Abb. 3.10).

Mit Speichern & Schließen oder Abbrechen verlassen Sie schließlich das Konfigurations-menü.

42 JOM01



Abb. 3.10: Textfiltereinstellungen

Der nächste Untermenüpunkt Globales Freigeben im Hauptmenü System ermöglicht dem Administrator das Einchecken gerade gesperrter Inhaltsobjekte. Wird ein Beitrags-artikel von einem berechtigten Nutzer bearbeitet, dann wird dieser Artikel automatisch ausgecheckt und damit für den Zugriff weiterer Mitarbeiter gesperrt, bis er wieder frei-gegeben (eingecheckt) ist. Diese Funktion ist also hilfreich, wenn Mitarbeiter möglicher-weise vergessen haben, eine Arbeitssitzung an einem Inhalt ordnungsgemäß zu schlie-ßen. Damit wird ermöglicht, dass diese Inhalte wieder für andere zur Bearbeitung freigegeben werden können.

Die nächsten beiden Untermenüpunkte Cache leeren und Abgelaufenen Cache leeren stellen Wartungsfunktionen dar, wenn zur Performanzsteigerung der Zwischenspeicher (Cache) in der Systemkonfiguration aktiviert wurde.

Der letzte Untermenüpunkt Systeminformation zeigt die aktuellen allgemeinen System-informationen (Abb. 3.11) und in den weiteren Rubriken die PHP-Einstellungen und PHP-Informationen sowie Einstellungen der configuration.php. Dies ist ganz hilfreich, um zu überprüfen, ob die Systemvoraussetzungen und notwendige Einstellungen für den Betrieb von Joomla! in der jeweiligen Installationsumgebung gegeben sind.

JOM01 43



Abb. 3.11: Systeminformationen

Abb. 3.12: Verzeichnisrechte

44 JOM01



Unter der Rubrik Verzeichnisrechte können Sie den Status der Dateirechte aller Joomla!-Verzeichnisse im Überblick sehen (Abb. 3.12). Für unsere Testserverumgebung sollte hier alles auf Beschreibbar gesetzt sein. Beim Umzug auf den entfernten Webserver wird das Thema Verzeichnisrechte unter dem Sicherheitsaspekt noch einmal eine Rolle spie-len.

3.5 Benutzer – Zugriffsberechtigungen

Der nächste Hauptmenüeintrag Benutzer dient im oberen Abschnitt dem Anlegen neu-er Benutzerkonten und der Verwaltung der Access Control List (ACL), also der Steue-rung der Zugriffsberechtigungen von Benutzergruppen auf die Zugriffsebenen der Web-site. Das heißt, Sie können mit der ACL genau festlegen, welche Bereiche Ihrer Website von allen öffentlich einzusehen sind. Sie können aber auch bestimmte Bereiche und In-halte nur für registrierte Benutzer zu Verfügung stellen. Sie können die Mitarbeit an Ih-rer Website in verschiedenen Berechtigungsstufen für bestimmte Inhalte ermöglichen, bis hin zu Rechten für die administrative Verwaltung der Website im Backend. Diesem komplexen Thema ist später ein eigenes Kapitel gewidmet und Sie werden das Konzept der ACL dann ausführlicher kennenlernen.

Voraussetzung sind neben den gültigen E-Mail-Adressen der Empfänger die korrekten Mail-Einstellungen für den Server, wie sie über das Menü System > Konfiguration > Ser-ver in der Rubrik Mailing vorgenommen werden können. Auf dem lokalen Testsystem unter XAMPP steht allerdings kein Mailserver zur Verfügung.

3.6 Menüs

Wir kommen nun zum Hauptmenüeintrag Menüs und stellen fest, dass hier zunächst nur zwei Untermenüpunkte vorhanden sind. Mit dem ersten Eintrag Menüs werden vor-handene Menüs der Webseite verwaltet. Wenn Sie auf das damit verbundene Submenü Neues Menü klicken, wird ein gänzlich neues Menü erstellt. Klicken Sie nun einmal auf den Untermenüpunkt Menüs – es öffnet sich ein Fenster mit einer Liste aller erstellten Menüs (Abb. 3.14 A). Zurzeit enthält diese Liste aber lediglich das vordefinierte Menü Main Menu oder Hauptmenü. Rechts von diesem Eintrag können Sie über die Schaltflä-che Module ersehen, welchem Menümodul das Main Menu zugewiesen ist. Der Hinweis

Die Untermenüpunkte Benutzerhinweise und Hinweis-kategorien dienen zur Erstellung und Organisation inter-ner Hinweise zu bestimmten Benutzern. Es handelt sich also nicht um private Nachrichten, wie sie über die inter-ne Nachrichtenkomponente möglich sind. Vielmehr er-möglichen diese Menüpunkte, mit einem Benutzerkonto verknüpfte Hinweise zu erstellen, die eine Information für den jeweiligen Benutzer bereitstellen. Diese Info kann von allen eingesehen werden, die Zugriff auf die Benutzerverwaltung des Backends haben.

Beim letzten Untermenüeintrag Massenmail handelt es sich um eine echte E-Mailfunktion, die es ermöglicht, Massenmails – also eine Art Rundschreiben – an regist-rierte Benutzergruppen (z. B. an alle Autoren) zu senden.

Abb. 3.13: Menü „Benutzer“ mit Untermenüs

JOM01 45



Administrationsmenü (Öffentlich in position-7) bedeutet also konkret, dass die Menü-einträge von Main Menu über das Modul Administrationsmenü (die Modulbezeichnung kann je nach aktueller Version auch abweichend sein – z. B. „Hauptmenü“) in der posi-tion-7 des Layouts im Frontend veröffentlicht und damit bedienbar gemacht werden. Dabei kann das Menümodul auch unabhängig vom vorhandenen Arbeitstitel benannt und mit oder ohne Titel im Frontend angezeigt werden (Abb. 3.14 B). Mit der grünen Schaltfläche Neu kann man analog zum Submenü Neues Menü bei Bedarf weitere Me-nüs anlegen. Dies wird im weiteren Verlauf des Projekts auch noch anhand eines Bei-spiels genauer gezeigt.

Abb. 3.14: Menüs und Menüeinträge

46 JOM01



Mit dem zweiten Untermenüpunkt Menüeinträge öffnet sich eine Liste der erstellten Menüeinträge (Abb. 3.14 C). Bislang ist das aber nur der einzelne Eintrag Home. Dieser Eintrag ist bereits voreingestellt und verweist als Haupteintrag auch auf die standard-mäßige Startseite. Gekennzeichnet ist dies mit dem aktiven (gelben) Sternchensymbol in der rechten Spalte Startseite. In der vorderen Spalte Status erkennen Sie am grünen Häk-chen, dass dieser Menüeintrag veröffentlicht wurde und damit im Frontend angezeigt wird. Dies lässt sich auch über die Schaltfläche Veröffentlichen der oberen Werk-zeugleiste steuern. Sie werden dem Main Menu später noch einige weitere Einträge hin-zufügen, wenn Sie die Inhalte des Beispielprojekts aufbauen. Unterhalb der Werk-zeugleiste finden Sie u. a. eine Schaltfläche Suchwerkzeuge. Damit öffnen Sie eine Reihe von Filter- und Sortierfunktionen für die Listeneinträge. Diese Funktion steht auch bei allen anderen Inhaltselementen, die in Listenform aufgeführt werden, zur Verfügung und kann bei komplexen Projekten zur besseren Orientierung sehr hilfreich sein.

3.7 Inhalt – Beiträge, Kategorien, Medien

Das Menü Inhalt mit den Einträgen Beiträge, Kategorien, Haupteinträge und Medien stellt die zentrale Komponente von Joomla! zur Inhaltsverwaltung dar. Analog zum wei-ter oben angesprochenen Workflow ist dies auch die Komponente, die gleich zu Beginn der Strukturierung der Joomla!-Website genutzt wird. Dies mag zunächst etwas unge-wohnt anmuten, da man üblicherweise eher zuerst an den Aufbau eines Navigationsme-nüs denken würde. Aber stellen Sie sich als Vergleich einmal vor, es gäbe ein Redakti-onsteam, das eine Zeitschrift entwickeln und herausgeben wollte. Dann entsprächen die Kategorien den Rubriken, wie z. B. Wirtschaft, Feuilleton, Sport, Lokales etc., durch die die Zeitschrift inhaltlich gegliedert werden. Die Beiträge entsprächen den Artikeln, die diese Rubriken inhaltlich füllen. Den Schlagzeilen für die Titelaufmachung käme eine besondere Bedeutung zu. Dies könnte man mit der Funktion der Haupteinträge verglei-chen. Schließlich lebt eine Zeitschrift auch von Bildern und die Bildredaktion entspräche im Prinzip der Funktion der Medienverwaltung von Joomla!, die Sie gleich noch kennen-lernen werden. Erst im dritten Schritt kämen die Menüs ins Spiel… Doch genug der The-orie, da der Menüeintrag für die Startseite ja bereits existiert, aber noch keinen Inhalt enthält, soll jetzt ein Beitrag für die Startseite erstellt werden. Dafür klicken Sie auf das Menü Inhalt > Beiträge > Neuer Beitrag (Abb. 3.15 A).

Abb. 3.15: Menü „Inhalt“ mit Untermenüs

Es öffnet sich ein Fenster zur Erstellung neuer Beiträge. In der oberen Werkzeugleiste finden Sie die bereits angesprochenen Standardaktionen Speichern und Speichern & Schließen. Mit Speichern & Neu können Sie den aktuellen Beitrag speichern und gleich-zeitig ein neues Arbeitsfenster für einen weiteren Beitrag aufrufen. Mit Abbrechen ver-

JOM01 47



lassen Sie das Beitragsfenster und alle nicht gespeicherten Änderungen bleiben unbe-rücksichtigt. Haben Sie den Beitrag einmal gespeichert, verwandelt sich das Feld Abbrechen in Schließen und es kommt mit der Schaltfläche Als Kopie speichern eine weitere Option hinzu. Unterhalb der Werkzeugleiste sehen Sie ein Pflichteingabefeld Titel*, dort geben Sie „Willkommen im Ferienland“ ein (Abb. 3.16 A). Dieser Titel er-scheint auch als Beitragsüberschrift. Unter dem Titelfeld befindet sich das Register In-halt mit den Menüs und Symbolen des Standardeditors „TinyMCE“ sowie eine leere Ar-beitsfläche. Jeder Beitrag muss einer Kategorie zugeordnet sein und rechts neben dem Editor finden Sie auch das Pflichtfeld Kategorie* mit der Auswahl der Kategorie Unca-tegorised (Abb. 3.16 B). Diese Kategorie ist ebenso ein notwendigerweise voreingestell-ter Standard wie der bereits vorhandene Menüeintrag Home mit Link auf die Startseite.

Abb. 3.16: Beitragsbearbeitungsfenster mit Optionen

48 JOM01



Öffnen Sie jetzt in Ihrem Übungsmaterialordner JOM01-03, den Sie im heftbezogenen Downloadbereich Ihrer Online-Lernplattform herunterladen können, die Textdatei Text1.txt und kopieren Sie den Text. Wieder im Beitragsfenster klicken Sie in den leeren Bereich des Editors und fügen den eben kopierten Text ein (Abb. 3.16 C). Aktivieren Sie rechts neben dem Editor bei Haupteintrag die Schaltfläche Ja, damit dieser Beitrag auf der Startseite erscheint (Abb. 3.16 D). Die darüberliegende Option Status sollte bereits voreingestellt auf Veröffentlicht stehen.

Bevor Sie die Beitragsbearbeitung beenden, werfen Sie noch einen Blick in das Register Veröffentlichung. Dort können Sie speziell auf den Beitrag abgestimmte Metatags für Beschreibung und Schlüsselwörter eingeben, die die globalen Eingaben an dieser Stelle überschreiben. Ebenso ist darunter eine individuelle Robots-Anweisung einstellbar. Auch lässt sich für den Beitrag – falls gewünscht – ein späteres Veröffentlichungsdatum und/oder ein automatisches Verfallsdatum eintragen. So erscheint der Beitrag im Fron-tend nur in einem bestimmten Zeitfenster (Abb. 3.16 E). Machen Sie hierzu jetzt aber keine Eintragung und schließen Sie die Beitragserstellung mit der Schaltfläche Spei-chern & Schließen ab.

Es erscheint nun die Übersicht der bereits erstellten Beiträge und in der Liste befindet sich jetzt Ihr eben erzeugter Beitrag „Willkommen im Ferienland“. Das grüne Häkchen in der Spalte Status signalisiert, dass der Beitrag freigegeben und damit veröffentlicht ist. Ebenso kennzeichnet das Sternchensymbol in der Statusspalte, dass es sich um einen Hauptbeitrag für die Startseite handelt (Abb. 3.17).

Abb. 3.17: Übersicht „Beiträge“

Ob dem jetzt auch wirklich so ist, überprüfen Sie, indem Sie mit Klick auf die Vorschau (Link Schönwaldfeld rechts oben) das Frontend öffnen. Die vormals beitragsleere Start-seite sollte nun Beitragstitel und den erstellten Beitragstext enthalten (Abb. 3.18).

JOM01 49



Abb. 3.18: Vorschau Frontend

Kategorien

Kehren Sie zurück ins Backend und öffnen Sie als nächstes Untermenü von Inhalt die Kategorien. Hier gibt es in ähnlicher Form wie bei der Beitragserstellung die Möglich-keit, neue Kategorien zu definieren und mit einer ähnlichen Listenansicht zu verwalten. Diese Kategorien stellen dann in der Regel übergeordnete Rubriken für Beiträge dar. Bis-her enthält die Kategorieliste natürlich nur den Eintrag der Kategorie Uncategorised, da noch keine weitere Kategorie angelegt wurde (Abb. 3.19). Im nächsten Studienheft JOM02, wenn es um die konkrete Website-Planung geht, werden wir uns ausführlicher mit der Erstellung von Kategorien befassen.

Abb. 3.19: Übersicht „Kategorien“

50 JOM01



Analog zu den Beiträgen funktioniert der Menüeintrag Haupteinträge, nur dass es sich hier um eine eigene Verwaltung für alle Beiträge, die explizit auf der Startseite erschei-nen, handelt.

Medien

Mit der letzten Funktion des Inhaltsmenüs, den Medien, sollen Sie gleich anhand eines Beispiels eine Grundfunktion der Medienverwaltung kennenlernen: das Hochladen und Bereitstellen von Dateien.

Mit Klick auf Medien öffnet sich zunächst ein Fenster, das in der oberen Werkzeugleiste auf der linken Seite drei selbsterklärende Schaltflächen zur Verfügung stellt: Hochladen, Neues Verzeichnis erstellen und Löschen. In der linken Spalte befindet sich analog zu ei-nem Datei-Explorer die augenblickliche Verzeichnisstruktur in der Übersicht. Im rech-ten Fenster werden die jeweiligen Inhalte angezeigt (Abb. 3.20 A). Die oberste Ebene der Medienverwaltung entspricht dem Ordner images im Verzeichnis der Joomla!-Installa-tion. (Dies ist von Bedeutung, wenn man Dateien außerhalb der Medienverwaltung mit einem FTP-Programm hochladen möchte.)

Abb. 3.20: Ansichten der Medienverwaltung

JOM01 51



In der Medienverwaltung sind bereits ein paar Logos und Beispieldateien hinterlegt. Kli-cken Sie einmal exemplarisch auf den Unterordner animals, der in sampledata > parks enthalten ist, und Sie sehen eine Reihe Vorschaubilder aus der Tierwelt. Mit Klick auf die Miniaturen erhalten Sie eine größere Vorschau des jeweiligen Motivs. Über die Schaltfläche Details erhalten Sie eine Listenansicht mit Informationen über Abmessun-gen und Dateigröße der Bilder (Abb. 3.20 B). Mit dem Pfeilsymbol gelangen Sie wieder in das übergeordnete Verzeichnis (Abb. 3.20 C).

Gehen Sie nun wieder zurück in die oberste Verzeichnisebene, wie sie in Abb. 3.20 A zu sehen ist, und klicken Sie auf die Schaltfläche Neues Verzeichnis erstellen. Es erscheint ein Eingabefeld, in das Sie bitte den Namen „ansichten“ eingeben. Anschließend klicken Sie auf die rechts davon befindliche Schaltfläche Verzeichnis erstellen (Abb. 3.21 A). Es folgt eine entsprechende Bestätigungsnachricht und ein zusätzliches Ordnersymbol „an-sichten“ wurde erstellt.

Abb. 3.21: Bild in Medienverwaltung laden

52 JOM01



Anmerkung:

Grundsätzlich sollten Sie in der Medienverwaltung auf durchgehende Kleinschrei-bung für Verzeichnisse und alle Dateinamen achten. Natürlich sollten auch deutsche Umlaute, Leer- und Sonderzeichen (Unterstrich ausgenommen) vermieden werden. Das reduziert Fehlerquellen und erspart mögliche Kompatibilitätsprobleme auf dem Server.

Öffnen Sie das neue Verzeichnis ansichten. Sie erhalten einen zunächst leeren Inhalts-bereich. Betätigen Sie jetzt die grüne Schaltfläche Hochladen und navigieren Sie mit Durchsuchen… auf Ihrer lokalen Festplatte zum Ordner mit den Übungsdateien für dieses Studienheft. Dort wählen Sie die Bilddatei ortsansicht.jpg aus dem Ordner zu-ansichten und starten mit der Schaltfläche Hochladen starten den Datei-Upload (Abb. 3.21 B). Es erscheint wieder eine Bestätigungsmeldung und die Bilddatei ortsan-sicht.jpg befindet sich direkt im neu erstellten Verzeichnis (Abb. 3.21 C). Gleichzeitig steht diese Datei nun auch zur Verwendung bei der Beitragserstellung zur Verfügung.

Das wollen wir gleich einmal testen und den Startseitenbeitrag mit der Ortsansicht schmücken. Dazu gehen Sie im Menü Inhalt noch einmal auf Beiträge und wählen den Beitrag mit Klick auf den Beitragstitel „Willkommen im Ferienland“ aus. Es öffnet sich das Fenster zur Beitragsbearbeitung. Auf der Arbeitsfläche platzieren Sie den Cursor di-rekt vor das erste Wort am Textanfang. Jetzt kommt die Schaltfläche Bild unterhalb des Arbeitsbereichs zum Einsatz. Mit Klick darauf wird die oberste Ebene Ihrer Medienver-waltung eingeblendet. Öffnen Sie darin das Verzeichnis ansichten. Markieren Sie das vorhandene Bild ortsansicht.jpg und der Pfad zum Bild erscheint im Feld Bild Webadres-se (Abb. 3.22 A). Scrollen Sie etwas nach unten, um weitere Optionen sichtbar zu ma-chen und geben Sie unter Beschreibung sowie Bildtitel „Ortsansicht Schönwaldfeld“ ein (Abb. 3.22 B). Bei Bildbeschriftung setzen Sie die Option einmal testweise auf Ja, an-schließend bestätigen Sie mit Einfügen (Abb. 3.22 C).

Abb. 3.22: Bild in Beitrag einfügen

JOM01 53



In der Ansicht der Beitragsbearbeitung sitzt das Bild nicht ganz optimal und die Bildun-terschrift wird nicht dargestellt, aber nachdem Speichern & Schließen gewählt wurde, können Sie mit Klick auf Vorschau im Fußmenü oder auf den Site-Namen Schönwaldfeld rechts oben die Frontend-Ansicht aufrufen und sehen das gewünschte Ergebnis (Abb. 3.23).

Abb. 3.23: Vorschau eines Beitrags mit eingefügten Bild

3.8 Komponenten

Wir wenden uns nun dem nächsten Hauptmenü Komponenten zu. Dessen Komponen-ten sollen hier aber nur kurz erläutert werden. Später werden Sie einige davon einsetzen und ausführlicher am Praxisbeispiel kennenlernen.

Die Komponente Banner ermöglicht es, gezielt Werbebanner einzublenden und die da-zugehörigen Werbekunden zu verwalten. Dabei lassen sich zur Kosten- und Abrech-nungskontrolle Statistiken über Aufrufe und Klicks führen.

54 JOM01



Die Nachinstallationshinweise geben zusätzliche wichtige Informationen zu einer er-folgten Aktualisierung. Auch im Kontrollzentrum wird man auf diese Nachinstallations-hinweise hingewiesen. Nachdem die Hinweise gelesen und beachtet worden sind, kann man sie mit einer entsprechenden Schaltfläche wieder ausblenden.

Mit der Komponente Nachrichten haben Sie die Möglichkeit, anderen Backend-Benut-zern eine Nachricht zukommen zu lassen und selbst empfangene Nachrichten zu lesen. Es handelt sich also um ein internes Nachrichtensystem von Joomla!, auf das nur ange-meldete Backend-Benutzer Zugriff haben und das für die Teamarbeit an einer Website eine nützliche Funktion darstellen kann.

Newsfeed ist eine Komponente, mit der RSS-Feeds – also Nachrichteneinspeisungen ex-terner Webseiten, die diesen Service anbieten, eingebunden werden können. Mit der Komponente wird der Link zur Datenquelle des Feeds eingetragen und kann mittels ei-nes speziellen Newsfeed-Menüeintrags im Frontend sichtbar gemacht werden.

Schlagwörter oder auch Tags ist eine neuere Funktion von Joomla!, die es ermöglicht, In-halten aller Art, wie Beiträge, Kategorien, aber auch Kontakte, Links etc., bestimmte Schlagwörter zuzuordnen. Diese können in der Komponente Schlagwörter verwaltet und über spezielle Menüeinträge im Frontend sichtbar gemacht werden.

Die Komponente Suche erstellt Suchstatistiken über die von Besuchern eingegebenen Suchbegriffe. Dies setzt voraus, dass in den Optionen dieser Komponente die Auswahl Suchstatistiken erfassen aktiviert wurde. Natürlich muss sich im Frontend auch eine entsprechende Suchbox befinden. Das kann mit dem standardmäßig vorhandenen Mo-dul Suchen zum Durchsuchen der ganzen Website realisiert werden.

Die Komponente Suchindex hingegen indexiert den Inhalt und steuert die Ergebnisse ei-nes weiteren Moduls namens Suchindex, das ebenfalls im Frontend als Suchfunktion platziert werden kann. Mit der Suchindex-Komponente lassen sich auch gezielt gewisse

Abb. 3.24: Menü „Komponenten“ mit Untermenüs

Die Komponente Joomla!-Aktualisierung wacht da-rüber, ob Aktualisierungen für die Joomla!-Version selbst oder ihre installierten Erweiterungen vorlie-gen, und ermöglicht die einfache Installation der Updates. Ob es eine Aktualisierung für Joomla! oder eine seiner Erweiterungen gibt, erfahren Sie auch durch einen entsprechenden Hinweis im Kontroll-zentrum auf der Startseite des Backends in der Rub-rik Wartung. Es ist sehr zu empfehlen, vorliegende Updates immer baldmöglichst zu installieren, denn nur dies garantiert neben den einhergehenden funk-tionellen Verbesserungen auch eine fortlaufende Sicherheit gegenüber möglichen Hackerangriffen.

Die Komponente Kontakte ermöglicht es, einzelne oder eine ganze Reihe von Kontaktadressen anzule-gen und zu verwalten. Diese können dann bei Be-darf auch im Frontend angezeigt werden und es kann zur Kommunikation auch ein Kontaktformu-lar zu jedem einzelnen Kontakt genutzt werden.

JOM01 55



Bereiche von der Suche ausnehmen. Eine dynamische Suche mit relevanten Suchtext-vorschlägen und erweiterten Suchoptionen, wie man sie von bekannten Suchmaschinen kennt, ist ebenfalls möglich.

Mit der Funktion Umleitungen werden – wenn das zugehörige Plugin zuvor aktiviert wurde – fehlerhafte Seitenaufrufe aus dem Frontend protokolliert. Bei komplexen Web-sites kann es schnell einmal vorkommen, dass ein Beitrag oder Inhalt unter einem be-stimmten Link nicht mehr vorhanden ist. So kann ein fehlerhaftes Lesezeichen oder eine fehlerhafte Eingabe der URL eine Fehlermeldung zur Folge haben. Diese fehlerhaften Aufrufe sind dann in der Komponente Umleitungen aufgelistet und auf andere Seiten umleitbar.

Der letzte Menüeintrag Weblinks im Menü Komponenten ermöglicht die Erstellung von Link-Listen, die dann im Frontend über einen entsprechenden Menüeintrag angezeigt werden können. In der Komponente werden die erstellten Links verwaltet und auch die Anzahl der Klicks auf die einzelnen Links wird dokumentiert.

3.9 Erweiterungen – Module, Plugins, Templates, Sprachen

Klickt man auf diesen Eintrag, erscheint zunächst das Untermenü Installieren mit der geöffneten Registerkarte Aus Webkatalog installieren (Abb. 3.26 A). Sie bietet eine Auf-listung zahlreicher populärer Erweiterungen aller Kategorien, die ebenfalls auf der Joomla! Extension Directory™ der Webseite www.joomla.org zu finden sind. Die Auflis-tung in der linken Spalte erleichtert die Suche nach der passenden Erweiterung. Ein wei-terer Klick auf das Symbol oder den Namen der ausgewählten Erweiterung liefert wei-terführende Informationen. Das Schöne ist, man kann die Erweiterung bei Bedarf nun einfach mit Klick auf den Install-Button installieren.

(Falls das Register Aus Webkatalog installieren an dieser Stelle nicht angezeigt wird, muss das dafür zuständige Plugin zuvor aktiviert werden. Gehen Sie dazu in das Menü Erweiterungen > Plugins und suchen Sie in der Liste den Eintrag Installer – Webkata-loginstallation. Aktivieren Sie ggf. die Funktion mit der Schaltfläche in der Spalte Status (siehe auch Abb. 3.29).

Abb. 3.25: Menü „Erweiterungen“ mit Untermenüs

Der Menüpunkt Erweiterungen mit dem gleich-namigen Menüeintrag Erweiterungen stellt eine zentrale und wichtige Funktion von Joomla! dar. Denn hierüber werden alle Aktualisierungen und zusätzliche Erweiterungen aller Art installiert und die bereits vorhandenen Erweiterungen verwaltet.

56 JOM01

www.joomla.org



Der klassische Installationsvorgang verbirgt sich hinter der Registerkarte Paketdatei hochladen (Abb. 3.26 B). Hierüber wählt man das gewünschte Erweiterungspaket (in der Regel eine zip-Datei) auf seinem PC aus und installiert die unentpackte Datei direkt über den Button Hochladen & Installieren. Meist wird diese Möglichkeit auch dazu verwen-det, Templates zu installieren.

Es kann vorkommen, dass die zip-Datei des Downloads den Hinweis enthält, dass sie zu-erst entpackt werden muss, da darin weitere zip-Dateien zur Auswahl enthalten sind.

Die Option der Registerkarte Aus Verzeichnis installieren kann man wählen, falls die Methode mit der Paketdatei Probleme bereitet. Dabei wird die Erweiterung entpackt und per FTP in ein temporäres Verzeichnis der Joomla!-Installation auf dem Server ko-piert. Dieser Pfad wird dann zur Installation verwendet.

Die letzte Methode, Von URL installieren, verweist direkt auf die Webseite des Anbieters. Betrachten wir noch kurz die weiteren Untermenüs in der linken Spalte (Abb. 3.26 C).

Abb. 3.26: Erweiterungen in der Ansicht „Webkatalog“

Über Aktualisieren werden neu zur Verfügung stehende Aktualisierungen automatisch aufgelistet und man kann aktiv nach eventuell vorhandenen Aktualisierungen suchen.

Verwalten listet alle bereits vorhandenen und neu installierten Erweiterungen auf und man kann diese hierüber aktivieren, deaktivieren oder wieder deinstallieren (Abb. 3.27).

JOM01 57



Abb. 3.27: Übersicht installierter Erweiterungen

Überprüfen erlaubt es, Erweiterungen zu finden und verfügbar zu machen, die nicht über die normale Joomla!-Installation installiert werden konnten. Eine weitere Beschrei-bung der Funktion findet man bei Aufruf des Links.

Datenbank überprüft, ob nach einem Update oder der Installation einer Erweiterung die Datenbanktabellenstruktur noch aktuell ist und bietet ggf. eine Reparieren-Funktion.

Das Untermenü Warnungen macht auf mögliche Konflikte oder Inkompatibilitäten auf-merksam, die im Zusammenhang mit neu installierten Erweiterungen auftreten können.

Über den letzten Untermenüpunkt Sprachen installieren lassen sich schließlich zusätzli-che Sprachpakete finden und installieren.

Module, Plugins, Templates, Sprachen

Die Erweiterungen Module, Plugins, Templates und Sprachen haben zu ihrer Verwaltung jeweils einen eigenen Menüeintrag.

Unter Module befinden sich zzt. gerade einmal drei Modultypen: der Navigationspfad (Breadcrumb), ein Menümodul und das Modul für die Benutzeranmeldung (Abb. 3.28 A). Weitere werden hinzukommen und Sie werden diese im Detail noch ken-nenlernen.

58 JOM01



Abb. 3.28: Übersicht aktiver Module und Auswahl neuer Modultyp

JOM01 59



Ein Klick auf die Schaltfläche Neu gibt Ihnen vorab mal schon einmal einen Überblick über die Standardmodule (Abb. 3.28 B). Nachdem Sie sich einen Eindruck verschafft ha-ben, beenden Sie das Fenster aber zunächst wieder mit Abbrechen.

Unter Plugins befinden sich bereits eine ganze Reihe dieser Steuerelemente, zum großen Teil aktiviert und teilweise auch deaktiviert (Abb. 3.29). Mit den Navigationsschaltflä-chen am Fußende können Sie weitere Seiten der Liste aufrufen (Abb. 3.29 A). Die meis-ten Plugins werden ihre Funktion im Hintergrund erfüllen, ohne dass Sie weiter eingrei-fen oder Einstellungen verändern müssen.

Abb. 3.29: Übersicht Plugins

60 JOM01



Der Menüeintrag Templates wird Ihnen in erster Linie in Bezug auf die Gestaltung der Website begegnen. Öffnen Sie den Menüeintrag Templates: Sie erhalten eine Liste der aktuell installierten Templates und angewendeten Stile (Abb. 3.30 A).

Abb. 3.30: Übersicht vorhandener Template-Stile

Wie man den beiden rechten Spalten Bereich und Template entnehmen kann, sind be-reits vier Templates vorinstalliert: Die Templates Beez3 und Protostar sind für den Be-reich Site, also für das Frontend anwendbar, während Hathor und Isis für den Bereich Administrator gedacht sind, also nur für die Darstellung des Backends funktionieren (Abb. 3.30 B).

Jedes Template kann mehr oder weniger umfangreiche direkte Einstellungsmöglichkei-ten besitzen. Hat man Einstellungen vorgenommen, können diese als neu abgespeicherte Stil-Variante genutzt werden.

Im vorliegenden Fall sehen Sie in der linken Spalte Stil jeweils den automatisch erzeug-ten Stil mit der Grundeinstellung (Default). Dabei sind die Stile isis-Default und proto-star-Default über die Sternchenschaltfläche der Spalte Standard für das Backend und Frontend aktiviert (Abb. 3.30 C). Will man einen neuen Stil erzeugen, kopiert man zu-nächst den Default-Stil und speichert die bearbeitete Version neu ab.

Vorschau von Modulpositionen bei Frontend-Stilen

Vor den Stilnamen sehen Sie noch ein kleines rotes Symbol mit einem stilisierten Auge. Der Tooltip verrät, dass es hier offenbar um die Option einer Vorschau geht. Um diese zu aktivieren, gehen Sie in der oberen Werkzeugleiste rechts auf die Schaltfläche Optio-nen und öffnen die Globale Konfiguration für die Templates. Dort stellen Sie die Option Vorschau von Modulpositionen auf Aktiviert (Abb. 3.31). Kehren Sie mit Speichern & Schließen zu den Template-Stilen zurück und Sie sehen am geänderten Augensymbol, dass für die beiden Frontend-Stile nun eine Vorschau verfügbar ist. Ein Klick auf das „Auge“ zeigt aber nicht nur die erwartete Template-Vorschau, sondern auch eine ganze Reihe von Positionsangaben. Diese geben die verfügbaren Modulpositionen des Temp-lates an. Sie sind von Bedeutung, wenn später an einer dieser Positionen ein Modul plat-ziert oder geändert werden soll.

JOM01 61



Abb. 3.31: Template-Optionen

Hinweis:

Ist die Option Vorschau von Modulpositionen aktiviert, kann man sich die Modulpo-sitionen eines aktivierten Templates auch direkt im Frontend anzeigen lassen. Dazu muss man nur einen sogenannten „Query String“ (?tp=1) an die URL anhängen. Da-mit wird ein bestimmter Parameter übertragen, der von PHP ausgewertet wird und bewirkt, dass die Modulpositionen ebenfalls wie in obigem Beispiel angezeigt wer-den. Im Fall unserer lokalen Test-Site müsste die Eingabe also lauten:

„http://localhost/joomla3/index.php?tp=1“

62 JOM01



Abb. 3.32: Vorschau der verfügbaren Modulpositionen

Logo einfügen

An dieser Stelle soll jetzt bereits eine kleine Modifikation am Template-Stil vorgenom-men werden. Dazu rufen Sie zunächst das Menü Inhalt > Medien auf, um eine Bilddatei hochzuladen. Direkt in der obersten Ebene der Medienverwaltung betätigen Sie die Schaltfläche Hochladen und wählen aus dem Übungsmaterialordner JOM01-03 die Da-tei ortslogo.png. Wenn der Upload geglückt ist, erhalten Sie wieder eine Bestätigungs-meldung und die png-Datei mit dem Fantasielogo von Schönwaldfeld steht in der Me-dienverwaltung zur Verfügung (Abb. 3.33).

JOM01 63



Abb. 3.33: Laden des Logos in die Medienverwaltung

Nun gehen Sie zurück zur Übersicht der Template-Stile und setzen links im Auswahlfeld von protostar-Default ein Häkchen. Betätigen Sie anschließend in der oberen Werk-zeugleiste die Schaltfläche Kopieren. Es wird eine Kopie des Stils erzeugt und eine ent-sprechende Bestätigungsmeldung ausgegeben. Danach klicken Sie auf den Namen des neuen Stils (Abb. 3.34).

Abb. 3.34: Kopierter Template-Stil in der Übersicht

Es öffnet sich das Fenster Stil bearbeiten. Öffnen Sie das Register Erweitert, denn dort gibt es ein paar Einstellungsmöglichkeiten. In manchen Templates können diese Optio-nen sehr umfangreich sein; hier sind sie eher übersichtlich. Klicken Sie bei Template-Far-be auf das Farbfeld und wählen Sie aus dem Farbwähler einen dunklen Grünton aus. Al-ternativ können Sie die hexadezimale Farbbezeichnung „#106114“ auch direkt in das Feld eingeben. Ebenso verfahren Sie für die Hintergrundfarbe und wählen ein sehr blas-ses Hellgrün (#f0f5f1).

64 JOM01



Im nächsten Schritt klicken Sie bei Logo auf die Schaltfläche Auswählen und wählen aus der geöffneten Medienverwaltung die Datei ortslogo.png und bestätigen mit der Schalt-fläche Einfügen. Das nächste Feld Titel lassen Sie frei und bei Beschreibung geben Sie ein: „in schönster Mittelgebirgslandschaft im Süden Deutschlands“.

Die nächste Option Google-Schrift für Überschriften ist eine einfache Möglichkeit, den Google Schriftenservice für Webfonts (Webschriften) zu nutzen. Man muss hier ledig-lich die exakte Schriftbezeichnung kennen, die normalerweise in den Code eingebunden wird. Mehr über diesen Service und eine große Schriftauswahl finden Sie auf der Web-seite: http://www.google.com/fonts.

Für unser Beispiel fügen Sie die Schriftbezeichnung „Sansita+One“ ein, um den Effekt zu demonstrieren.

Die untere Einstellung zu Fluid-Layout belassen Sie auf Static. Beide Layoutstile sind üb-rigens „responsive“ – passen sich also dynamisch an das verwendete Endgerät an – und beruhen auf dem installierten neuen Bootstrap-Framework. Lediglich die Art der An-passung an den Screen variiert etwas. Bevor Sie den Bearbeitungsmodus mit Speichern & Schließen verlassen, benennen Sie oben im Eingabefeld Name des Stils den Stil in „pro-tostar – schoenwaldfeld“ um. Jetzt müssen Sie nur noch in der Liste der Stile den neuen Stil als Standard für das Frontend festlegen, indem Sie das Sternchensymbol aktivieren (Abb. 3.35).

Abb. 3.35: Template-Stil als Standard festlegen

Wenn Sie sich nun das Frontend über die Vorschau anzeigen lassen, werden Sie feststel-len, dass das neue Logo mit Slogan, die veränderten Farben und – bei aktiver Internet-verbindung – auch der Google-Font auf das Template angewendet wurden. Auch wenn der obere Bereich jetzt etwas unruhig wirkt und verbesserungswürdig ist, belassen wir es vorerst dabei und werden dies am Ende dieses Kapitels noch weiter anpassen (Abb. 3.36).

JOM01 65

http://www.google.com/fonts



Abb. 3.36: Website in der Vorschau

Werfen Sie abschließend im Menü Erweiterungen > Templates noch einen Blick auf das Untermenü Templates, das sich unterhalb des Eintrags Stile befindet. Hier sind noch ein-mal alle installierten Templates aufgeführt, die die Basis für die angewendeten Templa-te-Stile bilden. Unsere eben gebildete Stilvariante „protostar-schoenwaldfeld“ ist hier al-lerdings nicht aufgeführt, da es sich dabei nur um eine Ableitung des Basisstils Protostar handelt.

Neben einer Miniaturansicht und ein paar rein informativen Angaben in den Spalten Version, Datum und Autor befindet sich in der Spalte Template jeweils ein Link …Details und Dateien, den Sie jetzt für Protostar einmal öffnen (Abb. 3.37 A). Es erscheint eine Art Explorer der für das Template relevanten Dateien. Klickt man auf eine einzelne Da-tei, wie z. B. die template.css im Ordner css, dann öffnet sich ein Editor, mit dem man die jeweilige Datei – bei entsprechender Kenntnis – abändern und anpassen kann. Wenn man tiefer in das Template eingreifen will, empfiehlt es sich allerdings, dafür eine Kopie des Templates anzulegen (Abb. 3.37 B). Weitere Optionen, wie das Verwalten der Ver-zeichnisse und Erstellen neuer Dateien, sind über die Schaltflächen der oberen Werk-zeugleiste möglich. Mit den sogenannten Overrides ist es möglich, noch tiefer in die Standardausgabe von Modulen und Komponenten einzugreifen. Dabei werden deren Standardeinstellungen „überschrieben“, ohne diese aber direkt zu verändern. Dazu wer-

66 JOM01



den Kopien der zu überschreibenden Verzeichnisse und Dateien in der Struktur des ak-tuellen Templates erstellt, die dann für die Ausgabe der Inhalte Vorrang haben. Hierbei sollte man aber schon genau wissen, was man beabsichtigt. Lassen Sie diesen Bereich zunächst erst einmal unberührt.

Abb. 3.37: Übersicht installierter Templates und zugehöriger Dateien

JOM01 67



Sprachen

Der letzte Menüeintrag im Menü Erweiterungen befasst sich mit den Sprachen. Es öffnet sich eine Liste der vorhandenen Sprachen, die in dem von der Webseite „jgerman.de“ in-stallierten Paket bereits enthalten waren: Deutsch und Englisch. Installiert und aktivier-ter Standard (Sternsymbol) für den Bereich Site – also das Frontend – ist das Paket Ger-man (Germany-Switzerland-Austria), s. Abb. 3.38 A. Ebenso verhält es sich für den Bereich Administrator – also das Backend, den man über links über das Untermenü In-stalliert – Administrator erreichen kann. Die gewünschten Sprachen für Frontend und Backend lassen sich also unabhängig voneinander als Standard festlegen. Dazu wählt man die Sprache in der Liste mit dem linken Auswahlbutton aus und klickt auf die Schaltfläche Standard in der oberen Werkzeugleiste. Alternativ aktiviert man in der Spalte Standard einfach das Sternchensymbol der gewünschten Sprache.

Neue Sprachen lassen sich recht bequem installieren, indem man in der Werkzeugleiste auf die Schaltfläche Sprachen installieren klickt (Abb. 3.38 B). Es öffnet sich eine alpha-betische sortierte Auswahl der allgemein akzeptierten Sprachpakete, wobei an verschie-denen Stellen ein Kommentar unterhalb der Sprachbezeichnung Aufschluss darüber gibt, ob das Paket auch für die aktuelle Joomla!-Version geeignet ist. Zum Installieren ei-nes weiteren Sprachpakets aktivieren Sie das Kontrollkästchen vor der gewählten Spra-che und klicken in der Werkzeugleiste auf die Schaltfläche Installieren (Abb. 3.38 C).

Abb. 3.38: Übersicht über und Installation von Sprachen

68 JOM01



In der Rubrik Inhalte werden die Sprachen für eine mehrsprachige Verwendung ange-legt. Die Rubrik Overrides betrifft konstante Sprachausgaben in Modulen und Kompo-nenten, also deren festgelegten Beschriftungen und Begriffe in den jeweiligen Sprach-einstellungen, die nicht direkt zu bearbeiten sind. Mit den Overrides lassen sich diese Begriffe bei Bedarf aber „überschreiben“, ohne die Originaldateien manipulieren zu müssen. Z. B. könnte man damit im Frontend im Anmeldemodul den Begriff Anmelden durch „Login“ ersetzen.

3.10 Hilfe

3.11 Erste Modifikationen der Website

Wenn Sie sich noch einmal das Frontend im augenblicklichen Zustand ansehen, wirken ein paar Dinge doch etwas störend. So gibt es unter dem Beitragstitel „Willkommen im Ferienland“ einige überflüssige Detailinformationen. In der rechten oberen Ecke befin-det sich zudem eine Schaltfläche, die das Ausdrucken und einen E-Mail-Versand des Bei-trags ermöglicht. Dies kann bei manchen Inhalten ganz nützlich sein, wird in unserem Beispiel aber ebenfalls nicht benötigt.

Rufen Sie jetzt im Backend das Menü Inhalt > Beiträge auf und dann Ihren einzelnen Beitrag „Willkommen im Ferienland“. Gehen Sie in der Beitragsbearbeitung zum Regis-ter Optionen. Dort sehen Sie eine ganze Reihe von Einstellungsmöglichkeiten, mit denen jeder Beitrag individuell konfiguriert werden kann. Fahren Sie mit der Maus über die einzelnen Bezeichnungen und der Tooltip verrät genauer, worum es bei dieser Einstel-lung geht (Abb. 3.40 A). Alle Einstellungen sind aber auf Globale Einstellungen gesetzt. Das heißt, es gibt offenbar globale Einstellungen, die für jeden Beitrag standardmäßig wirksam sind. In unserem Fall der zurzeit sichtbaren Beitragsdetails wären dies die Op-tionen Kategorie, Autor, Veröffentlichungsdatum, Seitenaufrufe, Drucksymbol und E-

Der letzte Hauptmenüeintrag, mit dem wir uns in unserer Übersicht befassen, lautet Hilfe und ist weitgehend selbsterklärend. Er enthält eine interne Hilfedatei mit Lizenzinformationen und einer Reihe von Hilfethemen, leider größtenteils in Englisch. Darüber hinaus gibt es eine Reihe nützlicher Links der Website www.joomla.org mit Support-Foren, Dokumentationen, Erweiterungen, Übersetzungen, Community-Portal, Sicherheitshinweisen etc. – wieder weitestgehend in englischer Sprache.

Am besten, Sie klicken sich einmal selbst durch und verschaffen sich einen Überblick, was sich hinter den einzelnen Links verbirgt.

Abb. 3.39: Das Menü „Hilfe“ mit Untermenüs

JOM01 69

www.joomla.org



Mail-Symbol. Diese Optionen könnten wir jetzt hier für den einzelnen Beitrag ändern. Damit dies aber nicht für jeden kommenden Beitrag einzeln eingestellt werden muss, nehmen wir die Änderung in den Globalen Einstellungen der Beiträge vor. Dazu verlas-sen Sie die eben geöffnete Beitragsbearbeitung wieder mit Schließen (Abb. 3.40 B).

Abb. 3.40: Optionen eines einzelnen Beitrags

Zurück im Menü Inhalt > Beiträge mit der Beitragsliste gehen Sie dort auf die Schaltflä-che Optionen ganz rechts oben in der Werkzeugleiste. Es öffnen sich die globalen Bei-tragsoptionen. Im ersten Register Beiträge sehen Sie die gleichen Einstellungsoptionen: Kategorie, Autor, Veröffentlichungsdatum, Seitenaufrufe, Drucksymbol und E-Mail-Symbol. Stellen Sie diese hier nun auf Verbergen. Ganz oben sehen Sie noch den Hinweis: Diese Einstellungen gelten für die Beitragsansicht, wenn sie nicht vom Beitrag selbst oder von einem eigenen Menülink überschrieben werden (Abb. 3.41). Das heißt, Sie können die eben verborgenen Details jederzeit im individuellen Beitrag über dessen Beitragsop-tionen wieder sichtbar machen.

Bestätigen Sie nun Ihre Einstellungen mit Speichern & Schließen und testen Sie das Er-gebnis im Frontend, indem Sie die Vorschau aktualisieren.

70 JOM01



Hinweis:

Auch im Menüeintrag (im aktuellen Fall der Link Home) tauchen diese Beitrags-optionen auf und beeinflussen die Darstellung des verlinkten einzelnen Beitrags.

Abb. 3.41: Die globalen Beitragsoptionen

JOM01 71



Seitenüberschrift

Im nächsten Schritt entfernen Sie das Anzeigen der Seitenüberschrift Home, die zum gleichnamigen Menüeintrag gehört. Dazu rufen Sie unter Menüs > Main Menu (Haupt-menü) den Menüeintrag Home auf und klicken ihn an, um in den Bearbeitungsmodus zu gelangen. Dort wählen Sie das Register Seitenanzeige und stellen die Option Seitenüber-schrift anzeigen auf Nein. Anschließend ändern Sie im gleichen Fenster oben den Me-nütitel in „Startseite“ um und bestätigen Ihre Änderung mit Speichern & Schließen (Abb. 3.42). Die Kontrolle in der aktualisierten Frontend-Ansicht zeigt nun, dass die Sei-tenüberschrift des Menü-Links verschwunden ist und der Menüeintrag selbst den Titel „Startseite“ erhalten hat.

Abb. 3.42: Bearbeitungsmodus eines Menüeintrags

Navigationsmenü anpassen

Jetzt stört nur noch der hier eigentlich überflüssige Begriff Administrationsmenü oder Hauptmenü und auch die Position des Menümoduls ist rechts vielleicht nicht so benut-zerfreundlich. Um dies zu beheben, rufen Sie das Menü Erweiterungen > Module auf und sehen die Liste mit den drei aktiven Modulen. Klicken Sie zur Bearbeitung auf den Mo-dultitel Administrationsmenü (oder Hauptmenü) und wählen Sie im sich nun zeigenden Bearbeitungsmodus rechts bei Titel anzeigen die Option Verbergen (Abb. 3.43 A).

Direkt darunter stellen Sie bei Position die Auswahlliste auf die Positionsbezeichnung Navigation [position-1], die unter dem Template-Namen Protostar aufgeführt ist (Abb. 3.43 B). Erinnern Sie sich dabei an die Template-Vorschau mit den Positionsanga-ben, wie sie in Abb. 3.32 bereits gezeigt wurde. Die Modulposition haben Sie damit also von position-7 auf position-1 abgeändert.

Bevor Sie jetzt speichern und schließen, soll aber noch eine Einstellung vorgenommen werden, die sich aus den möglichen Optionen nicht gleich erschließt. Die Darstellung der einzelnen Menüeinträge bezüglich Farbe und horizontaler Ausrichtung soll mit einer im Template vorhandenen Stilvorlage verändert werden. Es wird dabei eine weitere be-stimmte CSS-Klasse an die bereits vorhandene CSS-Klasse der Menüeinträge in diesem Modul angehängt. Diese Einstellung des Moduls wäre exemplarisch schon sichtbar, wenn wir die Beispieldateien installiert hätten. So müssen wir die Klasse nachträglich einfügen.

72 JOM01



Abb. 3.43: Bearbeitungsmodus eines Menümoduls

Öffnen Sie dazu das Register Erweitert des Moduls und klicken Sie in das Eingabefeld Menüklassensuffix. Der Cursor blinkt, und bevor Sie weiterschreiben, ist es wichtig, zu-nächst ein Leerzeichen einzugeben. Direkt danach geben Sie die CSS-Klassenbezeich-nung „nav-pills“ ein und beenden mit Speichern & Schließen (Abb. 3.44).

Abb. 3.44: Erweiterte Einstellungen eines Menümoduls

JOM01 73



Die Eingabe bewirkt, dass die Klassenbezeichnung nav-pills nicht direkt an die vor-handene Zeichenkette angehängt, sondern durch das Leerzeichen getrennt angefügt wird. Im Quellcode erhält das Listenelement des Menüeintrags dann folgendes Attribut: class="nav menu nav-pills". Damit wird der in der CSS-Datei des Templates vor-handene CSS-Selektor .nav-pills zusätzlich erfolgreich auf das Navigationsmenü in position1 angewendet. Zur Kontrolle rufen Sie die Vorschau des Frontends auf und Ihre Startseite sollte nun in etwa wie folgt aussehen (Abb. 3.45).

Hinweis:

Die CSS-Klasse nav-pills ist im Bootstrap-Framework definiert. Weitere Infor-mationen finden Sie in der deutschsprachigen Dokumentation von Bootstrap unter: http://holdirbootstrap.de/komponenten/#nav-pills.

Abb. 3.45: Vorschau der Website im Frontend

Zusammenfassung

Damit sind wir am Ende unseres ersten Überblicks über die Hauptfunktionen von Joom-la! angelangt. Sie haben erfahren, dass Joomla! modular aufgebaut ist. Die Hauptbaustei-ne dieser Anwendung sind die Komponenten, Module, Plugins und Templates. Im

74 JOM01

http://holdirbootstrap.de/komponenten/#nav-pills



grundsätzlichen Workflow von Joomla! werden die Inhalte zunächst mit sogenannten Kategorien thematisch gegliedert. Im nächsten Schritt werden Beiträge mit konkreten Inhalten (Texte, Bilder, Medien) erstellt und den jeweiligen Kategorien zugeordnet. Schließlich werden Menüs erstellt, die mit den Kategorien und Beiträgen verknüpft wer-den und diese in unterschiedlicher Form im Frontend darstellen. Schließlich wird die Website mit funktionalen Modulen vervollständigt. Templates definieren das Aussehen der Website.

Wenn Sie sich erfolgreich in das Backend von Joomla! eingeloggt haben, erwartet Sie das Kontrollzentrum mit einem Überblick der wichtigsten Funktionen und den Hauptmenü-punkten System, Benutzer, Menüs, Inhalt, Komponenten, Erweiterungen, Hilfe. Die grundsätzliche Bedeutung und die Inhalte dieser Hauptmenüs haben Sie kennengelernt. Dabei haben Sie bereits ein paar erste Einstellungen und Arbeitsschritte vorgenommen.


3.1 Was sind die Hauptbausteine einer Joomla!-Website?

3.2 Was versteht man unter „responsive Design“?

3.3 Mit welchen Links im Backend können Sie die Frontend-Ansicht aufrufen?

3.4 Was bewirkt die Option Abbrechen in der Werkzeugleiste eines Arbeitsbe-reichs?

3.5 Was bewirkt der Wert im Eingabefeld Sitzungslänge im Bereichsregister Sys-tem des Menüs System > Konfiguration?

3.6 Woran erkennen Sie, dass ein Menüeintrag auf die Startseite verweist?

3.7 Wie heißen die beiden auszufüllenden Pflichtfelder innerhalb des Arbeitsbe-reichs einer Beitragserstellung?

3.8 Wozu dient die Schaltfläche Bild innerhalb der Beitragsbearbeitung?

3.9 Wozu dient die Komponente Joomla!-Aktualisierung?

3.10 Was findet man im Register Aus Webkatalog installieren im Menü Erweiterun-gen?

3.11 Wie heißen die vorinstallierten Templates für den Bereich Site?

3.12 Was kann über die mit dem Augensymbol erreichbare Vorschau eines Templa-te-Stils noch angezeigt werden?

3.13 Wie rufen Sie die Globalen Beitragsoptionen auf?

3.14 Können die verfügbaren Sprachen für Frontend und Backend unabhängig von-einander eingestellt werden?

JOM01 75

A


A. Lösungen zu den Wiederholungsaufgaben

1.1 PHP und MySQL

1.2 Joomla! unterliegt der „General Public License“ (GNU GPL). Es kann kostenlos heruntergeladen und für eigene kommerzielle Zwecke eingesetzt werden.

1.3 Um immer eine stabile, sichere und möglichst fehlerfreie Joomla!-Installation zu besitzen.

1.4 Das Frontend bezeichnet die eigentliche Webseite, so, wie sie vom Browser bei Eingabe der URL beim Client dargestellt werden soll.

1.5 Backend

1.6 /administrator

2.1 Ein Webserver oder lokaler Testserver.

2.2 Für das gleichnamige Testserverpaket: X=beliebiges Betriebssystem, A=Apache Webserver, M=MySQL, P= Skriptsprachen PHP und Perl

2.3 phpMyAdmin

2.4 Mit dem XAMPP Control-Panel – für die Module Apache und MySQL die ent-sprechenden Start- und Stopp-Schaltflächen betätigen.

2.5 http://localhost

2.6 Auf der Webseite des Translation-Teams http://www.jgerman.de.

2.7 Ermöglicht den Zugang zum administrativen Backenend-Bereich.

2.8 Löschen des Verzeichnisses installation

3.1 Komponenten, Module, Plugins und Templates

3.2 Die flexible Anpassung von Design und Seitenaufbau an unterschiedlichste Aus-gabegeräte.

3.3 Link Vorschau in der Fußleiste und Name der Website in der Hauptmenüleiste.

3.4 Alle ausgeführten und ungesicherten Aktionen werden hinfällig und der Ar-beitsbereich wird verlassen.

3.5 Eine automatische Abmeldung nach entsprechenden Minuten der Inaktivität.

3.6 Aktives Sternchensymbol in der Spalte Startseite.

3.7 Titel und Kategorie

3.8 Zum Einblenden der Medienverwaltung und Einfügen von Bildern.

3.9 Sie wacht darüber, ob Aktualisierungen für die Joomla!-Version oder für instal-lierte Erweiterungen vorliegen.

3.10 Joomla!-Erweiterungen, die in der „Joomla Extension Directory“ der Webseite http://extensions.joomla.org aufgelistet sind.

76 JOM01

http://extensions.joomla.org

http://www.jegerman.de

Lösungen zu den Wiederholungsaufgaben A


3.11 Beez3 und Protostar

3.12 Die festgelegten und verfügbaren Modulpositionen des Templates.

3.13 Über das Menü Inhalt > Beiträge und die Schaltfläche Optionen oder über das Menü System > Konfiguration und den Link Beiträge in der linken Spalte Kom-ponente.

3.14 Ja.

JOM01 77

B


B. Glossar

Bootstrap Bootstrap ist ein freies CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Ty-pografie, Formulare, Buttons, Tabellen, Navigationsele-mente und JavaScript-Erweiterungen.

Backend Verwaltungsoberfläche

Captcha Completely Automated Public Turing test to tell Compu-ters and Humans Apart; dt. vollautomatischer öffentli-cher Turing-Test zur Unterscheidung von Computern und Menschen; dienen zur Unterscheidung, ob Eingaben in Internetformulare durch Menschen oder Maschinen (Roboter, kurz Bots) erfolgen.

CMS Content-Management-System

CSS Cascading Style Sheets

FAQ Frequently Asked Questions; dt. häufig gestellte Fragen

Framework Ein Framework ist eine Sammlung von Gestaltungsele-menten und Hilfsmitteln für standardkonforme Websi-tes, eine Art „Baukasten“ mit vorgefertigten Bauelemen-ten.

Frontend Website, wie sie die Nutzer sehen.

FTP File Transfer Protocol

GPL Die General Public License legt fest, dass die Software frei ist und frei bleibt. Dies gilt auch für geänderte Vari-anten. Die Autoren müssen immer genannt werden. D. h., die Software darf genutzt und verändert werden, muss dann aber auch in der erweiterten Version der Ge-meinschaft zur Verfügung gestellt werden, darf also nicht kommerzialisiert werden.

Homepage Startseite einer Internetpräsenz

HTML Hypertext Markup Language

http Hyptertext Transfer Protocol

JavaScript Skriptsprache, die im Browser ausgeführt wird.

Komponente Teil einer Software

Modul funktionelle Einheit einer Software

MySQL Datenbankverwaltungssystem; SQL ist eine Datenbank-sprache zur Definition von Datenstrukturen in Daten-banken sowie zum Bearbeiten (Einfügen, Verändern, Lö-schen) und Abfragen von Datenbeständen.

78 JOM01

Glossar B


PHP PHP: Hypertext Preprocessor; rekursives Akronym. PHP ist eine Skriptsprache, mit der umfangreiche Programme – nicht nur für Webseiten – programmiert werden kön-nen.

Plugin Plugins werden beispielsweise in Browsern genutzt, um Videos abzuspielen. Auch der Adobe Reader ist ein Plug-in, mit dem PDF-Dokumente im Browser lesbar sind. Ein Plugin ist ein „Programmschnipsel“, das andere Pro-gramme ergänzt.

Provider Internetdienstanbieter

(Web-)Server Ein Webserver überträgt Dokumente an Clients wie z. B. Webbrowser. Ein Server kann ein Computer (Hardware) sein, aber auch ein Computerprogramm (Software), das mit anderen Computern kommuniziert und Zugang zu speziellen Diensten ermöglicht.

Template Engl. Begriff für Schablone, Vorlage, die mit Inhalt ge-füllt werden kann.

URL Uniform Resource Locator (engl.: einheitlicher Quellen-anzeiger); identifiziert und lokalisiert eine Ressource, wie z. B. eine Website.

WebDeveloper Add-on für Mozilla Firefox; Entwicklertoolbar

https://addons.mozilla.org/de/firefox/addon/web-developer/

Webhosting Bereitstellung von Webspace

Webseite einzelnes HTML-Dokument

Website Gesamtheit einer Internetpräsenz

Webspace Speicherplatz auf einem Webserver

XAMPP Zusammenstellung freier Software aus einem Apache Webserver mit der Datenbank MySQL und den Skript-sprachen Perl und PHP. Das vorangestellte X steht für verschiedene Betriebssysteme.

XML Extensible Markup Language, erweiterbare Auszeich-nungssprache

JOM01 79



C


C. Literaturverzeichnis

Internet-Links

http://www.gnu.de


http://www.joomla.de



http://www.joomlaos.de

http://www.joomlaportal.de

https://www.apachefriends.org

http://www.mamp.info

http://www.filezilla.de


http://getbootstrap.com/

http://holdirbootstrap.de/

80 JOM01

http://www.joomla.de



http://www.joomlaos.de

http://www.joomlaportal.de

https://www.apachefriends.org

http://www.mamp.info

http://www.filezilla.de


http://getbootstrap.com/

http://holdirbootstrap.de/

http://www.gnu.de


D


SachwortverzeichnisSachwortverzeichnisSachwortverzeichnisJOM01

D. Abbildungsverzeichnis

Abb. 1.1 Screenshot der Website www.joomla.org ................................................. 3

Abb. 1.2 Vergleich statischer mit dynamischen Webseiten eines CMS-Systems . 4

Abb. 1.3 Frontendansicht eines Standardtemplates ................................................ 7

Abb. 1.4 Login-Seite zum Backend ........................................................................... 7

Abb. 1.5 Backend mit Kontrollzentrum ................................................................... 8

Abb. 2.1 „Technical Requirements“ auf der Website www.joomla.org ................. 10

Abb. 2.2 Prinzip eines lokalen Testservers ............................................................... 12

Abb. 2.3 XAMPP-Download-Verzeichnis auf der Website www.apachefriends.org .............................................................................. 13

Abb. 2.4 Warnhinweis bei der Installation von XAMPP ........................................ 13

Abb. 2.5 Setup der XAMPP-Installation .................................................................. 14

Abb. 2.6 Bestätigen des Setups .................................................................................. 14

Abb. 2.7 Das XAMPP Control Panel ........................................................................ 15

Abb. 2.8 Sprachauswahl für XAMPP ....................................................................... 15

Abb. 2.9 XAMPP-Startseite ....................................................................................... 16

Abb. 2.10 App-Icon zum Aufruf des XAMPP Control Panels ................................. 17

Abb. 2.11 Screenshot der Website www.mamp.info ................................................. 18

Abb. 2.12 Auswahl Installationstyp ............................................................................ 18

Abb. 2.13 MAMP-Anwendung und MAMP-Startseite im Browser ........................ 19

Abb. 2.14 Standardeinstellung für Apache- und MySQL-Ports .............................. 20

Abb. 2.15 Das Verzeichnis „htdocs“ bei XAMPP und MAMP ................................. 21

Abb. 2.16 Anlegen einer Datenbank mit „phpMyAdmin“ ....................................... 22

Abb. 2.17 Download der deutschen Joomla!-Version ............................................... 23

Abb. 2.18 Entpacken der Installationsdateien ........................................................... 24

Abb. 2.19 Hauptkonfiguration der Joomla!-Installation ........................................... 25

Abb. 2.20 Datenbankkonfiguration der Joomla!-Installation ................................... 27

Abb. 2.21 Zusammenfassung der Konfigurationseinstellungen .............................. 28

Abb. 2.22 Einstellung Zugriffsrechte Mac OS X ....................................................... 29

Abb. 2.23 Löschen des Installationsverzeichnisses ................................................... 30

Abb. 2.24 Erste Ansicht der neuen Joomla!-Website ................................................ 31

Abb. 3.1 Aufbau einer Joomla!-Website und Workflow ......................................... 33

Abb. 3.2 Auf „Smartphone-Größe“ geschrumpfte Browseransichten von Frontend und Backend durch responsive Design .................................... 35

Abb. 3.3 Login mit zuvor festgelegten Benutzernamen und Passwort ................. 36

JOM01 81

D Abbildungsverzeichnis


Abb. 3.4 Startseite des Backends mit Kontrollzentrum ........................................... 37

Abb. 3.5 Menü „System“ mit Untermenüs ............................................................... 37

Abb. 3.6 Konfigurationseinstellungen der Site ......................................................... 39

Abb. 3.7 Konfigurationseinstellungen „System“ ...................................................... 40

Abb. 3.8 Konfigurationseinstellungen „Server“ ....................................................... 41

Abb. 3.9 Globale Einstellungen der Zugriffsberechtigungen ................................. 42

Abb. 3.10 Textfiltereinstellungen ................................................................................. 43

Abb. 3.11 Systeminformationen .................................................................................. 44

Abb. 3.12 Verzeichnisrechte ......................................................................................... 44

Abb. 3.13 Menü „Benutzer“ mit Untermenüs ........................................................................................... 45

Abb. 3.14 Menüs und Menüeinträge ........................................................................... 46

Abb. 3.15 Menü „Inhalt“ mit Untermenüs .................................................................. 47

Abb. 3.16 Beitragsbearbeitungsfenster mit Optionen ............................................... 48

Abb. 3.17 Übersicht „Beiträge“ .................................................................................... 49

Abb. 3.18 Vorschau Frontend ....................................................................................... 50

Abb. 3.19 Übersicht „Kategorien“ ................................................................................ 50

Abb. 3.20 Ansichten der Medienverwaltung ............................................................. 51

Abb. 3.21 Bild in Medienverwaltung laden ................................................................ 52

Abb. 3.22 Bild in Beitrag einfügen .............................................................................. 53

Abb. 3.23 Vorschau eines Beitrags mit eingefügten Bild .......................................... 54

Abb. 3.24 Menü „Komponenten“ mit Untermenüs ........................................................................................... 55

Abb. 3.25 Menü „Erweiterungen“ mit Untermenüs ........................................................................................... 56

Abb. 3.26 Erweiterungen in der Ansicht „Webkatalog“ ............................................ 57

Abb. 3.27 Übersicht installierter Erweiterungen ....................................................... 58

Abb. 3.28 Übersicht aktiver Module und Auswahl neuer Modultyp ....................... 59

Abb. 3.29 Übersicht Plugins ......................................................................................... 60

Abb. 3.30 Übersicht vorhandener Template-Stile ...................................................... 61

Abb. 3.31 Template-Optionen ...................................................................................... 62

Abb. 3.32 Vorschau der verfügbaren Modulpositionen ............................................. 63

Abb. 3.33 Laden des Logos in die Medienverwaltung .............................................. 64

Abb. 3.34 Kopierter Template-Stil in der Übersicht .................................................. 64

Abb. 3.35 Template-Stil als Standard festlegen .......................................................... 65

Abb. 3.36 Website in der Vorschau ............................................................................. 66

Abb. 3.37 Übersicht installierter Templates und zugehöriger Dateien .................... 67

82 JOM01

Abbildungsverzeichnis D


Abb. 3.38 Übersicht über und Installation von Sprachen ......................................... 68

Abb. 3.39 Das Menü „Hilfe“ mit Untermenüs ........................................................... 69

Abb. 3.40 Optionen eines einzelnen Beitrags ............................................................ 70

Abb. 3.41 Die globalen Beitragsoptionen ................................................................... 71

Abb. 3.42 Bearbeitungsmodus eines Menüeintrags .................................................. 72

Abb. 3.43 Bearbeitungsmodus eines Menümoduls ................................................... 73

Abb. 3.44 Erweiterte Einstellungen eines Menümoduls ........................................... 73

Abb. 3.45 Vorschau der Website im Frontend ........................................................... 74

JOM01 83

E


E. SachwortverzeichnisJOM01

A

Access Control List .......................... 45

Administrator ..... 26, 38, 42, 43, 61, 68

Apache Server ................................. 10

Apache Webserver ..................... 11, 12

Ausgabe, gepufferte ......................... 29

B

Backend ... 8, 30, 35, 36, 40, 41, 45, 50, 55, 61, 68, 69, 75

Bootstrap-Framework ............ 4, 34, 65

C

Cache leeren .................................... 43

Cache-Funktion ............................... 40

configuration.php ................. 29, 41, 43

Content-Management-System .... 1, 3, 8Cookies ...................................... 11, 39

CSS ................. 1, 11, 34, 36, 72, 73, 74

CSS-Selektor .................................... 74

D

Datei ............................................... 18

Datenbanktabellen ..................... 27, 30

Drag & Drop ...................................... 6

E

Einstellungen, globale ...................... 69

F

FileZilla ..................................... 11, 13

Fluid-Layout .................................... 65

Freigeben, globales ........................... 43

Frontend 8, 9, 26, 35, 38, 41, 46, 47, 49, 54, 55, 56, 61, 62, 65, 68, 69, 70, 72, 75

FTP-Server ....................................... 11

G

General Public License ................... 3, 8GNU GPL .......................................... 3Google-Font ..................................... 65

H

Hauptbeitrag .................................... 49

Haupteintrag .............................. 47, 49

htdocs ........................................ 20, 32

J

JavaScript .................................. 11, 34

Joomla! Extension Directory ............. 56

Joomla!-Aktualisierung ........ 34, 55, 75

K

Kategorien 34, 35, 38, 47, 48, 50, 55, 56, 69, 70, 75

Komponenten 10, 13, 14, 35, 54, 56, 66, 69, 74

Konfigurationsdatei .......................... 41

Kontrollzentrum .............. 8, 36, 55, 75

L

localhost .................................... 15, 21

Login ................. 7, 8, 9, 11, 26, 34, 69

M

MAMP ............................ 17, 18, 19, 20

MAMP Control Panel ....................... 20

Medienverwaltung ... 34, 47, 51, 53, 63, 65

Metadaten, globale ........................... 38

Metatags .......................................... 49

mobileready ....................................... 4Module ......... 15, 35, 36, 45, 58, 72, 74

Modulpositionen ........................ 61, 72

MySQL .. 3, 5, 8, 10, 11, 12, 15, 16, 19, 21, 26, 36

MySQL-Datenbank ...................... 8, 10

MySQLi ........................................... 26

O

Online-Lernplattform ....................... 49

Open-Source-Software ....................... 3Overrides ................................... 66, 69

P

Perl ............................................ 11, 13

84 JOM01

Sachwortverzeichnis E


PHP .. 1, 3, 8, 10, 11, 12, 26, 34, 43, 62

Plugins ........................... 56, 58, 60, 74

Protostar ............................... 61, 66, 72

Q

Query String .................................... 62

R

Releasestrategie ................................. 8Remote Server ................................. 41

Responsive Webdesign ....................... 6root-Verzeichnis .......................... 20, 21

S

Serverkonfiguration ......................... 21

Site offline ....................................... 26

Sitzungslänge .............................. 40, 75

Sprachpaket ..................................... 68

Sprachpakete .............................. 58, 68

Stylesheets ....................................... 36

Suchmaschinen-Robots .................... 38

Super-Administrator ........................ 42

T

Tabellenpräfix .................................. 27

Templates .. 4, 8, 35, 57, 58, 61, 62, 64, 66, 74, 75

TinyMCE ......................................... 48

U

Uncategorised .................................. 48

V

Vorschau von Modulpositionen ........ 62

W

Web-Developer ................................ 11

Webhost .......................................... 11

Workflow ....................... 35, 40, 47, 75

X

XAMPP 1, 11, 12, 13, 14, 15, 16, 20, 21, 32, 36

XAMPP Control Panel ..................... 14

Z

zip-Datei .................................... 23, 57

Zugriffsrechte ............................ 29, 41

JOM01 85


86 JOM01

F


C

F. EinsendeaufgabeEine Website mit Joomla! erstellen – Teil 1

J

Name: Vorname:

Postleitzahl und Ort: Straße:

Studien- bzw. Vertrags-Nr.:

JOM01

Bitte reichen Sie Ihre Lösungen über die Online-Lernplattform ein, oder schicken Sie uns

diese per Post. Geben Sie bitte immer den Code zum Studienheft an (siehe oben rechts).

ode:

OM01-XX1-N01

Fernlehrer/in:

Datum:

Note:
Lehrgangs-Nr.:0515N01
Unterschrift Fernlehrer/in:

Die Aufgaben 1 bis 10 sind Single-Choice-Aufgaben mit jeweils nur einer richtigen Ant-wort pro Aufgabe.

1. Das CMS Joomla!

a) kann nur auf einem entfernten Webserver ausgeführt werden.

b) ist nicht für mobile Endgeräte geeignet.

c) ist rein statisch aufgebaut.

d) kann nicht ohne eine Skriptsprache mit Datenbankunterstützung betrieben werden.

2. Die Testserver-Anwendung XAMPP

a) kann nicht für Mac OS X installiert werden.

b) wird lokal mit http://www.apachefriends.org aufgerufen.

c) enthält ein Tool zur Datenbankverwaltung.

d) benötigt zum lokalen Betrieb immer eine Internetverbindung.

3. Beim Installationsprozesses von Joomla! muss nicht unbedingt angegeben werden:

a) Name der Joomla!-Site

b) Beschreibung der Website für Suchmaschinen

c) Admin-Benutzername

d) Tabellenpräfix

87

http://www.apachefriends.org

F Einsendeaufgabe


4. Die Datei „configuration.php“

a) darf während des Installationsvorgangs nicht schreibgeschützt sein.

b) muss nach der Installation gelöscht werden.

c) enthält keine Information über Datenbank und Server.

d) kann nicht angepasst oder geändert werden.

5. Was sollte beim Aufbau einer neuen Joomla!-Website zuerst in Angriff genommen werden?

a) Zuweisung von Menüeinträgen

b) Erstellung der Inhalte

c) Anpassung von Stylesheets

d) Ergänzung von Modulen

6. In welcher Rubrik der Joomla!-Systemkonfiguration können Sie den Zugriff auf die Website blockieren?

a) Site

b) System

c) Server

d) Berechtigungen

7. Was versteht man unter „globales Freigeben“?

a) das Festlegen globaler Metadaten

b) suchmaschinenfreundliche URLs

c) Zugriffsberechtigung von Benutzern freigeben

d) Einchecken von Inhaltsobjekten

8. Mit welcher Option weisen Sie einem Beitrag die Veröffentlichung auf der Startseite zu?

a) Status: Veröffentlicht

b) Haupteintrag: Ja

c) Zugriffsebene: Öffentlich

d) Kategorie: Uncategorised

88 JOM01

Einsendeaufgabe F


9. Welcher an die URL einer Joomla!-Website angehängte String kann im Frontend eine Vorschau der Modulpositionen anzeigen?

a) /?tp=1

b) /administrator/?tp=1

c) /position/?tp=1

d) /?tp=0

10. Wo können Sie den Titel eines Menüeintrags ändern?

a) Bearbeitungsmodus Administrationsmenü: Option Titel

b) Bearbeitungsmodus Administrationsmenü: Option Titel anzeigen

c) Bearbeitungsmodus Menüeintrag: Option Seitenüberschrift anzeigen

d) Bearbeitungsmodus Menüeintrag: Option Menütitel

11. Erstellen Sie vom Beitrag „Willkommen im Ferienland“ eine Kopie und benennen Sie diese „Auf Wiedersehen im Ferienland“. Der Status sollte Veröffentlicht sein, aber der Beitrag soll nicht auf der Startseite erscheinen. Tauschen Sie das Beitragsbild ge-gen ein Bild Ihrer Wahl aus. Als Maßnahme der Suchmaschinenoptimierung erstel-len Sie eine Metabeschreibung sowie ca. 5–6 Metaschlüsselwörter. Zudem sollte die Veröffentlichung ca. 14 Tage nach der Erstellung automatisch beendet werden und die Such-Robots erhalten die Anweisung noindex, nofollow. Erstellen Sie Screen-shots von der Beitragsbearbeitung im Backend, aus denen die oben gemachten Änderungen und Einstellungen des neuen Beitrags ersichtlich sind. Senden Sie die beiden Screenshots zusammen mit Ihrer ESA ein.

12. Erklären Sie in ein paar Sätzen die Funktion von Templates.

13. Erläutern Sie in ein paar Sätzen die grundsätzliche Vorgehensweise, wenn Sie einen neuen Template-Stil des Templates Protostar mit einer anderen Template-Farbe, neu-er Hintergrundfarbe und neuem Logo auf Ihre Site anwenden wollen.

JOM01 89


$