Contoh Notifikasi Pada Laravel Livewire

Artikel sederhana ini mendemonstrasikan pemberitahuan laravel livewire toastr. jika Anda ingin melihat contoh laravel livewire toastr alert maka Anda berada di tempat yang tepat. Saya akan menunjukkan kepada Anda tentang contoh laravel livewire toastr.js. Anda akan mempelajari notifikasi toastr di laravel livewire. Mari kita lihat di bawah ini contoh contoh notifikasi livewire toastr.

Saya akan memberi Anda contoh yang sangat sederhana tentang cara menerapkan pemberitahuan pemberitahuan toastr menggunakan laravel livewire. ini adalah langkah yang sangat sederhana untuk membuat notifikasi pemanggang roti dengan livewire dan Anda dapat menggunakannya dengan versi laravel 6, laravel 7, dan laravel 8.

Jadi, mari ikuti langkah di bawah ini dan Anda akan mendapatkan tata letak di bawah ini:

Langkah 1: Instal Laravel

pertama-tama kita perlu mendapatkan aplikasi versi Laravel 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 blog

Langkah 2: Instal Livewire

sekarang di langkah ini, kita cukup menginstal livewire ke aplikasi laravel kita menggunakan perintah di bawah ini

composer require livewire/livewire

Langkah 3: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat komponen select2.

php artisan make:livewire notificationDemo

Sekarang mereka membuat file di kedua jalur:

app/Http/Livewire/NotificationDemo.phpresources/views/livewire/notification-demo.blade.php

Sekarang kedua file akan kami perbarui seperti di bawah ini untuk formulir hubungi kami.

app/Http/Livewire/NotificationDemo.php

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class NotificationDemo extends Component
{
/**
* Write code on Method**
@return response()
*/
public function render()
{
return view('livewire.notification-demo')->extends('layouts.app');
}
/**
Write code on Method
*
* @return response()
*/
public function alertSuccess()
{
$this->dispatchBrowserEvent('alert',
['type' => 'success',  'message' => 'User Created Successfully!']);
}
/**
* Write code on Method*
* @return response()
*/
public function alertError()
{$this->dispatchBrowserEvent('alert',
['type' => 'error',  'message' => 'Something is Wrong!']);
}
/**
* Write code on Method
*
* @return response()
*/
public function alertInfo()
{
$this->dispatchBrowserEvent('alert',
['type' => 'info',  'message' => 'Going Well!']);
}
}

resources/views/livewire/notification-demo.blade.php

<div>

<h1>Laravel Livewire Notification Example - ItSolutionStuff.com</h1>
<button type="button" wire:click="alertSuccess" class="btn btn-success">Success Alert</button>
<button type="button" wire:click="alertError" class="btn btn-danger">Error Alert</button>
<button type="button" wire:click="alertInfo" class="btn btn-info">Info Alert</button>

</div>

Langkah 4: Buat Rute

sekarang kita akan membuat satu rute untuk memanggil contoh kita, jadi mari tambahkan rute baru ke file web.php seperti di bawah ini:

route/web.php

<?phpuse

Illuminate\Support\Facades\Route;
use App\Http\Livewire\NotificationDemo;

Route::get('notification', NotificationDemo::class);

Langkah 5: Buat Lihat File

di sini, kita akan membuat file blade untuk rute formulir panggilan. dalam file ini, kita akan menggunakan @livewireStyles, @livewireScripts. jadi mari kita tambahkan.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - ItSolutionStuff.com</title>
@livewireStyles
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
@livewireScripts
<script>
window.addEventListener('alert', event => {
toastr[event.detail.type](event.detail.message,
event.detail.title ?? ''), toastr.options = {
"closeButton": true,
"progressBar": true,
}
});
</script>
</html>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka URL di bawah ini:

localhost:8000/notification