チュートリアル：画面遷移

前提知識

以下の前提知識が必要となります。わからない技術がある場合、事前に調べてから取り組んでください。

タスクの進め方

  • Discordでタスクの開始連絡と完了予定日の連絡をしてください。
    • (例) チュートリアル：画面表示
      • 20××年××月××日(×) 開始
      • 20××年××月××日(×) 完了予定

  • 質問や相談は積極的に行ってください。
    • チャットでも、MTGでもお好きな方法でメンターにコンタクトを取ってください。
    • MTGで質問/確認を行いたい場合は、メンターと日程調整を行い会議設定を行ってください。

開発内容

ナビゲーションバーの「Hello World」を押下した際、http://localhost:8080/tutorial/ に遷移するように修正を行ってください。

Viewの編集

workspace/src/main/resources/templates/layout 配下の「navbar.html」ファイルを以下の通り編集してください。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<title>navbar</title>
</head>

<body>
	<div th:fragment="navbar" th:remove="tag">

		<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

			<!-- Sidebar - Brand -->
			<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
				<div class="sidebar-brand-text mx-3">InvenTrack</sup></div>
			</a>

			<!-- Divider -->
			<hr class="sidebar-divider my-0" />

			<!-- Heading -->
			<!-- <div class="sidebar-heading">Interface</div> -->

			<!-- Nav Item - Dashboard -->
			<li class="nav-item">
				<a class="nav-link" href="#">
					<span>在庫一覧</span>
				</a>
				<a class="nav-link" href="#">
					<span>入庫管理</span>
				</a>
				<a class="nav-link" href="#">
					<span>出庫管理</span>
				</a>
				<a class="nav-link" href="#">
					<span>分類ラベリング管理</span>
				</a>
				<a class="nav-link" href="#">
					<span>操作履歴管理</span>
				</a>
				<a class="nav-link" th:href="@{/tutorial/}">
					<span>Hello World</span>
				</a>
			</li>

		</ul>

	</div>
</body>

</html>

動作確認

作成したファイルをすべて保存し、Dockerイメージを再起動してください。http://localhost:8080/tutorial/ にアクセス後、ナビゲーションバーの「Hello World」押下した際、以下のような画面が出ることを確認してください。

レビュー依頼

前回タスクと同様に変更ファイルのコミットおよびプルリクエストの作成を行ってください。

作成したプルリクエストのURLをコピーし、メンターに完了報告およびレビュー依頼を行ってください。