Aprenda a criar um sistema de cadastro e login usando a classe PDO em PHP e MySql

validação de formulário e senha criptografada

Hoje iremos aprender a criarmos um sistema de cadastro e login em PHP, usando a classe PDO do PHP, esta classe tem a vantagem de nos oferecer uma segurança maior na transação do que métodos antigos. Não desmerecendo os métodos como  mysql_connect() e outros, pois esses fazem o seu papel direitinho, a classe PDO é uma classe mais moderna, e para os profissionais de TI e desenvolvedores, a atualização em conhecimentos mais recentes é algo primordial, pois a regra geral é que as tecnologias mais recentes são as tecnologias antigas aperfeiçoadas e melhoradas, tanto em quesitos como segurança e funcionalidade.

Desenvolveremos algo simples para o entendimento de todos, lembrando que caso queiram se aprofundar,  a documentação  é excelente para uma boa leitura e entendimento.

Inicialmente criaremos nossa tabela de cadastro de usuário e senha no banco. Então vá ao seu banco e execute o código abaixo

CREATE table IF NOT EXISTS usuarios (
id INT AUTO_INCREMENT,
nome VARCHAR(300),
email VARCHAR(300) unique,
senha VARCHAR(200),
PRIMARY KEY(id)

);


exatamente como acima, na aba SQL, clique em Executar e a tabela será criada.

Agora vamos implementar os arquivos em PHP e outros para que tudo ocorra bem. Abra seu editor e vamos ao código

function conectar(){
$usuario=usuario_banco;
$senha=senha_banco;
try{
$pdo = new PDO('mysql:host=mysql.hostinger.com.br;dbname=NOME_DO_BANCO', $usuario, $senha);

}catch(PDOException $e){
echo("não conectou");
exit(1);

}
return $pdo;

}
?>

crie um arquivo com o nome conexao.php, e coloque o código acima. Vamos explicar cada linha:

  1. criamos a função conectar(), essa função será chamada, sempre quando houver uma necessidade de comunicação com o banco, para realizarmos as transações.
  2. ao criarmos um banco de dados no nosso servidor é solicitado que criemos um nome de usuário e senha, e esses dados criados é que são atribuídos nas variáveis $usuario e $senha.
  3. o próximo passo foi usarmos os blocos try e catch, que são blocos usados para controlar possíveis erros, que podem ocorrer ao tentarmos uma conexão ou comunicação com o banco.
  4. em $pdo = new PDO('mysql:host=mysql.hostinger.com.br;dbname=NOME_DO_BANCO', $usuario, $senha);  estamos instanciando um objeto da classe PDO, a classe possui um construtor, onde ao instanciarmos passamos como argumentos a esse construtor, o endereço do host que é como será localizado o banco em um determinado servidor, no caso coloquei como exemplo o servidor da hostinger, você pode pesquisar no seu servidor de uso que você encontrará esse endereço facilmente, pois ele é fornecido pelo seu servidor de hospedagem. Em dbname, temos o nome do banco que você deu ao criar seu banco de dados no servidor, os outros dois argumentos são o usuário e senha,  que você também usou na criação do seu banco.
  5. e como retorno dessa função retornamos o próprio objeto criado, pois com esse retorno poderemos usá-lo nas operações de cadastro e login, que veremos posteriormente.

OBS: é importante lembrar, que em alguns servidores a extensão PDO tem que ser habilitada manualmente ou via código, no entanto a maioria dos servidores como hostinger, não há necessidade pois a extensão já está habilitada por padrão.

Agora vamos criar um formulário que usa os padrões do Bootstrap, de cadastramento de usuário e senha, que serão armazenados na tabela usuários do banco que acabamos de criar.

Usar Bootstrap é uma maneira inteligente de poupar muita mão de obra, deixando sua página responsiva em todos os dispositivos. Aproveitando também esse momento, vamos também usar as bibliotecas do Jquery e Jquery.Validate. Assim você já vai aprender como criar segurança no seu formulário, para que os campos estejam todos preenchidos e que tanto o campo de senha como o de confirma a senha, estejam já implementados a validação para senhas iguais. Vejamos o código abaixo:


Vamos explicar algumas partes desse formulário, ele está numerado para que possamos referenciar as partes explicadas. Em 1 temos o código que faz referência aos arquivos do Jquery, Jquery.Validate e Bootstrap.  Esses links vocês poderão está copiando no site do Bootstrap , ou se preferir baixe os arquivos todos que estarão disponíveis no final dessa postagem, o Jquery.Validate é uma biblioteca usada para validação de formulários, com ela você poderá com pouca implementação, deixar o seu formulário mais seguro e eficiente com relação a campos em brancos, validação de senha e confirmação de senha. Importando essas bibliotecas conforme estão na imagem, resta apenas implementarmos o código do arquivo valida_form.js, que é a parte numerada como 2. Em 3 temos também um arquivo que ainda iremos criá-lo o new_user.php. Então vamos lá, mãos a obra.

Crie um arquivo do tipo javascript, dando o nome de valida_form.js, faça o upload e deixe-o na mesma pasta em que está o arquivo formulario.html. Lembrando que seguindo as boas regras de programação e separação de camadas, sempre é bom separarmos os arquivos de html, javascript e css, preferencialmente criar uma pasta para cada tipo de arquivo. Como aqui não convém falarmos disso, e para efeitos apenas de aprendizagem, deixamos todos os arquivos no mesmo diretório, tanto os de js como os de php.

Após criar o arquivo valida_form.js, coloque o seguinte código:

$(document).ready(function(e){
$('#formulario_cadastro_user').validate({
rules: {
nome: {
required: true,

},

email: {
required: true,
email: true
},
senha: {
required: true
},
confirma: {
required: true,
equalTo: "#senha"
},
termos: "required"
},
messages: {
nome: {
required: "O campo nome é obrigatório."

},

email: {
required: "O campo email é obrigatório.",
email: "O campo email deve conter um email válido."
},
senha: {
required: "O campo senha é obrigatório."
},
confirma: {
required: "O campo confirmação de senha é obrigatório.",
equalTo: "O campo confirmação de senha deve ser identico ao campo senha."
},
}
});

});

O código acima, é bem simples de entender, tenho certeza que você ao olhá-lo irá compreender. Ele é um arquivo criado usando a sintaxe do Jquery, onde após o carregamento de toda a página, ele buscará controlar os campos do formulário em tempo de execução. Perceba que o id criado no formulário formulario_cadastro_user , está sendo referenciado no início do código, após isso, temos os nomes dos campos em que recebem atributos, como required que significa que devem ser preenchidos e temos as mensagens que irão ser exibidas na tela para o usuário, explicar detalhadamente o código, foge do nosso escopo para essa postagem.

Nosso próximo passo, é criar o arquivo new_user.php. Ao criarmos, insira o código abaixo:

include_once 'conexao.php';


$nome = $_POST['nome'];
$user = $_POST['email'];
$se = $_POST['senha'];
$senha = md5($se);
$pdo=conectar();

try{

$stmt = $pdo->prepare("INSERT INTO usuarios(nome,email,senha) VALUES (?,?,?)");
$stmt->bindParam(1, $nome, PDO::PARAM_STR);
$stmt->bindParam(2, $user, PDO::PARAM_STR);
$stmt->bindParam(3, $senha, PDO::PARAM_STR);

$stmt->execute();
if($stmt){
echo('');
}
}catch(PDOException $e){
echo("ocorreu um erro");
header('Location: index3.html');
}

?>


Vamos explicar cada linha:

  1. em include_once 'conexao.php' estamos importando o arquivo que criamos no inicio.
  2. as variáveis criadas $nome, $user, $se estão recebendo através das variáveis globais $_POST  os valores dos campos do formulário.
  3. a variável $senha recebe como atribuição o valor da senha criptografada através da função md5(), atualmente recomendo você estudar outras maneiras de criptografia, no entanto para esta postagem em termos de aprendizagem a função md5() satisfaz.
  4. criamos uma variável $pdo que irá receber o retorno da função conectar(), criada no arquivo conexao.php
  5. abrimos os blocos try e catch para controle de erros
  6. criamos a variável $stmt em que receberá como atribuição um objeto que é o retorno do método $pdo->prepare(), este método tem como argumento os códigos sql que são usados para manipulação no banco de dados,perceba que dentro do código sql temos o nome da tabela, usuarios, criada no banco, com os respectivos campos que irão receber os valores, na parte final da sintaxe temos VALUES com três interrogações, ???, essas interrogações serão preenchidas antes de serem executadas no banco, pelo método $stmt->bindParam().
  7. $stmt->bindParam(), recebe como argumentos, um valor inteiro que refere-se a posição da interrogação da esquerda para direita, onde será preenchida, pelo segundo argumento que no caso é o valor da variável criada que recebe os valores dos campos do formulário, e o terceiro argumento é um método estático da classe PDO que informa se o valor é uma string ou de outro tipo, no caso acima PDO::PARAM_STRestá informando que o valor é do tipo string, se  fosse um valor inteiro teria que ser PDO::PARAM_INT , você pode  depois dar uma pesquisada na documentação.
  8. Após tudo está nos conformes, o método $stmt->execute() é acionado, e este método tem como retorno true ou false, conforme se a transação ocorreu ou não no banco de dados
  9. Em seguida implementamos uma condicional, onde se o retorno de $stmt for true, é executado um script na página na função alert() em javascript, que informará que tudo deu certo no cadastramento do usuário, retornando para a página de castrado novamente. OBS: O formulário continuará preenchido, no entanto você pode depois implementar algo simples para limpar o formulário após o cadastramento.
  10. Na parte final no bloco de controle, catch, se ocorrer alguma exceção e não for possível fazer a operação no banco, será lançado uma mensagem de erro.

Se tudo tiver sido feito corretamente, seu formulário já estará cadastrando no banco, aqui fizemos um teste e tudo ocorreu bem. O próximo passo será a criação do formulário de login, que fará a autenticação do usuário.

Aproveitando o formulário já criado anteriormente, vamos copiá-lo para fazermos o nosso formulário de login, retirando apenas as partes desnecessárias, ficando como resultado final o código abaixo:


Ficou um formulário bem simples, onde com o endereço de email e senha será feita a verificação no banco de dados, e confirmando será feito login. Perceba em action que temos login.php, esse arquivo ainda não foi criado, e iremos criá-lo agora.

Crie um novo arquivo no seu editor favorito e salve como login.php, insira o código abaixo:


include_once 'conexao.php';

$email = $_POST['email'];
$se = $_POST['senha'];
$senha = md5($se);
$pdo=conectar();

try{
$stmt = $pdo->prepare("SELECT nome, email,senha FROM usuarios WHERE email = ?");
$stmt->bindParam(1, $email,PDO::PARAM_STR);

$stmt->execute();

foreach ($stmt as $reg){

$nome = $reg['nome'];
$email_verifica = $reg['email'];
$senha_verifica = $reg['senha'];
}
if ($senha===$senha_verifica){
echo $nome.' logou com sucesso';

}else{

echo('');
}

}catch(PDOException $e){
echo 'ocorreu o seguinte erro: '.$e;
}


?>

vamos explicar um pouco o código:

  1. novamente incluímos o arquivo conexao.php  criado no início, lembrando que toda vez que vamos nos conectar a o banco precisaremos da função conectar(), que pertence a esse arquivo.
  2. nas variáveis criadas $email e $se, são recebidos valores através das variáveis globais que são os  campos do formulário de login.html, após isso, criptografamos novamente a senha usando a função md5(), pois como cadastramos ela no banco usando esse processo, no login ao digitarmos a senha será necessário o mesmo procedimento, para que a senha digitada chegue ao banco identicamente à senha armazenada.
  3. dentro dos blocos de controle try e catch temos os processos de busca na tabela que pegam os valores de nome, email e senha em que o campo email tem que ser idêntico ao que foi digitado, conforme passado via parâmetro em bindParam(). Não vamos prolongar pq já explicamos esses procedimentos anteriormente no cadastro de usuário. Feito a busca com foreach, temos a condicional que verifica a igualdade das senhas, se for true é exibido uma mensagem com o nome de usuário e  frase logou com sucesso, caso contrário vem o alerta em javascript retornado para a própria página do formulário de login.

Perceba que se o login for realizado com sucesso, caberá a você usar a sua criatividade para realizar qualquer processo, como redirecionamento de página, como por exemplo um painel de administrador de postagens ou qualquer outra coisa.

Existem também formas seguras que poderemos no futuro está ensinando, de prevenir que certos usuários acessem determinadas páginas em que só um usuário logado, poderá acessar. Caso queiram, poderei está criando uma postagem para tal finalidade.

Bom, era isso pessoal! Foi algo simples só para efeito de aprendizagem! Até mais!!!

ARQUIVOS


Se você ainda não cadastrou seu email para receber atualizações de postagens, vá a nossa página inicial e cadastre, ou se preferir clique Aqui
Autor
Maclaine Sabino

Maclaine Sabino Graduado em Matemática, Administração, finalizando Análise e Desenvolvimento de Sistemas.
Ama aprender coisas novas, tecnologia e música.