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.
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:
- 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)
[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:
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” e “form-control”.
Tente criar as outras rows e os campos, para seu formulário ficar assim:
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:
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.