Portada » Descargas y ejemplos PHP » Cargar datos de MySQL en Modal Bootstrap PHP

Cargar datos de MySQL en Modal Bootstrap PHP

5
(1)
  • Versión
  • Descargar 19
  • Tamaño del archivo 3.77 KB
  • Recuento de archivos 1
  • Fecha de creación 30 enero, 2024
  • Última actualización 30 enero, 2024

Cargar datos de MySQL en Modal Bootstrap PHP. Por defecto una ventana modal nos muestra información tanto imágenes como textos, pero en este articulo cargaremos datos de MySQL.

Las ventanas modales es uno de los complementos web de mayor uso y está enfocado al desarrollo en front-end Bootstrap 5 y es ampliamente utilizado.

Los desarrolladores y/o programadores pueden mostrar información por encima de una página web mediante el uso de cuadros de diálogo o ventanas modales.

Poblar modal con información de MySQL
Poblar modal con información de MySQL

Cargar información de MySQL a una ventana Modal

Existe ocasiones en las que es necesario cargar contenido dinámicamente en un Modal. Por lo tanto, es posible mediante el uso de AJAX.

A continuación, mostraré cómo cargar dinámicamente el contenido de la base de datos MySQL en un modal Bootstrap 5, haciendo uso de AJAX y en lenguaje PHP.

Estructura de la tabla MySQL

Crearemos una base de datos llamado dbpersonal y una tabla llamada tbl_personal usando la siguiente consulta SQL que debemos de ejecutar en la base de datos.

CREATE TABLE `tbl_personal` (
`id` int(11) NOT NULL,
`per_nombre` varchar(100) NOT NULL,
`salario` varchar(50) NOT NULL,
`genero` varchar(10) NOT NULL,
`ciudad` varchar(80) NOT NULL,
`email` varchar(100) NOT NULL,
`fecha_creacion` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- Volcado de datos para la tabla `tbl_personal`

INSERT INTO `tbl_personal` (`id`, `per_nombre`, `salario`, `genero`, `ciudad`, `email`, `fecha_creacion`) VALUES
(1, 'Juan Soto', '30000', 'masculino', 'Santiago', 'juan@web.com', '2024-01-29 20:55:02'),
(2, 'Pedro Flores', '28000', 'masculino', 'Quito', 'pedro@web.com', '2024-01-29 20:55:07'),
(3, 'Vicente Lee', '35000', 'masculino', 'Rio', 'vicente@web.com', '2024-01-29 20:55:13'),
(4, 'Lucia Carrisalles', '25000', 'femenino', 'Bogota', 'Lucia@web.com', '2024-01-29 20:55:18'),
(5, 'Danika Fijan', '50000', 'femenino', 'Lima', 'danika@web.com', '2024-01-29 20:55:25'),
(6, 'Baihon Jav', '48000', 'masculino', 'La Paz', 'baihon@web.com', '2024-01-29 20:55:32'),
(7, 'Maria Dann', '36000', 'femenino', 'Asuncion', 'maria@web.com', '2024-01-29 20:55:37'),
(13, 'Miluska Caki', '43000', 'femenino', 'Montevideo', 'miluska@web.com', '2024-01-29 20:55:43');

-- Indices de la tabla `tbl_personal`

ALTER TABLE `tbl_personal`
ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT de la tabla `tbl_personal`

ALTER TABLE `tbl_personal`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

Configuración y conexión MySQL

Para conectar el script desde PHP a MySQL usaremos el método PDO y nos apoyamos con unas variables que servirán como datos en la conexión. Además, crearemos un archivo db.php para la conexión de la base de datos.

Código completado

<?php
$host = "localhost"; /* Host */
$usuario = "root"; /* Usuario MySQL */
$password = "root"; /* Password MySQL*/
$dbname = "dbpersonal"; /* Database */

$db = new PDO('mysql:host='.$host.';dbname='.$dbname.'', $usuario, $password);
?>

HTML: Crear diseño modal y de tabla HTML

En el fichero index.php vamos a crear un modal en la versión Bootstrap 5 para mostrar información del personal que esta almacenada en MySQL. Sin embargo, el cuerpo modal está vacío, los datos se completarán usando jQuery AJAX.

Listaremos los registros de la tabla de personal en formato de lista. Sin embargo, agregaremos un botón de información que tiene una clase de información del personal y demás datos que están almacenada en el atributo de identificación de datos.

Por último, haga clic en el botón detalles para cargar contenido en un modal usando AJAX PHP y MySQL.

Código completado

<?php
include_once("db.php");
?>
<!doctype html>
<html>
<head>
<title>Cargar modal dinamico con Ajax PHP</title>

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Script -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body >
<div class="container mt-4">
<div class="card">
<div class="card-header"> Cargar modal dinámico con Ajax PHP </div>
<div class="card-body">
<table style='border-collapse: collapse;' class='table table-hover'>
<thead class="table-primary">
<tr>
<th>Nombre</th>
<th>Genero</th>
<th>Email</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php
$query = $db->prepare("SELECT * FROM `tbl_personal`");
$query->execute();
$data = $query->fetchAll();

foreach($data as $row){
$id = $row['id'];
$nombre = $row['per_nombre'];
$genero = $row['genero'];
$email = $row['email'];

echo "<tr>";
echo "<td>".$nombre."</td>";
echo "<td>".$genero."</td>";
echo "<td>".$email."</td>";
echo "<td><button class='btn btn-primary perinfo' data-id='".$id."'>Detalles</button></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('.perinfo').click(function(){
var perid = $(this).data('id');
// AJAX solicitud
$.ajax({
url: 'ajxfile.php',
type: 'post',
data: {perid: perid},
success: function(response){
$('.modal-body').html(response);
// Cargamos el Modal dinamico
$('#perModal').modal('show');
}
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="perModal" >
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Detalles de Personal</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

AJAX: Devolver datos en modal de Bootstrap

  • Usaremos un archivo con el archivo de ajxfile.php.
  • Este fichero leerá el valor de ID de usuario POST y asigna a la variable $perid.
  • Esta variable será usada en la consulta SQL y mostrará un registro de la tabla de empleados donde id=$perid.
  • Los datos obtenidos serán almacenadas en una variable llamado $mydata
  • Luego programaremos el diseño de una tabla HTML con los datos de MySQL.

Código completado

<?php
include_once("db.php");

$perid = 0;
if(isset($_POST['perid'])){
$perid = htmlentities($_POST['perid']);
}

$query = $db->prepare("SELECT * FROM `tbl_personal` WHERE id = :id");
$query->bindParam(":id", $perid);
$query->execute();
$data = $query->fetchAll();

$mydata = "<table class='table table-hover' width='100%'>";
foreach($data as $row){
$id = $row['id'];
$per_nombre = $row['per_nombre'];
$salario = $row['salario'];
$genero = $row['genero'];
$ciudad = $row['ciudad'];
$email = $row['email'];
$fecha = $row['fecha_creacion'];

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Nombres : </th><td>".$per_nombre."</td>";
$mydata .= "</tr>";

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Salario : </th><td>".$salario."</td>";
$mydata .= "</tr>";

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Genero : </th><td>".$genero."</td>";
$mydata .= "</tr>";

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Ciudad : </th><td>".$ciudad."</td>";
$mydata .= "</tr>";

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Email : </th><td>".$email."</td>";
$mydata .= "</tr>";

$mydata .= "<tr>";
$mydata .= "<th scope='row'>Fecha : </th><td>".$fecha."</td>";
$mydata .= "</tr>";

}
$mydata .= "</table>";

echo $mydata;
exit;

jQuery: Estructura AJAX para cargar contenido dinámicamente

Hay que definir el evento clic en la clase de nombre perinfo.
Leerá el valor del atributo de identificación de datos y asígnelo a la variable de identificación de personal.

Envíe la solicitud POST AJAX al archivo ajxfile.php.
En caso de devolución de llamada exitosa, agregue la respuesta en .modal-body y muestre el método show de llamada modal.

Código completado

<script type='text/javascript'>
$(document).ready(function(){
$('.perinfo').click(function(){
var perid = $(this).data('id');
// AJAX solicitud
$.ajax({
url: 'ajxfile.php',
type: 'post',
data: {perid: perid},
success: function(response){
$('.modal-body').html(response);
// Cargamos el Modal dinamico
$('#perModal').modal('show');
}
});
});
});
</script>

Conclusión cargar datos MySQL con Modal

Utilice AJAX cuando desee utilizar un único Modal Bootstrap para mostrar información de acuerdo con varias solicitudes; de lo contrario, simplemente puede crear múltiples Modales con información para cada tarea.

Este ejemplo solo usaremos un modal para mostrar información de cada personal existente en la base de datos MySQL.
Hemos usado la última versión de jQuery y para las consultas SQL PDO que nos da mayor seguridad.


Descargar

¿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 una respuesta

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