Editar registros en línea usando HTML5 jQuery, PHP & MYSQL

Editar registros en línea usando HTML5 jQuery, PHP & MYSQL. Para poder manejar información en un sistema web se necesita un CRUD es decir un módulo en el cual nos permita Visualizar, Insertar, Editar, Eliminar. Sin embargo, suele ser tedioso a la hora de interactuar con esas opciones ya mencionadas.

En este artículo veremos una simple forma de editar registros, es decir «editar registros en línea«, en donde no abriremos una ventana nueva para editar, ni un modal. Por lo tanto, editaremos la información devuelta en la lista de registros con la cláusula «SELECT».

Editar registros en línea usando HTML5 jQuery, PHP & MYSQL

¿Qué recursos necesito para editar en línea?

Esta forma es la más fácil para interactuar con nuestras aplicaciones web. Usaremos HTML5 con PHP y también una base de datos MySQL en el cual almacenaremos la información. Por lo tanto, con esto lograremos una edición in situ o edición en línea sin usar ningún tipo de ventana emergente.

¿Cómo funciona este sistema?

Generalmente se implementa en una tabla HTML regiones editables a través del atributo (contenteditable=»true») al realizar un clic en el registro. Por lo tanto, esto permite que sea editable través del lenguaje jQuery.

El jQuery lo cambia a un input de texto. Esos campos envían el texto editado al servidor a través de Ajax usando el método POST y el fichero «proceso.php» realiza la actualización si tener que refrescar la página o sistema web.

Usaremos también HTML5 con su nuevo atributo llamado «contentEditable» y este se encargara de la edición en línea de manera automática. Sin embargo, debemos escribir un pequeño código jQuery para enviar los datos editados de nuevo al servidor. Esta técnica es una gran ventaja del tradicional formulario oculto para poder editar los registros.

Existe un atributo llamado contentEditable que está disponible en casi todos los elementos. Simplemente agregando este atributo convierte cualquier elemento en un campo editable.

Partes del sistema edición en línea

A continuación, detallaremos las partes del sistema editar registros en línea.

a) Base de datos: Creación de base de datos y tabla

Para interactuar con la información se necesita una base de datos llamado «PHP_HTMLEDIT» y su respectiva tabla llamado «usuarios_detalles«. Sin embargo, en esta tabla almacenaremos la información y también su respectiva edición. Veamos las siguientes consultas SQL.

CREATE TABLE `usuarios_detalles` (
  `Id` int(11) NOT NULL,
  `Nombres` varchar(50) DEFAULT NULL,
  `Apellidos` varchar(50) DEFAULT NULL,
  `Ciudad` varchar(50) DEFAULT NULL,
  `Cel` varchar(50) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `usuarios_detalles` (`Id`, `Nombres`, `Apellidos`, `Ciudad`, `Cel`) VALUES
(1, 'Mario', 'Kalkaterra', 'Mexico', '90056231'),
(2, 'Carlos', 'Lujan', 'Bogota', '90056232'),
(3, 'Luisa', 'Retamozo', 'Montevideo', '90056233'),
(4, 'Valentin', 'Hidalgo', 'Quito', '90056236'),
(5, 'Maria', 'Quintanilla', 'Lima', '90056239');


ALTER TABLE `usuarios_detalles`
  ADD PRIMARY KEY (`Id`);

ALTER TABLE `usuarios_detalles`
  MODIFY `Id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;

b) Fichero DBCONECT.PHP

El siguiente script representa la conexión del sistema con la base de datos MySQL y lo haremos a través de una función llamado «connect«. Además, hemos agregado el «Charset UTF8» para no tener con los caracteres especiales, tildes y eñes en los registros de la BD.

function connect(){
    return new mysqli("localhost","root","","php_htmledit");
}
$con = connect();

// AGREGANDO CHARSET UTF8
if (!$con->set_charset("utf8")) {
    printf("Error al cargar el conjunto de caracteres utf8: %s\n", $con->error);
    exit();
} else {
    //printf("Conjunto de caracteres actual: %s\n", $db->character_set_name());
}

c) Declarar el fichero DBCONECT

Recordemos que para optimizar la comunicación dentro del lenguaje PHP tenemos que incluir ficheros y justamente este sistema trabaja incluyendo la conexión con MySQL. La función predeterminada del PHP para incluir ficheros en «INCLUDE» o también podemos usar «REQUIRE«, en este artículo hablamos de las diferencias.

<?php
include("dbconect.php");
?>

d) Archivo index.php

Es el fichero principal de este sistema es el «INDEX.PHP«, Por lo tanto, este fichero mostrara una lista de resultados extraídos de la base de datos. En estos resultados realizaremos la edición en línea usando Ajax, HTML5, PHP y MySQL. Aquí, les dejare el contenido del fichero.

<div class="container">
<?php
$sql = "SELECT * FROM `usuarios_detalles`";
$consulta = mysqli_query($con, $sql);
if($consulta->num_rows === 0) {
  echo "No hay resultados <br><br><br>";
} else {
?>
<div class="row">
<div id="status"></div>      
<table class="table table-striped">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nombres</th>
        <th scope="col">Apellidos</th>
        <th scope="col">Ciudad</th>
        <th scope="col">Celular</th>
      </tr>
    </thead>
    <tbody>
<?php
$rownumber=0;
while($rowedit = mysqli_fetch_array($consulta)){
$rownumber++;
$nom = $rowedit["Nombres"];
$ape = $rowedit["Apellidos"];
$ciu = $rowedit["Ciudad"];
$cel = $rowedit["Cel"];
?>
<tr>
<!-- Si observamos, en esta sección podemos declarar el atributo "contenteditable" en true o false -->
  <td scope="row"><?php echo $rownumber; ?></td>
  <td id="Nombres:<?php echo $rownumber; ?>" contenteditable="true"><?php echo $nom; ?></td>
  <td id="Apellidos:<?php echo $rownumber; ?>" contenteditable="true"><?php echo $ape; ?></td>
  <td id="Ciudad:<?php echo $rownumber; ?>" contenteditable="false"><?php echo $ciu; ?></td>
  <td id="Cel:<?php echo $rownumber; ?>" contenteditable="false"><?php echo $cel; ?></td>
</tr>
<?php
}
?>    
    </tbody>
 </table>
</div>
<?php }?>
</div>

e) Contenido del código jQuery

La siguiente codificación es de jQuery que a través de una función ejecuta la tabla HTML que previamente el usuario final ha editado. El método que se usa es el POST para procesar la información y si todo es correcto emite un mensaje con el siguiente texto «REGISTRO ACTUALIZADO CORRECTAMENTE«. Además el proceso dura «2000 milisegundos«.

$(function(){
  //Mensaje
    var message_status = $("#status");
    $("td[contenteditable=true]").blur(function(){
        var rownumber = $(this).attr("id");
        var value = $(this).text();
        $.post('proceso.php' , rownumber + "=" + value, function(data){
            if(data != '')
      {
        message_status.show();
        message_status.html(data);
        //hide the message
        setTimeout(function(){message_status.html("REGISTRO ACTUALIZADO CORRECTAMENTE");},2000);
      } else {
        //message_status().html = data;
      }
        });
    });
});

f) Fichero Proceso.php

Basicamente, este es el archivo que puede realizar la edición es el PHP. Por tal motivo, el fichero llamado «proceso.php» contendrá las clausulas y consultas para realizar los cambios a través de del ciclo FOREACH y además de la cláusula UPDATE que es el encargado de realizar la actualización del registro en la base de datos. Veamos el contenido del fichero.

foreach($_POST as $rownumber_name => $val) {

// Recuerda limpiar valores de post
        $rownumber = $rownumber_name;
        $val = $val;

        // De nombre de campo: rownumber_id que necesitamos obtener rownumber_id
        $split_data = explode(':', $rownumber);
        $rownumber_id = $split_data[1];
        $rownumber_name = $split_data[0];

// Aquí se realzia la actualizacion en la base de datos en determinado registro
$sql_1 = "UPDATE usuarios_detalles SET $rownumber_name = '$val' WHERE Id = $rownumber_id";
  if ($con->query($sql_1)) {
  $last_id = $con->insert_id;
  // Se imprime cuando todo esta correcto
  echo "Registro Editado Correctamente: <img src='images/loader.gif' height='15px'>";
  } else {
  // Se imprime si hay algun error
  printf("Errormessage: %s\n", $con->error);
  }
}

CONCLUSIÓN DE EDITAR REGISTROS EN LÍNEA

Con este modelo de codificación hemos agregado un evento recientes en cada celda de la tabla «TD» que tiene el atributo «contentEditable» establecido en true para que al hacer clic sea editable, caso contrario si lo declaramos en false la celda será normal y no será editable.

Además, este tipo de edición es de gran ayuda en nuestros modelos CRUD y agiliza los procesos de edición rápidamente porque no genera formularios en nuevas ventanas, todo lo realiza sin actualizar la página.

Este tipo de procesos ayuda a que no saturemos nuestro servidor y los procesos se realizan más rápidos. La implementación no es tan complicado y lo hemos explicado en el presente artículo.

Espero que este modelo de edición les sirva y lo apliquen en sus proyectos web. Siéntase libre en realizar un comentario.

Descarga del sistema

Les dejare un archivo ZIP que contendrá todos los recursos del ejemplo, es decir Los archivos, la base de datos con ejemplos.

Descargar editar en linea con PHP, Ajax, PHP

1 archivo(s) 120 KB

Descargar