render_template)Welcome back! In this tutorial, we'll dive into one of the most crucial aspects of Flask – rendering templates using the render_template function. This lesson is suitable for both beginners and intermediates, so let's get started! 🎯
In Flask, a template is an HTML file used to generate dynamic content. Templates help us create clean, reusable, and maintainable web pages. 💡 Pro Tip: They are also useful in separating the logic of our application from the presentation, which makes our code more readable and easier to manage.
Before we dive into rendering templates, let's quickly set up a basic Flask application.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, World!"
if __name__ == '__main__':
app.run()In this example, we create a simple Flask app that displays "Hello, World!" on the homepage. But our goal is to render an HTML template instead.
First, let's create a new folder called templates in our project directory. Inside this folder, we'll create a new HTML file named home.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Now, let's modify our Flask app to render this template instead of returning a string.
render_templateReplace the home function with the following code:
from flask import render_template
@app.route('/')
def home():
return render_template('home.html')Now, if you run the application, it will render the home.html template, displaying "Hello, World!" on the homepage. 🎉
Often, we need to pass dynamic data from our Python code to the templates. To do this, we can pass variables to our templates using the render_template function.
@app.route('/')
def home():
message = "Welcome to CodeYourCraft!"
return render_template('home.html', message=message)Now, let's modify our home.html file to display the message we passed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>Here, {{ message }} is a template variable that will be replaced with the value of the message variable we passed in our Python code.
In real-world projects, templates can get more complex, including loops, conditional statements, and inheritance. Let's explore a simple example of a loop:
First, let's modify the Python code to include a list:
@app.route('/')
def home():
message = "Welcome to CodeYourCraft!"
data = [
{"name": "HTML", "color": "red"},
{"name": "CSS", "color": "blue"},
{"name": "JavaScript", "color": "yellow"},
]
return render_template('home.html', message=message, data=data)Now, let's modify our home.html file to loop through the data list:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body>
<h1>{{ message }}</h1>
<ul>
{% for item in data %}
<li style="color: {{ item.color }}">{{ item.name }}</li>
{% endfor %}
</ul>
</body>
</html>Here, we're using a for loop to iterate through the data list and display each item with its color.
What is the purpose of the `render_template` function in Flask?
That's all for now! In the next tutorial, we'll delve deeper into templates and explore conditional statements and inheritance. Until then, happy coding! 📝