kacospro / bootscake

Bootstrap 4 Helpers for CakePHP 3.4

BootsCake

Bootstrap 4 plugin for CakePHP ^3.4.

Requirements

• CakePHP ^3.4.0
• Bootstrap ^4.0.0
• jQuery 1.9.1 - 3,
• Popper.js ^1.14.0

Description

Adapter of current CakePHP's helpers. While I feel it is getting pretty close to a stable version 😄 it is possible that breaking changes ocurre

Includes

• FormHelper
• PaginatorHelper
• ModalHelper
• FlashHelper

Installing Using Composer

composer require kacospro/bootscake

Load the plugin by adding the following to your app's config/boostrap.php:

Plugin::load('BootsCake');

or using CakePHP's console:

bin/cake plugin load BootsCake

Setup

First of all you should load Bootstrap by your favorite method.

Then in your src/View/AppView.php load the helpers you need:

public function initialize()
{
    $this->loadHelper('BootsCake.BootsCakeFlash');
    $this->loadHelper('BootsCake.BootsCakeForm');
    $this->loadHelper('BootsCake.BootsCakeModal');
    $this->loadHelper('BootsCake.BootsCakePaginator');
}

Helper Usage

Form Helper. You only need to call BootsCakeForm on the View

<?php
echo $this->BootsCakeForm->create($article);
echo $this->BootsCakeForm->control('title');
echo $this->BootsCakeForm->control('body');
echo $this->BootsCakeForm->control(__('Submit'), ['type' => 'submit']);
echo $this->BootsCakeForm->end();
?>

Wait! What if I need different form sizes?
I got your back! You can pass size as an option it could be sm or lg:

<?= $this->BootsCakeForm->control(
    'email',
    [
        'placeholder' => '[email protected]',
        'size' => 'sm',
    ]
) ?>

Also if you pass the option 'type' => 'submit' it supports a color to render the submit button

<?= $this->BootsCakeForm->control('Submit', ['type' => 'submit', 'color' => 'primary']) ?>

Flash Helper.

<?= $this->BootsCakeFlash->render() ?>

Paginator Helper.

<nav>
    <ul class="pagination">
        <?php
        echo $this->BootsCakePaginator->first();
        echo $this->BootsCakePaginator->prev();
        echo $this->BootsCakePaginator->numbers();
        echo $this->BootsCakePaginator->next();
        echo $this->BootsCakePaginator->last();
        ?>
    </ul>
</nav>

Modal. It only renders the skeleton of the Modal Component, I use it primary for rendering a delete modal This is the delete button code:

<?=
$this->BootsCakeForm->postLink(__('Delete'),
[
  'action' => 'delete',
  $article->id
], [
  'data-name' => $article->id,
  'escape' => false,
  'title' => 'Eliminar usuario'
])
?>

Then call the Modal skeleton:

<?= $this->element('BootsCake.modal/default') ?>

or

<?= $this->BootsCakeModal->render() ?>

Alongside this javascript code:

$('#modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var recipient = button.data('name');
    var formName = button.data('form-name');
    $('#confirm').attr('onClick', 'document.' + formName + '.submit();');
    var modal = $(this);
    modal.find('.modal-title').html(
        '<p class="text-danger">Eliminar <i class="fa fa-exclamation-circle" aria-hidden="true"></i></p>'
    )
    modal.find('.modal-body').html(
        '<p>¿Desea eliminar a ' +
        recipient +
        '?</p>' +
        '<br>' +
        'La información no se podrá recuperar'
    );
});

TODO

• Improve Docs.
• Handle configurations.
• Add options for size (sm, md, lg).
• Add options for modal rendering.
• Create Html Helpers.
• Create a way to automatize Bootstrap instalation.

License

Copyright (c) 2018, Carlos Proaño and licensed under The MIT License.

bootscake's Issues

Remove 'form-control-lg' class from control helper default

In line 176 from BootsCakeFormHelper.php there's this line:

'templates' => ['input' => '<input type="{{type}}" class="form-control  form-control-lg" name="{{name}}"{{attrs}}/>']

I think the form-control-lg class should be removed to render the default bootstrap input size

This happens in the last version that gets install with composer require kacospro/bootscake

Support for 3.5.x

I tried to install with CakePHP 3.5.4 using composer, however, it did not work.

Add Bootstrap's invalid classes to inputs and error message

Right now, the styles for an invalid input and message are CakePHP's default. They should be replaced with Bootstrap's styles.

I will open a PR for this.

Date input missing styles

Hey Carlos, thanks for the helpers! Very useful.

I have a input like:

<?php echo $this->BootsCakeForm->control('date', ['empty' => true, 'required' => false]); ?>

Where date is a column of type date.

The input renders:

Is this expected behavior?