If there are things you want to appear on every page of your website, built in CakePHP, you will want to use a layout. I generally use one layout for header, footer, search, and other static elements. You can use multiples, but most of the time you won’t need more than one.
Layouts are created in the app/views/layouts folder, and are named with .ctp at the end, just like regular view files. The only difference with layouts is that they are applied to every view, as a sort of wrapper or warm blanket. This makes views truly just the content portion of your page. If you have ever used a header file in PHP, or a Master Page in ASP.NET, a layout is the same idea.
You need to name your first layout “default.ctp” as this is a special name that Cake — in it’s all knowing wisdom — will automatically pick up and use, without you telling it to do so.
Creating A Layout
Once you’ve created the file, you’ll need to add the basic contents of an HTML file, doctype, header, body, etc. It is, after all, just an HTML page with strange innards. I think I just made views equal to endtrails, but hey, this is a family blog, right? This will get you started, and I will explain after:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>sitename here - <?php echo $title_for_layout?></title> <?php echo $html->css('styles'); ?> <?php echo $scripts_for_layout ?> </head> <body> header html would go here <?php echo $content_for_layout ?> footer html would go here </body> </html>
You may have noticed a few things Cakeish and not ordinary HTML or PHP here, and if you haven’t well, get to noticing already!
$title_for_layout
This is the page title set in the controller action. So in app/controllers/posts_controller.php (replace posts with whatever your controller is named)
<?php class PostsController extends AppController{ function index(){ // this line sets $title_for_layout $this->pageTitle = 'User Homepage'; } } ?>
$html->css() link
This is the way to include a CSS file in the page, not unique to layouts, but useful none the less. Your css file needs to be in app/webroot/css/ and named whatever you want. In this case, $html->css(‘styles’); is linked to my css file named styles.css, so you leave off the .css when linking.
$scripts_for_layout
This acts as a pass-through, so any javascript files added to views will be loaded in the layout, so you can use them. This allows different views to have different sets of javascript files. To add a javascript file to a certain view, you’d want to use this:
$javascript->link('scriptname', false);
The false tells the script to load in the layout, not inline in the view.
If you want a javascript file to be used in all pages (that use this layout), simply add it directly to the header portion of the layout, like this:
<?php echo $javascript->link('scriptname'); ?>
$content_for_layout
This is the actual view content that will be rendered inside your layout. This is usually your content area that changes based on what page you’re on. This is the meat of the page, where the action happens. The layout is all on the outside looking in, going “wow, I’m boring, wish I did more than just held the content.” Meanwhile the content is all jumping up and down in the bouncy castle going “woo hoo!”
Using more than one layout
If you have more than one layout file, you will need to tell each controller action what layout it should be using.
To set a different layout file for an action, other than default:
In app/controllers/posts_controller.php (replace posts with whatever your controller is named)
<?php class PostsController extends AppController{ function index(){ // this line sets the layout $this->layout = 'portal'; // if not set, it uses the layout file named "default.ctp" } } ?>
That, probably too simply, is a layout and how to use it.