Blog Blueprint

You’ll use the same techniques you learned about when writing theauthentication blueprint to write the blog blueprint. The blog shouldlist all posts, allow logged in users to create posts, and allow theauthor of a post to edit or delete it.

As you implement each view, keep the development server running. As yousave your changes, try going to the URL in your browser and testing themout.

The Blueprint

Define the blueprint and register it in the application factory.

flaskr/blog.py

from flask import (
    Blueprint, flash, g, redirect, render_template, request, url_for
)
from werkzeug.exceptions import abort
 
from flaskr.auth import login_required
from flaskr.db import get_db
 
bp = Blueprint('blog', __name__)

Import and register the blueprint from the factory usingapp.register_blueprint(). Place thenew code at the end of the factory function before returning the app.

flaskr/init.py

def create_app():
    app = ...
    # existing code omitted
 
    from . import blog
    app.register_blueprint(blog.bp)
    app.add_url_rule('/', endpoint='index')
 
    return app

Unlike the auth blueprint, the blog blueprint does not have aurl_prefix. So the index view will be at /, the createview at /create, and so on. The blog is the main feature of Flaskr,so it makes sense that the blog index will be the main index.

However, the endpoint for the index view defined below will beblog.index. Some of the authentication views referred to a plainindex endpoint. app.add_url_rule()associates the endpoint name 'index' with the / url so thaturl_for('index') or url_for('blog.index') will both work,generating the same / URL either way.

In another application you might give the blog blueprint aurl_prefix and define a separate index view in the applicationfactory, similar to the hello view. Then the index andblog.index endpoints and URLs would be different.

Index

The index will show all of the posts, most recent first. A JOIN isused so that the author information from the user table isavailable in the result.

flaskr/blog.py

@bp.route('/')def index():    db = get_db()    posts = db.execute(        'SELECT p.id, title, body, created, author_id, username'        ' FROM post p JOIN user u ON p.author_id = u.id'        ' ORDER BY created DESC'    ).fetchall()    return render_template('blog/index.html', posts=posts)

flaskr/templates/blog/index.html

{% extends 'base.html' %}
 
{% block header %}
  <h1>{% block title %}Posts{% endblock %}</h1>
  {% if g.user %}
    <a class="action" href="{{ url_for('blog.create') }}">New</a>
  {% endif %}
{% endblock %}
 
{% block content %}
  {% for post in posts %}
    <article class="post">
      <header>
        <div>
          <h1>{{ post['title'] }}</h1>
          <div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%Y-%m-%d') }}</div>
        </div>
        {% if g.user['id'] == post['author_id'] %}
          <a class="action" href="{{ url_for('blog.update', id=post['id']) }}">Edit</a>
        {% endif %}
      </header>
      <p class="body">{{ post['body'] }}</p>
    </article>
    {% if not loop.last %}
      <hr>
    {% endif %}
  {% endfor %}
{% endblock %}

When a user is logged in, the header block adds a link to thecreate view. When the user is the author of a post, they’ll see an“Edit” link to the update view for that post. loop.last is aspecial variable available inside Jinja for loops. It’s used todisplay a line after each post except the last one, to visually separatethem.

Create

The create view works the same as the auth register view. Eitherthe form is displayed, or the posted data is validated and the post isadded to the database or an error is shown.

The login_required decorator you wrote earlier is used on the blogviews. A user must be logged in to visit these views, otherwise theywill be redirected to the login page.

flaskr/blog.py

@bp.route('/create', methods=('GET', 'POST'))@login_requireddef create():    if request.method == 'POST':        title = request.form['title']        body = request.form['body']        error = None
    if not title:
        error = 'Title is required.'
    if error is not None:
        flash(error)
    else:
        db = get_db()
        db.execute(
            'INSERT INTO post (title, body, author_id)'
            ' VALUES (?, ?, ?)',
            (title, body, g.user['id'])
        )
        db.commit()
        return redirect(url_for('blog.index'))
return render_template('blog/create.html')

flaskr/templates/blog/create.html

{% extends 'base.html' %}
 
{% block header %}
  <h1>{% block title %}New Post{% endblock %}</h1>
{% endblock %}
 
{% block content %}
  <form method="post">
    <label for="title">Title</label>
    <input name="title" id="title" value="{{ request.form['title'] }}" required>
    <label for="body">Body</label>
    <textarea name="body" id="body">{{ request.form['body'] }}</textarea>
    <input type="submit" value="Save">
  </form>
{% endblock %}

Update

Both the update and delete views will need to fetch a postby id and check if the author matches the logged in user. To avoidduplicating code, you can write a function to get the post and callit from each view.

flaskr/blog.py

def get_post(id, check_author=True):
    post = get_db().execute(
        'SELECT p.id, title, body, created, author_id, username'
        ' FROM post p JOIN user u ON p.author_id = u.id'
        ' WHERE p.id = ?',
        (id,)
    ).fetchone()
 
    if post is None:
        abort(404, "Post id {0} doesn't exist.".format(id))
 
    if check_author and post['author_id'] != g.user['id']:
        abort(403)
 
    return post

abort() will raise a special exception that returns an HTTP statuscode. It takes an optional message to show with the error, otherwise adefault message is used. 404 means “Not Found”, and 403 means“Forbidden”. (401 means “Unauthorized”, but you redirect to thelogin page instead of returning that status.)

The check_author argument is defined so that the function can beused to get a post without checking the author. This would be usefulif you wrote a view to show an individual post on a page, where the userdoesn’t matter because they’re not modifying the post.

flaskr/blog.py

@bp.route('/<int:id>/update', methods=('GET', 'POST'))@login_requireddef update(id):    post = get_post(id)
if request.method == &#39;POST&#39;:
    title = request.form[&#39;title&#39;]
    body = request.form[&#39;body&#39;]
    error = None
    if not title:
        error = &#39;Title is required.&#39;
    if error is not None:
        flash(error)
    else:
        db = get_db()
        db.execute(
            &#39;UPDATE post SET title = ?, body = ?&#39;
            &#39; WHERE id = ?&#39;,
            (title, body, id)
        )
        db.commit()
        return redirect(url_for(&#39;blog.index&#39;))
return render_template(&#39;blog/update.html&#39;, post=post)

Unlike the views you’ve written so far, the update function takesan argument, id. That corresponds to the <int:id> in the route.A real URL will look like /1/update. Flask will capture the 1,ensure it’s an int, and pass it as the id argument. If youdon’t specify int: and instead do <id>, it will be a string.To generate a URL to the update page, url_for() needs to be passedthe id so it knows what to fill in:url_for('blog.update', id=post['id']). This is also in theindex.html file above.

The create and update views look very similar. The maindifference is that the update view uses a post object and anUPDATE query instead of an INSERT. With some clever refactoring,you could use one view and template for both actions, but for thetutorial it’s clearer to keep them separate.

flaskr/templates/blog/update.html

{% extends 'base.html' %}
 
{% block header %}
  <h1>{% block title %}Edit "{{ post['title'] }}"{% endblock %}</h1>
{% endblock %}
 
{% block content %}
  <form method="post">
    <label for="title">Title</label>
    <input name="title" id="title"
      value="{{ request.form['title'] or post['title'] }}" required>
    <label for="body">Body</label>
    <textarea name="body" id="body">{{ request.form['body'] or post['body'] }}</textarea>
    <input type="submit" value="Save">
  </form>
  <hr>
  <form action="{{ url_for('blog.delete', id=post['id']) }}" method="post">
    <input class="danger" type="submit" value="Delete" onclick="return confirm('Are you sure?');">
  </form>
{% endblock %}

This template has two forms. The first posts the edited data to thecurrent page (/<id>/update). The other form contains only a buttonand specifies an action attribute that posts to the delete viewinstead. The button uses some JavaScript to show a confirmation dialogbefore submitting.

The pattern {{ request.form['title'] or post['title'] }} is used tochoose what data appears in the form. When the form hasn’t beensubmitted, the original post data appears, but if invalid form datawas posted you want to display that so the user can fix the error, sorequest.form is used instead. request is another variablethat’s automatically available in templates.

Delete

The delete view doesn’t have its own template, the delete button is partof update.html and posts to the /<id>/delete URL. Since thereis no template, it will only handle the POST method and then redirectto the index view.

flaskr/blog.py

@bp.route('/<int:id>/delete', methods=('POST',))@login_requireddef delete(id):    get_post(id)    db = get_db()    db.execute('DELETE FROM post WHERE id = ?', (id,))    db.commit()    return redirect(url_for('blog.index'))

Congratulations, you’ve now finished writing your application! Take sometime to try out everything in the browser. However, there’s still moreto do before the project is complete.

Continue to Make the Project Installable.