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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Top Related