01

Montag, 28.03.2022, 08.00 - 15.00 Uhr

TYPO3

Versionen, Varianten

Einsatz im Seminar: TYPO3 11.5.8 LTS
Website: typo3.org - Erfinder: Kasper Skårhøj

Bereitstellung (Downloads)  in verschiedenen Archivformaten

• tar.gz - Unix/Linux
• zip - Windows

Long Term Support (LTS - eingeführt Jan 2011)

Bedeutet bei TYPO3: jeweils ca. 1,5 Jahre Überschneidung mit neuer LTS Variante mit dann maximal bis zu 6 Jahren Support

Die ersten 3 Jahre Support bestehen aus (engl.) Regular Support (1,5 Jahre) und anschließenden (engl.) Priority Bugfixes Support - danach noch 3 Jahre Sicherheitsupdates per Extended LTS möglich (ELTS - kostenpflichtig)

Versionen:

• 3.0 eingeführt in 2001 - 3er Zweig bis 3.8.1
• 4.4 - 4.5 (LTS ab Jan 2011) - 4.6 - 4.7 (4er Zweig)
• Geplanter Nachfolger "Version 5" - wurde als TYPO3 NEOS entwickelt - Codename: Phoenix
  basiert auf Framework FLOW und wurde von CMS TYPO3 getrennt:
  NEOS (Open Source Content Application Framework)
• 6.0 - 6.1 - 6.2 (LTS ab 25. März 2014 bis min. März 2017)
• 7.0 - 7.1 - 7.2 - ... - 7.6 LTS ab 10.11.2015
  aktuell: im Extended Support (Optional) bis 01.12.2021
• 8.0 - ... - 8.7 LTS ab 04.04.2017 (aktuell 8.7.29)
  aktuell: Priority Bugfixes bis 31.03.2020
  dann Extended Support (Optional) bis 31.03.2023

Aktuelle Versionen:

• 9.5 LTS (Aktuelle Version: 9.5.26)
  Einführung Version 9.0 am 14.11.2017
  Version 9.5 LTS eingeführt am 02. Oktober 2018
  Regular Maintenance bis 30.04.2020 - dann Priority Bugfixes bis 30.09.2021
  dann Extended Support (Optional und kostenpflichtig) bis 31.10.2024
• 10.4 LTS - Einführung am 21.04.2020
• 11.5 LTS - aktuelle Long Term Support Version - veröffentlicht 05.10.2021

Hier die "dynamische" Grafik für die TYPO3-Roadmap:

Der jeweilige Planungsstatus kann jeweils über die TYPO3 Roadmap nachgeschlagen werden!

Auf der Roadmap Seite kann auch eine Tabelle eingesehen werden mit der PHP Kompatibilität für die TYPO3 Versionen 6.2 bis 11:

• mit PHP 7.2 + PHP 7.3 hat man die Vorrausetzung für TYPO3 Versionen 7 bis 10
• mit PHP 7.4 werden die TYPO3 Versionen 8 bis 11 unterstützt
• aktuell unterstützt nur TYPO3 Version 11 die PHP 8.0 bzw. 8.1!

TYPO3 Hoster

Fast alle Hoster können TYPO3 "irgendwie" hosten - aber manche haben sich auf die speziellen Anforderungen spezialisiert und bieten sogar TYPO3-Projekte per "Klick" vollständig mit Erweiterungen (wenn man diese wünscht) und Design!

Spezielle Anforderungen von TYPO3: (ohne Anspruch auf Vollständigkeit ;-)

• Performance
• TYPO3 Aktualisierungen
• TYPO3-Sources verlinken (symlinks)
• php.ini-Anforderungen/Konfigurationen
• ImageMagick/GraphicsMagick
• Entwicklerumgebungen mit Composer oder DDEV
• zusätzliche Unterstützung für TYPO3-Extensions
• Sicherheit
• ELTS

TYPO3-Hosterbeispiele: Mittwald oder JWeiland (TYPO3 Template - Musterprojekt JWeiland)

TYPO3 CMS

Die folgenden Zusammenstellungen zeigen die wichtigsten Bestandteile und Techniken beispielhafter TYPO3-Version 8/9/10/11 Installationen.

Tipp: Analyse der TYPO3-Core-Technik durch Vergleich der späteren fertigen TYPO3-Projektseite und noch nicht durchinstallierten "typo3-xyz"-Projekten.

Ein TYPO3-Projekt besteht aus folgenden Komponenten

• TYPO3-Projekt-Datenbank
  siehe Verwaltung mit PhpMyAdmin des XAMPP:  localhost/phpmyadmin  
  mit ca. 50 Tabellen in Datenbanken wie typo3_seminar oder typo3_demo  
  hier: DB-Prefixe typo3_ ; Anm.: bei Hostern ist das so in den meisten Hosting-Paketen nicht möglich!
• TYPO3-Core
  ./typo3 (eigentlicher TYPO3-Kern)
  ./vendor (Zusatztechniken - früher in Unterordner ./typo3/contrib) und
  index.php   Hauptdatei der dynamischen, serverseitigen PHP-Technik
• TYPO3-Website - diese Ordner werden alle durch den Installprozess erstellt!
  ./fileadmin (Dateispeicher)
  ./typo3conf (Konfigurationen, Erweiterungen)
  ./typo3temp (Temporäres)
  ./uploads (sollte nach TYPO3 Versionen unterschieden und in Praxis eigentlich vermieden werden)

Der eigentliche Clou hierbei auf Linux-Webservern - also echten LAMP Systemen:
Man hat den TYPO3-Core (z.B. Ordnerstruktur: typo3_src/typo3_src-11.1.1) als Quellordner und verlinkt den Quellhauptordner ./typo3 und die Datei index.php über einen Symlink (Linux-Tool: ln -s) typo3_src im Projektordner!

Eine Beispielhafte Installations-Anleitung für TYPO3 findet sich im Hauptordner in Datei Install.md
Anm.: md - Markdown Textdatei mit Links zu den Anleigungen auf typo3.org.

Dort kann man auch eine Anleitung zum Verlinken auf Windows Systemen (Tool: mklink) finden. Von dieser Umsetzung rate ich an dieser Stelle aber ab.
Am Ende unserer Bemühungen und Trainings landen die TYPO3-Projekte auf jeden Fall auf einem Linux-System!

TYPO3 Installation

Die Installation wird für die Teilnehmer in einer "Schritt-für-Schritt"-Anleitung praktisch durchgeführt und gerne mehrfach im Seminar wiederholt.

Installation:  Version: 11.5.8  (aktuelle 11.5 LTS seit Okt. 2021)

Vorbereitung: Installationsarchiv (*.zip) für die Version herunterladen/bereitstellen und sauber entpacken in Ordner
C:\xampp-cmsod\htdocs\typo3\www.typo3-demo.local    

Beachten: keine (zusätzlichen) Unterordner produzieren!

Installationsprozess / Setup starten

Aufrufen der Installation mittels Browser mit Adresse (URL): 
http://www.typo3-demo.local  

Entsperren der Installation mittels Datei FIRST_INSTALL im Hauptverzeichnis der TYPO3-Installation

Zugang zum Datenbankserver (mit XAMPP Standard-User: (Benutzer / Passwort)

• root / "leeres Kennwort"  und
• Datenbank typo3_demo auswählen oder benennen

Anm.: beim XAMPP-CMSOD bereits vorhanden bzw. anlegen lassen. Durch die Nutzung einer Windows-AMP-Umgebung gibt es diverse "Fehlermeldungen", die man an dieser Stelle übergehen darf. Auf einem Linux-System sollte es solche Meldungen nicht geben. Das Fortsetzen der Installation "trotz der Fehler" kann eine gewisse Zeit kosten!

Das Anlegen einer Datenbank geht nur in einer XAMPP-Umgebung. Beim normalen Hoster muss eine Datenbank (DB) immer vorher manuell angelegt werden und die Zugangsdaten (Host/Server, DB-Name, DB-User, DB-Passwort) müssen bei der TYPO3-Installation bereitgehalten und eingetragen werden.

Anm.: entweder Datenbank-Konnektion mittels

• TCP/IP-Netzwerkverbindung (Standard)
• Socket

Bei Socket und demselben Rechner als Webserver + Datenbankserver wird dateiorientiert gehandelt - das kann etwas schneller sein - aber:
Standard/Empfehlung: TCP/IP-Netzwerkverbindung

Übersicht: lokaler Ordner vs. Web-URL und Datenbank

TYPO-Benutzer "admin" aus der Installation (Backend-User mit Superadmin-Rechten) und gewünschtem Kennwort
Anm.: in meinen CMSOD-Projekten, die ich an TN verteile wird die User/Password-Kombination admin/cmsodcmsod genutzt.

TYPO3 Erstkonfigurationen

Erstes Anmelden am BE mit dem User "admin" - erster Blick in das Backend (Version checken oben links)

Backend-Adresse (BE-URL): (siehe auch Ordner-Struktur TYPO3-Projekt)
http://www.typo3-demo.local/typo3  

Install-Tool (URL): (leitet dann auf das Install-Tool mit eigenem Kennwort - kein Benutzer)
http://www.typo3-demo.local/typo3/install.php 

Das Kennwort für das Install-Tool entspricht (anfangs) dem vom Install-User "admin" und sollte auf Produktionssystemen natürlich geändert werden: siehe Install-Tool
Profi-Trick: Install-Tool Passwort wird in der Datei ./typo3conf/LocalConfiguration.php  als verschlüsselter "Hash"-Wert hinterlegt..

Erste Grundeinstellungen vornehmen:

Backend-Sprache (BE) "german" konfigurieren

Über Modul Admin Tools -> Language die Sprache "German" für alle (möglichen) Extensions des TYPO3-Systems nachinstallieren;
Danach über Kopfleiste - User - User Settings die Sprache für "admin" User auf Deutsch umstellen und mit Ab-/Anmelden das BE aktualisieren.

Grafikunterstützung (mit PHP-GD-Bibliothek und speziellen Grafik-Tools)

GD-Unterstützung gecheckt und konfiguriert über Install Tool - Test Setup

Grafik-Tools für TYPO3:

• ImageMagick (www.imagemagick.org) oder
• GraphicsMagick (www.graphicsmagick.org)

In XAMPP-CMSOD ist eine Version Imagemagick im "XAMPP-CMSOD Tools-Ordner"
C:\xampp-cmsod\_tools\ImageMagick-7.0.7-0\ vorbereitet worden.

Konfigurationen/Übung: die notwendigen zwei Pfade in der Gesamt-Konfiguration von TYPO3 eintragen (Originalpfade: /usr/bin )
Beachten: Backslashes (umgekehrte Schrägstriche) auf Windows-Systemen und abschließenden Backslash nicht vergessen!

Die Konfiguration ist wichtig für Grafikverarbeitungen innerhalb von TYPO3 oder auch für die Thumbnails für Grafiken/Bilder im TYPO3-Backend und Bildgenerierungen im Frontend.

Anm.: Formate PDF und AI nur mit Ghostscript-Unterstützung möglich; auf Windows Systemen nur mit erheblichem Aufwand.

TYPO3 Seiten

Seitenbaumstruktur erstellen
Wir erstellen eine neue Seite im Seitenbaum - gerne neue "Drag & Drop" Techniken im BE nutzen oder die TYPO3 Kontext-Menü per Klick.
Die wechselnden Meldungen im Frontend (bzw. über das Modul Web - Anzeigen) beobachten:

Nach dem Anlegen der neuen Seite ändert sich die Angabe des Grundes (engl. Reason): No TypoScript template found.

Ein "Hello World" Template ist über das gleichnamige Modul Web - Template auf der Ebene unserer neuen Root-Page schnell erstellt.

Die neue Seiten müssen immer wieder aktiviert werden - deaktivierte Seiten können im BE als "preview" begutachtet werden.

Hierarchie von Seiten erstellen und die Seiten-IDs (PageIDs):

• Startseite [ID=1] - Wurzelseite (engl. Root-Page) der Site
  (Anm.: später arbeiten wir mit Verweisen zu/von Unterseite)
  • Start [ID=2]  (hat URL ./index.php?id=2 )
  • Unterseite 1 [ID=3]
  • Unterseite 2 [ID=4]

Anm.: (aller-)oberste TYPO3-Hierarchie (siehe TYPO3-Logo) hat die ID=0 !

TYPO3 Seitenverwaltung

Für das Management der Ausgabe-URLs und aller länder- und sprachenspezifischen ist das Modul Seitenverwaltung - Seiten verantwortlich. Im englischen heißt das Modul Sitemanagement. Und mit Site bezeichnet man die Gesamtheit der Webpräsenz (dt. Webseite) während man mit Page eine einzelne Seite meint.

Mit einer ersten Seite (engl. page) wird eine automatisch generierte Grundkonfiguration ausgeliefert.

Die entsprechende Konfigurationsdatei: ./typo3conf/sites/autogenerated-1-c4ca42244550/config.yaml

Für das Verständnis der Funktionen dieser TYPO3-Technik (s.a Ersatz der klassischen Extension realurl) sollte man auch immer mal in den Quellcode der ausgelieferten Website schauen. Beim Mozilla Firefox bieten sich hierfür die Entwicklerwerkzeuge (Umschalten + Strg + I) an oder man lässt sich den Quellcode direkt anzeigen (oft: Strg + U).

TYPO3 Content Elements (CE)

Über das Modul "Web" kann man den einzelnen Seiten verschiedene Inhaltsformate einfügen (CE).

Bitte achten Sie von Anfang an auf die Hierarchie der beteiligten Techniken:

• Seitenbaum (tree)
• Einzelne Seite (page)
• Inhaltsobjekte auf Seite (CE - Content Element)

Die Seiteninhalte landen als Datenbank-Inhalte in den CE auf einer Page ;-) - Verständnis ist wirklich wichtig!

CE (Content Elements) - Seiteninhaltselemente

Übungen: Erste einfache Inhalte in Seiten erstellen - CE Typ: Text - also einfach Überschriften mit Texten.
Interessanter wird es dann später mit CE Typ: Text & Bilder

Es folgt eine kurze Übersicht zu den Standard-Spalten von TYPO3 - in den neuen TYPO3-Versionen (ab Version 9) wird nur noch Spalte "0" vorgegeben!

Anm.: die weiteren Inhaltsbereiche für unsere TYPO3-Seiten bauen wir uns später mit den Backend-Layouts:
dort weisen wir unsere eigenen "Spalten/Datensätze"-Nummern und Bezeichner zu!

Aufruf von Seiten: manuell über die URLs im Browser oder im BE anzeigen lassen.

Templates / Erweiterungstemplate (+ext)

Irritierender Weise spricht die TYPO3 Technik bei den Vorschriften für den Zusammenbau und die Auslieferungen von TYPO3 Inhalten von sogenannten Templates - oder genauer gesagt TypoScript Templates.

Das Root-Template (auf Root-Page Level) sorgt für eine Ausgabe und alle

Erweiterungs Templates (+ext)
Bitte nicht verwechseln mit den nötigen statischen TypoScript-Templates für Erweiterungen!

Hier sind Verschachtelungen / Erweiterungen / Anpassungen von TypoScript-Templates in der Seitenbaumstruktur gemeint, mit denen man Einstellungen überschreiben kann oder auf mehrere Templates in der Seitenstruktur verteilen kann{code lang:freebasic showtitle:false lines:true hidden:false}# Überschreiben von Wert von page.10 TEXT:
page.10.value = Hallo Welt!
# Entfernen/Löschen von page.20
page.20 >
# Neues Objekt mit page.50
page.50 = TEXT
page.50.value = Noch ein Absatz{/code}Übungsbeispiele wie im Code oder: meta-Tags überschreiben, Inhalte von TS-Objekten (TEXT - value) überschreiben

TYPO3 Setup-TypoScript (Setup-TS)

Damit unser TYPO3-CMS Seiten an das Frontend ausliefert, benötigt es entsprechende
Arbeitsanweisungen: TypoScript (TS)! Dieses TS kann an verschiedenen Stellen im TYPO3 Anwendung finden - wir fangen hier mit dem Setup-TS an.

TypoScript cObject (Content Objects)

Erste Beispiele:

• PAGE
• TEXT

stehen rechts von Gleichheitszeichen und müssen groß geschrieben werden.
Die Zuweisung links vom "=" kann selbst gewählt werden, also z.B. page = PAGE oder auch seite = PAGE.

TypoScript Einführung (hier: Setup-TS)

Anm. zum Editor:
Entweder Notepad++ mit Syntax-Highlighting und userDefinedLang.xml für TYPO3 TypoScript aufrüsten!
Installation der XML: Menü Sprachen - Eigene Sprachen definieren... - Schaltfläche: Importieren - Notepad neustarten

Oder gleich zum Microsoft Visual Studio Code greifen und die TypoScript Erweiterung von Benjamin Kott installieren.

Erste Infos zu TypoScript-Code:

• Nutzung von geschweiften Klammern (containment) für das Zusammenfassen von sich wiederholenden TS-Zeilen
• Kopieren von Objekten mittels <  (Kleiner-Zeichen / Spitze Klammer auf)
• Reihenfolgen von Objekten mittels Zahlen also Objekteigenschaften: seite.10, seite.20, ...
• Meta-Tags für description, author per TS anpassen
• Konfigurieren des HTML Doctype mittels seite.config.doctype
• Kommentieren mit #

Hier beispielhafter TypoScript-Code:{code lang:freebasic showtitle:false lines:true hidden:false}# Default PAGE object:
# page = PAGE
# page.10 = TEXT
# page.10.value = HELLO WORLD!
# allgemeine Konfigurationen:
config.htmlTag_langKey = de
# Default PAGE object:
seite = PAGE
# seit 6.2 wird HTML bzw. HTML5 standardmäßig ausgeliefert!
seite.config.doctype = html5
seite.meta.DESCRIPTION = Test mit TYPO3
seite.meta.KEYWORDS = TYPO3, Bildungurlaub, VHS Braunschweig
seite.meta.author = J. Brandes
seite.10 = TEXT
seite.10.value = <p>HELLO WORLD - noch mal hallo Joe!</p>
seite.20 = TEXT
seite.20.value = <p>Noch ein Hallo!</p>
# mit Hilfe von styles.content.get die Datensätze
# für die Spalte 0 (Normal) aus DB holen:
seite.100 < styles.content.get
# jetzt noch die Inhalte aus Spalte Links (bei v9 nicht mehr vorhanden!)
# dort ist colPos allerdings gleich 1
seite.200 < styles.content.get
seite.200.select.where = colPos=1{/code}

WICHTIG / stets erinnern (siehe später auch bei Extensions):
Für die Auslieferung der "Fluid Content Elements" (fluid_styled_content) in seite.100 < styles.content.get 
muss das gleichnamige Statische Template (fluid_styled_content) im Template eingebunden werden:
Template bearbeiten - Register: Enthält - Statisches Template einschließen!

Backend-Layouts

Ab der TYPO3 v9 gibt es bei den Seiteninhaltselementen "nur" noch die Datenspalte "Normal (dt.) / normal (en.)". Für weitere Inhalte auf einer Website benötigen wir noch weitere Spalten für Inhaltselemente. Unser Auslieferungsbeispiel für die Website (HTML-CSS-Template!) ist eine klassische Blog-Seite als 2-Spalter:

• Inhalt des Blogs
• Seitenrand mit Unternavigationen und/oder Zusatzinfos

Neues BE-Layout erstellen:

Mittels Web -> Liste auf Ebene Seiten-Root einen neuen Datensatz vom Typ "Backend-Layout" erstellen und dann später über die Seiteneigenschaften im Register "Erscheinungsbild" als BE-Layout für die aktuelle Seite (und für die Unterseiten) festgelegen.
Für die Auswahlmöglichkeiten für BE-Layouts können auch kleine Info-Grafiken bereitgestellt werden.

Vorschlag für BE-Layout: (s.a. oben klassische "Spalten/colPos" in v6/7/8)

Die "zwischengespeicherten" Ergebnisse temp.main und temp.sidebar werden im weiteren Setup-TS FLUIDTEMPLATE Variablen zugewiesen und somit in unseren Ausgaben im HTML/CSS-Style nutzbar.

Später: die ausgewählten BE-Layouts weisen dann auch gezielt gewünschte HTML-/CSS-Templates zu: z.B. Blog mit Sidebar Rechts oder Links.

Es folgen verschiedene Screenshots aus TYPO3-Seminaren. Die hier als Bildgalerien dargestellen Bildschirmfotos stehen einen kleinen Teil der Original-Screenshots aus den jeweiligen Seminaren dar, die den Teilnehmern zum Seminarende zur Verfügung gestellt werden (Anm.: quasi Diashow der Seminartage mit oft mehr als 250 Fotos).

Screenshots aus Seminarwoche:

Screenshots aus Vorseminaren TYPO3:

• Installation
• Installationsende
• BE - Backend
• TypoScript fehlt
• Image Processing
• Backend-Layout
• FE - Frontend
• Statisches Template fehlt
• Seite mit id

02

Dienstag, 29.03.2022, 08.00 - 15.30 Uhr

Ausführliche Rekapitulation

• gestern: Projekt Demo
• heute: Projekt Seminar

Ihre TN-Fragen... und dann geht es auch schon los ...

Client-/Server-VHosts-Technik

Für ein neues TYPO3-Projekt benötigen wir immer (siehe auch folgende Zeichnung/Scribble im Seminar)

1. Projektordner auf Webserver
2. Datenbank in DB-Server und
3. Namensauflösung für TYPO3-Projekt-Adresse

Die möglichen Lösungen / Umsetzungen:

1. für lokale Entwicklungsumgebung (XAMPP-CMSOD)
2. für einen Hoster 

Scribble (hier aus Seminar "2018")

1) Projektordner erstellen / bereitstellen

1. lokal: .\htdocs\typo3\www.typo3-seminar.local 
   im XAMPP-CMSOD Ordnersystem erstellen
2. Hoster: ./www/html/typo3/typo3-seminar 
   beim Hoster (Linux-OS): z.B. mittels SFTP oder über Kundencenter Ordnerstruktur für T3-Projekt

2) Datenbank 

1. im XAMPP unter URL localhost/phpmyadmin  neue Datenbank anlegen:
   z.B. typo3_seminar (techn. Anm./Empfehlung: mit Charset utf8mb4 und Kollation utf8mb4_unicode_ci)
2. beim Hoster im Kundencenter / Kontrollcenter bei Datenbanken (vor der Installation) neue DB anlegen
   und Zugangsdaten notieren:
   1. DB-Servername (z.B. dbkunden.hoster.de)
   2. Datenbank (z.B. db1234)
   3. DB-User (z.B. dbuser1234)
   4. DB-Passwort (z.B. geheim ;-)

3) Namensauflösungen:

1. im XAMPP die Apache VHosts-Konfiguration bearbeiten:
   .\apache\conf\extra\httpd-vhosts.conf    siehe Beispiele im XAMPP-CMSOD;
   außerdem müssen wir Client-seitig die Windows Hosts Datei mit einem Eintrag für unser Projekt versehen:
   127.0.0.1   typo3-seminar.local    www.typo3-seminar.local  
2. beim Hoster kümmert sich der "Internet-Dienst DNS" um die Auflösung Ihrer Projektseite www.firmaxyz.de !

Alles keine "Hexerei" - sollten wir mit einer Übung begleiten...

Große Übung

... nach einer ausführlichen Rekapitulation zu 01.

Bereitstellung einer neuen TYPO3-Projekt-Website: (in 01 alle Infos dokumentiert)
www.typo3-seminar.local  (DB: typo3_seminar)

Anm.: nach den Vorgaben der ersten TYPO3-Website von gestern: www.typo3-demo.local  (DB: typo3_demo)

Übungen / Vorgehensweise:

VirtualHost-Konfiguration: (hier: die .\httpd-vhosts.conf  aktualisieren)
Windows (Datei: ./etc/hosts) und Webserver (.\apache\conf\extra\httpd-vhosts.conf) checken und für das zweite TYPO3-Projekt "typo3-seminar.local" konfigurieren: in der httpd-vhosts.conf muss ein Eintrag für "typo3-seminar" kreirt werden - danach bitte Apache2 Webserver reloaden (hier: einfach Webserver stoppen und wieder starten)

Projektordner: (hier: .\htdocs\typo3\www.typo3-seminar.local erstellen)
Den Projektordner (Siteordner) entsprechend vorbereiten und mit Installationsdateien (siehe TYPO3-Source-Datei typo3_src-11.x.x.zip ) sauber bestücken / entpacken. Erinnerung/Hinweis: bitte keine Unterordner produzieren!

Projektdatenbank: (hier: typo3_seminar ist schon vorhanden; kann zu Übungsgründen aber auch gelöscht und neu angelegt werden)
Anm.: aktuell sollte als Kollation utf8mb4_unicode_ci  eingestellt werden.
Erinnerung: bei Hostern muss die Projektdatenbank im Voraus über das Kontrollcenter Ihres Hosters angelegt.

Die Installation ...

Nach gestrigen Übungen an TYPO3-Demo-Projekt typo3-demo.local eine Installation für das neue Projekt typo3-seminar.local durchführen.

Die wichtigsten Vorgehensweisen und Hinweise (siehe 01):

• Inbetriebnahme Backend TYPO typo3-seminar.local
• Sprache "German" bereitstellen und für TYPO3-Admin auf "Deutsch" umstellen (ggf. Ab-/Anmelden)
• GFX konfigurieren: Tool ImageMagick für TYPO3 konfigurieren und Grafik-Tests durchführen
• Modul Dateiliste konfigurieren (Groß-/Kleinschreibung aktivieren)
  Testordner und Testdatei/Grafikdatei per Drag & Drop checken
• Startseite [id=1] (Seite wird Startseite einer Website und erhält als Symbol die Weltkugel)
• TypoScript Template für Startseite [id=1] erstellen und TS-Setup von 01 einbauen
  Anm.: Statisches Template fluid_styled_content nicht vergessen!
• Inhaltselement (Text oder Text & Bilder) für Startseite erstellen (Check auf Frontend - alles OK?)

TYPO3 Ordner und Dateien

... eine kurze Übersicht und Wiederholung

Hautptordner / Dateien: sind aus den TYPO3-Sources/Quellen (TYPO3-Core/Kern)

• Datei index.php (die eigentlichen TYPO3-Site)
• ./typo3 - der eigentliche TYPO3-Kern (in der Praxis: das Backend - BE)
• ./typo3temp - temporäre Ablagen (z.B. die Sprachdateien-Downloads)
• ./fileadmin - der Dateibaum (Datei -> Dateiliste) der TYPO3-Site
  Empfehlung: lokale Ordnerzugriffe vermeiden und immer über fileadmin arbeiten.
• ./typo3conf - die Konfiguration unserer Site; Speicherort für ENABLE_INSTALL_TOOL für Zugriff auf Install-Tool
  • Ordner ./ext für die installierten Extensions
  • Ordner ./l10n für die Sprachaktualisierungen der Extensions der Site (l10n: l ocalizatio n);
  • Datei: LocalConfiguration.php enthält die Konfiguration der Site und wird normalerweise mittels Install-Tool bearbeitet.
    Nur in Ausnahmefällen manuell bearbeiten: siehe DB-Zugangsdaten oder Rettungsszenario "Install-Tool-Zugriff -> Adminzugang erstellen!
  • Datei: PackageStates.php enthält den Status der installierten Pakete/TYPO3-Extensions

Die Dateien sollten nur in Problemlösungsfällen manuell bearbeitet werden!
Beispiele:

• verlorene Passwort/Zugänge über die LocalConfiguration.php (Stichwort: Install-Tool-Passwort)
• Reparatur misslungener Installationen (oder Aktualisierungen) über PackageStates.php

Statische Templates

Hier: Content Elements (fluid_styled_content)

Das Statische Template fluid_styled_content (Anm.: alt/obsolet - css_styled_content) wurde über die Bearbeitung des Root-Templates nachgeholt (siehe Register Enthält bei Bearbeitung des kompletten Templates).

Anm.: das ist dann auch bei Erweiterungen (Extensions) wichtig, die oft ihre eigenen Statischen Templates benötigen!

Kompakte Zuweisung der Inhalte (Datensätze) mittels der statischen Template TS Objekte:
seite.100 < styles.content.get   (weist die Inhalte für colPos = 0 aus der Tabelle tt_content zu){code lang:freebasic showtitle:false lines:true hidden:false}# mit Hilfe von styles.content.get die Datensätze
# für die Spalte 0 (Normal) aus DB holen:
seite.100 < styles.content.get
# jetzt noch die Inhalte aus Spalte Links
# dort ist colPos allerdings gleich 1
seite.200 < styles.content.get
seite.200.select.where = colPos=1{/code}Hier folgt ein Auszug aus dem Setup-TS-Code, den wir mit dem statischen Template SYS:TYPO3_CONF_VARS:FE:defaultTypoScript erhalten: {code lang:freebasic showtitle:false lines:false hidden:false}styles.content.get = CONTENT
styles.content.get {
    table = tt_content
    select.orderBy = sorting
    select.where = {#colPos}=0
}{/code}Eine Übersicht über den kompletten Code erhält man über Web - Template - Template Analyzer.

Für die anderen Standardspalten für Inhaltsobjekte

• Links, Rechts, Border in TYPO3 v6/7/8-Versionen
• unsere per BE-Layout zugewiesenen Spaltenpositionen

benötigen wir jetzt nur eine kleine Anpassung im Setup-TS für die gewünschte Spalte{code lang:freebasic showtitle:false lines:true hidden:false}seite.500 < styles.content.get
seite.500.select.where = colPos=1{/code}

Im Beispiel genannte ColPos=1 können wir später über unsere eigenen Backend-Layouts "erstellen/erfinden" und nutzen.

Seitenbaumstruktur

Los geht es für die Projekt-Site typo3-seminar.local mit einer Seitenbaumstruktur mit Praxisrelevanz:
(Anm.: TN können natürlich gerne eigene Strukturen umsetzen!)

• Planen
• Entwerfen
• Verweise für Menüs einsetzen

Orientierung nach Idee/Vorlage von TYPO3 Dokumentation - Page Tree (Seitenbaum)

Hinweis: Dokumentationen bei TYPO3 mit Hilfe von RestructuredText-Dokumenten

Vorschlag für (meine) Seminar-Site mit Ideen des CMSOD Zertifikat

(TYPO3 Logo) [id=0] TYPO3 oberste Struktur  

-> Start [id=1] (Weltkugel Startseite/Root - Verweis von/auf Unterpunkt Start, s. Menüs!)

	-> Start		   (Typ: Verweis auf Oberseite - Inhalt: Startseite)
	
	-> Module		   (Typ: Verweis auf erste Unterseite)
		-> Übersicht          (Inhalt: Übersichtseite)
		-> Modul I            (Inhalt: Statische Websites)
		-> Modul II	      (Inhalt: Dynamische Websites)
		-> Modul IIIa         (Inhalt: Joomla)
		-> Modul IIIb         (Inhalt: TYPO3)
		-> Modul IIIc         (Inhalt: WordPress)
		
	-> Portalinfo	           (Typ: Verweis auf erste Unterseite)
		-> TYPO3 Core	      (Inhalt: Infos zum TYPO3 Core)
		-> TYPO3 Extensions   (Inhalt: Infos zu TYPO3 Extensions)
		-> Technik            (Inhalt: Technik des Portals)
		
	-> Testeiten 	           (Typ: Verweis auf erste Unterseite)
		-> Überblick	      (Inhalt: Überblick)
		-> Testseite A        (Inhalt: Testseite A)
		-> Testseite B        (Inhalt: Testseite B)
		-> Testseite C        (Inhalt: Testseite C)
		
	-> Spezialmenü 	           (Typ: Ordner - ID wichtig für das Menü für diese Links!)
		-> Suche	      (Inhalt: Plugin für EXT:indexed_search)
		-> TYPO3	      (externer Link: typo3.org)	
		-> CMSOD              (externer Link: cms-online-designer.de)
		
	-> Spezialseiten           (Typ: Ordner - ID wichtig für das Menü für diese Links!)
		-> Impressum	      (Inhalt: Impressum / Datenschutz)
		-> Seitenbaum	      (Inhalt: Sitemap - Content Element)

Gut geplant - ist halb kodiert ;-) Selbstverständlich können Sie auch gleich Ihre eigenen Projektstrukturen umsetzen.

Erläuterung zu der Nutzung der Verweise: In den Menüs, die später (bei mir mit Bootstrap) gebaut werden, will man Menüs aufklappen können und benötigt einerseits eine Position im Pagetree, aber andererseits keine Umsetzung mit Inhalten.

Und falls es mal ganz schnell gehen soll: der PageTree liegt auch als T3D-Export vor und könnte schnell in einem leeren Projekt importiert werden!

Modul Datei -> Dateiliste

BE unterstützt modernes Drag & Drop!

Empfehlung: Aktivieren der Kern-Erweiterung "filemetadata" für das "Tagging" (Infos an Medien heften)
Tipp: sauberes Anlegen von Ordnerstrukturen für Bilder, PDFs (mit Unterordnern)

Anm.: der "Fileadmin" hat Eigenschaften (Rechte Maus - Bearbeiten) mit denen man z.B. auch die Sensitivität für Groß-/Kleinschreibung aktivieren kann!

Übungen: Nutzen der bereitgestellten Bilder in CE (Content Elements - Inhaltselementen) "Text & Bilder (textpic)": jetzt kann man auch bei den Bildern die Referenzen einsehen, wo die Bilder eingesetzt werden!

Bilder - mit TYPO

...aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen "Mega-Pixel" in MegaBytes:
z.B. 1600 x 1200 Pixel (oder 6000 x 4000 Pixel - 24 MegaPixel) in Datei-Größen von mehreren Megabytes!

TYPO3: wegen der Grafikbearbeitungsmöglichkeiten von TYPO3 dürfen wir ausnahmsweise (;-) die Bilder auch in den "großen Größen" in den Fileadmin legen! Diese werden mit ImageMagick/GraphicsMagick automatisch auf gewünschte Dimensionen "_processed_" (siehe Ordnerstruktur Fileadmin)

Beispielbilder mit uneingeschränkten Lizenznutzungen: unsplash.com (Link)
Anm.: Tools zum sehr einfachen "Kleinrechnen": RIOT - Radical Image Optimization Tool (Riot), Microsoft PowerToys oder ...

Hinweis: Bilder lassen sich über BE-Konfiguration für "Text & Bilder" auch "positionieren/stylen": z.B. Bild im Text links fließend
Aber: dazu benötigt man noch ein zweites Statisches Template (s. Register "Enthält") mit den CSS-Deklarationen für den Fluid-gestylten Content (fluid_styled_content) und so würden wir uns von diesen Stylings abhängig machen!

Tipp/Hinweis: später bitte sauber mit eigenen CSS-Styles arbeiten und die manuellen "Formatierungs-Klicks" im BE vermeiden - siehe auch Rahmen, Abstände, ...!

Übungen zu CE "Text & Bilder"

Frage:
Wo kommen die Dimensionen der eingefügten Bilder in "klein/groß" her?

Antwort:
Konstantendefinitionen für Kategorie Content (Erkl.: kommen von den statischen Templates für fluid_styled_content)

Weitere CE: Aufzählungen, Dateiliste, ... ausprobieren/antesten.

Es folgen verschiedene Screenshots aus TYPO3-Seminaren. Die hier als Bildgalerien dargestellen Bildschirmfotos stehen einen kleinen Teil der Original-Screenshots aus den jeweiligen Seminaren dar, die den Teilnehmern zum Seminarende zur Verfügung gestellt werden (Anm.: quasi Diashow der Seminartage mit oft mehr als 250 Fotos).

Screenshots aus Seminarwoche:

Screenshots aus Vorseminaren TYPO3:

• Apache VHost
• T3Editor
• TYPO3 Docs
• Verweis
• Dateiliste - Fileadmin
• EXT:filemetadata
• Sprachen aktualisieren
• Konstanten
• Bilder

03

Mittwoch, 30.03.2022, 08.00 - 15.30 Uhr

Rekapitulation, TN-Fragen

Übung: BE-Layout

Erstellen eines BE-Layouts "2-Spalter-Inhalt-SeitenRand" über die TYPO3-Weltkugel-Seite - Neuer Datensatz.
Anm.: Hierarchien / Ebenen beachten.

Hier mal die Seiten-TS-Config - bzw. die beispielhafte Definition einer solchen, wenn wir (später) unsere Techniken in eigenen Extensions unterbringen sollten:

mod.web_layout.BackendLayouts {
  exampleKey {
    title = Example
    icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
    config {
      backend_layout {
        colCount = 2
        rowCount = 1
        rows {
          1 {
            columns {
              1 {
                name = Inhalt
                colPos = 0
              }
              2 {
                name = SeitenRand
                colPos = 1
              }
 ...
}

Man kann die Spalten- und Zeilen-Definitionen erkennen und die Zuordnungen von Bezeichnern und (viel wichtiger) den colPos-Nummern.

Übung: Seitenbaum

Wir haben unseren Seitenbaum - nach Plan - komplettiert und einen (speziellen) Ordner als Seitenbaum-Element erstellt, der Seiten wie Impressum und Co enthält.

Anm.: auch hier wieder auf saubere Hierarchien und Eigenschaften für die Seiten/Seitenbaum-Element achten.

Übung: Konstanten (Constant TS)

In den vorbereiteten Setup-TS für unser FLUIDTEMPLATE Beispiel sieht man die Verwendung von Konstanten. Hierdurch kann man einen

• "Schalter" für die Aktivierung/Deaktivierung des sogenannten TYPO3-AdminPanels nutzen oder
• die Dateipfade zu unseren Templating-Dateien mit Hilfe eines "Platzhalters"

nutzen.{code lang:ini showtitle:false lines:true hidden:false}# im Konstanten-TS:
# =================
# cat=kunden; type=boolean; label= AdminPanel enable: eine Checkbox for AdminPanel
kunden.adminpanel = 1
# cat=kunden; type=string; label= Templating Basispfad: Grundverzeichnis für Konf.
kunden.templatingpfad = fileadmin/templating/bu{/code}Die Konstanten werden dann im Setup-TS nutzbar:
config.admPanel = {$kunden.adminpanel}   

Tipp/Erinnerung: Über Web - Template - Konstanten-Editor können wir uns die Konstanten für die Kategorie "Content" ansehen und die Breite für Bilder in CE "Text & Bilder" auf eigene Werte angepassen! Tipp: bitte lieber richtiges (eigenes) CSS dafür nutzen!

Die eigenen Konstanten (ohne hinterlegte Extension mit Default-Werten) immer über das manuelle Konstanten-TypoScript anpassen.

FLUIDTEMPLATE(S) per Copy & Paste

Vom Trainer vorbereitete Dateien und Ordnerstrukturen werden mittels "Copy & Paste" verdrahtet.

Mehrere Versionen / Varianten vom Trainer vorbereitet und verteilt:

• (10) HTML-CSS-JS-Vorlage - Bootstrap 3 Technik; Template: mPurpose
  FluidTemplating mit mPurpose (Bootstrap 3) HTML Vorlage - hier noch Auslagerung in fileadmin/templating/bu
  Klassisches Beispiel aus Seminaren mit TYPO3 vor v9
  Anmerkung: die Umsetzungen in diesem Beispiel basieren (aus didaktischen Gründen) noch sehr auf TypoScript Lösungen (siehe Menüs, Breadcrumb).
  Das kann man mit aktuelleren Techniken sehr gerne modernen Processing Techniken von TYPO3 überlassen. Das zeigen dann die nächsten Beispiele.
• (20) FluidTemplating mit Bootswatch (Bootstrap 5) HTML Vorlage
  Hier auch noch die Implementierung in fileadmin aber schon saubere Ordnerstrukturen wie sie später dann auch in einer Lösung als Sitepackage/Extension genutzt werden!
  Vorschlag: Parallel-Ordner fileadmin/templating/bu20 zu erster Lösung nutzbar - einfach das TypoScript austauschen!
• (50) Beispielhafte Lösung mit eigener Extension EXT:jbspb_bootswatch
  Komplette Lösung mit Bootswatch Styles als Sitepackage/Extension - wird ausführlich im Seminar dargestellt
  Aktuelle Version unter Git Repo Adresse
  gitlab.com/joebrandes/jbspb_bootswatch.git  (Joe Brandes Sitepackage Build with Bootswatch Bootstrap Template)  

Hinweis zu den Zahlen: siehe auch Gitlab Repo:
gitlab.com/joebrandes/cmsod-typo3.git   - Unterordner ./SNIPPETS/10/, .. enthalten alles Nötige für Copy&Paste und durch Übungen mit Trainer implementiert.

Jetzt werden unsere Seiten mit vollem Design und Layout ausgegeben und das bereitgestellte Setup-TS sorgt sogar für funktionstüchtige Navigationen.

Eine weitere Darstellung kann man auf den hier beigefügten Sonder-Tabs entnehmen. Erläuterungen der Funktionsweise folgen im Laufe des Seminars.

Außerdem basieren die ersten Übungen rund um die FLUIDTEMPLATE Techniken immer noch auf der Ablage der Dateien im fileadmin.  Das soll später auf jeden Fall geändert werden und diese Daten werden in einer eigenen Extension - einem Sitepackage - ausgelagert.

Kurzdarstellung: FLUIDTEMPLATE nutzen

... für die HTML/CSS/JS-Profis für die Erstellungen eigener FLUIDTEMPLATE-Umsetzungen (FT):

HTML/CSS/JS-Template/Vorlage

(z.B. auf Basis Bootstrap) besorgen / kaufen / erstellen lassen und dann die folgenden Techniken erstellen:

FT-Layout (die "entkernte" Vorlagen-Seite)

Aus einer HTML-Template-Seite eine FT-Layout-Seite entkernen:

• Platzhalter "section" für Datensätze aus BE-Layout-Spalten
  Tipp: die herausgenommenen Original-HTML-Blöcke separat wegspeichern, um später schnell die per Setup-TS zu erstellenden HTML-Techniken zu erkennen.
• Platzhalter "f:cObject ... lib.tstechnik" für per Setup-TS erstellte HTML-Blöcke (Navigationen, Suchbox, Breadcrumb, ...)
• Gegebenfalls: Platzhalter "partials", falls man Stellen in Website hat, mit immer gleichem Code enthalten (z.B. in Blog-Ansichten die Datumsinfos für jeden Beitrag)

Anm.: die Layout-Ordner müssen sauber für das FLUIDTEMPLATE per Setup-TS konfiguriert werden!

FT-Template (die dynamischen TYPO3-Datensätze - CEs)

Datei-Gerüst erstellen:

• Layout per f:layout verdrahten
• Sections für Platzhalter mit Datensätzen erstellen
• Gegegenfalls: auch hier "f:cObject ... lib.tetechnik" einfügen, falls spezielle Verfügbarkeit auf Seiten nötig, oder die Verschachtelung von Blöcken nicht anders möglich!

Anm.: die Template-Datei muss man über "file"-Eigenschaft für das FLUIDTEMPLATE per Setup-TS konfigurieren. Diese Template-Dateien kann man dann in jeder Seite manuell per EXT-Template überschreibgen oder aber professionell mittels BE-Layout-IDs automatisch im Setup-TS zuweisen lassen.

FT-Setup-TS (die TS-Konfiguration für das cObject FLUIDTEMPLATE)

Hier schließt sich der Kreis und Sie haben die nötigen Setup-TS-Zeilen bereits durch die Demo-Installation (mPurpose) erhalten.

SEF / SEO (hier: Seitenverwaltung - Sites)

Plan: Auslieferung von SearchEngine-Friendly und Search-Engine-Optimierten Seiten und Links (URL) im Frontend.

Hierfür werden wir die neueste TYPO3-v9-Techniken nutzen: Modul Seitenverwaltung - Sites
Anm.: Hier werden wir auch gleich ein paar Voreinstellungen zur Sprache (L=0) machen:
Siehe Url bestehend aus Parameter für Page (id) und Language (L): ./index.php?id=5&L=0 

Nachdem die Sites-Konfiguration erstellt wurde, hat man in ./typo3conf/sites/..  einen entsprechenden Ordner mit YAML-Konfigurationsdatei config.yaml.

Wenn - wie hier - die Sites-Konfiguration nachträglich erzeugt wird, sollte man den Seitenbaum auf die erstellten/vorgeschlagenen URL-Pfade hin überprüfen und (ggf.) anpassen.
Tipp: diese Einstellung zu Beginn der Site-Erstellung erzeugen!

Anmerkungen:

• Die hier getroffenen Einstellungen mussten klassisch (vor v9) über Setup-TS definiert und oft noch mit konditionalem TS (für weitere Sprachen) erweitert werden.
• Vor TYPO3 v9 wurde diese Fähigkeit von der Erweiterung EXT:realurl bereitgestellt, die hiermit obsolet wird.

Das TYPO3-Leben unter Version 9 ist also deutlich einfacher geworden.

Mehrsprachigkeit

Mit einer neuen Website-Sprache (L=1; z.B. Englisch) die Seiten und die Seiteninhaltselemente mehrsprachig ausliefern.
Wichtig: ein neuer Datensatz Website-Sprache lässt sich (nur) auf oberster TYPO3-Wurzel-Ebene erzeugen!

Nach TYPO3-Verständnis hat eine Grundinstallation (also quasi ein "sprachleeres" TYPO3) bereits eine (erste/nullte) Sprache 0, die als STANDARD (default) bezeichnet wird!

Früher/Pre-v9: mit Setup-TS (config) stellt man dann die gewünschten Sprachkonfigurationen (config.language, config.locale_all, ...) ein.

Wichtig:  config.sys_language_uid = 0   (das ist die ID der Sprache STANDARD)

Vorgehensweise:
Weitere Website-Sprache über das TYPO3-Dachelement (Web - Liste) über Neuen Datensatz hinzufügen!
Prinzip: die "2te" Sprache hat dann die id=1, die nächste die id=2 und so weiter...

Dann über Modul Seitenverwaltung - Sites die neue Sprache konfigurieren!

"Alte" / Klassische Vorgehensweise: (Pre-TYPO3v9):

Für die Grundkonfiguration muss das TS für die Sprache konfiguriert werden.
Konditionales Setup-TS einfügen, damit für die neue Sprache (normalerweise sys_language_uid = 1) und den Sprach-URL-Schalter "L" jetzt auch diese anderen Datensätze aus der TYPO3-DB geholt werden; siehe auch config.linkVars = L in der Grundkonfiguration:
URLs: index.php?id=85&L=0  vs. index.php?id=85&L=1
Setup-TS:{code lang:ini showtitle:false lines:true hidden:false}# Grundkonfiguration des System
config {
linkVars = L
sys_language_uid = 0
language = de
locale_all = de_DE
...
}
...
# Konditionales (d.h. mit Bedingungen)
[globalVar = GP:L=1]
config.sys_language_uid = 1
config.language = en
config.locale_all = en_UK
# Navigationspfad in englisch (hier beispielhaftes TS)
lib.breadcrumbs.wrap = <br />You are here:&nbsp; |
[global]{/code}Dann lassen sich alle Seiten in dieser Sprache erstellen (z.B. über Web -> Info -> Übersetzungsübersicht - besser aber über die Seiten direkt über die Bearbeitungen)
und danach die Inhaltselemente (CE) in der neuen Sprache erzeugen/übersetzen.

Für Letzteres bietet das BE eine Schaltfläche zum automatischen Erzeugen der gewünschten neuen Sprach-CE. Dabei lässt sich eine "verbindungslose" Kopie oder aber eine "verknüpfte" Übersetzung erstellen. In einer Übersetzung sind viele Eigenschaften des neuen Sprachen-CE an das "Original" verknüpft!

Es folgen verschiedene Screenshots aus TYPO3-Seminaren. Die hier als Bildgalerien dargestellen Bildschirmfotos stehen einen kleinen Teil der Original-Screenshots aus den jeweiligen Seminaren dar, die den Teilnehmern zum Seminarende zur Verfügung gestellt werden (Anm.: quasi Diashow der Seminartage mit oft mehr als 250 Fotos).

Screenshots aus Seminarwoche:

Screenshots aus Vorseminaren TYPO3:

• TS Analyse
• HTML-CSS-JS Vorlage
• Links in Texten
• CE Tabelle
• Seitenkonfiguration
• Website-Sprache
• Mehrsprachigkeit
• Lokalisieren Assistent
• Lokalisierungen

04

Donnerstag, 30.03.2023, 08.00 - 15.30 Uhr

Rekapitulation, TN-Fragen: Techniken Sprache/SEF

Rekap zu "Sprachen und SEF"

In der leeren Demo-Projektseite (siehe Montag - Tag 01) wurde schrittweise

• NEUE Website-Sprache (z.B. Englisch) mit id=1 erstellt
• Seiten in neue Sprache übersetzt
• Seiten-CEs wurden übersetzt

Erinnerung: diese Spracheinstellungen - und auch noch gleich die SEF-Techniken mittels der URL-Segmente in den Seiteneigenschaften - können wir durch (frühzeitige) Seitenkonfiguration (Modul Seitenverwaltung - Seiten) in einem Aufwasch erledigen.

Klassisch (vor TYPO3 9): wir benötigen noch Setup-TS, um TYPO3 die Sprachen 0 (wir wollen Deutsch) und 1 (wir wollen Englisch) zu erklären:{code lang:freebasic showtitle:false lines:false hidden:false}config {
# values for default language: German
# -----------------------------------
  sys_language_uid = 0
  language = de
  locale_all = de_DE.utf8
  htmlTag_langKey = de
# Schalter für Sprachumschaltungsmodus
# ------------------------------------
# sys_language_mode = content_fallback
# sys_language_overlay = 1
# sys_language_overlay = hideNonTranslated
#
# uniqueLinkVars = 1
# linkVars = L
}{/code}Für die Sprache L=1 nutzte man konditionales TS:{code lang:bash showtitle:false lines:false hidden:false}# Konditionales (d.h. mit Bedingungen)
[globalVar = GP:L=1]
config.sys_language_uid = 1
config.language = en
config.locale_all = en_UK
config.htmlTag_langKey = en
[global]{/code}Im Block werden für den Fall (die Condition), dass man mit "&L=1" Inhalte abfragt die Language-ID und andere Konfigurationen gesetzt.

Die Übungen können an einer Demo-Projektseite (siehe z.B. Montag) durchgeführt werden, was zu Testzwecken immer eine gute Idee ist!

Frontend-Benutzer und -Gruppen (FE-User and FE-Groups)

Ziel: Anmeldungen am FE für "geschützte Kundenbereiche"

Website-Benutzer (FE-User)

Bitte unbedingt Unterschied zu Backend-Benutzern erkennen:
FE-User können nur die Seite nutzen, haben aber keinerlei Bearbeitungsmöglichkeiten!
Arbeiten im/am System können nur BE-User!

Erstellen eines neuen Ordners "FE-Benutzer" und Einstellung (Register Verhalten) als Container für Website-Benutzer;
dadurch verändert sich das Logo des Ordners in ein "User/Benutzer-Icon"!

Über Web -> Liste die neuen Datensätze für Website-Benutzergruppe (Kunden) und danach für einen Website-Benutzer (maxmustermann) anlegen

Test: eine Unterseite mit Zugriff für Website-Benutzergruppe "Kunden" konfigurieren! Das Logo des Seitenbaumicons ändert sich!

Anmeldung an Website (FE Login - System-Erweiterung felogin)

Auf Seite "Anmeldung" ein Inhaltselement Formulare - Anmeldeformular integrieren und konfigurieren

Unbedingt konfigurieren: Speicherort Benutzer auf unseren FE-Benutzer Ordner

Tipp: Falls Anmeldeprobleme auftauchen - Test der Anmeldung/Abmeldung mit anderem Browser, als dem für das BE!

Profitipp: über Zugriff-Konfigurationen kann man Links immer passend in FE-Navis auftauchen (und verschwinden) lassen. Je nachdem, ob man gerade angemeldet ist (Link: Abmelden) oder nicht (Link: Anmelden).
Hierfür kann man sogar eine Seite benutzen - und die Links sind dann "wortwörtlich" Verweise auf dasselbe An-/Abmeldeformular!

Anm.: Sprachen wurden gleich sauber in deutsch und (natürlich) englisch dargestellt.

TER - Erweiterungen

TER - TYPO3 Extension Repository (modernisiertes Web-Onlineportal ab III/2017 - Link)

Pro & Contra Erweiterungen / Entscheidungsprozesse:

• Aktualität der Technik (TYPO3 v9, v10, v11?)
• Nutzerzahl, Downloads
• Entwicklername
• Dokumentation (vorhanden?, Qualität?)
• Abhängigkeiten (Dependencies) bzw. Konflikte (conflicts) mit anderen Erweiterungen
• Unterstützung / Community
• Technische Umsetzung (Composer)
• Kosten
• will ich mich abhängig machen von Erweiterungen?

Installationsarten:

• Erweiterungsmanager: Erweiterung hinzufügen
• manuelle Integration
• als Zip-Archiv uploaden (Erweiterungsmanager)
• als t3x-Datei bereitstellen (Erweiterungsmanager)
• mittels Software-Verwaltungstechniken wie Composer

Die Entscheidung zum Einsatz von Erweiterungen - oder genauer gesagt 3rd-Party Extensions - sollte genaustens abgewogen werden.

Um eine völlig andere Nutzung handelt es sich beim folgenden Einsatz von Extension-Technik als sogenannte Sitepackages.

Sitepackages

Viele Einstellungen für unser System und die Ausgaben durch FluidTemplate-Technik landen im filadmin. Das ist aus den verschiedensten Gründen nicht gut. Der größte Nachteil ist sicherlich, dass die Konfigurationen über den filadmin öffentlich erreichbar sind. Sogar die Indizierte Suche nimmt die Dateien standardmäßig mit auf.

Die Vorteile von Sitepackages in einer Auflistung:

• Kapselung - alle Dateien und Ordner an einer Stelle
• TypoScript (TS-Template) Daten sonst in Datenbank
• Versions Kontrolle (siehe Git)
• Abhängigkeiten zu anderen Extensions managen
• Saubere Trennung vom Fileadmin (Userspace)
• Konfigurationen in Fileadmin wären öffentlich erreichbar!
• Sicherheit (eben nicht Fileadmin: nicht direkt erreichbar)
• Entwicklung: AutoLoading, Composer nutzen
• Verteilbarkeit - siehe Github, TER

Das Alles bezahlt man natürlich mit etwas mehr Aufwand und die Techniken sind in ein sehr exaktes und wohlgeformtes Gerüst gegossen.

Gegenüberstellung fileadmin vs. Sitepackage (B. Kott):

Im Grunde handelt es sich bei einer Extension im einfachsten Fall um einen gepackten (Zip) Ordner, der im Verzeichnis ./typo3conf/ext/.. landet. Die Strukturen und Dateien müssen hierzu einem genauen Muster und Inhalten folgen. Das stellt aber kein größeres Problem dar, da man sich entweder eine bestehende Extension kopieren könnte oder aber den Sitepackagebuilder (SitePackageBuilder Link) der TYPO3 Entwicklergemeinschaft (hier wieder: Benjamin Kott) nutzt.

An dieser Stelle will ich nicht ausschweifen, da ich auf gesonderte ausführliche Ausarbeitungen meinerseits hinweisen kann.

Insbesondere habe ich ein Gitlab Repo erstellt, dass eine Rohversion des Sitepackagebuilders mit einem FluidTemplating mit Bootswatch Bootstrap 5 HTML/CSS/JS Vorlagen vervollständigt.

Gitlab Repo: gitlab.com/joebrandes/jbspb_bootswatch.git   

Das Beispiel werden wir ausführlich analysieren und anpassen.

Es folgen verschiedene Screenshots aus TYPO3-Seminaren. Die hier als Bildgalerien dargestellen Bildschirmfotos stehen einen kleinen Teil der Original-Screenshots aus den jeweiligen Seminaren dar, die den Teilnehmern zum Seminarende zur Verfügung gestellt werden (Anm.: quasi Diashow der Seminartage mit oft mehr als 250 Fotos).

Screenshots aus Seminarwoche:

Screenshots aus Vorseminaren TYPO3:

• Übersetzung mit L=1
• config.yaml
• User-TS
• FrontEnd-User
• Suchformular
• LightBox Effekt
• EXT:news
• CSS für news
• CSS-Analyse

05

Freitag, 01.04.2022, 08.00 - 15.30 Uhr

Rekapitulation, TN-Fragen

Suche (Indizierte Suche)

Einbau einer Suchfunktion in die Website:

EXT:indexed_search (Erweiterung aus Kern für indizierte Suche)

Die Erweiterung kann nicht nur die TYPO3-Datensätze, sondern auch externe Dokumente von PowerPoint-Folien bis hin zu PDFs durchsuchen und die Ergebnisse aufbereiten:  config.index_externals = 1
Anm.: index_externals macht auf einem Windows-Server keinen Sinn! Man braucht eben auch die entsprechenden Tools, um die Formate verarbeiten zu können

Die Erweiterung indexed_search befindet sich bereits im System und kann direkt aktiviert werden.

Wir erhalten eine neues Modul Web - Indizierung (Aktualisierung Sprache / Übersetzungen nicht vergessen);
Und natürlich habe wir hier auch wieder ein Statisches Template "indexed search einzufügen, damit gleich Code gerendert wird

Aktivierung der Indizierung mittels TS: config.index_enable = 1
Check von config.index_enable mittels TypoScript Object Browser ergibt Aktivierung nach Installation ohne zusätzliches Setup-TS.

Der Status lässt sich über Modul Web - Indexing (dt. Indizierung) einsehen. Seiten müssen für den Index "frisch" geladen werden - also: FE-Cash leeren und die Seiten einmal durchklicken. Das lässt sich bei großen Seiten auch professionell automatisieren.

Um den "Suchbereich" festzulegen/einzuschränken, bitte die folgenden Kommentare im Template nach Wunsch eingrenzen:{code lang:html5 showtitle:false lines:true hidden:false}...
<!--TYPO3SEARCH_begin-->
... Inhalt ...
<!--TYPO3SEARCH_end-->
...{/code}Für unser aktuelle Standard-Fluidtemplate ./fileadmin/templating/bu/Fluidtemplate/DefaultTemplate.html  bedeutet das:{code lang:bash showtitle:false lines:false hidden:false}<f:layout name="DefaultLayout"/>

<f:section name="ContentLeft">
<!--TYPO3SEARCH_begin-->
<div class="col-sm-9">
<f:if condition="{contentMain}">
<f:format.raw>{contentMain}</f:format.raw>
</f:if>
</div>
</f:section>

<f:section name="ContentRight">
<div class="col-sm-3 blog-sidebar">
<f:cObject typoscriptObjectPath="lib.menuSide" />
<f:if condition="{contentSidebar}">
<f:format.raw>{contentSidebar}</f:format.raw>
</f:if>
</div>
<!--TYPO3SEARCH_end-->
</f:section>{/code}Suche nutzen:

Erstellung einer Seite "Suche" (s.o. Ordner Spezialseiten) mit dem Plug-In Indexsuche:
Das entsprechende Plug-In für die Indexsuche auswählen und schon taucht ein Suchformular auf.

Eine funktionsfähige "Suchbox" ist schon wieder eine neue Herausforderung!

BE-Layouts steuert das Template

... und damit das Erscheinungsbild (die FE-Ausgabe) unserer TYPO3-Website.

Als erstes benötigen wir ein weiteres (zweites) BE-Layout und sollten dann (z.B.) folgende BE-Layouts vorfinden:

• 2-Spalter-Inhalt-Seitenrand (BE id=1) - sollte durch Vorübungen vorhanden sein
• 2-Spalter-SeitenRand-Inhalt (BE id=2) - in Übung neu erstellen

Erinnerung: Inhalt "definiert" die colPos=0 und SeitenRand die colPos=1

Und wir können den BE-Layouts auch gleich kleine Grafiken zuweisen, damit unsere BE-User schneller die Technik aufgreifen können.

Über die vorbereitete Fluidtemplate Technik haben wir auch bereits zwei Template-Dateien für die Auslieferung unserer Fluidtemplate-Technik vorrätig:

• fileadmin/templating/bu/Fluidtemplate/DefaultTemplate.html  
  Anm.: wird aktuell genutzt - siehe Anweisung file= für das FLUIDTEMPLATE Object (Setup-TS anschauen)
• fileadmin/templating/bu/Fluidtemplate/TemplateReverse.html  
  ein alternatives Template mit vertauschtem Inhalt - Sidebar - muss gegebenfalls noch leicht angepasst werden!

Wir wollen jetzt die jeweilige Template-Datei nicht manuell zuweisen, sondern verwenden als neue file Anweisung im Setup-TS den folgenden (genialen) TS-Code:{code lang:bash showtitle:false lines:false hidden:false}page.10 = FLUIDTEMPLATE
page.10 {
# file = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
file.cObject = CASE
file.cObject {
key {
data = levelfield: -1 , backend_layout_next_level, slide
override.data = TSFE:page|backend_layout
}
    
1 = TEXT
1.value = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
2 = TEXT
2.value = {$kunden.templatingpfad}/Fluidtemplate/TemplateReverse.html
3 = TEXT
3.value = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate-neu.html

default < .1
}

partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/
layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/
variables {
contentMain < temp.main
contentSidebar < temp.sidebar
}
}{/code}Im Grunde geht der Code durch die BE-Layout-Datensätze und nutzt die BE-Layout-ID für die Wertzuweisung der Template-File-Angabe - also letztlich der Angabe, welche Template-Datei genutzt werden soll!

Durch die Zuweisung mit "default < .1" wird dafür gesorgt, dass bei IDs ungleich 1, 2 oder 3 einfach der Wert 1 und der entsprechende Dateipfad genutzt wird! Super Clever gelt?

Mit den aktuellsten Umsetzungen lässt sich das ganze über BE-Layouts in augelagerten Dateien sogar noch effizienter gestalten:{code lang:bash showtitle:false lines:false hidden:false}##############
#### PAGE ####
##############
page = PAGE
page {
   typeNum = 0
   shortcutIcon = EXT:jbspb_bootswatch/Resources/Public/Icons/favicon.ico

   10 = FLUIDTEMPLATE
   10 {
   # Template names will be generated automatically by converting the applied
   # backend_layout, there is no explicit mapping necessary anymore.
   #
   # BackendLayout Key
   # subnavigation_right_2_columns -> SubnavigationRight2Columns.html
   #
   # Backend Record
   # uid: 1 -> 1.html
   #
   # Database Entry
   # value: -1 -> None.html
   # value: pagets__subnavigation_right_2_columns -> SubnavigationRight2Columns.html
   templateName = TEXT
   templateName {
     cObject = TEXT
     cObject {
       data = pagelayout
       required = 1
       case = uppercamelcase
       split {
         token = pagets__
         cObjNum = 1
         1.current = 1
       }
     }
     ifEmpty = Default
   }
   templateRootPaths {
     0 = EXT:jbspb_bootswatch/Resources/Private/Templates/Page/
     1 = {$page.fluidtemplate.templateRootPath}
   }
   partialRootPaths {
     0 = EXT:jbspb_bootswatch/Resources/Private/Partials/Page/
     1 = {$page.fluidtemplate.partialRootPath}
   }
   layoutRootPaths {
     0 = EXT:jbspb_bootswatch/Resources/Private/Layouts/Page/
     1 = {$page.fluidtemplate.layoutRootPath}
   }
   dataProcessing {
     10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
     10 {
        references.fieldName = media
     }
     20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
     20 {
        levels = 2
        includeSpacer = 1
        as = mainnavigation
     }
     30 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
     30 {
       special = directory
       # special.value = 14
       special.value = {$styles.searchpageid}
       levels = 1
       includeSpacer = 1
       as = topnavigation
      }
     40 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
     40 {
       languages = auto
       as = languageNavigation
     }
     50 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
     50 {
       special = rootline
       special.range = 0|-1
       # includeNotInMenu = 1
       as = menuBreadcrumb
     }
   }
}{/code}Das ist auch die Lösung, die ich in unserem Sitepackage verpackt habe: EXT:jbspb_bootswatch .

Introduction Package (Distribution)

Die TYPO3-Entwickler bieten eine "Prepared Distribution" an, mit der man die Best Practises - also optimale technische Umsetzung - in Aktion sehen kann.

Wichtig: die Distributions in einem sauberen, frisch installierten und unkonfiguriertem TYPO3 installieren!

Die Distribution besteht aus den beiden Extensions

• bootstrap_package
• introduction

und liefert in der aktuellen Version eine Bootstrap 3 Seite aus.

Install-Tool (mit "Passwort-Trick")

Wenn man sich mal aus dem Backend (BE) ausgesperrt hat...

Install Tool (sonst: Teilbereich der BE-Verwaltung)

Das Install-Tool hat eigenes Kennwort und keine Nutzerkennung!
Dieses Passwort kann bei Zugang zum Install Tool geändert werden und wird verschlüsselt in der Konfigurationsdatei typo3conf/LocalConfiguration.php abgelegt!

Empfehlung: normaler Weise keine manuelle Bearbeitung dieser Konfigurationsdatei!
Zugang zum Install Tool nur bei vorhandener Datei ENABLE_INSTALL_TOOL im Projekt-Ordner ./typo3conf  

Die URL zum Install-Tool ist: Projekt BE TYPO3 / Install-Ordner / index.php (früher: Ordner install):
www.typo3-seminar.local/typo3/install.php  

Passwort Trick (Zugangsprobleme zum TYPO3-System "reparieren")

Zugang zum BE oder gar zum Install-Tool verloren?
Einfach Install-Tool aufrufen (Datei ENABLE_INSTALL_TOOL in ./typo3conf nötig/erstellen) und Passwort eingeben.

Das Install-Tool verweigert bei falschem Install-Passwort den Zugriff: es zeigt aber den verschlüsselten (und gesalzenen) HASH-Wert an!
Diesen Wert dann in der ./typo3conf/LocalConfiguration.php manuell ersetzen (seltener Fall für die manuelle Bearbeitung dieser Datei!).

Nach Zugriff auf das Install-Tool kann man einen neuen Admin-Account erstellen und hat somit wieder kompletten Zugrif auf das Backend (BE).

Tipp: beispielhafte Video-Anleitung (hier jweiland.de) für die Unterstützung und Hilfestellung im Web zu diversen solcher Problemchen.

TYPO3 Backup & Restore

Wir wollen unsere TYPO3 CMS sichern und wiederherstellen. Und wir wollen mit TYPO3 CMS von unserem Entwicklungsserver auf Hosting-Server und umgekehrt

Wir erinnern uns: TYPO3 besteht aus:

• TYPO3-Sources (Quellen / T3-Kern):
  muss (eigentlich) nicht gesichert werden: ./typo3, Dateien im Hauptordner: index.php, ...
• TYPO3-Projekt-Dateien:
  Ordner ./typo3conf, ./fileadmin (, ./typo3temp)
• TYPO3-Datenbank:
  Exportieren und Importieren mittels PhpMyAdmin (MySQL-Dumps; Formate: sql, zip. gz, bz2)

Tolle Anleitungen für die Hosting-Umgebungen (Achtung: Linux/Unix Betriebssystem) finden sich wieder bei JWeiland (z.B. Projekt kopieren).

Bei Serverumzug natürlich Anpassung der Zugangsdaten zur Datenbank (mittels Install-Tool)
oder manuelles Bearbeiten der ./typo3conf/LocalConfiguration.php   

Alternative Techniken:

• .t3d-Dateien - Eigenes Archivformat von TYPO3 
  Diese "Exporte" lassen sich über die Seitenelement-Kontextmenüs mittels Exportieren / Importieren nutzen.
  T3D kümmert sich aber nicht um das komplette T3-Projekt, sondern hauptsächlich um die Seitenbaumstruktur!
  Man sollte Testen, ob die hier erzeugten Backups ausreichend sind!
• Batch/Skripte - hier: für Windows
  für den XAMPP-CMSOD habe ich eigenen Backup/Restore-Technik (cmd-Skripte / Batch) erstellt!
  Diese Skripte orientieren sich an Skripten aus der Unix/Linux-Umgebung.

Eine spezielle "Komplett-Serversicherung XAMPP-CMSOD" bietet sich für die Seminarwoche an:

Die XAMPP-Ordner lassen sich komplett als selbstentpackendes 7z-Archiv sichern. Die Trainer-Version wird den TN ebenfalls als "Digitale Seminarunterlage" bereitgestellt. Hinweis: vor dem Archivieren bitte erst alle Zugriffe und Dienste beenden.

So weit in Kürze ;-) ...

TYPO3 auf LAMP-System (Linux AMP)

Die native Umgebung für einen TYPO3-Service - Wichtigste technische Vorteile/Unterschiede:

• Groß-/Kleinschreibung unterscheidbar (CaseSensitivity)
• andere Berechtigungen für Dateien und Ordner
• Grafik- und Spezialtools (ImageMagick/GraphicsMagick, AI, PDF, Word- oder PowerPoint-Dokument)
• Symbolische Links zum "Verdrahten" von TYPO3-Sources:

Saubere symbolische Links, um einen TYPO3-Kern (T3-Core) effizient  vom TYPO3-Websiteordner (Kern) zu trennen und später einfach durch Anpassen des Hauptlinks typo3_src auf einen anderen TYPO3-Kern verlinken zu können.

Anm.: hier sieht man noch einen Ordner ./uploads , der bei TYPO3 v9 nicht mehr so vorhanden ist (dort: siehe Ordner fileadmin).

Beispielhafte Befehle: (siehe auch Infodatei in TYPO3-Kern: INSTALL.md)
ln -s ../../../typo3_src/typo3_src-10.4.13 typo3_src   (erstellt Hauptlink zur TYPO3-Source)
ln -s typo3_src/typo3 typo3   (erstellt Link zu TYPO3-Hauptordner ./typo3)
ln -s typo3_src/index.php index.php   (erstellt Link zu TYPO3 Projekt ./index.php )

Anm.: für ambitionierte TYPO3-Entwicklungen ist diese technische Umgebung früher/später notwendig, weil sie eben näher an der produktiven Internet-Technik ist!

Dokumente und Unterlagen für TN

XAMPP-Versionen (Wochenanfang - Seminarende Trainer-XAMPP),
Screenshots der Seminartage (Bildergalerie/Diashow der Seminarwoche - ca. 1500 Screenshots für die Woche!),
Snippets (TypoScript Schnippsel) und Ordner-/Dateistrukturen fileadmin und Co

Feedbackbögen, TN-Bescheinigungen, letzte Fragen

Es folgen verschiedene Screenshots aus TYPO3-Seminaren. Die hier als Bildgalerien dargestellen Bildschirmfotos stehen einen kleinen Teil der Original-Screenshots aus den jeweiligen Seminaren dar, die den Teilnehmern zum Seminarende zur Verfügung gestellt werden (Anm.: quasi Diashow der Seminartage mit oft mehr als 250 Fotos).

Screenshots aus Seminarwoche:

Screenshots aus Vorseminaren TYPO3:

• Suchindex
• Suchformular
• Hilfe
• FluidTemplate NEU
• Introduction Package
• neue Content Elements
• DB-Tabellen-Dump
• Backup Skript
• Install Tool

Und als Specials folgen jetzt noch zwei Register bzw. Kapitel zu den Themen

• FLUIDTEMPLATE
• TS (TypoScript)