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

Creando una Aplicación Web Desde Cero Usando Python Flask y MySQL

by
Read Time:9 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 2

Spanish (Español) translation by James Kolce (you can also view the original English article)

Creando una Aplicación Web Desde Cero Usando Python Flask y MySQL

En estas series, vamos a estar usando Python, Flask y MySQL para crear una web aplicación simple desde cero. Será un simple aplicación bucket list donde los usuarios pueden registrarse, iniciar sesión y crear su bucket list.

Este tutorial asume que tienes conocimiento básico del lenguaje de programación Python. Estaremos usando Flask, un framework de aplicación para Python para crear nuestra aplicación, con MySQL como back-end.

Introducción a Python Flask

Flask es un framework de Python para crear aplicaciones web. Desde el sitio oficial,

Flask es un microframework para Python basado en Wekzeug, Jinja 2 y en buenas intenciones.

Cuando pensamos en Python, el framework de facto que viene a nuestra mente es el framework Django. Pero desde una perspectiva de principiantes de Python, Flask es mas fácil para comenzar que en comparación con Django.

Instalando Flask

Instalar Flask es bastante simple y rápido. Con el administrador de paquetes pip todo lo que necesitamos hacer es:

Una vez que hayas terminado de instalar Flask, crea una carpeta llamada FlaskApp. Navega a la carpeta FlaskApp y crea un archivo llamado app.py. Importa el módulo flask y crea una aplicación usando Flask como se muestra:

Ahora define la ruta básica / y su correspondiente manejador de solicitud.

Enseguida, revisa si el archivo ejecutado es el programa principal y ejecuta la aplicación:

Guarda los cambios y ejecuta app.py:

Apunta tu navegador a http://localhost:5000/ y deberías de tener el mensaje de bienvenida.

Creando una Página Principal

Primero, cuando la aplicación se ejecuta deberíamos de mostrar una página principal con los últimos elementos de la bucket list. Así que vamos a agregar nuestra página principal a la carpeta de nuestra aplicación.

Flask busca archivos de plantilla dentro de la carpeta templates. Entonces navega a la carpeta PythonApp y crea una carpeta llamada templates. Dentro de templates, crea un archivo llamado index.html. Abre index.html y agrega el siguiente HTML:

Abre app.py e importa render_template, el cual usaremos para renderizar los archivos de plantilla.

Modifica el método principal para devolver el archivo plantilla renderizado.

Guarda los cambios y reinicia el servidor. Apunta tu navegador a http://localhost:5000/ y deberías de tener la pantalla de abajo:

Bucket List App home pageBucket List App home pageBucket List App home page

Creando una Página de Registro

Paso 2: Instalando la Base de Datos

Estaremos usando MySQL como back-end. Así que inicia sesión a MySQL desde la linea de comandos, o si lo prefieres en una GUI como MySQL work bench, puedes usar eso también. Primero, crea la base de datos llamada BucketList. Desde la linea de comandos:

Ingresa la contraseña requerida y cuando hayas iniciado sesión, ejecuta el siguiente comando y crea la base de datos:

Una vez que la base de datos ha sido croata, crea una tabla llamada tbl_user como se muestra:

Estaremos usando Stored procedures para nuestra aplicación de Python para interactuar con la base de datos MySQL. Así que, una vez que la tabla tbl_user ha sido creada, crea un procedimiento almacenado llamado sp_createUser para registrar a un usuario.

Cuando se esté creando un procedimiento almacenado para crear un usuario en la tabla tbl_user, primero necesitamos revisar si un usuario con el mismo username ya existe. Si existe necesitamos tirar un error al usuario, de lo contrario crearemos el usuario en la tabla de usuario. Aquí está como el procedimiento almacenado sp_createUser se vería:

Paso 2: Crea una Interfaz de Registro

Navega al directorio PythonApp/templates y crea un archivo HTML llamado signup.html. Agrega el siguiente código HTML a signup.html:

También agrega el siguiente CSS como signup.css a la carpeta estática dentro de PythonApp.

En app.py agrega otro método llamado showSignUp para renderizar la página de registro una vez que una solicitud llegue a /showSignUp:

Guarda los cambios y reinicia el servidor. Haz clic en el botón Sign Up en la página principal y deberías de tener la página de registro como se muestra:

Sign Up user pageSign Up user pageSign Up user page

Paso 3: Implementa un Método de Registro

Enseguida, necesitamos un método del lado del servidor para que la UI interactue con la base de datos MySQL. Así que navega a PythonApp y abre app.py. Crea un nuevo método llamado signUp y también agrega una ruta /signUp. Así es como se ve:

Estaremos usando jQuery AJAX para enviar nuestros datos de registro al método signUp, así que vamos a especificar el método en la definición de la ruta.

Para leer los valores enviados necesitamos importar request desde Flask.

Usando request podemos leer los valores publicados como se muestra bajo:

Una vez que los valores son leídos, simplemente vamos a revisar si son válidos y mientras tanto vamos solo a devolver un mensaje simple:

También importa json desde Flask, ya que lo estamos usando en el código anterior para devolver datos json.

Paso 4: Crea una Solicitud de Registro

Estaremos usando jQuery AJAX para enviar la solicitud de registro al método de Python. Descarga y pon jQuery dentro de PythonApp/static/js y agrega un link a él desde la página de registro. Una vez que jQuery ha sido incluido, vamos a agregar una solicitud POST de jQuery cuando el usuario haga clic al botón Sign Up.

Vamos a adjuntar el evento del botón de registro como se muestra:

Guarda todos los cambios y reinicia el servidor. Desde la página Sign Up, llena los detalles y haz clic en Sign Up. Revisa la consola del navegador y deberías de tener el mensaje de abajo:

Paso 5: Llama al Procedimiento Almacenado de MySQL

Una vez que tengamos name, email address y password, podemos simplemente llamar al procedimiento almacenado MySQL para crear el nuevo usuario.

Para conectarse con MySQL, vamos a estar usando Flask-MySQL, el cual es una extensión de Flask. Para comenzar con Flask-MySQL, haz la instalación usando el administrador de paquetes pip:

Importa MySQL dentro de app.py:

Mas temprano definimos nuestra aplicación como se muestra:

Junto con eso incluye las siguientes configuraciones de MySQL:

Primero, vamos a crear la conexión de MySQL:

Una vez que la conexión es creada, vamos a requerir un cursor para solicitar nuestro procedimiento almacenado. Usando conexión conn, crea un cursor.

Antes de llamar al procedimiento almacenado para crear usuarios, vamos a salar nuestra contraseña usando una utilidad proveída por Werkzeug. Importa el módulo dentro de app.py:

Usa el modulo de salado para crear la contraseña en hash.

Ahora, vamos a llamar al procedimiento sp_createUser:

Si el procedimiento es ejecutado exitosamente, entonces vamos a agregar los cambios y devolveremos el mensaje de éxito.

Guarda los cambios y reinicia el servidor. Ve a la página de registro e ingresa el name, email address y password y haz clic en el botón Sign Up. Al ser exitosa la creación de usuario, serás capaz de ver un menaje en la consola de tu navegador.

En Resumen

En este tutorial, vimos como comenzar con la creación de una aplicación usando Python Flask, MySQL y la extensión Flask-MySQL. Hemos creado y diseñador las tablas de la base de datos y el procedimiento almacenado, e implementado la funcionalidad de registro. En el siguiente tutorial, vamos a tomar esta serie al siguiente nivel implementando funcionalidad de inicio de sesión y algunas otras características.

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

¡Déjanos saber lo que piensas en los comentarios de abajo!

Advertisement
Did you find this post useful?
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.