Update Status Data dengan Toggle Switch di Laravel Livewire
- 1. Tutorial Membuat Load More on Scroll atau Infinite Scroll dengan Laravel Livewire 2. Cara Mudah Membuat Live Search dengan Laravel Livewire 3. Pagination dan Tambah Data Tanpa Reload dengan Laravel Livewire 4. Tutorial Membuat Wizard Form dengan Laravel 8 Livewire 5. Tutorial CRUD Laravel 8 dengan Jetstream Livewire 6. Membuat Dynamic Form dengan Laravel 8 dan Livewire 7. Laravel Livewire: Membuat Fitur Upload Multiple Image dengan Preview 8. Menggunakan Datatables di Laravel 8 dan Livewire 9. Update Status Data dengan Toggle Switch di Laravel Livewire
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.
Laravel Livewire Toggle Switch
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. 🥂 👨💻
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66464 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 31938 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 30570 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28371 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27622 views