1 1 00:00:01,021 --> 00:00:01,854 Hey, guys. 2 2 00:00:01,854 --> 00:00:04,020 In this video we're going to create a page 3 3 00:00:04,020 --> 00:00:05,980 to show all of our items, 4 4 00:00:05,980 --> 00:00:08,160 and it's going to be really simple. 5 5 00:00:08,160 --> 00:00:10,998 What we're gonna do is go over to our index.html, 6 6 00:00:10,998 --> 00:00:15,640 and remember that when you load this page using your app 7 7 00:00:15,640 --> 00:00:17,610 it's going to have received a list 8 8 00:00:17,610 --> 00:00:19,960 of all the items in your database. 9 9 00:00:19,960 --> 00:00:24,140 So you can work with that in this index.html file. 10 10 00:00:24,140 --> 00:00:28,130 The first thing is to say that it extends base.html, 11 11 00:00:28,130 --> 00:00:31,040 we'll need that in order to have the usual layout, 12 12 00:00:31,040 --> 00:00:33,534 and import Bootstrap, and all that stuff. 13 13 00:00:33,534 --> 00:00:35,703 Then we'll have a block content, 14 14 00:00:37,280 --> 00:00:41,380 and inside of it we're going to have a header tag, 15 15 00:00:41,380 --> 00:00:44,170 which is going to contain a title, 16 16 00:00:44,170 --> 00:00:46,600 and then we're gonna have a separate section 17 17 00:00:46,600 --> 00:00:48,970 which is for this list of items, 18 18 00:00:48,970 --> 00:00:53,730 and we're gonna say div class is a list group. 19 19 00:00:53,730 --> 00:00:55,130 So let's go over to Bootstrap 20 20 00:00:55,130 --> 00:00:57,373 and have a look at what a list group is. 21 21 00:01:00,050 --> 00:01:02,750 Going over to the basic example 22 22 00:01:02,750 --> 00:01:05,230 of the list group inside the components, 23 23 00:01:05,230 --> 00:01:07,960 we see that this creates this sort of 24 24 00:01:08,982 --> 00:01:13,960 list, I guess, of items that have some spacing 25 25 00:01:13,960 --> 00:01:16,680 between the text and the border, 26 26 00:01:16,680 --> 00:01:18,640 and it's got some rounded corners 27 27 00:01:18,640 --> 00:01:20,970 there's a separators between each item, 28 28 00:01:20,970 --> 00:01:24,350 it looks quite clean, it looks quite simple, 29 29 00:01:24,350 --> 00:01:26,700 and how you do that is you, 30 30 00:01:26,700 --> 00:01:30,190 well this defines a unordered list 31 31 00:01:30,190 --> 00:01:32,530 with a class of list dash group, 32 32 00:01:32,530 --> 00:01:34,900 and then inside of that unordered list 33 33 00:01:34,900 --> 00:01:37,100 it defines a bunch of list items, 34 34 00:01:37,100 --> 00:01:39,623 each one with the class of list group item, 35 35 00:01:40,550 --> 00:01:42,700 and then you give it the text you want 36 36 00:01:42,700 --> 00:01:45,290 and it handles everything else for you. 37 37 00:01:45,290 --> 00:01:47,420 Normally when you define an unordered list 38 38 00:01:47,420 --> 00:01:50,550 it has bullet points but Bootstrap takes care 39 39 00:01:50,550 --> 00:01:53,243 of removing the bullet points, modifying the spacing, 40 40 00:01:53,243 --> 00:01:57,020 adding the borders, adding the separators, everything else. 41 41 00:01:57,020 --> 00:01:59,024 So it's really quite nice. 42 42 00:01:59,024 --> 00:02:01,668 If you wanted a simple list of things 43 43 00:02:01,668 --> 00:02:04,590 or potentially something that you've got, 44 44 00:02:04,590 --> 00:02:06,300 something like an active thing, 45 45 00:02:06,300 --> 00:02:09,230 or potentially something you can click on, 46 46 00:02:09,230 --> 00:02:11,690 then this works really well. 47 47 00:02:11,690 --> 00:02:14,650 However, if you want some more content in it, 48 48 00:02:14,650 --> 00:02:17,360 as we will do, then you're gonna need 49 49 00:02:17,360 --> 00:02:19,480 something a bit more complicated. 50 50 00:02:19,480 --> 00:02:20,950 It doesn't have to be very complicated, 51 51 00:02:20,950 --> 00:02:23,750 the example here shows you how you can include 52 52 00:02:23,750 --> 00:02:25,620 a lot of stuff inside this, 53 53 00:02:25,620 --> 00:02:29,750 but we're going to focus on just a couple of things. 54 54 00:02:29,750 --> 00:02:33,880 The first one is instead of an unordered list we use a div 55 55 00:02:33,880 --> 00:02:36,960 for the list group, all the things. 56 56 00:02:36,960 --> 00:02:41,090 And inside of each one it's got an A tag, 57 57 00:02:41,090 --> 00:02:43,080 which is for a link, 58 58 00:02:43,080 --> 00:02:46,730 but this could be a div as well if we prefer. 59 59 00:02:46,730 --> 00:02:50,070 In here they've used an A tag so that it is clickable, 60 60 00:02:50,070 --> 00:02:52,110 you can click on the entire thing, 61 61 00:02:52,110 --> 00:02:54,540 if you use a div instead you cannot click on it 62 62 00:02:54,540 --> 00:02:56,293 because it's not a link. 63 63 00:02:57,620 --> 00:03:02,093 And this A tag has the list group item property, 64 64 00:03:03,460 --> 00:03:06,630 it also has the list group item action property, 65 65 00:03:06,630 --> 00:03:09,570 and that just marks it as clickable, 66 66 00:03:09,570 --> 00:03:11,120 and then it's got the active property 67 67 00:03:11,120 --> 00:03:12,800 which means it has a blue background, 68 68 00:03:12,800 --> 00:03:15,223 these other ones don't have the active property. 69 69 00:03:16,718 --> 00:03:20,850 Then inside this A tag you've got a bunch of stuff, 70 70 00:03:20,850 --> 00:03:22,950 you can put basically whatever you want here 71 71 00:03:22,950 --> 00:03:25,270 and all of these classes that this div, 72 72 00:03:25,270 --> 00:03:26,920 and this paragraph have, 73 73 00:03:26,920 --> 00:03:30,480 they are independent of the list group, 74 74 00:03:30,480 --> 00:03:33,100 they are Bootstrap classes but they're used 75 75 00:03:33,100 --> 00:03:37,060 just to lay things out within the div, 76 76 00:03:37,060 --> 00:03:39,640 or the A tag in this case. 77 77 00:03:39,640 --> 00:03:42,080 So you don't really have to worry about these classes here, 78 78 00:03:42,080 --> 00:03:44,343 you can put whatever you want inside there. 79 79 00:03:45,520 --> 00:03:47,640 So with that said, we're going to go over 80 80 00:03:47,640 --> 00:03:50,830 to our project and code this out. 81 81 00:03:50,830 --> 00:03:52,470 And I know that looking at the documentation 82 82 00:03:52,470 --> 00:03:54,710 can be a bit confusing, that's why I'm here, 83 83 00:03:54,710 --> 00:03:56,270 to help you out so you don't 84 84 00:03:56,270 --> 00:03:58,270 have to worry too much about it. 85 85 00:03:58,270 --> 00:03:59,830 When we have our list group, 86 86 00:03:59,830 --> 00:04:02,330 that gives us the outer container. 87 87 00:04:02,330 --> 00:04:06,830 Now we wanna create one thing for each item 88 88 00:04:06,830 --> 00:04:09,303 so that; that will populate our list group. 89 89 00:04:10,210 --> 00:04:12,750 In order to do a thing per item, 90 90 00:04:12,750 --> 00:04:14,363 we're going to do a for loop. 91 91 00:04:15,850 --> 00:04:19,530 And that's how we do a for loop in Jinja, 92 92 00:04:19,530 --> 00:04:22,960 we say for item in items, remember the items variable 93 93 00:04:22,960 --> 00:04:27,040 exists because we passed it in through the endpoint 94 94 00:04:28,160 --> 00:04:29,920 and then at the end we do end for, 95 95 00:04:29,920 --> 00:04:33,110 and anything that is within this block 96 96 00:04:33,110 --> 00:04:34,912 will get repeated over and over 97 97 00:04:34,912 --> 00:04:38,550 until we've got to the end of the items list, 98 98 00:04:38,550 --> 00:04:41,700 and in here we're going to define a div 99 99 00:04:41,700 --> 00:04:45,083 with a class of list group item, 100 100 00:04:46,230 --> 00:04:49,899 make sure to spell that correctly, not like me. 101 101 00:04:49,899 --> 00:04:51,700 And that's everything you need. 102 102 00:04:51,700 --> 00:04:56,700 Now, this is going to create this group of things, 103 103 00:04:56,750 --> 00:04:59,020 one for each item. 104 104 00:04:59,020 --> 00:05:01,120 And whatever you wanna put in it is fine, 105 105 00:05:01,120 --> 00:05:02,380 you can put whatever you want. 106 106 00:05:02,380 --> 00:05:07,380 So, for now, we're going to say h4 item, 107 107 00:05:07,770 --> 00:05:09,760 and then in here we're gonna put a paragraph, 108 108 00:05:09,760 --> 00:05:12,010 and the paragraph is just going to have 109 109 00:05:12,010 --> 00:05:17,010 a URL of item dot url, and is gonna have the text inside it 110 110 00:05:18,370 --> 00:05:20,443 of item dot url as well. 111 111 00:05:21,520 --> 00:05:26,520 Notice that item dot url is a property of the item object, 112 112 00:05:26,700 --> 00:05:29,320 and the item object is one of many 113 113 00:05:29,320 --> 00:05:31,430 that we have in the items list, 114 114 00:05:31,430 --> 00:05:33,530 and the items list comes from 115 115 00:05:33,530 --> 00:05:36,410 the endpoint which loaded it from the database, 116 116 00:05:36,410 --> 00:05:38,786 so that's the flow of data there. 117 117 00:05:38,786 --> 00:05:43,430 Then at the end of the loop, and outside of the list group, 118 118 00:05:43,430 --> 00:05:46,530 we're also going to add a button 119 119 00:05:46,530 --> 00:05:50,350 using the btn btn dash primary classes that we saw earlier, 120 120 00:05:50,350 --> 00:05:53,810 and this button is going to let us create a new item, 121 121 00:05:53,810 --> 00:05:56,110 so we're gonna be able to see all the items 122 122 00:05:56,110 --> 00:05:57,360 and then we're gonna be able to click 123 123 00:05:57,360 --> 00:05:59,300 the button to create a new one. 124 124 00:05:59,300 --> 00:06:02,433 The href, or where this takes us, 125 125 00:06:02,433 --> 00:06:07,433 is url underscore for items dot create underscore item. 126 126 00:06:12,510 --> 00:06:15,540 And the text is gonna be create new. 127 127 00:06:15,540 --> 00:06:17,580 So what have I done here? 128 128 00:06:17,580 --> 00:06:22,580 Notice that the url for function, it seems, is used, 129 129 00:06:23,200 --> 00:06:26,330 and inside it we've given it a string. 130 130 00:06:26,330 --> 00:06:29,270 Url for is part of Flask, 131 131 00:06:29,270 --> 00:06:31,710 but it is also available in Jinja2 132 132 00:06:31,710 --> 00:06:33,850 if you are using Flask with it. 133 133 00:06:33,850 --> 00:06:36,640 Just because Flask gives Jinja2 a bunch of functions 134 134 00:06:36,640 --> 00:06:40,193 that it thinks could be useful, and url for is one of them. 135 135 00:06:41,680 --> 00:06:45,300 Url for is going to generate a complete address, 136 136 00:06:45,300 --> 00:06:47,250 a complete web address, 137 137 00:06:47,250 --> 00:06:52,140 for the endpoint defined in the string. 138 138 00:06:52,140 --> 00:06:57,140 This endpoint takes the format of the blueprint name, 139 139 00:06:57,570 --> 00:07:00,320 items, then a full stop, 140 140 00:07:00,320 --> 00:07:04,070 and then the function name within the blueprint. 141 141 00:07:04,070 --> 00:07:06,840 So that is items, which is our blueprint name, 142 142 00:07:06,840 --> 00:07:11,010 defined up here, and then the blueprint name here, 143 143 00:07:11,010 --> 00:07:15,040 which is new item, not create item. 144 144 00:07:15,040 --> 00:07:16,640 There we go, that's correct now. 145 145 00:07:17,665 --> 00:07:21,430 Now that we have this we can restart our app 146 146 00:07:21,430 --> 00:07:24,093 and go over and see if it works. 147 147 00:07:25,240 --> 00:07:28,670 Remember to take away the new from the address, 148 148 00:07:28,670 --> 00:07:30,330 and there you have it. 149 149 00:07:30,330 --> 00:07:32,330 Maybe not the prettiest one right now, 150 150 00:07:32,330 --> 00:07:34,990 but you've got some stuff, 151 151 00:07:34,990 --> 00:07:37,660 you've got your items that you can click, 152 152 00:07:37,660 --> 00:07:39,110 I've got a couple of test ones there 153 153 00:07:39,110 --> 00:07:41,720 that may have appeared without you realising, 154 154 00:07:41,720 --> 00:07:42,810 and then you've got your button 155 155 00:07:42,810 --> 00:07:45,823 and when you click it, it takes you to the create new. 156 156 00:07:46,920 --> 00:07:49,170 Notice that you can style this however you want, 157 157 00:07:49,170 --> 00:07:52,220 you can add more things into an individual item, 158 158 00:07:52,220 --> 00:07:53,940 or you could look at the documentation 159 159 00:07:53,940 --> 00:07:57,183 and make the entire list clickable if you'd like. 160 160 00:07:58,400 --> 00:07:59,960 Now something you can realise is that 161 161 00:07:59,960 --> 00:08:03,845 there is no gap between the list group and the button, 162 162 00:08:03,845 --> 00:08:06,260 that looks a bit ugly to me 163 163 00:08:06,260 --> 00:08:09,023 so we can add a small gap between the two. 164 164 00:08:09,860 --> 00:08:11,390 Bootstrap comes with a bunch 165 165 00:08:11,390 --> 00:08:14,160 of utilities to add gaps to things, 166 166 00:08:14,160 --> 00:08:16,860 and that's called the sizing utilities. 167 167 00:08:16,860 --> 00:08:18,540 If you go to the Bootstrap documentation 168 168 00:08:18,540 --> 00:08:20,010 and click on utilities, 169 169 00:08:20,010 --> 00:08:22,726 down here you can see the sizing ones, 170 170 00:08:22,726 --> 00:08:25,230 sorry, spacing ones, not sizing. 171 171 00:08:25,230 --> 00:08:29,937 The spacing utilities are quite complicated 172 172 00:08:29,937 --> 00:08:33,200 when you start off, but they quickly become quite simple, 173 173 00:08:33,200 --> 00:08:35,760 and I'll explain how they work. 174 174 00:08:35,760 --> 00:08:39,640 What you've got is two main properties, 175 175 00:08:39,640 --> 00:08:41,653 margin and padding. 176 176 00:08:42,595 --> 00:08:47,130 This button here has a padding that separates 177 177 00:08:47,130 --> 00:08:50,750 the text from the outer bound of the button. 178 178 00:08:50,750 --> 00:08:55,440 This space between text and the border is called padding, 179 179 00:08:55,440 --> 00:08:57,870 and it does not have any margin 180 180 00:08:57,870 --> 00:09:00,180 because there is no space outside the button 181 181 00:09:00,180 --> 00:09:03,080 separating it from any other element. 182 182 00:09:03,080 --> 00:09:05,240 Any space outside the element that separates 183 183 00:09:05,240 --> 00:09:08,380 it from other elements is called a margin. 184 184 00:09:08,380 --> 00:09:12,773 So margin is the outer space, padding is the inner space. 185 185 00:09:15,450 --> 00:09:18,450 So when you use these utilities from Bootstrap 186 186 00:09:18,450 --> 00:09:22,410 you're gonna have m or p for margin, 187 187 00:09:22,410 --> 00:09:25,113 outer space, or padding, inner space. 188 188 00:09:26,650 --> 00:09:31,617 Then you're gonna have t, b, l, r, x, y, or blank, 189 189 00:09:34,770 --> 00:09:37,820 for the different sides of the element. 190 190 00:09:37,820 --> 00:09:41,923 For example, m t stands for margin top, 191 191 00:09:42,870 --> 00:09:45,020 and then you're gonna have a number 192 192 00:09:45,020 --> 00:09:48,190 which defines the amount of margin, 193 193 00:09:48,190 --> 00:09:53,190 m t 1 defines a small margin top, 194 194 00:09:53,410 --> 00:09:58,063 m t 2 defines a slightly larger margin top. 195 195 00:10:00,970 --> 00:10:04,080 These'll become more obvious as you use it more, 196 196 00:10:04,080 --> 00:10:06,330 but for now just think that there 197 197 00:10:06,330 --> 00:10:09,030 is no gap between this item, 198 198 00:10:09,030 --> 00:10:12,040 this entire list group, and this button. 199 199 00:10:12,040 --> 00:10:13,860 So we have one of two options, 200 200 00:10:13,860 --> 00:10:17,359 we can either add a space to the list group 201 201 00:10:17,359 --> 00:10:21,340 at the bottom of it so that when we add a bit space, 202 202 00:10:21,340 --> 00:10:23,703 the button will be pushed down. 203 203 00:10:24,620 --> 00:10:28,250 Or, we can add some space to the top of the button 204 204 00:10:28,250 --> 00:10:31,940 so that before it shows the button, it will push it down. 205 205 00:10:31,940 --> 00:10:33,570 The outcome is exactly the same 206 206 00:10:33,570 --> 00:10:34,890 but it's up to you whether you wanna 207 207 00:10:34,890 --> 00:10:37,810 modify the button or the list group. 208 208 00:10:37,810 --> 00:10:40,350 Generally, I would recommend sticking to 209 209 00:10:40,350 --> 00:10:42,343 one of these two approaches. 210 210 00:10:43,550 --> 00:10:46,490 So if you prefer to add a margin 211 211 00:10:46,490 --> 00:10:50,700 to the button so that it pushes it down, then do that, 212 212 00:10:50,700 --> 00:10:52,570 and whenever you encounter a situation like this 213 213 00:10:52,570 --> 00:10:54,240 one in the future, do the same, 214 214 00:10:54,240 --> 00:10:57,150 add a margin to the top of your element. 215 215 00:10:57,150 --> 00:10:59,730 I like adding a margin to the bottom of my elements, 216 216 00:10:59,730 --> 00:11:01,830 I think it makes more sense that each element, 217 217 00:11:01,830 --> 00:11:04,820 it takes care of the space that it takes, 218 218 00:11:04,820 --> 00:11:08,620 and also how far away other elements should be from it, 219 219 00:11:08,620 --> 00:11:10,010 so I'm going to add a margin to 220 220 00:11:10,010 --> 00:11:12,223 the bottom of this entire list group. 221 221 00:11:13,220 --> 00:11:16,260 How we're gonna do that is by going over to our project, 222 222 00:11:16,260 --> 00:11:17,430 getting our list group, 223 223 00:11:17,430 --> 00:11:19,020 and now we're gonna add another class, 224 224 00:11:19,020 --> 00:11:22,370 so space after the list dash group, 225 225 00:11:22,370 --> 00:11:25,170 and now we're gonna add a margin so we type m, 226 226 00:11:25,170 --> 00:11:27,890 we're gonna add it to the bottom so we type b, 227 227 00:11:27,890 --> 00:11:32,600 and we're gonna say three for a reasonably sized margin. 228 228 00:11:32,600 --> 00:11:34,270 Then we're gonna save that, 229 229 00:11:34,270 --> 00:11:36,930 we're gonna come back here, we're gonna refresh, 230 230 00:11:36,930 --> 00:11:39,400 make sure that disable cache is selected 231 231 00:11:39,400 --> 00:11:41,680 otherwise you won't see any changes, 232 232 00:11:41,680 --> 00:11:44,670 and now we have the changes there. 233 233 00:11:44,670 --> 00:11:47,560 You can see the button has been dislodged 234 234 00:11:47,560 --> 00:11:48,690 from its original position, 235 235 00:11:48,690 --> 00:11:52,950 and has been pushed down by a certain amount. 236 236 00:11:52,950 --> 00:11:55,020 And that amount is defined in 237 237 00:11:55,020 --> 00:11:58,883 the documentation as shown here. 238 238 00:12:00,555 --> 00:12:04,250 So the spacing goes from .25 rems, 239 239 00:12:05,480 --> 00:12:10,110 which is a unit of distance in CSS, to three rems. 240 240 00:12:10,110 --> 00:12:12,470 And depending on whether you use 241 241 00:12:12,470 --> 00:12:14,572 one, two, three, four, or five, 242 242 00:12:14,572 --> 00:12:18,557 it'll be one or the other, in this case it's one rem, 243 243 00:12:19,686 --> 00:12:21,336 that's the default to this three. 244 244 00:12:22,373 --> 00:12:26,200 Okay so a lot of stuff covered in this video, 245 245 00:12:26,200 --> 00:12:29,290 just know that the Bootstrap documentation is great, 246 246 00:12:29,290 --> 00:12:31,390 and everything I'm teaching you in this section 247 247 00:12:31,390 --> 00:12:34,790 is to help you get more familiar with it 248 248 00:12:34,790 --> 00:12:37,620 so that you can then go and look at it 249 249 00:12:37,620 --> 00:12:39,970 and not feel too intimidated. 250 250 00:12:39,970 --> 00:12:43,670 It really is very quick to develop with 251 251 00:12:43,670 --> 00:12:45,940 once you get a bit more comfortable with it, 252 252 00:12:45,940 --> 00:12:49,680 so I really recommend looking it up, reading it, 253 253 00:12:49,680 --> 00:12:52,633 trying its different examples to learn more about it. 254 254 00:12:54,080 --> 00:12:55,250 That's it for this video though, 255 255 00:12:55,250 --> 00:12:56,400 thank you for joining me, 256 256 00:12:56,400 --> 00:12:58,430 it's really looking much better now, 257 257 00:12:58,430 --> 00:13:00,030 so I'll see you in the next one.