Bookshelfアプリを作成する – 2020年度システム開発実習

新規プロジェクトを作成する。
プロジェクトの種類は、Springスターター・プロジェクトを選択する。

プロジェクト名を「bookshelf」にして次へをクリック。

依存関係は、以下の項目を選択する。

HyperSQL Database
Spring Data JPA
Spring Web
Thymeleaf

「完了」でbookshelfプロジェクトができる。

pom.xml を開いて、8行目のバージョンを2.2.1に修正する。

		<version>2.2.1.RELEASE</version>

[実行]-[Spring Boot アプリケーション]を選択するとサーバーが起動する。

http://localhost:8080 にアクセスすると、Whitelabel Error Page が表示される。

IndexControler.java を作成する。

package jp.kpc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

	@RequestMapping("/")
	public String index() {
		return "index";
	}

}

example プロジェクトの index.html をコピーして、src/main/resources の templates に貼り付ける。

SpringBootアプリケーションを再起動すると、「最初のページ」が表示される。

application.properties にデータベース接続設定を追加する。

spring.datasource.url=jdbc:hsqldb:hsql://localhost/bookshelf
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.hibernate.ddl-auto=update

hsqldb.bat に bookshelf インスタンスを追加する。

cd data
java -classpath ../lib/hsqldb.jar org.hsqldb.server.Server ^
--database.0 db/shindan --dbname.0 shindan ^
--database.1 db/bookshelf --dbname.1 bookshelf

index.html に、新しい本棚を追加するためのフォームを用意する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚</title>
</head>
<body>

<h1>Bookshelf list</h1>

<hr />

<div>新しい本棚</div>
<form action="/addshelf" method="post">
	<div>なまえ</div>
	<div><input type="text" name="name" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>


</body>
</html>

IndexController.java に /addshelf に対する POST を受け取る用意をする。POSTを受け取ったあとは、URL=”/” にリダイレクトする。

package jp.kpc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping(value="/addshelf", method=RequestMethod.POST)
	public ModelAndView formPost(ModelAndView mav,
			@RequestParam("name") String name) {
		return new ModelAndView("redirect:/");
	}
}

本棚に対応する Bookshelf クラスを作成する。

package jp.kpc;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Bookshelf {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String name;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

新規インターフェースを作成する。
BookshelfRepository.java

package jp.kpc;

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

public interface BookshelfRepository extends JpaRepository<Bookshelf, Long> {

}

IndexController.java で、リクエストパラメータで渡された名前の本棚を保存する処理を追加する。

package jp.kpc;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

	@Autowired
	private BookshelfRepository repository;

	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping(value="/addshelf", method=RequestMethod.POST)
	public ModelAndView formPost(ModelAndView mav,
			@RequestParam("name") String name) {
		Bookshelf bookshelf = new Bookshelf();
		bookshelf.setName(name);
		repository.saveAndFlush(bookshelf);
		return new ModelAndView("redirect:/");
	}
}

トップページにアクセスがあったときに、本棚リストをテンプレートに渡す。

IndexController.java

@Controller
public class IndexController {

	@Autowired
	private BookshelfRepository repository;

	@RequestMapping("/")
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("index");
		List<Bookshelf> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

テンプレートで本棚のリストを表示する。

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚</title>
</head>
<body>

<h1>Bookshelf list</h1>
<table>
	<tr th:each="bs : ${list}">
		<td th:text="${bs.name}"></td>
	</tr>
</table>

<hr />

<div>新しい本棚</div>
<form action="/addshelf" method="post">
	<div>なまえ</div>
	<div><input type="text" name="name" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>


</body>
</html>

Bookクラスを作成する。

package jp.kpc;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Book {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String title;

	@Column
	@NotEmpty
	private String author;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}


}

BookController.java

package jp.kpc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookController {
	@RequestMapping("/books")
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("books");
		return mav;
	}

}

books.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本のリスト</title>
</head>
<body>

<h1>Book list</h1>
<table>
	<tr th:each="book : ${list}">
		<td th:text="${book.title}"></td>
		<td th:text="${book.author}"></td>
	</tr>
</table>

<hr />

<div>新しい本</div>
<form action="/addbook" method="post">
	<div>タイトル: <input type="text" name="title" /></div>
	<div>著者: <input type="text" name="author" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>


</body>
</html>

BookRepository.java

package jp.kpc;

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

public interface BookRepository extends JpaRepository<Book, Long> {

}

リポジトリを用意したので、それをBookControllerで使う。

package jp.kpc;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookController {
	@Autowired
	private BookRepository repository;

	@RequestMapping("/books")
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("books");
		List<Book> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value="/addbook", method=RequestMethod.POST)
	public ModelAndView formPost(ModelAndView mav,
			@RequestParam("title") String title,
			@RequestParam("author") String author) {
		Book book = new Book();
		book.setTitle(title);
		book.setAuthor(author);
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/books");
	}
}

本と本棚の関連付けを作る。

Bookshelf.java

package jp.kpc;

import java.util.List;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Bookshelf {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String name;

	@OneToMany
	private List<Book> books;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<Book> getBooks() {
		return books;
	}

	public void setBooks(List<Book> books) {
		this.books = books;
	}

}

Book.java

package jp.kpc;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Book {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String title;

	@Column
	@NotEmpty
	private String author;

	@ManyToOne
	private Bookshelf bookshelf;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}

	public Bookshelf getBookshelf() {
		return bookshelf;
	}

	public void setBookshelf(Bookshelf bookshelf) {
		this.bookshelf = bookshelf;
	}
}

本を入れる本棚を指定するための画面を作る。
そのために、/book/{id} (idはBookのid)というURLを用意する。

package jp.kpc;

import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookController {
	@Autowired
	private BookRepository repository;

	@RequestMapping("/books")
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("books");
		List<Book> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value="/addbook", method=RequestMethod.POST)
	public ModelAndView formPost(ModelAndView mav,
			@RequestParam("title") String title,
			@RequestParam("author") String author) {
		Book book = new Book();
		book.setTitle(title);
		book.setAuthor(author);
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/books");
	}


	@RequestMapping(value = "/book/{id}", method = RequestMethod.GET)
	public ModelAndView book(ModelAndView mav,
			@PathVariable long id) {
		mav.setViewName("book");
		Optional<Book> data = repository.findById(id);
		mav.addObject("book", data.get());
		return mav;
	}

}

book.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本を入れる本棚を指定する</title>
</head>
<body>

<h1>Book</h1>
<table>
	<tr>
		<td th:text="${book.title}"></td>
		<td th:text="${book.author}"></td>
	</tr>
</table>

<hr />

<div>どの本棚に入れますか？</div>
<form action="/book" method="post">
	<input type="hidden" name="bookId" th:value="${book.id}" />
	<div>本棚ID: <input type="text" name="bookshelfId" /></div>
	<div><input id="submit" type="submit" value="本棚に入れる" /></div>
</form>


</body>
</html>

本と本棚の関連付けを保存する。

BookController.java

	@Autowired
	private BookshelfRepository bookshelfRepository;

	@RequestMapping(value="/book", method=RequestMethod.POST)
	public ModelAndView save(ModelAndView mav,
			@RequestParam("bookId") long bookId,
			@RequestParam("bookshelfId") long bookshelfId) {
		Optional<Book> data = repository.findById(bookId);
		Book book = data.get();
		Optional<Bookshelf> bsData = bookshelfRepository.findById(bookshelfId);
		Bookshelf bookshelf = bsData.get();
		book.setBookshelf(bookshelf);
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/books");
	}

books.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本のリスト</title>
</head>
<body>

<h1>Book list</h1>
<table>
	<tr>
		<th>ID</th><th>タイトル</th><th>著者</th><th>本棚</th>
	</tr>
	<tr th:each="book : ${list}">
		<td th:text="${book.id}"></td>
		<td th:text="${book.title}"></td>
		<td th:text="${book.author}"></td>
		<td th:if="${book.bookshelf != null}" th:text="${book.bookshelf.name}"></td>
		<td th:if="${book.bookshelf == null}" th:text="本棚に入れてません"></td>
	</tr>
</table>

<hr />

<div>新しい本</div>
<form action="/addbook" method="post">
	<div>タイトル: <input type="text" name="title" /></div>
	<div>著者: <input type="text" name="author" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>


</body>
</html>

本のタイトルをクリックしたら、/book/{id} に飛べるようにする。

<h1>Book list</h1>
<table>
	<tr>
		<th>ID</th><th>タイトル</th><th>著者</th><th>本棚</th>
	</tr>
	<tr th:each="book : ${list}">
		<td th:text="${book.id}"></td>
		<td><a th:href="@{'/book/' + ${book.id}}" th:text="${book.title}"></a></td>
		<td th:text="${book.author}"></td>
		<td th:if="${book.bookshelf != null}" th:text="${book.bookshelf.name}"></td>
		<td th:if="${book.bookshelf == null}" th:text="本棚に入れてません"></td>
	</tr>
</table>

本棚に入っている本のリストを表示する画面を作る。

/bookshelf/{id} で本棚内の本のリストを表示する。

bookshelf.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚に入っている本のリスト</title>
</head>
<body>

<h1>Bookshelf - 本棚に入っている本のリスト</h1>

<h3 th:text="${bookshelf.name}"></h3>

<ul th:each="book : ${bookshelf.books}">
	<li th:text="${book.title + ' - ' + book.author}"></li>
</ul>


</body>
</html>

Bookshelf.java

@Entity
public class Bookshelf {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String name;

	@OneToMany(mappedBy = "bookshelf")
	private List<Book> books;

IndexController.java

	@RequestMapping(value = "/bookshelf/{id}", method = RequestMethod.GET)
	public ModelAndView bookshelf(ModelAndView mav,
			@PathVariable long id) {
		mav.setViewName("bookshelf");
		Optional<Bookshelf> data = repository.findById(id);
		mav.addObject("bookshelf", data.get());
		return mav;
	}

index.htmlのテーブルに列を追加して、本棚のIDを表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚</title>
</head>
<body>

<h1>Bookshelf list</h1>
<table>
	<tr th:each="bs : ${list}">
		<td th:text="${bs.id}"></td>
		<td th:text="${bs.name}"></td>
	</tr>
</table>

<hr />

<div>新しい本棚</div>
<form action="/addshelf" method="post">
	<div>なまえ</div>
	<div><input type="text" name="name" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>


</body>
</html>

本棚の名前をクリックしたら、本棚の内容を表示するページに移動できるようにする。
本のリストページ（/books）へのリンクも追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚</title>
</head>
<body>

<h1>Bookshelf list</h1>
<table>
	<tr th:each="bs : ${list}">
		<td th:text="${bs.id}"></td>
		<td><a th:href="@{'/bookshelf/' + ${bs.id}}" th:text="${bs.name}"></a></td>
	</tr>
</table>

<hr />

<div>新しい本棚</div>
<form action="/addshelf" method="post">
	<div>なまえ</div>
	<div><input type="text" name="name" /></div>
	<div><input id="submit" type="submit" value="+追加" /></div>
</form>

<a href="/books">本のリスト</a>


</body>
</html>

books.html、book.html、bookshelf.html に、トップページへのリンクを追加する。

books.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本のリスト</title>
</head>
<body>

<h1>Book list</h1>

<a href="/">トップ</a>

<table>
:

book.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本を入れる本棚を指定する</title>
</head>
<body>

<h1>Book</h1>

<a href="/">トップ</a>

<table>
:

bookshelf.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚に入っている本のリスト</title>
</head>
<body>

<h1>Bookshelf - 本棚に入っている本のリスト</h1>

<a href="/">トップ</a>

<h3 th:text="${bookshelf.name}"></h3>
:

本棚ページ内に表示した本のリストで、タイトルをクリックすると本のページに移動できるようにする。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bookshelf - 本棚に入っている本のリスト</title>
</head>
<body>

<h1>Bookshelf - 本棚に入っている本のリスト</h1>

<a href="/">トップ</a>

<h3 th:text="${bookshelf.name}"></h3>

<ul th:each="book : ${bookshelf.books}">
	<li>
		<a th:href="@{'/book/' + ${book.id}}" th:text="${book.title}"></a>
		<span th:text="${' - ' + book.author}"></span>
	</li>
</ul>


</body>
</html>

book.html で、本棚IDを入力するのではなく、select で選択できるようにする。

BookController.java で、本棚のリストをテンプレートに渡すようにする。

	@RequestMapping(value = "/book/{id}", method = RequestMethod.GET)
	public ModelAndView book(ModelAndView mav,
			@PathVariable long id) {
		mav.setViewName("book");
		Optional<Book> data = repository.findById(id);
		mav.addObject("book", data.get());
		List<Bookshelf> list = bookshelfRepository.findAll();
		mav.addObject("bookshelfList", list);
		return mav;
	}

book.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Book - 本を入れる本棚を指定する</title>
</head>
<body>

<h1>Book</h1>

<a href="/">トップ</a>

<table>
	<tr>
		<td th:text="${book.title}"></td>
		<td th:text="${book.author}"></td>
	</tr>
</table>

<hr />

<div>どの本棚に入れますか？</div>
<form action="/book" method="post">
	<input type="hidden" name="bookId" th:value="${book.id}" />
	<div>
		<select name="bookshelfId">
			<option th:each="bs : ${bookshelfList}" th:value="${bs.id}" th:selected="${bs.id == book.id}" th:text="${bs.name}"></option>
		</select>
	</div>
	<div><input id="submit" type="submit" value="本棚に入れる" /></div>
</form>


</body>
</html>

本棚に入れない選択肢を追加する。

<div>どの本棚に入れますか？</div>
<form action="/book" method="post">
	<input type="hidden" name="bookId" th:value="${book.id}" />
	<div>
		<select name="bookshelfId">
			<option value="0">本棚に入れない</option>
			<option th:each="bs : ${bookshelfList}" th:value="${bs.id}" th:selected="${bs.id == book.id}" th:text="${bs.name}"></option>
		</select>
	</div>
	<div><input id="submit" type="submit" value="本棚に入れる" /></div>
</form>

コントローラでは、本棚検索して見つからないときは null を設定する。

	@RequestMapping(value="/book", method=RequestMethod.POST)
	public ModelAndView save(ModelAndView mav,
			@RequestParam("bookId") long bookId,
			@RequestParam("bookshelfId") long bookshelfId) {
		Optional<Book> data = repository.findById(bookId);
		Book book = data.get();
		Optional<Bookshelf> bsData = bookshelfRepository.findById(bookshelfId);
		if(bsData.isPresent()) {
			Bookshelf bookshelf = bsData.get();
			book.setBookshelf(bookshelf);
		} else {
			book.setBookshelf(null);
		}
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/books");
	}