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.

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.

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.

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(); } }

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');

Fácil instalación de jquery

Después de la instalación de codeigniter, he configurado mi servidor (xampp) para que tenga la siguiente estructura:

htdocs/blog/
--------------application
--------------system

Para "instalar" jquery solo creo una carpeta en este caso "js" en la raíz de la aplicación y copio los archivos contenidos en el archivo comprimido de la siguiente manera:


htdocs/blog/
--------------application
--------------system
--------------js/ (en esta carpeta pondré también los javascripts que vaya realizando)
----------------jquery-ui-1.8.17.custom.min.js
 ---------------jquery-1.7.1.min.js
 ---------------css (esta carpeta ya viene incluida en el zip solo copiarla entera)


sencillo no?

Objetivo de este blog

Desarrollar aplicaciones y componentes usando los frameworks codeigniter(php), y jquery, para su reutilización en diferentes proyectos de mi trabajo y poder compartir conocimiento mientras se crean los artículos

Jquery + codeigniter

Para más información sobre estos frameworks
Codeigniter: www.codeigniter.com
Jquery: jquery.com

Son los frameworks que usaremos por defecto, no explicaré su instalación, solo en el caso que requiera una integración entre los dos así que manos a la obra