Implementación de Flask-Bootstrap y Flask-WTF

Hecho un camino duro pero que valdrá la pena

Un aporte para automatizar, en windows lo puedes realizar con la consola de git

creas un archivo .sh con lo siguiente

#!/bin/bash
venv/Scripts/activate

pip install -r requeriments.txt

export FLASK_APP=main.py
export FLASK_DEBUG=1
export FLASK_ENV=development

flask run

Fue complicado pero logré aplicar cambios en el css de los componentes del formulario y seguir utilizando quick_form lo dejo aquí

después de horas para correr esto porque me estaba dando el siguiente error: jinja2.exceptions.UndefinedError: ‘wtf’ is undefined

y no había agregado el {% import "bootstrap/wtf.html" as wtf %} en el hello.html

Para los que quieran guardar las variables de ambiente en un archivo, encontré esta forma:

1. instala el siguiente paquete

pip install python-dotenv

1. crea un archivo llamado .flaskenv
2. Guarda tus variables de entorno

FLASK_APP=main.py
FLASK_DEBUG=1
FLASK_ENV=development

Es todo, espero les sirva

Me ha encantado, solo he tenido que buscar la documentación para bootstrap 4 y en hello he tenido que importar así:

'% from 'bootstrap4/form.html' import render_form % 

y en div container solo poner

{{ render_form(login_form) }}

"what the Forms " … jajajaja esos de FLASK son unos loquillos

En la documentacion de WTForms nos hablan de los validadores estos son

• DataRequired(message=None) y podemos pasarle el parámetro message, este por defecto es None. Este validador revisa que el campo contenga Data, si esto es falso puedes enviar un mensaje de alerta a través del parámetro message.
• Email() Valida que el campo contenga un email, tiene distintos parámetros que puedes configurar, uno de ellos es el mensaje.
• EqualTo() este necesita el argumento del nombre del campo con el que va ser comparado, este validador nos dice si los dos campos tienen la misma información, también podemos modificar el mensaje que envie.
• InputRequired() Este verifica que exista información en el campo donde se está aplicando
• IPAddress() Por defecto valida direcciones IPv4, pero puedes modificarlo a IPv6 con el parametro IPAddress(IPv6=True)
• Length() Valida el tamaño de un string necesita los argumentos min, max si no se especifica alguno no lo tomará en consideración.
• MacAddress Verifica que sea una dirección Mac
• NumberRange() Valida un rango entre un mínimo y un máximo, el máximo es inclusive. Si falta alguno no será verificado.
• Optional() permite que hayan campos vacíos
• URL() Verifica que sea una URL la que se está pasando.
  
  Existen otros validadores e inclusive puedes hacer tus validadores propios, esto es explicado en la misma documentación con un ejemplo.

flask what the f*ck

lol

Acá hay un poco más de documentación para validadores con wtf https://wtforms.readthedocs.io/en/stable/validators.html

Flask what the fuck

Todo corriendo a la perfección

Como dato extra, DataRequired únicamente agrega el atributo HTML required a los inputs del formulario, por lo que si se necesita mas control deberían implementar JavaScript.

<input class="form-control" id="username" name="username" required="" type="text" value="">

Waaao WTF es muy interesante y productivo

Las app web reciben info del usuario a través de formularios o formas mediante el metodo post. El servidor recibe la información y la valida.
flaskWTF – implementa wtforms en flask, que a su vez es una librería de python para validar formas web

Aca les dejo el enlace:
https://wtforms.readthedocs.io/en/3.0.x/crash_course/

De paso una muestra de uso

Por si no entendieron bien Flask-Bootstrap
https://youtu.be/PE9ZGniSDW8

documentación oficial de Flask_wtf
https://flask-wtf.readthedocs.io/en/1.0.x/

Para aquellos que hicieron lo que els comente con lo de bootstrap asi quedaria el codigo.

¿Cómo darle estilo a los input? Osea al login_form_username.
Ya que no es una etiquetea HTML no se le puede agregar una clase y por ende no se le agrega css. ¿Cómo hacerlo entonces?

Excelente forma de crear formularios.

Con bootstrap-flask para logar el render del form se debe hacer de la siguiente manera:

{% from 'bootstrap/form.html' import render_form %}
{{ render_form(login_form) }}

Aunque no veo que bootstrap-flask tenga soporte de directo de WTF el ejemplo resulta igual que el realizado en la clase, incluso el mismo error que se resolverá en la siguiente clase.

from wtforms import validators

username = StringField(‘Nombre de usuario’, validators=[validators.input_required()])
password = PasswordField(‘Password’, validators=[validators.input_required()])

Aqui les inserto la imagen del error!

alguien me podria ayudar? me sale que no puedo importar dicha flask_wtf ya se encuentra en el requeriments.txt y ya lo tengo instalado si alguien me podria ayudar!
flask.JPG

from flask import Flask, request, make_response, redirect, render_template,session
from flask_wtf import FlaskForm


app = Flask(__name__)

todo = ['TODO 1', 'TODO 2', 'TODO 3']




#pagina cuandeo arroja un error
@app.errorhandler(404)
def not_found(error):
    return render_template('404.html', error=error)


@app.route('/')
def index():
    user_ip = request.remote_addr
    response = make_response(redirect('/hello'))
    session['user_ip']= user_ip

    return response


@app.route('/hello')
def hola():
    user_ip = session.get('user_ip')

    context = {
                'user_ip' : user_ip, 
                'todo' : todo,

    }
    return render_template('hola.html', **context)

if __name__ == '__main__':
    # This is used when running locally. Gunicorn is used to run the
    # application on Google App Engine. See entrypoint in app.yaml.
    app.run(host='127.0.0.1', port=8080, debug=True)
# [END gae_flex_quickstart]

cuando vi lo de boostrap me senti como milhause

Si alguien no puede usar wtf.fields o wtf.validators, utilicen:

pip install Flask-WTF

y despues:

from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

Para instalar la version nueva de WTF usen el siguiente comando:
pip install WTForms

Esta es una manera de implementar un formulario:
class RegistrationForm(Form):
username = StringField(‘Username’, [validators.Length(min=4, max=25)])
email = StringField(‘Email Address’, [validators.Length(min=6, max=35)])
accept_rules = BooleanField(‘I accept the site rules’, [validators.InputRequired()])

Submit field

RENDEREAR

Realmente terrible esa pantalla dividida para la clase, no se alcanza a ver el código completo y toca estar pausando y devolviendo para ver mientras escribe.
Este docente tiene que re-evaluar toda su metodología.

jajaja, what the forms

De los mejores maestros de Platzi…genial…muchas gracias…

![](

Alguno me ayuda con este error, no me sirve colocando

{{ wtf.quick_form(login_form) }}

Yo uso Anaconda para manejar los ambientes virtuales y conda para instalar los paquetes de python. Por aquí les dejo por si les interesa cómo usar requirements.txt con conda: https://www.activestate.com/resources/quick-reads/how-to-manage-python-dependencies-with-conda/

{% wtf.lol %} ```

Con una conexión segura SSL/TLS es suficientemente seguro para enviar información a mi servidor? O se debe usar algo adicional.

Como dato extra, DataRequired únicamente agrega el atributo HTML required a los inputs del formulario, por lo que si se necesita mas control deberían implementar JavaScript.

Para python 3.8.1 y Flask_wtf = 0.14.3 se tiene que importar así:

from wtforms import Form, StringField, SubmitField, PasswordField
from wtforms.validators import DataRequired

y la clase queda así:

class LoginForm(Form):

Saludos, les comparto informacion oficial acerca de este framework:

• Flask WTF

Hola 😃.
Les comparto mi progreso hasta este punto.

Si quieren agregar una clase a su form para sus estilos pueden hacer esto

{{ login_form.username(class_='form-control') }}

wooooooooooooo, en serio esto esta increibleeee

Me sale el error

<No name 'ext' in module 'flask'>

Alguien me puede ayudar?

• Flask WTF(Web The Form), librería de python para renderizar formularios web.[+]

import fask_wft from FlaskForm
import fask_wft.fields from StingField, PasswordField

class LoginForm(FlaskForm)
	username=StringField('Username: ')
	password=PasswordField('Password: ')

{% import 'bootstrap/wtf.html' as wtf %}

<div class="container">
	{% wtf.quick_form(login_form) %}
</div>