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-sweetalertOkay, 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-sweetalertChoose 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 devWe 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:publishRun 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
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 68249 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 33744 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32656 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28843 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 28216 views
Facebook 
Whatsapp 
Twitter 
Telegram