CREACIÓN DE UNA PÁGINA MAESTRO
Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver, abriremos una página dinámica para establecer una conexión con la base de datos. En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el catálogo de RECORD Store. Esta plantilla se convertirá en nuestra página Maestro para explorar el catálogo de discos.
1. Si hay algún documento en blanco abierto ciérralo antes de continuar. Abre el archivo catalogo.php para edición en Dreamweaver.
Observa la estructura de catalogo.php. La tabla de la izquierda está etiquetada “Seleccione un género”, y la utilizaremos para crear un menú con los géneros disponibles que permita filtrar el juego de registros. La tabla de la derecha aparece etiquetada como “Catálogo de álbumes”, con una división en celdas preparada para colocar información de los álbumes y los controles que permitan navegar por el juego de registros.
2. Crea una conexión RecordStore con la base de datos que se encuentra almacenada en la carpeta remota C:\Archivos de programa\EasyPHP1- 7\mysql\data\RSBDatos. Será necesario que definas un origen ODBC para la base de datos con el nombre RECORD Store de tipo DSN de Sistema.
Ya tenemos el documento preparado para mostrar registros. Antes de añadir comportamiento dinámico finalizaremos la parte estática añadiendo algunos textos necesarios en la página.
3. Introduce los textos que se muestran en la figura siguiente. Centra los textos “Primero”, “Anterior”, “Siguiente” y “Último”
Ahora crearemos un nuevo juego de registros para nuestro catálogo. Inicialmente seleccionaremos todos los discos disponibles, ordenados por su campo Ranking de forma descendente.
4. Activa el panel Vinculaciones y crea un nuevo Juego de registros (consulta). Define los siguientes valores para el juego de registros:
· Nombre: Catalogo.
· Conexión: RecordStore.
· Tabla: Discos.
· Columnas: Todo.
· Filtro: Ninguno.
· Ordenar: RANKING Descendente.
Una vez creado el juego de registros, vamos a incluir algunos campos en la página para poder explorar el conjunto de registros. Vamos a incluir tanto texto dinámico como imágenes dinámicas. Los campos CARATULA e ICONO contienen la ruta de las distintas imágenes disponibles para cada disco, por lo que las podremos utilizar para generar una imagen dinámica.
5. Haz clic en la celda indicada en la figura siguiente, y selecciona la opción de menú Insertar/Imagen.
Se mostrará el cuadro de diálogo Seleccionar origen de imagen. En la parte superior del cuadro, un grupo de botones de radio permite seleccionar el tipo de origen de la imagen: Sistema de archivos o Fuentes de datos.
Hasta ahora todas las imágenes se habían introducido desde el sistema de archivos. En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar.
6. Selecciona el botón de radio Fuentes de datos.
El aspecto del cuadro de diálogo cambia. Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Catalogo.
7. Selecciona el campo Icono y haz clic en Aceptar.
8. Comprueba el funcionamiento de la imagen dinámica activando el modo Live Data.
Ahora completaremos la información que se mostrará para cada disco.
9. Desactiva la vista Live Data y realiza las operaciones necesarias para completar la información del disco como muestra la figura siguiente. Para separar las distintas líneas no utilices la tecla , sino la combinación +.
10. Comprueba el funcionamiento activando el modo Live Data. Desactívalo cuando termines la comprobación.
Con las operaciones realizadas disponemos de la base necesaria para asignar a la página comportamientos de servidor. Los comportamientos de servidor permiten automatizar operaciones habituales sin necesidad de escribir código.
COMPORTAMIENTOS DE SERVIDOR
Una vez introducida en la página Maestro la información que queremos mostrar para cada disco, vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la página:
• Mostrar tres discos cada vez.
• Navegar por el conjunto de registros.
• Mostrar o no determinadas partes en función de la posición y la cantidad de registros en el juego.
1. En el panel Aplicación, haz clic en la solapa Comportamientos del servidor.
Inicialmente, los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imágenes dinámicas definidas.
Vamos a utilizar la fila central de la tabla derecha para crear una región repetida que visualice tres registros a la vez.
2. Haz clic sobre la imagen dinámica representando el icono del disco. En el Selector de etiquetas, haz clic en la etiqueta de más a la derecha para seleccionar la fila completa de la tabla.
3. En el panel Comportamientos del servidor, haz clic en el botón + y selecciona el comportamiento Repetir región.
Se muestra el cuadro de diálogo Repetir región.
4. Comprueba que Catalogo es el juego de registros activo y selecciona mostrar 3 registros de una vez. Haz clic en Aceptar para finalizar la definición.
5. Comprueba el funcionamiento activando el modo Live Data. Desactívalo cuando termines la comprobación.
Al crear una región repetida podremos visualizar tres registros cada vez. Para poder recorrer todos los registros del juego deberemos añadir comportamientos del servidor para navegar por el juego de registros.
1. Selecciona el texto Primero en la tabla derecha.
2. En el panel Comportamientos del servidor, haz clic en el botón + y selecciona el comportamiento Paginación de juego de registros > Mover a la primera página.
Se muestra el cuadro de diálogo Mover a la primera página.
3. Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definición.
4. Repite los pasos anteriores para asignar comportamientos de paginación a los textos Anterior, Siguiente y Último.
5. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url http://localhost/RecordStore/index.htm. Prueba el funcionamiento de los controles de navegación.
Básicamente, ya disponemos de una página catálogo que nos permite explorar los discos disponibles. Para completar la navegación, vamos a añadir un contador de registros que nos indique en qué posición del juego de registros nos encontramos.
1. Selecciona la celda vacía bajo los datos del disco en la tabla derecha.
2. Selecciona la opción de menú Insertar/Objetos de aplicación/Mostrar recuento de registros/Estado de navegación de juego de registros.
Se muestra el cuadro de diálogo Estado de navegación de juego de registros.
3. Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definición.
Se crea un contador de registros con el aspecto siguiente:
4. Cambia la palabra Registros por Álbumes en el contador de registros.
5. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de los controles de navegación.
Por último, completaremos los controles de navegación definiendo algunas partes que solo se mostrarán en determinadas circunstancias. Por ejemplo, no tiene sentido mostrar el control Primero si estamos en el primer registro. Para realizar esta operación utilizaremos el comportamiento Mostrar región.
1. Selecciona el texto Primero en la tabla derecha.
2. En el panel Comportamientos del servidor, haz clic en el botón + y selecciona el comportamiento Mostrar región > Mostrar si no es la primera página.
Se muestra el cuadro de diálogo Mostrar si no es la primera página
3. Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definición.
4. Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientes:
· Anterior: Mostrar si no es la primera página.
· Siguiente: Mostrar si no es la última página.
· Último: Mostrar si no es la última página.
· Contador de registros: Mostrar si el juego de registros no está vacío.
· Ningún registro cumple el criterio de búsqueda: Mostrar si el juego de registros está vacío.
5. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de los controles de navegación. Cuando finalices, guarda los cambios en el documento catalogo.php y ciérralo en el entorno de trabajo de Dreamweaver.
FILTRADO POR CATEGORÍAS: MENÚ DE SALTO
Para completar la página Maestro añadiremos un menú en la tabla de la izquierda que permita filtrar los registros del juego por el género seleccionado. Para ello, deberemos añadir un menú de salto con los géneros existentes (Blues, Dance, Infantil, Latino, Pop y Rock) y modificar el juego de registros para incluir el filtrado por género.
Para realizar este ejercicio no trabajaremos sobre el documento catalogo.php, sino sobre un documento HTML que tiene la división en marcos definida para nuestro sitio RECORD Store en prácticas anteriores. Esto es necesario para poder enlazar los saltos con el marco de destino adecuado.
1. Abre el archivo catalogo.htm para edición en Dreamweaver.
2. En la tabla izquierda, haz clic al final del texto “Seleccione un género en la lista inferior” y pulsa la tecla para crear un nuevo párrafo.
3. Selecciona la opción de menú Insertar/Formulario/Menú de salto.
Se muestra el cuadro de diálogo Insertar menú de salto.
En este cuadro de diálogo podemos editar los distintos elementos del menú.
Para cada elemento deberemos indicar el texto que se mostrará en la entrada del menú y la URL a la que saltaremos al hacer una selección.
5. En el campo Texto introduce el texto Blues.
6. Haz clic en el botón Examinar... situado a la derecha de la caja de texto Al seleccionarse, ir a URL:
Se despliega un Selector de archivos. Queremos que al seleccionar una entrada del menú se recargue el documento catalogo.php, que deberá recibir de alguna forma el valor seleccionado en el menú para poder filtrar los registros.
7. Selecciona el archivo catalogo.php y haz clic en el botón Parámetros situado a la derecha de la caja de texto URL:
Mediante este botón podemos definir un conjunto de parámetros que se pasarán al documento enlazado. En este caso utilizaremos un único parámetro – GENERO – al que le daremos el valor Blues.
8. En el campo Nombre introduce el texto GÉNERO, y en el campo Valor introduce el texto Blues. Haz clic en Aceptar para definir el parámetro y volver al Selector de archivos.
9. Haz clic en Aceptar para seleccionar el documento catalogo.php como destino del menú de salto.
Observa el enlace que aparece en la caja Al seleccionarse ir a URL: en el cuadro de diálogo Insertar menú de salto. El enlace indica que se saltará al documento catalogo.php pasando un valor Blues en el parámetro GENERO.
10. Selecciona marco “mainFrame” en la lista Abrir URL en:
11. Utiliza el botón + en el cuadro de diálogo Insertar menú de salto para añadir los géneros Dance, Infantil, Latino, Pop y Rock al menú. En todos los casos deberás enlazar con el documento catalogo.php, dándole el valor adecuado al parámetro GENERO. Recuerda abrir el documento en el marco mainFrame.
Vamos a añadir un último elemento al menú, un campo que no se corresponde con ningún género y que se utiliza para indicar la utilidad del menú.
12. Utiliza el botón + en el cuadro de diálogo Insertar menú de salto para añadir una nueva entrada al menú con el texto Seleccione género. Enlaza la entrada con el documento catalogo.php, dándole al parámetro GENERO el valor %.
13. Utiliza el botón para llevar la entrada creada a la primera posición del menú y haz clic en Aceptar para crear el menú y cerrar el diálogo.
Para finalizar el proceso, modificaremos el juego de registros en catalogo.php para utilizar el valor del parámetro GÉNERO en el filtrado de los registros.
1. En el panel Comportamientos del servidor, haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definición del juego de registros.
2. Define el filtro de registros de la forma siguiente:
3. Haz clic en el botón Prueba. En el cuadro de diálogo, introduce distintos géneros y observa el resultado. Comprueba el resultado al introducir un valor % para el parámetro GÉNERO.
Ya tenemos completa nuestra página de catálogo. Finalizaremos el ejercicio enlazándola desde la página de presentación index.htm.
1. Cierra el documento catalogo.htm guardando los cambios. Abre index.htm para edición en Dreamweaver.
2. Selecciona el botón Catálogo y enlázalo con el documento catalogo.php pasando un parámetro GENERO con un valor %. Abre el documento en el marco mainFrame.
3. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento del menú de salto y los controles de navegación.
CREACIÓN DE LA PÁGINA DETALLE
Habitualmente, las páginas Maestro – páginas que muestran los resultados de una búsqueda – muestran pocos campos de cada registro en una estructura de tabla.
También es habitual que algún campo de cada registro en la página Maestro esté enlazado con otra página en la que se muestra información detallada del registro.
A esta última página se le denomina página Detalle.
Vamos a crear una página Detalle para nuestro sitio de ejemplo RECORD Store.
Para ello será necesario completar los siguientes pasos:
• Diseñar una página para mostrar los detalles de un disco.
• Crear en la página un juego de registros con un solo registro. Utilizaremos el CODIGO del registro para relacionar la página Maestro con la Detalle, ya que es una clave primaria sin duplicados.
• Seleccionar en la página Maestro el campo que utilizaremos para enlazar con la página Detalle y pasar el CODIGO del disco como parámetro.
El primer paso necesario será diseñar una página para mostrar los detalles de un disco. En nuestro caso, utilizaremos la misma plantilla que para el catálogo, disponible en el fichero detalle.php que has descargado desde la página web de la asignatura.
1. Cierra todos los documentos en edición guardando los cambios si procede.
Abre el archivo detalle.php para edición en Dreamweaver.
El documento presenta el aspecto habitual del sitio. Para poder añadir el contenido dinámico a la página, será necesario crear un nuevo juego de registros que seleccione un único registro, aquel cuyo campo CODIGO coincida con el valor del parámetro CODIGO.
14. En el panel Vinculaciones, haz clic en el botón + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes:
2. Haz clic en el botón Prueba para comprobar el funcionamiento del juego de registros. Introduce un código de disco existente, como 000116. Cuando finalices la prueba, haz clic en Aceptar para crear el juego de registros.
3. Utiliza los distintos campos del juego de registros para completar la página Detalle con el contenido que se muestra a continuación:
4. Cuando termines, guarda los cambios en el documento detalle.php y abre para edición el documento catalogo.php.
La última operación a realizar es crear un enlace a la página Detalle desde la página Maestro. Utilizaremos el ICONO del disco como soporte para el enlace.
5. En el documento catalogo.php, selecciona el símbolo de imagen dinámica correspondiente al campo ICONO.
6. En el menú Insertar -> Hipervinculos, crea un vinculo para que al hacer clic sobre el icono se acceda a la pagina de detalle (detalle.php) y se pase el parámetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic. El resultado del enlace debe ser:
detalle.php?CODIGO=
Ya disponemos tanto de la página Maestro como de la página Detalle preparadas para comprobar el funcionamiento de nuestro catálogo.
7. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de acceso a la página detalle.
