HTML5 & CSS3 新手指南 - 服务器端故事
4.94/5 (12投票s)
服务器端脚本的入门介绍。
引言
你已经学习了 HTML5 和 CSS3 - HTML5 提供了文档结构，而 CSS3 提供了样式。然而，它们加在一起只构成了故事的一面，即客户端。仅由客户端组件组成的网站在内容上是静态的，只适用于不经常更改的信息展示。
当今的网站内容高度动态且取决于情境。只需访问 CodeProject 的快速问答论坛，你就会惊叹于每当你刷新按钮时，网页上不断更新的新问题。显然，这仅凭 HTML5 是无法实现的。那么它是如何实现的呢？答案就在故事的另一面——服务器端。
在我的文章 HTML5 & CSS3 入门指南 - 使用 HTML5 创建强大的表单 中，我解释了创建 HTML5 表单以将数据发送到服务器端脚本进行处理。然而，我不得不避免深入任何实际的服务器端脚本，而是使用 JavaScript 来模拟接收表单数据。本文通过一个完整的教程，为服务器端脚本提供了一个入门介绍，最终创建一个小型 Web 应用程序，作为那篇文章的自然延伸。我选择了 PHP 作为脚本语言，Apache 作为 Web 服务器。在教程结束后，你将深入了解客户端和服务器端组件如何协同工作以创建动态 Web 应用程序。然后，你可以利用这些知识作为跳板，进一步深入探索更多服务器端技术。
搭建舞台
在你开始编写 Web 应用程序之前，你必须先搭建好舞台——**开发和测试环境**。这是一个配备了必要软硬件的地方，你可以在那里编写和测试你的 Web 应用程序，然后将它们上传到暂存环境，再到生产环境。这种环境最常见的硬件就是你自己的电脑。对于你即将创建的小型 Web 应用程序，你需要以下软件来在你的电脑上设置此环境：
- 一个 Web 服务器来托管 Web 应用程序。
- 一个 PHP 引擎来解释 PHP 脚本。
- 一个 IDE 来帮助你编写和调试 PHP 脚本。
Apache 和 PHP
对于测试环境，你将安装这个免费的一体化软件包，名为 _**XAMPP**_，可以从 Apache Friends 下载。对于 Macintosh 用户，还有一个免费软件包叫做 MAMP。XAMPP 代表 Cross-platform, Apache, MySQL, PHP and Perl。只需几次鼠标点击，你就可以在 PC 上安装 Apache、MySQL、PHP 和 phpMyAdmin。XAMPP 主要作为 Windows 计算机的 PHP 开发环境而创建。MAMP 代表 Macintosh, Apache, MySQL and PHP。只需几次鼠标点击，你就可以在 Macintosh 计算机上安装 Apache、MySQL、PHP 和 phpMyAdmin。MAMP 主要作为 Macintosh 计算机的 PHP 开发环境而创建。
下载 Windows 版 XAMPP 安装程序。关闭你电脑上的所有应用程序，双击下载的 exe 文件开始安装。出现提示时，只需保留所有选项为默认设置。默认情况下，安装程序会将所有必需的文件解压到一个新文件夹中，位于 _c:\xampp_。
如果你的机器上已经安装了旧版本的 XAMPP，你必须在安装新版本之前卸载它。然而，在卸载之前，请记住备份存在于现有 XAMPP 文件夹中的任何 Web 项目和数据库，以便你可以将它们重新定位到新版本。
成功安装后，你应该会在桌面上找到一个 XAMPP 图标，双击它以启动 XAMPP 控制面板，如图 1 所示。或者，你可以找到 _c:\xampp-control.exe_（控制面板程序），并将快捷方式拖到桌面上。
 |
|
图 1：XAMPP 控制面板
|
在 XAMPP 控制面板上，点击 Apache 的 _Start_ 按钮。将显示它已成功启动的消息，其 Start 按钮上的标签会变为 _Stop_。（图 2）
 |
|
图 2：Apache 已启动
|
点击 Apache 服务器的 _Admin_ 按钮，或者启动浏览器并在地址栏输入 _https:///_。如果一切都设置正确，你应该会在浏览器中看到以下主管理页面。（图 3）
 |
|
图 3：XAMPP 主管理页面
|
主管理页面左侧的菜单提供了对 XAMPP 各个组件的基于 Web 的访问。
点击主管理页面 _Php_ 部分菜单下的 _phpinfo()_ 链接。你应该会看到一个页面，显示 PHP 配置信息，如下所示。（图 4）
 |
|
图 4：PHP 配置
|
集成开发环境
你还需要软件来编写程序。由于 PHP 程序只是文本文件，你可以使用文本编辑器（如 Windows 上的记事本或 Macintosh 上的文本编辑）。然而，有一些软件工具提供了使程序编写更容易的功能，它们统称为集成开发环境或 IDE。
IDE 提供了一个编辑和调试环境，通常包括代码编辑器、编译器、调试器和图形用户界面 (GUI) 生成器。在本教程中，我们将安装 _**Zend Eclipse PHP Development Tools (PDT)**_ 作为 IDE。
下载 Zend Eclipse PHP Development Tools (PDT) 并将其解压到你电脑上的一个位置。你需要注册一个免费账户才能继续下载。找到并双击解压文件夹中的 _zend-eclipse-php.exe_ 来启动 PDT。（图 5）
 |
|
图 5：Zend Eclipse PDT 启动
|
系统会提示你输入工作区的路径。（图 6）**将工作区更改为“c:\xampp\htdocs”，你的 PHP 项目将驻留在此处**。
 |
|
图 6：工作区
|
PDT 的初始屏幕将显示如图 7 所示。关闭欢迎屏幕。
 |
|
图 7：欢迎屏幕
|
你已成功在你的电脑上设置了开发和测试环境。现在你可以开始创建小型 Web 应用程序了。
掌握基础知识
你将逐步学习使用 PDT 作为 IDE 编写第一个服务器端 PHP 脚本的过程。确保 Apache 已启动（图 2）。在 PDT 菜单中，
- 点击 _File > New > Local PHP Project_（图 8）
图 8：启动新 PHP 项目 - 将 _Project Name_ 输入为“MyFirstServerSideProject” _> Finish_（图 9）
图 9：命名 PHP 项目 - 一个名为“MyFirstServerSideProject”的 PHP 项目已创建，并显示在 PHP Explorer 面板中。默认情况下，项目还会创建一个空的“index.php”文件（图 10）。
图 10：一个空的 PHP 项目 - 在 PHP Explorer 中双击“index.php”节点，在编辑器窗口中打开该文件。在“index.php”选项卡下的编辑器窗口中键入高亮显示的文本（图 11）。
图 11：键入脚本 - _File > Save >_ 然后在 _PHP Explorer_ 中右键单击“index.php” _> Run As > PHP Web Application_（图 12）
图 12：执行脚本 - 将启动一个预览窗口，显示 PHP 的配置信息（图 13）。
图 13：脚本结果 - 你也可以在浏览器中查看相同的结果。启动浏览器，在地址栏输入 URL “https:///MyFirstServerSideProject/index.php” 并按 Enter 键。看到了吗？
- URL 中的“localhost”指的是你的电脑。你可以通过将“localhost”替换为你电脑的 IP 地址（例如 192.168.1.2）来从连接到同一局域网的另一台计算机访问此页面。
恭喜你，你刚刚创建了一个简单的三行 PHP 脚本，它返回了你电脑上 PHP 引擎的配置信息。请注意 PHP 的以下特性：
- PHP 脚本由一系列命令和语句组成。
- PHP 脚本必须以 **<?php** 开头，以 _**?>**_ 结尾。
- 每个 PHP 语句都必须以分号结尾。
- PHP 命令不区分大小写。
- PHP 脚本通常与客户端组件（如 HTML 和 CSS）共存于一个文件中。
- 当一个文件包含 PHP 脚本和客户端组件的混合时，它必须保存为 _ .php_ 扩展名。
让我们在同一个项目中添加一个新的 PHP 文件，
- 在 _PHP Explorer_ 中右键单击“MyFirstServerSideProject” _> New > PHP File_（图 14）以在编辑器窗口中打开一个新的 PHP 文件。将其保存为“hello.php”。
图 14：添加新 PHP 文件 - 将以下代码键入“hello.php”文件中，保存并在 PDT 中预览，你将看到如图 15 所示的输出。 **echo** 是一个 PHP 命令，它将其参数作为字符串和 HTML 元素输出到浏览器，而 **date("Y-m-d")** 是一个 PHP 日期函数，以“_年-月-日_”格式返回当前日期。这里，第一个 echo 命令输出“_<h1>Hello CodeProject!</h1>_”，第二个命令输出当前日期的“_年-月-日_”格式。
<!DOCTYPE HTML> <html> <head> <title>Simple PHP Example</title> </head> <body> <?php echo '<h1>Hello CodeProject!</h1>'; ?> <p><?php echo date("Y-m-d"); ?></p> </body> </html>
图 15：hello.php 预览 - 右键单击图 15 预览窗口中的空白区域，从上下文菜单中选择“_View source_”，它将显示如图 16 所示的页面源代码。你注意到什么了吗？
图 16：查看源代码
显示源代码只包含 HTML 代码。你键入的 PHP 代码已明显消失。你刚刚学到的是：客户端无法访问 PHP 代码。换句话说，嵌入在 PHP 代码中的业务逻辑被安全地保存在服务器上。PHP 代码由服务器上的 PHP 引擎执行，其结果被渲染为 HTML 并发送到浏览器进行显示。在这个例子中，<?php echo '<h1>Hello CodeProject!</h1>'; ?>
已被输出为<h1>Hello CodeProject!</h1>
while<?php echo date("Y-m-d"); ?>为2014-05-10
你现在可以着手创建小型 Web 应用程序了。
展望...
小型 Web 应用程序将包含 2 个页面 - 一个注册页面（图 17），它捕获用户的详细信息和肖像，并将它们提交给一个确认页面（图 18）进行验证和显示。
 |
| 图 17：注册页面 |
 |
|
图 18：确认页面
|
导入资源
下载并解压“ServerSideStory.zip”到你的电脑。除其他外，你应该会在解压的“ServerSideStory”中找到一个 PHP 文件、一个 CSS 文件和一个 images 文件夹。
- index.html
- style.css
- images 文件夹
将“ServerSideStory”文件夹移动到“c:\xampp\htdocs\”，这是存储 Web 文件夹的默认根目录。当你在浏览器的地址栏中键入“https://”时，它会自动映射到此位置。
要使用 PDT IDE 处理这些文件，你必须首先将“ServerSideStory”作为项目导入到 PDT 工作区。在菜单中，选择 _File > Import > Existing Projects into Workspace_。
 |
|
图 19：导入现有 PHP 项目
|
你已将“ServerSideStory”导入到 PDT 中，如图 20 所示。
 |
|
图 20：ServerSideStory 已导入
|
注册页面
在 _PHP Explorer_ 中双击“index.html”文件，你应该会在编辑器窗口中看到以下代码页面。
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>Registration Form</h1>
</header>
<div class="form">
<form id="particularsform" action="acknowledge.php" method="post"
enctype="multipart/form-data">
<p class="particulars">
<label for="name">Name</label>
</p>
<input type="text" id="name" name="fullname"
placeholder="First name, last name" required autofocus>
<p class="particulars">
<label for="email">Email</label>
</p>
<input type="email" id="email" name="email"
placeholder="someone@gmail.com" required>
<p class="particulars">
<label for="password">Create a password</label>
</p>
<input type="password" id="password" name="password" required
pattern="[\w]{8,}">
<p class="particulars">
<label for="confirmpassword">Confirm your password</label>
</p>
<input type="password" id="confirmpassword" name="confirmpassword"
required>
<fieldset>
<legend>Gender</legend>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="Male" checked>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="Female">
</fieldset>
<p class="particulars">
<label for="dateofbirth">Date of Birth</label>
</p>
<input type="date" id="dateofbirth" name="dateofbirth">
<p class="particulars">
<label for="hobbies">Hobbies</label>
</p>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Coding">Coding<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading">Reading<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Swimming">Swimming<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Jogging">Jogging<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Eating">Eating<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Others">Others<br>
<p class="particulars">
<label for="favoritecolor">Favorite Color</label>
</p>
<input type="color" id="favoritecolor" name="favoritecolor">
<p class="particulars">
<label for="zodiac">Zodiac</label>
</p>
<input list="zodiac" name="zodiac">
<datalist id="zodiac">
<option value="Aries"></option>
<option value="Taurus"></option>
<option value="Gemini"></option>
<option value="Cancer"></option>
<option value="Leo"></option>
<option value="Virgo"></option>
<option value="Libra"></option>
<option value="Scorpio"></option>
<option value="Sagittarius"></option>
<option value="Capricorn"></option>
<option value="Aquarius"></option>
<option value="Pisces"></option>
</datalist>
<p class="particulars">
<label for="portrait">Portrait</label>
</p>
<input type="file" id="portrait" name="portrait">
<input type="submit" class="bottom" name="submit" id="submit" value="Sign up">
</form>
</div>
</div>
</body>
</html>
这些是用于构建 HTML5 表单的代码，你可能已经在我的文章 HTML5 & CSS3 入门指南 - 使用 HTML5 创建强大的表单 中学过了。
特别注意以下 _<form>_ 属性：
- **action="acknowledge.php"** 指定了表单数据将被发送到的 PHP 脚本。
- **method="post"** 通过 HTTP 头部传输数据，这对他人是不可见的，并且是文件上传的方法。
- **enctype="multipart/form-data"** 允许将文件包含在数据流中。这将使用 _<input type="file">_ 元素使用户能够将肖像文件上传到服务器。
打开一个（Chrome）浏览器，在地址栏输入“https:///ServerSideStory/index.html”然后按 _Enter_ 键，你应该会看到一个如图 17 所示的注册页面。我们将使用 Chrome 来测试后续页面，因为 PDT 中的预览窗口尚不支持完整的 HTML5。
确认页面
你将创建确认页面，以接收、验证并显示用户通过“index.html”提交的信息和肖像。在 _PHP Explorer_ 中右键单击“ServerSideStory” _> New > PHP File_（图 14）以在编辑器窗口中打开一个新的 PHP 文件。将其保存为“**acknowledge.php**”。在编辑器窗口中打开此文件，输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Acknowledgement</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>Acknowledgement</h1>
</header>
<div class="form">
</div>
</div>
</body>
</html>
让我们首先捕获从“index.html”发送过来的 _name_ 数据。回顾“index.html”中的这段代码：
<input type="text" id="name" name="fullname" placeholder="First name, last name" required autofocus>
注意 _<input>_ 标签的 **name="fullname"**，要访问在接收 PHP 脚本中的其值，我们如下传递 _name_ 属性的值给 PHP 的 **$_POST** 函数：
$_POST["fullname"]
在 _<div class="form">_ 标签和闭合的 _</div>_ 标签之间添加以下代码：
<div class="form">
<p>
<label>Name: <?php echo $_POST["fullname"] ?></label>
</p>
</div>
注意 PHP 代码嵌入在 HTML 代码中。只要 PHP 代码被正确地包含在 _**<?php**_ 和 **?>** 中，你就可以将 PHP 代码放在文件的任何地方。这行 PHP 代码将输出从“index.html”发送过来的姓名的值作为标签。
同样，在姓名标签之后添加以下代码来捕获和显示 _email_、_gender_、_dateofbirth_ 和 _zodiac_。
<p>
<label>Name: <?php echo $_POST["fullname"] ?></label>
</p>
<p>
<label>Email: <?php echo $_POST["email"] ?></label>
</p>
<p>
<label>Gender: <?php echo $_POST["gender"] ?></label>
</p>
<p>
<label>Date of Birth: <?php echo $_POST["dateofbirth"] ?></label>
</p>
<p>
<label>Zodiac: <?php echo $_POST["zodiac"] ?></label>
</p>
在日期和星座标签之间添加以下代码来捕获 _hobbies_。
<label>Date of Birth: <?php echo $_POST["dateofbirth"] ?></label>
</p>
<p>
<label>Hobbies:
<?php
if (isset ($_POST["hobbies"] )) {
$hobbies = implode(", ", $_POST ["hobbies"]);
echo $hobbies;
}
?>
</label>
</p>
<p>
<label>Zodiac: <?php echo $_POST["zodiac"] ?></label>
与之前的每个表单项（它们只包含一个值）不同，_hobbies_ 可以接受多个值。如何捕获它们？答案是使用数组。回顾“index.html”中的以下代码：
<input type="checkbox" id="hobbies" name="hobbies[]" value="Coding">Coding<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading">Reading<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Swimming">Swimming<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Jogging">Jogging<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Eating">Eating<br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Others">Others<br>
我们将所有复选框的 _name_ 都命名为“_**hobbies[]**_”，其中 **[]** 表示数组。在“acknowledge.php”中，我们可以使用 **$_POST["hobbies"]** 来捕获用户所选值的数组。这里，我使用了另一个 PHP 函数 _**implode()**_ 来将这些值连接成一个以逗号分隔的字符串。
在爱好标签和星座标签之间添加以下代码来捕获 _favoritecolor_。一如既往，_$_POST_ 用于捕获颜色代码。与其仅仅显示纯色代码（**<?php echo $_POST["favoritecolor"] ?>**），这毫无意义，我将此值放在 _<span>_ 标签中，并通过内联 CSS（**style='color:<?php echo $_POST["favoritecolor"] ?>; background-color:<?php echo $_POST["favoritecolor"] ?>'**）将颜色代码分配给文本的前景色和 _<span>_ 区域的背景色。结果是一个颜色代码的彩色条。
<?php
if (isset ($_POST["hobbies"] )) {
$hobbies = implode(", ", $_POST ["hobbies"]);
echo $hobbies;
}
?>
</label>
</p>
<p>
<label>Favorite Color:
<span style='color:<?php echo $_POST["favoritecolor"] ?>; background-color:<?php echo $_POST["favoritecolor"] ?>'>
<?php echo $_POST["favoritecolor"] ?>
</span>
</label>
</p>
<p>
<label>Zodiac: <?php echo $_POST["zodiac"] ?></label>
在星座标签后添加以下代码来捕获和保存上传的肖像文件。
<label>Zodiac: <?php echo $_POST["zodiac"] ?></label>
</p>
<br>
<p>
<?php
if ($_FILES["portrait"]["error"] == 0) {
move_uploaded_file($_FILES["portrait"]["tmp_name"], "images/".$_FILES ["portrait"]["name"]);
}
?>
</p>
</div>
在这里，我们处理的是一个文件对象，而不是像之前那样的基本值。但是，起点始终是相同的，查找 _<input>_ 标签中的 _name_ 属性。回顾“index.html”中的这段代码：
<input type="file" id="portrait" name="portrait">
你找到了，是 _**name="portrait"**_。要访问文件数据，我们如下传递 _name_ 属性的值给 PHP 的 _**$_FILE**_ 数组对象：
$_FILES["portrait"]
代码将首先检查是否有任何文件错误，然后才继续。
if ($_FILES["portrait"]["error"] == 0)
如果没有错误，它会将上传的文件以其原始文件名保存在“images”文件夹中。
move_uploaded_file($_FILES["portrait"]["tmp_name"], "images/".$_FILES ["portrait"]["name"]);
默认情况下，PHP 会将任何上传的文件存储在 _**$_FILES["portrait"]["tmp_name"]**_ 指定的某个临时位置。这些文件将在脚本结束时消失。因此，在脚本结束前，务必使用 PHP 函数 _**move_uploaded_file()**_ 将它们保存到永久位置。
你将添加代码来检索和显示你刚刚保存的上传文件。
<br>
<p>
<?php
if ($_FILES["portrait"]["error"] == 0) {
move_uploaded_file($_FILES["portrait"]["tmp_name"], "images/" . $_FILES ["portrait"]["name"]);
}
// Open images directory
$dir = dir("images");
// List files in images directory
while (($file = $dir->read()) != false) {
if ($file != '.' and $file != '..') {
echo "<img src='images/" . $file . "' class='thumbnail'>";
}
}
$dir->close();
?>
</p>
</div>
代码将首先将“image”文件夹分配给一个名为 **_$dir_** 的变量。然后，它将循环遍历 _*$dir*_ 的文件夹对象（使用 PHP **_while_**），以检索其中存在的任何文件（**$dir->read()**）并将其显示为图像（**echo "<img src='images/" . $file . "' class='thumbnail'>";**）。
测试 1, 2, 3...
完成了吗？让我们在浏览器中测试你的小型 Web 应用程序。在浏览器地址栏中输入“https:///ServerSideStory/index.html”，你应该会看到一个注册表单，如图 17 所示。输入一些数据，选择一张图片，然后单击“_Sign up_”按钮，你就被重定向到你在上一节中创建的确认页面“_https:///ServerSideStory/acknowledge.php_”（如图 18 所示）。你在第一个页面输入的数据以及你选择的图片都已显示在这里。
等一下！回到注册页面，为“_Create a password_”和“_Confirm your password_”字段输入不同的值，然后单击“_Sign up_”按钮，它仍然会忠实地将你重定向到确认页面。这不对！你期望它会发出一些消息，比如“密码不匹配！”显然，还有一些工作要做。
回到编码板。在“acknowledge.php”页面的开头添加以下 PHP 代码：
<?php
if ($_POST["password"] != $_POST["confirmpassword"]){
header('Location: index.php?msg=01');
}
?>
<!DOCTYPE html>
<html>
代码将检查收到的“_password_”和“_confirmpassword_”值是否不匹配（_**if ($_POST["password"] != $_POST["confirmpassword"])**_），然后重定向回发送页面，并附带一个名为“_msg_”值为“_01_”的键值对，其中“_msg_”是 _name_，“_01_”是其值（_**header('Location: index.php?msg=01');**_）。你可能注意到发送页面被写成了“_index.php_”而不是“_index.html_”。这不是错误，你很快就会明白原因，继续阅读……
你将切换到“_index.html_”页面，并在该页面的开头添加以下 PHP 代码：
<?php
if (isset($_GET["msg"])){
if ($_GET["msg"] == '01'){
echo "<script>alert('Password and Confirm Password do not match, please try again')</script>";
}
}
?>
<!DOCTYPE html>
<html>
代码将查找一个名为“_msg_”的传入字符串（_**$_GET["msg"]**_）。如果它存在（_**if (isset($_GET["msg"]))**_），这意味着它已从 _"acknowledge.php"_ 页面返回，然后它将检查此“_msg_”的值。如果值等于“_01_”，这是指示先前提交中的“_password_”和“_confirmpassword_”值不匹配的代码，它将弹出一个消息框，告知用户此错误（_**echo "<script>alert('Password and Confirm Password do not match, please try again')</script>"**_）。警告框是用 JavaScript 创建的。
由于你已将 PHP 代码添加到“_index.html_”中，它不能再是一个纯 HTML 页面了，你必须将其文件扩展名更改为 _ .php_，即“_index.php_”。这回答了你上面的问题。在 PDT 菜单中，选择 _File > Save As..._ 将“_index.html_”另存为“_index.php_”；或者，在 _PHP Explorer_ 中，右键单击“_index.html_” _> Refactor > Rename.._ 来重命名它。
再次进行测试。这次，如果你为“_Create a password_”和“_Confirm your password_”字段提供不同的值，你应该会看到一个警告消息框弹出。（图 21）
 |
|
图 21：警告消息
|
你可能认为你已经完成了。等一下！尝试直接访问确认页面，在地址栏中键入“_https:///ServerSideStory/acknowledge.php_”然后按 Enter 键。会发生什么？你会收到一个充满错误消息的页面，如图 22 所示。
 |
|
图 22：禁止直接访问
|
确认页面正在等待各种 _**$_POST**_ 数据，但由于访问不是从“_index.php_”发起的，这些数据缺失了。解决方案是重定向所有不是从“_index.php_”重定向的对“a _cknowledge.php_”的访问到“_index.php_”。所以，回到编码板。将以下代码添加到“_acknowledge.php_”开头的 PHP 块中。
<?php
if (!isset($_POST["submit"])){
header('Location: index.php');
}
if ($_POST["password"] != $_POST["confirmpassword"]){
header('Location: index.php?msg=01');
}
?>
代码将查找这个名为“_submit_”（_**$_POST["submit"]**_）的数据，该数据应该伴随每一次访问“_acknowledge.php_”。回顾“_index.php_”中的这段代码：
<input type="submit" class="bottom" name="submit" id="submit" value="Sign up">
所以“_submit_”是“_Sign up_”按钮的“_name_”属性的值。如果这个数据不存在（_**if (!isset($_POST["submit"]))**_），这意味着访问不是从“_index.php_”重定向的，则将其重定向到“_index.php_”（_**header('Location: index.php');**_）。
再次进行测试，现在应该可以完美运行了。
任务完成
我们已经完成了。通过这次实践，你将对服务器端脚本的工作原理以及它在创建动态 Web 应用程序中所起的作用和功能获得基本知识。这将使你对 HTML5 和 CSS3 的学习更加完整。更重要的是，我希望它能激励你踏上另一段学习旅程，那就是服务器端技术。正如俗话所说，“一段旅程的结束是另一段旅程的开始”。当然，你可以在好好休息一下之后再进行。