Unidad 20. Ejercicio paso a paso: Filtrar con parámetros (II)

 

Ahora crearemos un archivo buscar.php.

  1. 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.
  2. 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:
  3. Inserta un formulario con nombre formulario a continuación (Insertar → Formulario → Formulario).
  4. Coloca el punto de inserción dentro del formulario.
  5. Inserta un campo de texto desde el menú Insertar → Formulario → Campo de texto.
  6. 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.
  7. A la caja de texto, dale un Ancho car. de 100.
  8. 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.
  9. También establece como acción buscar.php, es decir, el mismo archivo.
  10. Inserta un botón al lado del campo de texto desde el menú Insertar → Formulario → Botón.
  11. En el panel Propiedades cambia su propiedad Valor a Buscar.
  12. Deja un párrafo en blanco debajo del formulario.
  13. A continuación, crea un bloque div con id listado (Insertar → Objetos de diseño → Etiqueta DIV).
  14. 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.
  15. Posiciona el punto de inserción delante de la palabra ha.
  16. Selecciona del menú Insertar → Objetos PHP → Variables de URL
    Se creará el siguiente código:
    <?php $_GET[]; ?>
  17. Sólo nos falta indicar el nombre de la variable URL escribiendo 'buscar' dentro de los corchetes; no olvides las comillas simples.
  18. 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&uacute;squeda de <em>'<?php echo $_GET['buscar']; ?>'</em> ha devuelto resultados:

  19. 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.
  20. Haz clic en el botón Recordset para crear un nuevo juego de registros.
  21. En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe busqueda.
  22. En Conexión selecciona conexion_libreria.
  23. En Tabla selecciona libros.
  24. 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.
  25. Posiciona el cursor entre las palabras devuelto y resultados.
  26. Haz clic en la opción Total de registros, en Mostrar recuento de registros del panel Insertar Datos.
  27. La línea quedará así:
    <p>Su b&uacute;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.
  28. Aún dentro del bloque que hemos creado, crea un bloque div con clase item (Insertar → Objetos de diseño → Etiqueta DIV).
  29. Dentro del bloque con clase item inserta la imagen imagenes/item1.gif.
  30. A la imagen asígnale la clase img_item.
  31. 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"
  32. 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.
  33. Inserta el elemento Titulo arrastrándolo desde el panel Vinculaciones al primer elemento.
  34. Inserta el elemento Autor arrastrándolo desde el panel Vinculaciones al segundo elemento.
  35. Inserta el elemento Editorial arrastrándolo desde el panel Vinculaciones al tercer elemento.
  36. Escribe ISBN: e inserta el elemento ISBN arrastrándolo desde el panel Vinculaciones en el siguiente elemento.
  37. Inserta el elemento Precio arrastrándolo desde el panel Vinculaciones.
  38. Escribe a continuación, selecciónalo todo y aplícale la clase precio y añade la imagen imagenes/compra.gif.
  39. La imagen que acabamos de añadir deberá tener la alineación a Texto superior. Ponlo como un estilo CSS en línea.
  40. Enlaza la imagen a comprar.php?id= desde el campo Vínculo del panel Propiedades.
  41. En la vista de Código, al enlace añádele al final el Id, arrastrándolo desde el panel Vinculaciones.
  42. 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...

Atrás  Inicio  Adelante





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.