|

How To Add Flash Messages

How To Add Flash Messages

Flash messages are a great way to add some simple notifications to users of your website or application about important events that may have happened. HTTP is a stateless protocol so in order to display a message after a particular request has happened, we can make use of sessions which maintain state from one request to the next. Flash messages utilize a special type of session which only maintain themselves long enough for a message to be displayed once and only once. As soon as the user navigates to another page, the flash message goes away. Let’s see how we can add some flash messages to our games application here.


Where would you like to display the message?

The easiest and most prominent place to display user interaction messages to your users is likely right below the navigation area of the website. Since we are familiar with partial view files and the benefits they provide, we will make use of a partial view file to help us with our flash messaging.

In our partials directory which can be found at resources/views/partials we will add the flash.blade.php file like so:

We make use of a simple if conditional statement in blade to display or not display the div containing a message. If there is a message in the session, we will in fact display it. You may also notice that we are including a session of type in the markup. This is because, based on the type of action that takes place, we would like to be able to display a flash message indicating success or failure, or perhaps just an informational message.

With our partial view file created, we can include it in our master layout like we see here:


Log In and Log Out Flash Messages

We have some basic markup in place to display a flash message. Now all we have to do is decide where we would like to see flash messages appear. Probably the most common scenario for this is simply for logging in and logging out functions. If a user logs in, we should display a nice little success flash message which indicates so. In a similar way, we should also provide a message to the user that they have logged out when they do in fact log out. First, let’s tackle the log in flash message.


Log In Flash Message

The log in action is handled via the store() method in our Sessions Controller. Let us go ahead and make use of the session()->flash() method to help us out here.

The session()->flash() method goes ahead and populates the session with data for the following request. So in the snippet above we call this method two times. We first set a key of message to hold the actual text we want to display to the user. Also, we are embedding some html markup in the string which will be displayed in our flash.blade.php file thanks to using the {!! !!} curly braces. This outputs html without escaping it. When using the {{ }} braces, the output is escaped.

The second call to the session()->flash() method sets a type. We do this so that we can assign coloring to the flash message as we see fit. As this is indicating a successful login, we set the type to success. Let’s test it out!flash message for site log in


Log Out Flash Message

It looks like we have the log in flash message working nicely. It even carries over some bold text formatting like we spoke about. Now let’s also add a flash message the user will see when they log out. Similar to the example above, we will set both a message and a type key. We will set the type on this one to info to be more of a simple informational message.

Let’s test the log out flash message function now.
log out flash message

This looks good! This time around, we changed the type to info so we can see that the flash message is more of a blue color.


Where else to add flash messages?

Where else should we add flash messages? Well, flash messages are pretty neat, and you might be tempted to start adding them for every action the user takes. This is probably not a great thought however. Flash messages are kind of like spices, and front end JavaScript effects. Both are nice, but if you overdo them, it makes for a bad situation. We could add flash messages for user registration, game submission, game reviews, and more. Let’s add the flash messages for just a new user registration and a new game submission then call it a day.


New user registration flash message

The nice thing about flash messages, is that since that partial is already set up for us, it’s really as simple as just finding the controller method you want to flash the session on and add that call to session()->flash(). So for the new user registration scenario, this is in the store() method of our Registration Controller.

With just those two lines of code added, we can see we are successful.new user sign up flash message


New Game Submission Flash Message

This is second hat to us at this point! Let’s go ahead and add a couple of lines of code to the store() method in our Games Controller. Notice that we set the flash session just before the application performs a redirect.

This new game submission flash message is also working great! Our new user gets added right to our active game submitters widget as well, very cool.

new game submission flash message


How To Add Flash Messages Summary

As you can see, adding flash messages to our application was pretty easy. Thanks to that global helper function of session()->flash(), we were able to flash a message to the session for use in our views. To retrieve it in our views, we simply call something like session(‘message’).