1
00:00:00,230 --> 00:00:02,350
Know what I want to do is make our show template.

2
00:00:02,610 --> 00:00:06,900
So I'm going to comment this out so that we're not constantly making new campground every time we start

3
00:00:06,900 --> 00:00:07,590
the server.

4
00:00:07,770 --> 00:00:12,060
So right now we only have one going on down here.

5
00:00:12,240 --> 00:00:18,670
Let me add my label show shows more info about one campground.

6
00:00:19,320 --> 00:00:21,330
So we need to find the campground.

7
00:00:21,420 --> 00:00:22,370
We'll come back to that.

8
00:00:22,500 --> 00:00:24,050
And when to render the show template.

9
00:00:24,210 --> 00:00:29,950
So let's start with that dot render show and then we need to create that template.

10
00:00:30,150 --> 00:00:38,610
So we're going to do touch views slash showed us and then C9 views showed that Ejay us and then add

11
00:00:38,610 --> 00:00:40,320
in a very simple H-1.

12
00:00:40,440 --> 00:00:52,730
This is the show template as we go and save let's make sure that that works are fresh.

13
00:00:52,740 --> 00:00:58,980
Now if we try and get to where you are well that is a show route campground slash anything that isn't

14
00:00:58,980 --> 00:01:06,000
new campground new is special because it takes us to the new form but any other ID and our IDs will

15
00:01:06,000 --> 00:01:08,520
look like that.

16
00:01:08,520 --> 00:01:10,450
And those are coming from Mongo.

17
00:01:10,470 --> 00:01:15,050
So those ideas are automatically generated by Mongo and we save something.

18
00:01:15,210 --> 00:01:20,130
And what we're going to start by doing is actually adding in the links to the show page that we have

19
00:01:20,130 --> 00:01:24,250
a button here that we can click to view more information.

20
00:01:24,420 --> 00:01:33,870
So we need to open up views slash campgrounds but E.J. us and technically we should rename this file

21
00:01:34,110 --> 00:01:38,930
to be indexed Ejay us rather than campgrounds because we're following this convention.

22
00:01:38,970 --> 00:01:44,040
So we have new we have show we should name this index rather than campgrounds.

23
00:01:44,460 --> 00:01:46,630
So we can do that pretty quickly over here.

24
00:01:46,710 --> 00:01:52,130
Just go to views ground and we can rename it indexed that E.J..

25
00:01:52,140 --> 00:01:52,710
Yes.

26
00:01:52,920 --> 00:01:57,510
There's also many ways to do this via the terminal but that will be fastest for now rather than showing

27
00:01:57,510 --> 00:01:58,540
you another command.

28
00:01:58,770 --> 00:02:03,470
So we'll do that and then we need to make sure apage yes is rendering the right template.

29
00:02:03,810 --> 00:02:07,400
So this should render index now OK.

30
00:02:07,890 --> 00:02:14,880
So now what we want to do is rather than just displaying for each campground an image and a name I'm

31
00:02:14,880 --> 00:02:20,580
also going to add a paragraph in here and in that paragraph we're going to add an anchor tag and we'll

32
00:02:20,580 --> 00:02:22,070
fix the ref in a second.

33
00:02:22,090 --> 00:02:27,500
It can be an anchor tag that says more info and we'll give it a class.

34
00:02:27,510 --> 00:02:39,630
Also will you use bootstrap and we'll do DTN and ETN primary just like that and save and let's just

35
00:02:39,630 --> 00:02:41,030
see how that looks first.

36
00:02:41,260 --> 00:02:44,470
So it won't work yet it won't go anywhere.

37
00:02:44,640 --> 00:02:46,410
But if we were fresh.

38
00:02:46,410 --> 00:02:47,840
All right that looks good enough for now.

39
00:02:47,850 --> 00:02:50,430
We have a more info button with click on it.

40
00:02:50,490 --> 00:02:56,370
Right now it refreshes the page but we want it to take us to the show page so to do that we need to

41
00:02:56,370 --> 00:03:04,710
change our template and our eight draft needs to look like this slash campgrounds slash some ID and

42
00:03:04,710 --> 00:03:09,510
that ID is stored inside of campground dot underscore ID.

43
00:03:09,780 --> 00:03:11,610
So we need to use Ejay as here.

44
00:03:12,240 --> 00:03:18,930
And here I'm going to direct campground dot underscore ID which is part of campground campground is

45
00:03:18,930 --> 00:03:24,180
the name that we're giving each campground for each are printing out image and name.

46
00:03:24,180 --> 00:03:28,950
There's also a description that we're not showing but there is an I.D. that we're going to use to create

47
00:03:29,010 --> 00:03:29,700
the link.

48
00:03:29,880 --> 00:03:38,130
So if I restart now and we take a look at what that gives us let's inspect this and you can see it's

49
00:03:38,140 --> 00:03:39,290
campground slash.

50
00:03:39,330 --> 00:03:44,100
That's crazy long hexadecimal automatically generated Mongo D-B ID.

51
00:03:44,280 --> 00:03:50,910
And if we click on that link it takes us to the show template campground slash and that crazy idea.

52
00:03:51,120 --> 00:03:57,180
Then what we need to do is use that ID instead of the show template or inside the show route which is

53
00:03:57,180 --> 00:03:59,040
right here.

54
00:03:59,040 --> 00:04:06,120
We want to capture that ID which is going to be inside of requests harams thought Id just like when

55
00:04:06,120 --> 00:04:13,050
we did the farm animal thing with the pigs and oink and cow and moo where we had colon and then some

56
00:04:13,110 --> 00:04:16,690
Raut program it stored inside request for EMFs.

57
00:04:16,710 --> 00:04:23,040
What we're going to do is use a new method that mongoose gives us called find my ID.

58
00:04:23,250 --> 00:04:27,050
And we're doing that on campground so campground up find by ID.

59
00:04:27,270 --> 00:04:32,150
And there's two arguments who need to give it which is the ID and then the callback.

60
00:04:32,580 --> 00:04:34,280
So the first one is easiest.

61
00:04:34,380 --> 00:04:41,070
The ID is just request up harams ID and the callback looks just like our other ones where we have error

62
00:04:41,310 --> 00:04:49,980
and then lets call it found campground which is the data coming back from this find by ID so there should

63
00:04:49,980 --> 00:04:55,500
only be one item in the database with that ID which is the point of these IDs and Mangu their are unique

64
00:04:55,840 --> 00:05:01,440
so that we won't have any issues with multiple conflicting campsites like we might if we were looking

65
00:05:01,440 --> 00:05:05,430
things up by their title or their name or their image which we could do.

66
00:05:05,550 --> 00:05:07,180
This doesnt have to be an ID.

67
00:05:07,290 --> 00:05:10,290
It could be name and actually if we take a look at Reddit

68
00:05:13,570 --> 00:05:15,170
Friday again is unique.

69
00:05:15,210 --> 00:05:16,780
So it's much safer.

70
00:05:16,800 --> 00:05:22,740
So this will hopefully find a campground and we'll do our simple error checking if there's an error

71
00:05:22,780 --> 00:05:23,970
cancel that log it.

72
00:05:24,420 --> 00:05:30,870
Otherwise if it worked what we're going to do is render the show template.

73
00:05:31,590 --> 00:05:34,080
And that's a red dot render show.

74
00:05:34,320 --> 00:05:39,810
But we're going to pass in the found campground and then we're going to use it inside that template

75
00:05:39,830 --> 00:05:39,960
.

76
00:05:40,080 --> 00:05:44,830
So redstart render show and then we're going to pass in under the name campgrounds.

77
00:05:44,910 --> 00:05:47,670
We're going to pass our found campground.

78
00:05:48,300 --> 00:05:53,670
So then inside our show template we can access campgrounds and it will have the value of whatever we

79
00:05:53,670 --> 00:05:55,810
found with this ID.

80
00:05:56,040 --> 00:05:58,970
So we'll save go to showdown E.J..

81
00:05:59,010 --> 00:05:59,660
Yes.

82
00:05:59,840 --> 00:06:05,550
And let's do something very simple we just add a paragraph in that paragraph.

83
00:06:05,820 --> 00:06:14,400
We're going to add in campground dot name and we'll just leave it at that and then we'll add some other

84
00:06:14,400 --> 00:06:15,890
stuff in just a moment.

85
00:06:16,040 --> 00:06:17,860
Well let's make sure it works.

86
00:06:18,150 --> 00:06:25,350
So we'll go back refresh and if we click on this link we get a rather dramatic error that says has no

87
00:06:25,350 --> 00:06:26,140
method.

88
00:06:26,220 --> 00:06:27,820
Find by ID.

89
00:06:27,870 --> 00:06:31,640
And that's a pretty silly one because we don't want to capitalize that f there.

90
00:06:31,680 --> 00:06:38,320
So if we go back and just fix this very briefly so it's fine to a lower case f.

91
00:06:38,430 --> 00:06:41,220
Remember all methods start with a lower case.

92
00:06:41,220 --> 00:06:47,660
Now if we call it restart the server and refresh we get this is the show template Graniteville.

93
00:06:47,850 --> 00:06:51,570
Of course we want to show more than Grant Hill but it's the same process.

94
00:06:51,600 --> 00:06:56,460
We now are taking this I.D. and we're trying to find a campground with that I.D. and then we're rendering

95
00:06:56,460 --> 00:06:57,930
this template.

96
00:06:57,930 --> 00:06:59,890
So let's quickly we're not going to style it.

97
00:06:59,920 --> 00:07:06,120
But let's quickly go back to show and we'll add in an image again and the source is going to be equal

98
00:07:06,120 --> 00:07:13,870
to campground that image and then will also add in at the bottom another paragraph.

99
00:07:14,070 --> 00:07:23,680
And this one is going to have campground dot description just like that and we'll save that.

100
00:07:24,300 --> 00:07:32,730
Let's take the name here and move that up so that our H-1 says just the campground name just like that

101
00:07:32,890 --> 00:07:33,410
.

102
00:07:33,510 --> 00:07:35,030
We are fresh now.

103
00:07:35,250 --> 00:07:40,210
We get granite hill and we see this here our image and then this is a huge granite Hill.

104
00:07:40,230 --> 00:07:42,630
No bathrooms no water beautiful grant.

105
00:07:42,780 --> 00:07:46,920
And we should add in our lay out as well just with our quick includes.

106
00:07:46,980 --> 00:07:51,910
So include and let's just copy it from another template here just to save time.

107
00:07:52,140 --> 00:07:55,770
So we'll copy that in and then do the same thing for our footer.

108
00:07:56,370 --> 00:07:58,900
And now we should see some bootstrap.

109
00:07:58,920 --> 00:08:00,550
There we go we the nav bar.

110
00:08:00,600 --> 00:08:02,040
We get our font change.

111
00:08:02,070 --> 00:08:04,720
We still have to style this which will be coming soon.

112
00:08:05,040 --> 00:08:10,870
So everything appears to be working well except for one small thing which is if I add in a new campground

113
00:08:11,470 --> 00:08:14,030
it still is only name and image.

114
00:08:14,340 --> 00:08:18,870
So let's refactor that and she go back to the form which is in New.

115
00:08:18,870 --> 00:08:23,910
So let's close out of here and let's open up views slash new.

116
00:08:24,540 --> 00:08:30,090
And instead of there we need another input which I'll just put at the bottom right before the button

117
00:08:30,090 --> 00:08:30,440
.

118
00:08:30,750 --> 00:08:37,200
And our input is going to have a placeholder of description and eventually we'll want to make this a

119
00:08:37,200 --> 00:08:38,100
bigger input.

120
00:08:38,100 --> 00:08:47,970
For now it's just a text input and then we'll change the name to be description and we'll save and we

121
00:08:47,970 --> 00:08:56,790
can now go back to our Apalachee us in here instead of the Create will also grab the description so

122
00:08:56,790 --> 00:09:05,100
far description and all just do DSC equals request up body dot description which is what the name attribute

123
00:09:05,100 --> 00:09:06,770
was set to right here.

124
00:09:06,770 --> 00:09:08,430
There we go.

125
00:09:08,430 --> 00:09:14,670
And we're going to take that and then pass it in to our new object where a description is equal to this

126
00:09:14,670 --> 00:09:22,650
variable that we're grabbing from the form DGSE and resave everything else should work exactly the same

127
00:09:22,650 --> 00:09:22,920
.

128
00:09:22,920 --> 00:09:25,840
We're now just adding this extra piece of data in from the form.

129
00:09:25,980 --> 00:09:27,780
Let's test it out.

130
00:09:27,780 --> 00:09:31,890
Start the server up or refresh the form.

131
00:09:31,890 --> 00:09:33,840
We now have three inputs.

132
00:09:33,840 --> 00:09:39,900
So I have an image you arole that I've copied from here and I'm going to pass that in and we'll call

133
00:09:39,900 --> 00:09:51,510
this campground with trees and here will say this place has lots of trees and also lots of other stuff

134
00:09:51,510 --> 00:09:51,980
.

135
00:09:51,990 --> 00:09:59,940
All right click submit we now get to campgrounds and the true test is to see if this one has a description

136
00:09:59,940 --> 00:10:00,270
.

137
00:10:00,330 --> 00:10:03,210
So let's click on More info and it does.

138
00:10:03,210 --> 00:10:08,550
You can see that this page contains all the information we have about one campground that has this ID

139
00:10:08,780 --> 00:10:13,740
and if we go back this show page has all the information about this campground.

140
00:10:14,070 --> 00:10:14,330
OK.

141
00:10:14,340 --> 00:10:16,030
So we got the show page working.

142
00:10:16,050 --> 00:10:19,890
Let's quickly wrap everything up so we talked about restful routes.

143
00:10:19,890 --> 00:10:21,620
There are four now that we've covered.

144
00:10:21,720 --> 00:10:26,120
The index will show all of a given resource like dogs or campground.

145
00:10:26,340 --> 00:10:32,700
The new route shows the form to create a new resource create is the post route where we actually do

146
00:10:32,700 --> 00:10:38,370
the creation of the resource and show is a route that's a get request and it has an ID and there you

147
00:10:38,440 --> 00:10:38,770
go.

148
00:10:38,790 --> 00:10:42,980
And that's really important because it shows information about one resource.

149
00:10:43,140 --> 00:10:51,060
In our case one dog or in our app one campground and the new command that we saw to do that to interact

150
00:10:51,060 --> 00:10:57,720
with Mongo is find by id and then a quick side note I also showed D-B duck collection drop which we

151
00:10:57,720 --> 00:11:01,810
use to delete all the existing campgrounds in our database with one command