Qué es?

softrDB es una pequeña clase hecha en PHP para facilitar el acceso a base de datos. Funciona como una capa de persistencia.

Cómo funciona?

softrDB gestiona un archivo con extensión .json, ya que dicho archivo está escrito en esa notación. Ésta contiene en formato JSON todos los queries que se va a utilizar en una aplicación web PHP. Una vez instanceada la clase softrDB, se pueden ejecutar los métodos de la misma, y traer información de la base de datos. Además permite la utilización de argumentos, que es posible pasarle al query que se desea ejecutar del archivo con extensión JSON.

Elementos que lo conforman

• cn.php
  El archivo de configuración de softrDB y conexión con base de datos.
• JSON.php
  Libreria desarrollada por http://json.org/, que facilita el uso de estructuras JSON.
• softrDB.php
  La clase con los métodos para la capa de persistencia.
• queries.php
  Archivo en notación JSON con los queries, clasificados en módulos, a utilizar en el proyecto.

Configuración

1. En el archivo cn.php:
   • Colocar la ruta donde se encuentran los archivos de la capa de Persistencia. Por default se verá $path=’Persistence/’, en donde ‘Persistence/’ es el valor que deberá cambiarse en caso de que los archivos sean ubicados en una carpeta distinta
   • Colocar los datos de la base de datos.
     $hostname = “localhost”;
     $database = “ejemplo01″;
     $username = “root”;
     $password = “”;
2. Colocar los queries el archivo queries.json . Deben tomarse en cuenta las siguientes consideraciones:
   • Iniciar el archivo con ‘{’ y terminar con ‘}’ para indicar que utilizaremos notación JSON
   • En primer término irán los nombres de los módulos en que se clasificaran los queries, éstos no van dentro de comillas simples ni dobles. Posteriormente, dentro de cada módulo los queries, que se compondrán de un ID con las mismas caracteristicas de los nombres de los módulos, seguidos de su valor que es propiamente el query.
   • Dentro del query, se pueden poner argumentos, que serán sustituídos con los valores al llamar el método. La nomenclatura a utilizar es ‘?A’ para el primer argumento, ‘?B’ para el segundo, ‘?C’ para el tercero, y así para cada letra del alfabeto. Se puede utilizar más de una vez un mismo argumento, es decir, ?A puede aparecer muchas veces en un mismo query, conservando el valor que se le haya mandado en un inicio.
   • Ver el ejemplo para comprender lo anterior mejor:
     

     
     {
     	customer:{
     		CUS_L01:’SELECT * FROM mcustomer;’,
     		CUS_L02:’SELECT * FROM mcustomer C INNER JOIN ccountry P ON C.cCou_ID=P.cCou_ID;’,
     		CUS_L03:’SELECT * FROM mcustomer limit 5;’
     	},
     	country:{
     		COU_L01:’SELECT * FROM ccountry;’,
     		COU_L02:’SELECT * FROM ccountry WHERE cCou_Name like “%?A%”;’,
     		COU_U01:’UPDATE ccountry SET cCou_Name=”JAPON” WHERE cCou_ID=?A LIMIT 1;’
     	}
     }
                         

     En este ejemplo, tenemos dos módulos: customer y country. cada uno de ellos tiene 3 queries. Se propone la nomenclatura para los nombres de identificación de los queries como sigue: NOM_NXX, donde “NOM” son 3 letras relacionadas con el nombre del módulo, “N” es una letra que nos indica qué tipo de query és (L=LOAD o SELECT, U=UPDATE, I=INSERT, D=DELETE), y “XX” es un número consecutivo. Estos nombre de ID de los queries se sugieren para mayor identificación, pero no tiene que ver con el funcionamiento de la clase.

Utilización

• Requerir el archivo cn.php: require “Persistence/cn.php”;
• Instancear la clase: $DB=new softrDB(’Persistence/queries.json’,'ejemplo01′);
  El primer parámetro es la ruta donde se encuentra el archivo de queries con extensión .json y el segundo argumento es opcional, en caso de que se quiera poner un identificador para poder hacer uso de más de un archivo de queries con extensión .json
• Ejecutar el query. $rsCustomers=$DB->loadQuery(”customer”,”CUS_L01″);
  El primer parámetro es el módulo en el que se clasificó los queries, y el segundo argumento es el nombre del query a ejecutar.
• $rsCustomers en el punto anterior, es una variable que recibirá un arreglo con los datos que haya regresado el query. Esto es sólo en el caso de un SELECT, para los casos de UPDATE, INSERT o DELETE, no se requiere asignar a una variable. basta con $DB->loadQuery(”country”,”COU_U01″);. En el caso de SELECT, una vez asignado a una variable, ésta recibirá un arreglo con todos los datos devueltos por el query. Si ejecutamos $rsCustomers=$DB->loadQuery(”customer”,”CUS_L01″);, ahora $rsCustomers será un arreglo con la información de la tabla mcustomer, y si lo recorremos así

  <?php
  	$rsCustomers=$DB->loadQuery("customer","CUS_L01");
  	foreach($rsCustomers as $item){?>
  		nombre: <strong><?=$item['mCus_Name'];?></strong>
  <?php }?>

  Obtendremos:

  nombre: Daniel Niquet
  nombre: Andrés Gutierrez
  nombre: Joan Castro
  nombre: Leonardo Valenzuela
  nombre: Luis Antonio Germon

  nombre: Lorenzo Prieto
  nombre: Andrea Lozano
  nombre: Ana Torres
  nombre: Juan Lopez
  nombre: Lorena Gasca

Métodos de la clase

• $DB->loadQuery(”mod”,”query”,”parametro1|parametro2|parametro3″)
  Ejecuta un query. El primer argumento es el módulo del query, el segundo el ID del query a ejecutar, y el tercero los argumentos, los cuales se enviarán separados por el caracter PIPE “|”. Ejemplo: $DB->loadQuery(”country”,”COU_U01″,”2″). Al llamar a COU_U01 se referirá a ‘UPDATE ccountry SET cCou_Name=”JAPON” WHERE cCou_ID=?A;’, y al sustituir el parámetro enviado quedará como ‘UPDATE ccountry SET cCou_Name=”JAPON” WHERE cCou_ID=2;’
• $DB->outQuery()
  Función para ayuda de debug. Imprime el query formado en pantalla. Útil sobre todo en el uso de parámetros. Si ejecutamos COU_L02 de country, al usar $DB->outQuery() tendremos:
  
  SELECT * FROM ccountry WHERE cCou_Name like “%niq%”;
  
• $DB->outResultSet()
  Función para ayuda de debug. Imprime todo el resultset en pantalla. Útil sobre todo en el uso de parámetros. Por ejemplo, si ejecutamos CUS_L01 de customer, su outResultSet será:

  Array
  (
      [mCus_ID] => 1
      [mCus_Name] => Daniel Niquet
      [cCou_ID] => 1
  )
  
  

  Array
  (
      [mCus_ID] => 2
      [mCus_Name] => Andrés Gutierrez
      [cCou_ID] => 2
  )
  

  Array
  (
      [mCus_ID] => 3
      [mCus_Name] => Joan Castro
      [cCou_ID] => 1
  )
  

  Array
  (
      [mCus_ID] => 4
      [mCus_Name] => Leonardo Valenzuela
      [cCou_ID] => 1
  )
  
  

  Array
  (
      [mCus_ID] => 5
      [mCus_Name] => Luis Antonio Germon
      [cCou_ID] => 3
  )
  

  Array
  (
      [mCus_ID] => 6
      [mCus_Name] => Lorenzo Prieto
      [cCou_ID] => 3
  )
  

  Array
  (
      [mCus_ID] => 7
      [mCus_Name] => Andrea Lozano
      [cCou_ID] => 4
  )
  
  

  Array
  (
      [mCus_ID] => 8
      [mCus_Name] => Ana Torres
      [cCou_ID] => 4
  )
  

  Array
  (
      [mCus_ID] => 9
      [mCus_Name] => Juan Lopez
      [cCou_ID] => 3
  )
  

  Array
  (
      [mCus_ID] => 10
      [mCus_Name] => Lorena Gasca
      [cCou_ID] => 3
  )
  
  

Descarga

softrDB, ejemplos y script de BD de ejemplo

Ejemplos (para verse en el código php)

Características:

• Ligero. 1.9kb
• No obstrusivo. Si deshabilitas Javascript, el menú contextual propio del navegador aparecerá normalmente.
• Cross-browser. Soportado por la mayoría de los navegadores. (En el caso de opera, es soportado con ctrl+click izquierdo)
• Personalizable. Utiliza hojas de estilo externas, para manejar el estilo al gusto o según el estilo de la página donde se usará. Es posible utilizar temas predifinidos, y cambiarlos en el momento es que se requiera.
• Rápido. El menú se crea sólo al cargar la página, y luego unicamente cambia de posición.

Especificaciones

• Requiere MooTools v1.11
  • Dependencias:
    • Core: core.js
    • Class: Class.js, Class.Extras.js
    • Native: Array.js, String.js, Function.js, Number.js, Element.js
    • Element: Element.Event.js, Element.Filters.js, Element.Selectors.js, Element.Dimensions.js
    • Window: Window.Size.js, Window.DomReady.js
    • Effects: Fx.Base.js, Fx.CSS.js, Fx.Style.js
• Probado en: Internet explorer 6, safari 3.03, Firefox 2.0.0.6, Opera 9.23. Todos en versiones para windows.
• Última modificación: 30 de Agosto de 2007.
• Autor: Daniel Niquet.
• versión: 0.6

Instalación y uso

• Descarga contextMenoo, y agrega en la sección HEAD de tu proyecto
  <script type=”text/javascript” src=”js/mootools.v1.11.js”></script>
  <script type=”text/javascript” src=”js/contextMenoo.js”></script>
• Agrega el estilo. Puedes hacerlo con el estilo que viene por default
  <link rel=”stylesheet” href=”contextMenoo.css” type=”text/css” media=”screen” />
• Crea un arreglo de los enlaces a mostrar en el menú.
  var myLinks = [
  {name: ‘Back’, callback: function(){alert(’back function called’)}},
  {name: ‘Forward’, callback: function(){alert(’Forward function called’)}},
  {separator: true},
  {name: ‘Reload’, callback: function(){alert(’Reload function called’)}},
  {name: ‘Disabled option’, disabled: true},
  {name: ‘Toggle previous option’, callback: function(){
  var item = oLinks.find(function(l){return l.name == ‘Disabled option’});
  item.disabled = item.disabled == false ? true : false;
  }}
  ]
• Crea la instancia para la clase contextMenoo, y pasale como parametro el arreglo definido en el punto anterior.
  <script type=”text/javascript”>
  new contextMenoo({
  selector: ‘.contextmenu’ // clase del elemento al hacer click
  className: ‘myContextMenu’, // clase para estilizar el menu
  menuItems: myLinks // el arreglo de enlaces
  })
  </script>

Ejemplo Funcionando

Descarga

• ZIP con el MooTools a la medida, ejemplos y contextMenoo (15 kb)
  DESCARGAR contextMenoo

Cambios

•  0.6:
  • Bug corregido en internet explorer. Al dar click derecho sobre una parte fuera del elemento, salía el menú contextual propio del navegador, pero no desaparecía contextMenoo.

softrCalendar es un script para generar los famosos “date picker” para seleccionar una fecha. Está inicialmente inspirado en el date picker de P.O.R.K., pero corregido y aumentado. La parte visual se inspira en el date picker de zapatec, pero sin ocupar los 103kb que el suyo ocupa.

softrCalendar está disponible en las versiones 1.0 (para aquellos que ya tengan un proyecto con esta versión) y 1.11 (mejorada y optimizada) de MooTools.

Tamaño:

• versión 1.11: 4.57 kb comprimido y 7.68 kb sin comprimir.
• versión 1.0: 4.18 kb comprimido y 7 kb sin comprimir.

Requerimientos:

• Mootools 1.0 | Mootools 1.11
  • Dependencias:
    • Core - Core.js
    • Class - Class.js, Class.Extras.js
    • Native - Array.js, String.js, Function.js, Number.js, Element.js
    • Element - Element.Event.js, Element.Dimensions.js
    • Drag - Drag.Base.js, Drag.Move.js

Compatibilidad:

• Se ha probado en Mozilla Firefox e Internet Explorer 6

Descarga:

• softrCalendar 1.0 (librería comprimida y sin comprimir, MooTools y ejemplos) - 23kb (zip)
• softrCalendar 1.11 (librería comprimida y sin comprimir, MooTools y ejemplos) - 17kb (zip)

Cambios:

• Corregido bug para poder seleccionar el día en que comienza la semana
  $(’btnFecha’).addEvent(’click’,function(ev){new softrCalendar(”txtFecha”, {StartDay : 1}, ev);});

Instalación y uso:

1. Copiar la librería softrCalendar (softrCalendarSM.js) a tu proyecto, y hacer referencia a éste en la sección HEAD.
   • <script type=”text/javascript” language=”javascript” src=”mootools.v1.11.js”></script>
2. Llamar al método ‘domready’ del objeto window, para instancear softrCalendar. window.addEvent(’domready’,Site.start);
3. Llamar instancia de softrCalendar.
   1. var Site={
      start:function(){
      

      //El parámetro ev sólo es indispensable en la versión 1.11, y sirve para ubicar el calendario al dar click.

      $(’btnFecha’).addEvent(’click’,function(ev){new softrCalendar(”txtFecha”,ev);});
      }
      }

4. Personalizar el calendario a tu gusto en la hoja de estilo, softrCalendar.css
   

Documentación:

• softrCalendarSM.js
• clase: new softrRounded(/*string*/ targetInput, /*event*/ event);
  • targetInput: Es el elemento html input de tipo texto, que recibirá la fecha de softrCalendar.
  • event: Es el objeto event generado por el evento click de la imagen o elemento que funge como seleccionador.
• Ejemplos de la sintáxis:
  new softrCalendar(”txtFecha”,ev); // Para la versión 1.11
  new softrCalendar(”txtFecha”); // Para la versión 1.0

Ejemplo Funcionando

Requerimientos:

• Mootools 1.11 (core, class, native, element, window)
• Google groups beta

Compatibilidad:

• Se ha probado en Mozilla Firefox e Internet Explorer 6

Descarga:

• softrRounded 0.1 (librería, MooTools y ejemplos) - 22kb
  

Instalación y uso:

1. Copiar la librería softrRounded (softrRounded.js) a tu proyecto
2. Llamar al método ‘domready’ del objeto window, para comenzar a instancear softrRounded en tantos elementos necesites.
   window.addEvent(’domready’,Site.start);
   1. Instancear para cada elemento a redondear la clase softrRounded con sus respectivas opciones.var Site={
      start:function(){
      new softrRounded(’div1′,{’tl’:{’w':30,’h':30},’bg’:'7394B8′,’color’:'687D95′});
      new softrRounded(’div2′,{’tr’:{ ‘w’:50, ‘h’:50},’bl’:{ ‘w’:50, ‘h’:50},’bg’:'7394B8′, ‘color’:'596B80′});
      new softrRounded(’div3′,{’tr’:{ ‘w’:30, ‘h’:30},’bl’:{ ‘w’:30, ‘h’:30},’br’:{ ‘w’:30, ‘h’:30},’bg’:'7394B8′,’color’:'CFD9E6′});
      new softrRounded(’div4′,{’all’:{ ‘w’:130, ‘h’:130},’bg’:'7394B8′,’color’:'FFB900′});
      }
      };

Documentación:

• softrRounded.js
• clase: new softrRounded(/*string*/ element, /*object*/ options);
  • element:
    El elemento DIV o HTML a redondear. Puede utilizarse un ID, como ‘div1′ ó ‘div2′, para redondear objeto por objeto. También es posible redondear colecciones por medio de una clase css, como ‘.clase1′ ó ‘.clase2′.
  • options:
    Recibe un objeto compuesto de:
    • La o las esquinas a redondear. Ésta debe llamarse:
      • all(todas)|tl(top left)|tr(top right)|bl(bottom left)|br(bottom right) , y debe recibir como valor otro objeto compuesto de -w- width y -h- height.
        Ejemplo:
        ‘tl’:{’w':30,’h':30}
        ‘all’:{ ‘w’:130, ‘h’:130}
    • La propiedad -bg- con el color de fondo de la esquina redondeada.
      Ejemplo:
      ‘bg’:'7394B8′
    • La propiedad -color- con el color de la esquina redondeada.
      Ejemplo:
      ‘color’:'FFB900′
• Ejemplos de la sintáxis:

new softrRounded(’div1′,{’tl’:{’w':30,’h':30},’bg’:'7394B8′,’color’:'687D95′});
new softrRounded(’div2′,{’tr’:{ ‘w’:50, ‘h’:50},’bl’:{ ‘w’:50, ‘h’:50},’bg’:'7394B8′, ‘color’:'596B80′});
new softrRounded(’div3′,{’tr’:{ ‘w’:30, ‘h’:30},’bl’:{ ‘w’:30, ‘h’:30},’br’:{ ‘w’:30, ‘h’:30},’bg’:'7394B8′,’color’:'CFD9E6′});
new softrRounded(’div4′,{’all’:{ ‘w’:130, ‘h’:130},’bg’:'7394B8′,’color’:'FFB900′});

Ver ejemplo funcionando

Actualización: Lista la versión 0.2.0!!!!

plOOtr es una librerí­a libre y gratuita para generar gráficas web utilizando el canvas html, y que está integrado totalmente con MooTools. Es realmente una adaptación de la librerí­a Plotr, la cual está integrada con Prototype, y que a su vez es una adaptación de PlotKit, que funciona con Mochikit.

Requerimientos:

• MooTools 1.1 (no sé si con alguna versión más baja, sólo lo he probado con 1.1)
• ExplorerCanvas

Compatibilidad:

• Se ha probado en Mozilla Firefox e Internet Explorer 6

Cambios:

• versión 0.20:
  • Optimización de código
  • Pueden usarse sombras
  • Gráficas de líneas sin relleno
  • Se agrega funcionalidad para mostrar leyendas
  • Se agrega a las gráficas la propiedad “showInSide“. Por default está en false y las leyendas se muestran en la parte inferior de las gráficas, al ponerla en true se muestra en la parte de un costado, a la derecha.

Descarga:

• plOOtr 0.2.0 (librerias con código fuente y ejemplos en zip - 54kb
• plOOtr 0.14 (librerias y ejemplos en zip - 52kb

Instalación:

1. Copiar la carpeta lib a tu proyecto
2. Hacer la referencia a las librerias en la sección HEAD del documento.
   <script src=”lib/mootools/MT11.js” type=”text/javascript”></script>
   <script src=”lib/plotr/excanvas.js” type=”text/javascript”></script>
   <script src=”lib/plotr/Plotr.js” type=”text/javascript”></script>
3. Poner el contenedor donde se visualizará el gráfico<div class=”graph”><canvas id=”plotr1″ height=”500″ width=”600″></canvas></div>
4. Poner las opciones, y construir la gráfica. var Site={
   dataset1:{
   ‘myFirstDataset’: [[0, 1.4], [1, 3], [2, 1.414], [3, 1.73], [4, 2.56]]
   },
   options:{
   strokewidth: 1,
   backgroundColor: ‘#fff’,
   colorScheme: ‘blue’,
   xTicks: [{v:0, label:’Firefox’},
   {v:1, label:’Opera’},
   {v:2, label:’Safari’},
   {v:3, label:’IE6′},
   {v:4, label:’IE7′}
   ]
   },
   graph:function(){
   /*Se llama la instancia para la grafica, se le pasan los datos y se construye*/
   var pie = new Plotr.PieChart(’plotr1′,Site.options);
   pie.addDataset(Site.dataset1);
   pie.render();}
   /*Una vez listo el DOM, se llama la función que graficará*/
   window.addEvent(’domready’,Site.graph);
5. Disfruta tus gráficas.

Documentación:

• Por ahora básicamente es la de PlotKit, a la brevedad pondré una versión adaptada a plOOtr, resumida y en español.

Ejemplos(0.20):

• Gráfica de barras
• Gráfica de pastel
• Gráfica de lí­neas
• Gráficas con leyendas
  

Ejemplos(0.14):

• Gráfica de barras
• Gráfica de pastel
• Gráfica de lí­neas
• Gráfica de los 3 tipos, pero a partir de una tabla HTML

Próximas mejoras:

• Añadir eventos en las barras o en las rebanadas de las gráficas de barras y pastel, respectivamente.