4.2 Format the Articles Page
Technically we have done what we set out to do by presenting the articles to the user. But it still looks a little dull. In this lesson, we will restructure the way we get articles from the database, and we'll use some nice Bootstrap functionality to make it all look a little more like a newspaper.
1.Introduction3 lessons, 14:42
2.Foundations6 lessons, 47:44
3.Add Structure6 lessons, 52:54
4.Clean Up3 lessons, 16:58
5.Conclusion1 lesson, 01:23
4.2 Format the Articles Page
Now we're at a point where we are presenting some data to the end user. But it's a little ugly. We're just kinda doing an unordered list here. And while that is going to work, I think ultimately we're going for something maybe a little bit better. So I'm gonna show you a little bit of a trick that you can use to give this more of a news papery feel, if you want. Maybe a multi-column, like a two-column kind of feel to it. So, you can kinda maybe scroll down through the list and read different articles and go and see and get more information about them, if you wish. So, this is gonna be a two-pronged change. So, we're gonna have to come into our text editor, and once we're in here, we're gonna have to make changes in a couple different places. We're gonna have to go into our views to start because ultimately when we try to go view the articles, this is the view that we're going into the articles list. And right now, all we're doing is we're grabbing all the articles and returning them to this render function that's ultimately going to marry them with our articles_list template. Now that works, but I think what we'd like to do is go down the path of saying we're gonna have multiple rows of information on our page. So why don't we treat the data that way as well. So, the first thing that I wanna do is basically split these articles up into kind of a multidimensional array if you wanna think of it that way. So it's kind of similar to something like that. So I wanna create some rows, basically. Now depending on how you wanna structure this, you can make these rows have maybe two or three different columns in them. I'm gonna stick with two just to keep it simple here. So I'm gonna create an array, and I'm going to create articles. And I'm gonna dig into articles, and I'm gonna kinda slice these suckers up, into a very small chunk. So I'm only going to make these, this inner list, this inner array, two pieces long. So I'm gonna create this using for x in, I'm gonna create a range, and that range is gonna start at 0. It's gonna go up to the length of article, so however many articles, and we're gonna take a step of one each time. So, basically, all I'm doing here, is I'm gonna create a bunch of different groups or rows of two articles each within a new list. So that's kinda what I'm doing here, so I'm gonna save that. Instead of returning articles now, I'm gonna return rows, so this is gonna be the different rows that we want to display to the user. So now we're gonna go over to article list and we need to change our template here just a little bit to accommodate for this new change. So here's our unordered list and I'm gonna get rid of this now and I want to put in a different structure here. So using bootstrap, there's a couple different classes that you can use to create that kind of multi-column look and feel and this is basically how it's going to go. We're gonna create a little bit of code in here, we're gonna do a couple different for loops. We're gonna say for row in rows. So we wanna loop through all the rows to begin with. And then we're gonna make sure that we come down and we do endfor. So within here, we're gonna create a series of divs each time we go through this loop, this outer loop. And this outer loop is going to create a div that's gonna have a class of col- md-6, which basically means this is going to be a column that is going to be 6 units wide. So if you think of an entire page on your browser as being 12 units wide, this is gonna take up half. So I'm gonna split up the page into two halves. So now within here, within each of these rows, if you would like to think of it that way, I want to create two news entries, one on each side. So we're simply going to create another for loop. And this for loop is going to say, for each entry in row, because we know that there are two articles in each row because that's the way we wrote it. And we're gonna make sure that we do our endfor as well again. And now within here, each time we do this we're gonna create an h2 tag, and within this h2, we want to use the entry title. So we're gonna use entry.title, so that's gonna put the title of that article on the top of the entry. And then we're gonna create a couple different paragraph tags here, so we'll do a paragraph here, and the first paragraph is going to contain the description. And you're gonna see here in a moment, this is gonna cause a little bit of a problem, but it's an interesting problem to have. We're gonna create another paragraph tag and in this case, we actually want to create an anchor tag in here. So we'll create an anchor tag, which the h ref is going to simply be entry.url. So we can link off to the actual article itself if there's additional information. Because in some sites, they're gonna contain the entire article basically in the description, but some of them won't. Some will only use it as a description. So you might want to actually link off to the actual full article so you can continue to read. But I don't want them to leave my site necessarily. So I'm gonna say, I want the target to be blank so that'll make it either a new tab or a new window and then we'll just give this some formatting. We'll just say class is gonna be btn btn-primary, and then we're just gonna say here View Details, like that, and we'll save it. So now we're gonna create these different rows, and each time we're in a row, we're gonna do each entry in a row and we're gonna display the title, the description and then a button that's going to ultimately link out to another page. So let's go a head and save that. So now if we come back over to our news site and I refresh this, we're getting a little bit more formatting here, and now granted, my article here probably doesn't belong here, we could get rid of that. But if we start to scroll down here, you're gonna see now we're getting this two column effect with a bunch of different articles in here, so this is kinda cool. We're getting there. There's definitely a lot more work that you could do with this and really clean it up a little bit better, but it's functional and I can click on these and it'll take me to the actual articles, then I can go back and keep reading. But what you'll notice in this case is that these articles, in their descriptions, they actually contain formatted HTML. So what I'm seeing here is I'm seeing a paragraph tag, I'm seeing some divs, I'm seeing some h3, so there's definitely some formatting going on in here. And if you'd like to take that information and honor it as part of your web page too. So basically taking the HTML that's within this description and kind of inserting it into your HTML dynamically on the page, you can absolutely do that. So the way that you're gonna do that is by coming over to your text editor and you're gonna come into entry.description and we're going to apply a filter. And this filter we apply uses the pipe symbol and then we give it the name and the name of the filter is called safe. Which is saying I am agreeing to say that the information that's found within this property, or within this data, is safe to be inserted into my page as HTML. Now, obviously, this is something that you would wanna be very careful with, because you could run into some security problems just by inserting random HTML from random sources onto your site. But for this particular case, we're simply learning and I wanna show you how you can do this, and I am using a reputable source, namely the Django Project. So I'm gonna save that, and if I come back in here and I refresh this, now all of a sudden we get that formatting and we're able to see all these nice articles here formatted using lists and anchor tags and headers and all sorts of good stuff. So I can come in here, and I can read all the different information we see on these different articles. So that's a nice little modification, a little bit of an upgrade, I would say, from what we were dealing with before. So now we've got a little bit of a newspaper feel to this and I think that's probably good as far as functionality goes about presenting this data to the end user. But before I let you go, there's one additional change that I would like to make that I wanna show you how you can do as well and that's gonna be, if I were to come into my feeds here. And since I already have the Django weblog in here. If I were to try to re-add this. So if I were to come in here and grab this information and come back. If I were to add this new feed and paste this in here, I'm gonna get a bunch of duplicate information because there's nothing stopping me from doing that. So, if I were to enter this in here again, I'm gonna get duplicate information. So, I don't want that to happen. So, in the next lesson, I'm gonna show you how to check for this information to see if it's already there. So to try to avoid duplicates.