1 1 00:00:01,740 --> 00:00:02,740 line:15% Welcome back guys. 2 2 00:00:02,740 --> 00:00:05,010 line:15% In this video we're going to be working with 3 3 00:00:05,010 --> 00:00:08,410 our new blueprint for our items. 4 4 00:00:08,410 --> 00:00:11,753 Up to now we've had our items endpoint here in app.py, 5 5 00:00:12,600 --> 00:00:15,060 just because that's easy, and it's quick to develop, 6 6 00:00:15,060 --> 00:00:17,160 and that means that we can run our app quickly 7 7 00:00:17,160 --> 00:00:18,480 and make the changes we want to do 8 8 00:00:18,480 --> 00:00:22,620 without worrying to much about proper structure. 9 9 00:00:22,620 --> 00:00:23,940 But now that we've got it working, 10 10 00:00:23,940 --> 00:00:25,190 we've got the styling working, 11 11 00:00:25,190 --> 00:00:27,103 we've got the app doing what we want it to do, 12 12 00:00:27,103 --> 00:00:30,020 it's good to go back and do some housekeeping, 13 13 00:00:30,020 --> 00:00:32,890 make sure that the items are in their own file, 14 14 00:00:32,890 --> 00:00:34,560 that the alerts are in their own file, 15 15 00:00:34,560 --> 00:00:36,440 we're gonna make that later on. 16 16 00:00:36,440 --> 00:00:38,850 And that is good, because it's going to allow us, 17 17 00:00:38,850 --> 00:00:40,450 proper housekeeping that is, 18 18 00:00:40,450 --> 00:00:43,680 to come back later and make changes much more easily 19 19 00:00:43,680 --> 00:00:45,180 if we've got proper structure. 20 20 00:00:46,140 --> 00:00:48,630 So we're gonna go over to our views folder 21 21 00:00:48,630 --> 00:00:53,630 and we're gonna create a new Python File, called items.py. 22 22 00:00:54,130 --> 00:00:57,750 This file is going to contain our item's blueprint 23 23 00:00:57,750 --> 00:01:01,773 that will contain all of the endpoints related to items. 24 24 00:01:03,060 --> 00:01:06,460 So, I'm gonna copy this one in it's entirety, 25 25 00:01:06,460 --> 00:01:07,720 and paste it in here. 26 26 00:01:07,720 --> 00:01:09,970 And of course this is the endpoint that we have 27 27 00:01:09,970 --> 00:01:11,950 at the moment in items. 28 28 00:01:11,950 --> 00:01:14,110 But we do have to make a bunch of changes 29 29 00:01:14,110 --> 00:01:15,730 in order to make it work. 30 30 00:01:15,730 --> 00:01:17,930 The first thing is we need the imports 31 31 00:01:17,930 --> 00:01:20,110 that we are using here. 32 32 00:01:20,110 --> 00:01:25,110 That is render_template, request, and the item model, 33 33 00:01:25,110 --> 00:01:27,690 and also we will need JSON. 34 34 00:01:27,690 --> 00:01:28,990 So we're gonna copy these, 35 35 00:01:30,290 --> 00:01:32,760 paste them in here, but we don't need Flask, 36 36 00:01:32,760 --> 00:01:35,010 because that's only needed to create our app. 37 37 00:01:36,500 --> 00:01:38,010 By the way, just I'll mention quickly, 38 38 00:01:38,010 --> 00:01:40,220 when you see something like this that looks 39 39 00:01:40,220 --> 00:01:41,900 hey, something's wrong here, 40 40 00:01:41,900 --> 00:01:43,670 just hover over it and it'll tell you what's wrong, 41 41 00:01:43,670 --> 00:01:46,120 and here it says that it expected two blank lines above it. 42 42 00:01:46,120 --> 00:01:47,880 So just give it two blank lines there, 43 43 00:01:47,880 --> 00:01:49,030 so it doesn't complain. 44 44 00:01:50,260 --> 00:01:54,600 Next, we've got this app.route but we don't have app. 45 45 00:01:54,600 --> 00:01:56,830 Now, do we import app? 46 46 00:01:56,830 --> 00:01:59,240 No, you never wanna import app, 47 47 00:01:59,240 --> 00:02:01,500 or you almost never wanna import app. 48 48 00:02:01,500 --> 00:02:05,750 Because, when you go into app, you're going to delete this, 49 49 00:02:05,750 --> 00:02:07,990 since it's already defined in items, 50 50 00:02:07,990 --> 00:02:10,493 and you're going to import this into app. 51 51 00:02:11,540 --> 00:02:15,620 If this requires app, and app requires this, 52 52 00:02:15,620 --> 00:02:16,670 you're gonna have a problem, 53 53 00:02:16,670 --> 00:02:18,650 because they require each other, 54 54 00:02:18,650 --> 00:02:22,090 and that's gonna give you what's known as a circular import. 55 55 00:02:22,090 --> 00:02:25,840 So instead of using app, we're going to use blueprints. 56 56 00:02:25,840 --> 00:02:30,210 So we'll import Blueprint from Flask, 57 57 00:02:30,210 --> 00:02:33,020 and then what we'll do is create a new blueprint. 58 58 00:02:33,020 --> 00:02:36,273 We'll say item_blueprint equal Blueprint. 59 59 00:02:39,490 --> 00:02:40,690 You can give it a name, 60 60 00:02:40,690 --> 00:02:42,970 and the name will be useful later on 61 61 00:02:42,970 --> 00:02:44,970 when we do re-directions, 62 62 00:02:44,970 --> 00:02:47,973 when we send the user from one endpoint to another. 63 63 00:02:49,280 --> 00:02:50,800 And then you also give it 64 64 00:02:52,350 --> 00:02:54,930 an internal name for the blueprint. 65 65 00:02:54,930 --> 00:02:57,310 And don't worry too much about this one, 66 66 00:02:57,310 --> 00:02:59,150 underscore underscore name underscore underscore 67 67 00:02:59,150 --> 00:03:01,740 is almost always going to be unique, 68 68 00:03:01,740 --> 00:03:04,293 so it's enough for what we want to do here. 69 69 00:03:05,840 --> 00:03:07,807 Then instead of app.route we're gonna say 70 70 00:03:07,807 --> 00:03:12,807 item_blueprint.route, like that. 71 71 00:03:13,670 --> 00:03:16,270 What that says is this blueprint 72 72 00:03:16,270 --> 00:03:19,350 now has an endpoint inside of it. 73 73 00:03:19,350 --> 00:03:22,230 The app no longer has an endpoint. 74 74 00:03:22,230 --> 00:03:26,400 We have to import this blueprint from within app. 75 75 00:03:26,400 --> 00:03:27,490 So, let's do that. 76 76 00:03:27,490 --> 00:03:30,103 We can delete all these other endpoints we don't need. 77 77 00:03:31,080 --> 00:03:36,080 And then instead say from views.items import item_blueprint. 78 78 00:03:37,540 --> 00:03:41,582 And then inside app, we'll say app.register_blueprint 79 79 00:03:41,582 --> 00:03:46,582 item_blueprint and the URL prefix is going to be /items. 80 80 00:03:48,090 --> 00:03:49,310 And we've looked at this before 81 81 00:03:49,310 --> 00:03:51,410 at the very start of this section. 82 82 00:03:51,410 --> 00:03:52,610 All this does is it says, 83 83 00:03:52,610 --> 00:03:56,240 hey app we want you to use this endpoint here 84 84 00:03:57,640 --> 00:04:00,350 and the prefix is gonna be /items, 85 85 00:04:00,350 --> 00:04:05,100 so what you're gonna do is make this /items/. 86 86 00:04:05,100 --> 00:04:08,847 Only instead of just using / we're gonna be /new. 87 87 00:04:09,860 --> 00:04:11,540 And that's because this endpoint here 88 88 00:04:11,540 --> 00:04:14,050 is for creating new items. 89 89 00:04:14,050 --> 00:04:15,850 We're gonna have a separate endpoint 90 90 00:04:18,030 --> 00:04:21,228 which will be just the /, 91 91 00:04:21,228 --> 00:04:24,920 and this is going to be sort of an index of the items page. 92 92 00:04:26,910 --> 00:04:29,310 So now that we have this endpoint defined, 93 93 00:04:29,310 --> 00:04:31,000 we can move onto another one. 94 94 00:04:31,000 --> 00:04:33,080 We're done with this one down here. 95 95 00:04:33,080 --> 00:04:36,970 This index is going to show us a list of the items 96 96 00:04:36,970 --> 00:04:40,590 that are currently stored in our application. 97 97 00:04:40,590 --> 00:04:44,250 So all it has to do is say items equal item.all. 98 98 00:04:44,250 --> 00:04:45,840 Gonna load all the items. 99 99 00:04:45,840 --> 00:04:48,090 And then is going to return a render_template 100 100 00:04:48,988 --> 00:04:52,610 of another endpoint 101 101 00:04:54,180 --> 00:04:55,280 and it's gonna give it 102 102 00:04:56,570 --> 00:05:00,220 those items as a variable that it can use. 103 103 00:05:00,220 --> 00:05:02,740 Notice that this endpoint doesn't exist yet. 104 104 00:05:02,740 --> 00:05:04,390 So we're gonna have to create it. 105 105 00:05:05,780 --> 00:05:08,120 And notice also that I have set 106 106 00:05:08,120 --> 00:05:12,090 render_template items/index.html. 107 107 00:05:12,090 --> 00:05:14,710 This is another example of better structuring. 108 108 00:05:14,710 --> 00:05:19,710 We're accessing the index.html file inside our items folder, 109 109 00:05:20,230 --> 00:05:22,680 inside our templates folder. 110 110 00:05:22,680 --> 00:05:24,520 We don't have an items folder yet, 111 111 00:05:24,520 --> 00:05:25,930 but we're gonna create it. 112 112 00:05:25,930 --> 00:05:28,360 So just go to templates, right-click New 113 113 00:05:28,360 --> 00:05:30,000 and then create a Directory. 114 114 00:05:30,000 --> 00:05:31,410 Don't create a Python package, 115 115 00:05:31,410 --> 00:05:34,760 because that puts an it.py file in it, 116 116 00:05:34,760 --> 00:05:36,680 and we don't want that. 117 117 00:05:36,680 --> 00:05:39,083 We just want a good old normal directory. 118 118 00:05:39,980 --> 00:05:43,023 Then we're gonna move the new_item.html into it. 119 119 00:05:44,190 --> 00:05:45,450 And we're gonna come down here 120 120 00:05:45,450 --> 00:05:48,963 and we're gonna say items/new_item.html. 121 121 00:05:50,140 --> 00:05:54,140 And we're also gonna create this index.html file, 122 122 00:05:54,140 --> 00:05:56,153 index.html, like that. 123 123 00:05:57,710 --> 00:06:00,530 All right, so this at the moment shows nothing. 124 124 00:06:00,530 --> 00:06:03,150 If you stop and reload your app 125 125 00:06:04,220 --> 00:06:07,090 and then you go back to Chrome and you refresh, 126 126 00:06:07,090 --> 00:06:08,540 you'll see Not Found. 127 127 00:06:08,540 --> 00:06:13,540 You do have to go to /items in order to find something, 128 128 00:06:14,020 --> 00:06:17,290 and you'll see that this one doesn't really do anything, 129 129 00:06:17,290 --> 00:06:21,543 /items/new will give you our form. 130 130 00:06:22,710 --> 00:06:24,440 The next step is going to be of course 131 131 00:06:24,440 --> 00:06:27,270 to create this index.html file. 132 132 00:06:27,270 --> 00:06:29,640 We're going to that in the next video. 133 133 00:06:29,640 --> 00:06:30,590 I'll see you there.