สร้าง Component แรก

ขั้นตอนการสร้าง Component แรก

1. ใช้คำสั่ง Artisan เพื่อสร้าง Component เริ่มต้นสร้าง Component แรกโดยใช้คำสั่ง make:livewire ตามด้วยชื่อ Component ที่ต้องการสร้าง ตัวอย่างเช่น:

php artisan make:livewire Counter

คำสั่งนี้จะสร้างไฟล์ใหม่ 2 ไฟล์:

• Counter.php ในโฟลเดอร์ app/Http/Livewire - จัดการ Logic ของ Component
• counter.blade.php ในโฟลเดอร์ resources/views/livewire - จัดการ UI และการแสดงผล

การเขียนโค้ดใน Component (Counter.php) ในไฟล์ Counter.php เราจะสร้างตัวแปร $count เพื่อเก็บค่าจำนวนที่ต้องการนับ และเพิ่มฟังก์ชันสำหรับการเพิ่มหรือลดค่าจำนวนนี้:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

การเขียน UI ใน Blade View (counter.blade.php) ในไฟล์ counter.blade.php ให้เขียน HTML ที่แสดงค่า $count พร้อมปุ่มสำหรับการเพิ่มและลดค่าโดยเรียกใช้ฟังก์ชัน increment และ decrement:

<div>
    <h1>Counter: {{ $count }}</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>

• wire:click="increment" ใช้สำหรับเรียกฟังก์ชัน increment เมื่อผู้ใช้คลิกปุ่ม
• wire:click="decrement" ใช้สำหรับเรียกฟังก์ชัน decrement เมื่อผู้ใช้คลิกปุ่ม

การแสดง Component ใน Blade Template เพื่อเรียกใช้ Component นี้ ให้เพิ่มคำสั่ง @livewire ใน Blade Template ที่ต้องการ ตัวอย่างเช่นใน home.blade.php:

@livewire('counter')

เมื่อเรียกใช้หน้าเว็บ ระบบจะแสดง Component Counter ที่มีการอัปเดตค่า $count แบบ Real-Time เมื่อผู้ใช้กดปุ่มเพิ่มหรือลด

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

Component Counter เป็นตัวอย่างพื้นฐานที่แสดงให้เห็นถึงการทำงานแบบ Interactive ของ Livewire ซึ่งสามารถนำไปประยุกต์ใช้ได้ในหลายกรณี เช่น:

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

Livewire ช่วยให้การพัฒนา UI ที่โต้ตอบได้เป็นเรื่องง่าย โดยไม่ต้องเขียน JavaScript เพิ่มเติม ทำให้การพัฒนา Web Application เป็นไปอย่างรวดเร็วและสะดวก