[Workshop] Typo3-Workshop Teil II - Bedienung und Handhabung

[steffenk]

Schön und gut - wir haben ein funktionierendes Typo3-System, doch was macht man denn jetzt damit ?
Also schauen wir doch mal, was uns das System im Frontend ausgibt.

Jetzt sagen bestimmt einige: Was ist denn das Frontend ? Also will ich die Begrifflichkeit mal klären.

Unser System hat ein Backend (Eingang Hintertür ), das haben wir bei der Installation schon kennengelernt. Das ist der Teil von Typo 3, wo wir als admin oder später die Redakteure die notwendigen Änderungen vornehmen können.
Dieses Backend wird i.d.R. so aufgerufen:
http://localhost/t3workshop/typo3
und dort müssen wir uns anmelden. Im folgenden werde ich Backend immer abgekürzt mit BE angeben.

Das Frontend ist der Teil von Typo3, den der "gemeine" Webbenutzer zu sehen bekommt, also die generierten Seiten von Typo3.
Im folgenden werde ich Frontend immer abgekürzt mit FE angeben.

Wenn wir also das Frontend aufrufen ( http://localhost/t3workshop/ ), gibts bestimmt die ersten langen Gesichter, denn wir bekommen folgendes zu sehen:



Wie, jetzt haben wir so ein grosses System installiert und bekommen nichts zu sehen ?
Richtig

Wir haben also einen Ferrari gekauft und haben kein Benzin.

Jetzt macht es wenig Sinn, einfach wie wild Seiten anzulegen und rumzubasteln, daher wollen wir einige Vorabüberlegungen anstellen, wir brauchen ein Konzept.

Dieses Konzept ist abhängig von der Site, die wir erstellen wollen. Um zeitgemäss zu sein, planen wir eine Umsetzung in CSS.
Machen wir uns eine Skizze, wie die Seite aussehen soll. Ich will erwähnen, das uns das CSS-Design nur sekundär interessiert, hier kann jeder seiner eigenen Inspiration und Gestaltungsfreude folgen, ich gebe hier nur den Rahmen vor.

Bevor wir uns jedoch an das Konzept machen, wollen wir den Umgang mit dem Backend ein wenig vertiefen.

Das Backend-Menü
Schauen wir uns das Menü links doch mal genauer an
Wir haben 6 Sektionen mit jeweils Menüeinträgen. Der Einfachheit halber gebe ich die Menüpunkte immer so an:
Sektion > Menüpunkt.

Der erste Menüpunkt wäre also Web > Seite. Hier die Kurzerklärung der Menüpunkte:

Web > Seite - dies ist die Seitenansicht, der wohl wichtigste Menüpunkt zum Anlegen, Editieren und Einfügen von Seiteninhalten
Web > Anzeigen - hier können wir uns die gewählte Seite im BE anschauen
Web > Liste - dies ist die Datensatzansicht. Wir sehen ausser den Inhaltselementen auch alle Datensätze, die in den angewählten Seiten angelegt sind
Web > Info - wie der Name schon sagt, erstmal unwichtig
Web > Zugriff - hier kann Zugriffsrechte für jede einzelne Seite explizit gesetzt werden, für uns auch erstmal unwichtig
Web > Funktionen - ein paar Tools zum Seitenanlegen und sortieren von Seiten, wird auch nicht sehr häufig gebraucht
Web > Template - Hier geht es um den Aufbau des Templates, das Herzstück der ganzen Site. Dies ist neben Seite für uns der wichtigste punkt

Datei > Dateiliste - ein kleiner Filebrowser zum Anlegen von Ordnern / Files und zum Dateiupload
Datei > Bilder - hier werden die Bilder angezeigt

Dokumente > - leer

Benutzer > Aufgaben - hier ist ein Benutzerzentrum untergebracht, das Messaging, Notizen etc. ermöglicht, kann mit Extensions ausgebaut werden
Benutzer > Einstellungen - hier kann man seine Benutzereinstellungen ändern

Tools > Benutzeradministrator - kein Tool zum Anlegen von Benutzern, aber zum Vergleichen und zum direkten Wechsel zu einem anderen Benutzer
Tools > Ext Manager - Hier geht es um die Extensions, haben wir in der Installation ja schon kennengelernt
Tools > DB Überprüfung - ein paar DB-Tools
Tools > Konfiguration - hier ist die konfoguration nochmals als baum dargestellt
Tools > Installation - die Motorhaube, hier kann man jederzeit das Tuning verändern
Tools > Log - ein Log aller BE-Usr und was sie verändert haben. Hier kann man sich den kompletten Bearbeitungsverlauf der Datensätze anzeigen lassen und auch wieder herstellen
Tools > phpMyAdmin - wer kennt ihn nicht ...

Hilfe > ein paar Dokumentationen ...

Adminfunktionen - Cache leeren - hier kommen wir noch drauf zu sprechen, man kann hier sowohl das BE- wie auch das FE-Cache leeren.

Der Seitenbaum
Die mittlere Spalte unseres Backends besteht aus der Abbildung des Seitenbaums. Ganz oben ist die Weltkugel, eine globale Seite, in der die Backenduser, Sprachen, allgemeine Tabellen etc. gespeichert sind. Wenn wir Seiten anlegen, werden sie unter dieser Weltkugel platziert. Wir werden später mehr davon sehen, wenn wir Seiten angelegt haben

Aktionsseite
Die rechte Spalte ist der Teil, wo wir alle Informationen eingeben etc, also die Inhaltsseite unseres Backends, abhängig vom gewählten Menü und der gewählten Seite. Hier werden i.d.R. die Seiteninhalte angelegt / geändert, Datensätze angelegt etc.

[steffenk]

Das Konzept
Wir planen also eine Site, die folgende Aufteilung haben soll:


Ok, wir brauchen also ein CSS-Design für die Seite, das kann man schonmal parallel machen, also einfach wie gewohnt in einem HTML-Editor eine Seite erstellen, die diesen Aufbau hat. Diese soll nachher Grundlage für unsere Typo3-Site sein. Wir erstellen eine template.html und eine site.css und sehen zu, das es so aussieht wie die obere Aufteilung.
Wir können uns mit dem Template ruhig etwas Zeit lassen, da wir vor der Einbindung erst ein wenig Typoscript kennenlernen wollen.

Das Seitenprinzip von Typo3
Was sind diese Seiten, werden da Files angelegt ?
Nein. In Typo3 ist jede Seite ein Datensatz in der Datenbank. Sie dient als Container und kann beliebige Datensätze aufnehmen. Die wichtigsten Datensätze sind die Inhaltselemente, die dann später angezeigt werden.
Unsere Hauptseiten werden vom Menü benutzt, d.h. für jeden Menüpunkt gibt es eine Seite. Unser Seitenbaum ist also so aufgebaut wie unsere geplante Menüstruktur.
Der Seitentitel wird dann im Menü abgezeigt, daher heissen die Seiten so wie sie im Menü erscheinen sollen, wir brauchen uns hier keine Gedanken über Filenamen, Umlaute etc. zu machen.


Menüplanung
Das entscheidene ist das Menü. Hier planen wir für den Menübereich 1 folgende Menüpunkte:

Startseite, Sitemap, Impressum, Kontakt, Login

und für den linken Menübereich folgende Punkte:

Startseite, Neuigkeiten, Produkte, Über uns, Suche

Es wird also eine Verkaufsseite für irgendein Produkt, hier ist die Fantasie von jedem gefordert, mit welchem Produkt er die Menschheit beglücken will.
Es steht auch jedem frei, die Punkte anders zu benennen, die Kernfunktionen sollten aber enthalten sein.

Was hat jetzt das Menü mit Typo3 zu tun - kann man nicht einfach die Seite in Typo3 entwerfen ?
Jein. Typo3 ist kein HTML-Editor, daher muss das Design vorher durchdacht sein, das wird dann später unser HTML-Template.
Typo3 benutzt die Seiten, um ein Menü darzustellen, d.h. wir legen uns genau die Seiten an, die unserem Menü entsprechen.

Nach diesem Konzept soll der Seitenbaum also so aussehen:

root
--- oberes Menü
--- --- Startseite
--- --- Sitemap
--- --- Impressum
--- --- Kontakt
--- --- Login
--- linkes Menü
--- --- Startseite
--- --- Neuigkeiten
--- --- Produkte
--- --- Über uns
--- --- Suche

Gut, gehen wir ans Werk und erstellen zuerst die Seite root. Diese ist unsere Wurzel des Baumes und soll das Template enthalten, aber keine Inhaltselemente.
Alle Eigenschaften dieser Seite vererben sich im Baum weiter, so das wir hier das Verhalten der kompletten Seite beeinflussen können.

Wie erstellt man denn eine Seite ?
Wir gehen im Menü auf Web > Seite und sehen im Baum unsere Weltkugel. Vielleicht haben es einige schon bemerkt - wenn wir auf das Icon klicken, öffnet sich ein Kontextmenü, ebenso können wir auf den Eintrag mit rechts klicken.
Ahhh - wir sehen einen Menüeintrag "neu", den wir anwählen. Rechts erschein eine Auswahl von möglichen Datensätzen, die wir erstellen können.
Wir wählen den Eintrag mit dem Assistenten, wir sehen zwei mögliche Positionen für die neue Seite. Da wir das erste Element erzeugen, ist es völlig egal, welchen Eintrag wir nehmen, aber wir sehen, das wir hier auch eine beliebige andere Ebene anwählen können.

Haben wir die Position angewählt, erscheint folgendes Formular:


Wir geben bei Seitentitel root ein und speichern die Seite.

Für die weiteren Seiten wollen wir ein praktisches Typo3-Tool kennenlernen.
Wir wählen Web > Funktionen und klicken auf unsere Seite root.
Nebenbei bemerken wir noch folgendes: wenn wie mit der Maus über das Seitenicon von root fahren, wird uns die id der Seite eingeblendet. Diese Information ist an vielen Stellen von Typo3 wichtig, da intern die Seiten über diese id angesprochen werden und nicht über ihren Namen.

Gut, im Aktionsteil des BE sehen wir ein Eingabeformular - Ein Assistent zum Anlegen mehrerer Seiten. Diese werden in der Unterebene von root erzeugt.
Wir brauchen 2: oberes Menü und linkes Menü

Haben wir diese angelegt, so legen wir auf die gleiche Art die Unterseiten für diese beiden Seiten an.

Unser Seitenbaum sollte jetzt so aussehen:

[steffenk]

Unser Grundgerüst steht

Da wir Seiten angelegt haben, wollen wir nur kurz schauen, was es für Seitentypen gibt. Dazu gehen wir links auf Web > Seite , dann auf eine unserer Seiten und wählen "Seitentitel bearbeiten"

Da uns am Anfang alles interessiert, haken wir unten die Checkboxen "Zweite Optionspalette anzeigen" und "Feldbeschreibung anzeigen" an.

Unter Typ schauen wir uns mal die Liste an. Wir brauchen erst mal nur die Typen:

- Standard (normale Seite)
- erweitert (Standard + zusätzliche Felder)
- Shortcut (hier verweisen wir auf eine andere Seite unseres Seitenbaums)
- Sysordner (ein reiner Container für Datensätze wie News, FE-User etc.)

Wir wollen das direkt anwenden.
Unsere seite root soll ja nicht angezeigt werden. Sie dient nur dazu, das Template zu beinhalten. Da sie aber die erste Seite im Seitenbaum ist, wird sie auch angezeigt, wenn wir die index.php ohne parameter aufrufen.
Wir müssen sie also umleiten auf unsere Startseite, und das mit Shortcut.

Jetzt haben wir aber 2 Startseiten. Wir wählen uns eine von beiden, die unsere tatsächliche Startseite enthalten soll, in diesem Fall nehme ich mal die aus dem linken Menü.
Mit der Maus fahre ich über das Icon dieser Seite und sehe, das es die id 13 ist. Ein Aufruf dieser Seite wäre also:
http://localhost/t3workshop/index.php?id=13

Wir leiten root um. Dazu bearbeiten wir den Seitentitel von root und wählen unter Typ Shortcut. Nun klicken wir rechts neben dem Feld "Shortcut zur Seite:" auf den kleinen Ordner und wählen unsere Startseite aus dem Baum im Popupfenster aus. Danach speichern wir die Seite.
Das gleiche machen wir mit der Startseite aus dem oberen Menü.

Gut, wir haben soweit alles zusammen, müssen noch unsere Vorlage basteln und können uns dann der Templateerstellung zuwenden.

Um noch ein wenig Übung mit dem Backend zu bekommen, wählen wir den Filebrowser (Datei > Dateiliste) und erstellen unter fileadmin folgende Ordner:

• templates
• css
• images
• fonts
• scripts

Diese sind später die Ordner für die notwendigen Dateien unserer Site.


Da nicht alle das CSS sofort hinbekommen, habe ich hier ein Basic-Template. Es kann beliebig an eigene Wünsche angepasst werden.
Die template.html (kommt in den Ordner templates)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="../css/site.css" media="screen,projection">
<title></title>

</head>

<body>

<div id="komplett">
	<div id="header">Logo etc</div>
	<div id="menuline">Platz für das obere Menü</div>
	<div id="left">Das ist der linke Menüteil und darunter Platz für News etc.</div>
	<div id="content">Hier kommt unser Inhalt rein</div>
	<div id="footer">etwas Text in der Fußzeile</div>
</div>

</body>
</html>

und die site.css (kommt in den Ordner css)

body {
	text-align:center;
	background:#fff;
}

#komplett {
	margin:30px auto;
	width:788px;
	text-align:left;
}

#header {
	height:70px;
	background: green;
}
#menuline {
	height:18px;
	color: #fff;
	background: blue;;
}
#left {
	width:140px;
	float:left;
	background:#ffffcc;
}
#content {
	float:left;
}
#footer {
	clear:left;
	background:#000;
	color:#fff;
	height:16px;
}

Diese Dateien können auch im Filebrowser angelegt werden und dort bearbeitet werden.

Ok, erst mal genug bis hierhin, die Diskussion kann beginnen


Status der Teilnehmer - Bedienung und Handhabung
- Nele
- Stefan_G [ok]
- Nicolas [ok]
- Danis [ok]
- fettmme [ok]
- DSB [ok]
- miraculix
- lipsum [ok]
- Schneeschaufel
- SonKite [ok]
- steff11 [ok]
- [jacky] [ok]
- heatseeker [ok]
- flo.s [ok]
- andywarhole [ok]
- 321 [ok]
- Asd2003
- schuminator [ok]
- UweB [ok]
- MichaP
- mpenke
- Minnemann [ok]
- max.m [ok]

[spl]

Ok. Soweit bin ich - auch schon vorher gewesen. Habe da schon etwas an einem Buch gearbeitet. Aber das ganze hier ist sehr gut erklärt. Und üben macht den Meister

[steffenk]

Natürlich haben alle andere Stände. Trotzdem werde ich alles gründlich durchgehen.
Für wen das alles schon bekannt ist, der sollte das ruhig nochmal nachvollziehen und Rücksicht auf die nehmen, die das zum ersten Mal machen

[danis`]

Okay, habs geschafft

Hatte mit dem CSS Design paar Probleme,
als ich dann deine vorgefertigten Sachen sah dacht ich mir auch noch: man bist du blöd

[steffenk]

wieso - schaden tuts nicht

[danis`]

yop da haste wohl recht,
langsam aber sicher finde ich mich auch in CSS zurecht

[Nicolas]

OK! Hab alles!

[steff11]

Gut schauts aus. Nur eine Frage bleibt vorab, weiß nicht ab das mit T3 zu tun hat: warum der Aufruf der Startseite in beiden Menüs?

Ja und nochwas: Meyer unterscheidet in seinem "Praxiswissen" zwischen Templates und Designvorlagen. Unsere Template.htm ist eine "Designvorlage", Meyers "Templates" sind die Typoscripot-Sachen, oder?

Mir kommt eine "Veröffentlichung" der neuen Lektionen am Samstag übrigens ziemlich recht.

[steffenk]

Moin Steff,

Zu Deinen Fragen:

Wir haben nur eine "reelle" Startseite, wo später auch die Inhalte rein kommen. Nun haben wir 2 Menüs mit jeweils einem Eintrag "Startseite".
Daher entscheiden wir uns für einen Eintrag und der andere wird nur "verlinkt"

Zusätzlich müssen wir die allererste Seite auf die Startseite "verlinken", da man die Seite ja auch ohne Seitenangabe aufrufen kann. Passiert das, wird die erste Seite im Seitenbaum angezeigt, in unserem Falle "root".
Diese Seite ist aber nicht mit den Inhalten der Startseite gefüllt, sondern hält nur unser Template. Also erreichen wir durch unsere Verlinkung eine Weiterleitung auf unsere tatsächliche Startseite.

Designvorlage oder Template ?
Das ist eine reine Begrifflichkeit. HTML-Dateien mit Markern, die später ersetzt werden, heissen auch Template. Unser späteres Typo3-Template besteht aus Anweisungen, Einbindung der Dateien und Typoscript, auch hier spricht man von Templates.
Sicher ist es besser eine eindeutige Unterscheidung anzubieten, was Robert Meyer mit dem Begriff der Designvorlage versucht hat, allerdings wird man auch bei Extensions mit sogenannten Templates konfrontiert.
Besser ist vielleicht der Ausdruck "HTML-Template"

[steff11]

das mit dem Link von Root auf die Startseite ist plausibel. Aber warum auch im Seitenbaum "oberes Menü" einen Eintrag "Startseite" anlegen, nur um ihn postwendend umzuleiten?

Dank dir für die ausführliche Antwort

[steffenk]

Steff, das ist Geschmackssache, den Link könnte man auch weglassen

[Kafkaesk]

Noch zu Template und Designvorlagen:
Da unterschiedet sich TYPO3 von anderen CM-Systemen und ist eigentlich eindeutig festgelegt:
Templates sind in TYPO3 per Typoscript gesteuerte Vorlagen, in die man u. a. auch Designvorlagen einbindet und steuert. Designvorlagen sind dagegen mit Markern angefüllte (gibt auch andere Möglichkeiten als Marker, bleiben wir aber der Einfachheit halber bei dem Begriff) HTML-Seiten, die später dynamisch über Typoscript angesprochen werden.

[321]

Im FE bekomme ich:

Forbidden
You don't have permission to access / on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


--------------------------------------------------------------------------------

Apache/1.3.33 Server at www.chomondlueg.ch Port 80

Ich habe alles Frühere rausgelöscht und ausser T3 nichts auf dem Server.