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

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Adding Dynamic Data

In the previous lesson, we created our first (rather boring) template. Now we will spice things up a bit by taking some dynamic data and passing it to the template so that we can actually show the end user some more interesting information.

2.6 Adding Dynamic Data

Now is the point in the course where we start to get to get to some more interesting topics. So now we have our template here, now it's time for us to actually start to use it and present some data. So how are we gonna do that? Well, the first thing that we're gonna do is we're gonna head back into our views. Because remember what I said, within Django applications, views are typically where your application logic is going to live. And so this is where we're gonna spend a little bit of time putting in a little bit of logic, just to get things started. Now the first thing that I wanna do, when it comes to presenting data to the end user, is I wanna go get that data. And where is that data right now? Well It's sitting off in our SQLite database in the form of two models that we created previously known as a feed and an article. And if you recall when we went in to the administrative section of the site I added a feed as well as an article associated with that feed. So what I wanna do now is I wanted to at least get some of that information and I want to present it to the user so they can at least see that there's some information there. So the first thing that I have to do is I'm going to use what's known in the world of Django as query sets. Now if you are unfamiliar with query sets, then I would definitely urge you to go back to my getting starting with Django course and review some of that information, but it's gonna be fairly easy to follow along with. So you're going to see that here in just a moment. Now what I wanna do is I want to get access to the article model that I created before. But before I can do that I actually have to import it here because right now at this particular point in the code in my views file here, it has no idea what an article is. So I need to go and I need to grab it from my models within my models file that I created. So from within there I want to import and for right now we're only gonna be worried about article. So I wanna import that. So once I've done that I can come down into my articles_list view and I can start to extract some of that information using query sets. So I'm going to say articles. So I'm going to assume that there's going to be more than one even though for the time we already know that there's only one. Or at least I've only created one. Are going to be equal to and now I can say Article. And I can request the objects that are associated with that model so that's going to reach into the database and grab that information out. So it's going to go and get all of the objects that are associated with that article model. And then what I wanna do is I want to just take that information, stick that into the articles variable here, and then I want to send that information over into my template. So how am I going to do that now? Well, it's pretty simple. If you recall now we added in this little {} at the end of our render function and that's what we're gonna use to to send information from our view into our template. So, the way that we do that is we specify a name, kind of think of it as almost like a dictionary or a series of key value pairs where I can give a name that's gonna be a key associated with some data and then a value with it. So, at this point I'm gonna say articles. That's gonna be my key. And then articles, the variable, the information stored in my variable, is going to be the value. So now I've created this kind of information bundle that's gonna be sent over into my template. So let's go ahead and save that. And just out of curiosity, let's head back over to our browser here. And let's see if anything has actually changed. And, it doesn't seem like anything has actually changed, and that's a good thing for now because nothing is failing at the time being. So, now we want to see if we can actually start to get that information that we're passing through, and present it to the end user. So let's jump back into our text editor again, and let's go into our templates, into news, and then into articles_list. And this is where we want to start to add some of this information to the screen. Now we know that we are technically talking about a series of pieces of information here, a collection of data. And in the world of HTML, that's typically going to use or be presented to the end user as a list. So that's what we wanna start with first. So instead of putting this paragraph in here with How's Django going?, which it's going well by the way, thanks for asking. What I wanna do now is I want to say, for all of those articles that I've passed in, I want to list them all or put them all in here to show to the end user. So I'm create an unordered list. And then within here, I am going to create a series of list items within here, but what I need to do is I need to loop through those articles. And so the way that we do that, is by using the {%}. So this is kind of the demarker that's going to say hey Django, I need to use the information that is being passed in from the view within this template. So think of it kind of similar to how you use the curly brackets or the mustache notation and maybe say Angular or Laravel, or other things like that where you start to glue these things together. So I'm gonna say, {% for article in articles %} because that's that name of that key of the information that I'm passing in from the view. For each one of those, I want to do something and what do I want to do? So for right now, I'm just gonna create a list item and then within here, I want to grab the title of that article that was there in my database. And I want to stick it in this list item. So I'm going to use {{ }} for this. So this means that we are simply going to present data. So the {{ }} mean presenting data. And then the {% means I want you to execute some sort of logic which is going to be our for statement here in this particular case. So what do I wanna do within here? I want to grab my, article., and I want to present the title here. And that's pretty much it. That's all I'm really going to need to do except for the fact that when I'm all done with executing my for loop here, I need to tell Django that I am done. So it's basically like beginning a loop and then stating explicitly that I'm done with my loop. So I'm going to do my open { }. Once again I'm going to need my % in here. Then all I need to do now is say I need to end the for. Because I started the for loop, now I need to end it. So let's go a head and save that. Let's come back to our browser and let's go ahead and refresh this and we got a little bit of a problem here. And this is an interesting error that you're gonna get sometimes if you start to use other people's code that might be doing things like filtering or doing other sort of ordering like that. And the problem that we've run into is if we head back into our code, and take a look at our views, we're going in here and we're saying give me objects. But what's actually happening here is, this is not returning the objects. This is actually returning an object that can go get the information for you, but it's not actually returning it. So what I wanna do here, is I want to get all, or I wanna use the all function to return all of that data in a meaningful way. So let's go back to our browser and let's go ahead and refresh this. And as you see now, I'm getting a list here. And I can actually go ahead and take a look at what's going on here behind the scenes. And I can inspect my element. And as you see here I have an unordered list, I have a list item, and I'm presenting the name of the article there that we have put into our database already. So this is a fairly good start. We're not getting too far yet. But we can start to play around with this a little bit more. Let's go ahead and come back into our template. And instead of just doing this. Let's make this a little bit more interesting, let's insert here a link. Now remember, I also have a URL that's associated with this article so I can say, I want to put in here article.url. So that's gonna be my href and now I can grab this information. I can cut it out of here, put it in my link. I can save this and head back over to my browser. I can refresh this and now as you can see this is going to go off to www.myarticleiscool.com, as you see down at the bottom of the screen. Although we know that's really not where we want to ultimately go. But you're starting to see how now I can store information in the database. I can retrieve it using query sets. I can then pass it over to my template using kind of a key value pair scenario. And then I can start presenting it to the end user simply using some curly brackets just like I have and maybe other web development technology. So we're starting to get a little bit closer to presenting some meaningful data to the end user. Now this is all fine and dandy and we can continue down this path. But at some point we're gonna want to add a little bit of pizzazz, a little bit of flair to our site to make it a little bit easier to look at. And the way that we're gonna do that is via some CSS files and ultimately by incorporating into our project, Bootstrap. So in the next lesson I'm gonna show you how we're going to be able to incorporate some static files and some Bootstrap into our site.

Back to the top