D70 and D71 #100DaysOfCode

D70 and D71 #100DaysOfCode. I am learning how Flask can easily call HTML code. I also made a login page! Checkout my blog post about it, and a demo.

Read Time2 Minutes, 58 Seconds

So in my last post, I created a Hello World page in Flask. It has now been two days later and I have learned a lot!

Yesterday I learned how to link to HTML pages which is awesome, and it’s actually pretty easy to understand. In a nutshell, I can use app routes to call a function which will be pointing to an HTML page, see below.

@app.route('/')
@app.route('/index')
def index():
    user = {'username': 'Nick'}
    posts = [
        {
            'author': {'username': 'John'},
            'body': 'Beautiful day in Portland!'
        },
        {
            'author': {'username': 'Susan'},
            'body': 'The Avengers movie was so cool!'
        }
    ]
    return render_template('index.html', title='Home', user=user, posts=posts)

So the above is defining a few variables but as you can see the return is an HTML page that has the following.

{% extends "base.html" %}

{% block content %}
    <h1>Hi, {{ user.username }}!</h1>
    {% for post in posts %}
    <div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
    {% endfor %}
{% endblock %}

So it’s actually using Jinja2 as well which is pretty new to me, but the end result looks like this.

You can also see at the top there is a line calling base.html, this is code that has my title and menu, so it’s easy to call on all my pages.

<html>
    <head>
        {% if title %}
        <title>{{ title }} - Microblog</title>
        {% else %}
        <title>Welcome to Microblog!</title>
        {% endif %}
    </head>
    <body>
        <div>
            Microblog:
            <a href="{{ url_for('index') }}">Home</a>
            <a href="{{ url_for('login') }}">Login</a>
        </div>
        <hr>
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endwith %}
        {% block content %} {% endblock %}
    </body>
</html>

Here you can see that I am using a url_for, which is an awesome way to call my function, so even if the page name changes I don’t have to go and find all the references, as my function name doesn’t need to change.

This brings us to today.

Today I made a login page, which uses a flask extension called flask_wtf which handles forms.

The route looks like this.

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        flash('Login requested for user {}, remember_me={}'.format(
            form.username.data, form.remember_me.data))
        return redirect(url_for('index'))
    return render_template('login.html', title='Sign In', form=form)
        

So by default, the form only allows a GET method, so when I submit my login it will fail, hence why I need to explicitly state the GET and POST methods.

The flask module also handles error messages as well, so if someone forgets to fill in the required info I can display that error message.

{% extends "base.html" %}

{% block content %}
    <h1>Sign In</h1>
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}<br>
            {% for error in form.username.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}<br>
            {% for error in form.password.errors %}
            <span style="color: red;">[{{ error }}]</span>
            {% endfor %}
        </p>
        <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

Thie guide I’m following really is fantastic, check it out here.

Also here it the current site demo.

1 0
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleppy
Sleppy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Leave a Reply

Your email address will not be published. Required fields are marked *

Close