5: Tour Flaskinni
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
I can describe the MVT components of Flaskinni.
I can describe the thread's steps as my app starts up.
Remember, you can help add comments and docstrings to Flaskinni and submit pull requests. Even beginners can help contribute to open source projects in surprisingly substantial ways.
We've got a handy little method that instantiates our app, loads the settings, and straps on all its expansion packs. Let's start our tour of the code where Flask is spawned. From "Demystifying Flask’s Application Factory":
The reason why the Application Factory is so important has to do with something called Flask's Application Context. Our app's "context" is what takes the assortment of Python files and modules which make up our app and brings them together so that they see and work with one another.
When your app is serving hundreds or thousands of people at a time, your server will run many instances of your app. You may also run your app in different modes, like a text-only shell. An application factory addresses this need by spitting out instances of app
Flaskinni comes with a main and an api blueprint. That'll affect your use of url_for. So if you wanted to make a link to the homepage, it'd be <a href="{{ url_for('main.index') }}">home</a>
Now that Flaskinni is running in your environment, local or cloud-based, let's take a tour.
The T part of our MVT all starts with base.html. See how much of the documentation you can read before your brain wimps out
The purpose of the base template is to give all the pages in your app common assets. This such as fonts, CSS files, nav bar. Every page must link to the base file. It is kept in the /templates folder, as base.html. The base template is like a picture frame, loading common elements like the nav bar, footer, and your little favicon.
This is the whole parent-child thing. The parent is the skeleton of your page. We named it base.html and it has <link>s to our Google Fonts, CSS files, and sets up nav bars and any other element that’s site-wide. It’s great! Pretty much sets up the whole theme of our site.
To put our pages inside this metaphorical picture frame, we use the command, {% extends "base.html" %} at the top of every other HTML we put in our templates folder.
The base template extends across all pages, so the website can share HTML code.
We’re going to make a new template that inherits from our base.html so you can experiment with this handy tool. Create a new file in your templates folder called about.html. This page will need hardly any information at all because all the setup is done in the parent. All we need to do is pass some HTML into any block.
{% extends "base.html" %}
{% block content %}
{# this is a comment #}
<div class="row justify-content-md-center">
<div class="col-md-6">
<h1>Hi</h1>
</div>
</div>
{% endblock %}Sass makes CSS easier, even if you have to spend a few minutes here and there refreshing yourself on how to use the Sass tricks and how to compile your Sass down to CSS. I personally use a VSCode extension to manage this automatically.
Don't want to learn? There is a lazy way out and that's to edit your CSS directly. No judgments.
Pick out a header and a body font at fonts.google.com
Add them to your collection and get the <link> we’ll use to embed a connection to Google Fonts.
Replace the other <link> to fonts.google.com that was in your base.html file
Add your CSS code to custom.css, something like:
body {
font-family: 'Roboto Mono', monospace;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Rammetto One', cursive;
}Launch your server
(make sure you’ve got venv activated) source venv/bin/activate or on Windows: source venv/Scripts/Activate
(use our flask-script to run the server) flask run
Check out your font changes!
If you want to see the new template file in action, we’ve got to build a route to that page. As of this writing, there are only two locations for routes in Flaskinni, the master __init__.py file and the views.py file inside the blog module folder. Since our homepage route is in the first file, we’ll put our about route there, too.
# Created a new route used for rendering the about page template
# Custom app routes for the end of the website url
@app.route('/about')
@app.route('/about/')
@app.route('/about.html')
# Define app route
def about():
"""Render the template"""
return render_template('about.html')We later passed a variable to the template. We dropped <h1> {{ some_variable }} </h1> in our about.html file. Nothing shows up until we change the render_template call to something like this:
def about():
"""Render the template"""
return render_template('about.html', some_variable="Hello!")Congratulations! You just passed your first variable to a template.
We have cool, color-changing notifications in Flaskinni that rely on Bootstrap classes. So if you want to send a good alert message that something worked, you'd say:
flash("Your message has been sent!", "success")
But if something failed, you'd write:
flash("Your message was destroyed by mistake. Whoops!", "danger")
What other Flash notifications are there? How are the flash notifications being built? Let's look at where they come up in the base.html file, trace back the macro that builds the flash messages and then see what other options come with Flaskinni.
Cookies!
Let's talk about how this blog post is queried from our database:
@app.route('/article/<slug>')
def read(slug):
post = Post.query.filter_by(slug=slug).first_or_404()
return render_template('main/article.html', post=post)Check out line #20.
class User(db.Model, UserMixin):
# Our User has six fields: ID, email, password, active, confirmed_at and roles. The roles field represents a
# many-to-many relationship using the roles_users table. Each user may have no role, one role, or multiple roles.
id = db.Column(db.Integer, primary_key=True)
first_name = db.Column(db.String(155))
last_name = db.Column(db.String(155))
phone = db.Column(db.String(20)) # let's guess it should be no more than 20
address = db.Column(db.Text)
about = db.Column(db.Text)
image = db.Column(db.String(125))
email = db.Column(db.String(255), unique=True)
password = db.Column(db.String(255))
# TOGGLES
active = db.Column(db.Boolean(), default=True)
public_profile = db.Column(db.Boolean(), default=True)
# DATES
confirmed_at = db.Column(db.DateTime())
last_seen = db.Column(db.DateTime(), default=None)
posts = db.relationship('Post', backref='user', lazy='dynamic')