JSF CRUD (Create Read Update Delete) Application

JSF CRUD Example for beginners and professionals with examples on life cycle, managed beans, ui components, ui tags, validation, bean validation, datatable, converters, facelets etc.

JSF CRUD (Create Read Update Delete) Application

JSF CRUD (Create Read Update Delete) Application

JSF provides rich tools and library for creating application. Here, we are creating a CRUD application which involves the following steps.


Setup database

1) Create a database

  1. create database User 

2) select database

  1. use User; 

3) Create table

  1. create table users(id int not null primary key auto_increment, name varchar(100),   
  2. email varchar(50), password varchar(20), gender varchar(1), address text); 

4) View table structure

  1. desc users; 

we have successfully created database and table.

Now, create a JSF project and create the following files in respective subdirectories.

This example is created in NetBean IDE 8.2. following is the project structure of this example.

// index.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  6. <h:head>  
  7. <title>User Details</title>  
  8. <h:outputStylesheet name="/css/bootstrap.min.css"/>  
  9. <style type="text/css">  
  10. table {  
  11. border-collapse: collapse;  
  12. width: 100%;  
  13. }  
  14. th, td {  
  15. text-align: left;  
  16. padding: 8px;  
  17. }  
  18.   
  19. tr:nth-child(even){background-color: #f2f2f2}  
  20. th {  
  21. background-color: #4CAF50;  
  22. color: white;  
  23. }  
  24. </style>  
  25. </h:head>  
  26. <h:body>  
  27. <h:form>  
  28. <center>  
  29. <h2><h:outputText value="User Records"/></h2>  
  30. </center>  
  31. <h:dataTable binding="#{table}" value="#{user.usersList()}" var="u"   
  32. class="table table-striped table-hover table-bordered">  
  33. <h:column>  
  34. <f:facet name="header">ID</f:facet>  
  35. <h:outputText value="#{table.rowIndex + 1}"/>  
  36. </h:column>  
  37. <h:column>  
  38. <f:facet name="header">User Name</f:facet>  
  39. <h:outputText value="#{u.name}"/>  
  40. </h:column>  
  41. <h:column>  
  42. <f:facet name="header">Email ID</f:facet>  
  43. <h:outputText value="#{u.email}"/>  
  44. </h:column>  
  45. <h:column>  
  46. <f:facet name="header">Password</f:facet>  
  47. <h:outputText value="#{u.password}"/>  
  48. </h:column>  
  49. <h:column>  
  50. <f:facet name="header">Gender</f:facet>  
  51. <h:outputText value="#{user.getGenderName(u.gender)}"/>  
  52. </h:column>  
  53. <h:column>  
  54. <f:facet name="header">Address</f:facet>  
  55. <h:outputText value="#{u.address}"/>  
  56. </h:column>  
  57. <h:column>  
  58. <f:facet name="header">Update</f:facet>  
  59. <h:commandButton action = "#{user.edit(u.id)}" value="Update" class="btn btn-primary">  
  60. </h:commandButton>  
  61. </h:column>  
  62. <h:column>  
  63. <f:facet name="header">Delete</f:facet>  
  64. <h:commandButton action = "#{user.delete(u.id)}" value="Delete" class="btn btn-danger">  
  65. </h:commandButton>  
  66. </h:column>  
  67. </h:dataTable>  
  68. <center><h:commandButton action = "create.xhtml?faces-redirect=true"   
  69. value="Create New User" class="btn btn-success"></h:commandButton></center>  
  70. </h:form>  
  71. </h:body>  
  72. </html>  

// create.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  6. <h:head>  
  7. <title>User Registration Form</title>  
  8. <h:outputStylesheet name="/css/bootstrap.min.css"/>  
  9. </h:head>  
  10. <h:body>  
  11. <h:form id="form" class="form-horizontal">  
  12. <div class="form-group">  
  13. <div class="col-sm-4"></div>  
  14. <div  class="col-sm-4">  
  15. <h2 style="text-align: center">Provide Following Details</h2>  
  16. </div>  
  17. </div>  
  18. <hr/>  
  19. <div class="form-group">  
  20. <h:outputLabel for="username" class="control-label col-sm-4">User Name</h:outputLabel>  
  21. <div class="col-sm-4">  
  22. <h:inputText id="name-id" value="#{user.name}" class="form-control"   
  23. validatorMessage="User name is required">  
  24. <f:validateRequired />  
  25. </h:inputText>  
  26. </div>  
  27. </div>  
  28. <div class="form-group">  
  29. <h:outputLabel for="email" class="control-label col-sm-4">Your Email</h:outputLabel>  
  30. <div class="col-sm-4">  
  31. <h:inputText id="email-id" value="#{user.email}" class="form-control"   
  32. validatorMessage="Email Id is required">  
  33. <f:validateRequired/>  
  34. </h:inputText>  
  35. </div>  
  36. </div>  
  37. <div class="form-group">  
  38. <h:outputLabel for="password" class="control-label col-sm-4">Password</h:outputLabel>  
  39. <div class="col-sm-4">  
  40. <h:inputSecret id="password-id" value="#{user.password}" class="form-control"   
  41. validatorMessage="Password is required">  
  42. <f:validateRequired/>  
  43. </h:inputSecret>  
  44. </div>  
  45. </div>  
  46. <div class="form-group">  
  47. <h:outputLabel for="gender" class="control-label col-sm-4">Gender</h:outputLabel>  
  48. <div class="col-sm-4">  
  49. <h:selectOneRadio value="#{user.gender}" validatorMessage="Gender is required">  
  50. <f:selectItem itemValue="M" itemLabel="Male" />  
  51. <f:selectItem itemValue="F" itemLabel="Female" />  
  52. <f:validateRequired/>  
  53. </h:selectOneRadio>  
  54. </div>  
  55. </div>  
  56. <div class="form-group">  
  57. <h:outputLabel for="address" class="control-label col-sm-4">Address</h:outputLabel>  
  58. <div class="col-sm-4">  
  59. <h:inputTextarea value="#{user.address}" cols="50" rows="5" class="form-control"   
  60. validatorMessage="Address is required">  
  61. <f:validateRequired/>  
  62. </h:inputTextarea>  
  63. </div>  
  64. </div>  
  65. <div class="form-group">  
  66. <div class="col-sm-4"></div>  
  67. <div class="col-sm-4">  
  68. <div class="col-sm-2">  
  69. <h:commandButton value="Save" action="#{user.save()}" class="btn btn-success"   
  70. style="width: 80px;"></h:commandButton>  
  71. </div>  
  72. <div class="col-sm-1">  
  73. </div>  
  74. <div class="col-sm-2">  
  75. <h:link outcome="index" value="View Users Record List" class="btn btn-primary" />  
  76. </div>  
  77. </div>  
  78. </div>  
  79. </h:form>  
  80. </h:body>  
  81. </html>  

// edit.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  6. <h:head>  
  7. <title>Edit Your Record</title>  
  8. <h:outputStylesheet name="/css/bootstrap.min.css"/>  
  9. </h:head>  
  10. <h:body>  
  11. <h:form id="form" class="form-horizontal">  
  12. <div class="form-group">  
  13. <div class="col-sm-2"></div>  
  14. <h2 style="text-align: center" class="col-sm-4">Edit Your Record</h2>  
  15. </div>  
  16. <hr/>  
  17. <div class="form-group">  
  18. <h:outputLabel for="username" class="control-label col-sm-2">User Name</h:outputLabel>  
  19. <div class="col-sm-4">  
  20. <h:inputText id="name-id" value="#{editUser.name}" class="form-control"/>  
  21. </div>  
  22. </div>  
  23. <div class="form-group">  
  24. <h:outputLabel for="email" class="control-label col-sm-2">Your Email</h:outputLabel>  
  25. <div class="col-sm-4">  
  26. <h:inputText id="email-id" value="#{editUser.email}" class="form-control"/>  
  27. </div>  
  28. </div>  
  29. <div class="form-group">  
  30. <h:outputLabel for="password" class="control-label col-sm-2">Password</h:outputLabel>  
  31. <div class="col-sm-4">  
  32. <h:inputSecret id="password-id" value="#{editUser.password}" class="form-control"/>  
  33. </div>  
  34. </div>  
  35. <div class="form-group">  
  36. <h:outputLabel for="gender" class="control-label col-sm-2">Gender</h:outputLabel>  
  37. <div class="col-sm-4">  
  38. <h:selectOneRadio value="#{editUser.gender}">  
  39. <f:selectItem itemValue="M" itemLabel="Male" />  
  40. <f:selectItem itemValue="F" itemLabel="Female" />  
  41. </h:selectOneRadio>  
  42. </div>  
  43. </div>  
  44. <div class="form-group">  
  45. <h:outputLabel for="address" class="control-label col-sm-2">Address</h:outputLabel>  
  46. <div class="col-sm-4">  
  47. <h:inputTextarea value="#{editUser.address}" cols="50" rows="5" class="form-control"/>  
  48. </div>  
  49. </div>  
  50. <div class="form-group">  
  51. <div class="col-sm-2"></div>  
  52. <div class="col-sm-4">  
  53. <center><h:commandButton value="Update" action="#{user.update(editUser)}"   
  54. class="btn btn-primary" style="width: 80px;"></h:commandButton></center>  
  55. </div>  
  56. </div>  
  57. </h:form>  
  58. </h:body>  
  59. </html>  

// User.java

  1. import java.sql.Connection;  
  2. import java.sql.DriverManager;  
  3. import java.sql.PreparedStatement;  
  4. import java.sql.Statement;  
  5. import java.sql.ResultSet;  
  6. import java.util.ArrayList;  
  7. import java.util.Map;  
  8. import javax.faces.bean.ManagedBean;  
  9. import javax.faces.bean.RequestScoped;  
  10. import javax.faces.context.FacesContext;  
  11. @ManagedBean  
  12. @RequestScoped  
  13. public class User{  
  14. int id;  
  15. String name;  
  16. String email;  
  17. String password;  
  18. String gender;  
  19. String address;  
  20. ArrayList usersList ;  
  21. private Map<String,Object> sessionMap = FacesContext.getCurrentInstance().getExternalContext().getSessionMap();  
  22. Connection connection;  
  23.   
  24. public int getId() {  
  25. return id;  
  26. }  
  27. public void setId(int id) {  
  28. this.id = id;  
  29. }  
  30. public String getName() {  
  31. return name;  
  32. }  
  33. public void setName(String name) {  
  34. this.name = name;  
  35. }  
  36. public String getEmail() {  
  37. return email;  
  38. }  
  39. public void setEmail(String email) {  
  40. this.email = email;  
  41. }  
  42. public String getPassword() {  
  43. return password;  
  44. }  
  45. public void setPassword(String password) {  
  46. this.password = password;  
  47. }  
  48. public String getGender() {  
  49. return gender;  
  50. }  
  51. public void setGender(String gender) {  
  52. this.gender = gender;  
  53. }  
  54. public String getAddress() {  
  55. return address;  
  56. }  
  57. public void setAddress(String address) {  
  58. this.address = address;  
  59. }   
  60. // Used to establish connection  
  61. public Connection getConnection(){  
  62. try{  
  63. Class.forName("com.mysql.jdbc.Driver");     
  64. connection = DriverManager.getConnection( "jdbc:mysql://localhost:3306/User","root","mysql");  
  65. }catch(Exception e){  
  66. System.out.println(e);  
  67. }  
  68. return connection;  
  69. }  
  70. // Used to fetch all records  
  71. public ArrayList usersList(){  
  72. try{  
  73. usersList = new ArrayList();  
  74. connection = getConnection();  
  75. Statement stmt=getConnection().createStatement();    
  76. ResultSet rs=stmt.executeQuery("select * from users");    
  77. while(rs.next()){  
  78. User user = new User();  
  79. user.setId(rs.getInt("id"));  
  80. user.setName(rs.getString("name"));  
  81. user.setEmail(rs.getString("email"));  
  82. user.setPassword(rs.getString("password"));  
  83. user.setGender(rs.getString("gender"));  
  84. user.setAddress(rs.getString("address"));  
  85. usersList.add(user);  
  86. }  
  87. connection.close();          
  88. }catch(Exception e){  
  89. System.out.println(e);  
  90. }  
  91. return usersList;  
  92. }  
  93. // Used to save user record  
  94. public String save(){  
  95. int result = 0;  
  96. try{  
  97. connection = getConnection();  
  98. PreparedStatement stmt = connection.prepareStatement(  
  99. "insert into users(name,email,password,gender,address) values(?,?,?,?,?)");  
  100. stmt.setString(1, name);  
  101. stmt.setString(2, email);  
  102. stmt.setString(3, password);  
  103. stmt.setString(4, gender);  
  104. stmt.setString(5, address);  
  105. result = stmt.executeUpdate();  
  106. connection.close();  
  107. }catch(Exception e){  
  108. System.out.println(e);  
  109. }  
  110. if(result !=0)  
  111. return "index.xhtml?faces-redirect=true";  
  112. else return "create.xhtml?faces-redirect=true";  
  113. }  
  114. // Used to fetch record to update  
  115. public String edit(int id){  
  116. User user = null;  
  117. System.out.println(id);  
  118. try{  
  119. connection = getConnection();  
  120. Statement stmt=getConnection().createStatement();    
  121. ResultSet rs=stmt.executeQuery("select * from users where id = "+(id));  
  122. rs.next();  
  123. user = new User();  
  124. user.setId(rs.getInt("id"));  
  125. user.setName(rs.getString("name"));  
  126. user.setEmail(rs.getString("email"));  
  127. user.setGender(rs.getString("gender"));  
  128. user.setAddress(rs.getString("address"));  
  129. user.setPassword(rs.getString("password"));    
  130. System.out.println(rs.getString("password"));  
  131. sessionMap.put("editUser", user);  
  132. connection.close();  
  133. }catch(Exception e){  
  134. System.out.println(e);  
  135. }         
  136. return "/edit.xhtml?faces-redirect=true";  
  137. }  
  138. // Used to update user record  
  139. public String update(User u){  
  140. //int result = 0;  
  141. try{  
  142. connection = getConnection();    
  143. PreparedStatement stmt=connection.prepareStatement(  
  144. "update users set name=?,email=?,password=?,gender=?,address=? where id=?");    
  145. stmt.setString(1,u.getName());    
  146. stmt.setString(2,u.getEmail());    
  147. stmt.setString(3,u.getPassword());    
  148. stmt.setString(4,u.getGender());    
  149. stmt.setString(5,u.getAddress());    
  150. stmt.setInt(6,u.getId());    
  151. stmt.executeUpdate();  
  152. connection.close();  
  153. }catch(Exception e){  
  154. System.out.println();  
  155. }  
  156. return "/index.xhtml?faces-redirect=true";        
  157. }  
  158. // Used to delete user record  
  159. public void delete(int id){  
  160. try{  
  161. connection = getConnection();    
  162. PreparedStatement stmt = connection.prepareStatement("delete from users where id = "+id);    
  163. stmt.executeUpdate();    
  164. }catch(Exception e){  
  165. System.out.println(e);  
  166. }  
  167. }  
  168. // Used to set user gender  
  169. public String getGenderName(char gender){  
  170. if(gender == 'M'){  
  171. return "Male";  
  172. }else return "Female";  
  173. }  
  174. }  

Output:

Index Page

This is index page of the application. After running the project it populates the result from the mysql database users table.

Create Page : Add a new user record

You can add new user record in users table by using this application.

Index page after adding new record.

Update user record

Index Page before updating record.

Update Form

Index Page after updating the record

Deleting record

Index page before deleting the record.

Index page After deleting the record