CakePHP from scratch: Introduction to layouts and theming

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.

• layouts: view files that contain presentational code that is found wrapping many interfaces in your application. Most views are rendered inside of a layout.
• elements: smaller, reusable bits of view code. Elements are usually rendered inside of views.
• helpers: these classes encapsulate view logic that is needed in many places in the view layer. Among other things, helpers in CakePHP can help you build forms, build AJAX functionality, paginate model data, or serve RSS feeds.

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

[code lang=”php”]

[/code]

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:

[code lang=”php”]
var $view = ‘Theme’;
[/code]

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

[code lang=”php”]
$this->theme = “mythemename”;
[/code]

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.