關於本網頁

這個網站作為北商資管「Dreamweaver + JSP」網站程式設計課程使用, 是上課範例程式放置的地方. 除了由上課同學使用外, 本網站內容均開放, 歡迎有興趣者下載引用.

這個網站的範例程式由 Adobe Dreamweaver CS5 製作, 經測試, 用 CS5.5 及 CS6 等較新版本也以相同方式製作程式. 範例程式使用 Tomcat 作為應用程式伺服器, 並由 Dreamweaver 將產生 JSP 程式與 MySQL 資料庫溝通. 為了方便, 我們將 Adobe Dreamweaver 簡稱為 DW.

關於這個大頭 , 其原始設計在這裡.


(前言 1) 執行環境

 

網站執行環境假設如 這個pdf檔. 伺服器部分使用 Tomcat 5 (較新版本如7.0亦測試可正常運作), 資料庫部分使用MySQL. 網頁編輯部分使用 Dreamweaver CS5, 並且由其自動產生 JSP 程式, 若有必要, 我們會修改部分程式.


為了簡化環境, 在之後的練習我們將 Tomcat 和 MySQL 安裝在同一台電腦上. 因為 Tomcat 內定監聽 8080 埠, 而 MySQL 內定監聽 3306 埠, 兩者不會互相衝突.


這裡的 JSP 程式, 多數會和 MySQL 相連並從 MySQL 讀取資料, 或將資料寫回 MySQL. 因此使用此網站前, 最好已知道如何安裝操作 Tomcat, 並且知道如何操作 MySQL. 如果已理解 JSP, 在修改程式時就可以有更多自己的想法.


 

(前言 2) 執行前 DW 的設定

 

為了讓 Dreamweaver CS5 順利連結後端 MySQL 資料庫, 我們先將 MySQL 的 JDBC 驅動程式存放在 DW 安裝路徑內的 /configuration/JDBCDriver/ 資料夾內. (如果使用CS4測試, JDBC 則是放在 Tomcat安裝路徑內的/common/lib/ 之內.)


MySQL 的 JDBC 驅動程式亦應存在 Tomcat 安裝路徑內的 /common/lib/ 中 (較新版本的 Tomcat 安裝路徑中沒有 <common> 這層子資料夾, 請直接存 Tomcat 安裝路徑中的 /lib/ 內即可), 將來執行 JSP 程式才可成功載入 MySQL JDBC 驅動程式. 這個動作完成後再啟動 Tomcat, 驅動程式才能被認識.


Dreamweaver CS5(包括 CS5.5) 不主動支援 JSP, 需由使用者自行執行DW中的「JSP_Support.mxp」以增加JSP支援. 其存在 DW 安裝路徑內的 /configuration/DisabledFeatures/ 資料夾中, 在其圖示上點二下即可執行安裝.


我們提供二個 MySQL 資料庫範例, Student 和 North, 其「資料庫關連圖」和「建立資料表的SQL」如下, 提供練習前下載. 我們的範例主要使用「North」資料庫.


 

MySQL JDBC驅動程式

Student資料庫關連圖   建立Student資料表之SQL

North資料庫關連圖   建立North資料表之SQL


 

開始進入各項練習...

 

(1) 建網站「建一個網站」

 

一個網站可以包括多個子資料夾, 也可以包含多個網頁. 為了不要零亂的放置自己的網頁, 我們應先建立一個網站. 有了網站之後, 我們就可以在一個網站根目錄中管理同一網站的內容, 並且將會很容易的上傳或下載整個網站.

建立網站的方法是在 Menu 上選 網站 -> 新增網站,

而網站的其他功能(包括上述的新增), 則是在 Menu 上選 網站 -> 管理網站.

 

網站和DW開發者的關係

如何建立一個網站


 

(2) 建網頁「在網站中建立網頁」

 

這個練習接著步驟 (1), 在已建立的網站中利用 DW 新增一個網頁. 我們考慮商業網站的應有的架構, 在標題上加入公司Logo. 而網頁的 CSS 與網頁 JSP 分開存放於2個檔案中.

如果是剛開始學 DW 及CSS, 可以使用 DW 提供的樣版版型練習, 藉以創造出屬於自己風格的版型; 或是可以找開放資源, 如: http://www.oswd.org/, 其中有各式公開的版型可供下載. 選幾個自己喜歡的風格, 從成品的原始碼學習, 也是一個很棒的方法.

 

下載範例圖(northWind.jpg, 960*100)

下載操作說明pdf

一個 Div 測試網頁pdf


 

(3) 上傳網站「上傳一個網站」

 

這個練習是利用 Dreamweaver CS5 上傳一個網站. 我們假設測試電腦已安裝並執行 Tomcat, 也已經使用 (1) 及 (2) 的說明建立了網站及網頁.

 

下載操作說明pdf


 

(4) 資料庫連線「建立一個資料庫連線」

 

這個練習是利用 (1) 及 (2) 建立的網站及網頁, 延伸增加資料庫連線設定. 在測試前, 請先確定 MySQL 在啟動狀態, 內有 north 資料庫, 且MySQL 的 JDBC 驅動程式已存放在 DW 安裝路徑中的 /configuration/JDBCDriver/ 資料夾內. 此外, Tomcat 也先啟動.

 

下載MySQL驅動程式

下載操作說明pdf


 

(5) 查詢「單筆資料」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 customer 資料表單筆記錄功能. 在測試前, 請先確定 MySQL 在啟動狀態, 且 Tomcat 也已啟動.

 

下載操作說明pdf


 

    (5-1) 查詢「單筆資料 - join資料表」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 product 及 proType 資料表某一筆記錄功能. 我們使用 SQL 中的 join 指令, 並在查詢網址加入 proNo參數值, 以呼叫出該筆記錄.

 

下載操作說明pdf


 

    (5-2) 查詢「單筆資料 - join資料表 - 找不到資料」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 product 及 proType 資料表某一筆記錄功能. 我們使用 SQL 中的 join 指令, 並在查詢網址加入 proNo 參數值, 以呼叫出該筆記錄. 如果參數值在資料表中不存在, 即印出找不到此產品資料.

 

下載操作說明pdf


 

(6) 查詢「所有資料」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 customer 資料表所有記錄功能. 在測試前, 請先確定 MySQL 在啟動狀態, 且 Tomcat 也已啟動.

 

下載操作說明pdf


 

    (6-1) 查詢「所有資料 - 翻頁顯示」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 customer 資料表所有記錄功能. 我們同時設定每頁顯示的記錄數, 並增加上下翻頁功能.

 

下載操作說明pdf


 

    (6-2) 查詢「所有資料 - 翻頁顯示 - join資料表」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 product 及 proType 資料表所有記錄功能. 我們使用 SQL 中的 join 指令, 同時設定每頁顯示的記錄數, 並有上下翻頁功能.

 

下載操作說明pdf


 

    (6-3) 查詢「所有資料 - 翻頁 - 頁次顯示」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 customer 資料表所有記錄功能. 我們同時設定每頁顯示的記錄數, 並增加上下翻頁功能. 翻頁按鈕使用圖示表示, 並且顯示頁次/筆數資訊.

 

下載操作說明pdf


 

    (6-4) 查詢「所有資料 - 奇偶列不同背景色」

 

這個練習延伸(4), 在建立資料庫連線設定後, 增加查詢 north 資料庫中 customer 資料表所有記錄功能. 我們同時設定每頁顯示的記錄數, 並增加上下翻頁功能. 翻頁按鈕使用圖示表示, 並且顯示頁次/筆數資訊. 我們使用一張500px*60px的背景圖, 製作表格奇數列及偶數列使用不同背景顏色.

 

下載操作說明pdf

下載背景圖


 

    (6-5) 查詢「顯示某本相簿的所有照片 - 每頁顯示 1 張照片」

 

這個練習建立一個相片瀏覽程式「showPhotos.jsp」, 加入資料庫「albumDB」, 讀取「photo」資料表得到相片名稱, 並由該名稱讀取存在資料夾中的相片.

 

下載操作說明pdf

下載 albumDB.sql

(先建立一個資料庫, 名稱為 albumDB, 其charset=utf8, 而collate=utf8_unicode_ci.

Navicat中, 點選 albumDB, 按 右鍵 選擇 執行SQL檔案, 選擇下載的 albumDB.sql,

遇到錯誤繼續 的選項 打勾, 再按 開始 即可建立資料表.)

下載 photos.rar


 

    (6-6) 查詢「顯示某個會員的所有相簿」

 

這個練習配合(6-5), 建立一個相簿瀏覽程式「showAlbum.jsp」. 加入資料庫「albumDB」, 讀取「photo」及「album」資料表得到某個會員的相簿及相片資料. 本程式將建立一個連結呼叫「(6-5) 建立的showPhtots.jsp」, 以顯示某本相簿中的相片.

 

下載操作說明pdf


 

    (6-7) 查詢「清單 - 單筆」

 

這個練習建立兩個JSP程式, 其中「customer.jsp」可藉由傳入cusNo顯示單筆客戶資料, 而「allCustomer.jsp」可列出所有客戶資料. 使用者由 allCustomer.jsp 點選某筆客戶連結呼叫 customer.jsp.

 

下載操作說明pdf


 

(7) 登錄「帳號/密碼檢查」

 

使用者輸入帳號及密碼後, JSP將檢查其是否與「employee」表格中任一筆記錄的「empNo」及「ext」相符, 若是, 程式導向「loginSuccess.jsp」頁面; 若否, 導向「loginFail.jsp」. 當使用者未經登錄直接取用「loginSuccess.jsp」時, 則導向「illegalUser.jsp」.

 

下載操作說明pdf


 

(8) 新增「客戶資料」

 

使用者輸入客戶編號, 姓名, 地址及電話後, JSP將輸入資料以utf-8編碼, 寫入「customer」表格中. 新增成功時導向「addSuccess.jsp」, 若新增時發生例外, 則導向「addFail.jsp」.

 

下載操作說明pdf


   

    (8-1) 新增「員工資料 – 使用spry驗證」

 

使用者輸入員工編號, 姓名, 生日, 分機及底薪後, 我們利用spry驗證, 使用其建立的JavaScript指令, 在使用者端檢查輸入的資料是否符合輸入條件. 若符合條件, 才將資料送至伺服器端. 待伺服器端的JSP收到輸入資料後, 將資料寫入「employee」表格中. 新增成功時導向「addSuccess.jsp」.

 

下載操作說明pdf


 

    (8-2) 新增「產品資料 – 連結資料表的下拉式選單」

 

使用者輸入產品編號, 名稱, 「型態編號」及單價. 其中「型態編號」連結至「proType」資料表, 由使用者使用下拉式選單選取. 輸入的資料利用spry驗證, 檢查輸入的資料是否符合輸入條件. 若符合才將資料送至伺服器端. 新增成功時導向「addSuccess.jsp」.

 

下載操作說明pdf


 

     (8-3) 新增「員工資料 – 使用 YUI日期選單」

 

使用者輸入員工編號, 姓名, 職稱 及「生日」. 其中「生日」欄的輸入將使用「YUI Calendar」日期選單, 由使用者在畫面上點選日期.

 

下載操作說明pdf

下載 YUI_Calendar.mxp

YUI_Calendar.mxp的原始來源


 

     (8-4) 新增「產品型態資料 – 使用 CKEditor 所見即所得輸入欄」

 

使用者輸入型態編號, 名稱 及「描述」. 其中「描述」欄位的輸入將使用「CKEditor」所見即所得輸入欄位, 由使用者自由編輯.

 

下載操作說明pdf

下載 ckeditor.rar

ckeditor.rar 的原始來源


 

     (8-5) 新增「上傳照片 – 使用 jspSmartUpload」

 

使用者選擇將上傳的照片, 將照片上傳至Server, 由另一個JSP使用jspSmartUpload提供的Class將上傳的照片存入資料夾中, 並寫檔名資訊到資料庫.

 

下載操作說明pdf

下載 jspSmartUpload.rar

下載 getImage.jsp本文檔


 

(9) 修改「客戶資料」

 

使用者輸入客戶編號, 取出原資料後, 修改客戶姓名, 地址及電話, 送交JSP將輸入資料以utf-8編碼, 修改「customer」表格中資料. 修改成功時導向「modSuccess.jsp」, 若修改時發生例外, 則導向「modFail.jsp」.

 

下載操作說明pdf


 

(10) 刪除「客戶資料」

 

使用者先傳入將刪除的客戶編號, 讀出原始資料後, 由使用者確認並刪除之.  JSP刪除「customer」表格中的記錄, 當刪除成功時導向「delSuccess.jsp」, 若刪除時發生例外, 則導向「delFail.jsp」.

 

下載操作說明pdf


 

(11) 下拉式選單設定初值

 

設定「下拉式選單」欄位顯示初值為資料表中的某欄位值. 在此例中, 下拉式選單值預設為「Customer」表格中的「title」值.

 

下載操作畫面 jpg圖


 

(12) Google Map 範例

 

文件檔內容是一個 JSP 程式, 其接收 2 個 request 參數「lat」及「lng」, 分別代表「緯度」及「經度」, 即可顯示當地地圖. 使用方法如(假設程式被存為「mapTest.jsp」):

<a href="mapTest.jsp?lat=25.04&lng=121.52">地圖</a>

參考網頁資料 在此在此

 

操作步驟 (pdf檔)

文件檔(內容為jsp程式)


 

(13) 浮動的 DIV 範例

 

這個練習是建立「outCSS」及「inCSS」格式, 並由一個套用 outCSS 的 Div 包括多個套用 inCSS 的 Div. 建立 Div 區塊的方式是「插入」->「版面物件」->「Div標箋」, 利用 float:left 的 CSS 設定讓區塊向左靠齊, 使一個橫列可排列多個子區塊. 最後使用clear:both 取消向左靠齊之排列. 這個 outCSS 並未因區塊增加而增加高度? 目前尚未解決此問題.

 

文件檔(內容為jsp程式)


 

(14) 一個測試的網頁範例

 

這個練習在解壓後產生一個 <Web> 資料夾, 內有若干檔案. 將 <Web> 資料夾連同其內容一起複製到 c:\Tomcat 7.0\webapps\ROOT 之內, 啟動 Tomcat 及 MySQL, 使用 http://localhost:8080/Web/list_1.jsp 測試.

 

文件檔(rar壓縮檔)


 


§ 我的其他連結

ActionScript程式設計

J2EE程式設計

MySQL資料庫管理

國小英文實驗網頁

圖書館推薦好書