ผมสร้างระบบ Login และ CRUD แบบง่าย ๆ ด้วย PHP + Bootstrap 5 (โปรเจกต์เริ่มต้นสำหรับมือใหม่)

โดย CyberMAN



PHP PROJECT WALKTHROUGH

ผมสร้างระบบ Login และ CRUD แบบง่าย ๆ ด้วย PHP + Bootstrap 5
(โปรเจกต์เริ่มต้นสำหรับมือใหม่)

ก่อนจะกระโดดไปเรียน CodeIgniter 4 หรือ Laravel แบบเต็มตัว บทความนี้พาทำโปรเจกต์ Login + CRUD ด้วย PHP ล้วน ๆ ให้เห็นภาพว่า Framework ช่วยอะไรเราบ้าง พร้อมแก้จุดอ่อนด้านความปลอดภัยที่บทเรียนทั่วไปมักมองข้าม

อ่านประมาณ 9 นาที🧩ระดับ: เริ่มต้น🛠PHP + MySQLi + Bootstrap 5

หลายคนเริ่มเรียน PHP จากการทำระบบ Login และ CRUD (Create, Read, Update, Delete) เป็นโปรเจกต์แรก เพราะมันคือแกนกลางของเว็บแอปแทบทุกประเภท ตั้งแต่ระบบจัดการนักเรียน ระบบสมาชิกร้านค้า ไปจนถึง Backoffice ขององค์กร ในบทความนี้เราจะสร้างระบบนี้ด้วย PHP ดิบ ๆ (Vanilla PHP) ร่วมกับ Bootstrap 5 ตั้งแต่ศูนย์ และที่สำคัญคือเราจะเขียนให้ ปลอดภัยกว่าตัวอย่างทั่วไปที่หาอ่านได้ตามเว็บ เพราะ Tutorial ส่วนใหญ่มักสอนแบบ query ตรง ๆ ที่เปิดช่องให้เกิด SQL Injection และเก็บรหัสผ่านแบบไม่เข้ารหัส ซึ่งเป็นนิสัยที่ไม่ควรติดไปใช้ในงานจริง

เป้าหมายของบทความนี้ไม่ใช่แค่ "ทำให้รัน" แต่อยากให้มือใหม่เห็นว่าการเขียน PHP แบบดิบต้องดูแลเรื่องอะไรเองบ้าง เมื่อเทียบกับตอนที่เราย้ายไปใช้ CodeIgniter 4 หรือ Laravel ที่มีโครงสร้างพวกนี้เตรียมไว้ให้แล้ว

01สิ่งที่ต้องเตรียมก่อนเริ่ม

  • Local server: XAMPP หรือ Laragon (มี Apache + MySQL + PHP ในตัว)
  • พื้นฐาน PHP: ตัวแปร, ฟังก์ชัน, if/else, array เบื้องต้น
  • พื้นฐาน SQL: CREATE TABLE, SELECT, INSERT, UPDATE, DELETE
  • Bootstrap 5: ใช้ผ่าน CDN ไม่ต้องติดตั้งอะไรเพิ่ม

02สร้างฐานข้อมูลและไฟล์เชื่อมต่อ

เริ่มจากสร้างฐานข้อมูลชื่อ pcm_demo และตาราง users สำหรับ Login กับตาราง students สำหรับฝึก CRUD

schema.sql
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL
);

CREATE TABLE students (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100) NOT NULL,
  class VARCHAR(20) NOT NULL,
  marks INT NOT NULL
);

จากนั้นสร้างไฟล์เชื่อมต่อฐานข้อมูล โดยใช้ MySQLi แบบ Object-Oriented และเปิด exception mode ไว้ เพื่อให้ error แสดงชัดเจนตอนพัฒนา

config/db.php
<?php
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'pcm_demo');

try {
    $conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
    $conn->set_charset('utf8mb4');
} catch (mysqli_sql_exception $e) {
    die('Connection failed: ' . $e->getMessage());
}
💡 ทำไมต้อง mysqli_reportการเปิด MYSQLI_REPORT_STRICT ทำให้ทุก query ที่ผิดพลาดโยน Exception ออกมาทันที แทนที่จะปล่อยให้ query ล้มเหลวเงียบ ๆ ซึ่งช่วยจับบั๊กได้เร็วกว่าการเช็ค if ($result === false) ทุกจุด

03ระบบ Login ที่ปลอดภัยด้วย password_hash()

จุดที่ Tutorial ทั่วไปมักพลาดคือเก็บรหัสผ่านเป็น plain text หรือเทียบรหัสผ่านด้วย == ตรง ๆ ในที่นี้เราจะใช้ password_hash() ตอนสมัครสมาชิก และ password_verify() ตอน Login พร้อม Prepared Statement เพื่อกัน SQL Injection

register.php
<?php
require 'config/db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username']);
    $hashed   = password_hash($_POST['password'], PASSWORD_DEFAULT);

    $stmt = $conn->prepare("INSERT INTO users (username, password) VALUES (?, ?)");
    $stmt->bind_param("ss", $username, $hashed);
    $stmt->execute();

    header('Location: login.php?registered=1');
    exit;
}
login.php
<?php
session_start();
require 'config/db.php';
$error = null;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username']);
    $password = $_POST['password'];

    $stmt = $conn->prepare("SELECT id, password FROM users WHERE username = ?");
    $stmt->bind_param("s", $username);
    $stmt->execute();
    $result = $stmt->get_result();
    $user   = $result->fetch_assoc();

    if ($user && password_verify($password, $user['password'])) {
        session_regenerate_id(true);
        $_SESSION['user_id']  = $user['id'];
        $_SESSION['username'] = $username;
        header('Location: students.php');
        exit;
    }
    $error = 'Username หรือ Password ไม่ถูกต้อง';
}
⚠️ จุดที่มือใหม่พลาดบ่อยการเทียบรหัสผ่านด้วย $password == $user['password'] ใช้ไม่ได้กับ hash เพราะ password_hash() สร้าง salt แบบสุ่มทุกครั้ง ต้องใช้ password_verify() เท่านั้น และห้าม query แบบเอา $_POST ไปต่อ string SQL ตรง ๆ เด็ดขาด เพราะนั่นคือช่องโหว่ SQL Injection แบบคลาสสิก

ส่วน Form ฝั่ง HTML ใช้ Bootstrap 5 แบบมาตรฐาน เช่น

login.php (HTML part)
<div class="container mt-5" style="max-width:400px">
  <h3 class="mb-4">เข้าสู่ระบบ</h3>
  <?php if ($error): ?>
    <div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
  <?php endif; ?>
  <form method="post">
    <input name="username" class="form-control mb-3" placeholder="Username" required>
    <input type="password" name="password" class="form-control mb-3" placeholder="Password" required>
    <button class="btn btn-primary w-100">เข้าสู่ระบบ</button>
  </form>
</div>

04CRUD นักเรียนด้วย Bootstrap 5

หลัง Login สำเร็จ เราจะพาไปหน้า students.php ที่แสดงตารางข้อมูล พร้อมปุ่มเพิ่ม/แก้ไข/ลบ ทุกหน้าต้องเช็ค session ก่อนเสมอ ไม่ใช่แค่ซ่อนปุ่มเฉย ๆ

students.php (Read)
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit;
}
require 'config/db.php';
$students = $conn->query("SELECT * FROM students ORDER BY id DESC");
?>
<table class="table table-striped">
  <tr><th>ชื่อ</th><th>ห้อง</th><th>คะแนน</th><th></th></tr>
  <?php while ($row = $students->fetch_assoc()): ?>
  <tr>
    <td><?= htmlspecialchars($row['name']) ?></td>
    <td><?= htmlspecialchars($row['class']) ?></td>
    <td><?= $row['marks'] ?></td>
    <td>
      <a href="edit.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-warning">แก้ไข</a>
      <a href="delete.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-danger"
         onclick="return confirm('ลบรายการนี้?')">ลบ</a>
    </td>
  </tr>
  <?php endwhile; ?>
</table>
delete.php (Delete)
<?php
session_start();
if (!isset($_SESSION['user_id'])) { header('Location: login.php'); exit; }
require 'config/db.php';

$id = (int) ($_GET['id'] ?? 0);
$stmt = $conn->prepare("DELETE FROM students WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();

header('Location: students.php');
exit;

ส่วน add.php และ edit.php ก็ใช้แพทเทิร์นเดียวกัน คือ เช็ค session → bind_param ทุก query → redirect หลังบันทึก ทำซ้ำแบบนี้ใน 4 ไฟล์ (add, edit, delete, login) คือสิ่งที่มือใหม่จะเริ่มรู้สึก "เขียนซ้ำเยอะมาก" และนั่นคือจุดเริ่มต้นที่ทำให้เราอยากมี Framework เข้ามาช่วย

05เขียนเองทั้งหมด vs ใช้ Framework

พอลองสร้างระบบ Login + CRUD ด้วย PHP ดิบจนจบ จะเห็นภาพชัดว่าอะไรที่เราต้อง "คิดเอง ทำเอง" ทั้งหมด ลองเทียบให้เห็นภาพกับ CodeIgniter 4 และ Laravel

หัวข้อPHP ดิบ (Vanilla)CodeIgniter 4Laravel
ป้องกัน SQL Injectionต้องเขียน prepared statement เองQuery Builder ป้องกันให้อัตโนมัติEloquent ป้องกันให้อัตโนมัติ
เก็บรหัสผ่านต้องเรียก password_hash() เองมี password helper ในตัวHash facade + bcrypt อัตโนมัติ
โครงสร้างไฟล์ปนกันหมดในไฟล์เดียวMVC แยกชัดเจนMVC + Service/Repository ได้
Validation ฟอร์มเขียน if/else เองทั้งหมดValidation library ในตัวForm Request Validation
ความเร็วในการเริ่มโปรเจกต์เล็กเร็วที่สุด ไม่ต้องตั้งค่าอะไรต้องตั้งค่าเริ่มต้นเล็กน้อยตั้งค่าเริ่มต้นมากกว่า CI4
เหมาะกับโปรเจกต์ใหญ่ขึ้นดูแลยากเมื่อโค้ดเยอะรองรับงานระดับองค์กรได้ดีรองรับงานใหญ่ ระบบซับซ้อนได้ดี

สรุปง่าย ๆ คือ PHP ดิบเหมาะกับการ เข้าใจกลไกเบื้องหลัง ว่า Login ทำงานยังไง CRUD เชื่อมฐานข้อมูลยังไง แต่พอจะทำงานจริงหรือโปรเจกต์ที่มีหลายหน้า หลายฟีเจอร์ Framework อย่าง CodeIgniter 4 หรือ Laravel จะช่วยลดงานซ้ำซ้อนและลดโอกาสพลาดเรื่องความปลอดภัยได้มาก


06สรุป

โปรเจกต์ Login + CRUD ด้วย PHP + Bootstrap 5 เป็นจุดเริ่มต้นที่ดีมากสำหรับมือใหม่ เพราะครอบคลุมทักษะหลักที่ใช้ซ้ำในแทบทุกเว็บแอป ทั้งการเชื่อมต่อฐานข้อมูล การยืนยันตัวตน และการจัดการข้อมูลพื้นฐาน แต่สิ่งสำคัญที่อยากให้จำไว้คือ อย่าก๊อปโค้ดจาก Tutorial ที่ไม่มี prepared statement หรือไม่ hash รหัสผ่าน เพราะนิสัยตอนเริ่มต้นมักติดตัวไปจนถึงงานจริง



PHP CI MANIA - PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้ม  
http://www.phpcodemania.com