Dec 21, 2014

Ketan Patel

Custom Flash Messages in CakePHP

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... :)

Ketan Patel

About Ketan Patel -

I have developed a wide range of websites using CorePHP, Opencart, CakePHP and CodeIgniter including sites for startup companies and small businesses. Apart from my blogging life, I like to read Novels, Listening music and Net surfing.

Subscribe to this Blog via Email :