• typo3.orgtypo3.org

In der Woche ab Montag, dem 27. März 2017 findet an der VHS Braunschweig ein Seminar zum Thema "TYPO3" im Rahmen der Seminare des "CMS Online Designer (VHS)" statt.

Der Bildungsurlaub wird uns in die praxisorientierte Implementierung eines aktuellen TYPO3-Systems auf einem Server-Entwicklungssystems einführen. So wird im Laufe der Woche ein komplettes T3-Projekt entstehen und viele Fragen rund um das Backend, TypoScript oder die Nutzung von Extensions sollen geklärt werden!

Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.03
Zeiten: Mo. 27.03. bis Fr. 31.03.17; jeweils 08.30 - 16.00 Uhr
Prüfung: eine freiwillige Prüfung für das Modul IIIb des "CMS Online Designer"-Zertifikats wird mit den TN im Seminar absprochen
Termin: Do. 27.04.2017, 16.30 Uhr, Raum 2.03 (2 Teilnehmer)
Erstkorrektur: Status - erledigt - 07.05.2017 - beide TN haben bestanden, ich gratuliere!

Ich werde unser Seminar an dieser Stelle ausführlich begleiten und wünsche viel Spaß und Erfolg ...
Ihr Trainer Joe Brandes

Mo, 27.03.17

Montag, 27.03.17, 08.30 - 16.00 Uhr

  • Orientierungsphase, TN-Themen, Pausenzeiten, Cobra Shop - Software für Teilnehmer (Link)
  • Software für das Seminar
    Einstellungen Windows (Windows Explorer; Win + E) - unbedingt Dateierweiterungen einblenden lassen!
    Software (Empfehlungen - bzw. als Portable Apps beim XAMPP-CMSOD):
    Browser Mozilla Firefox, Packer 7-Zip, Editor Notepad++ (siehe Toolsammlung zum CMS Online Designer)
  • Windows-XAMPP
    Konfigurationen nötig auf Windows- (also Client-) und Server-Seite (XAMPP)
    Anm.: Trainer Joe Brandes stellt einen komplett für den CMS Online Designer und TYPO3 vorkonfigurierten und dokumentierten XAMPP-CMSOD bereit!
    Ich stelle als Trainer ein fertiges und selbstentpackendes XAMPP-Archiv (7-Zip) bereit, das bereits für die CMSOD-Seminare vorkonfiguriert ist und nur zu Übungs-/Test- und Entwicklungszwecken genutz werden sollte!
    Aktuelles Archiv: xampp-cmsod-TEILNEHMER-20170323.exe

    MD5-Prüfusumme:  9615a3cd01e16463cc39e5c2b468143b
    Dieser XAMPP hat eine integrierte Konfigurations-Dokumentation - diese Doku des Seminar-XAMPP wurde auch auf diesem Portal (siehe Link zu CMSOD 2.0 bzw. 3.0) bereitgestellt und in einer speziellen CMSOD-Website (TYPO3-Technik) aufbereitet.
  • XAMPP-CMSOD (Version 2.0 bzw. 3.0 Beta)
    die vorbereitete Umgebung:
    TechnikInfoBemerkung
    XAMPP C:\xampp-cmsod\ Basispfad des XAMPP-CMSOD
    Web-Dokumente C:\xampp-cmsod\htdocs mit Unterordnerstrukturen
    URL http://localhost/typo3/typo3-seminar Projekte immer über http:// aufrufen
    Apache C:\xampp-cmsod\apache\conf\httpd.conf Konfigurationsdatei Webserver
    PHP C:\xampp-cmsod\php\php.ini Konfigurationsdatei PHP
    Arbeiten am TN-PC (Client-Seite):
    Systemvariable OPENSSL_CONF einrichten (Anleitung in der Doku zum CMSOD 2.0/3.0)
    Win + Pause ruft die Systemeinstellungen auf
    Erweiterte Systemeinstellungen (oben links) anklicken
    Benutzerkontensteuerung - Admin - mit Passwort
    Umgebungsvariablen (Button unten auf Register Erweitert)
    Unten: Systemvariablen - Neu klicken
    Name: OPENSSL_CONF
    Wert: c:\xampp-cmsod\apache\conf\openssl.cnf
    Windows User ab- und wieder anmelden (um Variable neu einzulesen)
    Natürlich XAMPP wieder starten
    openssl-conf-800px

    später ggfs. dann auch VirtualHosts einrichten für "echte Domänen": (Anm.: heute nicht konfiguriert; ggf. in Seminarwoche)

  • Serverumgebung XAMPP - Seminar-Version: XAMPP 7.0.13 mit PHP 7.0.13
    basierend auf den XAMPP-Systemen der Website www.apachefriends.org
    X - diverse Betriebssysteme: Linux (L), Windows (W), MacOS (M) oder Sun Solaris; klassisch: LAMP-Systeme!
    AMP - A - Apache (Webserver), M - MariaDB / MySQL (Datenbankserver), P - PHP (serverseitige Skriptsprache)
    P - Projekt;
    bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL - PHP)
  • Vorgehensweise im Seminar:
    Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-Archiv bereit,
    das bereits für Joomla und die anderen CMSOD-Seminare vorkonfiguriert ist
    und auch Beispielinstallationen enthält!

    1) XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe oder von bereitgestellter Trainer-CD
    2) Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
    3) Zielordner: C:\xampp-cmsod angebeben
    Anm.: Entpacken in Zielpfad  C:\xampp-cmsod  ist wichtig!
    Grund: weil alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
    Tipp: eigene XAMPPs kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
    4) Starten der xampp-control.exe (Kontrollcenter) und
    5) Starten von Apache Webserver und MySQL Datenbankserver
    Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können abgebrochen werden, da wir keine Zugriffe auf unsere lokalen Testinstallationen über das Netzwerk wünschen. Die Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) müssen wir täglich (also jeweils bei Bedarf) starten.
    Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!
    6) Browser Starten des für Webentwicklung CMSOD optimierten Firefox über Schaltfläche "Admin" im Kontrollcenter bei Webserver Apache
    Hinweis: dieser portable Firefox hat bereits Standard-AddOns installiert und nutzt z.B. auch keinen Browser-Cache;
    Wichtig: Sie können einen installierten und diesen mobilen FF nicht gleichzeitig nutzen!
    xampp cmsod darstellung 20161203

    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.

  • TYPO3 (Versionen, Varianten - Einsatz im Seminar: TYPO3 7.6.16)
    Website: typo3.org - Erfinder: Kasper Skårhøj
    Bereitstellung (Downloads)  in verschiedenen Archivformaten (tar.gz - Unix/Linux, zip - Windows)
    Versionen:
    4.4 - 4.5 (LTS ab Jan 2011) - 4.6 - 4.7 -
    6.0 - 6.1 - 6.2 (LTS ab 25. März 2014 bis min. März 2017) -
    7.0 - 7.1 - 7.2 (wahrscheinlich dann 7.6 LTS Ende 2015)
    Aktuell: 7.6.x (Seminar 7.6.16)
    in Vorbereitung: 8.7 LTS Prep für 04.04.2017
    Anm.: TYPO3 NEOS: früher Version 5.0 (Phoenix - basiert auf Framework FLOW und wurde von CMS TYPO3 getrennt)
    Long Term Support (eingeführt Jan 2011) - jeweils 1 Jahr Überschneidung mit neuer LTS Variante mit dann maximal bis zu 5 Jahren Support (3 Jahre Allgemeiner/Vollständiger Support danach noch Sicherheitsupdates!)
    Der jeweilige Planungsstatus kann jeweils über die TYPO3 Roadmap nachgeschlagen werden!
  • TYPO3-Hoster
    fast alle Hoster können TYPO3 "irgendwie" hosten - aber manche haben sich auf die speziellen Anforderungen (Performance, Aktualisierungen TYPO3-Sources, php.ini-Anforderungen, ImageMagick, zusätzliche Unterstützung für TYPO3-Extensions, Sicherheit, ...) spezialisiert und bieten sogar TYPO3-Projekte auf Mausklick!
    TYPO3-Hosterbeispiele: Mittwald oder JWeiland
  • Vorinstalliertes TYPO3-Projekt "typo3-testing"
    analysiert und genuzt für erste Gehversuche mit dem TYPO3-Backend (BE)
  • Rundgang durch die Module
    das Backend (BE) ausführlich von unten nach oben erkundet!
  • Modul Datei -> Dateiliste
    BE unterstützt modernes Drag & Drop
    sauberes Anlegen von Ordnerstrukturen für Bilder, PDFs (mit Unterordnern)
    Tipp: der "Fileadmin" hat Eigenschaften (Rechte Maus - Bearbeiten) mit denen man z.B. auch die Sensitivität für Groß-/Kleinschreibung aktivieren kann!
    später: Nutzen der bereitgestellten Bilder in CE (Content Elements - Inhaltselementen) "Text und Bilder": jetzt kann man auch bei den Bildern die Referenzen einsehen, wo die Bilder eingesetzt werden
  • Installation:  Version: 7.6.16  (LTS)
    Installationsarchiv (*.zip) für die Version
    sauber entpacken in C:\xampp-cmsod\htdocs\typo3\typo3-seminar
    Analyse der TYPO3-Core-Technik durch Vergleich der vorliegenden fertigen TYPO3-Projektseite "typo3-testing" mit dem entpackten und noch nicht durchinstallierten "typo3-seminar"-Projekt.
    Ein TYPO3-Projekt besteht also - neben der (späteren) TYPO3-Projekt-Datenbank - aus
    1) TYPO3-Core:
    Ordner: ./typo3 (eigentlicher TYPO3-Kern), ./vendor (Zusatztechniken - früher in Unterordner ./typo3/contrib) und Hauptdatei index.php  
    2) TYPO3-Website:
    Ordner werden alle durch Installprozess erstellt; (früher: eigener Download als dummy-4.5.15.zip)
    ./fileadmin (Dateispeicher) , ./typo3conf (Konfigurationen, Erweiterungen) ,
    ./typo3temp (Temporäres) , ./uploads (Hochgeladenes)
    Der eigentliche Clou hierbei: man braucht auf den Linux-Webservern nur einen TYPO3-Core (z.B. 7.6.16) als Quellordner und verlinkt den nötigen Quellhauptordner, den Ordner ./typo3 und die Datei index.php ! Beispielhafte Anleitung findet sich im Hauptordner in Datei Install.md !
    Aufrufen der Installation mittels Browser mit Adresse (URL) http://localhost/typo3/typo3-seminar
    Entsperren der Installation mittels Datei FIRST_INSTALL im Hauptverzeichnis der TYPO3-Installation
    Zugang zum Datenbankserver (mit XAMPP Standard-User: root / "leeres Kennwort") und DB "typo3_seminar" anlegen lassen
    Anm.: so geht das nur in XAMPP-Umgebung - beim normalen Hoster muss eine DB vorher manuell angelegt werden und die Zugangsdaten (Host/Server, DB-Name, DB-User, DB-Passwort) bereitgehalten werden.
    Anm.: entweder DB-Konnektion mittels Netzwerkverbindung oder über Socket (hier selber Rechner Webserver / Datenbankserver und dateiorientiert - kann etwas schneller sein - Standard: TCP/IP-Netzwerkverbindung)
    TechnikInfoBemerkung
    Lokal C:\xampp-cmsod\htdocs\typo3\typo3-seminar htdocs hier mit Unterordnerstruktur
    Web http://localhost/typo3/typo3-seminar immer über htdocs aufrufen
    nie über Laufwerkspfad C:\... aufrufen
    Datenbank typo3_seminar
                  ↑ Unterstrich in DB-Name!
    DB erlaubt keine Bindestriche/Minus
    Benutzer "admin" (Backend-User mit Superadmin-Rechten) und gewünschtem Kennwort
    Erstes Anmelden am BE mit dem User "admin" - erster Blick in das Backend (Versionscheck)
    Backend-Adresse (URL): (siehe auch Ordner-Struktur TYPO3-Projekt)
    http://localhost/typo3/typo3-seminar/typo3  
    Install-Tool (URL): (leitet dann auf das Install-Tool mit eigenem Kennwort - kein Benutzer)
    http://localhost/typo3/typo3-seminar/typo3/install
    Das Kennwort entspricht anfangs dem von User "admin" und sollte auf Produktionssystemen natürlich geändert werden → Install-Tool, oder als Trick manuell in der Datei ./typo3conf/LocalConfiguration.php  als verschlüsselter "Hash"-Wert.
  • 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;
    mit Ab-/Anmelden das BE aktualisieren
  • Install Tool
    hat eigenes Kennwort! Dieses 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
    Anm.: als "admin" im BE lässt sich das per Klick erledigen!
  • Passwort Trick (ein Problemchen eines TN mal zwischendurch)
    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 MD5-verschlüsselten (und gesalzenen) HASH-Wert an - diesen Wert dann einfach in der ./typo3conf/LocalConfiguration.php manuell ersetzen (seltener Fall für die manuelle Bearbeitung dieser Datei!).
    Nach Zugriff auf das Install-Tool kann man einfach über die Kategorie "Important Actions" 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 Grafikunterstützung (mit GD-Bibliothek und 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)
    Hier: Version Imagemagick in einem "XAMPP Tools-Ordner C:\xampp-cmsod\_tools\ImageMagick-6.8.8-7\" bereitgestellt und die notwendigen Pfade in der Gesamtkonfiguraton lassen mittels Configuration Presets - Image Handling settings;
    beachten: Backslashes auf Windows-Systemen und abschließenden Backslash nicht vergessen!
    "GFX"-Konfiguration nach Bestätigung(en) der automatisch erkannten GFX-Parameter für "ImageMagick Version 6 or higher"
    Anm.: Formate PDF und AI nur mit Ghostscript-Unterstützung möglich; auf Windows Systemen nur mit erheblichem Aufwand
  • Seite erstellen
    erste Seite im Seitenbaum erstellt - neue "Drag & Drop" Techniken im BE;
    die wechselnden Meldungen im Frontend beobachtet: erst "no page" danach "no template";
    neue Seite muss aktiviert werden, deaktivierte Seite können im BE als "preview" begutachtet werden
  • TypoScript (ein erstes Setup TS-Template)
    Kurz: Alles in TYPO3 sind Inhalte in Form von Datensätzen - Setup TS definiert dann "WIE" die Daten ausgeliefert werden!
    TS also die "Konfigurationssprache" für TYPO3, Unterteilung in Konstanten (constants) und Setup (setup),
    Zugriff über Module Web -> Template auf Ebene der obersten Seite (nicht auf allerhöchster TYPO3-Ebene)
    Erstellung einer ersten Instanz vom Objekt PAGE (Objekte - rechts vom Gleichheitszeichen - bitte immer groß schreiben), kleine Experimente mit neuen Objekten  und Analyse der ausgegebenen HTML-Dokumenttypen (Quellcode des Browsers analysieren; Standards: 4.5 HTML 4 Trans.; 6.2 HTML5); hier das Automatik-Template mit der "Hello World" Startseite:
    View source
    1. # Default PAGE object:
    2. page = PAGE
    3. page.10 = TEXT
    4. page.10.value = HELLO WORLD!
  • 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
  • Syntax-Highlighting für Notepad++
    Google Suche führt zu Link - Einbau der "userDefinedLang.xml mittels Menü Sprachen - Benutzerdefiniert - Importieren...
    Anm.: Setup-TS mittels Notepad++ später gerne als *.ts Dateien sichern
    Tipp: im Notepad++, der in meinem XAMPP-CMSOD eingebaut ist, ist die Syntax-Unterstützung bereits eingebaut!

 

  • XAMPP Control PanelXAMPP Control Panel
  • TYPO3 Backend (BE)TYPO3 Backend (BE)
  • ImageMagick testenImageMagick testen
  • TYPO3 InstallationTYPO3 Installation
  • TYPO3 ohne SeiteTYPO3 ohne Seite
  • mit TS-Template: Hello World!mit TS-Template: Hello World!

 

Di, 28.03.17

Dienstag, 28.03.17, 08.30 - 16.00 Uhr

  • Ausführliche Rekapitulation der Themen von Tag 01, TN-Fragen
  • Trainer zeigt Durchlauf einer neuen TYPO3-Installation
    typo3-beispiel  inklusive Install-Tool (erste GFX Konfigurationen),
    einer ersten Startseite und einem Template; hier der "kurze Ablauf"
    1) Inhalt des TYPO3-Packages (zip) in neuen Projektordner sauber entpacken
    2) Url in Browser öffnen http:// localhost/typo3/typo3-aktuell  
    3) Datei FIRST_INSTALL zum Freischalten der Installation in Projektordner legen
    4) Install-Routine durchführen (Hinweis: DB beim Hosting vorher anlegen)
    5) BE-Anmeldung - Install Tool aufrufen - GFX (Graphics) konfigurieren
    6) Übersetzungen "German" aktualisieren - Bentzereinstellungen auf "Deutsch" umstellen
    7) neue Startseite erstellen und aktivieren
    8) neues Template für Startseite erstellen
  • TYPO3 Ordner und Dateien (eine kurze Übersicht)
    Hautptordner Dateien: sind von den TYPO3-Sources/Quellen (TYPO3-Core/Kern)
        index.php (die eigentlichen TYPO3-Site),
        _.htaccess (Beispieldatei für .htaccess - Steuerungsdatei für den Apache Webserver),
         diverse Readme/Info-Dateien
    ./typo3 - der eigentliche TYPO3-Kern (früher noch zusätzlicher Ordner ./t3lib)
    ./typo3temp - temporäre Ablagen (z.B. die Sprachdateien-Downloads, Unterordner ./typo3temp/GB für GIFBUILDER)
    ./fileadmin - der Dateibaum (Datei -> Dateiliste) der TYPO3-Site
    ./uploads - die Verwaltung für "hochgeladenen" Dateien (Empfehlung: vermeiden und immer über fileadmin arbeiten)
    ./typo3conf - die Konfiguraiton unserer Site; Speicherort für ENABLE_INSTALL_TOOL für Zugriff auf Install-Tool,
        Ordner ./typo3conf/ext für die installierten Extensions,
        Ordner ./typo3conf/l10n für die Sprachaktualisierungen der Extensions der Site (l10n: l ocalizatio n);
        Datei LocalConfiguration.php enthält die Konfiguration der Site
            wird normalerweise mittels Install-Tool bearbeitet
            nur in Ausnahmefällen manuell: siehe DB-Zugangsdaten)
        Datei: PackageStates.php enthält den Status der installierten Pakete/TYPO3-Extensions
  • TypoScript (Setup-TS) - Fortsetzung
    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 #
    Einwickeln von Objekten mittels "wrap"
    View source
    1. # allgemeine Konfigurationen:
    2. config.htmlTag_langKey = de
    3. # Default PAGE object:
    4. seite = PAGE
    5. seite.config.doctype = html5
    6. seite.meta.DESCRIPTION = Test mit TYPO3
    7. seite.meta.KEYWORDS = TYPO3, Bildungurlaub, VHS Braunschweig
    8. seite.meta.author = J. Brandes
    9. seite.10 = TEXT
    10. seite.10.value = <p>HELLO WORLD - noch mal hallo Joe!</p>
    11. seite.20 = TEXT
    12. seite.20.value = <p>Noch ein Hallo!</p>
    13. # mit Hilfe von styles.content.get die Datensätze
    14. # für die Spalte 0 (Normal) aus DB holen:
    15. seite.100 < styles.content.get
    16. # jetzt noch die Inhalte aus Spalte Links
    17. # dort ist colPos allerdings gleich 1
    18. seite.5 < styles.content.get
    19. seite.5.select.where = colPos=1
    Beispielhafter TS-Setup-Code für Tag 02
  • Seiten erstellt und dynamische URLs gecheckt
    Hierarchie von Seiten erstellt und die Seiten-ID (PageID) identifiziert
    Start [ID=1]
    → Unterseite 1 [ID=2]  (hat URL ./index.php?id=2 )
    → Unterseite 2 [ID=3]
    → Unterseite 3 [ID=4]
    Anm.: oberste TYPO3-Hierarchie (siehe TYPO3-Logo) hat die ID=0 !
  • Erweiterungs Templates (+ext)
    nicht verwechseln mit den nötigen TS-Templates für Erweiterungen! Sondern
    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
    View source
    1. # Überschreiben von TS mit Erweiterungstemplate
    2. seite.20.value = <p>Noch ein Hallo! mit EXTRA</p>
    3. # Neues Seiten (PAGE) Element an Position seite.30 :
    4. seite.30 = TEXT
    5. seite.30.value = <p>Hier Extra-Text auf Unterseite 1</p>
    Übung: meta-Tags überschreiben, Inhalte von TS-Objekten (TEXT - value) überschrieben
  • Seiteninhaltselemente auf Seiten erzeugt
    Anm.: alles im Bereich "Modul - Web" stellt Datensätze unserer TYPO3-Datenbank dar!
    Übung: erste Tests mit Inhaltsobjekt "Text & Medien"
    Überschrift,  Bemerkung und Texte eingegeben
    Erkenntnis: die Inhaltsobjekte tauchen nicht einfach auf den ausgelieferten FE-Seiten auf!
    Lösung: wir benötigen passendes statisches Template für die Auslieferung und das Styling der Inhaltsobjekte
  • Statische Templates
    Hier: Content Elements (fluid_styled_content)
    Das Statische Template fluid_styled_content (Anm.: früher 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)
    Hier folgt ein Auszug aus dem Setup-TS-Code, den wir mit dem statischen Template fluid_styled_content erhalten
    View source
    1. styles.content.get = CONTENT
    2. styles.content.get {
    3.     table = tt_content
    4.     select.orderBy = sorting
    5.     select.where = colPos=0
    6. }
    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) benötigen wir jetzt nur eine kleine Anpassung im Setup-TS für die gewünschte Spalte
    View source
    1. seite.5 < styles.content.get
    2. seite.5.select.where = colPos=1
    Es folgt eine kurze Übersicht zu den Standard-Spalten von TYPO3
    colPos englisch deutsch FLUID_STYLED_CONTENT
    0 normal Normal < styles.content.get
    1 left Links Objekt anpassen mit
    .select.where = colPos=1
    2 right Rechts Objekt anpassen mit
    .select.where = colPos=2
    3 border Rand Objekt anpassen mit
    .select.where = colPos=3
    Anm.: später bauen wir uns mit den Backend-Layouts unsere eigenen zugewiesenen "Spalten/Datensätze"
  • Template Analyse (hilft beim Auffinden der statischen TypoScript Techniken wie styles.content.get)
    Über Web - Template oben auf Template Analyse schalten, Konstruktion/Nutzung der Templates / Erweiterungstemplates / Statische Template ersichtich; über Klick dann Anzeige von Konstanten und Setup TS; bei Statischem Template fluid_styled_content wird im Setup TS dann auch die Nutzung von styles.content.get Varianten deutlich (aktuell ab Zeile 196 zu finden)
  • fileadmin (Dateispeicher)
    Übungen mit Anlegen von Ordnern und Dateien
    Erinnerung: Eigenschaften des "fileadmin" bearbeiten, damit wir über Casesensitivity (Groß-/Kleinschreibung) verfügen!
    Modernes "Drag & Drop" für Upload von Dateien in fileadmin!
    Hinweis: Trainer hat Übungsdateien bereitgestellt mit Dimension "800px"
  • Forts. Seiteninhaltselement "Text & Medien"
    Einfügen von Medien (hier Bilder) in Inhaltselment
    Konfigurationen durchgesehen und experimentiert: per Klick vergrößern, im Text link/rechts
    Erkenntnis: Ausrichtung der Bilder funktioniert noch nicht → Grund: kein CSS für die fluid_styled_content CE (Content Elements)
    Lösung: weiteres statische Template aktivieren/konfigurieren
    Hier: "Content Elements CSS (optional) (fluid_styled_content)"
  • Konstanten (Constant TS)
    Über Web - Template - Konstanten-Editor haben wir uns die (aktuell 25) Konstanten für die Kategorie "content" angesehen und die Breite für Bilder in CE "Text & Bilder" auf eigene Werte angepasst!
    Danach kann man im Template auch für Konstanten eine Konfiguration einsehen!
  • Interne Notiz
    Datensatz für die Darstellung von Notizen für die Seitenansichten im BE
    Tipp: nutzen Sie die Ansicht "Liste" - da sind die meisten Aktionen gut erreichbar

 

  • TYPO3 SourcesTYPO3 Sources
  • T3-EditorT3-Editor
  • fluid_styled_contentfluid_styled_content
  • fileadmin (Dateispeicher)fileadmin (Dateispeicher)
  • Konstanten-EditorKonstanten-Editor
  • Web - Liste / Interne NotizWeb - Liste / Interne Notiz

 

Mi, 29.03.17

Mittwoch, 29.03.17, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • fileadmin (Forts. und Erweiterung filemeta)
    Systemerweiterung: Advanced file metadata / Key: filemetadata
    Mit dieser automatisch bereit gestellten Systemerweiterung lassen sich Dokumente / Bilder / PDFs sauber mit Informationen auf fileadmin versehen.
    Diese Infos werden dann automatisch bei CE "Dateilinks" oder Bildern in CE "Text & Bilder" angeboten!
    Tipp: Standardmäßig aktivieren und nutzen
  • Backend-Layouts
    mittels Web -> Liste auf Ebene Seiten-Root einen neuen Datensatz vom Typ "Backend-Layout" erstellt und dann später über die Seiteneigenschaften im Register "Erscheinungsbild" als BE-Layout für die aktuelle Seite (und für die Unterseiten) festgelegt
    View source
    1. backend_layout {
    2.     colCount = 2
    3.     rowCount = 1
    4.     rows {
    5.         1 {
    6.             columns {
    7.                 1 {
    8.                     name = Main
    9.                     colPos = 0
    10.                 }
    11.                 2 {
    12.                     name = Side
    13.                     colPos = 1
    14.                 }
    15.             }
    16.         }
    17.     }
    18. }
    Tipp: kleine BE-Layout-Gif-Bildchen verbessern durch Visualisierung die Nutzung der BE-Layouts
  • Übersicht der möglichen Techniken zum Ausliefern von Seiten mit TYPO3
    TYPO3 soll "Webseiten herausgeben" (Varianten ohne Anspruch auf Vollständigkeit ;-)
    1) alles per TypoScript kodieren (siehe Mo/Di - geht so, ist aber nicht "schön")
    2) Template Building (früher MTB - Modern Template Buildung) :
    Nutzen von HTML/CSS-Vorlagen in Kombination mit cObject TEMPLATE und
    Markern (marks - Markierungsstellen) und
    Subparts (subparts - Markierungsklammerungen),
    diese Marker/Subparts werden dann per TS ersetzt
    Hinweis: Anleitungen zu solchen technischen Umsetzungen finden sich in Beiträgen zur Vorgängerseminaren zu TYPO3 auf diesem Infoportal (z.B. Link)
    3) Automaketemplate (Erweiterung - Autor: Kasper Skårhøj)
    automatisiert das Nutzen der HTML-Seite unter Zuhilfenahme der benutzen Klassen/IDs von HTML-Tags (DIVs) und nutzt diese Bereiche als "fertige Markierungen" automatisch zum Ersetzen
    4) Templavoilá (Erweiterung)
    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
    5) Fluidtemplate
    moderne Erweiterungen fluid (und extbase); 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 sind also auch in TYPO3 4.5 LTS verfügbar!
    Nutzung von cObject FLUIDTEMPLATE und ersetzen von Variablen oder direktes Einfügen von Setup-TS an entsprechenden Platzhaltern
  • HTML / CSS / JS - Vorlage (wieder mal ein Template ;-)
    Bereitstellung eines freien "HTML / CSS / JS"-Templates
    basierend auf Bootstrap-Technik: mPurpose (MIT-License)
    Auswahl der Seiten mit Blog-Darstellung (mit linker oder rechter Navigationsleiste) für die Hauptdarstellung unserer TYPO3-Site
    FluidTemplate Technik / Einbau von "Platzhaltern" zum Ersetzen von Inhalten durch TYPO-TypoScript wurde durch den Trainer vorbereitet!
    Da müsste man eben auch ordentliche HTML-Kenntnisse anwenden und sauber mit HTML-Editor-Technik umgehen und das Ganze kostet auch entsprechende Zeit.
    Tipp: nutzen von Code-Inspektoren (FF, Chrome mit Umschalten + Strg + I; IE mit F12) oder gerne auch Firebug unter Firefox
  • FLUIDTEMPLATE (Kurzanleitung)
    siehe auch Webseiten mit Erläuterungen: Portal T3N , Marco Seiler , TS Referenz 
    Meine Teilnehmer bekommen von mir eine kleine technisch FLUIDTEMPLATE Umsetzung bestehend aus
    1) fileadmin-Ordnerstruktur mit Ordnern mit HTML-CSS-JS-Dateistruktur und FluidTemplate-Ordnerstruktur
    mit beispielhafter DefaultTemplate.html  Datei und dazugehöriger ./Layouts/DefaultLayout.html  Datei
    2) Konstanten- und Setup-TS zur "Aktivierung/Nutzung" der vorbereiteten FluidTemplate-TechnikenPlan: Umsetzung einer "2-spaltigen Blog" Ansicht des Bootstrap-Template mPurpose (s.o.)
    In Kürze:
    Das Template enthält die Grundanweisung für das FluidTemplate:
    ./fileadmin/templating/bu/FluidTemplate/DefaultTemplate.html  
    Hier beispielhafter Template-Code:
    View source
    1. <f:layout name="DefaultLayout"/>
    2. <f:section name="ContentLeft">
    3.      <div class="col-sm-8">
    4.      <f:if condition="{contentMain}">
    5.          <f:format.raw>{contentMain}</f:format.raw>
    6.      </f:if>
    7.      </div>
    8. </f:section>
    9. <f:section name="ContentRight">
    10.      <div class="col-sm-4 blog-sidebar">
    11.      <f:if condition="{contentSidebar}">
    12.          <f:format.raw>{contentSidebar}</f:format.raw>
    13.      </f:if>
    14.      </div>
    15. </f:section>
    Als erstes wird das zuständige Layout angegeben, welches die Gesamtseitenstruktur (purer body ohne die äußeren Tags html, head und auch body). 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   
    Hier ein paar beispielhafte Zeilen aus der Layout-Datei:
    View source
    1. <div class="row">
    2. <!-- Blog Post -->
    3.      <f:render section="ContentLeft" />
    4. <!-- End Blog Post -->
    5.  
    6. <!-- Sidebar -->
    7.      <f:render section="ContentRight" />
    8. <!-- End Sidebar -->
    9. </div>
    Jetzt benötigen wir noch das passende Setup-TS:
    View source
    1. # cObject für neue Fluid/Extbase Technik - FLUIDTEMPLATE
    2. page.10 = FLUIDTEMPLATE
    3. page.10 {
    4.      # wenn man nur ein Template hat, dann reicht der folgende Einzeiler
    5.      file = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
    6.      partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/
    7.      layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/
    8.      variables {
    9.          contentMain < temp.main
    10.          contentSidebar < temp.sidebar
    11.          }
    12. }
    Das Besondere am FluidTemplating wird dann später deutlich, wenn man erkennt, dass man mit dieser Technik auch Bedingungen (z.B. Sprachen) nutzen kann oder auch einfach direkt die Setup-TS Techniken "roh" einfügen/ersetzen kann:
    View source
    1. <div class="row">
    2. <div class="col-md-12">
    3.      <h1>Testseite mPurpose</h1>
    4.      <f:cObject typoscriptObjectPath="lib.search" />
    5.      </div>
    6. </div>
    Hier wird später ein Setup-TS-Block für eine Suchbox mit EXT:indexed_search 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 aktuell in allen guten Erweiterungen und TYPO3-Entwicklungen eingesetzt wird.
  • Inhaltselemente (Forts. Content Elements - CE)
    Übungen:
    CE "Text und Bilder" (Übungen mit großen Bildern mit Speichern der Bilder im fileadmin-Ordner),
    CE "Überschrift", CE "Trenner" (auf Nachfrage TN per CSS gestylt), CE "Dateilinks",
    CE "Datensätze einfügen" - so lassen sich CE auf vielen Seiten "synchron" halten,
    CE "Tabelle"; Tipp für Tabellen: Tabellen-CE erst erstellen und dann wieder zum Bearbeiten öffnen, dann steht auch der Assistent zum Erstellen von Tabellen zur Verfügung; es lassen sich auch diverse CSV-Textformate einfach einfügen/reinkopieren
  • Extensions / Erweiterungsmanager
    Aktualisierung von Erweiterungen;  Importieren und Installieren der gewünschten Erweiterungen (Keys - eindeutige Bezeichner/Schlüssel)
    Infoportal / TYPO3 Extensions Repository (TER): http://typo3.org/extensions/repository/
    Entscheidungskriterien für die Auswahl einer Erweiterung:
    Aktualität, Downloadzahlen, Online-/Offline-Dokumentation(en), Entwickler (Team), Abhängigkeiten (Dependencies) von anderen Erweiterungen, unterstützte TYPO3-Versionen, Bereitstellungen als *.zip oder als *.t3x Dateien
    Erweiterungen müssen erst über das BE aktualisiert werden (TER-Info-Download speichert Infos dann in TYPO3-DB)
    Installierte Erweiterungen bieten teilweise eigene Konfigurationen und Statische Templates;
    die Extensions können im BE heruntergeladen werden (ZIP für Extensions, Dump für DB-Tabellen der Extension)
    die Infos über die Erweiterngen werden aktuell in der DB abgelegt (Tabelle: tx_extensionmanager_domain_model_extension - ca.23,5 MB); dadurch ist unsere TYPO3-DB schnell ca. 30 MB groß!
    Hinweis: es gibt auch komplett vorkonfigurierte Distributionen (z.B. Introduction Package - leider aktuell keine vollfunktionsfähig auf Installattionen auf Windows-XAMPP)
  • Übungen mit Erweiterungen:
    Bild/Lightbox Erweiterung: jh_magnificpopup (Autor J. Heilmann - TER-Link) - die Erweiterung benötigt passendes JavaScript (jquery - passt durch unsere mpurpose-Vorlage) und wir müssen daran denken, dass das Statische Template "Magnific Popoup" in unser TS-Root-Template integriert wird (siehe Statisches Template fluid_styled_content); Anleitungen (Videos) auf JWeiland-Portal (Link)
    Für die Funktion von EXT:jh_magnifigpopup muss folgender Konstanten-TS eingefügt werden:
    View source
    1. # notwendige Konstanten, um EXT:jh_magnificpopup funktionieren zu lassen!
    2. styles.content.textmedia.linkWrap.lightboxEnabled = 1
    3. styles.content.textmedia.linkWrap.lightboxCssClass = magnificpopup
    4. styles.content.textmedia.linkWrap.lightboxRelAttribute = magnificpopup[{field:uid}]
    Tipp: nach dem Import und Install einer Extension bitte die Sprache(n) aktualisieren und checken, ob die Extension ein - oder mehrere - Statische Templates mitbringt

 

  • BE-LayoutBE-Layout
  • Template, Layout, PartialTemplate, Layout, Partial
  • cObject FLUIDTEMPLATEcObject FLUIDTEMPLATE
  • EXT:jh_magnificpopupEXT:jh_magnificpopup
  • Erweiterung installierenErweiterung installieren
  • Statische TemplatesStatische Templates

 

Do, 30.03.17

Donnerstag, 30.03.17, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    Interesse Prüfung klären (Termin)
  • FLUIDTEMPLATE  (Zusammenfassung)
    Wiederholung der Template-Technik auf moderne Art und Weise:
    1) Template-Datei ( fileadmin/.../FluidTemplate/DefaultTemplate.html  )
    mit Verlinkung zu Gesamtvorlage (Layout-Datei)
    und Definition von Bereichen (section) für dynamische Ersetzungen aus TYPO3-Datensätzen
    2) Layout-Datei ( fileadmin/.../FluidTemplate/Layouts/DefaultLayout.html  )
    mit dem Roh-HTML-Gesamtgerüst der Website-HTML-Vorlage (ohne html-/head-/body-Tags)
    und Ersetzungen per Fluid-Techniken
    3) Setup-TS für cObject FLUIDTEMPLATE bereitstellen ( page.10 = FLUIDTEMPLATE  )
    mit Angabe der Template-Datei (file = ...), den Root-Pfaden für Layouts (und Partials)
    und Definition der Variables zur Nutzung in Template/Layout zum Ersetzen
  • Literatur
    Hinweis auf Übersicht hier auf diesem Portal; Beispiele von "Einstieg in TYPO3 - Stöckl & Bongers"
    Video-Lernmaterial von Rheinwerk-Verlag (bzw. Video2Brain - siehe hier Angebot Cobra-Shop): Autor Wolfgang Wagner
    Hinweis auf terrashop.de
    Trainer hat(te) 7 Fachbücher zu diversen TYPO3-Themen und Vertiefungen zur Ansicht mit
  • Seiten-Typ: Verknüpfung (Seitenbaum-Objekt)
    Die Root-Seite unseres Seitenbaum wird zum "Verweis" auf (z.B.) die erste Unterseite des Seitenbaum.
    So sind die folgenden Menü (oder Breadcrumbs/Brotkrumenpfade) vollständig und sauber kodierbar.
  • Menüs mit cObjects HMENU, TMENU, GMENU
    Für TYPO3-Seite TS-Setup Code bereitgestellt, der per <f:object ... </f:object> direkt im Fluid-Template (bzw. Layout) eingefügt wird.
    Technik der Erstellung von Menü-TS an Beispielen von "Stöckl/Bongers" - Stichworte zum Menü-TS:
    Einbinden der 2. Ebene muss sauber mit wrapItemAndSub statt einfachem linkWrap für das Wrappen erfolgen! → Nur so werden die Unterlisten (ul mit li) sauber verschachtelt!
    Zustände der Links (Anchor; a-Tags) mit NO, CUR, ACT;
    Navigationen aufklappen mit expAll;
    intelligentes Kopieren von Teilobjekten  2.CUR < .2.NO;
    ausnehmen von Seiten mit excludeUidList,
    mit ATagParams werden Anchors (Anker Tags a) Klassen hinzugefügt
    View source
    1. # Menü - in den Sidebars (links oder rechts)
    2. lib.menuSide = HMENU
    3. lib.menuSide {
    4. special = directory
    5. special.value = 1
    6. # excludeUidList = 89, 88
    7. wrap = <ul class="recent-posts"> | </ul>
    8.  
    9. # Die erste Ebene:
    10. 1 = TMENU
    11. 1.expAll = 0
    12. 1.NO.wrapItemAndSub = <li> | </li>
    13.  
    14. # CUR-Zustand der ersten Ebene:
    15. 1.CUR = 1
    16. 1.CUR < .1.NO
    17. 1.CUR.ATagParams = class="active"
    18.  
    19. # ACT-Zustand der ersten Ebene:
    20. 1.ACT = 1
    21. 1.ACT < .1.CUR
    22.  
    23. # Die zweite Ebene:
    24. 2 = TMENU
    25. 2.wrap = <ul class="subnavi"> | </ul>
    26. 2.NO.wrapItemAndSub = <li> | </li>
    27.  
    28. # CUR-Zustand der zweiten Ebene:
    29. 2.CUR = 1
    30. 2.CUR < .2.NO
    31. 2.CUR.ATagParams = class="active"
    32. }
    Tipp: weitere Beispiele den bereitgestellten TS-Snippets ("Schnippseln") entnehmen:
    lib.menuMain , lib.menuSide  (hier ohne Dateiendung .ts - also also Objektbezeichner für das Setup-TS)
  • Mehrsprachigkeit
    nach TYPO3-Verständnis hat eine Grundinstallation (also quasi ein "sprachleeres" TYPO3) bereits eine (erste/nullte) Sprache 0, die als STANDARD (default) bezeichnet wird; 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)
    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...
    Für die Grundkonfiguration muss jetzt natürlich der 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:
    View source
    1. # Grundkonfiguration des System
    2. config {
    3. linkVars = L
    4. sys_language_uid = 0
    5. language = de
    6. locale_all = de_DE
    7. ...
    8. }
    9. ...
    10. # Konditionales (d.h. mit Bedingungen)
    11. [globalVar = GP:L=1]
    12. config.sys_language_uid = 1
    13. config.language = en
    14. config.locale_all = en_UK
    15. # Navigationspfad in englisch (hier beispielhaftes TS)
    16. lib.breadcrumbs.wrap = <br />You are here:&nbsp; |
    17. [global]
    Dann lassen sich alle Seiten in dieser Sprache erstellen (z.B. über Web -> Info -> Übersetzungsübersicht)
    und danach die Inhaltselemente in der neuen Sprache erzeugen/übersetzen.
  • Sprachschalter mit Länderflaggen (Sprachen: DE | GB)
    Trainer stellt beispielhaften Setup-TS ( lib.languages ) bereit für Sprachumschaltungen per Klick auf "Sprachflaggen"

 

  • TS-Objekte direkt im LayoutTS-Objekte direkt im Layout
  • Erstes MenüErstes Menü
  • Neue Website-SpracheNeue Website-Sprache
  • Sprache per TS konf.Sprache per TS konf.
  • Lokalisierungs-ÜbersichtLokalisierungs-Übersicht
  • CE übersetzenCE übersetzen

 

Fr, 31.03.17

Freitag, 31.03.17, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen, To-Do-List Freitag (so viel zu tun - so wenig Zeit ;-)
  • Seiten-Typ: Ordner
    Für Spezialseiten wird ein Ordner bereitgestellt, der mit Seiten und Links gefüllt wird.
    Wir bauen die folgenden Seiten in den Ordner ein:
    → PCS (Link zu externer URL),
    → Suche (beinhaltet später eine Suchseite),
    → Impressum (Imprint),
    → Anmeldung (beinhaltet später eine Frontend User Anmeldeseite)
    Übung: Einbau eines "Spezialmenüs" für diese Links wieder mit Hilfe eines TS-Code-Snippet lib.menuSpezial.ts
    1) TS aus der lib.menuSpezial.ts-Datei in das Setup-TS Ihrer TYPO3-Website kopieren.
    2) Gemäß Anleitung in Kommentar des Menü-TS den nötigen Fluid-Tag in ./Layouts/DefaultLayout.html  kopieren/einfügen!
    Wichtig: bei dieser Art von Menü-TS muss auf die richtige Seiten-ID (hier: Ordner "Spezial")
  • 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-Icon"
    über Web -> Liste die neuen Datensätze für Website-Benutzergruppe (Kunden) und danach für einen Website-Benutzer (maxmustermann) anlegen
    Test: die Spezial-Unterseite "Anmeldung" mit Zugriff für Website-Benutzergruppe "Kunden" konfigurieren!
  • Anmeldung an Website (FE Login - Erweiterung felogin)
    auf Seite "Ameldung" ein Inhaltselement Formulare - Anmeldeformular integrieren und konfigurieren
    Unbeding konfigurieren: Speicherort Benutzer auf unseren FE-Benutzer Ordner
    Test der Anmeldung/Abmeldung mittels anderen Browsers! Meldungen der Erweiterung "felogin"
    Übung: Nutzen der FE-Benutzer über die Eigenschaften "Zugriff" auf Inhaltselemente-Ebene
    Hinweis: dermaßen geschützte Seiten und Inhaltselemente sind entsprechend gekennzeichnet!
  • 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!
    Die Erweiterung indexed_search befindet sich bereits im System und kann direkt aktiviert werden;
    neues Modul Web - Indizierzung (Aktualisierung Sprache / Übersetzungen nicht vergessen);
    Aktivierung der Indizierung mittels TS: config.index_enable = 1;
    Um den "Suchbereich" festzulegen einfach die folgenenden Kommentare im Layout/Template nach Wunsch eingrenzen:
    View source
    1. ...
    2. <!--TYPO3SEARCH_begin-->
    3. ... Inhalt ...
    4. <!--TYPO3SEARCH_end-->
    5. ...
    Erstellung einer Seite "Suche" (s.o. Ordner Spezialseiten) mit dem Plug-In Indexsuche:
    Das entsprechende Plug-In für die Indexsuche auswählen!
    To-Do-List (nach dem Seminar):
    Bereitstellung Suchbox-TS für ein Fluidtemplate-Objekt  lib.search  (nach bewährtem Vorgehen)
  • TypoScript (TS) "überall" - eine kurze Orientierungshilfe
    Setup-TS (die Grundkonfiguration für Auslieferung der Site - siehe Modul Web - Template)
    → Organisation von "größerem" Setup-TS per
    a) Auslagerung in Dateien in fileadmin und Einfügen - Beispielzeile in Setup-TS:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templating/bu/TypoScript/config.ts"> 
    Anm.: nicht jedes TS kann ausgelagert werden!
    b) Auslagerung in "Spezialordner" für Templating im Seitenbaum und dort die Templates als Eigenschaften hinterlegen. Dieses Setup wird dann - ähnlich wie statische Templates - per Register "Enthält" des Standard-Template eingefügt. (siehe Beispiel: Musteraufgabe zu TYPO3 Version 6.2)
    Constant-TS (Festlegungen / Konstanten - siehe Modul Web - Template)
    → z.B. Definition von Bildeigenschaften oder Aktivieren/Deaktivieren des Admin-Panels auf Frontend:
    View source
    1. # im Konstanten-TS:
    2. # =================
    3. # cat=kunden; type=boolean; label= AdminPanel enable: eine Checkbox for AdminPanel
    4. kunden.adminpanel = 0
    5. # cat=kunden; type=string; label= Templating Basispfad: Grundverzeichnis für Konf.
    6. kunden.templatingpfad = fileadmin/templating/bu
    7. # cat=kunden; type=string; label= Templating Basispfad: Grundverzeichnis für Search-Box in Menü oben
    8. kunden.baseurl = http://localhost/typo3/typo3-seminar/
    9.  
    10. # Templating (Fluid) for indexedsearch
    11. plugin.tx_form.view.layoutRootPath = fileadmin/templating/kundendemo/Extensions/form/Layouts/
    12. plugin.tx_form.view.partialRootPath = fileadmin/templating/kundendemo/Extensions/form/Partials/
    13. plugin.tx_form.view.templateRootPath = fileadmin/templating/kundendemo/Extensions/form/Templates/
    14.  
    15. styles.content.textmedia.maxWInText = 275
    Page-TS (Konfigurationen für Seite/Page - siehe Eigenschaften Seite - Register Ressourcen - Seiten-TSconfig)
    → Beispiel: Vorgaben Zugriffsberechtigungen für neue Seitenelemente im Seitenbaum (siehe BE-Benutzer-Berechtigungen)
    User-TS (Konfiguration für Benutzer - siehe Modul Backend-Benutzer - Eigenschaften - Register Optionen)
    → Konfiguration der Benutzerumgebung - also Maßschneidern des BE (IDs anzeigen, Farben im Seitenbaum, ...); Übung: User-TS für das Einschalten der IDs im Seitenbaum konfiguriert
    options.pageTree.showPageIdWithTitle = 1  
  • Erweiterungen
    EXT:realurl (SEF - Search Engine Friendly URLS)
    Kurzanleitung:
    1) Download / Installation / Aktivierung Erweiterung realurl (Anm.: Abhängigkeiten werden automatisch aufgelöst - hier: scheduler )
    2) Setup-TS: 
    View source
    1. # Grundkonfiguration realurl:
    2. config.simulateStaticDocuments = 0
    3. config.baseURL = http://localhost/typo3/typo3-seminar/
    4. config.tx_realurl_enable = 1
    5.  
    3) .htaccess im TYPO3-Projektordner bereitstellen
    Anm.: die vorbereitete _.htaccess muss leicht angepasst werden - nach Zeile 263 RewriteEngine On:
    View source
    1. <IfModule mod_rewrite.c>
    2.  
    3.     # Enable URL rewriting
    4.     RewriteEngine On
    5.     
    6.     RewriteBase /typo3/typo3-bu
    7.  
    8.     # Store the current location in an environment variable CWD to use
    9.     # mod_rewrite in .htaccess files without knowing the RewriteBase
    10.     RewriteCond $0#%{REQUEST_URI} ([^#]*)#(.*)\1$
    Es muss die RewriteBase definiert werden, weil unsere Seite in einer Unterordnerstruktur liegt!
    4) Seiten aufrufen (FE) und im BE die Infos zur Adressübersetzung (URL Data) checken
    EXT:news (eine moderne "News - Neuigkeiten" Erweiterung - Autor: Georg Ringer; nicht verwechseln mit Klassiker tt_news!)
    Beispielhafte Installation gezeigt!
  • TYPO3 auf LAMP-System (Linux AMP)
    Die native Umgebung für einen TYPO3-Service.
    Wichtigste technische Vorteile/Unterschiede:
    Groß-/Kleinschreibung unterscheidbar (CaseSensitivity)
    Grafik- und Spezialtools (ImageMagick/GraphicsMagick, AI, PDF, Word- oder PowerPoint-Dokument)
    lampp screenshot 645pxSaubere 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 verdrahten zu können.
  • TYPO3-System - Backup (eine kurze Darstellung)
    TYPO3 besteht aus
    0) TYPO3-Sources (Quellen / T3-Kern):
    muss (eigentlich) nicht gesichert werden: ./typo3, Dateien: index.php, ...
    1) TYPO3-Projekt-Dateien:
    Ordner ./typo3conf, ./uploads, ./fileadmin (, ./typo3temp)
    2) TYPO3-Datenbank:
    Eportieren 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
    Anm.: .t3d-Dateien - Eigenes Archivformat von TYPO3 
    lassen sich über die Seitenelement-Kontextmenüs mittels Exportieren / Importieren nutzen - kümmert sich nicht um das komplette T3-Projekt, sondern hauptsächlich um die Seitenbaumstruktur!
    Tipp: für den XAMPP-CMSOD habe ich eigenen Backup/Restore-Technik (cmd-Skripte / Batch) erstellt (siehe unten Musterprüfung)
  • Was wir nicht mehr geschafft haben...
    - Backend-Benutzer (BE) und BE-Benutzergruppen → ist beispielhaft in die Musterprüfungen integriert
    - TN-Übung zu EXT:news
    - TN-Übung zur Nutzung von BE-Layouts, die automatisch dann ein passendes Fluid-Template zuweisen. Ich habe den nötigen Setup-TS-Code als Download (s.u.) bereitgestellt. An dieser Stelle die wichtigen Zeilen aus dem Setup-TS für das Objekt page.10, also dem FLUIDTEMPLATE:
    View source
    1. page.10 = FLUIDTEMPLATE
    2. page.10 {
    3. file.cObject = CASE
    4. file.cObject {
    5. key {
    6. data = levelfield: -1 , backend_layout_next_level, slide
    7. override.data = TSFE:page|backend_layout
    8. }
    9. 1 = TEXT
    10. 1.value = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
    11. 2 = TEXT
    12. 2.value = {$kunden.templatingpfad}/Fluidtemplate/TemplateReverse.html
    13.  
    14. default < .1
    15. }
    16. partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/
    17. layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/
    18. variables {
    19. contentMain < temp.main
    20. contentSidebar < temp.sidebar
    21. }
    22. }

    - weitere vertiefende Darstellungen zu TYPO3-Technik und Ordnerstrukturen
    - Darstellungen zu TYPO3 unter Linux; Anm.: Trainer hat(te) hierür virtuelle LAMP-Systeme inkl. TYPO3-Installationen (beispielhafter Screenshot für TYPO3-Projektordner auf LAMP-System s.u.)
  • Musterprüfung TYPO3 für den CMSOD 2.0 / 3.0 Beta (in Seminar noch für TYPO3 Version 6.2)
    Bereitstellung eines ZIP-Archivs Mustermann-Max_musterpruefungen_typo3_20150502.zip
    im Ordner C:\xampp-cmsod\__backups
    Kurzanleitung für Installation der Musterprüfung: (siehe auch Erklärungen auf der .\htdocs\cmsod-overview Website)
    Vorgehen: das Zip mit der Maus (Drag & Drop) auf das Restore-Skript ziehen (hier: restore-cmsod-basisversion.bat)
    1) Eingabe:  musterpruefungen  (Return)
    2) Eingabe:  typo3  (Return)
    3) Eingabe:  (Return - leeres Kennwort für die Datenbank)
    man erhält Projektordner .\htdocs\musterpruefungen\typo3  und die zugehörige Datenbank muster_typo3 
    Anm.: für das Zip mit dem Ergebnis der Musterprüfung müssen Sie bei der 2. Eingabe  typo3-ergebnis  eingeben!
    Kurze Einweisung in die Musterprüfung-Website - Hinweis auf die besondere TS-Organisation in Ordnern oder Datensätzen!

    Prüfungsvorbereitung zur Prüfung am 27.04.2017: (bitte beachten Sie auch die (noch) Downloads zu Modul IIIb - TYPO

    ich stelle Ihnen an dieser Stelle einen Download (.zip) für eine aktualisierte TYPO3-Musterprüfung 7.6 zur Verfügung!
    Geplant für KW ab 10.04.2017 - Sorry brauchte noch das Oster-WE:
    tinyurl.com/kv6qqu4 (Shortlink TinyURL zu Dozi-OneDrive)

  • Dokumente und Unterlagen für TN bereit gestellt:
    XAMPP-Versionen (Wochenanfang - Seminarende Trainer-XAMPP), Screenshots der Seminartage (Bildergalerie/Diashow der Seminarwoche), Snippets (TypoScript Schnippsel) und Ordner-/Dateistrukturen fileadmin und Co
  • Feedbackbögen, TN-Bescheinigungen, letzte Fragen

 

  • Seitentyp: LinkSeitentyp: Link
  • Ordner: FE-BenutzerOrdner: FE-Benutzer
  • EXT:indexed_searchEXT:indexed_search
  • IndizierungIndizierung
  • Admin PanelAdmin Panel
  • EXT:realurlEXT:realurl

 

 

 

Vielen Dank für Ihr tolles Feedback und Interesse an Folgeseminaren.
Ihr Trainer Joe Brandes

  Privates

... zu 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 ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 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 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

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.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben