Publicado em

Criando Telas de CRUD com Bootstrap 3 – Parte IV

Nesta série de tutoriais, você vai aprender uma forma eficaz de implementar telas de CRUD com o Bootstrap 3.

Agora na quarta parte, vamos implementar um popup de exclusão (usando o modal do Bootstrap) para o nosso CRUD, que equivale ao DELETE.

crud-com-bootstrap-modal

Caso você precise acompanhar desde o começo, veja os links abaixo:


Passo 1: Adicione o Botão à Página de Visualização

Para fazer a exclusão de um item, vamos primeiro colocar um botão de excluir na tela de visualização que foi implementada no tutorial anterior.

Então, abra o arquivo view.html e na div #actions adicione o botão de exclusão:

<div id="actions" class="row">
 <div class="col-md-12">
   <a href="index.html" class="btn btn-primary">Voltar</a>
   <a href="edit.html" class="btn btn-default">Editar</a>
   <a href="#" class="btn btn-default" data-toggle="modal" data-target="#delete-modal">Excluir</a>
 </div>
</div>

Observe os atributos do novo botão: o data-toggle e o data-target. Esses atributos indicam o que é que vai ser ativado quando ocorrer um clique.

O data-toggle serve para indicar ao Bootstrap que este botão vai manipular um modal, por isso seu valor é modal.

Já o data-target serve para dizer qual item (uma div, por exemplo) é o modal que vai ser manipulado e exibido. Identificamos esse item usando o valor do seu id ou a sua class (no exemplo, será o item com id=delete-modal).

Você vai entender melhor a seguir, na implementação do Modal.


Passo 2: Implemente o Código do Modal

Depois de colocar o botão, você deve implementar o modal (ou popup) que será exibido quando o usuário clicar.

A marcação para o nosso modal de confirmação fica assim:

<!-- Modal -->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalLabel">Excluir Item</h4>
      </div>
      <div class="modal-body">
        Deseja realmente excluir este item?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Sim</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">N&atilde;o</button>
      </div>
    </div>
  </div>
</div> <!-- /.modal -->

Este trecho é o modal em si. E deve ficar no início do corpo da página, logo abaixo do body.

Tente sempre colocar o HTML de um modal em uma posição no começo da página, para evitar que outros componentes afetem a aparência ou funcionalidade do popup.

Neste modal, temos um modal-header com o título da janela de popup, temos um modal-body com a pergunta de confirmação do usuário, e temos um modal-footer onde ficam os botões de Sim e Não para o usuário definir sua escolha.

Você pode alterar esse modal de acordo com as necessidades de sua aplicação.

E você também vai precisar implementar o código (em Javascript) para o botão “Sim” realizar a exclusão do seu item. É uma tarefa que depende de back-end e, infelizmente, está fora do escopo deste tutorial.


Passo 3: Teste o Modal

Agora falta só testar o modal.

Abra a janela no seu navegador e verifique se o botão de Excluir exibe o modal de confirmação.

O único botão que funciona, até aqui, é o botão “Não” que apenas fecha o modal.

crud-com-bootstrap-modal


Próximos Passos

Na próxima, e última parte, vamos implementar a parte principal do nosso CRUD, que a tela de listagem e que permite realizar todas as operações.

Ou seja, vamos criar links para todas as páginas que criamos até aqui. Vamos aproveitar este código do Modal na próxima tela, também.

Caso você queira ver o código completo deste tutorial, basta acessar o link abaixo no github.

[button link=”http://ruancarvalho.github.io/webdevacademy/ux/bootstrap-crud/view.html” window=”yes”]Demo[/button] [button link=”https://github.com/ruancarvalho/webdevacademy/blob/master/ux/bootstrap-crud/view.html” window=”yes”]Código[/button]

5 comentários sobre “Criando Telas de CRUD com Bootstrap 3 – Parte IV

  1. Olá, Ruan! Meu nome é Fernando, sou de SP…
    Comecei a estudar o bootstrap… gostei muito do frame, mas estou patinando com os modais.

    Na verdade, gostaria de fazer, em uma única página (.php), o código de inclusão, alteração e exclusão de registro, mas estou com dificuldade para montar o código php…

    Crei 3 modais (_inc, _alt e _exc) e usei a função $_SERVER[‘PHP_SELF’] nos forms desses modais… ainda não consegui fazer tudo acontecer, mas acho que vai ser possível.

    Se tiver alguma ideia, ficaria muito grato pela ajuda!

    Abraço!

    1. Oi Fernando!

      Pra fazer isso, o ideal seria usar AJAX para enviar os dados e atualizar a tela.
      Mas, também dá pra fazer da forma tradicional, recarregando a página.

      Minha sugestão é que você coloque um input type=”hidden” em cada formulário (modal), para indicar qual a operação a ser feita.

      Aí quando submeter tu verificas, no .php, esse valor e chama a função específica (ex: se o valor dele for “_inc” chama uma função que faz a inserção).
      Todos os dados dos formulários devem ir via $_POST.

      O único porém é que a página precisará ser recarregada toda vez.
      Mas, deve ficar bacana.

      Abs!

  2. Olá, no git pra pegar o projeto estou com um pouco de dificuldades. Achei ótimo o front-end CRUD, gostaria de usá-lo em um trabalho da faculdade. Você pode me enviar esse projeto?

    1. Realmente tinha um problema no repositório, Júlio.

      Você pode pegar o exemplo completo nesse link:
      http://webdevacademy.github.io/demo/bootstrap-crud.zip

      Abs!
      Ruan

  3. Amigo, toda vez q eu vou fazer a exclusão não aparece a opção, e fica toda a pagina dentro do modal, e se eu aperto esc ele realiza a exclusão dos dados sem mesmo eu ter comfirmado

    Vou explicar melhor, estou trabalhando com PHP POO, e cada parte do meu projeto eu trabalho em um arquivo separada, na pagina q lista, tem a opção de poder apagar o registro do banco, e nesta mesma opção que eu chamo o modal, só q toda a vez q eu chamo, ele carrega o layout da pagina dentro do mesmo, e não aparece nenhuma opção para poder comfirmar ou não, e se eu aperto a tecla “Esc” ele faz a exclusão assim mesmo

Os comentários estão fechados.