Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Jinja2 template example

Login or purchase this course to watch this video and the rest of the course contents.
0:00 So let's take this data and put it into a Jinja template
0:03 and make dynamic HTML out of it.
0:07 So, here's one little code snippet, not all the HTML.
0:10 Obviously, there's not the HTML on the head and the body
0:12 and like, that kind of stuff
0:14 but just to focus on the essence of it, if you will.
0:16 So, we have two situations.
0:18 One where we're given that data but there's no categories;
0:21 it's like an empty list or something like that.
0:23 You know, we did a database query and like
0:24 "Hey, it's not set up," or whatever.
0:27 So, we want to just show on this page there's no categories.
0:30 But if there are, we want to loop over them
0:32 and add a div with two hyperlinks
0:34 one for the image and one for the name.
0:37 So, a couple of things should jump out at you right away.
0:40 Any time we have some kind of conditional
0:43 or command or loop or something like that involving Python
0:46 we say, {%
0:48 we insert some Python and we say, %}
0:52 to close it off.
0:53 So, if not categories
0:55 so we want to show this div at the top
0:57 that says, no categories, only if there's no categories.
1:00 And we don't just have the opening block
1:03 we also have an ending block.
1:04 So, if you say, if something, you have to say, end if.
1:07 Notice at the bottom we have for something, and for.
1:11 So you got to open and close these both
1:12 with little percent block indicators
1:16 at the front and the end of the statement
1:17 but also at the end of the block.
1:19 So, we have our, if statement, on the one hand
1:22 we could also do an else if we really wanted
1:24 but that's okay.
1:25 We're just going to go with two if's
1:26 effectively the same.
1:27 Then we're going to do a for loop.
1:29 So, we're just going to have {% for c in categories %}
1:31 that's standard Python.
1:32 And this is going to define a local variable c.
1:35 And in here we have some HTML blocks
1:37 that gets repeated for each c
1:39 for each little category in for thing there.
1:43 And we're going to have two hyperlinks
1:44 and we want to have the hyperlinks
1:46 contain the name of category.
1:47 So, like /category/comfort
1:49 /category/downhill/, or whatever.
1:53 Then we're also going to have the image.
1:54 So, we just say {{
1:57 or sometimes those are called mustaches or handlebars
2:00 but call it what you like.
2:02 {{ and then we say c and we can apply further Python.
2:06 So it's, pulls out that value of the dictionary
2:09 and then .lower, lowercases that string just to make sure
2:12 that the URL is kind of normalized there.
2:15 Then c.image will get the URL and we want to show the name
2:18 also in the bottom one without being lowercase
2:20 so we just say
2:21 Pretty straightforward, right?
2:23 This is, honestly, most of what you need to know
2:25 to work with Jinja outside of additional
2:28 just the standard HTML stuff that you're going to be doing.