If you recall, we created some boilerplate files for our block type, but it doesn't actually do anything. We will want to create a block that shows a list of the events entered into the database.
First, let's add the HTML form to form.php that will be displayed whenever site editors add or edit the block on the site:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$form = Loader::helper('form');
?>
<div class="ccm-ui">
<table class="table table-striped table-bordered">
<tr>
<td>
<?php echo t('Maximum events to show') ?>
</td>
<td>
<?php echo $form->text('item_limit', $item_limit) ?>
</td>
</tr>
</table>
</div>Great! Let's include this file in both add.php and edit.php. Add the following to each of those files:
<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
include('form.php');Alright! All we have to do now is create the frontend view of the block. Open view.php in your code editor and enter the following HTML and PHP code:
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<h1 class="events-title"><?php echo t('Events Calendar') ?></h1>
<div class="events-list">
<?php if (!empty($events)): ?>
<?php foreach ($events as $event): ?>
<div class="event-item">
<h2><?php echo $event->title ?></h2>
<div class="event-date">
<?php echo $event->getDate() ?>
<?php if ($event->location): ?>
@ <?php echo $event->location ?>
<?php endif; ?>
</div>
<?php if ($event->description): ?>
<div class="event-description">
<?php echo $event->description ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<p><?php echo t('There are no events!') ?></p>
<?php endif; ?>
</div>That looks great! Here we are essentially looping through the $events array and displaying a row for each event. We again make use of the getDate() function on the event model to output a clean and friendly date.
Finally, let's add some simple CSS styles to view.css:
h1.events-title {
margin-bottom: 30px !important;
}
.event-item {
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
.event-item:last-child {
border-bottom: 0;
}
.event-item p {
margin: 0 !important;
}
.event-date {
font-size: 12px;
color: #888;
}Nice! Now we are ready to see it in action!