6-1.1 建立資料庫
在 Microsoft Access 建立一個名為 Store1 的資料庫，分別建立 Car、CarOrder、Category、OrderDetail、VIP 五個資料表，如下圖 所示。
圖 6-1 store1 資料庫
● Car 資料表是汽車零件資料表單，用來存放汽車零件的詳細資料，
設計內容如下圖所示：
圖 6-2 car 資料表
● Category 資料表是汽車零件分類表單，用來紀錄汽車零件分 類資料，針對每一個分類給定一個編號，設計內容如下圖所示：
圖 6-3 Category 資料表
● OrderDetail 資料表是訂單明細的資料表單，用以紀錄訂單編 號、書籍編號及數量，並紀錄其是否有被確認訂購，設計內容如 下圖所示：
圖 6-4 OrderDetail 資料表
● VIP 資料集是會員基本的資料表單，包括會員的資本資料及登入 密碼，設計內容如下圖所示：
圖 6-5 VIP 資料表
以上五個資料表，因為要確定是唯一值而且還要與其他的關聯表建 立關聯，均設計一個自動編號的欄位及設成主索引。
之後再編輯資料庫的關聯：
一個零件可能有很多張訂單，Car 與 Category 是一對多的關係。
一個分類包含很多種零件，Car 與 Category 是多對一的關係。
一張訂單可能包含很多訂單明細，CarOrder 與 OrderDetail 是一 對多的關係。
一個人可能有很多訂單，VIP 與 CarOrder 是一對多的關係。
其資料庫的關聯圖如下所示：
圖 6-6 store1 資料庫關聯圖
利用資料庫建立一連串的查詢，來幫助節省一些程式的計算。
在此設計六個查詢：
● BLtotal：紀錄每張訂單消費的總金額。
● CarDetail：紀錄所有放入購物車的汽車零件及其數量(只放入購 物車)。
● notDcheck：紀錄為確認市否定購即離開的紀錄(以放入購物車但 未確定是否購買即離開)。
● ShopState：紀錄每個人購買分類的零件總數量及總金額。
● SumTotal：紀錄每個人的消費總金額。
6-1.2 頁面設計
購物車的首頁為 index.htm，首頁設計為框架頁主要包含左框架的功 能頁(Func.jsp)及右框架展示頁(Content.htm)，把右框架命名為 mainFram。
<frame src="Func.jsp" name="leftFrame" scrolling="" noresize>
<frame src="Content.htm" name="mainFrame">
如下圖所示：
圖 6-7 購物車首頁 index.htm
Content.htm
在此設計一個加入會員的圖檔(join.jsp)並且連結到 NewVip.jsp
<a href="NewVip.jsp"><img src="images/join.jpg" ></a>
增加兩個文字輸入方塊，一個是名稱為 VipPhone 型態為 text，另一 個名稱為 VipPW 型態為 password。
<input name="VipPhone" type="text" id="VipPhone" size="10">
<input name="VipPW" type="password" id="VipPW" size="10">
Func.jsp
在此頁設計顯示出產品分類的動態資料，所以必須聯繫(Bindings) Store1 資料庫的 Category 資料集，因為資料不只一筆，所以我們設 計為 Repeat Gegion(重複區域)，如此一來表格內的資料會隨著資料 庫變動的動態資料。
<% while ((Category_hasData)&&(Repeat1__numRows-- != 0)) { %>
當功能頁中點選某分類的動態資料超連結之後，便顯示相關的資料所 在目的的網頁，判別方式是以網址傳參數值的方式進行，而傳遞的參 數則是分類的編號(Category.ID)的值，名稱為 CategoryID。
圖 6-8 設定 CategoryID
Getcar.jsp
Content.htm 會員登入後，判斷是否為會員並領取購物車。由於 Getcar.jsp 程式需要先檢查身份，故建立 SQL 語法使用 WHERE 條件 判斷，並設定『MMColParam1』與『MMColParam2』這兩個變數，這兩 個變數是由 Content.htm 輸入的電話及密碼傳送的參數值。
圖 6-9 Getcar.jsp Vip 資料集
建立 Session 物件，將使用者 ID 設定在 Session 中，並取名為 VipID
<%session.setAttribute("VipID",VipID); %>
領取購物車之後，會員資料可以更改，插入 Application(應用程式) 的 Record Update Form(紀錄修改表單)。
如下圖所示：
圖 6-10 Getcar.jsp 記錄修改表單
Gotobuy.jsp
利用 Getcar.jsp 傳過來的 VipID (session) 找出客戶詳細資料，顯 示在 VIP 表格中，如下圖所示：
圖 6-11 Gotobuy.jsp Vip 資料集
身分確認之後，插入紀錄至 CarOrder 資料表，插入後前往 Content2.jsp 並且傳 VipID 給 Content2.jsp。
Content2.jsp
建立 Vip、SumTotal、SumNum、SumState、CarOrder 五個資料集，
並且都是以 VipID (session) 為篩選器，找出 Store1 資料庫的資料 其中 SumTotal、SumNum、SumState 所用到的 3 個查詢為
SumTotal 查詢：紀錄每個人來店消費的總金額。
圖 6-12 Sumtotal 查詢
SumNum 查詢：紀錄每個人來店消費的次數。
圖 6-13 SumNum 查詢
SumState 查詢：紀錄每個人購買分類的零件總數量及總金額。
圖 6-14 ShopState 查詢
領取完購物車之後，在建立一個 session 物件，取得訂單編號。
session.setAttribute("BOID",CarOrder.getString("ID"))
NewVip.jsp
用來新增會員資料，加入一個 Vip 資料集，插入 Application (應 用程式) 的 lnsert Record insertion Form (紀錄插入表單)，如下 圖所示：
圖 6-15 NeqVip.jsp 記錄插入表單
Cars1.jsp
點選 Func.jsp 的動態資料之後，所顯示出來的零件詳細資料。
利用 Func.jsp 所傳送過來的參數 CategoryID 為 URL/Form Variable 篩選器，所顯示出來的零件詳細資料，建立三個資料集 Cars、
category、CateTotal。
圖 6-16 Car1.jsp Cars 資料集 圖 6-17 Car1.jsp category 資料集
圖 6-18 Car1.jsp CateTotal 資料集
插入 OrderID (帳單編號)、CarID (零件編號)、Quity (數量) 至 OrderDetail 資料表中，並且設定 OrderID、CarID 為隱藏欄位。
再加入一個數量的設計，讓客戶可以選擇數量：
<select name="Qty" id="Qty">
<% int i;
for (i=1;i<=20;i++) { %>
<option value="<%=i%>"><%=i%></option>
<% }%>
</select>
從 Server Behavior (伺服器行為) 的 Recordset Paging(資料集分 頁) 來設定翻頁行為。
設計完成後如下圖所示：
圖 6-19 car.jsp
CostTotal.jsp
查詢目前選購商品的項目。
建立四個資料集 Vip、Order、noDcheck、OrderTotal 資料集，其中 Vip 資料集的篩選條件為 session 變數 VipID，其他三個資料集 Order、noDcheck、OrderTotal 的篩選條件皆為 session 變數 BOID，
其中所用到的查詢為：
●CarDetail 查詢：紀錄所有放入購物車的汽車零件及其數量，其中 的總計(BLTotal) 用([Cars].[Price]*[OrderDetail].[Quity]) 運算式計算得來。
圖 6-20 CarDetail 查詢
● notDcheck：紀錄為未確認是否訂購即離開的紀錄。
圖 6-21 notDcheck 查詢
● BLtotal：紀錄每張訂單消費的總金額。
圖 6-22 BLtotal 查詢
再設計 notDcheck 查詢有資料的時候顯示前往櫃檯結帳，並指向 BellList.jsp，若無資料時顯示繳費清單，並指向 Amount.jsp。
當 Order 資料集找不到 session 變數 BOID，也就是沒有資料進來時，
沒有領取購物車。再設計當非會員登入時，顯示錯誤訊息
<% if (session.getAttribute("VipID") == null) {response.sendRedirect("login.jsp");} %>
設計完成之後如下圖所示：
圖 6-23 CostTotal.jsp
BellList.jsp
此為再次確認商品明細，經過兩次確認後的資料才會寫進資料集 OrderDetail。
設計 CarList 資料集篩選條件為 session 變數 BOID ，其資料來源為 notDcheck 查詢，利用 Record Update Form(紀錄更新表單)，增加一 個資料集 OrderDetail 其資料來源為 OrderDetail 表，此時再比對
如下圖所示：
圖 6-24 BellList.jsp OrderDetail 資料集
兩個更新物件，一個為 Quity(數量)另一個為 Trade(選取方塊)。更 新後前往 BellList.jsp。
圖 6-25 BellList.jsp 插入更新表單
當 Carlist 無資料，也就是 notDcheck 查詢無資料時顯示您的商品已 經全部確認。
Amount.jsp
顯示出繳費清單。
設計四個資料集 Vip、CarOrder、BLtotal、CarList。其中 Vip 資料 集的篩選條件為 session 變數 VipID，其他三個資料集 CarOrder、
BLtotal、CarList 篩選條件皆為 session 變數 BOID，然後再使用 session.invalidate();清除 session 已強迫使用者登出。
圖 6-26 Amount.jsp
login.jsp
會員沒登入時，卻想要購買商品即顯示此頁，設計為三秒後自動前往 首頁。
<meta http-equiv="refresh" content="3;URL=Content.htm">
login-fail2.jsp
註冊會員時，註冊資料若不其全集顯示並告知註冊錯誤，設計為三秒 後前往首頁。
<meta http-equiv="refresh" content="3;URL=Content.htm">
6-2 實作留言版
實作一個訪客留言版，讓大家可以另用它來傳達一些訊息，如此 一來可以吸引大量的訪客登入留言，增加訪客人數。設計一個觀看留 言版的留言版檢視頁 guestbook.jap，和新增留言頁 add_gbook.jsp。
留言版程式的架構圖
訪 客 流 言 板
留 言 檢 視 頁 gu estb o ok .jsp
新 增 留 言 頁 ad d -g bo o k.jsp
6-2.1 建立資料庫
使用資料庫，把留言版的資料全部儲存下來，設計一個資料庫
guestbook.mbd，可以用來儲存姓名、性別、個人網頁、電子郵件、
msn 信箱、留言內容、留言日期、及訪客 IP，其如下圖所示：
圖 6-27 guestbook 資料表
其中『PostDate』欄位，使用內建函數 Now()，Now()函數會傳回電 腦現在的日期時間。
6-2.2 留言版頁面設計 guestbook.jsp
設計一個 guestbook 資料集，然後要把最新的留言顯示在最前面，在 Sort(排序) 選擇『PostDate』欄位，排序方法設為『Descendind』(遞 減排序)。如下圖所示：
圖 6-28 guestbook.jsp guestbook 資料表
並設計為重複區域，且一次是顯示 10 筆資料，此段程式碼是用 while 迴圈把資料表中的每一筆資料顯示出來，直到 guestbook_hasData 傳 回 false(假)的時候才結束。
<% while ((guestbook_hasData)&&(Repeat1__numRows-- != 0)) { %>
...內容
<%
Repeat1__index++;
guestbook_hasData = guestbook.next();
}
%>
設定留言版的主畫面可以顯示現在瀏覽的位置和筆數，使用
『Recordset Navigation Status』(資料集狀態瀏覽列)，並指定到
Bar』(資料集導覽按鈕)，設計完成後如下圖所示：
圖 6-29 ghostbook.jsp
Addguestbook.jsp
新增留言機制，讓訪客有新增留言的功能。
使用『Record Inserting Form』(新增資料表單)，指定要連接的資 料表為 guestbook，其中在 IP 欄位設為『Hidden』隱藏欄位型態，
因為這部份要用 JSP 物件自動取得對方的 IP 位址。使用 request 物 件的 request.getRemoteAddr()方法，來設定自動取得使用者的 IP 位址。
6-3 實作線上討論區
實作討論區，分為一般使用者和管理者。
線上討論區系統程式架構圖
線上討論區系統
一般使用者 介面
討論區主題頁 board.jsp
發表討論主題頁 add-topic.jsp
觀看主題頁 viewtopic.jsp
回應討論主題 頁 retopic.jsp
管理者介面
登入 login1.jsp
管理者檢視頁 aminnboard.jsp
討論區資料維護頁 editboard.jsp
修改主題內容頁 upd-topic.jsp
修改回應內容頁 upd- reply.jsp
刪除主題內容頁 deltopic.jsp
刪除回應內容頁 delreply.jsp
6-3.1 建立資料庫
建立一個 board 的資料庫，分別建立 Topic、Reply、Username 資料 表，Topic 資料表是用來存放與討論主題相關的資料表，而 Reply 資 料表則是用來儲存與回應主題相關的資料表，Username 資料表用來
儲存管理者資料。其中一個主題有可能有很多的回應文章，所以在資 料庫關聯圖裡面 Topic 資料表對應 Reply 資料表為一對多的關係。
圖 6-30 Topic 資料表
圖 6-31 Reply 資料表
6-3.2 討論區頁面設計 board.jsp
因為有可能會有很多討論主題，所以各資料行設有底色來區分，以免 過多的資料列出反而讓使用者更眼花僚亂，設計當類別欄位中若為特 急件時就用紅色字顯示，再設計一個關鍵字查詢功能，以方便使用者 查詢欲找的文章。建立名為 board 資料集指定到 Topic 資料表，使用 Repeat Region (重覆區域)使其資料可以一次顯示 10 筆資料，再加 入翻頁功能，插入應用程式的 Recordset Navigation Bar (插入導 覽列)，因為在 while 判斷式(Dreamweaver 用來計算重複區域)有一 個不段累計 <% Repeat_index++;%>，所以只需將編號欄位程式碼寫 成<%= Pepeat1_index %>即可顯示為第幾篇的回應，再來新增表格欄 位中的底色，要先定義 color 變數來存放顏色的變數，設計當表格是 奇數行的時候顯示一種顏色，偶數行時則顯示另一種顏色。
<%
if((Repeat1__index % 2)==0){
color = "DDFFFF";
}else{
color = "FEFFFF"; }
%>
如果資料欄位的值是像(“特急件”)的話，就將字的顏色改用紅色表 示並使用粗體字顯示。
<% board_data = board.getObject("TopicType");
if(board_data.equals("特急件"))
out.print("<font color='#ff0000'>"+"<b>" );
out.print(board_data);
out.print("</font>");
%>
在做關鍵字查詢時，建立一個 board 資料表並下達 SQL 語法的 WHERE 條件判斷，設定『QueryName』、『Keyword』兩個變數來接收使用者查 詢時，所選擇的查詢類型與關鍵字的值，如下圖所示：
圖 6-32 board.jsp bosrd 資料集
當點選討論主題的動態資料超連結之後，便顯示相關的主題的相關內 容，判別方式是以網址傳參數值的方式進行，而傳遞的參數則是主題 的編號(Topic.TopicID)的值，參數名稱為 TopicID。
Add_topic.jsp
發表新主題，直接新增 Insert Record linsertion Form (新增表單