Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Introducing the Flask framework
Lecture: Building block: Dynamic HTML Templates

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Final building block is templates.
0:03 And templates are like HTML
0:04 with a little bit of Python sprinkled in.
0:07 So here's what you'd call a Jinja2 template
0:10 and the idea is given a list of packages
0:13 maybe the popular ones, who knows
0:14 we want to loop over and create a bunch of little HTML divs
0:17 and each one of those divs is going to
0:19 contain a hyperlink, a summary
0:22 and things like that, if there is a summary.
0:25 So let's unpack some of these little features here.
0:28 Here we have conditionals
0:30 and loops and so on in these {% things.
0:34 So we say {% for p in packages %}
0:38 Remember packages has probably passed over
0:40 as part of the model, something iterable here
0:42 with an ID and a summary.
0:44 We define a little looping variable p
0:46 and all the HTML in there gets repeated.
0:48 So if there were three packages
0:49 that div would appear three times in the final HTML.
0:54 Notice the bottom here, we have this {% end for %}
0:56 So whenever you open one of these
0:57 like for p in packages, we have to close it.
0:59 We also have if summary, end if.
1:01 Personally, it drives me crazy that this is how its done
1:05 but this is how it's done.
1:07 If we want to take a value and convert it to text
1:10 we would just put it in {{ }}.
1:12 So here, the id is actually a string
1:15 which is the package name, like SQLAlchemy
1:17 or something like that.
1:19 SQLAlchemy, MongoEngine, Flask, whatever.
1:21 I want to show that as the link text.
1:24 I basically want the text of the name of the project
1:27 to be shown, and I also want to link to it
1:29 like /project, /flask. So we can do {{ }}
1:33 both inside the attributes for the URL
1:35 and inside of the tag to just show the text.
1:39 We also can have conditionals.
1:41 Here we can have if there is a summary
1:44 we're going to show a span.
1:45 But if for some reason this particular project
1:47 doesn't have a summary, just omit
1:49 that whole block of HTML altogether.
1:54 When you're finally rendered
1:55 it looks potentially something like this
1:57 depending on the data we pass in.
1:58 So here's the request, that's the name p.id
2:01 as well as the extended URL's going to be
2:03 /project/request.
2:06 And that summary is HTTP4, and the next one is Boto3
2:09 AWS API is the summary, and so on.
2:12 Now this is entirely un-styled
2:14 but we're going to be doing all sorts
2:15 of cool stuff to make this look much better as we go.
2:19 We won't spend a lot of time working on templates
2:21 but I think you'll pick them up pretty quickly.
2:23 They're basically HTML with a little bit
2:25 of Python sprinkled on top of them.