SpringBoot #1: Using AdminLTE and Thymeleaf

Intro

For a developer who doesn’t possess a designer brain, it must be hard to create an interface for your web. But, don’t let that stop you from learning! You can use available design template, such as Bootstrap.

If you have already had specific admin feature in your mind, there is a good template for creating admin pages. Here it is, AdminLTE. From button, till form design are available. Honestly, there is no good documentation how to implement this design inside Spring project. I spent a lot of time to search and retest it until I can display the design on my web.

How to use AdminLTE

Download the resources from the official website. You will receive CSS, JS, sample page etc in one file. I assume you’ve generated the Spring Boot project with Thymeleaf library dependencies. If you haven’t, please check this preparation step.

In your project explorer, go to src > main > resources > static.
Now, extract AdminLTE file package that you downloaded, and copy following file to above location in project explorer:
- bower_components
- dist
- plugins
Create home index file under src > main > resources > templates
Create controller file under src > main > java > …. > project_name. Create new folder named Controller and put the controller file inside for easier file organization.
Run localhost:portnumber in your browser. For me, I set default 8080 as port number. You can edit this configuration in application.properties

If you found error, check your build.gradle and application.properties configuration. Don’t forget to check the error log.

home.html

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html" />
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
  
  <title>Welcome to MoM Analysis </title>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css"/>
  
  <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/main.css}" href="../../css/main.css" />
  
  
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">MoJacko</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a th:href="@{/}">Home</a></li>
          <li><a th:href="@{/login}">Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <div class="container">
    <div class="starter-template">
      <h1>Select Menu: </h1>
      <h2>Manage <a th:href="@{/admin}">Admin System</a></h2>
      <h2>Analyze <a th:href="@{/user}">new MoM</a></h2>
    </div>
  </div>
  
  <div th:replace="fragments/footer :: footer"/>
</body>
</html>

fragments/footer

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
</head>

<body>
  <div th:fragment="footer">
    <div class="container">
      <footer>
      <!-- this is footer -->
        	© 2018 Mojacko Planet
        	<span sec:authorize="isAuthenticated()">
        		| Logged User: <span sec:authentication="name"></span> | 
        		Roles: <span sec:authentication="principal.authorities"></span> |
        		<a th:href="@{/logout}">Sign Out</a>
        	</span>
        	
        	<script type="text/javascript"
        			src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
      </footer>
    </div>
  </div>
</body>
</html>

PageController.java

package com.ninan.mojacko.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;


@Controller
public class PageController {
  @GetMapping("/")
  public String main() {
    return "home";
  }
}

application.properties

#Server Configuration
server.port=8080

#Database Configuration
spring.datasource.url=jdbc:mariadb://[my_database_url] spring.datasource.username=username
spring.datasource.password=password

#Thymeleaf Config
spring.thymeleaf.cache=false
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=file:./src/main/resources/templates/
spring.session.store-type=none

When I run on browser