Home Jsf Retrieve Image in JSF From MySQL Table Using NetBeans IDE

Related Tutorials


 
 

Share on Google+Share on Google+

Retrieve Image in JSF From MySQL Table Using NetBeans IDE

Advertisement
In this application we create a jsp page to display image.

Retrieve Image in JSF From MySQL Table Using NetBeans IDE

        

This application illustrates how to retrieve image and data from MySQL table using NetBeans IDE.

In this application we create a jsp page to display image. In this JSP page we are using <h:graphicImage> tag to access the servlet, here we are uses servlet but as u wish u can access a jsp page also. To create the project in the NetBeans IDE select File > click on "Create Project" then a New Project window will be appear, select Web from Categories section and select Web Application from Projects section. Click Next.  

Put Project Name and click Next.

Choose JavaServer Faces and click Finish.

To create the jsp file right click on Web Pages select New and click JSP as below:

 

Here is the Source Code of data.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
  <html>
  <head><h2>JSF Application</h2></head>
  <body>
  <center><br><br><br>
  <h:dataTable id="dt1" value="#{tableBean.perInfoAll}" 
  var=
"item" bgcolor="#F1F1F1" border="10" cellpadding="5" 
  cellspacing=
"3" rows="4" width="50%">
  <f:facet name="header">
  <h:outputText value="This is Table Data" />
  </f:facet>
  
  <h:column>
  <f:facet name="header">
  <h:outputText value="Emp Name" />
  </f:facet>
  <h:outputText value="#{item.name}"/>  
  </h:column>

  <h:column>
  <f:facet name="header">
  <h:outputText value="Image" />
  </f:facet>
  <h:graphicImage value="DisplayImage"/> 
  </h:column>

  <f:facet name="footer">
  <h:outputText value="The End" />
  </f:facet> 
  </h:dataTable><br>
  </center>
  </body>
  </html>
</f:view>

 To create the package right click on Source Package and select New > Java Package..

The following window will appear then put package name and click Finish.

 

To create the java class right click on newly created package and select New > Java Class

Put the Class Name and click Finish.

Source Code of DisplayImage.java 

package roseindia;

import java.sql.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class DisplayImage extends  HttpServlet{
  
  public void doGet(HttpServletRequest request, 
HttpServletResponse response

   throws 
ServletException, IOException{
  String connectionURL = "jdbc:mysql://localhost:3306/test";
    java.sql.Connection con=null;
  Statement st1;
  try{  
  Class.forName("com.mysql.jdbc.Driver").newInstance();
  con=DriverManager.getConnection   (connectionURL,"root","root");  
  st1=con.createStatement();
  ResultSet rs1 = st1.executeQuery

(
"select image from pictures where id = '2'");
  String imgLen="";
  while(rs1.next()){
  imgLen = rs1.getString(1);
  System.out.println(imgLen.length());
  int len = imgLen.length();
  byte [] rb = new byte[len];
  InputStream readImg = rs1.getBinaryStream(1);
  int index=readImg.read(rb, 0, len);  
  System.out.println("index----------------"+index);
  response.reset();
  response.setContentType("image/jpg");
  response.getOutputStream().write(rb,0,len);
  response.getOutputStream().flush();
  
  }
  st1.close();
  response.getOutputStream().close();
 catch (Exception e){
  e.printStackTrace();
  }
  }
}

 Create Bean class to set and get the table column as below the source code of TableBean.java 

package roseindia;

import java.sql.*;
import java.util.*;
import java.io.*;

public class TableBean {
  Connection con ;
  Statement ps;
  ResultSet rs;
  private List perInfoAll = new ArrayList();

  public void setPerInfoAll(List perInfoAll) {
  this.perInfoAll = perInfoAll;
  }
  
  public List getPerInfoAll() {
  int i = 0;
  try{
 Class.forName("com.mysql.jdbc.Driver");
 con = DriverManager.getConnection("jdbc:mysql://localhost:3306/
   test"
,"root","root");
 ps = con.createStatement();
 rs = ps.executeQuery("select name from emp");
 while(rs.next()){
 perInfoAll.add(i,new tableData(rs.getString("name")));
  i++;
  }  
  catch (Exception e) {
  System.out.println("Error Data : " + e.getMessage());
  
  return perInfoAll;
  }
  
  public class tableData {
  private String name;
  
  public tableData(String name) {
  this.name = name;
  }  

  public void setName(String name) {
  this.name = name;
  }
  
  public String getName() {
  System.out.println("Name: "+name);
  return name;
  }
  }
}

 

Servlet Mapping in web.xml

<servlet>
  <servlet-name>DisplayImage</servlet-name>
  <servlet-class>roseindia.DisplayImage</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>DisplayImage</servlet-name>
  <url-pattern>/DisplayImage</url-pattern>
</servlet-mapping>

 

Source Code of faces-config.xml 

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

<!-- =========== FULL CONFIGURATION FILE ================== -->

<faces-config version="1.2" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://j
   ava.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
>

  <managed-bean>
  <managed-bean-name>tableBean</managed-bean-name>
  <managed-bean-class>roseindia.TableBean</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
  
</faces-config>

 

The Output shown on the Browser as below:

Download Complete Source Code

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: June 9, 2009

Related Tutorials

Discuss: Retrieve Image in JSF From MySQL Table Using NetBeans IDE  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:3
satish
January 11, 2012
nt working

the servlet is showing the image bt in the JSF images arent getting displayed :( help me... i used the same code..
Kemal Duran
July 15, 2013
datatable showing many images

it's working but, it gets only one image from database like this : ("select image from pictures where id = '2'"); I have many images to show datatable What can I do?
sabarish
April 3, 2013
formal

i used this same code but it only index.xhtml alone after that other page are display not running.................. how to run this program please help me
DMCA.com