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ó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.
En esta oportunidad realizaremos una pequeña aplicación que consistirá en ordenar los valores de una consulta de datos (MySQL) mediante hacer clic en el encabezado de la columna. Lo que vamos hacer es relativamente sencillo. Veamos. 
