Springboot＋Tymeleaf+Mybatis+MySQLでのCRUD処理実装（基本）画面周り

やったこと

SpringbootでCRUD処理の画面周り実装

コード

top.html(最初に表示される画面)

<html xmlns:th="http://www.thymeleaf.org" >はTymeleafを使うためのお作法。忘れず付けること。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>新規登録ページ</title>
</head>
<body>
	<h1>S.O.N.G.所属シンフォギア奏者データベース</h1>
	<h3>新奏者登録</h3>
	<form th:action = "@{/user/add}" th:method = "post">
		<div>
			<input type = "submit" value = "TO SING UP FORM" style = "width: 150px"/>
		</div>
	</form>
	<h3>奏者検索</h3>
	<form th:action = "@{/user/search}" th:method = "get">
		<div>
			<input type = "submit" value = "TO SEARCH FORM" style = "width: 150px"/>
		</div>
	</form>
	<h3>全奏者リスト</h3>
		<form th:action = "@{/user/list}" th:method = "post">
		<div>
			<input type = "submit" value = "PLAYER LIST" style = "width: 105px"/>
		</div>
	</form>
</body>
</html>

player_search.html(ID検索画面)

検索結果は同じ画面で表示。[th:if="${user_info}"]を使って、検索結果が入っているときだけ表示する。

DELETEボタンとUPDATEボタンはそれぞれ、結果のIDがURLのパスに入るようにしている。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>ユーザー情報検索</title>
</head>
<body>
	<h1>S.O.N.G.所属シンフォギア奏者情報検索</h1>
	<h3>奏者検索</h3>
	<form th:action="@{/user/id_search}" th:object="${user_info}"
		th:method="post">
		<div>
			奏者No.入力：<input type="text" name="id" size="40"/>
		</div>
		<div>
			<input type="submit" value="SEARCH" style="width: 100px"/>
		</div>
	</form>
	<form th:action = "@{/user}" th:method = "get">
		<div>
			<input type = "submit" value = "TO TOP" style = "width: 100px"/>
		</div>
	</form>
	<div th:if="${user_info}">
		<table th:object="${user_info}">
			<tr>
				<th class="cell_title">オーダー：</th>
				<td th:text="第 + *{id} + 奏者" ></td>
			</tr>
			<tr>
				<th class="cell_title">適合者：</th>
				<td th:text="*{name}"></td>
			</tr>
			<tr>
				<th class="cell_title">GEAR：</th>
				<td th:text="*{symphogear_name}"></td>
			</tr>
		</table>
		<table>
			<tr>
				<td>
					<form th:action = "@{/user/delete/id={id}(id=*{id})}" th:method = "delete" th:object = "${user_info}">
						<input type = "submit" value = "DELETE" style = "width: 75px"/>
					</form>
				</td>
				<td>
					<form th:action = "@{/user/conf/id={id}(id=*{id})}" th:method = "put" th:object = "${user_info}">
						<input type = "submit" value = "UPDATE" style = "width: 75px"/>
					</form>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

list.html（全件表示）

基本的にはplayer_search.htmlとほぼ一緒。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>ユーザー情報検索</title>
</head>
<body>
<h1>全奏者リスト表示</h1>
<form th:action = "@{/user}" th:method = "get">
	<div>
		<input type = "submit" value = "TO TOP" style = "width: 100px"/>
	</div>
</form>
<div th:if="${users_info}">
	<table th:each="users_info:${users_info}" th:object="${users_info}">
		<tr>
			<th class="cell_title">オーダー：</th>
			<td th:text="第+*{id}+奏者"></td>
		</tr>
		<tr>
			<th class="cell_title">適合者：</th>
			<td th:text="*{name}"></td>
		</tr>
		<tr>
			<th class="cell_title">GEAR：</th>
			<td th:text="*{symphogear_name}"></td>
		</tr>
		<table>
			<tr>
				<td>
					<form th:action = "@{/user/delete/id={id}(id=*{id})}" th:method = "delete">
					<input type = "submit" value = "DELETE" style = "width: 75px"/>
					</form>
				</td>
				<td>
					<form th:action = "@{/user/conf/id={id}(id=*{id})}" th:method = "put">
						<input type = "submit" value = "UPDATE" style = "width: 75px"/>
					</form>
				</td>
			</tr>
		</table>
		<br>
	</table>
</div>
</body>
</html

add_player.html（新規登録フォーム）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>新奏者登録</title>
</head>
<body>
	<h2>新適合者登録画面</h2>
	<form th:action="@{/user/add_comp}" th:object="${user_add}"
		th:method="post">
		<div>
			ID : <input type="text" name="id" size="40"/>
		</div>
		<br>
		<div>
			NAME:<input type="text" name="name" size="40"/>
		</div>
		<br>
		<div>
			GEAR:<input type="text" name="symphogear_name" size="40"/>
		</div>
		<div>
			<input type="submit" value="SING UP" style="width: 100px"/>
		</div>
		<br/>
	</form>
</body>
</html>

add_comp.html(登録完了のメッセージ表示)

確認のため登録内容が表示されるようにしている。

トップ画面に戻るボタンも表示。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>登録完了</title>
</head>
<body>
	<h1>REGISTRATION COMPLETE!!</h1>
	<div th:if="${user_add}">
		<h3>登録奏者情報</h3>
		<table th:object="${user_add}">
			<tr>
				<th class="cell_title">オーダー：</th>
				<td th:text="第 + *{id} + 奏者"></td>
			</tr>
			<tr>
				<th class="cell_title">適合者：</th>
				<td th:text="*{name}"></td>
			</tr>
			<tr>
				<th class="cell_title">GEAR：</th>
				<td th:text="*{symphogear_name}"></td>
			</tr>
		</table>
	</div>
	<form th:action = "@{/user}" th:method = "get">
		<div>
			<input type = "submit" value = "TO TOP" style = "width: 100px"/>
		</div>
	</form>
</body>
</html>

conf_player.html(情報編集フォーム)

フォーム内に編集前のデータが表示されるようにしている。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>ユーザー情報変更</title>
</head>
<body>
<h1>奏者情報編集</h1>
	<table th:object = "${user_select}">
		<tr>
			<th class="cell_title">オーダー：</th>
			<td th:text="第 + *{id} + 奏者" ></td>
		</tr>
	</table>
	<form th:action = "@{/user/edit/id={id}(id = *{id})}" th:object="${user_select}" th:method = "post">
		<label>奏者名:<input type="text" th:field="*{name}"></label><br>
        <label>GEAR:<input type="text" th:field="*{symphogear_name}"></label><br>
        <button>EDIT</button>
	</form>
		

</body>
</html>

edit.html(編集完了のメッセージ)

メッセージとトップ画面へ戻るボタンのみ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>ユーザー情報編集</title>
</head>
<body>
	<h1>UPDATE COMPLETE!</h1>
	<form th:action = "@{/user}" th:method = "get">
		<div>
			<input type = "submit" value = "TO TOP" style = "width: 100px"/>
		</div>
	</form>
</body>
</html>

delete.html（削除完了のメッセージのみ）

メッセージとトップ画面へ戻るボタンのみ。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>削除完了</title>
</head>
<body>
	<h1>DELETE COMPLETE！</h1>
	<form th:action = "@{/user}" th:method = "get">
		<div>
			<input type = "submit" value = "TO TOP" style = "width: 100px"/>
		</div>
	</form>
</body>
</html>

感想・気づいたこと

とりあえず動くことだけ考えたので、細かいレイアウトとかは気にしていない。

余裕できてきたら画面周りの装飾もいろいろ試そうかと思う。

実装中のエラーがJavaより、htmlのコード間違いの方が多かった。スペル間違いなど見つけにくいので注意。

← Go home