How do I display result or error messages in CodeIgniter application

Sometimes we need to display general messages or error messages to the user noticing about certain action, for example on success or failure.

Imagine you are submitting a form and then creating or updating the data in the database. You may be interested in noticing the user about the result for that action.

This is the way I use to display general messages (and error messages) in CodeIgniter application.

The result

This is how my message looks.

codeigniter-display-message

How to display the message?

Now, in order to display that information message, I do the following:

First, when submitting the form, after validating it, in the controller I call the model function that will save the entity (license in this case). I make sure that model function returns a result, and FALSE result in case of error (I usually return an array result on success with an ID element with the last inserted identifier if the result was an insert, or the just updated entity identifier if it was an update, but that is out of this article’s scope).

Controller

Imagine we are calling the following method in the controller:

$result = $this->license_model->create_or_update_license($agent_id, $state, $data);

Then, we need to see if that was an error or not. Based on that result, I will use CodeIgniter’s set_flashdata function in the Session library, as follows:

if ($result)
{
	$this->session->set_flashdata( 'message', array( 'title' => 'License created', 'content' => 'License has been saved sucessfully', 'type' => 'message' ));
	redirect('agent/licenses');	

} else
{
	$this->session->set_flashdata( 'message', array( 'title' => 'License error', 'content' => 'License could not be saved', 'type' => 'error' ));
	redirect('agent/licenses');
}

Once the Flash message has been set, I redirect the user to the form or a list of results. That is needed in order to get the flash working (you cannot just load the view in this case… well, you can but this method will not work in such case). When comparing $result TRUE or FALSE, please notice the different value for type. I am using type=message for successful messages, and type=error for error mesages.

View

In the view, just above the form, I use this snippet.



<?= @flash_message() ?>

To keep it simple, I just added @ to avoid any error message, but probably if you are looking for a better coding practice and you may not do that.

A Helper

Then, I put this flash message function as a helper function, so it is available when calling from the view.


function flash_message()
{
	// get flash message from CI instance
	$ci =& get_instance();
	$flashmsg = $ci->session->flashdata('message');

	$html = '';
	if (is_array($flashmsg))
	{
		$html = '<div id="flashmessage" class="'.$flashmsg[type].'">
			<img style="float: right; cursor: pointer" id="closemessage" src="'.base_url().'images/cross.png" />
			<strong>'.$flashmsg['title'].'</strong>
			<p>'.$flashmsg['content'].'</p>
			</div>';
	}
	return $html;
}

jQuery part

Finally, I added a simple effect to slide down and blink the message box, and adding the close functionality with a simple jQuery function. You can do something like this. Of course, you can modify it or just avoid using the jQuery effect if it is desired.


// first slide down and blink the message box
$("#flashmessage").animate({top: "0px"}, 1000 ).show('fast').fadeIn(200).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

Some CSS styling

Finally, just add some CSS styling for #flashmessage, using message or error class names.


.message{
    border:1px solid #CCCCCC;
    width:300px;
    border:1px solid #c93;
    background:#ffc;
    padding:5px;
    color: #333333;
    margin-bottom:10px;
}

Enjoy it.

jigniter™