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.
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.
