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.
hola esta muy bueno el codigo, sin embargo tuve un problema al ejecutarlo. En el ejemplo que presentas inserta sin ningun problema, pero al descargar los archivos, modificar la base de datos, ejecutar el index.php y colocar un nuevo registro me sale el mismo error “error de grabacion”, a que se debera? muchas gracias
saludos
Prueba con la lo siguiente:
En el archivo cEmpleado.php ubica la linea 29:
$result=mysql_query($query);
y cambiala por:
$result=@mysql_query($query);
algo parecido a como esta en el método consultar de la clase cEmpleado.
Prueba y me avisas, aunque me parece raro pues en el servidor local y remoto se ejecuta sin problemas, saludos.
hola jesus hize la modificacion pero continua saliendo “error en grabacion” extraño..
yo tambien veo que tu ejemplo funciona pero al probarlo en mi servidor local no funciona..
saludos
ya funciono todo bien gracias el codigo esta a todo dar
saludos
Mil gracias, maestor, he buscado tutoriales de AJAX (Por cierto todos muy complicados y dificiles de entender) Pero estos los entiende hasta el mas tontetas. Un millon de gracias.. Mis respetos hacia tu persona. Y gracias por compartir vuestros conocimientos.
Tengo una duda sobre el reuso, quiero aplicar este mismo codigo a varias tablas de mi bd, pero como son todas distintas y tienen distinto numero de campos no se me ocurre una manera de hacer este algoritmo más genérico. A ver si pueden echarme una mano, gracias
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 reutilizacion 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.
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
Puedes guiarte de este articulo: Consulta de datos con ajax (2), 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
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
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!!!!!
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.
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.
Hola Masterhades el retardo se debe a que en este ejemplo se usa la funcion php sleep que retardar la ejecución del código n segundos.
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.
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
Como podria incluir una funcion si uno de los campos a registrar es un radio button?
Me parece un excelente articulo, abarca lo minimo basico y necesario para construir en base a eso muchas cosas interactuando con el cliente (javascript), ademas su sencillez permite ser didactivo.
Gracias por compartir este tipo de articulos
Hola antes que nada quisiera agradecer y felicitar a las personas que han hecho esta pagina de ayuda, nos han ayudado bastante.
Me he percatado que tbm envían algunas preguntas por acá, así q me anime a preguntarles algo:
Yo he estado utilizando este código para almacenar en mi BD, acoplandolo a mis necesidades,pero me ocurre un problema cuando voy a almacenar varias filas de una tabla html, supongamos que tengo 5 filas, solo me guarda la última, pero acá viene lo mas raro, cuando en el código puse un alert para ver si recorría mi tabla(que si lo hacía) me guardo las 5 filas, volví a quitar mi alert y solo guardo la última fila, volví a poner mi alert y me guardo las 5 filas, es decir SOLO CUANDO PONGO MI ALERT ME GUARDA TODAS LAS FILAS DE MI TABLA: aca les pongo parte de mi codigo:
for(i=0;i<fil;i++){ //fil: NUMERO DE FILAS EN MI TABLA
idanal5[i]=document.getElementById('codigo['+i+']').value;
resultad2[i]=document.getElementById('resul['+i+']').value;
repeti[i]=document.getElementById('repet['+i+']').value;
if(document.getElementById('v['+i+']').checked==true) va[i]=1;
else va[i]=0;
if(document.getElementById('i['+i+']').checked==true) im[i]=1;
else im[i]=0;
ajax5.open("POST","relacionResultado.php");
ajax5.onreadystatechange=function() {
if (ajax5.readyState==4) {
var valores=ajax5.responseText;
alert('Resultado guardado correctamente');
}
}
ajax5.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax5.send("idresult="+idresult+"&codigo="+idanal5[i]+"&resul="+resultad2[i]+"&validado="+va[i]+"&impreso="+im[i]+"&repet="+repeti[i]+"&grabar2="+grabar2);
…..
Buenas tardes, el ejemplo esta genial, solo tengo una pregunta, porque en la implementación de la clase no se desarrolló el constructor?
//constructor
function cEmpleado(){
}
Hola esta muy bien la informacion pero si en tal caso tendria que grabar en dos tablas me explico una informacion para la tabla usuario y otra tabla opcionesdeusuario como haria para mandar esos datos a traves de un solo boton
Gracias he probado los codigos y todo funciona a la perfeccion, lo curioso es cuando le pongo un alert en vez de un simple mensaje en pantallla (echo “Registro grabado correctamente”;) no se ejecuta el alert y quisiera que me ayudes en esto, pues he adaptado el docigo a las necesidades de mi py…MIL GRACIAS
Hola a todos.
Tengo la misma situacion de XTIAN necesito enviar por ajax un a tabla html, pero no se como hacelos como enviar todas las filas de la tabla html, no se si deba ir un for. yo les agradezco de todo corazón a quien me pueda colaborar, estoy en un lio con un proyecto y esto me tiene parada. Gracias por leer mi mensaje
hola man.. interesante tu tutorial… pero tengo una consulta… este tutorial es con una sola tabla (empleado)… como seria con 3 tablas diferentes por ejemplo quiero registrar la venta del dia de un restaurant y tengo como tablas (pedido,empleado, producto) seria de gran ayuda tu respuesta…gracias
Hola antes que nada agradecer por compartir esta información muy util.. Necesito ayuda… necesito ejecutar código javascript dentro de constultar.php por ejemplo mandar un simple alert pero no me permite…. saludos
quisiera saber como puedo iniciar sesion utilizando ajax y php, junto con postgresql.. pero con varios usuarios
Que mejor explicado!
muy bn.
Muchas gracias la verdad, me han ayudado mucho
Saludos, muchas gracias por subir este ejemplo me ha sido de muchisima utilidad. Pero me pasa algo extraño. Se insertan datos en blanco, y en su ejemplo me parece que no se insertan, aparece error al tratar de enviar algo en blanco. Espero y me puedan ayudar. De antemani gracias
que tal muy bueno el tutorial, ahora lo modifique para valide desde .js mis campos del form y no me permita continuar si existen error al momento de ser validados, si cumple con las validaciones continua y me llama a un .php que almacena el registro a la tabla… saludos muy bueno!!!
muy bueno, pero como elimino un registro… cualquiera.
Saludos
tengo un problema con el ejemplo, a que se debe que los datos que envio se guarden bien y al rato no se guarden ,, tengo tres campo input y un text area,, el cual los atrapos con el javascript atraves del id , y luego lo proceso con el ajax
Muchas gracias!!! me ayudo bastante el articulo!
buen código me sirvió 😀
gracias