Unidad 22. Ejercicio: Listado de elementos

Objetivo

Practicar las operaciones necesarias para crear las páginas de listados de elementos.

Ejercicio

1. Si WampServer no se está ejecutando, lánzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se están ejecutando, lánzalos para poder tener acceso a las bases de datos y a la ejecución de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre él. Vamos a crear la página que muestre un listado de comentarios.
    
4. Abre un nuevo archivo dinámico basado en la plantilla blog.dwt.php (Archivo → Nuevo, Página de plantilla).
5. Dale el título Blog aulaClic - Listado de comentarios y guárdalo como listado_comentarios.php.
6. En la única región editable deberás escribir un párrafo de clase titulo que diga Selecciona una entrada:.
    
7. Crearemos un recordset para cargar los títulos y fechas de las entradas.
   Haz clic en el botón para crear un nuevo juego de registros.
8. En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe listado_entradas.
9. En Conexión selecciona blog_aulaclic.
10. En Tabla selecciona entradas.
11. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente, para que se muestre la más reciente.
12. Haz clic en el botón Aceptar para crear el juego de registros.
     
13. Debajo del párrafo que hemos añadido deberás insertar una tabla con 10 píxeles de relleno de celda y un ancho del 100%. En esta tabla listaremos las entradas.
    La tabla deberá tener 2 filas y 2 columnas, siendo la primera fila un encabezado.
14. A las celdas de la primera fila, aplícales el estilo borde_inferior. Alinea las celdas de la segunda columna a la derecha.
15. Escribe en la primera celda de la primera fila Título.
16. Escribe en la segunda celda de la primera fila Fecha.
17. En la primera celda de la segunda fila arrastra el elemento Titulo desde el panel Vinculaciones, del juego listado_entradas.
18. Asígnale un enlace a listado_comentarios.php?id=
19. Empleando la vista código, modifica el vínculo arrastrando el elemento Id del juego listado_entradas desde el panel Vinculaciones para que se muestre de este modo:
    <a href="listado_comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?>">
20. En la segunda celda de la segunda fila inserta el elemento Fecha arrastrándolo desde el panel Vinculaciones. Ponlo en cursiva empleando un estilo en línea aplicado a la celda.
     
21. Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros.
22. Utiliza la opción Repetir Región para el juego listado_entradas.
23. Luego coloca el cursor al final del contenido editable e introduce una barra de navegación de registros para el juego listado_entradas. Utiliza imágenes, y centra la tabla en la página.
     
    
24. Ahora añadiremos el listado de comentarios.
    Escribe el siguiente párrafo de clase titulo con el texto Selecciona un comentario a modificar o eliminar.
25. Crearemos un recordset para cargar el autor, correo y fecha del comentario.
    Haz clic en el botón para crear un nuevo juego de registros.
26. En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe listado_comentarios.
27. En Conexión selecciona blog_aulaclic.
28. En Tabla selecciona Comentarios.
29. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente.
30. Modifica los desplegables de Filtro para que pueda leerse: Id_Entrada = Parámetro URL id.
31. Haz clic en el botón Aceptar para crear el juego de registros.
     
32. Debajo del párrafo que has añadido inserta una tabla con 10 píxeles de relleno de celda.
33. La tabla deberá tener 2 filas y 5 columnas, con un ancho del 100% y la primera fila de encabezados.
34. Aplica a las celdas de la primera fila el estilo borde_inferior.
35. En la primera celda de la primera fila escribe Autor en negrita.
36. En la segunda celda de la primera fila escribe Correo en negrita.
37. En la tercera celda de la primera fila escribe Fecha en negrita.
38. Arrastra el elemento Autor del juego listado_comentarios a la primera celda de la segunda fila.
39. Arrastra el elemento Correo_Autor del juego listado_comentarios a la segunda celda de la segunda fila y ponlo en cursiva.
40. Arrastra el elemento Fecha del juego listado_comentarios a la tercera celda de la segunda fila y ponlo en cursiva.
     
41. Centra horizontalmente cuarta celda de la segunda fila, e inserta la imagen imagenes/edit.png y enlázala a modifica_comentario.php?id=. No olvides establecer su atributo Alt como Editar.
42. Arrastra el elemento Id del juego listado_comentarios para que el enlace quede de este modo:
    modifica_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?>
43. En la quinta celda de la segunda fila inserta la imagen imagenes/trash.png y enlázala a elimina_comentario.php?id=
44. Arrastra el elemento Id para que el enlace quede de este modo:
    elimina_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?>
45. Selecciona la segunda fila de la tabla y haz que se repita para que muestre todos los registros del recordset.
46. Utiliza la opción Repetir Región, sobre el juego listado_comentarios, seleccionando Todos los registros.
     
47. Para terminar, selecciona el primer párrafo y la primera tabla y haz que se muestren si no hay registros en el recordset de listado_comentarios. Utiliza la opción Mostrar si el juego de registros está vacío.
    Si es la primera vez y al listado_comentarios no le hemos pasado un Id de entrada, o si la entrada no tiene comentarios lo que hay que hacer es visualizar el listado de entradas (la primera tabla).
    Si por el contrario la entrada seleccionada tiene comentarios tenemos que visualizar la segunda tabla (la que contiene el lista de comentarios):
48. Selecciona el segundo párrafo y la segunda tabla y haz que se muestren si hay registros en el recordset de listado_comentarios. Utiliza la opción Mostrar si el juego de registros no está vacío.
    Hemos creado un listado de entradas que al hacer clic sobre una de ellas envía su ID a la misma página que genera un listado de los comentarios correspondientes a esa entrada.
49. Para acabar, añade el estilo necesario a la hoja de estilos para que las imágenes con enlace se muestren sin borde a img {border-style: none;}.
50. Cierra el documento guardando los cambios.