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

PAGE10PAGE10PAGE9PAGE9

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

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

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

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

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

修改之后要重啟Web服務(wù)器。3．圖片處理函數(shù)如果用戶不是第一次設(shè)置頭像，需要先把舊圖片刪除，以減少空間占用，此處使用unlink()函數(shù)來實現(xiàn)。在將舊圖片刪除后，執(zhí)行圖片上傳函數(shù)upload()上傳新圖片。此外，系統(tǒng)可能會用到不同大小的同一張圖片，此時需要將圖片處理一下，儲存一張放大圖和一張縮小圖，文件名分別以“s_”和“m_”開頭。代碼如下：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ù)庫$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)預定義變量，用于保存上傳文件的相關(guān)屬性，其具體應(yīng)用可參考10.4.2節(jié)?！窘處煛客ㄟ^學生的回答引入要講的知識，講解使用PHP開發(fā)博客管理系統(tǒng)朋友圈模塊設(shè)計設(shè)計15.9朋友圈模塊設(shè)計?【教師】通過多媒體展示“博主列表”圖片，并進行介紹朋友圈模塊的主要功能有添加、查詢和刪除好友，本節(jié)主要講解查詢好友用到的模糊查詢，以及如何將搜索結(jié)果分頁顯示，如圖15-18所示。1．創(chuàng)建搜索表單此處把搜索條件通過GET方法傳遞。代碼如下：<formaction="./user_more.php"method="get"> <inputtype="text"placeholder="請輸入關(guān)鍵字"name="search"/> <inputtype="submit"value="搜索"/></form>2．搜索分頁處理先將需要分頁的參數(shù)計算出來，然后拼接SQL語句。代碼如下： <?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); //======================分頁程序=============================== //定義必需的變量 $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