Aulas
Disciplinas

Cursos / Informática para Internet / Plataformas de aplicações Web / Aula

arrow_back Aula 10 - PetTopStore - Admin - Parte 2

Gerenciando produtos (listar e adicionar)

Agora que já temos um sistema de autenticação vamos criar duas funcionalidades extras no sistema administrativos:

  • Listar produtos
  • Adicionar produtos

Views EJS para listar e adicionar produto(form)

Crie a pasta "views/products"

Crie o arquivo "views/products/list.ejs" com o seguinte conteúdo:

<h1>Lista de produtos</h1>

<a href="/">Voltar</a>

<a href="/products/new">Adicionar produto</a>

<table>
  <% for (const product of products) { %>
    <tr>
      <td><img src="/images/<%= product.photo %>" width="100px" /></td>
      <td><%= product.name %></td>
      <td><%= product.price %></td>
    </tr>
  <% } %>

</table>

Veja que o index.ejs lista produtos que deve está em uma variável chamada products, mostrando em uma tabela se nome, preço e a imagem que deve está em /images/nome_da_imagem. Essa pasta /images é uma rota estática que no sistema de arquivos está em /public/images, dentro da aplicação. Precisamos salvar os arquivos lá.

Crie o arquivo views/products/new.ejs com o seguinte conteúdo:

<h1>Criar produto</h1>

<form method="POST" action="/products/create" enctype="multipart/form-data">
  Foto: <input type="file" name="photo" /><br/>
  Nome: <input type="text" name="name" /><br/>
  Preço: <input type="text" name="price" /><br/>
  Descrição: <input type="text" name="description" /><br/>
  <input type="submit" value="Salvar produto" />

</form>

Veja que new.ejs de products é um simples formulário que posta em "/products/create" com a nome, preço, descrição e uma imagem.

Rotas para produtos

Antes de escrever as rotas de produtos precisamos de uma biblioteca que gerencie upload de arquivos no sistema. Vamos usar o "multer" pra isso. Instalando na aplicação

npm install multer

Crie o arquivo "routes/produtos.js" com o seguinte conteúdo:

const express = require('express');
const router = express.Router();
const knexConfig = require('../knexfile');
const knex = require('knex')(knexConfig);
const multer  = require('multer');
const upload = multer({ dest: './public/images' });

router.get('/', async (req, res) => {
  const products = await knex.table('products').select();
  res.render('products/list', { products });
});

router.get('/new', async (req, res) => {
  res.render('products/new');
});

router.post('/create', upload.single('photo'), async (req, res) => {
  await knex.table('products').insert({
    name: req.body.name,
    description: req.body.description,
    price: parseFloat(req.body.price),
    photo: req.file.filename
  });
  res.redirect('/products');

});

module.exports = router;\

Esse arquivo de rotas de produtos tem somente 3 rotas:

  • "/" : renderiza a view passando a lista com todos os produtos
  • "/new" : renderiza o formulário de novo produto
  • "/create" : Cria um produto

A rota "/create" de products utiliza um middleware chamado "multer" onde se vê "upload.single('photo')"

O middleware "upload" foi criado nesse mesmo arquivo configurado de uma forma que o destino dos uploads de fotos fossem automaticamente para "/public/images".

Ainda na rota "/create" veja que, utilizando o knex, criamos um novo product passando o nome do formulário, a descrição, o preço e o caminho da photo.

Para finalizar, crie um link para "/products" no HTML da página inicial, deixando-a assim:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p>Logado como <%= employee.name %></p>
    <p>
      <a href="/auth/sign_out">Sair do sistema</a>
    </p>
    <a>
      <a href="/products">Gerenciar produtos</a>
    </a>
  </body>

</html>

Você deve obter como resultado as seguintes páginas:

Página inicial

Listar produtos

Adicionar produto

Form de login


Versão 5.3 - Todos os Direitos reservados