PHP ลบข้อมูล RealTime MySQL jQuery

PHP ลบข้อมูล RealTime MySQL jQuery บทความนี้สอนเขียนโค้ดลบข้อมูลจากฐานข้อมูล MySQL แบบ RealTime ด้วย jQuery Framework แบบ AJAX โดยการส่ง id ไปที่ไฟล์ delete เพื่อลบข้อมูล สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง PHP ลบข้อมูล RealTime MySQL jQuery

1. สร้างฐานข้อมูลชื่อ example และตารางชื่อ user พร้อมข้อมูลเริ่มต้น

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` char(50) NOT NULL,
  `password` char(50) NOT NULL,
  `role` char(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8mb4

+----+----------+----------+
| id | username | password |
+----+----------+----------+
|  1 | root     | 01234    |
|  3 | Devdit   | 01234    |
|  4 | Mod      | 01234    |
+----+----------+----------+

2. สร้างไฟล์ชื่อ index.php สำหรับแสดงข้อมูลบนหน้าเว็บไซต์ และเมื่อคลิกลิงก์ลบจะส่ง id ไปที่ไฟล์ delete.php

<?php
    $c = mysqli_connect("localhost", "root", "", "example");
    mysqli_query( $c, "SET NAMES UTF8" );
    $sql = " SELECT * FROM user ";
    $q = mysqli_query( $c, $sql );
    while( $f = mysqli_fetch_assoc( $q ) ) {
        $id = $f['id'];
        $username = $f['username'];
        echo "<div id='{$id}'><a href='javascript:del({$id});'>ลบ</a> {$username}</div>";
    }
    mysqli_close( $c );
?>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<script>
    function del( id ) {
        let data = { 
            'id': id,
        };
        $.ajax({
            type: 'POST',
            url: "delete.php",
            data: data,
            success: function( data ) {
                if( data == "ok" ) $("#"+id).remove();
            }
        });            
    }
</script>

3. สร้างไฟล์ delete.php เพื่อลบข้อมูลจากตาราง MySQL

<?php
	// ไฟล์ delete.php
    $c = mysqli_connect("localhost", "root", "", "example");
    mysqli_query( $c, "SET NAMES UTF8" );

    isset( $_POST['id'] ) ? $id = $_POST['id'] : $id = "";

    if( !empty( $id ) ) {
        $sql = " 
                DELETE FROM user
                WHERE ( id = '{$id}' )
            ";
        $q = mysqli_query( $c, $sql );
        mysqli_close( $c );
        
        if( $q ) {
            echo "ok";
        } else {
            echo "no";
        }
    }
?>

PHP ลบข้อมูล RealTime MySQL jQuery มีรายละเอียดขั้นตอนดังนี้

1. สร้างฐานข้อมูลชื่อ example พร้อมตารางชื่อ user และเพิ่มข้อมูลลงตารางดังกล่าว

2. เชื่อมต่อฐานข้อมูล และแสดงข้อมูลออกสู๋หน้าจอด้วยด้วยคำสั่ง SQL SELECT

3. เมื่อผู้ใช้งานกดปุ่มลบ จะเข้าทำงานในฟังก์ชัน del ของ JavaScript พร้อมรหัส id

4. เขียน AJAX ด้วย jQuery ส่ง id ไปที่ไฟล์ delete.php พร้อมรับค่า id ด้วย $_POST

5. ใช้คำสั่ง DELETE โดยลบข้อมูลตามรหัส id กรณีลบได้จะคืนค่า ok ถ้าไม่ได้คืนค่า no

6. ส่งค่ากลับมาที่ไฟล์ index.php ถ้าผลลัพธ์คือ ok ให้ทำการลบแถว div ที่ถูกกดลบ