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