Blog

Estamos sempre antenados no que hà de mais moderno.

Login com PHP / MySQL e AJAX

Geralmente quando vamos criar um site dinâmico ou um sistema, nos deparamos com a necessidade de criação de um sistema de login. Nestes casos, após o usuário informar seu login e senha, é redirecionado a uma área restrita e exclusiva a este usuário podendo conter funcionalidades como edição de perfil, alteração de senha, cadastro e gerenciamento de informações específicas à sua conta, entre outras funcionalidades dependendo do site o sistema em questão.

Vamos aprender então como criar um sistema de login com PHP, MySQL e AJAX onde, após o usuário informar seus dados de acesso e submeter o formulário, faremos uma requisição através do AJAX a um script PHP que por sua vez se conecta a uma base de dados MySQL e nos resulta se o usuário existe e possíveis dados deste usuário para utilizarmos no sistema.

1) Inicialmente precisamos criar uma tabela em nosso banco de dados MySQL responsável por armazenar os cadastros destes usuários. Vamos lá:

CREATE TABLE usuarios (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
nome VARCHAR(30) NOT NULL,
email VARCHAR(50) NOT NULL,
senha VARCHAR(50) NOT NULL
) 

2) Agora que já temos nossa tabela de usuarios criada, o próximo passo é criarmos uma página que conterá o nosso formulário com os campos de login.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login com PHP / MySQL e AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<form id="login-form">
            	<div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Seu email ...">
                </div>
                <div class="form-group">
                        <label for="email">Senha:</label>
                        <input type="password" class="form-control" name="senha" id="senha" placeholder="Sua senha ...">
                </div>
                <button type="submit">Entrar</button>
                <div id="errolog">Problema com os dados informados!</div>
</form> 

</body>
</html> 

3) Ainda nesta mesma página do nosso formulário vamos incluir uma função em AJAX responsável por receber os dados do formulário e chamar o script que fará a validação dos dados.

* É muito importante não esquecer de incluir o jQuery na chamada de sua página.

<script>
		$(document).ready(function(){
			$('#errolog').hide(); //Esconde o elemento com id errolog
			$('#login-form').submit(function(){ 	//Ao submeter formulário
				var login=$('#email').val();	//Pega valor do campo email
				var senha=$('#senha').val();	//Pega valor do campo senha
				$.ajax({			//Função AJAX
					url:"login.php",			//Arquivo php
					type:"post",				//Método de envio
					data: "login="+login+"&senha="+senha,	//Dados
					success: function (result){			//Sucesso no AJAX
								if(result==1){						
									location.href='restrita.php'	//Redireciona
								}else{
									$('#errolog').show();		//Informa o erro
								}
							}
				})
				return false;	//Evita que a página seja atualizada
			})
		})
</script>

4) Para finalizar vamos criar então o script PHP responsável por receber os dados do formulário, conectar-se ao banco de dados MySQL e verificar se os dados informados pelo usuário conferem. Caso os dados estejam corretos, vamos armazenar ainda alguns dados em variáveis de sessão. As variáveis de sessão permitem criarmos, posteriormente, páginas restritas com validação a partir de sessões abertas.

<?php
  // Abre conexao com MySQL
  $conecta = mysql_connect("HOST", "LOGIN", "SENHA") or print (mysql_error()); 
  mysql_select_db("usuarios", $conecta) or print(mysql_error());

  
  $login=$_POST['login'];	//Pegando dados passados por AJAX
  $senha=$_POST['senha'];
  
  //Consulta no banco de dados
  $sql = "SELECT * FROM usuarios WHERE USU_Email='".$login."' AND USU_Senha='".$senha."'"; 
  $resultados = mysql_query($sql)or die (mysql_error());
  $res = mysql_fetch_assoc($resultados); //
	if (mysql_num_rows($resultados) == 0){
		echo 0;	//Se a consulta não retornar nada é porque as credenciais estão erradas
	}
	
	else{
		echo 1;	//Responde sucesso
		if(!isset($_SESSION)) 	//verifica se há sessão aberta
		session_start();		//Inicia seção
		//Abrindo seções
		$_SESSION['ses_USU_RowID'] = $res['USU_RowID']; 		
		$_SESSION['ses_USU_Nome'] = $res['USU_Nome'];
		$_SESSION['ses_USU_Email']=$res['USU_Email'];	
		exit;	
	}
?>

Assim finalizamos o nosso login em PHP / MySQL e AJAX.

Gostou? Deixe seu comentário!

Share:

Escrito por Rafael Coitiño

Formado em Web Design e Produção Multimídia e Pós Graduado em Desenvolvimento de Sistemas, atuo na área de desenvolvimento Frontend e Backend desde 2002.

0 Comentários

Deixe seu Comentário