【Java】JSPの分割-部品化で画面を統一-

解説動画

今回は、JSPを分割して、部品化します。
webサイトでは、ヘッダーやフッターなどは共通なデザインが多いですよね。
また、共通にすることで、保守性も上がります。

■動画はこちら

■Youtube版の解説で使用しているソースコード
動画と一緒にこちらも参考にどうぞ。

動画に出てきたパラメーター付きのトップページ（index.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<jsp:include page="/WEB-INF/jsp/header.jsp">
	<jsp:param name="title" value="Java ゆるふわ"/>
</jsp:include>

<div class="main-contents">

	<h2>お知らせ</h2>
	<ul class="para-contents">
		<li>【初級編(30)】クラスの継承(1)が公開されました。 - 2023/09/21</li>
		<li>【初級編(29)】staticメソッドを使うが公開されました。 - 2023/09/14</li>
		<li>【初級編(28)】HashMapを使うが公開されました。 - 2023/09/07</li>
		<li>【初級編(27)】ArrayListを使うが公開されました。 - 2023/09/05</li>
		<li>【初級編(26)】スタックトレース(2)が公開されました。 - 2023/08/31</li>
	</ul>

</div>


<jsp:include page="/WEB-INF/jsp/footer.jsp" />

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<jsp:include page="/WEB-INF/jsp/header.jsp">

<jsp:param name="title" value="Java ゆるふわ"/>

</jsp:include>

<li>【初級編(30)】クラスの継承(1)が公開されました。 - 2023/09/21</li>

<li>【初級編(29)】staticメソッドを使うが公開されました。 - 2023/09/14</li>

<li>【初級編(28)】HashMapを使うが公開されました。 - 2023/09/07</li>

<li>【初級編(27)】ArrayListを使うが公開されました。 - 2023/09/05</li>

<li>【初級編(26)】スタックトレース(2)が公開されました。 - 2023/08/31</li>

</ul>

</div>

<jsp:include page="/WEB-INF/jsp/footer.jsp" />

共通ヘッダー（/WEB-INF/jsp/header.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<link href="style.css" rel="stylesheet" />
</head>
<body>

<h1>
	<img src="/testWeb/images/logo.png" class="logo">
	<span><%= request.getParameter("title") %></span>
</h1>

<nav>
	<ul>
		<li><a href="./index.jsp">TOP</a></li>
		<li><a href="./shokyu.jsp">初級編</a></li>
		<li><a href="./se.jsp">Standard Edition</a></li>
		<li><a href="./servlet.jsp">サーブレット</a></li>
	</ul>
</nav>

<hr>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>

</h1>

<nav>

<ul>

<li><a href="./se.jsp">Standard Edition</a></li>

<li><a href="./servlet.jsp">サーブレット</a></li>

</ul>

</nav>

<hr>

共通フッター（/WEB-INF/jsp/footer.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<footer>
<hr>
<div class="flex">
	<div>
		<img src="/testWeb/images/logo2.png" class="logo_footer">
	</div>
	<nav>
		<ul>
		<li><a href="./sitemap.jsp">サイトマップ</a></li>
		</ul>
	</nav>
</div>
</footer>
</body>
</html>