, contato = usuario.contatos[id]
, params = {usuario: usuario
, contato: contato
, id: id};
res.render('contatos/edit', params);
},
// continuação do controller...
Agora temos a actions update. Ela recebe os dados de um contato atualizado
que são submetidos pelo formulário
da view contatos/edit. Em seguida utiliza-
mos seu índice via req.params.id para atualizar no array o contato.
update: function(req, res) {
var contato = req.body.contato
, usuario = req.session.usuario;
usuario.contatos[req.params.id] = contato;
res.redirect('/contatos');
},
// continuação do controller...
Por último temos a action
destroy, que basicamente recebe o índice
através da variável
req.params.id e exclui o contato do array via função
usuario.contatos.splice(id, 1).
51
5.3. Criando rotas no padrão REST
Casa do Código
destroy: function(req, res) {
var usuario = req.session.usuario
, id = req.params.id;
usuario.contatos.splice(id, 1);
res.redirect('/contatos');
}
// fim do controller...
return ContatoController;
};
Esse foi um esboço muito básico da agenda de contatos. Porém, com esse esboço
foi possível explorar algumas características do Express para a implementação de um
CRUD.
Para finalizar, vamos criar as views para o usuário interagir no sistema. Dentro
do diretório views/contatos vamos modificar a view index.ejs para rende-
rizar uma lista de contatos e um formulário para cadastrar novos contatos:
<% include ../header %>
<header>
<h2>Ntalk - Agenda de contatos</h2>
</header>
<section>
<form action="/contato" method="post">
<input type="text" name="contato[nome]" placeholder="Nome">
<input type="text" name="contato[email]" placeholder="E-mail">
<button type="submit">Cadastrar</button>
</form>
<table>
<thead>
<tr>
<th>Nome</th>
<th>E-mail</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
<% contatos.forEach(function(contato, index) { %>
<tr>
<td><%- contato.nome %></td>
<td><%- contato.email %></td>
<td>
52
Casa do Código
Capítulo 5. Dominando o Express
<a href="/contato/<%- index %>">Detalhes</a>
</td>
</tr>
<% }) %>
</tbody>
</table>
</section>
<% include ../exit %>
<% include ../footer %>
Agora no mesmo diretório, vamos criar o edit.ejs e implementar um formu-
lário para o usuário atualizar os dados de um contato:
<% include ../header %>
<header>
<h2>Ntalk - Editar contato</h2>
</header>
<section>
<form action="/contato/<%- id %>" method="post">
<input type="hidden" name="_method" value="put">
<label>Nome:</label>
<input type="text" name="contato[nome]"
value="<%- contato.nome %>">
<label>E-mail:</label>
<input type="text" name="contato[email]"
value="<%- contato.email %>">
<button type="submit">Atualizar</button>
</form>
</section>
<% include ../exit %>
<% include ../footer %>
Por último e mais fácil de todos, crie a view show.ejs. Nela, vamos renderizar
os dados de um contato que for selecionado. Incluiremos dois botões: Editar (para acessar a rota de edição do contato) e Excluir (botão que vai excluir o contato atual).
<% include ../header %>
<header>
<h2>Ntalk - Dados do contato</h2>
</header>
<section>
<form action="/contato/<%- id %>" method="post">
53
5.4. Aplicando filtros antes de acessar as rotas
Casa do Código
<input type="hidden" name="_method" value="delete">
<p><label>Nome:</label><%- contato.nome %></p>
<p><label>E-mail:</label><%- contato.email %></p>
<p>
<button type="submit">Excluir</button>
<a href="/contato/<%-
id %>/editar">Editar</a>
</p>
</form>
</section>
<% include ../exit %>
<% include ../footer %>
Utilizando PUT e DELETE do HTTP
Infelizmente, as especificações atuais do HTTP não dão suporte para
utilizar os verbos PUT e DELETE de forma semântica em um código
html, como por exemplo:
<form action="/editar" method="put">
<form action="/excluir" method="delete">
A solução paliativa é criar a tag <input> com o nome _method e
o valor put ou delete, para sobrescrever o método POST ou GET da
tag <form>. Veja o exemplo abaixo:
<input type="hidden" name="_method" value="put">
<input type="hidden" name="_method" value="delete"> 5.4
Aplicando filtros antes de acessar as rotas
Já percebeu que quando acessamos a rota /contatos sem logar no sistema acon-
tece um bug? Não? Tente agora mesmo! Mas o que realmente provocou este erro?
Bem, quando fazemos um login com sucesso, armazenamos os principais dados
do usuário na sessão para utilizá-los no decorrer da aplicação. Quando acessa-
mos /contatos sem antes ter feito um login, o controller tenta acessar a variá-
vel req.session.usuario que não existe ainda. Isso causa o seguinte bug na
aplicação:
54
Casa do Código
Capítulo 5. Dominando o Express
Figura 5.2: Bug: Cannot read property usuario of undefined.
Diferente do Rails, Sinatra ou Django, o Express não possui filtros de forma ex-
plícita e em código legível. Não existe uma função before ou after pela qual
se possa processar algo antes ou depois de entrar em uma rota. Mas calma! Nem
tudo esta perdido! Graças ao Javascript temos as funções de callback, e o próprio