Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email: hello@sanisoft.com

Blog

Twitter bootstrap forms in CakePHP 3

There have been some threads on the CakePHP list about making Twitter bootstrap forms in CakePHP 3. The discussions centered around various approaches.

Do we just need to change the form templates? Do we need to create widgets? Or do we need to have our own form helper? The short answer is depends how much customizations you need. I will get to each use case later in the post for now lets get on with what we are going to do.

We will create an input type text which looks like this

Twitter bootstrap forms in CakePHP

And with an error…
Twitter bootstrap forms in CakePHP 3

The HTML for the above looks like

And the form helper syntax that we are going to use is

The approach I used was a combination of form-template files and creating a widget which overrides the Basic form widget.

Step 1

Create a file called form-templates.php in the src/Config/ folder.

Step 2

Put the following code in the form-templates.php (don’t forget to add the php opening tag)

Here I have defined an additional template called addoninput which has the additional SPAN to take the addon symbol yo use. I have also overridden inputContainer, inputContainerError and error templates to be more bootstrappy.

Step 3

The above two steps would have been enough if I did not want the addon, but I do want it as they look cool and are visually helpful to the users. To ensure that the addon works as expected I need to override the Basic widget. Copy the Basic.php from cakephp/src/View/Widget to app/src/View/Widget. The only change is the render method which now looks like

Since this was a quick experiment I have just done some checking for the key addon in $data and changed the template to addoninput.

Step 4

Lastly let the app know about your widget and form templates by adding the following to you app controller.

That is it! Some may argue that the process was much easier in CakePHP 2.x but I feel that this is a much cleaner way.

So what are the thumb rules for using custom templates, Widgets and form helpers? For me

  • Only markup changes – change just templates
  • Conditional markup, amalgamation of input fields (think datetime inputs) – create widgets
  • Additional processing of data, change in defaults like no label, no HTML 5 require checks by default – mess with custom form helper

Additional Reading

Want me to write a similar HowTo about some other CakePHP 3 topic? Just leave a comment…

About the Author

Dr. Tarique Sani is a pediatrician and forensic expert by education. He is a PHP programmer of 'wrote the book' caliber and has to his credit several very popular open source as well as commercial PHP projects. He leads a team of dynamic programmers at SANIsoft who have in-depth understanding of Web scalability, development tools and usability practices with strong developmental skills in PHP, MySQL/PostgreSQL, HTML, Javascript, and Linux/Apache

11 comments

  1. I also have this same question as it was referred to me very briefly by Jose Zap of the Cake team, but he never answered whether it was cake 3 compatible.

  2. Sorry, i didn’t find any app folder. i copy it into tunes/src/View/Widget (tunes is my project name) and then edit the render method in it. It show an error message.

    Error: Unable to locate widget class “App\View\Widget\Basic”

    • Ah! Yes the latest CakePHP 3 changed all that. Just search for the Basic.php file and copy it in the corresponding folder. I will update the tutorial when I get to my desktop.

  3. Hi Tarique, thank you for your post.
    There is one thing you should update.
    ‘_default’ => [‘App\View\Widget\Basic’] to ‘_default’ => [‘Basic’]

    I´d like to personalize addoninputContainer, and pass another parameter beyond ‘addon’ => ‘@’. It is the column such as col-sm-6. This param can allow me to personalize the size of container of addons… How could I make it?

  4. Pingback: Configurando Cake 3 Bootstrap Helpers | Fernando Aires

Leave a Reply