Laravel (v4, v5) global site message system

example-of-laravel-output-message-square

The idea about global site messages

Messages here are something you want to show to users to tell them about the result of some actions. For example, after pressing the login button, a sentence appears in the new page to tell users that they have been logged in or there are any errors. In my opinion, a practical site message system should has following properties:

  • A message must belongs to one of those types: success (indicates that the previous action is done as expected), info (provides more information), warning (tells user that the action was completed, but there are something wrongs) and error (means we cannot complete the action by some reasons)
  • Each message can be generated when processing a request
  • Messages is visible in the current response or in the next one request.

When working with a project, I have created a package for Laravel (both version 4 and 5) which has all above functions: Laravel Alert (hieu-le/laravel-alert). I usually use Bootstrap alert to display site messages. So that the output of this package will follow Bootstrap alert format by default. Of course, we can change the appearance and more configurations.

Installation

You will need Composer to use this package, it is a package manager which will install dependencies of your project automatically via a json file called composer.json . There is a nice tutorial of using Composer for those who are not familiar with this awesome tool.

Add this dependency to your composer.json  file, please note that you must choose version 1.x if working with Laravel 4 and version 2.x for Laravel 5:

In a Laravel 4 project:

"hieu-le/laravel-alert": "~1.0"

In a Laravel 5 project:

"hieu-le/laravel-alert": "~2.0"

Run composer update  to make Composer install my package and its dependencies. After that, you must add the package Service Provider and register a alias to use the package easier. Open the app/config/app.php  in Laravel 4 (or config/app.php  in Laravel 5). Add the following line to the providers  array:

'HieuLe\Alert\AlertServiceProvider',

And add this line to the aliases  array

'Alert' => 'HieuLe\Alert\Facades\Alert',

Basic usage

If you want to add a message, call one of these method based on the message type:

Alert::success("Well done! You successfully read this important alert message.");
# or
Alert::info("Heads up! This alert needs your attention, but it's not super important.");
# or
Alert::warning("Warning! Better check yourself, you're not looking too good.");
# or
Alert::error("Oh snap! Change a few things up and try submitting again.");

Currently, once added, a message cannot be changed or removed. They will be displayed in group of message types, in the order of they registered. To display these message, call this method in your view template:

Alert::dump();

With those inputs, the default output will be something like this:

    <div class="alert alert-success" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-check"></i> Success!</h4>
      <p>Well done! You successfully read this important alert message.</p>
    </div>
    <div class="alert alert-info" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-info"></i> Info!</h4>
      <p>Heads up! This alert needs your attention, but it's not super important.</p>
    </div>
    <div class="alert alert-warning" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-warning"></i> Warning!</h4>
      <p>Warning! Better check yourself, you're not looking too good.</p>
    </div>
    <div class="alert alert-danger" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
      <h4><i class="icon fa fa-ban"></i> Error!</h4>
      <p>Oh snap! Change a few things up and try submitting again.</p>
    </div>
Example of Laravel Alert message appearance

Example of Laravel Alert message appearance

Change the icons of message types

Laravel Alert comes with a set of icons for each type of message. To display these default icon, the Font Awesome must be installed in your project. You can choose another font, or use images, texts, too. Let start with copying the package config file to another location to edit.  Run one of these command from you project root folder:

Laravel 4:

php artisan config:publish hieu-le/laravel-alert

Laravel 5:

php artisan vendor:publish

A new file will be created at app/config/packages/hieu-le/laravel-alert/config  (or config/alert.php  in Laravel 5 projects). Change the content of each message type inside the icons  array to the content of your desired icons (or images, texts). For example:

return [
    'icons'       => [
        'success' => '<img src="imgs/icons/success.png" />',
        'info'    => '<img src="imgs/icons/info.png" />',
        'warning' => '<img src="imgs/icons/warning.png" />',
        'error'   => '<img src="imgs/icons/error.png" />',
    ],
]

Change the appearance of output

If you do not like the default output of messages, you can use your own view template to display them by replacing the value of view element in the package configuration file (see above section for details). The view will be rendered for each message type that contains at least one message. In your view, there will be two variables passed:

  • $icon : the string of the icon of the message type
  • $messages : the array contains all messages of the message type

Using with Laravel validation errors

For those who have worked with Laravel validation errors output, there are two ways to integrate with Laravel Alert. The first one is “copy” the validation errors and add to the global message system managed by the package manually:

if ($validator->fails())
{
    foreach($validator->messages()->all() as $message)
    {
        Alert::error($message);
    }
}

Another approach is keep your current controller code and update your view template by passing an additional argument into the Alert::dump method like this (remember that Laravel include a special variable called $errors in each view):

echo Alert::dump($errors->all());

Conclusion

With the help of the Laravel Alert package, developers now can manage and display global site messages easier and more semantically. If you need more feature or found a bug, please raise an issue in the Github repository.

One comment

  1. ANil on

    Hello I am using on local and every step of installation ha been done. But I am not getting any message.
    As I am using like Alert::success(‘Welcome’); What further need to do. Please help.

    Reply

Leave a Reply

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