Cómo eliminar fila en MySQL usando Sweetalert2

Versión
Descargar 31
Tamaño del archivo 52.54 KB
Recuento de archivos 1
Fecha de creación 8 enero, 2024
Última actualización 8 enero, 2024

Cómo eliminar fila en MySQL usando Sweetalert2. Para eliminar registros de manera profesional podemos usar librería SweetAlert que nos brinda una elegante forma de gestionar los mensajes emergentes, en este caso para eliminar datos de una base de datos.

Cómo eliminar fila en MySQL usando Sweetalert2

La idea es reemplazar los antiguos mensajes de JavaScript que en la mayoría de navegadores no funciona al 100%. Por lo tanto, agregando una pequeña librería podemos tener cuadros de dialogo profesionales.

Registro borrado exitosamente con SweetAlert

Estructura de integración

A continuación, veremos varios pasos para una correcta integración.

Recursos que necesitaremos para integrar esta moderna librería

Lenguaje HTML5
Framework BootStrap 5
Librería Sweetalert2
Lenguaje PHP PDO
Base de datos MySQL

Base de datos: Tabla clientes

Para que nuestro CRUD funcione correctamente trabajaremos con base de datos MySQL con una tabla llamado clientes con 3 columnas.

CREATE TABLE `clientes` (
`id` int(11) NOT NULL,
`nombres` varchar(30) CHARACTER SET latin1 NOT NULL,
`apellidos` varchar(30) CHARACTER SET latin1 NOT NULL,
`pais` text CHARACTER SET latin1 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


-- Volcado de datos para la tabla `clientes`



INSERT INTO `clientes` (`id`, `nombres`, `apellidos`, `pais`) VALUES
(1, 'Maria', 'Gutierrez', 'bohol'),
(2, 'Carmen', 'Flores', 'Canada'),
(3, 'Luis', 'Villa', 'England'),
(4, 'Miluska', 'Marin', 'Japan');
ALTER TABLE `clientes`
ADD PRIMARY KEY (`id`);

--
ALTER TABLE `clientes`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;

Primer paso: Conexión PDO a MySQL

Es primordial usar una buena conexión hacia la base de datos MySQL para evitar las inyecciones SQL u otros ataques que puedan vulnerar nuestra conexión. Para este ejemplo usaremos PDO y aquí les dejo el ejemplo

Fichero db.php

<?php
$usuario = "root";
$password = "";
$conn = new PDO('mysql:host=localhost;dbname=mi_data', $usuario, $password);
?>

Segundo paso: Tabla HTML con resultados MySQL

Contendrá la interfaz principal donde mostraremos la tabla HTML, declaraciones de framework y librerías necesarias para el ejemplo.

Fichero index.php

<?php include("db.php");?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cómo eliminar fila de tabla usando Sweetalert2</title>
<link rel="stylesheet" type="text/css" href="asset/sweet_alert/sweetalert2.min.css">
<!--Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="flex-shrink-0">
<div class="container">
<div class="card mt-3">
<div class="card-header"> Cómo eliminar fila de tabla usando Sweetalert2 </div>
<div class="card-body">
<form method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<label for="nombres" class="form-label">Nombres</label>
<input type="text" id="nombres" name="nombres" placeholder="Nombres" class="form-control" required />
</div>
<div class="col-md-4">
<label for="apellidos" class="form-label">Apellidos</label>
<input type="text" id="apellidos" name="apellidos" placeholder="Apellidos" class="form-control" required>
</div>
<div class="col-md-4">
<label for="apellidos" class="form-label">Pais</label>
<input type="text" id="address" name="pais" placeholder="Ingrese Pais" class="form-control" required />
</div>
<div class="col-md-4">
<button type="submit" name="submit" value="Submit" class="btn btn-primary mr-2 mt-4">Registrar</button>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header"> Lista de Clientes </div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped">
<thead class="table-dark">
<th>No.</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Pais</th>
<th>Accion</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="asset/jquery.min.js"></script>
<script src="asset/sweet_alert/sweetalert2.min.js"></script>
<?php
if(isset($_POST['submit']))
{
$nombres = $_POST['nombres'];
$apellidos = $_POST['apellidos'];
$pais = $_POST['pais'];
$query = $conn->prepare("INSERT INTO `clientes`(`nombres`, `apellidos`, `pais`)
VALUES (:nombres,:apellidos,:pais)");
$query->bindParam(":nombres", $nombres);
$query->bindParam(":apellidos", $apellidos);
$query->bindParam(":pais", $pais);

if($query->execute())
{?>
<script>
swal.fire({
'title': 'Gracias',
'text': 'Guardado exitosamente',
'icon': 'success',
'type': 'success'
})
</script>
<?php
}
}
?>
<script type="text/javascript">
$(document).ready(function(){
fetch();

$(document).on('click', '.borrar_cliente', function(){
var id = $(this).data('id');

swal.fire({
title: 'Estas seguro?',
text: "No podrás revertir esto.!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Si, bórralo!',
}).then((result)=> {
if (result.value){
$.ajax({
url: 'api.php?action=delete',
type: 'POST',
data: 'id='+id,
dataType: 'json'
})
.done(function(response){
swal.fire('Borrado!', response.message, response.status);
fetch();
})
.fail(function(){
swal.fire('Oops...', 'Algo salio mal !', 'error');
});
}

})

});
});

function fetch(){
$.ajax({
method: 'POST',
url: 'api.php',
dataType: 'json',
success: function(response){
$('#tbody').html(response);
}
});
}
</script>
</body>
</html>

Tercer paso: Consultas SQL

Para las consultas SQL usaremos AJAX que nos permitirá realizar consultas SQL sin actualizar nuestro navegador web.
Fichero api.php

<?php
include("db.php");
$action = 'fetch';

if(isset($_GET['action'])){
$action = $_GET['action'];
}

if($action == 'fetch'){
$output = '';
$query = $conn->prepare("SELECT * FROM clientes order by id desc");
$query->execute();
$data = $query->fetchAll();
$no=1;
foreach($data as $row){
$output .= "
<tr>
<td>". $no."</td>
<td>".$row['nombres']."</td>
<td>".$row['apellidos']."</td>
<td>".$row['pais']."</td>
<td><button class='btn btn-sm btn-danger borrar_cliente' data-id='".$row['id']."'>Borrar</button></td>
</tr>
";
$no=$no+1;
}

echo json_encode($output);
}

if($action == 'delete'){
$id = $_POST['id'];
$output = array();
$query = $conn->prepare("DELETE FROM `clientes` WHERE id=:id");
$query->bindParam(":id", $id);
$query->execute();
if($query->execute()){
$output['status'] = 'success';
$output['message'] = 'Cliente eliminado exitosamente';
}
else{
$output['status'] = 'error';
$output['message'] = 'Algo salió mal en la eliminación del cliente';
}

echo json_encode($output);

}

Para finalizar

La integración de esta librería es muy sencilla, solo debemos de agregar los ficheros necesarios y llamarlos cuando se requiera mostrar un mensaje.
Con esto obtendremos resultados profesionales en nuestro proyecto.

Puede visitar nuestro repositorio en GitHub

Descargar