En este tutorial práctico desarrollamos las sections dinámicas aplicando Bootstrap 5, PHP 8 y MariaDB; finalmente ejecutaremos la aplicación sobre el servidor de aplicaciones Apache. Recordemos que es tutorial es parte de la serie de tutoriales con relación a los componente que nos ofrece Bootstrap 5.
Requisitos:
- XAMPP v3.3.0.
- PHP 8 y Bootstrap 5.
- MariaDB y PHPMyAdmin.
- Visual Studio Code.
Lo que veremos en este tutorial:
- ¿Qué es section en una página web?
- Actualizar los valores de la tabla weboption.
- Crear la sections en la página index.php.
- Crear CSS para las sections.
- Conexión a base de datos bootstrap_demo.
- Conclusiones y Referencias.
1. ¿Qué es section en una página web?
El elemento de HTML section (<section>) representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema, el esquema es como el índice de contenido de un libro; un tema en particular y subsecciones relacionadas; su principal funcionalidad es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Fuente: MDN Web Docs community.
2. Actualizar los valores de la tabla weboption.
Remplazar los valores de Portfolio por Products en los campos weboption_link y weboption_name en la tabla weboption:
1 2 | UPDATE `weboption` SET `weboption_link` = 'product' WHERE `weboption`.`weboption_id` = 4; UPDATE `weboption` SET `weboption_name` = 'Products' WHERE `weboption`.`weboption_id` = 4; |
3. Crear la sections en la página index.php.
Creamos las sections home, services, about, product y courses en la página 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 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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 | <section id="home"> <!-- 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 --> <!-- Aplicamos el filtro de "a.pagesettings_id = 1" a nuestra sentencia SQL con la finalidad de filtrar el registro correspodiente a 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 and a.pagesettings_id = 1"); /*nuevo filtro*/ if(mysqli_num_rows($sql) > 0){ 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 componente carousel --> </section> <section id="services"> <!-- Inicio de la maquetación para el componente placeholder --> <!-- El placeholder es parte de otro container con la finalidad de centrar el contenido--> <div class="container marketing"> <!-- Tres columnas para el componente placeholder --> <div class="row"> <!-- Inicio del script para construir dinamicamente el Componente placeholder --> <?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 and a.pagesettings_id = 2"); /*filtrar los valores del placeholder*/ if(mysqli_num_rows($sql) > 0){ while($row = mysqli_fetch_assoc($sql)){ echo ' <div class="col-lg-4"> <img class="bd-placeholder-img" width="140" height="140" src='.$row['websection_image_url'].' class="d-block w-100" alt="welcome learning bootstrap"> <h2>'.$row['websection_title'].'</h2> <p>'.$row['websection_subtitle'].'</p> <p><a class="btn btn-secondary" href='.$row['websection_button_url'].'>'.$row['websection_button_text'].'</a></p> </div> '; } } ?> <!-- Finl de la construcción del script para alimentar el Componente placeholder --> </div><!-- /.row --> </div> </section> <section id="about"> <div class="container-fluid"> <!-- Inicio de la maquetación para el componente jumbotron --> <?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="title-home"> <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>'; } ?> <!-- Fin de la maquetación para el componente jumbotron --> </div> </section> <section id="product"> <!-- Inicio de la maquetación para el componente accordion --> <div class="container-fluid"> <?php /* Script SQL para recuperar los registro y listar los valores para alimentar dinámicamente a los accordion */ $sqljp = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 4 and active = 1"); foreach($sqljp as $jp) { $jp_name = $jp['pagesettings_name']; $jp_details = $jp['pagesettings_details']; echo ' <div class="title-home"> <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 = 4 and b.websection_id = 15 ORDER BY b.websection_id"); echo ' <div class="row align-items-md-stretch"> <div class="col-md-6"> <div class="h-100 p-5 bg-light border rounded-3"> <div class="row accordion-price">'; foreach($sqlh as $jph) { echo ' <div class="col-sm-4"> <img src='.$jph['websection_image_url'].' class="d-block w-100" alt="accordion bootstrap"> </div> <div class="col-sm-8"> <h1>'.$jph['websection_title'].'</h1> <p>'.$jph['websection_subtitle'].'</p> <p><a class="btn btn btn-primary" href='.$jph['websection_button_url'].'>'.$jph['websection_button_text'].'</a></p> </div> '; } echo '</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_text_one, b.websection_text_two FROM pagesettings a INNER JOIN websection b ON a.pagesettings_id = b.pagesettings_id WHERE a.active = 1 and a.pagesettings_id = 4 and b.websection_id != 15 ORDER BY b.websection_id"); echo ' <div class="col-md-6 accordion-faq"> <div class="h-100 rounded-3"> <div class="accordion" id="accordionEcommerce"> <div class="accordion-item">'; foreach($sqlhy as $jphy) { echo ' <h2 class="accordion-header" id='.$jphy['websection_text_one'].'> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=#'.$jphy['websection_text_two'].' aria-expanded="true" aria-controls='.$jphy['websection_text_two'].'> '.$jphy['websection_title'].' </button> </h2>'; if($jphy['websection_text_two'] == 'collapseOne'){ echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse show" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">'; }elseif($jphy['websection_text_two'] != 'collapseOne'){ echo '<div id='.$jphy['websection_text_two'].' class="accordion-collapse collapse" aria-labelledby='.$jphy['websection_text_one'].' data-bs-parent="#accordionEcommerce">'; } echo ' <div class="accordion-body"> <p>'.$jphy['websection_subtitle'].'</p> </div> </div>'; } echo ' </div> </div> </div> </div> </div>'; } ?> </div> <!-- Fin de la maquetación para el componente accordion --> </section> <section id="courses"> <!-- Inicio de la maquetación para el componente list-group" --> <div class="container"> <?php $sqllg = mysqli_query($con, "SELECT * FROM pagesettings WHERE pagesettings_id = 5 AND active = 1"); foreach($sqllg as $lg) { $lg_name = $lg['pagesettings_name']; $lg_details = $lg['pagesettings_details']; echo ' <div class="title-home"> <div class="text-center p-5"> <h2>'.$lg_name.'</h2> <p>'.$lg_details.'</p> </div> </div>'; $sqllgy = mysqli_query($con, "SELECT weblistgroup_name, weblistgroup_link, weblistgroup_title FROM weblistgroup WHERE pagesettings_id = 5"); echo ' <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist">'; foreach ($sqllgy as $lgy) { if($lgy['weblistgroup_name'] == 'list-home-list'){ echo '<a class="list-group-item list-group-item-action active" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; }else{ echo '<a class="list-group-item list-group-item-action" id='.$lgy['weblistgroup_name'].' data-bs-toggle="list" href=#'.$lgy['weblistgroup_link'].' role="tab" aria-controls="list-home">'.$lgy['weblistgroup_title'].'</a>'; } } echo ' </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent">'; $sqllgz = mysqli_query($con, "SELECT a.weblistgroup_name, a.weblistgroup_link, a.pagesettings_id, b.weblistgroupdetails_id, b.weblistgroup_id, b.websection_id, c.websection_name, c.websection_title, c.websection_subtitle, c.websection_image_url, c.websection_button_url, c.websection_button_text FROM weblistgroup a INNER JOIN weblistgroupdetails b ON a.weblistgroup_id = b.weblistgroup_id INNER JOIN websection c ON b.websection_id = c.websection_id WHERE b.active = 1 and a.pagesettings_id = 5"); foreach($sqllgz as $lgz){ if($lgz['weblistgroup_name'] == 'list-home-list'){ echo '<div class="tab-pane fade show active" id='.$lgz['weblistgroup_link'].' role="tabpanel" aria-labelledby='.$lgz['weblistgroup_name'].'>'; }else{ echo '<div class="tab-pane fade" id='.$lgz['weblistgroup_link'].' role="tabpanel" aria-labelledby='.$lgz['weblistgroup_name'].'>'; } echo ' <h3>'.$lgz['websection_title'].'</h3> <p>'.$lgz['websection_subtitle'].'</p> <div class="text-button"> <a href='.$lgz['websection_button_url'].'>'.$lgz['websection_button_text'].'</a> </div> </div>'; } echo ' </div> </div> </div>'; } ?> </div> <!-- Fin de la maquetación para el componente list-group" --> </section> |
4. Crear CSS para las sections.
Elaborar el siguiente bloque de CSS en el archivo style.css, el estilo proporcionado brinda una separación de 100px entre secciones:
1
2
3
4
section {
padding: 0 0 100px 0;
overflow: hidden;
}
1 2 3 4 | section { padding: 0 0 100px 0; overflow: hidden; } |
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 = ''; } ?> |
6. Conclusiones y Referencias.
Conclusiones:
En este tutorial práctico actualizamos valores en la tabla weboption; asimismo, eleboramos las secciones desde el HTML en la página index.php, finalmente los valores de las secciones hace math con los valores de la base de datos bootstrap_demo.
Referencias:
- Section - MDN Web Docs community
- <section>: The Generic Section element - MDN Web Docs community
- Dar estilo a los enlaces - MDN Web Docs community
- Get started with Bootstrap5
- Examples with Bootstrap5
- MariaDB Documentation
- PHP Documentation
Directorio 08demo-section
Gracias nuevamente 😊 comentarios y apreciaciones son bienvenido, un fuerte abrazo para todos ✌...!!!
0 Comentarios