sábado, 27 de abril de 2013

Componente Tabla tercera parte borrando los datos

Como se puede ver en el atributo permisos está habilitado "D" que le dice a nuestro script lineas(49-52) que añada la opción de borrar, no hay que olvidar que nosotros armamos la configuración del jtable antes de enviárselo al pluggin para eso le enviamos en la linea 83 del script:
title: config_jtable.titulo - el titulo de la tabla
actions: acciones - las acciones , urls, o controllers donde se realizan las acciones de borrar, crear, actualizar, etc
fields: campos -- los campos de la tabla que coinciden con la base de datos
Internamente el plugin jtable envía los datos anteriores por medio de ajax a los controlleer necesarion


    <jtabla id="invtabla" tabla="inventario" permisos="CRUD" titulo="Mis inventarios">
         <campo nombre="id" titulo="El id dek item" autoinc="true"></campo>
    </jatbla> 
   


domingo, 1 de abril de 2012

Componente Tabla, segunda parte insertando datos

El plugin requiere que se obtenga id del último registro que se insertó en la tabla, y se lo regrese por medio de ajax para que este lo pueda mostrar visualmente los datos , es una manera de comprobar que se realizó la inserción correctamente.
Para esto en una parte del controller tuve que obtener el ultimo id insertado usando la función $this->db->insert_id(), investigando un poco encontre que insert_id() usa la función de php mysql_insert_id() que requiere que la tabla tenga un campo autoincrement (ver aqui), por lo tanto de ahora en adelante todas las tablas creadas deben tener un campo autoincrement para que se pueda hacer la inserción. Aquí pongo un el SQL de la tabla usuario con este requerimiento.

1
2
3
4
5
6
CREATE TABLE `usuario` (
  `id` int(4) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(10) NOT NULL,
  `password` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

La vista es la misma de los ejemplos anteriores con el tag jtabla:
1
2
3
  <jtabla id="invtabla" tabla="usuario" permisos="CR" titulo="Los usuarios">
         <campo nombre="id" titulo="El id dek item" autoinc="true"></campo>
   </jtabla>

ahora en permisos hemos añadido la letra C que representa la creación o inserción de registros, se ha incluido un <campo> donde nombre es el nombre del campo de la tabla, titulo es el título que aparecerá visualmente, creo que se explican por si solos y autoinc determina que este campo es autoincrement, realmente solo necesitamos uno, todos estos atributos son necesarios para la configuración del objeto jtable.

miércoles, 7 de marzo de 2012

Componente Tabla, primera parte mostrando los datos

El objetivo principal es crear un componente que me permita mostrar, actualizar y borrar  el contenido de una tabla de la base de datos en forma tabular con solo cargar sus librerías y la del componente a desarrollar y que se detecte automáticamente dentro del código html, para esto consideré 2 alternativas, crear mi propio componente desde cero :( , o usar alguno de los plugins prediseñados que muestran datos en forma tabular. Entre ellos analicé a Jqgrid, y Jtable, el primero porque ya había diseñado un componente similar para un proyecto, pero me pareció mejor experimentar con Jtable ya que lo vi muy completo por las siguientes características que voy a traducir del inglés.

JTable es un plugin de jquery que es usado para crear tablas CRUD  basadas en AJAX


- Automáticamente crea una tabla HTML y carga los registros del server usando AJAX
- Crea los dialogos automáticamente de: Crear Nuevo registro, Editar Registro, Borrar Registro. (esta es la característica que más me atrajo ya que me ahorra hacer los formularios y dialogos:) )
- No es dependiente de ninguna tecnología del servidor lo que me permite usarlo con php (codeigniter)
- etc etc el resto se puede leer aqui en inglés.



domingo, 4 de marzo de 2012

Terminando con el datepicker


Finalizando con los retoques al componente datepicker, ahora lo que queremos es que con solo agregar la etiqueta datepicker dentro de mi código html, se genere un datepicker automáticamente, para eso he especificado ciertos elementos que hay que incluir en esta etiqueta:


id: es el id del datepicker
tabla: es la tabla de la bd
campo: el campo de la tabla que contiene la fecha a mostrar


<datepicker id="el id" tabla="mi tabla" campo="mi campo"></datepicker>
Incluyo el javascript que contiene la nueva función  html_datepickers, lo que hace básicamente es buscar en el dom del documento html todas las instancias de la etiqueta  <datepicker></datepicker> , los convierte a inputs y finalmente crea los datepicker usando la función datepicker, los comentarios explican paso a paso lo que se hizo.

lunes, 20 de febrero de 2012

Datepicker reutilizable


Ya había mencionado que mi objetivo principal era desarrollar funciones y componentes que sean reutilizables y fáciles usar, a continuación voy a tratar de mejorar el componente ui de jquery para que pueda conectarse directamente con una tabla de la base de datos, en el ejemplo anterior en nombre de la tabla que se usó es historial, pero que pasaría si queremos usar este componente en otro proyecto tendríamos que hacer cambios cada vez y puede ser que ya la tabla no se llame historial inclusive el nombre del campo puede variar, para eso pensé en crear un modelo "genérico" que reciba cualquier nombre de tabla y campo, se conecte a la bd y que obtenga los datos necesarios, lo llamaré generic_model, nos servirá para posteriores ejemplos al cual iremos añadiendo nuevas funcionalidades.             

application/models/generic_model.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
class Generic_model extends CI_Model {

    function __construct() {
        // Call the Model constructor
        parent::__construct();
    }
/**
* Obtiene los registros de un campo de una tabla de la base de datos
* @param  $nombre_tabla  El nombre de la tabla
* @param  $nombre_campo  El nombre del campo de la tabla
*/
    function get_datos($nombre_tabla,$nombre_campo) {
        // SQL equivalente a SELECT $nombrecampo FROM $nombre_tabla;
        $this->db->select($nombre_campo);
        $this->db->from($nombre_tabla);
        $query = $this->db->get();
        return $query->result();
    }

}


viernes, 10 de febrero de 2012

DatePicker y el camino del Ajax

¿Porque usaría ajax con este componente?
En el ejemplo anterior Datepicker + base de datos  se me presentó el problema de acceder a la variable $query de php desde javascript, me pareció que debía ser engorroso el tratar de hacer algún cambio al código cada vez que quiera añadir o modificar algo, por otra parte si requiriera que el componente actualizara los datos y al pertenecer este a un formulario no me gustaría que el usuario perdiera toda la información que ya ha llenado al hacer una actualización completa de la página. Pienso que es más óptimo volver a recargar una parte pequeña de mi aplicación que toda la página web. Ahorrar recursos es mi objetivo y todo depende de ¿para qué necesito Ajax?.

Bien retomando el ejemplo anterior, tenemos el controller, el modelo, y la vista esta última contiene código javascript que puede decirse está embebido en el de php, mi objetivo es separar este código y acceder a los datos de mi tabla historial, pero antes de esto necesitamos cambiar algo de código en el  controller.

dp.php
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
class Dp extends CI_Controller {

    public function __construct() {

        parent::__construct();

        // cargamos nuestro base de datos ahora lo hacemos por defecto

        $this->load->database();

        $this->load->model('Historial_model');

    }

    public function index() {

        // en este caso queremos que la vista haga las peticiones no el controller

        // cargamos nuestra vista

        $this->load->view('dp_view');

    }

    public function datos_dp(){

         // obtenemos los datos de la tabla y lo guardamos en la variable

        // datos

        $datos['query'] = $this->Historial_model->get_datos();

        // codificamos el array a json usando json_encode mirar manual de php

       // no uso xml porque  json está soportado nativamente en javascript

      // entonces creo no se deberia llamar Ajax sino Ajaj por json jejeje?

        $data_json = json_encode($datos);

        // enviamos el json a la vista

        echo $data_json;

       

    }

Datepicker + base de datos

El Datepicker es un componente visual muy interesante te permite seleccionar una fecha que se guarda en un campo de texto, normalmente se usa como parte de un formulario que requiere que cierta información sea enviada en forma de fecha al servidor para ser procesada o guardada en una base de datos.
Pero que pasaría si queremos usar este componente en el sentido contrario, es decir mostrar una fecha que previamente ha sido guardada en una base de datos, realmente es muy sencillo de realizar.

El primer paso sería construir nuestra base de datos (en mysql) con una tabla de ejemplo que la llamaremos historial, contiene 2 campos un id , un campo de fecha y la llenamos con 2 registros

HISTORIAL
---------------------------
ID          FECHA
1             01/12/2010
2             02/09/2012

CODIGO SQL

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
CREATE TABLE IF NOT EXISTS `historial` (

  `id` int(10) NOT NULL,

  `fecha` varchar(20) NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--

-- Volcar la base de datos para la tabla `historial`

--

INSERT INTO `historial` (`id`, `fecha`) VALUES (1, '01/12/2010'), (2, '02/09/2012');