Frontend

• Register
• Database table
• Entry Point
• List View
  • Create the view
  • Display data
• Tips & Tricks
  • PHP short tags
  • PHP alternative syntax
  • Items object
  • Singular & Plural
  • Shortcuts

Register

First you need to register the new component in Joomla by adding a new entry to Joomla’s #__extensions table.

Knowing that the component is going to be called com_todo you can execute the following command to register it in your new todo site:

$ joomla extension:register todo com_todo

Database table

The following snippet defines the database schema of our component and inserts some sample data.

Execute it in the sites_todo database, replace #__ with your database prefix:

CREATE TABLE IF NOT EXISTS `#__todo_items` (
  `todo_item_id` SERIAL,
  `title` varchar(255) NOT NULL,
  `description` longtext NOT NULL
);

INSERT INTO `#__todo_items` (`title`, `description`) VALUES
    ('todo item one', 'This is the first Todo'),
    ('todo item two', 'This is the second Todo'),
    ('todo item three', 'This is the third Todo');

More: Read more on the Naming Conventions of database tables.

Entry Point

If you have ever developed a Joomla component before you know about the component entry point, sometimes referred to as the component loader. The file in most cases in Joomla loads a controller and fires the execute method on that controller. We’re doing something different; loading and firing our own dispatcher to take care of all that.

Create the following file:

/components/com_todo/todo.php

Add the following snippet to the file:

<?php echo KObjectManager::getInstance()            // load the Object Manager
    ->getObject('com://site/todo.dispatcher.http')  // Get an HTTP Dispatcher
    ->dispatch();                                   // call the dispatch action

List View

If you are familiar with HMVC you know that it’s the view’s responsibility to render things to the screen.

Create the view

First we will add the view that renders our list of todo items. For this, create the following file and directory structure:

/components/com_todo/view/items/tmpl/default.html.php

More: Read more on the Naming Conventions of Views.

Display data

Writing templates is like writing regular HTML and PHP, but simpler. Add the following snippet to the view:

<ul>
    <? foreach($items as $item) : ?>
    <li>
        <?= $item->id ?>.
        <?= $item->title ?>
        <?= $item->description ?>
    </li>
    <? endforeach; ?>
</ul>

This code will render an unordered list for each entity in $items object displaying the id, title and description.

Test yourself: http://joomla.box/todo/index.php?option=com_todo&view=items

Note: You only added a template! The framework will fallback on default classes whenever your component does not contain a specific class.

Tips & Tricks

PHP short tags

We prefer PHP short tags:

• <? instead of <?php
• <?= instead of <?php echo

Even if short tags are disabled in your php.ini file they will automatically be rewritten as normal tags.

PHP alternative syntax

We are using the PHP alternative syntax for control structures such as the foreach statement, once again for readability.

Items object

We can simply use $items in the above example instead of $this->items. The framework will by default assign items data to the items view.

Singular & Plural

Items implies multiple Todo items, while item implies a single Todo item. It’s very important to use singular and plural correctly.

Thanks to KStringInflector, the framework translates back and forth between most English words. It even knows words like “person” is singular, where “people” is its plural form.

Shortcuts

The framework provides some handy shortcuts for use in our view templates.