Como criar um CMS completo com CakePHP – Parte 4 – Criando o painel de gerenciamento e sistema de identificação de view por prefixo Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 4 anos, 11 meses, 2 semanas, 5 dias atrás.

Aqui estamos, 4º artigo da série de Como criar um CMS completo com CakePHP, dois artigos em uma semana.

Agora vamos configurar o nosso painel de controle, definindo a aparência e navegação com prefix.

Instalando os arquivos do frontend.

Antes de mais nada precisamos que todo o CSS, Javascript e Fontes já estejam a nossa disposição para trabalhar, assim quando começar, não vou precisar parar para baixar nada.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Para este painel vou usar Twiter Bootstrap, Jquery, Font Awesome e DataTables, então vamos lá.

Baixe isto e jogue na pasta public_html do seu site, apenas substitua as pastas existentes lá, ou se você (assim como eu) gosta de manter o mínimo possível, apague as pastas css, img e js e coloque estas no lugar.

Preparando as Views

Já pre-vendo que este artigo ficaria imenso a ponto de atrapalhar vocês, vou economizar algumas linhas e alguns arquivos vou dar pronto e comento o que achar interessante. Primeiramente baixe este arquivo e descompacte dentro de app/View/elements, ficando app/Views/elements/admin/.

Depois este arquivo aqui em app/View/ que vai adicionar duas pastas (Painel e Themed).

E por último este aqui na pasta Controller.

Explicando: No primeiro arquivo, temos 4 elements que na verdade são os que fizemos no artigo do Twitter Bootstrap, só compactei porque estava com a mão na massa, quem sabe te ajuda, também foi criada uma pasta chamada admin, vou falar sobre os arquivos que estão dentro dela:

header.ctp

O header.ctp abriga o conteúdo da barra que fica localizada no topo do painel de controle e vai exibir 3 itens:

  1. O nome do CMS (CMS Tutorial - Erik Figueiredo) que você pode editar se quiser
  2. Um link para editar as informações do usuário logado, nele eu dei uma variável chamada $user, ela contem todas as informações do seu usuário atual, prontas para serem impressas na sua página, guarde isso em mente, vou voltar a falar sobre a $user mais tarde.
  3. E por último um link para a home do site, com target blank (abrir em nova janela/aba), pra facilitar a vida do usuário né.

menu.ctp

O menu.ctp é o bloco que abriga o menu principal da administração (home, paginas, usuários), nela temos outra variável importante, que é a active, que vai controlar o css ativador do menu (para saber que seção estamos).

É recomendado que vocês abram esses arquivos e os conheçam, vou falar mais deles ainda, principalmente do menu.ctp.

Criando o Layout.

Abra o layout default.ctp (app/View/Layouts/default.ctp) e apague todo o seu conteúdo, isso mesmo zere seu arquivo todo, e vamos começar criar nosso layout.

Para isso eu usei o tema disponibilizado no site do Twitter Bootstrap, mas claro, com as devidas adaptações para o CakePHP:

<!DOCTYPE html>
<html>
    <head>
        <title>CMS Tutorial - Erik Figueiredo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <?php
        echo $this->Html->meta('icon');
        echo $this->Html->css(array('bootstrap.min','font-awesome','dataTables','admin'));
        echo $this->fetch('meta');
        echo $this->fetch('css');
        ?>
    </head>
    <body>
        <header id="header">
        </header>
        <main>
            <article id="content" class="container-fluid">
            </article>
        </main>
        <footer id="footer" class="navbar">
        </footer>
        <?php echo $this->Html->script(array('jquery.min','bootstrap.min','dataTables','admin'));?>
        <?php echo $this->fetch('script'); ?>
    </body>
</html>

Temos no body 3 partes, o header (cabeçalho), o conteúdo e o footer (o rodapé). No header vamos adicionar um navbar do Bootstrap:

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner container-fluid">
        <?php echo $this->Html->link('CMS Tutorial - Erik Figueiredo','/admin',array('class'=>'brand'));?>
        <?php echo $this->element('admin/header');?>
    </div>
    <?php echo $this->element('admin/menu');?>
</div>

Temos tres linhas de PHP, a primeira é um link utilizando o Helper Html do CakePHP (clique para saber mais sobre ele).

Na segunda linha temos a chamada para um arquivo que colocamos na pasta element, veja que eu coloquei 'admin/header', ou seja, linquei para app/View/Elements/admin/header.ctp, é uma maneira bem profissional, simples e ao mesmo tempo eficaz de criar blocos de código para o nosso CMS (que já usou outros CMSs já deve ter usado aquela típica chamada para imprimir um menu do site) e por fim uma chamada para o admin/menu.ctp. No conteudo vamos adicionar a chamada para o setFlash (os alertas do site, tipo quando salvamos algo e aparece a mensagem 'Você salvou a página com sucesso') e a chamada para o conteúdo.

<?php if($user) echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>

E por último, no rodapé, mais um link para o site do desenvolvedor, eu coloquei para o meu blog, você pode por para onde quiser.

<div class="navbar-inner container-fluid">
    <?php echo $this->Html->link('CMS Tutorial - Erik Figueiredo','http://blog.erikfigueiredo.com.br/',array('target' => '_blank', 'class'=>'brand text-center'));?>

</div>

Com isso nossas views já estão configuradas, se você abrir o site agora já vai notar diferenças, porém com alguns erros.

Routes e Prefix

O próximo passo é criar um sistema de renderização de layout por prefix, levando em conta que temos 3 layouts ao todo:

  1. A administração
  2. O tema do site
  3. Um layout em branco para o retorno ajax

Com isso em monte vamos ao arquivo app/Config/core.php e vamos criar logo no começo dele uma nova variável de configuração que irá definir o tema do site:

Configure::write('theme','default');

Agora localize o bloco do prefix (aqui no meu é a linha 127) e descomente, deve ficar assim:

Configure::write('Routing.prefixes', array('admin'));

Com isso agora podemos usar a variável  theme aonde quisermos no nosso Cake e também já temos acesso aos prefixos pra usar, por ultimo adicione mais 1 prefixo, feche e salve:

Configure::write('Routing.prefixes', array('admin','ajax'));

Por último, abra o routes.php (app/Config) e deixe assim:

Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
Router::connect('/admin', array('prefix'=>'admin','controller' => 'Painel', 'action' => 'index')); CakePlugin::routes(); require CAKE . 'Config' . DS . 'routes.php';

Isso vai setar a página inicial do site para usar o controller 'Pages', e enviar a variável com valor 'home' para a action display (esse já vem padrão do CakePHP) e também informar que a página inicial do painel vai usar o controller 'Painel' e a action 'index', as outras linhas configuram os roteamentos padrão do CakePHP.

Configurando o AppController para definir os layouts

Abra o app/Controller/AppController.php e insira uma função chamada beforeRender, elá sempre é executada antes da aplicação ser renderizada.

public function beforeRender(){
    //codigo aqui
}

E dentro dela vamos criar o sistema que indica qual é o layout que deve ser usado:

if(isset($this->request->params['prefix'])){
    if($this->request->params['prefix']=='admin')
        $this->layout='default';
    if($this->request->params['prefix']=='ajax')
        $this->layout='ajax';
    $this->set('user',array('id'=>1,'nome'=>'Erik'));
    $this->set('active','home');
}else{
    $this->theme=Configure::read('theme');
} if($this->request->is('ajax')){
    $this->layout='ajax';
}

Pronto, com isso tudo o que precisamos saber é que sempre que criar uma action você vai precisar inserir antes dela o prefixo que deseja, vou dar um exemplo pra você entender melhor, mas é só um exemplo, isso não vai em lugar nenhum.

A action add é:

public function add(){ }

Para setar o layout do painel:

public function admin_add(){ }

E para ela não ter layout nenhum:

public function ajax_add(){ }

Se não tiver um prefixo sera aplicado o tema do site.

Também implementei ali um reconhecimento automático de requisição ajax que vai setar o layout em branco sempre que você usar, testei com jquery e funcionou perfeitamente, assim você pode também criar navegações ajax no seu site, além de também já definir as variável $user e $action que são usadas nos arquivos que te passei, (falei delas acima).

Note que a variável $user tem um array, não se incomode com isso, no próximo artigo vou substituir, é só pra você ver como vai ficar, se quiser pode colocar seu nome ali também.

Conclusão

Se você acessar o site agora vai ver uma mensagem informando o caminho do tema que eu escrevi no arquivo (só pra ter algo) e se acessar seu-cakephp/admin verá a página inicial do painel, ou seja, você tem dois layouts diferente no mesmo aplicativo do CakePHP, na verdade tem 3, ainda tem o ajax que retorna o conteúdo solicitado sem nenhuma formatação.

No próximo arquivo vamos criar o sistema de controle de usuários, com cadastro, exclusão, alterações, login, logout e uma função para criar um "lembre de mim" :D.

Fiquem com Deus e até semana que vem.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!