[Java] Let’s create a book management Web application with Spring Boot part1

5 minute read

Introduction

Hi, I’m @Ikuto19, a college student studying programming. This time, after studying, I will create a simple book management web application that uses Java’s Spring Boot. Previously, I made it with Python instead of Java, but there was a point that I was not convinced personally, so I thought about recreating it. The points that I am not satisfied with are as follows.

  • Python is not suitable as a server-side language
  • I want to publish my own application for free

I feel that there are many three languages used as server-side programming languages: Ruby, Java, and PHP. It seems that most of these three are used even if I look it up on the net. (Personal survey)

Python is not a server side, but a programming language that is good at things such as AI and deep learning and data science. However, I thought that even if I used it as a server-side language for web applications, I wouldn’t learn if I didn’t use it so much, so I came up with the idea of recreating it in Java this time. Is it possible to publish my own application for free? As a result of finding out that there is a service called Heroku, it is one of the reasons.

If the information posted is incorrect or lacks explanation, please do not hesitate to point out. This article is for my own study and is aimed at people who are stumbling like me. Therefore, thank you.

Prerequisites

  • macOS Catalina (version 10.15.5)
  • Eclipse Version: 2020-03
  • Server-side language: Java
  • Front-end languages: HTML, CSS, Javascript (jQuery)
  • Database: MySQL (Heroku uses MySQL from addon called clearDB)
  • Web application framework: Spring boot of Spring Framework
  • Build tool: maven
  • Book management API: openBD
  • Web app publishing service: heroku

About each tool and project

About Spring Framework

Official site → https://spring.io/ Spring Framework is a framework for developing Java development speedily and safely, and it seems to be read as Spring. This Spring features “DI: Dependency Injection” and “AOP: Aspect Oriented Programming”.

About maven

Official site → https://maven.apache.org/ maven is one of several build tools. Others include Gradle and Ant, but this time I chose maven because I will deploy the completed application on Heroku. By describing the dependency in pom.xml, various packages can be handled.

About openBD

Official site → https://openbd.jp/ This openBD is a free API that anyone can access bibliographic information and cover page. This time we will access the book information using this API with javascript jQuery.

About heroku

Official site → https://jp.heroku.com/about A container-based cloud-based PaaS that allows you to choose from a number of programming languages and deploy and manage your own applications.

Tool introduction

Install Spring project to installed eclipse

  1. After starting eclipse, install Help Tools> Spring Tools 4 (aka Spring Tool Suite 4) 4.7.0.RELEASE from eclipse marketplace.
  2. Confirm with all checkboxes checked
  3. Check “I agree with the terms of the license agreement” to complete
  4. When asked “Do you want to restart?”, just restart.

If the security warning says “Install unsigned software that cannot be trusted or validated. Do you want to continue the installation?”, click the Install button.

Register with Heroku and register with Creca

Create an account on Heroku

Sign up → https://signup.heroku.com/login

  1. Enter the required items above and create an account
  2. A confirmation email will be sent. Click it to set a password

If you have done so far, I think that it is a dashboard screen.

Register your credit card to use MySQL

On Heroku, the default database is PostgreSQL, so you need to add a free add-on called clearDB when using MySQL. However, to do so, you need to register for a credit card, so register.

  1. From the dashboard screen, click Account settings from the icon at the upper right corner
  2. From the Billing tab, click “Add credit card” in Billing Information
  3. Enter the required items and click Save Details

Create/run test app and publish on heroku

Creating a test app

For the time being, I will post the creation procedure, but since the project is given on GitHub, you can download the following command.

terminal


$ git clone https://github.com/ikuto19/test-webapp.git
Creation procedure
  1. After starting eclipse, right click on Package Explorer
  2. Click New> Project
  3. Select the Spring Starter project for Spring Boot and click Next
  4. Name it “webapp-test”, name the group and package “com.app” and click “Next”.
  5. Check Thymeleaf from Dependency Template Engine and Spring Web from web and click Finish

If you check the contents of the project, I think that the structure is as shown in the image below. If you do not have a templates folder, please create one. ![Screenshot 2020-07-26 16.35.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/b1e8c796-94d6-e8c8-cdd0-(501b759b8bc2.png)

Then create a new file or delete an existing file with the following configuration. ![Screenshot 2020-07-27 13.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/2277ef7b-9cdf-e42d-f0fa-(47f2a58bbe7a.png)

Describe the contents of each file as follows.

App.java


package com.app;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}

IndexController.java


package com.app.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {
It's a sequel.
@GetMapping("/")
public String getIndexPage(Model model) {
String message = "Hello, World!!";
model.addAttribute("message",message);
return "index";
}
}

index.html


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
<title>Test app</title>
</head>
<body>
<p th:text="${message}"></p>
</body>
</html>

Procfile


web: java $JAVA_OPTS -jar target/*.jar --server.port=$PORT

Execution confirmation

console


020-08-11 17:25:37.546 INFO 13991 --- [main] com.app.App :Started App in 6.855 seconds (JVM running for 7.79)

Right-click on App.java in the Package Explorer, right-click and select Run> Spring Boot Application to run. After the above log is displayed at the end, when you access http://localhost:8080/ with a web browser, the following image is displayed. ![Screenshot 2020-07-26 17.13.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/65674a4d-a650-4a68-128b-(4671d11a1c35.png)

Deploy to Heroku

Execute the following commands in order If you press any key after executing “heroku login”, you will be skipped by the web browser, so click the “Log IN” button.

terminal


$ brew tap heroku/brew && brew install heroku
$ heroku login

If you get an error like “Name test-webapp is already taken” with the create command, change the app name. I want to see it being used by other people. I named the app “test-webapp01”.

terminal


$ cd (path with work pace of eclipse)/webapp-test
$ git init
$ heroku create test-webapp01
$ git add.
$ git commit -m "first upload"
$ git push heroku master (or git push -f heroku master)

![Screenshot 2020-07-27 14.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/96851f3f-1356-f18d-81d2-(09e21046a389.png) If you see BUILD SUCCESS like this, I think you have succeeded. Open it with the following command and check. That’s all for this time.

terminal


$ heroku open

At the end

This time, we prepared for making a book management application and created and released a test application. Detailed explanation of the code will be done from the next time, and I will finally make a book management application.

Continue to the next time >Let’s make a book management Web application with Spring Boot part2

Reference site

Try using Spring Framework in Eclipse

Heroku beginners try Hello, Heroku

Four things that stumbled when deploying a web application created by Heroku beginner in Java with GitHub integration

Carefully explain how to create a Web application using Spring Boot