Ticker

6/recent/ticker-posts

Bootstrap: Navbar dinámico con PHP y MariaDB

Hadsonpar junio 27, 2023

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; 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 Navbar en Bootstrap 5?
  2. Crear la Base de Datos.
  3. Crear las principales tablas.
  4. Insertar registros principales.
  5. Página Index con Navbar.
  6. Conexión a base de datos.
  7. Script PHP para Navbar dinámico .
  8. Conclusiones y Referencias.


1. ¿Qué es Navbar en Bootstrap 5?

Bootstrap proporciona el componente de contenido flexible y extensible, como es la barra de navegación (Navbar) para las opciones o encabezado de un sitio o página web.


2. Crear la Base de Datos.

Crea la base de datos con el nombre de bootstrap_demo desde el Workbench o phpMyAdmin, seguidamente crea las tablas detalladas en el punto 3.

1
2
3
4
CREATE SCHEMA IF NOT EXISTS `bootstrap_demo` 
    DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci;

USE `bootstrap_demo`;


3. Crear las principales tablas.

Tabla weboption: Es el encargado de almacenar las opciones "navegación de página web o nenú de navegación" de nuestra página web o sitio web; por ejemplo: Inicio, Nosotros, Servicios o Productos, Blog y Contacto.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
CREATE TABLE weboption
(
    weboption_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    weboption_name VARCHAR(100) NOT NULL,
    weboption_link TEXT NOT NULL DEFAULT 'home',
    weboption_details TEXT NOT NULL DEFAULT 'details web option',
    weboption_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;


Tabla websuboption: Es el encargado de almacenar las sub opciones que puedan tener las principales opciones; por ejemplo: La principal opción de Servicios puede estar conformada por las sub opciones de Desarrollo Web, Desarrollo Móviles y Consultoria TI, es decir servicios esta conformada por 3 sub opciones.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
CREATE TABLE websuboption
(
    websuboption_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    websuboption_name VARCHAR(100) NOT NULL,
    websuboption_link TEXT NOT NULL DEFAULT 'page',
    websuboption_details TEXT NOT NULL DEFAULT 'details web sub option',
    websuboption_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,     
    weboption_id INT(11) NOT NULL
) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8;

ALTER TABLE websuboption ADD CONSTRAINT `websuboption_fk` 
    FOREIGN KEY (weboption_id) REFERENCES weboption (weboption_id);


El modelo de base de datos generado desde phpMyAdmin es con relación a las dos entidades creadas con relación a la Base de datos bootstrap_demo.

Modelo generado con phpMyAdmin


4. Insertar registros principales.

Insertar los registros principales para listar las opciones del menú principal (Home, About, Services, Portfolio, Team, Courses, Blog y Contact) de la página web o sitio web.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/* data insert: weboption table*/
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Home', 'home', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('About', 'about', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Services', 'services', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Portfolio', 'portfolio', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Team', 'team', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Courses', 'courses', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Blog', 'blog', '1');
INSERT INTO `weboption` (`weboption_name`, `weboption_link`, `creation_user`) 
    VALUES ('Contact', 'contact', '1');

Insertar los registros principales para listar las subopciones con relación al menú principal de Services (el campo weboption_id es con relación a la Tabla websuboption) de la página web o sitio web.

1
2
3
4
5
6
7
/* data insert: websuboption table*/
INSERT INTO `websuboption` (`websuboption_name`, `websuboption_link`, `creation_user`, `weboption_id`) 
    VALUES ('Web Development', 'web-development', '1', 3);
INSERT INTO `websuboption` (`websuboption_name`, `websuboption_link`, `creation_user`, `weboption_id`) 
    VALUES ('Mobile Development', 'mobile-development', '1', 3);
INSERT INTO `websuboption` (`websuboption_name`, `websuboption_link`, `creation_user`, `weboption_id`) 
    VALUES ('TI Consulting', 'it-consulting', '1', 3);


5. Página Index con Navbar.

Maquetación de la página index teniendo en cuenta el  componente Navbar  que está conformada por las opciones Home, About, Services, Portfolio, Team, Courses, Blog y Contact; el menú o opción principal Services cuenta las opciones Web Development, Mobile Development y TI Consulting.

Maquetación teniendo en cuenta la biblioteca multiplataforma Bootstrap en su versión 5.


Script de la página index.php incluyendo los bloques de código que complementan toda la estrucutra de la página HTML5 (index.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
<!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'; ?>

  <body>
    <!--  Bloque donde se incluye el tag svg para los "symbolos"
          con relación a los iconos de redes sociales -->
    <?php include 'shared/iconsm.php'; ?>

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

    <main class="container">
      <div class="bg-light p-5 rounded">
        <h1>Navbar example</h1>
        <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. 
                        As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
        <a class="btn btn-lg btn-primary" href="../components/navbar/" role="button">View navbar docs &raquo;</a>
      </div>
    </main>

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


Script de la página navbar.php que será alimentada 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
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="container-fluid">
      <a class="navbar-brand" href=".">01 demo navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Services
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Web Development</a></li>
              <li><a class="dropdown-item" href="#">Mobile Development</a></li>
              
              <li><a class="dropdown-item" href="#">IT Consulting</a></li>
            </ul>
          </li>
          <li class="nav-item">            
            <a class="nav-link" href="#">Portfolio</a>
          </li>
          <li class="nav-item">            
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Team</a>
          </li>
          <li class="nav-item">            
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Courses</a>
          </li>
          <li class="nav-item">            
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
</nav>


6. Conexión a base de datos.

Para la conexión a la base de datos se debe crear el directorio de nombre config y seguidamente crear el archivo dbconfig.php finalmente implementar 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 = '';
    }
?>

7. Script PHP para Navbar dinámico.

Seguidamente se implementa la página navbar.php en base a código PHP y Sentencias SQL con la finalidad de construir dinamicamente el  Componente Navbar  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
<!--Adicionar la pagina php que contiene la conexión a la base de datos bootstrap_demo-->
<?php require 'config/dbconfig.php'; ?>

<!--
  Inicio del desarrollo del componente navbar
-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="container-fluid">
      <!--
      Texto que puede ser remplaza por el logo de la página o sitio web
      -->
      <a class="navbar-brand" href=".">01 demo navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" 
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <?php

            /*  Script SQL para recuperar los registro y listar las opciones para 
                alimentar dinámicamente al nav-item
            */
            $sqlwo  = mysqli_query($con, "SELECT * FROM weboption WHERE active = 1");

            foreach($sqlwo as $nav)
            {
              $wo_id    = $nav['weboption_id'];
              $wo_link  = $nav['weboption_link'];
              $wo_name  = $nav['weboption_name'];

              /*  Script SQL para recuperar los registro y listar las sub opciones para
                  alimentar dinámicamente al nav-item dropdown
              */
              $sqlwso = mysqli_query($con, "SELECT  b.websuboption_id, a.weboption_id, a.weboption_name,
                                                    b.websuboption_name, b.websuboption_link
                                            FROM weboption a INNER JOIN websuboption b ON b.weboption_id = a.weboption_id
                                            WHERE b.weboption_id = '$wo_id' AND b.active = 1 ORDER BY a.weboption_id");

              if(mysqli_num_rows($sqlwso) == 0){
                echo '             
                  <li class="nav-item">
                    <a class="nav-link" aria-current="page" href='.$wo_link.'>'.$wo_name.'</a>
                  </li>                  
                  ';     
              }else{
                echo '
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      '.$wo_name.'
                    </a>

                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  ';
                foreach($sqlwso as $dropdown)
                  {
                    $wso_link  = $dropdown['websuboption_link'];
                    $wso_name  = $dropdown['websuboption_name'];

                    echo '                     
                        <li><a class="dropdown-item" href='.$wso_link.'>'.$wso_name.'</a></li>                                                    
                        ';
                  }
                    echo '
                      </ul>
                    </li>';
                }
            }          
        ?>
      </ul>

        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>

</nav>

8. Conclusiones y Referencias.

Conclusiones:

En este tutorial práctico creamos la base de datos y las respectivas tablas para el almacenamiento de los registros; asimismo, desarrollamos las páginas necesarias con relación al componente Navbar, finalmente implementamos los códigos necesarios para alimentar dinamicamente al componente Navbar.

Referencias:


Directorio 01demo-navbar

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