เปิดตำรา! สร้างระบบสมัครสมาชิก (Register) ด้วย PHP + MySQL ฉบับสมบูรณ์ (พร้อมโค้ด)

/ Web Development / By

ในโลกของเว็บแอปพลิเคชัน “การสมัครสมาชิก” เปรียบเสมือนประตูบานแรกที่ต้อนรับผู้ใช้เข้ามา ระบบนี้คือจุดเริ่มต้นของการสร้างชุมชน, การเก็บข้อมูลลูกค้า, และการให้บริการแบบส่วนตัว (Personalization)

สำหรับนักพัฒนาเว็บ การจับคู่คลาสสิกอย่าง PHP (ภาษาโปรแกรมฝั่งเซิร์ฟเวอร์ที่ทรงพลัง) และ MySQL (ระบบจัดการฐานข้อมูลที่ได้รับความนิยมสูงสุด) ถือเป็น “ท่ามาตรฐาน” ที่แข็งแกร่งที่สุดในการสร้างระบบนี้

บทความนี้คือคู่มือ “ฉบับจับมือทำ” ที่จะพาคุณสร้างระบบลงทะเบียนออนไลน์ ตั้งแต่การออกแบบฐานข้อมูล, สร้างฟอร์มรับข้อมูล, ไปจนถึงการเขียนโค้ด PHP ให้ทำงานเชื่อมต่อกันอย่างปลอดภัย

ภาคที่ 1: วางรากฐาน (ฐานข้อมูล MySQL)

ก่อนที่ PHP จะ “ทำงาน” เราต้องมี “บ้าน” สำหรับเก็บข้อมูลก่อน นั่นคือฐานข้อมูล MySQL

สิ่งที่เราจะสร้างคือตาราง (Table) ชื่อ users เพื่อเก็บข้อมูลสมาชิก

  • id: รหัสสมาชิก (ตั้งให้เป็น Primary Key และ Auto Increment เพื่อให้มันนับเลขเองอัตโนมัติ)
  • username: ชื่อผู้ใช้สำหรับล็อกอิน
  • email: อีเมล (ควรตั้งค่าเป็น Unique เพื่อป้องกันการสมัครซ้ำ)
  • password: รหัสผ่าน (เราจะ ไม่ เก็บข้อความรหัสผ่านตรงๆ!)
  • created_at: วันที่สมัคร (เพื่อเก็บสถิติ)

คำสั่ง SQL สำหรับสร้างตาราง users:

SQL

CREATE DATABASE IF NOT EXISTS `my_webapp_db`;
USE `my_webapp_db`;

CREATE TABLE `users` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `email` VARCHAR(100) NOT NULL UNIQUE,
  `password` VARCHAR(255) NOT NULL,
  `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

วิธีใช้: คุณสามารถคัดลอกโค้ดนี้ไปรันในแท็บ “SQL” ของ phpMyAdmin (เครื่องมือจัดการ MySQL ที่มาพร้อมกับ XAMPP, MAMP)

ภาคที่ 2: ประตูหน้าบ้าน (ฟอร์ม HTML)

เราต้องการหน้าเว็บ (HTML) เพื่อให้ผู้ใช้กรอกข้อมูล สร้างไฟล์ชื่อ register.html (หรือ .php ก็ได้)

  • <form>: เราจะใช้ method="POST" เพื่อส่งข้อมูลแบบ “ซ่อน” ไปยังไฟล์ PHP
  • action="register_process.php": คือการบอกว่า เมื่อกดปุ่ม “สมัครสมาชิก” ให้ส่งข้อมูลทั้งหมดไปประมวลผลที่ไฟล์นี้
  • name="...": คือ “ชื่อ” ที่ PHP จะใช้เรียกค่าในช่องนั้นๆ (สำคัญมาก!)

โค้ด register.html:

HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สมัครสมาชิก</title>
    </head>
<body>

    <h2>สมัครสมาชิก</h2>
    
    <form action="register_process.php" method="POST">
        <div>
            <label for="username">ชื่อผู้ใช้ (Username):</label>
            <input type="text" id="username" name="username" required>
        </div>
        <br>
        <div>
            <label for="email">อีเมล:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <br>
        <div>
            <label for="password">รหัสผ่าน:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <br>
        <button type="submit">สมัครสมาชิก</button>
    </form>

</body>
</html>

ภาคที่ 3: สมองกล (Backend PHP)

นี่คือหัวใจของระบบ เราจะสร้าง 2 ไฟล์:

  1. db_connect.php: ไฟล์เชื่อมต่อฐานข้อมูล (แยกไว้เพื่อความปลอดภัยและนำไปใช้ซ้ำง่าย)
  2. register_process.php: ไฟล์ที่รับข้อมูลจากฟอร์ม HTML

3.1) ไฟล์เชื่อมต่อฐานข้อมูล (db_connect.php)

PHP

<?php
// ข้อมูลสำหรับเชื่อมต่อ Database
$servername = "localhost";  // หรือ 127.0.0.1
$username_db = "root";       // Username ของ Database (ค่าเริ่มต้นของ XAMPP คือ root)
$password_db = "";           // รหัสผ่าน (ค่าเริ่มต้นของ XAMPP คือ ไม่มีรหัสผ่าน)
$dbname = "my_webapp_db";    // ชื่อ Database ที่เราสร้างไว้

// สร้างการเชื่อมต่อ (MySQLi Object-Oriented)
$conn = new mysqli($servername, $username_db, $password_db, $dbname);

// ตรวจสอบการเชื่อมต่อ
if ($conn->connect_error) {
    die("การเชื่อมต่อล้มเหลว: " . $conn->connect_error);
}

// ตั้งค่า charset เป็น utf8mb4 (รองรับภาษาไทยและ emoji)
$conn->set_charset("utf8mb4");

// ถ้าเชื่อมต่อสำเร็จ เราจะใช้ตัวแปร $conn นี้ในไฟล์อื่น
?>

3.2) ไฟล์ประมวลผลการสมัคร (register_process.php)

ไฟล์นี้จะทำหน้าที่สำคัญ 3 อย่าง: รับค่า, เข้ารหัส, และป้องกัน

PHP

<?php
// 1. นำไฟล์เชื่อมต่อฐานข้อมูลเข้ามา
require_once 'db_connect.php';

// 2. ตรวจสอบว่ามีการส่งข้อมูลมาแบบ POST หรือไม่
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // 3. รับค่าจากฟอร์ม (และป้องกัน XSS เบื้องต้น)
    $username = htmlspecialchars($_POST['username']);
    $email = htmlspecialchars($_POST['email']);
    $password_plain = $_POST['password']; // รับรหัสผ่านแบบข้อความธรรมดา

    //
    // ‼️ หัวใจสำคัญด้านความปลอดภัย: การเข้ารหัสรหัสผ่าน ‼️
    // ห้ามเก็บรหัสผ่านเป็นข้อความธรรมดาเด็ดขาด!
    //
    // เราใช้ password_hash() ซึ่งเป็นฟังก์ชันมาตรฐานและปลอดภัยที่สุดของ PHP
    $hashed_password = password_hash($password_plain, PASSWORD_DEFAULT);

    
    //
    // ‼️ หัวใจสำคัญด้านความปลอดภัย: Prepared Statements ‼️
    // เพื่อป้องกันการโจมตีแบบ SQL Injection
    //
    
    // 4. เตรียมคำสั่ง SQL (ใช้ ? แทนค่าที่จะใส่)
    $sql = "INSERT INTO users (username, email, password) VALUES (?, ?, ?)";

    // 5. เตรียม Statement
    $stmt = $conn->prepare($sql);

    if ($stmt === false) {
        die("เกิดข้อผิดพลาดในการเตรียม SQL: " . $conn->error);
    }

    // 6. ผูกค่าตัวแปร (Bind Parameters)
    // "sss" หมายความว่า ตัวแปร 3 ตัวเป็นชนิด String
    $stmt->bind_param("sss", $username, $email, $hashed_password);

    // 7. ทำงาน (Execute)
    if ($stmt->execute()) {
        echo "<h1>สมัครสมาชิกสำเร็จ!</h1>";
        echo "<p>ยินดีต้อนรับ, " . $username . "</p>";
        echo "<p>คุณสามารถ <a href='login.html'>เข้าสู่ระบบ</a> ได้เลย</p>";
    } else {
        // ตรวจสอบว่า Error เกิดจากอะไร (เช่น Username/Email ซ้ำ)
        if ($conn->errno == 1062) { // 1062 คือ Error code ของ Duplicate entry
            echo "<h1>สมัครสมาชิกล้มเหลว!</h1>";
            echo "<p>Username หรือ Email นี้ถูกใช้งานไปแล้ว</p>";
            echo "<a href='register.html'>ลองอีกครั้ง</a>";
        } else {
            echo "<h1>เกิดข้อผิดพลาด: " . $stmt->error . "</h1>";
        }
    }

    // 8. ปิด Statement และ Connection
    $stmt->close();
    $conn->close();

} else {
    // ถ้าไม่ได้เข้ามาหน้านี้ด้วยวิธี POST
    echo "<h1>ไม่สามารถเข้าถึงหน้านี้ได้โดยตรง</h1>";
}
?>

สรุปและก้าวต่อไป

ยินดีด้วย! ตอนนี้คุณได้สร้าง “แกนหลัก” ของระบบสมัครสมาชิกที่ปลอดภัยแล้ว ไฟล์ register_process.php ของเราทำได้มากกว่าแค่การ “บันทึก” ข้อมูล แต่ยัง:

  1. เข้ารหัสรหัสผ่าน (Hashing): ด้วย password_hash() ทำให้แม้แต่ผู้ดูแลระบบก็ไม่รู้รหัสผ่านที่แท้จริงของผู้ใช้
  2. ป้องกัน SQL Injection: ด้วย Prepared Statements ทำให้แฮกเกอร์ไม่สามารถ “แทรก” คำสั่งประสงค์ร้ายเข้ามาในฐานข้อมูลของคุณได้

ก้าวต่อไปคืออะไร? ระบบนี้ยังขาดการตรวจสอบความถูกต้องของข้อมูล (Validation) ฝั่งเซิร์ฟเวอร์ เช่น:

  • รหัสผ่านสั้นเกินไปหรือไม่?
  • อีเมลที่กรอกมา ถูกต้องตามรูปแบบหรือไม่?
  • รหัสผ่าน 2 ช่อง (ที่มักให้กรอกยืนยัน) ตรงกันหรือไม่?

และแน่นอน เมื่อมีระบบ “สมัครสมาชิก” แล้ว สิ่งที่คุณต้องสร้างต่อก็คือ “ระบบเข้าสู่ระบบ (Login)” ซึ่งจะต้องใช้ฟังก์ชัน password_verify() เพื่อตรวจสอบรหัสผ่านที่ผู้ใช้กรอก เทียบกับค่าที่ถูกเข้ารหัส (Hashed) ไว้ในฐานข้อมูลนั่นเอง

Post Views: 733

Related Posts

Subscribe
Subscribe
Scroll to Top