Aprenda a criar Sistema de Login utilizando o PHP e MySQL (Mysqli).
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.
Para explicações mais detalhadas acesse o vídeo no youtube: https://www.youtube.com/watch?v=GAGRrVVD3js