Now that we've all had a good face-to-face, we're going to accomplish two things today.
First, we're going to add a new route to your app.py that will let you see a single incident / detainee by clicking on a link from your home page.
Second, we're going to walk through how CSS works and discuss how you might use Materialize to clean up your site's design.
So, your app.py should look like this:
#!/usr/bin/env python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
import csv
with open('data.csv', 'r') as readfile:
rows = list(csv.DictReader(readfile))
return render_template('index.html', rows=rows)
if __name__ == "__main__":
app.run()As a refresher, what we're doing is listening for the root URL for your site, e.g., / and executing a function called index().
The index() function opens your data CSV reads all of the rows to a variable called rows. It then returns your index.html template, rendered with a rows variable containing all of the rows in your data spreadsheet.
The next thing we want to do is, for each row, make a clickable link that will lead us to a detailed view of that detainee or that hunting accident.
If you remember from Lena Groeger's article for ProPublica, she talks about showing "the near and the far."
In the case of your website, the "far" is the index page, which shows you all of the incidents or detainees. The "near" would be a detail page showing information about any single one of the incidents or detainees.
Okay, let's add a new detail route.
#!/usr/bin/env python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
import csv
with open('data.csv', 'r') as readfile:
rows = list(csv.DictReader(readfile))
return render_template('index.html', rows=rows)
@app.route('/<id>/'
def detail(id):
import csv
with open('data.csv', 'r') as readfile:
row = list(csv.DictReader(readfile))[id]
return render_template('detail.html', row=row, id=id)
if __name__ == "__main__":
app.run()This creates a new route looking for URLs like /3/, where 3 is the fourth row in your spreadsheet. Remember, Python uses zero-based indexing, so we count 0,1,2,3 to get to four.
Okay, so, next, we need to create a detail.html template that contains some detail information.
Here's a really ugly one:
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-md-12">
<h1>This is detainee/accident {{ id }}</h1>
<p>{{ row }}</p>
</div>
</div>
{% endblock %}Now we need to update your index.html template to create a link for each row.
Somewhere in your index.html template, you have code that looks like this (but not exactly like this):
{% for row in rows %}
{{ row.name }}
{% endfor %}You want to modify your code to look like this:
{% for row in rows %}
<a href="/{{ loop.index0 }}/">{{ row.name }}</a>
{% endfor %}There are two new things here.
First, there's an <a> tag. This is called an "anchor" and it's the HTML tag that forms a link. The location of the link, e.g., where you want to send people, lives in an attribute called href for some reason. That's why you can see href="SOMETHING" in the code snippet above.
Second, the way we build the link href is with a cool template feature called loop. For each iteration of the loop, we get a variable called loop.index0 that will return the 0-indexed point of WHERE WE ARE IN THE LOOP.
If this is the first row in your spreadsheet, loop.index0 will be 0. If this is the twentieth row, loop.index0 will be 19. What will be the value of loop.index0 for the 950th row in your spreadsheet?
Okay, time to test it out! Tyler will walk through and make sure everything is working.
Most importantly, you should think about how to lay out your web site. What are the components and where should they go? You'll want to look at the section on Grids.
Other elements that students often use: