Accepting Form Data
In this lesson, we'll take a look at how we can create a register form and accept data from that form within our route handler.
- Author
- Tom Gobich
- Published
- Apr 05
- Duration
- 12m 15s
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
Transcript
Accepting Form Data
-
(upbeat music)
-
Okay, so before we actually start digging
-
into authentication,
-
we're gonna need to know how forms work.
-
So let's start by creating a signup form
-
and then we'll take it from there.
-
So first we're gonna need a controller.
-
So let's do node is make controller.
-
As your application gets older and becomes more mature,
-
the authentication flow can get rather complex.
-
So we're gonna create one controller per action
-
bound to authentication.
-
So we're gonna do a register controller,
-
login controller and a logout controller
-
for that complete flow.
-
For right now though,
-
we'll just start with our register controller
-
and let's put all of these controllers
-
specifically for authentication
-
inside of a folder called auth.
-
So if we just do auth slash and then the controller name,
-
the make controller command will create a folder called auth
-
and then the actual controller file
-
for whatever we provide on the right hand side of the slash.
-
So we could do register.
-
We wanna keep register singular.
-
So we do hyphen S there to tell the make controller command
-
that we intend for register to be singular.
-
Okay, so let's run that.
-
Cool, so now we have our new register controller
-
inside of our auth folder,
-
inside of our controllers and app directory.
-
So let's dive into that.
-
Let's do auth register controller and there it is.
-
Let's get our HTTP context uncommented.
-
We'll do async and let's do show
-
because this will be in charge of showing the register form.
-
View HTTP context, return, view, render pages.
-
We'll put this inside of an auth folder,
-
just the same as our controllers
-
and we'll call the file register.
-
All right, let's go create that view real quick.
-
So views, pages, right click that,
-
new file, create a folder called auth
-
and then inside of the auth folder,
-
create a file called register.edge.
-
We'll have our layout, go ahead and end that as well.
-
Let's go ahead and take our movie card
-
and just kind of generalize it.
-
So let's copy everything that we have inside of here,
-
right click our components, new file
-
and we'll create a file called card.edge there.
-
Paste those contents in
-
and now we just wanna get rid of everything content based.
-
We'll keep the padding for div
-
and then for the picture here, we can make that optional.
-
So let's do @if slots.picture and if,
-
go ahead and cut that out, await slots.picture
-
and render that out as an optional slot
-
and then for the actual contents,
-
we'll do await slots.main
-
so that we can put whatever we want inside of the card.
-
Okay, give that a save.
-
We should be able to jump into our movie card component now
-
and get rid of a good portion of the boilerplate here.
-
So we can go ahead and get rid of the class
-
and instead of our div, we can do @ard.
-
We're gonna want to spread in our props
-
except for the movie and we'll just let that cascade through
-
and get rid of our div there.
-
Then we'll wanna do @slot.picture
-
around our actual picture and in that slot, okay.
-
And then we can get rid of the padding for
-
and everything else just becomes our card content.
-
Get rid of these two divs and our card component
-
and lastly fix our indenting.
-
There we go, give that a save.
-
Let's make sure that worked okay.
-
Npm run div, jump into our browser and cool.
-
Our cards still all look the exact same, so we're A-okay.
-
There, jump back into our text editor
-
and let's go back to our register page.
-
Okay, so let's apply that card.
-
We'll add a class to it and we'll just do max width,
-
probably MD, I think, just so that it doesn't attempt
-
to take up the entire page and end that card.
-
So we're gonna need a form and let's go take a look
-
at our user model here and remind ourselves
-
what all we're dealing with.
-
So we have a full name, avatar URL we won't worry about
-
during registration, email and password.
-
Okay, jump back into our register page.
-
So we'll do a label, class flex, flex call
-
and we'll do a span class text, extra small,
-
font bold and call that full name.
-
And then we'll wanna do an input where the type is text
-
and the name is the same as the model's column name.
-
So that would be full name there.
-
The reason why we specifically wanna name it that
-
is because whenever we submit our form,
-
this is the name we'll be able to access it by
-
on our server side and naming it the same name
-
that we have inside of our column just simplifies
-
actually creating our user record.
-
Okay, let's give that a copy and a paste two times
-
because we're also going to need our email and a password.
-
So the type here will be email and the name
-
as we have it defined on our column is email.
-
So we'll have that as email there as well.
-
And then this one is password with a type password.
-
All right, then we need a submission button
-
so that we can actually submit our form.
-
So at button type submit at end
-
and we'll just put the text as register.
-
Let's also give our labels a little bit of spacing
-
in between one another.
-
So we'll do class Lex, Lex call gap of four.
-
Then in order to actually see this page,
-
we need to register it up to a route.
-
So let's do command P to open up our file search
-
and type in routes and hit enter there
-
to jump into our routes file.
-
Okay, and then down here, let's do router dot
-
and let's define a route group.
-
We'll provide a callback function into this
-
and any routes that we define inside
-
of this actual groups callback method
-
will get applied to anything
-
that we specify specifically for the group.
-
So for example, we can prefix our group with slash auth
-
and now any routes that we define inside of this callback
-
will actually start with slash auth.
-
Do the same thing with a name as well.
-
So we can do as auth there.
-
Okay, so let's do router dot get slash register.
-
We'll have our register controller,
-
hit tab to auto import that and we have our show method.
-
We'll name this as register show.
-
All right, so if we scroll down a little bit here,
-
hit save so that that formats.
-
What we've just done is defined a route
-
at slash auth slash register
-
and the name is now auth dot register dot show.
-
Thanks to this group, we'll be able to apply these
-
to all of the routes, simplifying the internal definition
-
for all of our authentication paths.
-
So with that defined,
-
we should be able to jump into our browser,
-
head into URL bar and go to auth slash register,
-
hit enter and there we go.
-
We see our card, our inputs are there,
-
they just don't have any styling, but they are there
-
and then we have our register button.
-
Let's get our inputs where we can see them
-
and show up a little bit of that styling.
-
So let's jump back to our register edge page.
-
On our form, we'll do a margin top of four.
-
Outside of our card, we'll do a div class flex justify
-
center so that it's centered within the page.
-
Go ahead and collapse our form down
-
and end our div after our card ends
-
and give everything there an indent.
-
Lastly, on our inputs, I think maybe we just do this
-
inside of the actual CSS file.
-
So we'll jump inside of our app dot CSS,
-
input not type equals radio and not type equals checkbox.
-
So if we have an input that's not a radio or a checkbox,
-
we'll go ahead and just apply, order, order,
-
slate 300, rounded, EX3, PY 1.5,
-
and then if it's focused, we'll do border.
-
Oh, we haven't picked a brand color yet.
-
Let's do, I guess indigo, maybe 500
-
and we'll add a small duration, 300,
-
so that it fades from our slate to our indigo.
-
Okay, give that a save.
-
If we jump back into our browser now,
-
all right, that's a little bit better.
-
At least we can see our inputs now.
-
I put the margin top on our form instead of the card.
-
So that's why the card's still flush up
-
against the border there.
-
So we'll move that margin top up to our card.
-
There we go, okay.
-
So now we need an actual handler for this form
-
whenever we click on register.
-
Right now, it's just gonna submit us back
-
to /auth register with the fields applied
-
as a query string.
-
Since we haven't specified anything specifically
-
for the form to do, so let's jump back into here.
-
We're gonna need an action for our form
-
and we'll also wanna specify the method as post.
-
Okay, let's jump back into our routes
-
and let's define it on the route.
-
So we'll do router.post this time
-
because we wanna handle the post submission
-
for our form, /register, register, controller,
-
and we'll call this store, as register store.
-
Give that a save.
-
Now we wanna jump into our register controller,
-
async, store.
-
We're gonna want our request and response
-
so that we can handle the request
-
and send an applicable response, HTTP context.
-
So when we submit our form,
-
we're gonna want to create a user
-
with the details that are provided.
-
And then once we create the user,
-
we're gonna want to log them in.
-
And then once we log them in,
-
we wanna send them off back to our application.
-
So at the end of the day,
-
our end task is to send them back to the homepage.
-
So we'll start with the ending task.
-
So let's return response
-
and we'll want to redirect them
-
to the route we've named home.
-
Then we need to grab the fields
-
that we need off of the request.
-
There's actually a few different ways that we can do it.
-
So we can do const data equals request.all.
-
And as they're telling us here within the hint,
-
this will return a reference to all our request data
-
within the body and the query string.
-
So whenever we call this,
-
we can console.log out our data
-
to see exactly what we've received.
-
Let's give that a save,
-
jump back into our register page.
-
And now the action for our form,
-
we want to send out to our new route
-
of off.register.store.
-
All right, so let's give that a save.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!