Eine Website in einer Stunde mit TYPO3 bauen

Eine Website in einer Stunde mit TYPO3 bauen

TYPO3 hat den Ruf eines komplizierten CMS. Einerseits zurecht, denn es ist ein sehr mächtiges CMS mit
unzähligen Möglichkeiten. Jedoch kann man mit wenigen gezielten Erweiterungen und etwas Know-How
sehr schnell ein Projekt umsetzen. Hier wird gezeigt wie man in einer Stunde eine HTML-Vorlage einbindet
und die Website mit Navigation, wartbaren Inhalten und Volltextsuche erstellt.

Inhaltsverzeichnis
Eine Website in einer Stunde mit TYPO3 bauen................................................................................................ 1
Vorbereitungen.................................................................................................................................................... 2
Seiten anlegen.................................................................................................................................................... 2
Erweiterungen laden und installieren.................................................................................................................. 3
Templavoila vorbereiten...................................................................................................................................... 4
Ordner für HTML-Dokumente anlegen und hochladen....................................................................................... 5
Eine Templavoila-Seitenvorlage erstellen........................................................................................................... 6
Die Seitenvorlage zuweisen.............................................................................................................................. 10
Typoscript Template erstellen............................................................................................................................ 11
Navigationen mit Typoscript erstellen............................................................................................................... 13
Inhalte einfügen................................................................................................................................................. 14
Volltextsuche einrichten..................................................................................................................................... 15
Ein Suchfeld auf allen Seiten............................................................................................................................ 17
Weitere Informationen....................................................................................................................................... 18

WEBprofil – Gernot Ploiner e.U.
Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich
T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com

Vorbereitungen

Bevor man mit diesem Handbuch zu arbeiten beginnt, sollte man folgendes vorbereiten:
• einen Webserver, idealerweise mit LAMP (Linux, Apache, MySQL, PHP). Genaue
Serveranforderungen finden Sie auf typo3.org.
• TYPO3 fertig installieren und konfigurieren
Alternativ gibt es auf www.mittwald.de ein kostenloses TYPO3 Testhosting für 30 Tage. Dies kann
selbstverständlich auch kostengünstig angemeldet werden.
• Empfehlung: Deutsche Übersetzung für das Backend laden (Einloggen und dann unter
Extensionmanager → Translations), ändern des Admin-Benutzer- und Installtoolpasswortes

Seiten anlegen

Zu allererst legt man ein paar Seiten im Seitenbaum an. Dies funktioniert im Modul Seite. Dort kann eine
neue Seite über das Kontextmenü oder klick auf das Seitensymbol oberhalb des Seitenbaumes und dann
mit Drag&Drop erstellt werden.
Man nennt die erste Seite Startseite. Danach legt man eine zweite Seite vom Typ System an und nennt
diese Vorlagen. Weitere Hauptmenüpunkte können nach Belieben unter der Startseite angelegt werden.


Erweiterungen laden und installieren

Für dieses Projekt benötigen wir die folgenden TYPO3-Erweiterungen: templavoila (in Abhängigkeit
static_info_tables), indexed_search und um einen Bug in Templavoila 1.7.0 zu beheben phpmyadmin.
Die Extensions werden im Modul Erweiterungen und dort im Reiter Erweiterungen importieren auf den
eigenen Server geladen. Die Erweiterung indexed_search ist hier ausgenommen. Sie ist eine
Systemerweiterung und wurde bereits mit der TYPO3-Installation mitgeliefert.
Vor dem ersten Importvorgang muss die aktuelle Extensionliste vom typo3.org Server geladen werden. Dies
geschieht mit dem Icon rechts neben der Selectbox Bibliothek. Das Herunterladen kann ein paar Minuten
dauern. Danach kann jede benötigte Extension im Suchfeld gesucht und mit dem Icon am Zeilenanfang
importiert werden. In Folge kann die Erweiterung gleich installiert werden. Man braucht lediglich den
Schritten des Assistenten folgen.


Templavoila vorbereiten

Nach der Installation muss noch eine Einstellung für Templavoila getätigt werden. Es muss in den
Seiteneigenschaften der Startseite die allgemeine Datensatzsammlung eingestellt werden (die Seite
System). Die erfolgt über das Kontextmenü der Startseite → Bearbeiten.
In Folge wird im Reiter Ressourcen die Seite gewählt. Weiters sollte im Reiter Verhalten die Checkbox Als
Anfang der Website benutzen aktiviert werden.


Ordner für HTML-Dokumente anlegen und hochladen

Als nächster Schritt wird am Server ein Ordner für die HTML-Vorlagen samt CSS- und Bilddateien angelegt.
Dies geschieht in der Dateiliste. Dort wird über das Kontextmenü des Ordners fileadmin ein neuen
Unterordner mit dem Namen templates angelegt.
Danach wählt man diesen Ordner durch anklicken aus und lädt via Kontextmenü die Dateien vom lokalen PC
aus hoch.


Eine Templavoila-Seitenvorlage erstellen

Nun ist alles vorbereitet um die erste Seitenvorlage zu erstellen. Man wählt dazu (immer noch in der
Dateiliste) über das Kontextmenü den Eintrag Templavoila. Danach erscheint die Maske zum Definieren von
dynamischen Feldern. Hiermit werden Bereiche der statischen HTML-Vorlage mit verschiedensten
Elementen ersetzt.

In dieser Maske wird zuerst der Root-Knoten bestimmt. Dies ist der Bereich der für unsere Seitenvorlage
verwendet werden soll. Dies ist in der Regel der Inhalt des BODY-Tag, da das HTML-Gerüst herum (HTML /
HEAD / BODY) von TYPO3 generiert wird. Um dies zu bewerkstelligen, klickt man auf die Schaltfläche
Abbilden und wählt dann in der HTML-Vorschau den sichtbaren BODY-Tag durch Klick darauf aus. In Folge
bestimmt man, ob man den Inhalt des gewählten Tags (INNER), oder das HTML inklusive des Tags
(OUTER) in der Vorlage haben möchte. Mit Festlegen wird dies bestätigt.


Danach werden dynamische Felder für Navigation, Subnavigation, Inhalt usw. angelegt. Also für all dies was
aus der HTML-Vorlage genommen werden soll und vom CMS befüllt werden soll.
Dazu füllt man das Eingabefeld mit einem eindeutigen Namen und bestätigt mit Add. In Folge befüllt man
das Formular mit Titel und wählt den Elementtyp.


Für Navigationen verwendet man immer den Typ Typoscript-Objektpfad. Nach dem Bestätigen mit
Hinzufügen wechselt man im linken kleinen Menü auf TypoScript und bestätigt den Vorschlag lib.xxx mit
aktualisieren. Dies ist auch dann unbedingt notwendig, wenn der Objektpfad nicht verändert wird! Ansonsten
wird der Name nicht gesetzt und es wird keine Ausgabe auf der Website geben (hohe Fehlerquelle !!!)

Mit Abbilden wird nun zum Abschluss der HTML-Bereich in der Vorlage bestimmt, wo die Navigation platziert
werden soll. Dieses Abbilden funktioniert genau gleich wie beim Root Knoten zuvor. Hier wird allerdings der
HTML-Tag, welcher die Navigation umschließt, gewählt.
In Folge werden weitere Felder für Subnavigation und Inhaltsbereich angelegt. Für Inhaltsbereiche wählt
man die Voreinstellung: Seite – Inhaltselemente [Pos.: 0]

Zum Abschluss speichert man die Vorlage mit der Schaltfläche Speichern unter. Mit Titel DS/VO gibt man der
Vorlage einen sprechenden Namen, damit der Redakteur später weiß welche Vorlage er einstellt.
Mit der Schaltfläche DS/VO Erstellen wird die Vorlage endgültig gespeichert.
Achtung: Wird der Browser zuvor geschlossen geht die Arbeit verloren! Die Vorlagenerstellung ist bis zu
diesem Zeitpunkt nur in der Browsersession gespeichert.


Da das HTML-Grundgerüst inkl. HEAD Bereich von TYPO3 generiert wird, fehlt nun die Einbindung von
CSS- und Javascript-Dateien. Dies wird nun nachgeholt. Dazu wechselt man in das Modul Templavoila. Im
Seitenbaum wird die Seite Vorlagen gewählt. Nun erscheinen rechts die angelegten Seitenvorlagen (derzeit
eine). Dort klickt man auf Abbildung aktualisieren.

In Folge kann man alle in der Vorlage existierenden Headerzeilen durch aktivieren der jeweiligen Checkbox
übernehmen. Mit Speichern und Zurück muss dieser Schritt noch bestätigt werden.


Die Seitenvorlage zuweisen

Die Seitenvolrage ist nun fertig erstellt und gespeichert. Es können auf diesem Weg mehrere Vorlagen für
verschiedene Designs oder Bedürfnisse (verschiedene Inhaltsspalten und Strukturen) angelegt werden.
Was nun noch fehlt ist die Zuordnung zum Seitenbaum → Welche Vorlage soll wo verwendet werden.
Dies geschieht in den Seiteneigenschaften einer jeden Seite. Zuerst beginnt man am besten mit der
Startseite. Dort wählt man in den Seiteneigenschaften den Reiter Erscheinungsbild und stellt bei Vorlagen-
Design benutzen und Unterseiten – Vorlagen-Design benutzen die erstellte Vorlage ein. Natürlich ist dies je
nach belieben und ggf. auch auf weiteren Unterseiten Projektspezifisch zu definieren.


Typoscript Template erstellen

Bisher haben wir nur im Backend gearbeitet. Eine Vorschau im Frontend liefert bisher immer nur
Fehlermeldungen. Damit die Ausgabe auch klappt, muss zwingend ein TypoScript Template erstellt werden.
Hier wird definiert was am Frontend ausgegeben werden soll. Ohne dieser Definition weiß TYPO3 nicht
welche Art der vielen Möglichkeiten für die Ausgabe verantwortlich ist.
Dazu wechselt man in das Modul Template. Im Seitenbaum wählt man danach die oberste Seite im
Seitenbaum – in diesem Beispiel ist das die Startseite. Dort wird mit Template für neue Seite erstellen ein
sogenanntes Typoscript Template erstellt.

Wechselt man oben in der Selectbox zu Info/Bearbeiten, muss noch mit Klick auf Vollständigen Template-
Datensatz bearbeiten ein vordefiniertes TypoScript für die Inhaltsausgabe eingebunden werden.

Dazu wählt man im Reiter Enthält in der obersten Selectbox den Eintrag CSS Styled Content aus. Dieser
wandert nach dem Klick nach links.


Mit speichern und beenden (Diskette oben mit X Icon) wird diese Einstellung gespeichert.
Klickt man in Folge auf den Bleichstift neben Setup das Typoscript einsehen und bearbeiten.

Diese 4 Zeilen werden automatisch von der Extension Templavoila eingefügt und sind dafür verantwortlich,
dass Templavoila für die Frontendausgabe konfiguriert ist.
Ab nun kann das Frontend begutachtet werden. Es fehlen aber immer noch die Navigationen. Dies ist der
nächste Schritt.
Falls die Frontendausgabe nicht funktioniert, kann dies am Cache liegen, der jederzeit Problemlos oben mit
dem gelben Blitz-Icon gelöscht werden kann.


Navigationen mit Typoscript erstellen

Mit dem nachfolgenden TypoScript wird die beim Vorlagen-erstellen konfigurierte Hauptnavigation generiert.

Ausgenommen davon sind die ersten 3 Zeilen (config usw). Diese definieren den Doctype mit HTML5.

lib.field_navigation ist der Name der bei der Vorlagenerstellung in Templavoila vergeben wurde. Dieser wird
nun mit TypoScript befüllt. Eine ausführliche TypoScript-Dokumentation welche diese Zeilen erläutert findet
man unter:

http://typo3.org/documentation/document-library/ oder deutsch unter: http://www.typo3.net/tsref/

Auch die Subnavigation wird ähnlich beschrieben:


Inhalte einfügen

Nun ist es an der Zeit die Website mit Content zu befüllen.
Dies geschieht mit dem Modul Seite. Hier wählt man im Seitenbaum die zu befüllende Seite und in Folge
klickt man auf das grüne Icon mit dem Plus-Symbol im Hauptbereich.

Nun kann man aus verschiedenen Elementen wählen (Experimentieren erlaubt ;-)

Ein angelegter Inhalt kann so aussehen:


Volltextsuche einrichten

Die Volltextsuche indexed_search ist bereits mit an Board und muss nur noch installiert werden. Dies erledigt
man unter Erweiterungen im Reiter Verfügbare Erweiterungen.

Nach der Installation ist eine neue Seite im Seitenbaum nötig, auf der das Suchergebnis angezeigt wird.
Diese Seite wird in den Seiteneigenschaften im Menü versteckt angezeigt, damit man sie nicht direkt (leer)
aufrufen kann.


Diese Seite wird in Folge mit einem Inhaltselement vom Typ Allgemeines Plugin befüllt.

Damit die Suche aktiviert wird (genauer gesagt das indizieren), ist eine weiter Typoscript-Zeile erforderlich:
page.config.index_enable = 1

Nun muss zum indizieren das Frontend (jede einzelne Seite) aufgerufen werden. Dann kann die Suche
schon verwendet werden.


Ein Suchfeld auf allen Seiten.

Bisher ist die Suche noch eine eigene (versteckte) Seite. Um ein Suchfeld auf allen Seiten (Menüpunkten)
anzubieten, legt man ein neues Typoscript-Objektpfad Feld in der Seitenvorlage an.
Eine Vorlage kann unter Templavoila → Vorlagen → Abblidung aktualisieren und in Folge DS/VO
modifizieren bearbeitet werden.

Hier legt man ein neues Feld (field_suche) vom Typ TypoScript-Objektpfad an – genauso wie beim Erstellen
der Vorlage.
Zuletzt wird nochmals das TypoScript erweitert, welches das Formular-HTML ausgibt:


Weitere Informationen

Wenn Sie mehr über TYPO3 lernen möchten, besuchen Sie unsere Website www.typo3kurse.de. Wir bieten
laufend Kurse in Deutschland, Österreich und in der Schweiz an. Für Einsteiger, TypoScript Neulinge oder
TYPO3-Extensionprogrammierer.
Unter www.typo3kurse.de/gutschein erhalten Sie bis 23.09.2012 einen EUR 50,00 Gutschein, den Sie bis
Jahresende für alle Kurse bei uns buchen können.
Bei weiteren Fragen stehen wir Ihnen jederzeit zur Verfügung. Gerne stehen wir Ihnen bei TYPO3-Projekten
zur Seite – kontaktieren Sie uns über unsere Firmenwebsite www.webprofil.at

Wir hoffen Ihnen einen guten Einblick in dieses mächtige CMS gegeben zu haben.
Vielen Dank für Ihre Aufmerksamkeit.
Gernot Ploiner


Eine Website in einer Stunde mit TYPO3 bauen

Weitere ähnliche Inhalte

Empfohlen

Eine Website in einer Stunde mit TYPO3 bauen