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.
Gostou deste artigo?
Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!
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.