UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

TEMA Manejo de Formularios Maestro Detalle con PHP

OBJETIVOS Conocer el procedimiento correcto para la creacioacuten de formularios Maestro

Detalle con Php para facilitar y mejorar la calidad de reportes solicitados en los diferentes sistemas

Crear formularios Maestro Detalle para comprender y aplicar los conocimientos teoacutericos obtenidos sobre este tema

Optimizar recursos en el desarrollo de proyectos web mediante la aplicacioacuten de Formularios Maestro Detalle con PHP

RESUMEN

Con mucha frecuencia debemos sacar datos de dos tablas que estaacuten relacionadas entre siacute por un campo comuacuten a las dos por ejemplo para mostrar los datos de un cliente y todas sus facturas (en la factura tendreacute el coacutedigo del cliente) o los datos de un libro y todas las compras que tenemos de ese libro (en la tabla compras tendreacute el coacutedigo del libro comprado)

Pues Dreamweaver facilita la creacioacuten de paacuteginas de este tipo y las denomina Maestro-Detalle porque sacan datos de un archivo Maestro (clientes y productos) y enlazan cada registro con una paacutegina donde se visualizan los registros correspondientes del archivo Detalle (las facturas y las compras)

Al desarrollar aplicaciones Web puede crear raacutepidamente paacuteginas maestra-detalle

utilizando el objeto de datos Juego de paacuteginas Maestro-Detalle

1 Para crear una paacutegina dinaacutemica en blanco seleccione Archivo gt Nuevo gt

Paacutegina en blanco seleccione una paacutegina dinaacutemica de la lista Tipo de paacutegina

y haga clic en Crear

Esta paacutegina seraacute la paacutegina maestra

2 Defina un juego de registros para la paacutegina

Aseguacuterese de que el juego de registros contiene no soacutelo todas las

columnas necesarias para la paacutegina maestra sino tambieacuten todas las

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

columnas necesarias para la paacutegina detalle Normalmente el juego de

registros de la paacutegina maestra extrae unas pocas columnas de una tabla de

una base de datos mientras que un juego de registros de la paacutegina detalle

extrae maacutes columnas de la misma tabla para proporcionar informacioacuten

adicional

3 Abra la paacutegina maestra en la vista Disentildeo y elija Insertar gt Objetos de

datos gt Juego de paacuteginas Maestro-Detalle

4 En el menuacute emergente Juego de registros aseguacuterese de que estaacute elegido el

juego de registros que contiene los registros que desea visualizar en la

paacutegina maestra

5 En el aacuterea Campos de paacutegina Maestro seleccione las columnas del juego de

registros que deben visualizarse en la paacutegina maestra

De forma predeterminada se seleccionan todas las columnas del juego de

registros Si el juego de registros contiene una columna de clave exclusiva

como por ejemplo recordID seleccioacutenela y haga clic en el botoacuten de signo

menos (-) para que no aparezca en la paacutegina

6 Para cambiar el orden en el que aparecen las columnas en la paacutegina

maestra seleccione una columna de la lista y haga clic en la flecha arriba o

abajo

En la paacutegina maestra las columnas del juego de registros estaacuten dispuestas

horizontalmente en una tabla Al hacer clic en la flecha arriba se desplaza

la columna hacia la izquierda al hacer clic en la flecha abajo se desplaza la

columna hacia la derecha

7 En el menuacute emergente Vincular con detalle desde elija la columna del

juego de registros que mostraraacute un valor que tambieacuten serviraacute como

viacutenculo con la paacutegina detalle

Por ejemplo si desea que cada nombre de producto de la paacutegina maestra

tenga un viacutenculo con la paacutegina detalle elija la columna del juego de

registros que contiene los nombres de los productos

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

8 En el menuacute emergente Pasar clave exclusiva elija la columna del juego de

registros que contiene valores que identifican a los registros

Normalmente la columna elegida es la que contiene el nuacutemero de ID Este

valor se pasa a la paacutegina detalle para que pueda identificar el registro

elegido por el usuario

9 Desactive la opcioacuten Numeacuterico si la columna de clave exclusiva no es

numeacuterica

Nota Esta opcioacuten aparece activada de manera predeterminada y no

aparece para todos los modelos de servidor

10 Especifique el nuacutemero de registros que deben mostrarse en la paacutegina

maestra

11 En el cuadro Nombre de paacutegina detalle haga clic en Examinar y localice el

archivo de paacutegina detalle que ha creado o introduzca un nombre para que

el objeto de datos la cree automaacuteticamente

12 En el aacuterea Campos de paacutegina Detalle seleccione las columnas que deben

visualizarse en la paacutegina detalle

De forma predeterminada se seleccionan todas las columnas del juego de

registros de la paacutegina maestra Si el juego de registros contiene una

columna de clave exclusiva como por ejemplo recordID seleccioacutenela y

haga clic en el botoacuten de signo menos (-) para que no aparezca en la paacutegina

detalle

13 Para cambiar el orden en el que aparecen las columnas en la paacutegina

detalle seleccione una columna de la lista y haga clic en la flecha arriba o

abajo

En la paacutegina detalle las columnas del juego de registros estaacuten dispuestas

verticalmente en una tabla Al hacer clic en la flecha arriba se desplaza la

columna hacia arriba al hacer clic en la flecha abajo se desplaza la

columna hacia abajo

14 Haga clic en Aceptar

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El objeto de datos crea una paacutegina detalle (si no la ha creado usted antes) y

antildeade contenido dinaacutemico y comportamientos de servidor tanto a la

paacutegina maestra como a la paacutegina detalle

15 Personalice el disentildeo de las paacuteginas maestra y detalle de acuerdo con sus

necesidades

Puede personalizar totalmente el disentildeo de cada paacutegina utilizando las

herramientas de disentildeo de paacuteginas de Dreamweaver Tambieacuten puede

editar los comportamientos de servidor haciendo doble clic en ellos en el

panel Comportamientos del servidor

Despueacutes de crear paacuteginas maestra y detalle con el objeto de datos utilice el

panel Comportamientos del servidor (Ventana gt Comportamientos del

servidor) para modificar los diferentes elementos que el objeto de datos

inserta en las paacuteginas

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

CUERPO DEL TRABAJO

P Aacute G I N A S M A E S T R O D E T A L L E

Para poder crear paacuteginas dinaacutemicas deberemos activar el servicio web en nuestroPC de praacutecticas Activaremos el servidor web y definiremos el sitio de RECORDStore1 Ejecuta EasyPHP e inicia el servicio web Apache Comprueba que el servicio

estaacute activado abriendo la direccioacuten web httplocalhost2 Ejecuta Macromedia Dreamweaver desde el Menuacute de Inicio de Windows3 Define un Nuevo sitio en Dreamweaver con las siguientes caracteriacutesticas

Nombre RECORD Store dinaacutemico Tecnologiacutea de servidor PHP MySQL Forma de trabajo Editar localmente los archivos y luego cargar al servidor

de prueba remoto Carpeta local CSitesRecordStore Conexioacuten con el servidor LocalRed Carpeta remota CArchivos de programaEasyPHP1-7wwwRecordStore URL httplocalhostRecordStore Proteccioacuten y desproteccioacuten No activar

Creacioacuten de una paacutegina Maestro

Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver abriremos una paacutegina dinaacutemica para establecer una conexioacuten con la base de datos En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el cataacutelogo de RECORD Store Esta plantilla se convertiraacute en nuestra paacutegina Maestro para explorar el cataacutelogo de discos

1 Si hay alguacuten documento en blanco abierto cieacuterralo antes de continuar Abre el archivo catalogophp para edicioacuten en Dreamweaver

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

columnas necesarias para la paacutegina detalle Normalmente el juego de

registros de la paacutegina maestra extrae unas pocas columnas de una tabla de

una base de datos mientras que un juego de registros de la paacutegina detalle

extrae maacutes columnas de la misma tabla para proporcionar informacioacuten

adicional

3 Abra la paacutegina maestra en la vista Disentildeo y elija Insertar gt Objetos de

datos gt Juego de paacuteginas Maestro-Detalle

4 En el menuacute emergente Juego de registros aseguacuterese de que estaacute elegido el

juego de registros que contiene los registros que desea visualizar en la

paacutegina maestra

5 En el aacuterea Campos de paacutegina Maestro seleccione las columnas del juego de

registros que deben visualizarse en la paacutegina maestra

De forma predeterminada se seleccionan todas las columnas del juego de

registros Si el juego de registros contiene una columna de clave exclusiva

como por ejemplo recordID seleccioacutenela y haga clic en el botoacuten de signo

menos (-) para que no aparezca en la paacutegina

6 Para cambiar el orden en el que aparecen las columnas en la paacutegina

maestra seleccione una columna de la lista y haga clic en la flecha arriba o

abajo

En la paacutegina maestra las columnas del juego de registros estaacuten dispuestas

horizontalmente en una tabla Al hacer clic en la flecha arriba se desplaza

la columna hacia la izquierda al hacer clic en la flecha abajo se desplaza la

columna hacia la derecha

7 En el menuacute emergente Vincular con detalle desde elija la columna del

juego de registros que mostraraacute un valor que tambieacuten serviraacute como

viacutenculo con la paacutegina detalle

Por ejemplo si desea que cada nombre de producto de la paacutegina maestra

tenga un viacutenculo con la paacutegina detalle elija la columna del juego de

registros que contiene los nombres de los productos

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

8 En el menuacute emergente Pasar clave exclusiva elija la columna del juego de

registros que contiene valores que identifican a los registros

Normalmente la columna elegida es la que contiene el nuacutemero de ID Este

valor se pasa a la paacutegina detalle para que pueda identificar el registro

elegido por el usuario

9 Desactive la opcioacuten Numeacuterico si la columna de clave exclusiva no es

numeacuterica

Nota Esta opcioacuten aparece activada de manera predeterminada y no

aparece para todos los modelos de servidor

10 Especifique el nuacutemero de registros que deben mostrarse en la paacutegina

maestra

11 En el cuadro Nombre de paacutegina detalle haga clic en Examinar y localice el

archivo de paacutegina detalle que ha creado o introduzca un nombre para que

el objeto de datos la cree automaacuteticamente

12 En el aacuterea Campos de paacutegina Detalle seleccione las columnas que deben

visualizarse en la paacutegina detalle

De forma predeterminada se seleccionan todas las columnas del juego de

registros de la paacutegina maestra Si el juego de registros contiene una

columna de clave exclusiva como por ejemplo recordID seleccioacutenela y

haga clic en el botoacuten de signo menos (-) para que no aparezca en la paacutegina

detalle

13 Para cambiar el orden en el que aparecen las columnas en la paacutegina

detalle seleccione una columna de la lista y haga clic en la flecha arriba o

abajo

En la paacutegina detalle las columnas del juego de registros estaacuten dispuestas

verticalmente en una tabla Al hacer clic en la flecha arriba se desplaza la

columna hacia arriba al hacer clic en la flecha abajo se desplaza la

columna hacia abajo

14 Haga clic en Aceptar

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El objeto de datos crea una paacutegina detalle (si no la ha creado usted antes) y

antildeade contenido dinaacutemico y comportamientos de servidor tanto a la

paacutegina maestra como a la paacutegina detalle

15 Personalice el disentildeo de las paacuteginas maestra y detalle de acuerdo con sus

necesidades

Puede personalizar totalmente el disentildeo de cada paacutegina utilizando las

herramientas de disentildeo de paacuteginas de Dreamweaver Tambieacuten puede

editar los comportamientos de servidor haciendo doble clic en ellos en el

panel Comportamientos del servidor

Despueacutes de crear paacuteginas maestra y detalle con el objeto de datos utilice el

panel Comportamientos del servidor (Ventana gt Comportamientos del

servidor) para modificar los diferentes elementos que el objeto de datos

inserta en las paacuteginas

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

CUERPO DEL TRABAJO

P Aacute G I N A S M A E S T R O D E T A L L E

Para poder crear paacuteginas dinaacutemicas deberemos activar el servicio web en nuestroPC de praacutecticas Activaremos el servidor web y definiremos el sitio de RECORDStore1 Ejecuta EasyPHP e inicia el servicio web Apache Comprueba que el servicio

estaacute activado abriendo la direccioacuten web httplocalhost2 Ejecuta Macromedia Dreamweaver desde el Menuacute de Inicio de Windows3 Define un Nuevo sitio en Dreamweaver con las siguientes caracteriacutesticas

Nombre RECORD Store dinaacutemico Tecnologiacutea de servidor PHP MySQL Forma de trabajo Editar localmente los archivos y luego cargar al servidor

de prueba remoto Carpeta local CSitesRecordStore Conexioacuten con el servidor LocalRed Carpeta remota CArchivos de programaEasyPHP1-7wwwRecordStore URL httplocalhostRecordStore Proteccioacuten y desproteccioacuten No activar

Creacioacuten de una paacutegina Maestro

Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver abriremos una paacutegina dinaacutemica para establecer una conexioacuten con la base de datos En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el cataacutelogo de RECORD Store Esta plantilla se convertiraacute en nuestra paacutegina Maestro para explorar el cataacutelogo de discos

1 Si hay alguacuten documento en blanco abierto cieacuterralo antes de continuar Abre el archivo catalogophp para edicioacuten en Dreamweaver

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

8 En el menuacute emergente Pasar clave exclusiva elija la columna del juego de

registros que contiene valores que identifican a los registros

Normalmente la columna elegida es la que contiene el nuacutemero de ID Este

valor se pasa a la paacutegina detalle para que pueda identificar el registro

elegido por el usuario

9 Desactive la opcioacuten Numeacuterico si la columna de clave exclusiva no es

numeacuterica

Nota Esta opcioacuten aparece activada de manera predeterminada y no

aparece para todos los modelos de servidor

10 Especifique el nuacutemero de registros que deben mostrarse en la paacutegina

maestra

11 En el cuadro Nombre de paacutegina detalle haga clic en Examinar y localice el

archivo de paacutegina detalle que ha creado o introduzca un nombre para que

el objeto de datos la cree automaacuteticamente

12 En el aacuterea Campos de paacutegina Detalle seleccione las columnas que deben

visualizarse en la paacutegina detalle

De forma predeterminada se seleccionan todas las columnas del juego de

registros de la paacutegina maestra Si el juego de registros contiene una

columna de clave exclusiva como por ejemplo recordID seleccioacutenela y

haga clic en el botoacuten de signo menos (-) para que no aparezca en la paacutegina

detalle

13 Para cambiar el orden en el que aparecen las columnas en la paacutegina

detalle seleccione una columna de la lista y haga clic en la flecha arriba o

abajo

En la paacutegina detalle las columnas del juego de registros estaacuten dispuestas

verticalmente en una tabla Al hacer clic en la flecha arriba se desplaza la

columna hacia arriba al hacer clic en la flecha abajo se desplaza la

columna hacia abajo

14 Haga clic en Aceptar

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El objeto de datos crea una paacutegina detalle (si no la ha creado usted antes) y

antildeade contenido dinaacutemico y comportamientos de servidor tanto a la

paacutegina maestra como a la paacutegina detalle

15 Personalice el disentildeo de las paacuteginas maestra y detalle de acuerdo con sus

necesidades

Puede personalizar totalmente el disentildeo de cada paacutegina utilizando las

herramientas de disentildeo de paacuteginas de Dreamweaver Tambieacuten puede

editar los comportamientos de servidor haciendo doble clic en ellos en el

panel Comportamientos del servidor

Despueacutes de crear paacuteginas maestra y detalle con el objeto de datos utilice el

panel Comportamientos del servidor (Ventana gt Comportamientos del

servidor) para modificar los diferentes elementos que el objeto de datos

inserta en las paacuteginas

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

CUERPO DEL TRABAJO

P Aacute G I N A S M A E S T R O D E T A L L E

Para poder crear paacuteginas dinaacutemicas deberemos activar el servicio web en nuestroPC de praacutecticas Activaremos el servidor web y definiremos el sitio de RECORDStore1 Ejecuta EasyPHP e inicia el servicio web Apache Comprueba que el servicio

estaacute activado abriendo la direccioacuten web httplocalhost2 Ejecuta Macromedia Dreamweaver desde el Menuacute de Inicio de Windows3 Define un Nuevo sitio en Dreamweaver con las siguientes caracteriacutesticas

Nombre RECORD Store dinaacutemico Tecnologiacutea de servidor PHP MySQL Forma de trabajo Editar localmente los archivos y luego cargar al servidor

de prueba remoto Carpeta local CSitesRecordStore Conexioacuten con el servidor LocalRed Carpeta remota CArchivos de programaEasyPHP1-7wwwRecordStore URL httplocalhostRecordStore Proteccioacuten y desproteccioacuten No activar

Creacioacuten de una paacutegina Maestro

Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver abriremos una paacutegina dinaacutemica para establecer una conexioacuten con la base de datos En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el cataacutelogo de RECORD Store Esta plantilla se convertiraacute en nuestra paacutegina Maestro para explorar el cataacutelogo de discos

1 Si hay alguacuten documento en blanco abierto cieacuterralo antes de continuar Abre el archivo catalogophp para edicioacuten en Dreamweaver

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El objeto de datos crea una paacutegina detalle (si no la ha creado usted antes) y

antildeade contenido dinaacutemico y comportamientos de servidor tanto a la

paacutegina maestra como a la paacutegina detalle

15 Personalice el disentildeo de las paacuteginas maestra y detalle de acuerdo con sus

necesidades

Puede personalizar totalmente el disentildeo de cada paacutegina utilizando las

herramientas de disentildeo de paacuteginas de Dreamweaver Tambieacuten puede

editar los comportamientos de servidor haciendo doble clic en ellos en el

panel Comportamientos del servidor

Despueacutes de crear paacuteginas maestra y detalle con el objeto de datos utilice el

panel Comportamientos del servidor (Ventana gt Comportamientos del

servidor) para modificar los diferentes elementos que el objeto de datos

inserta en las paacuteginas

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

CUERPO DEL TRABAJO

P Aacute G I N A S M A E S T R O D E T A L L E

Para poder crear paacuteginas dinaacutemicas deberemos activar el servicio web en nuestroPC de praacutecticas Activaremos el servidor web y definiremos el sitio de RECORDStore1 Ejecuta EasyPHP e inicia el servicio web Apache Comprueba que el servicio

estaacute activado abriendo la direccioacuten web httplocalhost2 Ejecuta Macromedia Dreamweaver desde el Menuacute de Inicio de Windows3 Define un Nuevo sitio en Dreamweaver con las siguientes caracteriacutesticas

Nombre RECORD Store dinaacutemico Tecnologiacutea de servidor PHP MySQL Forma de trabajo Editar localmente los archivos y luego cargar al servidor

de prueba remoto Carpeta local CSitesRecordStore Conexioacuten con el servidor LocalRed Carpeta remota CArchivos de programaEasyPHP1-7wwwRecordStore URL httplocalhostRecordStore Proteccioacuten y desproteccioacuten No activar

Creacioacuten de una paacutegina Maestro

Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver abriremos una paacutegina dinaacutemica para establecer una conexioacuten con la base de datos En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el cataacutelogo de RECORD Store Esta plantilla se convertiraacute en nuestra paacutegina Maestro para explorar el cataacutelogo de discos

1 Si hay alguacuten documento en blanco abierto cieacuterralo antes de continuar Abre el archivo catalogophp para edicioacuten en Dreamweaver

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

CUERPO DEL TRABAJO

P Aacute G I N A S M A E S T R O D E T A L L E

Para poder crear paacuteginas dinaacutemicas deberemos activar el servicio web en nuestroPC de praacutecticas Activaremos el servidor web y definiremos el sitio de RECORDStore1 Ejecuta EasyPHP e inicia el servicio web Apache Comprueba que el servicio

estaacute activado abriendo la direccioacuten web httplocalhost2 Ejecuta Macromedia Dreamweaver desde el Menuacute de Inicio de Windows3 Define un Nuevo sitio en Dreamweaver con las siguientes caracteriacutesticas

Nombre RECORD Store dinaacutemico Tecnologiacutea de servidor PHP MySQL Forma de trabajo Editar localmente los archivos y luego cargar al servidor

de prueba remoto Carpeta local CSitesRecordStore Conexioacuten con el servidor LocalRed Carpeta remota CArchivos de programaEasyPHP1-7wwwRecordStore URL httplocalhostRecordStore Proteccioacuten y desproteccioacuten No activar

Creacioacuten de una paacutegina Maestro

Una vez activado el servicio web y definido el sitio RECORD Store en Dreamweaver abriremos una paacutegina dinaacutemica para establecer una conexioacuten con la base de datos En los archivos que has descargado del sitio web de la asignatura hay una plantilla que utilizaremos para el cataacutelogo de RECORD Store Esta plantilla se convertiraacute en nuestra paacutegina Maestro para explorar el cataacutelogo de discos

1 Si hay alguacuten documento en blanco abierto cieacuterralo antes de continuar Abre el archivo catalogophp para edicioacuten en Dreamweaver

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Observa la estructura de catalogophp La tabla de la izquierda estaacute etiquetadaldquoSeleccione un geacutenerordquo y la utilizaremos para crear un menuacute con los geacuteneros disponibles que permita filtrar el juego de registros La tabla de la derecha aparece etiquetada como ldquoCataacutelogo de aacutelbumesrdquo con una divisioacuten en celdas preparada para colocar informacioacuten de los aacutelbumes y los controles que permitan navegar por el juego de registros

2 Crea una conexioacuten RecordStore con la base de datos que se encuentra almacenada en la carpeta remota CArchivos de programaEasyPHP17mysqldataRSBDatos Seraacute 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 antildeadir comportamiento dinaacutemico finalizaremos la parte estaacutetica antildeadiendo algunos textos necesarios en la paacutegina

3 Introduce los textos que se muestran en la figura siguiente Centra los textosldquoPrimerordquo ldquoAnteriorrdquo ldquoSiguienterdquo y ldquoUacuteltimordquo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ahora crearemos un nuevo juego de registros para nuestro cataacutelogo 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 Conexioacuten RecordStore Tabla Discos Columnas Todo Filtro Ninguno Ordenar RANKING Descendente

Una vez creado el juego de registros vamos a incluir algunos campos en la paacutegina para poder explorar el conjunto de registros Vamos a incluir tanto texto dinaacutemico como imaacutegenes dinaacutemicas Los campos CARATULA e ICONO contienen la ruta de las distintas imaacutegenes disponibles para cada disco por lo que las podremos utilizar para generar una imagen dinaacutemica

5 Haz clic en la celda indicada en la figura siguiente y selecciona la opcioacuten de menuacute InsertarImagen

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Se mostraraacute el cuadro de diaacutelogo 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 imaacutegenes se habiacutean introducido desde el sistema de archivos En este ejercicio utilizaremos un campo de la tabla para definir la imagen a utilizar

6 Selecciona el botoacuten de radio Fuentes de datosEl aspecto del cuadro de diaacutelogo cambia Desaparece el selector de archivos y se muestra en su lugar el contenido del juego de registros Cataacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

7 Selecciona el campo Icono y haz clic en Aceptar8 Comprueba el funcionamiento de la imagen dinaacutemica activando el modo

Live DataAhora completaremos la informacioacuten que se mostraraacute para cada disco

9 Desactiva la vista Live Data y realiza las operaciones necesarias para completar la informacioacuten del disco como muestra la figura siguiente Para separar las distintas liacuteneas no utilices la tecla ltEntergt sino la combinacioacuten ltMayuacutesculasgt+ltEntergt

Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

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

Comportamientos de servidor

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Una vez introducida en la paacutegina Maestro la informacioacuten que queremos mostrar para cada disco vamos a utilizar comportamientos del servidor para realizar las siguientes acciones en la paacutegina

Mostrar tres discos cada vez Navegar por el conjunto de registros Mostrar o no determinadas partes en funcioacuten de la posicioacuten y la cantidad

de registros en el juego

1 En el panel Aplicacioacuten haz clic en la solapa Comportamientos del servidor

Inicialmente los comportamientos de servidor definidos son el Juego de registros y los distintos textos e imaacutegenes dinaacutemicas definidas

Vamos a utilizar la fila central de la tabla derecha para crear una regioacuten repetida que visualice tres registros a la vez

2 Haz clic sobre la imagen dinaacutemica representando el icono del disco En elSelector de etiquetas haz clic en la etiqueta lttrgt de maacutes a la derecha para seleccionar la fila completa de la tabla

3 En el panel Comportamientos del servidor haz clic en el botoacuten + y selecciona el comportamiento Repetir regioacutenSe muestra el cuadro de diaacutelogo Repetir regioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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 definicioacuten

5 Comprueba el funcionamiento activando el modo Live Data Desactiacutevalo cuando termines la comprobacioacuten

Al crear una regioacuten repetida podremos visualizar tres registros cada vez Para poder recorrer todos los registros del juego deberemos antildeadir comportamientos del servidor para navegar por el juego de registros

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Paginacioacuten de juego de registros gt Mover a la primera paacuteginaSe muestra el cuadro de diaacutelogo Mover a la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar comportamientos de paginacioacuten a los textos Anterior Siguiente y Uacuteltimo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador en la url httplocalhostRecordStoreindexhtm Prueba el funcionamiento de los controles de navegacioacuten

Baacutesicamente ya disponemos de una paacutegina cataacutelogo que nos permite explorar los discos disponibles Para completar la navegacioacuten vamos a antildeadir un contador de registros que nos indique en queacute posicioacuten del juego de registros nos encontramos

Selecciona la celda vaciacutea bajo los datos del disco en la tabla derecha Selecciona la opcioacuten de menuacute InsertarObjetos de aplicacioacutenMostrar

recuento de registrosEstado de navegacioacuten de juego de registrosSe muestra el cuadro de diaacutelogo Estado de navegacioacuten de juego de registros

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

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

Cambia la palabra Registros por Aacutelbumes 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 navegacioacuten

Por uacuteltimo completaremos los controles de navegacioacuten definiendo algunas partes que solo se mostraraacuten en determinadas circunstancias Por ejemplo no tiene sentido mostrar el control Primero si estamos en el primer registro Para realizar esta operacioacuten utilizaremos el comportamiento Mostrar regioacuten

Selecciona el texto Primero en la tabla derecha En el panel Comportamientos del servidor haz clic en el botoacuten + y

selecciona el comportamiento Mostrar regioacuten gt Mostrar si no es la primera paacuteginaSe muestra el cuadro de diaacutelogo Mostrar si no es la primera paacutegina

Comprueba que Catalogo es el juego de registros activo y haz clic en Aceptar para finalizar la definicioacuten

Repite los pasos anteriores para asignar los comportamientos Mostrar si a los controles siguientesAnterior Mostrar si no es la primera paacuteginaSiguiente Mostrar si no es la uacuteltima paacuteginaUacuteltimo Mostrar si no es la uacuteltima paacuteginaContador de registros Mostrar si el juego de registros no estaacute vaciacuteo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Ninguacuten registro cumple el criterio de buacutesqueda Mostrar si el juego de registros estaacute vaciacuteo

Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de los controles de navegacioacuten Cuando finalices guarda los cambios en el documento catalogophp y cieacuterralo en el entorno de trabajo de Dreamweaver

Filtrado por categoriacuteas Menuacute de salto

Para completar la paacutegina Maestro antildeadiremos un menuacute en la tabla de la izquierda que permita filtrar los registros del juego por el geacutenero seleccionado Para ello deberemos antildeadir un menuacute de salto con los geacuteneros existentes (Blues DanceInfantil Latino Pop y Rock) y modificar el juego de registros para incluir el filtrado por geacutenero

P Aacute G I N A S M A E S T R O D E T A L L E

Para realizar este ejercicio no trabajaremos sobre el documento catalogophp sino sobre un documento HTML que tiene la divisioacuten en marcos definida para nuestro sitio RECORD Store en praacutecticas anteriores Esto es necesario para poder enlazar los saltos con el marco de destino adecuado

1 Abre el archivo catalogohtm para edicioacuten en Dreamweaver2 En la tabla izquierda haz clic al final del texto ldquoSeleccione un geacutenero en la

lista inferiorrdquo y pulsa la tecla ltEntergt para crear un nuevo paacuterrafo3 Selecciona la opcioacuten de menuacute InsertarFormularioMenuacute de salto

Se muestra el cuadro de diaacutelogo Insertar menuacute de salto

4 En este cuadro de diaacutelogo podemos editar los distintos elementos del menuacutePara cada elemento deberemos indicar el texto que se mostraraacute en la entrada del menuacute y la URL a la que saltaremos al hacer una seleccioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

5 En el campo Texto introduce el texto Blues6 Haz clic en el botoacuten Examinar situado a la derecha de la caja de texto Al

seleccionarse ir a URLSe despliega un Selector de archivos Queremos que al seleccionar una entrada del menuacute se recargue el documento catalogophp que deberaacute recibir de alguna forma el valor seleccionado en el menuacute para poder filtrar los registros

7 Selecciona el archivo catalogophp y haz clic en el botoacuten Paraacutemetros situado a la derecha de la caja de texto URL

Mediante este botoacuten podemos definir un conjunto de paraacutemetros que se pasaraacuten al documento enlazado En este caso utilizaremos un uacutenico paraacutemetro ndash GENERO ndash al que le daremos el valor Blues

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 paraacutemetro y volver al Selector de archivos

9 Haz clic en Aceptar para seleccionar el documento catalogophp como destino del menuacute de salto

Observa el enlace que aparece en la caja Al seleccionarse ir a URL en el cuadro de diaacutelogo Insertar menuacute de salto El enlace indica que se saltaraacute al documento cataacutelogophp pasando un valor Blues en el paraacutemetro GENERO

10 Selecciona marco ldquomainFramerdquo en la lista Abrir URL en

11 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir los geacuteneros Dance Infantil Latino Pop y Rock al menuacute En todos los casos deberaacutes enlazar con el documento catalogophp daacutendole el valor adecuado al paraacutemetro GENERO Recuerda abrir el documento en el marco mainFrame

Vamos a antildeadir un uacuteltimo elemento al menuacute un campo que no se corresponde con ninguacuten geacutenero y que se utiliza para indicar la utilidad del menuacute

12 Utiliza el botoacuten + en el cuadro de diaacutelogo Insertar menuacute de salto para antildeadir una nueva entrada al menuacute con el texto Seleccione geacutenero Enlaza la entrada con el documento catalogophp daacutendole al paraacutemetro GENERO el valor

13 Utiliza el botoacuten 1048600 para llevar la entrada creada a la primera posicioacuten del menuacute y haz clic en Aceptar para crear el menuacute y cerrar el diaacutelogo

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

Para finalizar el proceso modificaremos el juego de registros en catalogophp para utilizar el valor del paraacutemetro GENERO en el filtrado de los registros

En el panel Comportamientos del servidor haz doble clic en la entrada Juego de registros (Catalogo) para volver a la definicioacuten del juego de registros

Define el filtro de registros de la forma siguiente

Haz clic en el botoacuten Prueba En el cuadro de diaacutelogo introduce distintos geacuteneros y observa el resultado Comprueba el resultado al introducir un valor para el paraacutemetro GENERO

Ya tenemos completa nuestra paacutegina de cataacutelogo Finalizaremos el ejercicio enlazaacutendola desde la paacutegina de presentacioacuten indexhtm

a) Cierra el documento catalogohtm guardando los cambios Abre indexhtm para edicioacuten en Dreamweaver

b) Selecciona el botoacuten Cataacutelogo y enlaacutezalo con el documento catalogophp pasando un paraacutemetro GENERO con un valor Abre el documento en el marco mainFrame

c) Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento del menuacute de salto y los controles de navegacioacuten

Creacioacuten de la paacutegina Detalle

Habitualmente las paacuteginas Maestro ndash paacuteginas que muestran los resultados de una buacutesqueda ndash muestran pocos campos de cada registro en una estructura de tablaTambieacuten es habitual que alguacuten campo de cada registro en la paacutegina Maestro esteacute enlazado con otra paacutegina en la que se muestra informacioacuten detallada del registroA esta uacuteltima paacutegina se le denomina paacutegina Detalle

Vamos a crear una paacutegina Detalle para nuestro sitio de ejemplo RECORD StorePara ello seraacute necesario completar los siguientes pasos

Disentildear una paacutegina para mostrar los detalles de un disco Crear en la paacutegina un juego de registros con un solo registro Utilizaremos el CODIGO del registro para relacionar la paacutegina Maestro con la Detalle ya que

es una clave primaria sin duplicados Seleccionar en la paacutegina Maestro el campo que utilizaremos para enlazar

con la paacutegina Detalle y pasar el CODIGO del disco como paraacutemetro

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

El primer paso necesario seraacute disentildear una paacutegina para mostrar los detalles de un disco En nuestro caso utilizaremos la misma plantilla que para el cataacutelogo disponible en el fichero detallephp que has descargado desde la paacutegina web de la asignatura

1 Cierra todos los documentos en edicioacuten guardando los cambios si procedeAbre el archivo detallephp para edicioacuten en Dreamweaver

El documento presenta el aspecto habitual del sitio Para poder antildeadir el contenido dinaacutemico a la paacutegina seraacute necesario crear un nuevo juego de registros que seleccione un uacutenico registro aquel cuyo campo CODIGO coincida con el valor del paraacutemetro CODIGOEn el panel Vinculaciones haz clic en el botoacuten + y crea un nuevo Juego de registros (consulta) llamado Detalle con los valores siguientes

2 Haz clic en el botoacuten Prueba para comprobar el funcionamiento del juego de registros Introduce un coacutedigo 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 paacuteginaDetalle con el contenido que se muestra a continuacioacuten

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial

UNIVERSIDAD REGIONAL AUTOacuteNOMA DE LOS ANDES

ldquoUNIANDESrdquo

Jeniffer Manosalvas C

4 Cuando termines guarda los cambios en el documento detallephp y abre para edicioacuten el documento catalogophp

La uacuteltima operacioacuten a realizar es crear un enlace a la paacutegina Detalle desde la paacutegina Maestro Utilizaremos el ICONO del disco como soporte para el enlace

5 En el documento catalogophp selecciona el siacutembolo de imagen dinaacutemica correspondiente al campo ICONO

6 En el menuacute Insertar -gt Hipervinculos crea un vinculo para que al hacer clic sobre el icono se acceda a la paacutegina de detalle (detallephp) y se pase el paraacutemetro CODIGO con el valor del campo CODIGO del disco sobre el que has hecho clic El resultado del enlace debe ser

detallephpCODIGO=ltphp echo $row_Catalogo[CODIGO] gtYa disponemos tanto de la paacutegina Maestro como de la paacutegina Detalle preparadas para comprobar el funcionamiento de nuestro cataacutelogo

7 Transfiere el sitio al servidor remoto y previsualiza el resultado en el navegador Prueba el funcionamiento de acceso a la paacutegina detalle

NOMBRE Jeniffer Manosalvas C

CURSO Deacutecimo Sistemas Semipresencial

• TEMA Manejo de Formularios Maestro Detalle con PHP
• OBJETIVOS
• RESUMEN
• CUERPO DEL TRABAJO
• P Aacute G I N A S M A E S T R O D E T A L L E
• NOMBRE Jeniffer Manosalvas C
• CURSO Deacutecimo Sistemas Semipresencial