1
00:00:00,450 --> 00:00:06,810
OK welcome back in this unit we're focusing on something called rest r e s t.

2
00:00:06,810 --> 00:00:12,140
It stands for representational state transfer but that's really not key to this lesson.

3
00:00:12,150 --> 00:00:13,130
It's not that important.

4
00:00:13,230 --> 00:00:18,660
And actually I bet that most developers if you ask them what it stands for they would have no clue but

5
00:00:18,660 --> 00:00:23,130
they would be able to tell you what rest is and name the seven different restful routes that we'll see

6
00:00:23,130 --> 00:00:25,910
in a moment but they probably won't know what it stands for.

7
00:00:26,040 --> 00:00:30,290
So not that important what is important though is defining what rest is.

8
00:00:30,510 --> 00:00:33,710
So rest isn't a new tool or a new technology.

9
00:00:33,870 --> 00:00:35,920
It's not a language or anything like that.

10
00:00:35,940 --> 00:00:37,410
It's much simpler.

11
00:00:37,500 --> 00:00:40,800
Rest is just a pattern for defining our routes.

12
00:00:40,830 --> 00:00:46,490
It's a way of mapping HTP routes and cried together and remember crud.

13
00:00:46,490 --> 00:00:50,490
It's another acronym create read update and destroy.

14
00:00:50,610 --> 00:00:54,240
So we have these functionalities.

15
00:00:55,360 --> 00:00:58,170
And let's take an example of users.

16
00:00:58,200 --> 00:01:03,020
So my site has users and I want someone to be able to create a new user.

17
00:01:03,240 --> 00:01:10,530
Someone should be able to read users which means retrieving information on users updating users and

18
00:01:10,530 --> 00:01:17,670
destroying users or deleting them or if you take the example of a blog site which you have right here

19
00:01:18,690 --> 00:01:22,010
I want to be able to read all blogs so that's what I see right here.

20
00:01:22,010 --> 00:01:28,850
This is a list of all blogs but then I want to be able to add a new blog which is what I have here.

21
00:01:28,920 --> 00:01:31,590
New post.

22
00:01:31,590 --> 00:01:37,740
I want to be able to edit a blog see a form to edit it.

23
00:01:37,850 --> 00:01:43,770
I had to make commission points and you can see my blog was edited and I want to be able to delete a

24
00:01:43,770 --> 00:01:44,520
blog.

25
00:01:44,760 --> 00:01:48,090
So let's delete this one delete blog.

26
00:01:48,350 --> 00:01:51,820
And I need vouch for all of that instead of my express app.

27
00:01:51,840 --> 00:01:58,470
There's seven different appetite gets amped up post apps dot something raps that are being defined and

28
00:01:58,500 --> 00:02:00,710
yes 7 sounds like more than we need.

29
00:02:00,840 --> 00:02:07,550
But remember that for some operations like for creating something we need to reps we need the form route

30
00:02:07,740 --> 00:02:14,000
that shows us this form and then we need a place for the form to submit the same thing goes for it.

31
00:02:14,040 --> 00:02:22,080
So to update something we need a form like this either needs somewhere for the form to go so we'll spend

32
00:02:22,080 --> 00:02:27,810
some more time going over the particular routes but what's important is that rest is just a convention

33
00:02:27,810 --> 00:02:27,910
.

34
00:02:27,960 --> 00:02:33,330
It's an architecture for mapping our HGP routes to crud functionality.

35
00:02:33,660 --> 00:02:42,750
So what we could do let's say I wanted to be able to take logs or entity or thing is blog if I wanted

36
00:02:42,750 --> 00:02:50,060
to have a page where you could destroy a blog for instance are you or it could be something like blog

37
00:02:50,580 --> 00:02:53,180
or just destroy a blog.

38
00:02:53,520 --> 00:02:58,930
And then we need a blog that we're destroying so we'd have an ID there or to update.

39
00:02:59,160 --> 00:03:08,940
You might have something like Update blog slash ID and to read all the blogs or something like Slash

40
00:03:09,330 --> 00:03:13,850
read all blogs or just all blogs.

41
00:03:13,950 --> 00:03:15,810
And the point is we can do whatever we want.

42
00:03:16,200 --> 00:03:19,200
And that's the point of rest is that you don't do whatever you want.

43
00:03:19,200 --> 00:03:24,690
You follow a pattern and the reason that you make restful wraps the whole point behind it is one it's

44
00:03:24,690 --> 00:03:25,920
conventional.

45
00:03:25,920 --> 00:03:28,650
You see it all over the place in different applications.

46
00:03:28,650 --> 00:03:33,900
But more importantly is the fact that it's reliable so that other people who are working in your code

47
00:03:34,230 --> 00:03:40,290
or when we talk about API is if you're interacting with a restful API or someone is interacting with

48
00:03:40,290 --> 00:03:46,260
your own API that you've created you know that if something is restful it follows a particular pattern

49
00:03:46,830 --> 00:03:48,680
and that pattern is this year.

50
00:03:48,860 --> 00:03:51,670
So I have a table of all the different restful routes.

51
00:03:51,780 --> 00:03:55,030
In this case for what else but dogs.

52
00:03:55,410 --> 00:04:00,630
So these are seven routes that we define in our application and there's kind of a lot to talk about

53
00:04:00,630 --> 00:04:02,440
here and to really break it down.

54
00:04:02,490 --> 00:04:03,530
So don't get overwhelmed.

55
00:04:03,660 --> 00:04:07,100
We're going to devote a video to each one of these and to actually implementing it.

56
00:04:07,350 --> 00:04:12,570
And we'll be building this simple blog site and a quick note while I'm here is that this is not built

57
00:04:12,570 --> 00:04:13,620
with bootstrap.

58
00:04:13,860 --> 00:04:16,580
It's built with another framework called semantic UI.

59
00:04:16,920 --> 00:04:18,510
And I did that for a few reasons.

60
00:04:18,510 --> 00:04:20,960
One is that I just like semantic UI.

61
00:04:21,240 --> 00:04:22,370
I think it's a little cleaner.

62
00:04:22,380 --> 00:04:25,400
But you actually write in your HMO too.

63
00:04:25,590 --> 00:04:30,960
I like the way that it looks and three and most importantly I wanted you to see another framework for

64
00:04:31,020 --> 00:04:33,600
CSSA so that you see that they're not that different.

65
00:04:33,600 --> 00:04:35,680
Honestly things are very similar.

66
00:04:35,760 --> 00:04:38,850
Maybe some of the classes are named differently but there is a great system.

67
00:04:38,850 --> 00:04:42,840
There's buttons there is nav bars all the stuff that's in Bootstrap.

68
00:04:42,870 --> 00:04:45,070
There are other equivalent frameworks out there.

69
00:04:45,270 --> 00:04:45,500
OK.

70
00:04:45,510 --> 00:04:47,940
So we'll be making this and we'll be doing the styling at the end.

71
00:04:47,940 --> 00:04:49,420
So that's not really the focus.

72
00:04:49,440 --> 00:04:50,700
What is the focus though.

73
00:04:50,700 --> 00:04:52,050
Are the routes.

74
00:04:52,050 --> 00:05:00,540
So if we start here on slash logs you can see that I have a list of all the blogs in my database and

75
00:05:00,540 --> 00:05:02,910
this is called the index route.

76
00:05:03,330 --> 00:05:10,860
So this table you can see index that's the name of one of the routes that you are all for dogs would

77
00:05:10,860 --> 00:05:13,830
be slashed dogs for blogs.

78
00:05:13,890 --> 00:05:21,990
It's slash log's an HDTV verb is a get request and the purpose is to list all of the dogs.

79
00:05:22,320 --> 00:05:25,500
Now let's take a look at new uncreate which are color coded.

80
00:05:25,500 --> 00:05:28,580
They're both green because they have to do with one another.

81
00:05:28,590 --> 00:05:34,530
They're both related to creating a new dog and an update are also both color coded because they are

82
00:05:34,590 --> 00:05:35,620
linked as well.

83
00:05:35,820 --> 00:05:43,080
So new uncreate if we go back to the blog site and they click on new post pay attention to the URL slash

84
00:05:43,170 --> 00:05:47,680
logs slash new and all that I do are all that I see is a form.

85
00:05:48,030 --> 00:05:54,740
And according to our table here new you around the path is slash dug slash new.

86
00:05:55,050 --> 00:05:59,600
It's a get request and it's supposed to show the new dog form.

87
00:05:59,670 --> 00:06:00,990
In our case it's blog.

88
00:06:01,140 --> 00:06:03,340
And we see the forum here.

89
00:06:03,450 --> 00:06:08,890
So let me go copy an image you are well let's just take this one.

90
00:06:09,240 --> 00:06:16,410
New post will just make a random post here and we'll be deleting it we click on Create.

91
00:06:16,970 --> 00:06:19,850
And it's important then that we talk about the create rap.

92
00:06:20,040 --> 00:06:26,560
So create is where this form goes to where this new post form submits.

93
00:06:26,580 --> 00:06:34,300
So if we take a look at the table it says Create goes to slash dugs as a post.

94
00:06:34,350 --> 00:06:39,270
So we already have slashed dogs as a get or index page slash dugs as a post.

95
00:06:39,290 --> 00:06:45,240
It's where we go to actually post form data to create a new dog and then redirect somewhere.

96
00:06:45,240 --> 00:06:51,300
So we saw this in the last unit when we talked about crud we talked about creating things and post requests

97
00:06:51,330 --> 00:06:52,180
in Express.

98
00:06:52,380 --> 00:06:56,900
So this is a post request or route that's listening for a post just slash dogs.

99
00:06:57,150 --> 00:06:58,890
And if we inspect the form of course

100
00:07:02,500 --> 00:07:08,820
look at the action slash blogs as a post.

101
00:07:09,420 --> 00:07:10,020
OK.

102
00:07:10,500 --> 00:07:13,750
So hopefully you're seeing right now we have this table.

103
00:07:13,800 --> 00:07:18,230
It just acts as basically a pattern that we follow we can fill in the blanks.

104
00:07:18,360 --> 00:07:25,290
If we're not doing dives we might be doing blogs or comments or campgrounds or users and I'll actually

105
00:07:25,290 --> 00:07:29,700
show you really briefly with yo camp which have opened here.

106
00:07:29,850 --> 00:07:31,680
Notice that all strt the server up

107
00:07:35,240 --> 00:07:42,420
noticed that the page where we see all the campgrounds is slash campgrounds.

108
00:07:42,420 --> 00:07:46,320
If I want to add new campground first I have to log again.

109
00:07:46,860 --> 00:07:48,200
And this is a later version.

110
00:07:48,300 --> 00:07:50,720
Obviously with some functionality we don't have yet.

111
00:07:50,850 --> 00:07:54,050
But if I do log in.

112
00:07:54,100 --> 00:08:02,040
Notice that if I go to add new campground campground slash new which is the exact same pattern replace

113
00:08:02,040 --> 00:08:08,370
dogs with campgrounds and then if you look at where the form submits of course you'd expect to see slash

114
00:08:08,370 --> 00:08:10,220
campgrounds as opposed.

115
00:08:10,320 --> 00:08:15,780
Which is what we see right there in all the other restful routes are here as well and we'll be implementing

116
00:08:15,780 --> 00:08:16,580
those later.

117
00:08:16,680 --> 00:08:22,170
And the reason that we're waiting to do it to Yotam is that it's linked to user authentication so we

118
00:08:22,170 --> 00:08:25,720
don't want someone to be able to add a new campground unless they're signed in.

119
00:08:25,920 --> 00:08:30,450
And I don't want to be able to delete someone's campground unless I created it.

120
00:08:30,450 --> 00:08:31,740
Same thing for updating it.

121
00:08:31,890 --> 00:08:37,290
So we first will get authentication going and then we'll work on adding in the rest of the restful routes

122
00:08:37,680 --> 00:08:39,230
so close out of there for now.

123
00:08:39,600 --> 00:08:40,820
So let's keep moving on.

124
00:08:40,830 --> 00:08:47,250
We've covered index new uncreate and then we have the show route which you just saw in the last unit

125
00:08:47,280 --> 00:08:52,950
when we added the show page to yoke camped for a campground in the point of a show page.

126
00:08:53,250 --> 00:08:57,770
In the case of dogs is it it shows info about one specific dog.

127
00:08:58,050 --> 00:09:04,740
So for instance on our blog site if we go back to that make sure start the server again and if we go

128
00:09:04,740 --> 00:09:12,870
to the home page our index slash logs shows a little bit of each blog post but it doesn't show every

129
00:09:12,870 --> 00:09:14,350
piece of information.

130
00:09:14,400 --> 00:09:20,370
So for instance this year if I click on it there is some extra content that we don't see the way that

131
00:09:20,370 --> 00:09:24,520
I have it set up is that it shows the first 100 characters on the index.

132
00:09:24,600 --> 00:09:28,510
But if you want to read the entire post you have to click on read more.

133
00:09:28,980 --> 00:09:31,590
So our show page is right here.

134
00:09:31,590 --> 00:09:32,840
Notice that you are up.

135
00:09:32,870 --> 00:09:35,400
Slash blogs slash.

136
00:09:35,580 --> 00:09:36,790
This crazy idea.

137
00:09:36,960 --> 00:09:39,090
Just like we did with Joachin.

138
00:09:39,120 --> 00:09:40,620
That's the point of the show page.

139
00:09:40,620 --> 00:09:47,550
It takes one particular ID something that is unique and it finds the corresponding item and shows you

140
00:09:47,550 --> 00:09:51,540
all the information or as much information as you want on that one page.

141
00:09:51,630 --> 00:09:57,080
So an index and show are to read routes as far as crud goes.

142
00:09:57,120 --> 00:10:06,350
The R index will show all it will list all of a particular whatever dog or blog or user or campground

143
00:10:06,870 --> 00:10:08,740
and show is for one.

144
00:10:09,000 --> 00:10:10,750
So it shows more information.

145
00:10:10,890 --> 00:10:12,890
It's a get request.

146
00:10:12,900 --> 00:10:17,050
Hit enter sends you get request because it's my now.

147
00:10:18,240 --> 00:10:26,550
And it goes to slash dogs whatever the entity is slash user slash blogs slash ID as a path variable

148
00:10:27,620 --> 00:10:32,950
so that show that you have an update and those two are linked together.

149
00:10:33,120 --> 00:10:35,920
They correspond to one another just like new and create.

150
00:10:36,120 --> 00:10:41,350
So it is going to show us the form and update is where the form submits.

151
00:10:41,390 --> 00:10:49,700
So lets start with edit for dogs so you are its flash dogs slash colon ID slash at it as a get request

152
00:10:49,970 --> 00:10:53,370
and it shows the edit forms for one dog.

153
00:10:53,580 --> 00:11:01,920
If we try to edit one of these here pay attention to you or will notice that we get logged slash ID

154
00:11:02,100 --> 00:11:08,630
slash at it and we knew that Id there because we have to find the correct blog that were editing.

155
00:11:08,730 --> 00:11:11,040
Thats how we pre-populated the data here.

156
00:11:11,250 --> 00:11:15,830
We could just have blogs slash edit that then how would we know what were editing.

157
00:11:15,840 --> 00:11:17,690
How would we retrieve the data.

158
00:11:17,810 --> 00:11:22,010
Figure out what to actually update in the database so that doesnt really work.

159
00:11:22,310 --> 00:11:26,300
But if we follow restful routes we follow that restful convention logs.

160
00:11:26,340 --> 00:11:29,840
Slash ID slash at it and I see the forum here.

161
00:11:30,560 --> 00:11:39,170
And then if we look at where the form goes it also needs to have an ID and the euro and it goes to log's

162
00:11:39,260 --> 00:11:41,200
slash ID.

163
00:11:41,850 --> 00:11:42,900
And then theres some weird stuff.

164
00:11:42,890 --> 00:11:45,540
Method equals put method equals post.

165
00:11:45,620 --> 00:11:47,250
Will be getting to that now a little bit.

166
00:11:47,370 --> 00:11:54,120
But the key thing if we check the table is that it's a put request so not a post request to put request

167
00:11:54,380 --> 00:11:55,730
which we haven't used yet.

168
00:11:55,880 --> 00:12:01,940
It's just another HGP verb that's used to update something rather than posting new data.

169
00:12:02,060 --> 00:12:05,630
The practice if you're feeling restful Rousse you use put.

170
00:12:06,330 --> 00:12:11,580
And the nice thing about rest is that if you have a table like this hopefully you'll memorize this after

171
00:12:11,780 --> 00:12:13,840
making a few apps that follow this pattern.

172
00:12:14,060 --> 00:12:20,330
In my experience it takes a little bit for students to really get it second nature but if you follow

173
00:12:20,340 --> 00:12:26,370
this table you keep it open and actually included it inside the notes here instead of restful routing

174
00:12:26,370 --> 00:12:27,690
.

175
00:12:27,680 --> 00:12:32,800
Right here is a table and if you want to view it at any time all that you have to do.

176
00:12:33,120 --> 00:12:36,950
You don't have to copy this over to a new file you don't have to serve it with Express.

177
00:12:37,110 --> 00:12:43,160
If you just open the file right here and then you click on Preview you can click on live preview file

178
00:12:43,520 --> 00:12:47,850
and it will open it right here inside of your application instead of cloud 9.

179
00:12:47,880 --> 00:12:52,340
So if you if you want to do that keep it open or if you are to make a shorter version.

180
00:12:52,350 --> 00:12:57,340
This is something we'll be going back to a lot which is nice because it's just a blueprint.

181
00:12:57,380 --> 00:12:58,320
We just follow it.

182
00:12:58,350 --> 00:13:03,370
We all have to think about what to do as long as we have this table to remind us of the reps.

183
00:13:03,420 --> 00:13:05,990
So it shows us the form.

184
00:13:06,000 --> 00:13:11,120
It has an idea in the overall update is where that form sends data to.

185
00:13:11,250 --> 00:13:17,710
And it also needs an ID because it's not just like create where we're blindly creating a new dog or

186
00:13:17,700 --> 00:13:18,930
a new blog.

187
00:13:18,920 --> 00:13:25,880
The process inside update is that we take new data from the form and we have to find the old data we

188
00:13:25,880 --> 00:13:30,650
have to look up the post of the dog first and then update it with the new data.

189
00:13:30,650 --> 00:13:36,680
So we have to look something up using that Id just like show edit and destroy which we haven't talked

190
00:13:36,680 --> 00:13:37,350
about yet.

191
00:13:37,590 --> 00:13:44,600
These four that have an ID and then you also need to be able to look up a particular dog or post first

192
00:13:44,610 --> 00:13:45,600
.

193
00:13:45,600 --> 00:13:49,960
Finally we have Destroy the way that destroy works is that it's a single route.

194
00:13:50,150 --> 00:13:55,700
So there's no separate form that then sends the request to destroy like there is for new uncreate although

195
00:13:55,700 --> 00:13:56,970
there is a form involved.

196
00:13:57,170 --> 00:14:00,500
But typically our destroy looks like this.

197
00:14:00,500 --> 00:14:08,190
If I go back and click on one of these posts I have a form right here with a single button and it's

198
00:14:08,180 --> 00:14:12,830
going to send a delete request to slash dogs.

199
00:14:12,840 --> 00:14:20,200
In this case slash ID or on our blog site sosh blogs slash ID so delete requests.

200
00:14:20,210 --> 00:14:24,510
And the point is that it leads to a particular thing and then redirect somewhere.

201
00:14:24,750 --> 00:14:29,700
So there are three routes that really redirect and they are the three routes that aren't get requests

202
00:14:29,690 --> 00:14:30,080
.

203
00:14:30,120 --> 00:14:33,490
So we have create the update and destroyed.

204
00:14:33,950 --> 00:14:35,780
Those are the ones that are doing something new.

205
00:14:35,780 --> 00:14:39,670
Theyre taking data or there they're deleting or creating or they're updating.

206
00:14:39,810 --> 00:14:42,960
And then when they're done with that they send you somewhere else.

207
00:14:43,080 --> 00:14:50,390
And it's also worth noting that slash dog slash ID is the exact same you are Ellas update and as show

208
00:14:51,360 --> 00:14:55,400
but they're very different routes because of the HTP Verd.

209
00:14:55,590 --> 00:15:02,880
So in Express we can have apps that get slashed dog slash ID and then we can have apt output slash dog

210
00:15:02,880 --> 00:15:07,950
session id an app delete slash dog slash ID and there are three separate routes.

211
00:15:07,940 --> 00:15:14,330
Same thing goes for indexing create both of those are sashed dogs but index's that get and create is

212
00:15:14,340 --> 00:15:15,210
a post.

213
00:15:15,640 --> 00:15:18,940
OK so this is somewhat of an overwhelming amount of information.

214
00:15:18,950 --> 00:15:23,810
I know the good news again is that you have this chart will be referencing it were going to break down

215
00:15:23,820 --> 00:15:28,730
one piece at a time and create our blog site from scratch and just become naturally more comfortable

216
00:15:28,740 --> 00:15:31,270
with all these wraps as we progress.

217
00:15:31,590 --> 00:15:38,190
So lets go back and just want to wrap everything up again that rest this whole acronym representational

218
00:15:38,180 --> 00:15:40,130
state transfer is not important.

219
00:15:40,130 --> 00:15:45,710
What is important is that restful routing is a pattern of routes that we can follow.

220
00:15:45,750 --> 00:15:52,320
So if we want to have full crud create read update destroy or delete for some entity users comments

221
00:15:52,320 --> 00:15:58,520
campgrounds reviews ratings whatever it is in our application we want people to be able to create read

222
00:15:58,560 --> 00:15:59,990
update and delete them.

223
00:16:00,240 --> 00:16:04,490
We can map that functionality to the seven restful wraps just a pattern.

224
00:16:04,620 --> 00:16:08,290
You do not have to use it to have cried in your application.

225
00:16:08,420 --> 00:16:10,540
You can break the rules to whatever you want.

226
00:16:10,560 --> 00:16:12,950
This isn't something that's enforced in any way.

227
00:16:13,040 --> 00:16:18,000
It's just a convention in a nice pattern and architecture for how we structure our wraps.

228
00:16:18,020 --> 00:16:19,490
So that's the really important part.

229
00:16:19,740 --> 00:16:24,290
We can do whatever we want but we're going to follow restful routes again because it's just a good idea

230
00:16:24,310 --> 00:16:24,340
.