首次触电php

实验3：基于Web的文件传输网络应用的开发

实验内容：
(1).注册页面：完成一个HTML的表单页面，该页面可以实现学生信息的提交功能。提交的信息包括：学生姓名（手动输入），登录密码、确认密码（两种密码需要对比），学生班级（下列列表选择），学生学号（输入），学生性别（单选框），学生的兴趣爱好（多选），学生的头像（需要用文件上传完成），学生的课程成绩，学生的备注信息以及其他信息（自己指定）。 然后设置两个按钮，一个提交，一个重置。 (2). 登录页面：以管理员登录后可打开学生信息查询及录入页面，对学生信息进行录入、查询等。以学生身份登录后，可以查看、修改学生自己的信息，并能上传学生自己的头像（用文件上传完成）。 (3). 学生信息查询页面：完成一个HTML的表单页面，该页面可以实现学生信息的查询包括：学生姓名、班级、学号、性别、兴趣爱好、的头像，课程成绩。
实验过程（40分）
基于web的文件传输服务器的构建方法（包括使用的软件的配置过程、使用的主要方法的思想和开发方法等）(30分)		得分：
答： （1）       软件配置过程：在乐学网上下载Easy2PHP5 build 2.zip压缩包，解压后运行Exec2PHP.exe执行文件，它会运行Apache和Mysql，即网络容器和数据库，点击PHPMYAdmin，如果出现用户登录界面，说明环境已经配置成功；然后自行下载eclipsephp开发工具；通过编写html和php文件，完成web服务器的实现，访问本web服务url： http://localhost:8080/exp3/login.html； （2）       开发思想和方法：html文件实现前台页面编写，php文件实现后台的信息处理； 通过html前台提交表单给相应的php文件，一般使用post方法，后台获得表单数据进行处理，但不会向前台返回数据。 该服务主要分为注册、登录、修改、查询四个功能； 注册：该html页面实现学生信息的提交功能。提交的信息包括：学生姓名、学生学号、密码、密码确认，以上均为text类型的输入框，除此之外，还有学生性别（单选框radio）、学生爱好（多选框select），班级（下拉列表checkbox），并且可以上传学生头像（file），提供头像预览功能；有“注册”和“重置”两个按钮。 表单验证为不允许输入框的值为空； 表单提交给wel.php文件进行后台处理，包括密码和确认密码是否一致的验证、文件格式和大小的验证；如果通过验证，讲表单提交上来的数据存入数据库；其中数据库两张表的结构如下：TABLE stu//学生表 name varchar(20) id varchar(20) pwd varchar(20) class varchar(20) sex char(1) skill varchar(20) pic varchar(100)    TABLE adm//管理员表 name varchar(20) id varchar(20) pwd varchar(20)        其中文件file类型的头像文件通过表单提交上来时，通过格式验证后，存入服务器上的工程内的文件夹中，所以数据库中pic中存储的内容是该文件在服务器上的相对路径；name、id、pwd、class、sex存入表单提交上来的数据；skill表单返回的是数组，我把数组元素用“+”连接成字符串，存入数据库。数据库insert成功，echo出一个页面，其中包括一个链接“返回登录首页”，点击即可回到login.html进行登录。        登录：包括学生和管理员两种身份登录，都是输入ID和密码登录，其中学生登录页面上还有一个链接“学生注册？”，点击可跳转到regist.html进行注册。 表单验证为不允许输入框的值为空；            学生登录表单提交给login.php文件进行后台处理，通过表单提交上来的id和name，在后台进行数据库查询表stu，如果没有数据，echo出一个出错页面，包括提示信息和一个链接“返回登录首页”，返回login.html；如果学生存在，echo出类似于注册界面的学生信息管理页面，除了id以外，可以修改信息，添加了“放弃修改头像”、“放弃修改返回”两个按钮，点击效果分别为显示原头像图片和返回上一步；点击重置，输入框Input会变为默认值；点击保存，会echo出一个页面，显示修改成功和一个链接“返回登录首页”；其中type为file类型的输入框和其他type为text等的控件不同，需要分开处理，所以添加了一个“放弃修改头像”的按钮，其中添加的onclick方法思想是让flag_pic=unchanged，然后将图片的src改为原图像的src，其中要和图片预览功能相似，区分不同浏览器的显示图片的方法；与该按钮对应，点击input type=file的“浏览”按钮，也添加了onclick方法，让flag_pic=changed，而flag_pic是在html前台设置了一个hidden域，value=unchanged；在后台得到数据库中的数据，其中name、id、pwd作为value正常echo出来，对于class需要进行条件语句的判断，对于不同的值输出不同的option有cheched属性，对于sex，和class同理，对于skill，是这样实现的，使用php中的explode方法，分隔符为“+”，分成了一个数组，然后初始化了一个全零的数组，对skill数组进行遍历，如果对于的爱好出现，则全零数组相应元素+1，遍历结束后，对全零数组的每个元素进行判断，如果等于零，echo出的对应的skill（如唱歌sing）就没有selected，否则有selected属性。            管理员登录表单提交给adm_login.php文件进行后台处理，原理和学生登录基本相同，不同就是如果用户存在echo出一个查询页面。        修改：即登录或查询后echo出的界面。后台交给update.php处理。            表单验证去掉了头像和id，前者可以为空，后者属性为readonly，不允许修改，所以不需要验证。            点击“保存”后，后台得到前台post回来的表单数据，如果flag_pic=changed，对新文件进行同样的格式验证；然后进行条件判断，如果flag_pic=changed，update语句就把pic数据也更新，否则不更新pic。        查询：html给出了一个输入框和一个提示信息“学生学号：”，一个查询按钮。            表单验证为不允许学生学号为空。            后台获取前台表单提交上来的id数据，对adm表进行查询，如果用户存在，echo出一个和学生登录后的页面一样的页面，原理也是同理，如果用户不存在，echo出一个出错界面，显示该学生不存在，和一个链接“返回”，返回上一步。
本次实验的体会和结论(包括遇到的问题是怎么解决的，主要收获等)（10分）	得分：
答： （1）       环境配置 老师已经了完整的环境配置压缩包，但由于我的电脑环境比较复杂，安装过mysql和不同版本的apache，所以运行老师给的压缩包里的执行文件并不好用，虽然停止了本机的mysql也不好用，所以我尝试了其他同学的电脑，环境比较干净的就可以运行，所以这个问题通过换台环境干净的机器解决了。 （2）       图片预览 这个问题的实现方法和浏览器类型有关，所以要分析不同浏览器的类型，进行不同的处理；我还用到了“放弃修改头像”的按钮，这就要求把img的src变成原来的，一开始我并没有考虑不同浏览器的问题，所以修改完src，新图片和原图片产生了重叠，也就是旧图片没有清理掉，后来我研究了一下图片预览代码的原理，知道了是浏览器类型没有考虑到的原因。 （3）       修改头像 因为一开始我是发现reset按钮并没有把图片也重置了，也就是没有重置src，后来发现reset是重置input标签的值，我也考虑过要不要把reset重写，后来通过参考其他网站的执行，用户头像和文本信息都是分开编辑的，所以有必要添加一个“放弃修改头像”的按钮，除此之外，还添加了一个hidden域，为了提供一个flag_pic变量，表示用户是否更改了头像，这样的话，如果知道用户修改了头像，就需要对新文件进行处理，如果没有，就不需要对文件进行处理，也不需要update该字段了。