Inclusão – Sistema de Cadastro com PHP + PDO e MySQL

Inclusão - Sistema de Cadastro com PHP + PDO e MySQLHoje vamos construir um formulário para inclusão de dados com HTML, CSS, JavaScript, PHP e MySQL, esse post é o primeiro de uma série de 4 onde vou demonstrar como Incluir, Editar, Excluir e Listar dados, basicamente teremos sistema de cadastro de clientes.

No meu blog tem muito material sobre como montar CRUD com PHP e PDO, mas nunca escrevi um post partindo do front-end com HTML, CSS e JavaScript até chegar a gravação dos dados no MySQL com PHP.

Alguns pontos importantes:

  • Quando falo em CSS me refiro ao framework Bootstrap, pois não sou especialista em front-end então nossas páginas serão estilizadas com ele.
  • Não vamos usar nenhum tipo de plugin jQuery, toda a parte de validação e máscara no front-end será escrita com JavaScript puro.
  • Não vamos trabalhar Orientados a Objeto, pois iria demorar mais para explicar os conceitos de O.O.

Outros posts que podem interessar:

Consulta – Sistema de Cadastro com PHP + PDO e MySQL

Edição – Sistema de Cadastro com PHP + PDO e MySQL

Exclusão – Sistema de Cadastro com PHP + PDO e MySQL

 

Editado em 30/10/2015: Atendendo a pedidos acrescentei nesse cadastro o campo “foto”, onde será possível fazer o upload de uma foto do cliente, não estou me atendo a detalhes de redimensionamento de imagem para não deixar o post muito longo.

Requisitos para essa série de posts:

  • Baixar Bootstrap
  • PHP 5.3 ou superior
  • Extensão pdo_mysql habilitada no PHP
  • MySQL 5.5 ou superior

Script do Banco de Dados

Nosso banco de dados “db_blog” terá apenas uma tabela “tab_clientes” com alguns campos básicos, observem que entre os campos temos “data_cadastro” esse campo vai conter a data e hora em que foi incluído o registro, depois temos “data_alteracao” nesse campo será gravado a data e a hora em que foi executado algum tipo de modificação nesse no registro.

 

Formulário HTML para Inclusão de Dados

Abaixo temos o script “cadastro.php” com um formulário HTML que será submetido via POST, observem que nesse script temos apenas código HTML, tudo o que for ligado a folha de estilo fica na pasta “css“, a base de estilização fica no arquivo do “bootstrap.min.css” e estilizações customizadas ficam no arquivo “custom.css“.

Não existe nenhum tipo de evento JavaScript para validação ou máscara ligado diretamente nos inputs, esses eventos estão declarados no script “custom.js“.

Se os dados forem validados pela função JavaScript o formulário dessa página será enviado para o script PHP “action_cliente.php“, observem que temos um input hidden com name=”acao” onde passo o valor “incluir“. Isso indica para o script “action_cliente.php” que os dados recebidos deverão ser incluídos no banco de dados, nos outros posts dessa série serão passados valores “editar” e “excluir“.

 

Folha de estilo CSS customizada

No decorrer dos próximos posts essa folha de estilo “custom.css” poderá sofrer algumas alterações conforme forem surgindo necessidades nas outras páginas, a maior parte das regras de estilização como já citado acima vem do arquivo “bootstrap.min.css“.

Post relacionado:  Exclusão - Sistema de Cadastro com PHP + PDO e MySQL

 

Script JavaScript com Validação, Máscaras e Load de Imagem

Abaixo segue o script “custom.js“, nesse arquivo temos a função que valida os dados “validaCadastro()” antes do evento submit, nesse ponto deixei todos os campos com preenchimento obrigatório, para mais detalhes sobre validação com JavaScript indico a leitura do post Validar Formulário usando JavaScript.

Essa validação tem como objetivo facilitar a vida do usuário, pois as mensagens são processadas no front-end mas ainda temos que construir uma validação completa no back-end com PHP.

Também temos a função que coloca uma máscara nos campos CPF, Data de Nascimento, Telefone e Celular, isso facilita para o usuário preencher de maneira correta esses campos.  

Na função “loadFoto()” tem como objetivo exibir instantaneamente a imagem selecionada para upload dentro do elemento <img>, deixando o usuário mais seguro sobre a imagem que será feito o upload. Essa função recebe 2 parâmetros, sendo o primeiro o ID do input FILE e o segundo parâmetro é o ID do elemento <img> onde será exibida a foto.

Podemos observar que estou atribuindo os eventos JavaScript usando as chamadas “addEventListener” atualmente suportada pela maioria dos navegadores e para os I.E. mais antigos uso “attachEvent”, claro que usando jQuery seria necessário menos linhas nesse script, mas para efeitos didáticos vamos só de JavaScript mesmo.

 

Post relacionado:  DSN PDO - diversos bancos de dados | Dica

Script PHP para Inclusão dos Dados

O script “action_cliente.php” possui praticamente toda a lógica CRUD do nosso sistema de cadastro, por padrão e uma pequena medida de segurança esse script só recebe dados vias POST, implementei toda a parte de validação dos dados recebidos sempre via POST e a lógica para inclusão de novos registros.

Nos outros posts de Edição e Exclusão dessa série também será utilizado esse script, para sistemas simples onde não uso frameworks utilizo essa técnica de agrupar no mesmo script a lógica de Inclusão, Edição e Exclusão de registros, basta passar um parâmetro “$_POST[‘acao’]” indicando qual será o tipo de processamento necessário. 

Para conexão com o banco de dados MySQL utilizo a extensão PDO, o script de conexão “conexao.php” é o mesmo utilizado nesse post PDO – conexão seguindo padrão Singleton no PHP, basta alterar os dados de conexão conforme o ambiente de desenvolvimento do leitor.

Antes de executar o INSERT dos dados é processado o upload da imagem enviada pelo formulário, validando se é uma extensão de imagem (jpeg, jpg, png ou bmp) e posteriormente gravando na pasta “fotos”, no blog existe um post detalhando upload em PHP com detalhes e passo a passo para ajudar o leitor que deseja conhecer mais sobre esse assunto. Se não for enviado nenhum upload então é gravado no campo foto o valor “padrao.jpg”, na pasta fotos já existe essa imagem.

O INSERT dos dados também é executado de maneira parametrizada, já escrevi diversos posts no blog explicando os benefícios de se trabalhar parametrizado com PDO principalmente no quesito segurança, para o leitor que deseja obter mais conhecimentos sobre essa extensão indico o post Curso sobre PHP com PDO, onde publiquei vários vídeos sobre PDO.

Observem que no “miolo” do script fica o código PHP, assim é possível exibir mensagens de erro durante a validação dos dados e as mensagens de sucesso ou erro durante as operação no banco de dados, ao final da inclusão dos dados será emitido a mensagem de sucesso e após 3 segundos o usuário será redirecionado para página “index.php” (ainda não foi construída) que deverá conter a listagem dos clientes.

 

Resultado Final

Abaixo temos o exemplo caso o usuário clique em “gravar” sem preencher os campos:

validacao-cadastro

 

Agora o preenchimento correto com as devidas máscaras nos campos:

inclusao-cliente

E por último a mensagem caso o cadastro seja executado com sucesso:

inclusão-realizado-com-sucesso

 

Bom pessoal, nesse post demonstrei como podemos construir um formulário de inclusão com validação de dados para serem gravados em um banco de dados MySQL com PHP usando a biblioteca PDO. Observem que podem ser necessários diversos campos conforme a necessidade, mas o fluxo de informação serás o mesmo, as validações podem ser mais complexas como validações de CPF, número de telefone e etc, a partir desse ponto o leitor adapta a sua necessidade.

Nos dias atuais está se tornando normal o uso de frameworks PHP para construir esse tipo de aplicação, eu acho interessante essa prática pois traz ganho de tempo e redução de custos nos projetos, mas vejo iniciantes na área de desenvolvimento WEB partindo para o uso desses frameworks sem nem mesmo saber construir o formulário desse post.

Fica a dica, primeiro aprenda o simples para depois evoluir para o complexo.

Link para Download do projeto final com INCLUSÃO, EDIÇÃO, EXCLUSÃO E CONSULTA. (8132 downloads)

Até a próxima pessoal …

Tags:,
Show Buttons
Hide Buttons