Posts Tagged ‘ request

Servicios REST usando Silex micro-framework 3/3 – Cliente

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Ya hace un tiempo que escribí el primer y segundo artículo de esta serie sobre Servicios REST y Silex. En esa época había creado un repositorio en mi cuenta de GitHub para almacenar un ejemplo de como crear un servidor REST utilizando Silex el micro-framework PHP que sería como el hermano menor de Symfony.

Utilizo Silex porque es realmente fácil crear rápidamente un proyecto de ejemplo pero en realidad de expone la idea para utilizarlo con PHP, pudiéndose adaptar rápidamente el ejemplo a algún otro framework como Symfony2 o incluso hacerlo desde cero con PHP.

Con ayuda de algunas personas, a quienes agradezco por los comentarios que dejaron en los artículos, he realizado algunas modificaciones y creo que nos ha quedado un proyecto base interesante para tenerlo como estructura base.

Hay que tener en cuenta que hoy en día la nueva versión de Silex ha cambiado un poco en cuento a su instalación con relación al último artículo. Utilizaremos para este artículo la nueva versión y con el tiempo haremos las modificaciones en el ejemplo del servidor.

Hoy quiero hablar sobre como podemos consumir ese servicio creado, es decir, crear un cliente para REST utilizando Silex. Hay que recordar que nuestro servicio REST nos devuelve siempre respuestas por medio de los códigos de estados del protocolo HTTP (puedes verlo en la wiki) y en los casos que tiene que devolvernos datos como sería la ruta /ver-comentarios.json, lo hará utilizando el formato JSON. Esto es importante saber ya que para que nuestro cliente obtenga los comentarios del ejemplo tenemos que saber que obtendremos una respuesta JSON la cual tendremos que procesar para mostrarlo en nuestro cliente.

Leer mas

Servicios REST usando Silex micro-framework 2/3

VN:F [1.9.22_1171]
Rating: 4.7/5 (3 votes cast)

Dando continuidad al artículo anterior sobre servicios REST usando el micro-framework Silex, hoy hablaremos sobre la implementación del código que fue publicado en GitHub como base de este proyecto.

NOTA: En este artículo veremos lo esencial del código usado para este proyecto pero se aconseja primeramente una lectura de la documentación oficial de Silex. En caso de conocer como funciona Symfony2 esto te será muy familiar.

Objetivo y alcance del Proyecto

El proyecto que usaremos se basará en crear una tabla de comentarios y realizar servicios REST para lograr un CRUD (create, read, update, delete) de la misma.

NOTA: La sentencia SQL para crear la tabla y otras utilidades las podrán encontrar en la WIKI del proyecto cuya dirección se encuentra en el archivo README.md en la raíz del proyecto.

Tendremos 4 servicios REST definidos en el proyecto: Leer mas

Servicios REST usando Silex micro-framework 1/3

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)

Mucho se habla hoy en día sobre arquitectura orientada a servicios es decir, tener un servicio que de alguna manera encapsula una lógica con sus problemáticas correspondientes y proporciona un resultado que responde a la invocación de ese servicio.

Por lo general, la información que se muestra en una página es resultado de un proceso, como por ejemplo una búsqueda de datos en la base de datos. Cuando queremos mostrar una noticia, enviamos por parámetro GET a una página el Id de la noticia, al momento en que la página recibe ese dato, lo obtiene y realiza una búsqueda de datos obteniendo un ResultSet que luego es procesado por nosotros y el resultado final es mostrado en la página en un formato que por lo general será decidido por el diseño del sitio.

Hemos hablado de dos partes bien marcadas en el ejemplo anterior:

  1. Desde que recibimos el Id como parámetro, se ejecuta un proceso que correspondería, en una arquitectura MVC, a la “C” o Controller, que procesa dicha información también llamados Actions y luego cuando ya tenemos los datos finales,
  2. la presentación correspondería a la “V”, es decir la Vista. Estos son conceptos que fácilmente son entendidos por cualquier desarrollador que haya usado algún framework MVC como por ejemplo Symfony.

Resumiendo, siempre que pensamos en una página estamos pensando automáticamente en dos partes, el controlador y la vista, la acción que se procesará al recibir la petición y la presentación de dichos datos obtenidos, y como mucho tiempo nos hemos acostumbrado generalmente para crear una página programamos estos dos elementos como si no pudieran separarse.

Leer mas

Symfony 1.4, jQuery y Ajax

VN:F [1.9.22_1171]
Rating: 4.2/5 (13 votes cast)

Habiendo dejado mucho tiempo de escribir artículos sobre Symfony me gustaría hablarles hoy sobre la utilización de Ajax con jQuery dentro de nuestro Framework PHP. Antes de leer este artículo recomiendo la lectura de los artículos de la serie de jQuery y Ajax en donde se explica como generar de una manera muy sencilla peticiones asíncronas al servidor utilizando la librería JavaScript jQuery. En estos artículos verán el concepto erróneo que muchas veces tenemos sobre Ajax y entenderán la idea sobre Hijax.

Symfony en sus versiones anteriores contaba con helpers interesantes para la creación de links y formularios utilizando Ajax mediante prototype. Así como existe hoy en día el helper para link_to() existía un link_to_remote() que era capaz de crear el código JavaScript necesario para la llamada Ajax. Con el tiempo, en las versiones más maduras del framework esto fue eliminado y se creó un plugin que utiliza jQuery llamado sfJqueryReloadedPlugin que continúa con las funciones más utilizadas. El enlace al plugin lo pueden encontrar aquí donde podrán ver la documentación necesaria.

La idea de este artículo NO es sobre la utilización del plugin sino sobre cómo ejecutar las llamadas Ajax directamente desde cero para entender la idea y poder hacer lo que necesitemos sin depender del plugin.

Como veíamos en los artículos de la serie sobre jQuery y Ajax, repetimos varias veces que la llamada asíncrona es simplemente un request al servidor y que cualquier cosa que escribamos en la salida estándar de la página procesadora es devuelto como response al cliente. La misma idea la manejaremos aquí ya que nada en absoluto cambia.
Leer mas

Ajax y jQuery 6/6 – Procesando formularios con validaciones

VN:F [1.9.22_1171]
Rating: 3.8/5 (5 votes cast)

Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.

El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.

Recordemos el ejemplo anterior

El código del ejemplo anterior para la página de contacto es el siguiente.

<?php sleep(1) ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link href="style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript" src="ajax.js"></script>

    </head>
    <body>

        <div id="loading"><img alt="Cargando"  src="loading.gif" /></div>

        <div id="mainmenu">
            <ul id="menu">
                <li><a href="inicio.php" class="ajax">Inicio</a></li>
                <li><a href="acercade.php" class="ajax">Acerca de</a></li>
                <li><a href="contacto.php" class="ajax">Contactos</a></li>
            </ul>
        </div>

        <div id="content">
            <h1>Contacto</h1>

            <form action="procesar_contacto.php">
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre" /><br />
                <label for="asunto">Asunto:</label>
                <input type="text" name="asunto" id="asunto" /><br />
                <label for="comentario">Comentario:</label>
                <textarea cols="30" rows="5" name="comentario" id="comentario"></textarea><br />
                <input type="submit" value="Enviar" />
            </form>
        </div>

    </body>
</html>

Leer mas

Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

VN:F [1.9.22_1171]
Rating: 4.3/5 (3 votes cast)

Para continuar con la gente que quiere seguir viendo ejemplos sobre la serie de Ajax y jQuery, les tengo preparado un ejemplo más completo, muy sencillo, implementando peticiones asíncronas en los links de un menú. Por supuesto si hacemos esto vamos a usar la idea de Hijax para asegurarnos de que el sitio funcione con y sin Ajax.

Comencemos sin Ajax

El HTML que usaremos de ejemplo, como así también el CSS será muy básico para no desconcentrarnos del punto inicial del Ajax usado con jQuery. Básicamente se trata de un menú creado con una lista no ordenada (<ul><li>). En primer lugar les dejo los archivos del mini sitio sin absolutamente una línea de JavaScript, completamente funcional. Veamos el ejemplo de la primera página.

» inicio.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link href="style.css" rel="stylesheet" type="text/css" />

    </head>
    <body>

        <div id="mainmenu">
            <ul id="menu">
                <li><a href="inicio.php">Inicio</a></li>
                <li><a href="acercade.php">Acerca de</a></li>
                <li><a href="contacto.php">Contactos</a></li>
            </ul>
        </div>

        <div id="content">
            <h1>Bienvenidos</h1>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </div>

    </body>
</html>

Como se muestra en el código, vemos una lista que será nuestro menú. Contiene tres links a tres páginas, inicio.php, acercade.php y contacto.php. Las tres páginas solo contienen información estática aunque podría sin problema obtener información de la base de datos y hacer cualquier proceso normal. Lo único que tenemos que tener en cuenta para el ejemplo es que la información para cada página está dentro de un div con id=”content”. Esto lo usaremos para obtener la información del servidor.
Leer mas

Ajax y jQuery 4/6 – Mostrando mensaje de cargando

VN:F [1.9.22_1171]
Rating: 4.4/5 (7 votes cast)

En el artículo anterior sobre esta serie de Ajax y jQuery vimos como utilizar las librería jQuery para realizar llamadas asíncronas al servidor de tipo GET y POST. Lo que nos quedaría pendiente sería como hacer para mostrar al usuario algún mensaje que indique que una llamada de este tipo se está realizando, ya que si no mostramos nada el usuario no sabrá que algo se está ejecutando. Pasemos entonces a ver como jQuery nos ayuda con esta funcionalidad.

Eventos de jQuery para detectar llamadas Ajax

Existen 6 eventos en jQuery que nos permiten manejar los estados de la conexión asíncrona que realizamos.

  • ajaxStart(): La conexión al servidor se ha abierto. ver más
  • ajaxSend(): La petición GET o POST fue enviada. ver más
  • ajaxSuccess(): La petición volvió sin errores en la comunicación. ver más
  • ajaxError(): La petición obtuvo un error por ejemplo un 404. ver más
  • ajaxComplete(): La petición ha finalizado, independientemente de haberse devuelto un success o error. ver más
  • ajaxStop(): La conexión al servidor se ha cerrado. ver más

Al principio tantos eventos me resultaron un poco confusos, especialmente entre ajaxStart() y ajaxSend(), y ajaxComplete() y ajaxStop() pero sin embargo con el ejemplo que veremos se puede ver bien el funcionamiento.

Para controlar estos eventos, simplemente debemos agregar un listener sobre el objeto que queremos utilizar, ya sea un div con el texto “cargando…” o algún gif animado que muestre alguna animación. Una vez que se les pone a escuchar detectan cualquier llamada Ajax que se ejecute y el ciclo sería el siguiente. Lo primero que ocurre es crear como una conexión al servidor, como un tubo por el cual va a viajar la petición. El ajaxStart() se ejecuta al crearse esa conexión y ajaxStop() al cerrarse. En el medio tenemos el ajaxSend() cuando se envía una petición y el ajaxComplete() cuando la petición vuelve. En el medio de los los últimos dos se pueden ejecutar uno de estos dos eventos ajaxSuccess() o ajaxError().
Leer mas