Laravel Livewire เป็นเครื่องมือช่วยในการพัฒนาเว็บแอปพลิเคชันแบบ Real-time โดยใช้ภาษา PHP และฐานข้อมูล MySQL หรือ PostgreSQL เป็นพื้นฐาน โดย Livewire ใช้เทคโนโลยี Websockets ในการสื่อสารกับฝั่ง Client ซึ่งทำให้เว็บแอปพลิเคชันที่พัฒนาขึ้นมีประสิทธิภาพและความเร็วในการโหลดหน้าเพจ ตลอดจนการแสดงผลข้อมูลแบบ Real-time ได้

ในบทความนี้เราจะมาเรียนรู้การใช้งาน Laravel Livewire ในการสร้างแอปพลิเคชัน CRUD ซึ่งเป็นการจัดการข้อมูลเบื้องต้น ที่มีประโยชน์ในการพัฒนาเว็บแอปพลิเคชันในหลายๆ แง่มุม

ติดตั้ง Laravel Livewire

เริ่มต้นด้วยการติดตั้ง Laravel Livewire ผ่านคำสั่ง Composer ดังนี้

composer require livewire/livewire

หลังจากติดตั้งเสร็จแล้ว ให้เปิดไฟล์ config/app.php แล้วเพิ่ม Provider และ Aliases ดังนี้

สร้าง Model และ Migration

เราจะใช้ Model เพื่อเข้าถึงข้อมูลในฐานข้อมูล และ Migration เพื่อสร้างตารางและฟิลด์ที่จำเป็นในการจัดการข้อมูล

สร้าง Model ด้วยคำสั่ง artisan ดังนี้

php artisan make:model Product --migration

หลังจากนั้นจะได้ไฟล์ app/Models/Product.php และไฟล์ Migration สำหรับตาราง Products

// config/app.php

'providers' => [
    // ...
    Livewire\\\\LivewireServiceProvider::class,
],

'aliases' => [
    // ...
    'Livewire' => Livewire\\\\Livewire::class,
],

แก้ไขไฟล์ Migration เพื่อเพิ่มฟิลด์ที่ต้องการในตาราง โดยตัวอย่างต่อไปนี้จะมีฟิลด์ name, price, และ description

// database/migrations/xxxx_xx_xx_xxxxxx_create_products_table.php

use Illuminate\\\\Database\\\\Migrations\\\\Migration;
use Illuminate\\\\Database\\\\Schema\\\\Blueprint;
use Illuminate\\\\Support\\\\Facades\\\\Schema;

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->decimal('price', 8, 2);
            $table->text('description')->nullable();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('products');
    }
}

สร้าง Livewire Component

เราจะสร้าง Livewire Component สำหรับแสดงรายการสินค้า และสร้างฟอร์มสำหรับเพิ่มและแก้ไขข้อมูลสินค้า

สร้าง Livewire Component ด้วยคำสั่ง artisan ดังนี้

php artisan make:livewire Products

หลังจากนั้นจะได้ไฟล์ app/Http/Livewire/Products.php

ให้เปิดไฟล์ app/Http/Livewire/Products.php แล้วเพิ่มโค้ดต่อไปนี้

// app/Http/Livewire/Products.php

namespace App\\\\Http\\\\Livewire;

use App\\\\Models\\\\Product;
use Livewire\\\\Component;

class Products extends Component
{
    public $products, $name, $price, $description, $product_id;
    public $isOpen = 0;

    public function render()
    {
        $this->products = Product::all();
        return view('livewire.products');
    }

    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }

    public function openModal()
    {
        $this->isOpen = true;
    }

    public function closeModal()
    {
        $this->isOpen = false;
    }

    private function resetInputFields(){
        $this->name = '';
        $this->price = '';
        $this->description = '';
        $this->product_id = '';
    }

    public function store()
    {
        $this->validate([
            'name' => 'required',
            'price' => 'required',
        ]);

        Product::updateOrCreate(['id' => $this->product_id], [
            'name' => $this->name,
            'price' => $this->price,
            'description' => $this->description
        ]);

        session()->flash('message',
            $this->product_id ? 'Product Updated Successfully.' : 'Product Created Successfully.');

        $this->closeModal();
        $this->resetInputFields();
    }

    public function edit($id)
    {
        $product = Product::findOrFail($id);
        $this->product_id = $id;
        $this->name = $product->name;
        $this->price = $product->price;
        $this->description = $product->description;

        $this->openModal();
    }

    public function delete($id)
    {
        Product::find($id)->delete();
        session()->flash('message', 'Product Deleted Successfully.');
    }
}

สร้าง View

สร้าง View สำหรับ Livewire Component ด้วยไฟล์ resources/views/livewire/products.blade.php ดังนี้

<!-- resources/views/livewire/products.blade.php -->

<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>Laravel Livewire CRUD</h2>
        </div>
        <div class="pull-right">
            <button wire:click="create()" class="btn btn-success"> Create New Product</button>
        </div>
    </div>
</div>

@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif

<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Price</th>
            <th>Description</th>
            <th width="280px">Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach($products as $product)
        <tr>
            <td>{{ $product->id }}</td>
            <td>{{ $product->name }}</td>
            <td>{{ $product->price }}</td>
            <td>{{ $product->description }}</td>
            <td>
                <button wire:click="edit({{ $product->id }})" class="btn btn-primary btn-sm">Edit</button>
                <button wire:click="delete({{ $product->id }})" class="btn btn-danger btn-sm">Delete</button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" wire:ignore.self id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ $product_id ? 'Edit Product' : 'Create Product' }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" wire:model="name" placeholder="Enter Name">
                        @error('name') <span class="text-danger">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group">
                        <label for="price">Price</label>
                        <input type="text" class="form-control" id="price" wire:model="price" placeholder="Enter Price">
                        @error('price') <span class="text-danger">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control" id="description" wire:model="description" placeholder="Enter Description"></textarea>
                        @error('description') <span class="text-danger">{{ $message }}</span>@enderror
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button wire:click.prevent="store()" class="btn btn-primary">
                    {{ $product_id ? 'Update' : 'Save' }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    window.addEventListener('closeModal', event => {
        $('#exampleModal').modal('hide');
    })
</script>

สร้าง Route

สุดท้ายเราจะสร้าง Route สำหรับ Livewire Component ผ่านไฟล์ routes/web.php ดังนี้

// routes/web.php

use App\\\\Http\\\\Livewire\\\\Products;

Route::get('/', Products::class);

สรุป

ในบทความนี้เราได้เรียนรู้การใช้งาน Laravel Livewire ในการสร้างแอปพลิเคชัน CRUD ซึ่งมีประโยชน์ในการพัฒนาเว็บแอปพลิเคชันในหลายๆ แง่มุม โดยเราได้ทำการติดตั้ง Laravel Livewire, สร้าง Model และ Migration, สร้าง Livewire Component, สร้าง View, และสร้าง Route สำหรับ Livewire Component

ต่อไปคุณสามารถพัฒนาเว็บแอปพลิเคชันแบบ Real-time ด้วย Laravel Livewire ได้อย่างสมบูรณ์ โดยใช้เทคโนโลยี Websockets ในการโต้ตอบกับผู้ใช้งานแบบ Real-time และมีประสิทธิภาพต่อการแสดงผลข้อมูลและการโหลดหน้าเพจ เป็นต้น