In browser i couldn't get Boot Strap tables instead i get white label error - spring-boot

Question

In Spring Boot, earlier, I've created Employee Management System Table with 4 Columns -> firtsname, lastname, email and Actions column where it has Update&Delete Buttons. now, I've added extra 3 Columns -> gender, birthday, skill. Everything works fine, there is no compilation Errors and console errors but when i hit the browser i get whitelabel error. can anyone please give me a solution for this problem.
1.Employee Entity.Class
package com.employee.entity;
import java.util.Date;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
#Entity
#Table(name = "employees")
public class Employee
{
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
private String firstname;
private String lastname;
private String email;
private String gender;
private Date birthday;
private String skill;
public Employee() {
}
public Employee(long id, String firstname, String lastname, String email, String gender, Date birthday,
String skill) {
super();
this.id = id;
this.firstname = firstname;
this.lastname = lastname;
this.email = email;
this.gender = gender;
this.birthday = birthday;
this.skill = skill;
}
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getSkill() {
return skill;
}
public void setSkill(String skill) {
this.skill = skill;
}
}
2.EmployeeController.class
package com.employee.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import com.employee.entity.Employee;
import com.employee.service.EmployeeService;
#Controller // Controller Layer holds all Spring MVC Controllers
public class EmployeeController
{
private EmployeeService employeeService;
public EmployeeController(EmployeeService employeeService) {
super();
this.employeeService = employeeService;
}
#GetMapping("/employees")
public String listEmployess(Model model)
{
model.addAttribute("employees", employeeService.getAllEmployees());
return "employees";
}
#GetMapping("/employees/new")
public String createEmployeeForm(Model model)
{
//Create empty employee object to hold employee form data
Employee employee = new Employee();
model.addAttribute("employee", employee);
return "create_employee";
}
#PostMapping("/employees")
public String saveEmployee(#ModelAttribute("employee") Employee employee)
{
employeeService.saveEmployee(employee);
return "redirect:/employees";
}
#GetMapping("/employees/edit/{id}")
public String editEmployeeForm(#PathVariable Long id, Model model)
{
model.addAttribute("employee", employeeService.getEmployeeById(id));
return "edit_employee";
}
#PostMapping("/employees/{id}")
public String updateEmployee(#PathVariable Long id, #ModelAttribute("employee") Employee employee, Model model)
{
// get employee from database by id
Employee existingEmployee = employeeService.getEmployeeById(id);
//existingEmployee.setId(id);
existingEmployee.setFirstname(employee.getFirstname());
existingEmployee.setLastname(employee.getLastname());
existingEmployee.setEmail(employee.getEmail());
existingEmployee.setGender(employee.getGender());
existingEmployee.setBirthday(employee.getBirthday());
existingEmployee.setSkill(employee.getSkill());
// save updated employee object
employeeService.updateEmployee(existingEmployee);
return "redirect:/employees";
}
#GetMapping("/employees/{id}")
public String deleteEmployee(#PathVariable Long id)
{
employeeService.deleteEmployeeById(id);
return "redirect:/employees";
}
}
3.EmployeeRepository.interface
package com.employee.repository;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.employee.entity.Employee;
#Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long>
{
}
4.EmployeeService.interface
package com.employee.service;
import java.util.List;
import com.employee.entity.Employee;
public interface EmployeeService
{
public List<Employee> getAllEmployees();
Employee saveEmployee(Employee employee);
Employee getEmployeeById(Long id);
Employee updateEmployee(Employee employee);
void deleteEmployeeById(Long id);
}
5.EmployeeServiceImpl.class
package com.employee.service.impl;
import java.util.List;
import org.springframework.stereotype.Service;
import com.employee.entity.Employee;
import com.employee.repository.EmployeeRepository;
import com.employee.service.EmployeeService;
#Service
public class EmployeeServiceImpl implements EmployeeService
{
private EmployeeRepository employeeRepository;
public EmployeeServiceImpl(EmployeeRepository employeeRepository) {
super();
this.employeeRepository = employeeRepository;
}
#Override
public List<Employee> getAllEmployees()
{
return employeeRepository.findAll();
}
#Override
public Employee saveEmployee(Employee employee)
{
return employeeRepository.save(employee);
}
#Override
public Employee getEmployeeById(Long id) {
return employeeRepository.findById(id).get();
}
#Override
public Employee updateEmployee(Employee employee) {
return employeeRepository.save(employee);
}
#Override
public void deleteEmployeeById(Long id)
{
employeeRepository.deleteById(id);
}
}
6.application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/ems?useSSL=false&serverTime=UTC&useLegacyDatetimeCode=false
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=1441
server.port=8097
#spring.jpa.database-platform = org.hibernate.dialect.MySQL5Dialect
#spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
spring.thymeleaf.check-template=true
spring.thymeleaf.check-template-location=true
spring.thymeleaf.enabled=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5InnoDBDialect
debug=true
logging.level.org.hibernate.SQL=DEBUG
#logging.level.<package_name>=<LOGGING_LEVEL>
#logging.level.org.springframework.context=DEBUG
spring.profiles.active=#spring.profiles.active#
spring.jpa.open-in-view=false
logging.level.org.springframework.boot.autoconfigure=ERROR
7.employees.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Employee Management System</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" th:href="#{/employees}">Employee Management</a>
</li>
</ul>
</div>
</nav>
<div class ="container">
<div class = "row">
<h1> List Employees </h1>
</div>
<div class = "row" >
<div class = "col-lg-3">
<a th:href = "#{/employees/new}" class = "btn btn-primary btn-sm mb-3"> Add Employee</a>
</div>
</div>
<table class = "table table-striped table-bordered" >
<thead class = "table-dark">
<tr>
<th> Employee First Name </th>
<th> Employee Last Name </th>
<th> Employee Email </th>
<th> Employee Gender </th>
<th> Employee Birthday </th>
<th> Employee Skill </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr th:each = "employee : ${employees}">
<td th:text = "${employee.firstname}"></td>
<td th:text = "${employee.lastname}"></td>
<td th:text = "${employee.email}"></td>
<td th:text = "${employee.gender}"></td>
<td th:text = "${employee.birthday}"></td>
<td th:text = "${employee.skill}"></td>
<td>
<a th:href = "#{/employees/edit/{id}(id=${employee.id})}"
class = "btn btn-primary">Update</a>
<a th:href = "#{/employees/{id}(id=${employee.id})}"
class = "btn btn-danger">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
8.create_employee.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee Management System</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Employee Management System</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" th:href="#{/employees}">Employee Management</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<div class = "container">
<div class = "row">
<div class = "col-lg-6 col-md-6 col-sm-6 container justify-content-center-center card">
<h1 class = "text-center"> Create New Employee </h1>
<div class = "card-body" >
<form th:action="#{/employees}" th:object = "${employee}" method="POST">
<div class = "form-group">
<label> Employee First Name </label>
<input
type = "text"
name = "firstname"
th:field = "*{firstname}"
class = "form-control"
placeholder = "Enter Employee First Name"
/>
</div>
<div class = "form-group">
<label> Employee Last Name </label>
<input
type = "text"
name = "lastname"
th:field = "*{lastname}"
class = "form-control"
placeholder = "Enter Employee Last Name"
/>
</div>
<div class = "form-group">
<label> Employee Email </label>
<input
type = "text"
name = "email"
th:field = "*{email}"
class = "form-control"
placeholder = "Enter Employee Email"
/>
</div>
<div class = "form-group">
<label> Employee Gender </label>
<input type="radio" th:field="*{gender}" value="Male" />Male
<input type="radio" th:field="*{gender}" value="Female" />Female
<input
type = "radio"
name = "gender"
th:field = "*{gender}"
class = "form-control"
/>
</div>
<div class = "form-group">
<label> Employee Birthday </label>
<input type="date" th:field="*{birthday}" />
<input
type = "date"
name = "birthday"
th:field = "*{birthday}"
class = "form-control"
/>
</div>
<div class = "form-group">
<label> Employee Skill </label>
<input
type = "text"
name = "skill"
th:field = "*{skill}"
class = "form-control"
placeholder = "Enter Employee Skill"
/>
</div>
<div class = "box-footer">
<button type="submit" class = "btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
9.edit_employee.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee Management System</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Employee Management System</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" th:href="#{/employees}">Employee Management</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<div class = "container">
<div class = "row">
<div class = "col-lg-6 col-md-6 col-sm-6 container justify-content-center-center card">
<h1 class = "text-center"> Create New Employee </h1>
<div class = "card-body" >
<form th:action="#{/employees/{id} (id=${employee.id})}" th:object = "${employee}" method="POST">
<div class = "form-group">
<label> Employee First Name </label>
<input
type = "text"
name = "firstname"
th:field = "*{firstname}"
class = "form-control"
placeholder = "Enter Employee First Name"
/>
</div>
<div class = "form-group">
<label> Employee Last Name </label>
<input
type = "text"
name = "lastname"
th:field = "*{lastname}"
class = "form-control"
placeholder = "Enter Employee Last Name"
/>
</div>
<div class = "form-group">
<label> Employee Email </label>
<input
type = "text"
name = "email"
th:field = "*{email}"
class = "form-control"
placeholder = "Enter Employee Email"
/>
</div>
<div class = "form-group">
<label> Employee Gender </label>
<input type="radio" th:field="*{gender}" value="Male" />Male
<input type="radio" th:field="*{gender}" value="Female" />Female
<input
type = "radio"
name = "gender"
th:field = "*{gender}"
class = "form-control"
/>
</div>
<div class = "form-group">
<label> Employee Birthday </label>
<input type="date" th:field="*{birthday}" />
<input
type = "date"
name = "birthday"
th:field = "*{birthday}"
class = "form-control"
/>
</div>
<div class = "form-group">
<label> Employee Skill </label>
<input
type = "text"
name = "skill"
th:field = "*{skill}"
class = "form-control"
placeholder = "Enter Employee Skill"
/>
</div>
<div class = "box-footer">
<button type="submit" class = "btn btn-primary">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

You just need to add mapping for /, which will redirect to the landing page (in your case employees page).
So, just add the following GET mapping in your EmployeeController
#GetMapping('/')
public String index() {
return "redirect:/employees";
}