O projeto está inativo

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.

1 - 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.

Tela de cadastro Confirmação do cadastro com a possibilidade de reenvio do e-mail E-mail enviado novamente com a confirmação do reenvio E-mail recebido com o link para confirmação do cadastro Ao clicar sobre o link de confirmação uma mensagem de boas-vindas é apresentada

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.

Tecnologias utilizadas
Figura 1. Tecnologias utilizadas

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.

Validação dos campos do formulário
Figura 2. Validação dos campos do formulário

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

Suporte ao aluno - Deixe a sua dúvida.