1
00:00:00,460 --> 00:00:05,250
Well come back in this video we're going to start on the Yelp camp application that we're going to work

2
00:00:05,250 --> 00:00:07,010
on for the rest of this course.

3
00:00:07,050 --> 00:00:09,280
We're going to start by getting the basic set up going.

4
00:00:09,280 --> 00:00:12,720
Getting express app going and having our first few routes and templates.

5
00:00:12,720 --> 00:00:17,490
But before we talk about that I just want to explain the workflow here and how this will work as we

6
00:00:17,490 --> 00:00:19,890
continually add different features.

7
00:00:19,950 --> 00:00:25,080
I want you to be able to see the code at any point in time I don't want you just to see the final solution

8
00:00:25,080 --> 00:00:25,370
.

9
00:00:25,380 --> 00:00:28,370
So what I'm going to do is work in different folders.

10
00:00:28,470 --> 00:00:33,610
So I have a yelp camp directory and then instead of Yelp camp I'm going to add different versions.

11
00:00:33,720 --> 00:00:34,970
So you don't have to do this.

12
00:00:35,040 --> 00:00:39,780
You'll be able to just continually add to one version yourself if you want to follow along and make

13
00:00:39,780 --> 00:00:40,710
different versions.

14
00:00:40,710 --> 00:00:45,570
I'll always point out which version we're on but the goal is that if you want it to look back at what

15
00:00:45,570 --> 00:00:51,570
I added between version 2 and version 3 You could open up the version 2 and version 3 directories and

16
00:00:51,570 --> 00:00:52,580
compare them.

17
00:00:52,960 --> 00:00:55,770
OK now that that's out of the way let's get started here.

18
00:00:55,830 --> 00:01:01,950
What we're going to do is set up the basic app will install Express and each Yes we'll get the views

19
00:01:01,950 --> 00:01:05,050
directory going and then we'll add two different routes.

20
00:01:05,130 --> 00:01:09,660
So we're going to have a home page basically like a welcome to Yelp camp.

21
00:01:09,840 --> 00:01:11,750
Here's a little blurb about what we do.

22
00:01:11,880 --> 00:01:12,750
Here's a sign up button.

23
00:01:12,750 --> 00:01:15,760
Here is a contact link that won't actually work just yet.

24
00:01:15,840 --> 00:01:21,060
And then from there we're going to create the campgrounds page which will be the main page of our app

25
00:01:21,270 --> 00:01:25,410
that will list all of the campgrounds in our database and we don't have a database yet.

26
00:01:25,410 --> 00:01:30,600
So it's just going to be an array of campground just like we did in the last video with the friends

27
00:01:30,660 --> 00:01:31,930
where we had an array of friends.

28
00:01:32,010 --> 00:01:38,100
Very soon we will be migrating to a new database for now a campground is only going to have two different

29
00:01:38,100 --> 00:01:39,530
pieces of information.

30
00:01:39,840 --> 00:01:44,880
By the end of the Course campgrounds will have 10 to 15 different pieces but for now it's just a name

31
00:01:45,180 --> 00:01:51,120
like salmon creek or Dewey point or whatever the name of our campground is and then we're going to have

32
00:01:51,120 --> 00:01:55,000
an image that we can display and the image will just be a u r l.

33
00:01:55,380 --> 00:01:56,460
So let's get going.

34
00:01:56,760 --> 00:02:04,110
I'll start by running NPM in it and then we'll hit enter here and enter again.

35
00:02:04,380 --> 00:02:07,810
We'll just call this the cam v1.

36
00:02:08,640 --> 00:02:11,990
I'll make apt such as my entry point.

37
00:02:12,480 --> 00:02:13,790
And there we go.

38
00:02:14,060 --> 00:02:17,670
Author and hit enter.

39
00:02:17,700 --> 00:02:18,550
One more time.

40
00:02:18,780 --> 00:02:19,300
OK.

41
00:02:19,500 --> 00:02:23,920
Now let's run NPM install Express and yes.

42
00:02:23,940 --> 00:02:25,320
Dash dash save.

43
00:02:25,410 --> 00:02:29,580
I haven't shown you this yet but this is a much easier way if you want to install multiple packages

44
00:02:29,580 --> 00:02:33,540
at once you just separate them by a space.

45
00:02:35,820 --> 00:02:43,300
And if you look at the package stub Jason you can see it has SJS and express.

46
00:02:44,160 --> 00:02:45,590
So now let's create the app.

47
00:02:45,680 --> 00:02:57,840
Yes and open that up and inside of here add our basic express importing which you should be pretty comfortable

48
00:02:57,840 --> 00:03:00,700
with right now require Express.

49
00:03:01,050 --> 00:03:10,700
And then the app variable equals express function being executed and then will jump down and do the

50
00:03:10,700 --> 00:03:15,570
opt out listen which also you should be pretty familiar with by now process.

51
00:03:15,610 --> 00:03:22,980
Ian VI port process that EMV IP and the callback

52
00:03:25,680 --> 00:03:34,510
and and here I'll do a consular log that says Yelp camp is started.

53
00:03:35,100 --> 00:03:42,000
Let's do the camp server just like that and save.

54
00:03:42,320 --> 00:03:45,510
And now let's go back and start by adding our landing page.

55
00:03:45,720 --> 00:03:49,210
And like most applications the landing page is on the right path.

56
00:03:49,440 --> 00:03:52,770
So we're just going to add an app that get flash

57
00:03:58,770 --> 00:04:04,410
and we'll start with just a redstart send to make sure things work OK and we'll just send this will

58
00:04:04,410 --> 00:04:13,080
be the landing page soon and save and then we'll start the server make sure we get the camp server had

59
00:04:13,080 --> 00:04:18,010
started and then we go back and just refresh on our route path.

60
00:04:18,300 --> 00:04:18,700
OK.

61
00:04:18,720 --> 00:04:21,690
And we get the response that's all we're looking for.

62
00:04:21,810 --> 00:04:28,230
Now let's go ahead and set up our templates so we need to make a news directory that make directory

63
00:04:28,830 --> 00:04:36,680
views and we'll make a template called landing that each of us inside the views directory landing.

64
00:04:36,810 --> 00:04:39,080
Yes there we go.

65
00:04:39,240 --> 00:04:47,580
And then we'll open that up use slash landing and we'll just put a very simple markup in here.

66
00:04:47,580 --> 00:04:54,030
Landing Page and then done here we can put a paragraph.

67
00:04:54,030 --> 00:04:56,340
Welcome to the Oprah camp.

68
00:04:56,340 --> 00:05:00,720
And of course this will all be changed and will be styled very differently by the end of the course

69
00:05:00,740 --> 00:05:00,900
.

70
00:05:01,110 --> 00:05:03,750
But for now we just want to make sure that things are working.

71
00:05:03,810 --> 00:05:05,110
Then let's go back to APT.

72
00:05:05,120 --> 00:05:05,770
Yes.

73
00:05:06,030 --> 00:05:12,470
And the first thing we'll do is change this so that it's a rest render landing and we'll leave off the

74
00:05:12,480 --> 00:05:12,880
dot.

75
00:05:13,000 --> 00:05:13,560
Yes.

76
00:05:13,770 --> 00:05:23,490
And to do that I need to add in the app set view engine to be J.S..

77
00:05:23,880 --> 00:05:25,100
And then we don't have to write.

78
00:05:25,120 --> 00:05:30,630
E.J. as here and we'll save restart the server.

79
00:05:30,900 --> 00:05:35,770
James refresh and we get our landing page template.

80
00:05:36,180 --> 00:05:37,400
Great.

81
00:05:37,410 --> 00:05:39,880
Next let's work on the campground route.

82
00:05:40,110 --> 00:05:46,470
So we're going to have an app to get and the you auroral should be slash campgrounds and this should

83
00:05:46,470 --> 00:05:50,910
show all of the campgrounds that we have which right now we don't have anything.

84
00:05:51,030 --> 00:05:56,820
But we will shortly to request and response just like this save.

85
00:05:57,060 --> 00:06:02,760
And then we need to define the campgrounds array which remember will only be an array temporarily.

86
00:06:02,750 --> 00:06:07,500
The next big change you're going to make is adding a database and having our campgrounds be saved to

87
00:06:07,500 --> 00:06:12,960
the database for now it's an array and each campground has a name and an image.

88
00:06:12,960 --> 00:06:14,350
So it's going to look like this.

89
00:06:14,580 --> 00:06:19,840
Or we have an array and then each item in the array is an object.

90
00:06:19,950 --> 00:06:27,630
And each one has a name and then let's just say name is Salmon Creek somewhere I went camping recently

91
00:06:28,040 --> 00:06:37,520
and then image and then it will be an URL of an image like HTP whatever that GWW image dotcom.

92
00:06:37,560 --> 00:06:38,190
There we go.

93
00:06:38,490 --> 00:06:40,560
And then we'll have an array of these.

94
00:06:40,740 --> 00:06:45,570
So we might have 10 different campgrounds 100 by the end of the course.

95
00:06:45,690 --> 00:06:50,460
And each one of them has a name and an image and then eventually they'll have things like Latitude and

96
00:06:50,460 --> 00:06:57,780
Longitude city and state address capacity seasonality all these different attributes but we're starting

97
00:06:57,770 --> 00:06:59,950
simple name and image.

98
00:07:00,600 --> 00:07:02,110
Let's go back to Apter Yes.

99
00:07:02,310 --> 00:07:09,140
And what we're going to do is to find that array and we can start by just doing it in here so far we'll

100
00:07:09,240 --> 00:07:11,900
call it campgrounds it equals an array.

101
00:07:12,210 --> 00:07:17,740
And then inside the array and just format this a little bit better as we go inside the array we're going

102
00:07:17,740 --> 00:07:19,660
to have some starter objects.

103
00:07:19,800 --> 00:07:25,590
And the first one will have name and I'll just go with Semon creek.

104
00:07:26,000 --> 00:07:30,210
You can just make anything up and will have image and I'll come back and fill in the images.

105
00:07:30,330 --> 00:07:38,940
And then the next one will do this make up another site we'll call it to Granites hill and then one

106
00:07:38,940 --> 00:07:44,580
more patrol call mountain goats breast.

107
00:07:44,580 --> 00:07:45,110
All right.

108
00:07:45,120 --> 00:07:48,960
So three campsites three totally fictional names and for images.

109
00:07:48,960 --> 00:07:53,540
I'm actually going to use some creative commons photos just so I don't run to any issues.

110
00:07:53,550 --> 00:07:57,690
These are not going to correspond to any of the camp sites that I've actually visited but I'm just going

111
00:07:57,690 --> 00:07:58,920
to pick some images here.

112
00:07:59,070 --> 00:08:01,540
Let's go with this one to start.

113
00:08:01,690 --> 00:08:07,550
So I'm going to copy the image you or I'll go back in here and that will be mountain goats rest.

114
00:08:07,590 --> 00:08:08,340
Why not.

115
00:08:08,630 --> 00:08:13,160
And then we'll go back again and I'll take this one here.

116
00:08:13,590 --> 00:08:17,800
Copy him into RL And this will be Salmon Creek.

117
00:08:18,300 --> 00:08:21,630
And then we need one more and I'll just take this one.

118
00:08:21,690 --> 00:08:26,180
Of course this is not really a campsite but that's beside the point here.

119
00:08:26,340 --> 00:08:31,390
I encourage you to use a real campsite names in real camp site images if you care.

120
00:08:31,440 --> 00:08:36,120
If not if you hate camping which is something I thought about I did worry that this might alienate some

121
00:08:36,120 --> 00:08:41,540
people but if you do hate camping which I guess is understandable you could easily change this application

122
00:08:41,550 --> 00:08:42,660
over to something else.

123
00:08:42,750 --> 00:08:48,890
Once we finish it you could make it into an event app a party's application a restaurant review site

124
00:08:49,010 --> 00:08:53,040
anything like that but I recommend you wait until the end of the Course to do that so that you don't

125
00:08:53,040 --> 00:08:55,990
get confused with naming and different variables that we have.

126
00:08:56,190 --> 00:09:03,180
So campground Today's For now fake campgrounds and will save make sure we add or commas in between the

127
00:09:03,170 --> 00:09:05,410
different elements in the array.

128
00:09:05,420 --> 00:09:12,410
There we go and we'll start by rendering a template redstart render and it's going to be called campgrounds

129
00:09:12,920 --> 00:09:15,170
and we're not going to pass the data through just yet.

130
00:09:15,170 --> 00:09:18,170
We're just going to make sure the template is working correctly.

131
00:09:18,380 --> 00:09:28,380
Now we need to stop the server touch a new file views slash campground ups that E.J. us and then we'll

132
00:09:28,380 --> 00:09:29,370
open that up.

133
00:09:31,370 --> 00:09:35,000
It's like that and in here we'll add an H1.

134
00:09:35,030 --> 00:09:44,510
This is the campground page and save and let's make sure that we see that page when we start the server

135
00:09:44,510 --> 00:09:52,850
up we can refresh and let's go to slash campgrounds and we get.

136
00:09:52,850 --> 00:09:54,190
This is the campgrounds page.

137
00:09:54,440 --> 00:09:57,430
And while we're here it would be nice to add some blinks.

138
00:09:57,470 --> 00:10:03,560
So I'm going to add a link to the landing page that says View all the campgrounds and to do that and

139
00:10:03,560 --> 00:10:10,400
need to go to the lending template and just at the bottom on an anchored tag at the ref attribute and

140
00:10:10,400 --> 00:10:13,490
the ATF needs to be slash campground.

141
00:10:13,820 --> 00:10:24,890
And I'll just say you all campgrounds and save restart the server refresh view of campgrounds now takes

142
00:10:24,890 --> 00:10:26,610
us to the campground page.

143
00:10:26,630 --> 00:10:32,400
All right so now let's go and make sure that we pass the data through our campground into the rest of

144
00:10:32,400 --> 00:10:38,770
the render call and then we can loop through all of it and display each image and each name in our template

145
00:10:39,410 --> 00:10:45,800
will start by going to update us and adding in that second argument here which is an object of all the

146
00:10:45,800 --> 00:10:52,690
data we want to pass through and we'll pass in campgrounds under the name campgrounds.

147
00:10:52,700 --> 00:10:57,220
So remember this is the data we're passing in and this is the name we want to give it.

148
00:10:57,320 --> 00:11:00,950
We could call this anything we wanted but it's common to see them name the same thing.

149
00:11:01,160 --> 00:11:09,080
So we'll save now and go back to our template and we'll start by just doing this campgrounds and if

150
00:11:09,080 --> 00:11:11,770
we see anything it will look like object object.

151
00:11:11,810 --> 00:11:17,420
If we've done it correctly then we know that we've passed the data through restart the server or refresh

152
00:11:17,910 --> 00:11:21,800
Rigaud an array with three objects inside.

153
00:11:22,740 --> 00:11:26,840
So now let's loop through and display each title or each name and image.

154
00:11:27,290 --> 00:11:32,020
So I'll keep these brackets here but I'll get rid of the equal sign and we'll do a for each.

155
00:11:32,150 --> 00:11:41,270
So that will be a campground for each and then pass in that anonymous function the callback and we'll

156
00:11:41,270 --> 00:11:47,810
call it campground and we'll hit enter here and then we need to go back and make sure that we add in

157
00:11:47,810 --> 00:11:55,010
the correct closing Ejay us brackets and then down here we need to enclose this with each us as well

158
00:11:55,020 --> 00:11:55,640
.

159
00:11:56,240 --> 00:11:56,880
OK.

160
00:11:57,080 --> 00:12:01,820
So that should loop through campgrounds and then what we want to do for each one we'll just display

161
00:12:01,820 --> 00:12:02,850
the name first.

162
00:12:03,080 --> 00:12:05,190
So we'll start with an ally.

163
00:12:05,270 --> 00:12:05,890
Why not.

164
00:12:06,050 --> 00:12:13,520
And we'll just do our E.J. s with the equal sign and all make some space so that it's a little easier

165
00:12:13,520 --> 00:12:14,700
to see what's happening.

166
00:12:14,900 --> 00:12:18,190
And we're just going to display inside the Y campground.

167
00:12:18,340 --> 00:12:22,750
Dot name and save all space that's out.

168
00:12:23,120 --> 00:12:28,460
Now let's load up the page and refresh this and we get three campground names.

169
00:12:28,460 --> 00:12:31,880
The last thing I want to do is make sure that we display the images.

170
00:12:31,880 --> 00:12:39,470
So we'll go back in here and rather than an ally let's change this so that we have a div tag for each

171
00:12:39,470 --> 00:12:40,290
campground.

172
00:12:40,400 --> 00:12:44,390
And in the div tag will display a h.

173
00:12:44,390 --> 00:12:52,530
Let's do a 4 with the campground name and then below it will put an image tag.

174
00:12:53,450 --> 00:13:00,950
And what we need to do is give the image a source and inside the quotes rather than a u r l like this

175
00:13:01,490 --> 00:13:08,120
whatever you are ELAS are going to put the image from the campground and we can't just do campground

176
00:13:08,300 --> 00:13:09,160
that image.

177
00:13:09,200 --> 00:13:11,030
We need those Ejay as brackets.

178
00:13:11,330 --> 00:13:16,540
So we have to do it inside the quotes which is a little confusing to some of my students at first because

179
00:13:16,550 --> 00:13:19,250
campground that image is already a string.

180
00:13:19,700 --> 00:13:25,160
And you can see here but remember that when we when we take this and add it into the template those

181
00:13:25,160 --> 00:13:26,820
quotes don't come along with it.

182
00:13:26,900 --> 00:13:28,350
It's just added as text.

183
00:13:28,430 --> 00:13:33,800
So it would look like this HTP colon slash whatever we need quotes around it.

184
00:13:33,980 --> 00:13:39,080
So we have to make sure that we're adding the Ejaz tags inside of the quotes just like that.

185
00:13:39,410 --> 00:13:39,770
OK.

186
00:13:39,800 --> 00:13:45,800
So then what we want to do is campground image make sure we use image.

187
00:13:45,800 --> 00:13:46,540
There we go.

188
00:13:46,760 --> 00:13:54,670
I am A-G and we have that spelled here the exact same way and I'll stop the server restarted.

189
00:13:54,980 --> 00:14:01,650
Let's go back and refresh the page and we get the three campgrounds with the three images.

190
00:14:01,670 --> 00:14:02,300
All right great.

191
00:14:02,300 --> 00:14:07,270
So that's all I want to do in this video was get the basic structure set up of our two routes.

192
00:14:07,280 --> 00:14:10,060
Let's go back to make sure we did all the things we set out to do.

193
00:14:10,340 --> 00:14:15,740
So at the landing page yes we did that at the campground page that lists all the campground.

194
00:14:15,860 --> 00:14:19,390
We also did that each campground has a name and an image.

195
00:14:19,400 --> 00:14:19,760
All right