Implementing a Frontend Form to Backend Model in OctoberCMS

Hi there,

I can’t get any further. I have created a plugin with the builder and successfully created a model with list and form. Creating a model in the bacakend works wonderfully. I want users to be able to fill out a form in the frontend and this form is directly linked to the backend

plugins/yaseed/dachpro/Plugin.php

<?php namespace Yaseed\Dachpro;

use System\Classes\PluginBase;

/**
 * Plugin class
 */
class Plugin extends PluginBase
{
    /**
     * register method, called when the plugin is first registered.
     */
    public function register()
    {
    }

    /**
     * boot method, called right before the request route.
     */
    public function boot()
    {
    }

    /**
     * registerComponents used by the frontend.
     */
    public function registerComponents()
    {
        return [
            'Yaseed\Dachpro\Components\ProjektForm' => 'projektform',
        ];
    }

    /**
     * registerSettings used by the backend.
     */
    public function registerSettings()
    {
    }
}

plugins/yaseed/dachpro/components/ProjektForm.php

<?php namespace Yaseed\Dachpro\Components;

use Cms\Classes\ComponentBase;
use Input;
use Validator;
use Redirect;
use Yaseed\Dachpro\Models\DachPro;

class ProjektForm extends ComponentBase
{
    public function componentDetails(){
        return [
            'name' => 'Projekt Form',
            'description' => 'Projekt Form'
        ];
    }


    public function onSave()
    {
        $data = post();

        // Erstellen eines neuen Projekt-Modells
        $dachpro = new DachPro();
        $dachpro->projektname = $data['projektname'];
        $dachpro->projektbeschreibung = $data['projektbeschreibung'];
        $dachpro->land = $data['land'];
        $dachpro->save();
    }

}

plugins/yaseed/dachpro/components/projektform/default.htm

<form method="post" data-request="onSave">
  <div class="mb-4">
      <label for="projektname" class="block text-gray-700 font-bold mb-2">Projektname</label>
      <input type="text" name="projektname" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
  </div>
  <div class="mb-4">
      <label for="projektbeschreibung" class="block text-gray-700 font-bold mb-2">Projektbeschreibung</label>
      <textarea name="projektbeschreibung" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
  </div>
  <div class="mb-4">
      <label for="land" class="block text-gray-700 font-bold mb-2">Land</label>
      <input type="text"name="land" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
  </div>
  <div class="flex items-center justify-between">
      <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Speichern</button>
  </div>
</form>

plugins/yaseed/dachpro/models/DachPro.php

<?php namespace Yaseed\Dachpro\Models;

use Model;

/**
 * Model
 */
class DachPro extends Model
{
    use \October\Rain\Database\Traits\Validation;

    /**
     * @var bool timestamps are disabled.
     * Remove this line if timestamps are defined in the database table.
     */
    public $timestamps = false;

    /**
     * @var string table in the database used by the model.
     */
    public $table = 'yaseed_dachpro_';

    /**
     * @var array rules for validation.
     */
    public $rules = [
    ];

}

plugins/yaseed/dachpro/updates/builder_table_create_yaseed_dachpro_.php

<?php namespace Yaseed\Dachpro\Updates;

use Schema;
use October\Rain\Database\Updates\Migration;

class BuilderTableCreateYaseedDachpro extends Migration
{
    public function up()
    {
        Schema::create('yaseed_dachpro_', function($table)
        {
            $table->increments('id');
            $table->string('projektname');
            $table->text('projektbeschreibung')->nullable();
            $table->text('land');
        });
    }
    
    public function down()
    {
        Schema::dropIfExists('yaseed_dachpro_');
    }
}

What am I doing wrong?

Trying now this: https://matissjanis.medium.com/octobercms-using-backend-forms-in-frontend-component-fe6c86f9296b

But that doesn’t work either

Would putting this in your model would help ?

$fillable = ['projektname', 'projektbeschreinung','land'];

This is generally a fragile design option, since any changes to the backend will break the frontend implementation easily.

The best approach is to create a folder in your partials directory called “form-fields” and then reuse these partials to build your form.

The backend form designer is really cool and saves a lot of time, and this is appropriate when only a handful of people will ever see the backend. In this context, customization is less important and more concessions can be made. Using it in the frontend creates too much complexity when it comes time to customize the form design (it has the same fragility) and clients have very specific requirements, like pixel perfect designs.

The idea is desirable for saving time and we are exploring ways to solve this, either by producing form boilerplate like Ruby on Rails, or rendering a form that has limited customization options, since complex forms can get complicated quickly.