Série da semana: Projeto completo: API REST + React + Mobile

Veja mais
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.

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.
Achou 12 meses muito tempo?

Programação muda todo dia e cada novidade nos obriga a rever tudo que já sabíamos. Só um estudo contínuo nos leva ao sucesso.

Apenas 3,5% dos nossos assinantes querem cancelar antes dos 12 meses

O que nossos clientes dizem:

"Excelente trabalho. É assim que a gente vê que o investimento vale a pena. Parabéns!"

- Danniery Alves -
O que nossos clientes dizem:

"Prá lá de bom... Está ótimo: com clareza, didática, conhecimento de causa e uma boa dose de humor. "Persistência" é o segredo."

- Paulo Costa -
O que nossos clientes dizem:

"DevMedia ensina mais do que qualquer faculdade!!!"

- Mauricio Hartmann -