Sistema de Login com PHP - Método Procedural
Página 1 de 1
Sistema de Login com PHP - Método Procedural
por Admin 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
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
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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] em navegador e prossiga.
Clique em 'New' no canto superior esquerdo da tela.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Código SQL usado no sistema.
4 - Criando conexão com o Banco
Próximo passo agora é se conectar com o banco que acabamos de criar.
conexao.php
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
6 - Final, efetuando o Login
Aqui veremos como é feito o login, e como ficar conectado em um site.
login.php
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
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Baixam os arquivos aqui!! [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
É 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
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 [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] em navegador e prossiga.
Clique em 'New' no canto superior esquerdo da tela.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] da imagem caso não carregue.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Baixam os arquivos aqui!! [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
É 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
Admin- Admin
- Mensagens : 4
Data de inscrição : 17/06/2015 -
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|