TYPO3 Tutorial - Der Einstieg - TYPO3 Einführung
Exzellenter ArtikelDiese umfangreiche TYPO3-Einführung zeigt Ihnen Schritt für Schritt die wichtigsten Grundlagen des Cotent-Management-Systems und erläutert Ihnen wie Sie schnell und einfach TYPO3 selbst installieren.
Was ist TYPO3?
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:
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.
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.
Symlinks
Mehrere Projekte mit einer "TYPO3-Installation" hosten
Das Backend von TYPO3
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.
Um die Bereiche Links, Normal, Rechts und Rand dem Template zuzuweisen, bedarf es ein wenig TypoScript.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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:
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:
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:
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:
Weiterführende Webseiten
Offizielle Webseiten
- http://www.typo3.com
Offizielle Homepage und Informationen rund um TYPO3 - http://www.typo3.org
Homepage für alle Entwickler
Communities
- http://www.typo3.net
Community-Forum - http://www.typo3forum.net
Weiteres Forum - http://t3n.yeebase.com/
TYPO3 (Print-)Magazin
Blogs
- http://buzz.typo3.org/
Offizieller TYPO3-Blog - http://www.typo3-blog.com
TYPO3-Blog mit Snippets, Tutorials und Berichte aus der TYPO3 und Web-development-Welt - http://www.typo3blogger.de/
TYPO3 News, Development & Insider Infos - http://www.fi-ausbilden.de/blog/
Interessanter TYPO3-Blog mit ein paar gemischten Themen - http://www.martin-hesse.info
Blog rund um TYPO3 & Webentwicklung
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 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.
Martin Hesse
Thomas H
Moritz Kern
Sebastian Bechtel
gallolu
Fabian Ziegler
Bei mir Fehlt was
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ß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
Die Elemente, die ich grün markiert habe, sind bei mir im Typo3 nicht vorhanden!
hat jemand eine Ahnung warum nicht?
Gruß Chris
FEHLERMELDUNG
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 ! ;)
Mein Fehler?
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"><li class="main_act"><a href="index.php?id=60" onfocus="blurLink(this);" class="main_act">Startseite</a></li><li class="main_no"><a href="index.php?id=61" onfocus="blurLink(this);" class="main_no">Über uns</a></li><li class="main_no"><a href="index.php?id=62" onfocus="blurLink(this);" class="main_no">Referenzen</a></li><li class="main_no"><a href="index.php?id=63" onfocus="blurLink(this);" class="main_no">Kontakt</a></li><li class="main_no"><a href="index.php?id=64" onfocus="blurLink(this);" class="main_no">Impressum</a></li></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
Re: Mein Fehler?
Hallo,
ich hab den selben Fehler, auch die 4er Version.
Kann jemand helfen?
Viele Grüße,
Saskia
ungeeignet für neulinge
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
andere Struktur
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é
Video ??
Hallo lieber Autor,
vielleicht kannst Du mal schreiben, wo Du das Video nun hast?
Ich komme leider auch nicht weiter
Vielen Dank
Simon
Re: Video ??
Hallo,
kannst das Video unter: http://www.martin-hesse.info/typo3/typo3-der-einstieg-teil-3.html finden.
Gruß,
Martin
TemplaVoila Fehler?
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:
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.
Re: TemplaVoila Fehler?
Hi,
du hast wohl zuvor (unbewusst) ein falschen Ordner selektiert und in diesem den Datensatz gespeichert. Ist mir auch schon einmal passiert.
sprache installieren"
Beim installieren der deutschen Sprache kommt bei mir "Could not fetch translation status", weißt du, wie ich das beheben kann?
Re: sprache installieren"
Für Extensions mit dieser Meldung existiert (noch) keine deutsche Übersetzung.
Gruß
Plotz
Video einfügen
Wie bekomme ich ein kleines Video (.swf) in den Artikel?
Re: Video einfügen
Könntest du das Video was in dem Artikel noch fehlt evtl. anders verlinken, ohne das komme ich leider nich weiter?
Re: Video einfügen
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.
Lob!
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 :)
Re: Lob!
Danke! Dein Wunsch sei mir Befehl :-p
Status!
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.
Re: Status!
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.
Re: Status!
Wie genau möchtest du das machen? So jeden "Abschnitt" immer oder wie?
Re: Status!
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
Wow wird ja rießig
Der Artikel wächst und wächst. Kann man schon fast überlegen den Artikel in mehrere Artikel aufzuteilen. Auf jeden Fall top!
Re: Wow wird ja rießig
Danke! Erstmal fertig machen, dann aufteilen :-)
Titel des Artikels?
Sollte der nicht evtl. angepasst werden? Weil es ist ja kein allgemeiner Artikel mehr über Typo3 sondern ein komplettes Einsteiger-Tutorial.
Re: Titel des Artikels?
Besser? :-)
Re: Titel des Artikels?
jep. Dann ändere ich mal den Slug, damit es in der URL auch korrekt ist :)
Re: Titel des Artikels?
Hi Martin,
ich schau gerade alle unveröffentlichten Artikel durch? Arbeitest du noch an diesem
Artikel? Wäre schade wenn er verstaubt.
Fabian
Re: Titel des Artikels?
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!