Portada » JQuery biblioteca de JavaScript » Cargando contenido modal PHP, MySQL y jQuery

Cargando contenido modal PHP, MySQL y jQuery

Cargando contenido modal PHP, MySQL y jQuery. La ventana modal que se usa en sistemas web y/o páginas web se puede mostrar de varias formas utilizando jQuery, bootstrap y otros métodos.

En este artículo, vamos a utilizar el modal de bootstrap que cargaran información dinámica de la base de datos usando el potente lenguaje PHP.

El contenido estará almacenada en una tabla de base de datos llamada «php_contenidomodal.sql» que se recupera y se carga dinámicamente en el cuerpo de nuestro modal.

Cargando contenido modal PHP, MySQL y jQuery

Para este ejemplo usaremos cuatro botones para lanzar un modal con una imagen y una breve descripción. Sin embargo, esta información será extraída de la base de datos antes mencionada.

¿Cómo funciona este ejemplo?

Con la implementación de 4 botones que al presionar uno de ellos desencadenara el método de carga AJAX de jQuery (). Se ha especificado el nombre de archivo php «ObtenerDatos.php» utilizado para solicitar el contenido dinámico de la base de datos MySQL.

Por lo tanto, este método no refrescara la página por lo cual nos ahorrara el consumo de recursos del servidor.

Descargar Modal dinamico al presionar un boton
Descargar Modal dinamico al presionar un boton

¿Cómo puedo usar el sistema ventanas modales?

Puedes usarlo en varios aspectos para el correcto funcionamiento de tu sistema web.

Partes del ejemplo mostrar ventanas modales con BootStrap

  1. Fichero index.php

En este fichero declaramos el HTML que interviene  en el proceso para mostrar los botones.

      <!-- Contenido -->
      
      <div id="fondo">
<!-- Mostrando botones para mostrar al visitante -->
        <div class="mo-title">&nbsp;</div>
        <div onClick="loadDynamicContentModal('oracle')"
            class="btn btn-success">Oracle</div>
        <div onClick="loadDynamicContentModal('sql-server')"
            class="btn btn-info">SQL Server</div>
        <div onClick="loadDynamicContentModal('mysql')"
            class="btn btn-primary">MySQL</div>
        <div onClick="loadDynamicContentModal('postgresql')"
            class="btn btn-secondary">PostgreSQL</div>
      </div>        
    
      
      <div class="modal fade" id="bootstrap-modal" role="dialog">
        <div class="modal-dialog" role="document"> 
          <!-- Modal contenido-->
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Contenido modal dinámico Bootstrap</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
            </div>
            <div class="modal-body">
              <div id="conte-modal"></div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
    </div>

2. Fichero «ObtenerDatos.php»

Es el motor de la aplicación que se encarga de realizar la consulta para mostrar el nombre de la imagen y la descripción que se encuentra almacenada en la base de datos.

Resumiendo muestra todo el contenido que será mostrado en el modal.

<?php
// incluimos un controlador para la conexión
require ("DBController.php");
$dbController = new DBController();
// Consulta de la base de datos

$query = "SELECT * FROM modal_contenido WHERE Modal = '" . $_GET["my_modal"] . "'";
$result = $dbController->runQuery($query);
if(!empty($result)) 
{
?>
<!-- Rescatando las imagenes de la carpeta imagenes y obtenido el nombre de las imagenes -->
<img src='imagenes/<?php echo $result[0]["Img"]?>' />
<!-- Mostrando la descripción de la base de datos-->
<div class='modal-text'><?php echo $result[0]["Contenido_modal"]?></div>
<?php 
    }
?>

3. Archivo «DBController.php»

Encargado de la conexión con la base de datos usando MySQli.

La función jQuery para cargar contenido dinámico desde la base de datos

function loadDynamicContentModal(modal){
    var options = {
            modal: true,
            height:300,
            width:600
        };
// Realiza la consulta al fichero php para obtener información de la BD.
    $('#conte-modal').load('ObtenerDatos.php?my_modal='+modal, function() {
        $('#bootstrap-modal').modal({show:true});
    });    
}

Esta función jQuery se ejecutará, si el usuario le da click en el botón. Por lo tanto, la opción elegida por el usuario se envía al fichero php llamado «ObtenerDatos.php» para obtener los datos basándose en la categoría seleccionada.

El código php responde de manera precisa con la información al HTML que se cargará dinámicamente en una ventana modal BootStrap.

Cargando contenido modal PHP, MySQL y jQuery
Cargando contenido modal PHP, MySQL y jQuery

CONCLUSIÓN

La implementación de estas ventanas modales es muy importantes para tener un sistema moderno y sin problemas con los navegadores.

Se recomienda su uso y su implementación no es tan complicada, es más usaremos librerías externas  tipo CDN para no saturar nuestro servidor web.

Pensando en ello estamos compartiendo este ejemplo de Ventanas modales para todos ustedes.

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad