HTML Templates

Subscribe to Tech with Tim

YouTube

Redirecting Continued

Starting from where we left off in the last tutorial. I wanted to show how to redirect to a function that takes an argument (like our user function). To do this we simply need to define the parameter name and a value in the url_for function, like below.

from flask import Flask, redirect, url_for

app = Flask(__name__)

@app.route("/")
def home():
	return "Hello! This is the home page <h1>HELLO</h1>"

@app.route("/<name>")
def user(name):
	return f"Hello {name}!"

@app.route("/admin")
	return redirect(url_for("user", name="Admin!"))  # Now we when we go to /admin we will redirect to user with the argument "Admin!"

if __name__ == "__main__":
	app.run()

Rendering HTML

Now as beautiful as our website is we probably want to render proper HTML files. To do this we need to follow a few steps.

Step 1: Import the render_template function from flask

from flask import Flask, render_template

Step 2: Create a new folder called templates inside the SAME directory as our python script.

Step 3: Create an html file, I've named mine index.html. Make sure to put it in the templates folder!

<!doctype html>
<html>
    <head>
        <title>Home page</title>
    </head>
    <body>
        <h1>Home Page!</h1>
    </body>
</html>

Step 4: Render the template from a function in python.

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

The render_template function will look in the "templates" folder for a file called "index.html" and render it to the screen. Now try running the script and visiting "/". You should see that html rendered.

Dynamic HTML

Flask uses a templating engine called jinja. This allows you to write python code inside your html files. It also allows you to pass information from your back-end (the python script) to your HTML files.

In your HTML file you can use the following syntax to evaluate python statements. {{Variable/Statement}} Placing a variable or statement inside of {{}} will tell flask to evaluate the statement inside the brackets and render the text equivalent to it.

Let's look at an example.

<!doctype html>
<html>
<head>
    <title>Home page</title>
    </head>
    <body>
	<h1>{{content}}</h1>
    </body>
</html>

Here we are defining that we will have a variable passed to this HTML file called content. So from our back-end, when we render the template we need to pass it a value for content.

@app.route("/")
def home():
    return render_template("index.html", content="Testing")

When we run the script and navigate to the home page we get the following.

Templates Continued

There are a few other things you can write in your HTML relating to python code. The most popular is to use for loops and if statements.

You can place python expressions inside {% %}.

Here's a quick example of the syntax for if statements and for loops.

<!doctype html>
<html>
<head>
    <title>Home page</title>
    </head>
    <body>
	{% if content == "true" %}
            <p>True!</p>
        {% else %}
            <p>False :(</p>
        {% endif %}
    </body>
</html>

<!doctype html>
<html>
<head>
    <title>Home page</title>
    </head>
    <body>
	{% for x in range(10) %}
             <p>{{x}}</p>
        {% endfor %}
    </body>
</html>

Passing Multiple Values

Just a quick note here to let you know that you can pass multiple values to your HTML files by defining more keyword arguments in your render_template function or by passing in things like dicts or lists.

@app.route("/")
def home():
    return render_template("index.html", content="Testing", x=4)

@app.route("/")
def home():
    return render_template("index.html", content={"a":2, "b":"hello"})

A Basic Website

HTML Templates

Adding Bootstrap & Template Inheritance

HTTP Methods – GET & POST

Sessions

Next lessonAdding Bootstrap & Template Inheritance

Design & Development by