Using CakePHP's Session component we can display a flash message after a redirect(). It provides an elegant way of informing a user what happened after the page refresh. For example, when the user saves a post, you can inform the user that the post has either been saved correctly, or that is has failed to do so. To make the user more aware of this message we show in this tutorial how to add CSS styling to the flash message and to provide a much more elegant way of displaying these flash messages, we show how to let the message fade in and out. We are going to use a combination of CSS and jQuery. We will make use of the animate.css package as provided by Daniel Eden. For some nice icons, we will use the font-awesome library a well.
Curious for the final result? Click here to see a demo.
For this tutorial, we will make use of the following tools:
In your Controller, normally you would only use the first argument of the setFlash function of the Session component. We expand on the default behaviour by adding a second argument which refers to an Element we are going to use to display the Flash message.
$this->Session->setFlash('Item successfully saved', 'flash_success);
Create the Element file /app/View/Element/flash_success.ctp and give it the content as shown below. Note that we have used here for the styling the Bootstrap framework, but you could in principle set your own styling.
<div class="alert alert-success alert-hover" id="flash_success">
<button class="close">x</button>
<i class="fa fa-check"></i> <?php echo $message; ?>
</div>
<script type="text/javascript">
$('#flash_success').addClass('animated fadeInDown');
$( ".close" ).click(function() {
jQuery('#flash_success').removeClass('fadeInDown');
jQuery('#flash_success').addClass('fadeOutUp');
});
</script>
Let's go through the code. The first four lines generate the message. Lines 6-12 is where the magic happens. When the document is loaded, jQuery automatically adds two CSS styles to the div block in line 1. Note that the #flash_success identifier refers to the id attribute of the div. Then, a function is added which triggers when the user clicks on the button with the 'close' class. The function then removes the fadeInDown class and adds the fadeOutUp class.
The only thing left to do is to define then the fadeInDown and fadeOutUp classes and the animated class that goes along with it. These are redefined in animate.css as provided by Daniel Eden, but we will only copy those classes from there which we are actually using. Put the following in app/webroot/css/animate.css:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Don't forget to link to font-awesome for the icons and to the jQuery library in your layout file (app/View/Layout/Default.ctp):
echo $this->Html->css('animate.css');
echo $this->Html->css('font-awesome.min');
echo $this->Html->script('jquery.min.js');
No post data.
No querystring data.
To view Cookies, add CookieComponent to Controller
Query | Affected | Num. rows | Took (ms) | Actions |
---|---|---|---|---|
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`posts` AS `Post` WHERE `Post`.`id` = 11 | 1 | 1 | 1 | |
SELECT `Post`.`active`, `Post`.`id` FROM `ivofilot_nl`.`posts` AS `Post` WHERE `Post`.`id` = 11 LIMIT 1 | 1 | 1 | 0 | |
SELECT `Comment`.`email`, `Comment`.`comment`, `Comment`.`id`, `Comment`.`post_id`, `Comment`.`created` FROM `ivofilot_nl`.`comments` AS `Comment` WHERE `Comment`.`post_id` = (11) | 0 | 0 | 0 | |
SELECT `Tag`.`id`, `Tag`.`name`, `Tag`.`icon`, `Tag`.`color`, `PostsTag`.`post_id`, `PostsTag`.`tag_id` FROM `ivofilot_nl`.`tags` AS `Tag` JOIN `ivofilot_nl`.`posts_tags` AS `PostsTag` ON (`PostsTag`.`post_id` = 11 AND `PostsTag`.`tag_id` = `Tag`.`id`) | 4 | 4 | 0 | |
UPDATE `posts` SET `watched`=`watched`+1 WHERE `id`='11' | 1 | 1 | 0 | |
SELECT `Comment`.`id`, `Comment`.`email`, `Comment`.`comment`, `Comment`.`post_id`, `Comment`.`parent_id`, `Comment`.`lft`, `Comment`.`rght`, `Comment`.`active`, `Comment`.`code`, `Comment`.`deleted`, `Comment`.`created`, `Comment`.`modified`, `Post`.`id`, `Post`.`title`, `Post`.`content`, `Post`.`watched`, `Post`.`active`, `Post`.`created`, `Post`.`modified`, `ParentComment`.`id`, `ParentComment`.`email`, `ParentComment`.`comment`, `ParentComment`.`post_id`, `ParentComment`.`parent_id`, `ParentComment`.`lft`, `ParentComment`.`rght`, `ParentComment`.`active`, `ParentComment`.`code`, `ParentComment`.`deleted`, `ParentComment`.`created`, `ParentComment`.`modified` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 AND `Comment`.`active` = '1' | 0 | 0 | 1 | maybe slow |
SELECT `Tag`.`id`, `Tag`.`name`, `Tag`.`icon`, `Tag`.`color` FROM `ivofilot_nl`.`tags` AS `Tag` inner JOIN `ivofilot_nl`.`posts_tags` AS `PostsTag` ON (`Tag`.`id` = `PostsTag`.`tag_id`) inner JOIN `ivofilot_nl`.`posts` AS `Post` ON (`PostsTag`.`post_id` = `Post`.`id`) WHERE `Post`.`id` = 11 | 4 | 4 | 0 | |
SELECT `Post`.`id`, `Post`.`title`, `Post`.`content`, `Post`.`watched`, `Post`.`active`, `Post`.`created`, `Post`.`modified`, `PostsTag`.`post_id`, `PostsTag`.`tag_id` FROM `ivofilot_nl`.`posts` AS `Post` JOIN `ivofilot_nl`.`posts_tags` AS `PostsTag` ON (`PostsTag`.`tag_id` IN (6, 8, 9, 10) AND `PostsTag`.`post_id` = `Post`.`id`) | 7 | 7 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 14 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 15 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 16 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 | 1 | 1 | 0 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 | 1 | 1 | 0 | |
SELECT `Post`.`id`, `Post`.`title`, `Post`.`content`, `Post`.`watched`, `Post`.`active`, `Post`.`created`, `Post`.`modified` FROM `ivofilot_nl`.`posts` AS `Post` WHERE `Post`.`id` = 11 LIMIT 1 | 1 | 1 | 1 | |
SELECT COUNT(*) AS `count` FROM `ivofilot_nl`.`comments` AS `Comment` LEFT JOIN `ivofilot_nl`.`posts` AS `Post` ON (`Comment`.`post_id` = `Post`.`id`) LEFT JOIN `ivofilot_nl`.`comments` AS `ParentComment` ON (`Comment`.`parent_id` = `ParentComment`.`id`) WHERE `Comment`.`post_id` = 11 | 1 | 1 | 1 |
Peak Memory Use 5.07 MB
Message | Memory use |
---|---|
Component initialization | 993 KB |
Controller action start | 1.02 MB |
Controller render start | 1.70 MB |
View render complete | 2.12 MB |
Total Request Time: 465 (ms)
Message | Time in ms | Graph |
---|---|---|
Core Processing (Derived from $_SERVER["REQUEST_TIME"]) | 158.87 | |
Event: Controller.initialize | 0.30 | |
Event: Controller.startup | 11.05 | |
Controller action | 134.04 | |
Event: Controller.beforeRender | 44.35 | |
» Processing toolbar data | 44.27 | |
Rendering View | 61.57 | |
» Event: View.beforeRender | 0.03 | |
» Rendering APP/View/Posts/view.ctp | 54.96 | |
» » Rendering APP/View/Elements/code_highlighting.ctp | 6.15 | |
» » Rendering APP/View/Elements/post.commentform.ctp | 28.68 | |
» » » Rendering APP/View/Elements/post.comment.captcha.ctp | 3.80 | |
» » Rendering APP/View/Elements/post.comments.ctp | 0.56 | |
» » Rendering APP/View/Elements/post.relatedpost.ctp | 0.92 | |
» Event: View.afterRender | 0.02 | |
» Event: View.beforeLayout | 0.02 | |
» Rendering APP/View/Layouts/default.ctp | 3.40 | |
» » Rendering APP/View/Elements/navbar.ctp | 0.64 | |
» » Rendering APP/View/Elements/footer.ctp | 1.14 | |
» » » Rendering APP/View/Elements/biography.ctp | 0.66 | |
Event: View.afterLayout | 0.00 |
Constant | Value |
---|---|
CONFIG | /customers/e/2/e/ivofilot.nl/httpd.www/app/Config/ |
Constant | Value |
---|---|
APP | /customers/e/2/e/ivofilot.nl/httpd.www/app/ |
APP_DIR | app |
APPLIBS | /customers/e/2/e/ivofilot.nl/httpd.www/app/Lib/ |
CACHE | /customers/e/2/e/ivofilot.nl/httpd.www/app/tmp/cache/ |
CAKE | /customers/e/2/e/ivofilot.nl/httpd.www/lib/Cake/ |
CAKE_CORE_INCLUDE_PATH | /customers/e/2/e/ivofilot.nl/httpd.www/lib |
CORE_PATH | /customers/e/2/e/ivofilot.nl/httpd.www/lib/ |
CAKE_VERSION | 2.10.13 |
CSS | /customers/e/2/e/ivofilot.nl/httpd.www/app/webroot/css/ |
CSS_URL | css/ |
DS | / |
FULL_BASE_URL | https://ivofilot.nl |
IMAGES | /customers/e/2/e/ivofilot.nl/httpd.www/app/webroot/img/ |
IMAGES_URL | img/ |
JS | /customers/e/2/e/ivofilot.nl/httpd.www/app/webroot/js/ |
JS_URL | js/ |
LOGS | /customers/e/2/e/ivofilot.nl/httpd.www/app/tmp/logs/ |
ROOT | /customers/e/2/e/ivofilot.nl/httpd.www |
TESTS | /customers/e/2/e/ivofilot.nl/httpd.www/app/Test/ |
TMP | /customers/e/2/e/ivofilot.nl/httpd.www/app/tmp/ |
VENDORS | /customers/e/2/e/ivofilot.nl/httpd.www/vendors/ |
WEBROOT_DIR | webroot |
WWW_ROOT | /customers/e/2/e/ivofilot.nl/httpd.www/app/webroot/ |
Environment Variable | Value |
---|---|
Php Version | 7.4.16 |
Onecom Domain Name | ivofilot.nl |
Onecom Domain Root | /customers/e/2/e/ivofilot.nl/ |
Onecom Memorylimit | 1073741824 |
Onecom Cpu Shares | 1024 |
Onecom Exec | latest |
Onecom Dir Layout Ver | 0 |
Content Length | 0 |
Http Connection | close |
Script Name | /app/webroot/index.php |
Request Uri | /posts/view/11/Beautiful+flash+messages+in+CakePHP |
Query String | |
Request Method | GET |
Server Protocol | HTTP/1.1 |
Gateway Interface | CGI/1.1 |
Redirect Url | /app/webroot/posts/view/11/Beautiful+flash+messages+in+CakePHP |
Remote Port | 37066 |
Script Filename | /customers/e/2/e/ivofilot.nl/httpd.www/app/webroot/index.php |
Server Admin | support@one.com |
Context Document Root | /var/www |
Context Prefix | |
Request Scheme | https |
Remote Addr | 100.25.42.117 |
Server Port | 80 |
Server Addr | 10.27.35.20 |
Server Name | ivofilot.nl |
Server Software | Apache |
Server Signature | |
Path | /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin |
Http X Varnish | 393807011 |
Http Accept Encoding | gzip |
Http X Onecom Host | ivofilot.nl |
Http X Onecom Brand | one.com |
Http X Forwarded Proto | https |
Http X Onecom Forwarded Proto | https |
Http X Forwarded For | 100.25.42.117 |
Http Host | ivofilot.nl |
Http Accept Language | en-US,en;q=0.5 |
Http Accept | text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 |
Http User Agent | CCBot/2.0 (https://commoncrawl.org/faq/) |
Env Vcv Env Addons Id | one.com |
Env Vcv Token Url | https://wpapi.one.com/api/v1.0/plugins/visualcomposer/activate |
Onecom One Photo Url | https://onephoto.one.com/domain_discover |
Onecom Wp Addons Api | https://wpapi.one.com |
Onecom Webshop Host | webshop2.cst.webpod8-cph3.one.com |
Https | on |
Onecom Tmpdir | /customers/e/2/e/ivofilot.nl//tmp |
Domain Name | ivofilot.nl |
Onecom Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Redirect Status | 200 |
Redirect Env Vcv Env Addons Id | one.com |
Redirect Env Vcv Token Url | https://wpapi.one.com/api/v1.0/plugins/visualcomposer/activate |
Redirect Onecom One Photo Url | https://onephoto.one.com/domain_discover |
Redirect Onecom Wp Addons Api | https://wpapi.one.com |
Redirect Onecom Webshop Host | webshop2.cst.webpod8-cph3.one.com |
Redirect Https | on |
Redirect Onecom Cpu Shares | 1024 |
Redirect Onecom Memorylimit | 1073741824 |
Redirect Onecom Exec | latest |
Redirect Onecom Dir Layout Ver | 0 |
Redirect Onecom Tmpdir | /customers/e/2/e/ivofilot.nl//tmp |
Redirect Onecom Domain Root | /customers/e/2/e/ivofilot.nl/ |
Redirect Onecom Domain Name | ivofilot.nl |
Redirect Domain Name | ivofilot.nl |
Redirect Onecom Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Redirect Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Redirect Redirect Status | 200 |
Redirect Redirect Env Vcv Env Addons Id | one.com |
Redirect Redirect Env Vcv Token Url | https://wpapi.one.com/api/v1.0/plugins/visualcomposer/activate |
Redirect Redirect Onecom One Photo Url | https://onephoto.one.com/domain_discover |
Redirect Redirect Onecom Wp Addons Api | https://wpapi.one.com |
Redirect Redirect Onecom Webshop Host | webshop2.cst.webpod8-cph3.one.com |
Redirect Redirect Https | on |
Redirect Redirect Onecom Cpu Shares | 1024 |
Redirect Redirect Onecom Memorylimit | 1073741824 |
Redirect Redirect Onecom Exec | latest |
Redirect Redirect Onecom Dir Layout Ver | 0 |
Redirect Redirect Onecom Tmpdir | /customers/e/2/e/ivofilot.nl//tmp |
Redirect Redirect Onecom Domain Root | /customers/e/2/e/ivofilot.nl/ |
Redirect Redirect Onecom Domain Name | ivofilot.nl |
Redirect Redirect Domain Name | ivofilot.nl |
Redirect Redirect Onecom Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Redirect Redirect Document Root | /customers/e/2/e/ivofilot.nl/httpd.www |
Fcgi Role | RESPONDER |
Php Self | /app/webroot/index.php |
Request Time Float | 1619010246.3381 |
Request Time | 1619010246 |