BootsCake

, _(*1)

Bootstrap 4 plugin for CakePHP ^3.4., _(*2)

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 :smile: it is possible that breaking changes ocurre, _(*3)

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:, _(*4)

Plugin::load('BootsCake');

or using CakePHP's console:, _(*5)

bin/cake plugin load BootsCake

Setup

First of all you should load Bootstrap by your favorite method., _(*6)

Then in your src/View/AppView.php load the helpers you need:, _(*7)

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, _(*8)

<?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:, _(*9)

<?= $this->BootsCakeForm->control(
    'email',
    [
        'placeholder' => 'carlos@example.com',
        'size' => 'sm',
    ]
) ?>

Also if you pass the option 'type' => 'submit' it supports a color to render the submit button, _(*10)

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

Flash Helper., _(*11)

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

Paginator Helper., _(*12)

<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:, _(*13)

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

Then call the Modal skeleton:, _(*14)

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

or, _(*15)

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

Alongside this javascript code:, _(*16)

$('#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(
        '

Eliminar , _(*17)

'
    )
    modal.find('.modal-body').html(
        '

¿Desea eliminar a ' +
        recipient +
        '?, _(*18)

' +
        '<br>' +
        'La información no se podrá recuperar'
    );
});