PHP e Bootstrap: cadastro completo com autenticação via e-mail
Aprenda neste exemplo como criar um sistema de cadastro com autenticação por e-mail. Faremos isso usando apenas PHP em conjunto com o banco de dados MySQL, além do Bootstrap para estilizar as páginas da aplicação.
Projeto já adicionado aos favoritos. Clique aqui para ver todos seus favoritos
Obrigado pela sua avaliação, deixe o seu feedback nos comentários :D
Introdução
Apresentação do processo de cadastro com confirmação
Grande parte dos sistemas de cadastro em aplicações web enviam uma URL por e-mail para confirmação dos dados cadastrais. É através deste mecanismo que podemos verificar se o usuário possui acesso ao e-mail informado, uma vez que ele pode ser utilizado por outras áreas do sistema, como recuperação de senha, comunicação de marketing, e muitas outras.
Por exemplo, ao se cadastrar em um site você recebe em seu e-mail um link, contendo como parâmetro algum dado criptografado. Nesse momento o site contém suas informações, mas até que você clique neste link seu acesso será limitado ou, em alguns casos, negado. Ao clicar neste link você é redirecionado para uma página que exibe uma mensagem de boas-vindas e, após isso, o sistema é acessado normalmente, pois seu usuário está agora ativo.
Neste exemplo veremos como desenvolver esse mecanismo em PHP, seguindo a arquitetura MVC, sem a utilização de frameworks. Na sequência de imagens abaixo podemos ver as views da aplicação que serão exploradas neste exemplo. Note que usamos o Bootstrap para estilizar os elementos visuais.
Tecnologias utilizadas
Neste exemplo utilizamos a linguagem PHP no back-end e para acessar o banco de dados empregaremos a biblioteca PDO. Nesse caso, usaremos o MySQL, mas com o PDO podemos usar outro banco com facilidade.
Já no front-end teremos HTML, CSS e Bootstrap para compor a interface, como mostra a Figura 1. Vale notar que o Bootstrap também foi utilizado para dar comportamento responsivo as páginas da aplicação.
Para a validação front-end do formulário de cadastro utilizamos a biblioteca jQuery Validate. Este plugin permite a validação baseada na tipagem do campo e em seus atributos. Podemos vê-lo em ação na Figura 2.
Na Figura 2 vemos a validação do primeiro campo que deve conter um endereço de e-mail informado pelo usuário. A mensagem de erro, bem como a validação é baseada no tipo do input, que neste caso tem o valor email. Em seguida, nos demais campos temos a validação baseada no atributo required, que obriga o preenchimento do campo.
Pré-requisitos para este exemplo
Sugestão de Conteúdo Prévio
- 5 minutos PHPMailer: Envio de e-mails com PHP
- Documentação PHP: Envio de e-mail autenticado utilizando o PHPMailer