เช็ค username ว่าซ้ำไหม RealTime PHP

เช็ค username ว่าซ้ำไหม RealTime PHP บทความนี้สอนสร้างฟอร์มพร้อม input text และเช็ค username ว่าซ้ำ หรือมีข้อมูลในฐานข้อมูล MySQL หรือไม่แบบ RealTime ด้วยภาษา PHP พร้อมแสดงผลลัพธ์ออกสู่หน้าจอ

ตัวอย่าง ฐานข้อมูลชื่อ example ตารางชื่อ user

+----+----------+----------+-------+
| id | username | password | role  |
+----+----------+----------+-------+
|  1 | root     | 01234    | admin |
|  2 | devdit   | 98765    | mod   |
+----+----------+----------+-------+

ตัวอย่าง เช็ค username ว่าซ้ำไหม RealTime PHP

1. สร้าง input text id = username และ div id = result ใช้สำหรับแสดงผลลัพธ์ว่า username ซ้ำไหม

<input type="text" id="username" placeholder="Username">
<div id="result" style="margin-top:.5rem"></div>

2. ติดตั้ง jQuery และเขียน AJAX เพื่อส่ง username ไปเช็คว่าซ้ำไหม ที่ไฟล์ ajax.php

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

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

3. สร้างไฟล์ชื่อ ajax.php และเขียนโค้ดตามด้านล่าง

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

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

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

เช็ค username ว่าซ้ำไหม RealTime PHP จากโค้ดมีขั้นตอนการทำงานดังนี้

1. เมื่อผู้ใช้งานกรอกข้อมูลลง input text id = username โปรแกรมจะเข้าทำงานใน function $("#username").keyup

2. ส่งค่าตัวแปรจาก input text ไปที่ไฟล์ ajax.php แบบ AJAX ด้วย jQuery และรับค่าตัวแปรด้วยคำสั่ง $_POST

3. ที่ไฟล์ ajax.php เชื่อมต่อฐานข้อมูล MySQL โดยการดึงข้อมูลจากตาราง user ด้วยเงื่อนไข ( username = '{$username}' )

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