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

Retrieve Image in JSF From MySQL Table Using NetBeans IDE
Posted on: June 9, 2009 at 12:00 AM

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

Related Tags for Retrieve Image in JSF From MySQL Table Using NetBeans IDE:
c, image, jsp, servlet, graph, page, tag, using, this, js, to, ci, sh, e, ls, can, use, im, ce, in, as, m, ca, let, j, es, age, s, sp, so, ess, is, graphic, ar, cc, rv, wis, uses, s, s, th, access, ap, mage, lso, o

«Previous Index Next»