Spring Boot MVC Application - UI

-
Here we are going to see UI part of the CRUD Project.

In every project, we have the main header and footer file so that every time our header and footer will be the same, We will only change the middle part as per user performed operation.

As we are going to use the Bootstrap file for UI design, You need to add bootstrap.min.css file from their official link.

SpringMVCProject/src/main/webapp/views/header.jsp

<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="views/styles/bootstrap.min.css">
<title>Employee Management System</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<br/>

SpringMVCProject/src/main/webapp/views/footer.jsp 

<br/>
<div class="jumbotron">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>
</body>
</html>

The Homepage will come as the front page, and on every operation, it will redirect to us on the front page with success or error message.

SpringMVCProject/src/main/webapp/views/Homepage.jsp

<%@ include file="header.jsp" %>
<div class="container">
<c:if test="${successMsg!=null}">
 <h2><c:out value="${successMsg}"></c:out></h2>
</c:if>
<br/>
<a href="getAllEmployee" type="button" class="btn btn-primary" >Get All Employee List</a>
<br/>
</div>
<%@ include file="footer.jsp" %>

To show employees details we need the below page. On this page we have all links to add new employees, update employee details, and delete employees.

SpringMVCProject/src/main/webapp/views/employeeview.jsp

<%@ include file="header.jsp" %>
<div class="container">
<table class="table table-hover">
<thead>
<tr class="table-primary"><th scope="col">Employee ID</th><th scope="col">Name</th><th scope="col">Department</th></tr>
</thead>
<c:forEach items="${employeeList}" var="employee">
<tbody>
    <tr>
        <td> <c:out value="${employee.empId}"/></td>
        <td> <c:out value="${employee.empName}"/></td>  
        <td> <c:out value="${employee.deptName}"/> </td>
    </tr>
</tbody>
</c:forEach>
</table>
<br/>
<a href="addNewEmployee" type="button" class="btn btn-primary" >Add New Employee</a>
<br/>
<form action="employee">
<div class="form-group">
<label for="empId">Enter Employee Id :</label> 
<input class="form-control" id="empId" type="text" name="empId"/>
</div>
<input type="submit" value="Find Employee By Id" class="btn btn-primary"/>
</form>
</div>
<%@ include file="footer.jsp" %>

Here we need one page to show individual employee details with individual operations like update and delete an employee.

SpringMVCProject/src/main/webapp/views/EmployeeOperation.jsp

<%@ include file="header.jsp" %>
<div class="container">

<table class="table table-hover">
<thead>
<tr class="table-primary"><th scope="col">Employee ID</th><th scope="col">Name</th><th scope="col">Department</th></tr>
</thead>
<tbody>
<tr>
 <td> <c:out value="${employeeData.empId}"/></td>
    <td> <c:out value="${employeeData.empName}"/></td>  
    <td> <c:out value="${employeeData.deptName}"/> </td>
</tr>
</tbody>
</table>
<br/>
<form method="post" action="updateEmployee">
<input type="hidden" name="empId" value="${employeeData.empId}" />
<input type="submit" value="Update Employee" class="btn btn-primary"/>
</form>
<br/>
<form action="deleteEmployee">
<input type="hidden" name="empId" value="${employeeData.empId}" />
<input type="submit" value="Delete Employee" class="btn btn-primary"/>
</form>
</div>
<%@ include file="footer.jsp" %>

To add new employees we are going to use the below page.

SpringMVCProject/src/main/webapp/views/NewEmployee.jsp

 
<%@ include file="header.jsp" %>
<div class="container">
<form:form action="addEmployeeDetails" method="post" modelAttribute="employee">
<fieldset>
<div class="form-group">
  <label class="col-form-label" for="empName">Employee Name:</label>
    <form:input path="empName" class="form-control"/>
 <form:errors path="empName" class="form-control"/><br/>
</div>
<div class="form-group">
  <label class="col-form-label" for="deptName">Department Name:</label>
  <form:input path="deptName" class="form-control"/>
 <form:errors path="deptName" class="form-control"/>
</div>
</fieldset>
<input type="submit" value="Add Employee" class="btn btn-primary"/>
</form:form>
</div>
<%@ include file="footer.jsp" %>

For updating employee detail we are going to use the below page.

SpringMVCProject/src/main/webapp/views/updateEmployeePage.jsp

<%@ include file="header.jsp" %>
<div class="container">
<h2>To Update Employee</h2>
<form:form action="updateEmployeeDetails" method="post" modelAttribute="employeeDetails">
<fieldset>
<form:input type="hidden" path="empId" value="${employeeDetails.empId}"/>     
<div class="form-group">
  <label class="col-form-label" for="empName">Employee Name:</label>
    <form:input path="empName" value="${employeeDetails.empName}" class="form-control"/>
 <form:errors path="empName" class="form-control"/><br/>
</div>
<div class="form-group">
  <label class="col-form-label" for="deptName">Department Name:</label>
  <form:input path="deptName" value="${employeeDetails.deptName}" class="form-control"/>
 <form:errors path="deptName" class="form-control"/>
</div>
</fieldset>
<input type="submit" value="update Employee" class="btn btn-primary"/>
</form:form>
</div>
<%@ include file="footer.jsp" %>

The last file we need in this project is the application.properties, where we are going to define server port and database related properties and many more.

SpringMVCProject/src/main/resources/application.properties

server.port=9091

spring.mvc.view.prefix=/views/
spring.mvc.view.suffix=.jsp

#Database properties
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe
spring.datasource.username=system
spring.datasource.password=root

#hibernate properties
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.Oracle9iDialect
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.show_sql=true

The above database properties are for oracle, so you need to add an oracle jar explicitly.
Now your application is ready to run, check all the operations.

Please let me know in-case of any issue.

Youtube video link for your reference.



Comments

Post a Comment

Popular posts from this blog

How to read XLS and XLSX Excel files in Java

-
Image
Sometimes we get requirements like to load XLS or XLSX files in Java Project. Where need to convert each column and row values in Java Objects using POJO class. To make this project we need a POJO class of columns present in the CSV file. In this tutorial, we are going to use the Customer details XLS and XLSX file as below. Here we have a Customer ID, Name, City, Pincode, and State Code. We may have more than that data and might be there are multiple fields that are blank. So ID-103 having Customer Name - Geetha having blank City name, same with others as well for other fields. We are going to handle these scenarios as well using the try-catch block. In the beginning, we need to add some dependencies in pom.xml for XLS and XLSX files. <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&q
Read more

How to Read CSV File in Java

-
Image
Sometimes we get requirements like to load CSV files in Java Project. Where need to convert each column and row values in Java Objects using POJO class. The CSV stands for Comma-Separated Values, this is a very simple file where each element are separated by comma(,). CSV can be directly open in any text editor or in Microsoft Excel. To make this project we need a POJO class of columns present in the CSV file. In this tutorial, we are going to use the Customer details CSV file as below. Here we have a Customer ID, Name, City, Pincode, and State Code. We may have more than that data and might be there are multiple fields that are blank. So ID-103 having Customer Name - Geetha having blank City name, same with others as well for other fields. We are going to handle these scenarios as well using the try-catch block. In the beginning, we will create a Customer Pojo class as below. File Location: src/com/slash/code/ Customer.java package com.slash.code; public
Read more

SQLite Database CRUD Operation in Ionic 4

-
Image
Student Management Application:  SQLite Database CRUD Operation in Ionic 4 Let's start with this project. Install node.js in your system Go to link -  https://nodejs.org/en/  and install the latest version of ndoe.js After installing,    Check npm is working properly using the Command Prompt -    C:\Users\admin> npm -version    6.10.2 Install Ionic in your system Open Command Prompt and run below command.   npm install -g ionic Run below command before going ahead.   ionic start sqlLiteExample sidemenu   cd sqlLiteExample   ionic g service services/database   ionic g page pages/students   ionic g page pages/student   npm install @ionic-native/sqlite @ionic-native/sqlite-porter   ionic cordova plugin add cordova-sqlite-storage   ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter You need a SQL script file to create a database and table. Open your application in file explorer and create studentScript.sql in assets direc
Read more