Jorge Iván Meza Martínez » Desarrollo de software

Degradar PHP 5.3 a 5.2 en GNU/Linux Ubuntu 10.04

jimezam — Wed, 14 Jul 2010 02:56:47 +0000

Introducción.

La versión mas reciente de Ubuntu, Lucid Lynx (10.04), incluye en sus repositorios por defecto la versión 5.3 de PHP la cual trae consigo una serie de modificaciones considerables que hacen que muchas de las aplicaciones requieran algún tipo de modificaciones para funcionar correctamente.

Mientras se realizan estas modificaciones para actualizar las aplicaciones sea hace necesario continuar utilizando las aplicaciones existentes y para esto se debe reemplazar la versión instalada de PHP por la versión mas reciente de la serie anterior (5.2.x). La migración no es trivial debido a que los paquetes vienen directamente de los repositorios, sin embargo si se utiliza el script provisto opr KAndy el proceso se simplifica enormemente.

Instalación de PHP.

Si aún no cuenta con PHP instalado en el equipo puede realizar una instalación básica mediante la ejecución de la siguiente instrucción. Instale los demás paquetes que considere necesarios.

$ sudo aptitude install apache2 php5 php5-cli php5-mysql

En este punto el equipo tendrá instalado PHP 5.3 y es el momento de degradarlo a su versión anterior.

$ php -v

PHP 5.3.2-1ubuntu4.2 with Suhosin-Patch (cli) (built: May 13 2010 20:03:45)
Copyright (c) 1997-2009 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2010 Zend Technologies

Degradar PHP.

Tomar nota de los paquetes relacionados con PHP que se encuentran actualmente instalados.

$ php_installed=`dpkg -l | grep php| awk ‘{print $2}’ |tr “\n” ” “`

Descargar el script de KAndy de la siguiente ubicación y almacenarlo con el nombre de downgradePHP.sh.

http://mrkandy.wordpress.com/2010/04/16/install-php-5-2-x-in-ubuntu-10-04-lucid/

Ejecute el script en la máquina que se desea degradar.

$ chmod +x downgradePHP.sh

$ ./downgradePHP.sh

Recuperar los demás paquetes instalados.

$ sudo apt-get install $php_installed

Verificar la nueva versión de PHP.

$ php -v

PHP 5.2.10-2ubuntu6 with Suhosin-Patch 0.9.7 (cli) (built: Oct 23 2009 16:28:03)
Copyright (c) 1997-2009 The PHP Group
Zend Engine v2.2.0, Copyright (c) 1998-2009 Zend Technologies

Enlaces.

Install (downgrade) php 5.2.x in Ubuntu 10.04 Lucid.
http://mrkandy.wordpress.com/2010/04/16/install-php-5-2-x-in-ubuntu-10-04-lucid/
Ubuntu 10.04 and Drupal.
http://civicactions.com/blog/2010/may/26/ubuntu_1004_and_drupal

The falling things: jugando con Processing

jimezam — Tue, 29 Jun 2010 03:57:38 +0000

Introducción.

Processing es en muy pocas palabras un lenguaje multiplataforma (Linux, MacOS y Windows) basado en Java muy interesante que permite desarrollar rápida y fácilmente pequeñas aplicaciones (o sketches) que incluso personas con pocos conocimientos en desarrollo de software pueden implementar.

Por ahora mi experiencia con el lenguaje es muy limitada, sin embargo después de instalarlo he estado un poco con él. Para esto decidí hacer un sketch muy sencillo en el que se controla mediante el teclado una base que tiene como misión recoger las cosas que caen.

Sketch.

The Falling Things, versión 0.1

Enlaces.

Demostración (Java Applet).
http://demo.jorgeivanmeza.com/Processing/FallingThings/0.1/applet/
Código fuente.
http://demo.jorgeivanmeza.com/Processing/FallingThings/0.1/
Processing.
http://processing.org/
Instalar Processing en Linux Ubuntu 10.04.
http://blog.jorgeivanmeza.com/2010/05/instalar-processing-en-linux-ubuntu-10-04/

Reemplazar OpenJDK con SunJDK en Ubuntu 10.04 debido a problemas con Processing

jimezam — Tue, 18 May 2010 16:44:13 +0000

Introducción.

Este fin de semana estuve haciendo unas pruebas realmente sencillas en Processing 1.1 en mi portátil que utiliza GNU/Linux Ubuntu 10.04. Previamente le había instalado OpenJDK sin embargo empecé a obtener comportamientos extraños durante las pruebas como el hecho de reiniciarse el sistema de ventanas frecuentemente.

Debido a que mis programas en Processing eran muy sencillos no tenía sentido que fueran estos, mas aún sabiendo que se terminan ejecutando en la Máquina Virtual de Java y por ende no debería haber motivos para que interfirieran con otros programas externos. Terminé dudando de la implementación de la máquina virtual que estaba utilizando.

A continuación se detalla el procedimiento para desinstalar OpenJDK e instalar SunJDK (ú Oracle) con el cual se solucionaron los extraños problemas que estaba obteniendo.

Procedimiento.

Agregar el repositorio donde están los paquetes del SunJDK.

$ sudo add-apt-repository “deb http://archive.canonical.com/ lucid partner”

Actualizar la base de datos del aptitude.

$ sudo aptitude update

Remover los paquetes del OpenJDK.

$ sudo aptitude remove --purge openjdk-6-jre

$ sudo aptitude remove openjdk-6-doc openjdk-6-jre-headless openjdk-6-jre-lib

Instalar los paquetes del SunJDK.

$ sudo aptitude install sun-java6-jre sun-java6-plugin sun-java6-fonts

Instalar Processing en Linux Ubuntu 10.04

jimezam — Fri, 14 May 2010 14:26:51 +0000

Introducción.

Processing es un lenguaje y un ambiente de desarrollo opensource diseñado para quienes trabajan con imágenes, animaciones e interacción. Es utilizado por estudiantes, artistas, diseñadores, investigadores y entusiastas para aprendizaje, creación de prototipos y producción. Fue creado inicialmente para la enseñanza de los fundamentos de la programación de computadores en un contexto visual, para servir como software para la creación de gráficos (sketches) y como una herramienta de producción profesional.

Es libre de descargar y se encuentra disponible para GNU/Linux, Mac OS X y Windows.

El proyecto fue iniciado por Ben Fry y Casey Reas y ha evolucionado a partir de las ideas exploradas en el grupo de Aesthetics & Computation del MIT Media Lab.

Tomado de http://processing.org/.

Instalación.

Requisitos previos.

Processing se fundamenta en Java, tanto su ambiente de desarrollo como su compilador e intérprete (el cual es finalmente la JVM). A pesar de que incluye su propia distribución del Java Runtime Edition considero ventajoso el tener instalado previamente el Java Development Kit, ya sea el oficial de Oracle o el de OpenJDK.

Las instrucciones para hacer esto se pueden encontrar en el siguiente enlace.

Instalación de Java en Ubuntu 10.04.

Instalación estándar.

Esta instalación es útil en cualquier distribución de Linux ya que se basa en la distribución TGZ de Processing.

El primer paso es descargar la distribución mas reciente del lenguaje, en este caso la versión 1.1.

$ wget http://processing.org/download/processing-1.1.tgz

Verifique cual es la última versión disponible en la página de descargas.

Se crea un directorio para almacenar el software y se translada allí.

$ sudo mkdir -p /usr/local/processing

$ sudo mv processing-1.1.tgz /usr/local/processing

$ cd /usr/local/processing

Se descomprime el paquete recién descargado con la distribución del lenguaje.

$ sudo tar zxvf processing-1.1.tgz

Se renombra apropiadamente para permitir la coexistencia de varias versiones de ser necesario.

$ sudo mv processing-1.1 1.1

Se verifican los permisos de ejecución del ambiente de desarrollo.

$ sudo chmod +x /usr/local/processing/1.1/processing

Para ejecutar el ambiente de desarrollo y empezar a programar con Processing es necesario invocarlo desde la línea de comando o crear un acceso directo (lanzador) a él.

$ /usr/local/processing/1.1/processing

Instalación para Ubuntu.

Los sistemas operativos herederos de Debian, como Ubuntu, pueden realizar la instalación del lenguaje de una manera resumida.

Descargar la última versión disponible en formato DEB de la siguiente ubicación.

Processing / Distribuciones.

Realice la instalación del paquete recién descargado.

$ sudo dpkg -i processing_1.1-1_all.deb

Los pasos descritos en la sección anterior serán automáticamente implementados y además se creará un ícono en el menú de GNOME bajo la sección de Programming.

Enlaces.

Processing.
http://processing.org/
Oracle Java SE Downloads.
http://java.sun.com/javase/downloads/index.jsp
OpenJDK.
http://openjdk.java.net/
Instalación de Java en Ubuntu 10.04.
http://www.marlonj.com/blog/2010/05/instalacion-java-en-ubuntu-10-04/
Paquetes DEB de Processing.
http://demo.jorgeivanmeza.com/Processing/distribuciones/

tar zxvf processing-1.1.tgz

Te da tu software suficiente libertad ?

jimezam — Sat, 13 Mar 2010 22:46:39 +0000

Introducción.

La libertad del software hace referencia a lo que puedes hacer con él (free speech) y no precisamente al valor económico de este en el mercado (free beer). La GNU, desarrolladora del sistema operativo GNU/Linux, nos habla de los derechos que deberíamos tener sobre el software (y de manera extensible para otros tipos de contenido) para que estos sean de real provecho y utilidad para la humanidad, facilitando el desarrollo de nuevos contenidos e innovación.

Esto es en pocas palabras lo que diferencia al software propietario o no libre del software libre (free software). El núcleo de todo se fundamenta en el acceso al código, en lo que coinciden con el movimiento de código abierto (open source), pero adicionan además todo un sustento filosófico que propende por los derechos del usuario y la libertad para utilizar y manipular el software según sus propias necesidades, evitando las restricciones innecesarias y autoimpuestas de otros tipos de licenciamiento que van en detrimento del propio usuario y sólo favorecen al editor que en muchos casos se lucra de manera desmedida al mantener atado al usuario con restricciones poco éticas.

En el contexto en el que nos encontramos, sociedad y época, es muy posible que fácilmente encontremos argumentos para dar soporte a los licenciamientos no libres y encontremos un tanto utópico al software libre y a todo lo que este movimiento ideológico incluye, sin embargo los temas son profundos, tanto de ancho como de altos, así que es importante para todos, especialmente para quienes desarrollamos software -o incluso conocimiento-, estudiar un poco mas del tema para forjarnos una idea real de estas tendencias y apartarnos de las ideas impuestas por otros que recibimos a diario a través del mercadeo en los medios.

Si encuentra sensato que usted no esté en capacidad legal de compartir el software con sus familiares, amigos o colaboradores, lo invito a que considere cual es el orígen real de estas restricciones legales ? Para proteger a quién fueron diseñadas ? En la época actual surten realmente ese efecto ? Las tecnologías digitales -incluyendo a Internet- deben adaptarse a esas normas o deberían las normas adaptarse a la actualidad en la que vivimos ? En qué medida deberíamos ceder nuestros derechos de utilizar, manipular y adaptar nuestras cosas según nuestras necesidades ?

Es posible que muchos consideren que el licenciamiento actual es el idóneo ya que los desarrolladores deben vivir de algo y el desarrollar aplicaciones es su trabajo, de esta manera el licenciamiento está protegiendo a los desarrolladores de que otros se roben sus logros y se lucren de ellos. Sería muy interesante investigar si son realmente los desarrolladores (léase las personsa que realizan el análisis, diseño e implementación) del software quienes reciben -al menos la mayor parte- de la remuneración o si hay toda una cadena de intermediarios (realmente necesarios ?) que toman su tajada también. Esta inquietud puede ser trasladada a otros contextos similares como la composición de música, la elaboración de películas o la escritura de libros.

Considere también la posibilidad de que pasaría si estas normativas de licenciamiento idóneas aumentan su cobertura limitando aún mas sus derechos con el contenido o producto ? Compraría usted un libro qué sólo pudiera leer en la sala de su casa ? Qué solo pudiera leer usted y no pudiera compartirlo con sus familiares o vecinos ? Compraría usted un libro que sólo se pudiera leer una determinada cantidad de veces ? Qué no pudiera citar o basarse en él para sus propios escritos, para generar nuevo conocimiento ? Si sus respuestas son negativas, tal vez no quiera saber de las nuevas tecnologías para la gestión de derechos electrónicos que se están intentando desarrollar en este momento.

Este es un tema muy interesante y muy denso que la mayoría conocemos o hemos meditado con una mínima profundidad y vale la pena investigar mas al respecto. Como mencioné anteriormente probablemente nos sea mas fácil entender el punto de vista que nos han vendido diariamente y el propuesto por GNU nos suene un tanto idealista y utópico. Puede que así sean las cosas ... o puede que no. Lo realmente importante es que todos debemos tomar decisiones drásticas al respecto y que estas deben beneficiar a todos -la humanidad- mediante el apoyo para la generación de nuevos contenidos e innovación y no limitarse a beneficiar lucrativamente a pocos que bien pueden estar montando un negocio a costa de la pérdida de nuestras libertades.

Para tomar decisiones inteligentes es necesario conocer mas ambos puntos de vista. El no libre es bastante mas conocido ya que lo respiramos practicamente a diario en todos los ámbitos de la vida cotidiana, mientras que el libre suena mas esotérico y nebuloso. A quien esté interesado en aprender un poco mas de la filosofía del software libre lo invito a leer el libro “Software libre para una sociedad libre”, escrito por Richard Stallman precursor de este movimiento. En el libro el autor explica los comienzos y los conceptos que lo llevaron a iniciar esta cruzada en pos de los derechos de los usuarios y desarrolladores de software e incluye varios capítulos en los que se analizan de manera inteligente muchos de los supuestos que hacemos con respecto a las políticas de licenciamiento que estamos acostumbrados. Tal y como podría suponerse, el libro es de distribución libre y puede descargarse del sitio web de GNU (ver enlaces).

Entonces, qué es el software libre ?

Como se mencionó inicialmente al hablar de software libre (free software) se habla de libertad, de lo que se me está permitido hacer con el software mas no necesariamente de precio. Nosotros no tenemos la confusión semántica que se tiene en el idioma inglés en el cual la misma palabra (free) tiene ambas connotaciones libre y gratis. De paso es bueno mencionarlo, el software libre no es necesariamente gratis, yo puedo contratar (pagándole obviamente) a un desarrollador para que implemente una aplicación y después publicarla como software libre, quienes la obtengan después recibirán todos los derechos que esto incluye.

Esto lo menciono porque es importante desligar las dos palabras gratis y libre del free software. También es posible cobrar una módica cuota por distribuír el software libre, por hacerle mejoras específicas que a su vez se convertirán en libres también y por capacitaciones, asesorías y soporte. Como se dijo anteriormente, los desarrolladores también necesitan de que vivir y esta filosofía no es ajena a eso.

En rigor un software es libre cuando su licenciamiento le garantiza al usuario las siguientes libertades.

La libertad para ejecutar el programa sea cual sea nuestro propósito.
La libertad para estudiar el funcionamiento del programa y adaptarlo a tus necesidades —el acceso al código fuente es condición indispensable para esto.
La libertad para redistribuir copias y ayudar así a tu vecino.
La libertad para mejorar el programa y luego publicarlo para el bien de toda la comunidad —el acceso al código fuente es condición indispensable para esto.

Enlaces.

Definición de software libre de GNU.
http://www.gnu.org/philosophy/free-sw.es.html
Software libre según Wikipedia.
http://es.wikipedia.org/wiki/Software_libre
Tipos de licencias GNU para el software libre.
http://www.gnu.org/licenses/licenses.es.html
Software libre para una sociedad libre [libro].
http://www.gnu.org/philosophy/fsfs/free_software.es.pdf

Los controladores en Yii

jimezam — Sat, 02 Jan 2010 05:45:56 +0000

Introducción.

Estos se ubican entre el usuario y la aplicación. Su función es la de controlar la comunicación entre los modelos y la vistas según la solicitud (requerimiento) que ha hecho usuario.

Su clase base es CController y en ellos se implementan Acciones (definen la lógica de la aplicación) y Filtros (establecen validaciones o controles antes y después de la ejecución de las acciones).

El usuario invoca indirectamente a los controladores especificando un ruta a través del controlador frontal o Application.

La ruta del requerimiento.

El URL solicitado determina que controlador y que acción se van a ejecutar para resolver el requerimiento del usuario.

Los URL tienen el siguiente formato.

Sin URL limpias (por defecto).

http://servidor/index.php?r=ControladorId/AcciónId

Con URL limpias.

http://servidor/ControladorId/AcciónId

Si se utilizan módulos (y URL limpias para este ejemplo).

http://servidor/MóduloId/ControladorId/AcciónId

El archivo fuente del controlador se ubica en protected/controllers/ControladorIdController.php.
El nombre de la clase allí contenida deberá ser ControladorIdController.
Se invoca a la acción (ver mas adelante) AcciónId. En caso de no haberse especificado una se considera la acción por defecto del controlador, comúnmente index.

Las acciones.

Pueden implementarse de dos maneras.

Como métodos del mismo controlador.
Como clases que heredan de CAction.

Acciones implementadas como métodos del controlador.

El nombre del método deberá ser actionAcciónId.

En el siguiente ejemplo se muestra al controlador User que implementa la acción add como un método suyo.

class UserController extends CController
{
    public function actionAdd()
    {
        // Implementación ...
    }
}

Acciones implementadas como clases independientes.

Los objetos acción heredan de CAction.
El nombre de la clase es AcciónIdAction (por convención, no es obligatorio).
Se almacena en un archivo bajo la ruta protected/controllers/controladorId/AcciónIdAction.php.
Su ubicación puede referenciarse mediante alias de esta manera: application.controllers.controladorId.AcciónIdAction.
Es obligatorio sobreescribir el método run() de la acción para definir allí su implementación.

En el siguiente código se muestra la acción remove del controlador User implementada como una clase independiente.

class RemoveAction extends CAction
{
    public function run()
    {
        // Implementación ...
    }
}

Esta clase se almacena entonces en el archivo protected/controllers/user/RemoveAction.php.

Como paso final de su implementación, es necesario indicarle al controlador de la existencia de la acción. Para hacer esto es necesario sobreescribir el método actions del controlador de la siguiente manera.

class UserController extends CController
{
   public function actions()
   {
       return array(
           'remove' => 'application.controllers.user.RemoveAction'
       );
   }
}

Los filtros.

Permiten realizar verificaciones y validaciones antes y después de la ejecución de las acciones.
Una acción puede tener asociados múltiples filtros.
Los filtros se ejecutan en el orden en que fueron especificados.
Un filtro puede abortar la ejecución de los demás filtros y de la acción misma.
De manera análoga a las acciones, los filtros pueden implementarse de dos maneras también.
- Como métodos del mismo controlador.
- Como clases que heredan de CFilter.

Filtros implementados como métodos del controlador.

El nombre del método debe empezar por la palabra filter.
Deberá recibir como parámetro a $filterChain.

En el siguiente ejemplo se muestra al controlador User que implementa al filtro checkUser como un método suyo.

class UserController extends CController
{
    public function filterCheckUser($filterChain)
    {
        // Implementación ... invocar $filterChain -> run()
        // para continuar con el próximo filtro
    }
}

Filtros implementados como clases independientes.

Los objetos acción heredan de CFilter.
El nombre de la clase es FiltroIdFilter (por convención, no es obligatorio).
Se almacena en un archivo bajo la ruta protected/filters/FiltroIdFilter.php.
Su ubicación puede referenciarse mediante alias de esta manera: application.filters.FiltroIdFilter.
Es obligatorio sobreescribir los métodos preFilter($filterChain) y postFilter($filterChain) del filtro para definir que hacer antes y después de ejecutar la acción.

En el siguiente código se muestra al filtro isValid del controlador User implementado como una clase independiente.

class IsValidFilter extends CFilter
{
    public $admin;
    public function preFilter($filterChain)
    {
        // Se aplica antes de ejecutarse la acción.
        // Si retorna true continúa el proceso, false lo
        // aborta y no se ejecuta la acción solicitada.
        return $exito;
    }
    public function postFilter($filterChain)
    {
        // Se aplica después de ejecutarse la acción.
    }
}

Esta clase se almacena entonces en el archivo protected/filters/IsValidFilter.php.

Como paso final de su implementación, es necesario indicarle al controlador de la existencia del filtro y determinar su alcance sobre las acciones del mismo. Para hacer esto es necesario sobreescribir el método filters del controlador de la siguiente manera.

class UserController extends CController
{
   public function filters()
   {
       return array(
           'checkUser + add, remove',
           array(
               'application.filters.IsValidFilter - add, remove',
               'admin' => false
           )
       );
   }
}

checkUser es un filtro basado en un método del controlador.
isValid es un filtro basado en una clase externa.
Es posible especificar los filtros con una notación de arreglo para determinar valores específicos para los atributos del filtro.

Los operadores + y - actúan como determinadores del alcance de los filtros sobre las acciones especificadas de la siguiente manera.

+ determina exactamente a cuales acciones se les debe aplicar el filtro. De esta manera, el filtro checkUser se aplicará a las acciones add y remove únicamente.
- determina a cuales acciones NO se les debe aplicar el filtro. Así, el filtro isValid se aplicará a todas las acciones EXCEPTO a add y remove.
Si no se especifica ninguno de los dos modificadores, el filtro aplicará a todas las acciones del controlador.

Enlaces.

Yii Documentation: controllers.
http://www.yiiframework.com/doc/guide/basics.controller
Yii PHP Framwork.
http://www.yiiframework.com/

Redefinir una función en Javascript

jimezam — Fri, 11 Dec 2009 18:14:45 +0000

Introducción.

Estaba reutilizando un formulario complejo en un nuevo módulo de mi aplicación. Todo iba bien hasta que descubrí que uno de los códigos Javascript que actualiza parte del formulario a través de AJAX no me era útil ya que debía mostrar una vista diferente a la estándar. Como el código estaba escrito en funciones procedimentales no podía acceder a la sobreescritura de la orientación a objetos, sin embargo encontré un par de detalles interesantes de Javascript que me permitieron hacer algo similar.

Determinar existencia de funciones.

if(typeof miFuncion == 'function')
    // Si existe la función
else
    // No existe la función

El código anterior determina si la función miFuncion ha sido definida o no en el espacio de ejecución de la aplicación Javascript.

Redefinir una función.

window['miFuncion'] = function()
{
    // Nueva implementación de la función
};

El código anterior permite redefinir la implementación de la función miFuncion la cual obviamente fue especificada anteriormente. Lo interesante de esta sintáxis de Javascript es que esta redefinición puede realizarse de manera dinámica, es decir, en un segundo archivo *.js que se cargue después del original o inclusive dentro de un condicional.

Hacer algo cuando inicia o termina el evento AJAX con Prototype

jimezam — Wed, 25 Nov 2009 13:46:15 +0000

Introducción.

De manera análoga a como hace poco había mostrado como manejar el evento de inicio y terminación de AJAX con jQuery para realizar algún tipo de acción específica como el mostrar un indicador de carga, ahora experimentaremos como hacerlo con el framework de Prototype el cual nuevamente estaré utilizando en el proyecto de los próximos meses.

Procedimiento.

Ajax.Responders.register({
    onCreate: function()
    {
        // An AJAX request has been initialized!
    },
    onComplete: function()
    {
        // An AJAX request has been completed!
    }
});

Adicionalmente hay otros eventos que pueden manejarse de igual manera onUninitialized, onLoading, onLoaded, onInteractive y onException, además de los ya mencionados onCreate y onComplete.

Enlaces.

Prototype API - Ajax Responders.
http://api.prototypejs.org/ajax/ajax/responders.html

Víncular los Javadocs con Netbeans

jimezam — Sat, 24 Oct 2009 15:59:33 +0000

Introducción.

El siguiente procedimiento permite relacionar la documentación oficinal de Java SE (Javadocs) con Netbeans permitiéndole al desarrollador tener una mejor información mas allá de la contextual que provee por defecto el IDE.

Configuración.

Seleccione el menú Tools > Java Platforms.

Seleccione la pestaña Javadoc y presione el botón Add ZIP/Folder.

Seleccione el archivo ZIP o el folder donde se encuentra la documentación de los Javadoc en el equipo.

Presione el botón Close para terminar la configuración.

Uso.

En el editor de código fuente seleccione la clase que desea consultar en los Javadocs y presione ALT+F1 o haga clic derecho y elija la opción Show Javadoc del menú contextual.

Netbeans abrirá la documentación correspondiente a la clase solicitada en el navegador web disponible.

Enlaces.

Java SE Downloads.
http://java.sun.com/javase/downloads/index.jsp

Ejemplo de AJAX rápido y simple con PHP y jQuery

jimezam — Sat, 17 Oct 2009 04:54:32 +0000

Introducción.

Muy probablemente usted esté aquí, leyendo este artículo porque desea aprender a utilizar AJAX con PHP de una manera muy simple y rápida. Yo estoy aquí porque hoy no tengo sueño y que mejor manera de esperarlo que escribir un pequeño tutorial acerca del acceso asíncrono de contenidos web utilizando el framework de jQuery.

Para no tener que dividir el artículo en varias entregas vamos a desarrollar un ejemplo muy sencillo y clásico: la calculadora, sólo que a diferencia de la habitual esta realizará sus cálculos del lado del servidor y presentará sus resultados a través de llamados con AJAX. La implementación Javascript asociada con el objeto AJAX (el objeto XMLHTTPRequest) no la realizaremos directamente sino que utilizaremos el framework de jQuery el cual simplifica y facilita enormemente el desarrollo en Javascript. El lado del servidor, los cálculos de nuestra calculadora, se implementarán en el viejo y conocido PHP. Por supuesto para implementar el nivel de presentación (página web) que recibe el cliente tendremos que hablar un poco de HTML y CSS.

Qué es AJAX ?

AJAX es el acrónimo de Asynchronous JavaScript and XML, un conjunto de tecnologías web que permiten que las aplicaciones web desde sus clientes se comuniquen y soliciten información al servidor de manera asíncrona sin interferir con el contenido y comportamientos de la página actual, es decir, sin refrescar (postback) la página web por completo.

Su implementación se basa en el objeto XMLHttpRequest o XHR el cual fue originalmente desarrollado por Microsoft y apareció por primera vez en 1999 como un control ActiveX de Internet Explorer 5, posteriormente los demás navegadores lo acogieron desarrollando sus propias implementaciones.

En términos generales el uso de AJAX mejora la usabilidad de las páginas permitiendo a los desarrolladores crear aplicaciones que se comportan de manera similar a las aplicaciones de escritorio. Un ejemplo de esto son los clientes de correo web de última generación (como GMail) y las aplicaciones geográficas (como Google Maps). También tiene sus desventajas como presentar una mayor dificultad para su depuración, control de favoritos e historial y que los buscadores web comúnmente no pueden acceder a sus contenidos para indexarlos.

Consulte mas información acerca de AJAX en Wikipedia.

Procedimiento.

Estos son los pasos generales que realizaremos para implementar nuestra pequeña aplicación.

Crear la estructura básica de la página web.
Implementar el formulario de la calculadora.
Mejorar la presentación del formulario.
Implementar la lógica del negocio de la calculadora.
Incluír una referencia a la librería de jQuery en la página web.
Implementar los llamados asíncronos a la lógica del negocio de la calculadora.

La estructura básica de la página.

El primer paso es crear la estructura básica de la página web que recibirá el usuario. Esta se puede crear con cualquier editor de texto desde el bloc de notas hasta otro mas elaborado como Dreamweaver o Eclipse PDT. Lo importante es que sea un editor de archivos planos. En mi caso estoy probando gPHPEdit para Linux el cual se ve hasta ahora simple y conciso. Para el caso de Windows un editor simple como el Notepad++ servirá.

Creamos entonces el archivo calculadora.html con el siguiente contenido.



    
       
       
       Calculadora AJAX

He incluído algunos que nos servirán mas adelante para ubicar donde en el documento se deberán agregar segmentos de código adicionales. Como se puede apreciar, esperamos ceñirnos al XHTML 1.1 transitional.

El formulario de la calculadora.

Este deberá contar con las siguientes partes básicas.

Una sección para los mensajes de error (mensaje) de la aplicación.
Un form (formulario) que representa al formulario en HTML.
Un campo de texto (operando1) para 4 dígitos para que el usuario ingrese al primer operando.
Un campo de selección (operador) para que el usuario elija la operación a efectuarse: suma, resta, multiplicación o división.
Un campo de texto (operando2) para 4 dígitos para que el usuario ingrese al segundo operando.
Un botón (igual) para invocar la operación de los datos.
Una sección (resultado) para mostrar el resultado de la operación.

La siguiente es la implementación de esta sección y debe insertarse como el Contenido del documento en la plantilla de la estructura básica de la página web.

Nota. El atributo del nombre (name) es requerido en los campos del formulario que se van a transmitir a través de la invocación asíncrona cuando el formulario es enviado completo como lo vamos a hacer en esta práctica.

Mejorar la presentación del formulario.

Este es el producto final de la actualización de la presentación de la página web, es necesario modificar los atributos visuales de cada una de las partes del formulario recién creado.

Interfaz de usuario de la calculadora

Las nuevas características se especifican utilizando hojas de estilo (CSS) y se referencian a través de sus identificadores, etiquetas o clases.

El siguiente código CSS realiza las modificaciones propuestas al formulario. Estas se deben insertar en la sección de Clases CSS Internas.

La lógica del negocio de la calculadora.

El hecho de calcular el valor resultante de la operación elegida a partir de los operandos especificados es lo que llamamos la lógica del negocio. Esta lógica, como se dijo inicialmente, la vamos a implementar en PHP en el archivo calcular.php.

Los pasos generales que deben realizarse para llevar a cabo exitosamente el cálculo del valor resultante son los siguientes.

Obtener la información provista por el usuario: operandos y operador.
Verificar que la información proporcionada por el usuario sea válida.
Realizar la operación indicada con los valores suministrados.
Mostrar el resultado.

Como veremos a continuación la implementación de estos pasos es ligeramente mas interesante que su simple mención.

Para iniciar el código PHP, le indicamos al navaegador que la respuesta del script será un texto. Este paso específico es opcional ya que para PHP este es el tipo de respuesta por defecto.

La implementación de las siguientes acciones la vamos a recubrir en un bloque try/catch ya que es suceptible de generar errores y consecuentemente, lanzar excepciones.

El siguiente paso es el obtener, intentar sanear y verificar los operandos proporcionados por el usuario desde el formulario HTML. Los parámetros fueron transmitidos a través del método post y los elementos se diferencian por su identificador.

try
{
    /* Obtener y sanear los valores de los operadores */
    $operando1 = filter_var($_POST['operando1'], FILTER_SANITIZE_NUMBER_FLOAT);
    $operando2 = filter_var($_POST['operando2'], FILTER_SANITIZE_NUMBER_FLOAT);
    /* Verificar que los valores de los operadores correspondan
       con los tipos esperados */
    if(!filter_var($operando1, FILTER_VALIDATE_FLOAT) ||
       !filter_var($operando1, FILTER_VALIDATE_FLOAT))
           throw new Exception("Operandos inválidos: [{$operando1}] y [{$operando2}]");

Realizamos una tarea similar con el operador, obtenemos su valor y verificamos que sea válido.

    /* Obtener el valor del operador */
    $operador = $_POST['operador'];
    /* Verificar que el operador suministrado sea válido */
    if(!in_array($operador, array('SU', 'RE', 'MU', 'DI')))
        throw new Exception ("Operador inválido: [{$operador}]");

Definimos una variable para almacenar el resultado de la operación solicitada.

    /* Almacenar resultado, inicialmente desconocido */
    $resultado = 0;

Realizamos la operacion correspondiente al operador recibido. Se deben tener en cuenta dos posibles contingencias que pueden suceder: en el caso de la division, el denominador, es decir, el segundo operador no puede ser cero. El segundo caso que debe tenerse en cuenta es que el operador recibido no corresponda con ninguna de las operaciones conocidas, esto habria sido validado inicialmente al verificar el operador suministrado despues de su recuperacion.

    /* Realizar la operación solicitada */
    switch($operador)
    {
        case 'SU':    $resultado = $operando1 + $operando2;
        break;
        case 'RE':    $resultado = $operando1 - $operando2;
        break;
        case 'MU':    $resultado = $operando1 * $operando2;
        break;
        case 'DI':    /* Verificar si el denominador es cero,
                         en ese caso, la división no puede realizarse */
                      if ($operando2 == 0)
                          throw new Exception ('División por cero');
                      $resultado = $operando1 / $operando2;
        break;
        default:      /* Si ninguna operación se ejecutó significa
                         que el operador era inválido (segunda verificación) */
                      throw new Exception('Operador desconocido');
        break;
    }
}

Para terminar la lógica de la calculadora debemos lidiar con los dos posibles resultados. Si el procesamiento tuvo algún error (se lanzó una excepción durante el proceso) o si su terminación fue exitosa.

En caso de haber sucedido un error este se indica al usuario mediante un mensaje descriptivo y al navegador al enviarle un código 400.

catch(Exception $e)            /* La operación produjo un error */
{
    /* Indica al navegador la condición de error */
    header("Status: 400 Bad Request", true, 400);
    /* Despliega el mensaje de error para el usuario */
    echo $e -> getMessage();
    exit(1);
}

En caso de terminar la operación exitosamente, se deberá mostrar al usuario el resultado de la misma e informarle al navegador con un código 200.

/* La operación se realizó exitosamente */
/* Indica al navegador la condición de éxito */
header("Status: 200 OK", true, 200);
/* Despliega el resultado de la operación para el usuario */
echo number_format($resultado, 4);
exit(0);
?>

Incluír la referencia a jQuery.

En este paso lo que hacemos en incluír a la librería jQuery en nuestro proyecto web para poder utilizarla en nuestros fragmentos de código Javascript.

Para hacer esto se debe agregar la siguiente línea en la sección Referencias de Javascript externos.

Este fragmento utiliza Google AJAX Libraries que nos permite incluír los principales frameworks de Javascript en nuestros sitios web sin preocuparnos por su almacenamiento o implementación, en este caso, incluír la distribución estable mas reciente de la rama 1.x. Obviamente este método requiere que el cliente tenga acceso a Internet además de la aplicación web.

Una forma mas tradicional de hacer lo mismo es el descargar por nuestra propia cuenta la distribución de jQuery desde su sitio web, almacenar el archivo en nuestro servidor y hacer una referencia desde la página web como se muestra a continuación.

Implementar las invocaciones asíncronas.

La implementación de la invocación asíncrona se realiza directamente en Javascript utilizando a la librería jQuery recién referenciada. Su código se agrega bajo la sección Código Javascript interno.

El primer paso que se debe realizar para su implementación es relacionar el evento de presionar el botón igual con la invocación del llamado asíncrono. Para hacer esto vamos a utilizar un método no invasivo, es decir, no vamos a contaminar el HTML con el atributo onClick para el elemento INPUT sino que lo haremos desde el código Javascript favoreciendo la separación entre presentación/lógica del negocio y maximizando la flexibilidad de esta última.

Para hacer esto, tan pronto como se carga la página se asocia el evento de clic sobre el botón de igual para que se invoque la función procesar.

Enlaces.

Demostración & descarga del código fuente.
http://demo.jorgeivanmeza.com/jQuery/AjaxSimpleRapido-Calc/
jQuery.
http://jquery.com/
Simplify Ajax development with jQuery
http://www.ibm.com/developerworks/library/x-ajaxjquery.html

id='operador'