When you navigate through a website you may notice that many of the pages on the site have a similar look and feel. This aspect of a website can be achieved with the use of templates. In this lesson the term template refers to an HTML file that can represent multiple web pages with the same structure and functionality.
We will be using the Flask framework for our application in this lesson. Flask uses the Jinja2 template engine to render HTML files that include application variables and control structures. The Jinja2 template engine is a powerful tool that supports an organized and growth oriented application.
In this lesson we will look at:
- How to organize our site file structure
- Use our application data with our templates
- Leverage control structures within our templates
- Share common elements across many templates
The application we will be building in the following exercises is a cookbook site that consists of a main page and individual recipe pages. Currently our app consists of 2 routes that return HTML strings for the browser to display. Explore the application to begin your path to learning templates!
Let’s explore the cookbook Flask application. Right now our app has two route functions, each returning a basic HTML string. Our routes are:
indexroute function for a title page and recipe list
reciperoute function for details of a single recipe
Looking at the app’s import statement we can see our app contains a file called helper.py which includes 4 dictionaries:
instructions. Using a recipe
id as a key, we can access the data in each dictionary.
Here is a description of our data given a specific recipe
recipes[id]is a string and is the display name of the recipe.
descriptions[id]is a string and is a brief description of the recipe.
ingredients[id]is a list of ingredient strings.
instructions[id]is a dictionary whose key correspond to the step number and the values are the step instructions.
We’ll be using these variables from helper.py throughout the lesson. To access the correct recipe data we need to refresh our knowledge of passing variables between routes through the URL. Run the code when you’re ready!
index route HTML there is a hyperlink where the URL points to the recipe route and the recipe
<a href="/recipe/1">Fried Egg</a>
id is used as the key for all the data in helper.py, but we need to be able access it first.
In the recipe route, add the variable
id as an integer to receive the correct recipe data.
- In the route decorator, add the variable to the URL making sure to specify the data type as an
- In the route function, add the variable as a parameter.
Run the code and navigate to the recipe page using the link. You can see the recipe data from helper.py is output on separate lines in the web browser. If you look back at the recipe route, each variable is contained inside the HTML string. The list and dictionary are string representations of the variables.
Proceed to the next exercise to begin working with templates!