第十章

1. 第十章 JSP範例實際演練

2. 第十章JSP範例實際演練 • 10-1 留言板功能設計 • 10-2 線上考試功能設計 • 10-3 網路花店功能設計 • 10-4 聊天室功能設計

3. 10-1 留言板功能設計　(1) 程式功能：主要的功能就是讓上線者能輸入以及觀看留言，並提供分頁瀏覽的功能，而上線者也可以直接輸入頁次來顯示該頁留言的內容。  使用檔案：下表所列的是這個範例程式中所使用的一些主要的檔案與簡要的說明： 設計概念：當上線者開啟這個程式時，程式會從資料庫中取出所有的留言資料，並自動顯示最後一頁的留言內容，也就是最新的留言，我們將每一頁顯示的最多留言筆數設為五筆。

4. 10-1 留言板功能設計　(2) 圖示為留言板程式的執行流程，其中使用者新增留言資料儲至資料庫『msg.mdb』，而瀏覽主頁則與資料庫進行互動，提供瀏覽資料的存取功能。

5. 欄位名稱 資料型態 說明 編號(主索引) 自動編號 記錄上線使用者編號 暱稱 文字 記錄上線使用者稱呼 留言 備忘 記錄使用者訊息留言 時間 日期/時間 記錄使用者上線時間 10-1 留言板功能設計　(3) 資料庫內容：使用msg.mdb資料庫檔案，其中建立資料表message，用來記錄所有的留言，此資料表的結構如下：

6. 10-1 留言板功能設計　(４) 暱稱與留言欄位是儲存上線者留言時輸入的內容，設定如下： 同時利用其設計分頁功能，自動編號的設定如下圖： 圖一 圖二

7. 變數 說明 num 顯示圖案的圖號 lastno 最後一筆留言的編號 lastpage 最後一頁留言的頁碼 nowpage 目前顯示的頁碼 prepage 上一頁的頁碼 nextpage 下一頁的頁碼 nostart 目前頁碼所要顯示的第一筆留言編號 noend 目前頁碼所要顯示的最後一筆留言編號 完整程式列表與說明 程式主要分為兩個部份，一是製作分頁功能，另一則是顯示留言資料，第20行程式碼中宣告了幾個變數，下表說明了這幾個變數所代表的意義：

8. 範例－執行結果 步驟1： 步驟2: 步驟3: 步驟4：

9. 檔案名稱 說明 enter.jsp 進入線上考試要求登錄的程式 check.jsp 檢查輸入的學號與密碼是否正確的程式 exam.jsp 顯示考題的程式 grades.js 顯示答案與計算得分的程式 test.mdb 本範例所使用的資料庫 10-2 線上考試功能設計 (1) 程式功能：程式的功能，是在進入線上考試前先驗証輸入的『學號』與『密碼』是否正確。 登錄成功後，便出現試題，共有是非題、單選題與複選題三種，答案須完全正確才算分。 而最後在答完問題送出資料後，程式便會自動顯示正確的答案，與使用者的作答答案，並計算得分。 下面表格中所列的則是這個範例程式中所使用的檔案：

10. 10-2 線上考試功能設計 (2) 設計概念：使用4份資料表『student』、『test1』、『test2』、『test3』，當使用者登錄時，將其輸入的學號和密碼與student資料表中的內容比對是否正確，若正確則『exam.jsp』程式會從test1、test2、test3資料表中取出題目，顯示一份考卷，供使用者作答。 當作答完畢後送出資料，『grades.jsp』程式會將使用者所輸入的答案與資料表中的答案做比對，計算並顯示成績。 線上考始一開始於登錄網頁『enter.jsp』進行登入作業，完成之後於顯示考題的網頁『exam.jsp』作答，完成之後送出，『grade.jsp』針對答題進行成績計算，並且顯示結果，整個過程均與資料庫『text.mdb』作互動。

11. 10-2 線上考試功能設計 (3) 資料庫內容：範例使用『test.mdb』資料庫來當作資料來源，其中各個資料表的內容與格式如下所示： test1資料表(記錄是非題目與答案) student資料表(記錄學生資料) test2資料表(記錄單選題目與答案) test3資料表(記錄複選題目與答案)

12. 範例－執行結果 步驟3: 步驟2: 步驟1： 步驟5： 步驟4：

13. 10-3 網路花店功能設計　(1) 程式功能：程式提供會員訂花的功能，而會員有專屬的帳號與密碼，進入花店前程式會驗証是否輸入了正確的帳號與密碼，通過驗証之後，便可進入花店選購花品，在選購完畢送出資料後，如此，花店老闆就知道接收那些訂單。 使用檔案：這個範例所使用的程式與資料庫檔案如下表： 設計概念：『check.jsp』程式開啟會員資料表『member』，比對上線者所輸入的帳號與密碼是否正確，若正確則將網頁導向『flower.jsp』程式。

14. 10-3 網路花店功能設計　(2) 使用者於『enter.jsp』網頁輸入驗証資料，通過後進入『flower.jsp』提供花品的選購界面，使用者於其中完成選購操作，『count.jsp』顯示選購結果，並提供修改機會，最後『savedata.jsp』將選購訂單內容，儲存至資料庫，完成操作。

15. 10-3 網路花店功能設計　(3) 資料庫內容：這個範例所使用的『flower.mdb』資料庫中各個資料表的結構與資料欄定義： flower資料表(記錄各類花卉與價格) member資料表(記錄會員帳號與密碼) orderlist資料表(記錄訂單)

16. 範例－執行結果 步驟3: 步驟2: 步驟1： 步驟4： 完成：

17. 10-4 聊天室功能設計(1) 程式功能：範例將視窗劃分為三個子視窗，分別用來顯示聊天訊息、目前的上線人以及提供輸入訊息，而在進入聊天室之前，必須輸入使用者的暱稱，而且可以選擇發言顯示的顏色以及網頁自動更新時間。  使用檔案：程式使用的檔案如下表所列： 設計概念：當上線者進入聊天室時，將其暱稱與性別存入『online』資料表中，而當使用者登出時則將其資料刪除，便可以知道目前有多少人以及那些人在聊天室中。而上線者的發言則是存在『chatroom』資料表中，利用存取這個資料表中的記錄便可以在聊天看板中顯示訊息。

18. 10-4 聊天室功能設計(2) 下列流程圖，說明整個線上聊天室相關網頁程式的運作過程：

19. 10-4 聊天室功能設計(3) 資料庫內容：範例使用『chat.mdb』資料庫檔案，下面則是其中『online』與『chatroom』資料表的欄位結構。 online資料表 chatroom資料表

20. 範例－執行結果 步驟1： 步驟2: