Шаблоны, виды, их создание и использование в Yii 2

Шаблоны, виды, создание и использование в Yii 2

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

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

Интеграция приложения с новыми темами потребует создание шаблона layout, все шаблоны располагаются в папке @app/views/layouts. Применение шаблонов очень удобно, поскольку код неизменяемой части HTML страницы пишется один раз для всех видов данного контроллера, которые используются в нескольких страницах, обычно это шапка, меню, нижний колонтитул, копирайты, боковая панель и пр. Все же изменяемые части для разных страниц размещаются в видах. Использование шаблонов предполагает не только создание своего основного навигационного меню, но и дополнительных меню, рекламных блоков, модулей, баннеров, а также и других активов. Далее мы рассмотрим их подключение и применение.

Шаблоны и виды

Шаблоны (layouts) - является инструментом разделения содержимого (контента) и визуального представления. Шаблоны в Yii 2 – это, по сути, набор правил для отображения информации и представляют собой разметку в виде HTML тэгов, метатэги, включает служебную информацию, систему ссылок на таблицы стилей CSS, скрипты, подключаемые из внешних источников шрифты, а также иногда контент. Шаблоны являются разновидностью видов, назначение которых представлять некие общие части для разных видов. Ниже приведен пример простейшего HTML шаблона:

Шаблоны, виды, их создание и использование в Yii 2

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

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

Наиболее полезно применение концепции использования различных Layots (макетов) тогда, когда для пользователя приложения представляются одни и те же самые данные в различном контексте, т.е. в различных ситуациях. Например, большинство страниц в веб имеют одинаковую шапку и нижний колонтитул (хеадер и футер). Можно, конечно же, приводить их в каждом отдельном виде, но все же практичнее сделать это всего один раз, в шаблоне, а уже затем, в процессе рендеринга, включать этот вид в необходимое место шаблона.

Создание шаблонов

Поскольку шаблоны - это также виды, то их можно создавать точно так же. По умолчанию layouts хранятся в каталоге @app/views/layouts. Шаблоны, используемые в конкретных модулях, хранятся в подкаталоге views/layouts папки модуля. Всегда можно изменить папку для шаблонов, назначенную по умолчанию, если использовать свойство yii\base\Module::$layoutPath приложения или модуля. Пример, приведенный далее показывает, как выглядит шаблоны, который мы назвали training. Для лучшей ясности мы несколько упростили код этого примера.

<?php
use yii\helpers\Html;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?= Yii::$app->charset ?>">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<header class="header-top">
<div id="navbar" class="navbar">
<!--Navigayion--->
<?php
NavBar::begin([
'brandLabel' => 'Наша маленькая компания',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Home', 'url' => ['/site/index']],
----------------------------------------------------------
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post', ['class' => 'navbar-form'])
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link']
)
. Html::endForm()
. '</li>'
)
],
]);
NavBar::end();
?>
</div>
</header>
<div class="container-qw">
<?= Breadcrumbs::widget(['links' => isset($this->params['breadcrumbs']) ? $this-> params ['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
<div class="container">
<h1 class="fp-title">Блог института русской ведической культуры</h1>
<div class="wrapper">
<div class="fp-blog">
<article class="inner-blog">
<h2>Заголовок статьи 1</h2>
<div class="posts-photo">
<img src="images/img4.jpg" alt="">
</div>
<div class="intro-text">
<p>Вы можете подключить шрифт FuturaLight Light к своему сайту, даже не скачивая его с нашего сервера. Все что необходимо сделать - это следовать инструкции ниже.</p>
<a href="#" class="btn">Подробнее</a>
</div>
</article>
</div>
</div>
<aside class="sidebar">
<h3 class="sections-title">Последние новости</h3>
<!-- Список записей -->
<div class="sidebar-posts">
<div class="sidebar-posts-item">
<div class="sidebar-posts-photo">
<img src="images/pic1-1.jpg" alt="">
</div>
<div class="sidebar-posts-content">
<h4 class="sidebar-posts-title">Заголовок статьи в сайдбаре...</h4>
</div>
</div>
<div class="sidebar-posts-item">
<div class="sidebar-posts-photo">
<img src="images/pic2-1.jpg" alt="">
</div>
<div class="sidebar-posts-content">
<h4 class="sidebar-posts-title">Заголовок статьи в сайдбаре...</h4>
</div>
</div>
<!-- /Список записей -->
</aside>
</div>
<div class="clearfix"></div>
<footer class="footer">
<p class="pull-left">&copy; 2010 - <?= date('Y') ?> | Центр обучения IRBIS <a href="#" class="footer-link"> | Студия дизайна Ангелов</a></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Поскольку в веб-приложении возникает необходимость формировать большое количество разнообразного HTML кода, то если речь идёт о динамической разметке, становится сложно её создавать её без поддерки Yii Framework. Поэтому Yii предоставляет необходимую помощь в виде Html-помощника, который располагает набором статических методов для обработки используемых чаще всего HTML тэгов, а также их атрибутов и содержимого.

<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <?= Html::jsFile('@web/js/main.js') ?>
<title><?= Html::encode($this->title) ?></title>
   <?php $this->head() ?>
..........................................

Как вы можете видеть мы включили в HTML разметку такие свойства класса yii\base\Application, как $app->language и Yii::$app->charset для задания языка и кодировки приложения. Для включения метатэгов в хеадер мы включили <?= Html::csrfMetaTags() ?>, эта функция предназначена для повышения безопасности приложения и защищает от подделки межсайтовых запросов. Строка Html::jsFile('@web/js/main.js') подключает внешний JavaScript-файл. Выражение <?php $this->head() ?> подключает стили и скрипты, которые прописаны в файле @app/assets/AppAsset.php.

Внутри секции <body>, шаблон генерирует переменную $content, предназначенную содержать результат рендеринга контента вида и, который и передается в Layout, при работе метода yii\base\Controller::render().

Yii 2 обеспечивает стандартное решение обмена информацией между видом и шаблоном, через свойство Params компонента View, который можно использовать для обмена информацией между видами. Например, если в шаблоне мы используем виджет “Хлебные крошки”:

<?= Breadcrumbs::widget(['links' => isset($this->params['breadcrumbs']) ? $this-> params ['breadcrumbs'] : [],]) ?> то затем можно отобразить хлебные крошки переданные через params и в виде contact, т.е. мы можем указать текущий сегмент этого меню с помощью следующего кода:

$this->title = 'Contact';
$this->params['breadcrumbs'][] = $this->title;
Это стандартное решение, так как свойство params существует во всех видах и оно прикреплено к компоненту View. Это свойство, params, является массивом, который мы можем использовать без каких-либо ограничений, чтобы отслеживать путь навигации.

Итак, из примера также видно, что шаблон вызывает методы, с тем, чтобы скрипты и тэги, которые зарегистрированы приложении, могли быть отображены в требуемом месте вызова:
• beginPage(): метод вставляют в начале нашего шаблона. Метод вызывает событие EVENT_BEGIN_PAGE, которое имеет место при обработке страницы.
• endPage(): нужно вызвать в конце страницы. Происходит вызов события EVENT_END_PAGE и указание на обработку конца страницы.
• head(): вызывается в секции <head> страницы. Генерирует метку link, заменяемую кодом HTML в виде тэгов, мета тэгов, ссылок), после того, как рендеринг страницы завершится.
• beginBody(): метод вызывается в начале <body> секции. Вызывается событие EVENT_BEGIN_BODY, генерируя метку, заменяющей HTML код, в частности, тот Javascript код, который для корректной работы нужно разместить именно в начале <body> страницы.
• endBody(): метод вызывается в конце секции <body> и вызывает событие EVENT_END_BODY, генерируя метку, которая будет заменена HTML кодом Javascript, который необходимо разместить в конце перед закрывающим тегом</body>.

Как это выглядит:

Шаблоны, виды, их создание и использование в Yii2

Как видите, шаблон layots/training.php предназначен генерировать HTML тэги, которые могут присутствовать на всех или части страниц того контроллера, где он объявлен. Если шаблон объявляется в контроллере public $layout = 'training', то он действует для всех видов данного контроллера:

class PostController extends Controller {
public $layout = 'training';
public function actionIndex()
{
return $this->render('index');
}
public function actionFull()
{
return $this->render('full');
}
}

Для того, чтобы шаблон действовал только для конкретного вида, его необходимо объявить в экшене:

public function actionBlog()
{
$this->layout = 'training';
return $this->render('blog');
}

Пример - создание вида формы авторизации

Итак, вид – это, прежде всего, HTML код, который включает в себя также и PHP код. Например, в форме авторизации PHP код служит для генерации динамического контента, такой, как заголовок страницы и собственно форму авторизации, в то время как HTML служит для разметки полученных данных в итоговую html страницу:

<div class="site-login">
<h1><?= Html::encode($this->title) ?></h1>
<p> Пожалуйста, заполните следующие поля для входа:</p>
<?php $form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['class' => 'form-horizontal'],
'fieldConfig' => [
'template' => "{label}\n<div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div>",
'labelOptions' => ['class' => 'col-lg-1 control-label'],
],
]); ?>
<?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'rememberMe')->checkbox([
'template' => "<div class=\"col-lg-offset-1 col-lg-3\">{input} {label}</div>\n<div class=\"col-lg-8\">{error}</div>",
]) ?>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-11">
<?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>

В коде вида, может быть использована также переменная $this, компонент, управляющий шаблоном и обеспечивает его рендеринг (визуализацию). Кроме $this, в виде могут быть доступными и другие переменные, в частности $form и $model. Данные переменные суть данные, передаваемые в вид контроллером или другими объектами, которые вызывают рендеринг вида.

Подключение скриптов и стилей

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

<?= Html::cssFile('@web/css/style.css') ?>
<?= Html::jsFile('@web/js/jquery.min.js') ?>

или если разметка приближается к статической. то лучше вообще использовать HTML код. Вопрос подключения активов мы уже затрагивали достаточно подробно в одном из уроков “Активы и управление активами в Yii 2 Framework”, также с этим вопросом можно познакомиться в руководстве. Подключения дополнительных стилей и других активов реализуется в файле AppAsset.php:

namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
'css/style.css',
];
public $js = [
'js/bootstrap.min.js',
'js/jquery.min.js',
];
public $jsOptions= [
'position' => \yii\web\View::POS_HEAD
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapThemeAsset',
];
}

namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
'css/style.css',
];
public $js = [
'js/bootstrap.min.js',
'js/jquery.min.js',
];
public $jsOptions= [
'position' => \yii\web\View::POS_HEAD
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapThemeAsset',
];
}

Для этого нам необходимо создать папки js и css в каталоге web/assets и загрузить в них требуемые для работы шаблонов скрипты и каскадные таблицы стилей. Подключение в AppAsset.php выглядит так:

class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
//'css/site.css',
'assets/css/style.css',
'assetscss/etalage.css',
'assetscss/nav.css',
'assetscss/popuo-box.css',
'assetscss/bootstrap.css',
    ];

Все содержимое пакета активов появится в приложении только тогда, когда оно будет объявлено в файлах views/layouts с помощью двух строчек:
• указывает на файл, где объявлен пакет, т.е. какие стили или скрипты нужно подключить use app\assets\AppAsset;
• с помощью метода Register регистрируем объект $this в шаблоне AppAsset::register($this);

По умолчанию, когда пакет активов публикуется, все содержимое в каталоге, указанном yii\web\AssetBundle::$sourcePath будет доступным. Вы можете настроить это поведение путем настройки свойства publishOptions.В приведенном примере строка 'position' => \yii\web\View::POS_HEAD позволяет опубликовать активы в секции Head, т.е. в шапке шаблона. Для того, чтобы опубликовать только один или несколько подкаталогов необходимо указать свойство $sourcePath со ссылкой на каталог в yii\web\AssetBundle::$sourcePath, который будет содержать связку активов. Более подробно с другими свойствами класса Class yii\web\AssetBundle можно познакомиться по ссылке http://guide.yii2.org-info.by/yii-web-assetbundle.html#$sourcePath-detail. Больше о возможности подключения активов можно узнать в руководстве по Yii 2 в разделе Application Structure на страничке Assets, в частности о создании собственных классов.

Создание статических страниц

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

Затем мы добавляем действие в контроллер:

public function actionPage()
{
return $this->render('page');
}

После этого создаём вид в views/controller/action-name.php. Эта процедура довольно проста и вам уже хорошо знакома, но она неудобна. Если придется написать всего 5 страниц, то ничего страшного не произойдет, а если таких страниц 500, то придется все эти 500 одинаковых кусков повторять многократно. Вместо этого можно использовать действие yii\web\ViewAction в контроллере.
Таким образом, Yii 2 обеспечивает быструю альтернативу, позволяющую добавлять статические страницы в метод actions() контроллера:

class SiteController extends Controller {
public function actions()
{
return [
'page' => ['class' => 'yii\web\ViewAction',],
];
}
}

С помощью этой одной простой декларации, мы можем передать все статическое содержимое любого числа страниц в views/controllerName/page.

И, наконец, мы можем указать на URL с маршрутом controller_name/page и параметр вида с именем файла вида, ищется как http://hostname/web/index.php?
r=controllerName/page&view=name_view.

Пример - добавляем страницу контактов

После того, как мы поняли, как создавать статические страницы, настало время, чтобы написать страницу контактов. Давайте передадим короткий статический контент в views/post/pages/blog.php, для этого мы создадим вид blog в папке @app/views/post/pages:

<?php
use yii\helpers\Html;
$this->title = 'Новости';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-about">
<h1><?= Html::encode($this->title) ?></h1>
<h2>Страница Blog</h2>
<p>Здесь мы размещаем какой-либо статический текст</p>
</div>

Таким образом может выглядеть контроллер:

class PostController extends Controller {
public function actions()
{
return [
'page' => [
'class' => 'yii\web\ViewAction',
],
];
}
public function actionBlog()
{
return $this->render('blog');
}
}

Теперь GET параметр view дает информацию yii\web\ViewAction какой вид необходимо отразить. Экшн затем ищет этот вид в каталоге @app/views/site/pages. Теперь, каждый запрос к site/pages/ направляется с помощью класса ViewAction, который обрабатывает его просто путем предоставления статического контента относительно вида.

Затем создадим вид blog в папке @app/views/post/pages, где находятся страницы со статическим контентом, а наш пример отображается по адресу:

http://basic.lc/web/index.php?r=post/page&view=blog

и мы должны увидеть это:

Шаблоны, виды, их создание и использование в Yii2

Мы можем настроить последнюю часть маршрута с этими изменениями:

• Имя атрибута массива возвращается методом actions() контроллера
• Установить атрибут viewPrefix декларации класса ViewAction в первой части URL, который мы хотим использовать, чтобы достигнуть страницы
• Изменить имя вложенной папки views/controllerName

Например, мы хотим использовать static в качестве последней части URL, чтобы добраться до статических страниц в SiteController. Мы хотим, чтобы он указывал на:

http://basic.loc/web/ index.php?r=site/static&view=contact, чтобы отобразить вид контакта?

Это будет ViewAction в массиве метода actions() SiteController:

'static' => [
'class' => 'yii\web\ViewAction',
'viewPrefix' => 'static'
],

Мы также должны изменить название статической вложенной страницы, переименовав его из
views/site/pages в views/site/static, и мы можем указать на

http://basic.loc /basic/web/index.php?r=site/static&view=contact.



Проект IRBIS

Проект IRBIS

Проект IRBIS - это проект развития интеллектуальных ресурсов и содействие преобразованию специалистов в технологически грамотных и социально ответственных профессионалов в области информационных технологий.

Разработка веб-приложений

Проект IRBIS

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

Back-end разработка

HTML-верстка: инструменты и приемы профессиональной front-end разработки c 29 января 2016 по 23 марта 2016

Front-end разработчик

HTML-верстка: инструменты и приемы профессиональной front-end разработки