Welcome back.
So this video is a continuation of the last video where we did a conceptual overview of this dog demo
app and we talked about the TO GET request routes.
So again to reiterate same expectation to apply.
You do not need to understand 99 percent of this code if you can just treat things as conceptual blocks
and you can understand that this code here is responsible for the dogs get route and it somehow sends
you back a page that has a bunch of dogs on it.
That's all you need to know for now.
The same applies for the new concepts.
We're going to learn in this video.
The focus is not syntax it's on concepts.
So there's a third route down here that I didn't mention in the first video and it's slightly different
in that it's a post route.
So this code right here will only run when a user makes a POST request to slash create dog.
And just to jog your memory a user can't make a POST request by typing something into the you or Albar
.
Ninety nine point nine nine nine percent of the time that they'll be making a POST request is through
a form.
So we're going to see that in action in just a little bit.
But I can also demonstrate making a POST request through postman.
So post requests to slash create dog.
And what it will do is it will take the name in the breed that we send in the request which is what's
happening right here name is request up body name breed request up body outbreed.
So somehow in the request there is a name and a breed in this thing called the body and we're using
that to make a new dog.
And then we're redirecting the user back to slush dogs as a get request which will then run all of this
code which you'll find all the dogs and render the dogs page.
So a lot of things happening.
Let's start at the very beginning by sending a simple post request to slash create dog.
So let's go to postman and I'll change this over to the post and then we need to change the route to
be localhost 3000 slash create dog and we need to make sure that the server is still going OK when it
is.
And then we can start by just hitting send where we're not going to send a name and a read and we'll
see what happens.
So if you look at what we got back it's the same dogs page where has Rustie why it Daisy Sitka.
And then there's also an empty dog with no name and no breed.
And if I go to my browser here and I refresh I make another get request to slash dogs which will trigger
the code that retrieves all the dogs from the database and makes a little live for each one.
You can see in fact we do have an empty dog in the database and that's because we didn't send any data
.
We didn't send a name and a breed to make our new dog with.
So they were empty and our code just made an empty dog and saved it to the database.
So to send the data with postman we can go over to body and then we can just type some stuff to add
to the body.
So we want a name to be Charlie and read and the value for Breede will be lab just like that.
This is all we need to do through postman to make a post request that has name and breed inside of its
body.
And I'll hit send.
Now you'll see the response we get.
It's all the dogs again this time at the very end.
We have Charlie as a lab.
And if I refresh over here make another request I get all the dogs.
Charlie has been added.
Let's recap all of that in 30 seconds here.
So I make a request a post request to create dog just another type of request.
And in the request of body which is here I'm adding name and breed Charlie and lab.
And then I hit send and then in my code on the server is listening for a post request to slash dog.
And it creates a dog with the request somebody don't name and request somebody to outbreed which are
those two things that we sent with postman.
And then after it creates the dog it redirects us to slash dogs so it doesn't send us a page or any
age to him.
It actually runs the code in slash dogs right here which then finds all the dogs including the brand
new one we just created.
Charlie or in the previous case it was an empty dog with no name and no breed.
It retrieves all of them and then it renders that dog's template that we saw.
And for each one it makes us little ally.
So a lot of things happening.
It's listening for a POST request.
It's adding a new dog to a database and it's redirecting us to slash dogs.
Now let's talk about how we could do this with a form.
Remember we can't make a POST request by hitting enter in the bar but we can make one using a form.
So I'm going to add a form just to my dogs.
Yes.
At the very bottom.
Just going to make a form tag and there are two parts to a form which will now make more sense we talked
about them when I introduce forms originally but you didn't have much context to understand what they
meant.
So those two attributes are action and method.
So I'll start with Method.
We're making a post request and you often see this in all caps as well.
It doesn't matter.
And then the action is where we're making a post request which is just slash create dog.
So whenever this form is submitted it will send a post request to create dog which is what we're expecting
here.
POST request create dog will run this code.
Next we need to add our inputs.
So we're going to have two inputs.
Type equals text on both of them just like that and the out of place holder for this one that just says
name.
And then the next one will be for breed.
And the last thing we'll do is have an input type be called submit which will be our button and if we
refresh the page we now have a form but there's a problem.
If I fill this out.
So we add another dog here Skittles which can be a poodle when I hit submit it will send a post request
to slash create dog.
But watch when I do that we end up with an empty dog.
And that's because even though I have two inputs I haven't told the browser what the name of those inputs
are.
And this one needs to be called name which is a little confusing name because name and this one needs
to be breed and so does a placeholder.
So now what we've done is by adding this name attribute we've told the browser when the user submitted
this form send a post request to create dog with two pieces of data.
Name should be equal to whatever's in this input and breed is equal to whatever's in this input as well
.
We'll be spending tons of time writing forms and dealing with the different attributes.
So don't get too caught up in that.
But what's important now is that we are adding data to the body.
And if I refresh and add in Skittles who is a poodle and now I had submit you can see that it sent a
post request and you can see that right here post to slash create dog.
And then what happened is instead of that create dog right here it created a dog with the data from
the form the name and the breed.
And then after it created that dog and saved the database doesn't really matter how that works.
But it just works.
Then we redirect to slash dogs which is why there's actually a second little thing printed out here
that says a get request was made to slash dogs even though I didn't actually hit enter.
What happened is when I made a request to slash create dog as a post at the end of that it actually
makes another request for me to slash dogs.
And then that finds all the dogs and then it renders the dogs template which we see here and then we
get the form at the bottom and all the dog lies.
And that's why we see this here.
So if you pay really close attention to this icon right here you'll actually see so at another dog named
Snicker's keeping with the candy theme and snickers can be a lab as well.
When I hit submit.
Watch this very closely.
It's going to be really quick.
But it changed for just an instant.
And that's important because it shows that when I make a request it actually takes me away from this
page and then we're being redirected back here just super fast so we're not just staying on this page
the whole time it actually takes us away for an instant and then redirects us back and shows us this
content and that's what's happening here.
When you make a request to slash create dog then it redirects us to slash dogs.
And then inside dogs it renders us the dog's template which is how we see all of this in the browser
.
OK.
So we covered a lot there.
Let me just point out the important parts.
One is that inside of our server code we can distinguish between a get request and a post request and
we can do different code depending on what happened when and remember a get is to retrieve information
and a post is to add or submit information which is what we're using up for.
Slash create dog as a post is how you can create a new dog.
And there are two things that must be in the request body the name and the breed.
And if they're not there it will make an empty dog.
But whatever type of dog it makes it then redirects us to slash dogs which then runs all this code.
And the other important thing is that when we submit this there's an instantaneous refresh.
It's really really quick but it still is a refresh where we're making a request somewhere else.
Just like if I did this and I hit Enter we're actually making another request.
Same idea here.
When I hit submit.
Keep watching right here makes a request every time.
So that's all I want to talk about around this introduction two servers and two routes and HTP.
We're done for now.
So next up we're going to focus on getting our developer environment set up and installing all the tools
that you need so that we can start writing code like this.