首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 相關知識

NetBeans IDE 6.8/6.9 教程:使用 MySQL 資料庫建立簡單 Web 應用程式

     編輯:Java 相關知識

教程目標

本教程將引導你建立一個連接 MySQL 資料庫的簡單 Web 應用程式,涵蓋 JSP、JSTL、JDBC、JNDI 等核心 Java EE 技術,採用兩層式架構(Client ↔ Server/DB),適合具備基本 Web 開發概念的初學者。

前置需求

  • NetBeans IDE 6.8/6.9 (Java EE 套件)
  • JDK 6
  • MySQL Server 5.1
  • MySQL Connector/J 5.x (IDE 內建)
  • GlassFish Server 3 (隨 IDE 安裝)

假設你已完成「連接 MySQL 資料庫」教程,建立名為 MyNewDatabase 的資料庫,並在 NetBeans 註冊連線。本教程使用的範例資料在 ifpwafcad.sql,包含 Subject 與 Counselor 兩張表。

應用架構規劃

兩層式架構圖

  • 歡迎頁:顯示主題下拉選單,使用者選擇後送出表單。
  • 回應頁:根據選擇的主題,查詢並顯示對應顧問的詳細資訊。
  • 資料存取:JSP 頁面內嵌 JSTL SQL 標籤直接查詢資料庫(透過 JNDI 資料源)。

步驟 1:建立新專案

  1. 選單 File > New Project (Ctrl-Shift-N),類別選 Java Web,專案類型選 Web Application。
  2. 專案名稱:IFPWAFCAD,選擇專案儲存位置。
  3. 伺服器選 GlassFish Server,Java EE 版本選 Java EE 5(為了使用 web.xml 宣告資料源)。
  4. 完成,IDE 產生專案骨架並在編輯器開啟 index.jsp。

步驟 2:設計 Web 介面

2.1 歡迎頁

  • 修改 <title> 為 IFPWAFCAD Homepage,<h1> 為歡迎標語。
  • 使用元件面板拖入 Table(2 行 1 列)、Form(Action: response.jsp)、Drop Down List(名稱 subject_id)、Submit Button。
  • 連結樣式表:在 <head> 加入 <link rel="stylesheet" type="text/css" href="style.css">。

2.2 回應頁

  • 右鍵專案 New > JSP,檔名 response。
  • 標題設為 IFPWAFCAD - {placeholder},body 置入預留位置的 HTML 表格(顯示主題描述、顧問姓名、聯絡資訊等)。
  • 同樣連結 style.css。

2.3 樣式表

  • 工具列 New File,選 Web > Cascading Style Sheet,檔名 style。
  • 輸入 CSS 規則(字體、配色、表格樣式、連結效果等),IDE 提供 CSS Preview 即時預覽。

步驟 3:建立資料庫連線池與資料源

3.1 確保資料庫就緒

  • MySQL 必須設定 root 密碼(教程用 nbuser),否則 GlassFish 無法建立資料源。
  • 在 NetBeans Services 視窗驗證 MyNewDatabase 連線可用,且包含 Subject、Counselor 表與資料。

3.2 使用 JDBC 資源精靈建立連線池與資料源

  1. New File > GlassFish > JDBC Resource。
  2. 選 Create New JDBC Connection Pool,JNDI 名稱:jdbc/IFPWAFCAD。
  3. 跳過附加屬性步驟。
  4. 連線池名稱:IfpwafcadPool,勾選 Extract from Existing Connection,選擇 jdbc:mysql://localhost:3306/MyNewDatabase。
  5. 完成,IDE 產生 sun-resources.xml,部署專案時 GlassFish 會自動建立資源。

3.3 在 web.xml 參考資料源

  • 開啟 web.xml,切到 References 標籤,Resource References > Add。
  • Resource Name: jdbc/IFPWAFCAD,Type: javax.sql.DataSource,Auth: Container。
  • 產生 <resource-ref> 元素。

3.4 確保 MySQL 驅動程式部署到 GlassFish

  • Tools > Servers 選 GlassFish,勾選 Enable JDBC Driver Deployment。
  • 部署專案時,IDE 會自動將內建的 mysql-connector-java-5.1.6-bin.jar 複製到 domains/domain1/lib/。

步驟 4:注入動態邏輯

4.1 歡迎頁:動態產生下拉選單

  • 在 index.jsp 頂端插入 DB Report 程式碼片段:變數 subjects、範圍 page、資料源 jdbc/IFPWAFCAD、查詢 SELECT subject_id, name FROM Subject。
  • IDE 自動產生 <sql:query> 與巢狀 <c:forEach> 顯示表格(供測試)。
  • 將巢狀 <c:forEach> 移植到表單的 <select> 中:
<select name="subject_id">
  <c:forEach var="row" items="${subjects.rows}">
    <option value="${row.subject_id}">${row.name}</option>
  </c:forEach>
</select>
  • 刪除測試用表格,保留 <sql:query> 與表單。

4.2 回應頁:根據參數查詢顯示詳情

  • 在 response.jsp 頂端插入 DB Query 片段:變數 counselorQuery、資料源 jdbc/IFPWAFCAD、查詢:
SELECT * FROM Subject, Counselor
WHERE Counselor.counselor_id = Subject.counselor_idfk
  AND Subject.subject_id = ?
<sql:param value="${param.subject_id}"/>
  • 使用 <c:set var="counselorDetails" value="${counselorQuery.rows[0]}"/> 取得第一筆(唯一)記錄。
  • 在 HTML 表格中以 EL 運算式 ${counselorDetails.columnName} 取代所有預留位置。
  • 補上 <%@taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core"%>。

步驟 5:執行完成的應用程式

  1. 工具列 Run Project,瀏覽器開啟 index.jsp。
  2. 下拉選單顯示資料庫中的主題名稱。
  3. 選擇一個主題點擊 submit,跳轉至 response.jsp 顯示對應顧問詳細資料。

執行結果截圖

常見問題排查

檢查項目驗證方式
資料庫資源是否存在Services 視窗確認 MySQL 運行、MyNewDatabase 可連線、表資料正確
連線池與資料源是否建立Services > Servers > GlassFish > Resources > JDBC 檢視 jdbc/IFPWAFCAD 與 IfpwafcadPool
驅動程式是否部署檢查 domains/domain1/lib/mysql-connector-java-5.1.6-bin.jar 存在
資料庫是否有密碼MySQL root 需設定非空密碼
連線池屬性正確性GlassFish 管理主控台 > Resources > JDBC > Connection Pools > IfpwafcadPool > Ping 測試

結語

本教程示範了從零開始建立資料庫驅動的 Web 應用:專案建立、介面設計、連線池/資料源配置、JSTL SQL 標籤實作動態查詢、EL 運算式綁定資料。雖然兩層架構適合教學,實務上建議採用 MVC 模式(Servlet/JSP 分離)與連線池最佳化配置。希望這能成為你 Java EE 開發旅程的穩固起點!

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved