Artigos sobre Desenvolvimento Web | Desenvolvimento Desktop | Freelancer | PHP | Java | jQuery | Ajax | Padrões Web | Joomla e outros...

Login dinâmico em AJAX - PHP | Padrão MVC | jQuery - Parte 3

Qui, 24 de Fevereiro de 2011 00:42

Finalmente chegamos ao último artigo da série sobre o Desenvolvimento de um Sistema de Login com Ajax, PHP, jQuery e Padronização MVC.


Até agora, temos um formulário com os seguintes componentes:

• Um campo do tipo "hidden" que armazena a ação que queremos executar (Usando Ajax, não precisaremos mais dele);
• Um campo do tipo "text" para armazenar o login informado pelo usuário;
• Um campo do tipo "password" para armazenar a senha informada pelo usuário;
• Um botão do tipo "submit" para enviar os dados ao servidor.

Como já sabemos, a função do Ajax em nosso projeto será enviar os dados informados pelo usuário ao servidor, para que tais dados possam ser validados, receber a resposta do servidor e exibí-la ao usuário.

Nas classes PHP que estruturamos, não fizemos a criação de uma SESSÃO para o usuário caso os dados informados estejam corretos.
Porém, na prática, quando efetuamos login em um sistema, os dados que informamos são validados do lado servidor, em seguida é criada uma sessão para o usuário, e o sistema redireciona o usuário para uma área restrita.

Material ensinando como criar um sistema de login web existem aos montes na web, e o foco destes artigos não é de forma alguma dar o peixo pronto pra ninguém.
Sendo assim, fica para o leitor a tarefa de pesquisar como fazer essa área restrita que só poderá ser acessada por quem criou uma sessão no servidor através do formulário de login. (Acredito que muitos que estão lendo este artigo já fizeram isso, e estão procurando apenas enriquecer seus conhecimentos e forma de como criar sistemas mais dinâmicos na web).

Bem, então vamos ao que interessa.

No arquivo index.php, iremos fazer apenas uma pequena alteração, que é mudar o tipo do botão que temos em nosso formulário.
Nosso botão está do tipo 'submit', e deveremos colocá-lo do tipo 'button'. Só isso.

Ah, e só para desencargo de consciência, é o seguinte:
Muito se fala na web sobre 'Javascript não obstrutivo', que em resumo, o discurso de quem defende essa ideia com unhas e dentes é:
"Desative o Javascript do seu navegador, e veja se seu sistema funciona. Se funcionar, então seu Javascript foi escrito de forma não-obstrutiva, mas se não, aí revise-o e reescreva-o".

Eu concordo plenamente que o código-fonte de qualquer sistema deve ser o menos poluído e obstrutivo possível.
Mas aqui estamos falando de Ajax, ou seja, estamos falando de usar e abusar do uso de Javascript, da biblioteca jQuery e todas suas incríveis funcionalidades.
Então, em nosso caso, seria até ignorância de nossa parte querer criar um sistema em Ajax onde há a possibilidade do Javascript estar desabilitado, e sendo assim, vamos partir do princípio de que o usuário do nosso sistema deixou o navegador com suas configurações funcionando perfeitamente.
É claro que, em um sistema mais robusto, deve-se fazer uma profunda Análise de Risco antes de implementar o sistema, para decidir quais serão as melhores tecnologias a serem usadas para o desenvolvimento do mesmo, mas isso é assunto para outros artigos.

Continuando....

Vamos então alterar o tipo do botão de nosso formulário de login no arquivo index.php.

O código atual do nosso botão está assim:

 
<button type="submit" name="btn_login" id="btn_login">Entrar</button>
 

Substitua pelo código abaixo:

 
<button type="button" name="btn_login" id="btn_login">Entrar</button>
 

Feito essa alteração, nosso arquivo index.php já está pronto para que o Ajax entre em ação.

Agora vem a melhor parte de todo nosso projeto, que será a implementação da função que faz a validação do login, e interage com o Servidor sem que a página seja recarregada. Ou seja, Ajax!

Isto será feito no arquivo function.js, que em nosso projeto encontra-se em:
js > functions.js

Bem, vou postar abaixo todo o código-fonte deste arquivo, e comentar cada parte do mesmo, mas para ficar mais fácil de entender, vamos ver o que é feito neste arquivo:

Primeiramente criamos uma função que vai ser chamada assim que a página for carregada, cuja finalidade é atribuir um evento ao botão de nosso formulário, onde ao ser clicado, irá chamar a função responsável por validar os dados do formulário, enviando à ela dois parâmetros: Login e Senha.

Na função que valida o login, primeiro verificamos se foi digitado algo em cada um dos campos (login e senha), e caso não, o sistema retorna uma mensagem de erro para o usuário, e no campo que não foi informado nada é atribuído foco.

Só relembrando, em nosso arquivo index.php, temos uma div com o id="resultado", onde na mesma iremos, através das funções da jQuery, exibir as mensagens recebidas pelo Servidor.

Bem, após o login e senha serem informados corretamente, então é hora do Ajax entrar em ação efetivamente.

Para dar mais interatividade em nosso sistema, a primeira coisa que fazemos é exibir uma mensagem na div 'resultado' alertando que o sistema está autenticando os dados.
Em seguida, usamos uma função Ajax nativa da jQuery, que é a função $.post().

Esta função funciona da seguinte forma:
Como primeiro parâmetro da função, devemos informar o local onde está o arquivo que vai receber os dados que iremos enviar.
Em seguida, informamos entre 'chaves' o nome dos atributos que serão recebidos via $_POST[] pelo servidor, e seus respectivos valores.
E por fim, encadeamos uma função onde armazenaremos a resposta do servidor, para que a mesma possa ser trabalhada posteriormente.

Em nosso caso, iremos apenas exibir a resposta na div 'resultado'.

Mas, só com isso, o leitor poderá fazer N coisas com esta implementação.

Bom, em resumo, toda implementação Javascript já foi feita, então vejamos abaixo como ficou nossa 'brincadeira':

Arquivo functions.js
 
 
/**
Nome: functions.js
Função: Toda codificação responsável pela manipulação dos dados no lado Cliente e funcionalidades AJAX é feita aqui.
*/
 
/** 
Aqui informamos ao navegador que, assim que o site for carregado, ele executará as instruções que estão neste bloco.
Igual o onload() que coloca-se na tag body do html 
*/
$(document).ready(function(){
 
  //abaixo usamos o seletor da jQuery para acessar o botão, e em seguida atribuir à ele um evento de click
  $("#btn_login").click(function(){
 
    //Aqui chamamos a função validaLogin(), e passamos à ela o ID dos campos que vamos manipular os valores
    validaLogin($("#login"), $("#senha"));
    /** Eu fazia isso aqui um pouco diferente, passando direto o valor do campo... Mas, com uma dica do
    William Moraes, adaptei dessa forma, que no final das contas, fica melhor, por estar trabalhando com 
    ponteiros no método, e não com o ID único dos input's  */
 
  });
 
});
 
/** Função responsável por validar os dados do formulário no lado Cliente, 
e enviar para a camada Controller (que está no Servidor) os dados informados pelo usuário para serem autenticados */
function validaLogin(login, senha){
 
  if(login.val() == ""){
    alert("Informe o login!"); //Exibe um alerta 
    login.focus(); //Adiciona foco ao campo login usando um ponteiro
    return; //retorna nulo
  }
  else if(senha.val() == ""){
    alert("Informe a senha!");
    senha.focus();
    return;
  }
  //Se o usuário informou login e senha, então é hora do Ajax entrar em ação
  else{
 
    //Adicionamos um texto na DIV #resultado para alertar o usuário que o sistema está autenticando os dados
    $("#resultado").html("Autenticando...");
 
    /**Função ajax nativa da jQuery, onde passamos como parâmetro o endereço do arquivo que queremos chamar, 
os dados que irá receber, e criamos de forma encadeada a função que irá armazenar o que foi retornado pelo servidor,
 para poder se trabalhar com o mesmo */
    $.post("includes/controller/UsuarioController.php?acao=autenticar", {login: login.val(), senha: senha.val()}, 
      function(retorno){
 
        //Insere na DIV #resultado o que foi retornado pelas classes de manipulação do Usuário (Se os dados estão corretos ou não)
        $("#resultado").html(retorno);
 
      } //function(retorno)
    ); //$.post()
 
  }
 
} //validaLogin()
 
 

Bem, chegamos ao fim de nosso projeto, e acredito que cumpri a proposta inicial que firmei com vocês desde o início desta nossa empreitada.

Programar é bem prazeroso pra quem realmente gosta, mas com certeza não é uma tarefa fácil, e desenvolver sistemas padronizados, onde as informações trafegam de forma simples e clara é mais difícil ainda.

A cada dia, novos conceitos, padrões e tecnologias nascem, e é necessário um estudo constante para que consigamos evoluir dia após dia.

Espero ter sido claro em minhas explicações e exemplos, e para qualquer dúvida ou sugestão, deixe seu comentário ou entre em contato.


Para baixar o projeto completo, clique aqui »

Login dinâmico em AJAX - PHP | Padrão MVC | jQuery

• Introdução »
  
• Parte I »
  
• Parte II »
  
• Parte III »