AdminLTE3 integración Yii2

 Aquí les muestro como hacer la integración con otro widget (extensión) que permite la integración con AdminLTE3:

AdminLTE3 es una plantilla de administración, en una entrada anterior les mostré como instalar el AdminLTE2, esta es una versión superior, utiliza Bootstrap4, lo cual está muy bueno, pero hay que tener en cuenta que una que otra extensión nos puede fallar si no está con Bootstrap4. También los css tienen uno que otro cambio, entonces si vemos que el sistema se comporta con tamaños de fuentes diferentes probablemente sea alguna incompatibilidad. Importante revisar la documentación de Bootstrap 4 para que no nos coja de sorpresa, sobre todo si queremos migrar: https://getbootstrap.com/docs/4.4/getting-started/introduction/

1.- Explorar la plantilla de adminlte3 para ver todo lo que tiene que ofrecer:

https://adminlte.io/themes/v3/index3.html

Vamos a ver que el AdminLTE3 varía bastante en cuanto a la versión 2, los bordes más redondeados, una gama de colores mucho mayor, mas widgets de formularios, Bootstrap4 resumiendo, en lo personal me encantan los colores brillantes, lo variados que pueden llegar a ser los temas, le pongo 10/10.

2.- Adicionar al composer

    "hail812/yii2-adminlte3": "*"

Como siempre cuando vamos a agregar una nueva extensión añadimos al composer.json, en la sección de require. Recordar que esto es un json entonces pilas con no dejar una coma o algo que nos de error al ejecutar el composer update. 

3.- Ejecutar en el cmd de la carpeta del proyecto:

     composer update --prefer-dist

Esto nos va a actualizar todas las extensiones del composer que necesiten ser actualizadas, si existe alguna novedad nos lo va a informar en la ventana de comandos, sobre todo cuando se actualiza la versión de Yii2, y hay algún cambio necesario que realizar en el código, no es lo usual pero puede pasar, así que no nos asustemos si sale un texto super largo cuando hacemos esta operación, también puede ser que nos oriente sobre alguna extensión en desuso entre otras cosas.

3.- Copiar las vistas de vendor/hail812/yii2-adminlte3/src/views a las views del sistema en (frontend/views/ o backend/views) dejando el index.

4.- Añadir en el SiteController ActionLogin el layout del main-login:

  public function actionLogin()

 {

        if (!Yii::$app->user->isGuest) {

            return $this->goHome();

        }

        $model = new LoginForm();

        if ($model->load(Yii::$app->request->post()) && $model->login()) {

            return $this->goBack();

        } else {

            $model->password = '';

            $this->layout = 'main-login';

            return $this->render('login', [

                'model' => $model,

            ]);

        }

    }

En el video de YouTube lo hago diferente con un if en la vista pero de esta forma queda mucho mejor, es solamente añadir  ( $this->layout = 'main-login'; ) en el else del controlador (no habría que añadir el if en la vista), de esta forma le estamos indicando que cuando esté en la vista del login utilice este layout en vez del main.php.

5.- Revisar la documentación de la extensión:

    https://www.yiiframework.com/extension/hail812/yii2-adminlte3

Pueden ver el proceso completo en mi canal de YouTube:



Comentarios

Publicar un comentario

Entradas populares de este blog

RBAC Yii2 utilizando la extensión "yii2mod/yii2-rbac": "*"

Integración AdminLTE2 Yii2