Onde está o seu problema
O problema está aqui:
<img src="<%=registro.getImagem()%>" width="100" height="100" />
Você não mostrou como é o método getImagem()
da sua classe Produtos
, mas ao olhar para isso, dá para crer que ele retorne um array de bytes:
pro.setImagem(rs.getBytes("prod_imagem"));
O problema é que no HTML, a tag src
serve para dizer qual é URL de onde a imagem pode ser baixada, e não para dar a sequência de bytes que correspondem a imagem.
Tipo da imagem
Há ainda o problema que você não especifica o tipo da imagem. Vamos supor que possa ser "png", "jpeg" ou "gif" (em minúsculas). Adicione os métodos getFormatoImagem()
e setFormatoImagem(String)
na classe Produtos
(além de um campo private String tipoImagem)
e uma coluna prod_tipo_imagem
na tabela tb_produtos
do banco de dados. Caso o tipo daa imagem seja sempe o mesmo (por exemplo, todas elas forem "png"), isso não é necessário.
Tendo então um campo para o tipo da imagem, há pelo menos duas abordagens possíveis. A primeira seria utilizar uma data-uri em base-64 e a outra é com um servlet de imagens.
A abordagem com data-uri
Você colocaria dessa forma:
<img src="data:image/<%=registro.getFormatoImagem()%>;base64,<%=new String(java.util.Base64.getUrlEncoder().encode(registro.getProd_codigo()))%>" width="100" height="100" />
Se a imagem for de um tipo fixo, você pode substituir o <%=registro.getFormatoImagem()%>
pelo tipo dela (ex: "png").
Entretanto, essa abordagem não é muito vantajosa para imagens grandes ou muito numerosas, pois deixa o carregamento da página bem pesado. Por isso, vamos ver a outra abordagem.
Servlet de imagens
Imagens são carregadas por meio de URLs. Então a solução seria dar uma URL para a imagem:
<img src="<%=request.getLocalName()%>:<%=request.getLocalPort()%>/images?id=<%=registro.getProd_codigo()%>" width="100" height="100" />
E então você tem que colocar um servlet para disponibilizar a resposta em bytes. Algo parecido com isso (supondo que você esteja usando Servlets 3.0 ou superior):
import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.WebServlet;
@WebServlet(urlPatterns = {"/produto/imagens"})
public class ImagemServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException
{
int id = Integer.parseInt(request.getParameter("id"));
ProdutosDAO dao = new ProdutosDAO();
Produtos p = dao.mostrarProduto(id);
response.setContentType("image/" + p.getFormatoImagem());
response.getOutputStream().write(p.getImagem());
}
}
Se o formato da imagem for fixo, você usaria response.setContentType("image/png");
, por exemplo.
Revendo o código da classe Produtos
Observe que você carrega os produtos junto com as suas imagens. Porém, carregar os bytes da imagem é algo pesado em termos de IO, de processamento e de memória. Além disso, ao montar uma instância de Produtos
, apenas em alguns poucos casos você vai estar interessado em carregar os bytes da imagem. Em especial, se você fizer uma lista de produtos e encher ela com as imagens, vai estourar a memória do servidor facilmente. Agora que temos uma abordagem que trás as imagens separadamente do resto do conteúdo dos produtos, podemos separá-las.
O Java tem convenções de código que é muito recomendável de serem seguidas. Isso significa que nomes como setProd_desc
estão fora do padrão, o padrão seria setProdutoDescricao
. Aliás, se a classe se chama Produtos
, então o Produto
no nome do método é redundante, e setDescricao
já seria o bastante. Uma outra observação é que o nome da classe deveria estar no singular e não no plural.
Classes imutáveis são mais fáceis de se trabalhar do que classe mutáveis, e a sua classe Produto
é uma boa candidata a uma dessas. Além disso, é uma boa prática que o construtor retorne um objeto já devidamente fabricado ao invés de um esqueleto a ser consertado depois ao chamar-se um monte de setters.
Considerando-se isso, assim ficam as suas classes:
public final class Produto {
private final int codigo;
private final String nome;
private final String descricao;
private final double valor;
private final String marca;
private final String tamanho;
private final int parcelas;
private final String tecido;
public Produto(
int codigo,
String nome,
String descricao,
double valor,
String marca,
String tamanho,
int parcelas,
String tecido)
{
this.codigo = codigo;
this.nome = nome;
this.descricao = descricao;
this.valor = valor;
this.marca = marca;
this.tamanho = tamanho;
this.parcelas = parcelas;
this.tecido = tecido;
}
public int getCodigo() {
return codigo;
}
public String getNome() {
return nome;
}
public String getDescricao() {
return descricao;
}
public String getValor() {
return valor;
}
public String getMarca() {
return marca;
}
public String getTamanho() {
return tamanho;
}
public int getParcelas() {
return parcelas;
}
public String getTecido() {
return tecido;
}
}
public final class ImagemProduto {
private final String formato;
private final byte[] conteudo;
public ImagemProduto(String formato, byte[] conteudo) {
this.formato = formato;
this.conteudo = conteudo;
}
public String getFormato() {
return formato;
}
public byte[] getConteudo() {
return conteudo;
}
}
Revendo o código da classe ProdutosDAO
A sua classe ProdutosDAO
também precisa de revisão.
Em primeiro lugar, usar o try-with-resources é altamente recomendável para ter certeza de que você está fechando os recursos abertos adequadamente, além de não ter que ficar quebrando a cabeça escrevendo código chato para fazer esse tipo de trabalho.
Em segundo lugar, use os tipos genéricos adequados.
Em terceiro lugar, não use JOptionPane
no DAO. O JOptionPane
vai mostrar uma telinha de erro no servidor, onde ninguém estará olhando, e não no lado do cliente. Além disso, isso é uma violação do padrão MVC.
Em quarto lugar, diferentes instâncias de ProdutoDAO
não são distinguíveis e têm todas o mesmo comportamento. Assim sendo, nem tem sentido haver mais de uma instância, e por isso podemos usar o padrão singleton:
Assim sendo, vamos re-elaborar o seu DAO, considerando a classe Conecta
que você referenciou nessa outra pergunta sua:
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class ProdutoDAO {
private static final String LISTAR_SQL = "SELECT prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido FROM tb_produtos";
private static final String POR_ID_SQL = "SELECT prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido FROM tb_produtos WHERE cod_prod = ?";
private static final String IMAGEM_SQL = "SELECT prod_tipo_imagem, prod_imagem FROM tb_produtos WHERE prod_cod = ?";
private static final String INSERT_SQL = "INSERT INTO tb_produtos (prod_cod, prod_nome, prod_desc, prod_valor, prod_marca, prod_tamanho, prod_parcelas, prod_tecido, prod_tipo_imagem, prod_imagem) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
private static final ProdutoDAO singleton = new ProdutoDAO();
private ProdutoDAO() {
}
public static ProdutoDAO instancia() {
return singleton;
}
private Produto lerProduto(ResultSet rs) throws SQLException {
int codigo = rs.getInt("prod_cod");
String nome = rs.getString("prod_nome");
String descricao = rs.getString("prod_desc");
double valor = rs.getDouble("prod_valor");
String marca = rs.getString("prod_marca");
String tamanho = rs.getString("prod_tamanho");
int parcelas = rs.getInt("prod_parcelas");
String tecido = rs.getString("prod_tecido");
return new Produto(codigo, nome, descricao, valor, marca, tamanho, parcelas, tecido);
}
private ImagemProduto lerImagem(ResultSet rs) throws SQLException {
String tipo = rs.getString("prod_tipo_imagem");
byte[] conteudo = rs.getBytes("prod_imagem");
return new ImagemProduto(tipo, conteudo);
}
public List<Produto> listarTodos() {
try (
Connection con = Conecta.conexao();
PreparedStatement ps = con.prepareStatement(LISTAR_SQL);
ResultSet rs = ps.executeQuery();
) {
List<Produto> lista = new ArrayList<>();
while (rs.next()) {
lista.add(lerProduto(rs));
}
return lista;
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
public Produto lerProduto(int idProduto) {
try (
Connection con = Conecta.conexao();
PreparedStatement ps = con.prepareStatement(POR_ID_SQL);
) {
ps.setParameter(1, idProduto);
try (ResultSet rs = ps.executeQuery()) {
return lerProduto(rs);
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
public ImagemProduto lerImagem(int idProduto) {
try (
Connection con = Conecta.conexao();
PreparedStatement ps = con.prepareStatement(IMAGEM_SQL);
) {
ps.setParameter(1, idProduto);
try (ResultSet rs = ps.executeQuery()) {
return lerImagemProduto(rs);
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
public void salvar(Produto pro, ImagemProduto im) {
try (
Connection con = Conecta.conexao();
PreparedStatement ps = con.prepareStatement(INSERT_SQL);
) {
ps.setInt(1, pro.getCodigo());
ps.setString(2, pro.getNome());
ps.setString(3, pro.getDescricao());
ps.setDouble(4, pro.getValor());
ps.setString(5, pro.getMarca());
ps.setString(6, pro.getTamanho());
ps.setInt(7, pro.getParcelas());
ps.setString(8, pro.getTecido());
ps.setString(9, im.getFormato());
ps.setBytes(10, im.getConteudo());
ps.execute();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
Observe que como você não especificou o que há na classe Conecta
, mas decerto há coisas a melhorar nela.
Por fim, vamos aplicar as mudanças na nossa classe ImagemServlet
:
import java.io.IOException;
import javax.servlet.WebServlet;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
@WebServlet(urlPatterns = {"/produto/imagens"})
public class ImagemServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException
{
int id = Integer.parseInt(request.getParameter("id"));
ImagemProduto ip = ProdutoDAO.instancia().lerImagem(id);
response.setContentType("image/" + ip.getFormato());
response.getOutputStream().write(ip.getConteudo());
}
}
Definindo as servlets
Scriptlets são considerados odiados, ultrapassados e obsoletos. Misturar código Java enxertado em pedaços de HTML é uma coisa horrorosa a se fazer, e esse é um dos vários motivos pelo qual scriptlets devem ser abandonados. Além disso, o uso de scriptlets tende a levar a uma violação do padrão MVC.
O primeiro passo para eliminar os scriptlets é separar o comportamento em servlets para não ficar misturado com o JSP:
import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.WebServlet;
@WebServlet(urlPatterns = {"/produto/listar"})
public class ListagemProdutoServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
List<Produto> produtos = ProdutoDAO.instancia().listarTodos();
request.setAttribute("produtos", produtos);
RequestDispatcher dispatcher = request.getRequestDispatcher("/produtos.jsp");
dispatcher.forward(request, response);
}
}
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.io.IOException;
import javax.servlet.HttpServlet;
import javax.servlet.HttpServletRequest;
import javax.servlet.HttpServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.WebServlet;
@WebServlet(urlPatterns = {"/produto/salvar"})
@MultipartConfig
public class SalvarProdutoServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
int id = Integer.parseInt(request.getParameter("id"));
String nome = request.getParameter("nome");
String descricao = request.getParameter("descricao");
double valor = Double.parseDouble(request.getParameter("valor"));
String marca = request.getParameter("marca");
String tamanho = request.getParameter("tamanho");
int parcelas = Integer.parseInt(request.getParameter("parcelas"));
String tecido = request.getParameter("tecido");
Part imagePart = request.getPart("imagem");
String tipo = getFileType(imagePart);
byte[] conteudo = imagePart == null ? new byte[0] : getBytesFromInputStream(imagePart.getInputStream());
Produto p = new Produto(id, nome, descricao, valor, marca, tamanho, parcelas, tecido);
ImagemProduto im = new ImagemProduto(tipo, conteudo);
ProdutoDAO.instancia().salvar(p, im);
RequestDispatcher dispatcher = request.getRequestDispatcher("/produtos/listar");
dispatcher.forward(request, response);
}
private String getFileType(Part part) {
if (part == null) return "";
String partHeader = part.getHeader("content-disposition");
for (String content : partHeader.split(";")) {
String trimmedContent = content.trim();
if (trimmedContent.startsWith("filename")) {
String nomeEntreAspas = trimmedContent.substring(trimmedContent.indexOf('=') + 1);
String nomeDoArquivo = nomeEntreAspas.trim().replace("\"", "");
String extensao = nomeDoArquivo.substring(nomeDoArquivo.indexOf('.') + 1);
return extensao;
}
}
return null;
}
public static byte[] getBytesFromInputStream(InputStream is) throws IOException {
ByteArrayOutputStream os = new ByteArrayOutputStream();
byte[] buffer = new byte[1024 * 1024];
int len;
while ((len = is.read(buffer)) != -1) {
os.write(buffer, 0, len);
}
return os.toByteArray();
}
}
O servlet ListagemProdutoServlet
usa o DAO para ler a lista de produtos (sem as imagens, vez que essas são lidas no ImagemServlet
) e colocar a lista lida na requisição. Em seguida, ele redireciona para o JSP produtos.jsp
.
Já o servet SalvarProdutoServlet
usa o DAO para salvar o produto e redireciona para o ListagemProdutoServlet
que irá ler a lista de produtos e redirecionar ao produtos.jsp
. O SalvarProdutoServlet
é um servlet multipart (veja mais sobre isso aqui).
O método getBytesFromInputStream
é o responsável por ler um InputStream
por completo (que corresponde ao arquivo submetido) e com isso fornecer um array de bytes que contém o conteúdo do arquivo. Peguei ele desta resposta do SOen.
Se/quando você começar a usar o Java 9, a parte do getBytesFromInputStream(imagePart.getInputStream())
poderia/poderá ser substituída por imagePart.getInputStream().readAllBytes()
, e com isso o método getBytesFromInputStream(InputStream)
tornar-se-ia desnecessário. Com o novo método readAllBytes()
do Java 9, poderíamos pegar o conteúdo inteiro do arquivo enviado de uma forma mais simples.
Você ainda vai precisar alterar o SalvarProdutoServlet
para verificar se todos os dados que deveriam ser passados estão presentes e se foram preenchidos de forma válida antes de realizar a inserção no DAO de fato.
Revisando o código da sua JSP
Supondo que a sua JSP seja a página produtos.jsp
a qual me referi, agora que já temos a lógica de acesso ao banco de dados dentro de servlets, só resta ao JSP a exibição dos dados.
Com o uso de JSTL e de EL, podemos então enfim eliminar todos os scriptlets. Eis o código resultante:
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta charset="UTF-8">
<title>Listagem de produtos</title>
</head>
<body>
<form action="<c:url value="/produto/salvar" />" method="POST" enctype="multipart/form-data">
<div class="row">
<div class="col-6 col-md-4"></div>
<div class="col-6 col-md-4"><h2>Cadastro de Produtos</h2></div>
<div class="col-6 col-md-4"></div>
</div>
<div class="conteudo_cadastro">
<div class="row">
<div class="col-sm-6 col-md-4">
Nome do produto: <input type="text" id="nome" name="nome" />
</div>
<div class="col-sm-6 col-md-4">
Descrição: <input type="text" id="descricao" name="descricao" />
</div>
<div class="col-sm-6 col-md-4">
Valor: <input type="text" id="valor" name="valor" />
</div>
</div>
<div class="row">
<!--div class="col-sm-6 col-md-4">
Cor: <input type="text" id="cor" name="cor" />
</div -->
<div class="col-sm-6 col-md-4">
Marca: <input type="text" id="marca" name="marca" />
</div>
<div class="col-sm-6 col-md-4">
Tamanho: <input type="text" id="tamanho" name="tamanho" />
</div>
<div class="col-sm-6 col-md-4">
Parcelas: <input type="text" id="parcelas" name="parcelas" />
</div>
<div class="col-sm-6 col-md-4">
Tecido: <input type="text" id="tecido" name="tecido" />
</div>
<div class="col-sm-6 col-md-4">
Código: <input type="text" name="codigo" id="codigo" />
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
Arquivo: <input type="file" name="imagem" id="imagem"/>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<input type="submit" value="Cadastrar" />
</div>
</div>
</div>
</form>
<h3>Lista de Produtos Cadastrados</h3>
<table border="1">
<tr>
<th>Código</th>
<th>Foto</th>
<th>Nome</th>
<th>Descrição</th>
<th>Valor</th>
<th>Marca</th>
<th>Tamanho</th>
<th>Parcelas</th>
<th>Tecido</th>
</tr>
<c:forEach items="${requestScope.produtos}" var="registro">
<tr>
<td><c:out value="${registro.codigo}" /></td>
<td><img src="<c:url value="/produto/imagens?id=${registro.codigo}" />"</td>
<td><c:out value="${registro.nome}" /></td>
<td><c:out value="${registro.descricao}" /></td>
<td><c:out value="${registro.valor}" /></td>
<td><c:out value="${registro.marca}" /></td>
<td><c:out value="${registro.tamanho}" /></td>
<td><c:out value="${registro.parcelas}" /></td>
<td><c:out value="${registro.tecido}" /></td>
</tr>
</c:forEach>
</table>
</body>
</html>
Conecta.conexao()
lançar esseClassNotFoundException
e nem o seu DAO conhecer isso. Dê uma olhada aqui para ver como fazer isso. Além disso, acabei de testar o servlet da imagem isoladamente e funcionou: pastebin.com/AgPA7MXs=
a mais na URL que está no JSP. O=
que está imediatamente antes do?
não deveria estar lá.