En este tutorial práctico desarrollaremos el componente Placeholder 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é son los Placeholders en Bootstrap 5?
- Insertar los principales registros.
- Script HTML de la página Index con los Placeholders.
- Conexión a base de datos bootstrap_demo.
- Script PHP para implementar los Placeholders dinámico.
- Conclusiones y Referencias.
1. ¿Qué es Carousel en Bootstrap 5?
Bootstrap proporciona el componente Placeholder también conocido como marcadores de posición, normalmente utilizado para mejorar la experiencia del sitio web. Están construidos solo con HTML y CSS, lo que significa que no necesitas JavaScript para crearlos. Sin embargo, necesitarás JavaScript personalizado para alternar su visibilidad. Su apariencia, color y tamaño se pueden personalizar fácilmente con nuestras clases de utilidad.
2. Insertar los principales registros.
En la tabla pagesettings registramos el nombre del bloque o sección placeholders 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 ('placeholders home', 'details page settings', '1', current_timestamp(), '1'); |
Seguidamente insertar los registros necesarios teniendo en cuenta las propiedades del componente placeholder 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 | 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 ('placeholder Web Development', 'Web Development', 'Nos especializamos en construir el sitio web para que tu compañía se destaque en el mundo digital.', 'image/placeholder/home/coding-icon.png', NULL, NULL, NULL, NULL, NULL, 'pages/web-development', 'Ver detalles', '1', current_timestamp(), NULL, '1', NULL, '2'); 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 ('placeholder Mobile Development', 'Mobile Development', 'Aplicaciones y web apps para toda clase de dispositivos móviles como tablets y teléfonos celulares.', 'image/placeholder/home/mobile-icon.png', NULL, NULL, NULL, NULL, NULL, 'pages/mobile-development', 'Ver detalles', '1', current_timestamp(), NULL, '1', NULL, '2'); 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 ('placeholder IT Consulting', 'IT Consulting', 'Soluciones que vinculan procesos existentes de tu compañía con herramientas que pueden.', 'image/placeholder/home/consulting-icon.png', NULL, NULL, NULL, NULL, NULL, 'pages/it-consulting', 'Ver detalles', '1', current_timestamp(), NULL, '1', NULL, '2'); |
3. Script HTML de la página Index con los Placeholders.
Maquetación de la página index teniendo en cuenta la estructura del componente Placeholder que será construido dinamicamente.
Script de la página index.php incluyendo los bloques de código que complementan toda la estrucutra de la página home. Además, la página index.php esta conformada por la estructura del componente Placeholder que será construida dinamicamente desde la base de datos; en este punto toda la maquetación está en HTML5 y CCS3 aplicando la biblioteca multiplataforma Bootstrap en su versión 5.
La página index.php incluye los bloques de código con relación a los anteriores tutoriales como demo 1 y demo 2 de la serie de tutoriales Learning Bootstrap & PHP.
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
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
?>
<!doctype html>
<html lang="en">
<!-- Bloque donde se incluye los links con relacion a las css para el
control del navbar, framework bootstrap y otras tags que son
parte de la cabecera de la página web o sitio web -->
<?php include 'shared/head.php'; ?>
<!-- Bloque donde se incluye el tag svg para los "symbolos"
con relación a los iconos de redes sociales -->
<?php include 'shared/iconsm.php'; ?>
<body>
<header><!-- Agregar la equita header -->
<!-- Bloque donde se incluye el script para la lista de
opciones (menú dinámico) de la página web o sitio web -->
<?php include 'shared/navbar.php'; ?>
</header>
<main><!-- Se retira el estilo en relación a class="container", con la finalidad de abarcar toda el ancho de la pantalla-->
<!-- Inicio de la maquetación para el coomponente carousel -->
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<!-- Inicio del script para construir dinamicamente el Componente Carousel -->
<?php
$sql = mysqli_query($con, "SELECT a.pagesettings_name, 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");
if(mysqli_num_rows($sql) > 0){
while($row = mysqli_fetch_assoc($sql)){
echo '
<div class="'.$row['websection_name'].'">
<div class="opacity-25">
<img src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap">
</div>
<div class="container">
<div class="carousel-caption text-start">
<h1>'.$row['websection_title'].'</h1>
<h3>'.$row['websection_subtitle'].'</h3>
<p><a class="btn btn-lg btn-primary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p>
</div>
</div>
</div>
';
}
}
?>
<!-- Finl de la construcción del script para alimentar el Componente Carousel -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Fin de la maquetación para el componente carousel -->
<!-- Inicio de la maquetación para el componente placeholder -->
<!-- El placeholder es parte de otro container con la finalidad de centrar-->
<div class="container marketing">
<!-- Tres columnas para el componente placeholder -->
<div class="row">
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2 class="fw-normal">Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2 class="fw-normal">Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2 class="fw-normal">Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</main>
<!-- Bloque donde se incluye el footer de la página web o sitio web-->
<?php include 'shared/footer.php'; ?>
</body>
</html>
La página index.php incluye los bloques de código con relación a los anteriores tutoriales como demo 1 y demo 2 de la serie de tutoriales Learning Bootstrap & PHP.
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 | <?php header('Content-Type: text/html; charset=ISO-8859-1'); ?> <!doctype html> <html lang="en"> <!-- Bloque donde se incluye los links con relacion a las css para el control del navbar, framework bootstrap y otras tags que son parte de la cabecera de la página web o sitio web --> <?php include 'shared/head.php'; ?> <!-- Bloque donde se incluye el tag svg para los "symbolos" con relación a los iconos de redes sociales --> <?php include 'shared/iconsm.php'; ?> <body> <header><!-- Agregar la equita header --> <!-- Bloque donde se incluye el script para la lista de opciones (menú dinámico) de la página web o sitio web --> <?php include 'shared/navbar.php'; ?> </header> <main><!-- Se retira el estilo en relación a class="container", con la finalidad de abarcar toda el ancho de la pantalla--> <!-- Inicio de la maquetación para el coomponente carousel --> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <!-- Inicio del script para construir dinamicamente el Componente Carousel --> <?php $sql = mysqli_query($con, "SELECT a.pagesettings_name, 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"); if(mysqli_num_rows($sql) > 0){ while($row = mysqli_fetch_assoc($sql)){ echo ' <div class="'.$row['websection_name'].'"> <div class="opacity-25"> <img src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap"> </div> <div class="container"> <div class="carousel-caption text-start"> <h1>'.$row['websection_title'].'</h1> <h3>'.$row['websection_subtitle'].'</h3> <p><a class="btn btn-lg btn-primary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p> </div> </div> </div> '; } } ?> <!-- Finl de la construcción del script para alimentar el Componente Carousel --> </div> <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Fin de la maquetación para el componente carousel --> <!-- Inicio de la maquetación para el componente placeholder --> <!-- El placeholder es parte de otro container con la finalidad de centrar--> <div class="container marketing"> <!-- Tres columnas para el componente placeholder --> <div class="row"> <div class="col-lg-4"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> <h2 class="fw-normal">Heading</h2> <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> <h2 class="fw-normal">Heading</h2> <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg> <h2 class="fw-normal">Heading</h2> <p>And lastly this, the third column of representative placeholder content.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> </div><!-- /.row --> </main> <!-- Bloque donde se incluye el footer de la página web o sitio web--> <?php include 'shared/footer.php'; ?> </body> </html> |
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 Placeholders 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 Placeholders 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
?>
<!doctype html>
<html lang="en">
<!-- Bloque donde se incluye los links con relacion a las css para el
control del navbar, framework bootstrap y otras tags que son
parte de la cabecera de la página web o sitio web -->
<?php include 'shared/head.php'; ?>
<!-- Bloque donde se incluye el tag svg para los "symbolos"
con relación a los iconos de redes sociales -->
<?php include 'shared/iconsm.php'; ?>
<body>
<header><!-- Agregar la equita header -->
<!-- Bloque donde se incluye el script para la lista de
opciones (menú dinámico) de la página web o sitio web -->
<?php include 'shared/navbar.php'; ?>
</header>
<main><!-- Se retira el estilo en relación a class="container", con la finalidad de abarcar toda el ancho de la pantalla-->
<!-- Inicio de la maquetación para el coomponente carousel -->
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<!-- Inicio del script para construir dinamicamente el Componente Carousel -->
<!-- Aplicamos el filtro de "a.pagesettings_id = 1" a nuestra sentencia SQL
con la finalidad de filtrar el registro correspodiente a Carousel -->
<?php
$sql = mysqli_query($con, "SELECT a.pagesettings_name, 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 = 1"); /*nuevo filtro*/
if(mysqli_num_rows($sql) > 0){
while($row = mysqli_fetch_assoc($sql)){
echo '
<div class="'.$row['websection_name'].'">
<div class="opacity-25">
<img src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap">
</div>
<div class="container">
<div class="carousel-caption text-start">
<h1>'.$row['websection_title'].'</h1>
<h3>'.$row['websection_subtitle'].'</h3>
<p><a class="btn btn-lg btn-primary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p>
</div>
</div>
</div>
';
}
}
?>
<!-- Finl de la construcción del script para alimentar el Componente Carousel -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Fin de la maquetación para el componente carousel -->
<!-- Inicio de la maquetación para el componente placeholder -->
<!-- El placeholder es parte de otro container con la finalidad de centrar el contenido-->
<div class="container marketing">
<!-- Tres columnas para el componente placeholder -->
<div class="row">
<!-- Inicio del script para construir dinamicamente el Componente placeholder -->
<?php
$sql = mysqli_query($con, "SELECT a.pagesettings_name, 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 = 2"); /*filtrar los valores del placeholder*/
if(mysqli_num_rows($sql) > 0){
while($row = mysqli_fetch_assoc($sql)){
echo '
<div class="col-lg-4">
<img class="bd-placeholder-img" width="140" height="140" src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap">
<h2>'.$row['websection_title'].'</h2>
<p>'.$row['websection_subtitle'].'</p>
<p><a class="btn btn-secondary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p>
</div>
';
}
}
?>
<!-- Finl de la construcción del script para alimentar el Componente placeholder -->
</div><!-- /.row -->
</main>
<!-- Bloque donde se incluye el footer de la página web o sitio web-->
<?php include 'shared/footer.php'; ?>
</body>
</html>
Recuerdan que se modifico la setencia SQL con relación al tutorial de Bootstrap: Carousel dinámico con PHP y MariaDB.
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 Placeholders 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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <?php header('Content-Type: text/html; charset=ISO-8859-1'); ?> <!doctype html> <html lang="en"> <!-- Bloque donde se incluye los links con relacion a las css para el control del navbar, framework bootstrap y otras tags que son parte de la cabecera de la página web o sitio web --> <?php include 'shared/head.php'; ?> <!-- Bloque donde se incluye el tag svg para los "symbolos" con relación a los iconos de redes sociales --> <?php include 'shared/iconsm.php'; ?> <body> <header><!-- Agregar la equita header --> <!-- Bloque donde se incluye el script para la lista de opciones (menú dinámico) de la página web o sitio web --> <?php include 'shared/navbar.php'; ?> </header> <main><!-- Se retira el estilo en relación a class="container", con la finalidad de abarcar toda el ancho de la pantalla--> <!-- Inicio de la maquetación para el coomponente carousel --> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <!-- Inicio del script para construir dinamicamente el Componente Carousel --> <!-- Aplicamos el filtro de "a.pagesettings_id = 1" a nuestra sentencia SQL con la finalidad de filtrar el registro correspodiente a Carousel --> <?php $sql = mysqli_query($con, "SELECT a.pagesettings_name, 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 = 1"); /*nuevo filtro*/ if(mysqli_num_rows($sql) > 0){ while($row = mysqli_fetch_assoc($sql)){ echo ' <div class="'.$row['websection_name'].'"> <div class="opacity-25"> <img src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap"> </div> <div class="container"> <div class="carousel-caption text-start"> <h1>'.$row['websection_title'].'</h1> <h3>'.$row['websection_subtitle'].'</h3> <p><a class="btn btn-lg btn-primary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p> </div> </div> </div> '; } } ?> <!-- Finl de la construcción del script para alimentar el Componente Carousel --> </div> <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Fin de la maquetación para el componente carousel --> <!-- Inicio de la maquetación para el componente placeholder --> <!-- El placeholder es parte de otro container con la finalidad de centrar el contenido--> <div class="container marketing"> <!-- Tres columnas para el componente placeholder --> <div class="row"> <!-- Inicio del script para construir dinamicamente el Componente placeholder --> <?php $sql = mysqli_query($con, "SELECT a.pagesettings_name, 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 = 2"); /*filtrar los valores del placeholder*/ if(mysqli_num_rows($sql) > 0){ while($row = mysqli_fetch_assoc($sql)){ echo ' <div class="col-lg-4"> <img class="bd-placeholder-img" width="140" height="140" src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap"> <h2>'.$row['websection_title'].'</h2> <p>'.$row['websection_subtitle'].'</p> <p><a class="btn btn-secondary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p> </div> '; } } ?> <!-- Finl de la construcción del script para alimentar el Componente placeholder --> </div><!-- /.row --> </main> <!-- Bloque donde se incluye el footer de la página web o sitio web--> <?php include 'shared/footer.php'; ?> </body> </html> |
Recuerdan que se modifico la setencia SQL con relación al tutorial de Bootstrap: Carousel dinámico con PHP y MariaDB.
6. Conclusiones y Referencias.
Conclusiones:
En este tutorial práctico desarrollamos los scripts para el registro de los Placeholders; asimismo, desarrollamos los bloques de código HTML necesarias con relación al componente Placeholder, finalmente implementamos el código PHP para construir dinámicamente a los Placeholders teniendo en cuenta la conexión a la base de datos creada anteriormente.
Referencias:
- Components Placeholders Bootstrap5
- Get started with Bootstrap5
- Examples with Bootstrap5
- MariaDB Documentation
- PHP Documentation
 |
| Directorio 03demo-placeholder |
Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
0 Comentarios