Olá, galera!

Hoje vou iniciar a série de artigos “Faça seu site com CakePHP”. Pretendo passar aqui desde a adaptação de seu layout html ao Cake, como cadastro de usuários, envio de email, sistema de autenticação, recuperação de senha, sistema de notícias com comentários, administração entre outras dicas. Veja um sumário do que teremos:

1. Integrando Layout HTML
2. Sistema de Artigos com Categorias
3. Sistema de Comentários e Tags
4. Formulário de Contato / Indicação de Artigo
5. Cadastro de usuários
6. Autenticação / Nivel de acesso
7. Busca
8. Site Multi-idioma
9. Utilizando os Helpers
10. Boas práticas de programação

Antes de iniciar o primeiro artigo desta série, vou supor que você já fez download da última versão do Cake (1.2.5 Stable – http://cakephp.org), já colocou os arquivos em uma pasta dentro do servidor e já tem uma base de dados MySql criada.

Neste exemplo, baixei um template gratuito na internet para usá-lo nessa série. NÃO focarei estes tutoriais em design, validações html, w3c etc., mas na programação do site em si.

Após baixar o template, descompacte-o e acesse sua pasta. Você terá o arquivo index.html, o style.css e uma pasta images. Veremos agora como usá-los.

O Cake, por padrão, carrega dois arquivos em sua instalação padrão, o default.ctp e o home.ctp. Estes arquivos se encontram dentro da pasta “cake/libs/views/layouts/default.ctp e cake/libs/views/pages/home.ctp”.

Criaremos, agora, estes arquivos dentro da nossa pasta do projeto atual do Cake. Ex. cake1.2.5/app/views/pages/home.ctp e cake1.2.5/app/views/layout/default.ctp

Copie as imagens da pasta images para a pasta webroot/img e copie o arquivo style.css para a pasta webroot/css. Abra em seu editor Html ou IDE o arquivo index.html. Iremos separar este arquivo em dois trechos de códigos, o que será inserido no arquivo default.ctp, que no caso é o layout padrão de nosso site, e o trecho que será inserido no arquivo home.ctp, que será carregado apenas na página principal de nosso site.

Aprincípio, copie todo arquivo index.html para dentro do arquivo default.ctp.

Acesse seu site e veja o que aconteceu. Ele estará desconfigurado, pois não está carregando corretamente o arquiovo css nem as imagens.

Para carregar corretamente o css, devemos substituir o trecho:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

por:

<?php e($html->css('style', array(), array('media'=>'screen'))); ?>

Abra o arquivo style.css para alterarmos o caminho das imagens que são carregadas via CSS.

Substitua images/imagem.jpg por ../img/imagem.jpg  (trocar images/ por ../img/)

Visualize o site e veja as mudanças!

Agora, vamos utilizar o Helper HtmlImage do Cake para carregar corretamente as imagens dentro do arquivo default.ctp.

Substitua a tag normal de imagem:

<img src="images/img01.jpg" width="667" height="118" alt="" />

por:

<?php e($html->image('img01.jpg', array('width'=>'667', 'height'=>'118', 'alt'=>''))); ?>

Utilize o helper de imagem para substituir as outras imagens contidas no layout.

Agora, vamos retirar parte do código do arquivo default.ctp, para inseri-lo no arquivo home.ctp.

Dentro do nosso layout temos uma DIV de nome content (div id=content). Vamos copiar o conteúdo que está DENTRO desta DIV, no caso a tag <div class=”post”> e seu conteúdo. Cole este conteúdo no arquivo home.ctp.

No espaço que ficou dentro do arquivo default.ctp, iremos inserir a variável $content_for_layout, que será responsável por carregar todo conteúdo das outras páginas de nosso site dentro de nosso layout padrão.

Este trecho de código deverá ficar assim:

<div id="content">
    <?php e($content_for_layout); ?>
</div>

O Cake possui helpers com comandos para ajudar na programação/desenvolvimento, buscando facilitar a vida do programador, entre eles temos o e(), que substitui o comando ECHO. Ao invés de usarmos echo $variavel, usamos e($variavel).

Salve o arquivo home.ctp e visualize o site.

Veja se ele carregou corretamente todas as imagens do css e do html, e se carregou corretamente o arquivo home.ctp dentro do default.ctp.

Bom, galera, termino aqui a primeira parte da nossa série de artigos “Faça seu site com CakePHP”. No próximo, vou mostrar como utilizar outros helpers nativos do Cake e dar início ao desenvolvimento do nosso sistema de notícias.

Até o próximo artigo!