julio 03, 2012

Dreamweaver: Usando El Asistente Para Recuperar Datos

Para este ejercicio usaré Dreamweaver CS3 para recuperar y mostrar datos desde la base de datos “datos” de MySQL y de la tabla “clientes” (Sobre la instalación de estos servicios aquí).
La tabla “clientes tiene solo 4 campos, el primero además de ser el campo clave es auto-incremental, la estructura es (info sobre el uso de PHP My Admin en este post):
image
El script para la BD es el siguiente (he quitado los comentarios):

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
CREATE DATABASE `dbnegocio` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `dbnegocio`;

CREATE TABLE `clientes` (
  `cod_clie` int(11) NOT NULL auto_increment,
  `nom_clie` varchar(25) NOT NULL,
  `ruc_clie` varchar(11) NOT NULL,
  `dir_clie` varchar(100) NOT NULL,
  PRIMARY KEY  (`cod_clie`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

INSERT INTO `clientes` VALUES (1, 'Luis Miguel', '10258945101', 'Av. Miami 990');
INSERT INTO `clientes` VALUES (2, 'Freddy Albarracín', '10451278361', 'Av. Arenales 789');
INSERT INTO `clientes` VALUES (3, 'Juan Godoy', '14784598652', 'Calle Las Magnolias s/n');
INSERT INTO `clientes` VALUES (4, 'Betel García', '20142536784', 'Los Frejoles 478');
INSERT INTO `clientes` VALUES (5, 'Luisa Pérez', '20144778666', 'Urb. Los Pecanos J-5');
INSERT INTO `clientes` VALUES (6, 'Dina Meza', '20141512178', 'Los Naranjos 357');

Tenemos configurado un sitio Web con Dreamweaver para trabajar con el servidor PHP (sobre la implementación del sitio Web aquí), para no perder la originalidad, el sitio se llama “datos”.
En esencia, recordemos los siguientes datos:
  1. Servidor (en el puerto 3000): localhost
  2. Usuario: root
  3. Password: ****
  4. Base de datos MySQL: dbnegocio
  5. Tabla: clientes
Seguiremos una secuencia de tres pasos para recuperar y mostrar los datos de los clientes:
  1. Establecer la conexión al servidor (La conexión).
  2. Recuperar los datos de la tabla (El juego de registros).
  3. Mostrar los datos, “escribiéndolos” en una página (La tabla dinámica).

LA CONEXIÓN

image
Este es nuestro sitio al que le he agregado un nuevo archivo “lista_clientes.php” (los otros archivos no son realmente necesarios para este ejercicio), abrimos esta página y le ponemos un encabezado como “Lista de Clientes”.
Ahora buscamos la pestaña “Bases de datos” (o menú Ventana, ítem Bases de datos):
image
El botón con el signo de adición nos permitirá agregar una nueva conexión a una BD MySQL, clic allí, clic en “Conexión MySQL”:
image
El siguiente cuadro de diálogo pide los datos:
  1. Nombre que le asignaremos a esta nueva conexión: cone
  2. Nombre del servidor MySQL: localhost
  3. Nombre de usuario con el que ingresaremos al servidor: root
  4. La contraseña del usuario: (aquí coloca tu contraseña de acceso, si trabajas con WampServer por defecto no usa contraseña, déjala en blanco)
  5. El nombre de la base de datos que deseamos usar: dbnegocio (Si en este punto usamos el botón “Seleccionar” se muestran las BD disponibles en el servidor, seleccione y acepte).
El cuadro de diálogo quedaría así:
image
Clic en el botón “Aceptar”. En tu sitio debe haberse agregado la carpeta “Connections” conteniendo el archivo “cone.php”, el mismo que contiene las instrucciones de conexión al servidor de BD.

EL JUEGO DE REGISTROS

Usaremos la pestaña “Vinculaciones” a la derecha de la pestaña “Bases de datos” usada en el paso anterior, igualmente usamos el botón con el signo de adición para agregar un nuevo “Juego de registros”:
image
El cuadro de diálogo nos pide que indiquemos:
image
  1. Nombre para el nuevo juego de registros: rsClientes (rs por Record Set)
  2. Qué conexión deseamos usar (solo tenemos una): cone
  3. De que tabla deseamos recuperar los datos: clientes
  4. Los datos de que columna(s) deseamos recuperar, la opción “Seleccionado” nos permite seleccionar una o más columnas de la lista, para este ejercicio lo dejamos en la opción “Todo”.
  5. Si deseamos usar un filtro con “Where”, no esta vez: Ninguno
  6. Si deseamos ordenar por algún campo en particular (order By): Ninguno
Establecidos los valores (el botón Prueba nos dará una vista preliminar) clic en “Aceptar”, con esta acción ya tenemos el procedimiento para recuperar todos los datos de la tabla “clientes”, la implementación la podrás revisar en el código de la pagina.

LA TABLA DINÁMICA

Ahora a mostrar los datos en nuestra página lista_clientes.php, colocamos el cursor debajo del encabezado, buscamos la pestaña “Datos” de la barra “Insertar” debajo de la barra de menú en CS3 (CS4 y posteriores lo muestra en vertical en un panel al lado derecho), buscamos la herramienta “Datos dinámicos” (tiene el ícono de un rayo amarillo) y en el desplegable damos clic en la opción “Tablas dinámicas”:
image
El cuadro de diálogo nos pide los datos siguientes:
  1. Que juego de registros tiene los datos que deseamos mostrar en la tabla: rsClientes
  2. Cuantos registros queremos mostrar, en este caso está seleccionado por defecto de 10 en 10 (solo 10 clientes a la vez), o la opción “Todos los registros”.
  3. Borde de la tabla: 1
  4. Relleno de celda y espacio entre celdas, los dejamos en blanco para que usen los valores por defecto.
  5. Aceptar.
image
El diseño de tu página habrá quedado así:
image
Cárgala en tu navegador (F12) y debes tener la lista de tus clientes.
image

UN PASO MÁS: LA NAVEGACIÓN DE PÁGINAS

Como tenemos solo 6 registros y hemos decidido mostrarlos de 10 en 10 no hay problema, pero la tabla irá creciendo y ¿Cómo veremos el registro 11 y los que se agreguen después? Pues necesitaremos una herramienta para pasar de una página a otra.
Primero, cambiemos el bloque para mostrar los registros de 2 en 2, en Dreamweaver, en la pestaña “Comportamientos del servidor” (a la derecha de Vinculaciones) doble clic en “Repetir región”, se muestra el cuadro de diálogo del mismo nombre, cambiamos el valor 10 por 2 y aceptamos.
image
Ahora en la página lista_clientes.php, ubicamos el cursor (con un clic) entre el encabezado y la tabla dinámica, en la pestaña “Datos” de la barra “Insertar” buscamos “Paginación de juego de registros”, clic en el ítem “Barra de navegación de juego de registros”:
image
El cuadro de diálogo nos pide dos datos:
  1. Nombre del juego de registros: rsClientes
  2. Si deseamos usar texto (anterior, primero, siguiente, último) o imágenes (con las clásicas flechitas), seleccione una opción y acepte.
Deje la opción “Texto” y en la vista diseño muestra lo siguiente:
image
F12 para cargar la página y tendremos el problema de paginación automáticamente resuelto.
image
¿Qué tal? ¿Alguna pregunta?

No hay comentarios.:

Publicar un comentario

Tu comentario