Workflow chức năng Đăng nhập

   

Step 1: tạo cấu trúc thư mục quản lý việc Xác thực tài khoản

  • Việc Xác thực tài khoản (Authentication) là công việc Đăng nhập (login), Đăng xuất (logout) thường có của các ứng dụng.
  • Để thuận tiện quản lý chức năng, chúng ta sẽ tạo cấu trúc thư mục như sau:
  • Tạo thư mục : /backend/auth
  • Các chức năng về quản lý tài khoản (Đăng nhập, Đăng xuất, Quên mật khẩu, ...) sẽ nằm trong thư mục này.

Step 2: tạo file xử lý Đăng nhập

  • Tạo file /backend/auth/login.php
  • Nội dung file:
<?php
// hàm `session_id()` sẽ trả về giá trị SESSION_ID (tên file session do Web Server tự động tạo)
// - Nếu trả về Rỗng hoặc NULL => chưa có file Session tồn tại
if (session_id() === '') {
// Yêu cầu Web Server tạo file Session để lưu trữ giá trị tương ứng với CLIENT (Web Browser đang gởi Request)
session_start();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng nhập Backend | NenTang.vn</title>
<!-- Nhúng file Quản lý các Liên kết CSS dùng chung cho toàn bộ trang web -->
<?php include_once(__DIR__ . '/../layouts/styles.php'); ?>
</head>
<body class="d-flex flex-column h-100">
<!-- header -->
<?php include_once(__DIR__ . '/../layouts/partials/header.php'); ?>
<!-- end header -->
<div class="container">
<div class="row">
<main role="main" class="col-md-12 ml-sm-auto px-4 mb-2">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Đăng nhập Backend</h1>
</div>
<!-- Block content -->
<?php
// Đã đăng nhập rồi -> điều hướng về trang chủ
if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) :
?>
<h2>Bạn đã đăng nhập rồi. <a href="/php/myhand/backend/">Bấm vào đây để quay về trang chủ.</a></h2>
<?php else : ?>
<form name="frmLogin" id="frmLogin" method="post" action="">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<h1>Đăng nhập</h1>
<p class="text-muted">Nhập thông tin Tài khoản</p>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</div>
<input class="form-control" type="text" name="kh_tendangnhap" placeholder="Tên đăng nhập">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input class="form-control" type="password" name="kh_matkhau" placeholder="Mật khẩu">
</div>
</div>
<div class="row">
<div class="col-6">
<button class="btn btn-primary px-4" name="btnLogin">Đăng nhập</button>
</div>
<div class="col-6 text-right">
<a class="btn btn-link px-0" href="forgot-password.php">Quên mật khẩu?</a>
</div>
</div>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Đăng ký</h2>
<p>Đăng ký để làm thành viên của Trang web bán hàng. Bạn sẽ được một số quyền lợi nhất
định khi làm thành viên của Chúng tôi.</p>
<a class="btn btn-primary active mt-3" href="register.php">Đăng
ký ngay!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<?php
// Hiển thị tất cả lỗi trong PHP
// Chỉ nên hiển thị lỗi khi đang trong môi trường Phát triển (Development)
// Không nên hiển thị lỗi trên môi trường Triển khai (Production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Truy vấn database
// 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
include_once(__DIR__ . '/../../dbconnect.php');
// Chưa đăng nhập -> Xử lý logic/nghiệp vụ kiểm tra Tài khoản và Mật khẩu trong database
if (isset($_POST['btnLogin'])) {
// Phân tách thông tin từ người dùng gởi đến qua Request POST
$kh_tendangnhap = $_POST['kh_tendangnhap'];
$kh_matkhau = $_POST['kh_matkhau'];
// Câu lệnh SELECT Kiểm tra đăng nhập...
$sqlSelect = <<<EOT
SELECT *
FROM khachhang kh
WHERE kh.kh_tendangnhap = '$kh_tendangnhap' AND kh.kh_matkhau = '$kh_matkhau';
EOT;
// Thực thi SELECT
$result = mysqli_query($conn, $sqlSelect);
// Sử dụng hàm `mysqli_num_rows()` để đếm số dòng SELECT được
// Nếu có bất kỳ dòng dữ liệu nào SELECT được <-> Người dùng có tồn tại và đã đúng thông tin USERNAME, PASSWORD
if (mysqli_num_rows($result) > 0) {
// Lưu thông tin Tên tài khoản user đã đăng nhập
$_SESSION['kh_tendangnhap_logged'] = $kh_tendangnhap;
echo 'Đăng nhập thành công!';
// Điều hướng (redirect) về trang chủ
echo '<script>location.href = "/php/myhand/backend/pages/dashboard.php";</script>';
} else {
echo '<h2 style="color: red;">Đăng nhập thất bại!</h2>';
}
}
endif;
?>
<!-- End block content -->
</main>
</div>
</div>
<!-- footer -->
<?php include_once(__DIR__ . '/../layouts/partials/footer.php'); ?>
<!-- end footer -->
<!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT -->
<?php include_once(__DIR__ . '/../layouts/scripts.php'); ?>
<!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây -->
<!-- <script src="..."></script> -->
</body>
</html>
<?php // hàm `session_id()` sẽ trả về giá trị SESSION_ID (tên file session do Web Server tự động tạo) // - Nếu trả về Rỗng hoặc NULL => chưa có file Session tồn tại if (session_id() === '') { // Yêu cầu Web Server tạo file Session để lưu trữ giá trị tương ứng với CLIENT (Web Browser đang gởi Request) session_start(); } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Đăng nhập Backend | NenTang.vn</title> <!-- Nhúng file Quản lý các Liên kết CSS dùng chung cho toàn bộ trang web --> <?php include_once(__DIR__ . '/../layouts/styles.php'); ?> </head> <body class="d-flex flex-column h-100"> <!-- header --> <?php include_once(__DIR__ . '/../layouts/partials/header.php'); ?> <!-- end header --> <div class="container"> <div class="row"> <main role="main" class="col-md-12 ml-sm-auto px-4 mb-2"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">Đăng nhập Backend</h1> </div> <!-- Block content --> <?php // Đã đăng nhập rồi -> điều hướng về trang chủ if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) : ?> <h2>Bạn đã đăng nhập rồi. <a href="/php/myhand/backend/">Bấm vào đây để quay về trang chủ.</a></h2> <?php else : ?> <form name="frmLogin" id="frmLogin" method="post" action=""> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card-group"> <div class="card p-4"> <div class="card-body"> <h1>Đăng nhập</h1> <p class="text-muted">Nhập thông tin Tài khoản</p> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input class="form-control" type="text" name="kh_tendangnhap" placeholder="Tên đăng nhập"> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input class="form-control" type="password" name="kh_matkhau" placeholder="Mật khẩu"> </div> </div> <div class="row"> <div class="col-6"> <button class="btn btn-primary px-4" name="btnLogin">Đăng nhập</button> </div> <div class="col-6 text-right"> <a class="btn btn-link px-0" href="forgot-password.php">Quên mật khẩu?</a> </div> </div> </div> </div> <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%"> <div class="card-body text-center"> <div> <h2>Đăng ký</h2> <p>Đăng ký để làm thành viên của Trang web bán hàng. Bạn sẽ được một số quyền lợi nhất định khi làm thành viên của Chúng tôi.</p> <a class="btn btn-primary active mt-3" href="register.php">Đăng ký ngay!</a> </div> </div> </div> </div> </div> </div> </form> <?php // Hiển thị tất cả lỗi trong PHP // Chỉ nên hiển thị lỗi khi đang trong môi trường Phát triển (Development) // Không nên hiển thị lỗi trên môi trường Triển khai (Production) ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); // Truy vấn database // 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn include_once(__DIR__ . '/../../dbconnect.php'); // Chưa đăng nhập -> Xử lý logic/nghiệp vụ kiểm tra Tài khoản và Mật khẩu trong database if (isset($_POST['btnLogin'])) { // Phân tách thông tin từ người dùng gởi đến qua Request POST $kh_tendangnhap = $_POST['kh_tendangnhap']; $kh_matkhau = $_POST['kh_matkhau']; // Câu lệnh SELECT Kiểm tra đăng nhập... $sqlSelect = <<<EOT SELECT * FROM khachhang kh WHERE kh.kh_tendangnhap = '$kh_tendangnhap' AND kh.kh_matkhau = '$kh_matkhau'; EOT; // Thực thi SELECT $result = mysqli_query($conn, $sqlSelect); // Sử dụng hàm `mysqli_num_rows()` để đếm số dòng SELECT được // Nếu có bất kỳ dòng dữ liệu nào SELECT được <-> Người dùng có tồn tại và đã đúng thông tin USERNAME, PASSWORD if (mysqli_num_rows($result) > 0) { // Lưu thông tin Tên tài khoản user đã đăng nhập $_SESSION['kh_tendangnhap_logged'] = $kh_tendangnhap; echo 'Đăng nhập thành công!'; // Điều hướng (redirect) về trang chủ echo '<script>location.href = "/php/myhand/backend/pages/dashboard.php";</script>'; } else { echo '<h2 style="color: red;">Đăng nhập thất bại!</h2>'; } } endif; ?> <!-- End block content --> </main> </div> </div> <!-- footer --> <?php include_once(__DIR__ . '/../layouts/partials/footer.php'); ?> <!-- end footer --> <!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT --> <?php include_once(__DIR__ . '/../layouts/scripts.php'); ?> <!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây --> <!-- <script src="..."></script> --> </body> </html>
<?php
// hàm `session_id()` sẽ trả về giá trị SESSION_ID (tên file session do Web Server tự động tạo)
// - Nếu trả về Rỗng hoặc NULL => chưa có file Session tồn tại
if (session_id() === '') {
    // Yêu cầu Web Server tạo file Session để lưu trữ giá trị tương ứng với CLIENT (Web Browser đang gởi Request)
    session_start();
}
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Đăng nhập Backend | NenTang.vn</title>

    <!-- Nhúng file Quản lý các Liên kết CSS dùng chung cho toàn bộ trang web -->
    <?php include_once(__DIR__ . '/../layouts/styles.php'); ?>
</head>

<body class="d-flex flex-column h-100">
    <!-- header -->
    <?php include_once(__DIR__ . '/../layouts/partials/header.php'); ?>
    <!-- end header -->

    <div class="container">
        <div class="row">

            <main role="main" class="col-md-12 ml-sm-auto px-4 mb-2">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Đăng nhập Backend</h1>
                </div>

                <!-- Block content -->
                <?php
                // Đã đăng nhập rồi -> điều hướng về trang chủ
                if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) :
                ?>
                    <h2>Bạn đã đăng nhập rồi. <a href="/php/myhand/backend/">Bấm vào đây để quay về trang chủ.</a></h2>
                <?php else : ?>

                    <form name="frmLogin" id="frmLogin" method="post" action="">
                        <div class="row justify-content-center">
                            <div class="col-md-8">
                                <div class="card-group">
                                    <div class="card p-4">
                                        <div class="card-body">
                                            <h1>Đăng nhập</h1>
                                            <p class="text-muted">Nhập thông tin Tài khoản</p>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">
                                                            <i class="fa fa-user"></i>
                                                        </span>
                                                    </div>
                                                    <input class="form-control" type="text" name="kh_tendangnhap" placeholder="Tên đăng nhập">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">
                                                            <i class="fa fa-lock"></i>
                                                        </span>
                                                    </div>
                                                    <input class="form-control" type="password" name="kh_matkhau" placeholder="Mật khẩu">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <button class="btn btn-primary px-4" name="btnLogin">Đăng nhập</button>
                                                </div>
                                                <div class="col-6 text-right">
                                                    <a class="btn btn-link px-0" href="forgot-password.php">Quên mật khẩu?</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
                                        <div class="card-body text-center">
                                            <div>
                                                <h2>Đăng ký</h2>
                                                <p>Đăng ký để làm thành viên của Trang web bán hàng. Bạn sẽ được một số quyền lợi nhất
                                                    định khi làm thành viên của Chúng tôi.</p>
                                                <a class="btn btn-primary active mt-3" href="register.php">Đăng
                                                    ký ngay!</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                <?php
                    // Hiển thị tất cả lỗi trong PHP
                    // Chỉ nên hiển thị lỗi khi đang trong môi trường Phát triển (Development)
                    // Không nên hiển thị lỗi trên môi trường Triển khai (Production)
                    ini_set('display_errors', 1);
                    ini_set('display_startup_errors', 1);
                    error_reporting(E_ALL);

                    // Truy vấn database
                    // 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
                    include_once(__DIR__ . '/../../dbconnect.php');

                    // Chưa đăng nhập -> Xử lý logic/nghiệp vụ kiểm tra Tài khoản và Mật khẩu trong database
                    if (isset($_POST['btnLogin'])) {
                        // Phân tách thông tin từ người dùng gởi đến qua Request POST
                        $kh_tendangnhap = $_POST['kh_tendangnhap'];
                        $kh_matkhau = $_POST['kh_matkhau'];

                        // Câu lệnh SELECT Kiểm tra đăng nhập...
                        $sqlSelect = <<<EOT
                        SELECT *
                        FROM khachhang kh
                        WHERE kh.kh_tendangnhap = '$kh_tendangnhap' AND kh.kh_matkhau = '$kh_matkhau';
EOT;
                        // Thực thi SELECT
                        $result = mysqli_query($conn, $sqlSelect);

                        // Sử dụng hàm `mysqli_num_rows()` để đếm số dòng SELECT được
                        // Nếu có bất kỳ dòng dữ liệu nào SELECT được <-> Người dùng có tồn tại và đã đúng thông tin USERNAME, PASSWORD
                        if (mysqli_num_rows($result) > 0) {

                            // Lưu thông tin Tên tài khoản user đã đăng nhập
                            $_SESSION['kh_tendangnhap_logged'] = $kh_tendangnhap;

                            echo 'Đăng nhập thành công!';
                            // Điều hướng (redirect) về trang chủ
                            echo '<script>location.href = "/php/myhand/backend/pages/dashboard.php";</script>';
                        } else {
                            echo '<h2 style="color: red;">Đăng nhập thất bại!</h2>';
                        }
                    }
                endif;
                ?>
                <!-- End block content -->
            </main>
        </div>
    </div>

    <!-- footer -->
    <?php include_once(__DIR__ . '/../layouts/partials/footer.php'); ?>
    <!-- end footer -->

    <!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT -->
    <?php include_once(__DIR__ . '/../layouts/scripts.php'); ?>

    <!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây -->
    <!-- <script src="..."></script> -->
</body>

</html>

Step 3: bổ sung menu hiển thị Tên người dùng đã đăng nhập và nút Đăng xuất trên Header

  • Hiệu chỉnh file /backend/layouts/header.php
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
<a class="navbar-brand" href="/">Nền tảng</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/php/myhand/backend/pages/dashboard.php">Bảng tin</a>
</li>
</ul>
<ul class="navbar-nav px-3 ml-auto">
<?php
// Đã đăng nhập rồi -> hiển thị tên Người dùng và menu Đăng xuất
if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) :
?>
<li class="nav-item text-nowrap">
<a class="nav-link">Chào <?= $_SESSION['kh_tendangnhap_logged']; ?></a>
</li>
<li class="nav-item text-nowrap">
<a class="nav-link" href="/php/myhand/backend/auth/logout.php">Đăng xuất</a>
</li>
<?php else : ?>
<li class="nav-item text-nowrap">
<a class="nav-link" href="/php/myhand/backend/auth/login.php">Đăng nhập</a>
</li>
<?php endif; ?>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow"> <a class="navbar-brand" href="/">Nền tảng</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/php/myhand/backend/pages/dashboard.php">Bảng tin</a> </li> </ul> <ul class="navbar-nav px-3 ml-auto"> <?php // Đã đăng nhập rồi -> hiển thị tên Người dùng và menu Đăng xuất if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) : ?> <li class="nav-item text-nowrap"> <a class="nav-link">Chào <?= $_SESSION['kh_tendangnhap_logged']; ?></a> </li> <li class="nav-item text-nowrap"> <a class="nav-link" href="/php/myhand/backend/auth/logout.php">Đăng xuất</a> </li> <?php else : ?> <li class="nav-item text-nowrap"> <a class="nav-link" href="/php/myhand/backend/auth/login.php">Đăng nhập</a> </li> <?php endif; ?> </ul> </div> </nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
  <a class="navbar-brand" href="/">Nền tảng</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/php/myhand/backend/pages/dashboard.php">Bảng tin</a>
      </li>
    </ul>

    <ul class="navbar-nav px-3 ml-auto">

      <?php
      // Đã đăng nhập rồi -> hiển thị tên Người dùng và menu Đăng xuất
      if (isset($_SESSION['kh_tendangnhap_logged']) && !empty($_SESSION['kh_tendangnhap_logged'])) :
      ?>
        <li class="nav-item text-nowrap">
          <a class="nav-link">Chào <?= $_SESSION['kh_tendangnhap_logged']; ?></a>
        </li>
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="/php/myhand/backend/auth/logout.php">Đăng xuất</a>
        </li>
      <?php else : ?>
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="/php/myhand/backend/auth/login.php">Đăng nhập</a>
        </li>
      <?php endif; ?>
    </ul>
  </div>
</nav>