Home
Topics
Laravel

Laravel
Livewire

Livewire
Software Testing

Testing
bootstrap

Bootstrap
source code

Code
HTML

HTML
CSS

CSS
Javascript

Javascript
jQuery

jQuery
How to Use Sweet Alert in Laravel 8

How to Use Sweet Alert in Laravel 8

Admin
Admin・ 27 Agustus 2021
6 min read ・ 22535 views

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

Laravel Package
Artikel Sebelumnya

Contoh Cara Menggunakan Sweet Alert di Laravel 8
Artikel Selanjutnya

Menampilkan Peringatan Sebelum Meninggalkan Halama...
Tinggalkan Komentar
Loading Comments
Bookmark
Windows Linux Mac
Ctrl + D Ctrl + D ⌘ + D
Follow us
Favorit See All