1 00:00:02,220 --> 00:00:05,550 So let's implement that MVC pattern here. 2 00:00:05,550 --> 00:00:08,350 Since we already got the views and the controllers 3 00:00:08,350 --> 00:00:11,230 are dealing with connecting models and views, 4 00:00:11,230 --> 00:00:13,530 we need to start with the models, 5 00:00:13,530 --> 00:00:16,129 otherwise there is nothing to connect. 6 00:00:16,129 --> 00:00:20,670 And I will start with the blog related database logic 7 00:00:20,670 --> 00:00:22,120 so to say. 8 00:00:22,120 --> 00:00:25,330 Now I will add a new folder, the models folder, 9 00:00:25,330 --> 00:00:29,690 which is a common name for storing your models. 10 00:00:29,690 --> 00:00:33,010 And in there, I'll add a post.js file. 11 00:00:33,010 --> 00:00:35,370 Now, why did I name it post? 12 00:00:35,370 --> 00:00:38,290 Because this model, which we're building here 13 00:00:38,290 --> 00:00:41,680 should be dealing with storing posts. 14 00:00:41,680 --> 00:00:44,370 Now I named it post instead of posts, 15 00:00:44,370 --> 00:00:49,370 because a post model should be a blueprint for a single post 16 00:00:50,210 --> 00:00:52,980 though we will of course also support operations 17 00:00:52,980 --> 00:00:57,600 that involve multiple posts like fetching multiple posts, 18 00:00:57,600 --> 00:01:00,730 but we will also support deleting a single post 19 00:01:00,730 --> 00:01:02,870 or updating a single post, 20 00:01:02,870 --> 00:01:06,650 and therefore I chose to singular forum here. 21 00:01:06,650 --> 00:01:09,150 Now these are all just conventions, 22 00:01:09,150 --> 00:01:11,330 not a technical requirements, 23 00:01:11,330 --> 00:01:15,440 but this is why I did name this file post.js. 24 00:01:15,440 --> 00:01:19,803 And in this file, I'm now going to create a class. 25 00:01:20,770 --> 00:01:22,530 Now you might remember classes, 26 00:01:22,530 --> 00:01:24,200 we haven't used them thus far, 27 00:01:24,200 --> 00:01:27,530 but we learned about them a while ago. 28 00:01:27,530 --> 00:01:30,540 Classes are a JavaScript feature, 29 00:01:30,540 --> 00:01:35,030 which you can use in NodeJS and browser site JavaScript, 30 00:01:35,030 --> 00:01:38,860 which you can use to define blueprints for objects. 31 00:01:38,860 --> 00:01:42,300 And whilst you don't necessarily need to use classes 32 00:01:42,300 --> 00:01:46,560 to implement models, they are very useful for that. 33 00:01:46,560 --> 00:01:48,390 Because if we think about it, 34 00:01:48,390 --> 00:01:51,740 we now wanna define a blueprint for a post 35 00:01:51,740 --> 00:01:53,490 that describes the data 36 00:01:53,490 --> 00:01:56,160 that will eventually be stored in a post. 37 00:01:56,160 --> 00:02:00,360 And that describes the functions, the so-called methods then 38 00:02:00,360 --> 00:02:02,290 if they are tied to an object 39 00:02:02,290 --> 00:02:05,260 that should be usable on a post. 40 00:02:05,260 --> 00:02:09,310 Methods like saving it to the database or updating it. 41 00:02:09,310 --> 00:02:10,877 That's the idea here. 42 00:02:10,877 --> 00:02:13,830 And therefore, I'll add a post-class here. 43 00:02:13,830 --> 00:02:16,530 And the convention is to give your class a name 44 00:02:16,530 --> 00:02:18,863 that starts with an upper case character. 45 00:02:20,250 --> 00:02:23,470 Now you might wanna go through that introduction 46 00:02:23,470 --> 00:02:26,760 to classes again, if this is brand new to you, 47 00:02:26,760 --> 00:02:28,340 because there you learn that 48 00:02:28,340 --> 00:02:33,220 you then can add a special constructor function or method 49 00:02:33,220 --> 00:02:36,710 as it's, then called to this class like this 50 00:02:36,710 --> 00:02:38,720 and that function contains code, 51 00:02:38,720 --> 00:02:43,480 that will be executed whenever you create a new instance 52 00:02:43,480 --> 00:02:45,060 based on that class. 53 00:02:45,060 --> 00:02:48,483 So a concrete object based on this class. 54 00:02:50,270 --> 00:02:53,060 And here in this constructor, 55 00:02:53,060 --> 00:02:57,690 I wanna get the title of the post 56 00:02:57,690 --> 00:03:01,530 that I wanna create as a parameter value 57 00:03:01,530 --> 00:03:05,530 and that the content of the post that I might wanna create, 58 00:03:05,530 --> 00:03:08,100 and then in case I'm not creating a new post, 59 00:03:08,100 --> 00:03:12,053 but updating an existing one, I also want to get the ID. 60 00:03:12,900 --> 00:03:15,760 I'll add it as a last parameter value here 61 00:03:15,760 --> 00:03:19,220 so that we could actually also omit it 62 00:03:19,220 --> 00:03:21,450 and just pass a title and content 63 00:03:21,450 --> 00:03:24,950 because when we create a post, we don't have an ID yet. 64 00:03:24,950 --> 00:03:28,040 So I wanna be able to also execute this function 65 00:03:28,040 --> 00:03:32,520 with only two parameter values instead of three. 66 00:03:32,520 --> 00:03:36,690 And this is how we could implement this with JavaScript, 67 00:03:36,690 --> 00:03:39,770 id then would simply be undefined, 68 00:03:39,770 --> 00:03:41,713 which means it has no value. 69 00:03:43,080 --> 00:03:45,080 Now then early in the course, 70 00:03:45,080 --> 00:03:47,070 when I introduced you to classes, 71 00:03:47,070 --> 00:03:49,480 we also learned about that this keyword, 72 00:03:49,480 --> 00:03:51,690 which allows us to refer to that 73 00:03:51,690 --> 00:03:54,430 to be created concrete object 74 00:03:54,430 --> 00:03:56,440 that will be based on this blueprint. 75 00:03:56,440 --> 00:04:00,080 And we can then, for example, add properties to this object, 76 00:04:00,080 --> 00:04:02,210 and we could add a title property, 77 00:04:02,210 --> 00:04:03,980 which we set equal to the title 78 00:04:03,980 --> 00:04:06,053 we received as a parameter value. 79 00:04:07,300 --> 00:04:09,240 And we can do the same with the content 80 00:04:09,240 --> 00:04:12,720 and set this equal, like this. 81 00:04:12,720 --> 00:04:15,810 And also with the id, which we said equal to id, 82 00:04:15,810 --> 00:04:18,529 though, this of course, may be undefined 83 00:04:18,529 --> 00:04:21,773 if no id was provided, but that's okay. 84 00:04:24,160 --> 00:04:29,160 So now we could create post objects with that blueprint. 85 00:04:29,190 --> 00:04:30,810 Now, the idea with models 86 00:04:30,810 --> 00:04:32,910 is that we can then use these objects 87 00:04:32,910 --> 00:04:35,253 to also trigger certain operations. 88 00:04:36,100 --> 00:04:39,790 For example, we could add a insert method, 89 00:04:39,790 --> 00:04:44,520 and this is how we do add methods on classes as we learned, 90 00:04:44,520 --> 00:04:48,300 or a save method, the name is up to you 91 00:04:48,300 --> 00:04:51,143 to insert this post into the database. 92 00:04:52,810 --> 00:04:55,100 And here I'll use a save method 93 00:04:55,990 --> 00:04:57,680 and there in the save method, 94 00:04:57,680 --> 00:05:00,690 if our goal is to store that post in a database, 95 00:05:00,690 --> 00:05:03,600 I now wanna execute that MongoDB logic 96 00:05:03,600 --> 00:05:06,823 for inserting a new post in that save method. 97 00:05:08,020 --> 00:05:11,170 So we can go to block.js to this routes file 98 00:05:11,170 --> 00:05:13,130 and there, search for the route 99 00:05:13,130 --> 00:05:17,580 where we do insert a new post, and that that would be here 100 00:05:18,690 --> 00:05:23,690 and here we can grab this logic here in the end, 101 00:05:24,050 --> 00:05:28,453 cut that and move that into this save method. 102 00:05:29,670 --> 00:05:33,470 Now here for the new post object which I create here, 103 00:05:33,470 --> 00:05:37,010 I will set title: this.title. 104 00:05:37,010 --> 00:05:40,790 So to the title I stored in this post object 105 00:05:40,790 --> 00:05:42,470 based on this class. 106 00:05:42,470 --> 00:05:43,790 And it can be confusing 107 00:05:43,790 --> 00:05:46,810 that we have another new post object here. 108 00:05:46,810 --> 00:05:49,270 We don't need that, I just need some object, 109 00:05:49,270 --> 00:05:51,690 which I use as a document for inserting, 110 00:05:51,690 --> 00:05:54,890 and I don't wanna use the entire post object here 111 00:05:54,890 --> 00:05:57,040 because we could be storing more data in there 112 00:05:57,040 --> 00:05:59,640 which I don't wanna insert into the database, 113 00:05:59,640 --> 00:06:01,260 even though we're not doing that here, 114 00:06:01,260 --> 00:06:04,600 but I'll still create a new separate helper object, 115 00:06:04,600 --> 00:06:08,660 which is the actual object that will end up in the database, 116 00:06:08,660 --> 00:06:10,060 but to make this less confusing, 117 00:06:10,060 --> 00:06:12,630 I'll not store it in a separate new constant, 118 00:06:12,630 --> 00:06:14,690 instead, I'll pass it here to create it 119 00:06:14,690 --> 00:06:17,030 just in time so to say. 120 00:06:17,030 --> 00:06:20,100 And the title for the to be created document 121 00:06:20,100 --> 00:06:24,100 has the title value that's stored in this object 122 00:06:24,100 --> 00:06:26,200 based on this post class. 123 00:06:26,200 --> 00:06:29,460 And we get access to that with this keyword 124 00:06:29,460 --> 00:06:32,010 and the content is accessed in the same way 125 00:06:32,010 --> 00:06:33,743 with this content. 126 00:06:36,700 --> 00:06:38,630 Now here, we need to make sure 127 00:06:38,630 --> 00:06:41,410 that we get access to our database here, 128 00:06:41,410 --> 00:06:44,630 and therefore of course here in this post.js file, 129 00:06:44,630 --> 00:06:47,420 I now also want to import db 130 00:06:47,420 --> 00:06:51,880 by requiring it from going up one level with this syntax 131 00:06:51,880 --> 00:06:54,810 and then diving into the data folder 132 00:06:54,810 --> 00:06:57,423 and then to the database.js file, 133 00:06:58,300 --> 00:07:00,980 because we need access to this db object 134 00:07:00,980 --> 00:07:03,840 which does give us access to the database 135 00:07:03,840 --> 00:07:06,853 which we then need to access collections and so on. 136 00:07:08,940 --> 00:07:12,360 And then last but not least, we wanna export this. 137 00:07:12,360 --> 00:07:16,550 So here at the bottom, I'll export this post class like this 138 00:07:16,550 --> 00:07:19,610 so that we can use it in our files 139 00:07:19,610 --> 00:07:22,700 so that the blueprint will be defined in this file, 140 00:07:22,700 --> 00:07:25,293 but we can use it in other files as well. 141 00:07:26,440 --> 00:07:28,340 So then I'll go to blog.js 142 00:07:28,340 --> 00:07:33,340 and here I now will import my Post class like this 143 00:07:36,310 --> 00:07:40,460 going up one level diving into models post, 144 00:07:40,460 --> 00:07:44,030 and I name it post with an uppercase P here as well 145 00:07:44,030 --> 00:07:47,353 to make it clear that I am importing a class here. 146 00:07:48,650 --> 00:07:51,890 And then I wanna use this when we insert a new post. 147 00:07:51,890 --> 00:07:56,360 So here in this place, in this posts route, 148 00:07:56,360 --> 00:07:59,280 yes, these are a lot of posts, I'm sorry. 149 00:07:59,280 --> 00:08:02,500 And we can create a new post with the new keyword 150 00:08:02,500 --> 00:08:05,603 as we learned before, when I introduced you to classes. 151 00:08:06,620 --> 00:08:10,860 With new posts like this, this gives us the post object. 152 00:08:10,860 --> 00:08:15,600 You can name this however you want, new post or just post, 153 00:08:15,600 --> 00:08:17,250 whatever you want. 154 00:08:17,250 --> 00:08:20,600 And now we need to pass two parameter values 155 00:08:20,600 --> 00:08:24,710 to this post class here, which we are creating 156 00:08:24,710 --> 00:08:26,900 and that would be the parameter values 157 00:08:26,900 --> 00:08:30,110 that are expected by the constructor function, 158 00:08:30,110 --> 00:08:32,460 because that's the function that will be called 159 00:08:32,460 --> 00:08:35,980 whenever you instantiate a class as it's called 160 00:08:35,980 --> 00:08:37,342 with the new keyword. 161 00:08:38,600 --> 00:08:41,840 Now, actually we expect three parameter values here, 162 00:08:41,840 --> 00:08:43,330 but as I explained before, 163 00:08:43,330 --> 00:08:46,360 I deliberately put ID at the end here 164 00:08:46,360 --> 00:08:49,130 so that we can omit it when we create a post 165 00:08:49,130 --> 00:08:51,420 and it will then simply be undefined. 166 00:08:51,420 --> 00:08:54,080 And if we create a post for the first time 167 00:08:54,080 --> 00:08:57,100 to store it as a brand new post in the database, 168 00:08:57,100 --> 00:08:59,113 we of course have no id yet. 169 00:09:00,160 --> 00:09:04,140 So therefore, I'll just forward my entered title 170 00:09:04,140 --> 00:09:06,530 and my entered content here, 171 00:09:06,530 --> 00:09:09,570 and that should create that post object. 172 00:09:09,570 --> 00:09:11,890 And now to save it into the database, 173 00:09:11,890 --> 00:09:14,310 we can use post and then dot 174 00:09:14,310 --> 00:09:17,150 and then call that save method on that post 175 00:09:17,150 --> 00:09:18,563 which be instantiated. 176 00:09:19,420 --> 00:09:22,100 And that will then trigger this save method, 177 00:09:22,100 --> 00:09:24,983 which will do the actual database saving. 178 00:09:26,640 --> 00:09:28,700 Now, since I'm using await in there, by the way, 179 00:09:28,700 --> 00:09:31,660 we should add async in front of this method, 180 00:09:31,660 --> 00:09:34,500 otherwise await is not supported here. 181 00:09:34,500 --> 00:09:38,450 And of course we could also get the result here 182 00:09:38,450 --> 00:09:40,890 and return that in that method 183 00:09:40,890 --> 00:09:43,550 if we would be interested in the result 184 00:09:43,550 --> 00:09:46,270 in the place where we call save. 185 00:09:46,270 --> 00:09:48,830 So in this case in blog.js. 186 00:09:48,830 --> 00:09:51,510 I am not interested, but we can still return it, 187 00:09:51,510 --> 00:09:53,340 it won't hurt. 188 00:09:53,340 --> 00:09:54,630 Now, last but not least, 189 00:09:54,630 --> 00:09:59,310 we also wanna await this post.save method call here 190 00:09:59,310 --> 00:10:03,910 to ensure that we only redirect after the post was saved 191 00:10:03,910 --> 00:10:07,190 so that we don't accidentally load the admin page 192 00:10:07,190 --> 00:10:10,030 before the post ended up in a database. 193 00:10:10,030 --> 00:10:12,570 In that case, the admin page would work, 194 00:10:12,570 --> 00:10:16,470 but we might not fetch that latest post there yet 195 00:10:16,470 --> 00:10:18,850 because it wasn't saved yet. 196 00:10:18,850 --> 00:10:21,120 So therefore awaiting post.save here 197 00:10:21,120 --> 00:10:23,040 is something we should do. 198 00:10:23,040 --> 00:10:27,460 And we can await here because the safe method is async 199 00:10:27,460 --> 00:10:29,890 and all async functions and methods 200 00:10:29,890 --> 00:10:34,030 return promises by default automatically. 201 00:10:34,030 --> 00:10:36,130 So therefore we can await posts save 202 00:10:36,130 --> 00:10:39,093 because it automatically returns a promise. 203 00:10:40,540 --> 00:10:42,960 If we now save all our files 204 00:10:44,740 --> 00:10:47,050 and I reload this admin page, 205 00:10:47,050 --> 00:10:52,050 I can create "A new post-created with a model." 206 00:10:52,080 --> 00:10:57,080 And if I click Save, that worked and here is my new post. 207 00:10:57,970 --> 00:11:00,410 And with that, we created our first model 208 00:11:00,410 --> 00:11:02,063 with its first method. 209 00:11:03,190 --> 00:11:04,320 Of course we're not done 210 00:11:04,320 --> 00:11:06,550 because there's more we can do with posts. 211 00:11:06,550 --> 00:11:09,050 And if you're feeling fancy, 212 00:11:09,050 --> 00:11:14,010 try implementing the update and delete methods on your own 213 00:11:14,010 --> 00:11:16,930 and see how you could wire all these things up. 214 00:11:16,930 --> 00:11:19,783 We're going to do it together in the next lecture.