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!

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

Acima ↑