8
30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 1/8 quinta-feira, 5 de janeiro de 2012 FileUpload com JSF + Primefaces + Hibernate + MySql Nesse tutorial, tentarei explicar como fazer o upload de imagem, salvar o arquivo em um diretório e gravar o nome dele no banco (mysql) para depois ser exibido em uma view (usando o JSF). O projeto que vamos fazer é simples, será o cadastro de um produto com os seguintes atributos: id, nome, preço e foto do produto. ==> Crie a base de dados ou utilize uma já existente, no meu caso, irei criar uma nova base de dados com o nome fileUpload. ==> Crie um novo projeto web com suporte a JSF, Primefaces e Hibernate (utilizando o banco criado acima). ==> Crie a estrutura de pacotes - managedBean (controller) - dao (persistência) - entidades (POJO) ==> Agora vamos fazer o POJO de produtos. Dentro do pacote entidades crie uma nova classe com o nome Produto 2 5 package entidades ; 6 7 /** 8 * 9 * @author Mara 10 */ 11 import javax.persistence.* ; 12 @Entity 13 @Table ( name = "tb_produto" ) 14 public class Produto { 15 @Id 16 @GeneratedValue ( strategy = GenerationType . AUTO ) 17 @Column ( name = "prod_id" ) 18 private int id ; 19 @Column ( name = "prod_nome" ) 20 private String nome ; 21 @Column ( name = "prod_preco" ) 22 private double preco ; 23 @Column ( name = "prod_foto" ) 24 private String foto ; 25 // Construtor getters e setters 29 Obs.: faça o import das anotações do pacote javax.persistence.* ==> Crie a classe HibernateUtil dentro do pacote dao. caso tenha dúvida de como implementar a HibernateUtil consulte http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-utilizando.html ==> Adicione o mapeamento da classe Produto no arquivo hibernate.cfg.xml e habilite para hibernate criar automaticamente a tabela no banco. 10 <property name= "hibernate.hbm2ddl.auto" > update </property> 11 <mapping class= "entidades.Produto" /> 12 Pesquisar Pesquisar 2012 (2) Janeiro (2) FileUpload com JSF + Primefaces + Hibernate + MySq... Upload de Arquivo com JSF + Primefaces (já vem no ... 2011 (2) Arquivo do blog k19 - Apostila de Hibernate K19 - Apostila de JSF Use a Cabeça Java Livros e Revistas Participar deste site Google Friend Connect Membros (3) Já é um membro? Fazer login Seguidores 3 Compartilhar mais Próximo blog» Criar um blog Login

Menina JAVA_ FileUpload Com JSF + Primefaces + Hibernate + MySql

Embed Size (px)

Citation preview

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 1/8

quinta-feira, 5 de janeiro de 2012

FileUpload com JSF + Primefaces + Hibernate + MySql

Nesse tutorial, tentarei explicar como fazer o upload de imagem, salvar o arquivo em um diretório e gravar o nome

dele no banco (mysql) para depois ser exibido em uma view (usando o JSF).

O projeto que vamos fazer é simples, será o cadastro de um produto com os seguintes atributos:

id, nome, preço e foto do produto.

==> Crie a base de dados ou util ize uma já existente, no meu caso, irei criar uma nova base de dados com o nome

fileUpload.

==> Crie um novo projeto web com suporte a JSF, Primefaces e Hibernate (util izando o banco criado acima).

==> Crie a estrutura de pacotes

- managedBean (controller)

- dao (persistência)

- entidades (POJO)

==> Agora vamos fazer o POJO de produtos. Dentro do pacote entidades crie uma nova classe com o nome Produto

2

5 package entidades;

6

7 /**

8 *

9 * @author Mara

10 */

11 import javax.persistence.*;

12 @Entity

13 @Table(name="tb_produto")

14 public class Produto{

15 @Id

16 @GeneratedValue(strategy=GenerationType.AUTO)

17 @Column(name="prod_id")

18 private int id;

19 @Column(name="prod_nome")

20 private String nome;

21 @Column(name="prod_preco")

22 private double preco;

23 @Column(name="prod_foto")

24 private String foto;

25

// Construtor getters e setters

29

Obs.: faça o import das anotações do pacote javax.persistence.*

==> Crie a classe HibernateUtil dentro do pacote dao.

caso tenha dúvida de como implementar a HibernateUtil

consulte http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-util izando.html

==> Adicione o mapeamento da classe Produto no arquivo hibernate.cfg.xml e habilite para hibernate criar

automaticamente a tabela no banco.

10 <property name="hibernate.hbm2ddl.auto">update</property>

11 <mapping class="entidades.Produto"/>

12

Pesquisar

Pesquisar

▼ 2012 (2)

▼ Janeiro (2)

FileUpload comJSF +Primefaces +Hibernate +MySq...

Upload deArquivo comJSF +Primefaces (jávem no ...

► 2011 (2)

Arquivo do blog

k19 - Apostila de Hibernate

K19 - Apostila de JSF

Use a Cabeça Java

Livros e Revistas

Participar deste siteGoogle Friend Connect

Membros (3)

Já é um membro? Fazer login

Seguidores

3Compartilhar mais Próximo blog» Criar um blog Login

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 2/8

Agora vamos fazer a classe ProdutoDao que terá os metódos para persistir e consultar os dados do banco.

==> Dentro do pacote dao, crie uma nova classe com o nome ProdutoDao e implemente pelo menos os metódos de

salvar e consultar todos os produtos, para este tutorial iremos util izar somente estes dois.

3 package dao;

4

8 import entidades.Produto;

9 import java.util.List;

10 import org.hibernate.Session;

11

12 public class ProdutoDao {

13 public void salvar(Produto produto){

14 Session session = HibernateUtil.getSession();

15 session.beginTransaction().begin();

16 session.saveOrUpdate(produto);

17 session.getTransaction().commit();

18 session.close();

19 System.out.println("Salvo com sucesso");

20 }

21

22 public List<Produto> listar(){

23 Session session= HibernateUtil.getSession();

24 String sql = "SELECT p FROM Produto p";

25 return (List<Produto>) session.createQuery(sql).list();

26 }

27 }

==> Faça o download de duas bibliotecas extras:

commons-io

http://commons.apache.org/io/download_io.cgi

commons-fileupload

http://commons.apache.org/fileupload/download_fileupload.cgi

Após baixar os arquivos, adicione as depedências ao seu projeto.

==> Configure o arquivo web.xml adicionando o filter do fileUpload.

<filter>

<filter-name>PrimeFaces FileUpload Filter</filter-name>

<filter-class> org.primefaces.webapp.filter.FileUploadFilter</filter-

class>

</filter>

<filter-mapping>

<filter-name>PrimeFaces FileUpload Filter</filter-name>

<servlet-name>Faces Servlet</servlet-name>

</filter-mapping>

No post anterior fiz o método de upload do arquivo no mangedBean, para facil iar as futuras implementações desta

funcionalidade, criei uma classe UploadArquivo que ficará responsável pelo upload. Assim quando o usuário

pressionar o botão salvar do formulário, é armazenado o arquivo e os dados no banco.

==> No pacote managedBean crie uma nova classe com o nome UploadArquivo e implemente o código abaixo.

5 package managedBean;

6

7 import java.io.File;

8 import java.io.FileOutputStream;

9 import java.util.logging.Level;

10 import java.util.logging.Logger;

11 import javax.faces.context.ExternalContext;

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 3/8

12 import javax.faces.context.FacesContext;

13 import javax.servlet.ServletContext;

14 import javax.servlet.http.HttpServletResponse;

15 import org.primefaces.event.FileUploadEvent;

16

21 public class UploadArquivo {

22 private String diretorio;

23 private String caminho;

24 private byte[] arquivo;

25 private String nome;

26

27 public UploadArquivo() {

28 }

46 public String getNome() {

47 return nome;

48 }

54 public String getRealPath() {

55ExternalContext externalContext =

FacesContext.getCurrentInstance().getExternalContext();

56HttpServletResponse response =

(HttpServletResponse) externalContext.getResponse();

57

58 FacesContext aFacesContext = FacesContext.getCurrentInstance();

59ServletContext context =

(ServletContext) aFacesContext.getExternalContext().getContext();

60

61 return context.getRealPath("/");

62 }

63

64 public void fileUpload(FileUploadEvent event, String type, String diretorio) {

65 try {

66 this.nome = new java.util.Date().getTime() + type;

67 this.caminho = getRealPath() + diretorio + getNome();

68 this.arquivo = event.getFile().getContents();

69

70 File file = new File(getRealPath() + diretorio);

71 file.mkdirs();

72

73 } catch (Exception ex) {

74 System.out.println("Erro no upload do arquivo" + ex);

75 }

76 }

77

78 public void gravar(){

79

80 try {

81

82 FileOutputStream fos;

83 fos = new FileOutputStream(this.caminho);

84 fos.write(this.arquivo);

85 fos.close();

86

87 } catch (Exception ex) {

88 System.out.println(ex);

89 }

90

91 }

92 }

Linha 54 - O método getRealPath pega o diretório completo da sua aplicação no servidor.

Linha 64 - O método fi leUpload irá fazer o carregamento do arquivo e prepara-lo para ser gravado.

Linha 78 - O método salvar, grava o arquivo no diretório informado.

Os arquivos serão armazenados na pasta build/web/nomediretorio do seu projeto.

==> No pacote managedBean crie uma nova classe com o nome ProdutoManagedBean e implemente o código

abaixo.

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 4/8

5 package managedBean;

6

7 import javax.faces.bean.ManagedBean;

8 import javax.faces.bean.SessionScoped;

9 import entidades.Produto;

10 import dao.ProdutoDao;

11 import java.util.ArrayList;

12 import java.util.List;

13 import org.primefaces.event.FileUploadEvent;

14 /**

15 *

16 * @author Mara

17 */

18 @ManagedBean(name="produtoMB")

19 @SessionScoped

20 public class ProdutoManagedBean {

21 private Produto produto;

22 private List<Produto> listarProdutos;

23 private UploadArquivo arquivo = new UploadArquivo();

24

25 public ProdutoManagedBean() {

26 this.produto = new Produto();

27 this.listarProdutos = new ArrayList<Produto>();

28 }

29

30 public List<Produto> getListarProdutos() {

31 return new ProdutoDao().listar();

32 //return this.listarProdutos;

33 }

34

35 public void setListarProdutos(List<Produto> listarProdutos) {

36 this.listarProdutos = listarProdutos;

37 }

38

39 public Produto getProduto() {

40 return produto;

41 }

42

43 public void setProduto(Produto produto) {

44 this.produto = produto;

45 }

46

47 public void uploadAction (FileUploadEvent event){

48 this.arquivo.fileUpload(event, ".jpg", "/image/");

49 this.produto.setFoto(this.arquivo.getNome());

50 }

51

52 public void salvar(){

53 new ProdutoDao().salvar(produto);

54 this.arquivo.gravar();

55

56 this.produto = new Produto();

57 this.arquivo = new UploadArquivo();

58 }

59 }

Linha 47 - Método que será chamado pela view para o upload do arquivo. O arquivo será carregado mas ainda não

será salvo no diretório.

Linha 54 - Quando o usuário pressionar no botão salvar do formulário, os dados serão persistidos no banco e o

arquivo será gravado no diretório.

==> Agora vamos fazer a view, no arquivo index implemente o código abaixo:

1 <?xml version='1.0' encoding='UTF-8' ?>

2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3 <html xmlns="http://www.w3.org/1999/xhtml"

4 xmlns:p="http://primefaces.prime.com.tr/ui"

5 xmlns:h="http://java.sun.com/jsf/html"

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 5/8

Postado por Mara Regina às 13:11

6 xmlns:f="http://java.sun.com/jsf/core">

7 <h:head>

8 <title>File Upload</title>

9 </h:head>

10 <h:body>

11 <h1>Inserir Produto</h1>

12 <h:form>

13 <h:panelGrid columns="2">

14 Nome: <h:inputText value="#{produtoMB.produto.nome}"/>

15 Preço: <h:inputText value="#{produtoMB.produto.preco}"/>

16

17 Foto: <p:fileUpload id="upload" update="foto"

18 fileUploadListener="#{produtoMB.uploadAction}" auto="true"/>

19

20 <h:commandButton action="#{produtoMB.salvar}" value="Salvar" />

21 </h:panelGrid>

22 </h:form>

23

24 <h2>Produtos Cadastrados</h2>

25 <h:form>

26 <h:dataTable var="produto" value="#{produtoMB.listarProdutos}" >

27 <h:column>

28 <f:facet name="header">Foto</f:facet>

29 <h:graphicImage value="./image/#{produto.foto}"/>

30 </h:column>

31 <h:column>

32 <f:facet name="header">Nome</f:facet>

33 <h:outputText value="#{produto.nome}"/>

34 </h:column>

35 <h:column>

36 <f:facet name="header">Preço</f:facet>

37 <h:outputText value="#{produto.preco}"/>

38 </h:column>

40 </h:dataTable>

41 </h:form>

42 </h:body>

43 </html>

44

Acesse https://github.com/MaraRegina/FileUpload, visualize o projeto completo ou faça o download para testar.

+3 Recomende isto no Google

Respostas

14 comentários:

@Armando_Piruk 5 de janeiro de 2012 17:14

hahahahaha outro nivel, o tutorial ficou bem mais legal e ta brincando com o layout do blog, #curti

Responder

kiko 31 de março de 2012 20:56

100%, foi de muita ajuda esse tutorial

Responder

Douglas 20 de maio de 2012 07:26

Olá, consegui fazer tudo que você ensinou... tá salvando no arquivo e tudo certinho... só que estou tendo

problema na hora de apresentar na tela pelo componente primefaces graphicImage... alguém sabe pq a

imagem não está sendo carregada?

Responder

Mara Regina 20 de maio de 2012 09:18

Olá Douglas,

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 6/8

Responder

Respostas

Responder

Qual o erro que esta sendo exibido, é erro de componente util izado?

Se possível, verifique se o caminho colocado para carregar a imagem corresponde com o

caminho do diretório onde ela foi salva.

Douglas 24 de maio de 2012 09:00

não é erro do componente, a imagem só não é carregada... e eu coloquei até o endereço estático

pra testar e ela não é carregada... a imagem que aparece no lugar é uma que não é aquele "x"

vermelho, não sei explicar direito qual é essa imagem.

leonardo teles de almeida 25 de setembro de 2012 12:49

Olá, boa tarde...

seria possível util izar este tutorial para salvar um arquivo em um banco na rede?

Se sim, poderia me dizer onde posso achar alguma informação?

Obrigado.

Responder

Mara Regina 25 de setembro de 2012 16:23

Sim, no exemplo do tutorial util izei o conceito de Dao util izando o hibernate para salvar os

dados e imagem no banco.

Da uma olhada neste tutorial tem um exemplo de conexão ao banco usando o hibernate.

http://meninajava.blogspot.com/2011/11/configurar-o-hibernate-util izando.html

Mara Regina 25 de setembro de 2012 16:36

Agora que fui me atentar a sua pergunta...

se vc deseja salvar o arquivo da imagem no banco em vez de gravar somente o nome no banco e

deixar a imagem salva em um diretorio. Não tenho nenhum exemplo em mãos.

Mas vou verificar

Vitor Lopes 5 de novembro de 2012 09:06

Obrigado , Me ajudou bastante

Responder

Unknown 15 de novembro de 2012 12:59

oi tudo bem..primeiramente parabens..

estou com um problema na implementaçao.

log do servidor apache:

SEVERE: null

java.lang.NullPointerException

Hibernate:

/* insert br.com.ecommerceetelj.model.Produto

*/ insert

into

produto

(id_cat, desconto_produto, descricao_produto, imagem_produto, nome_produto, preco_produto,

qtd_produtodisponivel_produto, id_produto)

values

(?, ?, ?, ?, ?, ?, ?, ?)

at java.io.FileOutputStream.(FileOutputStream.java:172)

OBS: ESSE ERRO DE CIMA CAI EM

if (name == null) {

throw new NullPointerException();

}

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 7/8

Digite seu comentário...

Comentar como: Conta do Google

Publicar Visualizar

at java.io.FileOutputStream.(FileOutputStream.java:70)

OBS: O ERRO DE CIMA CAI EM

public FileOutputStream(String name) throws FileNotFoundException {

this(name != null ? new File(name) : null, false);

}

at br.com.ecommerceetelj.bean.UploadArquivo.gravar(UploadArquivo.java:89)

at br.com.ecommerceetelj.bean.ProdutoBean.salvar(ProdutoBean.java:41)

OBS: O ERRO ACIMA CAI EM QUE ESTA DENTRO DO MEU METODO SALVAR

this.arquivo.gravar(); //chama metoda da classe UploadArquivo

O ERRO DE NULL POINTER ESTA NA LINHA 83 DO SEU TUTORIAL

83 fos = new FileOutputStream(this.caminho);

NO BANCO O MEu PRODUTO SALVA NORMALMENTE , MAIS O CAMPO IMAGEM DO BANCO FICA "Null".

DESDE JA AGRADEÇO!!

Responder

Anônimo 20 de novembro de 2012 05:30

Excelente post. Parabéns!

Responder

Anônimo 22 de março de 2013 10:30

Olá Mara!

Gostaria de salvar imagens em uma pasta dentro do container ( Tomcat ) exemplo webapps\documentos\

porque ? bem o sistema poderia ser republicado e perder a pasta de documentos caso estivesse sendo

gravado dentro do contexto da aplicação vc saberia me dizer como?

Há ficou muito bom! Parabens

Robson

Responder

Thiago Brito 25 de abril de 2013 07:44

Agradeço por compartilhar, deu tudo certo aqui.

Obrigado e sucesso.

Responder

Carlos Júnior Rodrigues Borges 26 de junho de 2013 11:46

Parabéns! Grande iniciativa, continue compartilhando conhecimento.

Carlos Júnior.

Responder

30/08/13 Menina JAVA: FileUpload com JSF + Primefaces + Hibernate + MySql

meninajava.blogspot.com.br/2012/01/fileupload-com-jsf-primefaces-hibernate.html 8/8

Postagem mais antigaInício

Assinar: Postar comentários (Atom)

Modelo Awesome Inc.. Tecnologia do Blogger.