1 00:00:05,120 --> 00:00:10,780 In the previous lecture recreate a view to show all of the blog posts that a user has now this clinic 2 00:00:10,810 --> 00:00:12,240 that view to a template. 3 00:00:12,550 --> 00:00:16,280 Let's head over to our text editor or a we're back at the text editor. 4 00:00:16,300 --> 00:00:21,640 Previously we had created this user posts view and we also want to show you how we can actually keep 5 00:00:21,640 --> 00:00:26,060 track of the pages so we don't show all the blog posts on a single viewing. 6 00:00:26,230 --> 00:00:28,390 Instead we can go through them with pages. 7 00:00:28,390 --> 00:00:35,560 So I'm going to expand the left hand tab here and underneath my templates or create a new file and will 8 00:00:35,560 --> 00:00:40,630 call this user underscore blog underscore posts. 9 00:00:40,690 --> 00:00:47,230 H Tim L so that it matches the actual render template command that I had in that views that py file. 10 00:00:47,440 --> 00:00:50,640 So it matches here user blog postdates T-Mo. 11 00:00:51,040 --> 00:00:51,640 OK. 12 00:00:51,830 --> 00:00:53,680 Not going to collapse this. 13 00:00:53,710 --> 00:00:57,740 And let me zoom in a little bit so we get a clearer idea of what we're doing. 14 00:00:57,790 --> 00:01:05,890 We'll start off the basics which just means extending that base h T.M. and then we'll say block contents 15 00:01:06,480 --> 00:01:09,680 and we're going to start off by just creating kind of a welcome thing. 16 00:01:09,680 --> 00:01:17,190 So I'll say give a container and then create a little Jumbotron that contains some walking material. 17 00:01:18,010 --> 00:01:19,990 And we'll also want to align everything here. 18 00:01:20,010 --> 00:01:23,900 So I'll say a line is equal to center. 19 00:01:23,990 --> 00:01:29,100 This is going to look really similar to the account page will say H-1. 20 00:01:29,300 --> 00:01:31,230 Welcome to the page 4. 21 00:01:31,640 --> 00:01:33,710 And in this case we're not looking at the current user. 22 00:01:33,710 --> 00:01:37,840 We're just looking at any particular user here take a look back at views up high. 23 00:01:37,880 --> 00:01:40,220 Remember we're looking out for Slash user. 24 00:01:40,280 --> 00:01:42,390 So we come here that's the user that's here. 25 00:01:43,490 --> 00:01:46,780 So say user thought username. 26 00:01:46,860 --> 00:01:49,900 So again take a look at this. 27 00:01:50,090 --> 00:01:53,590 If we look back at the view we're passing in this user right here. 28 00:01:53,590 --> 00:01:59,130 So it's the user that we actually queried using this line 90 coming back. 29 00:01:59,120 --> 00:02:01,810 Here we have that user user name. 30 00:02:01,910 --> 00:02:03,850 And then let's grab their image. 31 00:02:04,030 --> 00:02:12,190 So we'll create an image tag and the source is going to be Yoro for all we're going to grab from the 32 00:02:12,190 --> 00:02:13,260 static whoops. 33 00:02:13,440 --> 00:02:21,260 We do that right from the static folder the file name are going to be looking at is under profile pics 34 00:02:21,980 --> 00:02:29,930 forward slash concatenated with that user's profile image string OK. 35 00:02:30,030 --> 00:02:32,150 And we all have an alternative. 36 00:02:32,310 --> 00:02:34,140 We'll just have that done. 37 00:02:34,140 --> 00:02:35,090 So here's an image. 38 00:02:35,100 --> 00:02:40,630 It goes head looks in the static folder under profile pics grab that profile image. 39 00:02:40,640 --> 00:02:47,240 Next up we're going to do is actually use some template syntax here a little bit of logic to go through 40 00:02:47,240 --> 00:02:50,970 those blog posts and way we're going to do that is create a little for loop here. 41 00:02:51,020 --> 00:03:00,590 I'll say for post in blog posts and we actually can't just say blog posts like this because we take 42 00:03:00,590 --> 00:03:05,460 a look back at the views that Hi-Fi all the blog posts that are being passed in here. 43 00:03:05,510 --> 00:03:10,340 This is actually a specialized object that's being passed back and we actually just want to grab what's 44 00:03:10,340 --> 00:03:18,250 known as the items off of this query so what we'll do here is let's say in block posts thought items 45 00:03:18,860 --> 00:03:24,470 so that allows us to actually loop through the individual blog posts and then here we can present the 46 00:03:24,470 --> 00:03:26,540 blog posts how we prefer. 47 00:03:26,570 --> 00:03:29,950 Second make a little header too with an anchor tag. 48 00:03:31,870 --> 00:03:39,700 Make the anchor again with an anchor tag here and the ATRA is going to be the URL for that particular 49 00:03:39,860 --> 00:03:40,470 post. 50 00:03:41,870 --> 00:03:49,180 So Hirose blog posts the blog post and that's a view that we're going to be making later on. 51 00:03:49,370 --> 00:03:54,560 And we also provide a blog post ID to make sure we actually link to the correct blog post so we'll see 52 00:03:54,590 --> 00:03:58,340 blog posts ID as equal to post ID. 53 00:03:58,400 --> 00:04:02,460 Now we haven't really created any views or templates for our blog post. 54 00:04:02,630 --> 00:04:05,340 So this link right here is going to make a lot more sense. 55 00:04:05,340 --> 00:04:06,960 We actually create those views. 56 00:04:06,980 --> 00:04:12,650 Basically we're going to have is underneath the blog post to set that up as a blue print and we'll have 57 00:04:12,650 --> 00:04:18,620 a view called a blog post which essentially connects using a post ID so that allows you to then click 58 00:04:18,710 --> 00:04:22,410 and view an individual blog post instead of viewing all of them at once. 59 00:04:22,430 --> 00:04:27,470 So that's the two that's going to be displayed here and we'll just play the title of that blog post 60 00:04:27,800 --> 00:04:34,510 as the actual text for the anchor to say enter the post-Idol right. 61 00:04:34,530 --> 00:04:38,200 So that's the header to zoom out so we can see the whole picture. 62 00:04:38,210 --> 00:04:43,690 This all essentially is going to display the title and that will link to the specific blog posts individual 63 00:04:43,690 --> 00:04:47,920 page that will say something like written by 64 00:04:51,390 --> 00:04:55,230 and then we'll insert an anchor tag for the actual author. 65 00:04:55,300 --> 00:05:01,110 So here will say Post the author thought username. 66 00:05:01,120 --> 00:05:06,520 So every blog post has an author that's basically just the user and they will grab that username should 67 00:05:06,520 --> 00:05:09,940 match the ST username as here and then we'll do the following. 68 00:05:09,940 --> 00:05:17,280 We'll say a Tref you are all for and we'll link to that actual user. 69 00:05:17,310 --> 00:05:27,320 So say you're up for users thought user underscore post and then here will say that the username is 70 00:05:27,320 --> 00:05:29,140 equal to post. 71 00:05:29,490 --> 00:05:32,230 The author thought username. 72 00:05:32,760 --> 00:05:33,080 OK. 73 00:05:33,110 --> 00:05:36,450 So that essentially links to that particular author page. 74 00:05:36,860 --> 00:05:40,070 And then there's one more thing we're going to display for every single blog post. 75 00:05:40,180 --> 00:05:43,900 And that's just going to be the publication day as well as the text. 76 00:05:43,910 --> 00:05:50,960 So say paragraph let's go ahead and have it kind of have a nicer class so we can make it a bit muted. 77 00:05:51,110 --> 00:05:54,290 You can say text muted bootstrap class you can play around with that. 78 00:05:55,690 --> 00:06:03,570 We'll say published on and then we'll just grab that post dates and then we can format the time using 79 00:06:03,720 --> 00:06:05,800 as TRF time. 80 00:06:05,970 --> 00:06:07,830 And you could pass in any format you want. 81 00:06:07,830 --> 00:06:14,670 You can check out the formatting codes online just google format plus SDR time to understand what these 82 00:06:14,670 --> 00:06:15,160 codes mean. 83 00:06:15,160 --> 00:06:23,880 But basically I'm going to have the year dash the month dash and then the day sort of have it display 84 00:06:23,880 --> 00:06:34,480 the publication that will create a break and will show the text so we can say post the text. 85 00:06:36,050 --> 00:06:38,230 And then will create another break there. 86 00:06:38,610 --> 00:06:39,060 OK. 87 00:06:39,250 --> 00:06:44,680 So essentially for every single blog post we're going to show the title linked to that particular individual 88 00:06:44,680 --> 00:06:48,880 blog post view which we haven't actually created yet but we will soon. 89 00:06:49,070 --> 00:06:54,650 Then right below that you'll see the post author which is going to link for that actual user post and 90 00:06:54,650 --> 00:06:56,340 then we'll see the published on. 91 00:06:56,680 --> 00:06:58,420 And then we'll post some text. 92 00:06:58,700 --> 00:06:59,030 Okay. 93 00:06:59,060 --> 00:07:00,890 And then we have a break here after this. 94 00:07:00,910 --> 00:07:04,280 That way there's a break between every single blog post. 95 00:07:04,330 --> 00:07:11,820 So after that we're going to do is actually set up our page capabilities. 96 00:07:11,860 --> 00:07:14,470 So we have that and for make sure we have that as well. 97 00:07:14,730 --> 00:07:17,420 And in fact let's put all of this in the blog post. 98 00:07:17,440 --> 00:07:21,760 Inside of that container Sherman we have this container and that's this right here. 99 00:07:21,790 --> 00:07:26,100 Do you kind of select your cursor you should see the div underlining highlighting it. 100 00:07:26,360 --> 00:07:28,780 I'm going to cut this and then paste it after this. 101 00:07:28,780 --> 00:07:32,320 And for that way this for loop happens inside that container. 102 00:07:32,360 --> 00:07:33,630 Everything is nice and centered. 103 00:07:34,960 --> 00:07:42,750 So before the end block though I want to add in the capabilities for page navigation and the way you 104 00:07:42,750 --> 00:07:47,150 do this is essentially copy paste pasted from the bootstrap documentation. 105 00:07:47,160 --> 00:07:49,740 The hard part is actually doing the view code. 106 00:07:49,920 --> 00:07:56,420 So remember back on our views we have these two lines of code line 89 and line 91 to do this page an 107 00:07:56,430 --> 00:07:57,750 8 or pagination. 108 00:07:57,830 --> 00:08:06,600 We're going to do is using the documentation is we bring in over here real quick if you come over to 109 00:08:06,630 --> 00:08:12,780 components and then go to page nation you'll see some examples so you'll see all the examples here and 110 00:08:12,780 --> 00:08:14,690 the different class calls you have to make. 111 00:08:14,700 --> 00:08:20,520 So if I zoom in now you can see that there's different classes of page items and page links and you 112 00:08:20,520 --> 00:08:21,810 can work with these different icons. 113 00:08:21,810 --> 00:08:25,860 There's lots of different ways you can do this but that's essentially where these class calls and where 114 00:08:25,860 --> 00:08:28,050 the overall structure is coming from. 115 00:08:28,140 --> 00:08:32,080 A lot of this I'm just copying and pasting from the actual documentation. 116 00:08:32,100 --> 00:08:36,450 And in fact I'm really going to just be copying pasting from this first example right here where we 117 00:08:36,450 --> 00:08:40,350 have these labels and this class and these page item links. 118 00:08:40,410 --> 00:08:43,360 So keep that in mind if Ffion actually referenced where I'm getting this from. 119 00:08:43,380 --> 00:08:48,550 It's essentially just from the documentation of bootstrap go down to page nation OK. 120 00:08:48,770 --> 00:08:50,160 So that's right it's ago. 121 00:08:50,330 --> 00:08:51,950 Let's go ahead and fill that out. 122 00:08:53,230 --> 00:09:02,600 So again kind of come back to user Blackhurst say Ario label and set that equal to. 123 00:09:02,750 --> 00:09:09,320 And here this is such as copy and paste it was call it page navigation example. 124 00:09:09,380 --> 00:09:15,350 So we create an unordered list and the unordered list is going to have a particular class call to work 125 00:09:15,350 --> 00:09:16,400 with bootstrap. 126 00:09:16,520 --> 00:09:23,800 We're going to say page nation and they will say justify content center. 127 00:09:23,870 --> 00:09:27,870 So it appears at the center that way it's not all the way to Lefter all the way to the right. 128 00:09:28,370 --> 00:09:30,770 And you can check that out also in the Flast documentation. 129 00:09:30,770 --> 00:09:33,710 They have a nice link and it's linked to you in your notes. 130 00:09:33,710 --> 00:09:36,390 There's a little snippet of code there that I got it from. 131 00:09:36,470 --> 00:09:40,370 And then for the unordered list I'm going to create the pages. 132 00:09:40,370 --> 00:09:42,280 So this requires another for loop. 133 00:09:42,360 --> 00:09:43,660 And this was a little more complicated. 134 00:09:43,670 --> 00:09:54,430 So I'm going to say for page number in blog posts dots and because blockhouses kind of the specialized 135 00:09:54,430 --> 00:09:56,040 object that we're passing back. 136 00:09:56,170 --> 00:10:04,150 Not only can we call items from it but we can also call the specialized method of itor underscore pages 137 00:10:05,020 --> 00:10:09,100 and you can check out the link in the flask documentation for more information about this. 138 00:10:09,270 --> 00:10:14,770 So you can provide different parameters to decide how much of a left edge and right edge you want to 139 00:10:14,770 --> 00:10:20,200 actually provide for the number of pages because maybe if you have 1000 blog posts you don't want to 140 00:10:20,200 --> 00:10:25,050 have if you only are showing 5 blog posts per page so many numbers at the bottom. 141 00:10:25,090 --> 00:10:30,020 You may only want to kind of show two to the left to the current one and then to the right. 142 00:10:30,040 --> 00:10:32,370 So these are the kind of parameters you can adjust. 143 00:10:32,410 --> 00:10:36,820 You won't be creating so many blog posts but I want to show you the parameters and keys you want to 144 00:10:36,820 --> 00:10:42,010 mess around with them so we can give a left edge of one to see one item or one number on the left hand 145 00:10:42,010 --> 00:10:53,260 side and same we can give it right edge of one and then we can say left Currence of 1 and then right 146 00:10:53,290 --> 00:10:56,510 Currence equal to 2. 147 00:10:56,510 --> 00:11:00,140 Keep in mind we're not really going to have enough blog posts otherwise we have to keep making them 148 00:11:00,170 --> 00:11:03,900 over and over again to really take advantage of these parameters. 149 00:11:03,920 --> 00:11:09,230 You can check out the documentation for it or pages to get a better understanding of how these parameters 150 00:11:09,290 --> 00:11:14,650 actually work in conjunction with these bootstrap classes of showing the numbers. 151 00:11:14,660 --> 00:11:19,340 Essentially what this is going to do is at the end of the day it decides how many numbers you see at 152 00:11:19,340 --> 00:11:23,660 the bottom the just two numbers left the such number and then two numbers in the right. 153 00:11:23,710 --> 00:11:26,690 Or do you see maybe 10 numbers in total etc.. 154 00:11:26,870 --> 00:11:30,350 So you can mess around these parameters to justify that. 155 00:11:30,750 --> 00:11:35,360 OK so we're going to save for page number and then we'll have an if statement. 156 00:11:36,320 --> 00:11:44,910 Will say if the blog posts page is equal to the page number. 157 00:11:45,060 --> 00:11:52,120 So what that means is if I'm currently on the same page of this blog post as I'm looking at so kind 158 00:11:52,120 --> 00:12:00,320 of the number I want filled in what I'm going to do is create a specialized list saw create a list item 159 00:12:01,610 --> 00:12:06,920 this list item is going to have a class called Page cash item. 160 00:12:07,280 --> 00:12:12,830 This table and the reason they have it as disabled is it's going to look like you can't click on it 161 00:12:12,890 --> 00:12:15,010 because that's the current pager on. 162 00:12:15,230 --> 00:12:21,950 So all this statement doing says hey if you're on the current page that actual number in this page is 163 00:12:21,950 --> 00:12:24,910 going to look disabled so you can't click on it which kind of makes sense. 164 00:12:24,950 --> 00:12:28,850 You don't want to have them click on it and then keep refreshing the page so they only be able to click 165 00:12:28,850 --> 00:12:30,250 to the left or to the right of it. 166 00:12:30,500 --> 00:12:36,380 So inside of the service tag we're going to create an acre site and that's also going to have its own 167 00:12:36,380 --> 00:12:36,860 class. 168 00:12:36,890 --> 00:12:37,810 So let's set that up. 169 00:12:38,750 --> 00:12:47,130 Well say class is equal to page Ashley and then the H ref here before we do that let's fill in what 170 00:12:47,130 --> 00:12:47,730 this is going to be. 171 00:12:47,730 --> 00:12:56,230 It's just going to be the page number so say page thumb and then a Tref is going to be your URL for 172 00:12:57,760 --> 00:12:59,100 will say users. 173 00:13:00,380 --> 00:13:10,770 User posts and then the user name is equal to user the user name and page is equal to page underscore. 174 00:13:11,870 --> 00:13:12,340 OK. 175 00:13:12,650 --> 00:13:18,800 So what's that doing is going to link to the correct page number and all of this is happening in conjunction 176 00:13:18,800 --> 00:13:22,690 of the special three lines of code that we set up here in our views. 177 00:13:22,700 --> 00:13:27,410 So basically this page parameter and this blog post parameter. 178 00:13:27,450 --> 00:13:33,250 So now we have the kind of presentation it's going to look like if you're actually on the same page. 179 00:13:34,450 --> 00:13:39,330 We'll say else we're actually going to copy and paste the exact same thing here. 180 00:13:40,880 --> 00:13:44,770 So let me grab this and paste it. 181 00:13:44,770 --> 00:13:49,930 The only thing we're going to change is that it's no longer going to be disabled because what these 182 00:13:49,930 --> 00:13:55,210 lines are doing is that's a list item link that's going to make the number appear like you can't click 183 00:13:55,210 --> 00:13:57,110 on it because that's the current page you're on. 184 00:13:57,370 --> 00:14:00,840 So if this isn't true then that means it's a you're not on. 185 00:14:00,880 --> 00:14:04,750 So it should look like a normal page item so that class is going to be a little different. 186 00:14:04,960 --> 00:14:12,540 And that's all you actually have to do to make this work and that all goes inside this navigation bar. 187 00:14:14,380 --> 00:14:18,340 And again if you're wondering where are these classes and where this actual structure comes from. 188 00:14:18,400 --> 00:14:23,860 It's just combining some Jinja templating syntax with these forms and statements but the documentation 189 00:14:23,860 --> 00:14:27,510 examples from Bootstrap So definitely take your time with this one. 190 00:14:27,580 --> 00:14:29,450 It's kind of complicated when you first see it. 191 00:14:29,650 --> 00:14:34,030 But I think when you actually end up using it in practice it becomes a little more clear. 192 00:14:34,030 --> 00:14:38,980 So what I would recommend doing is going to the bootstrap documentation copying and pasting it over 193 00:14:39,070 --> 00:14:45,250 to our notes and then seeing if you can fill in the blanks for these actual Jinja template lines. 194 00:14:45,280 --> 00:14:50,650 This for loop and this if loop again really all we're doing here is saying okay for the page numbers 195 00:14:50,740 --> 00:14:56,590 in the specialized pages go ahead and check if we're on the same page as we're basically for on that 196 00:14:56,590 --> 00:14:57,260 page. 197 00:14:57,340 --> 00:15:00,910 Make sure the items are able to they can't really click on it or does it look like you can click on 198 00:15:00,910 --> 00:15:01,600 it. 199 00:15:01,690 --> 00:15:05,110 Otherwise it's just an old page item and they'll click on it. 200 00:15:05,380 --> 00:15:05,790 OK. 201 00:15:06,040 --> 00:15:12,060 So technically you may not even need an Atreus here but it's just for the convenience of copying pasting. 202 00:15:12,080 --> 00:15:13,460 So that's it for the user. 203 00:15:13,460 --> 00:15:15,060 BLOCK close each time. 204 00:15:15,470 --> 00:15:17,810 Later on we'll debug this to make sure everything's working. 205 00:15:17,810 --> 00:15:22,790 But the main idea is to set up the Jumbotron that shows the user and then iterating through the blog 206 00:15:22,820 --> 00:15:25,210 posts and then showing the pages. 207 00:15:25,460 --> 00:15:26,060 OK. 208 00:15:26,270 --> 00:15:30,010 Definitely check out our notes because there's a lot of stuff going on here. 209 00:15:30,050 --> 00:15:31,880 So it's really easy to make a typo. 210 00:15:32,240 --> 00:15:33,460 We'll see you at the next lecture.