Dynamic Pages in Flask: Passing Data to Templates | Python Comeback Journey #5
After building the base template structure in the previous post, it was time to make the app feel alive. Static HTML pages were fine for scaffolding, but real Flask apps respond to data — they personalize, adapt, and change depending on context.
In this stage of my Flask comeback journey, I learned how to pass data from Python into templates and use that data to render dynamic HTML. The key idea was: Flask handles the logic, while Jinja (the templating engine) handles how that logic is displayed.
🧩 Step 1: Creating a Contact Page
I began with a new route in app.py:
|
1 2 3 4 |
@app.route(‘/contact’) def contact(): return render_template(‘contact.html’, Name=‘Naoman’, email=‘naoman@mymail.com’) |
Here, render_template() sends variables (Name and email) to the contact.html template. They become placeholders that Jinja can access.
The template looked like this:
|
1 2 3 4 5 6 7 8 |
{% extends “base.html” %} {% block title %}Contact – Book Tracker{% endblock %} {% block content %} <p>Name: {{ Name }}</p> <p>Email: {{ email }}</p> <a href=“{{ url_for(‘home’) }}”>Home</a> {% endblock %} |
The {{ }} syntax is Jinja’s way of inserting variables into HTML. Flask replaces them with the actual values passed from the route.
When I visited /contact, the data appeared just as expected — dynamically generated from Python.
⚙️ Step 2: Understanding Template Variables
One small but powerful realization: template variables don’t need to come directly from the route. They can also come from computed values, API calls, or even database queries.
For example:
|
1 2 3 4 |
@app.route(‘/quote’) def quote(): return render_template(‘quote.html’, quote=random.choice(quotes)) |
This pattern opened the door to parameterized templates — reusable HTML structures that change content depending on what’s passed in.
💡 Step 3: Adding Comments and Structure
As I learned, documenting your templates helps a lot. Jinja supports comment blocks like this:
|
1 2 3 4 5 |
{# Template: contact.html Purpose: Display static contact info Variables: Name, email Extends: base.html #} |
Unlike HTML comments, Jinja comments are stripped out completely when the page is rendered. They never appear in the browser source.
🧭 Step 4: The Bigger Lesson
The exercise wasn’t just about building a contact page — it was about understanding data flow:
- Data originates in Flask (Python logic layer)
- It travels through
render_template() - It’s displayed by Jinja in HTML
This flow is the backbone of every Flask app, from a two-page portfolio to a complex web dashboard.
🚀 Reflection
At this point in the journey, something clicked. Flask wasn’t just a backend engine spitting out pages — it was a bridge between logic and presentation. Once I understood that templates were views of data, I began to see the entire project in terms of data passing through layers rather than pages stacked on top of each other.
The next step would be to create more dynamic routes — ones that respond to runtime data, like a status check page that reports the app’s health.
Stay tuned for Python Comeback Journey #6: Building a Health Check Page in Flask.
Leave a Reply