PHP & MySQLi ดึงข้อมูลมาแสดงบนหน้าเวป [สำหรับมือใหม่มาก ๆ ]

จุดประสงค์หลักของบทความนี้คือ ต้องการแสดงการใช้ PHP & MySQLi เพื่อสำหรับผู้ที่เริ่มต้นศึกษาได้เข้าใจการดึงข้อมูลมาแสดงบนหน้าเวปอย่างง่าย ๆ

ความรู้พื้นฐานคือ

HTML (เน้น <table>)
CSS (สำหรับตกแต่งตาราง)
PHP (เช่น fetch_assoc() while-loop ความเข้าใจใน array รวมไปถึงคำสั่งร่วมกับ MySQLi เป็นต้น)
SQL (เช่น คำสั่งในการแสดงข้อมูลนั่นคือ SELECT * FROM ชื่อตาราง )

เครื่องมือที่ใช้งาน

Text Editor เช่น VS Code
XAMPP

แต่สำหรับใครที่ยังไม่มีพื้นฐานเหล่านี้ไม่แม่นพอก็ไม่ไปไร เราค่อย ๆ เรียนรู้ไปด้วยกัน

สมมุติว่าเรามีข้อมูลของเมนูกาแฟจำนวนนึงซึ่งอยากจะให้แสดงออกมาในรูปแบบตาราง

1. สร้างตารางและข้อมูลชื่อเมนูและราคาเมนูในที่นี้จะสร้างตารางที่ชื่อ menu และสร้าง database เป็นชื่อ demo โดยใช้คำสั่ง SQL ดังนี้

--
-- Database: `demo`
-- สมมุติว่าเรามี database ที่สร้างไว้แล้วให้ชื่อว่า demo
--

-- --------------------------------------------------------

--
-- Table structure for table `menu`
-- สร้างตารางชื่อ menu ดังด้านล่าง
--


CREATE TABLE `menu` (
    `ID` int(11) NOT NULL,
    `name` varchar(30) NOT NULL,
    `prices` int(11) NOT NULL
) ENGINE= InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `menu`
-- เมื่อมีตาราง ก็ทำการ insert ข้อมูลต่าง ๆ ลงไป 
--

INSERT INTO `menu` (`ID`, `name`, `prices`) VALUES
(1, 'Espresso', '45'),
(2, 'Amaricano', '55'),
(3, 'Hot Cappuccino', '55'),
(4, 'Iced Cappuccino', '65'),
(5, 'Hot Latte', '55'),
(6, 'Iced Latte', '65'),
(7, 'Hot Mocca', '55'),
(8, 'Iced Mocca', '65'),
(9, 'Hot Matcha Green Tea', '55'),
(10, 'Iced Matcha Green Tea', '65');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `menu`
-- กำหนดให้ ID เป็น Primary Key คือไม่ให้ข้อมูลมันนับซ้ำกัน
--

ALTER TABLE `menu` 
    ADD PRIMARY KEY (`ID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `menu`
-- ให้ ID มีค่านับเพิ่มขึ้น
--

ALTER TABLE `menu`
    MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

หรือจะสามารถดาวน์โหลดไฟล์ menu.sql แล้ว import ลงบน phpmyadmin ได้ที่ Link

เอาล่ะตอนนี้เรามีข้อมูลที่ database เรียบร้อยแล้วดังรูปตัวอย่าง

ต่อไปเราจะดึงข้อมูลเหล่านี้ขึ้นหน้าเวปที่เราต้องการ

2. เชื่อมต่อ database

เมื่อสร้างไฟล์ที่ชื่อ index.php แล้วก็สร้างคำสั่งในการเชื่อมต่อกับ database (ในที่นี้ชื่อ database ที่เราต้องการเชื่อมต่อคือ demo)

<?php 
 // โดยที่ $ชื่อตัวแปร = new mysqli($servername, $username, $password, $dbname)
 $connect = new mysqli('localhost', 'root', '', 'demo');

 // ทำการ check connection ว่าถูกต้องหรือไม่
  if ($connect->connect_error) {
        die("Something wrong.: " . $connect->connect_error);
   }

?>

3. ทำการดึงข้อมูลที่ต้องการมาแสดงไว้ที่ตาราง

ในที่นี้จะเลือกข้อมูลทั้งหมดโดยเราทราบดีว่าใน SQL จะใช้ SELECT * FROM ชื่อตารางดังนั้นจึงเขียนในรูปแบบนี้

<?php 
$sql = "SELECT * FROM menu";
$result = $connect->query($sql);
?>

4. บรรทัดต่อมาเขียน HTML ในรูปแบบดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>

เอาล่ะตอนนี้เราจะ code ทั้งหมดที่เราเขียนออกมาแบบนี้

<?php 
    // Create connection
    $connect = new mysqli('localhost', 'root', '', 'demo');

    // Check Connection

    if ($connect->connect_error) {
        die("Something wrong.: " . $connect->connect_error);
      }

    $sql = "SELECT * FROM menu";
    $result = $connect->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container"></div>
</body>
</html>

5. สร้างตาราง

จาก code ด้านบนทำการ create หัวข้อ <h1> และตาราง <table> ภายใน class="container" ดังนี้

<div class="container">
        <h1>ข้อมูลราคาเมนูของร้าน</h1>
        <table>
            <thead>
                <tr>
                    <td width="5%">#</td>
                    <td width="25%">ชื่อเมนู</td>
                    <td width="25%">ราคา (บาท) </td>
                </tr>
            </thead>
            <tbody>
             <!-- ข้อมูลที่เราจะทำการ fetch จากฐานข้อมูล -->
            </tbody>
        </table>

สร้างตารางคร่าว ๆ ก่อนแล้วเดี๋ยวค่อยเอา css มาตกแต่งภายหลัง ซึ่งตอนนี้เราก็ได้ตารางส่วนแสดงหัวข้อของแต่ละ column กันไปแล้ว ต่อไปก็จะดึงข้อมูลในฐานข้อมูลที่ต้องการแสดงออกมาใส่ตารางที่เรากำหนดไว้แล้ว

6. ดึงข้อมูลมาแสดงที่หน้าเวป

เราจะทำการดึงข้อมูลลงในส่วนของ <tbody>โดยข้อมูลที่เราต้องการจะเอามาแสดงประกอบไปด้วย

ลำดับข้อมูลหรือ ID
รายชื่อเมนูต่าง ๆ หรือ name
ราคาของแต่ละเมนู หรือ prices โดยจะเรียกใช้ผ่าน fetch_assoc() เนื่องจากข้อมูลมีหลายแถวจึงใช้ while-loop เขียนในรูปแบบดังนี้

<tbody>
 <?php while($row = $result->fetch_assoc()): ?>
  <tr>
   <td><?php echo $row['ID']; ?></td>
   <td class="name">
    <?php echo $row['name']; ?>
   </td>
   <td><?php echo $row['prices']; ?></td>
   </tr>
 <?php endwhile ?>
</tbody>

ขออธิบาย code ด้านบนสักนิดนึงคือ $result->fetch_assoc()เป็นการดึงข้อมูล (fetch) ในแถวหรือ row โดยจะเก็บข้อมูลในรูปแบบ array โดยเก็บไว้ที่ $row ดังนั้นแล้วเวลาที่เราจึงประกาศข้อมูลเป็น $row["ชื่อข้อมูล"]

ตอนนี้สามารถนำข้อมูลทั้งหมดมาแสดงที่หน้าเวปเป็นที่เรียบร้อยแล้ว

สรุป code ที่เขียนบน index.phpเป็นดังนี้

<?php 
    // Create connection
    $connect = new mysqli('localhost', 'root', '', 'demo');

    // Check Connection

    if ($connect->connect_error) {
        die("Something wrong.: " . $connect->connect_error);
      }

    $sql = "SELECT * FROM menu";
    $result = $connect->query($sql);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>ข้อมูลราคาเมนูของร้าน</h1>
        <table>
            <thead>
                <tr>
                    <td width="5%">#</td>
                    <td width="25%">ชื่อเมนู</td>
                    <td width="25%">ราคา (บาท) </td>
                </tr>
            </thead>
            <tbody>
                <?php while($row = $result->fetch_assoc()): ?>
                    <tr>
                        <td><?php echo $row['ID']; ?></td>
                        <td class="name">
                         <?php echo $row['name'];?>
                        </td>
                        <td><?php echo $row['prices']; ?></td>
                    </tr>
                <?php endwhile ?>
            </tbody>
        </table>

    </div>
</body>
</html>

แต่ข้อมูลที่ได้ก็ยังดูไม่สวยเท่าไหร่เราจึงใช้ css เข้ามาทำให้ข้อมูลมีลักษณะออกมาเป็นตารางที่สวยงาม

7. ตกแต่งตารางให้มีความสวยงาม

* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F2F3F4;
    color: #273746;
}

.container {
    margin: 20px auto;
    padding: 0;
    width: 980px;
}

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
}

table {
    width: 100%;
    /* ผสาน border ระหว่าง table กับ td  */
    border-collapse: collapse;
}

table,
td {
    border: 1px solid #5D6D7E;
    text-align: center;
}

thead {
    background-color: #273746;
    color: #BDC3C7;
}

/* Striped Tables: ทำไฮไล์ในการแบ่ง row  */
tr:nth-child(even) {
    background-color: #BDC3C7;
}

td {
    height: 30px;
    vertical-align: center;
}

.name {
    text-align: left;
    padding-left: 16px;
}