implementar xajax en modulos de Joomla

Buenas tardes, estos meses estuve a full, pero bueno trataré de compartir más fix.

En esta oportunidad publico sobre una forma de implementar la librería xajax en un modulo de Joomla.

Primero tenemos que tener nuestro modulo de Joomla desarrollado, no voy a entrar en detalles de ello, por que es otro tema, pero desarrollar un modulo en Joomla es relativamente sencillo.

A veces nos piden hacer ciertas tareas en un determinado modulo de Joomla que normalmente se desarrollan con ajax para facilitarnos la vida existe xajax, pero que sucede un modulo de Joomla no se comporta como un componente de Joomla no trabaja con el modelo MVC, asi que es un poco diferente, los modulo de Joomla trabajan con clases abstractas, existen formas de trabajarlo como MVC, pero mayormente encontraremos que no es así y nos piden "right now" resolver el problema.

Nos descargamos la librería XAJAX: http://xajaxproject.org/en/download/

Paso 1: Ubicamos la libreria y lo guardamos en la carpeta "libraries" en la raiz de Joomla.

Paso2: Ubicamos el modulo que deseamos implementar el xajax  a continuación muestro la estructura de un modulo cualquiera que encontré. Solo trabajaremos en el layout  "default.php", si el modulo es trabajado en MVC otra forma sería la configuración. Entonces abrimos el archivo seleccionado a continuación.

Paso 3: Como sabrán el "default.php" normalmente es solo código PHP con algunos PHP's para iterarlos, pero basicamente HTML, así que en esta parte agregamos las siguientes lineas. Donde se ubicarán en la parte superior del archivo.

descripción:
- Las 5 primeras lineas de código  es el requerimiento de la librería, de ahí está la instancia a la clase xajax, la tercera linea es para configurar si queremos que esté en modo de debug (esto hará que salte un pop-up cada vez que se ejecute un método xajax), la sigueinte linea, atención a esto es muy importante aquí es donde se registra los metodos que utilizaras en el HTML debajo, noten que tengo comentado otro tipo de register eso es para cuando trabajemos con el modelo mvc donde nuestra vista sea una clase y no un simple HTML como este, y el último generar todo los metodos registrados al iniciar.

Al final hay un código: $xajax->printJavascript('libraries/xajax/'); esto sirve para mostrar tos javascripts en la vista que se generará.

Observamos el Metodo prueba() y observen que está registrado en la 4ta linea del código.
Lo que tenemos en el método prueba es básicamente lo que tendrán todos los métodos de trabajaremos con xajax
- Una instancia al response, y  este objeto response tiene muchos métodos que trabajarías con JS, en este caso solo usaré un alert xD

y al final retornamos el objResponse.

La llamada a este método dentro del HTML sería:

Siempre prefijado con xajax_mifuncion()

En el evento click este busca a la función JS generada y te salta un alert

Bueno espero que les sirva este pequeño fix.

Modificar una ruta Absoluta de un archivo en la Base de datos

Alguna vez has tenido la necesidad de cambiar de servidor tu proyecto y casualmente tienes en tus tablas de archivos rutas absolutas el cual deseas cambiarlo.

Bueno aquí comparto este script en PHP que busca una cadena dentro de la URL y la reemplaza  por la cadena que deseas.

Aquí el Código


<?php
$cnn = mysql_connect('localhost', 'root', 'root');
mysql_select_db('name_bd');

$searchText = "/home/project1/www";

$replaceText = "/var/www/project1";

$result = mysql_query('SELECT id_file,chr_path FROM tb_file WHERE chr_path LIKE "%'.$searchText.'%"');

$count = 0;
while ($row = mysql_fetch_array($result)) {
    $count++;
    $newContent = str_replace($searchText, $replaceText, $row['chr_path']);
    //$newGuid = str_replace($searchText, $replaceText, $row['guid']);
 
    $query = sprintf("UPDATE tb_file SET chr_path='%s' WHERE id_file = {$row['id_file']}",
    mysql_real_escape_string($newContent));
 
    $update = mysql_query($query);
}
echo $count;
?>

Upload con Jquery en Joomla

Holas


Este es mi primer Post, voy agregar acerca de un problema que tuve agregando Uploads en joomla, sa sabe que joomla trabaja con mootools, pero necesitaba crear uno con Jquery, y aparte que mi componente estaba trabajando con el Framework xajax así que tenía que buscar una solución. Despues de casi todo un día laboral buscando una solución encontré una solución y bien documentada.


http://www.uploadify.com

Este sitio Web te ofrece unas librerias que ayudan a realizar un upload independientemente de un Framework, CMS, o cualquier proyecto que tengas, en este caso usaré Joomla.


Paso 1: Descargamos la última versión de la librería
 http://www.uploadify.com/wp-content/uploads/uploadify-v2.1.4.zip


Paso 2: Descomprimimos y observamos dentro de la carpeta que existen archivos con extensiones, js, css, swf, etc  copiamos todos menos la carpeta com si la carpeta no existe no hay problema, en nuestro componente en la raíz de ello creamos una carpeta llamado upload y pegamos dentro de ello todos los archivos que copiamos.


Quedaría algo similar a la imagen siguiente donde se ha creado la carpeta upload dentro de mi componente y se pego los archivos del comprimido.

Paso 3: Dentro del archivo view.html.php de nuestra vista, nos vamos al método display, esta función se encarga de disparar comandos según la tarea que envía el controlador, bueno sea la tarea que sea, tenemos que agregar estas lineas:



$host = JURI::root();

$document =& JFactory::getDocument();
$document->addScript($host.'administrator/components/com_mycomponent/assets/js/jquery-1.5.1.min.js');                                        
                    
 $document->addScript($host.'administrator/components/com_mycomponent/upload/swfobject.js');
$document->addScript($host.'administrator/components/com_mycomponent/upload/jquery.uploadify.v2.1.4.min.js');                   
$document->addStyleSheet($host.'administrator/components/com_mycomponent/upload/uploadify.css'); 


Con estas lineas estamos cargando las librerías y estilos que tendrá nuestro botón de upload.


Seguidamente agregamos el Jquery que aperturará el funcionamiento de las librerías



$swfUploadHeadJs ="$(document).ready(function() {
                                        $('#uploadify').uploadify({
                                                'uploader'       : 'components/com_storage/upload/uploadify.swf',
                                                'script'         : 'components/com_storage/upload/uploadify.php',
                                                'cancelImg'      : 'cancel.png',
                                                'folder'         : 'components/com_storage/files',
                                                'queueID'        : 'fileQueue',
                                                'auto'           : true,
                                                'multi'          : true,
                                                'onComplete'  : function(event, ID, fileObj, response, data) {
                                                      //alert('There are ' + response + ' files remaining in the queue.');
                                                      xajax_uploadFile(response, ".$id_equipment_detail.");
                                                    }
                                        });
                                });";                    


//add the javascript to the head of the html document
$document->addScriptDeclaration($swfUploadHeadJs);

Jquery, carga de los archivos a usar y la ruta donde se guardaran los archivos

  


Esto último carga el evento de inicio del Jquery que es la que llamará a los demás recursos.


En la función onComplete: llamo a un método xajax como parámetros el nombre del archivo cargado y una variable que me sirve, puedes crear cualquier método javascript o simplemente no usarlo, con esto ya aseguras que el archivo suba al servidor


Bueno hasta Aquí tenemos cargados las librerías, el código Jquery, el controlador al envíar la tarea, el método display buscará la tarea y ejecutará todo el código anterior.


Paso 4: Ahora vamos al Layout de la vista que estuvimos programando, ahí supongo que se tendrá una interface con su propio estilo así que aquí solamente necesitamos agregar la siguiente linea:


<input type="file" name="uploadify" id="uploadify" />


Hasta aquí tenemos ya la funcionalidad de que se explore el archivo y se seleccione el archivo a subir, ahora veremos donde subir el archivo, en mi componente se ha creado una carpeta llamada files donde almacenaré todos los files que suba.


Dentro de la carpeta upload se encuentra el archivo uploadfy.php, abrimos para editarlo y haremos unos cambios, que quería así :

Edición opcional del archivo para darle permiso a los archivos que voy subiendo

Originalmente viene con la linea 47 que te devuelve la ruta absoluta del archivo, yo hice agregaciones del 41 al 46 que simplemente le da permisos ar archivo y captura solo el nombre del archivo que se suba por necesidad de mi propio algoritmo.


Aya no olviden dar permisos de escritura a la carpeta files/ y también a todos los archivos de la carpeta upload/


Cualquier consulta con las librerías comenten o revisen la documentación de la librería que esta en su sitio web.