Blog

Magento utiliza una arquitectura MVC (Modelo-Vista-Controlador). En muy pocas palabras, la arquitectura MVC consiste en separar el código responsable de la lógica de negocio de una aplicación (modelo) de su representación visual (vista) y de las acciones que pueden realizarse sobre dicha lógica (controlador).

En esta primera parte del tutorial, crearemos una extensión muy simple, que no contendrá lógica de negocio alguna. Además, tampoco nos centraremos en la vista por el momento, ya que lo que queremos es símplemente indicar los pasos que hay que realizar para crear un módulo nuevo. No obstante, y para dotar de un mínimo de funcionalidad a nuestra primera extensión, y que podamos probarla y ver que funciona, sí que se tratará, de forma sencilla, cómo funcionan los controladores. Modelos y Vistas se tratarán en las siguientes partes del tutorial.

Empezamos!

Es necesario indicar a Magento la existencia de nuestra extensión. Esto se hace creando un fichero xml con el nombre del espacio de nombres y el nombre de la extensión en la caperta /app/etc/modules/ (en este tutorial asumiremos que / es la ruta de la carpeta de nuestra instalación de Magento).

/app/etc/modules/Brainsins_Holamundo.xml

<?xml version="1.0"?>
<config>
<modules>
<Brainsins_Holamundo>
<active>true</active>
<codePool>local</codePool>
</Brainsins_Holamundo>
</modules>
</config>

Una vez creado este fichero, y tras actualizar la cache de Magento – System -> Cache Management – podremos ver que Magento ha reconocido nuestra extensión. Para ello, deberemos ir al menú System -> Configuration del backstore, y en el menú de la izquierda Advanzed -> Advanzed. Aquí se nos permitirá activar o desactivar la salida visual de todas las extensiones instaladas. Si nuestra extensión se encuentra instalada (reconocida por Magento) deberá encontrarse en esta lista. Respecto a la cache, por comodidad, yo recomiendo deshabilitarla mientras estemos desarrollando la extensión, y volver a habilitarla cuando hayamos terminado.

Lista de Extensiones en Disable Modules Output muestra la nueva extensión Brainsins_Holamundo
Brainsins_Holamundo aparece listada

Después, crearemos el directorio de nuestra Extensión:

/app/code/local/Brainsins/Holamundo

En este directorio se almacenarán los archivos de nuestra extensión. Según avancemos en otras partes del tutorial, iremos añadiendo subdirectorios. El subdirectorio Brainsins se corresponde con el espacio de nombres, o namespace, para todas nuestras extensiones, mientras que la carpeta HolaMundo es la carpeta que se corresponde directamente con la extensión. La razón del namespace es que así nuestra extensión HolaMundo podrá ser diferenciada de otras extensiones con el mismo nombre, ya que éstas pertenecerán a otros espacios de nombres.

Dentro de este directorio crearemos las siguientes carpetas:

/app/code/local/Brainsins/Holamundo/etc

/app/code/local/Brainsins/Holamundo/controller

A continuación, crearemos el fichero de configuración de nuestro módulo en el directorio etc

/app/code/local/Brainsins/Holamundo/etc/config.xml

<?xml version="1.0"?>
<config>
<modules>
<Brainsins_Holamundo>
<version>0.1.0</version>
</Brainsins_Holamundo>
</modules>
<frontend>
<routers>
<holamundo>
<use>standard</use>
<args>
<module>Brainsins_Holamundo</module>
<frontName>holamundo</frontName>
</args>
</holamundo>
</routers>
</frontend>
</config>

La parte importante de este fichero es la contenida en la etiqueta . Con ella especificamos elementos de interacción con los usuarios para nuestra extensión. La etiqueta indicará los controladores que tendrá el módulo. La etiqueta será la url relativa a nuestra tienda para que se ejecute el controlador. Es decir, que si la url de nuestra tienda es www.mitiendamagento.com, nuestro controlador se ejecutará en las urls que comiencen por www.mitiendamagento.com/holamundo.

Hemos indicado en el fichero de configuración que disponemos de controladores para la extensión, ahora hay que crear un controlador:

/app/code/local/Brainsins/Holamundo/controllers/IndexController.php

<?php
class Brainsins_Holamundo_IndexController extends Mage_Core_Controller_Front_Action {
public function indexAction() {
echo 'Hola Mundo!';
}
}

Sobre este fichero, quiero destacar unas cuantas cosas:

Si nos fijamos en el nombre de la clase: Brainsins_Holamundo_IndexController, podemos notar cómo tiene una relación con la ruta y el nombre dle fichero que la contiene: /app/code/local/Brainsins/Holamundo/controllers/IndexController.php. Veremos este comportamiento repetido con todas las clases que creemos.
Todas las clases que creemos utilizarán el mecanismo de Herencia. En este caso heredamos de la clase Mage_Core_Controller_Front_Action, por eso el código de nuestro controlador es tan simple.
Una vez hecho esto, ya podremos observar el comportamiento de nuestra extensión! Para ello, basta con acceder a la url de nuestra tienda añadiendo /holamundo. Por ejemplo, www.mitiendamagento.com/holamundo. Como era de esperar, veremos una página en blanco con el mensaje “Hola Mundo!». También veremos el mismo mensaje si entramos en las direcciones www.mitiendamagento.com/holamundo/index y www.mitiendamagento.com/holamundo/index/index. Esto se debe a que “index» es tanto el controlador por defecto como la acción por defecto, y en Magento, para decidir qué controlador ejecutar y qué método ejecutar (acción) dentro de dicho controlador, se utiliza la siguiente estructura de url:

www.mitienda.com/controlador/acción

Si nos fijamos, el controlador index se asocia al controlador IndexController y la acción index al método indexAction.

Para añadir otra acción, basta con implementar un segundo método, por ejemplo, saludarAction(), en nuestro controlador:

/app/code/local/Brainsins/Holamundo/controllers/IndexController.php

<?php
class Brainsins_Holamundo_IndexController extends Mage_Core_Controller_Front_Action {
public function indexAction() {
echo("Hola Mundo!");
}

public function saludarAction() {
$input = $this->getRequest()->getParam("nombre");
$name = $input ? $input : "Desconocido";
echo("Hola " . $name . "!");
}
}

Aunque no es objeto de este tutorial, puede verse cómo se ha capturado un parámetro pasado en la url (GET) para obtener el valor del nombre a quien saludar. De esta forma, al haber creado la acción saludar para el controlador index, el acceso a la url www.mitiendamagento.com/holamundo/index/saludar mostrará el mensaje “Hola Desconocido!», mientras que si pasámos un parámetro nombre, como en www.mitiendamagento.com/holamundo/index/saludar?nombre=Alex el mensaje mostrado será “Hola Alex!».

En esta segunda parte del tutorial se presenta cómo crear un modelo muy básico en el módulo de Magento creado en la primera parte.

Hasta ahora hemos reducido nuestro módulo exclusivamente al controlador, ya que realmente nuestra lógica de negocio es trivial y utilizado como vista una simple impresión en la página. El siguiente paso es colocar la lógica de negocio (aunque sea extremadamente simple) en unmodelo para, finalmente, añadir una vista.

La creación del modelo se hace de forma muy similar a como hemos creado el controlador. En primer lugar, debemos indicar en el fichero de configuración /app/local/Brainsins/Holamundo/etc/config.xml dónde debe Magento buscar los modelos, para ello debemos modificar este fichero como se muestra a continuación:

/app/code/local/Brainsins/Holamundo/etc/config.xml

<?xml version="1.0"?>
<config>
<modules>
<Brainsins_Holamundo>
<version>0.1.0</version>
</Brainsins_Holamundo>
</modules>
<frontend>
<routers>
<holamundo>
<use>standard</use>
<args>
<module>Brainsins_Holamundo</module>
<frontName>holamundo</frontName>
</args>
</holamundo>
</routers>
</frontend>
<global>
<models>
<holamundo>
<class&gt;Brainsins_Holamundo_Model&lt;/class>
</holamundo>
</models>
</global>
</config>

Con esto estamos diciendo a Magento, mediante la etiqueta class, que nuestros modelos se encuentran en la ruta /Brainsins/Holamundo/Model. La ruta además empieza por /app, como todos los módulos, y continúa en local/, ya que así se especifica en el archivo de activación.

Nuestra clase que hará de modelo, recordando la relación entre la ruta del fichero y su nombre, se llamará Brainsins_Holamundo_Model_NombreDeLaClase, en nuestro caso la llamaremos Saludador.

/app/code/local/Brainsins/Holamundo/Model/Saludador.php

class Brainsins_Holamundo_Model_Saludador extends Mage_Core_Model_Abstract {
public function _construct() {
parent::_construct();
$this->_init('holamundo/saludador');
}

public function construirSaludo($nombre) {
return 'hola ' . $nombre . '!';
}
}

En este tutorial simplemente dotaremos al modelo de funcionalidad, pero no de estado (no se podrán guardar instancias del mismo en la base de datos, esto lo dejaremos para más adelante). Para poder utilizar esta funcionalidad desde cualquier parte de Magento utilizaremos el siguiente código:

Mage::getSingleton("holamundo/saludador');

Es hora de aplicar estos cambios a nuestro controlador:

/app/code/local/Brainsins/Holamundo/controllers/IndexController.php

<?php
class Brainsins_Holamundo_IndexController extends Mage_Core_Controller_Front_Action {
public function indexAction() {
echo("Hola Mundo!");
}

public function saludarAction() {
$input = $this->getRequest()->getParam("nombre");
$name = $input ? $input : "Desconocido";
$saludador = Mage::getSingleton('holamundo/saludador');
$saludo = $saludador->construirSaludo($name);
echo($saludo);
}
}

En esta tercera parte veremos el componente restante del MVC: cómo crear una vista. En las partes anteriores obteníamos como resultado de nuestra extensión mensajes de texto que aparecían en una página en blanco, ahora incorporaremos esos mensajes en la estructura de la página de magento.

Continuamos con el ejemplo de la extensión “holamundo» que saluda al visitante. En un principio, el controlador debería ser el encargado de indicar al modelo construir un saludo para que luego la vista pidiese ese saludo al modelo y lo mostrara. Sin embargo, recordemos que, por razones de simplicidad, nuestro modelo no tiene estado, por lo tanto la vista no se comunicará con la misma instancia del modelo que el controlador. Por lo tanto, en este tutorial, las llamadas que realizábamos antes desde el controlador, las realizará ahora la vista. Más adelante publicaré otro tutorial avanzado sobre cómo crear modelos.

Lo primero que realizaremos es crear un “block» (bloque). Para ello, crearemos el siguiente fichero:

/app/code/local/Brainsins/Holamundo/Block/Holamundo.php

Con el siguiente código

<?php
class Brainsins_Holamundo_Block_Holamundo extends Mage_Core_Block_Abstract {
public function _prepareLayout()
{
return parent::_prepareLayout();
}<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px; white-space: normal;"> </span>
protected function _toHtml() {
$input = $this->getRequest()->getParam("nombre");
$name = $input ? $input : "Desconocido";
$saludador = Mage::getSingleton("holamundo/holamundo");
return "<h1>" . $saludador->construirSaludo($name) . "</h1>";
}
}

Como podéis ver, se trata prácticamente del mísmo código que había en el controlador del tutorial anterior, salvo que ya no imprimimos nada en la página usando la función “echo» de PHP. Cuando indiquemos a Magento que tiene que incorporar nuestro bloque en la página, obtendrá el texto que hay que mostrar utilizando la función _toHtml() que hemos implementado.

Para indicar a Magento que existe este nuevo bloque necesitamos, en primer lugar, crear un fichero de layout para nuestra extensión. El fichero de layout da información a Magento sobre qué bloques mostrar en nuestra extensión, dónde van colocados y cómo tienen que mostrarse. En nuestro caso sólo necesitamos incorporar el bloque que hemos creado al contenido de la página.

/app/design/frontend/base/default/layout/holamundo.xml

<?xml version="1.0"?>
<layout version="0.1.0">
<default>
</default>
<holamundo_index_index>
<reference name="content">
<block type="holamundo/holamundo" name="holamundo" />
</reference>
</holamundo_index_index>

<holamundo_index_saludar>
<reference name="content">
<block type="holamundo/holamundo" name="holamundo" />
</reference>
</holamundo_index_saludar>
</layout>

Como puede verse, hemos creado dos entradas iguales, una para la acción index y otra para la acción saludar. Más adelante cambiaremos una de las dos para mostrar otra forma de crear vistas. A continuación vamos a indicar a Magento tanto la existencia de bloques en nuestra extensión(la ruta donde podrá encontrarlos) como la existencia de este fichero de layout. Esto se hace en el fichero config.xml

/app/code/local/Brainsins/Holamundo/etc/config.xml

<?xml version="1.0"?>
<config>
<modules>
<Brainsins_Holamundo>
<version>0.1.0</version>
</Brainsins_Holamundo>
</modules>
<frontend>
<routers>
<holamundo>
<use>standard</use>
<args>
<module>Brainsins_Holamundo</module>
<frontName>holamundo</frontName>
</args>
</holamundo>
</routers>
<layout>
<updates>
<holamundo>
<file>holamundo.xml</file>
</holamundo>
</updates>
</layout>
</frontend>
<global>
<models>
<holamundo>
<class&gt;Brainsins_Holamundo_Model&lt;/class>
</holamundo>
</models>
<blocks>
<holamundo>
<class>Brainsins_Holamundo_Block</class>
</holamundo>
</blocks>
</global>
</config>

Por último, como hemos incorporado en la vista el código que teníamos en el controlador, tenemos que cambiar este último. Además, será el controlador quien indique a la vista que debe mostrarse. Con estas incorporaciones el código del controlador queda así:

/app/code/local/Brainsins/Holamundo/controllers/IndexController.php

<?php
class Brainsins_Holamundo_IndexController extends Mage_Core_Controller_Front_Action {
public function indexAction() {
$this->loadLayout();
  $this->renderLayout();
}
public function saludarAction() {
$this->loadLayout();
  $this->renderLayout();
}
}

Como puede verse, simplemente carga el layout y le indica que se muestre. Con esto, al cargar la página www.mitiendamagento.com/holamundo/index/saludar?nombre=Alex veremos algo como esto:

Resultado de incorporar la vista

El inconveniente de esta forma de crear las vistas es que cuando queramos cambiar algo del contenido de nuestra extensión (y esta parte es la que con más probabilidad y frecuencia será cambiada), tendremos que cambiar el código del bloque. Este problema se resuelve creando otro tipo de bloque que no es el encargado de mostrar el contenido de la vista, sino que está asociado a un template – un fichero que contendrá directamente el código php y html que compondrá el contenido que queramos que aparezca en el bloque.