ตอนที่ 4: การดึงข้อมูลออกมาแสดงผล (Select Data) และจัดรูปแบบตาราง
สวัสดีครับนักเรียน มาถึงตอนนี้ความสนุกเริ่มมาแล้ว! ตอนที่ 3 เราบันทึกข้อมูลลงฐานข้อมูลได้ แต่ถ้าบันทึกได้อย่างเดียวแล้วมองไม่เห็นข้อมูล ก็เหมือนเขียนการบ้านส่งครูแต่เปิดดูไม่ได้ใช่ไหมครับ
บทนี้เราจะพาข้อมูลที่นอนอยู่ใน MySQL ออกมาโชว์บนหน้าเว็บเป็นตารางสวย ๆ เหมือนระบบสมาชิกจริงที่เราเห็นตามเว็บไซต์ทั่วไป
วัตถุประสงค์ของบทนี้
- เข้าใจคำสั่ง SQL
SELECT - รู้จัก
mysqli_fetch_assoc() - ใช้
while loopแสดงข้อมูลหลายแถว - จัดรูปแบบด้วย HTML + CSS
- มองภาพการทำงานแบบมืออาชีพ
1. ทำความรู้จักคำสั่ง SELECT
ครูชอบอธิบายว่า
- INSERT = ใส่เอกสารเข้าตู้
- SELECT = เปิดตู้มาดูเอกสาร
ตัวอย่างที่ใช้บ่อย:
SELECT * FROM users→ ดึงทุกคอลัมน์ ทุกแถวSELECT id, username FROM users ORDER BY id DESC→ ดึงเฉพาะบางคอลัมน์ และเรียงจากใหม่ไปเก่า
* คำแนะนำจากครู งานจริงไม่ควรใช้ * เสมอ ควรเลือกเฉพาะคอลัมน์ที่จำเป็น จะเร็วกว่า
2. สร้างหน้าแสดงรายชื่อ (display_users.php)
โค้ดชุดนี้คือรูปแบบมาตรฐานที่ใช้แทบทุกโปรเจกต์
<?php
require_once 'db_config.php';
$sql = "SELECT * FROM users ORDER BY created_at DESC";
$result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>รายชื่อสมาชิก</title>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #ddd; }
th { background: #f4f4f4; }
tr:nth-child(even) { background: #fafafa; }
tr:hover { background: #f1f7ff; }
</style>
</head>
<body>
<h2>รายชื่อสมาชิกทั้งหมด</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>ชื่อผู้ใช้</th>
<th>อีเมล</th>
<th>วันที่สมัคร</th>
</tr>
</thead>
<tbody>
<?php
if (mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>".$row['id']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td>".$row['email']."</td>";
echo "<td>".date('d/m/Y H:i',
strtotime($row['created_at']))."</td>";
echo "</tr>";
}
} else {
echo "<tr>
<td colspan='4' style='text-align:center'>
ไม่พบข้อมูล
</td></tr>";
}
?>
</tbody>
</table>
<?php mysqli_close($conn); ?>
</body>
</html>
3. อธิบายแบบเห็นภาพ
- mysqli_num_rows()
เหมือนนับจำนวนเอกสารในตู้ ถ้าเป็น 0 → ให้บอกว่า “ไม่พบข้อมูล” - mysqli_fetch_assoc()
ดึงข้อมูลออกมาทีละแถว ในรูปแบบ Array เช่น$row['username'] - while loop
วนทำซ้ำจนกว่าข้อมูลจะหมด
* จุดที่เด็กงงบ่อย fetch_assoc ไม่ได้ดึงมาทีเดียวทั้งหมด แต่มาทีละแถว → เลยต้องใช้ while
เทคนิคจากประสบการณ์ครู
- แปลงวันที่ด้วย
date()จะอ่านง่ายกว่า - ควรมีเงื่อนไข “ไม่พบข้อมูล” เสมอ
- จัด CSS ให้ดูง่าย จะช่วยให้โปรเจกต์ดูมืออาชีพ
แบบฝึกหัด
- ทำลำดับที่เอง
ใช้ตัวแปร$i = 1;แล้วแสดง 1,2,3 แทน id - ฝึก WHERE
ดึงเฉพาะคนที่ชื่อขึ้นต้นด้วย AWHERE username LIKE 'A%' - แต่งสวย
ทำ Hover Effect เพิ่มเติม
สรุปจากครูท้ายคาบ
วันนี้เราได้ทักษะสำคัญมาก
- ดึงข้อมูลจาก MySQL ได้
- วนลูปแสดงหลายแถว
- จัดรูปแบบเป็นตาราง
ตอนนี้ระบบของเราเริ่มเหมือนของจริงแล้ว ตอนที่ 5: การแก้ไขข้อมูล (Update Data) และการส่งค่า ID ผ่าน URL
ใครทำถึงตรงนี้ได้ ครูบอกเลยว่าพร้อมทำโปรเจกต์จบได้สบายครับ