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

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

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

Но как показала наша практика, в 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.