Ticker

6/recent/ticker-posts

Bootstrap: Jumbotron dinámico con PHP y MariaDB

 

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:

  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 Jumbotron en Bootstrap 5?
  2. Insertar los principales registros.
  3. Script HTML para Jumbotron.
  4. Conexión a base de datos bootstrap_demo.
  5. Script PHP para implementar los Jumbotrons dinámico.
  6. 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); 
}

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 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>';
          }
      ?>  

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:


Directorio 04demo-jumbotron

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

Publicar un comentario

0 Comentarios