October CMS: Eigene Komponente(Plugin) entwickeln

October CMS: Eigene Komponente(Plugin) entwickeln

Die richtige Analyse und Strategie

An einem Beispiel will ich zeigen wie simpel es ist, in October CMS ein eigenes Plugin oder auch Komponente genannt, zu entwickeln. Hierfür wird das Builder-Plugin vorrausgesetzt. Im Backend rufen wir den Builder auf und erstellen mit Create plugin ein neues Plugin. Wir erstellen eine Kontaktform-Komponente, welche auf jeder Website gebraucht werden kann. Diese habe ich Kontakt genannt. In unserem root Verzeichnis werden unter plugins/<namespace>/contact/  alle Dateien, die wir für unsere Entwicklung benötigen, abgelegt.

In diesem Verzeichnis legen wir uns das Verzeichnis componets mit der Datei ContactForm.php an. Hier definieren wir unsere Komponete in der Funktion componentDetails() und definieren den Namen und die Beschreibung unserer Komponente. Dann brauchen wir noch die Funktion onSend(), welche beim abrufen unserer Form aufgerufen werden soll. Diese wird in der View der Form per Ajax mittels data-request aufgerufen, damit ein Neuladen der Seite verhindert wird. An die Variable $vars übergeben wir die einzelnen Felder unseres Formulars. An Mail::send() übergeben wir die Variable mit den Daten, unser E-Mail-Template message, welches wir weiter unten anlegen und die Variable $message, welche bereits vom October CMS definiert ist. Den Code und eine detailiertere Beschreibung findest du in der Dokumentation von October CMS. Für die Validierung der Form verwenden wir noch die Variable $validator und definieren, dass der Name und die E-Mail Pflichtfelder sind und der Name aus mindestens 3 Zeichen bestehen muss, sowie die E-Mail eine echte E-Mail sein muss. Mit einer IF-Abfrage überprüfen wir dann vor dem Absenden, ob die Form valide ist. Wenn nicht, geben wir in der View die Fehlermeldungen aus.

<?php
namespace <author>\contact\components;

use Cms\Classes\ComponentBase;
use Input;
use Mail;

class ContactForm extends ComponentBase{

    public function componentDetails(){
        return[
            'name' => 'Kontakt Form',
            'description' => 'Einfache Kontaktform'
        ];
    }

    public function onSend(){

        /* validation */
        $validator = Validator::make(
            [
                'name' => Input::get('name'),
                'email' => Input::get('email')
            ],
            [
                'name' => 'required|min:3',
                'email' => 'required|email'
            ]
        );

        if ($validator->fails()) {
            return Redirect::back()->withErrors($validator);
        } else {

            $vars = ['name' => Input::get('name'), 'email' => Input::get('email'), 'subject' => Input::get('subject'), 'message' => Input::get('message')];

            Mail::send('chuebert.contact::mail.message', $vars, function ($message) {
                $message->to('christoph.huebert@gmail.com', 'Admin');
                $message->subject('Kontaktform deko-kleinanezigen');
            });
        }
    }
}

In /components legen wir uns noch einen Ordner mit Namen contactform an und erstellen darin die default.htm für unsere Form. Mit twig können wir dann an den gewünschten Stellen die Fehlermeldungen ausgeben: {{ errors.first('<Feldname>') }}. Die Fehlermeldungen werden ausgegeben, wenn die Überprüfung nicht mit den von uns definierten Vorraussetzungen übereinstimmt.

<form data-request="onSend">
    <div>
        <span><label>Name</label></span>
        <span><input name="name" type="text" class="textbox"></span>
       {{ errors.first('name') }}
    </div>
    <div>
        <span><label>E-Mail</label></span>
        <span><input name="email" type="text" class="textbox"></span>
       {{ errors.first('email') }}
    </div>
    <div>
        <span><label>Betreff</label></span>
        <span><input name="subject" type="text" class="textbox"></span>
    </div>
    <div>
        <span><label>Deine Nachricht</label></span>
        <span><textarea name="message"> </textarea></span>
    </div>
    <div>
        <span><input type="submit" class="" value="Senden"></span>
    </div>
</form>

In der Plugin.php müssen wir unsere Komponente dann noch bekannt machen(registrieren).

<?php namespace <author>\contact;

use System\Classes\PluginBase;

class Plugin extends PluginBase
{
    public function registerComponents()
    {
        return [
            '<author>\contact\components\ContactForm' => 'contactform',
        ];
    }

    public function registerSettings()
    {
    }
}

Das E-Mail-Template, welches wir dann per Mail erhalten, legen wir in dem Verezeichnis /contact/views/ mit dem Namen message.htm an

<p>
    Nachricht von {{ name }}
</p>

<strong>Nachricht</strong>
<p>
    {{ subject }}
</p>
<p>
    {{ content }}
</p>

Im Backend legen wir uns unter CMS eine neue Seite mit dem Namen Kontakt an. Links in der Navigation wählen wir dann unter Componets unser Kontakt-Plugin aus und zeihen dieses per Drag & Drop auf unsere Seite.

october cms eigenes plugin im backend hinzufügen

Und das wars auch schon. Diese Komponete kann jetzt auch für alle weiteren Projekte verwendet werden. Wenn man die View der Seite aufruft kann man das Formular testen.

Migration von Magento 1 zu Magento 2
Magento 2 Installation - Datenbankrechte umgehen