Criar um sistema de login com PHP e MySQL é uma habilidade essencial para desenvolvedores web. Este tutorial irá guiá-lo passo a passo no processo de criação de um sistema seguro e eficiente. Assim sendo, você aprenderá a configurar um servidor local, criar um banco de dados e uma tabela de usuários, além de desenvolver um formulário de login em HTML. Vamos usar o PHP para validar as credenciais dos usuários e gerenciar sessões, garantindo que apenas usuários autenticados possam acessar áreas restritas do seu site. Vamos agora criar um Sistema de Login com PHP e MySQL.
HTML
HTML da página de login.
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sistema de Login - PHP + MySQL - Canal TI</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h3 class="title has-text-grey">Sistema de Login</h3>
<h3 class="title has-text-grey"><a href="https://youtube.com/canaltioficial" target="_blank">Canal TI</a></h3>
<?php
if(isset($_SESSION['nao_autenticado'])):
?>
<div class="notification is-danger">
<p>ERRO: Usuário ou senha inválidos.</p>
</div>
<?php
endif;
unset($_SESSION['nao_autenticado']);
?>
<div class="box">
<form action="login.php" method="POST">
<div class="field">
<div class="control">
<input name="usuario" name="text" class="input is-large" placeholder="Seu usuário" autofocus="">
</div>
</div>
<div class="field">
<div class="control">
<input name="senha" class="input is-large" type="password" placeholder="Sua senha">
</div>
</div>
<button type="submit" class="button is-block is-link is-large is-fullwidth">Entrar</button>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
CSS da página de login
Download do Bulma
Link do framework Bulma: https://bulma.io/
HTML+CSS
Se preferir, pode baixar a estrutura demonstrada no vídeo (HTML+CSS) aqui.
Banco de dados MySQL
Criar banco de dados:
CREATE DATABASE login;
Usar a base dados recém-criada:
USE login;
Estrutura do Banco de dados:
CREATE TABLElogin.usuario(usuario_idINT NOT NULL AUTO_INCREMENT,usuarioVARCHAR(200) NOT NULL,senhaVARCHAR(32) NOT NULL, PRIMARY KEY (usuario_id));
Inserts:
INSERT INTOusuario(usuario,senha) VALUES ('canalti','10f722b5984a49bce67d434464fae37e'); INSERT INTOusuario(usuario,senha) VALUES ('pedrinho','202cb962ac59075b964b07152d234b70');
Usuários/senha:
canalti / senhadocanalti pedrinho / 123
PHP
conexao.php
<?php
define('HOST', '127.0.0.1');
define('USUARIO', 'USUARIODOBANCO');
define('SENHA', 'SENHADOBANCO');
define('DB', 'NOMEDOBANCOCRIADO');
$conexao = mysqli_connect(HOST, USUARIO, SENHA, DB) or die ('Não foi possível conectar');
login.php
<?php
session_start();
include('conexao.php');
if(empty($_POST['usuario']) || empty($_POST['senha'])) {
header('Location: index.php');
exit();
}
$usuario = mysqli_real_escape_string($conexao, $_POST['usuario']);
$senha = mysqli_real_escape_string($conexao, $_POST['senha']);
$query = "select usuario from usuario where usuario = '{$usuario}' and senha = md5('{$senha}')";
$result = mysqli_query($conexao, $query);
$row = mysqli_num_rows($result);
if($row == 1) {
$_SESSION['usuario'] = $usuario;
header('Location: painel.php');
exit();
} else {
$_SESSION['nao_autenticado'] = true;
header('Location: index.php');
exit();
}
verifica_login.php
<?php
session_start();
if(!$_SESSION['usuario']) {
header('Location: index.php');
exit();
}
painel.php
<?php
include('verifica_login.php');
?>
<h2>Olá, <?php echo $_SESSION['usuario'];?></h2>
<h2><a href="logout.php">Sair</a></h2>
logout.php
<?php
session_start();
session_destroy();
header('Location: index.php');
exit();
Download do projeto completo
Caso queira, o download do projeto completo (html+css+script do banco+php) pode ser feito aqui.
Conclusão
Ao concluir este tutorial, você terá criado um sistema de login funcional e seguro utilizando PHP e MySQL, duas das tecnologias mais amplamente usadas no desenvolvimento web, dessa forma, durante o processo, você aprendeu desde o início até a implementação completa de um sistema de login, o que envolve criar e gerenciar um banco de dados, desenvolver formulários de login eficientes e validar o login.
Além disso, você implementou a validação de credenciais, garantindo que as senhas dos usuários sejam verificadas corretamente e de forma segura, utilizando práticas recomendadas, como o hash de senhas. O gerenciamento de sessões será fundamental para assegurar que apenas usuários autenticados possam acessar áreas restritas do seu site. Isso proporciona uma camada extra de segurança e controle sobre quem pode ou não interagir com o conteúdo protegido.
Essas habilidades são essenciais para qualquer desenvolvedor web, pois a criação de sistemas de login é uma das funcionalidades mais comuns e críticas em aplicativos e sites modernos. Ao dominar essas técnicas, você terá uma base sólida para desenvolver projetos mais avançados e complexos no futuro, como sistemas de gerenciamento de usuários, painéis administrativos e integrações com APIs externas. Além disso, esse conhecimento permitirá que você construa sistemas mais seguros.
