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

Uma vez que usamos o Bootstrap, sendo esse um framework responsivo, precisamos incluir algumas metatags no header do documento para auxiliar o framework na tarefa de adaptar a página a diferentes resoluções de tela.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
02 <meta name="viewport" content="width=device-width, initial-scale=1">

• Linha 1: A metatag X-UA-Compatible permite indicar para o Internet Explorer qual versão do motor de renderização deve ser utilizada, caso ela esteja disponível. Essa configuração força o navegador a ignorar o modo de compatibilidade, criado para sites que só funcionam em versões antigas do Internet Explorer. Utilizando o valor IE=edge, solicitamos que o documento seja renderizado utilizando os recursos mais recentes implementados, requerendo do IE maior compatibilidade com o CSS3, utilizado pelo Bootstrap.
• Linha 2: Com a metatag viewport podemos manipular a área do navegador onde a página é renderizada. Isso é necessário, pois é um comportamento padrão do navegador tentar ajustar a página ao viewport através de redução. O resultado é uma página com letras pequenas, que necessita de ampliação e barras de rolagem para ser lida, como mostra a Figura 1. Para corrigir esse problema, indicamos que a escala inicial utilizada para renderização deve ser de 100%, com initial-scale=1. Falta agora fazer com que o viewport tenha o mesmo tamanho do dispositivo, e essa configuração é realizada pela declaração width=device-width. Com isso preparamos a página para responsividade.

Também é no header que incluímos os arquivos de estilo do Bootstrap e stylesheet.css, que contém customizações para alguns componentes. A ordem desses arquivos é definida pela precedência das regras CSS declaradas. Portanto, stylesheet.css deve ser o segundo arquivo a ser incluído, uma vez que ele sobrescreve declarações feitas em bootstrap.min.css.

<link rel="stylesheet" href="css/bootstrap.min.css">
02 <link rel="stylesheet" href="css/stylesheet.css">

• Linha 1: Arquivo CSS do Bootstrap.
• Linha 2: Arquivo CSS contendo pequenos ajustes para os componentes do Bootstrap.

Logo após o conteúdo principal do documento, no final do arquivo, temos a inclusão dos scripts. Eles são inseridos antes do fechamento da tag body e não no header para garantir que os acesso aos elementos da página será feito após os mesmos serem completamente carregados.

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/additional-methods.min.js"></script>
<script src="js/localization/messages_pt_BR.min.js"></script>
<script src="js/jquery.mask.min.js"></script>
<script src="js/holder.min.js"></script>
<script src="js/localfilereader.js"></script>
<script src="js/validate.js"></script>
<script src="js/mask.js"></script>

• Linha 1: Arquivo da biblioteca jQuery, necessário para o funcionamento dos plugin de validação e máscara.
• Linha 2: Arquivo de script do Bootstrap, que garante o funcionamento dos diálogos. Veremos mais sobre ele em outros vídeos.
• Linha 3: Plugin de validação jQuery Validate, usado na validação front-end do formulário.
• Linha 4: Métodos de validação adicionais do plugin jQuery Validate.
• Linha 5: Tradução das mensagens de erro de validação do plugin jQuery Validate.
• Linha 6: Plugin para as máscaras utilizadas nos campos do formulário, jQuery Mask.
• Linha 7: Plugin para gerar a imagem inicial na área de pré-visualização.
• Linha 8: Implementação da pré-visualização da imagem.
• Linha 9: Implementação da validação dos campos do formulário, envio e leitura da resposta impressa pelo cadastro.php.
• Linha 10: Implementação para a adição das máscaras nos campos do formulário.

Aprenda também:

• Guia MVC e Regras de negócio