Olá rodolforj,
Criei um exemplo aparentemente complexo, mas profissional, o que poderá te ser útil futuramente.
Se estudares com calma o código farás um bom trabalho.
O código está todo comentado. Qualquer dúvida, disponha-se.
1. - Vamos ao HTML [index.html]:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Exemplo Login e Aviso de Erro</title>
</head>
<body>
<form method="post" action="login.php" name="login" id="login">
User:<input type="text" placeholder="User" name="user" id="user"><br>
Pass:<input type="text" placeholder="Pass" name="pass" id="pass"><br>
<button type="button" name="btn_enviar" id="btn_enviar">
Entrar
</button>
</form>
<!-- Onde vai aparecer o aviso ao utilizador -->
<span id="aviso"></span>
<!-- A requisição ajax será feita com jQuery, por isso deverá ser incluído -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Inclusão do script responsável para mostrar as mensagens na tela -->
<script src="script.js"></script>
</body>
</html>
2. - Agora vamos ao Ajax, que enviará seus dados ao PHP, sem sair da página [script.js]
$("#btn_enviar").click(function(){ //ID Botão enviar
$("#login").submit(function(e) //ID formulário
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$("#aviso").text(data);
if(data == 'Login bem sucedido.')
{
window.location.href = "local/para-onde-vais/depois-do-login";
}
},
error: function(jqXHR, textStatus, errorThrown)
{
$("#aviso").text("Erro de requisição. Contacte o administrador do sistema.");
}
});
e.preventDefault();
e.unbind();
});
$("#login").submit(); //Submissão do formulário via ID
});
3. - Por último vamos ao código PHP [login.php]
<?php
// Ligação com banco de dados
header('Content-Type: text/html; charset=UTF-8');
$db_user = 'seu_user';
$db_pass = 'seu_pass';
try
{
$db = new PDO('mysql:host=localhost;dbname=nome_banco_dados;charset=utf8',$db_user, $db_pass );
}
catch(PDOException $e)
{
die('Impossível ligar-se ao banco de dados. Contacte o administrador do sistema.');
}
//===============================================================
// Mensagem enviada quando login for bem sucedido.
$mensagemSucesso = "Login bem sucedido.";
// Verificando os dados enviados da pagina HTML estão preenchidos.
if(empty($_POST['user']) || empty($_POST['pass']))
{
// Erro se um dos campos estiverem vazios.
die('Campos vazios.');
}
else
{
// Levando em conta que o utilizador é um endereço de email
// este codigo verifica se o email é válido.
if(filter_var($_POST['user'], FILTER_VALIDATE_EMAIL))
{
// Se tudo estiver correcto os campos são atribuidos às variáveis.
$user = $_POST['user'];
$pass = $_POST['pass'];
}
// Iniciar a comparação entre os dados fornecidos
// via o formulário HTML e os dados guardados no banco de dados
foreach($db->query("SELECT * FOM tabela_utilizador WHERE user = '".$user."' AND pass = '".$pass."'") as $reg);
// Caso os dados não coincidem o script para e retorna
// uma mensagem ao utilizador
if($user != $reg['email'] || $pass != $reg['pass'])
{
die('Nome de Utilizador ou Password incorrectos.');
}
else
{
// Caso os dados estejam correctos, inicia a sessão
// podendo resgatar outros dados da consulta no banco.
session_start();
$_SESSION['nome'] = $reg['nome'];
$_SESSION['user'] = $reg['user'];
$_SESSION['cidade'] = $reg['cidade'];
// Quando o login for efectuado correctamente
// uma mensagem é mostrada ao utilizador
echo $sucesso;
}
}
?>
É claro que existem formas bem mais profissionais, mas este já ajuda.