Шаблонизация, своя вёрстка, стили

В системе предусмотрено 5 типов шаблонов, имеющие свою специфику и различные варианты добавления и встраивания.

Шаблоны как и все остальные компоненты наследуют политики прав доступов. Группы не имеющие прав доступа к шаблону не смогут его использовать. Если это page шаблон страницы, то все страницы с данным шаблоном будут недоступны(кроме владельца шаблона). Если это incode шаблон - он не будет встроен в страницу. Также, шаблон, к которому нет прав доступа, невозможно использовать при создании компонента(модели). Включая и выключая шаблоны - вы отключаете их доступность у всех кроме группы-владельца шаблона.

Каждый тип разберем по отдельности и покажем, как использовать шаблоны различного типа.

Шаблоны типа: page

Шаблоны данного типа - это основные(каркасные) шаблоны страниц, в которые автоматически встраивается контент(содержимое) страниц. Если можно так назвать - это wrapper или каркас шаблоны. То есть, вы создаете страницу, с "голым" контентом-кодом страницы указывая для неё нужный шаблон. А код страницы уже автоматически встраивается в указанный для неё шаблон. Таким образом вы подтягиваете на страницу какой то общий каркас вёрстки, подключение стилей, скриптов и т.д.

Есть несколько способов подключения стилей и скриптов, разберем их подробно. В моделях шаблоны создайте новый пустой шаблон для страниц своего сайта. По умолчанию ваш новый пустой шаблон уже содержит в head код подключения js и css системы:

давайте разберем его.

  • main.min.css - это кастомизированный Bootstrap css админ панели со сборкой иконок от fontawesome и кастомными стилями для всплывающих сообщений
  • main.min.js - это системная сборка jQuery v3.6.0 + js модули Bootstrap v4.6.1 + js файл взаимодействия с бекендом по триггерам - app/js/import/wrong.js
  • $row->name - это название страницы модели, которое автоматически подтянется из модели страницы для которой будет указан данный шаблон.
  • <?php require $CONTENT_PAGE_FILE; ?> - это код, который автоматически подтянется из модели страницы для которой будет указан данный шаблон.

вместо main.min.css вы укажите свою css сборку, а файл main.min.js вы должны оставить как есть.

Скачайте готовую или соберите свою кастомную Bootstrap css сборку и подключите её вместо main.min.css

Вы можете создавать любое количество шаблонов с разными дизайнами и менять их как перчатки. Например, у вас есть шаблон новогодний, включите логи для своей группы, поменяйте у страницы шаблон и верните на место, посмотрите в логах данные, которые были отправлены на обработчик. И просто автоматизируйте эти действия через встроенные cron задачи, включая новогодний шаблон 10 декабря и выключая 20 января например.

Все доступные шаблоны находятся и создаются в каталоге templates/

Способ подключения 1:

Вы можете подключать в свои проекты как минифицированные js/css файлы так нет, при этом не минифицированные версии будут автоматически минифицированы 1 раз, а если изменится исходник, файл снова будет минифицирован. Например:

Данный код размещенный в head любого php шаблона будет просто выводить содержимое файлов в html странице обрамленным в тегах <style> и <script>

<?= Wrong\Html\Get::style($_SERVER['DOCUMENT_ROOT'] . '/assets/system/css/system-admin.min.css') ?>
<?= Wrong\Html\Get::style($_SERVER['DOCUMENT_ROOT'] . '/assets/system/css/main.min.css') ?>
<?= Wrong\Html\Get::script($_SERVER['DOCUMENT_ROOT'] . '/assets/system/js/main.min.js') ?>
<?= Wrong\Html\Get::script($_SERVER['DOCUMENT_ROOT'] . '/assets/system/js/system-admin.min.js') ?>
static script($filename)
Definition: Get.php:58
static style($filename)
Definition: Get.php:28
setcookie('FROM_UID', $uid, [ 'expires'=> time()+31536000, 'path'=> '/', 'domain'=> $_SERVER['HTTP_HOST'], 'secure'=> Wrong\Start\Env::$e->IS_SECURE, 'httponly'=> false, 'samesite'=> Wrong\Start\Env::$e->IS_SECURE ? 'None' :'Lax']) or setcookie('FROM_UID' $_SERVER['HTTP_HOST']
Definition: from-user.php:36

А данный код, автоматически минифицирует и создаст .min версии и будет выводить их содержимое в тегах <style> и <script>, а в случае изменения исходников, минифицирует файлы заново.

<?= Wrong\Html\Get::style($_SERVER['DOCUMENT_ROOT'] . '/assets/system/css/system-admin.css') ?>
<?= Wrong\Html\Get::style($_SERVER['DOCUMENT_ROOT'] . '/assets/system/css/main.css') ?>
<?= Wrong\Html\Get::script($_SERVER['DOCUMENT_ROOT'] . '/assets/system/js/main.js') ?>
<?= Wrong\Html\Get::script($_SERVER['DOCUMENT_ROOT'] . '/assets/system/js/system-admin.js') ?>
Заметки
Этот способ не всегда удобен, если вы не собираете стили, а просто помещаете их в каталог assets, в этом случае, есть ещё 2 способа подключения стилей и скриптов

Способ подключения 2:

<?= Wrong\Html\Get::stylesrc($_SERVER['DOCUMENT_ROOT'] . '/assets/system/css/system-admin.min.css') ?>
<?= Wrong\Html\Get::scriptsrc($_SERVER['DOCUMENT_ROOT'] . '/assets/system/js/system-admin.js') ?>
static scriptsrc($filename)
Definition: Get.php:72
static stylesrc($filename)
Definition: Get.php:45

данный код, инжектит уже теги подключения с аттрибутами src(link и script), но помимо этого добавляет в строку запроса время модификации файла, что автоматически всегда сбросит кеш. Указанные файлы также минифицируются автоматически.

Этот способ обеспечивает сохранение логики всех относительных путей указанных в файлах, в отличии от способа 1, когда содержимое css, js встраивается непосредственно в html код страницы.

Способ подключения 3 (самый крутой):

Вы скачали некий шаблон верстки и положили его например в /assets/examples/tivo-1.0.0/ у каждого шаблона своя логика размещения css, js, картинок. Неправда ли муторно это всё изменять и прописывать?

В файле шаблона просто укажите "магическую" константу USE_ASSETS_PATH:

const USE_ASSETS_PATH = '/assets/examples/tivo-1.0.0';
const USE_ASSETS_PATH

и оставьте дурную работу - дуракам, в тегах script, img всё само автоматически подставится в атрибуты src, а в тегах link в атрибуты href, причем так же с временем модификации файла. Как вот в этом шаблоне example1.php А в шаблоне example2.php успешно обрабатываются даже background-image: url(); Кстати заметьте, там наша "магическая" константа указана несколько иначе, потому как относительные пути шаблона несколько иные, но это никак не влияет на результат. В константе вы просто указываете путь к каталогу с ресурсами шаблона!

Посмотрите какая прелесть, клепай шаблоны - не хочу:

Заметки
Иногда может понадобиться скрыть/показать только на определённой странице какой то элемент, но при этом у вас общий шаблон под все страницы. Воспользуйтесь атрибутами: data-visible-page или data-hide-page
  • data-visible-page="/example-request" элемент будет виден только на /example-request
  • data-hide-page="/example-request" элемент будет виден везде и скрыт только на /example-request

пример использования data-visible-page в шаблоне tivo.php для ссылки PRICING, она показывается лишь на главной странице шаблона, а на остальных скрыта

Способ подключения 4 (асинхронный):

Любой css, js код плагина или библиотеки, вы можете подключить асинхронно, не сразу а по мере выполнения каких то действий на странице, для этого воспользуйтесь функцией подгрузки библиотек.

Шаблоны типа: incode

Каркасными шаблонами о которых сказано выше, не всегда удобно распределять более детальную логику блоков, особенно с учетом разграничения прав. Тут на помощь приходит тип встраивания и шаблоны - incode. Шаблон incode - это уже подключаемый шаблон непосредственно при помощи специального метода в абсолютно любом месте вашего приложения, будь то страницы, выборки, модальные окна или даже действия.

Для php это просто встраиваемый кусок кода, но здесь дополнительно перед встраиванием осуществляются проверки прав доступа к шаблону - он не будет встроен для групп пользователей, у которых нет доступов на чтение модели данного шаблона. Т.е. код данного шаблона может содержать какие то блоки и любой код, доступные лишь определённым группам пользователей - определяются они группами доступа шаблона(а также определяемые включением и отключением самого шаблона)

Wrong\Html\Template::require(777); // где 777 идентификатор любого шаблона

Пусть вас не смущает область видимости ваших переменных - несмотря на то, что подключение файла осуществляется в методе класса, абосолютно все ваши переменные объявленные вне кода шаблона, будут доступны внутри него с теми же именами, точно так же, как если бы вы встроили файл шаблона обычной require конструкцией. Только здесь перед встраиванием автоматически делается проверка доступов к шаблону.

И вы не только имеете доступ ко всем своим переменным объявленным ранее вне кода шаблона, вы можете их переназначать, объявлять новые, пользоваться объявленными экземплярами своих классов и т.д - все переменные автоматически доступны как будто из глобальной области видимости скрипта. Предположим код:

$a = 1;
Wrong\Html\Template::require(777); // здесь внутри кода шаблона $a изменилась на 2
Wrong\Html\Template::require(999); // здесь $a изменилась уже на 3
var_dump($a == 3); // true

Шаблоны типа: modal

Шаблоны данного типа можно встраивать 2 способами:

  • создавая модель модального окна, которая будет запрошена из api
  • или встраивая шаблон по принципу incode

Если вы создаёте api модель - код выбранного шаблона будет скопирован в каталог /api/modal/... и уже не будет относиться к данному шаблону. Данной модели отдельно вы сможете задать права доступа и у неё будет свой отдельный код, который она просто возьмет из выбранного шаблона при создании. Кода окна в DOM при этом изначально не будет, он будет запрашиваться из api и уничтожаться при закрытии окна.

А можно встраивать шаблоны модальных окон сразу же в текущий код, тем же способом что и incode:

Wrong\Html\Template::require(777); // где 777 идентификатор шаблона окна

В данном случае, если шаблон соответсвует правам доступа на чтение, он будет сразу встроен в код где он подключен.

Шаблоны типа: select

При создании выборки код выбранного шаблона будет скопирован в каталог /api/select/... и уже не будет относиться к данному шаблону. Данной модели отдельно вы сможете задать права доступа и у неё будет свой отдельный код, который она просто возьмет из выбранного шаблона при создании модели(компонента).

Шаблоны типа: action

При создании действия код выбранного шаблона будет скопирован в каталог /api/action/... и уже не будет относиться к данному шаблону. Данной модели отдельно вы сможете задать права доступа и у неё будет свой отдельный код, который она просто возьмет из выбранного шаблона при создании модели(компонента).

Кеширование шаблонов

Встроенные по принципу incode шаблоны, а также каркасные шаблоны типа page можно кешировать, указывая количество секунд для кеширования. Для встроенных шаблонов будет отдаваться кешированный html участок шаблона. Для шаблонов типа page кеширован будет весь html вывод страницы, а ключем кеша будет REQUEST_URI запрос к странице с данным шаблоном.