Flask Tutorials: Including Templates 🎯

Welcome to the Flask Templates lesson! Today, we'll learn how to create and use templates in Flask, a powerful Python web framework. This skill is crucial for structuring and organizing your web applications effectively. Let's dive in!

What are Templates? 📝

Templates are reusable HTML files that help you create consistent and well-structured web pages. They separate the presentation layer from the application logic, making your code more manageable and easier to maintain.

Why Use Templates in Flask? 💡

Simplify page structure: Templates provide a consistent layout for your web pages.
Ease of maintenance: By separating the presentation from the application logic, you can modify the look and feel of your entire application by just updating the template.
Improve readability: Templates help you organize your code, making it easier to understand and maintain.

Getting Started with Flask Templates 🎯

Step 1: Install Flask

Before we begin, let's make sure you have Flask installed on your system. If you haven't, you can install it using the following command:

bash

pip install flask

Step 2: Create a New Flask Application

Create a new directory for your Flask application and navigate to it in your terminal. Then, create a new Python file called app.py.

bash

mkdir flask-templates
cd flask-templates
touch app.py

Step 3: Import the Necessary Modules

Open app.py in your favorite code editor and import the Flask module.

python

from flask import Flask, render_template

Step 4: Initialize the Flask Application

Initialize the Flask application and define a route.

python

app = Flask(__name__)

@app.route('/')
def home():
    return "Welcome to Flask Templates!"

Now, let's create a template for our home page.

Creating a Template 🎯

Flask looks for templates in a folder called templates within your application directory. Create a new folder called templates in your flask-templates directory.

bash

mkdir templates

Now, create a new HTML file called base.html within the templates folder. This will serve as our base template for all pages.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Flask App{% endblock %}</title>
</head>
<body>
    <header>
        <h1>{% block header %}Welcome to My Flask App!{% endblock %}</h1>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        &copy; {% block footer %}2022{% endblock %}
    </footer>
</body>
</html>

In the base.html file, you can see we've defined three blocks: title, header, and content. These blocks can be overridden in specific templates to provide custom content for each page.

Using the Template in Flask 🎯

Now, let's modify our app.py file to use the base.html template for our home page.

python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('base.html')

if __name__ == "__main__":
    app.run(debug=True)

Now, when you run your application, you should see the content from the base.html file rendered as your home page.

Creating Specific Templates 🎯

To create a specific template for a page, create a new HTML file in the templates folder and override the blocks in the base.html file as needed.

For example, create a new file called home.html and override the content block.

html

{% extends 'base.html' %}

{% block content %}
<p>Welcome to the home page of My Flask App!</p>
{% endblock %}

Now, modify the home function in app.py to use the home.html template.

python

from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

When you run your application now, the content from both base.html and home.html will be combined to create the final output.

Flask Tutorials: Including Templates 🎯

Flask Tutorials: Including Templates 🎯

What are Templates? 📝

Why Use Templates in Flask? 💡

Getting Started with Flask Templates 🎯

Step 1: Install Flask

Step 2: Create a New Flask Application

Step 3: Import the Necessary Modules

Step 4: Initialize the Flask Application

Creating a Template 🎯

Using the Template in Flask 🎯

Creating Specific Templates 🎯

Quiz 🎯