Создание интерфейса — это как сборка мебели из IKEA: вроде всё по инструкции, но вечно что-то не подходит. В Yii2 эту проблему решают виджеты — готовые «детали», которые можно вставлять куда угодно. Если вы устали копипастить код и мечтаете о чистоте и порядке, эта статья для вас.

Digital-студия WNDER

Ссылка на оригинальную статью

Что такое виджет и зачем он нужен

Виджет — это маленький самостоятельный компонент интерфейса. Представьте, что ваш сайт — это дом. Стены — это каркас приложения, а виджеты — окна, двери, розетки. Вы можете взять стандартное окно или сделать своё, необычной формы. Главное — оно вставляется в проём и работает.

В Yii2 виджеты — это классы, которые рендерят HTML, CSS и JavaScript. Они могут быть простыми, как кнопка, или сложными, как форма с валидацией. Использовать их — одно удовольствие: написал пару строк — и готово.

Зачем они нужны? Во-первых, переиспользование. Написали один раз — используете везде. Во-вторых, чистота кода. Представьте, что у вас 50 страниц, и на каждой нужно вывести календарь. Без виджета вы бы копировали код 50 раз. С виджетом — один вызов.

Встроенные виджеты: что уже есть в коробке

Yii2 поставляется с набором готовых виджетов. Это как набор инструментов от «Сделай сам» — бери и пользуйся. Вот основные из них:

Виджет Что делает Пример использования
ActiveForm Строит формы с валидацией Форма регистрации
GridView Выводит таблицы с сортировкой и пагинацией Список заказов в админке
ListView Выводит список элементов с шаблоном Лента новостей
DetailView Показывает детали одной записи Карточка товара
Menu Строит меню с поддержкой вложенности Навигация по сайту

Например, чтобы вывести меню, достаточно написать:


 [
        ['label' => 'Главная', 'url' => ['/site/index']],
        ['label' => 'О нас', 'url' => ['/site/about']],
    ],
]) ?>

Как видите, ничего сложного. Но что делать, если стандартного функционала не хватает? Создавать свои виджеты.

Создаём свой виджет: от идеи до работающего кода

Предположим, вы хотите виджет «Последние новости». Он должен выводить заголовки и ссылки на статьи. Создание виджета — это создание класса, наследующего от \yii\base\Widget.

Шаг 1. Создаём класс в папке widgets:


orderBy(['created_at' => SORT_DESC])->limit($this->limit)->all();
        
        $items = [];
        foreach ($news as $item) {
            $items[] = Html::a($item->title, ['news/view', 'id' => $item->id]);
        }
        
        return implode('
', $items);
    }
}

Шаг 2. Используем виджет в представлении:


 3]) ?>

Вот и всё. Виджет готов. Но это простой пример. В реальной жизни часто нужно выводить сложную разметку. Для этого лучше использовать представления.

Продвинутый уровень: виджеты с представлениями

Когда логика виджета сложная, а HTML — объёмный, выносите разметку в отдельный файл. Это похоже на то, как вы выносите код из контроллера в представление. Так и здесь.

Создайте файл представления widgets/views/last-news.php:

А в классе виджета укажите:


public function run()
{
    $news = News::find()->orderBy(['created_at' => SORT_DESC])->limit($this->limit)->all();
    return $this->render('last-news', ['news' => $news]);
}

Теперь у вас есть чистый, легко читаемый код. И если нужно поменять разметку, вы правите только файл представления.

Лайфхак: Называйте файлы представлений так же, как и класс виджета, но в нижнем регистре и без суффикса Widget. Например, для LastNewsWidget — last-news.php. Так проще ориентироваться.

Правила хорошего тона при создании виджетов

Виджеты — это не просто код, это часть архитектуры. Чтобы не превратить проект в свалку, соблюдайте несколько правил.

  1. Один виджет — одна задача. Не пытайтесь сделать «универсальный» виджет, который делает всё. Это приведёт к путанице.
  2. Используйте публичные свойства для настройки. Так другие разработчики смогут легко адаптировать виджет под свои нужды.
  3. Не забывайте про безопасность. Всегда экранируйте данные с помощью Html::encode().
  4. Документируйте. Пишите комментарии к свойствам и методам. Через месяц вы будете благодарны себе.

Пример хорошей документации:


/**
 * Виджет выводит последние новости.
 *
 * Пример использования:
 * ```php
 *  5]) ?>
 * ```
 */
class LastNewsWidget extends Widget
{
    /**
     * @var int количество новостей для вывода
     */
    public $limit = 5;
}

Что в итоге: резюме

Виджеты — это мощный инструмент Yii2, который экономит время и силы. Вы можете использовать встроенные виджеты или создавать свои. Главное — следовать принципу «один виджет — одна задача» и не забывать про безопасность.

Теперь, когда вы знаете основы, попробуйте написать свой первый виджет. Начните с простого — например, виджет для вывода случайной цитаты. Это займёт 15 минут, а польза будет огромная.

Помните: виджеты — это как кирпичики LEGO. Собирайте интерфейс с удовольствием!

Студия WNDER