1 - Introdução 2 - Sobre o treinamento 3 - Configurar projeto 4 - Criar arquivo app.js 5 - Framework Express 6 - Nodemon 7 - Criando base de dados e tabela 8 - Criando conexão com o banco MySQL 9 - Utilizando express-handlebars 10 - Bootstrap 11 - Estruturando projeto front-end 12 - Estilizando projeto front-end 13 - Rota de cadastro 14 - Upload de arquivos 15 - Cadastrar produtos 16 - Seleção de produtos (parte 1) 17 - Seleção de produtos (parte 2) 18 - Estilizando listagem de produtos 19 - Rota para remoção de produtos 20 - Implementando a remoção de produtos 21 - Rota para alteração de produtos 22 - Formulário para edição de produtos 23 - Exibindo dados do produto via formulário 24 - Rota para edição de produtos 25 - Resolvendo erro do upload 26 - Implementando o comando SQL Update 27 - Executar comandos SQL para atualizar produtos 28 - Implementando mensagens 29 - Validação da rota de cadastro 30 - Validação da rota de edição 31 - Validação da rota de remoção 32 - Exibição de mensagens 33 - Implementando o partials

17 - Seleção de produtos (parte 2)

Olá pessoal, nessa décima sétima aula do treinamento de Node.js e MySQL, iremos listar os produtos obtidos via comando SQL da última aula.

Com os componentes do Bootstrap, iremos criar uma estrutura utilizando o conceito de grid.

Para listar os produtos, utilizaremos o comando #each do express-handlebars, que irá realizar uma ação de repetição, que segue o mesmo padrão de um while, do while ou for.

A estrutura no arquivo formulario.handlebars ficará assim::

{{!-- Listagem de produtos --}}
<div class="container">
    <div class="row">
        {{#each produtos}}
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <div class="card">
                    <img src="../imagens/{{imagem}}">
                    <div class="textos">
                        <p>{{nome}}</p>
                        <p>R${{valor}}</p>
                    </div>
                    <a href="/formularioEditar/{{codigo}}" class="btn btn-warning">Alterar</a>
                    <a href="/remover/{{codigo}}&{{imagem}}" class="btn btn-danger">Remover</a>
                </div>
            </div>
        {{/each}}
    </div>
</div>

Para acompanhar as customizações realizadas e compreender cada passo elaborado, favor assista o vídeo abaixo: