In this comprehensive tutorial, we'll guide you through building a Java web application using the Model-View-Controller (MVC) pattern with Spring Boot and Apache NetBeans 11.1. Leveraging Spring Boot simplifies the development process by minimizing boilerplate code and providing a suite of tools for rapid application development.
We'll utilize Spring Initializr to generate the project structure, integrate Thymeleaf for dynamic HTML rendering, and employ the H2 in-memory database for data persistence. Whether you're a beginner or looking to refresh your skills, this step-by-step guide will help you create a functional MVC web application efficiently.
By the end of this tutorial, you'll have a solid understanding of setting up a Spring Boot project in NetBeans, creating entity models, repositories, controllers, and views, and running your application seamlessly.
So the following tools, frameworks, and libraries are required for this tutorial:
- Java Development Kit (JDK) 8
- Gradle
- Spring Boot
- Spring MVC
- Spring Data JPA
- H2 Database
- Thymeleaf
- Webjars Bootstrap
- Spring Initializer
- Netbeans
- Terminal or cmd
We assume that you have to install Netbeans, JDK 8, and Gradle on your machine. So, we need to just generate a new Spring Boot Gradle Java Web App.
You can watch the video tutorial on our YouTube channel.
Step #1: Generate Spring Boot Java Web App
We will create a new Spring Boot Gradle project using Spring Initializer. Spring Initializr provides an extensible API to generate quickstart projects and to inspect the metadata used to generate projects, for instance, to list the available dependencies and versions. Just go to Spring Initializer web-based Spring project generator, then fill in the required frameworks and libraries (Spring Web, H2 Database, Thymeleaf, Spring Data JPA, Spring Data JDBC).
After filling in all fields, click Generate Project. It will automatically download the zipped project. Next, extract the zipped project to your Java projects folder, then open the folder from Netbeans IDE as a project (use the open project menu). Next, from the Projects panel, expand the project name (ours: springmvc), then expand Build Scripts, and you will see the build.gradle file. Open that file and you will see this project information, plugins, repositories, and dependencies.
plugins {
id 'org.springframework.boot' version '2.1.9.RELEASE'
id 'io.spring.dependency-management' version '1.0.8.RELEASE'
id 'java'
}
group = 'com.djamware'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jdbc'
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
runtimeOnly 'com.h2database:h2'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}Add this dependency for Bootstrap and Thymeleaf Layout Dialect inside the dependencies body.
dependencies {
...
compile 'org.webjars:bootstrap:3.3.7'
compile 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.4.1'
...
}In Netbeans, right-click the project name, then click Build to build the project for the first time.
Step #2: Create Java Model or Entity Class
We will create a single table of product data for this Spring MVC Java web app. Now, we will implement the term "M" of the Spring MVC by creating a new Java model or entity. Right-click the project name -> New -> Java Class. Fill the class name as Product, the package name as com.djamware.springmvc.models, and leave other fields as default, then click the Finish button. The new Java class automatically opens and then replaces all Java code with these codes of Java entity code, auto-generation ID, required fields, constructors, and getter and setter.
package com.djamware.springmvc.models;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Product {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String prodName;
private String prodDesc;
private String prodImage;
private Double prodPrice;
public Product() {
}
public Product(String prodName, String prodDesc, String prodImage, Double prodPrice) {
this.prodName = prodName;
this.prodDesc = prodDesc;
this.prodImage = prodImage;
this.prodPrice = prodPrice;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getProdName() {
return prodName;
}
public void setProdName(String prodName) {
this.prodName = prodName;
}
public String getProdDesc() {
return prodDesc;
}
public void setProdDesc(String prodDesc) {
this.prodDesc = prodDesc;
}
public String getProdImage() {
return prodImage;
}
public void setProdImage(String prodImage) {
this.prodImage = prodImage;
}
public Double getProdPrice() {
return prodPrice;
}
public void setProdPrice(Double prodPrice) {
this.prodPrice = prodPrice;
}
}
Step #3: Create Java Repository Interface
Next, we have to create a User Repository that extends the JPA Repository for the Product model. Right-click the project name -> New -> Java Interface. Fill the class name as ProductRepository, the package name com.djamware.springmvc.repositories, and leave other fields as default, then click the Finish button. That newly created file will open and then replace all Java codes with these codes.
package com.djamware.springmvc.repositories;
import com.djamware.springmvc.models.Product;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ProductRepository extends JpaRepository<Product, Long> {
Product findByProdName(final String prodName);
}As you see, the ProductRepository interface now extends the JpaRepository of the Product type, and it only has an additional query interface of find product by product name. Since Spring Boot 2.1, overriding is disabled by default. So, overriding this ProductRepository will result in this error at runtime.
The bean 'productRepository', defined in null, could not be registered. A bean with that name has already been defined in null and overriding is disabled.
To fix that, just open and edit `Resources/application.properties`, then add this line to enable overriding.
spring.main.allow-bean-definition-overriding=true
Step #4: Create Spring MVC Controller
Now, it's time for `C` terms of MVC, which means Controller. To create it on Netbeans, just right click on the project name -> New -> Java Class. Fill the class name with ProductController and the package with com.djamware.springmvc.controllers. Leave other fields as default, then click the Finish button. That newly created Java class file will be opened automatically. Replace all Java codes with these codes of @Controller, @RequestMapping, @RequestParam, ProductRepository, and all required CRUD methods that return the page for each CRUD operation.
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.djamware.springmvc.controllers;
import com.djamware.springmvc.models.Product;
import com.djamware.springmvc.repositories.ProductRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class ProductController {
@Autowired
ProductRepository productRepository;
@RequestMapping("/product")
public String product(Model model) {
model.addAttribute("products", productRepository.findAll());
return "product";
}
@RequestMapping("/create")
public String create(Model model) {
return "create";
}
@RequestMapping("/save")
public String save(@RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
Product product = new Product();
product.setProdName(prodName);
product.setProdDesc(prodDesc);
product.setProdImage(prodImage);
product.setProdPrice(prodPrice);
productRepository.save(product);
return "redirect:/show/" + product.getId();
}
@RequestMapping("/show/{id}")
public String show(@PathVariable Long id, Model model) {
model.addAttribute("product", productRepository.findById(id).orElse(null));
return "show";
}
@RequestMapping("/delete")
public String delete(@RequestParam Long id) {
Product product = productRepository.findById(id).orElse(null);
productRepository.delete(product);
return "redirect:/product";
}
@RequestMapping("/edit/{id}")
public String edit(@PathVariable Long id, Model model) {
model.addAttribute("product", productRepository.findById(id).orElse(null));
return "edit";
}
@RequestMapping("/update")
public String update(@RequestParam Long id, @RequestParam String prodName, @RequestParam String prodDesc, @RequestParam Double prodPrice, @RequestParam String prodImage) {
Product product = productRepository.findById(id).orElse(null);
product.setProdName(prodName);
product.setProdDesc(prodDesc);
product.setProdImage(prodImage);
product.setProdPrice(prodPrice);
productRepository.save(product);
return "redirect:/show/" + product.getId();
}
}
Step #5: Create Spring MVC Views
Now, it's the time of `V` for the View of the MVC pattern. Since we are using the Thymeleaf library for the view template, we can create the same layout for all HTML pages. Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web (servlet-based) and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of MVC-based web applications, but it can process any XML file, even in offline environments. To create the layout, first, create a `default.html` file in the `Resources/templates` folder, then add or replace it with these lines of code.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8"/>
<title>Default title for my pages</title>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Spring MVC</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/product">Home</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template" layout:fragment="content"></div>
</div><!-- /.container -->
<script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>That HTML shows a layout template using Thymeleaf Layout. To make this layout work, make sure you have additional dependencies of Thymeleaf Layout Dialect that were previously added in the first steps. All CSS and JavaScript files are put in that file and called once for all pages that use `default.html` as a layout holder. Also, we call Bootstrap and jQuery in that file. Next, we create a view for the Product list with the name `product.html`, then replace all the code in that file with this.
<!DOCTYPE HTML>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="default">
<head>
<title>Product List</title>
</head>
<body>
<div layout:fragment="content" class="row">
<div class="col-xs-8 col-md-8">
<h3>
<a href="/create" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Product</a>
</h3>
<h2>Product List</h2>
<div class="table-responsive">
<table class="table" id="product-table">
<thead>
<tr>
<th>Product Name</th>
<th>Product Desc</th>
<th>Product Price</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${products}">
<td><a th:text="${product.prodName}" th:href="@{'/show/' + ${product.id}}"></a></td>
<td th:text="${product.prodDesc}"></td>
<td th:text="${product.prodPrice}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Next, create a view for creating a product form with the name `create.html` in the `Resources/templates` folder, then replace all codes with this.
<!DOCTYPE HTML>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="default">
<head>
<title>Create Product</title>
</head>
<body>
<div layout:fragment="content" class="row">
<div class="col-xs-8 col-md-8">
<h3>
<a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
</h3>
<h2>Create Product</h2>
<form action="/save">
<div class="form-group">
<label for="email">Product Name:</label>
<input type="text" class="form-control" name="prodName" />
</div>
<div class="form-group">
<label for="email">Product Description</label>
<textarea class="form-control" name="prodDesc" cols="60" rows="3"></textarea>
</div>
<div class="form-group">
<label for="email">Product Price</label>
<input type="number" class="form-control" name="prodPrice" />
</div>
<div class="form-group">
<label for="email">Product Image URL:</label>
<input type="url" class="form-control" name="prodImage" />
</div>
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
</div>
</body>
</html>Next, create a view to show product detail with the name `show.html` in the `Resources/templates` folder, then replace all codes with this.
<!DOCTYPE HTML>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="default">
<head>
<title>Show Product</title>
</head>
<body>
<div layout:fragment="content" class="row">
<div class="col-xs-8 col-md-8">
<h3>
<a href="/product" class="btn btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
</h3>
<h2 th:text="${product.prodName}"></h2>
<h2><img th:src="${product.prodImage}" width="200" /></h2>
<dl class="list">
<dt>Product Description</dt>
<dd th:text="${product.prodDesc}"></dd>
<dt>Product Description</dt>
<dd th:text="${product.prodPrice}"></dd>
</dl>
<form action="/delete">
<input type="hidden" name="id" th:value="${product.id}" />
<h2><input type="submit" class="btn btn-danger" value="Delete" onclick="return confirm('Are you sure?');" />
<a th:href="@{'/edit/' + ${product.id}}" class="btn btn-warning">Edit</a></h2>
</form>
</div>
</div>
</body>
</html>Next, create a view for editing the product with the name `edit.html` in the `Resources/templates` folder, then replace all code with this.
<!DOCTYPE HTML>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="default">
<head>
<title>Edit Product</title>
</head>
<body>
<div layout:fragment="content" class="row">
<div class="col-xs-8 col-md-8">
<h3>
<a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
</h3>
<h2>Edit Product</h2>
<form action="/update">
<div class="form-group">
<label for="email">Product Name:</label>
<input type="text" class="form-control" name="prodName" th:value="${product.prodName}" />
</div>
<div class="form-group">
<label for="email">Product Description</label>
<textarea class="form-control" name="prodDesc" cols="60" rows="3" th:text="${product.prodDesc}"></textarea>
</div>
<div class="form-group">
<label for="email">Product Price</label>
<input type="number" class="form-control" name="prodPrice" th:value="${product.prodPrice}" />
</div>
<div class="form-group">
<label for="email">Product Image URL:</label>
<input type="url" class="form-control" name="prodImage" th:value="${product.prodImage}" />
</div>
<input type="hidden" name="id" th:value="${product.id}" />
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
</div>
</body>
</html>Next, open and edit the static HTML file `Resources/static/index.html`, then replace all code with this.
<!DOCTYPE HTML>
<html>
<head>
<title>Spring MVC Java Web App</title>
</head>
<body>
<h2>Spring MVC Java Web App</h2>
<p><a href="/product">Product List</a></p>
</body>
</html>This `index.html` is the first page that shows up on the browser after the Web Application runs. Next, add a little style by creating a new CSS folder inside the static folder, then add a file `style.css`. Add these lines of CSS code to that CSS file.
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
Step #6: Run The Spring Boot Java Web App
To run the Spring Boot app inside Netbeans IDE, just click on the play button in the toolbar or right-click the project name in the Project panel, then click run. It's the same as typing this command from the terminal.
./gradlew --configure-on-demand -x check bootRunHere the full Spring Boot MVC Java web app looks like.
It's a quick way to create a Java web app using Spring Boot, Data, and MVC in just 5 steps. You can get the full working source code from our GitHub.
That's just the basics. If you need more deep learning about Java and Spring Framewor,k you can take the following cheap course:
- Java basics, Java in Use //Complete course for beginners
- Java Programming: Master Basic Java Concepts
- Master Java Web Services and REST API with Spring Boot
- JDBC Servlets and JSP - Java Web Development Fundamentals
- The Complete Java Web Development Course
- Spring MVC For Beginners: Build a Java Web App in 25 Steps
- Practical RESTful Web Services with Java EE 8 (JAX-RS 2.1)
Thanks!