Ir para conteúdo
Fórum CódigoFonte.net
hasken

[tutorial] Criando sistema simples de cadastro e login

Recommended Posts

Oi pessoal, decidi fazer um tutorial de como criar um sistema de login e cadastro bem simples =D

Bem, aqui nós temos todos os arquivos que serão criados:

 

index.php  --> Essa é a página que o usuário tem acesso depois de logar

cadastro.html --> A página de cadastro, obviamente

login.html --> A página de login

autenticar.php --> A página que autentica os dados escritos no login

processar.php --> A página que processa os dados escritos no cadastro

logout.php --> Adivinha?

Primeiro de tudo vamos criar uma tabela chamada usuarios no nosso banco de dados meu_banco:

CREATE TABLE usuarios(
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
nome VARCHAR(100),
usuario VARCHAR(100),
senha VARCHAR(100));

Agora, vamos fazer a página cadastro.html:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Cadastro</title>
    </head>
    <body>
        <form method="post" action="processar.php">
            <input type="text" name="nome" placeholder="Nome completo"><br>
            <input type="text" name="user" placeholder="Nome de usuário"><br>
            <input type="password" name="pass" placeholder="Senha"><br>
            <input type="submit" value="Cadastrar">
        </form>
    </body>
</html>

P.S.: não vou utilizar nenhum sistema de criptografia (ex.: md5) pois quero deixar o mais simples possível

Na página cadastro.html, utilizamos o método "post". Para quem não sabe, existem 2 métodos: get e post. No get, quando clicamos no submit, todos os dados digitados vão para a URL do site, tornando-o inseguro. Já com o post isso não acontece, por isso ele é o recomendado, pelo menos por mim.

Quando clicar no botão, os dados serão enviados para a página processar.php, que é como nós definimos no parâmetro action.

Então, vamos fazer a página processar.php!

<!DOCTYPE html>
<?php
    $conexao = mysqli_connect("localhost", "root", "senha");
    mysqli_select_db($conexao, "meu_banco");
?>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Cadastro</title>
    </head>
    <body>
        <?php
            $nome = $_POST["nome"];
            $user = $_POST["user"];
            $pass = $_POST["pass"];
            
            $inserir = "INSERT INTO usuarios (id, nome, usuario, senha) VALUES (NULL, '$nome', '$user', '$pass');";
            mysqli_query($conexao, $inserir) or die (mysqli_error($conexao));
            echo"Você foi cadastrado com sucesso. Clique <a href='login.html'>aqui</a> para fazer log-in.";
        ?>
    </body>
</html>

Agora, vou dar uma explicadinha no código acima:

Criamos 3 variáveis que armazenam os valores do formulário. Para realizar esse armazenamento, utilizamos o $_POST["Name"], onde Name é o nome do campo definido no cadastro.html pelo parâmetro name="algumacoisa" da tag input. No cadastro.html, utilizamos os nomes: nome, user, pass. Então, no processar.php, armazenamos esses valores nas variáveis $nome, $user, $pass. Se a gente tivesse usado o método get, apenas mudaríamos o $_POST por $_GET.

P.S.: As variáveis $nome, $user, $pass poderiam ter recebido qualquer nome.

Em seguida, criamos uma variável $inserir, que recebe a seguinte string: INSERT INTO usuarios (id, nome, usuario, senha) VALUES (NULL, '$nome', '$user', '$pass');

Quem já estudou MySQL sabe: INSERT INTO insere algum valor em alguma tabela. No caso, utilizamos a tabela usuarios, que foi a criamos. Queremos armazenar os valores do formulário nas colunas que estão dentro dos parênteses (id, nome, usuario, senha). Nós criamos essas colunas também. Então, indicamos os valores a serem armazenados, na ordem em que escrevemos as colunas:

NULL --> id (ele possui AUTO_INCREMENT, portanto receberá id+1 a cada processamento)

$nome --> nome (Envia para a coluna 'nome' a variável em que armazenamos a resposta do formulário)

$user --> usuario

$pass --> senha

Mas, como alguns de vocês devem ter deduzido, esse código ainda não foi executado, está apenas armazenado em uma variável. E como executamos? Utilizando mysqli_query($conexao, $inserir);

mysqli_query recebe dois parâmetros: o primeiro é a conexão com o MySQL, que no começo do arquivo armazenamos na variável $conexao. O segundo é justamente o INSERT INTO, que colocamos na variável $inserir.

Como perceberam, tem um or die(mysqli_error($conexao)); que vem logo após. Isso é o que será feito quando alguma coisa com a mysqli_query der errado. No lugar de mysqli_error($conexao), você poderia ter colocado uma string falando, por exemplo, que ocorreu uma falha ao armazenar. mysqli_error($conexao) vai exibir na tela a mensagem de erro original do mysql, portanto eu recomento utilizá-lo, afinal ele também indica o que está errado, a linha, o arquivo, etc. $conexao é o nome da conexão com o MySQL, que armazenamos na variável $conexao.

Pronto, dadas as explicações, vamos prosseguir com o código.

Dessa vez, faremos a página de login:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
        <form method="post" action="autenticar.php">
            <input type="text" name="user" placeholder="Nome de usuário"><br>
            <input type="password" name="pass" placeholder="Senha"><br>
            <input type="submit" value="Logar">
        </form>
    </body>
</html>

Observe os nomes que usamos nas inputs: user e pass. Método: post. Enviar para: autenticar.php.

Então, vamos fazer a página que vai checar se os dados digitados batem com algum dado já cadastrado no banco de dados, criando a página autenticar.php:

<!DOCTYPE html>
<?php
    $conexao = mysqli_connect("localhost", "root", "senha");
    mysqli_select_db($conexao, "meu_banco");
    session_start();
?>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        <script language="javascript">
            function sucesso(){
                setTimeout("window.location='index.php'", 4000);
            }
            function failed(){
                setTimeout("window.location='login.html'", 4000);
            }
        </script>
    </head>
    <body>
        <?php
            $user = $_POST["user"];
            $pass = $_POST["pass"];
            
            $consulta = mysqli_query("SELECT * FROM usuarios WHERE usuario = '$user' AND senha = '$pass'") or die (mysqli_error($conexao));
            $linhas = mysqli_num_rows($consulta);
            
            if($linhas == 0){
                echo"O login falhou. Você será redirecionado para a página de login em 4 segundos.";
                echo"<script language='javascript'>failed()</script>";
            } else {
                $_SESSION["usuario"]=$_POST["user"];
                $_SESSION["senha"]=$_POST["pass"];
                echo"Você foi logado com sucesso. Redirecionando em 4 segundos.";
                echo"<script language='javascript'>sucesso()</script";
            }
        ?>
    </body>
</html>

Dessa vez utilizamos um pouquinho de javascript: apenas criamos, dentro da tag head, 2 funções: uma que redireciona para a página index.php depois de 4000ms (4 segundos) e outra que redireciona para a página login.html em 4 segundos também.

Então, na variável $consulta, armazenamos uma mysqli_query que seleciona tudo dentro da tabela usuarios onde a coluna usuario = $user e onde a coluna senha = $pass. Criamos outra variável chamada $linhas que conta o número de linhas que resultam da $consulta, por exemplo: no formulário a gente digita como usuário o nome coelho e a senha toupeira. A variável $consulta verá no banco de dados se existe algum usuário com o nome coelho e alguma senha com o nome toupeira. Se existir, o mysqli_num_rows vai contar quantas linhas desse resultado existe. Se existir uma, é porque no banco de dados nós temos 01 linha que tem como usuário coelho e senha toupeira.

Depois, utilizamos um controle de fluxo: se não existirem linhas na variável $linhas é porque não foi encontrado nenhum registro com aquele usuário e aquela senha digitada. Então, exibimos o texto "O login falhou" e usamos o redirecionamento para a página de login com a função failed(). Caso contrário, armazenamos em duas sessões chamadas usuario e senha o resultado do formulário. Essas sessões nos servem para, na página de login, verificar se o usuário está logado. Se estiver, a página de logout pode esvaziar essas sessões, fazendo o logout. Atenção especial para o session_start(); no começo do código: se ele não for utilizado, não será possível criar sessões. Aí usamos a função sucesso().

Essa função nos redireciona para a página index.php. Então vamos fazer essa página:

<!DOCTYPE html>
<?php
    $conexao = mysqli_connect("localhost", "root", "senha");
    mysqli_select_db($conexao, "meu_banco");
    session_start();
    
    if(!isset($_SESSION["usuario"]) || !isset($_SESSION["senha"])){
        header"Location: login.html";
        exit;
    }
?>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Index</title>
    </head>
    <body>
        <h3> Logado. <a href="logout.php">Logout</a></h3>
    </body>
</html>

Nessa página, verificamos se a sessão chamada "usuario" ou a sessão "senha" são inexistentes. Se sim, redirecionamos o usuário para a página de login. Caso contrário, ele tem acesso ao resto do código, ou seja, à página index.php. A função isset() verifica se existe algo em alguma variável, seja esse algo um espaço ou até mesmo uma string vazia (""), ou seja, se a variável existe. Se usamos um ponto de exclamação antes dessa função(!isset()) ela verifica o contrário: se a variável não existe.  Então é só usar isso para todas as páginas restritas.

Na página, colocamos um link para o logout.php. Vamos criá-lo então!

<?php
    session_start();
    session_destroy();
    header"Location: login.html";
?>

Esse código destrói todas as sessões e, em seguida, envia o usuário para a página de login. Então, se o usuário clicar em logout e tentar acessar a index.php, mesmo que seja pelo link, sem fazer login novamente, ele será enviado à pagina de login.

 

Esse foi o tutorial, em breve vou postar um sistema mais avançado, que analisa se usuário e senha já existem na hora de cadastrar, que impede a pessoa de logar com espaços em branco, etc.

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×
×
  • Criar Novo...