逢 甲 大 學

資訊工程學系專題報告

購物網站實務設計

學 生： 杜 建 明 (資電四乙)

指 導 教 授 ： 林 國 貴

中華民國九十三年十二月

I

資 逢

訊

工 甲

程

學 大

系

學

專

題

報

告

購

物

網

站

實

務

設

計

杜

建

明

93

II

目錄

圖表目錄 .............................................VI

摘要 ...............................................VIII

第一章 導 論 ........................................1

1.1 專題簡介 ................................1

1.2 研究動機 ................................1

1.3 專題目標 ................................1

第二章 電子商務概論 .................................2

2.1 電子商務的定義 ..........................2

2.1.1 資訊流 ..................................2

2.1.2 商流 ....................................4

2.1.3 資金流 ..................................4

2.1.4 物流 ....................................5

2.2 電子商務的運作流程 ......................5

2.3 電子商務的種類...........................6

2.3.1 企業對企業 ..............................6

2.3.2 企業對消費者 ............................7

2.3.3 消費者對消費者 ..........................7

2.3.4 消費者對企業 ............................8

2.4 電子商務的延伸 ..........................8

2.5 電子商務的付款機制 ......................8

2.5.1 SET信用卡機制 ...........................9

2.5.2 SSL信用卡機制 ..........................13

2.5.3 SET與SSL網路購物的相異處 ...............16

2.5.4 電信帳單 ...............................14

2.5.5 數位儲值卡 .............................14

2.5.6 智慧卡 .................................14

2.5.7 e-mail現金 .............................15

第三章 系統環境簡介 .................................19

3.1 作業環境 ................................19

III

3.2 硬體需求.................................19

3.3 網站架設說明與功能簡介 ..................19

3.3.1 網站架設過程說明........................19

3.3.2 IIS 的FTP 伺服器........................20

3.3.3 SMTP 虛擬伺服器的郵件管理...............20

第四章 工具軟體介紹 .................................21

4.1 ASP (Active Server Pages)...............22

4.1.1 Web 應用程式的發展過程 .................22

4.1.2 CGI 的簡介 .............................22

4.1.3 ASP 的簡介 .............................22

4.2 ODBC (Open Database Connectivity) ......23

4.3 Java Script ............................26

4.4 FrontPage ..............................27

4.5 Photoshop ..............................28

4.5.1 使用Photoshop的理由 ....................28

4.5.2 Photoshop的特點.........................28

第五章 系統架構分析 .................................30

5.1 網站系統架構圖 ..........................30

5.2 網站管理系統架構圖 ......................32

第六章 網站系統操作說明..............................34

6.1 網頁瀏覽操作說明 .......................34

6.1.1 會員註冊系統............................34

6.1.2 購物區系統..............................35

6.1.3 搜尋系統系統............................37

6.1.4 討論區系統..............................37

6.1.5 投票區系統..............................38

6.2 網站管理操作說明........................39

6.2.1 商品管理................................39

6.2.2 訂單管理................................41

6.2.3 討論區管理..............................41

6.2.4 投票區管理..............................42

IV

第七章 程式製作分析與檔案庫資料 .....................43

7.1 程式製作分析與特色介紹 .................43

7.2 資料庫檔案與資料表......................45

第八章 結論 .........................................48

8.1 遭遇的困難與解決方法....................48

8.1.1 專題製作之互相研討......................48

8.1.2 架設網站所遇到的困難....................48

8.1.3 實作後之統合工作........................48

8.1.4 創意的產生..............................49

8.2 電子商務的未來發展......................49

8.3 專題製作心得與感想......................49

參考資料 ............................................51

V

圖表目錄

圖 2-1 資訊流介紹 ………………………………………………3

圖 2-2 資訊流介紹二 ……………………………………………3

圖 2-3 商流介紹 …………………………………………………4

圖 2-4 電子商務的運作流程 ……………………………………5

圖 2-5 SCM、ERP、CRM之關係……………………………………8

圖 2-6 SET網路購物模式 ………………………………………13

圖 2-7 SET交易流程圖 …………………………………………13

圖 2-8 網頁有受到SSL加密保護 ………………………………15

圖 2-9 SSL安全保護的加密位元 ………………………………15

圖 2-10 提供PayPal付款服務的標誌……………………………17

圖 3-1 Windows 2000 Sever商標………………………………19

圖 3-2 IIS的功能簡介圖 ………………………………………21

圖 4-1 ASP的運作模式 …………………………………………23

圖 4-2 傳統資料庫與應用程式的溝通方式……………………25

圖 4-3 資料庫與應用程式以ODBC的溝通方式…………………25

圖 4-4 ODBC的設定畫面…………………………………………26

圖 5-1 網站主架構………………………………………………30

圖 5-2 會員註冊系統架構………………………………………30

圖 5-3 購物區系統架構…………………………………………30

圖 5-4 搜尋系統架構……………………………………………31

圖 5-5 討論區系統架構…………………………………………31

圖 5-6 投票區系統架構…………………………………………32

圖 5-7 管理系統架構……………………………………………32

圖 5-8 商品管理系統架構………………………………………33

圖 5-9 訂單管理系統架構………………………………………33

圖 5-10 討論區管理系統架構……………………………………33

圖 5-11 投票區管理系統架構……………………………………34

圖 6-1 會員註冊系統表單………………………………………34

圖 6-2 各牌商品簡介……………………………………………35

圖 6-3 商品詳細規格介紹………………………………………35

圖 6-4 商品詳細規格介紹………………………………………36

圖 6-4 訂單處理進度紀錄………………………………………36

圖 6-5 訂單出貨記錄 ……………………………………………36

圖 6-6 搜尋符合條件的商品頁面 ………………………………37

圖 6-7 討論區主題顯示頁面 ……………………………………37

VI

圖 6-8 投票主題顯示頁面 ………………………………………38

圖 6-9 決定投票頁面 ……………………………………………38

圖 6-10 投票結果顯示頁面………………………………………39

圖 6-11 新增商品資料表單頁面…………………………………39

圖 6-12 修改&刪除商品資料表單頁面 …………………………40

圖 6-13 商品資料排序顯示頁面…………………………………40

圖 6-14 訂單處理進度分類顯示頁面……………………………41

圖 6-15 討論區登入管理畫面……………………………………41

圖 6-16 討論內容修改畫面………………………………………41

圖 6-17 討論內容刪除畫面………………………………………42

圖 6-18 登入投票區管理表單……………………………………42

圖 6-19 建立投票項目頁面………………………………………42

圖 6-20 刪除投票活動頁面圖……………………………………43

圖 7-1 搜尋系統判斷流程圖……………………………………44

圖 7-2 購物網站資料表欄位關係圖……………………………46

圖 7-3 設計討論區系統關聯式資料庫…………………………47

圖 7-4 設計投票區系統關聯式資料庫…………………………47

表 2-1 SSL與SET 網路購物的相異點 …………………………16

表 4-1 ASP的優點 ………………………………………………23

表 4-2 ASP的執行環境 …………………………………………23

VII

摘 要

逢甲虛擬購物網站是以電子商務的精神為核心，現今的一般交易

模式為基準，並透過後台管理系統，將其交易過程模擬實作出。

網站前端設計為當使用者透過登錄會員的方式後，能以友善的購

物界面來達成線上買賣。此外也包含討論區和投票系統讓使用者們有

著討論商品的網路社群互動機制。

後台管理系統方面，除了採用ACCESS為資料庫系統。且透過網頁

簡易的點選，便能處理線上訂購交易，甚或是新增修改刪除商品資料。

使得資料庫內部資料與線上處理同步化，讓交易更能即時被管理者掌

握。

不同於一般靜態網頁，採用微軟技術來架設電子商務網站。主要

是以ASP的動態網頁程式設計並搭配IIS伺服器管理。使網頁能提供更

多的功能、更快速的反應、更直覺的界面，以及更佳的錯誤處理能力

和安全性控制，與使用者間達成絕佳的互動性。

關鍵詞: 電子商務，關聯式資料庫，Luhn 演算法，交易，虛擬社群

VIII

第一章 導 論

1.1 專題簡介

這是一個利用有關電子商務的觀念，去實作一個電子商務的資訊

流部份的機制。並搭配介紹商流、金流、物流，深入了解現今電子商

務交易後，模擬出一完整的購物網站機制。以簡潔明瞭的購物及討論

頁面，讓使用者簡易購物和討論商品。後台的交易資料處理、商品與

前端頁面的管理也能達成。系統整體來營造出電子商務購物網站的環

境。

1.2 研究動機

有鑒於近年來網際網路的蓬勃發展，電子商務環境也漸趨成熟。

再加上網路人口的增加，線上購物的商機完全浮現。加上網路是一項

沒有國界的工具，大環境整體傾向不需實體購物的虛擬商店線上交

易，對於人們的購物習慣產生重大的改革，所以借專題結合其原理及

嘗試模擬實作出相似線上購物機制及流程，來對電子商務進一步深入

了解。

1.3 專題目標

藉由模擬購物網站交易的實作，來了解電子商務運作的模式。並

從中學習網站建置的經驗和深入分析了解電子商務運作模式。而當購

物機制流程基礎建構完成，接下來亦將思考安全性、可靠性甚至到法

律相關各層面的處理加以修正，以求改善成更完備的購物網站系統。

1

第二章 電子商務概論

2.1 電子商務的定義

商務，就是商業和服務活動，是生產和消費之間的介面，也就是

資訊交流、商品交換、資金結算和所有權轉換的過程。人類的商務活

動經歷了趕集(面對面的交流)、合同(以紙紀錄為標誌)、電報、電話

等過程，20世紀60年代了EDI(Electronic Data Interchange，即電子

資料交換)，有時也稱為無紙貿易。國際化標準組織將EDI定義為一種

電子傳輸的方法。使用這種方法，首先將商業或行政事務處理中的訊

息按一個公認的標準形成結構化的事務處理訊息資料格式，進而將這

些結構化的訊息資料經由網路，從一台電腦傳輸到另一台電腦。

隨著IT(資訊技術)的發展，90年代出現了電子商務。電子商務是

一種商務活動，也存在有資訊交流、資金結算、商品交換和所有權轉

移的過程。也就是，電子商務中的任何一筆交易，都包含著幾種基本

的流動型態，即資訊流、商流、資金流、物流。

2.1.1 資訊流

既包括商品資訊的提供、促銷行銷、技術支援、售後服務等內容，

也包括諸如詢價單、報價單、付款通知單、轉帳通知單等商業貿易憑

證，還包括交易方的支付能力、支付信譽等。

資訊流可以說是電子商務最為重要的一個部份，因所有上網的消

費者首先接觸到的就是資訊流部份，也就是網頁本身的內容及結構。

已下圖Yahoo網站為例，可以清楚的從首頁畫面中立即了解該網站

所提供的功能與服務內容。其服務的項目檢要摘錄如下:

2

圖2-1 資訊流介紹

另一個非常重要的資訊流，就是消費者個人基本資料的建立與維

護。如下例圖所示。有了消費者的基本資料，業者才能與消費者互動

並將商品傳送到消費者手上，或者告知是否完成交易。所以確實做好

消費者資訊流的規劃，是網頁設計的最基本概念。有助於業者與消費

者間建立互動的關係。

圖2-2 資訊流介紹二

3

2.1.2 商流

是指商品在買賣之間進行交易和商品所有權轉移的流動過程，

具體是指商品交易的一系列活動。

泛指商品所有權轉移的流通方式。如下圖所示，商品由製造商承

製，然後交由代理商或批發商銷售給零售商，最後再賣給消費者。

製造商將商品賣給代理商或批發商

零售商再將商品賣給消費者

消費者代理商或批發商再將商品賣給零售商

圖2-3 商流介紹

2.1.3 資金流

主要是指資金的轉移過程，包括付款、轉帳等過程。在電子商務

下，以上的三種流動處理都可以通過電腦和網路通信設備實現。

線上電子交易給付款的系統和安全機制。就以目前的技術層面而

言，消費者可選用的線上電子交易系統可以概分下述兩類。

代幣式給付款項方式，例如: 電子現金(e-cash)。

電子支票。

智慧型IC卡。

信用卡給付款項方式，例如: 一般流通的信用卡(VISA卡)。

第三類認證(First Virtual)。

線上電子交易給付款系統，最令人擔憂的是它的安全機制問題。

到目前為止每種付款方式雖都有其相當的安全性，但所謂的電腦駭

客，其功力也天天在增長著，因此哪天哪種付款方式又被駭客所侵襲

與破壞，相信不會是一件駭人聽聞的事件。

4

2.1.4 物流

作為四流中最為特殊的一種，物流是指物質實體(商務事件)的時

間和空間轉移過程，具體指運輸、儲存、配送、裝卸、保管、物流資

訊管理等各種活動。對於少數商品和服務來說，可以直接通過網路傳

輸的方式進行配送，如各種電子出版物、資訊諮詢服務、有價資訊軟

體等。而對於大多數商品和服務來說物流仍要經實體方式傳輸，但由

於一系列機械化、自動化工具的應用，準確、及時的物流資訊對物流

過程的監控，將使物流的流動速度加快、準確率提高，能有效地減少

庫存，縮短生產週期。

目前，幾乎所有的電子商務網站都有特約聯盟的物流宅配廠商，

來進行商品配送的工作。現今，更是由原本的物流更進一步的發展到

宅配。顧名思義，就是配送到家的意思。

2.2 電子商務的運作流程

在認識了電子商務所涵蓋的層面之後，我們在來認識電子商務的

運作流程。請先觀察下圖的說明。

送貨業者(物流)

消費者(資訊流) 業者和電子商店(資訊流)

金融及徵信機構(金流)

廠商(物流)1 5

2

3

4 4

圖2-4 電子商務的運作流程

5

上例圖中(1)所示，消費者可透過個人電腦或其他上網方式(例如

手機)連上商家在網際網路上的電子商店，然後填寫一些個人基本資料

及相關的訂購資料，就可以將訂購資訊傳送給業者。

圖中(2)所示，業者的電子商店會將消費者所填寫的相關金融資料

(如信用卡號)，以金融及徵信單位的管制系統，加以徵信查核，如果

一切正常，則此一訂購就可成立，否則就取消此筆交易，並將是否完

成交易之資訊告知消費者。

圖中(3)、(4)、(5)所示，當業者確認交易完成後，則會通知所屬

特約廠商或貨運業者將商品送達消費者，且將送貨資訊回報業者。

業者在確認可進行交易後，尚需先行檢核商品庫存，獲項配合廠

商(5)諮詢是否有現貨可出，若無法即時出貨需事先告知消費者，以便

讓消費者確認是否還要訂購(1)。

在電子商務的研究中，必須對資訊流、金流、商流、資金流和物

流進行有效率的整合，統籌考慮，協調發展，才能保證電子商務的順

利實施。

2.3 電子商務的種類

電子商務可的經營模式，可概分下列類型:

企業對企業 (B to B，Business to Business) 企業對消費者 (B to C，Business to Consumer) 消費者對消費者 (C to C，Consumer to Business) 消費者對企業 (C to B，Business to Business)

2.3.1 企業對企業（ B to B ）

指的是企業對企業的電子商務模式，例如，上游廠商和下游廠商

的交易。B2B電子商務化的優勢在於，可將原本支出在採購方面的人力

成本，透過網際網路的電子自動化的模式而節省下來，還能降低採購

的費用。

現在企業界因為知道電子商務的好處，所以許多的產業也紛紛投

6

入了B2B的模式中，在越來越多的廠商投入電子化市場之後，也就產生

了更多的新採購對象及客戶，這樣一來，無論是要找供應商的或是要

找客戶都更加容易了，並且，買方也可因為採購效率的提高、賣方因

為營業額的提升，形成雙方都獲利的局面。B2B的企業合作多為策略聯

盟，以供應鏈裏的原料、半成品、商品交流與資訊流通為主。

2.3.2 企業對消費者（B to C）

指的是企業對消費者的電子商務模式，例如，線上購物(就是透過

網路，連線到提供商品的網站下訂單、完成交易和付費手續的過程)，

因為沒有時間及地域上的限制，所以廣受消費者的喜愛。目前全世界

最知名的網路購物網站美國的亞馬遜商務網站，亞馬遜網站上除了販

售書籍以外，也有CD、軟體等其他類的商品。不但商品種類豐富，在

購買的過程中消費者也能很便利、快速的購買到所需的物品，所以造

成一股網路購物的風潮。

有鑑於亞馬遜的經驗，以及看好網路購物未來的潛力，許多不同

的產業也開始加入網路購物的行列，企圖以這樣低成本、高便利性的

新商業模式，為公司開創出另一番氣象。不過要讓消費者掏出荷包裡

的錢並不容易，網站必須各出奇招才能吸引消費者來瀏覽網站、提供

低價而方便的商品供消費者選擇，才能讓消費者下訂單。

跟隨著電子商務而出現新型商業型態，除了將實體商品數位化之

外，最重要的變革就是電子現金或線上信用卡付費的新模式了。但是

目前消費者對線上付費仍有非常大的疑慮，因為在線上付費的隱私

權、認證等問題解決之前，消費者是無法十分放心的使用電子商務所

帶來的便利。另外，對企業而言，要如何杜絕盜版、電子犯罪等重大

問題，也是很大的挑戰。

2.3.3 消費者對消費者( C to C )

指的是消費者對消費者的電子商務模式，例如，拍賣網站中，消

費者可將自己不需要的東西，公告在網站上，想要買的消費者就可以

透過競價過程買得想要的商品。像美國的eBay個人線上拍賣網站就是

一例。

電子化的拍賣方式較傳統的豋報或是托賣，成本都更為低廉，效

果也比較好，而且網友只要在網站中加入會員，就可以免費在網站上

7

買或賣東西。隨著電子商務的迅速發展，瀏覽或是加入拍賣網站的人

口越來越多，能吸引到越多的流量，對買方或是賣方都是大利多。

2.3.4 消費者對企業（ C to B ）

傳統拍賣模式的一種有趣變種也在網路上出現。例如這種網站是

由商品或服務的賣家標出願意賣出產品的價格。這種類型的拍賣有時

稱為反拍賣，因為賣家作為出價人。例如，在Travel Bids網站上，某

個想訂機票或傳票的人可以發出通告，讓旅行社相互競爭，這種出價

會一直下降到沒有旅行社再出價或者買家接受了較低的出價為止。

另一種新的現象是集體購買網站。在該網站上，某個物品標上某

個價格張貼出來。當單個買家就某個物品輸入出價時(這時的出價就是

同意購買這樣的物品)，網站就可以和物品提供者商定一個更低的價

格。當出價的人數增加時，張貼出來的價格最終會下降。Mercata是網

路上第一個主要的集體購買網站。

2.4 電子商務的延伸

當我們延伸電子商務的涵蓋範圍，一般會再把SCM、ERP、CRM三者

包含進來。當三個領域之間的關係，如下圖所示。一般而言，是以ERP

做為核心，整合企業內部的資源，以達到資訊互通、分享。有了這樣

團結強固的內部架構，前端的CRM就可以自由自在地跨部門蒐集各種資

訊，交叉分析顧客的資料，以進行體貼的顧客關係管理。當然，後勤

支援的原料、成品提供也相當重要，有了供應鏈流程全部自動化SCM，

上下游廠商之間的運籌管理，就可以更得心應手了。

SCM ERP CRM

圖2-5 SCM、ERP、CRM之關係

供應鏈管理 (SCM，Supply Chain Management) 從原料開始到成品最終消費的過程中，供應商和使用者這些公司連結

的程序。一個完全自動化的流程，以及如何將效率效益提升到最高，

8

都是SCM追求的方向。電子化採購(e-Procurement)、查詢上游廠商進

度都是SCM的例子。

企業資源規劃 (ERP，Enterprise Resource Planning) 一個會計導向的資訊系統。用來確認和規劃為了接受、製造、運送和

結算顧客訂單所需的整個企業資源。更容易查詢追蹤並整合公司內各

部門進度。

客戶關係管理 (CRM，Customer Relation Management) 主要在協助業者更有效率地掌握顧客特質，藉由了解既有的顧客，進

而開發新產品或開闢新市場以吸引最大獲利的潛在顧客。傳遞最合乎

顧客需求的產品及服務給顧客，以確保顧客對品牌或產品的忠誠度。

2.5 電子商務的付款機制

電子商務的付款機制是電子商務系統的重要部分，它指的是消費

者、商家和金融機構之間使用安全的電子方式交換商品或服務，即把

新型支付方法包括電子現金(e-Cash)、信用卡(CREDIT CARD)、轉帳卡

(DEBIT CARD)、智慧卡等的支付資訊通過網路安全送到銀行或相關的

處理機構，實現電子商務的付款。

以下就幾個台灣目前市場常用的付款的系統作簡介:

2.5.1 SET信用卡機制

SET(Secure Electronic Transaction)是由VISA與MasterCard共

同製造出為了保護消費者在開放型網路(如Internet)持卡付款交易安

全的標準。運用RSA資料安全的公開鑰匙加密技術，保護交易資料安全

及隱密性，達到提供給買方與賣方安全性與認證。

在信用卡付款的網路環境下，主要參與的交易成員有下列四種:

持卡人(Cardholder)、商家(Merchant)、發卡銀行(The bank that

issues the credit card)及收單銀行(The Merchant＇s bank)。

1. 持卡人

即信用卡交易中借貸者，持卡人享受信用卡先消費後付款的功能。在

電子商務環境中，消費者和團體購買者透過電腦與商家交流，持卡人

9

通過由發卡機構頒發的付款卡(例如信用卡、金融卡)進行結算。在持

卡人和商家的線上交易中，SET可以保證持卡人的帳號資訊不被洩漏。

2. 網路商家

及持卡人欲消費之廠所，通常需與收單銀行先簽約，可在特定的特約

商店之明顯處看到VISA或MasterCard等國際組織的標誌。提供商品或

服務。使用SET就可以保證持卡人個人資訊的安全。接受支付卡的商家

必須和銀行有關係。

3. 收單銀行

即負責審核特約商店的合法性，與其簽約並加以管理，使持卡人能勇

一個安全的消費空間。

4. 發卡銀行

審核申請人的信用及財務狀況，決定是否核發信用卡給持卡人使用(發

卡銀行之名稱通常會出現於卡片的正面)，並根據申請人之財務及信用

狀況，給予信用額度。

SET的架構是由幾個成員所共同組合起來的。分別是Electronic Wallet

(電子錢包)、Digital Certificate(電子證書)、Payment Gateway(付

款轉接站)和Certification Authority(認證中心)。而運用這四者便

可架構Internet上符合SET標準的信用卡授權交易。

1. 電子錢包

電子錢包為一電腦軟體，主要用來讓消費者進行電子交易與儲存交易

紀錄。消費者要進行安全電子交易前，必須先安裝符合SET標準之電子

錢包。

電子錢包的功能大致可以分為下列三項:

電子證書管理 包括電子證書的申請、保存及刪除等

交易的進行: 消費者選擇進行SET交易時 電子錢包將自動啟動 辨認商店身分並

發送交易訊息

交易紀錄的保存: 每筆交易紀錄將被保存以供日後查詢

2. 電子證書

電子證書可以說是SET的核心，用以建立電子交易中各交易主體間之信

任。它是由一個公正的單位來擔任認證中心，簽發電子證書給銀行，

10

持卡人及特約商店。如同印鑑證明了戶政單位的簽證，人們可以信賴

彼此印鑑是有效的，而且確實是對方所有。而加密數位碼有了電子證

書的輔佐，網路上往來的消費者和商店就能對彼此辨識對方確實是真

正商店和有效的持卡人。進行電子交易的時候，持卡人和特約商店兩

邊符合SET規格的軟體，會先在電子資料交換前確認雙方的身分，也就

是檢查由認證中心所發給的電子證書。此外，當我們以自己的數位碼

加密某些訊息並發送出去後，由於電子證書已經確認這組用來加密的

數位碼確實為發送訊息者所有，所以發送訊息的人將無法否認他曾經

發送該筆訊息。

因此有了加密數位碼和電子證書的設計，將可以滿足下列網路交易的

安全需求:

交易雙方的身分可以被辨識。 網路上傳遞的資料不會被竊取或竄改。 一但確定發出交易訊息便無法否認。

3. 認證中心

為一公正公開的代理組織，接受持卡人、特約商店及銀行的申請，並

會同發卡及收單銀行核對其申請資料是否一致後，發放電子證書給申

請人，並負責電子證書之管理及取消等事宜。

4. 付款轉接站(閘道)

為一裝設在收單銀行的伺服器，可將特約商店伺服器經由Internet所

送來的訊息轉為收單銀行處理信用卡授權之訊息格式，以方便後續之

處理。付款轉接站並可以防止未授權使用者及資料的進入。

SET 線上購物運作過程

SET是一種應用於網際網路上，以信用卡為基礎的電子系統交易機

制，用來保護開放網路上持卡交易的安全性。以下將就持卡人於網際

網路上經由SET做購物付款之流程做ㄧ概括描述。

持卡人透過Browser 瀏覽電子銀行的網頁，當選定自行轉帳或繳款服

務時，由網頁服務ASP 程式呼叫SET POS 安全付款機制。其交易處理

過程如下：

1. 啟動電子錢包。

2. 電子錢包可讓持卡人選擇要使用哪一張金融卡。電子錢包遵循SET

11

Protocol 將交易需求加密成SET 訊息，送往SET POS Server。其中，

「金融卡資料」放在唯有SET PG Server 可解開的加密封包，其他「轉

帳指示資料」放在唯有SET POS Server 可解開的加密封包，加上雙簽

章(Dual Signature)的安全機制可確保這些重要的交易資料不被竄

改。另外，SET 訊息交換時，以電子證書認證機制可驗正所有交易對

象的合法身份。

3. SET POS Server 遵循SET Protocol 解出資料並作交易驗證後，將

交易需求加密成SET 訊息，送往SET PG Server。

4. SET PG Server 遵循SET Protocol 解出資料並作交易驗證後，將

交易需求轉換成ATM 所需的資料格式，透過SM 傳輸通道將交易需求

送往TM。

5. TM 根據各銀行的需求，與銀行主機連線溝通，並作交易記錄

(Transaction Logging)。然後透過SM 傳輸通道將交易回應送往SET

PG Server。

6. SET PG Server 將交易回應轉換成SET 訊息格式，遵循SET Protocol

將交易回應資料加密成SET 訊息，送回SET POS Server。其中，回

給持卡人的「帳戶餘額資料」放在唯有電子錢包可解開的加密封包。

7. SET POS Server 遵循SET Protocol 解出資料並作交易驗證後，一

方面透過SET POS API 定義的方式通知電子銀行的網頁服務系統，

一方面將交易回應資料加密成SET 訊息，送回電子錢包。

8. 持卡人在電子錢包上可看到交易完成後的「帳戶餘額資料」。交易

需求由電子錢包送達SET POS Server 後，交易就算確立，即使電子錢

包在等待回應時離線，交易仍會繼續進行，持卡人隨時可用電子錢包

查詢先前某筆交易的處理狀況。

12

圖2-6 SET網路購物模式

圖2-7 SET交易流程圖

2.5.2 SSL信用卡機制

SSL技術為目前線上信用卡付費的主流，SSL協定是Secure Socket

Layer Protocol的簡稱，由Netscape Communicator 公司於1994年提

出。SSL的技術主要是在TCP/IP與應用程式中間提供線上用戶端與伺服

器端的安全傳輸，避免交易過程中資料被擷取、破壞或偽造。

13

SSL實際運作的過程:

1. 首先，使用者的網際網路瀏覽器必須使用https的通訊方式連結到

網站伺服器((如下圖2-8)。

2. 如果進入的網頁內容有安全上的控管，此時網路上的認證伺服器

(Certificate Authority)會傳送一組公開金鑰。

3. 使用者一但收到這組由認證伺服器傳來的公開金鑰後，接下來會產

生解碼用的對稱金鑰，最後將公開金鑰與對稱金鑰做一數學方程式

計算之後，原文件內容以便成一篇充滿亂碼的文章，所以既使該文

件在網路傳送過程中遭告攔截，就算該加密文件會被破碼成功，或

許是多年以後的事情。

4. 網站伺服器利用伺服器本身的私用金鑰對瀏覽器船過來的文件進

行解密動作，如此既可以取得瀏覽器所產生的對稱金鑰。自此以後，

網站伺服器與用戶端瀏覽器之間所傳送的任何資料或文件，均會以

此對稱金鑰進行文件的加解密。

SSL 線上購物運作過程

SSL本身是定位在TCP/IP 通訊協定與應用程式間的一個安全通訊

加密協定，以下是一般使用SSL 做網路購物時，持卡人購物付款的概

括描述。

1. 持卡人(card holder)在網路商店網頁選擇商品並填寫購買數量。

2. 填寫收貨人資料（收貨人姓名、連絡方式、寄送地址等）、授權資

料（持卡人姓名、信用卡卡別、卡號、有效日期、到期日期）。使

用SSL 方式傳送資料至網路商店。

3. 網路商店收到持卡人之交易資料，留下收貨人資料，並幫持卡人取

得授權，將授權資料加密，將授權資料使用SSL 方式（持卡人姓名、

信用卡卡別、卡號、有效日期、到期日期、交易金額）傳給Payment

Gateway。

4. Payment Gateway 將收到之授權資料，轉換成ISO8583 格式（目前

信用卡格式），傳至收款銀行主機。

5. 收款銀行主機將授權資料透過金資中心傳至付款銀行進行「授權請

求」(ISO8583)。

14

6. 付款銀行透過金資中心傳送「授權回應」(ISO8583)至收款銀行主

機。

7. 收款銀行主機將「授權回應」(ISO8583)傳送給Payment Gateway。

8. Payment Gateway 將「授權回應」(ISO8583)轉換成SSL 交易格式，

並使用SSL 方式傳給網路商店。

9. 網路商店收到「授權回應」資料，取得授權、交易成功，並通知持

卡人。

10. 送貨。

11. 網路商店將於送貨後第七日向信用卡中心請款。

12. 發票寄送。

圖2-8 網頁有受到SSL加密保護

圖2-9 SSL安全保護的加密位元

15

2.5.3 SET與SSL網路購物的相異處

我們從前面已經了解SET和SSL的網路購物流程，也從前言知道兩

者的安全性與便利性對市場的影響，綜合以上結果，將SSL與SET 網路

購物的比較，整理成下面的表。

交易模式 SSL SET

優點 1.消費者使用方便 1.身分確認性

2.交易安全性

3.資料完整性

4.交易不可否認性

缺點 1.每次消費需再填一次

卡號

2.風險負擔

3.駭客入侵

4.信用卡卡號冒刷及外

漏之風險

需要銀行申請網路信用

卡及線上取得憑證的動

作與時間

安全性 低 高

風險性責任歸屬 商家及消費者 SET相關銀行組織

表2-1 SSL與SET 網路購物的相異點

2.5.4 電信帳單

這種收費模式逐漸在台灣風行，原因為台灣地區手機的普及率已

經達到七成以上，為居世界第三。此外，台灣使用撥接上網、寬頻上

網的用戶居眾多，電信業者擁有龐大客戶的帳單資料，不管用無線上

網或者寬頻、撥接上網消費數位商品，都得經過電信業者的網路，因

還可將貨款延後至隔月電信帳單中再繳交。以下就是常見的三種電信

帳單付款方式介紹:

1.SSL付款

只要擁有ISP的帳號或手機門號即可以使用帳號與密碼透過網站的SSL

機制付款。

16

2.電子錢包

消費者必須下載電子錢包軟體(免費)，消費時啟動電子錢包後，輸入

帳號、密碼，並透過軟體的加密機制運輸，而且交易完成後可以列印

存根聯，避免交易糾紛。

3.手機付款

透過手機數據服務上網，消費數位商品或服務。

以上付款方式，店家再開始必須付與電信業者設定費而且每次交易都

必須與電信業者拆帳。

2.5.4 數位儲值卡

儲值卡也是另一種在台灣相當普及的小額付款方式，而且台灣地

狹人稠，儲值卡透過便利商店販售，不但方便而且ICP廠商可以發行自

有品牌，對於消費者也有類似球員卡保值的作用。數位商品在台灣已

經打開市場的線上遊戲即是以儲值卡的方式付費。

2.5.5 智慧卡

智慧卡上面有IC晶片，用來記載消費與持卡人的身分認證，這張

卡片目前還具有信用卡的雙重功能，IC晶片上可以記有事前從銀行下

載的小額款項，方便消費者到商家消費時使用。

2.5.6 e-mail現金

以非銀行業者X.com為例，該公司於1999年11月首開先河，推出個

人對個人網路支付服務系統-PayPal，至今使用者已快速成長達兩百萬

名，X.com並宣稱eBay網站交易有四分之ㄧ經由該系統完成支付。

PayPal可以說是一個網上金錢的轉介所，如在網上購物，可以用PayPal

的e-mail透過信用卡付費，而賣東西時，也可以用PayPal收錢，幫你

在網上把錢迅速地傳到別人的公司或帳戶，省去很多郵寄的等候時間。

圖2-10 提供PayPal付款服務的標誌

17

PayPal個人對個人的支付系統作業模式如下:

1. 消費者向e-mail支付公司(例如PayPal)註冊登錄信用卡或銀行帳

戶密碼。

2. 消費者欲付款項時，即填製收款人與金額資料表格。

3. 付款金額自動於線上帳戶扣除。

4. 收款人自PayPal系統讀取有關款項匯入之e-mail訊息。

5. 收款人輸入銀行帳戶號碼，以電匯或支票方式收款。

用PayPal付款是不用手續費的，但是在收錢方面，如果每月收到

超過一百美元，便要收費用。現在能用於許多國家，亞洲亦包括香港、

新加坡。對購物網站而言，由於買賣雙方大多屬於個人對個人或個人

對公司，因此其電子交易之完成端賴一個安全、簡單、快速的支付服

務系統。

第三章 系統環境簡介

3.1 作業環境

我們的網站架構主要是以 Windows 2000 搭配「IIS」

(Internet Information Server)Web伺服器，如同Unix和Linux上知名

的免費Web伺服器Apache一般，可以讓我們在Windows NT 的電腦網路

上架構我們的Web網站。

IIS是一個整合Web應用程式的開發環境，能夠在Web上開發具有擴

充性和元件基礎的主從架構應用程式，再加上Windows 2000 Sever 能

夠完全整合Web 服務，使得我們能夠建立專業的網站，並且還提供網

路和集中式的系統管理功能。IIS 5支援「ASP」(Active Server Pages)、

Java 技術，整合Message Queue能夠在網路上可靠的寄送和接收訊息，

建立事件導向的應用程式，並搭配Transaction Server建立線上交易

系統。除此之外IIS還包括下列各點:

可以控制的「匿名使用者」存取權限。 提供允許單一電腦主機架設多個不同的Web網站及FTP網站。 設定SSL來提供資料加密與身份確認功能。 透過Index Server可增加資訊查詢的進度。

18

圖3-1 Windows 2000 Sever商標

而使用ASP建立的電子商務網站，特性不是在瀏覽網站時顯示的精

采網頁內容，而是在伺服端的資料處理，因為WWW是一種分散式的架

構，在瀏覽網頁程式中輸入的資料，都需要傳送回伺服端，由伺服端

進行處理。一個電子商務網站的架構大致分為兩個部分，在前端的是

HTML網頁的內容，在後端就是一個資料庫系統，只不過使用者介面為

Web網頁，所以電子商務網站除了一個Web 伺服器外，通常一定需要一

個資料庫系統，在後端儲存相關的會員或訂單資料。

3.2 硬體需求

1. 作業系統:Windows 2000 Server/Professional

2. CPU:能跑上述的作業系統皆可。

3. 記憶體:基本需求32MB，但建議64MB以上，Windows 2000則建議128mb

以上。

4. 網路卡:100 Mbps

5. 硬碟空間:至少預留40MB

3.3 網站架設說明與功能簡介

3.3.1 網站架設過程說明

Internet Information Server 可以在個人電腦中模擬網路上的

Web Server進行ASP檔案的寫作與測試，待編輯完之後再傳送至網路更

新網頁內容。不但可以減少排隊和上線的時間，並能減輕網路壅塞情

形。如果電腦中網路有固定的IP Address，便能在個人電腦中自行就

可以自行架設網站提供全天候網路服務。

19

因為是在單機上架設網頁伺服器，所以當我們開啟瀏覽器。將URL設為

http://127.0.0.1(或http://localhost)，就可以看到微軟預設的ASP

首頁(http://localhost/localstart.asp)。而首頁所放置的根目錄位

置為C:\Inetpub\wwwroot裡，爾後只要將自己寫的首頁(default.asp)

放入該資料夾，就能以我們的首頁來成為IIS預設的網站首頁。

3.3.2 IIS 的FTP 伺服器

當我們在安裝 IIS 5 的同時，預設值就會安裝FTP 服務，其最主

要的目的是搭配Web伺服器建立網站網頁的遠端更新功能，因為只需透

過FTP工具就可以直接維護網站的功能。

IIS的FTP 站台如同網站也一樣擁有自己的目錄，主要的目錄種類

分為兩種:

主目錄: 每一個FTP站台都需要一個主目錄，這個主目錄內可看到在登入FTP 站

台後顯示的目錄架構。

虛擬目錄: 虛擬目錄如同網站的虛擬目錄，以FTP 站台的角度來看，

它是主目錄下的子目錄，但實際對應的資料夾並不一定是在主目錄下。

3.3.3 SMTP 虛擬伺服器的郵件管理

SMTP 虛擬伺服器：

如果想在網頁和Web 伺服器的管理者通訊，電子郵件就是最佳的管道，

IIS伺服器提供有「SMTP 虛擬伺服器」（Virtual SMTP Service），

就算在一個尚未安裝郵件伺服器的系統環境下，一樣可以在Web伺服器

提供寄送電子郵件的服務。

SMTP 通訊協定： 「SMTP」（Simple Mail Transfer Protocol）郵件傳遞通訊協定，如

果網路上的電腦支援SMTP通訊協定，我們稱它為SMTP伺服器，

這個伺服器能夠將郵件工具送來的郵件寄送到Internet 或網路上目

的地的POP3 伺服器。IIS 的SMTP 虛擬伺服器提供的就是這種通訊協

20

定，能夠將網頁表單透過ASP 元件所送來的訊息資料，轉送到Internet

或網路上其它的郵件伺服器。

POP3 通訊協定： 「POP3」（Post Office Protocol Version 3）郵件接收的通

訊協定，一個類似現實生活郵局的通訊協定，如果這台電腦支援此通

訊協定，它有如一個網路上的電子郵局，在Internet 或區域網路接

收電子郵件，直到使用者透過郵件工具讀取。然而IIS 的SMTP 虛擬伺

服器並不支援此POP3 的通訊協定，因為SMTP 虛擬伺服器它並不同於

傳統的郵件伺服器，並不是一個真正的郵件伺服器，只能算是一個電

子郵件的路由匣道，好讓IIS 能夠透過SMTP 虛擬伺服器將網頁傳送的

郵件訊息，轉送到真正的郵件伺服器。

因為網站有使用到Web mail 發信的功能，所以必須使用到IIS 的

SMTP虛擬伺服器這個功能，使得我們並不需要額外的設定，即可自動

將網頁的郵件訊息轉寄到郵件伺服器，或是設定智慧主機(Smart host)

或遠端網域(Remote Domain)指定處理訊息轉送的目的地。

圖3-2 IIS的功能簡介圖

21

第四章 工具軟體介紹

4.1 ASP (Active Server Pages)

4.1.1 Web 應用程式的發展過程

在網際網路開始盛行的初期，大部分網頁所提供的多半是由HTML

所顯示的單調內容，而缺乏與使用者端的互動，因此，久而久之就會

讓使用者逐漸對其失去興趣。所以，為了改善這種情況，建立「動態

的」網頁內容及「互動式」的效果則是必須的。所以首先發展出來的

就是CGI(Common Gateway Interface)，但是在使用過一段時間後，許

多人也漸漸發現CGI 本身隱藏的若干缺點。所以為了改善這些缺點，

ASP(Active Server Pages)就成了替代CGI的解決方案。

4.1.2 CGI 的簡介

CGI 最明顯的例子便是搜尋引擎，藉由使用者於瀏覽器端輸入查

詢條件，並將其要求送到Web Server，接著便由CGI 程式分析需求，

再到資料庫擷取符合條件的紀錄，並將結果以HTML 格式的文件傳送到

瀏覽器上。所以許多人就誤認為CGI 是一個程式，但是實際上CGI 指

的是Web Server與應用軟體(Web 程式或資料庫)之間相互溝通的管

道，但因為CGI 與Server 端的應用軟體(program 或script)有著密切

的關係，所以大部分的人就將CGI 與Server 端的應用軟體合而為一，

直接叫做CGI程式，而非CGI 介面。但是CGI 本身卻隱藏若干個缺點，

例如效率過慢、系統資源耗損過多、程式不易開發…等等的缺點。這

其中最為人所詬病的就是效率不彰，由於每一份表單就會執行一次CGI

程式，所以多人執行時便會開啟同樣的執行檔若干次，如此一來將會

降低Web Server 的效率。所以為了解決以上的缺點，便產生了ASP。

4.1.3 ASP 的簡介

ASP 的全名是Active Server Pages，所以ASP 必定是在『伺服器』

建立的動態網頁。明確的說，ASP 是能在Web Server 端整合scripting

語言至HTML 的環境，然後利用後者(HTML 網頁)內含的Scripting 程

式碼取代舊有CGI、ISAPI 或IDC 的程式，以便執行原有CGI、ISAPI 的

22

功能。

ASP的優點:

微軟之所以要用ASP取代之前提出的Web解決方案(例如:CGI、

WinCGI、ISAPI、IDC等等)，主要是根基於下表列出的幾許優勢。 特點 說明

與瀏覽器無關 同CGI一般，ASP文件內的程式碼乃

於Web Server端執行，然後將結果

以HTML格式的文件傳回client端，

無關乎任何一種廠牌的瀏覽器。

不需編譯、連結成執行檔 ASP是一種支援直譯式Scripting語

言的環境，並不需要事前編譯成執

行檔(Executables)的格式才能執

行，此點和Perl、PHP相似。

與HTML的緊密結合 ASP是支援伺服器端Scripting語言的環境，後者可直接整合於HTML文

件當中，所以不需要再購買任何的

開發工具，只要以記事本便能撰

寫、編輯ASP文件。 保護原始程式碼 延伸名為.asp的ASP程式碼並不會

顯示於Client端的瀏覽器上方，因

為傳回給使用者的是直譯後的HTML

文件。 Scripting 語言的擴充性 除了VBScript、JScript 之外，透

過適當的ActiveX Scripting

Engine，也能利用Perl、Tcl 等

scripting 語言撰寫ASP。 ActiveX Server元件的支援 ASP 可輕易的透過ActiveX 伺服器

元件擴充既有的功能。 表4-1 ASP的優點

ASP的執行環境: 作業系統 Web Sever

Windows 2000 Server /

Professional Server

Microsoft IIS 5.0

23

Windows NT Server 4.0 Microsoft IIS 3.0/4.0 Windows NT Workstation 4.0 Microsoft PWS 3.0(及以上版本)Windows 95/98 Microsoft PWS 1.0a/4.0 Windows 95/98/NT WebSite Pro 2.x(支援 ASP 1.0)

表4-2 ASP的執行環境

Data Base

Cilent瀏覽器端

呼叫

Web Server

呼叫

ASP

回傳

回傳回傳

圖4-1 ASP的運作模式

4-2 ODBC (Open Database Connectivity)

開放資料連結(Open Database Connectivity，ODBC)是連結資料

庫的共通介面。ODBC是由微軟主導的資料庫連結標準，實作環境也以

微軟的系統最成熟。在UNIX系統中，通常要使用其他廠商所提供的ODBC

介面，有些UNIX廠商會提供自己的ODBC介面(如SUN 有位Solaris提供

ODBC)。

ODBC和資料庫的查詢採用SQL語言,這和大部份的資料庫查詢方式

一樣，這使得系統可以很容易和各種資料庫溝通。當然透過ODBC介面,

後端的資料庫不一定要DBMS這種大型資料庫系統，亦可以是資料表(如

Microsoft Access) 或者是試算表(如Microsoft Excel)。

24

資料庫1 資料庫2 資料庫3

應用程式3應用程式2應用程式1

圖4-2 傳統資料庫與應用程式的溝通方式

資料庫1 資料庫2 資料庫3

ODBC 驅動程式

應用程式2 應用程式3應用程式1

圖4-3 資料庫與應用程式以ODBC的溝通方式

圖4-4是傳統的應用程式讀取資料庫的方式，而圖4-5為透過ODBC

驅動程式讀取資料庫的情形。所以我們只需要學會一種程式語言，而

這種語言能支援ODBC資料庫的方式就可以控制所有支援ODBC的資料庫

了。

我們所使用的Access的ODBC Driver在安裝Access或是Office

2000時已自動安裝到機器上。

25

圖4-4 ODBC的設定畫面

4.3 Java Script

JavaScript是一種新的描述式(scripting，或譯成巨集)語言，此

一語言可以被崁入HTML的文件之中。透過JavaScript 可以做到回應使

用者的需求事件(如：Form表單的輸入)而不用任何的網路來回傳輸資

料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端

(server) 處理，再傳回來的過程，而直接可以被客戶端 (client) 的

應用程式所處理。所以也可以想像成有一個可執行程式在客戶端上執

行一樣。

JavaScript和Java 很類似，但並不太一樣。Java 是一種比

JavaScript更複雜許多的程式語言，而JavaScript則是相當容易了解

的語言。在寫作JavaScript 時可以不那麼注重程式技巧，所以許多

Java的特性在Java Script中並不支援。但是程式卻因此比較容易撰寫。

而JavaScript的執行環境Netscape 2.0 beta 3 版以上和Internet

Explorer 3.0 都可以執行JavaScript 的功能，所以用戶端不必擔心

無法得到執行後的結果。

4.4 FrontPage

26

利用FrontPage的工具可以讓您建置和管理你的網站，所以

FrontPage不僅可以用來作為網頁編寫另外還可以利用其中的管理工

具來管理你的網站。

在網頁編寫方面，FrontPage可以讓您迅速地建置外觀美麗的網

站，您可以利用內建在其中的工具快速地在網頁中加入所視即所得的

表格、超連結、圖片、圖片目錄標籤、框架、搜尋元件、計數器。所

以比起利用HTML來自行編寫程式碼的舊有方式，FrontPage 提供了更

為快速的方式來建構你的網站。另外，還提供動態HTML(DHTML)效果讓

您的網頁更為生動有趣。

在網站管理方面，利用FrontPage 2003的檢視畫面可以更容易且

有效地管理您的網站架構。其中包含以下幾個項目：

網頁編輯畫面：網頁編輯畫面結合前一版本的FrontPage Editor 及FrontPage Explorer，讓您在單一應用程式視窗中即可建立並

編輯網頁內容。

資料夾檢視畫面：讓您可以檢視網站內所有網頁、圖片、檔案，並 且容易地搬移及重新安排網頁儲存的位置。

報告檢視畫面： 提供數個網站報告協助您找出、診斷及解決專業 的疑難雜症。

導覽檢視畫面：讓您輕鬆地組織您的網站，建立新網頁以及設定網 頁間的連結關係。

超連結檢視畫面：快速地檢視超連結的狀況，包括與Microsoft Office文件的連結及一般的連結是否有中斷的現象。

工作檢視畫面：讓您追蹤網站建置任務的狀態、說明、負責人及緊 急程度。

4.5 Photoshop

27

4.5.1 使用Photoshop 的理由

由於近年來網際網路的發達，因此有越來越多的個體用戶希望也

能夠建立自己的網站。建購一個普通的網站非常容易，但是如果要架

構一個外觀生動的網站則需要許多工具軟體的配合，在這其中

Photoshop 就是一個製作網頁特效的強大應用程式。

4.5.2 Photoshop 的特點

Photoshop 在處理影像及圖形方面有很強大的功能，在這裡列舉

了一些重要的功能並簡述之。

優異的向量支援 使用Photoshop 可以將像素性影像與獨立字符相結合，為影像添加清

晰的字符周邊，達到高質量的效果。另外，Photoshop 還包括了新的

字符格式化控制，以產生最佳文字形狀，其中的字符扭曲功能，可扭

轉、拉伸字符，以取得極妙的效果。最值得一提的是，字符在影像中

無論如何處理，都能進行直接編輯。

高級PDF 輸出選項 Photoshop 擴展與Adobe 產品的融合， 對Adobe Portable

Document Format (PDF)提 供改良的支援，包括有能力儲存幻燈片，

圖層或PDF文檔內的向量對象。

圖層款式 Photoshop 6.0 提供一新的直觀圖層效果介面，一系列的效果選

項及將個人圖層 效果設計作為圖層款式進行儲存備用的支援功能。新

的圖層款式對話框可即時 顯示在當前圖層上所使用的效果﹐並允許選

擇在圖層上使用哪一種效果。儲存了 一種圖層款式後，它會在新款式

浮動視窗上出現。這種圖層款式及新的形狀工具 的綜合使用，為印刷

文字及網頁設計師開創了廣泛的創作機會。

影像變形 使用Photoshop 6.0 的新液化( Liquify )指令，可以迅速地以互

動方式推拉、旋轉 、 放大或縮小影像不同部位將一個影像扭曲或變

形。這些扭曲控制可以適用於廣 泛的任務中，從對一些細小影像部位

28

作出細微變形調整，到進行大手筆的調整以 達到誇大的變形效果。

切割工具使用新的切割工具及切割挑選工具，現在可以將網上圖像在

Photoshop 6.0 中直 接切割。可以用切割工具在不同的影像部位拖引

來創造出用戶特定片斷。Photoshop 會自動設定沒有設定的部分，以

致在輸出時可以產生一個HTML 表。可以將Photoshop 切割片的特性加

以修正，包括尺寸、位置、疊上次序及可見度等。

局部優化控制 Photoshop 6.0 包含有新的局部優化控制，可以使用8-bit alpha

渠道圓滑地在一影 像中改變壓縮設定。這一種技巧可在重要影像部位

產生更高質量的效果而無須 切割該影像或者處理經過切割的個別檔

案。可以不受由於切割而產生的長方形 區域的限制，使用不同影像區

域的自然外形來優化該影像。

動態圖層性切片 Photoshop 6.0 引進了一種新方式來切割影像﹕首先在選擇的圖層上

設立效果，然後讓 Photoshop 或 ImageReady 生成圖層性的切片。

當以這方法切割影像時 ，每一塊切片均會與每一圖層的最外圍像素相

連。如果重新布置或編輯圖層的內容，這切片會自動調節來適應這些

改變。這種技術對產生精確的滾動切片特別有用。加強與Adobe

ImageReady 3.0 的融合Photoshop 6.0 現在包括了有內置的切割工

具，以致能夠切割網上影像及由 Photoshop 直接輸送或將其移動至

ImageReady 以便作更多的加工。Photoshop 及 ImageReady 兩者均提

供動態的圖層性切割，這些切片邊沿與圖層最外圍的像素 相連，同時

會自動按圖層改變來自動調整。

強化的圖層管理 有了Photoshop 6.0 之後，圖層已經變得很靈活。現在可以在一影像

中創造數以百 計的圖層，來協助排列元素形成一精細的組合。另外，

可以使用一系列的新功能 更有效率地整理及管理圖層。最後，強化的

輸出功能可以將圖層以PDF或TIFF格式儲存在文檔內。

第五章 系統架構分析

29

5.1 網站系統架構圖

此章節介紹將整個購物網站的系統架構，由下列圖表說明之。

會員註冊系統

購物區系統

搜尋系統

討論區系統

投票區系統

管理系統

圖5-1 網站主架構

會員註冊系統 處理使用者登入及註冊的輸入資料，透過資料庫以及檢驗函式比對。

登入後可將選購商品放入購物車或出現輸入資料錯誤訊息頁面。

帳戶資料處理表單

會員註冊系統登入會員表單

註冊會員表單

錯誤訊息頁面

圖5-2 會員註冊系統架構

購物區系統

30

瀏覽各商品簡介後，可點進去詳細規格裡看更完整的商品介紹。

點下購買即可進入購物車系統界面，確定購買後可在會員帳戶裡觀看

廠商處理商品的進度，以及出貨的紀錄。

購物區系統

瀏覽商品網頁 購物車系統

繼續購物

更新購物車

購物結帳

清除購物車

確認會員資料表單

感謝訂購頁面

查詢訂購商品處理進度頁面

會員帳戶表單繼續購物

顯示已出貨訂購商品之記錄

繼續購物

圖 5-3 購物區系統架構

搜尋系統

透過關鍵字、最高價格的資料輸入，可以搜尋符合條件的商品，並以

依照需求排序。

搜尋系統

搜尋商品表單 不符搜尋條件商品網頁

符合搜尋條件商品網頁

圖 5-4 搜尋系統架構

討論區系統

可新增討論主題或到主題內新增留言，並可經由搜尋表單找到符合條

件的留言內容。

31

討論區系統

新增留言表單

顯示討論區各主題留言

搜尋表單

顯示符合條件留言

圖 5-5 討論區系統架構

投票區系統 對於顯示的投票主題，經由點選表單內容送出。並可經由頁面觀看投

票結果的長條圖。

投票系統 顯示投票主題投票結果顯示

頁面

投票頁面

圖 5-6 投票區系統架構

5.2 網站管理系統架構圖

在圖 5-7 中，說明系統管理者所需管理之介面。

管理系統

商品管理

訂單管理

討論區管理

投票區管理

圖 5-7 管理系統架構

32

商品管理 透過表單可新增、修改、刪除商品資料。並能夠顯示全部商品名稱、

資料且按照英文字母排序。

新增商品表單

商品管理

修改&刪除商品表單

顯示商品頁面

圖 5-8 商品管理系統架構

訂單管理

接收由購物車轉來的訂單資料，可依照目前商品處理的進度加以分類。

並搭配實體商品或信用卡狀態加以評估訂單。

訂單管理

商品訂購狀態表單

顯示商品訂購狀態頁面

更改商品訂購狀態

圖 5-9 訂單管理系統架構

討論區管理 管理者登入後，可對於討論區的內容修改或刪除。並可以線上更改管

理者密碼。

討論區管理

登入管理者表單

修改&刪除留言表單

更改管理者密碼表單 圖 5-10 討論區管理系統架構

投票區管理

管理者登入後，可以新增和修改投票主題以及選項。或是刪除過期的

的投票主題。

33

投票系統

管理者登入表單 新增&修改投票內容表單 刪除投票主題表單 圖 5-11 投票區管理系統架構

第六章 網站系統操作說明

6.1 網頁瀏覽操作說明

6.1.1 會員註冊系統

處理使用者登入及註冊的輸入資料，透過資料庫以及檢驗函式比對。

登入後可將選購商品放入購物車或出現輸入資料錯誤訊息頁面。

圖6-1 會員註冊系統表單

34

6.1.2 購物區系統 瀏覽各商品簡介後，可點進去詳細規格裡看更完整的商品介紹。

圖6-2 各牌商品簡介

圖6-3 商品詳細規格介紹

35

點下購買即可進入購物車系統界面，確定購買後可在會員帳戶裡觀看

廠商處理商品的進度，以及出貨的紀錄。

圖6-4 商品詳細規格介紹

圖6-4 訂單處理進度紀錄

圖6-5 訂單出貨記錄

6.1.3 搜尋系統系統

36

透過關鍵字、最高價格的資料輸入，可以搜尋符合條件的商品，並以

依照需求排序。

圖6-6 搜尋符合條件的商品頁面

6.1.4 討論區系統 可新增討論主題或到主題內新增留言，並可經由搜尋表單找到符合條

件的留言內容。

圖6-7 討論區主題顯示頁面

6.1.5 投票區系統

37

對於顯示的投票主題，經由點選表單內容送出。並可經由頁面觀看投

票結果的長條圖。

圖 6-8 投票主題顯示頁面

圖 6-9 決定投票頁面

38

圖 6-10 投票結果顯示頁面

6.2 網站管理操作說明

6.2.1 商品管理

圖 6-11 新增商品資料表單頁面

39

圖 6-12 修改&刪除商品資料表單頁面

圖 6-13 商品資料排序顯示頁面

40

6.2.2 訂單管理

圖 6-14 訂單處理進度分類顯示頁面

6.2.3 討論區管理

圖 6-15 討論區登入管理畫面

圖 6-16 討論內容修改畫面

41

圖 6-17 討論內容刪除畫面

6.2.4 投票區管理

圖 6-18 登入投票區管理表單

圖 6-19 建立投票項目頁面

42

圖 6-20 刪除投票活動頁面

第七章 程式製作分析與檔案庫資料

7.1 程式製作分析與特色介紹

本節中將介紹專題中系統較為核心功能的程式設計。

搜尋系統

主要使用 SQL LIKE 指令和 % 取代字元

SELECT FROM Products

WHERE product_status = 1

AND product_price < max price

AND product_name LIKE % searchFor %

OR product_briefDesc LIKE % searchFor %

OR product_fullDesc LIKE % searchFor %

ORDER BY orderby & sort

依照搜尋系統的表單欄位設計，由判斷流程設計出下圖各種可能的商

品顯示頁面。

43

圖 7-1 搜尋系統判斷流程圖

購物車系統

交易(Transaction):若有一連串資料存取動作(如跨行轉帳，一方面增

加金額，另一方扣除同等金額)具備同時成功或同時失敗的機制，則我

們稱此等資料行為稱做是一筆交易。若失敗則會 Roll Back 回到當初

最原始的狀態。因此當線上負載很大、資料庫死結或連接逾時，可避

免網站與使用者間交易不成功所帶來的衝突。可採用 MTS(Microsoft

Transaction Server)或是ADO連接物件BeginTrans()、CommitTrans()

方法來實作。

Luhn 信用卡檢查演算法

利用 VISA、MasterCard 等的檢查位元來判定卡號是否輸入正確。沒有

辦法完全判定該卡號是否真的正確或是適用每一種卡，但可以提供初

步的篩檢。

44

將卡號由右到左分別取出每個數字。

如果數字為偶數，則將該數字乘 2，其餘乘 1。

依序將數字串成 digits。

將 digits 由左至右依序取出每個數字累加到 checkSum 變數。

將 checkSum 除以 10，如果無法整除則為非法卡號。

FUNCTION validCCNumber( ccnumber )

ccnumber = CleanCCNum( ccnumber )

IF ccnumber = "" THEN

validCCNumber = FALSE

ELSE

isEven = False

digits = ""

for i = Len( ccnumber ) To 1 Step -1

if isEven Then

digits = digits & CINT( MID( ccnumber, i, 1) ) * 2

Else

digits = digits & CINT( MID( ccnumber, i, 1) )

End If

isEven = (Not isEven)

Next

checkSum = 0

For i = 1 To Len( digits) Step 1

checkSum = checkSum + CINT( MID( digits, i, 1 ) )

Next

validCCNumber = ( ( checkSum Mod 10) = 0 )

END IF

End Function

網站互動系統

網站互動系統是將虛擬社群的觀念整合進購物網站系統。

互動分類:交易型社群(Transaction Community)

通訊方式:非同步通信(Asynchronous Communication):不受連線時間

限制，可在任何時間發佈訊息。

參與方式:訊息公佈欄(Message Boards)、郵件傳送(Mail lists)

45

7.2資料庫檔案與資料表

介紹資料庫裡購物網站核心的資料表與各欄位的關連和key的分析。

圖7-2 購物網站資料表欄位關係圖

46

圖7-3 設計討論區系統關聯式資料庫

圖7-3 設計討論區系統關聯式資料庫

47

第八章 結論

8.1 遭遇的困難與解決方法

在此節中，將討論有這次做的專題中，遇到有那一些的困難，所

以我首先把此節分成有四個較為明顯的困難以及討論其解決方法。

8.1.1 專題製作之互相研討

由於是自己一個人一組，所以並無同組之討論對象甚或是依賴對

象，一切都得靠自己摸索自己主動。所以嚴格來說，討論的對象還真

算的上是網路社群的陌生大眾。起因於，我常常會就網頁設計上的問

題到網路論壇、BBS等…來尋求解答。也感謝一群同班同學的幫助，能

不耐煩的讓我多次請教程式流程以及設計方面構思，進而相互討論獲

得許多寶貴經驗。

8.1.2 架設網站所遇到的困難

由於是架構出實務性的專題網站，所以在架設的過程中，遭遇到

許多困難點。例如，網站存放的空間的取得、有無固定的IP 使用、作

業系統的限制、IIS伺服器提供SSL功能。

由於網站一開始是採用電腦原本Windows XP Professional版本架

設，但幾經一些網頁安全性提供(如SSL)、存取速度(OS設計)的考量最

後選擇了Windows 2000 Server。因此使用VMware軟體來模擬出真實環

境運作。此外，家中個人電腦使用的是浮動IP的ADSL，則使用動態DNS

軟體把IP能夠導向固定的DNS，產生出有如固定IP的效果。放置在一般

免費的ASP網路空間，不僅存取限制多而且廣告多，伺服器設定的自由

度勢趨近零，所以若以實務來說還是得付錢來租用虛擬空間，並可搭

配 .com 網址的申請。

8.1.3 實作後之統合工作

由於許多系統是分開完成後，進而組合而成。所以當初有些規劃

沒想到的地方，就會造成程式的bug或是無法整合。得需要重寫原始

48

碼，變成還要重新回憶當初的架構，不僅浪費時間也極耗勞力。之後

網站的核心就學乖了。開始繪畫粗略的流程圖，實作時由最小的程式

部份慢慢架構出整體，不僅修改簡易，整合性也提高不少。

8.1.4 創意的產生

創意一直是所有工作過程中最為寶貴的部份，相信若是創意能夠

表現出色，就可以吸引人潮的湧入進入網站，我的想法是整合多方系

統成為網站為各項附加功能。舉例像無名小站(Blog結合網路相簿)，

以及自由的修改度。或是架構出有如Yahoo和Google的入口網站，好答

到達成人潮更換成金潮。可以先行評估各項idea的取得研究報告，或

從瀏覽各種網站中取得新idea，好了解現在我們市場上有那一些是有

的，以及那一須是沒有的機制。如此一來，可以真正去掌握市場上的

變化脈動，讓我們的網站擁有良好的高競爭力。

8.2 電子商務的未來發展

資訊流通與共享 在一個以網路為基礎的社會，電子化的資訊可以迅速的傳遞與流通，

這樣的特性正是商業行銷的最佳利器。在過去我們必須負擔龐大的廣

告成本，很有限的將資訊散播出去。然而網際網路的出現，

讓我們在彈指之間便能將訊息傳遞到世界各地。

市場廣大無界限 以販賣書籍為例，當我們找尋我們所要的書本時，再過去必須要一家

一家的找，而且範圍只限於鄰近地區；但現在我們只要輕輕鬆鬆

的坐在家裡上網，用滑鼠點一點就可以找到我要的東西。這樣的交

易模式意味著商業領域的擴展，網際網路的出現完全打破了地區的

限制，所謂「天涯若比鄰」正是最佳的寫照。

網際網路目前正在全球蓬勃發展的，台灣非常慶幸的並沒有置外

於這波可能被稱為「第二次工業革命」的潮流之外，相信在政府、產

業界、消費者等多方面的努力之下，台灣網路產業未來的榮景是絕對

可以期待的，所以經由如此，可知道電子商務發展潛力無窮。

8.3 專題製作心得與感想

49

近幾年來，因為網路的蓬勃發展，使得上網人數逐年遞增，所以

從前許多的傳統產業也因為網路這股巨大的浪潮襲來，而不得不思考

因應之道，因為如果不想辦法突破傳統的行銷方式，終究會被這個巨

浪所淹沒。所以電子商務就在這股力量的支持之下順勢而起，許多大

企業也想盡辦法要與電子商務作出一個完美的結合。所以為了親身體

驗電子商務的魅力，我們就希望專題與電子商務能有密切的關係，因

此這就決定了專題的主要方向。

在開始打算時作專題的時候，其實也是懵懵懂懂。畢竟內部所採

用的技術並不是學校有開門授課的。多半甚或說是全部都是自學為主。

我買了十餘本相關ASP的書，也到圖書館租借了十餘本電子商務的書。

從暑假開始就每天規定自己閱讀和實作的進度。當在第一次專題網站

DEMO給林國貴老師時，即被指出網站中的不合理缺陷。深知自己的不

足，並針對該問題努力研究專研現今電子商務金流方面的解答，獲得

更進一步的知識。

在實作方面，也常常遇到不預期的困難點和書上所沒有的問題。

因為之前都不曾處理過這麼大的計畫，所以當都感覺到有一點惶恐，

這是因為擔心以自己的能力無法達到老師對我們的要求，另外一方面

對於我們所得到的知識也擔心無法將其整合運用在我們的專題實驗當

中。因此，在我們一開始訂定我們的專題整體架構時就遇到抉擇了，

因為訂定較為困難的題目有助於我們通過我們的專題審查，但是又擔

心以自己的能力無法實作出該有的功能而導致專題實驗的延宕。但是

如果訂定較為簡單的題目一方面有助於實作出成品，另一方面也可以

完成自己的目標，但是卻不一定能通過最後的審查，所以最後我們的

組員在經過一段時間的討論之後決定在基礎中求發展，也就是在我們

既有的能力做得到的成果之中再想辦法加入一些較為創新的元素，使

我們的專題不至於太死板，使得兩方面都能兼顧。

這個專題也使得我對於電子商務有了更深一層的認識，包括如何

架構一個成功的商務網站，如何處理物流與金流方面的問題以及如何

與廠商接洽等等的問題，這些都是我從前所沒有接觸的，所以這個專

題給了我們一個自我成長的機會，希望將來能夠把現在所學的應用在

各方面。

最後感謝林國貴老師的認真指導，並從旁給予協助和意見。督促

學生在專題過程中，認真研究獲得寶貴經驗。

50

參考資料

[1]廖信彥,Active Sever Pages 3.0 徹底研究,pp.4-9, 博碩文化股

份有限公司,2000

[2]文淵閣工作室,Dreamweaver MX 互動網站百寶箱 for ASP, 知城數

位科技,2003

[3]王國榮, Active Sever Pages 網頁製作教本, 旗標出版股份有限

公司,民 92

[4]林志強, 深入淺出 ASP 電子商務實務設計, 松崗電腦圖書資料股份

有限公司,2000

[5]王振容, ASP 電子商務程式設計-21 天自學手冊, 第三波資訊股份

有限公司,2000

[6]彼特工作室, 超廣角電子商務致勝教本, 金禾資訊股份有限公

司,2002

[7]林豪鏘、曹修源、Ian Phau, 網路行銷, 旗標出版股份有限公司,

民 91

[8]蔡俊平, 電子商務概要, 文魁資訊股份有限公司,2004

[9]尊龍電腦工作室, e 世代電子商務賺錢術, 文魁資訊股份有限公

司,2000

51