Webfibel

Wissenswertes rund um das Internet & der Webentwicklung

TYPO3 – Der Einstieg – Die Struktur

19. Februar 2015 Martin Hesse 5 Comments

Dieser Artikel ist Bestandteil der Artikelserie „TYPO3 – Der Einsteig„.

In diesem Artikel bauen wir die grundlegende Struktur auf, legen den Seitenbaum an, kümmern uns um benötigte Extensions, sowie externe Frameworks wie Bootstrap und jQuery.

Wir starten also mit unserer frischen TYPO3 6.2 Installation und loggen uns in das Backend ein.

Dort angekommen, stellen wir das TYPO3 erstmal auf deutsch um.

Welcome oder willkommen?

Wir machen das, damit wir mit einer Grundlage arbeiten und ihr vielleicht gewissen Buttons oder Reiter nicht findet, weil diese bei euch anders beschriftet sind. Also gehen wir nun in unserer Navigation unter „Admin Tools“ auf „Language“ und wählen dort „German“ aus.

Wir stellen hier die Sprache auf deutsch

Danach klicken wir auf „Update from repository“ und warten bis auf dem nebenliegenden Fenster (Schritt 5) alle Punkte abgearbeitet wurden sind.

Ist dies geschehen, können wir die Sprache in unseren Einstellungen auf deutsch ändern.

Dazu gehen wir unter „User Tools“ auf den Punkt „User settings“ und wählen dort unter „Personal data“ die Sprache (Language) „German – [German]“ aus.

Hier stellen wir die Sprache vom englischen ins deutsche um

Hier stellen wir die Sprache vom englischen ins deutsche um

Zum Schluss auf die Diskette klicken und das Backend sollte eingedeutscht sein.

Der nächste Schritt ist die Erstellung unseres Seitenbaumes.

Der Seitenbaum

Wir gehen dazu auf das „Seite„-Modul im „Web„-Bereich und klicken auf der Seitenbeschreibung mit einem Rechtsklick und wählen in dem dann sich öffnenden Context-Menü „Neu“ aus.

Wir legen hier die erste Seite in unserem Seitenbaum an

Wir legen hier die erste Seite in unserem Seitenbaum an

Die dann zu wählende Position ist schnell bestimmt und so gehen wir direkt in das Eingabeformular über.

Die erste Seite

Bitte beachte, dass ich die Option „Zweite Optionspalette anzeigen“ immer aktiviert habe. Dies lässt sich unterhalb des Formulars mit einem häkchen aktivieren bzw. deaktivieren.

In dem Formular zur Seitenerstellung hinterlegen wir zunächst erstmal nichts weiter außer dem Seitentitel. In unserem Fall ist dies „Demo #1„.

Wir speichern die Seite mit der Diskette und dem „X“ (Speichern & Schließen) ab und schauen, dass wir im Seitenbaum die Seite „aktiv“ haben. Dies sehen wir daran, das diese farblich hervorgehoben wird.

Mehrere Seiten erzeugen

Ist dies der Fall, klicken wir auf das „Funktionen„-Modul innerhalb des „Web„-Bereichs.

Dort wählen wir im Assistenten „Mehrere Seiten erzeugen“ aus und hinterlegen folgende Struktur:

Dies wird unser zukünftiger Seitenbaum werden

Dies wird unser zukünftiger Seitenbaum werden

Mit einem Klick auf „Seiten anlegen“ müsste sich diese Struktur im Seitenbaum in der Mitte widerspiegeln.

Struktur festigen

Wir müssen nun im Nachgang die Struktur noch ein wenig anpassen bzw. die einzelnen Seiten.

Dazu machen wir einen Rechtsklick auf unsere allererste Seite (in meinem Fall) „Demo #1“ und wählen im Context-Menü „Bearbeiten„.

Im Formular angekommen, stellen wir den „Typ“ unter „Allgemein“ auf „Verweis“ und fügen unter „Verweisziel“ die „Startseite“ hinzu.

Wir ändern hier den Seitentyp und legen eine Verweis auf eine Unterseite fest

Wir ändern hier den Seitentyp und legen eine Verweis auf eine Unterseite fest

Danach wechseln wir den Reiter auf „Ressourcen“ und fügen unter „Allgemeine Datensatzsammlung“ die Seite „System“ hinzu.

Desweiteren weisen wir eine allgemeine Datensatzsammlung zu

Desweiteren weisen wir eine allgemeine Datensatzsammlung zu

Haben wir dies geschafft, können wir die Seite wieder über das Diskettensymbol speichern und schließen.

Wofür die allgemeine Datensatzsammlung?

Kurz zum Hintergrund. Wir wollen auf der Seite bzw auf dem System-Ordner (Sysfolder) „System“ alle Templates und TypoScript-Elemente speichern, quasi als Sammelsurium.

Damit diese dann von den Seiten vernünftig erkannt wird, fügen wir den Ordner auf der obersten Seite als „allgemeine Datensatzsammlung“ hinzu. Das ganze wird dann nach unten hin vererbt und somit stehen die Funktionen, die wir dort bereitstellen, auch den Unterseiten zur Verfügung.

Globale Inhalte

Als nächstes bearbeiten wir die Seite „Globale Inhalte„. Dazu machen wir wieder einen Rechtsklick darauf und wählen „bearbeiten„. Hier gibt es vorerst nicht viel zu tun, außer unter dem Reiter „Zugriff“ die Option „In Menüs verbergen“ zu aktivieren.

Globale Inhalte müssen nicht mit in die Navigation, daher verbergen wir diesen Punkt

Globale Inhalte müssen nicht mit in die Navigation, daher verbergen wir diesen Punkt

Dieser Ordner soll später Inhalte beherbergen, die wir mehrfach einsetzen wollen. Damit diese Seite nicht in der Navigation erscheint, setzen wir diese Option.

Daran denken, das wir wieder das Speichern & Schließen Symbol klicken.

Unser Seitenbaum ist erstmal fertig. Wenn ihr alles so gemacht habt, wie ich es hier beschrieben habe, müsste euer Seitenbaum wie folgt ausschauen

Der fertige Seitenbaum

Der fertige Seitenbaum

Gridelements installieren

Nachdem unser Seitenbaum steht, können wir erstmal die benötigte Extension installieren, die es für uns einfacher macht, mit Grids im Front- und Backend umzugehen. Wir gehen also nun unter „Adminwerkzeuge“ in das Modul „Erweiterungsmanager„, wählen im Dropdown ganz oben „Erweiterungen hinzufügen“ aus und tippen in das Suchfeld „Gridelements“ ein.

Wir installieren hier die benötigte Extension

Wir installieren hier die benötigte Extension

Ihr klickt dann bei der Extension mit dem Schlüssel „gridelements“ auf den Lego-Stein zum installieren. TYPO3 stellt dann fest, dass eine Abhängigkeit zu einer anderen Extension gegeben ist und diese ebenfalls benötigt wird. Wir bestätigen dies mit „Ja“ und fahren mit der Installation fort.

Im besten Fall solltet ihr folgende Meldung erhalten:

Erfolgreiche installation der Extension und deren Abhängigkeiten

Erfolgreiche installation der Extension und deren Abhängigkeiten

Alles gut? Okay weiter – wenn nicht, bitte einfach in den Kommentaren schreiben bei Problemen.

Wow … schon einiges geschafft. Jetzt machen wir erstmal eine Kaffee-Pause. Runter vom Stuhl, bewegen! Die müden Knochen danken es euch 😉 … Endspurt …

 Bootstrap & jQuery einbinden

Der nächste Schritt ist, das wir uns erstmal Bootstrap und jQuery besorgen. Es gäbe hier mehrere Wege das ganze zu implementieren. Wir machen es nun so, dass wir uns die Scripte von den jeweiligen Seiten besorgen, auf unseren FTP laden und dann über TypoScript einbinden werden.

Hier die Quellen für die Scripte:

Das Bootstrap-Archiv können wir entpacken. Die jQuery-Datei können wir direkt so auf den FTP dann hochladen.

Wir öffnen dann unser FTP-Programm und gehen in den unterordner „fileadmin„. Dort erstellen wir folgende Struktur:

  • templates
    • css
    • grids
    • js

Danach laden wir aus dem Bootstrap-Archiv im Unterordner „css“ die Datei „bootstrap.min.css“ in unseren „css„-Ordner und danach, ebenfalls aus dem Bootstrap-Archiv im Unterordner „js“ die Datei „bootstrap.min.js“ in unserem „js„-Ordner.

Die jQuery-Datei (jquery-1.11.2.min.js) können wir in diesem Schritt ebenfalls in unser „template/js/„-Ordner schieben.

Wir müssten dann folgende Struktur haben:

  • templates
    • css
      • bootstrap.min.css (neu)
    • grids
    • js
      • bootstrap.min.js (neu)
      • jquery-1.11.2.min.js (neu)

Passt alles? Super … wir haben den ersten Teil dieser Serie überstanden und haben alle nötigen Vorbereitungen getroffen.

Der nächste Teil der Serie beschäftigt sich mit den ersten Zeilen TypoScript-Code und unserem Seiten-Template, welches wir anlegen wollen. In diesem Template wird dann die Struktur der gesamten Seite definiert. Also freut euch auf mehr!

#6.2#Artikelserie#Aufbau#Bootstrap#jQuery#Seitenbaum#Struktur

Previous Post

Next Post

Hinterlasse einen Kommentar

5 Kommentare auf "TYPO3 – Der Einstieg – Die Struktur"

Benachrichtige mich zu:
avatar
Sortiert nach:   neuste | älteste | beste Bewertung
Matthias Schmutzer
Gast

hallo 🙂

Wenn ich den Punkt Seite „Demo#1“ bearbeiten machen möchte, fehlt bei mir die Option eine allgemeine Datensammlung hinzuzufügen.
Wie mach ich das jetzt am besten?

PS: sehr tolle Erklärung 🙂
LG Matthias

Tom
Gast

Hallo,
auch ich habe wie „Matthias Schmutzer“ das gleiche Problem mit der Datensatzsammlung und wäre über Hilfe dankbar. Das ist ein wirklich sehr sehr gutes Tutorial

Gruss
Tom

wpDiscuz