git – システム構築実習

提出課題

SpringBootを使ったWebサイトを作成する。

プロジェクト名: tweeter
Spring Boot Version: 2.2.1

作成するページとURL

トップページ	http://localhost:8080/
ユーザー一覧＆ユーザー登録	http://localhost:8080/user/
ツイート一覧＆ツイート投稿	http://localhost:8080/tweet/
ユーザー編集ページ	http://localhost:8080/edit/{id}

作成するHTMLテンプレート

トップページ	index.html
ユーザー一覧＆ユーザー登録	user.html
ツイート一覧＆ツイート投稿	tweet.html
ユーザー編集	edit.html

エンティティ

User

・id – Long
・name – String
・profile – String
・tweets – List

・id – Long
・time – java.util.Date
・content – String
・user – User

トップページの内容

Webサイトのタイトル
番号と名前
「ユーザー一覧＆ユーザー登録」ページへのリンク
「ツイート一覧＆ツイート投稿」ページへのリンク

「ユーザー一覧＆ユーザー登録」ページの内容

Webサイトのタイトル
番号と名前
トップページへのリンク
入力フォームで名前（name）と自己紹介(profile)を入力できる
送信ボタンを表示
登録済みユーザー一覧

「ツイート一覧＆ツイート投稿」ページの内容

Webサイトのタイトル
番号と名前
トップページへのリンク
入力フォームで投稿内容（content)を入力できる
送信ボタンを表示
投稿済みツイート一覧を表示する

「ユーザー編集」ページの内容

Webサイトのタイトル
番号と名前
トップページへのリンク
入力フォームで名前と自己紹介を入力できる
送信ボタンを表示

application.properties

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

pom.xml

bookshelfのpom.xml から以下の部分をコピーして、tweeter の pom.xml に貼り付ける。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

配点

トップページ: 10点
トップページ: CSSでデザインを変更していたら10点
ユーザー一覧＆ユーザー登録ページ: 表示できたら10点
ユーザー一覧＆ユーザー登録ページ: ユーザー登録できたら10点
ユーザー一覧＆ユーザー登録ページ: ユーザー編集ページに飛べたら10点
ユーザー一覧＆ユーザー登録ページ: CSSでデザインを変更していたら10点
ツイート一覧＆ツイート投稿ページ: 表示できたら10点
ツイート一覧＆ツイート投稿ページ: ツイート投稿できたら10点
ツイート一覧＆ツイート投稿ページ: 投稿者名が表示される（エンティティの連携） : 10点
ツイート一覧＆ツイート投稿ページ: CSSでデザインを変更していたら10点
ユーザー編集ページ: 表示できたら10点
ユーザー編集ページ: 編集できたら10点
ユーザー編集ページ: CSSでデザインを変更していたら10点

※全部クリアすると100点超えますが、最高点は100点です。

提出方法

プロジェクトを作成したフォルダを、エクスプローラで開く。
「tweeter」フォルダを右クリックし[送る]-[圧縮(zip 形式)フォルダー]を選択する。
「tweeter.zip」ファイルができるので、そのファイルを提出する。
「X:\提出フォルダ\2018\提出\システム開発実習」に自分の番号のフォルダ（1817NN）を作成する。
作成したフォルダに「tweeter.zip」ファイルをコピーする。

本棚アプリに本を追加する

HSQLDBデータベースサーバーを使用する
配布フォルダからhsqldbフォルダを個々のフォルダにコピーする。
hsqldb.bat をダブルクリックすると、データベースサーバーが起動する。

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.properties.hibernate.dialect=org.hibernate.dialect.HSQLDialect
spring.jpa.hibernate.ddl-auto=update

本棚アプリに本を追加する
本棚と同様に追加していけばよい。

本棚の時は
Model: Bookshelf
Controller: BookshelfController
View: bookshelf.html

本も本棚と同様に、
Model: Book
Controller: BookController
View: book.html

まずは Book.java を作成する。

package jp.or.jeed;

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
[java]
package jp.or.jeed;

import java.util.List;

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

@Controller
public class BookController {

	@Autowired
	private BookRepository repository;

	@RequestMapping(value = "/book", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("book");
		mav.addObject("book", new Book());
		List<Book> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value = "/book", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("book") Book book) {
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/book");
	}

}

ビューテンプレートとなるHTMLを作成する。
book.html

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

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  <input type="submit" value="本を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>タイトル</th><th>著者</th>
  </tr>
  <tr th:each="b : ${list}">
    <td th:text="${b.id}"></td>
    <td th:text="${b.title}"></td>
    <td th:text="${b.author}"></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

データベースとのやりとりを行うリポジトリを作成する。

BookRepository.java

package jp.or.jeed;

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

public interface BookRepository extends JpaRepository<Book, Long> {

}

本を本棚に格納する（関連付ける）

本に対しては1個の本棚が関連する。

package jp.or.jeed;

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;
	}
}

Bookshelf から Book への関連付けも行う。

package jp.or.jeed;

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.html

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

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を作成" />
</form>

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



<a href="/">トップページに戻る</a>

</body>
</html>

本を格納する本棚を変更できるようにする。

まずは変更するための画面に飛ばせるようにする。

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

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>タイトル</th><th>著者</th><th>本棚</th><th>修正</th>
  </tr>
  <tr th:each="b : ${list}">
    <td th:text="${b.id}"></td>
    <td th:text="${b.title}"></td>
    <td th:text="${b.author}"></td>
    <td th:if="${b.bookshelf != null}" th:text="${b.bookshelf.name}"></td>
    <td th:if="${b.bookshelf == null}" th:text="本棚に入ってません"></td>
    <td><a th:href="@{'/edit/' + ${b.id}}">編集</a></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

BookController に、編集するためのマッピングを追加する。

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

本の編集をするためのHTMLテンプレートを作成する

edit.html

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

<h1>本の編集</h1>
<p>本のタイトルなどを変更します。</p>


<form action="/edit" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を編集" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

本棚のところにきちんと値を表示するために、HTMLを変更する。

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

<h1>本の編集</h1>
<p>本のタイトルなどを変更します。</p>


<form action="/edit" method="post" th:object="${book}">
  <input type="hidden" name="id" th:value="*{id}" />
  <table>
    <tr>
      <td>タイトル</td>
      <td><input type="text" name="title" th:value="*{title}" /></td>
    </tr>
    <tr>
      <td>著者</td>
      <td><input type="text" name="author" th:value="*{author}" /></td>
    </tr>
    <tr>
      <td>本棚のID</td>
      <td th:if="*{bookshelf != null}"><input type="text" name="bookshelf" th:value="*{bookshelf.id}"/></td>
      <td th:if="*{bookshelf == null}"><input type="text" name="bookshelf" value=""/></td>
    </tr>
  </table>
  <input type="submit" value="本を編集" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

編集した本のデータを受け取ってデータベースを更新する。

	@RequestMapping(value = "/edit", method = RequestMethod.POST)
	public ModelAndView update(ModelAndView mav,
			@ModelAttribute("book") Book book) {
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/book");
	}

本棚Webアプリを作ってみる

新規プロジェクトを作成する

名前： bookshelf
グループ： jp.or.jeed
パッケージ： jp.or.jeed

pom.xml に demo で追加した部分を同様に追加する。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>jp.or.jeed</groupId>
	<artifactId>bookshelf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>bookshelf</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

プロジェクトを右クリックし[Maven]-[プロジェクトの更新]を選択する。
処理が終わったら再度プロジェクトを右クリックし[実行]-[maven install]を選択する。

「BUILD SUCCESS」のメッセージが表示されればOK！

トップページを作成する

src/main/resources
　└templates
　　└index.html

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

<h1>本棚アプリ</h1>
<p>本棚に本を収納するアプリを作ります。</p>
<p th:text="${msg}">${msg}</p>

</body>
</html>

index.html を表示するためのコントローラを作成する。
src/main/java
　└jp.or.jeed
　　└IndexController.java

package jp.or.jeed;

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

@Controller
public class IndexController {

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

ソースコードをGitで管理する
SpringBootアプリケーションが動いていたら、一旦停止する。

プロジェクトを右クリックし[チーム]-[プロジェクトの共用]を選択する。
リポジトリータイプは「Git」を選択して「次へ」をクリックする。
リポジトリーの右側の「作成」をクリックする。
リポジトリーディレクトリは「Z:\Java\git」を指定して「完了」をクリックする。

Gitで管理されると、プロジェクト名の右側に [git master] のような表示が追加される。

Gitで管理不要なファイルを除外する
ファイルを除外するには、.gitignore ファイルに除外するファイルを追加すればよい。

.gitignore を見えるようにする
.gitignore ファイルが見えていないので、見えるようにするために以下の設定を行う。

プロジェクトエクスプローラーの右上にある「▽」をクリックする。
「フィルターおよびカスタマイズ」を選択する。

「.*リソース」のチェックをはずして「OK」をクリックする。

.gitignoreを編集する
.gitignore ファイルをダブルクリックして開く。
3行目（target/ の下）に「.mvn/」と「mvnw」と「mvnw.cmd」を追加して保存する。

HELP.md
target/
.mvn/
mvnw
mvnw.cmd
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**
!**/src/test/**

（以下略）

Gitに現在のソースをコミットする
プロジェクトを右クリックし[チーム]-[コミット]を選択する。
「Gitステージング」タブが開くので、Gitで管理したいファイルを「ステージされた変更」に移動する。

右側の「コミット・メッセージ」に「first commit」などのコメントを入力する。
右下の「コミット」をクリックする。

※「コミットおよびプッシュ」は今回は使わない。

トップページに本棚リストへのリンクを追加する

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

<h1>本棚アプリ</h1>
<p>本棚に本を収納するアプリを作ります。</p>


<a href="/bookshelf">本棚リスト</a>

</body>
</html>

本棚リストのリンクをクリックするとエラーになる。

動くようにするために、HTMLテンプレートとコントローラを作成する。

BookshelfController.java

package jp.or.jeed;

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

@Controller
public class BookshelfController {

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

}

bookshelf.html

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

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<a href="/">トップページに戻る</a>

</body>
</html>

本棚を追加できるようにしたい！

HTMLテンプレートにフォームを追加する。

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

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

この状態で「http://localhost:8080/bookshelf」にアクセスするとエラーが発生する。

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "name" (template: "bookshelf" - line 14, col 34)
	at org.thymeleaf.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:290) ~[thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
	at org.thymeleaf.standard.expression.SelectionVariableExpression.executeSelectionVariableExpression(SelectionVariableExpression.java:158) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
	at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:92) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 :
（以下略）

コントローラからHTMLテンプレートに bookshelf を渡せるようにする。
Bookshelf クラスを作ってないので、new Bookshelf() のところでコンパイルエラーが発生して赤線が出ている。

package jp.or.jeed;

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

@Controller
public class BookshelfController {

	@RequestMapping("/bookshelf")
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		return mav;
	}

}

エラーが発生している new Bookshelf() の上にマウスカーソルを移動すると、クイックフィックスが表示される。
「クラス Bookshelf を作成します」をクリックするとクラス新規作成のダイアログが表示されるので「完了」をクリックする。

Bookshelfクラス内に name を追加する。

package jp.or.jeed;

public class Bookshelf {
    private String name;
}

メニューバーから[ソース]-[getter および setter の生成」を選択する。
name にチェックを入れて「OK」をクリックすると、Bookshelfにコードが追加される。

package jp.or.jeed;

public class Bookshelf {
	private String name;

	public String getName() {
		return name;
	}

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

送信ボタンの文字列を変更する。

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

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" value="本棚を作成" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

コントローラで本棚リストからのデータを受け取ってコンソールに表示してみる。

package jp.or.jeed;

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

@Controller
public class BookshelfController {

	@RequestMapping(value = "/bookshelf", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		return mav;
	}

	@RequestMapping(value = "/bookshelf", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("bookshelf") Bookshelf bookshelf) {
		System.out.println("本棚の名前は " + bookshelf.getName());
		return mav;
	}
}

データベース HSQLDB にデータを保存するための設定を追加する。

src/main/resources
　└application.properties

application.properties ファイルに設定を書く。

spring.datasource.url=jdbc:hsqldb:file:./db/bookshelf
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver

Bookshelf をデータベースに格納できるように修正する。

package jp.or.jeed;

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;
	}
}

Bookshelf をデータベースに保存するための仕事をしてくれるクラス（インタフェース）を用意する。

BookshelfRepository.java

package jp.or.jeed;

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

public interface BookshelfRepository extends JpaRepository<Bookshelf, Long> {

}

リポジトリを作ったので、それをコントローラで使って、データベースに保存してみる。

package jp.or.jeed;

import java.util.List;

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

@Controller
public class BookshelfController {

	@Autowired
	private BookshelfRepository repository;

	@RequestMapping(value = "/bookshelf", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		List<Bookshelf> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value = "/bookshelf", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("bookshelf") Bookshelf bookshelf) {
		repository.saveAndFlush(bookshelf);
		return new ModelAndView("redirect:/bookshelf");
	}
}

HTMLテンプレートで受け取った list を表示する。

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

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" value="本棚を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>本棚の名前</th>
  </tr>
  <tr th:each="bs : ${list}">
    <td th:text="${bs.id}"></td>
    <td th:text="${bs.name}"></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>