1
00:00:00,480 --> 00:00:05,460
Welcome back in this lesson we're going to continue with the camp app and we're going to add in the

2
00:00:05,460 --> 00:00:09,070
feature or the ability for a user to submit a new campground.

3
00:00:09,270 --> 00:00:10,990
So there are a few things we need to do.

4
00:00:11,010 --> 00:00:15,540
The first one is to set up the post route that we actually create the new campground added into the

5
00:00:15,540 --> 00:00:16,130
array.

6
00:00:16,290 --> 00:00:21,600
Then we need to add in body parser and make sure that it's imported correctly and configured and then

7
00:00:21,600 --> 00:00:27,030
we have two other steps here to that concern creating the form and creating the route for the form where

8
00:00:27,030 --> 00:00:29,760
a user can go to actually send that POST request.

9
00:00:29,760 --> 00:00:30,840
So we'll get to that.

10
00:00:30,840 --> 00:00:32,720
We're going to start by setting up the post route.

11
00:00:32,760 --> 00:00:40,950
So I'm still in V-1 and I'm going to open up actually yes an ad in our post-draft and I'll just do that

12
00:00:40,950 --> 00:00:49,350
at the bottom and I'm going to hop up post and rather than doing something like Slash new campground

13
00:00:49,410 --> 00:00:53,380
or add campground I'm actually going to do slash campgrounds.

14
00:00:53,670 --> 00:00:59,550
So that's the exact same you RL As we have for our Get route but there are totally different routes

15
00:00:59,580 --> 00:01:05,310
because one is a GED and one is a post and I'm not just doing this to show you that in fact we can have

16
00:01:05,310 --> 00:01:09,800
the same bureau with a different request method and there are actually different routes.

17
00:01:09,810 --> 00:01:10,920
Yes that's part of it.

18
00:01:10,920 --> 00:01:14,310
This is actually all part of a convention for how we name are routes.

19
00:01:14,360 --> 00:01:16,260
We have a lot of freedom in how we name are out.

20
00:01:16,380 --> 00:01:20,580
But there's actually a convention called the rest and we're going to be coming back to this in future

21
00:01:20,580 --> 00:01:21,200
videos.

22
00:01:21,330 --> 00:01:26,370
But all I want to say on it right now is that to make our routes follow this convention called rest

23
00:01:27,180 --> 00:01:33,120
when we have a page that shows all of the campgrounds that you are l should be slash campgrounds.

24
00:01:33,120 --> 00:01:38,740
When we have a page or a route where we can create a new campground it should be the exact same you

25
00:01:39,490 --> 00:01:40,990
slash campground.

26
00:01:41,340 --> 00:01:42,780
But it should be a post request.

27
00:01:42,780 --> 00:01:47,370
So that is a convention it's a format that we're going to follow if we're doing this for a friend.

28
00:01:47,410 --> 00:01:53,460
We would have Slash friends as it get would show all the friends and slash friends as a post is where

29
00:01:53,460 --> 00:01:56,170
we send a post request to make a new friend.

30
00:01:56,580 --> 00:01:58,470
So we'll get a lot more practice with that.

31
00:01:58,470 --> 00:02:01,040
This is just the very very first introduction to it.

32
00:02:01,110 --> 00:02:05,940
But there are actually seven different routes that are restful that follow this rest convention that

33
00:02:05,940 --> 00:02:07,120
we'll be seeing later.

34
00:02:07,470 --> 00:02:16,710
So inside of here what we want to do is two things we want to get data from form and add to a campground

35
00:02:16,770 --> 00:02:29,140
array and then we also want to redirect access to campgrounds page back to this route.

36
00:02:30,630 --> 00:02:38,400
So we have the ACT UP post set up and we can always just do a red dot send here you hit the post route

37
00:02:38,850 --> 00:02:40,630
and then we can test it out with postman.

38
00:02:40,770 --> 00:02:47,690
So I'll just copy the euro here go back to postman and the route that we're testing is slash campgrounds

39
00:02:48,120 --> 00:02:52,220
as a post not a get if we did it as a get request.

40
00:02:52,460 --> 00:02:57,780
It doesn't actually matter because our servers not started the H Tim L and the SS that we see here is

41
00:02:57,780 --> 00:02:59,300
the error page.

42
00:02:59,430 --> 00:03:02,460
This error page that cloud 9 gives us.

43
00:03:02,460 --> 00:03:04,800
So we need to start the server.

44
00:03:05,530 --> 00:03:11,440
Now if we go back and make the same GET request we'll see the list with the images and the H ones.

45
00:03:11,820 --> 00:03:17,130
And if we do a post request we should just get a little message that says you hit the post-draft.

46
00:03:17,360 --> 00:03:22,800
OK so that's all we'll do with postman proves to us that it's working as a post route and what we'll

47
00:03:22,800 --> 00:03:25,140
do next is install body parser.

48
00:03:25,260 --> 00:03:36,600
So we need to do NPM install body dash parser dash dash save and then we'll import it up here with our

49
00:03:37,230 --> 00:03:43,910
body parts are equals require body Desch parser and save.

50
00:03:43,910 --> 00:03:46,190
And then we need to tell express to use poddy parser.

51
00:03:46,260 --> 00:03:54,990
So we'll do that use Oddy parser and then we also need to do the dot euro uncoated and then pass in

52
00:03:54,990 --> 00:03:59,680
an object and all that we need to do is add extended Colan true.

53
00:03:59,980 --> 00:04:04,470
Remember this is a line that will just see all the time you can just get used to either memorizing it

54
00:04:04,470 --> 00:04:07,290
or just copying and pasting it and will save.

55
00:04:07,290 --> 00:04:13,050
And now we have body parts are set up and we can tell if it works just by running after us and if we

56
00:04:13,050 --> 00:04:15,370
don't get an error we're good to go.

57
00:04:15,390 --> 00:04:17,490
Now let's focus on the form.

58
00:04:17,520 --> 00:04:24,180
So before what I had shown you is the friends app where we had the form on the same page as the friends

59
00:04:24,180 --> 00:04:27,080
list but that's not the approach we're going to take here.

60
00:04:27,090 --> 00:04:31,530
Rather we'll have a complete separate page and route that will actually show the form.

61
00:04:31,770 --> 00:04:34,610
It will be the form to make a new campground.

62
00:04:34,680 --> 00:04:41,280
And then you submit the form that sends a post request to slash campground as a post and then we're

63
00:04:41,280 --> 00:04:44,070
redirected back to campgrounds.

64
00:04:44,070 --> 00:04:48,930
So we're going to make a separate page so to do that we need a separate route and we can just do that

65
00:04:49,440 --> 00:04:53,430
at the bottom here or in between doesn't really matter get.

66
00:04:53,670 --> 00:04:57,900
And this will be slashed campgrounds slash new.

67
00:04:58,260 --> 00:05:02,860
And again this could be anything that we want it to but this is the restful convention.

68
00:05:02,880 --> 00:05:06,010
So this is the third of those conventional names.

69
00:05:06,060 --> 00:05:12,120
The first one was slash campground as a get should show you all the campgrounds slash campgrounds as

70
00:05:12,120 --> 00:05:18,210
a post is the route where you can create a new campground and then slash campground slash new should

71
00:05:18,210 --> 00:05:25,960
show the form that will send the data to this post route so let's flesh this out and all that it needs

72
00:05:25,960 --> 00:05:33,400
to do is render a form we don't need to pass in any data or anything so we'll just do a rez render and

73
00:05:33,400 --> 00:05:36,720
the form will just call new that.

74
00:05:36,970 --> 00:05:38,460
Yes just like that.

75
00:05:39,090 --> 00:05:40,340
And safe.

76
00:05:40,360 --> 00:05:44,290
Now back over here in our views directory we're going to make that template.

77
00:05:44,410 --> 00:05:47,760
So touch views slash new.

78
00:05:47,880 --> 00:05:48,440
Yes.

79
00:05:48,730 --> 00:05:54,530
And then we'll open that template and inside the template add in.

80
00:05:54,540 --> 00:06:04,900
And each one that says Create a new campground and then we'll add in a form tag in this form tag we

81
00:06:04,900 --> 00:06:13,900
need to have action and we need to have method and remember method should be post and action should

82
00:06:13,900 --> 00:06:18,380
be slash campgrounds which is the route here.

83
00:06:18,550 --> 00:06:20,820
Apt up post slash campgrounds.

84
00:06:20,860 --> 00:06:24,850
So this is where we'll get the form data and add to the campgrounds array.

85
00:06:25,090 --> 00:06:27,540
And inside we need two different inputs.

86
00:06:27,640 --> 00:06:34,570
So the first one is type because text and the placeholder will just be name.

87
00:06:35,290 --> 00:06:39,600
And the second one will do placeholder is image you rl.

88
00:06:39,710 --> 00:06:45,470
And let's just do like that and we'll keep it as Typee go to text and then we need our button at the

89
00:06:45,460 --> 00:06:54,280
bottom and here to say submit and save and then we also need the name attribute on both of these so

90
00:06:54,280 --> 00:06:59,320
name and this will be equal to just name.

91
00:06:59,320 --> 00:07:07,180
And here we'll have name is equal to image and we use this name attribute instead of our route to grab

92
00:07:07,180 --> 00:07:09,580
the data from the request Abati.

93
00:07:09,620 --> 00:07:10,370
Before we do that.

94
00:07:10,390 --> 00:07:12,760
Let's make sure this form is showing up correctly.

95
00:07:12,850 --> 00:07:21,880
So we're going to start the server and to visit this route we need to go to slash campgrounds slash

96
00:07:21,970 --> 00:07:25,870
new and we get our form excellent.

97
00:07:25,880 --> 00:07:28,160
We're not getting any of that bootstrap styling.

98
00:07:28,390 --> 00:07:33,090
Not that it looks like much but we're not getting it because we don't have our layouts included.

99
00:07:33,160 --> 00:07:36,990
We don't have the header and footer so we can also.

100
00:07:37,420 --> 00:07:47,680
So let's also add that in include Parshall's slash Hetter and then copy this line down here and include

101
00:07:47,680 --> 00:07:50,130
Parshall's slash footer.

102
00:07:51,040 --> 00:07:54,360
Restart the server go back.

103
00:07:54,380 --> 00:07:59,290
Now we get the beautiful bootstrap and we have the header file and then our footer down here as well

104
00:07:59,290 --> 00:07:59,910
.

105
00:08:00,460 --> 00:08:04,870
And we can test this out to see if it's going to the right route or just typing anything into here and

106
00:08:04,880 --> 00:08:11,440
hitting submit and we get you hit the post route which means that our code the form is submitting a

107
00:08:11,440 --> 00:08:13,430
post request to slash campgrounds.

108
00:08:13,570 --> 00:08:15,290
And we're getting this redstart settled.

109
00:08:15,580 --> 00:08:20,590
But rather than sending this we actually want to add the logic in to make this work.

110
00:08:20,750 --> 00:08:26,240
And remember to get the data from the form we use request of body and then we have request up bodycam

111
00:08:26,260 --> 00:08:31,550
name and request up body image and I'll save those to a variable.

112
00:08:31,570 --> 00:08:36,060
So far name and var image.

113
00:08:36,350 --> 00:08:41,830
And then what we want to do is push a new campground into our array here.

114
00:08:42,040 --> 00:08:47,590
And in order for that to work we have to move this out so that it's not inside of the apt.

115
00:08:47,600 --> 00:08:52,240
Get we'll just put it up top and that's not where it's going to stay.

116
00:08:52,250 --> 00:08:54,690
Remember we're moving to a database very soon.

117
00:08:55,000 --> 00:08:59,790
But for now we're putting it up top so that we have access to it inside of this post route.

118
00:09:00,080 --> 00:09:01,460
In the callback function.

119
00:09:01,880 --> 00:09:05,130
So we're going to push a new campground into the campground array.

120
00:09:05,430 --> 00:09:08,950
So campground set up push and we need to push in an object.

121
00:09:09,080 --> 00:09:11,310
So I'm going to make that new object with a variable.

122
00:09:11,360 --> 00:09:15,570
So I'm going to call it var new campground.

123
00:09:15,590 --> 00:09:24,350
It's an object and we have name is equal to name and image is equal to image just so that we match this

124
00:09:24,350 --> 00:09:31,550
format here or we have name and image and then the last thing we need to do is push new campground just

125
00:09:31,540 --> 00:09:33,580
like that save.

126
00:09:33,740 --> 00:09:36,890
And then let's redirect back to the campground page.

127
00:09:37,060 --> 00:09:37,960
So that will be.

128
00:09:38,000 --> 00:09:47,270
RAZ redirect to slash campgrounds and yes we do have to slash campgrounds.

129
00:09:47,380 --> 00:09:51,310
But when we do a redirect the default is to redirect as a get request.

130
00:09:51,380 --> 00:09:53,630
So we'll save and let's test it out

131
00:09:57,400 --> 00:10:01,140
go back refresh let's add in a new campground.

132
00:10:01,210 --> 00:10:08,820
We'll just call this one daisy mountain and we need a image you are I'll just copy this one here.

133
00:10:09,080 --> 00:10:10,520
Go back.

134
00:10:10,850 --> 00:10:12,640
Hit submit.

135
00:10:13,270 --> 00:10:17,060
And to tell if it worked we need to scroll down and there we go.

136
00:10:17,090 --> 00:10:18,700
Beautiful Daisy mountain.

137
00:10:18,700 --> 00:10:20,240
Pretty stunning sight.

138
00:10:20,230 --> 00:10:22,200
Let's go back and review a few things.

139
00:10:22,210 --> 00:10:23,620
There's a lot that we did.

140
00:10:23,620 --> 00:10:26,170
The first thing I want to bring up are the routes that we made.

141
00:10:26,170 --> 00:10:33,790
So we now have actually get slashed campground which shows us all the campgrounds we have up post slash

142
00:10:33,790 --> 00:10:35,480
campground the same bureau.

143
00:10:35,600 --> 00:10:40,370
And that's where we actually do the logic of making a new campground and then redirecting slash campground

144
00:10:40,380 --> 00:10:40,670
.

145
00:10:40,900 --> 00:10:44,520
And then we have Amtrak get slashed campgrounds slash new.

146
00:10:44,650 --> 00:10:46,330
And that shows the form.

147
00:10:46,690 --> 00:10:55,070
So remember campgrounds slash new shows the form which submit a post request to slash campgrounds which

148
00:10:55,070 --> 00:11:01,490
then in turn redirects us back to slash campgrounds as it get which then will show us all the campgrounds

149
00:11:01,820 --> 00:11:03,930
using the campground template.

150
00:11:04,740 --> 00:11:07,490
It's a little bit of a complicated flow definitely.

151
00:11:07,540 --> 00:11:11,360
There's a lot of moving pieces but this is a recipe that we'll be following a lot.

152
00:11:11,410 --> 00:11:13,910
So we have a form send to post requests somewhere.

153
00:11:14,050 --> 00:11:16,990
And then inside that post route we take the form data.

154
00:11:17,020 --> 00:11:20,530
We do something with it and then we redirect back somewhere else.

155
00:11:20,530 --> 00:11:24,570
So it's really typical for a post route to redirect you to another route.

156
00:11:25,070 --> 00:11:28,140
The very last thing we should do is open up the campgrounds template.

157
00:11:28,610 --> 00:11:37,930
So we'll do C9 use slash campground and we'll just add a simple link up top we'll make it a anchored

158
00:11:37,930 --> 00:11:48,790
tag to start a Tref equal slash campgrounds slash new and that inner text will be add new campground

159
00:11:48,910 --> 00:11:51,250
just like that and we'll save.

160
00:11:51,350 --> 00:11:59,300
And then we can restart the server and let's go back here to the landing page or to the campgrounds

161
00:11:59,290 --> 00:12:02,390
page excuse me and we have add new campground.

162
00:12:02,530 --> 00:12:07,040
Click on it and we get to the campgrounds page and then we can add our new campground.

163
00:12:07,270 --> 00:12:12,080
We should also add a back button so that we can go back to view all campgrounds.

164
00:12:12,380 --> 00:12:17,980
So on the new template at the bottom we'll just include our own anchor tag here.

165
00:12:18,120 --> 00:12:26,650
A draft should be equal to slash campgrounds and this will just say back or go back restart the server

166
00:12:26,650 --> 00:12:26,770
.

167
00:12:26,770 --> 00:12:32,320
One last time her fresh at a new campground go back.

168
00:12:32,530 --> 00:12:35,900
OK so now we have the link set up correctly in the next video.

169
00:12:35,920 --> 00:12:37,970
We're going to focus on some basic styling.