Como criar Sistema de Login com PHP e MySQL

Por

17 de junho de 2018

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>

<?php

session_start();

<!DOCTYPE html>

<html>

<head>

<title>Sistema de Login - PHP + MySQL - Canal TI</title>

</head>

<body>

<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'])):

<p>ERRO: Usuário ou senha inválidos.</p>

</div>

<?php

endif;

unset($_SESSION['nao_autenticado']);

</div>

</div>

<button type="submit" class="button is-block is-link is-large is-fullwidth">Entrar</button>

</form>

</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;

1	CREATE DATABASE login;

Usar a base dados recém-criada:

USE login;

1	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`));

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');

1 2	INSERT INTO `usuario` (`usuario`,`senha`) VALUES ('canalti','10f722b5984a49bce67d434464fae37e'); INSERT INTO `usuario` (`usuario`,`senha`) VALUES ('pedrinho','202cb962ac59075b964b07152d234b70');

Usuários/senha:

canalti / senhadocanalti
pedrinho / 123

1 2	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');

<?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');

<?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();
}

<?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();
}

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

<?php

include('verifica_login.php');

logout.php

<?php
session_start();
session_destroy();
header('Location: index.php');
exit();

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

Loading…

Here are the results for the search: "{{td_search_query}}"

No results!

{{post_title}}

HTML

CSS

HTML+CSS

Banco de dados MySQL

PHP

Download do projeto completo

ARTIGOS RELACIONADOS

CRUD com PHP, MySQL & Bootstrap 5 (Create, Read, Update, Delete)

Testes Unitários com C# (XUnit)

Como criar Sistema de Busca com PHP e MySQL

Como criar um formulário de contato MODERNO e FUNCIONAL (HTML, CSS...

Como enviar Emails com PHP (Autenticados / Gmail)

Consumindo API REST (JSON) de maneira fácil no C# – Refit