OK so picking up where we left off for you remember in the last video where we got the age team up and
running the Ejay Yes file I said ignore the form for now we're coming back to that.
Well now as a video where we're going to get that form working and it involves a couple of new concepts.
So hang in there.
The minus Cuil part is the same.
We've already seen how to insert.
If we go back to this early Where's that.
Here we go we've seen how to insert this single file you know we inserted this single rescue of the
dog.
We also saw how to do it with this object syntax and then we saw how to do a bulk insert with a lot
of them which we don't need to worry about.
So we've seen how to do this.
Now we need to figure out a couple of things.
One how do we get the data from the form.
This form here styled so this form user types or email and let's join now.
First of all where do they send that request to.
We need to figure that out and maybe you guessed this we need to define our route for that.
But there's a slight difference in that route to get to in second because there's another problem which
is how does that data from the form get there.
Well what we want to do is use what's known as a post route.
So there are different types of requests.
I briefly touched on this get and post request this is not of course an HTP.
So you kind of just have to take me at my word here that we need to use a post request because it allows
us to send data with the request the form will automatically take the data from here and send it as
a post request to the destination that we tell it to send it to.
So let me show you how we do that.
We've already seen it.
We deleted it honestly from the form.
So there's no suspense here.
We create a form element and the first thing we can do is add in method and method we all set to be
posted in all caps all lowercase it doesn't matter.
You'll see both.
And that is saying that when this form is submitted from the button the last button for Button is the
last thing in a form it will automatically submit the form to when it's submitted.
It's going to be a post request and we'll send it to a route that doesn't exist yet.
So we send that with action equals and then we could send it slash.
But that would just redirect us back here.
Except that needs to be a get request so we'll get to that in a moment.
But we could do slash register or make up a route that doesn't exist.
So right now this form is going to take us to a page that doesn't exist.
And if I try it
massive This is still much bigger than it is in reality it's about the size.
That's harder to read so I'm just increasing the font.
So if I enter something in here law click Join now tells me cannot post to slash register.
Great.
So we need to define a post-draft to register.
And again the reason we're doing posts is it allows us to send the form data.
But what I could also do if I did a request show you what happened.
We already have a get route to find a couple of them.
Let's do a get request to slash joke.
So what that means is that when this form is submitted it's going to send the data to slash joke as
it get which we already have.
That's what this get comes from after it gets last joke.
So if I really start and try again this time of five and to whatever they're in I click Join now.
You'll see it takes me to slash joke.
There's also a question mark here.
So that's something to consider.
What's happening is that our data isn't being sent because we're not giving it a name to be sent under.
So what we do is assign our input here and name and this will be the label for whatever this is right
here which is e-mail so that's the best thing we can put their e-mail.
So when our data is sent off by the form it will be referred to as e-mail.
And there's only one piece of data that we need if we had multiple things in our form we might have
e-mail on first name and last name and they could all have a name.
So now if we do it you don't need to restart the server to do that.
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
says slash joke we sent to get requests.
US joke and then it appends e-mail equals blah.
Percent.
40 is what it's doing for the at sign gmail dot com.
So you can see our form data is making it here to a different request but this is not a poster request
and we want it to be a post request for work.
Really the main reason is that we don't want our data to be appended like this in RL.
We could get away with that the standard way of sending data from a form if you're adding it into a
database is to do it as a post request.
This is known as a query string that's a lot of terminology here.
This doesn't matter.
We don't want it to work this way.
I'm just telling you that it's not a conventional sign of a good practice.
If you're doing like a search form or something.
This makes sense and you may have noticed search forms and search results will often have a query strings
after the route.
We don't want that.
We want to send our data using a post request and not to slash joke but to slash register.
Now the problem is how do we create a route that will listen for that.
Essentially what we're trying to do back to this handy dandy animation is something like this.
Hello server.
I would like to sign up here's my e-mail.
Pass the e-mail to the server.
And then our note app or express app is going to take that e-mail and run an insert query with my s
q will ask who will hopefully says great.
It worked then we get back either something like this.
Thanks for registering page.
Or we just redirect back to the home so we'll decide on that.
So how do we get it to.
How do we get the Express app the right side here and the green to accept this email or even know that
a request is being made to slash register
with this app.
Post this is how we defined post-trib.
Just like a get route except it's after post.
Everything else is the same.
So let's do that now at post slash register which needs to match whatever we put here.
So if this was registration or create user then this needs to be registration or create user.
And our same request and response.
This will only be triggered when a post request is sent to slash register.
So just to prove that let's do a canceled blog post request sent to a cash register just like this.
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
window here.
Watch down here and I go here in a type whatever I want in here and they click Join now.
Notice that we get our post request sent to slash register and if I try and get there another way.
Like probably just going to slash register.
This is sending a get request.
We haven't actually discussed that but when you just go click on a link or you enter or you are out
manually that is sending a get request and that's why it's telling me it can not get slashed register.
So essentially the only way that we're going to be able to in practice so that we'll be able to get
to this route here and trigger this code is through the form.
So one more time.
Put something in here.
Watch down there.
A post request it's being sent every time.
So what we want to do now is be able to extract the data that's being sent.
And for now you have to trust that it's being sent that are formed and it's being sent.
We don't have a way of seeing it in the way that we see it.
Oh boy it's a little bit complicated.
I mean they're walking through the steps here.
This is the annoying set up we have to do.
So we have to install something called body parser.
And I won't waste much time talking about it.
What's happening is that express is a lightweight framework which means that it doesn't come with everything
that you would possibly want preinstalled.
So we have to go and select certain things and body body parts are as one.
What it does is it parses the request body.
So remember that when a request is sent there's all this it's just a giant block of text.
And somewhere in there it says Email is equal to code whatever we typed in here.
But it's in a giant block of text.
It's not it's not javascript or anything.
So the parser will intercept that and turn it into javascript that we can then use and manipulate.
So then what we need to do and I'm just doing this quickly it's just copying and pasting importing body
parser equals required body parser so we can save that make sure a package that Jason has body parts
are in it.
Then finally we tell our app to use it.
So I'm also just going to copy that line and put it next to Epcot set.
We have our configuration lines together.
We're not going to go into detail on this line but this is just requiring body parts or doesn't do anything.
We have to tell Express which is app or write app is from express that we're using body parts.
And this now allows us to extract information from post requests and here's some magic line request
dot body dot email.
So what this will now store in the request body in that post route under e-mail will be the email address
coming from the form.
So let me show you that if we go to our post-draft for register rather than consulate log post request
sent to slash user will also add plus request up by email.
Email is that request up body that e-mail.
OK.
So we definitely need to make sure that we have name equals email and then we should be good to go assuming
our install went OK.
That started the server again.
It looks good.
Let's go over here.
Just going to refresh this page.
Now I'll type C at gmail dot com.
Sure.
Now and what do you know.
Post requests sent to slash registered e-mail is see at gmail dot com.
So whatever is typed into that form is being stored in request up body as email.
So body pursers doing the heavy lifting for us here.
We had to do a couple of annoying lines.
But let me show you what body looks like.
So request up body on its own.
So I'm going to comment that line out were not canceled out logging anything.
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.
This is what our request body looks like.
Email is HHG mailbag.
Com Again e-mail is coming from here but if I get rid of body parts Sure let me show you what life is
like without it.
And I do the same exact thing.
H a teammate dot com.
Now there is no request of body.
It's undefined.
I did everything else the same.
So just this single line telling her to use body purser is what allows us to access request our body
so the information is still being sent to express express.
It's just not doing anything with it.
Request of body is what we need along with this body part of the line to start using it.
So it's kind of confusing but that's the whole ethos of.
EXPRESS Is that you add the tools you need as you need them.
So rather than giving you everything at once and you might only use one out of 20 things it gives you
one thing two things.
And then you go and grab the other things you need.
So if you need post requests you need a request a body to be filled in with data.
Then we need a body person.
OK.
So then all we really need to do now if we're isolating request body email that's the e-mail that's
being sent.
Let's save it to a variable
now we just need to insert that make a new user which we've already seen how to do.
And I won't make as you know type it from scratch but we're going to be doing connection.
Queried and we've already seen how to do that query.
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
in the past where we inserted a single user go to app Julius.
So I have it commented out uncommented.
There's a couple of things we're doing.
The first I made a variable called person with an e-mail and created app but we don't need that created
out anymore because this is for F.A..
We actually have a real created.
And then for requests up body to email you can just replace that.
OK so we can get rid of that variable too.
So this is just preparing the data to be inserted.
We'll have a person object that has an e-mail request by email and then we need to do here we can not
we don't need to store in a variable is just a connection that query insert into users set to pass in
person.
And then we have our callback function.
So this is a review we've already seen how to insert.
So I want to spend a ton of time on it rather.
Well we can start by just constantly logging the result which will be a lot of stuff hopefully.
Let's see what happens now.
We have body parts are working again.
OK good.
Now if I go over here this time it will insert a real user so let's do more serious e-mail address.
Well I guess that doesn't matter about Miranda.
Let's not do all caps or end five for at hotmail dot com.
And there you go join now and look what we get back.
Affected rose 1.
It says OK pack it.
All this other stuff.
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.
Let's do what I have to type it ourselves.
Like start from users quarter by created at limit 1.
We don't have a users table in all caps so boy we get the wrong user.
Scared me for a moment.
We need to also change the order at order by created at to be descending.
And here we go Miranda 54 at hotmail so it worked.
Long story short it worked and we're pretty much done.
The only other thing we have to decide is OK are web apps just kind of hanging here.
You can see that.
What do we do next.
And we could either do something like a red dot send thanks for joining our waitlists.
Let's say we can start with that.
And if we restart the server do it again have someone try and sign up the new e-mail.
Let's say Jane Doe at gmail dot com click and now now we get.
Thanks for joining our waitlist.
So it's totally up to you how you want to structure this part.
What I'm going to do is just have it redirect back to the same page to the original page here and we'll
be able to see 503 or 504 it's really up to you.
This is how you you wouldn't use redstart send you could do a render and you could make a thank you
page if you wanted to.
But what I'm going to do is show you another line which is just redstart redirect.
So Reade's being response appear redstart redirect to slash.
Now just take us back to the home page.
So effectively what's happening right restart time is we're on the home page 504 is how many we just
got from the database.
I entered a new one Dave at Dave dot com.
I clicked your and now it's going to hit this post route slash register.
We're extracting that e-mail from that form data in the body and then we're inserting it as a new person
in a new user in our database.
When that finishes we're redirecting back to slash which starts this whole process over.
It's going to then select all the count of all users.
Then it's going to was my cat and it's going to render our home page with that count.
So to the user it will just look like this page refreshes.
And this goes from five a four to five or five.
But behind the scenes a lot more is happening.
And there we go.
OK.
So that's awesome.
Hopefully you think that's cool.
All we have left is to style it if you would like a little bit more detail on the in the insert part.
And I can go over that a bit more if you'd like.
And what's happening here.
But if you feel like you've got a grasp on it you want to move on to styling.
Go ahead.
OK.
So just to reiterate we could have also done a little bit more manually if we wanted to we could have
written a query like this.
If I did var query and I could have done insert into user's e-mail so this would be more familiar.
Values.
And then I would do print the C plus request body data email plus close the closing parentheses like
that.
And that could be our query.
So this would turn into let's say request.
Email.
Dave had Dave dotcom it would turn into Dave at Dave dot com like that.
So we could eat we could also do this query this way and then we would need to do is pass.
Q Right here if that makes sense.
So that's another way of doing it.
But this is kind of the standard way of doing it with the my s q library at the mass Q package that
we've been using.
So I'm going to get rid of that.
But either way maybe this syntax is more unfamiliar.
If you don't know javascript put it this is what we already saw as as to how to insert a single piece
of information a single row into a table and it's working great.