Introducción a la programación en Joomla!

Sobre mi● Freelance● Desarrollando en PHP desde 2010● Desarrollando para Joomla! desde 2011● En el top 50 de contribuidores a Joomla● Algunas de mis contribuciones:

Searchtools, campo de tags, mejoras de JLayout….

● Administrador Github Joomla● Joomla! CMS v3.5 release manager

Twitter: @phproberto

¿Por qué Joomla?● Opensource● 100% communitario y qué comunidad!● Segundo CMS más usado● Buenas prácticas● Multilenguaje y ACL en core● Evolución como programador● Evolución como CMS

Requerimientos● Apache, MySQL, PHP funcionando en local● IDE:

○ PhpStorm○ Sublime Text 3

● Recomendados:○ Joomla Coding Standards○ Conocimientos de PHP○ Conocimientos de javascript / jQuery○ Conocimientos de HTML5 / CSS3○ Git○ Xdebug

Tipos de extensiones: librería● Conjunto de clases reutilizables por otras extensiones.● Cadenas de idioma comunes para frontend y backend.● Campos comunes para frontend y backend.● No suelen mostrar nada por pantalla.● Ejemplos: phpmailer, FOF, Joomla Framework,

paquetes de Symfony, etc.● Tiempo de desarrollo: 1 día.

Librerías del core/libraries

Tipos de extensiones: plugin● Preproceso de la página enganchándose a eventos

predefinidos.● Suele procesar datos predefinidos que ya han sido

generados por componentes o por el core.● Frontend y backend.● Ejemplos: comentarios disqus, botones enlaces a redes

sociales, autentificación, minimizado de javascript, etc.● Tiempo de desarrollo aproximado: 2 días

Tipos de extensiones: módulo● Pequeño bloque que se muestra en diferentes posiciones

del template.● Suele usar modelos de componentes ya instalados o

datos externos.● Frontend y backend.● Ejemplos: últimos artículos, feed de noticias, caja de

login, HTML estático, etc.● Tiempo de desarrollo aproximado: 2 días

Tipos de extensiones: componente

● Sistema completo de gestión de contenidos.● Suele incluir: modelos, tablas, controladores,

formularios, vistas, etc.● Suelen integrar gestión de backend y frontend.● Gestión de permisos de usuarios (ACL).● Vistas completas enlazables desde los menús.● Suelen ir acompañados de módulos y plugins.● Ejemplos: com_content, k2, virtuemart, etc.● Tiempo de desarrollo aproximado: indefinido.

Tipos de extensiones: plantilla

● Renderizado de la página.● Incluyen posiciones predefinidas para la inclusión de

módulo.● Existen diferentes frameworks de plantillas● Suelen usar frontend frameworks como Twitter

Bootstrap, Foundation, Uikit, etc.● Clubs de plantillas.● Ejemplos: protostar, master bootstrap, blank template,

etc.● Tiempo de desarrollo aproximado: 1 semana.

Enlaces de interés● Joomla Developer documentation

○ Sample component○ Sample module○ Sample plugin

● Joomla forums○ Subforo español

● Joomla General Development Google Group● Git and Github basics● J and Beyond videos● joomgouts.com

Configuración de Sublime Text1. Instalar Package Control2. Instalar Sidebar Enhacements3. Instalar GotoDocumentation4. Instalar TrailingSpaces5. Instalar GitGutter6. Instalar DocBlockr7. Instalar PHP Code Sniffer8. Instalar Aligntab9. Instalar XdebugClient

Modulo de ejemplo: Github Card● Mostrar perfil de Github.● JLayout para el render.● API del core de Github.● Ejemplo uso de tablas.● Gestión de directorio media.● Templates/Layouts personalizables.● Uso de layouts reutilizables.● Estilos con Sass.● Integrado con sistema Gulp.● Gestión de idiomas.

Recomendaciones previas● Usa el core como referencia.● Nunca cargar JS o CSS desde la carpeta del módulo.● HTML, JS y CSS SIEMPRE personalizables en plantilla.● Intentar cargar siempre JS y CSS comprimidos.● Si necesitas cargar jQuery agrega parámetro en config.● Considera crear tu propia librería común.● Usar JDatabaseQuery para consultas SQL.● Escapar siempre variables en consultas SQL.● Usar autoloading para carga de classes.

Módulo: Estructura básica

Módulo: pseudo-MVC

Módulo: Estructura avanzada

Módulo: Estructura propuesta

Ventajas de la estructura propuesta

● Clase base del módulo reutilizable.● Uso de autoloading para nuestras clases.● Uso de JLayout para el render.● Carga simple de JS/CSS.● Carga/proceso simple de datos.● Cambio dinámico de layouts (reusabilidad).

Manifiesto XML

● Usado por el instalador de Joomla.● Versión del módulo y copyright.● Modificaciones de base de datos.● Archivos a instalar.● Media folder a instalar.● Parámetros para personalización del módulo.● Servidor de actualizaciones automáticas.

Manifiesto XML: Copyright + versión

Archivos de idiomaJoomla 3 no requiere instalación explícita de idiomas

Manifiesto XML: SQL

Archivos SQL

Manifiesto XML: Archivos módulo

Recuerda agregar cualquier nuevo directorio / archivo

Ordena por orden alfabético para evitar errores

Manifiesto XML: Archivos media

Manifiesto XML: update server

Manifiesto XML: parameters

● “basic” y “advanced” son fieldsets por defecto.

● Cualquier otro fieldset es creado como nueva pestaña.

● Tipos de campos estándar● Campos personalizados

(addfieldpath)

Flujo render módulo

1. JDocumentRendererModule::render($module, $attribs = array(), $content = null)

2. JModuleHelper::renderModule($module, $attribs = array())3. Punto de entrada4. Instancia5. Layouts6. Instancia7. Layouts8. …..

Y ahora….

A abrir el IDE