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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?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:
|
1 |
CREATE DATABASE login; |
Usar a base dados recém-criada:
|
1 |
USE login; |
Estrutura do Banco de dados:
|
1 2 3 4 5 |
CREATE TABLE `login`.`usuario` ( `usuario_id` INT NOT NULL AUTO_INCREMENT, `usuario` VARCHAR(200) NOT NULL, `senha` VARCHAR(32) NOT NULL, PRIMARY KEY (`usuario_id`)); |
Inserts:
|
1 2 |
INSERT INTO `usuario` (`usuario`,`senha`) VALUES ('canalti','10f722b5984a49bce67d434464fae37e'); INSERT INTO `usuario` (`usuario`,`senha`) VALUES ('pedrinho','202cb962ac59075b964b07152d234b70'); |
Usuários/senha:
|
1 2 |
canalti / senhadocanalti pedrinho / 123 |
PHP
conexao.php
|
1 2 3 4 5 6 7 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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
|
1 2 3 4 5 6 |
<?php session_start(); if(!$_SESSION['usuario']) { header('Location: index.php'); exit(); } |
painel.php
|
1 2 3 4 5 6 |
<?php include('verifica_login.php'); ?> <h2>Olá, <?php echo $_SESSION['usuario'];?></h2> <h2><a href="logout.php">Sair</a></h2> |
logout.php
|
1 2 3 4 5 |
<?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.
