Este tutorial te ayudará a comprender la edición inline HTML5 con PHP y MySQL. En un tutorial anterior sobre la edición inline del HTML, aprendimos cómo hacer que cualquier elemento HTML sea editable usando el atributo contenteditable. Los elementos editables inline solo serán ejecutados en aquellos navegadores que soporten HTML5, lógicamente.
Hay muchos plugins de jQuery que proporcionan la misma funcionalidad que vamos a ver hoy, pero utilizando HTML5 puedes hacerlo de forma muy sencilla y sin tener que recurrir a dependencias de terceros. Solo necesitarás algo de código Ajax jQuery para actualizar los datos en la base de datos MySQL. Esto hará que, cuando se edite un registro, se edite solamente ese dato y no todos los que componen el formulario.
¿Cómo funciona?
Crearemos una lista de todos los registros en una tabla. Añadiremos el atributo contenteditable en todos los td de la tabla donde queramos que el usuario pueda editar el contenido. Cuando el usuario cambie la información del td, capturaré el evento focusout utilizando jQuery y obtendré el dato modificado del td. Finalmente, llamo a la función de php para modificar los datos dentro de la base de datos y cambiar la información del td.
Estos serán los archivos que utilizaremos para el tutorial:
connection.php: Sirve para conectar con la base de datos MySQL
index.php: Este archivo se utiliza para mostrar la tabla de todos los registros de la bd y el que contará con los elementos contentEditable.
server.php: Este archivo será llamado por AJAX y actualizará la BD
Paso 1
Incluye las librerías de Bootstrap y jQuery dentro del tag head de tu documento HTML.
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
Paso 2
Crea el archivo de conexión connection.php para conectar con la base de datos
<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %sn", mysqli_connect_error());
exit();
}
?>
Paso 3
Obtén los registros de la base de datos y almacénalos en una variable. Pon el siguiente código dentro del archivo index.php
<?php
//include connection file
include_once("connection.php");
$sql = "SELECT * FROM `employee`";
$queryRecords = mysqli_query($conn, $sql) or die("error to fetch employees data");
?>
Recuerda que aquí estamos utilizando datos de ejemplo. Sustituye la tabla employee con el nombre de tu tabla, no lo olvides.
Paso 4
Crea la tabla HTML y complétala con los datos que hemos obtenidos antes de la BD.
<table id="employee_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody id="_editable_table">
<?php foreach($queryRecords as $res) :?>
<tr data-row-id="<?php echo $res['id'];?>">
<td class="editable-col" contenteditable="true" col-index='0' oldVal ="<?php echo $res['employee_name'];?>"><?php echo $res['employee_name'];?></td>
<td class="editable-col" contenteditable="true" col-index='1' oldVal ="<?php echo $res['employee_salary'];?>"><?php echo $res['employee_salary'];?></td>
<td class="editable-col" contenteditable="true" col-index='2' oldVal ="<?php echo $res['employee_age'];?>"><?php echo $res['employee_age'];?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
Paso 5
Crea la petición AJAX para modificar los datos de la base de datos utilizando un fichero php del lado del cliente.
<script type="text/javascript">
$(document).ready(function(){
$('td.editable-col').on('focusout', function() {
data = {};
data['val'] = $(this).text();
data['id'] = $(this).parent('tr').attr('data-row-id');
data['index'] = $(this).attr('col-index');
if($(this).attr('oldVal') === data['val'])
return false;
$.ajax({
type: "POST",
url: "server.php",
cache:false,
data: data,
dataType: "json",
success: function(response)
{
//$("#loading").hide();
if(response.status) {
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html(response.msg);
} else {
$("#msg").removeClass('alert-success');
$("#msg").addClass('alert-danger').html(response.msg);
}
}
});
});
});
</script>
Paso 6
Ahora, actualiza los datos de la base de datos en server.php
<?php
//include connection file
include_once("connection.php");
//define index of column
$columns = array(
0 =>'employee_name',
1 => 'employee_salary',
2 => 'employee_age'
);
$error = true;
$colVal = '';
$colIndex = $rowId = 0;
$msg = array('status' => !$error, 'msg' => 'Failed! updation in mysql');
if(isset($_POST)){
if(isset($_POST['val']) && !empty($_POST['val']) && $error) {
$colVal = $_POST['val'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['index']) && $_POST['index'] >= 0 && $error) {
$colIndex = $_POST['index'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['id']) && $_POST['id'] > 0 && $error) {
$rowId = $_POST['id'];
$error = false;
} else {
$error = true;
}
if(!$error) {
$sql = "UPDATE employee SET ".$columns[$colIndex]." = '".$colVal."' WHERE id='".$rowId."'";
$status = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$msg = array('status' => !$error, 'msg' => 'Success! updation in mysql');
}
}
// send data as json format
echo json_encode($msg);
?>
Y esto sería todo. Como ves no ha sido complicado, aparte de tener sus carencias. Por ejemplo, este último archivo PHP no es del todo seguro. ¿Por qué? Pues porque es vulnerable a las inyecciones SQL. No es el único error de diseño que tiene el tutorial, pero quería que nos concentrásemos más en la estructura del tutorial que en otros menesteres. Espero que os haya gustado.
Fuente: phpflow.com