Faça seu site com CakePHP – Parte 01

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↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → 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↳MySQL8 conteúdosMySQL + Adminer + Docker Compose: montando rapidamente um ambiente para usoData · abr 2019Banco de dados MYSQL no PHPStormDev (Back & Front) · jul 2019Criando um ambiente de desenvolvimento PHP mínimo com Docker – Parte 3Dev (Back & Front) · out 2019Ver tudo em Data → 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"><br />    <?php e($content_for_layout); ?><br /></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!