Dev to webs {Coding…}

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

บทที่ 2: การติดตั้งและตั้งค่า Livewire

ในบทนี้เราจะเรียนรู้วิธีการติดตั้งและตั้งค่า Livewire ในโปรเจค Laravel เพื่อให้พร้อมใช้งาน Livewire Component ต่าง ๆ ได้ Livewire มีการติดตั้งที่ง่ายและสะดวกสำหรับการใช้งานในโครงการที่ต้องการสร้าง UI แบบ Interactive โดยไม่จำเป็นต้องใช้ JavaScript เพิ่มเติมมากนัก

การติดตั้ง Livewire

ขั้นตอนการติดตั้ง Livewire บน Laravel มีดังนี้:

  1. ติดตั้งผ่าน Composer ใช้คำสั่งต่อไปนี้เพื่อเพิ่ม Livewire เข้าสู่โปรเจคของคุณ:
composer require livewire/livewire

2.การตั้งค่า Blade Directives Livewire จะใช้ Blade Directives ของ Laravel เพื่อฝัง Component ลงใน Blade Template โดยการเรียกใช้ @livewireScripts และ @livewireStyles ในหน้า Blade Template หลัก (เช่น resources/views/layouts/app.blade.php) ตามตัวอย่าง:

<!-- ที่ด้านในของ <head> -->
@livewireStyles

<!-- ที่ด้านท้ายของ <body> -->
@livewireScripts

3. การสร้าง Component ด้วย Artisan Livewire มีคำสั่งสำหรับสร้าง Component ให้พร้อมใช้งานได้อย่างรวดเร็ว:

php artisan make:livewire ExampleComponent

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

  • ExampleComponent.php – อยู่ในโฟลเดอร์ app/Http/Livewire
  • example-component.blade.php – อยู่ในโฟลเดอร์ resources/views/livewire

4. โครงสร้างเริ่มต้นของ Component เมื่อสร้าง Component ขึ้นมาแล้ว คุณสามารถเขียนโค้ดและทดสอบได้ทันที ตัวอย่างเช่น เพิ่มข้อความใน ExampleComponent.php:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ExampleComponent extends Component
{
    public function render()
    {
        return view('livewire.example-component');
    }
}

ในไฟล์ example-component.blade.php ให้เพิ่มโค้ด HTML ง่าย ๆ เพื่อแสดงข้อความ:

<div>
    <h1>Welcome to Livewire Component!</h1>
</div>

5. การใช้งาน Component ใน Blade Template เมื่อติดตั้งและตั้งค่าเรียบร้อย คุณสามารถเรียกใช้งาน Component ได้ในไฟล์ Blade Template โดยใช้คำสั่ง @livewire ตามตัวอย่าง:

@livewire('example-component')

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

หลังจากติดตั้งและตั้งค่า Livewire เรียบร้อยแล้ว คุณสามารถสร้าง Component ต่าง ๆ เพื่อให้ UI สามารถโต้ตอบได้ ตัวอย่างเช่น:

  • ฟอร์มกรอกข้อมูลที่สามารถตรวจสอบข้อมูลได้ทันที
  • การโหลดข้อมูลแบบ Dynamic ในหน้าที่ไม่ต้องโหลดใหม่
  • สร้างระบบการค้นหาข้อมูลแบบ Real-Time

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