Cadastro e Edição - NodeJS e Express (Parte 7)

Posted by uselessdev on 14/04/2017

Índice

No artigo anterior nós aprendemos como configurar nossas views criamos nossa página inicial, agora nós precisamos criar nossos formulários pra cadastro e edição e fazer eles funcionarem, então vamos lá:

Cadastro

Antes de tudo, vamos configurar nossa rota pra acessar a tela de cadastro, ela vai ser /create, então antes de tudo vamos criar nosso método em controller/tasks.js ele vai ser bem simples, assim:

1
2
3
4
5
// ...
create: function (request, response) {
response.render('form')
},
// ...

Isso é tudo que nosso método create vai fazer, retornar pra nossa rota uma view que é um formulário. Agora, vamos criar nossa rota lá em routes/index.js:

1
app.get('/create', app.tasks.create)

Agora precisamos do nosso formulário, então vamos criar views/form.hbs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>
Nova Tarefa
</h1>
</div><!-- /.page-header -->
<form class="form" action="/" method="post">
<div class="form-group">
<label>Titulo:</label>
<input class="form-control" type="text" class="form-group" name="title">
</div>
<button class="btn btn-primary btn-block">Criar</button>
</form>
</div><!-- /.col-sm-4 -->
</div><!-- /.container -->

Agora se você acessar http://localhost:3000/create você vai ver nosso form bem simples, e se você cadastrar ele vai funcionar muito bem, e nós nem precisamos configurar nada isso porque já tinhamos criado uma rota de cadastro que era /store assim só precisamos fazer uma requisição do tipo POST pra essa rota, isso é definido no method e action do form

Editando

Agora vamos a parte de editar nossas tarefas comaçando como antes pelo nosso controller então no nosso controller/tasks.js adicionamos o método edit:

1
2
3
4
5
6
7
8
9
edit: function (request, response) {
var task = Task.find(request.params.id)
response.render('form', {
task: task,
title: 'Editar',
action: '/task/' + request.params.id,
})
}

Se você reparar, temos dois problemas aqui:

  1. Chamamos um método Task.find que não existe no nosso model,
  2. Usamos nossa mesma view de cadastro e então precisaremos alterar ela.

Antes vamos resolver nosso model em model/task.js:

1
2
3
4
5
function find (id) {
return tasks.data.filter(function (task) {
return task._id == id
})[0]
}

Aqui nós fazemos um filtro e retornamos o primeiro indice encontrado, agora vamos a nossa view, precisaremos mudar nosso view/form.hbs ele ficará da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>
{{ title }} Tarefa
</h1>
</div><!-- /.page-header -->
<form class="form" action="{{ action }}" method="post">
<div class="form-group">
<label>Titulo:</label>
<input class="form-control" type="text" class="form-group" name="title" value="{{ task.title }}">
</div>
{{#if task}}
<div class="checkbox">
<label>
<input type="checkbox" value="1" name="status" {{#if task.status}}checked{{/if}}>
<span>Concluído</span>
</label>
</div>
{{/if}}
<button class="btn btn-primary btn-block">
{{#if task}} Salvar {{else}} Criar {{/if}}
</button>
</form>
</div><!-- /.col-sm-4 -->
</div><!-- /.container -->

Bem, como nós mudamos nossa view form precisamos alterar nosso método create no controller mas isso vai ser bem simples, vamos lá:

1
2
3
4
5
6
create: function (request, response) {
response.render('form', {
action: '/',
title: 'Nova'
})
}

E agora temos duas funcionalidades, criar e editar nossas tarefas, e por enquanto é isso, no próximo artigo nós iremos refatorar nosso código e adicionar algumas coisas, obrigado galera e até a próxima.


Comentários: