CRUD com Bootstrap, PHP & MySQL – Parte VI

Esta é uma série de tutoriais, na qual você vai aprender uma forma eficaz de implementar um sistema de CRUD completo, usando o Bootstrap no front-end e PHP com MySQL no back end.

Agora, neste tutorial, você vai ver como criar a parte de exclusão de registros, usando o componente de modal do Bootstrap.

crud-bootstrap-modal-delete

Ao final deste tutorial, você vai ter um mecanismo de exclusão bem intuitivo para o usuário e poderá reaproveitar no seu projeto.

Aviso: Devido a outros projetos, vou adicionar as explicações de cada código aos poucos, durante a semana.


Antes de Começar

Eu vou assumir que você já está com o seu ambiente de desenvolvimento funcionando, e que já passou pelas partes anteriores desta série.

Se você ainda não estiver com o ambiente pronto, é só ver a introdução desta série para instalar os pré-requisitos, e criar o BD.

Este tutorial é um pouco extenso, e tem alguns códigos mais complexos. Separe um tempo para entender bem, e caso não entenda alguma parte, é só perguntar nos comentários.


Passo 1: Crie a Função de Exclusão

Voltando à pasta customers, implemente a função de exclusão no módulo de clientes, ou seja, no arquivo functions.php:


Passo 2: Crie o Modal de Confirmação

Agora, precisamos criar o modal de confirmação que irá aparecer quando o usuário apertar o botão de Excluir.

Para isso, crie um arquivo chamado modal.php, dentro da pasta customers, e adicione essa marcação:


Passo 3: Inclua o Modal na Listagem (importante!)

Faça a importação do arquivo modal.php no arquivo index.php. Coloque antes do template do footer:

// index.php
...

<?php include('modal.php'); ?>

<?php include(FOOTER_TEMPLATE); ?>

Com isso, a marcação do modal vai ser injetada na página de listagem e aí o modal poderá ser exibido.


Passo 4: Implemente a chamada JavaScript para excluir

Na pasta /js do seu projeto, deve ter um arquivo chamado main.js. Se não tiver, crie ele.

Nesse arquivo, você deve implementar o evento que passa os dados para o modal e chama a função de exclusão:

Este arquivo já deve estar referenciado no seu projeto, pelo template do footer. Se não estiver, você precisará adicionar essa referência, como foi feito na parte 2 desta série.


Passo 5: Crie a Página de Exclusão

Na pasta customers, crie um arquivo chamado delete.php.

Esse arquivo vai receber a chamada do JavaScript junto com o ID do cliente, e executará a exclusão.

Implemente a marcação abaixo, nesse arquivo:


Passo 6: Implemente o SQL de Exclusão

Para finalizar, falta o comando de exclusão no banco de dados.

No arquivo inc/database.php, implemente a função remove:


Próximos Passos…

Agora, fechamos o CRUD e já é possível gerenciar o cadastro de clientes com as operações principais.

Existem várias melhorias que você pode fazer nesse código. Principalmente, relacionadas a segurança do SQL e validação de dados.

Este exemplo CRUD foi feito como uma espécie simulação de arquitetura em camadas, como o MVC, para que você pudesse ver onde cada código se aplica.

Até a próxima!

49 comentários em “CRUD com Bootstrap, PHP & MySQL – Parte VI

Adicione o seu

  1. Parabéns por esse material postado cara, muito bom, achei sua página por acaso pesquisando sobre Crud no google, e de todos que achei, o seu tutorial foi o melhor pra implementar. Parabéns mesmo, continue com o ótimo trabalho de disseminar conhecimento em programação!

  2. boa tarde !!! alguém pode me ajudar ?
    a minha functions.php esta dando erro. dando erro de sintaxe . No net bens fica vermelho <?php
    já revisei o codgo e esta tudo certinho , tudo como o tutorial pede.Porem da o erro <?php
    e se poder me disponibilizar o arquivo do crud agradeço.

  3. O meu muito obrigado, parabéns pela sua dedicação, pra você que dedica seu tempo.
    Como fazer uma paginação de resultados usando a linguagem PHP e como utilizar de maneira prática a criação de uma tela de login neste mesmo projeto?!
    Muito obrigado!!

    1. xyko, estive lendo suas perguntas e com relação ao formato da data em português, basta que você incremente a forma como ele é exibido na função echo do php.

      Veja que no script do index por exemplo: esta assim ” resultando em 2017-03-29 > porque ele traz a data direta do banco de dados e ela foi inserida no formato americano ( ‘Y-m-d H:i:s’). Isso na verdade é ótimo. Então, em vez de fazer alterações nas funções, ou no banco de dados, tratamos apenas a exibição. Para isso, usamos o comando strtotime.

      Veja como:

      Esse exemplo retornará : 15/02/2017 11:03:48

      1. xyko, estive lendo suas perguntas e com relação ao formato da data em português, basta que você incremente a forma como ele é exibido na função echo do php.

        Veja que no script do index por exemplo: esta assim echo $customer[‘modified’]; resultando em 2017-03-29 > porque ele traz a data direta do banco de dados e ela foi inserida no formato americano ( ‘Y-m-d H:i:s’). Isso na verdade é ótimo. Então, em vez de fazer alterações nas funções, ou no banco de dados, tratamos apenas a exibição. Para isso, usamos o comando strtotime.

        Veja como:

        echo date(‘d/m/Y H:i:s’, strtotime($customer[‘modified’]));

        Esse exemplo retornará : 15/02/2017 11:03:48

  4. Outra coisa,

    Onde identifico o que é tabela do banco, base de dados e o que é instrução, pois no primeiro post vc colocou um exemplo Clientes e a base está como customers e dentro do código contém linhas com customer sem o ‘s’, não teria como colocar tudo em português!

    1. É uma boa prática escrever o código todo em inglês; facilita a manutenção e vários frameworks funcionam melhor assim, e você acaba aprendendo mais. Mas, você pode por tudo em português, se preferir.

      Na Parte 3 tem todas as explicações sobre as tabelas e o BD.

      Quando alguma variável estiver no plural (com ‘s’) indica que é uma lista, ou um array, que pode ter vários registros; e quando estiver no singular, indica que é um único registro, apenas, daquela lista.

      Sds.
      Ruan

      1. Onde estiver “customers” é “clientes” (nenhum ou vários)
        Onde estiver “customer” é “cliente” (nenhum ou um)

        A tabela você indica quando for chamar alguma função da camada de BD (arquivo database.php), ex:
        $customer = find(‘customers’, $id);

        ‘customers’ é o nome da tabela.

        O aprendizado é estranho mesmo, no começo. Mas, depois fica fácil.

        E para mudar a apresentação, na view, você pode usar Javascript. Ou tratar o array $customer na função view(), mesmo. E mudar o formato da data.

        Use print_r($customer) para ver o que tem na variável.

  5. Achei estranho que tudo estava funcionando muito bem até a parte de excluir. Não funciona. Já conferi tudo. Parece que no arquivo functions.php não reconhece a função remove. O que será?

  6. Vim só comentar que você está totalmente de parabéns, que tutorial bem feito!
    Aprendi bastante aqui, parabéns pelo seu altruísmo em compartilhar seu conhecimento assim

    Abraço!

  7. Boa tarde Ruan, como você sugere lista conteudo de duas tabelas. Ex: Tenho id_profissao na tabela customers e gostaria de fazer join com a tabela de profissão.

    Como faço para apresentar a descrição da profissão por exemplo.

    Abraço e obrigado,

    1. Nesse caso você vai precisar criar uma nova função (no database.php ou em um arquivo novo) com um SQL personalizado para fazer esse join.
      O select deve consultar as duas tabelas e trazer as profissões.

      No retorno, já deve vir a descrição da profissão junto com os dados do cliente. Daí é só colocar na exibição.

      Obs.: Se você estiver fazendo um sistema completo, para comercializar, sugiro que use um framework como o Laravel. Esse CRUD é apenas para fins didáticos.

      1. Valeu, na verdade não é para comercializar, é um sistema de gerenciamento de assinaturas mas nada muito complexo.

        Vou continuar com essa didática pois realmente é muito clara, fácil de entender e o organizado, ou seja, somado ao mínimo de conhecimento que tenho acho que vou concluir alguma coisa,

        Com relação ao exemplo da descrição da profissão, no caso do php de inclusão, em linhas gerais onde deveria colocar a função para, por exemplo, apresentar um combobox ou listbox com todas as profissões disponíveis?

      2. Dei o exemplo de add mas no caso do edit também como seria, ou seja, com eu pego a descrição do id_profissao daquele cliente.

        A parte de exclusão já está pronta, inclusive fiz um pequeno ajuste para que javascript de deleção que está no main.js, possa deletar qualquer entidade, cliente, profissão e etc.

  8. Ruan muito obrigado pelo tutorial! de fato esta atitude sua é nobre como de outros programadores de Manaus que tem feito um trabalho semelhante de divulgação do conhecimento. esse pessoal Amazonense estão de parabéns rsrs. grande abraço!

  9. Ruan, muito obrigado. Aprendi muito com seu tutorial. Se precisar de qualquer coisa em modelagem 3D, projetos, etc. Conte comigo. Estou te devendo essa. Abraço

  10. Olá, parabéns pelo tutorial, muito simples e prático para quem esta começando. Tenho uma dúvida sobre o excluir, eu fiz o modelo proposto acima completo e tudo esta funcionando perfeitamente, mas estou tentando criar outra tela de cadastro simples no mesmo projeto com poucos campos e sem relações de tabela ainda, essa outra tela de cadastro funcionou o salvar, visualizar e editar, mas o excluir não funciona, o que acontece: eu clico em excluir aparece a janela do modal dizendo se desejo excluir, em cima onde deveria aparecer o id fica aparecendo “#undefined” clico em sim e nada acontece, procurei no javascript, modal.php e tudo que fizemos no modelo, mas não sei o que ocorre. Gostaria da saber oque pode ser e o que posso fazer?

  11. Fantástico o seu tutorial, muito bom mesmo! Estudei tudo antes e implementei de acordo com as minhas necessidades, tudo certinho. Porém como tem muitos anos que não trabalho com PHP e afins, muita coisa bateu. Voçê falou a rrespeito de algumas coisas como tela de login e paginação, como poderíamos fazer isso nessa base de estudo sua?

  12. Conheci seu site por acaso, e aprendi muito com essa sequência de tutoriais que você nos disponibilizou. Parabéns! Com certeza irei acompanhar os outros, pois, se com esse eu aprendi bastante coisas, é certo que nos outros também irei.

    Sucesso!

  13. Gostei muito do tutorial, muito bem explicado. Parabéns! Gostaria de tirar uma dúvida, caso eu queira colocar esse sistema com login e senha, é possível? Tem algum tutorial explicando o procedimento? Obrigado.

  14. Bom dia Ruan. Parabens pelo conteudo e muito obrigado pelas ajudas no tutorial. Gostaria de te perguntar. Tem como colocar mais um modal na função main.js ? coloquei aqui mas nao estou conseguindo..

    muito obrigado.

Deixe um comentário

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑