我本日将教你如何利用 PHP、MySQL 和 Bootstrap(用于设计)创建登录系统。
PHP 是 Web 开拓的根本措辞。虽然它很旧,但利用高等编程和人工智能,您可以在 PHP 中创建创新的运用程序。
PHP 为著名的 CMS、WordPress 和 Joomla 供应支持,它们是可用于许多其他运用程序的开源 OOP 框架。
PHP 是 Web 开拓的根本措辞。利用 PHP,您可以拥有一种简洁易学的编程措辞。它可以随着开拓者的需求而增长,同时它也有强大的社区乐意供应支持。
如何利用 Bootstrap 为用户登录创建干净的 UI第一步是利用 UI 设计和 Bootstrap 5 创建 index.php。我们尽可能为设计和 CDN 链接添加了 Poppins Google 字体,由于代码变得轻量级且资源占用更少。
PHP中的索引文件:
<!doctype html><html lang=34;en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="assets/css/style.css"> <title>Login</title></head><body> <div class="container text-center d-flex align-items-center min-vh-100"> <div class="card mx-auto bg-info py-5" style="width: 25rem;"> <h1>Login</h1> <div class="card-body"> <form action="" method="post"> <div class="mb-3"> <label for="email" class="form-label">Email address</label> <input type="email" class="form-control" id="email" name="email" required> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary" name="login">Login</button> </form> </div> </div> </div> <!-- JS --> </body>
</html>
稍后,在 style.css 文件中,我插入了一张背景图片,让背景看起来更有趣。但是,这仅适用于不支持当代 Web 标准且无法查看 Web 图像的旧版浏览器。
{ margin: 0; padding: 0; box-sizing: border-box;}body { font-family: 'Poppins', sans-serif; background: #f1f1f1; background: url("../img/email-pattern.webp");}
在处理程序的逻辑部分之前,我们该当创建一个存储用户的数据库。MySQL 将是一个不错的选择,由于它是免费的并且对初学者友好。要创建数据库,请转到 PHPMyAdmin 并将名称设置为干系的名称。
利用“数据库”创建一个表并将其命名为“用户”。这该当有四列:ID、PASSWORD、EMAIL 和 ACTIVE。为每个单元格的值不同的每个人创建新的行列和行。
CREATE TABLE `users` ( `id` int(5) NOT NULL, `email` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `active` tinyint(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
为了实现用户登录系统,我们首先将用户登录详细信息插入 SQL 数据库。稍后在支配中,我们将利用 PHP 进行注册过程。
INSERT INTO `users` (`id`, `email`, `password`, `active`) VALUES(1, 'test@gmail.com', '1234', 1);
将 MySQL 数据库连接到 PHP。
我们在项目中的connection.php:
<?php$servername = "localhost"; // Enter Your severname here$username = "root"; // Enter your MySQL database username here$password = ""; // // Enter your MySQL database password here$dbname = "ld_call"; // Enter your Database Name here$conn = new mysqli($servername, $username, $password, $dbname);if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error);}
接下来,我们逐步对登录过程进行编码。
PHP用户登录系统逻辑揭示只管逻辑编程措辞可能看起来令人生畏,但一旦我们理解了代码背后的推理,它就会变得更随意马虎编写。这些编程措辞的繁芜性不是由于编写或理解代码的困难,而是由于它们须要我们批驳性地思考才能理解它们。
第一步是将问题分解成更小的部分,然后进行迭代。伪代码是一种无需编写编程语法即可编写算法的办法。它常日分成代表步骤的行。
代码是用于编程的措辞。伪代码是简化版本,而不是实际代码。它们充当程序员遵照的注释,以更快地完成繁芜的过程。
理解我们的登录过程如何大略且易于编码。
从长远来看,如果你开始养成在写一行代码之前写伪代码的习气,你就会开始爱上编码。较长的编程代码不会有问题。
如何设置用户登录程序:
登录表单的流程由用户提交,然后单击提交。我们须要确保清理数据后没有任何反斜杠或空格。我们对您的登录信息进行安全加密,并将其与我们的数据库进行比较以进行验证。用户可能会看到的缺点。在这里,我们验证用户的详细信息是否已保存。我们还在会话中跟踪我们的登任命户。理解如何设置注销过程。不要用太多代码创建伪代码,反之亦然——不要让代码太短。
让我们去代码:
<?phprequire_once("connection.php");session_start();function santize($data){ $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data;}if (isset($_POST['login'])) { $email = santize($_POST['email']); $password = santize($_POST['password']); $sql = "SELECT id FROM users WHERE email = '$email' AND password = '$password' AND active = 1"; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { $_SESSION['login_active'] = [$email, $password]; header("Location: admin.php"); exit(); } else { $_SESSION['errors'] = "Login Error! Check Email & Password"; header("Location: index.php"); exit(); }}?
为了显示用户登录缺点,我想利用 PHP 会话。将代码粘贴到您想要的位置。
<?php if (isset($_SESSION['errors'])) : ?> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <?php $message = $_SESSION['errors']; unset($_SESSION['errors']); echo $message; ?> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <?php endif; ?>
这是可以插入到 index.php 文件顶部的 PHP 代码,以在用户成功登录时显示。
这是我们的 Admin.php 的样子:
<!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="assets/css/style.css"> <title>Admin</title></head><body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="">Admin</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul> <div class="d-flex"> <a class="btn btn-outline-danger" href="logout.php">Logout</a> </div> </div> </div> </nav> <div class="container"> <h1>Welcome to Admin</h1> </div> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script></body></html>
将 PHP 代码添加到 admin.php 以确定登录会话是否处于活动状态。否则,任何人都可以访问您页面的管理文件,由于没有任何限定。
为了保护网站上的其他页面免受未经授权的访问,请利用此代码。
<?phprequire_once("connection.php");session_start();if (!isset($_SESSION['login_active'])) { header("Location: index.php"); exit();}?>
一旦您理解了利用 PHP、MySQL 和 Bootstrap 5 构建用户登录系统的全体过程,请随意利用此代码。