Okay.
So picking up where we left off, if you remember in the last video where we got the HTML up and running
the Edge's file, I said Ignore the form.
For now, we're coming back to that.
Well, now it's a video where we're going to get that form working and it involves a couple of new concepts.
So hang in there.
The MySQL part is the same.
We've already seen how to insert.
If we go back to this early, where is it?
Here we go.
We've seen how to insert the single file.
We inserted this single rusty, 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?
Unstyled So this form a user types or email and hits 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 a route for that.
But there's a slight difference in that route, which I'll get to in a 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 in post request.
This is not a course on HTTP, so you'll kind of just have to take me out 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 opposed to 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 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 will set to be post.
It can be all caps, all lowercase, doesn't matter.
You'll see both.
And that is saying that when this form is submitted from this button, the last button, or if a button
is the last thing in a form, it will automatically submit the form.
So 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 can 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.
We'll 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.
Oh, this is still much bigger than it is.
In reality, it's about this size.
But that's harder to read.
So I'm just increasing the font.
So if I enter something in here and click join.
Now it tells me cannot post a slash register.
Great.
So we need to define a post root to slash register.
And again, the reason we're doing post is it allows us to send the form data.
But what I could also do if I did a get request, I'll show you what happens.
We already have a get root defined 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
a get, which we already have.
That's what this get comes from get slash joke.
So if I restart and try it again this time, if I enter whatever and 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 a name, and this will be the label for whatever this is right
here, which is email.
So that's the best thing we could put their email.
So when our data is sent off by the form, it will be referred to as email.
And there's only one piece of data that we need.
If we had multiple things in our form, we might have email and first name and last name and they could
all have a name.
So now if we do, it actually don't need to restart the server to do that.
But now if I do blah at gmail.com and I hit join, now notice that my URL is hard to read but it says
slash joke.
We sent a get request slash joke and then it appends email equals blah percent.
40 is what it's doing for the at sign gmail.com.
So you can see our form data is making it here to a different request.
But this is not a post request and we want it to be a post request for really.
The main reason is that we don't want our data just to be appended like this in the URL.
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.
There'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 it's not 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 query strings after the root.
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 root 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 email, pass the email to the server and then our node app, our express app is going to take
that email and run an insert query with my SQL.
My SQL 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 in the green to accept this
email or to even know that a request is being made to slash register?
With this Epcot post.
This is how we define a post drought.
Just like a jet route.
Except it's an outpost.
Everything else is the same.
So let's do that now.
App dot post slash register which will 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 requests in response.
This will only be triggered when a post request is sent to register.
So just to prove that, let's do a console.log post request sent to slash 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 and I type whatever I want in here and I click join now.
Notice that we get our post request sent to slash register.
And if I try and get there another way, like by 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 a URL manually that is sending a get request and that's
why it's telling me I cannot get slash register.
So essentially the only way that we're going to be able to in practice, that we'll be able to get to
this root here and trigger this code is through the form.
So one more time, put something in here.
Watch down there.
A post request is 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 our form data is being sent.
We don't have a way of seeing it and the way that we see it.
Oh, boy.
It's a little bit complicated.
I'm going to walk you through the steps here.
This is the annoying setup 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.
Pre-installed So we have to go and select certain things and body body parser is 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 whatever we typed in here, but it's in a giant block of text.
It's not it's not JavaScript or anything.
So body 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 copy and pasting importing
body parser equals required body parser so we can save that.
Make sure our package dot JSON has body parser in it.
Then finally we need to tell our app to use it.
So I'm also just going to copy that line and put it next to app set.
So we have our configuration lines together.
We're not going to go into detail in this line, but this is just requiring body parser doesn't do anything.
We have to tell EXPRESS which is app write app is from Express that we're using body parser and this
now allows us to extract information from post requests.
And here's the magic line request body email.
So what this will now store in the request body in that post route under email will be the email address
coming from the form.
So let me show you that if we go to our post route register rather than constant log post request sent
to slash user, we'll also add plus request dot body email.
Email is about that request, dot body email.
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.
Let's start the server again.
It looks good.
Let's go over here.
Just going to refresh this page.
Now I'll type C at gmail.com.
Join now.
And what do you know?
Post request sent to slash register email is c at gmail.com, so whatever is typed into that form is
being stored in request body as email.
So body parser is doing the heavy lifting for us here.
We had to do kind of a couple of annoying lines, but let me show you what body looks like.
So request body on its own.
So I'm going to comment that line out.
We're not constantly logging anything.
Now if we go back to the form refresh and I type, I don't know H at gmail.com and I click join.
Now this is what our request body looks like.
Email is h gmail.com again.
Email is coming from here, but if I get rid of body parser, let me show you what life is like without
it.
And I do the same exact thing h at gmail.com.
Now there is no request body.
It's undefined.
I did everything else the same.
So just the single line telling your app to use body parser is what allows us to access request body.
So the information is still being sent to express, but express is just not doing anything with it.
Request that body is what we need along with this body partial one 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 body to be filled in with data, then we need body
parser.
Okay.
So then all we really need to do now if we're isolating request to body email, that's the email 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 us type it from scratch, but
hint, hint, we're going to be doing connection query and we've already seen how to do the 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 JJ's.
So I have it commented out.
I'll uncomment it.
There's a couple of things we're doing.
The first I made a variable called person with an email and created that.
But we don't need that created at anymore because this is for faker.
We actually have a real created at and then for request up body that email can just replace that.
Okay.
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.
It has an email request by email.
And then all we need to do here, we can we don't need to store it in a variable.
It's just connection query.
Insert into users set.
We passed in person and then we have our callback function.
So this is review.
We've already seen how to insert.
So I want to spend a ton of time on it and 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.
Okay, good.
Now, if I go over here this time, it will insert a real user.
So let's do a more serious email address.
Well, I guess that doesn't matter.
How about Miranda?
Let's not do all caps.
Miranda.
Five four at Hotmail.
Miranda.
There we go.
Join now and look what we get back.
Affected rows one.
It's this oak packet.
All this other stuff.
And if we went into our SQL, if we wanted to do a select star, well, it's going to take a bit.
Let's do we'll have to type it ourselves.
Select star from users quarter by created at limit one.
We don't have a user's 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 that 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, okay, our Web apps is just kind of hanging here.
You can see that.
What do we do next?
And we could either do something like a rez send.
Thanks for joining our waitlist.
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 email.
Let's say Jane Doe at gmail.com.
Click join 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 red state send, but you could do a red dot 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 red dot redirect.
So red is being response up here, red dot redirect to slash.
And now I'll just take us back to the home page.
So effectively what's happening.
Right restart one more time is we're on the home page.
504 is how many we just got from the database.
I entered a new one Dave et Dave dot com I click join now it's going to hit this post route slash register.
We're extracting the email 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 There's my cat, then 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 504 to 505.
But behind the scenes, a lot more is happening.
And there we go.
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 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.
So just to reiterate, we could have also done it 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
email.
So this should be more familiar values.
And then I would do parentheses plus.
Request that body.
Email plus clothing, closing parentheses like that.
And that could be our query.
So this would turn into, let's say, request that body.
That email is Dave at Dave.
It would turn into Dave at Dave like that.
So we could we could also do this query this way.
And then all 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 MySQL library or the MySQL package that we've
been using.
So I'm going to get rid of that.
But either way, maybe the syntax is more unfamiliar if you don't know JavaScript.
But this is what we already saw as to how to insert a single piece of information, a single row into
a table, and it's working great.