[Workshop] TYPO3 - Extension Programmierung

  • Teil 1 - Einführung


    Ziel ist es eine ganz einfache Extension zu erstellen. Sie soll uns nur Titel, Datum, einen Text, ein Bild und einen Link ausgeben.
    Sinn ist es, die grundsätzliche Arbeitsweise zu verstehen und die Arbeitsweise von Typo3 nachzuvollziehen.


    Vorbereitung


    Wir installieren folgende Extensions:
    - kickstarter (Wizard für Basisextensions)
    - extdeveval (Offline-Doku und Tools)
    - cc_debug (Debug mit Optionen)


    Der Anfang


    ist in diesem Fall der leichteste :-)
    Für unsere Planung: Wir brauchen eine Tabelle mit den Feldern
    - Datum
    - Text
    - Bild
    - Link


    Die Extension soll tp_test heissen. Normalerweise besorgt man sich einen Useraccount bei typo3.org und kann dann einen Key (der Name der Extension) registrieren, um Eindeutigkeit zu haben. In unserem Fall ist das egal, da wir nicht planen, die Extension zu veröffentlichen.


    Der Kickstarter


    Wir rufen den Kickstarter auf, nur wo?
    etwas versteckt: Wir rufen den Extensionmanager auf, im oberen Menü wählen wir "make new Extension".
    Bei "Enter extension key:" tragen wir unseren key ein (tp_test) und klicken auf "Update ..."
    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb1.jpg]


    Nun kanns losgehen.
    1) Wir klicken auf das + neben General info und tragen ein paar Infos ein, dann wieder auf Update.


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb2.jpg]


    2) Wir legen unsere Tabelle an (+ neben New Database Tables)
    Der Einfachheit halber tragen wir nur Namen, Titel ein und erlauben Datensätze auf normalen Seiten (Allowed on pages)
    Wir scrollen nach unten und legen das erste Feld an (Titel)
    - title (fieldname) = Name des DB-Feldes
    - Titel (field title) = Label des Feldes im Backend
    - String Input (field type) = Typ des Feldes



    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb3.jpg]


    nach update gehts zum nächsten Feld, das Datum
    - date
    - Datum
    - Date


    nun der text
    - text
    - Text
    - Textarea with RTE


    nach update erscheinen zusätzliche Optionen, wir wählen Typical basic setup (new "Bodytext" field based on CSS stylesheets)


    nun das Bild


    - image
    - Bild
    - Files


    nach dem Update checken wir "Show thumbnails"


    nun der Link


    - link
    - Link
    - Link


    update, wir haben die Tabelle fertig.
    Wir scrollen nochmal nach oben und wählen bei "Label-field" unseren Titel an, Update.



    Nun gehts zum letzten Schritt - wir wollen die Extension ja in unsere Seite einfügen können.


    Wir klicken auf das + neben Frontend Plugins, tragen unseren Titel ein, update, fertig.


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb4.jpg]


    Wir speichern unsere Extension: klick auf "View result" => Write to location Write
    (wir können alles voreingestellt lassen)
    Danach wird uns die Option "Install extension" angeboten, die wir wahrnehmen, es wird die Tabelle angezeigt, wir übernehmen mit update (make updates).



    Wie, wars das schon ?
    offensichtlich :) Wir haben eine Extension.


    Na das will ich jetzt aber sehen. Wir suchen uns eine leere Seite, wechseln auf die Listenansicht und klicken auf "neuer Datensatz"
    Ganz unten wird uns "Meine TP-Items" angeboten - Klasse :)


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb5.jpg]


    Wow, nach klick öffnet sich das fertige Eingabeformular


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb6.jpg]


    Vor lauter Begeisterung wollen wir mal einige Datensätze anlegen. Die Ausgabe erfolgt dann in Teil 2.

  • Teil 2 - Die Extension (der eigentliche PHP-Teil)


    Als ertes schauen wir uns mal die erzeugten Dateien an (im Verzeichnis typo3conf/ext/tp_test)


    - doc
    -- wizard_form.dat (für den kickstarter relevant)
    -- wizard_form.html (für den kickstarter relevant)
    - pi1 (das ist unsere Extensionklasse)
    -- static
    --- editorcfg.txt (Die RTE-Konfiguration)
    -- class.tx_tptest_pi1.php (unsere Hauptklasse)
    -- locallang.xml (die Sprachdatei unserer Hauptklasse)
    - ChangeLog (hier können wir Versionsbeschreibungen einfügen)
    - ext_emconf.php (die Infos zur Extension)
    - ext_icon.gif (das Extension-Icon, sichtbar im Extensionmanager)
    - ext_localconf.php (Konfigurationsdatei)
    - ext_tables.php (Konfiguration des TCA)
    - ext_tables.sql (Die Tabellendefinitionen)
    - icon_tx_tptest_items.gif (Das Icon für unsere Datensätze)
    - locallang_db.xml (Die Sprachdatei für die Labels im backend)
    - README.txt (Notizen)
    - tca.php (das TCA-Array unserer Extension)


    Es taucht ein Begriff auf: TCA (Table Configuration Array). Eine genauere Beschreibung dieses Arrays finden wir unter [1]


    Für uns ist jetzt die pi1-Klasse entscheidend, wir öffnen die class.tx_tptest_pi1.php und die locallang.xml im Editor.
    Der Kickstarter hat uns schon einiges an Code erzeugt. Dies ist nur ein Demo, wir schauen uns das mal an


    Die main-Funktion wird aufgerufen, wenn wir das Plugin in einer Seite haben - das wollen wir jetzt machen. Wenn wir die Seite uns anschauen, sollten wir folgende Ausgabe sehen:


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb7.jpg]


    Was passiert da?
    In der Funktion wird die Ausgabe in der Variablen $content gesammelt und am Schluss zurückgegeben (Kein echo oder print!).
    Wir sehen laufend etwas mit pi_ - was soll das?


    Unsere Hauptklasse ist eine Erweiterung der Klasse tslib_pibase. Diese befindet sich in typo3/sysext/cms/tslib/class.tslib_pibase.php
    Alle Methoden dieser Klasse lassen sich also über $this->methode() aufrufen.


    Was sind piVars?
    Jede pi-Klasse hat ein eigenes Array für GET/POST-Variablen. Damit man sich nicht in die Quere kommt, ist das Array mit dem Prefix der Klasse versehen, in unserem Beispiel
    tx_tptest_pi1[irgendwas]
    Damit wir darauf leich zugreifen können werden diese am Anfang in ein Array verfrachtet ($this->pi_setPiVarDefaults();) und sind über $this->piVars['irgendwas'] abrufbar. Dabei ist es egal, ob es GET oder POST-Vars sind.
    Das schauen wir uns mal an, wir wollen debug nutzen (cc_debug installiert?)
    Wir fügen folgende Zeile vor dem return ein:

    PHP
    debug($this->piVars);


    Alternativ können wir auch ohne cc_debug ausgeben:

    PHP
    t3lib_div::debug($this->piVars,'unser debug');


    Wir erhalten eine Ansicht unseres piVar-Arrays. Das überprüfen wir, in dem wir einfach über die Url eine Var hinzufügen:
    index.php?id=15&tx_tptest_pi1[test]=20 wobei die 15 natürlich durch die Id der aktuellen Seite zu ersetzen ist.
    nun sollten wir die Variable test in unserem Array sehen.

    $this->pi_loadLL();
    => mit dieser Anweisung wird die Sprachdatei geladen. Wir schauen sie uns an, es ist ein xml-Array
    Wichtig ist die Sektion <languageKey index="default" type="array"> , die immer da sein muss. Default ist immer die englische Sprache, wollen wir auch deutsch anbieten, kopieren wir diese Sektion und fügen sie darunter an und ändern nach index="de"
    Die Labels lassen sich in unserer pi1 einfach aufrufen mit $this->pi_getLL('labelname') - wunderbar, Mehrsprachigkeit ist also kein Thema mehr.


    Zusätzlich lässt sich unsere Extension über Typoscript konnfigurieren, die Konfiguration wird in $conf übergeben und ist in der Klasse über $this->conf abrufbar.
    Wir testen das und tragen in unser Setup folgende Zeilen ein:

    Code
    plugin.tx_tptest_pi1 {
    test = 20
    test1 = 15
    help = Ich bin ein Hilfetext
    }


    Nach speichern wollen wir sehen, ob es in der Extension ankommt, wir fügen folgende Debug-Anweisung ein:

    PHP
    debug($this->conf);


    Wir sollten folgendes sehen:


    [Blocked Image: http://www.traum-projekt.com/t3workshop/ext/abb8.jpg]


    Ein globales Objekt spielt für uns eine Rolle, es ist das $GLOBALS['TSFE']-Array. Ein debug dieses Arrays sprengt den Rahmen, es sind alle Objekte für das Rendern der Seite enthalten.
    Für uns sind erstmal nur 2 Sachen wichtig:
    $GLOBALS['TSFE']->id das ist die id der aktuellen Seite
    $GLOBALS['TSFE']->page das sind die Infos der aktuellen Seite (der komplette Datensatz aus pages mit der uid der aktuellen Seite)


    Wir brauchen uns diese Infos also nicht aus der DB holen.
    Wir nutzen das gleich mal und basteln uns einen Link:


    PHP
    $content.=$this->pi_linkToPage($GLOBALS['TSFE']->page['title'],$GLOBALS['TSFE']->id);


    wir sollten einen Link auf die aktuelle Seite mit dem Titel der Seite als Linktext sehen.


    Woher kenne ich die Methoden der pibase ?
    Wir haben uns ja extdeveval installiert, im BE haben wir oben eine Leiste mit der Offline-Doku, alle Methoden der pibase sehen wir durch Klick auf pibase.


    Ihr könnt ein wenig damit spielen, bevor es dann zur relevanten Ausgabe kommt (im nächsten Teil)



    [1] http://typo3.org/documentation…ion/doc_core_api/current/

  • Teil 3 - wir wollen unsere Datensätze ausgeben
    Also auf zur Ausgabe. Wir löschen alles was zu $content gehört und fangen an.


    Wir wollen 2 Sachen ausgeben
    - eine Liste aller Datensätz
    - eine Detailansicht


    Beides soll auf der gleichen Seite passiseren, die Unterscheidung wird über einen GET-Parameter gehen (item), der die uid des Datensatzes enthält.




    Da wir in unserer Extension kein HTML erzeugen wollen, machen wir uns ein HTML-Template, das wir im root der Extension speichern


    Das eingebaute Template-System ist extrem einfach. Es gibt 3 Teile
    ###MARKER### (einfache Marker)
    <!-- ###SUBPARTMARKER -->...<!-- ###SUBPARTMARKER --> (einfache Subparts)
    <!-- ###LINKSUBPARTMARKER -->...<!-- ###LINKSUBPARTMARKER --> (einfache Subparts für Links)


    Wir sammeln unsere Marker in Arrays
    $markerArray -> es werden die Marker durch den entsprechenden Inhalt ersetzt
    $subpartArray -> es werden die Subparts durch den entsprechenden Inhalt ersetzt
    $linkpartArray -> es werden die Links gesetzt nach dem Muster $linkpartArray[0] ... $linkpartArray[1]


    zum Ersetzen haben wir eine Funktion:
    $content = $this->cObj->substituteMarkerArrayCached($subpart,$markerArray,$subpartArray,$linkpartArray);


    Wir wollen das Template laden:

    PHP
    $this->template=$this->cObj->fileResource('EXT:tp_test/template.html');


    wir sehen was schönes: EXT: ist das Synonym für den Pfad typo3conf/ext.


    Für die Ansichten machen wir also eine Fallunterscheidung

    PHP
    if($this->piVars['item']) {
    $content = $this->detailView();
    } else {
    $content = $this->listView();
    }


    wir haben also die Ansichten in 2 Funktionen ausgelagert, damit es übersichtlicher bleibt.


    Wir wollen uns einmal die fertige Extension anschauen



    und die entsprechende locallang.xml



    Achtung: die locallang.xml muss im utf8-Format gespeichert werden!



    Erklärungen
    Datenbank: wir müssen keine Verbindung aufbauen, da die bereits besteht. Statt normale mysql-Anweisungen nutzen wir die TYPO3-DBwrapper-Klasse. Das hat den Grund, da das nicht nur für mySql funktioniert, sondern auch mit dBal mit anderen DB-Engines funktioniert. Der Syntax ist in der Doku der extdeveval erklärt, klick auf DB.
    Als Faustregel kann man die üblichen php-Befehle benutzen nach dem Muster
    mysql_query($sql) => $GLOBALS['TYPO3_DB']->sql_query($sql)
    mysql_num_rows($res) => $GLOBALS['TYPO3_DB']->sql_num_rows($res)
    usw.


    cObj (Abk. für Content-Object) ist die Klasse tslib_content (typo3/sysext/cms/tslib/class.tslib_content.php)
    Die Objekte und Methoden finden wir wieder bei extdeveval unter cObj


    Die Funktion $this->pi_RTEcssText wandelt einen Richtext in das entsprechende HTML um.


    Soweit erstmal, ich denke, das es nicht besonders kompliziert war - wenn Fragen auftauchen, können die hier gestellt werden,


    Erstmal viel Spass beim Nachbauen und Experimentieren !

  • Spitzenklasse, Steffen! :)
    Sehr ausführlich und verständlich erklärt, was den Einstieg in die Extension-Programmierung gewiss enorm erleichtert. [Blocked Image: http://www.traum-projekt.com/forum/images/icons/icon14.gif]

  • Hallo :)


    ich habe mal über den Extension Manager nach extdeveval gesucht und die Extension installiert. Danach kommt es im BE im oberen Frame zu folgender Fehlermeldung:

    Code
    Fatal error: Cannot re-assign $this in C:\xampp\htdocs\typo3\typo3conf\ext\extdeveval\class.tx_extdeveval_fetchContentTopMenu.php on line 36


    Was unter PHP 4 noch ging führt mit PHP 5 zu diesem Fehler, weil dort als Parameter der Name &$this gewählt wurde.


    Um das Problem zu beseitigen muß man einfach die Klasse im Editor öffnen (Pfad steht ja in der Fehlermeldung) und &$this durch etwas anderes ersetzen, z.B. &$that ... Allerdings ist mir, um ehrlich zu sein, nicht klar wieso da überhaupt ein Parameter angegeben wird, (dazu noch als Referenz) da innerhalb der Methode gar nicht darauf zugegriffen wird. Man könnte also genauso gut den Parameter weg lassen, was bei mir genauso problemlos funktioniert.


    Hat man das so abgeändert und die Datei gespeichert, drückt man F5 und bekommt im Typo3 BE auch die nützliche Toolbar, wie man sie oben auf dem Screenshot (z.B. beim Kickstarter) sieht.


    Ich weiß nicht ob andere das Problem auch haben oder ob mir der Extension Manager eine veraltete Version der Extension untergeschoben hat. Jedenfalls kann es ja nichts schaden es mal hier posten, falls noch jemand das selbe Problem hat. ;)

  • Hallo Steffenk!


    Ich bin begeistert!!!!!!!!!!
    Dieser Workshop kommt wie gerufen!!!!!
    Spitze - Super - danke!!!!!


    Ich würde mich aber über eine kleine zusätzliche Erläuterung freuen:


    Ich habe etwas Schwierigkeiten der Aufgabenstellung bzw.
    mit der Übersetzung des nachfoldenden Codes:


    PHP
    if($this->piVars['item'])
    { $content = $this->detailView(); }
    else { $content = $this->listView(); }


    Vielleicht steht da:
    Wenn die aktuelle Seite = der übergebenen ID
    dann rufe die Funktion detailView() auf
    ansonsten die Funktion listView();


    Ich vermute, es hat was mit den unterschiedlichen Möglichkeiten zu tun,
    das Plugin aufzurufen. Aber wie sind die (gemeint)?


    Vielen Dank im voraus.


    Viele Grüße
    sbvm

  • Hi,


    das ist eine ganz einfache Weiche. In der Liste sind alle "items" mit Link, in diesem Link wird die ID des Items übergeben.


    In der Weiche wird abgefragt: Ist im der Url eine Item-ID ? Dann zeige die Einzelansicht dieses Items, wenn nicht dann zeige mir die Liste.

  • Hallo SteffenK!


    Dank Dir für die schnelle Antwort. Ich bemühe mich zu verstehen.
    Da ich aber noch kein eingefleischter TYPO3-er bin, fällt es mir nicht ganz einfach.


    Also, ein Link auf die Seite auf der sich das Plugin befindet, sieht z.B. so aus:
    http://blablabla/index.php?id=42


    Wie sieht nun aber ein Link auf einen Datensatz aus?
    Vermutlich muss da noch was dran, aber wie?


    Ich bedanke mich vielmals im voraus.


    sbvm

  • dazu musst Du Dir nur die Links anschauen, die die listview generiert:

    PHP
    $markerArray['###LINK###']=$this->pi_linkTP($row['title'],array($this->prefixId.'[item]'=> $row['uid']));


    diese Links sehen dann so aus:
    http://blablabla/index.php?id=42&tx_tptest_pi1[item]=1

  • Hallo Steffenk!


    Dank Dir nochmal für die Antwort. Das ist jetzt soweit klar.


    Leider läuft das Ding bei mir noch immer nicht.
    Deshalb noch einmal eine Verständnisfrage:


    Nachfolgende Befehlsfolge verstehe ich noch überhaupt nicht

    Quote


    $liste .= $this->cObj->substituteMarkerArrayCached($singlerow, $markerArray);
    $subpartArray['###ROW###']=$liste;
    $content = $this->cObj->substituteMarkerArrayCached($subpart, $markerArray, $subpartArray, array());


    Was macht da das array() am Ende?
    Hast Du einen Link, wo ich die Syntax nachlesen kann?


    Ist die Befehlfolge gleichzusetzen mit der nachfolgenden, die ich in meinem Buch finde:


    Quote


    // Ersetzen untergeordneten Subpart durch Inhalte
    $content .=$this->cObj->substituteMarkerArrayCached ($singlerow, $markerArray);
    // Ersetzen alle Subparts die in einem anderen Subpart liegen
    $content = $this->cObj->substituteSubpart ($subpart, "###ROW###", $content);


    Ich danke Dir noch einmal im voraus.


    Viele Grüße
    sbvm

  • Die Funktion substituteMarkerArrayCached erwartet 4 Parameter

    PHP
    #subpart = HTML
    #markerArray = Array mit Markern
    #subpartArray = Array mit Subparts
    #linkpartArray = Array mit Linkarrays
    substituteMarkerArrayCached($subpart, $markerArray, $subpartArray, $linkpartArray);


    mit array() übergebe ich ein leeres Array. Da die letzten 2 Parameter optional sind, könnte man das auch weglassen, also ist das das Gleiche:

    PHP
    substituteMarkerArrayCached($subpart, $markerArray,array(),array());
    substituteMarkerArrayCached($subpart, $markerArray);


    In der Schleife kumuliere ich also das HTML und ersetze nur in dem Subpart (###ROW###) die Marker.
    Nach der Schleife ersetze ich den ganzen Subpart ###ROW### mit dem kumulierten HTML.


    Für den Umgang mit den Templates gibt es auch hier ein bischen Lektüre:
    http://wiki.typo3.org/index.ph…ent,_using_HTML-Templates


    der Syntax der Funktion substituteMarkerArrayCached ist in extdeveval unter cObj einzusehen.

  • Hallo,


    ich komme mit dem tutorial eig ganz gut zurecht, das Nachbauen hat auch ganz gut geklappt. Allerdings bekomme ich im Frontend keine Daten angezeigt, die ich eingegeben habe! Woran könnte das liegen? Ich habe einen Sysordner erstellt in dem die inhalte abgelegt sind und habe in der extension die sysordner auch als Startpunkt eingestellt. soweit müsste doch alles passen?!:confused:
    hat jemand eine idee? Im Vorraus schon mal danke!


    Gruß Timo

  • naja, irgendwas musst Du falsch gemacht haben, und das ist ein Fallbeispiel: Wie debugge ich meine Extension?


    erzeugt die Extension Ausgaben ?
    Wenn nein: debuggen wir am Anfang, also nach
    #welche Ansicht?


    t3lib_div::debug('Hier gehts los','test');
    ok, kommt, vielleicht stimmt die Konfiguration nicht?
    t3lib_div::debug($this->conf,'das conf-Array');


    Warum findet meine Routine keine Datensätze?
    Lassen wir uns doch die Query anzeigen. Wir machen aus exec_SELECTquery einfach SELECTquery und geben die aus



    Die Query kann man sich in phpMyAdmin kopieren und testen.


    So kann man sich durchs ganze Skript hangeln bis der Fehler aufgespürt ist.

  • Hallo Steffen!


    Danke für die tolle Doku! Tolle Sache!!
    Hast Du Lust, auch ein klein wenig Code zu liefern,
    wie ich nun die Felder aus dem Frontend füllen kann?


    Was brauche ich dazu?
    Eine Html-Form für die Eingabe?
    Oder passiert das alles in dern PHP-Datei?
    Habe versucht es anhand verschiedener bestehender Extensions nachzuvollziehen, aber ich steige einfach nicht durch. :(
    Vielleicht gibt es ja auch mehrere Möglichkeiten???


    Vielen Dank!


    Rene

  • Ja, Eingaben werden im FE mit einer HTML-FORM gemacht. Die kann man im Template erstellen.


    Eine typische Form sieht so aus:


    HTML
    <form action="" method="post">
    <input type="hidden" name="no_cache" value="1" />
    ...
    <input type="submit" name="tx_myextension_pi1[submit]" value="speichern" />
    </form>


    und in der pi1

  • Hallo,


    ersteinmal auch einen großen Dank für das Tutorial. Bin sehr gut damit zurecht gekommen.


    Das einzige Problem was ich noch habe wäre:
    Wie bekomme ich, wenn die Ausgabe Funktionalität der Klasse sowie das Template geändert wurde, diese Änderungen in die Kickstarter extension übertragen? Also wenn ich die Extension im Kickstarter später bearbeiten möchte das dieser meine vorher gemachten Änderungen auch mit in die t3x Datei mitnimmt.


    Danke schonmal im vorraus für eure Bemühungen.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!