CakePHP

Criação de layouts CakePHP – Introdução ao CakePHP para Web Designers.

CakePHP
Image via Wikipedia

Partiremos do principio de que sua instalação do CakePHP esteja funcional.
É desnecessário a utilização de uma conexão com banco de dados.

Abaixo estrutura de diretórios utilizada:
/aplicacao/app
/views
---------> /pages
---------> /layouts
/webroot
---------> /css

Obs: Arquivos com extensão .ctp são os arquivos utilizados para as view do CakePHP, os mesmos aceitam códigos HTML e PHP.

Criação de Layout:
Por padrão, o CakePHP utiliza o arquivo default.ctp que deverá ser criado no diretório /app/views/layouts como base para layout da aplicação.
No mesmo inserimos o código abaixo:

<html>
<head>
<title>Exemplo de layout CakePHP.</title>
</head>
<body>
<!-- Inicio saída do conteúdo da aplicação -->
<?php echo $content_for_layout; ?>
<!-- Fim saída do conteúdo da aplicação -->
</body>
</html>

Obs: Note que o mesmo recebe a estrutura básica de um arquivo HTML, sendo que, como dito acima, o arquivo é a base do layout, e nele estará contido o conteúdo das paginas ($content_for_layout), como textos, imagens etc.

Criação do conteúdo:
Crie os arquivos contato.ctp e home.ctp no diretório /app/views/pages e insira respectivamente nos arquivos, os códigos html listados abaixo:

<!-- contato.ctp ---><h1> Contato </ h1>
<!-- home.ctp ---> <h1> Home </ h1> <p> Página inicial da aplicação </ p>

Navegação entre as paginas da aplicação (Links):
Utilizaremos o HTML Helper link para direcionar nossas URLs.
No arquivo default.ctp, introduza o seguinte código, logo após a abertura da tag <body>:

<div id="navegacao">
<?php echo $html->link('Home', array('controller' => 'pages', 'action' => 'home')); ?>
 |
<?php echo $html->link('Contato', array('controller' => 'pages', 'action' => 'contato')); ?>
 |</div>

Acesse o projeto e verifique como o mesmo se comporta.

http://localhost/sua_aplicacao

Boa sorte = )

Aplicando estilos CSS – CakePHP

Anúncios

4 comentários sobre “Criação de layouts CakePHP – Introdução ao CakePHP para Web Designers.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s