Creando mi primer Helper para CakePHP

Recientemente, trabajando en un proyecto de un cliente, me vi en la necesidad de crear un Helper. Por eso quiero compartir con ustedes como podemos crear un Helper en CakePHP de manera rápida y comprensible.

Antes que todo, queremos recordar que un Helper no es más que un componente utilizado en la capa de presentación de una aplicación. ¿Cuando hay que crear un Helper? Cuando nos encontramos con secciones repetitivas en nuestras vistas, elementos o layouts. Un ejemplo de secciones así, serían los mensajes de alertas, errores o información.

En este artículo veremos como crear un Helper que nos permita crear mensajes de alertas customizados. El Helper lo llamaremos MessageHelper, procedamos a crearlo.

Partiendo que ya tenemos una instalación de CakePHP nos dirigimos al directorio app/views/helpers y creamos nuestro Helper creando un archivo llamando message.php (esto es siguiendo la convención para archivos y clases en CakePHP). Luego procedemos a editar nuestro Helper recién creado y agregamos el siguiente código.

<?php
class MessageHelper extends AppHelper {
}
?>

Con esto tendremos lo básico creado para nuestro primer Helper. Ahora procederemos a crear tres métodos para la creación de nuestros tres tipos de mensajes. Sin embargo, los mensajes de error los quiero mostrar de un DIV el cual quiero darle estilo por CSS. Para esto necesitaría la ayuda de otro Helper ya creado, el HtmlHelper. Tomando el código anterior procedemos a agregar los métodos:

<?php
class MessageHelper extends AppHelper {
  // Agregamos el HtmlHelper.
  var $helpers = array('Html');
  // Creamos el método para mensajes informativos.
  function info($message) {
    // Agregamos nuestro CSS externo de nombre msg.css
    // Solo tenemos que poner msg sin el '.css'
    $this->Html->css(array('msg'), null, null, false);
    // Creamos nuestro div con un clase CSS 'msg-info'
    // y le pasamos el mensaje al cuerpo de nuestro DIV.
    $info = $this->Html->div('msg-info', $message);
    // Ahora devolvemos el DIV creado.
    return $info;
  }
  // Creamos el método para mensajes de errores.
  function error($message) {
    // Agregamos nuestro CSS externo de nombre msg.css
    // Solo tenemos que poner msg sin el '.css'
    $this->Html->css(array('msg'), null, null, false);
    // Creamos nuestro div con un clase CSS 'msg-info'
    // y le pasamos el mensaje al cuerpo de nuestro DIV.
    $info = $this->Html->div('msg-error', $message);
    // Ahora devolvemos el DIV creado.
    return $info;
  }
  // Creamos el método para mensajes de alertas.
  function warning($message) {
    // Agregamos nuestro CSS externo de nombre msg.css
    // Solo tenemos que poner msg sin el '.css'
    $this->Html->css(array('msg'), null, null, false);
    // Creamos nuestro div con un clase CSS 'msg-info'
    // y le pasamos el mensaje al cuerpo de nuestro DIV.
    $info = $this->Html->div('msg-warning', $message);
    // Ahora devolvemos el DIV creado.
    return $info;
  }
}
?>

Listo, con eso ya tenemos nuestro primer Helper creado. Para poder probarlo tan solo habrá que incluirlo en nuestro controlador en cuestión.

<?php
class SampleController extends AppController {
  // Incluimos nuestro Helper en el controlador.
  // Tan solo ponemos 'Message' para referirnos a MessageHelper.
  var $helpers = array('Message');
}
?>

Una vez esté listo nuestro controlador, tan solo tenemos que llamar los métodos de nuestro MessageHelper desde la vista.

<?php
echo $message->info('Este es un mensaje de alerta.');
echo $message->error('Este es un mensaje de error.');
echo $message->warning('Este es un mensaje de alerta.');
?>

Hasta este punto no veremos nada visualmente diferente aparte de los textos. Esto es porque debemos de crear una hoja de estilo CSS en app/webroot/css llamada msg.css. Para fines de pruebas podemos crear el archivo CSS con las siguientes definiciones de estilo.

/*
 * Estilos para mensajes.
 */
.info {
  border:solid 1px #349534;
  background:#C9FFCA;
  color:#008000;
  font-weight:bold;
  padding:4px;
  text-align:center;
}
.error {
  border:solid 1px #CC0000;
  background:#F7CBCA;
  color:#CC0000;
  font-weight:bold;
  padding:4px;
  text-align:center;
}
.warning {
  border:solid 1px #DEDEDE;
  background:#FFFFCC;
  color:#222222;
  padding:4px;
  text-align:center;
}

Voilà! Este era el toque final. Ahora verás tu Helper funcionando, ahora te toca extenderlo y agregar las funcionalidades que necesites.

Créditos por los CSS: WOORK.