In this topic, we will show about adding logo and creating header menus in the Spring Boot web application using JSP for UI design. We will create step-by-step an example of a web application in Spring Boot, JSP, JQuery and Bootstrap.
1. Spring Tool Suite
Createing Spring Boot Project in STS.
2. Create a Spring Boot Starter Project
3. Maven Dependency
Add these dependencies in the pom.xml of the app.
<dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency>
We need tomcat-embed-jasper to compile JSP files.
JavaServer Pages Standard Tag Library(JSTL) is a collection of expressions we can use to process data in JSP files.
pom.xml:
<?xml version="1.0" encoding="UTF-8"?> <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 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.9-SNAPSHOT</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.gardentoday</groupId> <artifactId>SpringBootWithJSP</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <name>SpringBootWithJSP</name> <description>Spring Boot add logo and create header menus</description> <properties> <java.version>17</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-tomcat</artifactId> <scope>provided</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</artifactId> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.3.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.4.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator</artifactId> <version>0.30</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
4. Define configuration in the application.properties file
server.servlet.context-path=/springboot-jsp #viewResolver spring.mvc.view.prefix: /WEB-INF/jsp/ spring.mvc.view.suffix: .jsp
5. Create a Controller Class
MainController.java:
package com.gardentoday;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
@GetMapping
public String home() {
return "index";
}
}
6. JSP
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garden Today</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/webjars/bootstrap/css/bootstrap.min.css"/>">
<script src="<c:url value="/webjars/bootstrap/js/bootstrap.min.js"/>"></script>
<script src="<c:url value="/webjars/jquery/3.4.1/jquery.min.js"/>"></script>
</head>
<body>
<div class="container-fluid">
<div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a class="navbar-brand" href="<c:url value="/"/>">
<img alt="logo" src="<c:url value="/images/garden1.png"/>">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<c:url value="/user"/>">User</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/categories"/>">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/brands"/>">Brands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/products"/>">Customers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/shipping"/>">Shipping</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/orders"/>">Orders</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/sale-report"/>">Sale Report</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/articles"/>">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/menus"/>">Menus</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<c:url value="/settings"/>">Settings</a>
</li>
</ul>
</div>
</nav>
</div>
<div>
<p>Garden Today - Copy © Spring Boot Example</p>
</div>
</div>
</body>
</html>
7. Run the app
Right-click on the app then click on Run As and select Run Spring Boot App.
8. Conclusion
In this topic, we show about adding logo and creating header menu using Query, Bootstrap and JSP in Spring Boot.