Criando Telas de CRUD com Bootstrap 3 – Parte III

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

Agora na terceira parte, vamos implementar a tela de visualização (também conhecida como View, ou Detail) do nosso CRUD, que equivale ao READ.

CRUD com Bootstrap: View

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


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

Para implementar a tela de visualização, 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 view.html.


Passo 2: Modifique o Header da Página

Abra a página view.html no seu editor de código, e vamos começar as modificações.

Lembrando que você vai sempre trabalhar dentro da div #main, que criamos no template. Ela é o nosso container. Dentro desta div, adicione a marcação a seguir:

<div id="main" class="container-fluid">
 <h3 class="page-header">Visualizar Item #0001</h3>
 ...

Até aqui, só modificamos o título da página.

Você pode definir o título como achar melhor. Eu costumo colocar algo que identifique o item para o usuário, como o ID ou o nome do item.


Passo 3: Adicione os Campos para Visualização

Abaixo do título da página, vamos colocar os campos para exibição.

Primeiro, crie uma row:

<div class="row">
 ...
</div>

E, dentro desta row, você vai colocar os campos do item.

Para cada campo que você quiser exibir, você vai usar a seguinte marcação:

<div class="col-md-4">
 <p><strong>Nome do Campo</strong></p>
 <p>{Valor do Campo}</p>
</div> 

Substitua o nome do campo pelo o que você precisar indicar ao usuário (como Nome, por exemplo).

Depois substitua o valor do campo pelo valor que for recuperado da sua base de dados, ou outra fonte qualquer. Pra isso você deve ter algum backend ou algum script trazendo essas informações (mas, isso está fora do escopo deste tutorial).

Uma linha com três campos, ficaria assim:

<div class="row">
  <div class="col-md-4">
    <p><strong>Nome do Campo</strong></p>
    <p>{Valor do Campo}</p>
  </div>
  <div class="col-md-4">
    <p><strong>Nome do Campo</strong></p>
    <p>{Valor do Campo}</p>
  </div>
  <div class="col-md-4">
    <p><strong>Nome do Campo</strong></p>
    <p>{Valor do Campo}</p>
  </div>
</div> <!-- .row -->

Observe que eu usei a classe “col-md-4”. Isso nos permite ter 3 colunas de campos (12 / 4 = 3). Mas você pode alterar esse número e experimentar qual visualização fica melhor pra você.

Lembre-se que o grid padrão é de 12 colunas.

No exemplo deste tutorial, eu usei dez campos na visualização. Então, ficaram três “rows”, com três campos e a última “row” com um campo.

A quantidade vai depender de quantos e quais campos que você queira exibir.
Não precisa exibir todos.


Passo 4: Adicione os Botões de Ações

Por fim, vamos adicionar uma área de ações para o usuário, assim ele poderá escolher entre editar o item atual, ou voltar à tela principal.

Serão apenas dois botões abaixo do conteúdo principal. A marcação é a seguinte.

<hr />
<div id="actions" class="row">
 <div class="col-md-12">
  <a href="edit.html" class="btn btn-primary">Editar</a>
  <a href="index.html" class="btn btn-default">Fechar</a>
 </div>
</div>

Nenhuma novidade, certo?!

O primeiro botão é um atalho para que o usuário possa editar o item atual. Perceba que é um link, mas o Bootstrap irá exibí-lo como um botão com destaque

O segundo, é uma opção de saída da página, que permite voltar à tela principal (index.html) que iremos criar mais adiante.

Lembre-se sempre de procurar facilitar a navegação do usuário, como fizemos.


Próximos Passos…

Na próxima parte desta série vamos implementar um modal do Bootstrap para fazer as operações de delete do nosso CRUD.

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

Demo Código

9 comentários em “Criando Telas de CRUD com Bootstrap 3 – Parte III

Adicione o seu

  1. Muito bom os tutoriais! Me ajudou d+ a entender como o bootstrap pode ser produtivo.
    Quando teremos os próximos tutoriais?
    Obrigado,
    Leandro.

    1. Usando só o Bootstrap, não.

      O Bootstrap é um framework de front-end, apenas. Para criar templates, você precisa de um back end.
      É possível usar o Bootstrap dentro do JSP, ou mesmo PHP, para fazer os templates, e ir chamando as partes com includes.

      Alías, essa é a forma correta de fazer.

Deixe um comentário

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

Acima ↑