PHP เช็คข้อมูลซ้ำ RealTime MySQL

PHP เช็คข้อมูลซ้ำ RealTime MySQL บทความนี้สอนเขียนโค้ดเช็คข้อมูลซ้ำจากตารางชื่อ colors ฐานข้อมูล MySQL พร้อมแสดงผลลัพธ์การเช็คค่าซ้ำแบบ RealTime ที่หน้าเว็บไซต์ผ่าน div สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ข่อมูลในตาราง colors

+----+-------+
| id | title |
+----+-------+
|  1 | red   |
|  2 | green |
|  3 | blue  |
+----+-------+

ตัวอย่าง PHP เช็คข้อมูลซ้ำ RealTime MySQL

1. ไฟล์ชื่อ index.php

กรุณากรอกสี <input type="text" id="color" placeholder="ชื่อสี" autocomplete="off">
<div id="result" style="margin-top:.5rem"></div>

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

<script>
    $("#color").keyup(function(){
        let color = $(this).val();
        let data = { 'color': color };
        $.ajax({
            type: 'POST',
            url: "ajax.php",
            data: data,
            success: function( data ) {
                $( "#result" ).html( data );
            }
        });
    });
</script>

2. สร้างไฟล์ชื่อ ajax.php

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

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

    $sql = " SELECT id FROM colors WHERE ( title = '{$color}' ) ";
    $q = mysqli_query( $c, $sql );
    $f = mysqli_fetch_assoc( $q );
    
    mysqli_close( $c );
    if( empty($f['id'])) {
        echo "<font style='color: green'>ข้อมูลไม่ซ้ำ</font>";
    } else {
        echo "<font style='color: red'>ข้อมูลซ้ำ</font>";
    }
?>

PHP เช็คข้อมูลซ้ำ RealTime MySQL มีรายละเอียการเขียนโปรแกรมดังนี้

1. สร้าง input text id = color คือช่องกรอกข้อมูล และ div id = result เพื่อแสดงผลลัพธ์การเช็คข้อมูลซ้ำ

2. เมื่อผู้ใช้งานกรอกข้อมูล โปรแกรมจะทำงานในฟังก์ชัน $("#color").keyup โดยการส่งค่าตัวแปร color ไปที่ ajax.php

3. ที่ ajax.php เชื่อมต่อฐานข้อมูล และ SELECT ข้อมูลจากตาราง colors ด้วยเงื่อนไข WHERE ( title = '{$color}' )

4. กรณีถ้าตัวแปร id ไม่มีค่า คืนข้อความ “ข้อมูลไม่ซ้ำ” ถ้ามีค่าคืนข้อความ “ข้อมูลซ้ำ” และนำไปแสดงที่ div id = result