Programación PHP orientada a objetos con capas

26
Programación PHP orientada a objetos, con separación por capas y Smarty. Tutorial 1 Programació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.

Transcript of Programación PHP orientada a objetos con capas

Page 1: Programación PHP orientada a objetos con capas

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;

Page 2: Programación PHP orientada a objetos con capas

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?

Page 3: Programación PHP orientada a objetos con capas

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.

Page 4: Programación PHP orientada a objetos con capas

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

Page 5: Programación PHP orientada a objetos con capas

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

Page 6: Programación PHP orientada a objetos con capas

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

Page 7: Programación PHP orientada a objetos con capas

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

Page 8: Programación PHP orientada a objetos con capas

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

Page 9: Programación PHP orientada a objetos con capas

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

}

Page 10: Programación PHP orientada a objetos con capas

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

Page 11: Programación PHP orientada a objetos con capas

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>

Page 12: Programación PHP orientada a objetos con capas

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

{

Page 13: Programación PHP orientada a objetos con capas

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();

?>

Page 14: Programación PHP orientada a objetos con capas

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)

{

Page 15: Programación PHP orientada a objetos con capas

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.

Page 16: Programación PHP orientada a objetos con capas

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>

Page 17: Programación PHP orientada a objetos con capas

<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

Page 18: Programación PHP orientada a objetos con capas

<?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');

Page 19: Programación PHP orientada a objetos con capas

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

}

}

Page 20: Programación PHP orientada a objetos con capas

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

Page 21: Programación PHP orientada a objetos con capas

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

}

}

Page 22: Programación PHP orientada a objetos con capas

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