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.
Caso você precise acompanhar desde o começo, veja os links abaixo:
- Parte 1 – template e estrutura inicial;
- Parte 2 – telas de cadastro e de edição (equivalente ao Create e Update);
- Parte 3 – tela de visualização (equivalente ao Read);
- Parte 4 – popup de exclusão (equivalente ao Delete);
- Parte 5 – página de listagem; (que permite acessar as telas de CRUD)
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:
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:
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>< 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 ></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:
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">×</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ã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:
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.
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!