《PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)》模擬教學(xué)輸出驗(yàn)證碼字符

團(tuán)隊(duì)合作責(zé)任開(kāi)拓專業(yè)：軟件技術(shù)課程：PHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)主題：表單數(shù)據(jù)處理--以注冊(cè)和登錄為例第4學(xué)時(shí)模擬教學(xué)2019年山東省職業(yè)院校教學(xué)能力大賽教案目錄

Contents教案

目錄你的數(shù)據(jù)合法了嗎？-注冊(cè)表單的數(shù)據(jù)驗(yàn)證1驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的作用與創(chuàng)建2驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的升級(jí)、加載與刷新3驗(yàn)證碼為你保駕護(hù)航-驗(yàn)證碼的正確性判斷4驗(yàn)證碼為你保駕護(hù)航-表單數(shù)據(jù)回填5你心儀的賬號(hào)被人用了嗎？-注冊(cè)信息的查重6你的數(shù)據(jù)會(huì)去哪里？-注冊(cè)信息的保存與加密7你的賬號(hào)能用了嗎？-實(shí)現(xiàn)登錄功能8教學(xué)內(nèi)容

Contents驗(yàn)證碼的作用說(shuō)明0102創(chuàng)建圖片驗(yàn)證碼重點(diǎn)+難點(diǎn)：創(chuàng)建指定個(gè)數(shù)和范圍的驗(yàn)證碼字符在圖片中輸出驗(yàn)證碼字符創(chuàng)建圖片驗(yàn)證碼的操作步驟生成并輸出淺色背景圖片產(chǎn)生驗(yàn)證碼字符在圖片上輸出驗(yàn)證碼字符JV3UWEW6產(chǎn)生驗(yàn)證碼字符第三步WEW6第一步第二步課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升第三步在圖片上輸出驗(yàn)證碼字符重點(diǎn)

難點(diǎn)重點(diǎn)內(nèi)容：

函數(shù)imagettftext()中8個(gè)參數(shù)的設(shè)置教學(xué)方法：講授法+啟發(fā)引導(dǎo)法難點(diǎn)內(nèi)容：字符的字體、字號(hào)、角度及坐標(biāo)的綜合設(shè)置教學(xué)方法：動(dòng)畫(huà)演示+問(wèn)題導(dǎo)向法課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升關(guān)于函數(shù)imagettftext()功能：

在圖像中輸出文本，可以是各種ASCII字符，可以是漢字格式：imagettftext(圖像,字號(hào),角度,橫坐標(biāo),縱坐標(biāo),顏色,字體,文本)課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升第二步生成的圖像$imgPHP7使用的GD庫(kù)為GD2，所以字號(hào)以磅為單位，14磅略小于20px上面由左向右分別是90°、45°、0°、-45°、-90°的效果，為了防止傾斜角度太大之后字符被切割，實(shí)際使用-45°~45°之間的取值設(shè)置字符

左下角坐標(biāo)輸出字符時(shí)使用的顏色中文或西文字體文件輸出驗(yàn)證碼字符時(shí)，為了使用不同效果顯示每個(gè)字符，要求一次輸出一個(gè)字符關(guān)于函數(shù)imagettftext()課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升例如給定代碼

imagettftext($img,14,0,10,20,$red,"times.ttf",'AB')搶答問(wèn)題：參數(shù)14、0、10、20分別代表什么？在圖像$img中使用14磅字號(hào)、紅色文本、timesnewroman字體坐標(biāo)（10,20）處開(kāi)始輸出無(wú)傾斜的字符AB生成圖示的圖片驗(yàn)證碼效果頭腦風(fēng)暴問(wèn)題：根據(jù)圖示效果，輸出字符時(shí)哪些因素是隨機(jī)產(chǎn)生的？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升字符的顏色、角度、坐標(biāo)等數(shù)據(jù)都需要隨機(jī)產(chǎn)生。角度直接使用rand(-45,45)產(chǎn)生即可。重點(diǎn)：輸出字符的顏色問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升搖一搖問(wèn)題：

是否可以使用下面代碼隨機(jī)產(chǎn)生字符的顏色？為什么？$color=imagecolorallocate($img,rand(0,255),rand(0,255),rand(0,255));不可以，上述組合中三原色分量取值極有可能同時(shí)產(chǎn)生了較大值，例如得到imagecolorallocate($img,250,255,238)，此時(shí)的顏色非常淺，在淺色背景圖像中很難識(shí)別隨機(jī)產(chǎn)生三原色分量取值時(shí)，使用rand(0,180)產(chǎn)生0-180之間的取值，這樣會(huì)犧牲一部分顏色，但是能夠保證每個(gè)字符的清晰度。$color=imagecolorallocate($img,rand(0,180),rand(0,180),rand(0,180));諄諄教導(dǎo)未來(lái)的程序猿，你們必須要有客戶至上精益求精的工匠精神，充分考慮到程序中的每一個(gè)細(xì)節(jié)，盡最大可能提升客戶體驗(yàn)感。未來(lái)的程序猿，你該怎樣做？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升輸出字符的坐標(biāo)問(wèn)題坐標(biāo)設(shè)置連環(huán)問(wèn)題1--搶答問(wèn)題：若$string變量?jī)?nèi)容為“JV3U”，需要使用幾次循環(huán)輸出所有字符？循環(huán)變量$i的取值范圍如何？每個(gè)字符所占區(qū)域在圖像中起始橫坐標(biāo)分別是多少？課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升0255075坐標(biāo)設(shè)置連環(huán)問(wèn)題2--頭腦風(fēng)暴問(wèn)題：如何在循環(huán)體中根據(jù)圖像寬度100和循環(huán)變量$i的取值計(jì)算出每個(gè)區(qū)域起始橫坐標(biāo)$x？請(qǐng)寫(xiě)出公式。$x=(100/4)*$i;($i=0,1,2,3)100px25px4次循環(huán)，0、1、2、3輸出字符的坐標(biāo)問(wèn)題-橫坐標(biāo)課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升坐標(biāo)設(shè)置連環(huán)問(wèn)題3—課堂討論“開(kāi)動(dòng)腦筋吧”：上面得到的橫坐標(biāo)$x（0,25,50,75）能否作為字符左下角頂點(diǎn)橫坐標(biāo)？為什么？BBBBBB0°10°20°30°40°45°0°90°向右移動(dòng)的像素?cái)?shù)-難點(diǎn)問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升BBBBBB0°10°20°30°40°45°坐標(biāo)設(shè)置連環(huán)問(wèn)題4—一起來(lái)思考：若要保證字符傾斜45°時(shí)仍舊能夠顯示在框內(nèi)，要將字符向右移動(dòng)幾個(gè)像素？怎樣計(jì)算？根據(jù)圖中輸出字母的效果你都能發(fā)現(xiàn)什么？（字號(hào)都是20px）課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升（1）西文字體下，英文字母所占寬度差距很大，其中M、W寬度最大（2）字號(hào)大小20px，相當(dāng)于寫(xiě)英文字母時(shí)四線三格的高度，字母的實(shí)際高度約占12px左右，由此，當(dāng)字符傾斜45°時(shí)，向左探出的寬度約為12sin45°，即8-9像素，右側(cè)要留下足夠M或W之類較寬字符占據(jù)的空間，因此向右移動(dòng)8個(gè)像素即可B45°8px確定的左下角橫坐標(biāo)課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升082533505875834個(gè)字符左下角橫坐標(biāo)為固定值$x=(100/4)*$i+8（$i為循環(huán)變量，取值0,1,2,3），分別是8、33、58、83輸出字符的坐標(biāo)問(wèn)題-縱坐標(biāo)課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升坐標(biāo)設(shè)置連環(huán)問(wèn)題5—搖一搖問(wèn)題：字符左下角縱坐標(biāo)能否直接使用24（圖像的頂端縱坐標(biāo)為0，底部為24）？為什么？BBBBBB0°-10°-20°-30°-40°-45°向上移動(dòng)的像素?cái)?shù)-難點(diǎn)問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升坐標(biāo)設(shè)置連環(huán)問(wèn)題6—大家一起來(lái)思考：若要保證字符傾斜-45°時(shí)仍舊能夠顯示在框內(nèi)，要將字符向上移動(dòng)幾個(gè)像素？怎樣計(jì)算？BBBBBB0°-10°-20°-30°-40°-45°向上移動(dòng)的像素?cái)?shù)-難點(diǎn)問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升除了較寬的幾個(gè)字母，其它字母所占寬度都小于高度，高度若為12px，寬度為8-10px，由此，當(dāng)字符傾斜-45°時(shí)，向下探出的高度約為8sin45°-10sin45°，即5-8像素，縱坐標(biāo)最大可取用19px，最小取用16px，這樣既能保證字符傾斜后在可見(jiàn)區(qū)域內(nèi)，又可做到上下浮動(dòng)B-45°6px確定的坐標(biāo)范圍課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升082533505875831619上圖中紅色加粗線條即為每個(gè)字符左下角坐標(biāo)范圍其中橫坐標(biāo)$x=(100/4)*$i+8（$i為循環(huán)變量，取值0,1,2,3）縱坐標(biāo)$y=rand(16,19)輸出字符的字體問(wèn)題課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升使用函數(shù)imagettftext()輸出字符時(shí)需要設(shè)置字體，因?yàn)槭褂玫氖怯⑽淖帜?，故而選用TimesNewRoman字體，需要使用如下步驟完成設(shè)置：從系統(tǒng)盤符的windows/fonts文件夾中找到TimesNewRoman之后復(fù)制到y(tǒng)zm.php文件所在的文件夾中，文件名自動(dòng)變?yōu)閠imes.ttf在yzm.php文件中增加代碼$fontfile="times.ttf";即可在圖片中輸出字符-代碼實(shí)現(xiàn)應(yīng)用交互課件生成驗(yàn)證碼字符，熟悉代碼培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)膽B(tài)度課堂練習(xí)課前預(yù)習(xí)課中探究課中練習(xí)課中考核課后提升代碼障礙排除課堂

小測(cè)試教師給定有錯(cuò)誤的代