AdminLTE template

AdminLTE Bootstrap Admin Dashboard Template Que es?

AdminLTE es una plantilla de panel de administración de Bootstrap que se utiliza para crear paneles de control y aplicaciones web con una interfaz de usuario moderna y atractiva. Este diseñada para ser fácil de usar y personalizable, lo que la hace popular entre los desarrolladores que desean crear aplicaciones de administración de datos, informes y paneles de control de manera efectiva.

Esta plantilla se basa en el popular framework Bootstrap, lo que significa que aprovecha las ventajas de un diseño responsivo y componentes web predefinidos que facilitan la construcción de aplicaciones web. AdminLTE incluye una variedad de características y componentes predefinidos, como tablas, gráficos, iconos, formularios y Mas, que facilitan la creación de paneles de administración completos.

En cuanto a la seguridad, AdminLTE en sí mismo no es una solución de seguridad, pero se puede utilizar de manera segura siguiendo buenas prácticas de desarrollo web. Asegurarte de que tu aplicación implemente medidas de seguridad adecuadas, como autenticación y autorización, es esencial para mantener la seguridad de tus datos.

Si deseas una alternativa Mas segura, puedes considerar utilizar marcos de trabajo como Laravel o Django, que tienen características de seguridad incorporadas y ayudan a proteger tu aplicación contra amenazas comunes. Además, siempre es importante mantener tu aplicación y sus componentes actualizados para abordar posibles vulnerabilidades de seguridad.

...

Para adaptar la plantilla AdminLTE a nuestros proyectos, debemos seguir estos pasos:

1. En primer lugar, crea un proyecto con las carpetas necesarias para su funcionamiento, incluyendo el archivo index.php.
2. Descarga la plantilla AdminLTE desde la pagina oficial.
3. Una vez que hayas descargado la plantilla completa, puedes verla haciendo clic en el archivo index.html. Sin embargo, en lugar de utilizar esta página, crearemos una Mas sencilla llamada starter.html. Abre starter.html y haz clic con el botón derecho para ver el código fuente. cópialo en su totalidad y pégalo en nuestro proyecto, específicamente en el archivo index.php.
4. Copia el código en la página index.php.
5. A continuación, procede a ajustar el código de los estilos para que se vea como deseas.
6. Ve al encabezado (header) y ajusta los enlaces.
7. Si no tienes las carpetas "plugin" y "dist", cópialas y pégalas en tu proyecto. Luego, ajusta los enlaces en el encabezado para que los estilos funcionen correctamente.
8. Luego, organiza el código a tu gusto, eliminando elementos innecesarios y moviendo otros a la carpeta "templates" desde donde serán llamados por el proyecto.
9. La plantilla incluye un navbar (barra de navegación), córtalo y pégalo en un archivo llamado "navbar.php" dentro de la carpeta "templates". Luego, llámalo desde tu proyecto.
10. Haz lo mismo con el aside (menú lateral izquierdo). córtalo y pégalo en un archivo llamado "aside.php". Nuevamente, llámalo desde tu proyecto.
11. El "content_wrapper" es donde mostraras tus proyectos o cualquier contenido que desees. Mas abajo, este el pie de página (footer). córtalo y muévelo a la carpeta "templates". Llámalo "footer.php" y utilízalo en tu proyecto desde la carpeta "templates/footer.php".
12. Ahora viene la parte interesante. En el archivo index.php, encontraras un contenedor con la clase "content-wrapper". Dentro de ese div, hay dos divs Mas, uno para la cabecera y otro para el contenido. Corta el div que contiene las tarjetas (cards) y elimínalo. El resto del código llévalo a un archivo llamado "dashboard.php".
13. En el archivo "dashboard.php", realiza los ajustes necesarios, como el título. Luego, copia este mismo código y pégalo en cada una de las páginas que desees mostrar, por ejemplo, "clientes.php", "proveedores.php", "inventario.php", etc.
14. En el div con la clase "content-wrapper", carga las páginas de tu proyecto. Por defecto, incluiremos la página "dashboard.php" dentro de este div para que se muestre.
15. Para cargar las demás páginas, crea una función y pásale dos parámetros. El primer parámetro será "pagina_php", que representara la página a la que se hizo clic. El segundo parámetro será "contenedor", que será el div con la clase "content-wrapper" donde se cargará la página. Utiliza jQuery para indicarle al contenedor que cargue la pagina correspondiente.

Con jQuery le decimos que el contenedor nos cargue la pagina onde hicimos click.

        $('.'+ contenedor).load(pagina_php);
    

Y nuestro script quedaría de esta forma:

            <script>
            function cargarContenido(pagina_php, contenedor){
                $('.'+ contenedor).load(pagina_php);

            }
        </script>
        

El href no nos hace falta, pero al dar click en ese enlace generamos un evento onclick lo cual nos llevara a la página marcada por ese evento.

Entonces el codigo del fichero index.php quedaria de esta forma.

          <?php
          include_once('includes/header.php')
          ?>
          
          <body class="hold-transition sidebar-mini">
              <div class="wrapper">
          
                  <?php  include_once('includes/navbar.php')  ?>
                  <?php  include_once('includes/aside.php')  ?>
          
          
                  <!-- Content Wrapper. Contains page content -->
                  <div class="content-wrapper">
                      <?php include_once('dashboard.php')?>
                  </div>
                  <!-- /.content-wrapper -->
          
          
          
                  <?php  include_once('includes/footer.php')  ?>
          
                  <!-- REQUIRED SCRIPTS -->
          
                  <!-- jQuery -->
                  <script src="plugins/jquery/jquery.min.js"></script>
                  <!-- Bootstrap 4 -->
                  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
                  <!-- AdminLTE App -->
                  <script src="dist/js/adminlte.min.js"></script>
                  <script>
                      function cargarContenido(pagina_php, contenedor){
                          $('.'+ contenedor).load(pagina_php);
          
                      }
                  </script>
          </body>
          
          </html>
        

El fichero Dashboard.php quedaria tanbien asi, como esta en el codigo abajo.

Hay que notar que ese codigo lo llevara todas las paginas de nuestro proyecto

          <!-- Content Header (Page header) -->
  <div class="content-header">
      <div class="container-fluid">
          <div class="row mb-2">
              <div class="col-sm-6">
                  <h1 class="m-0">Dashboard</h1>
              </div><!-- /.col -->
              <div class="col-sm-6">
                  <ol class="breadcrumb float-sm-right">
                      <li class="breadcrumb-item"><a href="#">Home</a></li>
                      <li class="breadcrumb-item active">Starter Page</li>
                  </ol>
              </div><!-- /.col -->
          </div><!-- /.row -->
      </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <div class="content">
      <div class="container-fluid">

          <!-- /.row -->
      </div><!-- /.container-fluid -->
  </div>
  <!-- /.content -->
        

E por ultimo los enlaces del aside.php

habiamos dicho que es daqui que llamamos la pagina a cargar-se en en contanedor content-wrapper

        <ul class="nav nav-treeview">
                        <li class="nav-item">
                            <a style="cursor: pointer;" href="#" class="nav-link"
                                onclick="cargarContenido('templates/Ejemplos_php/tablero_azadrez.php', 'content-wrapper')">
                                <i class="far fa-circle nav-icon"></i>
                                <p>Tablero azadrez</p>
                            </a>
                        </li>
                    </ul>
        

Buena sorte con vuestros proyectos

Ir al indice