1 1 00:00:00,830 --> 00:00:02,350 Hi guys, welcome back. 2 2 00:00:02,350 --> 00:00:05,700 In this video we're going to be creating stores 3 3 00:00:05,700 --> 00:00:07,513 using our web interface. 4 4 00:00:08,390 --> 00:00:11,010 Creating stores is going to be almost identical 5 5 00:00:11,010 --> 00:00:12,570 to creating alerts, 6 6 00:00:12,570 --> 00:00:15,510 in that we're going to have a form, 7 7 00:00:15,510 --> 00:00:18,170 we're gonna have an endpoint that takes in the form data 8 8 00:00:18,170 --> 00:00:20,010 and creates a store, 9 9 00:00:20,010 --> 00:00:22,910 and we're also gonna have an index of all the stores 10 10 00:00:22,910 --> 00:00:25,770 so that we can see what ones we've already got. 11 11 00:00:25,770 --> 00:00:29,870 So, in our alerts we have a form, new_alert.html, 12 12 00:00:29,870 --> 00:00:31,900 which just contains this form 13 13 00:00:31,900 --> 00:00:35,063 and it has a few labels and inputs and then a button. 14 14 00:00:36,060 --> 00:00:40,000 We've got the index which contains a list of the alerts 15 15 00:00:40,000 --> 00:00:42,690 and then a button to create a new one. 16 16 00:00:42,690 --> 00:00:46,130 And finally we have our views which contains two endpoints 17 17 00:00:46,130 --> 00:00:49,800 one to show all the alerts and one to create a new alert 18 18 00:00:49,800 --> 00:00:52,620 and that responds to the form data 19 19 00:00:52,620 --> 00:00:53,990 if it's a post request 20 20 00:00:53,990 --> 00:00:57,110 or it sends us the template if it's not a post request 21 21 00:00:57,110 --> 00:00:59,460 or if we've already processed the post request. 22 22 00:01:00,570 --> 00:01:03,200 The stores are gonna be almost the same. 23 23 00:01:03,200 --> 00:01:05,270 So what I'm gonna do is I'm gonna go into my templates 24 24 00:01:05,270 --> 00:01:08,230 create a new directory and I'm gonna call it stores 25 25 00:01:08,230 --> 00:01:13,130 and in here I'm gonna start by creating the new_store.html 26 26 00:01:13,130 --> 00:01:13,963 this is the form. 27 27 00:01:13,963 --> 00:01:16,060 But I'll delete all of that 28 28 00:01:16,060 --> 00:01:18,860 and then we're gonna go over to the new_alert.html 29 29 00:01:18,860 --> 00:01:20,330 and we're gonna see what it's like 30 30 00:01:20,330 --> 00:01:22,930 because we're gonna do more or less the same. 31 31 00:01:22,930 --> 00:01:25,570 We're gonna first extend base.html, 32 32 00:01:25,570 --> 00:01:27,420 we're gonna have our block content, 33 33 00:01:27,420 --> 00:01:28,430 then we're gonna have a header 34 34 00:01:28,430 --> 00:01:31,730 which is gonna say create store in this new store, 35 35 00:01:31,730 --> 00:01:34,000 and then we're gonna have this form. 36 36 00:01:34,000 --> 00:01:39,000 A store is going to take a name, a URL prefix, 37 37 00:01:39,210 --> 00:01:41,430 a tag name, and a query. 38 38 00:01:41,430 --> 00:01:43,980 That's the four things that a store is gonna need. 39 39 00:01:43,980 --> 00:01:47,050 So we're going to need multiple of these divs, 40 40 00:01:47,050 --> 00:01:48,713 one for each of those properties. 41 41 00:01:49,960 --> 00:01:52,680 Now, instead of writing this all out in front of you, 42 42 00:01:52,680 --> 00:01:54,450 because you already knows how it goes 43 43 00:01:54,450 --> 00:01:55,630 you just have to make these divs 44 44 00:01:55,630 --> 00:01:57,400 and these labels on these inputs. 45 45 00:01:57,400 --> 00:02:00,450 I'm just gonna copy from my notes 46 46 00:02:00,450 --> 00:02:04,270 and then show it to you what we're doing. 47 47 00:02:04,270 --> 00:02:05,860 So this is the code 48 48 00:02:05,860 --> 00:02:07,590 and the reason I'm not typing it out is because 49 49 00:02:07,590 --> 00:02:10,140 it's exactly the same as what you've already seen 50 50 00:02:10,140 --> 00:02:12,610 for the alerts and previously for the items. 51 51 00:02:12,610 --> 00:02:15,743 So we've got our header, which says create store, 52 52 00:02:15,743 --> 00:02:17,250 and then we've got a section 53 53 00:02:17,250 --> 00:02:19,810 in which we have a form of method post 54 54 00:02:19,810 --> 00:02:22,313 and then we have all of these divs. 55 55 00:02:23,210 --> 00:02:24,043 I'm gonna separate them 56 56 00:02:24,043 --> 00:02:25,920 so they're a bit easier to read for you. 57 57 00:02:25,920 --> 00:02:28,750 The first one is for the store name 58 58 00:02:28,750 --> 00:02:30,440 and again its an input of type text, 59 59 00:02:30,440 --> 00:02:31,980 the class is form control 60 60 00:02:31,980 --> 00:02:33,477 has an id of name and a name of name 61 61 00:02:33,477 --> 00:02:36,170 and a placeholder that says John Lewis. 62 62 00:02:36,170 --> 00:02:39,410 Then we've got another div which is for the URL Prefix 63 63 00:02:39,410 --> 00:02:41,200 exactly the same also text, 64 64 00:02:41,200 --> 00:02:44,880 but it has some describing text as well, 65 65 00:02:44,880 --> 00:02:48,320 'What URL will all its items start with?' 66 66 00:02:48,320 --> 00:02:52,270 Then we've got a tag name which is once again also text, 67 67 00:02:52,270 --> 00:02:54,320 'What HTML tag contains the price information 68 68 00:02:54,320 --> 00:02:56,490 for items in this store?' 69 69 00:02:56,490 --> 00:02:59,000 And then we have the query which is also text, 70 70 00:02:59,000 --> 00:03:01,760 but like we saw with items earlier on 71 71 00:03:01,760 --> 00:03:04,250 the placeholder is going to be using 72 72 00:03:04,250 --> 00:03:06,270 these double quotation marks. 73 73 00:03:06,270 --> 00:03:07,740 That's because when we create a store 74 74 00:03:07,740 --> 00:03:12,740 we're gonna turn this into Jason, into a python dictionary 75 75 00:03:13,130 --> 00:03:15,270 so it has to be valid Jason, 76 76 00:03:15,270 --> 00:03:17,513 it has to have these double quotation marks. 77 77 00:03:18,510 --> 00:03:21,000 So this also has some describing text, 78 78 00:03:21,000 --> 00:03:23,570 'What attributes are on the element that contain the price? 79 79 00:03:23,570 --> 00:03:25,550 This is so we can find it on the page.' 80 80 00:03:25,550 --> 00:03:28,793 And finally, we have a create button. 81 81 00:03:30,520 --> 00:03:32,870 Nothing new here but of course this code is available 82 82 00:03:32,870 --> 00:03:34,800 for you to download and check out 83 83 00:03:34,800 --> 00:03:37,010 so you can have a read at it if you want, 84 84 00:03:37,010 --> 00:03:39,540 but not going over it slowly 85 85 00:03:39,540 --> 00:03:41,390 because you know what it's all about. 86 86 00:03:43,570 --> 00:03:48,250 Then in the stores template we're also going to add 87 87 00:03:49,120 --> 00:03:53,870 another html file that I'm gonna call store_index.html. 88 88 00:03:53,870 --> 00:03:56,090 You can call it just index that's probably a better name 89 89 00:03:56,090 --> 00:03:58,350 but, you know, now that we're here, 90 90 00:03:58,350 --> 00:04:00,740 and in here we're gonna put all of this stuff 91 91 00:04:00,740 --> 00:04:04,139 which you already know it's got a header that says stores 92 92 00:04:04,139 --> 00:04:07,600 and then there's a section here with list groups 93 93 00:04:07,600 --> 00:04:10,060 which is the whole list element 94 94 00:04:10,060 --> 00:04:11,610 that is gonna contain all the stores. 95 95 00:04:11,610 --> 00:04:13,360 Then you've got list group item 96 96 00:04:13,360 --> 00:04:15,310 and the list group item heading 97 97 00:04:15,310 --> 00:04:17,200 with the store name. 98 98 00:04:17,200 --> 00:04:20,020 And then inside it we've got a paragraph that says 99 99 00:04:20,020 --> 00:04:23,680 'For URLS starting with' and then inside of it we've got 100 100 00:04:23,680 --> 00:04:27,200 store.url.prefix so it's gonna say something like 101 101 00:04:27,200 --> 00:04:28,850 for URLs starting with 102 102 00:04:28,850 --> 00:04:31,573 actps://Lewis.com. 103 103 00:04:33,210 --> 00:04:37,130 And then down here we've got a button to create a new store 104 104 00:04:37,130 --> 00:04:41,170 and the href is also linking over to an endpoint 105 105 00:04:41,170 --> 00:04:42,983 in the store's blueprint. 106 106 00:04:44,170 --> 00:04:47,100 Nothing new here, but you can also check out the code. 107 107 00:04:47,100 --> 00:04:49,940 And finally we've got the stores.py 108 108 00:04:51,030 --> 00:04:53,890 which contains the endpoints. 109 109 00:04:53,890 --> 00:04:56,200 So these endpoints here, I'm gonna type them out 110 110 00:04:56,200 --> 00:04:58,600 just for some more practise for you 111 111 00:04:59,670 --> 00:05:02,360 we're gonna have, first of all, 112 112 00:05:02,360 --> 00:05:04,190 the blueprint that we need to define, 113 113 00:05:04,190 --> 00:05:06,230 and we are also gonna need render template 114 114 00:05:06,230 --> 00:05:08,190 we're gonna need request, we're gonna need redirect, 115 115 00:05:08,190 --> 00:05:09,463 we're gonna need URL for, 116 116 00:05:10,780 --> 00:05:13,393 actually we won't need redirect, just that. 117 117 00:05:14,400 --> 00:05:16,010 We will need Jason, 118 118 00:05:16,010 --> 00:05:19,570 in order to turn the field contents into valid Jason, 119 119 00:05:19,570 --> 00:05:24,270 and of course we will also need the store model. 120 120 00:05:24,270 --> 00:05:26,240 Then we're gonna create the store blueprint 121 121 00:05:26,240 --> 00:05:28,460 and it's gonna be a flask blueprint 122 122 00:05:28,460 --> 00:05:29,840 the name is gonna be stores 123 123 00:05:29,840 --> 00:05:32,600 and it's gonna have dunder name at the end, 124 124 00:05:32,600 --> 00:05:36,440 just so it can be uniquely identified by flask, 125 125 00:05:36,440 --> 00:05:41,110 and then the store blueprint route, off, slash 126 126 00:05:41,110 --> 00:05:42,470 is gonna be the index 127 127 00:05:43,960 --> 00:05:47,320 and all that's gonna do is get all the stores 128 128 00:05:48,477 --> 00:05:50,360 and and return and render template 129 129 00:05:50,360 --> 00:05:53,630 of stores/store index.html. 130 130 00:05:53,630 --> 00:05:56,600 With the stores passed in like that 131 131 00:05:56,600 --> 00:05:59,190 that's gonna give it this stores variable 132 132 00:05:59,190 --> 00:06:01,960 inside the template. 133 133 00:06:01,960 --> 00:06:04,230 And then it's gonna be able to loop through them 134 134 00:06:04,230 --> 00:06:05,303 and use them. 135 135 00:06:06,330 --> 00:06:11,330 And the other route here is going to have slash new 136 136 00:06:11,740 --> 00:06:14,520 the methods are gonna be get and post 137 137 00:06:15,970 --> 00:06:17,700 and we're gonna create a store 138 138 00:06:18,930 --> 00:06:21,800 and here we're gonna say if the request method is post 139 139 00:06:24,550 --> 00:06:26,550 then we're gonna deal with the form data 140 140 00:06:27,610 --> 00:06:30,230 otherwise, or when we're done, 141 141 00:06:30,230 --> 00:06:34,613 we're gonna return render template of stores/new store.html. 142 142 00:06:35,610 --> 00:06:38,387 Dealing with the form data means we will be getting name, 143 143 00:06:38,387 --> 00:06:41,320 URL prefix, tag name, and query 144 144 00:06:41,320 --> 00:06:43,820 from the form, and creating a store 145 145 00:06:43,820 --> 00:06:44,950 and saving it to the database. 146 146 00:06:44,950 --> 00:06:45,810 So that's name 147 147 00:06:48,280 --> 00:06:49,113 URL prefix 148 148 00:06:53,380 --> 00:06:54,213 tag name 149 149 00:06:57,180 --> 00:07:00,750 and query, which is a Jason string 150 150 00:07:00,750 --> 00:07:03,850 so we have to run it through Jason dot load s. 151 151 00:07:03,850 --> 00:07:05,590 That's gonna take in a string, 152 152 00:07:05,590 --> 00:07:07,983 and turn it into a python dictionary. 153 153 00:07:10,190 --> 00:07:11,490 And then we'll say store 154 154 00:07:11,490 --> 00:07:16,200 with name, URL prefix, tag name and query 155 155 00:07:16,200 --> 00:07:17,923 we're gonna save it to mongoDB. 156 156 00:07:17,923 --> 00:07:20,511 This is just a short hand for create the store 157 157 00:07:20,511 --> 00:07:22,371 and when you have the store 158 158 00:07:22,371 --> 00:07:26,070 then run save to mongo inside of it. 159 159 00:07:26,070 --> 00:07:29,770 And that's it, this is how we deal with adding 160 160 00:07:29,770 --> 00:07:33,180 an entirely new piece of data into our app. 161 161 00:07:33,180 --> 00:07:35,030 We've got the model already, 162 162 00:07:35,030 --> 00:07:36,930 but the model was fairly straightforward 163 163 00:07:36,930 --> 00:07:40,190 all it's got is an inheritance from the model class 164 164 00:07:40,190 --> 00:07:41,320 and it's fields, 165 165 00:07:41,320 --> 00:07:44,610 and of course the Jason method which is very important. 166 166 00:07:44,610 --> 00:07:46,870 And then we have our two endpoints 167 167 00:07:46,870 --> 00:07:51,184 one to show the stores and one to create a new store. 168 168 00:07:51,184 --> 00:07:53,490 The index the one that shows all the stores 169 169 00:07:53,490 --> 00:07:56,170 just iterates through them and shows them in a nice way. 170 170 00:07:56,170 --> 00:07:58,740 Here we're using bootstrap with a list group 171 171 00:07:58,740 --> 00:08:00,840 to show some information about each store. 172 172 00:08:01,990 --> 00:08:05,600 And then we can create a new store which needs a form 173 173 00:08:05,600 --> 00:08:08,640 including all the data required to create a store object. 174 174 00:08:08,640 --> 00:08:12,290 That's name, URL prefix, tag name and query. 175 175 00:08:12,290 --> 00:08:14,800 And then we pass that all to the store constructor, 176 176 00:08:14,800 --> 00:08:17,173 the innate method, and we save it to mongoDB. 177 177 00:08:18,270 --> 00:08:19,980 So that's everything we need to do 178 178 00:08:19,980 --> 00:08:21,620 feel free to run the app up to now 179 179 00:08:21,620 --> 00:08:22,870 make sure it's all working 180 180 00:08:22,870 --> 00:08:24,950 make sure you can create new stores, 181 181 00:08:24,950 --> 00:08:28,570 but before you do that do make sure to delete everything 182 182 00:08:28,570 --> 00:08:30,410 that's currently in your database 183 183 00:08:30,410 --> 00:08:33,100 just in case that we've changed things around 184 184 00:08:33,100 --> 00:08:36,300 like storing price versus not storing price for alerts 185 185 00:08:36,300 --> 00:08:40,190 and so forth and you can potentially get some small errors. 186 186 00:08:40,190 --> 00:08:42,500 Do delete everything that you see in your database 187 187 00:08:42,500 --> 00:08:44,810 before running your app. 188 188 00:08:44,810 --> 00:08:47,190 line:15% Then run your app and make sure it's all working, 189 189 00:08:47,190 --> 00:08:49,940 line:15% but I've been doing that so I know this works. 190 190 00:08:49,940 --> 00:08:53,240 line:15% Once you are confident that it's all good 191 191 00:08:53,240 --> 00:08:54,880 feel free to move on to the next video, 192 192 00:08:54,880 --> 00:08:56,083 so I'll see you there.