Post on 01-Dec-2015
Programación PHP orientada a objetos, con separación por capas y Smarty. Tutorial 1Programación PHP orientada a objetos, con separación por capas y
Smarty.
A continuación veremos el primer tutorial de programación php de una serie de
muchos tutoriales, que explicara detalladamente “una forma” “mi forma” de
programar tanto páginas 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 fácilmente el código de otro
programador en nuestros trabajos, muchas veces ni siquiera podemos rehusar
nuestro propio código y repetimos varias veces las mismas líneas y los mismos
pedazos de códigos, por lo cual muchas veces es mas el tiempo que gastamos
intentando reconstruir el código de otras personas, que el tiempo que hubiésemos
gastado creando una pieza o herramienta desde 0 sin mirarle a nadie.
Además de no entender el código ni la forma de programar de los demás, 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 código 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 código aunque
funciona se vuelve perversamente inentendible.
Por lo tanto he decidido explicar un método 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 años.
Anteriormente para desarrollar una página o software me podía demorar varios
meses, hoy en día con estos métodos en cuestión de 1 o 2 semanas o incluso días
se tendrá lista una página 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, rápidamente se difunde en la web y
hace que nuestras páginas aparezcan ahí; porque está muy bien documentado
existen miles y miles de tutoriales en la web y ha mostrado muy buen desempeño y
es un lenguaje de fácil entendimiento además de que se integra muy bien con otros
lenguajes como javascript, css, entre otros.
2) ¿Que es la separación por capas?
La separación por capas, son una serie de reglas, una serie de divisiones que se
le da al código, más adelante se detallara muy bien este punto; el caso es que
vienen a ser unos “mandamientos” que se deben cumplir para garantizar un código
reutilizable funcional y al que se le puede hacer mantenimiento.
En el caso más simple la separación por capas viene dada del siguiente modo:
2.1) Capa gestor: es la capa en la cual va la conexión 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 sería por ejemplo un index.php en este capa jamás ira un
código 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, jamás se pueden conectar
con la capa gestor, aquí NUNCA abra una sola línea de código php, siempre será
html, y además 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 olvidémonos de este capa y trabajemos solo con las 3 capas anteriores.
Más adelante mostraron un ejemplo muy sencillo del funcionamiento de estas
capas, para darle mayor comprensión al programador.
3) ¿Que es Smarty?
Smarty es la herramienta clave para poder hacer la separación por capas,
simplemente permite al programador separa el código php del html y usar una serie
de etiquetas smarty; es un lenguaje supremamente sencillo, y en mi opinión en vez
de complicar las cosas (porque algunos piensan que manejar otro lenguaje es
complicar las cosas) facilita tremendamente que el código sea más claro y más
sencillo.
4) ¿Que es programación orientada a objetos?
Es simplemente una forma de programar donde se usan clases, métodos y
funciones; mas adelante veremos los tips o claves de nuestro método de
programación.
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 códigos e intentando modificarlo o buscando
plugins, que desarrollándolos desde cero, un blog básico es algo muy sencillo de
hacer y yo me demore 4 días creándolo desde cero, mientras que tratando de
modificar un joomla me demore semanas y abandone esa opción, mas adelante
creare un tutorial de como hacer blogs o cosas avanzadas que en realidad son muy
sencilla y nos harán sentir orgullosos de nuestros trabajos
En el próximo tutorial que estoy creando, veremos ahora si un ejemplo de
un código del desarrollo mas básico de un programa con nuestro método.
Wampserver. Tutorial 2WampServer
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 deberán crear una
carpeta por cada pagina o desarrollo, y dentro de esa carpeta deberán 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 simultáneamente.
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 línea 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 3Que es Smarty y como usarlo, un ejemplo
Como lo dijimos en un tutorial pasado “Smarty es la herramienta clave para poder
hacer la separación por capas, simplemente permite al programador separa el
código 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 imágenes,
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 vía web de nuestro proyecto “trabajo”.
- En la tercera línea incluimos la clase smarty la cual es esencial para todo el
proyecto.
- En la cuarta línea creamos un nuevo objeto tipo smarty.
- En el resto de las líneas definimos los directorios smarty donde se va a ubicar
información clave; por ejemplo definimos el directorio template_dir en la carpeta
templates lo cual indica que ahí irán 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 rápido 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 información
<?php
//cargamos las librerías 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 línea de require, incluimos el archivo que anteriormente creamos.
- En la línea 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 fácil manejo)
- En la línea de public function display lo que hacemos es que crearemos una
función que será característica de todos los controladores que es donde decidimos
que mostrar por pantalla en este caso, esa función tiene la línea 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 función de smarty llamada display que lo
que hace es que muestra por pantalla algún 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 línea donde se incluye el include.php y luego salta hasta el
final de la definición de la clase, y lee la línea donde creamos un nuevo objeto tipo
index.php $call = new index(); y seguidamente llama la función 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 ubicación
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 programación php, el resto será repetir este
proceso varias veces e ir agregando cosas.
Phpmyadmin, creación de una base de datos y tabla. Tutorial 4Phpmyadmin, creación de una base de datos y tabla
Es muy importante que toda la información 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 próximos tutoriales siguientes vamos a
aprender a llenar la información 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 continuación
dar clic en agregar un nuevo usuario después colocamos:
Nombre de usuario: prueba
Servidor: y de la lista desplegable que hay lado seleccionamos “Local”
Contraseña: prueba
Y finalmente chuleamos la opción “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 números enteros;
los otros 2 campos serán tipo texto (varchar) y tendrán una máxima longitud de
100 caracteres. Es FUNDAMENTAL que todas las tablas que se creen sean de tipo
InnoDB esto nos permitirá más adelante crear claves foráneas (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 próximo tutorial veremos cómo es el manejo
del gestor y más adelante insertaremos datos desde una página web a esa base de
datos.
Gestor de base de datos. Tutorial 5Gestor 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 contraseña y el nombre de la
base de datos y servidor.
El siguiente código, es un código que actualmente utilizo en TODAS las páginas y/o
software que requieren de una base de datos, es un archivo que a pesar de varios
años que han pasado no e necesitado modificarlo. Obviamente para cada página y
para cada software deberemos agregar funciones adicionales, pero las funciones
que pegare son las más 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 contraseña que también 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 modificación 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
información que sacamos)
Funcion cerrarConexion: como su nombre lo indica cierra la conexión que se
establece con la base de datos, es FUNDAMENTAL siempre que se haga una
conexión, y luego se realicen todos los procedimientos necesarios al final cerrar la
conexión para no sobrecargar el servidor.
Gracias a estas funciones en el próximo tutorial podremos realizar nuestra primera
inserción a la base de datos para guardar la información de forma segura.
Formulario e inserción de datos en la base de datos método 1 (get y post). Tutorial 6Formulario e inserción de datos en la base de datos método 1 (get y post).
Tutorial 6
Basándonos en los tutoriales pasados, en la tabla persona y en el gestor de datos,
vamos a hacer una simple inserción desde un formulario web a la base de datos,
usando un solo archivo php (controlador) y continuando con la técnica de
separación por capas que se hablo en el primer tutorial.
En el desarrollo php es supremamente importante, antes de empezar a copiar
código 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 información se deberá enviar la información al gestor y
luego mostrar otro template donde haya un aviso diciendo que la información 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 codificación.
Codificación 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 información viaja mas protegida. Y el resto son simplemente los campos
que el usuario deberá llenar. Cuando el usuario da clic en agregar envía 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 lógica
de la programación y aumentar las líneas de código.
Codificación 2
Archivo: agregarpersona.php – C://wamp/www/trabajo/agregarpersona.php
<?php
//cargamos las librerías 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 además incluye el gestor para futuras operaciones, luego
guarda la opción 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 función agregar; en esta función 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 opción estará vacia por lo cual en la función
agregar ira al default donde no hace nada; en caso contrario creara un objeto tipo
gestor, lamara la función 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 función 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>
Codificación 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 código es muy sencillo, simplemente coge los datos que se enviara, a cada uno
les saca los caracteres extraños con la función mysql_real_escape_string esto para
evitar que nos envíen códigos maliciosos o nos quieran hacer una injection sql de la
cual hablaremos después, y finalmente envía la consulta a la base de datos.
Luego de hacer un experimento podremos observar que claramente en
phpmyadmin aparece registrado algún dato que metamos por agregarpersona.php
Formulario e inserción de datos en la base de datos método 2 (ajax). Tutorial 7Formulario 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> </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ó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.