Fortunately, there is a better way. We are
going to use a technology called templates. Templates generally refer
to a library. As a template library is a
library to build complicated strings. And by strings I
really mean any string. But when you're developing web
applications, most of the time, we're referring to HTML,
because those are the strings [UNKNOWN] generate the vast
majority of the time. And in this lesson, and
really for the rest of this class, I'm going to be
using a template library called Jinja 2. The reason we're using
this is because it's built in to Google App Engine
and, you know, there're many templating libraries, and they're all very
very similar and Jinja2, while this course is the first
time I've been exposed to it. Was very easy to learn
for me because it is very similar to other template
libraries that I've used, so it should be very similar to
other template libraries that you will probably find yourself
using, down the road. You can find more information about
Jinja at jinja.pocoo.org. P-O-C-O-O.org. Let's start integrating this into the
little toy app we've been building and see how things
look. Okay, the first thing I'm going to do is
update our app. [UNKNOWN] this is an app engine thing.
If you want to include external libraries, you need to do
this. You got a libraries line, you have the library
name, and you say which version to use. You don't need to
fully understand this right now and to be honest, I don't fully
understand this right now. You can find more information in the App
Engine docs, if you want to start including more libraries. Next what we
do is we add an import statement to import Jinja. At this
point I'm going to reload our web app just to make sure this
import statement worked, which basically implies
that the apps, the app.yaml update
worked as well. So I get to this page, and I hit reload,
and it looks like it worked. If there was an error, you
know, let's say I type this incorrectly, you know, adding an extra 2,
this is something you might see when you're doing this on your own,
and I reload this page, you'll get you know, you'll see blank or
nothing. And then if I look at my terminal, we can see
an error in my terminal, no module name jinja22. So, if you see
this, you know, make sure you updated your [UNKNOWN] properly and make sure
you typed the, the module name properly. Okay, let's get rid of that.
I'm going to add a couple lines to initialize Jinja. These two
lines are basically where you're using the OS library, which is built
into Python. os.path.join, this concatenates two file names. And I'm, so
I'm concatenating, this is basically the directory that my current file is
in. And then I'm adding the word templates to this. If
we were to run this in the python terminal, it would look
something like this. So here I'm in the python terminal. I just
want to, I just want you to see what's going on here because
this is very simple, but if you've never done it before,
it can be a little confusing. And you may as well just
understand everything that's going on. So if I were to say os.path.join
and run it with a string like home and a, and a
string like Steve, it just [UNKNOWN] the two together, gets the slashes
right. You know you could just say plus, but it just makes
sure that everything adds up. So that's os.path.join. This, this other part
the os.path dirname, returns the directory of the current file. That's actually
not going to work in the terminal, because underscore
underscore file doesn't exist. But it exists when
you're running a program. So this is just
basically says, my template directory will be the current
directory I'm in, slash templates. Okay, next we
instantiate what we're going to call the Jinja environment, jinja_env.
And, basically, this is a new jinja environment,
and, we're going to use a FileSystemLoader using our template_dir
which we just defined there. And this basically says,
when we render templates Jinja's going to look for those
templates in this directory. Current directory slash template. Nothing
too complicated there, and you can just copy these lines.
Next, I'm going to add a couple of functions to
my handler class here. I added two functions. Render
str and render. So the first function here is
called render str. And this basically takes a file name,
and a bunch of extra parameters. This is the python syntax
for, basically, extra parameters. And we use that Jinja environment that
we created earlier above, and we call it get template and
give it a file name. This basically causes Jinja to load that
file and create a Jinja template. We store it in t,
and we call t.render passing in the parameters that were passed
into this function. This'll be more clear when we actually use
this as an example. And this just returns a string. And then
I added this other render function, which I'll use all over
the place, which again takes a template, a bunch of extra
parameters and it just cause render stir this other function, but
it also wraps itself in self.write. Which is the one that
actually sends it back to the browser. You'll actually see these
3 functions in most of the examples, most of the homework
solutions and stuff I use in this class. I've just been
copying them around. And in fact what's funny is actually just interviewed
a guy at Hipmunk, who had these three functions in his
code. And I had asked him. I was, like, where did
you get those, those functions from? And he, he couldn't remember.
I was like, Yeah, it's from this [UNKNOWN] course I taught
a little while ago. [LAUGH] So, anyway, yeah these are handy
little things. Feel free to copy them around. It's just for
rendering basic templates. And next one I'm going to do is
move some of this HTML out of HTML and into a file.
So let's create a new file, and copy, and
let's copy this code, or this HTML into that
file. Let's get rid of this percent s for
now. I'm going to save this file, I'm going to call it
shopping list.html, and I'm going to store it in this
template structure that I just created. Okay. Now as you
can see, sense we're using this editor sublime, and
it knows it's HTML. It actually just started Syntax highlighting
things for us. And we can also clean up our
indentation here without too much drama, so it looks a little
bit better. You notice I still don't have any of the
HTML scaffolding around this. You know, the head and the body
and the, the actual HTML tech. That's because it's not really
needed for this example, and we'll add it in later. It's
generally good form to do so, but, there's no reason to
make you guys watch me type that over and over again.