《PHP网站开发项目式教程》电子教案 任务7 实现163邮箱写邮件功能

PAGE2《PHP网站开发项目式教程》教案基本信息说明模块任务7实现163邮箱写邮件功能单元数4教学目标知识目标掌握邮箱主窗口和写邮件界面的设计方案掌握使用脚本代码实现浮动框架宽度和高度的自动适应功能掌握在文本框中显示用户登录账号信息的方法掌握写邮件界面各种脚本特效的事项和调用方法掌握附件的添加和删除方法掌握系统退信功能的实现方法能力目标使学生具备设计写邮件界面并实现复杂脚本功能的专业能力重点使用脚本代码实现浮动框架宽度和高度的自动适应功能在文本框中显示用户登录账号信息的方法写邮件界面各种脚本特效的事项和调用方法附件的添加和删除方法解决同名附件的冲突问题系统退信功能的实现方法难点使用脚本代码实现浮动框架宽度和高度的自动适应功能在文本框中显示用户登录账号信息的方法写邮件界面各种脚本特效的事项和调用方法附件的添加和删除方法解决同名附件的冲突问题系统退信功能的实现方法教学方法与教学手段教学方法项目驱动、启发引导式和小组讨论教学手段通过运行所设计的163邮箱项目中写邮件子项目，引导学生观察需要完成的功能，讲解需要的知识点，共同实现相关功能教学内容设计邮箱主窗口页面实现写邮件页面功能添加和删除附件发送邮件1.设计邮箱主窗口页面强调主窗口中用户登录邮件地址的填入方法、使用脚本实现浮动框架宽度和高度自动适应的方法（1）设计邮箱主窗口邮箱主窗口页面效果图（2）email.php页面中的脚本功能1）设置浮动框架宽度浮动框架宽度说明整个邮箱主窗口页面的宽度始终与浏览器窗口宽度保持一致在盒子bot内部左侧的leftDiv的宽度是固定的（201px）右侧的mainDiv宽度为自动（实际宽度将根据内部浮动框架宽度确定）因此要求mainDiv内部的浮动框架的宽度必须能够适应浏览器窗口的变化，若窗口变宽，浮动框架宽度要变宽，若窗口变窄，浮动框架宽度要变窄，从而做到由浮动框架窗口的宽度来决定盒子mainDiv的宽度。函数iframeWidth()的调用需要在两种情况下进行第一种情况是，加载页面文件email.php时，此时激活的是window对象的load事件，在函数定义完成的花括号后面使用代码window.onload=iframeWidth;进行调用；第二种情况是，当用户调整浏览器窗口大小时，此时激活的是window对象的resize事件，在函数定义完成的花括号后面使用代码window.onresize=iframeWidth;进行调用。2）设置浮动框架的高度浮动框架子窗口的内容总是根据单击的超链接来加载，如果将其高度设置为固定值，存在如下缺陷：第一，若浮动框架初始高度小于加载进来的页面高度，在内部需要出现滚动条，存在了内外双滚动情况，会影响页面的美观性；第二，若浮动框架初始高度高于加载进来的页面高度，浮动框架底部页面内容下方将出现大片的空白区域，也会影响页面的美观性。2.实现163邮箱写邮件功能强调页面布局和各种表单元素的样式定义方法；强调脚本功能的实现（1）设计写邮件页面项目中约定，写邮件时，每个收件人账号中必须包含“@163.com”，且每个账号都必须要以英文分号结束，分号后面不允许出现空格。发件人文本框的内容设置在denglu.php已经使用$_SESSION["emailaddr"]保存登录的账号信息在writeemail.php文件代码顶端启用session在页面加载完成后，发件人文本框sender中默认显示用户的登录账号信息，所以要在文本框标记内部使用代码value="<?phpecho$_SESSION['emailaddr'].'@163.com';?>"，将保存在服务器端系统数组$_SESSION中的用户账号信息连接上@163.com，输出到浏览器端之后，作为文本框的value属性值，为避免误改误删发件人信息，需要设置为只读。（2）写邮件页面的脚本功能1）表单数据验证用户填写了收件人账号信息之后，要判断每个账号信息是否包含“@163.com”，是否以英文分号结束，分号后面是否出现空格等。实现方案符合条件的收件人信息，最后一个字符一定是英文分号，若不是，则一定不符合要求；分号后面若是有空格，则一定不符合要求；符合要求的收件人信息中，@符号的个数与英文分号的个数一定是一致的2）表单元素的宽度设置要实现的功能说明页面元素formDiv的宽度在初始状态通过样式设置为300px该元素及其内部的表单元素receiver、subject和content的宽度都要求能够适应页面文档writeemail.php的宽度并且在单击图片元素zhedieImg时，能够根据右侧元素rDiv的显示与隐藏状态来改变自己的宽度若是rDiv为显示状态，则盒子formDiv的宽度需要取用页面文档宽度减去盒子rDiv和zhedie的宽度（212）之后的结果；若盒子rDiv为隐藏状态，则盒子formDiv的宽度需要取用页面宽度减去盒子zhedie（10）的宽度之后的结果；而表单元素receiver、subject和content的宽度则需要使用formDiv的宽度减去表格左侧列宽60像素以及表单元素的左右边框之后来得到。3）盒子rDiv的显示与隐藏函数showOrHideRDiv()的定义若是盒子rDiv为隐藏的，则单击图片元素zhedieImg之后，要将盒子rDiv设置为显示状态，同时将图片元素zhedieImg显示的图片文件修改为zhedieright.jpg；否则就要将盒子rDiv设置为隐藏状态，同时将图片元素zhedieImg显示的图片文件修改为zhedieleft.jpg。这里定义函数showOrHideRDiv()实现。3.添加和删除附件强调添加附件时文件域元素的显示方法和删除附件时的更换方法；强调自动设置邮件主题和拦截超大附件的功能实现方法（1）界面设计页面代码刚刚运行时，只显示一组用于选择和删除附件的页面元素，此时可以选择一个附件。若是需要添加多个附件，可以单击“继续添加附件”文本用于添加和删除附件的每组段落元素的结构<p><span><inputtype="file"name="fn"class="attachmsg"/></span><spanclass="del"id="deln">删除</span></p>。其中，字符‘n’表示数字，第一个文件域元素name属性值为f1，第二个为f2；第一个“删除”文本id属性值为del1，第二个为del2，依此类推。（2）设置邮件主题与拦截超大附件1）设置邮件主题使用文件域元素选择了附件之后，判断用户是否填写了邮件主题，若是没有填写，则将用户选择上传的第一个附件名称的主文件名部分设置为邮件主题。2）拦截超大附件功能说明若选择的单个附件超出php.ini中配置项upload_max_filesize的大小（当前值是80M）限制，或所有附件的大小总和超出配置项post_max_size的大小（当前值是100M）限制，在单击“发送”按钮时，都要进行拦截。（3）使用脚本实现多附件的添加功能每次单击“继续添加附件”时，就要创建一组新的用于添加和删除附件的元素。同时因为文件域元素的显示使得页面内容增高，所以需要调整页面中元素<divid="rDiv">的高度、<divid="zhedie">的上填充以及整个浮动框架子窗口的高度和宽度。创建函数addAttach()完成上述功能。（4）使用脚本实现附件的删除功能功能说明单击第一个文件域元素右侧的“删除”时，删除附件的方式是使用一个新的name属性值为f1的文件域元素取代原来的文件域元素；而单击第二个及之后那些文件域元素右侧的“删除”时，直接将文件域元素所在的段落元素从DOM树中移除，同时还需要调整页面中元素<divid="rDiv">的高度、元素<divid="zhedie">的上填充以及整个浮动框架子窗口的高度和宽度。4.发送邮件强调对邮件中附件信息的保存方法；强调判断系统产生退信的依据实现发送邮件需要的操作邮件编辑完成，单击“发送”按钮时必须将邮件信息存入到数据库中，若是邮件中包含附件，还需要将附件保存到文件夹upload中。（1）创建数据表：emailmsg该数据表要存放邮件所有信息，包括邮件序号、发件人、收件人、主题、内容、附件信息、收发日期、是否删除邮件、是否阅读邮件、是否彻底删除邮件等。（2）保存邮件信息1）保存附件说明说明：设计的163邮箱项目中，为了降低其复杂程度，将所有人发送的所有邮件中的附件都保存在文件夹upload中为了尽可能避免不同用户发送的同名附件互相冲突，采取的措施是向upload文件夹中保存附件时，将附件名称开始处都增加一个放在圆括号中的随机数，随机数的范围是0到100,000；保存在attachment列中的附件信息中包含4部分内容，分别是在开始处放在英文圆括号中的随机数标识、附件名称和在结束处放在英文圆括号中的附件大小信息，最后再加上一个英文分号，所以在保存之前，需要将这4部分的内容连接在一起；思考问题若页面中显示的文件域元素有f1、f3和f4，上传文件的是文件域元素f1和f4，前面代码执行时存在什么问题？为什么？如何解决？count($_FILES)的结果是3，循环结构执行3次，也就是当$i为4时结束，但是3次循环中，循环变量$i的值是1、2和3，处理的是f1、f2和f3这三个文件域元素，无法处理f4。解决方案循环结构内部使用if(isset($_FILES["f{$i}"]))条件判断文件域元素是否存在，存在的进行处理，不存在的，将$cnt加1，从而增加一次循环2）保存邮件信息第一步：获取发件人、收件人、主题、内容和收发日期时间信息，分别使用变量$sender、$receiver、$subject、$content和$datesorr保存第二步：连接数据库，设计插入语句将邮件信息保存到数据表emailmsg中；连接之后插入之前，使用下面代码防止出现数据库中汉字乱码问题：（3）实现系统退信在发送邮件之后，若是邮件中指定的某个收件人账号在usermsg表的emailaddr列中不存在，系统应该自动给发送方退信，用于提示发送方所发送的邮件并没有真正发送成功。因为发送方发送邮件时指定的收件人可能是多个用户，对这些使用英文分号连接在一起的账号，首先要使用英文分号作为分割符，将它们一个个分离，然后使用循环结构分别判断其是否是已经注册过的账号；另外，因为收件人账号信息中包含了“@163.com”，而存放用户账号信息的usermsg表中的emailaddr列值内并不包含“@163.com”，所以在判断某个收件人账号是否存在之前，必须将账号信息中包含的“@163.com”信息截取掉。无论是要进行字符串信息的分割，还是要进行字符串的截取，都需要使用字符串分割函数explode()完成。1）函数explode()程序开发中，经常需要将一个字符串按某种规则分割成多个子串，PHP提供的explode()函数专门用于分割字符串，格式如下。函数格式：explode(参数1，参数2)；参数1指定用来分割字符串的字符，可以是一个字符，也可以是一个字符串；参数2指定被分割的字符串；用法一：$array=explode(参数1，参数2)返回结果$array是一个数组，可以使用数字索引形式访问数组元素，$array[0]表示其中第一个元素；用法二：list(变量1,变量2,变量3,…)=explode(参数1，参数2)使用list(变量列表)形式保存数据，按分割后的顺序将字符串依次保存到指定的变量中，若是变量个数少于分割后字符串的个数，则丢弃后面的字符串，相当于进行串的截取操作。2）实现系统退信功能修改storeemail.php文件，在连接打开数据库em