Contao: Ein eigenes Frontendmodul erstellen

von Patrick Froch (Kommentare: 1)

Hier wird beschrieben, wie man ein eigenes Frontendmodul für Contao erstellt. Im Prinzip funktioniert es genauso, wie das Erstellen eines Inhaltselements, nur das man nicht die Tabelle tl_content sondern tl_modules erweitert. Als Demonstration wird eine einfache Textbox erstellt, bei der man die Hintergrundfarbe einstellen kann.

Verzeichnisstruktur

Auf geht's! Wie immer wird als erstes die Verzeichnisstruktur für die Erweiterung unter TL_ROOT/system/modules/ angelegt. Ich nenne den Ordner für die Erweterung easy_modul.

easy_modul/
├── classes
│   └── modules
├── config
├── dca
├── languages
│   └── de
└── templates

Hier gibt es einen kleinen Unterschied zum Inhaltselement, im Ordner classes/ gibt es das Verzeichnis modules statt elements. Dies geschieht nur der Ordnung halber und ist nicht zwingend erforderlich. Mann kann seine Klassen auch direkt in classes oder einem anderen Ordner speichern.

Alles was von nun an passiert, findet im Ordner der Erweiterung statt. In diesem Beispiel ist dies TL_ROOT/system/modules/easy_modul. Ist also die Rede von config/config.php so ist die Datei TL_ROOT/system/modules/easy_modul/config/config.php gemeint. TL_ROOT ist dabei das Installationsverzeichnis von Contao.

Config

Nun wird der Eintrag des Moduls in der Datei config/config.php erstellt.

$GLOBALS['FE_MOD']['miscellaneous']['easymodul'] = '\esit\easymodul\classes\modules\easymodul';

Wird nun im Backend ein neues Modul anlegen, sollte der Eintrag bereits in der Rubrik Verschiedenes in der Auswahlbox Modultyp erscheinen. Da dieser als Namen noch den Schlüssel easymodul trägt, wird gleich noch eine Übersetzung hinzugefügt. Hierzu wird die Datei languages/de/module.php mit folgendem Inhlat erstellt:

$GLOBALS['TL_LANG']['FMD']['easymodul'] = array('Easy Module', 'Easy Modul');

DCA

Damit im Modul auch Einstellungen vorgenommen werden können, wird nun die Datei dca/tl_module.php angelegt. Auch wenn man keine eigenen Felder anlegen will, wird die Datei benötigt, um die Palette zu erstellen.

Die DCA-Palette ist die Zusammenstellung der Felder, die dem Modul im Backend für die Dateneingabe zur Verfügung stehen.

Wird keine Palette erstellt, sind nur die Felder Titel und Modultyp vorhanden. Damit wir einene Text eingeben können, benötigen wir ein Textfeld, vorzugsweise mit TinyMCE. Da es ein solches Feld in der Tabelle tl_modules im Stantard nicht gibt, erstellen wir das Feld easy_content.

// dca/tl_module.php
$GLOBALS['TL_DCA']['tl_module']['fields']['easy_content'] = array
(
    'label'                   => &$GLOBALS['TL_LANG']['tl_module']['easy_content'],
    'exclude'                 => true,
    'search'                  => true,
    'inputType'               => 'textarea',
    'eval'                    => array('rte'=>'tinyMCE', 'tl_class' => 'clr'),
    'sql'                     => "mediumtext NULL"
);

Zusätzlich erstellen wir in der selben Datei noch das Feld für die Farbe und nennen es easy_color.

// dca/tl_module.php
$GLOBALS['TL_DCA']['tl_module']['fields']['easy_color'] = array
(
    'label'                   => &$GLOBALS['TL_LANG']['tl_module']['easy_color'],
    'inputType'               => 'text',
    'eval'                    => array('maxlength'=>6, 'colorpicker'=>true, 'isHexColor'=>true, 'decodeEntities'=>true, 'tl_class'=>'w50 wizard'),
    'sql'                     => "varchar(64) NOT NULL default ''"
);
Da wir neue Felder angelegt haben, müssen wir nun die Datenbank aktualisieren!

Leider ist nun noch nichts von unseren Felder zu sehen. Wir müssen noch die Palette anlgen. Dies geschiegt wie bereits erwähnt ebenfalls in der Datei dca/tl_modules.php.

$GLOBALS['TL_DCA']['tl_module']['palettes']['easymodul'] = '{type_legend},type;';
$GLOBALS['TL_DCA']['tl_module']['palettes']['easymodul'].= '{content_legend},easy_content,easy_color;';
$GLOBALS['TL_DCA']['tl_module']['palettes']['easymodul'].= '{protected_legend:hide},protected;{expert_legend:hide},guests;{invisible_legend:hide},invisible,start,stop';
Damit es deutlicher wird, wo sich unsere Felder befinden, habe ich die Zuweisung auf drei Zeilen aufgeteilt. Normalerweise wird dies in einer Zeile erledigt.

Hier werden einige Standardfelder verwendet, wie protected, guests und cssID. Uns interessieren aber vor allem unsere Felder, in Zeile 2. Zunächst legen wir einen Abschnitt für unsere Felder an ({content_legend}). Abschnitte sind die grünen Überschriften, man erkennt sie an den geschweiften Klammern. Dahinter notieren wir unsere Felder (,easy_content,easy_color;). Es ist wichtig, den Abschnitt mit einem Semikolon (;) zu schließen!

Damit es auch schön aussieht, fügen wir nun noch eine Übersetzung für unsere Felder und den Abschnitt (grüne Überschrift) ein. Wir legen die Datei languages/de/tl_modules.php mit folgendem Inhalt an.

/**
 * Fields
 */
$GLOBALS['TL_LANG']['tl_module']['easy_content']    = array('Inhalt', 'Bitte geben Sie den Inhalt ein.');
$GLOBALS['TL_LANG']['tl_module']['easy_color']      = array('Farbe', 'Bitte wählen Sie die Farbe aus.');

/**
 * Legends
 */
$GLOBALS['TL_LANG']['tl_module']['content_legend']  = 'Inhalt';

Autoload

Nun erstellen wir den Autoload-Eintrag für unsere Ausgabeklasse. Diese werden wir im nächsten Schritt anlegen. Wir erstellen die Datei config/autoload.php und registrieren neben der Klasse auch gleich unser Template. In diesem Beispiel heißt es einfach mod_easymodul.

<?php
/**
 * Register the namespaces
 */
ClassLoader::addNamespaces(array
(
    'esit\easymodul\classes\modules'
));


/**
 * Register the classes
 */
ClassLoader::addClasses(array
(
    // Modules
    'esit\easymodul\classes\modules\easymodul' => "system/modules/easy_modul/classes/modules/easymodul.php",
));


/**
 * Register the templates
 */
TemplateLoader::addFiles(array
(
    'mod_easymodul' => "system/modules/easy_modul/templates",
));

Ausgabeklasse

Es ist an der Zeit das Herzstück der Erweiterung zu erstellen, die Klasse für die Ausgabe unseres Moduls. Wir legen die Datei classes/modules/easymodul.php an.

<?php

namespace esit\easymodul\classes\modules;

/**
 * Class easymodul
 * @package esit\easymodul\classes\modules
 */
class easymodul extends \Module
{


    /**
     * Template
     * @var string
     */
    protected $strTemplate = 'mod_easymodul';


    /**
     * Generate the frontend output
     */
    protected function compile()
    {
    }
}

Da wir im Template direkt auf die Werte aus dem Backend zugreifen können, macht die Klasse zugegebenermaßen nicht sehr viel. Da wir von \Contao\Module erben, müssen wir die Methode compile implementieren, auch wenn sie (wie in diesem Beispiel) nicht tut.

Template

Nun fehlt noch die Ausgabe in unserem Template. Wie oben in der Autoload-Datei angegeben, speichern wir es unter dem Namen templates/mod_easymodul.html5.

<div class="<?php echo $this->class; ?> block">

    <div style="background-color: #<?php echo $this->easy_color; ?>">
        <?php echo $this->easy_content; ?>
    </div>

</div>

In Zeile 3 wird mit <?php echo $this->easy_color; ?> die Hintergrundfarbe ausgegeben und in Zeile 4 dann noch der Inhalt.

Anzeigen der Ausgabe

Damit unsere Ausgabe angezeigt wird, muss ein Modul vom Typ easymodul angelegt und in das Seitenlayout eingebunden oder über einen Artikel ausgegeben werden.

Zurück

Einen Kommentar schreiben

Kommentar von zonky |

bitte ändern:
von
"Hierzu wird die Datei languages/de/module.php mit folgendem Inhlat erstellt:"

in
"Hierzu wird die Datei languages/de/modules.php mit folgendem Inhalt erstellt:"

Antwort von Patrick Froch

Danke für den Hinweis. Ich habe es geändert.