Como usar Javascript e CSS no CakePHP

Olá, hoje mais uma dica sobre CakePHP, vou ensinar como colocar CSS e Javascript corretamente no seu projeto CakePHP.

Os arquivos de CSS e Javascript devem ser colocados no diretório app/webroot, repare que ao abrir esse diretório, nos deparamos com a seguinte estrutura:

estrutura webroot

Nesse ponto já fica obvio onde devemos colocar nossos arquivos:

Arquivos de estilo na pasta CSS

Arquivos de script na pasta js

Arquivos de imagem na pasta img

depois de colocarmos nossos arquivos no devido lugar, devemos fazer o seguinte para que o arquivos sejam anexados a página de forma correta:

No nosso arquivos de layout padrão, no caso, o app/View/Layouts/default.ctp, dentro da tag <head> devemos colocar o seguinte código:

Para arquivos CSS:

echo $this->Html->css(array('estilo'));

Para arquivos javascript

echo $this->Html->script('javascript')

Não é necessário colocar a extensão do arquivo, o CakePHP cuida de tudo 😉

No arquivos final, quando o browser renderizar, o resultado será o seguinte:

<link rel="stylesheet" type="text/css" href="/cake/css/estilo.css" />
<script type="text/javascript" src="/cake/js/javascript.js">

Simples e bem fácil, essa foi uma dica de como colocar Javascript e CSS no seu projeto CakePHP.

É isso ai, até mais.