Skip to main content

Sample Crud Using Spring MVC + JDBC Template + PostgreSQL + Primefaces Part 01

CRUD (Create, Read, Update and Delete) application is the most important application for creating any project. It provides an idea to develop a large project. In spring MVC, we can develop a simple CRUD application.
Here, we are using JdbcTemplate for database interaction.

Creating table
Create EMPLOYEE, COUNTRY, CITY Tables, simply Copy and Paste the following SQL query in the query editor to get the table created.


CREATE TABLE public.country
(
    country_id integer NOT NULL,
    name character varying(50)  NOT NULL,
    code character varying(5)  NOT NULL,
    added_date timestamp without time zone NOT NULL,
    state_code smallint NOT NULL,
    CONSTRAINT country_pkey PRIMARY KEY (country_id)
);



 CREATE TABLE public.city
(
    city_id integer NOT NULL,
    name character varying(60) NOT NULL,
    country_id integer NOT NULL,
    added_date timestamp without time zone NOT NULL,
    state_code smallint NOT NULL,
    CONSTRAINT city_pkey PRIMARY KEY (city_id),
    CONSTRAINT country_fkey FOREIGN KEY (country_id)
        REFERENCES public.country (country_id) MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE RESTRICT
);


CREATE TABLE public.employee
(
    emp_id integer NOT NULL,
    emp_name character varying(50) NOT NULL,
    age integer,
    email character varying(60) ,
    mobile_no character varying(15)   NOT NULL,
    nic character varying(12)  NOT NULL,
    dob timestamp without time zone,
    gender character varying(1) ,
    marital_state character varying(1),
    country_id integer,
    city_id integer,
    added_date time without time zone NOT NULL,
    state_code smallint NOT NULL,
    CONSTRAINT emp_pkey PRIMARY KEY (emp_id),
    CONSTRAINT city_fkey FOREIGN KEY (city_id)
        REFERENCES public.city (city_id) MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE RESTRICT,
    CONSTRAINT country_fkey FOREIGN KEY (country_id)
        REFERENCES public.country (country_id) MATCH SIMPLE
        ON UPDATE NO ACTION
        ON DELETE RESTRICT
);

 

Folder Structure:



 Creating Maven Project:
After Creating Project Create META-INF, WEB-INF, Pages and Templates Folders in project web-app folder.

 
creating template using primefaces layout unit:

 template.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html" id="fview">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>ABC Company</title>
 <ui:debug />
 <f:metadata>
  <ui:insert name="metadata" />
 </f:metadata>

 <h:head>
  <p:layout fullPage="true" resizeTitle="resize"
   style="background-color:#FFFFFF;">

   <p:layoutUnit position="north" size="100" id="north">
    <ui:include src="header.xhtml" />
   </p:layoutUnit>

   <p:layoutUnit position="west" id="west" resizable="false" size="225">
    <ui:include src="menu.xhtml" />
   </p:layoutUnit>

   <p:layoutUnit styleClass="layoutUnitCenter" position="center">
    <h:form id="contentForm">
     <p:growl id="growl" sticky="false" showDetail="true" life="10000" />
     <ui:insert name="content" />
    </h:form>
   </p:layoutUnit>

  </p:layout>

 </h:head>
</f:view>
</html>


menu.xhtml
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:f="http://java.sun.com/jsf/core">

 <h:form>

  <p:outputPanel id="menuPanel" layout="block">

   <p:panelMenu model="#{DynamicMenu.menuModel}" />


  </p:outputPanel>

 </h:form>

</ui:composition>


header.xhtml
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:f="http://java.sun.com/jsf/core">
 <center>
  <h2>ABC Company</h2>
 </center>

</ui:composition>

index.xhtml 

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:f="http://java.sun.com/jsf/core"
 template="templates/template.xhtml">
 <ui:define name="metadata">
 </ui:define>
 <ui:define name="content">

 </ui:define>
</ui:composition>


After that we are moving to pom.xml: 

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.sample.webapp</groupId>
 <artifactId>crud-webapp</artifactId>
 <version>1.0.0.0-SNAPSHOT</version>
 <packaging>war</packaging>

 <properties>
  <spring.version>4.3.7.RELEASE</spring.version>
  <postgresql.version>9.4-1200-jdbc41</postgresql.version>
  <c3p0.version>0.9.1.2</c3p0.version>
  <log4j.version>1.2.17</log4j.version>
  <commons-codec.version>1.10</commons-codec.version>
  <commons-logging.version>1.2</commons-logging.version>
  <commons-lang3.version>3.4</commons-lang3.version>

  <servlet-api.version>3.1.0</servlet-api.version>
  <jsp-api.version>2.3.1</jsp-api.version>
  <jsf-impl.version>2.2.4</jsf-impl.version>
  <jsf-api.version>2.2.4</jsf-api.version>
  <jstl.version>1.1.2</jstl.version>
  <el-impl.version>2.2</el-impl.version>
  <primefaces.version>6.1</primefaces.version>
  <theme.version>1.0.10</theme.version>
 </properties>


 <build>
  <finalName>test-app</finalName>
  <plugins>
   <plugin>
    <artifactId>maven-compiler-plugin</artifactId>
    <version>3.5</version>
    <configuration>
     <source>1.8</source>
     <target>1.8</target>
    </configuration>
   </plugin>

   <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.6</version>
    <configuration>
     <outputDirectory>D:\Project\apache-tomcat-8.5.23\webapps\</outputDirectory>
     <failOnMissingWebXml>false</failOnMissingWebXml>
    </configuration>
   </plugin>

   <plugin>
    <groupId>org.apache.tomcat.maven</groupId>
    <artifactId>tomcat8-maven-plugin</artifactId>
    <version>2.0</version>
   </plugin>
  </plugins>
 </build>

 <dependencies>
  <dependency>
   <groupId>commons-codec</groupId>
   <artifactId>commons-codec</artifactId>
   <version>${commons-codec.version}</version>
  </dependency>

  <dependency>
   <groupId>commons-logging</groupId>
   <artifactId>commons-logging</artifactId>
   <version>${commons-logging.version}</version>
  </dependency>

  <dependency>
   <groupId>org.apache.commons</groupId>
   <artifactId>commons-lang3</artifactId>
   <version>${commons-lang3.version}</version>
  </dependency>

  <dependency>
   <groupId>log4j</groupId>
   <artifactId>log4j</artifactId>
   <version>${log4j.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-context</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-core</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-beans</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-jdbc</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-aop</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-context-support</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-tx</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-expression</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-aspects</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-orm</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-webmvc</artifactId>
   <version>${spring.version}</version>
  </dependency>

  <dependency>
   <groupId>org.postgresql</groupId>
   <artifactId>postgresql</artifactId>
   <version>${postgresql.version}</version>
  </dependency>

  <dependency>
   <groupId>c3p0</groupId>
   <artifactId>c3p0</artifactId>
   <version>${c3p0.version}</version>
  </dependency>


  <dependency>
   <groupId>javax.servlet</groupId>
   <artifactId>javax.servlet-api</artifactId>
   <version>${servlet-api.version}</version>
  </dependency>

  <dependency>
   <groupId>javax.servlet.jsp</groupId>
   <artifactId>javax.servlet.jsp-api</artifactId>
   <version>${jsp-api.version}</version>
  </dependency>

  <dependency>
   <groupId>com.sun.faces</groupId>
   <artifactId>jsf-impl</artifactId>
   <version>${jsf-impl.version}</version>
  </dependency>

  <dependency>
   <groupId>com.sun.faces</groupId>
   <artifactId>jsf-api</artifactId>
   <version>${jsf-api.version}</version>
  </dependency>

  <dependency>
   <groupId>javax.servlet</groupId>
   <artifactId>jstl</artifactId>
   <version>${jstl.version}</version>
  </dependency>

  <dependency>
   <groupId>org.primefaces</groupId>
   <artifactId>primefaces</artifactId>
   <version>${primefaces.version}</version>
  </dependency>

  <dependency>
   <groupId>org.primefaces.themes</groupId>
   <artifactId>all-themes</artifactId>
   <version>${theme.version}</version>
  </dependency>

  <dependency>
   <groupId>org.glassfish.web</groupId>
   <artifactId>el-impl</artifactId>
   <version>${el-impl.version}</version>
  </dependency>

 </dependencies>

</project>



Inside WEB-INF Folder create web.xml and faces-config.xml:


web.xml  

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 id="WebApp_ID" version="3.1">
 <welcome-file-list>
  <welcome-file>index.xhtml</welcome-file>
 </welcome-file-list>
 <context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
 </context-param>
 <context-param>
  <param-name>javax.faces.PROJECT_STAGE</param-name>
  <param-value>Production</param-value>
 </context-param>
 <context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>start</param-value>
 </context-param>
 <context-param>
  <param-name>primefaces.FONT_AWESOME</param-name>
  <param-value>true</param-value>
 </context-param>
 <context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:applicationContext.xml</param-value>
 </context-param>
 <listener>
  <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
 </listener>
 <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>
 </servlet>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
 </servlet-mapping>

</web-app>


faces-config.xml 

<?xml version="1.0" encoding="utf-8"?>
<faces-config version="2.0" 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://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

  
 <application>
   
        <el-resolver>        
                org.springframework.web.jsf.el.SpringBeanFacesELResolver
        </el-resolver>
    </application>
    

</faces-config>



Configure Apache log4j to the Project

log4j.properties file

log4j.rootLogger=INFO, CA, FA
 
#Console Appender
log4j.appender.CA=org.apache.log4j.ConsoleAppender
log4j.appender.CA.layout=org.apache.log4j.PatternLayout
log4j.appender.CA.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss}-%x-%-5p-%c{5}:%m%n
 
#File Appender
log4j.appender.FA=org.apache.log4j.FileAppender
log4j.appender.FA.File=D:/Project/Logs/system.log
log4j.appender.FA.layout=org.apache.log4j.PatternLayout
log4j.appender.FA.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss}-%x-%-5p-%c{5}:%m%n
log4j.appender.FA.Threshold = INFO



Creating Primefaces Dynamic Menu: 

package com.menu;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.DefaultSubMenu;
import org.primefaces.model.menu.MenuModel;

@ManagedBean(name = "DynamicMenu")
@SessionScoped
public class DynamicMenu {

 private MenuModel menuModel;

 public DynamicMenu() throws Exception {
  generateMenuModel();
 }

 public void generateMenuModel() {
  try {

   DefaultSubMenu mainMenu = null;

   DefaultMenuItem item = null;

   menuModel = new DefaultMenuModel();

   mainMenu = new DefaultSubMenu("Employee Crud");

   item = new DefaultMenuItem("Create Employee");
   item.setUrl("/pages/create-employee.xhtml?param=create");
   item.setIcon("ui-icon-disk");
   item.setAjax(false);
   mainMenu.addElement(item);

   item = new DefaultMenuItem("Modify Employee");
   item.setUrl("/pages/modify-employee.xhtml?param=modify");
   item.setIcon("ui-icon-check");
   item.setAjax(false);
   mainMenu.addElement(item);

   item = new DefaultMenuItem("Delete Employee");
   item.setUrl("/pages/delete-employee.xhtml?param=delete");
   item.setIcon("ui-icon-search");
   item.setAjax(false);
   mainMenu.addElement(item);

   item = new DefaultMenuItem("Search Employee");
   item.setUrl("/pages/search-employee.xhtml?param=search");
   item.setIcon("ui-icon-close");
   item.setAjax(false);
   mainMenu.addElement(item);

   menuModel.addElement(mainMenu);

  } catch (Exception e) {

   FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Internal Error", "");
   FacesContext.getCurrentInstance().addMessage(null, msg);
  }
 }

 public MenuModel getMenuModel() {
  return menuModel;
 }

 public void setMenuModel(MenuModel menuModel) {
  this.menuModel = menuModel;
 }
}


Creating Employee crud Pages In pages folder:

 create-employee.xhtml
  

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">

 <ui:define name="content">
  <div class="ui-fluid">
   <div class="ui-g">
    <div class="ui-g-12">
     <div class="card card-w-title ui-shadow-5">

      <h1>Create Employee</h1>

      <p:panel>
       <div class="ui-g">
        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="name" value="Name: *" />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:inputText id="name" autocomplete="off"
          value="#{employeeBean.employee.empName}" />
        </div>

        <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="age" value="Age: " />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:inputText id="age" autocomplete="off"
          value="#{employeeBean.employee.age}" />
        </div>
       </div>

       <div class="ui-g">
        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="email" value="Email : " />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:inputText id="email" autocomplete="off"
          value="#{employeeBean.employee.email}" />
        </div>

        <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="mobNo" value="Mobile #: *" />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:inputText id="mobNo" autocomplete="off"
          value="#{employeeBean.employee.mobileNo}" />
        </div>
       </div>

       <div class="ui-g">
        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="nic" value="NIC #:*" />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:inputText id="nic" autocomplete="off"
          value="#{employeeBean.employee.nic}" />
        </div>

        <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="dob" value="Date of Birth:" />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:calendar id="dob" navigator="true" timeZone="GMT+5:30"
          pattern="dd-MMM-yyyy" yearRange="c-50:c" display="inline"
          autocomplete="off" value="#{employeeBean.employee.dob}">
          <p:ajax event="dateSelect" />
         </p:calendar>
        </div>
       </div>

       <div class="ui-g">
        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="gender" value="Gender:" />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:selectOneRadio id="gender"
          value="#{employeeBean.employee.gender}">
          <f:selectItem itemLabel="Male" itemValue="M" />
          <f:selectItem itemLabel="Female" itemValue="F" />
         </p:selectOneRadio>
        </div>

        <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="maritalState" value="Marital State: " />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:selectOneRadio id="maritalState"
          value="#{employeeBean.employee.maritalState}">
          <f:selectItem itemLabel="Married" itemValue="Y" />
          <f:selectItem itemLabel="Single" itemValue="N" />
         </p:selectOneRadio>
        </div>
       </div>

       <div class="ui-g">
        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="slctCountry" value="Country: " />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:selectOneMenu id="slctCountry" autoWidth="false"
          filter="true" filterMatchMode="contains"
          value="#{employeeBean.countryId}">
          <p:ajax listener="#{employeeBean.onCountryChange}"
           update="slctCty" />
          <f:selectItem itemLabel="Select One" itemValue="" />
          <f:selectItems value="#{employeeBean.countryList}"
           var="country" itemLabel="#{country.name}"
           itemValue="#{country.countryId}" />
         </p:selectOneMenu>
        </div>

        <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

        <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
         <h:outputLabel for="slctCty" value="City: " />
        </div>
        <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
         <p:selectOneMenu id="slctCty" autoWidth="false" filter="true"
          filterMatchMode="contains" value="#{employeeBean.cityId}">
          <p:ajax listener="#{employeeBean.onCityChange}" />
          <f:selectItem itemLabel="Select One" itemValue="" />
          <f:selectItems value="#{employeeBean.cityList}" var="city"
           itemLabel="#{city.name}" itemValue="#{city.cityId}" />
         </p:selectOneMenu>
        </div>
       </div>
      </p:panel>

      <p:spacer width="1%" height="1%" />

      <div class="ui-g">
       <div class="ui-g-12 ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2">
        <p:commandButton id="btnSubmit" value="Submit"
         styleClass="green-btn" style="margin-bottom:10px;"
         actionListener="#{employeeBean.save}"
         update=":contentForm:growl name age email mobNo nic dob gender maritalState slctCountry slctCty" />
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </ui:define>
</ui:composition>




modify-employee.xhtml
  
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">

 <ui:define name="content">
  <div class="ui-fluid">
   <div class="ui-g">
    <div class="ui-g-12">
     <div class="card card-w-title ui-shadow-5">

      <h1>Modify Employee</h1>

      <p:dataTable id="table" var="employee"
       value="#{employeeBean.empList}" rowKey="#{employee.empId}"
       filteredValue="#{employeeBean.filteredList}"
       emptyMessage="No data found with given criteria" rows="10"
       resizableColumns="false" reflow="true" paginator="true"
       paginatorPosition="bottom"
       paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

       <p:column headerText="Name" filterBy="#{employee.empName}"
        sortBy="#{employee.empName}" filterMatchMode="contains">
        <h:outputText value="#{employee.empName}" />
       </p:column>

       <p:column headerText="Email" filterBy="#{employee.email}"
        sortBy="#{employee.email}" filterMatchMode="contains">
        <h:outputText value="#{employee.email}" />
       </p:column>

       <p:column headerText="Mobile #" filterBy="#{employee.mobileNo}"
        sortBy="#{employee.mobileNo}" filterMatchMode="contains">
        <h:outputText value="#{employee.mobileNo}" />
       </p:column>

       <p:column headerText="NIC" filterBy="#{employee.nic}"
        sortBy="#{employee.nic}" filterMatchMode="contains">
        <h:outputText value="#{employee.nic}" />
       </p:column>

       <p:column headerText="Gender" filterBy="#{employee.gender}"
        sortBy="#{employee.gender}" filterMatchMode="contains">
        <h:outputText value="#{employee.gender}" />
       </p:column>

       <p:column headerText="Modify" style="text-align: center">
        <p:commandButton oncomplete="PF('Dialog').show()" title="Modify"
         styleClass="orange-btn" value="Modify"
         update=":contentForm:panelInfo :contentForm:btnModify">
         <f:setPropertyActionListener value="#{employee}"
          target="#{employeeBean.employee}" />
        </p:commandButton>
       </p:column>

      </p:dataTable>


      <p:dialog widgetVar="Dialog" modal="false" closeOnEscape="true"
       draggable="false" position="center center center center"
       showEffect="drop" hideEffect="drop" resizable="false"
       responsive="true" fitViewport="true" width="80%" height="500px">
       <div class="ui-fluid">
        <div class="ui-g">
         <div class="ui-g-12">
          <div class="card card-w-title ui-shadow-3">

           <p:panel id="panelInfo">
            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="name" value="Name: *" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="name" autocomplete="off"
               value="#{employeeBean.employee.empName}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="age" value="Age: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="age" autocomplete="off"
               value="#{employeeBean.employee.age}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="email" value="Email : " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="email" autocomplete="off"
               value="#{employeeBean.employee.email}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="mobNo" value="Mobile #: *" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="mobNo" autocomplete="off"
               value="#{employeeBean.employee.mobileNo}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="nic" value="NIC #:*" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="nic" autocomplete="off"
               value="#{employeeBean.employee.nic}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="dob" value="Date of Birth:" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:calendar id="dob" navigator="true" timeZone="GMT+5:30"
               pattern="dd-MMM-yyyy" yearRange="c-50:c" display="inline"
               autocomplete="off" value="#{employeeBean.employee.dob}">
               <p:ajax event="dateSelect" />
              </p:calendar>
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="gender" value="Gender:" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:selectOneRadio id="gender"
               value="#{employeeBean.employee.gender}">
               <f:selectItem itemLabel="Male" itemValue="M" />
               <f:selectItem itemLabel="Female" itemValue="F" />
              </p:selectOneRadio>
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="maritalState" value="Marital State: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:selectOneRadio id="maritalState"
               value="#{employeeBean.employee.maritalState}">
               <f:selectItem itemLabel="Married" itemValue="Y" />
               <f:selectItem itemLabel="Single" itemValue="N" />
              </p:selectOneRadio>
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="slctCountry" value="Country: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:selectOneMenu id="slctCountry" autoWidth="false"
               filter="true" filterMatchMode="contains"
               value="#{employeeBean.countryId}">
               <p:ajax listener="#{employeeBean.onCountryChange}"
                update="slctCty" />
               <f:selectItem itemLabel="Select One" itemValue="" />
               <f:selectItems value="#{employeeBean.countryList}"
                var="country" itemLabel="#{country.name}"
                itemValue="#{country.countryId}" />
              </p:selectOneMenu>
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="slctCty" value="City: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:selectOneMenu id="slctCty" autoWidth="false"
               filter="true" filterMatchMode="contains"
               value="#{employeeBean.cityId}">
               <p:ajax listener="#{employeeBean.onCityChange}" />
               <f:selectItem itemLabel="Select One" itemValue="" />
               <f:selectItems value="#{employeeBean.cityList}"
                var="city" itemLabel="#{city.name}"
                itemValue="#{city.cityId}" />
              </p:selectOneMenu>
             </div>
            </div>
           </p:panel>

           <p:spacer width="1%" height="1%" />

           <div class="ui-g">
            <div class="ui-g-12 ui-sm-12 ui-md-6 ui-lg-2 ui-xl-2">
             <p:commandButton id="btnModify" value="Modify"
              styleClass="green-btn" style="margin-bottom:10px;"
              actionListener="#{employeeBean.modify}"
              update=":contentForm:growl name age email mobNo nic dob gender maritalState slctCountry slctCty btnModify" />
            </div>

            <div class="ui-g-12 ui-sm-12 ui-md-6 ui-lg-2 ui-xl-2">
             <p:commandButton value="Exit" process="@none"
              styleClass="red-btn" onclick="PF('Dialog').hide()"
              style="margin-bottom:10px;" />
            </div>
           </div>

          </div>
         </div>
        </div>
       </div>
      </p:dialog>

     </div>
    </div>
   </div>
  </div>
 </ui:define>
</ui:composition>




delete-employee.xhtml
  
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">

 <ui:define name="content">
  <div class="ui-fluid">
   <div class="ui-g">
    <div class="ui-g-12">
     <div class="card card-w-title ui-shadow-5">

      <h1>Delete Employee</h1>

      <p:dataTable id="table" var="employee"
       value="#{employeeBean.empList}" rowKey="#{employee.empId}"
       filteredValue="#{employeeBean.filteredList}"
       selection="#{employeeBean.selectedEmpList}"
       emptyMessage="No data found with given criteria" rows="10"
       resizableColumns="false" reflow="true" paginator="true"
       paginatorPosition="bottom"
       paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

       <p:column headerText="Name" filterBy="#{employee.empName}"
        sortBy="#{employee.empName}" filterMatchMode="contains">
        <h:outputText value="#{employee.empName}" />
       </p:column>

       <p:column headerText="Email" filterBy="#{employee.email}"
        sortBy="#{employee.email}" filterMatchMode="contains">
        <h:outputText value="#{employee.email}" />
       </p:column>

       <p:column headerText="Mobile #" filterBy="#{employee.mobileNo}"
        sortBy="#{employee.mobileNo}" filterMatchMode="contains">
        <h:outputText value="#{employee.mobileNo}" />
       </p:column>

       <p:column headerText="NIC" filterBy="#{employee.nic}"
        sortBy="#{employee.nic}" filterMatchMode="contains">
        <h:outputText value="#{employee.nic}" />
       </p:column>

       <p:column headerText="Gender" filterBy="#{employee.gender}"
        sortBy="#{employee.gender}" filterMatchMode="contains">
        <h:outputText value="#{employee.gender}" />
       </p:column>

       <p:column headerText="Select" selectionMode="multiple"
        style="text-align:center;" />

       <f:facet name="footer">
        <p:commandButton value="Delete" styleClass="red-btn"
         style="width:auto;" actionListener="#{employeeBean.delete}"
         update=":contentForm:growl, table">
         <p:confirm header="Confirmation"
          message="Are you sure want to delete this item(s)?" />
        </p:commandButton>
       </f:facet>

      </p:dataTable>


      <p:confirmDialog global="true" showEffect="drop" hideEffect="drop"
       closeOnEscape="true" responsive="true">

       <p:commandButton value="Yes" type="button"
        styleClass="ui-confirmdialog-yes red" icon="ui-icon-check" />

       <p:commandButton value="No" type="button"
        styleClass="ui-confirmdialog-no green" icon="ui-icon-close" />

      </p:confirmDialog>

     </div>
    </div>
   </div>
  </div>
 </ui:define>
</ui:composition>





search-employee.xhtml
  
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">

 <ui:define name="content">
  <div class="ui-fluid">
   <div class="ui-g">
    <div class="ui-g-12">
     <div class="card card-w-title ui-shadow-5">

      <h1>Search Employee</h1>

      <p:dataTable id="table" var="employee"
       value="#{employeeBean.empList}" rowKey="#{employee.empId}"
       filteredValue="#{employeeBean.filteredList}"
       emptyMessage="No data found with given criteria" rows="10"
       resizableColumns="false" reflow="true" paginator="true"
       paginatorPosition="bottom"
       paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

       <p:column headerText="Name" filterBy="#{employee.empName}"
        sortBy="#{employee.empName}" filterMatchMode="contains">
        <h:outputText value="#{employee.empName}" />
       </p:column>

       <p:column headerText="Email" filterBy="#{employee.email}"
        sortBy="#{employee.email}" filterMatchMode="contains">
        <h:outputText value="#{employee.email}" />
       </p:column>

       <p:column headerText="Mobile #" filterBy="#{employee.mobileNo}"
        sortBy="#{employee.mobileNo}" filterMatchMode="contains">
        <h:outputText value="#{employee.mobileNo}" />
       </p:column>

       <p:column headerText="NIC" filterBy="#{employee.nic}"
        sortBy="#{employee.nic}" filterMatchMode="contains">
        <h:outputText value="#{employee.nic}" />
       </p:column>

       <p:column headerText="Gender" filterBy="#{employee.gender}"
        sortBy="#{employee.gender}" filterMatchMode="contains">
        <h:outputText value="#{employee.gender}" />
       </p:column>

       <p:column headerText="More Info" style="text-align: center">
        <p:commandButton oncomplete="PF('Dialog').show()"
         title="More Info" value="View" styleClass="orange-btn"
         update=":contentForm:panelInfo">
         <f:setPropertyActionListener value="#{employee}"
          target="#{employeeBean.employee}" />
        </p:commandButton>
       </p:column>

      </p:dataTable>


      <p:dialog header="Employee Information" widgetVar="Dialog"
       modal="false" closeOnEscape="true" draggable="false"
       position="center center center center" showEffect="drop"
       hideEffect="drop" resizable="false" responsive="true"
       fitViewport="true" width="80%" height="500px">
       <div class="ui-fluid">
        <div class="ui-g">
         <div class="ui-g-12">
          <div class="card card-w-title ui-shadow-3">

           <p:panel id="panelInfo">
            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="name" value="Name: *" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="name" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.empName}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="age" value="Age: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="age" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.age}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="email" value="Email : " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="email" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.email}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="mobNo" value="Mobile #: *" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="mobNo" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.mobileNo}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="nic" value="NIC #:*" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="nic" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.nic}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="dob" value="Date of Birth:" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="dob" autocomplete="off" readonly="true"
               value="#{employeeBean.employee.dob}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="gender" value="Gender:" />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="gender" autocomplete="off"
               readonly="true" value="#{employeeBean.employee.gender}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="maritalState" value="Marital State: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="maritalState" autocomplete="off"
               readonly="true"
               value="#{employeeBean.employee.maritalState}" />
             </div>
            </div>

            <div class="ui-g">
             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="slctCountry" value="Country: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="slctCountry" autocomplete="off"
               readonly="true"
               value="#{employeeBean.employee.country.name}" />
             </div>

             <div class="ui-g-1 ui-sm-1 ui-md-1 ui-lg-1 ui-xl-1"></div>

             <div class="ui-g-2 ui-sm-3 ui-md-2 ui-lg-2 ui-xl-2">
              <h:outputLabel for="slctCty" value="City: " />
             </div>
             <div class="ui-g-3 ui-sm-8 ui-md-3 ui-lg-3 ui-xl-3">
              <p:inputText id="slctCty" autocomplete="off"
               readonly="true"
               value="#{employeeBean.employee.city.name}" />
             </div>
            </div>

            <p:spacer width="1%" height="1%" />

            <div class="ui-g">
             <div class="ui-g-12 ui-sm-12 ui-md-3 ui-lg-2 ui-xl-2">
              <p:commandButton value="Exit" process="@none"
               styleClass="red-btn" onclick="PF('Dialog').hide()"
               style="margin-bottom:10px;" />
             </div>
            </div>
           </p:panel>

          </div>
         </div>
        </div>
       </div>
      </p:dialog>

     </div>
    </div>
   </div>
  </div>
 </ui:define>
</ui:composition>


In the next Session will talk about how to create persistance layer, service layer and bean.








Comments

Post a Comment