Computer: Typo3 (aus Wiki)

dkracht

Typo3 (aus Wiki)

Gehört zu: Content Management System
Siehe auch: Typo3 Tutorial, WordPress
Benutzt: Fotos von Google Drive

Überblick

Typo3 ist ein Web-Content-Managemet-System (CMS); d.h. als Oberfläche dient der WebBrowser.

Typo3 ist relativ umfangreich und nicht so einfach in der Einarbeitung.

Das häufig anzutreffenede Problem, das die vorhandene Dokumentation nicht wirklich auf den blutigen Anfänger eingeht, weil sie doch implizit von anscheinenden “Selbstverständlichkeiten” ausgeht, ist bei Typo3 in besonderem Maße gegeben und hat schlimme Folgen, da die Ersteinrichtung von Typo3 dadurch extrem schwierig wird.

Installation

Basic Configuration

  • php.ini: upload_max_filesize= 2M –> 10M
  • php.ini: post_max_size= 8M –> 10M
  • Database Name: typo3 (neu anlegen hier mit der Basic Configuration)
  • ImageMagick-Pfad

Database Analyser

  • COMPARE, um die erforderlichen Datenbank-Tabellen anzulegen
  • Create “admin” user
  • …

Extensions installieren

Im Backend (“BE”) unter “Admin Tools” den “Ext Manager” anklicken. Dann im Dropdown oben auf der Seite “settings” azswählen und die “User Settings” einstellen.

Dokumentation

Erste Erfahrungen mit Typo3

Vorteile

  • Vorteil von Typo3: Multi-Site-Fähigkeit, das ist ganz wichtig, denn ich möchte ja mehere WebSites verwalten (z.B. beruflich, Privat, ggf. noch separate für einzelne Projekte…)
  • Vorteil von Typo3: Sehr gute Export/Import-Funktionalität, sodass man seine Arbeit auf mehreren Computern und bei externen Providern gut organisieren kann
  • Vorteil von Typo3: Interne Links können mit dem Richtext-Editor durch Drop-downs unterstützt eingegeben werden (riesiger Vorteil gegenüber Joomla, wenn man daran gewohnt ist, interne Links so leicht wie in einem Wiki einzurichten.
  • Konsequente Trennung von Content und Layout (die Contents werden nicht in HTML gespeichert).

Tutorial Quickstart

  • Die Stable Version ist 4.2.1
  • Das dringend empfohlene Tutorial für Anfänger ist quickstart 3.8.1 vom 22.07.2004 17:55
  • Typo 3.8.1 ist sehr verschieden von Typo 4.2.1.
  • Es gibt also (zur Zeit) kein sinnvolles TYPO3 Version 4 Tutorial für Anfänger

Fatal Problem with MySQL 5

  • Login ins Backend hängt sich auf
  • Lösung: my.ini out-comment this line: “sql-mode=STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION”

Meine ersten Schritte

  • Die Installation läuft problemlos (Apache, PHP und MySQL habe ich nun oft genug benutzt. Das ist für mich kein Problem)
  • Zur Konfiguration muss man aber wissen, wie das schöne Typo3 denn eigentlich “tickt”
    • Das Frontend FE zeigt die Website(s) und das Backend BE ist zum Administrieren (wie bei Joomla)
    • Front End Aufruf: http://localhost/typo3
    • Back End Aufruf: http://localhost/typo3/typo3
    • Konfigurationsdatei: /typo3conf/localconf.php
    • Anzeige der Version beim Login: $TYPO3_CONF_VARS[‘SYS’][‘loginCopyrightShowVersion’] = 1;
  • Der Content besteht aus Pages, die in einem Page Tree angeordnet sind
  • Zum Anlegen einer Page legt man einen Container (Behälter) an. Ein Page Container kann dann null, ein oder mehrere Content Elements (Inhaltselemente) enthalten, wie z.B. “Nur Text”, “Text mit Bild”, “Tabelle” etc.
  • Benutzer anlegen (für das Back End)
  • Backend-Benutzergruppe “Redakteur” anlegen, d.h.
    • List Modul anklicken, im Page Tree die Root Page (Weltkugel) anklicken
    • New Record vom Typ “Backend Usergroup”
  • Root Page meines Web anlegen, d.h.
    • einen neuen Page Container anlegen direkt unter der Typo3-Wurzel im Page Tree.
    • dann dieser Page eine Template zuordnen: Links Web -> List, Mitte (Page Tree) Page selektieren, Rechts “Create a new record” -> template
  • Template anlegen bzw. zuordnen (definiert das Layout auf Ebene der Root Page eines Webs)
    • Man muss einen Template Record für die Root Page eines Webs anlegen. Dieser Template Record enthält einige Angaben wie Title, Description, die Angabe Rootlevel etc. und – last but not least – ein sog. Setup-Script geschrieben in der propietären Sprache TypoScript Achtung: Damit Anfänger das auch bestimmt nicht verstehen, wird das als TS abgekürzt)
    • Dies Setup-Script kann dann auf eine HTML Template (HTML mit “Markers” und “Subparts”) verweisen…
    • Solche HTML-Templates sind “normale” Dateien, die überlicherweise im Ordner \fileadmin\templates\main\… gespeichert werden
  • Menü-Navigation: Der Page Tree wird auch als Menü-Struktur genutzt…
  • …

Was ich als Anfänger erst mühsam herausfinden musste

Navigation im Back End
Klicken im Page Tree auf eine Page führt zu unterschiedlicher Aktion, je nach dem, ob auf den Text oder auf das Symbol der Page geklickt wird…
Erweiterungen
Wie melde ich mich bei einem Typo3 Extension Repository (TER) an, um an Erweiterungen heranzu kommen???
Ich muss mich erst auf der Website typo3.org als User registrieren. Diese UserId mit Passwort muss ich dann in meinem Typo3 Back End unter “Admin Tools -> Ext Manager” -> Stettings -> User Settings” eintragen. Dann bekomme ich das TER in meinem Typo3 angezeigt, wenn ich oben im Drop-Down auswähle “Import extensions” und dann auf den Button “Lookup” klicke…
Web Sites
Das aller oberste Wurzelelement des Typo3 “Page Tree” sollte einen neutralen Namen haben z.B. “Typo3”. Direkt unterhalb dieses Wurzelelements werden dann die Root-Pages der diversen Websites angelegt, zunächst als leere Container, die nur einen Namen (Titel) haben. Der Trick ist dann, dass durch Zuweisung einer Template zu einer Page aus der “normalen Page” eine “Root Page” wird (wenn man dabei einige Kleinigkeiten beachtet).
Templates
Begriffswirrwarr: html-Temp, Haupt-TS, ext-Temp
PHP
Für meine PHP-Installation muss die Datei PHP.INI angepasst werden…

Content sichtbar machen

nur mit TypoScript

Mit einem “Standard-Template” “NEW SITE” wird keine HTML-Template verwendet, sondern nur mit einen ganz einfachen TypoScript im Setup “Hello World” für jede Seite angezeigt:

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

Wenn man den Inhalt seiner Seiten tatsächlich sehen will, muss man das Setup-Script ändern in:

page = PAGE
page.typeNum = 0
page.10 < styles.content.get

Dazu muss man dem Template noch zwei “Static Includes” zuordnen:

  • Include static: content(default)
  • Include static (from extensions): CSS Styled Content (css_styled_content)

mit TypoScript und HTML

  • Wir entwerfen eine HTML-Seite template.html, die als Template für unsere Website dienen soll. Dazu benötigen wir natürlich auch ein CSS-Style-Sheet site.css

Abbildung 1: Das Layout der Website soll so aussehen (Google Drive: website01.jpg):

Zur Realisierung eines solchen Layouts mit Typo3 benötigt man grundsätzlich folgende drei Bestandteile:

  1. Ein HTML Template
  2. Ein dazu passendes CSS Stylesheet
  3. Ein TypoScript, das das HTML-Template lädt und mit dem dynamischen Inhalt beschickt

Ein HTML-Template ist eine normale HTML-Datei mit ein oder mehreren sog. Subparts (HTML-Kommentare mit start/end) und ein oder mehreren sog. Markern (Platzhalter der Form ###abcdefg###). Diese Subparts und Marker sollen dann mit den dynamischen Inhaltselementen unserer Web-Seiten beschickt werden.

Das HTML Template laden wir als normales File in den Ordner: fileadmin/templates/main.
Das CSS Style Sheet laden wir als normals File in den Ordner: fileadmin/template/main/res
Das TypoScript tragen wir im Typo3 Template Record in das Feld “Setup” ein.

HTML-Template mit DIVs

Dieses Layout sollte mit dem untenstehenden HTML-Template erzeugt werden. Leider stellt der MozillaFirefox zwei DIVs nicht richtig nebeneinander dar, so dass ich als Alternative HTML-Tables nehmen muss.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <link rel="stylesheet" href="./res/site.css" media="screen,projection">
 <title></title>
 </head>
 <body>
 <!-- ###DOKUMENT### start -->
 <div id="komplett">
	<div id="header">###LOGO###</div>
	<div id="menuline">###TOPMENU###</div>
	<div id="left">###MENU###</div>
	<div id="content">###INHALT###</div>
	<div id="footer">###FOOTER###</div>
 </div>
 <!-- ###DOKUMENT### end -->
 </body>
 </html>

Es wird folgedes Style-Sheet benutzt:

body {
	text-align:center;
	background:#ffffff;
}

#komplett {
	margin:30px auto;
	width:788px;
	text-align:left;
}
 
#header {
	height:70px;
	background: green;
}
#menuline {
	height:18px;
	color: #fff;
	background: blue;;
}
#left {
	width:140px;
	float:left;
	background:#ffffcc;
}
#content {
    width:280px
	float:left;
	background: #99CCFF;
}
#footer {
    height:18px;
	clear:left;
	background: blue;
	color:#ffffff;
}

Das HTML-Template laden wir in den Ordner: fileadmin/templates/main.
Das Style Sheet laden wir in den Ordner: fileadmin/template/main/res.

Im Typo3 Template Record tragen wir in das Feld “Setup” dann folgendes kleines TypoScript ein:

page = PAGE
page.typeNum = 0
page.config.doctype = xhtml_trans
page {
       bodyTag = <body>
       includeCSS {
       file1 = fileadmin/template/main/res/site.css
       }
       10 = TEMPLATE
       10 {
          template = FILE
          template.file = fileadmin/template/main/template.html
          workOnSubpart = DOKUMENT
            marks {
            INHALT < styles.content.get
            TOPMENU = TEXT
            TOPMENU.value = Hier soll eine Menüleiste hin
            MENU =TEXT
            MENU.value = Hier das Menü<br /><br />
            FOOTER = TEXT
            FOOTER.value = Dietrich Kracht Consulting Wiki
            LOGO = TEXT
            LOGO.value = Hier soll ein Logo-Bild hin
            }
          }
       }

Damit wird das HTML-Template geholt und die Marker mit etwas Text beschickt.

HTML-Template mit TABLE

Da das HTML-Template mit DIVs bei mir nicht funktioniert hat, hier mein erfolgreicher Versuch mit einem HTML-Template auf der Basis von TABLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="./res/site.css" media="screen,projection">
<title></title>
</head>
<body>
<!-- ###DOKUMENT### start -->
<div id="komplett">
	<table border="0" cellpadding="0" cellspacing="0" width="635">
	<tr>
	   <td id="header" colspan="2">###LOGO###</td>
	</tr>
	<tr>
	   <td id="menueline" colspan="2" style="color:#ffffff; background: rgb(54,40,27);">###TOPMENU###</td>
	</tr>
	<tr height="400">
	   <td id="left" valign="top" style="background: rgb(203,187,151);">###MENU###</td>
	   <td id="content" valign="top" style="background: rgb(244,233,203);">###INHALT###</td>
	</tr>
	<tr>
	   <td id="footer" colspan="2">###FOOTER###</td>
	</tr>
	</table>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>

Mehrere Websites verwalten

Ein Super-Vorteil von Typo3 gegenüber MediaWiki und Joomla ist, dass man mit einer Typo3-Installation mehrere Websites verwalten kann.

Dazu muss man folgendes machen:

Page Trees
Jede Website wird im Typo3 als ein Page Tree angelegt. Normalweise liegt die Startseite eines jeden solchen Page Trees (=Website) dann gleich auf der Ebene direkt unterhalb der Typo3-Wurzel. Die Startseiten von Websites müssen einen Template Record haben und die Checkbox Rootlevel muss im Template Record angehackt sein.
VirtualHosts
Im Apache-Webserver legt man für jede Website einen sog. Virtual Host mit einem externen Namen (ServerName) an. Dabei zeigen dann alle Virtuellen Hosts auf das gleiche DocumentRoot, nämlich das Typo3-Verzeichnis. Wie man die Apache-Konfiguration macht, beschreibe ich im Artikel über Apache
Namensauflösung
Damit der Apache-Server vom Client aus auch gefunden wird, müssen die ServerNames der Virtual Hosts dann auf die IP-Adresse des einen Apache-Servers aufgelöst werden, etwa durch ensprechende DNS-Einträge oder lokal durch entsprechende Einträge in der Datei hosts – auch das wird im Einzelnen im Artikel Apache beschrieben.
Domain Records
Alle Requests auf unsere verschiedenen Websites landen so erst einmal auf unserer Typo3-Installation. Damit der Typo3 die einzelnen Websites dann wieder auseinander finden kann, müssen wir zu jeder Website einen sog. Domain Record zuordnen, und zwar auf der Startseite jeder Website (da wo schon der Template Record mit der Rootlevel-Angabe steht). In diesen Domain Records wird einfach der externe Name (ServerName) der jeweiligen Website angegeben, dann hat Typo3 die Information, auf welchen Page Tree es zugreifen soll.

Typo3 Websites

Export und Import

TYPO3 kann sehr schön Pages und Page Trees exportieren und importieren. Damit können also ganze Websites (Page Tree) oder auch gezielt Teile einer Website von einem TYPO3 auf eine anderes TYPO3 transportiert werden.

Siehe: http://wiki.typo3.org/index.php/De:faq/copy_parts_of_a_running_TYPO3_system_to_another_server

Externe Pictures einbinden

Normalerweise will Typo3 die in Content-Elementen benutzen Bilder ebenfalls verwalten, was für ein gutes Content-Management-System auch sehr sinnvoll ist. Wenn man über diesen Weg aber nicht genau das hinbekommt, was man gerne machen möchte, muss man – notgedrungen – selber manuell IMG-Tags in seine Text-Inhaltselement einfügen.

Ich möchte Pictures von externen Websites verwenden und diese nicht zu mir herunter laden, wegen Copyright. Mit meinem momentanen Wissensstand über Typo3 bekomme ich das “normal” nicht hin und versuche es deshalb über ein manuelles IMG-Tag…

Den Rich-Text-Editor (RTE) muss man erst einmal so einstellen, dass er das überhaupt erlaubt. Dazu sind folgende Schritte nötig:

  • Extension Manager
  • Drop Down: “Loaded Extensions”
  • Klicken auf “htmlArea RTE” und warten…
  • Das Kästchen Enable Images in RTE anhaken
  • Klicken auf Update

Wenn das erledigt ist, kann man im RTE das gewünschte IMG-Tag eingeben, man muss aber aufpassen und den IMG-Tag nicht in der WYSIWYG-Ansicht, sondern in der HTML-Ansicht eingeben. Dann funktioniert’s.

Beispiel:

 <img src="http://a69.g.akamai.net/n/69/10688/v1/img5.allocine.fr/acmedia/rsz/434/x/x/x/medias/nmedia/18/36/22/67/18473826.jpg" />

Interessanterweise glaubt der RTE besonders schlau zu sein und lädt sich das externe Picture herunter in ein lokales Verzeichnis:

  • /typo3/uploads/RTEmagicC_d6791d53f5.jpg.jpg

Nun könnte ich das locale Picture auch auf dem “offiziellen” Typo3-Wege einbinden 🙂

Frontend Editing

Damit das Editieren von Seiteninhalten so einfach wird, wie z.B. in einem Wiki, gibt es auch bei Typo3 die Möglichkeit des sog. Frontend Editing; d.h. man kann direkt beim Betrachten der Seiten einer Website mit einem Klick ins Editieren (Bearbeiten) wechseln, wenn das so konfiguriert ist und man dazu berechtigt ist…

Dazu sind folgende Schritte erforderlich:

  • Im TYPO3 Backend, ganz linke Spalte: Tools > User Admin
  • Beim gewünschten User auf “Bearbeiten” (Edit) klicken (Bleistift-Symbol)
  • In den Daten dieses Users das Feld “TSconfig” suchen
  • Dort eingeben:
admPanel {
	enable.edit = 1
	override.edit.displayFieldIcons = 1
	hide = 1
	}

Geschützte Seiten

Manchmal will man einen Teil der Seiten einer Website nicht öffentlich machen, sondern nur ein bestimmter Benutzerkreis soll diese Seiten (im Frontend) sehen können. Im TYPO3 kann man das wie folgt einrichten:

  • Einen sysFolder zur Aufnahme von User Records und User Group Records anlegen
  • Frontend User (=”Webuser”) als Records in diesem sysFolder anlegen
  • Frontend User-Gruppen als Records in diesem sysFolder anlegen
  • Login-Maske als Inhaltselement z.B. auf die Startseite der Website legen
  • Die Seiten, die nicht-öffentlich sein sollen schützen (Visibility)
  • Page-ID des sysFolders, der die User Records enthält, als Constant (z.B. styles.content.loginform.pid = 96) im Template bekannt geben

Menüs

Ich benötige ein mehrstufiges hierarchisches Menü mit variabler Tiefe.

Schön aussehen soll es auch noch…

— Dkracht 08:27, 4 September 2008 (CEST)