Content Management Systeme Content-Management-Systeme Ein Content-Management-System (CMS, übersetzt: Inhaltsverwaltungssystem) ist ein System zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Internet-Inhalten. Ein Autor kann ein solches System in den meisten Fällen ohne Programmier- oder HTML-Kenntnisse bedienen. Der darzustellende Informationsgehalt wird in diesem Zusammenhang als Content (Inhalt) bezeichnet. Zu den bekanntesten Open-Source-CMS zählen Joomla, Drupal, TYPO3 und Wordpress. Joomla! Aktuelle Version 3.6x Stand 12-2016 …ist ein populäres freies Content-ManagementSystem (CMS), das aus dem Open-Source-Projekt Mambo hervorgegangen ist und inzwischen in den unterschiedlichsten Anwendungsbereichen weltweit zum Einsatz kommt. Seine Hauptanwendung findet Joomla! beim Erstellen von Webseiten. Merkmale von Joomla! Joomla! ist freie Software und steht unter der GNU (General Public License) Benötigt einen Webserver (Apache ab 1.13.19) Basiert auf der Skriptsprache PHP 5 PHP erzeugt serverseitig dynamischem HTML-Code MySQLi als Datenbank (ab 3.23) (alle Inhalte werden in einer Datenbank gespeichert) WYSIWYG-Prinzip (what you see is what you get) Es ist möglich fast ohne Vorkenntnisse eine Website zu erstellen Frontend – für den Besucher sichtbare Website http://www.webdesign.emg-haar.de Backend – Verwaltung und Programmierung der Website http://www.webdesign.emg-haar.de/administrator Grundstruktur und Bedienung von Joomla! Inhalte Kategorien Beiträge Medien Komponenten Banner Kontakte Weblinks Erweiterungen Module (Frontend) Plugins (Backend) Templates Das Joomla! Template Das Template bestimmt das „Gesicht“ des Frontend. In ihm sind alle Anweisungen gespeichert, die das Aussehen der Website bestimmen z.B. Layout, Farbschema, Bildund Modulpositionen, Formatierung der Beiträge. Das geschieht weitgehend unabhängig vom Inhalt der Webseite. So kann ohne großen Aufwand das Design der Website komplett verändert werden, ohne deren Inhalt anpassen zu müssen. Zu einem Template gehören immer die Dateien: index.php, mindestens eine CSS-Datei und die Installationsdatei templateDetails.xml. Beispiele für zwei mitgelieferte Standard-Templates sind z.B. Tausende weitere Templates finden sich z.T. kostenlos im Internet... Organisation von Joomla! – Überblick Website im Browser HTML-Code Ebene 1 Ebene 2 Kategorie 1 Kategorie 2 Kategorie 3 lokaler PC Kategorie 4 Beitrag Beitrag Beitrag Beitrag Beitrag Beitrag Beitrag Beitrag Ebene 3 1 2 3 4 5 6 7 8 Ebene 4 Joomla! Template Medien, Menüs, Medien, Menüs, Medien, Menüs, Medien, Menüs, Module, Plugins Module, Plugins Module, Plugins Module, Plugins HTML-Code <<-->> PHP-Script, Java-Skript <<-->> Joomla!-Installation Ebene 5 Webserver MySQL-Datenbank, PHP-Server Organisation von Joomla! – Beiträge und Kategorien Eine Joomla!-Website gliedert sich grundsätzlich in Beiträge und Kategorien. Kategorien entsprechen einem hierarchischem Ordner-System, die Räume für Beiträge bereitstellen: Die Website des Ernst-Mach-Gymnasiums Kategorie 1 Informationen Beitrag 1 Beitrag 2 Beitrag 3 Unterkategorie 1 SMV-Seminar Kategorie 2 Schulleben Unterkategorie 2 Projekte Unterkategorie 3 Impressionen Kategorie 3 Impressum Beitrag 1 Beitrag 2 Termine Lehrersprechstunden Schulberatung Beitrag 1 SMV-Seminar Beiträge 2…10 AK-Infos Beitrag 1 Umweltschule Beitrag 2 Webdesign Beitrag 3 … Chor & Band Beitrag 1 Klassenfotos Beitrag 2 ... Impressionen Ansprechpartner, Postanschrift Disclaimer z.B. Medien, Menüs, Module, Plugins… zu den jeweiligen Kategorien und Beiträgen z.B. Banner, DropdownMenüs; Kalender, uvm. Testinstallation von Jooma! – auch OHNE Webhoster XAMPP ist eine Distribution des Webservers Apache mit der Datenbank MySQL und den Skriptsprachen PHP und Perl, die es ermöglicht diese Programme auf sehr einfache Weise zu installieren. Mit Xampp kann das CMS auch ohne einen echten Webhoster auf dem lokalen Rechner installiert und getestet werden! Mit XAMPP USB Lite existiert sogar eine portable Version für den USB-Stick! Installation / Entpacken von XAMPP und erster Funktionstest Mit der XAMPP Control Application geht es weiter: Pannel Starten Sie den Webserver Apache Starten Sie die Datenbank MySQL Anzeigen auf Grün? Installation von Jooma! – Schritt 1: Starten von XAMPP Aktiviere XAMPP und gib im Adressfeld des Browsers die folgende Domain bzw. IP-Adresse ein: http://localhost oder http://127.0.0.1 Sofern die XAMPP-Installation korrekt verlaufen ist, startet die Begrüßungsseite von XAMPP. Installation von Jooma! – Schritt 2: Erstellen einer Datenbank Rufe die Verwaltung der SQL-Datenbank auf: phpMyAdmin Erstelle eine neue Datenbank z.B. mit dem Namen „joomla“ Installation von Jooma! – Schritt 3: Vorbereitung der Installation 1. Lade das vollständige Installationspaket von Joomla! herunter: https://downloads.joomla.org/de/cms Joomla! 3.6.5 Full Package (vom 14.12.2016) Deutsche Installation bzw. Sprachdatei erhältlich bei: http://www.jgerman.de 2. Erstelle im XAMPP-Ordner ein Unterverzeichnis innerhalb des Ordners »htdocs« z.B. mit dem Namen »joomla« 3. Extrahiere alle Dateien des Joomla!-Installationspaketes in das neu erstellte Unterverzeichnis 4. Öffne nun im Browser die Seite: http://localhost/joomla ( Der Pfadname nach localhost/ muss immer dem Installationsverzeichnis von Joomla! im Verzeichnis „htdocs“ entsprechen) 5. Ist alles korrekt abgelaufen startet der Joomla-Installationsassistent Installation von Jooma! – Schritt 4: Konfiguration Auswahl der Sprache (DE-CH-AT) Name der Webseite Beschreibung der Webseite (kann auch leer bleiben) Gültige Emailadresse Benutzername für die Anmeldung an Joomla! (Login) ( niemals: admin, webmaster, …) Passwort für die Anmeldung an Joomla! ( niemals: admin, password, ...) Installation von Jooma! – Schritt 5: Datenbank Datenbanktyp: Servername: Benutzername: MySQLi localhost root ( Bei einem echten Webserver immer einen anderen Namen verwenden!) Passwort: leer lassen ( Bei einem echten Webserver muss immer ein Passwort vorliegen!) Datenbankname z.B.: joomla ( Name muss der mit PHPMyAdmin erstellten Datenbank entsprechen!) Tabellenpräfix z.B.: jml_ ( Der Präfix besteht aus 3 bis 4 Zeichen und muss mit einem Unterstrich enden. Der Präfix darf nicht schon in der Datenbank verwendet sein!) Installation von Jooma! – Schritt 6: Überblick In der Zusammenfassung können die Einstellungen noch einmal überprüft werden. Zudem können optional noch (englische) Installationsinhalte eingerichtet werden: keine: es wird eine saubere, weitgehend leere Joomla! Installation eingerichtet. Dies empfiehlt sich beim Start eines neuen Website-Projektes für erfahrene Anwender. Englische (GB) Beispieldateien: es werden entsprechend der Auswahl Beispielinhalte installiert. Dies ist für unerfahrene Nutzer empfehlenswert, die an vorhandenen Beispielen den Umgang mit Joomla! erlernen wollen. Installation von Jooma! – Schritt 7: Installation Mit dem Click auf die Taste „Installation“ beginnt das Script mit der Installation auf dem XAMPP-Server. Dies kann einige Minuten in Anspruch nehmen. Installation von Jooma! – Schritt 8: Abschluss der Installation Aus Sicherheitsgründen verlangt Joomla! die Löschung des Installationsverzeichnisses. Mit der Taste „Website“ wird das Frontend der Joomla!-Seite aufgerufen. (http://www.localhost/joomla) Mit der Taste „Administrator“ gelangt auf das Backend der Joomla!Installation. (http://www.localhost/joomla/administrator) Installation von Jooma! – Schritt 9: Prüfen des Frontends Nach der Eingabe der Adresse http://localhost/joomla sollten Sie das Standard-Template von Joomla! in Ihrem Browser sehen. Im Anschluss können im Backend weitere Einstellungen vorgenommen werden… Fehlermeldung nach erfolgreicher Joomla! Installation Fehlermeldung 1 “Strict Standards: Accessing static property JCache::$_handler as non static in…. <Pfadangabe>" Diese Fehlermeldung beruht auf einer unpassenden Einstellung in der Datei php.ini im Verzeichnis /xampp/php. Lösung: Suchen und ersetzten Sie in der Datei php.ini die Codezeile error_reporting = E_ALL | E_STRICT durch die Codezeile: error_reporting = E_ALL & ~E_NOTICE Anschließend müssen Sie den Apache-Server neu starten! Import einer bestehenden Joomla!-Seite - 1. Datenbankimport (1) Rufen Sie unter XAMPP die Einstellungen für phpMyAdmin auf! (2) Erstellen Sie unter der Rubrik Datenbanken / „neue Datenbank anlegen“ eine neue Datenbank mit dem Namen Ihrer mySQL-Backup-Datenbank (z.B. db23651_9) (3) Wählen Sie die leere Datenbank im Dropdownmenü aus und wählen Sie Importieren! (4) Wählen Sie unter Durchsuchen Ihre Sicherungsdatei aus (z.B. db23651_9.sql.zip) und bestätigen Sie mit OK! Import einer bestehenden Joomla!-Seite – 2. Joomla-Installation (1) Suchen Sie im XAMPP-Verzeichnis nach dem Unterverzeichnis /htdocs ! (2) Erstellen Sie einen neuen Ordner mit dem Namen „joomla“! (3) Kopieren bzw. entpacken Sie alle Daten Ihres JoomlaBackupverzeichnisses in den neuen Ordner! (4) Suchen Sie im Joomla-Verzeichnis die Datei configuration.php und öffnen Sie diese mit einem Texteditor! (5) Passen Sie die Einträge in der configuration.php wie folgt an und speichern Sie diese (überschreiben)! Ansonsten erhalten Sie beim Aufruf der Webseite nur die Fehlermeldung „Infinite loop detected in JError“! Import einer bestehenden Joomla!-Seite – 3. Konfigurationsdatei Änderungen der Datei configuration.php: Änderungen original-Datei public $host = 'localhost'; public $user = 'root'; public $password = ''; leer! public $db = 'db23651_9'; public $dbprefix = 'jos_16'; public $log_path = '/logs'; public $tmp_path = '/tmp'; Speichern Sie im Anschluss die Datei (überschreiben!) und starten Sie das XAMPP Control Panel! Import einer bestehenden Joomla!-Seite – 4. Aufruf der Seite Nach der Eingabe der Adresse http://localhost/joomla sollten Sie die EMG-Website von Joomla! in Ihrem Browser sehen. Herzlichen Glückwunsch!!! Sie können nun mit Ihrer „mobilen EMG-Website“ beliebig experimentieren und sich mit den Möglichkeiten von Joomla vertraut machen! Quellenangaben / Linkverzeichnis Axel Tüting, Webseiten erstellen mit Joomla! 1.7, Francis, 2011 http://www.joomla.de/wissen http://wiki.zum.de/Joomla! http://wiki.zum.de/Schulhomepages_mit_Joomla! http://www.video-joomla.com http://www.christian-pansch.de http://www.akademie.de/programmierungadministration/website-administration/tipps/contentmanagement-systeme/mambo-vor-und-nachteile.html http://www.schulhomepage.de/content_management/joomla/j oomla_einsteigerbuch_kostenlos.php http://www.schulhomepage.de/leitfaden Benutzerverwaltung von Joomla! Aktionen Konfigurieren: Ermöglicht Benutzern dieser Gruppe das Bearbeiten der Optionen dieser Erweiterung Zugriffskomponente: Ermöglicht Benutzern dieser Gruppe den Zugriff auf diese Erweiterung. Erstellen: Ermöglicht Benutzern dieser Gruppe das Erstellen von Inhalten Löschen: Ermöglicht Benutzern dieser Gruppe das Löschen von Inhalten Bearbeiten: Ermöglicht Benutzern dieser Gruppe das Bearbeiten von Inhalten in dieser Erweiterung Status bearbeiten: Ermöglicht Benutzern dieser Gruppe das Ändern des Status von Inhalten in dieser Erweiterung Besitzer bearbeiten: Ermöglicht Benutzern dieser Gruppe das Bearbeiten von übermittelten Inhalten in dieser Erweiterung Einstellungsmöglichkeiten Vererbt bedeutet, dass die Berechtigungen aus der globalen Konfiguration und übergeordneten Gruppe verwendet werden Verweigert bedeutet, dass egal, wie die Einstellungen der übergeordneten Gruppe sind, die Gruppe nicht diese Aktion durchführen darf Erlaubt bedeutet, dass egal, wie die Einstellungen der übergeordneten Gruppe sind, die Gruppe diese Aktion durchführen darf (wenn dieses im Konflikt mit der Konfiguration oder übergeordneten Gruppe steht, wird es keine Auswirkungen haben, ein Konflikt wird durch Verboten (gesperrt) unter Einstellungen angegeben) Auswahl eines Templates Auswahl eines Frameworks Joomla!-Frameworks sind Grundgerüste für die eigene Erstellung von Joomla!-Templates. In diesem Fall sind dies HTML/CSS-Gerüste ohne Farben, Gradienten und Abgrenzungen oder bereits fertige Bausätze mit vielen Einstellmöglichkeiten; es gibt nur die Gestaltung des Menüsystems, Dimensionen, Abstände usw. Praktisch gesehen alle möglichen Elemente mit denen Sie Ihre Programmierkenntnisse und Ihr Gestaltungstalent zum Ausdruck bringen können. Beispiele für Joomla! Frameworks Joomlart T3 Joomshaper Helix3 Gantry Warp 7 http://www.t3-framework.org http://www.joomshaper.com http://www.gantry-framework.org http://yootheme.com/themes/warp-framework https://warptheme.com/blog/top-11-joomla-template-framework-for-developer-2016 https://www.joomlashine.com/joomla-hub/9-joomla-template-frameworks-fur-entwickler.html https://www.tisindia.com/blog/best-template-framework-solutions-for-joomla-developers/ Joomshaper Helix3 Framework + Pagebuilder Responsive Webdesign Beim Responsive Webdesign (RWD), handelt es sich um ein gestalterisches und technisches Prinzip zur Erstellung von Websites, so dass die angezeigten Inhalte auf Eigenschaften des jeweils benutzten Endgeräts reagieren können (Desktop PC, Tablets, Smartphones,). Der grafische Aufbau der Webseite passt sich automatisch an die Eigenschaften des Endgerätes an.