Often, you need to inform the user after saving or updating data about the success or failure. If you create an SPA application, you can just send messages to the frontend in the next request or use web sockets. But if you have a standalone application, the only way to pass data to the next page is to place them into the session and redirect the user to the needed page.
Laravel has methods to place variables in the session, but on the next page, you need to think about extracting and displaying the values. In this article we will explain how to redirect with message in Laravel.
Table of Contents
Prepare Testing Environment
In this section, I will explain how to prepare controllers and views that I will use to demonstrate Laravel redirection features. If you want to test it all on your own project, skip this. I assume that you already have Laravel installed. If not, see this article.
Next, create an ExampleController with two actions: index and store. The first action will render the form. The second will redirect to the first. Use the following command to create a controller:
php artisan make:controller ExampleController
And paste this code into it:
public function index()
{
return view("form");
}
public function store()
{
return back();
}
Then, create the view for the form in resources/views/form.blade.php
@extends('layouts.app')
@section('content')
<div class="card ml-5 mr-5">
<div class="card-body">
<form method="POST" action="{{route('form.store')}}">
@csrf
<input class="form-control" name="text"/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
@endsection
And finally, register routes in routes/web.php:
Route::get("/form", [
\App\Http\Controllers\ExampleController::class,
"index",
])->name("form.index");
Route::post("/form", [
\App\Http\Controllers\ExampleController::class,
"store",
])->name("form.store");
Now, you can run a web server and open the form page in the browser. By default it is http://localhost:8080:
php artisan serve
Redirect with a Message in Laravel
1. How to Send a Message
If you use redirect() or back() helper to forward a user to a required or previous page, you can use the with() method for adding a message. Here is the signature:
with($key, $value);
You can specify any string as the $key argument. For example, success or failure. It will be used to extract the message in the blade files. The second argument is a message to display. For example:
return back()->with("success", "The item deleted successfully");
You can do the same for error messages. For example, use success for successful operations and fail for error messages.
return back()->with("fail", " Failed to delete item");
Also, you can use magic method support and specify the field name directly in the method name. For example:
return back()->withSuccess("The data has been updated");
Also, you can manually place variables in the session. If you look at the with() method implementation, you will see that it uses the Session::flash() method. You can use it too:
session()->flash("success", "The data has been updated");
Or:
use Illuminate\Support\Facades\Session;
//....
Session::flash("success", "Changes applied successfully");
Regardless of the chosen method, your message will be written to the session and you can extract and display it on the next page.
2. How to Display a Message in Bootstrap
You can add support for messages at once. Just add message display code to your layout file. By default it is resources/views/layouts/app.blade. You can place the message extraction code before the content inside the <main class=”py-4″> tag:
Bootstrap allows making alerts by adding classes to alert block, for example, the alert class and one of these color classes:
- alert-success – green
- alert-warning – yellow
- alert-primary – blue
- alert-danger – red
You can wrap each message into an alert. Let’s do it for success messages:
@if (session()->has('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div>
@endif
The message will looks like this:
And do the same for the fail message:
@if (session()->has('fail'))
<div class="alert alert-danger">
{{ session()->get('fail') }}
</div>
@endif
You can add the same block for a warning message, if you want. Now, you can test it on any page. Just create two routes and redirect them from one to another:
3. How to Display Messages Using Toastr
Toastr is a JavaScript library that can display notifications in the top right corner of the web page. Of course, you can use it to display your messages. First, add Toastr to your app.js. You can install Toastr using npm:
npm install toastr
Then, add this line to resources/js/app.js to load it into the window object:
window.toastr = require("toastr");
Add this line to resources/scss/app.scss to load CSS resources for toastr:
@import '~toastr/toastr';
Then, open resources/views/layout/app.blade.php and add the following JavaScript code before the body closing tag. For success messages:
@if(session()->has('success'))
<script>
document.addEventListener("DOMContentLoaded", function (event) {
toastr.success('{{ session()->get('success') }}');
})
</script>
@endif
And for fail messages:
@if(session()->has('fail'))
<script>
document.addEventListener("DOMContentLoaded", function (event) {
toastr.error('{{ session()->get('fail') }}');
})
</script>
@endif
Also, here is the warning() method. Don’t forget to rebuild your assets using the following command and clear the browser cache:
npm run dev
Let’s have a look at the Toastr messages in action:
Wrapping Up
This short article explains how to redirect with message in Laravel. As you can see, it is very simple. What method do you use to inform users about successful operations or failures? Tell us in the comments section!
