В 9-ом уроке мы изучим в одну из самых мощных возможностей Yii 2, это работу с виджетами и компонентами. Если вы хотите создавать переиспользуемые блоки кода, кастомизировать интерфейсы и структурировать логику приложения, этот урок станет вашим надежным проводником. Мы разберем встроенные виджеты, научимся создавать свои, а также освоим настройку компонентов.
Что такое виджеты?
Виджеты в Yii 2 это специальные классы, которые инкапсулируют HTML-код, CSS/JS и логику для создания переиспользуемых элементов интерфейса. Представьте, что вы собираете конструктор: вместо того чтобы каждый раз писать код для меню, форм или таблиц с нуля, вы просто «вставляете» готовый блок. Это экономит время, уменьшает количество ошибок и делает код чище.
Например, виджет GridView позволяет выводить данные в виде таблицы с пагинацией, сортировкой и фильтрацией всего в несколько строк кода. Виджеты могут быть как простыми (кнопка, алерт), так и сложными (форма с валидацией, графики). Их главная задача разделение ответственности, логика работы элемента остается внутри класса виджета, а в представлении вы только вызываете его.
- Переиспользование кода. Один раз создали, используете в любом месте проекта.
- Упрощение шаблонов. Представления становятся чище и понятнее.
- Инкапсуляция. Логика и стили виджета изолированы от основного кода.
Встроенные виджеты Yii 2
Yii 2 предлагает богатую коллекцию встроенных виджетов. Рассмотрим самые популярные.
1. GridView
GridView это «рабочая лошадка» для работы с таблицами данных. Он поддерживает сортировку, пагинацию, фильтрацию и даже AJAX-обновление. Вот пример использования:
use yii\grid\GridView; echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ 'id', 'name', 'email:email', [ 'class' => 'yii\grid\ActionColumn', 'header' => 'Действия', ], ], ]);
Здесь dataProvider это объект, предоставляющий данные (например из Active Record). Класс ActionColumn добавляет кнопки для просмотра, редактирования и удаления записей.
2. ActiveForm
ActiveForm упрощает создание форм, связанных с моделями. Он автоматически генерирует HTML-поля, добавляет валидацию и CSRF-защиту:
use yii\widgets\ActiveForm; $form = ActiveForm::begin(); echo $form->field($model, 'username'); echo $form->field($model, 'password')->passwordInput(); echo Html::submitButton('Отправить'); ActiveForm::end();
3. Menu
Виджет Menu создает навигационное меню. Вы можете задавать пункты в виде массива, указывать активный элемент и настраивать стили:
echo Menu::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'О нас', 'url' => ['site/about']], ['label' => 'Контакты', 'url' => ['site/contact']], ], ]);
Совет от Максима: Изучите класс yii\bootstrap5\Widget (если используете Bootstrap), чтобы добавлять стилизованные виджеты, например, модальные окна или табы.
Создание своего виджета
Теперь создадим собственный виджет. Допустим, мы хотим выводить блок с последними статьями на сайте.
Шаг 1: Создание класса виджета
Виджеты обычно хранятся в директории widgets внутри вашего модуля или приложения. Создайте файл widgets/LastPostsWidget.php:
namespace app\widgets; use yii\base\Widget; class LastPostsWidget extends Widget { public $limit = 5; // Количество статей public function init() { parent::init(); // Инициализация параметров } public function run() { // Получаем последние статьи из БД $posts = Post::find()->orderBy('created_at DESC')->limit($this->limit)->all(); // Рендерим представление виджета return $this->render('last-posts', [ 'posts' => $posts, ]); } }
Шаг 2: Создание представления
В директории widgets/views создайте файл last-posts.php:
<div class="last-posts"> <h3>Последние статьи</h3> <?php foreach ($posts as $post): ?> <div class="post"> <?= Html::a($post->title, ['post/view', 'id' => $post->id]) ?> </div> <?php endforeach; ?> </div>
Шаг 3: Использование виджета
Теперь вы можете вставить виджет в любое представление:
use app\widgets\LastPostsWidget; echo LastPostsWidget::widget([ 'limit' => 3, // Меняем лимит ]);
Практическая задача: Создайте виджет «Популярные товары», который выводит товары с наибольшим количеством просмотров. Добавьте параметр для настройки лимита.
Работа с компонентами: настройка и использование
Компоненты в Yii 2 это объекты, которые предоставляют специфическую функциональность на уровне всего приложения. Например, компоненты для работы с базой данных, кэшем, почтой или API.
Настройка компонентов
Компоненты настраиваются в файле config/web.php (или common/config/main.php для расширенных приложений). Например, добавим компонент для отправки email:
'components' => [ 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', 'useFileTransport' => false, 'transport' => [ 'class' => 'Swift_SmtpTransport', 'host' => 'smtp.example.com', 'username' => 'user@example.com', 'password' => 'password', 'port' => '587', 'encryption' => 'tls', ], ], ],
Теперь компонент доступен через Yii::$app->mailer:
Yii::$app->mailer->compose() ->setFrom('noreply@site.com') ->setTo($user->email) ->setSubject('Добро пожаловать!') ->send();
Создание своего компонента
Допустим, мы хотим создать компонент для работы с API. Создайте класс components/ApiClient.php:
namespace app\components; use yii\base\Component; class ApiClient extends Component { public $apiKey; public $baseUrl; public function getData($endpoint) { // Логика запроса к API return 'Данные из API'; } }
Зарегистрируйте компонент в конфиге:
'components' => [ 'apiClient' => [ 'class' => 'app\components\ApiClient', 'apiKey' => 'your-api-key', 'baseUrl' => 'https://api.example.com', ], ],
Используйте его в коде:
$data = Yii::$app->apiClient->getData('/posts');
Практическая задача: Создайте компонент «Logger», который записывает сообщения в файл. Добавьте метод log($message).
Пример: кастомный виджет для меню сайта
Давайте создадим виджет, который генерирует меню с поддержкой Bootstrap и подсветкой активного пункта.
Класс виджета widgets/MenuWidget.php:
namespace app\widgets; use yii\base\Widget; use yii\helpers\Html; class MenuWidget extends Widget { public $items = []; public function run() { $html = '<ul class="nav navbar-nav">'; foreach ($this->items as $item) { $active = $this->isItemActive($item['url']); $html .= '<li class="' . ($active ? 'active' : '') . '">'; $html .= Html::a($item['label'], $item['url']); $html .= '</li>'; } $html .= '</ul>'; return $html; } private function isItemActive($url) { $currentRoute = Yii::$app->controller->route; return $currentRoute === $url[0]; } }
Использование в layout’е:
echo MenuWidget::widget([ 'items' => [ ['label' => 'Главная', 'url' => ['site/index']], ['label' => 'Блог', 'url' => ['post/index']], ['label' => 'Контакты', 'url' => ['site/contact']], ], ]);
Что мы сделали?
- Проверяем активный пункт меню через сравнение текущего маршрута.
- Используем Bootstrap-классы для стилизации.
- Передаем массив пунктов меню в виджет.
Практическая задача: Добавьте поддержку вложенных пунктов меню (dropdown).
Итоги урока
Сегодня вы научились:
- Использовать встроенные виджеты Yii 2.
- Создавать собственные виджеты для переиспользуемых элементов.
- Настраивать и применять компоненты.
Домашнее задание:
- Создайте виджет «Хлебные крошки», который отображает текущий путь на сайте.
- Настройте компонент для кэширования данных в Redis.
- Модифицируйте виджет меню, добавив иконки к пунктам (используйте FontAwesome).
Виджеты и компоненты это инструменты, которые делают разработку в Yii 2 быстрой и удобной. Если что-то не получается, пишите вопросы в комментариях.
Поддержка автора осуществляется с помощью специальной формы ниже, предоставленной сервисом «ЮMoney». Все платёжные операции выполняются на защищённой странице сервиса, что обеспечивает их корректность и полную безопасность.
