PHP动态网站开发项目教程课件 项目2 项目前端开发

PHP动态网站开发项目教程任务2项目前端开发子任务2.1项目开发前的准备工作【任务提出】

要制作项目，首先需要进行需求分析。小王同学计划制作的第一个项目是“会员管理系统”。会员管理系统是大多数项目的必备模块，完成这个项目对其他项目的完成将有极大的帮助。【任务实施】2.1.1项目需求设定

图2.1.1～图2.1.4所示为小王同学设计的会员管理系统的运行页面。图2.1.1

会员注册页面图2.1.2

会员登录页面图2.1.3

管理员页面图2.1.4

会员资料修改页面2.1.2PHP的发展历史

PHP继承自一个名叫PHP/FI的工程。PHP/FI最早于1994年由拉斯姆斯·勒多夫（RasmusLerdorf）创建，最初只是一套简单的Perl脚本，用来跟踪访问他主页的人们的信息。到1996年发展为PHP/FI2.0，也就是它用C语言实现的第二版，在全世界已经有几千个用户（估计）和大约50,000个域名安装，大约是Internet所有域名的1%。

PHP/FI2.0在经历数个Beta版本的发布后，于1997年11月发布了官方正式版本。随着PHP3.0的第一个Alpha版本的发布，PHP逐渐走向了成功。

1998年的冬天，PHP3.0官方正式版本发布不久，安迪·古特曼斯（AndiGutmans）和泽弗·苏拉斯凯（ZeevSuraski）开始重新编写PHP代码。。新的引擎被称为“ZendEngine”（这是Zeev和Andi的缩写），成功地实现了这些设计目标，并在1999年中期首次引入PHP。基于该引擎并结合了更多新功能的PHP4.0，在PHP3.0发布一年多后，于2000年5月发布了官方正式版本。

PHP5.0在长时间的开发及发布了多个预发布版本后，于2004年7月发布官方正式版本。它的核心是ZendEngine2代，引入了新的对象模型和大量新功能。

2015年12月3日，PHP7.0问世了，这是PHP的一次飞跃。PHP7.0修复了大量的bug，新增了大量功能和语法糖。这些改动涉及核心包、GD库、PDO、ZIP、ZLIB等人们熟悉和不熟悉的核心功能与扩展包。

PHP7.0移除了已经被废弃的函数，如“MySQL_”系列函数。PHP7.0的性能高于HHVM[HipHopVirtualMachine，全称为HipHop虚拟机，会将PHP代码转换成高级别的字节码，通常称为中间语言。在运行时，HHVM通过即时编译器将字节码转换为x64的机器码。在这些方面，HHVM十分类似于C#的公共语言运行时（CommonLanguageRuntime，CLR）和Java的Java虚拟机（JavaVirtualMachine，JVM）]，并且是PHP5.6性能的两倍。

2020年11月26日，PHP官方发布了PHP8.0的官方正式版本。子任务2.2创建首页【任务实施】2.2.1创建项目

各项准备工作就绪，小王同学要正式开始第一个项目的制作了。（1）在磁盘中创建一个目录，名为member，如E:\member。（2）在小皮面板中配置一个网站，域名为“member”，如图2.2.1所示。（3）打开PhpStorm，在启动界面中选择“Open”，打开E:\member目录，如图2.2.2所示。（4）选中项目根目录member并单击鼠标右键，在弹出的快捷菜单中选择“New”→“PHPFile”命令，创建index.php文件。成功创建文件后，系统会自动打开此文件。在打开的文件中删除文件中默认的代码，然后在文件中输入“html:5”，再按“Tab”键，系统会自动创建HTML5格式文档基础标签代码（这是PhpStorm中的键盘快捷方式，类似的操作还有很多，可以通过网络查询，了解更多快捷方式）。图2.2.1

配置网站域名图2.2.2

使用PhpStorm打开项目（5）将title修改为“会员管理系统”，然后在页面中创建1个标题和5个导航菜单项，并添加相应的CSS样式。图2.2.3

预览项目首页效果2.2.2部署项目

在PhpStorm中选择“File”→“Settings”→“Build,

Execution,Deployment”→“Deployment”命令，如图2.2.4所示。图2.2.4

在PhpStorm中部署项目

在右边单击“+”，选择“Inplace”命令，然后在弹出的对话框的“Newservername”文本框中输入服务器的名字，这个名字可以自定义，小王同学就直接输入member，如图2.2.5所示。图2.2.5

创建服务器

创建好服务器后，在右侧的“WebserverURL”文本框中输入在小皮面板中创建好的域名即可，如图2.2.6所示。图2.2.6

设置服务器URL根路径子任务2.3制作注册页面前端部分【任务实施】2.3.1创建文件

在创建注册页面时，可以参考首页文件中的部分内容，特别是导航栏部分。（1）选中index.php文件并单击鼠标右键，在弹出的快捷菜单中选择“Copy”→“Copy”命令。（2）选中member目录并单击鼠标右键，在弹出的快捷菜单中选择“Paste”命令。（3）在弹出的对话框中输入新的文件名“signup.php”。（4）单击“Refactor”按钮，即可生成signup.php文件，如图2.3.1所示。图2.3.1

复制文件（5）将首页中的导航栏代码复制到signup.php文件中。由于在首页中创建的导航链接在注册页面中也需要，相当于其是一个公共部分，因此，这里采用了复制的方式来创建注册页面。复制代码后，需要修改导航栏中当前栏目的代码，将“首页”链接上的current样式删除，然后在“会员注册”链接上添加current样式。2.3.2制作注册页面表单

需要注意的是，在制作表单时，需要在“<form>”标签中设置“action”属性，表示单击“提交”按钮后，将各项数据发送至对应的网页文件进行处理。小王同学在这里设置的action属性值是postReg.php，表示单击“提交”按钮后，会将用户填写的各项数据发送至此文件进行下一步处理。“method”属性指定了提交文件的方式，可以设置为“GET”和“POST”两种方式。

2.3.3设置表单控件name属性

对于表单中的控件而言，每一个控件都需要设置一个“name”属性，这个属性用于后端文件读取其数据。其中每一组单选按钮和每一组复选框的“name”属性应该保持一致。对于单选按钮、复选框、下拉列表框等不能由用户手动输入结果的控件，还需要设置“value”属性，这个属性的值就是后端文件最终读取到的值。特别注意，由于复选框可以选多个值，因此，其“name”属性要在正常的名字后面添加一对方括号，表示其类型是一个数组，这样才能读取到多个选项的值。【知识储备】

小王同学在学习静态网站开发课程时，没有注意过表单提交的方式。现在使用PhpStorm创建了表单，在添加“method”属性时，看到了有两种不同的表单提交方式，分别是“GET”和“POST”。那么这两种提交方式到底有什么区别呢？通过查询相关资料，他了解了这两种方式的区别。（1）GET提交的数据会放在URL之后，以“？”分隔URL和传输数据，参数之间用“&”相连，如

EditPosts.php?name=boKeYuan&id=123456；POST提交的数据会放在HTTP包的Body中。（2）GET提交的数据长度有限制（注意：HTTPGET方法提交的数据长度并没有限制，HTTP规范没有对URL长度进行限制，这个限制是指特定的浏览器及服务器对它的限制）；POST提交的数据长度没有限制。（3）对参数的数据类型要求不同，GET只接收美国信息交换标准代码（AmericanStandardCodeforInformationInterchange，ASCII）；而POST没有限制。（4）GET请求参数会被完整保留在浏览器历史记录里；而POST请求参数不会保留。（5）POST比