En este tutorial práctico desarrollaremos el componente Jumbotron 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 Jumbotron en Bootstrap 5?
- Insertar los principales registros.
- Script HTML para Jumbotron.
- Conexión a base de datos bootstrap_demo.
- Script PHP para implementar los Jumbotrons dinámico.
- Conclusiones y Referencias.
1. ¿Qué es Jumbotron en Bootstrap 5?
Bootstrap nos proporciona el componente jumbotron que tiene como finalidad mostrar contenidos de forma muy destacada; puede ser utilizada de acuerdo a la necesidad del sitio o página web según lo requiere, y está conformada por la información destacada, imágenes, inclusive links o botones; normalmente su apariencia, color y tamaño pueden ser 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 ('Jumbotron home', 'Innova, gestiona y expande tu negocio online', '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 24 25 26 | 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 ('Jumbotron one', 'Brindamos soluciones y servicios de calidad.', 'Sabemos la importancia de la especialización, por ello contamos con un gran equipo en constante crecimiento, un equipo humano y profesional listo para entender y conectar de la mejor manera con nuestros clientes. Somos su mejor aliado que va a revolucionar su negocio.', 'image/jumbotron/jumbotron-one.jpg', NULL, NULL, NULL, NULL, NULL, NULL, NULL, '1', current_timestamp(), NULL, '1', NULL, '3'); 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 ('Jumbotron Tienda Online', 'Haz crecer tu negocio con una tienda online', 'Vende lo que quieras, de la forma que quieras, desde productos y servicios hasta bienes digitales, lo que ofrecen las tiendas online te ayuda a mostrar, promocionar, vender y enviar tus productos con facilidad.', NULL, NULL, NULL, NULL, NULL, NULL, 'pages/online-store', 'Ver detalles', '1', current_timestamp(), NULL, '1', NULL, '3'); 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 ('Jumbotron Tienda Online', 'Haz crecer tu negocio con una tienda online', 'Vende lo que quieras, de la forma que quieras, desde productos y servicios hasta bienes digitales, lo que ofrecen las tiendas online te ayuda a mostrar, promocionar, vender y enviar tus productos con facilidad.', NULL, NULL, NULL, NULL, NULL, NULL, 'pages/online-store', 'Ver detalles', '1', current_timestamp(), NULL, '1', NULL, '3'); |
3. Script HTML para Jumbotron.
Maquetación de la página index teniendo en cuenta la estructura del componente Jumbotron que será construido dinamicamente.
Script HTML de la página index.php incluye 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 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
<!-- Inicio de la maquetación para el componente jumbotron -->
<div class="jumbotron">
<div class="text-center p-5">
<h2>Transforma</h2>
<p>Innova, gestiona y expande tu negocio online</p>
</div>
</div>
<div class="jumbotron-one">
<div class="row">
<div class="col-6">
<img src="image/jumbotron/jumbotron-one.jpg" class="d-block w-100" alt="jumbotron one">
</div>
<div class="col-6">
<!--<div class="p-5 mb-4 bg-light rounded-3">-->
<div class="p-5 mb-4 text-white">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous
versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and
match with additional component themes and more.</p>
<button class="btn btn-outline-light" type="button">Example button</button>
</div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look
under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
<button class="btn btn-outline-secondary" type="button">Example button</button>
</div>
</div>
</div>
</div>
<!-- Fin de la maquetación para el componente jumbotron -->
Asimismo, se crea un nuevo bloque de script CSS para el estilo del principal Jumbotron de la página home.
El archivo principal del CSS ahora lo llamaremos style.css que contiene los estilos con relación a los anteriores tutoriales del demo1, demo2 y demo3.
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
/* Jumbotron one
------------------------- */
.jumbotron h2
{
font-size: 3em;
color: #01B1ED;
text-shadow: 1px 1px #4C0BCE;
}
.jumbotron p
{
font-size: 1.4em;
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 400;
line-height: 1.2;
}
.jumbotron-one {
background-color: #e9ecef;
background: #000064; /* old browsers fallback color*/
background: -webkit-linear-gradient(to right, #1BADD8, #00003E);
background: linear-gradient(to right, #1BADD8, #00003E);
}
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 | <!-- Inicio de la maquetación para el componente jumbotron --> <div class="jumbotron"> <div class="text-center p-5"> <h2>Transforma</h2> <p>Innova, gestiona y expande tu negocio online</p> </div> </div> <div class="jumbotron-one"> <div class="row"> <div class="col-6"> <img src="image/jumbotron/jumbotron-one.jpg" class="d-block w-100" alt="jumbotron one"> </div> <div class="col-6"> <!--<div class="p-5 mb-4 bg-light rounded-3">--> <div class="p-5 mb-4 text-white"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> <button class="btn btn-primary btn-lg" type="button">Example button</button> </div> </div> </div> </div> </div> <div class="container py-4"> <div class="row align-items-md-stretch"> <div class="col-md-6"> <div class="h-100 p-5 text-bg-dark rounded-3"> <h2>Change the background</h2> <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> <button class="btn btn-outline-light" type="button">Example button</button> </div> </div> <div class="col-md-6"> <div class="h-100 p-5 bg-light border rounded-3"> <h2>Add borders</h2> <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> <button class="btn btn-outline-secondary" type="button">Example button</button> </div> </div> </div> </div> <!-- Fin de la maquetación para el componente jumbotron --> |
El archivo principal del CSS ahora lo llamaremos style.css que contiene los estilos con relación a los anteriores tutoriales del demo1, demo2 y demo3.
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 | /* Jumbotron one ------------------------- */ .jumbotron h2 { font-size: 3em; color: #01B1ED; text-shadow: 1px 1px #4C0BCE; } .jumbotron p { font-size: 1.4em; margin-top: 0; margin-bottom: 0.5rem; font-weight: 400; line-height: 1.2; } .jumbotron-one { background-color: #e9ecef; background: #000064; /* old browsers fallback color*/ background: -webkit-linear-gradient(to right, #1BADD8, #00003E); background: linear-gradient(to right, #1BADD8, #00003E); } |
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 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
<?php
/* Script SQL para recuperar los registro y listar los valores para
alimentar dinámicamente a los jumbotrons
*/
$sqljp = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 3 and active = 1");
foreach($sqljp as $jp)
{
$jp_name = $jp['pagesettings_name'];
$jp_details = $jp['pagesettings_details'];
echo '
<div class="jumbotron">
<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 = 3 ORDER BY b.websection_id");
foreach($sqlh as $jph)
{
if($jph['websection_id'] == 7)
{
echo '
<div class="jumbotron-one">
<div class="row">
<div class="col-6">
<img src='.$jph['websection_image_url'].' class="d-block w-100" alt="jumbotron one">
</div>
<div class="col-6">
<div class="p-5 mb-4 text-white">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">'.$jph['websection_title'].'</h1>
<p class="col-md-10 fs-4">'.$jph['websection_subtitle'].'</p>
</div>
</div>
</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_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 = 3 and b.websection_id != 7 ORDER BY b.websection_id");
echo '<div class="container py-4">
<div class="row align-items-md-stretch">';
foreach($sqlhy as $jphy)
{
echo '
<div class="col-md-6">';
if($jphy['websection_id'] == 8){
echo '<div class="h-100 p-5 text-bg-dark rounded-3">';
}elseif($jphy['websection_id'] == 9){
echo '<div class="h-100 p-5 bg-light border rounded-3">';
}
echo '
<h2>'.$jphy['websection_title'].'</h2>
<p>'.$jphy['websection_subtitle'].'</p>
<p><a class="btn btn-secondary" href='.$jphy['websection_button_url'].'>'.$jphy['websection_button_text'].'</a></p>
</div>
</div>
';
}
echo '</div>
</div>';
}
?>
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 | <?php /* Script SQL para recuperar los registro y listar los valores para alimentar dinámicamente a los jumbotrons */ $sqljp = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 3 and active = 1"); foreach($sqljp as $jp) { $jp_name = $jp['pagesettings_name']; $jp_details = $jp['pagesettings_details']; echo ' <div class="jumbotron"> <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 = 3 ORDER BY b.websection_id"); foreach($sqlh as $jph) { if($jph['websection_id'] == 7) { echo ' <div class="jumbotron-one"> <div class="row"> <div class="col-6"> <img src='.$jph['websection_image_url'].' class="d-block w-100" alt="jumbotron one"> </div> <div class="col-6"> <div class="p-5 mb-4 text-white"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">'.$jph['websection_title'].'</h1> <p class="col-md-10 fs-4">'.$jph['websection_subtitle'].'</p> </div> </div> </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_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 = 3 and b.websection_id != 7 ORDER BY b.websection_id"); echo '<div class="container py-4"> <div class="row align-items-md-stretch">'; foreach($sqlhy as $jphy) { echo ' <div class="col-md-6">'; if($jphy['websection_id'] == 8){ echo '<div class="h-100 p-5 text-bg-dark rounded-3">'; }elseif($jphy['websection_id'] == 9){ echo '<div class="h-100 p-5 bg-light border rounded-3">'; } echo ' <h2>'.$jphy['websection_title'].'</h2> <p>'.$jphy['websection_subtitle'].'</p> <p><a class="btn btn-secondary" href='.$jphy['websection_button_url'].'>'.$jphy['websection_button_text'].'</a></p> </div> </div> '; } echo '</div> </div>'; } ?> |
6. Conclusiones y Referencias.
Conclusiones:
En este tutorial práctico creamos los script para el registro del Jumbotron; asimismo, desarrollamos los bloques de código HTML necesarias con relación al componente en mención, finalmente implementamos el código PHP para construir dinámicamente los Jumbotrons teniendo en cuenta la conexión a la base de datos creada anteriormente.
Referencias:
- Components Jumbotron Bootstrap5
- Containers Bootstrap 5
- Grid system Bootstrap 5
- Get started with Bootstrap5
- Examples with Bootstrap5
- MariaDB Documentation
- PHP Documentation
 |
| Directorio 04demo-jumbotron |
Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
0 Comentarios