A Better Message Bar for Laravel

Showing a message bar is very common task in writing PHP apps. In Laravel, there is even a built-in command ‘with’ to show a message bar with easy!

For example:

return redirect('/')->with('success', 'It works!');

However, this message bar shows green color only, which utilize class="alert alert-success" with Bootstrap 4 Alerts.

Multiple types of alerts

There are eight types of alerts with different colors which can be classified as different usage. For example, the message with green color means a successful operation, while the one with red color often suggests a dangerous or fail situation.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

The code

Let’s modify the code of message bar in order to show different types of alert.

Before

<div class="uper">
  @if(session()->get('success'))
    <div class="alert alert-success">
      <button type="button" class="close" 
        data-  dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      {{ session()->get('success') }}
    </div><br/>
  @endif
</div>

After

<div class="uper">
  @if(session('message'))
    <div class="alert alert-{{ session('message')[0] }}" >
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      {{ session('message')[1] }}
    </div>
  @endif
</div>

Usage:

return redirect('/')
  ->with('message', ['danger', 'You are not an authorized user!']);

The session key is set to ‘message’ and the value is an array which contains ‘message type’ and ‘message content’.

That’s all!

BootstrapForm

BootstrapForm is a form builder that makes it super easy to integrate Twitter Bootstrap-style forms into your Rails App.


I found it is very powerful to use when you try to build a data-binding form.

Installation 

gem 'bootstrap_form'

Note that there are "bootstrap-form" and "bootstrap_forms" gems, so don't make mistake!

Here's a quick example you can start up with:

<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }, help: :block) do |f| %>
  <%= f.alert_message "Please fix the errors below." %>

  <%= f.text_field :twitter_username, prepend: '@', label: 'Twitter' %>
  <%= f.text_field :email %>
  <%= f.password_field :password, help: 'Must be at least 6 characters long' %>
  <%= f.password_field :password_confirmation, label: 'Confirm Password' %>
  <%= f.control_group :terms do %>
    <%= f.check_box :terms, label: 'I agree to the Terms of Service' %>
  <% end %>

  <%= f.actions do %>
    <%= f.primary 'Create My Account', disable_with: 'Saving...' %>
  <% end %>
<% end %>

The magic of BootstrapFrom is as this screen slice below shows:

If there are errors, they will be shown just aside or below the input box. An error notice is also shown as well. It's a really nice feature. 

Just a note for it!