CRUD con Python, Flask y MySQL paso a paso

Qué vas a construir

Una aplicación web con tres piezas que conversan entre sí. Tu navegador le pide páginas a Flask; Flask ejecuta tu código Python, consulta MySQL y devuelve el HTML ya armado.

Paso 1. Prepara las herramientas

Comprueba que tienes estas tres cosas antes de seguir:

• Python 3.10 o superior. Abre la terminal (Win y escribe cmd) y ejecuta python --version. Si Windows abre la tienda o dice que no encuentra el comando, reinstala Python marcando Add python.exe to PATH.
• VS Code con la extensión Python de Microsoft. En VS Code: Ctrl+Shift+X, busca Python e instala la de Microsoft.
• WampServer instalado. Trae Apache, PHP, MySQL, MariaDB y phpMyAdmin.

Paso 2. Enciende WampServer

1. Abre WampServer desde el menú Inicio y espera a que aparezca su ícono junto al reloj.
2. El color del ícono indica el estado: verde, todo encendido; naranja, algún servicio no arrancó; rojo, ninguno.
3. Haz clic izquierdo en el ícono. Verás el menú de la imagen. Fíjate en la línea Default DBMS: mysql: significa que MySQL es el motor principal.

Paso 3. Entra a phpMyAdmin

1. En el menú de WampServer, elige PhpMyAdmin, o abre http://localhost/phpmyadmin en el navegador.
2. Usuario root, contraseña vacía y, en Elección del servidor, MySQL.
3. Al entrar, revisa el panel derecho: debe decir Servidor: MySQL (127.0.0.1 via TCP/IP) y el usuario root@localhost.

Paso 4. Crea la base de datos y la tabla

1. En phpMyAdmin, pestaña SQL (arriba).
2. Pega el script completo y pulsa Continuar, abajo a la derecha.
3. Recarga la página. En el panel izquierdo aparece contapyme_flask; ábrela, entra a terceros y pulsa Examinar. Deben verse tres registros.

Qué hace cada parte: utf8mb4 guarda tildes, eñes y emojis sin dañarlos. AUTO_INCREMENT numera cada tercero solo. UNIQUE en el NIT impide registrar dos veces la misma empresa: es MySQL quien protege el dato, aunque el programa tenga un error. ENUM solo acepta cliente o proveedor.

Paso 5. Crea el proyecto en VS Code

1. Crea una carpeta sin espacios ni tildes en la ruta, por ejemplo C:\proyectos\contapyme-flask.
2. En VS Code: Archivo, Abrir carpeta, elige esa carpeta y acepta Sí, confío en los autores.
3. Crea esta estructura con los íconos de Nuevo archivo y Nueva carpeta del explorador. Los nombres templates y static son obligatorios: Flask los busca exactamente así.

Paso 6. Entorno virtual e instalación

Un entorno virtual es una copia de Python solo para este proyecto. Así las librerías de un proyecto no chocan con las de otro.

1. Abre la terminal de VS Code: Terminal, Nueva terminal (o Ctrl+ñ).
2. Crea el entorno, actívalo e instala las librerías:

El archivo requirements.txt contiene:

3. Si todo salió bien, la línea de la terminal empieza con (venv).
4. Presiona Ctrl+Shift+P, escribe Python: Select Interpreter y elige el que dice venv. Así VS Code deja de subrayar flask como si no existiera.

Paso 7. La conexión: db.py

Este archivo tiene una sola tarea: abrir conexiones a MySQL. Separarlo de las rutas es la misma idea de capas del laboratorio 3: si mañana cambias de base de datos, solo tocas este archivo.

os.getenv("DB_PASSWORD", "") busca una variable de entorno y, si no existe, usa el valor de la derecha. Con WampServer de fábrica no tienes que cambiar nada. Si tu MySQL tiene contraseña, la defines en la terminal en vez de escribirla en el código, y así no terminas subiéndola a GitHub:

Paso 8. app.py: la aplicación y la validación

Empieza app.py con lo que usan todas las rutas: las importaciones, el objeto app y una función que lee y valida el formulario.

Flask(__name__) crea la aplicación. secret_key es necesaria para los mensajes flash, esos avisos verdes y rojos que aparecen una sola vez después de guardar. leer_formulario devuelve los datos limpios y una lista de errores; si la lista está vacía, los datos son válidos.

Paso 9. Leer: listar y buscar (R)

Mira los %s: son los huecos donde mysql-connector pone los valores de forma segura. Nunca armes la consulta pegando texto con f"...{q}...", porque eso abre la puerta a la inyección SQL que viste en el laboratorio 3. dictionary=True hace que cada fila llegue como diccionario, así en la plantilla escribes t.nombre en vez de t[2]. El bloque try/finally garantiza que la conexión se cierra aunque ocurra un error.

Ahora las dos plantillas que usa esta ruta. base.html es el molde común; las demás páginas lo heredan con extends y solo llenan el bloque contenido.

Y la hoja de estilos, para que se vea como en los pantallazos:

Paso 10. Crear (C)

La misma ruta atiende dos momentos: con GET muestra el formulario vacío, con POST recibe lo que el usuario escribió.

con.commit() confirma el cambio: sin esa línea el registro no se guarda. Si MySQL rechaza el NIT porque ya existe, lanza el error 1062 (ER_DUP_ENTRY) y lo convertimos en un mensaje comprensible. Después de guardar se redirige al listado; así, si el usuario recarga la página, no se crea el registro dos veces.

El formulario sirve para crear y para editar. Si recibe un tercero, muestra sus datos; si no, aparece vacío.

Paso 11. Actualizar (U)

<int:id_tercero> toma el número de la dirección: en /editar/2, id_tercero vale 2. Si ese tercero no existe, abort(404) responde "no encontrado" en vez de fallar. Fíjate en el WHERE id=%s del UPDATE: sin él, se modificarían todos los terceros de la tabla.

Paso 12. Eliminar (D) y arrancar la aplicación

Eliminar solo acepta POST. Si fuera un enlace normal (GET), bastaría con abrir una dirección, o que el navegador la precargara, para borrar datos. Por eso en index.html el botón está dentro de un formulario y pide confirmación.

debug=True recarga la aplicación cada vez que guardas un archivo y muestra los errores con detalle. Sirve para desarrollar; en un servidor público se apaga.

Paso 13. Ejecuta y prueba

1. Con (venv) activo, ejecuta python app.py.
2. La terminal muestra Running on http://127.0.0.1:5000. Mantén Ctrl y haz clic en la dirección.
3. Prueba las cuatro operaciones en este orden: busca "pap", crea un tercero, intenta crear otro con el mismo NIT, edita uno y elimina otro.
4. Para detener el servidor: Ctrl+C en la terminal.

Paso 14. Comprueba en phpMyAdmin

La prueba definitiva de que el CRUD funciona no es la página web: es la base de datos. Vuelve a phpMyAdmin, abre terceros y pulsa Examinar. El tercero que creaste debe estar allí, con su id y la fecha en creado; el que eliminaste ya no.

Errores frecuentes y su solución

Reto y entregable

Reto: agrega el campo ciudad a los terceros. Debe guardarse, mostrarse en el listado y poder editarse. Toca las cuatro capas:

1. Base de datos: en phpMyAdmin, ALTER TABLE terceros ADD ciudad VARCHAR(60) NULL;
2. Validación: agrega "ciudad" al diccionario de leer_formulario.
3. Consultas: incluye la columna en el INSERT y en el UPDATE, con su %s y su valor en la tupla.
4. Plantillas: un campo nuevo en formulario.html y una columna nueva en index.html.

Entrega: la carpeta del proyecto comprimida sin la carpeta venv (pesa mucho y se reconstruye con requirements.txt), más un documento con los pantallazos de los pasos 4, 6, 13 y 14 y de la ciudad funcionando.