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.

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:

• PHP 5 (o superior).
• Un servidor web (ej. IIS o Apache) que tenga soporte para PHP 5.
• El FrameWork JQuery.
• JQuery UI.
• MySql 5 (o superior).
• Gusto por aprender.

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:

/*Crear la base de datos*/
CREATE DATABASE jquerytabs_mysql;
USE jquerytabs_mysql;

/*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)  );
  
/*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) );


/*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);

//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 .');

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:


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:

Si observas la imagen te darás cuenta que dentro de la carpeta css hay una carpeta llamada cupertino; este es el nombre del tema que me descargue de JQuery UI, 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 de la función que tiene cada uno. 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 ejemplo5 que a su vez está dentro de la carpeta jquery, la cual (como se observa en la imagen) es la raíz donde está guardado todo el ejemplo, cuando escribimos dicha URL (http://localhost/jquery/ejemplo5/) en el navegador se desplegara el documento HTML index.html. El código de este archivo lo muestro a continuación:
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ejemplo5 con JQuery :: UI Tabs y MySql</title>
	<!--Hoja de estilo-->
	<link rel="StyleSheet" type="text/css" href="../css/cupertino/jquery-ui-1.8.23.custom.css" />
	<link rel="StyleSheet" type="text/css" href="../css/css_ejemplo5.css" />
	
	<!--Archivos de script de JQuery-->
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<!--Archivo de script del ejemplo-->
	<script type="text/javascript" src="../js/func_ejemplo5.js"></script>

   </head>
   <body>
	 <br/>
	 
		<TABLE WIDTH="95%" BORDER="0">
			<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>
		</TABLE>		

   </body>
</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 7 y 8 se están importando dos hojas de estilos; el primer archivo .css (jquery-ui-1.8.23.custom.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 11 se importa el Framework JQuery.
En la línea 12 se importa la librería JQuery UI.
En la línea 14 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.

@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: 9pt; 
	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: 7.5pt; 
	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 27 a línea 33).

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:

/*
	Descripcion: 	Inicializacion de JQuery y el Widget Tab.
*/

	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 11) y a través de este objeto le indico a jQuery que a esta capa la convierta en un Widget del tipo Tab (linea 12).

Cuando el método tabs() se ejecuta y detecta que en el parámetro href de los nombres de las pestañas (líneas 26 y 27 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 al DBMS 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.

<?php
	
$conexio = null;
function conectar_bd() {
	global $conexio;
	//Definir datos de conexion con el servidor MySQL (local)	
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "jquerytabs_mysql";
	
	//Obtener link de conexion
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}
	
?>

Este script PHP en resumen; declara una variable global ($conexio, guardara el link de conexión a la bd) 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 desplegarlos:

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla productos a la base de datos
	$queryProductos = "SELECT tbl_productos.*,cta_CategoriasProductos.tx_Nombre AS categoria 
						FROM tbl_productos
						INNER JOIN cta_CategoriasProductos
						ON tbl_productos.id_Categoria = cta_CategoriasProductos.id_CategoriaProducto;";
	$resProductos = mysql_query($queryProductos);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
			<TD align="left">FECHA CADUCIDAD</TD>
			<TD align="left">PRECIO LISTA</TD>
			<TD align="left">PRECIO PUBLICO</TD>
			<TD align="left">CATEGORIA</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla productos
	while( $filaProducto = mysql_fetch_array($resProductos) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaProducto['id_producto']; ?></TD>
			<TD><?=$filaProducto['tx_NombreProducto']; ?></TD>
			<TD><?=$filaProducto['tx_Descripcion']; ?></TD>
			<TD><?=$filaProducto['dt_FechaCaducidad']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioCompra']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioPublico']; ?></TD>
			<TD><?=$filaProducto['categoria']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin de ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

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.

En la línea 44 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 3.

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

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla categorias a la base de datos	
	$queryCategorias = "SELECT * FROM cta_CategoriasProductos; ";
	$resCategorias = mysql_query($queryCategorias);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla categorias
	while( $filaCategoria = mysql_fetch_array($resCategorias) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaCategoria['id_CategoriaProducto']; ?></TD>
			<TD><?=$filaCategoria['tx_Nombre']; ?></TD>
			<TD><?=$filaCategoria['tx_Descripcion']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin del ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

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 33 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 3.

Screenshots del ejemplo

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

Ficha Categorias;

Demo

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

 

Eso es todoo, espero que te haya gustado y principalmente que ojalá te sirva. Si deseas el código basta con que dejes tu email y en cuanto vea tu mensaje te hago llegar el ejemplo en un archivo comprimido. Si te gusto el articulo, te invito a que me dejes un comentario, así me motivas a escribir más.

Saludos cordiales.

 
 

Enlaces relacionados:

_JQuery: Introduccion_
_JQuery: Asignar un controlador al evento click de un enlace_