1 00:00:00,680 --> 00:00:02,110 All right welcome back everybody. 2 00:00:02,160 --> 00:00:05,640 And this video we're going to be creating the dynamic price feature. 3 00:00:05,730 --> 00:00:15,540 So I have just Cloon the Jochem version 12 into my C9 workspace and I renamed it 10 in price so you 4 00:00:15,540 --> 00:00:22,620 can clone it or copy it duplicate it call it whatever you like and if you want you can change the database 5 00:00:22,620 --> 00:00:25,270 name so it'll have its own database. 6 00:00:25,470 --> 00:00:27,100 I change mine to version 12. 7 00:00:27,540 --> 00:00:31,740 And that way we're not overriding any preexisting data. 8 00:00:31,830 --> 00:00:33,100 We know how many conflicts there. 9 00:00:33,330 --> 00:00:34,920 OK so let's get started. 10 00:00:34,920 --> 00:00:42,620 So in one window make sure that you're in the till the director and open up Mongo D. 11 00:00:42,660 --> 00:00:49,080 That's whoremonger daimon once that's running we can open up another directory or another tab with the 12 00:00:49,080 --> 00:00:54,840 parent directory for our project dynamic price and we can run no deman. 13 00:00:54,840 --> 00:01:00,010 For those of you that didn't watch my last video no demon is the same as running node app. 14 00:01:01,050 --> 00:01:07,110 This is a module that allows us to not have to go back and restart the server every time we make a change 15 00:01:07,110 --> 00:01:08,750 to our application. 16 00:01:08,820 --> 00:01:12,000 So I run no D-Minn. and you can tell it after. 17 00:01:12,270 --> 00:01:16,720 If you run it without putting up dodgiest in there and it fails it's because you're Pakistan. 18 00:01:16,760 --> 00:01:19,150 So I'm not pointing to the correct file. 19 00:01:19,290 --> 00:01:21,850 So if that's the case just make sure you use no daemon. 20 00:01:21,880 --> 00:01:25,810 And yes I know it's going to work either way. 21 00:01:26,010 --> 00:01:27,890 So get it running. 22 00:01:28,200 --> 00:01:33,600 And now that our service started I can refresh it down here I'll go ahead and open it up full screen 23 00:01:35,920 --> 00:01:39,260 and only click View all campgrounds. 24 00:01:39,780 --> 00:01:43,150 We can add a new campground wants us to log in. 25 00:01:43,150 --> 00:01:49,970 I actually don't have an count on this database yet so create one. 26 00:01:50,500 --> 00:01:56,000 And now when we go to create new campground they ask for the name so we can say hello world. 27 00:01:56,220 --> 00:02:01,670 There's a little test name here and find a picture so plug that in. 28 00:02:01,840 --> 00:02:06,570 And then this is a campground will be our description. 29 00:02:06,570 --> 00:02:09,310 So when we submit it here it is in the index. 30 00:02:09,310 --> 00:02:12,510 And when we click on More info it'll take us to the show page. 31 00:02:12,820 --> 00:02:16,180 And by default it's telling us is nine dollars a night. 32 00:02:16,450 --> 00:02:25,090 So we want to change this right here to where we can enter in upon creation a value for the price of 33 00:02:25,180 --> 00:02:26,440 the campground. 34 00:02:26,680 --> 00:02:34,030 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 35 00:02:34,660 --> 00:02:39,900 model such that we're able to actually store a price on our campground. 36 00:02:40,480 --> 00:02:42,050 So I'll close out real quick. 37 00:02:42,500 --> 00:02:42,810 OK. 38 00:02:42,820 --> 00:02:49,780 So in our models we have campground about J us and just right below and you can put it below any one 39 00:02:49,780 --> 00:02:50,860 of these but below name. 40 00:02:50,860 --> 00:02:58,830 I will put price and we'll make that a shrink and save this file. 41 00:02:58,940 --> 00:03:09,110 Now we need to go into the view's campgrounds nuda Ejaz and we need to add an input in our new campground 42 00:03:09,110 --> 00:03:13,650 form to allow the user to put in a price whenever they create a new campground. 43 00:03:14,150 --> 00:03:17,560 So I will copy what we have here. 44 00:03:17,690 --> 00:03:21,820 This Divx forum group has an input inside of it and this is for the name. 45 00:03:21,820 --> 00:03:29,750 So right below that we'll just paste this in and fix the formatting will quit and the input class form 46 00:03:29,750 --> 00:03:30,940 control that's all fine. 47 00:03:30,950 --> 00:03:32,760 Type equals text here. 48 00:03:32,960 --> 00:03:38,930 We're going to change the type to a number way when the user inputs it they can't input any type of 49 00:03:38,930 --> 00:03:39,910 string. 50 00:03:39,920 --> 00:03:45,040 We only get a number value from them and then we'll just store that number as a string into the database. 51 00:03:45,170 --> 00:03:52,700 So the name of course will be price and so the name and the placeholder will also be price. 52 00:03:52,730 --> 00:03:58,910 And then we need a min value which will set to zero point zero one. 53 00:03:59,030 --> 00:04:05,000 And then what's called a step and a step just indicates that is going to be a little up and down arrow 54 00:04:05,000 --> 00:04:12,860 on the right hand side and it allows the user to step up by one penny so they can go from one penny 55 00:04:12,890 --> 00:04:16,760 all the way up to Obviously 100 pennies and then into the next dollar. 56 00:04:16,770 --> 00:04:29,720 Matt OK so now that we have that we'll save it and we'll go ahead and copy this emplace into our form. 57 00:04:29,740 --> 00:04:31,740 It's going to be a little bit different. 58 00:04:31,750 --> 00:04:41,200 So right below name we Pogson horseshit to fix the formatting and over here we have to put campground 59 00:04:42,490 --> 00:04:43,520 price. 60 00:04:43,960 --> 00:04:53,710 And this is because this added form the way Cole has it is in the router we are building a object on 61 00:04:54,180 --> 00:04:56,050 recked our body called Camp Ground. 62 00:04:56,080 --> 00:05:00,700 And then that campground object has a bunch of keys name prize image description. 63 00:05:00,820 --> 00:05:04,080 And they point to the values that are coming from inputs in this form. 64 00:05:04,180 --> 00:05:09,820 At this point we don't need a placeholder but what we do need is a value and then we actually have to 65 00:05:09,820 --> 00:05:13,830 change this to E.J. ass and plug in the campground. 66 00:05:14,190 --> 00:05:16,110 Scott price value. 67 00:05:16,560 --> 00:05:17,310 OK. 68 00:05:17,800 --> 00:05:23,710 So if we save that now we can go look at our form is going to want us to sign back in. 69 00:05:24,160 --> 00:05:25,360 So log in real quick 70 00:05:28,700 --> 00:05:34,090 and if we add a new campground here we have our price up and down arrows as I indicated. 71 00:05:34,310 --> 00:05:37,630 It can't go any lower than 0.01. 72 00:05:37,730 --> 00:05:41,250 And if you want to claim can be free you could change it to 0.00. 73 00:05:41,540 --> 00:05:47,540 But when we go up this is that step I was telling you about allows you to step up by one cent and then 74 00:05:47,540 --> 00:05:50,110 of course when you get to 99 is going to roll over into a dollar. 75 00:05:50,210 --> 00:05:57,500 So I will say that this campground is now nine dollars and fifty cents. 76 00:05:57,800 --> 00:06:05,180 And then the name of the campground we'll just do a Hello World to super creative go ahead and grab 77 00:06:05,180 --> 00:06:06,440 another campground. 78 00:06:06,470 --> 00:06:11,090 Image real quick plug in the euro and the description would be. 79 00:06:11,090 --> 00:06:14,770 This is an awesome campground. 80 00:06:15,000 --> 00:06:15,740 Woo. 81 00:06:15,780 --> 00:06:16,340 OK. 82 00:06:16,400 --> 00:06:27,630 So it's like cement and now if we go view Hello World to we still see a $9 a night price here. 83 00:06:27,790 --> 00:06:33,580 So that means we need to go into the show that Ejaz for the campground and change it to where it actually 84 00:06:33,580 --> 00:06:38,360 displays the dynamic value coming from the campground object. 85 00:06:38,380 --> 00:06:46,330 So if we open up the show that Ejay us this is a huge campground show and we scroll down to where it 86 00:06:46,330 --> 00:06:51,430 says $9 a night and what we can do is where the $9 is. 87 00:06:51,430 --> 00:07:02,490 We can just plug in our huge ass clown hat syntax here and we'll put a camp ground dot price right there 88 00:07:02,920 --> 00:07:07,110 and then we'll leave the slash Nye and we'll leave the dollar sign on the outside of it. 89 00:07:07,150 --> 00:07:11,230 So if everything is working how we expect it to we should be able to refresh. 90 00:07:11,950 --> 00:07:16,690 And OK so it's not displaying the amount here. 91 00:07:16,960 --> 00:07:25,780 So now we need to go back to the router and make sure that our posts route for campgrounds is allowing 92 00:07:25,780 --> 00:07:28,870 this value to get stored in the database to begin with. 93 00:07:28,900 --> 00:07:34,970 So I will go back to routes campgrounds and it's our second route here. 94 00:07:35,050 --> 00:07:41,870 So we have name image description Arthur cetera but we never made a variable for price so variable price 95 00:07:41,870 --> 00:07:45,820 is equal to that body price. 96 00:07:46,030 --> 00:07:53,290 And now inside this new campground we have name comany or name call a name Khama and we can put price 97 00:07:53,290 --> 00:08:01,520 Colan price Khama say that what we'll do now is go back here and edit this. 98 00:08:01,640 --> 00:08:09,310 There's no value here so Enter of value $10 and 46 and it's a weird number but okay. 99 00:08:09,490 --> 00:08:12,860 So 10:46 Anite So that's working correctly. 100 00:08:12,880 --> 00:08:20,480 And if we go back to your camp we create now that's our planning page and we create a new campground. 101 00:08:20,740 --> 00:08:32,410 Now we can say do something creative like Cloud's rest of leaves one of the ones from the D4 and the 102 00:08:32,620 --> 00:08:41,020 save time I'm going to reuse the same unit just before the price will be one hundred one dollars and 103 00:08:41,020 --> 00:08:52,250 nine cents and sounds like a radio station my description is going to be this is where the clouds clouds 104 00:08:52,250 --> 00:08:58,120 plural come to press submit Okay. 105 00:08:58,480 --> 00:09:08,210 And if you click More info is $101 and Nine-Nine sense I might add if we go back to just click back 106 00:09:08,210 --> 00:09:10,520 here hello world the original one. 107 00:09:10,570 --> 00:09:11,680 It doesn't have anything. 108 00:09:11,680 --> 00:09:14,480 So we can go at it and fix it here. 109 00:09:14,550 --> 00:09:20,020 OK this one is eight dollars and fifty cents and I submit and there it is. 110 00:09:20,020 --> 00:09:26,860 So now all three of our campgrounds have prices and we're able to edit them and add new ones with a 111 00:09:26,860 --> 00:09:27,920 price to begin with. 112 00:09:28,210 --> 00:09:33,150 Ok cool if you have any questions just post them in the Q&A section and we'll see you in the next video. 113 00:09:33,370 --> 00:09:33,780 Thanks.