PlatesPHP: Sistema de plantillas para Codeigniter 3
PlatesPHP: Sistema de plantillas para Codeigniter 3
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Vamos a crear un sistema de reservas haciendo uso del calendario de codeigniter, de jQuery y de jQueryUI, cabe decir que este tutorial tiene un nivel sobre php y codeigniter algo avanzado, así qué es aconsejable por lo menos visitar antes este tutorial en el cuál explicamos el uso básico del calendario de codeigniter junto a jQuery ya que no vamos a detenernos en lo ya explicado.

Nuestro calendario tendrá un control sobre los días laborales y festivos, de este modo al pulsar sobre cada uno de ellos los tendremos detectados y podremos actuar en consecuencia. También tendremos un intervalo de horas para poder hacer reservas sobre cada una de ellas, esta información la guardaremos en la base de datos, así podremos llevar un control total. En este ejemplo se podrá coger una hora que esté disponible, una vez hecho el proceso, al usuario le aparecerá un popup diciendo por ejemplo, el día Lunes 20 de enero de 2015 usted ha reservado hora a las 10:00 horas, más explícito imposible.

Para poder escoger horas disponibles sobre el día pulsado, lo que haremos será mostrar un campo select obteniendo las horas de la base de datos, tanto las libres como las ocupadas, pero a las horas ocupadas les daremos el estado disabled, de este modo se verán, pero no podrán ser seleccionadas, la mejor opción.

Dicho esto, es momento de ver algunas imágenes del proyecto terminado.


Sistema de reservas con el calendario de codeigniter y jqueryUI
Sistema de reservas con el calendario de codeigniter y jqueryUI

calendario2

Sistema de reservas con el calendario de codeigniter y jqueryUI
Sistema de reservas con el calendario de codeigniter y jqueryUI
Sistema de reservas con el calendario de codeigniter y jqueryUI
Sistema de reservas con el calendario de codeigniter y jqueryUI

Con estas imágenes ya podemos empezar a crear nuestro proyecto, empecemos.

Calendario de codeigniter con la clase calendar

Nos vamos a la web de codeIgniter y nos descargamos la versión que hay disponible, la guardamos y la extraemos en nuestro directorio raíz, en mi caso C:\xampp\htdocs, una vez tengamos ya la carpeta con los archivos debemos cambiarle el nombre, le podemos poner calendario_ci, sugiero colocarle el mismo así será más sencillo seguir el tutorial.

Dejo el archivo Calendar.php al que le hice alguna modificación para que lo podáis reemplazar por el de vuestro proyecto, para esto tenéis que ir a system/libraries y reemplazar Calendar.php por este que dejo.

Calendar

La base de datos

El archivo .htaccess

Ahora ya podemos acceder al proyecto desde aquí, sin el htaccess sería http://localhost/calendario_ci/index.php.

El archivo database.php

Ahora debemos dirigirnos a nuestro archivo database.php que está en la carpeta config y modificar el código para que quede así, siempre dependiendo de nuestros datos de acceso a la base de datos.

El archivo config.php

Abrimos application/config/config.php y en la línea 17 cambiamos el base_url por este código.

Ahora que ya tenemos toda la configuración necesaria creada podemos empezar a crear nuestro calendario y ver como lo podemos llenar de información, empecemos.

Los estilos del calendario

Creamos una nueva carpeta en la raíz de la aplicación llamada estilos y dentro, creamos un archivo llamado estilos.css, dentro de él colocamos el siguiente css.

La vista calendario_view.php

Creamos un archivo nuevo llamado calendario_view.php, aquí será donde mostremos el resultado de nuestro calendario, pero hasta que no tengamos acabado el modelo y el controlador no funcionará, veamos el poco código que contiene.

El archivo funciones.js

Creamos una carpeta nueva llamada js y dentro creamos un archivo llamado funciones.js, este código será el que envíe la información al controlador cuando deseemos crear un nuevo evento, es decir, cuando pulsemos en el calendario, veamos que tiene.

La función new_popup simplemente la hemos creado para evitar repetición de código, el código viene bien explicado en cada sección, simplemente realiza las peticiones a las interacciones en el calendario, nada más que eso.

Ahora necesitamos crear tanto el controlador como el modelo para que nuestro calendario se ponga en marcha, veamos.

El controlador calendario.php

Creamos un nuevo archivo llamado calendario.php dentro de la carpeta controllers y dentro colocamos el siguiente código que como veremos está explicado perfectamente en cada sección.

Aquí tenemos las acciones que deben llevarse a cabo cuando el usuario haga una petición a nuestro calendario, pero el controlador necesita el modelo calendario_model para poder terminar el trabajo, ya que éste lo que hace es comprobar si existen horas disponibles para ese día, si es así las devuelve, en caso de que esas horas no existan, las crea, también se encarga de pintar el formulario y asignar clases a cada día del mismo dependiendo si hay alguna hora escogida o no etcétera, de esta forma podemos detectar todo lo que pase en nuestro calendario.

De todos modos si que hay una cosa que debemos hacer antes de ir al modelo, si nos fijamos entre la línea 72 y 77 tenemos este código.

Esto lo que hace es, una vez el usuario ha pulsado para obtener una hora, comprobamos si existen horas para ese día, y si es así, devolvemos las horas disponibles y cargamos una vista llamada get_hora_view pasando un array con la información que necesitamos, veamos lo que tiene, así que lo creamos y dentro colocamos el siguiente código.

Este simplemente será el popup que se abra cuando pulsemos en un día en el cuál existan horas disponibles, lo podéis investigar para ver de donde viene toda la información :D.

El modelo calendario_model.php

Ahora si que podemos crear el modelo calendario_model.php y dentro colocamos el siguiente código.

Si intentamos ligar la información desde el archivo funciones, pasando por el controlador y llegando aquí al modelo, veremos de forma rápida cuál es el proceso que lleva nuestro calendario, veamos un proceso.

Pulsamos en un día posterior a hoy que no sea festivo ni nulo, el archivo funciones.js lo detecta y le da el pase, esto sucede en la línea 82 del archivo funciones.js.

Lo primero que hace es comprobar si el día está completo con:

Si no es así se dirige al controlador calendario, y dentro de éste al método coger_hora haciendo una petición post y enviando los datos que ya hemos recogido previamente, si el modelo nos responde que hay horas disponibles, lo que hacemos es mostrar la vista get_hora_view.php en forma de popup y procesar ese formulario, el resto es sencillo.

Ese es el proceso que lleva a cabo nuestro calendario, como podemos ver es sencillo, pero con algunos matices.

Y eso es todo, espero que te sea de ayuda para ir conociendo un poco más jQuery y el trabajo con el gran gran framework codeigniter, y gracias por suscribirte al blog, con ésto estás ayudando a que sea posible darle continuidad.