Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 7: การแสดงผลข้อมูลจาก Database

Livewire ช่วยให้การดึงข้อมูลจากฐานข้อมูล (Database) มาแสดงในหน้าเว็บทำได้ง่ายขึ้น โดยการผสานการทำงานระหว่าง Component และ View ทำให้ข้อมูลสามารถอัปเดตได้ทันทีที่มีการเปลี่ยนแปลง การดึงข้อมูลจากฐานข้อมูลเหมาะสำหรับการสร้างตารางแสดงข้อมูล รายการสินค้า รายการผู้ใช้ หรือข้อมูลอื่น ๆ ที่ต้องการการอัปเดตแบบ Real-Time

ขั้นตอนการแสดงผลข้อมูลจาก Database ด้วย Livewire

สร้าง Model และ Migration ก่อนอื่นต้องมี Model และ Migration สำหรับฐานข้อมูลที่ต้องการ ในตัวอย่างนี้ เราจะใช้ตาราง products เพื่อเก็บข้อมูลสินค้าดังนี้:

1
php artisan make:model Product -m

จากนั้นเปิดไฟล์ Migration (database/migrations/xxxx_xx_xx_create_products_table.php) และเพิ่มฟิลด์ตัวอย่าง:

1
2
3
4
5
6
7
8
9
public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('price', 8, 2);
        $table->timestamps();
    });
}

หลังจากแก้ไขแล้ว ให้รันคำสั่งเพื่อสร้างตาราง:

1
php artisan migrate

สร้าง Component สำหรับการแสดงข้อมูล (ProductList) ใช้คำสั่งต่อไปนี้เพื่อสร้าง Component ProductList:

1
php artisan make:livewire ProductList

ดึงข้อมูลจาก Database ใน Component (ProductList.php) เปิดไฟล์ ProductList.php และเพิ่มการใช้ Model Product จากนั้นเขียนโค้ดเพื่อดึงข้อมูลสินค้าทั้งหมดจากฐานข้อมูล:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
namespace App\Http\Livewire;
 
use App\Models\Product;
use Livewire\Component;
 
class ProductList extends Component
{
    public $products;
 
    public function mount()
    {
        $this->products = Product::all();
    }
 
    public function render()
    {
        return view('livewire.product-list');
    }
}

mount ใช้สำหรับดึงข้อมูลเมื่อ Component ถูกสร้างขึ้นมา $this->products = Product::all(); ใช้ดึงข้อมูลสินค้าทั้งหมดจากตาราง products

สร้าง Blade View สำหรับแสดงข้อมูล (product-list.blade.php) เปิดไฟล์ product-list.blade.php และเขียน HTML เพื่อแสดงรายการสินค้าที่ดึงมาในรูปแบบตาราง:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div>
    <h2>Product List</h2>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($products as $product)
                <tr>
                    <td>{{ $product->id }}</td>
                    <td>{{ $product->name }}</td>
                    <td>${{ $product->price }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

ใช้คำสั่ง @foreach เพื่อแสดงรายการสินค้าทั้งหมดที่ดึงจากฐานข้อมูลในรูปแบบตาราง

การแสดง Component ใน Blade Template สุดท้าย ให้เพิ่ม Component นี้ลงใน Blade Template ที่ต้องการ เช่น home.blade.php:

1
@livewire('product-list')
  1. ผลลัพธ์ที่ได้ เมื่อผู้ใช้เข้าสู่หน้า home.blade.php จะเห็นตารางแสดงข้อมูลสินค้าจากฐานข้อมูล ซึ่งจะอัปเดตอัตโนมัติเมื่อข้อมูลในฐานข้อมูลเปลี่ยนแปลงผ่านการใช้ Livewire

การนำไปใช้งาน

การดึงข้อมูลจากฐานข้อมูลเพื่อแสดงผลใน Livewire เหมาะสำหรับ:

  • แสดงรายการสินค้าหรือรายการข้อมูลแบบ Dynamic ที่ต้องการการอัปเดตแบบ Real-Time
  • ใช้ในการสร้าง Dashboard ที่แสดงข้อมูลเชิงสถิติหรือรายการล่าสุด
  • ใช้สร้างแอปพลิเคชันที่ต้องการแสดงผลข้อมูลจำนวนมากในรูปแบบตาราง

Livewire ทำให้การเชื่อมโยงระหว่างข้อมูลในฐานข้อมูลและ UI ทำได้ง่ายและรวดเร็ว สามารถสร้างหน้าที่แสดงข้อมูลแบบ Interactive โดยไม่ต้องรีเฟรชหน้าเว็บ