En este tutorial vamos a ver cómo eliminar filas de una tabla de MySQL. Es un proceso bastante común en los sistemas CRUD, pero como habrás podido ver en el título, lo haremos a través de una ventana de confirmación de Bootstrap potenciada con Bootbox en lugar de la ventana de confirmación por defecto de Javascript. En términos de usabilidad, bootstrap nos proporciona una mejor UI que el dialogo de confirmación de Javascript, y para la acción que queremos llevar a cabo, lo óptimo es que el usuario esté seguro de la acción que va a realizar.
Puedes echar un vistazo a la demo online de este sencillo tutorial para que te hagas una idea de lo que vamos a hacer. Desde esa misma página es posible también descargarse el código fuente. Ya sabes, si estás utilizando bootstrap en tus proyectos y estás interesado en implementarlo, estate atento porque comenzamos...
Bootbox.js
Bootbox.js es una pequeña librería de Javascript que nos permite crear ventanas de diálogo utilizando las ventanas modales de Bootstrap, sin tener que preocuparnos en crear, gestionar o eliminar cualquiera de los elementos DOM o eventos de Javascript.
Diseño de BD
Aquí tienes un ejemplo de una tabla de productos con productos de prueba. La base de datos que utilizo en este tutorial se llama bdtest, por lo que nómbrala así también en tu PHPMyAdmin, y copia y pega el siguiente código sql para crear la tabla con los datos de prueba.
-- -- Database: `dbtest` -- -- -------------------------------------------------------- -- -- Table structure for table `tbl_products` -- CREATE TABLE IF NOT EXISTS `tbl_products` ( `product_id` int(11) NOT NULL AUTO_INCREMENT, `product_name` varchar(35) NOT NULL, PRIMARY KEY (`product_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ; -- -- Dumping data for table `tbl_products` -- INSERT INTO `tbl_products` (`product_id`, `product_name`) VALUES (1, 'Galaxy Jmax'), (2, 'Killer Note5'), (3, 'Asus ZenFone2'), (4, 'Moto Xplay'), (5, 'Lenovo Vibe k5 Plus'), (6, 'Redme Note 3'), (7, 'LeEco Le 2'), (8, 'Apple iPhone 6S Plus');
Configuración de BD
Simple y común conexión a base de datos con extensión PDO. Edita el siguiente código con tus credenciales de base de datos y guárdalo como “dbconfig.php”
$DBhost = "localhost";
$DBuser = "root";
$DBpass = "";
$DBname = "dbtest";
try{
$DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
$DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
Mostrar datos de la tabla MySQL
Aquí puedes ver el código para mostrar la información de los productos que tienes almacenada en la tabla MySQL tbl_products. La última columna, llamada Action, es para eliminar los productos a través de un enlace, el cual se sirve de data-id que almacenará el ID del producto. El valor del data-id será recogido por un evento click de Javascript al cual estarán vinculados todos los elementos con la clase delete_product. El evento llamará a una función, con el ID dado, y eliminará dicho producto de la tabla.
<table class="table table-bordered table-condensed table-hover table-striped">
<tr>
<th>#ID</th>
<th>Product Name</th>
<th>Action</th>
</tr>
<?php
require_once 'dbconfig.php';
$query = "SELECT product_id, product_name FROM tbl_products";
$stmt = $DBcon->prepare( $query );
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC) ) {
extract($row);
?>
<tr>
<td><?php echo $product_id; ?></td>
<td><?php echo $product_name; ?></td>
<td>
<a class="delete_product" data-id="<?php echo $product_id; ?>" href="javascript:void(0)">
<i class="glyphicon glyphicon-trash"></i>
</a></td>
</tr>
<?php
}
?>
</table>Ventana de confirmación
Como hemos dicho anteriormente, utilizaremos Bootbox.
bootbox.confirm("Are you sure?", function(result) {
// delete code here
});
Ventana personalizada
Se trata de una ventana de diálogo personalizada que utilizo para hacer llamadas de Ajax, principalmente para eliminar los datos utilizando el método de ajax. En la función del botón de eliminar hago una llamada de ajax para eliminar la fila que el usuario acaba de pulsar.
bootbox.dialog({
message: "I am a custom dialog",
title: "Custom title",
buttons: {
success: {
label: "No!",
className: "btn-success",
callback: function() {
// cancel button, close dialog box
}
},
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {
// jquery ajax delete code here
}
}
}
});
Código jQuery para eliminar datos
El método de jQuery Ajax, elimina la fila sin refrescar la página. Cuando dicha fila sea eliminada, aparecerá otra ventana de diálogo que avisará al usuario el borrado de la fila ha sido satisfactorio, con un efecto de fadeout.
$.ajax({
type: 'POST',
url: 'delete.php',
data: 'delete='+pid
})
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Something Went Wrog ....');
})
Utilizando $.post para hacer lo mismo
El método $.post también puede gestionar la petición de borrado.
$.post('delete.php', { 'delete':pid })
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Something Went Wrog ....');
})
Delete.php
Este archivo será llamado silenciosamente via ajax. El métod ajax llamará a este archivo pasándole como argumento el id que ha obtenido de data-id. Este archivo borrará la fila de la base de datos, y, si todo ha salido bien, enviará una notificación de que el borrado del producto ha ido sobre ruedas.
require_once 'dbconfig.php';
if ($_REQUEST['delete']) {
$pid = $_REQUEST['delete'];
$query = "DELETE FROM tbl_products WHERE product_id=:pid";
$stmt = $DBcon->prepare( $query );
$stmt->execute(array(':pid'=>$pid));
if ($stmt) {
echo "Product Deleted Successfully ...";
}
}
Código jQuery completo
Este es el código jQuery completo que se ejecutará cuando se acepte la ventana de confirmación, después de hacer click en el enlace con clase delete_product. No te preocupes por su longitud, es muy sencillo de entender.
$(document).ready(function(){
$('.delete_product').click(function(e){
e.preventDefault();
var pid = $(this).attr('data-id');
var parent = $(this).parent("td").parent("tr");
bootbox.dialog({
message: "Are you sure you want to Delete ?",
title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
buttons: {
success: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
},
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {
$.ajax({
type: 'POST',
url: 'delete.php',
data: 'delete='+pid
})
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Something Went Wrong ....');
})
}
}
}
});
});
});Fuente: codingcage.com