Eliminar registros con BootStrap Modal usando PHP & MySQL

Eliminar registros con BootStrap Modal usando PHP & MySQL. Si bien, podemos eliminar registros de una base de datos usando PHP y un vínculo de HTML. La problemática surge cuando el usuario presiona el vínculo eliminar y el registro se elimina inmediatamente sin darle opción a confirmar dicha eliminación.

Si bien hay alternativas para confirmar eliminación usando JavaScript pero en algunas ocasiones puede ser desactivado por los navegadores y esto genera inestabilidad en el sistema a la hora de procesar la información.

Con la llegada de la librería que da una interfaz profesional en las páginas web y/o sistemas web. Sin embargo, también podemos implementar sistemas de confirmación de eliminación de registros.

En este artículo aprenderemos cómo implementar los registros eliminar usando librería bootstrap «confirmar modal» con PHP y MySQL.

Así que aquí tenemos la funcionalidad de encubrimiento para mostrar registros con PHP y MySQL y luego manejar la eliminación de registros con bootstrap CONFIRM modal usando Bootbox bootstrap modal plugin.

Eliminar registros con BootStrap Modal usando PHP & MySQL

Ahora, veremos una serie de preguntas y respuestas acerca del sistema.

¿Qué recursos necesito implementar para eliminar registros con BOOTSTRAP?

Los recursos necesarios son los siguientes:

1. Lenguaje PHP
2. Librería BootStrap
3. jQuery

ESTRUCTURA DEL SISTEMA ELIMINACIÓN CON BOOTSTRAP

Así que vamos a empezar la codificación del sistema.

Paso 01: Crear base de datos MySQL y sus tablas

En el paquete de descarga que les dejare al final del articulo veremos un fichero llamado «db_empleados.sql» en el cual contiene la tabla y sus registros que son esenciales para este sistema. Sin embargo, hemos utilizado la tabla de base de datos «tbl_empleados» para mostrar los registros de empleados. Por lo tanto, aquí les dejare el código para la creación de la tabla y sus registros.

CREATE TABLE `tbl_empleados` (
  `id` int(11) NOT NULL COMMENT 'primary key',
  `nombres` varchar(255) NOT NULL COMMENT 'Nombre de Empleado',
  `cargo` varchar(200) DEFAULT NULL,
  `celular` varchar(200) DEFAULT NULL,
  `ciudad` varchar(200) DEFAULT NULL,
  `salario` double NOT NULL COMMENT 'Pago de empleado',
  `edad` int(11) NOT NULL COMMENT 'Edad de empleado'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla empleados' ROW_FORMAT=COMPACT;

-- Volcado de datos para la tabla `tbl_empleados`

INSERT INTO `tbl_empleados` (`id`, `nombres`, `cargo`, `celular`, `ciudad`, `salario`, `edad`) VALUES
(2, 'Jhon Winters', 'Administrativa', '005456235', 'Bogota', 1750, 35),
(3, 'Barbara Rixon', 'Administrativa', '005456238', 'Bogota', 6000, 28),
(4, 'Celine Jiron', 'Contable', '005456232', 'Bogota', 3060, 31),
(5, 'Carlos Browse', 'Contable', '005456298', 'Bogota', 2700, 33),
(6, 'Miguel Lutan', 'Sistemas', '005456452', 'Bogota', 2000, 41),
(7, 'Harry Velez', 'Sistemas', '005456142', 'Bogota', 7500, 45),
(8, 'Riana Platini', 'Ventas', '005456021', 'Bogota', 7900, 50),
(9, 'Carla Jires', 'Ventas', '005456345', 'Bogota', 5500, 37),
(10, 'Katia Hime', 'Ventas', '005456234', 'Bogota', 4500, 29);

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

ALTER TABLE `tbl_empleados`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key', AUTO_INCREMENT=11;

El código anterior, podemos importarlo al PHPMyAdmin siempre y cuando tengamos la base de datos creado y tenga el nombre «db_empleados«.

Paso 02: Crear conexión de base de datos MySQL

Lo importante es tener un fichero externo para crear la conexión con la base de datos y lo llamaremos «db_connect.php» para realizar una óptima conexión con la base de datos MySQL y PHP.

<?php
/* Códigos para la conexión con el servidor de base de datos */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db_empleados";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("La conexion ha fallado: " . mysqli_connect_error());
//Condicional para verificar algún error
if (mysqli_connect_errno()) {
    printf("La conexión ha fallado: %s\n", mysqli_connect_error());
    exit();
}
?>

Paso 03: Declarar librerías Bootstrap, jQuery y JavaScript

El fichero principal de este sistema escrito con PHP es «index.php«. Por lo tanto, en este fichero hemos declarado e incluido todos los archivos necesarios como ser: (bootstrap, jQuery y Bootbox plugin para confirmar modal) y archivos CSS para darle una interfaz profesional.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/bootbox.min.js"></script>
<script type="text/javascript" src="script/deleteRecords.js"></script>

Paso 04: Mostrar lista de registros de empleados

El fichero «index.php«, será el encargado de mostrar el resultado de la consulta MySQL. Por lo tanto, mostrara una tabla con los registros de todos los empleados existentes en la base de datos y desde esta tabla podremos eliminar registros.

<table class="table table-striped table-bordered">              
<thead>
<tr>
<th>#</th>
<th>Nombres</th>
<th>Cargo</th>
<th>Salario</th>
<th>Celular</th>
<th>Ciudad</th>
<th><i title="Eliminar Registro" class="glyphicon glyphicon-trash"></i></th>
</tr>
</thead>              
<tbody>           
<?php
$sql = "SELECT * FROM tbl_empleados LIMIT 7";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$num=0;
while( $rows = mysqli_fetch_assoc($resultset) ) { 
$num++;
?>
<tr>
<th scope="row"><?php echo $num; ?></th>    
<td><?php echo $rows["nombres"]; ?></td>
<td><?php echo $rows["cargo"]; ?></td>
<td><?php echo $rows["salario"]; ?></td>
<td><?php echo $rows["celular"]; ?></td>
<td><?php echo $rows["ciudad"]; ?></td>
<th scope="row">
<a class="delete_employee" data-emp-id="<?php echo $rows["id"]; ?>" href="javascript:void(0)">
<i class="glyphicon glyphicon-trash"></i>
</a></th>
</tr>
<?php
}
?>
</tbody>
</table>

Paso 05: Eliminar registros con jQuery Ajax

Este es el punto crítico y de ahí la creación del artículo. El fichero JavaScript llamado deleteRecords.js, nos encargaremos de hacer clic en ID de empleado, si el usuario pulsa en el botón eliminar, automáticamente aparecerá el cuadro de diálogo confirmar y realizara la solicitud Ajax al servidor «deleteRecords.php«. Sin embargo, este fichero PHP es el encargado de realizar la eliminación sin refrescar la página.

$(document).ready(function(){  
$('.delete_employee').click(function(e){   
e.preventDefault();   
var empid = $(this).attr('data-emp-id');
var parent = $(this).parent("td").parent("tr");   
bootbox.dialog({
message: "Estas seguro que quieres borrarlo ?",
title: "<i class='glyphicon glyphicon-trash'></i> Borrar !",
buttons: {
success: {
	  label: "No",
	  className: "btn-success",
	  callback: function() {
	  $('.bootbox').modal('hide');
  }
},
danger: {
  label: "Borrar!",
  className: "btn-danger",
  callback: function() {       
   $.ajax({        
		type: 'POST',
		url: 'deleteRecords.php',
		data: 'empid='+empid        
   })
   .done(function(response){        
		bootbox.alert(response);
		parent.fadeOut('slow');        
   })
   .fail(function(){        
		bootbox.alert('Error....');               
   })              
  }
}
}
});   
});  
});

Paso 06: Eliminar registros de la base de datos MySQL

Si bien ajax hace el llamado al modal para la respectiva eliminación de los registros, el motor de eliminación es el lenguaje PHP y lo realizaría en un fichero llamado «deleteRecords.php«. Ahora, este fichero eliminara el registro de empleados de la tabla de base de datos MySQL, veamos el ejemplo completo.

<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
	$sql = "DELETE FROM tbl_empleados WHERE id='".$_REQUEST['empid']."'";
	$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));	
	if($resultset) {
		echo "Registro Borrado";
	}
}
?>

CONCLUSION

Si bien, la Librería BootStrap da una buena interfaz gráfica a nuestros sistemas web y/o páginas web, no debemos olvidarnos de los detalles como por ejemplo la ventana modal para eliminar registros PHP y MySQL.

Justamente a causa de esta problemática de como eliminar registros es que nos animamos a realizar y explicar este artículo usando la librería BootStrap.

El uso de librerías externas es muy recomendable y el uso de BootStrap aún mejor. Sin embargo, podemos encontrar grandes beneficios para nuestros sistemas online:

• Uno de ellos es el CDN gratuito del BootStrap para no saturar nuestro servidor con solicitudes constates de esta famosa librería.
• Es una librería que hace que nuestro trabajo sea responsiva y profesional.
• Su uso es muy recomendable para cualquier sistema.

DESCARGA

A continuación, les dejare un paquete de instalación con todos los recursos que necesita el sistema y también su respectiva base de datos.

Espero que esta explicación les ayude bastante y les sea de utilidad.