Java Programming ExamplesSpring Boot

Spring Boot Add Logo and Create Header Menu with JSP

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.

See also
Spring Boot Hello World Example

8. Conclusion

In this topic, we show about adding logo and creating header menu using Query, Bootstrap and JSP in Spring Boot.

 

Related articles:

Leave a Reply

Your email address will not be published.

Close
Close