Crear tabs dinámicas de Bootstrap con PHP y MySQL. En muchos sitios web y/o sistemas web hemos visto tabs para mostrar datos dinámicos en diferentes pestañas y en la misma página. Por lo tanto, si está pensando en implementar la funcionalidad de las mismas pestañas, entonces está aquí en el lugar correcto.
Crear tabs dinámicas de Bootstrap con PHP y MySQL
En este tutorial, aprenderá a crear pestañas dinámicas de Bootstrap usando PHP y MySQL. El tutorial explica con un ejemplo en el que hemos creado pestañas para categorías y mostramos productos de la categoría relacionada cuando se hace clic en la pestaña de categoría.
Tabs dinámicas de Bootstrap 5 con base de datos
Vamos a realizar un ejemplo de uso de Tabs con la versión de BootStrap 5 y los datos de las pestañas y el contenido cargado en la página se cargan, pero el contenido permanece invisible excepto la pestaña activa.
También puede descargar el código fuente de demostración desde el enlace de descarga con las versiones de BootStrap 3, BootStrap 4, BootStrap 5
Entonces, comencemos la codificación. Tendremos la siguiente estructura de archivos para el ejemplo para crear pestañas dinámicas de Bootstrap usando PHP y MySQL.
- index.php
- tabs.php
Pasos para la integración de tabs dinámicos
- Primer paso: Crear tablas de base de datos
- Segundo paso: Declarar librerías
- Tercer paso: Crear pestañas y contenedor de contenido
- Cuarto paso: Crear pestañas y contenido desde MySQL
A continuación, detallarles los pasos a seguir
Primer paso: Crear tablas de base de datos
El punto importante es crear TABS dinámicos y para ello usaremos base de datos para mostrar las categorías como pestañas y mostraremos los datos relacionados con las pestañas. Por lo tanto, crearemos categorías de tablas de base de datos MySQL y categoria_productos.
Además, Insertaremos algunos registros en tablas para que funcione nuestro ejemplo y luego los mostraremos en el navegador.
- Crear una tabla llamado categorías
- Luego, crearemos la tabla categoria_productos.
A continuación, veremos la consulta e instrucción SQL que debemos de ejecutar en phpMyAdmin u otro gestor de base de datos (MySQL)
CREATE TABLE `categorias` (
`id` int(11) NOT NULL,
`name` varchar(256) CHARACTER SET utf8 NOT NULL,
`description` text CHARACTER SET utf8 NOT NULL,
`created` datetime NOT NULL,
`modified` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `categorias` (`id`, `name`, `description`, `created`, `modified`) VALUES
(1, 'Moda', 'Category for anything related to fashion.', '2023-07-11 00:35:07', '2023-07-11 05:35:07'),
(2, 'Electronicos', 'Gadgets, drones and more.', '2023-07-11 00:35:07', '2023-07-11 05:35:07'),
(3, 'Motor', 'Motor sports and more', '2023-07-11 00:35:07', '2023-07-11 05:35:07'),
(5, 'peliculas', 'Movie products.', '2023-07-11 00:35:07', '2023-07-11 05:35:07'),
(6, 'Libros', 'Kindle books, audio books and more.', '2023-07-11 00:35:07', '2023-07-11 05:35:07'),
(13, 'Deportes', 'Drop into new winter gear.', '2023-07-11 00:35:07', '2023-07-11 05:35:07');
-- --------------------------------------------------------
CREATE TABLE `categoria_productos` (
`id` int(11) NOT NULL,
`p_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`p_image` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`price` float(10,2) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `categoria_productos` (`id`, `p_name`, `p_image`, `price`, `status`) VALUES
(1, 'Jeans', 'jeans1.png', 2000.00, 1),
(1, 'Shirts', 'shirts.png', 1500.00, 1),
(2, 'Samsung Max', 'samsung.png', 14000.00, 1),
(2, 'Motorola', 'moto.png', 1200.00, 1);
ALTER TABLE `categorias`
ADD PRIMARY KEY (`id`);
ALTER TABLE `categorias`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;Segundo paso: Declarar librerías
Para que nuestro TABS funcione se requiere el framework Bootstrap y debemos de declararlo dentro de las etiquetas <head>..</head>. Para este ejemplo, usaremos la versión BootStrap 5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>Tercer paso: Crear pestañas y contenedor de contenido
En el fichero index.php, crearemos la interfaz y/o estructura HTML del contenedor de pestañas y contenido de pestañas usando Bootstrap para mostrar pestañas y contenidos dinámicos.
Vamos a incluir un fichero llamado tabs.php e imprimiremos sus variables llamado: $category_html y $product_html
<div class="container">
<h2>Crear Dinamico Bootstrap Tabs con PHP & MySQL</h2>
<?php include_once("tabs.php"); ?>
<ul class="nav nav-tabs" id="myTab">
<?php echo $category_html; ?>
</ul>
<div class="tab-content">
<?php echo $product_html; ?>
</div>
</div>Cuarto paso: Crear pestañas y contenido desde MySQL
Por último, en tabs.php creamos pestañas y contenido relacionado con pestañas de MySQL con PHP. Sin embargo, esta información obtendremos datos de categorías.
Luego obtendremos datos de productos de categorías relacionadas de la tabla categoria_productos para mostrar productos según las pestañas seleccionada.
Además, esta información será extraídos desde base de datos de manera dinámica a través de consultas SQL
<?php
include_once("db_connect.php");
$category_sql = "SELECT id, name, description FROM categorias LIMIT 10";
$resultset = mysqli_query($conn, $category_sql) or die("database error:". mysqli_error($conn));
$active_class = 0 ;
$category_html = '';
$product_html = '';
while( $category = mysqli_fetch_assoc($resultset) ) {
$current_tab = "";
$current_content = "";
if(!$active_class) {
$active_class = 1;
$current_tab = 'active';
$current_content = 'active show';
}
$category_html.= '<li class="nav-item"><a href="#'.$category['name'].'" class="nav-link '.$current_tab.'" data-bs-toggle="tab">'.
$category['name'].'</a></li>';
$product_html .= '<div id="'.$category["name"].'" class="tab-pane fade '.$current_content.'">';
$product_sql = "SELECT id, p_name, p_image, price FROM categoria_productos WHERE id = ".$category["id"];
$product_results = mysqli_query($conn, $product_sql) or die("database error:". mysqli_error($conn));
if(!mysqli_num_rows($product_results)) {
$product_html .= '<br>No hay productos!';
}
$product_html .= '<div class="row">';
while( $product = mysqli_fetch_assoc($product_results) ) {
$product_html .= '<div class="col-md-3 product">';
$product_html .= '<img src="images/'.$product["p_image"].'" class="img-responsive img-thumbnail product_image" />';
$product_html .= '<h4>'.$product["p_name"].'</h4>';
$product_html .= '<h4>Precio: $'.$product["price"].'</h4>';
$product_html .= '</div>';
}
$product_html .= '<div class="clear_both"></div></div></div>';
}
?>Conclusiones acerca de Tabs dinámicos
En este articulo hemos aprendido a gestionar tabs en las 3 versiones de BootStrap: BootStrap 3, Bootstrap 4 y Bootstrap 5.
Además, en este articulo hemos dado prioridad a la versión 5 del BootStrap y si estás trabajando con versiones anteriores los dejaré para que descarguen y puedan implementarlo en sus proyectos web.
Puede descargar el script con las 3 versiones desde el enlace Descargar a continuación.
