Scribd
Cargar
264 vistas

Aplicacion Python Flask

Este documento describe los pasos para crear una aplicación web de lista de deseos (bucket list) usando Python Flask y MySQL. Incluye instrucciones para instalar Flask y MySQL, crear una base de datos y tablas, e implementar vistas y funcionalidad básicas como registro de usuarios usando plantillas HTML y almacenados procedimientos. El objetivo final es tener una aplicación funcional con registro de usuarios, inicio de sesión y creación de elementos de lista de deseos.

Cargado por

Juan Nicolas Pardo Martin
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
264 vistas

Aplicacion Python Flask

Este documento describe los pasos para crear una aplicación web de lista de deseos (bucket list) usando Python Flask y MySQL. Incluye instrucciones para instalar Flask y MySQL, crear una base de datos y tablas, e implementar vistas y funcionalidad básicas como registro de usuarios usando plantillas HTML y almacenados procedimientos. El objetivo final es tener una aplicación funcional con registro de usuarios, inicio de sesión y creación de elementos de lista de deseos.

Cargado por

Juan Nicolas Pardo Martin
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

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

El siguiente tutorial crea una aplicación de bucket list con las siguientes funcionalidades: Crear
usuarios, iniciar sesión y crear una lista de bucket.

Introducción
Flask es un framework de Python para crear aplicaciones web. “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 más 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:
pip install flask

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;
from flask import Flask
app = Flask(__name__)

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


@app.route("/")
def main():
    return "Welcome!"

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


if __name__ == "__main__":
    app.run()

Guarda los cambios y ejecuta app.py:


python 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:
<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Python Flask Bucket List App</title>
 
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
rel="stylesheet">
 
    <link href="http://getbootstrap.com/examples/jumbotron-
narrow/jumbotron-narrow.css" rel="stylesheet">
 
 
</head>
 
<body>
 
    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a
href="#">Home</a>
                    </li>
                    <li role="presentation"><a href="#">Sign In</a>
                    </li>
                    <li role="presentation"><a href="showSignUp">Sign
Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>
 
        <div class="jumbotron">
            <h1>Bucket List App</h1>
            <p class="lead"></p>
            <p><a class="btn btn-lg btn-success" href="showSignUp"
role="button">Sign up today</a>
            </p>
        </div>
 
        <div class="row marketing">
            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus.
Maecenas faucibus mollis interdum.</p>
 
                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum
at eros. Cras mattis consectetur purus sit amet fermentum.</p>
 
                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet
non magna.</p>
            </div>
 
            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus.
Maecenas faucibus mollis interdum.</p>
 
                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum
at eros. Cras mattis consectetur purus sit amet fermentum.</p>
 
                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet
non magna.</p>
            </div>
        </div>
 
        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>
 
    </div>
</body>
 
</html>
Abre app.py e importa render_template, el cual usaremos para renderizar los archivos de plantilla.
from flask import Flask, render_template

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


def main():
    return render_template('index.html')

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


de tener la pantalla de abajo:
i

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:
mysql -u <username> -p

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

Una vez que la base de datos ha sido croata, crea una tabla llamada tbl_user como se muestra:
CREATE TABLE `BucketList`.`tbl_user` (
  `user_id` BIGINT NULL AUTO_INCREMENT,
  `user_name` VARCHAR(45) NULL,
  `user_username` VARCHAR(45) NULL,
  `user_password` VARCHAR(45) NULL,
  PRIMARY KEY (`user_id`));
CREATE TABLE `BucketList`.`tbl_user` (
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:
DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
  IN p_username VARCHAR(20),
    IN p_password VARCHAR(20)
)
BEGIN
    if ( select exists (select 1 from tbl_user where user_username =
p_username) ) THEN
     
        select 'Username Exists !!';
     
    ELSE
     
        insert into tbl_user
        (
            user_name,
            user_username,
            user_password
        )
        values
        (
            p_name,
            p_username,
            p_password
        );
     
    END IF;
END$$
DELIMITER ;

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:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>
 
    
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
rel="stylesheet">
 
    <link href="http://getbootstrap.com/examples/jumbotron-
narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/signup.css" rel="stylesheet">
    
  </head>
 
  <body>
 
    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" ><a href="main">Home</a></li>
            <li role="presentation"><a href="#">Sign In</a></li>
            <li role="presentation" class="active"><a href="#">Sign
Up</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>
 
      <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-signin">
        <label for="inputName" class="sr-only">Name</label>
        <input type="name" name="inputName" id="inputName" class="form-
control" placeholder="Name" required autofocus>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="inputEmail" id="inputEmail" class="form-
control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="inputPassword" id="inputPassword"
class="form-control" placeholder="Password" required>
         
        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block"
type="button">Sign up</button>
      </form>
      </div>
 
       
 
      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>
 
    </div>
  </body>
</html>

También agrega el siguiente CSS como signup.css a la carpeta estática dentro de PythonApp.
body {
  padding-top: 40px;
  padding-bottom: 40px;
}
 
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

En app.py agrega otro método llamado showSignUp para renderizar la página de registro una vez
que una solicitud llegue a /showSignUp:
@app.route('/showSignUp')
def showSignUp():
    return render_template('signup.html')

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 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:
@app.route('/signUp')
def signUp():
    # create user code will be here !!

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.
@app.route('/signUp',methods=['POST'])
def signUp():
    # create user code will be here !!
Para leer los valores enviados necesitamos importar request desde Flask.
from flask import Flask, render_template, request

Usando request podemos leer los valores publicados como se muestra bajo:
@app.route('/signUp',methods=['POST'])
def signUp():
 
    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

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:
@app.route('/signUp',methods=['POST'])
def signUp():
 
    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']
 
    # validate the received values
    if _name and _email and _password:
        return json.dumps({'html':'<span>All fields good !!</span>'})
    else:
        return json.dumps({'html':'<span>Enter the required
fields</span>'}

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

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:


$(function() {
    $('#btnSignUp').click(function() {
 
        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

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:
{"html": "<span>All fields good !!</span>"}

Advertisement

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:

pip install flask-mysql

import MySQL
from flask.ext.mysql import MySQL

Mas temprano definimos nuestra aplicación como se muestra:

app = Flask(__name__)

Junto con eso incluye las siguientes configuraciones de MySQL:

mysql = MySQL()
 
# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'jay'
app.config['MYSQL_DATABASE_PASSWORD'] = 'jay'
app.config['MYSQL_DATABASE_DB'] = 'BucketList'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)

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


conn = mysql.connect()

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.

cursor = conn.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:

from werkzeug import generate_password_hash, check_password_hash

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

_hashed_password = generate_password_hash(_password)

Ahora, vamos a llamar al procedimiento sp_createUser:


cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

Si el procedimiento es ejecutado exitosamente, entonces vamos a agregar los cambios y


devolveremos el mensaje de éxito.
data = cursor.fetchall()
 
if len(data) is 0:
    conn.commit()
    return json.dumps({'message':'User created successfully !'})
else:
    return json.dumps({'error':str(data[0])})

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.
{"message": "User created successfully !"}

https://github.com/jay3dec/PythonFlaskMySQLApp---Part-1
i
https://github.com/jay3dec/PythonFlaskMySQLApp---Part-1

También podría gustarte