《PHP Web應(yīng)用開(kāi)發(fā)案例教程》630-9（阮云蘭）教案 第32課 博客管理系統(tǒng)文章管理和個(gè)人中心模塊設(shè)計(jì)

PAGE10PAGE10PAGE9PAGE9

課題博客管理系統(tǒng)文章管理和個(gè)人中心模塊設(shè)計(jì)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握?qǐng)D片上傳技術(shù)（2）掌握驗(yàn)證碼技術(shù)（3）掌握城市級(jí)聯(lián)技術(shù)素質(zhì)目標(biāo)：（1）熟悉管理系統(tǒng)開(kāi)發(fā)流程，培養(yǎng)腳踏實(shí)地、認(rèn)真學(xué)習(xí)的良好習(xí)慣（2）要求學(xué)生理解掌握基本理論知識(shí)并能與生產(chǎn)實(shí)踐相聯(lián)系教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：圖片上傳技術(shù)、驗(yàn)證碼技術(shù)教學(xué)難點(diǎn)：城市級(jí)聯(lián)技術(shù)教學(xué)方法案例分析法、問(wèn)答法、討論法、講授法、實(shí)踐法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（38min）第2節(jié)課：→傳授新知（20min）→課堂實(shí)訓(xùn)（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)題：在Windows操作系統(tǒng)中一般都帶有記事本軟件來(lái)對(duì)一些文字進(jìn)行編輯，Word軟件對(duì)于圖文編輯的能力更強(qiáng)一點(diǎn)，你知道怎么在網(wǎng)頁(yè)中實(shí)現(xiàn)圖文編輯的功能嗎？通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（38min）【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解使用PHP開(kāi)發(fā)博客管理系統(tǒng)文章管理模塊的過(guò)程15.7文章管理模塊設(shè)計(jì)15.7.1發(fā)表文章功能的實(shí)現(xiàn)?【教師】通過(guò)多媒體展示“發(fā)表博文”圖片，并進(jìn)行介紹當(dāng)用戶登錄成功后，就可以進(jìn)入“個(gè)人中心”發(fā)表博文，如圖所示。此處使用了百度出品的UEditor所見(jiàn)即所得編輯器，主要是使用JS實(shí)現(xiàn)。將其下載并解壓后放在網(wǎng)站根目錄，然后在“發(fā)表博文”頁(yè)面中添加以下代碼，即可代替文本域使用。<!--加載編輯器的容器--><scriptid="container"name="content"type="text/plain"></script><!--配置文件--><scripttype="text/javascript"src="ueditor/ueditor.config.js"></script><!--編輯器源碼文件--><scripttype="text/javascript"src="ueditor/ueditor.all.js"></script><!--實(shí)例化編輯器--><scripttype="text/javascript"> varue=UE.getEditor('container');</script>大家可以到UEditor官網(wǎng)下載編輯器，并了解其具體用法。在“發(fā)表博文”頁(yè)面提交填寫(xiě)的內(nèi)容時(shí)需要進(jìn)行驗(yàn)證，驗(yàn)證通過(guò)后才能添加進(jìn)數(shù)據(jù)庫(kù)。所以在單擊下方的“確認(rèn)發(fā)表”按鈕后，將執(zhí)行“doAction.php”中的“fatie”程序，對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證和處理。代碼如下： case"fatie": $title=$_POST['title']; $content=$_POST['content']; //判斷信息是否為空 if(empty($title)){ echo"<script>alert('標(biāo)題不能為空');window.location.href='file.php'</script>"; die; } if(empty($content)){ echo"<script>alert('內(nèi)容不能為空');window.location.href='file.php'</script>"; die; } //將數(shù)據(jù)添加進(jìn)數(shù)據(jù)庫(kù)中 $sql="insertintotb_article(id,title,content,author,time) values(null,'{$title}','{$content}','{$_SESSION[username]}',".time().")"; $result=mysqli_query($link,$sql); if($result&&mysqli_affected_rows($link)>0){ echo"<script>alert('發(fā)帖成功');window.location.href='file_list.php?'</script>"; die; }else{ echo"<script>alert('發(fā)帖失敗');window.location.href='file.php'</script>"; die; } break;15.7.2文章列表功能的實(shí)現(xiàn)當(dāng)系統(tǒng)數(shù)據(jù)量很大時(shí)，如果全部顯示在一個(gè)頁(yè)面，不僅用戶體驗(yàn)差，還會(huì)增加服務(wù)器負(fù)載，此時(shí)就需要使用分頁(yè)技術(shù)來(lái)實(shí)現(xiàn)數(shù)據(jù)的分頁(yè)顯示，如圖所示。?【教師】通過(guò)多媒體展示“分頁(yè)顯示文章列表”圖片，并進(jìn)行介紹1．定義分頁(yè)函數(shù)實(shí)現(xiàn)分頁(yè)的關(guān)鍵技術(shù)就是分頁(yè)函數(shù)。實(shí)現(xiàn)代碼如下： functionPage($rows,$page_size){ global$page,$select_from,$select_limit,$pagenav; //設(shè)置全局變量 $page_count=ceil($rows/$page_size); //計(jì)算總頁(yè)數(shù) if($page<=1||$page=='')$page=1; //判斷最小頁(yè)數(shù) if($page>=$page_count)$page=$page_count; //判斷最大頁(yè)數(shù) $select_limit=$page_size; //設(shè)置每頁(yè)條數(shù) $select_from=($1)*$page_size.','; //設(shè)置起始條數(shù) $pre_page=($page==1)?1:$1; //上一頁(yè) $next_page=($page==$page_count)?$page_count:$page+1; //下一頁(yè) $pagenav.="<li>第$page/$page_count頁(yè)</li><li>共$rows條</li>";//分頁(yè)按鈕 $pagenav.="<li><ahref='?page=1'>首頁(yè)</a></li>"; $pagenav.="<li><ahref='?page=$pre_page'>前一頁(yè)</a></li>"; $pagenav.="<li><ahref='?page=$next_page'>后一頁(yè)</a></li>"; $pagenav.="<li><ahref='?page=$page_count'>末頁(yè)</a></li>"; }統(tǒng)計(jì)總數(shù)時(shí)只需要查詢ID的數(shù)量即可，在數(shù)據(jù)量很大時(shí)會(huì)節(jié)省大量時(shí)間。2．調(diào)用分頁(yè)函數(shù)將文章分頁(yè)顯示，需要先計(jì)算出總條數(shù)，再將總條數(shù)作為參數(shù)，調(diào)用分頁(yè)函數(shù)。代碼如下： <?php //分頁(yè) $sql="selectidfromtb_article"; $result=mysqli_query($link,$sql); //計(jì)算總條數(shù) $rows=$result->num_rows; //調(diào)用分頁(yè)函數(shù) Page($rows,4); $sql="select*fromtb_articlelimit$select_from$select_limit"; $result=mysqli_query($link,$sql); ?>【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解使用PHP開(kāi)發(fā)博客管理系統(tǒng)個(gè)人中心模塊設(shè)計(jì)15.8個(gè)人中心模塊設(shè)計(jì)15.8.1修改個(gè)人信息功能的實(shí)現(xiàn)?【教師】通過(guò)多媒體展示“修改個(gè)人信息”圖片，并進(jìn)行介紹在個(gè)人中心，用戶可以修改自己的詳細(xì)信息，如圖所示?！皞€(gè)人信息”頁(yè)面的重點(diǎn)在于“所在城市”級(jí)聯(lián)菜單的實(shí)現(xiàn)，此處重點(diǎn)介紹該功能的實(shí)現(xiàn)。1．定義級(jí)聯(lián)函數(shù)此處的城市級(jí)聯(lián)函數(shù)使用JavaScript實(shí)現(xiàn)，首先使用數(shù)組定義各個(gè)省所包含的城市，然后定義函數(shù)set_city()實(shí)現(xiàn)級(jí)聯(lián)顯示。主要代碼如下： <scripttype="text/javascript"> cities=newObject(); cities['河北省']=newArray('石家莊','張家口','承德','秦皇島','唐山','廊坊','保定','滄州','衡水','邢臺(tái)','邯鄲'); cities['山西省']=newArray('太原','大同','朔州','陽(yáng)泉','長(zhǎng)治','晉城','忻州','呂梁','晉中','臨汾','運(yùn)城'); cities['遼寧省']=newArray('沈陽(yáng)','朝陽(yáng)','阜新','鐵嶺','撫順','本溪','遼陽(yáng)','鞍山','丹東','大連','營(yíng)口','錦州','葫蘆島'); functionset_city(province,city){ varpv,cv; vari,ii; pv=province.value; cv=city.value; city.length=1; if(pv=='0')return; if(typeof(cities[pv])=='undefined')return; for(i=0;i<cities[pv].length;i++){ ii=i+1; city.options[ii]=newOption(); city.options[ii].text=cities[pv][i]; city.options[ii].value=cities[pv][i]; } }</script>2．調(diào)用函數(shù)此處為第1個(gè)下拉框設(shè)置了onchange事件，該事件會(huì)在下拉框內(nèi)的值改變時(shí)觸發(fā)，調(diào)用set_city()函數(shù)，從而通過(guò)傳遞的參數(shù)改變下級(jí)下拉框內(nèi)的選項(xiàng)。主要代碼如下： <!—下拉菜單--> <tr> <td>所在城市</td> <td><selectname="province"id="to_cn"onchange="set_city(this, document.getElementById('city'));"> <optionvalue=0>請(qǐng)選擇</option> <optionvalue=河北省>河北省</option> <optionvalue=山西省>山西省</option> <optionvalue=遼寧省>遼寧省</option> <optionvalue=吉林省>吉林省</option> </select> <selectid="city"name="city"> <optionvalue=0>請(qǐng)選擇</option> </select></td> </tr>城市級(jí)聯(lián)一般使用兩個(gè)下拉框分別列出省和城市名稱，當(dāng)用戶在第一個(gè)下拉框的列表中選擇了省（或自治區(qū)、直轄市）名稱后，在第二個(gè)下拉框中將自動(dòng)顯示該?。ɑ蜃灾螀^(qū)、直轄市）的城市名稱，供用戶選擇?！緦W(xué)生】聆聽(tīng)、思考、記錄通過(guò)教師的講解和演示，使學(xué)生了解使用PHP開(kāi)發(fā)博客管理系統(tǒng)文章管理模塊的過(guò)程第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：在網(wǎng)頁(yè)中進(jìn)行文章編輯的時(shí)候往往都有一些圖片的內(nèi)容，在個(gè)人中心模塊的個(gè)人資料里面一般也可以對(duì)頭像進(jìn)行設(shè)置，那么在PHP中，這些功能是如何實(shí)現(xiàn)的呢？【學(xué)生】思考、舉手回答通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過(guò)學(xué)生的回答引入新知，介紹使用PHP開(kāi)發(fā)博客系統(tǒng)上傳圖片功能的方法15.8.2上傳圖片功能的實(shí)現(xiàn)?【教師】通過(guò)多媒體展示“上傳頭像”圖片，并進(jìn)行介紹好的圖片可以在第一時(shí)間抓住人的眼球，博客管理系統(tǒng)在設(shè)置會(huì)員頭像時(shí)使用了圖片上傳技術(shù)，如圖所示。1．創(chuàng)建表單網(wǎng)頁(yè)中的圖片是通過(guò)表單上傳的，此處先來(lái)創(chuàng)建一個(gè)表單。代碼如下： <formaction="./doAction.php?a=updatePic"method="post"enctype="multipart/form-data"> <tablewidth="380"border="0"cellspacing="15"> <tr> <td>上傳頭像：</td> <td><inputtype="file"name="upic"accept="image/gif,image/jpeg,

image/jpg,image/png"/></td> </tr> <tr> <td></td> <td> <imgsrc=""onerror="this.src='./images/member/nophoto.gif'"/> </td> </tr> <trstyle="text-align:center;"> <tdclass="btn"colspan="2"> <inputtype="submit"value="修改"/> <inputtype="reset"value="重置"/> </td> </tr> </table> </form>當(dāng)某個(gè)form表單用于上傳圖片時(shí)，需要為該表單添加屬性enctype=“multipart/

form-data”。2．圖片上傳函數(shù)使用文件上傳函數(shù)上傳圖片的本質(zhì)，就是將圖片從瀏覽器端復(fù)制到服務(wù)器端的指定文件夾中，并將圖片所在位置存儲(chǔ)到數(shù)據(jù)庫(kù)中。此處定義了upload()函數(shù)來(lái)完成圖片的上傳和存儲(chǔ)。當(dāng)頁(yè)面需要顯示圖片時(shí)，第一步是從數(shù)據(jù)庫(kù)中讀取該圖片的存儲(chǔ)位置，第二步是根據(jù)圖片的存儲(chǔ)位置找到圖片并顯示在網(wǎng)頁(yè)上。使用目錄保存圖片的好處是減輕數(shù)據(jù)庫(kù)壓力，并使網(wǎng)頁(yè)更容易被搜索引擎抓取。upload()函數(shù)代碼如下：functionupload($path,$upfile,$typeList=array(),$maxSize=0){//定義存放返回信息的數(shù)組$res=array( "info"=>"", "error"=>false);//格式化文件上傳路徑信息$path=rtrim($path,"/")."/";//判斷上傳文件的錯(cuò)誤號(hào)if($upfile['error']>0){ switch($upfile['error']){ case1:$info="上傳文件的大小超出了約定值！";break; case2:$info="上傳文件大小超出了表單MAX＿FILE＿SIZE元素所指定的最大值。";break; case3:$info="文件只被部分上傳！";break; case4:$info="沒(méi)有上傳任何文件。";break; case6:$info="找不到臨時(shí)文件夾。";break; case7:$info="文件寫(xiě)入失敗。";break; default:$info="未知的文件上傳錯(cuò)誤！";break; } $res['info']="上傳失敗！原因：".$info; return$res; }//判斷文件的上傳類型是否合法if(@$typeList&&count(@$typeList)>0){//判斷用戶上傳的文件類型是否包含在服務(wù)器允許的類型之中if(!in_array($upfile['type'],$typeList)){ $res['info']="上傳失??！原因：不被允許的上傳文件類型！"; return$res;}}else{ $res['info']="上傳失?。≡颍悍?wù)器沒(méi)有設(shè)定允許上傳的文件類型！"; return$res;}//判斷上傳文件的大小是否合法if($maxSize>0&&$upfile['size']>$maxSize){$res['info']="上傳失?。≡颍荷蟼魑募笮≡浇?！"; return$res;}//隨機(jī)分配一個(gè)文件名稱$pathinfo=pathinfo($upfile['name']); //獲取上傳文件名的詳細(xì)信息$ext=$pathinfo['extension']; //獲取文件后綴名do{ $newname=date("YmdHis",time()).rand(1000,9999).".".$ext; //拼裝隨機(jī)文件名}while(file_exists($path.$newname));//執(zhí)行上傳文件的移動(dòng)if(is_uploaded_file($upfile['tmp_name'])){ //判斷上傳文件移動(dòng)是否成功 if(move_uploaded_file($upfile['tmp_name'],$path.$newname)){ $res['info']=$newname; $res['error']=true; return$res; }else{ $res['info']="上傳失??！原因：移動(dòng)上傳文件失??！"; return$res; }}else{ $res['info']="上傳失?。≡颍翰皇怯行У纳蟼魑募?！"; return$res; }}上傳圖片時(shí)，不能超過(guò)配置文件中限定的大小，如果想修改上傳文件的限定值，需修改“php.ini”中的下面幾項(xiàng)：

post_max_size=8M（表單提交的最大限制，針對(duì)整個(gè)表單提交的數(shù)據(jù)進(jìn)行限制）；

upload_max_filesize=2M（上傳的單個(gè)文件的最大限制）；

保證post_max_size>=upload_max_filesize即可，也就是前者不小于后者；

修改之后要重啟Web服務(wù)器。3．圖片處理函數(shù)如果用戶不是第一次設(shè)置頭像，需要先把舊圖片刪除，以減少空間占用，此處使用unlink()函數(shù)來(lái)實(shí)現(xiàn)。在將舊圖片刪除后，執(zhí)行圖片上傳函數(shù)upload()上傳新圖片。此外，系統(tǒng)可能會(huì)用到不同大小的同一張圖片，此時(shí)需要將圖片處理一下，儲(chǔ)存一張放大圖和一張縮小圖，文件名分別以“s_”和“m_”開(kāi)頭。代碼如下：case"updatePic"://查詢圖片名稱$sql="selectphotofromtb_userdetailwhereuserid={$_SESSION['uid']}";$result=mysqli_query($link,$sql);if($result&&mysqli_num_rows($result)>0){ $row=mysqli_fetch_assoc($result);}//刪除舊圖片if($row['photo']){ unlink("./images/member/{$row['photo']}"); unlink("./images/member/s_{$row['photo']}"); unlink("./images/member/m_{$row['photo']}");}//引入上傳圖片和等比縮放函數(shù)require_once("./functions.php");//定義必需的變量$path="./images/member";$upfile=$_FILES['upic'];$typeList=array("image/jpeg","image/png","image/gif");$maxSize=0;//執(zhí)行上傳$res=upload($path,$upfile,$typeList,$maxSize);//判斷是否上傳成功if($res['error']==false){ die($res['info']);}//獲取文件名$picname=$res['info'];//等比縮放imageResize($path,$picname,100,100,$pre="s_");imageResize($path,$picname,65,65,$pre="m_");//將文件名存入數(shù)據(jù)庫(kù)$sql="updatetb_userdetailsetphoto='{$picname}'whereuserid={$_SESSION['uid']}";$result=mysqli_query($link,$sql);if($result&&mysqli_affected_rows($link)>0){ echo"<script>alert('修改成功');window.location.href='mypic.php?picname={$picname}'</script>";}else{ echo"<script>alert('修改失敗');window.location.href='mypic.php'</script>";}break;$_FILES為系統(tǒng)預(yù)定義變量，用于保存上傳文件的相關(guān)屬性，其具體應(yīng)用可參考10.4.2節(jié)?！窘處煛客ㄟ^(guò)學(xué)生的回答引入要講的知識(shí)，講解使用PHP開(kāi)發(fā)博客管理系統(tǒng)朋友圈模塊設(shè)計(jì)設(shè)計(jì)15.9朋友圈模塊設(shè)計(jì)?【教師】通過(guò)多媒體展示“博主列表”圖片，并進(jìn)行介紹朋友圈模塊的主要功能有添加、查詢和刪除好友，本節(jié)主要講解查詢好友用到的模糊查詢，以及如何將搜索結(jié)果分頁(yè)顯示，如圖15-18所示。1．創(chuàng)建搜索表單此處把搜索條件通過(guò)GET方法傳遞。代碼如下：<formaction="./user_more.php"method="get"> <inputtype="text"placeholder="請(qǐng)輸入關(guān)鍵字"name="search"/> <inputtype="submit"value="搜索"/></form>2．搜索分頁(yè)處理先將需要分頁(yè)的參數(shù)計(jì)算出來(lái)，然后拼接SQL語(yǔ)句。代碼如下： <?php //判斷搜索關(guān)鍵字是否存在 $search=$_GET['search']; if(empty($search)){ $sql="select*fromtb_userorderbyiddesc"; }else{ $sql="select*fromtb_userwhereuserNamelike'%{$search}%'orderbyiddesc"; } //執(zhí)行查詢 $result1=mysqli_query($link,$sql); //======================分頁(yè)程序=============================== //定義必需的變量 $page=isset($_GET['p'])?$_GET['p']:1; $pageSize=5; $maxRows=1; //求變量的值 $maxRows=mysqli_num_rows($result1); $maxPage=ceil($maxRows/$pageSize); if($page<=1){ $page=1; } if($page>=$maxPage){ $page=$maxPage; } //起始條數(shù) $start_rows=($1)*$pageSize; $limit="limit{$start_rows},{$pageSiz