Programacin PHP orientada a objetos, con separacin por capas y Smarty.

Tutorial 1
Programacin PHP orientada a objetos, con separacin por capas y Smarty. A continuacin veremos el primer tutorial de programacin php de una serie de muchos tutoriales, que explicara detalladamente una forma mi forma de programar tanto pginas web, como software y herramientas para la web. El gran problema en el mundo actual en el desarrollo de software y de webs en php, es que cada quien programa como se le da la gana no hay una serie de lineamientos ni bases que permitan rehusar fcilmente el cdigo de otro programador en nuestros trabajos, muchas veces ni siquiera podemos rehusar nuestro propio cdigo y repetimos varias veces las mismas lneas y los mismos pedazos de cdigos, por lo cual muchas veces es mas el tiempo que gastamos intentando reconstruir el cdigo de otras personas, que el tiempo que hubisemos gastado creando una pieza o herramienta desde 0 sin mirarle a nadie. Adems de no entender el cdigo ni la forma de programar de los dems, otra gran desventaja es que el trabajo en equipo se vuelve muy complicado y al final una sola persona termina desarrollando todo el producto; por lo cual seguir un mismo lineamiento se vuelve supremamente efectivo para el desarrollo en equipo y para comprender todas las extensiones del php. Otro gran problema en el desarrollo php, es que los programados tienden a hacer del cdigo un vomito juntan diferentes lenguajes en un solo archivo, juntan php con html, php con javascript, con css, con consultas sql con ajax y el cdigo aunque funciona se vuelve perversamente inentendible. Por lo tanto he decidido explicar un mtodo que junto con un profesor de la universidad nacional de Colombia (Fernando Arango) y un grupo de programadores php, hemos venido desarrollando durante los ltimos aos. Anteriormente para desarrollar una pgina o software me poda demorar varios meses, hoy en da con estos mtodos en cuestin de 1 o 2 semanas o incluso das se tendr lista una pgina o software. 1) Por qu usar PHP?

Porque todos los navegadores lo traen instalado, no es como java o c++ donde necesitas instalar en cada computador ese programa y verificar que si funcione; porque indexa muy bien en los buscadores, rpidamente se difunde en la web y hace que nuestras pginas aparezcan ah; porque est muy bien documentado existen miles y miles de tutoriales en la web y ha mostrado muy buen desempeo y es un lenguaje de fcil entendimiento adems de que se integra muy bien con otros lenguajes como javascript, css, entre otros. 2) Que es la separacin por capas? La separacin por capas, son una serie de reglas, una serie de divisiones que se le da al cdigo, ms adelante se detallara muy bien este punto; el caso es que vienen a ser unos mandamientos que se deben cumplir para garantizar un cdigo reutilizable funcional y al que se le puede hacer mantenimiento. En el caso ms simple la separacin por capas viene dada del siguiente modo: 2.1) Capa gestor: es la capa en la cual va la conexin a la base de datos y todas las consultas y funciones que adicionan, editan, eliminan o recuperan datos de la base de datos; en nuestro caso ser un archivo llamado gestor.php 2.2) Capa controlador: es la capa intermedia que manda peticiones y datos a la capa gestor y que decide que es lo que se muestra por pantalla y que no se muestra. En nuestro caso sera por ejemplo un index.php en este capa jams ira un cdigo html. 2.3) Capa vista: es la capa que muestra los datos por pantalla, son los templates o archivos html, se conectan solo con la capa controlador, jams se pueden conectar con la capa gestor, aqu NUNCA abra una sola lnea de cdigo php, siempre ser html, y adems se complementara con Smarty que mas adelante analizaremos que es. Muchas veces entre la capa del controlador y gestor se agrega la capa objetual, pero vamos a ver qu dependiendo del programa es o no necesaria, por el momento olvidmonos de este capa y trabajemos solo con las 3 capas anteriores. Ms adelante mostraron un ejemplo muy sencillo del funcionamiento de estas capas, para darle mayor comprensin al programador. 3) Que es Smarty? Smarty es la herramienta clave para poder hacer la separacin por capas, simplemente permite al programador separa el cdigo php del html y usar una serie de etiquetas smarty; es un lenguaje supremamente sencillo, y en mi opinin en vez de complicar las cosas (porque algunos

piensan que manejar otro lenguaje es complicar las cosas) facilita tremendamente que el cdigo sea ms claro y ms sencillo. 4) Que es programacin orientada a objetos? Es simplemente una forma de programar donde se usan clases, mtodos y funciones; mas adelante veremos los tips o claves de nuestro mtodo de programacin. 5) Crear todo desde cero? Claro que si si le vas a desarrollar una web a alguien y te van a pagar entonces Porque usar

joomla, wordpress, vbulletin o cualquier paquete para hacerla? muchas veces la gente lo usa creyendo que ahorrara tiempo, pero realmente se demora mas entendiendo esos cdigos e intentando modificarlo o buscando plugins, que desarrollndolos desde cero, un blog bsico es algo muy sencillo de hacer y yo me demore 4 das crendolo desde cero, mientras que tratando de modificar un joomla me demore semanas y abandone esa opcin, mas adelante creare un tutorial de como hacer blogs o cosas avanzadas que en realidad son muy sencilla y nos harn sentir orgullosos de nuestros trabajos En el prximo tutorial que estoy creando, veremos ahora si un ejemplo de un cdigo del desarrollo mas bsico de un programa con nuestro mtodo.

Wampserver. Tutorial 2
WampServer Wampserver es el programa que nos permitir hacer de nuestro computador un servidor, montar nuestros trabajos php y verlos en funcionamiento. Se descarga desde aqu: http://www.wampserver.com/en/download.php Una vez instalado deben tener en cuenta, todos los desarrollos php que se vayan a hacer deben ir en la carpeta c://wamp/www/ en ese directorio debern crear una carpeta por cada pagina o desarrollo, y dentro de esa carpeta debern montar todos los archivos de su desarrollo. Es importante tener en cuenta que wampserver aveces presenta conflictos con skype, por lo cual se sugiere no abrir estos simultneamente. Otra cosa es que el wampserver es muy escandaloso con los warnings o alertas, por lo cual es muy importante hacer lo siguiente, dar clic en el icono de wampserver en la barra de inicio; luego pararse en la carpeta PHP y dar clic en php.ini

Esto abrir un archivo en bloc de notas, deben buscar la lnea error_reporting = E_ALL y sustituirla por error_reporting = E_ALL & ~E_NOTICE Lo ultimo es reiniciar el wampserver y ya estar listo para trabajar.

Que es Smarty y como usarlo, un ejemplo. Tutorial 3

Que es Smarty y como usarlo, un ejemplo Como lo dijimos en un tutorial pasado Smarty es la herramienta clave para poder hacer la separacin por capas, simplemente permite al programador separa el cdigo php del html y usar una serie de etiquetas smarty Una vez instalado el wampserver, vamos a hacer nuestro primer desarrollo con smarty. Nota (Regla): nunca crear nombres de carpetas o archivos empezando con mayuscula, nunca usar mayuscula siempre minuscula, aveces general problema al llamar archivos o carpetas desde otros lugares por la bendita mayuscula 1) Creamos una carpeta llamado trabajo en la ruta C://wamp/www/ 2) Dentro de esta carpeta crearemos las siguientes carpetas: - C://wamp/www/trabajo/cache/ - C://wamp/www/trabajo/configs/ - C://wamp/www/trabajo/images/ - C://wamp/www/trabajo/smarty/ - C://wamp/www/trabajo/templates/ - C://wamp/www/trabajo/templates_c/ - C://wamp/www/trabajo/varios/ Las carpetas cache, configs, smarty, templates, tempaltes_c son de uso exclusivo para smarty; en la carpeta images guardaremos mas adelante todas las imgenes, y en la carpeta varios, guardaremosmas adelante archivos de javascript, el gestor.php, archivos de estilo y muchas otras cosas. 3) Descargamos smarty desde aqu: http://www.smarty.net/download Una vez descargado lo descomprimimos y ojo! Entramos a la carpeta libs y TODO lo que hay ah (dentro de la carpeta libs) lo copiamos y lo pegamos dentro de la carpeta

C://wamp/www/trabajo/smarty/ esos son los archivos necesarios, el resto de archivos que trae ese comprimido no son necesarios son ejemplos o demos de smarty 4) Crearemos un archivo llamado include.php en esta ruta: C://wamp/www/trabajo/include.php con lo siguiente:

<?php define ('RUTA','http://localhost/trabajo/'); include_once('C:/wamp/www/trabajo/smarty/Smarty.class.php');

$smarty = new Smarty;

$smarty->template_dir = 'C:/wamp/www/trabajo/templates'; $smarty->config_dir = 'C:/wamp/www/trabajo/configs'; $smarty->cache_dir = 'C:/wamp/www/trabajo/cache'; $smarty->compile_dir = 'C:/wamp/www/trabajo/templates_c'; ?>

Lo anterior indica lo siguiente: Definimos una variable RUTA que es la ruta va web de nuestro proyecto trabajo. - En la tercera lnea incluimos la clase smarty la cual es esencial para todo el proyecto. - En la cuarta lnea creamos un nuevo objeto tipo smarty. - En el resto de las lneas definimos los directorios smarty donde se va a ubicar informacin clave; por ejemplo definimos el directorio template_dir en la carpeta templates lo cual indica que ah irn todos los archivos html, el directorio de templates_c que ser donde se ubiquen los cache de los templates pre cargados para que la pagina cargue mas rpido y muchas otras cosas que en otros tutoriales explicaremos. 5) creamos un archivo index.php que ser el controlador y el primer archivo que manejara la informacin

<?php

//cargamos las libreras de smarty require('include.php');

class index {

public function display() { global $smarty;

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

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

?>

Lo anterior indica lo siguiente: - En la lnea de require, incluimos el archivo que anteriormente creamos. - En la lnea de class creamos una clase llamada index (todos los controladores se sugieren que sean clases para seguir el mismo lineamiento en todos los archivos y que sea de fcil manejo) - En la lnea de public function display lo que hacemos es que crearemos una funcin que ser caracterstica de todos los controladores que es donde decidimos que mostrar por pantalla en este caso, esa funcin tiene la lnea global smarty, que indica que coger el objeto smarty que creamos en el include (debe ser global porque no est definida dentro de la clase, si no fuera de la clase) y por ultimo usando este objeto smarty usamos una funcin de smarty llamada display que lo que hace es que muestra por pantalla algn archivo .tpl o .html (son lo mismo) que se debe encontrar ubicado dentro del directorio de template que definimos anteriormente en include.php y que es el directorio templates en este caso coge un archivo llamado hola.tpl y que debe estar ubicado en C://wamp/www/trabajo/templates/hola.tpl el cual crearemos enseguida. - Por ultimo cuando entramos desde el navegador a http://localhost/trabajo/index.php el navegador NO lee lo que hay por dentro de la clase, si no que lee la lnea donde se incluye el include.php y luego salta hasta el final de la definicin de la clase, y lee la lnea donde creamos un nuevo objeto tipo index.php $call = new index(); y seguidamente llama la funcin display y ejecuta lo que hay all dentro (mostrando finalmente lo que hay dentro de hola.tpl) 6) Creamos el archivo hola.tpl en la ubicacin C://wamp/www/trabajo/templates/hola.tpl

<html> <title></title> <body>

hola

</body> </html>

Este archivo simplemente muestra un mensaje de hola 7) entramos al navegador a esta pagina http://localhost/trabajo/index.php y vemos que sale el aviso de hola. Aunque parece algo muy bobo y un poco complicado, son los primeros pasos muy muy escensiales para una buena programacin php, el resto ser repetir este proceso varias veces e ir agregando cosas.

Phpmyadmin, creacin de una base de datos y tabla. Tutorial 4

Phpmyadmin, creacin de una base de datos y tabla Es muy importante que toda la informacin este almacenada en una base de datos por cuestiones de seguridad, en este tutorial vamos a crear una tabla desde phpmyadmin en wampserver, y en los 2 prximos tutoriales siguientes vamos a aprender a llenar la informacin de esta tabla desde un proyecto php y vamos a aprender a manejar el gestor de base de datos el cual es fundamental para todo desarrollo. Lo primero que debemos hacer es abrir wampserver y luego entrar a http://localhost/phpmyadmin/ seguidamente dar clic en privilegios y a continuacin dar clic en agregar un nuevo usuario despus colocamos: Nombre de usuario: prueba Servidor: y de la lista desplegable que hay lado seleccionamos Local Contrasea: prueba

Y finalmente chuleamos la opcin Crear base de datos con el mismo nombre y otorgue todos los privilegios; Por ultimo clic en continuar y ya tenemos creada nuestra primer base de datos (prueba) y tenemos asignado un usuario con el mismo nombre (prueba). En la parte izquierda nos aparecer el nombre de la base de datos (prueba) damos clic ah, y luego procedemos a crear una tabla, en nuestro caso crearemos una tabla que se va a llamar persona y que va a tener 3 campos. Entonces colocamos lo anterior: Nombre: persona Numero de campos: 3 Seguidamente procederemos a llenar los datos como muestra la imagen:

a la persona simplemente le colocaremos un documento, un nombre y un apellido; el documento ser la clave primaria, la clave primaria es aquella que identifica o diferencia una persona de otra, como sabemos no pueden existir 2 personas con un mismo documento, y en este caso el documento ser INT que son nmeros enteros; los otros 2 campos sern tipo texto (varchar) y tendrn una mxima longitud de 100 caracteres. Es FUNDAMENTAL que todas las tablas que se creen sean de tipo InnoDB esto nos permitir ms adelante crear claves forneas (las cuales explicaremos en otro tutorial). Por ltimo damos clic en Grabar y ya tenemos creado nuestra primera tabla y nuestra primera base de datos; en el prximo tutorial veremos cmo es el manejo del gestor y ms adelante insertaremos datos desde una pgina web a esa base de datos.

Gestor de base de datos. Tutorial 5

Gestor de base de datos El gestor de base de datos es un archivo que nos permitir en todos nuestros proyectos, conectar a la base de datos para: guardar datos, eliminar datos, editar datos, sacar datos y mucho mas. Este ser el UNICO archivo en el cual se colocaran las consultas sql, y ser el nico archivo que tendr la contrasea y el nombre de la base de datos y servidor. El siguiente cdigo, es un cdigo que actualmente utilizo en TODAS las pginas y/o software que requieren de una base de datos, es un archivo que a pesar de varios aos que han pasado no e necesitado modificarlo. Obviamente para cada pgina y para cada software deberemos agregar funciones adicionales, pero las funciones que pegare son las ms generales y son demasiado tiles. Continuando con los tutoriales anteirores, este archivo deber ser guardado en C://wamp/www/trabajo/varios/gestor.php

<?php

class gestor{

var $servidor = "localhost"; var $user = "prueba"; var $pass = "prueba"; var $db = "prueba"; var $cn;

function gestor(){ }

function conectar(){ $this->cn = mysql_pconnect($this->servidor, $this->user, $this->pass ); if ( !$this->cn ) die("Fallo en la conexion a la base de datos: ".mysql_error()); if(!mysql_select_db($this->db)) die ( "No fue posible comunicarse con la base de datos $db: ".mysql_error()); }

function realizarOperacion($codigo){ $resultado = mysql_query($codigo, $this->cn) ; }

/**Realiza una consulta sobre la BD*/ function consultar($codigo){ //vector donde se almacenaran los resultados de la consulta; cada elemento sera un registro $datos = array(); $resultado = mysql_query($codigo, $this->cn) or die(mysql_error($this>cn)); while ( $row = mysql_fetch_object($resultado) ){ array_push($datos, $row); } return $datos; }

/**Cierra la conexion a la BD*/ function cerrarConexion(){ if($this->cn) mysql_close( $this->cn ); }

} ?>

Explicacion: Las 4 variables que aparecen en el gestor, son el servidor, que en nuestro caso es localhost, el nombre de usuario que debe ser prueba, la contrasea que tambin es prueba, y el nombre de la base de datos que igual que el usuario es prueba. Funcion conectar: nos permite conectarnos a la base de datos. Funcion realizarOperacion: permite realizar consultas o modificacin a la base de datos. Funcion consultar: permite sacar datos de la base de datos y los transforma en forma de objeto (mas adelante veremos como los saca y como utilizamos esa informacin que sacamos)

Funcion cerrarConexion: como su nombre lo indica cierra la conexin que se establece con la base de datos, es FUNDAMENTAL siempre que se haga una conexin, y luego se realicen todos los procedimientos necesarios al final cerrar la conexin para no sobrecargar el servidor. Gracias a estas funciones en el prximo tutorial podremos realizar nuestra primera insercin a la base de datos para guardar la informacin de forma segura.

Formulario e insercin de datos en la base de datos mtodo 1 (get y post). Tutorial 6

Formulario e insercin de datos en la base de datos mtodo 1 (get y post). Tutorial 6 Basndonos en los tutoriales pasados, en la tabla persona y en el gestor de datos, vamos a hacer una simple insercin desde un formulario web a la base de datos, usando un solo archivo php (controlador) y continuando con la tcnica de separacin por capas que se hablo en el primer tutorial. En el desarrollo php es supremamente importante, antes de empezar a copiar cdigo php, pensar bien las cosas que se van a hacer (los pasos que hay que realizar). En este caso los pasos son los siguientes: 1) Desarrollar un template el cual tenga un formulario para recolectar el nombre, apellido y documento de una persona. 2) Desarrollar un controlador, desde el cual se llame ese template y en el caso de que ya se haya introducido informacin se deber enviar la informacin al gestor y luego mostrar otro template donde haya un aviso diciendo que la informacin fue agregada correctamente. 3) Agregarle las funciones de adicionar personas a la base de datos al gestor. Los pasos son muy sencillo, y una ves uno tiene bien definido esos pasos podr seguir con el proceso de codificacin. Codificacin 1 Archivo: agregarpersona.tpl C://wamp/www/trabajo/templates/agregarpersona.tpl

<html> <title></title> <body>

<table border="0" cellspacing="10"><tr><td> <form action="agregarpersona.php?opcion=agregar" name="agregarpersona" method="post"> <b>Documento:</b> <input type="text" name="documento" /><br /> <b>Nombre:</b> <input type="text" name="nombre" /><br /> <b>Apellido:</b> <input type="text" name="apellido" /><br /> <input type="submit" value="Agregar" /> </form> </td></tr></table> </body> </html>

El template lo llamaremos agregarpersona.tpl (es muy importante utilizar nombres acordes a lo que hace cada cosa) todos los formularios deben ser tipo POST ya que por ah la informacin viaja mas protegida. Y el resto son simplemente los campos que el usuario deber llenar. Cuando el usuario da clic en agregar enva los datos que la persona lleno, y llama el controlador, enseguida observaremos que un mismo controlador puede mostrar el template del formulario, encargarse del envi de datos y mostrar mensajes, mucha gente utiliza varios controladores o archivos php, para estas cosas, eso es muy ineficiente y lo nico que hace es complicar la lgica de la programacin y aumentar las lneas de cdigo. Codificacin 2 Archivo: agregarpersona.php C://wamp/www/trabajo/agregarpersona.php
<?php

//cargamos las libreras de smarty require('include.php'); include ('varios/gestor.php');

class agregarpersona {

public function agregar($Opcion,$Datos) {

global $smarty, $TemplateAuxiliar;

switch($Opcion) {

case "agregar": $gestor = new gestor(); $gestor->conectar(); $gestor->agregar('persona',$Datos); $gestor->cerrarConexion(); $smarty->assign('mensaje','Persona agregada correctamente'); $TemplateAuxiliar = 'mensaje.tpl'; break;

default: break; } }

public function display() { global $smarty, $TemplateAuxiliar;

//Muestra por pantalla todos los diferentes templates $smarty->display($TemplateAuxiliar); }

//guarda el tipo de accion que se desea realizar $Opcion = $_GET['opcion']; //guarda los datos enviados en una nueva conexion $Datos = $_POST;

$TemplateAuxiliar ='agregarpersona.tpl';

$call = new agregarpersona(); $call->agregar($Opcion,$Datos); $call->display();

?>

Como podemos ver he llamado la clase igual al nombre del controlador, es simplemente por referencia; lo primero que ejecuta el navegador es la parte donde se llama al include.php y adems incluye el gestor para futuras operaciones, luego guarda la opcin que se manda por get, y los datos por post; luego crea una variable template auxiliar que luego miraremos para que sirve, y por ultimo crea un objeto agregarpersona y llama la funcin agregar; en esta funcin se detecta si se recibi algo por get o no, en caso de que la persona entre por primera ves al archivo agregarperosna.php la variable opcin estar vacia por lo cual en la funcin agregar ira al default donde no hace nada; en caso contrario creara un objeto tipo gestor, lamara la funcin agregar, y enviara los datos para q sean agregados. Aqu viene un truco, el template auxiliar se cambia a mensaje.tpl, por defecto al principio estaba en agregarpersona.tpl pero ahora se cambia porque ya sabemos que en este caso se agrego una persona y mostrara simplemente un mensaje que se asigna con smarty diciendo que la persona se agrego satisfactoriamente. Finalmente se ejecutara la funcin display y mostrara un template dependiendo del caso. Adicionalmente adjunto el archivo mensaje.tpl para que vean su sencillez Archivo: mensaje.tpl C://wamp/www/trabajo/templates/mensaje.tpl

<html> <title></title> <body>

<table border="0" cellspacing="10"><tr><td> <b>Aviso</b><br /> {$mensaje} </td></tr></table> </body> </html>

Codificacin 3 Agregar al Archivo: gestor.php C://wamp/www/trabajo/varios/gestor.php (para encontrar el archivo completo ver tutorial 5)

function agregar($Opcion,$Datos) { switch($Opcion) { case "persona": $nombre= mysql_real_escape_string($Datos['nombre']); $apellido= mysql_real_escape_string($Datos['apellido']); $documento= mysql_real_escape_string($Datos['documento']);

$consulta = "INSERT INTO persona (documento, nombre, apellido) values ('$documento', '$nombre', '$apellido')"; $this->realizarOperacion($consulta); break;

default: break; } }

El cdigo es muy sencillo, simplemente coge los datos que se enviara, a cada uno les saca los caracteres extraos con la funcin mysql_real_escape_string esto para evitar que nos enven cdigos maliciosos o nos quieran hacer una injection sql de la cual hablaremos despus, y finalmente enva la consulta a la base de datos. Luego de hacer un experimento podremos observar que claramente en phpmyadmin aparece registrado algn dato que metamos por agregarpersona.php

Formulario e insercin de datos en la base de datos mtodo 2 (ajax). Tutorial 7

Formulario e insercin de datos en la base de datos mtodo 2 (ajax). Tutorial 7 El mtodo anterior para insercin de datos se basa en volver a cargar un controlador, en post y get, pero hoy en da ese mtodo de volver a cargar toda una pgina resulta muchas veces ser

ineficiente, entonces el ajax lo que te permite es SIN necesidad de volver a cargar toda una pgina, todos unos archivos, agregar o editar la informacin en Tiempo Real y mostrar los resultados en la misma pgina donde los estas agregando. Nuevamente primero organizaremos los pasos para luego empezar a codificar 1) crear un template un formulario donde podamos recoger la informacin, la caracterstica 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 funcin agregar, ser nuevamente muy muy sencillo. 3) crear una o varias funciones javascript q nos permita recolectar en tiempo real la informacin que se lleno en el formulario anterior. 4) crear un archivo php que nos recoja la informacin que envio el javascrip anterior, y luego se conecte a la base de datos para agregar los datos. 5) crear otra funcin javascript que recoja el resultado de ese archivo php y que muestre en la pagina actual el aviso de que se agrego correctamente la informacin. EMPECEMOS Codificacin 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 cdigo 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 lnea esta entre etiquetal {literal} {/literal} ya que smarty solo me permite usar scripts cuando uso estas etiquetas; luego hay una divisin, de oculto, esa divisin 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 informacin que digita el usuario. Y por ultimo creo un botn que al darle clic ejecutara la funcin guardarregistro que leera los datos y realizara otros pasos que explicare en la codificacin 3. Codificacin 2

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

<?php

//cargamos las libreras 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 Codificacin 3 y 5 (juntamos estas codificaciones ya que las funciones estn 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]+"&tipoform ato="+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 botn Agregar, se llama esta funcin, esta funcin envia la posicin en la que estaba parado el botn, apartir de esta posicin busca la primer tabla (table) que contega esa posicin, 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 informacin (osea un input) entonces recoge la informacin que hay all guardada y la asigna a un vector. Finalmente envia todos los resultados a la funcin procesarregistro, y una variable tipo que en el botn definimos como persona. - Funcion procesarregistro: crea un objeto tipo ajax (este objeto o funcin esta definido mas abajo y es una funcin 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 codificacin 4) llama la funcin mostrar aviso. - Funcion mostrar aviso: recolecta lo que envio el ajax.php y anteriormente habamos definido en agregarpersona.tpl una divisin mensajeoculto como oculta que nos e mostrara, en este caso mostraraviso activa esa divisin, y adems en la divisin le asigna el mensaje que envio el ajax.php (el ajax.php es visto en codificacin 4).

Codificacin 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 funcin funciones y crea un objeto tipo gestor, y le dice que agregue una persona y le envia los datos. Lo raro de esta funcin es que hace un echo o impresin 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 informacin agregada correctamente, ser devuelta y luego enviada a mostraraviso, all mostrar aviso lo asignara al template y ah si saldr por pantalla.