RibaFS Portal

13.3 – Aplicativo com Bootstrap

Uma mente ousada está sempre mais preparada para desafiar a sorte e atingir o sucesso!

Criação de Layouts

Esta versão cria 3 novos layouts e os aplica respectivamente aos usuários:

super

admin

manager

- Baixei os arquivos:

bootstrap.css, jquery.min.js e bootstrap.css

Alterei o plugin TwitterBootstrap para usar offline

https://github.com/CakePHPBrasil/TwitterBootstrap

composer require cakephp-brasil/twitter-bootstrap

bin/cake plugin load CakephpBrasil

Em src/View/AppView.php adicionar dentro de initialize(), desta forma:

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

No AppController.php

$this->viewBuilder()->theme('TwitterBootstrap');

$this->set('project_name', 'Título que você quer');

Para alterar o menu superior direito

Crie um arquivo
src/Template/Element/nav-bar-right.ctp

Você pode copiar o modelo dentro de
vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element

Para alterar o menu superior esquerdo

Crie um arquivo
src/Template/Element/nav-bar-left.ctp


Você pode copiar o modelo dentro de
vendor/cakephp-brasil/twitter-bootstrap/src/Template/Element

Gerar o código
bin\cake bake all MyModel --theme TwitterBootstrap

Para testar:

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

Ou:

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


- Copia do arquivo app/webroot/css/bootstrap.css para bootstrap.super.css, bootstrap.admin.css e
bootstrap.manager.css (todos no webroot/css)

Editei cada um dos que criei e apenas alterei a cor de fundo do body na linha do background-color abaixo:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #B78999;
}

- Copiei o arquivo
/vendor/cakephp-brasil/twitter-bootstrap/src/Template/Layout/default.ctp
para super.ctp, admin.ctp e manager.ctp

- Editei cada um dos 3 criados (super.ctp, admin.ctp e manager.ctp) e alterei a linha:

	<?= $this->Html->css('bootstrap');?>

para
	<?= $this->Html->css('bootstrap.super');?>
	<?= $this->Html->css('bootstrap.admin');?>
	<?= $this->Html->css('bootstrap.manager');?>

- Adicionei ao initialize() do AppController.php:

		$this->set('project_name', 'Título do Aplicativo');
		if($loguser == 'super'){
			//$this->viewBuilder()->theme('TwitterBootstrap');
			$this->viewBuilder()->layout('TwitterBootstrap.super');
		}elseif($loguser == 'admin'){
			$this->viewBuilder()->layout('TwitterBootstrap.admin');
		}elseif($loguser=='manager'){
			$this->viewBuilder()->layout('TwitterBootstrap.manager');
		}elseif($loguser=='user'){
			$this->viewBuilder()->layout('TwitterBootstrap.default');
		}

Assim, ao logar cada usuário terá seu próprio ambiente.
Claro que falta fazer um bom acabamento nos layouts, nas cores.


Veja também um tutorial similar que mostra a implementação do Bootstrap no CakePHP 3:
https://github.com/ribafs/cakephp-app-bs