1 00:00:02,440 --> 00:00:03,380 So let's make sure 2 00:00:03,380 --> 00:00:06,770 we can store new posts here. 3 00:00:06,770 --> 00:00:09,380 So that this form can be submitted. 4 00:00:09,380 --> 00:00:10,213 And for that, 5 00:00:10,213 --> 00:00:14,050 we can actually start in the create-post.ejs file here, 6 00:00:14,050 --> 00:00:16,370 because that's all we have that form. 7 00:00:16,370 --> 00:00:18,680 And just as in the MySQL section, 8 00:00:18,680 --> 00:00:21,383 we need to set an action and a method here. 9 00:00:22,370 --> 00:00:26,060 Now the method should be POST because that's to convention 10 00:00:26,060 --> 00:00:28,750 if we're dealing with user entered data, 11 00:00:28,750 --> 00:00:32,270 that should be stored somewhere on the server side, 12 00:00:32,270 --> 00:00:33,950 in this case in a database. 13 00:00:33,950 --> 00:00:37,580 So post is to kind of HTTP request you wanna send here 14 00:00:37,580 --> 00:00:39,223 to follow this convention. 15 00:00:40,170 --> 00:00:44,740 And then for the URL, for the path to which we sent this, 16 00:00:44,740 --> 00:00:49,680 that's up to you, but I wanna send it to /posts 17 00:00:49,680 --> 00:00:53,370 to simply send it to my domain.com/posts. 18 00:00:53,370 --> 00:00:56,550 So in this case, local host 3000/posts, 19 00:00:56,550 --> 00:00:59,900 and whenever a post request to reach us this path, 20 00:00:59,900 --> 00:01:03,173 I wanna insert the submitted data into the database. 21 00:01:04,819 --> 00:01:07,940 And then since all these input fields have names, 22 00:01:07,940 --> 00:01:11,100 we'll be able to extract the user entered data 23 00:01:11,100 --> 00:01:16,100 by these name values as keys in the incoming request body. 24 00:01:16,970 --> 00:01:20,000 That's exactly what we did in the MySQL section two, 25 00:01:20,000 --> 00:01:21,300 when we built this project 26 00:01:21,300 --> 00:01:24,070 and what we also discussed earlier in the course. 27 00:01:24,070 --> 00:01:28,050 So I'm not going to dive too deep into this right now. 28 00:01:28,050 --> 00:01:30,090 Instead, this form is now submittable. 29 00:01:30,090 --> 00:01:33,430 And in block.js, we can now register a new route 30 00:01:33,430 --> 00:01:36,203 to handle such incoming blog posts. 31 00:01:37,900 --> 00:01:39,420 This should be a post route 32 00:01:39,420 --> 00:01:41,780 because we're sending a post request 33 00:01:41,780 --> 00:01:44,930 and we wanna handle the /posts path 34 00:01:44,930 --> 00:01:46,610 and then have our function here, 35 00:01:46,610 --> 00:01:49,330 which takes the request and response objects, 36 00:01:49,330 --> 00:01:51,400 which we can use for handling the request 37 00:01:51,400 --> 00:01:53,283 and sending back a response. 38 00:01:55,430 --> 00:01:57,940 Now, what we wanna do here is of course, 39 00:01:57,940 --> 00:02:00,650 we wanna extract the incoming data 40 00:02:00,650 --> 00:02:03,310 from the incoming request. 41 00:02:03,310 --> 00:02:06,500 For this, we can access req.body as you learned, 42 00:02:06,500 --> 00:02:08,009 this holds the body, 43 00:02:08,009 --> 00:02:11,039 the data attached to the incoming request, 44 00:02:11,039 --> 00:02:13,860 the parsed data I should say, 45 00:02:13,860 --> 00:02:16,420 and on that body will have an object 46 00:02:16,420 --> 00:02:21,300 which holds properties like title and summary and content, 47 00:02:21,300 --> 00:02:23,320 and also author, 48 00:02:23,320 --> 00:02:26,063 which will be the data chosen by the user here. 49 00:02:27,660 --> 00:02:30,900 So now we can use that information to create the document 50 00:02:30,900 --> 00:02:32,890 that we wanna insert in MongoDB. 51 00:02:33,990 --> 00:02:35,850 So here I'll name this newPost, 52 00:02:35,850 --> 00:02:37,620 the name is up to you, of course, 53 00:02:37,620 --> 00:02:40,650 and that should be a new JavaScript object 54 00:02:40,650 --> 00:02:43,830 where I actually wanna have a title 55 00:02:43,830 --> 00:02:46,240 because every blog post should have a title, 56 00:02:46,240 --> 00:02:48,483 which is req.body.title, 57 00:02:49,730 --> 00:02:54,730 because we have that title name here for the title input. 58 00:02:56,650 --> 00:02:58,220 For the summary, we have summary 59 00:02:58,220 --> 00:03:01,700 and for the long we have content as names. 60 00:03:01,700 --> 00:03:03,100 So therefore we can, for example, 61 00:03:03,100 --> 00:03:05,810 also add a summary key to our document, 62 00:03:05,810 --> 00:03:07,540 which would hold the values stored 63 00:03:07,540 --> 00:03:12,130 in req.body summary, I mean. 64 00:03:12,130 --> 00:03:14,800 And then we can have the body field in our document, 65 00:03:14,800 --> 00:03:17,780 which would be req.body.content. 66 00:03:19,400 --> 00:03:21,010 Of course, these keys are up to you, 67 00:03:21,010 --> 00:03:24,240 but these will be the keys that end up in your documents 68 00:03:24,240 --> 00:03:25,930 in your database. 69 00:03:25,930 --> 00:03:28,160 So here, these are the keys I'm going for, 70 00:03:28,160 --> 00:03:32,023 since these are the keys I outlined on this slide before. 71 00:03:32,990 --> 00:03:35,790 Hence here, we can also see that we wanna have a date, 72 00:03:35,790 --> 00:03:39,900 and then also that author data that should be stored 73 00:03:39,900 --> 00:03:44,900 and therefore our next, add a date or a createdAt field, 74 00:03:45,210 --> 00:03:48,390 however you wanna name it, I'll just name it date. 75 00:03:48,390 --> 00:03:52,650 And I wanna use the current time and date as a date here. 76 00:03:52,650 --> 00:03:55,390 And we can simply create a new date object like this 77 00:03:55,390 --> 00:03:56,950 in JavaScript. 78 00:03:56,950 --> 00:03:58,950 And if we just created like this 79 00:03:58,950 --> 00:04:01,040 with this built in date class, 80 00:04:01,040 --> 00:04:04,620 this will automatically give us the current time and date 81 00:04:04,620 --> 00:04:07,480 at the point of time this code executes. 82 00:04:07,480 --> 00:04:09,427 And that of course is a great snapshot, 83 00:04:09,427 --> 00:04:13,800 agreat timestamp for the date when this post is created, 84 00:04:13,800 --> 00:04:16,322 because that is happening at this date. 85 00:04:18,279 --> 00:04:20,360 So therefore, I'll create a new date like this 86 00:04:20,360 --> 00:04:22,350 and store this in a date field. 87 00:04:22,350 --> 00:04:23,910 And thankfully MongoDB 88 00:04:23,910 --> 00:04:27,340 will be able to work with this JavaScript date object, 89 00:04:27,340 --> 00:04:30,610 and it will store it in the database correctly. 90 00:04:30,610 --> 00:04:32,960 And hence, that's how we can add the date here. 91 00:04:33,830 --> 00:04:38,270 Now for the author, I'll store a nested object. 92 00:04:38,270 --> 00:04:40,110 So I'll create another object here 93 00:04:40,110 --> 00:04:43,963 because I wanna store both the ID and the name here. 94 00:04:44,990 --> 00:04:48,620 Now, for the ID, you could also name this authorId 95 00:04:48,620 --> 00:04:51,730 of course, I'll go for just id. 96 00:04:51,730 --> 00:04:55,520 I want to use req.body.author 97 00:04:55,520 --> 00:04:58,360 because that will actually be the ID, 98 00:04:58,360 --> 00:05:00,710 Author is the name of this dropdown, 99 00:05:00,710 --> 00:05:02,000 and what will be submitted 100 00:05:02,000 --> 00:05:04,920 is the value of the option that was chosen 101 00:05:04,920 --> 00:05:07,010 and the value is the id. 102 00:05:07,010 --> 00:05:08,653 So we'll get the ID here. 103 00:05:09,530 --> 00:05:12,650 However, we'll get the ID as a string 104 00:05:12,650 --> 00:05:17,130 and we could consider storing it as an object id here. 105 00:05:17,130 --> 00:05:22,130 So to convert it into this object id format, Mongo DB uses. 106 00:05:22,870 --> 00:05:26,140 If we wanna do that, all we have to do for this 107 00:05:26,140 --> 00:05:31,140 is import mongodb by requiring it, like this. 108 00:05:33,080 --> 00:05:36,360 And then maybe here 109 00:05:36,360 --> 00:05:40,000 we can actually get this ObjectId function 110 00:05:40,000 --> 00:05:41,893 by accessing mongodb.ObjectId. 111 00:05:43,795 --> 00:05:47,300 And that ObjectId thing here will then be a function 112 00:05:47,300 --> 00:05:50,370 or to be precise, a class we can instantiate 113 00:05:51,330 --> 00:05:52,510 and hence down there, 114 00:05:52,510 --> 00:05:55,380 we could then actually use new ObjectId 115 00:05:56,490 --> 00:06:00,123 and pass our author ID to it. 116 00:06:00,980 --> 00:06:05,360 Now we would be storing this as this ObjectId thing 117 00:06:05,360 --> 00:06:08,550 MongoDB uses internally for storing IDs 118 00:06:08,550 --> 00:06:11,210 instead of using a plain string. 119 00:06:11,210 --> 00:06:15,163 Both would work, but I'll go for the ObjectId solution here. 120 00:06:17,650 --> 00:06:20,810 And then I also wanna store the name of the author. 121 00:06:20,810 --> 00:06:24,310 And of course here, we don't have that name. 122 00:06:24,310 --> 00:06:26,750 We do have it in the dropdown actually, 123 00:06:26,750 --> 00:06:30,313 but the day that it will be submitted will just be this id. 124 00:06:31,740 --> 00:06:34,160 So to get the name as well, 125 00:06:34,160 --> 00:06:36,230 we can, of course just fetch it here 126 00:06:36,230 --> 00:06:38,033 when we do create a post. 127 00:06:39,010 --> 00:06:43,400 And for this, before we create this new post object, 128 00:06:43,400 --> 00:06:46,060 we can use the db object, 129 00:06:46,060 --> 00:06:49,130 which we're importing from our own database.js file 130 00:06:49,130 --> 00:06:53,430 and call getDb to get access to that database 131 00:06:53,430 --> 00:06:55,203 on our MongoDB server, 132 00:06:56,220 --> 00:07:00,710 get access to the author's collection here, 133 00:07:00,710 --> 00:07:04,670 and then actually find one specific author here 134 00:07:04,670 --> 00:07:06,453 with one specific ID. 135 00:07:08,500 --> 00:07:12,853 For this, we then pass an object here to findOne, 136 00:07:14,050 --> 00:07:16,940 that's our filtering object, as you learn 137 00:07:16,940 --> 00:07:18,830 and we're looking for to document 138 00:07:18,830 --> 00:07:23,683 where _id is equal to this author id. 139 00:07:24,920 --> 00:07:27,510 And for that, I'll actually grab this ID here 140 00:07:27,510 --> 00:07:30,770 this ObjectId with the author ID, which I'm creating here 141 00:07:31,660 --> 00:07:34,540 and I'll create a new constant here authorId, 142 00:07:34,540 --> 00:07:36,730 which holds stat ObjectId 143 00:07:36,730 --> 00:07:39,453 based on that authorId that was submitted. 144 00:07:40,510 --> 00:07:43,760 And I'll use this authorId here as a value 145 00:07:43,760 --> 00:07:45,673 for this filtering condition. 146 00:07:48,330 --> 00:07:50,470 And this will then reach out to debt collection 147 00:07:50,470 --> 00:07:51,720 to the author's collection 148 00:07:51,720 --> 00:07:54,863 and find us this one matching author document. 149 00:07:55,810 --> 00:07:58,140 Again, this is a asynchronous operation, 150 00:07:58,140 --> 00:08:00,070 which can take a little bit longer. 151 00:08:00,070 --> 00:08:01,920 So we can await this. 152 00:08:01,920 --> 00:08:03,320 In order to do that though, 153 00:08:03,320 --> 00:08:06,100 we need to turn this into an async function 154 00:08:06,100 --> 00:08:08,673 by adding the async keyword in front of it. 155 00:08:10,460 --> 00:08:12,720 And then here, we got our author 156 00:08:14,080 --> 00:08:15,823 that's stored in the database. 157 00:08:16,810 --> 00:08:19,000 So now we're running an extra query, 158 00:08:19,000 --> 00:08:22,340 just so that we're then able to insert a new document, 159 00:08:22,340 --> 00:08:25,010 but that's how MongoDB works. 160 00:08:25,010 --> 00:08:28,070 If you need to work with different collections, 161 00:08:28,070 --> 00:08:30,300 you need to run different queries. 162 00:08:30,300 --> 00:08:33,542 So here we're in the end doing some manual merging 163 00:08:33,542 --> 00:08:36,253 of data stored in different collections. 164 00:08:37,270 --> 00:08:40,429 But that's what I meant with planning ahead for the queries 165 00:08:40,429 --> 00:08:42,669 we are about to run. 166 00:08:42,669 --> 00:08:44,440 Running does extra query here 167 00:08:44,440 --> 00:08:46,470 when a new blog post is created 168 00:08:46,470 --> 00:08:48,900 is not necessarily a great deal 169 00:08:48,900 --> 00:08:52,510 because we won't create new blog posts all the time. 170 00:08:52,510 --> 00:08:55,870 And having that author data store together with the ID 171 00:08:55,870 --> 00:08:59,130 instead of a new post will be very beneficial for us 172 00:08:59,130 --> 00:09:00,220 in the future. 173 00:09:00,220 --> 00:09:02,570 So it's well worth the extra effort here 174 00:09:02,570 --> 00:09:04,430 to get that extra data 175 00:09:04,430 --> 00:09:07,700 so that in the future, when we do work with block posts, 176 00:09:07,700 --> 00:09:09,870 we can save extra queries 177 00:09:09,870 --> 00:09:13,500 because we then don't have to fetch that extra author data 178 00:09:13,500 --> 00:09:17,530 since it will be included in this post data already. 179 00:09:17,530 --> 00:09:19,730 So that's the trade off we're taking here 180 00:09:19,730 --> 00:09:23,280 to optimize the query we are running more often 181 00:09:23,280 --> 00:09:26,740 for the price of having slightly more work to do here 182 00:09:26,740 --> 00:09:29,840 when we insert a new block post. 183 00:09:29,840 --> 00:09:32,910 And if this sounds very challenging and confusing, 184 00:09:32,910 --> 00:09:36,700 be aware that of course either way could be implemented 185 00:09:36,700 --> 00:09:39,230 and it's not horrible if you do it differently 186 00:09:39,230 --> 00:09:42,460 and it is simply something that comes with experience 187 00:09:42,460 --> 00:09:43,970 over time. 188 00:09:43,970 --> 00:09:46,440 So don't be afraid of decisions like this. 189 00:09:46,440 --> 00:09:48,450 There are also will be more examples 190 00:09:48,450 --> 00:09:50,020 like the complete online shop, 191 00:09:50,020 --> 00:09:51,460 which we build in this course 192 00:09:51,460 --> 00:09:54,070 where you can also gain more experience 193 00:09:54,070 --> 00:09:56,600 and practice this even more. 194 00:09:56,600 --> 00:09:58,780 So, that's how I implemented here. 195 00:09:58,780 --> 00:10:02,730 And with that, we got our ID here, the author ID, 196 00:10:02,730 --> 00:10:06,560 and we now got the name, which you can get from author.name. 197 00:10:06,560 --> 00:10:08,920 So from this author document we're fetching 198 00:10:08,920 --> 00:10:10,723 and then accessing the name on it. 199 00:10:12,020 --> 00:10:15,320 And we now even could also store the email here. 200 00:10:15,320 --> 00:10:17,020 As mentioned earlier in the course, 201 00:10:17,020 --> 00:10:20,230 storing the email here as well, has the downside 202 00:10:20,230 --> 00:10:21,910 that if it does change, 203 00:10:21,910 --> 00:10:24,610 we have to change it in the author's collection 204 00:10:24,610 --> 00:10:28,030 and in all the post documents in the posts collection 205 00:10:28,030 --> 00:10:29,360 where we use it. 206 00:10:29,360 --> 00:10:31,900 But if we don't expect the email to change a lot, 207 00:10:31,900 --> 00:10:36,100 that of course is definitely a price we're willing to pay. 208 00:10:36,100 --> 00:10:38,140 If emails do change quite a bit, 209 00:10:38,140 --> 00:10:41,840 you might not wanna store it together with your post data 210 00:10:41,840 --> 00:10:44,450 and therefore really it comes down to your application 211 00:10:44,450 --> 00:10:45,573 and how it works. 212 00:10:46,560 --> 00:10:48,623 Storing it here in addition to the other data 213 00:10:48,623 --> 00:10:50,480 instead of the post, of course, 214 00:10:50,480 --> 00:10:52,320 will have the great advantage 215 00:10:52,320 --> 00:10:56,260 that when we later work with the single post data 216 00:10:56,260 --> 00:10:59,650 and we need both the author name and email, 217 00:10:59,650 --> 00:11:02,890 we won't have to reach out to the authors collection 218 00:11:02,890 --> 00:11:05,040 just to get the email. 219 00:11:05,040 --> 00:11:07,550 That's why here, we'll actually store it together 220 00:11:07,550 --> 00:11:09,410 with the other author data, 221 00:11:09,410 --> 00:11:12,300 but you should be aware of the potential disadvantage 222 00:11:12,300 --> 00:11:14,363 if email address is changed a lot. 223 00:11:16,400 --> 00:11:21,200 But with that finally, we built our new post document here. 224 00:11:21,200 --> 00:11:24,270 And with that bill, we can now insert it. 225 00:11:24,270 --> 00:11:29,270 For this again, I'll get my database here from my DB object. 226 00:11:29,640 --> 00:11:32,883 And here, I now wanna work with the post collection, 227 00:11:33,730 --> 00:11:36,360 which doesn't exist yet, but which will be created 228 00:11:36,360 --> 00:11:39,513 as soon as we start inserting the first document. 229 00:11:40,490 --> 00:11:42,900 And speaking off that, that's what I wanna do 230 00:11:42,900 --> 00:11:46,450 by running insertOne and two insertOne, 231 00:11:46,450 --> 00:11:48,750 I pass my new post object, 232 00:11:48,750 --> 00:11:52,280 which will be inserted as a document into this database 233 00:11:52,280 --> 00:11:54,083 by the MongoDB package. 234 00:11:56,610 --> 00:11:59,200 As always, that's a task that can take longer 235 00:11:59,200 --> 00:12:00,900 so we can await it. 236 00:12:00,900 --> 00:12:03,720 And ultimately we'll get back a result here, 237 00:12:03,720 --> 00:12:06,790 which gives us information about this operation. 238 00:12:06,790 --> 00:12:09,260 For example, it will give us the insertedId. 239 00:12:10,480 --> 00:12:15,270 Here for the moment I'll just console.log that result. 240 00:12:15,270 --> 00:12:18,870 And then as a last step, I wanna send back a response 241 00:12:18,870 --> 00:12:20,513 once all of that was done. 242 00:12:21,890 --> 00:12:24,370 And here since we're handling a post request, 243 00:12:24,370 --> 00:12:28,040 the response I do wanna send back is a redirect. 244 00:12:28,040 --> 00:12:31,260 I wanna redirect back to /posts here. 245 00:12:31,260 --> 00:12:33,130 So to the starting page in the end, 246 00:12:33,130 --> 00:12:35,630 so that we can then instantly view the list 247 00:12:35,630 --> 00:12:37,223 of all the blog posts. 248 00:12:39,330 --> 00:12:42,940 And with all of that, let's see whether that works. 249 00:12:42,940 --> 00:12:45,923 Let's save this file with all those changes, 250 00:12:47,010 --> 00:12:51,920 reload this page and test this with A First Post. 251 00:12:51,920 --> 00:12:55,970 This is a first post that I created, 252 00:12:55,970 --> 00:13:00,240 and then let's see whether that works. 253 00:13:00,240 --> 00:13:05,240 It's MongoDB + Nodejs in action. 254 00:13:06,320 --> 00:13:08,233 This should work! 255 00:13:09,200 --> 00:13:12,680 I'll stick to Maximilian Schwarzmiller and click Add Post. 256 00:13:12,680 --> 00:13:14,930 And now we're on the all posts page, 257 00:13:14,930 --> 00:13:17,080 we don't see the post here yet 258 00:13:17,080 --> 00:13:19,030 because we haven't written any logic 259 00:13:19,030 --> 00:13:21,850 for fetching and displaying posts. 260 00:13:21,850 --> 00:13:24,830 But going back here to the backend, 261 00:13:24,830 --> 00:13:27,810 we can see the log here in the terminal 262 00:13:27,810 --> 00:13:29,460 and that's looking good. 263 00:13:29,460 --> 00:13:31,570 It looks like a new element was added 264 00:13:31,570 --> 00:13:33,890 a new document was added. 265 00:13:33,890 --> 00:13:36,540 And to be really sure that it was added, 266 00:13:36,540 --> 00:13:38,640 we can of course, go back to the shell, 267 00:13:38,640 --> 00:13:41,520 which is connected to the same MongoDB server 268 00:13:41,520 --> 00:13:44,230 as the Nodejs application is, 269 00:13:44,230 --> 00:13:48,780 and here we can access the posts collection, 270 00:13:48,780 --> 00:13:51,110 here in the shell just like this. 271 00:13:51,110 --> 00:13:53,750 There we don't need a collection method, 272 00:13:53,750 --> 00:13:57,200 we can just use the collection name like this 273 00:13:57,200 --> 00:14:00,380 and run, find to see all the posts 274 00:14:00,380 --> 00:14:01,880 and that's looking quite good. 275 00:14:02,950 --> 00:14:06,040 I see my post here with all the data that was submitted 276 00:14:06,040 --> 00:14:08,190 with all the texts that was submitted 277 00:14:08,190 --> 00:14:10,740 with the date and with the author data 278 00:14:10,740 --> 00:14:13,320 and therefore that is looking very promising 279 00:14:13,320 --> 00:14:14,913 and it looks like it's working. 280 00:14:15,770 --> 00:14:18,970 If it's not working for you, double check all your code, 281 00:14:18,970 --> 00:14:20,350 double check your connection. 282 00:14:20,350 --> 00:14:22,540 Of course, that the server is up and running, 283 00:14:22,540 --> 00:14:24,370 the MongoDB server I mean, 284 00:14:24,370 --> 00:14:26,810 and of course also use my code snapshots 285 00:14:26,810 --> 00:14:28,710 to compare your code to mine, 286 00:14:28,710 --> 00:14:31,233 if your code is crashing for some reason. 287 00:14:32,360 --> 00:14:34,940 But with that, we are now inserting posts. 288 00:14:34,940 --> 00:14:37,770 As a next step, I wanna fetch a list of posts 289 00:14:37,770 --> 00:14:40,523 and display it here on the All Posts page.