lunes, 24 de abril de 2017

Plugins para el CKEditor


Este artículo trata sobre la incorporación de un plugin al editor de texto CKEditor, mediante un ejemplo práctico de cómo se dio solución a un requerimiento de uno de los sistemas desarrollados por la empresa SoftPei. La generación automática de documentos en determinado tipo de aplicaciones es imperativa, como lo son aplicaciones de gestión de recursos, gestión de servicios o sistemas contables. Este tipo de aplicaciones por lo general incluye funcionalidades de registro de pagos, ya sea en efectivo o electrónico; o la emisión de algún documento, como un contrato, en el que se incluyen determinadas clausulas para establecer de forma legal derechos y obligaciones de dos o más partes a la hora de recibir o prestar algún recurso o servicio. Los contratos son documentos por lo general escritos y diseñado por algún personal jurídico, pero una vez que el documento está hecho, basta con especificar en determinados campos los datos de las partes y los detalles del acuerdo. Por lo que este documento se convertiría en una plantilla, y el sistema lo utilizaría para emitir un documento con toda la información necesaria listo para ser firmado.
Como se comentó más arriba, el artículo trata de la solución a un requerimiento de uno de los sistemas desarrollados por SoftPei. El sistema debe permitir que un determinado usuario edite, precisamente el documento del contrato que se emite para los servicios que presta un negocio, a partir de una plantilla genérica que ofrece el mismo sistema. Para esto el sistema le proporciona al usuario la plantilla del contrato presentada en el CKEditor y un conjunto de etiquetas que representan los datos de las partes y los detalles del acuerdo (figura 1), como se explicó anteriormente.


Figura 1.

Para lograr el comportamiento que tiene la etiqueta que está en el cuerpo de la plantilla, la cual puede ser arrastrada y soltada en cualquier parte del documento como una entidad única, que puede ser insertada en el editor haciendo click en las etiquetas o arrastrándolas desde el panel lateral derecho y soltándolas en el editor, fue necesario incorporarle un plugin al CKEditor. A continuación, se definen los pasos a seguir para la definición de un pluing para este editor:
Lo primero es definir el nombre del plugin por ejemplo “tags”, hay que ir al directorio raíz del ckeditor y en el directorio plugins crear una carpeta y nombrarla “tags” que es el nombre que le daremos al plugin. Ahora dentro del directorio /tags, establecer la siguiente estructura que todo pluing para el ckeditor debe cumplir:
ckeditor/
            plugins/
                        tags/
                                    iconos/
                                    dialogs/
                                    plugin.js
Una vez asegurada esta estructura de carpetas, sigue definir el código del plugin dentro del archivo “plugin.js”:
CKEDITOR.plugins.add( 'tags', {

   
init: function( editor ) {
                 // aquí se definiría el código
                 //o la lógica del plugin
    }
} )
;

En el caso de nuestro plugin de definieron las instrucciones para que el editor formatee con una estructura permitida por el editor el contenido que se inserta o se arroja dentro del mismo.
Existen instrucciones para crear el icono del plugin, para crear el comando para el plugins que es el que muestra el cuadro de dialogo que pudiera tener definido el plugins y crear el botón del plugin que es el que se mostraría en la barra de herramientas del editor. Pero como nuestro plugin debe funcionar solamente al arrojar contenido dentro dentro del editor y debe funcionar haciendo clicks sobre botones desde fuera del editor, nada de esto se definió.
Para establecer las dependencias de un pluign se define en la variable “requires” dentro de la definición del plgin:
CKEDITOR.plugins.add( 'tags', {
    requires: 'widget',

   
init: function( editor ) {
                 // aquí se definiría el código
                 //o la lógica del plugin
    }
} )
;

Solamente faltaría definir si el contenido que va a reemplazar el plugin tendrá algún diseño en particular con el fin de diferenciarlo visualmente dentro del texto del editor, esto se define en el archivo “contents.css” que esta en el directorio raíz del ckeditor en nuestro caso coloqué la definición de estilo de una clase “tag” y una clase “img” que son las responsables de formatear las etiquetas y el cuadro donde debería ir la imagen del logotipo del negocio.
.tag{

    color: #fff;

    background-color: #356bcc;



    cursor: pointer;

    text-align: center;

    font-weight: normal;

    padding: 2px 12px;

    border-radius: 5px;

    margin-bottom: 3px;

}



.img{

    color: #fff;

    background-color: #5baacc;

    height: 60px;

    width: 150px;

    text-align: center;

    padding-top: 40px;

}


Una vez realizadas todas las configuraciones si un segmento de la plantilla de un contrato luciera de como se muestra en la siguiente figura:



Una vez sustituidas todas las etiquetas el documento generado lucirá de la siguiente forma:


{ Leer Más }


lunes, 17 de abril de 2017

Cerrando gráficas creadas en HERE


Hoy les traigo un pequeño truco para luego de dibujar figuras en formas de círculos, rectángulos, polígonos, líneas en here, pueda cerrarlas, o sea, cuando usted dibuja en el mapa y ya no desea seguir y sin querer da un click en otro lugar, el grafico se deforma, pues hoy les enseñare como darle solución a este detalle.
Este pequeño artículo es para aquellos que tienen conocimiento básico para trabajo con here, teniendo lo básico en nuestra página solo nos queda seguir los siguientes paso:
Crear un script y dentro colocar las variables inicializadas en false que nos ayudarán activar o desactivar el evento para dibujar en el mapa, luego registrar el evento y crear la función:

Inciando disparadores:
var activeCirculo = false;
var activeCloseCircle = false;

Iniciando jquery:
$(function(){

Registrando función que estará escuchando el evento para dibujar en el mapa:
mapa.addEventListener('tap', function (evt) {
            if (!activeCirculo) return;

Declarando cordenadas de donde se cargara el grafico
var coords =  mapa.screenToGeo
(
             evt.currentPointer.viewportX,
            evt.currentPointer.viewportY
);
Declarando dimensión del radio
           radio = 600000;

Creando circulo:
circle = new H.map.Circle(coords, radio);
            markerRadius = new H.map.DomMarker({
                lat: shapeToAdd.getStrip().getLatLngAltArray()[45],
                lng: shapeToAdd.getStrip().getLatLngAltArray()[46]
            });

Esta variable nos permite redimensionar nuestro grafico
            markerRadius.draggable = true;

Con esta función agregamos el grafico en el mapa para visualizarlo
            mapa.addObject(markerRadius);

        }, false);

Registrando el evento que permitirá cerrar o dejar de dibujar en el mapa:
mapa.addEventListener('tap',function(e){
if(activeCirculo){
                if(activeCloseCircle) {
                    return;
                }
Declarando función para activar botón en el mapa para cerrar o desactivar que se siga graficando:
    actionCloseCircle ();
            Reseteando la variable que muestra el botón para cerrar gráfico:
                activeCloseCircle = true;
})

function actionCloseCircle(){
        $('#canvas > div').append(
            $('<div>').addClass('closeCircle').append(
                $('<div>').css({
  marginTop:'50%', borderRadius: ‘13px’, width: ‘28px’, height: ‘50px’,
  backgroundColor: ‘#1F262A’, cursor: ‘pointer’, color:’#fcfcfc’,
  fontSize:’18px’, fontWeight: ‘700’, textShadow: ‘1px 1px 10px #333’,
  bottom: ‘330px’, zIndex: ‘1’, position: ‘absolute’, textAlign: ‘center’
}).text('X').attr({
                        title: 'Cerrar grafica'
                }).click(function(){
                    activeCircle= false;
                    activeCloseCircle = false;
                    $('.closeCircle').remove();
                })
            )
        )}

En forma de resumen, luego de dibujarse el gráfico en forma de circulo, en la parte derecha del mapa le saldrá un botón con un signo de X, y mientras este dibujando estará ahí, para cuando termine de colocar o redimensionar el circulo, y desea no seguir de clic en el botón X y automáticamente el botón no se muestra más y al dar clic en otro lado del mapa ya el grafico no se mostrará más. Si desea conocer más sobre el artículo o necesita aclarar algunas dudas, pues solo comente y deje sus datos en nuestro sitio.
{ Leer Más }


miércoles, 12 de abril de 2017

Hacer backups programados y con retención


Una de las cosas que no están disponibles con SQL Server es el Agente SQL. El agente nos permite programar tareas que se ejecutarán sobre las bases de datos cuando nosotros queramos. Esta carencia dificulta un poco, por ejemplo, la realización de copias de seguridad, especialmente si queremos mantener un periodo de retención concreto (por ejemplo, las copias de los últimos 7 días).
Por suerte esta carencia en concreto es muy fácil de solucionar, y en este artículo voy a explicar cómo lograrlo de manera sencilla.
Lo primero que tenemos que saber es que todas las ediciones de SQL Server incluyen una utilidad de línea de comandos que nos permite ejecutar instrucciones T-SQL arbitrarias contra cualquier base de datos. Se trata de SQLCMD.exe, generalmente ubicada en esta ruta:
"C:Program FilesMicrosoft SQL Server110ToolsBinnSQLCMD.EXE"
en el caso de SQL Server 2012 Express.
Esta utilidad tiene muchos parámetros que nos permiten controlar su forma de trabajar. Dos que nos interesan especialmente son:
  • -S: nos permite especificar contra qué servidor/instancia se ejecutarán las sentencias T-SQL.
  • -i: permite especificar una ruta a un archivo (normalmente con extensión .sql) que contiene las instrucciones T-SQL que queremos ejecutar contra el servidor. Así podemos incluir scripts más complejos que una simple línea.
Sabiendo la existencia de esta herramienta, conseguir backups gracias a ella es muy sencillo.


1. Construir las instrucciones T-SQL base para hacer el backup


Lo primero es conseguir las comandos T-SQl para hacer un backup. Lo más sencillo es usar las herramientas integradas en el Microsoft SQL Server Management Studio (MSSMS). Ábrelo, busca la base de datos que te interesa copiar en el explorador de objetos y pulsa el botón derecho del ratón sobre ella. En el menú contextual elige la opción de "Tareas·backup…":

Esto abre una nueva ventana desde la que podemos definir cómo queremos realizar el backup:
Desde esta ventana elegimos la base de datos a copiar y la ruta en la que queremos guardar dicha copia de seguridad (normalmente le damos como extensión al archivo .bak, pero puede ser cualquiera o incluso no tener extensión).
Además si pulsamos en la página "Opciones" en el lateral podemos configurar algunas cosas más, como por ejemplo (muy recomendable) que se verifique el backup al terminar de hacerlo:

OJO: la edición Express no soporta la compresión de los backups, así que si seleccionamos esta opción en la lista desplegable de la parte inferior de la figura anterior, se producirá un error al realizar el backup.

Una vez que tengamos seleccionadas todas las opciones que necesitemos, podemos obtener el código necesario para realizar el backup usando el botón "Script" de la parte superior de la ventana anterior. Por defecto nos copiará el código generado a una ventana del MSSMS, así:

Con esto obtendríamos una base de datos que se sobrescribiría en cada nueva copia, Lo interesante de las copias de seguridad es tener copias con una retención de varios días, para poder comprobar datos anteriores o restaurar los datos a un estado anterior

2. Retocar el script para darle una semana de retención

Supongamos que queremos hacer una copia de seguridad diaria y que queremos mantener las copias durante 7 días, de modo que podamos recuperar los datos desde cualquier copia de seguridad de la última semana. Para ello vamos a retocar el script anterior de modo que cada día le cambie el nombre al archivo de copia de seguridad. Para ello vamos a declarar una variable que servirá para guardar la ruta y el nombre del archivo de copia de seguridad, cambiándolo en función, en este caso, del día de la semana en el que nos encontremos. En este caso sería así:
DECLARE @dest nvarchar(255)
SET @dest = 'C:BackupsBBDDSELF_' + CAST(DATEPART(weekday, GETDATE()) AS nvarchar(1)) + '.bak'
La función DATEPART con el valor weekday para el primer parámetro nos devuelve un número para cada día de la semana, empezando por el domingo (un 1)  hasta el sábado (un 7). Como le pasamos la fecha actual (GETDATE) como segundo parámetro lo que obtendremos en la variable @dest es cada día un nombre diferente para la base de datos, añadiéndole el número de día de la semana para obtener nombres estilo: SELF_1.bak, SELF_2.bak, SELF_3.bak y así sucesivamente.
En el script generado por el MSSMS bastará ahora por sustituir la ruta por el nombre de esta variable y ya lo tendremos listo (ojo: hay que susituirlo en dos sitios: en el backup y en la verificación del backup en la parte inferior).
Dado que en caso de que un archivo exista de backup se sobrescribirá, en la práctica con este script lo que conseguimos es que siempre haya 7 copias como máximo en el histórico.

3. Crear un bat para realizar el backup

Ahora que ya tenemos el código necesario para crear las copias de seguridad lo que debemos hacer es crear un archivo .bat que nos permita ejecutar este código T-SQL cuando queramos. Para ello usaremos SQLCMD.EXE, escribiendo esta instrucción:
"C:Program FilesMicrosoft SQL Server110ToolsBinnSQLCMD.EXE" -S SERVIDORINSTANCIA -i "C:BackupsBBDDBackupSELF.sql" >> log.txt
Debemos sustituir SERVIDORINSTANCIA por el nombre de nuestro servidor y la instancia de SQL Server sobre la que queremos trabajar. En el parámetro -i debemos indicar la ruta al archivo .sql con las instrucciones para la copia de seguridad que acabamos de crear.
La última instrucción ">> log.txt" nos permite guardar el resultado de la ejecución en un archivo de texto que podemos consultar para ver cuándo se ha realizado cada copia, cuánto ha tardado y cualquier otro mensaje que se derive de la ejecución del script. E spor eso que me gusta colocarle al principio del script una instrucción más como esta:
PRINT CAST(GETDATE() AS nvarchar) + ' - COPIA DE SEGURIDAD INICIADA AL ARCHIVO: ' + @dest
De este modo aparecerá en el archivo Log.txt un mensaje al principio de cada copia de seguridad indicando la fecha de creación y el nombre del archivo. Podemos incluir del mismo modo cualquier otra información que consideremos relevante.

4. Programar la tarea

Ahora que ya tenemos un script para hacer la copia de seguridad, y además hemos creado un .bat para ejecutarlo, lo único que nos falta es crear una tarea programada para poder lanzarla con la periodicidad que nos convenga (en principio cada día).

Para ello abrimos el administrador de tareas programadas del sistema y creamos una nueva tarea. Lo único que tendremos que hacer es indicar que queremos ejecutar el archivo .bat del paso anterior así como a qué hora del día lo vamos a hacer:

Con esto habremos conseguido que todos los días a las 2:00 de la mañana se realice una copia de seguridad de la base de datos, con una retención de 7 días:

Cada uno de esos archivos se corresponde con la copia de seguridad del domingo (1), lunes (2), martes 83), etc…
Si quisiésemos un periodo de retención de un mes, por ejemplo, sería tan fácil como cambiar el parámetro de DATEPART por "day" de modo que se pusiera el número de día del mes. Podemos jugar con los distintos valores del primer parámetro de DATEPART para conseguir otros periodos, como por ejemplo, si hacemos más de una copia al día, añadirle la hora de modo que tengamos más de un archivo diario.
¡Espero que te resulte útil!
{ Leer Más }


jueves, 6 de abril de 2017

Montar ORM Eloquent en CodeIgniter 3.




En este artículo veremos cómo montar el ORM Eloquent en CodeIgniter 3.0.3.

Para esto es necesario tener la base del framework que la podemos descargar desde la web oficial https://www.codeigniter.com/download, además de tener instalado en nuestra pc el manejador de paquetes composer.

Una vez teniendo esto vamos a proceder con los pasos a seguir para el objetivo mencionado.

Una vez teniendo esto vamos a proceder con los pasos a seguir para el objetivo mencionado.
1.  
    En la carpeta del proyecto dirigirse al fichero application/config/config.php y modificar las siguientes variables dejándolas como se muestra a continuación
1.       $config['composer_autoload'] = 'vendor/autoload.php';
2.       $config['enable_hooks'] = true;

2.      Dentro del terminal dirigirse a la raíz del proyecto y ejecutar el siguiente comando composer require illuminate/database (Esto cargara la última versión estable de Eloquent al proyecto del sitio packagist.org, en caso de hacernos falta alguna versión en específico utilizaríamos composer require illuminate/database 5.2)

Una vez terminada la descarga, crear el fichero EloquentHook.php en la carpeta application/hooks y pegar dentro de este el siguiente contenido:

<?php

use Illuminate\Database\Capsule\Manager as Capsule;

class EloquentHook
{

    /**
     * Guardar la instancia
     * @var object
     */
    protected $instance;

    /**
     * Obtiene la instancia de CI
     */
    private function setInstance()
    {
        $this->instance =& get_instance();
    }

    /**
     * Cargar la BD
     */
    private function loadDatabase()
    {
        $this->instance->load->database();
    }

    /**
     * Returns the instance of the db
     * @return object
     */
    private function getDB()
    {
        return $this->instance->db;
    }

    public function bootEloquent()
    {

        $this->setInstance();

        $this->loadDatabase();

        $config = $this->getDB();

        $capsule = new Capsule;

        $capsule->addConnection([
            'driver'    => 'mysql',
            'host'      => $config->hostname,
            'database'  => $config->database,
            'username'  => $config->username,
            'password'  => $config->password,
            'charset'   => $config->char_set,
            'collation' => $config->dbcollat,
            'prefix'    => $config->dbprefix,
        ]);

        $capsule->setAsGlobal();
        $capsule->bootEloquent();
    }

}

En este fichero las credenciales de acceso a la base de datos son tomadas de application/config/database.php.

       Abrir el fichero application/config/hooks.php y pegar el siguiente código:

$hook['post_controller_constructor'][] = [
    'class'    => 'EloquentHook',
    'function' => 'bootEloquent',
    'filename' => 'EloquentHook.php',
    'filepath' => 'hooks'
];                
2     
   Crear una carpeta en el directorio application con el nombre eloquent (aquí es donde irán todos los modelos eloquent)

 Ahora para cargar automáticamente todos los modelos abrir application/config/autoload.php y al final del fichero pegar lo siguiente:


| -------------------------------------------------------------------
|  Auto-load Eloquent ORM folder
| -------------------------------------------------------------------
 */
spl_autoload_register(function ($class) {
    if (file_exists(APPPATH . 'eloquent/' . $class . '.php')) {
        include APPPATH . 'eloquent/' . $class . '.php';
    }
});                

Ya solo falta crear nuestros modelos eloquent en la carpeta definida para ello y llamarlos desde nuestros controladores.     
Espero les haya servido de ayuda.

{ Leer Más }


IconIconIcon