TYPO3 – Von der Idee zur Site¶

Voraussetzungen¶

Entweder man bedient sich eines TYPO3-Webhosters oder man installiert TYPO3 samt vorausgesetzter Software selbst auf einem Server.

TYPO3-Webhoster:

• mittwald.de
• jweiland.de

Vorausgesetzte Software:

• Web-Server (z.B. Apache)
• Datenbank (z.B. MySQL, Oracle)
• PHP
• Imagemagick

Installation¶

Nach erfolgreichem Erstellen einer Datenbank werden TYPO3-Source und das Dummy-Package entpackt und in das Document-Root-Verzeichnis des Web-Server kopiert. Es empfiehlt sich, den Ordnernamen des Dummy- Package in den Namen der Homepage zu ändern (in unserem Beispiel typo3demo). Anschließend ruft man das Install-Tool im Webbrowser mit der Adresse http://localhost/typo3demo/install auf.

Abbildung 1: Install-Tool

Nach Eingabe der Datenbankverbindung, Benutzername und Passwort kann man noch die genaue Konfiguration der TYPO3-Installation.

U.A. können folgende Einstellungen angepasst oder kontrolliert werden:

• Datenbankverbindung
• Installation und Verfügbarkeit von Imagemagick
• TrueType-Darstellung
• GDLib
• Lese- und Schreibrechte von Ordnern
• Admin-Benutzer für das Backend erstellen
• Passwort für das Install-Tool ändern
• ...

Erstellen eines HTML-Template¶

Die Aufgabe des Designer ist es, ein funktionierendes HTML-Template zu erstellen mit definierten Bereichen (am besten in div-Tags) für den dynamischen Inhalt der Hompage. Klassische Bereiche sind das Menü und der Hauptinhalt der Seite.

Abbildung 2: Das HTML-Template

In diesem Beispiel

• <div class=“ menu “>

  Bereich für das Menü

• <div class=“ content “>

  Bereich für den Hauptinhalt der Seite

Erzeugen von Seiten und Inhalt¶

Jede Seite im Pagetree wird später als Menüeintrag dargestellt. Der Seiteninhalt wird für die jeweilige Seite im div-Tag mit der Klasse content angezeigt. Eine Seite wird erzeugt, indem man im Page-Modul auf ein Icon des Pagetrees klickt. Im erscheinenden Kontext-Menü wählt man den Eintrag „New“. Ein Wizard begleitet beim Erstellen der Seite. Nun kann in jeder Seite auch schon Seiteninhalt erstellt werden.

Erstellen eines TYPOSCRIPT-Templates¶

Nach erfolgreiches Installation von TYPO3 meldet man sich das erste mal im Backend ein. http://localhost/typo3demo

Abbildung 3: Login im Backend

Abbildung 4: Das Backend

Als erstes muss das HTML-Template in den fileadmin-Ordner von TYPO3 geladen werden, damit das TYPOSCRIPT-Template damit arbeiten kann. Darum legen wir als erstes einen Ordner unter fileadmin an und uploaden alle Dateien des HTML-Templates.

Abbildung 5: Das HTML-Template in TYPO3

Nun muss das TYPOSCRIPT-Template erstellt und bearbeitet werden.

Erstellt wird das Template im Template-Modul. Nach dem Klick auf den Button „Create template for a new site“ kann man dieses auch schon bearbeiten.

Im Setup-Feld des Templates wird nun folgender TYPOSCRIPT-Code geschrieben:

# Auto-Parser-Konfiguration:

plugin {

tx_automaketemplate_pi1 {

# Auslesen des HTML-Template:

content = FILE

content.file = fileadmin/template/template.html

# Hier wird definiert, welche Teil des HTMLs markiert werden

elements {

# um den body-Tag

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY

# um den head-Tag

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

HEAD.rmTagSections = title

# um den ol-tag mit id=“menu“

OL.id.menu = 1

OL.id.menu.subpartMarker = NAVIGATION

# um das div mit class=“content“

DIV.class.content = 1

DIV.class.content.subpartMarker = CONTENT

}

# Pfade mit richtigen Präfix einrichten, wichtig beim Einbinden von CSS oder Grafiken:

relPathPrefix = fileadmin/template/

}

}

temp.menu_1 = HMENU

temp.menu_1.1 = TMENU

temp.menu_1.1 {

# Standardmäßiges Menü-Listenelement

NO.allWrap = <li class="menu-no"> | </li>

NO.stdWrap.htmlSpecialChars = 1

# Aktives Menü-Listenelement

ACT = 1

ACT.allWrap = <li class="menu-act"> | </li>

ACT.stdWrap.htmlSpecialChars = 1

}

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_BODY

subparts.NAVIGATION < temp.menu_1

subparts.CONTENT < styles.content.get

}

temp.headTemplate = TEMPLATE

temp.headTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_HEADER

}

page = PAGE

page {

typeNum = 0

config.doctype = xhtml_trans

10 < temp.mainTemplate

headerData.10 < temp.headTemplate

}

Installation der Extensions¶

Das obige TYPOSCRIPT-Template wird noch nicht funktionieren, da die Extension „automaketemplate“ noch nicht installiert ist, welche sich um das Parsen und Ersetzen von Textpassagen kümmert.

Dazu benützt man das Ext-Manager-Modul und wählt in der DropDown-Liste „Import extensions“. Mit dem Klick auf den „Durchsuchen...“-Button wählt man das zuvor von www.typo3.org/extensions heruntergeladene t3x-File „automaketemplate“. Der Button „Upload extension file“ bringt uns zum nächsten Schritt, dem Installieren der Extension und dem darauffolgenden Updaten der Datenbank.

Nun muss man nur mehr die Extensions in das TYPOSCRIPT-Template einbinden. Das wird durch folgenden Schritte bewerkstelligt:

• Öffnen des TYPOSCRIPT-Templates
• Unter „Include static (from extensions)“ das css_styled_content auswählen

Zur Sicherheit wird der Cache noch geleert und schon wird eine dynamische Homepage angezeigt.

Das Konzept¶

Es gibt 3 Rollen:

• Designer

  entwickelt das Design und erstellt HTML-Template mit vorgesehenen Bereichen für dynamischen Inhalt

• Entwickler

  kümmert sich um TYPO3-Installation, TYPOSCRIPT-Template und evtl. Extensionprogrammierung

• Redakteur

  Erfasst laufend Beiträge und betreut die Website

Ablauf¶

Auftraggeber redet mit Designer über Grafisches und Inhaltliches

Designer redet mit dem Entwickler über Machbarkeit

Evtl. Neuverhandlung mit Kunden über nicht machbare Features

Entwickler schätzt Aufwand

Providersuche und Entscheidung, All-Inklusive Provider oder normaler Provider

Designer erstellt Design, markiert dynamische Inhalte mit DIVs

Entwickler ersetzt mittels AutoMakeTemplate DIVs mit dynamischen Inhalt

Entwickler installiert Extensions

Redakteur bindet Extensions als Content ein, erfasst Datensätze, laufende Betreuung der Website