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

22 - Formulário para edição de produtos

Olá pessoal, nessa vigésima segunda aula do treinamento de Node.js e MySQL, iremos criar o formulário responsável pela edição de produtos.

Dentro da pasta views, crie o arquivo formularioEditar.handlebars com a seguinte estrutura:

<main>

    {{!-- Formulário --}}
    <div class="container">
        <div class="row">
            <div class="col-6 offset-3">
                <form action="/editar" method="post" enctype="multipart/form-data">
                    
                    <img src="../imagens/{{produto.imagem}}">

                    <input type="hidden" name="nomeImagem" value="{{produto.imagem}}">
                    <input type="hidden" name="codigo" value="{{produto.codigo}}">
                    <input type="text"   name="nome"   value="{{produto.nome}}" class="form-control" placeholder="Nome do produto">
                    <input type="number" name="valor"  value="{{produto.valor}}" class="form-control" placeholder="Valor do produto">
                    <input type="file"   name="imagem" class="form-control" >
                    <input type="submit" class="btn btn-primary" value="Alterar">
                    <a href="/" class="btn btn-secondary">Cancelar</a>
                </form>
            </div>
        </div>
    </div>
</main>

No arquivo app.js, iremos modificar a rota criada na etapa 21:

 app.get('/formularioEditar/:codigo', function(req, res){
    
    res.render('formularioEditar');

});

Abaixo estará disponível um vídeo executando cada etapa dessa parte do tutorial: