Spring Bootを使ってみた！(家計簿アプリ) 続編

## 振り返り
- Spring Bootを使って簡易アプリを作ったので、備忘録として残している。
- 前回はアプリイメージから機能概要の説明を記載。
- Controller, Service, Repositoryなどのクラスを記載。

## 本日やること
- 各CRUD処理の画面イメージ
- 処理の概要について触れる

## insert処理のイメージスライド
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQMwTPCzvEMd-aoi5yHORNYMzLG540jDV0U_NbTxLihvySkCGw2EpuVKISwzBkk9vtR1WBh4AOhj2Z2/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="440" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
- 新規登録タブから新規登録画面に遷移。
- 購入した日時、種別、品名、金額を入力し登録ボタンを押下。
- 登録完了後、トップに戻るボタンから一覧表示し、商品が追加されていることを確認。

## 新規登録画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>新規登録画面</h1>

	<form method="post" th:action="@{/account/insert}">
		日時：<input type="date" name="date" required><br>
		種別：
		<input type="radio" name="type" value="1" checked>食費
		<input type="radio" name="type" value="2">趣味
		<input type="radio" name="type" value="3">教養<br>
		品名：<input type="text" name="item" maxlength="15" size="30" required><br>
		金額：<input type="number" name="price" oninput="sliceMaxLength(this, 8)" required>円<br>
		<br> <input type="submit" value="登録">
	</form>

	<br>
	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>
	<br>

	<script>
		function sliceMaxLength(elem, maxLength) {
			elem.value = elem.value.slice(0, maxLength);
		}
	</script>
	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- 入力項目に関して、日付はdate、種別はradio、品名はtext、金額はnumberに設定。
- 日時と品名、金額は必須項目に設定、種別はデフォルトで食費を設定
- 品名は15文字を最大文字数として設定。
- 金額はjavascriptで最大8桁までに設定。

## 購入完了画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>登録完了画面</h1>
	<h2>登録完了しました！！</h2>
	
	<table class="table table-striped">
		<tr>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
		</tr>
		<tr>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
		</tr>
	</table>
	
	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>
	
	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- insert処理に使用した項目をテーブル形式で表示。
- 種別はif文で食費、趣味、教養で分岐表示。

## update処理のイメージスライド
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQEeGo0LZ5zQn8cfPVaw9cZQi3yWEy-UcRqDZyT5SzoZH3OkhlzM24cdfe_XtF_grAQ_S-yAcNFjreq/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="440" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
- 更新タブから更新登録画面に遷移。
- 更新したいデータの列にある更新ボタンを押下し更新入力画面に遷移。
- 更新入力画面では既に登録されているデータを画面にデフォルト表示。
- 更新したい値に入力、変更後更新ボタンを押下し変更完了画面に遷移。
- 更新完了画面ではDBに更新された値を画面に表示。
- トップ画面に戻り、値が更新されていることを確認。

## 更新画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>更新画面</h1>

	<table class="table table-striped">
		<tr>
			<th>No</th>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
			<th>更新ボタン</th>
		</tr>
		<tr th:each="account, accountStat : ${list}">
			<td th:text="${accountStat.count}"></td>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
			<td><a th:href="@{/account/updateInput(id=${account.id})}"><input type="button" value="更新"></a></td>
		</tr>
	</table>

	<br>
	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>
	<br>

	<script th:src="@{/js/bootstrap.bundle.min.js}">

	</script>
</body>
</html>
```
- 一覧画面に更新ボタンとトップに戻るボタンを追加、合計金額の欄を削除

## 更新入力画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>更新入力画面</h1>
	<h2>下記データを変更してください</h2>
	
	<form method="post" th:action="@{/account/updateConfirm}">
		<input type="hidden" name="id" th:value="${account.id}">
		日時：<input type="date" name="date" th:value="${account.date}" required><br>
		種別：
		<div th:if="${account.type == 1}">
		<input type="radio" name="type" value="1" checked>食費
		<input type="radio" name="type" value="2">趣味
		<input type="radio" name="type" value="3">教養<br>
		</div>
		<div th:if="${account.type == 2}">
		<input type="radio" name="type" value="1">食費
		<input type="radio" name="type" value="2" checked>趣味
		<input type="radio" name="type" value="3">教養<br>
		</div>
		<div th:if="${account.type == 3}">
		<input type="radio" name="type" value="1">食費
		<input type="radio" name="type" value="2">趣味
		<input type="radio" name="type" value="3" checked>教養<br>
		</div>
		品名：<input type="text" name="item" th:value="${account.item}"  maxlength="15" size="30" required><br>
		金額：<input type="number" name="price" th:value="${account.price}" oninput="sliceMaxLength(this, 8)" required>円<br>
		<br> <input type="submit" value="更新">
	</form>

	<script>
		function sliceMaxLength(elem, maxLength) {
			elem.value = elem.value.slice(0, maxLength);
		}
	</script>

	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- 更新画面で選択した更新ボタンに紐づいているidを用いて購入情報をDBから取得。
- 種別は3パターンそれぞれのデフォルトチェック状態をif文で分岐。
- 品名や金額の上限設定は新規登録処理と同様。

## 更新確認画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>更新確認画面</h1>
	<h2>下記データに更新していいですか？</h2>

	<table class="table table-striped">
		<tr>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
		</tr>
		<tr>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
		</tr>
	</table>

	<form method="post" th:action="@{/account/update}">
		<input type="hidden" name="id" th:value="${account.id}">
		<input type="hidden" name="date" th:value="${account.date}">
		<input type="hidden" name="type" th:value="${account.type}">
		<input type="hidden" name="item" th:value="${account.item}">
		<input type="hidden" name="price" th:value="${account.price}">
		<input type="submit" value="確定">
	</form>

	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- 更新処理を確定する場合はhiddenタグで先ほど入力した値をpostしている。

## 更新完了画面のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>更新完了画面</h1>
	<h2>データを更新完了しました！！</h2>
	
	<table class="table table-striped">
		<tr>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
		</tr>
		<tr>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
		</tr>
	</table>

	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>

	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- 更新完了後のデータを表示するだけ。

## delete処理のイメージスライド
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTIGFwFTd1KRi1SceksdlqBbd5nB-6BUJdg0g9vhSTNvKcGdNJvdpdVjkiVx2KpXCMHFudSjMVDV7oG/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="440" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

- 削除タブから削除画面に遷移。
- 削除したいデータの列にある削除ボタンを押下し削除確認画面に遷移。
- 削除確認画面ではDBから削除しようとしているデータを取得し、表示。
- 削除ボタンを再度押すと、DBから該当データを削除し削除完了画面に遷移。
- トップ画面に戻り、値がなくなっていることを確認。

## 削除画面のHTML

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>削除画面</h1>

	<table class="table table-striped">
		<tr>
			<th>No</th>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
			<th>削除ボタン</th>
		</tr>

		<tr th:each="account, accountStat : ${list}">
			<td th:text="${accountStat.count}"></td>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
			<td><a th:href="@{/account/deleteConfirm(id=${account.id})}"><input type="button" value="削除"></a></td>
		</tr>
	</table>

	<br>
	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>
	<br>

	<script th:src="@{/js/bootstrap.bundle.min.js}">
	</script>
</body>
</html>
```
- 更新処理とほぼ同様処理。

## 削除確認のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>削除確認画面</h1>
	<h2>下記データを削除していいですか？</h2>
	
	<table class="table table-striped">
		<tr>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
		</tr>
		<tr>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
		</tr>
	</table>

	<form method="post" th:action="@{/account/delete}">
		<input type="hidden" name="id" th:value="${account.id}">
		<input type="submit" value="削除">
	</form>

	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```
- 削除ボタン押下時にid情報をpostしてDBから該当データを削除

## 削除完了のHTML
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>家計簿</title>
</head>
<body>
	<div th:replace="~{block/header::headerAccount}"></div>
	<h1>削除完了画面</h1>
	<h2>下記データを削除完了しました！！</h2>
	
	<table class="table table-striped">
		<tr>
			<th>日時</th>
			<th>種別</th>
			<th>品名</th>
			<th>金額</th>
		</tr>
		<tr>
			<td th:text="${account.date}"></td>
			<td th:if="${account.type == 1}">食費</td>
			<td th:if="${account.type == 2}">趣味</td>
			<td th:if="${account.type == 3}">教養</td>
			<td th:text="${account.item}"></td>
			<td th:text="${account.price} + '円'"></td>
		</tr>
	</table>

	<div id="top">
		<a th:href="@{/account}"><input type="button" value="トップに戻る"></a>
	</div>

	<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</body>
</html>
```

### まだ記載できていない残りの部分は後日記載します。

### 次の記事(Googleドライブ内の全てのtxtファイルを1つのスプレッドシートにまとめる！(GAS))
https://qiita.com/takaakitanaka_cre-co/items/71b5f8316a55d416d1c2