假設要撰寫很多的網頁，但每個網頁的前後都一樣，只有中間內容不一樣。此時在每個網頁都要寫 <html></html>，而上面的 logo、選單都要重覆寫一次，是很煩人的事。

Html 常會使用到第三方寫好的 javascript，請請在 Web Pages 下按右鍵/New Folder，Folder Name 輸入 static。

static 目錄內容

請下載 static.zip，下載後解壓縮到專案下的 web/static 目錄下。

header.jsp

在 WEB-INF 新增 views 目錄，然後新增 header.jsp 檔案，完整代碼如下。

底下有幾個地方要注意 :
1. 網頁的 icon 無論是使用 .ico 或 .png，在近期的 Chrom 怪怪的，但使用 Edge 則完全正常。
2. Java 區塊使用 <% ….. %> 包含住。

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
    <head>
        <title>MahalJSP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
        <link rel="Shortcut Icon" type="image/x-icon" href="/static/images/logo.ico" />        
        <script src="/static/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
		<script src="/static/SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
		<link href="/static/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
		<link href="/static/SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
    </head>
   
    <style>
        body {
            height : 100%;
            margin:0px;
            display:flex;
            flex-direction :column;
        }
        #base_banner{
            height: 80px;
            width:100%;
            background-image: url('/static/images/banner.png');
            background-repeat:no-repeat;
        }   
        #base_menu{
            position : relative;
            width:100%;
            height:40px;
            background-color:#0077ff;
        } 
	#base_content{
	    flex-grow:1;
	    display: flex;
	    flex-direction:column;
	    width:100%;
	    overflow:hidden;
	    background-color:#c0c0ff;
	    align-items:center;
	}        
	#base_copyright{
		background-color: #00aaff;
		width: 100%;
		height: 25px;
		text-align: right;
	}        
	ul.MenuBarHorizontal a {
		color: #000;
		background-color: transparent;
	}
	ul.MenuBarHorizontal a:hover{
		background-color: #005555;
	}
	ul.MenuBarHorizontal ul a {
		background-color: #dddddd;
	}
	ul.MenuBarHorizontal li.MenuBarItemIE {
		background: transparent;
	}   
    </style>
    <body>
        <%
            String userAccount = (String)session.getAttribute("userAccount");
        %>
        <a href="index">
            <div id="base_banner">
            </div>
        </a>
        <div id="base_menu">
            <ul id="MenuBar1" class="MenuBarHorizontal">
                <li>
                    <a>一般資訊</a>
                    <ul>
                        <li>
                            <a href="/finance/twstock">台灣股市</a>
                        </li>
                        <li>
                            <a href="/finance/twgold">黃金儲摺</a>
                        </li>
                        <li>
                            <a href="/finance/ai">AI 預測</a>
                        </li>                    
                        <li>
                            <a href="/solar">24節氣</a>
                        </li>                    
                        <li>
                            <a href="/tools">程式下載</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a>相片記錄</a>
                    <ul>
                        <li>
                            <a href="/gallery">相片瀏覽</a>
                        </li>
                        <li>
                            <a href="/upload/photo_form">上傳圖片</a>
                        </li>
                        <li>
                            <a href="/gallery/thumb">製作縮圖</a>
                        </li>                         
                    </ul>
                </li>

                <li>
                    <a href="/travel/">旅遊軌跡</a>
                </li>
                <li>
                    <a href="/streaming">網路直播</a>
                </li>
                <li>
                    <a href="/smonitor">監控系統</a>
                </li>
                <li>
                    <a href="/stream_history">錄影回放</a>
                </li>
                <li>
                    <a href="/pymovies">影片戲劇</a>
                </li>   
                <li>
                    <%
                        if (userAccount==null){
                            out.println("<a href='login'>登入</a>");
                        }
                        else{
                            out.println("<a href='logout'>登出</a>");                        
                        }
                    %>
                </li>
             </ul>            
        </div>
        <div id="base_content">

footer.jsp

在 WEB-INF\views 新增 footer.jsp，完整代碼如下。

    </div>
    <div id="base_copyright">
        Powered by Thomas(mahaljsp@gmail.com)
    </div>
    </body>
</html>
<script>
    var MenuBar1 = new Spry.Widget.MenuBar(
        "MenuBar1", {imgDown:"/static/SpryAssets/SpryMenuBarDownHover.gif",
        imgRight:"/static/SpryAssets/SpryMenuBarRightHover.gif"}
    );
</script>

index Servlet

新增 Servlet 檔案，Class Name 輸入 index，完整代碼如下。

package net.ddns.mahaljsp;

import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet(name = "index", urlPatterns = {"/index"})
public class index extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setAttribute("message", "歡迎光臨這是首頁");
        request.getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }
    @Override
    public String getServletInfo() {
        return "Short description";
    }
}

上面有一個重點，就是 urlPatterns 設定為「/index」，表示網址為 http://localhost:8085/thomas/index。而在 processRequest 方法中先設定要傳入的 message，然後使用如下方法套用 index.jsp 模板。

 request.getRequestDispatcher("/WEB-INF/views/index.jsp")

index.jsp

在 WEB-INF/views 裏增 index.jsp 檔案，然後使用 <%@ include file=”xxx.jsp” %> 或者是 <jsp:include page=”xxx.jpg”> 套用 header.jsp 及 footer.jsp，完整代碼如下。

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/header.jsp" %>
<h1>${message}</h1>
<%@ include file="/WEB-INF/views/footer.jsp" %>

<%@ include ….> 在編譯期就會完成，效能比較高，而 <jsp:include …> 則在執行時期才會完成，效能較差，但靈活性較佳。

NetBeans 測試

在 NetBeans 執行後，網址如下

http://localhost:8085/thomas/index

Tomcat 測試

停掉 NetBeans Tomcat，把專案 build/web/ 下的所有檔案及目錄複製到 Tomcat docBase。請注意包含 static 也一併要複製，否則 NetBeans 執行時會找不到圖按，此應該是 NetBeans 的 bug。然後啟動系統級 Tomcat，輸入如下網址

http://localhost:8085/index

如果有架設 Nginx，亦可使用如下網址測試

http://192.168.1.2/index

Servlet 載入模板