Making a Simple Cell in CakePHP 4

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on reddit
Reddit

In this tutorial, we’re going to create a “recent articles” cell that can be used on the front page (or pretty much anywhere else) on your site. (Here, it’s designed to show a card-style posts page, much like an “archives” page in WordPress.) To get started, I recommend completing the Content Management tutorial from the official CakePHP.org site and using that project as your starting point because it will give you the “Articles” configuration that’s the basis of the examples. Also, for visuals, I’m using W3.css and one of the W3 color themes.

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

bin/cake bake cell Archive

This will create two files:

src/View/Cell/ArchiveCell.php
src/Template/Cell/Archive/display.php

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

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

public function display()
{
        $this->loadModel('Articles');
        $articles = $this->Articles
            ->find()
            ->contain(['Users', 'Images'])
            ->where(['published' => true])
            ->limit(12)
            ->order(['articles.modified' => 'DESC']);
        $this->set('articles', $articles);
}

In the code above, we’re bringing in the model for “Articles” and using Cake ORM (Object-Relational Mapping) to return the articles. The “contains” clause includes the linked table “Users,” which you should have if you completed the CakePHP CMS tutorial. (My “contains” also has an “Images” reference which you won’t have; we’ll address images in a future post. For now, just leave “Images” out of your “contains” reference.) We’re making sure that we only show articles that have been checked as “published,” limiting the query to twelve rows, and sorting them by the modified date in descending order.

Last, we set the template variable articles to contain our data. This allows us to show the data in the display.php file that was generated in template/cell/Archive by our “bake” command.

<div class="w3-container w3-padding-48">
    <?php $column_count = 99; ?>
    <?php foreach ($articles as $article): ?>
    <?php if ($column_count > 3) { ?>
    <div class="w3-row">
    <?php $column_count = 0;
    } ?>
        <div class="w3-margin w3-col l3">
            <div class="w3-card-4 w3-theme-dark w3-padding-24">
                <div class="w3-container w3-center">
                <?= $this->Html->image($article->image['url'], ['width' => '100%']); ?>
                </div>
                <div class="w3-container">
                    <h3><?= h($article->title) ?></h3>
                    <p><?= (strlen($article->body) > 303) ? substr($article->body,0,300) . '...' : $article->body; ?></p>
                    <p><?= $this->Html->link(__('Full Article'), ['controller' => 'articles', 'action' => 'view', $article->id]) ?></p>
                </div>
            </div>
        </div>
        <?php $column_count++; ?>
    <?php if ($column_count > 3) { ?>
    </div>
    <?php } ?>
    <?php endforeach; ?>
</div>

In our display.php, we’re doing a foreach, using the new variable $article (passed in from ArchiveCell.php) to iterate through the passed-in $articles. Using w3.css, we’ve made a nice card layout. (Note that this also uses an image from my images table; as previously stated, I’ll describe how I added images in another post.)

Note also that there’s some code around $article->body to limit the display to 300 characters (with “…” if needed) and a “Full Article” link that will send viewers to the Articles controller’s View method so they can read the complete post.

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('Archives') ?>

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

More to explorer

Custom Pagination in CakePHP 4

CakePHP 4 uses the Milligram CSS framework. Even though freshly-baked CakePHP looks really nice with Milligram, you might want to change the look and feel of the default pagination. In this post we’ll go over how to get the pagination to match your scheme.

The Servers Are Burning – Logic Magazine – Medium

“That same story happened so many different times,” my old boss David told me. “Someone launched a small, relatively innocuous change that did one of the millions of unexpected things it could have done, which then happened to break some part of the site, and then bring it all down.

Leave a Reply

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

Copyright 2017-2020, KMD Enterprises, LLC