Introducing Templates – Web Development


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.

Add a Comment

Your email address will not be published. Required fields are marked *