Publicado em

Criando Telas de CRUD com Bootstrap 3 – Parte V

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

Agora na parte final, vamos implementar a principal parte do nosso CRUD, que é a tela de listagem e que dá acesso a todas as outras funcionalidades para o usuário.

CRUD com Bootstrap 3

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

Este tutorial é um pouco mais longo, e um tanto complexo. Mas, nada que você já não consiga entender rapidamente.

Vamos usar cerca de três componentes do Bootstrap para chegar a um front-end bastante prático e fácil de usar.

Todas as classes utilizadas nos códigos aqui são do Bootstrap 3. Não implementaremos nenhum CSS neste tutorial.


Passo 1: Copie o Template e Crie a Página de Listagem

Para implementar a tela de listagem, vamos utilizar a estrutura criada na Parte I desta série. Assim, não vai ser necessário reescrever a marcação básica do HTML.

Então, na pasta do seu projeto, copie e cole o arquivo template.html. Depois, renomeie esta página copiada como index.html.

Abra este arquivo em um editor de código, e dentro da div #main, vamos criar três outras divs para colocar as partes da tela de listagem. A marcação deve ficar assim:

<div id="main" class="container-fluid">
     <div id="top" class="row">
 
     </div> <!-- /#top -->
 
     <hr />
     <div id="list" class="row">
     
     </div> <!-- /#list -->
 
     <div id="bottom" class="row">
     
     </div> <!-- /#bottom -->
 </div>  <!-- /#main -->

Vamos entender pra que servem…

A div #top irá manter os componentes do topo da página, e será dividida em três colunas. A div #list terá a tabela de listagem dos itens do CRUD (que devem vir de um banco de dados, por exemplo). E a div #bottom terá a paginação da listagem, que facilita a visualização quando o cadastro já tiver muitos itens.

Todas essas novas divs têm a classe row, para garantir que irão ficar uma abaixo da outra.


Passo 2: Modifique o Topo da Página

O topo da página de listagem deverá conter o título da página, uma barra de pesquisa, e um botão acessível para criar um novo registro.

Para fazer isso, vamos dividir a div #top em três colunas, e colocar cada componente em uma delas. A marcação fica como a seguir:

<div id="top" class="row">
    <div class="col-md-3">
        <h2>Itens</h2>
    </div>
 
    <div class="col-md-6">
        <div class="input-group h2">
            <input name="data[search]" class="form-control" id="search" type="text" placeholder="Pesquisar Itens">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
 
    <div class="col-md-3">
        <a href="add.html" class="btn btn-primary pull-right h2">Novo Item</a>
    </div>
</div> <!-- /#top -->

Explico…

Primeiro, criamos uma coluna (div) de tamanho 3, no Grid do Bootstrap. Nessa div colocamos apenas o título da listagem. Você pode adicionar mais coisas se quiser.

<div class="col-md-3">
    <h2>Itens</h2>
</div>

Depois, criamos uma coluna (div) de tamanho 6, que é a div que vai conter a barra de pesquisa.

Essa div tem, também, um input combinado com um botão (o span com a classe input-group-btn). Este é um dos componentes do Bootstrap, que permite combinar um button com um glyphicon e assim criar um botão mais intuitivo.

Eu optei por omitir, nesta parte, o form que processa a requisição da busca, mas lembre-se que você precisará implementar essa requisição (de preferência, com AJAX).

<div class="col-md-6">
     <div class="input-group h2">
         <input name="data[search]" class="form-control" id="search" type="text" placeholder="Pesquisar Itens">
         <span class="input-group-btn">
                 <button class="btn btn-primary" type="submit">
                     <span class="glyphicon glyphicon-search"></span>
                 </button>
         </span>
     </div>
</div>

Para fechar este topo, colocamos uma última coluna (div) de tamanho 3 com um link funcionando como um botão, apenas para facilitar a vida do usuário:

<div class="col-md-3">
    <a href="add.html" class="btn btn-primary pull-right h2">Novo Item</a>
</div>

Observe que eu usei a classe h2 nos últimos itens para que eles ficassem alinhados verticalmente com o título da listagem.

Até aqui, você deve ter uma tela assim:

crud-com-bootstrap-search


Passo 3: Adicione a Tabela de Listagem

Agora, vamos colocar os componentes na div #list.

Esta área deve ter apenas a tabela de listagem (que também deve ser uma tabela responsiva), dentro de uma coluna (div) de tamanho 12:

<div id="list" class="row">
 
    <div class="table-responsive col-md-12">
        <table class="table table-striped" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                    <th class="actions">Ações</th>
                 </tr>
            </thead>
            <tbody>
 
                <tr>
                    <td>1001</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing</td>
                    <td>Jes</td>
                    <td>01/01/2015</td>
                    <td class="actions">
                        <a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
                        <a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
                        <a class="btn btn-danger btn-xs"  href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
                    </td>
                </tr>
 
            </tbody>
         </table>
 
     </div>
 </div> <!-- /#list -->

Neste trecho de código, temos uma tabela com as classes do Bootstrap (table, table-striped), alguns cabeçalhos definidos e um registro de exemplo. Você pode (e deve) adicionar mais, para ver como fica (basta copiar o trecho entre as tags <tr>).

Uma parte importante desta tabela é a coluna de Ações. É ela que contém as funcionalidades do nosso CRUD, através dos botões que foram criados (links com classes btn). Observe para onde os links apontam:

<td class="actions">
    <a class="btn btn-success btn-xs" href="view.html">Visualizar</a>
    <a class="btn btn-warning btn-xs" href="edit.html">Editar</a>
    <a class="btn btn-danger btn-xs"  href="#" data-toggle="modal" data-target="#delete-modal">Excluir</a>
</td>

São justamente links para as páginas que criamos nos tutoriais anteriores. E é essa parte que possibilita ao usuário fazer as operações com os registros… visualizar, editar, remover e adicionar (através do botão no topo).

O botão de Excluir também vai exibir um modal de confirmação, que vamos implementar mais adiante.

Até aqui, a tela deve estar assim:

crud-com-bootstrap-list


Passo 4: Adicione a Paginação

Por enquanto, já temos uma tela de listagem útil. Mas se o usuário tiver muitos registros para exibir, a tabela anterior ficará gigante e difícil de entender.

Por isso, é uma boa prática colocarmos paginação em telas como essa. Vamos implementar este componente na div #bottom:

<div id="bottom" class="row">
    <div class="col-md-12">
         
        <ul class="pagination">
            <li class="disabled"><a>&lt; Anterior</a></li>
            <li class="disabled"><a>1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="next"><a href="#" rel="next">Próximo &gt;</a></li>
        </ul><!-- /.pagination -->
 
    </div>
</div> <!-- /#bottom -->

Como você deve ter percebido, o componente do Bootstrap para paginação é uma <ul> com a classe pagination.

Os itens da lista formam os links da paginação, onde temos o link “Anterior”, os números das páginas, e o link “Próximo”. Os href’s dos links são retornados através de requisições ao backend. Mas como estamos fazendo só o front-end, não vamos colocá-los.

Neste trecho, há apenas três páginas para demonstrar como ficaria a paginação. A quantidade de páginas depende de um cálculo sobre a quantidade de registros, o que está fora do escopo deste tutorial.

Mas você já deve entendido o processo.

Sua tela deve estar assim, agora:

crud-com-bootstrap-pagination


Passo 5: Adicione o Modal de Exclusão

Esta parte você deve ter feito na parte IV desta série. Então vamos apenas copiar o modal da página view.html, e adicionar na página index.html:

<!-- 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>

Eu optei por colocar no final da página (e deste tutorial), por opção própria. Também funciona, mas o ideal é colocá-lo no começo da página, logo depois do <body>.

Cada botão de exclusão, na tabela, já tem uma referência (data-toggle e data-target) para este modal, então ele deve funcionar perfeitamente quando o usuário clicar em Excluir.

<a class="btn btn-danger btn-xs"  href="#" data-toggle="modal" data-target="#delete-modal">
    Excluir
</a>

Pronto!

Depois de tudo isso, sua tela deve estar assim:

crud-com-bootstrap-final

Esta é apenas uma das inúmeras maneiras de se criar um front-end administrativo, para cadastros e gerenciamento.

Eu utilizo este formato há bastante tempo e sempre funcionando muito bem. O usuário não tem dificuldades, consegue utilizar e nós (devs) ficamos tranquilos para implementar outras coisas.

Fique à vontade para modificar esta tela, e experimentar em seus protótipos.

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

Demo | Código

Você também pode, agora, dar uma olhada no tutorial de CRUD usando PHP, MySQL e o Bootstrap, com essa mesma estrutura.

Qualquer dúvida, deixa aí um comentário que a gente tenta resolver.

Até a próxima!

25 comentários sobre “Criando Telas de CRUD com Bootstrap 3 – Parte V

  1. Bom dia meu mestre Ruan Carvalho,

    Muito bom e de grande valia esta sua publicação. Seria interessante se agora vc usando esta mesma estrutura, mostrasse como funciona com banco de dados.

    Nota 1000 para vc.

    Abçs,

    Helder Pontes

    1. Valeu, Helder!

      Esse do banco de dados já está em elaboração.

      Abs!
      Ruan

  2. Realmente muito bom, está perfeito, bem explicado e rico em detalhes.
    Só faltou a parte de integração dos botões e a do banco de dados, assim seria certamente uma referência completa.

    Vou recomendar muito esse tutorial para os meus alunos.

    Parabéns e aguardamos anciosamente a continuação!

    1. Muito obrigado, Mack!

      Espero que seja útil também para os seus alunos.
      Os meus aproveitam bastante.

      Abs!
      Ruan

  3. Poderia Fazer um exemplo usando Mysql?

  4. Olá, parabéns pelo tutorial. Excelente.

    Acho que seria muito bom fazer um exemplo com banco de dados mysql. Mostrando o funcionamento deste tutorial por completo.

    Tenho uma dúvida sobre paginação. No caso de dados vindo do BD, como limito a exibição na página? seria o próprio limite da consulta? e como exibir os outros registros seguintes conforme caminho pelas páginas?

    Obrigado!

    1. Outra dúvida.. O botão Novo Item, ao recolher a página ele desce abaixo da pesquisa.. Como faria para que ele ficasse acima? alinhado com o título “Itens”?

  5. Gostaria de saber se ja tem disponivel um sistema com acesso a banco de dados e como acessá-lo. Gostaria ainda de deixar uma sugestao para a incrementar o uso de Angularjs nesse sistema com persistencia de dados.

  6. Olá Ruan, tudo certo?

    Estou começando agora e consegui implementar tudo sem problemas.
    Exceto por uma coisa: Não consegui fazer o modal aparecer quando o botão Excluir é clicado.
    Nem no index e nem no view 🙁

    O que será que houve de errado?

    1. Oi Diogo.
      Muito provavelmente é o jQuery que não está referenciado.

      Senão, aperta F12 no Chrome, e dá uma olhada na guia Console. Talvez mostre o porque de não estar aparecendo.

  7. Não sou muito fã de front-end, mas tenho que admitir que depois do seu trabalho passei a olhar com outros olhos esse lado “colorido” da força. Brincadeiras a parte, você fez um ótimo trabalho e continue trazendo mais conteúdos como esse, se possível, me ajudou e ajudará várias outras pessoas. Foi recomendado por um dos meus melhores professores na facul. Valeu!!!

    1. Muito obrigado, Junior.
      Espero que agora você se torne um front-end developer, depois de ver o lado “colorido” da força, rsrsrs.
      Abs.
      Ruan

  8. Ruan, pra começar: muito obrigada!
    Graças a teus tutoriais tão bem explicados que eu consigo fazer as aplicações que preciso. Já recomendo você pra todo mundo!

    Mas bem, com relação a pesquisa… Implementei a parte do mysql, com pdo, funcionou perfeitamente. Mas e pra busca? Não consigo encaixar o form…Ou não funciona ou sai tudo do lugar 🙁 hahahah

    Mais uma vez, obrigada!

    1. Muito obrigado, Raabe!
      Fico feliz que está sendo útil pra você. Pode recomendar aí pra todo mundo… rsrsrs.

      Sobre a busca, o seu form de ficar *todo* dentro da coluna central. E, depois passar uma variável com os registros para a tabela de listagem. Se tá saindo do lugar, é porque as div’s não estão sendo fechadas no lugar certo.

      De qualquer forma, o formulário e a table devem ser independentes.

      Dá uma olhada nesse tutorial, que talvez te dê uma ideia: http://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte3/

      Abs.
      Ruan

  9. Olá amigo, só queria agradecer, foi muito fácil implementar o conteúdo do seu tutorial, tudo bem explicativo, e sem “buracos”, obrigado msm, estou começando agora, e fiquei muito satisfeito. Um grande Abraços e sucesso!

  10. Parabéns Ruan, excelente trabalho!!!

  11. Muito bom seu tutorial, Ruan. Ficou muito fácil de implementar e me ajudou muito.

    Obrigado!

  12. Amigos, acompanhei todos tutoriais !! 10 !! Vocês são gigantes !! Muito obrigado mesmo !!

  13. Registro aqui com prazer o meu muito Obrigado pelo seu belo trabalho. Parabéns professor Ruan, segui passo a passo e deu tudo certinho, sou iniciante e ainda tenho muinto que aprender, as partes que ficaram em aberto, vou tentar aprender como completar. Obrigado meu querido!

  14. Gostei bastante mas se a tabela de Clientes e for grande geralmente é…. Eu nao faria fullscan na tabela deixaria para o filtro trazer somente o que precisa ser alterado, visualizado e removido. O que mata a aplicação é ler uma tabela inteira atoa. Se tiver uns 10 registros até tudo bem o problema maior é que as tabelas crescem. Achei legal, valeu!!!

    1. Obrigado, Luiz!

      Realmente, como você colocou, não se deve fazer uma consulta completa em tabelas grandes. Causa lentidão e desperdício de memória e recursos.
      Esse exemplo foi feito apenas para ilustrar como funciona a listagem, com o Bootstrap. Em uma aplicação real, deve-se usar paginação para trazer os registros.

      Abs.
      Ruan

  15. Muito bom tutorial, parabéns!
    Sou novo na área e estou começando no .net. Vou testar com objetos asp.
    Agradeço o compartilhamento do conhecimento.

    1. Valeu, Ricardo!
      Sugiro que você use o Bootstrap junto com o ASP.NET MVC. O sistema fica muito bom assim.

      Sds.
      Ruan

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *