3. 3/125
El código se estructura en 2 carpetas:
back_end y front_end
● Back_end
– Joomlaadministrator
– components
– com_reviews
● Front_end
– Joomla
– components
– com_reviews
4. 4/125
¿Qué es eso de el front_end y el back_end?
● El front_end contiene el código que ejecutan los usuarios
que NO son administradores del sitio web
● El back_end contiene el código que ejecuta el
administrador (o los administradores) del sitio web
5. 5/125
Control de flujo
● En un componente se ejecuta una y otra vez el mismo
fichero
● En cada vez se invocan diferentes funciones
● La controladora gestiona el flujo
● El modelo gestiona el acceso a datos
● La vista gestiona la visualización en pantalla
6. 6/125
Modificar permisos de directorio
● Debemos modificar los permisos de la carpeta de nuestro
sitio web para que el propio Joomla pueda escribir dentro
de ella
● Si accedemos en modo administrador Ayuda Permisos
de directorio...
7. 7/125
Modificar permisos de directorio
● Desde la shell, sobre nuestro directorio del sitio web
escribimos:
– sudo chmod -R 777 marudesign/
● Y ahora, refrescamos la página de permisos:
9. 9/125
Estructura del componente
● Prefijo com_. Si el componente se llama reviews, las
carpetas contenedoras se llamarán com_reviews
● Dos carpetas contenedoras. Una para el front end y otra
para el back end:
– componentescom_reviews y
– administratorcomponentscom_reviews
● Fichero main.
– El fichero principal del componente se llamará
reviews.php y admin.reviews.php para el back
end (El nombre coincide con el nombre del
componente)
– Este fichero tiene que estar ubicado justo en la
carpeta del componente.
10. 10/125
Ejecutar el front end del componente
● index.php?option=com_<nombre_componente>
– En joomla siempre se ejecuta el fichero index.php
– En el querystring, la variable option designa qué
componente ejecutar
– http:joomlaindex.php?option=com_reviews
– Esto invocará al fichero main del componente, que
en nuestro caso es
componentscom_reviewsreviews.php
– Cualquier cosa que pongamos en este fichero main
se ejecutará
11. 11/125
Seguridad: Evitar invocación directa
● Como vemos, joomla hace un routing de la página solicita,
no escribimos directamente el fichero .php en la barra de
direcciones
● ¿Cómo evitar que un usuario escriba directamente en la
barra de direcciones la ruta de nuestro fichero .php?
● En la primera línea debemos escribir este código:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
...
?>
● De esta manera aseguramos que ha accedido vía joomla!
12. 12/125
Ejecutar el back end del componente
● administrator/index.php?
option=com_<nombre_componente>
– En joomla siempre se ejecuta el fichero index.php
– En el querystring, la variable option designa qué
componente ejecutar
– http:joomlaadministratorindex.php?
option=com_reviews
– Esto invocará al fichero main del componente, que
en nuestro caso es administrator components
com_reviews admin.reviews.php
– Cualquier cosa que pongamos en este fichero main
se ejecutará
13. 13/125
Registrar el componente
● Registrar el componente implica agregar una línea a la
tabla del sistema jos_components
14. 14/125
Creación de barras de herramientas
● Una barra de herramientas se divide en dos ficheros:
– toolbar.reviews.html.php
● Se encargará de mostrar/dibujar la barra de
herramientas en formato HTML
– toolbar.reviews.php
●Decide qué barra de herramientas mostrar,
por si tenemos más de una
● Por la simple existencia de estos ficheros, joomla asume
que tenemos una barra de herramientas asociada a
nuestro componente
16. 16/125
Visión global
● Creación de la tabla de datos
● Creación del formulario básico de creación/edición de
registros
● Procesamiento de los datos e inserción en la tabla
● Listado de los datos
● Edición y borrado de datos
17. 17/125
Creación de la tabla de datos
● Creamos la tabla en la que vamos a guardar datos
– En el ejemplo será jos_reviews, donde se
almacenan las opiniones de los restaurantes
● Se trata simplemente de lanzar un script:
– CREATE TABLE jos_reviews (...
18. 18/125
Creación de la clase tabla
● Asociado a la tabla tendremos una clase que maneja los
datos de esa tabla
● Hereda de JTable
● El fichero se tiene que llamar review.php porque aloja una
única fila de la tabla
● Situaremos este fichero bajo la carpeta Tables
● El nombre de la clase tiene que ser TableReview
● La clase contiene simplemente cada uno de los campos
inicializados a null y exactamente con el mismo nombre
que los campos de la tabla
● Hay que crear el constructor
20. 20/125
Formulario de inserción de datos
● Dos ficheros:
– admin.reviews.php
●Lógica del formulario
– admin.reviews.html.php
● Visualización HTML del formulario
21. 21/125
Formulario de inserción de datos: lógica
● fichero admin.reviews.php
● En función de la variable $task, que recupera del qs,
realiza una acción u otra
● Para la creación de nuevos registros, $task = 'add'
● Carga el modelo: filas y las listas necesarias
● Invoca a la vista con los valores cargados, en nuestro
caso HTML_reviews::editReview que se aloja en el fichero
admin.reviews.html.php
24. 24/125
Procesar los datos: detectar tarea save
● Desde el formulario de inserción de datos se redirige
a:
– admin.reviews.php
– option=com_reviews
– task=save
● En su switch, debemos invocar a la función
saveReviews cuando task=save
25. 25/125
Procesar datos: recuperar y guardar datos
función saveReview
● Los datos del nuevo registro llegan desde un formulario
● Cargamos esos datos en una nueva row
● Para ello hacemos:
– Creamos una instancia vacía de row
– Bindeamos cada uno de sus campos a los valores
que llegan en $_POST
– CUIDADO: Joomla “limpia” esos campos de
caracteres espúreos
26. 26/125
Procesar datos: recuperar y guardar datos
función saveReview
● Los datos que contienen HTML, como quicktake y review
los cargamos en crudo.
● Para ello hacemos:
● Guardamos la fila en base de datos
27. 27/125
Procesar datos: recuperar y guardar datos
funcion saveReview
● Al terminar, redirigimos el navegador:
28. 28/125
Listar todos los registros: visión global
● admin.reviews.php
– Capturar el task=showReviews
– Crear la función showReviews(), que será la
lógica de la visualización
● admin.reviews.html.php
– Crear el formulario de visualización bajo la
función showReviews()
29. 29/125
Listar todos los registros: capturar task
● En admin.reviews.php
30. 30/125
Listar todos los registros: lógica
● Recuperamos todos los
registros
● Los cargamos en $rowsw
● Invocamos a la vista
31. 31/125
Listar todos los registros: visualización
● Simplemente es una table que rellenamos con un for
recorriendo cada uno de los elementos que hay en $rows
33. 33/125
Editar un registro: visión global
● 1. En admin.reviews.php capturamos task = 'edit' e
invocamos al handler
● 2. Modificamos la función editReview que utilizamos para
insertar para que recupere los datos del registro a editar
34. 34/125
Editar un registro: visión global
● 3. En la visualización de registros, creamos un link sobre
el nombre que nos lleve a la edición
35. 35/125
4. Edición de un registro: visión global
● 4. Modificamos el toolbar para que muestre los botones de
guardar, aplicar y cancelar cuando el task es 'edit'
36. 36/125
Eliminar registros
● 1. Capturamos el task = 'remove' en admin.reviews.php:
39. 39/125
Visión global
● El fichero reviews.php hará de router
● Se encarga de recoger el task que llega del queryString e
invocar a una función handler u otra
● reviews.php básicamente es un mega switch, con una
entrada por cada posible task y una lista de funciones
handler que gestionan la lógica de cada task
● Las operaciones básicas serán:
– Listar todos los registros
– Ver en detalle un registro
– Añadir comentarios a un registro
– Ver los comentarios
– Crear enlaces amigables
40. 40/125
Listar los registros
● 1. Capturamos el task
– En reviews.php, iniciamos el switch que recoge el
task y en base al cual invoca a una función
handler o a otra
41. 41/125
Listar todos los registros
● 2. Función handler para el task
– Ya hemos capturado el task y ya hemos invocado a
la función manejadora de esta tarea.
– Código de la función manejadora
42. 42/125
Listar todos los registros
● 3. Vista en el fichero revies.html.php
43. 43/125
Listar todos los registros: resultado
Cada registro muestra su nombre
y contiene un enlace para
la vista en detalle
44. 44/125
Mostrar un registro en detalle
● 1. Capturamos el task
45. 45/125
Mostrar un registro en detalle
● 2. Función handler de task='view'
– Carga el registro en $row
– Invoca a la vista con $row como parámetro
46. 46/125
Mostrar un registro en detalle
● 3. Vista, muestra el registro que recibe por parámetro
48. 48/125
Generar URLs amigables
● El objetivo es generar enlaces sencillos
● En lugar de esto:
– http://localhost/joomla/index.php?
option=com_reviews&id=1&task=view&Itemid=1
● Tener esto:
– http://www.dominio.com/reviews/view/1
● Debemos codificar y decodificar URLs
● Para ello, activamos el SEF a través del backend
– SEF=Search Engine Friendly
50. 50/125
Generar URLs amigables: activar SEF
● 2. Activar Search Engine
Friendly URLs
● 3. Activar también Apache
mod_rewrite, conseguimos
que en la URL tampoco
aparezca index.php
51. 51/125
Generar URLs amigables: activar SEF
● Renombrar fichero htaccess.txt por .htaccess
● Este fichero se encuentra en la carpeta raíz del proyecto
joomla
52. 52/125
Generar URLs amigables: activar SEF
● Activar mod_rewrite en Apache2:
Tecleamos lo siguiente en la línea de comandos:
$ sudo a2enmod rewrite
El comando a2enmod (podría ser una abreviatura de Apache2 Enable Module) sirve
para activar módulos que se encuentren en el directorio /etc/apache2/mods-availabley
los pasa al directorio /etc/apache2/mods-enabled.
Ahora lo que sigue es modificar nuestro host donde queremos que aplique el rewrite, en
mi caso sera para todo lo que este dentro de mi localhost, entonces me voy al
directorio /etc/apache2/sites-enabled/ y aquí debe de haber un archivo llamado 000-
default, lo abrimos con vim o nano.
$ sudo vim /etc/apache2/sites-enabled/000-default
Aquí buscamos en las líneas que digan AllowOverride None y las cambiamos
porAllowOverride All. Incluso podemos definir que directorios queremos que aplique es
rewrite y cuales no.
Por último tenemos que reiniciar Apache2:
$ sudo /etc/init.d/apache2 force-reload
Y eso es todo!!!
53. 53/125
Generar URLs amigables: codificar
● Las tareas de codificar/decodificar URLs las realizaremos
en el fichero router.php, que se aloja en la raíz del
componente (y se tiene que llamar forzozamente así)
● Dentro de este fichero debe haber una función que se
llame <mi_componente>BuildRoute(&$query)
– En nuestro ejemplo, ReviewsBuildRoute(...)
● $query es un array asociativo, con la queryString
parseada
● Vamos eliminando de ese array las opciones que
sabemos manejar con unset y vamos insertando en
$segments los valores
● Devolvemos $segments
55. 55/125
Generar URLs amigables: codificar
● En todos los sitios en los que insertamos un link, hay que
pasarlo como parámetro a la función JRoute::_
● Así, en reviews.html.php, en la función showReviews,
ahora tenemos:
56. 56/125
Generar URLs amigables: decodificar
● En el fichero router.php, añadimos la función
<nombre_componente>ParseRoute($segments)
– En nuestro caso ReviewsParseReoute($segments)
● Listo, ya podemos insertar URLs como
– http://www.oursite.com/reviews/view/1
58. 58/125
Visión global
● Registrar el módulo
● Recuperar y obtener parámetros
● Centralización del acceso a datos y visualización con
helpers
● Utilización de layouts
● Mostrar las últimas reviews
● Mostrar una review al azar
60. 60/125
Indicar en qué páginas se debe mostrar
● En el back-end, vamos a Extensions/Module manager
● Pinchamos el enlace de nuestro módulo (Restaurant
reviews)
● En Menu assignment, marcamos All
● Guardamos
61. 61/125
Creación de su estructura básica
● Directorio del módulo
– Joomla/modules/mod_reviews
● Fichero main dentro del directorio del módulo
– mod_reviews.php
● Inicialmente, el código del main puede ser así:
63. 63/125
Mostrar los 3 últimos registros
Recuperamos los parámetros
del módulo
Cargamos sólo los
3 primeros registros
64. 64/125
Desarrollo de algunos Helpers y layouts
● Helper: Vamos a
centralizar el
acceso a datos en
un clase que
llamaremos
helper.php
● renderReview:
muestra una única
review. Crea el link
y llama al layout de
una review
65. 65/125
Desarrollo de algunos Helpers y layouts
● Layouts
– _review.php: muestra una única review
– default.php: muestra una lista de reviews
– bulleted.php: muestra una lista de reviews
poniéndole a cada una una viñeta
– Cambiamos el main del módulo para que tome los
helpers y los layouts
66. 66/125
Desarrollo de algunos Helpers y layouts
● _review.php: Layout para una única review. Este layout es
el que invoca renderReview, que es la función del helper
que muestra una única review
67. 67/125
Desarrollo de algunos Helpers y layouts
● default.php: Layout por defecto para mostrar un listado de
reviews
● Invoca sucesivamente a renderReview, que a su vez
llamará a _review, que se encarga de mostra una sola
review
68. 68/125
Desarrollo de algunos Helpers y layouts
● bulleted.php: layout para mostrar un listado de reviews
con una viñeta acompañando a cada una
69. 69/125
Desarrollo de algunos Helpers y layouts
● Modificamos el main del módulo, mod_reviews.php, para
que use los helper y los layouts:
1. Incluye el código del
helper
2. Invoca al método
getReviews del helper
para recuperar la lista
de registros
Si no pasamos este parámetro,
tomará default.php
3. Incluye el código del
layout bulleted.php
71. 71/125
Desarrollo de algunos Helpers y layouts
● Podemos cambiar el módulo para que muestre un registro
al azar, haciéndolo a través de los parámetros del propio
módulo
73. 73/125
Modelo: modelar una lista de reviews
● Crear la carpeta models bajo components/ com_reviews
● Una clase para recuperar una colección
– ModelReviewsAll, Model + <nombre componente>
+ <nombre modelo>
– Hereda de JModel
– Cada clase modelo se encargará de recuperar los
datos de base de datos
– El fichero se llamará all.php
75. 75/125
Modelo: Modelar una review
● Fichero review.php bajo models
● Hereda de JModel
● Sobreescribimos constructor para recuperar el id.
Debemos invocar al constructor del padre
● Tiene un objeto _db que hereda del padre para ejecutar
consultas
● El método getList para recuperar una review
77. 77/125
Vistas: Estructura de carpetas
● Carpetas de las vistas
– Carpeta views bajo components/com_reviews
– A su vez, una subcarpeta para cada tipo de
visualización, en nuestro caso, una subcarpeta all
y otra review
– Cada subcarpeta alojará la vista que se llamará
view.html.php
– Además, cada subcarpeta debe tener una nueva
carpeta llamada tmpl, que alojará como mínimo la
plantilla por defecto default.php
79. 79/125
Vistas: vista para ver todas las reviews
● Vista com_reviews/views/all/view.html.php
● Hereda de JView
● La clase se tiene que llamar ReviewViewAll
● Método display:
– Recupera su modelo
– Invoca al método getList, para obtener los
elementos necesarios
– Para manipular los datos de la plantilla, utiliza el
método AssignRef
– Invoca al método display del padre con la plantilla
deseada
81. 81/125
Vistas: vista para ver todas las reviews
● Template com_reviews/views/all/default.php
● Se dedica simplemente a visualizar
● Maneja un objeto list, que habremos de haber
suministrado desde la vista (con AssignRef)
● La lista es una lista de objetos review, que hemos cargado
con el modelo
82. 82/125
Vistas: vista para ver una review
● com_reviews/views/review/view.html.php
● Hereda de Jview
● Método display
– Recupera el modelo
– Dentro del modelo, carga el objeto para la
visualización
– Mediante AssignRef, carga todos los objetos que
manejará su template
– Invoca al método display del padre
84. 84/125
Vistas: vista para ver una review
● El template o layout default.php se dedicará a mostrar
mediante HTML uno a uno los campos de una review
● Mostramos un pequeño fragmento:
85. 85/125
Controladora
● Hereda de JController
● Fichero controller.php se coloca en la carpeta base del
componente
● Debe contener un método display, que se invocará en
cuanto se ejecute la controladora
● Contendrá otros métodos para realizar otras acciones
● El método display...
– ...recupera la vista
– ...recupera el modelo
– ...establece el layout
– ...invoca a su vista::display()
87. 87/125
Iniciar todo: Fichero main del componte
● Joomla invoca al fichero reviews.php, que es el fichero
main del componente
● Carga una instancia de controller
● Invoca el método execute con lo que haya en el
queryString en task
● Si no hay task, ejecuta método display
● Si en task hay algo, ejecutará el método de la controladora
que se llame como ese algo
89. 89/125
Codificar/decodificar URLs
● Debemos retocar el fichero router.php para parsear y
generar URLs amigables que se ajusten a este nuevo
esquema
● La función ReviewsBuildRoute quedaría así:
90. 90/125
Codificar/decodificar URLs
● La función ReviewsParseRoute quedaría así:
91. 91/125
El módulo: corregir links
● Ya sólo nos falta corregir los enlaces del módulo
mod_reviews
● El fichero helper.php, que crea un enlace, modificamos
$link para que quede así:
Actualizamos el enlace para que encaje
con el nuevo esquema
92. 92/125
Resultado
● Llegados a esta punto, el front-end funciona exactamente
igual pero con estructura MVC
93. 93/125
Reestructuración del back-end
● Creamos controller.php bajo administrator/ components/
com_reviews
● Contendrá una función por cada task, de modo que
desaparece el mega switch
● Las funciones dejan de llamarse editReview, saveReview,
removeReviews y pasan a ser edit, save, remove,...
● Con registerTask, registramos las tareas o task que va a
manejar esta controladora
95. 95/125
Reestructuración del back-end
Iniciar todo: Fichero main del componte
● Joomla invoca al fichero admin.reviews.php, que es el
fichero main del componente
● Lo modificamos para que utilice la controladora
● Carga la visualización
● Carga la controladora
● Carga las tablas
● Recuperamos del queryString el task
● Cambiamos el método default, para que no sea display
sino showReviews
● Ejecutamos el task de la controladora
96. 96/125
Reestructuración del back-end
Iniciar todo: fichero main del componente
97. 97/125
Paginación: en la carga de registros...
● En el elemento que carga los registros...
– recuperamos la variable limit
– recuperamos la variable limitstart
– calculamos el número total de registros
– lanzamos la consulta con registro inicial y número
de registros a recuperar
– Creamos un objeto JPagination con total, registro
inicial y número de registros a cargar
– A la vista le pasamos las filas cargadas y el objeto
JPagination
99. 99/125
Paginación: en la visualización...
● En la vista...
– Simplemente le pasamos el objeto de paginación
ya configurado
– Mostramos un footer en la tabla de visualización de
registros que muestre los botones de paginación
104. 104/125
Fichero main del plugin
● El fichero main del plugin debe guardarse en Joomla/
plugins/ content
● Podemos ponerle el nombre que queramos al fichero
● En el fichero main tendremos:
– Registrar el evento que queremos capturar, con la
función que se ejecutará cuando tal evento se
produzca
– Función que captura el evento
– Funciones auxiliares
105. 105/125
Ejemplo 1: actuar sobre el texto de un artículo
justo antes de que salga en pantalla
● Un cliente nos pide que cuando publique un artículo, o una
noticia,... o cualquier contenido, que si en el texto del
artículo aparece el nombre de un restaurante,
automáticamente se reemplace por un hipervículo a la
crítica sobre ese restaurante
● Para eso, nuestra función, que se ejecuta justo antes de
que salga en pantalla el artículo, buscará en su cuerpo, en
su texto si coincide con el nombre de un restaurante, y
fabrica el enlace a su crítica, y modifica el texto de dicho
artículo en memoria para que figure con el hipervínculo
automáticamente
106. 106/125
Ejemplo 2: códigos de reemplazo
● En este nuevo ejemplo, el usuario quiere que si aparece el
nombre de un restaurante, al final del artículo se incluya la
información básica del restaurante: precio, dirección,
teléfono, tarjetas admitidas,...
● Para eso, el cliente tendrá que escribir donde quiera que
aparezca esta “caja de información” un “comando” que
será {review – nombre restaurante}
● Así que, justo antes de que joomla muestre en pantalla el
artículo, se ejecutará nuestra función, buscaremos
mediante expresiones regulares esta llave abrir/llave
cerrar con la palabra review en medio, y sustituimos ese
bloque por la información básica del restaurante.
108. 108/125
Ejemplo 3: Capturar el evento de búsqueda
para añadir otros registros
● Cuando un usuario utiliza el cuadro de búsqueda
integrado en Joomla, el sistema sólo busca en los
artículos, en las noticias,...
● Si queremos que la búsqueda se realice también dentro
de las reviews, debemos,...
– capturar el evento de búsqueda
– hacer una función que lo maneje
– buscar dentro de nuestras tablas
– mostrar los resultados
111. 111/125
Parámetros en los módulos
● Creamos el fichero mod_reviews.xml justo al lado del
fichero main de nuestro módulo, bajo
Joomla/modules/mod_reviews
● Este fichero tiene una sección global y una sección de
parámetros
● La sección global almacena información del módulo:
– Nombre del módulo
– Autor
– Fecha de creación
– …
● La sección de parámetros guarda cada uno de los
parámetros configurables
118. 118/125
Descarga e instalación
● Descargamos el plugin UserMeta de esta dirección:
– http://joomlacode.org/gf/project/usermeta/frs/
● Desde el back-end de joomla/ extensiones/ instalar-
desinstalar
● Localizamos el fichero .zip e instalamos
● NOTA: NO copiar el fichero .zip dentro del directorio de
joomla, sino en cualquier carpeta local de nuestro sistema
119. 119/125
Configuración del plugin
● Utilizaremos el campo params de la tabla jos_user
● Desde el back-end, vamos al administrador de plugins, y
buscamos UserMeta
120. 120/125
Configuración del plugin
● En la configuración global/ sistema/ parámetros de
usuario:
121. 121/125
Agregamos los campos adicionales
● Archivo /plugins/system/usermeta/user.xml
● Modificaremos el primer grupo de parámetros, los que se
guardan en jos_user
Parámetros que se guardan Parámetros que se guardan
en jos_user en campo params en otra tabla
123. 123/125
Formulario de registro: mostramos los nuevos
campos
● El formulario de registro se encuentra en
– joomla/ templates/ <mi_template>/ html/ com_user/
register/ default.php
● Hay plantillas que NO sobreescriben el formulario de
registro de joomla, de modo que NO existe esta ubicación,
sino que usan directamente el formulario del sistema, que
está en
– joomla/ components/ com_user/ views/ register/
tmpl/ default.php
– Es el caso de la plantilla ja_purity
● Si es así, copiamos todo el contenido de esa ubicación del
sistema y lo volcamos al lugar que le correspondería en
nuestra plantilla, para NO modificar los archivos del
sistema
