JQuery UI: Como usar el control Tab con MySql

En esta ocasión quiero presentar a la librería JQuery UI y para esto he diseñado un sencillo ejemplo que básicamente despliega dos tablas de MySql; al dar click en una pestaña (tab) se muestra una tabla, al elegir la otra se muestra el contenido de otra segunda tabla.

¿Que es JQuery UI?

En resumen, JQuery UI es un subconjunto del FrameWork JQuery y fue creado para añadir nuevas y complejas funcionalidades a ésta. Este conjunto de nuevas funcionalidades pueden ser plug-ins, widgets, y efectos visuales (arrastrar, FadeIn, FadeOut, etc.), todos diseñados con la misma filosofía que JQuery; fácil de usar y compatible con los navegadores más populares. Dicho de otras palabras JQuery UI es un framework para crear bonitas interfaces gráficas de usuario con ayuda de JQuery y CSS.

Lo que necesitas para realizar este ejemplo

Para la realizacion de este ejemplo necesitas la siguiente lista de herramientas de desarrollo instaladas en tu computadora. Así que si alguna no la tienes, este el momento ideal para hacerlo:

Como puedes ver he puesto un enlace a la página de descarga de cada herramienta. El servidor web puede ser el que tú gustes pero cuida que tenga soporte para reconocer y ejecutar código PHP, en mi caso uso el servidor Apache.

Diseñar la Base de datos en MySql

Para el ejemplo voy a suponer que tenemos una lista de productos organizados en categorías. Es por esto que utilizare una tabla de productos y otra tabla de categorías. Los datos que me interesan guardar sobre los productos son:

  • El nombre del producto.
  • Una breve descripción acerca del producto.
  • La fecha en que caduca el producto.
  • El precio al que se compra con el proveedor.
  • El precio al que se vende al público.
  • La categoría en la que se ha clasificado el producto.

Los productos estarán organizados en varias categorías, ejemplos de categorías pueden ser; Carnes frías, Perfumería, Abarrotes, Frituras, etc.
Para que el ejemplo siga siendo muy sencillo y fácil de entender solo he considerado dos categorías y solamente tendré una lista de 3 productos.

Scripts para crear la base de Datos en MySql

A continuación pongo los scripts que debes usar para crear la base de datos del ejemplo, así como algunas inserciones que he realizado en las dos tablas:

/*
	www.notas-programacion.com
	Descripcion:
		Instrucciones para crear la Base de datos del ejemplo.
		Crea una BD llamada jquerytabs_mysql con dos tablas
		cta_CategoriasProductos y tbl_productos
	
	Archivo: scriptsBD.sql
*/

/*Crear la base de datos*/
CREATE DATABASE jquerytabs_mysql;
USE jquerytabs_mysql;
 
 /*Crear la tabla de Categorias*/
CREATE TABLE cta_CategoriasProductos(id_CategoriaProducto INT NOT NULL AUTO_INCREMENT,
tx_Nombre VARCHAR(50),
tx_Descripcion VARCHAR(500),
primary key(id_CategoriaProducto) );
 
/*Crear la tabla Productos*/
CREATE TABLE tbl_productos(id_producto INT NOT NULL AUTO_INCREMENT,
tx_NombreProducto VARCHAR(50),
tx_Descripcion VARCHAR(500),
dt_FechaCaducidad DATETIME DEFAULT NULL,
mn_PrecioCompra DECIMAL(5,2),
mn_PrecioPublico DECIMAL(5,2),
id_Categoria INT,
primary key(id_producto),
foreign key (id_Categoria) references cta_CategoriasProductos(id_CategoriaProducto)  );
   

 /*Insertar 2 categorias para los productos*/
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Perfumeria','Todo tipo de productos de limpieza y productos de tocador');
 
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Frituras','Productos de frituras; palomitas, totopos, etc.');
 
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Abarrotes','Todo tipo de Productos de abarrotes; enlatados, veladoras, refrescos, etc .'); 


/*Insertar 3 Productos de ejemplo*/
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria) 
VALUES('Shampoo Ultra humectante','Shampoo caja/2 pzas marca patito','2013-07-04',245.50,315.00,1);
 
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Papas refritas','Papas fritas bolsa 150 gr. superpapas','2012-11-22 10:45',3.50,6.50,2);
 
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Jabon anti alopecia','Jabon higienico 1 pza 145 gr.','2013-04-16 07:57',8.50,10.50,1);
 

Con ayuda de algun cliente para MySql como Workbench o el PhpMyAdmin ejecuta los scripts anteriores para recrear la base de datos e insertar los datos de ejemplo. En mi caso he utilizado el Workbench.

Diseño de la pagina web

El diseño es muy sencillo y únicamente consiste de un solo documento HTML en el que se insertara el Widget Tab de JQuery, es muy similar al diseño que muestro a continuación:
jquery-tab-bosquejo

Cuando el usuario elija la primera Pestaña se mostrara el contenido de la tabla de productos. En la Pestaña dos se mostrara la tabla de categorías. Existen varias formas de decirle a JQuery de donde debe tomar los datos que mostrara en cada Pestaña, tema que por ahora no tocare para no confundirte. En este caso el contenido de cada pestaña será cargado con ayuda de Ajax.

Vista de la estructura de carpetas y archivos del ejemplo

Para que entiendas mejor los archivos de código fuente que mostrare más adelante, a continuación pongo una imagen donde se observa claramente como he organizado en carpetas los archivos de este ejemplo:
jquery-tab-archivos

En la imagen anterior la raiz del sitio (Site root) la tengo guardada en /var/www/html/php/jquery-control-tab,y si observas la imagen con mas detalle te darás cuenta que dentro de la carpeta css hay dos archivos, el archivo css_ejemplo5.css contiene estilos que escribí para darle un poco de presentación a los datos, el archivo jquery-ui.css es el archivo CSS de JQuery UI, este archivo fue tomado del tema cupertino, es el que más me gusto (azul claro tipo agua).

El código fuente de estos archivos los iré mostrando uno a uno junto con una breve explicación, aunque si los observas detenidamente te darás cuenta que al inicio tienen un encabezado de comentarios que explica a grandes rasgos que hace ese archivo. El orden en que los mostrare es el orden en el que teóricamente el navegador los íra cargando.

El código Fuente de los archivos

Para ver el ejemplo funcionando en el navegador debemos escribir la ruta a la carpeta donde esta la raiz del ejemplo, en mi caso he colocado los archivos en /var/www/html/php/jquery-control-tab (utilizo linux), donde la carpeta raíz del servidor web es /var/www/html/, por lo que para abrir el ejemplo en un navegador web debemos acceder a la URL http://localhost/php/jquery-control-tab/ y con esto en el navegador web se desplegara el documento HTML index.html. El código de este archivo lo muestro a continuación:
index.html

<!--
	www.notas-programacion.com
	Descripcion:
		Archivo de inicio del ejemplo; Carga hojas de estilos, archivos
		de javascript y los datos de la BD por medio de Ajax
	
	Archivo: index.html
-->

    <!-- Hoja de estilo -->
     	 	
    <!--Archivos de script de JQuery-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <!--Archivo de script del ejemplo-->
    <script type="text/javascript" src="js/func_ejemplo5.js"></script></pre>
<table width="95%" border="0">
<tbody>
<tr>
<td><!-- Widget Tab -->
<div id="fichass">
<ul>
<li><a href="ajax/listarProductos.php">Productos</a></li>
<li><a href="ajax/listarCategorias.php">Categorias</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

Espero que con la imagen de las carpetas que te mostré anteriormente puedas deducir el porqué de las rutas en las etiquetas para importar las hojas de estilo (LINK), y el porqué de las rutas en las etiquetas para importar los archivos de código JavaScript (SCRIPT). Como se observa el archivo está muy, muy corto, a continuación una breve explicación de las líneas más importantes de este archivo:

En la línea 17 y 18 se están importando dos hojas de estilos; el primer archivo .css (jquery-ui.css) corresponde a la hoja de estilos de JQuery UI, el segundo archivo .css (css_ejemplo5.css) corresponde a una hoja que he creado para darle un poco de presentación a las tablas que mostraran el contenido de las tablas de MySql.

En la línea 21 se importa el Framework JQuery.
En la línea 22 se importa la librería JQuery UI.
En la línea 24 se importa un archivo que he creado para inicializar JQuery y el Widget Tab.

En el cuerpo del documento HTML (BODY) se observa cómo he creado una tabla con una sola fila y una sola columna y dentro de dicha columna e insertado el Widget Tab. El objetivo de la tabla es limitar el ancho que ocupa el Widget dentro del documento HTML.

css_ejemplo5.css
Este archivo es una hoja de estilos que he creado para hacer un RESET del CSS del documento HTML y crear unas cuantas clases para dar presentación a las tablas HTML que muestran los datos de las tablas Productos y Categorías (las tablas se crean en los archivos que se cargan con Ajax). Los archivos listarProductos.php y listarCategorias.php son los que hacen uso de las clases que se crean en este archivo.

/*
	www.notas-programacion.com
	Descripcion:
	Hoja de estilos del ejemplo, principalmente creamos algunas cuantas
	clases CSS para dar formato a la tabla que muestra los datos de ejemplo
	
	Archivo: css_ejemplo5.css
*/
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
  border:0pt none;
  font-family:inherit;
  font-size: 100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0pt;
  padding:0pt;
  vertical-align:baseline;
}
 
.celdaWhite {   background-color: #FFFFFF; }
.celdaGreen {   background-color: #E5FFE9; }
 
.filaEncabezado  { 
    background-color: #B5B5B5; 
    font-size: 13pt; 
    font-weight: bold; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
}
 
td { 
    color: #333333; 
    font-family: 'Comic Sans MS',Verdana, Arial, Helvetica, sans-serif; 
    font-size: 13pt; 
    vertical-align:middle;
    padding:3px;
} 

En el archivo se observa lo siguiente:
Únicamente he creado 3 clases: celdaWhite, celdaGreen y filaEncabezado.
Asigne estilos para todas las celdas de una tabla HTML (línea 35 a línea 41).

func_ejemplo5.js
Este archivo se encarga de Inicializar el Framework JQuery y de especificar que la capa (DIV) que están dentro del cuerpo del archivo index.php debe convertirse en un Widget Tab:

/*
	www.notas-programacion.com
	Descripcion:
	Inicializa el control Tab de JQuery UI, el elemento 
	fichass es un control div de HTML
	
	Archivo: func_ejemplo5.js
*/
    var miPagina;
    miPagina=$(document);
    miPagina.ready(inicializarEventos);
 
    function inicializarEventos()
    {
        var capaFichas = $("#fichass");
        capaFichas.tabs({ collapsible: true });
    }

Si has revisado mis anteriores ejemplos de JQuery te darás cuenta que estoy utilizando la misma sintaxis de siempre para inicializar JQuery. El parámetro collapsible del método tabs() es un valor booleano que indica si el contenido de la pestaña debe ocultarse al dar click en el nombre de la pestaña, en este caso he especificado que sí.

Te explicare un poco que pasa detrás del telón…
Recordemos que el método ready() solo se hace disponible después de que todo el contenido del documento HTML ha sido recibido del servidor, es por eso que dentro de este método he creado un objeto asociado a la capa «fichass» (línea 15) y a través de este objeto le indico a jQuery que a esta capa la convierta en un Widget del tipo Tab (linea 16).

Cuando el método tabs() se ejecuta y detecta que en el parámetro href de los nombres de las pestañas (líneas 36 y 37 de index.html) hay una URL a un archivo, entonces, automáticamente carga el archivo asociado a la primera pestaña a través de Ajax. Léase la documentación del Widget Tab, opción selected aquí.

Si deseáramos que al cargarse el Widget Tab se mostrara por defecto la pestaña 2 entonces deberíamos ejecutar este método con la opción selected: 1. Las fichas se numeran de 0 a n-1, donde n es el numero de pestañas del Widget Tab.

conectar_bd.php
Este archivo se encarga de hacer la conexión a MySql, o en caso de error, mostrar una descripción del porque no se pudo conectar (función mysql_error de MySql). Este archivo es insertado con la función include de PHP dentro de los archivos listarProductos.php y listarCategorias.php.


Este script PHP en resumen; declara una variable global ($conexio, guardara el link de conexión a la base de datos) y define una función llamada conectar_bd() la cual al ser invocada hará la conexión a MySql y dejara esa conexión abierta en la variable global anteriormente mencionada.

listarProductos.php
Este archivo es solicitado al servidor a través de Ajax cada vez que se da click en la primera pestaña. Tiene la función de hacer una consulta a la base de datos para obtener los registros de la tabla productos y a través de un ciclo while desplegarlos:

ID NOMBRE DESCRIPCION FECHA CADUCIDAD PRECIO LISTA PRECIO PUBLICO CATEGORIA


Observa como he realizado un match entre la tabla Productos y la tabla de Categorías a través del campo id_Categoria. Este match lo hago para desplegar el nombre de la categoría en vez de su ID; pues al usuario no le interesa el Id, sino el nombre de la categoría en la que se ha clasificado el producto. Si no entiendes muy bien mi consulta de SQL te recomiendo leer acerca de la instrucción INNER JOIN del lenguaje SQL.

En la línea 52 se cierra conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 11.

listarCategorias.php
Este archivo al igual que el archivo listarProductos.php es solicitado al servidor a través de Ajax, pero ahora cuando se da click en la segunda pestaña (Categorias):

ID NOMBRE DESCRIPCION


Como puedes observar en el código, se hace un barrido completo de la tabla Categorías y a través de un ciclo while se mandan al navegador cada uno de los registros.

En la línea 41 se cierra la conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 11.

Screenshots del ejemplo

A continuación muestro pantallazos del ejemplo en el navegador Chrome de Google.
Ficha Productos:
jquery-tab-productos

Ficha Categorias;
jquery-tab-categorias

Demo

Si gustas ver el ejemplo en ejecución da Click en este enlace.

Si deseas obtener los archivos de código fuente del ejemplo, desde GitHub te los puedes descargar: desde aquí, hay varios ejemplos, la carpeta de este tutorial se llama jquery-control-tab.

Eso es todo, espero que te haya gustado y principalmente que ojalá te sirva en algún proyecto o como practica para aprender.

Si te gusto el articulo, te invito a que me dejes un comentario o me regales un like, así me motivas a escribir más.

Saludos cordiales.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.