咖啡屋的網站設計與開發(fā)

1、畢業(yè)設計（論文）咖啡屋的網站設計與開發(fā)系 部： 信息技術系 專 業(yè)： 電子商務 學 號： 學生姓名： 指導教師姓名： 指導教師職稱： 摘要隨著因特網的飛速發(fā)展和信息經濟、網絡經濟等概念的提出，信息網絡漸漸影響著人們的生活方式。面對信息的來源，也不在是傳統(tǒng)的報刊、雜志、廣播等，而是通過零時空的網絡實現資源共享。因此，網站的設計與開發(fā)，成為了實現企業(yè)與顧客之間交流的重要紐帶。球愛咖啡屋網站是商業(yè)網站中展示和宣傳企業(yè)形象的一個重要方面。本網站通過設計開發(fā)，實現了后臺管理對產品信息和新聞信息的錄入、修改和刪除以及意見反饋的查看和刪除等功能，另外可以對后臺賬號進行相應的管理，以滿足安全性方面的要求。如何

2、有效地宣傳推廣自己的產品是各企業(yè)努力追求的目標，同時客戶足不出戶就可以了解到企業(yè)最新的產品信息，并可以查找、咨詢顧客所需的產品，更可以通過留言板，把自己的意見反饋給企業(yè)，幫助企業(yè)更好的改進發(fā)展，以滿足顧客需要。網站既達到了企業(yè)產品的宣傳與推廣，又實現了客戶與企業(yè)的相互溝通。關鍵字：網站設計 產品展示 新聞信息 后臺賬號管理 留言模塊目錄第1章引 言11.1課題的開發(fā)背景11.2選題的目的和意義1第2章系統(tǒng)分析22.1任務概述22.1.1組織結構圖22.1.2組織與業(yè)務的關系22.1.3實現目標32.2項目開發(fā)計劃3第3章概要設計43.1系統(tǒng)結構模塊43.2處理流程43.2.1主流程43.2.2

3、后臺管理流程53.3數據庫設計53.3.1注冊表53.3.2新聞表53.3.3留言表6第4章詳細設計74.1主模塊說明74.1.1簡要說明74.1.2測試數據74.1.3主界面設計74.2網站首頁簡介84.2.1簡要說明84.2.2產品內容94.3產品展示模塊94.3.1新聞模塊94.3.2產品界面設計104.4在線留言模塊114.4.1簡要說明114.4.2界面設計114.5聯系模塊124.5.1簡要說明124.5.2聯系界面設計12第5章系統(tǒng)測試145.1測試計劃145.1.1測試方案145.1.2測試項目145.2測試結果15第6章用戶手冊166.1系統(tǒng)主要功能166.2運行環(huán)境要求16

4、6.3系統(tǒng)安裝與初始化166.4運行說明16結 論18致 謝19參考文獻20溫州科技職業(yè)學院信息技術系 電子商務專業(yè)畢業(yè)設計第1章 引 言1.1 課題的開發(fā)背景隨著Internet的不斷普及，互聯網實現了世界范圍的互聯和信息共享，并已全面介入人類生產生活的方方面面，帶動著人類社會的飛速發(fā)展。越來越多的企業(yè)建立起自己的網站，以最快捷和方便的方法宣傳自己企業(yè)的形象和文化，擴大自己在業(yè)界的影響， 本設計所完成的網站是功能比較完善的網站，對網站的體系和結構的集約化安排，提供咖啡的最新信息，同時兼具時效性和全面性，網站同時為廣大喜愛咖啡者提供了一個相互交流的平臺。1.2 選題的目的和意義本網站以與時代接

5、軌和宣傳企業(yè)為目的，利用Internet進行對企業(yè)產品的宣傳與推廣，樹立企業(yè)的形象，讓客戶足不出戶就能及時了解產品信息，并能根據需要查找、咨詢自己所需的產品。本網站設計了意見反饋，通過意見反饋，客戶可以留下自己的聯系方式與意見，企業(yè)可以對其所發(fā)表的意見與其聯系。企業(yè)通過網站后臺，可以發(fā)布自己公司的動態(tài)，最新產品，以及客戶意見的查看。企業(yè)網站的開發(fā)意義在于讓訪客及時了解公司動態(tài)，招聘信息和企業(yè)產品?？蛻艨梢钥吹焦咀钚孪嚓P信息及產品信息，既達到企業(yè)產品的宣傳與推廣，又實現了客戶與企業(yè)之間的溝通。第2章 系統(tǒng)分析2.1 任務概述2.1.1 組織結構圖組織結構圖，如下圖所示：圖2- 1 組織結構圖球

6、愛咖啡屋網站首 頁種類介紹新 聞實物對照聯系我們在線留言2.1.2 組織與業(yè)務的關系 業(yè)務流程圖，如下圖所示：圖2- 2 業(yè)務流程圖網 民瀏覽公司首頁瀏覽公司新聞查看產品介紹瀏覽產品留言反饋瀏覽聯系方式2.1.3 實現目標球愛咖啡屋網站主要針對通過Internet來訪問該網站上的相關產品，主要實現的目標有：1、 管理員可以對公司產品、公司新聞等進行添加、修改和刪除。2、 管理員可以對賬號并進行密碼的修改和刪除。3、 訪客通過該網站可以瀏覽網站新聞，每周優(yōu)惠活動，每周特別推薦。4、 訪客通過該網站可以瀏覽公司最新新聞5、 訪客可以在網站上發(fā)表自己的留言與企業(yè)進行溝通。6、 訪客可以對相關產品的詳

7、細信息進行瀏覽。2.2 項目開發(fā)計劃項目實施進度安排：完成內容日期安排1.進行設計前的資料（圖片，信息，資料）收集和實際情況調查,落實畢業(yè)設計課題2011年12月2日2011年12月4日2.填寫開題報告2011年12月 5日2011年12月12日3.撰寫文檔前部分： (1)系統(tǒng)分析2011年12月12日2011年12月27日(2)概要設計 (3)詳細設計：主模塊2012年01月03日2012年01月21日注冊登錄模塊2012年01月25日2011年02月27日咖啡屋介紹模塊2012年01月25日2011年02月27日產品模塊2012年01月25日2011年02月27日企業(yè)文化模塊2012年01

8、月25日2011年02月27日留言板模塊2012年01月25日2011年02月27日聯系方式模塊2012年01月25日2011年02月27日4.編制各功能模塊程序2012年04月02日2012年04月08日5.撰寫文檔后部分：系統(tǒng)測式2012年04月10日2012年04月15日6.系統(tǒng)測試及運行2012年04月17日2012年04月20日7.文檔整合提交：向指導老師提交畢業(yè)設計2012年 04月22日2012年04月29日全部完成第3章 概要設計3.1 系統(tǒng)結構模塊1、產品管理模塊該模塊是為了能夠讓管理員能夠更好的對產品信息進行管理而設置的，其功能有產品信息的添加、編輯、刪除。2、新聞管理模塊

9、該模塊是為了能夠讓管理員能夠更好的對公司新聞進行管理而設置的，其功能有公司新聞的添加、編輯、刪除。3、在線留言管理模塊該模塊是讓企業(yè)知道客戶的反饋信息，如：客戶購產品之后的意見，以及客戶想要訂購的產品內容。4、賬號管理模塊初始的管理賬號，可以建立多個后臺管理賬號，方便多人添加信息，達到發(fā)布產品等信息的效率，并可以修改其密碼。5、聯系商家模塊客戶對產品有什么意見可以直接聯系商家進行解決。3.2 處理流程3.2.1 主流程1、建立與數據庫的連接。2、獲取網站設計。3、顯示首頁面。4、等待用戶輸入。如后臺登錄：進入后臺登錄頁面。如瀏覽：進入瀏覽頁面。如新聞信息管理：進入新聞信息管理頁面。如產品信息管

10、理：進入產品信息管理頁面。如后臺管理：進入后臺管理頁面。3.2.2 后臺管理流程1、要求管理員輸入用戶名及密碼。2、管理員身份登錄查驗3、賬號管理：進入管理員賬號管理頁面。修改密碼：進入修改密碼頁面。4、新聞管理：進入新聞管理頁面。添加新聞：進入添加新聞頁面。修改新聞：進入修改新聞頁面。刪除新聞：進入刪除新聞頁面。5、產品信息管理：進入產品管理頁面。添加產品：進入添加產品頁面。編輯產品：進入編輯產品頁面。刪除產品：進入刪除產品頁面。6、意見反饋管理：進入意見反饋管理頁面。3.3 數據庫設計3.3.1 注冊表表3- 1 注冊表字段名稱數據類型字段大小字段說明id自動編號長整型username文本

11、50姓名userpass文本50密碼email文本50郵箱3.3.2 新聞表表3- 2 新聞表 字段名稱數據類型字段大小字段說明id自動編號長整型新聞ID號news_subject文本50標題news_content備注內容news_faburen文本50發(fā)布人news_adddate日期/時間日期3.3.3 留言表 表3- 3 留言表字段名稱數據類型字段大小字段說明id自動編號長整型意見反饋表的主鍵xingming文本50名稱neirong文本50內容time文本50時間20第4章 詳細設計4.1 主模塊說明4.1.1 簡要說明簡要說明，如下表所示：表4- 1 主模塊表模塊名稱主模塊模塊代碼

12、名稱Index.asp啟動條件打開IE并輸入相應的網址功能顯示各模塊信息4.1.2 測試數據1、模塊是否正常工作流程。2、對輸入的查驗，包括輸入值的合法性與合理性檢驗。3、數據庫連接異常能否做出適當處理。4、數據庫數據異常時能否判斷，并給予合適處理。4.1.3 主界面設計球愛咖啡屋網站首頁種類介紹新聞實物對照聯系我們在線留言進入首頁界面設計，如下圖所示：圖4- 1 公司首頁4.2 網站首頁簡介4.2.1 簡要說明網站首頁簡要說明，如下表所示：圖4- 2 主模塊說明表模塊名稱種類介紹啟動條件在主模塊中按相應的文字鏈接條功能顯示產品的簡介內容4.2.2 產品內容產品內容設計效果，如下圖所示：圖4-

13、 3 產品簡介4.3 產品展示模塊4.3.1 新聞模塊產品展示簡要說明，如下表所示：表4- 2 新聞模塊說明表模塊名稱新聞啟動條件在主模塊中按相應的文字鏈接條新聞模塊效果，如下圖所示：圖4- 4 新聞模塊圖4.3.2 產品界面設計產品展示模塊的建立和維護功能的窗體效果也就是本網站的字頁它應該包括以下功能或條目結構：產品相關信息、產品添加、產品修改、產品刪除，其中在產品展示中有對產品進行分頁的功能。產品展示模塊的效果，如下圖所示：圖4- 5 產品展示4.4 在線留言模塊4.4.1 簡要說明在線留言簡要說明，如下表所示：表4- 3 公司新聞模塊說明表模塊名稱在線留言啟動條件在主模塊中按相應的文字鏈

14、接條功能在線給商家留言輸出顯示留言窗口該功能模塊的設立是為了能夠方便瀏覽者對網站提出自己的要求或者不滿之處。方便完善網站的不足。4.4.2 界面設計留言模塊，如下圖所示：圖4- 6 在線留言4.5 聯系模塊4.5.1 簡要說明意見反饋簡要說明，如下表所示：表4- 4 聯系我們模塊說明表模塊名稱聯系我們啟動條件在主模塊中按相應的文字鏈接條輸入聯系我們功能實現訪客與網站維護人員的溝通與意見反饋輸出給予瀏覽者商家的具體聯系方式4.5.2 聯系界面設計 聯系我們模塊效果，如下圖所示：圖4- 7 聯系我們第5章 系統(tǒng)測試5.1 測試計劃5.1.1 測試方案考慮到各種因素和條件的限制，本網站設計決定采用黑

15、盒測試方案。決定不考慮制作步驟的簡易，而是根據網站所需要的輸入數據的格式以及應該完成的功能，設計一些合法的測試用例和不合法的測試用例，對不合法的輸入和操作能夠正確地識別，以檢查系統(tǒng)是否能正確的發(fā)布新聞和產品以及填寫意見反饋的功能。5.1.2 測試項目1、后臺登錄測試后臺登錄界面，內容包括帳號、密碼、輸入。2、后臺管理員管理測試后臺所有管理員的功能，內容包括管理員對各功能模塊的管理，管理員賬戶的添加、刪除、修改等等。3、后臺新聞管理測試后臺新聞的管理，內容包括新聞的添加、修改、刪除。4、后臺產品管理測試后臺產品管理，內容包括分類的添加、修改、刪除。5、后臺的留言板管理測試后臺留言板的管理，內容包

16、括意見反饋的查看與刪除。6、產品的前臺操作測試前臺企業(yè)的產品瀏覽操作，內容包括產品的大圖、詳細介紹。7、新聞的前臺管理測試前臺公司新聞的瀏覽操作，內容包括新聞的標題、作者、發(fā)布時間、詳細內容。8、留言板的前臺操作測試前臺瀏覽者對網站意見的撰寫與提交。5.2 測試結果1、程序運行已經正確設定，安裝成功。2、程序代碼檢查，程序單位首部有程序說明和修改備注。3、功能測試，多畫面之間切換正確，功能鍵、觸發(fā)鍵、按鈕、菜單和選擇項功能正確。4、正確性測試，讀/寫/刪除操作結果正確，各種組合條件之查詢或報表正確。最終測試結果：測試結果顯示正常。第6章 用戶手冊6.1 系統(tǒng)主要功能本系統(tǒng)的設計主要是為了宣傳企

17、業(yè)文化，樹立良好的企業(yè)形象，展示公司產品，讓每位瀏覽者能很好的在網上瀏覽本網站，找到自己所需的產品和信息。本系統(tǒng)提供全免費的服務，如果你支持本站你可以在網站上發(fā)表對網站的評論以及給我們一些建設性的建議。本系統(tǒng)的實現也為當今社會中的一部分足不出戶的人提供了一種方便的途徑。6.2 運行環(huán)境要求操作系統(tǒng) WindowsXP或Windows2000以上配置CPU：PIV以上內存：64MB硬盤：160G以上開發(fā)工具 ASP，Photoshop , Flash8，Macromedia Dreamweaver 8數據庫系統(tǒng) Access 20036.3 系統(tǒng)安裝與初始化該系統(tǒng)操作簡單，首先配置好服務器,將所

18、有文件放入服務器的目錄下，就可以運行了。安裝步驟如下： 1、打開IIS服務器進行設置，如果沒有IIS，請先安裝IIS 5.0版本以上。2、在安裝、設置完IIS后就可以瀏覽網頁了，瀏覽有兩種方式，一種是直接在IIS服務器的右欄的文件中找到那個index.asp文件，右擊選擇瀏覽。還有一種方式是打開IE在地址欄里輸入localhost/index.asp就可以打開網頁首頁了。6.4 運行說明在進入網站后瀏覽者就可以看到網站的首頁其設計效果。在此頁面中瀏覽者可以瀏覽flash、網站欄目等等。如果瀏覽者想看看所有的產品只要點擊欄目上的“案例展示”便可實現，如果想看產品的詳細介紹或者大圖只要點擊產品的圖

19、片即可。如果瀏覽者對本網站有什么意見或好的建設性問題，可以點擊欄目上的“聯系我們”，進行深入的溝通。最后對支持本系統(tǒng)的人和瀏覽本網站的瀏覽者表示忠心的感謝！你們的支持與存在是我們最大的動力，請在瀏覽在的同時不要忘了給我們提一些建設性的意見！以便我們能夠更好的為你們提供更優(yōu)質的服務。 結 論畢業(yè)設計是考驗我們大學這三年來的所學，它要求我們將大學這三年來所學到的知識能夠融會貫通、熟練應用，并要求我們能夠理論聯系實際，培養(yǎng)我們的綜合運用能力以及解決實際問題的能力。這次設計讓我感受頗深，真正體會到了在整個過程中的無奈與快樂。1.確定設計方向。這一點很重要，萬事開頭難，在開始的時候我就沒有很好的進入狀態(tài)

20、。選題下來的時候我有很多的猶豫，考慮了很長時間才知道自己要做什么。把整體思路理清楚了，這樣你才能按照你最初的計劃堅定的走下去。2.頻繁與同學討論。剛開始做的時候進度很慢，常常因為一個數據庫連接。搞得昏頭昏腦。網站建設的一半的時候才發(fā)現很多同學的畢業(yè)設計都差不多快要完成了，這時候心里就開始急了，就怕進度趕不上。之后才發(fā)現有問題一定要開頭多問，多問老師，多問同學，不能自己悶頭做，方向偏了仍不知道，多把自己的想法和思路告訴老師和同學們?！芭杂^者清”，自己在設計網站時可能看不到不足之處，但是旁人卻能一眼就分的出好與壞，這時候多聽別人的意見與建議對我來說很有必要。3.越挫越勇。做畢業(yè)設計，前面前臺都還好

21、說，基本上靜態(tài)頁面不會出現什么錯誤只要美觀就好，可是后臺有關數據庫的問題就大了，常常被搞的脾氣暴躁，還會出現很多錯誤，沒辦法，只能自己慢慢調試解決所以的問題。4.越來越緊的狀態(tài)，尤其是最后的那幾天。畢業(yè)設計越到最后階段，越要有毅力和狀態(tài)，不能前緊后松，覺得前面做了不少，后面可以放松了。在制作畢業(yè)設計時也遇到了一些困難。由于這是我們第一次寫畢業(yè)文章，沒有任何經驗，對于此文章的格式、要求和內容都一無所知，在查詢了大量的書籍后才有了模糊概念。所以在此篇文章中不免會有些缺點。文章提交的前幾天，要不厭其煩的檢查正文，包括內容，格式等。畢業(yè)設計為我們即將踏入社會之前提供了一次鍛煉的舞臺，同時我也相信會在我

22、以后的人生道路上帶來很多的幫助。經過開發(fā)這個網站系統(tǒng)，這不僅僅是一次畢業(yè)設計的完成，而是在這過程中，所有的問題要自已去面對，自已去解決。由于我在這個月已進入實習階段，時間等各方面也比較倉促，所以這次的畢業(yè)設計做的淺顯，和同學設計的設計比較之后，當然仍有很多不足的地方，但這是我一個人第一次獨立的完成，不但鍛煉了自己的開發(fā)能力，同時也學到了很多，讓我受益匪淺。致 謝在論文即將完成之際，想到之前從不知道畢業(yè)論文怎么寫，到開始進入課題到論文的完成，再到順利完成了畢業(yè)設計，傾注了太多的心血和時間，球愛咖啡屋網站的設計與開發(fā)的完成，意味著大學生活即將結束。在大學階段，我在學習上和思想上都受益非淺，這除了自身的努力外，與各位老師、同學和朋友的關心、支持