Curso Criando um Site do Zero - Aula 14 - Cadastro de Clientes I

Nesta vídeo aula, iniciaremos o aprendizado sobre o desenvolvimento do cadastro de clientes utilizando PHP e MySql.

O primeiro passo será salvar o arquivo como cadastrese.php e mudar os banners.

Após isso criaremos nosso formulário com os inputs conforme abaixo:

<form name="FormularioCadastro" id="FormularioCadastro" method="post" action="../controllers/controller_cadastro.php">
    <div class="Formulario">
        <label for="nome">Nome: * </label><br>
        <input type="text" id="nome" name="nome" required>
    </div>

    <div class="Formulario">
        <label for="email">Email: *</label><br>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="Formulario">
        <label for="telefone">Telefone: *</label><br>
        <input type="tel" id="telefone" name="telefone" required>
    </div>

    <div class="Formulario">
        <label for="idade">Idade: *</label><br>
        <input type="text" id="idade" name="idade" required>
    </div>

    <div class="Formulario">
        <input type="submit" id="botao" name="botao" value="Cadastrar">
    </div>
</form>

Repare que no código acima, cada input está armazenado dentro de uma div com a class Formulario. Isso facilita muito a organização do formulário. Após a confecção do HTML, estilizaremos nosso formulário:

/*Smartphone*/
@media only screen and (max-width: 480px){
    .Formulario{float:left; width: 100%; margin: 20px 0;}
        .Formulario input[type=text],.Formulario input[type=email],.Formulario input[type=tel]{width: 100%; height: 40px;}
        .Formulario input[type=submit]{width: 50%; height: 60px; cursor: pointer; background: #333; color: #FFF; font-weight: bold; font-size: 22px;}
}

/*Tablet*/
@media only screen and (min-width: 481px) and (max-width: 768px){
    .Formulario{float:left; width: 100%; margin: 20px 0;}
        .Formulario input[type=text],.Formulario input[type=email],.Formulario input[type=tel]{width: 70%; height: 40px;}
        .Formulario input[type=submit]{width: 35%; height: 60px; cursor: pointer; background: #333; color: #FFF; font-weight: bold; font-size: 22px;}
}

/*Desktop*/
@media only screen and (min-width: 769px){
    .Formulario{float:left; width: 100%; margin: 20px 0;}
        .Formulario input[type=text],.Formulario input[type=email],.Formulario input[type=tel]{width: 70%; height: 40px; font-size: 18px; color: #444;}
        .Formulario input[type=submit]{width: 25%; height: 60px; cursor: pointer; background: #333; color: #FFF; font-weight: bold; font-size: 22px;}
}

No código acima estilizamos com CSS os inputs pertencentes a div class Formulário de forma que o formulário apareça harmônico no desktop e nos dispositivos mobile.

Por fim, um plus no nosso código, utilizando o plugin MaskedInput do JQuery, colocaremos a máscara de telefone para 8 e 9 dígitos.

Vamos instalá-lo no nosso projeto, dentro do arquivo head.php:

<script src="../libraries/Maskedinput.js"></script>

Por fim vamos chamá-lo no nosso arquivo javascript.

$('#telefone').on('focus',function(){
    $(this).mask("(99) 9999-9999?9");
    $(this).on('keyup',function(){
        var tamanho=$(this).val();
        var numStr=tamanho.replace(/[^0-9]/g,'');
        var numStr2=numStr.length;

        if(numStr2 == 11){
            $(this).mask("(99) 99999-999?9");
        }else if (numStr2==10){
            $(this).mask("(99) 9999-9999?9");
        }
    });
});