Laravel 5.3 notification message popup using toastr js plugin with demo

Leave a Comment / php / By

Laravel 5.3 notification message popup using toastr js plugin with demo

In this post we will give you information about Laravel 5.3 notification message popup using toastr js plugin with demo. Hear we will give you detail about Laravel 5.3 notification message popup using toastr js plugin with demoAnd how to use it also give you demo for it if it is necessary.

Laravel 5.3 notification message popup using toastr js plugin with demo


In this post, I will tell you how to show notification alert box using toastr js in Laravel.

By using toastr plugin, you can display message notification for success, info, warning with awesome layout that means you can easily display your error message or success message with title to user by using toastr plugins.

There are so many plugins available with laravel to show notification message on each activity like growl and flash messages.

You always need to display notification to user either user register in your website or you are going to add/update/delete any records.

With toastr notification, you can easily customize their layout with bootstrap.

Follow below steps to see how its working in laravel application :


Step 1: Add route

In this step simply add below route in your web.php.


routes/web.php 

Route::get('notification', 'UserController@notification');


Step 2: Create UserController

In this step, create a controller if you haven’t and then add notification method within UserController.


app/Http/Controllers/UserController.php

  1. <?php
  2. namespace AppHttpControllers;
  4. use IlluminateHttpRequest;
  5. use AppHttpRequests;
  7. class UserController extends Controller
  8. {
  10.     public functionnotification(){
  11. $notification=array(
  12. 'message'=>'Thanks! We shall get back to you soon.',
  13. 'alert-type'=>'success'
  14. );
  16. session()->set('notification',$notification);
  17. returnview('notification');
  18. }
  19. }
<?php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpRequests;

class UserController extends Controller
{

    public function notification(){
        $notification = array(
            'message' => 'Thanks! We shall get back to you soon.', 
            'alert-type' => 'success'
        );

        session()->set('notification',$notification);
        return view('notification');
    }
}


Step 3: Create Layout for toastr notification

Now create a notification.blade.php in view directory.


resources/views/notification.blade.php

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Laravel notification message popup using toastr js plugin with demo</title>
  5. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  6. <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  9. <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <div class="row">
  15. <div class="col-md-12">
  16. <div class="panel panel-primary">
  17. <div class="panel-heading">Dashboard</div>
  18. <div class="panel-body">
  19.                     Check for toastr notification
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <script>
  26. @if(Session::has('notification'))
  27. alert("{{ Session::get('notification.alert-type') }}");
  28. var type ="{{ Session::get('notification.alert-type', 'info') }}";
  29. switch(type){
  30. case'info':
  31.             toastr.info("{{ Session::get('notification.message') }}");
  32. break;
  34. case'warning':
  35.             toastr.warning("{{ Session::get('notification.message') }}");
  36. break;
  37. case'success':
  38.             toastr.success("{{ Session::get('notification.message') }}");
  39. break;
  40. case'error':
  41.             toastr.error("{{ Session::get('notification.message') }}");
  42. break;
  43. }
  44. @endif
  45. </script>
  46. </body>
  47. </html>
<!DOCTYPE html>
<html>
<head>
    <title>Laravel notification message popup using toastr js plugin with demo</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

</head>
<body>
<div >
    <div >
        <div >
            <div >
                <div >Dashboard</div>
                <div >
                    Check for toastr notification
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  @if(Session::has('notification'))
  alert("{{ Session::get('notification.alert-type') }}");
    var type = "{{ Session::get('notification.alert-type', 'info') }}";
    switch(type){
        case 'info':
            toastr.info("{{ Session::get('notification.message') }}");
            break;
        
        case 'warning':
            toastr.warning("{{ Session::get('notification.message') }}");
            break;
        case 'success':
            toastr.success("{{ Session::get('notification.message') }}");
            break;
        case 'error':
            toastr.error("{{ Session::get('notification.message') }}");
            break;
    }
  @endif
</script>
</body>
</html>

Click here to see another demo to submit contact form with toastr notification.


Submit Contact Form in PHP Laravel 5 with toastr notifications jquery

Show Demo

Hope this code and post will helped you for implement Laravel 5.3 notification message popup using toastr js plugin with demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

7  +  3  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US