Display Data from Database in JSF Application

This Example demonstrates you how to display data from database in JSF application.

Developing JSF Application
In this section, we are going to display data from database in JSF based web applications.

The dataTable tag is used to create table on the page. The component is rendered as an html <table> element. UIColumn child components are responsible for rendering columns of the table. In these columns you can put any type of component like input text box, output text, command button etc.<h:column> tag is used to create column. There can be many column tags within dataTable tag. You can set header and footer in this table. For this <f:facet> tag is used. data table component and its children column component can use header and footer facet.

This section provides you the code to which uses this tag and some of its attributes. It uses backing bean that supplies data to the data table to be rendered to the cells of the columns of the table.

Code Description :

1.Create a web page "data.jsp" for display data.

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

<f:view><html>
<head>

</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%" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >

<f:facet name="header">
<h:outputText value="This is 'dataTable' demo" />
</f:facet>

<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:outputText style="" value="#{item.firstName}" ></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="Last Name"/>
</f:facet>
<h:outputText value="#{item.lastName}"></h:outputText>
</h:column>

<h:column>
<f:facet name="header">
<h:outputText value="Username"/>
</f:facet>
<h:outputText value="#{item.uname}"></h:outputText>
</h:column>

<f:facet name="footer">
<h:outputText value="The End" />
</f:facet>

</h:dataTable><br>

</center>
</body></html></f:view>

2. Create a Bean class "TableBean.java".


package roseindia;

import java.sql.*;

import java.util.*;

    

public class TableBean {



Connection con ;

Statement ps;

ResultSet rs;

private List perInfoAll = new ArrayList(); 



public List getperInfoAll() {

 int i = 0;

  try

  {

  

  Class.forName("com.mysql.jdbc.Driver");

  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/userdetails",

	"root","root");

	

  ps = con.createStatement();

  rs = ps.executeQuery("select * from user");

  while(rs.next()){

  System.out.println(rs.getString(1));

  perInfoAll.add(i,new perInfo(rs.getString(1),rs.getString(2)

	,rs.getString(3)));

  i++;



  }

  

  }

  catch (Exception e)

  {

  System.out.println("Error Data : " + e.getMessage());

  }

return perInfoAll;

}





public class perInfo {



String uname;

String firstName;

String lastName;





public perInfo(String firstName,String lastName,String uname) {

this.uname = uname;

this.firstName = firstName;

this.lastName = lastName;



}



public String getUname() {

return uname;

}



public String getFirstName() {

return firstName;

}



public String getLastName() {

return lastName;

}



}



}

3. Mapping for Bean class "faces-config.xml".

<?xml version="1.0"?>

    <faces-config>

	<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>

4.web.xml

<?xml version="1.0"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>

<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>

<context-param>
<param-name>javax.faces.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>

<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>



<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup> 1 </load-on-startup>
</servlet>


<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

</web-app>

Output :

Database Table : "user"

Download the application

Display Data from Database in JSF Application

Display Data from Database in JSF Application

Display Data from Database in JSF Application

Tutorials