Let's make a book management web application with Spring Boot part3

Introduction

Hi, my name is @ Ikuto19, a college student studying programming. This time, I will start from Continued from last time (part2).

Last review

In part2, we performed the creation steps 1 to 3. This time, I think I'll do two of the creation steps 4-5. The following is the one to be newly created (red) or modified (blue) this time. スクリーンショット 2020-08-25 1.44.38.png

Implementation of screen transition from home screen

We will implement a mechanism to transition the screen from index.html, which is the home screen, to operatorCollate.html, which registers and deletes.

Create new file / modify existing file

OperateController.java Display operatorCollate.html corresponding to the URL. At that time, pass the string type ISBN code entered from the text box on the index.html page to operateCollate.html using a class called ModelMap. Enter the variable name in the first argument and the character string you want to pass in the second argument. I personally think that the variable names here should be unified.

OperateController.java


package com.app.controller;

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

@Controller
public class OperateController {
	
	@GetMapping("/index")
	public String getIndexPage(Model model) {
		return "index";
	}

	//Methods to add below
	@RequestMapping("/operateCollate")
	public String operateCollate(ModelMap modelMap, @RequestParam("isbn") String isbn) {
		modelMap.addAttribute("isbn", isbn);
		return "operateCollate";
	}
}

noImage.png Download here After downloading, change it to "noImage.png ".

bookInfo.js This person's program has been changed according to the purpose of this time. Get bibliographic information using ISBN as a key with openBD API (using jQuery)

Based on the entered ISBN code, the book information is acquired in json format, and this time only the following information is acquired. If there is no title / publisher / author information, "None" is stored, and if there is no cover page, the url of the png file that says No Image is stored.

bookInfo.js


$(function () {
	const isbn = $("#isbn").val();
	const url = "https://api.openbd.jp/v1/get?isbn=" + isbn;

	$.getJSON(url, function (data) {
		var title = 'None';
		var publisher = 'None';
		var author = 'None';
		var thumbnail = '../images/noImage.png';
		
		if (data[0] != null) {
			if (data[0].summary.cover == "") {
				$("#thumbnail_image").html('<img src=\"' + thumbnail + '\" style=\"border:solid 1px #000000\" />');
			} else {
				$("#thumbnail_image").html('<img src=\"' + data[0].summary.cover + '\" style=\"border:solid 1px #000000\" />');
				thumbnail = data[0].summary.cover;
			}

			title = data[0].summary.title;
			publisher = data[0].summary.publisher;
			author = data[0].summary.author;
		}else{
			$("#thumbnail_image").html('<img src=\"' + thumbnail + '\" style=\"border:solid 1px #000000\" />');
		}

		$("#title").val(title);
		$("#publisher").val(publisher);
		$("#author").val(author);
		$("#thumbnail").val(thumbnail);
	});
});

operateCollate.html This page displays the acquired information and registers or deletes it after completing the inquiry about the book.

operateCollate.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
<script type="text/javascript" src="/js/bookInfo.js"
	th:src="@{/js/bookInfo.js}"></script>

<meta charset="UTF-8">
<title>Book management app</title>
</head>

<body>
	<div class="main_containerCollate background">
		<form method="get" action="regist">
			<div class="flexbox">
				<div class="">
					<div class="info">
						ISBN:<input id="isbn" class="texts" type="text" name="isbn" th:value="${isbn}"
							autofocus>
					</div>

					<div class="info">
Book title:<input id="title" class="texts" type="text" name="title" value="">
					</div>

					<div class="info">
the publisher:<input id="publisher" class="texts" type="text" name="publisher" value="">
					</div>

					<div class="info">
Author:<input id="author" class="texts" type="text" name="author" value="">
					</div>
				</div>
				<div class="">
					<p id="thumbnail_image"></p>
					<input hidden id="thumbnail" type="text" name="thumbnail" value="">
				</div>
			</div>
			<div class="info">
				<p>For the above books, please select below.</p>
				<button type="submit" class="submit">Registration</button>
				<button type="submit" class="submit" formaction="delete">Delete</button>
			</div>
		</form>

		<div class="link">
			<a href="/index">Return</a>
		</div>
	</div>
</body>
</html>

pom.xml Add the following dependency. A library for using jQuery.

pom.xml


<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>jquery</artifactId>
	<version>3.1.1</version>
</dependency>

Implementation of registration and deletion in the database

OperateController.java Add the following field variables and methods to OperateController.java

The acquired information is set in the ISBN object, and the message to be displayed is acquired using the DatabaseClass class.

OperateController.java


package com.app.controller;

import java.sql.SQLException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.app.database.DatabaseClass;
import com.app.entity.ISBN;
import com.app.repository.ISBNRepository;

@Controller
public class OperateController {
	@Autowired
	ISBNRepository isbnRepository;
	
	@RequestMapping("/operateCollate")
	public String operateCollate(ModelMap modelMap, @RequestParam("isbn") String isbn) {
		modelMap.addAttribute("isbn", isbn);
		return "operateCollate";
	}
	
	@RequestMapping("regist")
	public String regist(ModelMap modelMap, @RequestParam("isbn") String isbn,
			@RequestParam("title") String title, @RequestParam("publisher") String publisher,
			@RequestParam("author") String author, @RequestParam("thumbnail") String thumbnail) throws SQLException {
		
		ISBN isbnInfo = new ISBN();
		isbnInfo.setIsbn(isbn);
		isbnInfo.setTitle(title);
		isbnInfo.setPublisher(publisher);
		isbnInfo.setAuthor(author);
		isbnInfo.setThumbnail(thumbnail.replace("https://cover.openbd.jp/", ""));
		
		DatabaseClass dc = new DatabaseClass(isbnRepository.findAll());
		String message = dc.registDB(isbnInfo,isbnRepository);
		modelMap.addAttribute("message",message);
		
		return "regist";
	}

	@RequestMapping("delete")
	public String delete(ModelMap modelMap, @RequestParam("isbn") String isbn,
			@RequestParam("title") String title, @RequestParam("publisher") String publisher,
			@RequestParam("author") String author, @RequestParam("thumbnail") String thumbnail) throws SQLException {
		
		ISBN isbnInfo = new ISBN();
		isbnInfo.setIsbn(isbn);
		isbnInfo.setTitle(title);
		isbnInfo.setPublisher(publisher);
		isbnInfo.setAuthor(author);
		isbnInfo.setThumbnail(thumbnail.replace("https://cover.openbd.jp/", ""));
		
		DatabaseClass dc = new DatabaseClass(isbnRepository.findAll());
		String message = dc.deleteDB(isbnInfo,isbnRepository);
		modelMap.addAttribute("message",message);
		
		return "delete";
	}
}

DatabaseClass.java A class that processes data types and generates messages that change depending on the situation.

DatabaseClass.java


package com.app.database;
(Omission of import statement)
public class DatabaseClass {
	private List<ISBN> manageBookDB;
	
	public DatabaseClass(List<ISBN> manageBookDB) {
		this.manageBookDB = manageBookDB;
	}

	public String registDB(ISBN isbnInfo, ISBNRepository isbnRepository) throws SQLException {
		String message = null;
		
		if(isbnInfo.getTitle().equals("None") || isbnInfo.getPublisher().equals("None") || isbnInfo.getAuthor().equals("None")){
			message = "I couldn't register because I couldn't get the book information..";
		}else if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Already exists in the database.";
		} else {
			message = "Newly registered in the database.";
			isbnRepository.save(isbnInfo);
		}
		return message;
	}

	public String deleteDB(ISBN isbnInfo, ISBNRepository isbnRepository) throws SQLException {
		String message = null;
		
		if(convertStrings(manageBookDB).contains(isbnInfo.getIsbn())) {
			message = "Deleted from database.";
			isbnRepository.delete(isbnInfo);
		}else {
			message = "Does not exist in the database.";
		}
		return message;
	}

	public List<String> convertStrings(List<ISBN> manageBook){
		List<String> isbnList = new ArrayList<String>();
		for(ISBN isbn:manageBook) {
			isbnList.add(isbn.getIsbn());
		}
		return isbnList;
	}

}

ISBN.java Same entity class as LoginUser.java.

ISBN.java


package com.app.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "isbn_code")
public class ISBN {
	
	@Id
	@Column(name = "isbn")
	private String isbn;

	@Column(name = "title")
	private String title;

	@Column(name = "publisher")
	private String publisher;

	@Column(name = "author")
	private String author;

	@Column(name = "thumbnail")
	private String thumbnail;

	public String getIsbn() {
		return isbn;
	}
	
	public void setIsbn(String isbn) {
		this.isbn = isbn;
	}
	
	public String getTitle() {
		return title;
	}
	
	public void setTitle(String title) {
		this.title = title;
	}
	
	public String getPublisher() {
		return publisher;
	}
	
	public void setPublisher(String publisher) {
		this.publisher = publisher;
	}
	
	public String getAuthor() {
		return author;
	}
	
	public void setAuthor(String author) {
		this.author = author;
	}
	
	public String getThumbnail() {
		return thumbnail;
	}
	
	public void setThumbnail(String thumbnail) {
		this.thumbnail = thumbnail;
	}

}

ISBNRepository.java

ISBNRepository.java


package com.app.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.app.entity.ISBN;

@Repository
public interface ISBNRepository extends JpaRepository<ISBN, String>{}

delete.html The page to delete.

html.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Delete page</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Book deletion</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Return</a>
		</div>
	</div>
</body>
</html>

regist.html The page to register.

regist.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Registration page</title>
</head>
<body>
	<div class="main_container do">
		<div class=title>
			<h1>Book registration</h1>
		</div>
		<div class="message">
			<p th:text="${message}"></p>
		</div>
		<div>
			<a href="index">Return</a>
		</div>
	</div>
</body>
</html>

Building a book information database

Create a table to save book information with the following command. The table name should be the same as 〇〇 of `@ Table (name =" ○○ ")` of the entity class ISBN.java. This time, I chose the table name isbn_code.

$ mysql -u (mysql username) -p
Enter password: (mysql password)
mysql> use manageBook
mysql> create table isbn_code(,isbn varchar(256),title varchar(256),publisher varchar(256),author varchar(256),thumbnail varchar(256));

Operation check

After accessing http: // localhost: 8080 / login, enter the previously set login username and password. If you enter the ISBN code and press the register button or delete button, you will be able to register or delete from the database. To check the database, use the following command.

$ mysql -u (mysql username) -p
Enter password: (mysql password)
mysql> create database manageBook;
mysql> use manageBook
mysql> select * from isbn_code;

At the end

That's all for this time. I wrote it as the last one this time, but I divided it because it seems to be long. Next time is really the last, and I will make the rest (heroku settings, deployment, etc.).

Continue to next time (part final)> Post soon

Reference site

Get bibliographic information using ISBN as a key with openBD API (using jQuery)

Recommended Posts

Let's make a book management web application with Spring Boot part1
Let's make a book management web application with Spring Boot part3
Let's make a book management web application with Spring Boot part2
Let's make a simple API with EC2 + RDS + Spring boot ①
Start web application development with Spring Boot
Run WEB application with Spring Boot + Thymeleaf
Create a web api server with spring boot
Java beginner tried to make a simple web application using Spring Boot
Let's make a LINE Bot with Ruby + Sinatra --Part 2
[Spring Boot] Web application creation
Let's make a LINE Bot with Ruby + Sinatra --Part 1
I tried to clone a web application full of bugs with Spring Boot
Build a WEB system with Spring + Doma + H2DB Part 2
Let's make a circuit breaker for back-end service using Actuator of Spring Boot (Part 1)
A story that stumbled when deploying a web application created with Spring Boot to EC2
The first WEB application with Spring Boot-Making a Pomodoro timer-
Until you create a Web application with Servlet / JSP (Part 1)
Inquiry application creation with Spring Boot
Build a web application with Javalin
Implement a simple Web REST API server with Spring Boot + MySQL
[Beginner] Let's write REST API of Todo application with Spring Boot
Processing at application startup with Spring Boot
Let's make a Christmas card with Processing!
Create a simple web application with Dropwizard
HTTPS with Spring Boot and Let's Encrypt
Launch Nginx + Spring Boot application with docker-compose
Let's make a smart home with Ruby!
Spring Boot2 Web application development with Visual Studio Code SQL Server connection
Creating a java web application development environment with docker for mac part1
Spring Boot2 Web application development with Visual Studio Code Hello World creation
Automatically deploy a web application developed in Java using Jenkins [Spring Boot application]
Create a java web application development environment with docker for mac part2
Create a website with Spring Boot + Gradle (jdk1.8.x)
Create a simple search app with Spring Boot
Create a Spring Boot application using IntelliJ IDEA
Let's make a search function with Rails (ransack)
Deploy a Spring Boot application on Elastic Beanstalk
Build a WEB system with Spring + Doma + H2DB
Create a Spring Boot development environment with docker
I tried to make a machine learning application with Dash (+ Docker) part3 ~ Practice ~
Let's make a calculator application with Java ~ Create a display area in the window
Sign in to a Spring Boot web application on the Microsoft ID platform
From creating a Spring Boot project to running an application with VS Code
Let's create a TODO application in Java 2 I want to create a template with Spring Initializr and make a Hello world
Build a WEB system with Spring + Doma + H2DB + Thymeleaf
Try using OpenID Connect with Keycloak (Spring Boot application)
[JUnit 5 compatible] Write a test using JUnit 5 with Spring boot 2.2, 2.3
[Java basics] Let's make a triangle with a for statement
Implement a simple Rest API with Spring Security with Spring Boot 2.0
[Personal application work memo] Make a calendar with simple_calendar
Customize REST API error response with Spring Boot (Part 2)
[JUnit 5] Write a validation test with Spring Boot! [Parameterization test]
A memorandum when creating a REST service with Spring Boot
Create a simple demo site with Spring Security with Spring Boot 2.1
Spring Boot 2.3 Application Availability
Customize REST API error response with Spring Boot (Part 1)
I wrote a test with Spring Boot + JUnit 5 now
[Introduction to Android application development] Let's make a counter
Download with Spring Boot
Let's make a calculator application in Java ~ Display the application window
Implement REST API with Spring Boot and JPA (Application Layer)