從零打造 DB2 Web 應用（上）：環境建置、首頁與 Servlet 整合實戰

專案背景與架構總覽

本系列示範如何使用 IBM HTTP Server + WebSphere Application Server AE 4.01 + JDK 1.3 + DB2 UDB V7.2 建立 Web 應用，讓測試團隊透過瀏覽器即時查看儲存於 DB2 的測試結果。生產拓撲採經典三層：瀏覽器 → Web 伺服器 (Servlet/JSP) → DB2 資料庫伺服器，開發期三組件可同機部署簡化除錯。

環境安裝與配置關鍵步驟

1. 軟體安裝順序

1. JDK 1.3 → 設定 PATH 含 jre\bin;bin，CLASSPATH 含 jre\lib\rt.jar;lib\tools.jar
2. DB2 UDB V7.2 → 安裝範例資料庫、驗證運作、自動配置運行環境
3. WebSphere AE 4.01 → 建議 Typical Install（含 HTTP Server、WAS、DB2、JDK）；若已裝 JDK/DB2 改用 Custom Install 排除

安裝完成重開機，WAS 會自動建立 was 範例資料庫。

2. WAS 管理主控台驗證

• 啟動 IBM WS Adminserver 4.0 服務
• 開啟 Administration Console → 展開 Nodes → 選擇本機節點 → 啟動 Default Server（圖示變帶箭頭方框）
• 瀏覽 https://<host>/WSsample.index.html → 執行 Form 範例驗證 Servlet 容器正常

3. 測試資料庫建立與匯入

create database TESTSTAT

CREATE TABLE "Schema.TSTCASES" (
  PROD_ID CHAR(10) NOT NULL, PRODUCT CHAR(30) NOT NULL, PLATFORM CHAR(20) NOT NULL,
  NUM_C_AUTO_TCS INT, NUM_Java_AUTO_TCS INT, NUM_C64_AUTO_TCS INT,
  NUM_C_MANUAL_TCS INT, NUM_Java_MANUAL_TCS INT, NUM_C64_MANUAL_TCS INT,
  NUM_JSUI_TCS INT, NUM_OLT_TCS INT, NUM_LOGBR_TCS INT, NUM_OTHER_TCS INT
);
ALTER TABLE "Schema.TSTCASES" ADD PRIMARY KEY (PROD_ID, PLATFORM);

CREATE TABLE "Schema.TSTRSLTS" (
  DRIVER CHAR(15), PLATFORM CHAR(20), PROD_ID CHAR(10), TEST_MACHINE CHAR(15),
  JDK_LEVEL CHAR(15), COMPILER_LEVEL CHAR(15), OS_LEVEL CHAR(15),
  NUM_TCS INT, NUM_PASSED INT, DATE_TIME TIMESTAMP,
  -- 各類型通過/失敗計數欄位 ...
  LATEST CHAR(1) DEFAULT 'N'
);
ALTER TABLE "Schema.TSTRSLTS" ADD PRIMARY KEY (DRIVER, PLATFORM, PROD_ID, JDK_LEVEL, COMPILER_LEVEL, OS_LEVEL);

IMPORT FROM \tstcases OF DEL MODIFIED BY chardel"" coldel, decpt. MESSAGES dummy INSERT INTO Schema.TSTCASES
IMPORT FROM \tstrslts OF DEL MODIFIED BY chardel"" coldel, decpt. MESSAGES dummy INSERT INTO Schema.TSTRSLTS

第一個 Web 頁面：TestTeam.html（含自動導向與聲音特效）

<html><head>
<meta http-equiv="Refresh" content="8; URL=TestMain.jsp">
<title>Test Results</title></head>
<body text="#FF0000" bgcolor="#FFFFFF" link="#FFFF00" vlink="#F00000" alink="#FF8080"
      background="resources/whtmarb.jpg">
<center><h1>Test Results</h1>
<p><font color="#0000FF">
This Web site is driven by WebSphere AE 4.01, IBM HTTP Server, DB2 UDB V7.2, JDK 1.3</font></p>
<img src="/School/UploadFiles_7810/201105/20110503092356342.gif" alt="DB2 UDB V7.2">
<img src="/School/UploadFiles_7810/201105/20110503092305203.gif" alt="WebSphere AE 4.01">
<p>Owner/Designer: Ed Van Gennip</p>
<embed src="resources/holodeck.wav" autostart="true" hidden="true" width="2" height="2">
</center></body></html>

• meta refresh：8 秒後自動導向主頁 TestMain.jsp，預留聲音播放時間
• 背景圖 whtmarb.jpg 重複鋪滿形成白色大理石質感
• embed 標籤內嵌 holodeck.wav（星艦奇航記開門音效），隱藏播放

應用程式打包與部署：Application Assembly Tool (AAT) 實作

1. 啟動 AAT → Create Web Module Wizard → 輸出 test.war
2. Add Resource Files：加入 TestTeam.html、圖片、聲音檔至 Web 目錄
3. 儲存 → Administration Console → Enterprise Applications → Install → 選 test.war
4. Nodes → 本機節點 → Regen Webserver plugin
5. 停止/重啟 IBM HTTP Server 服務套用外掛更新
6. 瀏覽 https://<host>/testTeam/Web/TestTeam.html 驗證 8 秒導向成功

主頁 TestMain.jsp 與首個 Servlet (DBBean) 整合

JSP 結構

• 標題、圖片、樣式設定
• <jsp:include page="../TestTeamCl" flush="true"/> 動態引入 Servlet 輸出（初期先註解，待 Servlet 就緒再開啟）
• 表單按鈕連結至後續功能頁（Team Structure、Test Results、Raw Data 等）

Servlet 開發與部署流程

1. 設定 CLASSPATH 加入 %WAS_HOME%\AppServer\lib\j2ee.jar
2. 編譯 DBBean.java、ConnectionPool.java 產生 .class 檔
3. AAT → Web Modules → DB2TestSample → Files → Classes → Add Files 加入兩個 .class
4. AAT → Web Components → New → 元件名 DBBean、類型 Servlet、類別名 DBBean
5. AAT → Servlet Mapping → New → URL Pattern /DBBean、Servlet ../DBBean（相對 JSP 路徑）
6. 儲存 .ear → Console 移除舊版 → 重新安裝 → Regen plugin → 重啟 HTTP Server
7. 啟動 DB2 JDBC 監聽器：DB2JSTR 3456（連接埠 3456）
8. 瀏覽驗證：查看 Default_server_stdout.log 出現 DBBean: made connection pool 代表連線成功

下一步預告

Part 2 將完成：

• TeamStruct.jsp + TeamStructCl Servlet：從 TSTCASES 顯示各產品測試案例統計
• RawData.jsp + RawDataCl Servlet：通用資料表格顯示元件（反射 ResultSetMetaData 動態生成 HTML Table）
• TestResults.jsp + TestTeamCl Servlet：核心儀表板，含最新驅動程式資訊、平台/產品雙維度摘要表、鑽取連結
• Platform.jsp/Product.jsp 及對應 Servlet：詳細歷史明細頁

核心技術模式：JSP 負責版面與靜態標籤，Servlet 負責資料庫查詢與動態 HTML 片段生成，兩者透過 jsp:include 無縫組合。