PostMultiple CSS Style Session Flash’es in CakePHP

CakePHPWe all know that CakePHP has the Session component that allows us to login and logout users and to show them messages that appear only once:

<?php $this->Session->setFlash('Random message that appears only once'); ?>

We can style this message the way we want but what about having these kind of messages that are style differently depending on what kind of messages we show (error, success, warning or general messages ).

The easy way to do it is to create our own helper. So let’s go to app/views/helpers folder and create the helper. Create a new file and rename it to flash.php and put the following code in it:


<?php
class FlashHelper extends Helper {

var $helpers = array('Session');

function show() {
$messages = $this->Session->read('messages');
$html = '<ul class="system_messages">';
if($messages) {
foreach ($messages as $type => $msgs) {
foreach ($msgs as $msg) {
if (!empty($msg)) {
$html .= "<li class='$type'><span class='ico'></span><strong class='system_title'>$msg</strong></li>";
}
}
}
$html .= "</ul>";
$this->Session->del('messages');
return $this->output( $html );
}
}
}
?>

As you can see the show() function read the messages stored in the session. Each read message is written back inside a <li> tag that has a different class $type.

Now go ahead and edit your app_controller.php file located in the app folder.
If you already have the helpers array written in it then add the Flash helper to the array. If not then put this code in the file:


var $helpers = array('Flash');

Now add the function below to the app_controller.php as well:


function flash( $message, $class = 'status' ) {
$old = $this->Session->read('messages');
$old[$class][] = $message;
$this->Session->write('messages', $old );
}

Create different css styles for the types of message you want to display (error, success, warning or general messages).

Now to add a flash message you have to use the flash helper instead of the session flash component.
So … instead of:


$this->Session->setFlash('A cool message that is a warning!');

you will use :


$this->flash('A cool message that is a warning!', 'warning');

My Example

I created the following CSS styles: white, red, green, blue, yellow.

Now all I have to do is this:


$this->flash('This is a simple notification message', 'white');
$this->flash('This is an error message', 'red');
$this->flash('This is a successful message', 'green');
$this->flash('This is a blue message :) ', 'blue');
$this->flash('This is a warning message', 'yellow');

inside a function and here’s the result:

CakePHP example of different css styled session flash messages

Hope you find this useful.

Stay Connected

Subscribe to RSS Feed

Subscribe to RSS Feed

Follow me on Twitter

Follow me on Twitter

Subscribe via e-mail

Subscribe via e-mail

Comments 4 Responses to “Multiple CSS Style Session Flash’es in CakePHP”

  1. Or you could just use the already implemented CakePHP way:

    Create /app/views/layouts/flash/warning.ctp and then from the controller call
    $this->Session->setFlash(‘This is a warning message.’, ‘flash/warning’);

    The only difference is that the Cake flash system wont let you throw half-a-dozen different messages at the user at once. Then again it was never intended for that…

    1. Thank you for your thoughts Robert. I don’t send a bunch of messages to users either. This was just for the example so you could see the different styled flash messages.

  2. I have got a tip for implementing this functionality much more easy:

    When you call $this->Session->setFlash(..your message.., ‘div’, array(‘class’ => ‘..yourclass’..)), then cakePHP will render your own classname for the message.

    It tooks me a small amount of time to find this in the cake code, but it works great for me!

    I hope this helps people out a little bit.

    1. Yes this is true but you cannot send multiple messages with different classes at once with the built in setFlash function. This approach is useful especially for an admin dashboard when you enter different messages with different css styles. This is why I use this method.


Post your comment

Leave a Reply

Time limit is exhausted. Please reload the CAPTCHA.