Twitter Bootstrap et CakePHP v3

Si comme moi vous utilisez le Bootstrap de Twitter et CakePHP v3, voici un petit bout de code qui vous permettra de styler automatiquement tout vos formulaires avec le CSS de Bootstrap.

Créez un fichier que nous appellerons template_forms.php, placez ce fichier dans le répertoire « config ».

Dans ce fichier, placez le code suivant :

<?php
$config = [
    'checkboxFormGroup'   => '<div class="col-xs-5"><div class="checkbox">{{label}}</div></div>',
    'checkbox'            => '<input type="checkbox" value="{{value}}" {{attrs}}>',
    'checkboxWrapper'     => '<div class="form-group"><div class="col-sm-offset-5 col-xs-7">{{label}} {{input}}</div></div>',
    'inputContainer'      => '<div class="form-group" {{required}} >{{content}}</div>',
    'input'               => '<div class="col-xs-7 col-sm-10 col-lg-10"><input class="form-control input-sm" type="{{type}}" name="{{name}}" {{attrs}}></div>',
    'label'               => '<label {{attrs}} class="col-xs-5 col-sm-2 col-lg-2 control-label">{{text}}</label>',
    'select'              => '<div class="col-xs-7 col-sm-10 col-lg-10"><select class="form-control input-sm" {{attrs}} name={{name}}>{{content}}<select></div>',
    'error'               => '<p class="text-danger">{{content}}</p>',
    'textarea'            => '<div class="col-xs-7 col-sm-10 col-lg-10"><textarea class="form-control input-sm" name="{{name}}" {{attrs}}>{{value}}</textarea></div>',
    'inputContainerError' => '<div class="form-group has-error" {{required}}>{{content}}</div>{{error}}',
];
?>

Dans ce fichier nous déclarons tous les différents éléments d’un formulaire et nous les stylons avec le CSS Bootstrap.
Ensuite dans votre classe de base AppController.php, paramétrez le helper « Forms » de cette façon :

public $helpers = [
            'Form'      => [
                'templates' => 'template_forms',
            ],
];

De cette façon lorsque vous créerez un formulaire à l’aide du helper « Form », les éléments seront stylés selon ce qui est indiqué dans le fichier « template_forms ».

Si dans une vue, vous voulez modifier le style d’un élément, sans toucher au fichier de config « template_forms », alors vous définissez un nouveau style de cette façon (dans la vue) :

$myTemplates = [
        'checkboxFormGroup' => '<div class="col-xs-offset-5 col-xs-5"><div class="checkbox">{{label}}</div></div>',
        'checkboxWrapper' => '<div class="form-group"><div class="col-sm-offset-5 col-xs-7">{{label}} {{input}}</div></div>',
        'inputContainer' => '<div class="form-group" {{required}} >{{content}}</div>',
        'input' => '<div class="col-sm-10"><input class="form-control input-sm" type="{{type}}" name="{{name}}" {{attrs}}></div>',
        'label' => '<label {{attrs}} class="col-sm-2 col-sm-2 control-label">{{text}}</label>',
        'select' => '<div class="col-xs-10"><select class="form-control input-sm" {{attrs}} name={{name}}>{{content}}<select></div>',
        'error' => '<p class="text-danger">{{content}}</p>',
        'textarea' => '<div class="col-xs-7"><textarea class="form-control input-sm" name="{{name}}" {{attrs}}>{{value}}</textarea>',
        'inputContainerError' => '<div class="form-group has-error" {{required}}>{{content}}</div>{{error}}',
    ];
    $this->Form->templates($myTemplates);

Avec ces 2 façons vous n’aurez plus besoin de vous inquiéter de l’apparence de vos formulaires, tout est automatique !

Voilà une bonne raison de passer sous CakePHP v3 😉

Comments: 1

  1. Elyes says:

    Toujours bon à savoir!
    merci beaucoup 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *