How to Use Sweetalert Message Box in Laravel?

By Hardik Savani April 16, 2024 Category : Laravel jQuery

In this article, we will learn how to implement sweetalert in laravel 5 application. Here i am going to use uxweb/sweet-alert package for Sweet Alert Messages in laravel application. we can simply use with laravel 5, laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

Sweet Alert is a easy-to-use jquery library and using that we can generate beautiful alert message. Sweet Alert provide good layout and best way to open box with message. you can also use sweetalert for confirmation before delete, few days ago i posted for confirm before delete, you can read here : Laravel 5 - Confirmation before delete record from database example. Here as you can read we can also simply implement sweet alert instead of bootstrap confirmation.

So, In this example i am going to install uxweb/sweet-alert package and then create new route with argument like success, basic, message, info, error and warning. Then i will create new method on controller and create new view for render that. So let's simple follow bellow step, after complete all step you will find prompt box like as bellow screen shot:

Preview:

Step 1: Install uxweb/sweet-alert Package

Here, we will install uxweb/sweet-alert composer package that way we can simply use their method for flash message. So let's run bellow command.

composer require uxweb/sweet-alert

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php

'providers' => [
	....
	UxWeb\SweetAlert\SweetAlertServiceProvider::class,
],
'aliases' => [
	....
	'Alert' => UxWeb\SweetAlert\SweetAlert::class,
]

As above i added "Alert" facade you can see, but we do not require in this example, but now i just add for demo.

Step 2: Add Route

In this is step we need to create route for testing with argument. so open your routes/web.php file and add following route.

routes/web.php

Route::get('my-notification/{type}', 'HomeController@myNotification');

Read Also: Laravel Toastr JS Notification Message Popup Example

Step 3: Add Controller Method

Here, we will add new method myNotification() in HomeController. In this method i use alert() for flash message so let's add following method on your home controller.

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return view
     */
    public function myNotification($type)
    {
        switch ($type) {
            case 'message':
                alert()->message('Sweet Alert with message.');
                break;
            case 'basic':
                alert()->basic('Sweet Alert with basic.','Basic');
                break;
            case 'info':
                alert()->info('Sweet Alert with info.');
                break;
            case 'success':
                alert()->success('Sweet Alert with success.','Welcome to ItSolutionStuff.com')->autoclose(3500);
                break;
            case 'error':
                alert()->error('Sweet Alert with error.');
                break;
            case 'warning':
                alert()->warning('Sweet Alert with warning.');
                break;
            default:
                # code...
                break;
        }

        return view('my-notification');
    }
}

Step 4: Add Blade File

At Last we have to create my-notification.blade.php file and in that file i write code how to use sweetalert package. So let's create blade file and put that code.

resources/views/my-notification.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel Sweet Alert Notification</title>
	<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
	<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>

<h1 class="text-center">Laravel Sweet Alert Notification</h1>
@include('sweet::alert')

</body>
</html>


Now we are ready to run our example so run bellow command so quick run:

php artisan serve

Now you can open bellow url on your browser:

Read Also: Laravel 10 Create Custom Artisan Command Example
http://localhost:8000/my-notification/success
http://localhost:8000/my-notification/basic
http://localhost:8000/my-notification/message

You can get more information about package from here : Click Here.

I hope it can help you...

Tags :
Previous

Laravel 5 email verification with activation code example
Next

PHP MySQL Contact US Form with Validation Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares