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.

Book title → title
Publisher → publisher
Author → author
Cover → thumbnail

`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

Field: isbnRepository → Repository
Method: regist () → Registration method to database
Method: delete () → Database delete method

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.

registDB () method → Compare with database and generate registration and registration message
deleteDB () method → Compare with database to generate delete and delete message
convertStrings () method → Convert ISBN object as ISBN code of string

`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)

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

Introduction

Last review

Implementation of screen transition from home screen

Create new file / modify existing file

OperateController.java

bookInfo.js

operateCollate.html

pom.xml

Implementation of registration and deletion in the database

OperateController.java

DatabaseClass.java

ISBN.java

ISBNRepository.java

html.html

regist.html

Building a book information database

Operation check

At the end

Reference site

`OperateController.java`

`bookInfo.js`

`operateCollate.html`

`pom.xml`

`OperateController.java`

`DatabaseClass.java`

`ISBN.java`

`ISBNRepository.java`

`html.html`

`regist.html`