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.