极客笔记PHP MySQL登录系统
在这个主题中，我们将学习如何使用PHP和MySQL数据库创建一个PHP MySQL登录系统。以下是创建具有MySQL数据库的登录系统的几个步骤。
在创建登录系统之前，我们首先需要了解创建登录模块的先决条件。
要求
- 我们应该具备HTML，CSS，PHP和MySQL的知识，以创建登录系统。
- 文本编辑器 – 用于编写代码。我们可以使用任何文本编辑器，如记事本，Notepad ++，Dreamweaver等。
- XAMPP – XAMPP是跨平台软件，代表跨平台(X) Apache服务器(A)，MySQL(M)，PHP(P)，Perl(P)。 XAMPP是一个完整的软件包，因此我们不需要单独安装所有这些。
环境设置
现在，我们需要启动Web服务器并创建登录系统的文件。以下是设置环境的几个步骤。
- 打开XAMPP控制面板。
- 点击“启动”按钮启动Apache服务器。
- 点击“启动”按钮启动MySQL。
- 创建登录所需的所有文件。
- 使用XAMPP中的phpMyAdmin在数据库中创建登录表。
现在，我们将在这里为登录系统创建四个文件。
- index.html – 此文件用于登录页面的GUI视图和空字段验证。
- style.css – 此文件用于登录表单的吸引人的视图。
- connection.php – 连接文件包含数据库连接的连接代码。
- authentication.php – 此文件使用用户提交的表单数据对其进行数据库验证。
将所有这些文件保存在Xampp安装文件夹的htdocs文件夹中。下面讨论了这些文件的详细描述和代码。
index.html
首先，我们需要为网站用户设计登录表单以与之进行交互。此登录表单是使用HTML创建的，还包含使用JavaScript编写的空字段验证。以下是index.html文件的代码：
<html>
<head>
<title>PHP login system</title>
// insert style.css file inside index.html
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id = "frm">
<h1>Login</h1>
<form name="f1" action = "authentication.php" onsubmit = "return validation()" method = "POST">
<p>
<label> UserName: </label>
<input type = "text" id ="user" name = "user" />
</p>
<p>
<label> Password: </label>
<input type = "password" id ="pass" name = "pass" />
</p>
<p>
<input type = "submit" id = "btn" value = "Login" />
</p>
</form>
</div>
// validation for empty field
<script>
function validation()
{
var id=document.f1.user.value;
var ps=document.f1.pass.value;
if(id.length=="" && ps.length=="") {
alert("User Name and Password fields are empty");
return false;
}
else
{
if(id.length=="") {
alert("User Name is empty");
return false;
}
if (ps.length=="") {
alert("Password field is empty");
return false;
}
}
}
</script>
</body>
</html>
在浏览器上执行以上代码后，如果页面不包含style.css文件，则登录页面将显示如下。
style.css
现在，我们将创建style.css文件，以为登录表单提供更吸引人的视图。style.css文件的CSS代码如下所示：
body{
background: #eee;
}
#frm{
border: solid gray 1px;
width:25%;
border-radius: 2px;
margin: 120px auto;
background: white;
padding: 50px;
}
#btn{
color: #fff;
background: #337ab7;
padding: 7px;
margin-left: 70%;
}
在index.html文件中包含上述CSS文件后，登录表单将像这样 –
注意：所有这些文件都应该保存在同一个文件夹中，这样我们才能轻松地访问它们而不会有任何中断。
数据库和表的创建
现在，下一步是创建数据库和数据库中的登录表。
- 在浏览器中访问phpMyAdmin，使用 localhost/phpmyadmin/ 创建一个数据库中的表。在这里，我们将使用基于GUI的phpMyAdmin来创建数据库和表，而不是执行查询。
- 点击 新建 并输入数据库名称，然后点击 创建 按钮。
- 现在我们将在数据库中创建一个登录表。在之前创建的数据库中创建一个名为 login 的表。
- 在我们将存储不同用户的 用户名 和 密码 的表中，指定列 名称 和它们的 类型 和 长度 ，然后通过点击 保存 按钮保存。
- 点击插入，即可 插入 列中的记录。因此，在此处插入 用户名 和 密码 ，然后点击 Go 按钮保存记录。
connection.php
下一步是将登录表单与之前在前面步骤中创建的数据库进行连接。我们将创建一个名为connection.php的文件，其中的代码如下：
<?php
host = "localhost";user = "root";
password = '';db_name = "javatpoint";
con = mysqli_connect(host, user,password, $db_name);
if(mysqli_connect_errno()) {
die("Failed to connect with MySQL: ". mysqli_connect_error());
}
?>
authentication.php
现在，我们已经设置好了数据库，因此可以进行用户身份验证。此文件处理通过index.html文件发送的登录表单数据。它验证通过登录表单发送的数据，如果用户名和密码与数据库匹配，则登录成功，否则登录失败。
<?php
include('connection.php');
username =_POST['user'];
password =_POST['pass'];
//to prevent from mysqli injection
username = stripcslashes(username);
password = stripcslashes(password);
username = mysqli_real_escape_string(con, username);password = mysqli_real_escape_string(con,password);
sql = "select *from login where username = 'username' and password = 'password'";result = mysqli_query(con,sql);
row = mysqli_fetch_array(result, MYSQLI_ASSOC);
count = mysqli_num_rows(result);
if($count == 1){
echo "<h1><center> Login successful </center></h1>";
}
else{
echo "<h1> Login failed. Invalid username or password.</h1>";
}
?>
如何运行登录表格？
- 要运行登录表格，打开XAMPP控制面板，并启动Apache服务器和PHP。
- 现在，在浏览器中键入localhost/xampp/文件夹名称/文件名称，并按Enter键。
- 现在，所有设置都完成了。在登录表单中输入用户名和密码，然后点击登录按钮。
- 在这里，我们插入了一个错误的用户名，所以用户无法登录，并且会显示登录失败的错误。
输出：
- 现在，我们将在用户名和密码中提供正确的值。因此，用户将成功登录。请参考下面的示例。
输出
