《PHP Web應(yīng)用開發(fā)案例教程》630-9（阮云蘭）教案 第34課 電子商務(wù)網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)、文件配置和前臺首頁設(shè)計(jì)

PAGE10PAGE10PAGE11PAGE11

課題電子商務(wù)網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)、文件配置和前臺首頁設(shè)計(jì)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）掌握數(shù)據(jù)庫設(shè)計(jì)的基本步驟和方法（2）掌握網(wǎng)站配置文件的設(shè)置素質(zhì)目標(biāo)：（1）緊跟時(shí)代發(fā)展，培養(yǎng)腳踏實(shí)地、不驕不躁的工作習(xí)慣（2）夯實(shí)理論基礎(chǔ)，強(qiáng)化實(shí)踐訓(xùn)練，提高專業(yè)技能，勇?lián)鷷r(shí)代使命教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：數(shù)據(jù)庫設(shè)計(jì)的基本步驟和方法教學(xué)難點(diǎn)：網(wǎng)站配置文件的設(shè)置教學(xué)方法案例分析法、問答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（38min）第2節(jié)課：→傳授新知（20min）→小組討論（15min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識【學(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識，增加學(xué)生的學(xué)習(xí)興趣考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】班干部報(bào)請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題：數(shù)據(jù)庫設(shè)計(jì)的邏輯結(jié)構(gòu)和物理結(jié)構(gòu)設(shè)計(jì)的作用是什么？通過問題導(dǎo)入，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（38min）【教師】通過學(xué)生的回答引入要講的知識，講解使用PHP進(jìn)行電子商務(wù)網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)的過程16.3數(shù)據(jù)庫設(shè)計(jì)數(shù)據(jù)庫設(shè)計(jì)，是對數(shù)據(jù)庫的邏輯結(jié)構(gòu)和物理結(jié)構(gòu)做出具體的規(guī)劃設(shè)計(jì)。為后面編碼、測試、運(yùn)行和維護(hù)階段網(wǎng)站數(shù)據(jù)的存儲做準(zhǔn)備。16.3.1數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)根據(jù)系統(tǒng)需求和目標(biāo)，以及系統(tǒng)功能結(jié)構(gòu)，總結(jié)出需要保存的數(shù)據(jù)信息，并將其轉(zhuǎn)化為原始數(shù)據(jù)形式。列出系統(tǒng)的實(shí)體及E-R圖，然后根據(jù)E-R圖創(chuàng)建數(shù)據(jù)表。?【教師】通過多媒體展示“數(shù)據(jù)庫E-R圖”圖片，并進(jìn)行介紹本電子商務(wù)網(wǎng)站的實(shí)體包括用戶實(shí)體、用戶詳情實(shí)體、商品實(shí)體、訂單實(shí)體、購物車實(shí)體和評價(jià)實(shí)體，它們的E-R圖如圖所示。16.3.2數(shù)據(jù)庫物理結(jié)構(gòu)設(shè)計(jì)?【教師】通過多媒體展示“數(shù)據(jù)庫物理結(jié)構(gòu)”圖片，并進(jìn)行介紹根據(jù)E-R圖，在圖形化管理工具phpMyAdmin中創(chuàng)建16個(gè)表，如圖所示。下面給出其中12個(gè)表的結(jié)構(gòu)信息，其他4個(gè)表將在后面用到時(shí)進(jìn)行介紹。1．yg_user（用戶表）?【教師】通過多媒體展示“用戶表結(jié)構(gòu)”圖片，并進(jìn)行介紹用戶表用于存儲用戶名、用戶密碼、用戶郵箱等基本信息，表結(jié)構(gòu)如圖16-10所示。2．yg_user_detail（用戶詳情表）?【教師】通過多媒體展示“用戶詳情表結(jié)構(gòu)”圖片，并進(jìn)行介紹用戶詳情表用于存儲用戶的詳細(xì)信息，與用戶表通過id關(guān)聯(lián)，表結(jié)構(gòu)如圖所示。3．yg_cats（分類表）?【教師】通過多媒體展示“圖書分類表結(jié)構(gòu)”圖片，并進(jìn)行介紹分類表用于存儲每個(gè)商品分類的詳細(xì)信息，表結(jié)構(gòu)如圖16-12所示。4．yg_goods（商品表）?【教師】通過多媒體展示“商品表結(jié)構(gòu)”圖片，并進(jìn)行介紹商品表用于存儲商品的詳細(xì)信息，表結(jié)構(gòu)如圖所示。5．yg_cart（購物車表）?【教師】通過多媒體展示“購物車表結(jié)構(gòu)”圖片，并進(jìn)行介紹購物車表用于存儲購物車的詳細(xì)信息，表結(jié)構(gòu)如圖所示。6．yg_orders（訂單表）?【教師】通過多媒體展示“訂單表結(jié)構(gòu)”圖片，并進(jìn)行介紹訂單表用于存儲訂單的詳細(xì)信息，表結(jié)構(gòu)如圖所示。7．yg_detail（訂單詳情表）?【教師】通過多媒體展示“訂單詳情表結(jié)構(gòu)”圖片，并進(jìn)行介紹每個(gè)訂單可以有多種商品，訂單詳情表用于存儲訂單中每種商品的詳細(xì)信息，表結(jié)構(gòu)如圖所示。8．yg_comment（評價(jià)表）?【教師】通過多媒體展示“評價(jià)表結(jié)構(gòu)”圖片，并進(jìn)行介紹評價(jià)表用于存儲評價(jià)的詳細(xì)信息，表結(jié)構(gòu)如圖所示。9．yg_commentreplay（評價(jià)回復(fù)表）?【教師】通過多媒體展示“評價(jià)回復(fù)表結(jié)構(gòu)”圖片，并進(jìn)行介紹評價(jià)回復(fù)表用于存儲評價(jià)回復(fù)的詳細(xì)信息，表結(jié)構(gòu)如圖16-18所示。10．yg_collect（收藏表）?【教師】通過多媒體展示“收藏表結(jié)構(gòu)”圖片，并進(jìn)行介紹收藏表用于存儲用戶收藏商品的信息，表結(jié)構(gòu)如圖所示。11．yg_img（輪播圖表）?【教師】通過多媒體展示“輪播圖表結(jié)構(gòu)”圖片，并進(jìn)行介紹輪播圖表用于存儲首頁輪播廣告圖的詳細(xì)信息，表結(jié)構(gòu)如圖16-20所示。12．yg_message（留言表）?【教師】通過多媒體展示“留言表結(jié)構(gòu)”圖片，并進(jìn)行介紹留言表用于存儲用戶下訂單時(shí)留言的詳細(xì)信息，表結(jié)構(gòu)如圖所示。【學(xué)生】聆聽、思考、記錄通過教師的講解和演示，使學(xué)生了解使用PHP進(jìn)行電子商務(wù)網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)的過程第二節(jié)課問題導(dǎo)入（5min）【教師】提出以下問題：每個(gè)項(xiàng)目的網(wǎng)站配置文件是一樣的嗎？【學(xué)生】思考、舉手回答通過問題導(dǎo)入，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過學(xué)生的回答引入新知，介紹在PHP框架中設(shè)置網(wǎng)站配置文件的方法16.4網(wǎng)站配置文件設(shè)置配置文件一般包括模板引擎標(biāo)簽和數(shù)據(jù)庫配置信息，在制作網(wǎng)站前首先需要設(shè)置網(wǎng)站的配置文件。代碼如下：<?phpreturnarray( //'配置項(xiàng)'=>'配置值' 'TMPL_L_DELIM' =>'<{', //模板引擎普通標(biāo)簽開始標(biāo)記'TMPL_R_DELIM' =>'}>', //模板引擎普通標(biāo)簽結(jié)束標(biāo)記 //數(shù)據(jù)庫設(shè)置'DB_TYPE' =>'mysqli', //數(shù)據(jù)庫類型'DB_HOST' =>'localhost', //服務(wù)器地址'DB_NAME' =>'yg_shop', //數(shù)據(jù)庫名'DB_USER' =>'root', //用戶名'DB_PWD' =>'123456', //密碼'DB_PORT' =>'3306', //端口'DB_PREFIX' =>'yg_', //數(shù)據(jù)庫表前綴 'SHOW_PAGE_TRACE' =>true, //顯示頁面Trace信息);16.5前臺首頁設(shè)計(jì)首頁需要合理布局，既要盡可能突出重點(diǎn)，又不能因?yàn)槟K太多而顯得雜亂無章。電子商務(wù)網(wǎng)站的前臺首頁如圖所示。?【教師】通過多媒體展示“網(wǎng)站前臺首頁”圖片，并進(jìn)行介紹廣告商品搜索商品列表商品列表分類導(dǎo)航廣告商品搜索商品列表商品列表分類導(dǎo)航由圖可以看出，首頁主要由以下4部分組成：商品搜索部分。廣告部分。商品分類導(dǎo)航部分。商品列表部分。本節(jié)只介紹前3部分的實(shí)現(xiàn)方法，第4部分的實(shí)現(xiàn)技術(shù)過于簡單，此處不再介紹，請讀者參考源代碼。16.5.1商品搜索的實(shí)現(xiàn)分頁是顯示數(shù)據(jù)時(shí)常用的技術(shù)，當(dāng)數(shù)據(jù)庫查詢結(jié)果遠(yuǎn)遠(yuǎn)超出計(jì)算機(jī)屏幕的顯示范圍時(shí)，分頁顯示可以合理地將數(shù)據(jù)呈現(xiàn)給用戶。ThinkPHP框架中有一個(gè)很強(qiáng)大的分頁類Page（位于“ThinkPHP\Library\Think”目錄下），此處使用該類對搜索結(jié)果進(jìn)行分頁。1．創(chuàng)建表單在公共文件夾Public中創(chuàng)建“header.html”文件，并在其中創(chuàng)建搜索表單。代碼如下： <formaction="__MODULE__/Search/index"method="get"onsubmit="returnfun()"> <inputtype="text"id="inputid"name="keyword"class="search-input"value=""> <inputclass="search-btn"type="submit"value="搜索"> <scripttype="text/javascript"> //如果沒有填寫搜索條件，則不執(zhí)行搜索動作functionfun(){varinputid=document.getElementById('inputid');ss=inputid.value;if(!ss){returnfalse;}}</script> </form>“header.html”文件包含在前臺的多個(gè)頁面中，所以將其放在公共文件夾中。2．調(diào)用分頁函數(shù)在SearchController控制器類的index()方法中添加以下代碼，先將符合搜索條件的數(shù)據(jù)總條數(shù)計(jì)算出來，再以總條數(shù)為參數(shù)實(shí)例化分頁類Page，此時(shí)還需注意的是要維持搜索條件，否則在分頁后的頁面中跳轉(zhuǎn)時(shí)，會導(dǎo)致搜索條件丟失，查詢出的數(shù)據(jù)不正確。//搜索處理$res=M('Goods');$keyword=$_GET['keyword'];$sear['goodsname']=array('like','%'.$keyword.'%');//導(dǎo)入分頁類import('Think.Page');//查詢數(shù)據(jù)條數(shù)$count=$res->where($sear)->count();//實(shí)例化分頁類$Page=newPage($count,8);//設(shè)置頁碼顯示$>setConfig('header','共%TOTAL_ROW%條記錄');$>setConfig('first','首頁');$>setConfig('last','末頁');$>setConfig('prev','上一頁');$>setConfig('next','下一頁');$>setConfig('theme',"共%TOTAL_ROW%條記錄%FIRST%%UP_PAGE%

%LINK_PAGE%%DOWN_PAGE%%END%");//分頁跳轉(zhuǎn)時(shí)維持搜索條件foreach($searas$key=>$val){$>parameter[]="$key=".urlencode($val[1]).'&';}//分頁按鈕顯示輸出$show=$>show();//進(jìn)行分頁數(shù)據(jù)查詢$val=$res->where($sear)->limit($>firstRow.','.$>listRows)->select();$this->assign('ugoods',$val);$this->assign('page',$show);$this->display()在控制器中使用分頁類的方法時(shí)，一定要使用命名空間，否則無法找到分頁類。此處在控制器類前面添加代碼“useThink\Page;”導(dǎo)入Page類。16.5.2首頁輪播廣告的實(shí)現(xiàn)用戶打開網(wǎng)站，首先映入眼簾的往往就是首頁的廣告，此處的廣告以輪播圖形式顯示。1．查詢數(shù)據(jù)要顯示輪播圖，首先需要查詢輪播圖所展示圖片的地址。代碼如下：$img=M('img'); //實(shí)例化img模型$imgs=$img->where('state="已發(fā)布"')->select(); //查詢狀態(tài)為“已發(fā)布”的圖片$this->assign('lubn',$imgs); //為模板變量賦值2．顯示圖片在模板中遍歷查詢出來的圖片地址，然后用JavaScript控制每張圖片的顯示與隱藏，以及間隔時(shí)間。代碼如下： <!輪播廣告> <divstyle="overflow:hidden;position:relative;width:100%;height:500px;top:-38px;"> <ulid="lubo"> <!--遍歷數(shù)組--> <foreachname='lubn'item='img'> <li> <divstyle="width:100%;height:500px;overflow:hidden;"> <imgsrc="__PUBLIC__/Upload/<{$img.img}>"width="100%"> </div> </li> </foreach> </ul> </div> <!--javascript代碼--> <script> $(function(){ $('#luboli').eq(0).css('display','block');//設(shè)置第一張圖片顯示 $('#luboli').eq(0).siblings().css('display','none');//設(shè)置除第一張圖片外其他圖片都隱藏//定義顯示函數(shù)functionshow(i){$("#luboli").eq(i).css('display','block');//設(shè)置第i張圖片顯示$("#luboli").eq(i).siblings().css('display','none');//設(shè)置除第i張圖片外其他圖片都隱藏}varlis=$('#luboli').length; //計(jì)算圖片總數(shù)vari=0;varinit=null;//定義定時(shí)函數(shù)functionauto(){init=setInterval(function(){//調(diào)用顯示函數(shù)，每4000毫秒循環(huán)一次show(i);i++;if(i==lis){i=0;}},4000);}//調(diào)用定時(shí)函數(shù)auto(); }) </script>16.5.3商品分類導(dǎo)航的實(shí)現(xiàn)商品分類導(dǎo)航常用的一個(gè)關(guān)鍵技術(shù)就是無限級分類。所謂無限級分類，就是對數(shù)據(jù)完成多次分類，如同一棵樹，從根開始，到主干、枝干、葉子……。實(shí)現(xiàn)無限級分類常用的方法有兩種：遞歸和操作指針，此處使用遞歸方式。1．定義分類函數(shù)在“ThinkPHP\Library\Org\Type\”目錄下新建文件“CatTree.class.php”，在其中定義函數(shù)getlist()，首先將查詢出來的數(shù)據(jù)進(jìn)行遍歷，判斷每個(gè)類別是否為頂級分類，如果是頂級分類，則以該類別的ID為父類ID，查詢此類別下面的子類別；再以該子類別為父類，向下查詢，直到每個(gè)類別下面的子類別為空，結(jié)束遞歸。代碼如下： publicstaticfunctiongetlist($allcats,$pid=0){ $tree=array(); //每次都聲明一個(gè)新數(shù)組用來存放子元素 foreach($allcatsas$v){ if($v[self::$pid]==$pid){ //匹配子類別 $v[self::$son]=self::getlist($allcats,$v[self::$id]); //遞歸獲取子類別 if($v[self::$son]==null){ //如果子元素為空則調(diào)用unset()函數(shù)進(jìn)行刪除，說明已經(jīng)到該分支的最后一個(gè)元素 unset($v[self::$son]); } $tree[]=$v; //將記錄存入新數(shù)組 } } return$tree;}2．調(diào)用函數(shù)在IndexController控制器類的index()方法中將全部類別查詢出來，然后調(diào)用前面定義的分類函數(shù)getlist()，并為模板變量賦值。代碼如下：//實(shí)例化Cats模型$cats=M('Cats');//查詢所有類別$allcats=$cats->field('catsid,catsname,pid,path')->select();//調(diào)用分類函數(shù)$type=CatTree::getlist($allcats);//為模板變量賦值$this->assign('type',$type);由于無限級分類函數(shù)放在第三方類庫中，為靜態(tài)方法，在控制器類中調(diào)用該方法時(shí)，需要使用“use”關(guān)鍵字導(dǎo)入相應(yīng)的類，格式為“useOrg\Type\CatTree;”。3．顯示類別在模板中遍歷顯示處理后的結(jié)果。代碼如下：<!--遍歷頂級分類--><foreachname="type"item="cats"><divclass="item"><h3class="t01_channelhome"><ahref="__MODULE__/Goodslist/index/catsid/<{$cats.catsid}>"><i></i><{$cats.catsname}><s>></s></a></h3><divclass="sub-item"><h4><ahref="__MODULE__/Goodslist/index/catsid/<{$cats.catsid}>"><{$cats.catsname}></a></h4><divclass="sub-list"><!--遍歷子分類--><foreachname="cats['subcat']"item="cat"><ahref="__MODULE__/Goodslist/index/soncatsid/<{$cat.catsid}>/catsname/<{$cat.catsname}>"target="_self"><{$cat.catsname}></a>