Configurar o CakePHP para usar o Twitter Bootstrap automaticamente Artigo

Temos dois casos de uso aqui, Twitter Bootstrap 2.3.2 e o Twitter Bootstrap 3, bem como escrevi este artigo a muito tempo atraz, ele só falava da versão mais antiga com CakePHP 2, vou atualizar para a nova versão. Não se assuste, vou manter a anterior também.

Twitter Bootstrap 3

CakePHP 3

Para o CakePHP 3 com Twitter Bootstrap 3 eu criei um plugin que automatiza muito as coisas, ele está disponível no GitHub do CakePHP Brasil, é muito simples de usar.

Para instalar

Você pode instalar usando composer através do comando a seguir.

composer require cakephp-brasil/twitter-bootstrap

Certifique-se de carregar o plugin em config/bootstrap.php.

Plugin::load('TwitterBootstrap');

Para criar views com bake

Apenas adicione --theme TwitterBootstrap no final do comando, por exemplo:

bin\cake bake all MyModel --theme TwitterBootstrap

Para ativar o formulário

Em src/View/AppView.php adicionar $this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']); dentro de initialize(), desta forma:

public function initialize()
{
    $this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']);
}

Para ativar o layout

Informe $this->viewBuilder()->theme('TwitterBootstrap'); no seu controller (por exemplo, AppController para usar em qualquer página).

Em src/View/AppView.php adicionar $this->loadHelper('Form', ['className' => 'TwitterBootstrap.Form']); dentro de initialize(), desta forma:

Para alterar o título

No AppController apenas informe com $this->set('project_name', 'Título que você quer').

Para alterar o menu superior direito

Crie um arquivo chamado nav-bar-right.ctp dentro de src/Template/Element (você pode copiar o modelo dentro de vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element)

Ou veja a Publicando as views necessárias automáticamente

Para alterar o menu superior esquerdo

Crie um arquivo chamado nav-bar-left.ctp dentro de src/Template/Element (você pode copiar o modelo dentro de vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element)

Ou veja a Publicando as views necessárias automáticamente

Publicando as views necessárias automáticamente

Contribuição do @josimar-lemos

Tava achando muito trabalhoso (programador preguiçoso on) ter que copiar e colar os Elements do Tema toda vez que precisava mexer neles..

Criei um Shell para facilitar o processo, coloquei só uma opção para copiar todos os Elements de uma vez, mas posso incrementar isso aí se quiserem.

Para testar:

$ cd path-to-project
$ bin/cake TwitterBootstrap.publish

Ou:

$ cd path-to-project
$ bin/cake TwitterBootstrap.publish all

Para contribuir

Faça um fork do projeto e mande seus pull requests.

CakePHP 2

Bem, você pode baixar estes arquivos e descompactar dentro do seu diretório app, ele não substitui nada, apenas acrescenta alguns arquivos no diretório Console/Template e um Helper, diferente da versão 2.3.2 fui eu mesmo que desenvolveu e ainda não tem o pagination, mas vou deixar uma dica de como usar ele. Baixe os arquivos aqui A primeira coisa a fazer é abrir o AppController.php e configurar o Helper:

public $helpers = array('Html', 'Social', 'Form'=>array('className'=>'FormTb'));

Pronto, pode usar normalmente o seu form, uma dica é usar o $this->Form->input('Salvar', array('type'=>'submit')) em vez do $this->Form->end('Salvar'), você precisa incluir o end, mas vazio, não sei porque, apenas prefiro assim, prometo que atualizo pra vocês. Outra alteração que fiz foi no bake, quando for gerar seu CRUD use o comando -t bootstrap, exemplo:

Consolecake bake all -t bootstrap

Como disse acima, ainda não disponibilizei a paginação no Helper, por tanto vou deixar um exemplo de código já pronto pro Twitter Bootstrap 3:

Paginator->prev('«', array('tag' => 'li'), '<a href="">«</a>', array('tag' => 'li','class' => 'disabled', 'escape'=>false));
echo $this->Paginator->numbers(array('separator' => '','tag' => 'li','currentClass'=>'active', 'currentTag'=>'a'));
echo $this->Paginator->next('»', array('tag' => 'li'), '<a href="">»</a>', array('tag' => 'li','class' => 'disabled', 'escape'=>false));

?>

O mais legal é o bake gerar o crud pra gente já formatado para o Twitter Bootstrap, realmente ganhamos muito tempo. Lembrando que ainda estou testando tudo e está longe de ser perfeito, mas tem me ajudado muito. Agora pra quem precisa da versão 2.3.2.

Twitter Bootstrap 2.3.2

CakePHP 2

Essa dica tem como base o plugin do Slywalker (o amigo Cauan (www.cauancabral.net) que me falou, eu não lembrava), eu separei só o que achei necessário e também fiz alguma correção. A ideia era que o CakePHP gerasse a estrutura necessária para o Twitter Bootstrap sozinho, comigo apenas setando o básico da coisa, Assim, para criar um input text eu apenas usaria: $this->Form->input('nomeDoInput') e pronto, ele geraria a estrutura base para o Twitter Bootstrap.  O mesmo seria com paginação, retorno do erro nos formulários e tudo mais. Em breve o link para a versão 3 do Twitter Bootstrap estará disponível aqui. Atenção: Tinha achado redundante incluir estas informações, mas na verdade se mostrou algo bem necessário, dado ao grande número de pessoas com este tipo de dúvida, então vamos lá:

Sim, você precisa baixar o Twitter Bootstrap e coloca-lo na webroot, note que tanto o CakePHP quanto nosso framework frontend favorito usam a mesma estrutura de pastas, então, se você descompactar o arquivo do Bootstrap, copiar as 3 pastas (css, js e img) e colar na pasta webroot do Cake.

Agora sim, continuando: Pra isso eu precisei de duas coisas: um helper que fizesse o trabalho grosso pra  mim (neste caso são 3) e alguns elements para o retorno do setFlash;

Instalando os Helpers para Twitter Bootstrap no CakePHP

Se alguém tinha baixado a versão no gitHub, pode baixar novamente esta nova, que atualizei e está funcionando perfeitamente na versão 2.3.2 do CakePHP Baixe os arquivos aqui: Twitter Bootstrap Helpers Para CakePHP Descompacte na pasta do seu Projeto Cake de forma a sobrescrever a pasta app. Desta forma ele irá criar 3 novos arquivos na pasta app/View/Helper (BootstrapFormHelper.php, BootstrapHtmlHelper.php, BootstrapPaginatorHelper.php) e 1 na pasta app/Config (html5_tags.php). Pronto, agora é só chamar os helpers no AppController:

public $helpers = array(
    'Html' => array('className' => 'BootstrapHtml'),
    'Form' => array('className' => 'BootstrapForm'),
    'Paginator' => array('className' => 'BootstrapPaginator'),
);

Por ultimo, você precisa ir no seu View/Layouts/default.ctp (se este for a view principal do seu Cake) e incluir uma chamada $this->Html->css(); vazia (sem nada no parenteses) e outra $this->Html->script() também vazia, o tema principal já inclui uma chamada css com o 'cake. generic', é só remover isso. Obs.: Se mesmo assim não funcionar (pode acontecer em algumas estruturas diferentes da instalação padrão do Cake, como a do CMS que estou ensinando aqui no Blog) não custa nada inserir um 'bootstrap.min' alí dentro, ok (assim: $this->Html->css('bootstrap.min')). Neste ponto se você estiver fazendo em uma instalação do Cake sem alterações e sua aplicação estiver com esta aparência, então está tudo ok: [caption id="attachment_198" align="aligncenter" width="400"] O CakePHP corretamente configurado com os Helpers e CSS do CakePHP[/caption] Uma nota importante é que a checagem do CakePHP para as URLs amigáveis é feita via css, ou seja, ele coloca ali uma classe que deixa a informação invisível, portanto não vai acontecer com o Twitter Bootstrap e você mesmo deve ajustar isso adicionando:

#url-rewriting-warning{
    display:none;
}

ao seu css.

Criando as saídas do setFlash para Twitter Bootstrap

Os alerts é bem facinho, é só criar na pasta app/View/elements 4 arquivos da seguinte forma sucesso.ctp

<div class="alert alert-block alert-success"><?php echo $message; ?></div>

erro.ctp

<div class="alert alert-block alert-danger"><?php echo $message; ?></div>

alerta.ctp

<div class="alert alert-block"><?php echo $message; ?></div>

info.ctp

<div class="alert alert-block alert-info"><?php echo $message; ?></div>

Pronto, agora para usar, adicione no Controller:

$this->Session->setFlash(__('Minha mensagem!'),'sucesso');

E aonde está escrito sucesso troque pela view que quer usar. E pronto, agora você tem um CakePHP que pensa Twitter Bootstrap, aproveite e adicione botões novos no seu site, totalmente personalizados.