購物網站-以美容美髮材料為主題

全文

(1)逢甲大學資. 訊工程系專題報告. 購物網站 -以美容美髮材料為主題. 學生：賴明億(四丙) 鄭升凱(四丙) 指導教授：謝信芳老師. 中華民國九十三年五月.

(2) 購物網站-以美容美髮材料為主題. 目錄圖表…………………………………………………………………III 第一章緒論…………………………………………………………1 1.1 動機……………………………………………………1 1.2 目的……………………………………………………2 第二章系統概述……………………………………………………3 2.1 延革……………………………………………………4 2.2 公司組織圖……………………………………………5 2.3 人員編制………………………………………………5 2.4 職務……………………………………………………6 2.5 軟硬體設備……………………………………………7 2.6 工作分配與時程………………………………………8 第三章系統分析與設計……………………………………………9 3.1 系統分析的方法………………………………………9 3.2 本系統分析之方法……………………………………9 3.3 系統架構圖……………………………………………10 3.4 會員資料管理子系統分析……………………………11 3.4.1 會員資料管理子系統功能圖………………………11 3.4.2 會員登入 procedure1………………………………12 3.4.3 註冊新會員 procedure2……………………………14 3.4.4 會員資料更新 procedure3…………………………15 3.5 購物區子系統分析……………………………………17 3.5.1 購物區子系統功能圖………………………………17 3.5.2 新增商品至購物車 procedure4……………………18 3.5.3 刪除購物車內之商品 procedure5…………………20 3.5.4 結帳 procedure6……………………………………21 3.6 會員賣物子系統分析…………………………………22 3.6.1 會員賣物子系統功能圖……………………………22 3.6.2 會員新增賣物資料 procedure7……………………22 3.6.3 會員刪除賣物資料 procedure8……………………24 3.7 管理者子系統分析……………………………………25 3.7.1 管理者子系統功能圖………………………………25 3.7.2 刪除會員資料 procedure9…………………………25 3.7.3 管理者新增商品資料 procedure10………………27 3.7.4 管理者更新商品資料 procedure11………………28 I. 逢甲大學 e-Paper (92學年度).

(3) 購物網站-以美容美髮材料為主題. 第四章系統實作……………………………………………………30 4.1 會員資料子系統………………………………………30 4.1.1 登入…………………………………………………30 4.1.2 新手註冊……………………………………………33 4.1.3 修改會員資料………………………………………36 4.2 購物區子系統…………………………………………39 4.2.1 購物區分類…………………………………………39 4.2.2 將商品放入購物車…………………………………40 4.2.3 檢視購物車以及結帳………………………………42 4.3 會員賣物子系統………………………………………45 4.3.1 點選會員賣物區……………………………………45 4.3.2 會員賣物……………………………………………46 4.3.3 個人賣物刪除………………………………………47 4.4 管理者子系統…………………………………………52 4.4.1 管理者登入…………………………………………52 4.4.2 新增商品上架………………………………………55 4.4.3 刪除已上架物品……………………………………58 4.4.4 刪除會員資料………………………………………61 4.4.5 查詢會員資料………………………………………63 4.5 留言板…………………………………………………65 第五章系統評估……………………………………………………67 5.1 說明…………………………………………………67 5.2 會員基本資料子系統評估……………………………67 5.3 購物車子系統評估……………………………………67 5.4 會員賣物子系統評估…………………………………67 5.5 管理者子系統評估……………………………………68 5.6 系統的優缺點…………………………………………68 第六章結論…………………………………………………………69 6.1 心得……………………………………………………69 6.2 未來展望………………………………………………70 參考資料……………………………………………………………71. II 逢甲大學 e-Paper (92學年度).

(4) 購物網站-以美容美髮材料為主題. 圖表目錄圖 2-1 組織圖…………………………………………………………5 圖 2-2 營業部職務圖…………………………………………………6 圖 2-3 總務部職務圖…………………………………………………6 圖 2-4 倉儲部職務圖…………………………………………………7 圖 2-5 工作時程甘特圖………………………………………………8 圖 3-1 網站系統架構圖………………………………………………9 圖 3-2 會員資料管理子系統功能圖…………………………………11 圖 3-3 會員登入流程圖………………………………………………12 圖 3-4 會員註冊流程圖………………………………………………14 圖 3-5 會員資料修改流程圖…………………………………………15 圖 3-6 購物區子系統功能圖…………………………………………17 圖 3-7 新增購物車商品流程圖………………………………………18 圖 3-8 刪除購物車商品流程圖………………………………………20 圖 3-9 結帳流程圖……………………………………………………21 圖 3-10 會員賣物子系統功能圖……………………………………22 圖 3-11 會員新增賣物資料流程圖…………………………………23 圖 3-12 會員刪除賣物資料流程圖…………………………………24 圖 3-13 管理者子系統功能圖………………………………………25 圖 3-14 管理者刪除會員資料系流程圖……………………………26 圖 3-15 管理者新增商品資料流程圖………………………………27 圖 3-16 管理者更新商品資料流程圖………………………………28 圖 4-1 會員登入畫面…………………………………………………30 圖 4-2 登入錯誤訊息…………………………………………………31 圖 4-3 會員注意事項畫面……………………………………………33 圖 4-4 會員註冊畫面…………………………………………………34 圖 4-5 會員註冊成功畫面……………………………………………35 圖 4-6 會員註冊失敗畫面……………………………………………37 圖 4-7 未登入修改畫面………………………………………………37 圖 4-8 修改會員資料畫面……………………………………………37 圖 4-9 顯示錯誤訊息…………………………………………………38 圖 4-10 成功修改畫面………………………………………………38 圖 4-11 購物區分類…………………………………………………39 圖 4-12 勾選商品放入購物車之畫面………………………………40 圖 4-13 商品成功放入購物車之畫面…………………………………41 圖 4-14 購物車畫面…………………………………………………42 III. 逢甲大學 e-Paper (92學年度).

(5) 購物網站-以美容美髮材料為主題. 圖 4-15 已成功訂購商品畫面………………………………………43 圖 4-16 查看個人物品畫面…………………………………………44 圖 4-17 刪除購物車資料畫面………………………………………44 圖 4-18 會員賣物區畫面……………………………………………45 圖 4-19 賣物商品登錄畫面…………………………………………46 圖 4-20 上傳圖片畫面………………………………………………46 圖 4-21 會員賣物顯示畫面…………………………………………47 圖 4-22 賣物區畫面…………………………………………………49 圖 4-23 進入個人賣物刪除畫面……………………………………49 圖 4-24 個人賣物已刪除畫面………………………………………51 圖 4-25 輸入管理者帳號、密碼畫面………………………………52 圖 4-26 管理者登入成功畫面………………………………………54 圖 4-27 商品登錄畫面………………………………………………55 圖 4-28 管理者上傳圖片畫面………………………………………55 圖 4-29 賣物成功畫面………………………………………………56 圖 4-30 進入管理者刪除物品畫面…………………………………58 圖 4-31 成功刪除畫面………………………………………………60 圖 4-32 管理者刪除會員資料畫面…………………………………61 圖 4-33 成功刪除會員畫面…………………………………………62 圖 4-34 管理者輸入會員查詢畫面…………………………………63 圖 4-35 管理者查詢結果畫面………………………………………64 圖 4-36 輸入留言畫面………………………………………………65 圖 4-37 成功留言畫面………………………………………………66 表 3-1 會員基本資料之紀錄格式……………………………………12 表 3-2 會員登入.aspx 記錄格式……………………………………13 表 3-3 主頁.aspx 記錄格式…………………………………………13 表 3-4 註冊會員.aspx 記錄格式……………………………………14 表 3-5 完成訊息.aspx 記錄格式……………………………………15 表 3-6 會員更新資料.aspx 記錄格式………………………………16 表 3-7 完成訊息.aspx 記錄格式……………………………………16 表 3-8 商品資料之紀錄格式…………………………………………18 表 3-9 購物車資料之紀錄格式………………………………………19 表 3-10 購物區.aspx 記錄格式………………………………………19 表 3-11 購物車.aspx 記錄格式………………………………………19 表 3-12 訂購商品資料之紀錄格式…………………………………21 表 3-13 會員賣物資料之紀錄格式…………………………………23 表 3-14 會員賣物.aspx 記錄格式…………………………………23 IV. 逢甲大學 e-Paper (92學年度).

(6) 購物網站-以美容美髮材料為主題. 表 3-15 會員資料刪除.aspx 記錄格式………………………………26 表 3-16 商品資料之紀錄格式…………………………………………27 表 3-17 新增商品資料.aspx 記錄格式………………………………28 表 3-18 更新商品資料.aspx 記錄格式………………………………29. V. 逢甲大學 e-Paper (92學年度).

(7) 購物網站-以美容美髮材料為主題. 第一章. 緒論. 1.1 動機貨物的買賣行為長久以來即存在於每個人的生活之中，隨著時代的變遷,購物的方式亦隨著時代的改變,延伸出許多便利的消費方式，例如郵購、電視購物等等，現今資訊進步，網路通訊蓬勃發展，一種新型態的購物方式也隨之產生，就是網路購物，這種購物方式已漸漸被大眾所接受，形成一種潮流,藉由網路的傳播,推薦自己的商品, 利用各種影音效果的展現，來吸引消費者，更重要的是網路購物提供了消費者許多便利性，不用出門即可購物，深深吸引許多年輕族群，加上近年來法律的規範，使的網路購物的安全性提高，購得的商品品質穩定，因此，網路購物的前景看好，所以，我們決定要以網路購物系統來當作這次專題的主題。此網路購物系統，我們將以"美容美髮材料"為主題，在經濟不景氣的衝擊下，各種品牌的化妝品，美髮用品始終不斷推陳出新，消費者仍然趨之若鶩，現在大家都極度重視給人的第一印象，因此不斷添購各種美容美髮用品來改頭換面，給人好的印象，這就是此行業不衰的原因，我們亦是針對此觀點，認為美容美髮材料是一項前景可期的行業，所以想藉由此次的專題,將購物 e 化，使得購物更加方便。 1. 逢甲大學 e-Paper (92學年度).

(8) 購物網站-以美容美髮材料為主題. 1.2 目的我們大家應該都有過一種經驗常常要配合店家的一些作息而造成我門相當大的不便利，然而在網際網路上買東西，往返商店、營業時間、店員作息、通通不再是消費購物的負擔。還有有時候我們打電話去賣東西的那家公司時,常常會聽到「業務部，請按 1；客服部，請按 2...」面對電話另一端，似乎永無止盡的等待，真懷疑這家公司，是否僅是一人公司，或是已經人去樓空、鳥走獸散？又因隨著資訊科技的日新月異,網際網路逐漸與生活結合，透數位化的資訊符號傳遞訊息。而網路行銷，簡單的說就是:利用 Internet 來進行廣告、服務、銷售、付款等商業行為，因此使我們決定來做一個網路購物系統為專題的主題來解決上述的問題。我們期望能作到以下幾點: 1.親切且簡易操作的網頁設計提供平易近人的操作介面，使消費者能輕鬆瀏覽網頁，選購自己所需產品。 2.以清楚明確的標題對產品加以分類清楚的分類可以方便消費者再找尋自己所需產品時能節省時間。. 2. 逢甲大學 e-Paper (92學年度).

(9) 購物網站-以美容美髮材料為主題. 3.提供專業可靠的產品資訊對於每項產品皆能詳盡的提供使用方法，適用者等等。 4.提供購物車的功能方便消費者能夠把他要買的產品集中一起以方便做最後的結算，使消費者容易掌握消費額度。. 3. 逢甲大學 e-Paper (92學年度).

(10) 購物網站-以美容美髮材料為主題. 第二章系統概述 2.1 沿革 Beauty House 購物網為一新興發展的美容美髮用品商務網站，負責提供一些美容美髮用品資訊、販賣、以及一些二手商品等服務。 Beauty House 購物網營業精神在於提供顧客方便以及輕鬆的虛擬購物環境，與一些美容美髮用品資訊讓顧客參考，以及提供顧客販賣他們的二手商品，還有開放交流的空間讓顧客彼此之間交換意見和交流，當然也可以對 Beauty House 購物網提出建議，或是對某樣商品提出建言或注意事項，透過 Beauty House 購物網做為傳達。. 4 2.2 公司組織圖. 逢甲大學 e-Paper (92學年度).

(11) 購物網站-以美容美髮材料為主題. 董事長總經理總務部. 倉儲部. 營業部. 圖 2-1 公司組織圖. 2.3 人員編制董事長. 1人. 營業部. 經理. 1 人、員工 3. 總務部. 經理. 1 人、員工 2 人. 倉儲部. 經理. 1 人、員工 2 人. 人. 5 2.4 職務逢甲大學 e-Paper (92學年度).

(12) 購物網站-以美容美髮材料為主題. 提供網站商品資訊營. 接受網路訂單負責向倉儲部提貨. 業. 建立商品資料庫索引以方便搜尋. 部. 建立客戶資料表設立會員機制分析客戶模式建立廠商資料表. 圖 2-2 營業部職務圖. 總. 負責公司各部門零用金的管理. 務. 公司固定資產的管理. 部. 事務品採購負責向廠商採購商品或需要品並存入倉儲部. 圖 2-3 總務部職務圖. 6. 逢甲大學 e-Paper (92學年度).

(13) 購物網站-以美容美髮材料為主題. 將廠商送到的商品置入倉庫或移到營業部銷售倉. 建立商品流動資料表以利管理. 儲. 負責商品安全以及維護. 部. 統計現有商品數量建立倉儲資料庫以管理並確認所存的商品建立商品保存資料庫以利維護. 圖 2-4 倉儲部職務圖. 2.5 軟硬體需求 1.軟體需求作業系統: Microsoft Windows XP 網頁製作:Asp.net、 Microsoft Frontpage 資料庫: Microsoft SQL Server 2000 文書編輯: Microsoft Word、Adobe Acrobat 2.硬體需求 CPU:INTER P1.6GHz 記憶體:512DDRRAM 硬碟:Maxtor 100GB 7200RPM. 7. 逢甲大學 e-Paper (92學年度).

(14) 購物網站-以美容美髮材料為主題. I/O 設備:印表機 17 吋 CRT 2.7 工作分配與時程 1.工作分配賴明億:資料蒐集、系統分析、程式撰寫、報告撰寫鄭升凱:資料蒐集、系統分析、程式撰寫、報告撰寫 2 工作時程工作名稱. 總天數. 1. 資料蒐集. 20 天. 2. 軟體選擇. 10 天. 3. 系統分析. 30 天. 4. 系統實作. 90 天. 5. 系統評估. 20 天. 6. 報告撰寫. 30 天. 一月. 二月. 三月. 四月. 五月. 圖 2-5 工作時程甘特圖. 8. 逢甲大學 e-Paper (92學年度).

(15) 購物網站-以美容美髮材料為主題. 第三章系統分析與設計 3.1 系統分析的方法用來系統開發與分析的方法裡,最受歡迎最常見的方法有兩種： 1.結構化分析: 它是在 1960 年所發展出來的，當時大部分系統都是以資料檔案在大型主機上處理為主，他是描述將資料轉換成有用的資訊,把系統的處理工作其相關的輸出輸入資料，以圖形化方式將其流程呈現出來，使整各系統能令人一目了然。 2.物件導向分析：它是一種將物件與資料間的交互作用用物件模組來表示的分析方法，藉由物件的繼承和再利用，使系統開發更快速且降低開發成本。. 3.2 本系統之分析方法我們是採用結構化分析的技術來作系統分析，利用系統開發生命週期(SDLC-system Development Life Cycle)的階段架構，來進行規劃、分析、設計、製作以及支援一個資訊系統，我們之所以選用結構化分析來開發系統，是因為此技術容易了解，能夠從圖形迅速的看出工作流程以及資料流程，可以幫助我們設計的時候能循序漸進，不易混淆產生錯誤，並且讓我們知道哪些地方需要再作加強修改。 9. 逢甲大學 e-Paper (92學年度).

(16) 購物網站-以美容美髮材料為主題. 3.3 系統架構圖我們將此系統分成四個子系統，如圖. 購物網主系統. 會員資料管理子系統. 購物車子系統. 圖 3-1. 會員賣物子系統. 管理者子系統. 網站系統架構圖. 10 逢甲大學 e-Paper (92學年度).

(17) 購物網站-以美容美髮材料為主題. 3.4 會員資料管理子系統分析此子系統功能是處理會員的登入和會員基本資料管理，主要是負責會員資料的新增、更新。. 3.4.1 會員資料管理子系統功能圖. 購物網主系統. 會員資料管理子系統. 會員登入. 會員資料更新. 會員資料新增. 圖 3-2. 會員資料管理子系統功能圖. 11. 逢甲大學 e-Paper (92學年度).

(18) 購物網站-以美容美髮材料為主題. 3.4.2 會員登入 procedure1 此處理程序將輸入的帳號、密碼與資料庫中的資料比對，若正確才可以進行登入的動作。. 會員基本資料.mdf. 會員登入.aspx. 主頁.aspx. Procedure1. 圖 3-3 會員登入流程圖. 檔案名稱:會員基本資料.mdf 記錄格式: 序號. 欄位名稱. 1. 會員編號. 2. 會員帳號. 3. 資料型態. 備. 註. 4. 不可空白. 文字. 10. 不可空白. 會員密碼. 文字. 10. 不可空白. 4. 會員姓名. 文字. 10. 不可空白. 5. 性別. 文字. 4. 不可空白. 6. 住址. 文字. 20. 不可空白. 7. e-mail. 文字. 20. 不可空白. 表 3-1. 數字. 欄位長度. 會員基本資料之記錄格式. 12. 逢甲大學 e-Paper (92學年度).

(19) 購物網站-以美容美髮材料為主題. 檔案名稱:會員登入.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 帳號. 文字. 4. (550,460). 2. 密碼. 文字. 4. (550,480). 3. 錯誤訊息. 文字. 20. (700,530). 4. 登入. 按鈕. 4×2. (580,530). 5. 會員註冊. 按鈕. 8×2. (580,570). 備註. 表 3-2 會員登入.aspx 記錄格式. 檔案名稱:主頁.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 1. 會員登入. 連結. 10. (90,260). 2. 購物區. 連結. 10. (90,320). 3. 會員賣物. 連結. 10. (90,490). 4. 購物記錄. 連結. 10. (90,550). 5. 留言版. 連結. 10. (90,600). 表 3-3. 位. 置. 備註. 主頁.aspx 記錄格式. 13. 逢甲大學 e-Paper (92學年度).

(20) 購物網站-以美容美髮材料為主題. 3.4.3 註冊新會員 procedure2 此處理程序對會員輸入的資料作確認，並且儲存至會員基本資料.mdf，然後顯示註冊成功的訊息. 會員基本資料.mdf. 註冊會員.aspx. Procedure2. 完成訊息.aspx. 圖 3-4 會員註冊流程圖. 檔案名稱:會員基本資料.mdf 檔案格式:請參照表 3-1 檔案名稱:註冊會員.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 帳號. 文字. 4. (310,420). 2. 密碼. 文字. 4. (310,460). 3. 姓名. 文字. 4. (310,510). 4. 性別. 下拉式選單. 2×4. (310,600). 5. 地址. 文字. 4. (310,640). 6. e-mail. 文字. 6. (310,680). 7. 錯誤訊息. 文字. 10. (460,730). 備註. 表 3-4 註冊會員.aspx 記錄格式. 14. 逢甲大學 e-Paper (92學年度).

(21) 購物網站-以美容美髮材料為主題. 檔案名稱:完成訊息.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 完成訊息. 文字. 20. (650,450). 2. 返回首頁. 連結. 8. (620,520). 備註. 表 3-5 完成訊息.aspx 記錄格式. 3.4.4 會員資料更新 procedure3 此程序是將會員修改之後的資料儲存至會員基本資料.mdf 中. 會員基本資料.mdf. 會員資料更新.aspx. Procedure3. 完成訊息.aspx. 圖 3-5 會員資料更新流程圖. 檔案名稱:會員基本資料.mdf 記錄格式:請參照表 3-1 15. 逢甲大學 e-Paper (92學年度).

(22) 購物網站-以美容美髮材料為主題. 檔案名稱:會員資料更新.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 帳號. 文字. 4. (310,420). 2. 密碼. 文字. 4. (310,460). 3. 姓名. 文字. 4. (310,510). 4. 性別. 下拉式選單. 4×4. (310,600). 5. 地址. 文字. 4. (310,640). 6. e-mail. 文字. 6. (310,680). 7. 錯誤訊息. 文字. 20. (460,730). 備註. 表 3-6 會員資料更新.aspx 記錄格式. 檔案格式:完成訊息.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 完成訊息. 文字. 20. (650,450). 2. 返回首頁. 連結. 8. (620,520). 備註. 表 3-7 完成訊息.aspx 記錄格式. 16. 逢甲大學 e-Paper (92學年度).

(23) 購物網站-以美容美髮材料為主題. 3.5 購物區子系統分析此子系統的功能是能將要購買之商品至於購物車內，讓會員能清楚知道買了哪些商品，以及購買總金額。. 3.5.1 購物區子系統功能圖. 購物網主系統. 購子. 物系. 區統. 結帳並檢視訂購商品. 新增、刪除購物車內商品. 圖 3-6. 購物區子系統功能圖. 17 逢甲大學 e-Paper (92學年度).

(24) 購物網站-以美容美髮材料為主題. 3.5.2 新增商品至購物車 procedure4 此程序是購物區內的商品新增放入至購物車中，從商品資料.mdf 中將資料讀取出來並且存入購物車資料.mdf. 商品資料.mdf. 購物區.aspx. 購物車.aspx. Procedure4. 購物車資料.mdf. 圖 3-7 新增購物車商品流程圖. 檔案名稱:商品資料檔.mdf 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 商品編號. 數字. 4. 不可空白. 商品名稱. 文字. 10. 不可空白. 商品價格. 數字. 4. 不可空白. 商品數量. 數字. 4. 不可空白. 商品種類. 文字. 10. 不可空白. 商品說明. 文字. 50. 不可空白. 表 3-8. 備. 註. 商品資料之記錄格式. 18. 逢甲大學 e-Paper (92學年度).

(25) 購物網站-以美容美髮材料為主題. 檔案名稱:購物車資料.mdf 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 會員編號. 數字. 4. 不可空白. 商品編號. 數字. 4. 不可空白. 商品名稱. 文字. 10. 不可空白. 商品價格. 數字. 4. 不可空白. 商品數量. 數字. 4. 不可空白. 總價. 數字. 6. 不可空白. 表 3-9. 備. 註. 購物車資料之紀錄格式. 檔案名稱:購物區.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 會員登入. 連結. 10. (90,260). 2. 購物區. 連結. 10. (90,320). 3. 會員賣物. 連結. 10. (90,490). 4. 購物記錄. 連結. 10. (90,550). 5. 留言版. 連結. 10. (90,600). 6. 放入購物車. 按鈕. 10×2. (610450). 備註. 表 3-10 購物區.aspx 記錄格式. 檔案名稱:購物車.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 購買記錄. 連結. 8. (630,400). 2. 購物區. 連結. 6. (90,320). 3. 刪除. 按鈕. 4×2. (580,470). 4. 結帳. 按鈕. 4×2. (710,470). 備註. 表 3-11 購物車.aspx 記錄格式. 19. 逢甲大學 e-Paper (92學年度).

(26) 購物網站-以美容美髮材料為主題. 3.5.3 刪除購物車內之商品 procedure5 將購物車資料.mdf 中得的資料刪除再存入購物車資料.mdf. 購物車.aspx. Procedure5. 購物車資料.mdf. 圖 3-8 刪除購物車商品流程圖. 檔案名稱:購物車資料.mdf 記錄格式:請參照表 3-9. 檔案名稱:購物車.aspx 記錄格式:請參照表 3-11. 20 逢甲大學 e-Paper (92學年度).

(27) 購物網站-以美容美髮材料為主題. 3.5.4 結帳 proedure6 此程序將結帳之商品資料存入訂購商品資料庫，並且將存於購物車資料庫中資料刪除購物車.aspx. Procedure6. 購物車資料.mdf. 訂購商品資料.mdf. 圖 3-9 結帳流程圖. 檔案名稱:購物車資料.mdf 記錄格式:請參照表 3-9. 檔案名稱:訂購商品資料.mdf 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 商品編號. 數字. 4. 不可空白. 商品名稱. 文字. 10. 不可空白. 商品價格. 數字. 4. 不可空白. 商品數量. 數字. 4. 不可空白. 商品種類. 文字. 10. 不可空白. 商品說明. 文字. 50. 不可空白. 表 3-12. 備. 註. 訂購商品資料之記錄格式. 21. 逢甲大學 e-Paper (92學年度).

(28) 購物網站-以美容美髮材料為主題. 檔案名稱:購物車.aspx 記錄格式:請參照表 3-11. 3.6 會員賣物子系統此子系統是提供會員能將要賣的二手商品資訊呈列在網頁上，並且留下連絡方式，可供想要買此商品的會員聯絡。 3.6.1 會員賣物子系統功能圖. 購物網主系統. 會員賣物子系統. 新增、刪除商品資料圖 3-10 會員賣物子系統功能圖. 3.6.2 會員新增賣物資料 procedure7 此程序是處理會員新增賣物的資料，確認的資料是否輸入完整，符合格式，再存入會員賣物資料.mdf 中 22. 逢甲大學 e-Paper (92學年度).

(29) 購物網站-以美容美髮材料為主題. 會員賣物 .aspx. Procedure7. 會員賣物資料.mdf. 圖 3-11 會員新增賣物資料流程圖. 檔案格式:會員賣物資料.mdf 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 商品編號. 數字. 4. 不可空白. 商品名稱. 文字. 10. 不可空白. 商品價格. 數字. 4. 不可空白. 商品說明. 文字. 50. 不可空白. 聯絡方式. 文字. 20. 不可空白. 表 3-13. 備. 註. 會員賣物資料之記錄格式. 檔案名稱:會員賣物.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 商品名稱. 文字. 8. (390,530). 2. 商品數量. 文字. 8. (390,560). 3. 商品價格. 文字. 8. (390,580). 4. 商品說明. 文字. 8. (390,640). 5. 送出. 按鈕. 4×2. (630,740). 備註. 表 3-14 會員賣物.aspx 記錄格式. 23. 逢甲大學 e-Paper (92學年度).

(30) 購物網站-以美容美髮材料為主題. 3.6.3 會員刪除賣物資料 procedure8 此程序是將會員的商品資料從資料庫中讀取出來，經會員鉤選刪除後，從會員賣物資料庫中將其刪除. 會員賣物 .aspx. Procedure8. 會員賣物資料.mdf. 圖 3-12 會員刪除賣物資料流程圖. 檔案名稱:會員賣物資料.mdf 記錄格式:參照表 3-13. 檔案名稱:會員賣物.aspx 記錄格式:參照表 3-14. 24 逢甲大學 e-Paper (92學年度).

(31) 購物網站-以美容美髮材料為主題. 3.7 管理者子系統此子系統只供管理者使用，主要用於管理者可以新增、刪除會員資料，並且可以隨時查詢商品的存量資料，以及會員的訂單資料。 3.7.1 管理者子系統功能圖. 購物網主系統. 管理者子系統. 刪除會員資料. 新增、刪除商品資料圖 3-13. 管理者子系統功能圖. 21 3.7.2 刪除會員資料 procedure9 此程序將會員資料從會員基本資料.mdf 中讀取出來，並且進行刪除的動作，再存入會員基本資料表.mdf. 25. 逢甲大學 e-Paper (92學年度).

(32) 購物網站-以美容美髮材料為主題. 會員資本資料表.mdf. 會員資料刪除.aspx. 會員資料刪除.aspx. Procedure9. 圖 3-14. 管理者刪除會員資料系流程圖. 檔案名稱:會員基本資料.mdf 記錄格式:請參照表 3-1. 檔案名稱:會員資料刪除.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 會員編號. 文字. 8. (280,420). 2. 會員帳號. 文字. 8. (360,420). 3. 會員名稱. 文字. 8. (420,420). 4. 地址. 文字. 4. (520,420). 5. e-mail. 文字. 6. (670,420). 6. 刪除. 按鈕. 4×2. (240,420). 備註. 表 3-15 會員資料刪除 aspxr 記錄格式. 26. 逢甲大學 e-Paper (92學年度).

(33) 購物網站-以美容美髮材料為主題. 3.7.3 管理者新增商品資料 procedure10 此程序將管理者輸入得商品資料存入商品資料.mdf 中 22. 商品資料.mdf. 新增商品資料.aspx. 新增商品資料.aspx. Procedure10. 圖 3-15 管理者新增商品資料系流程圖. 檔案名稱:商品資料.mdf 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 備. 註. 商品編號. 數字. 4. 不可空白. 商品名稱. 文字. 10. 不可空白. 商品價格. 數字. 4. 不可空白. 商品數量. 數字. 4. 不可空白. 商品種類. 文字. 10. 不可空白. 商品說明. 文字. 50. 不可空白. 表 3-16 商品資料之記錄格式. 27. 逢甲大學 e-Paper (92學年度).

(34) 購物網站-以美容美髮材料為主題. 檔案名稱:新增商品資料.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 商品名稱. 文字. 8. (380,460). 2. 商品價格. 文字. 8. (380,490). 3. 商品數量. 文字. 8. (380,520). 4. 商品種類. 文字. 4. (380,550). 5. 商品說明. 文字. 6. (380,630). 6. 送出. 按鈕. 4×2. (600,730). 備註. 表 3-17 新增商品資料.aspx 記錄格式. 3.7.4 管理者更新商品資料 procedure11 此程序將商品資料從商品資料 mdf 中讀取出來，管理者選擇要刪除的商品，即將商品資料從商品資料.aspx 中刪除. 商品資料.mdf. 更新商品資料.aspx. Procedure10. 圖 3-16 管理者更新商品資料系流程圖. 28. 逢甲大學 e-Paper (92學年度).

(35) 購物網站-以美容美髮材料為主題. 檔案名稱:商品資料.mdf 記錄格式:請參照表 3-16 檔案名稱:更新商品資料.aspx 記錄格式: 序號. 欄位名稱. 資料型態. 欄位長度. 位. 置. 1. 商品名稱. 文字. 8. (170,400). 2. 商品價格. 文字. 8. (170,420). 3. 商品數量. 文字. 8. (170,440). 6. 刪除. 按鈕. 4×2. (500,370). 備註. 表 3-18 更新商品資料.aspx 記錄格式. 29. 逢甲大學 e-Paper (92學年度).

(36) 購物網站-以美容美髮材料為主題. 第四章系統實作 4.1 會員資料子系統 4.1.1 登入 1.指令動作: 登入後可執行會員功能. 圖 4-1 會員登入畫面. 30. 逢甲大學 e-Paper (92學年度).

(37) 購物網站-以美容美髮材料為主題. 2.演算法 : key in ( id , pass ) if ( click 登入 ) { SQL ( 讀取 id , pass ) if ( id , pass 符合) { 設定為登入 ; } } else { 顯示錯誤訊息 ; }. 31. 逢甲大學 e-Paper (92學年度).

(38) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-2 登入錯誤訊息. 32. 逢甲大學 e-Paper (92學年度).

(39) 購物網站-以美容美髮材料為主題. 4.1.2 新手註冊 1.指令動作: 新會員在此註冊，並在偶接受之後，進入註冊表單。. 圖 4-3 會員注意事項畫面. 圖 4-4 會員註冊畫面 33. 逢甲大學 e-Paper (92學年度).

(40) 購物網站-以美容美髮材料為主題. 2. 演算法 : if ( click 立即註冊 ) { 進入新增畫面 } 填寫會員資料 if ( click 送出 ) { if ( 資料格式正確 ) { 顯示註冊成功的訊息(你已成為會員) SQL ( 存入資料庫 ) } else { 顯示錯誤訊息 } } 34. 逢甲大學 e-Paper (92學年度).

(41) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-5 會員註冊成功畫面. 圖 4-6 會員註冊失敗畫面 35 逢甲大學 e-Paper (92學年度).

(42) 購物網站-以美容美髮材料為主題. 4.1.3 修改會員資料 1.指令動作: 輸入帳號、密碼後，按下修改資料，進入修改會員資料，但不允許修改帳號。. 圖 4-7 未登入修改畫面. 36. 逢甲大學 e-Paper (92學年度).

(43) 購物網站-以美容美髮材料為主題. 圖 4-8 修改會員資料畫面 2.演算法修改會員資料 if(click 送出) { If (資料正確) { SQL ( 存入資料庫 );} Else {顯示錯誤訊息;} } 37 逢甲大學 e-Paper (92學年度).

(44) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-9 顯示錯誤訊息. 圖 4-10 成功修改畫面 38. 逢甲大學 e-Paper (92學年度).

(45) 購物網站-以美容美髮材料為主題. 4.2 購物車子系統 4.2.1 購物區分類 1.執行指令: 將商品依照不同種類分類，以便利消費者搜尋要購買之商品。. 圖 4-11 購物區分類 2.演算法 : select 分類欄位 from 商品資料庫 SQL ( 搜尋資料庫中分類欄位的資料) 畫面顯示出符合條件的商品 39. 逢甲大學 e-Paper (92學年度).

(46) 購物網站-以美容美髮材料為主題. 4.2.2 將商品放入購物車 1.執行動作: 勾選要購買物品，放至購物車。. 圖 4-12 勾選商品放入購物車之畫面 2.演算法 : if ( 已登入會員 ) { 勾選商品 if ( click 放入購物車 ) { 40 逢甲大學 e-Paper (92學年度).

(47) 購物網站-以美容美髮材料為主題. 顯示成功的訊息(已成功將商品放入購物車) } } else { 顯示錯誤的訊息(未登入會員) }. 3.執行結果. 圖 4-13 商品成功放入購物車之畫面 41 逢甲大學 e-Paper (92學年度).

(48) 購物網站-以美容美髮材料為主題. 4.2.3 檢視購物車以及結帳 1.執行指令: 點選檢視購物車，可以看見放入購物車的商品，可以進行結帳或是刪除商品，可以在購物紀錄看到訂購的商品。. 圖 4-14 購物車畫面 2.演算法: if( click 刪除 ) { 將購物車內的商品刪除 SQL(. 刪除購物車資料庫內此商品資料). } 42 逢甲大學 e-Paper (92學年度).

(49) 購物網站-以美容美髮材料為主題. else if ( click 結帳 ) { 顯示成功訂購訊息 SQL (. 存入個人物品資料庫). SQL ( 清空購物車資料庫 ) } 3.執行結果. 圖 4-15 已成功訂購商品畫面. 43 逢甲大學 e-Paper (92學年度).

(50) 購物網站-以美容美髮材料為主題. 圖 4-16 查看個人物品畫面. 圖 4-17 刪除購物車資料畫面 44. 逢甲大學 e-Paper (92學年度).

(51) 購物網站-以美容美髮材料為主題. 4.3 會員賣物子系統 4.3.1 點選會員賣物區,你會看到各個會員在這賣物的商品. 圖 4-18 會員賣物區畫面. 45 逢甲大學 e-Paper (92學年度).

(52) 購物網站-以美容美髮材料為主題. 4.3.2 會員賣物 1. 指令動作: 填入賣物資訊. 圖 4-19 賣物商品登錄畫面. 圖 4-20 上傳圖片畫面 46. 逢甲大學 e-Paper (92學年度).

(53) 購物網站-以美容美髮材料為主題. 2. 演算法 : 會員賣物 if ( click 會員賣物 ) { 進入新增賣物畫面 } 填寫賣物資料 if ( click 送出 ) {. 進入上傳圖片畫面. if ( 資料格式正確 ) { 會員賣物區顯示賣物 SQL ( 存入資料庫 ) } Else{ 顯示錯誤訊息 }. 47. 逢甲大學 e-Paper (92學年度).

(54) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-21 會員賣物顯示畫面. 48. 逢甲大學 e-Paper (92學年度).

(55) 購物網站-以美容美髮材料為主題. 4.3.3 個人賣物刪除 1.指令動作: 勾選要刪除之物品。. 圖 4-22 賣物區畫面. 圖 4-23 進入個人賣物刪除畫面 49. 逢甲大學 e-Paper (92學年度).

(56) 購物網站-以美容美髮材料為主題. 2.演算法: 刪除賣物 if ( 已登入會員 ) { 勾選商品 if ( click 刪除賣物 ) { SOL(已從會員賣物資料表刪除) } } else { 顯示錯誤的訊息(未登入會員) }. 50. 逢甲大學 e-Paper (92學年度).

(57) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-24 個人賣物已刪除畫面. 51. 逢甲大學 e-Paper (92學年度).

(58) 購物網站-以美容美髮材料為主題. 4.4 管理者子系統 4.4.1 管理者登入 1.指令動作: 管理者輸入帳號、密碼。. 圖 4-25 輸入管理者帳號、密碼畫面. 52 逢甲大學 e-Paper (92學年度).

(59) 購物網站-以美容美髮材料為主題. 2. 演算法 : 管理者登入 key in ( amd_id , amd_pass ) if ( click 登入 ) { SQL ( 讀取 amd_id , amd_pass ) if ( id , pass 符合) { 登入管理者介面 ; } } else { 顯示錯誤訊息 ; }. 53. 逢甲大學 e-Paper (92學年度).

(60) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-26 管理者登入成功畫面. 54. 逢甲大學 e-Paper (92學年度).

(61) 購物網站-以美容美髮材料為主題. 4.4.2 新增商品上架 1.指令動作: 管理者登錄商品。. 圖 4-27 商品登錄畫面. 圖 4-28 管理者上傳圖片畫面 55. 逢甲大學 e-Paper (92學年度).

(62) 購物網站-以美容美髮材料為主題. 2.演算法 : 管理者新增商品 if ( click 會員賣物 ) { 進入新增賣物畫面 } 填寫賣物資料 if ( click 送出 ) {. 進入上傳圖片畫面. if ( 資料格式正確 ) { 會員賣物區顯示賣物 SQL ( 存入商品資料庫 ) } Else{ 顯示錯誤訊息 }. 56. 逢甲大學 e-Paper (92學年度).

(63) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-29 新增商品成功畫面. 57. 逢甲大學 e-Paper (92學年度).

(64) 購物網站-以美容美髮材料為主題. 4.4.3 刪除已上架物品 1.指令動作: 管理者刪除已上架物品。. 圖 4-30 進入管理者刪除物品畫面. 58. 逢甲大學 e-Paper (92學年度).

(65) 購物網站-以美容美髮材料為主題. 2.演算法: 管理者刪除物品 if ( 已登入管理者) { 勾選商品 if ( click 刪除賣物 ) { SOL(已從商品資料庫中刪除) } } else { 顯示錯誤的訊息(未登入管理者帳號) }. 59. 逢甲大學 e-Paper (92學年度).

(66) 購物網站-以美容美髮材料為主題. 3.執行結果. 圖 4-31 成功刪除畫面. 60. 逢甲大學 e-Paper (92學年度).

(67) 購物網站-以美容美髮材料為主題. 4.4.4 刪除會員資料 1. 指令動作: 刪除欲刪除之會員資料。. 圖 4-32 管理者刪除會員資料畫面. 2.演算法: 管理者刪除會員資料 if(click 刪除) 刪除此會員. 61. 逢甲大學 e-Paper (92學年度).

(68) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-33 成功刪除會員畫面. 62. 逢甲大學 e-Paper (92學年度).

(69) 購物網站-以美容美髮材料為主題. 4.4.5 查詢會員資料 1.指令動作: 可依會員之 id 來做查詢。. 圖 4-34 管理者輸入會員查詢畫面 2. 演算法: 管理者查詢會員 Key in (id) If(click 查詢) 顯示查詢畫面. 63. 逢甲大學 e-Paper (92學年度).

(70) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-35 管理者查詢結果畫面. 64 逢甲大學 e-Paper (92學年度).

(71) 購物網站-以美容美髮材料為主題. 4.5 留言板 1.指令動作: 輸入留言。. 圖 4-36 輸入留言畫面 2.演算法留言 Key in (留言資料) if(click 提文) 顯示到留言版 65. 逢甲大學 e-Paper (92學年度).

(72) 購物網站-以美容美髮材料為主題. 3.執行結果:. 圖 4-37 成功留言畫面. 66. 逢甲大學 e-Paper (92學年度).

(73) 購物網站-以美容美髮材料為主題. 第五章系統評估 5.1 說明本系統的評估方式主要是針對系統的功能以及操作介面進行評估，以期能讓使用者輕鬆的瀏覽網頁，便利使用者能迅速的掌握重要的商品資訊。以下是我們對各個子系統所提供的功能進行評估 5.2 會員基本資料子系統評估此子系統包括會員登入、註冊新會員、會員資料修改、會員資料查詢，提供良好的操作介面，但系統中資料傳遞的安全性仍然不足，這點是非常需要改善的。 5.3 購物車子系統評估此系統主要是將會員要購買之商品做整理，列出購買總金額，並將資料存入購物車資料檔中，結帳之後再將資料存入個人購物資料檔中，此系統是我們覺得最困難的地方，許多地方有待加強。 5.4 會員賣物子系統評估此系統提供會員將二手的美容美髮器材呈列在網頁上販賣，並對此商品作詳盡的說明，透過這系統提供會員一個交流的場所，缺點是，我們的系統沒有競標功能，只提供要賣物的會員留下連絡方式，供想購買的會員聯絡，這部分是我們需要再加強的地方。 67. 逢甲大學 e-Paper (92學年度).

(74) 購物網站-以美容美髮材料為主題. 5.5 管理者子系統評估此系統只供管理者登入使用，並可以新增、刪除購物區內的商品資訊，目前尚無對會員資料的管理功能，此處有待後續的加強補足。 5.6 系統的優缺點 1.優點方便性 : 我們網站提供了美容美髮材料的資訊及線上購物的功能，使會員不用親自去門市就能購得想要的商品簡易性 : 在此系統的網頁上，各種功能的操作都非常簡單易懂。 2.缺點處理方面 : 在網路上購買美容美髮商品，雖然十分方便，但是處理顧客的訂單，再將商品寄送到顧客手中可能要花費頗多的時間，導致服務的品質降低。功能方面 : 我們所提供的皆屬於基本必備的功能，還少了一些相關的附屬功能，例如線上諮詢服務、售後服務等。網路安全方面 : 因為線上購物涉及了許多私人資料的傳遞，我們對於這方面的安全性沒有作的很好。. 68. 逢甲大學 e-Paper (92學年度).

(75) 購物網站-以美容美髮材料為主題. 第六章結論 6.1 心得從當初開始找指導老師，然後選擇專題的題目，到現在已經有一段時間了，現在即將要發表專題了，在這期間曾經想過要更換使用新的工具和方法，不過後來還是堅持用原來的 asp.net、SQL2000 和 c#來作這個專題，雖然我們順利的完成了專題，但是由於我們對於 asp.net 和 SQL 的使用都不太了解，一切幾乎從頭開始到處找書籍來參考，漸漸地才了解到如何運用，再加上本身的惰性,導致專題的進度一拖再拖,在這作專題的期間真是讓我們吃盡了不少的苦頭。除此之外，在這專題期間讓我體會到組員之間的配合與溝通是相當重要的，因為彼此有不同的想法，可以說出來討論好好地溝通，一個團隊的分工合作是大家彼此互相配合的，彼此的工作都環環相扣，彼此的監督便變得粉重要，不過在監督方面我想我們還是必須加強的，所以大家的工作才會一拖再拖，但是這次的專題讓我們從無到有，學到了不少的東西，對我來是一個寶貴的經驗，對於我往後出社會應該會有蠻大助益。. 69. 逢甲大學 e-Paper (92學年度).

(76) 購物網站-以美容美髮材料為主題. 6.2 未來展望在做完系統評估之後，讓我們覺得系統並非相當的完善，與ㄧ些我們在網路上看到的大網站相比，在ㄧ些功能和排版以及網頁的美工方面是我們仍必須改進的地方，希望在日後有機會能夠改進，加強各個子系統的功能，讓這個系統能夠更好上手，接下來我們會以一些在網路上看到的大網站為目標，希望我們能夠作的跟她們一樣好或者甚至超越。. 70. 逢甲大學 e-Paper (92學年度).

(77) 購物網站-以美容美髮材料為主題. 參考資料 A. 參考書目 1.章立民，SQL SERVER 2000 中文版完全實戰，碁峰資訊， pp.250-300，2000 年 2. Smiley，c#學習經典，上奇科技，pp.140-300，2002 3. 楊宗誌，ASP.NET 入門與實作，文魁資訊，pp.10-350，2002 4. 李毅騁，ASP.NET 教學手冊，培生教育，pp.225-400，2002 B 參考網站 1. MicroSoft Asp.net 快速入門教學課程 http://cht.gotdotnet.com/QuickStart/aspplus/default.aspx? url=/quickstart/aspplus/doc/webtemplates.aspx 2. 藍色小舖 http://asp.database.net.tw 3. MIS2000ASP.NET http://www.taconet.com.tw/mis2000_aspnet. 71. 逢甲大學 e-Paper (92學年度).

(78)

購 物 網 站-以美容美髮材料為主題

購物網站-以美容美髮材料為主題