Академический Документы
Профессиональный Документы
Культура Документы
B S Q U E D A S
: :
F O R M U L A R I O S
10
Bsquedas :: Formularios
En las prcticas anteriores creamos un conjunto de pginas Maestro Detalle, el primer tipo de pgina dinmica que hemos visto en la asignatura. La creacin de pginas dinmicas implica la conexin de tres componentes fundamentales: el servidor web (Apache), el editor HTML/PHP(Macromedia Dreamweaver) y la base de datos (MySQL). En esta prctica crearemos un nuevo conjunto de pginas dinmicas, concretamente una pgina de bsqueda y su pgina de resultados asociada. Para realizar una bsqueda en la base de datos, el usuario introduce sus preferencias en elementos que permiten la interaccin, habitualmente organizados en formularios. Los formularios permiten interactuar con los visitantes del sitio o recopilar informacin sobre ellos, utilizando elementos habituales en Windows como los campos de texto, los cuadros de lista, las casillas de verificacin y los botones de opcin. Una vez introducidos los datos en el formulario, un botn Enviar permite enviarlos a la pgina dinmica encargada del procesamiento, habitualmente consistente en crear un juego de registros mediante una consulta. En esta prctica crearemos una pgina de bsqueda para nuestra aplicacin de ejemplo RECORD Store. La pgina de bsqueda recoge los datos del usuario en un formulario, y los enva a una pgina de resultados en la que se permite la navegacin por el juego de registros obtenido al ejecutar una consulta SQL en la que intervienen los datos del formulario. Al finalizar los ejercicios, habremos aprendido a realizar las siguientes tareas: Crear distintos objetos de formulario, como Campos de texto y Mens. Obtener un juego de registros mediante una consulta SQL.
1. Preparacin de la prctica
Esta prctica supone que disponemos de los archivos que componen el sitio de ejemplo. En la web de la asignatura existe una versin de dichos archivos, junto con la base de datos necesaria para poder realizar los ejercicios de esta prctica. 1. Accede al sitio web de la asignatura, y dentro de Material adicional, abre el archivo sitio10.zip. Extrae todos los archivos disponibles en la carpeta C:\Sites\RecordStore (Es posible que la carpeta ya no exista en las aulas de prcticas. En este caso, crala nuevamente desde WinZip).
115
1 0 .
B S Q U E D A S
: :
F O R M U L A R I O S
2. Accede al sitio web de la asignatura, y dentro de Material adicional, abre el archivo bd10.zip. Extrae todos los archivos disponibles en la carpeta C:\Archivos de programa\EasyPHP1-7\mysql\data\RSBDatos Para poder crear pginas dinmicas deberemos activar el servicio web en nuestro PC de prcticas. Activaremos el servidor web y, sino esta definido, definiremos el sitio RECORD Store (ver prctica 8). 3. Ejecuta EasyPHP e inicia el servicio web Apache. Comprueba que el servicio est activado abriendo la direccin web http://localhost. 4. Ejecuta Macromedia Dreamweaver desde el Men de Inicio de Windows. 5. Define un Nuevo sitio en Dreamweaver con las siguientes caractersticas: Nombre: RECORD Store dinmico. Tecnologa de servidor: PHP MySQL. Forma de trabajo: Editar localmente los archivos y luego cargar al servidor de prueba remoto. Carpeta local: C:\Sites\RecordStore. Conexin con el servidor: Local/Red. Carpeta remota: C:\Archivos de programa\EasyPHP1-7\www\RecordStore URL: http://localhost/RecordStore/. Proteccin y desproteccin: No activar.
Observa la estructura de busqueda.php. La tabla de la izquierda est etiquetada Bsqueda de lbumes, y la utilizaremos para mostrar informacin de ayuda al
116
1 0 .
B S Q U E D A S
: :
F O R M U L A R I O S
usuario y el botn Buscar para iniciar la bsqueda. La tabla de la derecha aparece etiquetada como Formulario de bsqueda, con una divisin en celdas preparada para colocar los distintos elementos del formulario que rellenar el usuario para definir el criterio de bsqueda. 2. Si no la tienes ya creada, crea una conexin RecordStore con la base de datos RSBDatos, que se encuentra almacenada en la carpeta remota C:\Archivos de programa\EasyPHP1-7\mysql\data\RSBDatos. Puede que sea necesario que definas un origen ODBC para la base de datos con el nombre RECORD Store de tipo DSN de Sistema (ver prctica 8). Ya tenemos el documento preparado para comenzar el trabajo. Antes de aadir los distintos objetos de formulario finalizaremos la parte esttica aadiendo algunos textos necesarios en la pgina. 3. Introduce los textos que se muestran en la figura siguiente.
117
1 0 .
B S Q U E D A S
: :
F O R M U L A R I O S
Crear pginas para modificar la base de datos. El administrador del sitio debe poder aadir, modificar o eliminar lbumes en la base de datos. Crear pginas para dar de alta nuevos usuarios y autenticar a los usuarios existentes. La informacin de inters de un nuevo usuario se recoge en un formulario de alta de usuario. Una vez registrados, los usuarios acceden a partes restringidas del sitio mediante un formulario de autentificacin (pareja de valores usuario/contrasea).
En Dreamweaver, los distintos elementos grficos con los que el usuario puede interactuar en un formulario se denominan objetos de formulario. Se pueden insertar objetos de formulario mediante la opcin Insertar/formulario o accediendo a los objetos de formulario desde el panel Formularios de la barra Insertar.
La barra Formularios proporciona los siguientes botones: Formulario inserta un formulario en el documento. Dreamweaver inserta etiquetas form de apertura y cierre de formulario en el cdigo HTML. Los dems objetos del formulario, como los campos de texto o los botones, deben insertarse entre las etiquetas form para que los datos se procesen correctamente en todos los navegadores. Campo de texto. Los campos de texto aceptan cualquier tipo de valores alfanumricos. El texto introducido puede mostrarse como una sola lnea, varias lneas o como vietas y asteriscos (para proteccin de la contrasea). Campo oculto. Permite almacenar datos del usuario. Los campos ocultos permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de compra, y utilizarlos la prxima vez que el usuario visite el sitio. Casilla de verificacin. Las casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones y permiten que los usuarios seleccionen tantas opciones como sean necesarias. Botn de opcin. Los botones de opcin representan opciones exclusivas de seleccin. Al seleccionar un botn en un grupo, se anula la seleccin de todos los dems botones del grupo. Por ejemplo, un usuario puede elegir S o No. Grupo de opciones inserta un grupo de botones de opcin que comparten el mismo nombre. Lista/men permite crear opciones de usuario en una lista. La opcin Lista muestra los valores de las opciones en una lista de desplazamiento y permite a los usuarios seleccionar varias opciones. La opcin Men muestra los valores de las opciones en un men emergente y permite a los usuarios seleccionar una sola opcin. Men de salto inserta una lista de navegacin o un men emergente. Los mens de salto permiten insertar un men en el que cada opcin est vinculada a un documento o un archivo (ver Prctica 9).
118
1 0 .
B S Q U E D A S
: :
F O R M U L A R I O S
Campo de imagen. Los campos de imagen pueden usarse en lugar de los botones Enviar para crear botones grficos. Campo de archivo inserta un cuadro de texto vaco y un botn Examinar en un documento. Los campos de archivo permiten al usuario examinar los archivos de sus discos duros y cargarlos como datos de formulario. Botn. Los botones llevan a cabo tareas cuando se hace clic en ellos, como enviar o restablecer formularios. Puede aadir un nombre o una etiqueta personalizada a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer.
En esta prctica utilizaremos un formulario para que el usuario introduzca los datos que conozca sobre el lbum a buscar. Para facilitar la bsqueda, el usuario podr especificar (total o parcialmente) los siguientes datos relativos a un lbum: Ttulo del lbum. Intrprete. Gnero musical (Blues, Dance, Infantil, Latino, Pop o Rock). Tipo de soporte (Audio CD, CD+DVD o CD Single). Fecha de edicin. Se permitir al usuario indicar un rango de fechas. Precio mximo del lbum.
Para disear un formulario que permita al usuario indicar sus preferencias de bsqueda, deberemos en primer lugar caracterizar la informacin a recopilar. En nuestro caso, tenemos: El ttulo e intrprete del lbum se introducen de forma libre, por lo que utilizaremos cajas de texto para que el usuario introduzca el texto a buscar. El gnero musical y el tipo de soporte permiten elegir una opcin entre un grupo concreto de posibilidades, por lo que utilizaremos listas o mens para que el usuario seleccione su preferencia. Las fechas del rango y el precio mximo del lbum deben cumplir condiciones para ser vlidas, por lo que aunque utilizaremos cajas de texto para que el usuario introduzca los valores, ser conveniente comprobar que ha introducido un nmero o una fecha en la caja adecuada validando el formulario.
Por tanto, en esta prctica utilizaremos cajas de texto y mens desplegables para recopilar la informacin de usuario, ms botones para enviar la informacin al servidor para su procesamiento. En prximas prcticas disearemos formularios que utilizarn otros objetos de formulario como botones de opcin, casillas de verificacin, campos de archivo, campos de contrasea, etc.
119
1 0 .
B S Q U E D A S
: :
F O R M U L A R I O S
1. Comprueba que el documento busqueda.php se encuentra abierto para edicin en Dreamweaver. Observa la barra de etiquetas en la ventana del documento. La primera etiqueta despus del cuerpo del documento (<body>) indica la existencia de un formulario en el documento llamado Busqueda.
2. Haz clic en la etiqueta <form#Busqueda> en la barra de etiquetas. Se selecciona toda la zona de edicin, y el Inspector de propiedades muestra las propiedades del formulario. Dado que disponemos de un formulario cubriendo la totalidad del rea de edicin, podemos colocar los distintos objetos de formulario en cualquiera de las celdas de las dos tablas existentes. Utilizaremos la tabla derecha para los campos de texto y los mens desplegables, y la tabla izquierda para el botn Buscar. 3. Haz clic para colocar el punto de insercin en la celda situada a la derecha de la etiqueta TTULO: 4. Selecciona la opcin de men Insertar/Formulario/Campo de texto o haz clic en el botn Campo de texto del panel Formularios de la barra Insertar. Se aade una nueva caja de texto en la celda, con unos valores por defecto. En nuestro formulario, cada elemento est directamente relacionado con un campo de la tabla Discos, por lo que ajustaremos los parmetros de acuerdo al campo relacionado, en este caso el campo Titulo.
5. Cambia el nombre por defecto textfield por TITULO. El nombre del campo de texto se utiliza en la pgina de resultados para filtrar los registros, por lo que es fundamental ser cuidadoso a la hora de asignar nombres y seguir siempre un criterio lgico. 6. Asigna los siguientes valores al resto de parmetros en el Inspector de propiedades: