twig

Tablas | Creación programáticamente en Drupal 9

Video de Youtube
URL de Video remoto
Texto

     A veces, cuando trabajamos en proyectos web utilizando Drupal, nos encontraremos con la necesidad de añadir en un solo módulo, todos los elementos que vamos a utilizar, ya sea porque se trate de un proyecto existente al que vamos a agregar una nueva funcionalidad, o por que este desarrollo pueda implementarse en varios proyectos a la vez, compartiéndolo con otros miembros del equipo de trabajo o de una comunidad de desarrolladores.

     Ya hemos explicado Cómo crear un módulo en Drupal 9 y además ya tienes los conocimientos necesarios para saber Cómo crear formularios programáticamente en Drupal 9, por lo tanto, el próximo paso, antes de desarrollar módulos más complejos, sería descubrir la forma de añadir tablas en tu base de datos, para que puedas controlar los elementos que instalarás relacionados con tu módulo.

     Por esta razón, hoy nos enfocaremos en la implementación de los requerimientos necesarios para crear, programáticamente, una o varias tablas, dependiendo de la necesidad que tengas para tu proyecto, utilizando el hook_schema(), dentro del archivo install en nuestro proyecto Drupal 9. 

Requisitos:

Cómo crear tablas programáticamente en Drupal 9

    Hoy aprenderemos a utilizar el archivo "MIMODULO.install" dentro de nuestro módulo personalizado. Si ponemos atención en la manera de implementarlo dentro de nuestros proyectos, tendremos el conocimiento suficiente para crear módulos más complejos, que nos permitirán la creación de contenidos directamente dentro de la base de datos de Drupal.

     Un ejemplo práctico, que explicaremos en otro artículo y su respectivo video, sería un módulo que al instalarse, además de crear una tabla, con la configuración necesaria para guardar la información sobre los participantes a un curso, nos añadiera un formulario de inscripción, conectado a esta tabla, con el cual los usuarios pudieran rellenarla directamente.

       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"

name: Mi tabla
description: 'Crea una tabla'
package: drupaladicto

type: module
core_version_requirement: ^8.8.0 || ^9.0

     Paso  2 Creación del archivo .install:

     En el archivo "MIMODULO.install", es donde tendremos que indicarle a Drupal la configuración para que pueda crear nuestra tabla, para ello utilizaremos el "hook_schema()", que se encargará de interpretar los datos y creará dicha tabla.

/**
 * Implment hook_schema()
 */
function mi_tabla_schema() {

  $schema['mitabla'] = array(
    'description' => 'Guarda los datos de los participantes',
    'fields' => array(
      'pid' => array(
        'type' => 'serial',
        'not null' => TRUE,
        'description' => 'Primary Key: Identificador único del participante.',
      ),
      'uid' => array(
        'type' => 'int',
        'not null' => TRUE,
        'default' => 0,
        'description' => "Creador de usuarios {users}.uid",
      ),
      'nombre' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Nombre del participante.',
      ),
      'apellido' => array(
        'type' => 'varchar',
        'length' => 255,
        'not null' => TRUE,
        'default' => '',
        'description' => 'Apellido del participante.',
      ),
      'edad' => array(
        'type' => 'int',
        'not null' => TRUE,
        'default' => 0,
        'size' => 'tiny',
        'description' => 'Edad del participante.',
      ),
    ),
    'primary key' => array('pid'),
    'indexes' => array(
      'nombre' => array('nombre'),
      'apellido' => array('apellido'),
      'edad' => array('edad'),
    ),
  );
  return $schema;
}

     Explicación:

          En la primera parte del hook_schema(), estamos definiendo el nombre de la tabla dentro de un array global, que es nuestro esquema $schema['mi_tabla'] = [ ], dentro de este array general, tendremos dos elementos fundamentales, que son el campo con la descripción de la tabla y a continuación otro array general, llamado "'fields' => array()", que será donde iremos añadiendo todos los campos, con sus respectivos atributos, como tipo de campo, si es nulo, si tendrá valor por defecto, etc.

$schema['mitabla'] = array(
  'description' => 'Guarda los datos de los participantes',
  'fields' => array(
    'pid' => array(
      'type' => 'serial',
      'not null' => TRUE,
      'description' => 'Primary Key: Identificadro único del participante.',
    ),
    'uid' => array(
      'type' => 'int',
      'not null' => TRUE,
      'default' => 0,
      'description' => "Creator user's {users}.uid",
    ),
    'nombre' => array(

     Luego de definir todos los campos, encontraremos en la parte inferior del "hook_schema()", el lugar donde definiremos la clave primaria de nuestra tabla, acompañada de los índices.

),
'primary key' => array('pid'),
'indexes' => array(
  'nombre' => array('nombre'),
  'apellido' => array('apellido'),
  'edad' => array('edad'),
),

     Por último, y no menos importante, está el retorno del esquema, que es quien permitirá verdaderamente que Drupal pueda ejecutar toda la información que hemos añadido en el mismo.

  );
  return $schema;
}

     Opcional Creación de datos por defecto:

          Para nuestro ejemplo, además de implementar el hook_schema() y generar nuestra tabla, hemos decidido añadir además, algunos datos por defecto, que se colocarán en sus respectivos campos, al momento de instalar nuestro módulo.

         Para realizar esta operación, hemos implementado el "hook_install()" target="_blank", que se ejecutará una vez se haya ejecutado el hook_schema() y esté generada nuestra tabla.

/**
 *  hook_install()
 */
function mi_tabla_install() {
  $values = [
    [
      'nombre' => 'Pepito',
      'apellido' => 'Pérez',
      'edad' => 30,
      'uid' => 1,
    ],
    [
      'nombre' => 'Ana',
      'apellido' => 'Medina',
      'edad' => 28,
      'uid' => 1,
    ],
  ];
  $database = \Drupal::database();
  $query = $database->insert('mitabla')->fields(['nombre', 'apellido', 'edad', 'uid']);
  foreach ($values as $participante) {
    $query->values($participante);
  }
  $query->execute();

}

     Explicación:

     En la primera parte de este "hook_install()", estamos pasándole a drupal los valores que se añadirán a los campos de nuestra tabla, dentro del array "$values = [ ] ", debes asegurarte que cada campo corresponde, con los que haz definido en dentro del $schema[ ].

$values = [
  [
    'nombre' => 'Pepito',
    'apellido' => 'Pérez',
    'edad' => 30,
    'uid' => 1,
  ],
  [
    'nombre' => 'Ana',
    'apellido' => 'Medina',
    'edad' => 28,
    'uid' => 1,
  ],
];

     En la siguiente parte, utilizando el servicio "\Drupal::database();", realizamos una consulta a la base de datos y mediante un insert, añadimos a la tabla, los campos correspondientes dentro del array fields, luego recorremos todos valores, utilizando el foreach y por último, ejecutamos la consulta.

$database = \Drupal::database();
$query = $database->insert('mitabla')->fields(['nombre', 'apellido', 'edad', 'uid']);
foreach ($values as $participante) {
  $query->values($participante);
}
$query->execute();

Módulo personalizado en Drupal 9 (Parte 3)

Video de Youtube
URL de Video remoto
Texto

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

Cómo crear un módulo en Drupal 9 (3ra Parte)

Para completar nuestro pequeño tutorial sobre Cómo crear un módulo en Drupal 9, sólo nos falta saber cómo añadir un enlace desde el menú principal para que los usuarios puedan navegar hasta el contenido de nuestro módulo e interactuar con él.

Por último veremos cómo configurar permisos para restringir el acceso y así podremos decidir, qué tipo de usuarios podrán ver, editar o administrar el contenido relacionado con nuestro módulo.

Antes de continuar, te recomiendo que leas Cómo crear un módulo en Drupal 9, para que puedas realizar el proceso paso a paso y entender en qué consiste y de esta manera, a medida que avances, acumularás la experiencia y conocimientos necesarios, que te ayudarán en el desarrollo de módulos y funcionalidades más avanzadas para tus proyectos en Drupal 9.

 

Si ya lo tienes, vamos a empezar...

En esta ocasión, vamos a añadir un enlace, en el menú principal de la web, que apuntará a la página del controlador con la cual estuvimos trabajando en el anterior artículo, si todavía no lo haz leído, aquí lo tienes Cómo crear un módulo en Drupal 9 (2da Parte), si ya lo haz hecho, recordarás que la url de la que hablamos, es la que pusimos dentro del mi_modulo.routing.yml, en el apartado de "path", en mi caso esta url de la página es "/mypage", pero tú puedes poner la que quieras.

Ahora, nos toca crear un nuevo archivo, al que llamaremos mi_modulo.links.menu.yml y dentro colocaremos el siguiente contenido, recuerda respetar los espacios y no utilices el tabulador; en su lugar, utiliza la barra espaciadora y deja dos espacios, en los casos necesarios, contando a partir del margen izquierdo.

mi_modulo.mynewpage:
  title: 'My Page'
  description: 'Page Created with MyModule'
  route_name: mymodule.mypage
  weight: 10
  menu_name: main

A continuación te explico cada parte del archivo para que puedas entenderlo y hacer los cambios necesarios y adaptarlos a tu propio módulo:

mi_modulo.mynewpage:

En esta primera línea, hemos utilizado el nombre de nuestro módulo, esto se recomienda para evitar conflictos con otros módulos existentes, y luego está el nombre con que el que idenficaremos este comportamiento .mynewpage: , presta mucha atención en los detalles, en la primera línea no hemos dejado ningún espacio a la izquierda y tenemos los dos puntos al final.

  title: 'My Page'
  description: 'Page Created with MyModule'

Las dos líneas siguientes, simplemente indican el nombre que aparecerá en el botón del menú y un texto descriptivo, que se mostrará al colocarnos encima de dicho botón. Haz visto que a partir de aquí, siempre mantenemos dos espacios con respecto al margen izquierdo de la página. Si por error, sobra o falta un espacio, el archivo no funcionará.

  route_name: mymodule.mypage

Seguro que en esta línea, hay algo que te suena haber visto anteriormente, si es así, felicidades por prestar atención a los detalles, me refiero al nombre de la ruta, el que definimos en la primera línea del archivo mi_modulo.routing.yml, con ello indicamos a Drupal, que al hacer clic en el elemento del menú correspondiente, deberá buscar esta ruta y mostrar los contenidos definidos en dicho archivo.

  weight: 10
  menu_name: main

Para finalizar, indicamos la posición del enlace con respecto a otros elementos del menú utilizando el "weight" o peso; los elementos del menú cuentan a partir de la posición Cero y tendrán valores positivos o negativos, correspondientes a si estarán debajo o encima del elemento cuyo "weight" o peso equivale a Cero.

En la última línea, indicamos el Menú Padre "main", para nuestro enlace, como dijimos al principio, en este caso, el botón para este módulo personalizado, estará dentro del menú principal.

Ahora vamos a echar un vistazo a los permisos del módulo

Una de las ventajas que ofrece el desarrollo de webs utilizando CMS o gestores como Drupal, es la capacidad para gestionar usuarios y restringir sus accesos, según creamos conveniente.

Para añadir permisos específicos en nuestro módulo personalizado, tendremos que crear un archivo, al que, en este ejemplo, llamaremos mi_modulo.permissions.yml y lo siguiente que haremos es añadir estas líneas: 

view mymodule:
  title: 'Ver contenido'
  description: 'El usuario puede ver el contenido relacionado con el módulo'
access mymodule:
  title: 'Acceder a contenido restringido'
  description: 'El usuario con este permiso podrá ver contenido restringido'
administer mymodule:
  title: 'Administrar el módulo'
  description: 'Sólo los administradores podrán modificar la configuración del módulo'
  restrict access: TRUE

Si ya conoces el apartado de Drupal, donde puedes gestionar los permisos para los usuarios, o sea la url que te lleva será algo como "http://drupal9composer.localhost/admin/people/permissions", una vez creado este nuevo archivo, al vaciar las cachés, podrás comprobar que los nuevos permisos se han añadido al listado y que estarán para activarlos según el rol que desees.

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Un último apunte, para que tus permisos tengan efecto deberás modificar la última línea del mi_modulo.rounting.yml y cambiar el "access content", por el nombre del permiso que desees aplicar, ejemplo (access mymodule), te dejo una imagen para que lo veas mejor.

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Espero haberte ayudado a comprender un poco más sobre Drupal y que puedas crear o trabajar en grandes proyectos donde poner a prueba tus conocimientos, experiencias y ganas de superación.

¡Hasta la próxima y buena suerte!

 

Módulo personalizado en Drupal 9 (Parte 2)

Video de Youtube
URL de Video remoto
Texto

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

Cómo crear un módulo en Drupal 9 (2da Parte)

Siguiendo con el desarrollo de nuestro módulo personalizado, hoy trataré de explicarte qué es el controlador o Contoller, para qué nos sirve y cómo podemos añadirlo a nuestro módulo personalizado.

Si todavía no haz creado tu módulo personalizado, antes de continuar leyendo, te recomiendo que primero leas Cómo crear un módulo en Drupal 9 (1era Parte), sigue los pasos y cuando tengas el módulo funcionando, vuelve aquí para que puedas seguir ampliándolo y entendiendo el proceso de desarrollo.

Una de las estructuras o formas de desarrollo para toda clase de aplicaciones y que además emplean los más conocidos frameworks que existen en el mercado, es el (MVC), o separación del código según sus funcionalidades en "Modelo Vista y Controlador", que esencialmente divide el total del código de la siguiente forma:

  • La parte correspondiente a la base de datos es para el (Modelo)
     
  • La parte correspondiente a mostrar los datos es para (Vista)  
     
  • La parte que sirve para conectar MODELO+ VISTA es para (Controlador o Controller)

Ahora bien, ¿Cómo aplicaremos esto dentro de nuestro módulo personalizado?, en Drupal y para nuestro ejemplo en particular, el controlador nos servirá para crear una página y posteriormente poder acceder a ella desde una url. 

Para añadir un Controlador o Controller, se debe respetar una estructura específica de archivos y del código a implementar, así que, vamos allá:

Paso 1:

Abre la carpeta de tu módulo personalizado que haz creado previamente siguiendo el anterior artículo y a continuación crearás una carpeta llamada src y dentro de ella otra carpeta a la que llamarás Controller.

Fíjate bien, en que la primera carpeta tiene el nombre en minúsculas y la segunda, que es dónde estará nuestra clase Controlador o Controller, deberá iniciar por mayúscula.

Paso 2:

Dentro de la carpeta Controller, ahora vas a añadir un archivo php, que será nuestra clase Controlador a la que llamaremos MyModuloController.php

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Paso 3:

Dentro del archivo MyModuloController.php, asegúrate de que tengas la etiqueta de apertura de <?php para que funcione, no nos hará falta cerrar la etiqueta en el caso de crear esta clase de archivos para Drupal.

Paso 4:

Añade el siguiente código a tu controlador y guarda el archivo. (Trata de escribirlo y no copiarlo para que se te grave en al memoria más fácilmente)

Ahora te explico qué es lo que tenemos aquí dentro paso a paso para que puedas aprenderlo:

En la primera parte, tenemos los comentarios, que en php se escriben entre /*** COMENTARIO AQUI ***/, y que para seguir una cierta estructura en el desarrollo, se emplea tal y como lo vez.

El @file le permite a Drupal identificar que se trata de un archivo, es recomendable añadirlo siempre en tus desarrollos para módulos personalizados.

Y a continuación, lo que estamos diciendo es que dentro de este archivo, se implementará la clase Controller de Drupal.

/**
 * @file
 * Implement MyModuleController
 */

Las versiones más recientes de php utilizan lo que se conoce como namespace con lo que se evita conflictos por el uso de clases duplicadas y la ubicación específica para la clase que deseamos utilizar en nuestros desarrollos.

namespace Drupal\mymodule\Controller;

Con esta línea en particular, estamos diciéndole a Drupal, dónde podrá encontrar nuestra clase Controller, indicándole que la busque dentro de nuestro módulo y a continuación, dentro de la carpeta llamada Controller.

La siguiente línea, es para indicar que vamos a utilizar una de las clases incluidas en la instalación de Drupal, que el algunos casos, también podría ser de Symfony, ya que Drupal 8 y 9 están basado en este Framework.

Cada vez que tengamos que utilizar una clase, primero necesitamos indicar que la utilizaremos escriendo una línea como la que hemos puesto nosotros en este caso.

use Drupal\Core\Controller\ControllerBase;

La clase ControllerBase nos servirá para emplear sus métodos y otras características definidas en ella, mediante la herencia de objetos en php para que el proceso se ejecute, añadiremos a la declaración de nuestra clase MyModuleController, la palabra  extends y así es como el código que escribamos en el Controller funcionará según lo esperado.


class MyModuleController extends ControllerBase {

 

}

Ahora que ya hemos llegado hasta aquí, sólo nos queda incluir el código restante dentro de nuestra clase, que lo único que hará es devolvernos un texto estático, al escribir en el navegador la url que le asignaremos con otro archivo, que aún no hemos creado y que se llamará mi_modulo.routing.yml

public function mypage(){
  return array(
    '#type' => 'markup',
    '#markup' => t('Este es el contenido de la página de MyModule'),
  );
}

Paso 5:

Para que podamos acceder a nuestra nueva página (mypage), tendremos que crear, al mismo nivel que el archivo "mi_modulo.info.yml", otro archivo al que llamaremos mi_modulo.routing.yml y dentro escribiermos la siguientes líneas, debes vigilar que se mantengan los espacios, no uses la teclas TAB, usa la barra espaciadora y controla siempre la estructura de dos en dos en cada zona indicada o tu código no funcionará:

mymodule.mypage:
  path: '/mypage'
  defaults:
    _title: 'Tïtulo de mi página para el módulo'
    _controller: '\Drupal\mymodule\Controller\MyModuleController::mypage'
  requirements:
    _permission: 'access content'

Vamos a explicar lo que tenemos dentro del archivo mi_modulo.routing.yml:

En la primera línea, y sin ningún espacio, hemos escrito el nombre del módulo, se recomienda para evitar conflictos con otros módulos que se llamen igual, luego hemos puesto un punto y a continuación el nombre que identifica nuestra ruta. 

mymodule.mypage:

En la segunda línea, con hemos dado dos veces a la barra espaciadora y luego hemos escrito lo que será la url para acceder a nuestra página.

  path: '/mypage'

En las siguientes líneas, primero estamos definiendo el título que aparecerá en la parte superior de la página y al que Drupal le asigna por defecto la etiqueta html <h1></h1>, y luego estamos indicando la ruta dónde Drupal deberá buscar el contenido de nuestra página, para ello, hemos definido entre comillas, la ruta completa comenzando con la barra inclinada seguida de Drupal hasta llegar al nombre de nuestra clase y finalmente, como nuestra página es un método, para que funcione hemos puesto los cuatro puntos.

defaults:
  _title: 'Tïtulo de mi página para el módulo'
  _controller: '\Drupal\mymodule\Controller\MyModuleController::mypage'

     Y ya hemos llegado al final del archivo, donde hemos definido que todo el que tenga permisos para ver el contenido publicado en nuestra web, también podrá acceder para ver esta página si pone la url en el navegador.

requirements:
  _permission: 'access content'

     ¡Ya está!, ahora que ya has realizado todos los cambios, creado los archivos y has seguido el consejo de no copiar y pegar, sino escribir todo el código, porque quieres llegar a entender y programar con responsabilidad, lo siguiente que tienes que hacer es, una vez hayas guardado los cambios, borrar las cachés y en el navegador escribir la url que hemos definido previamente, en la parte donde dice "path:",  es decir, escibe en el navegador  http://drupal9composer.localhost/mypage

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Si al Vaciar cachés y escribir la url en el navegador ves esta página, ¡Felicidades!, porque ya has aprendido a crear una página utilizando la clase Controller en un módulo personalizado.

El archivo para definir las rutas y ubicación del controlador del módulo personalizado, tendrá la extensión: .routing.yml

Módulo personalizado en Drupal 9 (Parte 1)

Video de Youtube
URL de Video remoto
Texto

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

Cómo crear un módulo en Drupal 9 (1era Parte)

Drupal es un potente CMS o gestor de contenidos, que entre otras características, nos permite escalar cualquier proyecto para llegar a cumplir con innumerables requerimientos de nuestros clientes.

Para mantener un control durante la aplicación de cualquier mejora y a su vez facilitar la implementación de nuevas funcionalidades y del mantenimiento en cualquier proyecto; es recomendable encapsular dichas funcionalidades dentro de módulos, también conocidos como plugins, cuya activación y testeo nos dará la oportunidad de identificar más fácilmente las posibles causas en caso de ocurrir algún error en nuestra web.

Por eso a continuación te voy a guiar paso a paso en la construcción de un módulo, con el cual podrás modificar el formulario de comentarios que viene por defecto en cualquier instalación de Drupal 8 o 9 para que te sirva como referencia y puedas partir de esta base en el desarrollo de todos los módulos que hagan falta en tu proyecto.

Requisitos y recomendaciones

Es recomendable usar Composer para que puedas instalar todos los módulos con sus respectivas dependencias.(Ver video)

Deberás descargar y activar el módulo Devel para que puedas imprimir variables y otras opciones muy útiles

Te recomiendo descargar activar el módulo Admin Toolbar para facilitarte la navegación en Drupal

Te recomiendo descargar drush para que puedas ejecutar comandos directamente en consola que te ayudarán a ir más rápido en muchas de las operaciones que realizarás durante tu desarrollo. Para descargar drush, colócate en la carpeta raíz de tu drupal 9 y si ya has instalado composer ejecuta el siguiente comando: "C:\xampp\htdocs\midrupal9>composer require drush/drush", una vez descargado drush sólo tendrás que ejecutar "C:\xampp\htdocs\midrupal9>vendor/bin/drush COMANDO"

Si ya tenemos todo, comencemos a crear nuestro módulo:

Paso 1:

Crea una carpeta con el nombre de tu módulo en la siguiente ruta: '/sites/modules/custom/mi_modulo".

Es recomendable que todos los módulos que desarrolles estén dentro de la carpeta CUSTOM para que tu código esté más organizado. Al utilizar composer cada vez que instales un nuevo módulo de Drupal, Composer colocará estos módulos dentro de una carpeta llamada contrib, por eso, los que desarrolles tú deberían estar dentro de la carpeta "custom"

Paso 2:

Dentro de la carpeta de tu módulo, deberán estar al menos dos archivos para que funcione correctamente "mi_modulo.info.yml" y "mi_modulo.module", así que ahora vas a crear primero el archivo "mi_modulo.info.yml" y dentro vas a colocar los siguientes datos. Es importante que respetes los espacios en cada línea o no funcionará.

name: Mi modulo
description: 'Modifica el botón en el formulario de contacto de los comentarios'
package: mismodulos

type: module
core_version_requirement: ^8 || ^9

Paso 3:

Dentro de la carpeta de tu módulo, crea el archivo "mi_modulo.info.yml" y no hace falta que pongas nada más por ahora, sólo guárdalo.

¡FELICIDADES!, ya has creado tu primer módulo, ahora sólo tienes que activarlo para comprobar que no hay ningún error antes de continuar.

Para activar tu módulo podrás hacerlo usando drush "vendor/bin/drush en mi_modulo -y" o desde la interfaz llendo a "http://drupal9composer.localhost/admin/modules"

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Paso 4:

Ahora nos toca trabajar con el archivo "mi_modulo.module", así que ábrelo y vamos a añadir la primera parte del código; antes de empezar recuerda que debes tener activado el módulo Devel para que funcione lo que estamos buscando, necesitamos imprimir el nombre del formulario que vamos a modificar, para ello, después de activar el módulo Devel, podemos escribir el siguiente código dentro del "mi_modulo.module":

<?php

/**
 * @file
 * Implement hook_form_alter().
 */

function mymodule_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id){
  ksm($form_id);

}

A continuación guarda los cambios y borra el caché de drupal. 

Para borrar el caché de Drupal tienes dos opciones:

     Opción 1:
     
Llendo a "http://drupal9composer.localhost/admin/config", luego seleccionar "Rendimiento", a continuación hacer clic en el botón "Vaciar todas las cachés"

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Opción 2:
     Si haz activado el módulo Admin Toolbar, verás el logo de Drupal en la parte superior izquierda; haciendo clic sobre el logo, verás el desplegable que te permitirá seleccionar Vaciar todas las cachés

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Paso 5:
Para comprobar el cambio que acabamos de realizar, tendrás que crear un artículo de prueba, no importa el contenido y guardarlo. Y entonces podrás ver el (ID) o idenfificador de los formularios, esto te permitirá afectar sólo al formulario que tenga el identificador que quieras modificar.

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Paso 6:

Ya que sabemos el ID o identificador del formulario, abriremos nuevamente el  "mi_modulo.module" y añadiremos el resto del código, guardamos y comprobamos el cambio en el formulario de los comentarios, Ahora el botón habrá cambiado por el texto que hemos puesto t('Comentar'), la "t" es para que sea un texto que podamos traducir (Recuerda Vaciar los cachés):
 

<?php

/**
 * @file
 * Implement hook_form_alter().
 */

function mymodule_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id){
  //ksm($form_id);
  if($form_id == 'comment_comment_form'){
    $form['actions']['submit']['#value'] = t('Comentar');
  }
}

Si vuelves a ver el artículo que habías creado, podrás comprobar que todo funciona correctamente.

Custom Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

A partir de Drupal 8, los módulos personalizados deberán colocarse en la ubicación: "/sites/modules/custom/mi_modulo"

Symfony 5 | Introducción

Symfony es uno de los Framework (Estructura) de desarrollo basado en PHP, ideal para crear todo tipo de proyectos, manteniendo una organización del código reduciendo el tiempo de todas las tareas relacionadas con la puesta en marcha o el mantenimiento de las aplicaciones.

En este curso, exploraremos cada uno de los pasos necesarios, para que puedas comenzar a utilizarlo y sacarle el máximo provecho, beneficiándote en todo momento de sus ventajas. 

Bootstrap 3, cómo crear Subtema

Video de Youtube
URL de Video remoto
Texto

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

      A pesar de que Bootstrap ha evolucionado considerablemente en los últimos años, mejorando su implementación, así como ampliando las opciones disponibles, para facilitar el diseño de páginas web que puedan adaptarse a todos los dispositivos, todavía existen en el mercado muchas webs que funcionan perfectamente con la implementación de la versión 3 de Bootstrap.

Por esta razón, en este artículo te voy a contar cómo crear un Subtema o tema personalizado, utilizando Bootstrap 3 para tu web de Drupal 9. Aunque también podrás implementarlo de la misma forma en cualquier proyecto Drupal 8.

Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/bootstrap

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Gutenberg y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en bootstrap -y

Cómo crear un subtema basado en Bootstrap 3

     Paso 1: Copiar el modelo starterkits

     Una vez descargado el Tema Bootstrap 3, tendremos que ir a la carpeta llamada starterkits y dentro encontraremos la carpeta que nos servirá como modelo para crear un subtema con todas las características heredadas, llamada "THEMENAME".

     Copiaremos esta carpeta y la colocaremos al mismo nivel del tema principal, dentro de la ubicación "themes/custom". 

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Si no tienes la carpeta custom creada, deberías crearla para facilitar la organización de tu código, separando los módulos y temas contribuidos, de los que son diseñados o modificados por ti.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 2: Sustituir la palabra THEMENAME por el nombre de tu Subtema.

     Ahora que ya tienes la carpeta modelo llamada "THEMENAME", copiada dentro de la ubicación "themes/custom", tendrás que sustituir esta palabra en todos los archivos, tanto en el nombre como en su interior, donde esté presente.

     Te recomiendo que empieces una por una, desde la parte superior, y vayas comprobando el interior de cada archivo al que le hayas cambiado el nombre, antes de continuar con los demás cambios.

     Si no sustituyes el nombre en todos los archivos necesarios o en su interior, es posible que no puedas activar el subtema o te falle una vez activado. Tómate el tiempo que necesites para renombrarlo todo, antes de activar el tema.

     IMPORTANTE!!!

     Cuando estés renombrando todos los archivos dentro de la carpeta "THENENAME", presta especial atención en el llamado: "THEMENAME.starterkit.yml", ya que en este, además de sustituir la palabra "THENENAME", deberás sustituir "starterkit" por info, quedando el nombre completo del archivo, por ejemplo "drupadicto.info.yml", y luego asegúrate, como en el resto de archivos, de renombrar en su interior.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 3: Activación y configuración del tema

      En el momento en que ya tengas sustituido el nombre en todos los archivos correspondientes, podrás activar el tema para que sea el predeterminado en tu proyecto Drupal 9. 

     Para ello, tendrás que dirigirte a la url "/admin/appearance", donde encontrarás el listados de todos los temas disponibles, activados o no.

     Si te vas a la parte inferior, encontrarás los temas desinstalados, donde uno de ellos debería ser el tuyo. De lo contrario, vuelve a revisar tus archivos, porque te habrá faltado algún lugar dónde sustituir el nombre adecuadamente y por eso no te lo reconoce Drupal.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Finalmente, cuando hayas activado tu Subtema, podrás realizar varias configuraciones, específicas según tus necesidades, desde las pestañas de la parte superior izquierda, que aparecerán al hacer clic en configuración, justo al lado de la imagen de tu tema.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

    Entre estas configuraciones, cabe destacar la posibilidad de seleccionar del listado de "Diseños predefinidos", para facilitar un cambio de aspecto rápido, vistoso y además responsive para tu web.

Bootstrap 3 Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Hover Effects | Módulo Drupal

Video de Youtube
URL de Video remoto
Texto

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

    Si te apasionan las animaciones y los efectos, pero no tienes demasiada experiencia en el diseño frontend para tus web con Drupal, aquí tienes un módulo que te facilitará este proceso. Se trata del módulo contribuido Hover Effects, que una vez instalado, te permitirá aplicar una gran cantidad de efectos en tus contenidos, modificando ligeramente tus plantillas twig, obteniendo un aspecto más atractivo en tus diseños.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     El módulo no tiene página de configuración, así que lo único que necesitarás, una vez lo hayas instalado y activado, es visitar la página de muestra, que está en su página oficial, para que puedas ver y compiar en tus plantillas y elegir la combinación de efectos que más te convenga.

CÓMO INSTALAR Y CONFIGURAR EL MÓDULO:

Paso 1 Descargar el módulo:

     Lo primero que tendrás que hacer es descargarlo, para ello, a partir de Drupal 8 se recomienda que utilices el gestor de paquetes Composer, ya que te facilitará tanto la instalación como futuras actualizaciones del tus proyectos. No obstante también podrías descargarlo desde la Página oficial del módulo y una vez descargado, tendrás que colocarlo en la carpeta "modules" o "modules/contrib", dependiendo de tu instalación y asegurarte de descargar todas sus dependencias o el módulo no funcionará, esta es una de las ventajas con las que cuentas al hacer la instalación usando Composer.

Paso 2 Activación del módulo :

     Para activar el módulo Hover Effects, al igual que todos los demás módulos contribuidos de Drupal, tendrás la posibilidad de hacerlo, mediante el uso de la herramienta Drush, con el comando "drush en hover_effects -y", que sirve para activar cualquier módulos y todas sus dependencias, o desde la interfaz de Drupal.    

Paso 3 - Visitar y elegir el efecto y estructura que quieres:

     Tan pronto como tengas activado el módulo hover effects, sólo tendrás que visitar la página de demostración, el enlace lo tienes en su página oficial: http://gudh.github.io/ihover/dist/index.html

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Una vez sepas cuál es el efecto que deseas añadir a tus contenidos, tendrás que activar el modo debug, para conocer los nombres de las plantillas sugeridas por drupal, y de esta forma modificar sólamente el o los contenidos que te interesen. 

     Hay varias formas de activar el modo debug, puedes hacerlo según la Página oficial de Drupal, pero yo suelo recomendar esta manera: HAZ CLIC AQUI .

   CÓMO APLICAR LOS EFECTOS DEL MÓDULO HOVER EFFECTS

        En este caso, ya hemos activado el modo debug, para conocer los nombres sugeridos por drupal, y así afectar al contenido que nos interesa, en este ejemplo, serán los artículos, así que he creado dos artículos, que es uno de los tipos de contenido que nos viene con Drupal por defecto, y lo único que he añadido es una imagen a cada uno y un poco de texto.

        No he modificado nada más de los artículos, ni del drupal, así que si hacemos clic en el logo o vamos a nuestra página principal de Drupal, deberíamos ver los dos artículos en modo de vista resumido o teaser, con un aspecto parecido a la siguiente imagen.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

Ahora, para hacerlo más interesante, crearemos una vista en formato bloque, donde mostraremos la imagen y el título de cada artículo. De esta manera, podremos apreciar mejor, la potencia de este módulo.

     Paso 1 - Creación de la vista tipo bloque: Lo primero que tendremos que hacer, será crear una vista, tipo bloque, en la que mostraremos la imagen y el título para los artículos, así que nos iremos a la url "/admin/structure/views/add", o navegaremos por el menú superior, en caso de tener el módulo Admin_toolbar instalado.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 2 - Configuración de la vista: Una vez creada nuestra vista, nos aseguraremos de haber seleccionado Campos, y añadiremos, para este ejemplo, el campo imagen, ya que, por defecto, se ha añadido ya el campo título.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 3 - Ajustes en el campo imagen: Si volvemos a la página de muestas para los efectos, notaremos que utilizan la url de las imágenes, en lugar de la imagen propiamente dicha, por esta razón, modificaremos el campo imagen, para que muestre la url con su ubicación. Para ello, haremos clic en el botón editar a la dercha del campo y a continuación, cambiaremos en el selector, por el valor url.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 4 - Activación de la vista Bloque: Ahora que tenemos los cambios necesarios, nos dirigiremos a la página de configuración para los bloques, ubicada en "/admin/structure/block", y activaremos nuestro bloque, para que se muestre en la página principal.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 6 - Primera comprobación de resultados: Lo próximo que tendremos que hacer, será dirigirnos a nuestra página principal, para ver el resultado que hemos obtenido. Por ahora, deberíamos ver, los títulos de los artículos, acompañados por las urls de cada imagen principal.

Hover Effects Module Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Paso 7 -  Reescribir la vista: Si todo lo anterior ha funcionado según lo que esperábamos, entonces es el momento de aplicar el código que asociado al efecto que más nos guste y a continuación, pegarlo en la plantilla sugerida por Drupal, sustituyendo los valores que hagan falta.

     Si no sabes cómo se reescribe una vista, Te lo explico en estos dos artículos:

     Personzalizando Vistas Parte 1: HAZ CLIC AQUÍ

     Personalinzando Vistas Parte 2: HAZ CLIC AQUI

Drupal 8 | Themes y subthemes

Video de Youtube
URL de Video remoto

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

      Llegados a este punto, nos toca ocuparnos del aspecto de nuestro proyecto, para ofrecer una presentación de acuerdo a nuestras expectativas, debemos tomar en cuenta que esta web deberá verse en diferentes dispositivos y que es muy importante prestar atención en todos los detalles para que nada "se rompa" a nivel gráfico cuando el usuario la visite, por ejemplo desde un Ipod. 

     En Drupal, la parte que controla es aspecto de nuestra web está a cargo de los "Temas" o "Themes", que son el conjunto de archivos necesarios para realizar este tipo de configuración.

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Drupal ofrece desde su Página Oficial, la posibilidad de descargar toda clase de Temas, para que podamos utilizarlos y modificarlos, según las necesidades del proyecto. Hoy en día, debido al aumento del uso de dispositivos móviles, es prácticamente obligatorio, diseñar webs que sean adaptables a cualquiera de estos dispositivos, esto es conocido como diseño "Responsivo" o "Responsive".

     Dentro de las alternativas gratuitas, disponibles para Drupal, está el Theme Mayo, que ofrece una alternativa relativamente muy sencilla, de implementar una web con diseño responsivo, sin la necesidad de manipular nada de código.

     Su configuración al completo se hace a través de la interfaz de Drupal, donde una vez descargado e instalado, sólo nos faltará personalizarlo mediante unos cuantos clics, hasta obtener el resultado que andamos buscando o al menos el más aproximado a éste.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Para trabajar con módulos o temas en Drupal, pueden emplearse varios métodos, aunque a partir de la versión 8, se recomienda el uso del gestor de paquetes Composer, porque nos facilitará todos los procesos de instalación, descarga y dependencias; en este caso, voy a enseñarte la forma tradicional, hacemos clic derecho sobre el en enlace comprimido del archivo y seleccionaremos copiar enlace.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     Luego nos iremos a Drupal, en la url "/admin/appearance", donde seleccionaremos la opción Instalar nuevo tema. Si ya tienes instalado el módulo Admin Toolbar, podrás hacerlo tal y como se muestra en la imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en drupal y symfony

     A continuación, pegaremos en la siguiente pantalla, la url que hemos copiado y haremos clic en el botón Instalar.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Una vez terminado el proceso de instalación del Theme, podremos activarlo llendo a la url "/admin/appearance", donde se muestran todos los Themes disponibles para su activación, además de los que están activados actualmente y el Theme que utiliza drupal para su interfaz de administración.

     Si nos desplazamos a la parte inferior de esta pantalla, encontraremos el Theme Mayo, dentro del listado de Themes Desinstalados, y podremos Instalarlo como Theme principal haciendo clic en el enlace debajo de su imagen.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de activar el Theme, es recomendable que Vaciemos la Cache de Drupal para que podamos ver todos los cambios ejecutados en nuestro proyecto.

     Si nos vamos a la página principal de nuestro proyecto, podremos comprobar el cambio inmediatamente, además de validar el aspecto que se mostrará en dispositivos de varios tamaños.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Otra opción con la que contamos para personalizar el aspecto de nuestras webs de Drupal, es el Theme Bootstrap, en este caso, específicamente hemos optado por, crear nuestro propio tema personalizado o Subtheme, tomando como base, el Theme Bootstrap Barrio, ya que además de heredar las características del Bootstrap 4 original, permite la aplicación de varias configuraciones mediante la interfaz, como hicimos con el Theme Barrio.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Esta vez, para trabajar con la creación y configuración de nuestro Subtheme, utilizaremos el gestor de paquetes Composer, que comentábamos al principio de este artículo.

     Para realizar esta clase de operaciones, abriremos la consola y, una vez colocados dentro de la carpeta de nuestro proyecto, podremos ejecutar el siguiente comando para que comience la descarga de los archivos que vamos a utilizar:

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Siempre que utilicemos el gestor de paquetes Composer para descargar nuestros Themes o Módulos, creará automáticamente, si no existe, una carpeta llamada Contrib, referente a módulos o Themes contribuidos de Drupal. De esta forma mantiene separados los módulos y Themes, cuyo contenido no deberíamos modificar nunca directamente, del resto de módulos y Themes creados a partir de ellos y modificados por nosotros.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     A continuación, nos dirigiremos a la Página Oficial de Bootstrap Barrio, para leer y seguir los pasos necesarios en la creación del Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Después de copiar los datos en el archivo create_subtheme.sh y seguir el resto de los pasos descritos en su página oficial, tendremos que llamar al archivo desde nuestra consola para que genere todos los demás componentes necesarios en nuestro nuevo Subtheme.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     En el momento en que termina la ejecución del archivo llamado desde nuestra consola, si volvemos a las carpetas de Drupal, dentro de la Carpeta "themes/contrib", podremos ver nuestro Subtheme listo para ser activado, desde url "/admin/appearance", tal y como hicimos anteriormente con el Theme Mayo.

     Encontraremos en la parte inferior de la pantalla, todos los themes disponibles para ser utilizados en nuestro proyecto y, dentro del listado de Themes desinstalados, estará, si todo ha ido bien, nuestro Theme personalizado.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     Ahora podrás comprobar que tu nuevo Subtheme, además de tener diseño Responsivo, te brinda la posibilidad de personalizarlo al completo, para darle un aspecto funcional, práctico y novedoso a tus proyectos en Drupal.

 

Curso Drupal 8 | www.drupaladicto.com - Consultor especializado en Drupal y Symfony