Desenvolvendo Loja Virtual - Parte -02

Bom galera, vamos dar continuidade ao nosso projeto de criarmos uma loja virtual em Java Web.

O que vamos fazer nesse artigo.

• Criar o banco de dados projeto;
• Configurar o arquivo hibernate.cfg.xml;
• Criar o Crud de Categorias;
• Criar o Crud de Produtos - Sem foto por enquanto.

Bom, primeiro vamos criar um banco de dados no mysql.

Entre no mysql.

mysql -u root -p

Entre com sua senha.

Crie um banco de dados.

create database projeto;

Ok! Vamos configurar o nosso arquivo hibernate.cfg.xml.

O arquivo encontra-se em:

projeto -> Java Resources -> src -> hibernate.cfg.xml.

Altere conforme seu dados. Coloque o usuário e senha.

<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="hibernate.connection.username">
usuario
</property>
<property name="hibernate.connection.password">
senha
</property>
<property name="hibernate.connection.url">
jdbc:mysql://localhost/projeto
</property>

<property name="hibernate.connection.driver_class">
com.mysql.jdbc.Driver
</property>
<property name="hibernate.dialect">
org.hibernate.dialect.MySQL5InnoDBDialect
</property>

<property name="hibernate.hbm2ddl.auto">update</property>
<property name="show_sql">true</property>
<property name="format_sql">true</property>

</session-factory>
</hibernate-configuration>

O arquivo é simples.
E na linha.
jdbc:mysql://localhost/projeto

Informamos o local do nosso banco.
O restante é apenas, para informar que estamos utilizando o mysql, e sobre a atualização automática do banco de dados.

Precisamos criar um pacote no eclipse, chamado loja.infra
Onde vamos criar uma conexão com o banco de dados.

Crie um arquivo chamado CriadorDeSessao.java e CriadorDeSessionFactory.java, dentro do pacote loja.infra.

Classe CriadorDeSessao

package loja.infra;

import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;

import org.hibernate.Session;

import br.com.caelum.vraptor.ioc.Component;
import br.com.caelum.vraptor.ioc.ComponentFactory;
import org.hibernate.SessionFactory;
@Component
public class CriadorDeSession implements ComponentFactory<Session>{
   
    private SessionFactory factory;
    private Session session;
   
    public CriadorDeSession(SessionFactory factory){
        this.factory = factory;
    }
    @PostConstruct
    public void abre(){
        this.session = factory.openSession();
    }
    public Session getInstance(){
            return this.session;
    }
    @PreDestroy
    public void fecha(){
        this.session.close();
    }
    }

Classe CriadorDeSessionFactory

package loja.infra;

import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.AnnotationConfiguration;

import br.com.caelum.vraptor.ioc.ApplicationScoped;
import br.com.caelum.vraptor.ioc.Component;
import br.com.caelum.vraptor.ioc.ComponentFactory;

@ApplicationScoped
@Component
public class CriadorDeSessionFactory implements ComponentFactory<SessionFactory>{

    private SessionFactory factory;
   
        @PostConstruct
        public void abre() {
        AnnotationConfiguration configuration = new AnnotationConfiguration();
        configuration.configure();
        this.factory = configuration.buildSessionFactory();
        }
      
        public SessionFactory getInstance(){
            return this.factory;
        }
      
        @PreDestroy
        public void fecha(){
            this.factory.close();
        }
          
    }

Observando essas classes, vemos que estamos apenas criando uma fábrica de conexão, e dessa forma, quando precisarmos fazer alguma ação no banco, não vamos sempre que se precoupar em criar e fechar conexões.
 
Chegou a hora de começamos a modelar o nosso sistema, cada produto, terá uma categoria, dessa forma, devemos criar a categoria, e depois vincular cada produto a uma categoria.

Para trabalharmos com eficiência, vamos dividir o nosso projeto em três camadas, modelo, visão e controle.

Dessa forma, vamos criar o primeiro pacote, onde vamos armazer nossas classes de modelo.

Criei no eclipse, um pacote chamado loja.modelo
E dentro desse projeto vamos criar a classe: Categoria

Em nossa Categoria, teremos o id auto incremento no banco de dados e chave primária, e o nome da categoria sendo uma String de caracteres.

Dessa forma.

package loja.modelo;

public class Categoria {

    //Variaveis
    private Long id;
    private String nome;
}



 Ok! Mas isso é uma classe normal, como  fazemos para que ela seja criada pelo hibernate? Precisamos anotar essa classe.

Para saber mais sobre anotação, consulte Hibernate Documentação.

Em nosso caso, vamos anotar como @Entity, entidade do banco de dados, e o atributo id, vamos falar para o Hibernate que ele é o id da tabela, e que é auto incremento.

Fica assim, nossa classe.

package loja.modelo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class Categoria {

    //Variaveis
    @Id @GeneratedValue
    private Long id;
    private String nome;
}

Observe que importamos as anotações do pacote javax.persistence.

Para finalizar temos que colocar ele no nosso hibernate.cfg.xml, e gerar os getters e setters.

Nosso hibernate.cfg.xml

<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
<session-factory>
<property name="hibernate.connection.username">
usuario
</property>
<property name="hibernate.connection.password">
senha
</property>
<property name="hibernate.connection.url">
jdbc:mysql://localhost/projeto
</property>
<property name="hibernate.connection.driver_class">
com.mysql.jdbc.Driver
</property>
<property name="hibernate.dialect">
org.hibernate.dialect.MySQL5InnoDBDialect
</property>
<property name="hibernate.hbm2ddl.auto">update</property>
<property name="show_sql">true</property>
<property name="format_sql">true</property>
<mapping class="loja.modelo.Categoria"/>
</session-factory>
</hibernate-configuration>

Lembrando que todos os nossos mapeamentos no hibernate.cfg.xml, deve ser antes do fechamento da tag, session-factory.

Outra coisa, você deve colocar o pacote completo.

Nossa classe completa.

package loja.modelo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class Categoria {

    //Variaveis
    @Id @GeneratedValue
    private Long id;
    private String nome;
   
    //Metodos getters e setters
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getNome() {
        return nome;
    }
    public void setNome(String nome) {
        this.nome = nome;
    }
   
}

Execute o projeto, e veja que no banco projeto, foi criada uma tabela, chamada Categoria, com os atributos.

use projeto;
show tables;
show columns from Categoria;



Agora, temos que criar o dao, que vai fazer as operações no banco de dados.

Vamos criar um pacote, para os dao. loja.dao


Dentro desse pacote, crie a classe CategoriaDAO
Vamos anotar a classe como @Component, porque o vraptor, vai controlar a injeção de dependencias. Sendo a Classe CategoriaDAO controlada pelo nosso controller.

Vamos criar os métodos para inserir, alterar, excluir e listar as categorias.

Nossa classe CategoriaDAO

package loja.dao;

import java.util.List;

import loja.modelo.Categoria;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.hibernate.criterion.MatchMode;
import org.hibernate.criterion.Restrictions;
import br.com.caelum.vraptor.ioc.Component;

@Component
public class CategoriaDAO {

    // Instancia a sessão
    private final Session session;

    public CategoriaDAO(Session session) {
        this.session = session;
    }

    // Lista todos os registro no banco de dados, retornando uma lista
    public List<Categoria> listaTudo() {
        return this.session.createCriteria(Categoria.class).list();
    }

    // Salva no banco de dados, passando como paramentro os dados da categoria
    public void salva(Categoria categoria) {
        Transaction tx = session.beginTransaction();
        session.save(categoria);
        tx.commit();
    }

    // Carrega um dado para ser alterado
    public Categoria carrega(Long id) {
        return (Categoria) this.session.load(Categoria.class, id);
    }

    // Faz alteraçao no banco de dados
    public void atualiza(Categoria categoria) {
        Transaction tx = session.beginTransaction();
        this.session.update(categoria);
        tx.commit();
    }

    // Remove uma categoria do banco de dados
    public void remove(Categoria categoria) {
        Transaction tx = session.beginTransaction();
        this.session.delete(categoria);
        tx.commit();
    }

    // Faz uma busca por nome
    public List<Categoria> busca(String nome) {
        return session.createCriteria(Categoria.class)
                .add(Restrictions.ilike("nome", nome, MatchMode.ANYWHERE))
                .list();
    }
}


Agora vamos criar o nosso controle. Antes precisamos entender algumas coisas.
O Vraptor, facilita muito a nossa vida, sendo o nosso controller.
Primeiro devemos anotar ele como @Resource, para que ele seja nosso controllador, e todas as nossas classes devem ser inscritas com a terminação Controller. Ou seja, nossa classe de controle de categorias. CategoriaController.

Todos os métodos são enviados para a view. Facilitando e muito o nosso projeto.

Como eu referencio a classe, e os meus metodos?
Fácil, no seu projeto você vai criar pastas com o nome do controller, dentro da pasta jsp. Sendo a primeira letra minuscula, e retire a palavra Controller. Ficando assim. Sendo seus métodos, páginas .jsp.

O Vraptor também possui a função de RestFull, dessa forma, nossas classes são anotadas utilizando esse padrão. Para entender mais, sobre o assunto, consulte. RestFull.

Nossa Classe CategoriaController, fica assim, metodos para adicionar, salvar, editar, alterar,excluir, pesquisar e listar.

Classe CategoriaController

package loja.controller;

import static br.com.caelum.vraptor.view.Results.json;

import java.util.List;

import loja.dao.CategoriaDAO;
import loja.modelo.Categoria;
import br.com.caelum.vraptor.Delete;
import br.com.caelum.vraptor.Get;
import br.com.caelum.vraptor.Post;
import br.com.caelum.vraptor.Put;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;

@Resource
public class CategoriaController {
    private final CategoriaDAO dao;
    private final Result result;

    public CategoriaController(CategoriaDAO dao, Result result) {
        this.dao = dao;
        this.result = result;
    }

    // Lista todos
    @Get("/categoria")
    public List<Categoria> lista() {
        return dao.listaTudo();
    }

    // Adicionar
    @Post("/categoria")
    public void adiciona(final Categoria categoria) {
        dao.salva(categoria);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Novo - Gera a interface para cadastro

    @Get("/categoria/novo")
    public void formulario() {
    }

    // Edição

    @Get("/categoria/{id}")
    public Categoria edita(Long id) {
        return dao.carrega(id);
    }

    // Alteração - Gera a interface para alterar
    // Envia o ID para alterar

    @Put("/categoria/{categoria.id}")
    public void altera(final Categoria categoria) {
        dao.atualiza(categoria);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Remove
    // Envia o ID para Remoção
    @Delete("/categoria/{id}")
    public void remove(Long id) {
        Categoria categoria = dao.carrega(id);
        dao.remove(categoria);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Busca por nome
    public List<Categoria> busca(String nome) {
        result.include("nome", nome);
        return dao.busca(nome);
    }

    // Busca Json para auto completar
    @Get("/categoria/busca.json")
    public void buscaJson(String q) {
        result.use(json()).withoutRoot().from(dao.busca(q)).exclude("id")
                .serialize();
    }

}

Vamos criar nossas páginas .jsp.
Lembrando que elas devem ser criadas dentro do WebContent -> WEB-INF, jsp.

categoria

• busca.jsp
• edita.jsp
• formulario.jsp
• lista.jsp

 Vamos utilizar taglib. Enviando o objeto categoria, para fazermos isso, colocamos categoria.nomedoatributo.

formulário.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <form id="categoriaForm" action="<c:url value="/categoria"/>" method="POST">
            <fieldset>
           
                <legend>Adicionar Categoria</legend>
               
                <label for="nome">Nome:</label>                   
                <input type="text" name="categoria.nome" value="${categoria.nome}" />
                               
                <button type="submit">Salvar</button>
                <button type="reset">Limpar</button>
            </fieldset>

        </form>
        <script type="text/javascript">
            $('#categoriaForm').validate({
                rules : {
                    "categoria.nome" : {
                        required : true,
                        minlength : 3               
                    }               
                }
            });
        </script>
    </div>
</body>
</html>

edita.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <form id="categoriaForm" action="<c:url value="/categoria/${categoria.id }"/>" method="POST">
       
                <fieldset>
           
                <legend>Alterar Categoria</legend>
               
                <label for="nome">Nome:</label>                   
                <input type="text" name="categoria.nome" value="${categoria.nome}" />
                               
                <button type="submit" name="_method" value="PUT">Salvar</button>
               
            </fieldset>

        </form>
        <script type="text/javascript">
            $('#categoriaForm').validate({
                rules : {
                    "categoria.nome" : {
                        required : true,
                        minlength : 3               
                    }
                }
            });
        </script>
    </div>

lista.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>Categorias Cadastradas</h3>
        <form action="<c:url value="/categoria/busca"/>">
            <input id="buscacategoria" name="nome" />
            <script type="text/javascript">
                $("#buscacategoria").puts("Busca Categoria");
                $("#buscacategoria").autocomplete(
                        '<c:url value="/categoria/busca.json"/>', {
                            dataType : "json",
                            parse : function(categoria) {
                                return $.map(categoria, function(categoria) {
                                    return {
                                        data : categoria,
                                        value : categoria.nome,
                                        result : categoria.nome
                                    };
                                });
                            },
                            formatItem : function(categoria) {
                                return categoria.nome;
                            }
                        });
            </script>
        </form>
    <display:table  class="displaytag.css" id="categoria" export="true" name="${categoriaList}" pagesize="25" size="resultSize" requestURI="/categoria"> 
    <display:column property="nome" title="Nome" sortable="true"/>
    <display:column title="Editar"><a href="<c:url value="/categoria/${categoria.id}"/>">Editar</a></display:column>
    <display:column title="Remover"><form action="<c:url value="/categoria/${categoria.id}"/>" method="POST"> <button class="link" name="_method" value="DELETE">Remover</button> </form></display:column>
    <display:footer><a href="<c:url value="/categoria/novo"/>">Adicionar</a></display:footer> 
    </display:table>
    </div>
</body>
</html>

busca.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>
            Resultados da busca pelo nome <b>"${nome }"</b>
        </h3>
        <%@ include file="lista.jsp"%>
    </div>
</body>
</html>

Para testarmos, devemos reiniciar o Apache, e acessar.

• Listar todas as categorias -> http://localhost:8080/projeto/categoria
• Cadastrar categorias -> http://localhost:8080/projeto/categoria/novo

Na primeira vez, será necessário utilizar o link para cadastro, depois o link para novos cadastros estão na listagem.

Na listagem além do cadastro, você tem o link para editar e remover.
Sem falar que está paginando a página, e a quantidade de itens cadastrados.

Podendo ainda exportar a mesma.

Vamos criar agora, a classe de produtos. Fazendo a mesma coisa que fizemos com a classe de categorias, acrescentaremos somente o relacionamento entre categoria e produtos.

Temos que acrescentar o mapeamento da classe de modelo no hibernate.cfg.xml.

<mapping class="loja.modelo.Produto"/>

modelo.produto

package loja.modelo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;

@Entity
public class Produto {

    @Id
    @GeneratedValue
    private Long id;
    private String nome;
    private double preco;
    private double custo;

    // Relacionamento com Categoria
    @ManyToOne
    @JoinColumn(name = "cod_categoria")
    private Categoria categoria;

    //Métodos getters e setters
    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getNome() {
        return nome;
    }

    public void setNome(String nome) {
        this.nome = nome;
    }

    public double getPreco() {
        return preco;
    }

    public void setPreco(double preco) {
        this.preco = preco;
    }

    public double getCusto() {
        return custo;
    }

    public void setCusto(double custo) {
        this.custo = custo;
    }

    public Categoria getCategoria() {
        return categoria;
    }

    public void setCategoria(Categoria categoria) {
        this.categoria = categoria;
    }
   
}

Em categoria, devemos adicionar o relacionamento com produto, adicione antes dos getters e setters. E gere o getters e setters.

// Relacionamento com produtos
    @OneToMany(mappedBy = "categoria", targetEntity = Produto.class, fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    private List<Produto> produto;
 
public List<Produto> getProduto() {
        return produto;
    }

    public void setProduto(List<Produto> produto) {
        this.produto = produto;
    }

loja.dao.ProdutoDAO

package loja.dao;

import java.util.List;

import loja.modelo.Produto;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.hibernate.criterion.MatchMode;
import org.hibernate.criterion.Restrictions;
import br.com.caelum.vraptor.ioc.Component;

@Component
public class ProdutoDAO {

    private final Session session;

    public ProdutoDAO(Session session) {
        this.session = session;
    }

    public List<Produto> listaTudo() {
        return this.session.createCriteria(Produto.class).list();
    }

    public void salva(Produto produto) {
        Transaction tx = session.beginTransaction();
        session.save(produto);
        tx.commit();
    }

    public Produto carrega(Long id) {
        return (Produto) this.session.load(Produto.class, id);
    }

    public void atualiza(Produto produto) {
        Transaction tx = session.beginTransaction();
        this.session.update(produto);
        tx.commit();
    }

    public void remove(Produto produto) {
        Transaction tx = session.beginTransaction();
        this.session.delete(produto);
        tx.commit();
    }

    public List<Produto> busca(String nome) {
        return session.createCriteria(Produto.class)
                .add(Restrictions.ilike("nome", nome, MatchMode.ANYWHERE))
                .list();
    }

    public void recarrega(Produto produto) {
        session.refresh(produto);
    }
}
 
Vamos criar um método para lista de produtos, e outro para listagem de vendas, e no formulário, vamos acrescentar a lista de categorias, para que se possa escolher a categoria que o produto pertence.

loja.controller.ProdutoController

package loja.controller;

import static br.com.caelum.vraptor.view.Results.json;

import java.util.List;

import loja.dao.CategoriaDAO;
import loja.dao.ProdutoDAO;
import loja.modelo.Produto;

import br.com.caelum.vraptor.Delete;
import br.com.caelum.vraptor.Get;
import br.com.caelum.vraptor.Post;
import br.com.caelum.vraptor.Put;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;

@Resource
public class ProdutoController {
    private final ProdutoDAO dao;
    private final CategoriaDAO dao2;
    private final Result result;

    public ProdutoController(ProdutoDAO dao, Result result, CategoriaDAO dao2) {
        this.dao = dao;
        this.dao2 = dao2;
        this.result = result;
    }

    // Lista todos
    @Get("/produto")
    public List<Produto> lista() {
        return dao.listaTudo();
    }

    // Lista Venda
    @Get("/produto/vendas")
    public List<Produto> vendas() {
        return dao.listaTudo();
    }

    // Adicionar
    @Post("/produto")
    public void adiciona(final Produto produto) {
        dao.salva(produto);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Novo - Gera a interface para cadastro

    @Get("/produto/novo")
    public void formulario() {
        result.include("categoriaList", dao2.listaTudo());
    }

    // Edição

    @Get("/produto/{id}")
    public Produto edita(Long id) {
        return dao.carrega(id);
    }

    // Alteração - Gera a interface para alterar
    // Envia o ID para alterar

    @Put("/produto/{produto.id}")
    public void altera(final Produto produto) {
        dao.atualiza(produto);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Remove
    // Envia o ID para Remoção
    @Delete("/produto/{id}")
    public void remove(Long id) {
        Produto produto = dao.carrega(id);
        dao.remove(produto);
        // Redireciona para a listagem, após a inserção.
        result.redirectTo(this).lista();
    }

    // Busca por nome
    public List<Produto> busca(String nome) {
        result.include("nome", nome);
        return dao.busca(nome);
    }
    // Busca por nome
        public List<Produto> busca2(String nome) {
            result.include("nome", nome);
            return dao.busca(nome);
        }

    // Busca Json para auto completar
    @Get("/produto/busca.json")
    public void buscaJson(String q) {
        result.use(json()).withoutRoot().from(dao.busca(q)).exclude("id")
                .serialize();
    }

}


Para finalizar nossa pasta produto, e os .jsp baseados nos metodos do nosso controller.

formulario.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

    <div id="conteudo">
        <form id="produtoForm" action="<c:url value="/produto"/>" method="POST">
            <fieldset>
                <legend>Adicionar Produto</legend>
                <label for="categoria">Categoria:</label>
                 <select name="produto.categoria.id">
                    <c:forEach items="${categoriaList}" var="categoria">
                        <option value="${categoria.id}">${categoria.nome}</option>
                    </c:forEach>
                </select>
               
                 <label for="nome">Nome:</label>
                 <input type="text" name="produto.nome" value="${produto.nome}" />
               
                 <label for="custo">Preço de Custo:</label>
                 <input type="text" name="produto.custo" value="${produto.custo}" />
               
                 <label for="preco">Valor de Venda:</label>
                 <input type="text" name="produto.preco" value="${produto.preco}" />
               
                <button type="submit">Salvar</button>
                <button type="reset">Limpar</button>
            </fieldset>

        </form>
        <script type="text/javascript">
            $('#produtosForm').validate({
                rules : {
                    "produto.nome" : {
                        required : true,
                        minlength : 3               
                    },
                    "produto.custo" : {
                        required : true,
                        number: true
                    },
                    "produto.preco" : {
                        required : true,
                        number:true               
                    }
                }
            });
        </script>
    </div>
</body>
</html>

edita.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <form id="produtoForm" action="<c:url value="/produto/${produto.id }"/>"    method="POST">
       
            <fieldset>
           
                <legend>Alterar Produto</legend>
               
                <label for="categoria">Categoria:</label><label for="categorias">${produto.categoria.id}</label>
                <input type="hidden" name="produto.categoria.id" value="${produto.categoria.id}">
               
                           
                 <label for="nome">Nome:</label>
                 <input type="text" name="produto.nome" value="${produto.nome}" />
               
                 <label for="custo">Preço de Custo:</label>
                 <input type="text" name="produto.custo" value="${produto.custo}" />
               
                 <label for="preco">Valor de Venda:</label>
                 <input type="text" name="produto.preco" value="${produto.preco}" />
               
                <button type="submit" name="_method" value="PUT">Salvar</button>
            </fieldset>
           
        </form>
        <script type="text/javascript">
            $('#produtoForm').validate({
                rules : {
                    "produto.nome" : {
                        required : true,
                        minlength : 3               
                    },
                    "produto.custo" : {
                        required : true,
                        number: true
                    },
                    "produto.preco" : {
                        required : true,
                        number:true               
                    }
                }
            });
        </script>
       
    </div>
</body>
</html>

busca.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>
            Resultados da busca pelo nome <b>"${nome }"</b>
        </h3>
        <%@ include file="lista.jsp"%>
    </div>
</body>
</html>

busca2.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>
            Resultados da busca pelo nome <b>"${nome }"</b>
        </h3>
        <%@ include file="vendas.jsp"%>
    </div>
</body>
</html>

vendas.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>Registro de Venda nº ${vendasEmProgresso.vendas.id}</h3>
        <h3>Produtos Cadastrados</h3>
        <form action="<c:url value="/produto/busca2"/>">
            <input id="buscaproduto" name="nome" />
            <script type="text/javascript">
                $("#buscaproduto").puts("Busca Produtos");
                $("#buscaproduto").autocomplete(
                        '<c:url value="/produto/busca.json"/>', {
                            dataType : "json",
                            parse : function(produto) {
                                return $.map(produto, function(produto) {
                                    return {
                                        data : produto,
                                        value : produto.nome,
                                        result : produto.nome
                                    };
                                });
                            },
                            formatItem : function(produto) {
                                return produto.nome;
                            }
                        });
            </script>
        </form>
    <display:table  class="displaytag.css" id="produto" name="${produtoList}" pagesize="25" size="resultSize" requestURI="/produto"> 
        <display:column property="nome" title="Nome" sortable="true"/>
        <display:column property="custo" title="Preço Custo" sortable="true"/>
        <display:column property="preco" title="Preço Venda" sortable="true"/>
        <display:column>
       </display:column>
    </display:table>
    </div>
</body>
</html>

lista.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="conteudo">
        <h3>Produtos Cadastrados</h3>
        <form action="<c:url value="/produto/busca"/>">
            <input id="buscaproduto" name="nome" />
            <script type="text/javascript">
                $("#buscaproduto").puts("Busca Produtos");
                $("#buscaproduto").autocomplete(
                        '<c:url value="/produto/busca.json"/>', {
                            dataType : "json",
                            parse : function(produto) {
                                return $.map(produto, function(produto) {
                                    return {
                                        data : produto,
                                        value : produto.nome,
                                        result : produto.nome
                                    };
                                });
                            },
                            formatItem : function(produto) {
                                return produto.nome;
                            }
                        });
            </script>
        </form>
    <display:table  class="displaytag.css" id="produto" export="true" name="${produtoList}" pagesize="25" size="resultSize" requestURI="/produto">
        <display:column property="categoria.nome" title="Categoria" sortable="true"/>
        <display:column property="nome" title="Nome" sortable="true"/>
        <display:column property="custo" title="Preço Custo" sortable="true"/>
        <display:column property="preco" title="Preço Venda" sortable="true"/>
        <display:column title="Editar"><a href="<c:url value="/produto/${produto.id}"/>">Editar</a></display:column>
        <display:column title="Remover"><form action="<c:url value="/produto/${produto.id}"/>" method="POST"> <button class="link" name="_method" value="DELETE">Remover</button> </form></display:column>
        <display:footer><a href="<c:url value="/produto/novo"/>">Adicionar</a></display:footer> 
    </display:table>
    </div>


Da mesma forma, para testarmos, devemos reiniciar o Apache, e acessar.

• Listar todos os produtos -> http://localhost:8080/projeto/produto
• Cadastrar produtos -> http://localhost:8080/projeto/produto/novo
• Listar produtos para venda ->  http://localhost:8080/projeto/produto/vendas

Na primeira vez, será necessário utilizar o link para cadastro, depois o link para novos cadastros estão na listagem.

Na listagem além do cadastro, você tem o link para editar e remover.
Sem falar que está paginando a página, e a quantidade de itens cadastrados.

 Podendo ainda exportar.

Finalizamos a parte 2 do nosso projeto, no próximo post, parte 3 implementaremos o cadastro de clientes e colocaremos a foto no nosso produto.

Poste suas dúvidas abaixo.

Desenvolvido por Wesley Martins.
Analista de Sistemas - Mister W Informática