viernes, 10 de febrero de 2012

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


En codeigniter todo lo relacionado con la base de datos se maneja por medio de los modelos, por eso crearemos uno que nos traerá toda la información de la tabla historial, seguimos el manual http://codeigniter.com/user_guide/general/models.html para crearlo.

historial_model.php 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php

class Historial_model extends CI_Model {

    function __construct() {

        // Call the Model constructor

        parent::__construct();

    }

// nuestra función que nos obtiene los datos de la tabla historial, usando active record

    function get_datos() {

        $query = $this->db->get('historial');

        return $query->result();

    }

}


El tercer paso sería crear nuestro controlador, lo llamaremos dp.php, que obtiene los datos de la tabla historial y carga nuestra vista dp_view.php además de enviar los datos a la vista

 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
<?php

class Dp extends CI_Controller {

    public function index() {

        // cargamos nuestro base de datos

        $this->load->database();

        // cargamos nuestro modelo

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

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

        // data

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

        // pasamos los datos a la vista

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

    }

}

Por último creamos nuestra vista que tiene nuestro componente datepicker y en el que queremos incluir la fecha, en una vista se puede mezclar codigo php y html y para que el contenido de la variable $data esté disponible en javascript necesitamos imprimir todo el javascript en php por medio de echo(), no es la manera más elegante ni como yo lo haría pero lo dejaré así por ser un ejemplo demostrativo y que seguiré ampliando y mejorando con los siguientes artículos, ya que el objetivo final será un componente "reutilizable" para nuestros proyectos.

dp_view.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
49
<!doctype html>

<html lang="es">

    <head>

        <link type="text/css" href="../js/css/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />

        <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>

        <?php

       // hay que tener cuidado cuando se hace esto me demoré más

       // arreglando las comillas "" que hacer estas pocas líneas de código.

        echo '<script type = "text/javascript">';

        echo ' jQuery(document).ready(function(){';

        echo '$( "#datepicker" ).datepicker({ dateFormat: "dd/mm/yy"});';

       // según el manual de jquery setDate nos permite cambiar el texto de nuestro input

      // el objeto $query contiene nuestra tabla, $query[]->id y $query[]->fecha

        echo " $('#datepicker').datepicker('setDate','".$query[1]->fecha."');";

        echo ' }); </script>';

       ?>

    </head>

    <body>

    <div>

    <input id="datepicker" type="text">

  

    </div>

    </body>

</html>

El resultado http://localhost/blog/index.php/dp :




Como recomendación y buena práctica de programación es mejor separar la implementación de la presentación, en este caso no lo hice ya que mezcle php y html, pero en los siguientes artículos separaré las dos cosas y las pondré en su sitio:)
Debido a que javascript no puede acceder directamente al objeto $query que contiene los datos de mi tabla, se hizo de esta manera, posteriormente usaré otra técnica que nos permitirá programar todo en javascript y obtener los datos que necesitamos de la base de datos. Todo depende de lo que necesitemos hacer así que no me gusta restringirme y para mi todo es válido siempre que sea sencillo y funcione.
Simple, que funcione y que sea reutilizable...

Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)