振り返り
- 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>