Making a Simple Cell

In this tutorial, we’re going to create a “recent articles” cell that can be used on the front page, a sidebar, or pretty much anywhere else (that’s the beauty of a cell!) To get started, I recommend completing the Content Management tutorial from the official CakePHP.org site and using that project as your starting point.

From your project’s root directory, bake a template for your new cell:

bin/cake bake cell RecentArticles

This will create two files:

src/View/Cell/RecentArticlesCell.php
src/Template/Cell/RecentArticles/display.ctp

RecentArticlesCell.php is where the logic for your cell will go, and RecentArticles/display.ctp is the default display template.

In the as-of-yet empty display method of RecentArticlesCell.php, we want to put in the necessary code to return the five most recent articles posted to our Articles table:

public function display()
{
        $this->loadModel('Articles');
        $recent = $this->Articles->find()
            ->limit(5)
            ->order(['modified' => 'DESC']);
        $this->set('recent_articles', $recent);
}

In the code above, we’re bringing in the model for “Articles” and using Cake ORM (Object-Relational Mapping) to return the articles, limiting the query to five rows, and sorting them by the modified date in descending order.

Next, we’ll set the template variable recent_articles to contain our data. This allows us to show the data in the display.ctp file that was generated in template/cell/RecentArticles by our “bake” command.

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th><?= $this->Paginator->sort('title') ?></th>
            <th><?= $this->Paginator->sort('modified') ?></th>
            <th class="actions"><?= __('Actions') ?></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($recent_articles as $recent_article): ?>
        <tr>
            <td><?= h($recent_article->title) ?></td>
            <td><?= h($recent_article->modified) ?></td>
            <td class="actions">
                <?= $this->Html->link(__('View'),
                    ['controller' => 'articles',
                    'action' => 'view',
                    $recent_article->id]) ?>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

In our display.ctp, we’re doing a foreach, using the new variable $recent_article to iterate through the passed-in $recent_articles. Now, all we have to do is place our cell on a page. To do that, we simply need to include the following line anywhere on the page of our choosing:

<?= $this->cell('RecentArticles') ?>

Viola! We have a functioning cell All of the logic needed to produce the content of the cell is conveniently encapsulated in RecentArticlesCell.php, preventing clutter in our main controller and allow us to follow DRY standards. Likewise the display.ctp houses the additional HTML and logic needed to display the cell’s contents without convoluting our home.ctp. The cell can be used throughout our application, with changes to the formatting and content being done in one place.

(Editor’s note: Originally published in October of 2015, this post has been rechecked and updated as of the new posting date.)

 

Leave a Comment

Your email address will not be published. Required fields are marked *