ตอนที่ 4: การดึงข้อมูลออกมาแสดงผล (Select Data) และจัดรูปแบบตาราง

Chalothorn Kosakul 2 กุมภาพันธ์ 2569 616 ครั้ง

ตอนที่ 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
ดึงเฉพาะคนที่ชื่อขึ้นต้นด้วย A
WHERE username LIKE 'A%'
แต่งสวย
ทำ Hover Effect เพิ่มเติม

สรุปจากครูท้ายคาบ

วันนี้เราได้ทักษะสำคัญมาก

ดึงข้อมูลจาก MySQL ได้
วนลูปแสดงหลายแถว
จัดรูปแบบเป็นตาราง

ตอนนี้ระบบของเราเริ่มเหมือนของจริงแล้ว ตอนที่ 5: การแก้ไขข้อมูล (Update Data) และการส่งค่า ID ผ่าน URL

ใครทำถึงตรงนี้ได้ ครูบอกเลยว่าพร้อมทำโปรเจกต์จบได้สบายครับ