Login แบบไม่เปลี่ยนหน้า PHP MySQL

Login แบบไม่เปลี่ยนหน้า PHP MySQL บทความนี้สอนสร้างฟอร์มสำหรับ Login โดยส่งข้อมูล username และ password ไปเช็คในฐานข้อมูล MySQL แบบไม่เปลี่ยนหน้า ด้วยวิธีการ AJAX ของ jQuery สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง Login แบบไม่เปลี่ยนหน้า PHP MySQL

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

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

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

2. สร้างไฟล์ชื่อ index.php ประกอบด้วยฟอร์ม Login และโค้ด AJAX ด้วย jQuery

<form>
    <fieldset> 
        <legend>กรุณาเข้าสู่ระบบ</legend>
        <input type="text" id="username" placeholder="ชื่อผู้เข้าใช้งาน" autocomplete="off">
        <input type="password" id="password" placeholder="รหัสผ่าน" autocomplete="off">
        <input type="button" id="login" value="เข้าสู่ระบบ">
        <div id="result" style="margin-top:.5rem"></div>
    </fieldset>
</form>

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

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

3. สร่างไฟล์ชื่อ ajax.php ทำหน้าที่ Login กับฐานข้อมูล MySQL และ return ผลลัพธ์กลับมาที่หน้า index.php

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

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

    if( !empty( $username ) && !empty( $password ) ) {
        $sql = " 
                SELECT id FROM 
                user 
                WHERE 
                ( username = '{$username}' ) AND
                ( password = '{$password}' )
            ";
        $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'>Username หรือ Password ไม่ถูกต้อง</font>";
        }
    }
?>

Login แบบไม่เปลี่ยนหน้า PHP MySQL จากตัวอย่างโค้ดมีลำดับขั้นตอนดังนี้

1. สร้างฟอร์ม Login ประกอบด้วย input text id = username และ input text id = password

2. เมื่อกดปุ่ม Login โปรแกรมจะเข้าทำงานในฟังก์ชัน $("#login").click ของ JavaScript

3. ใช้คำสั่ง AJAX ของ jQuery เพื่อส่งค่าตัวแปรทั้ง 2 ไปเช็ค Login ที่ไฟล์ ajax.php

4. ไฟล์ ajax.php เช็คการ Login กับฐานข้อมูล MySQL ตารางชื่อ user ด้วย WHERE username และ password

5. กรณีถ้ามีข้อมูลในตาราง แสดงข้อความ “เข้าสู่ระบบเรียบร้อย” ถ้าไม่แสดง “Username หรือ Password ไม่ถูกต้อง”

6. แสดงสถานะการ Login ที่ div id = result ตรงหน้าฟอร์ม Login

7. แนะนำให้สร้างตัวแปร session มาเก็บสถานะการ Login ของผู้ใช้งาน สร้างที่ไฟล์ ajax.php เช็คที่ไฟล์ index.php