How to use sweetalert message box in laravel 5?

By Hardik Savani | July 14, 2017 | | 2272 Viewer | Category : PHP Laravel Bootstrap


Share this post:



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 5 application. we can simply use with laravel 5 all version like 5.1, 5.2, 5.3, 5.4 and next upcoming 5.5 too.

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');

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:

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...



We are Recommending you: