Skip to content

User Registration

Manish Sah edited this page Sep 21, 2020 · 10 revisions

User Registration

Create a class User which inherits from Sqlalchemy's Model. We will define all the models(Tables) needed for our project in models.py file in blog package

from blog 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)
    image_file = db.Column(db.String(20), nullable=False, default='default.jpg')
    password = db.Column(db.String(60), nullable=False)

inheriting Model allows sqlalchemy to interact with a table against the class User.

Now, we need to create a table in the database that resembles our class User

open python console by entering python in the terminal and enter the following commands:

  • from blog import db
  • from blog.models import User
  • db.create_all()

db.create_all() will create a table named "user(the name will be in lowercase)" in our database.

Note: for db.create_all() to work, you need to import all the class for which you want to create a table

Creating User forms

Now that we have user model, we need to create a form so that user can sign up. Instead of creating form manually, we will use WTForms to make our task easier

WTforms:

  • WTForms is a flexible forms validation and rendering library for Python web development.
  • It can work with whatever web framework and template engine you choose.
  • It supports data validation, CSRF protection, internationalization (I18N)

Install wtform using pip

pip install wtforms

Now that we have installed wtform, we will create forms.py in our blog package to add all the forms needed for our project

blog/forms.py

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length, Email, ValidationError
from blog.models import User


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

We have our user model and registration form but we don't have any route established for registering users. we will create a new route so that users can registers to our application

we will update our routes.py to include a route for register

blog/routes.py

from blog.forms import RegistrationForm
.
.
.

@app.route("/registration")
def register():
    form = RegistrationForm()
    return render_template('register.html', form=form)

we can see that we are returning register.html file, but we donot have register.html file as of now. Lets create register.html file

{% extends 'layout.html' %}
{% block content %}
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend>Join Today</legend>
            <div class="form-group">
                {{ form.username.label(class="form-control-label") }}
                {{ form.username(class="form-control form-control-lg") }}
            </div>

            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {{ form.email(class="form-control form-control-lg") }}
            </div>

            <div class="form-group">
                {{ form.password.label(class="form-control-label") }}
                {{ form.password(class="form-control form-control-lg") }}
            </div>

            <div class="form-group">
                {{ form.confirm_password.label(class="form-control-label") }}
                {{ form.confirm_password(class="form-control form-control-lg") }}
            </div>

        </fieldset>
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>
    </form>
</div>

{% endblock content %}
Clone this wiki locally