Ticker

6/recent/ticker-posts

Bootstrap: Carousel dinámico con PHP y MariaDB

Hadsonpar julio 01, 2023


 

En este tutorial práctico elaboraremos el  componente Carousel  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 Carousel en Bootstrap 5?
  2. Crear las tablas pagesettings y websection.
  3. Insertar los principales registros.
  4. Script HTML de la página Index con Carousel.
  5. Conexión a base de datos bootstrap_demo.
  6. Script PHP para implementar el Carousel dinámico.
  7. Conclusiones y Referencias.


1. ¿Qué es Carousel en Bootstrap 5?

Bootstrap proporciona el  componente Carousel (carrusel)  que facilita la presentación de diapositivas para recorrer una serie de contenido, principalmente creado con CSS 3D y JavaScript. 

Normalmente la funcionalidad se basa en una una serie de imágenes, texto o marcas personalizadas e incluye controles de desplamiento como anteriores/siguientes.


2. Crear las tablas pagesettings y websection.

La tablas pagesettings y websection será creada en la base de bootstrap_demo que se elaboró en el anterior tutorial acerca de Bootstrap: Navbar dinámico con PHP y MariaDB. 

La tabla pagesettings es el encargado de almacenar las principales configuraciones con relación a la manipulación de las secciones que conforman las páginas PHP (Inicio, Nosotros, Servicios o Productos, Blog y Contacto) del sitio o página web.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
CREATE TABLE pagesettings
(
    pagesettings_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    pagesettings_name VARCHAR(100) NOT NULL,    
    pagesettings_details TEXT NOT NULL DEFAULT 'details page settings',
    pagesettings_icon VARCHAR(200) 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;


La tabla websection es el encargado de almacenar el bloque de contenido de cada opción a la qe pertecene; por ejemplo: La principal opción de Inicio (index.php) puede estar conformada por la sección de un carrusel donde se muestra los principales productos o simplemente una bienvenida.


 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
CREATE TABLE websection
(
    websection_id INT(3) NOT NULL AUTO_INCREMENT,
    websection_name VARCHAR(100) NOT NULL,
    websection_title TEXT NOT NULL,
    websection_subtitle TEXT NULL,
    websection_image_url TEXT NULL,
    websection_text_one TEXT NULL,
    websection_text_two TEXT NULL,
    websection_text_three TEXT NULL,
    websection_text_four TEXT NULL,
    websection_text_five TEXT NULL,
    websection_button_url TEXT NULL,
    websection_button_text VARCHAR(100) 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,
    pagesettings_id INT(11) NOT NULL,
    CONSTRAINT websection_pk PRIMARY KEY (websection_id)
) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8;

ALTER TABLE websection ADD CONSTRAINT `websection_fk`
    FOREIGN KEY (pagesettings_id) REFERENCES pagesettings (pagesettings_id);


El modelo de base de datos generado desde phpMyAdmin es con relación a las tres entidades creadas teniendo en cuenta nuestro primer demo (se crearon las tablas weboption, websuboption) en relación a la Base de datos bootstrap_demo.


Modelo generado con phpMyAdmin


3. Insertar los principales registros.

En la tabla pagesettings registramos el nombre del bloque o sección carousel 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 ('carousel home', 'details page settings', '1', current_timestamp(), '1');

Seguidamente insertar los registros necesarios teniendo en cuenta las propiedades del componente carousel 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 ('carousel-item active', 'Learning PHP 8, Bootstrap 5 and MariaDB.', 
    'Resource about learning development of Web Application with Bootstrap for front-end, PHP 8 for back-end and MariaDB for the database.', 
    'image/carousel/home/welcome-carousel.jpg', NULL, NULL, NULL, NULL, NULL, 'https://github.com/Hadsonpar/LearningPHPBootstrap', 
    'view resources', '1', current_timestamp(), NULL, '1', NULL, '1');

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 ('carousel-item', 'Navbar dinámico con PHP y MariaDB.', 
    'En este tutorial práctico elaboraremos el Navbar dinámico, haciendo uso de Bootstrap 5 para el front-end y PHP 8 para el back-end y MariaDB para el almacenamiento de datos.',
    'image/carousel/home/navbar-carousel.jpg', NULL, NULL, NULL, NULL, NULL, 'http://blog.hadsonpar.com/2023/06/bootstrap-navbar-dinamico-con-php-y.html', 
    'view tutorial', '1', current_timestamp(), NULL, '1', NULL, '1');

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 ('carousel-item', 'Carousel dinámico con PHP y MariaDB.', 
    'En este tutorial práctico elaboraremos el  componente Carousel  dinámico, haciendo uso de Bootstrap 5 para el front-end y PHP 8 para el back-end y MariaDB.',
    'image/carousel/home/navbar-carousel.jpg', NULL, NULL, NULL, NULL, NULL, 'http://blog.hadsonpar.com/2023/06/bootstrap-navbar-dinamico-con-php-y.html', 
    'view tutorial', '1', current_timestamp(), NULL, '1', NULL, '1');

4. Script HTML de la página Index con Carousel.

Maquetación de la página index teniendo en cuenta la estructura del  componente Carousel  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. Además, la página index.php contempla la estructura del  componente Carousel  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.


 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
<!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">
        <div class="carousel-item active">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

          <div class="container">
            <div class="carousel-caption text-start">
              <h1>Example headline.</h1>
              <p>Some representative placeholder content for the first slide of the carousel.</p>
              <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Some representative placeholder content for the second slide of the carousel.</p>
              <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

          <div class="container">
            <div class="carousel-caption text-end">
              <h1>One more for good measure.</h1>
              <p>Some representative placeholder content for the third slide of this carousel.</p>
              <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </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 coomponente carousel -->

    <!--  Bloque donde se incluye el footer de la página web o sitio web-->
    <?php include 'shared/footer.php'; ?>
    
    </main>

  </body>
</html>


Seguidamente realizaremos algunos cambios con relación a la maquetación inicial, en el siguiente bloque HTML del div carousel-item aplicamos los siguiente cambios:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
        <div class="carousel-item active">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>

          <div class="container">
            <div class="carousel-caption text-start">
              <h1>Example headline.</h1>
              <p>Some representative placeholder content for the first slide of the carousel.</p>
              <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
            </div>
          </div>
        </div>

  1. Remplazar el tag svg por un div para cargas las imagenes en el tag img teniendo en cuenta el estilo css  opacity-25 que nos ofrece el Utilities API de Bootstrap5.
  2. Remplazar la primera etiqueta de tipo parráfo <p> por una <h3> y agregamos el siguiente bloque de código CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.carousel h1{  
  font-size: 5em;
  color: #01B1ED;
  text-shadow: 2px 2px #4C0BCE;
}

.carousel h3{    
  font-size: 1.8em;
  color: #6A6A6A;  
  font-style: oblique;
}


Recuerda, se debe aplicar el mismo cambio en los demás bloque de código HTML. Para este turorial son 3 divs de tipo carousel-item teniendo en cuenta su respectivo imágen por bloque.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="carousel-item">

  <div class="opacity-25">
    <img src="image/carousel/home/welcome-carousel.jpg" class="d-block w-100" alt="welcome learning bootstrap">
  </div>

  <div class="container">
    <div class="carousel-caption text-start">              
      <h1>Example headline.</h1>              
      <h3>Some representative placeholder content for the first slide of the carousel.</h3>
      <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
    </div>
  </div>
</div>

Finalmente al aplicar los cambios en el código HTML de la página index.ph quedaría de la siguiente manera:


 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
<!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">

        <div class="carousel-item active">
          <div class="opacity-25">
            <img src="image/carousel/home/welcome-carousel.jpg" class="d-block w-100" alt="welcome learning bootstrap">
          </div>
          <div class="container">
            <div class="carousel-caption text-start">              
              <h1>Example headline.</h1>              
              <h3>Some representative placeholder content for the first slide of the carousel.</h3>
              <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
            </div>
          </div>
        </div>

        <div class="carousel-item">          
          <div class="opacity-25">
            <img src="image/carousel/home/navbar-carousel.jpg" class="d-block w-100" alt="welcome navbar demo one of bootstrap">
          </div>
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <h3>Some representative placeholder content for the second slide of the carousel.</h3>
              <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="opacity-25">
            <img src="image/carousel/home/carousel-carousel.jpg" class="d-block w-100" alt="welcome carousel demo two of bootstrap">
          </div>
          <div class="container">
            <div class="carousel-caption text-end">
              <h1>One more for good measure.</h1>
              <h3>Some representative placeholder content for the third slide of this carousel.</h3>
              <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </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 coomponente carousel -->

    <!--  Bloque donde se incluye el footer de la página web o sitio web-->
    <?php include 'shared/footer.php'; ?>

    </main>

  </body>
</html>


Resultado de los cambios aplicados en el código HTML de la página index.ph

Página index.php aplicando los cambios para el componente carousel, aun no es código dinámico


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

6. Script PHP para implementar el Carousel 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 el  Componente Carousel  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
<?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){            
              
              /*foreach($sql as $row){*/
              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 coomponente carousel -->

    <!--  Bloque donde se incluye el footer de la página web o sitio web-->
    <?php include 'shared/footer.php'; ?>

    </main>

  </body>
</html>

7. Conclusiones y Referencias.

Conclusiones:

En este tutorial práctico creamos las tablas para el almacenamiento de los registros del Carousel; asimismo, desarrollamos las páginas necesarias con relación al componente Carousel, finalmente implementamos en PHP para construir dinámicamente al componente teniendo en cuenta la conexión a la base de datos creada anteriormente.

Referencias:


Directorio 02demo-carousel

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

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios