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]

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

Acima ↑