CakePHP Helpers & Bootstrap

CakePHP & Bootstrap

I really like CakePHP framework and I just began to use @Twitter Bootstrap so I wanted to create some helpers that could allow me to easily generate HTML code, according to bootstrap specification, in CakePHP views. There were already some on the web, but, according to me, they modify too much the way CakePHP works, adding to many functions or changing the methods, so I decided to create my own ones!

As always, I do not pretend to have the best result, but something different.

What do the helpers add?

Currently, I have created 3 helpers, but I'm going to keep working on them. I created a Html, a Form and a Paginator helper. What I wanted was to be able to change the way the data was printed, without changing the view, so most of my works is redefining methods in default helpers. The good new? You just have to make an alias from the old helper to my new helper in your controller to see the changes!

public $helpers = [
    'Html' => [
        'className' => 'BootstrapHtml'
    ]
] ;

Some of the helpers add new methods because there were no old methods corresponding (for example the BootstrapHtmlHelper add methods to display icons and alerts).

BootstrapHtmlHelper

This helper extends the basic CakePHP FormHelper. It redefines 1 method and add 3 news:

getCrumbLists - Redefinition
Now this function generate a @Twitter bootstrap style breadcrumbs:

1. Home
2. Library
3. Data

progress - New
This function generates bootstrap progress bar, you can create all type of bootstrap progress bar, using options and type of first parameter:

The 2 others functions are icon and alert which generate bootstrap icons and alerts. Like the progress method, you can specify extra options to customize the output.

BootstratPaginatorHelper

This helper only redefines first, prev, next, last and numbers methods of default PaginatorHelper, to create something like this:

As BootstrapHtmlHelper, you just have to make an alias from the default helper to this helper in your controller to use it!

BootstrapFormHelper

The more customized helper! You can generate bootstrap form with 4 different styles: normal, horizontal, inline & search. You can prepend or append HTML block to your input (like bootstrap prepend and append), you can generate dropdown button, and the most important, it uses the default FormHelper method!

Here is an example of code using BoostrapFormHelper, you can see that is just like a simple call to FormHelper::input:

echo $this->BootstrapForm->create('', []) ;
echo $this->BootstrapForm->input('text', [
    'label' => false,
    'placeholder' => 'Search... ',
    'type' => 'text',
    'prepend' => $this->BootstrapHtml->icon('search'),
    'append' => [
            $this->BootstrapForm->dropdownButton(__('Action'), [
                $this->BootstrapHtml->link('Action 1', []),
                $this->BootstrapHtml->link('Action 2', []),
                'divider',
                $this->BootstrapHtml->link('Action 3', [])
            ))
    ]]) ;
echo $this->BootstrapForm->end() ;

And here is what you get:

<form method="post" accept-charset="utf-8" role="form" action="/action">
    <div style="display:none;">
        <input name="_method" class="form-control " value="POST" type="hidden">
    </div>
    <div class="form-group text">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="fa fa-search"></i>
            </span>
            <input name="text" class="form-control " placeholder="Search... " id="text" type="text">
            <span class="input-group-btn">
                <div class="btn-group">
                    <button aria-expanded="false" data-toggle="dropdown" class="dropdown-toggle btn btn-default">Action <span class="caret"></span></button>
                    <div class="dropdown-menu" role="menu">
                        <li role="presentation"><a href="#">Action 1</a></li>
                        <li role="presentation"><a href="#">Action 2</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a href="#">Action 3</a></li>
                    </div>
                </div>
            </span>
        </div>
    </div>
</form>

I say it again but it is something I didn't find in other bootstrap helpers: You can change the way data are displayed in your application by just creating an alias helper in your controller!

BootstrapNavbarHelper

This helper allow you to easily create boostrap navbar such as the one on this website or on bootstrap website.

Unlike the form helper, the navbar helper does not return HTML element when you call a method. You have to call compile method to get the full navbar, this is mainly because the helper is able to detect if a link is active or not (even if the current link is in a submenu).

Here is an example of code using this helper:

$this->BootstrapNavbar->create(array('fixed' => 'top', 'responsive' => 'false')) ;
$this->BootstrapNavbar->brand('Mikael Capelle') ;
$this->BootstrapNavbar->link('Blog', array('controller' => 'blog', 'action' => 'index')) ;
$this->BootstrapNavbar->end() ; 
echo $this->BootstrapNavbar->compile () ;

Where can I find the helpers?

The helpers are available on github: https://github.com/Holt59/cakephp3-bootstrap-helpers.

As always the code is under license Apache v2.

Feel free to send me an email, to add request on github or to comment this post if you have any problems or if you want new features to be added! I will be working on this project for a few moment, I'm thinking about adding helper for modal window or other bootstrap stuff!