Handling feedback in Web (Laravel) Applications

Overview
For good and probably the best user experience on your web application, It is essential to have a nice way of passing feedback or error messages to your user.

Feedback in this context is defined as

information about reactions to a product, a person’s performance of a task, etc. which is used as a basis for improvement (Emphasis on “person’s performance of a task).

We’ll be using Laravel in this session as our web application technology.
I’ve seen some people handling feedback and / or errors in ways that do not really match the elegance with which Laravel ships with. Laravel as we all know is as elegant as it is powerful. I’m going to walk you through how to better display feedback to users on your application for a better user experience using
1. Session based flash messages and
2. Toastr.js

Session based flash message are messages stored in session data (think of this message as a variable) made available on the server request until they are called(yeah, they’re just variables). They’re destroyed from the session data after being called. When used for user feedback, they would be destroyed on next request.

The old ways
Starting out with Laravel / PHP generally different people have different ways of displaying feedback for users on their applications, my first week writing Laravel, I got so carried away by the “with” method which is used to pass variables into a view, that was how I did mine (weird right? yeah I know).
Passing an error object as parameter for the “with” method I felt smart! Then in the view I’d use the blade control structure to check which error is available the display to user(or to myself at the time).

Fast forward
After a while I stumbled upon toastr.js and that’s where the magic started. Toastr.js is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Check official Documentation here.

Getting Started
1. Create and Start your laravel application. Check Laravel official documentation here to get started with laravel.

2. Add toastr.js to your Laravel Application, with either of the methods below

• NPM
  Actually published an article on toastr.js npm installation here
• Add CDN links in your blade template

CSS

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

JS

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

Either ways, Now you have toastr.Js library set up on your application. Let’s proceed to how you can use this to return feedback to users with a demo.

We’ll be building something that returns your age and a happy message based on your birth year as input.

Usage
Create a form to take year as input

Don’t forget to create your route as it is below

Route::post('/submit', 'Controller@submitForm')->name('form.submit');

Create the submitForm method in your Controller class

Don’t forget to import your Session and Request classes.
Now this is where the main point is, I mean the important part of this article starts from here.
Feedback to be sent to user is created in the controller as a session based flash message.

Session::flash('name','message goes here');
//this is how you create a flash message in laravel

Now we can proceed to handle the flash message with toastr.js

Lol, now we’re writing PHP in Javascript, not to worry, this won’t upset the balance in the universe.

Configure the script appropriately to handle any other session message you might have.

Conclusion
Here we have it! Our error message (feedback).

And our positive feedback, Smooth right??

Now you can conveniently send feedback (or error messages) on your application using toastr and Flash based session messages.

The main point here is, for any web application, create your feedback as a flash message (back-end) and use the toastr.js library to handle it on your front-end.

You made it to the end 🙂, thanks for your time.