O projeto está inativo

Cadastro completo em PHP com validações back-end e front-end

Neste exemplo veremos como criar um formulário de cadastro com HTML, CSS, JavaScript, jQuery e PHP. Essa página será o cenário utilizado para implementação de dupla validação, no front-end e no back-end. Exploraremos ainda recursos de usabilidade vinculados a segurança, como máscaras e pré-visualização de imagens.

Estrutura do projeto

Conteúdo de apoio

A separação entre o código front-end e back-end é sempre uma preocupação em aplicações web. Ao longo dos anos, diversas soluções têm surgido para permitir ao desenvolvedor isolar as responsabilidades nessas duas camadas. Nesse exemplo solucionamos esse problema criando os arquivos cadastro.html e cadastro.php, que podem ser vistos na Figura 1.

Estrutura de pastas e arquivos do exemplo
Figura 1. Estrutura de pastas e arquivos do exemplo

Dessa forma, cadastro.html contém apenas HTML, CSS e JavaScript e cadastro.php contém apenas código PHP. Entre essas tecnologias está o Ajax, por meio da qual podemos enviar os dados preenchidos no formulário em um formato legível pelo PHP, bem como receber informações do PHP em formato JSON, que pode ser facilmente manipulado pelo JavaScript.

Envio e resposta dos dados
Figura 2. Envio e resposta dos dados

Além da separação entre o HTML e o PHP, o projeto está subdividido em pastas cada uma contendo um pequeno grupo de arquivos, organizados pela sua responsabilidade.

Na pasta app temos as classes do projeto, que foram declaradas em arquivos de mesmo nome e em pastas que correspondem ao seu namespace. Como exemplo, a classe http\Request pode ser encontrada no caminho http/Request.php. Essa padronização facilita o desenvolvimento do autoload da aplicação e ainda a compreensão do projeto. Na Figura 3 podemos conferir esse fragmento da árvore de arquivos do projeto.

Classes utilizadas nesse exemplo
Figura 3. Classes utilizadas nesse exemplo

Na pasta CSS temos os arquivos do Bootstrap bootstrap.min.css e bootstrap.min.css.map. A utilização de arquivos minificados é uma boa prática no desenvolvimento front-end, pois eles são menores e por isso tem tempo de carregamento reduzido. Geralmente esses arquivos contém a palavra min antes de sua extensão, sendo acompanhados de um arquivo .map, que pode ser utilizado para reconstruir o arquivo original para depuração. Por último, temos stylesheet.css, no qual escrevemos pequenos ajustes para alguns componentes do Bootstrap, devido a forma como utilizamos foram utilizados nesse exemplo. A Figura 4 exibe o conteúdo da pasta CSS.

Arquivos CSS utilizados nesse exemplo
Figura 4. Arquivos CSS utilizados nesse exemplo

Na Figura 5, temos a pasta fonts, na qual as fontes utilizadas pelo Bootstrap estão organizadas.

Arquivos de fontes
Figura 5. Arquivos de fontes

Na pasta js temos os scripts utilizados no front-end da aplicação. Eles são responsáveis pelas validações, máscaras e pré-visualização da imagem de perfil, bem como o envio do formulário. A Figura 6 lista esses arquivos.

Arquivos JavaScript
Figura 6. Arquivos JavaScript

A pasta upload é destinada ao armazenamento dos arquivos enviados para o servidor. Nesse exemplo sempre salvamos os arquivos com o nome upload.jpg, conforme pode ser visto na Figura 7.

Pasta para os arquivos recebidos do formulário
Figura 7. Pasta para os arquivos recebidos do formulário

Sugestão de conteúdo

Para aprofundar seus estudos em HTML, sugerimos que assista ao seguinte exemplo com tema relacionado:

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Fa?a parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira