
How to Use Sweet Alert in Laravel 8

Laravel Sweet Alert - Alert is a notification area that usually contains short messages such as success, error, warning, info and others. In some uses, alerts are usually used for confirmation dialogs with yes or no actions, such as using the delete feature, there will be a kind of confirmation dialog.
Well, in this article I will share just a little tutorial on how easy and fast we can do to create or use sweet alerts in the latest version of laravel (currently version 8). And like in the tutorials that we usually share, in this tutorial using sweet alerts in Laravel 8, we will also start from scratch. And below are the steps we take to use sweet alert in laravel 8:
Steps to Use Sweet Alert in Laravel 8
Install Laravel
laravel new laravel-sweetalert
Okay, let's start by installing the latest version of laravel (currently version 8). There are several ways to install laravel, we can use the laravel installer with the command as above, or use composer with the command below.
composer create-project laravel/laravel laravel-sweetalert
Choose one of the methods above to start installing the laravel project. From the two methods above, the results will be the same as creating or generating a laravel project with the folder name laravel-sweetalert.
Install Laravel UI Package
composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev
We will implement or try to use sweet alert to display a success message when the user successfully registers. For that we need an authentication feature to make a register or login feature. Well, for the authentication feature we will use the laravel ui package because it is simpler.
Run the above commands in order to start installing the bootstrap version of laravel ui package.
Setup Database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_sweetalert
DB_USERNAME=root
DB_PASSWORD=
After completing the first and second steps, in this third step we need to create a new database to hold the data that we will use as a sample to try implementing or using sweet alerts in laravel 8. Please create a new database, then don't forget to adjust DB_DATABASE in .env files.
If you use windows, but install laravel using laravel installer, usually the .env file in the APP_URL section will be http://laravel-sweetalert.test. Well, if you don't use homestate, you need to change that value to http://localhost or http://127.0.0.1.
Now that we have created the database and customized the .env file, we can now migrate the migration files to the database using the php artisan migrate command.
Install Sweet Alert Package
composer require realrashid/sweet-alert
In this tutorial we will use the sweet alert package from realrashid to use SweetAlert2 in laravel 8. To get started, run the composer command as above to add the package to project dependencies.
php artisan sweetalert:publish
Run the command as above to publish package assets.
Note: Javascript library sweetalert is already automatically loaded and included in the view with the help of the above command.
Setup Blade View
@include('sweetalert::alert')
Include the script as above in the master layout. Because we are using the laravel ui package, we automatically have a master layout located in the resources/views/layouts/app.blade.php directory. Place the script above between the <body> ... </body> tags
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;
}
OK, we will display sweet alert type success with the message "You've Successfully Registered" when the user successfully registers. For that, please edit the create method in the App/Http/Controllers/Auth/RegisterController.php file to be like the example above and don't forget to use RealRashid\SweetAlert\Facades\Alert; or use Alerts.
Now if we try to register and register successfully it will display a pop up success with sweetalert.
Other Sweetalert Uses
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');
Use 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');
That's an example of using sweet alert in laravel 8 using the sweet alert package from realrashid. Good luck, hopefully this article can be useful and see you in the next article. Happy coding 🚀 🚀 🚀
Full Documentation: Sweet Alert
Credit: Online illustrations by Storyset
- Menambahkan Validasi Password di Laravel
- Menggunakan Middleware Untuk Authentication (Hak Akses) di Laravel 8
- Membuat Aplikasi Video Conference Di Laravel Dengan Vonage Video API
- Cara Mudah Upload atau Deploy Static Website di Netlify
- Cara Install SSL Certificate di XAMPP
- Membuat Fitur Import dan Export Data CSV di Laravel 8
- Menggunakan Sentry Untuk Monitoring dan Error Tracking di Laravel 8
- Tutorial Cara Mudah Membuat Captcha di Laravel 8
- Cara Mudah Upload Laravel Project ke Shared Hosting
- Menggunakan Beberapa Database di Laravel 8 (Multiple Database Connections)
Windows | Linux | Mac |
---|---|---|
Ctrl + D | Ctrl + D | ⌘ + D |
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 23627 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 19563 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 17100 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 13291 views
- Panduan Lengkap Cara Membuat Blog dengan Laravel 8 dan Bootstrap 30 Juli 2021 11041 views