The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

User Registration

Next ►
►

In this section, we will cover how to implement user registration in a Flask application. User registration is a fundamental feature for any web application that requires user accounts. We will use Flask-WTF for form handling and WTForms for form validation.

Key Concepts

  1. User Registration Form: Creating a form for users to input their registration details.
  2. Form Validation: Ensuring the data entered by the user is valid.
  3. Storing User Data: Saving the user data in a database.
  4. Flask-WTF: A Flask extension that simplifies form handling and validation.

Step-by-Step Guide

  1. Setting Up the User Registration Form

First, we need to create a form for user registration. We'll use Flask-WTF and WTForms to create and validate the form.

Install Flask-WTF:

pip install Flask-WTF

Create the Registration Form:

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, EqualTo, 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()])
    confirm_password = PasswordField('Confirm Password', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Sign Up')

  1. Creating the Registration Route

Next, we need to create a route in our Flask application to handle the registration form.

Create the Registration Route:

# routes.py
from flask import render_template, url_for, flash, redirect
from app import app, db
from app.forms import RegistrationForm
from app.models import User

@app.route("/register", methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data, password=form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('Your account has been created! You are now able to log in', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)

  1. Creating the User Model

We need a User model to store user data in the database. We'll use Flask-SQLAlchemy for database operations.

Create the User Model:

# models.py
from app import db

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)

    def __repr__(self):
        return f"User('{self.username}', '{self.email}')"

  1. Creating the Registration Template

Finally, we need to create an HTML template for the registration form.

Create the Registration Template:

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

Practical Exercise

Exercise: Implement User Registration

  1. Objective: Implement a user registration feature in your Flask application.
  2. Steps:
    • Create a RegistrationForm class in forms.py.
    • Create a /register route in routes.py.
    • Create a User model in models.py.
    • Create a register.html template in the templates directory.
  3. Expected Outcome: Users should be able to register by filling out the form, and their data should be stored in the database.

Solution

Follow the steps outlined in the guide above to implement the user registration feature.

Common Mistakes and Tips

  • Form Validation: Ensure that the form validation is correctly set up to prevent invalid data from being submitted.
  • Database Commit: Don't forget to commit the session after adding a new user to the database.
  • Password Security: In a real application, never store passwords in plain text. Use a library like werkzeug.security to hash passwords before storing them.

Conclusion

In this section, we learned how to implement user registration in a Flask application. We covered creating a registration form, handling form validation, storing user data in a database, and creating the necessary routes and templates. This foundational knowledge will be crucial as we move on to more advanced topics like user authentication and session management.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved