Eliminar registros usando SweetAlert

Eliminar registros usando SweetAlert. En este artículo veremos cómo borrar registros de la tabla MySQL usando SweetAlert. Sin embargo, en este ejercicio instructivo le demostraré el procedimiento de borrado más conocido y de interfaz profesional.

Muchos todavía usan el procedimiento nativo de JavaScript predeterminado para alertas y confirmación de eventos, pero es malo con respecto a la gran interfaz de usuario. Por lo tanto, es recomendable utilizar bootstrap o SweetAlert y es muy simple de implementar en nuestro proyecto.

¿Que hay dentro?

¿Como usar e instalar la librería SweetAlert?

Descargar la librería sweetalert
Declarar el archivo JavaScript y el estilo de la librería en nuestra página web
Reemplazar la función alert() por swal()
Agregar y personalizar las opciones de la librería

Su uso es muy sencillo y fácil de implementar. Por lo tanto, podemos apoyarnos de una cdn con enlace al script para no saturar nuestro servidor, veamos un ejemplo de instalación.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sweetalert</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script type="text/javascript">
swal("Hola, buenos dias!");
</script>
</body>
</html>

¿Que es SweetAlert?

En los proyectos que realicemos siempre es importante dar respuestas a las acciones realizadas por el usuario final y hay existen varias formas de lanzar notificaciones, alertas, confirmaciones en una web o proyecto web. Por lo tanto, para darle una interfaz profesional a nuestro proyecto es dejar de usar el alert() por defecto de JavaScript.

Si bien funciona muy bien no es recomendable por su diseño y animación antigua que a veces muchos navegadores bloquean por el abuso de alertas.

Como resultado tendrás alertas y mensajes más agradable y con muy pocas líneas de código.

¿Cuál es la solución entonces eliminar registros usando SweetAlert?

Para darle solución es usar librerías como el Sweet Alert, con esta incorporación tendremos notificaciones y alertas profesionales. Sin embargo, usando Sweet Alert se busca reemplazar el alert o confirm nativo de javascript.

Diferencias entre JavaScript y SweetAlert

Con JavaScript

Ya todos ustedes conocen el script para generar las alertas nativas de JavaScript y ya no es muy recomendable.

<script>
alert("Oops, Algo salió mal!!");
</script>

Usando SweetAlert

Esta librería es casi parecida y ocupa las mismas líneas de código, pero son muy recomendable porque podemos configurar nuestros mensajes a nuestro antojo.

<script>
swal("Oops, Algo salió mal!!", "error");
</script>

¿Cómo usar la confirmación de ajax y sweetalert para eliminar la fila?

Declarar archivo de JS y estilos CSS de la librería

<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">

Luego incorporar estas líneas de código donde quieras que aparezca los mensajes

<script>swal("Perfecto!", "Has eliminado correctamente!", "success")
</script>

¿Cómo eliminar un registro utilizando SweetAlert?

Como tal SweetAlert tiene su forma de validar la opción seleccionada. Por lo tanto, esto se realiza a través de un then.

Eliminar registros usando SweetAlert: Estructura

A continuación, veremos un ejemplo completo de cómo eliminar un registro usando esta librería, lenguaje PHP y Ajax con base de datos MySQL.

A) Base de datos: db_empresa.sql

Usaremos una tabla llamada tbl_productos para almacenar los registros de los países.

CREATE TABLE `tbl_productos` (
`pro_id` int(11) NOT NULL,
`codigo` int(4) UNSIGNED ZEROFILL NOT NULL,
`producto_nombre` varchar(150) NOT NULL,
`fecha` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `tbl_productos` (`pro_id`, `codigo`, `producto_nombre`, `fecha`) VALUES
(1, 0001, 'Galaxy Jmax', '2021-02-02 22:36:23'),
(2, 0002, 'Killer Note5', '2021-02-02 22:36:23'),
(3, 0003, 'Asus ZenFone2', '2021-02-02 22:36:23'),
(4, 0004, 'Moto Xplay', '2021-02-02 22:36:23'),
(5, 0005, 'Lenovo Vibe k5 Plus', '2021-02-02 22:36:23'),
(6, 0006, 'Redme Note 3', '2021-02-02 22:36:23');


ALTER TABLE `tbl_productos`
ADD PRIMARY KEY (`pro_id`);


ALTER TABLE `tbl_productos`
MODIFY `pro_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

B) Fichero: index.php

Es el archivo principal donde realizaremos la declaración de las librerías y a través de una función SwalDelete ejecutara el Ajax para llamar al archivo eliminar.php que se encargara de eliminar el registro de la base de datos.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax SweetAlert PHP & MySQL</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/swal2/sweetalert2.min.css" type="text/css" />
</head>
<body>

<div class="container">

<div class="page-header">
<h1><a target="_blank" href="http://www.baulphp.com/">Ajax SweetAlert </a></h1>
</div>

<div id="load-products"></div> <!-- products will be load here -->

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/swal2/sweetalert2.min.js"></script>


<script>
$(document).ready(function(){

readProducts(); /* it will load products when document loads */

$(document).on('click', '#delete_product', function(e){

var productId = $(this).data('id');
SwalDelete(productId);
e.preventDefault();
});

});

function SwalDelete(productId){

swal({
title: 'Estas seguro?',
text: "Se borrará de forma permanente!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, bórralo!',
showLoaderOnConfirm: true,

preConfirm: function() {
return new Promise(function(resolve) {

$.ajax({
url: 'eliminar.php',
type: 'POST',
data: 'delete='+productId,
dataType: 'json'
})
.done(function(response){
swal('Eliminado!', response.message, response.status);
readProducts();
})
.fail(function(){
swal('Oops...', 'Algo salió mal con ajax !', 'error');
});
});
},
allowOutsideClick: false 
}); 

}

function readProducts(){
$('#load-products').load('panel.php'); 
}

</script>
</body>
</html>

C) Fichero: dbcon.php

Usando PHP PDO realizaremos la conexión con MySQL para que sea segura.

<?php

$DBhost = "localhost";
$DBuser = "root";
$DBpass = "";
$DBname = "db_empresa";

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());
}

?>

D) Archivo: panel.php

Este fichero mostrara la tabla HTML con registros MySQL extraídos mediante el ciclo while. Sin embargo, esta instrucción será ejecutada por la función “readProducts“.

Aquí se declarará la instrucción del sweetalert2 para la visualización de las alertas y/o confirmación.

<div class="table-responsive">

<table class="table table-bordered table-condensed table-hover table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Codigo</th>
<th>Nombre producto</th>
<th>Fecha</th>
<th>Action</th>
</tr>
</thead>

<tbody>

<?php

require_once 'dbcon.php';
$query = "SELECT * FROM tbl_productos";
$stmt = $DBcon->prepare($query);
$stmt->execute();

if($stmt->rowCount() > 0) {

while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {
extract($row);
?>
<tr>
<td><?php echo $pro_id; ?></td>
<td><?php echo $codigo; ?></td>
<td><?php echo $producto_nombre; ?></td>
<td><?php echo $fecha; ?></td>
<td> 
<a class="btn btn-sm btn-danger" id="delete_product" data-id="<?php echo $pro_id; ?>" href="javascript:void(0)"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
<?php
} 

} else {

?>
<tr>
<td colspan="3">No hay productos en lista</td>
</tr>
<?php

}
?>

</tbody>
</table>

</div>

E) Fichero: eliminar.php

Este archivo será solicitado por la confirmación del sweetalert2 a través del Ajax. Por lo tanto, tendrá la capacidad de eliminar el registro de la base de datos.

<?php

header('Content-type: application/json; charset=UTF-8');

$response = array();

if ($_POST['delete']) {

require_once 'dbcon.php';

$pid = intval($_POST['delete']);
$query = "DELETE FROM tbl_productos WHERE pro_id=:pid";
$stmt = $DBcon->prepare( $query );
$stmt->execute(array(':pid'=>$pid));

if ($stmt) {
$response['status'] = 'success';
$response['message'] = 'Producto eliminado correctamente...';
} else {
$response['status'] = 'error';
$response['message'] = 'No se puede eliminar el producto ...';
}
echo json_encode($response);
}
?>