Material สอนทำระบบล็อกอินและจัดการ AdminLTE 3

จำนวนคนเข้าดู: 64

Workshop สอนทำระบบเบิกจ่ายวัสดุอุปกรณ์ PHP8 PDO MySQL AdminLTE

ตัวอย่างโค้ดเช็คล็อกอิน check_login.php

<?php
session_start();  // เริ่มต้นเซสชัน (Session) หรือ เชื่อมต่อกับเซสชันเดิม ที่มีอยู่แล้ว
require_once 'condb.php'; //ดึงไฟล์ condb.php เข้ามาใช้งาน และทำเพียงครั้งเดียว (ครั้งแรกที่เจอ)

//ตรวจสอบว่ามีการส่งค่า username และ password มาทาง POST หรือไม่
if (isset($_POST['username']) && isset($_POST['password'])) { 
    $username = trim($_POST['username']); //trim() ใช้เพื่อตัดช่องว่าง ลดปัญหาการตรวจสอบค่าซ้ำ  ช่วยทำให้ข้อมูลที่รับมาสะอาดขึ้นและลดปัญหาจากช่องว่างที่ไม่จำเป็น
    $password = trim($_POST['password']); //เช่น " admin " และ "admin" จะถูกมองว่าเป็นค่าเดียวกัน

    // ดึงข้อมูล user โดยไม่ใส่ password ใน SQL
    $stmt = $con->prepare("SELECT * FROM users WHERE username = :username LIMIT 1");
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->execute();

    if ($stmt->rowCount() == 1) {
        $row = $stmt->fetch(PDO::FETCH_ASSOC);

        // ถ้าเก็บ password แบบ plain-text
        // if ($password === $row['password']) {  // <-- ไม่ปลอดภัย
        // ควรใช้ password_verify ถ้าบันทึกแบบ hash
        if (password_verify($password, $row['password'])) {

            //ก็บข้อมูลผู้ใช้ลงใน Session เพื่อใช้ในหน้าอื่น ๆ หลังจาก login สำเร็จ
            $_SESSION['user_id'] = $row['user_id'];
            $_SESSION['full_name'] = $row['full_name'];
            $_SESSION['role'] = $row['role'];
            $_SESSION['status'] = $row['status'];

            if ($row['role'] == 'admin') { //ตรวจสอบสิทธิ์ของผู้ใช้ ถ้า role เป็น admin
                header('Location: admin'); //ใช้ header('Location: admin'); เพื่อเปลี่ยนหน้าไปยังโฟลเดอร์หรือไฟล์สำหรับ admin
                exit; //หยุดการทำงานของสคริปต์ทันทีหลัง redirect เพื่อป้องกันโค้ดด้านล่างทำงานต่อ
            } else {
                header('Location: member');
                exit;
            }
        } else {
            header("Location: index.php?login=error"); //redirect กลับไปหน้า index.php พร้อมส่ง query string ?login=error
            exit;
        }
    } else {
        header("Location: index.php?login=error"); //ถ้าหาผู้ใช้ไม่เจอ → กลับไปหน้าเดิมพร้อม error เช่นกัน
        exit;
    }
}

<?php

session_start(); // เริ่มต้นเซสชัน (Session) หรือ เชื่อมต่อกับเซสชันเดิม ที่มีอยู่แล้ว

require_once 'condb.php'; //ดึงไฟล์ condb.php เข้ามาใช้งาน และทำเพียงครั้งเดียว (ครั้งแรกที่เจอ)

//ตรวจสอบว่ามีการส่งค่า username และ password มาทาง POST หรือไม่

if (isset($_POST['username']) && isset($_POST['password'])) {

$username = trim($_POST['username']); //trim() ใช้เพื่อตัดช่องว่าง ลดปัญหาการตรวจสอบค่าซ้ำ ช่วยทำให้ข้อมูลที่รับมาสะอาดขึ้นและลดปัญหาจากช่องว่างที่ไม่จำเป็น

$password = trim($_POST['password']); //เช่น " admin " และ "admin" จะถูกมองว่าเป็นค่าเดียวกัน

// ดึงข้อมูล user โดยไม่ใส่ password ใน SQL

$stmt = $con->prepare("SELECT * FROM users WHERE username = :username LIMIT 1");

$stmt->bindParam(':username', $username, PDO::PARAM_STR);

$stmt->execute();

if ($stmt->rowCount() == 1) {

$row = $stmt->fetch(PDO::FETCH_ASSOC);

// ถ้าเก็บ password แบบ plain-text

// if ($password === $row['password']) { // <-- ไม่ปลอดภัย

// ควรใช้ password_verify ถ้าบันทึกแบบ hash

if (password_verify($password, $row['password'])) {

//ก็บข้อมูลผู้ใช้ลงใน Session เพื่อใช้ในหน้าอื่น ๆ หลังจาก login สำเร็จ

$_SESSION['user_id'] = $row['user_id'];

$_SESSION['full_name'] = $row['full_name'];

$_SESSION['role'] = $row['role'];

$_SESSION['status'] = $row['status'];

if ($row['role'] == 'admin') { //ตรวจสอบสิทธิ์ของผู้ใช้ ถ้า role เป็น admin

header('Location: admin'); //ใช้ header('Location: admin'); เพื่อเปลี่ยนหน้าไปยังโฟลเดอร์หรือไฟล์สำหรับ admin

exit; //หยุดการทำงานของสคริปต์ทันทีหลัง redirect เพื่อป้องกันโค้ดด้านล่างทำงานต่อ

} else {

header('Location: member');

exit;

}

} else {

header("Location: index.php?login=error"); //redirect กลับไปหน้า index.php พร้อมส่ง query string ?login=error

exit;

}

} else {

header("Location: index.php?login=error"); //ถ้าหาผู้ใช้ไม่เจอ → กลับไปหน้าเดิมพร้อม error เช่นกัน

exit;

}

AdminLTE 3 คือ เทมเพลต (Template) หรือชุด UI Framework ที่ถูกพัฒนาขึ้นมาบน Bootstrap 4 เพื่อใช้ทำระบบหลังบ้าน (Dashboard / Admin Panel) โดยไม่ต้องออกแบบทุกอย่างเองใหม่ เหมาะสำหรับเว็บแอปพลิเคชันที่ต้องการส่วนจัดการ (backend) ที่ดูเป็นมืออาชีพ
ลิงค์ https://adminlte.io/

จัดการ Component ของ AdminLTE

ไฟล์ head.php
- เอาไว้เตรียมสิ่งที่ต้องใช้ (CSS, meta, title)
- CSS ของ AdminLTE และ Plugins: ให้ UI สวยงาม เช่น Font Awesome, AdminLTE main css

<?php
session_start();
// error_reporting(0); // ปิดแจ้งเตือน Error

$not_allowed = (empty($_SESSION['role']) || $_SESSION['role'] != 'admin' || $_SESSION['status'] != 'active');
?>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ระบบเบิก-จ่าย</title>

  <!-- CSS -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <link rel="stylesheet" href="../plugins/toastr/toastr.min.css">

  <style>
    body {
      font-family: 'Krub', sans-serif;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <!-- เนื้อหาหน้าเว็บ -->

  <!-- Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="../plugins/toastr/toastr.min.js"></script>

  <?php if ($not_allowed): ?>
    <script>
      $(function() {
        toastr.error("คุณไม่มีสิทธิ์ใช้งานหน้านี้", "แจ้งเตือน", {
          closeButton: true,
          progressBar: true,
          timeOut: 2000
        });
        setTimeout(function() {
          window.location = "../index.php";
        }, 2000);
      });
    </script>
  <?php exit();
  endif; ?>
</body>

<?php

session_start();

// error_reporting(0); // ปิดแจ้งเตือน Error

$not_allowed = (empty($_SESSION['role']) || $_SESSION['role'] != 'admin' || $_SESSION['status'] != 'active');

<head>

<title>ระบบเบิก-จ่าย</title>

<style>

body {

font-family: 'Krub', sans-serif;

font-weight: 500;

}

</style>

</head>

<body>

<?php if ($not_allowed): ?>

$(function() {

toastr.error("คุณไม่มีสิทธิ์ใช้งานหน้านี้", "แจ้งเตือน", {

closeButton: true,

progressBar: true,

timeOut: 2000

});

setTimeout(function() {

window.location = "../index.php";

}, 2000);

});

</script>

<?php exit();

endif; ?>

</body>

ไฟล์ nav.php
- nav (หรือ navbar.php) สร้างแถบเมนูด้านบน (Top Navbar) ของหน้า AdminLTE

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <!-- Left navbar links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button">
        <i class="fas fa-bars"></i>
      </a>
    </li>
  </ul>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item d-flex align-items-center">
      <div class="image mr-2">
        <img src="../dist/img/149071.png" class="img-circle elevation-2" alt="User Image" style="width:35px; height:35px;">
      </div>
      <span class="font-weight-bold">
        <?php echo htmlspecialchars($_SESSION['full_name']); ?>
      </span>
    </li>
  </ul>

</nav>

</a>

</li>

</ul>

</div>

<?php echo htmlspecialchars($_SESSION['full_name']); ?>

</span>

</li>

</ul>

</nav>

ไฟล์ menu.php
- เมนูด้านข้าง (Sidebar) ของ AdminLTE ซึ่งปกติหลายคนจะตั้งชื่อไฟล์ว่า sidebar.php หรือ menu.php

<aside class="main-sidebar sidebar-dark-light elevation-4">

    <!-- Brand Logo -->
    <a href="index.php" class="brand-link d-flex justify-content-center">
        <span class="brand-text font-weight-light">
            <h5 class="mb-0">ระบบเบิกจ่ายวัสดุอุปกรณ์</h5>
        </span>
    </a>
    <!-- Sidebar -->
    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <img src="../dist/img/149071.png" class="img-circle elevation-2" alt="User Image">
            </div>
            <div class="info">
                <span class="d-block text-white"> <?php echo htmlspecialchars($_SESSION['full_name']); ?></span>
            </div>
        </div>
        <!-- Sidebar Menu -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <li class="nav-item">
                    <a href="index.php" class="nav-link <?php if ($menu == "index") {
                                                            echo "active";
                                                        } ?>">
                        <i class="nav-icon fas fa-home"></i>
                        <p>หน้าหลัก</p>
                    </a>
                </li>

                <li class="nav-item">
                    <a href="../logout.php" class="nav-link">
                        <i class="nav-icon fas fa-sign-out-alt"></i>
                        <p>ออกจากระบบ</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>

<h5 class="mb-0">ระบบเบิกจ่ายวัสดุอุปกรณ์</h5>

</span>

</a>

</div>

</div>

<a href="index.php" class="nav-link <?php if ($menu == "index") {

echo "active";

} ?>">

<p>หน้าหลัก</p>

</a>

</li>

<p>ออกจากระบบ</p>

</a>

</li>

</ul>

</nav>

</div>

</aside>

ไฟล์ footer.php
- footer.php (ส่วนท้ายของหน้าเว็บ) สำหรับ AdminLTE
- หน้าที่ของไฟล์นี้คือแสดงข้อมูลลิขสิทธิ์, เวอร์ชัน และข้อความเพิ่มเติมที่ท้ายหน้าจอ

  <footer class="main-footer">
    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io" target="_blank">AdminLTE.io</a></strong>
    <div class="float-right d-none d-sm-inline-block">
      <strong>&copy; 2025 ระบบเบิกจ่ายวัสดุอุปกรณ์</strong> <b>Version</b> 1.0
    </div>
  </footer>

</div>

</footer>

ไฟล์ script.php
- รวมสคริปต์หลักของ AdminLTE (jQuery, Bootstrap, AdminLTE.js)
- รวมสคริปต์ plugin อื่น ๆ (toastr, DataTables ฯลฯ)
- ใส่โค้ด JS เฉพาะที่ต้องการให้ทำงานทุกหน้า

  <!-- jQuery -->
  <script src="../plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE App -->
  <script src="../dist/js/adminlte.min.js"></script>
  <!-- toastr App -->
  <script src="../plugins/toastr/toastr.min.js"></script>

  <script>
    $(function() {
      $("#example1").DataTable({
        "responsive": true,
        "lengthChange": true,
        "autoWidth": false,
        "order": [
          [0, 'desc']
        ],
        "language": {
          "sProcessing": "กำลังดำเนินการ...",
          "sLengthMenu": "แสดง _MENU_ รายการ",
          "sZeroRecords": "ไม่พบข้อมูล",
          "sEmptyTable": "ไม่มีข้อมูลในตาราง",
          "sInfo": "แสดง _START_ ถึง _END_ จาก _TOTAL_ รายการ",
          "sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 รายการ",
          "sInfoFiltered": "(กรองข้อมูล _MAX_ ทุกรายการ)",
          "sInfoPostFix": "",
          "sSearch": "ค้นหา:",
          "sUrl": "",
          "oPaginate": {
            "sFirst": "เริ่มต้น",
            "sPrevious": "ก่อนหน้า",
            "sNext": "ถัดไป",
            "sLast": "สุดท้าย"
          }
        },
      }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
      });
    });
  </script>

$(function() {

$("#example1").DataTable({

"responsive": true,

"lengthChange": true,

"autoWidth": false,

"order": [

[0, 'desc']

"language": {

"sProcessing": "กำลังดำเนินการ...",

"sLengthMenu": "แสดง _MENU_ รายการ",

"sZeroRecords": "ไม่พบข้อมูล",

"sEmptyTable": "ไม่มีข้อมูลในตาราง",

"sInfo": "แสดง _START_ ถึง _END_ จาก _TOTAL_ รายการ",

"sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 รายการ",

"sInfoFiltered": "(กรองข้อมูล _MAX_ ทุกรายการ)",

"sInfoPostFix": "",

"sSearch": "ค้นหา:",

"sUrl": "",

"oPaginate": {

"sFirst": "เริ่มต้น",

"sPrevious": "ก่อนหน้า",

"sNext": "ถัดไป",

"sLast": "สุดท้าย"

}

}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

$('#example2').DataTable({

"paging": true,

"lengthChange": false,

"searching": false,

"ordering": true,

"info": true,

"autoWidth": false,

"responsive": true,

});

</script>

ไฟล์ index.php
- เป็นโครงหลักของหน้าเว็บ
- head.php → ส่วนหัวและ CSS
- nav.php → Navbar ด้านบน
- menu.php → Sidebar ด้านซ้าย
- footer.php → Footer
- script.php → ไฟล์ JS
- ส่วนที่เปลี่ยนในแต่ละหน้าคือ เนื้อหาใน content-wrapper

<!DOCTYPE html>
<html lang="en">
<?php $menu = "index";?>
<!-- เรียกใช้ไฟล์ haed --> 
<?php include'head.php'; ?>

<div class="wrapper">

  <!-- Navbar -->
  <?php include'nav.php'; ?>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
 <?php include'menu.php'; ?>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      
      <div class="container-fluid">
          <div class="mt-3">
            <iframe width="100%" height="700"
              src="https://www.youtube.com/embed/GIO1th45Drc"
              title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen>
            </iframe>
          </div>
          <?php 
            // $act = (isset($_GET['act']) ? $_GET['act'] : '');
            // if ($act == 'add') {
            // include('test.php');
            // }elseif ($act == 'edit') {
            // include('test.php');
            // }else{
            // include('test.php'); 
            // }
          ?>
      </div><!-- /.container-fluid -->
    </div>
  </div>
  <!-- /.content-wrapper -->
  <?php include'footer.php'; ?>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
<?php include'script.php'; ?>
</html>

<!DOCTYPE html>

<?php $menu = "index";?>

<?php include'head.php'; ?>

<?php include'nav.php'; ?>

<?php include'menu.php'; ?>

src="https://www.youtube.com/embed/GIO1th45Drc"

title="YouTube video player" frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

</div>

<?php

// $act = (isset($_GET['act']) ? $_GET['act'] : '');

// if ($act == 'add') {

// include('test.php');

// }elseif ($act == 'edit') {

// include('test.php');

// }else{

// include('test.php');

// }

</div>

</div>

<?php include'footer.php'; ?>

</aside>

</div>

<?php include'script.php'; ?>

</html>

ไฟล์ logout.php
- Session ทั้งหมดถูกล้างออก
- Browser จะถูกส่งกลับไปหน้า index.php

<?php
 session_start(); // เริ่มการทำงานของ session
 session_destroy(); // ลบข้อมูลทั้งหมดใน session
 header('Location: index.php'); // ส่งผู้ใช้กลับไปหน้า index.php
?>

<?php

session_start(); // เริ่มการทำงานของ session

session_destroy(); // ลบข้อมูลทั้งหมดใน session

header('Location: index.php'); // ส่งผู้ใช้กลับไปหน้า index.php

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

PHP + MySQLi + Admin LTE PHP8 ระบบเบิกจ่าย

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Share this:

Related

วัยวุฒิ ชุมเมืองปัก