Introduction
JavaServer Faces or JSF is a new Java standard technology for building component-based and event-oriented web interfaces. Similar to JavaServer Pages (JSP), JSF allows server-side access to data and logic.
JDBC(Java Database Connectivity) is a Java API that we use to connect and execute the query with a Database. It comes as a part of JavaSE (Java Standard Edition). This article will show how you can integrate databases in JSF using JDBC.
Implementation
To demonstrate the integration of databases in JSF using JDBC, we will firstly create a database using tools like MySQL or SQLite. Then we will create a .xhtml form allowing users to edit the database and add data. We will use a Java program file to implement this with the help of JDBC.
So without further ado, let's get started with the implementation.
Creating the Database
We will start by creating a database using mysql on the terminal with the following command.
create database Emp;
After that, we will select the database that we just created.
use Emp
Now we need to create a table in the database. You can do this using the given command on the terminal.
create table user(id int not null auto_increment primary key, name varchar(100) not null, email varchar(50) not null );
You can also view the table.
desc user;
Having created a database, you can now go forward to the form, managed bean, and response code to demonstrate the JDBC integration in JSF.
Creating the Form
We will create a .xhtml form that will allow the user to enter data that they want to insert to the database we created above.
index.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html">
<h:head>
<title>User Form</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username" value="User Name "/>
<h:inputText id="username" value="#{user.userName}">
</h:inputText><br/>
<h:outputLabel for="email" value="Email ID "/>
<h:inputText id="email" value="#{user.email}">
</h:inputText><br/><br/>
<h:commandButton action="#{user.submit()}" value="submit"/>
</h:form>
</h:body>
</html> Creating the Managed Bean
The Java code for the managed bean is where we will include properties, database connection and page navigation. This program will also include the implementation of the JDBC connection in JSF.
user.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import javax.faces.bean.ReferencedBean;
import javax.faces.bean.ManagedBean;
@ManagedBean
@ReferencedBean
public class user {
String userName;
String email;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public boolean save(){
int result = 0;
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection( "jdbc:mysql://localhost:3306/Emp","root","mysql");
PreparedStatement stmt = con.prepareStatement("insert into user(name,email)
values(?,?)");
stmt.setString(1, this.getUserName());
stmt.setString(2, this.getEmail());
result = stmt.executeUpdate();
}catch(Exception e){
System.out.println(e);
}
if(result == 1){
return true;
}else return false;
}
public String submit(){
if(this.save()){
return "response.xhtml";
}else return "index.xhtml";
}
} 
Creating a Response
Finally, we can write an elementary xhtml code for a response page that confirms that the data has been inserted successfully to the database.
response.xhtml
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:h = "http://java.sun.com/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1><h:outputText value="Hello #{user.userName}"/></h1>
<h:outputText value="Your Record is Saved Successfully!"/>
</h:body>
</html> Output
And just like that! You have successfully inserted new data into your database table. You can also check to see if the data has been inserted successfully or not. If all is done right, the following command should show your table with the new data you created.
select * from user 
34+ registered 
