Mostrando entradas con la etiqueta librerías. Mostrar todas las entradas
Mostrando entradas con la etiqueta librerías. Mostrar todas las entradas

jueves, 1 de octubre de 2015

Jquery - Ramdom Color

No hay comentarios : Posted by daycry at 16:07 Labels: , , , ,

Esta es un librería para generar colores de forma aleatoria.

El código se puede obtener desde GitHub:
https://github.com/daycry/randomColor.git

La utilización es muy sencilla, y aquí os pongo un ejemplo: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>just.RandomColor demo - JavaScript random color generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="just.RandomColor.js"></script>
   <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 15px;
            overflow: hidden;
            margin: 3px;
        }

        .box {
            width: 20px;
            height: 20px;
            float: left;
            margin: 1px;
        }

        .form {
            position: fixed;
            width: 200px;
            padding: 20px;
            right: 10px;
            top: 50px;
            left: 50%;
            margin-left: -120px;
            background-color: #fff;
            color: #333;
        }

        button,
        .link {
            background-color: #0099FF;
            color: #fff;
            width: 200px;
            line-height: 40px;
            font-size: 16px;
            border: none;
            display: block;
            text-align: center;
            text-decoration: none;
            padding: 0;
            margin-top: 10px;
            cursor: pointer;
        }


    </style>
</head>
<body>

    <div class="holder"></div>
    <div class="form">
        <button id="refresh">Refresh</button>
    </div>

    <script>

    var total;

    function init () {

        var width = $(document).width(),
            height = $(document).height(),
            size = 20,
            x = width / size,
            y = height / size;
        total = x * y;
        
        if (total > 2500) {
            total = 2500;
        }

        draw();

    }

    function draw () {

        var c = new just.RandomColor();

        $('.holder').html('');

        for (var i = 0; i < total; i++) {
        
            $('.holder').append($('<div />').addClass('box').css('background-color', c.refresh().toCSS()));

        }

    }

    $('#refresh').click( function () {
        draw();
    });

    init();

    </script>

</body>
</html>
Read More

Jquery - Coin Slider

No hay comentarios : Posted by daycry at 15:37 Labels: , , , , , , ,

Este plugin es realmente útil para generar animaciones en las transiciones de las imágenes dentro de un contenedor.

El plugin se puede descargar desde el siguiente link:
http://workshop.rs/projects/coin-slider/

Para integrarlo en nuestra página web es realmente sencillo:

Añadimos las referencias de nuestros ficheros en el HTML
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />
Seguidamente creamos un contenedor que contendrá todas las imágenes que quedamos añadir al slider. 
<div class="animacion" id="animacion">
<img src="../img/foto1.jpg" width="600" height="450" />
<img src="../img/foto2.jpg" width="600" height="450" />
<img src="../img/foto3.jpg" width="600" height="450" />
<img src="../img/foto4.jpg" width="600" height="450" />
<img src="../img/foto5.jpg" width="600" height="450" />
</div>
Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.

Como último paso habrá que aplicar al contenedor "animacion" el plugin. 
<script type="text/javascript">
$(document).ready(function(){
 $('#animacion').coinslider();
});
</script>
Read More

miércoles, 30 de septiembre de 2015

Jquery - Fancy Box

No hay comentarios : Posted by daycry at 9:57 Labels: , , , , , , , ,

Fancy Box una librería js con el que podemos abrir imágenes, páginas web, vídeos, o lo que se nos ocurra, de forma muy elegante, en ventanas tipo Popup, con jQuery.
Esta librería la podemos descargar desde la siguiente página web: Enlace

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.fancybox.css" />

<!-- Para disponer de nuevas transiciones -->
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

<!-- Para navegar entre los elementos de la galería-->
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<!-- css -->
<link href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"></link>
Para hacerlo funcionar solo tenemos que indicar un "id" o "class" a nuestros enlaces para aplicar la librería fancy Box sobre estos elementos.

En este caso hemos utilizado el enlace con clase class="fancyExample" sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace: 
<a class="fancyExample" href="../img/foto1.jpg" title="Imagen simple"><img src="../img/foto1p.jpg" width="200" height="150" /></a>
Ahora aplicamos la librería fancy Box a la clase que hemos creado. 
<script type="text/javascript">
$(document).ready(function(){
 $(".fancyExample").fancybox({ });
});
</script>
En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace: 
<a class="fancyExample" href="ejemplo.html">Abrir página web externa - ejemplo.html</a>

<script type="text/javascript">
$(document).ready(function(){
 $(".fancyExample").fancybox({
  'autoScale'  : false,
  'transitionIn'  : 'none',
  'transitionOut'  : 'none',
  'width'   : 680,
  'height'  : 450,
  'type'   : 'iframe'
 });
});
</script>
En la página web existe mucha documentación sobre como personalizar la librería según nuestras necesidades, ya que es personalizable al 100% de forma sencilla
Read More

jueves, 7 de agosto de 2014

Codeigniter - Múltiples conexiones a base de datos

No hay comentarios : Posted by daycry at 15:46 Labels: , ,
Este tema es uno de los temas primordiales sobre el framework Codeigniter, ya que en alguna ocación nos hemos visto obligados a recoger datos de diferentes bases de datos, o incluso diferentes tipos de bases de datos como por ejemplo, MySQL y Oracle, o incluso contra dos bases de datos MySQL.

El siguiente ejemplo ilustrará como conectar una aplicación Codeigniter a diferentes tipos de bases de datos:

El archivo que tenemos que modificar se llama database.php, que se encuentra dentro de la carpeta config, que es el archivo que contiene los datos de conexión a diferentes bases de datos.


$active_group = 'default';
$active_record = TRUE;

$db['default']['hostname'] = 'host';
$db['default']['username'] = 'user';
$db['default']['password'] = 'pass';
$db['default']['database'] = 'bbdd';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;


$db['drupal']['hostname'] = 'host';
$db['drupal']['username'] = 'user';
$db['drupal']['password'] = 'pass';
$db['drupal']['database'] = 'bbdd';
$db['drupal']['dbdriver'] = 'mysql';
$db['drupal']['dbprefix'] = '';
$db['drupal']['pconnect'] = TRUE;
$db['drupal']['db_debug'] = TRUE;
$db['drupal']['cache_on'] = FALSE;
$db['drupal']['cachedir'] = '';
$db['drupal']['char_set'] = 'utf8';
$db['drupal']['dbcollat'] = 'utf8_general_ci';
$db['drupal']['swap_pre'] = '';
$db['drupal']['autoinit'] = TRUE;
$db['drupal']['stricton'] = FALSE;

$db['oracle']['hostname'] = 'host:1526/SID';
$db['oracle']['username'] = 'user';
$db['oracle']['password'] = 'pass';
$db['oracle']['database'] = '';
$db['oracle']['dbdriver'] = 'oci8';

El siguiente fichero muestra una configuración contra 3 bases de datos diferentes, 2 MySQL de las cuales una es un Drupal, y una conexión hacia una base de datos Oracle.

Como realizar las conexiones

Para realizar las conexiones yo aconsejo crear un archivo model por cada tipo de base de datos, ya que tendriamos perfectamente diferenciadas y ordenadas las consultas a cada tipo de base de datos.

Ejemplos

Imaginaros que hemos creado un archivo drupal_model.php que se encargará de realizar la conexiones a la base de datos de drupal.
El contenido de ese archivo sería el siguiente:


<?php
class drupal_model extends CI_Model {

 private $db_b;

 function __construct(){
  $this->db_b = $this->load->database('drupal', TRUE); 
 }
 

 public function insert(){
  $data = array('nombre' => 'Prueba');
  $this->db_b->insert('tabla', $data);
  if( $this->db_b->affected_rows() > 0){
   return $this->db_b->insert_id();
  }else{
   return 0;
  } 
 }
}

En esta clase hemos declarado una variable privada que contendrá el Id de conexión, que utilizaran los métodos para poderse conectar.

En el constructor de la clase cargamos la librería database pero indicando la base de datos Drupal, que es el mismo nombre que le hemos puesto en el archivo de configuración.

La función insert realizará una inserción en la base de datos, y devolverá el id del campo PK y autoincrement de dicha tabla, si la inserción ha sido fallida, devolverá un 0 para poder tratar el error en la aplicación.

El ejemplo para la conexión default sería idéntico a la clase drupal, simplemente modificando la base de datos a default, o simplemente escribiendo esta linea:

$this->db_b = $this->load->database();

Esto sólo se puede hacer cuando hay definida una conexión default, ya que si no se indica la base de datos, siempre cogerá los datos de la configuración de default.

Ejemplo Conexión Oracle

A este fichero le hemos llamado oracle_model.php, y contendrá las consultas a la base de datos Oracle.
<?php
class oracle_model extends CI_Model {

 private $db_b;

 function __construct(){
  $this->db_b = $this->load->database('oracle', TRUE); 
 }
 

 public function get(){
  $query = $this->db_b->query("query de consulta");
  $result = $query->result();
  return $result;
 }
}

Este ejmplo podemos ver la que estructura de la clase es la misma, con la variable privada para la conexión, cargando la base de datos en el contructor, y creando el método para una consulta.

En los ficheros controladores de Codeigniter se tratan igual los datos independientemente del tipo de conexión que utilicemos.

Por ejemplo:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Gestor extends CI_Controller {

 public function __construct()
 {
  parent::__construct();
 }


 public function index()
 {
  $datos['drupal'] = $this->drupal_model->insert();
  $datos['oracle'] = $this->oracle_model->get();
 }
}

Este es un ejemplo absurdo, pero se puede comprender como realizar múltiples conexiones con una misma aplicación de Codeigniter.

Para mas información se puede consultar la librería database de Codeigniter.

Read More

Clase Email PHPMailer - Codeigniter

No hay comentarios : Posted by daycry at 10:45 Labels: , , ,
Todos hemos visto que casi el 100% de las páginas web, tienen algún sistema de correo electrónico implementado, a pesar de que es un servicio muy útil y cómodo, también es un servicio muy fácil de implementar.

En siguiente ejemplo es el código que necesitamos para implementar un sistema de email.
Simplemente copiando y pegando, y modificando los parámetros por los que necesitéis ya tendréis un sistema de email basado en Codeigniter.


Antes de todo tendríamos que descargar las librerías de PHPMailer desde la web.
Descargar

Una vez tenemos descargado los ficheros, los copiamos dentro de la carpeta third_party, que se encuentra dentro de nuestra aplicación.

Seguidamente creamos nuestra librería que cargará la librería PHPMailer en nuestro proyecto.

require_once APPPATH."/third_party/PHPMailer/class.phpmailer.php"; 
 
class My_PHPMailer extends PHPMailer { 
    public function __construct() { 
        parent::__construct(); 
    } 
}

Este código lo deberemos de guardar en la carpeta libraries con el nombre de: my_phpmailer.php

 Definitivamente este es el código que deberemos de poner en nuestro controlador.

 
$textEmail = "<p>Contenido del <i>email</i> en formato <b>html</b></p>";
  
$this->load->library('my_phpmailer');

$this->my_phpmailer->IsSMTP(); // establecemos que utilizaremos SMTP
$this->my_phpmailer->IsHTML(true); // indicamos si el contenido es en html
$this->my_phpmailer->SMTPAuth   = true;
$this->my_phpmailer->Host       = ""; //indicar el servidor smtp
$this->my_phpmailer->Port       = 25; //normalmente es el 25                 
$this->my_phpmailer->Username   = ""; //usuario smtp
$this->my_phpmailer->Password   = ""; //password      
$this->my_phpmailer->SetFrom('cuenta@correo.es', "Alias del correo");  
$this->my_phpmailer->Subject    = "Subject"; 
$this->my_phpmailer->Body      = $textEmail;
   
$this->my_phpmailer->AddAddress("dirección de correo", "Alias");
$this->my_phpmailer->AddCC("dirección en copia", 'Alias');

if(!$this->my_phpmailer->Send()) {
 log_message('info', "error envía de email" . $this->my_phpmailer->ErrorInfo);
} else {
 log_message('info', "enviado correctamente");
   }

Como podéis comprobar carga la librería que hemos creado que es la que se encarga de cargar las clases de PHPMailer, y nos permite utilizar esta clase como si fuera una librería interna de Codeigniter, con la misma sintaxis.

$this->my_phpmailer //llamando al método que nos interese



Read More

miércoles, 6 de agosto de 2014

TinyMCE en Codeigniter

No hay comentarios : Posted by daycry at 9:24 Labels: , , , , , , ,
En este post vamos a ver como integrar nuestro Editor TinyMCE en nuestro TextArea.
Este editor permite almacenar en formato html el contenido de nuestro textarea, de forma que quede con un estilo mucho mas atractivo al pintarlo por pantalla, y no quede como un texto llano.

Lo primero que hay que hacer es descargar las librerías de la página oficial:
Descargar

Una vez descargamos, el conjunto de archivos los podemos dejar en una carpeta en el root de Codeigniter, de esa forma si desarrollamos otra aplicación podremos acceder a estos ficheros sin necesidad de volverlos a poner en la nueva aplicación.

La dirección donde dejaría los archivos es la siguiente:

<?php echo base_url();?>public/tinymce/tinymce.min.js

Que sería en:

http://localhost/nombreProyecto/public/tinymce/

Dentro de esa carpeta estarían todos los ficheros que descargamos de la página.

Como Utilizar el plugin

Para poder utilizar el plugin en nuestra aplicación de Codeigniter, simplemente deberíamos incluir en la vista que queramos que aparezca, dicha librería.
Como por ejemplo el código PHP mostrado anterior, esta ruta puede cambiar dependiendo de donde estén ubicados los ficheros dentro del servidor.

<script src='<?php echo base_url();?>public/tinymce/tinymce.min.js'></script>

Ejemplo de Vista en Codeigniter


<!DOCTYPE HTML>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="daycryweb.blogspot.com" />
    <title>TinyMCE en Codeigniter</title>
 
    <script type="text/javascript" src="<?php echo base_url();?>public/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
    tinymce.init({
        selector: "textarea"
     });
    </script>
 
</head>
 
<body>
     
    <form method="post">
        <textarea id="mensaje"></textarea>
    </form>
 
</body>
</html>

Con el ejemplo anterior, le estamos indicando que todos los campos de texto del tipo "TextArea", tendrán las características que incluye el plugin.

Existen bastantes configuraciones para el plugin, incluso se pueden incluir otros plugins dentro de las librerías TinyMCE, por ese motivo os voy a dejar la url donde podréis encontrar varios ejemplos de configuraciones mas avanzadas.

Configuraciones avanzadas


Read More

martes, 5 de agosto de 2014

Encriptación y desencriptación PHP

No hay comentarios : Posted by daycry at 10:11 Labels: , , , ,
Voy a dedicarle un post a este tema, ya que es de los más importantes en tema de programación segura, y es el tema de la encriptación de Datos.

Hay varios tipos de encriptación ya sean unidireccionales, que no se puede saber el valor de origen, como por ejemplo md5, sha1, y bidireccionales, que son los que pemiten volver a la cadena inicial a través del hash.
El hash es  la cadena encriptada.

El ejemplo que voy a poner ahora, es una clase que tras pasar un parámetro, lo encriptará o lo desencriptará dependiendo de la función que utilicemos.
Este ejemplo es del tipo bidireccional, ya que te permite encriptar la cadena y volver a su estado inicial.

<?php
/**
* Description of Encrypter
*
*/
class Encrypter {
 
    private static $Key = "daycry";
 
    public static function encrypt ($input) {
        $output = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, md5(Encrypter::$Key), $input, MCRYPT_MODE_CBC, md5(md5(Encrypter::$Key))));
        return $output;
    }
 
    public static function decrypt ($input) {
        $output = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, md5(Encrypter::$Key), base64_decode($input), MCRYPT_MODE_CBC, md5(md5(Encrypter::$Key))), "\0");
        return $output;
    }
 
}

$texto = "Texto a encriptar";
 
// Encriptamos el texto
$texto_encriptado = Encrypter::encrypt($texto);
 
// Desencriptamos el texto
$texto_original = Encrypter::decrypt($texto_encriptado);
 
if ($texto == $texto_original) echo 'Encriptación / Desencriptación realizada correctamente.';

Como podéis ver utiliza el módulo de mcrypt de PHP5 que debe de estar instalado, sino no funcionará este código.

Read More

lunes, 4 de agosto de 2014

Creación de librerías en Codeigniter

No hay comentarios : Posted by daycry at 16:21 Labels: , , ,
Las librerías son clases que permiten la re utilización de código para evitar duplicidades, ya que una librería no es más que un conjunto de funciones que se pueden llegar a utilizar varias veces en un mismo código.

Las librerías en Codeigniter tienen esa misma función, ya que el core de dicho framework ya viene previsto de librerías muy útiles como por ejemplo la conexión a la base de datos, el envío de emails, encriptación de cadenas, entre otras.

Aunque estas librerías ya esten hechas, el framework nos permite crear librerías nuevas o incluso extender esa librerías en el caso de que quisiéramos añadir alguna funcionalidad extra.

Todas las clases que desarrollemos tienen que estar situadas dentro de la carpeta: application/libraries

 Por convención si nuestra clase tiene que tener el nombre de email, el fichero se debería de llamar: MY_library.php.
(Mas adelante os explicaré el motivo).

 La estructura de dichas clases es la siguiente:

 En el caso de que sea una librería propia, que no extienda de ninguna librería del core sería de la siguiente forma:

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 

class MY_Library { 
     public function __construct($params) 
     { 
          // Do something with $params 
     } 
} 

?>

En el caso de que nuestra librería amplie la funcionalidades de una librería del core del Codeigniter, la declaración de la clase es parecida a la declaración anterior con una sola diferencia, se ha de añadir el concepto extends.

 
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 

class MY_Email extends CI_Email { 
     public function __construct() 
     { 
          parent::__construct();       
     } 
} 

Una vez declaradas las librerías, lo que se debe hacer es cargarlas en el framework.
Se puede hacer de dos formas diferentes:

  1. Añadiendo la librería en el archivo de configuración autoload.php
  2. Cargando la librería en el propio controlador donde se vaya a utilizar
Si es una librería propio que no extiende de ninguna clase de Codeigniter, la forma de cargar la librería es la siguiente:

$this->load->library('MY_Library'); //desde el controlador

$autoload['libraries'] = array('MY_Library'); //desde el fichero de configuración autoload.php

En cambio si la librería extiende de una clase de Codeigniter como por ejemplo la librería email, que ya existe en el core, simplemente se ha de cargar llamando a la librería por su nombre original.

$this->load->library('email'); //desde el controlador
$autoload['libraries'] = array('email'); //desde el fichero de configuración autoload.php

Porque el prefijo MY_

El prefijo MY_ es un prefijo que viene dado en la configuración de Codeigniter en el archivo de configuración config.php.

$config['subclass_prefix'] = 'MY_';

Este prefijo es modificable a pesar de que yo aconsejo dejarlo por el que viene por defecto, y lo utiliza Codeigniter para saber si es una clase propia que extiende de una clase core.
Aunque la primera librería que hemos creado MY_Library no extiende de ninguna, aconsejo que todas las librerías que desarrolléis tengan la misma forma, para no causar confuciones.
Read More
Suscribirse a: Entradas ( Atom )