[TUTORIAL] Ajax com CakePHP - parte 1

[lucaswxp 22]

Olá pessoal, com este primeiro post falarei um pouco sobre ajax no CakePHP.

Esta é apenas a parte 1, e veremos apenas o básico, com o passar do tempo irei postando mais aqui no blog.

Pré-requisitos

 

* Conhecimento básico sobre o framework CakePHP

 

Conteúdo

 

Antes de fazer qualquer coisa, precisamos baixar o framework prototype a biblioteca scriptaculos. Teoricamente você só precisa do prototype, o scriptaculos apenas cuida dos efeitos. E para os amantes de jQuery, não se desesperem, no final eu deixei uma solução para vocês ;D

 

Primeiro de tudo vamos adicionar os helper Javascript, que incluirá o prototype em nossa app, e o helper Ajax que fará a mágica acontecer.

 

<?php
   class AlgumController extends AppController {
      var $name = 'Algum';
      var $helpers = array('Javascript' , 'Ajax');
      var $uses = null;
}
?>

Na requisição, precisaremos da action que conterá o link (index), e outra action que renderizará o view para quando o link for clicado (actionajax).

 

<?php
   class AlgumController extends AppController {
      var $name = 'Algum';
      var $helpers = array('Javascript' , 'Ajax');
      var $uses = null;
function index(){

}
function actionajax(){

$this->layout = 'ajax';

}

?>

Perceba que na action "actionajax" estamos utilizando o layout de ajax. O layout "ajax" é apenas um layout vazio, e já vem por padrão no cake. Isso é necessário, pois se utilizássemos o layout default, incluiria não apenas o conteúdo que queremos, mas também o layout todo.

Nosso controller já esta pronto, agora basta fazer os views.

actionajax:

 

<p>Conteúdo resgatado por Ajax.</p>

index:

 

<?php
// Incluimos o framework
echo $javascript->link('prototype' , false);

// O destino a ir quando o javascript estiver desabilitado
$href = array('action' => 'actionSemAjax');

$options = array(
 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar
 'url' => array('action' => 'actionajax'), // Onde buscar o conteudo
);
echo $ajax->link('Efetuar requisição remota.' , $href , $options);
?>
<div id="conteudoAjax"></div>

Em index, antes de tudo, incluimos o prototype que cuidará da requisição para nos.

 

Logo depois definimos uma variável $href. Esta variável é um parâmetro do método link - Ajax::link() - e será o conteúdo do atributo "href" da tag "a", isto é interessante, pois mesmo o usuário não tendo o javascript ele poderá ser encaminhado para uma outra action ou até a mesma (action) se utilizado o componente RequestHandler - falarei dele num outro post.

 

Depois vem $options, que é o parâmetro mais importante daqui. O índice "update" aponta para o ID do elemento HTML que será atualizados com as novas informações. E o índice "url" deverá apontar onde você quer buscar as informações, atenção que este índice sobrescreve $href.

 

Logo abaixo reunimos tudo o que definimos para formar o link, já pronto para efetuar a requisição. Para mais detalhes no método, veja na API.

 

E por ultimo, criamos nosso elemento HTML que será atualizado quando "link" for clicado.

 

Se você não quiser atualizar a div com o conteúdo, mas sim inserir antes ou depois do que ja esta presente na div, basta utilizar o índice "position", veja um exemplo:

 

$options = array(

        'update' => 'conteudoAjax', // Id do elemento que desejamos alterar

        'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo

        'position' => 'after' // Adiciona depois do conteúdo da div

    );

Position pode conter: top, bottom, after, ou before

 

OK! Esta funcionando, mas não fizemos o mais legal, que é ver aquele loader do ajax dando voltinhas enquanto carrega *-*

Fazer isso é muito fácil, basta de apenas mais duas linhas.

Primeiro vamos colocar a imagem no view:

 

<img src="caminho/ajax-loader.gif" id="ajax-loader" style="display: none" />

 

E depois basta adicionar o índice "indicator" em $options, indicando o ID do elemento que deverá aparecer enquanto a requisição é carregada:

 

$options = array(

    'update' => 'conteudoAjax', // Id do elemento que desejamos alterar

    'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo

    'indicator' => 'ajax-loader' // ID do loader

);

Funciona!

 

E ficamos por aqui =D, esta foi apenas a primeira parte, nas próximas, falaremos de coisas um pouco mais avançada, esta foi mais para pegar uma base ;D

Não perca tempo e pega logo seu ajax loader personalizado: http://www.ajaxload.info/

Até a próxima o/

Ah é! Já ia me esquecendo. Para quem usa jQuery, teve um cara que fez seu próprio AjaxHelper parecido com o original, só que utilizando jQuery, você pode efetuar o download dele aqui: http://loadsys.com/files/jquery_ajax_helper.zip

Atenção que não é completo que nem o padrão do cake, mas vem com os métodos mais utilizados.

 

FONTE: http://lucaspelegrino.com/

[Sérgio Macedo 0]

Belissimo tutorial… continue assim…

 

 

Para trabalhar com nossa acentuação PT-BR basta apenas adicionar uma instrução na sua view:

 

actionajax.ctp:

 

<?php header("Content-Type: text/html;  charset=ISO-8859-1",true); ?>
<p>Conteúdo resgatado por Ajax.</p>

[lucaswxp 22]

Não vejo o porque. UTF-8 também trabalha com nossa acentuação. O unico motivo que vejo para mudar de utf-8 para iso seria por incompatibilidade com o banco de dados =D