Đăng Nhập PHP MySQL như thế nào chính xác ?

Đăng Nhập là một chức năng cơ bản của bất kỳ trang web nào để xác định danh tính người dùng. Đăng nhập PHP MySQL là một phương pháp để tạo ra một hệ thống đăng nhập bảo mật trên trang web của bạn, sử dụng ngôn ngữ lập trình PHP và cơ sở dữ liệu MySQL.

Đăng Nhập PHP MySQL

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo một hệ thống đăng nhập PHP MySQL với sự trợ giúp của PHP và cơ sở dữ liệu MySQL. Chúng ta sẽ đi qua các bước từ yêu cầu đến môi trường thiết lập, các file cần thiết và cách chạy form đăng nhập.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn PHP từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Yêu cầu

Trước khi tạo hệ thống đăng nhập, đầu tiên chúng ta cần biết những yêu cầu tiền điều kiện để có thể tạo mô-đun đăng nhập.

  • Kiến thức về HTML, CSS, PHP và MySQL để có thể tạo hệ thống đăng nhập.
  • Trình soạn thảo văn bản – để viết code. Chúng ta có thể sử dụng bất kỳ trình soạn thảo văn bản nào như Notepad, Notepad++, Dreamweaver, vv.
  • XAMPP – XAMPP là một phần mềm đa nền tảng, viết tắt cho Cross-platform(X) Apache server (A), MySQL (M), PHP (P), Perl (P). XAMPP là một gói phần mềm hoàn chỉnh, do đó, chúng ta không cần phải cài đặt từng phần riêng lẻ.

Môi trường thiết lập

Bây giờ, chúng ta cần khởi động máy chủ web và tạo các file cho hệ thống đăng nhập. Dưới đây là một số bước để thiết lập môi trường:

  1. Mở XAMPP Control Panel.
  2. Khởi động máy chủ Apache bằng cách nhấp vào nút Start.
  3. Khởi động MySQL bằng cách nhấp vào nút Start.
  4. Tạo tất cả các file cần thiết cho đăng nhập.
  5. Tạo bảng đăng nhập trong cơ sở dữ liệu bằng phpMyAdmin trong XAMPP.

Bây giờ, chúng ta sẽ tạo bốn file ở đây cho hệ thống đăng nhập.

  1. index.html – Tệp này được tạo để hiển thị giao diện người dùng của trang đăng nhập và kiểm tra trường trống.
  2. style.css – Tệp này được tạo để hiển thị giao diện đẹp hơn cho biểu mẫu đăng nhập.
  3. connection.php – Tệp kết nối chứa mã kết nối cho khả năng kết nối cơ sở dữ liệu.
  4. authentication.php – Tệp này xác thực dữ liệu form với cơ sở dữ liệu được gửi bởi người dùng.

Lưu tất cả các tệp này trong thư mục htdocs bên trong thư mục cài đặt Xampp. Mô tả chi tiết và mã cho các tệp này sẽ được thảo luận ở phần sau.

index.html

Trước tiên, chúng ta cần thiết kế biểu mẫu đăng nhập để người dùng truy cập vào nó. Biểu mẫu đăng nhập này được tạo bằng HTML và cũng chứa kiểm tra trường trống, được viết bằng JavaScript. Mã cho tệp index.html được cung cấp dưới đây:

<!DOCTYPE html>
<html>
<head>
  <title>Đăng nhập</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript">
    function validate(){
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      if (username == "") {
        alert("Vui lòng nhập tên đăng nhập");
        return false;
      }
      else if(password == ""){
        alert("Vui lòng nhập mật khẩu");
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <div class="loginbox">
    <img src="avatar.png" class="avatar">
    <h1>Đăng nhập</h1>
    <form onsubmit="return validate()" action="authentication.php" method="post">
      <p>Tên đăng nhập</p>
      <input type="text" name="username" id="username" placeholder="Enter Username">
      <p>Mật khẩu</p>
      <input type="password" name="password" id="password" placeholder="Enter Password"><br><br>
      <input type="submit" name="submit" value="Đăng nhập">
      <a href="#">Quên mật khẩu?</a>
    </form>
  </div>
</body>
</html>

Sau khi thực thi mã trên trình duyệt, trang đăng nhập sẽ xuất hiện nhưng sẽ không đẹp vì chưa có CSS.

style.css

Tiếp theo, chúng ta sẽ tạo tệp style.css để hiển thị giao diện Đăng Nhập PHP MySQL đẹp hơn cho biểu mẫu đăng nhập. Mã CSS cho tệp style.css được cung cấp dưới đây:

body{
  margin: 0;
  padding: 0;
  background: 
# f1f1f1;
  font-family: sans-serif;
}

.loginbox{
  width: 320px;
  height: 420px;
  background: 
# 000;
  color: 
# fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 70px 30px;
  text-align: center;
}

.avatar{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
}

h1{
  margin-top: 0;
  font-weight: bold;
}

.loginbox p{
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.loginbox input{
  width: 100%;
  margin-bottom: 20px;
}

.loginbox input[type="text"], input[type="password"]
{
  border: none;
  border-bottom: 1px solid 
# fff;
  background: transparent;
  outline: none;
  height: 40px;
  color: 
# fff;
  font-size: 16px;
}

.loginbox input[type="submit"]
{
  border: none;
  outline: none;
  height: 40px;
  background: 
# fb2525;
  color: 
# fff;
  font-size: 18px;
  border-radius: 20px;
}

.loginbox input[type="submit"]:hover
{
  cursor: pointer;
  background: 
# ffc107;
  color: 
# 000;
}

.loginbox a{
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  color: 
# cfcfcf;
}

.loginbox a:hover
{
  color: 
# fff;
}

Sau khi bao gồm tệp CSS trên index.html, biểu mẫu Đăng Nhập PHP MySQL của chúng ta sẽ đẹp hơn. Các bạn tự demo nhé, vì Lập Trình Viên sẽ không chụp ảnh đâu.

Database and Table Creation

Chúng ta cần khởi tạo cơ sở dữ liệu và bảng cho hệ thống Đăng Nhập PHP MySQL. Đầu tiên, mở phpMyAdmin trong XAMPP Control Panel. Chọn New để tạo một database mới (ví dụ: mydatabase). Sau đó, chúng ta cần tạo một bảng với các trường như username, password.

Mã SQL cho việc tạo bảng có thể được cung cấp dưới đây:

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(50) NOT NULL,
 `password` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Sau khi tạo bảng, chúng ta cần thêm một số giá trị mẫu để kiểm tra hệ thống Đăng Nhập PHP MySQL. Mã SQL cho việc thêm giá trị mẫu có thể được cung cấp dưới đây:

INSERT INTO `users` (`id`, `username`, `password`) VALUES
(1, 'admin', '$2y$10$OsTn0vTfQoPlUZBqaqVzagq3H6YmF4GQzOZjaJHhyjNblRJznvwpK');

connection.php

Tiếp theo, chúng ta sẽ tạo tệp connection.php để kết nối với cơ sở dữ liệu MySQL. Mã cho tệp connection.php được cung cấp dưới đây:

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "mydatabase";

$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}
?>

Trong mã này, chúng ta đã thiết lập các biến cho thông tin cơ sở dữ liệu và sử dụng hàm mysqli_connect () để kết nối với cơ sở dữ liệu MySQL.

authentication.php

Cuối cùng, chúng ta sẽ tạo tệp authentication.php để xác thực thông tin đăng nhập người dùng. Mã cho tệp authentication.php được cung cấp dưới đây:

<?php
session_start();
include("connection.php");

if(isset($_POST['submit'])){
  $username = $_POST['username'];
  $password = $_POST['password'];

  $sql_query = "SELECT * FROM users WHERE username='$username'";
  $result = mysqli_query($conn, $sql_query);

  if(mysqli_num_rows($result) > 0){
    $row = mysqli_fetch_assoc($result);
    if(password_verify($password, $row['password'])){
      $_SESSION['username'] = $row['username'];
      header('Location: welcome.php');
    }
    else{
      echo "<script>alert('Mật khẩu không chính xác')</script>";
      echo "<script>window.open('index.html','_self')</script>";
    }
  }
  else{
    echo "<script>alert('Tên đăng nhập không tồn tại')</script>";
    echo "<script>window.open('index.html','_self')</script>";
  }
}

?>

Trong mã này, chúng ta đã sử dụng hàm password_verify () của PHP để xác thực mật khẩu người dùng và khởi tạo phiên đăng nhập (session) nếu thông tin Đăng Nhập PHP MySQL chính xác.

Sau khi đã tạo các tệp cần thiết, chúng ta có thể chạy form đăng nhập trên trình duyệt web bằng cách truy cập vào đường dẫn sau: http://localhost/index.html

Ưu và Nhược điểm Đăng Nhập PHP MySQL

Đăng nhập PHP MySQL có nhiều ưu điểm, bao gồm:

  • Bảo mật cao với khả năng xác thực thông tin người dùng.
  • Dễ dàng thiết lập và triển khai.
  • Khả năng tùy chỉnh để phù hợp với nhu cầu của từng trang web.

Tuy nhiên, Đăng nhập PHP MySQL cũng có một số nhược điểm như sau:

  • Cần có kiến thức về các công nghệ liên quan như PHP và MySQL.
  • Có thể yêu cầu nâng cao kỹ năng lập trình để tùy chỉnh hệ thống đăng nhập theo ý muốn.
  • Có thể bị tấn công bởi các hacker nếu không được cài đặt và bảo mật đúng cách.

Tóm lại, Đăng nhập PHP MySQL là một phương pháp bảo mật cao để xác định danh tính người dùng trên trang web của bạn. Nó có nhiều ưu điểm và nhược điểm, do đó, trước khi triển khai hệ thống đăng nhập này, bạn nên tìm hiểu kỹ về các công nghệ liên quan và thực hiện các biện pháp bảo mật đầy đủ để bảo vệ trang web của mình. 

Đăng nhập PHP MySQL là một quy trình đơn giản. Bằng cách làm theo các hướng dẫn trên, bạn có thể tạo một hệ thống đăng nhập PHP MySQL an toàn cho trang web của mình.