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.
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
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.
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.
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.
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.
Na Figura 5, temos a pasta fonts, na qual as fontes utilizadas pelo Bootstrap estão organizadas.
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.
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.
Sugestão de conteúdo
Para aprofundar seus estudos em HTML, sugerimos que assista ao seguinte exemplo com tema relacionado: