Efetuado chamadas Ajax com CakePHP

Atenção! Para esse artigo julgo que o leitor já tem conhecimento básico do framework.

Bem, vou explicar nesse artigo uma das formas de realizar chamadas Ajax dentro do CakePHP. Na verdade, essa é apenas uma forma pessoal, pois não é a única maneira de fazer. Podemos utilizar, por exemplo, helpers que você pode baixar em http://bakery.cakephp.org/, mas faremos de uma forma simples e um pouco na mão mesmo.

Para esse exemplo iremos utiliza a biblioteca Javascript JQuery, então você deve baixa-la e coloca-la em app/webroot/js, nessa pasta devemos colocar todos os arquivos javascript do nosso sistema.

Antes de prosseguirmos irei detalhar mais um pouco essa pasta webroot. Ela tem um comportamento de raiz do projeto, graças as regras que foram definidas no arquivo htacess, dessa forma para acessar uma das subpastas dela basta fazermos “/js”, por exemplo. Vejamos suas subpastas e seus comportamentos:

webroot: arquivos públicos que podem ser acessados em todo o sistema.

• Css: arquivos de folha de estilos.
• Js: aquivos javascript.
• Img: imagens de todos os formatos suportados.
• Files: local recomendado para onde subir arquivos.

Usando esse padrão ficará mais fácil trabalhar com o HtmlHelper quando quisermos importar um arquivo.

Basicamente serão quatro etapas.

1. Montar o comportamento esperado pela view que fará a chamada Ajax.
2. Criar um arquivo Javascript com uma função que faça a requisição Ajax.
3. Criar uma função no Controller para a chamada Ajax e outra para a view.
4. Criar um arquivo ctp para rec o resultado da chamada e ser incorporado na página.

Essa maneira, de divisão por etapas, é só uma forma de organizar esse artigo, mas o que se deve é entender o funcionamento das requisições, ou seja, não importa a ordem das etapas e sim o que cada uma delas faz.

Etapa 1 - A View

Criarei uma view para o seu único propósito é exibir uma mensagem em uma div quando o usuário clicar num link.

Lembrando que primeiramente devemos importar o JQuery.

Veja o código.

Listagem 1: Criando a view

/*
usando o HtmlHelper para importar o arquivo jquery-1.7.2.js;
poderíamos importar sem o .js apenas com o nome do arquivo pois helper 
já reconhece o formato
*/
<?php $this->Html->script('jquery-1.7.2.js',array(‘inline’=>false)); ?>
<div><a id="click">Click aqui</a></div>
<div id="msg"></div> 

Salve o arquivo em /app/View/Controllers/ com o nome mensagem.ctp.

Usamos o método script() do HtmlHelper para os quais passamos, no primeiro argumento o nome do arquivo javascript e no segundo temos um array de opções, nesse caso estamos setando a opção “inline” que diz que o arquivo deve quer carregado no meio da view caso seja true e no cabeçalho da pagina caso seja false.

Etapa 2 - Criação do Javascript

Irei criar um arquivo que atenda as necessidades do problema, para isso usarei a função $.get() do JQuery para fazer uma chamada síncrona. Veja o código.

Listagem 2: arquivo Javascript com a chamada Ajax

$(document).ready(function() {				
  $("#click").click(function(){					
	$.get(
	  "/projeto/controllers/ajaxMsg",
	  null,
	  function(data) {	
		$("#msg").html(data);
	  }
	);	
    });			
});

Veja que estamos nós referenciando a uma função ajaxMsg do controlador controllers que vamos criar logo mais.

Salve o arquivo em /projeto/app/webroot/js com o nome ajax.js e não se esqueça de importar o novo arquivo criado na view que criamos anteriormente.

Etapa 3 - O Controller

No controller devemos criar duas actions, uma para a view e outra para o Ajax, já temos os nomes para as duas então vejamos como ficará o código.

Listagem 3: Criação do controller

<?php 
class ControllersContrller extends AppController{
	/**
		action para view mensagem 
		aqui não definiremos nenhum corpo pois
		não se faz necessário
	*/
	public function mensagem(){}
	/**
		função para a chamada ajax 
		funcionamento muito simples
		setamos uma string para uma
		variável chamada 'mensagem'
		que ficará disponível
		na em ajax_msg.ctp
	*/
	public function ajaxMsg(){
		$this->layout = "ajax";
		//aqui poderiamos ter, requisições a banco de dados
		//validações, chamada à outas DataSources etc.	
		$this->set("mensagem","Olá Mundo! CakePHP Ajax");	
	}
}
?>

Note que na action ajaxMsg() estou setando a variável layout para “ajax” isso seve para definir qual layout usar, veja, o CakePHP vem com layout padrão esse layouts podem ser criados ou personalizados, ele também traz o layout ajax.ctp que na verdade é um aquivo vazio para que apenas o que você queira seja levado para a tela, mas isso é você que escolhe.

Etapa 4 - Crindo a view de resposta do ajax.

Para o função também devemos ter um arquivo .ctp correspondente, ele é quem recebe o resultado do controller e é carregado na view de origem.

No nosso caso esse arquivo deve ser criado na mesma pasta da view de origem com o nome ajax_msg.ctp.

O código fica da seguinte forma:

Listagem 4: Código do arquivo ajax_msg.ctp

<?php 
 echo ($mensagem);
}
?>

Aqui foi muito simples, escrevemos o conteudo da variável $mensagem e só.

Agora é só testar aí, comigo aqui funcionou.

Espero que tenham gostado, deixem seus comentários e até a próxima.