T3 Campus T3 Campus

Deine erste TYPO3 Extension programmieren in TYPO3 9

Erstelle deine erste Extension für TYPO3. Das ist kein triviales "Hello World" - Beispiel, sondern wir erstellen ein Frontend Plugin mit 2 Modelobjekten.

Wir nutzen den Extension Builder um die Grundstruktur schnell erstellen zu können. Wir du im vorherigen Schritt in deiner TYPO3 Entwickler Ausbildung gelernt hast, ist der Extension Builder der schnellste Weg zu einer Extension.

Modellierungsansicht im Extension Builder

Im Extension Builder geben wir dann auf der linken Seite zunächst unsere Metadaten ein:

Name Meine erste Extension
Vendor Name Slavlee
Key campus_firstextension
Description Meine erste Extension aus dem T3 Campus.

Danach fügen wir uns als Autor hinzu:

Name Kevin Chileong Lee
Role Developer
Email campus@slavlee.de
Company Slavlee

und zu guter Letzt erstellen wir ein Frontend Plugin:

Name Projektverwaltung
Key project
Description Frontend Plugin zur Projektverwaltung

Damit haben wir die Eingabe aus der linken Spalte fertiggestellt. Wir erstellen jetzt unsere 2 Modelobjekte. Dazu ziehen wir aus dem Feld: New Model Object zwei neue Models heraus und benennen diese wie folgt:

Project und Task als Modelobjekte

Hier können wir auch schon direkt die Relation herstellen. Die Relation stellen wir auf den Typ: 1:n.

Type Einstellung bei einer Relation

Darüberhinaus wollen wir noch folgende Properties, also Eigenschaften hinzufügen:

Project

  • name
    • String
  • description
    • Text

Task

  • name
    • String
  • description
    • Text

Für unsere Models nutzen wir die Defaultactions. Wir wählen hier alle aus:

Default Action im Extension Builder

Das gilt für beide Models.

Als letztes aktivieren wir unter Domain Object Settings in beiden Models die Option: Is aggregate root?.

Aggregate Root Option im Extension Builder

Diese Option bewirkt, dass der Extension Builder eine Repository zu diesen Models erstellt. Die Repository ist notwendig um mit der Datenbank über Models zu kommunizieren. Wir können dann Datensätze erstellen, bearbeiten und löschen. Das schöne dabei ist, dass ist alles über Objekte und deren GET- und SET - Methoden und ohne eine Zeile SQL - Code zu schreiben.

Damit haben wir die Modellierung abgeschlossen und können speichern. Wir erhalten nun unsere Erfolgsmeldung:

Erfolgsmeldung über die Speicherung einer Extension

Damit hat der Extension Builder unsere Extension erstellt, jedoch noch nicht aktiviert.

So schnell hast du deine erste Extension erstellt

Bevor wir unsere erste Extension installieren können, müssen wir noch den Fehler vom Extension Builder korrigieren. Diesen Fehler hast du schon in Schritt 3 deiner TYPO3 Entwickler Ausbildung kennengelernt.

Kritischer Fehler vom Extension Builder in der ext_emconf.php

Wir öffnen also die ext_emconf.php und korrigieren den Fehler.

Jetzt können wir im Modul: Erweiterungen unsere erste TYPO3 Extension sehen:

Deine erste TYPO3 Extensions unter Erweiterungen

Wir klicken auf Aktivieren und installieren die Erweiterung. Nach der Aktivierung steht unsere Erweiterung bereit. Zur Sicherheit leere einmal den TYPO3 System Cache.

Was hat der Extension Builder nun für uns generiert?

1. Wir können das Frontend Plugin setzen

Deine erste Extension in der Pluginliste

2. Jedes Model in TYPO3 lässt sich auch im Listenmodul verwalten

Project und Task über das Listenmodul erstellen

3. Extensionordner und alle notwendigen Dateien

Natürlich haben wir jetzt unseren Extensionordner mit allen notwendigen Ordner und Dateien für die aktuelle Konfiguration. Diese Codebasis ist nicht für den LIVE Einsatz geeignet, jedoch eine perfekte Basis deine Entwicklung zu beginnen. Viele zeitaufwendige Schritte sind hier erledigt und warten auf deine Anpassungen.

Automatisch generierter Extensionordner vom Extension Builder

Und das alles ohne das wir selbst eine Zeile Code schreiben mussten.

Wir platzieren einmal das Plugin auf einer TYPO3 Seite:

Plugin - Element platzieren

Ich persönlich nutze gerne die Angabe: Record Storage Page. Damit kannst du angeben, auf welcher Seite die erstellten Datensätze abgelegt werden sollen. Gleichzeitig wird auch nur auf diesen Seiten nach Datensätzen gesucht.

Record Storage Page Einstellung bei Plugins

Die Frontendausgabe sieht dann so aus:

Die Frontendausgabe meiner ersten Extension nach der Erstellung im Extension Builder

Und das ist die Macht vom Extension Builder. Wir haben noch keine Zeile Code geschrieben und dennoch haben wir eine vollständige Extenion mit Frontendausgabe. Hier können wir schon Projekte anlegen, bearbeiten und löschen.

Eine bessere Anfangsbasis in TYPO3 gibt es nicht

Bevor du Datensätze erstellst und mit der weiteren Entwicklung beginnst, empfehle ich dir noch die folgenden Einstellungen.

Einbindung StaticTS

Dadurch das wir ein Frontend Plugin im Extension Builder definiert haben, hat uns der Extension Builder die Static Files für TypoScript im Ordner: Configuration/TypoScript erstellt und in der ext_tables.php registriert.

Diese Static Files bindest du entweder im Seitenroot oder nur auf der Seite bzw. Seitenbaum ein, wo du die Projektverwaltung brauchst.

Static File Einbindung deiner ersten Extension

Persistence.storagePid

Das mit der Storage PID ist in TYPO3 eine komische Sache. Wie du weisst, ist jedem Inhaltselement in TYPO3 eine TYPO3 Seite zugewiesen. Das bedeutet, das ein Inhaltselement immer auf irgendeiner Seite platziert sein muss und nicht Lose im System existieren kann. Selbst wenn es keiner Seite explizit zugewiesen wird, bekommt es die pid = 0. Das entspricht unserem obersten Knoten im Seitenbaum.

Die Angabe der Storage PID spielt dann auch in jeder Datenbankabfrage und somit auch in der Repository eine Rolle. Man muss die Storage PID im Code nicht explizit angeben, viel mehr wird sie automatisch verarbeitet. Dennoch muss bzw. sollte man diese irgendwo gezielt angeben. Denn in der Regel möchte man Inhaltselemente strukturiert ablegen. Ich empfehle dir für deine Extensions Ordner anzulegen, in denen du diese Datensätze speicherst. Alternativ, bei kleineren Extensions, ist die aktuelle Seite auch ein idealer Ort.

Meine bevorzugte Angabe der Storage PID für Frontend Plugins ist das Frontend Plugininhaltselement. Das haben wir zu Beginn auch schon getan. Wir würden jetzt erwarten, dass dort die Datensätze abgelegt werden. Das ist leider im aktuellen Zustand falsch.

Der Extension Builder erstellt standardmäßig in der Configuration/TypoScript/setup.typoscript die Angabe: persistence.storagePid:

Persistence.storagePid im TypoScript

Auf dieser Weise kann man die storagePid im TypoScript für ein Frontend Plugin setzen. Das hat den Vorteil, dass der TYPO3 Integrator entscheiden kann, welche Seite die richtige ist für die Ablage. Mein Ansatz ist es, dass dies der Redakteur entscheiden sollte.

Das Problem was wir haben ist, das TYPO3 die Storage Page Angabe im Inhaltselement ignoriert, sobald man die Angabe: persistence.storagePid im TypoScript setzt. Selbst dann, wenn es gar keinen Wert hat. In dem Fall wird der Wert: 0 genutzt.

Das bedeutet, das wir die komplette Zeile entfernen müssen. Erst dann greift die Angabe im Inhaltselement. Alternativ kann man sie auch auskommentieren mit einem "#" - Zeichen, wie in der Zeile darunter.

Danach kannst du die Datei speichern.

Wenn du jetzt im Frontend ein neues Projekt anlegst. Dann siehst du es in der Listenansicht.

Liste der Projekte nach dem Anlegen eines Projektes

Du kannst jetzt mit dem Listenmodul im TYPO3 Backend kontrollieren, ob dieser Datensatz korrekt der Seite zugeordnet ist, die du angegeben hast:

Listenmodul auf der Storage Page nach dem Anlegen des Testeintrags

Jetzt ist alles vorbereitet für die Weiterentwicklung. Es muss CSS angepasst werden, eventuell das Fluidtemplate geändert werden und natürlich vieles auf Extbasebasis erweitert werden. Beispielsweise gibt der Extension Builder bei jedem Schreibprozess, bzw. Actionmethode die ein Schreibprozess ausführt, eine Hinweisnachricht aus.

The object was created. Please be aware that this action is publicly accessible unless you implement an access check. See docs.typo3.org

Das soll dich darauf hinweisen, dass momentan keinerlei Rechtekontrolle implementiert ist. Jeder mit Zugriff auf dieser Seite kann Datensätze erstellen, bearbeiten und löschen. In einer Produktivumgebung will man so etwas in der Regel nicht haben. Ein entsprechendes Rechtesystem muss dann du programmieren. Du kannst und sollst dazu natürlich die Frontendbenutzergruppen nutzen. Die Umsetzung kann dir jedoch TYPO3 nicht abnehmen.

Studiere den Code

Ich empfehle dir den erzeugten Code genau zu studieren. Dazu kann ich dir folgende Tipps geben.

Du hast im ersten Schritt deiner Ausbildung als TYPO3 Entwickler kennengelernt, wie TYPO3 ein Request abarbeitet und welche Stationen in einer Extension genommen werden. Diese Reihenfolge empfehle ich dir nun abzuarbeiten. Im folgenden ein paar Beispiele.

Default - Controller und Default - Action

Wenn du die Seite mit dem Inhaltsplugin aufrufst, siehst du bereits die Listenansicht. Anstatt eine solche Anzeige hinzunehmen, frage dich:

  1. Wieso ist das so?
  2. Woher weiß TYPO3, dass er die Listenansicht anzeigen soll?

Es gibt nicht nur Controller und Actionmethode, sondern auch einen Default - Controller und Default - Actionmethode. In der Regel ist dass der erste Controller und die erste Actionmethode die man innerhalb der ext_localconf.php bei der Pluginkonfiguration angibt:

Default - Controller und Default - Actionfunktion in der ext_localconf.php

Vom Controller zur Templatedatei

Du kennst seit dem dem zweiten Schritt deiner TYPO3 Entwickler Ausbildung auf dem T3 Campus das MVC Modell in TYPO3. Gehe einmal ganz konkret dieses durch. Starte beim ProjectController in der listAction - Methode. Schaue dir danach dir relevante Templatedatei an, die im Anschluss ausgeführt beziehungsweise geöffnet wird. 

In der List.html kannst du folgende Dinge entdecken:

  1. Nutzen von Layoutdateien (<f:layout>)
  2. Nutzen von Sections (<f:section>)
  3. Generierung von intern Links um andere Controller und Actionmethoden auszuführen (<f:link.action>)
  4. Einsetzen der Sprachdatei, dass heisst so kannst du deine Extension mehrsprachig machen (<f:translate>)
  5. Nutzung einer for - Schleife ohne PHP Code (<f:for>)

Danach schaue dir die anderen Action - Methoden an die dich zum Eingabeformular und zu der Erstellung, Bearbeitung und Löschung  (CRUD) von Projekten führt.

Fazit

Mit dieser Erweiterung lernst du schon viele Teile von Extbase und Fluid und der Extensionentwicklung in TYPO3 kennen. Mit dem Wissen kannst du bereits viele Erweiterungen für TYPO3 schreiben.

Vielen Dank, dass du diesen doch langen Artikel gelesen hast und ich wünsche dir viel Spaß bei der Weiterentwicklung!

Bereit mehr zu lernen?

Dann komme in meine TYPO3 Onlineschule

Als Mitglied des T3 Campus für TYPO3 Schulungen erhältst du eine einzigartige Lernplattform, um professionelle Webseiten mit TYPO3 zu erstellen. Egal, ob du ein Einsteiger, Umsteiger oder bereits erfahren bist – hier findest du die passenden Lernvideos für dich.

Kevin Chileong Lee

Gründer vom T3 Campus, TYPO3 Experte mit 10+ Jahren Erfahrung, TYPO3 Liebhaber.

Ich helfe dir dabei, deine Projekte in TYPO3 umzusetzen.

Insbesondere für TYPO3 Einsteiger biete ich zahlreiche kostenfreie Tutorials und kostenpflichtige Kurse rund um TYPO3 an.
Damit kannst du in wenigen Tagen auch ohne Vorkenntnisse deine erste TYPO3 Webseite erstellen und Erweiterungen programmieren.

Auf meinem YouTube-Kanal findest du viele praktische Beispiele und Videotutorials als auch allgemein Videos zu diversen TYPO3 Themen.

Neber den TYPO3 Tutorials und Kopiervorlagen, schreibe ich auch Artikel auf meinem Blog über diverse Themen und Fragen, die die meisten TYPO3 Einsteiger, haben.

Falls du ein TYPO3 Coaching suchst, dann stehe ich dir in einer 1:1 Trainingssession zur Verfügung.

Wenn du auf dem Laufenden sein möchtest über meine Projekte, dann abonniere den Newsletter.