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

3.2 Add a Feeds List Page

Now it's time to actually show the user what our application is capable of. In this lesson, we will create a new feeds page to present all the loaded feeds to the user and provide links to get more information.

3.2 Add a Feeds List Page

Before we can actually start to add new feeds and get new articles onto our news aggregation site, it would be nice to be able to list all the existing feeds that we're currently aggregating onto this application. So, in order to do that, we're gonna do a couple of different things. We're gonna add a link on this page, up here in the nav bar. Or a couple links, depending on how you wanna do it, to a new page that's going to contain the list of current feeds that we're working with. So I think that's the first thing that we wanna do. So there's a couple different steps to this process, but it's gonna be somewhat similar to what we did before. So what we wanna do, is we wanna go into our articles_list.html file as you see here, and I'm gonna drop a little bit of code in here and so you can take a look at it. It's going to be right underneath this div class= navbar-header. And we're gonna come in here, and we're gonna drop this in. And this is gonna look very similar. This is gonna be another navbar. This is going to be a collapsible navbar. And in here we're gonna have an unordered list. So I'm gonna have two links going on here. I'm going to have the first one being the home, so I can go Home to view all the articles that are currently of importance, and then the second link here, the second list item, is going to be for the Feeds. So I'm gonna be able to take a look at all the feeds that I currently have to work with. Now the href in here for this particular link, is gonna look a little strange at first, and you're gonna see though, how this is going to work, because this is gonna happen over and over again, when you start to add links to pages using Django. So the first thing that we wanna do is, we're gonna say we're gonna run a bit of code here in this template. So we're gonna use the open curly bracket, percent sign, and then we're going to specify that we want to generate a URL, and this URL we wanna generate here, is gonna have a name of feed_list. Now what the heck does that mean, and where is that coming from? Well, nowhere as of yet, but, let's go ahead and save this anyway. We'll come back to Chrome, and let's try to refresh our page here. And you're gonna see a very common error that you can get, when you start to work with links and generating them in a Django website. This no reverse match. Now you might look at this and say, what the neck is that, and how do I get around it? Well, take a look at this and really soak it in, because when you're first starting to create these links in Django, this becomes very common. So basically what this means, is that you are trying to ask Django to generate a link or a URL for you, with a given name that currently does not yet exist within your application. So, what's actually happening here is I'm saying, I wanna generate a URL for this particular name to URL within my application, but that doesn't exist yet. So let's go ahead and copy that name. Let's come over into our URLs of our application, and take a look. As you see here, we already have a named URL in here, but it's articles_list, it's not what we had already tried to put in here via articles_list, we're talking about a different name. And actually let's change the name of this to be a little bit more conducive, or a little bit similar to what we're already working with, so we're gonna make it plural. So let's copy this. So the way that we fix this, is we're gonna start by creating the URL. So I'm gonna drop down another line here, and I'm going to do open and closed parentheses. We're going to create our pattern here that we're gonna match to, in just a second. We're ultimately gonna need to create a view, and this is gonna be feeds_list. And then we need to specify a name, and this name is gonna be exactly what we just said, out on the articles_list.html page, it's going to be feeds_list. So now back to this pattern that we're gonna look for, for this URL. Now, we can kind of start to go down any path we want, now remember, we're already at a point where we're using the news URL. So that's what we've already started to define within our project. So now at this point we're gonna say, we want this to be feeds, or we want this to start, so don't forget your caret, we want feeds/. So if we request the URL news/feeds, then I want to present to the end user a list of feeds, so let's go ahead and save that modification. Also, make sure that you save the change in our articles_list file here. So now, if we take a look in here, we're requesting the feeds_list view, which of course at this point doesn't yet exist, so we need to create that as well. And remember this is nothing more then a function, so I'm gonna go ahead and create feeds_list, this is going to take in a request. We need to go ahead and retrieve the information about the feeds. And so in order to do that, you have to make sure you are importing feed, as well as articles, so if you haven't already done that, go ahead and add that in. So now at this point, I need to go and say, I want to get the feeds and that's gonna be equal to feed.objects.all, so I want to get all the feeds that I currently have. And then I'm going to return the result of my render function again, passing in request, passing in the name of the template, in this case, this is going to be feeds_list.html, which remember, at this point does not exist. But then I also wanna be able to pass to it the feeds that I have retrieved. So I'm simply going to do that here, just like I did before, like that. So let's save that change. Now we have to deal with this template. So, I'm gonna do something that's probably not the smartest, not the best idea in the world, but we're gonna start with it, and then we'll kind of fix it up a little bit later. I'm going to grab this entire file, I'm gonna copy it, then I'm gonna come to news, I'm going to create a new file, and this time we're gonna be called feeds_list.html, and we're just gonna paste all of that in here. Now granted, this is all kind of at this point talking about the articles_list before, like we created in our previous files, so we're gonna have to make a slight modification, so we'll say this is going to be for all the feed in feeds, like that. Now we need to specify, we're talking about a feed.url, a feed.title, like that, so let's save that, and let's just change the jumbotron just a little bit here. We'll call this, News Feeds, and I suppose at this point we don't necessarily need to have a paragraph, so just kinda get rid of that for now, save. And now if we've saved everything, and made all the correct modifications, if I were to come back in here, refresh news, I should now get a home page. And if I click on Feeds, I should get a feeds page here as well. And as you can see, I'm starting to get a list here, which is good. So I get my blog, and down at the very bottom corner you see, www.myblogiscool.com, which is very nice. So now we're at a point where we can start to make some modifications, and actually get to a point where we can add in a form that we could use to get some new data. So let's head back over to our feeds page here. Now you can do this a number of different ways if you would like. At this point I think we can safely change the active list item to the feeds. And then maybe once we get into this point where we have done this, maybe on this page we'll add in a new link or something, to be able to add something new, so maybe above this list here, or below it or in any place you would really want. I'm just gonna create an anchor tag. And this anchor tag is going to, once again, link off to another page. So at this point I'm gonna wanna say, I want to do open and closed curly brackets with the percent sign, and I want to get a URL, and I wanna generate a URL this time for feed_new. So remember once again, this does not yet exist, but we'll get there. And then within here, we could do all sorts of different things. I'm actually going to create this to be a class of button, and then within here I'm going to say, New Feed, like that. So we'll go ahead and save that. So let's come back in here, and we will refresh. And once again this is not going to work, so that NoReverseMatch. Once again, you can see this is becoming a very common occurrence when you start to add in a request additional URLs. So we're gonna come back into our URLs, and we'll create another one. So we're gonna say url, this is going to be r, it's going to start with feeds and we'll say, /new. This is gonna be views.new_feed, and then we're gonna give this the name of feed_new. So let's go ahead and save that. And now it's not gonna know what new_feed is, so for the time being we're just gonna put a little something in here just to get by. So we'll say define new_feed, once again we're gonna be dealing with a request here. And for now, let's just put some placeholder information in here, so we're gonna say render(request, 'news/new_feed.html', and we'll say open and close, empty here. So let's just save that. So in order for this to actually finish and work, we're gonna have to copy this. We'll come into our templates folder here, we're gonna create a new file. We're gonna paste this in as new_feed.html, and let's just save that for now. So we'll come back here. Let's refresh this page. So now we're to the point where we can see our feeds, they're listed here, and we have a button here. We can play around with this a little bit if we want. And we can click on this, and you're gonna notice that nothing is happening. And while this might be a little bit frustrating, it's not actually an error, but it's once again another common occurrence. So if I come back into my text editor here, and I take a look at my URLs, you're going to notice that we're kind of going from the widest kind of catch all, to the slightly more specific more narrow view. So, the thing that's actually happening here, is that it's actually matching on this first URL. Because technically speaking, the URL that we're dealing with here does begin with feeds/ and then it's saying, okay well that matches this URL, so let's just give it this feeds_list and be on our merry way. Well, the problem that you're gonna run into, is that you need to put the more specific URLs, especially if they start and are kind of similar, you wanna list those first. So I'm gonna grab this URL here, and I'm actually going to reorder these a little bit, like so, just so that the more specific one feeds/new is before the more generic feeds/, so let's save that. We can come back in here, and we can refresh new, and you're gonna see we get nothing, which is kind of what we would expect, because we went in here and created this new template called, new_feed, and there's nothing in here. And that's what we would expect to see, would be a blank page. Now, in the next lesson, we're gonna start to generate a form that we can use to add in a new feed, and then I'm gonna start to show you how we can bring in new articles and save them into our database.

Back to the top