Inserción de Datos con Ajax y POO con PHP

Tenemos la tabla Empleado. También disponemos de la Clase DBManager, esta Clase la vamos a usar
para verificar y realizar la conexión a la Base de Datos.

La Clase cEmpleado se encuentra en el archivo cEmpleado.php, a esta Clase vamos agregarle un método para que guarde un nuevo registro en la tabla Empleado. A este método lo llamaremos crear() el cual tendrá como parámetros de entrada los datos que se requiere del empleado: Nombre, Departamento, Sueldo. Hay que tener en cuenta que el campo idempleado incrementa automáticamente, por ello no lo incluimos dentro de los parámetros.

Veamos como quedaría este método en el archivo cEmpleado.php:

<?php 
 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;
   }
  }
 
 }
?>

Ya tenemos la Clase cEmpleado con su nuevo método listo para ser usado en cualquier momento. Ahora continuando con el desarrollo vamos a listar todos los empleados de la tabla Empleados. A este archivo lo llamamos consulta.php y va usar las clase cEmpleado. Esta vez vamos a listar los resultados en una tabla HTML. Veamos:

<?php
 include_once("cEmpleado.php");
 
 //creamos el objeto $objempleados de la clase cEmpleado
 $objempleados=new cEmpleado;
 
 //la variable $lista consulta todos los empleados
 $lista= $objempleados->consultar();
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row = mysql_fetch_array($lista)){
  echo "<tr>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Veamos ahora, el proceso de guardado o inserción de los datos en la tabla Empleado, vamos a llamar a este archivo registro.php y notemos que se crea un objeto de la clase cEmpleado y usamos el método crear() donde especificamos los parámetros requeridos. Al final hace un include al archivo consulta.php para listar los nuevos datos.

<?php
 include_once("cEmpleado.php");
 
 //variables POST
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);
 
 //creamos el objeto $objempleados
 //y usamos su método crear
 $objempleados=new cEmpleado;
 if ($objempleados->crear($nom,$dep,$suel)==true){
  echo "Registro grabado correctamente";
 }else{
  echo "Error de grabacion";
 }
 include('consulta.php');
?>

Ahora las funciones en JavaScript, creamos 3 funciones: 1) para crear el objeto XMLHttpRequest, 2) para enviar y recibir los datos del empleado para que sean guardados en la tabla Empleado y 3) para limpiar las cajas de texto del formulario. El archivo ajax.js va así:

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');
 divResultado.innerHTML= '<img src="anim.gif">';
 
 //valores de las cajas de texto 
 nom=document.nuevo_empleado.nombres.value;
 dep=document.nuevo_empleado.departamento.value;
 suel=document.nuevo_empleado.sueldo.value;
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 
 //uso del medoto POST 
 //archivo que realizará la operacion
 //registro.php
 ajax.open("POST", "registro.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divResultado.innerHTML = ajax.responseText
 
   //llamar a funcion para limpiar los inputs
   LimpiarCampos();
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
 //enviando los valores
 ajax.send("nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}
 
//limpiando las cajas de texto
function LimpiarCampos(){
 document.nuevo_empleado.nombres.value="";
 document.nuevo_empleado.departamento.value="";
 document.nuevo_empleado.sueldo.value="";
 document.nuevo_empleado.nombres.focus();
}

Finalmente, el archivo index.php que contendrá un formulario con caja de texto para escribir los datos del empleado y una lista de los empleados registrado. Una vez que pulsamos el botón Grabar, los datos se guardarán en la tabla Empleado y la lista se actualizará automaticamente. Dentro de las etiquetas <head></head> hacemos referencia al archivo ajax.js, en el atributo onsubmit de la etiqueta <form> especificamos la función enviarDatosEmpleado() y en la dentro de las etiquetas <div id="resultado"></div> en la parte final hacemos un include al archivo consulta.php. El archivo quedaría así:

<html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="nuevo_empleado" action="" onSubmit="enviarDatosEmpleado(); return false">
<h2>Nuevo empleado</h2>
<p>Nombres 
<label>
<input name="nombres" type="text" />
</label>
</p>
<p>Departamento 
<label>
<select name="departamento">
<option value="Informatica">Informatica</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Administracion">Administracion</option>
<option value="Logistica">Logistica</option>
</select>
</label>
</p>
<p>Sueldo <strong>S/.</strong>
<label>
<input name="sueldo" type="text" />
</label>
</p>
<p>
<label>
<input type="submit" name="Submit" value="Grabar" />
</label>
</p>
</form>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Se habrá dado cuenta que hemos incluido un método a la clase cEmpleado y ello sin alterar el método anterior. Incluso hemos usado el método consultar() que ya estaba allí. Esto nos hace ver que si programamos Orientando a Objetos, nuestro código se hace flexible y reutilizable.