PHP 登录表单

为了访问网站功能，用户必须通过页面上的登录表单进行身份验证。用户必须输入他们的用户名和密码才能通过此系统访问他们的帐户。该系统提供了简单的导航功能和多种安全功能，适合构建现代登录界面。安全威胁数量众多，但实施此功能可显著增强您网站的安全性。

以下教程要求您在开始构建登录表单之前具备基本的 PHP 编程技能。在接下来的部分中，我们将研究构建 PHP 登录表单的过程。要设计一个引人注目的表单，您需要具备 PHP、HTML、CSS 和 MySQL 的基础知识。运行 PHP 代码需要安装服务器进行执行。本地服务器设置需要以下三种选项之一：XAMPP、WAMP 或 MAMP，具体取决于您的 操作系统。

设置 XAMPP 并运行 PHP 登录表单

1. 如果您尚未安装本地服务器环境，请进行设置，并安装一个本地 Web 服务器堆栈，例如 XAMPP。
2. 安装完成后，运行 XAMPP 服务器并启动 Apache 和 MySQL。
3. 在服务器的根目录中创建项目文件夹：C:\xampp\htdocs\
4. 创建一个新文件夹，例如：php-login-system。
5. 将文件添加到项目文件夹（php-login-system）中，然后创建这些文件：
   • config.php – 数据库连接
   • login.php – 登录表单
   • loginstyle.css – 设计登录表单
   • register.php – 注册表单
   • registerstyle.css – 样式化注册表单
   • registration.php – 注册用户的 PHP 逻辑
6. 通过在浏览器中输入 https:///phpmyadmin 来创建数据库。
7. 创建一个新的数据库，例如：test
8. 导航到 SQL 选项卡。
9. 运行本文档中提供的 SQL 查询来创建 users 表。
10. 在浏览器中测试项目，输入：
    • https:///php-login-system/register.php - 注册新用户
    • https:///php-login-system/login.php - 登录

创建注册表单的代码

这是创建注册表单的 HTML。您必须将其放入名为 **register.php** 的文件中。

使用 CSS 样式化注册表单

您可以将以下 CSS 应用于此注册表单：

registerstyle.css

尽管表单非常简单，但我们确实使用 HTML5 执行了一些非常基本的输入验证。例如，当用户提交格式不正确的电子邮件地址时，type="email" 会通知他们。同样，可以使用 pattern 属性确保用户名仅包含字母数字字符。

创建登录表单的代码

这是登录表单的 HTML。您可以将其放入名为 **login.php** 的文件中。

使用 CSS 样式化登录表单

您可以将以下 CSS 应用于此登录表单：

loginstyle.css

建立用户表和数据库连接

下一步是创建一个用户表来存储所有已注册用户的相关数据。在此示例中，该表只有四列：

自动递增的 ID、一个唯一的用户名、一个电子邮件地址和一个密码。

可以使用以下 SQL 查询快速创建表：

SQL 查询

现在，创建一个名为 **config.php** 的文件，并编写以下代码连接到数据库。

您可以将数据库名称更改为您数据库的实际名称。数据库连接将使用此文件建立。

注册功能的实现终于准备就绪。此代码的主要目的是检查提供的电子邮件地址是否已注册。如果未注册，则将密码、电子邮件地址和用户名输入数据库。

registration.php

第一步是启动会话并包含 config.php。这使我们能够更轻松地保存我们希望在页面之间保持一致的任何数据。

然后，通过检查 $_POST['register'] 是否已设置，我们确定用户是否单击了“注册”按钮来提交表单。切记不要以明文形式存储密码。为此使用了 password_hash() 方法，然后将哈希值存储在我们的数据库中。此特定函数使用随机生成的盐来构造一个 60 个字符的哈希。

最后，我们运行查询以检查特定电子邮件地址的行数是否非零。如果存在，用户将收到一条消息，表明该电子邮件地址已被注册。

作为最后一步，我们编写了用户登录的代码。这次，我们只是检查数据库以确保表单上输入的登录名和密码组合是准确的。

重要的是要记住，我们不会一次性比较密码和用户名。由于密码实际上是以哈希格式存储的，因此我们必须首先使用提供的用户名检索哈希。获得哈希后，我们可以使用 password_verify() 函数比较密码和哈希。

在密码成功验证后，我们将 $_SESSION['user_id'] 变量更新为数据库用户的 ID。也可以在此处设置其他变量的值。

此项目的最终输出

注册时，输出将是：

单击“注册”按钮后，将显示确认消息，如下面的屏幕截图所示。

登录时：

单击“登录”按钮后，将显示登录成功消息。