美食社區(qū)網(wǎng)站的設(shè)計與實現(xiàn)

摘要：隨著越來越多的人接受了電子商務(wù)這種便捷、快速的交易形式，美食類網(wǎng)站的順勢而出很快受到了大家的歡迎。

關(guān)鍵詞：美食社區(qū)網(wǎng)站；設(shè)計；開發(fā)

中圖分類號：TP311.52 文獻(xiàn)標(biāo)識碼：A 文章編號：1007-9599 （2012） 20-0000-02

1 概述

1.1 美食社區(qū)的市場趨勢及優(yōu)勢

美食社區(qū)可充通過色彩、圖片、說明、設(shè)置動畫加強了產(chǎn)品了宣傳，大大達(dá)到了餐飲業(yè)的“色型”要求。實現(xiàn)產(chǎn)品管理方便，起到立竿見影的效果，不用因為更改菜色而重新印刷。只要在后臺鼠標(biāo)輕輕一點，全線馬上更新。采用B/S模式，客戶無須安裝第三方軟件，能上網(wǎng)尋找菜譜、食材和網(wǎng)上購物，甚至可以利用手機上網(wǎng)，使操作更加簡便。避免現(xiàn)實生活中因為尋找相關(guān)信息的費力，優(yōu)化服務(wù)。采用會員制度，營銷手段更是利用得淋漓盡致。

2 系統(tǒng)開發(fā)語言及技術(shù)

2.1 系統(tǒng)開發(fā)語言

2.1.1 開發(fā)語言—PHP

PHP，是英文超級文本預(yù)處理語言Hypertext Preprocessor的縮寫。PHP 是一種 HTML 內(nèi)嵌式的語言，是一種在服務(wù)器端執(zhí)行的嵌入HTML文檔的腳本語言，語言的風(fēng)格有類似于C語言，被廣泛的運用。PHP全名為 Personal Home Page，于1994年由Rasmus Lerdorf創(chuàng)建，剛剛開始是Rasmus Lerdorf 為了要維護(hù)個人網(wǎng)頁而制作的一個簡單的用Perl語言編寫的程序。

2.1.2 開發(fā)語言—HTML

HTML（Hyper Text Markup Language超文本標(biāo)記語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。與常見的字處理文件不同，Web頁以超文本標(biāo)識語言編排格式。它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。

2.1.3 開發(fā)語言—JavaScript

JavaScript是1995年由美國Netscape公司為Navigator2.0瀏覽器的應(yīng)用而發(fā)明的。它是寫在HTML文件中的一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，當(dāng)用戶在客戶端的瀏覽器中顯示該網(wǎng)頁時，瀏覽器就會執(zhí)行JavaScript程序，讓用戶通過交互式的操作變換網(wǎng)頁的顯示內(nèi)容，以實現(xiàn)HTML語言所不能實現(xiàn)的一些功能。

2.2 系統(tǒng)開發(fā)工具及插件

2.2.1 開發(fā)工具—MYSQL

MySQL是一種關(guān)聯(lián)數(shù)據(jù)庫管理系統(tǒng)，關(guān)聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)。這樣就增加了速度并提高了靈活性。MySQL的SQL“結(jié)構(gòu)化查詢語言”。SQL是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。

2.2.2 開發(fā)工具—Dream weaver MX

Macromedia公司的Dream weaver自問世以來備受網(wǎng)頁設(shè)計專業(yè)人士的青睞，被譽為“網(wǎng)頁三劍客之一”。經(jīng)過多年的改進(jìn)，Macromedia公司又推出了新版本：MX系列的Dream weaver。Dream weaver MX主要負(fù)責(zé)網(wǎng)頁版式設(shè)計，網(wǎng)頁編輯制作。

2.2.3 開發(fā)插件—WampServer

WampServer是Apache Web服務(wù)器、PHP解釋器以及MySQL數(shù)據(jù)庫的整合軟件包。免去了開發(fā)人員將時間花費在繁瑣的配置環(huán)境過程，從而騰出更多精力去做開發(fā)。

3 系統(tǒng)總體設(shè)計

3.1 需求分析

美食社區(qū)網(wǎng)站提供了一個成本較低的運營方式。為廣大群眾提供了豐富多彩的菜單選擇和直接方便的超市購物。尤其是白領(lǐng)、大學(xué)生、高中生和對計算機操作相對比較熟的人，美食社區(qū)網(wǎng)站也為企業(yè)提供了一個良好的生存環(huán)境。

3.2 系統(tǒng)功能

前臺功能主要包括客戶進(jìn)入網(wǎng)站后進(jìn)行的相應(yīng)操作。首先，客戶需要注冊會員登錄；其次，會員注冊成功后，以會員身份登錄網(wǎng)站，則可以進(jìn)行會員信息修改與完善、查詢菜譜、查詢食材及營養(yǎng)分布、超市購物、網(wǎng)站留言等功能。

后臺功能主要介紹系統(tǒng)管理員登錄網(wǎng)站后臺進(jìn)行的相應(yīng)操作。首先，管理者需登錄后臺網(wǎng)站。其次，登錄成功后，可進(jìn)行系統(tǒng)用戶管理、前臺會員管理、食譜類別管理、食材類別管理、超市類別管理等。

購物及管理流程圖（如圖3-1）介紹了用戶從開始購物到網(wǎng)站后臺管理者查看訂單，實現(xiàn)送貨，更改訂單狀態(tài)的整個過程，也是整個超市購物的運作過程。

業(yè)務(wù)流程圖（如圖3-2）介紹了網(wǎng)站用戶權(quán)限的邏輯結(jié)構(gòu)。會員與非會員均可以查詢食譜和食材、欣賞美食畫報。但只有會員可以超市購物，非會員只有在注冊為會員的情況下才可以進(jìn)行網(wǎng)上購物活動。

4 系統(tǒng)功能模塊分析

4.1 數(shù)據(jù)庫連接模塊

專門獨立一頁面除了作為進(jìn)行數(shù)據(jù)庫連接功能的實現(xiàn)，同時寫入系統(tǒng)常用的幾個函數(shù)，其目的是方便以后其它頁面的功能實現(xiàn)時能直接調(diào)用此頁面，而不需反復(fù)寫入代碼，提高效率。函數(shù)的編寫主要是用PHP來實現(xiàn)的。conn_mysql.php文件作為連接數(shù)據(jù)庫的調(diào)用文件。

頁面conn_mysql.php：

<？php

$conn = @ mysql_connect（\"localhost\"， \"root\"， \"\"） or die（\"數(shù)據(jù)庫鏈接錯誤\"）；

mysql_select_db（\"myweb\"， $conn）；

mysql_query（\"set names 'GBK'\"）； //使用GBK中文編碼；

？>

4.2 登錄與注冊模塊。用戶的登錄與注冊實現(xiàn)了與Ajax的連接，Ajax作為連接前臺和后臺的中介，提高了用戶注冊和登錄的效率和準(zhǔn)確性。為用戶提供了友好的界面。采用了PHP和JavaScript語言編寫。注冊為該網(wǎng)站會員可有資格上傳自己的菜譜與他人分享，可以評價和收藏其他滿意的菜譜。而作為該網(wǎng)站的普通會員只可查閱食材和與食材相關(guān)的菜譜，不能參與會員獨有的權(quán)利。

4.3 菜譜模塊。用戶可直接在菜譜頁面查看菜譜信息包括菜譜圖示以及發(fā)布此菜譜的用戶等。均采用PHP和JavaScript語言編寫。

菜譜模塊具體的邏輯結(jié)構(gòu)是：將所有上傳于數(shù)據(jù)庫的菜譜根據(jù)關(guān)鍵詞分類，通過分類將它們大致分類為食材類、菜品類、特色、口味和烹飪方法。用戶可以根據(jù)自己的喜好方便快捷地根據(jù)這些標(biāo)簽和關(guān)鍵字找到自己所想要的菜譜。

單擊所列出的常用標(biāo)簽，即可查找用該食材所做成的菜譜。例如，我們想找到用雞蛋這個食材所做的相關(guān)菜譜，即可單擊“雞蛋”這個標(biāo)簽。

菜譜模塊的主頁還顯示了熱門的菜譜。熱門菜譜的評價依據(jù)是根據(jù)該菜譜的收藏數(shù)量和評論數(shù)量達(dá)到一定的數(shù)值以上，方可顯示出來。該頁面菜譜的顯示的菜譜圖片采用了不固定長度的隨機方法實現(xiàn)，如$height=rand（60，100）/100；該語句可以實現(xiàn)圖片長度在最大值為280px的0.6倍至1倍之間隨機變動。這樣使頁面靈活可變，吸引用戶眼球。

4.4 食菜模塊。該模塊旨在為用戶提供豐富的食材信息，方便用戶根據(jù)家有食材尋找菜譜。首先，食材頁面顯示了所有的石材分類。

其次，若想查找有關(guān)“雞蛋”的食譜做法，可以單擊“蛋類“的食材分類，將現(xiàn)實蛋類這個大框架下的具體小分類。

最后，若想查看雞蛋的信息，單擊“雞蛋”這個食材即可。

4.5 超市模塊。首先，用戶可以瀏覽超市物品。根據(jù)所列出產(chǎn)品，可以獲得改產(chǎn)品的名稱、產(chǎn)地、編號、凈重、評分、價格、折扣等信息，也可通過分類榜單快速找到產(chǎn)品。

其次，用戶可以把想買的物品加入收藏夾中，以便最后一起支付購買。

4.6 上傳菜譜模塊。對已經(jīng)注冊為會員的用戶可有權(quán)限上傳自己的菜譜與他人共享。所須填寫的信息有這道菜的名稱、餐飲時間、制作難度、消耗時間、主料、輔料圖片、制作步驟和標(biāo)簽。菜譜可以選擇自創(chuàng)或是轉(zhuǎn)載。主料、輔料和標(biāo)簽均提示用戶詞與詞之間用空格隔開，目的是方便編程者從今后從數(shù)據(jù)庫調(diào)用信息，收集和分類標(biāo)簽，使用戶可以方便快捷地根據(jù)標(biāo)簽、食材、主料、輔料查找相關(guān)菜譜。

5 網(wǎng)站的建立與運行環(huán)境

5.1 網(wǎng)站的建立與測試

在實現(xiàn)了整個美食社區(qū)的系統(tǒng)功能之后，需要建立一個網(wǎng)站對其進(jìn)行測試，具體步驟如下：

（1）首先確保安裝了WEB服務(wù)器，比如Apache，IIS等，本系統(tǒng)使用WampSever。（2）本網(wǎng)站上所有的文件復(fù)制到www文件夾下。（3）設(shè)置本網(wǎng)站的啟動默認(rèn)文檔為index.php文件。這樣只要在IE地址欄中輸入http：//localhost/mywebb/index.php即可登錄該網(wǎng)站的首頁了。

5.2 運行環(huán)境

網(wǎng)站均使用PHP動態(tài)網(wǎng)頁發(fā)布技術(shù)開發(fā)，并使用SQL數(shù)據(jù)庫管理系統(tǒng)存放、維護(hù)網(wǎng)站的數(shù)據(jù)資料。因此，配置本網(wǎng)站需要滿足以下配置要求：

（1）操作環(huán)境：VISTA。（2）WEB服務(wù)器。（3）數(shù)據(jù)庫服務(wù)器。（4）客戶端IE、Firefox