Este tutorial te enseñaremos cómo eliminar múltiples registros de una tabla MySQL usando casillas de verificación ( checkbox) con PHP & MySQLi.
Hemos usado bootstrap para el diseño y ventanas modales para el registro de un nuevo usuario en la base de datos, pero ten en cuenta que para desarrollo de este tutorial debes contar con una conexión a internet, puesto que los archivos CSS y JavaScript están alojados en un servidor remoto.
Creando nuestra base de datos
El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haga clic en bases de datos, cree una base de datos y asignarle el nombre que desees, para este tutorial nosotros la hemos llamado «test_delete_multiple», pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña importar, luego selecciona el archivo llamado «test_delete_multiple», dicho archivo se encuentra dentro de la carpeta «db». Ver la imagen a continuación para obtener instrucciones detalladas sobre la importación de tablas para nuestra base de datos.
Creando nuestra conexión
A continuación, crearemos nuestra conexión a la base de datos. Esto servirá como el puente entre nuestros formularios y nuestra base de datos. Llamamos este archivo como conn.php .
|
1 2 3 4 5 6 7 8 9 |
<?php //MySQLi Procedural $conn = mysqli_connect("localhost","root","","test_delete_multiple"); if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } ?> |
index.php
Esta es la página donde mostramos los datos de nuestra tabla, se listar los usuario previamente registrados en nuestra base de datos. Además, para que puedas practicar más la función de eliminación, hemos la función de registro de datos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <title>Eliminar múltiples registros con PHP & MySQLi</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> input[type="checkbox"] { transform:scale(2, 2); } </style> </head> <body> <div class="container"> <div style="height:50px;"></div> <div class="well" style="margin:auto; padding:auto; width:80%;"> <span style="font-size:25px; color:#16a085"><center><strong>Eliminar múltiples registros con PHP & MySQLi</strong></center></span> <div style="height:20px;"></div> <table class="table table-striped table-bordered table-hover"> <thead> <th></th> <th>Nombres</th> <th>Apellidos</th> <th>Dirección</th> </thead> <form method="POST" action="delete.php"> <tbody> <?php include('conn.php'); $query=mysqli_query($conn,"select * from `user`"); while($row=mysqli_fetch_array($query)){ ?> <tr> <td align="center"><input type="checkbox" value="<?php echo $row['userid']; ?>" name="userid[]"></td> <td><?php echo $row['firstname']; ?></td> <td><?php echo $row['lastname']; ?></td> <td><?php echo $row['address']; ?></td> </tr> <?php } ?> </tbody> </table> <a href="#addnew" data-toggle="modal" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> Agregar nuevo</a> || <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</button> </form> </div> <?php include('modal.php'); ?> </div> </body> </html> |
modal.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!-- Add New --> <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <center><h4 class="modal-title" id="myModalLabel">Agregar nuevo</h4></center> </div> <div class="modal-body"> <div class="container-fluid"> <form method="POST" action="addnew.php"> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Nombres:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="firstname" required> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Apellidos:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="lastname" required> </div> </div> <div style="height:10px;"></div> <div class="row"> <div class="col-lg-2"> <label class="control-label" style="position:relative; top:7px;">Dirección:</label> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="address" required> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Guardar</a> </form> </div> </div> </div> </div> |
addnew.php
Nuestro código que se encarga de agregar un nuevo registro a la tabla de MySQL.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php include('conn.php'); $firstname=$_POST['firstname']; $lastname=$_POST['lastname']; $address=$_POST['address']; mysqli_query($conn,"insert into user (firstname, lastname, address) values ('$firstname', '$lastname', '$address')"); header('location:index.php'); ?> |
delete.php
Por último, nuestro código de eliminación. Al presionar el botón Eliminar, este código eliminará todas las filas marcadas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php include('conn.php'); if(isset($_POST['userid'])){ foreach ($_POST['userid'] as $id): mysqli_query($conn,"delete from user where userid='$id'"); endforeach; header('location:index.php'); } else{ ?> <script> window.alert('Selecciona un usuario'); window.location.href='index.php'; </script> <?php } ?> |
Aquí termina este tutorial. Si tienes algún comentario o pregunta, no dudes en hacernos saber dejando un comentario a continuación. Happy Coding 😀
