Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@dende-h(HIROYA SHITOGIDEN)

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

Posted at

前回の続き（画面周りの実装）

前回記事→https://qiita.com/dende-h/items/31fc0af17e75cd713468
SpringbootでCRUD処理の実装

##　HTMLのコード

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のコード間違いの方が多かった。スペル間違いなど見つけにくいので注意。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?