Bootstrap: List Group dinámico con PHP y MariaDB

En este tutorial práctico continuamos desarrollando la serie de tutoriales con relación a los componente que nos ofrece Bootstrap 5, en este tutorial en específico desarrollaremos el  componente List Group  para el front-end y PHP 8 para el back-end y MariaDB; finalmente ejecutaremos la aplicación sobre el servidor de aplicaciones Apache.

Requisitos:

1. XAMPP v3.3.0.
2. PHP 8 y Bootstrap 5.
3. MariaDB y PHPMyAdmin.
4. Visual Studio Code.

Lo que veremos en este tutorial:

1. ¿Qué es List Group en Bootstrap 5?
2. Crear las principales tablas.
3. Insertar los principales registros.
4. Script HTML para List Group.
5. Conexión a base de datos bootstrap_demo.
6. Script PHP para implementar el List Group dinámico.
7. Conclusiones y Referencias.

1. ¿Qué es List Group en Bootstrap 5?

Bootstrap proporciona el componente de List Group (grupos de listas), componente flexible de gran ayuda para mostrar una serie de contenido en formato de listado. Normalmente, suele ser un componente adecuado para crear menús de navegación, pestañas (tab), lista de elementos, entre otros, sin embargo, dependerá de la necesidad que se puede utilizar en el diseño del sitio o página web teniendo en cuenta la multitud de alternativas y funciones que nos ofrece.

2. Crear las principales tablas.

La tabla weblistgroup es para el almacenamiento de los registros con relación al componente list-group:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

CREATE TABLE weblistgroup ( weblistgroup_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, weblistgroup_title VARCHAR(100) NOT NULL, weblistgroup_details TEXT NOT NULL DEFAULT 'details list group', weblistgroup_name VARCHAR(100) NOT NULL, weblistgroup_icon VARCHAR(200) NULL, weblistgroup_link TEXT NULL, weblistgroup_image_url TEXT NULL, pagesettings_id INT(11) NOT NULL ) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8; ALTER TABLE weblistgroup ADD CONSTRAINT `weblistgroup_fk` FOREIGN KEY (pagesettings_id) REFERENCES pagesettings (pagesettings_id);

La tabla weblistgroupdetails es para ingresar los valores teniendo en cuenta las relaciones entre los valores de la tabla weblistgroup y websection:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

CREATE TABLE weblistgroupdetails ( weblistgroupdetails_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, weblistgroup_id INT(11) NOT NULL, websection_id INT(3) NOT NULL, active TINYINT(1) DEFAULT 1, creation_date DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, update_date DATETIME NULL, creation_user VARCHAR(50) NOT NULL, update_user VARCHAR(50) NULL ) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8; ALTER TABLE weblistgroupdetails ADD CONSTRAINT `weblistgroupdetails_fk` FOREIGN KEY (weblistgroup_id) REFERENCES weblistgroup (weblistgroup_id); ALTER TABLE weblistgroupdetails ADD CONSTRAINT `weblistgroupdetailssection_fk` FOREIGN KEY (websection_id) REFERENCES websection (websection_id);

En el siguiente modelo de las base de dato se aprecia las relaciones de las 2 nuevas tabla creadas; la tabla weblistgroup principalmente esta relacionada con la tabla pagesettings finalmente la tabla weblistgroupdetails está relacionada con la tablas weblistgroup y websection.

Modelo generado con phpMyAdmin

3. Insertar los principales registros.

En la tabla pagesettings registramos el nombre del bloque o sección list-group teniendo en cuentas la página Home (index.php):

1 2	INSERT INTO `pagesettings` (`pagesettings_name`, `pagesettings_details`, `active`, `creation_date`, `creation_user`) VALUES ('Learning Bootstrap', 'Lo que aprenderas en el curso', '1', current_timestamp(), '1');

Seguidamente insertar los registros necesarios en la tabla weblistgroup teniendo en cuenta las propiedades del componente List Group con la finalidad de obtener los valores a través de setencias SQL:

1 2 3 4 5 6 7 8 9 10 11

INSERT INTO `weblistgroup` (`weblistgroup_title`, `weblistgroup_details`, `weblistgroup_name`, `weblistgroup_icon`, `weblistgroup_link`, `weblistgroup_image_url`, `pagesettings_id`) VALUES ('DATABASE CMS', 'details list group', 'list-home-list', NULL, 'list-home', NULL, '5'); INSERT INTO `weblistgroup` (`weblistgroup_title`, `weblistgroup_details`, `weblistgroup_name`, `weblistgroup_icon`, `weblistgroup_link`, `weblistgroup_image_url`, `pagesettings_id`) VALUES ('CHAPTER ONE', 'details list group', 'list-profile-list', NULL, 'list-profile', NULL, '5'); INSERT INTO `weblistgroup` (`weblistgroup_title`, `weblistgroup_details`, `weblistgroup_name`, `weblistgroup_icon`, `weblistgroup_link`, `weblistgroup_image_url`, `pagesettings_id`) VALUES ('CHAPTER TWO', 'details list group', 'list-messages-list', NULL, 'list-messages', NULL, '5'); INSERT INTO `weblistgroup` (`weblistgroup_title`, `weblistgroup_details`, `weblistgroup_name`, `weblistgroup_icon`, `weblistgroup_link`, `weblistgroup_image_url`, `pagesettings_id`) VALUES ('CHAPTER THREE', 'details list group', 'list-settings-list', NULL, 'list-settings', NULL, '5');

Ahora relacionaremos cierta información teniendo en cuenta la list-group (lista de grupos), es decir,

insertamos cierta información para mostrar al hacir clic en una cada lista. Esto se logra insertando nuevos registros en la tabla websection:

1 2 3 4 5 6 7 8

INSERT INTO `websection` (`websection_name`, `websection_title`, `websection_subtitle`, `websection_image_url`, `websection_text_one`, `websection_text_two`, `websection_text_three`, `websection_text_four`, `websection_text_five`, `websection_button_url`, `websection_button_text`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`, `pagesettings_id`) VALUES ('list-home', 'Elaboramos la primera versión de la base de datos del CMS', 'Desarrollo de una base de datos para la configuración y administración de un sistema de gestión de contenidos o también conocido por las siglas en inglés como CMS (content management system).', 'image/list-group/home/database-madiadb-cms.jpg', NULL, NULL, NULL, NULL, NULL, 'pages/database-madiadb-cms', 'Suscríbete al curso', '1', current_timestamp(), NULL, '1', NULL, '5'); INSERT INTO `websection` (`websection_name`, `websection_title`, `websection_subtitle`, `websection_image_url`, `websection_text_one`, `websection_text_two`, `websection_text_three`, `websection_text_four`, `websection_text_five`, `websection_button_url`, `websection_button_text`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`, `pagesettings_id`) VALUES ('list-profile', 'First part: Home page', 'Develop the home page used as a components main of the Bootstrap 5 for front-end, PHP 8 for manipulating data from back-end and MariaDB for the storage in a database.', 'image/list-group/home/database-madiadb-cms.jpg', NULL, NULL, NULL, NULL, NULL, 'pages/database-madiadb-cms', 'Suscríbete al curso', '1', current_timestamp(), NULL, '1', NULL, '5'); INSERT INTO `websection` (`websection_name`, `websection_title`, `websection_subtitle`, `websection_image_url`, `websection_text_one`, `websection_text_two`, `websection_text_three`, `websection_text_four`, `websection_text_five`, `websection_button_url`, `websection_button_text`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`, `pagesettings_id`) VALUES ('list-messages', 'Second part: Home page', 'Develop the home page used as a components main of the Bootstrap 5 for front-end, PHP 8 for manipulating data from back-end and MariaDB for the storage in a database.', 'image/list-group/home/chapter-one-bootstrap.jpg', NULL, NULL, NULL, NULL, NULL, 'pages/chapter-one-bootstrap', 'Suscríbete al curso', '1', current_timestamp(), NULL, '1', NULL, '5'); INSERT INTO `websection` (`websection_name`, `websection_title`, `websection_subtitle`, `websection_image_url`, `websection_text_one`, `websection_text_two`, `websection_text_three`, `websection_text_four`, `websection_text_five`, `websection_button_url`, `websection_button_text`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`, `pagesettings_id`) VALUES ('list-settings', 'Third part: Home page', 'Develop the footer of home page used as a component’s main of the Bootstrap 5 for front-end, PHP 8 for manipulating data from back-end and MariaDB for the storage in a database.','image/list-group/home/chapter-three-bootstrap.jpg', NULL, NULL, NULL, NULL, NULL, 'pages/chapter-three-bootstrap', 'Suscríbete al curso', '1', current_timestamp(), NULL, '1', NULL, '5');

Seguidamente se ingresa los valores en la tabla weblistgroupdetails teniendo en cuenta las relaciones entre los valores de la tabla weblistgroup y websection:

1 2 3 4 5 6 7 8

INSERT INTO `weblistgroupdetails` (`weblistgroup_id`, `websection_id`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`) VALUES ('6', '16', '1', current_timestamp(), '2023-07-14 00:58:09.000000', '1', NULL); INSERT INTO `weblistgroupdetails` (`weblistgroup_id`, `websection_id`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`) VALUES ('7', '18', '1', current_timestamp(), '2023-07-14 00:58:09.000000', '1', NULL); INSERT INTO `weblistgroupdetails` (`weblistgroup_id`, `websection_id`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`) VALUES ('8', '19', '1', current_timestamp(), '2023-07-14 00:59:09.000000', '1', NULL); INSERT INTO `weblistgroupdetails` (`weblistgroup_id`, `websection_id`, `active`, `creation_date`, `update_date`, `creation_user`, `update_user`) VALUES ('9', '20', '1', current_timestamp(), '2023-07-14 00:59:29.000000', '1', NULL);

Con esto registros ingresados se logra la relación entre las lista de grupos y las secciones

4. Script HTML para List Group.

Maquetación de la página index teniendo en cuenta la estructura del  componente List Group  que será construido dinamicamente.

Maquetación con los componentes de list group y tab-content

Script HTML de la página index.php que esta conformada por la estructura del  componente List Group  aplicando la biblioteca multiplataforma Bootstrap en su versión 5.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<div class="container"> <!-- Inicio de la maquetación para el componente list-group" --> <div class="title-home"> <div class="text-center p-5"> <h2>Learning Bootstrap</h2> <p>Lo que aprenderas en el curso</p> </div> </div> <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">DATABASE CMS</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">CHAPTER ONE</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">CHAPTER TWO</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">CHAPTER THREE</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> <h3>Elaboramos la primera versión de la base de datos del CMS</h3> <p>Desarrollo de una base de datos para la configuración y administración de un sistema de gestión de contenidos o también conocido por las siglas en inglés como CMS (content management system).</p> <span>6 Horas</span> <span>1 Certificado de finalización</span> <div class="text-button"> <a href="#">Suscríbete al curso</a> </div> </div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div> </div> <!-- Fin de la maquetación para el componente list-group" -->

Recuerda que la página index.php incluye los bloques de código que complementan toda la estrucutra de la página home creadas hasta este tutorial.

4. Conexión a base de datos bootstrap_demo.

Para la conexión a la base de datos se reusa el archivo dbconfig.php que se encuentra en el directorio de nombre config, archivo que contiene los parametros para la conexión a la base de datos:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?php /*Datos de conexion a la base de datos*/ $db_host = "localhost"; $db_user = "root"; $db_pass = ""; $db_name = "bootstrap_demo"; $con = mysqli_connect($db_host, $db_user, $db_pass, $db_name); $gerror = ''; if(mysqli_connect_errno()){ $gerror = 'No se pudo conectar a la base de datos : '.mysqli_connect_error(); }else{ $gerror = ''; } ?>

5. Script PHP para implementar los List Group dinámico.

En esté bloque de código PHP se construye dinamicamente el  Componente List Group  sobre una Grid de 4 columnas.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<!-- Inicio de la maquetación para el componente list-group" --> <div class="container"> <?php $sqllg = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 5 AND active = 1"); foreach($sqllg as $lg) { $lg_name = $lg['pagesettings_name']; $lg_details = $lg['pagesettings_details']; echo ' <div class="title-home"> <div class="text-center p-5"> <h2>'.$lg_name.'</h2> <p>'.$lg_details.'</p> </div> </div>'; $sqllgy = mysqli_query($con, "SELECT weblistgroup_name, weblistgroup_link, weblistgroup_title FROM weblistgroup WHERE pagesettings_id = 5"); echo ' <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist">'; foreach ($sqllgy as $lgy) { if($lgy['weblistgroup_name'] == 'list-home-list'){ echo '<a class="list-group-item list-group-item-action active" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; }else{ echo '<a class="list-group-item list-group-item-action" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; } } echo ' </div> </div> </div>'; } ?> </div> <!-- Fin de la maquetación para el componente list-group" -->

Resultado del bloque de código PHP con el componente List Group.

Ocupa un espacio de un Grid de 4 columnas.

Ahora amplearemos el bloque de código PHP para asociar dinamicamente el  Componente List Group  con el componente tab-content (tab de contenidos) que se mostrará sobre una Grid de 8 columnas.

Recudara que los valores para el tab-content se registraron en la tabla websection.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

<!-- Inicio de la maquetación para el componente list-group" --> <div class="container"> <?php $sqllg = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 5 AND active = 1"); foreach($sqllg as $lg) { $lg_name = $lg['pagesettings_name']; $lg_details = $lg['pagesettings_details']; echo ' <div class="title-home"> <div class="text-center p-5"> <h2>'.$lg_name.'</h2> <p>'.$lg_details.'</p> </div> </div>'; $sqllgy = mysqli_query($con, "SELECT weblistgroup_name, weblistgroup_link, weblistgroup_title FROM weblistgroup WHERE pagesettings_id = 5"); echo ' <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist">'; foreach ($sqllgy as $lgy) { if($lgy['weblistgroup_name'] == 'list-home-list'){ echo '<a class="list-group-item list-group-item-action active" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; }else{ echo '<a class="list-group-item list-group-item-action" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; } } echo ' </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent">'; $sqllgz = mysqli_query($con, "SELECT a.weblistgroup_name, a.weblistgroup_link, a.pagesettings_id, b.weblistgroupdetails_id, b.weblistgroup_id, b.websection_id, c.websection_name, c.websection_title, c.websection_subtitle, c.websection_image_url, c.websection_button_url, c.websection_button_text FROM weblistgroup a INNER JOIN weblistgroupdetails b ON a.weblistgroup_id = b.weblistgroup_id INNER JOIN websection c ON b.websection_id = c.websection_id WHERE b.active = 1 and a.pagesettings_id = 5"); foreach($sqllgz as $lgz){ if($lgz['weblistgroup_name'] == 'list-home-list'){ echo '<div class="tab-pane fade show active" id='.$lgz['weblistgroup_link'].' role="tabpanel" aria-labelledby='.$lgz['weblistgroup_name'].'>'; }else{ echo '<div class="tab-pane fade" id='.$lgz['weblistgroup_link'].' role="tabpanel" aria-labelledby='.$lgz['weblistgroup_name'].'>'; } echo ' <h3>'.$lgz['websection_title'].'</h3> <p>'.$lgz['websection_subtitle'].'</p> <div class="text-button"> <a href='.$lgz['websection_button_url'].'>'.$lgz['websection_button_text'].'</a> </div> </div>'; } echo ' </div> </div> </div>'; } ?> </div> <!-- Fin de la maquetación para el componente list-group" -->

Resultado del bloque de código para asociar el  Componente List Group  con el componente tab-content (tab de contenidos).

Ocupa un espacio de un Grid de 8 columnas.

 

6. Conclusiones y Referencias.

Conclusiones:

En este tutorial práctico creamos las tablas y script necesarios para el registro del componente List Group que está asociado al componente tab-content; asimismo, desarrollamos los bloques de código HTML necesarias, finalmente implementamos el código PHP para construir dinámicamente los componentes reusando la conexión a la base de datos bootstrap_demo.

Referencias:

• Components list-group Bootstrap5
• Containers Bootstrap 5
• Grid system Bootstrap 5
• Get started with Bootstrap5
• Examples with Bootstrap5
• MariaDB Documentation
• PHP Documentation

Directorio 06demo-list-group

Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!