In this Spring Boot tutorial, we will guide you on how to build the MVC Java web app using Netbeans (we are using Apache Netbeans 11.1). Netbeans IDE development continues by Apache since version 9. You can use Eclipse, Intellij, or JDeveloper as well. By using Spring Boot, building Java web app actually a little bit easier than creating Java projects manually using Maven or Gradle. Especially when we are using Spring Initialzr that will help you to create a set of application bundles with the supported dependencies.
Table of Contents:
- Step #1: Generate Spring Boot Java Web App
- Step #2: Create Java Model or Entity Class
- Step #3: Create Java Repository Interface
- Step #4: Create Spring MVC Controller
- Step #5: Create Spring MVC Views
- Step #6: Run The Spring Boot Java Web App
As you can see in the above table of contents that build MVC Java web app required a few steps. Starting from creating Spring Boot project, Java model, Java repository, Java controller, and Java view. This MVC Java web app also uses a database and we will use an H2 In-Memory database or HSQLDB. For the view, we will use Thymeleaf and Bootstrap. 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 in your machine. So, we need just generate a new Spring Boot Gradle Java Web App.
You can watch the video tutorial from 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 the required frameworks and libraries (Spring Web, H2 Database, Thymeleaf, Spring Data JPA, Spring Data JDBC).
After filling 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 a project (use 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, plugin, 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 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 opened then replace all Java codes with these codes of Java entity, auto-generation ID, required fields, the 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 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 Product type and it only has an additional query interface of find product by product name. Since Spring Boot 2.1, overriding is disable by default. So, overriding this ProductRepository will result in this error in 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 that means Controller. To create it on Netbeans just right click on 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 MVC pattern. Since we are using the Thymeleaf library for view template, so 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 on the `Resources/templates` folder then add or replace it with these lines of codes.
<!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 making this layout working, make sure you have additional dependencies of Thymeleaf Layout Dialect that previously added in the first steps. All CSS and Javascript files put on that file and called once for all pages that use `default.html` as layout holder. Also, we call Bootstrap and JQuery on that file. Next, we create a view for the Product list with the name `product.html` then replace all codes to 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` on `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 for show product detail with the name `show.html` on `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 edit product with the name `edit.html` on `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>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 static HTML file `Resources/static/index.html` then replace all codes 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 Web Application run. 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 codes 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.
That 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 just the basic. If you need more deep learning about Java and Spring Framework 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 Java Web App in 25 Steps
- Practical RESTful Web Services with Java EE 8 (JAX-RS 2.1)
Thanks!
