《PHP Web應(yīng)用開(kāi)發(fā)案例教程》630-9（阮云蘭）教案 第31課 博客管理系統(tǒng)網(wǎng)站首頁(yè)、注冊(cè)模塊和登錄模塊的設(shè)計(jì)

PAGE6PAGE6PAGE7PAGE7

課題博客管理系統(tǒng)網(wǎng)站首頁(yè)、注冊(cè)模塊和登錄模塊的設(shè)計(jì)課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）掌握Session在系統(tǒng)中的應(yīng)用（2）掌握搜索分頁(yè)技術(shù)素質(zhì)目標(biāo)：（1）加強(qiáng)實(shí)踐練習(xí)，掌握專業(yè)技能，培養(yǎng)良好的職業(yè)素養(yǎng)（2）熟悉管理系統(tǒng)開(kāi)發(fā)流程，培養(yǎng)腳踏實(shí)地、認(rèn)真學(xué)習(xí)的良好習(xí)慣教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：Session在系統(tǒng)中的應(yīng)用教學(xué)難點(diǎn)：搜索分頁(yè)技術(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)題：網(wǎng)站首頁(yè)的作用是什么？通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（38min）【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解博客管理系統(tǒng)中網(wǎng)站首頁(yè)的設(shè)計(jì)流程15.4網(wǎng)站首頁(yè)設(shè)計(jì)網(wǎng)站首頁(yè)給人的是第一印象，也稱網(wǎng)上第一視覺(jué)效應(yīng)，它的設(shè)計(jì)直接關(guān)系到整個(gè)網(wǎng)站的風(fēng)格及整體效果。這就要求網(wǎng)站首頁(yè)設(shè)計(jì)不僅要新穎，還要突出重點(diǎn)。網(wǎng)站首頁(yè)可以分為以下三部分。網(wǎng)頁(yè)頂部：包括系統(tǒng)名，以及登錄和注冊(cè)鏈接。網(wǎng)頁(yè)左側(cè)：包括日歷、最新博客文章和最新入駐博主。網(wǎng)頁(yè)右側(cè)：包括最新的5篇文章詳情。15.4.1首頁(yè)頂部的實(shí)現(xiàn)首頁(yè)頂部使用include()函數(shù)導(dǎo)入數(shù)據(jù)庫(kù)配置文件“conn.php”，并通過(guò)Session判斷用戶是否登錄。 <?php session_start(); //開(kāi)啟Session include"Conn/conn.php"; //導(dǎo)入配置文件 ?> <?php if(isset($_SESSION[username])){ //判斷用戶是否登錄 ?> <aclass="a"href="./myinfo.php">個(gè)人中心</a> <aclass='a'href='#'> | </a> <aclass="a"href="./doAction.php?a=loginout">安全退出</a> <?php }else{ ?> <aclass='a'href='./login.php'>登錄</a> <aclass='a'href='#'> | </a> <aclass='a'href='./Register.php'>注冊(cè)</a> <?php } ?>數(shù)據(jù)庫(kù)配置文件“conn.php”的代碼如下：<?php header("Content-type:text/html;charset=utf-8"); //連接數(shù)據(jù)庫(kù)服務(wù)器(如果連接成功是一個(gè)對(duì)象，如果失敗則返回一個(gè)false) $link=mysqli_connect("localhost","root","123456")ordie("數(shù)據(jù)庫(kù)連接失敗！"); //設(shè)置編碼 mysqli_set_charset($link,"utf8"); //選擇數(shù)據(jù)庫(kù) mysqli_select_db($link,"db_tmlog");?>15.4.2首頁(yè)左側(cè)的實(shí)現(xiàn)首頁(yè)左側(cè)顯示最新的文章與用戶，由于都是列表，所以只查詢文章的ID和標(biāo)題，以及用戶的ID和用戶名就可以了，每個(gè)類別顯示最新的5條記錄。主要代碼如下： <divclass="con_header"><divclass="testTXT"><span>最新博客文章</span></div></div> <?php $sql="selectid,titlefromtb_articleorderbyiddesclimit5";//查詢最新的5篇文章 $result=mysqli_query($link,$sql); foreach($resultas$v){ ?> <divclass=""> <ulstyle="padding-left:20px;margin:5px0;"> <li><ahref="file_show.php?id=<?phpecho$v[id];?>"target="_blank"> <?phpechosubstr($v[title],0,21);?></a></li> </ul> </div> <hr/> <?php } ?> <divclass="con_header"><divclass="testTXT"><span>最新入駐博主</span></div></div> <?php $sql="selectid,usernamefromtb_userorderbyiddesclimit5"; //查詢最新的5個(gè)用戶 $result=mysqli_query($link,$sql); foreach($resultas$v){ ?> <divclass=""> <ulstyle="padding-left:20px;margin:5px0;"> <li><ahref="#"><?phpechosubstr($v[username],0,21);?></a></li> </ul> </div> <hr/> <?php } ?>15.4.3首頁(yè)右側(cè)的實(shí)現(xiàn)首頁(yè)右側(cè)顯示最新的5條博客記錄，此處用到了關(guān)聯(lián)查詢，以文章的作者為where條件，通過(guò)userid關(guān)聯(lián)用戶表和用戶詳情表，查詢用戶的頭像圖片地址。代碼如下： <?php //從文章表中查詢前5條博客記錄 $p_sql="select*fromtb_articleorderbyiddesclimit5;"; $p_rst=mysqli_query($link,$p_sql); foreach($p_rstas$v){ ?> <dlclass="blog_list"><dt><?php//關(guān)聯(lián)查詢用戶的信息$sql="SELECTtb_userdetail.photo,tb_user.usernameFROMtb_userdetailJOINtb_userON(tb_userdetail.userid=tb_user.id)wheretb_user.username='{$v['author']}'"; $result=mysqli_query($link,$sql);foreach($resultas$value){echo"<ahref='#'><imgsrc='images/member/{$value[photo]}'class='head'onerror="."this.src='./images/member/nophoto.gif'"."></a><ahref='#'class='nickname'>{$value[username]}</a>";}?></dt><dd><h3class="tracking-ad"data-mod="popu_254"><ahref="file_show.php?id=<?phpecho$v['id']?>"target="_blank"><?phpecho$v['title'];?></a></h3><divclass="blog_list_c"><?phpechosubstr($v['content'],0,300);?></div><divclass="blog_list_b"><divclass="blog_list_b_rfr"><label><?phpechodate("Y-m-dH:i:s",$v['time']);?></label></div></div></dd></dl><?php}?>15.5注冊(cè)模塊設(shè)計(jì)游客只能簡(jiǎn)單瀏覽網(wǎng)站上的文章，如果想要發(fā)表或評(píng)論文章就需要注冊(cè)成為會(huì)員。游客進(jìn)入注冊(cè)頁(yè)面后，輸入一些必要的信息（如用戶名、密碼等），單擊“注冊(cè)”按鈕，顯示“注冊(cè)成功”提示框，就表示成功注冊(cè)成為網(wǎng)站會(huì)員了。15.5.1創(chuàng)建注冊(cè)表單要實(shí)現(xiàn)注冊(cè)功能，首先要?jiǎng)?chuàng)建一個(gè)表單，用于傳遞用戶的注冊(cè)信息。代碼如下： <formaction="./doAction.php?a=register"method="post"><tablewidth="380"border="0"cellspacing="15"><tr><tdclass="you">用戶名<span>*</span></td><tdclass="zuo"><inputtype="text"name="name"/></td></tr><tr><tdclass="you">密碼<span>*</span></td><tdclass="zuo"><inputtype="password"name="pass"/></td></tr><tr><tdclass="you">確認(rèn)密碼<span>*</span></td><tdclass="zuo"><inputtype="password"name="surepass"/></td></tr><tr><tdclass="you">驗(yàn)證碼<span>*</span></td><tdclass="zuo"><divstyle="float:left;"><inputtype="text"name="code"style="width:100px;"/></div><divstyle="float:left;margin-left:10px;"><imgid="checkpic"onclick="changing();"src='code.php'/></div></td></tr><tr><tdcolspan="2"><inputtype="radio"checked>我已仔細(xì)閱讀并接受<ahref="RegPro.php"style="color:#0000FF;"target="_blank">博客注冊(cè)條款</a><br/><br/></td></tr><trstyle="text-align:center;"><tdclass="btn"colspan="2"><inputtype="submit"value="注冊(cè)"/><inputtype="reset"value="重置"/></td></tr></table> </form>15.5.2注冊(cè)驗(yàn)證的實(shí)現(xiàn)在注冊(cè)頁(yè)面填寫各項(xiàng)信息后單擊“注冊(cè)”按鈕，便會(huì)執(zhí)行“doAction.php”中的“register”程序，該程序主要用于處理表單提交的數(shù)據(jù)，判斷驗(yàn)證碼是否正確，各項(xiàng)數(shù)據(jù)是否為空，兩次輸入的密碼是否一致，用戶名是否存在等。代碼如下： case"register": //獲取用戶提交的各項(xiàng)信息 $name=$_POST['name']; $pass=$_POST['pass']; $surepass=$_POST['surepass']; $code=$_POST['code']; $re_ip=getenv(REMOTE_ADDR); $re_time=time(); //判斷驗(yàn)證碼 if($code!=$_SESSION['vcode']){ echo"<script>alert('驗(yàn)證碼錯(cuò)誤');window.location.href='register.php'</script>"; die; } //判斷用戶信息是否為空 if(empty($name)||empty($pass)||empty($surepass)){ echo"<script>alert('數(shù)據(jù)不能為空');window.location.href='register.php'</script>"; die; } //判斷密碼和確認(rèn)密碼是否一致 if($pass!=$surepass){ echo"<script>alert('密碼不一致');window.location.href='register.php'</script>"; die; } //判斷用戶名是否存在 $sql="select*fromtb_userwhereuserName='{$name}';"; $result=mysqli_query($link,$sql); if($result&&mysqli_num_rows($result)>0){ echo"<script>alert('用戶名已存在');window.location.href='register.php'</script>"; die; } $sql="InsertIntotb_user(username,userpwd,re_ip,re_time,authority)Values ('$name','$pass','$re_ip','$re_time',0)"; $result=mysqli_query($link,$sql); //判斷是否添加成功 if($result&&mysqli_affected_rows($link)>0){ $uid=mysqli_insert_id($link); //獲取用戶id，添加進(jìn)userdetail表 $sql="insertinto`tb_userdetail`(`userid`)values({$uid});"; $result=mysqli_query($link,$sql); if($result&&mysqli_affected_rows($link)>0){ $_SESSION['username']=$name; $_SESSION['uid']=$uid; echo"<script>alert('注冊(cè)成功');window.location.href='index.php'</script>"; }else{ echo("<script>alert('注冊(cè)失?。?);history.go(-1);</script>"); exit(); } break;15.5.3生成驗(yàn)證碼驗(yàn)證碼（CAPTCHA）是“CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測(cè)試）”的縮寫，是一種用于驗(yàn)證注冊(cè)用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序。驗(yàn)證碼可以由計(jì)算機(jī)生成并評(píng)判，但是必須只有人類才能解答。它可以有效防止黑客對(duì)某一特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷登錄嘗試。驗(yàn)證碼通常會(huì)將一組隨機(jī)產(chǎn)生的數(shù)字或字母，生成圖片的形式，此外，由于字符型文字太容易被程序讀取，還需要加入一些干擾因素（如點(diǎn)和線），使得驗(yàn)證碼只能被人的眼睛所識(shí)別，因此每次都必須用手工輸入。當(dāng)網(wǎng)站登錄系統(tǒng)程序，判斷出用戶輸入的字符與它所給的不一致時(shí)，網(wǎng)站就不去讀寫數(shù)據(jù)庫(kù)，這樣就大大減輕了網(wǎng)站的負(fù)擔(dān)，也提高了網(wǎng)站的安全性。驗(yàn)證碼的實(shí)現(xiàn)代碼如下： <?php ob_clean();//丟棄輸出緩沖區(qū)中的內(nèi)容 header("Content-type:image/jpeg");//以jpeg格式輸出，注意上面不能輸出任何字符 $w=80;//設(shè)置圖片寬和高 $h=34; $str=Array();//用來(lái)存儲(chǔ)隨機(jī)碼 $string="abcdefghijklmnopqrstuvwxyz0123456789"; //隨機(jī)挑選其中4個(gè)字符，也可以選擇更多，寬度適當(dāng)調(diào)整 for($i=0;$i<4;$i++){ $str[$i]=$string[rand(0,35)]; $vcode.=$str[$i]; } session_start(); //啟用超全局變量Session $_SESSION["vcode"]=$vcode; $im=imagecreatetruecolor($w,$h); $white=imagecolorallocate($im,255,255,255); //第一次調(diào)用設(shè)置背景色 $black=imagecolorallocate($im,0,0,0); //邊框顏色 imagefilledrectangle($im,0,0,$w,$h,$white); //畫一矩形填充 imagerectangle($im,0,0,$w-1,$h-1,$black); //畫一矩形框 //生成雪花背景 for($i=1;$i<200;$i++){ $x=mt_rand(1,$w-9); $y=mt_rand(1,$h-9); $color=imagecolorallocate($im,mt_rand(200,255),mt_rand(200,255),mt_rand(200,255)); imagechar($im,1,$x,$y,"*",$color); } //將驗(yàn)證碼寫入圖案 for($i=0;$i<count($str);$i++){ $x=13+$i*($w-15)/4; $y=mt_rand(3,$h/3); $color=imagecolorallocate($im,mt_rand(0,225),mt_rand(0,150),mt_rand(0,225)); imagechar($im,5,$x,$y,$str[$i],$color); } imagejpeg($im); imagedestroy($im); ?>當(dāng)驗(yàn)證碼失效或看不清楚時(shí)，點(diǎn)擊圖片就會(huì)再次生成一個(gè)驗(yàn)證碼。代碼如下： <script> functionchanging(){ //再次執(zhí)行code.php文件，后面的參數(shù)是防止靜態(tài)頁(yè)面緩存導(dǎo)致不能更換 document.getElementById('checkpic').src="code.php?"+Math.random();} </script>【學(xué)生】聆聽(tīng)、思考、記錄通過(guò)教師的講解和演示，使學(xué)生了解PHP開(kāi)發(fā)博客系統(tǒng)中網(wǎng)站首頁(yè)的流程通過(guò)教師的講解和演示，使學(xué)生了解PHP開(kāi)發(fā)博客系統(tǒng)中注冊(cè)模塊的流程第二節(jié)課問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題：在登錄博客時(shí)，通常需要填寫哪些信息？【學(xué)生】思考、舉手回答通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知（20min）【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)，講解博客管理系統(tǒng)登錄模塊的設(shè)計(jì)流程15.6登錄模塊設(shè)計(jì)15.6.1創(chuàng)建登錄表單游客在注冊(cè)完成后，需要登錄才能使用博客管理系統(tǒng)的主要功能，實(shí)現(xiàn)登錄首先要設(shè)計(jì)一個(gè)表單用來(lái)提交數(shù)據(jù)。代碼如下：<formaction="./doAction.php?a=login"method="post"><tablewidth="380"border="0"cellspacing="15"><tr><tdclass="you">用戶名<span>*</span></td><tdclass="zuo"><inputtype="text"name="name"/></td></tr><tr><tdclass="you">密碼<span>*</span></td><tdclass="zuo"><inputtype="password"name="pass"/></td></tr><tr><tdclass="you">驗(yàn)證碼<span>*</span></td><tdclass="zuo"><divstyle="float:left;"><inputtype="text"name="code"style="width:100px;"/></div><divstyle="float:left;margin-left:10px;"><imgid="checkpic"onclick="changing();"src='code.php'/></div></td></tr><trstyle="text-align:center;"><tdclass="btn"colspan="2"><inputtype="submit"value="登錄"/><inputtype="reset"value="重置"/></td></tr></table></form>15.6.2登錄驗(yàn)證的實(shí)現(xiàn)當(dāng)用戶填寫完登錄信息后，單擊“登錄”按鈕，便會(huì)執(zhí)行“doAction.php”中的“l(fā)ogin”程序，該程序用于查詢數(shù)據(jù)庫(kù)，判斷用戶登錄賬號(hào)和密碼是否與數(shù)據(jù)庫(kù)中一致。代碼如下：//登錄case"login": //判斷驗(yàn)證碼 if($_POST['code']!=$_SESSION['vcode']){ echo("<script>alert('驗(yàn)證碼不正確！');history.go(-1);</script>"); exit(); } //定義sql語(yǔ)句，并發(fā)送執(zhí)行 //獲取表單提交的信息 @$name=$_POST['name']; @$pass=$_POST['pass']; if(empty($name)||empty($pass)){