para que ele utilize a variável app vinda do express-load:
39
4.5. Organizando os diretórios do projeto
Casa do Código
module.exports = function(app) {
var home = app.controllers.home;
app.get('/', home.index);
};
O
express-load criou um objeto chamado
controllers dentro de
app.
Ele cria uma estrutura de objetos de acordo com o diretório e ar-
quivo. Neste caso o app.controllers.home esta se referenciando ao arquivo
controllers/home.js. Agora
para esta rota funcionar corretamente, vamos
criar o controller home.js e incluir sua primeira action chamada de index, se-
guindo o exemplo abaixo:
module.exports = function(app) {
var HomeController = {
index: function(req, res) {
res.render('home/index');
}
};
return HomeController;
};
Pronto! Para finalizar o fluxo entre routes e controllers, exclua o arquivo
views/index.ejs e crie o diretório views/home. A nossa homepage será uma
simples tela de login para acessar o sistema. Para fins ilustrativos a futura lógica
desse aplicativo será de implementar um login que autocadastra um novo usuário,
quando for informado um login novo no sistema. Em views/home crie o arquivo
index.ejs, pelo qual implementaremos um formulário que conterá os campos
nome e email. Veja como será esta view com base na implementação abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ntalk - Agenda de contatos</title>
</head>
<body>
<header>
<h1>Ntalk</h1>
<h4>Bem-vindo!</h4>
</header>
<section>
40
Casa do Código
Capítulo 4. Iniciando com o Express
<form action="/entrar" method="post">
<input type="text" name="nome" placeholder="Seu nome">
<br>
<input type="text" name="email" placeholder="Seu e-mail">
<br>
<button type="submit">Entrar</button>
</form>
</section>
<footer>
<small>Ntalk - Agenda de contatos</small>
</footer>
</body>
</html>
Vamos rodar o projeto? Execute no terminal o comando: node app.js, em
seguida acesse em seu browser o endereço: http://localhost:3000 Se tudo deu certo
você verá uma tela com formulário semelhante a imagem abaixo:
Figura 4.5: Tela de login do Ntalk.
Um detalhe a informar, nos exemplos deste livro não será implementado código
css ou boas práticas de html, pois vamos focar apenas em código Javascript. Algumas
imagens do projeto serão apresentados com um layout customizado. A versão com-
pleta deste projeto que inclui o código CSS e HTML de acordo com os screenshots
pode ser acessada através do link do meu github:
http://github.com/caio-ribeiro-pereira/livro-nodejs/tree/master/projeto/ntalk
41
4.5. Organizando os diretórios do projeto
Casa do Código
Parabéns! Acabamos de implementar o fluxo da tela inicial do projeto.
42
Capítulo 5
Dominando o Express
5.1
Estruturando views
O módulo EJS possui diversas funcionalidades que permitem programar conteúdo
dinâmico em código html. Não entraremos a fundo neste framework, apenas uti-
lizaremos seus principais recursos para renderizar conteúdo dinâmico e minimizar
repetições de código. Com isso, isolaremos em outras views, conhecidas como par-
tials, possíveis códigos que serão reutilizados com maior frequência. Dentro do di-
retório views, vamos criar dois arquivos que serão reaproveitados na homepage. O
primeiro será o cabeçalho com o nome header.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ntalk - Agenda de contatos</title>
</head>
<body>
5.2. Controlando as sessões de usuários
Casa do Código
E o segundo será o rodapé footer.ejs:
<footer>
<small>Ntalk - Agenda de contatos</small>
</footer>
</body>
</html>
Agora modificaremos a nossa homepage, a views/home/index.ejs para que
chamem esses partials através da função include:
<% include ../header %>
<header>
<h1>Ntalk</h1>
<h4>Bem-vindo!</h4>
</header>
<section>
<form action="/entrar" method="post">
<input type="text" name="usuario[nome]"
placeholder="Digite o nome">
<br>
<input type="text" name="usuario[email]"
placeholder="Digite o e-mail">
<br>
<button type="submit">Entrar</button>
</form>
</section>
<% include ../footer %>
Agora a sua homepage ficou mais enxuta, fácil de ler e estruturada para reutili-
zação de partials.
5.2
Controlando as sessões de usuários
Para o sistema fazer login e logout é necessário ter um controle de sessão. Esse con-
trole permitirá que o usuário mantenha seus principais dados de acesso em memória
no servidor, pois esses dados serão utilizados com maior frequência por grande parte
do sistema. Trabalhar com sessão é muito simples, e os dados são manipulados atra-
vés de objeto JSON dentro da variável: req.session.
44
Casa do Código
Capítulo 5. Dominando o Express
Vamos aplicar um controle de sessão?. Primeiro, temos que criar duas novas ro-
tas dentro de routes/home.js, sendo que uma será o app.post('/entrar',
home.login) e a outra app.get('/sair', home.logout):
module.exports = function(app) {
var home = app.controllers.home;
app.get('/', home.index);
app.post('/entrar', home.login);