Differences

This shows you the differences between two versions of the page.

--- apuntes:paginas_web [2017/11/24 09:03] – [Paginación de resultados] Santiago Faci
+++ apuntes:paginas_web [2019/02/13 17:19] (current) – [Proyectos de Ejemplo] Santiago Faci
@@ Line 681: / Line 681: @@
 </code>
 ==== Paginación de resultados ====
+Cuando los resultados de una consulta generan una página demasiada extensa resulta bastante molesto por lo que se suele emplear la técnica de paginación para mostrar un número limitado de resultados por página incluso cuando hay muchos más. La solución pasa por generar una serie de enlaces a modo de páginas que permitan al usuario navegar entre los resultados de una manera más cómoda. También es posible incluso mostrar al usuario la posibilidad de ver todos los resultados en una sola página si él lo prefiere. En ocasiones esas páginas podrán ser solamente botones que permitan avanzar a la pagina anterior o a la página posterior y en otras ocasiones nos pueden mostrar un listado completo de todas las páginas (o no si éste es a su vez demasiado extenso) para que a su vez podamos avanzar más rápidamente saltándonos páginas intermedias. Esta es la solución que mostraremos aqui pero hay que tener en cuenta que no es la única como ya he comentado.
+Lo primero que haremos será definir una constante que almacene el número de resultados que se mostrarán por página. Hay que tener en cuenta que este valor puede tener un valor por defecto pero también podemos dejar que sea el usuario quien lo escoja.
 <code php>
@@ Line 688: / Line 692: @@
 . . .
 </code>
+Y ahora, a la hora de mostrar los resultados, hay que añadir el código necesario tanto para el cálculo del total de páginas necesarias para mostrar los resultados, como para mostrar sólamente los resultados que procedan. Además, habrá que dejar unos enlaces (o botones según se prefiera) que permitan al usuario navegar por las //páginas// de los resultados:
 <code php>
 <?php
+// Esta variable indica que página hay que cargar
 if (isset($_REQUEST["pagina"]))
     $pagina = $_REQUEST["pagina"];
 else
-    $pagina = 1;
+    $pagina = 0;
 . . .
 . . .
+// Primero calculamos cuántos resultados hay
 $sql = "SELECT COUNT(*) FROM articulos";
 . . .
 $total_articulos = . . .
+// Calcula el número de páginas que hacen falta
 $total_paginas = $total_articulos / TAMANO_PAGINA;
 . . .
-$sql = "SELECT nombre, descripcion FROM articulos LIMIT $pagina, TAMANO_PAGINA";
+// Se traen sólo aquellas filas que se van a mostrar (según la página)
+$sql = "SELECT nombre, descripcion FROM articulos LIMIT " .
+        $pagina * TAMANO_PAGINA . " ," . TAMANO_PAGINA;
 . . .
-// Preparar los botones que paginan los resultados
+// Prepara los botones que paginan los resultados
-for ($i = 0; $i < $total_paginas; $i++) {
+for ($i = 0; $i <= $total_paginas; $i++) {
 ?>
-    <a href="?pagina=<?= $i ?>"><?= $i ?></a>
+    <a href="?pagina=<?= $i ?>"><?= $i + 1 ?></a>
 <?php
 }
@@ Line 1582: / Line 1593: @@
     * Búsqueda de entradas
 {{ blog.png?400 }}
-  * 2. Realiza un sitio web para la gestión de un albúm de fotos siguiendo la plantilla [[https://getbootstrap.com/docs/4.0/examples/album/|Album]] de Bootstrap. Puedes utilizar la plantilla [[https://getbootstrap.com/docs/4.0/examples/dashboard/|Dashboad de Bootstrap]] para hacer el panel de control desde donde subir las fotos. El sitio web estaría pensado para mantener un solo albúm
+  * 2. Realiza un sitio web para la gestión de un albúm de fotos siguiendo la plantilla [[https://getbootstrap.com/docs/4.0/examples/album/|Album]] de Bootstrap. Puedes utilizar la plantilla [[https://getbootstrap.com/docs/4.0/examples/dashboard/|Dashboad de Bootstrap]] para hacer el panel de control desde donde subir las fotos. El sitio web estaría pensado para mantener un solo albúm y que el usuario pueda configurar el título y la descripción que aparecen en la portada. Hay que tener en cuenta que quizás es necesario paginar los resultados.
     * Recuerda [[https://getbootstrap.com/docs/4.0/components/pagination/|paginar]] los resultados cuando éstos sobrepasen una cantidad
 {{ album.png?400 }}
@@ Line 1596: / Line 1607: @@
 ===== Proyectos de Ejemplo =====
-En el repositorio de Bitbucket de [[https://bitbucket.org/sfaci/servidor-ejercicios|servidor-ejercicios]] se pueden ir encontrando todos los ejemplos que vayamos haciendo en clase. También los iré listando aqui con enlaces directos al código de cada uno de ellos:
+En el repositorio de Github de [[https://github.com/codeandcoke/servidor-ejercicios|servidor-ejercicios]] se pueden ir encontrando todos los ejemplos que vayamos haciendo en clase
-  * [[https://bitbucket.org/sfaci/servidor-ejercicios/src/1b8c78a5f525d741af2e81ba43d43d89ceb4eea4/Ejercicio1/?at=master|Ejercicio 1]] Ejemplo de sitio web para un periódico
-  * [[https://bitbucket.org/sfaci/servidor-ejercicios/src/46c8a2c2d72aa08185742c0211644708b86362df/AgenciaViajes/?at=master|AgenciaViajes]] Página web para una agencia de viajes
-  * [[https://bitbucket.org/sfaci/servidor-ejercicios/src/46c8a2c2d72aa08185742c0211644708b86362df/Blog/?at=master|Blog]] Sitio web para la creación y mantenimiento de un blog
-----
-===== Prácticas =====
 ----
-(c) 2017 Santiago Faci
+(c) 2018-2019 Santiago Faci