Chương 10-Bài 10. Tạo trang Đăng nhập trong Backend
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng:
13/3/2025, 10:52
Lượt xem: 827
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>
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>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!