El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Creació i Gestió de Formularis

Següent ►
►

En aquest tema, aprendrem com crear i gestionar formularis en una aplicació Flask. Els formularis són una part essencial de moltes aplicacions web, ja que permeten als usuaris enviar dades al servidor. Utilitzarem la biblioteca WTForms per facilitar la creació i validació de formularis.

Objectius

  • Entendre com crear formularis amb WTForms.
  • Aprendre a gestionar l'entrada d'usuari.
  • Validar formularis per assegurar la integritat de les dades.

Contingut

  1. Introducció a WTForms
  2. Creació d'un Formulari Bàsic
  3. Renderització de Formularis en Plantilles
  4. Gestió de l'Entrada d'Usuari
  5. Validació de Formularis
  6. Exercicis Pràctics

Introducció a WTForms

WTForms és una biblioteca de Python que facilita la creació i validació de formularis web. Proporciona una manera senzilla de definir formularis i gestionar la seva validació.

Instal·lació de WTForms

Per començar a utilitzar WTForms, primer hem d'instal·lar la biblioteca. Pots fer-ho utilitzant pip:

pip install flask-wtf

Creació d'un Formulari Bàsic

Comencem creant un formulari bàsic amb WTForms. Suposem que volem crear un formulari de registre d'usuari amb els camps següents: nom d'usuari, correu electrònic i contrasenya.

Definició del Formulari

Creem un fitxer forms.py i definim el nostre formulari:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Sign Up')

Explicació del Codi

  • FlaskForm: Classe base per a tots els formularis de WTForms.
  • StringField, PasswordField, SubmitField: Tipus de camps de formulari.
  • validators: Llista de validadors aplicats als camps. DataRequired assegura que el camp no estigui buit, Email valida que el camp conté una adreça de correu electrònic vàlida, i Length assegura que la longitud del camp estigui dins dels límits especificats.

Renderització de Formularis en Plantilles

Per renderitzar el formulari en una plantilla HTML, primer hem de crear una ruta en la nostra aplicació Flask que renderitzi la plantilla.

Ruta de la Vista

Afegim la següent ruta a app.py:

from flask import Flask, render_template, url_for, flash, redirect
from forms import RegistrationForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

@app.route("/register", methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        flash(f'Account created for {form.username.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('register.html', title='Register', form=form)

if __name__ == '__main__':
    app.run(debug=True)

Explicació del Codi

  • SECRET_KEY: Clau secreta necessària per a la protecció contra atacs CSRF.
  • validate_on_submit(): Mètode que valida el formulari quan es fa una sol·licitud POST.
  • flash(): Funció que mostra missatges flash a l'usuari.

Plantilla HTML

Creem una plantilla register.html per renderitzar el formulari:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Register</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Explicació del Codi

  • form.hidden_tag(): Afegeix un camp ocult per a la protecció CSRF.
  • form.<field>.label: Renderitza l'etiqueta del camp.
  • form.<field>: Renderitza el camp del formulari.
  • form.<field>.errors: Llista d'errors de validació per al camp.

Gestió de l'Entrada d'Usuari

Quan l'usuari envia el formulari, les dades es poden accedir a través dels atributs del formulari. Per exemple, form.username.data retorna el valor del camp username.

Validació de Formularis

WTForms proporciona diversos validadors que es poden utilitzar per assegurar que les dades del formulari compleixin certs criteris. Alguns dels validadors més comuns són:

  • DataRequired: Assegura que el camp no estigui buit.
  • Email: Valida que el camp conté una adreça de correu electrònic vàlida.
  • Length: Valida la longitud del camp.

Exercicis Pràctics

Exercici 1: Crear un Formulari de Login

Crea un formulari de login amb els camps següents: correu electrònic i contrasenya. Afegeix validació per assegurar que els camps no estiguin buits i que el correu electrònic sigui vàlid.

Solució

  1. Definició del Formulari:
class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')
  1. Ruta de la Vista:
@app.route("/login", methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash(f'Logged in as {form.email.data}!', 'success')
        return redirect(url_for('home'))
    return render_template('login.html', title='Login', form=form)
  1. Plantilla HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>Login</h1>
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <p>
            {{ form.email.label }}<br>
            {{ form.email(size=32) }}<br>
            {% for error in form.email.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
                <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

Exercici 2: Afegir Validació Personalitzada

Afegeix una validació personalitzada al formulari de registre per assegurar que el nom d'usuari no contingui espais.

Solució

  1. Definició del Formulari amb Validació Personalitzada:
class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=2, max=20)])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('Sign Up')

    def validate_username(self, username):
        if ' ' in username.data:
            raise ValidationError('Username should not contain spaces.')

Conclusió

En aquesta secció, hem après com crear i gestionar formularis en una aplicació Flask utilitzant WTForms. Hem vist com definir formularis, renderitzar-los en plantilles HTML, gestionar l'entrada d'usuari i validar les dades del formulari. Els exercicis pràctics proporcionats ajuden a reforçar els conceptes apresos i a aplicar-los en situacions reals.

◄ Anterior
◄
Següent ►
►

Curs de Desenvolupament Web amb Flask

Mòdul 1: Introducció a Flask

Mòdul 2: Conceptes Bàsics de Flask

Mòdul 3: Formularis i Entrada d'Usuari

Mòdul 4: Integració de Bases de Dades

Mòdul 5: Autenticació d'Usuaris

Mòdul 6: Conceptes Avançats de Flask

Mòdul 7: APIs RESTful amb Flask

Mòdul 8: Desplegament i Producció

Mòdul 9: Proves i Millors Pràctiques

Mòdul 10: Extensions i Ecosistema de Flask

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats