Dev to webs {Coding…}

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

บทที่ 11: การใช้ Dynamic Data – ทำงานกับข้อมูลที่เปลี่ยนแปลงได้

Dynamic Data คือข้อมูลที่สามารถเปลี่ยนแปลงได้ตามการโต้ตอบของผู้ใช้หรือการทำงานของระบบ เช่น การกรอกฟอร์ม การเลือกตัวเลือก หรือการดึงข้อมูลแบบ Real-Time Livewire ทำให้การจัดการ Dynamic Data เป็นเรื่องง่ายผ่านการใช้ Two-Way Data Binding และการเรียกฟังก์ชันแบบ Dynamic เพื่อจัดการข้อมูล

การทำงานกับ Dynamic Data มีความสำคัญในการสร้างแอปพลิเคชันที่ต้องการความโต้ตอบแบบทันที เช่น การกรองข้อมูล การคำนวณ หรือการอัปเดตส่วนต่าง ๆ ของหน้าเว็บโดยไม่ต้องโหลดใหม่

ตัวอย่างการใช้งาน Dynamic Data

การสร้าง Component สร้าง Component ชื่อ DynamicList เพื่อแสดงรายการข้อมูลที่ผู้ใช้สามารถเพิ่มหรือกรองได้:

    1
    php artisan make:livewire DynamicList

    จัดการข้อมูลใน Component (DynamicList.php) เปิดไฟล์ DynamicList.php และสร้างตัวแปร $items สำหรับเก็บข้อมูล และ $search สำหรับเก็บคำค้นหาที่ผู้ใช้ป้อน:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <?php
     
    namespace App\Http\Livewire;
     
    use Livewire\Component;
     
    class DynamicList extends Component
    {
        public $items = ['Apple', 'Banana', 'Orange'];
        public $search = '';
     
        public function addItem($item)
        {
            if (!empty($item)) {
                $this->items[] = $item;
            }
        }
     
        public function getFilteredItemsProperty()
        {
            return collect($this->items)->filter(function ($item) {
                return str_contains(strtolower($item), strtolower($this->search));
            })->values()->toArray();
        }
     
        public function render()
        {
            return view('livewire.dynamic-list');
        }
    }
    • $items เก็บรายการข้อมูล
    • $search เก็บคำค้นหาจากผู้ใช้
    • getFilteredItemsProperty ใช้ฟังก์ชัน Computed Property เพื่อกรองข้อมูลตามคำค้นหา

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div>
        <h2>Dynamic List</h2>
     
        <!-- ค้นหา -->
        <input type="text" wire:model="search" placeholder="Search items...">
     
        <!-- แสดงรายการ -->
        <ul>
            @foreach ($this->filteredItems as $item)
                <li>{{ $item }}</li>
            @endforeach
        </ul>
     
        <!-- เพิ่มรายการ -->
        <input type="text" id="newItem" placeholder="Add new item...">
        <button wire:click="addItem(document.getElementById('newItem').value)">Add</button>
    </div>
    • wire:model="search" เชื่อมข้อมูลคำค้นหากับตัวแปร $search แบบ Two-Way Data Binding
    • wire:click เรียกฟังก์ชัน addItem เพื่อเพิ่มรายการใหม่
    • ใช้ $this->filteredItems สำหรับแสดงรายการที่กรองแล้ว

    การแสดงผลใน Blade Template เพิ่ม Component นี้ใน Blade Template เช่น home.blade.php:

    1
    @livewire('dynamic-list')
    1. ผลลัพธ์ที่ได้
      • ผู้ใช้สามารถกรอกคำค้นหาในช่อง Search items... เพื่อกรองรายการ
      • ผู้ใช้สามารถเพิ่มรายการใหม่ในช่อง Add new item... และกดปุ่ม “Add” เพื่อเพิ่มรายการใหม่ใน $items
      • รายการจะอัปเดตแบบทันทีโดยไม่ต้องโหลดหน้าใหม่

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

    การทำงานกับ Dynamic Data เหมาะสำหรับ:

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

    Livewire ช่วยให้การจัดการข้อมูลที่เปลี่ยนแปลงได้ง่ายขึ้น และลดความซับซ้อนของการใช้ JavaScript ในการควบคุม UI

    ประโยชน์ของ Dynamic Data ใน Livewire

    • ลดการโหลดหน้าใหม่ ทำให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น
    • ง่ายต่อการจัดการข้อมูลแบบ Real-Time
    • ช่วยให้โค้ดมีความกระชับและอ่านง่าย