Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Sample app for Flask templates - ITP DWD week 4 http://itppyweb.heroku.com
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
static
templates
.gitignore
Procfile
README.md
app.py
requirements.txt
runpip
start

README.md

Getting Started with Flask and Templates

Sample code

Download from Github. See demo http://rentspiritanimals.herokuapp.com/.

Quick Start

  • Download code.
  • Open code directory in Terminal console.
  • Create Virtualenv (only needs to be run once).

    virtualenv venv
    
  • Initial PIP requirements install / Or when you need to update Python modules after modifying requirements.txt

    . runpip
    

    The runpip file is a helper file and has the following commands

    . venv/bin/activate
    pip install -r requirements.txt
    
  • Start the Server & Activate the Virtualenv if not already active.

    . start
    

    The start file has the following commands

    . venv/bin/activate
    foreman start
    
  • If successful you can navigate to http://localhost:5000.

Templates

Templates keep your code separated from your code and vice versa. Using templates allows you to focus on the code, logic and data then pass the needed data to an HTML template.

People often call this MVC, of Model-View-Controller, where data structures (M), templates (V) and code (C) are separated into different files and directories.

Our templates are located in the /templates directory. These can be organized in directories if needed. The templates are regular HTML files

Using a template library, we can inject data into HTML with the template library specific syntax.

Flask comes ready with Jinja2 for templates. Jinja2 is easy to use and learn, simple syntax. To use templates we'll include this line at the top of app.py,

from flask import render_template

Template example

A basic HTML template with a single variable.

index.html

<html>
    <title>My first template</title>
    <body>
        <h1>{{ message }}</h1>
    </body>
</html>

A Flask route, passing a variable into a template

@app.route('/')
def mainpage():
    message = 'Hello World'
    return render_template('index.html', message=message)

Template multiple variables example

index.html

<html>
    <title>My first template</title>
    <body>
        <h1>{{ message }}</h1>
        <p>{{ a_sentence }}</p>
    </body>
</html>

The Flask route

@app.route('/')
def mainpage():

    templateData = {
        'message' : 'Hello World',
        'a_sentence' : 'A year passed: winter changed into spring, spring changed into summer, summer changed back into winter, and winter gave spring and summer a miss and went straight on into autumn... until one day..'
    }

    return render_template('index.html', **templateData)

The ** operator in Python will convert a dictionary into a keyword list. The ** operator does the equilivent of this,

return render_template('index.html', message = 'Hello World', a_sentence = 'A year passed....')

Jinja2 basic

You can see all of Jinja2's reference guide here, http://jinja.pocoo.org/docs/templates/

Displaying a variable

{{ foo }}  <!-- string or int -->
{{ foo['bar'] }} <!-- bar from dictionary -->
{{ foo.bar }}  <!-- bar from object -->

Loops in

{% for name in names %}
<li>{{ name }}</li>
{% endfor %}

If/Elif/Else in Jinja2

{% if price == "1.00" %}
That's cheap!

{% elif price == "50.00" %}
Eh, okay, here's $50

{% else %}
I'll pay anything.

{% endif %}

Static files in Flask apps

You can put your CSS, images, JavaScript and other static files inside /static. This directory is known to Flask as the static directory and files inside can be referenced directly. For example a file css/styles.css can be referenced

/static/css/styles.css

Or an image, if it exists

/static/img/dog.jpg

The static file directory can also be referenced inside your templates with a function

{{ url_for('static', filename='css/styles.css') }}
{{ url_for('static', filename='img/dog.jpg') }}
Something went wrong with that request. Please try again.