on Tutorials

CakePHP from scratch: Introduction to layouts and theming

4 comments
cakephp1
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

Views are the V in MVC. Views are responsible for generating the specific output required for the request. Often this is in the form of HTML, XML, or JSON, but streaming files and creating PDF’s that users can download are also responsibilities of the View Layer.

CakePHP view files are common PHP files with a .ctp (CakePHP template) extension. Views are presentation layer of the application which is parsing the data received from model and controller and preparing it to be presented to the viewer (user).

Views can be made up of different parts. Those parts are layouts, elements and helpers.

The basic layout can look similar to this (taken from the CakePHP manual):

<!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><?php echo $title_for_layout?></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Include external files and scripts here (See HTML helper for more info.) -->
<?php echo $scripts_for_layout ?>
</head>
<body>

<!-- If you'd like some sort of menu to 
show up on all of your views, include it here -->
<div id="header">
    <div id="menu">...</div>
</div>

<!-- Here's where I want my views to be displayed -->
<?php echo $content_for_layout ?>

<!-- Add a footer to each displayed page -->
<div id="footer">...</div>

</body>
</html>

As you can see, we have some variables in layout which help us render other view parts easily. The most important one is $content_for_layout . This is the actual place where our view will show.

Layouts are stored in /app/views/layouts folder.

CakePHP features two core layouts (besides CakePHP’s default layout) you can use in your own application: ‘ajax’ and ‘flash’. The Ajax layout is handy for crafting Ajax responses – it’s an empty layout (most ajax calls only require a bit of markup in return, rather than a fully-rendered interface). The flash layout is used for messages shown by the controllers flash() method.

Three other layouts xml, js, and rss exist in the core for a quick and easy way to serve up content that isn’t text/html. We will cover all this things in future tutorials.

Second parts of views in CakePHP are elements. They live in /app/view/elements folder. Many times you need some small bits of code to be included in your application presentation layer like navigation, ads, images, login forms … An element is actually a mini view that can be included in layouts, views and even inside other elements.

Helpers are the component-like classes for the presentation layer of your application. They contain presentational logic that is shared between many views, elements, or layouts.

Little bit about theming. CakePHP has a really great support for theming. To use a theme simple add its name in /app/app_controller.php:

var $view = 'Theme';

And to render it add something like this to you beforeRender method inside the same controller:

$this->theme = "mythemename";

Theme view files need to be within the /app/views/themed/ folder. Within the themed folder, create a folder using the same name as your theme name. Beyond that, the folder structure within the /app/views/themed/example/ folder is exactly the same as /app/views/.

For example, the view file for an edit action of a Posts controller would reside at /app/views/themed/example/posts/edit.ctp. Layout files would reside in /app/views/themed/example/layouts/.

If a view file can’t be found in the theme, CakePHP will try to locate the view file in the /app/views/ folder. This way, you can create master view files and simply override them on a case-by-case basis within your theme folder.

If you have CSS or JavaScript files that are specific to your theme, you can store them in a themed folder within webroot. For example, your stylesheets would be stored in /app/webroot/themed/example/css/ and your JavaScript files would be stored in /app/webroot/themed/example/js/.

All of CakePHP’s built-in helpers are aware of themes and will create the correct paths automatically. Like view files, if a file isn’t in the theme folder, it’ll default to the main webroot folder.

That’s it for today. Next time we will implement all this gained knowledge on our jobs board application to change its appearance. I downloaded a template from the net and we will implement it as our design for the application.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



  • Mohamed Zeid

    Hi Zvonko,

    I really like your tutorials. They are very informative, yet simple. I think you should write about cakephp 1.3 :-) You follow a step-by-step approach and clarifying things to newbies in a good structured manner.

    Thanks a million for sharing your knowledge and great tips with the community.

    • Zvonko

      Thanks for the nice comment

  • Mohamed Zeid

    This is true. They are great.

    By the way, I meant to say you should write a book about cakephp 1.3. That would be great.

  • Pingback: CakePHP from Scratch: Theming in real life example – Part Two