userfrosting

Userfrosting - Get Working, Post blank screen with no error in log


I'm creating my first Userfrosting app and trying a few simple things but falling at the first hurdle. I am trying to create a form which adds bands to a database table:

CREATE TABLE `uf_band` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `band_name` text NOT NULL,
 `band_description` longtext NOT NULL,
 `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 `modified_at` timestamp NULL DEFAULT NULL,
 PRIMARY KEY (`id`)
) 

initialize.php:

$table_band = new \UserFrosting\DatabaseTable($app->config('db')['db_prefix'] . "band", [
    "band_name",
    "band_description",
    "created_at",
    "modified_at"
]);

index.php for the routes:

$app->get('/bands/new/?', function () use ($app) {
    $controller = new UF\BandController($app);
    return $controller->newBand();
});

The New Band form using GET works fine. BandController.php

public function newBand(){
    if (!$this->_app->user->checkAccess('uri_bands')){
        $this->_app->notFound();
    }
    $this->_app->render('bands/new.twig', []);
}

and if I add this to the newBand Controller to test, it writes to the database when I load the new band form, which is fine:

    $new_band = new Band([
        "band_name" => "band_name",
        "band_description" => "band_description"
    ]);
    $new_band->save();
    $id = $new_band->id;

The problem is the Save using Post. Even if I hard code in the values and do not even try to read the POST data, all I get is a blank screen. There are no error messages and nothing in the apache error.log:

index.php

$app->post('/bands/new/?', function () use ($app) {    
    $controller = new UF\BandController($app);
    return $controller->saveBand();
});

BandController.php

public function saveBand(){
    $new_band = new Band([
        "band_name" => "band_name",
        "band_description" => "band_description"
    ]);
    $new_band->save();
    $id = $new_band->id;
}

If I replace my POST route with

$app->post('/bands/new/?', function () use ($app) {    
    echo 'post';
})

I still just get a blank screen.

Here's bands/new.twig though I think the problem is before this:

{% extends "layouts/layout-dashboard.twig" %}

{% set page_group = "dashboard" %}

{% block page %}     
    {% set page = page | merge({
        "title"          : "Add New Band",
        "description" : ""
    }) %}
    {{ parent() }}
{% endblock %}

{% block content %}
<h1>{{page.title}}</h1>
<p>{{page.description}}</p>

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-users"></i>Add New Band</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form" name="bands" action="{{site.uri.public}}/bands/new" method="post">

                    <div class="form-group">
                        <label for="input_band" class="col-sm-4 control-label">Band Name</label>
                        <div class="col-sm-8">
                            <input type="text" id="input_title" class="form-control" name="band_name" placeholder="Please enter the band name">
                            <!--<p class="help-block">Enter the band name here</p>-->
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="input_title" class="col-sm-4 control-label">Description</label>
                        <div class="col-sm-8">
                            <textarea type="text" id="input_title" class="form-control" name="band_description" placeholder="Please enter a description of the band.  This may be displayed publically"></textarea>
                            <!--<p class="help-block">This will become the new title for all users in the selected group.</p> -->
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="input_group" class="col-sm-4 control-label">Genre</label>
                        <div class="col-sm-8">
                            <select id="input_group" class="form-control select2" name="genre_id">
                                {% for group in groups %}
                                    <option value="{{group.id}}">{{group.name}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-success text-center">Add Band</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block page_scripts %}
    <script>

$(document).ready(function() { 
    // Load the validator rules for this form
    var validators = {{validators | raw}};
    ufFormSubmit(
      $("form[name='add_band']"),
      validators,
      $("#userfrosting-alerts"),
      function(data, statusText, jqXHR) {
          // Reload the page on success
          window.location.reload(true);   
      }
    );
});

</script>
{% endblock %}  

Thanks for any thoughts. With no error messages, this is driving me nuts!


Solution

  • Seems like you have forgotten the csrf token.

    You can add this hidden input field:

    <input type="hidden" name="{{csrf_key}}" value="{{csrf_token}}">

    and read more here.