⭐ GitHub
|

SLOT-H: Структура фронтенд части



Фронтенд часть системы построена на phtml-шаблонах, CSS и JavaScript. Все файлы организованы по модульному принципу и привязаны к конкретным проектам.



Порядок загрузки



Загрузка фронтенда происходит в строго определённой последовательности:

1. Header



Первым загружается файл `Application/Layout/Project_<номер проекта>/Skin_<номер скина>/headerExt.phtml` для неавторизованных пользователей или `header.phtml` для авторизованных пользователей в полной версии.

Этот файл формирует стартовые данные фронтенда: подключает базовые CSS и JS, определяет глобальные переменные, устанавливает мета-теги.

После этого вызывается `Application/Layout/Project_<номер проекта>/Skin_<номер скина>/html.phtml`, который содержит общую структуру страницы, начинающуюся с тега `<html>`. В демо-версии это может выглядеть странно, но логика оправдана: `headerExt` загружается для неавторизованных, а для авторизованных используется `header.phtml`, добавляющий свои блоки после начала фактического HTML.

2. Основное представление



Загружается представление контроллера и экшена.

Пример: `/Modules/Free/Views/Project_<номер проекта>/Index/index.phtml`

Это основной контент страницы, который выводится внутри HTML-структуры, заданной в layout.

3. Footer



Последним загружается футер: `Application/Layout/Project_<номер проекта>/Skin_<номер скина>/footerExt.phtml`

Для авторизованных пользователей в полной версии используется `footer.phtml`.



Структура папок



В каждом модуле присутствуют папки:

- `Views` - phtml-шаблоны
- `Public/css` - стили
- `Public/js` - скрипты

Внутри каждой из этих папок создаётся подпапка `Project_<номер проекта>`, а внутри неё - папка контроллера.

Views



Папка Views содержит phtml-файлы, которые рендерят HTML-страницы.

text
Структура:
Views/
└── Project_<номер проекта>/
└── <имя контроллера>/
├── index.phtml
├── edit.phtml
└── ...



Для каждого проекта своя папка. Это позволяет настраивать внешний вид под конкретный проект без изменения логики контроллеров.

Public/css



Папка Public/css содержит стили. Структура аналогична Views:
text
Public/css/
└── Project_<номер проекта>/
└── <имя контроллера>/
├── index.css
├── edit.css
└── ...


Public/js



Папка Public/js содержит JavaScript-файлы:
text
Public/js/
└── Project_<номер проекта>/
└── <имя контроллера>/
├── index.js
├── edit.js
└── ...




Подключение статики



В phtml-файлах статика подключается через методы представления:

- `$this->addStyle()` - подключение CSS
- `$this->addScript()` - подключение JS
- `$this->addEnvironment()` - подключение и CSS, и JS

Если не передавать имя файла, подключаются файлы с именем текущего экшена.

Пример:
php
$this->addEnvironment();

Подключит index.css и index.js для текущего контроллера и проекта.

Также, можно варьировать подключение скриптов css/js. На примере подключения стилей в скрипте /Modules/Blog/Views/Project_1/Index/index.phtml:
php
$this->addStyle(['first' => true, 'second' => true, 'global' => false])


Данный вызов подключит седующие скрипты:
- /Modules/Blog/Public/css/Project_1/Index/first.css - значение true заставит искать в папке контроллера
- /Modules/Blog/Public/css/Project_1/Index/first.css - аналогично
- /Application/Public/css/Project_1/global.css - значение false переориентирует поиск на папку основных стилей данного проекта

Статика отдаётся через контроллер Scope:

html
<link rel="stylesheet" href="/Free/Scope/get?static=abc123.css">

Это гарантирует, что при изменении файла хеш изменится и браузер загрузит актуальную версию.

Передача данных из контроллера в представление


В контроллере данные передаются через метод append объекта представления:

php
$this->_view->append([
    'posts' => $posts,
    'title' => 'Список постов',
    'count' => count($posts)
]);

Внутри phtml-файла переданные данные становятся доступны как обычные переменные с именами, совпадающими с ключами ассоциативного массива:

php
<?php foreach ($posts as $post): ?>
    <h2><?php echo $post->getPostTitle(); ?></h2>
    <p><?php echo $post->getPostText(); ?></p>
<?php endforeach; ?>


Рекомендации по работе с представлениями


Объект View передаёт свой инстанс в phtml-файл представления. Все его методы доступны сразу, без объявления новых инстансов. Это значит, что в любом phtml-файле доступен $this, который ссылается на текущий объект представления.

Для удобства работы в IDE рекомендуется указывать типы переменных через PHPDoc:

php
/** @var \Modules\Blog\Models\Post[] $posts */
/** @var \Application\Assistance\View\View $this */

$this->addEnvironment();

Это позволяет IDE подсказывать методы для $this, а также типизировать переменные, переданные из контроллера.

Особенности


Файлы CSS и JS не кешируются браузером - при каждом изменении файла хеш меняется, и браузер загружает новую версию.

Имена файлов стилей и скриптов должны совпадать с именами экшенов контроллера, если используется автоматическое подключение через addEnvironment().

При создании нового проекта необходимо создать соответствующие папки в Views, Public/css и Public/js для каждого модуля, который будет использоваться в проекте.



Что дальше?



- ➡️ Раздел 23. Выбор js-оболочки
- ➡️ Раздел 24. Динамическая подпись
- ➡️ Раздел 25. Защита доступа
← Предыдущий 1 / 1 Следующий →