Integrating the AdminLTE 3 admin template into Yii2 Advanced requires a few steps, including installing the AdminLTE assets, configuring the layout, and adjusting the views. Here’s a guide on how to do it.

Step 1: Install AdminLTE via Composer
AdminLTE can be installed using Composer. In your terminal, navigate to the root of your Yii2 Advanced project and run:

composer require dmstr/yii2-adminlte-asset “^3.0”
This installs the AdminLTE 3 template as an asset bundle for Yii2.

Step 2: Configure AdminLTE in Backend Layout
AdminLTE is typically used for the backend (admin panel). You’ll need to configure the layout in the backend part of your Yii2 application.

1. Modify the Backend Layout
Edit the backend/views/layouts/main.php file to use AdminLTE’s structure. You can either start from scratch or copy the AdminLTE example templates and modify them.

Replace the default layout structure with AdminLTE. For simplicity, use this basic AdminLTE layout template:

<?php

use dmstr\web\AdminLteAsset;
use yii\helpers\Html;

AdminLteAsset::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″>
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body class=”hold-transition sidebar-mini layout-fixed”>
<?php $this->beginBody() ?>

<div class=”wrapper”>
<!– Navbar –>
<nav class=”main-header navbar navbar-expand navbar-white navbar-light”>
<!– Left navbar links –>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” data-widget=”pushmenu” href=”#”><i class=”fas fa-bars”></i></a>
</li>
<li class=”nav-item d-none d-sm-inline-block”>
<a href=”#” class=”nav-link”>Home</a>
</li>
</ul>
</nav>
<!– /.navbar –>

<!– Main Sidebar Container –>
<aside class=”main-sidebar sidebar-dark-primary elevation-4″>
<!– Brand Logo –>
<a href=”#” class=”brand-link”>
<span class=”brand-text font-weight-light”>AdminLTE 3</span>
</a>

<!– Sidebar –>
<div class=”sidebar”>
<!– Sidebar Menu –>
<nav class=”mt-2″>
<ul class=”nav nav-pills nav-sidebar flex-column” data-widget=”treeview” role=”menu” data-accordion=”false”>
<li class=”nav-item”>
<a href=”#” class=”nav-link”>
<i class=”nav-icon fas fa-tachometer-alt”></i>
<p> Dashboard </p>
</a>
</li>
<!– Add your other sidebar items here –>
</ul>
</nav>
<!– /.sidebar-menu –>
</div>
<!– /.sidebar –>
</aside>

<!– Content Wrapper. Contains page content –>
<div class=”content-wrapper”>
<section class=”content-header”>
<div class=”container-fluid”>
<div class=”row mb-2″>
<div class=”col-sm-6″>
<h1><?= Html::encode($this->title) ?></h1>
</div>
</div>
</div><!– /.container-fluid –>
</section>

<section class=”content”>
<?= $content ?>
</section>
</div>
<!– /.content-wrapper –>

<footer class=”main-footer”>
<div class=”float-right d-none d-sm-block”>
<b>Version</b> 3.0.5
</div>
<strong>Copyright &copy; 2023 <a href=”#”>Your Company</a>.</strong> All rights reserved.
</footer>

<aside class=”control-sidebar control-sidebar-dark”>
<!– Control sidebar content goes here –>
</aside>
</div>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

 

  • Navbar: Contains the top bar with navigation links.
  • Main Sidebar: Contains the sidebar with navigation links.
  • Content Wrapper: Contains the page content that changes based on the route.
  • Footer: The footer section.

2. Register the AdminLTE Assets in the Layout
Make sure that the AdminLTE asset is registered. In the layout file (main.php), the line:

use dmstr\web\AdminLteAsset;
AdminLteAsset::register($this);
will include the AdminLTE CSS and JS files.

Step 3: Adjust the Views
Now, you need to update your views to match the AdminLTE layout structure. For example, in backend/views/site/index.php, you can modify the content as needed.

Here’s a basic example of how the content part could look:

<?php
$this->title = ‘Dashboard’;
?>

<div class=”site-index”>
<div class=”row”>
<div class=”col-lg-12″>
<div class=”card”>
<div class=”card-header”>
<h3 class=”card-title”>Welcome to the Admin Dashboard</h3>
</div>
<div class=”card-body”>
<p>This is the main content area.</p>
</div>
</div>
</div>
</div>
</div>

Step 4: Add Menu Items to the Sidebar
To customize the sidebar, you can add menu items to the nav-sidebar list in the main.php layout.

<nav class=”mt-2″>
<ul class=”nav nav-pills nav-sidebar flex-column” data-widget=”treeview” role=”menu” data-accordion=”false”>
<li class=”nav-item”>
<a href=”<?= \yii\helpers\Url::to([‘/site/index’]) ?>” class=”nav-link”>
<i class=”nav-icon fas fa-home”></i>
<p> Home </p>
</a>
</li>
<li class=”nav-item”>
<a href=”<?= \yii\helpers\Url::to([‘/user/index’]) ?>” class=”nav-link”>
<i class=”nav-icon fas fa-users”></i>
<p> Users </p>
</a>
</li>
<!– Add other menu items here –>
</ul>
</nav>

Step 5: Testing
After you’ve configured everything, navigate to the backend of your application. You should see the AdminLTE 3 template applied to the backend with a sidebar, top navigation, and content area. Make sure all your pages render properly and the styling is consistent.

Optional: Using Widgets and Plugins
AdminLTE 3 comes with a variety of widgets, components, and plugins (like charts, modals, forms, etc.). You can integrate them into your Yii2 views as necessary. For example, using AdminLTE’s box/card widgets in your views can make the interface more dynamic and visually consistent.

This integration process allows you to utilize AdminLTE’s ready-made layout while keeping the power of Yii2’s architecture.

Share!

Shares