Sistema de Login com PHP - Método Procedural

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Sistema de Login com PHP - Método Procedural

Mensagem por Admin em Ter Jun 23, 2015 9:20 pm

Objetivo

Objetivo desse tutorial é mostrar da forma mais simples e completo possível (simples e completo? o.O isso é possível? SIM!) como criar um Sistema de Login, utilizando a linguagem de programação PHP (<3), de forma procedural. Isso tudo se encontra no título. Pois bem.

Pré Requisitos
! = Importante
! = "Opcional"...quanto mais você souber, melhor!

'Conhecimento':
  [!]Básico de PHP
  [!]Básico de HTML5 (especificamente formulários)
  [!]SQL - Structured Query Language

Ferramentas:
  [!]Usaremos o Xampp para criar o nosso servidor com tudo que precisamos.
  [!]Também recomendo o uso do Sublime Text. Editor usado na criação do tutorial.

1 - Criando a página principal
Aqui vamos criar a página Index.php contendo o nosso primeiro formulário, o de Login.

Index.php

Código:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Página Inicial</title>
   <link rel="stylesheet" href="#">
</head>
<body>
   <div align="center"> <!-- Nunca use tags de estilização no documento HTML, isso deixa o código feio e fora dos padrões WEB. -->
      <?php
      /*
      Verifico se foi passado o parâmetro 'cadastrado-sucesso' pela URL usando _GET
      Se sim, escrever a msg na página. Se você estiver lendo isso antes de chegar
      na página cadastro.php, não se preocupe, lá eu explico e você irá entender.

       Já deixando claro que isso não é muito recomendado, e possui falhas.
       Por exemplo, se você mudar 'true' para 'false' na URL, irá retornar o mesmo.
       Meu foco é mostrar a lógica de um sistema de login, o resto é com vocês.
      */
         if(array_key_exists("cadastrado-sucesso", $_GET) and $_GET["cadastrado-sucesso"]==true)
            echo "Cadastro efetuado com sucesso.";

      /*
      É agora que a mágica do Login acontece. Tudo é feito por Cookies. Cookies nada mais é que um tipo de variável, sim, como
      int, character e boolean. Ela armazena dados no navegador remotamente, assim você pode recuperá-lo diretamente no cliente.
      
      Para mais informações acesse: http://php.net/manual/pt_BR/features.cookies.php

      Sendo assim, o código abaixo cria uma variável Cookie e passa o valor que está armazenado em 'login'
      com isso faço a verificação se ele existe (isset) e simplesmente passo os 'echo'.
      */
         $login_cookie = $_COOKIE['login'];
           if(isset($login_cookie))
               echo"Bem-Vindo, $login_cookie, agora você acessar o conteúdo secreto do nosso site!<br>";   
           else{
               echo"Bem-Vindo, convidado <br>";
               echo"Espero que você se cadastre e seja um haski";
           }
      ?>
      <h1>Login</h1>
      <p>Faça login para ter acesso exclusivo a nossa plataforma!</p>
      <form action="login.php" method="post">
         <tr>
            <td>Username:</td> <!-- Usando o atributo 'required' como uma validação antes de chegar no PHP. Para não enviar o form vazio. -->
            <td><input type="text" name="usuario" placeholder="Username" required></td>
            <p/>
         </tr>
         <tr>
            <td>Password:</td>
            <td><input type="password" name="senha" placeholder="Password" required></td>
            <p/>
         </tr>
         <tr>
            <td><input type="submit" name="logar" value="Logar"></td>
            <p/>
            <td><a href="cadastro-form.php">Não tem cadastro? Clique aqui!</a></td>
         </tr>
      </form>
   </div>
</body>
</html>



2 - Tornando dinâmico!
Agora vamos criar nosso cadastro-form.php para torna dinâmica a aplicação. Outro formulário simples.

cadastro-form.php

Código:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Formulário de Cadastro</title>
   <link rel="stylesheet" href="#">
</head>
<body>
   <div align="center">
      <h1>Cadastro</h1>
      <p>Faça seu cadastro para receber novas noticías!</p>
      <form action="cadastro.php" method="post">
         <tr>
            <td>Username:</td>
            <td><input type="text" name="usuario" placeholder="Username" required></td>
            <p/>
         </tr>
         <tr>
            <td>Password:</td> <!-- Fiquem atentos para colocar o campo de confirmar password e fazer validação no PHP. -->
            <td><input type="password" name="senha" placeholder="Password" required></td> <!-- Estou com preguiça de fazer '-' -->
            <p/>
         </tr>
         <tr>
            <td><input type="submit" name="cadastrar" value="Cadastrar"></td>
         </tr>
      </form>
   </div>
</body>
</html>



3 - Mãos na Massa!
Vamos criar o nosso banco de dados agora. Uma série de imagens ensinando a criar o banco de forma simples.
Se atentem: Não vou ensinar a instalar o Xampp, mas para esse sistema, a configuração padrão do Windows,
Next,Next e Finish, será o suficiente.
OBS: Lembrem-se de ativar o Apache e o MySQL pelo Painel do Xampp.

1° Entre no endereço [Você precisa estar registrado e conectado para ver este link.] em navegador e prossiga.
Clique em 'New' no canto superior esquerdo da tela.

Link da imagem caso não carregue.
[Você precisa estar registrado e conectado para ver esta imagem.]

2° Escolhendo o nome do Banco de Dados
Após entrar, crie um novo Banco de Dados chamado 'site_completo' no campo em branco, e clique em 'Criar'. Conforme na imagem.

Link da imagem caso não carregue.
[Você precisa estar registrado e conectado para ver esta imagem.]

3° Quase lá
O passo final é criar a nossa tabela para cadastrar nossos clientes. Para fazer isso é simples, clique no nome do Banco (site_completo),
clique em SQL na parte superior, digite o código abaixo no campo em branco e clique em Executar, conforme a imagem.

Link da imagem caso não carregue.
[Você precisa estar registrado e conectado para ver esta imagem.]

Código SQL usado no sistema.

Código:
create table cadastros(
    id int auto_increment,
    username varchar(255) not null,
    password varchar(255) not null,
    primary key(id)



4 -  Criando conexão com o Banco
Próximo passo agora é se conectar com o banco que acabamos de criar.

conexao.php


Código:
<?php

$conexao = mysqli_connect('localhost','root','','site_completo');

#Para saber mais sobre MySQLi, acesse: http://php.net/manual/pt_BR/mysqli.construct.php
#Pode parecer muito complexo, mas é tranquilo.

/* Parâmetros usados aqui são, HOST, USERNAME, PASSWORD e DATABASE

HOST = É o endereço do servidor, pode ser usado o nome como, 'www.facebook.com', ou o endeço de IP. Usei o endereço local(localhost) que é o mesmo que 127.0.0.1.
USERNAME = É o nome do usuário do banco de dados. No caso 'root' do banco MySQL.
PASSWORD = É a senha do usuário citado acima, caso tenha. No caso eu não criei uma senha, então devemos passar o parâmetro em branco ''.
DATABASE = É o nome da database onde vamos criar todo o site, salvar todas as informações. No nosso caso, 'site_completo'.

*/

#OBS: É uma recomendação padrão não usar a tag de fechamento do PHP em arquivos que contenha SOMENTE código PHP.
#Então vou obedecer.




5 - Inserindo no Banco
Agora vamos criar a página cadastro.php para fazer o cadastro usando o formulário do cadastro-form.php.

cadastro.php


Código:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Validando o Cadastro</title>
   <link rel="stylesheet" href="#">
</head>
<body>
   <?php
      include('conexao.php'); #Incluindo o arquivo conexao.php para conectar no banco.

      $usuario = $_POST['usuario']; #Pegando o valor do campo pelo 'name' do formulário anterior (cadastro-form.php).
      $senha = $_POST['senha']; #OBS: Não vou ensinar nada relacionado a criptografia de senhas. Pelo menos não agora.

      /*
      Aqui normalmente colocamos algumas validações para verificar se não foi enviado nada nulo/vazio.
      Mas como eu usei o atributo 'required' no form, eu sei que não foi enviado, mas tem como burlar esse sistema
      então sempre tentem criar o máximo de validações possíveis, fica a dica mas eu não vou criar.

      Também deve se atentar a criar validações com regex, para verificar se não contém números ou símbolos,
      em campos de nomes, por exemplo.
      */

      function cadastraUsuario($conexao,$usuario,$senha){
         $query = "insert into cadastros (username,password) values ('{$usuario}','{$senha}')";
      return mysqli_query($conexao,$query);
      }

      /* Aqui talvez começe a ficar complicado para iniciantes. Na verdade essa não é a forma procedural de inserir no banco,
      Mas como pretendo ensina-los esse mesmo sistema só que Orientado a Objetos e talvez PDO, eu fiz com uma função,
      que é o forma mais parecida de OO.

      A função acima é muito simples na verdade, vou tentar explicar da melhor forma possível:

      Criei uma função e coloquei o nome de 'cadastraUsuario'. Para cadastrar um usuário eu preciso de no mínimo 3 "coisas",
      que daqui pra frente vou chamar de parâmetros ou argumentos. Então precisamos de 3 parâmetros para dar certo.
      Preciso de me conectar com o banco primeiramente ($conexão), preciso do Username($usuario) e da senha($senha).
      Então preciso receber esses 3 parâmetros para a inserção ocorrer:
         1. Me conectar com o banco.
         2. Um username para inserir.
         3. Uma senha para esse username.

      Resumindo, ela não faz nada menos nada mais, que me conectar no banco e inserir o username e a senha
      que eu peguei do formulário anterior.
      */


      if(cadastraUsuario($conexao,$usuario,$senha)){ #Testando se a função com seus parâmetros retorna 'true', se sim imprime a msg e salva no banco.
         echo "Usuário [".$usuario."] cadastrado com sucesso!";
         header("Location: index.php?cadastrado-sucesso=true"); #Redireciona para a página 'index.php' para fazer o login.
         die(); #Sempre que usar um 'location', deve-se usar um die, questões de segurança. Pesquise.
      }
      else #Lembrando que quando usa if/elseif/else com apenas 1 linha no bloco, não necessita abrir chaves.
         echo mysqli_error($conexao); #Se não, imprime a msg de erro passando a conexão como parâmetro do mysqli_error
   ?>
</body>
</html>



6 - Final, efetuando o Login
Aqui veremos como é feito o login, e como ficar conectado em um site.

login.php

Código:
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Efetuando Login</title>
   <link rel="stylesheet" href="#">
</head>
<body>
   <?php
      include('conexao.php'); #Incluindo o arquivo conexao.php para conectar no banco.

       $usuario = $_POST['usuario']; #Pegando o valor do campo pelo 'name' do formulário anterior (index.php).
       $senha = $_POST['senha'];
       $logar = $_POST['logar']; #Aqui é a mesma coisa, mas pega o 'name' do botão 'Logar' para verificar se foi clicado.

       if(isset($logar)){        #Verificando se o 'logar' existe na requisição para ter certeza que a pessoa quer se logar.
          $query = "SELECT * FROM cadastros WHERE username = '$usuario' AND password = '$senha'";
           $verifica = mysqli_query($conexao,$query) or die("Erro ao selecionar");
           if(mysqli_num_rows($verifica) <= 0)
               echo"Erro! Username ou senha incorreto <br/>"; #Tentem melhorar a execução caso seja um usuário inválido!
           else{
               setcookie("login",$usuario); #Pega o conteúdo da variável '$usuario' e 'seta' no cookie chamado 'login'.
               header("Location: index.php"); #Redireciona para a página 'index.php' para ser haski e ver o conteúdo secreto.
               die(); #Sempre que usar um 'location', deve-se usar um die, questões de segurança. Pesquise.
           }
       }
   ?>   
</body>
</html>


Bom, vocês devem ter percebido que eu não expliquei quase nada, o motivo é que a explicação foi feita todo no código. Por que isso?
Eu fiz para ser estudado offline, não depender do Fórum, então você DEVE baixar os arquivos no final e ler tudo e todos para maior aprendizagem.

Veja também uma imagem do sistema na sua execução final

Link da imagem caso não carregue.
[Você precisa estar registrado e conectado para ver esta imagem.]


Baixam os arquivos aqui!! Download

É isso, qualquer erro, reclamações, correções ou sugestões, poste nesse tópico, outras dúvidas procure a área no Fórum ou busque ajuda no grupo.


by: Marcos Oliveira
avatar
Admin
Admin

Mensagens : 4
Data de inscrição : 17/06/2015

Ver perfil do usuário http://pequenosgafanhotos.forumeiros.com

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum