Eliminar registros de MySQL con la ventana Modal

Eliminar registros de MySQL con la ventana Modal. En este artículo vamos a ver cómo eliminar registros de una tabla de MySQL en forma dinámica. La eliminación de registros es un proceso muy común en los sistemas CRUD de cualquier lenguaje de programación.

Ahora, lo haremos a través de una ventana de confirmación de Modal jQuery JavaScript.

Eliminar registros de MySQL con la ventana Modal

Si estás utilizando bootstrap en tus proyectos web y estás interesado en validar tus eliminaciones en un CRUD, esto va para tí.

¿Cómo funciona este sistema?

Al cargar la página principal nos mostrara una lista de registros con su respectiva paginación, estos registros son extraídos desde una base de datos existente. Al presionar el botón Borrar nos aparece una ventana modal con dos opciones con el título «eliminar registro».

• La primera nos dice cancelar, si presionamos dicho botón la ventana se cerrara y no se realizara ninguna acción.
• Caso contrario, si presiono el» borrar cliente» se cerrara la ventana y el registro se eliminara de la base de datos y nos mostrara la ventana principal informándonos que el registro ha sido eliminado correctamente.

Estructura del sistema

Contenido de BD

Aquí tienes un ejemplo de una tabla de nombre «php_clientes». La tabla se llamara «usuarios», pueden gestionarla mediante el PHPMyAdmin.

CREATE TABLE IF NOT EXISTS `usuarios` (
`id` int(11) NOT NULL,
  `nombres` varchar(250) DEFAULT NULL,
  `email` varchar(250) DEFAULT NULL,
  `creado` datetime DEFAULT NULL,
  `modificado` datetime DEFAULT NULL
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

--
-- Volcado de datos para la tabla `usuarios`
--

INSERT INTO `usuarios` (`id`, `nombres`, `email`, `creado`, `modificado`) VALUES
(1, 'Juan Carlos', 'juan1@www.baulphp.com', '2018-05-01 22:35:47', '2018-05-02 08:50:26'),
(2, 'Jose Miguel', 'jose1@www.baulphp.com', '2018-05-01 22:37:15', NULL),
(4, 'Luis Fonsi', 'luis2@www.baulphp.com', '2018-05-01 22:41:21', NULL),
(5, 'Augusto Soria', 'augusto2@www.baulphp.com', '2018-05-01 22:42:49', NULL),
(6, 'Miguel Angel', 'miguel2@www.baulphp.com', '2018-05-01 22:48:27', NULL),
(7, 'Manuel', 'elfarid@www.baulphp.com', '2018-05-02 11:18:13', NULL);

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `usuarios`
--
ALTER TABLE `usuarios`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de la tabla `usuarios`
--
ALTER TABLE `usuarios`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=8;

Listar datos de la tabla MySQL

Aquí puedes ver el código para mostrar la información de la tabla usuarios. Podemos, extraerlos desde una clausula select en PHP.

$result_usuarios = "SELECT * FROM usuarios LIMIT $inicio, $qnt_result_pg";
$resultado_usuarios = mysqli_query($conectar, $result_usuarios);
while($row_usuario = mysqli_fetch_assoc($resultado_usuarios)){
	echo "ID: " . $row_usuario['id'] . "<br>";
	echo "Nombres: " . $row_usuario['nombres'] . "<br>";
	echo "E-mail: " . $row_usuario['email'] . "<br>";
	echo "<a style='margin:3px' class='btn btn-primary' href='editar_usuario.php?id=" . $row_usuario['id'] . "'>Editar</a>";
	echo "<a style='margin:3px' class='btn btn-primary' href='proceso_borrar_usuario.php?id=" . $row_usuario['id'] . "' data-confirm='¿Está seguro de que desea eliminar el elemento seleccionado?'>Borrar</a><hr>";
}

Ventana de confirmación

Usaremos el lenguaje jQuery para realziar esta tarea.

$(document).ready(function(){
	$('a[data-confirm]').click(function(ev){
		var href = $(this).attr('href');
		if(!$('#confirm-delete').length){
			$('body').append('<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header bg-danger text-white">ELIMINAR REGISTRO<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">¿Está seguro de que desea eliminar el elemento seleccionado?</div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button><a class="btn btn-danger text-white" id="dataComfirmOK">Borrar cliente</a></div></div></div></div>');
		}
		$('#dataComfirmOK').attr('href', href);
        $('#confirm-delete').modal({show: true});
		return false;
		
	});
});

proceso_borrar_usuario.php

Este archivo será ejecutado de manera oculta en el sistema.

$id = filter_input(INPUT_GET, 'id', FILTER_SANITIZE_NUMBER_INT);
if(!empty($id)){
	$result_usuario = "DELETE FROM usuarios WHERE id='$id'";
	$resultado_usuario = mysqli_query($conectar, $result_usuario);
	if(mysqli_affected_rows($conectar)){
		$_SESSION['msg'] = "<p style='color:green;'>Cliente borrado con exito</p>";
		header("Location: index.php");
	}else{
		
		$_SESSION['msg'] = "<p style='color:red;'>Error al borrar cliente</p>";
		header("Location: index.php");
	}
}else{	
	$_SESSION['msg'] = "<p style='color:red;'>Es necesario seleccionar un cliente</p>";
	header("Location: index.php");
}

CONCLUSIÓN

Si estamos desarrollando un sistema web es imprescindible el uso de ventanas modales ya sea para editar, insertar y/o editar registros. La utilización de esta modalidad es muy recomendada por muchos expertos en la materia.

La era de los popup HTML va desapareciendo paulatinamente y si tienes un sistema con POPUP-HTML es momento de migrar a esta nueva interfaz.

Por lo tanto, les dejare este sistema comprimido para que lo implementen en sus proyectos web.

DESCARGA