Well come back in this video we're going to start on the Yelp camp application that we're going to work
on for the rest of this course.
We're going to start by getting the basic set up going.
Getting express app going and having our first few routes and templates.
But before we talk about that I just want to explain the workflow here and how this will work as we
continually add different features.
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
.
So what I'm going to do is work in different folders.
So I have a yelp camp directory and then instead of Yelp camp I'm going to add different versions.
So you don't have to do this.
You'll be able to just continually add to one version yourself if you want to follow along and make
different versions.
I'll always point out which version we're on but the goal is that if you want it to look back at what
I added between version 2 and version 3 You could open up the version 2 and version 3 directories and
compare them.
OK now that that's out of the way let's get started here.
What we're going to do is set up the basic app will install Express and each Yes we'll get the views
directory going and then we'll add two different routes.
So we're going to have a home page basically like a welcome to Yelp camp.
Here's a little blurb about what we do.
Here's a sign up button.
Here is a contact link that won't actually work just yet.
And then from there we're going to create the campgrounds page which will be the main page of our app
that will list all of the campgrounds in our database and we don't have a database yet.
So it's just going to be an array of campground just like we did in the last video with the friends
where we had an array of friends.
Very soon we will be migrating to a new database for now a campground is only going to have two different
pieces of information.
By the end of the Course campgrounds will have 10 to 15 different pieces but for now it's just a name
like salmon creek or Dewey point or whatever the name of our campground is and then we're going to have
an image that we can display and the image will just be a u r l.
So let's get going.
I'll start by running NPM in it and then we'll hit enter here and enter again.
We'll just call this the cam v1.
I'll make apt such as my entry point.
And there we go.
Author and hit enter.
One more time.
OK.
Now let's run NPM install Express and yes.
Dash dash save.
I haven't shown you this yet but this is a much easier way if you want to install multiple packages
at once you just separate them by a space.
And if you look at the package stub Jason you can see it has SJS and express.
So now let's create the app.
Yes and open that up and inside of here add our basic express importing which you should be pretty comfortable
with right now require Express.
And then the app variable equals express function being executed and then will jump down and do the
opt out listen which also you should be pretty familiar with by now process.
Ian VI port process that EMV IP and the callback
and and here I'll do a consular log that says Yelp camp is started.
Let's do the camp server just like that and save.
And now let's go back and start by adding our landing page.
And like most applications the landing page is on the right path.
So we're just going to add an app that get flash
and we'll start with just a redstart send to make sure things work OK and we'll just send this will
be the landing page soon and save and then we'll start the server make sure we get the camp server had
started and then we go back and just refresh on our route path.
OK.
And we get the response that's all we're looking for.
Now let's go ahead and set up our templates so we need to make a news directory that make directory
views and we'll make a template called landing that each of us inside the views directory landing.
Yes there we go.
And then we'll open that up use slash landing and we'll just put a very simple markup in here.
Landing Page and then done here we can put a paragraph.
Welcome to the Oprah camp.
And of course this will all be changed and will be styled very differently by the end of the course
.
But for now we just want to make sure that things are working.
Then let's go back to APT.
Yes.
And the first thing we'll do is change this so that it's a rest render landing and we'll leave off the
dot.
Yes.
And to do that I need to add in the app set view engine to be J.S..
And then we don't have to write.
E.J. as here and we'll save restart the server.
James refresh and we get our landing page template.
Great.
Next let's work on the campground route.
So we're going to have an app to get and the you auroral should be slash campgrounds and this should
show all of the campgrounds that we have which right now we don't have anything.
But we will shortly to request and response just like this save.
And then we need to define the campgrounds array which remember will only be an array temporarily.
The next big change you're going to make is adding a database and having our campgrounds be saved to
the database for now it's an array and each campground has a name and an image.
So it's going to look like this.
Or we have an array and then each item in the array is an object.
And each one has a name and then let's just say name is Salmon Creek somewhere I went camping recently
and then image and then it will be an URL of an image like HTP whatever that GWW image dotcom.
There we go.
And then we'll have an array of these.
So we might have 10 different campgrounds 100 by the end of the course.
And each one of them has a name and an image and then eventually they'll have things like Latitude and
Longitude city and state address capacity seasonality all these different attributes but we're starting
simple name and image.
Let's go back to Apter Yes.
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
call it campgrounds it equals an array.
And then inside the array and just format this a little bit better as we go inside the array we're going
to have some starter objects.
And the first one will have name and I'll just go with Semon creek.
You can just make anything up and will have image and I'll come back and fill in the images.
And then the next one will do this make up another site we'll call it to Granites hill and then one
more patrol call mountain goats breast.
All right.
So three campsites three totally fictional names and for images.
I'm actually going to use some creative commons photos just so I don't run to any issues.
These are not going to correspond to any of the camp sites that I've actually visited but I'm just going
to pick some images here.
Let's go with this one to start.
So I'm going to copy the image you or I'll go back in here and that will be mountain goats rest.
Why not.
And then we'll go back again and I'll take this one here.
Copy him into RL And this will be Salmon Creek.
And then we need one more and I'll just take this one.
Of course this is not really a campsite but that's beside the point here.
I encourage you to use a real campsite names in real camp site images if you care.
If not if you hate camping which is something I thought about I did worry that this might alienate some
people but if you do hate camping which I guess is understandable you could easily change this application
over to something else.
Once we finish it you could make it into an event app a party's application a restaurant review site
anything like that but I recommend you wait until the end of the Course to do that so that you don't
get confused with naming and different variables that we have.
So campground Today's For now fake campgrounds and will save make sure we add or commas in between the
different elements in the array.
There we go and we'll start by rendering a template redstart render and it's going to be called campgrounds
and we're not going to pass the data through just yet.
We're just going to make sure the template is working correctly.
Now we need to stop the server touch a new file views slash campground ups that E.J. us and then we'll
open that up.
It's like that and in here we'll add an H1.
This is the campground page and save and let's make sure that we see that page when we start the server
up we can refresh and let's go to slash campgrounds and we get.
This is the campgrounds page.
And while we're here it would be nice to add some blinks.
So I'm going to add a link to the landing page that says View all the campgrounds and to do that and
need to go to the lending template and just at the bottom on an anchored tag at the ref attribute and
the ATF needs to be slash campground.
And I'll just say you all campgrounds and save restart the server refresh view of campgrounds now takes
us to the campground page.
All right so now let's go and make sure that we pass the data through our campground into the rest of
the render call and then we can loop through all of it and display each image and each name in our template
will start by going to update us and adding in that second argument here which is an object of all the
data we want to pass through and we'll pass in campgrounds under the name campgrounds.
So remember this is the data we're passing in and this is the name we want to give it.
We could call this anything we wanted but it's common to see them name the same thing.
So we'll save now and go back to our template and we'll start by just doing this campgrounds and if
we see anything it will look like object object.
If we've done it correctly then we know that we've passed the data through restart the server or refresh
Rigaud an array with three objects inside.
So now let's loop through and display each title or each name and image.
So I'll keep these brackets here but I'll get rid of the equal sign and we'll do a for each.
So that will be a campground for each and then pass in that anonymous function the callback and we'll
call it campground and we'll hit enter here and then we need to go back and make sure that we add in
the correct closing Ejay us brackets and then down here we need to enclose this with each us as well
.
OK.
So that should loop through campgrounds and then what we want to do for each one we'll just display
the name first.
So we'll start with an ally.
Why not.
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
to see what's happening.
And we're just going to display inside the Y campground.
Dot name and save all space that's out.
Now let's load up the page and refresh this and we get three campground names.
The last thing I want to do is make sure that we display the images.
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
campground.
And in the div tag will display a h.
Let's do a 4 with the campground name and then below it will put an image tag.
And what we need to do is give the image a source and inside the quotes rather than a u r l like this
whatever you are ELAS are going to put the image from the campground and we can't just do campground
that image.
We need those Ejay as brackets.
So we have to do it inside the quotes which is a little confusing to some of my students at first because
campground that image is already a string.
And you can see here but remember that when we when we take this and add it into the template those
quotes don't come along with it.
It's just added as text.
So it would look like this HTP colon slash whatever we need quotes around it.
So we have to make sure that we're adding the Ejaz tags inside of the quotes just like that.
OK.
So then what we want to do is campground image make sure we use image.
There we go.
I am A-G and we have that spelled here the exact same way and I'll stop the server restarted.
Let's go back and refresh the page and we get the three campgrounds with the three images.
All right great.
So that's all I want to do in this video was get the basic structure set up of our two routes.
Let's go back to make sure we did all the things we set out to do.
So at the landing page yes we did that at the campground page that lists all the campground.
We also did that each campground has a name and an image.
All right