blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Erstellen einer einfachen Extension

In dem Buch “TYPO3 Praxiswissen” zeigt Robert Meyer wie man eine einfache Extension zur Verwaltung von Mitgliedern erstellen kann. Allerdings werden die wirklich interessanten und auch wichtigen Sachen wie Mehrsprachigkeit oder wie man das Feld Ausgangspunkt nutzt leider nicht gezeigt.

Anhand seines Tutorials habe ich (auch) eine kleine Extension erstellt und will hier mal zeigen wie ich es umgesetzt habe. Klein ist in diesem Fall auch absolut nicht untertrieben, denn man kann gerade mal ein Bild, einen Namen und einen Text über den RTE anlegen. Die Extension ist aber auch für mehrsprachige Seiten nutzbar und auch das Feld Ausgangspunkt kann verwendet werden.

Step 1 - Kickstart

Selbstvertändlich habe ich den Extension Kickstarter verwendet um die grobe Struktur der Extension erstellen zu lassen. Also ab in den Extension Kickstarter. Dort legen wir erstmal einen Extension Key an und geben dem Kind damit einen Namen. Soll eine Extension später auch im Repository veröffentlich werden, so darf dieser Name natürlich nicht schon von einer anderen Extension verwendet werden. Ob der gewählte Name schon in Verwendung ist kann man durch klicken auf den Link “Make sure to enter the right extension key from the beginning here! You can register one here.” überprüfen lassen. In diesem Fall hier spielt es erstmal keine Rolle da diese Extension nie veröffentlicht wird.

Step 2 - Allgemeine Info

Unter General info geben wir allgemeine Informationen zur Extension an. Es wird ein Titel angelegt (Exo Members), eine Beschreibung (little tool to administrate members), die Kategorie (Frontend Plugins), der Status (in diesem Fall definitiv alpha), Abhängigkeiten (hier kann man die Extension angeben ohne welche unsere Extension nicht laufen würde, ich habe hier cms angegeben), dann noch den eigenen Namen und eventuell auch die eigene Emailadresse. Diese Daten kann man später dann im Extension Manager oder aber auch sollte sie veröffentlich werden in der Liste der Extensions im Online Repository wieder finden:

Diese General infos sollten in englisch verfasst werden. Es gibt auch gar keine Möglichkeit diese Daten in mehreren Sprachen anzulegen. Das spielt für dieses Besipiel eigentlich aber auch keine Rolle.

Unter dem Punkt Setup languages kann man nun aber noch angeben für welche Sprachen man seine Extension erstellen möchte. Für diese Extension habe ich lediglich deutsch angelegt.

Step 2 - Tabelle anlegen

Im nächtens Schritt legen wir die New Database Tables an. Hier sieht man nun auch schon das man für alles einen englischen sowie einen deutsche Text anlegen kann. Für diese Extension benötigen wir nur eine Tabelle mit gerade mal drei Feldern. Eines für den RTE Inhalt, eines für das Bild und ein Feld für die Namen der Mitglieder. TYPO3 hat uns hier schon mit einem Prefix (tx_exomembers_) vorgeschrieben wie diese Tabelle zu heißen hat. Im Gegensatz zu dem vorher angelegten Extension Key wird hier nun aber der Unterstrich zwischen exo und members entfernt. Dies sollte man bei später erfolgenden SQL Abfragen beachten.

Besser scheint man verwendet Extension Keys die nur aus einem Wort bestehen, so wie es mit dem Key exo_members gezeigt wird kann es schon hier und da mal zu Verwirrung kommen wenn man diese Sache nicht beachtet oder eventuell gar nicht bemerkt hat.

Ich habe als Tabellennamen data gewählt und als Tabellentitel Exo Members. Bei folgenden Checkboxen habe ich einen Haken gesetzt: Add “Deleted” field, Add “Hidden” flag, Enabled localization features, Manual ordering of records, Allowed on pages, Add “Save and new” button in forms. Man sollte sich ruhig die Zeit nehmen und sich die Beschreibung der einzelnen Punkte über den (What is this?)-Link aufrufen.

Am Ende der Seite angekommen können wir nun die notwendigen Felder anlegen. Beginnen wir mit dem Feld für den Namen. Das Feld bekommt hier nun auch den Namen name :) und ist vom Typ ein String Input. Nachdem update Klick kann man dann die Eigenschaften der Felder noch genauer spezifizieren, was aber bei diesem Feld nicht notwendig ist.

Das nächste Feld soll die Bilder aufnehmen. Wir nennen es img und als Titel dann Image und Bild, der Typ ist hier files. Updaten. Nun geben wir noch ein paar Parameter an. Das Max filesize allowed erhöhe ich hier auf 1500 und bei Show thumbnails setze ich auch einen Haken.

Das dritte Feld soll einen Beschreibungstext über den RTE aufnehmen und bekommt den Namen descr und ist vom Typ dann ein Text area with RTE. Nach update kann man ruhig mal einen Blick in den Rich Text Editor Mode custom werfen. Dort kann man genau bestimmen welche Sachen alle später im RTE zur Formatierung des Textes zur Verfügung stehen sollen.

Ich habe hier aber nichts verändert und es erstmal bei der Einstellung default/old belassen. Später stellte sich dann aber heraus das man beim einpflegen von Texten im RTE zwar immer Absätze (<p>) mit einem Enter erzeugte, diese dann auch in der HTML Ansicht zu sehen waren aber nach dem speichern nicht in die Datenbank geschrieben wurden. Auf der Webseite hatte man dann also auch keine Absätze mehr und alles wurde in einer Zeile ausgegeben.

Das Problem bestand darin das in der tca.php für den RTE diese Angabe stand: rte_transform[mode=ts] (befindet sich ganz am Ende der Datei). Dies musste man dann aber nur in: rte_transform[mode=css] abändern und die <p> wurden wie gewünscht in die Datenbank geschrieben und auch auf der Webseite dann korrekt mit ausgegeben.

Auf dieser Grafik kann man nochmal sehen was ich alles angelegt habe.

Step 3 - Frontend Plugin

Unter Frontend Plugins müssen wir nun noch angeben das es sich bei der Extension um ein Frontend Plugin handelt. Dazu geben wir lediglich einen Titel auf deutsch und englisch an und setzen anschließend noch bei Add icon to ‘New Content Element’ wizard einen Haken. Das genügt uns und wir können updaten und schon zum nächsten Schritt übergehen.

Step 4 - Resultat

Wir haben nun alles zusammen getragen was wir benötigen, es ist nicht besonders viel und so für Anschauungszwecke damit genau das Richtige. Klicken wir nun auf “View result” erscheint erstmal eine Liste der Dateien die uns der Kickstarter erstellen wird. Durch betätigen des “Write” Buttons werden diese Datein nun wahlweise in das Verzeichnis /typo3/ext (Global) oder /typo3con/ext (Lokal) geschrieben. Es ist für uns vollkommen egal in welchem Verzeichnis sich die Extension befindet. Ich habe es einfach nach Lokal schreiben lassen. Im Anschluss installieren wir unsere Extension dann auch gleich.

Step 5 - Das Plugin einfügen

Das Plugin ist installiert und kann nun auch schon auf einer Seite als Inhaltselement angelegt werden:

Fügen wir es mal auf einer Seite ein und betrachten es im Frontend:

Es wird schon etwas ausgegeben. Natürlich ist es noch nicht das was wir uns von dem Plugin erwarten. Als erstes schauen wir uns mal wo das Ganze überhaupt herkommt an. Dazu begeben wir uns in das Verzeichnis der Extension. Da ich diese Lokal vom Kickstarter Lokal habe installieren lassen, befindet sie sich auf meinem Server in /typo3conf/ext/exo_members. Für die Ausgabe auf der Webseite ist die Datei /typo3conf/ext/exo_members/pi1/class.tx_exomembers_pi1.php verantwortlich. Einfach mal öffnen und schauen was drin steht kann auf jeden Fall nicht schaden.

Was dort nun drin steht wird hier aber auch nicht weiter erläutert, statt dessen verwenden wir einfach gleich diesen Code. Er ist ganz gut kommentiert und sollte nicht all zu schwehr zu verstehen sein. Dann brauchen wir auch noch ein HTML Template für unser Plugin und auch etwas TypoScript Code. Das HTML Template legen wir auch in /pi1 ab, und den Setup und Constants Code legen wir in /pi/static ab.

Step 6 - Das erste Mitglied

Jetzt ist es an der Zeit den ersten Datensatz anzulegen. Dazu legen wir zunächst einen SysFolder an in welchem wir die Mitglieder speichern werden. Für das Plugin auf der Seite müssen wir dann auch noch als Ausgangspunkt diesen Folder angeben. Wird in dem Feld Ausgangspunkt nichts angegeben, müssen sich die anzuzeigenden Datensätze direkt in der Seite in der das Plugin eingefügt wurde befinden. Anschließend legen wir in diesem Folder einen neuen Datensatz “Exo Members” an:

Im Frontend sollte sich dann auch schon der eben angelegte Datensatz zeigen:

Hier ist nun noch die komplette Beispiel Extension zum Download.

Mehrsprachigkeit

Um die Mehrsprachigkeit umzusetzen geht man bei dieser Extension den herkömmlichen Weg. Also als erstes eine neue Websitesprache für das System anlegen und anschließend im Folder der die Mitgieder beinhaltet die Sprache als alternative Seitensprache anlegen. Dann noch in der Listenansicht für diesen Folder den Haken bei Lokalisierungsansicht setzen und schon kann man die Mitglieder in die entsprechende Sprache übersetzen.

Viel Spass beim basteln, mir hat es bis hier schon richtig viel Spass gemacht und hab dabei ja gerade mal an der Oberfläche gekratzt. Bin aber wiedermal auf ein neues absolut begeistert von den Möglichkeiten die TYPO3 bietet. Es bleibt spannend ….

11 Kommentare zu 'Erstellen einer einfachen Extension'

Auf dem Laufenden bleiben per RSS oder TrackBack zu 'Erstellen einer einfachen Extension'.

  1. tapio markula sagt,

    August 11th, 2005 um 5:23 pm

    Wie kann ‘Save and New’ definieren nach dem plugin schaffen.
    I wollte die Funktion zum Beispiel für ’sp_directory’ geshaffen.
    Viele plugin haben diese Function nicht.

  2. Alex sagt,

    August 11th, 2005 um 5:31 pm

    Das kann ich Dir jetzt auch gar nicht ganz genau sagen, denke das es alles in der TCA passieren sollte. Am besten einfach mal ein neues Plugin im Kickstarter erstellen und dort das Feld anlegen, anschliessend vergleiche mal die TCA Dateien.

  3. ralf sagt,

    August 25th, 2005 um 4:02 pm

    Hallo!
    Habe versucht das Beispiel nachzuvollziehen. Leider klappts nicht
    Auch die extension, die fertige , zeigt bei mir nichts an.Ich verwende typo3.8?

    Eine Idee an was es leigen könnte?

    Danke
    ralf

  4. Alex sagt,

    August 26th, 2005 um 11:14 am

    @ralf - hast du die extension auch im template unter include static from extension eingebunden?

    gruß alex

  5. ralf sagt,

    August 26th, 2005 um 3:33 pm

    Das wars, nein hatte ich nicht eingetragen.
    Nun klappts Danke.

  6. sven sagt,

    Oktober 9th, 2005 um 11:04 am

    ein toller artikel, vielen dank.
    werde ich nächste woche gleich mal testen.

  7. Alex sagt,

    Januar 2nd, 2006 um 1:32 am

    Hallo!

    Danke für die coole Anleitung!

    Was mich in dem Zusammenhang noch interessieren würde: gibt es eine Möglichkeit, die “rekursiv”-Einstellung reinzubringen? Sprich: alle Datensätze auf der Seite die als Ausgangspunkt angegeben ist + die aller Unterseite gem. der Angabe in rekursiv (also 1,2,3,4,x level).

    Vielen Dank,
    Alex

  8. Alex sagt,

    Januar 2nd, 2006 um 11:20 am

    @Alex: gute frage, und die sache ist sicherlich auch ganz nützlich, aber ich hab erstmal keine ahnung ob bzw. wie das funktionieren könnte. geht aber bestimmt. denke man muss den query dann nur selber schreiben.

  9. BENCH sagt,

    Oktober 15th, 2006 um 12:38 pm

    Hi,
    Tolle Anleitung!
    Ich habnoch eine Frage: Die einträge werden nach erstellungsdatum sortiert, soviel ich gesehen habe. Kann ich das auch umstellen so das es mir nach Titel resp. nach Name sortiert?

  10. heiner sagt,

    Oktober 16th, 2006 um 5:59 pm

    sssssaubäääää!!!
    irgendwie ist typo ja doch komplex und damit ermüdend, nach langer sucherei was “It seems like there is a backend module in “mod1/conf.php” which is not configured in ext_emconf.php” mir sagen soll und dem installieren von eclipse auf der suche nach einem editor mit completion, so wie von z.b. jbuilder gewohnt, was beides kein brauchbares ergebnis hervobrachte…..also einem langen tag….hat’s mit deiner anleitung wunderbar geklappt!
    ich glaube mein kickstarter hat auch schon mehr features als er im januar gehabt zu haben schien. danke und sei gewiss: in drei minuten gehe ich zufrieden in den feierabend!


  11. Februar 6th, 2008 um 5:59 pm

    Sehr interessates Tutorial,
    hat mir sehr geholfen.
    Danke!
    Grüße A.Jendrysik

Kommentar schreiben:


89,874 Spam-Kommentare
blockiert von
Akismet