Ticker

6/recent/ticker-posts

Bootstrap: HTML section dinámico con PHP y MariaDB

Hadsonpar julio 30, 2023

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:

  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 section en una página web?
  2. Actualizar los valores de la tabla weboption.
  3. Crear la sections en la página index.php.
  4. Crear CSS para las sections.
  5. Conexión a base de datos bootstrap_demo.
  6. 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:


HTML con las sections agregadas:

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

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


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:



Directorio 08demo-section

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