1
00:00:00,280 --> 00:00:02,750
OK we'll come back for the next few videos.

2
00:00:02,760 --> 00:00:06,620
We'll be focusing on creating the blog app that I showed in the last video.

3
00:00:07,020 --> 00:00:08,220
And it's going to take a few videos.

4
00:00:08,220 --> 00:00:13,380
We're going to go one route at a time because of how important these restful routes are in this first

5
00:00:13,380 --> 00:00:13,920
video.

6
00:00:13,920 --> 00:00:17,230
We'll be focusing on index and then we'll go in order.

7
00:00:17,280 --> 00:00:20,280
Focus on new and create and then show edit and update.

8
00:00:20,340 --> 00:00:25,740
And then finally a video on destroy and along with creating the app and adding in the seven routes that

9
00:00:25,740 --> 00:00:32,100
we need most are going to introduce semantic UI which is another framework out there similar to bootstrap

10
00:00:32,160 --> 00:00:34,020
for CSSA and Javascript.

11
00:00:34,050 --> 00:00:37,890
So again in the last few I mentioned Why really I just I like how it looks.

12
00:00:37,890 --> 00:00:43,380
That's one reason but most importantly I just want to expose you to another framework so that you can

13
00:00:43,380 --> 00:00:45,460
see how similar things are.

14
00:00:45,670 --> 00:00:50,670
You might be you might be thinking it's a bad idea for me to show you another framework to bombard you

15
00:00:50,670 --> 00:00:54,030
with all this information but the good news is things are so similar.

16
00:00:54,120 --> 00:00:59,730
Once you see two or three you start to see just how much they have in common and that it's really more

17
00:00:59,730 --> 00:01:01,940
that they have in common than they do differently.

18
00:01:02,160 --> 00:01:06,590
So semantically why but we're going to start by creating our app.

19
00:01:06,750 --> 00:01:09,700
So I'm inside of a directory called restful routing.

20
00:01:09,800 --> 00:01:13,040
If you want to follow along there is a solution already there.

21
00:01:13,140 --> 00:01:18,480
So if you want to reference that feel free to do that and if you don't want to go through the creation

22
00:01:18,510 --> 00:01:23,550
of the app if you don't want to cover index new and create because you've seen that before you can skip

23
00:01:23,550 --> 00:01:24,190
ahead.

24
00:01:24,480 --> 00:01:27,610
But I recommend you go through all the routes with me code along.

25
00:01:27,720 --> 00:01:29,560
It's really important that we get this down.

26
00:01:29,580 --> 00:01:32,340
It's really the bread and butter of our express apps.

27
00:01:32,900 --> 00:01:33,300
OK.

28
00:01:33,360 --> 00:01:37,560
So we'll create our application I'll just call it the blog app.

29
00:01:38,100 --> 00:01:47,250
Actually let's call it restful blog app and then CD and then our favorite NPM and it

30
00:01:50,490 --> 00:01:54,930
actually yes is our entry point.

31
00:01:54,960 --> 00:01:56,680
Great.

32
00:01:57,550 --> 00:01:58,630
That's OK.

33
00:01:58,710 --> 00:01:59,270
OK.

34
00:01:59,340 --> 00:02:07,170
Now let's install some things that we need so NPM install and the first one of course is express and

35
00:02:07,170 --> 00:02:09,610
then will also add in mongoose.

36
00:02:10,170 --> 00:02:12,840
And while we're here we'll do body parser.

37
00:02:13,150 --> 00:02:22,050
So those three dash dash save remember that body parser is how we get data out of the form the form

38
00:02:22,050 --> 00:02:27,200
sends data into the request body and then we parse the request body using body person.

39
00:02:27,540 --> 00:02:29,250
So that would be in the next video.

40
00:02:29,250 --> 00:02:30,680
For now we're just doing index.

41
00:02:30,840 --> 00:02:34,060
So we have that set up let's create or actually yes.

42
00:02:34,320 --> 00:02:40,740
Now we'll open up apparatus and do our standard top of the file where we require express

43
00:02:43,400 --> 00:02:56,790
required express and then we'll do app equals Express and will also add in Vadi parser just while we're

44
00:02:56,790 --> 00:03:02,240
here because require body Dasch parser.

45
00:03:02,550 --> 00:03:04,110
And finally we'll do mongoose

46
00:03:09,390 --> 00:03:12,090
and I do like to clean this up.

47
00:03:12,180 --> 00:03:14,710
I'd like to order them by length as well.

48
00:03:14,820 --> 00:03:21,350
So we end up with body parts or first if we follow my convention.

49
00:03:21,360 --> 00:03:25,800
But it's not that important but just say no I do like to do this.

50
00:03:25,920 --> 00:03:32,470
Body parts are first and then next we have mongoose and then express and then at.

51
00:03:33,240 --> 00:03:38,420
And that's just to line them up by length and then we can indent things if we really want to but it's

52
00:03:38,430 --> 00:03:42,280
not the point of this video so I won't spend too much time doing this.

53
00:03:43,440 --> 00:03:45,330
OK so we have that done now.

54
00:03:45,360 --> 00:03:47,070
Make sure every semi-colon.

55
00:03:47,100 --> 00:03:50,070
Next up we need to set up mongoose.

56
00:03:50,070 --> 00:03:51,730
So are our blog model.

57
00:03:51,760 --> 00:03:58,770
It's going to be called blog will have a title that will have an image you Arel and then we'll have

58
00:03:58,880 --> 00:04:03,410
we'll just call it body which will be the blog text the content of that post.

59
00:04:03,450 --> 00:04:09,660
So title image and body and they're all strings and also add in something new you haven't seen which

60
00:04:09,660 --> 00:04:12,650
is a date so created will be a date.

61
00:04:12,960 --> 00:04:14,070
So it's come at that.

62
00:04:14,250 --> 00:04:21,150
And before we can do any of that we need to configure mongoose So we need our mongoose connect and we're

63
00:04:21,150 --> 00:04:27,080
going to connect to Mongo divi Cole and slash slash local host

64
00:04:31,320 --> 00:04:39,590
slash the name of our app and our app will be called restful blog.

65
00:04:40,410 --> 00:04:42,410
And again that doesn't matter.

66
00:04:42,450 --> 00:04:44,040
We're creating it for the first time.

67
00:04:44,130 --> 00:04:48,540
So as long as we don't change it in the future it will always connect to restful walk at the first time

68
00:04:48,540 --> 00:04:48,570
.

69
00:04:48,570 --> 00:04:49,640
It will create it.

70
00:04:50,320 --> 00:04:50,700
OK.

71
00:04:50,700 --> 00:04:53,010
And just so we don't have to do this later on.

72
00:04:53,100 --> 00:05:03,130
But set up our data set view engine to be yes which we also need to install.

73
00:05:03,720 --> 00:05:13,470
And while we wait for that to go let's do an app use express that static and the public directory so

74
00:05:13,470 --> 00:05:15,940
that we can serve our custom style sheet.

75
00:05:16,050 --> 00:05:22,140
When we get to that just good practice to do at the beginning of any express app and will also add an

76
00:05:22,580 --> 00:05:27,000
app don't use body parser which is our body parser.

77
00:05:27,090 --> 00:05:40,140
You are all encoded true extended call and true kind of a mouthful but can these three lines you can

78
00:05:40,140 --> 00:05:42,710
just copy from pre-existing apps as well.

79
00:05:43,290 --> 00:05:48,310
So we have that set up then at the very bottom just to make sure our express app is working.

80
00:05:48,510 --> 00:05:59,440
Let's do the opt out lesson where we have process daddy in the port process env dot IP and add in callback

81
00:06:00,260 --> 00:06:05,020
Council adult log server is running.

82
00:06:05,100 --> 00:06:06,130
All right.

83
00:06:06,150 --> 00:06:08,260
Let's test it out.

84
00:06:08,970 --> 00:06:09,900
No problems.

85
00:06:09,900 --> 00:06:11,080
Great.

86
00:06:11,130 --> 00:06:13,650
So now let's work on mongoose.

87
00:06:13,650 --> 00:06:15,810
So we have mongoose connected.

88
00:06:15,810 --> 00:06:18,920
Now we need to create our schema and our model.

89
00:06:19,140 --> 00:06:21,170
So we'll start with the schema.

90
00:06:21,420 --> 00:06:31,050
We'll just do a var log schema equals new mongoose that schema like that and to have it title that's

91
00:06:31,050 --> 00:06:38,100
a string an image that's a string a body that's also a string.

92
00:06:38,100 --> 00:06:41,360
And then we're having our data trickling calling created.

93
00:06:42,120 --> 00:06:48,120
And what we can do is just say that this isn't that convenient because we'll have to manually specify

94
00:06:48,120 --> 00:06:49,000
the date.

95
00:06:49,470 --> 00:06:51,870
We don't want to use or to actually type in the date.

96
00:06:51,870 --> 00:06:56,760
We just wanted to take the current date when this user created the post or created the blog.

97
00:06:56,760 --> 00:07:01,080
Just grab that date so we can set a default value to something new.

98
00:07:01,590 --> 00:07:08,210
We specify type as date but then we also specify default date dot.

99
00:07:08,220 --> 00:07:11,680
Now and that will work just fine for us.

100
00:07:11,940 --> 00:07:17,160
And this says that created should be a date and that there's a default value data now.

101
00:07:17,340 --> 00:07:21,900
So we could also do the same thing for image if we wanted to have a default image.

102
00:07:21,900 --> 00:07:27,820
We could do type string and then defaults if the user didn't enter an image.

103
00:07:27,900 --> 00:07:35,490
We could have a string like placeholder image and peg or something but we won't do that but we could

104
00:07:35,490 --> 00:07:37,620
easily do that if we wanted to.

105
00:07:38,410 --> 00:07:39,400
OK.

106
00:07:40,170 --> 00:07:46,710
And one last note here you'll see this indented sometimes like this.

107
00:07:46,710 --> 00:07:49,780
It's just an object so because it's short.

108
00:07:49,830 --> 00:07:50,970
I'm not going to do this.

109
00:07:51,000 --> 00:07:53,390
It takes up too much space or actually yes.

110
00:07:53,470 --> 00:07:55,470
Is it going to be cluttered as it is.

111
00:07:55,500 --> 00:07:57,070
So I leave it like this.

112
00:07:57,640 --> 00:08:02,100
OK title image body created and then the next step.

113
00:08:02,100 --> 00:08:05,390
Get rid of these for now is to compile it into that model.

114
00:08:05,400 --> 00:08:15,480
So far blog equals mongoose dot the model log log schema.

115
00:08:15,480 --> 00:08:17,040
There we go.

116
00:08:17,250 --> 00:08:26,830
Save that and I'm going to add in a comment here that just says mongoose slash model config.

117
00:08:27,070 --> 00:08:29,960
Up here I'll just add another comment here.

118
00:08:30,060 --> 00:08:37,470
It's called app config and then we'll add in a comment here routes.

119
00:08:37,680 --> 00:08:40,030
Let's just call it rest for Rex.

120
00:08:40,050 --> 00:08:45,570
So this is where we'll now go and add our index route or show route new create all seven reps.

121
00:08:45,870 --> 00:08:48,550
And yes this file is going to be a little bit cluttered.

122
00:08:48,550 --> 00:08:54,060
Again I'm a broken record on this but we will be splitting this off into separate things very soon.

123
00:08:54,060 --> 00:08:59,100
I'll show you how we can have a model's file multiple models files how we can have route's files and

124
00:08:59,100 --> 00:09:02,640
we can have files for configuration and for middleware.

125
00:09:02,790 --> 00:09:05,450
Lots of different things but to keep it simple.

126
00:09:05,520 --> 00:09:10,410
Early on I don't want to confuse you or I think it's hard to watch if someone switches files constantly

127
00:09:10,410 --> 00:09:10,440
.

128
00:09:10,440 --> 00:09:11,460
It's hard to keep track.

129
00:09:11,550 --> 00:09:12,570
So we're going to do it in one file.

130
00:09:12,570 --> 00:09:15,950
But just remember this isn't necessarily the best practice.

131
00:09:15,960 --> 00:09:20,240
If this was a really large app and especially if we had a lot of developers working on it.

132
00:09:20,640 --> 00:09:23,020
So now we started the wrestle wraps.

133
00:09:23,070 --> 00:09:26,360
So remember we're starting with index names index.

134
00:09:26,400 --> 00:09:33,450
That path should be slash blogs as a get request and it should list all the blogs.

135
00:09:33,450 --> 00:09:37,390
So let's do that now before we do that let's make sure things work.

136
00:09:37,680 --> 00:09:40,540
If I run my app no problems yet.

137
00:09:40,950 --> 00:09:46,650
And let's actually do a single creation of a blog so we have something to look at.

138
00:09:46,650 --> 00:09:48,140
So we'll be really simple.

139
00:09:48,380 --> 00:09:58,440
This review blog does create and then we want to have title just call it test blog image and I'll take

140
00:09:58,440 --> 00:10:02,780
an image from this site and splash dot com is a great resource.

141
00:10:02,790 --> 00:10:08,100
I'll show you in a future video that has a bunch of free free images that you can do whatever you want

142
00:10:08,100 --> 00:10:08,520
with.

143
00:10:08,670 --> 00:10:14,550
And so it is going to take this one of a dog and copy that in there that can really be any you know

144
00:10:14,610 --> 00:10:21,760
we just want to have something to test and then we'll have our body and our body will just be hello

145
00:10:21,810 --> 00:10:22,080
.

146
00:10:22,320 --> 00:10:27,090
This is a blog post and we've created blank.

147
00:10:27,140 --> 00:10:28,610
All rape.

148
00:10:28,950 --> 00:10:30,240
So let's just try this.

149
00:10:30,240 --> 00:10:35,820
We won't do anything as far as callback we'll just assume that it works and then we'll test out in our

150
00:10:35,820 --> 00:10:36,910
Mongo cons..

151
00:10:36,930 --> 00:10:39,260
So don't let's run the file.

152
00:10:39,480 --> 00:10:42,050
Nothing happens or it appears like nothing happened.

153
00:10:42,180 --> 00:10:53,710
But if you go to Mangu and we use rest full log at so we called it just to double check and then we

154
00:10:53,710 --> 00:11:00,990
do D-B dot logs up find we have our first blog in there which is great.

155
00:11:01,170 --> 00:11:02,520
So those two things for us.

156
00:11:02,520 --> 00:11:09,120
One it proves that our model set up correctly but to once we get the index going we want to make sure

157
00:11:09,120 --> 00:11:12,310
we have something to see because it's supposed to list all the blogs.

158
00:11:12,420 --> 00:11:16,830
If we don't have any blogs to see that it's a little underwhelming and we won't be able to tell if it

159
00:11:16,830 --> 00:11:18,540
works.

160
00:11:18,540 --> 00:11:19,900
So I exit out of there.

161
00:11:19,980 --> 00:11:21,680
Now let's focus on our route.

162
00:11:21,710 --> 00:11:27,330
I mean to get rid of this I don't want to create a new blog every single time I run this app especially

163
00:11:27,330 --> 00:11:31,610
not the same one over and over though that dog is really adorable.

164
00:11:31,620 --> 00:11:33,570
What we want to do is create our index route.

165
00:11:33,930 --> 00:11:44,190
Again slash blogs as you get request that just looks like apt get slash logs add in our standard request

166
00:11:44,190 --> 00:11:52,170
response callback and then we'll do a restart render and the template that will render will just be

167
00:11:52,170 --> 00:11:58,350
called index dot Ejay us and we don't need that Ejay Yes or just index.

168
00:11:58,410 --> 00:12:04,190
And that's again because of this line here we don't need that Ejay us but we do need is a template called

169
00:12:04,200 --> 00:12:06,750
index being a directory called views.

170
00:12:07,170 --> 00:12:08,260
So we'll do that now.

171
00:12:08,340 --> 00:12:13,000
Make directory views touch views slash index.

172
00:12:13,680 --> 00:12:16,460
And I did make a small mistake which is indexed.

173
00:12:16,500 --> 00:12:17,550
E.J. Yes.

174
00:12:17,550 --> 00:12:24,750
So for some more practice or remove that file I'll remove it or at least use Flash index and then recreate

175
00:12:24,750 --> 00:12:25,180
it.

176
00:12:25,320 --> 00:12:27,340
Touch the use slash index dot.

177
00:12:27,350 --> 00:12:28,380
E.J. Yes.

178
00:12:28,620 --> 00:12:38,060
And then open it up and we'll just started this simple H-1 index page and save.

179
00:12:38,510 --> 00:12:41,050
So let's see that we get that index page.

180
00:12:41,190 --> 00:12:44,970
Right now it's not fulfilling the index page functionality.

181
00:12:44,970 --> 00:12:50,760
Now if we go to a preview which you can get to from a few ways I just go to Web Dev Bootcamp dot com

182
00:12:51,600 --> 00:12:58,610
dash learn with code dot C9 that you teach me or you can go to preview preview running application.

183
00:12:58,620 --> 00:13:05,010
It will open it up here but then you can click this button to see it in your browser or you can keep

184
00:13:05,010 --> 00:13:06,370
it here if you prefer it.

185
00:13:06,810 --> 00:13:07,270
OK.

186
00:13:07,440 --> 00:13:15,450
So we get an error here and that's because we don't have a route route so we need slash logs and we

187
00:13:15,450 --> 00:13:17,230
get our index page route.

188
00:13:17,400 --> 00:13:24,420
It is conventional for the route page the home page to go to the index of something you think of Reddit

189
00:13:24,420 --> 00:13:25,950
or Facebook.

190
00:13:25,950 --> 00:13:31,830
For example on reddit you go to the home page and you see an index of all of the Reddit posts on Facebook

191
00:13:32,070 --> 00:13:35,660
you see an index of all the posts and photos and whatever else there is.

192
00:13:35,670 --> 00:13:46,380
So let's do that now after get slash function request response and we'll just do a redstart read direct

193
00:13:46,890 --> 00:13:49,600
to slash blogs.

194
00:13:50,130 --> 00:13:54,280
Now for restart we refresh.

195
00:13:54,300 --> 00:13:55,010
Nothing should change.

196
00:13:55,020 --> 00:13:58,490
But if I go to slash I end up on slash blogs as well.

197
00:13:58,880 --> 00:13:59,360
OK.

198
00:13:59,370 --> 00:14:01,950
Now I'd add in the index functionality.

199
00:14:01,950 --> 00:14:06,140
So we need to retrieve all of the blogs from the database.

200
00:14:06,450 --> 00:14:14,380
So that's going to be a blog up find on find everything and then we'll have our call back with an error

201
00:14:14,390 --> 00:14:14,590
.

202
00:14:14,910 --> 00:14:24,840
And then our data which I'll call blogs and then we'll do an F error and that's just to come to that

203
00:14:24,840 --> 00:14:25,700
log.

204
00:14:26,160 --> 00:14:34,770
Ever else we'll add in our redstart render index except we don't want to just keep it like that.

205
00:14:35,010 --> 00:14:38,170
We want to render index with data.

206
00:14:38,430 --> 00:14:42,300
So our data will be let's call it blogs as well

207
00:14:44,730 --> 00:14:47,100
as equal to blogs.

208
00:14:47,550 --> 00:14:52,720
So we're passing the data coming back from the database from our Dopp find whatever comes back.

209
00:14:52,860 --> 00:14:56,030
We're then sending it through under the name blogs.

210
00:14:56,400 --> 00:15:00,990
Yes it's a little confusing but this is really pretty conventional to see where they have the exact

211
00:15:00,990 --> 00:15:01,860
same name.

212
00:15:02,170 --> 00:15:07,490
OK so now let's go to a template and add in some code.

213
00:15:07,500 --> 00:15:10,790
Let's just take a look at blogs to start just like that.

214
00:15:10,860 --> 00:15:12,800
Make sure it's getting there.

215
00:15:12,990 --> 00:15:14,680
Refresh the page.

216
00:15:15,870 --> 00:15:17,240
And we're getting our list.

217
00:15:17,250 --> 00:15:20,200
It's one blog right now but we're seeing it here.

218
00:15:20,250 --> 00:15:20,890
Great.

219
00:15:21,060 --> 00:15:24,220
So now let's display it a little nicer.

220
00:15:24,240 --> 00:15:32,220
We won't do anything crazy but what we will do is loop through all blogs so blogs for each function

221
00:15:32,820 --> 00:15:40,230
log and then we need this down here.

222
00:15:42,740 --> 00:15:49,950
And then down here we need other tags the closing bracket every go and then we need parentheses as well

223
00:15:49,950 --> 00:15:50,650
.

224
00:15:51,330 --> 00:15:55,530
And for each one we'll make a div inside that div.

225
00:15:55,770 --> 00:15:58,440
Let's do an H 2.

226
00:15:58,770 --> 00:16:02,410
And that would be the title LUGG that title.

227
00:16:02,760 --> 00:16:07,730
Remember we need the equal sign there but not on the each or the brackets.

228
00:16:07,860 --> 00:16:16,450
Then will display an image and source is equal to Ejaz brackets.

229
00:16:16,630 --> 00:16:21,420
Lagat image and I forgot to mention this.

230
00:16:21,480 --> 00:16:27,240
If you take a look at created you can see we have this nice crazy date time here that was created for

231
00:16:27,240 --> 00:16:33,420
us automatically because we said it as the default value so we can display that to just below the image

232
00:16:33,500 --> 00:16:33,740
.

233
00:16:33,850 --> 00:16:44,010
Just do a span for now that has Lagat created and then of course we need our blog post itself which

234
00:16:44,010 --> 00:16:45,000
will be a paragraph

235
00:16:47,910 --> 00:16:50,100
which is body.

236
00:16:50,100 --> 00:16:50,520
All right.

237
00:16:50,520 --> 00:16:52,500
A lot of content there.

238
00:16:52,980 --> 00:16:57,860
Refresh the page and you can see our first I post is here.

239
00:16:58,200 --> 00:17:00,430
You'll just have to trust that this is working for now.

240
00:17:00,630 --> 00:17:02,120
Yes it's showing us one.

241
00:17:02,130 --> 00:17:06,630
Technically we don't know if it's showing us all of them yet because we only have one of the database

242
00:17:06,960 --> 00:17:07,790
in the next video.

243
00:17:07,830 --> 00:17:09,300
We'll work on new and create