Adding Features To A Python-Flask Website

Tabby Mungai,

A python website refers to a website developed using the python code. On the other hand, a flask refers to a web framework that allows the ease of web development. Coding websites can be immensely beneficial to assist programmers develop website platforms. Using code is a welcome alternative to using website builder or website maker. Additionally, by providing addition features for your python flask for web development this can be good coding practice as the python flask simple website can be part of your coding exercises.

In this blog we are going to gain crucial insights into various ways to additional features can be added to the python flask web interface. The additional features will include linking pages and the use of conditional loops. When creating additional features to the website it is important to ensure that the HTML is not part of the code (An attacker can input malicious HTML within the code). Therefore, a more suitable web framework it is important to use templates to ensure that code is concerned with data values and not rendering.

  • Template : Refers to a HTML file containing placeholders for values that the code give at runtime.
  • Default Templating: The for flask is jinja that installed automatically when flask is installed. Jinja (engine) provide flexible options that such automatic escaping (XSS attacks) and template inheritance.
  • Inheritance: Allows one to define a base page having common markup then build on that base with page-specific additions.

Template Inheritance

Template inheritance allows an individual when coding to avoid code repetition. By using using template inheritance the one who creates a website create a base template that contains content that has the capacity to be shared with other templates. Also, the the index template can be edited to inherit from the base template. A new page that serves as the About page to provide addition information regarding the application.

Here we will create single using a be configured to serve statistic files. Additionally, multiples page can be created to the app that each contains a nav bar from a base templates.

1. Inside the flask folder create a new folder name it templates

2. Inside the templates folder create a file app.py using the VSCode terminal. In app.py the function render_template for loading the template and application of the named values. 

from flask import Flask, render_template

app = Flask(__name__)


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

For loading the template and application of the named values.The template comprised two place holders “name” and “date” shown as delineated pairs of curly braces {{and}} the formatting code ought to be included directly into the file.

Base Template: The template comprises of HTML component that are shared between all other templates including application title, navigation bars and footnotes.

{%extends%} is a tag used to inherit from base.html

The tag is extended by replacing the content in the base template with what is inside the content block in the preceding code block. Template inheritance is immensely use at it allows one to reused the the HTML code in other template such as base.html without the need to repeat the each time they are required. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

To Create the About Page

To create the About page by adding the the code below in app.py file 

#...
@app.route('/about/')
def about():
    return render_template('about.html')

app.route() decorator creates a view function about(). In the decorator a result is returned of calling render_template() function with about.html template file name as an argument.

The about.html file has the following code

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return '<h1>Hello, World!</h1>'

@app.route('/about/')
def about():
    return '<h3>Geviton:"Bring Your Ideas To life".</h3>
  • Here code inherits from the base template using the extends tag
  • The content block in the base template is replaced <h1>tag that also serves as the page title
  • <h3>tag is added regarding information about the application

With the development server running visit the following URL using your browser

http://127.0.0.1:5000/about, it is evident the way the navigation bar and part of the title are inherited from the based template

Rendering a Template and Using Variable

Using templates in a Flask Application

  • Create index.html file
  • Tell flask about app.py using FLASK_APP environment (using set command for window)
  • Set FLASK_ENV environment variable to development to run application in development mode and get access to the debugger

Import datetime module from the python standard library and edit the index() function into the app.py

#..
@app.route('/')
def hello():
    return render_template('index.html', utc_dt=datetime.datetime.utcnow())

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

In the html file edit and add <h3>{{utc_dt}}</h3>, this particular edit adds H3 heading with special {{…}} delimiter to print the value of of the utc_dt variable. 

#...
<h3>{{ utc_dt }}</h3>
#...

The content block contains<h1>tag with text index inside a title block in the base.html template with the index making the complete tile Index_FlaskApp

This is done to avoid repeating the same text twice because it acts both as title and heading below the navigation bar inherited from the base.

Then you have few more headings:

one <h1>with text helloworld!

<h2> and <h3>with the value utc_dt variable

Linking Between Pages

For this step you will learn how to link pages in your templates using url_for() helper function. Two links are added to the navigation bar in the base template.

i) Index page

ii) About page

#...
<body>
    <nav>
        <a href="{{ url_for('hello') }}"> Geviton FlaskApp</a>
        <a href="{{ url_for('comments') }}">Comments</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

From the code: The first url links to the route of hello() and the second url links the route of the about() function within the index page url_for() function builds URLs helps manage URLs

When the URLs are hard-coded editing the routes breaks link. However, by using url_for() one can edit routes and guarantee the link work in an appropriate manner. Additionally, url_for() function take care of other things like escaping special characters.

This section enabled you on how to use url_for() function to link to other routes in your templates.

Using Conditional and Loops

  • if statements found in the templates control what to display depending on certain conditions
  • for loops to go through python lists and display each item in the list create a new page displays comments in a list. (Comments with an odd index number will be displayed with a green background)
@app.route('/comments/') 
def comments(): 
    comments = ['This is the first comment.', 
                'This is the second comment.', 
                'This is the third comment.', 
                'This is the fourth comment.' 
                ] 
 
    return render_template('comments.html', comments=comments)

The route above illustrates a python list called comments comprising of four item. (Comments are designed to be obtained from online users)

You return a template file referred to as comments, html in the last line to is passing a variable called comments containing the list template file.

{%block content%}{%block content%}{%end block%}

The block can be replaced by content depending on the child template (a template that inherits from base.html) that overrides it. Now that a based template has been created now it’s time to take advantage of inheritance.

The file comment.html contains the code provided

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Comments {% endblock %}</h1>
    <div style="width: 50%; margin: auto">
        {% for comment in comments %}
            {% if loop.index % 2 == 0 %}
                {% set bg_color = '#F97316' %}
            {% else %}
                {% set bg_color = '#0B8070' %}
            {% endif %}

            <div style="padding: 10px;
                 background-color: {{ loop.cycle('#0B8070', '#F97316') }}; 
                 margin: 20px">
                <p>#{{ loop.index }}</p>
                <p style="font-size: 24px">{{ comment }}</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}

The comments page
Programming

Related Posts