---
marp: true
theme: default
html: true
---
# Pages from data
Web apps with Flask · Pages from Python
---
## Today
**We are learning to** keep the club's players in a list, and let a template build the pages from it: one table for all, and a page for each player.
- I can fill a template from a list with {% for %} and {{ }}.
- I can make a route with a part of the address that changes, such as /player/<name>.
- I can pick items from a list for a page, and say "not found" when there are none.
---
## Why it matters
> A sports site does not have a hand-written page for every player. It has one template, filled in from data.
---
💬 Discussion
## Predict
```python
from flask import Flask, render_template_string
app = Flask(__name__)
players = ["Ada", "Sam", "Mia"]
PAGE = """Players
{% for p in players %}
- {{ p }}
{% endfor %}
"""
@app.route("/")
def home():
return render_template_string(PAGE, players=players)
app.run()
```
**How many list items (li) does the page have?**
- 0
- An error: the template has no data
- 3: one for each player
- 1
---
✅ Check
## What happened?
* 3. {% for p in players %} repeats the li for each name in players, and {{ p }} shows the name.
---
✍️ Activity
## Run it
Open the lesson at this step and try it together.
[studio.learningwaypoints.com/tutorials/code/flask/flask-templates/?full=step-2#step-2](https://studio.learningwaypoints.com/tutorials/code/flask/flask-templates/?full=step-2#step-2)
---
💬 Discussion
## Investigate
_The program is 38 lines long: open it in the tutorial and read it together._
[Open this step](https://studio.learningwaypoints.com/tutorials/code/flask/flask-templates/?full=step-3#step-3)
---
✅ Check
## A part that changes
**Someone visits /player/Leo. What is name inside player()?**
- "Leo"
- players[3]
- "<name>"
- "/player/Leo"
* Answer: "Leo"
---
✅ Check
## When there is no such player
**What does return "...", 404 do when no player matches?**
- Sends the number 404 as the page
- Sends two pages
- Stops the app
- Sends the page with the status 404 Not Found, so browsers and search engines know the page is missing
* Answer: Sends the page with the status 404 Not Found, so browsers and search engines know the page is missing
---
✅ Check
## Spot the bug
**The page shows an empty list, though players has two names. Click the line that is wrong.**
```
1 from flask import Flask, render_template_string
2
3 app = Flask(__name__)
4 players = [{"name": "Ada"}, {"name": "Sam"}]
5
6 PAGE = """
7 {% for p in players %}
8 - {{ p["name"] }}
9 {% endfor %}
10
"""
11
12
13 @app.route("/")
14 def home():
15 return render_template_string(PAGE)
16
17
18 app.run()
```
* Answer: line 15
---
✍️ Activity
## Modify
- **Wins:** Show each player's **wins** in a third column.
- **A page for each group:** Add `/group/`, a page listing only that group's players (try `/group/Players`), and link to it from each player's page.
[Open this step](https://studio.learningwaypoints.com/tutorials/code/flask/flask-templates/?full=step-4#step-4)
---
✍️ Activity
## Make: the leaders
Add a `/leaders` page: the players with **3 or more wins**, as a numbered list, made with a template of your own.
[Open this step](https://studio.learningwaypoints.com/tutorials/code/flask/flask-templates/?full=step-5#step-5)
---
## Where this leads
On a computer, templates usually live in their own files in a `templates` folder, loaded with `render_template("club.html", ...)`; the `{{ }}` and `{% %}` work exactly the same. Next: a form that adds players.
---
✅ Check
## Exit ticket
**What does {% for p in players %} do in a template?**
* Repeats the part up to {% endfor %} once for each item in players, with p as that item.