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

PAGE6PAGE6PAGE7PAGE7

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

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