Как настроить работу с AdminLTE в Yii2

AdminLTE — это стильный и мощный административный интерфейс, построенный на основе Bootstrap, который позволяет создавать профессиональные веб-приложения. Обратная связь именно от разработчиков позволила создать каркас конкретно для административных интерфейсов, и именно поэтому он так популярен в различных проектах по всему миру.

Yii2 — это один из самых популярных фреймворков для разработки веб-приложений на PHP. Он обладает мощными инструментами и широким набором функций для ускорения процесса разработки. Однако, стандартный пользовательский интерфейс Yii2 может выглядеть не очень привлекательно. Вот где на помощь приходит AdminLTE.

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

Зачем нужен AdminLTE в Yii2? Основные преимущества

Основные преимущества AdminLTE в Yii2:

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

Установка и настройка AdminLTE в Yii2

Шаг 1: Скачайте архив с исходными файлами AdminLTE с официального сайта.

Шаг 2: Разархивируйте скачанный архив и переместите содержимое папки «dist» в папку «web» вашего проекта.

Шаг 3: Откройте файл «AppAsset.php» в папке «assets» вашего проекта и добавьте следующий код:

public $css = [
'css/AdminLTE.min.css',
];
public $js = [
'js/AdminLTE.min.js',
];

Шаг 4: Откройте файл «AppAsset.php» в папке «config» вашего проекта и добавьте следующий код:

public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
]

Шаг 5: Откройте файл «main.php» в папке «config» вашего проекта и добавьте следующий код:

'layout' => '@app/views/layouts/main',
'components' => [
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'skin' => 'skin-blue',
],
],
],
],

Шаг 6: Создайте новый контроллер с помощью команды «php yii gii/controller —controllerClass=SiteController».

Шаг 7: Откройте созданный контроллер и замените содержимое метода «actionIndex» на следующий код:

return $this->render('index');

Шаг 8: Создайте новый файл «index.php» в папке «views/site» и добавьте следующий код:

<h1>Добро пожаловать в Yii2 с AdminLTE!</h1>

Шаг 9: Запустите ваш проект и откройте страницу «site/index». Вы должны увидеть текст «Добро пожаловать в Yii2 с AdminLTE!» с примененными стилями и настройками AdminLTE.

Загрузка и установка AdminLTE

Для начала работы с AdminLTE в Yii2 необходимо загрузить и установить пакет через менеджер зависимостей Composer.

Откройте командную строку и перейдите в директорию вашего проекта.

Запустите следующую команду, чтобы загрузить и установить AdminLTE:

composer require dmstr/yii2-adminlte-asset «~2.0»

Composer найдет последнюю версию пакета и установит его в папку «vendor» вашего проекта.

Если все прошло успешно, вы можете перейти к настройке использования AdminLTE в вашем Yii2-приложении.

Подключение и настройка зависимостей

Чтобы установить AdminLTE, откройте командную строку и перейдите в каталог вашего проекта Yii2. Затем выполните следующую команду:

composer require dmstr/yii2-adminlte-asset "2.*"

После выполнения этой команды Composer автоматически загрузит и установит необходимые файлы AdminLTE.

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

'components' => [
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'skin' => 'skin-blue',
],
],
],
],

В этом примере мы установили скин AdminLTE в «skin-blue». Вы можете выбрать другой скин, включая «skin-blue-light», «skin-yellow», «skin-yellow-light», «skin-red», «skin-red-light», «skin-purple», «skin-purple-light», «skin-green» и «skin-green-light».

Теперь Yii2 настроен на использование AdminLTE и готов к созданию красивых административных интерфейсов для вашего проекта.

Настройка маршрутов и контроллеров

Для работы с AdminLTE в Yii2 необходимо настроить маршруты и контроллеры, чтобы корректно отображать страницы и обрабатывать запросы.

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

1. Создайте новый файл контроллера в директории controllers вашего проекта.
2. Откройте созданный файл и добавьте следующий код:

<?phpnamespace app\controllers;use Yii;use yii\web\Controller;class SiteController extends Controller{public function actionIndex(){return $this->render('index');}}

В данном примере мы создали контроллер SiteController с одним методом действия actionIndex(). Метод actionIndex() отвечает за отображение главной страницы сайта.

Далее настроим маршруты для нашего контроллера. Для этого выполним следующие шаги:

1. Откройте файл config/web.php вашего проекта.
2. Найдите секцию ‘components’ в массиве конфигурации и добавьте следующий код:

'urlManager' => ['enablePrettyUrl' => true,'showScriptName' => false,'rules' => ['' => 'site/index',],],

В данном примере мы настраиваем urlManager для создания читаемых URL-адресов без указания index.php. Правило » => ‘site/index’ говорит, что при обращении к корневому URL-адресу должен вызываться метод actionIndex() контроллера SiteController.

После добавления маршрута и контроллера страница index будет доступна по адресу http://localhost/. Можно также добавить другие маршруты и контроллеры для разных страниц в вашем проекте.

Создание макета с использованием AdminLTE

Для начала работы с AdminLTE в Yii2, необходимо скачать и установить расширение «dmstr/yii2-adminlte-asset». Вы можете сделать это через Composer, добавив зависимость в ваш файл composer.json и запустив команду «composer update».

После установки расширения, вам нужно настроить главный макет вашего приложения, чтобы использовать AdminLTE. Для этого создайте новый файл «main.php» в папке «views/layouts» вашего приложения.

<?phpuse yii\helpers\Html;use yii\widgets\Breadcrumbs;use dmstr\widgets\Alert;/* @var $this \yii\web\View *//* @var $content string */$this->beginContent('@app/views/layouts/base.php');?><div class="content-wrapper"><section class="content-header"><h1><?= Html::encode($this->title) ?></h1><?= Breadcrumbs::widget(['links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],]) ?></section><section class="content"><?= Alert::widget() ?><?= $content ?></section></div><?php $this->endContent(); ?>

В файле «main.php» мы использовали функции Yii2 для отображения заголовка страницы и хлебных крошек. Мы также добавили виджет «Alert» для отображения уведомлений. Основной контент каждой страницы будет подставляться в переменную «$content». Весь макет обернут в блок с классом «content-wrapper», который обеспечит корректное отображение страницы.

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

Создайте новый контроллер в папке «controllers» вашего приложения и добавьте действие «index». В действии установите заголовок страницы и возвращайте вид «index» из папки «views» с параметром «$content» равным тексту, который вы хотите отобразить на странице.

<?phpnamespace app\controllers;use yii\web\Controller;class SiteController extends Controller{public function actionIndex(){$this->view->title = 'AdminLTE в Yii2';return $this->render('index', ['content' => 'Добро пожаловать в Yii2 с использованием AdminLTE!',]);}}

Теперь создайте файл «index.php» в папке «views/site» и добавьте следующий код:

<?php/* @var $this yii\web\View *//* @var $content string */$this->beginContent('@app/views/layouts/main.php');?><div class="row"><div class="col-md-12"><div class="box box-primary"><div class="box-header with-border"><h3 class="box-title"><?= $content ?></h3></div><div class="box-body"><p>Это главная страница вашего приложения.</p></div></div></div></div><?php $this->endContent(); ?>

В файле «index.php» мы используем классы «box» и «box-primary» из AdminLTE для отображения контента в виде блока с заголовком. Внутри блока мы можем добавлять любой HTML-код и использовать компоненты и стили AdminLTE для стилизации его.

Теперь, когда макет и страница готовы, вы можете перейти по URL вашего приложения и увидеть AdminLTE в действии.

Основные элементы макета: шапка, боковая панель, контент

Боковая панель является еще одним важным элементом макета. Она обычно располагается слева от контента и содержит навигацию по разделам приложения. Боковая панель может иметь как фиксированное положение, так и плавать вместе с контентом.

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

Добавление виджетов и модулей AdminLTE

AdminLTE предоставляет множество готовых виджетов и модулей, которые могут быть легко добавлены в Yii2 приложение. В этом разделе мы рассмотрим, как добавить некоторые из этих виджетов и модулей.

Добавление панели навигации

Одним из первых шагов при работе с AdminLTE является добавление панели навигации, или меню, в приложение. В Yii2 это можно сделать, используя виджет Nav и NavBar.

Ниже приведен пример кода, который показывает, как добавить панель навигации в верхнюю часть страницы:

use yii\bootstrap\Nav;use yii\bootstrap\NavBar;NavBar::begin(['options' => ['class' => 'navbar-inverse navbar-fixed-top',],]);echo Nav::widget(['options' => ['class' => 'navbar-nav'],'items' => [['label' => 'Главная', 'url' => ['/site/index']],['label' => 'О нас', 'url' => ['/site/about']],['label' => 'Контакты', 'url' => ['/site/contact']],],]);NavBar::end();

Добавление боковой панели навигации

AdminLTE также предоставляет боковую панель навигации, или боковое меню, которое можно легко добавить в ваше Yii2 приложение.

Ниже приведен пример кода, который показывает, как добавить боковую панель навигации в приложение:

<aside class="main-sidebar"><section class="sidebar"><?php echo dmstr\widgets\Menu::widget(['items' => [['label' => 'Главная', 'icon' => 'home', 'url' => ['/site/index']],['label' => 'О нас', 'icon' => 'info', 'url' => ['/site/about']],['label' => 'Контакты', 'icon' => 'phone', 'url' => ['/site/contact']],]]); ?></section></aside>

Добавление футера

Наконец, мы можем добавить футер, или нижний колонтитул, в наше Yii2 приложение. В AdminLTE футер обычно содержит информацию о версии приложения и ссылку на страницу справки.

Ниже приведен пример кода, который показывает, как добавить футер в приложение:

<footer class="main-footer"><div class="container"><div class="pull-right hidden-xs"><?php echo Yii::powered(); ?></div><strong>Все права защищены © 2021 </strong> Мой сайт</div></footer>

Теперь вы знаете, как добавить некоторые из виджетов и модулей AdminLTE в ваше Yii2 приложение. Это поможет вам создать красивый и функциональный интерфейс для вашего приложения.

Работа с пользователями и авторизацией

AdminLTE в Yii2 предоставляет готовую интеграцию с системой аутентификации и авторизации пользователя. Вам необходимо настроить модуль пользователей и добавить несколько ролей в базу данных.

Для начала установите расширение Yii2-User следующей командой:

• composer require dektrium/yii2-user

Затем сконфигурируйте расширение в файле config/web.php:

'modules' => ['user' => ['class' => 'dektrium\user\Module','admins' => ['admin'],],],

После этого выполните миграции для создания таблицы пользователей:

./yii migrate/up --migrationPath=@vendor/dektrium/yii2-user/migrations

Теперь вы можете зайти в админ-панель и добавить нового пользователя или редактировать существующих.

Чтобы требовать авторизацию для доступа к определенным страницам, добавьте следующий код в соответствующие контроллеры:

public function behaviors(){return ['access' => ['class' => AccessControl::className(),'rules' => [['allow' => true,'roles' => ['@'],],],],];}

Теперь только авторизованные пользователи смогут получить доступ к этой странице.

Вы также можете ограничить доступ к определенным действиям только для администраторов. Для этого добавьте следующий код в соответствующей контроллере:

public function behaviors(){return ['access' => ['class' => AccessControl::className(),'rules' => [['allow' => true,'roles' => ['admin'],],],],];}

Теперь только пользователи с ролью «admin» смогут получить доступ к этим действиям.

В случае необходимости кастомизации страницы входа или регистрации, вы можете создать соответствующий представление в папке views/user/security и настроить его в контроллере, используя свойство $view->params['login'] или $view->params['register'].

Создание моделей и таблиц для пользователей

Для работы с пользователями в AdminLTE в Yii2 необходимо создать модель и таблицу в базе данных. Начнем с создания модели пользователя:

1. Создайте новый класс модели User, который будет наследоваться от класса ActiveRecord:

   namespace app\models;use Yii;use yii\db\ActiveRecord;class User extends ActiveRecord{// implementation}

2. Определите таблицу, в которой будут храниться пользователи, с помощью метода tableName:

   public static function tableName(){return 'users';}

3. Определите правила валидации для модели User. Например, для проверки заполнения обязательных полей и проверки уникальности email:

   public function rules(){return [[['username', 'email', 'password'], 'required'],['email', 'email'],['email', 'unique'],];}

4. Определите методы для работы с аутентификацией и авторизацией пользователя:

   public static function findIdentity($id){return static::findOne($id);}public static function findByUsername($username){return static::findOne(['username' => $username]);}public static function findByEmail($email){return static::findOne(['email' => $email]);}public function validatePassword($password){return Yii::$app->security->validatePassword($password, $this->password_hash);}public function setPassword($password){$this->password_hash = Yii::$app->security->generatePasswordHash($password);}

После создания модели User необходимо создать таблицу в базе данных для хранения пользователей. Выполните следующие шаги:

1. Откройте файл миграции в папке «migrations» вашего приложения Yii2.
2. Добавьте метод up, в котором определите код создания таблицы «users»:

   public function up(){$this->createTable('users', ['id' => $this->primaryKey(),'username' => $this->string()->notNull()->unique(),'email' => $this->string()->notNull()->unique(),'password_hash' => $this->string()->notNull(),'auth_key' => $this->string()->notNull(),'created_at' => $this->timestamp()->defaultExpression('CURRENT_TIMESTAMP'),'updated_at' => $this->timestamp()->defaultExpression('CURRENT_TIMESTAMP'),]);}

3. Добавьте метод down, в котором определите код удаления таблицы «users» в случае отката миграции:

   public function down(){$this->dropTable('users');}

После создания модели и таблицы пользователей, вы можете использовать их для работы с пользовательской аутентификацией и авторизацией в AdminLTE в Yii2.