-
網站建置-以芽聖五金行為例
指導老師: 謝淑玲 教授
組 員: 詹志浩、 楊倚旻
李育叡、 張君瑋
陳煜中
-
摘要
在生活中上網是不可缺少的重要活動,幾乎沒有人可
以一天不使用到網路,再智慧型手機普遍的現在,網路是
帶著走的,走到哪網路用到哪,因為手機上網的便利性,
使得現在隨時隨地都可以瀏覽網頁,不管你是在公車上,
還是再超商,甚至是走在路上都可以隨心所欲的使用網路
瀏覽網頁,所以我們看準了網路的便利性,趁這趨勢在網
路上建立網站,增加企業的曝光性。
-
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 管理者密碼修改
-
第六章 結論
• 現在隨著網路越來越發達,許多消費者都是利用網路購買的方
式來購買商品,所以我們幫芽聖五金行製作了網站,可以讓消費者
能更方便的購買商品,本網站製作了許多功能讓消費者能更快速的
瀏覽商品,並能不受時間、空間的限制且容易的下訂單來選購所想
要的商品,網站也設計成非常的有時尚感,希望可以吸引消費者的
目光,替芽聖五金行達到廣告宣傳的效果。
• 上線之前會先實際操作給廠商看後台的管理功能,使其能輕鬆
的操作,接著跟廠商持續討論未來希望增加的功能或是需要修改的
地方,如:美化網站、網站新增英文介面,以及持續的更新和擴充網
站的資料。未來希望能讓芽聖五金行在社會上越來越具有知名度。