Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Course conclusion
Lecture: Jinja2 templates and dynamic HTML
0:00 Unless you're building, purely, some sort of API endpoint
0:04 you're going to want to have dynamic HTML
0:05 and even in those endpoint stories
0:08 you probably want to have some landing page that say
0:10 Here's our API and go over this GitHub repo
0:13 for the documentation, or something like that.
0:16 So let's talk about Jinja2, right.
0:17 That's the default dynamic HTML language for Flask.
0:22 And it works like this.
0:23 It's mostly HTML, but with these curly-brace percent blocks
0:28 where we sprinkle in Python, and these double-handlebar
0:32 double curly-brace things where we stringify things
0:36 we take the value, some expression
0:38 and we print out the string value right there.
0:41 For example, we're looping over the packages
0:43 and we're going to replicate this div block, three times
0:46 for three packages, or five times for five packages.
0:48 However many we pass in, we want to have one of these blocks
0:51 for each one of those, so we just have for p in packages.
0:54 Notice there's no colon, that's handled
0:57 by the endfor down there.
1:00 If we want to have just string values as I said
1:02 double handlebars, and some kind of expression.
1:04 You can call Python code here, and methods and whatnot
1:08 but ultimately the return value is going to be
1:10 just printed out as a string.
1:11 We also saw that we have if statements.
1:14 So we want to conditionally show the summary
1:16 only if there is a summary, we'll do it this way.
1:19 Of course, all those blocks have to be closed
1:22 with an endif, or an endfor, and so on.
1:25 If we run this, how's it going to look?
1:26 Let's say we pass three packages
1:28 request, Boto and SQLAlchemy.
1:30 It'll look something like this.
1:32 The style, the web design, not overwhelming, is it?
1:35 But, you know, this is just getting started, right?
1:37 This is just the barebones Let's show the data in HTML.
1:41 This is how we do it with Jinja2.