O desenvolvimento deste formulário foi dividido em duas etapas: a interface de entrada para os dados do usuário e a validação e inserção dos dados no banco de dados.
Uma grata surpresa para mim – que apenas tive rasas aventuras em desenvolvimento web – foi o Bootstrap e sua documentação completíssima. O primeiro passo para a criação desse formulário foi a elaboração de um container de englobaria um título para a página e os devidos campos de input, no arquivo principal "index.php". Após estabelecer o container e suas devidas modificações estéticas com css, criei uma estrutura form com um dos temas do Bootstrap, adicionando cada campo e especificando seus tipos de entrada. E pronto, minha página de formulário estava pronta, com um visual "clean", organizado e bonito, me levando novamente a me perguntar como nunca me arrisquei no Bootstrap antes.
O botão do tipo input e a action definida no form enviava as informações via método POST para outro arquivo .php que tratava os dados recebidos.
Como diria um sábio professor meu, Rafael Lins, "meus amigos, não reinventem a roda, isto é perda de tempo", então para obter os dados de localização pelo CEP foi utilizado o método do tutorial do portal ViaCEP.com.br, que usa JavaScript para obter o dado de CEP via onblur
<input type="text" class="form-control" name="inputCep" id="inputCep" placeholder="Ex: 00000-000" onblur="pesquisacep(this.value);" required>
E na função chamada, realiza a procura, que seta todos as informações de localização, caso o CEP seja encontrado, ou um alerta.
Para os campos obrigatórios foram utilizados o required do HTML para exigir que alguns campos sejam obrigatórios. Para a questão dos formatos de CEP e CPF foram utilizadas máscaras, do JQuery, para estabelecer o tamanho, as separações e os tipos de carácteres dos campos.
<script type="text/javascript" src="node_modules/jquery/dist/jquery.mask.min.js">
$("#inputCpf").mask("000.000.000-00")
$("#inputCep").mask("00.000-000")
</script>
O tamanho da string de CPF e CEP e a validade deles foram tratados no arquivo .php que serão explicados posteriormente. E os demais campos foram definidos utilizando a type do HTML, como number, date, text. O campo de estado, como foi exigido, é um campo select do HTML e ao preencher os campos via CEP, é selecionado automaticamente o campo.
Tendo em mente uma matriz, o design do formulário foi dividido em rows, onde cada row possuía colunas que indicavam os campos a serem preenchidos. Por exemplo, na primeira row, o campo "nome" ocupa todo o espaço 12 definido para a col padrão, e os demais rows dividiam esse espaço entre os campos, de acordo com o tamanho previsto de entrada.
A linha é definida em
<div class="form-row">
e a coluna da seguinte forma, definindo o tamanho em col-sm-12
<div class="form-group col-sm-12">
<label for="nome">Nome completo</label>
<input type="text" class="form-control" name="inputNome" id="inputNome" placeholder="Nome" required>
</div>
</div>
Um botão submit repassa todas as informações preenchidas para a página "insert.php" que realiza o tratamento e a inserção dos dados no banco de dados. O método utilizado foi o POST para omitir as informações da URL, deixando-a mais limpa.
<form action="node_modules/php/insert.php" method="post">
Esta seção explicita como foi feita o lado tardoz do processo de cadastro, utilizando PHP e SQL.
Se obtém os dados do método POST pela seguinte função MySQL
$nome = mysqli_real_escape_string($con, $_POST["inputNome"]);
onde se retorna uma string correspondente ao id informado no parâmetro.
Então, posteriormente, é checada a validade dos CPFs e CEPs inseridos, da seguinte forma:
- Remoção dos caracteres não-numéricos.
$chars = array("-" , "," , ".");
$cpf = str_replace($chars,"",$cpf);
- Armazenamento do tamanho da string (11 para CPF e 8 para CEP).
$sizecep = strlen($cep);
- Conversão em inteiro.
$cep = intval($cep);
A variável $msg armazena o possível erro na análise destes dois campos, é uma string que recebe "O CPF informado é inválido!" para ser impresso na tela posteriormente, o mesmo para CEP.
Antes de tudo é importante explicitar que em todas as páginas é realizada uma conexão com o banco, descrita no arquivo "conexao.php". A conexão é realizada com um banco de dados criado via phpMyAdmin, cujo o código para geração deste está presente no arquivo "formulariocadastroSQL.sql".
Para realizar a inserção no banco de dados, é criada uma string com um comando SQL
$sql = "INSERT INTO pessoa(id, nome, nascimento, cpf, cep, rua, numero, bairro, cidade, estado, complemento)
VALUES ('$id', '$nome', '$nasc', '$cpf', '$cep', '$rua', null, '$bairro', '$cidade', '$estado', '$complemento')";
e a partir daí se inicia o código HTML da página, pois, no meio do script, se realiza uma conferência.
if ($con->query($sql) === TRUE)
Se a conexão for bem sucedida, ele exibe uma tabela de linha única com as informações do cadastrado. Caso contrário, exibe uma mensagem.
<?php
}
else if($msg != " "){
?>
Se aquela variável $msg possuir algum valor, ou seja, se o erro for no CEP ou CPF, a mensagem contida nela é exibida.
<div class="alert alert-danger" role="alert"> <?php echo "Error: " . $msg . "<br>"; ?> </div>
Caso contrário, o erro SQL é exibido.
<div class="alert alert-danger" role="alert"> <?php echo "Error: " . $sql . "<br>" . $con->error; ?> </div>
A formação da tabela de cadastrados é relativamente simples. Após estabelecida a conexão, sempre no começo do código, se inicia o mesmo formato de página HTML que utilizamos nas demais. A novidade à esta altura é a classe table e seus belos temas que o Bootstrap proporciona.
Para este projeto, foi utilizado um table dentro do container da classe table-striped, que oferece tons de cores de fundo alternados linha-a-linha na tabela criada.
<table class="table table-striped">
Logo em seguida, são definidas as colunas que serão informadas, com um tema mais escuro, da classe thead-dark.
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Nome</th>
<th scope="col">Data de Nascimento</th>
...
</thead>
E só. A combinação HTML e Bootstrap possibilita criação de estruturas de forma fácil e esteticamente muito bem feitas. Precisa se esforçar bastante para fazer um site feio e desorganizado utilizando Bootstrap.
Para preencher a tabela precisamos de apenas dois comandos: um para definir a consulta e outro para executar a consulta.
$consulta = "SELECT * FROM pessoa";
$listagem = $con->query($consulta) or die($con->error);
Este código é executado dentro do código HTML e faz intercalações entre as duas linguagens para preencher cada coluna com cada dado que a variável $listagem retornar.
while($lista = $listagem->fetch_array()):
?>
<tr>
<th scope="row"> <?php echo $lista["id"]; ?> </th>
<td> <?php echo $lista["nome"]; ?> </td>
<td> <?php echo $lista["nascimento"]; ?> </td>
...
</tr>
<?php
endwhile;
?>
Desta forma, a tabela é preenchida para cada dado que cada $lista retornará.
Por fim, estruturar uma página de formulário utilizando estas tecnologias é simples, ao menos à altura deste projeto foi tranquilo. Como não tinha muito contato com desenvolvimento web, tive que dedicar alguns dias ao estudo das tecnologias (até agreguei um curso de POO com PHP ao currículo) numa madrugada maratonando vídeo-aulas do Curso em Vídeo. Talvez por minha falta de experiência em PHP e web em geral, não soube onde aplicar o framework Slim ao projeto, infelizmente, pois era um dos requisitos. Mas a manutenção dos dados utilizando "PHP puro" não foi muito complicado, também pela simplicidade do projeto, mas o foco é sempre aprender mais e foi muito interessante e proveitoso aprender essas tecnologias até então novas para mim e aplicá-las neste desafio. Enfim, espero que gostem.
- ViaCEP JavaScript e JSON: https://viacep.com.br/exemplo/javascript/
- Bootstrap Documentation: https://getbootstrap.com/docs/4.1/getting-started/introduction/
- PHP Documentation: http://php.net/docs.php
- w3school.com CSS Tutorial: https://www.w3schools.com/css/default.asp
- GitHub.com/dahnielson Pure PHP UUID Generator: https://gist.github.com/dahnielson/508447
- Tutorial Republic PHP MySQL INSERT Query: https://www.tutorialrepublic.com/php-tutorial/php-mysql-insert-query.php
- Curso em Vídeo Curso de PHP: https://www.cursoemvideo.com/course/curso-php-iniciante/