Criando Telas de CRUD com Bootstrap 3 – Parte II

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

Agora, na segunda parte vamos implementar as telas de inserção e atualização do nosso CRUD, que equivalem ao CREATE e ao UPDATE.

crud-com-bootstrap-form

Nossos formulários de inserção e edição devem ficar, mais ou menos, como na imagem acima. Mas, é claro que você pode modificar com os campos que você precisa.

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

[box type=”note” style=”rounded” border=”full”]Atenção! Este tutorial não ensina a persistir os dados em banco de dados.[/box]


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

Para implementar os formulários, vamos utilizar a estrutura criada na Parte I desta série. Assim, não vai ser necessário escrever 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 add.html.


Passo 2: Modifique o Header da Página

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

Você vai sempre trabalhar dentro da div #main, que criamos no template. Lembre-se que ela é o nosso container. Dentro desta div, adicione a marcação a seguir:

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

Até aqui, nenhuma novidade. Apenas modificamos o título da página.


Passo 3: Adicione um Form e os Botões

Abaixo do <h3>, coloque um formulário. O código deve ficar como o seguinte:

<form action="index.html">
  <!-- area de campos do form -->
  <hr />
  <div id="actions" class="row">
    <div class="col-md-12">
      <button type="submit" class="btn btn-primary">Salvar</button>
      <a href="index.html" class="btn btn-default">Cancelar</a>
    </div>
  </div>
</form>

Esta página, agora, deve estar mais ou menos assim:

crud-com-bootstrap-form-buttons

Vamos entender o que essa marcação e as classes fazem.

Primeiro, você vê uma tag form com um action. Este action serve apenas para ilustrar o fluxo da página neste tutorial. No seu código, você deve colocar o action correto (provavelmente um script de backend).

Depois, temos uma div “#actions” com a classe “row”. Esta div faz com que o Bootstrap reserve um espaço do layout para a área de ações, que nesta tela são os botões “Salvar” e “Cancelar”.

Por fim, temos uma outra div, com a classe “col-md-12”, que ocupa toda a largura disponível no grid. E dentro, você vê um button e um link (que também funcionará como botão).

O button fará a ação de submeter o formulário, e possui as classes btn, para que o Bootstrap mostre como botão, e btn-primary, que faz com que o botão tenha um destaque (a cor azul).

<button type="submit" class="btn btn-primary">Salvar</button>

Já o link, servirá para o usuário voltar para a tela inicial. Porém não posso usar um button para isso, então, no Bootstrap, usamos uma tag <a> com a classe btn, e o link passa a ser mostrado como um botão.

<a href="index.html" class="btn btn-default">Cancelar</a>

Continuando…


Passo 4: Adicione os campos do formulário

Para adicionar os campos ao formulário, você pode seguir o mesmo padrão do passo 3, utilizando rows e columns, para que o Bootstrap ajuste o layout.

Adicione seus campos logo abaixo da tag <form>, e antes do <hr /> da div #actions. Veja o código a seguir, como seria:

<div class="row">
 <div class="form-group col-md-4">
   <label for="campo1">Campo Um</label>
   <input type="text" class="form-control" id="campo1">
 </div>
 
 <div class="form-group col-md-4">
   <label for="campo2">Campo Dois</label>
   <input type="text" class="form-control" id="campo3">
 </div>
 
 <div class="form-group col-md-4">
   <label for="campo3">Campo Três</label>
   <input type="text" class="form-control" id="campo3">
 </div>
</div>

Este trecho da marcação cria a primeira linha de campos do nosso formulário.

Perceba que há uma div com a classe “row”, e dentro colocamos os campos, ajustando as colunas (col-md-4). A soma de colunas deve dar 12 (doze). Normalmente, você vai ter várias <div class=”row”> com três ou quatro campos dentro.

Para criar os campos de formulário no Bootstrap, você deve usar uma div, com a classe “form-group”.

Dentro desta div, você coloca um label com a descrição do seu campo, e o componente de input com a classe “form-control” do Bootstrap. Todos os componentes do HTML são suportados.

O tipo de campo vai depender do seu formulário, e dos dados que você quer obter.

Lembre-se de utilizar as classes do Bootstrap para formulários: “form-group”“form-control”.

Tente criar as outras rows e os campos, para seu formulário ficar assim:

crud-com-bootstrap-form


Passo 5: Crie a Tela de Edição

A página de edição é idêntica à página de inserção.

As únicas diferenças seriam o título da página e o botão de salvar. Alguns scripts de backend precisam de um campo com o ID do item sendo editado. Este campo você pode adicionar, quando necesário.

Então, para criar a tela de edição, basta copiar o arquivo add.html e renomeá-lo para edit.html.

Sua pasta do projeto deve estar, mais ou menos, assim:

bootstrap-crud-form-folder


Próximos Passos…

Na próxima parte desta série vamos implementar a página de visualização, também conhecida como detail.

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

Demo Código

  • Müller

    Boa didática, de que dia sai as publicações?

  • alfredo júnior

    Está escrito “Campo Treza” não seria “Campo Treze” ?

    • João Henrique

      Precisava desse comentário, o falta do que fazer……..affff

  • Monique

    e como será a conexão com o Banco de dados?

    • A conexão com Banco de Dados é feita com uma linguagem de back end (ou server-side). Como PHP, ASP.NET, Java, etc…

      O Bootstrap não acessa BD, ele é apenas front-end. Para fazer esse CRUD conectar com o BD você pode usar PHP com MySQL, por exemplo.

      Vou procurar elaborar um tutorial ensinando a fazer essa conexão com PHP.

  • Monique

    Vc tem alguma material explicando? Poderia indicar ?

  • André Rodrigues

    Como faço para deixar a div no meio da grid?

    • Não entendi sua pergunta.

    • Angelo

      Você tem que informar quanto de grid ela ocupa. se você tem uma div que vale 8 no grid, e quer deixar ela no meio, você devera colocar outros 2 de cada lado para fechar 12. Assim 2 + 8 + 2 = 12. E sua div ficaria no meio do grid. Exemplo prático.

      • Se for essa a dúvida, mesmo, o que o Angelo colocou está certo. Funcionaria.

        Também pode usar a classe .col-*-push-* para fazer isso. (Ex: class=”col-md-8 col-md-push-2″)

  • ANTONIO CARLOS LOURENÇO

    Bom dia, excelente trabalho. Tem como enviar o código.

  • Cara muito obrigado teu código me ajudou muito !! continue sempre !! não desista dos teus sonhos e de ajudas as pessoas!

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

Acima ↑