Design and Application of Java for Electronic Commerce t OGPu{s mWGM09008037 Q a I GS h EQG~C DGJava{ql]pP h j

(1)

中華大學碩士論文

題目：Java 程式於電子商務的設計與應用

Design and Application of Java for Electronic Commerce

系所別：機械與航太工程研究所學號姓名：M09008037 鄒泳富指導教授：范志海博士

中華民國九十二年七月

(2)

(3)

(4)

(5)

中文摘要

本論文之目的為利用 Java 物件導向形式的程式語言能力與跨平台的優勢，和 Macromedia Dreamweaver MX 來實做具有跨平台的 JSP 網站，以及以開放式資料連結(ODBC)驅動 Access 資料庫，並且使用 JDBC-ODBC 橋接器，使 JSP 可以和 Access 資料庫用 SQL 語法來溝通，

來對資料庫做新增、修改、刪除、與查詢，來達成電子商務中汽車零件網路採購的設計與實作。

設計與實作一完整購物機制，包括有會員登入、把商品放入購物車、結帳時的二次確認購買、列出帳單等等，另外還有訪客計時器、

預防重複計算、實作留言版、討論區包括主題的回應、查詢主題相關文章、管理者的修改與刪除，包括管理者新增、修改、刪除公告之公告系統。

(關鍵字：JSP、Macromedia Dreamweaver MX、電子商務)

(6)

Abstract

The main purpose of this paper is using Java language with object-oriented and cross platform characteristics and Macromedia Dreamweaver MX to establish a JSP web site with cross platform property and a database with open database connectivity(ODBC).

The JDBC-ODBC bridge is used to connect JSP and the Access database by using SQL language. The data in database can be added, modified, deleted, and inquired. An electronic commerce system for car elements purchase is designed and implemented.

To design and implement a complete purchase system include member registration, putting goods in purchase vehicle, secondary

confirmation for checking out and listing bills. In addition, the clocks for visitors, repeated counting prevention, message leaving board design, discussion area with the response and inquiring of topics. The announcing system with addition, modification and deletion function is also included.

(keywords : JSP、Macromedia Dreamweaver MX、Electronic Commerce)

(7)

誌謝

本論文得以順利完成，承蒙指導教授范志海博士，在這兩年期間敦敦教悔與悉心的指導，使我在治學態度、研究方法上受益良多，另外還要感謝陳振文博士、黃榮興博士百忙之中抽空前來對本論文的指正與教導，在論文審查時的不吝指教並提供意見，使得本論文的架構及內容更加充實，在此致上我最誠摯的敬意與謝意。

同時我要特別感謝鄧安村學長、劉俊宏學長、黃金龍、許仲賢在課業上及程式上設計上給我相當多的提點及幫助使我受益良多，還要感謝同實驗室同學黃永仁、嚴凱軍、朱清文，他們在課業與生活各方面給予相當多的幫忙與照顧以及吳思賢、林凱恩、范剛峰、孟憲虹、

楊昇穎、莊愷譯等和自控組學弟呂文德、賴偉豪在生活上給予相當多的幫助，感謝你們的協助與幫忙使本論文得以順利完成。

最後感謝永遠支持我的家人父親鄒賢仁、母親溫秀嬌、大哥鄒永鋒、大姐鄒佩青、二姐鄒佩玲，從來不說辛苦的讓我唸完了碩士學業，

和女友張雅婷在我最辛苦的時候支持、鼓勵、幫助我，使我能順利完成學業，在此，願將這份喜悅與你們一同分享。

(8)

表目錄

表 3-1 JSP 網頁的隱含物件...14 表 4-1 Access 中數字可儲存之數值類型表...22 表 4-2 ResultSet 物件中取得不同資料之方法...27

(12)

圖目錄

圖 4-1 儲存留言版之資料表...18

圖 4-2 Microsoft Access...19

圖 4-3 設計檢視畫面...20

圖 4-4 新增欄位...20

圖 4-5 文字資料...21

圖 4-6 數字資料類型欄位的屬性...22

圖 4-7 建立 JDBC-ODBC 來源(1)...23

圖 5-1 Dremweaver MX 本機端 Site 網站與遠端 Web Server 主機網站的關係圖...33

圖 5-2 site 網站定義...33

圖 5-2 連線到本機端 Tomcat 伺服器...34

圖 6-1 store1 資料庫...36

圖 6-2 car 資料表...36

圖 6-3 Category 資料表...37

圖 6-4 OrderDetail 資料表...37

(13)

圖 6-5 VIP 資料表...38

圖 6-6 store1 資料庫關聯圖...39

圖 6-7 購物車首頁 index.htm...40

圖 6-8 設定 CategoryID...42

圖 6-9 Getcar.jsp Vip 資料集...43

圖 6-10 Getcar.jsp 記錄修改表單...43

圖 6-11 Gotobuy.jsp Vip 資料集...44

圖 6-12 Sumtotal 查詢...45

圖 6-13 SumNum 查詢...45

圖 6-14 ShopState 查詢...46

圖 6-15 NeqVip.jsp 記錄插入表單...46

圖 6-16 Car1.jsp Cars 資料集...47

圖 6-17 Car1.jsp category 資料集...47

圖 6-18 Car1.jsp CateTotal 資料集...47

圖 6-19 car.jsp...48

圖 6-20 CarDetail 查詢...49

圖 6-21 notDcheck 查詢...50

圖 6-22 BLtotal 查詢...50

圖 6-23 CostTotal.jsp...51

(14)

圖 6-24 BellList.jsp OrderDetail 資料集...52

圖 6-25 BellList.jsp 插入更新表單...52

圖 6-26 Amount.jsp...53

圖 6-27 guestbook 資料表...55

圖 6-28 guestbook.jsp guestbook 資料表...56

圖 6-29 ghostbook.jsp...57

圖 6-30 Topic 資料表...59

圖 6-31 Reply 資料表...59

圖 6-32 board.jsp bosrd 資料集...61

圖 6-33 Add_topic.jsp...62

圖 6-34 viewtopic.jsp...63

圖 6-35 retopic.jsp 新增記錄表單...64

圖 6-36 editboard.jsp...65

圖 6-37 upd_topic.jsp 修改表單...66

圖 6-38 upd_reply.jsp 修改表單...67

圖 6-39 delyopic.jsp 刪除記錄...67

圖 6-40 delreply.jsp 刪除記錄...68

圖 6-41 Manage 資料表...70

圖 6-42 NewsContent 資料表...70

(15)

圖 6-43 NewsOpt 查詢...71

圖 6-44 LoginOK.jsp Recordset1 資料集...72

圖 6-45 Add.jsp 記錄插入表單...73

圖 6-46 Fix_upd.jsp...74

圖 6-47 Fix.jsp...75

圖 6-48 Delete.jsp...76

圖 6-49 count 資料表...77

圖 6-50 預存程序...78

(16)

第一章緒論

1-1 研究動機

二十一世紀的我們，電腦越來越普及幾乎家家都有電腦，近年來網際網路的快速發展，使得電腦一接上網際網路時，變的有無限的可能、無限的距離、無限的機會還有無限的商機。再過幾年，人們漸漸會依賴網際網路的生活，隨之而來效應是難以想像的，例如線上訂位、線上購物、線上交易等等的電子商務。

網際網路的建構技術，從單純展示圖片文字的靜態網頁，到可以與使用者互動的動態網頁，網頁可以依據使用者的需求而產生不同的網頁，更可以透過網頁將資料送到 Web 站台上，也使得 WWW 從單純的多媒體資訊展示，走向電子商務應用。

為了尋求能與後端資料庫緊密結合，以及輕易顯示個人化的網頁資訊，Java Server Page(簡稱 JSP)[1]~[12]，承繼了 Java 物件導向式的程式語言能力與跨平台的優勢[13]~[17]，而且客戶端只有在第一次請求 JSP 網頁時，才需要被編譯，伺服端不用都必須再重新編譯一次，是目前網路上占大多部份 ASP (Active Server

Page)Microsoft、php 網頁語言執行環境所不能做到的。

(17)

1-2 論文架構

本論文，第一章說明研究動機及各章節的介紹；第二章開始簡介動態網頁的設計概念及執行於客戶端(Client)與伺服端(Server)的程式；第三章為 JSP 簡介；第四章 JSP 與資料庫之間的關係包括取得與建立；第五章研究軟體介紹說明 Macromedia MX 的架構與 Tomcat 網頁伺服器；第六章為電子商務設計與實作部份；第七章結論及未來展望。

(18)

第二章動態網頁設計概論

2-1 WWW 的基本概念

WWW 的架構

WWW 的架構主要分成兩部份，一為伺服端(Server，遠端)，也就是資訊的提供者，二為客戶端(Client，近端)，也就是資訊的接收者。在 WWW 中，伺服端就是存放網頁供使用者瀏覽的網站。而客戶端則是透過網路觀看網頁之電腦與使用者的總稱。而實際上執行於電腦上供使用者操作、觀看網頁的應用程式為瀏覽器(Browser)，目前常見的有 Internet Explorer(IE) 與 Netscape 的

Communicator(NC)。整各網頁的瀏覽過程，是由客戶端(瀏覽器)向伺服端(WEB 伺服器)要求瀏覽某一網頁，WEB 伺服器便將該網頁傳送給瀏覽器，由瀏覽器負責解析網頁，並呈現給使用者觀看。

URL 位址

URL 的全文為 Uniform Resource Locator，為統一資源定位器，

URL 用於指定欲取得 Internet 上資源的位置與方式，常見的資源取用方法有 http、ftp(檔案傳輸協定)、news(新聞傳輸協定)….等等。

HTML 語言

HyperText Makeup Language 譯為超文件標記語言，用於描述超文

(19)

件中，資料的呈現方式，從控制文件的顏色、大小，到標記資料的種類為圖檔或聲音…等。

描述的方式是利用一組一組的 HTML 標籤，將欲進行格式控制的資料包夾起來。

2-2 動態網頁

雖然運用 HTML 語法在網路上呈現多媒體文件，但僅能單純的呈現網頁內容，而無法針對不同網頁瀏覽狀況做出即時回應，如：不同瀏覽者、瀏覽者的行為…等。因此這類單純由 HTML 所建構，無法和使用者產生互動的網頁，被稱之為靜態網頁。為了讓網頁能夠依照不同的情況做出動態的回應，在網頁中加入程式建立動態回應的機制。

2-3 執行於客戶端的網頁程式語言

執行於客戶端的網頁程式語言，其執行過程是將網頁從伺服器中下載下來，由瀏覽器負責解釋並執行，最後將執行後的網頁顯示在瀏覽器中。目前於執行端的網頁語言有 JavaScript 、VBScript、

JScript。這三者皆為直譯式(Interpreted)語言。

(20)

2-4 執行於伺服端的程式

CGI 程式介面是一個伺服端執行的網頁程式，主要用途在處理從客戶端送到伺服端的資料。客戶端通常透過表單(From)將資料送至伺服端。伺服端再透過 CGI 介面(Common Gateway Interface)將前端網頁資料，再轉傳餒負責處理此訊息的程式。當完成執行後，該程式便會將執行結果所產生的網頁輸出給伺服器，由伺服器負責回傳給客戶端。Java Servlet ，Servlet 是一各 Java 類別，被執行時，將動態載入伺服器的記憶體中。有不同的使用者請求同一各 Servlet 時，將以不同執行緒的方式處理這些請求，而不會建立新的行程，固有較高的執行效率，也比較有彈性。由於 servlet 執行於 Java 的虛擬機器上，所以具有良好的可攜性，也可以達到跨平台的效果。

JavaServer Pages(JSP)，當 JSP 被執行時，該引擎將先把 JSP 轉譯為 Servlet，再加以執行。

(21)

2-5 客戶端 V.S 伺服端

客戶端技術的特性

1. 檢查使用者輸入在網頁中，欲傳到伺服器的資料。

2. 回應使用者在網頁中執行的動作，所觸發的事件。

3. 控制瀏覽器。

伺服器的特性 1. 操作資料庫。

2. 控制網頁在不同狀態下的顯示內容。

3. 取得網站的相關資訊。

(22)

第三章 JSP 簡介

3-1 Java Server Page

Java Server Page 簡稱 JSP，不但擁有 Servlet 的所有特性與優點，更新增了程式開發上的彈性，除了 Java 程式本身跨平台的優點，

它直接在 HTML 中內嵌 JSP 程式碼，使得程式開發更為容易、方便。

JSP 是完全架構在 Servlet 程式上，不同的是，JSP 程式是由 JSP Engine 先將之轉換成相對應的 Servlet 程式碼，接著將它編譯成類別檔載入執行，然後它就如同一般的 Servlet 一樣。

當客戶端請求一個 JSP 網頁時，JSP Engine 會檢查所請求的 JSP 網頁是否已經處於被載入執行的狀態，如果沒有，它會先讀取 JSP 程式檔，將它換成 Servlet 程式碼編譯載入，然後才執行請求的服務。

也就是說，只有當客戶端第一次請求 JSP 網頁時，才需要被轉換、編譯和載入。JSP 的 Servlet Class 是 JSP Engine 自動幫我們編譯產生的，不像 Servlet 需要手動編譯。

(23)

3-2 JSP 網頁結構

在 JSP 網頁中，大致上可以分為程式碼與非程式碼兩各部份，程式碼的部份將以 <% 與 %> 符號標示，稱之為 Scriptlet，其他非程式碼的部份則跟一般網頁(.htm 檔)的撰寫方式相同。整各 JSP 網頁的結構，包含了三種元件。

1. Directives Elements (指令元件) 2. Action Elements (動作元件) 3. Script Elements (描述語言元件)

3-3 Directives (指令元件)

用於指定 JSP 網頁有關輸出的方式、引用套件、載入檔案…等相關設定，指令元件並不會輸出任何資料至前端，且有效範圍僅限於使用該指令的 JSP 網頁，指令元件有分三種：

1. 網頁指令(The page directive) 2. 載入指令(The include directive)

3. 標籤資料庫指令(The taglib directive)

(24)

網頁指令可以設定的屬性如下：

languag：定義 JSP 網頁所使用的描述語言，若所使用的 JSP 引擎支援 Java 以外的語言時，可以使用此指令指定 JSP 網頁使用的語言，

其語法如下：

<%@page language=”描述語言”%>

extends：指定 JSP 網頁編譯後產生的 Serlet，應延伸哪一個超類別(SuperClass，亦稱為父類別)，其語法如下：

<%@page extends=”父類別名稱”%>

import：指定 JSP 網頁中所使用的 JAVA 套件(package)，語法如下：

<%@page import=”套件 1,套件 2,...”%>

在 Java 的物件導向觀念中，套件(package)的觀念，是其它物件導向程式所沒有的。在 Java 中，將運用套件的觀念，把程式設計師使用的類別儲存起來。像是一個儲存類別的容器，這個容器可以存放許多類別，程式設計師需要使用某各類別時，只要在程式中，引用這個容器即可。

session：設定此網頁被瀏覽時，是否可使用代表使用者的 session 物件，其語法如下：

<%@page session=”true|false”%>

(25)

buffer：設定網頁輸出時，是否使用緩衝區，其語法如下：

<%@page buffer=”none|緩衝區大小 kb”%>

緩衝區大小必須是 8kb 的倍數。若設定為 none，表示輸出 JSP 網頁時，將不使用緩衝區。

autoFlush：當緩衝區滿了後，是否自動輸出緩衝區的資料，其語法如下：

<%@page autoFlush=”true|false”%>

預設值為 true。

isThreadSafe：定義是否以執行緒方式回應瀏覽此 JSP 網頁的要求訊息，其語法如下：

<%@page isThreadSafe=”true|false”%>

預設值為 true。

info：說明資訊，其設定語法如下：

<%@page info=”網頁說明資訊”%>

errorPage：設定此 JSP 網頁，若發生錯誤訊息時，顯示錯誤訊息之網頁的 URL 路徑，設定語法如下：

<%@page errorPage=”錯誤訊息網頁的 URL 路徑”%>

(26)

isErrorPage：設定此 JSP 網頁是否為錯誤訊息網頁，設定語法如下：

<%@page isErrorPage=”true|false”%>

預設值為 false。

contentType：設定 JSP 網頁輸出資料時，所使用的字元壓縮方式，以及所使用的字元集。當我們撰寫中文網頁時，必須以下面的語法，

設定 contentType 屬性。

<%@page contentType=”text/html；charset=Big5”%>

載入指令：用於將某檔案載入網頁，載入指令的設定語法如下：

<%@include file=”檔案名稱”%>

標籤資料庫指令：標籤資料庫(tag library)是由使用者自行定義的網頁標籤。當欲使用自訂的網頁標籤時，必須在 JSP 網頁中，指定欲載入標籤資料的 URL 位置(Uniform Resource Identifier，譯為統一資源識別子)，並定義標籤的前置標記，其語法如下：

<%@taglib uri=”標籤資料庫的 URL” prefix=”前置標記”%>

(27)

3-4 Action Elements(動作元件)

動作元件用於執行一些標準常用的 JSP 網頁動作，例如：將網頁轉向、使用 Java Bean 的屬性….等。在 JSP 中，動作元件共有下面幾種：

●<jsp：useBean>

此動作元件用於宣告 JSP 網頁中，欲使用的 JavaBean 物件。

●<jsp：setProperty>

此動作元件在 JSP 網頁中，將用於設定所使用 JavaBean 物件的屬性。

●<jsp：getProperty>

此動作元件在 JSP 網頁中，將用於取得所使用 JavaBean 物件的屬性。

●<jsp：param>

此動作元件用於傳送參數，必須配合<jsp：include>、<jsp：forward>

與<jsp：plugin>動作一起使用。若使用<jsp：param>將參數傳遞給 JSP 網頁時，在 JSP 網頁中，將可利用下面的語法取得傳入之參數。

request.getParameter(“參數名稱”)

●<jsp：include>

此動作元件用於動態載入 HTML 網頁或者 JSP 網頁。

●<jsp：forward>

此動作元件用於將瀏覽器顯示的網頁，導向至另一個 HTML 網頁或

(28)

者 JSP 網頁。

●<jsp：plugin>

此動作元件用於載入 Java Applet 或者 Java Bean。

3-5 Scripting Elements(描述語言元件)

●Declarations(宣告敘述)宣告敘述的語法如下：

<%！

……..//宣告敘述 %>

●Scriptlets(程式碼區段)程式碼區段的語法如下：

<%

……….//程式碼 %>

●Expressions(表示式)表示式的語法如下：

<%=欲輸出資料 %>

3-6 JSP 網頁的隱含物件

在 JSP 網頁中，有一些已經完成定義的物件，稱之為隱含物件 (implicit object)。使用這些物件時，可以不經宣告，即可使用，

(29)

JSP 網頁的隱含物件說明如下：

隱含物件用途有效範圍對應之 Servlet

request 取得客戶端

資訊的物件

request javax.servlet.HttpServletRequest

response 用於設定 JSP 回應客戶端資料流的物件

page javax.servlet.httpServletResponse

pageContext 用於存取 JSP 網頁執行時期，所需要使用的屬性與方法

page javax.servlet.jsp.PageContext

session 同一連線過

程中產生的 session 資料

session javax.servlet.jsp.HttpSessoion

application 提供 JSP 網頁執行時重要資料

application javax.servlet.jsp.ServletContext

out 標準輸出物

件，用於將資料輸出至回應客戶端之資料流

page java.servlet.jspWriter

config JSP 的設定資源

page java.servlet.jsp.ServletConfig

page 代表目前網

頁，相當於 Java 中的 this 物件

page javax.lang.Object

表 3-1 JSP 網頁的隱含物件

(30)

第四章資料庫應用

４－１ JSP 網頁與資料庫

我們想要在 www 上做一樁成功的買賣，除了我們必須告訴買方，

我們在賣些什麼之外，還必須能夠知道買方是誰，想要買什麼。運用靜態網頁僅能將我們想賣的東西告訴買方，卻無法得到買方的資料。

所以我們必須找出如何從客戶端取得買方的資料、與欲訂購之產品明細。我們可以用檔案儲存簡單的資料、像是訪客人數、訪客留言…之類的資料還可以儲存。若想儲存訂單資料、顯然沒有多大的用處，因為如果每一筆訂單都儲存成一個檔案，那有一天如果有幾百來筆的交易，那網站上不就會有幾百個文字檔、這樣實在是太累了。所以我們要把資料存在資料庫裡面，不論在儲存上、應用上與維護上絕對比起存在檔案理的來的方便優秀的多。

JDBC

我們在 JSP 網頁中，我們要用 JDBC(Java Database Connectivity)。

JDBC 是一組 API(Application Programming Interface 應用程式介面)，這組 API 可以協助我們，處理資料庫與資料庫間的連結動作。

由於 JDBC 是以 Java 撰寫，亦所以具備了 Java 跨平台的特性。因此，

(31)

我們利用 JSP 與 JDBC 開發 Web 應用程式，具備良好的可攜性 (Portability)。

JDBC 共有四種類型，分別為 TYPE1、TYPE2、TYPE3、TYPE4。

TYPE1 與 TYPE2 需要安裝驅動程式至使用者電腦，TYPE1 把 JDBC API 轉成 ODBC 的呼叫方法，TYPE2 轉換成資料庫的原生碼。TYPE3

與 TYPE4 不需安裝任何驅動程式至使用者電腦，TYPE3 則透過中繼軟體(middleware)進行資料存取，TYPE4 則完全由 Java 撰寫之驅動程式與資料庫溝通。

TYPE1：JDBC-ODBC 橋接器(JDBC-ODBC bridge)：

這類型的驅動程式是 JDK 內建的 package，這種類型的 JDBC 並沒有直接和資料庫溝通，是透過安裝好的 ODBC 驅動程式，再透過

JDBC-ODBC 橋接器的轉換，由於 ODBC 本身可以跟任何的資料庫溝通。利用轉換的方式就可以達到 Java 聯結後端資料庫的目的。這類型的資料庫執行效能比較差(因為有透過轉換)。

TYPE2 ：原生 API 驅動程式(Native-API Driver)：

與第一類型相似，但是不需透過 ODBC 即可聯結資料庫，而是透過 Java Native Interface 的技術，呼叫資料庫本身所提供的 API 來存取資料庫，在轉換成資料庫指定原生碼，此類由資料庫廠商提供的

(32)

API 函數，大多由 C/C++寫成，一般來說，執行效率較高。

TYPE3：網路協定與中介軟體驅動程式(JDBC-Net pure Java Driver)：

此類型的驅動程式使用網路協定(protocol)，Client 端與資料庫之間使用中介軟體 (Middleware)，JDBC 對資料庫的請求與回覆皆透過中繼伺服器(MiddServer)來處理，這類型的驅動程式用 Java 寫成，

可攜性最高，故具跨平台的功能。

TYPE4：原生協定及純 Java 驅動程式(Native-protocol pure Java Driver)：

此類型的驅動程式使用與資料庫相同的協定(protocol)，它直接透過網路協定，將資料送出至資料庫處理或從資料庫取回資料，可以直接與資料庫溝通，因此此類型驅動程式具跨平台的功能。

(33)

４－２簡介 Access 資料庫的操作

這次研究所使用的資料庫為 Microsoft Office 中的 Access，

Access 為供給個人與小型企業使用的資料庫應用軟體，該軟體裡面有資料表該軟體裡面有資料表、查詢、表單….等物件。下圖為用於儲存留言版資料之內容。

圖４－１儲存留言版之資料表

在 JSP 網頁開始運用 Access 資料庫儲存資料表之前，必須完成資料庫與資料表的建立。

建立一個資料庫

啟動 Access，進入 Microsoft Access，在新增檔案裡面點選空白資料庫選項。

(34)

圖 4－２ Microsoft Access

資料表的建立

資料表是 Access 中儲存資料的物件，將在資料儲存進資料表前，

必須先完成資料表的建立。所謂的建立資料表，就是設定資料表中有哪些欄位，以及這些欄位所欲儲存的資料型態是哪一種。這些設定的進行完成於資料表的設計檢視畫面中，下圖為資料表的設計檢視畫面。

(35)

圖 4－３設計檢視畫面

欄位的新增與操作

新增一欄位時，第一步是在欄位名稱攔中，設定儲存資料之欄位名稱。第二步則在資料類型欄中，選取該欄位所欲儲存資料的類型。而敘述欄僅用於輸入說明該欄位用途的文字。

圖 4-4 新增欄位

(36)

完成了欄位名稱與所儲存資料類型設定後，第三步則要進行各欄位屬性的設定。各欄位的屬性設定將隨資料型態的不同而不同。

文字

單純的文字資料，可用於儲存地址、電話號碼…這一類不需要進行計算的資料。一個文字欄位最多可儲存 255 個字元。下圖為文字資料類型欄位的屬性設定。

圖 4-5 文字資料

數字

可以用來進行數學運算數值資料，但若為貨幣資料時，則需要使用貨幣類型。在 Access 中，型態為數字的欄位，可以儲存之數值類型如下表。

(37)

類型可儲存數值的範圍小數點位數

儲存空間

位元組 0~255 無 1 位元組

整數 -32768~32768 無 2 位元組

常整數 -2147483648~2147483648 無 4 位元組

小數點 (浮點數)

儲存數字範圍。當為負值時 -1.79769E308 至-4.94065E-324，

當為正值時，1.79769E308 至 4.94065

15 8 位元組

單精準數儲存數字範圍。當為負值時

-3.40282E38 至-1.40129E-45 當為正值時 1.40129E-45 至 3.40282

7 4 位元組

雙精準數儲存數字範圍由

− 10

²⁸-1 至

10

²⁸-1 28 12 位元組

複製編號全域唯一識別子不適用 16 位元組

表 4-1 Access 中數字可儲存之數值類型表

下圖為數字資料類型欄位的屬性設定畫面。

圖 4-6 數字資料類型欄位的屬性

(38)

４－３資料庫連結的建立

建立 ODBC 資料來源，本次研究裡用 TYPE1 類型的 JDBC 驅動程式，操作 Access 資料庫。因此我們在利用資料庫前，必須在伺服端的電腦上，完成 ODBC 資料來源的建立。首先我們先進入控制台的系統管理工具點選資料來源(ODBC)選項。

圖 4-7 建立 JDBC-ODBC 來源(1)

然後到系統資料來源裡面新增一各 Microsoft Access Driver(*.mdb)

(39)

利用選取資料庫的對話盒，選取提供資料的 Access 資料庫

(40)

當我們完成了資料來源的建立，我們就可以在 JSP 網頁中，連結此資料來源。

此外，進行資料庫連結時，需使用 java.sql 套件中的類別。在正式聯結資料庫時，首先必須利用 Class.forName 方法載入驅動程式類別。

Class.forName(“sun.jdbc.odbc.jdbcOdbcDriver”) 當驅動程式載入記憶體之後，將會自動利用驅動程式管理員

-java.sql.DriverManager 類別，註冊載入的驅動程式，使其狀態為可使用(available)。然後再利用 DriverManager 類別開啟資料庫的連結，其語法如下：

Connection Connection 物件變數 = DriverManger.getConnection (“jdbc:odbc:ODBC 資料來源名稱”,”使用者帳號”,”密碼”)

(41)

４－４從資料庫取得資料

當我們透過資料庫連結，執行 SQL 敘述進行資料查詢時，回傳的查詢結果為紀錄集。運用紀錄即取得回傳的紀錄時，就像是一各虛擬的資料工作表。我們用到紀錄指標(Cursor)的觀念來取得資料。紀錄集雖然是由一組紀錄所組成，但是我們只能一次存取一筆紀錄。而這筆紀錄就是紀錄指標所指向的紀錄，該筆紀錄稱之為目前紀錄 (Current Record)。我們在 JSP 程式中，便透過這各指標，指定紀錄集中欲操作的紀錄。

Index Name Category E-mail

1 黃永仁同學 kaber@chu.edu.tw 2 嚴凱軍同學 kjyan@chu.edu.tw 3 朱清文同學 xyz @chu.edu.tw

在 JDBC 中，用於操作紀錄集的物件為 ResultSet，當執行 SQL 敘述查詢資料庫時，便會傳回此物件。

在查詢動作之前，我們必須在程式中，呼叫 Connection 物件的 createStatement 方法，建立 Statement 物件，以代表 SQL 敘述，其語法如下：

紀錄指標

(42)

Statement Statement 物件變數 =

Connection 物件變數.createStatement()

當我們建立好 Statement 物件後，我們將開始執行查詢動作，並將結果以 ResultSet 物件傳回，其語法如下：

ResultSet ResultSet 物件變數 =

Statement 物件變數.executeQuery(String SQL 敘述)

欲從 ResultSet 物件中，取得紀錄指標目前指向紀錄各欄位的資料時，可以依照欄位中的資料型態呼叫 getxxx 方法，其語法如下：

ResultSet 物件變數.getxxx(“欄位名稱”)

下表為從欄位中，取得各種不同資料的 getxxx 方法。

方法說明

getBoolean 從欄位中取得型態為布林值的資料

getByte 從欄位中取得型態為 Byte 的資料

getBytes 從欄位中取得型態為 Bytes 的資料

getDate 從欄位中取得日期資料，並回傳為 Date 物件

getDouble 從欄位中取得型態為 Double 的資料 getFloat 從欄位中取得型態為 Floate 的資料

getInt 從欄位中取得型態為 Int 的資料

getLong 從欄位中取得型態為 Long 的資料

getTime 從欄位中取得日期資料，並回傳為 Time 物件

表 4-2 ResultSet 物件中取得不同資料之方法

(43)

欲取得 ResultSet 物件開啟紀錄集中的欄位數時，必須呼叫

ResultSet 的 getMetaData 方法，取得 ResultSetMetaData 物件，然後呼叫 getColumnCount 方法，

取得紀錄集中的欄位數目，其語法如下：

ResultSetMetaData ResultSetMetaData 物件 = rs.getMetaData();

取得 ResultSetMetaData 物件之後

int ColNum = ResultSetMetaData 物件.getColumnCount();

就可以取得欄位數目了

欲取得資料集中某欄位名稱的語法如下：

ResultSetMetaData 物件變數.getColumnName(欄位索引值)

(44)

第五章系統軟體介紹

5-1 Macromedia MX 的架構[20]

Macromedia 公司在西元 2002 年整合期下的的軟體產品，

Macromedia 公司推出 Macromedia MX 的架構，此架構包含了 Macromedia Flash Player、Macromedia Coldfusion、

Macromedia Studio MX 三個部份。

1. Macromedia Flash Player ：定位在 Client 端，提供 Client 端擴充豐富的網頁瀏覽能力。

2. Macromedia Clodfusion MX：定位在 Server 端，是等級應用程式，

它提供環境使得 Macromedia Studio MX 可以快速且輕鬆地建製豐富的網頁應用程式。

3. Macromedia Studio MX：定位為開發工具 (tools)，包含有

Macromedia Dreamweaver MX、Macromedia Flash MX、Macromedia Fireworks MX、Macromedia FreeHand 軟體。

1. Macromedia Dreamweaver MX：專業的網頁編輯軟體。

2. Macromedia Flash MX：專業的網路動畫製作軟體。

3. Macromedia Firework MX：專業的影像處理軟體。

(45)

4. Macromedia FreeHand：專業的向量繪圖軟體。

Dreamweaver MX 的編輯環境，包括物件列、工具列、程式編輯區等。

物件控制面板，是 Dreamweaver 主要工具之一，它可以讓我們以視覺化的方式，輕鬆的將許多元件插到我們設計的網頁當中，也是在設計網頁當中最常用到的工具。

『Common』物件：最常用到的物件，裡面有插入超連結文字、E-mail 超連結、書籤、表格、圖層、圖片、Fireworks 物件、超連結圖片、

插入工具列插入物件列

文件碼編輯區

Site 網站控制面板屬性面板

(46)

導覽列、水平線、日期、表格資料物件、網頁註解、標籤。

『Layout』物件：可以設定表格與圖層的檢視模式，其中有插入表格、

圖層、切換標準模式、切換 Layout 模式、Layout 模式表格、Layout 模式的儲存格。

『Text』物件：提供許多的文字格式供選擇，對映到 HTML 標籤。

『Table』物件：提供將表格標籤插入網頁原始碼的便利功能。

『Forms』物件：表單物件，其中有插入表單、單行文字方塊、隱藏表單、多行文字方塊、核取方塊、單選選擇紐、下拉式功能表、跳頁式選單、圖片按鈕、瀏覽檔案表格、按鈕、標籤、標籤註記。

『Templates』物件：插入樣板，建立樣板、插入巢狀 Nesred 樣板物件、建立可編輯區域、建立選擇區域，建立重複區域，編輯選項區域、

插入重複表格。

『Characters』物件：插入換行、控格、左引號、右引號，Dash 符號、英鎊符號、歐元符號、日圓符號、版權符號、註冊商標符號、商標符號、列出其他符號表。

『Media 物件』：插入多媒體物件，插入 Flash 物件、Flash 按鈕物件、

Flash 文字物件、Shockwave 物件、Applet 物件、參數物件、Active X 物件、Plugin 物件。

『Head 物件』：檔頭，插入 Meta 物件、關鍵字物件、描述物件、轉

(47)

址物件、Applet 物件、連結物件。

『Script 物件』：語法，殺入 Script 物件、顯示非 Script 物件、插入伺服器包含物件。

『JSP 物件』：插入網頁指令、載入指令、標籤資料庫指令、JSP 宣告、

JSP 程式區段、JSP Expression、使用 Java Bean、設定 Java property 指令、讀取 Java property 指令、插入 JSP Include 指令、插入 JSP Forward 指令、插入 Params 指令、插入 Parm 指令、插入 Plugin、插入 JSP 註解、插入更多標籤、JSP Include 指令。

『Application』物件：插入 Recordset 物件、重複區域物件、動態表格物件、動態文字物件、Recordset 導覽物件、Recordset 導覽列狀態物件、詳細頁面設定、資料寫入表單物件、資料修改表單物件。

(48)

5-2 Site(網站)定義

Dreamweaver MX 透過 Site (網站)，來規劃及維護本機端與遠端 Web Server 網站的所有檔案，包括檔案之間的超連結關係、版本控管…等。

圖 5-1 Dremweaver MX 本機端 Site 網站與遠端 Web Server 主機網站的關係圖

定義的 Site (網站) ：選擇 JSP 語言、設定 Local/Network 與遠端 Server 連線方式、自動更新遠端 Server 的檔案、設定

http://localhost:8080/carstore

為測試 JSP 程式網址。

圖 5-2 site 網站定義

(49)

5-3 Tomcat 網頁伺服器

Tocmat 是免費的 Java Servlet 與 JSP 技術開放原始碼實作，

由 Sun 和 Apache 合作，整合出來的 JSP Server。在 Apache 網站的 ASF(Apche Software Foundation，Apache 軟體基金會)管制之下，

Tomcat 可用於商業用途，它有 binary 版與 source 版。下圖為連線到本機端的 Tomcat 網頁伺服器。

圖 5-2 連線到本機端 Tomcat 伺服器

(50)

第六章電子商務設計與應用

6-1 設計購物車

本次設計之購物車的背景為汽車零件，並且採會員制購物，只要是會員選取過的商品，無論是否有達成交易均會被記錄下來。會員每次進行購物之前要利用電話號碼和密碼登入，以領取購物車，系統會自動給定每個會員對應的一個訂單編號，會員必須取得此訂單編號才可以進行購物。此外選取商品及其數量放進購物車之後，還要再做 double check，確定是否訂購，當然購物車內的商品也可以在這裡決定是否確定購買或取消購買，最後並列出其繳費清單。

購物車程式架構圖

購物車

index.htm,Func.jsp,Content.htm

非會員介面 會員介面

加入會員 New Vip.jsp

登入畫面 Content.htm

選擇項目與數量 Carsl.jsp

領取購物車 Getcar6.jsp

確認資料 Gotobuy2.jsp

列出消費狀況 Content2.jsp

無登入會員 Login.jsp

查看購物車 CostTotal.jsp

確認是否購買 BellList.jsp

繳費清單 Amount.jsp 沒放入購物車

即看繳清單 Amount-fail.jsp

(51)

6-1.1 建立資料庫

在 Microsoft Access 建立一個名為 Store1 的資料庫，分別建立 Car、CarOrder、Category、OrderDetail、VIP 五個資料表，如下圖所示。

圖 6-1 store1 資料庫

● Car 資料表是汽車零件資料表單，用來存放汽車零件的詳細資料，

設計內容如下圖所示：

圖 6-2 car 資料表

(52)

● Category 資料表是汽車零件分類表單，用來紀錄汽車零件分類資料，針對每一個分類給定一個編號，設計內容如下圖所示：

圖 6-3 Category 資料表

● OrderDetail 資料表是訂單明細的資料表單，用以紀錄訂單編號、書籍編號及數量，並紀錄其是否有被確認訂購，設計內容如下圖所示：

圖 6-4 OrderDetail 資料表

(53)

● VIP 資料集是會員基本的資料表單，包括會員的資本資料及登入密碼，設計內容如下圖所示：

圖 6-5 VIP 資料表

以上五個資料表，因為要確定是唯一值而且還要與其他的關聯表建立關聯，均設計一個自動編號的欄位及設成主索引。

之後再編輯資料庫的關聯：

一個零件可能有很多張訂單，Car 與 Category 是一對多的關係。

一個分類包含很多種零件，Car 與 Category 是多對一的關係。

一張訂單可能包含很多訂單明細，CarOrder 與 OrderDetail 是一對多的關係。

一個人可能有很多訂單，VIP 與 CarOrder 是一對多的關係。

(54)

其資料庫的關聯圖如下所示：

圖 6-6 store1 資料庫關聯圖

利用資料庫建立一連串的查詢，來幫助節省一些程式的計算。

在此設計六個查詢：

● BLtotal：紀錄每張訂單消費的總金額。

● CarDetail：紀錄所有放入購物車的汽車零件及其數量(只放入購物車)。

● notDcheck：紀錄為確認市否定購即離開的紀錄(以放入購物車但未確定是否購買即離開)。

● ShopState：紀錄每個人購買分類的零件總數量及總金額。

(55)

● SumTotal：紀錄每個人的消費總金額。

6-1.2 頁面設計

購物車的首頁為 index.htm，首頁設計為框架頁主要包含左框架的功能頁(Func.jsp)及右框架展示頁(Content.htm)，把右框架命名為 mainFram。

如下圖所示：

圖 6-7 購物車首頁 index.htm

(56)

Content.htm

在此設計一個加入會員的圖檔(join.jsp)並且連結到 NewVip.jsp

增加兩個文字輸入方塊，一個是名稱為 VipPhone 型態為 text，另一個名稱為 VipPW 型態為 password。

Func.jsp

在此頁設計顯示出產品分類的動態資料，所以必須聯繫(Bindings) Store1 資料庫的 Category 資料集，因為資料不只一筆，所以我們設計為 Repeat Gegion(重複區域)，如此一來表格內的資料會隨著資料庫變動的動態資料。

<% while ((Category_hasData)&&(Repeat1__numRows-- != 0)) { %>

當功能頁中點選某分類的動態資料超連結之後，便顯示相關的資料所在目的的網頁，判別方式是以網址傳參數值的方式進行，而傳遞的參數則是分類的編號(Category.ID)的值，名稱為 CategoryID。

(57)

圖 6-8 設定 CategoryID

Getcar.jsp

Content.htm 會員登入後，判斷是否為會員並領取購物車。由於 Getcar.jsp 程式需要先檢查身份，故建立 SQL 語法使用 WHERE 條件判斷，並設定『MMColParam1』與『MMColParam2』這兩個變數，這兩個變數是由 Content.htm 輸入的電話及密碼傳送的參數值。

(58)

圖 6-9 Getcar.jsp Vip 資料集

建立 Session 物件，將使用者 ID 設定在 Session 中，並取名為 VipID

<%session.setAttribute("VipID",VipID); %>

領取購物車之後，會員資料可以更改，插入 Application(應用程式) 的 Record Update Form(紀錄修改表單)。

如下圖所示：

圖 6-10 Getcar.jsp 記錄修改表單

(59)

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 查詢：紀錄每個人來店消費的總金額。

(60)

圖 6-12 Sumtotal 查詢

SumNum 查詢：紀錄每個人來店消費的次數。

圖 6-13 SumNum 查詢

SumState 查詢：紀錄每個人購買分類的零件總數量及總金額。

(61)

圖 6-14 ShopState 查詢

領取完購物車之後，在建立一個 session 物件，取得訂單編號。

session.setAttribute("BOID",CarOrder.getString("ID"))

NewVip.jsp

用來新增會員資料，加入一個 Vip 資料集，插入 Application (應用程式) 的 lnsert Record insertion Form (紀錄插入表單)，如下圖所示：

圖 6-15 NeqVip.jsp 記錄插入表單

(62)

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 資料集

(63)

插入 OrderID (帳單編號)、CarID (零件編號)、Quity (數量) 至 OrderDetail 資料表中，並且設定 OrderID、CarID 為隱藏欄位。

再加入一個數量的設計，讓客戶可以選擇數量：

<% int i;

for (i=1;i<=20;i++) { %>

<% }%>

</select>

從 Server Behavior (伺服器行為) 的 Recordset Paging(資料集分頁) 來設定翻頁行為。

設計完成後如下圖所示：

圖 6-19 car.jsp

(64)

CostTotal.jsp

查詢目前選購商品的項目。

建立四個資料集 Vip、Order、noDcheck、OrderTotal 資料集，其中 Vip 資料集的篩選條件為 session 變數 VipID，其他三個資料集 Order、noDcheck、OrderTotal 的篩選條件皆為 session 變數 BOID，

其中所用到的查詢為：

●CarDetail 查詢：紀錄所有放入購物車的汽車零件及其數量，其中的總計(BLTotal) 用([Cars].[Price]*[OrderDetail].[Quity]) 運算式計算得來。

圖 6-20 CarDetail 查詢

● notDcheck：紀錄為未確認是否訂購即離開的紀錄。

(65)

圖 6-21 notDcheck 查詢

● BLtotal：紀錄每張訂單消費的總金額。

圖 6-22 BLtotal 查詢

再設計 notDcheck 查詢有資料的時候顯示前往櫃檯結帳，並指向 BellList.jsp，若無資料時顯示繳費清單，並指向 Amount.jsp。

當 Order 資料集找不到 session 變數 BOID，也就是沒有資料進來時，

(66)

沒有領取購物車。再設計當非會員登入時，顯示錯誤訊息

<% 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 表，此時再比對

(67)

如下圖所示：

圖 6-24 BellList.jsp OrderDetail 資料集

兩個更新物件，一個為 Quity(數量)另一個為 Trade(選取方塊)。更新後前往 BellList.jsp。

圖 6-25 BellList.jsp 插入更新表單

(68)

當 Carlist 無資料，也就是 notDcheck 查詢無資料時顯示您的商品已經全部確認。

Amount.jsp

顯示出繳費清單。

設計四個資料集 Vip、CarOrder、BLtotal、CarList。其中 Vip 資料集的篩選條件為 session 變數 VipID，其他三個資料集 CarOrder、

BLtotal、CarList 篩選條件皆為 session 變數 BOID，然後再使用 session.invalidate();清除 session 已強迫使用者登出。

圖 6-26 Amount.jsp

(69)

login.jsp

會員沒登入時，卻想要購買商品即顯示此頁，設計為三秒後自動前往首頁。

login-fail2.jsp

註冊會員時，註冊資料若不其全集顯示並告知註冊錯誤，設計為三秒後前往首頁。

6-2 實作留言版

實作一個訪客留言版，讓大家可以另用它來傳達一些訊息，如此一來可以吸引大量的訪客登入留言，增加訪客人數。設計一個觀看留言版的留言版檢視頁 guestbook.jap，和新增留言頁 add_gbook.jsp。

留言版程式的架構圖

訪客流言板

留言檢視頁 gu estb o ok .jsp

新增留言頁 ad d -g bo o k.jsp

(70)

使用資料庫，把留言版的資料全部儲存下來，設計一個資料庫

guestbook.mbd，可以用來儲存姓名、性別、個人網頁、電子郵件、

msn 信箱、留言內容、留言日期、及訪客 IP，其如下圖所示：

圖 6-27 guestbook 資料表

其中『PostDate』欄位，使用內建函數 Now()，Now()函數會傳回電腦現在的日期時間。

6-2.2 留言版頁面設計 guestbook.jsp

(71)

設計一個 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』(資料集狀態瀏覽列)，並指定到

(72)

Bar』(資料集導覽按鈕)，設計完成後如下圖所示：

圖 6-29 ghostbook.jsp

Addguestbook.jsp

新增留言機制，讓訪客有新增留言的功能。

使用『Record Inserting Form』(新增資料表單)，指定要連接的資料表為 guestbook，其中在 IP 欄位設為『Hidden』隱藏欄位型態，

因為這部份要用 JSP 物件自動取得對方的 IP 位址。使用 request 物件的 request.getRemoteAddr()方法，來設定自動取得使用者的 IP 位址。

(73)

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

建立一個 board 的資料庫，分別建立 Topic、Reply、Username 資料表，Topic 資料表是用來存放與討論主題相關的資料表，而 Reply 資料表則是用來儲存與回應主題相關的資料表，Username 資料表用來

(74)

儲存管理者資料。其中一個主題有可能有很多的回應文章，所以在資料庫關聯圖裡面 Topic 資料表對應 Reply 資料表為一對多的關係。

圖 6-30 Topic 資料表

圖 6-31 Reply 資料表

(75)

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("特急件"))

(76)

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 (新增表單

(77)

紀錄)，將留言資料寫進去 Topic 資料集，並且將 AskerSex (發表人性別)、TopicType (主題類型)，設為 Radio Group (選擇鈕群組)讓使用者可以直接選擇，設計完成後如下圖所示：

圖 6-33 Add_topic.jsp

viewtopic.jsp

討論區的檢視面板設計，建立兩個資料集，分別為 topic (討論主題) 和 reply (回應主題)，因為已經在 bord.jsp 傳過來一個參數

TopicID，所以 Filter(篩選器)的條件式為當 Topic 資料表中的 TopicID 等於 URL/Form 傳遞過來的 TopicID 時，記錄指標是指到哪一筆記錄。並且使用 while 迴圈列出對應討論主題的所有回應的筆數。繼續傳遞參數 TopicID 給回應主題頁 retopic.jsp。

(78)

圖 6-34 viewtopic.jsp

retopic.jsp

回應討論主題，建立 retopic 資料集，且篩選條件為 viewtopic.jsp 傳過來的 TopicID 導引出 Reply 資料表，因為必須記錄主題編號 TopicID 的值，這樣才可以確定回應內容是針對哪一個主題來回應，

所以設定『Request Variable (Request 變數)』來接收 TopicID 變數的值。使用『Insert Record linsertion Form ( 新增記錄表單)』，

設定要新增的 reply 資料表，並且讓它回應完主題後，返回主題檢視頁面，其中把 TopicID 的動態資料指定給我們剛剛建立的

request.TopicID，如此一來便會新增回應到我們欲回應的討論主題。

(79)

圖 6-35 retopic.jsp 新增記錄表單

管理者介面設計 login1.jsp

登入管理者介面，必須先登入管理者帳號密碼，將兩個文字輸入框命名為 loginname、password，比對 board 資料庫 Username 資料集的 loginname、password。

Adminboard.jsp

管理介面的主畫面，其設計跟討論區主題頁一樣，只是動態資料傳遞的位址不一樣，因為要設計成可以刪除和修改主題內容或回應內容，

所以設定一個名為 TopicID 的參數傳給 editboard.jsp 討論區資料維護頁。在計算回應次數的欄位裡面，使用 SQL 語法的 COUNT 指令來做計算，計算 Reply 資料表中的 ReplyID 次數。

("SELECT COUNT (ReplyID) AS reply_numRows FROM Reply WHERE TopicID = "

+ board_data + "");

(80)

editboard.jsp

討論區資料維護頁，設計版面如下圖所示：

圖 6-36 editboard.jsp

設計一個名為 TopicID 的 Request Variable 來接收 TopicID 的變數，

在主題內容表單的修改，將其指定連結到 upd_topic.jsp (討論主題內容修改)，並且傳遞一個名為 TopicID 的參數，其動態資料為我們剛剛所設定的 request.TopicID，如此一來討論主題的修改才知道是要修改哪一篇主題。

在主題內容表單的刪除，將其指定到 deltopic.jsp(討論主題內容的刪除)，傳遞 TopicID 參數。

在回應內容表單的修改，將其指定連結到 upd_Reply.jsp (回應主題

(81)

內容修改)，並且設定兩個變數，一個名為 ReplyID 另一個為 TopicID，

其 ReplyID 的動態資料指定給 reply 資料集的 ReplyID，如此一來才知道要修改哪一篇回應的資料，TopicID 的動態資料則是指定給 request.TopicID。

在回應內容表單的刪除，將其指定到 delreply.jsp (回應主題內容刪除)，傳遞 ReplrID、TopicID 參數。

upd_topic.jsp

討論主題內容的修改，建立一個 updtopic 資料集，篩選條件為剛剛傳過來的 URL/Form 變數 TopicID，插入『Record Update Form』(修改表單變數)，將其修改至 Topic 資料表。

圖 6-37 upd_topic.jsp 修改表單

upd_reply.jsp

(82)

傳過來的 URL/Form 變數 TopicID，插入『Record Update Form』(修改表單變數)，將其修改至 Reply 資料表，修改後前往

editboard.jsp，並且傳遞 TopicID 參數。

圖 6-38 upd_reply.jsp 修改表單

deltopic.jsp

討論主題內容刪除，建立一個 deltopic 資料集，篩選條件為篩選條件為剛剛傳過來的 URL/Form 變數 TopicID，接下來利用『Delete Record(刪除記錄)』，刪除 Topic 資料表，刪除後前往 adminboard.jsp

圖 6-39 delyopic.jsp 刪除記錄

(83)

delreply.jsp

回應主題內容修改，建立一個 delreply 資料集，篩選條件為篩選條件為剛剛傳過來的 URL/Form 變數 TopicID，接下來利用『Delete Record(刪除記錄)』，刪除 Reply 資料表，刪除後前往

editboard.jsp，並且傳遞 TopicID 參數。

圖 6-40 delreply.jsp 刪除記錄

(84)

6-4 實作公告系統

實作一個公告系統，讓管理者可以隨時發佈最新的活動消息，管理者需要身份認證後，才可以新增公告、修改公告、刪除公告。

公告系統的程式架構圖

公告

index.jsp Function.jsp Show.jsp

使用者介面

查詢公告 search.jsp

管理者介面

登入 Login2.jsp

新增公告 Add.jsp

修改公告 Fix-updjsp

刪除公告 Delete.jsp

登出 Logout.jsp

登入完成 Loginok.jsp

變更成功 LoginFixok.jsp

更新記錄 Fix.jsp

刪除成功 DeleteOk.jsp

建立一個名為 news 的資料庫，分別建立 Manage、NewsContent 資料表，和一個 NewsOpt 查詢，Manage 資料表為管理者資料表，用來存放管理者的詳細資料。

(85)

圖 6-41 Manage 資料表

NewsContent 資料表為公告資料表，用來存放公告的詳細資料，包括標題、內容、對象、日期，另外在設計一個欄位 NewsFrom，記錄該篇公告是誰發佈的，用來和 Manage 資料表建立連結。

圖 6-42 NewsContent 資料表

(86)

NewsOpt 查詢存放公告是誰發佈的，將 Manage 與 NewsContent 資料表的欄位交叉比對，因為一個管理者可以發佈多篇的公告，所以 Manage 資料表的 ID 與 newsContent 資料表的 NewsForm 建立一對多的關聯。

圖 6-43 NewsOpt 查詢

6-4.2 公告頁面設計

首頁為 index.jsp，主要包含上框架功能頁(Function.jsp)及下框架展示頁(Show.jsp)。並且把下框架命名為 man2Frame 以便以後更新。

Login2.jsp

管理者會員登入，插入管理者姓名 ManageName 及管理者密碼 MPW 兩個文字欄位。並且建立 Manage 資料集，且篩選條件為 session 變數 ManageID 來判斷管理者是否已登入。送出表單至 LoginOK.jsp

(87)

LoginOK.jsp

登入完成，建立 Recordset1、Manage 資料集，並設定兩個變數，分別為 MMcolParam 和 MMcolParam1，此頁需要從會員登入(Login2.jsp) 取得的參數值 ManageName、MPW 給 MMcolParam 和 MMcolParam1，並且比對 Manage 資料表中的 ManageName(名稱)、ManagePword(密碼)，

來確認登入管理者的名稱和密碼是否正確。

圖 6-44 LoginOK.jsp Recordset1 資料集

資料庫設定完成之後，插入一個更新表單欄位為 ManageStay，讓管理者可以變更『單位欄』。最後在設定名為 ManageID 的 session 物件

session.setAttribute("ManageID",Manage.getString("ID"));

LoginOK.jsp

(88)

Logout.jsp

登出，建立 Manage 資料集，利用 session 變數 ManageID 來做篩選條件，若沒登入會員即做出登出動作，設計顯示『您尚未登入，無法使用此功能』，若登入會員後確定要登出，則導到 Show.jsp

Showjsp

展示頁，因為要讓管理者登出，所以必須清空 Session。

<%

session.invalidate();

%>

Add.jsp

新增公告，建立一個資料集，資料來源從 news 資料庫的 Manage 資料表，篩選條件以 Session 變數：ManageID 為準則，找出資料表

ManageID.ID 等於 Session 變數的資料。使用『Insert Record Insert Form (記錄插入表單)』，來插入 NewsContent 資料表，新增留言。

圖 6-45 Add.jsp 記錄插入表單

(89)

Fix_upd.jsp

修改公告，建立兩個資料集 Manage、NewList，其中 Manage 的篩選條件為 session 變數：ManageID，因為公告會有很多筆資料，所以使用 Repeat Region (重覆區域)使其資料可以一次顯示多筆資料。

因為在重複區域會產生 Repeat1_index++;程式碼，所以可以用

Repeat1_index 來依序遞增編號欄位。設計當點選公告標題後進入另一頁 Fix.jsp，且要知道是選擇哪一篇所以我們要設定傳遞參數 ID，

且傳遞參數 ID 等於 NewsList 的 ID 值。

圖 6-46 Fix_upd.jsp

(90)

Fix.jsp

修改公告表單，建立資料集 NewsContent，資料來源為 news 資料庫的 NewsContent 資料表，且因為要知道點選了哪篇公告，所以篩選條件以表單變數：ID 作為準則，利用記錄修改表單來顯示和修改公告，

再設定一隱藏欄位，並設其動態資料來源為 NewsContent 資料集的 ID，以便當記錄更新時，依據 NewsContent 更新。

圖 6-47 Fix.jsp

Delete.jsp

刪除公告，建立兩個資料集 Manage 及 NewsList，其中 Manage 的篩選條件為 session 變數：ManageID，並且表單執行後前往

DeleteOK.jsp，並且選擇鈕命名為 NewsID，其動態資料為 NewsList

(91)

資料集的 ID 值。

圖 6-48 Delete.jsp

DeleteOK.jsp

刪除完成，需要建立一個 request 變數：NewsID，來接收 Delete.jsp 所圈選的選擇鈕，然後要從 NewsContent 資料表找出編號等於變數 NewsID 的值，然後刪除資料，再下達 SQL 命令：

DELETE FROM NewsContent WHERE ID = NewsID

Search.jsp

查詢公告，建立 NewsList 資料集，資料來源為 NewsOpt 查詢，並且設定 Repeat Region (重覆區域)使其資料可以一次顯示多筆資料。

Design and Application of Java for Electronic Commerce t OGPu{s mWGM09008037 Q a I GS h EQG~C DGJava{ql]pP h j

中 華 大 學 碩 士 論 文

題目：Java 程式於電子商務的設計與應用