Главная > Блог > Web-разработка > Yii2 и Laravel >

Yii2. Создаем свое представление

27.02.2019

Теги: CSS • HTML • PHP • Web-разработка • Yii2 • Теория • Фреймворк • ШаблонСайта

Вид (View) — это часть MVC архитектуры, которая отвечает за представление данных конечным пользователям. Виды представляют собой PHP-файлы, содержащие HTML и PHP код, отвечающие внешний вид страниц сайта. В Yii2 существуют два вида шаблонов — layout (директория views/layouts) и view (директории views/site, views/page, views/admin/page). Шаблоны layout отвечают за неизменную часть страниц сайта (шапка, подвал, сайдбар), шаблоны view отвечают за представление динамической части страницы (основной контент).

После установки Yii2 уже существуют файлы:

views/layouts
- main.php — шапка и подвал
view/site
- about.php — основной контент страницы «About»
- contact.php — основной контент страницы «Contact»
- ..........

Создаем layout-шаблон

Давайте создадим layout-шаблон base.php:

<?php
/*
 * Файл /views/layouts/base.php
 */
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Шаблон страницы</title>
</head>
<body>

</body>
</html>

Чтобы начать использовать этот шаблон вместо views/layouts/main.php, вносим изменения в файл конфигурации config/web.php:

$config = [
    'id' => 'basic',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'layout' => 'base',
    /* ... */
];

Значение layout-шаблона по умолчанию задается в классе yii\base\Application:

/*
 * Файл /vendor/yiisoft/yii2/base/Application.php
 */
namespace yii\base;
use Yii;

abstract class Application extends Module {
    /* ... */
    public $layout = 'main';
    /* ... */
}

Но такая настройка изменит layout-шаблон для всех страниц сайта. Если нужно изменить layout-шаблон для всех страниц одного контроллера:

<?php
namespace app\controllers;
use yii\web\Controller;

class SiteController extends Controller {
    // шаблон base для всех страниц контроллера
    public $layout = 'base';
    
    public function actionIndex() {
        return $this->render('index');
    }
    public function actionAbout() {
        return $this->render('about');
    }
    public function actionHello() {
        return $this->render('hello');
    }
}

Или, только для одной страницы одного контроллера:

<?php
namespace app\controllers;
use yii\web\Controller;

class SiteController extends Controller {
    public function actionIndex() {
        return $this->render('index');
    }
    public function actionAbout() {
        return $this->render('about');
    }
    public function actionHello() {
        // шаблон base только для страницы hello
        $this->layout = 'base';
        return $this->render('hello');
    }
}

Подключаем css и js файлы

Теперь для layout-шаблона нужно подключить css и js файлы. Открываем на редактирование файл assets/AppAsset.php:

<?php
namespace app\assets;
use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

Здесь идет подключение css-файлов, путем добавления элементов в массив $css и подключение js-файлов, путем добавления элементов в массив $js. Кроме того, подключаются зависимости — т.е. те css и js файлы, которые нужны для работы наших стилей и скриптов, например Bootstrap и jQuery.

Добавим в директорию web/js файл site.js:

alert('Файл web/js/site.js подключен');

И подключим его:

<?php
class AppAsset extends AssetBundle
{
    /* ... */
    public $js = [
        'js/site.js'
    ];
    /* ... */
}

Теперь будем редактировать наш layout-шаблон base.php:

<?php
/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);
?>

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
    <?php $this->beginBody() ?>
    <?= $content ?>
    <?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Шаблон вызывает методы класса yii\web\View, чтобы стили и скрипты, зарегистрированные ранее в классе app\assets\AppAsset, подключались в местах вызова.

beginPage(): Этот метод нужно вызывать в самом начале шаблона. Он вызывает событие EVENT_BEGIN_PAGE, которое происходит при начале обработки страницы.
endPage(): Этот метод нужно вызывать в конце страницы. Он вызывает событие EVENT_END_PAGE, которое происходит при окончании обработки страницы.
head(): Этот метод нужно вызывать в head-секции страницы. Он генерирует метку, которая будет заменена зарегистрированным ранее HTML-кодом (подключение css-файлов, добавление мета-тегов), когда рендеринг страницы будет завершен.
beginBody(): Этот метод нужно вызывать после открывающего тега body страницы. Он вызывает событие EVENT_BEGIN_BODY и генерирует метку, которая будет заменена зарегистрированным ранее HTML-кодом, который нужно разместить после открывающего тега body.
endBody(): Этот метод нужно вызывать перед зарывающим тегом body. Он вызывает событие EVENT_END_BODY и генерирует метку, которая будет заменена зарегистрированным HTML кодом (например, подключение js-файлов), который нужно разместить перед закрывающим тегом body.

И вот какая страница будет сформирована в итоге наших действий:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello</title>
    <link href="/web/assets/ca646842/css/bootstrap.css" rel="stylesheet">
    <link href="/web/css/site.css" rel="stylesheet"></head>
<body>
    <div class="site-hello">
        <h1>Hello</h1>
        <p>Это страница «Hello». Вы можете изменять эту страницу, редактируя файл шаблона:</p>
        <code>D:\work\localhost25\www\views\site\hello.php</code>
    </div>
    <script src="/web/assets/e40e0b3/jquery.js"></script>
    <script src="/web/assets/e5a452b0/yii.js"></script>
    <script src="/web/js/site.js"></script>
</body>
</html>

Для полноты картины — исходный код view-шаблона для страницы http://www.server.com/web/index.php?r=site/hello:

<?php
/* @var $this yii\web\View */
use yii\helpers\Html;

$this->title = 'Hello';
?>
<div class="site-hello">
    <h1><?= Html::encode($this->title) ?></h1>
    <p>Это страница «Hello». Вы можете изменять эту страницу, редактируя файл шаблона:</p>
    <code><?= __FILE__ ?></code>
</div>

Поиск: CSS • HTML • PHP • Web-разработка • Yii2 • Фреймворк • Шаблон сайта • View • Представление • MVC • Framework