Foro

En la entrada anterior ya introduje la siguiente tarea que íbamos a llevar a cabo, detallando algunos de los elementos que iban a intervenir como son Javascript avanzado, uso de Ajax, BBDD alojadas en la nube y JSON. Todos ellos han contribuido a la creación de un foro para la web, lo que ha constituido la parte más complicada, y que no habría sido posible llevar a cabo sin la ayuda de Carlos, el profesor de la asignatura en la que se enmarca todo este proyecto. Pero dejémonos de charla y pongámonos manos a la obra. A continuación os voy a explicar paso a paso como se ha creado el foro:

En primer lugar, necesitamos capacidad de almacenamiento para poder guardar los comentarios que los usuarios escribirán en nuestra web. Para ello hemos utilizado MongoLab. Esta empresa proporciona un servicio de base de datos alojada en la nube, la cual puede ser fácilmente gestionada desde la propia interfaz online de la que disponen. Además, contamos con una opción gratuita en la que nos dan 500 MB de memoria, lo que es más que suficiente para nosotros. Por tanto, nos registramos y tras poder configurar diversas opciones (podemos incluso hasta elegir qué empresa nos proporcionará el servicio en la nube) , nos creamos la base de datos y, a continuación, nuestra primera colección. Si continuamos leyendo, podremos leer que el servicio de MongoLab es compatible con el modelo RESTful, ¿pero qué es eso? Así es como se denominan los servicios web que emplean el protocolo HTTP y se basan en los principios REST (se trata de un tipo de arquitectura software en sistemas distribuidos como la web, que se basa en la división entre clientes y servidores y en la interacción entre ellos por medio del intercambio de peticiones y datos). Pues bien, lo vamos a emplear y para ello, entramos en la opción API y copiamos la url que nos permitirá conectar con la base de datos. Ya tenemos la parte del almacenamiento lista.

Página de bienvenida de MongoLab

Lo siguiente es crear un sencillo formulario que permitirá a los usuarios enviar los comentarios a la página. El mío es uno simple, creado aprovechando las ventajas de HTML5, y con cuatro campos: usuario, url de la foto, asunto y comentario. Los hay de tipo text y textarea en función de la cantidad de texto a introducir y además son 'required', es decir, no se puede enviar el formulario hasta rellenarlo todo. Además está configurado (atributo value) para que en el campo url de la foto aparezca por defecto una url escrita, aunque siempre se puede cambiar. Por tanto, cada comentario estará estructurado de la siguiente manera: el nombre del usuario, una url a una foto que esté alojada en internet, el asunto del comentario y el propio comentario en sí.

Así luce el formulario

La siguiente decisión a tomar es en qué formato se van a enviar los datos. En mi caso, y siguiendo la línea de lo visto en clase, me he decantado por JSON. Se trata de un formato ligero para el intercambio de datos, los cuales están estructurados en atributo y valor. Por ejemplo, un  posible atributo sería el nombre de un usuario y un posible valor, Moisés. Entonces, ¿qué viene a continuación? Debemos conseguir enviar los datos a la BBDD y que estos queden correctamente almacenados en ella. Para ello se va a hacer uso de Javascript y la tecnología Ajax. Ajax (Javascript asíncrono y XML) se trata de una tecnología implementada en Javascript que permite interactuar con el servidor de forma asíncrona, sin que el cliente aprecie cambio alguno en la web. Aunque en principio estaba diseñado para emplear XML, soporta otros tipos de datos, incluyendo JSON. Por tanto nuestro código deberá emplear dicha función. Vamos a verlo:

$("form").submit(function(){
           $.ajax( { url: urlMongo,
               data: JSON.stringify({"usuario" : $('#usuario').val(),
                                                   "asunto" : $('#asunto').val(),
                                                   "foto" : $('#foto').val(),
                                                   "comentario" : $('#comentario').val()}),
               type: "POST",
               contentType: "application/json" }   

Al hacer clic en el botón de enviar del formulario, ejecutamos ajax y le introducimos los siguientes parámetros:

• La url de la BBDD a la que vamos a conectar.
• Los datos, en este caso un JSON que se crea dinámicamente introduciendo en cada atributo, el valor que el usuario haya introducido en cada campo del formulario (cada uno identificado con su 'id' correspondiente en el HTML).
• El tipo de interacción que se va a producir, en este caso un 'POST', es decir, la introducción de datos en la BBDD.
• Por último, el formato del contenido que como ya sabemos es JSON.

Podemos observar que para extraer cada valor de los campos del formulario, aplicamos $('#id_del_campo').val(), que lo que hace es obtener el valor introducido en el campo identificado con ese 'id'. Tras todo esto, enviaríamos nuestro mensaje y éste sería almacenado. De hecho hagámoslo y veamos el resultado:

Interfaz online de MongoLab

Como se puede observar, nuestro comentario ha sido correctamente almacenado y estructurado de la forma que habíamos definido. Sin embargo, esto es sólo la mitad del trabajo. Ahora queda recuperar los datos de la BBDD y plasmarlos en la web para que puedan ser visualizados por todos. De nuevo, hay que echar mano de Javascript. En este caso, hay que tomar los datos e introducirlos en el HTML y es aquí donde está el problema ya que tenemos que modificar el DOM (la estructura del HTML) de forma dinámica. Veamos el código:

function cargaJSON(mijson){
    console.log('Usando ' + mijson);
    $.getJSON(mijson, function(data) {
        $('#comentarios').empty();
        if (data.length < 1) {
            $('#comentarios').append('<p>No hay comentarios en este momento.</p>');
        } else {
            var html = '<ul>';
            $.each(data, function(index, val){   
                html += '<li>' + "#" + (index+1);
                html += '<ul>';
                html += '<li class= "foto"><img  height="100" width="100" src="'+ val['foto'] +'"></li>';
                html += '<li class="usuario">' + 'Usuario:' + ' ' + val['usuario'] + '</li>';
                html += '<li class="usuario">' + 'Asunto:' + ' ' + val['asunto'] + '</li>';
                html += '<li class="comentario"><p>' + 'Comentario:' + ' ' + val['comentario'] + '</p></li>';
                html += '</ul>';
            });
            html += '</ul>';
            $('#productos').append(html);
        };
}

Una vez recuperados los datos, se comprueba si hay comentarios en la BBDD con la condición de que su extensión no sea nula (data.length<1). De serlo, al div con id 'comentarios' que va a ser en el que se van a cargar los comentarios, se le añade un párrafo en el que se diga que no hay comentarios. Acabamos de modificar el HTML dinámicamente y esto se verá reflejado en cómo se muestra la web al usuario. En el caso de que los datos no sean nulos, creamos una variable String llamada 'html' en la que para cada comentario ( $.each(data, function(index, val) )  vamos a ir introduciendo el código html en esa variable. Sin embargo vemos que lo primero que se introduce es '<ul>' y no está dentro del each. ¿Por qué? Lo que queremos es que el conjunto de los comentarios conformen una lista no ordenada, pero no que para cada comentario se cree una lista. Por tanto cada comentario se considera como un elemento (<li>) de esa lista, cuyo contenido sí que va a variar uno de otro y por eso va dentro del each. De esta manera, cada comentario constará de su propia estructura y para poder introducir los datos de la BBDD en el HTML utilizamos val['nombre del atributo']. Así por ejemplo, para poder mostrar la imagen con la url que introducimos en el formulario hacemos lo siguiente:

html += '<li class= "foto"><img  height="100" width="100" src="'+ val['foto'] +'"></li>';

En el atributo 'src' de la etiqueta <img> que hemos introducido, se coloca el valor del atributo 'foto' y de esta manera se podrá visualizar correctamente.

Si a todo esto le añadimos un poco de CSS, éste el resultado final que podrán ver los usuarios:

Por fin, podemos ver nuestro comentario

Como hemos visto, no sin esfuerzo hemos conseguido implementar un servicio de comentarios en nuestra web utilizando las mismas tecnologías que emplean las grandes empresas del sector. Como siempre, quedan detalles por pulir tanto en el estilo como en el propio sistema de comentarios pero las funcionalidades principales se comportan razonablemente bien. Para acabar, sólo decir que espero que os haya parecido interesante y que hayáis aprendido tanto como lo he hecho yo o más.

Edito: Tras varias pruebas, me he dado cuenta de que el campo 'URL Foto' del formulario puede resultar algo confuso. Por ello, he añadido un pequeño icono con el que al posicionar el ratón sobre él, se nos muestra un breve texto de ayuda (atributo 'title').

Aquí podemos ver el 'tip' desplegado