Making Widget System

[taufik-nurrohman]

A widget is a special feature on a website. Some people may have different terms to describe it such as block, chunk, element, or gadget. You must have ever seen a search box, recent post and recent comment list appear on a website, they are referred to as widgets.

Using the layout API, you can make a widget system.

By creating a file named widget.php in the .\lot\layout folder, then a widget method will be added automatically to the Layout class.

.\
└── lot\
    └── layout\
        ├── …
        ├── …
        └── widget.php ✔

In a layout file, the Layout class can be called via self or static reference:

<aside>
  <?= self::widget(); ?>
  <?= self::widget(); ?>
  <?= self::widget(); ?>
</aside>

In .\lot\layout\widget.php file, add the default widget markup. It usually consists of a title and a content:

<div class="widget">
  <?php if (!empty($title)): ?>
    <h3>
      <?= $title; ?>
    </h3>
  <?php endif; ?>
  <?php if (!empty($content)): ?>
    <div>
      <?= $content; ?>
    </div>
  <?php endif; ?>
</div>

You will have $title and $content variable set via the layout data argument:

<aside>
  <?= self::widget([
      'title' => 'Search',
      'content' => '<form>…</form>'
  ]); ?>
  <?= self::widget([
      'title' => 'Recent Posts',
      'content' => '<ul>…</ul>'
  ]); ?>
  <?= self::widget([
      'title' => 'Recent Comments',
      'content' => '<ul>…</ul>'
  ]); ?>
</aside>

---

Automatic and dynamic contents can be created separately as other widgets. You can make it as a specific file stored in .\lot\layout\widget folder:

.\
└── lot\
    └── layout\
        ├── widget\
        │   └── recent-pages.php ✔
        └── widget.php

And call it this way:

<aside>
  <?= self::widget('recent-pages', [
      'title' => 'Recent Articles',
      // Custom variable(s)
      'folder' => '/article',
      'take' => 5
  ]); ?>
</aside>

In .\lot\layout\widget\recent-pages.php file, process $content value to be assigned to content parameter in the default widget call:

<?php

$content = "";

$pages = Pages::from(LOT . DS . 'page' . ($folder ?? '/article'));

if ($pages->count > 0) {
    $pages->sort([-1, 'time']);
    $pages->chunk($take ?? 5, 0);
    $content .= '<ul>';
    foreach ($pages as $page) {
        $content .= '<li>';
        $content .= '<a href="' . $page->url . '">';
        $content .= $page->title;
        $content .= '</a>';
        $content .= '</li>';
    }
    $content .= '</ul>';
} else {
    $content .= '<p>' . i('No %s yet.', ['posts']) . '</p>';
}

// Print default widget with the dynamic content
echo self::widget([
    'title' => $title ?? "",
    'content' => $content
]);