Додавання Вигляду клієнтської частини сайту (або Front-end)
(*Ця стаття є частиною посібника “Розробка MVC-компоненти для Joomla 4.x”.
Оригінал за посиланням: https://docs.joomla.org/J4.x:Developing_an_MVC_Component/Adding_a_View_to_the_Site_Part
Вона є продовженням посібника з програмування. Тому, якщо ви не читали попередні частини, ми рекомендуємо вам це зробити.
Попередня стаття «Розробка базової компоненти»)
Додавання Вигляду (або Front-end)
Хоча компонент розділений на частини “admin” і “site”, процес додавання вигляду (або представлення) дуже схожий в обох частинах. Так само, як і в основному вигляді, який ми створили в попередній статті, нам знадобиться контролер, вигляд і шаблон.
Для початку давайте створимо нові файли для клієнтської сторінки сайту (або Front-end). Як і раніше, вихідний код кожного файлу можна знайти в розділі «Опису файлів».
1 Створіть: site/src/Controller/DisplayController.php
MVC-контролер, за замовчуванням, для фронтенду
2 Створіть: site/src/View/Hello/HtmlView.php
Об’єкт MVC-вигляд для нової сторінки “Hello”
3 Створіть: site/tmpl/hello/default.php
Шаблон для нової сторінки “Hello”
4 Оновіть: helloworld.xml
Потрібно додати новостворені файли компоненти до файла маніфесту.
Опис файлів
site/src/Controller/DisplayController.php
Контролер MVC за замовчуванням у фронтенді. У нас тут є деякий базовий код для отримання та відображення представлення, але, як і раніше, ми в основному делегуємо повноваження батьківському Joomla-класу. Оскільки це PHP-клас, він знаходиться у вашому просторі імен PHP в корені src/, в просторі імен Controller.
<?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->document = $document;
$view->display();
}
}
site/src/View/Hello/HtmlView.php
Представлення (або вигляд) MVC для цієї сторінки “Hello World”. Як і раніше, цей файл просто делегує батьківському об’єкту, щоб ми могли розпочати роботу. Оскільки це PHP-клас, він знаходиться у каталозі src/, у просторі імен View/Hello, який відповідає назві вигляду.
<?php
namespace JohnSmith\Component\HelloWorld\Site\View\Hello;
defined('_JEXEC') or die;
use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;
/**
* @package Joomla.Site
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2020 John Smith. All rights reserved.
* @license GNU General Public License version 3; see LICENSE
*/
/**
* Вигляд для форми ідентифікації користувача
*/
class HtmlView extends BaseHtmlView {
/**
* Відобразити вигляд
*
* @param string $template Ім'я файлу верстки.
* @return void
*/
public function display($template = null) {
// Виклик батьківського класу для відображення макета
parent::display($template);
}
}
site/tmpl/hello/default.php
Шаблон сторінки для нашої сторінки “Hello World” у клієнтскій частині сайту (фронтенді) . Він ідентичний шаблону, який ми використовували в адміністративній частині, щоб почати роботу. Як шаблон, він знаходиться у папці tmpl, яка відповідає назві вигляду.
<?php
/**
* @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>Hello world!</h2>
helloworld.xml
Нарешті, давайте оновимо маніфест компоненти, щоб включити нові файли. Нам потрібно повідомити Joomla про існування нових файлів, щоб вона скопіювала їх в складі компоненти. Ми також оновимо номер версії розширення в маніфесті - зараз це не має ніякого реального ефекту, але в майбутньому зміна номера версії матиме більше значення, тому це хороша звичка.
<?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.2</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>src</folder>
<folder>tmpl</folder>
</files>
<administration>
<!-- Посилання, яке з'явиться в адмін-панелі меню "Копонентів" -->
<menu link="index.php?option=com_helloworld">Hello World</menu>
<!-- Список файлів і папок для копіювання, а також куди їх копіювати -->
<files folder="admin/">
<folder>services</folder>
<folder>src</folder>
<folder>tmpl</folder>
</files>
</administration>
</extension>
Оновлення розширення
Щоб протестувати зміни у вашому розширенні, спочатку вам потрібно заархівувати папку com_helloworld і встановити її так само, як ви це робили раніше. Ми ще раз пройдемо цей процес крок за кроком:
- За допомогою веб-браузера перейдіть до панелі адміністратора вашого сайту на Joomla. Адреса буде виглядати наступним чином <joomla>/administrator/. Наприклад: http://localhost/joomla/administrator/
- У лівому меню натисніть на посилання “Система”..
- На вкладці “Встановлення” натисніть “Розширення”..
- На вкладці “Завантажити файл пакета” знайдіть і виберіть щойно створений файл .zip.
Після встановлення нової версії компоненти, знову натисніть на посилання “Система”, в головному меню, а потім виберіть “Розширення” на вкладці “Керування”, цього разу - “Розширення”. Повинен з’явитися список встановлених розширень Joomla. Введіть “hello” в пошуковий рядок у верхньому правому куті і натисніть клавішу Enter. Ви повинні побачити ваше розширення “Hello World”, яке тепер має версію 0.0.2.
Тестування нової сторінки
Нова сторінка поки що не має посилання у меню (ми додамо його в наступній статті), тому для тестування нам потрібно використовувати пряму URL-адресу. Перейдіть за адресою <joomla>/index.php?option=com_helloworld&view=hello, і ви побачите нову сторінку сайту “Hello World”.
Далі ми додамо конфігурацію меню для цієї сторінки, щоб її можна було використовувати всередині системи меню Joomla.
