Como criar Sistema de Login com PHP e MySQL

2
46351
- GANHE 100 REAIS DE CRÉDITOS NA UMBLER -ganhe-100reais-creditos

Aprenda a criar Sistema de Login utilizando o PHP e MySQL (Mysqli).

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 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:

INSERT INTO `usuario` (`usuario`,`senha`) VALUES ('canalti','10f722b5984a49bce67d434464fae37e');
INSERT INTO `usuario` (`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.

- GANHE 100 REAIS DE CRÉDITOS NA UMBLER -ganhe-100reais-creditos

2 COMENTÁRIOS

DEIXE UMA RESPOSTA

Por favor insira o seu comentário!
Please enter your name here