[UPDATE] 2次機能を実装しました。

src/main/resources/templates/course_create.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Insert title here</title>
+	<link rel="stylesheet" th:href="@{/css/menu.css}">
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body class="pb-5 pt-5">
+
+	<div th:replace="~{header :: header}"></div>
+
+	<h1>コース登録</h1>
+
+	<form th:action="@{/course/create/ratio}" th:object="${courseForm}" method="post">
+
+
+		<div>
+			<label for="courseName">コース名</label>
+
+			<input type="text" id="courseName" th:field="*{courseName}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="description">説明</label>
+
+			<textarea id="description" th:field="*{description}" placeholder="説明を入力してください">
+			</textarea>
+		</div>
+
+		<br>
+
+
+		<button type="submit">登録</button>
+
+	</form>
+
+	<div th:replace="~{footer :: footer}"></div>
+
+
+</body>
+
+</html>

src/main/resources/templates/course_create_ratio.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Insert title here</title>
+	<link rel="stylesheet" th:href="@{/css/menu.css}">
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body class="pb-5 pt-5">
+
+	<div th:replace="~{header :: header}"></div>
+
+	<h1>コース登録</h1>
+
+	<form th:action="@{/course/create}" th:object="${allocationFormList}" method="post">
+
+
+		<div>
+			<label for="allocationRatio1">給与</label>
+			<input type="number" id="allocationRatio1" th:field="*{allocationRatio1}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio2">賞与</label>
+			<input type="number" id="allocationRatio2" th:field="*{allocationRatio2}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio3">その他</label>
+			<input type="number" id="allocationRatio3" th:field="*{allocationRatio3}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio4">固定費</label>
+			<input type="number" id="allocationRatio4" th:field="*{allocationRatio4}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio5">食費</label>
+			<input type="number" id="allocationRatio5" th:field="*{allocationRatio5}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio6">交通費</label>
+			<input type="number" id="allocationRatio6" th:field="*{allocationRatio6}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio7">日用品費</label>
+			<input type="number" id="allocationRatio7" th:field="*{allocationRatio7}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio8">被服/美容費</label>
+			<input type="number" id="allocationRatio8" th:field="*{allocationRatio8}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio9">医療費</label>
+			<input type="number" id="allocationRatio9" th:field="*{allocationRatio9}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio10">趣味/娯楽費</label>
+			<input type="number" id="allocationRatio10" th:field="*{allocationRatio10}">
+		</div>
+
+		<br>
+
+		<div>
+			<label for="allocationRatio11">その他</label>
+			<input type="number" id="allocationRatio11" th:field="*{allocationRatio11}">
+		</div>
+
+		<br>
+
+		<button type="submit">登録</button>
+
+
+	</form>
+
+
+	<div th:replace="~{footer :: footer}"></div>
+
+
+</body>
+
+</html>

src/main/resources/templates/goal_record.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head>
+	<meta charset="UTF-8">
+	<title>目標履歴</title>
+
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body class="pb-5 pt-5">
+
+	<div th:replace="~{header :: header}"></div>
+
+	<h1>目標履歴</h1>
+
+
+	<div>
+		<ul>
+			<li th:each="goalForm : ${goalCompleteFormList}" class="transaction-item">
+				<div>
+					<p>
+						目標名：
+						<span th:text="${goalForm.goalTitle}">
+						</span>
+
+						<br>
+
+						目標説明：
+						<span th:text="${goalForm.goalSubtitle}">
+						</span>
+
+						<br>
+
+						目標金額：
+						<span th:text="${goalForm.targetAmount}">
+						</span>
+
+						<br>
+
+						目標達成期限：
+						<span th:text="${goalForm.deadline}">
+						</span>
+
+						<br>
+
+					</p>
+
+					</form>
+
+				</div>
+
+
+				<div class="transaction-buttons">
+
+					<form th:action="@{/goal/delete}" method="post">
+
+						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
+						<input type="hidden" name="record" th:value="1">
+						
+						<button type="submit">
+							削除
+						</button>
+
+					</form>
+
+				</div>
+
+			</li>
+
+		</ul>
+
+	</div>
+
+	<form th:action="@{/goal}" method="get">
+
+		<button type="submit">
+			戻る
+		</button>
+
+	</form>
+
+
+	<div th:replace="~{footer :: footer}"></div>
+
+</body>
+
+
+</html>

src/main/resources/templates/goal_view.html

@@ -6,62 +6,200 @@
 	<title>目標詳細</title>
 
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
 </head>
 
 <body class="pb-5 pt-5">
-	<div th:replace="~{header :: header}"></div>
 
+	<div th:replace="~{header :: header}"></div>
 
 	<h1>目標詳細</h1>
 
+
+	<div th:if="${graphGoal != null}">
+
+		<h2 th:text="${graphGoal.goalTitle}"></h2>
+
+		<p>
+			目標金額：
+			<span th:text="${graphGoal.targetAmount}"></span>
+		</p>
+
+	</div>
+
+
+	<div style="width: 600px; height: 300px;">
+		<canvas id="myChart"></canvas>
+	</div>
+
+
+	<script th:inline="javascript">
+
+		const months =
+            /*[[${achievementList.![month.monthValue]}]]*/[];
+
+		const achievementRates =
+            /*[[${achievementList.![achievementRate]}]]*/[];
+
+		const labels =
+			months.map(month => month + '月');
+
+
+		const myCt =
+			document.getElementById('myChart');
+
+
+		const myChart =
+			new Chart(myCt, {
+
+				type: 'bar',
+
+				data: {
+
+					labels: labels,
+
+					datasets: [
+						{
+							label: '達成率',
+
+							data: achievementRates,
+
+							backgroundColor:
+								'rgba(54, 162, 235, 0.5)',
+
+							borderColor:
+								'rgba(54, 162, 235, 1)',
+
+							borderWidth: 1
+						}
+					]
+				},
+
+				options: {
+
+					responsive: true,
+
+					scales: {
+
+						y: {
+							beginAtZero: true,
+							max: 100,
+
+							ticks: {
+								callback: function (value) {
+									return value + '%';
+								}
+							}
+						}
+					}
+				}
+			});
+
+	</script>
+
+
 	<div>
+
 		<ul>
+
 			<li th:each="goalForm : ${goalFormList}" class="transaction-item">
 
 				<div>
-					<p>
-						目標名：
-						<span th:text="${goalForm.goalTitle}"></span>
-						<br>
-						目標説明：
-						<span th:text="${goalForm.goalSubtitle}"></span>
-						<br>
-						目標金額：
-						<span th:text="${goalForm.targetAmount}"></span>
-						<br>
-						目標達成期限：
-						<span th:text="${goalForm.deadline}"></span>
-						<br>
-						達成率：
-						<span th:text="${goalForm.achievementRate} + '%'"></span>
-						<br>
-					</p>
+
+					<form th:action="@{/goal}" method="get">
+
+						<input type="radio" name="goalId" th:value="${goalForm.goalId}"
+							th:checked="${graphGoal != null and graphGoal.goalId == goalForm.goalId}"
+							onchange="this.form.submit()">
+
+						<p>
+
+							目標名：
+							<span th:text="${goalForm.goalTitle}">
+							</span>
+
+							<br>
+
+							目標説明：
+							<span th:text="${goalForm.goalSubtitle}">
+							</span>
+
+							<br>
+
+							目標金額：
+							<span th:text="${goalForm.targetAmount}">
+							</span>
+
+							<br>
+
+							目標達成期限：
+							<span th:text="${goalForm.deadline}">
+							</span>
+
+							<br>
+
+							達成率：
+							<span th:text="${goalForm.achievementRate} + '%'">
+							</span>
+
+						</p>
+
+					</form>
+
 				</div>
 
+
 				<div class="transaction-buttons">
 
 					<form th:action="@{/goal/edit}" method="get">
+
 						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
-						<button type="submit">編集</button>
+
+						<button type="submit">
+							編集
+						</button>
+
 					</form>
+
+
 					<form th:action="@{/goal/delete}" method="post">
+
 						<input type="hidden" name="goalId" th:value="${goalForm.goalId}">
-						<button type="submit">削除</button>
+
+						<button type="submit">
+							削除
+						</button>
+
 					</form>
 
 				</div>
 
 			</li>
+
 		</ul>
+
 	</div>
 
+
 	<form th:action="@{/goal/create}" method="get">
-		<button type="submit">新規登録</button>
+
+		<button type="submit">
+			新規登録
+		</button>
+
 	</form>
+	<form th:action="@{/goal/record}" method="get">
+
+		<button type="submit">
+			履歴
+		</button>
+
+	</form>
+
 
 	<div th:replace="~{footer :: footer}"></div>
 
 </body>
 
+
 </html>

src/main/resources/templates/select_course.html

@@ -1,50 +1,65 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-<title>コース選択</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+	<title>コース選択</title>
 </head>
+
 <body>
 	<div th:replace="~{header :: header}"></div>
-	
+
 	<h1>コース選択</h1>
-	
-	
-	<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post">  
+
+	<th:block th:if="${mode == 'change'}">
+		<form th:action="@{/course/create}" method="get">
+			<button type="submit">新規登録</button>
+		</form>
+
+
+	</th:block>
+	<form th:action="${mode == 'regist'} ? @{/user/register/return}: @{/change}" method="post">
 		<button type="submit">確定</button>
-		
+
 		<div class="accordion" id="accordionExample">
-		  <div class="accordion-item" th:each="course:${courseList}">
-		    <h2 class="accordion-header d-flex align-items-center">
-			  <input type="radio" name="courseId" th:value="${course.courseId}" th:checked="${course.courseId==currentCourseId}" class="form-check-input ms-3 me-2">
-		      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" th:data-bs-target="'#collapse' + ${course.courseId}" aria-expanded="false" aria-controls="'collapse' + ${course.courseId}">
-				<span th:text="${course.courseName}"></span>
-		      </button>
-		    </h2>
-		    <div th:id="'collapse' + ${course.courseId}" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
-		      <div class="accordion-body">
-		        <span th:text="${course.description}"></span>
-				<table border="1">
-					<tr>
-						<th>カテゴリ名</th><th>配分(%)</th>
-					</tr>
-					<tr th:each="courseInfo:${courseInfoList}" th:if="${course.courseId == courseInfo.courseId}">
-						<td th:text="${courseInfo.categoryName}"></td>
-						<td th:text="${courseInfo.allocationRatio}"></td>
-					</tr>
-				</table>
-		      </div>
-		    </div>
-		  </div>
+			<div class="accordion-item" th:each="course:${courseList}">
+				<h2 class="accordion-header d-flex align-items-center">
+					<input type="radio" name="courseId" th:value="${course.courseId}"
+						th:checked="${course.courseId==currentCourseId}" class="form-check-input ms-3 me-2">
+					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+						th:data-bs-target="'#collapse' + ${course.courseId}" aria-expanded="false"
+						aria-controls="'collapse' + ${course.courseId}">
+						<span th:text="${course.courseName}"></span>
+					</button>
+				</h2>
+				<div th:id="'collapse' + ${course.courseId}" class="accordion-collapse collapse"
+					data-bs-parent="#accordionExample">
+					<div class="accordion-body">
+						<span th:text="${course.description}"></span>
+						<table border="1">
+							<tr>
+								<th>カテゴリ名</th>
+								<th>配分(%)</th>
+							</tr>
+							<tr th:each="courseInfo:${courseInfoList}"
+								th:if="${course.courseId == courseInfo.courseId}">
+								<td th:text="${courseInfo.categoryName}"></td>
+								<td th:text="${courseInfo.allocationRatio}"></td>
+							</tr>
+						</table>
+					</div>
+				</div>
+			</div>
 		</div>
 	</form>
-	
+
 	<th:block th:if="${mode=='change'}">
 		<div th:replace="~{footer :: footer}"></div>
 	</th:block>
-	
+
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>