Infosite von Joe Brandes
Eine Website von Trainer Joe Brandes. Infos zu IT-Seminaren von A bis Z.
Das klassische PCS Zertifikat
Von der Hardware und Netzwerktechnik bis zu den den Betriebssystemen Windows, Windows Server und Linux
Ich biete diese Module an!
Zertifikat CMSOD
Module Basiszertifikat
Module Specialist
Ready for Tech Deep Dives...
Bitte Seminarinhalte anfragen!
Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 28.03.2022 das Modul "CMS TYPO3" bei der VHS Wolfenbüttel als Kooperationsveranstaltung des BIZ/VHS WF und der IUK des LK Wolfenbüttel statt.
In diesem CMS-TYPO3-Workshop wollen wir uns alle notwendigen Fähigkeiten von der TYPO3-Installation bis zur ausgebauten Website erarbeiten.
Das Seminar orientiert sich dabei an den aktuellen Leitfäden des Online-Zertifikats (VHS) aber natürlich vor Allem auch an den Bedürfnissen der Teilnehmer im Seminar.
Hier die Rahmendaten unseres Seminars:
Ort: VHS Wolfenbüttel, Harzstraße 2-5, Raum LinuxZeiten: Mo, 28.03. - Fr, 01.04.2022; jeweils 08.00 - 15.30 Uhrfreiwillige Prüfung: Interesse wird ggf. im Seminar mit den interessierten Teilnehmern koordiniert
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...Ihr Trainer Joe Brandes
Diesen Begriff hört man in meinen Seminaren häufiger ;-). Gemeint ist hier: Das grundsätzliche Verständnis der fraglichen IT-Techniken. Am Besten gleich so, dass man auch nach einer Zeit ohne Beschäftigung mit diesen Techniken sehr schnell wieder in Fahrt kommt.
Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann. Quelle: Wikipedia - Roter Faden
Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann.
Quelle: Wikipedia - Roter Faden
Eine sehr grundsätzliche Erfahrung in der IT ist, dass sich natürlich die IT modernisiert. ABER: keine Entwicklergemeinschaft setzt sich dauernd hin und erfindet das Rad neu. Wir werden uns also erarbeiten, wie TYPO3 tickt und dann profitieren wir einfach mal ein paar Jahrzehnte davon ;-).
Die Themen im Groben:
Und natürlich schauen wir auch, das wir Ihre Topics im Seminar klären.
Wichtig: Lassen Sie sich zu Beginn des Seminars nicht von der Fülle an Infos in diesem TYPO3-Seminarbeitrag erschlagen. Es handelt sich auch um viel Zusatzinfos zu TYPO3 und unsere Entwicklungsumgebung XAMPP-CMSOD, die sich im Laufe des Seminars immer wieder mal nachschlagen/nutzen lassen.
Die Inhalte der Seminarewoche sind auch nicht nur bereits über die Seminartage/Seminarabschnitte aufbereitet, sondern ebenfalls oft mit Zusatzinfos versehen. Und natürlich ergeben sich ja nach Seminarverlauf leichte Abweichungen. Am Ende des Seminars sind dann alle Infos der Seminarwoche für Sie komplett.
Im Grunde will ich uns mit diesen Infos auch die nahezu fehlende TYPO3-Literatur ersetzen.Ausnahme: Praxiswissen TYPO3 CMS 10 LTS; Robert Meyer, Mathias Hellmich; Mittwald.
Die Dokumentationen der TYPO3-Gemeinschaft sind natürlich sehr gut und umfassend - diese Infos-Sites sind allerdings erst nach dem Seminar gut nutzbar.
Meine Ausarbeitungen im Rahmen einer geplanten Publikation zu TYPO3 finden Sie als RestructuredText Dokumente unter typo3.joe-brandes.de.
Mal sehen wo die Reise mit dieser Unterlage hingeht... Vielleicht ja als TYPO3 Fachbuch in 2022?
Wir müssen unsere Arbeitsplatzrechner optimal für die Umsetzungen mit TYPO3 (oder auch anderen Online-Techniken) vorbereiten.
Ansicht für den Standard-Dateimanager Window Explorer (Win + E) einstellen:
Windows Einstellungen - Dateierweiterungen einblendenAnzeige der Dateiendungen mit Windows Explorer (Win + E); Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...
Grund für die Konfiguration: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!
bild.jpg
bild.jpeg
bild.JPG
(siehe auch Beitrag Toolsammlung auf diesem Portal)
Die Software wird von mir auch gerne schon fertig lokal zum Installieren verteilt, um Zeit zu sparen. Bei häufigeren Einrichtungen von Entwicklungsumgebungen möchte man das gerne noch effizienter gestalten. Das führt uns zum Paketmanagement mit Chocolatey unter Windows.
Profitipp: Chocolatey zur Installation der gewünschten Tools
Schnellanleitung Softwareinstallationen mit Chocolatey Paketmanagement
# PowerShell vorbereiten: # ====================================================================== Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser Get-ExecutionPolicy # ergibt RemoteSigned # Chocolatey bereitstellen: # ====================================================================== # in Admin-PowerShell Copy&Paste von Chocolatey Seite # https://chocolatey.org/install # einfach die Copy&Paste Zeile mit Maus anklicken und in der # PowerShell Konsole mit rechter Maus wieder einfügen # ====================================================================== # hier die fragliche Installzeile für die Admin-PowerShell # Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) # die Chocolatey Install Seite zeigt auch, wie man die install.ps1 einfach # manuell herunterladen kann, um diese vorher zu inspizieren! # ====================================================================== # Chocolatey nutzen/testen # ====================================================================== choco version choco list --local-only # Chocolatey CMSOD Installationen: # https://community.chocolatey.org/packages # Wichtig: Admin-PowerShell nutzen # ====================================================================== choco install -y firefox choco install -y chromium choco install -y opera choco install -y notepadplusplus --x86 choco install -y vscode choco install -y 7zip choco install -y powertoys choco install -y git choco install -y nodejs choco install -y python3
Und natürlich installiert man sich nur die wirklich benötigte Software. Für die Softwareverwaltung reichen dann einfache Befehle choco install | list | upgrade ... mit der Windows PowerShell.
choco install | list | upgrade ...
Wir erarbeiten unsere Projekte lokal an unserem Windows-System. Die nötigen Services laufen ebenfalls hier:
Die gesamte Serverumgebung ist also bereits fix & fertig vorbereitet. Es fehlt auf der Client-Seite nur noch ein wenig Zusatzkonfiguration, damit wir unsere Projekte auch mit sauberen URLs nutzen können
WICHTIG: Die folgenden Konfigurationen bitte mit Adminrechten umsetzen (Windows - Als Administrator ausführen / Benutzerkontensteuerung/UAC)
Windows hosts Datei
Hinweis: beispielhafte hosts-Datei wird von Trainer verteilt - bzw. folgt hier als abgespecktes Beispiel für eigene Erweiterungen!Pfad: C:\Windows\System32\drivers\etc\hosts
C:\Windows\System32\drivers\etc\hosts
Einträge für die gewünschten TYPO VHosts erstellen:
# den lokalen CMSOD-XAMPP per Domainname ansprechen können: 127.0.0.1 cmsod40.local www.cmsod40.local # Konfigurationen - hier: # Beispiele für TYPO3 Modul # ------------------------------------------------- # Domain: typo3-demo.local # Alias: www.typo3-demo.local # Webserver: C:\xampp-cmsod\htdocs\typo3\www.typo3-demo.local # Datenbank: typo3_demo # Einsatz: eine Umsetzung für das T3-Seminar mit einem akuellen TYPO3 127.0.0.1 typo3-demo.local www.typo3-demo.local # am Besten auch gleich für eine weitere Seminarseite den VHost eintragen: 127.0.0.1 typo3-seminar.local www.typo3-seminar.local
Diese virtuellen Hosts (VHosts) müssen dann noch auf Serverseite (Apache Webserver) entsprechend passend konfiguriert sein! Siehe C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Hierfür folgen die nötigen Schritte und Anleitungen bei der Inbetriebnahme unserer Serverumgebung XAMPP-CMSOD.
Übersicht:
XAMPP für Windows maßgeschneiderte Seminar-Version basierend auf XAMPP 7.4.14 mit PHP 7.4.14
bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
Oder auch mal als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver
Vorgehensweise im "Windows"-Seminar (XAMPP-Server für Windows):
Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv bereit, das bereits für die CMS Joomla, WordPress, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.
Infos zum (hier) aktuellen XAMPP-CMSOD für meine Seminare:
Die Prüfsummen können in der PowerShell: evaluiert werdenTipp: Umschalten-Taste und Rechte Maus im Ordner zeigt PowerShell im Kontextmenü - Aufruf im Ordner des Archivs:
$a = Get-FileHash -Path .\xampp-cmsod-40-7.4.14-TEILNEHMER-20210124-1454.exe -Algorithm SHA256 $a.Hash
Das Trainer-XAMPP-Archiv wird nur bei Notwendigkeit (siehe PHP-Version 7.4 für TYPO3 v11) aktualisiert.Die eingebauten Techniken (s.u.a. Grafiktools, ...) könnten auch selber aktualisiert werden.
Schritte für die Inbetriebnahme de XAMPP-CMSOD:
C:\xampp-cmsod
C:\xampp
xampp-control.exe
localhost
Hier mal eine Übersicht nach dem "Auspacken/Installieren":
Die vorbereitete Umgebung in einer kleinen Übersicht:
C:\xampp-cmsod\
C:\xampp-cmsod\htdocs\typo3\...
C:\xampp-cmsod\apache\conf\httpd.conf
C:\xampp-cmsod\php\php.ini
Hinweis: beispielhafte httpd-vhosts-Datei ist bereits in dem vorbereitetem XAMPP-CMSOD vorhanden!
VHost-Konfigurationsdatei für den Apache: C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Jetzt noch einen nötigen Eintrag für die gewünschte VHost-Domain www.typo3-demo.local bereitstellen:Tipp: Vorlage des VHost-Abschnitts für www.typo3-demo.local kopieren und anpassen für eigene Projekte
www.typo3-demo.local
<VirtualHost *:80> ServerAdmin webmaster @ cmsod40.local DocumentRoot "C:/xampp-cmsod/htdocs/typo3/www.typo3-demo.local" ServerName typo3-demo.local ServerAlias www.typo3-demo.local ... </VirtualHost>
Anm.: hier nicht alle Zeilen dargestellt; die Kommentarzeilen wurden weggelassen.
Anm.: das sind die drei voreingestellten VHost-Projektadressen für unsere TYPO3-Seminare.
Weitere Infos zum CMSOD XAMPP Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter (URL) http: //localhost/cmsod-overview eine Website mit Infos rund um den CMSOD und die genutzten Techniken und Konfigurationen.
(URL) http: //localhost/cmsod-overview
Und schon kann es mit losgehen...
Montag, 28.03.2022, 08.00 - 15.00 Uhr
Versionen, Varianten
Einsatz im Seminar: TYPO3 11.5.8 LTSWebsite: typo3.org - Erfinder: Kasper Skårhøj
Bereitstellung (Downloads) in verschiedenen Archivformaten
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:
Aktuelle Versionen:
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:
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 ;-)
TYPO3-Hosterbeispiele: Mittwald oder JWeiland (TYPO3 Template - Musterprojekt JWeiland)
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_seminar
typo3_demo
typo3_
./typo3
./vendor
index.php
./fileadmin
./typo3conf
./typo3temp
./uploads
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!
typo3_src/typo3_src-11.1.1
/typo3
typo3_src
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.
Install.md
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!
mklink
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 OrdnerC:\xampp-cmsod\htdocs\typo3\www.typo3-demo.local
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
http://www.typo3-demo.local
Entsperren der Installation mittels Datei FIRST_INSTALL im Hauptverzeichnis der TYPO3-Installation
FIRST_INSTALL
Zugang zum Datenbankserver (mit XAMPP Standard-User: (Benutzer / Passwort)
root
"leeres Kennwort"
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
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 KennwortAnm.: in meinen CMSOD-Projekten, die ich an TN verteile wird die User/Password-Kombination admin/cmsodcmsod genutzt.
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
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
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-ToolProfi-Trick: Install-Tool Passwort wird in der Datei ./typo3conf/LocalConfiguration.php als verschlüsselter "Hash"-Wert hinterlegt..
./typo3conf/LocalConfiguration.php
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:
In XAMPP-CMSOD ist eine Version Imagemagick im "XAMPP-CMSOD Tools-Ordner"C:\xampp-cmsod\_tools\ImageMagick-7.0.7-0\ vorbereitet worden.
C:\xampp-cmsod\_tools\ImageMagick-7.0.7-0\
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.
Seitenbaumstruktur erstellenWir 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):
./index.php?id=2
Anm.: (aller-)oberste TYPO3-Hierarchie (siehe TYPO3-Logo) hat die ID=0 !
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
./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).
Ü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:
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.
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
# Ü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
Übungsbeispiele wie im Code oder: meta-Tags überschreiben, Inhalte von TS-Objekten (TEXT - value) überschreiben
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:
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:
Hier beispielhafter TypoScript-Code:
# 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
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!
seite.100 < styles.content.get
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:
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:
Dienstag, 29.03.2022, 08.00 - 15.30 Uhr
Ausführliche Rekapitulation
Ihre TN-Fragen... und dann geht es auch schon los ...
Für ein neues TYPO3-Projekt benötigen wir immer (siehe auch folgende Zeichnung/Scribble im Seminar)
Die möglichen Lösungen / Umsetzungen:
Scribble (hier aus Seminar "2018")
1) Projektordner erstellen / bereitstellen
.\htdocs\typo3\www.typo3-seminar.local
./www/html/typo3/typo3-seminar
2) Datenbank
localhost/phpmyadmin
3) Namensauflösungen:
.\apache\conf\extra\httpd-vhosts.conf
www.firmaxyz.de
Alles keine "Hexerei" - sollten wir mit einer Übung begleiten...
... 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)
www.typo3-seminar.local
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!
.\httpd-vhosts.conf
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):
fluid_styled_content
... eine kurze Übersicht und Wiederholung
Hautptordner / Dateien: sind aus den TYPO3-Sources/Quellen (TYPO3-Core/Kern)
Die Dateien sollten nur in Problemlösungsfällen manuell bearbeitet werden! Beispiele:
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)
# 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
Hier folgt ein Auszug aus dem Setup-TS-Code, den wir mit dem statischen Template SYS:TYPO3_CONF_VARS:FE:defaultTypoScript erhalten:
styles.content.get = CONTENT styles.content.get { table = tt_content select.orderBy = sorting select.where = {#colPos}=0 }
Eine Übersicht über den kompletten Code erhält man über Web - Template - Template Analyzer.
Für die anderen Standardspalten für Inhaltsobjekte
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.getseite.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.
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!)
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!
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!
...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ßendAber: 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, ...!
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.
Mittwoch, 30.03.2022, 08.00 - 15.30 Uhr
Rekapitulation, TN-Fragen
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.
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.
In den vorbereiteten Setup-TS für unser FLUIDTEMPLATE Beispiel sieht man die Verwendung von Konstanten. Hierdurch kann man einen
nutzen.
# 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
Die Konstanten werden dann im Setup-TS nutzbar:config.admPanel = {$kunden.adminpanel}
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.
Vom Trainer vorbereitete Dateien und Ordnerstrukturen werden mittels "Copy & Paste" verdrahtet.
Mehrere Versionen / Varianten vom Trainer vorbereitet und verteilt:
gitlab.com/joebrandes/jbspb_bootswatch.git
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.
gitlab.com/joebrandes/cmsod-typo3.git
./SNIPPETS/10/, ..
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.
fileadmin
... 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:
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:
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.
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 - SitesAnm.: 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
./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.
/typo3conf/sites/
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:
Das TYPO3-Leben unter Version 9 ist also deutlich einfacher geworden.
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)
config.sys_language_uid = 0
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=1Setup-TS:
index.php?id=85&L=0
index.php?id=85&L=1
# 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: | [global]
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!
Donnerstag, 30.03.2023, 08.00 - 15.30 Uhr
Rekapitulation, TN-Fragen: Techniken Sprache/SEF
In der leeren Demo-Projektseite (siehe Montag - Tag 01) wurde schrittweise
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:
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 }
Für die Sprache L=1 nutzte man konditionales TS:
# 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]
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!
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 - TYPO3 Extension Repository (modernisiertes Web-Onlineportal ab III/2017 - Link)
Pro & Contra Erweiterungen / Entscheidungsprozesse:
Installationsarten:
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.
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.
filadmin
Die Vorteile von Sitepackages in einer Auflistung:
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.
./typo3conf/ext/..
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.
Freitag, 01.04.2022, 08.00 - 15.30 Uhr
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
config.index_externals = 1
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 = 1Check von config.index_enable mittels TypoScript Object Browser ergibt Aktivierung nach Installation ohne zusätzliches Setup-TS.
config.index_enable = 1
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:
... <!--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>
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!
... 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:
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
fileadmin/templating/bu/Fluidtemplate/TemplateReverse.html
Wir wollen jetzt die jeweilige Template-Datei nicht manuell zuweisen, sondern verwenden als neue file Anweisung im Setup-TS den folgenden (genialen) TS-Code:
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 } }
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:
############## #### 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 } } }
Das ist auch die Lösung, die ich in unserem Sitepackage verpackt habe: EXT:jbspb_bootswatch .
EXT:jbspb_bootswatch
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
und liefert in der aktuellen Version eine Bootstrap 3 Seite aus.
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!
typo3conf/LocalConfiguration.php
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
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.
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:
./typo3conf, ./fileadmin (, ./typo3temp)
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:
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:
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)
........ (wegen Sicherheit auf CMS-System entnommen)
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!
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
Und als Specials folgen jetzt noch zwei Register bzw. Kapitel zu den Themen
Das Seminarspecial zum Thema ...
Nach einführenden und eingehenden Versuchen mit TYPO3 stellt sich früher oder später die Frage nach einer gewünschten "stylishen" Ausgabe der Website.Wie bekomme ich also die gewünschte HTML / CSS / JS - Technik kombiniert mit meinen TYPO3-Frontend-Ausgaben (siehe TypoScript).
Für den Einstieg erst einmal eine Übersicht über die möglichen Techniken "Websites herausgeben mit TYPO3":
TypoScript-Pur: Alles per TypoScript kodieren! (siehe Mo/Di - geht so, ist aber nicht "schön" ;-)
Template Building (früher: MTB - Modern Template Buildung)
Nutzen von HTML/CSS-Vorlagen in Kombination mit cObject TEMPLATE und
Diese Marker/Subparts werden dann per TS ersetzt.Hinweis: Anleitungen zu solchen technischen Umsetzungen finden sich in Beiträgen zu Vorgängerseminaren zu TYPO3 auf diesem Infoportal (z.B. Link)
Automaketemplate (Erweiterung zu MTB - Autor: Kasper Skårhøj)
...automatisiert das Nutzen der HTML-Seite mit MTB-Technik unter Zuhilfenahme der benutzen Klassen/IDs von HTML-Tags (DIVs) und nutzt diese Bereiche als "fertige Markierungen" automatisch zum Ersetzen.
Templavoilá (sehr komplexe und mächtige Erweiterung/Extension)
Komplett andere Herangehensweise mit anderem TS: hier können TV-Seiten dann für die BE-Nutzer das Design der Seite abbilden und können so die Eingabe von Datensätzen erleichtern.
Nachteil: sehr aufwendige Implementierung / hoher Konfigurations-Aufwand
Anm.: lässt sich heute mit Backend-Layouts und einfachen Erweiterungen (z.B. EXT:gridelements) besser und mit TYPO3-onboard-Techniken - also ohne große Erweiterung(en) - lösen.
Fluidtemplate (cObject FLUIDTEMPLATE)
cObject-Technik nuzt die modernen Erweiterungen fluid (und extbase). Diese wurden im Rahmen der TYPO3 Version 5 (Phoenix und Flow) entwickelt und eingeführt.
Die Techniken wurden auch auf Version 4.5 zurückportiert und waren also auch ab TYPO3 4.5 LTS verfügbar!
Kurzerläuterung: Nutzung von cObject FLUIDTEMPLATE und
an entsprechenden Platzhaltern.
And the winner is Fluidtemplate!
... wieder mal ein Template ;-)
Bereitstellung eines freien "HTML - CSS - JS"-Templates basierend auf Bootstrap-Technik: mPurpose (MIT-License - wird im XAMPP-CMSOD im Ordner _tools bereitgestellt)
Wir wählen die Page mit Blog-Darstellung (mit linker oder rechter Navigationsleiste) für die Hauptdarstellung unserer TYPO3-Site.
FluidTemplate Technik Umsetzungen: Einbau von "Platzhaltern" zum Ersetzen von Inhalten durch TYPO-TypoScript wird durch mich vorbereitet und verteilt!
Tipp für TN, die das selber mal durchspielen wollten (HTML/CSS-Kenntinisse zwingend nötig): nutzen von Code-Inspektoren (Firefox, Chrome mit Umschalten + Strg + I; IE mit F12; Edge: Strg + U) zur Identifkation der Code-Bereiche zum Ersetzen und Austauschen.
In den vorbereiteten Setup-TS für unser folgendes 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.
Die Konstanten werden dann im Setup-TS durch die folgende Syntax nutzbar:config.admPanel = {$kunden.adminpanel}
Erinnerung/Hinweis: Ü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!
... siehe auch Webseiten mit Erläuterungen: Portal T3N , Marco Seiler , TS Referenz , TYPO3Buddy
Meine Teilnehmer bekommen von mir eine (kleine) technische FLUIDTEMPLATE Umsetzung bestehend aus
DefaultTemplate.html
./Layouts/DefaultLayout.html
Plan: Umsetzung einer "2-spaltigen Blog" Ansicht des Bootstrap-Template mPurpose (s.o.)
Zur Einstimmung ein Screenshot der Flow-Online-Hilfe (Autor/Co: Robert Lemke - Entwickler von TYPO3 Phoenix / Neos und Flow, Mit-Geschäftsführer von flownative.com, einem auf Flow spezialisiertem Hoster). Anm.: Flow ist das PHP-Framework, welche bei TYPO3 Version "5" entwickelt wurde.
Man erkennt folgende Bestandteile:
Schauen wir uns jetzt die einzelnen Komponenten genauer an...
In Kürze: das FluidTemplate enthält die Grundanweisungen für die fluiden Techniken: fileadmin/templating/bu/FluidTemplate/DefaultTemplate.html
fileadmin/templating/bu/FluidTemplate/DefaultTemplate.html
Hier beispielhafter FluidTemplate-Code:
<f:layout name="DefaultLayout"/> <f:section name="ContentLeft"> <div class="col-sm-8"> <f:if condition="{contentMain}"> <f:format.raw>{contentMain}</f:format.raw> </f:if> </div> </f:section> <f:section name="ContentRight"> <div class="col-sm-4 blog-sidebar"> <f:if condition="{contentSidebar}"> <f:format.raw>{contentSidebar}</f:format.raw> </f:if> </div> </f:section>
Als erstes wird das zuständige Layout angegeben, welches die Gesamtseitenstruktur (purer body ohne die äußeren Tags html, head und auch ohne body-Tags). In geschweiften Klammern erkennt man hier die variables, die im Setup-TS definiert werden (s.u.).
Der Layout-Name wird im entsprechend konfigurierten Layout-Ordner gefunden und die Endung .html erwartet/angefügt:fileadmin/templating/bu/FluidTemplate/Layouts/DefaultLayout.html
fileadmin/templating/bu/FluidTemplate/Layouts/DefaultLayout.html
Hier ein paar beispielhafte Zeilen aus der Layout-Datei:
... <div class="row"> <!-- Blog Post --> <f:render section="ContentLeft" /> <!-- End Blog Post --> ... <!-- Sidebar --> <f:render section="ContentRight" /> <!-- End Sidebar --> </div> ...
Anm.: die Syntax "<f:.." bezeichnet Fluid ViewHelper, also vorbereitete Techniken der Fluid-Technik (hier: render - also "ausfüllen/erstellen").
Jetzt benötigen wir noch das passende Setup-TS:
# cObject für neue Fluid/Extbase Technik - FLUIDTEMPLATE page.10 = FLUIDTEMPLATE page.10 { # wenn man nur ein Template hat, dann reicht der folgende Einzeiler file = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/ layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/ variables { contentMain < temp.main # wird im Setup-TS für conten mit colPos=0 definiert contentSidebar < temp.sidebar # wird im Setup-TS für conten mit colPos=1 definiert } }
Das Besondere am FluidTemplating wird deutlich, wenn man erkennt, dass man mit dieser Technik auch Bedingungen (z.B. bei Sprachen) nutzen kann oder auch einfach direkt die Setup-TypoScript Techniken "roh" einfügen/ersetzen kann:
<div class="row"> <div class="col-md-12"> <h1>Testseite mPurpose</h1> <f:cObject typoscriptObjectPath="lib.search" /> </div> </div>
Hier wurde ein Setup-TypoScript-Block mit dem Namen "lib.search" für eine Suchbox mit Erweiterung EXT:indexed_search direkt über den ViewHelper "<f:cObject ...>" eingefügt.
Ergänzt wird diese Grundtechnik durch die sogenannten Partials: das sind Website-Stellen, die mehrfach auf der Seite auftauchen sollen.
Das Ganze stellt eine sehr effiziente und mächtige Technik dar, die sowohl im TYPO3-Core als auch in allen guten Erweiterungen und TYPO3-Entwicklungen eingesetzt wird.
Für Sitepackage kursieren auch andere Begriffe, die oft auch mehr Techniken beinhalten können:
'category' => 'templates'
ext_emconfig.php
Für die Umsetzung von Sitepackage Technik mit TYPO3 gibt es diverse Infos und Anleitungen auf typo3.org und anderen Portalen:
TYPO3 Sitepackage Tutorial (M.Schams)
Youtube Channel TYPO3 - Tutorial - Site Packages - Part 1 (M. Schreiber, B. Kott)
Sitepackage-Builder - Kickstarter Website (Benjamin Kott)
Benjamin Kott Speakerdeck Sitepackages
Dokumentationen von TYPO3 der Einstieg zum Thema:
Developing TYPO3 Extensions with Extbase and Fluid
Extension Development
Aber das wären dann schon wirklich dicke Brocken, die man da verdauen müsste.
Im Grunde würde es ja reichen, wenn man mal schnell das nötige Grundgerüst aus Dateien und Ordnern mit den wichtigsten Basiseinträgen hätte. Und so nebenbei wäre es schön, wenn man auch gleich die Standardausgaben am Frontend mittels Fluid Styled Content verdrahtet oder sogar gleich mit einem „HTML/CSS/JS“ Framework kombiniert verdrahtet.
Und genau das hat Benjamin Kott mit dem Sitepackagebuilder auf der Website sitepackagebuilder.com bereitgestellt.
Hier wurde im Screenshot gleich das gesamte Extension Package EXT:bootstrap_package von Benjamin Kott ausgewählt.
Wir entscheiden uns natürlich (erst einmal) für die Standardlösung mit Fluid Styled Content. Diese Auslieferungen hatten wir uns auch immer bei den vorbereitenden Beschäftigungen mit Fluid Templating angeschaut.Wichtig: diese Herangehensweise inkludiert bereits das Statische Template fluid_styled_content!
In den Seminaren analysieren wir die erstellte Sitepackage Technik ausführlich und schauen uns Ihren Einsatz an einem praktischen Beispiel an (Bootswatch HTML/CSS/JS Template mit Bootstrap 5).
Hier zur Erinnerung das Gitlab Repo mit einer kompletten Ausarbeitung: gitlab.com/joebrandes/jbspb_bootswatch.git
Extensions sind eine mächtige und wichtige Technik in TYPO3. Die Entscheidung zum Einsatz von Erweiterungen in TYPO3-Projekten wurden schon diskutiert. In den aktuellen Seminare konzentriere ich mich gerne voll auf die Kerntechniken von TYPO3.
Hier folgen ein paar Ausführungen rund um Extensions aus bisherigen Seminaren
Link zum TER: https://extensions.typo3.org/extension/ns_all_lightbox
Über Modul Adminwerkzeuge - Erweiterungen gewünschte Erweiterung mit Key ns_all_lightbox suchen lassen und installieren.
Check für neue Übersetzungen (hier: deutsch) verfügbar?
Einbinden der Statischen Templates für die Erweiterung nicht vergessen! Bilder in CE auf "Klick vergrößern" lassen - fertig!
Fragen: Ist die Extension auch kommerziell nutzbar? Kann ich die Umsetzung "Lightbox" nicht auch ohne Erweiterung erreichen?
Link zum TER: https://extensions.typo3.org/extension/news
Eine Verwaltung von Nachrichten/News - vielseitig auch für andere Veröffentlichungen/FE-Nutzungen verwendbar!
Neuentwicklung einer klassischen News-Erweiterung für TYPO3 von Georg RingerBitte nicht verwechseln mit diesem Klassiker: EXT:tt_news (nur für Version TYPO3 7 verfügbar) statt EXT:news
Kurzanleitung:
Tipp: sehen Sie sich die bereitgestellten Konstanten des News-Systems an - dort finden Sie die Standard-Ordner für die EXT:news:
EXT:news/Resources/Private/Layouts/
EXT:news/Resources/Private/Templates/
EXT:news/Resources/Private/Partials/
EXT:news/Resources/Public/Css/news-basic.css
Übung: Überschreiben der CSS-Klasse der News-Extension
background: #fff;
Diese Extension ist eine sehr aktuelle Entwicklung mit sehr großer Nähe zu TYPO3 Core Entwicklern und Unterstützern/Firmen (siehe TYPO3 GmbH).
Link zum TER: https://extensions.typo3.org/extension/blog/
Aktueller Status im TER (11.04.2021): für TYPO3 Versionen 9 und 10 verfügbar.
Link zum Github Repo: https://github.com/TYPO3GmbH/blog - hier weist der Branch master bereits die Kompatibilität zu TYPO3 v11 aus!
This blog extension uses TYPO3s core concepts and elements to provide a full-blown blog that users of TYPO3 can instantly understand and use. O-Ton Github Repo EXT:blog
This blog extension uses TYPO3s core concepts and elements to provide a full-blown blog that users of TYPO3 can instantly understand and use.
O-Ton Github Repo EXT:blog
Aber wie gesagt - und ich wiederhole mich gerne ;-) - der Einsatz von 3rd-Party-Extensions sollte gut überlegt sein.
{tab=TS|green}
In diesem Abschnitt versuchen wir eine Übersicht über die TypoScript Techniken darzustellen.
Wir beginnen mit den notwendigen Template-TS Codierungen über ...
Modul Web - Template - Info/Bearbeiten
Bei einer neuen Installation beginnt alles mit einem "Hello World" Setup TS:
# Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD!
Schon dieser Minimal-Setup-TS-Code liefert eine komplette HTML5-Website aus!
Im Weiteren folgen "echte" Setup-TS-Schnippsel mit kurzen Anmerkungen und Kommentaren. Bitte immer die sauberen Containments beachten. Damit ist die Schreibweise mit den geschweiften Klammen {} gemeint, die kürzere Kodierungen im TS erlauben.
config { # Fluid Schalter für Sprache temp.language = TEXT temp.language.value = de # Activate/Deactivate Admin-Panel - hier wird Konstante genutzt! admPanel = {$kunden.adminpanel} # Spam protection, encode email-address, exchanging @ to '(at)': spamProtectEmailAddresses = 1 spamProtectEmailAddresses_atSubst = (at) # Extra Debug-Info as comment in HTML code. # Should be deactivated after going online! # debug = 0 # Enable indexedsearch - dann auch für externe files (pdf, doc, etc.) # ------------------------------------------------------------------- # index_enable = 1 # index_externals = 1 # index_metatags = 0 # Css and JS compression for live # ------------------------------- # compressJs = 1 # concatenateJs = 1 # compressCss = 1 # concatenateCss = 1 # der Vollständigkeit halber hier auch Konfigurationen vor Version 9 # Grundkonfiguration EXT:realurl: (ab v9 mit Seitenkonfiguration) # ------------------------------- # simulateStaticDocuments = 0 # baseURL = http://www.typo3-seminar.local # tx_realurl_enable = 1 # HTML5 Settings - Set doctype # ---------------------------- # doctype = html5 # xmlprologue = none # Removes comments around content elements # ---------------------------------------- # disablePrefixComment = 1 # 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 }
Besondere Bedeutung haben im Setup-TS dann Konditionen:
Dieses Beispiel zeigt die klassischen Konditionen für eine "zweite" Website-Sprache: sys_language_uid=1 bzw. L=1.
Für das weitere Setup-TypoScript werden "Code-Blöcke" erstellt, die dann später an diversen Stellen genutzt werden:
Und los geht es...
Wir holen uns die Datensätze für die CE (Content Elements) aus der TYPO3-Datenbank-Tabelle tt_content:
# hole die Datensätze aus colPos=0 # Erinnerung: die colPos definieren wir mit BE-Layouts temp.main < styles.content.get # hole die Datensätze aus colPos=1 temp.sidebar < styles.content.get temp.sidebar.select.where = colPos=1
Auf diese Weise können wir dann über weitere .select.where = colPos=X Codezeilen unsere in Backend-Layouts definierten Datensätze aus der Datenbank holen.
.select.where = colPos=X
Horizontales Hauptmenü für die Nutzung in HTML-Template mPurpose:{code lang:bash showtitle:false lines:false hidden:false}# eine kleine HMENU-Spielerei für Seminar mit Vorlage mPurposelib.menuMain = HMENUlib.menuMain {# special = directory# special.value = 1entryLevel = 0wrap = <ul> <li class="logo-wrapper"><a href="/testing/joomla.html"><img src="/{$kunden.templatingpfad}/HTML-CSS-JS/img/mPurpose-logo.png" alt="Multipurpose Twitter Bootstrap Template"></a></li> | </ul>1 = TMENU1 {expAll = 1NO = 1NO {allWrap = <li> | </li>ATagBeforeWrap = 1linkWrap = <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span> |stdWrap.htmlSpecialChars = 1}ACT < .NOACT {allWrap = <li class="active"> | </li>} }}{/code}Die sogenannten Wraps sind wörtlich zu nehmen: dort werden gewünschte HTML-Codes an der gewünschten Stelle "eingewickelt"!
Als weiteres Beispiel das "Spezial-Menü" für die "Spezial-Seiten" (z.B. Impressum und Co):
# Das obere Spezialmenü - oben rechts - erstellen # im ./Layouts/DefaultLayout.html muss der nötige Fluid-Platzhalter # eingefügt werden - Oberhalb des Platzhalters für lib.languages : # <f:cObject typoscriptObjectPath="lib.menuSpezial" /> lib.menuSpezial = HMENU lib.menuSpezial { special = directory # die folgende ID muss zum Ordner passen! special.value = 8 wrap = <ul class="navi"> | </ul> # Die erste Ebene: 1 = TMENU # 1.expAll = 1 1.NO.wrapItemAndSub = <li> | </li> }
Besondere Bedeutung hat hier lib.menuSpezial.special.value , wo man die Seiten-UID für den Ordner aus dem Seitenbaum der T3-Site passend zuweisen muss.
Im Kommentar kann man die spätere Nutzung in der Fluid-Technik erkennen: <f:cObject typoscriptObjectPath="lib.menuSpezial" />
<f:cObject typoscriptObjectPath="lib.menuSpezial" />
Im folgenden Code lassen wir die unzureichenden HTML-Klassen für ein Content Element Table (ce-table) ersetzen:
# Die Standard CSS-Styling/Klassen für Table-Tag anpassen/ersetzen/austauschen: tt_content.table.stdWrap.replacement { 10 { search = class="ce-table replace = data-role="table" class="ce-table table table-striped table-hover table-responsive } }
Grund: wir benötigen die zusätzlichen Klassen, damit die Tabelle komplett "Bootstrap 3"-gestyled ist (gestreift/striped, hover-Effekt, Responsive).
Zum guten Schluss: das eigentliche Seitenobjekt PAGE bauen:
# PAGE object: page = PAGE page.includeCSS { file1 = {$kunden.templatingpfad}/HTML-CSS-JS/css/bootstrap.min.css file1.media = all ... file4 = {$kunden.templatingpfad}/HTML-CSS-JS/css/joebstyle.css file4.media = screen } page.10 = FLUIDTEMPLATE page.10 { file = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/ layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/ variables { contentMain < temp.main contentSidebar < temp.sidebar } }
Im ersten Teil werden mittels page.includeCSS die nötigen CSS-Dateien inkludiert (eingefügt). Anm.: normaler Weise hat man dann noch page.includeJS - allerdings sind die JS-Aufrufe in das HTML-Template direkt eingebaut.
Mit page.10 folgt dann der eigentlichen Hauptdarsteller der Site: das cObject FLUIDTEMPLATE - Voilà!
Wir können aber mit TS auch andere Bereiche beeinflussen...
Modul Web - Seite - Seiteneigenschaften ... - Tab: Ressourcen - Seiten-TS-Config
Beispiel: Vorgaben Zugriffsberechtigungen für neue Seitenelemente im Seitenbaum (siehe BE-Benutzer-Berechtigungen)
Einstellungen recherchiert: Link zur TSConfigReference der typo3.org - diese Konfigurationen machen erst mit BE-Gruppen Sinn...
Modul System - Backen-Benutzer - Benutzereigenschaften - Tab: Optionen - TS-Config
Beispiel:Konfiguration der Benutzerumgebung - also Maßschneidern des BE (IDs anzeigen, Farben im Seitenbaum, ...)
Recherche zu "Farben im Seitenbaum": Link 1, Link 2 Übung: User-TS für das Einschalten der IDs im Seitenbaum konfigurieren: options.pageTree.showPageIdWithTitle = 1
options.pageTree.showPageIdWithTitle = 1
Schönen Dank für die kurzweilige Woche im "kleinen Kreis" und Ihre tollen Rückmeldungen und Interessen an weiteren Seminaren.Bleiben Sie gesund. Bis in Kürze.Ihr Trainer Joe Brandes
Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...
Private Visitenkarte / Technik: HTML & CSS joe-brandes.de
Ich erarbeite und konzipiere seit über 30 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!
BECSS Visitenkarte / Technik: HTML & CSS becss.de
Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.
Billard Sport BS / nicht mehr von mir betreut billard-bs.de