Eine Website in einer Stunde mit TYPO3 bauenTYPO3 hat den Ruf eines komplizierten CMS. Einerseits zurecht, denn es ist ein...
VorbereitungenBevor man mit diesem Handbuch zu arbeiten beginnt, sollte man folgendes vorbereiten:    •   einen Webserver,...
Erweiterungen laden und installierenFür dieses Projekt benötigen wir die folgenden TYPO3-Erweiterungen: templavoila (in Ab...
Templavoila vorbereitenNach der Installation muss noch eine Einstellung für Templavoila getätigt werden. Es muss in denSei...
Ordner für HTML-Dokumente anlegen und hochladenAls nächster Schritt wird am Server ein Ordner für die HTML-Vorlagen samt C...
Eine Templavoila-Seitenvorlage erstellenNun ist alles vorbereitet um die erste Seitenvorlage zu erstellen. Man wählt dazu ...
Danach werden dynamische Felder für Navigation, Subnavigation, Inhalt usw. angelegt. Also für all dies wasaus der HTML-Vor...
Für Navigationen verwendet man immer den Typ Typoscript-Objektpfad. Nach dem Bestätigen mitHinzufügen wechselt man im link...
Da das HTML-Grundgerüst inkl. HEAD Bereich von TYPO3 generiert wird, fehlt nun die Einbindung vonCSS- und Javascript-Datei...
Die Seitenvorlage zuweisenDie Seitenvolrage ist nun fertig erstellt und gespeichert. Es können auf diesem Weg mehrere Vorl...
Typoscript Template erstellenBisher haben wir nur im Backend gearbeitet. Eine Vorschau im Frontend liefert bisher immer nu...
Mit speichern und beenden (Diskette oben mit X Icon) wird diese Einstellung gespeichert.Klickt man in Folge auf den Bleich...
Navigationen mit Typoscript erstellenMit dem nachfolgenden TypoScript wird die beim Vorlagen-erstellen konfigurierte Haupt...
Inhalte einfügenNun ist es an der Zeit die Website mit Content zu befüllen.Dies geschieht mit dem Modul Seite. Hier wählt ...
Volltextsuche einrichtenDie Volltextsuche indexed_search ist bereits mit an Board und muss nur noch installiert werden. Di...
Diese Seite wird in Folge mit einem Inhaltselement vom Typ Allgemeines Plugin befüllt.Damit die Suche aktiviert wird (gena...
Ein Suchfeld auf allen Seiten.Bisher ist die Suche noch eine eigene (versteckte) Seite. Um ein Suchfeld auf allen Seiten (...
Weitere InformationenWenn Sie mehr über TYPO3 lernen möchten, besuchen Sie unsere Website www.typo3kurse.de. Wir bietenlau...
Nächste SlideShare
Wird geladen in …5
×

Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner

1.773 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.773
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Eine Website in einer Stunde mit TYPO3 bauen, Gernot Ploiner

  1. 1. Eine Website in einer Stunde mit TYPO3 bauenTYPO3 hat den Ruf eines komplizierten CMS. Einerseits zurecht, denn es ist ein sehr mächtiges CMS mitunzähligen Möglichkeiten. Jedoch kann man mit wenigen gezielten Erweiterungen und etwas Know-Howsehr schnell ein Projekt umsetzen. Hier wird gezeigt wie man in einer Stunde eine HTML-Vorlage einbindetund die Website mit Navigation, wartbaren Inhalten und Volltextsuche erstellt.InhaltsverzeichnisEine Website in einer Stunde mit TYPO3 bauen................................................................................................ 1Vorbereitungen.................................................................................................................................................... 2Seiten anlegen.................................................................................................................................................... 2Erweiterungen laden und installieren.................................................................................................................. 3Templavoila vorbereiten...................................................................................................................................... 4Ordner für HTML-Dokumente anlegen und hochladen....................................................................................... 5Eine Templavoila-Seitenvorlage erstellen........................................................................................................... 6Die Seitenvorlage zuweisen.............................................................................................................................. 10Typoscript Template erstellen............................................................................................................................ 11Navigationen mit Typoscript erstellen............................................................................................................... 13Inhalte einfügen................................................................................................................................................. 14Volltextsuche einrichten..................................................................................................................................... 15Ein Suchfeld auf allen Seiten............................................................................................................................ 17Weitere 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
  2. 2. VorbereitungenBevor 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 InstalltoolpasswortesSeiten anlegenZu allererst legt man ein paar Seiten im Seitenbaum an. Dies funktioniert im Modul Seite. Dort kann eineneue Seite über das Kontextmenü oder klick auf das Seitensymbol oberhalb des Seitenbaumes und dannmit Drag&Drop erstellt werden.Man nennt die erste Seite Startseite. Danach legt man eine zweite Seite vom Typ System an und nenntdiese Vorlagen. Weitere Hauptmenüpunkte können nach Belieben unter der Startseite angelegt werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  3. 3. Erweiterungen laden und installierenFür dieses Projekt benötigen wir die folgenden TYPO3-Erweiterungen: templavoila (in Abhängigkeitstatic_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 deneigenen Server geladen. Die Erweiterung indexed_search ist hier ausgenommen. Sie ist eineSystemerweiterung und wurde bereits mit der TYPO3-Installation mitgeliefert.Vor dem ersten Importvorgang muss die aktuelle Extensionliste vom typo3.org Server geladen werden. Diesgeschieht mit dem Icon rechts neben der Selectbox Bibliothek. Das Herunterladen kann ein paar Minutendauern. Danach kann jede benötigte Extension im Suchfeld gesucht und mit dem Icon am Zeilenanfangimportiert werden. In Folge kann die Erweiterung gleich installiert werden. Man braucht lediglich denSchritten des Assistenten folgen. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  4. 4. Templavoila vorbereitenNach der Installation muss noch eine Einstellung für Templavoila getätigt werden. Es muss in denSeiteneigenschaften der Startseite die allgemeine Datensatzsammlung eingestellt werden (die SeiteSystem). 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 AlsAnfang der Website benutzen aktiviert werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  5. 5. Ordner für HTML-Dokumente anlegen und hochladenAls 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 neuenUnterordner mit dem Namen templates angelegt.Danach wählt man diesen Ordner durch anklicken aus und lädt via Kontextmenü die Dateien vom lokalen PCaus hoch. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  6. 6. Eine Templavoila-Seitenvorlage erstellenNun ist alles vorbereitet um die erste Seitenvorlage zu erstellen. Man wählt dazu (immer noch in derDateiliste) über das Kontextmenü den Eintrag Templavoila. Danach erscheint die Maske zum Definieren vondynamischen Feldern. Hiermit werden Bereiche der statischen HTML-Vorlage mit verschiedenstenElementen ersetzt.In dieser Maske wird zuerst der Root-Knoten bestimmt. Dies ist der Bereich der für unsere Seitenvorlageverwendet 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ächeAbbilden und wählt dann in der HTML-Vorschau den sichtbaren BODY-Tag durch Klick darauf aus. In Folgebestimmt 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. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  7. 7. Danach werden dynamische Felder für Navigation, Subnavigation, Inhalt usw. angelegt. Also für all dies wasaus 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 mandas Formular mit Titel und wählt den Elementtyp. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  8. 8. Für Navigationen verwendet man immer den Typ Typoscript-Objektpfad. Nach dem Bestätigen mitHinzufügen wechselt man im linken kleinen Menü auf TypoScript und bestätigt den Vorschlag lib.xxx mitaktualisieren. Dies ist auch dann unbedingt notwendig, wenn der Objektpfad nicht verändert wird! Ansonstenwird 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 platziertwerden soll. Dieses Abbilden funktioniert genau gleich wie beim Root Knoten zuvor. Hier wird allerdings derHTML-Tag, welcher die Navigation umschließt, gewählt.In Folge werden weitere Felder für Subnavigation und Inhaltsbereich angelegt. Für Inhaltsbereiche wähltman die Voreinstellung: Seite – Inhaltselemente [Pos.: 0]Zum Abschluss speichert man die Vorlage mit der Schaltfläche Speichern unter. Mit Titel DS/VO gibt man derVorlage 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 zudiesem Zeitpunkt nur in der Browsersession gespeichert. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  9. 9. Da das HTML-Grundgerüst inkl. HEAD Bereich von TYPO3 generiert wird, fehlt nun die Einbindung vonCSS- und Javascript-Dateien. Dies wird nun nachgeholt. Dazu wechselt man in das Modul Templavoila. ImSeitenbaum wird die Seite Vorlagen gewählt. Nun erscheinen rechts die angelegten Seitenvorlagen (derzeiteine). 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. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  10. 10. Die Seitenvorlage zuweisenDie Seitenvolrage ist nun fertig erstellt und gespeichert. Es können auf diesem Weg mehrere Vorlagen fürverschiedene 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 derStartseite. 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 jenach belieben und ggf. auch auf weiteren Unterseiten Projektspezifisch zu definieren. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  11. 11. Typoscript Template erstellenBisher haben wir nur im Backend gearbeitet. Eine Vorschau im Frontend liefert bisher immer nurFehlermeldungen. 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 nichtwelche 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 imSeitenbaum – in diesem Beispiel ist das die Startseite. Dort wird mit Template für neue Seite erstellen einsogenanntes 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. Dieserwandert nach dem Klick nach links. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  12. 12. 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 dernächste Schritt.Falls die Frontendausgabe nicht funktioniert, kann dies am Cache liegen, der jederzeit Problemlos oben mitdem gelben Blitz-Icon gelöscht werden kann. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  13. 13. Navigationen mit Typoscript erstellenMit 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 wirdnun mit TypoScript befüllt. Eine ausführliche TypoScript-Dokumentation welche diese Zeilen erläutert findetman unter:http://typo3.org/documentation/document-library/ oder deutsch unter: http://www.typo3.net/tsref/Auch die Subnavigation wird ähnlich beschrieben: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  14. 14. Inhalte einfügenNun 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 Folgeklickt 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: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  15. 15. Volltextsuche einrichtenDie Volltextsuche indexed_search ist bereits mit an Board und muss nur noch installiert werden. Dies erledigtman 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. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  16. 16. 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 = 1Nun muss zum indizieren das Frontend (jede einzelne Seite) aufgerufen werden. Dann kann die Sucheschon verwendet werden. WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  17. 17. 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/VOmodifizieren bearbeitet werden.Hier legt man ein neues Feld (field_suche) vom Typ TypoScript-Objektpfad an – genauso wie beim Erstellender Vorlage.Zuletzt wird nochmals das TypoScript erweitert, welches das Formular-HTML ausgibt: WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com
  18. 18. Weitere InformationenWenn Sie mehr über TYPO3 lernen möchten, besuchen Sie unsere Website www.typo3kurse.de. Wir bietenlaufend Kurse in Deutschland, Österreich und in der Schweiz an. Für Einsteiger, TypoScript Neulinge oderTYPO3-Extensionprogrammierer.Unter www.typo3kurse.de/gutschein erhalten Sie bis 23.09.2012 einen EUR 50,00 Gutschein, den Sie bisJahresende 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-Projektenzur Seite – kontaktieren Sie uns über unsere Firmenwebsite www.webprofil.atWir hoffen Ihnen einen guten Einblick in dieses mächtige CMS gegeben zu haben.Vielen Dank für Ihre Aufmerksamkeit.Gernot Ploiner WEBprofil – Gernot Ploiner e.U. Untere Gartenzeile 22/2 | 3492 Etsdorf | Österreich T. ++43 / 2735 / 20 1 95 | office@typo3kurse.com | www.typo3kurse.com

×