Listar juegos en tabla HTML usando Python, MySQL y Flask

Flask con MySQL – Ejemplo de conexión (CRUD)

En el artículo de hoy te enseñaré cómo crear una aplicación web usando Flask, Python y MySQL. Vamos a ver cómo hacer una conexión a la base de datos de MySQL desde Flask y realizar todas las operaciones de insertar, actualizar, mostrar y eliminar.

Al final tendremos una web que será un CRUD, trabajando con formularios, plantillas, rutas, etcétera.

Conectando Python con MySQL

Preparando base de datos MySQL para conectar con Flask
Preparando base de datos MySQL para conectar con Flask

Como lo dije anteriormente, vamos a conectar a MySQL / MariaDB así que vamos a usar PyMySQL para este enlace. Encerramos el comportamiento en una función y se ve así:

Recuerda cambiar las credenciales de acuerdo a tu entorno. Por cierto, nuestra aplicación de ejemplo va a gestionar videojuegos. No olvides crear la base de datos con anterioridad, e instalar obviamente MySQL.

Por cierto, la creación de la tabla queda como se ve a continuación:

Controlador

Hasta este punto tenemos la conexión con la base de datos, pero vamos a exponer todos los métodos usando un controlador, que no es más que un archivo que expone ciertas funciones con respecto a la gestión de juegos.

En este archivo es en donde creamos los métodos para las consultas SQL para más tarde exponerlos desde cualquier ruta en Flask. Por lo tanto el archivo queda así:

Básicamente tenemos varias funciones que reciben los argumentos necesarios para cada caso. El nombre de cada función indica lo que hace, pero todas ellas hacen una consulta SQL a la base de datos.

Si quieres ver un tutorial más enfocado a la conexión, puedes ver uno que hice hace tiempo, ya que aquí el objetivo es un CRUD de Flask con MySQL.

Flask y MySQL

Es momento de exponer las rutas y crear la app web con Flask. Vamos paso por paso explicando poco a poco.

Plantilla maestra

Voy a reutilizar las plantillas para evitar repetir código. Esto lo podemos hacer de manera muy simple usando Jinja. Si quieres ver esto en profundidad puedes leer mi otro post, aunque es muy sencillo.

Como sea, la plantilla base queda así:

De modo que ahora simplemente vamos a extender de ella en todas las otras templates.

Insertar juego con formulario

Formulario para insertar datos usando Flask y MySQL
Formulario para insertar datos usando Flask y MySQL

Para insertar un juego primero debemos mostrar el formulario con Flask, renderizando la plantilla:

La plantilla es cuestión es la siguiente:

En la misma solo tenemos un formulario HTML que tiene los input nombre, descripcion y precio que más tarde vamos a procesar en la ruta /guardar_juego usando Flask.

Al enviar el formulario llegamos a la siguiente ruta:

Y justo ahí es en donde tomamos los valores del formulario, invocamos al método del controlador y hacemos una redirección hacia el listado de juegos.

Listado de juegos – Consulta SQL select

Listar juegos en tabla HTML usando Python, MySQL y Flask
Listar juegos en tabla HTML usando Python, MySQL y Flask

Ahora vamos al siguiente apartado que es el listado de videojuegos. En este caso renderizamos la plantilla con Flask, pero además le pasamos los juegos que se van a mostrar en una tabla HTML.

Si te fijas le estamos pasando la variable (previamente obtenida del controlador) en la línea 5, como segundo argumento a render_template. Más tarde, en la plantilla, hacemos un ciclo for para iterar sobre todos los juegos y dibujar la tabla:

Y así es como se dibuja la tabla. Por cierto fíjate en que tenemos dos columnas especiales. Una de ellas es un enlace que lleva a la plantilla para editar, pasando el id. La otra es un formulario que lleva el id del juego en un input oculto, y que, como bien dice, es para eliminar el juego.

Eliminar juego – Operación delete en MySQL

Es momento de ver la operación para eliminar un registro de la base de datos de MariaDB / MySQL. Ya te mostré anteriormente el método del controlador, ahora veamos la ruta en donde lo exponemos:

Como puedes ver solo necesitamos que se nos envíe, dentro del formulario, el id. Y eso lo hacemos anteriormente al dibujar la tabla.

Operación update

Editar registro con MySQL y Flask
Editar registro con MySQL y Flask

Para terminar el tutorial veamos cómo realizar una actualización de datos en este CRUD con Flask y MySQL. Primero te enseñaré la ruta que recibe el id del juego, obtiene el registro por id y muestra la plantilla con el formulario para editar:

En este caso obtenemos el juego por ID y renderizamos la plantilla pasándole el dato, justo como cuando mostrábamos la lista completa de los juegos. Y ahora en el formulario rellenamos el campo indicando el atributo value de cada input:

Fíjate en que dentro de la línea 12 estamos incluyendo el ID del juego que vamos a actualizar, de manera oculta. Ahora, cuando ese formulario se envíe se va a procesar en el siguiente fragmento de código de Python:

De nuevo estamos recogiendo valores del formulario, invocando a nuestro controlador y redireccionando. Seguimos el mismo patrón de antes, reutilizando código y haciéndolo de manera sencilla.

Poniendo todo junto

Hasta este punto te he mostrado el código detallado de esta aplicación web que usa Python, Flask y MySQL. Adicional a ello te voy a dejar el código completo en mi GitHub para que puedas descargarlo y probarlo por ti mismo.

Recuerda que debes contar con MySQL, Python y pip instalados. También debes crear la base de datos y la tabla.

Luego instala las dependencias con:

  1. pip install pymysql
  2. pip install flask

Finalmente ejecuta:

python main.py

Y ahora puedes visitar la aplicación en http://localhost:8000/

Recuerda que en mi blog tengo todavía más tutoriales de programación con Python y Flask, además de otros posts sobre MySQL.

Por cierto, hablando de estas tecnologías, anteriormente te enseñé cómo hacer una API REST con Flask y SQLite3.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

7 comentarios en “Flask con MySQL – Ejemplo de conexión (CRUD)”

  1. Guillermo Rodriguez

    Estoy siguiendo sus videos y me gusta este crud, tengo una duda al desplegar un proyecto como este o similiar hecho en flask la base de datos en mysql sin un utilizar sqlalchemy, heroku o pythonanywhere lee el codigo de la base de datos como sql, o necesariamente debe estar creado como una clase para que el servidor lea la base de datos y la cree??
    Quedo atento a su comentario y gracias por estos tutoriales me ayudan mucho

  2. Hola, antes de nada, darte las gracias por compartir tu trabajo.
    En segundo lugar ando buscando consejo, estoy realizando una aplicación web con PHP que gestiona datos importados de hojas Excel y los guarda en BBDD. Con estos datos la aplicación muestra diferentes tipos de gráficos en función de lo que el usuario seleccione.
    Por otra parte, tengo un código Python que analiza por medio de redes neuronales datos de las mismas hojas Excel.
    Me gustaría saber como podría integrar el código Python en la aplicación web, y tener una sección donde poder analizar con la redes neuronales los datos que administra la aplicación.
    Cualquier consejo me sería de gran ayuda.
    Un saludo, gracias.

Dejar un comentario