PHP网站开发项目式教程教案任务5-2-验证码的作用与创建

1、PHP网站开发项目式教程教案任务5-2-验证码的作用与创建PHP网站开发项目式教程教案任务5-2-验证码的作用与创建PHP网站开发项目式教程教案任务5-2-验证码的作用与创建5-2 验证码的作用与创建课程内容信息说明所属任务任务五 邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的邮箱注册界面的设计和表单数据验证，具备了项目基础。教学目标知识目标1.理解在网站中应用验证码的重要性2.掌握随机产生指定范围和个数验证码字符的方法3.掌握创建图片、输出图片、在图片中输出文本的方法能力目标1.能够使用rand()、range()、array_merge()、imagecreatetruecol

2、or()、imagettftext()等函数生成图片验证码2.拓展验证码字符范围，培养举一反三的创新思维和创新设计能力素质目标（包含课程思政）1.针对网站中的各种可能的安全隐患以及字符角度颜色的精细设置，培养精益求精的工匠精神2.养成代码规范习惯，提高排错能力重点1.产生指定范围、指定个数的验证码字符2.使用函数生成并输出图片3.使用函数imagettftext()在图片中输出字符难点1.产生验证码字符的操作流程2.如何理解输出页面文本或元素与输出图像之间的互斥性3.如何设置字符在图片中的坐标教学策略信息化手段应用交互课件、动画演示流程图教学方法讨论法、启发引导、问题导向、讲授法学习方法课前预

3、习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题，安排预习作业（图片验证码预习作业-1）5-5.2-1函数range()、array_merge()和rand()5-5.2-2图片验证码功能及要求说明5-5.2-3产生图片验证码字符5-5.2-4图像的创建及输出5-5.2-5设置验证码字符的字体、角度和坐标5-5.2-6以随机颜色和角度显示字符2.设计职教云头脑风暴问题、抢答问题、摇一摇问题和课堂讨论问题，为课堂使用做准备3.搜索课堂教学中播放的验证码相关视频及其他材料4.批阅学生的预习作业1.观看视频5-5.2-1（约5分钟

4、）5-5.2-2（约3分钟）5-5.2-3（约8分钟）5-5.2-4（约6分钟）5-5.2-5（约5分钟）5-5.2-6（约5分钟）2.思考翻转课堂问题，完成预习作业（约20分钟）3.完成“课前预习中的难点问题调查问卷”课中活动（检查预习效果，讲解重点难点）及时间安排1.导入模块-说明应用验证码的重要性（4分钟）2.验证码字符的随机产生（26分钟）3.创建并输出图片（15分钟）4.在图片中输出字符（35分钟）5.课中考核与总结（10分钟）环节1-导入模块：应用验证码的重要性（4分钟）重点：说明验证码的作用，引出核心内容教学手段：热点新闻冲击教师活动学生活动（1）显示没有验证码的注册界面，启用抢

5、答问题：缺少验证码的注册界面，会有什么后果？教师讲解没有验证码的危害-暴力注册导致的数据库数据量膨胀问题，说明应用验证码的重要作用（2分钟）学生思考并回答问题、听课（2）启用课堂讨论-未来的程序猿，你该怎样做？课程思政：教导学生开发网站或者手机app时要尽最大努力满足客户需求，保护好客户的网站不被恶意破坏，培养学生精益求精的工匠精神（2分钟）参与讨论，思考自己的未来环节2-验证码字符的随机产生（26分钟）重点：产生指定范围内的、指定个数的验证码字符难点：产生验证码字符的流程教学方法：问题导向、设置障碍、启发引导法教师活动学生活动（1）检查课前预习效果，启用摇一摇问题：创建图片验证码的三个步骤是

6、什么？为何不能直接使用第一步的结果作为验证码？教师展开讲解（3分钟）学生回答问题、听课（2）启用抢答问题：产生验证码字符的规则有哪些？（2分钟）强调要注重项目需求，按照规则要求完成项目功能学生回答问题（3）解决重点+难点：产生验证码字符的流程如何？（流程图展示讲解）启用头脑风暴问题：产生验证码字符需要哪几个步骤？（5分钟）学生听课、回答问题（4）解决重点：使用代码实现功能（应用交互课件）学生登录技能云平台使用交互课件按照提示完成代码设计，熟悉代码，之后要在真实环境中编写代码实现创新（6分钟）学生练习（5）在代码中设置障碍，学生抢答解决问题，完成重点和难点的考核（10分钟）学生查找解决问题环节3

7、-创建并输出图片（15分钟）重点：创建、调色、填充、输出图片的函数格式难点：如何理解输出页面文本或元素与输出图像之间的互斥性教学方法：问题导向、设置障碍、启发引导法教师活动学生活动（1）解决难点：如何理解输出页面文本或元素与输出图像之间的互斥性？（设置障碍，出现问题，解决问题加深学生理解）以设置障碍的方式，给定如图所示的有错误代码运行代码，启用抢答问题：为什么不能正常输出图像？ 教师讲解echo输出文本（第10行）与imagepng()输出图像（第15行）之间的互斥性并说明解决问题的方案；进一步引入新的错误（例如程序开始前的一个小空格，或者在代码外围增加），继续观察效果，强调错误的原因，引导学

8、生深入理解这一问题，从而避免类似错误，强调编程的良好习惯，培养精益求精的工匠精神。（10分钟）学生观察代码，思考并回答问题听讲并提供解决问题的方案（告知老师要去掉哪一行代码）（2）启用摇一摇操作问题：如何将输出图像的颜色设置为白色？教师简介imagecoloralocate()和imagefill()两个函数的作用（5分钟）学生登台实操补充代码将背景色变为白色环节4-在图片中输出字符（35分钟）重点：使用函数imagettftext()在图片中输出字符难点：如何设置字符在图片中的坐标教学方法：观察法、反证法、动画演示教师活动学生活动（1）讲解函数imagettftext()中的8个参数，强调角

9、度和颜色取值问题讲解之后，给出示例，启用抢答问题：参数 14、0、10、20分别代表什么？启用头脑风暴问题：输出字符时哪些因素是随机产生的？ 启用摇一摇问题：随机产生字符颜色时，三原色分量取值范围为何限制在0-150之间而不是0-255之间？教师使用反例加以强调；完成字体设置（15分钟）听讲、思考回答问题（2）解决难点：如何确定字符的横坐标？（动画演示）启用抢答问题：每个字符所占区域在图像中起始横坐标分别是多少？教师分析说明启用头脑风暴问题：如何在循环体中根据图像宽度100和循环变量$i的取值计算出每个区域起始横坐标$x？请写出公式。教师分析说明启用课堂讨论-开动脑筋吧：上面得到的横坐标$x（

10、0,25,50,75）能否作为字符左下角顶点横坐标？为什么？教师分析说明大家一起来思考：若要保证字符倾斜45时仍旧能够显示在框内，要将字符向右移动几个像素？怎样计算？教师讲解（12分钟）学生回答问题、听讲跟随教师完成字符横坐标的设置（3）解决难点：确定字符的纵坐标启用摇一摇问题：字符左下角纵坐标能否直接使用24（图像的顶端纵坐标为0，底部为24）？为什么？教师分析说明大家一起来思考：若要保证字符倾斜 -45时仍旧能够显示在框内，要将字符向上移动几个像素？怎样计算？教师分析讲解（8分钟）学生回答问题、听讲跟随教师完成字符纵坐标的设置环节5-课中考核与总结（10分钟）（1）完成职教云创建图片验证码相关课堂小测试（5分钟）（2）学生总结本次课的收获（2分钟）（3）教师总结重难点及学生遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）在职教云课堂课后活动中做总结。（2）创新应用能力培养：改写随机生成的验证码字符：要包含小写英文字母、需要生成的字符由4个变为6个。（1）教学效果：本次课的教学目标全部完成，根据课堂考核效果来看，78%以上学生对重点难点都能理解掌握，约16%的学生对字符坐标的设置缘由不是很理解，但是能够记住怎样用，需要课后继续巩固，另有6%