1
00:00:01,375 --> 00:00:04,199
So let's make sure we can view posts here

2
00:00:04,199 --> 00:00:05,939
on the All Posts page.

3
00:00:05,939 --> 00:00:10,260
For this, in blog.js, where I have all my routes,

4
00:00:10,260 --> 00:00:13,660
it's this route which has to be changed.

5
00:00:13,660 --> 00:00:14,493
Because that is

6
00:00:14,493 --> 00:00:18,410
where we are rendering this posts-list template.

7
00:00:18,410 --> 00:00:21,510
Therefore, here, I wanna fetch all my posts

8
00:00:21,510 --> 00:00:24,315
and then pass them to that template.

9
00:00:24,315 --> 00:00:26,170
And for that, we'll, first of all,

10
00:00:26,170 --> 00:00:27,923
turn this into an async function,

11
00:00:27,923 --> 00:00:30,786
so that we can soon use the await keyword.

12
00:00:30,786 --> 00:00:31,869
Because of course,

13
00:00:31,869 --> 00:00:35,587
all these database operations are asynchronous tasks

14
00:00:35,587 --> 00:00:37,380
that can take a bit longer,

15
00:00:37,380 --> 00:00:39,280
and hence, they all return promises.

16
00:00:39,280 --> 00:00:41,944
That's how the MongoDB package works.

17
00:00:41,944 --> 00:00:46,582
And then, we can use our database with getDb

18
00:00:46,582 --> 00:00:49,784
and reach out to our posts collection here.

19
00:00:49,784 --> 00:00:54,532
And here, I simply wanna find all my posts.

20
00:00:54,532 --> 00:00:55,827
That's the idea here,

21
00:00:55,827 --> 00:00:58,947
and I, again, wanna get them as an array

22
00:00:58,947 --> 00:01:02,163
so that I can work with them just like this in the code.

23
00:01:03,442 --> 00:01:07,347
And then here, I got my posts by awaiting this operation.

24
00:01:07,347 --> 00:01:09,823
That's how we can get all the posts that are stored

25
00:01:09,823 --> 00:01:11,303
in this collection.

26
00:01:12,359 --> 00:01:15,150
Now, of course, the question is now

27
00:01:15,150 --> 00:01:17,531
which data do we need here?

28
00:01:17,531 --> 00:01:18,550
And for this,

29
00:01:18,550 --> 00:01:21,567
it's worth looking at that posts-list template.

30
00:01:21,567 --> 00:01:25,225
In there, I haven't written any code yet

31
00:01:25,225 --> 00:01:28,388
that would define which data should be output here.

32
00:01:28,388 --> 00:01:29,670
But in the end,

33
00:01:29,670 --> 00:01:34,670
what I wanna output here is that post-item include file,

34
00:01:34,990 --> 00:01:36,464
which sits in the includes folder.

35
00:01:36,464 --> 00:01:39,002
And there, I need to post the title,

36
00:01:39,002 --> 00:01:43,360
then the name of the author, not the email address,

37
00:01:43,360 --> 00:01:47,481
not the ID, just the name, then this summary text.

38
00:01:47,481 --> 00:01:50,020
And then, for these buttons, I'll need the ID

39
00:01:50,020 --> 00:01:54,862
of the post later on, but we will worry about that later.

40
00:01:54,862 --> 00:01:58,971
So that means that I don't need the body of the post

41
00:01:58,971 --> 00:02:02,440
and I don't need all the author data here.

42
00:02:02,440 --> 00:02:04,768
I also don't need the date.

43
00:02:04,768 --> 00:02:07,140
Hence, back in blog.js,

44
00:02:07,140 --> 00:02:09,514
we can use this feature called projection,

45
00:02:09,514 --> 00:02:12,011
which I also introduced in the last core section,

46
00:02:12,011 --> 00:02:14,920
to limit the amount of data that's fetched

47
00:02:14,920 --> 00:02:15,884
for every document.

48
00:02:15,884 --> 00:02:18,460
We don't have to do that,

49
00:02:18,460 --> 00:02:20,380
but fetching less data, of course,

50
00:02:20,380 --> 00:02:23,620
means that less data is transferred over the wire

51
00:02:23,620 --> 00:02:25,390
and that can, therefore, be a good idea,

52
00:02:25,390 --> 00:02:29,712
to fetch as little data as required to save bandwidth

53
00:02:29,712 --> 00:02:31,122
on your server.

54
00:02:31,122 --> 00:02:32,630
Of course, here,

55
00:02:32,630 --> 00:02:34,850
since it's all running on our local machine,

56
00:02:34,850 --> 00:02:37,360
and since we're dealing with small amounts of data,

57
00:02:37,360 --> 00:02:38,619
that doesn't matter too much,

58
00:02:38,619 --> 00:02:41,102
but it's not a bad habit to get into

59
00:02:41,102 --> 00:02:43,817
to fetch and work only with the data you really need

60
00:02:43,817 --> 00:02:47,117
instead of always getting everything.

61
00:02:47,117 --> 00:02:48,218
And therefore,

62
00:02:48,218 --> 00:02:51,177
and also to be fair to practice projection,

63
00:02:51,177 --> 00:02:53,920
we can tune this find method,

64
00:02:53,920 --> 00:02:57,375
and we can pass in this second parameter value,

65
00:02:57,375 --> 00:03:00,779
which allows to decide which data we wanna fetch.

66
00:03:00,779 --> 00:03:04,083
But in order to pass in a second value,

67
00:03:04,083 --> 00:03:06,839
we also have to pass in a first value.

68
00:03:06,839 --> 00:03:09,262
And the first value would define

69
00:03:09,262 --> 00:03:13,080
how we wanna filter the data we want to fetch.

70
00:03:13,080 --> 00:03:14,900
Here, I don't wanna filter,

71
00:03:14,900 --> 00:03:15,998
I wanna get all the posts.

72
00:03:15,998 --> 00:03:18,172
But that's easy to implement,

73
00:03:18,172 --> 00:03:21,954
we just have to pass in an empty JavaScript object,

74
00:03:21,954 --> 00:03:25,191
which basically means that no conditions are defined,

75
00:03:25,191 --> 00:03:27,454
and hence, all the data will be fetched.

76
00:03:27,454 --> 00:03:31,032
And then, we can pass in that second parameter value,

77
00:03:31,032 --> 00:03:33,470
which also has a JavaScript object,

78
00:03:33,470 --> 00:03:37,490
which now configures which values we wanna fetch

79
00:03:37,490 --> 00:03:40,260
for the documents that match our conditions.

80
00:03:40,260 --> 00:03:41,971
So in this case for all the documents.

81
00:03:41,971 --> 00:03:45,580
And you learned that this can be controlled by,

82
00:03:45,580 --> 00:03:47,811
for example, saying title: 1.

83
00:03:47,811 --> 00:03:51,700
This means that I do wanna include the title

84
00:03:51,700 --> 00:03:52,648
for every post.

85
00:03:52,648 --> 00:03:57,592
As soon as you define at least one projection like this,

86
00:03:57,592 --> 00:04:00,320
all the other fields, except for the ID,

87
00:04:00,320 --> 00:04:02,232
will automatically be excluded

88
00:04:02,232 --> 00:04:05,130
so now we have to list all the fields

89
00:04:05,130 --> 00:04:06,729
that we wanna include here.

90
00:04:06,729 --> 00:04:09,374
For example, I also wanna get the summary,

91
00:04:09,374 --> 00:04:11,656
so I also said summary: 1,

92
00:04:11,656 --> 00:04:16,656
and I also, as mentioned, wanna get the author name.

93
00:04:19,209 --> 00:04:21,315
The ID will be fetched automatically

94
00:04:21,315 --> 00:04:23,215
so we don't have to list that here.

95
00:04:23,215 --> 00:04:26,334
The author name of course is a nested field,

96
00:04:26,334 --> 00:04:29,331
but we can simply write "author.name"

97
00:04:29,331 --> 00:04:31,774
between quotes here and set this to 1.

98
00:04:31,774 --> 00:04:33,294
So you can also project

99
00:04:33,294 --> 00:04:36,843
and include or exclude nested fields.

100
00:04:38,975 --> 00:04:40,970
With that, if I reformat this

101
00:04:40,970 --> 00:04:42,600
to make this a bit easier to read,

102
00:04:42,600 --> 00:04:46,390
this is now our full query that will fetch us all our posts,

103
00:04:46,390 --> 00:04:48,500
and that will fetch us this data

104
00:04:48,500 --> 00:04:50,819
plus the ID for every post.

105
00:04:50,819 --> 00:04:54,576
And hence, we can now hand this off to the template

106
00:04:54,576 --> 00:04:58,175
and make a post key available to the template,

107
00:04:58,175 --> 00:05:02,172
and store the post data under that key

108
00:05:02,172 --> 00:05:04,983
in that data which is passed to the template.

109
00:05:06,666 --> 00:05:08,862
Hence, now it's time to continue

110
00:05:08,862 --> 00:05:13,831
in that posts-list template here, here.

111
00:05:13,831 --> 00:05:16,526
There, I now wanna output all my posts

112
00:05:16,526 --> 00:05:18,706
and I also wanted to handle the case

113
00:05:18,706 --> 00:05:20,861
that we maybe don't have any posts yet.

114
00:05:20,861 --> 00:05:24,356
For this, we can, first of all, start with an if check

115
00:05:24,356 --> 00:05:26,905
and check if posts is false,

116
00:05:26,905 --> 00:05:29,416
so if we don't have posts,

117
00:05:29,416 --> 00:05:33,020
or if posts.length is equal to zero,

118
00:05:33,020 --> 00:05:35,231
which also means that we don't have any posts.

119
00:05:35,231 --> 00:05:38,553
And in that case, I wanna output something.

120
00:05:38,553 --> 00:05:43,070
And then here, we also need to close the curly braces.

121
00:05:43,070 --> 00:05:43,903
Don't forget this.

122
00:05:43,903 --> 00:05:45,882
And here, I just wanna say

123
00:05:45,882 --> 00:05:50,882
"No posts found - maybe start creating some", like this,

124
00:05:53,046 --> 00:05:55,617
and then maybe also add an anchor element,

125
00:05:55,617 --> 00:05:57,631
where I point at the new-post page

126
00:05:57,631 --> 00:06:02,190
and say, "Create a new Post"

127
00:06:02,190 --> 00:06:05,430
and also give this a class of "btn",

128
00:06:05,430 --> 00:06:07,995
which is a predefined CSS class written down

129
00:06:07,995 --> 00:06:11,313
in the CSS files you find in this project.

130
00:06:12,805 --> 00:06:16,500
Now, of course, we know we already have a post.

131
00:06:16,500 --> 00:06:18,503
So we also wanna handle the else case,

132
00:06:18,503 --> 00:06:23,132
that we do have posts, and also close this curly brace here.

133
00:06:23,132 --> 00:06:27,012
And here, I now wanna loop through all the posts

134
00:06:27,012 --> 00:06:31,449
and repeat this post-item includes template for every post.

135
00:06:31,449 --> 00:06:35,033
First of all, though, I'll create an ordered list,

136
00:06:35,033 --> 00:06:37,993
doesn't really matter if it's ordered or unordered,

137
00:06:37,993 --> 00:06:42,212
and I'll give it an ID of posts-list for styling reasons,

138
00:06:42,212 --> 00:06:47,156
because some of the predefined CSS styles rely on this ID.

139
00:06:47,156 --> 00:06:52,134
And then, in there, we can write a for-of loop

140
00:06:52,134 --> 00:06:56,060
and loop through all the post of posts,

141
00:06:56,060 --> 00:06:57,400
open the curly brace,

142
00:06:57,400 --> 00:07:00,985
and then also close the curly brace here.

143
00:07:00,985 --> 00:07:05,983
And between those opening and closing tags,

144
00:07:05,983 --> 00:07:10,493
we can then add a list item for every post we fetched.

145
00:07:12,016 --> 00:07:14,620
And instead of this list item,

146
00:07:14,620 --> 00:07:19,050
I now wanna include this post-item EJS file.

147
00:07:19,050 --> 00:07:24,050
So here, I'll use this dash EJS opening tag here

148
00:07:25,520 --> 00:07:27,815
and call the built-in include function

149
00:07:27,815 --> 00:07:32,815
and then close my tag here and include includes/post-item.

150
00:07:35,836 --> 00:07:40,836
Now to this included file, I wanna make this post available,

151
00:07:41,535 --> 00:07:44,418
so I'll add a second parameter value

152
00:07:44,418 --> 00:07:47,619
to the include function, which is an object with data

153
00:07:47,619 --> 00:07:51,000
that will be provided to this included template.

154
00:07:51,000 --> 00:07:53,773
And here, I'll just expose this post here

155
00:07:53,773 --> 00:07:56,727
under a key also named post.

156
00:07:56,727 --> 00:08:01,234
So the left side here is a new key made available

157
00:08:01,234 --> 00:08:02,440
to the template.

158
00:08:02,440 --> 00:08:04,383
The right side is referring to this post,

159
00:08:04,383 --> 00:08:05,970
which I got from this loop.

160
00:08:05,970 --> 00:08:09,762
So this will now replicate the post-item template

161
00:08:09,762 --> 00:08:11,655
for every post I fetched.

162
00:08:11,655 --> 00:08:15,303
And hence, we can now work in this post-item template.

163
00:08:16,790 --> 00:08:19,634
Here for example, I wanna output the title,

164
00:08:19,634 --> 00:08:24,634
and that can be output with post.title.

165
00:08:24,775 --> 00:08:29,775
Post is available as a key because of this key I chose here

166
00:08:31,150 --> 00:08:34,323
for the data passed to post-item EJS,

167
00:08:35,309 --> 00:08:37,107
and title is available

168
00:08:37,107 --> 00:08:39,820
because that's the property name I chose

169
00:08:39,820 --> 00:08:41,938
for the documents stored in the database.

170
00:08:41,938 --> 00:08:45,058
If you're storing your data with different properties

171
00:08:45,058 --> 00:08:47,600
in your documents in the database,

172
00:08:47,600 --> 00:08:50,253
you have to access different properties here.

173
00:08:51,246 --> 00:08:54,140
Now here, I wanna output the author name,

174
00:08:54,140 --> 00:08:57,002
and therefore, that's post.author.name.

175
00:08:57,002 --> 00:08:58,628
We fetched that data,

176
00:08:58,628 --> 00:09:01,482
and we didn't need to join any data

177
00:09:01,482 --> 00:09:04,040
or run any extra queries,

178
00:09:04,040 --> 00:09:06,310
because we stored that data together

179
00:09:06,310 --> 00:09:08,523
with our other posts data.

180
00:09:10,024 --> 00:09:15,024
And here, we then output post.summary, like this.

181
00:09:16,268 --> 00:09:19,810
Now, I will work on these buttons and links later.

182
00:09:19,810 --> 00:09:21,429
For the moment, that's it.

183
00:09:21,429 --> 00:09:26,190
So if you save all those files, if you reload All Posts,

184
00:09:26,190 --> 00:09:28,061
you should see something like this.

185
00:09:28,061 --> 00:09:31,114
You should see your first post that you added

186
00:09:31,114 --> 00:09:33,979
with that data that's fetched from the database.

187
00:09:33,979 --> 00:09:38,139
And that's, of course, another huge step forward.

188
00:09:38,139 --> 00:09:39,492
As a next step,

189
00:09:39,492 --> 00:09:42,738
I wanna make sure that this View Post button works.

190
00:09:42,738 --> 00:09:44,980
And for this, of course,

191
00:09:44,980 --> 00:09:47,154
that's also a great practice for you.

192
00:09:47,154 --> 00:09:50,215
With the things we already learned in this

193
00:09:50,215 --> 00:09:51,714
and the previous section,

194
00:09:51,714 --> 00:09:56,060
you should now be able to also hook up this link here,

195
00:09:56,060 --> 00:09:57,218
which it actually is,

196
00:09:57,218 --> 00:10:00,856
to that post-detail template which we got here.

197
00:10:00,856 --> 00:10:05,463
And you should be able to register a new route for this,

198
00:10:05,463 --> 00:10:09,639
handle different IDs in that route for the different posts,

199
00:10:09,639 --> 00:10:14,578
fetch the data for the different posts by their IDs,

200
00:10:14,578 --> 00:10:18,370
and pass that post data to the template

201
00:10:18,370 --> 00:10:19,799
to then output it there.

202
00:10:19,799 --> 00:10:22,216
Definitely try this on your own first.

203
00:10:22,216 --> 00:10:25,823
We're going to do this together in the next lecture.