Skip to content

templates

Jump to bottom
Phil Kirlin edited this page Oct 8, 2019 · 9 revisions

Templates

It is a big pain to write HTML code and Python code in the same file. This is especially tiresome when the HTML code a route needs to return gets really long. You can see it's already a pain in the previous lesson. Flask has an easy solution, called templates, that lets us separate most of the HTML code into separate files from the Python application code.

Making a HTML template

  • In the linux shell, make sure you are in your first directory. If not, cd there.
  • Type the command: mkdir templates. It must be called this.
  • In the code editor, create an HTML file called time.html. This file must be saved in your newly-created templates directory. Add the following code:
<html>
  <head>
    <title>Time</title>
  </head>
  <body>
    <h1>What time is it?</h1>
    The current time is: {{timestring}}
  </body>
</html>

  • Save this file as time.html inside the templates subfolder. So inside your first app folder, you should now have a file called sample.py, the templates subfolder, and then this new HTML file inside templates.

  • Change your import Flask line to from flask import Flask, render_template.

  • Change your time route to the following:

@app.route('/time')
def get_time():
  now = time.gmtime()
  timestring = time.strftime("%Y-%m-%d %H:%M:%S", now)
  return render_template("time.html", timestring=timestring)
  • Save and reload the time webpage.

How does this work?

  • Let's examine the HTML template first.

  • The HTML templates is literally just HTML code. You can put any HTML code in an HTML template. You can also put /variables/ in an HTML template, surrounded by double sets of curly braces. Variables are not part of HTML; they are a concept that the Flask template engine uses.

  • Now let's examine the Python code.

  • There is not much difference in the previous time route and the new one. We have imported the render_template function, which we use to tell Flask that we want to use an HTML template, rather than return raw HTML code ourselves. render_template reads in the HTML file specified, in this case time.html (which it looks for in the templates directory, hence why we had to put the file there) and replaces all the variables in the HTML with the Python values for those variables that you passed to the function.

  • The syntax for passing Python values or variables to the HTML template uses something called keyword arguments. This syntax is actually a part of Python, though we don't use it in CS141. Normally, we call functions using positional arguments, which means the parameter variables in the called function are assigned left-to-right from the values given in the calling function. Python allows you to add keyword arguments to send extra information to a function. In the template engine, we use the syntax variable=value, which creates a variable in the HTML template with the specified name, and the value of this variable will be the specified value. You can use literal values, Python variables, or arbitrary expressions as the values.

  • Note: The names of the HTML variables and the Python variables do not have to be the same! In this case they are, which is why we used the syntax timestring=timestring. If we wanted to, we could have said timestring="three thirty" or timestring=a + b, provided a and b were string variables we could concatenate.

You try it

  • Create a new HTML template called random.html that will display text like: "Your random number is" and then put a template variable called {{number}}.
  • Add a new route to your Flask app that will use this HTML template to display a random number between 1 and 10. You will need to import random and then call random.randint(1, 10).
  • Scroll down for the answer if you get stuck:

.

.

.

.

.

.

.

..

.

.

.

.

..

.

.

.

.

..

.

.

.

.

..

.

.

.

.

..

.

.

.

.

..

.

.

.

.

.

<html>
  <head>
    <title>Random</title>
  </head>
  <body>
    <h1>Random numbers are fun!</h1>
    Your random number is: {{number}}
  </body>
</html>
@app.route("/random")
def pick_number():
  n = random.randint(1, 10)
  return render_template("random.html", number=n)

Use the main wiki page to navigate, not the list of pages directly above, because those are out of order.

Clone this wiki locally