Eliminar Datos con AJAX y POO en PHP

Veremos el artículo final de esta serie de artículos relacionados con AJAX y Clases con PHP: Eliminar datos de la tabla Empleados, empezemos entonces:

Agregando un nuevo método

Trabajaremos con la misma Clase cEmpleado que se encuentra en el archivo cEmpleado.php, pero agregaremos un método más: eliminar(), que acepta como parámetro el Codigo del Empleado. Esto con el objetivo de eliminar un solo dato, el que nosotros especificaremos. No mostraremos todo el código del archivo cEmpleado.php, solo el método que vamos a agregar:

//elimina un empleado en la base de datos
function eliminar($cod){
 $con = new DBManager;
 if($con->conectar()==true){
  $query = "DELETE FROM empleados WHERE idempleado=$cod";
  $result = @mysql_query($query);
  if (!$result)
   return false;
  else
   return true;
  }
}

Consultando datos

Ahora realizaremos una consulta de todos los empleados y los listaremos haciendo uso de una tabla HTML. Los elementos de la columna Dato tienen dentro de la etiqueta <a></a> el evento onclick especificamos la función eliminarDato(parametro), donde parametro es el código del empleado. Esta función JavaScript se encargará en enviar el código al archivo que realizará el proceso de eliminación. Está función la describeremos mas adelante. A este archivo de consulta lo llamamos consulta.php.

<?php
 include_once("cEmpleado.php");
 //consulta todos los empleados
 $objempleado = new cEmpleado;
 $consulta=$objempleado->consultar();
 //muestra los datos consultados
 //haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Codigo</td>
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row=mysql_fetch_array($consulta)){
  echo "<tr>";
  //mediante el evento onclick llamaremos a la funcion PedirDatos(), la cual tiene como parametro
  //de entrada el ID del empleado
  echo "<td><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\"eliminarDato('".$row['idempleado']."')\">".$row['idempleado']."</a></td>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Proceso Principal

Este es el archivo que realizará el proceso de eliminación. Creamos el objeto a partir de la Clase y hacemos uso del método eliminar() donde, como parametro, especificamos el código del empleado. Este valor lo recibimos mediante el método GET el cual la función JavaScript eliminarDato() nos enviará. Este archivo, eliminacion.php, queda así:

<?php
 include_once("cEmpleado.php");
 //variable GET
 $idemp=$_GET['idempleado'];
 sleep(2);
 //creamos el objeto $objempleados
 //y usamos su método eliminar
 $objempleados=new cEmpleado;
 if ($objempleados->eliminar($idemp)==true){
  echo "Registro eliminado correctamente";
 }else{
  echo "Ocurrio un error";
 }
 include('consulta.php');
?>

Funciones en JavaScript

En este archivo, ajax.js, irán dos funciones: 1) la que siempre hemos usado en estos tutoriales, que sirve para usar el objeto XMLHttpRequest y 2) la función de la que hemos venido hablando antes eliminarDato(), que se encargará de enviar el código del empleado para que el archivo eliminacion.php se encarge de eliminarlo.

function objetoAjax(){
 var xmlhttp=false;
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch(e){
  try{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(E){
   xmlhttp = false;
  }
 }
 if(!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}
function eliminarDato(idempleado){
 //donde se mostrará el resultado de la eliminacion
 divResultado = document.getElementById('resultado');
 //usaremos un cuadro de confirmacion
 var eliminar = confirm("De verdad desea eliminar este dato?")
 if ( eliminar ) {
  //instanciamos el objetoAjax
  ajax=objetoAjax();
  //uso del medoto GET
  //indicamos el archivo que realizará el proceso de eliminación
  //junto con un valor que representa el id del empleado
  ajax.open("GET", "eliminacion.php?idempleado="+idempleado);
  divResultado.innerHTML= '<img src="anim.gif">';
  ajax.onreadystatechange=function() {
   if (ajax.readyState==4) {
    //mostrar resultados en esta capa
    divResultado.innerHTML = ajax.responseText
   }
  }
  //como hacemos uso del metodo GET
  //colocamos null
  ajax.send(null)
 }
}

Finalmente…

En el archivo index.php incluimos el archivo JavaScript que usaremos y colocaremos dentro de las etiquetas <div id="resultado"></div> un include al archivo consulta.php. Esto con el fin de cuando empezemos a ejecutar nuestra aplicación se muestren todos los empleados.

<html>
<head>
<title>Eliminacion de registros con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h2>Eliminar registros de la tabla empleado</h2>
<p>Clic en el c&oacute;digo del empleado para eliminar el registro. </p>
<div id="resultado">
<?php
 include('consulta.php');
?>
</div>
</body>
</html>

Así terminamos 4 artículos relacionados con los procesos principales a una Tabla en una Base de Datos: Consultar, Insertar, Actualizar y Eliminar registros. Y todos estos trabajado con Clases, una buena práctica que todo programador debe tener en cuenta al desarrollar sus aplicaciones. Pueden ver el ejemplo final o descargar los archivos para que los prueben en su servidor local.

Un agradecimiento de parte de Jesús Liñán (jesusvld) a Javier Luna por la ayuda en la publicación de estos prácticos Artículos y Ejemplos.