Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Our first jinja template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's start using our first dynamic HTML Jinja2 template. And we're just going to do that quickly here in PyCharm.
0:08
Now, these Jinja templates, they're basically HTML with a little bit of Python Jinja syntax sprinkled in. So, we're going to start by defining
0:17
the homepage for our PyPI site. Now, it's going to have no styling it's not going to look good, that's okay we'll get to that.
0:24
Let's go over here and we're just going to say new HTML file. And I can just say new file and start typing
0:29
but this will help with some of the boilerplate stuff. So, I really like to call these the same as their view method here.
0:38
So, view method index is going to have the template index, that HTML. As we organize our site better later on we're going to have sub directories that
0:47
have more to do with the name, as well. But for now, let's just go with this. So, you see we get this how to write here
0:53
this will go in Python package index and I'll put demo 'cause it's just a knock off this is of course not the real site. And here we can just put h1
1:03
hello world, woo hoo. Now, let's go back and teach this thing there's a view here to not return text but rather to use that template.
1:13
I'm going to go over here, I'm going to do a multi step thing here. We're going to start out by doing the manual
1:18
explicit way and then I'm going to show you we can a decorator that's really nice and it's going to do a little bit better for us here.
1:25
Okay, so what we're going to do is we have Flask import at the top up here and we can go to Flask and say flask.render_template
1:34
and then we have to give it a template name and the template name is relative including directories to this. So, we don't say templates
1:40
we just say index.html. Notice that right there. Hold up, what just happened? So, PyCharm is saying, hey we know about the templates folder
1:50
that's why it's purple PyCharm detected that it's supposed to be a Flask template folder. And now it's trying to help us
1:56
and flask.render_template figured that out. I think that's pretty killer. And then also, right here we can now jump to that.
2:04
So really, really nice integration here but that's not so much the point although it is to be appreciated. Let's go click on this, see what we get.
2:11
Hello, world! Now, that kind of looks like before but if we view page source this is the HTML edition. Let's change it.
2:19
Let's go here and this will just be Python package index, like so. And then down here I'll put in h2 packages and then a to do show packages.
2:35
We refresh it, ah there we go. It feels like we're right back in nineteen ninety four these terrible looking websites.
2:42
We're going to work on the design in a moment. But let's just focus on the templating for now. Okay, so what do we do for this?
2:50
Well, remember we talked about the model view controller? This part is the controller bit often referred to as view methods as I've been calling it.
2:58
And this is the view or the template that we want to give it to. The other part that we haven't seen in action just yet here, is the model.
3:08
So, what we're going to do is we're going to pass in things by key value here. So, packages will be test packages or something like that.
3:17
Where did we get that? Well, you just type it out and this could be package one two and three. And notice the hot key little highlighter here
3:28
so I use hot keys a lot but it'll show you what those were so you know what's happening. So, down here we could just take our packages
3:35
remember the keyword is going to be the name that we refer to in our template and this going to be the value, whatever that is.
3:43
Shall we use packages over here? And let's just say insert in a little br here, boom. And then to show the item, we're going to do
3:51
just like that, double curly brackets. If we refresh this, look at that. Package one, package two, package three.
3:58
Lovely, right? Okay so, that's kind of cool. That's just doing the string representation of packages. That's not really what we want to show
4:07
but notice that's also not very rich data. Maybe the package has a name and a version so let's upgrade this a little bit.
4:14
Also, when you just hack it in here know you would get it from the database. Now, we don't have a database yet
4:20
but let's just simulate by having a function called get_latest_packages. That we can call and it's going to return a list
4:30
and each list element is going to have a name and it's going to be let's say flask and a version, let's say 1.2.3.
4:44
Like so and then we'll have another one this will be a sqlalchemy. So 2.2.0. And let's throw in another favorite of mine
4:52
passlib, we'll see that appear later. This is going to be 3.0.0. Now PyCharm says these are misspelled and they are not, so you can tell it
5:01
please don't do that. Then down here we can go and just get the test packages and say get the latest. You could even in line it here
5:09
but I'm not a big fan of that you can if you want. Now, when we saved it down here it reloaded again and detected the change there
5:18
so we don't actually have to rerun it. Unless we mess up the syntax and then it crashes, then you got to rerun it. So, let's see what we get here.
5:25
Different data, same display. We're just showing the string representation. So, the last thing we want to do here
5:32
is we're going to go over here and do this little to do thing, but let's do a loop. So, we'll say go back %% { like so.
5:42
So, what we're going to do is we're going to loop over each of the packages. So, let's say for p in packages
5:48
and then remember every time you have a start you got to do an end. for and then let's just put p like this try it again. That's closer.
6:00
Right, notice it looked different. If you actually view the source it's on multiple lines there. Right, like so.
6:06
Doesn't look great but that's all right. We're going to make it better. Let's put that into a div, like so. So, we want a span that has a class title.
6:14
There's a cool little trick we can do here so if we say . in CSS . means CSS class so watch this, if I hit tab it expands out
6:21
into a span with the class set to title. And for to this, we can set this to be p.name and then let's just have another span
6:31
and let's give it a class of version, like so. p.version. Cool, now let's see how that looks. Ooh, looks nice in here, right? Close this off.
6:46
Boom, looks like we have a stray ( running around somewhere, that one right there. Cool, so we have our Flask showing here
6:54
we can even style this up a little bit it wouldn't really do this, put it in here but we're going to do it for just a moment.
7:00
Title. We're going to say something like font weight is bold. Like that. There you go, and you see our nice packages listed right here.
7:11
So, this is our first pass at working with these Jinja templates. So, we do our %, our % Python statement so a for then close the for
7:22
then in here we just put standard HTML blocks so like a div containing a span which has classes and so on. Get the string out like this we could do
7:32
like string operations or other Python operations on it like this. You could also do that in CSS but just to show you can call Python functions
7:40
on the Python objects. Like, on a datetime, you can get an iso version or other interesting things like this. So, really really nice here.
7:48
We could clean it up I guess a tiny bit like so. Yeah, so this is it. This is our basic Jinja2 template to render our data and just 'cause it came from
7:59
this fake function, don't get fooled. It could come from a database or somewhere else and it would be treated exactly the same.
8:05
So, let's do this. There we go. There, there's a pretty real version. We won't talk about what that ... has under it.