Índice de contenidos
Eliminar registros con confirmación en ventana modal.
Una de las cosas que se nos plantea cuando estamos desarrollando alguna aplicación es la posibilidad de que nuestro cliente o nosotros mismos , podamos eliminar registros con confirmación en ventana modal
Es aplicable también a la inserción y modificación de datos, pero hoy nos centraremos en la eliminación de registros de la base de datos usando una ventana modal de confirmación.
Hay que evitar el “lo borré por accidente”.
Creando la estructura.
Antes de ponernos manos a la obra, necesitaremos organizar nuestros archivos para que luego, no nos volvamos locos y toquemos donde no es necesario.
En nuestro directorio raiz o en el directorío donde vayamos a hacer este ejemplo , necesitaremos crear lo siguiente:
- Directorio CSS. Todos nuestros ficheros CSS irán aquí.
- Directorio JS. Todos nuestros ficheros JS irán aquí.
- Directorio Privado. Aquí guardaremos los ficheros importantes como la conexión a la bbdd, entre otros.
- Directorio IMG. Opcional para nuestro caso.
Sólo mantendremos en el directorio donde hagamos la prueba nuestro archivo index.php y a partir de él , llamaremos todo lo que necesitemos mediante los directorios que hemos creado anteriormente.
Ahora , cuando tengamos nuestra base de datos creada, crearemos la tabla clientes con estos sencillos campos.
CREATE TABLE `clientes` ( `idCliente` int(11) NOT NULL AUTO_INCREMENT, `nombreCliente` varchar(80) COLLATE utf8_spanish_ci NOT NULL, `telefonoCliente` varchar(30) COLLATE utf8_spanish_ci NOT NULL, PRIMARY KEY (`idCliente`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci;
Luego podremos rellenar los campos con los datos que queramos.
Vamos a crear ahora el archivo de configuración a la base de datos usando la extensión PDO.
$host = "localhost";
$userdb = "pepito";
$passdb = "pepito_prueba";
$namedb = "prueba";
//Bloque try-catch
try{
$dbconn = new PDO("mysql:host=$host;dbname=$namedb", $userdb,$passdb);
$dbconn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbconn->query("SET NAMES 'utf8';"); //Carácteres utf-8
}catch(PDOException $e){
die($e->getMessage());
}
Y ahora que ya tenemos montada la estructura y la conexión a nuestra base de datos, es hora de empezar a construir el resto y hacer magia.
Sacando registros de la base de datos.
Antes de empezar a jugar, vamos a ver como traer en el front, los datos de la tabla cliente que creamos anteriormente.
<!-- index.php -->
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Acción</th>
</tr>
<?php
require_once 'privado/conn.php';
$query = "SELECT idCliente,nombreCliente FROM clientes";
$stmt = $dbconn->prepare($query);
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC) ) {
extract($row);
?>
<tr>
<td><?php echo $idCliente; ?></td>
<td><?php echo $nombreCliente; ?></td>
<td>
<a class="dltBtn" data-id="<?php echo $idCliente; ?>" href="javascript:void(0)">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
</td>
</tr>
<?php
}
?>
</table>
<script src="js/modal.js"></script>
¿Qué estamos haciendo exactamente aquí?.
Sabemos que tenemos que sacar ciertos datos de nuestra tabla clientes. Sabemos que al ser varios, necesitaremos usar un bucle para imprimirlos todos. También tenemos nuestro enlace creado que será el encargado de darle la magia que estamos buscando.
Por tanto:
- Establecemos conexión a nuestra base de datos mediante el archivo que creamos.
- Hacemos una consulta básica a nuestra tabla clientes
- Preparamos la consulta y la ejecutamos
- Mediante un bucle while, vamos imprimiendo todos los valores que tengamos almacenados
- Creación del enlace con la acción de ELIMINAR cada registro
Y aquí llega el momento.
<a class="dltBtn" data-id="<?php echo $idCliente; ?>" href="javascript:void(0)">
Ya tenemos nuestros datos, pero queremos que cuando eliminemos un registro, nos aparezca una ventana modal confirmando dicha acción. ¿Cómo?
Mostrar ventana modal y confirmación.
Llegados a este punto, queremos que el usuario, cuando presione el enlace de eliminar el registro, le muestre una ventana modal con la confirmación de la accion a realizar. No es agradable eliminar registros sin previa confirmación.
Y como HTML5 nos brinda atributos como data-*, podremos usarlo con el evento click de jQuery (en este caso) que nos permitirá obtener el ID del registro a eliminar. Es por ello que en nuestro archivo index.php , en el enlace, usabamos data-id, para almacenar el id de los registros de la base de datos. Fácil, verdad?. ;-).
En nuestra carpeta JS, crearemos un archivo: modal.js.
$(document).ready(function(){
$('.dltBtn').click(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
var parent = $(this).parent("td").parent("tr");
bootbox.dialog({
message: "¿Estás seguro de eliminar el registro?",
title: "<i class='fa fa-trash-o'></i> ¡Atención!",
buttons: {
cancel: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
},
confirm: {
label: "Eliminar",
className: "btn-danger",
callback: function() {
$.ajax({
url: 'privado/eliminar.php',
data: 'eliminar='+id
})
//Si todo ha ido bien...
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow'); //Borra la fila afectada
})
.fail(function(){
bootbox.alert('Algo ha ido mal. No se ha podido completar la acción.');
})
}
}
}
});
});
});
Usando esta gran librería conseguiremos el efecto deseado. Y además nos encargamos de usar el metodo .ajax() de jQuery para pasarle el id de nuestro registro y que PHP haga el resto.
Eliminando el registro a través de PHP
Este último paso no deja de ser igual de importante que el resto.
Tras haber especificado en nuestro archivo modal.js la ruta de nuestro archivo eliminar.php , vamos a pintar el código para eliminar el registro y mostrarle un mensaje al usuario de que todo ha ido bien.
//eliminar.php
//Directorio Privado
require_once 'conn.php';
if ($_REQUEST['eliminar']) {
$id = $_REQUEST['eliminar'];
$query = "DELETE FROM clientes WHERE idCliente=:id";
$stmt = $dbconn->prepare( $query );
$stmt->execute(array(':id'=>$id));
if ($stmt)
echo "¡El registro ha sido eliminado!";
}
Y ya está!. Ya tenemos nuestra enlace de eliminar registros con una ventana modal , confirmándonos la acción.
Si ya hemos leído los datos de la base de datos y podemos eliminar registros también, sólo nos faltaría crear y modificar los registros para tener un CRUD bien hermoso. Pero como todo, esto está hecho de forma didáctica, para hacer algo más serio habría que plantearlo de otras maneras, mejorar la seguridad y crear algo robusto.
Por ejemplo, debemos evitar soltar un chorizo SQL en nuestro front. Hace que el código en proyectos más complejos, se vuelva un caos.
Así que ya sabéis. A darle duro y que sea seguro. Un saludo!.