mediendesign ag . 2019-07-17 . ...0 youtu.be/kdi2991wsag mediendesign ag . 2019-07-17 . unendliche...

0

youtu.be/kdI2991WSAg

mediendesign AG . 2019-07-17 . www.mediendesign.de

Unendliche Möglichkeiten – Websites mit TYPO3

Von linksIsabelle Rachinger www.mediendesign.de/team/isabelle-rachinger.htmlMarkus Stopfer (Teamleiter Online Marketing) www.mediendesign.de/team/markus-stopfer.htmlAlexander Zitzke www.mediendesign.de/team/alexander-zitzke.html

1




2




3




Je nachdem, wie flexibel und leistungsfähig das jeweilige CMS ist, sind dessen Einsatzmöglichkeiten sehr vielfältig oder eben eher eingeschränkt.

4




Durch die Trennung der Website-Inhalte, also dem Content, vom Layout und damit von der dahinter liegenden Entwicklung, die Üblicherweise auf Grundlage von HTML-Templates und CSS-Stylings erfolgt,ist es auch für Laien ohne Programmierkenntnisse möglich, Websites zu verwalten und zu pflegen.

Bei modernen Systemen wie TYPO3 oder Wordpress ist diese Pflege über eine grafische Benutzeroberfläche möglich und in der Regel kaum komplizierter als der Umgang mit einem Textverarbeitungsprogramm. Dabei spielt es normalerweise auch nur eine untergeordnete Rolle ob es sich bei den verwalteten Inhalten um reinen Text oder komplexere Strukturen wie Tabellen, Slidern, Videomaterial etc. handelt.

Das gilt natürlich nur, wenn das Content-Management-System richtig eingesetzt wird – was leider viel zu oft nicht der Fall ist! Denn es kommt doch relativ häufig vor, dass über das Content Management System kein reiner Inhalt, sondern HTML-Strukturen eingefügt werden um z. B. bestimmte Formatierungen zu realisieren, was zumindest zum Teil den Einsatz des Content Management Systems „ad absurdum“ führt.

5




6




7




In der Praxis kommen innerhalb eines Web-Projekt in der Regel beide Systeme zum Einsatz.

8




9




Bei mediendesign verwenden wir, zusätzlich zu den lokalen Entwicklungsservern und dem Live-System, noch ein sogenanntes Staging-System auf dem neue Entwicklungsschritte unter Live-Bedingungen getestet werden, bevor sie online gehen dürfen.

Für den Betrieb auf lokalen Entwicklungsumgebungen bieten sich Software-Bundles wie z. B. XAMP an, da diese die Installation und Konfiguration des gesamten notwendigen Technologie-Stacks (Apache, MySQL, PHP, usw.) bedeutend erleichtern.

10




11




12




13




14




Betrachtet man ausschließlich die Marktanteile in Deutschland könnte man meinen, alles spricht für Wordpress…Ganz so einfach ist es natürlich nicht. Vor der Entscheidung für ein bestimmtes CMS sollte in jedem Fall sorgfältig abgewogen werden, ob das Wunschsystem auch zum Einsatzweck, z. B. für die Umsetzung einer Unternehmenswebsite, passt.

Ein zu komplexes CMS, macht für eine kleine Web-Visitenkarte ebenso wenig Sinn wie ein sehreinfaches, das aber angesichts der erforderlichen Features und vielleicht auch bezüglich des Seiten-Umfangs bald an seine Grenzen stößt.

15




16




Wie Markus schon angekündigt hat, werde ich kurz erläutern, aus welchen Gründen wir uns für Typo3 entschieden haben.

17




Sicherheitsaspekte, Performance und Skalierbarkeit sind weitere Punkte, die ganz klar für Typo3 sprechen. Durch die große Entwickler‐Community wird Typo3 stetig weiterentwickelt und es werden regelmäßig Updates bereitgestellt, die nicht zuletzt die Sicherheit des Systems gewährleisten.Zudem bietet diese Community verschiedene Diskussions‐Möglichkeiten an.

Zusätzlich zu einer Vielzahl von Foren, gibt es u. A. einen eigenen Slack Channel, in welchem Fragen sehr schnell beantwortet werden. Auch die ausführlichen Dokumentationen zu TYPO3 selbst und den frei verfügbaren Extensionssind in der Regel sehr hilfreich.

Im Bezug auf Zukunftssicherheit stellt Typo3 in regelmäßigen Abständen Informationen bereit.

18




Eine regelmäßig veröffentlichte Timeline zu den verfügbaren Versionen, wie diese hier vom April 2019, zeigt den Entwicklungsstand neuer Versionen. Diese gibt Auskunft, welche TYPO3 Versionen in den nächsten Jahren weiterhin mit Updates versorgt werden. Anhand dieser Informationen, kann entschieden werden, welche TYPO3 Version für das Zukünftige Projekt geeignet ist. Was den direkten Einsatz neuer Typo3 Versionen angeht, halten wir uns zurück, da bestehende Extensions nicht immer direkt für die neue Typo3 Version eingesetzt werden können.

19




Mit TYPO3 können auch mehrere eigenständige Webseiten in einem einzigen System verwaltet werden (Also mit nur einem Login). Diese Webseiten können innerhalb des Systems gleiche oder unterschiedliche Designs und Zugriffsrechte haben und werden innerhalb der Baumstruktur als eigenständige Zweige dargestellt.

Es ist sehr einfach verschiedene detaillierte Benutzerrollen und Gruppen zu erstellen.Dies kann einen Redakteur davor bewahren, aus versehen Änderungen an der Systemkonfiguration vorzunehmen und Ihn, mit für Ihn unnötigen Funktionalitäten, zu überfordern. Der Administrator konfiguriert hier die Rechte so, dass es hier beispielsweise eine Unterscheidung von Backend‐Nutzern gibt, die Beiträge/News erstellen und ändern können, und andere, die die Beitrage/News freigeben. So kann sichergestellt werden, dass keine falschen Informationen auf die Webseite gelangen.

Damit kein Chaos ausbricht, erhält jeder Redakteur einen eigenen Zugang mit den für ihn erforderlichen Rechten. Sollte ein Redakteur an einem Artikel arbeiten und ein zweiter Redakteur planen, im selben Bereich Änderungen vorzunehmen, wird er von TYPO3 durch ein entsprechendes Icon darüber informiert, dass bereits ein anderer Benutzer mit der Bearbeitung begonnen hat.

20




Hier kann man deutlich erkenne, welche Bereiche die jeweiligen User oder Gruppen besitzen. Wenn wir hier den „Redakteur für News“ (rechts) betrachten, hat dieser im Vergleich zum Chefredakteur oder Admin sowohl im Modulbereich als auch im Seitenbaum eine sehr eingeschränkte Auswahl an Funktionalität.

Früher galt T3 als eher sperriger im Umgang für Redakteure – ist heute nicht mehr der Fall! Im Gegenteil, die Content‐Pflege ist mittlerweile sehr viel komfortabler als in vielen anderen CMS. Die Möglichkeit der Rechte‐Vergabe im Backend geht sogar soweit, dass im Prinzip jedes einzelne Eingabefeld freigeschalten werden kann oder eben nicht.

21




Typo3 nimmt aufgrund seiner Vielfalt an Funktionalität und kontinuierlichen Weiter‐Entwicklung eine führende Stellung unter den Enterprise Content Management Systemen ein.

Zusammengefasst ist Typo3 eine optimale Lösung für den professionellen Bereich und ist für fast alle denkbaren Anwendungsfälle die richtige Wahl. Wie der Titel unserer Präsentation sagt: Unendliche Möglichkeiten also!

22




23




24




Im Backend unter Adminwerkzeuge, gibt es den Menüpunkt Erweiterungen. Hier können Extensions einfach installiert, aktiviert und deaktiviert werden. Es gibt auch System-Extensionsgibt, diese gehören technisch zum "Kern„.

25




Während man den Extension Manager meist dafür nutzt eine bestimmte Extension zu installieren, eignet sich das Typo3 Extension Repository vor allem für das Suchen nach der passenden Extension.

26




So findet man z.b unter dem Schlagwort News die gleichnamige Extension „news“. Diese haben wir auch gerne im Einsatz, eben für News-Ticker (Aktuelles-Ticker) – vorher tt_news

27




Eine weiter gängige Extension die wir oft in Projekten nutzen findet man unter „form“ nämlich powermail, eine mächtige Erweiterung für Kontaktformulare.

28




29




Beispiel: Seminaranbieter Akademie Faber Castell.Diese Seminare mussten früher über viele TYPO3-Standart-Inhaltselementen eingepflegt werden.

Übersicht.

30




Detailansicht.

31




Kontaktformular.

Hier muss das Seminar noch einmal ausgewählt werden.

32




Ansicht Backend

33




Die Übersicht muss hier umständlich in einem Rich Text Editor in Tabellenform an der gewünschten Stelle fest eingepflegt werden.

34




Die Detailseite besteht aus einer weiteren Unterseite und diese wieder mit standard-Inhaltselementen gefüllt.

35




Kontaktformular: Hier muss auch noch das Seminar hinzugefügt werden.

Fassen wir zusammen:In der alten Version, also ohne Extension, sind zum anlegen eines einzelnen Seminars mehrere Schritte auf verschiedenen Seiten notwendig (Liste, Detail, Kontaktformular). Wir mussten also die gleichen Informationen mehrfach an verschiedenen Positionen hinzufügen. Das wiederum bedeutet, dass man bei einer kleinen Änderung alle Schritte wiederholen muss – somit fehleranfällig.

36




Mit dem Relaunch der Webseite haben wir sowohl die Usability als auch den Funktionsumfang für den Redakteur und den Website-Besucher verbessert - durch den Einsatz einer maßgeschneiderten Extension.

Neu Übersicht:Suchen und filtern nach Stichwörtern und Themen und das automatische ausblenden abgelaufener Kurse.

37




Neu Detailansicht

38




Neu vorausgefülltes Kontaktformular

39




Backend

Auf der Seminar-Seite ist nur das Frontend-Plugin unserer Extension eingebunden – nichts weiter. Dieses kümmert sich die Erzeugung sowohl der Listen- als auch der Detailansicht.

40




Backend:Im Ordner Ressourcen gibt es einen Ordner Kurse. Die Kurse lassen sich einfach verwalten, sortieren oder einen bestimmten Datensatz suchen, deaktivieren, löschen, bearbeiten oder hinzufügen.

41




Backend:Innerhalb der Extension können die notwendigen Daten über eine komfortabel Maske eingepflegt werden

Hier kann man z.b Kurzbeschreibung für die Listenansicht und die Beschreibung für die Detailansicht, sowie Preis und Dozent pflegenFür den Dozenten kann man einfach per Dropdown einen vorangelegt (einmalig gepflegten) Dozenten auswählen.

42




43




„Model‐View‐Controller“ ‐ Model: ist für Verwaltung und Aufbereitung der Daten zuständig ‐ View: ist für die Darstellung zuständig‐ Controller: ist für die Verarbeitung und Kommunikation zwischen den Komponenten zuständig

Durch diese Trennung sorgt es neben mehr Übersichtlichkeit auch für mehr Skalierbarkeit und Flexibilität.

44




Fluid wird standardmäßig mit Extbase verwendet, kann als Standalone in anderen PHP‐Funktionen verwendet werden und hat seinen eigenes TypoScript Content Object„FLUIDTEMPLATE“

45




46




Bei der Extension-Entwicklung ist es essenziell sich zuerst - nicht zu wenig - Gedanken darüber zu machen, welche Daten gebraucht werden. Mit einem Diagramm kann man sich noch vor der eigentlichen Entwicklung abstimmen wie das Datenmodell aussehen soll.

47




Grundgerüst und somit das Extensionverzeichnis erstellen‐ Dazu wird Im typo3conf/ext/ Verzeichnis ein Ordner mit dem Namen der Extension angelegt- Damit Extbase später automatisch die Dateien finden kann, muss diese vorgegebene Ordnerstruktur eingehalten werden ‐ Dabei auf die richtige Schreibweise achten, die Ordner beginnen alle mit Großbuchstaben‐ Direkt unter den Ordnern befinden sich auch schon ein paar Konfigurationsdateien, damit das Backend einen Einstiegspunkt hat

48




49




Hier stehen die grundsätzlichen Informationen wie Titel, Beschreibung, Autor usw. Die Abhängigkeiten sind hier am wichtigsten, besonders dann, wenn man eine Extension veröffentlichen möchte.

50




51




52




53




54




Mit der "create" Anweisung legt TYPO3, später bei der Installation der Extension, alle Tabellen und Felder in der Datenbank automatisch an.

55




Es gibt allerdings noch viele weiter Systemfelder. Diese Felder sind, bis auf uid und pid, zwar optional, möchte man aber System‐Funktionen wie z. B. die Mehrsprachigkeit verwenden, muss man Felder wie sys_language_uid usw. anlegen.

56




57




Beispiel Modell Kurs: Die Datei heißt wie unser Modell bzw. wie auch der letzte Teil des Tabellennamens, so kann Extbase diese automaisch finden.Hier die Klasse mit definierten Properties aus – Die Annotation ist dabei zwingend erforderlich

58




Für jedes Property wird ein getter und setter benötigt.

59




Für jedes Model muss auch ein Repository angelegt und im Repository Ordner gespeichert werden.Wichtig ist, das der Dateiname auf …Repository endet. Dann klappt es auch mit dem Autoloading.

60




Beispiel: Die Klasse KursRepository muss von Repository abgeleitet werden und erbt von dieser alle wichtigen Methoden wie z. B. findAll(). Diese Klasse kann dann später um weitere Methoden erweitert werden.

61




62




Beispiel: Die Klasse KursController muss die Klasse ActionController von Extbase erweitern.

63




Die Funktion listAction() ruft die Domänenobjekte aus dem injizierten Repository ab, um diese Daten der View zur weiteren Verarbeitung zu übergeben.

64




TCA (Table Configuration Array) ist die zentrale Schnittstelle zwischen Datenbank und TYPO3. Der Dateiname ist der Tabellenname.

65




TCA wird benötigt, um die Tabelle im Backend anzuzeigen und den Tabelleninhalt in ExtbaseModels verfügbar zu machen. Zusätzlich werden hier Tabellenrelation und die Anzeige bzw. Validierung der Felder im Backend definiert.

Ctrl: generelle Anzeigeoptionen im Backend (Titel, Icon, Timesamp usw)Interface: Angaben wie die Tabelle im Backend angezeigt werden sollTypes: Anordnung der Felder innerhalb der Backendformulare (Datensatz bearbeiten)Columns: Für jedes Datenbankfeld werden hier die Eigenschaften festgelegt: Feldtyp, Relationen, Validierung

66




View

Defaults.html ist das Grundgerüst, sozusagen die index.html. Darin werden die Templates geladen. Pro Modell gibt es einen Ordner unter Templates und darunter wird pro Action ein eigenes Template benötigt.

67




List.html mit den vom Controller übergebenen ‚Kurse‘.

68




69




70




Ansprechpartner für Website-Entwicklung und Online Marketing

Markus StopferOnline Marketer, UXQB Certified Professional for User Experience (CPUX-F), Web Development, Typo3, SEO, Google AdWords

[email protected]

71




mediendesign ag . 2019-07-17 . ...0 youtu.be/kdi2991wsag mediendesign ag . 2019-07-17 . unendliche...

Documents