Portada » JavaScript » Plugin » SweetAlert2 » Eliminar registros usando SweetAlert

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.

¿Como instalar la librería SweetAlert2?

  • 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>

¿Qué es SweetAlert?

SweetAlert es un plugin de jQuery y es utilizado para lanzar notificaciones emergentes para los usuarios y su uso es muy recomendado para las 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.

Ver Demostración

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.

Eliminar registros usando SweetAlert

¿Eliminar registros usando SweetAlert?

Para elimianr registros tenemos que integrar los dos archivos: uno de CSS y el otro de Javascript, 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

Alert JavaScript

Son alertas por defecto que viene con el lenguaje JavaScript y su uso  ya no es recomendable.

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

Plugín SweetAlert

Este plugín es muy reomenddo prque genera alertas profesinales y ocupa las mismas líneas de código. Ademas, podemos configurar nuestros mensajes a nuestro antojo.

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

¿Cómo usar sweetalert para eliminar la fila?

Tenemos que 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 MySQL usando SweetAlert

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:

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="https://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);
}
?>

CONCLUSIÓN Y RECOMENDACIÓN

Hemos aprendido a implementar la librería sweetalert2 de una manera versátil en nuestros sistemas web.

  • La librería es muy versátil y podemos usarlo de dos maneras:
  • Avisos modales, como el que pide confirmación,
  • Ejecuta una acción al aceptar, cancelar, mensajes.

Además, podemos cambiar la imagen que aparece por defecto por la que nosotros queramos o quitar las imágenes.

Por otro lado, la librería es muy flexible para su configuración y podemos trabajarlo a nuestro criterio.

Podemos ver más ejemplos y opciones en la página de SweetAlert o visitar su cuenta en su GitHub oficial.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 2

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad