教学课件任务5-图片验证码的插入刷新及session机制

教材配套资源页完整PPT课件教学课件任务5-图片验证码的插入刷新及session机制1任务五 163邮箱注册功能实现n简单注册功能实现n使用图片验证码（图片验证码的创建、插入、刷新与验证过程）n操作mysql数据库（创建数据库与数据表、数据库的导入与导出、PHP文件访问MySQL数据库）n使用数据库保存注册信息25.2.3 图片验证码的插入与刷新n需要解决的问题：n1.怎样在页面中插入验证码图片n2.如何使用脚本中的自定义函数完成验证码的刷新操作3在zhuce.html文件中插入验证码n图片验证码是以文件的形式保存的，此处使用的文件名称是yzm.php，但是其内容是一幅宽100px、高25px的图片，所以使用代码插入到页面文件zhuce.html相应位置即可，图片元素的name和id至少要定义其中一个。4插入图片验证码后，页面效果中验证码左侧的文本框位置下移，与验证码没有对齐，需要如何调整？n需要在图片标记中设置align=“top”，这样可以控制与验证码图片在同一行中的文本框useryzm能够与图片的顶端对齐，使得页面比较美观。5如何刷新zhuce.html中的验证码n图片验证码的刷新需要借助于javaScript函数来实现。在zhuce.js脚本文件中增加函数yzmupdate()的定义，输入图所示的代码6函数yzmupdate()代码的解释nyzm是图片元素的name，使用document.yzm可以获取到表示验证码的图片元素，然后设置该元素的src属性即可修改所显示的图片内容；n代码yzm.php?+Math.random()的作用是每次点击“看不清楚？换一张”时都重新加载yzm.php文件，加载过程中通过Math.random()函数随机产生的数字激活yzm.php文件的重新运行，从而获得新的验证码字符并输出7函数yzmupdate()的调用n调用函数yzmupdate()是在用户点击“看不清楚？换一张”文本时进行的，该文本使用了.标记控制，而点击操作激活的事件是onclick，所以需要在页面文件zhuce.html代码“看不清楚？换一张”的标记内部增加onclick=yzmupdate();，即可完成函数的调用过程。n改写为直接为span元素定义匿名函数的形式8问题的提出n用户在zhuce.html界面的文本框useryzm中输入图片验证码中的字符，点击提交按钮之后系统需要对验证码的正确性进行判断n思考问题n验证码的判断需要在哪个文件中完成？n完成验证码的判断时，在zhuce.php文件中需要将哪两个数据进行比较？这两个数据分别从哪里获取到？在zhuce.php文件中完成参与比较的两个数据分别是：验证码图片中的字符和用户输入的字符其中验证码图片中的字符要从yzm.php文件的$string变量中获取而用户输入的验证码字符则通过$_POSTuseryzm获取获取用户输入的验证码字符并输出n修改zhuce.php文件，实现如下功能n获取用户输入的验证码字符，使用变量$useryzm保存n在文件最后输出变量$useryzm的内容（这行代码属于临时应用，后期需要删除）问题的提出n要将yzm.php文件中$string变量的值送入zhuce.php文件中与$_POSTuseryzm进行比较，如图所示n思考问题n能否将yzm.php文件中的变量$string直接应用到zhuce.php文件中？为什么？yzm.phpzhuce.php$string中的验证码字符$_POSTuseryzm比较比较效果演示与问题解答n效果演示：n在zhuce.php文件最后增加代码echo$string;尝试输出yzm.php文件中变量$string的值来观察效果n问题解答与分析（变量的生命周期）n不可以将yzm.php文件中的$string变量直接应用到zhuce.php文件中，因为每个变量都有自己的生存环境，它们的生存环境是创建了这个变量的文件，只要脱离了这个文件，变量就不复存在，即变量就失去了自己的生命，是毫无意义的，所以说，变量$string 离开文件yzm.php之后，就失去了其中存储的数据。问题的提出与解答n思考问题n如何将yzm.php文件中$string变量保存的验证码字符传送到zhuce.php文件中n问题解答n在同一网站的不同文件之间传递数据，需要使用session机制5.2.4 session机制的原理与应用n为了能够在zhuce.php文件中得到生成于yzm.php文件中的验证码字符，必须要使用PHP提供的session机制。nsession，可以简单理解为用户访问某个网站的一次会话过程，用户开始访问该网站时，会话开始，session开始产生，用户完成访问时会话结束，session也就消失。14理解sessionn思考问题-1n若用户在某个时间段内打开了163邮箱网站、淘宝网站和京东网站，则对该用户而言存在了几个session会话？n上面这些会话的数据是否会交叉（用户账号密码信息是否会发生混乱）？为什么？163邮箱网站淘宝网站京东网站用户Us1s2s315理解sessionn思考问题-2n假设在某个时段，有5万个用户在访问淘宝网站，对该网站服务器而言，同时存在几个session会话？n这些会话的数据是否会交叉（是否会发生某个用户购买的商品放进了其他用户的购物车中）？为什么？淘宝网站用户1用户2用户3用户5用户6用户416session机制的工作原理nsession 的工作原理是：服务器为每个访问者创建一个唯一的 id，并基于这个id 来存储用户的私有信息。n服务器为所有用户创建的session都存储于服务器端，用户可以使用session保存自己的私密数据，例如登录时的账号和密码信息等，当用户访问网站的不同页面时，这些信息可以在页面之间传递（例如用户的购物车信息。两个用户的购物车是否会发生混乱？）。n强调：session 变量保存的信息是单一用户的，并且可供应用程序中的所有页面使用。17session的作用总结n对于PHP中session的作用，可以从以下几个方面总结n网站服务器通过sessionID识别不同的用户n使用session保存用户的私有数据，例如账号、密码、购物车信息等n使用session可以在同一个网站的不同页面文件之间传递数据18session的应用与启用n应用session，通常是因为有数据要在网站内部传递，因此需要有提供数据的文件和使用数据的文件，即供方与需方n应用session时，需要在两个文件中都启用session，为数据传递做准备，启用方法如下n在文件开头使用代码session_start()完成n说明：对于session的启用也可以采用如下方式n直接在php.ini文件中设置session.auto_start=1，这样可以取代在每个网站页面中使用函数session_start()启用19问题导入n如何使用session保存用户需要传递的数据？需要使用与session机制有关的系统数组$_SESSION来保存用户需要在网站内部传递的数据20系统数组$_SESSION的使用n分为两个步骤n提供数据的页面需要在启用session之后，将需要传递的数据保存在数组$_SESSION中，数组元素键名自己定义，格式如下：$_SESSION键名=需要传递的数据;n接受数据的页面需要在启用session之后，将$_SESSION中的数据获取出来，格式如下：变量=$_SESSION键名;21如何理解session作为一个管道的作用n可以将session看做是一个管道，在该管道下面挂着本网站中所有的php页面文件，每个页面文件都可以使用系统数组$_SESSION向管道提供需要传递的数据，其它文件则可以使用$_SESSION系统数组从管道中取用数据225.2.5 实现图片验证码的验证功能n使用session机制将yzm.php文件中生成的验证码字符传递到zhuce.php文件中n条件和要求说明nyzm.php文件中验证码字符存放在变量$string中n指定在zhuce.php文件接收验证码字符之后，保存在变量$yzmchar中23修改yzm.php文件n（1）对yzm.php文件需要进行如下两个方面的修改：n第一，在开始处增加代码session_start();，启动本页面对session机制的应用；n第二，在生成验证码字符串之后，增加代码$_SESSIONstring=$string;，使用系统数组$_SESSION保存生成的验证码字符串，从而达到向session管道中传输数据的目的。24修改zhuce.php文件n（2）对zhuce.php文件需要进行如下两个方面的修改：n第一，在开始处增加代码session_start();，启动本页面对session机制的应用；n第二，在启用session之后，增加代码$yzmchar=$_SESSIONstring;n使用变量$yzmchar获取保存在系统数组$_SESSION中的验证码字符串，从而达到从session管道中获取数据的目的。25思考问题nzhuce.php文件中已经存在的条件：n$useryzm中存放着用户输入的验证码字符n$yzmchar中存放着系统产生的验证码字符n思考问题n能否直接使用代码if($useryzm=$yzmchar)对用户输入的验证码进行判断？为什么？不能使用上面代码进行判断因为用户输入验证码字符时大小写状态是不受限制的，而系统生成的字母都是大写的，两者若是直接比较，只有用户输入的字母都是大写的情况下才能匹配成功，否则都是不匹配的。26进行验证码比较的正确做法n需要将用户输入的验证码字符转换为大写状态之后才能与系统生成的字符进行比较，需要使用函数strtoupper()，函数格式和功能如下：n格式：strtoupper(字符串)n功能：将字符串中包含的小写字符转换为大写字符，并返回完整的字符串n进行验证码比较的正确代码如下：if(strtoupper($useryzm)=$yzmchar)n扩展知识点：n将大写字符转换为小写字符需要使用的函数为strtolower()27思考问题n若是在生成验证码字符时增加了小写英文字符，要如何进行验证码比较？增加了小写字符之后，系统产生的验证码字符和用户输入的验证码字符，两者的大小写状态都是不确定的，因此需要将两者都向着一个稳定的状态转换，可以都转换为大写状态，也可以都转换为小写状态，之后进行比较，例如，都转换为大写状态再进行比较，代码如下：if(strtoupper($useryzm)=strtoupper($yzmchar)28修改zhuce.php文件n按如下要求修改zhuce.php文件：n当用户输入了正确的验证码并提交数据之后，在浏览器中输出用户注册时填写的各项数据n若是输入了错误的验证码并提交数据之后，则在浏览器中输出“验证码输入错误，本次注册没有成功”29思考问题n根据页面运行的正常要求，在验证码输入错误之后，需要实现哪些功能？n第一，重新运行页面文件zhuce.html（是为实现下面两个功能做准备，即第二、第三这两项功能都要在运行zhuce.html页面文件时来实现）；n第二，将用户填写好的数据（邮件地址、密码、手机号）重新回填到注册界面中；n第三，在验证码文本框中显示红色提示信息“验证码错误，请重新输入”；30思考问题n在zhuce.php文件的执行过程中，判断验证码输入错误之后，如何通过代码运行页面文件zhuce.html？n使用代码include zhuce.html;n设置在zhuce.php文件中包含zhuce.html文件，即重新运行zhuce.html文件31思考问题n假设已经将用户输入的邮件地址、密码和手机号分别使用变量$emailaddr、$psd1、$phoneno保存了，验证码输入错误之后，要将这几个数据回填到邮件地址文本框、两个密码框和手机号文本框中n如何实现上述功能？n做法如下：在zhuce.php文件中输出脚本代码，使用脚本代码设置各个表单元素的value属性32回填表单数据n第一步：输出脚本代码定界标记n第二步：使用echo输出脚本代码，变量$emailaddr的数据文本框emailaddr，变量$psd的数据密码框psd1和psd2，变量$phoneno的数据文本框phonenon示例：输出脚本代码，完成邮件地址回填：echo document.getElementById(emailaddr).value=$emailaddr;此处两个分号，前者是脚本代码结束符号，后者是php代码echo语句结束符号33红色提示信息的设置n如何在用来输入验证码的文本框useryzm中用红色文本显示提示信息“验证码输入错误，请重新输入”？n使用三个操作步骤完成：n第一步：在zhuce.css文件中使用class类选择符inp定义提示信息为红色；34红色提示信息的设置n三个操作步骤：n第二步：使用echo输出脚本代码，获取表单元素useryzm，设置该元素中的提示信息属性placeholder内容为“验证码输入错误，请重新输入”；n第三步：使用echo输出脚本代码，仍旧获取表单元素useryzm，设置该元素className属性取值为inp，应用定义的样式35365.2.6 在PHP中引用外部文件n方法有两种：include和requiren这两种方法在处理引用失败时的方式不一样，其余功能完全相同。includerequire在引用失败时将产生一个警告，然后页面代码会继续执行下去在引用失败时会导致一个致命错误，结果是停止处理页面内容在zhuce.php文件中尝试，观察效果37include方法应用示例n假设要引用的文件名是zhuce.html，则使用include引用时可以采用以下四种形式：ninclude(zhuce.html)ninclude zhuce.htmlninclude(zhuce.html)ninclude zhuce.htmln使用require引用时同样可以使用上面四种形式之一。本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。