Workshop สอนทำระบบเบิกจ่ายวัสดุอุปกรณ์ PHP8 PDO MySQL AdminLTE
- ตัวอย่างโค้ดแสดงข้อมูลสมาชิก user_list.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<?php // เชื่อมต่อฐานข้อมูล require_once '../condb.php'; // เตรียมคำสั่ง SQL $sql = "SELECT user_id, username, full_name, phone, email, department_id, role, status, created_at FROM users"; $stmt = $con->prepare($sql); $stmt->execute(); // รันคำสั่ง $users = $stmt->fetchAll(PDO::FETCH_ASSOC); // ดึงข้อมูลทั้งหมดเป็น array associative // echo "<pre>"; // print_r($users); // echo "</pre>"; ?> <table id="example1" class="table table-striped dataTable"> <thead> <tr> <th tabindex="0" rowspan="1" colspan="1" style="width: 1%;">ลำดับ</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">ผู้ใช้งาน</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 15%;">ชื่อ-นามสกุล</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">อีเมล์</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">เบอร์ติดต่อ</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 10%;">แผนก</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 5%;">สิทธิ์</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 5%;">สถานะ</th> <th tabindex="0" rowspan="1" colspan="1" style="width: 5%;">จัดการ</th> </tr> </thead> <tbody> <?php $i = 1; foreach ($users as $user): ?> <tr> <td><?= $i++ ?></td> <td><?= htmlspecialchars($user['username']) ?></td> <td><?= htmlspecialchars($user['full_name']) ?></td> <td><?= htmlspecialchars($user['email']) ?></td> <td><?= htmlspecialchars($user['phone']) ?></td> <td><?= htmlspecialchars($user['department_id']) ?></td> <td><?= htmlspecialchars($user['role']) ?></td> <td> <?php if (strtolower($user['status']) === 'active'): ?> <span class="badge bg-success">Active</span> <?php else: ?> <span class="badge bg-danger">Inactive</span> <?php endif; ?> </td> <td> <a href="#" class="btn btn-warning btn-sm editBtn" data-id="<?= $user['user_id'] ?>"> <i class="fas fa-pencil-alt"></i> </a> <a href="#" class="btn btn-danger btn-sm deleteBtn" data-id="<?= $user['user_id'] ?>" title="ลบ"> <i class="fas fa-trash"></i> </a> </td> </tr> <?php endforeach; ?> </tbody> </table> <script> $(".editBtn").click(function(){ var user_id = $(this).data("id"); $.ajax({ url: "user_get.php", type: "GET", data: { user_id: user_id }, dataType: "json", success: function(res){ $("#edit_user_id").val(res.user_id); $("#edit_username").val(res.username); $("#edit_full_name").val(res.full_name); $("#edit_email").val(res.email); $("#edit_phone").val(res.phone); $("#edit_status").val(res.status); $("#editUserModal").modal("show"); } }); }); $(".deleteBtn").click(function(e){ e.preventDefault(); var user_id = $(this).data("id"); if(confirm("ต้องการลบข้อมูลใช่หรือไม่?")){ $.ajax({ url: "user_delete.php", type: "POST", data: { user_id: user_id }, dataType: "json", success: function(res){ if(res.status === "success"){ toastr.success(res.message); setTimeout(() => { location.reload(); }, 1000); } else { toastr.error(res.message); } }, error: function(xhr){ toastr.error("เกิดข้อผิดพลาด: " + xhr.responseText); } }); } }); </script> |
- import plugins datatables
|
1 2 3 4 |
<link rel="stylesheet" href="../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css"> <!-- DataTables & Plugins --> <script src="../plugins/datatables/jquery.dataTables.min.js"></script> <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script> |
- สร้างปุ่มสำหรับเพิ่มข้อมูล user.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container-fluid"> <div class="d-flex justify-content-between align-items-center mb-3"> <a href="user.php?act=add" type="button" class="btn btn-primary btn-rounded btn-sm" data-toggle="modal" data-target=".bd-example-modal-lg"> <i class="fas fa-plus-circle"></i> เพิ่มข้อมูล </a> <?php include('user_add.php'); ?> </div> <?php include('user_edit.php'); include('user_list.php'); ?> </div> |
- สร้างฟอร์มสำหรับเพิ่มข้อมูลสมาชิก user_add.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="modalUserLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form id="userForm" action="user_add_db.php" method="post" enctype="multipart/form-data"> <div class="modal-header"> <h5 class="modal-title" id="modalUserLabel"><b>เพิ่มผู้ใช้ใหม่</b></h5> <button type="button" class="close" data-dismiss="modal" aria-label="ปิด"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="form-group col-6"> <label for="username">ชื่อผู้ใช้</label> <input type="text" name="username" class="form-control" placeholder="ป้อนชื่อผู้ใช้ username" required> </div> <div class="form-group col-6"> <label for="password">รหัสผ่าน</label> <input type="password" name="password" class="form-control" placeholder="ป้อนรหัสผ่าน" required> </div> </div> <div class="row"> <div class="form-group col-6"> <label for="full_name">ชื่อ-นามสกุล</label> <input type="text" name="full_name" class="form-control" placeholder="ป้อนชื่อ-นามสกุล" required> </div> <div class="form-group col-6"> <label for="phone">เบอร์โทรศัพท์</label> <input type="tel" name="phone" class="form-control" placeholder="ป้อนเบอร์โทรศัพท์" required> </div> </div> <div class="row"> <div class="form-group col-6"> <label for="email">อีเมล์</label> <input type="email" name="email" class="form-control" placeholder="ป้อนอีเมล" required> </div> <div class="form-group col-6"> <label for="department_id">แผนก</label> <select name="department_id" class="form-control" required> <option value="">-- เลือกแผนก --</option> <option value="1">แผนก A</option> <option value="2">แผนก B</option> </select> </div> </div> <div class="row"> <div class="form-group col-6"> <label for="role">สิทธิ์การเข้าถึง</label> <select name="role" class="form-control" required> <option value="">-- เลือกสิทธิ์ --</option> <option value="admin">ผู้ดูแลระบบ</option> <option value="user">พนักงาน</option> <option value="staff">เจ้าหน้าที่</option> </select> </div> <div class="form-group col-6"> <label for="status">สถานะ</label> <select name="status" class="form-control" required> <option value="">-- เลือกสถานะ --</option> <option value="active">Active</option> <option value="inactive">Inactive</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success">บันทึกข้อมูล</button> <button type="button" class="btn btn-danger" data-dismiss="modal">ยกเลิก</button> </div> </form> </div> </div> </div> <script> $("#userForm").on("submit", function(e) { e.preventDefault(); // กัน reload หน้า $.ajax({ url: "user_add_db.php", type: "POST", data: $(this).serialize(), dataType: "json", success: function(response) { if (response.status === "success") { toastr.success(response.message); $("#userForm")[0].reset(); $(".bd-example-modal-lg").modal("hide"); setTimeout(() => { window.location.href = "user.php"; }, 2000); } else { toastr.error(response.message); } }, error: function(xhr, status, error) { toastr.error("เกิดข้อผิดพลาด: " + error); } }); }); </script> |
- บันทึกข้อมูลลงฐาข้อมูล user_add_db.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?php header('Content-Type: application/json'); require_once '../condb.php'; // ไฟล์เชื่อมต่อฐานข้อมูล $username = $_POST['username']; $password = $_POST['password']; $full_name = $_POST['full_name']; $phone = $_POST['phone']; $email = $_POST['email']; $department_id = $_POST['department_id']; $role = $_POST['role']; $status = $_POST['status']; try { // ตรวจสอบซ้ำ $check = $con->prepare("SELECT user_id FROM users WHERE username = :username OR email = :email LIMIT 1"); $check->execute([":username" => $username, ":email" => $email]); if ($check->rowCount() > 0) { echo json_encode([ "status" => "error", "message" => "มี username หรือ email นี้แล้ว!" ]); exit; // stop } // เข้ารหัสรหัสผ่าน $hashedPassword = password_hash($password, PASSWORD_DEFAULT); $sql = "INSERT INTO users (username, password, full_name, phone, email, department_id, role, status, created_at) VALUES (:username, :password, :full_name, :phone, :email, :department_id, :role, :status, NOW())"; $stmt = $con->prepare($sql); $stmt->execute([ ":username" => $username, ":password" => $hashedPassword, ":full_name" => $full_name, ":phone" => $phone, ":email" => $email, ":department_id" => $department_id, ":role" => $role, ":status" => $status ]); echo json_encode([ "status" => "success", "message" => "เพิ่มผู้ใช้เรียบร้อยแล้ว!" ]); } catch (Exception $e) { echo json_encode([ "status" => "error", "message" => "เกิดข้อผิดพลาด: " . $e->getMessage() ]); } ?> |
- สร้างฟอร์มสำหรับแก้ไขข้อมูลสมาชิก user_edit.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form id="editUserForm"> <div class="modal-header"> <h5 class="modal-title">แก้ไขผู้ใช้</h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <input type="hidden" name="user_id" id="edit_user_id"> <div class="row"> <div class="form-group col-6"> <label>ชื่อผู้ใช้</label> <input type="text" name="username" id="edit_username" class="form-control" required> </div> <div class="form-group col-6"> <label>รหัสผ่าน <small>(เว้นว่างถ้าไม่เปลี่ยน)</small></label> <input type="password" name="password" id="edit_password" class="form-control" placeholder="เว้นว่างถ้าไม่เปลี่ยนรหัสผ่าน"> </div> </div> <div class="row"> <div class="form-group col-6"> <label>ชื่อ-นามสกุล</label> <input type="text" name="full_name" id="edit_full_name" class="form-control" required> </div> <div class="form-group col-6"> <label>เบอร์โทรศัพท์</label> <input type="text" name="phone" id="edit_phone" class="form-control"> </div> </div> <div class="row"> <div class="form-group col-6"> <label>อีเมล์</label> <input type="email" name="email" id="edit_email" class="form-control" required> </div> <div class="form-group col-6"> <label>แผนก</label> <select name="department_id" id="edit_department_id" class="form-control" required> <option value="">-- เลือกแผนก --</option> <option value="1">แผนก A</option> <option value="2">แผนก B</option> </select> </div> </div> <div class="row"> <div class="form-group col-6"> <label>สิทธิ์การเข้าถึง</label> <select name="role" id="edit_role" class="form-control" required> <option value="">-- เลือกสิทธิ์ --</option> <option value="admin">ผู้ดูแลระบบ</option> <option value="user">พนักงาน</option> <option value="staff">เจ้าหน้าที่</option> </select> </div> <div class="form-group col-6"> <label>สถานะ</label> <select name="status" id="edit_status" class="form-control" required> <option value="active">Active</option> <option value="inactive">Inactive</option> </select> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success">บันทึก</button> <button type="button" class="btn btn-danger" data-dismiss="modal">ยกเลิก</button> </div> </form> </div> </div> </div> <script> $(document).ready(function() { // ปุ่มแก้ไขผู้ใช้ $(".editBtn").click(function() { var user_id = $(this).data("id"); $.ajax({ url: "user_get.php", type: "GET", data: { user_id: user_id }, dataType: "json", success: function(res) { $("#edit_user_id").val(res.user_id); $("#edit_username").val(res.username); $("#edit_full_name").val(res.full_name); $("#edit_email").val(res.email); $("#edit_phone").val(res.phone); $("#edit_department_id").val(res.department_id); $("#edit_role").val(res.role); $("#edit_status").val(res.status); $("#edit_password").val(""); // เว้นว่าง $("#editUserModal").modal("show"); } }); }); // Submit form แก้ไข $("#editUserForm").submit(function(e) { e.preventDefault(); $.ajax({ url: "user_edit_db.php", type: "POST", data: $(this).serialize(), dataType: "json", success: function(res) { if (res.status === "success") { toastr.success(res.message); $("#editUserModal").modal("hide"); setTimeout(() => { location.reload(); }, 1500); } else { toastr.error(res.message); } }, error: function(xhr) { toastr.error("เกิดข้อผิดพลาด: " + xhr.responseText); } }); }); }); </script> |
- ไฟล์สำหรับ get ข้อมูล user มาแสดงในฟอร์มแก้ไข user_get.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php require_once '../condb.php'; // ไฟล์เชื่อมต่อฐานข้อมูล // ตรวจสอบว่ามี user_id ส่งมาหรือไม่ if(isset($_GET['user_id'])){ $user_id = $_GET['user_id']; // ดึงข้อมูลผู้ใช้ $stmt = $con->prepare("SELECT * FROM users WHERE user_id = :id"); $stmt->execute([':id' => $user_id]); $user = $stmt->fetch(PDO::FETCH_ASSOC); if($user){ // ส่งข้อมูลกลับเป็น JSON header('Content-Type: application/json'); echo json_encode($user); } else { echo json_encode(["status"=>"error","message"=>"ไม่พบผู้ใช้ ID: $user_id"]); } } else { echo json_encode(["status"=>"error","message"=>"ไม่มี user_id ถูกส่งมา"]); } |
- แก้ไขข้อมูลลงฐานข้อมูล user_edit_db.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php header('Content-Type: application/json'); require_once '../condb.php'; try { $user_id = $_POST['user_id']; $username = $_POST['username']; $full_name = $_POST['full_name']; $email = $_POST['email']; $phone = $_POST['phone']; $department = $_POST['department_id']; $role = $_POST['role']; $status = $_POST['status']; $password = $_POST['password'] ?? ''; // ตรวจสอบ username หรือ email ซ้ำ (ยกเว้นตัวเอง) $check = $con->prepare("SELECT user_id FROM users WHERE (username = :username OR email = :email) AND user_id != :user_id LIMIT 1"); $check->execute([ ':username' => $username, ':email' => $email, ':user_id' => $user_id ]); if($check->rowCount() > 0){ echo json_encode([ "status" => "error", "message" => "มี username หรือ email นี้แล้ว!" ]); exit; } // ถ้ามี password ใหม่ → hash ก่อน update if(!empty($password)){ $hashedPassword = password_hash($password, PASSWORD_DEFAULT); $sql = "UPDATE users SET username=:username, full_name=:full_name, email=:email, phone=:phone, department_id=:department, role=:role, status=:status, password=:password WHERE user_id=:user_id"; $stmt = $con->prepare($sql); $stmt->execute([ ':username' => $username, ':full_name' => $full_name, ':email' => $email, ':phone' => $phone, ':department' => $department, ':role' => $role, ':status' => $status, ':password' => $hashedPassword, ':user_id' => $user_id ]); } else { $sql = "UPDATE users SET username=:username, full_name=:full_name, email=:email, phone=:phone, department_id=:department, role=:role, status=:status WHERE user_id=:user_id"; $stmt = $con->prepare($sql); $stmt->execute([ ':username' => $username, ':full_name' => $full_name, ':email' => $email, ':phone' => $phone, ':department' => $department, ':role' => $role, ':status' => $status, ':user_id' => $user_id ]); } echo json_encode([ "status" => "success", "message" => "แก้ไขผู้ใช้เรียบร้อยแล้ว" ]); } catch (Exception $e){ echo json_encode([ "status" => "error", "message" => "เกิดข้อผิดพลาด: " . $e->getMessage() ]); } |
- ลบข้อมูล user ออกจากฐานข้อมูล user_delete.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php header('Content-Type: application/json'); require_once '../condb.php'; if(!isset($_POST['user_id'])){ echo json_encode(["status"=>"error","message"=>"ไม่พบข้อมูลผู้ใช้"]); exit; } try{ $user_id = $_POST['user_id']; $stmt = $con->prepare("DELETE FROM users WHERE user_id=:user_id"); $stmt->execute([':user_id'=>$user_id]); echo json_encode(["status"=>"success","message"=>"ลบผู้ใช้เรียบร้อยแล้ว"]); } catch(Exception $e){ echo json_encode(["status"=>"error","message"=>"เกิดข้อผิดพลาด: ".$e->getMessage()]); } |
- ปรับฟอนต์ให้สวยงาม
|
1 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Krub:wght@300;400;500;700&display=swap"> |

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