Eduzan

Eduzan / Flask

Developing the Backend with Flask

Developing the backend for your Flask application involves implementing models, views, and templates, as well as adding user authentication and authorization. In this guide, we’ll walk through these steps and demonstrate how to implement key features, such as posting articles or managing tasks.

In Flask, models represent your data structure, views handle the application logic, and templates are used to render HTML content for the front end.

Implementing Models

Models in Flask are typically implemented using SQLAlchemy, an ORM (Object-Relational Mapper) that allows you to interact with your database using Python classes.

Example: Blog Models

For a blog application, you might define models for User, Post, and Comment:

from datetime import datetime
from app import db

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    email = db.Column(db.String(150), unique=True, nullable=False)
    password = db.Column(db.String(60), nullable=False)
    posts = db.relationship('Post', backref='author', lazy=True)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)
    date_posted = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    comments = db.relationship('Comment', backref='post', lazy=True)

class Comment(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.Text, nullable=False)
    date_posted = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
    post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)

Implementing Views

Views in Flask are functions that handle HTTP requests and return responses. These views typically interact with your models to retrieve or manipulate data, and then render templates to display the results.

Example: Blog Views

For a blog, you might implement views for displaying a list of posts, viewing a single post, and creating a new post:

from flask import render_template, url_for, flash, redirect, request
from app import app, db
from app.models import Post, User
from app.forms import PostForm
from flask_login import current_user, login_required

@app.route('/')
@app.route('/home')
def home():
    posts = Post.query.order_by(Post.date_posted.desc()).all()
    return render_template('home.html', posts=posts)

@app.route('/post/<int:post_id>')
def post(post_id):
    post = Post.query.get_or_404(post_id)
    return render_template('post.html', title=post.title, post=post)

@app.route('/post/new', methods=['GET', 'POST'])
@login_required
def new_post():
    form = PostForm()
    if form.validate_on_submit():
        post = Post(title=form.title.data, content=form.content.data, author=current_user)
        db.session.add(post)
        db.session.commit()
        flash('Your post has been created!', 'success')
        return redirect(url_for('home'))
    return render_template('create_post.html', title='New Post', form=form)

Implementing Templates

Templates are HTML files that use Jinja2 syntax to dynamically generate content based on the data passed to them from views.

Example: Blog Templates

Create a basic template structure with base.html as the base template, and home.html and post.html as content pages.

base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Blog{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('new_post') }}">New Post</a>
        <a href="{{ url_for('logout') }}">Logout</a>
        {% else %}
        <a href="{{ url_for('login') }}">Login</a>
        {% endif %}
    </nav>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

home.html:

{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
    <h1>Recent Posts</h1>
    {% for post in posts %}
        <div class="post">
            <h2><a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a></h2>
            <p>{{ post.content[:200] }}...</p>
            <p><a href="{{ url_for('post', post_id=post.id) }}">Read more</a></p>
        </div>
    {% endfor %}
{% endblock %}

post.html:

{% extends "base.html" %}
{% block title %}{{ post.title }}{% endblock %}
{% block content %}
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <p>Posted by {{ post.author.username }} on {{ post.date_posted.strftime('%Y-%m-%d') }}</p>
{% endblock %}

User authentication (logging in and out) and authorization (restricting access based on user roles) are critical features for most applications.

Setting Up Flask-Login

Flask-Login provides user session management, making it easy to log in and out users and restrict access to certain parts of the application.

Step 1: Install Flask-Login

pip install Flask-Login

Step 2: Configure Flask-Login

In your app/__init__.py, configure Flask-Login:

from flask_login import LoginManager
from app.models import User

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'login'  # Redirect to login page if user is not authenticated

@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))

Implementing User Authentication

Step 1: Create Forms for Login and Registration

Use Flask-WTF to create forms for user login and registration.

forms.py:

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

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

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')

Step 2: Implement Registration and Login Views

routes.py:

from flask import render_template, flash, redirect, url_for, request
from app import app, db
from app.forms import RegistrationForm, LoginForm
from app.models import User
from flask_login import login_user, logout_user, current_user

@app.route('/register', methods=['GET', 'POST'])
def register():
    if current_user.is_authenticated:
        return redirect(url_for('home'))
    form = RegistrationForm()
    if form.validate_on_submit():
        user = User(username=form.username.data, email=form.email.data)
        user.set_password(form.password.data)
        db.session.add(user)
        db.session.commit()
        flash('Account created successfully!', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', title='Register', form=form)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('home'))
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user and user.check_password(form.password.data):
            login_user(user)
            flash('Logged in successfully!', 'success')
            return redirect(url_for('home'))
        else:
            flash('Login failed. Check your email and password.', 'danger')
    return render_template('login.html', title='Login', form=form)

@app.route('/logout')
def logout():
    logout_user()
    flash('You have been logged out.', 'info')
    return redirect(url_for('home'))

Implementing User Authorization

To restrict access to certain routes, you can use the @login_required decorator provided by Flask-Login:

from flask_login import login_required

@app.route('/dashboard')
@login_required
def dashboard():
    return render_template('dashboard.html')

This ensures that only logged-in users can access the dashboard.

Depending on your project, you’ll need to implement specific features. Let’s look at two examples: posting articles (for a blog) and managing tasks (for a task manager).

Example: Posting Articles in a Blog

We’ve already covered how to create and display posts in the sections above. Here’s a recap:

Create a Post model to represent blog posts.
Implement views to display posts (home), view individual posts (post), and create new posts (new_post).
Use forms (e.g., PostForm) to handle user input for creating new posts.

Example: Managing Tasks in a Task Manager

Step 1: Implement Task Models

class Task(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
description = db.Column(db.Text, nullable=True)
due_date = db.Column(db.DateTime, nullable=False)
completed = db.Column(db.Boolean, default=False)
user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)

Step 2: Implement Views for Managing Tasks

routes.py:

from app.models import Task
from app.forms import TaskForm

@app.route('/tasks')
@login_required
def tasks():
    tasks = Task.query.filter_by(user_id=current_user.id).order_by(Task.due_date.asc()).all()
    return render_template('tasks.html', tasks=tasks)

@app.route('/task/new', methods=['GET', 'POST'])
@login_required
def new_task():
    form = TaskForm()
    if form.validate_on_submit():
        task = Task(title=form.title.data, description=form.description.data, due_date=form.due_date.data, user_id=current_user.id)
        db.session.add(task)
        db.session.commit()
        flash('Task created successfully!', 'success')
        return redirect(url_for('tasks'))
    return render_template('create_task.html', title='New Task', form=form)

Step 3: Create Templates for Displaying and Managing Tasks

tasks.html:

{% extends "base.html" %}
{% block title %}Tasks{% endblock %}
{% block content %}
    <h1>Your Tasks</h1>
    <a href="{{ url_for('new_task') }}">Create New Task</a>
    <ul>
        {% for task in tasks %}
        <li>
            {{ task.title }} - Due: {{ task.due_date.strftime('%Y-%m-%d') }} - {% if task.completed %}Completed{% else %}Not Completed{% endif %}
        </li>
        {% endfor %}
    </ul>
{% endblock %}

create_task.html:

{% extends "base.html" %}
{% block title %}New Task{% endblock %}
{% block content %}
    <h1>Create New Task</h1>
    <form method="POST" action="{{ url_for('new_task') }}">
        {{ form.hidden_tag() }}
        <p>{{ form.title.label }}<br>{{ form.title(size=32) }}</p>
        <p>{{ form.description.label }}<br>{{ form.description(cols=40, rows=5) }}</p>
        <p>{{ form.due_date.label }}<br>{{ form.due_date() }}</p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

forms.py:

from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, DateTimeField, SubmitField
from wtforms.validators import DataRequired

class TaskForm(FlaskForm):
    title = StringField('Title', validators=[DataRequired()])
    description = TextAreaField('Description')
    due_date = DateTimeField('Due Date', format='%Y-%m-%d %H:%M:%S', validators=[DataRequired()])
    submit = SubmitField('Create Task')

End of lesson.

Back to Flask

Developing the Backend with Flask

Overview

Implementing Models, Views, and Templates