Friday, May 30, 2008

CakePHP: Working with View

In the last article, I wrote a 'Hello World' program.
class TestersController extends Controller{
  var $uses=null;
  var $autoRender=false;
  function sayHello(){
    echo 'Hello, CakePHP!';
  }
}
?>

But it has a problem. According to MVC pattern, a controller shouldn't be used for displaying. However, that example uses 'echo' statement in the controller. It is a bad style. In MVC, view is used for showing data. So today I will write something about how to use view to display a page.

A view is usually a file containing much HTML but bit of PHP code. In CakePHP, a controller is associated with some views, depending on its name. For instance, the controller "Testers", its class name is "TestersController" and it must be located in app/controllers/testers_constroller. Its view must be located in app/views/testers/. Each action can have its view. For example, the view of TesterConstroller::sayHello() is app/views/testers/say_hello.thtml. No more to say, let's have a look at the view's content (say_hello.thtml):
Hello, !

You see, it's very simple, just displays a variable $name. Now the questing is: how to pass the variable from the controller? The answer is "set()". Modify the controller class above:
class TestersController extends Controller{
  var $uses=null;
  function sayHello(){
    $this->set('name','Woody');
  }
}
?>
Here, $this->set('name','Woody') set the variable $name. You see, now the controller don't contain output statement. It just set some variables and pass them to a view (because I removed "$autoRender=false", CakePHP will execute app/views/testers/say_hello.thtml). Now open http://localhost/cake/testers/sayHello (suppose your CakePHP project is in WEBROOT/cake/ directory), you will see "Hello, Woody!".

But there's is another problem. The result contains some more we don't want, like the big title "CakePHP Rapid Development" and the CakePHP's logo on the bottom right. Why is it? The answer is "layout". A layout is similar to a view. Considering a real website. It may contain many pages. But all the pages have some same elements, such as top banner, header text, CSS, etc. We don't need to put these things into all views. Just need layout once. Layout is used for sharing common view elements and it is usually a completed HTML file. Since we haven't create our layout, CakePHP will use its own.

Now let's create a default layout. Its file path is "/app/views/layouts/default.thtml". The content:
<html>
<head>
<title><?php echo $title_for_layout; ?></title>
</head>
<body>
<h1>Learn CakePHP</h1>
<?php echo $content_for_layout; ?>
</body>
</html>
And then change the sayHello action into:
function sayHello(){
  $this->pageTitle='This is the title for the layout.';
  $this->set('name','Woody');
}
Then run the action and check the brower's title bar.

How does a controller get data from a view?

Usually, views contain some forms to get users' input. According to MVC, the input data will be passed to controllers. Since it needs more examples, I plan to write something about it in some day in the future.

6 comments:

Anonymous said...

These are good articles. I'm surprised the official CakePHP docs ("bakery") is so complicated to navigate and dig through.

I'm a rails developer so I really just want a simple crash course or reference, and your posts have me up and running in 5 mins

Anonymous said...

Nice articles.

I've got the explaination how to start knowing CakePHP here.

Jab said...

Hi

Your tutorial is very nice

you should update it with what it takes to configure the new release

i had issues with the default.thtml.. i had to name it as default.ctp for it to work

Anonymous said...

The examples are easy to understand and explanation is given in simple language, thanks!

Anonymous said...

Really so nice......I will follow it

Anonymous said...

hii very good tutorial for cake beginners..
but there should be some changes for the newer versions of cakephp..
eg. for views and layouts the extensions are not .php or .html it is .ctp..