《PHP Web應(yīng)用開發(fā)案例教程》630-9（阮云蘭）教案 第36課 電子商務(wù)網(wǎng)站會員中心模塊設(shè)計

PAGE4PAGE4PAGE5PAGE5

課題電子商務(wù)網(wǎng)站會員中心模塊和后臺設(shè)計課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）掌握輸入信息驗證和地址級聯(lián)顯示的實現(xiàn)方法（2）了解框架頁面的實現(xiàn)方法（3）掌握網(wǎng)站后臺的實現(xiàn)方法素質(zhì)目標(biāo)：（1）夯實理論基礎(chǔ)，強化實踐訓(xùn)練，提高專業(yè)技能，勇?lián)鷷r代使命（2）加強實踐練習(xí)，培養(yǎng)團(tuán)隊合作意識（3）熟悉管理系統(tǒng)開發(fā)流程，培養(yǎng)腳踏實地、認(rèn)真學(xué)習(xí)的良好習(xí)慣教學(xué)重難點教學(xué)重點：輸入信息驗證和地址級聯(lián)顯示的實現(xiàn)方法教學(xué)難點：框架頁面的實現(xiàn)方法教學(xué)方法案例分析法、問答法、討論法、講授法、實踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計第1節(jié)課：→→→傳授新知（38min）第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)站中，個人中心頁的設(shè)計是怎樣的，都具有什么功能？通過問題導(dǎo)入，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（38min）【教師】通過學(xué)生的回答引入要講的知識，講解在PHP框架中開發(fā)電子商務(wù)網(wǎng)站中的會員中心模塊的流程16.8會員中心模塊設(shè)計會員中心模塊的主要功能有查看用戶自己的訂單和收藏，以及修改個人資料和密碼，會員中心的“修改個人資料”頁面，如圖16-26所示。本節(jié)主要介紹修改個人資料中輸入信息驗證和地址級聯(lián)顯示的實現(xiàn)方法，其他部分請參考源代碼。?【教師】通過多媒體展示“會員中心的“修改個人資料”頁面”圖片，并進(jìn)行介紹16.8.1輸入信息驗證的實現(xiàn)用戶在填寫個人資料時，有時會出現(xiàn)輸入的信息格式不正確，但用戶自己卻不知道，而導(dǎo)致提交信息失敗的情況，此時就需要設(shè)計表單的即時驗證功能來提高用戶體驗度。表單驗證在網(wǎng)頁設(shè)計中是非常關(guān)鍵的一步，因為它關(guān)系到整個網(wǎng)頁設(shè)計的合理性，如果這部分設(shè)計足夠合理，將在很大程度上提升網(wǎng)站的檔次。表單驗證常用jQuery來實現(xiàn)。jQuery封裝了JavaScript常用的功能代碼，是一個快速、簡潔的JavaScript框架，它的選擇機制構(gòu)建于CSS的選擇器，能夠快速查詢DOM文檔中的元素，大大強化了JavaScript中獲取頁面元素的方式和事件處理能力，并且兼容所有主流瀏覽器。

jQuery中還內(nèi)置了一系列的動畫效果，如淡入淡出、元素移除等動態(tài)特效。而且它對Ajax的支持非常好，通常使用的請求方式有4種：$.ajax()、$.get()、$.post()和$.getJSON()。此處用到了一個表單驗證插件“jQuery.FormValidator.js”，其下載地址為/DownLoad.aspx?id=212。將其下載完成后放在“\Public\home\js”目錄下，后面直接引用即可。也可以直接使用“素材與實例\example\ph16\Public\home\js”目錄下的“jQuery.FormValidator.js”插件。1．創(chuàng)建表單在會員中心“修改資料”模板頁面中創(chuàng)建個人信息表單。代碼如下： <formaction="__CONTROLLER__/update"id="personalProfileForm"novalidate method="post"enctype="multipart/form-data"><foreachname="user"item="user"><divclass="control-group"><divclass="control-label">頭像</div><divclass="controls"><scripttype="text/javascript">functionnofind(){varimg=event.srcElement;img.src="__PUBLIC__/home/imgs/nophoto.gif";img.onerror=null;}</script><ahref="javascript:;"id="btnUpload"><imgstyle="width:100px;height:100px;" src="__PUBLIC__/Upload/<{$user.face}>"onerror="nofind();"><inputtype="file"name="face" accept="image/gif,image/jpeg,image/jpg,image/png"></a></div></div><divclass="control-group"><divclass="control-label"><fontcolor="red">*</font>性別</div><divclass="controls"><spanclass="EidtGroup"><inputtype="radio"name="sex"value="男"<if condition="$user.sexeq'男'">checked</if>/>男<inputtype="radio"name="sex"value="女"<if condition="$user.sexeq'女'">checked</if>/>女</span></div></div><divclass="control-group"><divclass="control-label"><fontcolor="red">*</font>真實姓名</div><divclass="controls"><spanclass="EidtGroup"><inputclass="input"id="RealName"name="name"type="text" value="<{$}>"><spanid="TipUserName0"></span></span><spanid="RealNameTip"class="onError"style=""></span></div></div><divclass="control-group"><divclass="control-label"><fontcolor="red">*</font>手機</div><divclass="controls"><spanclass="EidtGroup"><inputtype="text"class="input"id="tel"name="tel" value="<{$user.tel}>"><spanid="TipMobile"></span></span><spanid="telTip"class="onError"style=""></span></div></div><divclass="control-group"><divclass="control-label"><fontcolor="red">*</font>地址</div><divclass="controls"><spanclass="EidtGroup"><selectname="province"id="province"><optionvalue="">--請選擇省--</option></select><selectname="city"id="city"><optionvalue="">--請選擇--</option></select><selectname="county"id="county"><optionvalue="">--請選擇--</option></select><selectname="xiang"id="xiang"><optionvalue="">--請選擇--</option></select></span><spanid="Tipprovince"></span><div><inputid="adresse"type="text"class="input"name="adresse" value="<{$user.adresse}>"><spanid="Tipadresse"></span></div></div></div><divclass="control-group"><divclass="control-group"><divclass="controls"><inputstyle="width:70px;height:30px;" class="btn-gn"type="submit"value="提交"/></div></div><div><ahref="#"><imgwidth="912"height="152" src="__PUBLIC__/home/user/imgs/9288693284380806.jpg"></a></div></div></foreach></form>2．?dāng)?shù)據(jù)驗證要實現(xiàn)表單數(shù)據(jù)驗證，首先需要獲取輸入框內(nèi)的值，然后使用jQuery插件對輸入的內(nèi)容進(jìn)行驗證，最后將驗證之后返回的信息顯示在輸入框后，用戶在輸入前、輸入中、輸入正確或錯誤的情況下都會顯示不同的提示。代碼如下：<scripttype="text/javascript">//頁面加載成功后，執(zhí)行函數(shù)內(nèi)的代碼$(document).ready(function(){//驗證表單$("#personalProfileForm").SetValidateSettings({});//驗證真實姓名$("#RealName").SetValidateSettings({FormValidate:{Empty:{Value:true,Message:"真實名不能為空"}},Message:{Text:{Show:"請輸入真實姓名",Success:"輸入正確！",Error:"必須輸入用戶名！",Focus:"正在輸入..."},MessageSpaceHolderID:"TipUserName0"}});//驗證手機號$("#tel").SetValidateSettings({FormValidate:{Empty:{Value:true},Format:{Value:newRegExp("^1[34578][0-9]{9}$"),Message:"手機號格式不正確"}},Message:{Text:{Show:"請輸入手機號碼",Success:"正確！",Error:"必須輸入手機號",Focus:"輸入中..."},MessageSpaceHolderID:"TipMobile"}});//驗證地址$("#province").SetValidateSettings({FormValidate:{Empty:{Value:true,Message:"請選擇你的住址"}},Message:{Text:{Show:"請選擇你的住址",Success:"格式正確",Error:"這也會錯？",Focus:"請選擇你的住址"},MessageSpaceHolderID:"Tipprovince"}});//驗證詳細(xì)地址$("#adresse").SetValidateSettings({FormValidate:{Empty:{Value:true,Message:"詳細(xì)地址不能為空"}},Message:{Text:{Show:"請輸入真實地址",Success:"輸入正確！",Error:"請輸入真實地址！",Focus:"正在輸入..."},MessageSpaceHolderID:"Tipadresse"}});});</script>16.8.2地址級聯(lián)顯示的實現(xiàn)為提高用戶體驗度，“個人資料”中的“地址”信息一般會以級聯(lián)下拉框的形式實現(xiàn)。用戶選擇所在省后，下級下拉框會出現(xiàn)該省下轄的城市名；在選擇城市后，下下級下拉框又會出現(xiàn)該市下轄的縣區(qū)；依此類推，直到鄉(xiāng)鎮(zhèn)、街道。這就用到了城市級聯(lián)技術(shù)。?【教師】通過多媒體展示“地址表結(jié)構(gòu)”圖片，并進(jìn)行介紹要實現(xiàn)城市級聯(lián)技術(shù)，首先需要創(chuàng)建一個全國地址的數(shù)據(jù)表“yg_area”，表結(jié)構(gòu)如圖所示。1．創(chuàng)建下拉框在16.8.1節(jié)創(chuàng)建的表單中已經(jīng)創(chuàng)建好城市級聯(lián)所需要的下拉框。此處將下拉框的代碼單獨列出：<selectname=""id="province"><optionvalue="">--請選擇省--</option></select><selectname=""id="city"><optionvalue="">--請選擇--</option></select><selectname=""id="county"><optionvalue="">--請選擇--</option></select><selectname=""id="xiang"><optionvalue="">--請選擇--</option></select>2．獲取數(shù)據(jù)在會員中心“修改資料”模板頁面中編寫JavaScript腳本獲取地址數(shù)據(jù)。要實現(xiàn)城市級聯(lián)，首先需要將省份全部查詢出來，當(dāng)用戶選擇某個省份后，通過Ajax查詢該省份下的所有城市，并逐個顯示在下一級下拉框中（將城市名放入<select>標(biāo)簽中）；在用戶選擇某城市后，Ajax又會查詢該城市下轄的區(qū)縣，并逐個顯示在下下級下拉框中；依此類推，直到顯示出最后一級地址。代碼如下： <scripttype="text/javascript"> $(function(){//獲取省份$.get("__MODULE__/User/area",{'upid':0},function(msg){//msg是對象，將對象遍歷拼接成option格式的HTML標(biāo)簽varstr='<optionvalue="">--請選擇省--</option>';for(variinmsg){str+='<optionvalue="'+msg[i]['id']+'">'+msg[i]['name']+'</option>';}//將拼接好的HTML代碼放在select內(nèi)$('#province').html(str);});//省改變事件$('#province').change(function(){//獲取值varvalue=$(this).val();//獲取對應(yīng)的市$.get("__MODULE__/User/area",{'upid':value},function(msg){//msg是對象，將對象遍歷拼接成option格式的HTML標(biāo)簽varstr='<optionvalue="">--請選擇--</option>';for(variinmsg){str+='<optionvalue="'+msg[i]['id']+'">'+msg[i]['name']+'</option>';}//將拼接好的HTML代碼放在select內(nèi)$('#city').html(str);})});//市改變事件$('#city').change(function(){//獲取值varvalue=$(this).val();//獲取對應(yīng)的縣$.get("__MODULE__/User/area",{'upid':value},function(msg){//msg是對象，將對象遍歷拼接成option格式的HTML標(biāo)簽varstr='<optionvalue="">--請選擇--</option>';for(variinmsg){str+='<optionvalue="'+msg[i]['id']+'">'+msg[i]['name']+'</option>';}//將拼接好的HTML代碼放在select內(nèi)$('#county').html(str);})});//縣改變事件$('#county').change(function(){//獲取值varvalue=$(this).val();//獲取對應(yīng)的鄉(xiāng)鎮(zhèn)$.get("__MODULE__/User/area",{'upid':value},function(msg){//msg是對象，將對象遍歷拼接成option格式的HTML標(biāo)簽varstr='<optionvalue="">--請選擇--</option>';for(variinmsg){str+='<optionvalue="'+msg[i]['id']+'">'+msg[i]['name']+'</option>';}$('#xiang').html(str); }) }); }) </script>3．查詢返回在UserController控制器類中定義函數(shù)area()，通過Ajax傳送的父類ID“upid”查詢下面所有的子類，并返回給模板頁面。代碼如下：publicfunctionarea(){//實例化area模型$area=M('area');//查詢數(shù)據(jù)（只查詢省份）$upid=I('get.upid',0);$data=$area->where('upid='.$upid)->select();//返回結(jié)果$this->ajaxReturn($data);}【學(xué)生】聆聽、思考、記錄通過教師的講解和演示，使學(xué)生了解在PHP框架中開發(fā)電子商務(wù)網(wǎng)站中的會員中心模塊的流程第二節(jié)課問題導(dǎo)入（5min）【教師】提出以下問題：什么是系統(tǒng)后臺，它的主要功能是什么？【學(xué)生】思考、舉手回答通過問題導(dǎo)入，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過學(xué)生的回答引入新知，講解在PHP框架中開發(fā)電子商務(wù)網(wǎng)站中的后臺的流程16.9后臺設(shè)計后臺管理，是網(wǎng)站管理員對網(wǎng)站中的會員、商品等進(jìn)行統(tǒng)一管理的場所。后臺一般不需要設(shè)計得太華麗，但一定要簡單明了。為加快開發(fā)進(jìn)度，本系統(tǒng)后臺使用前端框架Bootstrap來實現(xiàn)。Bootstrap是目前很受歡迎的前端框架。它是基于HTML、CSS、JavaScript的，其中包含了豐富的Web組件，使用這些組件，可以快速搭建一個簡單大氣、功能完備的網(wǎng)站。常用組件主要包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁等?？蚣艿木唧w使用方法請參考官方文檔。本系統(tǒng)的后臺主要包括用戶管理模塊、分類管理模塊、商品管理模塊、訂單管理模塊、留言與評價管理模塊、首頁輪播廣告管理模塊和權(quán)限管理模塊，其中商品管理模塊的效果如圖所示。本節(jié)主要介紹后臺頁面布局、商品管理模塊及權(quán)限管理模塊的實現(xiàn)。?【教師】通過多媒體展示“后臺商品管理”圖片，并進(jìn)行介紹16.9.1后臺頁面布局后臺頁面使用frameset元素定義框架集。它可以將窗口劃分為若干個子窗口（這些子窗口又稱為框架），每個子窗口中顯示不同的頁面，每個頁面都是一個獨立的文件，所有子窗口中的頁面組成一個完整的網(wǎng)頁，顯示在瀏覽器中。每次用戶請求頁面時，只下載發(fā)生變化的頁面，其他頁面保持不變。?【教師】通過多媒體展示“<frameset>的常用屬性”表格，并進(jìn)行介紹<frameset>和<frame>是框架集和框架標(biāo)簽。<frameset>的常用屬性如表所示。<frameset>的常用屬性參數(shù)說明cols在水平方向上將瀏覽器分成多個窗口（即將瀏覽器切割成多列），其取值有3種形式：像素（pixels）、百分比（%）和相對尺寸（*）

rows在垂直方向上將瀏覽器分成多個窗口（即將瀏覽器切割成多行），其取值有3種形式：像素（pixels）、百分比（%）和相對尺寸（*）frameborder指定框架是否顯示邊框framespacing指定框架之間的間隔，默認(rèn)為無border指定框架邊框的寬度?【教師】通過多媒體展示“<frame>的常用屬性”表格，并進(jìn)行介紹通過設(shè)置<frame>標(biāo)簽的屬性，可以設(shè)置每個框架的外觀，其常用屬性如表所示。參數(shù)說明frameborder規(guī)定是否顯示框架周圍的邊框longdesc規(guī)定一個包含有關(guān)框架內(nèi)容的長描述頁面marginheight定義框架上方和下方的邊距marginwidth定義框架左側(cè)和右側(cè)的邊距name規(guī)定框架的名稱noresize規(guī)定無法調(diào)整框架的大小scrolling規(guī)定是否在框架中顯示滾動條src規(guī)定在框架中顯示的文檔的URL使用框架在模板頁面中對整個后臺頁面進(jìn)行布局。代碼如下： <!doctypehtml> <html> <head> <title>網(wǎng)站管理后臺</title> <metacharset="utf-8"> </head> <framesetrows="120,*,50"border="1"frameborder="1"> <!--頭部框架--> <framesrc="__CONTROLLER__/top"scrolling="no"name="topFrame"noresize/> <framesetcols="200,*"> <!--左側(cè)框架--> <framesrc="__CONTROLLER__/left"name="leftFrame"/> <!--右側(cè)框架--> <framesrc="__CONTROLLER__/right"name="rightFrame"/> </frameset> <!--底部框架--> <framesrc="__CONTROLLER__/bottom"/> </frameset> </html>16.9.2商品管理模塊設(shè)計管理員登錄后，可以單擊左側(cè)導(dǎo)航列表中的各項菜單，對用戶、類別、商品、訂單等進(jìn)行管理，這些功能的實現(xiàn)都大同小異，此處以