More than 3 years have passed since last update.

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

Last updated at 2021-07-08Posted at 2021-07-06

振り返り

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

本日やること

各CRUD処理の画面イメージ
処理の概要について触れる

insert処理のイメージスライド

- 新規登録タブから新規登録画面に遷移。 - 購入した日時、種別、品名、金額を入力し登録ボタンを押下。 - 登録完了後、トップに戻るボタンから一覧表示し、商品が追加されていることを確認。

新規登録画面の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

<!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処理のイメージスライド

- 更新タブから更新登録画面に遷移。 - 更新したいデータの列にある更新ボタンを押下し更新入力画面に遷移。 - 更新入力画面では既に登録されているデータを画面にデフォルト表示。 - 更新したい値に入力、変更後更新ボタンを押下し変更完了画面に遷移。 - 更新完了画面ではDBに更新された値を画面に表示。 - トップ画面に戻り、値が更新されていることを確認。

更新画面の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

<!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

<!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

<!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処理のイメージスライド

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

削除画面の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

<!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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up