Implementación de Flask-Bootstrap y Flask-WTF

Curso de Flask

Fundamentos de Flask

Qué aprenderás sobre Flask

¿Cómo funcionan las aplicaciones en internet?

¿Qué es Flask?

Instalación de Python, pip y virtualenv

Hello World Flask

Debugging en Flask

Request y Response

Ciclos de Request y Response

Uso de templates y archivos estáticos

Templates con Jinja 2

Estructuras de control

Herencia de templates

Include y links

Uso de archivos estáticos: imágenes

Configurar páginas de error

Extensiones de Flask

Flask Bootstrap

Configuración de Flask

Implementación de Flask-Bootstrap y Flask-WTF

Uso de método POST en Flask-WTF

Desplegar Flashes (mensajes emergentes)

Pruebas básicas con Flask-testing

Proyecto

Planteamiento del proyecto: To Do List

App Factory

Uso de Blueprints

Blueprints II

Base de datos y App Engine con Flask

Configuración de Google Cloud SDK

Configuración de proyecto en Google Cloud Platform

Implementación de Firestore

Autenticación de usuarios: Login

Autenticación de usuarios: Logout

Signup

Agregar tareas

Eliminar tareas

Editar tareas

Deploy a producción con App Engine

Conclusiones

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to implement forms in Flask?

Implementing forms in Flask is essential for developing interactive and dynamic web applications. Forms allow you to collect information from users, such as in a login process or registering a new account. In this guide, we will explore how to use Flask WTForms to create, display and validate forms in Flask.

What is Flask WTForms?

Flask WTForms is an extension that integrates WTForms, a Python library for rendering and validating web forms, with Flask. It provides a simple and structured way to handle forms, allowing developers to focus on the application logic without worrying about the details of form validation and data handling.

How to install Flask WTForms?

Let's start by installing the Flask WTForms extension. We must add it to the requirements.txt file of our application. The installation is done by executing the following command in the terminal:

pip install -r requirements.txt

How to create a login form?

To create our first form in Flask, we will define a class that extends FlaskForm. In this case, we will develop alogin form with fields for username and password.

Import FlaskForm and required fields:

from flask_wtf import FlaskFormfrom wtforms import StringField, PasswordFieldfrom wtforms.validators import DataRequired.

Define the form class:

class LoginForm(FlaskForm): username = StringField('Username',  validators=[DataRequired()]) password = PasswordField('Password',  validators=[DataRequired()])

The username and password fields are validated to ensure that the user enters the required information.

How to add a submit button to the form?

To complete the form, we will add a submit field:

from wtforms import SubmitField
class LoginForm(FlaskForm): username = StringField('Username',  validators=[DataRequired()]) password = PasswordField('Password',  validators=[DataRequired()]) submit = SubmitField('Submit').

How to render the form in the HTML template?

To render our form in an HTML template, we import it into the view context and use it in the hello.html file. We can do it in the following way:

Create an instance of the form and pass it to the context:

@app.route('/hello',  methods=['GET', 'POST'])def hello(): form = LoginForm() return render_template('hello.html',  form=form)

Render the form in HTML:

We will use the bootstrap_wtf tools for a simpler rendering of our form:
```
{% from 'bootstrap/wtf.html' import wtf_quick_form as wtf %}{{ wtf(form) }}
```

This wtf_quick_form function allows an easy and complete rendering of the form with the help of Bootstrap.

How to validate and handle the form submission?

Finally, we need to validate and handle the response of the form when it is submitted to the server. This involves setting the view to process the form:

@app.route('/hello',  methods=['GET', 'POST'])def hello(): form = LoginForm() if form.validate_on_submit(): # Process form data username = form.username.data password = form.password.data # Add authentication logic return render_template('hello.html',  form=form)

What have we learned so far?

We have learned how to install Flask WTForms, create a login form, add basic validations and render the form using HTML templates in Flask. Now we are ready to move on to managing forms in our web applications - keep exploring and improving your Flask skills!

Contributions 47

Questions 7

Sort by:

Want to see more contributions, questions and answers from the community?

R0Y3R

5 years ago

Hecho un camino duro pero que valdrá la pena

Rabi Leonel Leon Chan

5 years ago

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

Renato Mercado Luna