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