Image
Instalación de módulo Admin Toolbar en Drupal
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Hoy vamos a ver este Tutorial de instalacion del modulo Admin Toolbar en Drupal

Drupal nos proporciona una barra de administración  predeterminada para acceder a sus funcionalidades desde el panel de administración:

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Sin embargo, existe la posibilidad de mejorar esta barra de administración por defecto mediante la instalación del módulo llamado “Admin Toolbar”, que dará la opción de trasformar esta barra administrativa en un tipo de menú desplegable. De manera que se ofrece así un acceso más rápido y sencillo a las zonas de administración del sitio web en Drupal.
Para la instalación del módulo “Admin Toolbar”, o de módulos en general, se podría realizar o bien desde la interfaz en la opción de “Ampliar” de la barra de administración, o mediante drush descargando el proyecto admin_toolbar vía composer.

 

Para su instalación vía composer y drush, iremos al repositorio de Drupal donde se encuentre alojado el proyecto admin_toolbar: https://www.drupal.org/project/admin_toolbar
Una vez localizado, se lanzará el comando, el cual añadirá el módulo al sitio web:

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Después, instalaremos el módulo con el siguiente comando:

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Finalmente se vacía caché, quedando así el módulo instalado en el sitio web:

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Otra opción para la instalación de módulos, en esta ocasión “Admin Toolbar”, podría ser desde la interfaz del panel de administración de nuestro proyecto. Para ello, desde el repositorio de Drupal se descarga el fichero del módulo.

Posteriormente, elegiremos la opción “Ampliar” en /admin/modules y seleccionaremos “Add new module”:

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Se observa que se puede añadir el fichero admin_toolbar-3.0.3.tar.gz  / admin_toolbar-3.0.3.zip  o indicar la url del proyecto en Drupal.

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

En esta ocasión se elegirá la descarga del fichero admin_toolbar-3.0.3.tar.gz

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal
Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Después, lo añadimos para su instalación desde el panel de administración en /admin/modules

Se seleccionará “Admin Toolbar” y “Admin Toolbar Extra Tools” e instalar.

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

 

Cuando finaliza la instalación, si se utiliza la barra de tareas del panel de administración, observamos que ahora aparecen los menú de forma desplegable para una acceso más sencillo y rápido a cada zona de la administración en Drupal.

Image
Tutorial de instalacion del modulo Admin Toolbar en Drupal

Y esto ha sido el tutorial de instalacion del modulo Admin Toolbar en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Como ajustar y centrar una imagen en un videoframe
Como ajustar y centrar una imagen en un videoframe

Como ajustar y centrar una imagen en un videoframe. En este tutorial vamos a ver como ajustar y centrar una imagen subida por nosotros como poster al frame de un video.

Soluciones hay diversas, y cada maestrillo tiene su librillo, pero aquí voy a explicar la que me ha servido para hacer el ajuste.

Nos encontramos con la situación de que si el video es un video subido por nosotros, por defecto lo encontraremos como “display: none” hasta que se ejecute el play, y de ser un video de Youtube o Vimeo embebido en un iframe encontraremos que el iframe también está en “display: none” y además posicionado en absoluto. En ambos casos, si nos basamos en estos dos elementos como base, veremos que el contendor no tiene ni altura ni anchura, ya que ningún hijo se la está dando.

Image
Como ajustar y centrar una imagen en un videoframe

Para empezar con la solución lo primero es ir a modules/contrib/layoutcomponent/modules/lc_simple_video/templates donde encontraremos un twig con el siguiente código:

<div class="videoimage">
    {{ content.field_sv_image }}
    {#      {{ content|without('field_sv_video_type', 'field_sv_upload_video', 'field_sv_video') }}#}
    {% if content.field_sv_video_type['#items'][0].value == 'video_url' %}
        {{ content.field_sv_video }}
    {% else %}
        {{ content.field_sv_upload_video }}
    {% endif %}
</div>
Image
Como ajustar y centrar una imagen en un videoframe

 

Copiamos el archivo del twig y lo ponemos en la parte custom de nuestro tema. Así que iremos a themes/custom/nombre_del_proyecto/templates y lo pegamos ahí.

Como se dan dos situaciones de video, un video embebido de una url y un video subido por nosotros, lo vamos a separar en dos bloques diferentes ayudándonos de la variable que nos proporciona el twig, dejando un código de la siguiente manera:

<div class="videoimage">
    {#      {{ content|without('field_sv_video_type', 'field_sv_upload_video', 'field_sv_video') }}#}
    {% if content.field_sv_video_type['#items'][0].value == 'video_url' %}
    <div class="videoimage-url">
        {{ content.field_sv_image }}
      <div class="videoimage__video">
        {{ content.field_sv_video }}
      </div>
    </div>
    {% else %}
      <div class="videoimage-upload">
          {{ content.field_sv_image }}
          <div class="videoimage__video">
            {{ content.field_sv_upload_video }}
          </div>
      </div>
    {% endif %}
</div>
Image
Como ajustar y centrar una imagen en un videoframe

 

Con esto tenemos listo el twig, ahora vamos a hacer la magia en el CSS, bueno, en nuestro caso SCSS.

Para ello hay que tener clara una cosa, ya que la imagen va a ser posicionada y como  tanto el video como el iframe en ambos casos están a “display: none” o posicionados, ninguno de ellos genera altura en el contendor, por lo que la imagen no se verá.

En el caso de un video subido por nosotros, pondremos el video a “display: block”, esto generará la altura y anchura que debe de tener la caja. Ahora basta con posicionar la imagen y por encima, para ello nos aseguramos que todos los padres de la imagen tengan la altura y la anchura del contendor, que todo lo que sobresalga de ellos no se visualice y que cuando tengan la clase “hidden” desaparezcan.

Ahora, con la imagen subida, hacemos que la imagen tenga una anchura y altura adaptable pero que como mínimo siempre sea la del contendor y su máximo sea la que deba por defecto, con esto hecho la posicionamos en el medio.

En el caso de un video embebido de Youtube o Vimeo, como necesitamos que el contendor tenga una altura y que esta altura sea variable para que la maquetación sea líquida y que el responsive nos venga ya dado, no declararemos un height en el contendor, si no que usaremos un paddíng en porcentaje sabiendo el ratio entre el alto y el ancho de nuestro video. En nuestro caso el ratio en porcentaje de nuestro video es de 56.25%.

Una vez añadido este padding, nuestra caja ya tiene una altura, por lo que posicionar la imagen será igual que como con el vídeo subido, hacemos que los padres tengan un tamaño igual al contenedor, que se oculten si tienen la clase “hidden” y posicionamos la imagen de la misma manera.

El código SCSS resultante de todo esto quedaría así:

.videoimage{
  position: relative;
  &-upload{
    .field--name-field-sv-image{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      overflow: hidden;
      margin:0;
      .contextual-region,
      .field--name-field-media-image,
      .field__item{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        &.hidden{
          display: none;
        }
      }
      img{
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: initial!important;
      }
    }
    .videoimage__video{
      video{
        display: block!important;
      }
    }
  }
  &-url{
    .field--name-field-sv-image {
      margin: 0;
      padding-top: 56.25%;
      overflow: hidden;
      .contextual-region,
      .field--name-field-media-image,
      .field__item{
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        &.hidden{
          display: none;
        }
      }
      .contextual-region{
        position: absolute;
        top: 0;
        left: 0;
      }
      img{
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: initial!important;
      }
    }
  }
}
Image
Como ajustar y centrar una imagen en un videoframe
Image
Como ajustar y centrar una imagen en un videoframe

 En caso de trabajar directamente en CSS el código sería:

.videoimage {
  position: relative;
}
.videoimage-upload .field--name-field-sv-image {
  position: absolute;
top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  margin: 0;
}
.videoimage-upload .field--name-field-sv-image .contextual-region,
.videoimage-upload .field--name-field-sv-image .field--name-field-media-image,
.videoimage-upload .field--name-field-sv-image .field__item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.videoimage-upload .field--name-field-sv-image .contextual-region.hidden,
.videoimage-upload .field--name-field-sv-image .field--name-field-media-image.hidden,
.videoimage-upload .field--name-field-sv-image .field__item.hidden {
  display: none;
}
.videoimage-upload .field--name-field-sv-image img {
  position: absolute;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: initial !important;
}
.videoimage-upload .videoimage__video video {
  display: block !important;
}
.videoimage-url .field--name-field-sv-image {
  margin: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.videoimage-url .field--name-field-sv-image .contextual-region,
.videoimage-url .field--name-field-sv-image .field--name-field-media-image,
.videoimage-url .field--name-field-sv-image .field__item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.videoimage-url .field--name-field-sv-image .contextual-region.hidden,
.videoimage-url .field--name-field-sv-image .field--name-field-media-image.hidden,
.videoimage-url .field--name-field-sv-image .field__item.hidden {
  display: none;
}
.videoimage-url .field--name-field-sv-image .contextual-region {
  position: absolute;
  top: 0;
  left: 0;
}
.videoimage-url .field--name-field-sv-image img {
  position: absolute;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: initial !important;
}

Y esto ha sido como ajustar y centrar una imagen a un frame de video, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

 

Esto ha sido:  Como ajustar y centrar una imagen en un videoframe.

Image
Mostrar datos externos (API) mediante vistas de Drupal
Mostrar datos externos (API) mediante vistas de Drupal

Mostrar datos externos (API) mediante vistas de Drupal, tenemos la necesidad de mostrar datos procedentes de la respuesta de una API en nuestro Drupal. Para ello utilizaremos las vistas de Drupal mostrando estos datos como si pertenecieran al propio Drupal con las ventajas de utilizar vistas. Para ello crearemos una “tabla” ficticia con sus respectivos campos dónde pasaremos los datos procedentes de la respuesta de la API.

El primer paso es crear esta “tabla” ficticia con los campos dónde mostraremos los datos. Mediante el hook views data defininos lo que sería nuestra tabla y posteriormente los campos.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez definidos estos datos tenemos que crearnos nuestro plugin para mostrar estos datos en la vista. Para ello nos crearemos nuestro query plugin inyectando el contenedor de nuestra clase para consumir los datos de la API.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez que tengamos definido el Query plugin, podemos pasarle nuestros datos a los campos a través de la función execute. Realizamos la llamada a la API y almacenamos la respuesta. Ahora vamos añadiendo cada fila de datos devuelta por la API a la vista.

 

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez hecho todo esto proceso, cuando vamos a crear una vista mediante la administración. En el selector para seleccionar que queremos mostrar, vemos nuestra “tabla”.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez en la vista, podemos seleccionar el tipo tabla para visualizar los datos mostrando campos. Al añadir campos, veremos todos los campos definidos previamente.

Image
Mostrar datos externos (API) mediante vistas de Drupal

Y esto ha sido Mostrar datos externos (API) mediante vistas de Drupal, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

 

Image
Commerce pasarela de pago con Drupal
Commerce pasarela de pago con Drupal

Commerce pasarela de pago en Drupal. Si queremos vender en nuestra tienda online, debemos proporcionar a nuestros clientes una forma de pago que les genere confianza por un lado, y que nos de seguridad a nosotros por el otro, para ello, una de las pasarelas más utilzadas (en Europa) es PayPal, con la particularidad que nos permite, aceptar tanto los pagos mediante cuentas de la plataforma, como pagos con tarjeta de crédito/débito, lo cual es muy cómodo porque con una única plataforma aceptamos varias formas de pago.

Vamos a ver como añadirla a nuestra página. Lo primero será, como siempre, ir a la página del proyecto y usar composer para instalar la extensión mediante el comando $ composer require 'drupal/commerce_paypal:^1.0@RC'

Image
Commerce pasarela de pago 1

Esto descargará el módulo y sus dependencias. Ahora debemos activarlo en el sitio, vamos a Ampliar y en la búsqueda escribimos "payp", cuando nuestre el módulo, lo activamos

Image
Commerce pasarela de pago 2

 

Una vez activado, vamos a Comercio -- Configuración -- Pago -- Pasarelas de pago

Image
Commerce pasarela de pago 3

Pulsamos sobre "+Añadir pasarela de pago"

Image
Commerce pasarela de pago 4

Cubrimos los campos con las opciones mostradas, marcando el "Modo: prueba" para tener un entorno de pruebas con pagos simulados, cuando hayamos finalizado la fase de desarrollo, volveremos aquí y marcaremos "producción". Las claves de la API las obtendremos desde el sitio de PayPal Develop creandonos una cuenta ( no es necesario tener cuenta live ).

Image
Commerce pasarela de pago 5

Dejando estas opciones marcadas, aceptaremos pagos tanto con cuenta PayPal por defecto como con tarjeta de crédito o débito, guardamos las opciones.

Image
Commerce pasarela de pago 6

Y esto ha sido commerce pasarela de pago, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

Image
Instalar módulo webform
Instalar módulo webform

Vamos a instalar el módulo webform, que te permite crear cualquier formulario para recopilar cualquier dato, y se puede enviar a cualquier aplicación o sistema. Cada comportamiento y aspecto de los formularios y sus entradas son personalizables. Ya sea que necesitemos un formulario de varias páginas que contenga un diseño de entrada de varias columnas con lógica condicional o un formulario de contacto simple que envíe datos a un CRM, todo es posible utilizando este módulo.

Vamos a empezar con lo básico, que es instalarlo, para ello, como es habitual, iremos a la pagina del módulo en Drupal, os dejo aquí el enlace de descarga.

Image
instalar módulo webform 1

Evidentemente, nosotros usaremos composer para instalarlo, así que desde nuestra consola ejecutamos el comando

Image
instalar módulo webform 2

Tras instalarlo, procedemos a activarlo en nuestro sitio como siempre, iremos a ampliar, lo localizaremos y activaremos. En este caso solo necesitamos activar "webform" y webform UI" (la primera y la ultima opción), el módulo webform nos permite hacer muchas cosas, pero para este ejemplo, con activar estos dos componentes será suficiente.

Image
instalar módulo webform 3

Una vez tengamos hecho esto, nos vamos a Estructura -- Webform -- Formularios

Image
instalar módulo webform 4

El módulo webform nos instala por defecto un formulario de contacto, si clicamos sobre "Build" podremos ver y editar los campos existentes, asi como añadir nuevos campos para nuestro formulario, haciendo clic sobre "+Add element" veremos un pop-up en el que se nos muestran los distintos tipos de elementos que podemos agregar

Image
instalar módulo webform 5

Por defecto, el propio módulo tiene muchas opciones de agregacion de elementos, en otro tutorial veremos como añadirle más, continuando con nuestra tarea, ahora podemos buscar y añadir el elemento que nos interese al formulario, fijate que cada elemento tiene un "?" a su izquierda, si pasas por encima te muestra una breve explicación sobre el mismo. Cuando sepamos el elemento que queremos añadir, lo haremos mediante su correspondiente botón.

Nosotros vamos a modificar uno de los elementos existentes por defecto en el formulario, veremos que el elemento "nombre" está en inglés y que es obligatorio (cuando se rellene el formulario deberá estar cubierto o no permitirá su envío) así que pulsamos "editar"

Image
instalar módulo webform 6

Modificaremos el "title" y desmarcaremos la obligatoriedad de la validación, guardamos los cambios.

Image
instalar módulo webform 7

 

Ya está cambiado el title y ya no es obligatorio. Ahora vamos a usar el formulario, pero antes le daremos una ruta url dedicada, vamos a la pestaña de configuración dentro del webform, en "opciones de rura url" ponemos /contacto, así

Image
instalar módulo webform 9

 

Guardamos los cambios, ahora el formulario es accesible desde http://misitio.com/contacto

Image
instalar módulo webform 8

Y esto ha sido instalar módulo webform en Drupal, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

 

 

 

 

 

 

Image
Composer, uso y aplicación de este proceso en Drupal
Composer, uso y aplicación de este proceso en Drupal

Este proceso ha sido y es muy habitual en muchos casos pero un gestor de dependencias nos facilita mucho esta tarea y además soluciona un problema muy común y es el de la gestión de versiones, ya que si lo hacemos manualmente, tenemos que periódicamente revisar que ese software o librerías que nos descargamos, no haya tenido una actualización, porque en tal caso, tendríamos que realizar el proceso manualmente. Composer nos facilita la vida mediante un proceso que simplifica estas tareas.

Lo primero que debemos tener es instalado el Composer en nuestro sistema, y eso requiere un proceso que depende del sistema sobre el que deseemos instalarlo, si es en Windows, en Linux, Mac, etc. Dejo la url desde donde podrás seguir los pasos fácilmente. https://getcomposer.org/doc/00-intro.md

Una vez instalado el programa, abre un terminal y ejecuta composer --version o simplemente composer para verificar que te responde. Si lo has instalado de modo global, puedes probarlo desde cualquier parte del sistema.

Para poder trabajar con composer en nuestro proyecto, nos dirigimos a la carpeta en que lo tenemos, y podemos crear nuestro entorno Composer automáticamente o manualmente.

De modo automático, ejecutamos el comando composer init. Lo primero que nos pedirá es que introduzcamos el nombre del proyecto, el cual se compone de vendor u organización, seguido una barra, y a continuación el nombre del proyecto. Por ejemplo micomposer/nuevaprueba.

Nos pedirá una descripción.

Image
Welcome to the composer config generator

A continuación nos pedirá que introduzcamos una descripción.

Image
Description

Nos pedirá el autor.

Image
Author

Nos pedirá algo un poco extraño, que es la estabilidad mínima, en este caso si estamos trabajando en modo desarrollo introducimos dev para que nos descargue versiones de desarrollo en las dependencias. Si pulsamos enter directamente nos bajará sólo las versiones estables.

Image
Minimum Stability

A continuación el tipo, en nuestro caso va a ser un proyecto.

Image
Package Type

En el tipo de licencia podemos poner MIT que es la licencia más usada en open source. Si no fuera open source pondríamos propietary.

Image
License

En este punto podemos ya empezar a incluir dependencies de manera interactiva. Nos pregunta si vamos a necesitar alguna y para ello enter en yes.

Image
Dependencies

Nos pedirá que introduzcamos un paquete y como ejemplo introducimos ckeditor. Puede salirnos un conjunto de opciones. Pulsamos el número correspondiente a la opción de paquete ckeditor que queramos instalar como dependencia.

Image
Search package

Nos permitirá indicar una versión específica pero si no queremos indicar una y que se instale la última pulsamos enter.

Image
Version

Nos indicará la versión que se va a instalar, en este caso la dev-master y nos pedirá si queremos añadir otra dependencia.

Image
Dev-master version

Como no voy a instalar más dependencias, pulso enter, y nos preguntará que vamos a necesitar alguna dependencia específica para el desarrollo. Como no la vamos a necesitar escribo no y pulsamos enter.

Image
require-dev

Nos preguntará si queremos aplicar la estandarización PSR-4 de clases, en nuestro caso le vamos a decir que no.

Image
PSR-4

Me sale el resumen para confirmar del proyecto Composer pulsamos directamente enter para confirmar.

Image
Resumen

Nos pedirá si queremos intalar las dependencias indicadas en ese momento y le decimos que sí.

Image
Instalación de dependencias

De este modo ya tendríamos configurado Composer para gestionar nuestras dependencias.

Los componentes que Composer nos puede gestionar se encuentran en la página https://packagist.org/, en ella podemos realizar una búsqueda y encontrar una enorme cantidad de librerías y dependencias.

Podemos crear la configuración de nuestro proyecto Composer manualmente del siguiente modo.

Para poder gestionar composer necesita un fichero llamado composer.json, en cual introducimos los paquetes que deseamos que Composer nos gestione. El fichero tiene que estar escrito en json por lo que al editarlo, lo primero que tenemos que hacer es abrir y cerrar llaves.

En la primera parte introducimos un conjunto de valores que son opcionales y que se introducen en estructura campo-valor, de la siguiente manera.

{

  “name”: “micomposer/prueba-composer”

}

La primera parte del nombre, antes de la barra es el vendor y a continuación el nombre del proyecto.

El resto de datos opcionales es muy amplio y puede comprender, no solo el nombre, sino la versión, el tipo , la licencia, la descripción, etc. No obstante, el Composer necesita el campo require, que es el que guarda las dependencias que nosotros le digamos. Es un objeto que guarda todas las dependencias en modo clave valor.

{

  “name”: “micomposer/prueba-composer”,

  “require”: {

   

  }

}

Cuando entramos en alguno de los proyectos en la web packagist, nos indicará como tenemos que ponerlos. Por ejemplo:

Image
Packagist

Kint es una librería que nos permite debuguear o mostrar las variables que tengamos en nuestro programa de manera más amigable. Drupal lo suele utilizar con el módulo Devel, pero ese es otro tema. Si pulsamos la primera opción “kint-php/kint”, veremos la siguiente pantalla https://packagist.org/packages/kint-php/kint

Veremos las distintas versiones y observaremos que lo que tenemos que poner es la clave valor, la primera el nombre kint-php/kint, y a continuación la versión, separado por dos puntos y entre comillas como vemos a continuación.

{

  “name”: “micomposer/prueba-composer”,

  “require”: {

    “kint-php/kint”: “dev-master”,

  }

}

La versión requiere conocer las opciones ya que podemos controlar qué versiones queremos instalar como comodines y signos.

Si ponemos, por ejemplo la versión “5.2.*”, estaremos indicando a Composer que nos instale cualquier versión superior a 5.2 e inferior a 5.3. si ponemos una versión sin comodines le estaremos indicando que nos instale esa versión en particular y ninguna otra.

Si queremos que se instale una versión igual o superior utilizaremos el sistema >=5.2.

Podemos introducir un intervalo de versiones como 5.2 - 6.8, que es equivalente a >=5.2 <6.8.

Puedes encontrar todas las opciones en la página https://getcomposer.org/doc/articles/versions.md

En nuestro caso vamos a utilizar la versión última indicada en la página que es la dev-master que corresponde a la última rama de desarrollo.

Algo importante a tener en cuenta a la hora de generar el fichero es que tiene que estar codificado en UT8 a secas.

Guardamos el fichero y abrimos un terminal. Nos dirigimos a la carpeta donde hemos creado el composer.json y ejecutamos el comando composer install.

Image
Composer install

Observaremos que nos ha creado una carpeta vendor en la que introduce las dependencias.

Image
Dependencias

Vemos que ha instalado la carpeta kint-php con la versión que le hemos indicado, y una carpeta composer con las librerías que necesita el programa.

También podemos ver el fichero autoload.php que contiene código para la carga automática de todas las librerías que gestionemos con composer.

En nuestro index.php cargamos el autoload con require y metemos un array o variable en la función d().

<html>

<head></head>

<body>

<?php

. require “vendor/autoload.php”;

$miarray = [‘María’, ‘Pedro’, 43, TRUE, 786,6];

d($miarray);

?>

</body>

</html>

El resultado es el que sigue:

Image
Array

La librería nos facilita el trabajo de visualizar las variables.

Si nosotros queremos añadir nuevas librerías ya no podemos hacer un install porque ya está instalado, tendríamos que modificar el composer.json y añadir la nueva librería, y ejecutar composer update.

Una librería muy utilizada en drupal es ckeditor, para editar texto. Buscamos en la web packgist.org, y cambiamos el fichero composer.json introduciendo la siguiente línea al apartado require.

“ckeditor/ckeditor”: “4.16.1”

Recordemos que la última linea del array no tiene coma pero la anterior si.

Guardamos e introducimos en el terminal el comando composer update y tendremos el siguiente resultado.

Image
Composer update

Además de instalarnos la nueva librería, Composer comprobará si alguna de las existentes tiene alguna actualización pendiente, y la instalará siempre y cuando lo tengamos así estipulado en los requisitos de las versiones que hablamos antes.

Observamos la carpeta vendor y tenemos la nueva carpeta ckeditor.

Image
Nueva carpeta ckeditor

Una característica importante a tener en cuenta es que la librería que nos vamos a descargar requiere otras librerías como dependencias, Composer instalará aquellas, sin que nosotros tengamos que especificarlo.

Es posible que deseemos eliminar una librería, en ese caso tenemos que borrar la librería del fichero composer.json, guardar y ejecutar el comando composer update. De ese modo, Composer se encarga de eliminar automáticamente la librería.

Hasta aquí hemos visto el uso de Composer, de modo básico pero que nos dará un plus de profesionalidad. Espero con ello haber podido ayudar o al menos aclarar a quien lo necesite esta herramienta esencial en el desarrollo con Drupal.