Update Status Data dengan Toggle Switch di Laravel Livewire

Admin・ 31 Oktober 2021

8 min read ・ 5633 views

Laravel Livewire Toggle Switch - Halo teman-teman coderrs 👋 Di artikel ini saya akan share artikel yang akan membahas tentang cara update status data menggunakan toggle switch dan tanpa reload halaman di laravel dan livewire. Dengan adanya fitur seperti ini, tentu akan sangat membantu ketika kita ingin memperbarui status data seperti status user active atau inactive. Sehingga untuk mengubah status data, kita tidak perlu membuka halaman edit. Di halaman index, kita bisa langsung mengubah status data user dengan klik toggle switch dan tanpa reload halaman.

Di artikel ini, saya akan simulasikan untuk mengubah status user active atau inactive. Untuk lebih jelasnya, yuk simak step by step menggunakan toggle switch di laravel livewire di bawah ini. 👇

Step 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-livewire-toggle-switch

//via Composer
composer create-project laravel/laravel laravel-livewire-toggle-switch

Pada langkah yang pertama ini, kita akan menginstall laravel (saat ini versi 8) yang akan kita coba untuk implementasi atau menggunakan toggle switch di laravel dan livewire untuk mengubah status user. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-livewire-toggle-switch.

Step 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_livewire_toggle_switch
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk menyimpan data-data sample yang akan kita gunakan pada percobaan menggunakan toggle switch di laravel dan livewire untuk mengubah status user. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_livewire_toggle_switch. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Step 3: Migration & Factory

database/migrations/ _create_users_table.php

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->boolean('isActive');
        $table->timestamps();
    });
}

Kemudian, buka file user migration dan tambahkan column isActive  dengan type data boolean seperti kode di atas.

php artisan migrate

Jika sudah menambahkan column isActive, selanjutnya jalankan perintah php artisan migrate untuk memigrasi file-file migration ke database.

database/factories/UserFactory.php

public function definition()
{
    return [
        'name' => $this->faker->name(),
        'email' => $this->faker->unique()->safeEmail(),
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
        'isActive' => false
    ];
}

Oke. Sekarang mari kita generate data dummy untuk table users. Buka file UserFactory.php, tambahkan isActive dan bernilai false.

php artisan tinker
User::factory()->count(10)->create()

Setelah menambahkan isActive di UserFactory.php, sekarang kita bisa eksekusi menggunakan tinker. Buka terminal, kemudian jalankan perintah-perintah seperti di atas secara berurutan. Dengan perintah User::factory()->count(10)->create(), kita akan generate data dummy user sebanyak 10 data.

Step 4: Setup Route

Route::get('/', function () {
    return view('welcome',[
        'users' => App\Models\User::all()
    ]);
});

Pada step keempat ini, kita hanya perlu memperbarui route yang ada, yaitu menambahkan data dari model User.

Step 5: Setup View

welcome.blade.php

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <title>Laravel Livewire Toggle Switch</title>
    </head>
    <body>
        <div class="container my-5">
            <h2 class="fs-4 fw-bold text-center">Laravel Livewire Toggle Switch</h2>
            <div class="row">
                <div class="col-md-8 offset-md-2">
                    <table class="table text-center">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($users as $key => $user)
                            <tr>
                                <th scope="row">{{ ++$key }}</th>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>TBA</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4">Data not Found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    </body>
</html>

Kemudian, buka file welcome.blade.php. Ubah kode yang ada dengan kode seperti di atas. Dengan kode di atas, kita hanya akan menampilkan table yang berisikan data-data dari table users.

Step 6: Membuat Livewire Component

composer require livewire/livewire

Pada step keenam ini, kita perlu menginstall livewire. Untuk menginstall livewire, kita bisa menjalankan perintah seperti di atas.

...
    @livewireStyles
</head>
<body>
    ...
 
    @livewireScripts
</body>
</html>

Setelah menginstall livewire, tambahkan @livewireStyles di dalam tag head dan @livewireScripts sebelum akhiran tag body.

php artisan make:livewire UserStatus

Selanjutnya, kita bisa generate livewire component dengan perintah seperti di atas.

Component livewire yang telah digenerate dengan perintah di atas, akan terletak di direktori;

CLASS: app/Http/Livewire/UserStatus.php
VIEW:  resources/views/livewire/user-status.blade.php

Livewire/UserStatus.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Database\Eloquent\Model;

class UserStatus extends Component
{
    public Model $model;
    
    public $field;

    public $isActive;

    public function mount()
    {
        $this->isActive = (bool) $this->model->getAttribute($this->field);
    }

    public function updating($field, $value)
    {
        $this->model->setAttribute($this->field, $value)->save();

    }

    public function render()
    {
        return view('livewire.user-status');
    }
}

Kemudian, buka file UserStatus.php dan ubah kodenya menjadi seperti kode di atas.

livewire/user-status.blade.php

<div class="form-check form-switch">
  <input class="form-check-input"  wire:model.lazy="isActive" type="checkbox" role="switch" @if($isActive) checked @endif>
</div>

Selanjutnya, pada file user-status.blade.php, masukkan kode seperti di atas. Kode di atas merupakan component toggle switch dari bootstrap yang kita tambahkan dirty state wire:model.lazy dan kita kasih kondisi jika $isActive bernilai 1 atau true maka akan menambahkan attribute checked.

welcome.blade.php

<td>TBA<td>

Sekarang, buka file welcome.blade.php dan cari kode seperti di atas, lalu ganti dengan kode seperti di bawah ini.

<td>
    @livewire('user-status', ['model' => $user, 'field' => 'isActive'], key($user->id))
</td>

Dengan kode seperti di atas, kita akan memanggil component livewire user-status.blade.php yang digenerate sebelumnya, dan me-parsing model $user dan field isActive dan dengan paramenter id dari data user tersebut.

Step 7: Testing

Baiklah, setelah melalui step by step untuk membuat atau menggunakan toggle switch untuk mengubah status data di laravel livewire, sekarang adalah waktunya testing. Silahkan jalankan laravel project, lalu buka project pada browser. Coba klik toggle switch dan lihatlah status user tersebut di table users, maka hasilnya kita sudah berhasil memperbarui status user dengan toggle switch tanpa reload halaman.

Demikianlah artikel tentang update status data dengan toggle switch tanpa reload halaman di laravel livewire kali ini. Semoga artikel ini bisa bermanfaat, selamat mencoba dan sampai jumpa di artikel berikutnya. 👋

Happy Coding. 🥂 👨‍💻