En este tutorial práctico desarrollaremos el componente Accordion dinámico, haciendo uso de Bootstrap 5 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:
- XAMPP v3.3.0.
- PHP 8 y Bootstrap 5.
- MariaDB y PHPMyAdmin.
- Visual Studio Code.
Lo que veremos en este tutorial:
- ¿Qué es Accordion en Bootstrap 5?
- Insertar los principales registros.
- Script HTML para Accordion.
- Conexión a base de datos bootstrap_demo.
- Script PHP para implementar el Accordion dinámico.
- Conclusiones y Referencias.
1. ¿Qué es Jumbotron en Bootstrap 5?
Bootstrap proporciona el componente Accordion que se contrae verticalmente para mostrar y ocultar contenido a través de cambios de clase. El acordeón normalmente utiliza el collapse interno para hacerlo plegable que se renderiza en base a .show de clase .accordion-collapse.
2. Insertar los principales registros.
En la tabla pagesettings registramos el nombre del bloque o sección Accordion home teniendo en cuentas la página Home (index.php):
1 2 | INSERT INTO `pagesettings` (`pagesettings_name`, `pagesettings_details`, `active`, `creation_date`, `creation_user`) VALUES ('Accordion home', 'Prepárate para llevar a tu tienda online a un nuevo nivel', '1', current_timestamp(), '1'); |
Seguidamente insertar los registros necesarios teniendo en cuenta las propiedades del componente Accordion con la finalidad de obtener los valores a través de setencias SQL:
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 | 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 ('Accordion one', '¿Cómo funciona tu producto o servicio?', 'En el caso de ser un servicio, enumera los pasos para poner en funcionamiento la experiencia adquirida por tu cliente. Y si se trata de un producto, explícale cuáles son las características del diseño, qué tipo de materiales se usan para elaborarlo, etc.', NULL, 'headingOne', 'collapseOne', NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '4'); 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 ('Accordion two', '¿Tiene garantía tu producto?', 'Una de las preguntas que más aparece en los buscadores es si el producto ofrece algún tipo de garantía. El hecho de ofrecer devolución o reenvío en caso de que el producto llegue con algún desperfecto ofrece a los clientes una sensación de mayor seguridad a la hora de comprar.', NULL, 'headingTwo', 'collapseTwo', NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '4'); 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 ('Accordion three', '¿Necesito este artículo?', 'Expón a tu cliente todo lo que tu producto puede ofrecerle y por qué necesita un producto así en su vida. Si no tienen esa necesidad predispuesta, es importante que sepas cómo crearla.', NULL, 'headingThree', 'collapseThree', NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '4'); 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 ('Accordion four', '¿Qué beneficios tiene este artículo?', 'Los beneficios que puede darte tener cierto artículo es también una de las cuestiones que los consumidores se preguntan más en sus búsquedas online. Es importante ofrecer a tus compradores contenido persuasivo y que a la vez les proporcione información sobre el producto que van a adquirir.', NULL, 'headingFour', 'collapseFour', NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '4'); 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 ('Accordion five', '¿En cuánto tiempo tendré tu producto?', 'Una de las grandes preocupaciones a las que se pueden enfrentar los clientes a la hora de comprar en una tienda online son los tiempos de envío. Por eso mismo, esta es una de las cuestiones que más se hacen a la hora de escribir sus dudas en buscadores. Para evitar confusiones en estos potenciales clientes, debes ser claro y transparente con tus políticas de envío en tu sección de preguntas frecuentes.', NULL, 'headingFive', 'collapseFive', NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '4'); 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 ('Accordion title home', '¿Ya tienes claro lo que necesitas para implementar tu tiene en línea?', 'Reunámonos para revisar tu requerimiento.', 'image/accordion/cta-2.svg', NULL, NULL, NULL, NULL, NULL, 'pages/online-store-price', 'Empieza ahora', '1', current_timestamp(), NULL, '1', NULL, '4'); |
3. Script HTML para Jumbotron.
Maquetación de la página index teniendo en cuenta la estructura del componente Accordion que será construido dinamicamente.
Script HTML de la página index.php que esta conformada por la estructura del componente Placeholder 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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!-- Inicio de la maquetación para el componente accordion -->
<div class="container-fluid">
<div class="jumbotron">
<div class="text-center p-5">
<h2>Innova</h2>
<p>Prepárate para llevar a tu tienda online a un nuevo nivel</p>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<div class="row">
<div class="col-sm-4">
<img src="image/accordion/cta-2.svg" class="d-block w-100" alt="accordion one">
</div>
<div class="col-sm-8">
<h1>¿Ya tienes claro lo que necesitas para implementar tu tiene en línea?</h1>
<p>Reunámonos para revisar tu requerimiento.</p>
<button class="btn btn-outline-primary" type="button">Empieza ahora</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="h-100 rounded-3">
<div class="accordion" id="accordionEcommerce">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
¿Cómo funciona tu producto o servicio?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionEcommerce">
<div class="accordion-body">
En el caso de ser un servicio, enumera los pasos para poner en funcionamiento la experiencia adquirida por tu cliente. Y si se trata de un producto,
explícale cuáles son las características del diseño, qué tipo de materiales se usan para elaborarlo, etc.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
¿Tiene garantía tu producto?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionEcommerce">
<div class="accordion-body">
Una de las preguntas que más aparece en los buscadores es si el producto ofrece algún tipo de garantía. El hecho de ofrecer devolución o reenvío en
caso de que el producto llegue con algún desperfecto ofrece a los clientes una sensación de mayor seguridad a la hora de comprar.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
¿Necesito este artículo?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionEcommerce">
<div class="accordion-body">
Expón a tu cliente todo lo que tu producto puede ofrecerle y por qué necesita un producto así en su vida. Si no tienen esa necesidad predispuesta,
es importante que sepas cómo crearla.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
¿Qué beneficios tiene este artículo?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionEcommerce">
<div class="accordion-body">
Los beneficios que puede darte tener cierto artículo es también una de las cuestiones que los consumidores se preguntan más en sus búsquedas online.
Es importante ofrecer a tus compradores contenido persuasivo y que a la vez les proporcione información sobre el producto que van a adquirir.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
¿En cuánto tiempo tendré tu producto?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionEcommerce">
<div class="accordion-body">
Una de las grandes preocupaciones a las que se pueden enfrentar los clientes a la hora de comprar en una tienda online son los tiempos de envío.
Por eso mismo, esta es una de las cuestiones que más se hacen a la hora de escribir sus dudas en buscadores. Para evitar confusiones en estos
potenciales clientes, debes ser claro y transparente con tus políticas de envío en tu sección de preguntas frecuentes.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de la maquetación para el componente accordion -->
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.
Asimismo, se crea un nuevo bloque de script CSS para el estilo del Accordion teniendo en cuenta la página home.
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
/* Accordion home
------------------------- */
.accordion-price h1
{
font-size: 2.5em;
color: #5a5a5a;
line-height: 1.2;
margin-bottom: 0.5em;
}
.accordion-price p
{
font-size: 1.6em;
margin-top: 0;
line-height: 1.4;
}
.accordion-faq button
{
font-size: 0.6em;
font-weight: bold;
}
.accordion-faq p
{
font-size: 1.1em;
margin-top: 0;
line-height: 1.1em;
}
Finalmente se cambio el nombre del bloque del CSS jumbotron a title-home con la finalidad de ser aplicado para todo los titulos con relación a la página home.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.title-home h2
{
font-size: 3.5em;
color: #01B1ED;
text-shadow: 1px 1px #4C0BCE;
}
.title-home p
{
font-size: 1.6em;
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 400;
line-height: 1.4;
}
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <!-- Inicio de la maquetación para el componente accordion --> <div class="container-fluid"> <div class="jumbotron"> <div class="text-center p-5"> <h2>Innova</h2> <p>Prepárate para llevar a tu tienda online a un nuevo nivel</p> </div> </div> <div class="row align-items-md-stretch"> <div class="col-md-6"> <div class="h-100 p-5 bg-light border rounded-3"> <div class="row"> <div class="col-sm-4"> <img src="image/accordion/cta-2.svg" class="d-block w-100" alt="accordion one"> </div> <div class="col-sm-8"> <h1>¿Ya tienes claro lo que necesitas para implementar tu tiene en línea?</h1> <p>Reunámonos para revisar tu requerimiento.</p> <button class="btn btn-outline-primary" type="button">Empieza ahora</button> </div> </div> </div> </div> <div class="col-md-6"> <div class="h-100 rounded-3"> <div class="accordion" id="accordionEcommerce"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> ¿Cómo funciona tu producto o servicio? </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionEcommerce"> <div class="accordion-body"> En el caso de ser un servicio, enumera los pasos para poner en funcionamiento la experiencia adquirida por tu cliente. Y si se trata de un producto, explícale cuáles son las características del diseño, qué tipo de materiales se usan para elaborarlo, etc. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> ¿Tiene garantía tu producto? </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionEcommerce"> <div class="accordion-body"> Una de las preguntas que más aparece en los buscadores es si el producto ofrece algún tipo de garantía. El hecho de ofrecer devolución o reenvío en caso de que el producto llegue con algún desperfecto ofrece a los clientes una sensación de mayor seguridad a la hora de comprar. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> ¿Necesito este artículo? </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionEcommerce"> <div class="accordion-body"> Expón a tu cliente todo lo que tu producto puede ofrecerle y por qué necesita un producto así en su vida. Si no tienen esa necesidad predispuesta, es importante que sepas cómo crearla. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFour"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> ¿Qué beneficios tiene este artículo? </button> </h2> <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionEcommerce"> <div class="accordion-body"> Los beneficios que puede darte tener cierto artículo es también una de las cuestiones que los consumidores se preguntan más en sus búsquedas online. Es importante ofrecer a tus compradores contenido persuasivo y que a la vez les proporcione información sobre el producto que van a adquirir. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFive"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> ¿En cuánto tiempo tendré tu producto? </button> </h2> <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionEcommerce"> <div class="accordion-body"> Una de las grandes preocupaciones a las que se pueden enfrentar los clientes a la hora de comprar en una tienda online son los tiempos de envío. Por eso mismo, esta es una de las cuestiones que más se hacen a la hora de escribir sus dudas en buscadores. Para evitar confusiones en estos potenciales clientes, debes ser claro y transparente con tus políticas de envío en tu sección de preguntas frecuentes. </div> </div> </div> </div> </div> </div> </div> </div> <!-- Fin de la maquetación para el componente accordion --> |
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.
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 | /* Accordion home ------------------------- */ .accordion-price h1 { font-size: 2.5em; color: #5a5a5a; line-height: 1.2; margin-bottom: 0.5em; } .accordion-price p { font-size: 1.6em; margin-top: 0; line-height: 1.4; } .accordion-faq button { font-size: 0.6em; font-weight: bold; } .accordion-faq p { font-size: 1.1em; margin-top: 0; line-height: 1.1em; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .title-home h2 { font-size: 3.5em; color: #01B1ED; text-shadow: 1px 1px #4C0BCE; } .title-home p { font-size: 1.6em; margin-top: 0; margin-bottom: 0.5rem; font-weight: 400; line-height: 1.4; } |
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 = '';
}
?>
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 Jumbotrons dinámico.
Seguidamente se implementa la página index.php en base a código PHP y Sentencias SQL con la finalidad de construir dinamicamente los Componentes Accordion que nos proporciona 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
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
79
80
81
82
83
84
85
86
87
88
89
<!-- Inicio de la maquetación para el componente accordion -->
<div class="container-fluid">
<?php
/* Script SQL para recuperar los registro y listar los valores para alimentar dinámicamente a los accordion */
$sqljp = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 4 and active = 1");
foreach($sqljp as $jp)
{
$jp_name = $jp['pagesettings_name'];
$jp_details = $jp['pagesettings_details'];
echo '
<div class="title-home">
<div class="text-center p-5">
<h2>'.$jp_name.'</h2>
<p>'.$jp_details.'</p>
</div>
</div>';
$sqlh = mysqli_query($con, "SELECT a.pagesettings_name, a.pagesettings_id, b.websection_id, b.websection_name, b.websection_title, b.websection_subtitle,
b.websection_image_url, b.websection_button_url, b.websection_button_text
FROM pagesettings a INNER JOIN websection b ON a.pagesettings_id = b.pagesettings_id WHERE a.active = 1
and a.pagesettings_id = 4 and b.websection_id = 15 ORDER BY b.websection_id");
echo '
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<div class="row accordion-price">';
foreach($sqlh as $jph)
{
echo '
<div class="col-sm-4">
<img src='.$jph['websection_image_url'].' class="d-block w-100" alt="accordion bootstrap">
</div>
<div class="col-sm-8">
<h1>'.$jph['websection_title'].'</h1>
<p>'.$jph['websection_subtitle'].'</p>
<p><a class="btn btn btn-primary" href='.$jph['websection_button_url'].'>'.$jph['websection_button_text'].'</a></p>
</div>
';
}
echo '</div>
</div>
</div>';
$sqlhy = mysqli_query($con, "SELECT a.pagesettings_name, a.pagesettings_id, b.websection_id, b.websection_name, b.websection_title, b.websection_subtitle,
b.websection_text_one, b.websection_text_two
FROM pagesettings a INNER JOIN websection b ON a.pagesettings_id = b.pagesettings_id WHERE a.active = 1
and a.pagesettings_id = 4 and b.websection_id != 15 ORDER BY b.websection_id");
echo '
<div class="col-md-6 accordion-faq">
<div class="h-100 rounded-3">
<div class="accordion" id="accordionEcommerce">
<div class="accordion-item">';
foreach($sqlhy as $jphy)
{
echo '
<h2 class="accordion-header" id='.$jphy['websection_text_one'].'>
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=#'.$jphy['websection_text_two'].' aria-expanded="true" aria-controls='.$jphy['websection_text_two'].'>
'.$jphy['websection_title'].'
</button>
</h2>';
if($jphy['websection_text_two'] == 'collapseOne'){
echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse show" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">';
}elseif($jphy['websection_text_two'] != 'collapseOne'){
echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">';
}
echo '
<div class="accordion-body">
<p>'.$jphy['websection_subtitle'].'</p>
</div>
</div>';
}
echo '
</div>
</div>
</div>
</div>
</div>';
}
?>
</div>
<!-- Fin de la maquetación para el componente accordion -->
Seguidamente se implementa la página index.php en base a código PHP y Sentencias SQL con la finalidad de construir dinamicamente los Componentes Accordion que nos proporciona 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 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 79 80 81 82 83 84 85 86 87 88 89 | <!-- Inicio de la maquetación para el componente accordion --> <div class="container-fluid"> <?php /* Script SQL para recuperar los registro y listar los valores para alimentar dinámicamente a los accordion */ $sqljp = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 4 and active = 1"); foreach($sqljp as $jp) { $jp_name = $jp['pagesettings_name']; $jp_details = $jp['pagesettings_details']; echo ' <div class="title-home"> <div class="text-center p-5"> <h2>'.$jp_name.'</h2> <p>'.$jp_details.'</p> </div> </div>'; $sqlh = mysqli_query($con, "SELECT a.pagesettings_name, a.pagesettings_id, b.websection_id, b.websection_name, b.websection_title, b.websection_subtitle, b.websection_image_url, b.websection_button_url, b.websection_button_text FROM pagesettings a INNER JOIN websection b ON a.pagesettings_id = b.pagesettings_id WHERE a.active = 1 and a.pagesettings_id = 4 and b.websection_id = 15 ORDER BY b.websection_id"); echo ' <div class="row align-items-md-stretch"> <div class="col-md-6"> <div class="h-100 p-5 bg-light border rounded-3"> <div class="row accordion-price">'; foreach($sqlh as $jph) { echo ' <div class="col-sm-4"> <img src='.$jph['websection_image_url'].' class="d-block w-100" alt="accordion bootstrap"> </div> <div class="col-sm-8"> <h1>'.$jph['websection_title'].'</h1> <p>'.$jph['websection_subtitle'].'</p> <p><a class="btn btn btn-primary" href='.$jph['websection_button_url'].'>'.$jph['websection_button_text'].'</a></p> </div> '; } echo '</div> </div> </div>'; $sqlhy = mysqli_query($con, "SELECT a.pagesettings_name, a.pagesettings_id, b.websection_id, b.websection_name, b.websection_title, b.websection_subtitle, b.websection_text_one, b.websection_text_two FROM pagesettings a INNER JOIN websection b ON a.pagesettings_id = b.pagesettings_id WHERE a.active = 1 and a.pagesettings_id = 4 and b.websection_id != 15 ORDER BY b.websection_id"); echo ' <div class="col-md-6 accordion-faq"> <div class="h-100 rounded-3"> <div class="accordion" id="accordionEcommerce"> <div class="accordion-item">'; foreach($sqlhy as $jphy) { echo ' <h2 class="accordion-header" id='.$jphy['websection_text_one'].'> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=#'.$jphy['websection_text_two'].' aria-expanded="true" aria-controls='.$jphy['websection_text_two'].'> '.$jphy['websection_title'].' </button> </h2>'; if($jphy['websection_text_two'] == 'collapseOne'){ echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse show" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">'; }elseif($jphy['websection_text_two'] != 'collapseOne'){ echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">'; } echo ' <div class="accordion-body"> <p>'.$jphy['websection_subtitle'].'</p> </div> </div>'; } echo ' </div> </div> </div> </div> </div>'; } ?> </div> <!-- Fin de la maquetación para el componente accordion --> |
6. Conclusiones y Referencias.
Conclusiones:
En este tutorial práctico creamos los script para el registro del componente Accordion; asimismo, desarrollamos los bloques de código HTML necesarias, finalmente implementamos el código PHP para construir dinámicamente el Accordion teniendo en cuenta la conexión a la base de datos creada anteriormente.
Referencias:
- Components Accordion Bootstrap5
- Containers Bootstrap 5
- Grid system Bootstrap 5
- Get started with Bootstrap5
- Examples with Bootstrap5
- MariaDB Documentation
- PHP Documentation
 |
| Directorio 05demo-accordion |
Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
0 Comentarios