Difference between revisions of "Typo3"

From Dietrich Blog (Strato)
Jump to: navigation, search
(Externe Pictures einbinden)
(Replaced content with "Has been moved to: http://blog.kr8.de/wiki-typo3/")
 
Line 1: Line 1:
{{TOCright}}
+
Has been moved to: http://blog.kr8.de/wiki-typo3/
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 ==
 
* Definitive Software Library ID: '''Typo3'''
 
* Name: Typo3
 
* Versionen
 
** 4.2.1 auf [[ComputerT41]]
 
** 4.1.7 auf [[ComputerGraumann]]
 
** 3.8.1 '''Tutorial Quickstart''' auf [[ComputerGraumann]]
 
* Hersteller/Bezugsquelle: http://typo3.org/download/packages/
 
* Installations-Ordner: D:\var\www\htdocs\typo3
 
* Installations-Skript: http://localhost/typo3/typo3/install
 
=== 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 ==
 
* http://typo3.org/documentation
 
* http://www.typo3forum.net
 
* http://wiki.typo3.org
 
* [[Typo3 Quickstart Tutorial]]: Typo3 Version 3.8.1 http://typo3.org/documentation/document-library/tutorials/doc_tut_quickstart/0.1.0/view/1/1/
 
* Modern Template Building: http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/0.1.0/view/
 
** Ist viel zu kompliziert für den Anfänger, ist aber vollständig und funktioniert
 
* ftb tutorial: http://www.typo3forum.net/forum/templavoila/16139-templavoila-genau-funktionierts-beispiel-allen-templates.html
 
* Steffen Kamper: http://www.sk-typo3.de/Typo3-Workshop.15.0.html
 
** Erklärt sehr schön die Installation von typo3 mit ImageMagick etc.
 
** Die Teile über Templates und Menüs sind leider unvollständig
 
* ...
 
 
 
== 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''' <i>Achtung: Damit Anfänger das auch bestimmt nicht verstehen, wird das als TS abgekürzt</i>)
 
** 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???<br /> 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:
 
<pre>
 
# Default PAGE object:
 
page = PAGE
 
page.10 = TEXT
 
page.10.value = HELLO WORLD!
 
</pre>
 
 
Wenn man den Inhalt seiner Seiten tatsächlich sehen will, muss man das Setup-Script ändern in:
 
<pre>
 
page = PAGE
 
page.typeNum = 0
 
page.10 < styles.content.get
 
</pre>
 
 
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'''
 
 
 
Das '''Layout''' der Website soll so aussehen:<br />
 
[[Image:Website01.png]]<br />
 
 
 
Zur Realisierung eines solchen Layouts mit Typo3 benötigt man grundsätzlich folgende drei Bestandteile:
 
# Ein '''HTML Template'''
 
# Ein dazu passendes '''CSS Stylesheet'''
 
# 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'''.<br />
 
Das '''CSS Style Sheet''' laden wir als normals File in den Ordner: '''fileadmin/template/main/res'''<br />
 
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.
 
<pre>
 
<!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>
 
</pre>
 
 
 
Es wird folgedes '''Style-Sheet''' benutzt:
 
<pre>
 
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;
 
}
 
</pre>
 
 
 
 
 
Das HTML-Template laden wir in den Ordner: '''fileadmin/templates/main'''.<br />
 
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:
 
<pre>
 
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
 
            }
 
          }
 
      } 
 
</pre>
 
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:
 
<pre>
 
<!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>
 
 
 
</pre>
 
 
 
== 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 ===
 
* http://wiki.graumann.kr8.de  mit dem Typo3 Domain Record --> ConsultingWiki
 
* http://blog.graumann.kr8.de mit dem Typo3 Domain Record --> KrachtBlog
 
 
 
== 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:
 
<pre>
 
<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" />
 
</pre>
 
 
 
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:
 
<pre>
 
admPanel {
 
enable.edit = 1
 
override.edit.displayFieldIcons = 1
 
hide = 1
 
}
 
</pre>
 
 
 
== 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...
 
 
 
 
 
 
 
-- [[User:Dkracht|Dkracht]] 08:27, 4 September 2008 (CEST)
 

Latest revision as of 12:33, 22 May 2020

Has been moved to: http://blog.kr8.de/wiki-typo3/