Skip to content

Exercise #1_03 | Flask Templates

Jump to bottom
Genie52 edited this page Jun 12, 2019 · 7 revisions

Templates are files that contain static data as well as placeholders for dynamic data. A template is rendered with specific data to produce a final document. Flask uses the Jinja template library to render templates.

In your application, you will use templates to render HTML which will display in the user’s browser. In Flask, Jinja is configured to autoescape any data that is rendered in HTML templates. This means that it’s safe to render user input; any characters they’ve entered that could mess with the HTML, such as < and > will be escaped with safe values that look the same in the browser but don’t cause unwanted effects.

Jinja looks and behaves mostly like Python. Special delimiters are used to distinguish Jinja syntax from the static data in the template. Anything between {{ and }} is an expression that will be output to the final document. {% and %} denotes a control flow statement like if and for. Unlike Python, blocks are denoted by start and end tags rather than indentation since static text within a block could change indentation

Example template HTML file (in our case: 01-Tableau-NamePass.html)

<html>
  <head>
     <title>Tableau Hands-On - TCE 19!</title>
  </head>
  <body>
    <!-- 'name_html' is a variable that we carried over from python file!-->
    <h1>Hello how are you {{ name_html }}!<h1>
    <p>p.s. We love Berlin!</p>
  </body>
</html>

And to add a bit more visual representation:

.. and the result:

#01 - Start the exercise by running the code from command line (you should still be in 01 - Flask Basics folder):

python 03-Flask-Templates-Finish.py

#02 - Then check what we can see hosted in our Flask web server with the following URLs:

#03 - Read thru the code of 03-Flask-Templates-Finish.py

# import Flask library (class) that has needed functionality to build Web Server
# also you need to import render_template - this is library that works with Flask Jinja (HTML) templates
from flask import Flask, render_template

# next we create an instance of this (Flask) class
app = Flask(__name__)

# we then use the route() decorator to tell Flask what URL should trigger our function
# this is out root page!
@app.route('/')
def index():
    return '<h1>Hello Tabloids from TCE 19 Berlin! Welcome to 03 - Templates excercise!</h1>' #this is actual HTML code!

# You can add variable sections to a URL by marking sections with <variable_name>.
# Your function then receives the <variable_name> as a keyword argument.
# this is a dynamic URL that expects a parameter - eg. http://localhost:5000/participant/Sophie
@app.route('/participant/<name>') #this is a dynamic URL that expects a parameter
def participant(name):
    # we are sending variable 'name' as 'name_html' (you can name it as you like!)
    # to '01-Tableau-NamePass.html' and we can use it to build dynamic HTML content!
    # HTML files are expected to be in 'templates' folder
    return render_template('01-Tableau-NamePass.html',name_html=name)

#------- PASTE CODE HERE!! <<< START >>> ------------------
@app.route('/whereisthefun') #this is a dynamic URL that expects a parameter
def fun():
    where_is_the_fun = "Data Night Out!"
    return render_template('02-Tableau-Fun.html',more_fun_html=where_is_the_fun)
#------- PASTE CODE HERE!! <<< END >>> ------------------

# this just means RUN THE APP!! (our web server)
if __name__ == '__main__':
app.run()

#04 - As you have probably noticed in Python code above, we are using two Flask HTML Template files:

01-Tableau-NamePass.html

<html>
  <head>
     <title>Tableau Hands-On - TCE 19!</title>
  </head>
  <body>
      <!-- 'name_html' is a variable that we carried over from python file!-->
    <h1>Hello how are you {{ name_html }}!<h1>
    <p>p.s. We love Berlin!</p>
  </body>
</html>

and 02-Tableau-Fun.html

<html>
  <head>
     <title>Tableau Hands-On - TCE 19!</title>
  </head>
  <body>
    <!-- 'more_fun_html' is a variable that we carried over from python file!-->
    <h1>Do you know where is the fun? It is at {{more_fun_html}}!<h1>
    <p>p.s. We love Berlin even more!!</p>
  </body>
</html>

#05 - stop the current Flask server with CTRL + C and open 03-Flask-Templates-Start.py file in Atom:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return '<h1>Hello Tabloids from TCE 19 Berlin! Welcome to 03 - Templates excercise!</h1>' #this is actual HTML code!


@app.route('/participant/<name>')
def participant(name):
    return render_template('01-Tableau-NamePass.html',name_html=name)

#------- PASTE CODE HERE!! <<< START >>> ------------------

#------- PASTE CODE HERE!! <<< END >>> ------------------

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

and write the following code (or copy/paste) to designated place:

@app.route('/whereisthefun') #this is a dynamic URL that expects a parameter
def fun():
    where_is_the_fun = "Data Night Out!"
    return render_template('02-Tableau-Fun.html',more_fun_html=where_is_the_fun)

.. don't forget to save the file!

#05 - run the file in command line:

python 03-Flask-Templates-Start.py

and check if everything is working as expected with the following URLs:

Clone this wiki locally