In the first part of this tutorial series, we have created the base structure of our people management package. In further parts, we will use the package of the first part as a basis to directly add new features. In order to explain how event listeners and template works, however, we will not directly adding a new feature to the package by altering it in this part, but we will assume that somebody else created the package and that we want to extend it the “correct” way by creating a plugin.

The goal of the small plugin that will be created in this part is to add the birthday of the managed people. As in the first part, we will not bother with careful validation of the entered date but just make sure that it is a valid date.

Package Functionality

The package should provide the following possibilities/functions:

  • List person’s birthday (if set) in people list in the ACP
  • Sort people list by birthday in the ACP
  • Add or remove birthday when adding or editing person
  • List person’s birthday (if set) in people list in the front end
  • Sort people list by birthday in the front end

Used Components

We will use the following package installation plugins:

For more information about the event system, please refer to the dedicated page on events.

Package Structure

The package will have the following file structure:

├── acptemplates
│   └── __personAddBirthday.tpl
├── eventListener.xml
├── files
│   └── lib
│       └── system
│           └── event
│               └── listener
│                   ├── BirthdayPersonAddFormListener.class.php
│                   └── BirthdaySortFieldPersonListPageListener.class.php
├── install.sql
├── language
│   ├── de.xml
│   └── en.xml
├── package.xml
├── templateListener.xml
└── templates
    ├── __personListBirthday.tpl
    └── __personListBirthdaySortField.tpl

Extending Person Model (install.sql)

The existing model of a person only contains the person’s first name and their last name (in additional to the id used to identify created people). To add the birthday to the model, we need to create an additional database table column using the sql package installation plugin:

ALTER TABLE wcf1_person ADD birthday DATE NOT NULL;

If we have a Person object, this new property can be accessed the same way as the personID property, the firstName property, or the lastName property from the base package: $person->birthday.

Setting Birthday in ACP

To set the birthday of a person, we need to extend the personAdd template to add an additional birthday field. This can be achieved using the dataFields template event at whose position we inject the following template code:

<dl{if $errorField == 'birthday'} class="formError"{/if}>
	<dt><label for="birthday">{lang}wcf.person.birthday{/lang}</label></dt>
	<dd>
		<input type="date" id="birthday" name="birthday" value="{$birthday}">
		{if $errorField == 'birthday'}
			<small class="innerError">
				{if $errorType == 'noValidSelection'}
					{lang}wcf.global.form.error.noValidSelection{/lang}
				{else}
					{lang}wcf.acp.person.birthday.error.{$errorType}{/lang}
				{/if}
			</small>
		{/if}
	</dd>
</dl>

which we store in a __personAddBirthday.tpl template file. The used language item wcf.person.birthday is actually the only new one for this package:

<?xml version="1.0" encoding="UTF-8"?>
<language xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/tornado/language.xsd" languagecode="de">
	<category name="wcf.person">
		<item name="wcf.person.birthday"><![CDATA[Geburtstag]]></item>
	</category>
</language>
<?xml version="1.0" encoding="UTF-8"?>
<language xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/tornado/language.xsd" languagecode="en">
	<category name="wcf.person">
		<item name="wcf.person.birthday"><![CDATA[Birthday]]></item>
	</category>
</language>

The template listener needs to be registered using the templateListener package installation plugin. The corresponding complete templateListener.xml file is included below.

The template code alone is not sufficient because the birthday field is, at the moment, neither read, nor processed, nor saved by any PHP code. This can be be achieved, however, by adding event listeners to PersonAddForm and PersonEditForm which allow us to execute further code at specific location of the program. Before we take a look at the event listener code, we need to identify exactly which additional steps we need to undertake:

  1. If a person is edited and the form has not been submitted, the existing birthday of that person needs to be read.
  2. If a person is added or edited and the form has been submitted, the new birthday value needs to be read.
  3. If a person is added or edited and the form has been submitted, the new birthday value needs to be validated.
  4. If a person is added or edited and the new birthday value has been successfully validated, the new birthday value needs to be saved.
  5. If a person is added and the new birthday value has been successfully saved, the internally stored birthday needs to be reset so that the birthday field is empty when the form is shown again.
  6. The internally stored birthday value needs to be assigned to the template.

The following event listeners achieves these requirements:

<?php
namespace wcf\system\event\listener;
use wcf\acp\form\PersonAddForm;
use wcf\acp\form\PersonEditForm;
use wcf\form\IForm;
use wcf\page\IPage;
use wcf\system\WCF;
use wcf\util\StringUtil;

/**
 * Handles setting the birthday when adding and editing people.
 *
 * @author	Matthias Schmidt
 * @copyright	2001-2017 WoltLab GmbH
 * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
 * @package	WoltLabSuite\Core\System\Event\Listener
 */
class BirthdayPersonAddFormListener implements IParameterizedEventListener {
	/**
	 * birthday of the created or edited person
	 * @var	string
	 */
	protected $birthday = '';
	
	/**
	 * @see	IPage::assignVariables()
	 */
	protected function assignVariables() {
		WCF::getTPL()->assign('birthday', $this->birthday);
	}
	
	/**
	 * @inheritDoc
	 */
	public function execute($eventObj, $className, $eventName, array &$parameters) {
		if (method_exists($this, $eventName) && $eventName !== 'execute') {
			$this->$eventName($eventObj);
		}
		else {
			throw new \LogicException('Unreachable');
		}
	}
	
	/**
	 * @see	IPage::readData()
	 */
	protected function readData(PersonEditForm $form) {
		if (empty($_POST)) {
			$this->birthday = $form->person->birthday;
			
			if ($this->birthday === '0000-00-00') {
				$this->birthday = '';
			}
		}
	}
	
	/**
	 * @see	IForm::readFormParameters()
	 */
	protected function readFormParameters() {
		if (isset($_POST['birthday'])) {
			$this->birthday = StringUtil::trim($_POST['birthday']);
		}
	}
	
	/**
	 * @see	IForm::save()
	 */
	protected function save(PersonAddForm $form) {
		if ($this->birthday) {
			$form->additionalFields['birthday'] = $this->birthday;
		}
		else {
			$form->additionalFields['birthday'] = '0000-00-00';
		}
	}
	
	/**
	 * @see	IForm::saved()
	 */
	protected function saved() {
		$this->birthday = '';
	}
	
	/**
	 * @see	IForm::validate()
	 */
	protected function validate() {
		if (empty($this->birthday)) {
			return;
		}
		
		if (!preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $this->birthday, $match)) {
			throw new UserInputException('birthday', 'noValidSelection');
		}
		
		if (!checkdate(intval($match[2]), intval($match[3]), intval($match[1]))) {
			throw new UserInputException('birthday', 'noValidSelection');
		}
	}
}

Some notes on the code:

  • The execute() just delegates the calls to the specific methods of the class that have the same name as the event (and here also the same name as the methods in which the events are fired). Additionally, we throw a LogicException if no such method exists in the class to avoid misuse of the class.
  • The birthday column has a default value of 0000-00-00, which we interpret as “birthday not set”. To show an empty input field in this case, we empty the birthday property after reading such a value in readData().
  • The validation of the date is, as mentioned before, very basic and just checks the form of the string and uses PHP’s checkdate function to validate the components.
  • The save needs to make sure that the passed date is actually a valid date and set it to 0000-00-00 if no birthday is given. To actually save the birthday in the database, we do not directly manipulate the database but can add an additional field to the data array passed to PersonAction::create() via AbstractForm::$additionalFields. As the save event is the last event fired before the actual save process happens, this is the perfect event to set this array element.

The event listeners are installed using the eventListener.xml file shown below.

Adding Birthday Table Column in ACP

To add a birthday column to the person list page in the ACP, we need three parts:

  1. an event listener that makes the birthday database table column a valid sort field,
  2. a template listener that adds the birthday column to the table’s head, and
  3. a template listener that adds the birthday column to the table’s rows.

The first part is a very simple class:

<?php
namespace wcf\system\event\listener;
use wcf\page\SortablePage;

/**
 * Makes people's birthday a valid sort field in the ACP and the front end.
 * 
 * @author	Matthias Schmidt
 * @copyright	2001-2017 WoltLab GmbH
 * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
 * @package	WoltLabSuite\Core\System\Event\Listener
 */
class BirthdaySortFieldPersonListPageListener implements IParameterizedEventListener {
	/**
	 * @inheritDoc
	 */
	public function execute($eventObj, $className, $eventName, array &$parameters) {
		/** @var SortablePage $eventObj */
		
		$eventObj->validSortFields[] = 'birthday';
	}
}
We use SortablePage as a type hint instead of wcf\acp\page\PersonListPage because we will be using the same event listener class in the front end to also allow sorting that list by birthday.

As the relevant template codes are only one line each, we will simply put them directly in the templateListener.xml file that will be shown later on. The code for the table head is similar to the other th elements:

<th class="columnDate columnBirthday{if $sortField == 'birthday'} active {@$sortOrder}{/if}"><a href="{link controller='PersonList'}pageNo={@$pageNo}&sortField=birthday&sortOrder={if $sortField == 'birthday' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.person.birthday{/lang}</a></th>

For the table body’s column, we need to make sure that the birthday is only show if it is actually set:

<td class="columnDate columnBirthday">{if $person->birthday !== '0000-00-00'}{@$person->birthday|strtotime|date}{/if}</td>

Adding Birthday in Front End

In the front end, we also want to make the list sortable by birthday and show the birthday as part of each person’s “statistics”.

To add the birthday as a valid sort field, we use BirthdaySortFieldPersonListPageListener just as in the ACP. In the front end, we will now use a template (__personListBirthdaySortField.tpl) instead of a directly putting the template code in the templateListener.xml file:

<option value="birthday"{if $sortField == 'birthday'} selected{/if}>{lang}wcf.person.birthday{/lang}</option>
You might have noticed the two underscores at the beginning of the template file. For templates that are included via template listeners, this is the naming convention we use.

Putting the template code into a file has the advantage that in the administrator is able to edit the code directly via a custom template group, even though in this case this might not be very probable.

To show the birthday, we use the following template code for the personStatistics template event, which again makes sure that the birthday is only shown if it is actually set:

{if $person->birthday !== '0000-00-00'}
	<dt>{lang}wcf.person.birthday{/lang}</dt>
	<dd>{@$person->birthday|strtotime|date}</dd>
{/if}

templateListener.xml

The following code shows the templateListener.xml file used to install all mentioned template listeners:

<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/tornado/XSD/templateListener.xsd">
	<import>
		<!-- admin -->
		<templatelistener name="personListBirthdayColumnHead">
			<eventname>columnHeads</eventname>
			<environment>admin</environment>
			<templatecode><![CDATA[<th class="columnDate columnBirthday{if $sortField == 'birthday'} active {@$sortOrder}{/if}"><a href="{link controller='PersonList'}pageNo={@$pageNo}&sortField=birthday&sortOrder={if $sortField == 'birthday' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.person.birthday{/lang}</a></th>]]></templatecode>
			<templatename>personList</templatename>
		</templatelistener>
		<templatelistener name="personListBirthdayColumn">
			<eventname>columns</eventname>
			<environment>admin</environment>
			<templatecode><![CDATA[<td class="columnDate columnBirthday">{if $person->birthday !== '0000-00-00'}{@$person->birthday|strtotime|date}{/if}</td>]]></templatecode>
			<templatename>personList</templatename>
		</templatelistener>
		<templatelistener name="personAddBirthday">
			<eventname>dataFields</eventname>
			<environment>admin</environment>
			<templatecode><![CDATA[{include file='__personAddBirthday'}]]></templatecode>
			<templatename>personAdd</templatename>
		</templatelistener>
		<!-- /admin -->
		
		<!-- user -->
		<templatelistener name="personListBirthday">
			<eventname>personStatistics</eventname>
			<environment>user</environment>
			<templatecode><![CDATA[{include file='__personListBirthday'}]]></templatecode>
			<templatename>personList</templatename>
		</templatelistener>
		<templatelistener name="personListBirthdaySortField">
			<eventname>sortField</eventname>
			<environment>user</environment>
			<templatecode><![CDATA[{include file='__personListBirthdaySortField'}]]></templatecode>
			<templatename>personList</templatename>
		</templatelistener>
		<!-- /user -->
	</import>
</data>

In cases where a template is used, we simply use the include syntax to load the template.

eventListener.xml

There are two event listeners, birthdaySortFieldAdminPersonList and birthdaySortFieldPersonList, that make birthday a valid sort field in the ACP and the front end, respectively, and the rest takes care of setting the birthday. The event listener birthdayPersonAddFormInherited takes care of the events that are relevant for both adding and editing people, thus it listens to the PersonAddForm class but has inherit set to 1 so that it also listens to the events of the PersonEditForm class. In contrast, reading the existing birthday from a person is only relevant for editing so that the event listener birthdayPersonEditForm only listens to that class.

<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/tornado/eventListener.xsd">
	<import>
		<!-- admin -->
		<eventlistener name="birthdaySortFieldAdminPersonList">
			<environment>admin</environment>
			<eventclassname>wcf\acp\page\PersonListPage</eventclassname>
			<eventname>validateSortField</eventname>
			<listenerclassname>wcf\system\event\listener\BirthdaySortFieldPersonListPageListener</listenerclassname>
		</eventlistener>
		<eventlistener name="birthdayPersonAddForm">
			<environment>admin</environment>
			<eventclassname>wcf\acp\form\PersonAddForm</eventclassname>
			<eventname>saved</eventname>
			<listenerclassname>wcf\system\event\listener\BirthdayPersonAddFormListener</listenerclassname>
		</eventlistener>
		<eventlistener name="birthdayPersonAddFormInherited">
			<environment>admin</environment>
			<eventclassname>wcf\acp\form\PersonAddForm</eventclassname>
			<eventname>assignVariables,readFormParameters,save,validate</eventname>
			<listenerclassname>wcf\system\event\listener\BirthdayPersonAddFormListener</listenerclassname>
			<inherit>1</inherit>
		</eventlistener>
		<eventlistener name="birthdayPersonEditForm">
			<environment>admin</environment>
			<eventclassname>wcf\acp\form\PersonEditForm</eventclassname>
			<eventname>readData</eventname>
			<listenerclassname>wcf\system\event\listener\BirthdayPersonAddFormListener</listenerclassname>
		</eventlistener>
		<!-- /admin -->
		
		<!-- user -->
		<eventlistener name="birthdaySortFieldPersonList">
			<environment>user</environment>
			<eventclassname>wcf\page\PersonListPage</eventclassname>
			<eventname>validateSortField</eventname>
			<listenerclassname>wcf\system\event\listener\BirthdaySortFieldPersonListPageListener</listenerclassname>
		</eventlistener>
		<!-- /user -->
	</import>
</data>

package.xml

The only relevant difference between the package.xml file of the base page from part 1 and the package.xml file of this package is that this package requires the base package com.woltlab.wcf.people (see <requiredpackages>):

<?xml version="1.0" encoding="UTF-8"?>
<package name="com.woltlab.wcf.people.birthday" xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/tornado/package.xsd">
	<packageinformation>
		<packagename>WoltLab Suite Core Tutorial: People (Birthday)</packagename>
		<packagedescription>Adds a birthday field to the people management system as part of a tutorial to create packages.</packagedescription>
		<version>3.1.0</version>
		<date>2018-03-30</date>
	</packageinformation>
	
	<authorinformation>
		<author>WoltLab GmbH</author>
		<authorurl>http://www.woltlab.com</authorurl>
	</authorinformation>
	
	<requiredpackages>
		<requiredpackage minversion="3.1.0">com.woltlab.wcf</requiredpackage>
		<requiredpackage minversion="3.1.0">com.woltlab.wcf.people</requiredpackage>
	</requiredpackages>
	
	<excludedpackages>
		<excludedpackage version="3.2.0 Alpha 1">com.woltlab.wcf</excludedpackage>
	</excludedpackages>
	
	<compatibility>
		<api version="2018" />
	</compatibility>
	
	<instructions type="install">
		<instruction type="acpTemplate" />
		<instruction type="file" />
		<instruction type="sql" />
		<instruction type="template" />
		<instruction type="language" />
		
		<instruction type="eventListener" />
		<instruction type="templateListener" />
	</instructions>
</package>

This concludes the second part of our tutorial series after which you now have extended the base package using event listeners and template listeners that allow you to enter the birthday of the people.

The complete source code of this part can be found on GitHub.