Formulario e inserción de datos en la base de datos método 2 (ajax). Tutorial 7

El método anterior para inserción de datos se basa en volver a cargar un controlador, en post y get, pero hoy en día ese método de volver a cargar toda una página resulta muchas veces ser ineficiente, entonces el ajax lo que te permite es SIN necesidad de volver a cargar toda una página, todos unos archivos, agregar o editar la información en “Tiempo Real” y mostrar los resultados en la misma página donde los estas agregando.

Nuevamente primero organizaremos los pasos para luego empezar a codificar

1) crear un template un formulario donde podamos recoger la información, la característica de este formulario es que no tendrá la parte del form, porque este formulario NO nos enviara a otro sitio.

2) crear un controlador que nos permita mostrar el template anterior, este controlador a diferencia del de el tuorial pasado no tendrá post ni get ni la función agregar, será nuevamente muy muy sencillo.

3) crear una o varias funciones javascript q nos permita recolectar en tiempo real la información que se lleno en el formulario anterior.

4) crear un archivo php que nos recoja la información que envio el javascrip anterior, y luego se conecte a la base de datos para agregar los datos.

5) crear otra función javascript que recoja el resultado de ese archivo php y que muestre en la pagina actual el aviso de que se agrego correctamente la información.

EMPECEMOS

Codificación 1

Archivo: agregarpersona.tpl – C://wamp/www/trabajo/templates/agregarpersona.tpl


<html>
<title></title>
<head>
{literal}
<script type="text/javascript" charset="utf-8" src="varios/funciones.js"></script>
{/literal}
</head>
<body>

<div id="mensajeoculto" style="display:none">
<table border="0" cellspacing="10"><tr><td>
<b>Aviso</b><br />
<div id="respuesta"></div>
</td></tr></table>
</div>

<table border="0" cellspacing="10">
<tr><td><b>Documento:</b></td><td class="informacion"><input type="text" name="documento"></td></tr>
<tr><td><b>Nombre:</b></td><td class="informacion"><input type="text" name="nombre"></td></tr>
<tr><td><b>Apellido:</b></td><td class="informacion"><input type="text" name="apellido"></td></tr>
<tr><td><button onclick="guardarregistro('persona',this)">Agregar</button></td><td>&nbsp;</td></tr>
</table>
</body>
</html>

El código anterior, es lo que muestra es: primero incluyo un archivo .js que es donde van a estar todas las funciones que me permiten trabajar con javascript, como ven esa línea esta entre etiquetal {literal} {/literal} ya que smarty solo me permite usar scripts cuando uso estas etiquetas; luego hay una división, de oculto, esa división solo se mostrara cuando una persona sea agregada (ahí va un truco); luego creo una tabla de 4 filas por 2 columnas, como podemos ver las columnas donde agrego los input son de clase “informacion” (eso me lo invente yo) simplemente lo que hago es que esas columnas las voy a tratar de un modo especial, ya que lo que diferencian esas columnas de las otras es que de ahí debo sacar la información que digita el usuario. Y por ultimo creo un botón que al darle clic ejecutara la función guardarregistro que leera los datos y realizara otros pasos que explicare en la codificación 3.

Codificación 2

Archivo: agregarpersona.php – C://wamp/www/trabajo/agregarpersona.php


<?php

//cargamos las librerías de smarty
require('include.php');

class agregarpersona {

public function display()
{
global $smarty;

//Muestra por pantalla todos los diferentes templates
$smarty->display('agregarpersona.tpl');
}

}

$call = new agregarpersona();
$call->display();

?>

Es un simple controlador que muestra el archivo agregarpersona.tpl

Codificación 3 y 5 (juntamos estas codificaciones ya que las funciones están juntas dentro del mismo archivo)

Archivo: funciones.js – C://wamp/www/trabajo/varios/funciones.js


function guardarregistro(tipo,obj)
{
var j=0;
var resultados = new Array();;

while (obj.tagName!='TABLE')
obj = obj.parentNode;

var td = obj.getElementsByTagName('TD');
var len = td.length;

for (var i=0; i<len; i++)
{
if(td[i].className=='informacion')
{
resultados[j]=td[i].firstChild.value;
j=j+1;
}
}

procesarregistro(resultados,tipo);
}

function procesarregistro(re,tipoformato)
{
ajax=objetoAjax();
ajax.open("POST", "ajax.php",true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{}
if (ajax.readyState==4)
{
data = ajax.responseText.split('[INTER]');
mostraraviso(data); // una vez recogemos la respuesta, actualizamos las columnas
}
}

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

if (tipoformato == 'persona')
{
ajax.send("documento="+re[0]+"&nombre="+re[1]+"&apellido="+re[2]+"&tipoformato="+tipoformato);
}
}

function mostraraviso(data)
{
document.getElementById('mensajeoculto').style.display='';
divResultado = document.getElementById('respuesta');
divResultado.innerHTML = data[0];
}

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

- Funcion guardarregistro: cuando se da clic en el botón Agregar, se llama esta función, esta función envia la posición en la que estaba parado el botón, apartir de esta posición busca la primer tabla (table) que contega esa posición, una ves encontrada esa primera tabla, busca todas las columnas o td dentro de esa tabla, luego hace un for o un recorrido por todos los td, dentro de ese recorrido analiza SI el td es de clase información (osea un input) entonces recoge la información que hay allí guardada y la asigna a un vector. Finalmente envia todos los resultados a la función procesarregistro, y una variable “tipo” que en el botón definimos como “persona”.

- Funcion procesarregistro: crea un objeto tipo ajax (este objeto o función esta definido mas abajo y es una función general, algo global que se ha definido para todos los ajax y no fue inventado por mi) este objeto ajax luego indica que va a enviar los datos pot POSt a un archivo ajax.php luego el ajax.send envia los datos en el orden en el cual fueron recolectados y por ultimo luego de que se ejecute lo que hay dentro de ajax.php (que veremos en codificación 4) llama la función mostrar aviso.

- Funcion mostrar aviso: recolecta lo que envio el ajax.php y anteriormente habíamos definido en agregarpersona.tpl una división “mensajeoculto” como oculta que nos e mostrara, en este caso mostraraviso activa esa división, y además en la división le asigna el mensaje que envio el ajax.php (el ajax.php es visto en codificación 4).

Codificación 4

Archivo: ajax.php – C://wamp/www/trabajo/ajax.php


<?php
include_once ("varios/gestor.php");

class ajaxclas{

public function funciones($Datos)
{
$myGestorBD = new gestor();
$myGestorBD->conectar();
$myGestorBD->agregar($Datos['tipoformato'],$Datos);
$myGestorBD->cerrarConexion();

echo "Informaci&oacute;n agregada correctamente";
}
}

$Datos = $_POST;
$call = new ajaxclas();
$call->funciones($Datos);

?>

Es un archivo muy sencillo, simplemente recoge por post los datos, llama a la función “funciones” y crea un objeto tipo gestor, y le dice que agregue una persona y le envia los datos. Lo raro de esta función es que hace un “echo” o impresión de datos, y si saben de php un echo muestra datos por pantalla, pero en este caso como el ajax.php fue llamado por un objetoajax, el echo no se mostrara si no que será devuelto al objeto ajax que lo llamo. En este caso ese mensaje de información agregada correctamente, será devuelta y luego enviada a mostraraviso, allí mostrar aviso lo asignara al template y ahí si saldrá por pantalla.