1 00:00:01,680 --> 00:00:06,690 The first thing that we'll do is figure out how we get the form data out of the form and we need to 2 00:00:06,690 --> 00:00:13,890 go back to our form and change one small thing which is on the input we need to give the input and name 3 00:00:14,850 --> 00:00:20,130 the name that we give the input here will be the key that we look at up by inside of the route. 4 00:00:20,130 --> 00:00:24,720 And I think a good name would just be name but I do think that's a little confusing. 5 00:00:24,810 --> 00:00:27,680 So let's just do new friend. 6 00:00:28,350 --> 00:00:35,100 So the value of this in this case Bob will be sent in the body of the request and inside the body the 7 00:00:35,100 --> 00:00:38,520 request there will be a single property named new friend. 8 00:00:38,640 --> 00:00:42,660 And it will be equal to Bob to make this a little easier to see. 9 00:00:42,870 --> 00:00:51,960 Let's go to the US into the post out for ADD friend and let's cancel the log request dot body and request 10 00:00:51,960 --> 00:00:57,430 up body is an object that will contain all of the data from the request body. 11 00:00:57,600 --> 00:01:03,060 And remember when we have a form that's making a post request all the form data is put in the request 12 00:01:03,150 --> 00:01:08,280 body and then it gets to our express EP and we want to pull it out if the request body. 13 00:01:08,280 --> 00:01:12,880 So if I print the request body we should see that new friend is equal to Bob. 14 00:01:13,200 --> 00:01:18,780 However that's not going to work because we're missing one small piece and I'll show you that it doesn't 15 00:01:18,780 --> 00:01:19,130 work. 16 00:01:19,160 --> 00:01:23,660 First let's add in Billie I made a new friend. 17 00:01:23,850 --> 00:01:30,210 We get you have reached the post route and we get a constant log here request up body is undefined. 18 00:01:30,330 --> 00:01:35,790 And that's because Express out of the box doesn't actually create the request up body for us. 19 00:01:35,820 --> 00:01:41,190 We need to explicitly tell it to take the request body and turn it into a javascript object for us to 20 00:01:41,190 --> 00:01:43,360 use called request of body. 21 00:01:43,650 --> 00:01:48,550 So to do that we actually need to install a package called Body parser. 22 00:01:48,660 --> 00:01:57,060 So NPM install body dash parser dash dash save and body posture is kind of gone in and out of express 23 00:01:57,290 --> 00:02:00,040 where at one point it was bundled with the express. 24 00:02:00,060 --> 00:02:02,010 You didn't have to install it separately. 25 00:02:02,010 --> 00:02:05,210 Now you do it is something that we'll use in every app. 26 00:02:05,220 --> 00:02:10,920 Pretty much anytime we have a form that a user enters data into that we want to extract the data from 27 00:02:10,950 --> 00:02:12,120 on the server side. 28 00:02:12,120 --> 00:02:13,770 We need to use body parser. 29 00:02:14,090 --> 00:02:16,740 OK so it's not enough just to install it. 30 00:02:16,800 --> 00:02:19,420 We then need to require it here. 31 00:02:19,980 --> 00:02:28,020 So just you body parser of course require Adi Dasch parser and then the next thing we need to do is 32 00:02:28,020 --> 00:02:37,410 tell express to use body parser so that looks like this need to do app use body parser which is a variable 33 00:02:37,410 --> 00:02:43,770 that we just created by importing the body parts of a package and then we need to do dot you URL encoded 34 00:02:44,700 --> 00:02:51,840 and then instead of here we're going to write extended is true and I don't want to bog this video down 35 00:02:51,840 --> 00:02:56,730 by going into too much detail but with this is if you do have questions you can go to the body parts 36 00:02:56,730 --> 00:03:01,420 or docs and read about what you are el uncoated does and what extended true does. 37 00:03:01,440 --> 00:03:06,730 It's one those lines that will see all the time and honestly just copy and paste most of the time. 38 00:03:06,750 --> 00:03:13,140 So now that we have that set up if we restart the server now without changing our code we have apt up 39 00:03:13,140 --> 00:03:17,850 post add friend and we're constantly taking requests out body. 40 00:03:17,850 --> 00:03:25,790 Now if we refresh Oops! Let's go back to the form slash friends and add in a friend named Linda. 41 00:03:26,130 --> 00:03:33,540 I made a new friend and we look in the con. We see request up Adi is now an object and that's coming 42 00:03:33,540 --> 00:03:34,610 from party parser. 43 00:03:34,770 --> 00:03:40,680 So Buddy parser took the request body and parsed it into a javascript object which has new friend is 44 00:03:40,680 --> 00:03:41,860 equal to Linda. 45 00:03:42,180 --> 00:03:46,660 So what we actually want to do is request up body datt new friend. 46 00:03:46,770 --> 00:03:50,370 And that will give us the value of whatever was inside the form. 47 00:03:50,820 --> 00:03:56,760 And remember new friend is because of the name property the name attribute that we set on the input 48 00:03:57,050 --> 00:04:01,650 whatever we put here is what we would need to look it up by inside of the route. 49 00:04:01,920 --> 00:04:06,750 We don't just want to cancel that log it though what we want to do is actually add it to the friends 50 00:04:06,840 --> 00:04:09,540 array which we defined here. 51 00:04:09,540 --> 00:04:15,840 So the first thing to do is make a new variable and we'll just call it new friend and we'll just store 52 00:04:15,930 --> 00:04:22,590 request up body new friend and then we want to add it to this array but unfortunately we can't just 53 00:04:22,590 --> 00:04:30,180 do friends stop push new friend because there's a scoping issue where our friend is only defined instead 54 00:04:30,180 --> 00:04:31,430 of this function. 55 00:04:31,740 --> 00:04:34,570 And out here there's no such thing as friends. 56 00:04:34,620 --> 00:04:35,430 It's a very sad world. 57 00:04:35,430 --> 00:04:36,240 There's no friends. 58 00:04:36,450 --> 00:04:44,960 So we need to copy this out and move it up somewhere where it's visible to all of our routes. 59 00:04:45,900 --> 00:04:50,760 And this is something that we won't be doing for long because this is just an array of friends and we 60 00:04:50,760 --> 00:04:56,650 can add new friends in but as soon as the server stops they'll go away and reset to disvalue. 61 00:04:57,120 --> 00:05:00,630 Soon we'll be using a database and we won't have to worry about the scoping issue. 62 00:05:00,660 --> 00:05:05,300 For now we just need to move it outside the routes so that we can access it in all the routes. 63 00:05:05,490 --> 00:05:08,990 So now friends stop push new French should work and I'll show you that. 64 00:05:08,990 --> 00:05:14,780 Now restart the server go back to our form here. 65 00:05:15,090 --> 00:05:19,370 Refresh the page and let's add in Jeanne. 66 00:05:20,330 --> 00:05:22,920 I made a new friend and we get to this route. 67 00:05:22,930 --> 00:05:28,950 Now if we go back to friends I see Jean has been added. 68 00:05:29,490 --> 00:05:34,520 So that means that this is working where we're extracting requests up body up new friend. 69 00:05:34,680 --> 00:05:39,560 And we're also pushing it into the frenzy array and then we're sending this response. 70 00:05:39,650 --> 00:05:44,760 However it's pretty rare that we want to have some sort of response like this after we add a new friend 71 00:05:44,770 --> 00:05:45,410 . 72 00:05:46,020 --> 00:05:47,950 Most of the time we don't want to see this. 73 00:05:47,970 --> 00:05:53,700 Usually we just want to go back to this page and see the new friend and to do that what we can do is 74 00:05:53,730 --> 00:06:02,070 instead of send or instead of render we can use a nother method on rez called redirect and redirect 75 00:06:02,070 --> 00:06:02,390 . 76 00:06:02,400 --> 00:06:03,750 Well take the name of a route. 77 00:06:03,990 --> 00:06:10,140 And in our case well do slash friends and they will redirect to this route and they will run the code 78 00:06:10,170 --> 00:06:16,860 inside of the slash friends route and all that does is it renders the French template and passes in 79 00:06:17,010 --> 00:06:18,290 the value of friends. 80 00:06:18,600 --> 00:06:26,240 So now if we start the server again and we go back refresh the page let's add in a new friend here. 81 00:06:26,610 --> 00:06:31,180 Tina and hit I made a new friend and you can see Tina has been added. 82 00:06:31,260 --> 00:06:34,000 Remember that we're not just staying on this page the whole time. 83 00:06:34,050 --> 00:06:36,790 If you watch this right here let me do it again. 84 00:06:36,880 --> 00:06:38,210 Let's add in Jeanne. 85 00:06:38,530 --> 00:06:40,840 I hit I made a new friend. 86 00:06:40,910 --> 00:06:45,690 You can see the page momentarily refreshes and that's because we're sending a post request somewhere 87 00:06:45,690 --> 00:06:49,440 else that post requests is getting too wrapped up post. 88 00:06:49,440 --> 00:06:52,090 Ad friend it's doing some logic in here. 89 00:06:52,260 --> 00:06:56,640 And then it's very quickly redirecting us back to the same page the same route that we're already on 90 00:06:56,660 --> 00:06:56,840 . 91 00:06:56,970 --> 00:07:04,080 So it's hardly noticeable you'll just see the page flicker for a second and see this little icon is 92 00:07:04,080 --> 00:07:06,360 the giveaway that the page is revoting. 93 00:07:06,360 --> 00:07:12,820 But as I mentioned if I restart the server the value of the friends array goes back to this. 94 00:07:12,840 --> 00:07:16,890 So we lose all of those friends and we don't have any permanence to our data. 95 00:07:16,890 --> 00:07:20,190 We'll fix that once we get to databases in just a few of us. 96 00:07:20,530 --> 00:07:20,860 OK. 97 00:07:20,880 --> 00:07:24,160 Let's de-brief on everything we've covered a lot here. 98 00:07:24,180 --> 00:07:30,390 The first thing we talked about was setting up a post route and all we had to do was app post and it 99 00:07:30,390 --> 00:07:35,740 works just like apt get except that it's only triggered by post requests to that particular you row 100 00:07:35,750 --> 00:07:36,100 . 101 00:07:36,570 --> 00:07:43,950 And then you know and then we saw how we can send a post request with postman which works and then we 102 00:07:43,950 --> 00:07:47,390 saw that we can send a request a post request using postman. 103 00:07:47,400 --> 00:07:49,070 And then also using a form. 104 00:07:49,290 --> 00:07:55,740 And when we send a form we need to provide action and method and I introduce this really early on when 105 00:07:55,740 --> 00:08:01,170 we talked about age to my forms and I mentioned that later in the course you would know more about what 106 00:08:01,170 --> 00:08:05,460 action and method mean and what a post request is versus a get request. 107 00:08:05,460 --> 00:08:09,990 So this is that time now where you're starting to understand a little bit more hopefully about the difference 108 00:08:09,990 --> 00:08:15,630 between getting posts and what this action means and what routes are anyway so we have a forum and it 109 00:08:15,630 --> 00:08:22,290 hasn't a single input and on that input we've added the name attribute and this name attribute which 110 00:08:22,290 --> 00:08:27,200 we've set the value to be new friend is how the data is added to the request body. 111 00:08:27,210 --> 00:08:33,390 So when we submit this whatever the value of this form is let's say Tina it's going to be sent under 112 00:08:33,390 --> 00:08:35,130 the name of new friend. 113 00:08:35,400 --> 00:08:42,090 And then inside of our apparatus we can extract it with the request up bodycount new friend only if 114 00:08:42,300 --> 00:08:48,600 we've included body parser which we had to install NPM install body purser and then we had to tell our 115 00:08:48,600 --> 00:08:49,810 app to use it. 116 00:08:49,800 --> 00:08:56,070 So apt use the parser and this whole line is one will see all the time and when we do that the parser 117 00:08:56,070 --> 00:09:02,100 will take the request body and parse it into a javascript object that we can use and access like we 118 00:09:02,100 --> 00:09:02,720 did here. 119 00:09:02,820 --> 00:09:08,640 And the last new thing that we saw was redstart redirect which will take a you know like slash friend 120 00:09:09,030 --> 00:09:13,890 and that will trigger that route again and run all the code inside of the slash friends route. 121 00:09:13,890 --> 00:09:15,280 All right I'll see you in the next lesson.