PHP动态网站开发项目教程课件 任务11 在线投票系统管理员功能

PHP动态网站开发项目教程任务11在线投票系统管理员功能子任务11.1管理员查看车辆列表11.1.1修改前端展示页面

图11.1.1所示为管理员登录后的效果。图11.1.1

管理员登录后显示“后台管理”链接11.1.2制作管理员后端文件

做好了入口链接，接下来，小王同学开始制作管理员后端查看车辆列表的文件。由于这些内容和会员管理系统的后端功能很相似，因此，借鉴前面做过的文件内容，小王同学很快就做好了管理员后端查看车辆列表的文件。

在页面底部还有一个功能就是管理员添加车辆，小王同学先在这里放了一段文字，紧接着会完成这个功能的实现。图11.1.2

管理员查看车辆列表子任务11.2管理员添加新的车辆（一）11.2.1了解表单的enctype属性

要在表单中上传图片，首先需要在表单的<form>标签中加上enctype="multipart/form-data"属性。enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

表单数据的编码类型默认被设置成“application/x-www-form-urlencoded”。也就是说，在数据发送到服务器之前，所有字符都会进行编码（空格转换为“+”，特殊符号转换为ASCII或HEX值）。<form>中enctype属性的具体值如表11.2.1所示。

要上传图片（或者其他文件），必须使用file控件，即需要上传图片时，<input>标签必须设置type="file"属性。值描述application/x-www-form-urlencoded在发送前对所有字符进行编码（默认）multipart/form-data不对字符进行编码在使用包含文件上传控件的表单时，必须使用该值text/plain空格转换为“+”，但不对特殊字符进行编码表11.2.1<

form>中enctype属性的具体值11.2.2设置PHP中的上传文件参数

要在PHP中使用文件上传，有一个很重要的问题需要注意，那就是上传文件大小的设置问题。系统默认允许上传文件的最大大小都是比较小的，当然，对于上传头像这一类的业务来说，问题不大，但如果要上传其他文件或一些尺寸较大的图片，则可能会出现问题。

打开小皮面板，在左边的导航栏中单击“设置”，在右边区域中单击“配置文件”选项卡，其下第一项内容就是php.ini。下面列出当前安装好的PHP的各个版本，单击当前网站使用的PHP版本，即可打开php.ini配置文件，如图11.2.1所示。图11.2.1

在小皮面板中打开php.ini文件

打开php.ini以后，需要修改以下几项内容。（1）max_execution_time：表示PHP文件最长可以执行的时间。如果上传较大的文件，则可能会用较长时间。此值默认为30，也就是说，一个文件默认最长可执行时间为30s，请根据需要将其值修改为一个较大的值。如果修改为0，则表示不限制时间。（2）post_max_size：表示PHP可以接收的最大POST数据量，请根据需要修改，单位为MB。（3）upload_max_filesize：表示允许上传文件的最大大小，单位为MB。在设置时，post_max_size应该大于或等于upload_

max_filesize。

修改php.ini文件后，请记得重新启动Web服务。11.2.3制作车辆添加前端页面

小王同学在前面制作文件的基础上，在admin.php中编写了车辆添加前端代码。

完成前端页面的静态内容后，小王同学查看添加车辆页面，其效果如图11.2.2所示。图11.2.2

添加车辆11.2.4制作车辆添加后端页面图11.2.3

上传图片后输出$_FILES数组的内容子任务11.3管理员添加新的车辆（二）11.3.1编写车辆添加后端代码

小王同学通过查找网络资料，并结合自己的实践，经过几个回合的修改后，终于完成了文件上传的全部功能。11.3.2获取数组内元素1．与end()相关的函数

在PHP中，与end()相关的函数如下。（1）current()：返回数组中当前元素的值。（2）next()：将内部指针指向数组中的下一个元素，并输出。（3）prev()：将内部指针指向数组中的上一个元素，并输出。（4）reset()：将内部指针指向数组中的第一个元素，并输出。（5）each()：返回当前元素的键名和键值，并将内部指针向前移动。

在判断扩展名时，还使用了strtolower()函数，以将文件扩展名转换成小写形式。因为用户实际上传的文件，其扩展名可能是大写形式，也可能是小写形式，还可能是大小写混合形式。2．与字符转换相关的函数

在PHP中，与字符转换相关的函数如下。（1）strtoupper()：把字符串转换为大写形式。（2）lcfirst()：把字符串中的首字母转换为小写形式。（3）ucfirst()：把字符串中的首字母转换为大写形式。（4）ucwords()：把字符串中每个单词的首字母转换为大写形式。11.3.3生成唯一文件名

该函数的基本语法及参数如下所示。uniqid(prefix,more_entropy)

uniqid()函数的参数详情如表11.3.1所示。参数描述prefix可选。规定唯一

ID的前缀。如果两个脚本恰好在相同的时间生成

ID，则该参数很有用more_entropy可选。规定位于返回值末尾的更多熵，这将让结果更具唯一性。当设置为

TRUE时，返回字符串为

23个字符。默认是

FALSE，返回字符串为

13个字符表11.3.1

uniqid()函数的参数详情参数描述file必需。规定要移动的文件newloc必需。规定文件的新位置表11.3.2

move_uploaded_file()函数的参数详情子任务11.4管理员修改和删除车辆资料11.4.1修改前端页面

修改车辆资料的页面效果如图11.4.1所示。11.4.2制作修改车辆资料后端文件

车辆资料修改成功后，返回admin.php页面，就会刷新车辆资料。图11.4.1

修改车辆资料的页面效果子任务11.5管理员删除车辆资料11.5.1修改前端页面

小王同学在这里使用了layer封装的询问框。当然需要注意的是，在使用layer组件时，需要在文件中引用layer.js核心库文件，否则单击“删除”链接时，如果打开了浏览器的控制台，那么将会看到图11.5.1所示的错误。这个错误为layer未被定义（layerisnotdefined）。正确引用layer.js库文件后，错误消失，并能正确弹出询问框，如图11.5.2所示。11.5.2制作删除车辆后端文件

图11.5.1

未引用layer.js核心库文件时浏览器报错图11.5.2

删除车辆时的询问框子任务11.6ECharts的基本使用11.6.1了解ECharts

ECharts是一个基于JavaScript的开源可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。

ECharts最初由百度团队开源，并于2018年初捐赠给Apache软件基金会（ApacheSoftwareFoundation，ASF），成为其孵化级项目。2021年1月26日晚，Apache软件基金会官方宣布ECharts项目正式毕业。同年1月28日，ECharts5线上发布会举行。

只需要打开C:\Windows\System32\drivers\etc下的hosts文件，添加如下DNS解析即可快速访问。1. 32

echarts.apac**.org2. 0

cdn.jsdeli**.net

图11.6.1所示为ECharts的首页。单击图11.6.1中右边的播放按钮，可以看到非常精美的动画展示。ECharts提供了丰富的图表类型，是最常用的数据可视化工具之一。

图11.6.2所示为ECharts提供的折线图效果。

图11.6.3所示为ECharts提供的柱状图效果。图11.6.1

ECharts首页展示图11.6.2

ECharts提供的折线图效果展示图11.6.3

ECharts提供的柱状图效果展示11.6.2快速掌握ECharts应用

在图11.6.1中单击“快速入门”按钮，可以查看关于ECharts的详细内容。

首先是ECharts核心库文件的下载。ApacheECharts提供了多种安装方式，可以根据项目的实际情况选择以下任意一种方式安装。（1）从GitHub获取并安装。（2）从npm获取并安装。（3）从CDN获取并安装。（4）在线定制。

比较简单的方式是直接下载ECharts核心库文件，官网给出的链接在GitHub网站上。但在国内直接访问GitHub有时会很慢，甚至完全无法访问。解决方法也是在hosts文件中添加DNS解析。那么如何找到比较好用的DNS呢？方法很简单，打开“站长工具”，找到“DNS查询”，然后在其中输入要查询的域名，最后单击“检测”按钮，就可以找到合适的DNS了，如图11.6.4所示。图11.6.4

DNS查询

这里生成的是柱状图，横轴是图表的类别，纵轴是各类别对应的数据。将鼠标指针移至某一柱条上，会显示当前柱条的详细情况。ECharts提供了丰富的格式和选项，可以制作出很多非常精美的图表。图11.6.5

生成一个简单的ECharts图表子任务11.7ECharts图表数据异步加载11.7.1异步加载ECharts数据

图表数据异步加载的另外一种方法是，先设置好图表的样式，显示一个空的直角坐标系，然后通过异步方式获取数据后填入图表。11.7.2制作后端接口文件

查看输出的结果如图11.7.1所示。单击节点前面的“-”号可以折叠对象。如果无法安装插件，则也可以在浏览器的调试工具（可以按键盘快捷键“F12”打开）中进入“网络”面板，在过滤设置中选择“全部”，然后在左边的“名称”中单击getdata.php，查看返回结果，如图11.7.2所示。在右侧区域中单击“预览”按钮可非常方便地查看JSON对象。单击节点处的箭头可以折叠或展开内容。如果返回的内容没有这个箭头，则说明数据格式不对。图11.7.1

后端接口文件输出的JSON对象图11.7.2

在“网络”面板中查看后端接口文件返回的结果11.7.3制作车辆得票数显示页面

完成相关代码的编写后，小王同学测试了效果，得到图11.7.3所示的结果。图11.7.3

车辆得票数柱状图11.7.4修改ECharts图表格式

完成柱状图的显示后，小王同学又特意做了一些测试，比如，缩小浏览器的宽度，此时，他发现图表中的横轴类别文字重叠在一起了，如图11.7.4所示。

为了解决这个问题，他仔细阅读了ECharts的相关文档，找到了解决方案，那就是在上述代码的第42行设置interval参数，此参数表示横轴间隔多少个类别。比如，将此参数设置成1，表示每显示一个类别后，隐藏一个类别，再显示下一个类别，如图11.7.5所示。可以看到，原来图表中总的类别是7个，但此时只有4个类别显示了具体的文字信息。

图11.7.4

宽度不够时横轴类别文字重叠

图11.7.5

设置横轴类别间隔显示

除了使用间隔以外，还有一种方式就是设置横轴类别文字的旋转，这样也可以在有限的区域中显示更多的文字。比如，在上述代码的第43行设置rotate为30，表示逆时针旋转30度，此时显示的效果如图11.7.6所示。

在上述代码的第52行还有一个参数barWidth，这个参数用来设置柱状图的宽度。如果不设置此参数，则系统将自动设置柱状图宽度，如果整个窗口横向比较大，那么每一根柱条会比较宽，如图11.7.7所示。图11.7.6

设置横轴类别文字旋转

图11.7.7

自动设置柱状图宽度

参数type用来设置图表的类型，bar代表柱状图。如果将此参数设置成line，则会生成折线图，如图11.7.8所示。图11.7.8

折线图11.7.5生成饼图

首先，将type设置成pie，其次，不需要设置坐标轴，而是把数据名称和值都写在系列（series）中。

改好后端接口