Contoh Cara Menggunakan Sweet Alert di Laravel 8

Admin・ 27 Agustus 2021

6 min read ・ 27270 views

Laravel Sweet Alert - Alert merupakan bidang atau tampilan pemberitahuan yang biasanya terdapat pesan singkat seperti success, error, warning, info dan lain-lain. Pada beberapa penggunaannya, alert biasanya digunakan untuk papan dialog dengan action yes atau no, seperti penggunaannya untuk fitur delete akan ada semacam confirmation dialog apakah user yakin ingin menghapus data atau tidak.

Nah, di artikel ini saya akan membagikan sedikit tutorial tentang bagaimana cara mudah dan cepat yang dapat kita lakukan untuk membuat atau menggunakan sweet alert di laravel versi terbaru (saat ini versi 8). Dan seperti pada tutorial-tutorial yang biasa kita bagikan, pada tutorial menggunakan sweet alert di laravel 8 kali ini, kita juga akan memulainya dari nol. Dan berikut ini langkah-langkah yang kita lakukan untuk menggunakan sweet alert di laravel 8:

Install Laravel

laravel new laravel-sweetalert

Oke, di langkah awal ini mari kita mulai dengan menginstall laravel versi terbaru (saat ini versi 8). Ada beberapa cara untuk menginstall laravel, antara lain dengan laravel installer menggunakan perintah seperti di atas, atau menggunakan composer dengan perintah seperti di bawah ini.

composer create-project laravel/laravel laravel-sweetalert

Pilih salah satu cara di atas untuk mulai menginstall laravel project. Dari kedua cara di atas, hasilnya akan sama-sama membuatkan atau generate laravel project dengan nama folder laravel-sweetalert.

Install Laravel UI Package

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

Kita akan mengimplementasikan atau mencoba menggunakan sweet alert untuk menampilkan pesan success saat user berhasil register. Untuk itu kita perlu fitur authentication untuk membuat fitur register atau login. Nah, untuk fitur authentication kita akan menggunakan laravel ui package karena lebih simple.

Jalankan perintah-perintah di atas secara berurutan untuk mulai menginstall laravel ui package versi bootstrap.

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, di langkah ketiga ini kita perlu membuat database baru untuk menampung data-data yang akan kita gunakan sebagai sample untuk mencoba menerapkan atau menggunakan sweet alert di laravel 8. Silahkan buat database baru, kemudian jangan lupa untuk menyesuaikan DB_DATABASE di file .env.

Jika kamu menggunakan windows, tapi menginstall laravel menggunakan laravel installer, biasanya di file .env pada bagian APP_URL akan bernilai http://laravel-sweetalert.test. Nah, jika kamu tidak menggunakan homestate, kamu perlu mengubah nilai tersebut menjadi http://localhost atau http://127.0.0.1.

Jika sudah membuat database dan menyesuaikan file .env, sekarang kita bisa memigrasi file-file migrasi ke database menggunakan perintah php artisan migrate.

Install Sweet Alert Package

composer require realrashid/sweet-alert

Di tutorial ini kita akan menggunakan sweet alert package dari realrashid untuk menggunakan SweetAlert2 di laravel 8. Untuk memulainya, jalankan perintah composer seperti di atas untuk menambahkan package ke project dependencies.

php artisan sweetalert:publish

Jalankan perintah seperti di atas untuk publish package assets.

Note: Javascript library sweetalert sudah otomatis dimuat dan disertakan dalam tampilan dengan bantuan perintah di atas.

Setup Blade View

@include('sweetalert::alert')

Sertakan script seperti di atas pada master layout. Karena kita menggunakan laravel ui package, maka secara otomatis kita juga sudah memiliki master layout yang terletak di direktori resources/views/layouts/app.blade.php. Tempatkan script di atas di antara tag <body> ... </body>

Edit 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, kita akan menampilkan sweet alert type success dengan pesan "You've Successfully Registered" ketika user berhasil register. Untuk itu, silahkan edit method create yang ada di file App/Http/Controllers/Auth/RegisterController.php menjadi seperti contoh di atas dan jangan lupa gunakan use RealRashid\SweetAlert\Facades\Alert; atau use Alert.

Sekarang jika kita coba register dan berhasil register maka akan menampilkan pop up success dengan sweetalert.

Penggunaan Sweetalert Lainnya

Alert::info('Info Title', 'Info Message');

Alert::warning('Warning Title', 'Warning 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');

Menggunakan Helper Function

Alert

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');

Itulah contoh penggunaan sweet alert di laravel 8 menggunakan sweet alert package dari realrashid. Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. Happy coding 🚀 🚀 🚀

Full Documentation: Sweet Alert

Credit: Online illustrations by Storyset

Laravel Package

Artikel Sebelumnya

Toast Notification in Laravel 8 with Laravel Notif...

Artikel Selanjutnya

How to Use Sweet Alert in Laravel 8

Tinggalkan Komentar

Loading Comments

Favorit See All

Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
23 Oktober 2021 65579 views
Laravel 8: REST API Authentication dengan Sanctum
17 September 2021 31644 views
Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap
14 Oktober 2021 29573 views
Membuat REST API CRUD di Laravel 8 dengan Sanctum
18 September 2021 28216 views
Contoh Cara Menggunakan Sweet Alert di Laravel 8
27 Agustus 2021 27270 views