Resultado final.

Vamos a programar un módulo en Drupal 7, veremos paso a paso como es su desarrollo básico, la intención es mostrar solo la información del clima que es extraída de la pagina web eltiempo.es, incluiremos en el módulo los estilos (css) con sus imágenes que son necesarios para hacerlo totalmente independiente, y luego como se incluye dentro de una región del tema mediante un par de líneas de código. El manejo del cache lo dejaremos para otro post.

Paso 1 – Conocer la estructura básica: Primero debemos saber donde alojamos nuestros módulo en Drupal y luego crear toda la estructura de directorios y archivos que compone el código. Los módulos que nosotros creamos los agregamos dentro del directorio “sites/all/modules/custom/” de nuestro proyecto, a diferencia de los módulos creados por terceros que se colocan en “sites/all/modules/”, de esta forma somos mas ordenados.

Para esta situación se deben crear dos archivos básicos para que pueda funcionar el módulo, el resto son complementarios dependiendo del propósito con el que se está construyendo dicho módulo. A continuación explico por importancia cada archivo:

  • eltiempo.info: Contiene la información básica del módulo; nombre, descripción, paquete al que conforma, ficheros que lo componen, versión del módulo y versión mínima soportada por Drupal, entre otras cosas.
  • eltiempo.module: Contiene toda la programación del módulo, aquí es donde se incluyen los hook y cualquier otra función adicional para uso interno o pública como parte un API.
  • eltiempo.tpl.php: Contiene lo que se llama el tema y es básicamente el HTML que forma el bloque a mostrar, tiene toda la programación necesaria para mostrar los datos procesados por el archivo anterior.
Los siguientes archivos conforman el estilo y las imágenes que componen el modulo; eltiempo.css, eltiempo_bg.jpgeltiempo_over.png
 

Paso 2 – Crear la estructura del archivo de configuración: En este archivo “eltiempo.info” definimos una serie de propiedades que describen el módulo o bloque, las propiedades hablan por si solas, para mayor información entrar aquí:

package = "SwapBytes"
name = "ElTiempo.es"
description = "Bloque que obtiene la temperatura del sitio eltiempo.es y muestra los valores max, min y actual de la ciudad de Madrid."
version = "7.x-0.1"
core = "7.x"
files[] = eltiempo.module
Paso 3 – La programación del módulo: Este archivo esta compuesto por un mínimo de de hooks para que pueda funcionar, toda la información relacionada a ellos la conseguiras aquí:
/*
 * Definimos la información del bloque.
 */
function eltiempo_block_info() {
  $blocks['eltiempo'] = array(
    'info'        => 'ElTiempo',
    'base'        => 'eltiempo',
    'description' => t('Obtiene la temperatura del sitio eltiempo.es.'),
    'title_label' => t('ElTiempo.es'),
    'cache'       => DRUPAL_NO_CACHE,
  );
  
  return $blocks;
}

/*
 * Definimos el cuerpo del bloque, aquí incluimos el título, el tema y le
 * pasamos las variables que debe imprimir en casa área en específico.
 * Obtenemos estos valores a la llamada a una funcion "_eltiempo_get_values"
 * interna.
 */
function eltiempo_block_view($delta = ''){
  switch($delta) {
    case 'eltiempo':
      $temps = _eltiempo_get_values();
      $theme = theme('eltiempo', array('max' => $temps['max'],
                                       'min' => $temps['min'],
                                       'now' => $temps['now']));
      $block['subject'] = t('ElTiempo.es');
      $block['content'] = $theme;
        
      return $block; 
    }
    
    break;
  }  
}

/*
 * Le indicamos que variables recibirá el bloque.
 */
function eltiempo_theme() {
   return array(
      'eltiempo' => array(
        'variables' => array('max' => NULL,
                              'min' => NULL,
                              'now' => NULL),
         'template' => 'eltiempo',
      ),
   );
}

/*
 * Agregamos el CSS que será utilizado por el tema de este bloque.
 */
function eltiempo_init() {
  global $base_url;
  
  $element = array(
    '#tag' => 'link',
    '#attributes' => array(
      'href' => $base_url . '/' .
                drupal_get_path('module', 'eltiempo') .
                '/eltiempo.css',
      'rel'  => 'stylesheet',
      'type' => 'text/css',
    ),
  );
  
  drupal_add_html_head($element, 'eltiempo');
}

/*
 * Función interna para obtener los valores de la temperatura del widget de eltiempo.es.
 */
function _eltiempo_get_values() {
  $uri = "http://www.eltiempo.es/widget/get_widget/481319c3853a9ba69bf9e8c39e15e860?v=11000";
  $ch  = curl_init();
  
  curl_setopt($ch, CURLOPT_URL, $uri);
  curl_setopt($ch, CURLOPT_POST, false);
  curl_setopt($ch, CURLOPT_HEADER, false);
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
  $html =  curl_exec($ch);
  curl_close($ch);
  
  $matches = array();
  $pattern = "(d{1,2}°)";
  preg_match_all($pattern, $html, $matches);
  
  $temp['now'] = $matches[0][0] = rand(10, 13);
  $temp['max'] = $matches[0][1] = rand(10, 20);
  $temp['min'] = $matches[0][2] = rand(10, 19);
  
  return $temp;
}
Paso 4 – El tema: Básicamente éste archivo contiene el HTML y el código PHP necesario para imprimir las variables que son suministradas por el archivo “eltiempo.module“.
<div id='eltiempo_block'>
  <div id='eltiempo_dynamic'>
    <div id='eltiempo_location'>Madrid</div>
    <div class='eltiempo_max'>Máx:</div>
    <div class='eltiempo_min'>Min:</div>
    <div class='eltiempo_now'>Ahora:</div>
  </div>
</div>
Paso 5 – Los estilos: Esto no tiene nada de nuevo, simplemente es el archivo css que se necesita para maquetar el HTML del archivo anterior.
@charset "utf-8";

#eltiempo_block  {
 width:170px;
 height:160px;
 background:url("images/eltiempo_bg.jpg") top center no-repeat;
 position:relative;
}

#eltiempo_dynamic {
 width:170px;
 height:75px;
 position:absolute;
 bottom:0;
 background:url("images/eltiempo_over.png");
}

#eltiempo_location {
 color:#414345;
 height:20px;
 font-family:georgia, serif;
 font-size:18px;
 padding-top:4px;
 padding-left:10px;
}

.eltiempo_max,
.eltiempo_min,
.eltiempo_now {
 width:55px;
 height:42px;
 margin-top: 5px;
 color:#414345;
 font-size:12px;
 line-height:15px;
 text-align: center;
}

.eltiempo_max span,
.eltiempo_min span,
.eltiempo_now span {
 font-family:georgia, serif;
 font-size:20px;
 font-weight:700;
}

.eltiempo_max,
.eltiempo_min {
 float:left;
 border-right:2px dashed #414345;
}

.eltiempo_now {
 float:right;
}
Paso 6 – Instalación del modulo: Drupal detecta de forma automática la existencia de los módulos, solamente debemos entrar a la siguiente ruta “http://localhost/demo/admin/modules”, buscar el nuestro, lo habilitamos y guardar los cambios.
Nota: Cada ves que se realiza un cambio importante en el archivo eltiempo.module, como la incorporación de algún método de tipo hook, debe limpiar el cache para que los cambios tengan efecto. Para ello accedemos a la siguiente ruta “http://localhost/demo/admin/config/development/performance”.
 
Paso 7 – Mostrar el módulo: Incorporar el nuevo módulo como bloque en una determinada región es fácil utilizando la programación con un par de líneas de código, solamente debemos editar dos partes del tema en caso de que no exista la región donde queremos incluirlo, sino requiere realizar este ajuste puede saltar el paso 7.1.

Paso 7.1 – Agregar una región dentro del tema: Edite el archivo de información del tema para agregar una región adicional.

regions[eltiempo] = ElTiempo.es

Escriba el siguiente código PHP donde desea imprimir el bloque dentro del tema:

<?php print render($page['search']); ?>

Recuerde que ambos nombres deben ser iguales. Una ves realizado el paso siguiente podrá ver como aparece fácilmente.
Paso 7.2 – Agregar el bloque al tema: Para el primer caso solo debemos acceder a la siguiente ruta “http://localhost/demo/admin/structure/block”, buscamos el bloque y seleccionamos en que región queremos que se muestre, guardamos los cambios, y podremos apreciar los cambios.

Con esto se termina toda la programación, es hora de que puedan observar su primer bloque. Espero que hayan podido completar con éxito este pequeño tutorial.