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