En el primer tutorial de este ciclo, luego de una extensa explicación, logramos  visualizar el tan deseado formulario. Ahora nos toca hacer funcionar el envío de estos comentarios, así como mostrar la lista de los últimos comentarios del artículo. ¡Manos a la obra!.

Desarrollo de la acción de envío de un comentario (vía Ajax).

Como bien adelantamos, nos toca hacer funcionar el envío de comentarios a través del formulario de comentarios del artículo. Como aderezo, haremos este envío vía Ajax, lo cual lo hace más picante sin duda.

Nota: Recuerden que el repositorio lo pueden encontrar en GITHUB.

Pero antes, en el tutorial pasado dejamos pendiente algo que sería conveniente dejarlo solucionado. El problema es, que el formulario se muestra correctamente, pero las cadenas de texto traducibles están en su forma menos vistosa, a pesar que tenemos asignado un valor para cada una de ellas desde nuestro componente. Y precisamente esto, es nuestro problema. Los valores los tenemos asignados allá en el componente no aquí en el plugin, y como el que está corriendo es el plugin, pues Joomla no reconoce los valores para estas cadenas de texto traducibles. Para solucionar esto, tenemos 2 vías. La primera es copiar las cadenas de texto desde el archivo de idioma del componente para el archivo de idioma del plugin. La segunda, es cargar directamente en el plugin, los archivos de idioma del componente. Cualquiera de las 2 vías son correctas. En nuestro caso, escogeré la segunda para mantener así la idea de centralizar todo.

Para hacer lo que queremos, usaremos la función “load” de la clase “JLanguage”. (Línea 721 - 771 => libraries\joomla\language). Para más información, pueden leer estos artículos (Uno,Dos) de la documentación de Joomla. Por tanto, abrimos el punto de entrada del plugin para editarlo, añadiendo lo siguiente:

// Add the language file of the component
 $lang = JFactory::getLanguage();
 $lang->load('com_mjcomments'

// Add the language file of the component
$lang = JFactory::getLanguage();
$lang->load('com_mjcomments', JPATH_SITE, null, true);

Con esto estamos diciendo que cargue el archivo del idioma español del componente “com_mjcomments” para que de esta forma las cadenas de texto traducibles del formulario tomen sus valores. Pero si se detienen un poco en el código de la función “load”, esta hace una llamada a otra función llamada “getLanguagePath” que obtiene el camino o la ruta hacia los archivos de idiomas. Pero aquí está el detalle. Esta función busca dentro de una carpeta “language” a partir de una ruta que se le pasa. En este caso, le estamos pasando a la función “load” la ruta de la constante JPATH_SITE por lo que está buscando dentro de la carpeta “language” de la raíz de nuestro sitio, por ende, si actualizamos el paquete verán que no surge efecto este cambio, ya que dentro de esa carpeta no tenemos ningún archivo de idioma perteneciente al componente.

Tenemos nuevamente 2 soluciones posibles. La primera es editar el archivo manifiesto del componente y añadir una etiqueta “language” para que instale los archivos de idioma dentro de la carpeta “language” de la raíz del sitio. La segunda variante es sencillamente pasarle la ruta hacía la carpeta del componente y que de ahí lea los archivos de idioma. Yo usare la segunda variante, pero ambas son válidas.

Volvemos a editar el punto de entrada del plugin añadiendo la ruta física hasta los archivos de idioma del componente. Esto quedaría de esta forma:

// Add the language file of the component
'/components/com_mjcomments';
 $lang->load('com_mjcomments'

// Add the language file of the component
$lang = JFactory::getLanguage();
$basePath = JPATH_SITE . '/components/com_mjcomments';
$lang->load('com_mjcomments', $basePath, null, true);

Y con esto hecho, actualizamos el paquete en nuestro sitio y verán que ya las cadenas de texto traducibles, están en su versión mejorada.

Ya se ve mejor ¿verdad?.

Entrando en materia de lo que nos corresponde en este segundo tutorial, ahora que tenemos la vista del formulario, nos corresponde hacerlo funcionar. Si se fijan ya hay algo que funciona, no se puede dejar ningún campo vacío para poder enviar un comentario:

Esto es gracia a que desde HTML5 en cada campo de un formulario html, se le puede incorporar un atributo llamado “required” el cual comprueba que el campo no esté vacío antes de enviarlo. Por supuesto, cada salida de estos mensajes de alerta son diferentes en cada navegador, y hay algunos que aún no implementan esta funcionalidad de HTML5. Por lo que una recomendación sería manejar esto desde el propio plugin con ayuda de jQuery. Pero bueno, esto es tarea para la casa.

Cuando alguien de clic en el botón de enviar, según el flujo que hemos planteado desde el principio, el formulario debe mandar los valores entrados hacia el componente para su validación y su inserción en la base de datos. Por lo que primero nos ocuparemos del envío de los valores.

Como el envío es a través de Ajax, necesitamos crear un archivo javascript en el plugin. Para ello crearemos la carpeta “media” con el archivo “plg_mjformcomment.js” y lo declararemos en el manifiesto del plugin. Nos quedaría todo de esta forma:

<media folder="media" destination="pkg_mjcommentsystem">
   <folder>plg_content_mjformcomment</folder>
</media>

<media folder="media" destination="pkg_mjcommentsystem">
   <folder>plg_content_mjformcomment</folder>
</media>

En la próxima actualización del paquete, se creará dentro de la carpeta “media” en la raíz del sitio, una carpeta llamada “pkg_mjcommentsystem”. Dentro, tendrá otra carpeta llamada “plg_content_mjformcomment” con la carpeta “js” más el archivo “plg_mjformcomment.js”.

Ahora abrimos el archivo “plg_mjformcomment.js” para editarlo.

span style="color: #009900; font-style: italic;">/* Send a comment */
      $("#mjformcomments #comments-form"

(function($){
   $(document).ready(function() {
      /* Send a comment */
      $("#mjformcomments #comments-form").submit(function(event){
         event.preventDefault();
         var form = $(this);
         doAjax(form);
      });
   });
})(jQuery);

Lo primero que hicimos es cancelar la acción de envío del formulario, ya que esto lo vamos a tramitar vía Ajax. Luego llamamos a la función “doAjax” pasándole como argumento el objeto del formulario. Vamos a crear ahora el cuerpo de esta función:

/* Obtain data to be processed. Instantiating the Ajax*/"action""#article_id""#jform_visitor_name""#jform_visitor_email""#jform_visitor_comments").val();
 
   // Always set content_id as last value
/*Pass the values to the AJAX request*/
   /*'ajax' is the jqXHR object*/"#jform_visitor_comments").val('''green''red''Not connect: Verify Network.', 'red''Requested page not found [404]', 'red''Internal Server Error [500].', 'red''parsererror''Requested JSON parse failed.', 'red''timeout''Time out error.', 'red''abort''Ajax request aborted.', 'red''Uncaught Error: ' + jqXHR.responseText, 'red');
                        }
      });
 }

/* Obtain data to be processed. Instantiating the Ajax*/
function doAjax(form) {
   var array, ajax;
   var url          = form.attr("action"),
       article_id   = form.find("#article_id").val(),
       name         = form.find("#jform_visitor_name").val(),
       email        = form.find("#jform_visitor_email").val(),
       comments     = form.find("#jform_visitor_comments").val();

   // Always set content_id as last value
   var data = JSON.stringify({visitor_name: name, visitor_email: email, visitor_comments: comments, content_id: article_id});

   /*Pass the values to the AJAX request*/
   /*'ajax' is the jqXHR object*/
   ajax = theAjax(url, data)
      .done(function( response ){
         if( response.success && response.data) {
            $("#jform_visitor_comments").val('');
            mjNotification(response.message, 'green');
         } else {
            mjNotification(response.message, 'red');
         }
      })

      .fail( function( jqXHR, textStatus, errorThrown ) {
         if (jqXHR.status === 0) {
            mjNotification('Not connect: Verify Network.', 'red');
         } else if (jqXHR.status == 404) {
            mjNotification('Requested page not found [404]', 'red');
            } else if (jqXHR.status == 500) {
               mjNotification('Internal Server Error [500].', 'red');
               } else if (textStatus === 'parsererror') {
                  mjNotification('Requested JSON parse failed.', 'red');
                  } else if (textStatus === 'timeout') {
                     mjNotification('Time out error.', 'red');
                     } else if (textStatus === 'abort') {
                        mjNotification('Ajax request aborted.', 'red');
                        } else {
                           mjNotification('Uncaught Error: ' + jqXHR.responseText, 'red');
                        }
      });
}

Aquí todo es jQuery, por lo que no será necesario entrar en detalles, pero sí resaltaremos algunas cosas. Primero, obtenemos los valores de los campos de nuestro formulario. Estos campos están identificados como ustedes pueden ver, por el atributo ID de cada campo. Pero por ejemplo, este ID “jform_visitor_name” nosotros nunca lo hemos declarado en el layout del formulario. Y es que Joomla genera estos ID para cada campo. Es decir, le pone un prefijo “jform” seguido del nombre del campo “visitor_name”. Esto lo pueden ver en el sitio, inspeccionando el código del formulario con el navegador.

Otra cosa a destacar, es que estamos capturando la URL a donde tiene que enviar los datos (línea 13) y el ID (identificador de la tabla de artículos “com_content”) del artículo. Ambos valores no se encuentran actualmente en el layout del formulario, por lo que tendremos luego que editarlo para incluirlos.

A partir de la línea 24, llamamos a la función “theAjax” (tenemos que crearla) la cual es la que nos va a procesar la petición Ajax. Dentro de la función “.done” del objeto “jqXHR” en la línea 27, vaciamos el “textarea” del comentario una vez se envíe, de esta forma el usuario no puede enviar una y otra vez haciendo clic continuamente sobre el botón “Enviar”, obligándolo a escribir nuevamente otro comentario. Estos formas de seguridad, que podemos aplicar a los formulario. Por ejemplo, podemos hacer que una vez se envíe el comentario, el botón de enviar el comentario permanesca deshabilitado X cantidad de segundos. Otra medida de seguridad por ejemplo, es incluir el reCAPTCHA de google. Ya hablaremos de esto en otro momento.

También notaran que hacemos en varias ocasiones una llamada a la función “mjNotification()” pasandole un texto y un color como argumentos. Esta función nos va a servir para mostrar una notificación de envío, de esta forma el usuario sabe si se envio correctamente su comentario o no.

Prosigamos con lo que nos falta en este archivo. Vamos a crear el cuerpo de la función “theAjax” quedándonos de esta forma:

/*Returns the jqXHR object*/'post',
      dataType: 'json'

/*Returns the jqXHR object*/
function theAjax(requrl, reqdata) {
   return $.ajax({
      url : requrl,
      type: 'post',
      dataType: 'json',
      data: {jform: reqdata}
   });
}

Como bien decíamos, esta función se encarga de la petición ajax. Por último, creamos las funciones que van a llevar a cabo las notificaciones para el usuario. Tenemos que crear dos. Una para crear la estructura HTML de la notificación para luego mostrarla y otra para quitar o eliminar la estructura HTML. La que crea la estructura, sería de esta forma:

/* Comment notification system */"",
   html,
   time = '5000''body''#mjNotification''#mjNotification'"<i class='" + icon + "'></i> ""<i class='fa fa-info-circle'></i> ";
   }
 
   // Generate the HTML
   html = $('<div class="mjalert mjalert-' + color + '"><p>' + icon_markup + text + '</p></div>''fast');
 
   // Append the label to the container
// Remove the notification on click
   html.on('click'// After 'time' seconds, the animation fades out
'.mjalert').first());
   }, time);
 }

/* Comment notification system */
function mjNotification(text, color, icon) {
   var icon_markup = "",
   html,
   time = '5000',
   $container = $('body');

   if ($('#mjNotification').length) {
      $container = $('#mjNotification');
   }

   if (icon) {
      icon_markup = "<i class='" + icon + "'></i> ";
   }
   else {
      icon_markup = "<i class='fa fa-info-circle'></i> ";
   }

   // Generate the HTML
   html = $('<div class="mjalert mjalert-' + color + '"><p>' + icon_markup + text + '</p></div>').fadeIn('fast');

   // Append the label to the container
   $container.append(html);

   // Remove the notification on click
   html.on('click', function() {
      mjNotificationX($(this));
   });

   // After 'time' seconds, the animation fades out
   setTimeout(function() {
      mjNotificationX($container.children('.mjalert').first());
   }, time);
}

De aquí resaltar 2 cosas. La estructura HTML de la notificación se inserta por defecto al final del “body” del documento HTML. Por supuesto tenemos que insertarla con una propiedad de “position: absolute” para poder moverlo por todo el body y ajustar en que parte de la pantalla queremos que salga. Esto lo haremos luego con CSS. La otra cosa que quería destacar, es que se utiliza dentro de la estructura HTML de la notificación, un icono de Font Awesome. En nuestro caso usaremos esta herramienta para los iconos, pero ustedes pueden usar la de su preferencia, como si quieren usar una imagen que represente el icono de su gusto.

Como pueden ver, existe otra función llamada “mjNotificationX” y es la que llamamos para eliminar la notificación.

span style="color: #009900; font-style: italic;">// Called without argument, the function removes all alerts
   // element must be a jQuery object
"undefined") {
      element.fadeOut('fast''.mjalert').fadeOut('fast'

function mjNotificationX(element) {
   // Called without argument, the function removes all alerts
   // element must be a jQuery object

   if (typeof element !== "undefined") {
      element.fadeOut('fast', function() {
         $(this).remove();
      });
   } else {
      $('.mjalert').fadeOut('fast', function() {
         $(this).remove();
      });
   }
}

De todas forma, tengan presente que se comentó lo más posible cada línea para su mejor entendimiento y para seguir las buenas prácticas de la programación. Recuerden que el código lo tienen disponible desde GITHUB.

Ahora solo nos queda completar los valores que nos faltaban para el envío de los datos, como bien resaltamos más arriba. El valor de hacia dónde tiene que mandar todo los valores recogidos y el ID del artículo en el cual se hizo el comentario. Para esto iremos al layout del formulario y lo editaremos. Abrimos el archivo “default_form.php” de la carpeta “layouts” del plugin:

span style="color: #ff0000;">'behavior.formvalidator');

JHTML::_('behavior.formvalidator');

span style="color: #ff0000;">"comments-form" action="<?php echo $data['formReturn']; ?>" method="post""form-validate" enctype="multipart/form-data">"

<form id="comments-form" action="<?php echo $data['formReturn']; ?>" method="post" class="form-validate" enctype="multipart/form-data">"

<button type="submit" class="btn btn-primary btn-block validate">Enviar</button>

<button type="submit" class="btn btn-primary btn-block validate">Enviar</button>

<input type="hidden" id="article_id" name="article_id" value="<?php echo $data['content_id']; ?>" />

<input type="hidden" id="article_id" name="article_id" value="<?php echo $data['content_id']; ?>" />

Aquí hemos modificado o añadido varias líneas. El siguiente material de la documentación de Joomla, le explicara algunos cambios que hemos realizado en este archivo, como son la línea 12 y la línea 46. Estamos haciendo estas modificaciones ahora, porque estamos en el proceso de envío de un comentario, por lo que hay que tomar todas las precauciones posibles para que los datos sean enviados de forma correcta.

Como pueden ver en la línea 26 de nuestro layout, hemos modificado el atributo “action” del formulario. Le estamos pasando una supuesta url de hacia dónde debe enviar los datos. Digo supuesta, porque en nuestro array “$data” no tenemos aún ningún índice con el nombre “formReturn”. Luego añadimos en la línea 47 otro campo “input” el cual tendrá el ID del artículo que se está visualizando. Pero al igual que el anterior, no tenemos aún ningún índice llamado “content_id”.

Entonces, si seguimos la cadena, ahora toca añadir al array “$data” los dos índice que nos faltan. Ahora editaremos el archivo de entrada de nuestro plugin. Abrimos el archivo “mjformcomment.php”:

// Assign value to the layout variables
'index.php?option=com_mjcomments&task=comment.send&format=json';

// Assign value to the layout variables
$content_id = $row->id;
$formReturn = 'index.php?option=com_mjcomments&task=comment.send&format=json';

De aquí solo destacar la url hacia dónde van los valores introducidos en un comentario. Como pueden ver, es una url la cual cita a nuestro componente y una tarea (task) a llevar a cabo. Pero esto ya vendrá después.

Con esto ya completamos el proceso del envío de un comentario vía ajax. Por supuesto, nadamas hemos hecho el envío, faltaría la recepción por de estos datos por parte del componente. Pero primero, probemos a ver que hace todo esto que hemos hecho. Actualicemos el paquete. Si escribimos un comentario y lo enviamos, la pantalla se queda en blanco. Esto es señal de que algo no está corriendo bien. Está claro que no debe pasar nada, porque no hemos recepcionado los valores del comentario, pero lo que si no puede pasar, es que la pantalla se ponga en blanco y que en nuestra barra de dirección del navegador aparezca, la url localhost/manualesjoomla/index.php/index.php?option=com_mjcomments&task=comment.send&format=json. ¿Porque no puede pasar? bueno, porque desde el archivo javascript del plugin, nosotros cancelamos la acción de envío del formulario. Por lo que al menos, se debería de quedar todo en la misma página del artículo y no dirigirnos a una pantalla en blanco. Y precisamente esto es lo que pasa, creamos el archivo javascript, pero no lo incluimos en el documento, por lo que no está siendo cargado en la página. Para hacerlo editaremos una vez más el punto de entrada del plugin. Abrimos el archivo “mjformcomment.php”:

// Add media file
'jquery.framework''media/pkg_mjcommentsystem/plg_content_mjformcomment/js/plg_mjformcomment.js'

// Add media file
JHtml::_('jquery.framework');
JHtml::script(JUri::base() . 'media/pkg_mjcommentsystem/plg_content_mjformcomment/js/plg_mjformcomment.js', false, true);

Una vez más, Joomla nos ahorra mucho trabajo, y le brinda flexibilidad a nuestro desarrollo. La documentación de estas líneas pueden encontrarlas aquí y aquí.

Si volvemos actualizar el paquete con este cambio, verán que cuando le damos en el botón de enviar comentario, se va a quedar en la misma página como si nada funcionara. Esto es bueno, aunque no funcione porque ya nuestro script tomó el control. Si inspeccionan la página con el navegador y le dan al botón enviar, verán un error en la consola del navegador diciendo “Uncaught TypeError: Cannot read property 'success' of null”. Y precisamente, como nadie está devolviendo una respuesta al envío de los valores, el objeto “response” toma null. Ayudemos entonces un poco a este objeto, y hagamos que alguien le responda su petición.

Como bien vimos más arriba, la url a donde es enviado los datos del formulario, es al componente y específicamente hacia una tarea llamada “task=comment.send”. Joomla implementa en su modelo MVC, un controlador maestro y una serie de subcontroladores para el trabajo perteneciente al CRUD. Pueden apoyarse en estos documentos (1, 2), para un mejor entendimiento. Entonces, debemos crear nuestro controlador maestro en el componente y un subcontrolador que es el que se va a encargar del procesamiento de los valores enviados y de devolver una respuesta a la petición Ajax.

Empecemos por el subcontrolador. Todos los subcontroladores van dentro de una carpeta llamada “controllers”. Como este trabajo se va a llevar en la parte pública del componente, crearemos esta carpeta dentro de la carpeta “site”. Dentro de la carpeta, crearemos un archivo llamado, “comment.json.php”. Este será el subcontrolador encargado del procesamiento de los datos. Recuerden que este nombre que le dimos no es a priori. Le pusimos “comment” porque en la variable “task” de la url, este es el nombre. Y “json” porque hemos pasado en la url una variable “format=json”, quedándonos entonces con el nombre “comment.json”, de esta forma Joomla sabe que componente y que subcontrolador va a ejecutar la tarea asignada.

Editemos “comment.json.php”:

span style="color: #808080; font-style: italic;">/**
 * @package MJ.Component
 * @subpackage mjcomments
 *
 * @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
 * @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
 */'_JEXEC'/**
 * Form controller class.
 *
 *//**
    * Method to check the form data.
    *
    * @return boolean True on success, false on failure.
    *
    */'Formcomment', 'MjcommentsModel'// Get the comment data
      $<span style="font-family: 'courier new', courier, monospace; line-height: 15.6000003814697px;"'jform', '', 'raw');
 
      // Get the form
// Check for validation errors
'COM_MJCOMMENTS_CONTROLLERS_COMMENT_VALIDATE_FORM_DATA'// Validate the posted data
// Check for validation errors
'COM_MJCOMMENTS_CONTROLLERS_COMMENT_VALIDATE_FORM_DATA'// Save the data in the session
'com_mjcomments.formcomment.data'// Attempt to save the data
// Check for errors
'COM_MJCOMMENTS_CONTROLLERS_COMMENT_SAVE_FORM_DATA'// Save the data in the session
'com_mjcomments.formcomment.data'// Flush the data from the session.
'com_mjcomments.formcomment.data'

<?php
/**
* @package MJ.Component
* @subpackage mjcomments
*
* @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
* @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
*/

defined('_JEXEC') or die;

/**
* Form controller class.
*
*/
class MjcommentsControllerComment extends JControllerForm
{
   /**
    * Method to check the form data.
    *
    * @return boolean True on success, false on failure.
    *
    */
   protected function checkFormData(&$message, &$error)
   {
      $app = JFactory::getApplication();
      $model = $this->getModel('Formcomment', 'MjcommentsModel');
      $data = new stdClass;

      // Get the comment data
      $requestData = $this->input->post->get('jform', '', 'raw');

      // Get the form
      $form = $model->getForm();

      // Check for validation errors
      if (!$form)
      {
         $message = JText::_('COM_MJCOMMENTS_CONTROLLERS_COMMENT_VALIDATE_FORM_DATA');
         $error = true;

         return false;
      }

      // Validate the posted data
      $data = $model->validate($form, $requestData);

      // Check for validation errors
      if ($data === false)
      {
         $message = JText::_('COM_MJCOMMENTS_CONTROLLERS_COMMENT_VALIDATE_FORM_DATA');
         $error = true;

         // Save the data in the session
         $app->setUserState('com_mjcomments.formcomment.data', $requestData);

         return false;
      }

      // Attempt to save the data
      $return = $model->comment($data);

      // Check for errors
      if ($return === false)
      {
         $message = JText::_('COM_MJCOMMENTS_CONTROLLERS_COMMENT_SAVE_FORM_DATA');
         $error = true;

         // Save the data in the session
         $app->setUserState('com_mjcomments.formcomment.data', $requestData);

         return false;
      }

      // Flush the data from the session.
      $app->setUserState('com_mjcomments.formcomment.data', null);

      return true;
   }
}

Lo primero que hicimos fue crear una funciön para la validación y comprobación del formulario y sus valores enviados. La llamamos “checkFormData”, y pueden apreciar que no es nada del otro mundo.

La obtención de los valores enviados, se realiza en las líneas 31 y 32. Pueden ver la documentación de esta parte.

Se utiliza la clase “JText” (libraries\joomla\language\text.php) para la salida de las cadenas de texto traducibles. Pueden ver como otras funcionalidades de esta clase aquí.

Para la validación de los datos entrados, se utiliza la función “validate” (línea 47) de la clase “JModelForm”. Esto Joomla lo hace por nosotros, tan solo es llamar a la función con sus dos argumentos.

Otra función que utilizamos es “setUserState”. Esto nos permite almacenar valores en la sesión, muy útil para por ejemplo, que el usuario no tenga que entrar los mismos valores nuevamente en caso de algún error. Vean su documentación.

En la línea 62, llamamos a la función “comment” del modelo. Esta función no está implementada en ningún lado, ya que es la función que vamos a usar para insertar los valores entrados en la base de datos. Por supuesto, esta función la desarrollaremos dentro del modelo “formcomment”. Pero no ahora, lo dejamos para después, terminemos con el subcontrolador.

Como pudieron ver, esta función “checkFormData”, es solo una función para el chequeo de los valores entrados. Por lo que ahora crearemos la función que hemos especificado en la url del atributo “action” del formulario, que es la que Joomla llama para que atienda la petición de envío de un comentario. En la url pusimos “task=comment.send”, donde coomment es el subcontrolador y “send” es la función llamada. Por lo tanto, la creamos en nuestro archivo:

/**
 * Method to proccess the ajax request
 *
 */'COM_MJCOMMENTS_CONTROLLERS_COMMENT_SEND_SUCCESS'

/**
* Method to proccess the ajax request
*
*/
public function send()
{
   $message     = JText::_('COM_MJCOMMENTS_CONTROLLERS_COMMENT_SEND_SUCCESS');
   $error       = false;
   $checkResult = $this->checkFormData($message, $error);

   try
   {
      echo new JResponseJson($checkResult, $message, $error);
   }

   catch(Exception $e)
   {
      echo new JResponseJson($e);
   }
}

A resaltar aquí, solo la función “JResponseJson”, la cual es la que se encarga de preparar la respuesta a la petición Ajax y entregarsela a nuestro amigo “response” allá en el archivo javascript del plugin ¿se acuerdan?. Pueden ver su documentación.

Ahora le toca el turno al controlador maestro. Creamos un archivo llamado “controller.php” en la raíz de la carpeta “site” del componente, el cual va a tener las siguientes líneas:

span style="color: #808080; font-style: italic;">/**
 * @package MJ.Component
 * @subpackage mjcomments
 *
 * @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
 * @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
 */'_JEXEC'/**
 * Base controller class.
 *
 */

<?php
/**
* @package MJ.Component
* @subpackage mjcomments
*
* @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
* @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
*/

defined('_JEXEC') or die;

/**
* Base controller class.
*
*/
class MjcommentsController extends JControllerLegacy
{

}

¿La clase está vacía? Será la pregunta que se hagan. Y por el momento, no necesitamos más nada. Todo lo que hace falta hacer, ya se hace por defecto en la clase padre “JControllerLegacy” (libraries\legacy\controller\legacy.php). No hay vista que mostrar, no hay página a la cual redirigir al usuario, tan solo definir el controlador.

Teniendo todos los controladores listo, tan solo nos queda modificar el punto de entrada del componente en la parte pública del mismo (carpeta “site”) para que se ocupe de asignar el controlador que se va a encargar de la tarea que se pide. Es decir, tenemos un subcontrolador, el cual tiene como encomienda, obtener los datos que se enviaron desde el formulario, procesar los valores, insertarlos en la base de datos (algo que tenemos pendiente aún), y enviar una respuesta satisfactoria en caso de que la tarea se haya cumplido con éxito, o una respuesta negativa en caso contrario. Luego creamos un controlador maestro, que es el que va a dirigir toda la orquesta. El es quien manda a ejecutar determinada tarea. Y esto es precisamente lo que nos queda hacer. Editando entonces el archivo “mjcomments.php” nos queda:

span style="color: #808080; font-style: italic;">/**
 * @package MJ.Component
 * @subpackage mjcomments
 *
 * @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
 * @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
 */'_JEXEC''Mjcomments''task'));

<?php
/**
* @package MJ.Component
* @subpackage mjcomments
*
* @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
* @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
*/

defined('_JEXEC') or die;

$controller = JControllerLegacy::getInstance('Mjcomments');
$controller->execute(JFactory::getApplication()->input->get('task'));

Con esto listo, sin duda nos entran muchos deseos de una pequeña prueba, a pesar de que nos de error porque aún no hemos creado la función en el modelo para que inserte los datos recibidos. Pero hagamos una prueba, sin duda será reconfortante ver un mensaje de error. Pero antes, recuerden actualizar el manifiesto del componente, añadiendo a la parte pública la carpeta “controllers” y el archivo “controller.php”.

El mensaje de error se va a mostrar a través del bloque de notificación que hemos creado desde el plugin. Ahí definimos la estructura HTML, pero no definimos ningún estilo CSS para el mismo. Así como definimos la inserción del archivo javascript en el plugin, definiremos uno pero esta vez para un css.

Editamos nuevamente el punto de entrada del plugin, y añadimos lo siguiente:

span style="color: #ff0000;">'media/pkg_mjcommentsystem/plg_content_mjformcomment/css/plg_mjformcomment.css'

JHtml::stylesheet(JUri::base() . 'media/pkg_mjcommentsystem/plg_content_mjformcomment/css/plg_mjformcomment.css', false, true, false);

Luego creamos la estructura de carpetas necesarias en conjunto con el archivo “plg_mjformcomment.css” dentro de la carpeta “media” del plugin. Los estilos que nos hacen falta son los siguientes:

/* GLOBAL
-------------------------------------------------- */

/* GLOBAL
-------------------------------------------------- */
#mjNotification{
   position: fixed;
   top: 60px;
   z-index: 999999;
}
#mjNotification .mjalert {
   padding: 15px;
   margin-bottom: 20px;
}

#mjNotification .mjalert-red {
   color: #ffffff;
   background-color: #c0392b;
}

#mjNotification .mjalert-green {
   color: #ffffff;
   background-color: #27ae60;
}

#mjNotification .mjalert p {margin-bottom: 0;}

En este caso, estos estilos son, asumiendo que nosotros manualmente insertamos un contenedor div con esta forma “<div id="mjNotification"></div>” en alguna parte de la plantilla del sitio dentro del body del documento, ya que este será el sitio en donde va a salir el bloque de notificación. Sin duda esto es algo que se puede optimizar, y hacerlo más automatizado, pero lo dejaremos así por el momento. Recuerden, tenemos que insertar un conmtenedor div con esta forma “<div id="mjNotification"></div>” en la plantilla que estamos utilizando.

Ahora sí, probemos a ver que tal funciona todo. Actualizamos el paquete y enviamos un comentario desde el sitio:

¡Un error muy bonito de ver! Recuerden que este error es porque no hay respuesta desde el componente, debido a que allá se está produciendo un error, porque no hemos definido la función que nos falta en el modelo.

El último paso para que todo funcione sería crear esta función dentro del modelo del componente. Por tanto, editamos el archivo “formcomment.php”:

/**
 * Method to save the form data.
 *
 * @param array $temp The form data.
 *
 * @return boolean True on success, false on failure.
 *
 */// Merge in the comment data.
'state']            = 1;
   $data['content_id']       = (int) $data['content_id'];
   $data['visitor_email''visitor_email']);
   $data['visitor_comments''visitor_comments'])));
   $data['created'// Get a level row instance.

/**
* Method to save the form data.
*
* @param array $temp The form data.
*
* @return boolean True on success, false on failure.
*
*/
public function comment($temp)
{
   $data = (array) $this->getData();

   // Merge in the comment data.
   foreach ($temp as $k => $v)
   {
      $data[$k] = $v;
   }

   $data['state']            = 1;
   $data['content_id']       = (int) $data['content_id'];
   $data['visitor_email']    = JStringPunycode::emailToPunycode($data['visitor_email']);
   $data['visitor_comments'] = stripcslashes(nl2br(htmlentities($data['visitor_comments'])));
   $data['created']          = JFactory::getDate()->toSql();

   // Get a level row instance.
   $table = $this->getTable();

   if ($table->save($data) === false)
   {
      return false;
   }

   return true;
}

Como bien definimos en el subcontrolador, la función que utilizamos para la inserción de los valores del comentario en la base de datos es, “comment”.

En esta función, insertamos dentro del array “$data”, los valores que nos va a devolver la función “getData” (línea 50 - 56), la cual va a manejar valores almacenados en la sesión.

Luego tomamos los valores y le hacemos uno que otro cambio, para su posterior inserción en la base de datos (línea 58 - 62). Observen como hemos puesto para el campo “state” un número 1. Esto significa que el comentario se publicará automáticamente. Por supuesto, este comportamiento luego lo cambiaremos, y definiremos por ejemplo, en los parámetros del plugin uno nuevo que indique si los comentarios van a ser moderados o no, y en dependencia de este parámetro, asignaremos un número 1 o un número 0, o algo parecido ya veremos cuando llegue el momento.

Por último obtenemos el objeto “$table”, para guardar los valores en la tabla de la base de datos (línea 65 - 70). Observen que aquí hacemos uso de otra función llamada “getTable” la cual debemos definir.

Saldemos las deudas entonces, y empecemos definiendo la función “getData”. Volvemos a editar el archivo “formcomment.php” y añadimos lo siguiente:

/**
 * @var object The client form data.
 */
 protected $data;
 
 /**
 * Method to get the form data.
 *
 * @return mixed Data object on success, false on failure.
 *
 */// Override the base client data with any data in the session.
'com_mjcomments.formcomment.data'

/**
* @var object The client form data.
*/
protected $data;

/**
* Method to get the form data.
*
* @return mixed Data object on success, false on failure.
*
*/
public function getData()
{
   if ($this->data === null)
   {
      $this->data = new stdClass;
      $app = JFactory::getApplication();

      // Override the base client data with any data in the session.
      $temp = (array) $app->getUserState('com_mjcomments.formcomment.data', array());

      foreach ($temp as $k => $v)
      {
         $this->data->$k = $v;
      }
   }

   return $this->data;
}

Ha resaltar aquí, es que creamos una variable “$data” global la cual usaremos para el manejo de los valores enviados. Aquí trabajamos como pueden ver en la línea 37 con valores almacenados en la sesión.

Por último, creamos la función “getTable”:

/**
 * Get database table
 *
 * @param string $name Instance name of the table to load
 *
 * @return JTable
 */'Mjcomments', $prefix = 'MjcommentsTable'

/**
* Get database table
*
* @param string $name Instance name of the table to load
*
* @return JTable
*/
public function getTable($name = 'Mjcomments', $prefix = 'MjcommentsTable', $config = array())
{
   return JTable::getInstance($name, $prefix, $config);
}

Esta función nos devuelve una instancia de la clase “JTable”, la cual no hemos creado por ningún lado. Así que al parecer el último eslabón de la cadena va a ser este. 

Para hacer lo que al parecer es nuestra última tarea, tenemos que ir a la carpeta “admin” de nuestro componente y crear una carpeta llamada “tables” y dentro un archivo php con el nombre de la tabla de la base de datos, en este caso “mjcomments”. Esto lo define así Joomla, no es a priori, ya que es esta la ruta donde busca cuando instanciamos la clase “JTable”.

span style="color: #808080; font-style: italic;">/**
 * @package MJ.Component
 * @subpackage mjcomments
 *
 * @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
 * @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
 */'_JEXEC'/**
 * Comments Table.
 *
 *//**
    * @var integer
    *//**
    * @var integer
    *//**
    * @var string
    *//**
    * @var string
    *//**
    * @var string
    *//**
    * @var datetime
    *//**
    * @var integer
    *//**
    * Constructor
    *
    * @param JDatabaseDriver &$db Database connector object
    *
    * @since 1.0
    */'#__mjcomments', 'id', $db);
   }
}

<?php
/**
* @package MJ.Component
* @subpackage mjcomments
*
* @copyright Copyright (C) 2015 Carlos Rodriguez. All rights reserved.
* @license License http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
*/

defined('_JEXEC') or die;

/**
* Comments Table.
*
*/
class MjcommentsTableMjcomments extends JTable
{
   /**
    * @var integer
    */
   public $id;

   /**
    * @var integer
    */
   public $content_id;

   /**
    * @var string
    */
   public $visitor_name;

   /**
    * @var string
    */
   public $visitor_email;

   /**
    * @var string
    */
   public $visitor_comments;

   /**
    * @var datetime
    */
   public $created;

   /**
    * @var integer
    */
   public $state;

   /**
    * Constructor
    *
    * @param JDatabaseDriver &$db Database connector object
    *
    * @since 1.0
    */
   public function __construct(&$db)
   {
      parent::__construct('#__mjcomments', 'id', $db);
   }
}

Como pueden ver, es bien sencillo esto. Tan solo declarar cada campo de la tabla de la base de datos, como variables globales en la clase, y luego llamar al constructor de la clase padre.

Bueno, al parecer hemos resuelto todo los pendientes. Debería de funcionar todo ahora, así que a probar. Pero primero, recuerden incluir la nueva carpeta “tables” dentro del manifiesto del componente. Actualizamos el paquete y:

¡Epale! todo ha salido tal cual. Tenemos una notificación en verde y si nos fijamos en la tabla de la base de datos, ya está insertado el primer registro de un comentario. Ahora nos toca asignar valores a esas cadenas de texto traducibles de laa notificaciones para que todo quede bien bonito. Estoy seguro que ya para esto no necesitan guía, así que confío que lo hagan bien.

Esto ha sido todo por el momento. No se sientan mal si el formulario sigue viéndose algo deformado, recuerden que primero estamos garantizando la funcionalidad, ya llegará el momento de tocar temas de diseño y visualidad. ¡Nos vemos!