Unidad 20. Ejercicio paso a paso: Filtrar con parámetros (II)
Ahora crearemos un archivo buscar.php.
- Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, Página de plantilla) y guárdalo como buscar.php. Dale el título Buscar libros.
- En la zona donde puedes incluir contenido añade el siguiente párrafo:
Introduce en la siguiente caja de texto el nombre del título o el autor del libro y nosotros lo buscaremos por ti:
- Inserta un formulario con nombre formulario a continuación (Insertar → Formulario → Formulario).
- Coloca el punto de inserción dentro del formulario.
- Inserta un campo de texto desde el menú Insertar → Formulario → Campo de texto.
- En el cuadro de diálogo, escribe buscar como id del Campo de texto. Si no te aparece el diálogo, hazlo desde el Inspector de Propiedades.
Así le pasaremos su contenido a la URL en el parámetro buscar.
- A la caja de texto, dale un Ancho car. de 100.
- Selecciona el formulario haciendo clic en la etiqueta <form> y cambia el método de POST a GET.
Como ya hemos comentado es necesario hacerlo de esta forma para que el código generado por Dreamweaver funcione correctamente.
- También establece como acción buscar.php, es decir, el mismo archivo.
- Inserta un botón al lado del campo de texto desde el menú Insertar → Formulario → Botón.
- En el panel Propiedades cambia su propiedad Valor a Buscar.
- Deja un párrafo en blanco debajo del formulario.
- A continuación, crea un bloque div con id listado (Insertar → Objetos de diseño → Etiqueta DIV).
- Coloca el cursor dentro del bloque, y escribe el siguiente párrafo:
Su búsqueda de ha devuelto resultados:
Vamos ahora a insertar el título pasado como parámetro.
- Posiciona el punto de inserción delante de la palabra ha.
- Selecciona del menú Insertar → Objetos PHP → Variables de URL
Se creará el siguiente código:
<?php $_GET[]; ?>
- Sólo nos falta indicar el nombre de la variable URL escribiendo 'buscar' dentro de los corchetes; no olvides las comillas simples.
- Desde la vista Código encierra el código php entre etiquetas <em> para que el título aparezca en cursiva.
El código resultante deberá ser éste:
Su búsqueda de <em>'<?php echo $_GET['buscar']; ?>'</em> ha devuelto resultados
:
- Vuelve a la vista de Diseño.
Ahora crearemos un juego de registros para esta página que se cree filtrándose por el texto introducido en la caja del formulario.
- Haz clic en el botón para crear un nuevo juego de registros.
- En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe busqueda.
- En Conexión selecciona conexion_libreria.
- En Tabla selecciona libros.
- Modifica la opción Filtro para que pueda leerse: Titulo = Parámetro URL buscar.
Hemos creado un filtro que tomará el valor del parámetro buscar en la URL y lo comparará con el valor del campo Titulo.
Ahora insertaremos el total de registros entre las palabras devuelto y resultados.
- Posiciona el cursor entre las palabras devuelto y resultados.
- Haz clic en la opción Total de registros, en Mostrar recuento de registros del panel Insertar Datos.
- La línea quedará así:
<p>Su búsqueda de <?php $_GET['buscar']; ?> ha devuelto <?php echo $totalRows_busqueda ?> resultados: </p>
Vamos a crear el listado que se corresponda con el recordset que acabamos de crear.
- Aún dentro del bloque que hemos creado, crea un bloque div con clase item (Insertar → Objetos de diseño → Etiqueta DIV).
- Dentro del bloque con clase item inserta la imagen imagenes/item1.gif.
- A la imagen asígnale la clase img_item.
- Desde la vista de código, arrastra el campo Usado desde el panel Vinculaciones sobre el atributo src de la imagen reemplazando el 1, para que quede:
"imagenes/item<?php echo $row_busqueda['Usado']; ?>.gif"
- Crea una lista no ordenada (ul) con cinco elementos, y con la clase detallelibro. Al primero dale la clase titulo y al segundo la clase autor.
- Inserta el elemento Titulo arrastrándolo desde el panel Vinculaciones al primer elemento.
- Inserta el elemento Autor arrastrándolo desde el panel Vinculaciones al segundo elemento.
- Inserta el elemento Editorial arrastrándolo desde el panel Vinculaciones al tercer elemento.
- Escribe ISBN: e inserta el elemento ISBN arrastrándolo desde el panel Vinculaciones en el siguiente elemento.
- Inserta el elemento Precio arrastrándolo desde el panel Vinculaciones.
- Escribe € a continuación, selecciónalo todo y aplícale la clase precio y añade la imagen imagenes/compra.gif.
- La imagen que acabamos de añadir deberá tener la alineación a Texto superior. Ponlo como un estilo CSS en línea.
- Enlaza la imagen a comprar.php?id= desde el campo Vínculo del panel Propiedades.
- En la vista de Código, al enlace añádele al final el Id, arrastrándolo desde el panel Vinculaciones.
- Inserta un bloque DIV (Insertar → Objetos de diseño → Etiqueta DIV), dale el id salto_linea desde el panel Propiedades.
Continúa en la página siguiente...