Створення Моделі для клієнтської частини сайту (фронт-енд)
(*Ця стаття є частиною посібника “Розробка MVC-компоненти для Joomla 4.x”. Вона є продовженням посібника з програмування. Тому, якщо ви не читали попередні частини, ми рекомендуємо вам це зробити.
Попередня стаття «Керування баготомовністю»)
Тепер, коли у нас є частини “Контролер” і “Вигляд” шаблону проектування Модель-Вигляд-Контролер (MVC), у цій статті ми створимо модель до нашої компоненти Hello World. Модель буде містити деякі зразки даних для рендерингу нашого шаблону. Для створення моделі, ми розширюємо одну з абстрактних моделей, що надаються ядром Joomla. Існує декілька таких моделей, які можна знайти у просторі імен Joomla\CMS\MVC\Model:
- Joomla\CMS\MVC\Model\AdminModel - Незважаючи на свою назву, ця модель насправді не є специфічною для розділу адмін-панелі Joomla. Вона призначена для адміністрування (*ред. редагування) контенту певного типу, дозволяючи виконувати операції пакетного оновлення/видалення тощо.
- Joomla\CMS\MVC\Model\BaseModel - Базова модель, від якої успадковуються інші моделі. Якщо вам не потрібна додаткова функціональність, ви можете розширити цю модель, але, швидше за все, ви не захочете цього робити.
- Joomla\CMS\MVC\Model\FormModel - Використовується для форм. Дозволяє відмічати або видаляти рядки для редагування, а також має методи для валідації (перевірки) вхідних даних форми.
- Joomla\CMS\MVC\Model\ItemModel - Дозволяє оперувати з конкретним записом бази даних. (редагувати, видалити, додати новий запис).
- Joomla\CMS\MVC\Model\ListModel - Використовується для відображення списків записів (контенту), з можливістю фільтрації.
Пізніше, в підручнику, ми будемо використовувати цю модель за допомогою запиту до бази даних. Тому ми будемо використовувати ItemModel як основу для нашого нового класу моделі. Давайте створимо нові файли, які нам знадобляться для створення нашої моделі.
- Модифікуйте: site/language/en-GB/com_helloworld.ini
Ми додамо нове повідомлення, яке витягнемо з системи багатомовності, щоб перевірити, чи працює наша модель.
- Створіть: site/src/Model/MessageModel.php
Наша нова модель, яка буде зберігати повідомлення (контент) для подальшого відображення на клієнтській веб-сторінці (фронт-енді)
- Модифікуйте: site/src/Controller/DisplayController.php
Ми накажемо стандартному контролеру дисплея отримати нову модель.
- Модифікуйте: site/tmpl/hello/default.php
Ми додамо в шаблон вигляду показ повідомлення (контенту) з моделі.
- Модифікуйте: helloworld.xml
Просто оновлення версії для нашого нового коду
Опис файлів
site/language/en-GB/com_helloworld.ini
Ми (тимчасово) додамо сюди нове повідомлення, яке можна використовувати для демонстрації моделі.
; Hello World Admin Strings
; Copyright (C) 2020 John Smith. All rights reserved.
COM_HELLOWORLD_MSG_HELLO_WORLD="Hello World!"
COM_HELLOWORLD_MSG_GREETING="This message is coming from the item model!"
site/src/Model/MessageModel.php
Нова модель даних. Метод getItem() є єдиним необхідним методом при розширенні ItemModel. Він повертає об’єкт, який представляє елемент моделі. Цей “елемент” може бути чим завгодно, але зазвичай це запис бази даних. Поки ми не підключимо цю модель до бази даних, у наступній частині підручника, ми повертатимемо базовий об’єкт з нашим новим повідомленням прямо з системи багатомовності.
<?php
namespace JohnSmith\Component\HelloWorld\Site\Model;
defined('_JEXEC') or die;
use Joomla\CMS\MVC\Model\ItemModel;
use Joomla\CMS\Language\Text;
/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/
/**
* Hello World Message Model
* @since 0.0.5
*/
class MessageModel extends ItemModel {
/**
* Returns a message for display
* @param integer $pk Первинний ключ "елемента", наразі не використовується
* @return object Message-объект
*/
public function getItem($pk= null): object {
$item = new \stdClass();
$item->message = Text::_('COM_HELLOWORLD_MSG_GREETING');
return $item;
}
}
site/src/Controller/DisplayController.php
Ми накажемо DisplayController додати нашу нову модель до представлення під час його завантаження. Оскільки наразі у нас є лише один «вигляд», цього буде достатньо. Коли наша компонента стане складнішою, наші «вигляди» отримають власні контролери і зможуть завантажувати власні моделі.
<?php
namespace JohnSmith\Component\HelloWorld\Site\Controller;
defined('_JEXEC') or die;
use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\Factory;
/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/
/**
* HelloWorld Component Controller
* @since 0.0.2
*/
class DisplayController extends BaseController {
public function display($cachable = false, $urlparams = array()) {
$document = Factory::getDocument();
$viewName = $this->input->getCmd('view', 'login');
$viewFormat = $document->getType();
$view = $this->getView($viewName, $viewFormat);
$view->setModel($this->getModel('Message'), true);
$view->document = $document;
$view->display();
}
}
site/tmpl/hello/default.php
Останньою функціональною зміною є додавання виводу повідомлень до шаблону нашого сайту. У контексті шаблону компоненти, змінна $this посилається на об’єкт подання. Пам’ятаєте, як ми встановлювали модель представлення в попередньому файлі? Ми отримуємо її тут і виводимо повідомлення.
<?php
use Joomla\CMS\Language\Text;
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted Access');
?>
<h2><?= Text::_('COM_HELLOWORLD_MSG_HELLO_WORLD') ?></h2>
<p><?= $this->getModel()->getItem()->message; ?></p>
helloworld.xml
У файлі маніфесту для цих змін не потрібно вносити нічого нового, тому технічно це оновлення не є обов’язковим. Однак, для узгодженості, ми змінимо версію компоненти у файлі маніфесту.
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="4.0" method="upgrade">
<name>Hello World</name>
<!-- Наступні елементи є необов'язковими і не мають обмежень щодо форматування -->
<creationDate>December 2020</creationDate>
<!-- Умовний автор, не соромтеся замінювати будь-де, де побачите -->
<author>John Smith</author>
<authorUrl>https://smith.ca</authorUrl>
<copyright>John Smith</copyright>
<license>GPL v3</license>
<!-- Дані про версію записується в таблицю компонентів -->
<version>0.0.5</version>
<!-- Опис, опціонально, і за замовчуванням співпадає з назвою -->
<description>
A hello world component!
</description>
<!-- Це простір імен PHP, у якому розширенні
реалізовано код. Він повинен мати такий формат:
Vendor\Component\ComponentName
"Vendor" може бути назва вашої компанії або ваше власне ім`я
Секція "Назва компонента" ПОВИННА збігатися з назвою, що використовується
для вашої компоненти в інших місцях. У будь-якому випадку, назва
XML-файлу та простір імен повинен збігатися (ігноруючи CamelCase).
-->
<namespace path="src/">JohnSmith\Component\HelloWorld</namespace>
<files folder="site/">
<folder>language</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
<languages>
<language tag="en-GB">site/language/en-GB/com_helloworld.ini</language>
</languages>
<administration>
<!-- Посилання, яке з'явиться в адмін-панелі меню "Копонентів" -->
<menu link="index.php?option=com_helloworld">Hello World</menu>
<!-- Список файлів і папок для копіювання, а також куди їх копіювати -->
<files folder="admin/">
<folder>language</folder>
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
<languages>
<language tag="en-GB">admin/language/en-GB/com_helloworld.ini</language>
<language tag="en-GB">admin/language/en-GB/com_helloworld.sys.ini</language>
</languages>
</administration>
</extension>
Тестування компоненти
Як і раніше, заархівуйте вашу нову версію компоненти і завантажте її в адміністративну панель вашого інсталятора Joomla. Після цього перейдіть до інтерфейсу вашого сайту Joomla. Натисніть на посилання “Hello World”, яке ми створили в меню. Ви повинні побачити нове повідомлення на шаблоні сторінки.
**
Далі ми дізнаємося, як додавати параметри до пунктів меню і як їх зчитувати в коді. Після цього ми почнемо підключати нашу компоненту до бази даних.
