• typo3.org

In der Woche ab Montag, dem 25. Juni 2012 findet an der VHS Braunschweig ein Seminar zum Thema "TYPO3" im Rahmen der Seminare des "X-pert 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.11 (geändert gegenüber Original-Raumbelegung)
Zeiten: Mo. 25.06. bis Fr. 29.06.12; jeweils 08.30 - 16.00 Uhr

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

• TypoScript Setup

Montag, 25.06.2012, 08.30 - 16.00 Uhr

• Orientierungsphase, TN-Themen, Seminarzeiten
• Cobra Shop - Software für Teilnehmer (Link)
• Software für das Seminar
  Einstellungen Windows (Windows Explorer; Win + E)
  SW: Browser, Packer, Editor (siehe Toolsammlung zum CMS Online Designer)
• XAMPP (Serverumgebung - s. a. Link Toolsammlung)
  Hier: Apache, MySQL und PHP Serverumgebung inklusive kompletter Vorkonfiguration
  Empfohlener Pfad:  C:\xampp  für die Umgebung
  Web-Dokumente:  C:\xampp\htdocs
  PHP-Konfiguration:  C:\xampp\php\php.ini
• PHP (php.ini für TYPO3-Umgebung)
  Bibliothek für OpenSSL integrieren; php.ini ca. Zeile 970: extension=php_openssl.dll einfügen
  später: wichtige PHP-Einstellung:  max_execution_time
  Kontrolle der laufenden Konfiguration mittels phpinfo() - steht direkt über den XAMPP als Link zur Verfügung,
  Wichtig: Änderungen an der PHP-Umgebung werden erst nach Restart (bzw. Reload) des Webservers gültig
• TYPO3 (Versionen, Varianten)
  Website: typo3.org - Erfinder: Kasper Skårhøj
  Bereitstellung (Download) diverser Packages (Blank, Source, Dummy, Introduction, Government) in verschiedenen Archivformaten (tar.gz, zip)
  Versionen: 4.4 - 4.5 (LTS) - 4.6 - 4.7 - 5.0 (Phoenix - basiert auf Framework FLOW)
  LTS - Long Term Support (eingeführt Jan 2011 - Support bis April/Oktober 2014)
  Seminarwoche mit aktueller Version 4.7.1
• Erstinstallation (Dummy-Package)
  Source+Dummy-Zip bereitgestellt und in T3-Projekt-Ordner entpackt
  1. Meldung: OpenSSL fehlt - in php.ini den Eintrag für die OpenSSL-Bibliothek vorgenommen (s. o.)
  2. Meldung: keine Seite (page) gefunden - im Backend (BE) angemeldet und in der T3-Wurzel (Root) eine erste Seite erstellt und aktiviert
  3. Meldung: kein TypoScript (TS) Template gefunden - Erstellung eines (Haupt-)Templates für das T3-Projekt
  Ergebnis: "Hello World" Seite (s. auch u.)!
• TypoScript (ein erstes TS-Template Setup)
  TS die "Konfigurationssprache" für TYPO3, Unterteilung in Konstanten (constants) und Setup (setup), Erstellung einer ersten Instanz vom Objekt PAGE (Objekte bitte immer groß schreiben), kleine Experimente mit neuen Objekten page.20 und Änderung des ausgegebenen DTD mittels config.doctype; hier das Automatik-Template aus der "Hello World" Startseite:
  

  # Default PAGE object:
  page = PAGE
  page.10 = TEXT
  page.10.value = HELLO WORLD!
  

• Extension Manager (erste Einstellungen)
  Spracheinstellungen für "German" nachgeladen und für das erste Benutzerkonto "admin" über die Benutzer-Einstellungen das Backend (BE) auf "deutsch" gestellt
• Install Tool
  hat eigenes Kennwort! Dieses kann bei Zugang zum Install Tool geändert werden und wird mit MD5 verschlüsselt in der Konfigurationsdatei typo3conf/localconf.php abgelegt
  Erste Übersicht über die Basisinfos (Basic Configuration): Hinweise abarbeiten
• Grafikunterstützung (mit GD-Bibliothek und Grafik-Tools)
  GD-Unterstützung per phpinfo() gecheckt ist OK,
  Grafik-Tools: Imagemagick (www.imagemagick.org) oder Graphicsmagick (www.graphicsmagick.org)
  Hier: aktuelle Version Imagemagick als ZIP-Lösung bereitgestellt und die notwendigen Pfade in der Gesamtkonfiguraton (All Configuration) eingetragen; beachten: Backslashes auf Windows-Systemen und abschließenden Backslash nicht vergessen, "Masken"-Verhalten setzen, "combine"-Werkzeug auf "composite" setzen und alles mittels "Image Processing" testen
  Anm.: Formate PDF und AI mit Ghostscript-Unterstützung auf Linux-Systemen oder Installation von Ghostscript auf Windows-Systemen und Pfad-Bereitstellung
• TYPO3-Source + TYPO3-Site
  Analyse der T3-Source-Ordner und Dateien ("T3-Kern": ./t3lib, ./typo3, index.php) und
  T3-Site-Ordner und Dateien (z.B. Dummy: ./typo3conf, ./fileadmin, ./uploads, ./typo3temp)
  Auf Linux-Systemen Einsatz Symbolischer Links (Befehl ln -s  zur Verdrahtung der T3-Source in T3-Site - dadurch lassen sich die TYPO3-Quellen (Sources / Kern) leicht austauschen; auf Windows-Systemen nur schlecht reproduzierbar (Hinweis: Tool mklink für Befehlszeile cmd)

• Konstanten TS

Dienstag, 26.06.2012, 08.30 - 16.00 Uhr

• Rekap, TN-Fragen
• Forts. "Roter Faden":
  Trennung TYPO3-Quellen (Source; T3-Kern) und TYPO3-Site (z.B. Dummy),
• All Configuration (Install Tool)
  Durchsicht der kompletten Konfiguration im Install-Tool (Komplettierung Funktion GD lib using PNG / UTF-8 Einstellungen ab Version 4.5)
  Kategorien: GFX, SYS, EXT, BE, FE, MAIL, HTTP, MODS, USER, SC_OPTIONS, EXTCONF, SVCONF
  die "fetten" Rubriken lohnen ein vertiefendes Studium, beispielhafte Einträge besprochen:
  $TYPO3_CONF_VARS['BE']['installToolPassword'] = 'bacb98acf97e0b6112b1d1b650b84971';
  Hinweis auf Reparatur des Zugangs zum Install Tool bei vergessenem Kennwort.
  Abschnitt oben in localconf.php sollte nicht verändert werden - danach Änderungen manuell oder per Install Tool:
  $TYPO3_CONF_VARS['SYS']['sitename'] = 'Neuer Name für Site'; // Semikolon am Ende nicht vergessen!
• typo3conf/localconf.php
  das PHP-Skript mit den Änderungen des Install Tools und den eigenen gewünschten Änderungen
• TYPO3-Source + TYPO3-Site (Rekapitulation)
  Trennung der Bereiche und Aktualisierung von T3-Src auf Linux-Systemen über Symbolische Links. Wichtig: Projekt-Seite für Backup-Strategie - der T3-Src-Teil (aktuell knapp 50 MB) ist ja immer vorhanden und beliebig reproduzierbar! Unterordner ./fileadmin, ./uploads, ./typo3conf und ./typo3temp inspiziert. In ./typo3conf die Unterordner für spätere Erweiterungen (ext) und die nachgeladenen "Eindeutschungen" (l10n/de) gefunden.
  + TYPO-Datenbank (mit PhpMyAdmin)
  die Datenbank mit den Tabellen der Dummy-Site, viele cache-Tabellen
  speziell: be_users, fe_users, tt_content
• TYPO3-Hoster
  fast alle Hoster können TYPO3 hosten - aber manche haben sich auf die speziellen Anforderungen (Performance, Aktualisierungen TYPO3-Sources, php.ini-Anforderungen, Imagemagick, zusätzliche Unterstützung für T3-Extensions, ...) spezialisiert; siehe Mittwald oder JWeiland
• TypoScript (Fortsetzung)
  Wrap mit Beispiel für cObject TEXT eingeführt, neues cObject COA (Content Object Array - verschachtelbares Strukturobjekt)
  Kopieren (page.50 < page.30) vs. Referenzen (page.50 =< page.30) von Objekten im Vergleich
• Constants (Konstanten)
  Deklaration von Constants-TS inklusive der Steuerungsmöglichkeit von Konstanten über die Template-Ansicht Konstanten-Editor; Beispiel-TS:
  

  # cat=Farben; type=color; label=Body-Hintergrundfarbe
  Farben.bgcolor = red
  

  Nutzen der Konstante in Setup-TS mittels {$Farben.bgcolor}
• Introduction Package
  erste Beispielinstallation und Rundgang durch das "IP"; erste Analyse: keine Unterstützung GD/Imagemagick - also noch die "All Configuraton" durch-"insten"
  + php.ini - hier muss für die Installation der Wert für max_execution_time  erhöht werden (Standard: 30 Sekunden Laufzeit für PHP-Skripte hier deutlich zu wenig)

• CSS Styled Content

Mittwoch, 27.06.2012, 08.30 - 16.00 Uhr

• Rekap, TN-Fragen
• Introduction Package (Forts.)
  Grafik: GD und Imagemagick konfiguriert
  Tipp: bei gleichen Projekten (z.B. 2-mal Dummy) lassen sich Konfigurationen per localconf.php sichern und austauschen!
• Varianten: TYPO3 soll "Webseiten herausgeben" (ohne Anspruch auf Vollständigkeit ;-)
  1) alles per TypoScript kodieren (!)
  2) klassisches Nutzen von HTML/CSS-Vorlagen in Kombination mit Markern (marks) und Subparts (subparts), diese werden dann per TS ersetzt
  3) Automaketemplate (Erweiterung) - automatisiert das Nutzen der HTML-Seite unter Zuhilfenahme der benutzen IDs und nutzt diese Bereiche als "Markierungen" 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 / Aufwand abschätzen
  5) Fluid - moderne Erweiterungen fluid (und extbase) im Rahmen der TYPO3 Version 5 (Phoenix und Flow) Entwicklungen; mittlerweile Extensions als Standards enthalten!
• Praxis: (Umsetzung von Version 2)
  Exemplarische Einführung an Hand von Beispielen; siehe Literaturempfehlung:
  Einstieg in TYPO3 4.5: Installation, Grundlagen, TypoScript und TemplaVoila (Galileo Computing)
  Autoren: Frank Bongers, Andreas Stöckl, 606 Seiten, 5. Auflage (28. April 2011), Deutsch, ISBN-10: 3836217554
  cObject TEMPLATE nutzen, workOnSubpart nutzen, damit keine doppelten HTML-Strukturen entstehen, Nachrüsten von CSS mittels page.includeCSS, Subpart INHALT für den Inhaltsbereich der Webseite mit manuellen CONTENT-Objekt und der Kurzform styles.content.get, Marker (marks) für Navigation und Footer eingebaut, die Navigationsstruktur (Ebene 1) mittels cObject HMENU in Textdarstellungen (cObject TMENU) kreirt, Einbau der Root-Page "Home" durch Seite mit Typ Verweis
• CSS Styled Content (css_styled_content)
  Statische Templates einschließen - hier für Content - später auch für Erweiterungen; sonst bleiben die Positionen in der Website leer! Einsatz des Template Analyzers für die Erklärung von
  subparts.INHALT < styles.content.get  (bzw. dann auch styles.content.getLeft, ...)
  Konstanten-Editor zeigt jetzt Konstanten für Kategorien CONTENT (45) und ADVANCED (3) in Hierarchie Haupttemplate
• Funktionen (Modul WEB)
  kurze Einführung um mehrerer Seiten in einem Rutsch zu erstellen
• Liste (Modul WEB)
  Übersichte über alle Objekte in einer Ebene - gut für Umstrukturierungen oder Löschen

• TYPO3 Extensions

Donnerstag, 28.06.2012, 08.30 - 16.00 Uhr

• Rekap, TN-Fragen, Wunsch nach Prüfung klären (Termin, Vorbereitung, ...)
• Forts. Menüs (mit cObjects HMENU, TMENU)
  für T3-Seite mit TS, Einbinden der 2. Ebene, wrapItemAndSub statt einfachem linkWrap für das Wrappen ganzer li-Tags inklusive der Unterlisten (ul mit li), Zustände NO, CUR, ACT; intelligentes Kopieren von Teilobjekten  2.CUR < .2.NO  ; spezielles HMENU mit rootline für die Erstellung von Breadcrumbs ("Brotkrumen"-Linkliste)
• Virtual Hosts
  Ziel: Adresse www.typo3test.local auf XAMPP möglich machen!
  Server-Pfad für Projektsite "typo3test":  C:\xampp\htdocs\typo3s\typo3test
  (Datei: httpd.conf) Webserver: Apache; Konfigurationsdatei: c:\xampp\apache\conf\httpd.conf
  mit ausgelagerten Zusatz-Konfigurationsdateien im Unterordner .\conf\extra
  Hier: httpd-vhosts.conf  bearbeiten; Aktivieren und Eintragen der namensbasierten Virtual Hosts
  Änderungen werden durch Restart (Reload) des Webservers gültig, fehlende Ordnerstrukturen führen zu Meldungen des Servers
  (Datei: hosts) Windows-Client: Namensauflösung über hosts-Datei eintragen
  Datei: c:\Windows\system32\drivers\etc\hosts 
  mit Eintrag für typo3test.local und Alias  auf Adresse 127.0.0.1
  127.0.0.1      typo3test.local      www.typo3test.local   
• Wiederholungsübung
  komplette neue Installation eines Dummy-T3-Projekts und dessen Inbetriebnahme nach Beispielen aus den ersten drei Tagen
• Backend: Seiten verwalten und konfigurieren
  Reihenfolge von Seiten, Verweise, Ordner, aktivieren/deaktivieren, in Menü verbergen, als Startseite nutzen
• Extensions (T3-Erweiterungen)
  über Website von typo3.org erhält man Übersicht (T3-Link)
  TER: TYPO3 Extension Repository, Infos zu Verfasser, Aktualität, Größe, Abhängigkeiten
  Modul Adminwerkzeuge - Erweiterungen - Übersicht über die installierten, verfügbaren Erweiterungen und deren Status, Dateityp für Erweiterungen .t3x, Aktualisierung des TER über das BE
  Beispielhafte Installation der Erweiterung lorem_ipsum
  Installationspakete der Erweiterung liegen im T3-Ordner  ./typo3conf/ext/lorem_ipsum 
  Tipp: nach Installation einer Erweiterung die Sprachpakete aktualisieren
• RTE (Rich Text Editor)
  Seiteninhaltselemente "Text" und "Text und Bilder" mit RTE bearbeitet, Links erstellt
• Bilder
  Vergleich von direkten Uploads in Elementbearbeitungen verglichen mit Datei-"Zuordnungen" auf fileadmin-Ordnern, hochgeladene Bilder liegen in ./uploads/pics  und werden bei mehrfachen Uploads gleichnamiger Dateien entsprechend durchnummeriert: aus bild.jpg wird bild_01.jpg
  Bilder mit veränderten Größen werden in ./typo3temp erzeugt.
• tt_news
  eine erste Einführung über eine Video-Reihe von W. Wagner (Link zur Video-Tutorial-Seite)

• tt_news Konstanten

Freitag, 29.06.2012, 08.30 - 16.00 Uhr

• Rekap, TN-Fragen
• TypoScript (Varianten / Zuordnungen)
  TS für Setup-TS (setup) und Konstanten-TS (constants)
  als auch für Benutzer: User-TS (user); hier als Beispiel die Einblendung der IDs im Seitenbaum mittels:
  options.pageTree.showPageIdWithTitle = 1
  Einfügen des TS im Register Optionen des Users; User Bearbeiten im Modul Adminwerkzeuge - Benutzer
• tt_news (Praxis)
  Kurzanleitung (nicht unbedingt in dieser Reihenfolge)
  1) Installation tt_news importiert, installiert, aktualisiert und Sprachpakete überprüft
  in Eigenschaften der Extension die Option USE "General record storage page" deaktivieren
  2) im TS-Setup über Register "Enthält" die Statischen Templates "News settings" und "News CSS-styles" einschließen
  3) Seitenstrukturen für News-Verwaltung und Anzeige erstellen und konfigurieren:
  Ordner "News" (z.B. id=10 - beinhaltet später die News-Kategorien und News
  Seite "Aktuelles" (z.B. id=11 - soll die einzelne gewählte News anzeigen, im Menü verbergen)
  Unterseite "News-Archiv" (z.B. id=12 - soll später das News-Archiv zeigen, im Menü verbergen)
  4) Konfiguration der tt_news-Konstanten ("Einstellungen") über Web - Template - Konstanten-Editor für die Kategorie PLUGIN_TT_NEWS_BASIC: bei "Links and targets" die vier IDs für Starting Point (hier: 10), SinglePID (hier: 11), BackPID (id der Home-Seite, normaler Weise 1), Archive Link parameter (hier: 12) setzen
  5) News-Plug-In Seitenelemente auf Seite "Home" (LATEST Ansicht) und Seite "Aktuelles" (SINGLE Ansicht) erstellen; ggf. dann auch für eine Archiv-Ansicht auf Unterseite "News-Archiv"
• Mehrsprachigkeit
  nach T3-Verständnis hat das Dummy-Paket (also quasi ein leeres T3) bereits eine (erste) Sprache, die als STANDARD bezeichnet wird; mit Setup-TS (config) stellt man dann die gewünschten Sprachkonfigurationen (config.language, config.locale_all, ...) an.
  Wichtig:  config.sys_language_uid = 0  (das ist die ID der Sprache STANDARD)
  Weitere Sprache über das T3-Dachelement (Web - Liste) über Neuen Datensatz hinzufügen
  Dann lassen sich alle Seiten und Elemente auch in dieser Sprache erstellen (z.B. über Web - Info - Sprachen) und die Inhaltselemente für diese erzeugen
  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 T3-DB geholt werden (URLs: index.php?id=85&L=0  vs. index.php?id=85&L=1 )
  TS:  [globalVar = GP:L = 1]  ... [global]
• Backup & Restore
  T3-Syteme bestehen aus:
  0) TYPO3-Sources (Quellen / T3-Kern): muss (eigentlich) nicht gesichert werden
  1) TYPO3-Projekt-Dateien: Ordner ./typo3conf, ./uploads, ./fileadmin (, ./typo3temp)
  2) TYPO3-Datenbank: Eportieren und Importieren mittels PhpMyAdmin (MySQL-Dumps)
  bei Serverumzug natürlich Anpassung der Zugangsdaten zur Datenbank (siehe Install-Tool) oder manuelles Bearbeiten der ./typo3conf/localconf.php
  Eigenes Archivformat von T3:  .t3d-Dateien - lassen sich über die Seitenelement-Kontextmenüs mittels Exportieren / Importieren nutzen (Anm.: nicht das komplette T3-Projekt!)
• nur gezeigt:
  Workspaces (Arbeitsumgebungen)
  Backend-Benutzer und BE-Benutzergruppen
• Abschlussübungen mit "Musteraufgabe Modul IIIb - TYPO3"
  Bereitstellung der Musteraufgabe in Print und Digital, die XAMPP-Prüfungs-Archive mit Doppelklick entpacken nach C:\xampp-pruefung 
  Anm.: Prüfung koordiniert für den 24. August 2012, ab 13.00 Uhr in Raum 2.11
• Feedback-Bögen, TN-Unterlagen und -Bescheinigungen, letzte Fragen

Vielen Dank für Ihr freundliches "Klopfen" zum Ende des Seminars und Ihre positiven Feedbacks. Über Ihren Wunsch nach weiteren Seminaren freuen wir (VHS Braunschweig und meine Wenigkeit) uns und hoffen diese zeitnah ermöglichen zu können - bitte bleiben Sie mit uns in Kontakt.
Ihr Trainer Joe Brandes