Introducción a la programación para Joomla usando un módulo de ejemplo. Usado para el hangout: http://www.joomgouts.com/programas/3x12-introduccion-a-la-programacion-para-joomla-primeros-pasos

1. Introducción a la
programación en Joomla!

2. 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 managerTwitter: @phproberto

3. ¿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

4. 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

5. 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.

6. Librerías del core
/libraries

7. 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

8. 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

9. 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.

10. 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.

11. 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

12. Configuración de Sublime Text
1. Instalar Package Control
2. Instalar Sidebar Enhacements
3. Instalar GotoDocumentation
4. Instalar TrailingSpaces
5. Instalar GitGutter
6. Instalar DocBlockr
7. Instalar PHP Code Sniffer
8. Instalar Aligntab
9. Instalar XdebugClient

13. 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.

14. 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.

15. Módulo: Estructura básica

16. Módulo: pseudo-MVC

17. Módulo: Estructura avanzada

18. Módulo: Estructura propuesta

19. 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).

20. 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.

21. Manifiesto XML: Copyright + versión

22. Archivos de idioma
Joomla 3 no requiere instalación explícita de idiomas

23. Manifiesto XML: SQL

24. Archivos SQL

25. Manifiesto XML: Archivos módulo
Recuerda agregar cualquier nuevo directorio / archivo
Ordena por orden alfabético para evitar errores

26. Manifiesto XML: Archivos media

27. Manifiesto XML: update server

28. 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)

29. Flujo render módulo
1. JDocumentRendererModule::render($module, $attribs =
array(), $content = null)
2. JModuleHelper::renderModule($module, $attribs = array())
3. Punto de entrada
4. Instancia
5. Layouts
6. Instancia
7. Layouts
8. …..

30. Y ahora….
A abrir el IDE