Baldagrid 3.0 (PHP-jQuery-Mysql)

Luego de tanto esperar les vuelvo a traer una solución renovada mucho más sencilla para mostrar datos. En esta versión de la baldagrid se implementó la integración con la interfáz de jqueryUI para la gestión de los estilos. Con esta integración se puede aplicar cualquiér estilo del jQueryUI el cuál se puede elegir de entre todos los que poseé la herramienta.

El cambio más importante a destacar de esta nueva versión es que se desarrollo completamente como un plugin. Con esto me quiero referír a que ahora se aplica el llamado de la funcionalidad directamente al elemento DOM del sitio haciendolo más reutilizable sin generar lineas de código de más.

A continuación se encuentra un ejemplo de como se utiliza la baldagrid 3.0 del lado del cliente:

$(document).ready(function() {
    $('#grid').baldagrid({
        header: {
            tableId: ['id', 'apellido', 'nombre', 'mail'],
            headerName: ['ID', 'Apellido', 'Nombre', 'Email'],
            action: [3, 'Accion']
        }
    });
});

En el ejemplo anterior solo se le pasó 1 solo parámetro (header) pero realmente la funcionalidad permite la invocación de hasta 9 parámetros, que la mayoría estan definidos por default dentro del plugin pero se pueden modificar y darle valores iniciales como si fuera un constructor. Todos los parametros que se pueden modificar son los siguientes:

limit (int)
header (array)
search (bool)
footer (bool)
corteControl (bool)
page (int)
order_by (string)
order (string)
iconSize (string)

Volviendo al ejemplo anterior se puede observar como se modifica el header de la grilla para que muestre los títulos que yo quiera y para esto se realiza lo siguiente:

header: {
    tableId: ['id', 'apellido', 'nombre', 'mail'],
    headerName: ['ID', 'Apellido', 'Nombre', 'Email'],
    action: [3, 'Accion']
}

Dentro del plugin se encuentra el objeto header, el cual es el encargado de generar la cabecera de la grilla para mostrar los títulos de cada columna y la funcionalidad del ordenamiento de las mismas. Este objeto, a su vez, contiene atributos del tipo vector. En este caso poseé 3 vectores: tableId, headerName y action.

Algo a tener muy presente y que es de suma importancia para que el plugin funcione es que el objeto header y los atributos tableId y headerName son OBLIGATORIOS porque son los que generan la grilla en forma correcta. Si estos atributos no se setean el aplicativo no va a devolver errores pero no va a mostrar nada en pantalla ya que le hace falta los atributos necesarios.

Paso a explicar los 2 atributos necesarios y otros opcionales:

  • El vector tableId es el atributo que poseé los id’s de cada columna que es el que el plugin utiliza para gestionar las mismas.
  • El vector headerName es el atributo que contiene los nombres a mostrar en los títulos de cada columna. La cantidad de valores del vector debe coincidir con las columnas que devuelve la consulta realizada del lado de servidor para que sea coherente. Esto mismo se aplica para el vector tableId.

Estos 2 objetos explayados anteriormente son los de carácter obligatorio. Ahora se describen los opcionales.

  • El objeto action es el correspondiente a las acciones que tendrán cada fila de la grilla.

    Una aclaración a tener muy en cuenta es que si no se quiere utilizar el sistema de acciones en la grilla, es decir que se va a tratar este vector como opcional, en la parte del lado del servidor donde se formula el objeto json, y se le aplica la posición de acciones del mismo esta debe obviarse o bién comentarse para no generar conflicto en la aplicación.

  • Si no se entiene mucho esta parte de la explicación no se hagan problema que mas adelante les explicaré la parte del lado del servidor y la generación del objeto json y haré incapié en la parte de las acciones para que terminen de entenderlo.

Hasta acá vimos un pantallazo de como utilizar el plugin del lado del cliente en forma muy sencilla. Ahora nos adentraremos a ver como trabaja del lado del servidor con PHP y Mysql.

Una aclaración importante tambien es que para esta nueva versión se utilizo Mysqli para la gestión de las consultas y conexiones a la base de datos ya que al ofrecerme una forma sencilla de trabajar con la base y además utilizando el paradigmas de objetos me ofrece la posibilidad de no crear una clase que haga exactamente lo mismo haciendo que el código de la aplicación se reduzca en forma significativa, lo cuál lo podrán observar en comparación a la version anterior de la Baldagrid, la 2.0.

Una vez explicado esto pasamos al código del lado del servidor. Para las reglas de negocio se utilizan 2 archivos: functions.php y data.php.
Este primer archivo, el functions.php posée unicamente una sola función llamada json() y es la encargada de generar el objeto json a partir de un sql formulado con los argumentos de la función.

Esta funcion json() espera 3 parametros:

  • $cnx: Este es el objeto de la conexión devuelto por el mysqli.
  • $tableName: Nombre de la tabla en la que se realizará la consulta.
  • $request: vector $_REQUEST en el que se encuentran los parámetros enviados desde el html.

Estos 3 parámetros son de carácter obligatorio, sin estos la consulta no se podría formular provocando la inutilidad de la aplicación.

Una aclaración que me es necesario hacer es que actualmente este plugin solo funciona para consultas a una sola tabla, no se contempló la posibilidad de la realización de joins con otras tablas. Esto seguramente salga para una sub-version de la Baldagrid 3.0

A continuación se encuentra la funcionalidad del método encargado de devolver el objeto json con todos los datos:

<?php
    function json($cnx, $tableName, $request) {
        $start = microtime();
        // Se escribe la consulta
        $sql = "SELECT " . join(',', $request['fields']) . " FROM " . $tableName;
        $sql .= (@$request['expression'] ? " WHERE " . join(" LIKE '%" . $request['expression'] . "%' OR ", $request['fields']) . " LIKE '%" . $request['expression'] . "%'" : "");
        $sql .= (@$request['order_by'] ? " ORDER BY " . $request['order_by'] . " " . ($request['order'] == 'ASC' ? 'DESC' : 'ASC') : "");
        // Se calculan los resultados totales
        $rltTotal = $cnx->query($sql) or die($cnx->error);
        // Se le agrega el limit para la conuslta normal
        $sql .= " LIMIT " . $request['limit'];
        // Se agrega el offset
        $sql .= (@$request['page'] ? " OFFSET " . ($request['limit'] * ($request['page'] - 1)) : "");
        //echo $sql;
        // Se realiza la consulta
        $rlt = $cnx->query($sql) or die($cnx->error);
        // Se procesan los resultados y se crea el array de json
        $json['num_rows'] = $rltTotal->num_rows;
        $x = 0;
        while($obj = $rlt->fetch_object()) {
            // Corte Control
            $json['data'][$x]['results'] = Array($obj->id, $obj->apellido, $obj->nombre, $obj->mail);
            //$json['data'][$x]['actions'] = Array('Ver detalle' => 'view.php?id=' . $obj->id . '&readonly=true', 'Editar' => 'edit.php?id=' . $obj->id, 'Eliminar' => 'delete.php?id=' . $obj->id);
            $x++;
        }
        $end = microtime();
        // Se devuelve los microsegundos que tardo la consulta
        $json['time'] = ($end - $start) * 1000;
        // Se devuelve el json

        return json_encode($json);
    }
?>

Como pueden observar en esta linea:

//$json['data'][$x]['actions'] = Array('Ver detalle' => 'view.php?id=' . $obj->id . '&readonly=true', 'Editar' => 'edit.php?id=' . $obj->id, 'Eliminar' => 'delete.php?id=' . $obj->id);

Es la que se encarga de generar las columnas con las acciones. Esta es la linea que anteriormente les dije que obviaran o bien comentaran para hacer que el vector de las acciones utilizadas en el javascript del objeto header sea opcional. si esta linea no la comentan, por mas que no aparezca el vector de acciones en el javascipt estas columnas se dibujarán igualmente en el html, por eso es muy importante esta linea.

Conociendo como funciona el json, ahora se muestra como se realiza el llamado a la funcion json():

<?php
// Se carga la libreria de funciones
require_once 'functions.php';
// Se instancia la clase mysqli
$jobeet = new mysqli('localhost', 'root', '', 'jobeet');
// Se arma el json
echo json($jobeet, 'recurso', $_REQUEST);
?>

Como se puede observar en el codigo anterior, así se realiza el llamado a la función json() donde se le pasa como parámetros: el objeto $jobeet que contiene el objeto de la conexión a la base de datos, el nombre de la base de datos, y el vector con los datos del $_REQUEST del navegador.
Una aplicada la función esta devuelve el objeto json que se le envia al html por medio de un echo.

La herramienta esta hosteada en mediafire para que puedan bajarselá y probarla. Para descargarse el Baldagrid 3.0 lo pueden hacer directamente haciendo click en el siguiente link: Descargar BaldaGrid 3.0

De más esta decir que esta aplicación siempre puede mejorarse y los invito a hacerlo no solo para su beneficio, sinó también para todos aquellos que la necesitan y además lograrán aprender cada vez más como utilizar jQuery en forma correcta, ágil y obteniendo buenas prácticas como tengo la oportunidad día a día.

Para cualquier consulta, problema u opinión no duden en avisarme.

2 Respuestas a “Baldagrid 3.0 (PHP-jQuery-Mysql)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s