PHP

JQuery UI: Como usar el control Tab con MySql

JQuery_UI_LogoEn 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:

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

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.

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:

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:

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):

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 todoo, 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 un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *