Actualización de Datos con AJAX y POO con PHP

Siguiendo con el tema de Programación Orientada a Objetos en PHP y AJAX, nos toca ahora abordar el tema de Actualización de Datos (UPDATE SET …) . Hemos venido recalcando y enfatizando que programar así nos ahorra tiempo y mucho código, y permite que nuestro código esté disponible para otros desarrollos.

Empezemos

Hacemos uso de la tabla Empleado, cuya estructura está en el primer artículo de esta serie de artículos, y también usamos la clase DBManager que se encuentra en el archivo DBManager.php.

Nuevamente vamos a agregar algunas funcionalidades a la Clase cEmpleado que se encuentra en el archivo cEmpleado.php. Primero, agregamos el método actualizar() que aceptará parámetros de entrada relacionados con los datos del Empleado, como son: CodEmpleado, Nombre, Departamento, Sueldo. Esta vez si incluimos en los parámetros el CodEmpleado pues cuando hagamos un UPDATE a la tabla Empleado debemos especificar el ID del registro. Luego agregamos el método consultarid() que aceptará como parámetro de entrada el Codigo del Empleado. Veamos como queda el archivo:

<?php
 //referenciamos la clase DBManager
 include_once("DBManager.php");
 //implementamos la clase empleado
 class cEmpleado{
  //constructor
  function cEmpleado(){
  }
  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }
  //inserta un nuevo empleado en la base de datos
  function crear($nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "INSERT INTO empleados (nombres, departamento, sueldo)
    VALUES ('$nom','$dep',$suel)";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }
  // actualizar un nuevo empleado en la base de datos
  function actualizar($cod,$nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true) {
    $query = "UPDATE empleados SET nombres='$nom', departamento='$dep', sueldo='$suel'
    WHERE idempleado=$cod";
    $result = mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }
  // consulta empleado por su codigo
  function consultarid($cod){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "SELECT * FROM empleados WHERE idempleado=$cod";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }
 }
?>

Un par de consultas

Vamos a crear dos archivos: 1) para la consulta de todos los empleados y 2) para la consulta de un empleado en particular. Empezemos con el primero, al cual llamaremos consulta.php. Notemos que en cada celda de la primera columna, donde va el Codigo del empleado, los elementos hacen referencia a la función JavaScript PedirDatos() que recibe como parámetro el ID del empleado, los detalles de esta función aparecen mas abajo.

<?php
include_once("cEmpleado.php");
//creamos objeto
$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=\"pedirDatos('".$row['idempleado']."')\">".$row['idempleado']."</a></td>";
   echo "<td>".$row['nombres']."</td>";
   echo "<td>".$row['departamento']."</td>";
   echo "<td>".$row['sueldo']."</td>";
   echo "</tr>";
}
?>
</table>

Ahora el segundo archivo, que realiza un consulta de un empleado en particular según su código o ID y lo muestra en un formulario, a este archivo le llamaremos consulta_por_id.php:

<?php
 include_once("cEmpleado.php");
 //capturamos el valor del id del empleado
 $idemp=$_POST['idemp'];
 //creamos el objeto
 $objempleado = new cEmpleado;
 $consulta=$objempleado->consultarid($idemp);
 $row = mysql_fetch_array($consulta);
 //valores de las consultas
 $nom=$row['nombres'];
 $dep=$row['departamento'];
 $suel=$row['sueldo'];
 //muestra los datos consultados en los campos del formulario
?>
 <form name="frmempleado" action=""
 onsubmit="enviarDatosEmpleado(); return false">
 <input name="idempleado" type="hidden" value="<?php echo $idemp; ?>" />
 <p>Nombres
  <input name="nombres" type="text" value="<?php echo $nom; ?>" />
 </p>
 <p>Departamento
  <select name="departamento">
<?php
 echo "<option value=\"".$dep."\">".$dep."</option>"
?>
   <option value="Informatica">Informatica</option>
   <option value="Contabilidad">Contabilidad</option>
   <option value="Administracion">Administracion</option>
   <option value="Logistica">Logistica</option>
  </select>
 </p>
 <p>Sueldo <strong>S/.</strong>
  <input name="sueldo" type="text" value="<?php echo $suel; ?>" />
 </p>
 <p>
  <input type="submit" name="Submit" value="Actualizar" />
 </p>
</form>

Proceso principal

El archivo que realizará el proceso de recibir los datos y realizar la actualización será: actualizacion.php.

<?php
 include_once("cEmpleado.php");
 //variables POST
 $idemp=$_POST['idempleado'];
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);
 //actualiza los datos del empleados
 $objempleado = new cEmpleado;
 if ($objempleado->actualizar($idemp,$nom,$dep,$suel)==true){
  echo "Datos Actualizados";
 }else{
  echo "No se pudo actualizar";
 }
 include('consulta.php');
?>

Funciones en JavaScript

Especificaremos 3 funciones: 1) una que se encargue del objeto XMLHttpRequest, 2) otra que envie los datos que serán actualizados y 3) otra que consulte los datos de un empleado en particular y los muestre en un formulario. Este archivo se llama ajax.js.

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 enviarDatosEmpleado(){
 //donde se mostrará lo resultados
 divResultado = document.getElementById('resultado');
 divFormulario = document.getElementById('formulario');
 divResultado.innerHTML= '<img src="anim.gif">';
 //valores de los cajas de texto
 id=document.frmempleado.idempleado.value;
 nom=document.frmempleado.nombres.value;
 dep=document.frmempleado.departamento.value;
 suel=document.frmempleado.sueldo.value;
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 //usando del medoto POST
 //archivo que realizará la operacion ->actualizacion.php
 ajax.open("POST", "actualizacion.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar los nuevos registros en esta capa
   divResultado.innerHTML = ajax.responseText
   //una vez actualizacion ocultamos formulario
   divFormulario.style.display="none";
  }
 }
 //muy importante este encabezado ya que hacemos uso de un formulario
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //enviando los valores
 ajax.send("idempleado="+id+"&nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}
function pedirDatos(idempleado){
 //donde se mostrará el formulario con los datos
 divFormulario = document.getElementById('formulario');
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 //uso del medotod POST
 ajax.open("POST", "consulta_por_id.php");
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divFormulario.innerHTML = ajax.responseText
   divFormulario.style.display="block";
  }
 }
 //como hacemos uso del metodo POST
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //enviando el codigo del empleado
 ajax.send("idemp="+idempleado)
}

Finalmente ….

El archivo index.php hace referencia al archivo JavaScript que vamos a usar: ajax.js. Dentro de las etiquetas <div id="formulario"></div> aparecerá un formulario con los datos del empleado. Mas abajo dentro de las etiquetas <div id="resultado"></div> hace un include a consulta.php el cual nos listará todos empleados.

<html>
<head>
<title>Actualizacion con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h2>Modificar datos del empleado</h2>
<p>Clic en el c&oacute;digo del empleado para modificar sus datos. </p>
<div id="formulario">
</div>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Queremos resaltar que nuestra Clase cEmpleado tiene 2 métodos más y hemos agregado estos sin alterar nada de los otros 2 métodos que ya estaban allí, realmente estamos reutilizando nuestro código. Puede ver el ejemplo en ejecución y/o descargar los archivos que usamos para el proceso de Actualización. Próximo artículo Eliminar datos.