網站建置-以芽聖五金行為例

指導老師： 謝淑玲 教授

組 員： 詹志浩、 楊倚旻

李育叡、 張君瑋

陳煜中

摘要

在生活中上網是不可缺少的重要活動，幾乎沒有人可

以一天不使用到網路，再智慧型手機普遍的現在，網路是

帶著走的，走到哪網路用到哪，因為手機上網的便利性，

使得現在隨時隨地都可以瀏覽網頁，不管你是在公車上，

還是再超商，甚至是走在路上都可以隨心所欲的使用網路

瀏覽網頁，所以我們看準了網路的便利性，趁這趨勢在網

路上建立網站，增加企業的曝光性。

1.1 研究動機

1.2 研究背景

1.3 研究目的

1.4 研究流程

第一章 緒論

1.1 研究動機

現在使用智慧型手機上網的人數眾多，

隨時隨地都能在虛擬商店交易，並使現今網

路購物商機無窮，因此近年來網上購物已經

成為一種流行的風潮。

圖1.1 智慧型手機行動上網普及率

1.2 研究背景

圖1.2 台灣逐年經常上網人數

在2003年時經過統計12歲以上上網人口大約為57%，

然而統計至2013年時12歲以上上網人數增加到了將近

80%，上網人口數透露了商機以及虛擬人潮。

1.3 研究目的

我們設計這個網站的主要目的是希望讓網站看起

來非常的有設計感又能簡潔有力，所以我們製作了許

多Flash動畫吸引消費者來瀏覽，再以圖片清單的方式

列出主要的商品，並加入搜尋的功能，讓消費者能更

方便的找到自己所需的商品。

1.4 研究流程

圖1.3研究流程圖

確認主題與組員

蒐集資料及討論

系統修改

功能需求調查

網站架構規劃

資料庫開發

系統設計

系統測試

製作完成

NO

YES

2.1 電子商務

2.2 網站建置基本要件

2.3 SWOT

2.4 工具介紹

第二章 文獻探討

2.1 電子商務

電子商務(Electronic Commerce)是指利用電腦技

術、網路技術和遠程通信技術，實現整個商務買賣過

程中的電子化、數字化和網路化。

人們不再是面對面的、看著實實在在的貨物、靠紙介

質單據包括現金進行買賣交易。而是通過網上琳琅滿

目的商品信息、完善的物流配送系統和方便安全的資

金結算系統進行交易買賣。

2.2 網站建置基本要件(1/2)

（1）內容豐富性內容必須豐富並且符合使用者的需求，網站內容的文字方面應盡量

避免冗長瑣碎，依內容的需要適時的補上圖片，能使內容更加的精美豐

富。

（2）美觀美觀的配置是讓瀏覽者對於網站形象的第一印象，一個好的網站不

光只是內容豐富，美觀在網站形象中也具有極重要的地位。

2.2 網站建置基本要件(2/2)

（3）實用性網站的架構應該要淺顯易懂，因此網站設計時主要的依據應依照使

用者的需求，也要求網站使用上的實用性與便利性。

（4）溝通與規劃製作前的溝通與網頁設計規劃，是相當重要的。先瞭解使用者的想

法、需求與偏好風格，在與組員討論規劃，才能給使用者最合適的網站

動線與規劃。

2.3 SWOT

表2.1 SWOT

優勢 劣勢

1.多重販售通路

2.提升競爭力

3.資訊公開

1.無法即時回應客戶

2.議價困難

3.物流延遲

4.管理不易

機會 威脅

1.發掘新客源

2.知名度拓展

1.競爭者眾多

2.人多口雜

2.4 工具介紹(1/2)

(1) Microsoft Visual Web Developer 2010 Express

提供使用者立即可用來開始建立網路應用程序的所有需要。

(2) ASP.NET讓網頁上所有元建物件化、採用事件驅動的程式設計架構，讓動態

網頁更為模組化、也更容易。

2.4 工具介紹(2/2)

(3) Adobe Flash CS6用來設計網頁及多媒體動畫的軟體，可以讓網頁加入專業且漂亮的

互動式按鈕及向量式的動畫圖案特效。

(4) Adobe PhotoShop CS6主要處理以像素所構成的數位影像。

3.1 可行性研究

3.2 系統功能說明

3.3 開發工具

第三章 系統分析

3.1 可行性研究

（1）經濟可行性

基於網際網路的普及化，只需要一台電腦便可以隨時隨地簡單容易

的架設網站，透過商務網站的架設，網站的廣告宣傳甚至遠比傳統式的

廣告宣傳還來的有效益。

（2）技術可行性

本網站主要是用ASP.NET與SQL Server資料庫所編寫而成，在按

鈕及動畫是由Adobe Flash 去完成的。

（3）法律可行性

本網站所設計的內容及排版全都是由組員自行製作完成的，所使用

的圖片是由廠商所提供，flash動畫、首頁LOGO則是組員自行設計的，

網站所編寫的軟體皆是免費軟體。

（4）作業可行性

資訊化的快速發展，利用電腦或智慧型手機都能夠輕鬆上網，上網

購物已不再是難事，當初設計也考慮瀏覽的便利性。

3.1 可行性研究

3.2 系統功能說明(1/2)

使用者與管理者的功能細分為：使用者

（1）公司簡介：提供使用者了解公司的文化及背景。（2）加入會員：提供使用者申請帳號成為會員，並

使用相關會員功能。（3）工具介紹：提供使用者五金行工具的相關資訊。（4）購物車：提供使用者直接線上下單。

管理者

（1）公司簡介管理：新增、修改公司簡介。

（2）會員資訊管理：新增、修改、刪除會員資料。

（3）商品資訊管理：新增、修改商品資訊。

（4）消費清單：查詢客戶所購買之商品及訂單。

（5）購物車管理：新增、修改線上下訂單的方式。

3.2 系統功能說明(2/2)

3.3 開發工具(1/2)

3.3.1 硬體介紹 表3.3.1 伺服端需求

作業系統 Windows Server 2008

CPU Intel Celeron E1500 2.20GHz

記憶體 2 GB

顯示卡 G41 Express Chipset

硬碟容量 500 GB

3.3 開發工具(2/2)

表3.3.2 使用端需求

作業系統 Windows XP

CPU Intel Pentium3 以上處理器

記憶體 512 GB

顯示卡 G41 Express Chipset

硬碟容量 100 GB

3.3.1 軟體介紹

伺服器作業平台 Microsoft Windows 7 Server

資料庫 SQL Server

架站軟體 Microsoft Visual Web Developer 2010 Express

程式語言 ASP.NET

模擬瀏覽器

Internet Explorer

Google Chrome

Mozilla Firefox

美化軟體

Adobe Flash CS6

Adobe PhotoShop CS6

小畫家

表3.3.3 軟體介紹

第四章 網站架構

4.1 系統導覽圖

4.2 系統流程圖

4.3 資料庫結構

4.4 ER-model

4.1 系統導覽圖

網站導覽圖

帳號管理導覽圖

產品管理導覽圖

訂單管理導覽圖

1

4

2

3

（2）帳號管理導覽圖

帳號管理

新增帳號 修改帳號 刪除帳號

圖4.2 帳號管理導覽圖

此導覽圖是說明管理者能對帳號管理頁面所進行之動作。

（3）產品管理導覽圖

產品管理

新增產品 修改產品 刪除產品

圖4.3 產品管理導覽圖

此導覽圖是說明管理者能對產品頁面所進行之動作。

（4）訂單管理導覽圖

訂單管理

新增訂單 修改訂單 刪除訂單

圖4.4 訂單管理導覽圖

此導覽圖是說明管理者能對訂單頁面所進行之動作。

4.2 系統流程圖

本網站流程圖主要分成以下五個部份。

1

4

2

3

5

會員註冊流程

會員登入流程

購物流程商品修改資料流程

後台管理流程

4.2.1 會員註冊流程

圖4.5 會員註冊流程圖

開始

會員註冊

註冊成功

結束

輸入基本資料

資料是否正確

儲存

NO

YES

4.2.2 會員登入流程

圖4.6 會員登入流程圖

開始

資料修改

會員登入

結束

帳號密碼是否正確

輸入帳號密碼

NO

YES

購物清單

訂單資料

顯示錯誤訊息

4.2.3 會員修改資料流程

圖4.7 會員修改資料流程圖

顯示錯誤訊息

儲存

開始

會員登入

結束

修改資料

NO

YES

顯示錯誤訊息帳號密碼是否正確

修改資料是否正確 NO

YES

4.2.4 購物流程

圖4.8 購物流程圖

儲存

開始

會員登入

結束

帳號密碼是否正確 NO

YES

顯示錯誤訊息

填寫資料

填寫資料是否正確

選購產品

購買成功

顯示錯誤訊息NO

YES

4.2.5 後台管理流程

圖4.9 後台管理流程圖

NO

產品管理

新增產品

結束

輸入產品資料

資料是否確定NO

會員管理

瀏覽會員

選擇會員

結束

結束

開始

管理者

登入

訂單管理

訂單列表

判斷密碼

修改訂單狀態

完成訂單修改

會員是否刪除

會員刪除成功

YES YES

新增產品成功

後台管理系統

4.3 ER-model

4.4 資料庫結構

1

4

2

3

5

6

會員資料表

訂單明細資料表會員資料表

產品資料表訂單資料表

購物車資料表

4.4.1 會員資料表

欄位 型態 Null

帳號 nvarchar(10) 否 PK

密碼 nvarchar(10) 是

姓名 nvarchar(10) 是

信箱 nvarchar(25) 是

電話 nvarchar(15) 是

住址 nvarchar(50) 是

表4.1 會員資料表

4.4.2 訂單資料表

欄位 型態 Null

訂單標號 int 否 PK

帳號 nvarchar(10) 是

收貨人 nvarchar(20) 是

收貨人電話 nvarchar(15) 是

收貨人住址 nvarchar(40) 是

下單日期 datetime 是

訂單狀態 nvarchar(10) 是

表4.2 訂單資料表

4.4.3 訂單明細資料表

欄位 型態 Null

訂單編號 Int 是

訂單明細編號 Int 否 PK

產品編號 nvarchar(10) 是

單價 int 是

數量 int 是

表4.3 訂單明細資料表

4.4.4 產品資料表

欄位 型態 Null

類別編號 int 是

圖示 nvarchar(40) 是

產品編號 nvarchar(10) 否 PK

品名 nvarchar(40) 是

單價 int 是

表4.4 產品資料表

4.4.5 購物車資料表

表4.5 購物車資料表

欄位 型態 Null

購物車編號 int 否 PK

帳號 nvarchar(10) 是

產品編號 nvarchar(10) 是

品名 nvarchar(40) 是

單價 int 是

數量 int 是

第五章 網站功能介紹

5.1 使用者端

5.2 管理者端

5.1 使用者端

1

4

2

3

5

6

7

8

9

5.1.1 首頁

5.1.2 公司簡介5.1.5 資料修改

5.1.3 會員註冊5.1.6 產品目錄

5.14 會員登入5.1.7 購物清單

5.1.8 訂單資料

5.1.9 聯絡我們

5.1.1 首頁

圖5.1 首頁

5.1.2 公司簡介

圖5.2 公司簡介

5.1.3 會員註冊

圖5.3 會員註冊

5.1.4 會員登入

圖5.4 會員登入

5.1.5 資料修改

圖5.5 資料修改

5.1.6 產品目錄

圖5.6 產品目錄

5.1.7 購物清單

圖5.7 購物清單

5.1.8 訂單資料

圖5.8 訂單資料

5.1.9 聯絡我們

圖5.9 聯絡我們

5.1.9 最新消息

圖5.10 最新消息

5.2 管理者端

1

42

3 5

6

5.2.1 訂單資料管理

5.2.2 產品資料新增 5.2.4 產品類別管理

5.2.3 產品資料編輯 5.2.5 會員管理

5.2.6 管理者密碼修改

5.2.1 訂單資料管理

圖5.10 訂單資料管理

5.2.2 產品資料新增

圖5.11 公司簡介

5.2.3 產品資料編輯

圖5.12 產品資料編輯

5.2.4 產品類別管理

圖5.13 產品類別管理

5.2.5 會員管理

圖5.14 會員管理

5.2.6 最新消息新增

圖5.15 最新消息新增

5.2.7 管理者密碼修改

圖5.15 管理者密碼修改

第六章 結論

• 現在隨著網路越來越發達，許多消費者都是利用網路購買的方

式來購買商品，所以我們幫芽聖五金行製作了網站，可以讓消費者

能更方便的購買商品，本網站製作了許多功能讓消費者能更快速的

瀏覽商品，並能不受時間、空間的限制且容易的下訂單來選購所想

要的商品，網站也設計成非常的有時尚感，希望可以吸引消費者的

目光，替芽聖五金行達到廣告宣傳的效果。

• 上線之前會先實際操作給廠商看後台的管理功能，使其能輕鬆

的操作，接著跟廠商持續討論未來希望增加的功能或是需要修改的

地方，如:美化網站、網站新增英文介面，以及持續的更新和擴充網

站的資料。未來希望能讓芽聖五金行在社會上越來越具有知名度。