Since I started programming with CakePHP almost two years ago, I’ve had a bunch of widgets on the right side of my page ( http://www.JapaneseTesting.com ).

Which pages each of these widgets appear on is guided by the controller, action, user role, or any combination thereof.

I used to deal with this in a Controller-Model combination, called with resource-heavy Request Actions. Then I found a better way. A Simple way. A way with Branching Elements.

Read on to see how to dynamically put customizable element blocks on any of your pages.

The Layout

On my site, each of the widgets is a separate element, and the way I used to deal with deciding which page to display them on was by running a RequestAction on my Widgets Controller, which in turn grabbed the widget data from the DB, checked which widgets needed to be displayed when, grabbed the elements, and then displayed each of them. Overall a very thorough way of managing and displaying the widgets, but not very nice on my load-time (especially when I started using DebugKit).

Eventually I started using a widgeting component of my own design that took an array of widget types, their caching statuses, various data, etc and threw it all into a controller variable which in turn threw it into a helper and then finally displayed the widgets.

This might have actually been slower than the previous DB calls, and let code to be placed in either controllers or views, which defeated the whole purpose of having a single consolidated place to insert the code.

But then I found a better way:

Enter the $this->name and $this->action variables!

Every view (and every element in that view) has the $this->name (the controller name) and the $this->action (the controller’s action name) available to them. That means that in any view, we know exactly what method has been called to get there (and thus, what variables, data, etc are available).

We’re going to use these variables, along with some Auth information in order to create widgets that obey a set of rules to display a bunch of widgets.

Our five widget elements

We’re going to have 5 elements that are going to be displayed to the user, depending on what page they’re looking at, and if they’re logged in or not.

• who’s logged in Display  [ Shown to users who are logged in ]
• latest Articles Display    [ Always Shown ]
• latest Posts Display         [ Only available on Forum pages ]
• Upgrade now Advert      [ Available on every page except the Forum pages ]
• Handy Post editing          [ Shown only on the Forums/edit page ]

We’re going to store these in our elements folder with the following names:

• /elements/widgets/whos_online.ctp
• /elements/widgets/latest_articles.ctp
• /elements/widgets/latest_posts.ctp
• /elements/widgets/upgrade_now.ctp
• /elements/widgets/post_edit.ctp

Controller Widgets

Then, we’re going to create a couple of “controller” widgets that allow us to break up the show/don’t show logic a little bit. These are each going to be named after the controller that will display them.

It’s up to you whether or not you want to use these, or just stick them in the main controller (see below) but I like the distribution of data, and it keeps me from having a huge main controller loaded on every page load.

Also, because I might have multiple widget bars with different contents, I’m going to put these in a different elements folder, named “sidebar_rt”

• Controls all the Widgets that are Available only on the Forms pages [ /elements/sidebar_rt/forms.ctp ]

The Main Controller

Finally, we’re going to make a main controller element that will call all the widgets from a single location so we don’t have a lot of unnecessary code in our layout.

• Main Widget Controller [ /elements/sidebar_rt/index.ctp ]

Putting it all together

So, now that we have the files created, let’s see what goes in them.

First, in your /layouts/default.ctp file, we put the main sidebar controller into the layout.

// /layouts/default.ctp
<div class="sidebar right">
     <?= $this->element('sidebar_rt/index'); ?>
</div>

Then, set the logic for the sidebar widgets:

// /elements/sidebar_rt/index.ctp

// Include the widget that will always be shown
echo $this->element('widgets/latest_articles');

// Include the widgets that are shown only if the user is logged in
if( !empty( $_user_info ) ){
   echo $this->element('widgets/whos_online');
}

// Include the widget that's shown everywhere except the forums
if( $this->name != 'forums' ){
   echo $this->element('widgets/upgrade_now');
}

// Finally, include the Controller widget, which is named after the controller name
echo $this->element('sidebar_rt/'.$this->name);

Now we’ve got three of our five widgets down.

Next, we just need to set up the controllers for the forums and users widgets

// /elements/sidebar_rt/forums.ctp

// These widgets will be displayed on every page in the forums controller:
echo $this->element('widgets/latest_posts');

// These widgets will only be shown for the corresponding action
switch($this->action){
   case 'edit':
      echo $this->element('widgets/post_edit');
      break;
}

And we’re done!

Using variables in Elements

Remember earlier when we said that we can use our view variables in Elements? Well, since we know when each widget will be used (controller/action), we know what variables will be available to them.

So, let’s look at the ‘post_edit’ widget up above. We want to have buttons to edit the current post, but we need to be able to access the current element’s id and other data in order to make a good edit box.

Luckily, we have all the data from the main view available in the widget as well!

// /elements/widgets/post_edit.ctp

<div class="actions">
   <a href="/posts/publish/<?=$this->data['Post']['id']?>">Publish this post</a>
   <a href="/posts/preview/<?=$this->data['Post']['id']?>">Preview this post</a>
   <a href="/posts/delete/<?=$this->data['Post']['id']?>">Delete this post</a>
</div>

<div class="tags">
   <? foreach($this->data['Tags'] as $tag ):?>
      <a href="/tags/delete/<?=$tag['id']?>"><?=$tag['name']?></a>
   <?endforeach;?>
   <a href="/tags/add/post_id:<?=$this->data['Post']['id']?>">Add a tag</a>
</div>

Conclusion: Really not that hard

Really, getting a good widget system working is fairly simple, and doesn’t require a lot of backend programming, but you need to have a solid idea of what you want to display in your sidebar, and how you want to organize the data.

Remember that your widget data is usually supplemental to your page’s message, and you shouldn’t waste precious processor cycles or memory with a high-overhead system when a simple switch block will do the trick.

Bonus Chatter: Doing it all in one stroke

So, let’s say you don’t like having all those file calls and separation of files: if you want, you can do it all in one “controller” element.

So, like before, we have the same element setup

• /elements
  • /widgets
    • whos_online.ctp
    • latest_articles.ctp
    • latest_posts.ctp
    • upgrade_now.ctp
    • post_edit.ctp
  • sidebar_rt.ctp

And in the layout, we’re just going to call the simple one liner:

// /layouts/default.ctp
<div class="sidebar right">
     <?= $this->element('sidebar_rt'); ?>
</div>

And then in the sidebar_rt.ctp file, we include a long switch statement

// /elements/sidebar_rt.ctp

// Include the widget that will always be shown
echo $this->element('widgets/latest_articles');

// Include the widgets that are shown only if the user is logged in
if( !empty( $_user_info ) ){
   echo $this->element('widgets/whos_online');
}

// Include the widgets for each controller / action page
switch( $this-> name ){
   case 'users':
      echo $this->element('widgets/upgrade_now');
      break;
   case 'forums':
      echo $this->element('widgets/latest_posts');
      break;
   case 'posts':
      switch( $this->action ){
         case 'edit':
            echo $this->element('widgets/post_edit');
            break;
      }
      echo $this->element('widgets/upgrade_now');
      break;
   default':
      echo $this->element('widgets/upgrade_now');
      break;

}

It’s a little more unwieldy than the separated version, but if you only have a few controllers that have special cases it might be easier to have all your widget data in one place.

Have any comments? Know of a better way? I’d love to hear them!

Smashing Magazine, for all their “Top 10″ and “Best 50″ articles, continues to occasionally post very helpful and mind-bending articles about Design and Production.

Their newest article about CSS is aimed at the CSS beginner, but has a few tricks that I wasn’t even aware of.

Floating and Overflow

The first, I want to point out is something that has always bugged me: the fact that a floated image is not completely contained within its parent container. Apparently this can be fixed simply by adding overflow:hidden to the div (autoflow:auto also works).

Floating and Double Margins (ie6 Bug)

Additionally, Internet Explorer 6 seems to double the margin of floated elements. So your 5px margin becomes 10px in IE6, and is the cause of all of my perfectly aligned floating divs crashing to the ground when I test the page in IE6 (grumble grumble hate hate)

This is also easy to fix: just add display: inline to your floated element.

.floated_element {
     float: left;
     width: 200px;
     margin: 5px;
     display: inline; /*--IE6 workaround--*/
     }

Deserves a once-over

There were alot of other great tips and points that even seasoned CSS-ers should look at — you never know when you might find something new, or an easy way to do something you had been futzing with. If you get a chance, it’s definitely worth a look.

Did you know that CakePHP automatically caches a lot of your data so that you don’t have to call (for example) model references over and over again? Isn’t that nice?

Did you know that if you make a change to your database (for example: adding a column) and the caches haven’t been updated, it will neither SAVE nor RETRIEVE any data relating to those changes?

Did you know that cake won’t tell you that your models might be out of date, and that you can easily waste 2-3 HOURS of your life on something stupid like that?

Do yourself a favor: When you change your database, delete EVERYTHING in app\tmp\cache\models

And thankyou for the heads up, Snook.ca

Just a quicky:

I was looking for some good syntax-highlighting plugins for WordPress, but so many of them were hard to use, required configuration or just plain mangled my code.

So then I found Syntax Highlighter Evolved. Set it up in 5 minutes, easy as pie to use, and no more code mangling. Definitely recommended.

Syntax Highlighter Evolved is recommended by some guy in Japan!

Now that’s a tagline that will sell products if I ever heard one!

So, as I as spent half the day today working on getting my “Remember Me” function to work, I figured it would be a good thing to share with the rest of the world, so that they didn’t have to ever EVER put up with the kind of stuff I went through today.

So, first of all, we all know what a remember me function is, right?

Yup, that's it (WordPress)

And there it is again (google)

The “Remember me” function is a little checkbox that the user checks when they log in so that they don’t have to bother logging in again as long as they keep visiting the site every XX days where XX is the number of days that the site will remember them for.

Sounds easy! Let’s do it in cake!

Great idea! Cake should make it super easy! And if you search for cake and remember me functions, a lot (or rather a lot of variations based around 2 or 3 guys’ code) of sites will pop up. I personally recommend the RememberMe component from the Neutrino CMS, as it’s small, lightweight and doesn’t take much configuring. (And don’t believe the page that comes up when you enter “CakePHP rememberme” into google. That’s what got me off on the wrong foot)

And if you plan on something really simple with your site (i.e. logged in or not logged in) then it’s really easy to set up.

1. Get the component that you’re going to use (I used RememberMe)
2. Plop it in the components.
3. Set your references to it in your users/login function, and
4. (The most important part) attach the component’s cookie checking function to the app_controller’s beforeRender function.

Now, why’s the last step the most important? Because the “remember me” cookie needs to be checked for every time a page is visited, otherwise it can’t do it’s job. The first version of the remember me code I had used when I first started CakePHP had the cookie management in the users/login function. Like this:

function login() {
//-- code inside this function will execute only when autoRedirect was set to false (i.e. in a beforeFilter).
if ($this->Auth->user()) {
if (!empty($this->data) && $this->data['User']['remember_me']) {
$cookie = array();
$cookie['username'] = $this->data['User']['username'];
$cookie['password'] = $this->data['User']['password'];
$this->Cookie->write('Auth.User', $cookie, true, '+2 weeks');
unset($this->data['User']['remember_me']);
}
$this->redirect($this->Auth->redirect());
}
if (empty($this->data)) {
$cookie = $this->Cookie->read('Auth.User');
if (!is_null($cookie)) {
if ($this->Auth->login($cookie)) {
//  Clear auth message, just in case we use it.
$this->Session->del('Message.auth');
$this->redirect($this->Auth->redirect());
} else { // Delete invalid Cookie
$this->Cookie->del('Auth.User');
}
}
}
}

Makes perfect sense, right?

NO

The problem is that users/login only gets called when there’s a login to be processed (which is not explained very well in the documentation). This becomes a problem when you are using the Auth->allow() array to let people access parts of the site, and not others. (Even more of a problem when the same page has different data for logged in and non-logged in users)

What happens is that since the action is allowed, Cake decides that there’s no reason to check for a login, so even if the login cookie exists, it doesn’t get checked because the Users/Login function never gets called.

So, in most cases, this is not a problem — just put the RememberMe->check() function into the AppController’s beforeRender — but what if you want do something more after a user logs in? Something like increasing their login count, setting login time, getting info about them, etc etc.

Custom Functions and Remember Me

Most RememberMe components and solutions have a provision for callbacks after a successful cookie login (much like isAuthorized) however (also like isAuthorized) the function has to be in either:

• The AppController
• The Current Controller

Because the component only has access to the controller that’s currently calling it, you’re confined to either the code in the AppController or the currently viewed controller. And if your current controller is Articles (because your user is looking at an article) then we can’t directly access the users controller to run our little _after_login function. (With Models you can get to from almost anywhere in your code through skillful use of relations, but Controllers are a bit trickier)

So, what do we do? We take a little hint from the cake library, and use the wonderful App:import function to forcibly bring the Controller to us. Now this is an expensive call, because it’s essentially ringing up an entire new controller with all its associated models, et al. So we need to be sure to do this only when the user is logging in through a cookie. That way, it’ll only happen once for the user’s session, and we can quickly get rid of its memory-eating load on the next page view.

So, let’s look at some code:

The Original RememberMe component

<?php
class RememberMeComponent extends Object
{
var $components = array('Auth', 'Cookie');
var $controller = null;

/**
* Cookie retention period.
*
* @var string
*/
var $period = '+2 weeks';
var $cookieName = 'User';

function startup(&$controller)
{
$this->controller =& $controller;
}

function remember($username, $password)
{
$cookie = array();
$cookie[$this->Auth->fields['username']] = $username;
$cookie[$this->Auth->fields['password']] = $password;
$this->Cookie->write($this->cookieName, $cookie, true, $this->period);
}

function check()
{
$cookie = $this->Cookie->read($this->cookieName);

if (!is_array($cookie) || $this->Auth->user())
return;

if ($this->Auth->login($cookie))
{
$this->Cookie->write($this->cookieName, $cookie, true, $this->period);
}
else
{
$this->delete();
}
}

function delete()
{
$this->Cookie->del($this->cookieName);
}
}

?>

So, this check function has got to go

We need to be able to load the UsersController so that we can get to our _post_login() function to do all our login magic like checking how the user’s subscription is going, how long many times they’ve logged in, etc.

function check()
{
// If you want to change the cookie name, change it here
$this->Cookie->name = 'rememberme';
$cookie = $this->Cookie->read($this->cookieName);

if (!is_array($cookie) || $this->Auth->user())
return;

if ($this->Auth->login($cookie))
{
$this->Cookie->write($this->cookieName, $cookie, true, $this->period);
if (!App::import('Controller', 'Users')) {
return false;
}
$className = 'UsersController';
$Ctrl =& new $className();
$Ctrl->constructClasses();
$Ctrl->_post_login($this->Auth->user('id'));
}
else
{
$this->delete();
}
}

So, here’s my code as it stands now. What I’ve done is if there is a cookie, and you can successfully login with said cookie (Through $this->Auth->login($cookie) ) then we’re going to spin up the Controller called Users through the App:import function. If it can’t load, then we return false, but if it DOES load, then we create a new Controller and construct it so that we can then call our post_login script with the Auth->user Info. Everything else is set up just how the instructions on the RememberMe Component Page say.

Conclusion

Getting a RememberMe function working in CakePHP really isn’t that difficult, but the problem (like a lot of CakePHP) is that the signal-to-noise ratio of those who know what they’re doing and those that don’t is incredibly high. I don’t profess to have all the answers, but hopefully just some of the problems that I’ve had will help others who are struggling with the same issues.

Till next time!