Принцип построения шаблонов

Пример работы с шаблоном новостей

В большинстве систем, встроены различного рода шаблонизаторы. В целом и в нашу систему, можно легко встроить любой из существующих шаблонизаторов.

Но как показала наша практика, в 90% случаев он не нужен.

Если вы придерживаетесь правила, что все данные готовятся до передачи в шаблон, то сам шаблон остается "чистым".


Рассмотрим на пример работу с шаблоном в MIND CMS

По умолчанию в системе, любой php файл может быть шаблоном. Принцип передачи данных в шаблон, крайне прост и выполняется примитивным классом HTML.

Для вызова класса, предусмотрена глобальная функция html().

Пример вызова шаблона:

html()->render(ФАЙЛ, ДАННЫЕ);

Как получить данные внутри шаблона?

можно просто их распечатать:

<? print_r($data); ?> / * в шаблоне они всегда будут в этой переменной */

И затем использовать в шаблоне, как пример:

<div class="panel">
 <div class="panel-heading clearfix">
 <div class="pull-left"><a href="#" class="btn btn-xs btn-primary"> Управление кодами</a></div>

 </div>
 <div class="panel-body">
 .....
 <input type="text" name="string" value="<?= $data['string']; ?>" class="form-control">
 <label for="length">Количество символов в коде</label>
 <input type="number" name="length" value="<?= $data['length']; ?>" class="form-control">
 <label for="num">Общее количество кодов для генерации</label>
 <input type="number" name="num" value="<?= $data['num']; ?>" class="form-control">
 .....
 </form>
 </div>
</div>


Естествено, что так как шаблон представляет из себя всего лишь PHP скрипт, то и обработка данных может быть любой, как и в любом скрипте. Но делать так не стоит, так как вы быстро получите "муссорные" шаблоны. С одной стороны это свобода, с другой это самоконтроль.

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

<?php if (class_exists('modules\backupdb\controllers\Admin')) { ?>
 <div class="col-sm-3">
 <div class="panel">
 <div class="panel-heading"><a href="/backupdb/admin" class="btn btn-xs btn-primary">Бэкап
 </a> - базы данных (DB)
 </div>
 <div class="panel-body">
 Рекомендуем, делать бэкап Базы данных, хотя бы раз в месяц.
 </div>
 </div>
 </div>
 <?php } ?>


При правильном составлении кода, все остается, более чем читаемо. И именно этой идеи мы и пытались добиться.


Где и как хранить шаблоны


Как мы уже проговорили, шаблон это всего лишь PHP скрипт. Соотвественно лежать он может где угодно. Но лучше соблюдать простые правила:

1. Шаблон всего дизайна должен лежать в папке system->templates->front->НАЗВАНИЕ ШАБЛОНА->НАЗВАНИЕ ШАБЛОНА.php. Обратите внимание, что название папки должно быть такое же, как и у файла. В этом случае, система сможет подсвечивать ваш шаблон, в многих модулях. Например, тех же страницах.

2. Все ccs, js, картинки и шриты должны лежать в папке www->assets->templates->НАЗВАНЕ ШАБЛОНА

Обращаем внимание, что это скорее соглашение, нежели требование.


Где хранить шаблоны модуля


Модуль как правило, выводит свою информацию в "контент зону". Тем самым он скорее готовит информацию, для кусочка основного шаблона. Более того, модуль как правило ставится автономно, поэтому шаблоны модуля должны лежать в папке модуля, соответственно путь будет такой:

system->modules->ВАШ МОДУЛЬ->templates

А уже внутри этой папки, вы можете создавать любую структуру.

Все стили шаблона, картинки, шрифты и т.д. должны лежать в папке:

www->assets->modules->ВАШ МОДУЛЬ

Опять же, это скорее соглашание, нежели требование.


Для получения данных для шаблона можно использовать:

Модели

Хардкод

Хелперы

Регистрация JS и CSS файлов дя шаблона

Регистрация CSS

В процессе работы вам надо из своих модулей "пробрасывать" скрипты и стили в основной шаблон. Для этого в системе в классе Html предусмотрен целый ряд методов.

Рассмотрим их на примере:

html()->css(); // может регистрировать и выводить
html()->setCss(); //только регистрирует

Методы синонимы, но немножно отличаются поведением. Об этом позже.

Главное что на вход можете передать ссылку на свой Css файл, например так:

html->setCss("/assets/vendors/Jquery/jquery-3.2.1.min.css");
html->setCss("/assets/vendors/mystyle/style.css");

Эта строка зарегистрирует ваш Css файл, и затем отобразит уже на странице в дизайне. Для отрисовки всех зарегистрированных файлов используется методо showCss() или просто css(). Рассмотрим на примере:

html->showCss();

В месте вызова отобразит:

 <link rel="stylesheet" href="/assets/vendors/Jquery/jquery-3.2.1.min.css">
 <link rel="stylesheet" href="/assets/vendors/mystyle/style.css">

Если же вызвать с параметром кэширования:

html->showCss(true); 
*Вместо этого вызова можно сделать просто: html()->css();

C параметром TRUE он выведет иной результат:

<link rel="stylesheet" type="text/css" href="public/cache/css/7dd16ce4005097323bcf605e9c1f56f9.css?1600936589">

Регистрация JS файлов

Работа с js файлами практически полностью идеинтична работе с CSS файлами, примеры:

Регистрация JS файлов:

html()->js("/assets/vendors/Jquery/jquery-3.2.1.min.js"); // может регистрировать и выводить

html()->setJs("/assets/vendors/my/custom.js"); //только регистрирует

Затем в шаблоне делаем вывод

html()->showJs();

html()->js();

Еще одной особеноность метода setJs, это возможность передать inline скприт, в шаблон, пример:

html()->setJs('console.log("ALARM!");',false,true); //первый параметр код, 
//второй - что выводим в конце,
//третий что это inline code

при таком вызове в коде шаблона появится:

<script language="JavaScript" type="text/javascript">
<!--
console.log("ALARM!");//-->
</script>


Важно помнить, что ваш скрипт часто должен выполниться только после загрузки страницы. В этом случае не забывайте оборачивать в DOMContentLoaded.