Como criar um CMS completo com CakePHP – Parte 7 – Gerando o menu e os elementos do template Artigo

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


Este artigo foi publicado a 4 anos, 2 meses, 1 semana, 6 dias atrás.

Depois de quase tudo pronto, separei essa aula para falar um pouco sobre organização no Cake, sobre elements e também sobre o sofrimento que muitos iniciantes encontram em se criar um menu, então aqui estou eu novamente para trazer-lhes a solução definitiva para seus problemas, ta bom exagerei, vamos pro artigo logo.

Antes de começar a criar os elements preciso acertar duas coisas, um helper para o menu e uma variável para dados de configuração.

O Helper do Menu

Para instalar o Helper basta você baixar este arquivo e descompactar na pasta app/View/Helper e abrir seu appController e adiciona-lo na variável helper aonde deveriam estar as configurações do Twitter Bootstrap, mas eu esqueci de adicionar nos arquivos das aulas passadas, então, aqui vai (isso fica antes do beforeFilter):

Gostou deste artigo?

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

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

Salve mas não feche ainda o appController.

A variável de configuração

A variável de configuração vai enviar para a view o titulo do site, estou mantendo como array para que você possa incluir as suas configurações posteriormente, como por exemplo o email para o contato, no beforeRender, depois de $this->theme=Configure::read("theme&"); adicione:

if($this->Auth->User()){
  $configs['titulo']=$this->Auth->User('titulo');
}else{
  $this->loadModel('Usuario');
  $user=$this->Usuario->find('first',array(
    'conditions'=>array('id'=>1),
    'fields'=>array('titulo')
  ));
  $configs['titulo']=$user['Usuario']['titulo'];
}
$this->set('configs',$configs);

Acontece que quando você for rodar o instalador que configuramos na aula 3, vamos ter um erro aqui, precisamos corrigir, não é a melhor forma (o ideal era fazer isso no Model), precisamos verificar se o banco de dados foi criado e se eu posso utilizar o Model Usuario, para isso temos duas formas que funcionam, podemos deixar as coisas assim:

$configs['titulo'] = 'Instalando CMS';  
    $this->set('user',false);  
    App::uses('SchemaInstallShell', 'Instala.Console/Command');  
    $this->My = new SchemaInstallShell();  
    $this->My->startup();  
    $db = ConnectionManager::getDataSource('default');  
    $db = $db->listSources();  
    $tables = array_diff($this->My->checkInstalacao(),$db);  
    if(emptyempty($tables)){  
        if($this->Auth->User()){  
            $configs['titulo']=$this->Auth->User('titulo');  
            $this->theme=Configure::read('theme');  
        }else{  
            $this->loadModel('Usuario');  
            $user=$this->Usuario->find('first',array(  
                'conditions'=>array('id'=>1),  
                'fields'=>array('titulo')  
            ));  
            if(!emptyempty($user)){  
                $configs['titulo']=$user['Usuario']['titulo'];  
                $this->theme=Configure::read('theme');  
            }  
        }  
    }  
    $this->set('configs',$configs); 

Achou confuso? Você também pode apenas abrir o InstalaAppController (App/Plugin/Instala/Controller/InstalaAppController.php) e adicionar um beforeRender para substituir o anterior com um set(‘user’,false), assim:

public function beforeRender(){  
    $this->set('user',false);  
}  

As duas formas funcionam quem se arrisca a dizer qual a melhor?

Ok, agora pode salvar e fechar.

Os Elements

Vou começar pelos mais simples, a ideia é que quando formos criar um tema seja possível incluir blocos de código e personalizar cada element de acordo com a necessidade do site em questão, por isso, vou evitar o máximo possível usar tags do CakePHP diretamente no Layout, vamos chamar tudo com elements, assim ganhamos flexibilidade e organização.

Ao todo teremos 6 elements e conforme eu for passando os nomes eles deverão ser salvo dentro de uma pasta chamada tema que estará dentro de Elements (app/View/Element/tema), ok.

O bodyclass.ctp

Este element ficará responsável por imprimir um class=”slug-da-pagina” no body, ou aonde nós quisermos, vou fazer um tratamento com isset para evitar que usemos retorne algum erro em caso de você usar outro Controller que não tenha um slug.

Conteúdo do arquivo:

<?php if(isset($conteudo['slug'])) echo 'class="'.$conteudo['slug'].'"';

O breadcrumb.ctp

Um bloco de migalhas de pão para o usuário se organizar e também ajudar no SEO do site.

Conteúdo do arquivo:

<p>Você está em: <strong><?php echo $this->Html->getCrumbs(' > ', $configs['titulo']);?></strong></p>

O conteudo.ctp

Aqui vamos colocar o bloco de códigos para o conteúdo do site, como este será o padrão vou colocar apenas o fetch('conteudo'), em cada tema poderemos substituir por um mais rico.

Conteúdo do arquivo:

<?php echo $this->fetch('content'); ?>

O head.ctp

Este aqui vai setar o conteúdo do nosso head, como as keywords, tag description, title e tudo mais.

Conteúdo do arquivo:

<?php if(!isset($seo)):?>
    <title><?php echo $configs['titulo'];?></title>
    <?php echo $this->Html->meta('icon');?>
    <?php echo $this->fetch('meta');?>
<?php else:?>
    <title><?php echo $seo['title'].' > '.$configs['titulo'];?></title>
    <?php echo $this->Html->meta('icon');?>
    <?php if(!empty($seo['tags'])) :?><meta name="keywords" content="<?php echo $seo['tags'];?>" ><?php endif;?>
    <?php if(!empty($seo['descricao'])): ?><meta name="description" content="<?php echo $seo['descricao'];?>" ><?php endif;?>
<?php endif;?>
<?php
    if($conteudo['slug']!='home')
        $this->Html->addCrumb($conteudo['titulo'],'/'.$conteudo['slug']);
    echo $this->fetch('css');
?>

O logotipo.ctp

Bem, vai exibir a o logotipo do site, no caso deste element padrão será o título cadastrado na instalação do CMS.

Conteúdo do arquivo:

<?php echo $this->Html->link($configs['titulo'],'/',array('class'=>'logotipo','rel'=>'index'));?>

O menu.ctp

E pra fechar, vamos usar um helper que criei pra gerar o menu, este element é interessante, ele faz uma requisição ao controller paginas na action menu e pega os itens de menu, isso consome algum recurso a mais, mas nossa aplicação esta leve portanto não acredito que vá precisar de cache.  A listagem de itens é repassado para o helper link que vai criar o HTML do menu, na aula em que vamos criar o tema propriamente dito vou explicar mais sobre o helper.

Conteúdo do arquivo:

<?php
    echo $this->Link->menu($this->requestAction('paginas/menu'));

Com isso os elements estão criados, vamos aplicar lá no nosso Layout do tema Default, só pra você ver um exemplo na prática.

Exemplo de utilização

Agora que você já tem tudo o que precisa vai ver como este método facilita para o desenvolvedor frontend trabalhar, com pouco código ele pode criar o tema que quiser e saber PHP vai ser apenas um plus, e isso estou falando de conhecimentos básicos, com uma documentação bem estruturada ele consegue começar a trabalhar com seu CMS em pouquíssimo tempo

Vamos começar com uma estrutura html básica:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <header id="header">
            <section id="logo"></section>
            <nav></nav>
        </header>
        <main>
            <section id="breadcrumbs"></section>
            <article id="conteudo"></article>
        </main>
        <script src="http://code.jquery.com/jquery.js"></script>
    </body>
</html>

Agora, para isnerir um element, usamos element('nome'); ?> aonde o 'nome' é o element a ser usado sem o .ctp, o caminho é relativo a pasta Element, portanto para inserir o menu, usaríamos 'tema/menu', ou seja, todos os elements do tema terão o prefixo 'tema' antes para organiza, então abra o app/View/Themed/Default/Layouts/default.ctp e adicione o HTML juntamente com os elements que criamos:

<!DOCTYPE html>
<html lang="pt">
    <head>
        <?php echo $this->Html->css('bootstrap.min',null,array('inline'=>false));?>
        <?php echo $this->element('tema/head'); ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body <?php echo $this->element('tema/bodyclass'); ?>>
        <header id="header">
            <section id="logo"><?php echo $this->element('tema/logotipo'); ?></section>
            <nav><?php echo $this->element('tema/menu'); ?></nav>
        </header>
        <main>
            <section id="breadcrumbs"><?php echo $this->element('tema/breadcrumb'); ?></section>
            <article id="conteudo"><?php echo $this->element('tema/conteudo'); ?></article>
        </main>
        <script src="http://code.jquery.com/jquery.js"></script>
    </body>
</html>

Claro que não é um tema muito elaborado, apenas um esqueleto para trabalharmos, fique a vontade para criar seu próprio tema, vou fazer isso no nosso ultimo artigo com este tema aqui.

Aproveite e veja como deve estar seu CMS, lembrando que devido as alterações desta aula o instalador não vai estar funcionando, veremos isso mais pra frente, espero que estejam curtindo.

A sequência deste tutorial falará sobre a criação do robots.txt e do sitemap.xml, estamos na reta final do nosso CMS, e ele já esta bem funcional, será que você já consegue criar um site com ele? Só não esquece de me mandar o link eim!

Então este foi 7º artigo de 9 que ensina como construir um CMS completo com CakePHP.


Cursos relacionados


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