Webpoint

Neste post irei demonstrar a regra de negócio por trás do SWFUpload, uma biblioteca javascript usada para controle de upload de arquivos no Browser utilizando o Flash. Ela controla o lado cliente enquanto o desenvolvedor a utiliza de uma forma extensível com a interface com o usuário. Em posts anteriores eu mostrei como esta interação pode ser feita com o jQuery, e muitas dúvidas surgiram de como receber os arquivos no lado servidor. Irei demonstrar utilizando o PHP com a framework CakePHP em como manipular os arquivos.

Foi utilizada o componente do cakePHP para este propósito.

Primeiramente, para acessar os arquivos no server-side utilizando PHP, temos basicamente o seguinte código:

$_FILE['Filedata'];

Sim, é a mesma forma como é recebido arquivos no server utilizando o input do tipo file. Esta biblioteca é totalmente não-obstrusiva. Você trata da mesma forma como trataria se o Javascript não estivesse habilitado. A diferença aqui é que ele faz a chamada para o script server-side a cada interação de upload, permitindo que seja feito múltiplos e com controles que não são possíveis com o upload padrão do formulário, como barra de progresso e tamanho do arquivo.

ler artigo completo

Vou mostrar neste post como validar em tempo real um login antes dele poder digitar a senha. Assim, quando o usuário digitar um login e pressionar TAB ou clicar com o mouse no campo de senha ele será alertado se este login é valido ou não. No exemplo que vou mostrar exibe um alerta, mas você pode fazer de outras maneiras, como mudar a classe do campo, adicionar uma mensagem, dentre outras coisas.

Usando ajax, você pode fazer requisições no servidor em qualquer evento javascript, seja um clique em um link ou um caractere digitado no teclado. Basta usar a imaginação e competência para usar no lugar certo e de uma maneira que facilite a vida, ao invés de complicar.

O raciocínio é o seguinte. Quando o usuário sair do campo de login (evento onBlur do javascript), uma requisição com o método $.post do Jquery será feita, passando o valor digitado no campo de login para ser processado. Se for encontrado algum registro no banco ele retorna em forma de xml o valor, caso contrário retorna outro valor. Esse valor então é processado na função de callback do método $.post e assim pode-se escrever um alerta ou usar o Jquery para fazer o que for preciso para alertar o usuário de que o login está errado.

Com poucas linhas de código é possível fazer isto com Jquery:

$("input[@name=login]").blur(function(){
var login = $(".login").val();
 
$.post("login_request.php",{login: login},
 
function(data){
 
var retorno = parseInt($(data, 'login').text());
 
if(retorno) {
 
alert("login encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// encontrado
 
} else {
 
alert("login não encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// não encontrado
 
}
 
});
 
});

No código acima, o campo com o atributo name com o valor login é selecionado e passado um evento blur do Jquery, que equivale ao evento onBlur do Javascript, ou seja, quando o usuário sair do campo ele é acionado. O valor do campo de login, que possui também uma classe login é guardada na variável login, para ser usado pelo método $.post do Jquery, que irá passar esse valor para o arquivo login_request.php que irá retornar o XML com a resposta do login encontrado ou não. O código do callback aceita como parâmetro data, que é o xml retornado para ser trabalhado com o Jquery, assim nas linhas:

 
var retorno = parseInt($(data, 'login').text());

O jquery seleciona o nó login e pega o valor dele através do método text. Preste bastante atenção na notação $(data,'login'). Ela procura uma tag login com a referência em data(o nó principal do xml, como se fosse o body). O parseInt irá transformar o valor em número, que é 1 para o login encontrado e 0 para o não encontrado. Assim a estrutura condicional abaixo irá emitir dois alertas caso retorne 1(verdadeiro) ou 0(falso).

O código do arquivo PHP encontra-se abaixo:

header('Content-type: text/xml');
 
$login = $_POST['login'];
 
include('global.php');
 
$db = conectar();
 
$consulta = "SELECT login from dados where nome='$login'";
 
$resultado = mysql_query($consulta,$db);
 
$encontrado = mysql_num_rows($resultado);
 
echo '
<principal><login>' . $encontrado . '</login></principal>';

O PHP irá fazer a consulta e irá verificar se há na tabela dados o login com o nome passado pelo método $.post do Jquery. Então ele irá retornar um XML com essa estrutura caso for encontrado:

 
<principal><login>1</login></principal>

Com isto fizemos passamos para o Jquery e trabalhamos como foi explicado acima.

O exemplo abaixo possui os seguintes logins na tabela para teste: alexandre, daniel e joao. Qualquer valor que não seja este digitado no login irá alertar como usuário não encontrado.

Verificação de login com Ajax utilizando o Jquery

Bem, já mostrei como fazer uma simples requisição pelo objeto httprequest. Agora vou mostrar algo um pouco mais complexo.

A maioria dos leitores chegam ao blog através de busca no Google por Ajax. Realmente todos querem saber técnicas de como fazer tarefas que antes era feita sem esta tecnologia e que com o Ajax a coisa fica um pouco mais complexa. Mas no final fica mais bonito também

Vou mostrar como inserir valores em um banco de dados e mostrar na tela sem reload na página. Tenho certeza de que tem outras maneiras de fazê-lo, talvez mais eficaz e mais completa, mas neste exemplo irei mostrar uma requisição mais "apurada" em relação ao primeiro post sobre ajax e assim dará continuidade a uma série de posts, pois é um assunto muito amplo, principalmente quando entra o XML e JSON que são os intermediários para que tudo aconteça perfeitamente.

Antes de tudo há um grande dilema que me atormentou e que foi discutido em vários fóruns e sites. Como passar as variáveis do formulário por Javascript? Se vamos trabalhar com Ajax utilizando o Jquery, sem ter nenhuma marcação javascript no HTML, como essas variáveis serão passadas? Neste caso mais simples, eu utilizei o método value() que pega o valor do formulário. Mais uma vez há outras maneiras, mas para este fim ela preenche bem para o que estou querendo ilustrar.

Primeiro vamos mostrar o arquivo principal. Ele mostra valores de um banco de dados mostrado em uma lista não ordenada(ul). A tabela possui apenas um campo id e o outro dados que é output no browser. Logo abaixo há um campo de texto e um botão de adicionar valores. Quando o botão é clicado, o valor é adicionado no banco, então uma mensagem e o campo adicionado aparecem com um fade do Jquery. Tudo isso sem reload na página.

Ajax com o Jquery, atualizando valores no banco de dados sem atualizar a página.

Abaixo o código Jquery

$(document).ready(function(){
  $('input.btn_enviar').click(function(){
  var nome_post = $('.nome').val();
  $.post("request.php",{nome: nome_post},function(data){
    $("p").remove();
    $("ul").after("
<li>" + data + "</li>
 
").next().fadeIn("slow");
   $("ul li:last").after("
<li>" + nome_post + "</li>
 
"
).next().fadeIn("slow");
});
return false;
});
});

Primeiro há a função do Jquery que executa todo código dentro dela depois do DOM ter carregado todos os elementos com sucesso. Depois ele especifica uma função que será executada ao clicar o elemento com a classe btn_enviar que é um botão input de adicionar na página de exemplo.

Ao se clicar neste botão o valor do input será passado para a variável nome_post através do método val que retorna uma string com o valor do campo.

Depois é chamado o método $.post que faz uma requisição através do objeto httprequest de uma maneira simples. Os parâmetros passados são a página(request.php), as variáveis(que será a passada pelo formulário) e a função callback que vulgarmente falando diz o que fazer com o conteúdo retornado que está armazenado na variável data.

Dentro desta função de callback ele apaga o conteúdo que está dentro do p inicialmente (para não ficar repetindo vários parágrafos de confirmação da inclusão). Insere a tag p depois do ul através do método after. No conteúdo desta tag está o dado retornado, que é a mensagem de adicionado com sucesso caso tenha adicionado, ou não foi possível adicionar se ocorreu algum erro. O método next junto com o fadeIn especifica que o elemento após o ul( que é o parágrafo que foi inserido pelo método after) irá aparecer com um efeito de fadeIn.

Agora vem a parte de inserir por Jquery mais um item na lista, que foi recentemente adicionado pelo banco. Através da seleção do CSS3 last, pegamos o último li do elemento ul com a sintaxe $("ul li:last") e inserimos mais um elemento li que irá conter o valor pego pelo input e irá ser exibido com o fadeIn do Jquery.

O return false aparece para que o botão não envie os dados por post e recarregue a página, ou seja, retira o comportamento padrão do botão.

O arquivo request.php pega o dado passado pelo método $.post, inserido no formulário pelo usuário, adiciona no banco de dados e dependendo da situação retorna um valor de sucesso ou de falha, informação que é manipulada pelo Jquery para mostrar ao usuário.

Arquivo request.php:

$nome = $_POST['nome'];include('global.php');
 
$db = conectar();
 
$query_adiciona = "INSERT INTO dados(id,nome)
values(null,'$nome')";
 
mysql_query($query_adiciona,$db);
 
$afetados = mysql_affected_rows();
 
if($afetados!=-1) {
 
echo "adicionado com sucesso!";
 
}
 
else {
 
echo "nao foi possivel adicionar ao banco";
 
}

No arquivo global.php está incluinda uma função chamada conectar, onde está passado os dados do banco.

Assim, fizemos uma inserção no banco e retornamos uma string. Isto é um pouco mais avançado que o primeiro post do assunto, mas ainda muito trivial. A "sofisticação" entra quando trabalhamos com XML, pois nele você não retorna somente um valor, mas sim uma coleção de valores. Com o Jquery e suas capacidades de navegar no documento, principalmente pelo Xpath, você pode manipular o XML e fazer o que for preciso.

O lado negativo deste método é que após a inserção não estamos visualizando o banco de dados, pois o dado inserido foi colocado através do Jquery e o que aparece na tela não é os dados retornados pelo banco atualizados. Creio que isto seja possível com o XML e irei postar na terceira parte.

Como disse anteriormente, há outros métodos e gostaria que se tiverem idéias, por favor, comentem.