TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Exzellenter Artikel
6 | 28 Kommentare | 131050 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" mit Ihrem Wissen!

Diese umfangreiche TYPO3-Einführung zeigt Ihnen Schritt für Schritt die wichtigsten Grundlagen des Content-Management-Systems und erläutert Ihnen wie Sie schnell und einfach TYPO3 selbst installieren.

Was ist TYPO3?

null

TYPO3 ist ein Open-Source-Content-Management-System, welches 1998 auf dem Markt erschienen ist und von Kasper Skårhøj entwickelt wurde.

TYPO3 kann mit derzeit über 3000 Plugins (besser bekannt als Extensions) erweitert werden. Darunter diverse Shop-Erweiterungen, Foren, Newssysteme und vieles mehr.

Anzeige Hier werben

TYPO3 installieren

Um TYPO3 benutzen zu können, benötigt man einen Webserver (APACHE etc.) und einen Datenbankserver. In der aktuellen TYPO3-Version wird mindestens PHP 5.1.0 benötigt, besser 5.2.x. Für die Datenbank kann dank DBAL MySQL, PostgreSQL, Oracle und viele andere verwendet werden.

Ratsam aber nicht zwingend erforderlich ist auch darauf zu achten, das auf dem Server ImageMagick vorhanden ist.

Wer dies alles abkürzen möchte, kann auf fertige Pakete von TYPO3 zurückgreifen, die bereits einen Webserver beinhalten. Dazu bitte ich euch unter folgender URL zu schauen: http://typo3.org/download/installers/

Windows

Da ich keinerlei Erfahrungen habe, wie man einen Windowsserver administriert, gehe ich von einer "Heim-Anwendung" aus. Das heißt, ich werde hier kurz erklären wie man anhand von XAMPP ein kleinen "Homeserver" online setzt und dort mit TYPO3 arbeiten kann.

1. XAMPP installieren

Es ist vollkommen ausreichend wenn wir XAMPP Lite installieren. Folgender Link leitet euch auf die Webseite von XAMPP weiter und lässt euch zwischen verschiedenen Version wählen. Ich empfehle das selbstextrahierende ZIP-Archiv (EXE).

Nachdem ihr XAMPP installiert habt, müssen wir nun zuerst ein paar Einstellungen in der php.ini (Konfigurationsdatei für PHP) vornehmen, um TYPO3 bestmöglich zum laufen zu bringen.

Bei mir ist XAMPP unter dem Pfad "c:\xampplite\" zu finden. Dies kann natürlich bei euch abweichen, deswegen vorher kontrollieren. Der Pfad zu der Konfigurationsdatei ist bei mir "c:\xampplite\apache\bin".
In diesem Ordner solltet ihr die php.ini mit einem beliebigen Texteditor öffnen und folgende Werte wie folgt ändern:

 
Text
1
2
# Zeile 246
memory_limit = 64M

Habt ihr dies getan, könnt ihr die Datei speichern und schließen. Falls euer Webserver bereits laufen sollte, müsst ihr diesen neustarten.

2. XAMPP starten und aufräumen

Wir sind nun soweit und können XAMPP das erste mal starten. Dazu ruft ihr in eurem XAMPP-Ordner einfach die Datei "xampp-control" auf und klickt bei Apache und MySql auf "Start". Nach kurzer Zeit sollte, in Grün hinterlegt, eine Meldung mit "Running" erscheinen.

Wir öffnen nun unseren Browser und tippen in der Adresszeile "http://localhost" ein. Ihr solltet jetzt eine Testseite von XAMPP sehen.

Sicherheitsrelevanter Hinweis

Ich gehe nicht davon aus das XAMPP bei euch vorwiegend online genutzt wird und werde somit nicht auf weitere Maßnahmen eingehen, die euer XAMPP "sicher" vor äußeren Einwirkungen macht.

Da wir diesen ganzen Kram nicht brauchen, gehen wir kurzerhand in unser XAMPP-Verzeichnis und leeren (nicht löschen!) den Ordner "htdocs" vollständig. Nachdem das getätigt wurde, können wir uns der TYPO3 Installation widmen.

3. TYPO3 installieren & konfigurieren

Wir besorgen uns jetzt zuerst einmal TYPO3 unter folgender Adresse: http://typo3.org/download/packages/. Dort wählen wir das Paket "Source with Dummy site ZIP" in der aktuellen Stable Version (4.2.1, Stand: 24. September 2008).
Nach dem Download entpacken wir das Archiv und kopieren den Inhalt des Ordners "typo3_src+dummy-4.2.1" (Kann je nach Version abweichen) in unser "htdocs"-Verzeichnis von XAMPP.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Installation, Step by Step

Wir öffnen nun wieder unseren Browser und tippen dort "http://localhost" ein. Jetzt sollte der 3-Step Installation Assistent von TYPO3 erscheinen.

Im ersten Schritt fragt uns TYPO3 nach unseren Zugangsdaten für die Datenbank. Wenn ihr daran nichts geändert habt, sollte der Benutzername "root" sein und das Password kann leer bleiben. Unter Host kann "localhost" drinnen stehen bleiben.

Ein Klick auf "Continue" führt uns zu Schritt 2, wo wir eine Datenbank auswählen können. Da wir noch keine Datenbank angelegt haben, tippen wir in dem Unterpunkt 2 - Create new database - "typo3" ein und klicken danach wieder auf Continue.

In Schritt 3 werden wir aufgefordert eine Datei für den Import zu wählen. Da wir über keine andere Datei als die Standard-Datei verfügen, können wir hier alles so stehen lassen wie es ist und mit einem Klick auf "Import database" den letzten Schritt abschließen.

TYPO3 hat jetzt für uns alle relevanten Einstellungen getätigt und bereits einen Adminzugang mit den Benutzername "admin" und dem Passwort "password" angelegt. Mit einem Klick auf "Go to the backend login" könnt ihr euch mit den oben genannten Logindaten in das Backend von TYPO3 einloggen.

Linux

Ich gehe bei der Installation unter Linux bereits von einem lauffähigen Webserver aus. Ich möchte euch unter Linux nur die Möglichkeit zeigen, wie ihr mit Symlinks schnell mehrere TYPO3-Installationen anlegen könnt, mit nur einem Source-Paket.

Mehrere Projekte mit einer "TYPO3-Installation" hosten

Das Backend von TYPO3

null
Aufbau der Module

Das Backend von TYPO3 erreicht man normalerweise über den Unterordner "typo3" im Hauptverzeichnis. Beispiel: "http://www.example.com/typo3".

Nach dem erfolgreichen Login stehen einem eine Vielzahl an Modulen zur Verfügung. Die in TYPO3 integrierten Module sind den Kategorien Web, Datei, User Tools, Admin Tools & Hilfe untergeordnet.

Anmerkung zum Screenshot:
Die abgebildeten Module können von euren abweichen. Je nach installierter Extension können neue Module oder Kategorien hinzukommen.

Web

In der Kategorie Web sind alle Module die zur Bearbeitung der Seite nötig sind. Darunter stehen einem auch Hilfsfunktionen bzw. Module zur Verfügung, die das erstellen bzw. bearbeiten von Seiten und/oder Inhalten vereinfachen.

Seite

An erster Stelle sitzt das "Seite"-Modul. Über dieses Modul können Inhalte gepflegt werden. Auf meinem Screenshot seht ihr in dem Icon ein kleines "TV" stehen, dies bedeutet das ich TemplaVoilà benutzte. Im normalen "Seite"-Modul ist das Icon ein wenig anders.

In der normalen Ansicht gibt es standardmäßig 4 Spalten. Diese Spalten teilen sich in den einzelnen Regionen der Seite auf und können frei im Template belegt werden.

null
Ansicht des Seiten-Moduls

Um die Bereiche Links, Normal, Rechts und Rand dem Template zuzuweisen, bedarf es ein wenig TypoScript.

Marker dem Template zuweisen  
Text
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
seite = PAGE
seite.typeNum = 0
seite.config.doctype = xhtml_trans
seite.stylesheet = fileadmin/templates/stylesheet.css


seite.1 = TEMPLATE
seite.1 {
    template = FILE
    template.file = fileadmin/templates/index.html
    workOnSubpart = DOKUMENT
    
    # Linke Spalte
    marks.LINKS < styles.content.getLeft
    # Inhalt (mittlere Spalte)
       marks.INHALT < styles.content.get
       # Header (In TYPO3 "Border" genannt)
    marks.HEADER < styles.content.getBorder
    # Rechte Spalte
    marks.RECHTS < styles.content.getRight
}

In dem einfachen Beispiel werden die Marker einfach über "marks._name_ < styles.content.get_Spalte_" definiert. Im Template selber werden die Bereiche dann einfach via "###NAME###" zugeteilt.

 
HTML
1
2
3
4
5
6
<div id="wrap">
    <p id="header">###HEADER###</p>
    <div id="left">###LINKS###</div>
    <div id="right">###RECHTS###</div>
    <div id="content">###INHALT###</div>
</div>

Hat man TemplaVoilà im Einsatz, dann orientiert sich die Ansicht des "Seite"-Modul an das Template bzw. der Konfiguration in der Datenstruktur vom Template.

null
Ansicht des Seiten-Moduls mit TemplaVoilà

So kann man einfach und schnell Bereiche für sein Template einrichten und individuell mit Inhalten bestücken. Eines der großen Vorteile von TemplaVoilà. Auch verschachtelte Boxen sind möglich, Flexible-Content-Elements (FCE) genannt.

null
Seiten-Modul mit TemplaVoilà und FCE
Anzeigen

Das "Anzeigen"-Modul beinhaltet eine Vorschau der Webseite. Mit einem Klick auf das Modul erscheint wie gewohnt der Seitenbaum und man kann dann auf eine Seite klicken um sich diese dann direkt anzuschauen.

Wer genauer hinschaut, dem fallen die kleinen Stifte auf. Mit einem klick auf diese, kann man die Inhalte zusätzlich bearbeiten. Das ganze funktioniert auch wenn man die Webseite normal aufruft und gleichzeitig im Backend angemeldet ist.

Liste

Über das Listen-Modul kann man sich alle Inhalte einer ausgewählten Seite übersichtlich anzeigen lassen. Wenn man die erweiterte Listenansicht, über die am Seitenende befindliche Checkbox, aktiviert hat, kann man schnell und einfach seine Inhalte Verwalten.

null
Erweiterte Listenansicht
null
Normale Listenansicht

Auch ein Clipboard, für schnelles Kopieren oder Verschieben von mehreren Seiten, steht einem zur Verfügung.

Info

Das Info-Modul beherbergt Funktionen wie etwa eine Seitenbaum-Übersicht, eine Übersetzungs-Übersicht (für mehrsprachige Webseiten) und ein ausführliches Log (wer hat wann welche Seite geändert).

Viel gibt es hier nicht zu erklären, da heißt es eher ... einfach mal reinschauen und durchklicken.

Der aufmerksame Leser werden jetzt sagen, da gibt es aber noch ein paar Reiter mehr. Das ist korrekt aber die anderen Module gehen schon etwas weiter in die Materie und da dies ein Einsteiger-Tutorial ist, brauchen wir diese nicht und sind für uns lange Zeit erstmal uninteressant.

Zugriff

Über das Zugriff-Modul kann man einzelnen Seiten/Sysfolder (etc.) bestimmte Gruppen und/oder Benutzer zuweisen. Dies macht dann Sinn, wenn man mehrere "normale" (das heißt, nicht "Admin"-User) Backendbenutzer hat und diesen bestimmte Seiten zum verwalten zuweisen möchte. Der Backendbenutzer, sofern kein "Admin"-User, kann ausschließlich die Seiten verwalten, die ihm zugewiesen sind.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Übersicht der vergebenen (Seiten-)Rechte
Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Rechte (rekursiv) bearbeiten
Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Rechte nach der Bearbeitung
Funktionen

Hier findet ihr ein paar Hilfsfunktionen die euch TYPO3 bereitstellt. So könnt ihr über den Punkt "Mehrere Seiten erzeugen" bis zu 9 Seiten auf einmal anlegen. Ein weiterer Hilfspunkt ist die Funktion "Seiten sortieren". Mit dieser könnt ihr Seiten nach bestimmten Kriterien (Erstellungszeit, Name etc.) einfach und schnell sortieren.

Versionierung

In TYPO3 gibt es von Haus aus 2 "Arbeitsebenen". Einmal die "LIVE-Arbeitsumgebung" (diese ist Standardmäßig aktiviert) und die "Entwurfsarbeitsumgebung". Über den Menüpunkt Versionierung kann man jetzt alle Änderungen innerhalb der Arbeitsumgebungen koordinieren und publizieren. Besonders dann interessant wenn viele Personen an einer Webseite arbeiten.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Quick-Menü im Backend

Die Arbeitsebene könnt ihr jederzeit im Backend oben Rechts ändern.

Template

In diesem Abschnitt könnt ihr Seiten ein "Template" zuweisen. Dies hat jetzt aber nicht unbedingt viel mit einem Seitentemplate, sprich einer HTML-Vorlage zu tun. Ihr könnt hier vielmehr diverse Einstellungen über TypoScript tätigen und bestimmte Dinge koordinieren.

Extensions

Mit über 3000 Extensions kann man seine TYPO3 Seite individuell mit den verschiedensten Modulen erweitern. Ich möchte euch jetzt ein paar Extensions vorstellen, die ich selber sehr oft benutze.

Der erste Weg zu Extensions geht über typo3.org. Hier findet man im Extension-Repository aktuelle und geprüfte Extensions, aber auch welche, die noch in Alpha- und Betaphase sind. Jede Person kann ein Update und eine eigene Extension hochladen, dafür ist aber schon ein wenig Erfahrung und Praxis mit TYPO3 erforderlich.

Extensions haben bei TYPO3 einen "key", also einen eindeutigen Namen. Nach diesem "Extension Key" kann man dann im TER (TYPO3 Extension Repository) suchen oder direkt über das Interface in TYPO3.

TemplaVoila! (templavoila)

Einfach und schnell äußerst flexible Templates erstellen. Dies ist mit TemplaVoila möglich. Zwar gibt es auch eine "Template-Engine" in TYPO3 aber diese ist längst nicht so flexibel wie TemplaVoila. Ich kann nur jeden raten, der sich ernsthaft mit TYPO3 auseinandersetzen will, sich unbedingt TemplaVoila anzuschauen.

News (tt_news)

Rupert Germann hat mit tt_news die am meisten installierte Extension für TYPO3 geschrieben. Sie umfasst ein vollständiges Newssystem mit Suche, automatischer Archivierung, Kategorien und RSS-Feeds. Ein ausgereiftes Codedesign und die hohe Anpassbarkeit mit CSS zeichnet tt_news (wie auch viele andere Extensions) aus.

RealUrl (realurl)

Mit Hilfe von RealUrl ist es möglich, die üblichen, benutzerfeindlichen URLs von TYPO3 "umzuwandeln". So wird z.B. aus "http://www.webmasterpro.de/index.php?id=54?l=2" die URL "http://www.webmasterpro.de/deutsch/ueberuns". Auch für relativ Unerfahrene leicht zu installieren.

Die erste eigene Seite

Unser Ziel ist es eine kleine fiktive Firmenseite zu erstellen. Damit das alles ein wenig flüssiger von statten geht, habe ich ein Layout mit den benötigten HTML- & CSS-Dateien vorbereitet. Ich schlage vor, ihr downloadet es euch einfach mal und macht das alles Schritt für Schritt mit. Danach könnt ihr einfach mal versuchen euer Layout in TYPO3 umzusetzen.

Anmerkung: Dieses Layout habe ich für einer meiner Extensions verwendet und brauche es nicht mehr. Deswegen nicht über die Kopfgrafik und so wundern. Ich war zu faul das ganze jetzt „neutraler“ zu gestalten.

Entpackt alles und kopiert es einfach in euer TYPO3-Verzeichnis. Ihr solltet dann folgenden Verzeichnisbaum vorfinden:

+ TYPO3
+- fileadmin
++- templates
++- css
++- grafik
++- typoscript
++ index.html

Nachdem unsere Verzeichnisse alle vorhanden sind, können wir uns jetzt im TYPO3-Backend einloggen.

TYPO3 vorkonfigurieren

Ich gehe von einer frischen TYPO3-Installation aus. Von daher haben wir noch keine Extension installiert und noch keine Seiten etc. angelegt.

Backend auf Deutsch stellen

Der erste Schritt führt uns direkt in den Extension Manager (Admin tools -> Ext. Manager). Dort angekommen, wählen wir im Dropdown-Menü „Translation handling“ aus. Wir wählen „German“ aus und klicken auf „Save selection“. Danach ein weiterer Klick auf „Update from repository“ und wir haben TYPO3 erst einmal Deutsch beigebracht. Nun müssen wir TYPO3 nur noch auf Deutsch stellen, dies tun wir indem wir auf den Menüpunkt User settings (User tools → User settings) klicken. Dort wählen wir unter „Language“ nun German aus. Mit einem Klick auf „Save Configuration“ sollte TYPO3 jetzt auf Deutsch gestellt sein.

Seitenstruktur anlegen

Im nächsten Schritt wollen wir unseren Seitenbaum anlegen. Der Seitenbaum spiegelt die Webseiten im Frontend wieder. Wir klicken zuerst auf Funktionen (Web -> Funktionen) im Menü und machen dann ein Rechtsklick auf den einzigen Eintrag im mittleren Frame („New TYPO3 site“). In dem dann erscheinenden Context-Menü wählen wir „Neu“ aus, klicken dann im rechten Frame unter Neuer Datensatz auf „Seite (in)“ und füllen das nun folgende Formular wie folgt aus.

Wählt man im Gegenzug den Assistent aus, kann man im nächsten Schritt die Seitenposition bestimmen. Das ist besonders hilfreich, wenn man viele Seiten bereits angelegt hat.

Als Typ wählen wir „Verweis“ aus und bestätigen mit „Ok“. Das Häkchen bei „Seite verbergen“ nehmen wir raus, schließlich soll unsere Webseite ja sichtbar sein. Unter Seitentitel könnt ihr euch selber etwas ausdenken, ich habe „TYPO3 Webseite“ genommen. Mit einem Klick oben auf die Diskette speichern wir die Seite ab und gehen zurück zur letzten Seite.

Da wir uns immer noch im Funktionen-Modul befinden, klicken wir jetzt auf die eben erstellte Seite im Seitenbaum. Wir sehen jetzt 9 Eingabe-Felder, die nur darauf warten, ausgefüllt zu werden. Dies tun wir jetzt auch und legen somit unseren kleinen Seitenbaum in Sekundenschnelle an. Ich habe mich für folgende Struktur entschieden. Ich empfehle euch für dieses Tutorial erst einmal die gleiche zu nehmen.

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Mehrere Seiten auf einmal erzeugen

Haben wir die Felder ausgefüllt, klicken wir nun auf „Seiten anlegen“ und bestätigen wieder mit „Ok“. Im mittleren Frame klicken wir nun auf das Plus neben unseren Seitenbaum, um die so eben erstellen Unterseiten anzuzeigen.

Wir müssen jetzt noch einmal die erste Seite bearbeiten um die Struktur der Seite zu komplettieren. Wir machen also einen Rechtsklick auf die Seite „TYPO3 Webseite“ (ggf. bei euch anders) und wählen im Context-Menü „Seiteneigenschaften bearbeiten“ aus. Da wir den Seitentyp als Verweis festgelegt haben, brauchen wir selbigen, sonst führt die Seite ins Nirvana. Wir gehen also oben auf den Reiter „Verweis“ und klicken Rechts neben der Box auf den Ordner. Wir sehen nun noch einmal unseren Seitenbaum und können jetzt eine Einstiegsseite festlegen. Da dies bei uns die Startseite ist, wählen wir diese mit einem Klick aus. Jeder der jetzt auf unsere Webseite geht, gelangt sofort auf den Menüpunkt „Startseite“.
Nun müssen wir noch zum Reiter „Optionen“ und klicken dort unter „Allgemeine Datensatzsammlung„ auf den Ordner neben dem Eingabe-Feld. Wir wählen dann im Pop-Up die Seite „Template“ aus. Dies ist nötig, damit die Seite weiß, wo sie später das Seiten-Template findet. Wir speichern jetzt wieder die Seite über die Diskette ab und haben damit unsere Struktur festgelegt.

Wie schon angesprochen, wird die Unterseite „Template“ später unsere Seiten-Vorlage beherbergen. Bevor sie das aber kann, müssen wir diese Seite noch einmal bearbeiten. Wir machen also einen Rechtsklick auf die Seite „Template“ und klicken auf „Seiteneigenschaften bearbeiten“. Hier müssen wir nur den Typ der Seite auf „SysOrdner“ stellen und dies mit „Ok“ bestätigen.

SysOrdner sind bestimmte Seitentypen in dem unterschiedliche Typen von Datensätzen abgespeichert werden können.

Kommen wir nun zum Seiten-Template!

Template mit TemplaVoilà erstellen

Ich gehe extra nicht auf die „normale“ Template-Erstellung ein, sondern zeige euch direkt den Weg über TemplaVoilà (im weiteren Verlauf mit TV abgekürzt). Dies ist zwar der etwas längere (und vielleicht auch schwierigere) Weg aber auch der in meinen Augen effektivste Weg. Ihr werdet früher oder später alle bei TemplaVoilà landen, also warum nicht gleich damit anfangen und richtig lernen.

TV Installieren

Zuerst müssen wir natürlich TV installieren. Dazu gehen wir auf den Erweiterungs-Manger (Admin-Werkzeuge -> Erw-Manager) und wählen oben im Dropdown-Menü „Import extension“ aus. Ein Klick auf „Retrieve/Update“ speichert die Extension-Liste auf den Server und ermöglicht ein schnelleres abrufen der Extensions im späteren Verlauf. Im Suchfeld tippen wir nun „TemplaVoila“ ein und klicken auf „Look up“. In der Liste sollte nun die Extension (Version 1.3.7, Stand: 28.12.08) erscheinen. Mit einem Klick auf das Icon mit der weißen Seite und dem Pfeil, installieren wir die Extension. Im nächsten Bildschirm wird uns mitgeteilt, dass die Extension erfolgreich heruntergeladen wurde und kann nun in TYPO3 aktiviert werden. Dies machen wir mit einem einfachen Klick auf „Install extension“.

Der Extension-Manager müsste uns nun darauf aufmerksam machen, dass einige Abhängigkeiten fehlen. In diesem Fall wird die Extension „static_info_tables“ noch benötigt. Wir installieren diese also mit einem Klick auf „Import now“. Nach der Bestätigung klicken wir nun noch einmal auf „Install extension“ und uns wird angezeigt, dass die Extension noch ein paar Datenbanktabellen anlegt. Wir scrollen nun ganz nach unten und segnen dies mit einem Klick auf „Make updates“ ab. Dieses Fenster kann nun über „Close window and recheck dependencies“ geschlossen werden.

TV will nun natürlich auch noch ein paar Tabellen anlegen und bereits vorhandene bearbeiten. Dies wird uns nun mitgeteilt und wartet darauf bestätigt zu werden. Wir scrollen wieder runter und klicken auf „Make updates“ um den ganzen Prozess abzuschließen.

Der aufmerksame Beobachter wird nun mitgekriegt haben, das sich in unserer Backend-Navigation das Icons von „Seite“ grafisch geändert hat und ein neues mit Namen „TemplaVoilà“ hinzugekommen ist.

TV-Template erstellen

Wir gehen nun in das „Liste“-Modul (Web -> Liste) und wählen im Seitenbaum die Seite „Template“ aus. Mit einem Klick auf das Icon im oberen Bereich, erstellen wir einen neuen Datensatz. Wir wählen dann in der Liste „TemplaVoilà Datenstruktur“ aus. Im nächsten Schritt füllen wir das Feld „Titel“ mit „Template (Datenstruktur)“, stellen die Kategorie auf „Seiten Vorlage“ und speichern dies wieder mit einem Klick auf die Diskette ab.

Nun klicken wir erneut auf das Icon um einen neuen Datensatz zu erstellen (das ganz obere) und wählen diesmal „TemplaVoilà Template Objekt“ aus. Als Titel vergeben wir „Template“ und unter Dateireferenz fügen wir „fileadmin/templates/index.html“ ein. Als Datenstruktur wählen wir die eben erstellte aus. Das ganze speichern wir jetzt ab und haben schon einmal das Gerüst für unser Seiten-Template erstellt.

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf „TemplaVoilà“ (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite „Template“ ausgewählt haben und sollten dann folgenden Inhalt sehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Wir klicken nun auf „Review“ und danach auf „Modify DS / TO“. Mit einem Klick auf „Clear all“ sollte jetzt ein neuer Eintrag mit Namen „Root“ erscheinen. Wir klicken jetzt bei dem Eintrag unter Action auf „Map“, wählen danach unter „Mapping Window“ HTML Source aus und klicken im HTML-Code ganz oben auf dem schwarz hinterlegten „<body>“. Mit einem Klick auf „Set“ bestätigen wir die Auswahl und haben TV gesagt, dass sich die Seiten-Elemente alle innerhalb dieses Body-Tags befinden.

Wir müssen nun 4 weitere Elemente anlegen. Dies habe ich jetzt in ein Video gepackt, welches die erforderlichen Schritte kurz zeigt. Ich gehe gleich näher auf jedes Element ein.

Link zum Video

Die Elemente „Inhalte“ und „Rechte Spalte“ sind so genannte „Content Elements“, in diesen kann man über das „Seite“-Modul dynamisch Inhalte eingefügt werden. „Hauptmenü“ und „Untermenü“ sind dagegen „TypoScript Object Path“. Wie man sich vielleicht schon denken kann, kann man diese über TypoScript ansteuern.

Wir müssen nun noch das Template unserer Hauptseite, „TYPO3 Webseite“ zuordnen. Alle Unterseiten erben automatisch dieses Template. Wir klicken nun also mit der rechten Maustaste auf die Seite im Seitenbaum und wählen „Seiteneigenschaften bearbeiten“. Unter dem Reiter „Erweitert“ wählen wir nun in den zwei Dropdown-Menüs unser angelegtes TV-Template aus. Es sollte dann in etwa so bei euch aussehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Seiten-Template für das TypoScript anlegen

Nachdem wir alle Elemente in TV festgelegt haben, kommen wir zum TypoScript. Wir klicken im Seitenbaum auf die Seite „TYPO3 Webseite“ und wählen das Modul „Template“ (Web -> Template) aus. Ein weiterer Klick auf „Create template for a new site“ erstellt uns nun ein Seiten-Template für diese Seite. In dem Dropdown-Menü oben wählen wir jetzt „Info/Modify“ aus und klicken ganz unten auf „Click here to edit whole template record“.

Das Formular füllen wir nun wie folgt aus. „Template-Titel“ kann so bleiben. In „Web-Site-Titel“ können wir ein Titel für die Webseite eingeben, welcher im Browser dann immer oben angezeigt wird. Hier geben wir einfach mal „Unsere TYPO3-Seite“ ein. Unter „Konfiguration“ löschen wir zuerst den Inhalt und fügen dann diese Zeilen hinzu:

TypoScript  
HTML
1
2
3
4
# CLEANING
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/cleaning.txt"> 
# CONFIGURATION
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/typoscript/config.txt">

Dies bewirkt einfach, dass der Code aus den angegebenen Dateien ausgelesen wird.

Als nächstes widmen wir uns dem Reiter „Enthält“. Dort wählen wir unter „Statische einschließen“ die Elemente „content (default)“ und „cSet (default)“ aus. Unter „Statische einschließen (aus Erweiterungen)„ wählen wir „CSS Styled Content“ aus. Wir speichern den Datensatz mit einem Klick auf die Diskette und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben.

Cleaning.txt

Diese Datei räumt erstmal gewaltig den HTML-Code auf den TYPO3 produziert. Es sorgt dafür das überflüssige Kommentare, die sonst im HTML auftauchen, verschwinden und optimiert den HTML-Code dahingehend, dass die Seite weites gehend Barrierefrei und „valide“ gestaltet werden kann.

Config.txt

Diese Datei ist das eigentliche Herz der Seite. Hier werden die in TV angelegten Platzhalter zugewiesen. Öffnet die Datei einfach mal mit einem Editor, die Zeilen sind dokumentiert. Ab hier sind dann Kenntnisse in TypoScript nötig. Es lässt sich aber alles relativ einfach nachvollziehen und mit ein bisschen ausprobieren steigt man wirklich sehr schnell dahinter. Am Ende dieses Artikels habe ich weiterführende Links eingefügt, die mehr Beispiele für TypoScript zeigen.

Jetzt wird es Zeit für die ersten Inhalte.

Inhalte einpflegen

Wir gehen jetzt im Seitenbaum auf unsere „Startseite“ und wählen das Modul „Seite“ aus (Web -> Seite). Ihr solltet dann in etwa folgendes sehen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Wir sehen hier eine genaue Abbildung von unserem TV-Template. Wir haben hier zwei Spalten, „Inhalte“ und „Rechts“. In meiner Abbildung seht ihr bereits, dass ich in der „Inhalte“-Spalte Text mit Bild habe. Das ganze wollen wir jetzt natürlich nachholen. Ihr klickt einfach in der „Inhalte“-Spalte auf das Icon mit dem Plus () und wählt im nächsten Schritt „Text mit Bild“ aus. Wenn ihr euch jetzt mal 5 Minute nehmt und das folgende Formular ein wenig studiert, könnt ihr sehen wie simpel es ist, Inhalte ein zu pflegen.

Im Reiter „Allgemein“ vergeben wir zuerst eine Überschrift für unseren „Artikel“.

Scrollt nach ganz unten und setzt ein Häkchen in „Zweite Optionspalette anzeigen“. Dies ermöglicht euch, individueller euren Inhalt zu gestalten. Ihr habt dann mehr Optionen. Zum Beispiel könnt ihr dann bei den Überschriften zwischen verschiedenen Layouts wählen (<h1>,<h2>,<h3> etc.).

Danach wechseln wir auf den Reiter „Text“ und schreiben unsere Information in den WYSIWYG-Editor. Jetzt wechseln wir auf „Medien“ und können ein Bild auswählen, welches wir in den Artikel stellen wollen. Dazu können wir entweder die Festplatte durchsuchen oder wir klicken Rechts auf den Ordner bei dem Auswahlfeld und wählen ein bereits hoch geladenes Bild aus.

Alles was ihr irgendwann mal wieder auf der Seite verwenden wollt, solltet ihr immer in den „fileadmin“-Ordner innerhalb von TYPO3 speichern. In TYPO3 kann jederzeit darauf zugegriffen werden und in eure Inhalte eingepflegt werden.

Der „Medien“-Bereich setzt sich aus mehreren „Ebenen“ zusammen. Ganz oben ist die Bilder-Ebene, in der wir unser Bild ausgesucht haben. Darunter befindet sich die „Position“-Ebene, zu der wir jetzt kommen. In der „Position“-Ebene können wir die Position vom Bild wählen. Außerdem können wir einen Bilderrahmen hinzufügen oder (sofern vorhanden) mehrere Bilder Spaltenweise aufteilen. Direkt unter der „Position“-Ebene befindet sich die „Bildmaße“-Ebene. In dieser können wir die Größe des Bildes festlegen. Man kann entweder die Höhe und Breite fest angeben oder wir geben nur eine Höhe an und lassen das Bild proportional dann von der Breite anpassen, vollkommen automatisch. Das ganze geht natürlich auch anders herum. In der „Bild-Links“-Ebene können wir das Bild intern oder extern verlinken. Darüber hinaus können wir auch das Bild sich mit einem klick vergrößern lassen. Die restlichen Felder sind selbsterklärend und können ausprobiert werden!

Mit einem Klick auf die Diskette speichern wir den Datensatz ab und haben unseren ersten Inhalt in unsere Seite eingepflegt. Herzlichen Glückwunsch!

Wenn wir uns die Seite mal im Frontend anschauen, können wir uns das Ergebnis betrachten. Es sollte in etwa wie bei mir ausschauen:

Bild zu TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Weiterführende Webseiten

Offizielle Webseiten

Communities

Blogs


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 7 Personen an der Seite "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung" hier bearbeiten.


Kommentare: TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung

Neuen Kommentar schreiben
Bei mir Fehlt was
Beantworten

Hallo und vielen Dank für den tollen Artikel!

Leider musste ich feststellen, dass bei mir was fehlt obwohl es im
Artikel drin ist.

Um es klarer darzustellen:

Als nächstes widmen wir uns dem Reiter „Enthält“. Dort wählen wir unter „Statische einschließendie Elemente „content (default)“ und „cSet (default) aus. Unter „Statische einschließen (aus Erweiterungen)„ wählen wir „CSS Styled Content“ aus. Wir speichern den Datensatz mit einem Klick auf die Diskette und schauen uns mal die Dateien an, die wir oben im TypoScript angegeben haben

Die Elemente, die ich grün markiert habe, sind bei mir im Typo3 nicht vorhanden!

hat jemand eine Ahnung warum nicht?

Gruß Chris

custom-web am 14.10.2010 um 15:10
FEHLERMELDUNG
Beantworten

Im Kapitel "Inhalte einpflegen" kommt nach "Ihr klickt einfach in der „Inhalte“-Spalte auf das Icon mit dem Plus ()" bei mir diese Fehlermeldung !?

#1: PHP Catchable Fatal Error: Argument 2 passed to t3lib_div::implodeArrayForUrl() must be an array, null given, called in /Applications/MAMP/htdocs/typo3conf/ext/templavoila/mod1/db_new_content_el.php on line 282 and defined in /Applications/MAMP/typo3_src/t3lib/class.t3lib_div.php line 1818

t3lib_error_Exception thrown in file
/Applications/MAMP/typo3_src/t3lib/error/class.t3lib_error_errorhandler.php in line 101.

Bin leider ein Typo3-Newbie und verstehe nicht wo das Problem liegt !? Habe das tutorial bis zu dem Zeitpunkt Schritt für Schritt nachvollzogen und bisher hat auch alles geklappt !?

Bitte helft mir ! ;)

armanix am 21.05.2010 um 12:04
Mein Fehler?
Beantworten

Hallo!

zunächst einmal auch von mir VIELEN DANK für den Artikel! Ich bin blutiger Typo3-Anfänger und finde dass ich mit Hilfe des Artikels schon recht weit kam!

Ich habe natürlich versucht, die Beispiel-Website zu verwirklichen und war damit auch erfolgreich, allerdings wird mir am schluss im Frontend die Menüleiste (und auch das submenü) nicht korrekt angezeigt.

Stattdessen sehe ich im Frontend den Quellcode der Menüleiste

<li class="main_act"><a href="index.php?id=60" onfocus="blurLink(this);" class="main_act">Startseite</a></li><li class.....>

Wenn ich mir den eigentlichen Quelltext der Website ansehe, bekomme ich dafür das hier zu Gesicht:

<ul id="mainMenu">&lt;li class=&quot;main_act&quot;&gt;&lt;a href=&quot;index.php?id=60&quot; onfocus=&quot;blurLink(this);&quot; class=&quot;main_act&quot;&gt;Startseite&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;main_no&quot;&gt;&lt;a href=&quot;index.php?id=61&quot; onfocus=&quot;blurLink(this);&quot; class=&quot;main_no&quot;&gt;Über uns&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;main_no&quot;&gt;&lt;a href=&quot;index.php?id=62&quot; onfocus=&quot;blurLink(this);&quot; class=&quot;main_no&quot;&gt;Referenzen&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;main_no&quot;&gt;&lt;a href=&quot;index.php?id=63&quot; onfocus=&quot;blurLink(this);&quot; class=&quot;main_no&quot;&gt;Kontakt&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;main_no&quot;&gt;&lt;a href=&quot;index.php?id=64&quot; onfocus=&quot;blurLink(this);&quot; class=&quot;main_no&quot;&gt;Impressum&lt;/a&gt;&lt;/li&gt;</ul>

..

Nun weiss ich nicht, ob das ein Fehler von mir ist, vielleicht aber auch ein Kompatibilitätsfehler (ich benutze typo 4.3.2) oder ob es ein Fehler im Beispiel-Script ist.

Vielleicht kann mir jemand helfen!

Vielen Dank, Grüße aus Ghana

Adrian

eoys am 13.04.2010 um 20:11
Re: Mein Fehler?
Beantworten

Hallo,

ich hab den selben Fehler, auch die 4er Version.

Kann jemand helfen?

Viele Grüße,

Saskia

kruemelfan am 30.04.2010 um 11:26
ungeeignet für neulinge
Beantworten

hallo,

ihr richtet euer Tutorial zwar an Anfänger und Neulinge (TYPO3 Turolia - Der Einstieg ... Einführung....), allerdings ist der Lehrgehalt des Tutorials in meinen Augen sehr mager.

Zwar gebt ihr eine gute Schritt für Schritt Anleitung, was man denn wo nun klicken muss, jedoch fehlen eindeutig die Erklärungen.
Gerade das _warum_ man denn nun dort klicken und dieses und jenes eingeben muss ist für den Neuling existenziell um den Aufbau und die Funktionsweise von TYPO3 zu verstehen.

Ihr könntet das Tutorial nachträglich mit Randbemerkungen (Overlays, Tooltips, Marginalien oder ähnliches...) versehen um so zu erklären, was man denn un gerade da macht.

Dennoch vielen lieben Dank für die unglaublich große Mühe.

--

Steffen

steffen.mueller am 08.11.2009 um 13:28
andere Struktur
Beantworten

Hallo,

erst mal Danke für die gute Einführung in Typo3.

Nur die Schritte, welche in dem Video gezeigt werden, kann ich nicht ausführen, da bei mir eine komplett andere html-Struktur gemappt wird. Ohne das ul-Tag beispielsweise. Woran liegt das?

herzliche Grüße

André

ArtHdesign am 01.10.2009 um 19:11
Video ??
Beantworten

Hallo lieber Autor,

vielleicht kannst Du mal schreiben, wo Du das Video nun hast?

Ich komme leider auch nicht weiter

Vielen Dank

Simon

SPeters am 30.06.2009 um 13:38
Re: Video ??
Beantworten

Hallo,

kannst das Video unter: http://www.martin-hesse.info/typo3/typo3-der-einstieg-teil-3.html finden.

Gruß,

Martin

Martin Hesse am 30.06.2009 um 13:54
TemplaVoila Fehler?
Beantworten

Hallo,

ich habe Typo3 nach der Anleitung auf einem Webserver aufgesetzt. Jetzt bin ich aber unter der Kathegorie TemplaVoila auf einen Fehler gestoße. Es ist folgender Satz zu lesen:

Wir müssen jetzt das Template in einzelne Bereiche aufteilen und TV sagen, wo die einzelnen Inhalte erscheinen sollen. Dazu klicken wir jetzt auf „TemplaVoilà“ (Web -> TemplaVoilà), stellen sicher das wir immer noch die Seite „Template“ ausgewählt haben und sollten dann folgenden Inhalt sehen:

Bei mir ist nur kein Inhalt zu sehen. Es bleibt einfach leer. Wo könnte der Fehler liegen? Ich habe versucht wirklich alles penibel genau so zu machen, wie beschrieben. Der einzige Unterschied ist, dass TemplaVoila in Version 1.1.1 erschienen ist. Eine andere Version konnte ich nicht finden.

Kann mir bitte jemand helfen?

Ich danke.

vieser am 11.04.2009 um 09:16
Re: TemplaVoila Fehler?
Beantworten

Hi,

du hast wohl zuvor (unbewusst) ein falschen Ordner selektiert und in diesem den Datensatz gespeichert. Ist mir auch schon einmal passiert.

Martin Hesse am 30.06.2009 um 13:57
sprache installieren"
Beantworten

Beim installieren der deutschen Sprache kommt bei mir "Could not fetch translation status", weißt du, wie ich das beheben kann?

Sebastian Bechtel am 11.02.2009 um 22:38
Re: sprache installieren"
Beantworten

... weißt du, wie ich das beheben kann?

Für Extensions mit dieser Meldung existiert (noch) keine deutsche Übersetzung.

Gruß

Plotz

Plotz am 11.03.2009 um 18:10
Video einfügen
Beantworten

Wie bekomme ich ein kleines Video (.swf) in den Artikel?

Martin Hesse am 28.12.2008 um 22:44
Re: Video einfügen
Beantworten

Könntest du das Video was in dem Artikel noch fehlt evtl. anders verlinken, ohne das komme ich leider nich weiter?

niko77 am 07.03.2009 um 20:31
Re: Video einfügen
Beantworten

Ist derzeit leider nicht möglich. Videos lassen sich zwar händisch einbetten, dann ist der Artikel dannach aber nicht mehr editierbar. Was für ein Video hast du, evtl. kann ich dann ne andere Lösung finden.

Fabian Ziegler am 12.02.2009 um 08:36
Lob!
Beantworten

Ein großes Lob auch von meiner Seite.
Ich arbeite viel mit TYPO3 und kann daher sagen, super Artikel!
Den TemplaVoila! Teil werde ich mir mal bei Gelegenheit genauer ansehen.
Bisher habe ich Templates in TYPO3 alle von Hand erstellt, aber man muß eben alles einmal ausprobiert haben... die Neugier eben ;)

Super...weitermachen :)

pixelcat am 23.12.2008 um 14:24
Re: Lob!
Beantworten

Danke! Dein Wunsch sei mir Befehl :-p

Martin Hesse am 28.12.2008 um 22:43
Status!
Beantworten

Ich Gedenke damit, das ich nach Weihnachten den Artikel "fertig" schreiben werde. So jetzt für alle die schon brennend darauf warten :-p

Bin beruflich bissel eingespannt, deswegen geht das nur schleppend vorrand zur Zeit.

Martin Hesse am 02.12.2008 um 14:39
Re: Status!
Beantworten

Wir haben bald die 200 Anrufe zusammen :)

Würde es nicht evtl. Sinn machen den Artikel als kleine Serie zu veröffentlichen. Dann könnte man vielleicht ab kommender Woche jede Woche einen neuen Artikel veröffentlichen.

Fabian Ziegler am 02.12.2008 um 15:30
Re: Status!
Beantworten

Wie genau möchtest du das machen? So jeden "Abschnitt" immer oder wie?

Martin Hesse am 02.12.2008 um 16:01
Re: Status!
Beantworten

Ja einfach als kleine Serie nach dem Muster:

TYPO3 Einstieg - Installation für Windows und Linux
TYPO3 Einstieg - Das Backend
TYPO3 Einstieg - Must-Have-Extension
TYPO3 Einstieg - Die erste eigene Seite

Fabian Ziegler am 02.12.2008 um 17:25
Wow wird ja rießig
Beantworten

Der Artikel wächst und wächst. Kann man schon fast überlegen den Artikel in mehrere Artikel aufzuteilen. Auf jeden Fall top!

Fabian Ziegler am 26.09.2008 um 10:33
Re: Wow wird ja rießig
Beantworten

Danke! Erstmal fertig machen, dann aufteilen :-)

Martin Hesse am 28.09.2008 um 20:49
Titel des Artikels?
Beantworten

Sollte der nicht evtl. angepasst werden? Weil es ist ja kein allgemeiner Artikel mehr über Typo3 sondern ein komplettes Einsteiger-Tutorial.

Fabian Ziegler am 27.08.2008 um 10:52
Re: Titel des Artikels?
Beantworten

Besser? :-)

Martin Hesse am 27.08.2008 um 11:12
Re: Titel des Artikels?
Beantworten

jep. Dann ändere ich mal den Slug, damit es in der URL auch korrekt ist :)

Fabian Ziegler am 27.08.2008 um 15:05
Re: Titel des Artikels?
Beantworten

Hi Martin,

ich schau gerade alle unveröffentlichten Artikel durch? Arbeitest du noch an diesem
Artikel? Wäre schade wenn er verstaubt.

Fabian

Fabian Ziegler am 10.09.2008 um 09:25
Re: Titel des Artikels?
Beantworten

Klar arbeite ich noch dran :-) Ist nur nicht immer einfach Zeit dafür zu finden und auch die richtigen Worte zu finden, da tu ich mich immer ein wenig schwer aber ich mach das Ding auf jedenfall noch fertig!

Martin Hesse am 10.09.2008 um 09:47