Integración AdminLTE2 Yii2
Les quiero mostrar como con unos sencillos pasos podemos integrar el panel de administración de AdminLTE en nuestro proyecto de Yii2:
AdminLTE es una plantilla de administración, que realmente viene muy completa, con una pantalla de logueo, el menú, el dashboard para poner gráficos, trae widgets con clases de Bootstrap que nos permiten organizar nuestro código de una manera responsive y funcional. Realmente lo recomiendo, me parece de todas las plantillas que he instalado para Yii2 una de las más completas y con una interfaz de usuario muy amigable que pueden aplicar en muchos giros de negocios.
1.- Colocar en el require composer.json en la sección de require:
"dmstr/yii2-adminlte-asset": "*"
El archivo composer.json es donde se agregan las extensiones, lo encontramos en la parte de afuera del proyecto, y agregamos el código en la sección de require. El archivo es .json así que hay que revisar no dejar una coma de más.
2.- Ejecutar en el cmd de la carpeta del proyecto:
composer update --prefer-dist
La ventana de comando, sea cual sea la que estemos utilizando (git, Power Shell, o Cmd de windows) lo abrimos en la carpeta del proyecto, normalmente con Shift + click derecho, y ahí ejecutamos el comando. Este comando nos va actualizar las extensiones y cuando salga una versión nueva de Yii2 nos la va a actualizar, siempre debemos leer si nos da alguna advertencia o aviso en la parte final sobre alguna modificación que necesitemos hacer. Para ejecutar este comando debemos tener instalado Composer, te lo puedes descargar de https://getcomposer.org/.
3.- Copiar las vistas de vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app a nuestro layout y site.
Esto lo hacemos porque queremos utilizar como base para nuestro desarrollo lo que ya trae la extensión, entonces buscamos en el vendor las vistas de ejemplos y las copiamos a nuestras vistas principales (frontend/views o backend/views). La carpeta layout es la más importante, porque ahí es donde traemos lo que es el header y el left, que son los archivos donde tenemos el encabezado y el menú del adminLTE, pero recomiendo todas (layout y site), porque esta la vista del login entre otras que aunque queremos modificarla ya copiándonos tenemos la base.
Importante: Nunca modificar el vendor, siempre buscar la manera de utilizar el vendor sin modificarlo, en este caso traemos las vistas, pero no debemos modificar directamente allí. El vendor es donde se guardan las librerías, extensiones que instalamos en el sistema, cuando le damos composer update estas librerías se actualizan con los últimos cambios que haya hecho el creador que casi siempre son arreglos de errores etc, por tanto nuestra modificación se puede perder y trabajamos por gusto, sin hablar de los errores que puede traer que desaparezca el código que hicimos de un momento a otro.
4.- Verificar la documentación del widget en:
https://github.com/dmstr/yii2-adminlte-asset
En este link tienen la documentación del widget que está bien completa y explicada, les recomiendo que la revisen y apliquen lo que necesiten según el giro de negocio.
5.- Añadir en el (frontend/config/main.php o en backend/config/main.php) en components
'assetManager' => [
'bundles' => [
'dmstr\web\AdminLteAsset' => [
'skin' => 'skin-red',
],
],
],
5.1.- Lista de skins
"skin-blue",
"skin-black",
"skin-red",
"skin-yellow",
"skin-purple",
"skin-green",
"skin-blue-light",
"skin-black-light",
"skin-red-light",
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"
Aquí tenemos los colores a escoger en función de lo que necesitemos, el skin que escojas lo colocas en el main.
6.- Añadir en el (frontend o backend)/views/layout/main <body> la skin:
<body class="hold-transition <?= \dmstr\helpers\AdminLteHelper::skinClass() ?> sidebar-collapse">
7.- En caso que queramos que el menú se encuentre por defecto recogido(el menú colapsado) el body quedaría de esta forma:
<body class="hold-transition <?= \dmstr\helpers\AdminLteHelper::skinClass() ?> sidebar-collapse sidebar-mini">
Puede ser en muchos casos que nos pidan que quieren dejar el menú colapsado permanentemente, y habría que añadir esta clase final
Pueden ver el video del proceso completo en mi canal de YouTube:
Comentarios
Publicar un comentario