Bagaimana cara menggunakan Sweet Alert pada Laravel

Seamat pagi teman-teman, kali ini saya akan membagikan bagaimana cara menggunakan sweet alert di laravel. Sweet alert ini sering kalai digunakan untuk menampilkan dialog informasi yang cukup menarik para pengguna.

Laravel Sweet Alert – Alert adalah area notifikasi yang biasanya berisi pesan singkat seperti success, error, warning, info dan lain-lain. Dalam beberapa kegunaan, alert biasanya digunakan untuk dialog konfirmasi dengan tindakan ya atau tidak, seperti menggunakan fitur hapus, akan ada semacam dialog konfirmasi. Dan seperti pada tutorial yang biasa saya bagikan, pada tutorial ini menggunakan sweet alerts di Laravel versi 8, saya juga akan memulai dari awal. Dan di bawah ini adalah langkah-langkah yang kami ambil untuk menggunakan sweet alert di laravel versi 8:

Install Laravel

laravel new laravel-sweetalert

Sekarang kita mulai dengan menginstal laravel versi 8. Ada beberapa cara untuk menginstal laravel, kita bisa menggunakan installer laravel dengan perintah seperti di atas, atau menggunakan composer dengan perintah di bawah ini

composer create-project laravel/laravel laravel-sweetalert

Pilih salah satu metode di atas untuk mulai menginstal proyek laravel. Dari kedua cara di atas, hasilnya akan sama seperti membuat atau membuat project laravel dengan nama folder laravel-sweetalert

Install Laravel UI Package

composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev

Saya akan menerapkan atau mencoba menggunakan sweet alert untuk menampilkan pesan sukses ketika pengguna berhasil mendaftar. Untuk itu kita membutuhkan fitur autentikasi untuk membuat fitur register atau login. Oke, untuk fitur autentikasi kita akan menggunakan paket laravel ui karena lebih simpel. Jalankan perintah di atas untuk mulai menginstal versi bootstrap dari paket laravel ui.

Setup Database

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

Setelah menyelesaikan langkah pertama dan kedua, pada langkah ketiga ini kita perlu membuat database baru untuk menampung data yang akan kita gunakan sebagai sampel untuk mencoba menerapkan atau menggunakan sweet alerts di laravel 8. Silahkan buat database baru, lalu jangan lupa untuk menyesuaikan DB_DATABASE dalam file .env.

Jika Anda menggunakan windows, tetapi menginstal laravel menggunakan installer laravel, biasanya file .env di bagian APP_URL akan menjadi http://laravel-sweetalert.test. Oke, jika Anda tidak menggunakan homestate, Anda perlu mengubah nilainya menjadi http://localhost atau http://127.0.0.1.

Sekarang kita telah membuat database dan mengkustomisasi file .env, kita dapat memigrasikan file migrasi ke database menggunakan perintah php artisan migration.

Install Sweet Alert Package

composer require realrashid/sweet-alert

Dalam tutorial ini kita akan menggunakan paket sweet alert dari realrashid untuk menggunakan SweetAlert2 di laravel 8. Untuk memulai, jalankan perintah composer seperti di atas untuk menambahkan paket ke dependensi proyek.

php artisan sweetalert:publish

Jalankan perintah seperti di atas untuk mempublikasikan aset paket.

Atur di View Blade

@include('sweetalert::alert')

Sertakan skrip seperti di atas dalam tata letak master. Karena kita menggunakan paket ui laravel, secara otomatis memiliki master layout yang terletak di direktori resources/views/layouts/app.blade.php. Tempatkan skrip di atas di antara tag dan Ubah RegisterController

use RealRashid\SweetAlert\Facades\Alert;
or
use Alert;
.....
.....
.....
protected function create(array $data){
$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);

Alert::success('Congrats', 'You\'ve Successfully Registered');

// or using toast

// Alert::toast('You\'ve Successfully Registered', 'success');

return $user;
}

Oke, sekarang kita akan menampilkan sweet alert type success dengan pesan “You’ve Successfully Registered” ketika user berhasil melakukan registrasi. Untuk itu silahkan edit metode create pada file App/Http/Controllers/Auth/RegisterController.php menjadi seperti contoh diatas dan jangan lupa gunakan RealRashid\SweetAlert\Facades\Alert; atau gunakan Peringatan.

Sekarang jika kita mencoba mendaftar dan mendaftar dengan sukses maka akan muncul pop up sukses dengan sweetalert.

Perintah Sweetalert Uses lainnya

Alert::info(‘Info Title’, ‘Info Message’);
Alert::info(‘Info Title’, ‘Info Message’);
Alert::error(‘Error Title’, ‘Error Message’);
Alert::question(‘Question Title’, ‘Question Message’);
Alert::image(‘Image Title!’,’Image Description’,’Image URL’,’Image Width’,’Image Height’);
Alert::html(‘Html Title’, ‘Html Code’, ‘Type’);

Use Helper Function

alert('Title','Lorem Lorem Lorem', 'success');
alert()->success('Title','Lorem Lorem Lorem');
alert()->info('Title','Lorem Lorem Lorem');
alert()->warning('Title','Lorem Lorem Lorem');
alert()->error('Title','Lorem Lorem Lorem');
alert()->question('Title','Lorem Lorem Lorem');
alert()->image('Image Title!','Image Description','Image URL','Image Width','Image Height');
alert()->html('<i>HTML</i> <u>example</u>'," You can use <b>bold text</b>, <a href='//github.com'>links</a> and other HTML tags ",'success');

Toast

toast('Your Post as been submited!','success');

Oke teman-teman, itulah contoh penggunaan sweet alert di laravel 8 menggunakan paket sweet alert dari realrashid. Selamat mencoba, semoga artikel ini dapat bermanfaat dan sampai jumpa di artikel selanjutnya. Terima kasih.