Ticker

6/recent/ticker-posts

Bootstrap: Footer dinámico con PHP y MariaDB

Hadsonpar julio 19, 2023


En este tutorial práctico desarrollamos el footer dinámico 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 Footer en una página web?
  2. Crear las principales tablas.
  3. Insertar los principales registros.
  4. Script HTML para Footer.
  5. Conexión a base de datos bootstrap_demo.
  6. Script PHP para implementar el Footer dinámico.
  7. Conclusiones y Referencias.


1. ¿Qué es Footer en una página web?

El footer o pie de página es la sección que contiene algunos de los elementos más importantes de una página web con la finalidad de comunicar el branding de la empresa, normalmente incluye una serie de elementos que pueden resultar de interés para el usuario que navega por la página web, como enlaces a las categorías principales, información de contacto, redes sociales o enlaces a textos legales.

2. Crear las principales tablas.

Crear nuevas tablas para el almacenamiento de los registros del footer de la página web:

 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
CREATE TABLE webfooter
(
    webfooter_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    webfooter_title VARCHAR(100) NOT NULL,    
    webfooter_details TEXT NOT NULL DEFAULT 'details list group',
    webfooter_name VARCHAR(100) NOT NULL,    
    webfooter_icon VARCHAR(200) NULL,
    webfooter_link TEXT NULL,    
    pagesettings_id INT(11) NOT NULL   
) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8;

ALTER TABLE webfooter ADD CONSTRAINT `webfooter_fk`
    FOREIGN KEY (pagesettings_id) REFERENCES pagesettings (pagesettings_id);

CREATE TABLE webnewsletter
(
    webnewsletter_id INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    email VARCHAR(100) NOT NULL,
    firstname VARCHAR(100) NULL,
    lastname 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   
) ENGINE = InnoDB DEFAULT CHARACTER SET = utf8;

ALTER TABLE webnewsletter ADD CONSTRAINT `webnewsletter_fk`
    FOREIGN KEY (pagesettings_id) REFERENCES pagesettings (pagesettings_id);

ALTER TABLE webfooter ADD active TINYINT(1) DEFAULT 1 AFTER webfooter_link;
ALTER TABLE webfooter MODIFY COLUMN webfooter_name TEXT;

3. Insertar los principales registros.

Ingresar nuevo registro para la configuración del footer de la página web:

1
2
INSERT INTO `pagesettings` (`pagesettings_name`, `pagesettings_details`, `active`, `creation_date`, `creation_user`) 
VALUES ('Footer', 'details page footer', '1', current_timestamp(), '1');

Ingresar registro para el footer de la página web:

 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
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Acerca del curso', 'Resource about learning development of Web Application with Bootstrap for front-end, PHP 8 for back-end and MariaDB for the database.', NULL, 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Contacto', 'Lima PE', NULL, 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Contacto', '999999999', NULL, 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Contacto', 'info@correo.com', NULL, 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Servicios', 'Web Development', 'pages/web-development', 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Servicios', 'Mobile Development', 'pages/mobile-development', 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Servicios', 'IT Consulting', 'pages/it-consulting', 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('Suscríbete a nuestro boletín', 'Mantente infronado acerca nuestros próximos cursos', NULL, 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('socialnetworks', 'facebook', 'https://www.facebook.com/hadsonpar', 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('socialnetworks', 'twitter', 'https://twitter.com/hadson_paredes', 6);
INSERT INTO `webfooter` (`webfooter_title`, `webfooter_name`, `webfooter_link`, `pagesettings_id`) 
VALUES ('socialnetworks', 'github', 'https://github.com/Hadsonpar/LearningPHPBootstrap', 6);

UPDATE `webfooter` SET `webfooter_title` = 'subscribe' WHERE `webfooter`.`webfooter_id` = 11;
UPDATE `webfooter` SET `webfooter_details` = 'Suscríbete a nuestro boletín' WHERE `webfooter`.`webfooter_id` = 11;


4. Script HTML para Footer.

El footer de la página en construcción estará conformado por 4 bloques o secciones como Acerca del curso, Servicios, Contacto y Suscripción, aplicar los siguientes cambios en la pagina footer.php:



Maquetación HTML en la página footer.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
<div class="container">
  <footer class="py-5">

    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <div class="row">

        <div class="col-lg-4">
          <h5>Acerca del curso</h5>
          <p>Resource about learning development of Web Application with Bootstrap for front-end, PHP 8 for back-end and MariaDB for the database.</p>            
        </div>

        <div class="col-lg-2">            
          <h5>Contacto</h5>
          <ul class="nav flex-column">
            <li class="nav-item mb-2"><svg class="bi" width="16" height="16"><use xlink:href="#geo-alt"/></svg> Lima PE</li>
            <li class="nav-item mb-2"><svg class="bi" width="16" height="16"><use xlink:href="#at"/></svg> 999999999</li>
            <li class="nav-item mb-2"><svg class="bi" width="16" height="16"><use xlink:href="#telephone"/></svg> info@correo.com</li>
          </ul>
        </div>

        <div style="color: white;" class="col-lg-2">            
          <h5>Servicios</h5>
          
            <ul class="nav flex-column">
              <li class="nav-item mb-2"><a href="#" class="footer-services">Web Development</a></li>
              <li class="nav-item mb-2"><a href="#" class="footer-services">Mobile Development</a></li>
              <li class="nav-item mb-2"><a href="#" class="footer-services">IT Consulting</a></li>
            </ul>
          
        </div>

        <div class="col-lg-4">            
          <form>
            <h5>Suscríbete a nuestro boletín</h5>
            <p>Mantente infronado acerca nuestros próximos cursos</p>
            <div class="d-flex flex-column flex-sm-row w-100 gap-2">
              <label for="newsletter1" class="visually-hidden">Email address</label>
              <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
              <button class="btn btn-primary" type="button">Subscribe</button>
            </div>
          </form>
        </div>

      </div>
    </div>
    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <p>&copy; 2022 Hadsonpar, Inc. All rights reserved.</p>
      <ul class="list-unstyled d-flex">
        <li class="ms-3"><a href="https://twitter.com/hadson_paredes"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
        <li class="ms-3"><a href="https://github.com/Hadsonpar/LearningPHPBootstrap"><svg class="bi" width="24" height="24"><use xlink:href="#github"/></svg></a></li>
        <li class="ms-3"><a href="https://www.facebook.com/hadsonpar"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
      </ul>
    </div>

  </footer>
</div>

<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

Elaborar el siguiente bloque de CSS en el archivo style.css, seguidamente agregar los iconos geo-alt, at y telephone en el archivo iconsm.php, y finalmente referenciar el estilo en la página index.php:

Bloque de CSS en el archivo style.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.newsletter {
  color: white;
  background: #000064;  /* old browsers fallback color*/
  background: -webkit-linear-gradient(to right, #1BADD8, #4B1184);  
  background: linear-gradient(to right, #1BADD8, #4B1184); 
}

.newsletter a {
  color: white;
}

.footer-services{
  text-decoration: none;
}

Agregar iconos en el archivo iconsm.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
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="bootstrap" viewBox="0 0 118 94">
        <title>Bootstrap</title>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
      </symbol>
      <symbol id="facebook" viewBox="0 0 16 16">
        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
      </symbol>
      <symbol id="instagram" viewBox="0 0 16 16">
          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
      </symbol>
      <symbol id="twitter" viewBox="0 0 16 16">
        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
      </symbol>
      <symbol id="github" viewBox="0 0 16 16">
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
      </symbol>
      <symbol id="geo-alt" viewBox="0 0 16 16">
        <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>  
      </symbol>
      <symbol id="at" viewBox="0 0 16 16">
        <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"/>
      </symbol>
      <symbol id="telephone" viewBox="0 0 16 16">
        <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
      </symbol>
    </svg>

Referenciar el estilo en la página index.php:

1
2
3
4
      <div class="newsletter">        
          <!--  Bloque donde se incluye el footer de la página web o sitio web-->
          <?php include 'shared/footer.php'; ?>        
      </div>';


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


5. Script PHP para implementar el Footer dinámico.

  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
<div class="container">
  <footer class="py-5">    

        <?php

          $sql  = mysqli_query($con, "SELECT b.webfooter_id, b.webfooter_title, b.webfooter_name
                                      FROM pagesettings a INNER JOIN webfooter b ON a.pagesettings_id = b.pagesettings_id 
                                      WHERE a.pagesettings_id = 6 and a.active = 1 ORDER BY b.webfooter_id ASC");

          echo '
            <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
              <div class="row">';

          foreach($sql as $jp)
            {
                $jp_id        = $jp['webfooter_id'];                
                $jp_title     = $jp['webfooter_title'];              
                $jp_footername= $jp['webfooter_name'];

                if($jp_id == 4){
                  echo '
                  <div class="col-lg-4">
                    <h5>'.$jp_title.'</h5>
                    <p>'.$jp_footername.'</p>            
                  </div>
                  ';
                }
            }
        ?>

       <?php
          
          $sql  = mysqli_query($con, "SELECT a.pagesettings_name, b.webfooter_id, b.webfooter_title, b.webfooter_details, 
                                             b.webfooter_name, b.webfooter_icon, b.webfooter_link
                                      FROM pagesettings a INNER JOIN webfooter b ON a.pagesettings_id = b.pagesettings_id 
                                      WHERE a.pagesettings_id = 6 and a.active = 1 ORDER BY b.webfooter_id ASC");

          echo '<div class="col-lg-2">            
                      <h5>Contacto</h5>';
          foreach($sql as $jp)
            {             
                $jp_title     = $jp['webfooter_title'];
                $jp_icon      = $jp['webfooter_icon'];
                $jp_footername= $jp['webfooter_name'];

                if($jp_title == 'Contacto'){
                  echo '                    
                      <ul class="nav flex-column">
                        <li class="nav-item mb-2"><svg class="bi" width="16" height="16">'.$jp_icon.'</svg> '.$jp_footername.'</li>
                      </ul>';
                }
            }
          echo '  
                </div>';

          echo '<div style="color: white;" class="col-lg-2">            
                      <h5>Servicios</h5>';
          foreach($sql as $jp)
            {             
                $jp_title     = $jp['webfooter_title'];
                $jp_icon      = $jp['webfooter_icon'];
                $jp_footername= $jp['webfooter_name'];
                $jp_link      = $jp['webfooter_link'];

                if($jp_title == 'Servicios'){
                  echo '                    
                      <ul class="nav flex-column">                        
                        <li class="nav-item mb-2"><a href='.$jp_link.' class="footer-services">'.$jp_footername.'</a></li>
                      </ul>';
                }
            }
          echo '  
                </div>';
          
          echo '
            <div class="col-lg-4">            
              <form>';
          foreach($sql as $jp)
            {             
                $jp_title     = $jp['webfooter_title'];
                $jp_footername= $jp['webfooter_name'];
                $jp_details   = $jp['webfooter_details'];

                if($jp_title == 'subscribe'){
                  echo '                    
                    <h5>'.$jp_details.'</h5>
                    <p>'.$jp_footername.'</p>
                    <div class="d-flex flex-column flex-sm-row w-100 gap-2">
                      <label for="newsletter1" class="visually-hidden">Email address</label>
                      <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
                      <button class="btn btn-primary" type="button">Subscribe</button>
                    </div>';
                }
            }
          echo '  
              </form>
            </div>
          </div>
        </div>';
        ?>
  
    <?php echo '
    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <p>&copy; 2022 Hadsonpar, Inc. All rights reserved.</p>
      <ul class="list-unstyled d-flex">';

        $sql = mysqli_query($con, "SELECT webfooter_link, webfooter_icon FROM `webfooter` WHERE webfooter_title = 'socialnetworks' AND pagesettings_id = 6");



       foreach($sql as $row)
        {  
          echo '
            <li class="ms-3"><a href='.$row['webfooter_link'].'><svg class="bi" width="24" height="24">'.$row['webfooter_icon'].'</svg></a></li>
          ';
        }  
    echo '
      </ul>
    </div>';
    ?>   
  </footer>
</div>

<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

6. Conclusiones y Referencias.

Conclusiones:

En este tutorial práctico creamos las tablas y script necesarios para el registro del footer; asimismo, desarrollamos los bloques de código HTML necesarias, finalmente implementamos el código PHP para construir dinámicamente las seccions de footer teniendo encuenta a conexión existente a la base de datos bootstrap_demo.

Referencias:


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