Inserció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 Registro de Datos (INSERT INTO ...) . Como ya hemos mencionado son ejemplos prácticos que ya tocamos anteriormente pero en esta oportunidad los trabajaremos con Clases en PHP. El objetivo es demostrar que trabajar de esa forma ahorra tiempo y hace nuestro código reutilizable, y si queremos agregar algunos procesos a nuestras clases no se altera (casi nada) el resto de procesos.

Empezemos entonces

Tenemos la tabla Empleado, cuya estructura se mostró en el artículo anterior. También disponemos de la Clase DBManager que se encuentra en el archivo DBManager.php, esta Clase la vamos a usar nuevamente 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í. Esta Clase irá ampliandose en los próximos artículos. Esto nos hace ver que si programamos Orientando a Objetos, nuestro código se hace flexible y reutilizable. El próximo artículo tratará la Actualizacion de datos. El ejemplo final y los archivos para descarga están disponibles.

Compartir/Guardar artículo

Comentarios

  1. avatar jesusvld 2008-09-20 14:48:59 17 El articulo y ejemplo tratan lo basico para guardar datos usando PHP MYSQL y AJAX, ya cada uno se encargará de añadirle funcionalidad: validando las entradas y procesos, etc
  2. avatar Ivan Fiestas 2008-09-20 10:28:56 16 Bueno en este formulario lo que se te ha escapado de las manos es el que al grabar el archivo, se debe deshabilitar el boton grabar. Por que de lo contrario tu le haces click las veces que quieras y sigue grabando!!.

    Pruebalo haciendole click varias veces mientras tu formulario intenta grabar.
  3. avatar jesusvld 2007-09-28 17:56:07 15 Hola Masterhades el retardo se debe a que en este ejemplo se usa la funcion php <strong>sleep</strong> que retardar la ejecución del código n segundos.
  4. avatar Masterhades 2007-09-28 08:56:04 14 Hola amigos otro detalle, he notado tb, de que este ejemplo a la hora de insertar datos tiene un reatardo del registro a la bd. en cambio tienen otro el cual es instantaneo y me gustaria saber el porque?... Se deberia a las Clases? u es otra cosa? espero puedan despejarme esta duda.
  5. avatar Masterhades 2007-09-27 13:18:54 13 Hola amigos algo curioso me pasa, a este codigo le hice un cambio para que me trabaje con unas funciones que tengo en un archivo externo, todo funciona pero a la hora de registrar pues no se vuelve a incluir el archivo consulta.php, es decir no me muestra de nuevo la tabla. empleados. y no se porque.. al parecer creo yo que pueda ser por la instancia de mi conexion, pero no logro hacer que me muestre alguna idea??.. gracias.. muy buen codigo en verdad.
  6. avatar Alejandro 2007-05-31 23:28:34 12 mil gracias.. tenia un problema al listar los registro en la tabla...

    con tu ejemplo .. kede re-claro , y ahra me funka lo ke me estaba dando problemas...... gracias x tu ap0rtEEEE!!!!! <img style="border:0px;" src="/img/caritas/enojao.gif" alt="enojado" title="Enojado" width="18" height="18" />
  7. avatar toño 2007-05-24 11:41:46 11 hola:

    mira la verdad estoi probando el archivo insercion de datos y la verdad necesito hacerte una preguntilla..

    ¿porque al cambiar sueldo de double a varchar no logra grabar?
    lanza: error en grabacion

    y si uno lo deja varchar y cambia esto: VALUES ('$nom','$dep', $suel)";
    por esto: VALUES ('$nom','$dep', '$suel')";
    la verdad es que al cambiar por '$suel' graba cualquier cosa.. no importa si se grabó algo o no en las cajas de texto.

    me gustaria saber eso jesusvld.. porque double y no varchar o cualquier otro tipo.. e incluso al eliminar el sueldo de todos los archivos .. lanza el mismo error y tampoco graba.

    saludos <img style="border:0px;" src="/img/caritas/feliz.gif" alt="feliz" title="Feliz" width="18" height="18" />
  8. avatar jesusvld 2007-04-24 11:51:40 10 Puedes guiarte de este articulo: <a href="http://www.ribosomatic.com/articulos/112/consulta-de-registros-en-ajax-2/">Consulta de datos con ajax (2)</a>, en donde al elegir un elemento del un list muestra los datos relacionados, quizás este ejemplo te pueda ayudar a lo que intentas hacer. Saludos <img style="border:0px;" src="/img/caritas/feliz.gif" alt="feliz" title="Feliz" width="18" height="18" />
  9. avatar Belem 2007-04-23 11:39:09 9 Disculap mira tengo unpequeño problema, tengo tres lmenu list al momento de selecionar uno quiero que se actualiza la informacion de los otros dos list por medio de ajax
  10. avatar jesusvld 2007-01-25 09:49:19 8 Por lo general, cada tabla en nuestra base de datos viene hacer una clase (no es una regla). Y las operaciones principales (select, insert, update, delete) son sus metodos, por su puesto a parte tendrán otros metodos dependiendo de la funcion que realizarán, por ejemplo un metodo llamado ConsultarSoloID() o NumeroDeRegistros().

    En el ejemplo del articulo, se uso una sola clase llamado cEmpleado (sino me equivoco) para la tabla empleado, con sus metodos principales. La idea de <strong>reutilizacion</strong> se aplica al llamar a los metodos de las clase a través de objetos. Por ejemplo, quiero el Numero de empleados en la tabla empleado, llamaria a su metodo NumeroDeEmpleados() y este devolvería un valor. Pero lo que hay detrás de este metodo es la conexion, una consulta y la devolucion de esta. Esta lineas nos las ahorramos, porque ya esta todo en un metodo de la clase empleado, y cada vez que queramos saber cuantos empleados hay simplementes llamamos al metodo.

Dejar un comentario


Navegación

Categorias

Archivos

Monitored by eXternalTest