Módulo personalizado | Creación de plantilla
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Hoy hemos decidido que estamos dispuestos a seguir aprendiendo Drupal, porque nos apasiona obtener nuevos conocimientos, que solucionarán posibles retos en nuestro futuro próximo, o porque nos encanta ampliar nuestras posibilidades, tanto a nivel laboral como personal. Ya que la puesta en marcha de proyectos web, podrían representar el inicio hacia una carrera prometedora.
Ahora que ya tenemos claro Cómo crear un módulo en Drupal 9, en esta ocasión nos vamos a concentrar, en la creación de una plantilla personalizada, con el objetivo de tomar el control sobre la presentación de los datos relacionados con el mismo. Para lograr nuestro propósito, tendremos que implementar uno de los "hooks" o funciones prefabricadas de Drupal que nos permitirán lograr toda clase de objetivos, en este caso será function hook_theme, la que se encargará registrar las implementaciones de un tema o "theme", dentro de nuestro tema o módulo personalizado.
En este capítulo vamos a crear un módulo personalizado, al que añadiremos un controlador, que nos imprimirá en pantalla una página y posteriormente, también añadiremos mediante la function hook_theme en el archivo ( MIMODULO.module ) los datos y configuraciones que nos permitirán pasar por parámetros el título y otros contenidos que mostraremos en ella.
Finalmente, añadiremos el archivo routing ( MIMODULO.routing.yml ), para poder acceder a esta página una vez haya sido activado nuestro módulo personalizado. Este ejemplo te permitirá conocer la manera en que podrás implementar plantillas personalizadas en tus módulos.
Requisitos
- Cómo crear un módulo en Drupal 9
Cómo crear módulos con su Controlador y Plantilla en Drupal 9
Paso 1 Creación de tu módulo:
Lo primero que deberías saber es cómo crear un módulo personalizado. Esencialmente para este ejemplo, lo que necesitarás será una carpeta con el nombre de tu módulo y dentro el archivo con el nombre del módulo y la extensión, eje.: "mimodulo.info.yml"
Paso 2 Creación del archivo .module para implementar la function_hook_theme():
En el archivo MIMODULO.module es donde podremos implementar los hooks o funciones de php en Drupal, en este ejemplo utilizaremos la function hook_theme, que se encarga de registrar las implementaciones del tema dentro de un módulo o tema personalizado, esto quiere decir, que las implementaciones declaradas por este hook o función especifican cómo un arreglo o array de renderización particular debe ser renderizada como HTML.
Los párametros que utilizaremos en este ejercicio, estarán dentro de un array que nos devolverá la función y son, el nombre de la función y dentro de de ella, las variables que pasaremos posteriormente al controlador, para crear la página que imprimiremos una vez activado el módulo.
Dentro de las variables, a su vez, tendremos un array de items, donde colocaremos todos las noticias que queremos presentar en la página una vez renderizada y el título de la página que será del tipo String.
<?php
/**
* Implement hook_theme().
*/
function listado_noticias_theme($existing, $type, $theme, $path) {
return [
'listado_noticias' => [
'variables' => ['items' => [], 'title' => '' ]
]
];
}
Paso 3 Creación del Controlador o Controller:
El Controlador o Controller es quien nos permitirá crear la página que se mostrará, una vez activado nuestro módulo, al renderizar los datos que hemos definido previamente en nuestra function hook_theme.
Para que pueda generarse nuestra página, vamos a añadir a nuestra clase controlador, un método al que llamaremos "page()", y dentro tendremos dos arrays, uno que contendrá el listado de noticias que vamos a recorrer usando nuestra function hook_theme, y otro con los datos que obtendremos al conectar con la información recibida desde la function hook_theme.
Una vez creada nuestra clase controller con el nombre ListadoNoticiasController.php, dentro tendremos la siguiente estructura de código.
<?php
namespace Drupal\listado_noticias\Controller;
use Drupal\Core\Controller\ControllerBase;
class ListadoNoticiasController extends ControllerBase {
public function page(){
$items = [
['title' => 'Noticia 1'],
['title' => 'Noticia 2'],
['title' => 'Noticia 3'],
['title' => 'Noticia 4'],
];
return [
'#theme' => 'listado_noticias',
'#items' => $items,
'#title' => 'Listado de noticias'
];
}
}
El primer array, es un array de objetos, ya que cada noticia podrá tener tantos elementos como queramos especificar, para este ejemplo, sólo añadiremos el título, pero puedes añadir tantos como necesites, siempre tomando en cuenta la estructura ( "clave" => "valor" ), ya que los objetos, en realidad también son arrays.
$items = [ ['title' => 'Noticia 1'], ['title' => 'Noticia 2'], ['title' => 'Noticia 3'], ['title' => 'Noticia 4'], ];
El segundo array, que tendremos dentro de nuestro método "page()", es el que nos devolverá nuestro método al llamarlo, contendrá los parámetros necesarios para renderizar los datos recibidos desde la function hook_theme, y que harán posible la impresión en pantalla, de nuestros contenidos en formato de una página, al activar el módulo.
En el primer parámetro del array, estamos llamando a nuestra función tema, que configuramos usando la function hook_theme, el segundo parámetro son los items, que hemos definido como una de las variables que pasamos y el último, será el título de la página, que también definimos mediante la función.
Esto hará posible, que posteriormente podamos recorrer el primer array de items y mostrarlos en la plantilla correspondiente, que todavía no hemos creado.
return [ '#theme' => 'listado_noticias', '#items' => $items, '#title' => 'Listado de noticias' ];
Paso 4 Creación de la ruta para acceder a la página renderizada:
Una vez terminada la configuración de los datos que vamos a presentar en nuestra página, al invocar el método "page()", necesitaremos un modo de acceso, mediante url, para que podamos acceder a esta página y ver sus datos.
En esta tarea nos ayudará el archivo listado_noticias.routing.yml , dentro de este archivo vamos a definir la url hacia nuestra página, el namespace para que drupal pueda encontrar en nuestro controlador el método que mostrará los datos y finalmente los permisos asociados a nuestro contenido, que serán los permisos por defecto, para que cualquier usuario que entre a la web, pueda verlo sin problemas.
Es muy importante respetar los espacios al escribir los datos dentro del archivo rounting, se recomienda evitar la tecla tab para hacerlo y en su lugar, es mejor la barra espaciadora del teclado, contando con dos espacios a cada nueva línea que vayamos añadiendo.
listado_noticias.listado:
path: '/listado-noticias'
defaults:
_controller: '\Drupal\listado_noticias\Controller\ListadoNoticiasController::page'
requirements:
_permission: 'access content'
Paso 5 Creación de la plantilla:
La última fase de este desarrollo, antes de activar el módulo, será la creación de nuestra plantilla, para dar formato a la presentación de los datos, una vez activado nuestro módulo.
Para los nombres de las plantilla, se debe utilizar el guión medio "-", en lugar del guión bajo "_", y el nombre que debemos utilizar será el mismo de nuestra función tema, que hemos declarado en el function hook_theme.
Por lo tanto, el nombre que tendremos que utilizar en este ejemplo será "listado-noticias.html.twig", además, colocaremos nuestras plantillas dentro de una carpeta llamada templates, siguiendo con la estructura habitual de drupal para todos sus módulos.
Ahora que ya tenemos la plantilla creada, sólo resta imprimir los valores usando las dobles llaves, ej.: {{ title }} y en el caso de las noticias, crearemos un "ciclo for", para poder recorrer el array de items y acceder a todos sus datos relacionados.
<h3>{{ title }}</h3>
<ul>
{% for noticia in items %}
<li>{{ noticia.title }}</li>
{% endfor %}
</ul>
Ya podemos activar nuestro módulo y luego al acceder a la url que hemos definido dentro del archivo listado_noticias.routing.yml, veremos nuestra página con todos los datos que habíamos configurado.
