Login dinâmico PHP + MySQL com jQuery

Como criar um sistema de login bem simples, porém dinâmico, ou seja, vamos fazer a validação sem a necessidade de recarregar a página, utilizando AJAX.

Por Programação Pular para comentários
Login dinâmico PHP + MySQL com jQuery

Olá pessoal, tudo bom? A pedido de algumas pessoas, hoje vou falar como criar um sistema de login bem simples, porém dinâmico, ou seja, vamos fazer a validação sem a necessidade de recarregar a página, utilizando AJAX.

1. Banco de dados


Inicialmente iremos criar nosso banco de dados:
CREATE TABLE `usuario` (
  `usuario_id` INTEGER  NOT NULL AUTO_INCREMENT,
  `login` VARCHAR(28)  NOT NULL,
  `senha` varchar(80)  NOT NULL,
  `nome` varchar(60)  NOT NULL,
  PRIMARY KEY (`usuario_id`)
)
ENGINE = MyISAM;

Bem simples, apenas contém uma chave primária (ID), o login, a senha e o nome do usuário. Vamos agora inserir alguns registros de exemplo:
INSERT INTO usuario VALUES (1, 'admin', 'admin', 'Administrador');
INSERT INTO usuario VALUES (2, 'rafael', 'couto', 'Rafael Couto Alves');
INSERT INTO usuario VALUES (3, 'foo', 'bar', 'Fulano');


2. Formulário de login (index.html)


Vamos criar a aparência da nossa página de login:


    
        
        Entrar
    
    
        
Entrar





Nada de mais, é apenas um formulário HTML com dois campos, login e senha, e um botão de submit. No cabeçalho (head) de nossa página, vamos incluir uma biblioteca e um plugin javascript:


Linha 1: incluindo a biblioteca indispensável: jQuery.
Linha 2: incluindo um plugin para jQuery, o jQuery Form. Ele facilita a requisição AJAX, pois não precisamos pegar e passar cada campo (como é feito nesse artigo, por exemplo), o plugin já faz este trabalho pela gente.


3. jQuery (index.html)


Nessa parte, vamos recuperar as informações do formulário e enviar para a página PHP. Adicione o seguinte código no cabeçalho de nossa index.html:
// Quando carregado a página
$(function($) {
    // Quando enviado o formulário
    $('#frmLogin').submit(function() {
 
        // Limpando mensagem de erro
        $('div.mensagem-erro').html('');
 
        // Mostrando loader
        $('div.loader').show();
 
        // Enviando informações do formulário via AJAX
        $(this).ajaxSubmit(function(resposta) {
 
            // Se não retornado nenhum erro
            if (!resposta)
                // Redirecionando para o painel
                window.location.href = 'painel.php';
            else
            {
                // Escondendo loader
                $('div.loader').hide();
 
                // Exibimos a mensagem de erro
                $('div.mensagem-erro').html(resposta);
            }
 
        });
 
        // Retornando false para que o formulário não envie as 
        //informações da forma convencional
        return false;
     });
});


Vamos analisar o código:
  • Linha 5: Aplicamos o evento submit no formulário (#frmLogin), ou seja, assim que o usuário clicar em entrar este método será chamado.
  • Linha 14: Através do método ajaxSubmit() do nosso plugin, as informações do formulário são enviadas para seu action (logar.php), através do método definido no formulário, no caso, POST. Isso é o equivalente ao .post() nativo do jQuery, porém o plugin já captura e envia as informações para nós;
  • Linha 17: Verificamos se a resposta retornada pelo nosso logar.php é falsa, ou seja, 0;
  • Linha 19: Se a resposta for falsa, significa que o login deu certo, portanto redirecionamos o usuário para seu painel (painel.php);
  • Linha 26: Se o login não deu certo, colocamos a mensagem retornada pelo logar.php na div cujo a classe é mensagem-erro;
  • Linha 32: Precisamos retornar false para que o formulário não seja enviado, pois nós já enviamos as informações e recebemos a resposta via AJAX.


4. Conexão e configuração (config/conn.php)


Aqui vamos criar nosso arquivo para fazer a conexão com o banco de dados, nesse arquivo também vamos criar um método para carregar automaticamente a classe de login que veremos adiante.


5. Logando (ajax/logar.php)


Este arquivo será responsável por fazer criar o login do usuário. Para facilitar e diminuir muitas linhas de código eu criei uma classe simples (a classe deste artigo foi melhorada, porém os métodos são os mesmos) para fazer a ações básicas de um login. Portanto, nosso código fica da seguinte maneira:
logar($login, $senha))
    // Retornando falso, ou seja, esta tudo certo
    echo false;
else
    // Retornando mensagem de erro
    echo 'Login ou senha inválidos';
?>


Repare que não foi necessário incluir o arquivo da classe Login, pois no arquivo de configuração (config/conn.php) foi definida a função __autoload(), ou seja, assim que o objeto $objLogin é criado, o __autoload() se encarrega de incluir o arquivo da classe, porém o arquivo da classe deve seguir o padrão: Classe.class.php.

Vamos a alguns detalhes:
Linha 6: Criamos um objeto da nossa classe Login. Por padrão a tabela é usuario, a chave primária é usuario_id, o campo login é login e o campo senha é senha. Porém, poderíamos definir outras informações passando os parâmetros do construtor, exemplo:
$objLogin = new Login('tb_usuarios', 'codigo', 'campo_login', 'campo_senha');


Linha 13: O método logar() aceita um terceiro parâmetro que é para onde o usuário será redirecionado se o login e senha estiverem corretos, no caso, isso não nos interessa, pois esta é uma página que será recebida pela requisição AJAX, portanto o método irá apenas retornar true, se as informações estiverem corretas, ou, caso contrário, false.


6. Painel do usuário (painel.php)


Esta é uma das página da qual apenas um usuário que esteja logado terá acesso, para isso, precisamos apenas verificar se o usuário está logado:
verificar('index.html'))
    // Finalizado o script, apenas para garantir que o usuário não irá ver o conteúdo da página
    exit;
?>


Depois que reconhecido que o usuário está logado. podemos recuperar o ID e o login do usuário que estão na sessão, através do objeto de login, por exemplo:
getID()} 
"; echo "Login: {$objLogin->getLogin()}"; ?>


Tendo o ID, podemos recuperar todas as suas informações, fazendo um simples SELECT:
// Selecionando informações do usuário
$query = mysql_query("SELECT * FROM usuario WHERE usuario_id = {$objLogin->getID()}");
$usuario = mysql_fetch_object($query);


Sendo assim, podemos mostrar as informações que não estão na sessão:
echo "Bem vindo {$usuario->nome}";


7. Logout (sair.php)


Para finalizar a sessão é muito simples:
logout('index.html');
?>


8. Finalizando


Bom pessoal, por hoje é isso, tentei detalhar o máximo possível, mas não houve tempo para explicar sobre a estrutura da classe, nem alguns detalhes sobre a programação orientada a objetos, isto fica para uma próxima, ok?

Download dos arquivos

Espero que vocês tenham entendido e que a idéia seja útil para vocês. Qualquer dúvida, sugestão ou crítica construtiva, deixe um comentário ou envie um email. Até a próxima, abraços.

Compartilhe com seus amigos:
Mais sobre: código, login, mysql, jquery
Rafael Couto Alves
Rafael Couto Alves Meu nome é Rafael Couto, tenho 19 anos, moro em Bauru/SP e sou aficionado por informática e tecnologia, principalmente em relação a web.
FACEBOOK // TWITTER: @@faael
Quer conversar com o(a) Rafael, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.