All right welcome back everybody.
And this video we're going to be creating the dynamic price feature.
So I have just Cloon the Jochem version 12 into my C9 workspace and I renamed it 10 in price so you
can clone it or copy it duplicate it call it whatever you like and if you want you can change the database
name so it'll have its own database.
I change mine to version 12.
And that way we're not overriding any preexisting data.
We know how many conflicts there.
OK so let's get started.
So in one window make sure that you're in the till the director and open up Mongo D.
That's whoremonger daimon once that's running we can open up another directory or another tab with the
parent directory for our project dynamic price and we can run no deman.
For those of you that didn't watch my last video no demon is the same as running node app.
This is a module that allows us to not have to go back and restart the server every time we make a change
to our application.
So I run no D-Minn. and you can tell it after.
If you run it without putting up dodgiest in there and it fails it's because you're Pakistan.
So I'm not pointing to the correct file.
So if that's the case just make sure you use no daemon.
And yes I know it's going to work either way.
So get it running.
And now that our service started I can refresh it down here I'll go ahead and open it up full screen
and only click View all campgrounds.
We can add a new campground wants us to log in.
I actually don't have an count on this database yet so create one.
And now when we go to create new campground they ask for the name so we can say hello world.
There's a little test name here and find a picture so plug that in.
And then this is a campground will be our description.
So when we submit it here it is in the index.
And when we click on More info it'll take us to the show page.
And by default it's telling us is nine dollars a night.
So we want to change this right here to where we can enter in upon creation a value for the price of
the campground.
So we're going to go ahead and go back to our code here and the first thing we want to do is edit the
model such that we're able to actually store a price on our campground.
So I'll close out real quick.
OK.
So in our models we have campground about J us and just right below and you can put it below any one
of these but below name.
I will put price and we'll make that a shrink and save this file.
Now we need to go into the view's campgrounds nuda Ejaz and we need to add an input in our new campground
form to allow the user to put in a price whenever they create a new campground.
So I will copy what we have here.
This Divx forum group has an input inside of it and this is for the name.
So right below that we'll just paste this in and fix the formatting will quit and the input class form
control that's all fine.
Type equals text here.
We're going to change the type to a number way when the user inputs it they can't input any type of
string.
We only get a number value from them and then we'll just store that number as a string into the database.
So the name of course will be price and so the name and the placeholder will also be price.
And then we need a min value which will set to zero point zero one.
And then what's called a step and a step just indicates that is going to be a little up and down arrow
on the right hand side and it allows the user to step up by one penny so they can go from one penny
all the way up to Obviously 100 pennies and then into the next dollar.
Matt OK so now that we have that we'll save it and we'll go ahead and copy this emplace into our form.
It's going to be a little bit different.
So right below name we Pogson horseshit to fix the formatting and over here we have to put campground
price.
And this is because this added form the way Cole has it is in the router we are building a object on
recked our body called Camp Ground.
And then that campground object has a bunch of keys name prize image description.
And they point to the values that are coming from inputs in this form.
At this point we don't need a placeholder but what we do need is a value and then we actually have to
change this to E.J. ass and plug in the campground.
Scott price value.
OK.
So if we save that now we can go look at our form is going to want us to sign back in.
So log in real quick
and if we add a new campground here we have our price up and down arrows as I indicated.
It can't go any lower than 0.01.
And if you want to claim can be free you could change it to 0.00.
But when we go up this is that step I was telling you about allows you to step up by one cent and then
of course when you get to 99 is going to roll over into a dollar.
So I will say that this campground is now nine dollars and fifty cents.
And then the name of the campground we'll just do a Hello World to super creative go ahead and grab
another campground.
Image real quick plug in the euro and the description would be.
This is an awesome campground.
Woo.
OK.
So it's like cement and now if we go view Hello World to we still see a $9 a night price here.
So that means we need to go into the show that Ejaz for the campground and change it to where it actually
displays the dynamic value coming from the campground object.
So if we open up the show that Ejay us this is a huge campground show and we scroll down to where it
says $9 a night and what we can do is where the $9 is.
We can just plug in our huge ass clown hat syntax here and we'll put a camp ground dot price right there
and then we'll leave the slash Nye and we'll leave the dollar sign on the outside of it.
So if everything is working how we expect it to we should be able to refresh.
And OK so it's not displaying the amount here.
So now we need to go back to the router and make sure that our posts route for campgrounds is allowing
this value to get stored in the database to begin with.
So I will go back to routes campgrounds and it's our second route here.
So we have name image description Arthur cetera but we never made a variable for price so variable price
is equal to that body price.
And now inside this new campground we have name comany or name call a name Khama and we can put price
Colan price Khama say that what we'll do now is go back here and edit this.
There's no value here so Enter of value $10 and 46 and it's a weird number but okay.
So 10:46 Anite So that's working correctly.
And if we go back to your camp we create now that's our planning page and we create a new campground.
Now we can say do something creative like Cloud's rest of leaves one of the ones from the D4 and the
save time I'm going to reuse the same unit just before the price will be one hundred one dollars and
nine cents and sounds like a radio station my description is going to be this is where the clouds clouds
plural come to press submit Okay.
And if you click More info is $101 and Nine-Nine sense I might add if we go back to just click back
here hello world the original one.
It doesn't have anything.
So we can go at it and fix it here.
OK this one is eight dollars and fifty cents and I submit and there it is.
So now all three of our campgrounds have prices and we're able to edit them and add new ones with a
price to begin with.
Ok cool if you have any questions just post them in the Q&A section and we'll see you in the next video.
Thanks.