Actualizar varias filas con CheckBox en PHP usando Ajax

Actualizar varias filas con CheckBox en PHP usando Ajax. La edición de registros en un sistema online es muy imprescindible y más aún sí usamos un modelo  CRUD (Crear, Lectura, Actualizar, Borrar) para nuestros módulos. En este artículo realizaremos la edición de uno o varios registros extraídos de una base de datos.

La edición usando jQuery Ajax es muy recomendado por su versatilidad con que maneja la información de la base de datos. Es por tal motivo que en esta entrada detallaremos como funciona, partes y estructura de este sistema.

Actualizar varias filas con CheckBox en PHP usando Ajax

Algunas preguntas frecuentes acerca de los recursos y estructura del presente ejemplo de edición de registros.

¿Qué recursos necesitaremos para este ejemplo?

En este ejemplo veremos la edición de registros y usaremos los siguientes recursos.

Lenguaje PHP.- Sera el motor del proceso de edición y será el encargado de mostrar y editar la información de la base de datos.

JQuery.- Lenguaje de programación en el cual usaremos AJAX para solicitar la edición del registro de manera dinámica.

BootStrap.- Librería externa orientada a la interfaz gráfica, es decir los estilos CSS y nos permitirá mostrar un diseño profesional.

MySQL.- La base de datos, será el encargado de almacenar la información de nuestro ejemplo y será editado a solicitud de las consultas SQL de actualización (UPDATE).

¿Cómo funciona el sistema?

Al cargar la página principal del módulo actualización de registros con CheckBox mostrara todos los registros existentes en la base de datos y de una determinada tabla. Por lo tanto, una vez mostrada los registros al lado izquierdo se mostrara casillas de verificación en cada registro y si presionamos una casilla mediante el uso de jQuery se activara la edición de tal registro o las casillas que activemos.

Una vez terminada la edición de uno o varios registros tenemos que presionar el botón llamado «Actualizacion Multiple» que se encuentra en la parte superior derecha de la tabla (CRUD).

¿Cuáles son las ventajas de este sistema?

En primer punto en todo sistema ya sea de escritorio y/o vía online lo más importante es el ahorro de tiempo y si un sistema trabaja más rápido será el elegido por las empresas.

Justamente viendo ese detalle los sistemas que usan CRUD para sus módulos en lenguajes PHP y MySQL suelen presionar el botón editar lo que conlleva a la carga de otra página para realizar la edición de un solo registro y luego presionar el botón guardar cambios. Por consiguiente, este método se suele perder tiempo a la hora de editar registros.

Con el ejemplo que le estamos mostrando todo es más interactivo y podemos editar los registros que marquemos en los CheckBox. Además, nuestra página actual no refrescara la página para ver los cambios efectuados.

Esto es una gran ventaja frente a otros sistemas de edición y lo que ahorramos es tiempo y recursos de nuestro servidor.

Archivos Necesarios: Estructura

El sistema posee la siguiente estructura de archivos y carpetas.

ACTUALIZAR VARIAS FILAS CON CHECKBOX: ESTRUCTURA

A continuación, detallaremos una serie de archivos que son vitales para el correcto funcionamiento del ejemplo mencionado.

Base de Datos

Este ejemplo trabaja con MySQL para almacenar los registros. Por lo tanto, su uso es muy importante y recordemos que esta consulta podemos ejecutarlo en el phpMyAdmin u otro programa con el MySQL Workbench. Veamos la consulta SQL.

CREATE TABLE `tbl_personal` (
  `id` int(11) NOT NULL,
  `nombres` varchar(50) NOT NULL,
  `genero` varchar(10) NOT NULL,
  `area` varchar(100) NOT NULL,
  `edad` int(11) NOT NULL,
  `direccion` text NOT NULL,
  `estado` varchar(100) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


INSERT INTO `tbl_personal` (`id`, `nombres`, `genero`, `area`, `edad`, `direccion`, `estado`) VALUES
(1, 'Juan Carrillo', 'Femenino', 'Arquitecto', 34, 'Av. Molina - Santiago', 'Chile'),
(2, 'Luis Fontis', 'Masculino', 'Sistemas', 26, 'Av. Copiapo - Buenos Aires', 'Argentina'),
(3, 'Maria Cotrina', 'Femenino', 'Secretaria', 23, 'Av. Jhonson - Quito', 'Ecuador'),
(4, 'Jenifer Carrillo', 'Femenino', 'Economia', 27, 'av. La Molina - Lima', 'Peru'),
(5, 'Milagros Ferrer', 'Femenino', 'Contable', 29, 'Los Manzanos - Bogota', 'Colombia');


ALTER TABLE `tbl_personal`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `tbl_personal`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

Conexión: BDconect.php

Para poder editar registros de una base de datos a través del lenguaje PHP, es importante crear la conexión y no esta demás la seguridad. Por lo tanto, usaremos PDO para tener una conexión segura.

La conexión lo realizaremos en un fichero llamado BDconect.php. Veamos el contenido de dicho archivo.

<?php

//Mostramos la conexion para realizar la actualizacion
//Usaremos PDO para conectar PHP con MySQL

$connect = new PDO("mysql:host=localhost;dbname=php_multiple", "root", "");

?>

Registros: index.php

Aquí se mostrara los resultados de la base de datos usando en lenguaje jQuery, es decir mostrara una tabla HTML5 con los registros de la base de datos. Además, mostrara las casillas en cada registro para la edición múltiple y también se realizaran los procesos de edición a través del llamado del AJAX con PHP.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Actualizar varias filas con CheckBox en PHP usando Ajax | BaulPHP</title>

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>


</head>

<body>
<header> 
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
      </form>
    </div>
  </nav>
</header>

<!-- Begin page content -->

<div class="container">
  <h3 class="mt-5">Actualizar varias filas con CheckBox en PHP usando Ajax</h3>
  <hr>
  <div class="row">
    <div class="col-12 col-md-12"> 
      <!-- Contenido -->
      
   <div class="table-responsive">  
<form method="post" id="update_form">
<div align="right" style="margin:5px;">
<button name="multiple_update" id="multiple_update" class="btn btn-primary">Actualizacion Multiple</button>
</div>

<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead class="thead-dark">
    <th width="4%"></th>
    <th width="18%">Nombres</th>
    <th width="22%">Direccion</th>
    <th width="14%">Genero</th>
    <th width="13%">Area</th>
    <th width="8%">Edad</th>
    <th width="11%">Estado</th>
</thead>
<tbody></tbody>
</table>
</div>
</form>
   </div>  
  </div>
 


      <!-- Fin Contenido --> 
    </div>
  </div>
  <!-- Fin row --> 
  
</div>
<!-- Fin container -->
<footer class="footer">
  <div class="container"> <span class="text-muted">
    <p>Códigos <a href="https://www.baulphp.com/" target="_blank">BaulPHP</a></p>
    </span> </div>
</footer>

<!-- Bootstrap core JavaScript
    ================================================== --> 
<script src="dist/js/bootstrap.min.js"></script> 
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>

Código jQuery Ajax

Todo el proceso de mostrar y editar los registros estará a cargo de este script. Por lo tanto, este script está compuesto de varias funciones y condicionales para mostrar resultados haciendo uso del AJAX (registros.php). Además, para la actualización de registros el AJAX llamara al fichero «ActualizacionMultiple.php«. Veamos el código.

$(document).ready(function(){  

function fetch_data()
{
$.ajax({
url:"Registros.php",
method:"POST",
dataType:"json",
success:function(data)
{
  var html = '';
  for(var count = 0; count < data.length; count++)
  {
      html += '<tr>';
      html += '<td><input type="checkbox" id="'+data[count].id+'" data-nombres="'+data[count].nombres+'" data-direccion="'+data[count].direccion+'" data-genero="'+data[count].genero+'" data-area="'+data[count].area+'" data-edad="'+data[count].edad+'" data-estado="'+data[count].estado+'" class="check_box"  /></td>';
      html += '<td>'+data[count].nombres+'</td>';
      html += '<td>'+data[count].direccion+'</td>';
      html += '<td>'+data[count].genero+'</td>';
      html += '<td>'+data[count].area+'</td>';
      html += '<td>'+data[count].edad+'</td>';
      html += '<td>'+data[count].estado+'</td></tr>';
  }
  $('tbody').html(html);
}
});
}

fetch_data();

$(document).on('click', '.check_box', function(){
var html = '';
if(this.checked)
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nombres="'+$(this).data('nombres')+'" data-direccion="'+$(this).data('direccion')+'" data-genero="'+$(this).data('genero')+'" data-area="'+$(this).data('area')+'" data-edad="'+$(this).data('edad')+'" data-estado="'+$(this).data('estado')+'" class="check_box" checked /></td>';
html += '<td><input type="text" name="nombres[]" class="form-control" value="'+$(this).data("nombres")+'" /></td>';
html += '<td><input type="text" name="direccion[]" class="form-control" value="'+$(this).data("direccion")+'" /></td>';
html += '<td><select name="genero[]" id="genero_'+$(this).attr('id')+'" class="form-control"><option value="'+$(this).data("genero")+'">'+$(this).data("genero")+'</option>  <option value="Masculino">Masculino</option><option value="Femenino">Femenino</option></select></td>';
html += '<td><input type="text" name="area[]" class="form-control" value="'+$(this).data("area")+'" /></td>';
html += '<td><input type="text" name="edad[]" class="form-control" value="'+$(this).data("edad")+'" /></td>';
html += '<td><input type="text" name="estado[]" class="form-control" value="'+$(this).data("estado")+'" /><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';
}
else
{
html = '<td><input type="checkbox" id="'+$(this).attr('id')+'" data-nombres="'+$(this).data('nombres')+'" data-direccion="'+$(this).data('direccion')+'" data-genero="'+$(this).data('genero')+'" data-area="'+$(this).data('area')+'" data-edad="'+$(this).data('edad')+'" data-estado="'+$(this).data('estado')+'" class="check_box" /></td>';
html += '<td>'+$(this).data('nombres')+'</td>';
html += '<td>'+$(this).data('direccion')+'</td>';
html += '<td>'+$(this).data('genero')+'</td>';
html += '<td>'+$(this).data('area')+'</td>';
html += '<td>'+$(this).data('edad')+'</td>';            
html += '<td>'+$(this).data('estado')+'</td>';            
}
$(this).closest('tr').html(html);
$('#genero_'+$(this).attr('id')+'').val($(this).data('genero'));
});

$('#update_form').on('submit', function(event){
event.preventDefault();
if($('.check_box:checked').length > 0)
{
$.ajax({
  url:"ActualizacionMultiple.php",
  method:"POST",
  data:$(this).serialize(),
  success:function()
  {
      alert('Registro(s) Actualizado(s).');
      fetch_data();
  }
})
}
});

});  

Registros.php

Los registros  serán mostrados haciendo uso del fichero «Registros.php«. Por lo tanto, haremos uso del ciclo While para poder visualizar registros extraídos de la tabla llamada «tbl_personal«. Además, las consultas SQL lo realizaremos mediante PDO.

<?php

// Incluir el fichero para realizar la conexion
include('BDconect.php');
// La consulta SQL que nos mostrara los registros en la tabla
$query = "SELECT * FROM tbl_personal ORDER BY id DESC";

$statement = $connect->prepare($query);

if($statement->execute())
{
// Ciclo PDO que sera en encargado de mostrar los registros de la BD
 while($row = $statement->fetch(PDO::FETCH_ASSOC))
 {
  $data[] = $row;
 }

 echo json_encode($data);
}

?>

ActualizacionMultiple.php

La múltiple edición de registros lo realizara este fichero a través del ciclo FOR y array o vectores para procesar solo los registros seleccionados en el fichero «INDEX.PHP«. También, usaremos la sentencia UPDATE para actualizar las filas editadas por el usuario.

<?php
// Tenemos que incluir el fichero para realizar la conexion
include('BDconect.php');
// Una vez conseguida la conexion ya podemos realizar las consultas SQL

if(isset($_POST['hidden_id']))
{
 $nombres = $_POST['nombres'];
 $direccion = $_POST['direccion'];
 $genero = $_POST['genero'];
 $area = $_POST['area'];
 $edad = $_POST['edad'];
 $estado = $_POST['estado'];
 $id = $_POST['hidden_id'];
 //Actualizacion Multiple usando ciclo FOR
 for($count = 0; $count < count($id); $count++)
 {
  $data = array(
   ':nombres'   => $nombres[$count],
   ':direccion'  => $direccion[$count],
   ':genero'  => $genero[$count],
   ':area' => $area[$count],
   ':edad'   => $edad[$count],
   ':estado'   => $estado[$count],
   ':id'   => $id[$count]
  );
 // La consulta SQL que realizara la actualizacion 
  $query = "
  UPDATE tbl_personal 
  SET nombres=:nombres, direccion=:direccion, genero=:genero, area=:area, edad=:edad, estado=:estado 
  WHERE id = :id";
  $statement = $connect->prepare($query);
  $statement->execute($data);
 }
}

?>

CONCLUSIÓN: Actualizar varias filas con CheckBox

En este artículo hemos aprendido a editar uno o varios registros de manera simultánea usando el AJAX de jQuery y sin refrescar la página. Con ello ahorramos tiempo en la edición y también ancho de banda de nuestro servidor web.

También, hemos usado lo último en tecnología para PHP en el tema de conexiones, estamos hablando del PDO (Objetos de Datos de PHP) que es muy recomendado para darle seguridad y estabilidad a nuestro proyecto.

Además, hemos usado librerías externas como el BootStrap para darle una interfaz profesional a nuestro proyecto.

Espero que esta breve explicación les ayude en sus proyectos web

Descarga del Sistema

Para culminar este artículo les dejare un archivo comprimido con todos los archivos y también la base de datos con registros de ejemplo para que puedan instalarlo rápidamente y ver cómo funciona.

Editar Multiples Registros usando CheckBox PHP

1 archivo(s) 185.05 KB

Descargar

Editar Multiples Registros usando CheckBox PHP

1 archivo(s) 185.05 KB

Descargar