Maestro Detalle Php

1 1 .

P G I N A S

M A E S T R O : : D E T A L L E

11Pginas Maestro :: DetalleEn la prctica anterior introducimos el marco de trabajo que nos permitir crear y probar el funcionamiento de pginas dinmicas que acceden a la base de datos para mostrar sus contenidos en una pgina web. En esta prctica vamos a desarrollar nuestra primera pgina dinmica, un explorador del catlogo de discos de RECORD Store. Utilizaremos comportamiento dinmico para crear una pgina que muestre los distintos registros de la tabla Discos, ordenados por su campo Ranking y de forma que se muestren tres registros cada vez. La pgina ofrecer la posibilidad de navegar por el catlogo de discos, filtrar los discos en funcin del gnero musical seleccionado por el usuario y consultar los detalles de cualquier disco que se est mostrando en la pgina. Al finalizar los ejercicios, habremos aprendido a realizar las siguientes tareas: Crear una pgina que muestre texto e imgenes dinmicas. Crear un conjunto de controles de navegacin por el juego de registros. Crear un men de salto. Filtrar el juego de registros con un valor pasado como parmetro. Conectar una pgina Maestro y su pgina Detalle asociada.

1. Preparacin para crear pginas dinmicasEsta prctica supone que disponemos de los archivos que componen el sitio de ejemplo. En la pgina web de la asignatura existe una versin de dichos archivos, junto con la base de datos necesaria para poder realizar los ejercicios de esta prctica. 1. Accede al sitio web de la asignatura, y dentro de Material adicional, abre el archivo sitio11.zip. Extrae todos los archivos disponibles en la carpeta C:\Sites\RecordStore (Es posible que la carpeta ya no exista en las aulas de prcticas. En este caso, crala nuevamente desde WinZip). Accede al sitio web de la asignatura, y dentro de Material adicional, abre el archivo bd11.zip. Extrae todos los archivos disponibles en la carpeta C:\Archivos de programa\EasyPHP1-7\mysql\data\RSBDatos.

2.

129

1 1 .

P G I N A S


Para poder crear pginas dinmicas deberemos activar el servicio web en nuestro PC de prcticas. Activaremos el servidor web y definiremos el sitio de RECORD Store 3. 4. 5. Ejecuta EasyPHP e inicia el servicio web Apache. Comprueba que el servicio est activado abriendo la direccin web http://localhost. Ejecuta Macromedia Dreamweaver desde el Men de Inicio de Windows. Si los ordenadores se han reinstalado desde la prctica 10 tendrs que volver a definir el sitio web. Para ello define un Nuevo sitio en Dreamweaver con las siguientes caractersticas. Nombre: RECORD Store dinmico. Tecnologa de servidor: PHP MySQL. Forma de trabajo: Editar localmente los archivos y luego cargar al servidorde prueba remoto.

Carpeta local: C:\Sites\RecordStore. Conexin con el servidor: Local/Red. Carpeta remota: C:\Archivos de programa\EasyPHP1-7\www\RecordStore URL: http://localhost/RecordStore/. Proteccin y desproteccin: No activar.

2. Creacin de una pgina MaestroUna vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver, abriremos una pgina dinmica para establecer una conexin con la base de datos. En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el catlogo de RECORD Store. Esta plantilla se convertir en nuestra pgina Maestro para explorar el catlogo de discos. 1. Si hay algn documento en blanco abierto cirralo antes de continuar. Abre el archivo catalogo.php para edicin en Dreamweaver.

130

1 1 .

P G I N A S


Observa la estructura de catalogo.php. La tabla de la izquierda est etiquetada Seleccione un gnero, y la utilizaremos para crear un men con los gneros disponibles que permita filtrar el juego de registros. La tabla de la derecha aparece etiquetada como Catlogo de lbumes, con una divisin en celdas preparada para colocar informacin de los lbumes y los controles que permitan navegar por el juego de registros. 2. Crea una conexin RecordStore con la base de datos que se encuentra almacenada en la carpeta remota C:\Archivos de programa\EasyPHP17\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 aadir comportamiento dinmico finalizaremos la parte esttica aadiendo algunos textos necesarios en la pgina. 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 catlogo. 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. Conexin: RecordStore. Tabla: Discos. Columnas: Todo. Filtro: Ninguno. Ordenar: RANKING Descendente.

131

1 1 .

P G I N A S


Una vez creado el juego de registros, vamos a incluir algunos campos en la pgina para poder explorar el conjunto de registros. Vamos a incluir tanto texto dinmico como imgenes dinmicas. Los campos CARATULA e ICONO contienen la ruta de las distintas imgenes disponibles para cada disco, por lo que las podremos utilizar para generar una imagen dinmica. 5. Haz clic en la celda indicada en la figura siguiente, y selecciona la opcin de men Insertar/Imagen.

Se mostrar el cuadro de dilogo 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 imgenes se haban introducido desde el sistema de archivos. En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar. 6. Selecciona el botn de radio Fuentes de datos. El aspecto del cuadro de dilogo cambia. Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Catalogo .

132

1 1 .

P G I N A S


7. 8.

Selecciona el campo Icono y haz clic en Aceptar. Comprueba el funcionamiento de la imagen dinmica activando el modo Live Data. Ahora completaremos la informacin que se mostrar para cada disco.

9.

Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacin del disco como muestra la figura siguiente. Para separar las distintas lneas no utilices la tecla , sino la combinacin +.

Campo RANKING

10. Comprueba el funcionamiento activando el modo Live Data. Desactvalo cuando termines la comprobacin.

Con las operaciones realizadas disponemos de la base necesaria para asignar a la pgina comportamientos de servidor. Los comportamientos de servidor permiten automatizar operaciones habituales sin necesidad de escribir cdigo.

133

1 1 .

P G I N A S


2.1. Comportamientos de servidorUna vez introducida en la pgina Maestro la informacin que queremos mostrar para cada disco, vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la pgina: Mostrar tres discos cada vez. Navegar por el conjunto de registros. Mostrar o no determinadas partes en funcin de la posicin y la cantidad de registros en el juego. 1. En el panel Aplicacin, haz clic en la solapa Comportamientos del servidor.

Inicialmente, los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imgenes dinmicas definidas.

Vamos a utilizar la fila central de la tabla derecha para crear una regin repetida que visualice tres registros a la vez. 2. Haz clic sobre la imagen dinmica representando el icono del disco. En el Selector de etiquetas, haz clic en la etiqueta de ms a la derecha para seleccionar la fila completa de la tabla.

3.

En el panel Comportamientos del servidor, haz clic en el botn + y selecciona el comportamiento Repetir regin. Se muestra el cuadro de dilogo Repetir regin.

4. 5.

Comprueba que Catalogo es el juego de registros activo y selecciona mostrar 3 registros de una vez. Haz clic en Aceptar para finalizar la definicin. Comprueba el funcionamiento activando el modo Live Data. Desactvalo cuando termines la comprobacin.134

1 1 .

P G I N A S


Al crear una regin repetida podremos visualizar tres registros cada vez. Para poder recorrer todos los registros del juego deberemos aadir comportamientos del servidor para navegar por el juego de registros. 1. 2. Selecciona el texto Primero en la tabla derecha. En el panel Comportamientos del servidor, haz clic en el botn + y selecciona el comportamiento Paginacin de juego de registros > Mover a la primera pgina. Se muestra el cuadro de dilogo Mover a la primera pgina.

3. 4. 5.

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicin. Repite los pasos anteriores para asignar comportamientos de paginacin a los textos Anterior, Siguiente y ltimo. 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 navegacin.

Bsicamente, ya disponemos de una pgina catlogo que nos permite explorar los discos disponibles. Para completar la navegacin, vamos a aadir un contador de registros que nos indique en qu posicin del juego de registros nos encontramos. 1. 2. Selecciona la celda vaca bajo los datos del disco en la tabla derecha. Selecciona la opcin de men Insertar/Objetos de aplicacin/Mostrar recuento de registros/Estado de navegacin de juego de registros. Se muestra el cuadro de dilogo Estado de navegacin de juego de registros.

3.

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicin. Se crea un contador de registros con el aspecto siguiente:

135

1 1 .

P G I N A S


4. 5.

Cambia la palabra Registros por lbumes en el contador de registros. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de los controles de navegacin.

Por ltimo, completaremos los controles de navegacin definiendo algunas partes que solo se mostrarn en determinadas circunstancias. Por ejemplo, no tiene sentido mostrar el control Primero si estamos en el primer registro. Para realizar esta operacin utilizaremos el comportamiento Mostrar regin. 1. 2. Selecciona el texto Primero en la tabla derecha. En el panel Comportamientos del servidor, haz clic en el botn + y selecciona el comportamiento Mostrar regin > Mostrar si no es la primera pgina.

Se muestra el cuadro de dilogo Mostrar si no es la primera pgina

3. 4.

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicin. Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientes: Anterior: Mostrar si no es la primera pgina. Siguiente: Mostrar si no es la ltima pgina. ltimo: Mostrar si no es la ltima pgina. Contador de registros: Mostrar si el juego de registros no esta vaco. Ningn registro cumple el criterio de bsqueda: Mostrar si el juego deregistros esta vaco.

6.

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de los controles de navegacin. Cuando finalices, guarda los cambios en el documento catalogo.php y cirralo en el entorno de trabajo de Dreamweaver.

2.1. Filtrado por categoras. Men de saltoPara completar la pgina Maestro aadiremos un men en la tabla de la izquierda que permita filtrar los registros del juego por el gnero seleccionado. Para ello, deberemos aadir un men de salto con los gneros existentes (Blues, Dance, Infantil, Latino, Pop y Rock) y modificar el juego de registros para incluir el filtrado por gnero.

136

1 1 .

P G I N A S


Para realizar este ejercicio no trabajaremos sobre el documento catalogo.php, sino sobre un documento HTML que tiene la divisin en marcos definida para nuestro sitio RECORD Store en prcticas anteriores. Esto es necesario para poder enlazar los saltos con el marco de destino adecuado. 1. 2. 3. Abre el archivo catalogo.htm para edicin en Dreamweaver. En la tabla izquierda, haz clic al final del texto Seleccione un gnero en la lista inferior y pulsa la tecla para crear un nuevo prrafo. Selecciona la opcin de men Insertar/Formulario/Men de salto. Se muestra el cuadro de dilogo Insertar men de salto.

En este cuadro de dilogo 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 seleccin. 5. 6. En el campo Texto introduce el texto Blues. Haz clic en el botn Examinar... situado a la derecha de la caja de texto Alseleccionarse, 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 botn Parmetros situado a la derecha de la caja de texto URL:

Mediante este botn podemos definir un conjunto de parmetros que se pasarn al documento enlazado. En este caso utilizaremos un nico parmetro GENERO al que le daremos el valor Blues.137

1 1 .

P G I N A S


8.

En el campo Nombre introduce el texto GENERO, y en el campo Valor introduce el texto Blues. Haz clic en Aceptar para definir el parmetro y volver al Selector de archivos. 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 dilogo Insertar men de salto. El enlace indica que se saltar al documento catalogo.php pasando un valor Blues en el parmetro GENERO.

9.

10. Selecciona marco mainFrame en la lista Abrir URL en: 11. Utiliza el botn + en el cuadro de dilogo Insertar men de salto para aadir los gneros Dance, Infantil, Latino, Pop y Rock al men. En todos los casos debers enlazar con el documento catalogo.php, dndole el valor adecuado al parmetro GENERO. Recuerda abrir el documento en el marco mainFrame. Vamos a aadir un ltimo elemento al men, un campo que no se corresponde con ningn gnero y que se utiliza para indicar la utilidad del men. 12. Utiliza el botn + en el cuadro de dilogo Insertar men de salto para aadir una nueva entrada al men con el texto Seleccione gnero. Enlaza la entrada con el documento catalogo.php, dndole al parmetro GENERO el valor %. para llevar la entrada creada a la primera posicin del 13. Utiliza el botn men y haz clic en Aceptar para crear el men y cerrar el dilogo. Para finalizar el proceso, modificaremos el juego de registros en catalogo.php para utilizar el valor del parmetro GENERO en el filtrado de los registros. 1. 2. En el panel Comportamientos del servidor, haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicin del juego de registros. Define el filtro de registros de la forma siguiente:

138

1 1 .

P G I N A S


3.

Haz clic en el botn Prueba. En el cuadro de dilogo, introduce distintos gneros y observa el resultado. Comprueba el resultado al introducir un valor % para el parmetro GENERO.

Ya tenemos completa nuestra pgina de catlogo. Finalizaremos el ejercicio enlazndola desde la pgina de presentacin index.htm. 1. 2. Cierra el documento catalogo.htm guardando los cambios. Abre index.htm para edicin en Dreamweaver. Selecciona el botn Catlogo y enlzalo con el documento catalogo.php pasando un parmetro GENERO con un valor %. Abre el documento en el marco mainFrame. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento del men de salto y los controles de navegacin.

3.

Ejercicio 11.1

3. Creacin de la pgina DetalleHabitualmente, las pginas Maestro pginas que muestran los resultados de una bsqueda muestran pocos campos de cada registro en una estructura de tabla. Tambin es habitual que algn campo de cada registro en la pgina Maestro est enlazado con otra pgina en la que se muestra informacin detallada del registro. A esta ltima pgina se le denomina pgina Detalle. Vamos a crear una pgina Detalle para nuestro sitio de ejemplo RECORD Store. Para ello ser necesario completar los siguientes pasos: Disear una pgina para mostrar los detalles de un disco. Crear en la pgina un juego de registros con un solo registro. Utilizaremos el CODIGO del registro para relacionar la pgina Maestro con la Detalle, ya que es una clave primaria sin duplicados. Seleccionar en la pgina Maestro el campo que utilizaremos para enlazar con la pgina Detalle y pasar el CODIGO del disco como parmetro. El primer paso necesario ser disear una pgina para mostrar los detalles de un disco. En nuestro caso, utilizaremos la misma plantilla que para el catlogo, disponible en el fichero detalle.php que has descargado desde la pgina web de la asignatura. 1. Cierra todos los documentos en edicin guardando los cambios si procede. Abre el archivo detalle.php para edicin en Dreamweaver.

139

1 1 .

P G I N A S


El documento presenta el aspecto habitual del sitio. Para poder aadir el contenido dinmico a la pgina, ser necesario crear un nuevo juego de registros que seleccione un nico registro, aquel cuyo campo CODIGO coincida con el valor del parmetro CODIGO. 14. En el panel Vinculaciones, haz clic en el botn + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes:

2.

Haz clic en el botn Prueba para comprobar el funcionamiento del juego de registros. Introduce un cdigo de disco existente, como 000116. Cuando finalices la prueba, haz clic en Aceptar para crear el juego de registros. Utiliza los distintos campos del juego de registros para completar la pgina Detalle con el contenido que se muestra a continuacin:

3.

Campo CARATULA

Campo RANKING

4.

Cuando termines, guarda los cambios en el documento detalle.php y abre para edicin el documento catalogo.php. La ltima operacin a realizar es crear un enlace a la pgina Detalle desde la pgina Maestro. Utilizaremos el ICONO del disco como soporte para el enlace.140

1 1 .

P G I N A S


5.

En el documento catalogo.php, selecciona el smbolo de imagen dinmica 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 parmetro 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 pgina Maestro como de la pgina Detalle preparadas para comprobar el funcionamiento de nuestro catlogo. 7. Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador. Prueba el funcionamiento de acceso a la pgina detalle. Ejercicio 11.2

EjerciciosEjercicio 11.1Selecciona el men de salto en la tabla izquierda y haz clic en el botn Valores de la lista en el Inspector de propiedades. Aade un nuevo gnero Noexiste que pase el valor Noexiste en el parmetro GENERO. Comprueba el funcionamiento de los comportamientos Mostrar regin cuando el juego de registros no contiene resultados.

141

Maestro Detalle Php

Documents

Transcript of Maestro Detalle Php