In the previous video, we learned how to use template inheritance, create base and child templates, and additionally, we created child templates for the about page and the main page. In this video we’ll learn, how to create a menu to our online store.

By using a common pattern in web development called “routing”, we were able to create two pages for our online store: the home page and the about page. Routing involves matching a URL to a handler, which is a function that is executed when the user visits a specific URL. In Flask, we use the route decorator to associate a handler with a URL. The route decorator takes a URL as an argument, and when the user visits that URL, the associated handler is executed.

In our code, we have two routes: the root route marked with the @app.route('/') decorator, which corresponds to the root of the website, and the /about route marked with the @app.route('/about') decorator.

When the user visits the root of the website, the hello_world function is executed, and when the user visits the /about page, the about function is executed.

These functions are called handlers because they handle requests from the user, and they are also called view functions because they return a view to the user.

Adding a menu

Now that we have two pages, we need a way to navigate between them. To do this, we’ll add a menu to the website. The menu will contain links to the home page and the about page. When the user clicks on a link, the browser will navigate to the corresponding page. Let’s do this now.

Let’s open the “base.html” template. We’ll add a menu to the header. First, let’s add a nav tag. Then, let’s add an unordered list inside the nav tag. Then, let’s add a list item for the home page. We’ll use the a tag to create a link to the home page. The href attribute specifies the URL of the link. The value is /. This is the URL of the home page. The text of the link is “Home”. HREF is going to be /about. This is the URL of the about page. The text of the link is “About”.

Let’s refresh the page. We can see the menu at the top of the page. When we click on the “Home” link, the browser navigates to the home page. When we click on the “About” link, the browser navigates to the about page.

However, if we ever want to change the URL of the home page, we would have to update the URL in two places: in the route decorator and in the href attribute of the link. Imagine if we had 10 pages or templates. We would have to update the URL in 10 places. This is not ideal.

To avoid this, we can use the url_for function provided by Jinja2. This function takes the name of the view function as an argument and returns the URL of the view function. Let’s update the href attributes of the links to use the url_for function to generate the URLs dynamically. After refreshing the page, the menu still works as expected.

Also, it’s time to rename the hello_world function to index because it’s not a hello world function anymore. It’s a function that returns the home page. That’s why the template rendered by this function is called “index.html”. This is a common convention in web development. The home page is often called the index page, and the template that renders the home page is often called “index.html”. This convention dates back to the early days of the web, when websites were often built using static HTML files. By naming the default page index.html, web developers could ensure that the correct page was displayed when a user visited the root URL of the website. Today, even though many websites are built using dynamic server-side technologies like Flask, the convention of naming the default page index.html is still widely used.