Eclipse WTP + Derby 打造 Web 應用全流程：從專案建立到 JSP 偵錯實戰

技術棧與工具鏈

• IDE：Eclipse IDE for Java EE Developers (內建 WTP)。
• Web 容器：Apache Tomcat 9/10 (Servlet 5/6)。
• 資料庫：Apache Derby (嵌入式/網路模式)，透過 Eclipse Derby Plug-in 管理。
• 表現層：JSP 2.3 + JSTL 1.2 + EL 3.0。
• 建構/部署：WAR 包、WTP Server Tools 熱部署。

專案建立完整步驟

1. 新建 Dynamic Web Project：File → New → Dynamic Web Project，Target Runtime 選 Tomcat，Configuration 選默認或自訂。
2. 加入 Derby Nature：專案右鍵 → Apache Derby → Add Apache Derby Nature，自動把 derby.jar/derbyclient.jar 加入 Build Path。
3. 配置 derby.system.home：專案 Properties → Apache Derby → 設定 derby.system.home 指向資料庫目錄 (如 /workspace/project/data)。
4. 建立資料庫結構：用 ij 工具 (Derby Plug-in 提供) 執行 SQL 腳本建表。
5. 配置 JNDI DataSource：在 web.xml 或 context.xml 定義 jdbc/derbyDB，JSP 透過 <sql:query dataSource="jdbc/derbyDB"> 使用。
6. 導入 JSTL：將 jstl.jar, standard.jar 放入 WEB-INF/lib (Maven/Gradle 專案則加依賴)。
7. 開發 JSP/Servlet：遵循 MVC 分層，JSP 僅含標籤/EL，業務邏輯在 Servlet/Service Bean。
8. 部署測試：WTP Servers 視圖右鍵 Tomcat → Add and Remove 加入專案 → Start。

Derby 圖形化管理 (Eclipse Plug-in)

• Database Explorer：連線 jdbc:derby://localhost:1527/dbName，瀏覽表結構、資料、執行即席 SQL。
• Table Editor：直接編輯資料列、新增/刪除/修改。
• Generate DDL：右鍵 Schema/Table → Generate DDL 匯出建表腳本。
• ij Console：互動式 SQL 執行環境，支援跨 JVM 連線網路模式 Derby。

JSP 偵錯實戰 (WTP Debugger)

1. 在 JSP 編輯器左側標尺雙擊設中斷點 (藍點)。
2. 專案右鍵 → Debug As → Debug on Server。
3. 瀏覽器觸發請求，Eclipse 切換到 Debug Perspective。
4. Variables 視圖：展開 _jspx_th_c_when_0 → parent → ForEachTag → items 可檢視 ${cities.rows} 等 EL 變數實際值。
5. 按 F8 (Resume) 繼續執行，觀察瀏覽器輸出。

範例應用：LowFareAir 機票預訂系統

流程圖

Welcome.jsp (登入/註冊判斷、Cookie 檢查、城市下拉查詢)
   │ POST /CheckFlightsServlet
   ▼
CheckFlightsServlet → DerbyDatabase.origDestFlightList() → FlightsBean[]
   │ 放入 Session
   ▼
GetFlights.jsp (顯示航班、選擇預訂)
   │ POST /BookFlightsServlet
   ▼
BookFlights.jsp (確認) → UpdateHistoryServlet → GoodBye.jsp (歷史紀錄)

關鍵代碼片段

<!-- Welcome.jsp: JSTL SQL 查詢城市 -->
<sql:query var="cities" dataSource="jdbc/derbyDB">
  SELECT CITY_NAME, COUNTRY, AIRPORT FROM APP.CITIES ORDER BY CITY_NAME
</sql:query>
<c:forEach var="city" items="${cities.rows}">
  <option value="${city.airport}">${city.city_name}, ${city.country}</option>
</c:forEach>

<!-- CheckFlightsServlet: 取得航班 Bean 陣列 -->
Connection conn = DerbyDatabase.getConnInstance();
FlightsBean[] flights = DerbyDatabase.origDestFlightList(conn, from, to);
request.getSession().setAttribute("fromToFlights", flights);

<!-- DerbyDatabase.origDestFlightList -->
String sql = "SELECT FLIGHT_ID, SEGMENT_NUMBER, ORIG_AIRPORT, DEPART_TIME, " +
             "DEST_AIRPORT, ARRIVE_TIME, MEAL, FLYING_TIME, MILES, AIRCRAFT " +
             "FROM APP.FLIGHTS WHERE ORIG_AIRPORT = ? AND DEST_AIRPORT = ?";
try (PreparedStatement ps = conn.prepareStatement(sql)) {
    ps.setString(1, orig); ps.setString(2, dest);
    try (ResultSet rs = ps.executeQuery()) {
        while (rs.next()) list.add(new FlightsBean(...));
    }
}

遷移到現代化開發模式建議

• 建構工具：改用 Maven/Gradle 管理依賴、多模組、CI/CD 整合。
• 框架升級：Spring Boot + Spring MVC + Thymeleaf/React 取代純 JSP/Servlet。
• 資料庫存取：Spring Data JPA / MyBatis 取代手寫 JDBC。
• 容器化：Docker 包裝 Tomcat + Derby (或 PostgreSQL/MySQL)，Kubernetes 編排。
• IDE：IntelliJ IDEA Ultimate 或 VS Code (Extension Pack for Java) 體驗更佳。