PHP网站开发项目式教程全册教案完整版教学设计

PHP网站开发项目式教程全册教案完整版教学设计任务1和2PHP基础和环境搭建课程内容信息说明主题PHP基础知识简介和环境搭建所属任务任务1、任务2教学目标（与课程标准目标对应关系）掌握PHP基础知识，包括动态网页与静态网页的区别、PHP的概念及能够实现的功能知识目标能力目标掌握PHP的环境需求、Apache服务器主目录的概念熟悉集成化环境的功能及作用能够独立搭建PHP集成化开发环境能使用记事本创建一个简单的php程序能使用web服务器运行php程序静态网页与动态网页的区别XAMPP环境的用法重点难点Apache服务器主目录的概念和用法Apache服务器主目录的概念和用法教学方法与教学手段教学方法教学手段线上线下结合、项目驱动、启发引导、问题导向、案例演示信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.PHP基础知识简介理论讲授、提问（30教师活动学生活动（1）静态网页和动态网页的特点及区别提出问题：静态网页和动态网页分别在哪一端运行？运行步骤如学生回答问题学生听课何？（2）讲解PHP的基本概念及PHP能够完成的页面功能（3）启发大家思考：php文件中能否使用html标记、css样式代码？学生回答问题html文件中能否包含php代码？为什么？2.xampp环境搭建（30演示+学生实操分钟）教师活动学生活动演示xampp集成化环境的搭建过程学生同步完成学生解决问题学生会在端口号、数据库启用等环节出现各种问题，教师帮助学生解决问题3.Apache主目录（15讲授、演示分钟）教师活动学生活动讲解web服务器主目录的作用讲解Apache主目录的用法学生听课完成操作创建一个简单的PHP文件并运行4.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动检查学生作业，总结作独立创建一个简单的PHP文件，将其保存在主目录和主目录的子文业中的问题，并反馈给件夹中，分别运行，并提交作业学生任务3-1PHP语法基础课程内容信息说明主题所属任务PHP语法基础任务3教学目标掌握PHP中常量变量的定义及表达式运算符的用法知识目标掌握PHP中输出语句的用法能够正确定义并使用常量和变量能力目标能够正确使用PHP中的运算符能够熟练使用echo语句输出各种结果变量的定义和运算符的应用输出语句的用法重点难点运算符中的完全相等和不完全相等单引号和双引号定界变量的不同作用教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.PHP标记、注释、常理论讲授、提问量和变量（20分钟）教师活动学生活动学生听课学生听课学生回答问题（1）讲解PHP的基标本记<?php…?>在代码中的用法和注意事项（2）讲解PHP的注释语句（3）讲解PHP中常量和变量的定义及使用方法头脑风暴问题：在给定的组合中找出合法的变量2.PHP中的运算符和表达式（30分钟）演示+学生实操教师活动学生活动简介基本的运算符学生听课详细讲解完全相等、不完全相等、相等和不等运算符的用法编写程序，分别输出表达式5==='5'、5=='5'、5!=='5'、5!='5'，学生听课并同步操作观察结果（分别使用echo和var_dump输出）3.PHP中的输出语句讲授、演示（25分钟）教师活动学生活动学生听课并同步完成操作讲解并演示输出语句echo和var_dump讲解变量使用双引号定界和单引号定界后的不同处理方法学生听课4.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目教师讲解测试中出现问题较多的题目，作为对知识的加强巩固小结（3分钟）测试学生听课，分析自己出问题的原因，找出症结对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动完成基础知识应用小示例作业存在变量$school=“山东商职学院”，$depart=“云计算技术与应用产检查学生作业，总结作业学院”，$student=“2020级全体同学”完成如下功能要求：业中的问题，并反馈给学生将三个变量的值使用一个输出语句在同一行中显示出来使用三个输出语句在同一行中显示出来使用一个输出语句分三行显示使用三个输出语句分三行显示任务3-2PHP中的日期和时间课程内容信息说明主题所属任务PHP中的日期和时间任务3教学目标掌握日期时间函数date()中各种格式符的用法知识目标掌握时间戳函数strtotime()的作用和用法能够正确使用date()函数获取各种日期时间结果能力目标能够正确使用时间戳函数，并根据时间戳得到需要的日期时间日期时间函数date()中各种格式符的用法时间戳函数strtotime()的作用和用法重点难点将时间戳函数strtotime()的结果作为date()函数第二个参数并获取对应的日期教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.应用date()函数（30分钟）理论讲授、提问教师活动学生活动（1）date()函数中各种格式符的作用和用法学生听课（2）date()函数应用举例，获取各种日期时间结果学生听课并完成操作2.strtotime()函数（40演示+学生实操分钟）教师活动学生活动学生听课函数格式及作用讲解应用strtotime()函数进行处理，分别获取今天的日期、明天的日期、下个星期一的日期和三天后的日期学生听课并同步操作讲解在strtotime()函数中各种日期格式的写法3.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动检查学生作业，总结作完成作业业中的问题，并反馈给求当前日期距离下一年（例如2023年）元旦的天数学生创建文件，任务3-3流程控制课程内容信息说明主题所属任务流程控制任务3教学目标掌握PHP中if…elseif结构和switch结构的用法知识目标掌握for循环结构的用法能够使用多分支结构完成程序功能处理能力目标能够使用for循环结构完成月历的输出重点综合运用分支和循环结构完成月历的输出难点综合运用分支和循环结构完成月历的输出教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.讲解分支结构（20分代码演示、提问钟）教师活动学生活动（1）使用if..elseif结构完成的成绩等级判断程序中，各个条件的顺学生思考并回答问题序能否随意颠倒？为什么？（2）简介switch语句，并使用该结构修改成绩等级判断程序学生听课并完成操作2.使用循环结构完成月历输出（60分钟）讲解、演示+学生实操教师活动学生活动演示月历的运行效果，分析功能实现步骤学生听课按步骤完成月历功能学生听课并同步操作4.小测试（7分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动检查学生作业，总结作业中的问题，并反馈给学生修改月历输出形式，将星期日放在最后一列，并提交作业任务3-4数组课程内容信息说明主题所属任务数组任务3教学目标掌握PHP中数组的分类及定义方法知识目标掌握数组的遍历方法能够正定确义并处理数组元素能力目标能够完成数组的遍历重点关联数组的定义及遍历难点关联数组的定义及遍历教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.讲解数组的分类及讲解、提问定义（30分钟）教师活动学生活动（1）讲解array()函数，定义并访问索引数组学生听课（2）定义并访问关联数组学生听课并完成操作（3）使用数组结合日期时间函数输出当前日期是星期几的结果完成操作（4）混合数组中的索引问题学生听课并回答问题2.遍历数组（45分钟）讲解、演示+学生实操教师活动学生活动学生听课讲解使用each()函数遍历数组时的用法讲解使用foreach()方法遍历数组的用法学生听课并同步操作3.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动完成作业检查学生作业，总结作创建一个包含指定学生信息的一维数组$stu，使用循环遍历数组的方业中的问题，并反馈给式逐个输出元素键名和值，并提交作业学生任务4-1表单界面设计及数据验证课程内容信息说明主题所属任务表单界面设计及数据验证任务4教学目标理解数据验证对表单提交数据的重要作用知识目标掌数握据验证函数的定义和用法能力目标能够按照要求完成表单数据的合法性验证重点数据验证函数的定义和用法数据验证函数的定义和用法难点Return和returnfalse的作用教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.完成表单界面设计演示（30分钟）教师活动学生活动（1）说明“自我介绍”表单界面的组成结构及各种元素的name和学生听课id的定义要求（2）完成表单界面的创建学生听课并完成操作2.完成表单数据验证（45分钟）讲解、演示+学生实操教师活动学生活动说明不同表单元素的数据验证要求学生听课使用html5表单元素属性完成部分表单元素的数据验证学生听课并同步操作定义脚本函数完成确认密码的验证，并调用函数强调函数内部returnfalse的作用函数时return的重要作用学生听课并同步操作演示并解释表单onsubmit=”returnfalse”的作用和调用3.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分自析己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动检查学生作业，总结作业中的问题，并反馈给学生完成作业完善表单界面设计和数据验证功能任务4-2表单数据提交课程内容信息说明主题所属任务表单数据提交任务4教学目标掌握数组$_POST和$_GET的作用和用法知识目标掌握函数implode()的作用和用法掌握函数isset()的作用和用法能力目标能够创建php文件接收并处理表单提交的数据数组$_POST和$_GET的作用和用法重点函数implode()的作用和用法函数isset()的作用和用法难点复选框组提交数据的处理方法单选按钮和复选框组未选时服务器端问题的解决方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.数组$_POST和$_GET的作用和用法讲解、演示（45分钟）教师活动学生活动（1）数组$_POST和$_GET的作用和用法学生听课（2）创建php文件，获取并处理自我介绍表单所提交的数据学生听课并完成操作引出复选框组提交数据在输出时的结果，并引导大家思考问题（3）讲解复选框组提交数据的结果，并使用implode()函数对数组结学生听课并完成操作果进行合并处理2.使用isset函数（30讲解、演示+学生实操分钟）教师活动学生活动演示在表单界面中不选择单选按钮组和复选框组元素并提交数据时学生听课的问题，说明原因引入isset()函数判断数组元素是否存在，并根据结果进行处理学生听课并同步操作3.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出教师讲解测试中出现问题较多的题目，作为对知识的加强巩固问题的原因，找出症结小结（3分钟）对学生课前预习效果、本次课的实施效果进行点，评并提出新的要求课后活动学生活动（约30分钟）教师活动完成作业检查学生作业，总结作若是要求用户必须选择性别和兴趣爱好，才能提交数据，如何完成？业中的问题，并反馈给脚本代码完成作业并提交使用学生任务4-3文件上传课程内容信息说明主题所属任务文件上传任务4教学目标掌握系统数组$_FILES的作用和用法掌握move_uploaded_file()函数的作用和用法知识目标掌握多文件上传后的处理方法掌握大文件上传时PHP配置文件的设置方法能力目标能够完成文件的上传和处理操作系统数组$_FILES的作用和用法重点move_uploaded_file()函数的作用和用法多文件上传后的处理方法move_uploaded_file()函数的作用和用法难点多文件上传后的处理方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1.系统数组$_FILES的作用和用法（40分理论讲授、提问钟）教师活动学生活动（1）创建up.html文件，用于上传单个文件学生听课并完成操作（2）讲解系统数组$_FILES中的键名的作用和用法学生听课（3）创建up.php文件，获取上传文件的信息并输出，对上传文件的学生听课并完成操作大小使用round()函数进行四舍五入处理（4）讲解move_uploaded_file()函数的作用和用法，使用该函数将上传的文件保存到指定位置，引入文件名汉字编码处理函数iconv()的学生听课并完成操作应用2.多文件上传（30分演示+学生实操钟）教师活动学生活动讲解多文件上传是文件域名称设置方法及multiple属性的应用学生听课详细使用循环结构在服务器端进行处理的方法学生听课并同步操作3.大文件上传的设置方法（5分钟）讲授、演示教师活动学生活动说明PHP中默认能够上传的文件大小，讲解在PHP.ini配置文件中学生听课并同步完成操进行相关设置的方法作4.小测试（12分钟）完成在教学平台中组建的小测试教师活动学生活动学生利用5-8分钟完成启动课堂测试，测试内容基本同课前预习后的测试题目测试学生听课，分析自己出问题的原因，找出症结教师讲解测试中出现问题较多的题目，作为对知识的加强巩固小结（3分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动检查学生作业，总结作完成作业业中的问题，并反馈给上传多个文件，并按照指定要求输出每个文件的信息学生5-1注册表单的数据验证课程内容信息说明所属任务任务五邮箱注册和登录功能实现已有基础（学情）课前预习已经完成了邮箱注册界面的设计和简单注册数据的提交，为表单数据合法性验证准备了操作平台。教学目标1.理解表单数据合法性验证的重要性知识目标能力目标2.掌握使用正则表达式完成注册表单数据验证的方法3.掌握使用js函数完成两次密码的一致性判断的方法1.能按照要求完成表单数据验证，确保提交数据的合法性2.拓展数据验证的更多方法，培养举一反三的创新思维和创新设计能力素质目标1.针对网站中不规范的数据填写，培养精益求精的工匠精神2.养成代码规范习惯（包含课程思政）1.理解数据验证的重要性重点难点2.使用HTML5正则表达式完成邮件地址3.使用js函数完成密码和确1.如何根据不2.数据校验中函数内部和外部的returnfalse各自有什么作用？、密码和手机号的数据验证认密码一致性判断同需求设计符合要求的正则表达式教学策略信息化手段教学方法学习方法动画展示数据验证的重要性及returnfalse和returntrue的不同效果讨论法、启发引导、问题导向、讲授法课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.观看视频1.布置学生观看如下视频，设计翻转课堂问题，安排预习5-5.1-1（约5分钟）作业（图片验证码预习作业-1）5-5.1-1表单元素数据要求说明的添加5-5.1-2注册表单的数据验证-讲解部分5-5.1-3注册表单的数据验证-操作部分5-5.1-4脚本文件的引用与验证函数的调用5-5.1-5表单数据验证-密码与确认密码验证5-5.1-6使用H5表单元素新属性完成验证5-5.1-2（约3分钟）5-5.1-3（约7分钟）5-5.1-4（约5分钟）5-5.1-5（约6分钟）5-5.1-6（约6分钟）2.思考翻转课堂问题，完成预习作业-设计注册界面并完成简单数据2.设计职教云头脑风暴问题、抢答问题、摇一摇问题和课提交（约30分钟）堂讨论问题，为课堂使用做准备3.完成“课前预习中的难点问题调3.批阅学生的预习作业查问卷”课中活动（检查预习效果，讲解重点难点）及时间安排1.导入模块-表单验证的2.使用HTML5表单元素新属性3.使用js函数完成密码和确认密码一4.课中考10分钟）重要性（5分钟）40分钟）35分钟）进行数据验证（致性判断（核与总结（环节1-导入模块：表单数重点：表单数据验证的重要性据验证的重要性（5分钟）教学手段：问题导向教师活动学生活动讲解重点：表单数据验证的重要性（演示+讲解）页面，教师输入不符合要求的数据，说明给用户带来的困惑。启用抢答问题：为什么注册成功的账号无法登录？引入课程思政-培养精益求精的工匠精神，避免垃圾数据，提运行注册学生参与讨论、听课5分升用户体验（钟）环节2-使用HTML5表单重点：完成对邮件地址、密码和何设计邮件地址、密码和手机号的正则表达式教学方法：问题导向、设置障碍、启发引导法手机号的合法性验证元素新属性进行数据验证（40分钟）难点：如教师活动学生活动（1）解法，引导学生步步前行）第一步，解决首位数1的要求学生思考问第二步，解决第2位数字的要求：根据手机号中第2位数的实际应用情况，引题，导学生写出符合中间字符要求的正则式，强调正则表达式中或运算的应用完成练习第三步，解决后面9个数字的要求：写出相应的正则式，强调设置字符个数的决重点+难点：设计正则表达式完成手机号验证（化整为零、启发引导：引导学生写出符合首字符要求的正则式听讲方法课堂练习：在手机号文本框中定义正则表达式，完成手机号的合法性验证，输入各种不符合要求的手机号，观察效果（8分钟）（2）启用头脑风暴问题：你认为表单数据验证在浏览器端进行还是在服务器端学生思考问进行？为什么？题、听讲教师强调在浏览器端进行数据验证的原因和重要性（5分钟）知识，启用头脑风暴问题：HTML5中不空，需要使用的属性是什么？设置正则表达式，需要使用的属性是什么？回答问题、听（3）回顾前导课程的允许表单元素为学生回答之后，教师加以简单说明，并在邮件地址和密码框中设置不允许为空，课运行让学生观察效果。（5分钟）（4）解决重点+难点：引导法，随机提问，引导学生步步前行）第一步，解决首字符的要求：引导学生写出符合首字符要求的正则式，强调符范围的写法设计正则表达式，完成邮件地址验证（化为整零、启发字学生思考问题，听讲引导学生写出符合中间字符要求的正则式，第二步，解决中间部分字符的要求：强调要设置个数范围时需要注意的问题第三步，解决尾字符的要求：（6）解决重点+难点：启用头脑风暴问题：如何将需要的密码字符都提供给用户？引导学生字符都写入字符范围中，增加字符个数范围要求即可启用摇一摇问题：学生登台实操完成10分钟）让学生独立写出正则式（12分钟）设计正则表达式完成密码验证（启发引导法）学生思考问将需要的题回答问题，登台实操、听讲各种设计（环节3-使用js函数完成密码和确认密码一致性判断（35分钟）重点：判断两次密码一致性的js代码阻止非法数据提交的原方法：问题导向、启发引导、实例演示法函数的定义和调用难点：使用理教学教师活动学生活动（1）启用摇一摇回答问题：对于两次密码的一致性判断，为何不能使用HTML5学生思考并加以说明，引出使用js完成两次密码一致性判断的必要听讲并实操理（设计3个连环扣问题正则表达式完成？教师回答问题性（。4分钟）（2）解决难点：引导学生思考）第一个问题一起回答：使用js代码阻止非法数据提交的原点击什么按钮时能够将注册界面的数据提交给服务器？第二个问题头脑风暴：对应的事件属性是什么？点击submit按钮时，触发的是哪一个元素的什么事件？学生思考问第三个问题数据提交给服务器？教师对三个问题分别进行讲解动画演示onsubmit=returnfalse|true的应用，为returnfalse，无论数据是否符合要求，都不会将数据提交给服务器；若是否符合要求，都将数据提交给服务器10分钟）抢答问题：你认为在属性onsubmit中使用什么样的js代码可以阻止题、回答问题、听讲之后，教师总结若是onsubmit设置onsubmit设置为returntrue，无论数据是提出两次密码一致的验证函数的功能要求（（3）使用流程图讲解判断两次密码一致的操作流程4分钟）学生回答问启用摇一摇问题：如何改成单分支结构？（题、听讲（4）通过设置障碍完成课堂练习：函数的定义并调用分别设置函数内部缺少returnfalse、调用函数时缺少return运行效果学生完成练出现确认密码错误提示信息之后，用户会有怎样的感习根据执行结果提出问题：受和诉求？引导学生优化函数代码结构，引出课程思政-培养学生精益求精的工匠精神，设计友好用户界面，提升用户体验（17分钟）环节4-课中考核与总结（）完成1小测试（分5职教云表单数据验证相关课堂钟）（2）学生总结本次课的收获（2分钟）（3）教师总结重难点及学生遇到的（10分钟）各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）教学效果：本次课的教学目标全部完成，根据课堂考核效果来看，85%以上学生对重点难点都能理解掌握，约9%的学生（1）完成职教云课堂中的对returnfalse的问题处于似懂非懂的状态，需要课后继续巩固，课后总结。另有6%的同学没有达到要求，针对这几个同学，以额外布置作业（2）能力提升与拓展：使的方式督促他们学习。用正表则达式对手机号进行验证时并没有排除0号（2）教学特色：应用动画展示难点，抽象转为形象；问题贯穿时刻保持课堂活力。码的问题，若是要求手机号中不能允许出现连续4位或4位以上的0，完成相关验证。（3）教学反思：表单数据验证中，数据合法性验证函数内外的两个returnfalse的应用难度非常大，以前的教学中都是通过老师反复说明，学生只是根据结果去想象非法数据如何被阻止，使用了动画展示之后，抽象转为形象，达到了很好的效果，为进一步提升教学质量，在以后的教学中要多使用动画演示复杂的功能。5-2验证码的作用与创建课程内容信息说明所属任务任务五邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的邮箱注册界面的设计和表单数据验证，具备了项目基础。教学目标1.理解在网站中应用验证码的重要性知识目标能力目标2.掌握随机产生指定范围和个数验证码字符的方法3.掌握创建图片、输出图片、在图片中输出文本的方法1.能够使用rand()、range()、array_merge()、imagecreatetruecolor()、imagettftext()等函数生成图片验证码2.拓展验证码字符范围，1.针对网站中的各种可能的安全隐患以及字符角度颜色的精细设置，培养精益求精的工匠精神2.养成1.产生指定范围2.使用3.使用imagettftext()在图片中1.产生验证码字符的操作流程培养举一反三的创新思维和创新设计能力素质目标（包含课程思政）代码规范习惯，提高排错能力、指定个数的验证码字符重点难点函数生成并输出图片函数输出字符2.如理何解输出页面文本或元素与输出图像之间的互斥性3.如设何置字符在图片中的坐标教学策略信息化手段教学方法学习方法应用交互课件、动画演示流程图讨论法、启发引导、问题导向、讲授法课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题，安排预习1.观看视频-1）5-5.2-1（约5分钟）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.思考翻转课堂问题，完成预习作作业（图片验证码预习作业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.设计职教云头脑风暴问题、抢答问题、摇一摇问题和课业（约20分钟）堂讨论问题，为课堂使用做准备3.完成“课前预习中的难点问题调3.搜索课堂教学中播放的验证码相关视频及其他材料查问卷”4.批阅学生的预习作业课中活动（检查预习效果，讲解重点难点）及时间安排1.导入模块-说明2.验证码字符的随机产生（3.创建15分钟）4.在图片中输出字符（35分钟）5.课中考10分钟）应用验证码的重要性（4分钟）26分钟）并输出图片（核与总结（环节1-导入模块：应用验重点：说明验证码的作用，引出核心内容证码的重要性（4分钟）教学手段：热点新闻冲击教师活动学生活动（1）显示没有验证码的注册界面，启用抢答问题界面，会有什么后果？教师讲解没有验证码的危害-暴力注册导致的数据库数据量膨胀问题，题、2分钟）-未来的程序猿，你该怎样做？课程思政：教开发网站或者手机app时要尽最大努力满足客户需参与讨论，思考自己保护好客户的网站不被恶意破坏，培养学生精益求精的工匠精神（2的未来：缺少验证码的注册学生思考并回答问听课说明应用验证码的重要作用（（2）启用课堂讨论导学生求，分钟）环节2-验证码字符的随机产生（26分钟）重点：产生指定范围内的、指定个数的验证码字符难点：产生验证码字符的流程教学方法：问题导向、设置障碍、启发引导法教师活动学生活动（1）检查课前预习效果，启用摇一摇问题：创建图片验证码的三个步骤是什么？为何不能直接使用第一步的结果作为验证码？学生回答问题、听课教师展开讲解（3分钟）（2）启用抢答问题强调要注重项目需求，按照规则要求完成项目功能（3）解决重点+难点：产生验证码字符的流程如何？（流程图展示讲解）：产生验证码字符的规则有哪些？（2分钟）学生回答问题学生听课、回答问题启用头脑风暴问题：产生验证码字符需要哪几个步骤？（5分钟）（4）解决重点：使用代码实现功能（应用交互课件）学生登录技能云平台使用交互课件按照提示完成代码设计，熟悉代码，学生练习之后要在真实环境中编写代码实现创新（6分钟）（5）在代码中设置障碍，学生抢答解决问题，完成重点和难点的考核学生查找解决问题（10分钟）环节3-创建并输出图片重点：创建、调色、填充、输出图片的函数格式难点：如何理解输出页面文本或元素与输出图像之间的互斥性（15分钟）教学方法：问题导向、设置障碍、启发引导法教师活动学生活动（1）解决难点：如何理解输出页面文本或元素与输出图像之间的互斥性？（设置障碍，出现问题，解决问题加深学生理解）以设置障碍的方式，给定如图所示的有错误代码学生观察代码，思考并回答问题听讲并提供解决问题的方案（告知老师要去掉哪一行代码）运行代码，启用抢答问题：为什么不能正常输出图像？教师讲解echo输出文本（之间的互斥性并说明解决问题的方案；进一步引入新的错误（例如程序开始前的一个小空格，或者在代码外围增加<html></html>），继续观察效果，强调错误的原因，引导学生深入理解这一问题，从而避免类似错误，强调编程的良好习惯，培养精益求精的工匠精神。（10分钟）（2）启用摇一摇操作问题：如何将输出图像的颜色设置为白色？教师学生登台实操补充代简介imagecoloralocate()和imagefill()两个函数的作用（5分钟）码将背景色变为白色重点：使用函数第10行）与imagepng()输出图像（第15行）环节4-在图片中输出字符（35分钟）imagettftext()在图片中输出字符如何设置字符在图片中的坐标教学方法：观察法、反证法、动画演示难点：教师活动学生活动（1）讲解函数imagettftext()中的8个参数，强调角度和颜色取值问题讲解之后，给出示例，启用抢答问题：参数14、0、10、20分别代表什么？启用头脑风暴问题：输出字符时哪些因素是随机产生的？摇问题：随机产生字符颜色时，三原色分量取值范围为何限制在0-150之间而不是0-255之间？反例加以强调；完成字体设置（15分钟）听讲、思考回答问题启用摇一教师使用（2）解决难点：如何确定字符的横坐标？（动画演示）启用抢答问题：每个字符所占区域在图像中起始横坐标分别是多少？教师分析说明启用头脑风暴问题：如何在循环体中根据图像宽度100和循环变量$i的取值计算出每个区域起始横坐标$x？请写出公式。答回问题、听讲教师分析说明跟随教师完成字符横启用课堂讨论-开动脑筋吧：上面得到的横坐标$x（0,25,50,75）能否作坐标的设置为字符左下角顶点横坐标？为什么？教师分析说明大家一起来思考：若要保证字符倾斜45°时仍旧能够显示在框内，要将字符向右移动几个像素？怎样计算？教师讲解（12分钟）（3）解决难点：确定字符的摇一摇问题：字符左下角纵坐标能否直接使用24（图像的顶端纵0，底部为24）？为什么？纵坐标启用坐标为答回问题、听讲教师分析说明跟随教师完成字符纵大家一起来思考：若要保证字符倾斜-45°时仍旧能够显示在框内，要坐标的设置将字符向上移动几个像素？怎样计算？教师分析讲解（8分钟）环节5-课中考核与总结（10分钟）（）完成职教云创建图片验证码相关课堂小测试（分51钟）（2）学生总结本次课的收获（2分钟）（3）教师总结重难点及遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）教职教云课堂来看，78%以上学生对重点难点课后活动中做总结。设置缘由不是很理解，但是能够记住怎样用（2）创新应用能力另有6%的同学没有达到要求，针对这几个同学，要求小组长课下督促培养：改写随机生成他们学习。的验证码字符：要（2）教学特色：流程图动画解决程序流程难点；交互课件帮助学含小写英文字母、需生熟悉复杂代码；动画演示不同角度不同坐标的字符效果，通过视觉冲要生成的字符由4个击，帮助大家理解难点问题；问题贯穿时刻保持课堂活力。6个。（3）教学反思：回答问题占用时间较多，挤压了课堂练习的时间，以后的教适当控制回答问题的时间。学效果：本次课的教都能理解掌握，约16%的学生对字符坐，需要课后继续巩固，学目标全部完成，根据课堂考核效果（1）在标的包变为学中要5-3验证码的升级、加载与刷新课程内容信息说明所属任务任务五邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的邮箱注册界面的设计和表单数据验证，具备了项目基础；已经设计了不带干扰因素的图片验证码。教学目标1.掌握在验证码图片中添加干扰因素的做法（函数imageline()和知识目标能力目标imagesetpixel()的应用）2.掌握在页面中加载和刷新验证码的做法1.能够设计出安全性更高不易被机器识别的验证码，能够在任何注册或登录页面中自由加载和刷新验证码2.能够独立添加除黑点和直线之外的干扰因素（例如半圆形或三角形以及验证码字符的黏连效果），创建汉字验证码，培养创新思维和设计能力1.向他人求助之前能够通过查找资料自主尝试解决问题素质目标2.要秉持精益求精的精神，提升验证码的秉持精益求精的精神，追求页面的美观，做到精细化的布局和排版3.养成代码规范的习惯安全性，以保护客户利益；同样（包含课程思政）1.函数imageline()和imagesetpixel()的应用2.在页面中加载和刷新验证码重点难点1.如何实现验证码的刷新（js函数的定义及调用）教学策略信息化手段教学方法学习方法流程图动画演示讨论法、启发引导、问题导向、讲授法课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题，安排预习1.观看视频-2）5-5.2-7（约8分钟）5-5.2-8（约9分钟）5-5.2-9（约5分钟）2.思考翻转课堂问题，完成预习作作业（图片验证码预习作业5-5.2-7验证码图片中黑点和直线的生成5-5.2-8图片验证码的插入和刷新5-5.2-9扩展图片验证码2.设计职教云头脑风暴问题、抢答问题、摇一摇问题和课业（约20分钟）堂讨论问题，为课堂使用做准备3.完成“课前预习中的难点问题调查问卷”3.批阅学生的预习作业课中活动（检查预习效果，讲解重点难点）及时间安排1.教学2.在图片验证码中3.在注册界面中插入图片验证码（4.定义函数实现图片验证码的刷新5.课中考10分钟）目标导入（5分钟）增加黑点和直线等干扰因素（30分钟）10分钟）35分钟）操作（核与总结（环节1-教学目标导入（5以问题导入的方式说明已经设计的验证码存在的问题及升级的分钟）必要性，引入课程教学目标教师活动学生活动展示已有验证码效果，启用抢答问题：这样的验证码有学生思考并回答、听什么缺陷？需要添加什么因素？讲教师强调各种干扰因素对图片验证码的重要性，引入课程思政-继续培养学生精益求精客户至上的工匠精神。（5分钟）环节2-在图片验证码中增加黑点和直线等干扰因素（30分钟）重点：函数imageline()和imagesetpixel()的应用教学方法：启发引导、对比分析、流程图动画教师活动学生活动（1）讲解重点：函数imagepixel()的作用和说明该函数的作用和格式，回答问题，巩固与当前函数高度相似的函数imagefill()的格式及作用讲解重点+难点：随机设置100个黑色像素的：循环变量$i的初值和终值还可换成什么样的取值？为什么可以换？让学生注意不同环境中循环变量取值的要求安排课堂实操在：图片验证码中随机增加100个黑点（8分钟）（2）启用头脑风暴问题：函数imageline()需要几个参数？其中几个用于设置坐标？设置坐标的参数顺序如何？实操问题：选取学生登台实操，在图片验证码中随机增加两学生格式（讲授+启发引导）启用摇一摇。学生回答问题、听课、操作流程（流程图动画）完成操作启用抢答问题启用摇一摇回答问题、登台条直线实操启用抢答问题如：何将一条线控制在左侧，一条线控制在右侧？（8分钟）（3）安排学生完成黑点和直线等干扰因素的添加12像素的半圆作为干扰因素，半圆要封学生参与讨论+小组讨论—素质目标养成）问题，独立完成验证在已有验证码中增加一个半径、回答闭，位置随意（网上搜索学生搜索画圆弧的函数，通过小组讨论，确定实现上面功能时函数的参码的升级数取值形式启用抢答实操问题：完成半圆干扰因素的添加（环节3-在注册界面中插14分钟）重点：在注册页面中插入验证码及调整图片与文本对齐的方法入图片验证码（10分钟）教学方法：问题导向、启发引导法教师活动学生活动（1）启用到注册页面中？教师强调：只要图片，无论文件类型如何，加载到页面的方回答问题、听课法都是唯说明加载图片验证码的方法及设置图片元素name或id的必要性（4分钟）（2）在插入图片验证码之后，图片和前面的文本框从垂直方向没有对齐（图片向上文本框向下），页面效果如左图所示，引导学生观察头脑风暴问题：作为生成图片的yzm.php文件，要如何加载最终结果是一的，学生观察运行效果、抢答问题并登台实操产生该问题的原因是什么？如何解决问题得到右图所示效果？（学生写代码解决该问题）这种问题在页面设计中并不常见，因此，很多学生格没有设置顶端对齐所造成的，教师强调产生问题的生养成精益求精的项目开发习惯，考虑页面布局的每个细节，达到美观的效果。（6分钟）启用抢答问题：会想当然认为是表格原因，告诫学单元环节4-定义函数实现图片验证码的刷新操作（35分钟）重点：刷新的概念作用及验证码刷新的本质+难点：如何使用js函数实现验证码的刷新教学方法：问题导向、设置障碍、启发引导法重点教师活动学生活动（1）解决重点：刷新的概念作用及验证码刷新的本质（动画演示）启用摇一摇问题：页面刷新的概念是什么？刷新页面的作用是什么？教师加以解释说明启用头脑风暴问题：启用抢答问题：刷新整个注册页面，可否刷新验证码？能式实现验证码的刷新功能？为什么？动画，通过动画展示这种做法的严重缺陷。引出课程思政：开发项务必要随时注意提升用户的体验感！启用头脑风暴问题：刷新属于局部刷新，其本质是更换哪个页面元素的哪个属性的取值？图片验证码的刷新要重新运行的是哪个文件？否通过这种方回答问题、听讲演示目时对图片验证码的教师加以适当讲解和总结（8分钟）（2）说明使用js函数实现验证码刷新的三个步骤讲解重点，定义函数yzmupdate()（讲授+流程图动画演示）使用流程图动画说明函数功能的实现流程学生听课，完成操作学生完成操作启用头脑风暴问题：如何使用id获取图片元素？如何使用name获取图片元素？安排学生完成课程练习：根据流程图写出函数代码（6分钟）（3）提出第二步-在页面中增加span元素的操作要求启用摇一摇问题：图中所示文本使用什么元素添加？样式如何？安排学生完成操作（6分钟）（4）解决难点：浏览器的兼容性问题（实例直观展示+观察）教师分别在谷歌和IE浏览器中运行效果，解释IE浏览器没有成功刷新学生听课、思考的原因回答问题讲解为了证保浏览器的兼容性，给用户带来良好体问号?和随机数的重要应用，继续强调精益求精的工匠精神用中的重要性。验，在验证码刷新中引入在开发网络应启用抢答问题：js脚本中如何生成随机数？（8分钟）（5）课堂练习与提高学生登台实操并展示操作问题：如何实现点击验证码图片本身对验证码进行刷新？效果；在自己的项目启用抢答如何实现将光标放入文本框中也能对验证码进行刷新（7分钟）学生编写代码完成项目功能中完成验证码的插入和刷新环节5-课中考核与总结（1）完成职教云验证码应用相关（2）学生总结本次课的收获（2分钟）（5分钟）课堂小测试（10分钟）（3）教师总结重难点及学生遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）在职教云课堂课后活（1）教学效果：本次课的教学目标全部动中做总结。效果来看，90%以上学生对重点难点都能理解掌握，剩余学生对（2）创新应用能力培养：随机数在验证码刷新中的应用不是很理解，处于知其然而不知其使用给定的汉字字符范围，所以然的状态，需要课后继续巩固。个汉字的图片（2）教学特色：应用动画展示难点，抽象转验证码。穿时刻保持课堂活力。（3）个性化发展设计：要（3）教学反思：课堂提升时求能力较强的同学对所设问题能力欠缺计的验证码进行改进，将所对于要求学生自主完成的“增加半圆的干扰因素”，部分学生有字符扭曲黏连，进一步提不知该如何着手，直到老师或小组同学提醒之后始动手，说完成，根据课堂考核创建包含两为形象；问题贯，部分学生无从下手，独立解决才开升安全性，并将改进后的验明学生虽然有较强的模仿能力，但是需要独立解决新问题时，能证码存储到云盘中，可以提力还不够。供给任何用户使用。在以后的教学环节中，对需要新方法、新设计的内容，先适当给与提示或者给出操作流程，引导学生自主写出代码，学生适应之后，则要求学生自己写出操作流程和代码，如此循序渐进引导学生完成能力提升过程。5-4验证码的正确性判断课程内容信息说明所属任务任务五邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的邮箱注册界面的图片验证码的加载与刷新，具备了项目基础。教学目标1.理解变量的生命周期2.理解session机制的作用和工作原理知识目标能力目标3.掌握PHP中session的用法4.掌握验证码的正确性判断方法1.能够使用session机制完成文件间的数据传递3.能够4.拓展session应用新设计能力实现验证码的正确性判断和条件判断错误的设置，培养举一反三的创新思维和创素质目标1.通过提高用户体验度，避免输入验证码的大小写切换，培养精益求精的工匠精神（包含课程思政）2.养成代码规范习惯1.使用session在不同页面之间传递数据重点难点2.验证码的正确性比较1.session的工作原理2.解决字符串大小写不一致的问题教学策略信息化手段教学方法动画展示session的工作原理线上线下结合、课堂讨论、启发引导、问题导向、案例演示、实训练习、设置障碍学习方法课前预习、课中探究、课后练习与拓展教学设计流程图课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题5-5.4-1使用session传递验证码字符5-5.4-2对验证码字符进行正确性判断1.观看视频5-5.4-1（约7分钟）5-5.4-2（约9分钟）2.完成预习作业3.完成“预习过程中难点问题调查”2.设计职教云头脑风暴问题、摇一摇问题和课堂讨论问题，为课堂使用做准备3.批阅学生的预习作业4.查看学生课前预习后的难点问题调查课中活动（检查预习效果，讲解重点难点）及需要时间1.验证码字符传递中的问题（15分钟）2.session机制（25分钟）3.PHP中session的用5分钟）4.实现验证码字符的传递（15分钟）5.验证码的正确性判断（20分钟）6.课堂10分钟）法（考核与总结（环节1：验证码字符传递中的重点：验证码的数据来源以及获取问题（15分钟）教学手段：课堂讨论教师活动学生活动（1）说明验证码字符比较时传递字符中需要解决的问题启用抢答问题：验证码的正确性判断需要在哪一端的哪个文件中完成？启用头脑风暴问题：完成验证码的判断时，在zhuce.php文件中需要将哪学生听课、思考并两个数据进行比较？这两个数据分别从哪里获取？回答问题思考问题：zhuce.php文件中直接使用yzm.php文件中的变量$string获取到系统生成的验证码字符6分钟）（2）在zhuce.php文件中尝试使用变量$string，讲解变量的生命周期启：错误提示undefinedvariablestring是什么意思？：yzm.php中变量$string从何时开始有了生命？到何时结束？引入解决问题的方案--session机制（9分钟）？（用头脑风暴问题学生听课、思考并头脑风暴问题回答问题环节2-session机制（25分钟）session重点：机制的概念与作用+难点：session机制的工作原理方法：问题导向、动画演示、流程图应用重点教学教师活动学生活动（1）解决重点讲解会话过程和会话控制的概念：本次课中需要使用session临时存储的数据是什么？（：what—什么是session学生听课、思考并启用抢答问题4回答问题分钟）（2）解决重点：为什么要有session大家一起思考问题：假设你登录邮箱，刚开始时阅读了一封邮件，10分学生听课、思考并钟之后你又写了一封邮件，你认为这期间，浏览器和服务器之间的连接回答问题是不是一直存在着呢？引入HTTP协议无状态性的特点，引入使用session的必要性（（3）解决重点+难点：how--session怎样工作第一，session的生3分钟）第二，session对浏览器的诉求4分钟）命周期（启用头脑风暴问题：前面讲过，在会话过程中，session用于保存哪一端的临时第三，session的工作流程抢答问题：session都在什么时候会被注销也就是失效？（5分钟）第，四session传递数据的范围访问同一个服务器的不同服务器的同一个用户的session是否会交叉？（数据？（5分钟）学生听课、思考并回答问题启用启用头脑风暴问题：同用户的session是否会交叉？访问不4分钟）环节3-PHP中session重点+难点：PHP中应用session的步骤和方法的用法（5分钟）教学方法：讲授法教师活动学生活动第一，启用session的做法及要求，强调session_start()的使用位置问题应用session的数组，强调键名的设置问题学生听课、思考并第三，注销session的方法，讲解注销单个会话变量、所有会话变量和注回答问题销session的不同方法及要求（5分钟）第二，环节4-实现验证码字符重点+难点：使用session完成验证码字符的传递的传递（15分钟）教学方法：流程图演示、实训练习教师活动学生活动（1）解决重点+难点：完成验证码字符传递的操作流程（流程图动画）在yzm.php中操作的流程学生听课、思考并回答问题在zhuce.php中操作的流程（7分钟）（2）安排学生完成练习在yzm.php中注册session，在zhuce.php中获取session，获取之后销毁单完成实际操作个会话变量，再输出变量，观察销毁后的输出结果（8分钟）环节5-验证码的正确性重点：系统生成的验证码与用户输入的难点：解决字符串大小写不一致的问题教学方法：问题导向、对比分析、设置障碍、启发引导法验证码两者的比较判断（20分钟）教师活动学生活动（1）验证码正确性判断的要求及流程流程图展示操作流程（2分钟）听课（2）解决重点第一步，启用头脑风暴问题：若$useryzm中存放着用户输入的验证码字符，$yzmchar中存放着系统产生的验证码字符，使用if($useryzm==+难点：判断条件的设计（对比分析）$yzmchar)进行比较存在什么问题？引出课程思政，讲解大小写字母转换函数学生听课strtolower("Hello123")和题、回答问启用头脑风暴问题：分别写出函数strtoupper("World")的返回结果第二步，给定四种方案学生回答问题说出每种方案可用或不可用的原因启用头脑风暴问题：如果系统生成的验证码字符中增加了小写字母，例如A2ba，上面方案中可用的有哪几种？为什么？（10分钟）（3）问题代码分析启用头脑风暴问题：如果被误写为if($yzmchar=strtoupper($useryzm))，学生思考回答问题、听课程序执行时会怎样？为什么？一起思考问题：如果被误写为if(strtoupper($useryzm)=$yzmchar)，程序执行时会怎样？（5分钟）（4）安排学生完成验证码正确性判断的练习（3分钟）学生完成练习环节6-课中考核与总结（10分钟）（）1职教云验证码判断相关课堂小测试（分钟）5完成（2）学生总结本次课的收获（2分钟）（3）教师总结重难点及学生遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）学教效果：本次课的学教目标全部完成，根据（1）在结。（2）创新应用能力培养：第一，在zhuce.php文件中增加退出功能，注（2）学教特色：what、why、how讲解session机制，册完成后结束当前session。第二，将判断条件改为职教云平台中完成课后总课堂考核效果来看，约20%的学生对session机制的原和作用不是很理解，需要课后继续巩固，其余同学都较好习任务。理完成了学动画展示session工作原理，抽象变为形象；问题贯穿时刻保持课堂活力。if(strtoupper($useryzm)=（3）教学反思：虽然课前通过预测也得知学生认为$yzmchar)，观察给出的错误提示，session比较难，并且做了充分准备，但是因为课堂没有给查找同类错误提示的相关内容。学生留下足够的消化时间，约20%的同学没有很好接收这部分知识，课下安排学生看视频继续巩固。5-5表单数据回填课程内容信息说明所属任务已有基础任务五邮箱注册和登录功能实现已经完成了本任务中的用户注册信息的获取，并实现用户输入的验证码和系统生成验证码的比较，具备了项目基础。（学情）教学目标1.掌握表单数据的回填知识目标能力目标2.掌握错误提示信息的设置1.使学生能够使用include命令引用外部页面文件2.使学生能够使用JS脚本实现表单数据的回填3.使学生能够设置表单元素的placeholder提示错误信息4.课后通过分析提交失败的操作，培养分析问题的创新思维和设计能力1.体会网站的友好体验度，培养精益求精的工匠精神，做到客户至上，尽最大可能保护客户的利益素质目标（包含课程思政）2.养成代码规范习惯1.重新加载注册界面重点难点2.将用户提交的注册信息回填到表单3.在注册页面设置验证码错误提示信息1.如何实现回填数据2.如何在不同浏览器中保证错误信息的显示效果教学策略视频展示注册时验证码输入错误的“体验感差”和“体验感好”的形式通过动画展示注册过程的数据流向。信息化手段教学方法学习方法启发引导、问题导向、案例演示、设置障碍、问卷调研等课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题5-5.4-3在PHP中引用外部文件5-5.4-4验证码输入错误后的功能说明5-5.4-5表单数据回填1.观看视频5-5.4-3（约5分钟）5-5.4-4（约4分钟）5-5.4-5（约11分钟）2.设计职教云问卷调查、抢答问题、摇一摇问题、头脑风2.完成预习作业暴问题，为课堂使用做准备。3.批阅学生的预习作业3.完成“预习过程中难点问题调查”4.查看学生课前预习后的难点问题调查课中活动（检查预习效果，讲解重点难点）及需要时间1.导入模块-说明本次课要实现表单数据回填（5分钟）2.引用外部文件（10分钟）3.表单数据回填（30分钟）4.设置验证码错误35分钟）5.课中10分钟）提示信息（考核与总结（环节1-导入模块：实现表教学手段：案例演示、启发引导单数据回填（5分钟）教师活动学生活动（1）演示目前已经实现的注册功能：输入错误的验证码提交后，在浏览器中输出“验证码输入错误，本次注册没有成功”。引导问题：你的学生思考、回答问题体验感如何（？2分钟）（2）演示常见注册功能实现效果：输入错误的验证码到注册页面。引之后，需要实现哪些功能力目标（3分钟）提交后，重新回导问题：根据页面运行的正常要求，在验证码输入错误学生思考并参与讨？给出注册效果的具体操作步骤。引入课程能论、听讲环节2-引用外部文件（10重点：使用include命令引用外部文件分钟）教学方法：问题导向教师活动学生活动（1）启用头脑风暴问题文件为？后面的功能何时需要引用zhuce.html文件如？何引用使？用include命令引用5分钟）（2）启用摇一摇操作问题善zhuce.php文件中功能实现，实现引用学生登台实操实现功zhuce.html文件。（5分钟）学生操作完成后，强调在zhuce.php文件中能代码：验证码输入错误之后，为何要引用zhuce.html实现做准备。启用头脑风暴问题：在zhuce.php文回答问题、听课件中外部文件。（：完使用include引用zhuce.html文件，即重新运行zhuce.html文件。环节3-表单数据回填（30重点：使用JS进行表单数据回填难点：数据回填分钟）教学方法：问题导向、案例演示、实训练习教师活动学生活动（1）引导问题：这样的注册效果你满意吗？演示第一种注册过程视频（“未进行数据回填”）启用头脑风暴问题：用户注册第一种处理方式体验满意度问卷调查询问学生不满意的原因。回答问题演示第二种注册过程视频。（3分钟）通过引导问题引导学生明确用户至上、提高用户友好体验度，从而更全面的考虑问题，培养精益求精的工匠精神。（2）解决重点+难点：数据回填（12分钟）先说明用户注册时候数据流向：引导问题：浏览器提交数据时，提交到哪里去了呢？引导问题：验证码输入错误时需要做什么？引导问题：验证码需要回填到注册页面吗？引导问题：密码和确认密码需要回填到注册页面吗？启用抢答问题：如何获取浏览器中邮件地址文本框？启用摇一摇问题：获取文本框的语句怎样书写？能直接给文本框赋值吗？需要给文本框的哪个属性赋值？听课、回答问题、跟老师一起完成功能代码引导问题：数据回填语句能直接放到zhuce.php中吗？在PHP文件中如何把JS脚本语句输出到浏览器？教师带领学生一起实现：编写代码回填邮件地址文本框的数据。启用头脑风暴问题：要回填的邮件地址、密码、手机号码信息在客户端还是在服务器端？回填邮件地址、手机号信息时，需要设置表单元素哪个属性的取值？zhuce.php中使用什么把JS脚本输出到浏览器？（3）安排学生完成课堂练习，教师检查学生练习情况并帮助学生解决学生完成课堂练习问题（8分钟）启用摇一摇操作问题：完善注册功能代码，验证码错误学生登台实操实现功输入错误时对用户注册信息进行回填。（（4）小结（2分钟）学生操作后，对学生练习中存在的问题进行总结。通过考虑问题，培养5分）能代码学生完成课堂练习学学生登台实操实现功能代码数据回填引导生明确用户至上、提高用户友好体验度，从而更全面的精益求精的工匠精神。环节4-设置验证码错误提示信息（30分钟）重点：设置验证码错误提示信息难点：如何在不同浏览器中保证错误信息的显示效果教学方法：问题导向、设置障碍、启发引导法、实训练习教师活动学生活动（1）解决重点+难点：一步步的设置障碍和启发引导，带领学生步步前行（20分钟）引导问题：表单数据回填时，是否需要回填验证码信息？验证码文本框设置为空值吗？学生回答后，教师强调务必在回注册页面中提示“验证码输入错误”的信息。该信息可以放在输入验证码的文本框中，也可以放在其他合适的位置。回答问题、听课引导问题：若在验证码文本框中进行错误信息提示，需要设置表单元素哪个属性的取值？启用摇一摇操作问题：完善注册功能代码，验证码错误输入错误时同时要在验证码文本框中显示错误提示信息“验证码输入错误，请重新输入”。完成操作后运行演示。引导问题：运行发现可以在验证码文本框中提示错误信息，但是存在两个问题，一个是提示信息不明显，二是用户输入时需要先删除文本框的内容。是否有办法解决呢？重点：设置验证码文本框的placeholder属性为“验证码输入错误，请重新输入”，而不是设置value属性。强调placeholder属性再用户输入时提示内容自动消失。引导问题：解决了显示错误提示信息，但提示信息不明显，如何解决？难点：设置验证码文本框的样式类型。分两步实现：一定义样式，二指定验证码文本框的样式。强调由于浏览器的内核不同，导致不同的浏览器可能运行出来的效果不一致，为了保证错误信息提示的一致性，设置多个浏览器的该样式类型为相同格式。启用头脑风暴问题：在验证码文本框中，通过哪个属性设置验证码错误提示信息？使用哪个属性引用类名inp，设置提示信息为红色？通过引导问题引导学明生确用户至上、提高用户友好体验度，从而更全面的考虑问题，培养精益求精的工匠精神。（2）安排学生完成课堂练习，教师检查学生练习情况并帮助学生解决学完生成课堂练习问题（10分钟）启用摇一摇操作问题：完善代码，验证码输入错误时学生登台实操实现功，并用红色字体进行显示。（5分能代码在验证码文本框中设置错误提示信息钟）环节5-课中考核与总结（1）完成职教云表单数据回填相关课堂小测试（5分钟）（2）学生总结本次课的收获（2分钟）（10分钟）（3）教师总结重难点及学生遇到的各种问题（3分钟）课后活动学生活动（总结与能力提升）教师活动（教学总结与反思）（1）教学效果：本次课的教学目标全部完成，根据课堂考核效果来看，只有3-4个学生因为没有认真听讲所以没有达到学习目标，其余同学都较好完成了学习任务。（2）教学特色：动画演示帮助学生理解了难点；问（1）完成职教云课堂中的课后总结。（2）创新应用能力培养：课后分析常用网站提交数据的操作，若提交题贯穿时刻保持课堂活力。失败：回填哪些数据，如何提示错（3）教学反思：学生刚开始接触在由服务器端向浏误信息，培养学分生析问题的创新览器端输出脚本完成数据回填这一功能时，确实非常迷茫，经过老师反复通过动画演示之后，大家对这部分效果理解非常好。思维和创新设计能力。5-6注册信息的查重课程内容信息说明所属任务任务五邮箱注册和登录功能实现已有基础（学情）已经完成了本任务中的邮箱注册界面的设计、表单数据有效性验证、验证码的正确性判断并且已经创建好数据库表，具备了项目基础。教学目标1.理解Ajax的概念及工作原理2.掌握jQuery中的ajax()方法知识目标能力目标3.掌握使用Ajax实现1.能够使用$.ajax()进行后台代码调用、使用onblur()在失去焦点时处理事务2.拓展Ajax的应用场景，培养学生创新思维和1.使用Ajax技术改进网站访问速度慢的益求精的工匠精神2.养成代码规范习、惯提高代码排错能力1.后台完成对注册2.前端获取查重后的反馈信息地址查重的操作过程创新应用能力素质目标问题，提高网站响应速度，培养精（包含课程思政）地址的查重重点难点1.Ajax工作原理、同步与异步2.jQuery中ajax()函数的用法3.使用Ajax完成对注册地址的查重教学策略信息化手段教学方法学习方法应用交互课件、动画展示ajax数据前后台交互过程讨论法、启发引导、问题导向、讲授法课前预习、课中探究、课后练习与拓展课前活动及需要时间教师活动及内容学生活动及内容1.布置学生观看如下视频，设计翻转课堂问题，安排预习1.观看视频5-5.6-1（约9分钟）5-5.6-2（约12分钟）5-5.6-2（约8分钟）5-5.6-2应用Ajax—发送请求获取响应－check()函数5-5.6-3（约8分钟）5-5.6-3应用Ajax—创建服务器端文件5-5.6-3（约7分钟）5-5.6-3应用Ajax—创建服务器端文件－操作部分－2.思考翻转课堂问题，完成预习作2.设计职教云头脑风暴问题、抢答问题、摇一摇问题和课业（约20分钟）作业5-5.6-1应用Ajax—创建XMLHttpRequest对象5-5.6-2应用Ajax—发送请求获取响应－理论部分－1-11堂讨论问题，为课堂使用做准备3.设计课堂需要的动画3.完成“课前预习中的难点问题调查问卷”4.批阅学生的预习作业课中活动（检查预习效果，讲解重点难点）及需要时间1.导入模块-引入Ajax的应用（2.Ajax工作10分钟）3.jQuery中的ajax()方法（30分钟）4.后台完成对25分钟）5.前端获取6.课中考5分钟）原理（注册地址的查重（查重后的反馈信息(10分钟)核和总结（10分钟）环节1-导入模块-引入重点：注册信息查重的方法-Ajax技术的优势Ajax的应用（5分钟）教学方法：课堂讨论+动画教师活动学生活动（1）头脑风暴问题是否重复？是在浏览器端进行还是服务器端进行？在何时进行？何你认为应该在输入邮件地址之后就进行查重，这样比学生思考并参与讨提交全部数据之后再查重有什么优势？论、听讲教师根据学生讨论的结果分情况说明，运行教学项目，引出使用Ajax5分钟）：你认为对注册的地址进行查重，需要从哪里查询摇一摇问题：为进行地址查重的优势（环节2-Ajax的工作原理重点+难点：Ajax的工作原理和流程，异步和同步问题（10分钟）教学手段：动画演示教师活动学生活动解决重点+难点：Ajax的工作教师演示动画，向学生展示Ajax的工作看视频，思考如活中的同步和异步问题，你会怎样安排工作（学习）能提高工作（学习）效率原理（使用动画演示）原理，同时演示同步和异步的何安不同操作方式，启用课堂讨论“生排你的时间？”引入课程思政：使用Ajax技术改进，提高网站响应速度--培养学生精益求精的工匠精神教师使用流程图，向学生展示Ajax的工作流程，帮助学生形成宏观认知“浏览器提交数据给服务器-服务器完成查重操作-服务器反馈结果给浏览器”的实现流程启用头脑风暴问题：在Ajax的同步和异步方式中，哪一种相当于单线程？哪一种相当于多线程？（10分钟）环节3-jQuery中的重点+难点：$.ajax()方法的用法、$.ajax()方法参数的设置$.ajax()方法（30分钟）教学方法：问题导向、启发引导法教师活动学生活动（1）解决重点+难点：$.ajax()方法的用法（流程图展示）详细讲解$.ajax()方法的重要参数和回调函数学生观察代码，听课。思考：有哪些词语可以描述一件事情的完成情况？每种情况可能获得什么样的信息呢？启用摇一摇问题：什么是回调函数？（14分钟）（2）解决难点：$.ajax()函数参数的设置（问题导向，启发引导）启用头脑风暴问题：进行注册信息查重时，若是服务器端将要运行的文学生思考并回答问题件是check.php，使用$.ajax()函数时，需要提供的参数值分别是什么？听课教师讲解（8分钟）（3）课堂练习：学生编写代码，使用$.ajax()向服务器端提交数据（8完成课