En este tutorial, aprenderemos cómo crear una vista de árbol dinámica utilizando Bootstrap Treeview JS en PHP Codeigniter 3. La vista de árbol es una forma efectiva de mostrar datos jerárquicos en una estructura de árbol, lo que facilita la navegación y la comprensión de la relación entre los elementos.
Utilizaremos el framework Codeigniter 3 para desarrollar nuestra aplicación web y Bootstrap Treeview JS para generar la vista de árbol dinámica. Codeigniter es un framework de desarrollo web rápido y ligero que facilita la creación de aplicaciones web robustas y escalables. Bootstrap Treeview JS es una biblioteca de JavaScript que nos permite crear fácilmente vistas de árbol interactivas y personalizables.
Requisitos previos
Antes de comenzar, asegúrate de tener los siguientes requisitos previos:
– PHP instalado en tu sistema.
– Codeigniter 3 instalado en tu sistema.
– Un servidor web local como XAMPP o WAMP.
– Un editor de código como Visual Studio Code o Sublime Text.
Instalación de Codeigniter 3
El primer paso es instalar Codeigniter 3 en tu sistema. Puedes descargar la última versión de Codeigniter desde el sitio web oficial (https://codeigniter.com/download). Una vez descargado, descomprime el archivo zip en la carpeta de tu servidor web local.
A continuación, abre el archivo `application/config/config.php` y configura la URL base de tu aplicación. Por ejemplo:
«`php
$config[‘base_url’] = ‘http://localhost/tu_proyecto/’;
«`
Configuración de la base de datos
Antes de crear la vista de árbol dinámica, necesitamos configurar la base de datos en Codeigniter. Abre el archivo `application/config/database.php` y configura los detalles de tu base de datos. Por ejemplo:
«`php
$db[‘default’] = array(
‘dsn’ => »,
‘hostname’ => ‘localhost’,
‘username’ => ‘tu_usuario’,
‘password’ => ‘tu_contraseña’,
‘database’ => ‘tu_base_de_datos’,
‘dbdriver’ => ‘mysqli’,
‘dbprefix’ => »,
‘pconnect’ => FALSE,
‘db_debug’ => (ENVIRONMENT !== ‘production’),
‘cache_on’ => FALSE,
‘cachedir’ => »,
‘char_set’ => ‘utf8’,
‘dbcollat’ => ‘utf8_general_ci’,
‘swap_pre’ => »,
‘encrypt’ => FALSE,
‘compress’ => FALSE,
‘stricton’ => FALSE,
‘failover’ => array(),
‘save_queries’ => TRUE
);
«`
Asegúrate de reemplazar `’tu_usuario’`, `’tu_contraseña’` y `’tu_base_de_datos’` con los detalles de tu base de datos.
Creación de la tabla de categorías
En este tutorial, crearemos una vista de árbol para mostrar categorías. Por lo tanto, necesitamos crear una tabla de categorías en nuestra base de datos. Ejecuta la siguiente consulta SQL para crear la tabla de categorías:
«`sql
CREATE TABLE `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`parent_id` int(11) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `parent_id` (`parent_id`),
CONSTRAINT `categories_ibfk_1` FOREIGN KEY (`parent_id`) REFERENCES `categories` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
«`
Esta tabla tiene tres columnas: `id`, `name` y `parent_id`. La columna `id` es la clave primaria de la tabla, la columna `name` almacena el nombre de la categoría y la columna `parent_id` almacena el ID de la categoría padre. La clave foránea `categories_ibfk_1` se utiliza para establecer la relación jerárquica entre las categorías.
Creación del controlador y el modelo
Ahora, crearemos un controlador y un modelo en Codeigniter para manejar la lógica de la vista de árbol dinámica.
Crea un archivo llamado `Categories.php` en el directorio `application/controllers` y pega el siguiente código:
«`php
load->model(‘category_model’);
}
public function index()
{
$data[‘categories’] = $this->category_model->get_categories();
$this->load->view(‘categories/index’, $data);
}
}
«`
En este controlador, cargamos el modelo `category_model` en el constructor y luego obtenemos las categorías de la base de datos utilizando el método `get_categories()` del modelo. Finalmente, cargamos la vista `categories/index` y pasamos los datos de las categorías a la vista.
A continuación, crea un archivo llamado `Category_model.php` en el directorio `application/models` y pega el siguiente código:
«`php
db->get(‘categories’);
return $query->result();
}
}
«`
En este modelo, definimos el método `get_categories()` que ejecuta una consulta para obtener todas las categorías de la tabla `categories` y devuelve los resultados.
Creación de la vista
Ahora, crearemos la vista `categories/index.php` para mostrar la vista de árbol dinámica. Crea un archivo llamado `index.php` en el directorio `application/views/categories` y pega el siguiente código:
«`html
Dynamic Tree View
«`
En esta vista, incluimos los archivos CSS y JavaScript necesarios de Bootstrap y Bootstrap Treeview JS. Luego, creamos un contenedor con el ID `treeview` donde se mostrará la vista de árbol dinámica.
En el script JavaScript, obtenemos los datos de las categorías de PHP utilizando la función `json_encode()` y luego inicializamos el árbol utilizando el método `treeview()` de Bootstrap Treeview JS.
Configuración de Bootstrap y Treeview JS
Antes de ejecutar nuestra aplicación, necesitamos descargar los archivos CSS y JavaScript de Bootstrap y Bootstrap Treeview JS.
Descarga los archivos CSS y JavaScript de Bootstrap desde el sitio web oficial de Bootstrap (https://getbootstrap.com/docs/5.0/getting-started/download/). Luego, coloca los archivos `bootstrap.min.css` y `bootstrap.min.js` en el directorio `assets/css` y `assets/js` de tu proyecto Codeigniter, respectivamente.
Descarga los archivos CSS y JavaScript de Bootstrap Treeview JS desde el repositorio de GitHub (https://github.com/jonmiles/bootstrap-treeview). Luego, coloca los archivos `bootstrap-treeview.min.css` y `bootstrap-treeview.min.js` en el directorio `assets/css` y `assets/js` de tu proyecto Codeigniter, respectivamente.
Obtención de los datos de la base de datos
Ahora, necesitamos modificar el método `get_categories()` del modelo `Category_model` para obtener las categorías en forma de árbol jerárquico.
Abre el archivo `Category_model.php` y reemplaza el código del método `get_categories()` con el siguiente código:
«`php
public function get_categories()
{
$query = $this->db->get(‘categories’);
$categories = $query->result();
$tree = array();
foreach ($categories as $category) {
if ($category->parent_id == null) {
$tree[] = $category;
} else {
$parent = $this->find_category($tree, $category->parent_id);
$parent->nodes[] = $category;
}
}
return $tree;
}
private function find_category($categories, $parent_id)
{
foreach ($categories as $category) {
if ($category->id == $parent_id) {
return $category;
} else {
if (isset($category->nodes)) {
$result = $this->find_category($category->nodes, $parent_id);
if ($result != null) {
return $result;
}
}
}
}
return null;
}
«`
En este código, primero obtenemos todas las categorías de la tabla `categories` y las almacenamos en la variable `$categories`. Luego, creamos un array vacío llamado `$tree` para almacenar el árbol jerárquico.
Recorremos todas las categorías y verificamos si tienen un `parent_id` nulo. Si es así, agregamos la categoría al array `$tree`. Si no es nulo, buscamos la categoría padre utilizando el método `find_category()` y agregamos la categoría actual como un nodo hijo de la categoría padre.
El método `find_category()` es un método recursivo que busca una categoría en el árbol utilizando el ID de la categoría padre. Si encuentra la categoría, la devuelve. Si no la encuentra, busca en los nodos hijos de la categoría actual.
Finalmente, devolvemos el array `$tree` que contiene el árbol jerárquico de las categorías.
Generación del árbol dinámico
Ahora que hemos configurado todo, podemos ejecutar nuestra aplicación y ver la vista de árbol dinámica en acción.
Abre tu navegador web y navega a la URL de tu aplicación Codeigniter. Por ejemplo, `http://localhost/tu_proyecto/categories`.
Deberías ver la vista de árbol dinámica con todas las categorías mostradas en forma de árbol. Puedes expandir y contraer los nodos para ver las categorías hijas y padres.
¡Felicidades! Has creado con éxito una vista de árbol dinámica utilizando Bootstrap Treeview JS en PHP Codeigniter 3.
Conclusión
En este tutorial, hemos aprendido cómo crear una vista de árbol dinámica utilizando Bootstrap Treeview JS en PHP Codeigniter 3. Hemos configurado Codeigniter, creado una tabla de categorías en la base de datos, creado un controlador y un modelo para manejar la lógica de la vista de árbol, y creado una vista para mostrar la vista de árbol dinámica.
Espero que este tutorial te haya sido útil y te haya ayudado a comprender cómo crear una vista de árbol dinámica utilizando Bootstrap Treeview JS en PHP Codeigniter 3. ¡Diviértete explorando y personalizando tu vista de árbol!
