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:
- XAMPP v3.3.0.
- PHP 8 y Bootstrap 5.
- MariaDB y PHPMyAdmin.
- Visual Studio Code.
Lo que veremos en este tutorial:
- ¿Qué es Navbar en Bootstrap 5?
- Crear la Base de Datos.
- Crear las principales tablas.
- Insertar registros principales.
- Página Index con Navbar.
- Conexión a base de datos.
- Script PHP para Navbar dinámico .
- 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.
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'); |
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); |
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.
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 »</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>
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 »</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 = '';
}
?>
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>
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:
- Components Navbar Bootstrap5
- Get started with Bootstrap5
- Examples with Bootstrap5
- MariaDB Documentation
- PHP Documentation
0 Comentarios