Jika Anda menggunakan Livewire Laravel maka Anda tidak perlu menyertakan pustaka eksternal atau menulis script untuk mendeteksi apakah pengguna sedang online atau offline.
Livewire telah menyediakan sebuah utilitas untuk melakukan pengecekan tindakan offline. Anda hanya perlu menambahkannya ke elemen HTML yang akan terpengaruh sesuai dengan status pengguna.
Dalam tutorial ini, saya akan menunjukkan bagaimana Anda dapat mendeteksi apakah pengguna sedang online atau offline dan menampilkan peringatan menggunakan Livewire di laravel 6, laravel 7, laravel 8, laravel 9, dan laravel 10. Berikut tahapan yang harus Anda ikuti:
1. Install Laravel
Pertama-tama kita perlu mendapatkan aplikasi versi Laravel yang baru menggunakan perintah di bawah ini, Jadi buka terminal Anda atau command prompt dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel detect_online_users
Setelah itu, buka folder aplikasi laravel yang baru saja dibuat dengan perintah cd detect_online_users.
2. Membuat Controller
Pertama, Anda harus membuat controller terlebih dahulu dengan menggunakan perintah berikut.
php artisan make:controller ContactController
Jalankan perintah diatas dengan terminal. Jika sudah buka file ContactController di app/http/Controller/ContactController.php
Pada file tersebut buat method dengan nama index() yang nantinya digunakan untuk load index view.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ContactController extends Controller
{
public function index(){
return view('index');
}
}3. Membuat Route
Langkah selanjutnya yaitu Anda mendefinisikan route yang mengarah pada ContactController. Anda perlu membuka file route/web.php terlebih dahulu. Kemudian tambahkan code berikut ini.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;
Route::get('/', [ContactController::class, 'index']);4. Membuat Component Livewire
Selanjutnya, kita install terlebih dahulu livewire dengan menggunakan composer.
composer require livewire/livewire
Setelah itu, kita akan membuat contact-component dengan menjalankan perintah artisan berikut.
php artisan make:livewire contact-component
Perintah diatas akan membuat 2 file diantaranya:
- app/Http/Livewire/ContactComponent.php
- resources/views/livewire/contact-component.blade.php
Pada file app/Http/Livewire/ContactComponent.php buat 4 variable seperti berikut.
- $name, $email, dan $message untuk data binding
- $success untuk status form
Selain itu, kita juga buat 2 method seperti berikut.
- submit() – untuk memanggil <form> submit. Kemudian dilakukan validasi nilai dan tetapkan nilai 1 ke $success
- render() – untuk load component view
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ContactComponent extends Component
{
public $name = "";
public $email = "";
public $message = "";
public $success = 0;
public function submit(){
// Validate
$this->validate([
'name' => 'required',
'email' => 'required|email',
'message' => 'required',
]);
// Success
$this->success = 1;
}
public function render()
{
return view('livewire.contact-component');
}
}Selanjutnya buka file pada resources/views/livewire/contact-component.blade.php dan tambahkan code berikut.
<div>
<div class="container mt-5">
<!-- Offline alert -->
<div class="alert alert-danger w-100" wire:offline>
You are offline. Please check your Internet connection.
</div>
<!-- Success Message -->
@if($success == 1)
<div class="alert alert-success">
Submit successfully
</div>
@endif
<h2>Contact form</h2>
<form wire:submit.prevent="submit">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" wire:model="name" value="">
@error('name')
<div class="error text-danger">* {{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" wire:model="email" value="">
@error('email')
<div class="error text-danger">* {{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea class="form-control" id="message" placeholder="Enter message" wire:model="message" ></textarea>
@error('message')
<div class="error text-danger">* {{ $message }}</div>
@enderror
</div>
<!-- Disabled button when Offline -->
<button
type="submit"
wire:offline.attr="disabled"
class="btn btn-primary mt-2"
>Submit</button>
</form>
</div>
</div>- Tambahkan wire:offline untuk menampilkan pesan peringatan ketika pengguna sedang offline.
- Menampilkan pesan sukses jika $success == 1.
- Buat <form> dan tambahkan wire:submit.prevent=”submit”.
- Tambahkan elemen input dan pada tombol submit tambahkan wire:offline.attr=”disabled” untuk menonaktifkan tombol saat offline.
5. Membuat View
Tahapan terakhir yang perlu Anda lakukan yaitu membuat view di folder resources/views/. Pada folder tersebut buat file dengan nama index.blade.php dan tambahkan contact-component serta livewire style dan script.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Detect user is online or offline in Livewire - Laravel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" >
@livewireStyles
</head>
<body>
<livewire:contact-component />
@livewireScripts
</body>
</html>Dengan ini, Anda dapat dengan mudah memperingatkan pengguna ketika terputus dari internet dan menghentikan pengguna untuk mengirimkan formulir atau tindakan lainnya.
Terakhir, Anda bisa langung menjalankan php artisan serve untuk mencoba deteksi user online atau offline.
Selamat Anda telah berhasil membuat deteksi user online atau offline dengan menggunakan livewire di Laravel. Jika ada pertanyaan bisa langsung tulis di kolom komentar dibawah ini.