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!

  • 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

    • Valeu, Helder!

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

      Abs!
      Ruan

  • Mack

    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!

    • Muito obrigado, Mack!

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

      Abs!
      Ruan

  • Dario

    Poderia Fazer um exemplo usando Mysql?

  • Luan

    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!

    • Luan

      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”?

  • jorge soares ximenes

    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.

  • Diogo Marquetti

    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?

    • 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.

  • Junior

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

    • 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

  • Raabe

    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!

    • 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

  • Thiago Fernandes Fiaux

    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!

  • Andrei

    Parabéns Ruan, excelente trabalho!!!

  • Diego Rodrigues

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

    Obrigado!

  • Romeu Sebastião

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

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

  • Luiz Henrique

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

    • 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

  • Ricardo

    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.

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

      Sds.
      Ruan

  • Daniel Fernandes

    Parabéns pelo seu tutorial, gostei muito da sua idéia.
    Sou novo no desenvolvimento front-end e estou aplicando seu exemplo em um projeto asp.net com MVC , mas o “cabeçalho” onde fica o botao de pesquisa e o botão de incluir , ao invés de ficar todos em uma linha somente , estão ficando em três linhas (um em baixo do outro). Achei que poderia ser alguma referencia ao .css , mas pelo que estou notando os botões pegaram as cores , etc , sabe o que poderia ser.

  • Muito didático e simples. Para quem já tem noção de Bootstrap e AngularJS, esse template que você criou vem muito bem a calhar.
    Obrigado!

  • Giovani Domingues

    http://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte3/ nesse tutorial queria saber sobre paginçaão, pesquisar, etc…. a paginação de acordo com a quantidade de registros, etc…. tem como?

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

Acima ↑