Typo3 Kurs Basis Erstinstallation Vom Download bis zum ersten Template
Hessmannstraße 14 58710 Menden www.hoenne-design.de burkard@hoenne-design.de 0152-53 37 67 57 2013 Burkard Balzer Dozent für Typo
Installation von Typo3 Die Zielsetzung, die wir verfolgen, ist es ein Typo3-System neu zu installieren. Für die Installation muss ein Source+Dummy -Paket von der typo3.org downgeloaded sein. Dieses Paket soll in ein Tagesverzeichnis entpackt werden. Hierzu legen wir das Verzeichnis auf htdocs auf dem xampp an. Dann öffnen wir aus dem Downloadverzeichnis unser source-dummy-paket durch doppelklicken solange, bis wir das Verzeichnis fileadmin erkennen können. 4
Der gesamte Inhalt wird dann per Drag and Drop in das Tagesverzeichnis gezogen. Dort entpackt er sich dann automatisch. Nach dem Entpacken sollte der Inhalt des Ordners wie folgt aussehen: Jetzt sind die Voraussetzungen geschaffen, um mit der Installation zu beginnen. Die Installation wird durch den Internetbrowser und den Aufruf des Verzeichnisses gestartet. Wir rufen localhost/verzeichnis auf. Damit beginnt die Installation. 5
Die erste Hürde, die wir nehmen müssen, ist, das Setzen der Sicherheitsdatei ENABLE_INSTALL_TOOL in das Verzeichnis typoconf. Die Typo3-Entwickler haben diese Hürde gesetzt, damit im WWW nur die Leute, die Zugriff auf den Folder typo3conf haben, auch Dateien schreiben können. Ein Hacker hat keine Schreibrechte und kann hier keine Datei platzieren. Ich benutze in diesem Fall die, Copy and Paste - Methode. Mit Strg+C und Strg+V kann ich ganz unproblematisch den Dateinamen setzen. 6
Hierzu legen wir nun im Verzeichnis htdocs/tagxx/typo3conf/ eine Textdatei an. Diese Datei erhält den kopierten Text ENABLE_INSTALL_TOOL. die Endung.txt wird gelöscht und durch klicken in den freien Bereich wird der Name festgeschrieben. Zwar wehrt sich Windows dagegen, da es die Datei nicht mehr zuordnen kann. Dieses können wir aber ohne Sorge bestätigen, denn wir genau eine solche Datei haben. 7
Die Hürde ist genommen und wir können unser System installieren. Die Installation wird durch einen 1,2,3-Assistenten begleitet. Der erste Schritt ist die Bestätigung des Beginns -> Continue 8
Somit wird die Zugangsoptionen für den Zugang zur Datenbank gestartet. Bei der lokalen Installation sind die Zugangsdaten standardisiert. Der Username ist root, das Password ist leer, der Host ist localhost. Nach den Eingaben bestätigen wir wieder mit Continue Punkt zwei ist die Namensgebung der Datenbank. Bei der lokalen Bearbeitung macht es Sinn den Verzeichnisnamen und Datenbanknamen gleich zu halten. Gerade in der Entwicklungsphase probiert man mehr aus und hat erstellt mehre Installationen. Ein gleiche Namensvergabe erleichtert dann die Zuordnung. Im WWW wird der Datenbankname oft vorgegeben und wird dann übernommen ( die zweite Auswahl). 9
Der letzte Schritt ist die endgültige Bestätigung der Erstellung mit den eingestellten Parametern. 10
Congratulations! Herzlichen Glückwunsch! Die Installation ist erfolgreich gewesen. Nun können wir uns um unsere individuelle Configuration kümmern. Die individuelle Configuration beinhaltet. 11
Der erste Menüpunkt, den wir benutzen ist Basic Configuration. Hierüber werden die Basisparameter eingestellt. Kritische Parameter werden in einem gelben oder roten Kasten dargestellt. Optimale Einstellungen erhalten die grüne Farbe. In der Hauptsache sollten nur wenig Einstellungsänderungen nötig sein. So sollte man überprüfen, ob ein Image-Tool GraphicMagick oder ImageMagick gefunden wurden. Desweitereren ist eine Bildformarteinstellung auf PNG von Vorteil (neueres Bildformat ohne lizenzrechtlichen Hintergrund). Das wären die zu ändernden Einstellungen und wir können über den Button Update configration die neuen Parameter speichern. 12
Nach erfolgreicher Speicherung bekommen wir die Bestätigung, dass alle Daten in die Configuration geschrieben worden sind. Der unterhalb angezeigte Link Click to continue ruft wieder die Basic Configuration auf. Das war es schon. Jetzt sind wir individuell. Neben den bereits erwähnten Parametern sind auch einige nicht gezeigte Parameter festgeschrieben worden. In weiteren Turorial werden wir dann genauer auf die Einstellungen eingehen und dann, weitere notwendige Änderungen durchführen. Für heute sollte diese Änderungen ein Arbeiten in dem Backenend ermöglichen. Der Link ins Backend ist ein wenig versteckt und wird unterhalb des Menüs angezeigt. 13
Bevor wir in das Backend eintreten können müssen wir uns einloggen. Hierfür geben wir Username admin und als Passwort password ein (bitte auf Kleinschreibung achten). 14
15
Die erste Sicht auf das Backend zeigt uns die drei Hauptbereiche Modul-, Struktur- und Arbeitsbereich. Standardmäßig wird Typo3 in der englischen Sprache ausgeliefert. Das hat zur Folge, dass das Typo3 zwar eine relativ geringes Datenvolumen besitzt (schnellere Webbearbeitung), aber auch, die Konsequenz, dass wir das System nachträglich mit einem deutschen Sprachpaket ausstatten müssen. Über das Modul Language verzweigen wir im Arbeitsbereich auf die Auswahlmöglichkeiten einer alternativen Backendsprache. 16
Nach dem Bestätigen der Auswahl und Starten des Downloads verzweigt Typo3 auf die WWW- Site von typo3.org und lädt dann zu allen installierten Modulen die passenden Sprachpakete. Diese Sprachpakete werden als zip-datei übertragen, dann entpackt und in das Verzeichnis typo3conf geschrieben. Was wir nun erhalten haben sind alternative XML-Sprachdateien. 17
Wenn alle Updates vollzogen sind, kann unser User admin sein Lieblingssprache also deutsch auswählen. Dieses geschieht mit dem Modul Usersettings und auf dem ersten Reiten personal Data. In dem untersten Feld ist eine Sprachenauswahl der zur Verfügung stehenden Sprachen aufgelistet. In unserem Fall sind das Englisch und Deutsch. Nach der Auswahl muss noch gespeichert werden. Die kompletten Veränderungen kann man dann nach dem Neuladen durch F5 erkennen. Hinweis! Die Spracheinstellungen gelten nur für den einzelnen User. Jeder User kann seine Sprache wählen. 18
Backend in deutscher Sprache 19
Die Arbeitsumgebung ist nun soweit eingerichtet, um mit der Konfiguration zu beginnen. Für die Darstellung im Frontend benötigen wir eine TypoScript-Umgebung. Diese wird in einem Template auf der Home-Seite (root-seite) hinterlegt. Die Home-Seite dient nur zur Konfigurationsaufnahme und wird keine Inhalte bekommen. Im Arbeitsbereich finden wir die Möglichkeiten unsere Typoskript-Konfiguration einzutragen. Hierfür öffnen wir über die Auswahl Info/Bearbeiten den Template-Informationen-Bereich und wählen über das Bleistiftsymbol vor Setup den TS-Editor aus. 20
Im Setup wird der Seitenaufbau festgelegt. Dieser muss unbedingt eine Zuweisung eines PAGE-Objekts haben. Ist dies nicht der Fall wird im Frontend eine Fehlermeldung angezeigt. Das unten gezeigte Beispiel beruht auf dem nachfolgenden Designtemplate. Die Trennung zwischen dem HTML-Design-Template und dem Typoscript-Konfigurationstemplate ermöglicht es uns, durch die Konfiguration flexible Inhalte in ein komplette HTML-Umgebung zu integrieren. Das Beispiel, das wir sehen beruht auf einem Template der Seite www.freecsstemplate.org. Das Design-Template, das ich ausgewählt habe heißt emerald2 21
Nach dem Speichern der Dateien im Verzeichnis Download, erhalten wir in der zip-datei ein Design-Template, das als Basis für unsere Ausgabe im FE dient. Um es Typo3 zuzuführen, erstellen wir im Tagesverzeichnis im Ordern fileadmin einen Unterordner templates. In diesen Ordner entpacken wir dann unser Designtemplate. Die so verfügbar gemachten Dateien können nun von Typo3 angesprochen und eingebunden werden. Für diesen Zugriff bedienen wir uns nun TS. Folgende Code-Zeilen werden eingesetzt: # Erzeugen einer PAGE-Instanz, damit unsere Seite aufgebaut werden kann. Über Page werden allen weiteren Eigenschaften eingebunden page = PAGE 22
# das Stylesheet im head-bereich einbinden page.stylesheet = fileadmin/templates/style.css # Das Objekt TEMPLATE zuweisen, damit ein Template eingebunden werden kann und über die Eigenschaften von TEMPLATE gesteuert werden kann page.10 = TEMPLATE #auf die Eigenschafte template das Objekt FILE übertragen damit eine externe Datei eingebunden werden kann. page.10.template = FILE #die externe Datei index.html übertragen. page.10.template.file = fileadmin/templates/index.html Nach diesen TS-Scriptzeilen sollte das komplette HTML-Document eingebunden sein und durch das CSS das gleiche Aussehen, wie das Original bekommen. Der Unterschied wird im Quellcode sichtbar. Hier ist ein doppelter head- und body-bereich vorhanden. Um dieses HTML-nichtkonforme Verhalten abzustellen, muss der Bereich der index.html, der bearbeitet werden soll festgelegt werden soll für Typo3 erkennbar werden. Dieses geschieht über Subparts. Subparts sind Elemente, die in das HTML eingefügt erden, und die Bereich umschließen, die von T3 ausgelesen werden sollen. Hierbei ist es wichtig, dass sie in Auskommentierungszeichen stehen. Wie bekommen wir nun heraus, wo wir diese Subparts setzen müssen. Wie wir im Seitenquelltext gesehen haben, setzt das PAGE-Objekt eine komplette HTML- bis einschl. des body-tags. Somit müssen wir aus der index.html nur den Bereich wählen, der für die Containerstruktur der Inhalte verantwortlich ist. Dieser liegt innerhalb der body-elemente. Wenn nun der Bereich festgelegt worden ist, werden in diesem Bereich die Elemente hinterlegt, die als Platzhalter für die Typo3-Inhalte-Übertragung dienen; die MARKER. Marker werden genau wie Subparts mit einleitenden und abschließenden Rauten für T3 sichtbar gemacht. Die Standardmarker, die fast in jedem T3-System zu finden sind, setzen sich aus dem MENU, dem CON- TENT und dem SIDEBAR zusammen. Dies ist jedoch nur ein Standard und darf natürlich auch verändert und erweitert werden. 23
Es ist nun an der Zeit die HTML-Umgebung von unnötigen Blindinhalten zu befreien. Wir wollen ja im Frontend nur unsere Inhalte sehen. Die bereinigte HTML-Umgebung sollte dann wie folgt aussehen. 24
Nachdem wir im HTML-die Voraussetzungen für eine Übernahme der Inhalte durch Marker geschaffen haben, müssen wir entsprechende TS-Elemente hinterlegen. Wir wechseln wieder in den TS-Editor und ergänzen unser Typoscript durch folgende Elemente. #Arbeitsbereich festlegen (subparts). page.10.workonsubpart = DOCUMENT #Markerinhalte zuweisen page.10.marks.content < styles.content.get page.10.marks.sidebar < styles.content.getright Der Marker menu wird zu einem späteren Zeitpunkt eingebunden. HTML und unser Template sind jetzt in unserer neuen Umgebung eingepasst. Was fehlt ist die Aufbereitung der Inhalte für das Frontend. Dafür brauchen wie ein statisches Template aus Erweiterungen, das wir wie folgt einbinden können. 25
Unter dem Reiter Enthält sind die Einbindungsoption für zusätzlich Templates hinterlegt. Die Templates, die man einbinden kann unterscheiden sich in der Herkunft von einander. Statische Templates aus Erweiterungen stammen aus den internen bzw. externen Erweiterungen, die T3 vorhanden sind. Basis-Templates sind die Templates, die wir in, außerhalb der Seitenstreukur liegenden, Ordnern wiederfinden. Unsere Wahl fällt auf das CSS Styled Content-Template. Dieses beinhaltet mehrere Tausend Zeilen Typoscript und hat die Aufgabe die Inhaltselemente, die ein Redakteur im BE angelegt hat für das FE aufzubereiten. Eine Übertragung erfolgt dann später über die Zuweisung von styles.content.get. 26
Alle Konfigurationseinstellung zu Zeigen der ersten Inhalte sind vorhanden. Was uns noch fehlt, sind ein paar Seiten und auf diesen Seiteninhaltselemente. Es gibt relativ viele Möglichkeiten in T3 Seiten anzulegen. Eine der effizientesten ist das Modul Funktionen. Mit der Aktivierung der Oberseite lassen sich in einer Listenform mehrere Seiten auf einmal anlegen. 27
Die angelegte Seitenstruktur ermöglicht es die Vererbung des Home-Root-Templates auf alle Unterseiten auszudehnen. Entsprechend ist die Konfiguration auf allen Seiten wirksam. Um eine bessere Trennung zwischen der Konfiguration und den FE-Seiten zu erhalten, wird über Seiteneigenschaften ein neuer Seitentyp für die Home-Seite eingerichtet. Der Verweis, den wir auswählen, leitet bei einem Aufruf der Seite Home mit dem Verweismodus auf die Erste Unterseite der aktuellen Seite. Es wird in unserem Fall Start angezeigt. Somit es die Darstellung von Inhalten nur noch unterhalb der Home-Seite möglich. Dieses hat den Vorteil, dass die Home-Seite nur noch für die Konfiguration wirksam ist und die komplette Seitenstruktur erst ab der ersten Unterseite greift. 28
Ferner erhalten wir in der Seitenstruktur neben des Verweisicons eine Erde-Dartstellung, die uns zeigt, dass das der Anfang unser Website ist. In unserem Fall hat dieses aber noch keine Relevanz. Wenn wir aber mit mehreren Domäns in eine Seitenstruktur arbeiten wollen, ist die Einstellung wichtig. 29
Die Vorbereitungen zu einer Ausgabe von Seiteninhalten für das FE sind abgeschlossen. Jetzt können wir mit dem Testen beginnen. Hierzu legen wir auf der Start-Seite erste Inhaltselemente an. Diese positionieren wir in der Normal- und in der Rechtsspalte. Diese Spalte werden im Standard mit den Ausgabebefehlen styles.content.get und styles.content.getright für das FE angesprochen (siehe TScript). Das Anlegen eines Seiteninhaltselements erfolgt über das Clicken des Datensatzsymbols (Taschenrechner mit grünem Punkt) jeweils in der entsprechenden Spalte. Es öffnet sich ein Auswahlfenster aus dem wir unser Seiteninhaltselement auswählen können. Die Gruppierung erfolgt über Reiter, die in die typischen Inhaltselemente Typischer Seiteninhalt -> Redakteure, Die speziellen Elemente -> Verknüpfungen und besondere Outputs, die Auf Funktionen beruhen, Formulare und zum Schluss die Plug-Ins, die durch Erweiterungen spezielle Elemente liefern. Unsere Auswahl soll ein Text-Element sein. 30
Das Textelement dient in der Hauptsache zum Erfassen von Texteinhalten. Eine genauere Einführung erfolgt später. Zu Testzwecken erzeugen wir eine Überschrift und ein wenig Text. 31
Nachdem wir auch für die Sidebar ein Element angelegt haben, ist der redaktionelle Teil erledigt. Es sollten nun im FE zu sehen sein. 32
Was uns jetzt noch fehlt ist eine Menüsteuerung. Unsere Index.html, die wir nutzen, beinhaltet zwar schon einen Marker ###MENU###. Aber dieser wird noch nicht über das Typoscript angesprochen. Wir könnten natürlich auch unser Menüscript in unserem Root-Template platzieren. Der Nachteil ist der, dass wir, wenn wir das auch mit allen anderen Scripts machen, der Scriptbereich ein wenig unübersichtlich wird. Um das zu vermeiden bedienen wir uns eines Ordners, den wir außerhalb der FE-SiteStruktur auf gleiche Hirachiestufe wie Home platzieren. Der neu angelegte Ordner muss dann aktiviert werden. Über das Modul Template kann nun ein Erweiterungstemplate angelegt werden (unterer längerer Button). Das Erweiterungstemplate ergänzt das Root-Template und wird nach der Fertigstellung in dem Root-Template eingebunden. 33
Die Einbindung eines zusätzlichen Templates und dessen Erstellung erfolgt in der gleichen Form, wie die Erstellung eines root-templates. Die Eingabeoption sind die Selben. Im Info/Bearbeiten - Bereich kann auch im Setup das TS eingegeben werden. Zuvor vergeben wir aber einen eindeutigen Name, damit wir bei der späteren Zuordnung keine Probleme bekommen. (Bitte das Zwischenspeichern nicht vergessen!) 34
Über Setup geben wir dann unser TS für das Menü ein. #Zuordnung der Instanz - lib steht für library und leitet kleinere Funktionsscripte zur späteren Einbindung ein. HMENU ist das hierarchische Menu- Objekt. lib.menu = HMENU lib.menu { #die Zuordnung der Menüstruktur erfolgt über Ebenen. Der Ausgangspunkt ist home. Die Ebene 1 sind die Unterseiten von home. TMENU symbolisiert ein Textmenü 1 = TMENU 1 { #die HTML - Struktur wird über einen wrap-aufbau erzeugt, wobei der wrapitemandsub liefert eine Komplettumgebung, die nicht nur die Menüpunkte ausliest, sondern einen kompletten Anker-Tag mit Link mit evtl. Untermenüpunkten erzeugt. NO steht für den Normalzustand eines Menü und muss im Gegensatz zum CUR nicht aktiviert werden. wrap = <ul> </ul> NO.wrapItemAndSub = <li> </li> # um abweichende Menüzustände zu bedienen z.b current, haben wird die Möglichkeit classen zu vergeben. CUR = 1 CUR.wrapItemAndSub = <li class= current_page_item > </li> } } 35
Nachdem wir unser Menü-Script in unserem Erweiterungstemplate gespeichert haben, binden wir das Erweiterungstemplate in dem root-template ein. Wir gehen auf den Vollständigen Template-Datensatz bearbeiten und dann auf den Reiter Enthält. Dort haben wir dann die Möglichkeit unter Basistemplate einbinden unsere eigenen Erweiterungstemplates einzubinden. Nach dem Speichern und dem Anzeigen der Seite Start sollte das FE wie folgt aussehen. 36
Evtl. fehlende Bilder können durch Anpassungen in der index.html an die neue Typo3-Umgebung und deren externes Verzeichnis fileadmin oder durch Leeren des Caches in FE geleert werden. 37
38
39