1 00:00:00,650 --> 00:00:04,450 Hi, in this video we are going to add the home page 2 00:00:04,451 --> 00:00:08,532 and show a list of Blog Posts in that home page. 3 00:00:08,533 --> 00:00:12,932 So let's start again from the user's point of view. 4 00:00:12,933 --> 00:00:19,733 So we want to have for the user, an index.html template. 5 00:00:21,166 --> 00:00:28,310 With a !DOCTYPE, html tags and body tags. 6 00:00:30,090 --> 00:00:33,804 Then, what do we put in here? 7 00:00:33,805 --> 00:00:37,458 Well, so tags with curly 8 00:00:37,459 --> 00:00:41,433 brackets and percentage symbols. And then, 9 00:00:43,233 --> 00:00:49,066 this time what we do is, a for loop for 10 00:00:49,970 --> 00:00:57,028 post in post_list. And then we do something here and then 11 00:00:57,029 --> 00:00:59,333 we end that loop, 12 00:00:59,334 --> 00:01:01,800 [No Audio] 13 00:01:01,801 --> 00:01:06,696 endfor. Inside here we do something else. 14 00:01:06,697 --> 00:01:08,680 I'll explain you what post_list 15 00:01:08,681 --> 00:01:10,740 is, and what post is also. 16 00:01:11,670 --> 00:01:14,344 But basically then we have the variables here, 17 00:01:14,345 --> 00:01:23,800 which could be post.title and post.content. 18 00:01:25,210 --> 00:01:28,188 And maybe no post.content would be too 19 00:01:28,189 --> 00:01:32,438 much to show, but we could say author. 20 00:01:32,439 --> 00:01:34,822 So this will be just a list of blocks. 21 00:01:34,823 --> 00:01:37,088 We don't want to show the content in 22 00:01:37,089 --> 00:01:39,020 that list, because it would be too much. 23 00:01:39,630 --> 00:01:42,170 So post.title, post.author. 24 00:01:42,171 --> 00:01:45,668 Now, what is post_list? 25 00:01:45,669 --> 00:01:49,092 post_list is a view, which we 26 00:01:49,093 --> 00:01:52,110 need to define in views.py. 27 00:01:52,870 --> 00:01:58,936 So yet another view class, class PostList. 28 00:01:58,937 --> 00:02:01,544 So the name has to be in the same 29 00:02:01,545 --> 00:02:05,916 format, so to say as this one in here. 30 00:02:05,917 --> 00:02:08,235 So we used post_list 31 00:02:08,236 --> 00:02:11,410 in here, with lowercase letters. 32 00:02:11,411 --> 00:02:16,076 Now we need to use Post in Camel case list. 33 00:02:16,077 --> 00:02:19,872 So P and L are uppercase, so 34 00:02:19,873 --> 00:02:25,420 that inherits from generic.ListView. 35 00:02:25,433 --> 00:02:27,790 [No Audio] 36 00:02:27,791 --> 00:02:30,436 So this is yet another type of view. 37 00:02:30,437 --> 00:02:35,130 We had DetailView to render HTML 38 00:02:35,131 --> 00:02:38,260 templates, that get data from a model. 39 00:02:38,261 --> 00:02:40,250 We had a TemplateView to render 40 00:02:40,251 --> 00:02:43,048 HTML templates, without data from a model. 41 00:02:43,049 --> 00:02:46,776 And we have this ListView, which is specialized in 42 00:02:46,777 --> 00:02:51,742 rendering multiple data rows, in this case multiple Posts. 43 00:02:51,743 --> 00:02:56,200 Now, this type of class expects a queryset variable, 44 00:02:56,201 --> 00:02:59,720 which should be equal to Post. 45 00:03:00,250 --> 00:03:02,316 Post is the model. 46 00:03:02,317 --> 00:03:03,692 So be careful here. 47 00:03:03,693 --> 00:03:06,636 It's not the View, it's not 48 00:03:06,637 --> 00:03:08,480 BlogView, it's not AboutView. 49 00:03:08,481 --> 00:03:11,926 Of course it's the model of blogs 50 00:03:11,927 --> 00:03:15,864 which you can find, inside models.py. 51 00:03:16,400 --> 00:03:20,788 Suppose that model is the one we refer here. 52 00:03:20,789 --> 00:03:24,602 What we're trying to do here is, we're 53 00:03:24,603 --> 00:03:29,402 trying to query the objects, so the rows 54 00:03:29,403 --> 00:03:32,858 of that post model. Without the parentheses, 55 00:03:32,859 --> 00:03:37,512 we want to apply a filter and get, maybe get all the 56 00:03:37,513 --> 00:03:42,296 objects, maybe apply a filter such as status equal to 1, 57 00:03:42,297 --> 00:03:45,612 which stands for, let me show it to you. 58 00:03:45,613 --> 00:03:48,364 So status, we are talking about this field. 59 00:03:48,365 --> 00:03:53,682 So we want those Posts, those Blog Posts 60 00:03:53,683 --> 00:03:57,186 which have a value of one for status. 61 00:03:57,187 --> 00:04:01,248 So STATUS has either 0 or 1. 62 00:04:01,249 --> 00:04:04,518 So 1 stands for Publish, 0 stands for Draft. 63 00:04:04,519 --> 00:04:06,416 So we want to show there 64 00:04:06,417 --> 00:04:09,366 only those Posts, which are Published. 65 00:04:09,367 --> 00:04:12,324 So a status value of 1. 66 00:04:12,325 --> 00:04:19,360 And perhaps you want to order them by what field? 67 00:04:20,690 --> 00:04:23,490 So we have date_created, perhaps. 68 00:04:23,500 --> 00:04:25,910 [No Audio] 69 00:04:25,911 --> 00:04:29,670 So date_created. 70 00:04:29,671 --> 00:04:32,456 So that is a relationship with the 71 00:04:32,457 --> 00:04:36,130 modules and the relationship with the templates, 72 00:04:36,131 --> 00:04:46,840 now is template_name equal to index.html, alright. 73 00:04:47,390 --> 00:04:52,416 So we built the template, which looks like this. 74 00:04:52,417 --> 00:04:55,648 We built the view, but we need 75 00:04:55,649 --> 00:04:59,632 to do something with the urls also. 76 00:04:59,633 --> 00:05:02,596 So we have one item here, two items here. 77 00:05:02,597 --> 00:05:05,252 We need a comma here and add a 78 00:05:05,253 --> 00:05:08,916 third item, which is the home page. 79 00:05:08,917 --> 00:05:11,710 So an empty string. 80 00:05:13,430 --> 00:05:16,648 And we want to get from views, we want 81 00:05:16,649 --> 00:05:22,260 to get, for the Postlist vew, PostList. 82 00:05:23,190 --> 00:05:27,850 PostList is a class, so we want to get it as a view. 83 00:05:27,851 --> 00:05:32,652 So call the method as_view from PostList and 84 00:05:32,653 --> 00:05:35,960 give it a name such as home. 85 00:05:37,470 --> 00:05:40,416 Now I think we are ready to try out 86 00:05:40,417 --> 00:05:44,590 the browser and go and visit the home page. 87 00:05:44,591 --> 00:05:47,168 But first make sure you save everything. 88 00:05:47,169 --> 00:05:55,570 This one, the urls.py file, the index.html file and the views.py file. 89 00:05:55,571 --> 00:05:58,756 Save those and see if the app is running, 90 00:05:58,757 --> 00:06:00,450 Yeah, it's running. 91 00:06:00,451 --> 00:06:05,750 So visit the home page and, it's working. 92 00:06:05,751 --> 00:06:09,480 So Dogs ardit, Cats ardit. 93 00:06:09,481 --> 00:06:13,406 Yes, these are the two Blog Posts, 94 00:06:13,407 --> 00:06:16,572 not very appealing, but you can 95 00:06:16,573 --> 00:06:19,090 change that with some HTML. 96 00:06:19,091 --> 00:06:25,266 For example, you may want to put the title inside h2 tags 97 00:06:26,600 --> 00:06:33,130 here, and the author perhaps in p tags. 98 00:06:33,133 --> 00:06:35,550 [No Audio] 99 00:06:35,551 --> 00:06:36,816 So in here, 100 00:06:36,817 --> 00:06:39,500 [No Audio] 101 00:06:39,501 --> 00:06:40,633 save, 102 00:06:40,634 --> 00:06:44,633 [No Audio] 103 00:06:44,634 --> 00:06:47,412 reload and it looks a bit better. 104 00:06:47,413 --> 00:06:52,916 Now the ordering of this, is that, the older Posts are 105 00:06:52,917 --> 00:06:56,792 on top and the newer posts are at the end. 106 00:06:56,793 --> 00:06:59,912 So if you want to change that, it's very easy to do. 107 00:06:59,913 --> 00:07:04,280 Just go over to views.py and 108 00:07:04,281 --> 00:07:10,150 you want to change the queryset, the order by, by just adding a minus. 109 00:07:11,770 --> 00:07:15,532 So this is the Django syntax, and then refresh here, 110 00:07:15,533 --> 00:07:16,892 and Cats will be on top. 111 00:07:16,893 --> 00:07:19,740 Now, the newest Blog Post. 112 00:07:20,510 --> 00:07:23,376 So this is looking good, but I think 113 00:07:23,377 --> 00:07:26,016 there are two things missing in here. 114 00:07:26,017 --> 00:07:30,212 One is that each of these should have a link that 115 00:07:30,213 --> 00:07:34,690 the user can click, and go to that particular Blog Post. 116 00:07:34,691 --> 00:07:38,810 And second, what is missing here is some styling. 117 00:07:38,811 --> 00:07:41,650 So this looks pretty awful. 118 00:07:41,651 --> 00:07:44,468 We need to apply some styling and we're going to 119 00:07:44,469 --> 00:07:48,666 use Bootstrap for that, which is a CSS library. 120 00:07:48,667 --> 00:07:53,364 And it just makes things, so web pages look much better. 121 00:07:53,365 --> 00:07:55,602 So next we are going to add a URL 122 00:07:55,603 --> 00:07:57,858 here, which has to do with URL tags. 123 00:07:57,859 --> 00:08:00,146 So you're going to learn how to use URL tags. 124 00:08:00,147 --> 00:08:04,300 And then next, we add some Bootstrap styling, see you.