Cargando



Desarrollo con Grocerycrud para Codeigniter pHp

Veamos una buena solución para CodeIgniter utilizando la librería Grocerycrud, encargada de generar todo con solo configurar algunos parámetros, además incorpora diseño css , JavaScripts , tablas , formularios, grilla de datos , funciones, modelos etc.


mar 04 2015 21:58
Profesional
mar 05 2015 19:35
Cuando desarrollamos una aplicación o sistemas web normalmente necesitamos interactuar con bases de datos. Para ello necesitamos crear interfaces que nos permitan conectarnos, añadir datos, editarlo o eliminarlos. Este tipo de operaciones se las conoce de distintas maneras

CRUD es un acrónimo que significa Crear, Leer, Actualizar y Borrar (Create, Read, Update and Delete). ABM es un acrónimo que significa Alta, Baja y Modificación de datos. ABCDE es un acrónimo que significa Agregar, Buscar, Cambiar, Desplegar(mostrar o listar), Eliminar datos.

Todo desarrollador web php siempre busca optimizar el tiempo de desarrollo y hacer este tipo de tareas demanda mucho tiempo, por ejemplo crear un sistema de administración de la web simple, estable y seguro. En realidad lo que más lleva tiempo es entender y plasmar en el código los requerimientos de interacción con la base de datos, la lógica de negocio, los modelos y las vistas para interactuar con cada tabla de la base de datos.

Una solución en este caso para CodeIgniter, es utilizar la librería Grocerycrud, que se encargara de generar todo con solo configurar algunos parámetros, además incorpora diseño css , JavaScripts , tablas , formularios, grilla de datos , funciones, modelos que podremos utilizar directamente en nuestro sistema.

Grocery CRUD es una librería desarrollada en pHp, es software libre y open source su licencia GPL v3 y MIT. Para utilizarlo debemos descargar la librería desde http://www.grocerycrud.com/downloads

Después de descargarla descomprimimos y copiamos los archivos

grocery.jpg


No detallaremos como configurar Codeigniter sino que vamos a centrarnos en el uso directo. Supongamos que tenemos una base de datos de inmuebles, cuyas tablas son inmuebles, usuarios, localidades o ciudades, provincias, tipos de inmuebles y tipo de operación si es venta o alquiler.

grocery2.jpg


Para generar el crud de la tabla inmuebles crearemos un controlador denominado inmuebles con el siguiente código
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');class Inmuebles extends CI_Controller {public function __construct(){ parent::__construct(); $this->load->database(); $this->load->library('grocery_CRUD');}public function index(){ $crud = new grocery_CRUD(); $crud->set_theme('datatables'); $crud->set_table('inmuebles');$crud->columns('idusuario','idtipoimueble','precio'); $grilla= $crud->render();$this->load->view('listainmuebles.php',$grilla);}}
Invocamos la librería de base de datos y la librería grocerycrud luego seteamos el tema o diseño que queremos utilizar para la grilla, seteamos la tabla a mostrar e indicamos que columnas o campos se mostraran asignando los campos de la tabla quq queremos que se muestren, generamos todo con la función render() y lo guardamos en una variable que enviamos a la vista. A continuación creamos la vista que denominamos listainmuebles.php
<!DOCTYPE html><html><head><meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><?phpforeach($css_files as $file): ?><link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" /><?php endforeach; ?><?php foreach($js_files as $file): ?><script src="<?php echo $file; ?>"></script><?php endforeach; ?><body><div style='height:20px;'></div> <div> <?php echo $grilla; ?> </div></body></html>
En la vista deberemos desplegar los css y js necesarios para que funcione, la ubicación de los archivos ya están definidas por la plantilla, en este caso decidimos utilizar la plantilla datables que podemos encontrar en el directorio de plantillas:
/assets/grocery_crud/themes/datatables/
Si probamos nuestra aplicación el resultado será el siguiente:




Vemos como se genero toda la grilla con poco código, ahora veremos como añadir y mejorar funcionalidades. Por ejemplo las columnas id podemos cambiarle el nombre y ademas en vez de que aparezca el id del dato relacionado nos gustaría algún dato mas significativo por ejemplo en vez de idusuario que aparezca el nombre, y en lugar de idtipoinmueble que muestre que tipo es si es casa, oficina, etc. Para ello deberíamos hacer unas modificaciones al controlador.

Para cambiar el nombre a una columna hacemos lo siguiente en el controlador utilizamos display_as(nombreactual, nombrenuevo)
$crud->columns('idusuario','idtipoimueble','precio');$crud->display_as('idusuario','Usuario');$crud->display_as('idtipoinmueble','Tipo inmueble');
Para mostrar el dato en lugar del id debemos indicar con set_subjet(tabla relacionada) y set_relation(idrelacion,tablarelacionada,campotablarelacionada)
$crud->set_subject('usuario');$crud->set_relation('idusuario','usuarios','nombre');//el id es el de la base de datos que estoy mostrando, oseaidrelacion en inmuebles $crud->set_relation('idtipoimueble','tipo_inmueble','nombre');
A continuación refrescamos la página para ver los cambios con el código que añadimos:


grocery4.jpg



Veamos como se genera el alta o modificación de datos, a partir de los campos de la estructura de la tabla se genera el formulario para alta de datos. Algunos podrán configurarlos según el tipo de dato, otros deberemos indicar que tipo de datos y elemento de formulario debe ser asignado.


grocery5.jpg



Vemos que los campos tipo text, se convierten en textarea y se les añade el plugin cfkeditor podemos verlo en la web ckeditor.com, los campos date se convierte en datepicker, los campos relacionados se convertirán en combos o elementos select desplegables.

Un aspecto importante es como validar los datos que damos de alta, para ello deberemos utilizar la función required_fields(campo), por lo tanto en el controlador podemos añadir el siguiente código para validar que un campo sea requerido.
$crud->required_fields('idusuario', 'precio');
También podemos establecer el tipo de dato que vamos a validar con la función set_rules
$crud->set_rules('precio','Precio alquiler','numeric');$crud->set_rules('email','Email Usuario','email');
De esta manera nos indicará debajo del formulario al enviar si hay algún error:


grocery6.jpg



Además de los datos que podemos introducir, en este caso necesitamos subir archivos de imágenes de los inmuebles, para ellos deberemos utilizar la función set_field_upload('campo,'directorio'), por defecto podemos utilizar el directorio assets/uploads/files, que ya incorpora grocerycrud, sino, podemos configurar el nuestro propio.
$crud->set_field_upload('imagen1', 'assets/uploads/files'); $crud->set_field_upload('imagen2, 'assets/uploads/files'); $crud->set_field_upload('imagen3', 'assets/uploads/files'); $crud->set_field_upload('imagen4', 'assets/uploads/files');

grocery7.jpg



Cómo hacer una grilla de datos multilenguaje

Dentro del directorio /assets/grocery_crud tenemos el directorio Languages con todas las traducción a cada idioma de la interfaz que muestra la grilla,

Podemos ir a la configuración desde el directorio application/config/grocery_crud.php e indicar el idioma por defecto que queremos utilizar en la configuración de idioma.
$config['grocery_crud_default_language'] = 'spanish';
Si lo queremos hacer en forma dinámica por ejemplo mediante un menú para elegir el idioma desde la web añadimos a nuestro código el idioma
$crud->set_language("english").
Quitando funcionalidades de la grilla

Unas de las posibilidades es quitar funcionalidades que no queremos que se muestren o inhabilitar campos para ello utilizaremos unset y sus distintas posibilidades unset_add, unset_edit,unset_delete and unset_list

Así por ejemplo si utilizamos $crud->unset_edit(); el botón editar no aparecerá en el listado, si utilizamos $crud->unset_texteditor('descripcion'); el textarea correspondiente a la descripción no utilizara el plugin cfkeditor. Si queremos solo mostrar un listado sin que se pueda realizar ninguna operación mas que búsqueda utilizamos la función.
$crud->unset_operations();
Como invocar un función desde un evento

Grocerycurd nos permite manejar callbacks es decir invocar una función en antes, durante o después que se produce un evento. Algunos ejemplos. Si queremos añadir un callback cuando se genera el formulario y afectar a un campo en particular utilizaremos la siguiente función:
$crud->callback_add_field('email',array($this,'cambiacolor'));
Luego en el controlador definimos la funcion que invocamos en el callback
function cambiacolor(){ return '<input type="text" maxlength="50" value="" name="email" style="bakcground:red; width:100px">';}
Si queremos manipular alguna columna utilizaremos el siguiente:
codigo$crud->callback_column('precio',array($this,'asignarmoneda'));function asignarmoneda($value, $row){ return $value.' &euro;';}

grocery8.jpg




También podemos utilizar el callback antes de insertar o grabar datos:
$crud->callback_before_insert(array($this,'calcular_total));
Existen muchos otros eventos para invocar callbacks que podemos consultar en la web de Grocery Crud. Otras utilidades que posee es la posibilidad de exportar a excel e imprimir la grilla con sus datos, si queremos añadir algún botón con una funcionalidad extra como exportar a pdf, deberemos modificar el código de la plantilla que se encuentra en el directorio assets\grocery_crud\themes\mipantilla\views, en el directorio de la plantilla que estemos utilizando modificamos el archivos list_template.php y añadimos lo que necesitemos.

¿Te ayudó este Tutorial?


1 Comentarios


Alejandro Sch
feb 01 2017 05:53

Hola,

Muchas gracias por este tutorial.

¿podrías pasarme los archivos??

no me funciona y no encuentro cual es el problema =(

Te dejo mi correo: axelsch2000@yahoo.com.ar

 

Muchas gracias.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X