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.

177

HTML do exemplo: header e carregamento do JavaScript

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.
Página no smartphone sem as metatags responsivas
Figura 1. Página no smartphone sem as metatags responsivas

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:

Black November

Desconto exclusivo para as primeiras 200 matrículas!

<Perguntas frequentes>

Carreira
Por onde devo iniciar os estudos?

Recomendamos começar pelo Plano de Estudo Carreira Programador Front-End. Essa área da programação é mais visual e intuitiva, tornando-a ideal para iniciantes. No Front-End, você aprenderá a criar a parte visual dos sites, como layout, cores e interatividade. Depois de dominar o Front-End, você pode avançar para Programador Back-End, onde aprenderá a lidar com a lógica e o funcionamento interno dos sites, e, finalmente, para Programador Mobile, focando no desenvolvimento de aplicativos para smartphones. Nossa metodologia é estruturada de forma progressiva para garantir que você desenvolva confiança e experiência ao criar projetos reais, como sites estáticos e dinâmicos.

Em quanto tempo vou me tornar um programador?

O tempo necessário para se tornar um programador varia de acordo com a dedicação de cada estudante. Com nossa metodologia, que inclui um Plano de Estudo detalhado e suporte contínuo, você pode se tornar um programador de 6 meses a um ano, dependendo do seu ritmo e esforço. Nossa abordagem prática e orientada a projetos ajudará a acelerar seu aprendizado.

Eu preciso de um diploma de faculdade para começar a atuar como programador?

Não. Ser programador é uma excelente oportunidade para quem não possui diploma de faculdade. Muitas empresas contratam baseadas nas habilidades técnicas e experiência prática, não necessariamente em diplomas. Após conquistar uma vaga, você pode optar por complementar sua formação com um diploma.

Por que a programação se tornou a profissão mais promissora da atualidade?

A necessidade de programadores cresceu exponencialmente, especialmente após a pandemia de Covid-19, que forçou muitas empresas a se adaptarem ao digital. Com o crescimento das empresas de tecnologia, a demanda por programadores aumentou. Atualmente, há mais de 200 mil vagas abertas no Brasil devido à falta de profissionais qualificados.

Metodologia
Quais são os principais diferenciais da DevMedia?

Didática e Metodologia Com mais de 20 anos de experiência, nossa metodologia foca em menos aulas e mais prática. Desenvolvemos dezenas de projetos e exercícios para ajudar você a se tornar um programador completo. Nossos projetos são desafiadores e autênticos, não apenas exercícios repetitivos.
Projetos reais e exercícios Você desenvolverá diversos projetos práticos em cada carreira (Front-End, Back-End e Mobile), recebendo mentoria e suporte contínuo. A prática é essencial, e oferecemos milhares de exercícios para ajudar você a fixar o conteúdo e melhorar sua posição no ranking.
Suporte ao aluno Nossa plataforma oferece suporte dedicado com professores experientes, respondendo suas dúvidas em menos de uma hora. Isso garante que você receba a ajuda necessária durante toda a sua jornada de aprendizado.
Gamificação A DevMedia utiliza gamificação para tornar o aprendizado mais envolvente e motivador. Você acumula pontos e moedas por acertos, que podem ser trocados por produtos e customizações no seu card pessoal. Além disso, o sistema de ranking mensal incentiva a competição amigável e a melhoria contínua.

O que eu irei aprender estudando pela DevMedia?

Ao estudar conosco, você se tornará um programador Full Stack, dominando Front-End, Back-End e Mobile. Utilizamos a linguagem JavaScript, a mais utilizada no mercado, preparando você para criar sistemas webs e aplicativos celulares. Nossa abordagem prática inclui exercícios para fixar o conhecimento e desenvolvimento de projetos reais que te preparam, para o mercado de trabalho.

Quais as vantagens de aprender programação através da linguagem JavaScript?

  1. Ela é Multiplataforma, ela vai te permitir programar para web e para celulares utilizando praticamente a mesma sintaxe.
  2. Elá é Full Stack. Ela te permite criar aplicações Front-end, Back-end e Mobile. Isso acelera muito sua carreira e aumenta suas possibilidades de pegar trabalhos autônomos e conquistar uma vaga no mercado.
  3. Ela é fácil de aprender. Como ela não exige conhecimento inicial em “Orientação a Objetos” ela se torna mais simples com uma curva de aprendizado suave e vai te permitir começar a programar mais rápido do que outras linguagens

A plataforma oferece certificados?

Sim, oferecemos dois tipos de certificados: o certificado de conclusão, que você adquire ao consumir o conteúdo, e o certificado de autoridade, que você obtém ao acertar exercícios. Ambos possuem carga horária, que pode ser utilizada para fins acadêmicos, como atividades complementares na faculdade, e também para comprovações em processos seletivos ou no seu currículo.

A plataforma tem suporte ao aluno, como funciona?

Sim, temos uma equipe de programadores pronta para ajudar com todas as suas dúvidas! Durante o horário comercial, o tempo médio de resposta é de até 10 minutos. E não se preocupe, também oferecemos suporte à noite e nos finais de semana, com um prazo de resposta um pouco maior.

A DevMedia me forma como programador Full Stack?

Sim! Oferecemos uma formação completa, do zero até Full Stack. Nosso foco é na prática, então você vai encontrar muitos exercícios e projetos reais ao longo do curso. Garantimos que você sairá com a autonomia necessária para desenvolver seus próprios projetos com confiança!

Tem horário para as aulas?

Não, não temos horários fixos para as aulas. Todo o nosso conteúdo está disponível para você acessar a qualquer momento, permitindo que você estude conforme sua própria disponibilidade e ritmo. Dessa forma, você pode integrar o aprendizado à sua rotina de maneira mais flexível e eficaz.

Por que a DevMedia não usa videoaulas em sua didática?

Nosso foco principal é formar programadores de verdade. Sabemos que o dia a dia de um programador envolve muita leitura, interpretação e escrita de código. Por isso, nosso conteúdo é desenvolvido para ambientar você nesse processo desde o início, proporcionando mais autonomia e acelerando seu aprendizado.
Na vídeo-aula é o professor que está lendo, interpretando e escrevndo o código para você, isso limita o seu progresso. Ao ler e interagir diretamente com o conteúdo, você exercita sua capacidade de leitura e concentração, além de poder avançar no seu próprio ritmo. Dessa forma, você se torna um programador mais independente e preparado para os desafios reais do mercado.

Preciso de um computador específico para estudar na DevMedia?

Não é necessário nada específico. Qualquer computador com processador atual e memória de 8 GB é suficiente.

Eu consigo estudar pelo celular?

Sim, a DevMedia possui um aplicativo que te permite seguir com seus estudos de qualquer lugar.

A DevMedia tem aplicativo?

Sim, nosso aplicativo está disponível na Play Store e na Apple Store, permitindo que você estude de forma prática e conveniente em qualquer lugar.

Preciso estar na faculdade para acompanhar os estudos na DevMedia?

Não, a faculdade não é necessária. Você não precisa de nenhum conhecimento prévio para iniciar os estudos na nossa plataforma.

Assinatura e Pagamentos
Quais são os planos de assinatura disponíveis?

Oferecemos dois tipos de planos: o plano recorrente e o plano anual. No plano recorrente, a cobrança é lançada mensalmente no cartão de crédito, necessitando apenas do limite para uma parcela. No plano anual, o valor total é lançado no cartão de crédito, parcelado em 12 vezes, e você precisa dispor do valor total no limite do seu cartão. Você também pode optar por pagar no PIX ou no Boleto parcelado (sujeito à analise de crédito)

Adquirindo o plano, terei acesso a todo o conteúdo?

Sim, ao assinar nossa plataforma, você desbloqueia acesso total a todo o nosso conteúdo, sem precisar comprar nada separadamente.

A plataforma tem planos vitalícios?

Não, nossos planos são anuais, garantindo que você tenha acesso contínuo às atualizações mais recentes e aos novos conteúdos. A tecnologia evolui rapidamente, e um plano vitalício oferece um conteúdo estático que se tornará ultrapassado em pouco tempo. Com nossos planos anuais, você está sempre à frente, aprendendo as novidades e tendências mais atuais no mundo da programação.

A DevMedia tem fidelidade?

Sim, nosso plano tem uma fidelidade de 12 meses, o que garante o tempo ideal para você explorar nosso conteúdo e desenvolver a autonomia necessária para trabalhar com programação.

Como funciona o cancelamento?

Nós garantimos seu direito de cancelamento com reembolso total dentro dos primeiros 7 dias, tanto no plano anual quanto no plano recorrente. Após esse período, se você estiver no plano recorrente e optar por cancelar antes de completar 12 meses, há uma taxa de 10% sobre o valor total. No plano anual, não há multas adicionais, mas o valor pago não é reembolsável.
Para que você aproveite ao máximo seu investimento, oferecemos suporte personalizado para orientá-lo na utilização da plataforma. Também temos a opção de transferência de titularidade do plano, permitindo que outra pessoa aproveite o restante do seu período de assinatura.

A renovação é automática?

Sim, nosso plano anual renova automaticamente após 12 meses, proporcionando conveniência e continuidade no seu aprendizado. Na renovação automática não é debitado do seu cartão as 12 parcelas. Para facilitar e não prejudicar o seu limite, a renovação é feita no modelo recorrente, cobrando uma mensalidade a cada mês.
Além disso, a renovação não tem fidelidade, oferecendo total flexibilidade. Você também tem a liberdade de desativar a renovação automática a qualquer momento, garantindo controle absoluto sobre sua assinatura.

Cadastro
Como excluir meus dados da plataforma?

Para excluir seus dados da plataforma, acesse o link : https://www.devmedia.com.br/fale-conosco/ e abra um protocolo de 'Exclusão de dados'. Nossa equipe processará a solicitação e removerá todas as informações do seu cadastro.

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar