Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

Creación de una aplicación web desde cero con Python Flask y MySQL: Parte 5

by
Read Time:11 minsLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 4
Creating a Web App From Scratch Using Python Flask and MySQL: Part 6

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

En la parte anterior de esta serie, vimos cómo implementar la funcionalidad de deseo Edit y Delete para nuestra Aplicación de Lista de Deseos. En esta parte implementaremos la funcionalidad de paginación para nuestra lista de inicio de usuarios.

Empezando

Comencemos clonando la parte anterior del tutorial de GitHub.

Una vez clonado el código fuente, ve al directorio del proyecto e inicia el servidor web.

Ve a tu navegador a http://localhost:5002/ y debes tener la aplicación en ejecución.

Implementar la paginación

A medida que aumenta la lista de deseos en la página de inicio del usuario, se desplaza hacia abajo en la página. Por lo tanto, es importante implementar la paginación. Limitaremos el número de elementos que se muestran en una página a un número determinado.

Modificar el procedimiento de obtención de deseos

Comenzaremos modificando el procedimiento de sp_GetWishByUser para devolver resultados basados en un valor limit y offset. Esta vez crearemos nuestra declaración de procedimiento almacenado de forma dinámica para devolver el conjunto de resultados en función del límite y el valor de compensación. Este es el procedimiento almacenado sp_GetWishByUser MySQL modificado.

Como se ve en el procedimiento almacenado anterior, creamos nuestra consulta SQL dinámica y la ejecutamos para obtener la lista de deseos basada en los parámetros offset y limit.

Agregar paginación a la interfaz de usuario

En primer lugar, definiremos algunas configuraciones predeterminadas. En app.py agrega una variable para el límite de páginas.

Haz que el método de python getWish acepte solicitudes POST.

Lee el offset y limit dentro del método getWish y pásalo mientras llamas al procedimiento almacenado de MySQL sp_GetWishByUser.

Modifica la función de JavaScript GetWishes en userHome.html para convertirla en una solicitud POST y pasar el valor offset.

Guarda todos los cambios y reinicia el servidor. Inicia sesión con una dirección de correo electrónico y una contraseña válidas y solo deberías mostrar dos registros en la pantalla.

User Home with Limited recordsUser Home with Limited recordsUser Home with Limited records

Entonces, la parte de la base de datos está funcionando bien. Luego, debemos agregar la interfaz de usuario de paginación a la página de inicio del usuario, lo que te permitirá navegar por los datos.

Usaremos el componente de paginación Bootstrap. Abre userHome.html y agrega el siguiente código HTML después de #ulist UL.

Guarda los cambios y reinicia el servidor. Después de iniciar sesión correctamente, deberías poder ver la paginación en la lista de deseos.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Hacer que la paginación sea dinámica

La paginación anterior es cómo se verá nuestra paginación. Pero para que sea funcional, necesitamos crear nuestra paginación dinámicamente en función del número de registros en la base de datos.

Para crear nuestra paginación, necesitaremos el número total de registros disponibles en la base de datos. Así que modifiquemos el procedimiento almacenado de MySQL sp_GetWishByUser para devolver el número total de registros disponibles como parámetro de salida.

Como se ve en el procedimiento almacenado modificado anterior, agregamos un nuevo parámetro de salida llamado p_total y seleccionamos el recuento total de los deseos basados en la identificación del usuario.

También modifica el método de python getWish para pasar un parámetro de salida.

Como puedes ver en el código anterior, una vez que llamamos al procedimiento almacenado, cerramos el cursor y abrimos un nuevo cursor para seleccionar el parámetro devuelto.

Anteriormente, estábamos devolviendo una lista de deseos del método Python. Ahora, también necesitamos incluir el recuento total de registros en el JSON devuelto. Así que convertiremos el diccionario de la lista de deseos en otra lista y luego agregaremos la lista de deseos y el recuento de registros a la lista principal. Este es el código modificado del método de python getWish.

En la función GetWishes de JavaScript, dentro de la devolución de llamada de éxito agrega un registro de consola.

Guarda todos los cambios anteriores y reinicia el servidor. Inicia sesión con una dirección de correo electrónico y una contraseña válidas y, cuando estés en la página de inicio del usuario, comprueba la consola del explorador. Deberías poder ver una respuesta similar a la que se muestra a continuación:

Usando el recuento total recibido de la respuesta, podemos obtener el número total de páginas.

Dividir el recuento total de elementos del recuento de itemsPerPage nos da el número de páginas requeridas. Pero esto solo es cierto cuando el total es un múltiplo de itemsPerPage. Si ese no es el caso, tendremos que verificarlo y manejar el recuento de páginas en consecuencia.

Eso nos dará el recuento de páginas correcto.

Ya que tenemos el número total de páginas, crearemos el HTML de paginación de forma dinámica. Elimina el elemento LI del HTML de paginación que agregamos anteriormente.

En la devolución de llamada exitosa de GetWishes, creamos el enlace anterior dinámicamente usando jQuery.

En el código anterior, acabamos de crear el enlace del botón anterior y lo agregamos a la paginación UL.

Guarda los cambios anteriores y reinicia el servidor. En el inicio de sesión correcto, deberías poder ver el vínculo anterior en la lista.

Previous link in the PaginationPrevious link in the PaginationPrevious link in the Pagination

De manera similar, agregamos las páginas en la paginación según el recuento de páginas.

También agregamos el enlace Siguiente después de que se haya agregado el enlace de las páginas.

Guarda los cambios y reinicia el servidor. Inicia sesión con una dirección de correo electrónico y una contraseña válidas, y una vez en la página de inicio del usuario, deberías poder ver la paginación.

Pagination in User Home PagePagination in User Home PagePagination in User Home Page

Asociar un evento Click a un número de página

Ahora viene la lógica principal que hará que nuestra paginación sea funcional. Lo que haremos es adjuntar una llamada de evento de click en cada índice de página para llamar a la función GetWishes de JavaScript. Primero adjuntemos un evento click al elemento delimitador que muestra el número de página.

Así que acabamos de adjuntar un evento onclick al delimitador de la página. En cada clic, llamaremos a la función GetWishes y pasaremos el offset. Así que declara el offset fuera del bucle for.

Llama a la función GetWishes dentro de la llamada al evento de click.

También incrementa el offset según el número de registros mostrados.

Pero cada vez que se llama a la función GetWishes, el valor de offset siempre será el último configurado. Por lo tanto, haremos uso de cierres de JavaScript para pasar el desplazamiento correcto a la función GetWishes.

Guarda todos los cambios anteriores y reinicia el servidor. Inicia sesión con credenciales válidas y una vez en la página de inicio del usuario, intenta hacer clic en las páginas en la paginación UL.

Luego, implementaremos los enlaces de la página anterior y siguiente. Puede parecer un poco complicado, así que déjame explicarte un poco antes de comenzar con la implementación.

Mostraremos cinco páginas a la vez. Usando el siguiente enlace y el anterior, el usuario puede navegar a las cinco páginas siguientes y cinco anteriores, respectivamente. Almacenaremos los valores de la página de inicio y la página final y seguiremos actualizando tanto en el clic del botón siguiente como en el anterior. Así que comencemos agregando dos campos ocultos a la página userHome.html.

En la devolución de llamada exitosa de GetWishes, después de que hayamos vaciado el UL .pagination, agrega la siguiente línea de código para obtener la última página de inicio y final.

No se mostrará ningún enlace de botón anterior cuando se muestren las páginas 1 a 5. Si las páginas mostradas son mayores de 5, mostraremos el enlace del botón anterior.

Cuando el usuario hace clic en el botón anterior, restableceremos los valores hdnStart y hdnEnd y llamaremos a la función de JavaScript GetWishes.

Después, en función de la página de inicio y la página final, crearemos un bucle y crearemos los enlaces de página y anexaremos el UL .pagination.

Al comparar el recuento total de páginas y el valor de inicio de la página, decidiremos la visualización del siguiente enlace del botón.

Como se ve en el código anterior, en el siguiente clic del botón estamos restableciendo los valores de los botones hdnStart y hdnEnd y llamando a la función de JavaScript GetWishes.

Así que esta es la función final de JavaScript GetWishes.

Guarda todos los cambios anteriores y reinicia el servidor. Inicia sesión con una dirección de correo electrónico y una contraseña válidas. Deberías poder ver la paginación totalmente funcional de la lista de deseos del usuario.

Conclusión

En esta parte de la serie, implementamos la funcionalidad de paginación para la lista de deseos en la página de inicio del usuario. Vimos cómo recuperar datos usando un procedimiento almacenado de MySQL y crear paginación usando esos datos, jQuery y Bootstrap.

En la siguiente parte de esta serie de tutoriales, implementaremos la funcionalidad de carga de archivos en nuestra aplicación.

El código fuente de este tutorial está disponible en GitHub.

¡Haznos saber tu opinión en los comentarios!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.