Learn

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!

Instructions

1.

Let’s explore the cookbook Flask application. Right now our app has two route functions, each returning a basic HTML string. Our routes are:

  1. The index route function for a title page and recipe list
  2. The recipe route 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: names, descriptions, ingredients and 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 id:

  • 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!

2.

The index route HTML there is a hyperlink where the URL points to the recipe route and the recipe id 1.

<a href="/recipe/1">Fried Egg</a>

The 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 int.
  • 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!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?