Custom Flash Messages in CakePHP

Notifying user with message when any action happen is very common idea in any application. In this post we'll discuss about the flash messages in cakephp. How to customize the cakephp default flash messages.

Cakephp has by default red colored flash messages for almost all the actions that looks very dulled and doesn't make any difference between the action happened.

You might have seen different messages like success, error, warning , information etc for different actions. To learn how to implement the same thing in cakephp follow the below instructions.

Flash messages are built into the session helper, when the controller action redirect the user on another page then the flash messages are displayed.

Limitation

One limitation with cakephp's setFlash method is that no way of providing message type like success or failure message.

Elements Generation

Here we are creating different elements for each message type.

(1) Create a file called success.ctp in app/View/Elements/ folder and the following code.

<div class="success_msg alert">
   <a href="#" class="close">x</a>
   <?php echo $message; ?>
</div>

(2) Create a file called error.ctp in app/View/Elements/ folder and the following code.

<div class="error_msg alert">
    <a href="#" class="close">x</a>
    <?php echo $message; ?>
</div>

(3) Create a file called info.ctp in app/View/Elements/ folder and the following code.

 <div class="info_msg alert">
    <a class="close" href="#">x</a>
    <?php echo $message; ?>
</div>

(4) Create a file called warning.ctp in app/View/Elements/ folder and the following code.

 <div class="warning_msg alert">
    <a class="close" href="#">x</a>
    <?php echo $message; ?>
</div>

Adding CSS

Add following css classes for the messages in your app/webroot/css/cake.generic.css.

.alert {
    border: 1px solid transparent;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 15px;
}

.error_msg {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.warning_msg {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.info_msg {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.success_msg {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.close{
   text-decoration :none;
   float: right;
}

Include js files

Please make sure that you have included jquery in your default.ctp. Add the new common js just after the jquery inclusion.

 echo $this->Html->script('jquery.min');
 echo $this->Html->script('common');

Now create one js file called 'common.js' in your app/webroot/js folder and add the following code.

$(document).ready(function(){
 // fadeout flash messages on click
 $('#content .close').click(function(){
     $(this).parent().fadeOut();
     return false;
 });

 // fade out flash messages after 3 seconds
 $('.alert').animate({opacity: 1.0}, 3000).fadeOut();
});

How to Use

Use this anywhere in your controller actions,

    $this->Session->setFlash('You have successfully logged in'); //old way
    return $this->redirect(array('action' => 'index'));

Now just pass success, info, error, warning as a second parameter.

    $this->Session->setFlash('You have successfully logged in','success'); // New way
    return $this->redirect(array('action' => 'index'));

Result

Thats it..!! you have custom flash messages in cakephp... :)

PHP Dev Zone