Python for the .NET developer Transcripts
Chapter: Web frameworks
Lecture: Rendering dynamic HTML in Jinja2
0:00 Not to undersell how awesome our Hello World Flask app is
0:04 but I do think it could be a little bit better.
0:06 We're going to use some dynamic templates
0:08 obviously what we want to do is, do the logic here
0:11 inside this not the presentation right.
0:14 We want to use static html and shared layouts
0:17 so that we can have a uniformed look and feel
0:19 across our whole site and so on.
0:21 What we're going to do is go over here
0:23 and just help PyCharm be a little smarter
0:25 we're going to tell it to mark directory as
0:26 template holder - oh and also this is important
0:29 it says none of the languages are selected
0:31 would you like to pick one?
0:33 And so the idea here is if this is set, it says
0:36 if you're going to try to work with some html
0:37 what scripting language do you like?
0:40 I absolutely adore Chameleon.
0:42 It is so nice, I like it even better than Razor
0:45 which I think is a pretty clean syntax on the .NET side
0:48 but unfortunately the only two
0:49 that are supported by Flask are Mako and Jinja
0:52 and Jinja is more popular and decent.
0:54 So, we're going to go with Jinja, now what we want to do
0:56 is I typically like to have that name tied together
1:02 with the html file name that we're going to have
1:04 over here, like this. So this is the Jinja template
1:08 and it doesn't have to have any special syntax to start
1:12 it's just html.
1:13 We'll put something like this, we'll say Guitary
1:17 and then we'll just put a little message, like
1:19 hello there and we want to put the name
1:23 so that's double handlebars or double curly braces
1:26 and we just say name.
1:27 Now where does name come from?
1:29 Well we got to pass it along don't we.
1:30 Let's spell our little start up name
1:32 okay so over here what we want to do instead of this is
1:35 we're going to say Flask that render template
1:39 and then we're going to give it the name.
1:41 Notice that autocomplete, how cool is that?
1:45 Autocomplete in there and then we need to pass in
1:47 see that star star context?
1:49 That's a keyword set of arguments
1:52 that turns into a dictionary, the keys
1:55 of that dictionary are then addressed right here.
1:59 Ultimately looks like its name is equal to Michael.
2:03 Let's run it again, in fact it probably should've
2:06 restarted itself, yes it did
2:07 sometimes if you mess up the code it'll crash
2:09 and it can't continue to restart itself
2:11 so I like to restart it manually a lot because
2:13 it's just a hotkey but f*** it let's go here
2:16 and click this. Guitary! Hello there Michael.
2:19 Okay, that's pretty cool.
2:21 Let's say, we want to pass some more things
2:24 let's say 1, 2, I say 1, 1, 2, 3, 5, 8.
2:29 We'll call that numbers, nums
2:31 So these are, I don't know, our favorite numbers
2:33 or something, let's just look over here real quick
2:35 at a little bit more syntax.
2:40 What we want to do is we want to have
2:42 just put a ul and we want the ul
2:45 to have an li, this is a cool trick you can do
2:48 in PyCharm, see I went five li's here
2:50 and you can just, boom, go out like that.
2:52 That's cool but what we want is actually
2:54 just one of them and we want to generate this
2:57 for each one of our numbers.
2:58 For when we have inline code what we do is
3:01 we say curly brace percent
3:03 and when we say four, write just a little bit of Python here
3:07 and N nums, we want to put our thing, the value
3:13 and then we say N4, do a little formatting
3:16 let's go over here and refresh here we go.
3:19 Guitary, hello there Michael
3:20 nums, 1, 1, 2, 3, 5, 8
3:23 obviously the Fibonacci Sequence up to 8.
3:26 So this is the basic way that we work
3:28 with these Jinja2 templates.
3:30 You can print out the string value of something
3:33 or this can actually be a Python expression
3:35 I could say like, lower, for example, right
3:37 but ultimately it takes the result of that expression
3:40 and puts it out as a string
3:41 or you can do conditionals, if I said
3:43 if num, whatever, I could conditionally show
3:46 this li, here I'm doing a for in loop
3:49 I'm just looping through them and spitting them out.