7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Create a Template

In Django, data to be presented to the end user is converted to HTML with a template. In this lesson we will create a static template (an HTML-only template with no dynamic data) just to get the ball rolling.

2.5 Create a Template

Now that we have started to dig down into the world of creating views within Django, as you see we've got our articles underscore list function that is really going to be a view where we're going to contain logic within our application. You can also see that we have started to refer to a template doesn't exist yet. And, in this lesson we're gonna take care of starting to create that first template. So the first thing that I'm gonna wanna do is I'm gonna go over to my terminal here, and I'm just gonna quit it for now. We'll clear this out, and now we need to start to create the directory structure, and then ultimately create some files that are going to work together with this view as a template and start to present some data to the end user. So the first thing that I wanna do is I wanna go into my news app. So whatever directory structure you've chosen or whatever name you've chosen, for your app within your project. So now within here, I need to start creating some directories. And this is gonna seem a little strange in the beginning. But it's gonna make sense as you start to build larger applications. But for now you're just gonna have to take my word for it. So now that we're in here, I need to create a directory. So I'm gonna make a directory and it's gonna be called templates. And this is kind of a naming convention, this one you definitely have to follow. So I'm gonna make that first directory and as you can see here now, I have templates. So that's a good start. So now I wanna change my current directory and I wanna go into templates, and currently there's nothing in there. And I want to create another directory within here. So I want to create another directory and I'm going to name it News, and I'm gonna show you why in just a second. So now that I've done that I've created this kind of nested structure here where I have my news app within news-agg project. And then within there, I've created a templates folder, and then within templates, I have now created a news folder or directory as well. So now let's back out here a little bit, back to news-agg, so we're back up at the top project level now. And now what I wanna do is I wanna go back to my text editor. And you're gonna see now that I have templates and news and then nothing in here yet. Now, remember I'm specifying that within my articles list view I want to use the news slash articles list.html template. So I'm gonna come into that directory. And I'm going to create a new file, and let's save this. And I'm going to call this and make sure I'm putting this in the right place. Templates and news. And then within here, I want to name this as articles_list.html. So, let's go ahead and save that. Make sure everything is saved here and I think we are looking pretty good for the time being. And now what I want to do is, just out of curiosity, let's head back over to our terminal here and let's restart our servers. So we're gonna run server again. Everything is up and running. Now let's head back over to our web browser, and let's go ahead and refresh this guy. And now it's yelling at us a little bit because we've made a little bit of an oversight previously. Where now it's saying that we didn't actually return an HttpResponse object. And that was just a slight oversight in here. Within our view we have to not only execute the render function, but we also have to return the results. So let's go ahead and save that. Now we'll come back in here, and we'll refresh our page. And we get nothing. Voila. But that's maybe a little bit strange to you as you're starting to look at this. Why is there nothing here? Why am I not getting any data back? Well the reason we're not getting any data back is if we were to come into our text editor again and take a look at articles_list.html, there's nothing here. And that's exactly why we're not getting anything, is because technically speaking in our file here, in our html file, we're not actually specifying any html, so let's go ahead and fix that. So we're going to do some html here. We're just going to use some boiler plate code here. And I'm just going to say, hi there and then within my body I'll just put in a paragraph here. And we're just going to say, How's Django going?. Something like that. And then we'll just close this out and we'll save it. Now if I were to come back in here and refresh my browser, you're going to see now that I get hi there as my title and "how's Django going?" as the paragraph. So now you're starting to see the bits and pieces of the puzzle finally coming together. And let's just review that very quickly. So you can see here. From our project level within URLs, we specified this new URL when we see news at the beginning of that section of the URL, we want to go ahead and hand this off to news.url. So if we were to look into news, into URLs we'll see in here now that for everything that comes in here we want to specify the view found in views dot articles_list, which we see within views here. And we say whenever we use this view for the time being, we simply want to render that information using this new/articles_list.html file. And that's really the process all the way from bringing the request into our application through the URLs, into the views. And then ultimately presenting information to the end user, and this is all great but the problem here now is I don't want to just say hello. I don't want to just say how's Django going? I actually want to present some meaningful information to the end user like maybe some of our feeds or maybe some of our articles or something like that. That's what I ultimately want to get to and that's exactly what we're going to start to link in to all of this in the next lesson.

Back to the top