WEBVTT 00:00.080 --> 00:06.090 OK so picking up where we left off for you remember in the last video where we got the age team up and 00:06.090 --> 00:09.880 running the Ejay Yes file I said ignore the form for now we're coming back to that. 00:10.110 --> 00:17.400 Well now as a video where we're going to get that form working and it involves a couple of new concepts. 00:17.400 --> 00:18.780 So hang in there. 00:18.870 --> 00:20.790 The minus Cuil part is the same. 00:20.790 --> 00:22.650 We've already seen how to insert. 00:23.210 --> 00:27.120 If we go back to this early Where's that. 00:27.120 --> 00:32.550 Here we go we've seen how to insert this single file you know we inserted this single rescue of the 00:32.550 --> 00:33.360 dog. 00:33.540 --> 00:38.820 We also saw how to do it with this object syntax and then we saw how to do a bulk insert with a lot 00:38.820 --> 00:40.570 of them which we don't need to worry about. 00:40.830 --> 00:42.400 So we've seen how to do this. 00:42.420 --> 00:44.800 Now we need to figure out a couple of things. 00:44.820 --> 00:47.380 One how do we get the data from the form. 00:47.550 --> 00:54.450 This form here styled so this form user types or email and let's join now. 00:54.480 --> 00:57.490 First of all where do they send that request to. 00:57.510 --> 01:02.370 We need to figure that out and maybe you guessed this we need to define our route for that. 01:02.370 --> 01:06.840 But there's a slight difference in that route to get to in second because there's another problem which 01:06.840 --> 01:09.200 is how does that data from the form get there. 01:09.480 --> 01:13.110 Well what we want to do is use what's known as a post route. 01:13.140 --> 01:14.880 So there are different types of requests. 01:14.880 --> 01:19.780 I briefly touched on this get and post request this is not of course an HTP. 01:19.830 --> 01:24.660 So you kind of just have to take me at my word here that we need to use a post request because it allows 01:24.660 --> 01:31.950 us to send data with the request the form will automatically take the data from here and send it as 01:31.950 --> 01:35.520 a post request to the destination that we tell it to send it to. 01:35.520 --> 01:37.290 So let me show you how we do that. 01:37.290 --> 01:38.940 We've already seen it. 01:38.970 --> 01:41.390 We deleted it honestly from the form. 01:41.400 --> 01:43.680 So there's no suspense here. 01:43.700 --> 01:49.170 We create a form element and the first thing we can do is add in method and method we all set to be 01:49.380 --> 01:52.410 posted in all caps all lowercase it doesn't matter. 01:52.410 --> 01:53.790 You'll see both. 01:54.000 --> 01:59.610 And that is saying that when this form is submitted from the button the last button for Button is the 01:59.610 --> 02:03.530 last thing in a form it will automatically submit the form to when it's submitted. 02:03.930 --> 02:08.970 It's going to be a post request and we'll send it to a route that doesn't exist yet. 02:08.970 --> 02:13.960 So we send that with action equals and then we could send it slash. 02:13.980 --> 02:16.310 But that would just redirect us back here. 02:16.600 --> 02:19.300 Except that needs to be a get request so we'll get to that in a moment. 02:19.500 --> 02:23.790 But we could do slash register or make up a route that doesn't exist. 02:23.790 --> 02:27.660 So right now this form is going to take us to a page that doesn't exist. 02:27.660 --> 02:28.560 And if I try it 02:31.830 --> 02:37.630 massive This is still much bigger than it is in reality it's about the size. 02:37.890 --> 02:40.440 That's harder to read so I'm just increasing the font. 02:40.440 --> 02:47.170 So if I enter something in here law click Join now tells me cannot post to slash register. 02:47.280 --> 02:47.940 Great. 02:47.970 --> 02:51.010 So we need to define a post-draft to register. 02:51.180 --> 02:54.530 And again the reason we're doing posts is it allows us to send the form data. 02:54.600 --> 02:58.890 But what I could also do if I did a request show you what happened. 02:58.890 --> 03:01.770 We already have a get route to find a couple of them. 03:01.770 --> 03:04.380 Let's do a get request to slash joke. 03:04.380 --> 03:09.990 So what that means is that when this form is submitted it's going to send the data to slash joke as 03:09.990 --> 03:11.650 it get which we already have. 03:11.760 --> 03:14.840 That's what this get comes from after it gets last joke. 03:15.090 --> 03:22.900 So if I really start and try again this time of five and to whatever they're in I click Join now. 03:22.920 --> 03:25.680 You'll see it takes me to slash joke. 03:25.680 --> 03:27.540 There's also a question mark here. 03:27.810 --> 03:29.950 So that's something to consider. 03:29.970 --> 03:35.910 What's happening is that our data isn't being sent because we're not giving it a name to be sent under. 03:36.330 --> 03:44.730 So what we do is assign our input here and name and this will be the label for whatever this is right 03:44.730 --> 03:48.650 here which is e-mail so that's the best thing we can put their e-mail. 03:48.660 --> 03:52.610 So when our data is sent off by the form it will be referred to as e-mail. 03:52.630 --> 03:57.210 And there's only one piece of data that we need if we had multiple things in our form we might have 03:57.210 --> 04:00.890 e-mail on first name and last name and they could all have a name. 04:00.900 --> 04:04.880 So now if we do it you don't need to restart the server to do that. 04:05.280 --> 04:12.780 But now if I do lost at gmail dot com Nahit join now notice that my you are it's hard to read but it 04:12.780 --> 04:15.850 says slash joke we sent to get requests. 04:15.850 --> 04:19.330 US joke and then it appends e-mail equals blah. 04:19.580 --> 04:19.980 Percent. 04:19.980 --> 04:23.950 40 is what it's doing for the at sign gmail dot com. 04:24.270 --> 04:29.460 So you can see our form data is making it here to a different request but this is not a poster request 04:29.910 --> 04:32.330 and we want it to be a post request for work. 04:32.400 --> 04:36.800 Really the main reason is that we don't want our data to be appended like this in RL. 04:36.930 --> 04:41.520 We could get away with that the standard way of sending data from a form if you're adding it into a 04:41.520 --> 04:44.010 database is to do it as a post request. 04:44.010 --> 04:47.120 This is known as a query string that's a lot of terminology here. 04:47.190 --> 04:48.090 This doesn't matter. 04:48.120 --> 04:49.910 We don't want it to work this way. 04:49.950 --> 04:54.500 I'm just telling you that it's not a conventional sign of a good practice. 04:54.540 --> 04:56.510 If you're doing like a search form or something. 04:56.550 --> 05:02.190 This makes sense and you may have noticed search forms and search results will often have a query strings 05:02.220 --> 05:03.390 after the route. 05:03.600 --> 05:04.610 We don't want that. 05:04.650 --> 05:12.410 We want to send our data using a post request and not to slash joke but to slash register. 05:12.450 --> 05:17.390 Now the problem is how do we create a route that will listen for that. 05:17.460 --> 05:22.040 Essentially what we're trying to do back to this handy dandy animation is something like this. 05:22.140 --> 05:23.020 Hello server. 05:23.100 --> 05:24.710 I would like to sign up here's my e-mail. 05:24.720 --> 05:27.000 Pass the e-mail to the server. 05:27.000 --> 05:32.410 And then our note app or express app is going to take that e-mail and run an insert query with my s 05:32.420 --> 05:34.620 q will ask who will hopefully says great. 05:34.620 --> 05:38.830 It worked then we get back either something like this. 05:38.850 --> 05:40.230 Thanks for registering page. 05:40.290 --> 05:43.740 Or we just redirect back to the home so we'll decide on that. 05:43.740 --> 05:45.310 So how do we get it to. 05:45.450 --> 05:51.900 How do we get the Express app the right side here and the green to accept this email or even know that 05:51.900 --> 05:54.140 a request is being made to slash register 05:57.270 --> 05:59.190 with this app. 05:59.250 --> 06:01.690 Post this is how we defined post-trib. 06:02.040 --> 06:04.740 Just like a get route except it's after post. 06:04.800 --> 06:06.280 Everything else is the same. 06:06.630 --> 06:14.550 So let's do that now at post slash register which needs to match whatever we put here. 06:14.550 --> 06:20.990 So if this was registration or create user then this needs to be registration or create user. 06:22.440 --> 06:25.140 And our same request and response. 06:25.170 --> 06:29.890 This will only be triggered when a post request is sent to slash register. 06:30.600 --> 06:41.580 So just to prove that let's do a canceled blog post request sent to a cash register just like this. 06:41.970 --> 06:51.140 And now if I restart my server if you go back here if I submit this form I'll make it take up half the 06:51.140 --> 06:51.890 window here. 06:52.040 --> 06:57.300 Watch down here and I go here in a type whatever I want in here and they click Join now. 06:57.800 --> 07:04.940 Notice that we get our post request sent to slash register and if I try and get there another way. 07:04.940 --> 07:07.500 Like probably just going to slash register. 07:07.640 --> 07:09.620 This is sending a get request. 07:09.620 --> 07:14.150 We haven't actually discussed that but when you just go click on a link or you enter or you are out 07:14.540 --> 07:19.430 manually that is sending a get request and that's why it's telling me it can not get slashed register. 07:19.430 --> 07:23.510 So essentially the only way that we're going to be able to in practice so that we'll be able to get 07:23.510 --> 07:28.000 to this route here and trigger this code is through the form. 07:28.340 --> 07:29.110 So one more time. 07:29.120 --> 07:29.920 Put something in here. 07:29.930 --> 07:30.870 Watch down there. 07:31.920 --> 07:35.230 A post request it's being sent every time. 07:35.290 --> 07:40.600 So what we want to do now is be able to extract the data that's being sent. 07:40.600 --> 07:44.470 And for now you have to trust that it's being sent that are formed and it's being sent. 07:44.470 --> 07:47.520 We don't have a way of seeing it in the way that we see it. 07:47.620 --> 07:50.250 Oh boy it's a little bit complicated. 07:50.350 --> 07:52.140 I mean they're walking through the steps here. 07:52.600 --> 07:54.480 This is the annoying set up we have to do. 07:54.730 --> 07:57.400 So we have to install something called body parser. 07:57.490 --> 08:00.530 And I won't waste much time talking about it. 08:00.550 --> 08:05.380 What's happening is that express is a lightweight framework which means that it doesn't come with everything 08:05.380 --> 08:08.290 that you would possibly want preinstalled. 08:08.340 --> 08:12.400 So we have to go and select certain things and body body parts are as one. 08:12.400 --> 08:15.120 What it does is it parses the request body. 08:15.250 --> 08:21.020 So remember that when a request is sent there's all this it's just a giant block of text. 08:21.100 --> 08:27.790 And somewhere in there it says Email is equal to code whatever we typed in here. 08:27.950 --> 08:29.540 But it's in a giant block of text. 08:29.540 --> 08:32.000 It's not it's not javascript or anything. 08:32.000 --> 08:38.080 So the parser will intercept that and turn it into javascript that we can then use and manipulate. 08:38.090 --> 08:45.140 So then what we need to do and I'm just doing this quickly it's just copying and pasting importing body 08:45.170 --> 08:51.080 parser equals required body parser so we can save that make sure a package that Jason has body parts 08:51.080 --> 08:52.700 are in it. 08:52.700 --> 08:57.020 Then finally we tell our app to use it. 08:57.060 --> 09:00.460 So I'm also just going to copy that line and put it next to Epcot set. 09:00.470 --> 09:02.910 We have our configuration lines together. 09:03.560 --> 09:08.170 We're not going to go into detail on this line but this is just requiring body parts or doesn't do anything. 09:08.210 --> 09:14.230 We have to tell Express which is app or write app is from express that we're using body parts. 09:14.540 --> 09:23.490 And this now allows us to extract information from post requests and here's some magic line request 09:23.580 --> 09:25.540 dot body dot email. 09:25.730 --> 09:32.930 So what this will now store in the request body in that post route under e-mail will be the email address 09:32.930 --> 09:34.940 coming from the form. 09:34.940 --> 09:40.130 So let me show you that if we go to our post-draft for register rather than consulate log post request 09:40.130 --> 09:46.560 sent to slash user will also add plus request up by email. 09:46.590 --> 09:51.150 Email is that request up body that e-mail. 09:51.460 --> 09:52.180 OK. 09:52.550 --> 09:58.640 So we definitely need to make sure that we have name equals email and then we should be good to go assuming 09:58.640 --> 09:59.700 our install went OK. 09:59.740 --> 10:01.190 That started the server again. 10:01.610 --> 10:03.070 It looks good. 10:03.650 --> 10:05.090 Let's go over here. 10:05.090 --> 10:06.770 Just going to refresh this page. 10:06.950 --> 10:10.480 Now I'll type C at gmail dot com. 10:10.520 --> 10:10.980 Sure. 10:10.980 --> 10:13.390 Now and what do you know. 10:13.400 --> 10:17.900 Post requests sent to slash registered e-mail is see at gmail dot com. 10:18.090 --> 10:25.060 So whatever is typed into that form is being stored in request up body as email. 10:25.680 --> 10:28.600 So body pursers doing the heavy lifting for us here. 10:28.710 --> 10:31.160 We had to do a couple of annoying lines. 10:31.170 --> 10:34.080 But let me show you what body looks like. 10:34.080 --> 10:36.830 So request up body on its own. 10:37.110 --> 10:41.280 So I'm going to comment that line out were not canceled out logging anything. 10:41.280 --> 10:50.230 Now if we go back to the form refresh and I type I don't know h at gmail dot com and click Join now. 10:50.490 --> 10:53.160 This is what our request body looks like. 10:53.160 --> 10:54.960 Email is HHG mailbag. 10:54.960 --> 11:02.130 Com Again e-mail is coming from here but if I get rid of body parts Sure let me show you what life is 11:02.130 --> 11:03.620 like without it. 11:03.630 --> 11:06.260 And I do the same exact thing. 11:07.280 --> 11:09.050 H a teammate dot com. 11:09.180 --> 11:11.310 Now there is no request of body. 11:11.340 --> 11:12.700 It's undefined. 11:13.200 --> 11:14.370 I did everything else the same. 11:14.400 --> 11:21.510 So just this single line telling her to use body purser is what allows us to access request our body 11:21.690 --> 11:26.550 so the information is still being sent to express express. 11:26.550 --> 11:28.900 It's just not doing anything with it. 11:28.920 --> 11:34.400 Request of body is what we need along with this body part of the line to start using it. 11:34.620 --> 11:38.190 So it's kind of confusing but that's the whole ethos of. 11:38.220 --> 11:42.550 EXPRESS Is that you add the tools you need as you need them. 11:42.600 --> 11:47.700 So rather than giving you everything at once and you might only use one out of 20 things it gives you 11:47.820 --> 11:49.260 one thing two things. 11:49.260 --> 11:51.840 And then you go and grab the other things you need. 11:51.900 --> 11:56.230 So if you need post requests you need a request a body to be filled in with data. 11:56.370 --> 11:57.730 Then we need a body person. 11:58.080 --> 11:58.740 OK. 11:59.010 --> 12:04.770 So then all we really need to do now if we're isolating request body email that's the e-mail that's 12:04.770 --> 12:05.600 being sent. 12:05.910 --> 12:07.170 Let's save it to a variable 12:10.520 --> 12:15.090 now we just need to insert that make a new user which we've already seen how to do. 12:15.290 --> 12:20.510 And I won't make as you know type it from scratch but we're going to be doing connection. 12:20.630 --> 12:24.220 Queried and we've already seen how to do that query. 12:24.230 --> 12:30.710 It's going to be an insert into if we go back let's just copy this code here this is what we've done 12:30.710 --> 12:38.880 in the past where we inserted a single user go to app Julius. 12:38.990 --> 12:41.510 So I have it commented out uncommented. 12:41.810 --> 12:43.530 There's a couple of things we're doing. 12:43.580 --> 12:49.550 The first I made a variable called person with an e-mail and created app but we don't need that created 12:49.550 --> 12:52.770 out anymore because this is for F.A.. 12:52.910 --> 12:54.360 We actually have a real created. 12:54.460 --> 13:00.090 And then for requests up body to email you can just replace that. 13:00.110 --> 13:02.570 OK so we can get rid of that variable too. 13:02.690 --> 13:05.370 So this is just preparing the data to be inserted. 13:05.420 --> 13:11.050 We'll have a person object that has an e-mail request by email and then we need to do here we can not 13:11.060 --> 13:19.680 we don't need to store in a variable is just a connection that query insert into users set to pass in 13:19.680 --> 13:20.630 person. 13:21.330 --> 13:22.980 And then we have our callback function. 13:22.980 --> 13:25.300 So this is a review we've already seen how to insert. 13:25.440 --> 13:28.260 So I want to spend a ton of time on it rather. 13:28.380 --> 13:32.650 Well we can start by just constantly logging the result which will be a lot of stuff hopefully. 13:32.880 --> 13:34.170 Let's see what happens now. 13:35.250 --> 13:36.900 We have body parts are working again. 13:37.020 --> 13:38.400 OK good. 13:38.460 --> 13:45.940 Now if I go over here this time it will insert a real user so let's do more serious e-mail address. 13:45.940 --> 13:48.210 Well I guess that doesn't matter about Miranda. 13:48.270 --> 13:54.700 Let's not do all caps or end five for at hotmail dot com. 13:55.350 --> 13:59.830 And there you go join now and look what we get back. 13:59.880 --> 14:00.880 Affected rose 1. 14:00.920 --> 14:02.780 It says OK pack it. 14:02.880 --> 14:04.290 All this other stuff. 14:04.460 --> 14:12.280 And if we went in to our might as well if we wanted to do a select star well it's going to take a bit. 14:12.510 --> 14:15.610 Let's do what I have to type it ourselves. 14:15.620 --> 14:26.480 Like start from users quarter by created at limit 1. 14:26.630 --> 14:31.810 We don't have a users table in all caps so boy we get the wrong user. 14:31.820 --> 14:33.050 Scared me for a moment. 14:33.080 --> 14:39.640 We need to also change the order at order by created at to be descending. 14:41.030 --> 14:44.510 And here we go Miranda 54 at hotmail so it worked. 14:44.510 --> 14:47.950 Long story short it worked and we're pretty much done. 14:47.960 --> 14:53.190 The only other thing we have to decide is OK are web apps just kind of hanging here. 14:53.210 --> 14:54.230 You can see that. 14:54.380 --> 14:55.580 What do we do next. 14:55.640 --> 15:04.780 And we could either do something like a red dot send thanks for joining our waitlists. 15:04.790 --> 15:06.940 Let's say we can start with that. 15:07.580 --> 15:13.840 And if we restart the server do it again have someone try and sign up the new e-mail. 15:13.850 --> 15:22.650 Let's say Jane Doe at gmail dot com click and now now we get. 15:22.650 --> 15:23.910 Thanks for joining our waitlist. 15:24.030 --> 15:26.960 So it's totally up to you how you want to structure this part. 15:27.000 --> 15:32.480 What I'm going to do is just have it redirect back to the same page to the original page here and we'll 15:32.490 --> 15:37.360 be able to see 503 or 504 it's really up to you. 15:37.530 --> 15:42.500 This is how you you wouldn't use redstart send you could do a render and you could make a thank you 15:42.510 --> 15:44.230 page if you wanted to. 15:44.460 --> 15:50.530 But what I'm going to do is show you another line which is just redstart redirect. 15:50.670 --> 15:54.540 So Reade's being response appear redstart redirect to slash. 15:54.580 --> 15:56.530 Now just take us back to the home page. 15:56.580 --> 16:04.830 So effectively what's happening right restart time is we're on the home page 504 is how many we just 16:04.830 --> 16:06.060 got from the database. 16:06.060 --> 16:10.170 I entered a new one Dave at Dave dot com. 16:10.170 --> 16:14.470 I clicked your and now it's going to hit this post route slash register. 16:14.550 --> 16:20.450 We're extracting that e-mail from that form data in the body and then we're inserting it as a new person 16:20.460 --> 16:22.560 in a new user in our database. 16:22.560 --> 16:29.420 When that finishes we're redirecting back to slash which starts this whole process over. 16:29.730 --> 16:34.140 It's going to then select all the count of all users. 16:34.140 --> 16:40.310 Then it's going to was my cat and it's going to render our home page with that count. 16:40.320 --> 16:43.470 So to the user it will just look like this page refreshes. 16:43.500 --> 16:45.530 And this goes from five a four to five or five. 16:45.610 --> 16:47.880 But behind the scenes a lot more is happening. 16:48.430 --> 16:49.510 And there we go. 16:50.020 --> 16:50.690 OK. 16:50.820 --> 16:51.810 So that's awesome. 16:51.810 --> 16:53.070 Hopefully you think that's cool. 16:53.070 --> 17:00.270 All we have left is to style it if you would like a little bit more detail on the in the insert part. 17:00.810 --> 17:02.800 And I can go over that a bit more if you'd like. 17:02.800 --> 17:03.700 And what's happening here. 17:03.720 --> 17:06.510 But if you feel like you've got a grasp on it you want to move on to styling. 17:06.510 --> 17:07.410 Go ahead. 17:07.880 --> 17:08.280 OK. 17:08.400 --> 17:14.250 So just to reiterate we could have also done a little bit more manually if we wanted to we could have 17:14.250 --> 17:16.950 written a query like this. 17:17.470 --> 17:26.220 If I did var query and I could have done insert into user's e-mail so this would be more familiar. 17:26.220 --> 17:27.110 Values. 17:27.360 --> 17:39.820 And then I would do print the C plus request body data email plus close the closing parentheses like 17:39.820 --> 17:40.540 that. 17:40.810 --> 17:42.500 And that could be our query. 17:42.940 --> 17:47.050 So this would turn into let's say request. 17:47.190 --> 17:47.660 Email. 17:47.680 --> 17:54.930 Dave had Dave dotcom it would turn into Dave at Dave dot com like that. 17:55.450 --> 18:03.440 So we could eat we could also do this query this way and then we would need to do is pass. 18:03.630 --> 18:06.170 Q Right here if that makes sense. 18:06.170 --> 18:07.570 So that's another way of doing it. 18:07.820 --> 18:14.080 But this is kind of the standard way of doing it with the my s q library at the mass Q package that 18:14.090 --> 18:14.850 we've been using. 18:14.960 --> 18:16.470 So I'm going to get rid of that. 18:16.760 --> 18:20.870 But either way maybe this syntax is more unfamiliar. 18:20.870 --> 18:26.330 If you don't know javascript put it this is what we already saw as as to how to insert a single piece 18:26.330 --> 18:31.730 of information a single row into a table and it's working great.