Sistem Informasi Sekolah Terintegrasi

Contoh Cara Menggunakan Sweet Alert di Laravel 8

Laravel   2021-11-27  

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:

Steps to Use Sweet Alert in 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('HTML example'," You can use bold text, links 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 ???? ???? ????