《PHP Web應(yīng)用開(kāi)發(fā)案例教程》630-9（阮云蘭）教案 第35課 電子商務(wù)網(wǎng)站注冊(cè)和商品詳情模塊設(shè)計(jì)

PAGE6PAGE6PAGE7PAGE7

課題電子商務(wù)網(wǎng)站注冊(cè)和商品詳情模塊設(shè)計(jì)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握商品詳情模塊的實(shí)現(xiàn)方法（2）掌握位置導(dǎo)航和購(gòu)物車的實(shí)現(xiàn)方法素質(zhì)目標(biāo)：（1）夯實(shí)理論基礎(chǔ)，強(qiáng)化實(shí)踐訓(xùn)練，提高專業(yè)技能，勇?lián)鷷r(shí)代使命（2）提高職業(yè)素養(yǎng)，提升職業(yè)競(jìng)爭(zhēng)力教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：商品詳情模塊的實(shí)現(xiàn)方法教學(xué)難點(diǎn)：位置導(dǎo)航和購(gòu)物車的實(shí)現(xiàn)方法教學(xué)方法案例分析法、問(wèn)答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（23min）→課堂實(shí)訓(xùn)（15min）第2節(jié)課：→傳授新知（20min）→小組討論（15min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)【學(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，使學(xué)生預(yù)習(xí)本節(jié)課要學(xué)習(xí)的知識(shí)，增加學(xué)生的學(xué)習(xí)興趣考勤（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：網(wǎng)站的注冊(cè)登錄一般是怎樣的？通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（23min）【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解在PHP框架中開(kāi)發(fā)電子商務(wù)網(wǎng)站的注冊(cè)模塊的過(guò)程16.6注冊(cè)模塊設(shè)計(jì)網(wǎng)站中的注冊(cè)模塊都大同小異，本網(wǎng)站的注冊(cè)頁(yè)面如圖所示。由于第15章已介紹過(guò)注冊(cè)模塊的實(shí)現(xiàn)過(guò)程，此處不再贅述，只重點(diǎn)介紹郵箱驗(yàn)證的實(shí)現(xiàn)過(guò)程。?【教師】通過(guò)多媒體展示“注冊(cè)頁(yè)面”圖片，并進(jìn)行介紹郵箱驗(yàn)證就是在注冊(cè)賬號(hào)時(shí)需要填入郵箱地址，單擊“立即注冊(cè)”按鈕后，系統(tǒng)會(huì)將激活鏈接發(fā)送至用戶填寫(xiě)的郵箱，用戶需要通過(guò)激活鏈接將賬號(hào)激活后才能登錄系統(tǒng)。具體實(shí)現(xiàn)過(guò)程如下：?【教師】演示系統(tǒng)會(huì)將激活鏈接發(fā)送至用戶填寫(xiě)的郵箱的操作（1）下載PHPMailer壓縮包，并將其解壓到“ThinkPHP\Library\Vendor”第三方類庫(kù)擴(kuò)展目錄下，下載地址為/PHPMailer-Codeworx-Technologies/

download/。（2）在“php.ini”文件中開(kāi)啟extension=php_openssl.dll擴(kuò)展?！ㄔ斠?jiàn)教材）?【學(xué)生】觀看、理解、記憶【學(xué)生】聆聽(tīng)、思考、記錄通過(guò)教師的講解和演示，使學(xué)生了解在PHP框架中開(kāi)發(fā)電子商務(wù)網(wǎng)站的注冊(cè)模塊的過(guò)程課堂實(shí)訓(xùn)（15min）【教師】組織學(xué)生以小組為單位，在PHP中進(jìn)行設(shè)計(jì)注冊(cè)模塊的操作【學(xué)生】在PHP中進(jìn)行設(shè)計(jì)注冊(cè)模塊的操作，先完成的學(xué)生幫助本組其他學(xué)生完成任務(wù)【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)課堂實(shí)訓(xùn)和小組互助，幫助學(xué)生更好地掌握課上所學(xué)知識(shí)第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：在一些常見(jiàn)的購(gòu)物網(wǎng)站中，商品詳情頁(yè)一般包含有哪些內(nèi)容？【學(xué)生】思考、舉手回答通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過(guò)學(xué)生的回答引入新知，介紹PHP開(kāi)發(fā)電子商務(wù)網(wǎng)站的商品詳情模塊的過(guò)程16.7商品詳情模塊設(shè)計(jì)單擊商品列表中的商品圖片，可打開(kāi)商品詳情頁(yè)，如圖16-24所示。商品詳情頁(yè)展示商品的詳細(xì)信息，包括現(xiàn)價(jià)、原價(jià)、庫(kù)存、目錄和評(píng)價(jià)等，用戶可以將商品加入購(gòu)物車或收藏。?【教師】通過(guò)多媒體展示“圖書(shū)詳細(xì)信息頁(yè)”圖片，并進(jìn)行介紹由圖可以看出，除商品信息外，頁(yè)面左上角還顯示了當(dāng)前頁(yè)面在網(wǎng)站中的位置信息。本節(jié)重點(diǎn)介紹該功能和購(gòu)物車的實(shí)現(xiàn)技術(shù)。位置導(dǎo)航位置導(dǎo)航16.7.1位置導(dǎo)航的實(shí)現(xiàn)一個(gè)人性化的網(wǎng)站設(shè)計(jì)，通常會(huì)在每個(gè)頁(yè)面顯示用戶當(dāng)前在網(wǎng)站中的位置，這樣就用到了面包屑導(dǎo)航。面包屑導(dǎo)航一般顯示在頁(yè)面左上角，在表現(xiàn)形式上，就像通往目標(biāo)的最直觀的路線。其主要作用有以下幾點(diǎn)：（1）讓用戶了解當(dāng)前頁(yè)面在整個(gè)網(wǎng)站中的位置。（2）體現(xiàn)網(wǎng)站的架構(gòu)層級(jí)，能夠幫助用戶快速學(xué)習(xí)和了解網(wǎng)站內(nèi)容與組織方式，從而形成良好的位置感。（3）提供返回各個(gè)層級(jí)的快速入口，方便用戶操作。面包屑導(dǎo)航是一種基于網(wǎng)站層次信息的顯示方式，表示當(dāng)前頁(yè)面在導(dǎo)航層次結(jié)構(gòu)中的位置，來(lái)源于格林童話中使用面包屑指示主人公回家的故事情節(jié)。1．定義面包屑函數(shù)此處使用面包屑導(dǎo)航實(shí)現(xiàn)對(duì)商品位置的導(dǎo)航。在Controller控制器基類中定義面包屑函數(shù)now_here()，首先以商品所屬的分類ID（catsid）為條件查詢此類別的詳細(xì)信息，然后判斷此類別的父類ID是否為“0”，如果為“0”，說(shuō)明此類別就是頂級(jí)類別；如果不為“0”，調(diào)用get_up_levels()函數(shù)繼續(xù)查詢上一級(jí)類別，直到頂級(jí)類別，最后以“首頁(yè)”開(kāi)頭，將每一層級(jí)通過(guò)“>”符號(hào)連接起來(lái)。代碼如下： /** *面包屑導(dǎo)航 *@paraminteger$catsid分類ID *@returnstring */ protectedfunctionnow_here($catsid){//實(shí)例化cats模型$cat=M("Cats");//定義變量$here='<ahref="'.__MODULE__.'/Index/index">首頁(yè)</a>';//查詢商品的分類ID、類別名和父類ID$uplevels=$cat->field("catsid,catsname,pid")->where("catsid=$catsid")->find();//判斷父類ID是否為0，如為0，則為頂級(jí)分類if($uplevels['pid']!=0){//如果不為0，調(diào)用get_up_levels()方法$here.=$this->get_up_levels($uplevels['pid']);}//拼接導(dǎo)航$here.='><ahref="'.__MODULE__.'/Goodslist/index/soncatsid/'.$uplevels['catsid'].'">'.$uplevels['catsname']."</a>";return$here; } /** *面包屑導(dǎo)航 *@paraminteger$id父類ID *@returnstring */ protectedfunctionget_up_levels($id){ $cat=M("Cats");$here='';$uplevels=$cat->field("catsid,catsname,pid")->where("catsid=$id")->find();$here.='><ahref="'.__MODULE__.'/Goodslist/index/catsid/'.$uplevels['catsid'].'">'.$uplevels['catsname']."</a>";if($uplevels['pid']!=0){$here=$this->get_up_levels($uplevels['pid']).$here;}return$here; }2．調(diào)用函數(shù)將商品的分類ID（catsid）做為參數(shù)，調(diào)用前面定義的面包屑函數(shù)now_here()，并將商品名添加到導(dǎo)航的末尾。代碼如下：//調(diào)用父類中的方法$here=$this->now_here($goodsdetail['catsid']);//將商品名添加到導(dǎo)航的末尾$here.="><ahref='#'>$goodsdetail[goodsname]</a>";//為模板變量賦值$this->assign('here',$here);16.7.2購(gòu)物車的實(shí)現(xiàn)電子商務(wù)系統(tǒng)中的購(gòu)物車與實(shí)際生活中的購(gòu)物車功能基本相同，都用于暫時(shí)保存用戶挑選的商品，如圖所示。購(gòu)物車模塊主要包括添加所選商品、查看商品詳情、刪除購(gòu)物車中指定商品和清空購(gòu)物車，本節(jié)只介紹添加商品的實(shí)現(xiàn)過(guò)程。?【教師】通過(guò)多媒體展示“購(gòu)物車頁(yè)面”圖片，并進(jìn)行介紹1．使用Ajax傳遞數(shù)據(jù)在商品詳情模板頁(yè)中編寫(xiě)Ajax程序，實(shí)現(xiàn)用戶單擊“加入購(gòu)物車”按鈕后，執(zhí)行該程序，將商品ID和購(gòu)買數(shù)量發(fā)送到控制器中。代碼如下：//加入購(gòu)物車 functionaddCart(id){//獲取商品的數(shù)量，賦值給變量mvarm=$("#number").val();$.ajax({//定義urlurl:"__MODULE__/Cart/ajax",//數(shù)據(jù)的提交方式type:"post",//返回?cái)?shù)據(jù)的格式dataType:"json",//需要提交的數(shù)據(jù)data:{'id':id,'m':m},//提交成功后對(duì)返回?cái)?shù)據(jù)進(jìn)行判斷success:function(data){if(data==0){alert("添加失敗");returnfalse;}else{alert("添加成功");}}});returntrue; }Ajax（asynchronousJavaScriptandXML，異步JavaScript和XML）是一種用于創(chuàng)建更好更快，以及交互性更強(qiáng)的Web應(yīng)用程序技術(shù)。它使用JavaScript向服務(wù)器提出請(qǐng)求，并處理響應(yīng)，而不阻塞用戶。其核心對(duì)象為XMLHTTPRequest，通過(guò)該對(duì)象，可在不重載頁(yè)面的情況下與Web服務(wù)器交換數(shù)據(jù)，即在不刷新整個(gè)頁(yè)面的情況下，產(chǎn)生局部刷新的效果。這樣不僅有效提高了用戶體驗(yàn)度，還最大限度地減少了冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能。2．處理數(shù)據(jù)在CartController控制器類中定義函數(shù)ajax()，首先對(duì)Ajax提交的數(shù)據(jù)進(jìn)行處理；然后判斷該商品是否存在購(gòu)物車中，如果存在，只增加商品的數(shù)量，否則就在購(gòu)物車中添加該商品；最后判斷添加操作是否成功，將結(jié)果以JSON格式返回模板頁(yè)面。代碼如下：publicfunctionajax(){$goodsid=I('post.id'); //商品ID$num=I('post.m'); //商品購(gòu)買數(shù)量//實(shí)例化商品表$good=M('Goods');$goods=$good->where('goodsid='.$goodsid)->find();//定義數(shù)組存放數(shù)據(jù)$data=array();$data['goodsid']=$goodsid;$data['number']=$num;$data['goodspic']=$goods['goodspic'];$data['goodsname']=$goods['goodsname'];$data['goodsprice']=$goods['price'];$data['xiaoji']=$data['number']*$data['goodsprice'];$userid=$_SESSION['id'];$data['userid']=$userid;//實(shí)例化cart模型$goodscart=M('Cart');$goodscart->create();//查詢?cè)撋唐肥欠裨谫?gòu)物車內(nèi)$cart=$goodscart->where('goodsid='.$goodsid.'ANDuserid='.$userid)->find();if($cart){//重新定義商品的數(shù)量和小計(jì)$data['number']=($num+$cart['number']);$data['xiaoji']=$data['number']*$data['goodsprice'];//修改數(shù)據(jù)庫(kù)中相應(yīng)商品的數(shù)據(jù)$id=$goodscart->where('goodsid='.$goodsid.'ANDuserid='.$userid)->data($data)->save();}else{//將商品添加到購(gòu)物車$id=$goodscart->data($data)->add();}//將數(shù)據(jù)通過(guò)json格式傳遞回頁(yè)面exit(json_encode($id));}JSON（JavaScriptobjectnotation，JS對(duì)象標(biāo)記）是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript（一種由Ecma國(guó)際通過(guò)ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語(yǔ)言，往往被稱為JavaScript或JScript）規(guī)范的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)，易于閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成，并能有效提升網(wǎng)絡(luò)傳輸效率?！緦W(xué)生】聆聽(tīng)、理解、記錄通過(guò)教師的講解和演示，使學(xué)生了解PHP開(kāi)發(fā)電子商務(wù)網(wǎng)站的商品詳情模塊的過(guò)程課堂實(shí)訓(xùn)（15